@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=Roboto&display=swap');
/*
font-family: 'Playfair Display', serif;
font-family: 'Roboto', sans-serif;
*/
@keyframes slidefromup{ from { margin-top: -20px; -moz-opacity:0; filter:alpha(opacity=0); opacity:0;} to { margin-top: 0; -moz-opacity:1;filter:alpha(opacity=100);opacity:1;}}
@keyframes slidefromleft{ from { margin-left: -40px; -moz-opacity:0; filter:alpha(opacity=0); opacity:0;} to { margin-left: 0; -moz-opacity:1;filter:alpha(opacity=100);opacity:1;}}
@keyframes slidefromright{ from { margin-right: -40px; -moz-opacity:0; filter:alpha(opacity=0); opacity:0;} to { margin-right: 0; -moz-opacity:1;filter:alpha(opacity=100);opacity:1;}}
@keyframes slidefromdown{ from { margin-bottom: -60px; -moz-opacity:0; filter:alpha(opacity=0); opacity:0;} to { margin-bottom: 0; -moz-opacity:1;filter:alpha(opacity=100);opacity:1;}}
@keyframes slidefromhidden{ from { -moz-opacity:0; filter:alpha(opacity=0); opacity:0;} to { -moz-opacity:1;filter:alpha(opacity=100);opacity:1;}}
@keyframes scaling{ from {-webkit-transform: scale(1.0); transform: scale(1.0);} to { -webkit-transform: scale(1.5); transform: scale(1.5);}}
@keyframes scalingmin{ from {-webkit-transform: scale(1.0); transform: scale(1.0);} to { -webkit-transform: scale(1.05); transform: scale(1.1);}}
@keyframes scalingfromzero{ from {-webkit-transform: scale(0); transform: scale(0);} to { -webkit-transform: scale(1); transform: scale(1);}}
.hide{ display:none;}
.show{ display:none;}
.op60{ opacity:0.6;}
.opZero{ opacity:0;}
.aCenter{text-align:center;}
.aLeft{text-align:left;}
.aRight{text-align:right;}
.aJustify{text-align:justify;}
.showMoreGeneric, .approfondisci, .closeGenericInfo {display:block; padding:1vh 0 2.2vh 0; color: #cad491; font-weight:bold;}
.showMoreGeneric:hover, .approfondisci:hover, .closeGenericInfo:hover, .hideMoreGeneric:hover {color:#FFF;}
.approfondisci, .closeGenericInfo {text-align:center;}
.hideMoreGeneric{display:none; padding:1vh 0 3.8vh 0; color: #cad491; font-weight:bold;}
.clear{clear:both;}

.forMob, #mobileMenu, #hamb, #hambClose { display:none;}
.forPc { }

a
{
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	color:#FFF;
}

a.notare
{
	color:#cad491;
}

#ajaxLoading
{
	position:fixed;
	bottom:3vh;
	right:3vh;
	display:none;
	z-index:100000;
}

b.moreLine
{
	line-height:260%;
	font-size:1.25vw;
}

#musicPlay, #musicPlayOn
{
	position:fixed;
	top:34vh;
	right:4vh;
	z-index:100000;
	width: 36px;
    cursor: pointer;
    border: 2px solid #ccc;
    border-radius: 50%;
    background: rgba(0, 0, 0, 1);
	padding: 6px;	
}

#musicPlay
{
	-webkit-animation: scalingmin 0.5s infinite alternate;
	animation: scalingmin 0.5s infinite alternate;
	animation-delay: 0.5s;
	animation-fill-mode: forwards;	
}

#homeIcon
{
	position:fixed;
	top:34vh;
	right:12vh;
	z-index:100000;
	width: 36px;
    cursor: pointer;
    border: 2px solid #ccc;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    padding: 6px;
	display:none;
}

#credits
{
	z-index:1000;
	position:fixed;
	bottom:3vh;
	left:0;
	width:100vw;
	text-align:center;
}

#credits a
{
	display: inline;
    font-size: 14px;
    color: #FFF;
	text-decoration:none;
  	text-shadow: 1px 1px 2px #333;
	-webkit-animation: 3s slidefromdown ease-in-out;
	animation: 3s slidefromdown ease-in-out;		
	animation-fill-mode: forwards;
	animation-delay: 0s;
	opacity:0;
}

.logoIstit
{
	width:3vw;
	position:fixed;
	bottom:1vh;
	-webkit-animation: 1s slidefromdown ease-in-out;
	animation: 1s slidefromdown ease-in-out;		
	animation-fill-mode: forwards;
	opacity:0;
}

#europea { left:38vw; animation-delay: 0.25s; }
#repubblica { left:42vw; animation-delay: 0.5s;}
#regione { right:42vw; animation-delay: 0.75s;}
#arsarp { right:38vw; animation-delay: 1s;}

body
{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Roboto', sans-serif;
	background:#F2E0DC;
	color:#403501;
	line-height:normal;
}


h1
{
	font-family: 'Playfair Display', serif;
	font-size:6.2vw;
	color:#FFF;
	font-weight:normal;
}

h2
{
	font-family: 'Playfair Display', serif;
	font-size:2.9vw;
	color:#fff;
	font-weight:normal;
	text-align:center;
	text-shadow: 3px 3px 3px #333;
	-webkit-animation: 1.5s slidefromright ease-in-out;
	animation: 1.5s slidefromright ease-in-out;		
	animation-fill-mode: forwards;
	animation-delay: 0.1s;
	opacity:0;	
}

h3
{
	font-family: 'Playfair Display', serif;
	font-size:1.9vw;
	color:#fff;
	font-weight:normal;
	text-align:center;
	text-shadow: 2px 2px 2px #333;	
	-webkit-animation: 1.5s slidefromleft ease-in-out;
	animation: 1.5s slidefromleft ease-in-out;		
	animation-fill-mode: forwards;
	animation-delay: 0.5s;
	opacity:0;	
}

#videointro
{
	/*position: fixed;
	top: 0;
	width:auto;
	width:100vw;
	min-height:100vh;
	overflow:hidden;*/
	object-fit: cover;
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;	
	-webkit-animation: 3s slidefromhidden ease-in-out;
	animation: 3s slidefromhidden ease-in-out;		
	animation-fill-mode: forwards;
	animation-delay: 0s;
	opacity:0;
	z-index:100;
}

#videoprogetto
{
	width:100%;
	box-shadow: 0px 0px 10px #ccc;
	border:1px solid #666;	
}

#mainTitle
{
	z-index:1000;
	position:fixed;
	top:0;
	left:0;
	width:100vw;
	text-align:center;
  	text-shadow: 3px 3px 5px #333;
	-webkit-animation: 1s slidefromup ease-in-out;
	animation: 1s slidefromup ease-in-out;		
	animation-fill-mode: forwards;
	animation-delay: 2.5s;
	opacity:0;
}

#istituzionaleMenu
{
	z-index:11000;
	position: fixed;
    left: 0vw;
    top: 34vh;
	-webkit-animation: 1s slidefromleft ease-in-out;
	animation: 1s slidefromleft ease-in-out;		
	animation-fill-mode: forwards;
	animation-delay: 4s;
	opacity:0;
}

#bifernoMenu
{
	z-index:11000;
	position: fixed;
    left: 0vw;
    bottom: 7.5vh;
	-webkit-animation: 1s slidefromleft ease-in-out;
	animation: 1s slidefromleft ease-in-out;		
	animation-fill-mode: forwards;
	animation-delay: 4s;
	opacity:0;
}

#bifernoMain
{
	font-size:1.8vw;
	padding-left: 11vw;
}

#trignoMenu
{
	z-index:11000;
	position: fixed;
    right: 0vw;
    bottom: 7.5vh;
	-webkit-animation: 1s slidefromright ease-in-out;
	animation: 1s slidefromright ease-in-out;		
	animation-fill-mode: forwards;
	animation-delay: 4s;
	opacity:0;	
}

#trignoMain
{
	font-size:1.8vw;
}

#bifernoMain:hover
{
	background: rgba(255, 255, 255, 1);
	padding-left:12vw;
	-webkit-box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0,0,0,0); 
	box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0,0,0,0);	
}

#trignoMain:hover
{
	background: rgba(255, 255, 255, 1);
	padding-right:5vw;
	-webkit-box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0,0,0,0); 
	box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0,0,0,0);
}

