@charset "UTF-8";
/* CSS Document */

body 
{	
		color: #69606b;
		/*GENERAL FONT
		NOT overriden below*/
		/******************************************************************************************************************************************************************************************************************************************COLOR*/		
		/*New background effect!!!!*/
		/*background:*/ /* top, translucent red, faked with gradient */
					/*linear-gradient(rgba(240,240,240, 0.9), rgba(240,240,240, 0.9)),*/
					/*OVER THE BG IMAGE POST PUSH-EFFECT*/
		                                                                                                                                                                                                                                     /***********/
		            /******************************************************************************************************************************************************************************************************************************COLOR*/
		                                                                                                                                                                                                                                     /***********/
					/*url('../../img/index_4gridVideos/0S2.jpg');*/
					 /*bottom image */
		/*background-attachment: fixed;
		background-position: top center;
		background-repeat: no-repeat;
		background-size: cover;*/
		/*New background effect!!!!*/
				
		background-color: rgb(255,255,255);
		/*BG POST PUSH-EFFECT
		in case we wanted a plain one*/
		                                                                                                                                                                                                                                     /***********/
		/******************************************************************************************************************************************************************************************************************************************COLOR*/
		                                                                                                                                                                                                                                     /***********/
}

.container2 > header
{	
		width: 90%;
		max-width: 69em;
		margin: 0 auto;
		/*HEADER*/
		/***************************************************************************************************************************************************************MARGIN*/
		padding: 2.875em 1.875em 1.875em;
		/*HEADER*/
		/***************************************************************************************************************************************************************PADDING*/
}

.container2 > header > span, 
.container2 > header > h1 
{
		text-align: center;
}

.container2 > header h1 
{	
		font-size: 2.125em;
		/*HEADER H1*/
		/************************************************************************************************************************************************************************************************************FONT SIZE*/
		line-height: 1.3;
		margin: 0 0 0.6em 0;
		/*HEADER H1*/
		/***************************************************************************************************************************************************************MARGIN*/
		font-weight: 400;
}

.container2 > header > span 
{	
		display: block;
		position: relative;
		z-index: 200;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.5em;
		padding: 0 0 0.6em 0.1em;
		/*HEADER SPAN*/
		/***************************************************************************************************************************************************************PADDING*/
}

.grid-gallery ul 
{	
		list-style: none;
		margin: 0;
		/*AMONG GRID ELEMENTS*/
		/***************************************************************************************************************************************************************MARGIN*/
		padding: 0;
		/*AMONG GRID ELEMENTS*/
		/***************************************************************************************************************************************************************PADDING*/
}

.grid-gallery figure 
{	
		margin: 0;
		/*GRID IMAGES*/
		/***************************************************************************************************************************************************************MARGIN*/
}

.grid-gallery figure img 
{	
		display: block;
		width: 100%;
}

.grid-gallery figcaption h3 
{	
		margin: 0;
		/*GRID ELEMENT TITLE TEXT*/
		/***************************************************************************************************************************************************************MARGIN*/
		padding: 0 0 0.5em;
		/*GRID ELEMENT TITLE TEXT*/
		/***************************************************************************************************************************************************************PADDING*/
}

.grid-gallery figcaption p 
{	
		margin: 0;
		/*GRID ELEMENT MAIN TEXT*/
		/***************************************************************************************************************************************************************MARGIN*/
}

.grid-wrap 
{	
		max-width: 69em;
		margin: 0 auto;
		/*AROUND THE GRID ELEMENTS...
		ESSENTIAL FOR HORIZONTAL ALIGNMENT*/
		/***************************************************************************************************************************************************************MARGIN*/
		padding: 0 1.5em 1.875em;
		/*AROUND THE GRID ELEMENTS...
		SECOND VALUE ESSENTIAL FOR NOT
		OVERLAPPING TOP NAVIGATION SYMBOL*/
		/***************************************************************************************************************************************************************PADDING*/
}

.grid 
{	
		margin: 0 auto;
		/*GENERAL GRID*/
		/***************************************************************************************************************************************************************MARGIN*/
}

.grid li 
{	
		width: 25%;
		float: left;
		cursor: pointer;
}

.grid figure 
{	
		padding: 15px;
		/*GRID IMAGE*/
		/***************************************************************************************************************************************************************PADDING*/
		-webkit-transition: opacity 0.2s;
		        transition: opacity 0.2s;
}

.grid li:hover figure 
{
		opacity: 0.7;
}

