/*Web Site Astrea NERO */


/*---------------------------------------------RWD 12 COLONNE----------------------------*/
*{	-webkit-box-sizing: border-box;	box-sizing: border-box;  }
	
	.col-1 {width: 8.33%;}
	.col-2 {width: 16.66%;}
	.col-3 {width: 25%;}
	.col-4 {width: 33.33%;}
	.col-5 {width: 41.66%;}
	.col-6 {width: 50%;}
	.col-7 {width: 58.33%;}
	.col-8 {width: 66.66%;}
	.col-9 {width: 75%;}
	.col-10 {width: 83.33%;}
	.col-11 {width: 91.66%;}
	.col-12 {width: 100%} 
	
.row::after { content: ""; clear: both; display: table; }
	
/*.class*="col-" {float:center ; padding: 0px; border: 1px  red ;	}*/


html, body {
	width:100%;
	margin:auto;
	/*font-size:62.5%;*/
	font-family: "Times New Roman", Arial,Verdana,MS Reference sans-serif,sans-serif;
	text-align: center; /* per il browser IE 5.5 */
	}
	
/*FORMATTAZIONE LINKS MENU*/
a:link {color:grey; text-decoration: none; }

a:visited {color:grey; text-decoration: none; }

a:hover { color:grey; text-decoration: underline; font-weight:bold;	}

a:active { text-decoration: underline; }	

a.linkHistory{color:grey; text-decoration: underline;}



/*DIMENSIONE CARATTERE TITOLI per @mediaqueary*/
.h1{font-size:3rem; display:none;}
.h2{font-size:1.3rem; display:block;}

.headertop {	/* TOP INTESTAZIONE  CON LOGO PER MOBILE*/
	display:flex;
	display:-webkit-box;
	display:-ms-flexbox;
	display:-webkit-flex;
	-webkit-box-pack:justify;
	    -ms-flex-pack:justify;
	        justify-content:space-between;
	position: fixed;
	margin:auto;
	height:5rem;
	background-color:black;
	
	color:white;
	z-index:8;
	}

.homelogotop {		/* logo Firma Esmeralda fondo nero	MOBILE*/
	display:block;
	position:absolute;
	width:100%;
	align:top;
	margin:auto;
	top:0;
	left:0;
	right:0;
	bottom:0;
	}
	
.centrale {	/*COLONNA CENTRALE CON FOTO*/
	position:fixed;
	background-image:url("../images/Astrea1a.jpg"),url("../images/Astrea1a.jpg");
	background-size:contain;
	background-repeat: no-repeat;
	background-color:black;
	background-position:center top;
	display: flex;
	justify-content: center;
	width:100%;
	min-height:600px;
	height:100%; 
	top:3rem;
	margin:1rem 000;
	opacity:1;
	z-index:0;
	} 

/*-ALL PAGES-*/

.footer{
	position:fixed;
	display:block;
	background-color:black;
	width:100%;
	height:2rem;
	margin-left:auto;
	margin-right:auto;
	bottom:0;
	margin-bottom:0px;
	font-size:1rem;
	align:middle;
	color:white;
	letter-spacing:0.1rem;
	word-spacing:0.1rem;
	opacity:0.3;
	-webkit-transition:top 0.3s;
	-o-transition:top 0.3s;
	transition:top 0.3s; /* Transition effect when sliding down (and up) */
	z-index:0;
	}

/*-ALL TABS-*/

.tabcontent{  /*containers all headers*/
	display:none; 
	float:left;
    width:100%;
	height:100%;
	background:black;
	margin-top:0rem;
	margin-right:0.1rem;
	margin-left:0.1rem;
	padding:0rem 0rem 10rem 0rem;/*modificare per disporre le pressthumb*/
	/*font-family:"Times New Roman", sans-serif;*/
	color:white;
    border: ;
	border-style:;
	overflow:auto;
	z-index:4;
	}

.tabcontent a:hover {text-decoration:none;}

