@import "../global.css";

/*		Default Layout:992px. 
		Gutters:24px.
		Outer margins:48px.
		Leftover space for scrollbars @1024px:32px.
-------------------------------------------------------------------------------
cols		1		 2			3			4			5			6			7			8			9			10
px			68		160		252		344		436		528		620		712		804		896		*/

	#content-wrapper{}
		
	.gallery{ width:630px; margin:0 0 30px 0; }
		.gallery h3{
			font-size:19px; line-height:18px; margin:0; padding:0 0 10px 0; border-bottom:1px solid #EEE;
			font-style:italic; font-weight:300; color:#9ECC3F;
		}
		.gallery ul{ list-style:none; margin:0; padding:15px 0; }
			.gallery ul li.image, .gallery ul li.file
			{ float:left; width:176px; margin:0 30px 10px 0; }
			
				.gallery ul li.image img{ width:176px; height:107px; overflow:hidden; }
				.gallery ul li.file img{ width:176px; height:107px; overflow:hidden; }
			
			.gallery ul li.image{}
				.gallery ul li.image .mask{ position:relative; z-index:2; }
				.gallery ul li.image .thumb{ position:relative; z-index:1; margin:-111px 0 0 0; }
				.gallery ul li.image .legenda{ margin:0px; font-size:11px; color:#333; line-height:10px; }
			
			.gallery ul li.video{ float:left; width:290px; margin:0 10px 20px 0; }
				.gallery ul li.video iframe{ width:290px; }
				.gallery ul li.video .legenda{ margin:0px; font-size:11px; color:#333; line-height:10px; }
			
			.gallery ul li.file{}	
				.gallery ul li.file .legenda{ margin:0px; font-size:11px; color:#333; line-height:10px; }
				
	
/*		Tablet Layout:768px.
		Gutters:24px.
		Outer margins:28px.
		Inherits styles from:Default Layout.
-----------------------------------------------------------------
cols    1     2      3      4      5      6      7      8
px      68    160    252    344    436    528    620    712    */

@media only screen and (min-width:768px) and (max-width:991px) {

	#content-wrapper{}
		
	.gallery{ width:87%; margin:0 0 30px 0; padding:0 9%; }
		.gallery h3{
			font-size:19px; line-height:18px; margin:0; padding:0 0 10px 0; border-bottom:1px solid #EEE;
			font-style:italic; font-weight:300; color:#9ECC3F;
		}
		.gallery ul{ list-style:none; margin:0; padding:15px 0; }
			.gallery ul li.image, .gallery ul li.file
			{ float:left; width:176px; margin:0 30px 10px 0; }
			
				.gallery ul li.image img{ width:176px; height:107px; overflow:hidden; }
				.gallery ul li.file img{ width:176px; height:107px; overflow:hidden; }
			
			.gallery ul li.image{}
				.gallery ul li.image .mask{ position:relative; z-index:2; }
				.gallery ul li.image .thumb{ position:relative; z-index:1; margin:-111px 0 0 0; }
				.gallery ul li.image .legenda{ margin:0px; font-size:11px; color:#333; line-height:10px; }
			
			.gallery ul li.video{ float:left; width:290px; margin:0 10px 20px 0; }
				.gallery ul li.video iframe{ width:290px; }
				.gallery ul li.video .legenda{ margin:0px; font-size:11px; color:#333; line-height:10px; }
			
			.gallery ul li.file{}	
				.gallery ul li.file .legenda{ margin:0px; font-size:11px; color:#333; line-height:10px; }
}

/*		
	Mobile Layout:480px.
	Gutters:24px.
	Outer margins:22px.
	Inherits styles from:Default Layout
*/

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

	#content-wrapper{}
		
	.gallery{ width:100%; margin:0 0 30px 0; padding:0; }
		.gallery h3{
			font-size:19px; line-height:18px; margin:0; padding:0 0 10px 0; border-bottom:1px solid #EEE;
			font-style:italic; font-weight:300; color:#9ECC3F;
		}
		.gallery ul{ list-style:none; margin:0; padding:15px 0; }
			.gallery ul li.image, .gallery ul li.file
			{ float:left; width:176px; margin:0 30px 10px 0; }
			
				.gallery ul li.image img{ width:176px; height:107px; overflow:hidden; }
				.gallery ul li.file img{ width:176px; height:107px; overflow:hidden; }
			
			.gallery ul li.image{ padding:0; margin:0 0 0 30px; }
				.gallery ul li.image .mask{ position:relative; z-index:2; }
				.gallery ul li.image .thumb{ position:relative; z-index:1; margin:-111px 0 0 0; }
				.gallery ul li.image .legenda{ margin:0px; font-size:11px; color:#333; line-height:10px; }
			
			.gallery ul li.video{ float:left; width:100%; margin:0 10px 20px 0; }
				.gallery ul li.video iframe{ width:100%; height:240px; }
				.gallery ul li.video .legenda{ margin:0px; font-size:11px; color:#333; line-height:10px; }
			
			.gallery ul li.file{ padding:0; margin:0 0 0 30px; }	
				.gallery ul li.file .legenda{ margin:0px; font-size:11px; color:#333; line-height:10px; }
				
}
/*		
	Wide Mobile Layout:480px.
	Gutters:24px.
	Outer margins:22px.
	Inherits styles from:Default Layout, Mobile Layout.
*/

@media only screen and (min-width:480px) and (max-width:767px) {
	
	#content-wrapper{}
	
}