.grid figcaption 
{	
		background: rgb(240, 240, 240);
		/*BG GRID ELEMENT GENERAL TEXT*/
		                                                                                                                                                                                                                                     /***********/
		/******************************************************************************************************************************************************************************************************************************************COLOR*/
		                                                                                                                                                                                                                                     /***********/
		padding: 25px;
		/*AROUND GRID ELEMENT GENERAL TEXT*/
		/***************************************************************************************************************************************************************PADDING*/
}

.slideshow 
{	
		position: fixed;
		background: rgba(0,0,0,0.6);
		/*BG SLIDESHOW OVER GRID*/
		                                                                                                                                                                                                                                     /***********/
		/******************************************************************************************************************************************************************************************************************************************COLOR*/
		                                                                                                                                                                                                                                     /***********/
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 10500;
		opacity: 0;
		visibility: hidden;
		overflow: hidden;
		-webkit-perspective: 1000px;
		        perspective: 1000px;
		-webkit-transition: opacity 0.5s, visibility 0s 0.5s;
		        transition: opacity 0.5s, visibility 0s 0.5s;
}

.slideshow-open .slideshow 
{	
		opacity: 1;
		visibility: visible;
		-webkit-transition: opacity 0.5s;
		        transition: opacity 0.5s;
}

.slideshow ul 
{	
		width: 100%;
		height: 100%;
		-webkit-transform-style: preserve-3d;
		        transform-style: preserve-3d;
		-webkit-transform: translate3d(0,0,150px);
		        transform: translate3d(0,0,150px);
		-webkit-transition: -webkit-transform 0.5s;
		        transition: transform 0.5s;
}

.slideshow ul.animatable li 
{	
		-webkit-transition: -webkit-transform 0.5s;
		        transition: transform 0.5s;
}

.slideshow-open .slideshow ul 
{	
		-webkit-transform: translate3d(0,0,0);
		        transform: translate3d(0,0,0);
}

.slideshow li 
{	
		/*These three lines are those to be changed if a different size in each slideshow component is needed...
		The two first ones determine the size, the one below them allows for the slides to be centered.
		Pay attention to the fact that some of those below are half as much as those above them.
		The size of the slides should be given accordingly, in order to avoid an automatic increase in size and pixelation.*/
		width: 660px;
		height: 500px;
		margin: -250px 0 0 -330px;
		/*GENERAL SLIDESHOW
		ESSENTIAL FOR HORIZONTAL
		AND VERTICAL ALIGNMENT*/
		/***************************************************************************************************************************************************************MARGIN*/
		top: 50%;
		left: 50%;	
		visibility: hidden;	
		position: absolute;
}

#video_withtext
{
		width: 660px;
		height: 500px;
		margin: -250px 0 0 -330px;
}

.slideshow li.show 
{
		visibility: visible;
}

.slideshow li:after 
{	
		content: '';
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background: rgba(255,255,255, 0.8);
		/*COLOR OVER SLIDESHOW'S PREV AND NEXT SLIDES*/
		                                                                                                                                                                                                                                     /***********/
		/******************************************************************************************************************************************************************************************************************************************COLOR*/
		                                                                                                                                                                                                                                     /***********/
		-webkit-transition: opacity 0.3s;
		        transition: opacity 0.3s;
}

.slideshow li.current:after 
{	
		visibility: hidden;
		opacity: 0;
		-webkit-transition: opacity 0.3s, visibility 0s 0.3s;
		        transition: opacity 0.3s, visibility 0s 0.3s;
}

.slideshow figure 
{	
		width: 100%;
		height: 100%;
		background: rgb(240, 240, 240);
		/*SLIDE BG*/
		                                                                                                                                                                                                                                     /***********/
		/******************************************************************************************************************************************************************************************************************************************COLOR*/
		                                                                                                                                                                                                                                     /***********/
		border: 50px solid rgb(240, 240, 240);
		/*SLIDE BORDER*/
		                                                                                                                                                                                                                                     /***********/
		/******************************************************************************************************************************************************************************************************************************************COLOR*/
		                                                                                                                                                                                                                                     /***********/
		overflow: hidden;
}

.slideshow figcaption 
{	
		text-align: justify;
		padding-bottom: 20px;
		/*SLIDE GENERAL TEXT*/
		/***************************************************************************************************************************************************************PADDING*/
}

.slideshow figcaption h3 
{	
		text-align: left;
		font-weight: 300;
		font-size:200%;
		/*SLIDE TITLE*/
		/************************************************************************************************************************************************************************************************************FONT SIZE*/
}

