/* `Container
----------------------------------------------------------------------------------------------------*/

.container_12,
.container_16 {
  margin-left: auto;
  margin-right: auto;
  max-width: 960px;
  width:100%;
}

/* `Grid >> Global
----------------------------------------------------------------------------------------------------*/

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12{
  display: inline;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
}
.container_12 .grid_3{
  width: 220px;
}

.container_12 .grid_6{
  width: 460px;
}

.container_12 .grid_9{
  width: 700px;
}

.container_12 .grid_12{
  width: 940px;
}

/* `Grid >> Children (Alpha ~ First, Omega ~ Last)
----------------------------------------------------------------------------------------------------*/

.alpha {
  margin-left: 0;
}

.omega {
  margin-right: 0;
}
.alignLeft{
	text-align:left;
}
.alignCenter{
	text-align:center;
}
.alignRight{
	text-align:right;
}

/* `Grid >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.container_12 .grid_1 {
  width: 60px;
}

.container_12 .grid_2 {
  width: 140px;
}

.container_12 .grid_4 {
  width: 300px;
}

.container_12 .grid_5 {
  width: 380px;
}

.container_12 .grid_7 {
  width: 540px;
}

.container_12 .grid_8 {
  width: 620px;
}

.container_12 .grid_10 {
  width: 780px;
}

.container_12 .grid_11 {
  width: 860px;
}

/* `Clear Floated Elements
----------------------------------------------------------------------------------------------------*/

/* http://sonspring.com/journal/clearing-floats */

.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */

.clearfix:before,
.clearfix:after,
.container_12:before,
.container_12:after,
.container_16:before,
.container_16:after {
  content: '.';
  display: block;
  overflow: hidden;
  visibility: hidden;
  font-size: 0;
  line-height: 0;
  width: 0;
  height: 0;
}

.clearfix:after,
.container_12:after,
.container_16:after {
  clear: both;
}

/*
  The following zoom:1 rule is specifically for IE6 + IE7.
  Move to separate stylesheet if invalid CSS is a problem.
*/

.clearfix,
.container_12,
.container_16 {
  zoom: 1;
}

img{
	max-width:100%;
	height:auto;
}

