/* © dario lanfranconi, october 2017 */
/* ΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡ body ΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡ */


html {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  font-weight: 300;
}




html, body {
  /*background-image: url("../images/stripe-pattern.png");*/
  background-color: #1a1a1a;
}






body {font-family:'Open Sans', sans-serif;
	color: #FFF8DC;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	-webkit-text-size-adjust: 100%;
	min-width: 300px;
	line-height: 100%;
	}








/* ΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡ mainframe ΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡ */


.mainframe {
	position: relative;
	top: 8vh;
	bottom: 8vh;
	width: 70vh;
	max-width: 95vw;
	left: 50%;
	transform: translateX(-50%);
	

}

@media screen and (min-width:0px) and (max-width:73vh) {
 .mainframe  {
 	/*background-color: #0F0; */
 	position: relative;
	top: 8vh;
	width: 100%;
	height: auto;
  };
}



/* ΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡ title ΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡ */

.title1 {
	font-size: 2.15vh;
	line-height: 130%;
	text-align: right;
	padding-bottom: 4.8vh;
}

@-moz-document url-prefix() { 
  .title1 {
     font-weight: 400;
  }
}




@media screen and (min-width:0px) and (max-width:73vh) {
 .title1  {
	font-size: 3.0vw;
  };
}

@media screen and (min-width: 1500px) {
 .title1 {
     font-size: 2vh;
  }
}

#title_about {
	cursor: pointer;
}



/* ΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡ grid and boxesΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡ */

.grid {
	position: relative;
	height: 75%;
	

	
 	display: grid;
 	display: -ms-grid;
  	grid-template-columns: 19% 19% 19% 19% 19%;
  	/*grid-template-rows: 21.2% 21.2% 21.2% 21.2%;*/
  	grid-template-rows: 24% 24% 24% 24%;

 	grid-gap: 0.88vh;

	-ms-grid-columns: 1fr 1fr 1fr 1fr 1fr;     
  	-ms-grid-rows: 21.2% 21.2% 21.2% 21.2%;
	}


@media screen and (min-color-index:0) 
and(-webkit-min-device-pixel-ratio:0) { @media
	{
    .grid { 
  	display: flex;
  	 width: 100%;
 	 height: 75%;
    }    
	.box {
	display: inline-block;
	width: 19.2%;
	height:10%;
	font-size: 1px;
	text-align: left;
	padding-top: 0% !important;
	
  	}        
 	.imagebox {
	display: inline-block;
	width: 19.2%;
	height: 10%;
	font-size:1px;
	text-align: left;
	padding-top: 0% !important;
	}    
}}




#box1 {
	-ms-grid-row: 1;
	-ms-grid-column: 1;
	}   
#box2 {
	-ms-grid-row: 1;
	-ms-grid-column: 2;
	}
#box3 {
	-ms-grid-row: 1;
	-ms-grid-column: 3;
	}
#box4 {
	-ms-grid-row: 1;
	-ms-grid-column: 4;
	}
#box5 {
	-ms-grid-row: 1;
	-ms-grid-column: 5;
	}
#box6 {
	-ms-grid-row: 2;
	-ms-grid-column: 1;
	}   
#box7 {
	-ms-grid-row: 2;
	-ms-grid-column: 2;
	}
#box8 {
	-ms-grid-row: 2;
	-ms-grid-column: 3;
	}
#box9 {
	-ms-grid-row: 2;
	-ms-grid-column: 4;
	}
#box10 {
	-ms-grid-row: 2;
	-ms-grid-column: 5;
	}
#box11 {
	-ms-grid-row: 3;
	-ms-grid-column: 1;
	}   
#box12 {
	-ms-grid-row: 3;
	-ms-grid-column: 2;
	}
#box13 {
	-ms-grid-row: 3;
	-ms-grid-column: 3;
	}
#box14 {
	-ms-grid-row: 3;
	-ms-grid-column: 4;
	}
#box15 {
	-ms-grid-row: 3;
	-ms-grid-column: 5;
	}
#box16 {
	-ms-grid-row: 4;
	-ms-grid-column: 1;
	}   
#box17 {
	-ms-grid-row: 4;
	-ms-grid-column: 2;
	}
#box18 {
	-ms-grid-row: 4;
	-ms-grid-column: 3;
	}
#box19 {
	-ms-grid-row: 4;
	-ms-grid-column: 4;
	}
#box20 {
	-ms-grid-row: 4;
	-ms-grid-column: 5;
	}


@media screen and (min-width:0px) and (max-width:73vh) {
	.grid  {
 	grid-gap: 1.1vw; 
  };
}


.box { 	
	font-size: 1.5vh;
	text-align: right;
	padding-top: 76.5%;
	line-height: 105%;
}



@media screen and (min-width:0px) and (max-width:73vh) {
	.box  {
	font-size: 2.5vw;
	padding-top: 12.8vw;
  };
}


#box20 {
cursor: pointer;
}


/* ΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡ @ firefox ΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡ */

@-moz-document url-prefix() { 
  .box {
     padding-top: 73%;
  }
}

/* ΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡ @ IE+edge ΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡ */

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   .box {
        padding-top: 65%;
        padding-right: 3px;
   }
}

/* ΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡ @ edge / re-check values after edge html 16 release ΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡ */

