/* CSS Document */

h1 { color:rgb(0, 0, 0); top:30%; }	 
	
header .bg2 { opacity:0; }

header > .wrap  { padding-top:53%; }

header .contact { color:#000; }


.skitter { float:left; margin:5px; }
	.skitter p { text-align:center; margin-top:10px; }	

	
#right-slider { width:31%; margin:0 1%; display:inline-block; vertical-align:top; }
	#right-slider a         { display:block; }
		#right-slider a + a { margin-top:2.2%; }
	#right-slider img       { width:100%; }
	
#static-banners	a { width:31%; margin:1%; display:inline-block; }
	#static-banners img { width:100%; }	

/*#index-news, #index-events { display:inline-block; width:47%; margin:1%; vertical-align:top; }*/

#index-events { display:inline-block; width:30%; margin:3%; vertical-align:top; }

#index-products { display:inline-block; width:55%; margin:3%; vertical-align:top; }
	#index-products li { width:45%; }



/* ==========================================================================
   Media Queries Products
   ========================================================================== */ 


@media only screen and (max-width:1150px) {	

}

@media only screen and (max-width:900px) {	

	#index-menu li { width:22%; }
}

@media only screen and (max-width:700px) {	
	
	h1 { padding-top:5%; }
	
	header > .wrap  { padding-top:90%; }
	
	header .bg, header .bg2 { padding-top:90%; }
}

@media only screen and (max-width:680px) {	

	#index-menu li { margin:0 2% 2% 2%; width:28%; }
	
	#index-events   { width:43%; }
	#index-products { width:43%; }

	#productsPage li  { margin:4%; width:41%; }	
}

@media only screen and (max-width:590px) {	

	#productsPage li  { margin:5%; width:90%; }		
}

@media only screen and (max-width:450px) {	

	h1 { font-size:2.5em; padding-top:11%; }

	#index-menu li { width:45%; }
	
	#index-events   { display:block; width:inherit; }
	#index-products { display:block; width:inherit; }
	
	#productsPage li  { margin:3%; width:auto; display:block; }
}