.bifernoSub
{
	z-index:11000;
	font-family: 'Playfair Display', serif;
	font-size:1.2vw;
	text-align:right;
	font-weight:normal;
	color:#000;
	text-decoration:none;
	background: rgba(255, 255, 255, 0.88);
	padding:1vh 1vw 1vh 4vw;
	display:block;
	margin:1vh 0;
	float:left;
	clear:both;
}

.bifernoSub:hover
{
	background: rgba(255, 255, 255, 1);
	padding-left:6vw;
	-webkit-box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0,0,0,0); 
	box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0,0,0,0);	
}

.trignoSub
{
	z-index:11000;
	font-family: 'Playfair Display', serif;
	font-size:1.2vw;
	text-align:left;
	font-weight:normal;
	color:#000;
	text-decoration:none;
	background: rgba(255, 255, 255, 0.88);
	padding:1vh 4vw 1vh 1vw;
	display:block;
	margin:1vh 0;
	float:right;
	clear:both;
}

.trignoSub:hover
{
	background: rgba(255, 255, 255, 1);
	padding-right:6vw;
	-webkit-box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0,0,0,0); 
	box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0,0,0,0);		
}

#progetto, #ecosistema, #video
{
	background: rgba(110, 135, 46, 0.88);
	color:#fff;	
    margin-bottom: 1vh;
}

