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

@font-face{
	font-family: "SuisseSign-Thin";
	src: url(SuisseSign-Thin.otf)
}

@font-face{
	font-family: "SuisseIntlMono-Regular";
	src: url(SuisseIntlMono-Regular.otf)
}

#page {
	width: 100vw;
	height: 120vh;
	position: absolute;
	top: 0%;
	left: 50%;
	transform: translate(-50%,0%);
	overflow: hidden;
	z-index: 0;
}

#back_photo {
	width: 100%;
	height: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 0;

}

#barranavigazione {
	position: fixed;
	width: 100vw;
	height: 40px;
	top: 0%;
	left: 0%;
	background-color: black;
	z-index: 4000;
	    cursor: pointer;
}


#nome {
	font-family: "SuisseSign-Thin";
	color: white;
	font-size: 13pt;
	letter-spacing: 2px;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	position: absolute;
	animation-duration: 3s;
    animation-name: nome;
}


#logo {
	top: 45%;
	left: 15%;
	transform: translate(-50%,-50%);
	height: 20px;
  width: 20px;	
  border: 2px solid white;
  border-radius: 50%;
  position: absolute;
	background-color: black;
	
}

#linea {
	
	left: 50vw;
	top: 38px;
	height: 1px;
  width: 100vw;	
	background-color: black;
	z-index: 1010;
  border-top: 2px solid white;
	opacity: 0.7;
  position: absolute;
	transform: translate(-50%,-50%);
	animation-duration: 1.5s;
    animation-name: enlarge;
	animation-direction: alternate-reverse;
animation-iteration-count:infinite;
}

@keyframes enlarge {
    from {opacity: 0.5;}
    to {opacity: 1;}
}

#scittaintro {
	
	font-family: "SuisseIntlMono-Regular";
	color: white;
	font-size: 24pt;
	letter-spacing: 2px;
	left: 50%;
	top: 43% ;
	transform: translate(-50%,-50%);
	position: absolute;
	animation-duration: 3s;
    animation-name: portfolio;
	opacity: 0;
	cursor: pointer;
}

#menu {
  position: absolute;
	width: 100vw;
	height: 40px;
	top: 40px;
    background:rgba(0,0,0,0.5);
	z-index: 700;
	visibility: hidden;
	
}

#bio {
	color: white;
	z-index: 1200;
	font-family: "SuisseIntlMono-Regular";
	font-size: 13pt;
	letter-spacing: 2px;
	top: 50%;
	left: 20%;
	transform: translate(-50%,-50%);
	position: absolute;
	opacity: 0.7;
	cursor: pointer;
}

#bio:hover{opacity: 1;}

#Progetti {
	color: white;
	z-index: 1200;
	font-family: "SuisseIntlMono-Regular";
	font-size: 13pt;
	letter-spacing: 2px;
	top: 50%;
	left: 40%;
	transform: translate(-50%,-50%);
	position: absolute;
opacity: 0.7;
	cursor: pointer;
}

#Progetti:hover{opacity: 1;}

#Ar {
	color: white;
	z-index: 1200;
	font-family: "SuisseIntlMono-Regular";
	font-size: 13pt;
	letter-spacing: 2px;
	top: 50%;
	left: 60%;
	transform: translate(-50%,-50%);
	position: absolute;
opacity: 0.7;
	cursor: pointer;
}

#Ar:hover{opacity: 1;}

#Contatti {
	color: white;
	z-index: 1200;
	font-family: "SuisseIntlMono-Regular";
	font-size: 13pt;
	letter-spacing: 2px;
	top: 50%;
	left: 80%;
	transform: translate(-50%,-50%);
	position: absolute;
opacity: 0.7;
	cursor: pointer;
}

#Contatti:hover{opacity: 1;}

#intro {
	width: 100vw;
	height: 120vh;
	background-color: black;
	z-index: 1500;
	position: absolute;
	top: 0%;
	left: 50%;
	transform: translate(-50%,0%);
animation: fade 4s 1 forwards;
}

 @-webkit-keyframes  fade {
 
	 90% {opacity: 1.0;
	      }
  100% {opacity: 0.0;
	 visibility: hidden;}

}

@keyframes typing {
    from { width: 100% }
    to { width: 0 }
    
}

.container {
  position: absolute;
	width: 70%;
	height: 50%;
	top: 63%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 1200;
	font-family: "SuisseIntlMono-Regular";
	font-size: 13pt;
	letter-spacing: 2px;
	color: white;
	background-color: black;
	text-align: center;
}


#next {
	position: fixed;
	top: 53%;
	left: 96%;
	z-index: 1200;
	transform: translate(-50%,-50%);
	height: 5vh;

}