/* iPads (landscape) ----------- */
/* Smartphones (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
	#frontTeaser{
		display:none;
	}
	#contentarea, footer .container_12{
		width:90%;
	}

	.grid_1,
	.grid_2,
	.grid_3,
	.grid_4,
	.grid_5,
	.grid_6,
	.grid_7,
	.grid_8,
	.grid_9,
	.grid_10,
	.grid_11,
	.grid_12{
		width:100% !important;
		margin:0px !important;
	}
	header[role="banner"]{
		position:relative;
		width:90%;
	}
	body.contact header[role="banner"]{
		width:auto !important;
	}
	nav[role="navigation"]{
		border-top:5px solid #0A2803;
	}
	nav[role="navigation"]{
		position:relative;
	}
	nav[role="navigation"] ul{
		padding:15px 0 !important;
		overflow:hidden;
	}
	#menuInmobile{
		height:30px;
		line-height:30px;
	}
	.ourProducts{
		border-top:5px solid #0A2803 !important;
	}
	footer .grid_4{
		border-bottom:1px solid #292929;
		border-top:1px solid #5A5A5A;
		padding:30px 0;
	}
	.socialized{
		position:absolute;
		right:18px !important;
		width:auto !important;
		top:100px;
	}
	#visionInteriors-all #yoo-zoo .teaser-item{
		padding-top:175px !important;
	}
		#yoo-zoo .items div.pos-content{
			padding:0 10px;
		}
	#contactPage .gMap{
		float:left !important;
		width:372px !important;
	}
	#contactPage .contactInformation{
		margin-right:0px !important;
	}
	.customContactText p{
		margin-top:55px !important;
		padding:0 50px !important;
	}
	
	
	footer .grid_4{
		border-bottom:1px solid #292929;
		border-top:1px solid #5A5A5A;
		padding:30px 0;
	}
	footer .grid_1{
		border-top:1px solid #5A5A5A;
	}
	footer .grid_4.alpha{
		border-top:none !important;
		padding-top:0px !important;
	}
	
	footer[role="contentinfo"] footer p.grid_6{
		width:50% !important;
	}
	
	#aside{
		margin-top:50px !important;
	}
	input#subject, input#email, input#name, textarea#message{
		width:600px !important;
		display:block;
	}



}
html {-webkit-text-size-adjust: none;} 
@media screen and (max-width: 480px) {
	#frontTeaser{
		display:none;
	}
	#contentarea, footer .container_12{
		width:90%;
	}

	.grid_1,
	.grid_2,
	.grid_3,
	.grid_4,
	.grid_5,
	.grid_6,
	.grid_7,
	.grid_8,
	.grid_9,
	.grid_10,
	.grid_11,
	.grid_12{
		width:100% !important;
		margin:0px !important;
	}
	header[role="banner"]{
		position:relative;
		margin-bottom:30px;
		width:90%;
	}
	
	body.contact header[role="banner"], body.home header[role="banner"]{
		width:auto !important;
	}
	
	nav[role="navigation"]{
		background:#528F36;
		border-top:5px solid #0A2803;
	}
	nav[role="navigation"]{
		position:relative;
	}
	nav[role="navigation"] ul{
		background:#000;
		display:none;
		position:absolute;
		top:50px;
		left:0px;
		padding-top:0px !important;
		z-index:999;
		box-shadow:r
	}
	nav[role="navigation"] ul li a, #menuInmobile{
		text-shadow:none !important;
		color:#fff !important;
		padding:10px 20px !important;
	}
	#menuInmobile{
		height:30px;
		line-height:30px;
	}
	#menuInmobile.active{
		background:url(../images/menuInmobile.png) no-repeat 20px bottom;
		color:#000 !important;
	}
	nav[role="navigation"] ul li, nav[role="navigation"] ul li a{
		float:none !important;
		display:block !important;
	}
	nav[role="navigation"] ul li a{
		width:130px !important;
	}
	nav[role="navigation"] ul li a:hover{
		color:#528F36 !important;
	}
	.ourProducts{
		margin-top:30px !important;
		border-top:5px solid #0A2803 !important;
	}
	footer .grid_4{
		border-bottom:1px solid #292929;
		border-top:1px solid #5A5A5A;
		padding:30px 0;
	}
	footer .grid_1{
		border-top:1px solid #5A5A5A;
	}
	footer .grid_4.alpha{
		border-top:none !important;
		padding-top:0px !important;
	}
	footer[role="contentinfo"] footer p{
		text-align:left !important;
		padding-bottom:15px !important;
	}
		footer[role="contentinfo"] footer p.alignRight{
			padding-top:0px !important;
		}
		footer[role="contentinfo"] footer p.alignRight a, footer[role="contentinfo"] footer p.alignRight span{
			float:left !important;
		}
		footer[role="contentinfo"] footer p.alignRight span{
			margin-right:5px;
		}
	#main ul li{
		width:auto !important;
	}
	#menuInmobile{
		display:block !important;
	}
	#aside{
		margin-top:50px !important;
	}
	.contactUsform .moduletable{
		margin:0 20px !important;
	}
	.contactInformation{
		width:100%;
		border-top:none !important;
	}
		.contactUsform input[type="text"], .contactUsform input[type="email"], .contactUsform input[type="password"], .contactUsform input[type="url"], .contactUsform textarea, input[type="text"], input[type="email"], input[type="url"], input[type="phone"], input[type="password"], textarea{
			width:90% !important;
			float:none !important;
		}
		.contactUsform label, .contactUsform h3{
			text-align:left !important;
		}
		.inputButtons{
			padding-left:0px !important;
		}
		.customContactText p{
			margin-top:50px !important;
			padding:0 20px !important;
		}
	.socialized{
		position:absolute;
		right:18px !important;
		width:auto !important;
		top:89px;
	}
	#yoo-zoo .items div.teaser-item:last-child div.teaser-item-bg{
		background:none !important;
		padding:0px !important;
	}
	.error404 #main p{
		padding:0px !important;
		margin:30px 0 100px !important;
	}
	#yoo-zoo .width33{
		width: 100% !important;
	}

}