/*If you want to fade in the tab content, add the following CSS*/
.tabcontent { -webkit-animation:fadeEffect 1s; animation:fadeEffect 1s;} /* Fading effect takes 0.5 second */

/* Go from zero to full opacity */
@-webkit-keyframes fadeEffect {from {opacity:0;} to {opacity:1;} }
@keyframes fadeEffect {from {opacity:0;} to {opacity:1;} }


/* IMMAGINI CON DIDASCALIA PRESS/BOOKS (Due classi, per immagine e per didascalia*/
.thumbsTabs{
	display:flex;
	display:-webkit-box;
	display:-ms-flexbox;
	display:-webkit-flex;
	-webkit-box-orient:horizontal;
	-webkit-box-direction:normal;
	-ms-flex-direction:row;
	flex-direction:row; 
	-ms-flex-wrap:wrap; 
	 flex-wrap:wrap; 
	-webkit-box-pack:center; 
	-ms-flex-pack:center; 
	justify-content:center;
	}
.thumbsTabs  {margin:3px 3px 160px;}

.pressthumb { /* immagini Projects con cornici*/
	width:150px;
	flex:0;
	-webkit-box-flex:0;   /* OLD - iOS 6-, Safari 3.1-6 */
	/*For old syntax, otherwise collapses. */
	-webkit-flex:0;       /* Safari 6.1+. iOS 7.1+, BB10 */
	margin-bottom:2rem; 
	border:2px solid gray;
	border-style:; 
	/*border-radius:15px;
	-webkit-border-radius:15px;*/
	opacity:1; 
	-webkit-filter:grayscale(10%); /* Safari 6.0 - 9.0 */
	filter:grayscale(10%);
	-webkit-box-shadow:0px 12px 16px 0px rgba(0,0,0.5,0.5);
	        box-shadow:0px 12px 16px 0px rgba(0,0,0.5,0.5);
	}
.presscontainer{ margin:2rem; } /*distanzia i thumb fra loro*/

.presscontainer { /*div nel quale è contenuta l'immagine e la didascalia*/
	position:relative;
	margin:auto;
	/*float:; */
	font-family:Verdana;
	font-size:0.7rem;	/*testo su immagine*/
	text-align:center;
	font-weight:bold;
	}

.presscentered {  /*posizione didascalia nella immagine thumb/ immagine Press35 Kommersante*/
	position:absolute;
	background-color:black; /* ex colore*#D2D2D2;*/
	top:70%; /* 100% è al bordo inferiore della immagine*/
	left:50%;
	-webkit-transform:translate(-50%, -50%);
	    -ms-transform:translate(-50%, -50%);
	        transform:translate(-50%, -50%);
	border:1px gray solid;
	border-style:;
	/*border-radius:3px;
	-webkit-border-radius:3px;*/
	opacity:0.8;
	color:gray;
	}
.presscentered{ width:70%; }


/*----------------------------------------POPUPS hover---------------------------------*/

.pop1:hover + .hide {display: block;}
.pop2:hover + .hide {display: block;}
.pop3:hover + .hide {display: block;}
.pop4:hover + .hide {display: block;}
.pop5:hover + .hide {display: block;}
.pop6:hover + .hide {display: block;}
.pop7:hover + .hide {display: block;}
.pop8:hover + .hide {display: block;}
.pop9:hover + .hide {display: block;}
.pop10:hover + .hide {display: block;}
.pop11:hover + .hide {display: block;}

.pop1, .pop2, .pop3, .pop4, .pop5, .pop6, .pop7, .pop8, .pop9, .pop10, .pop11{text-decoration:underline; color:grey;}
/* The actual popup */
.popup  {
  display:block;
  width:220px;
  z-index: 1;
  margin:auto;
  border:6px solid #5E5E5E;
	border-style:double; 
	border-radius:15px;
	-webkit-border-radius:15px;
	opacity:1; 
}
.hide {display: none;}

