@charset "utf-8";


* {
  margin: 0;
  padding: 0;
}

/*	TABLE ______________________  */

div.table {
/*	border: 1px solid green;*/
	display: table;
	width:100%;
	margin:0px auto;
}
div.tr {
	display: table-row;
	height:auto;
}
div.td {
	border: 1px solid #fff;
	display: table-cell;
	height:auto;
	background:#fff;
}

/*.col1 { width: 60%; background:grey !important; }
.col2 { width: 30%; background:grey !important;	}
.col3 { width: 10%;		}

*/

/*table one*/
div.one .col1	{ width: 35%; padding:0px; }
div.one .col2	{ width: 65%; padding:0px; }


/*	Global ___________________________________  */

#container {
	margin:0 auto;
	/*    width: 700px; */
	width:100%;
	height: 300px;
	background:grey;
	position: relative;
}
.red {
	width:100%;
	height:540px;
	/*shadow*/
	-webkit-box-shadow: 0px 15px 20px rgba(50, 50, 50, 0.45);
	-moz-box-shadow:    0px 15px 20px rgba(50, 50, 50, 0.45);
	box-shadow:         0px 15px 20px rgba(50, 50, 50, 0.45);
	}

.blue {	height: 900px !important; }	/*	truck v height only	*/
#blue {
	z-index: 2;
	width: 100%;
	height: 1100px;
	position: relative;
/*	background:blue;*/
	background:#eee;	
		/*shadow*/
		-webkit-box-shadow: 0px 15px 20px rgba(50, 50, 50, 0.45);
		-moz-box-shadow:    0px 15px 20px rgba(50, 50, 50, 0.45);
		box-shadow:         0px 15px 20px rgba(50, 50, 50, 0.45);
	/*opacity*/	
	-moz-opacity: 	0.8;
	opacity: 		0.8;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=80);		
}
#green {
	z-index: 599;
	width: 50%;
	height: 100%;
	position: absolute;
	top: 50px;
	right: 0;/*	background:green;	*/	
	}
#green img {
	-moz-opacity: 	0.90;
	opacity: 		0.90;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=90);	
	}
	#green a:hover img {
	-moz-opacity: 	1.0;
	opacity: 		1.0;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=100);	
	}

.bg	{
	z-index:1;
	position:relative;
	top: 0px;
	left: 0px;
	}

.info	{
	position:absolute; z-index:15;	
	width:90%;			/* X */
	top: 20%;			/*vertical position*/
	margin: 10px 0 0 5%;	/* = (100% -(X Width))/2 */
	}	
	

img { max-width: 100%; height: auto; width: auto\9; /* ie8 */ }

.wrapper {	
	overflow: hidden; background: #fff; 
	padding:10px 0px ;						/*	master vertical row padding		*/
	}

/* set html5 elements to block */
	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	font-family: Arial, Helvetica, sans-serif;
	margin: 0 auto !important;
	padding:0px;	
	color:#666;
	line-height:16px;
	font-size:11px;
	background:#CCC;	
	max-width: 1100px;			/*same*/
	width: 100%;				/*page width */	
	}
	
#pagewrap {
/*	max-width: 1100px;	*/		/*same*/
	width: 100%;
	margin: 0 auto;
	z-index:10;
	position:relative;
	top:0;	
	}

.content {
	background: rgba(255,255,255,0.75);
	z-index:10;	
	width:87.5%;			/* X */
	position:absolute;	
	top: 320px;			/* vertical position of body */
	margin: 0 0 0 5%;	/* = (100% -(X Width))/2 */
	padding:1.5%;
	/*shadow*/
	-webkit-box-shadow: 0px 15px 20px rgba(50, 50, 50, 0.45);
	-moz-box-shadow:    0px 15px 20px rgba(50, 50, 50, 0.45);
	box-shadow:         0px 15px 20px rgba(50, 50, 50, 0.45);
	}	
	.c2 {
		top: 200px !important;	/* vertical over ride of .content */
/*		background:grey;*/
		}		