@supports (-ms-ime-align: auto) {
  .box {
		padding-top: 66%;
        padding-right: 5px;
		}
}

/* ΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡ grid : imagebox ΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡ */

.imagebox {
	border: 1px solid #FFF8DC;
	-webkit-transition: border 2s ease-in-out;
 	-moz-transition: border 2s ease-in-out;
  	-ms-transition: border 2s ease-in-out;
 	-o-transition: border 2s ease-in-out;
 	transition: border 2s ease-in-out;	
}	
	
.imagebox:hover{
	border: 1px solid #1a1a1a;
	-webkit-transition: border 0.2s ease-in-out;
 	-moz-transition: border 0.2s ease-in-out;
  	-ms-transition: border 0.2s ease-in-out;
 	-o-transition: border 0.2s ease-in-out;
 	transition: border 0.2s ease-in-out;	 	
}

.imagebox img {
	cursor: pointer;
	position: relative;
	display: block;
  	object-fit: cover;
  	height: 100% ;
	width: 100%  ;
  	overflow:hidden;
	opacity: 0.0;
	filter: alpha(opacity=00); /* For IE8 and earlier */
	
	-webkit-transition: opacity 2.5s ease-in-out;
 	-moz-transition: opacity 2.5s ease-in-out;
  	-ms-transition: opacity 2.5s ease-in-out;
 	-o-transition: opacity 2.5s ease-in-out;
 	transition: opacity 2.5s ease-in-out;	
}

.imagebox img:hover{
	width:100%;
	opacity: 1.0;
	filter: alpha(opacity=100);
	transition: opacity 0.5s ease-in-out;
	-webkit-transition: opacity 0.5s ease-in-out;
 	-moz-transition: opacity 0.5s ease-in-out;
  	-ms-transition: opacity 0.5s ease-in-out;
 	-o-transition: opacity 0.5s ease-in-out;
}


#box3, #box9, #box17, #box19 {
	border: 1px solid #EEE8AA;
	}


#box2, #box8, #box16, #box20 {
	color: #EEE8AA;
	}




	
/* ΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡ credits ΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡ */


.credits {
	padding-top: 6vh;
	width: 54.7%;
	display: inline-block;
	padding-bottom: 20px;
	}

 .credits img {
	width: 100%;
  }
  
  
  .icons {
  padding-top: 6vh;
  display: inline-block;
  width:26%;
  float: right;
  padding-right: 19%;
  }
    
  
.icons img {
	float: right;
	width: 18%;
  }


@media screen and (min-width:1000px) and (max-width:1600px) {
 	.icons img {
	width: 21%;
  }
}

@media screen and (min-width:0px) and (max-width:1000px) {
 	.icons img {
	width: 28%;
	padding-left:4px;
  }
}

.close {
	display: inline-block;
	float: right;
	position: absolute;
	right: 5px;
	font-size: 1.2vh;
	line-height: 170%;
	cursor: pointer !important;
  }

@media screen and (min-width:0px) and (max-width:1000px) {
 	.close {
	font-size: 2vh;
	right: 14px;
  }
}


/*

.facebook {
	position: absolute;
	right: 27%;
	}


.youtube {
	position: absolute;
	right: 23%;
	}

.contact {
	position: absolute;
	right: 19%;
	}


@media screen and (min-width:0px) and (max-width:73vh) {
 	.facebook img, .youtube img, .contact img {
	transform: scale(0.6, 0.6);
	-ms-transform: scale(0.6, 0.6);
	-webkit-transform: scale(0.6, 0.6);
  };
}


@media screen and (min-width:0px) and (max-width:73vh) {
 	.facebook img {
	padding-right: 4px;
  };
}


/* ΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡ about ΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡ */

a:link, a:visited {
	color: #FFF8DC;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 248, 220, .7);

}

/*a:hover {
	text-decoration: underline;
}*/

.linktitle {
	margin-bottom: 0.1em;
}

.textgrid {
	position: relative;
	height: 75%;
	font-size: 1.2vh;
	-webkit-hyphens: auto;
  	-moz-hyphens: auto;
 	-ms-hyphens: auto;
 	 hyphens: auto;
}

.columnleft {

	position: relative;
	display: inline-block;
	width: 49%;
	vertical-align:top;
	}
	
.columnright {

	float:right;
	position: relative;
	display: inline-block;
	width: 49%;
	vertical-align:top;
	}

@media screen and (min-width:0px) and (max-width:73vh) {
	.textgrid  {
	height: auto;
	font-size: 1.2vh;
  };
}
@media screen and (min-width:0px) and (max-width:73vh){
	.columnleft  {
	width: 100%;
	vertical-align:top;
	display: block;
  };
}

@media screen and (min-width:0px) and (max-width:73vh){
	.columnright  {
	width: 100%;
	vertical-align:top; 
	display: block;
  };
}

@media screen and (min-height:0px) and (max-height:900px) {
	.columnleft  {
	width: 100%;
	vertical-align:top;
	display: block;
	font-size: 1.8vh;
  };
}

@media screen and (min-height:0px) and (max-height:900px) {
	.columnright  {
	width: 100%;
	vertical-align:top; 
	display: block;
	font-size: 1.8vh;
  };
}

@media screen and (min-height:0px) and (max-height:900px) {
	body  {
	height: auto;
  };
}