#prev {
	position: fixed;
	top: 53%;
	left: 1%;
	z-index: 1200;
	transform: translate(-50%,-50%);
	height: 5vh;
	visibility: hidden;

}

#olo {
	width: 100%;
	height: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 10;	
}

.arrow {
	position: absolute;
	width: auto;
	height: 100%;
	cursor: pointer;
}

#olo_gif {
		width: 100%;
	height: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 20;
	opacity: 0.9;

}

#photo {
	width: 100%;
	height: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 0;
}

body {
	overflow-x: hidden;	
	background-color: black;
}

#mail {
	width: 7.3%;
	height: 1.7%;
	position: absolute;
	top: 40%;
	left: 32%;
	transform: translate(-50%,-50%);
	z-index: 3000;
	background-color: aqua;
	opacity: 0;
}

.bump {
	transform: translate( 0%,-500%);
	opacity: 0.7;
	z-index: -20;
	animation-duration: 1s;
    animation-name: bump_anim;
	animation-direction: alternate-reverse;
animation-iteration-count:infinite;
	
}

@keyframes bump_anim {
    from {transform: translate(10%,0);}
    to {transform: translate(-10% ,0);}
}

#icaro {
	width: 16%;
	height: 1.7%;
	position: absolute;
	top: 43.5%;
	left: 41%;
	transform: translate(-50%,-50%);
	z-index: 4000;
		    cursor: pointer;

}

.indice {
	background-color: aqua;
	opacity: 0;
	visibility: hidden!important;
}

#volante {
	width: 16%;
	height: 1.2%;
	position: absolute;
	top: 44.5%;
	left: 41%;
	transform: translate(-50%,-50%);
	z-index: 4000;
		    cursor: pointer;

}

#archicards {
	width: 16%;
	height: 1.2%;
	position: absolute;
	top: 47%;
	left: 41%;
	transform: translate(-50%,-50%);
	z-index: 4000;
		    cursor: pointer;

}

#amaro {
	width: 16%;
	height: 1.2%;
	position: absolute;
	top: 49%;
	left: 41%;
	transform: translate(-50%,-50%);
	z-index: 4000;
		    cursor: pointer;

}

#ray {
	width: 16%;
	height: 1.2%;
	position: absolute;
	top: 50.7%;
	left: 41%;
	transform: translate(-50%,-50%);
	z-index: 4000;
		    cursor: pointer;

}

#design {
	width: 16%;
	height: 1.2%;
	position: absolute;
	top: 52%;
	left: 41%;
	transform: translate(-50%,-50%);
	z-index: 4000;
		    cursor: pointer;

}

#vasi {
	width: 16%;
	height: 1.2%;
	position: absolute;
	top: 56%;
	left: 41%;
	transform: translate(-50%,-50%);
	z-index: 4000;
		    cursor: pointer;

}

#boxe {
	width: 16%;
	height: 1.2%;
	position: absolute;
	top: 57.5%;
	left: 41%;
	transform: translate(-50%,-50%);
	z-index: 4000;
	    cursor: pointer;

}

#mag {
	width: 16%;
	height: 1.2%;
	position: absolute;
	top: 42.5%;
	left: 58.5%;
	transform: translate(-50%,-50%);
	z-index: 4000;
		    cursor: pointer;

}

#influencer {
	width: 16%;
	height: 1.2%;
	position: absolute;
	top: 45.3%;
	left: 58.5%;
	transform: translate(-50%,-50%);
	z-index: 4000;
			    cursor: pointer;

}

#potafiori {
	width: 16%;
	height: 1.2%;
	position: absolute;
	top: 46.6%;
	left: 58.5%;
	transform: translate(-50%,-50%);
	z-index: 4000;
			    cursor: pointer;

}

#travel {
		width: 16%;
	height: 1.2%;
	position: absolute;
	top: 47.9%;
	left: 58.5%;
	transform: translate(-50%,-50%);
	z-index: 4000;
		    cursor: pointer;

}

#foodox {
	width: 16%;
	height: 1.2%;
	position: absolute;
	top: 49.2%;
	left: 58.5%;
	transform: translate(-50%,-50%);
	z-index: 4000;
		    cursor: pointer;

}

#potalove {
	width: 16%;
	height: 1.2%;
	position: absolute;
	top: 50.5%;
	left: 58.5%;
	transform: translate(-50%,-50%);
	z-index: 4000;
		    cursor: pointer;
}

#postcards {
	width: 16%;
	height: 1.2%;
	position: absolute;
	top: 54.7%;
	left: 41%;
	transform: translate(-50%,-50%);
	z-index: 4000;
}

