@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
/*Contribution of Mandimby Harinas on Labradorite Blocks*/
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}
/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		5;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	10;
	dw-gutter-percentage:	25;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/


@font-face {
    font-family: 'copperplate_gothic_lightRg';
    src: url('../font/coprgtl-webfont.eot');
    src: url('../font/coprgtl-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/coprgtl-webfont.woff') format('woff'),
         url('../font/coprgtl-webfont.ttf') format('truetype'),
         url('../font/coprgtl-webfont.svg#copperplate_gothic_lightRg') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* =================================================================================================================
			MOBILE LAYOUT: 480px and below.
			======================================================================================================== */
body {
	background-image: url('../images/labradorite-tiles-mob-bg.jpg');
	background-position: center top;
	background-repeat: no-repeat;
}
.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 96%;
	padding-left: 2%;
	padding-right: 2%;
}
#Wrapper {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#logo {
	padding: 15px 0 0 0;
	width: 150px;
	margin: 0 auto;
}
#header {position: relative; clear: both; height: 325px;}
#slogan {
	left: 0px;
	right: 0px;
	margin: auto;
	width: 70%;
	text-align: center;
	margin: 0 auto;
	position: absolute;
	text-align: center;	
}
#slogan h1 {
	font-family: Arial, Helvetica, sans-serif;
	letter-spacing: -0.08em;
	color: #ffffff;
	text-shadow: 1px 1px 1px #262626;
	font-size: 2em; 
}
#middle {
	clear: both;
	margin-top: 85px;
	background-color: #fff; padding: 0 1.8%;
}
#middle h2 { 
	text-align: center; padding: 2em 0 0 0; letter-spacing: -0.03em; font-weight: 600; margin: 0;
}
#middle #under-middle {
	margin: 0 auto; width: 100%; text-align: center; line-height: 1.8em; color: #707070;
}
#line-separ {
	height: 15px; border-top-style: solid; border-top-color: #b5b5b5; border-top-width: 1px; margin: 0 auto; width: 20%;
}

/**category style **/
#category {
	margin: 0; padding: 0;
}
#category li {
	text-decoration: none; list-style: none;
	width: 95%; text-align: center; margin: 15px 2.5% 0px -1.9%;
	background-color: #fff;
}
#category #link-1 { background-image:url('../images/cat/cat-labradorite-tiles-blue-granite-tiles.jpg'); background-position: center top; background-repeat: no-repeat;
 width: 95% !important;
}
#category #link-2 { background-image:url('../images/cat/link-2-labradorite-slabs.jpg'); background-position: center top; background-repeat: no-repeat;}
#category #link-3 { background-image:url('../images/cat/link-3-labradorite-bolders.jpg'); background-position: center top; background-repeat: no-repeat;}
#category #link-4 { background-image:url('../images/cat/link-4-labradorite-quarry.jpg'); background-position: center top; background-repeat: no-repeat;}
#category #link-5 { background-image:url('../images/cat/link-1-labradorite-blocks.jpg'); background-position: center top; background-repeat: no-repeat;}
#category #link-6 { background-image:url('../images/cat/link-6-labradorite-quarry-video.jpg'); background-position: center top; background-repeat: no-repeat;}

#category a {
	display: block;
	text-decoration: none;
	margin: 0px 0;
	bottom: 0px;
	padding: 143px 0;
	margin: -12px 0;
}
#category li a:hover {
	color: #fff !important;
	background-color: #006987;
	transition: all 0.2s linear;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	opacity:0.8; filter: alpha(opacity=80);
}
#category p, #category p a {
	font-family: "Montserrat", Arial Black, Gadget, sans-serif; font-size: 1em; font-weight: bold; color: #fff;
	text-shadow: 1px 1px 1px #262626; letter-spacing: -0.05em; margin: 0; text-transform: uppercase;
}
#category p a:hover {color: black; text-shadow: none; }

/* =================================================================================================================
			TABLET LAYOUT: 481px to 800px. Inherits styles from: Mobile Layout.
			======================================================================================================== */

@media only screen and (min-width: 481px) {
body {
	background-image: url('../images/labradorite-tiles-tab-bg.jpg');
	background-position: center top;
	background-repeat: no-repeat;
}
.gridContainer {
	width: 97.5%;
	padding-left: 1.25%;
	padding-right: 1.25%;
}
#Wrapper {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#logo {
	padding: 15px 0 0 0;
	width: 150px;
	margin: 0 auto;
}
}

/* =================================================================================================================
			DESKTOP LAYOUT: 800px (to a max of 1800px).  Inherits styles from: Mobile Layout and Tablet Layout.
			======================================================================================================== */

@media only screen and (min-width: 800px) {
body {
	background-image: url('../images/labradorite-tiles-desk-bg.jpg');
	background-position: center top;
	background-repeat: no-repeat;
}
.gridContainer {
	max-width: 1800px;
	width: 90%;
	/*padding-left: 1%;
	padding-right: 1%;*/
	margin: auto;
}
#Wrapper {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#logo {
	padding: 15px 0 0 0;
	width: 200px;
	float: left;
}
#header {
	position: relative; height: 707px;
}
#slogan {
	margin: 0 auto;
	max-width: 820px;
	position: absolute;
	text-align: center;
	margin-top: 310px;
	height: 200px;;
	font-size: 40px;
	letter-spacing: -15px;
}
#slogan h1 {
	font-family: "Montserrat", Arial Black, Gadget, sans-serif; letter-spacing: -0.06em; color: #ffffff; text-shadow: 1px 1px 1px #262626;
	font-size: 90px; margin: 0; padding: 0; 
}
#middle {
	position: relative; margin-top: 0;
}
#middle h2 { 
		font-size: 24px; text-align: center; padding: 6em 3em 0.5em 3em; margin: 0; 
		color: #333; font-weight: 100;
}
#middle #under-middle {
	margin: 0 auto; width: 100%; text-align: center; color: #707070; height: 150px;
}
/**   CATEGORY STYLE for > 768px   **/
#category {
	height: 1070px; position: relative;
}
#category li {
	
	float: left; text-decoration: none; list-style: none;
	width: 47%; text-align: center; margin: 2% 0.5% -1% 0.5%;/*3% 1.12% -1% 1.12%;*/
	background-color: #fff;
}
#category p a {
	font-family: "Montserrat", Arial, Helvetica, sans-serif; font-size: 14px; font-weight: 800;
}
#category a {
	display: block;
	color: #ececec;
	text-decoration: none;
	margin: 0px 0;
	bottom: 0px;
	padding: 145px 0;
	margin: -12px 0;
}
#category li a:hover {
	color: #fff;
	background-color: #006987;
	transition: all 0.2s linear;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	text-shadow: none;
}
}