.slideshow nav span 
{	
		position: fixed;
		z-index: 11000;
		text-align: center;
		cursor: pointer;
		font-size: 2.2em;
		/*SLIDESHOW CLOSING CROSS AND ARROWS*/
		/************************************************************************************************************************************************************************************************************FONT SIZE*/
}

.slideshow nav span.nav-prev,
.slideshow nav span.nav-next 
{	
		top: 50%;
		margin: 3%;
		/*SLIDESHOW ARROWS
		ESSENTIAL FOR HORIZONTAL
		AND VERTICAL ALIGNMENT*/
		/***************************************************************************************************************************************************************MARGIN*/
		-webkit-transform: translateY(-50%);
		        transform: translateY(-50%);
}

.slideshow nav span.nav-next 
{	
		right: 0;
}

.slideshow nav span.nav-close 
{		
		top: 0;
		right: 0;
		margin: 1%;
		margin-top: 0%;
		/*SLIDESHOW CLOSING CROSS
		ESSENTIAL FOR HORIZONTAL
		AND VERTICAL ALIGNMENT*/
		/***************************************************************************************************************************************************************MARGIN*/
}

.slideshow nav span.nav-prev,
.slideshow nav span.nav-next,
.slideshow nav span.nav-close
{
		color: #31373a;
		/*SLIDESHOW CLOSING CROSS AND ARROWS*/
		/******************************************************************************************************************************************************************************************************************************************COLOR*/
}

span.nav-prev:before 
{	
		content: "\276E";
}

span.nav-next:before  
{	
		content: "\276F";
}

span.nav-close:before 
{	
		content: "\2573";
}

.info-keys 
{	
		position: fixed;
		bottom: -20px;
		left: 10px;
		width: 60px;
		font-size: 7px;
		/*NAVIGATION INFO TEXT*/
		/************************************************************************************************************************************************************************************************************FONT SIZE*/
		padding-top: 20px;
		/*NAVIGATION INFO ARROWS*/
		/***************************************************************************************************************************************************************PADDING*/
		text-transform: uppercase;
		color: rgb(255, 255, 255);
		/*NAVIGATION INFO KEYS*/
		/******************************************************************************************************************************************************************************************************************************************COLOR*/
		letter-spacing: 1px;
		text-align: center;
}

.info-keys:before, 
.info-keys:after 
{	
		position: absolute;
		top: 0;
		width: 16px;
		height: 16px;
		border: 1px solid;
		text-align: center;
		line-height: 14px;
		font-size: 12px;
		/*NAVIGATION INFO ARROWS*/
		/************************************************************************************************************************************************************************************************************FONT SIZE*/
}

.info-keys:before 
{	
		left: 10px;
		content: "\276E";
}

.info-keys:after 
{	
		right: 10px;
		content: "\276F";
}

@media screen and (max-width: 75em) 
{
	.slideshow li,
	#video_withtext 
	{		
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			margin: 0;
			/*GENERAL SLIDESHOW
			ESSENTIAL FOR HORIZONTAL
			AND VERTICAL ALIGNMENT*/
			/***************************************************************************************************************************************************************MARGIN*/
	}

	.slideshow li figure img 
	{		
			width: auto;
			margin: 0 auto;
			/*SLIDESHOW IMAGE
			ESSENTIAL FOR HORIZONTAL
			AND VERTICAL ALIGNMENT*/
			/***************************************************************************************************************************************************************MARGIN*/
			max-width: 100%;
			margin-top: 5%;
			/*SLIDESHOW IMAGE
			ESSENTIAL FOR HORIZONTAL
			AND VERTICAL ALIGNMENT*/
			/***************************************************************************************************************************************************************MARGIN*/
	}
	
	.slideshow figcaption 
	{		
			margin-top: 7.5%;
			/*SLIDE GENERAL TEXT
			VERTICAL ALIGNMENT*/
			/***************************************************************************************************************************************************************MARGIN*/
	}

	.slideshow nav span, 
	.slideshow nav span.nav-close 
	{		
			font-size: 1.8em;
			/*SLIDESHOW CLOSING CROSS AND ARROWS*/
			/************************************************************************************************************************************************************************************************************FONT SIZE*/
	}

	.info-keys 
	{		
			display: none;
	}
}

@media screen and (max-width: 60em) 
{	
	.grid li 
	{		
			width: 33.3%;
	}	
}

@media screen and (max-width: 35em) 
{
	.grid li 
	{	
			width: 50%;
	}
}

@media screen and (max-width: 24em) 
{	
	.grid li 
	{		
			width: 100%;
	}
}