#progetto, #ecosistema, #video
{
	font-size:1.4vw;
}

#video
{
    margin-bottom: 6.5vh;
}

#progetto:hover, #video:hover
{
	background: rgba(110, 135, 46, 1);
	-webkit-box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0,0,0,0); 
	box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0,0,0,0);			
}

#ecosistema:hover, #mappe:hover
{
	background: rgba(110, 135, 46, 1);
	-webkit-box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0,0,0,0); 
	box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0,0,0,0);			
}


#content
{
	z-index:1200;
	position:relative;
}

.genericInfo
{
	font-size:1.15vw;
	line-height:155%;
	background: rgba(0, 0, 0, 0.78);
	padding:1vh 2vw 5vh 2vw;
	margin:10vh 21vw;
	border-radius:10px;
	border:1px solid #666;
	-webkit-animation: 1s slidefromhidden ease-in-out;
	animation: 1s slidefromhidden ease-in-out;		
	animation-fill-mode: forwards;
	animation-delay: 0s;
	color:#FFF;
}

.genericInfo:after { 
	content: " ";
	display:block;
	clear:both;
}

.genericInfoText
{
	margin:10vh 23vw;	
}

.genericInfoSmall
{
	margin:10vh 28vw;
}

/*.closeGenericInfo
{
	font-family: 'Playfair Display', serif;
	color:#000;
	text-align:center;
	border-radius:5px;
	border:1px solid #333;
	padding:8px 15px;
	background-color:#fff;
	text-decoration:none;
    float: right;
    margin: 2vh 0 2vh 1vw;
}

.approfondisci
{
	font-family: 'Playfair Display', serif;
	color:#000;
	text-align:center;
	border-radius:5px;
	border:1px solid #333;
	padding:8px 15px;
	background-color:#fff;
	text-decoration:none;
    float: left;
    margin: 2vh 1vw 2vh 0;
}

.approfondisci:hover, .closeGenericInfo:hover
{
	color:#fff;
	background-color:#000;	
}*/

.imgFull
{
	width:100%;
	padding:0 0 40px 0;
}
.imgHalfUno
{
	width:47.8%;
	padding:0 2% 40px 0;
	float:left;
}
.imgHalfDue
{
	width:47.8%;
	padding:0 0 40px 2%;
	float:right;
}

.imgTerzoUno
{
	width:31.30%;
	padding:0 1% 40px 0;
	float:left
}
.imgTerzoDue
{
	width:31.30%;
	padding:0 1% 40px 2.1%;
	float:left;
}
.imgTerzoTre
{
	width:31.30%;
	padding:0 0 40px 1%;
	float:right;
}
.imgInText
{
	width:47.8%;
	padding:0 0 10px 2%;
	float:right;
	text-align:right;
	font-size:0.8vw;
	font-style:italic;
}

.imgFull img, .imgHalfUno img, .imgHalfDue img, .imgTerzoUno img, .imgTerzoDue img, .imgTerzoTre img, .imgInText img
{
	width:100%;
	border:1px solid #333;
    box-shadow: 0px 0px 10px #000;
	-webkit-animation: 1s slidefromup ease-in-out;
	animation: 1s slidefromup ease-in-out;		
	animation-fill-mode: forwards;
	animation-delay: 1s;
	opacity:0;	
	box-sizing: border-box;
}

.imgFull img:hover, .imgHalfUno img:hover, .imgHalfDue img:hover, .imgTerzoUno img:hover, .imgTerzoDue img:hover, .imgTerzoTre img:hover, .imgInText img:hover
{
    box-shadow: 0px 0px 10px #ccc;
	border:1px solid #666;
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;			
}