/*----------------------------------------PAGE 2 ABOUTUS---------------------------------*/
.en,  .enW70  {		/*P CLASS FOR EXHIBITION  "Read more Read less"*/
	font-size:1rem;
	padding:5px 30px 50px;
	text-align:justify;
	font-family:/*"Times New Roman",**/ Arial,Verdana,MS Reference sans-serif, san-serif;
	line-height:2em;
	color:white;
	}
.arTxt {					/*P CLASS FOR ARTICLE  "Read more Read less"*/
	font-size:1rem;
	padding:0rem 3rem 1rem;
	text-align:justify;
	font-family:/*"Times New Roman",*/ Arial,Verdana,MS Reference sans-serif, san-serif;
	line-height:2em;
	}
.it, .itW70 {display:none;/*P CLASS per traduzioni italiane"*/
	font-size:1rem;
	padding:5px 30px 50px;
	text-align:justify;
	font-family:/*"Times New Roman",**/ Arial,Verdana,MS Reference sans-serif, san-serif;
	line-height:2em;
} 
.itImg {display:none;}
.f11, .f15, .f12, .f13, .f14, .f16, .f17{width:10%;}


/*read more/less WHY THIS SITE- WORKS*/
.moretext,.moretext1, .moretext2, .moretext3, .moretext4{display:none; }/*ReadMore Depliant e Interview*/
a.readmore,a.readmore1, a.readmore2, a.readmore3, a.readmore4:link 
{font-style:italic; text-decoration:none; 	color:#D5D5D5; }
a.readless, a.readless1, a.readless2,a.readless3, a.readless4:link 
{font-style:italic; text-decoration:none; 	color:red; }
a.readmore,a.readmore1, a.readmore2, a.readmore3, a.readmore4:visited 
{font-style:italic; text-decoration:none; color:#D5D5D5; }

a.readmore,a.readmore1, a.readmore2,a.readmore3, a.readmore4,
a.readless, a.readless1, a.readless2, a.readless3, a.readless4:hover 
{font-style:italic; text-decoration:underline; color:#D5D5D5;}
a.readless, a.readless1, a.readless2, a.readless3, a.readless4:visited 
{font-style:italic; text-decoration:none; color:red; }



/*read more/less Articles*/
/*display*/
.artmoretext, .artmoretext01, .artmoretext02,.artmoretext03, .artmoretext04, .artmoretext05,.artmoretext06, 
.artmoretext07, .artmoretext08,.artmoretext09, .artmoretext10,.artmoretext11,.artmoretext12, .artmoretext13,.artmoretext14
{ display:none; }
/*link read more*/
a.artreadmore, a.artreadmore01, a.artreadmore02,a.artreadmore03, a.artreadmore04, a.artreadmore05,a.artreadmore06, 
a.artreadmore07, a.artreadmore08,a.artreadmore09, a.artreadmore10,a.artreadmore11,a.artreadmore12, a.artreadmore13,
a.artmoretext14:
link{font-style:italic; text-decoration:none; 	color:#D5D5D5;  }
/*link read less*/
a.artreadless, a.artreadless01, a.artreadless02,a.artreadless03, a.artreadless04, a.artreadless05,a.artreadless06, 
a.artreadless07, a.artreadless08,a.artreadless09, a.artreadless10,a.artreadless11,a.artreadless12, a.artreadless13,
a.artreadless14:link{font-style:italic; text-decoration:none; color:red;}
/*visited read more*/
a.artreadmore, a.artreadmore01, a.artreadmore02,a.artreadmore03, a.artreadmore04, a.artreadmore05,a.artreadmore06, 
a.artreadmore07, a.artreadmore08,a.artreadmore09, a.artreadmore10,a.artreadmore11,a.artreadmore12, a.artreadmore13,
a.artreadmore14:visited { font-style:italic; text-decoration:none; color:#D5D5D5; }
/*hover read more read less*/
a.artreadmore, a.artreadmore01, a.artreadmore02,a.artreadmore03, a.artreadmore04, a.artreadmore05,a.artreadmore06, 
a.artreadmore07, a.artreadmore08,a.artreadmore09, a.artreadmore10,a.artreadmore11,a.artreadmore12, a.artreadmore13,
a.artreadmore14,a.artreadless, a.artreadless01, a.artreadless02,a.artreadless03, a.artreadless04, a.artreadless05,a.artreadless06, 
a.artreadless07, a.artreadless08,a.artreadless09, a.artreadless10,a.artreadless11,a.artreadless12, a.artreadless13,
a.artreadless14:hover{ font-style:italic; text-decoration:underline; color:#D5D5D5;}
/*visited read less*/
a.artreadless, a.artreadless01, a.artreadless02,a.artreadless03, a.artreadless04, a.artreadless05,a.artreadless06, 
a.artreadless07, a.artreadless08,a.artreadless09, a.artreadless10,a.artreadless11,a.artreadless12, a.artreadless13,
a.artreadless14:visited{font-style:italic; text-decoration:none; color:red;}
/*---------------------------------------------PAGE MEET ME AT------------------------------*/
 
.place{
	margin:auto;
	text-align:center;
	font-family:/*Times New Roman,*/ Arial,Verdana,MS Reference sans-serif, san-serif;
	font-size:1.2rem;
	font-weight:;
	}


/*--------VIDEO---LIGHTBOX GALLERY W3SCHOOL-------*/
	
.row > .column {
	padding:0 8px;
	}

.row:after {
	content:"";
	display:table;
	clear:both;
	}

/* Create four equal columns that floats next to eachother */
.columnDx { /*Colonna dx per thumb per aprire lightbox*/
	float:center ;
	width:100%;
	}

.column { /*colonne thumb all'interno del lightbox*/
	float:left ;
	width:16.66%;
	}

/* The Modal (background) */
.modal {
	display:none;
	position:fixed;
	background-color:black;
	width:100%;
	max-width:100%;
	height:auto;
	top:25%;
	left:0;  
	padding-top:1rem;
	border:4px gray solid;
	border-style:double;
	border-radius:15px;
	-webkit-border-radius:15px;
	overflow:hidden;
	opacity:1;
	z-index:12 ; /*inizialmente 1*/
	}

/* Modal Content */
.modal-content {
	position:relative;
	width:100%;
	max-width:900px;
	background-color:black;
	margin:auto;
	padding:0;
	opacity:1;
	z-index:12;
	}

/* Hide the slides by default */
.mySlides { 	display:none; }

/* Next & previous buttons */
.videoprev, .videonext {
	cursor:pointer;
	position:absolute;
	top:50%;
	width:auto;
	padding:16px;
	margin-top:-50px;
	color:#ddd;
	font-weight:bold;
	font-size:20px;
	-webkit-transition:0.6s ease;
	-o-transition:0.6s ease;
	transition:0.6s ease;
	border-radius:0 3px 3px 0;
	-webkit-border-radius:0 3px 3px 0;
	-moz-user-select:none;
	 -ms-user-select:none;
	     user-select:none;
	-webkit-user-select:none;
	}
.videoprev{ left:0; }

/* Position the "next button" to the right */
.videonext { right:0; border-radius:3px 0 0 3px; -webkit-border-radius:3px 0 0 3px; }

/* On hover, add a black background color with a little bit see-through */
.videoprev:hover, .videonext:hover { background-color:rgba(0, 0, 0, 0.4); }

/* Number text (1/3 etc) */
.numbertextVideo {
	color:grey;
	font-size:12px;
	padding:10px 12px;
	position:absolute;
	top:0;
	}

/* Caption text */
.caption-container {
	text-align:center;
	background-color:#ccc;
	padding:0px 16px 5px;
	color:black;
	font-weight:bold;
	border:1px gray solid;
	}

img.demo {  /*thumb dentro il lightbox*/
	opacity:0.6;
	margin:10px;
	padding-top:;
	width:80%;
	border:2px gray solid;
	border-style:style;
	border-radius:10px;
	}

img.thumb{  /*thumb che servono per aprire il lightbox*/
	width:70%;
	margin:auto;
	border-color:grey solid;
	border-style:double;
	border-radius:15px;
	-webkit-border-radius:15px;
	}

.active,.demo:hover { opacity:1; }

img.hover-shadow { -webkit-transition:0.3s; -o-transition:0.3s; transition:0.3s; }

.hover-shadow:hover {
	-webkit-box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	        box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	opacity:5;
	}
/*FINE Lightbox Video W3SCHOOL*/

	
/*---------------------------------------------GALLERY -----------------------------*/
#slides, #slides2 {overflow:hidden; } /*Gallery*/

#gallery, #gallery2 {
	display: flex;
	justify-content: center;
	/*position:relative;*/
	display:block;
	display:-webkit-box;
	display:-ms-flexbox;
	display:-webkit-flex;
	width:80%;
	height:100%;
	margin-left:auto;
	margin-right:auto;
	overflow:hidden;
	border-radius:15px;
	-webkit-border-radius:15px;
	z-index:6;
  }
  
 .photogallery{
	width:70%;
	border:6px solid white;
	border-style:double; 
	-webkit-border-radius:15px;
	border-radius:15px;
	-webkit-box-shadow:0 0 20px rgba(0, 0, 0, 0.4);
	        box-shadow:0 0 20px rgba(0, 0, 0, 0.4);
	opacity:1;
	z-index:4;}
	
#gallery > div {position:absolute; -webkit-box-flex:1; -ms-flex-positive:1; flex-grow:1; overflow:hidden;	}
#gallery2 > div {position:absolute; -webkit-box-flex:1; -ms-flex-positive:1; flex-grow:1; overflow:hidden; }
#imgtext{ border:none; margin:auto; font-size:4rem; text-align:center;}

.quoteGallery{
	display:block;
	position:relative;
	margin-top:2rem;
	text-align:center;
	font-family:Times New Roman, Arial,Verdana,MS Reference sans-serif, san-serif;
	font-size:1.5rem;
	opacity:0.7;
	}

/*---------------------------------------------PRESS -----------------------------*/
.pressModal{display:none;}

.pressarticles {	/*COLONNA CENTRALE CON FOTO*/
	position:absolute;
	width:100%;
	min-height:600px;
	height:100%; 
	top:5rem;
	left:0;
	margin:auto;
	opacity:1;
	z-index:0;
	} 

.imgWork{
	width:100%;
	border:3px gray solid;
	border-style:;
	/*border-radius:15px;
	-webkit-border-radius:15px;*/
}

.tabcontentarticle{ /* immagini contenute all'interno di tabcontent*/
	display:; 
	float:left;
    width:100%;
	height:;
	background:0F2B5A;
	margin-top:1rem;
	/*margin-top:0rem;
	margin-right:1rem;
	margin-left:1rem;*/
	padding:0 0.5rem 10rem 0.5rem;/*modificare per disporre le pressthumb*/
	/*font-family:"Times New Roman", sans-serif;*/
    border: ;
	border-style:;
	overflow:auto;
	z-index:1;
	}
.title, .titleLb{ /* color blue*/
	max-width:100%;
	max-height:15%;
	height:6%;
	background-color:black;
	color:white;
	/*border-radius:6px;
	-webkit-border-radius:6px;*/
}	
.title{   /*Titolo Articolo*/
	margin:0 0 1rem;
	font-size:1.3rem;
	letter-spacing:0.5rem;
	/*border:3px grey solid;
	border-style:double;*/
	}
.titleLb{   /*Titolo Articolo in LightBox*/
	margin:1rem 0 1rem 0;
	margin-top:1rem;
	padding:auto;
	font-size:1rem;
	letter-spacing:0.1rem;
	text-align:center;
	/*border:1px grey solid;*/
	}
	
/* Next & previous buttons */
.workNav{
	display:flex;
	justify-content:space-between; 
	position:center top;
	padding: 0 1.3rem 0; 
	border:;
	margin:auto;
	height:2rem;}
.workU,.workD{      /*DIV contenente < workprev e > worknext */
	position:center top;
	cursor:pointer;
	/*top:-5px;*/
	width:auto;
	height:2rem;
	padding:0 2rem 2rem;
	/*margin-top:-0.3rem;*/
	background-color:black;
	color:white;
	border:;
	z-index: 14;
	font-weight:bold;
	font-size:18px;
	-webkit-transition:0.3s ease;
	-o-transition:0.3s ease;
	transition:0.3s ease;
	/*border-radius:0 3px 3px 0;
	-webkit-border-radius:0 3px 3px 0;*/
	-moz-user-select:none;
	 -ms-user-select:none;
	     user-select:none;
	-webkit-user-select:none;
	}
.workU{top:-1rem; margin: 0 0 1rem;}
.workD{top:-5px; margin-top:-0.3rem;}
.workprev, .worknext {
	cursor:pointer;
	top:-5px;
	width:auto;
	/*padding:0 -3rem;*/
	margin-top:-0.7rem;
	color:white;
	font-weight:bold;
	font-size:18px;
	-webkit-transition:0.3s ease;
	-o-transition:0.3s ease;
	transition:0.3s ease;
	/*border-radius:0 3px 3px 0;
	-webkit-border-radius:0 3px 3px 0;*/
	-moz-user-select:none;
	 -ms-user-select:none;
	     user-select:none;
	-webkit-user-select:none;
	}
.workprev{ float:left; margin-left:0.8rem; }

/* Position the "next button" to the right */
.worknext {float:right; margin-right:0.5rem;}

/* On hover, add a black background color with a little bit see-through */
.workprev:hover, .worknext:hover, .work:hover { background-color:rgba(240, 240, 240, 0.7); }

/** PRESS LIGHTBOX MARKUP **/

.presslightbox {    /** Default lightbox to hidden */
	display: none;
	position: fixed;
	z-index: 14;
	width: 100%;
	height: 100%;
	text-align: center;
	font-size:2rem;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
	background:#202020;
	border:10px #ccc solid;
	border-style:double;
	/*border-radius:15px;
	-webkit-border-radius:15px;*/
	overflow:auto;
}

.presslightbox img {
	/** Pad the lightbox image */
	
	max-width: 100%;
	max-height: 400%;
	margin-top: 2%;
	border:10px #ccc solid;
	border-style:double;
	/*-webkit-border-radius:15px;
	border-radius:15px;*/
	-webkit-box-shadow:0 0 20px rgba(0, 0, 0, 0.4);
	        box-shadow:0 0 20px rgba(0, 0, 0, 0.4);
}

.presslightbox:link {color:white; text-decoration: none;}
.presslightbox:visited {color:white; text-decoration: none;}
.presslightbox:hover { color:white; text-decoration: none;font-weight:normal; }
.presslightbox:active { text-decoration: none; font-weight:normal;}	
.presslightbox:target {	outline: none;/** Remove default browser outline */
						display: block;	/** Unhide lightbox **/}


/* The Press Modal (background) -------------------*/
.pressModal {
	display:none;
	position:fixed;
	background-color:gray;
	padding-top:70px;
	left:0;
	top:0;
	width:100%;
	height:100%;
	overflow:auto;
	border:8px gray solid;
	border-style:double;
	border-radius:6px;
	-webkit-border-radius:6px;
	overflow:auto;
	z-index:10;
	}

	/* Press Modal Content */
.pressModal-content {
	position:relative;
	background-color:#fefefe;
	margin:auto;
	padding:auto;
	width:100%;
	max-width:2560px;
	border:15px gray solid;
	border-style:double;
	border-radius:15px;
	-webkit-border-radius:15px;
	overflow:hidden;
	z-index:10;
	}

/* Number text (1/3 etc) */
.numbertext {
  color:white;
  font-size:24px;
  font-weight:bold;
  padding:;
  position:absolute;
  top:1rem;
  }
.tabcontent, .tabMenuContent,.tabPressContent { overflow:auto;} 
/*---------------------------------------------CONTACT -----------------------------*/

.thankMobile{ margin-top:20rem;}