@font-face {
    
	 font-family: 'netdesign_ubuntu';
    src: local('OpenSans-Regular'), url('./fonts/OpenSans-Regular.ttf') format('truetype'); 
}



body{font-size: 12pt; margin: 0px; color: #dddddd; text-align:justify; background-color: #666666; background-size: cover; }

a{ text-decoration: none;}

.logo{color:#cccccc; font-size:4em; line-height:1em;  letter-spacing:0.20em; font-family: 'Times New Roman';     width:100%; margin:0 auto;  margin-top:0.35em; text-align: center; font-weight:normal;}
.sublogo{ color:#C4D1FF; font-size:2.28em;   letter-spacing:0.08em; font-family: 'Times New Roman';  margin:0 auto;   margin-bottom:0.45em; text-align: center; font-weight:normal;}

.divisor{

	clear:both; 
} 

.menu{ 
	margin-top: 0; 
	margin-bottom: 0; 
	padding: 0;
	border-bottom: 1px solid #cccccc;
	border-top: 1px solid #cccccc;
	text-align: center;
	width: 100%;
	margin: 0 auto;
	
}
.menu ul{ 
	margin:0 auto; 
	padding:0; 
	width:100%; 
	list-style: none;
	display: inline-block;
	vertical-align: middle;
}
.menu li { 
	margin-top: 0.4em; 
	margin-bottom: 0.4em; 
	float:left; 
	text-align: center; 
	padding: 0; 
	width: 16.66%; 
	font-family: 'netdesign_ubuntu';  
	font-weight:normal;  
	height:100%; 
	font-size:1.05em; 
	letter-spacing:0.14em;
	display:inline-block;
}
.menu li.selected{ 
	color: #C4D1FF;
}
.menu a{
	color:#cccccc; 
	text-decoration: none;
	-webkit-transition-property: color;
    -webkit-transition-duration: 0.8s;
    -moz-transition-property: color;
    -moz-transition-duration: 0.8s;
    transition-property: color;
    transition-duration: 0.8s;
}
.menu a:hover{ 
	color:#ababab;
}
.image-container{position:relative; max-width:60em; height:auto; margin: 0 auto; text-align: center; vertical-align: center; background-color:#999999; padding:0.15em; margin-top:2.8em; }


.pagetitle{
	margin-top: 3em;
}

.pagetitle h1{
	font-family: 'netdesign_ubuntu';
	margin:0;
	font-weight: normal;
	color:#C4D1FF;
	font-size: 1.5em;
	
	
}

.pagebody{
	background-color: #444444;
	margin-top: 3em;
	

}

.pagebodyopere{
	margin-top:0;
}



.column p{
	margin: 1em;
}



.column img {
	margin-top: 1em;
	display: block;
    margin-left: auto;
    margin-right: auto;
	width: 80%;
	vertical-align: middle;
}



.opera{
	border-width: 2px;
	border-style: solid;
	border-color: #202020;
	height: 330px;
	width: 330px;
	margin: 0 auto;
	margin-top: 2em;
	vertical-align: baseline; 
	position:relative;
	overflow: hidden;

}


.opera img{
	max-width: 310px;
	max-height: 310px;
	margin: auto;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	display:block;
	vertical-align: middle;
	position:absolute;
	-webkit-transition-property: max-width, max-height;
	-webkit-transition-duration: 1s;
	-moz-transition-property: max-width, max-height;
	-moz-transition-duration: 1s;
	transition-property: max-width, max-height;
	transition-duration: 1s;

}

.opera img:hover{
	max-width: 500px;
	max-height: 500px;

}

.didascalia{
	width: 334px;
	height: 100px;
	margin: 0 auto;
	margin-top: 0.2em;
	background-color: #202020;
	font-family: 'netdesign_ubuntu';  
 

	
}
.didascalia h2{
	float: left;
	width: 100%;
	margin: 0.5em;
	font-size: 1.2em;
	color:#C4D1FF;
	font-weight:normal; 

}
.problem{
	font-size:1em !important;
}
.didascalia span{
	float: left;
	margin: 0em 0.5em 0.5em 0.5em;
	width: 100%;
}
/********************************************************************************************* 

2.  960px 

*********************************************************************************************/  

@media only screen and (min-width: 960px) and (max-width: 1199px) {

 .column img { width: 90% }
 .opera{
	width: 280px;
	height: 280px;
}

.opera img{
	max-width: 220px;
	max-height: 220px;
	margin: auto;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	display:block;
	vertical-align: middle;
	position:absolute;
	-webkit-transition-property: max-width, max-height;
	-webkit-transition-duration: 1s;
	-moz-transition-property: max-width, max-height;
	-moz-transition-duration: 1s;
	transition-property: max-width, max-height;
	transition-duration: 1s;

}

.problem{
	font-size:0.9em !important;
}

.didascalia{
	width: 284px;
	height: 100px;
	margin: 0 auto;
	margin-top: 0.2em;
	background-color: #202020;
	font-family: 'netdesign_ubuntu';  
 

	
}

 
}
	

/********************************************************************************************* 

3.  720px 

*********************************************************************************************/ 

@media only screen and (min-width: 720px) and (max-width: 959px) {
.menu li { font-size:0.82em; letter-spacing:0.05em;}
.menu ul{ 
	margin:0 auto; 
	padding:0; 
	width:100%; 
	list-style: none;
}
.image-container{ width:90%;}

.pagebodyopere .grid-4 { width: 46%;}

#customGallery  .grid-4 { width: 46%;}

}
 
 

/********************************************************************************************* 

4.  lt 720px 

*********************************************************************************************/ 

@media only screen and (max-width: 719px) {
.menu li { font-size:0.82em; letter-spacing:0.05em;}
.menu ul{ 
	margin:0 auto; 
	padding:0; 
	width:100%; 
	list-style: none;
}
.image-container{ width:90%;}
.column img {
	margin-top: 0;
	}
}