#portfolio {
	width: 55%;
	height: 80%;
	position: absolute;
	top: 25%;
	left: 50%;
	transform: translate(-53%,-20%);
	z-index: 3000;
	background-color: aqua;
	opacity: 0;
	visibility: visible;
    cursor: pointer;
}

#dettagli_sfondo {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 500;
	background-color: black;
	opacity: 0.5;
	visibility: hidden;
}

#dettagli {
	position:fixed;
	width: 80%;
	height: 80%;
	top: 53%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 1000;
	visibility: hidden;
}

#pdf {
	position: absolute;
	height: auto;
	width: 100%;
		top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

#next_pdf {
	position: fixed;
	top: 53%;
	left: 92%;
	z-index: 2000;
	transform: translate(-50%,-50%);
	height: 5vh;
	visibility: hidden;
}

#prev_pdf {
	position: fixed;
	top: 53%;
	left: 5%;
	z-index: 2000;
	transform: translate(-50%,-50%);
	height: 5vh;
	visibility: hidden;
}

#chiudi_dettagli {
	position: fixed;
	top: 12%;
	left: 92%;
	transform: translate(-50%,-50%);
	height: 3vh;
	width: 3vh;
	z-index: 1000;
	visibility: hidden;
}

.chiudi {
	width: 100%;
}

#chiudiAR {
	width: 20px;
	height: 20px;
	position: fixed;
	top: 10px;
	float: right;
	right: 10px;
}

#apri_multimedia {
		position: fixed;
	top: 19%;
	left: 92%;
	transform: translate(-50%,-50%);
	height: 3.2vh;
	width: 3.2vh;
	z-index: 2000;
	visibility: hidden;
}

#multimedia_sfondo {
		position:fixed;
	width: 100%;
	height: 100%;
	top: 53%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 2000;
	visibility: hidden;
	background-color: black;
	opacity: 0.5;
}


#video {
	position: fixed;
	width: 150%;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

#multimedia {
	position:fixed;
	width: 40%;
	height: 40%;
	top: 53%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 2010;
	visibility: hidden;
}

#chiudi_multimedia {
	position: fixed;
	top: 20%;
	left: 82%;
	transform: translate(-50%,-50%);
	height: 3vh;
	width: 3vh;
	z-index: 2040;
	visibility: hidden;
}

#next_multimedia {
	position: fixed;
	top: 53%;
	left: 84%;
	z-index: 2040;
	transform: translate(-50%,-50%);
	height: 5vh;
	visibility: hidden;
}

#prev_multimedia {
	position: fixed;
	top: 53%;
	left: 14%;
	z-index: 2040;
	transform: translate(-50%,-50%);
	height: 5vh;
	visibility: hidden;
}

#footer {
		position: fixed;
	width: 100vw;
	height: 40px;
	bottom: 0%;
	left: 0%;
	background-color: black;
	z-index: 3000;
}

#mail_footer {
	position: fixed;
	bottom: 15px;
	right: 130px;
	z-index: 4000;
	height: 20px;
	width: 20px;
	visibility: visible;
		cursor: pointer;

}

#porfolio {
	color: white;
	z-index: 4000;
	font-family: "SuisseIntlMono-Regular";
	font-size: 10pt;
	letter-spacing: 2px;
	right: 15px;
	bottom: 15px;
	position: fixed;
	cursor: pointer;
}

#marker_sfondo {
	background-color: white;
	width: 100vw;
	height: 120vh;
	top: 0%;
	left: 50%;
	transform: translate(-50%,0%);
	position: absolute;
		visibility: hidden;

}

#marker {
	width: 20%;
	height: 20%;
	top: 35%;
	left: 50%;
	transform: translate(-50%,0%);
	position: absolute;
}

#nextAR {
	position: fixed;
	top: 53%;
	left: 96%;
	z-index: 1200;
	transform: translate(-50%,-50%);
	height: 5vh;
	visibility: hidden;
}

#prevAR {
		position: fixed;
	top: 53%;
	left: 1%;
	z-index: 1200;
	transform: translate(-50%,-50%);
	height: 5vh;
	visibility: hidden;
}