/*	COLUMN
______________________________________________________________________
____________________________________________________________________ */

.col {
		float: left; margin-left: 0; margin-bottom: 0px;
/*		height:60px;*/		}
		
	.fullwidth .col { float: none; margin-left: 0;	}
	.grid6 .col#test {	width: 28% !important; padding-top:15px;	}
	
	.grid6 .col {	width: 16.6666%;	}
	.grid5 .col {	width: 20%;	}
	.grid4 .col {	width: 25%;	}
	.grid3 .col { 	width: 33.33%;	}
	.grid2 .col {	width: 50%;	}
	/* clear col */
	.grid4 .col:nth-of-type(4n+1),
	.grid3 .col:nth-of-type(3n+1),
	.grid2 .col:nth-of-type(2n+1) {
		margin-left: 0;
		clear: left;
	}
/*	MEDIA QUERIES _____________________________________________________________  */

@media screen and (min-width: 1400px) {	
body {	font-size:14px; line-height:18px;	 }
.content { position:absolute; top: 400px; /*vertical position*/	}		
.red {
	width:100%;
	height:600px;	/*controlls v position of div.info*/
}
}
@media screen and (max-width: 740px) {	/* reset cols to 3-column */
.content {
	position:absolute;
	top: 302px; /*vertical position*/
}		

	.grid6 .col:nth-of-type(6n-0) { margin-left: 0; clear: none; }
	.grid6 .col { width: 33.3333%	}
	.grid4 .col { width: 50%;  }
	.grid4 .col:nth-of-type(3n+1) {margin-left: 0; clear: none; }
	.grid4 .col:nth-of-type(2n+1) {margin-left: 0; clear: left; }

.table,.tr, .td { display:block !important; height:inherit; width:100%; }
/*table one*/
div.one .col1	{ width: 100%; }
div.one .col2	{ width: 100%; float:none; height:auto;
	 }
	.grid6 .col#test {	width: 60% !important; padding-top:15px;	}

}
@media screen and (max-width: 600px) {	/* reset cols to 2-column */
.content { position:absolute; top: 240px; /*vertical position*/	 
	/*shadow*/
	-webkit-box-shadow: 0px 0px 0px rgba(50, 50, 50, 0.45);
	-moz-box-shadow:    0px 0px 0px rgba(50, 50, 50, 0.45);
	box-shadow:         0px 0px 0px rgba(50, 50, 50, 0.45);
	}		
body { font-size:10px;	line-height:12px;	}
	.grid5 .col {	width: 50%		}
	.grid5 .col:nth-of-type(5n-0) { margin-left: 0;	clear: none; }
	.grid4 .col {width: 50%; }
	.grid4 .col:nth-of-type(3n+1) {margin-left: 0;	clear: none; }
	.grid4 .col:nth-of-type(2n+1) {margin-left: 0;	clear: left; }
	.grid3 .col {width: 50%; }
	.grid3 .col:nth-of-type(3n+1) {margin-left: 0;	clear: none; }
	.grid3 .col:nth-of-type(2n+1) {margin-left: 0;	clear: left; }
}
@media screen and (max-width: 400px) {	/* reset cols to fullwidth */
	.grid6 .col:nth-of-type(6n-0) {	margin-left: 0;	clear: none;	}
	.grid6 .col { width: 100% !important;}	
	.col {width: 100% !important; margin-left: 0 !important; clear: none 
	!important; }

.content {	position:absolute; top: 340px; /*vertical position*/	}	

body {	font-size:10px;	 }
#pagewrap {	width:100%;	padding:0px; margin: 0px;	}

.info img { width:200px; margin-top:-30px }

#green {
	z-index: 599;
	width: 100%;
	height: auto;
	position: relative;
	top:120px;
	display:block;
	/*	background:green;
*/	clear:both;
}	

	.grid6 .col#test {	width: 100% !important; padding-top:15px;	}

}