@media  (orientation: portrait){
	
	#page{height: 100vh;}
	
	#back_photo{position: absolute;top: 0%;left: 50%;transform: translate(-50%,100px);width: auto;height: 92vh;}
	
	#photo{width: auto;height: 100%;}
	
	#olo_gif{width: 150%;top:48%;}
	
	#barranavigazione{height: 100px;}
	
	#nome{font-size: 25pt;}
	
	#menu{top: 100px; height: 80px;}
	
	#bio{visibility: hidden;}
	
	#Progetti{visibility: hidden;}
	
	#Ar{left: 33%!important;font-size: 23pt;}

	#Contatti{visibility: hidden!important;}
	#Contatti_mobile{left: 66%!important;font-size: 23pt!important;}
	
	#footer{height: 100px;}
	
	#porfolio{visibility: hidden;}
	
	#mail_footer{bottom: 25px;left: 80%;height: 60px;width: 60px;transform: translate(-50%,0%);
}
	
	#linea{border-top:4px solid white; transform: translate(-50%,-0px);top:90px;}
	
	#next{visibility: hidden!important;}
	
	#prev{visibility: hidden!important;}
	
	#portfolio{visibility: hidden!important;}
	
	#home_footer{visibility: visible!important;}

	#pulsante_lente{visibility: visible!important;}

	#intro{visibility: hidden!important;}
	
	#intro_mobile{visibility: visible!important;}

    #scorri{visibility: visible!important;}
    
    #scorri_pc{visibility: hidden!important;}

	#lente{position: absolute;top: 0%;left: 50%;transform: translate(-50%,0%);width: 100vw;height: auto;z-index: 100;visibility: hidden;}

	#nextAR{visibility: hidden!important;}
	
	#prevAR{visibility: hidden!important;}
	
	body, html {overflow: hidden;position: relative;
    height: 100%;}
	
	#video{width: 250%;}
	
	#chiudi_multimedia{top: 310px;left: 95%;}

}

#home_footer {
	position: fixed;
	bottom: 25px;
	left: 20%;
		transform: translate(-50%,0%);
	z-index: 4000;
	height: 60px;
	width: 60px;
	visibility: hidden;
		cursor: pointer;
}

#intro_mobile {
	width: 100vw;
	height: 120vh;
	background-color: black;
	z-index: 5000;
	position: absolute;
	font-size: 25pt!important;
	top: 0%;
	left: 50%;
	transform: translate(-50%,0%);
animation: fade 3s 1 forwards;
	visibility: hidden;
}

#text_intro {
	position: absolute;
	width: 90%;
	height: 70%;

	left: 50%;
	transform: translate(-50%,30%);
	z-index: 1200;
	font-family: "SuisseIntlMono-Regular";
	font-size: 35pt;
	letter-spacing: 2px;
	color: white;
	background-color: black;
	text-align: left;
}

#scorri {
	width: 90vw;
    font-family: "SuisseIntlMono-Regular";
	color: black;
	font-size: 25pt;
	letter-spacing: 2px;
	top: 160px;
	left: 50%;
	transform: translate(-50%,0%);
	position: absolute;
	text-align: center;
	visibility: hidden;
}

#scorri_pc {
    font-family: "SuisseIntlMono-Regular";
	color: white;
	z-index: 4000;
	font-size: 10pt;
	letter-spacing: 2px;
	bottom: 15px;
	left: 15px;
	position: fixed;
}

#scorri_marker {
	width: 90vw;
    font-family: "SuisseIntlMono-Regular";
	color: black;
	font-size: 15pt;
	letter-spacing: 2px;
	bottom: 110px;
	left: 50%;
	transform: translate(-50%,0%);
	position: absolute;
	text-align: center;
	visibility: hidden;
}

@media  (orientation: landscape){#scorri_marker {visibility: hidden!important;}}

#lente {
		
	visibility: hidden;
	background-color: aliceblue;
}

#photo_lente {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-5%);
	z-index: 0;
	background-color: whitesmoke;
}

#chiudi_lente {
	position: fixed;
	top: 150px;
	left: 95%;
	transform: translate(-50%,-50%);
	height: 3vh;
	width: 3vh;
	z-index: 1000;
	visibility: hidden;
}

#pulsante_lente {
	position: fixed;
	bottom: 25px;
	left: 50%;
		transform: translate(-50%,0%);
	z-index: 4000;
	height: 60px;
	width: 60px;
	visibility: hidden;
		cursor: pointer;
}

#multimedia_mobile {
		position: fixed;
	top: 230px;
	left: 95%;
	transform: translate(-50%,-50%);
	height: 3vh;
	width: 3vh;
	z-index: 1000;
	visibility: hidden;
}

#Contatti_mobile {
	color: white;
	z-index: 1200;
	font-family: "SuisseIntlMono-Regular";
	font-size: 13pt;
	letter-spacing: 2px;
	top: 50%;
	left: 120%;
	transform: translate(-50%,-50%);
	position: absolute;
opacity: 0.7;
	cursor: pointer;
}

#Contatti_mobile :hover{opacity: 1;}

@media screen and (min-aspect-ratio: 34/60) and (orientation: portrait){
	#linea{transform: translate(-50%,0px);top:100px;}
	
	#lente{height: 100vh; background-color: whitesmoke;}
	
	#photo_lente{width: 70vw;transform: translate(-50%,-45%)}
}