*{
	box-sizing: border-box;
	text-rendering: optimizeLegibility; 
}body{
	margin: 0;
}a{
	text-decoration: none;
	color: black;
}img{
	display: block;
}


/* VIDEO BIG PLAY BUTTON ON IOS*/
*::-webkit-media-controls-panel {
  display: none!important;
  -webkit-appearance: none;
}*::-webkit-media-controls-play-button {
  display: none!important;
  -webkit-appearance: none;
}*::-webkit-media-controls-start-playback-button {
  display: none!important;
  -webkit-appearance: none;
}/*--------------------*/


@font-face {
  font-family: GaribaldiReg;
  src: url(ASSETS/fonts/VTCGaribaldiSans-XCndRegular.woff2);
}@font-face {
  font-family: GaribaldiLight;
  src: url(ASSETS/fonts/VTCGaribaldiSans-XCndLight.woff2);
}@font-face {
  font-family: GaribaldiXLight;
  src: url(ASSETS/fonts/VTCGaribaldiSans-XCndXLight.woff2);
}@font-face {
  font-family: DeAetna;
  src: url(ASSETS/fonts/DeAetna-Caption.woff2);
}@font-face {
  font-family: DeAetna;
  src: url(ASSETS/fonts/DeAetna-CaptionItalic.woff2);
  font-style: italic; 
}@font-face {
  font-family: ElmiraLoom;
  src: url(ASSETS/fonts/ElmiraLoomHv02TRIAL-BACK05TRIAL.otf);
}


/*--TYPEFACE STYLES--*/
h1{
	font-family: GaribaldiReg;
	text-transform: uppercase;
	font-size: 7rem;
	font-weight:400;
	line-height: 1;
	margin: 0;
}h2{ /* SUBTITLES */
	font-family: GaribaldiLight;
	text-transform: uppercase;
	font-size: 2.5rem;
	font-weight:300;
	line-height: 1;
	margin: 0;
}h3{ /* SUBTITLES - THIN*/
	font-family: GaribaldiXLight;
	text-transform: uppercase;
	font-weight:275;
	font-size: 2.5rem;
	line-height: 1;
	margin: 0;
}h4{ /* PAGE TITLES + BORDER*/
	font-family: GaribaldiLight;
	text-transform: uppercase;
	font-weight:300;
	font-size: 1.6rem;
	line-height: 1;
	text-align: center;
	border-bottom: solid 1.5px;
	padding: 1rem;
	margin: 0.2rem 2rem;	
}h5{ /* SPECIAL ACCENT FONT*/
	font-family: ElmiraLoom;
	text-transform: uppercase;
	font-weight: 100;
	line-height: 1;
	font-size: 2.5rem;
	margin: 0;
}p, pre{
	white-space: pre-wrap;
	font-family: DeAetna;
	font-size: 1.1rem;
	margin: 0;
	line-height: 1.4;
	/*text-indent: 10%;*/
}.bigger-p{
	font-size: 1.5rem;
	line-height: 1;
	padding-bottom: 1rem;
}#outro, #LandingParagr{
    font-style: italic;
    font-size:1.2rem;
}

/*--BASIC MOBILE & DESKTOP STYLES--*/
.arrows{
	position: fixed;
	z-index: 100;
	display: grid;
    grid-template-columns: auto auto;
	top:45%;
	width: 100%;
	font-size: 24pt;
	padding: 1rem;
	font-family: DeAetna;
	pointer-events: none;
}.arrows a{
	color: black;
	text-decoration: none;
	width: fit-content;
	pointer-events: auto;
}

.bg-video{
	height: 100vh;
	display: block;
    z-index: 0;
    width: 100%;
    object-fit: cover;
}button{ /*MUTE UNMUTE*/
	position: absolute;
	top:0;
	left:0;
	padding: 0.7rem 0.83rem;
	background-color: rgba(255, 255, 255, 0);
	background-image: url(ASSETS/icons/mute.png);
	border:none;
	margin: 1.5rem 4rem; /*DISTANCE FROM EDGE*/
	z-index: 9999;
	cursor: pointer;
	background-size: auto 100%;
    background-repeat: no-repeat;
}.mute-video{ /*IS MUTED > UNMUTE*/
	background-image: url(ASSETS/icons/mute.png);
}.unmute-video{ /*IS UNMUTED > MUTE*/
	background-image: url(ASSETS/icons/unmute.png);
}.close-btn{
	position: absolute;
	top:0;
	left:0;
	margin: 1.5rem 2rem; /*DISTANCE FROM EDGE*/
	font-size: 1.3rem;
    pointer-events:fill;
	z-index:1000;
}.lang-change{
	position: absolute;
	top:0;
	right:0;
	margin: 1rem 2rem; /*DISTANCE FROM EDGE*/
    pointer-events:fill;
	z-index:1000;
}.lang-change>a{
	cursor: pointer;
	font-family: GaribaldiXLight;
	font-weight:275;
	font-size: 1.6rem;
	line-height: 1;
}


/*---2 COLUMN PAGE---*/
.column-page p{
	padding-top: 1rem;
}

/*---LANDING PAGE---*/
#landing-body{
	height:100vh;
}#landing-body>h4{
    display: block;
    color: white;
    border:none;
    margin:0;
    position: absolute;
    top:0;
    left:0;
    width:100vw;
    animation: fadeIn linear 7s;
}#home-main{
	position:absolute;
	color: white;
	top:0;
	padding: 6rem 2rem;
	width: 100%;
	height:100vh;
	overflow-y: scroll;
}#LandingTitle{
	position: fixed;
	bottom:1rem;
}

/*---PROFILE PAGE---*/
#profile-page h2{
	padding-top: 1rem;
}#profile-page img{
	width: 100%;
	border-radius: 1.5rem;
	display: block;
}#profile-page p{
	padding-top: 1rem;
}.profiles h2, .profiles h3{
	color: #006200;
}.column-page.profiles h2, .column-page.profiles h3{
	font-size:3.8rem;
}.prof-img-cont{
	position: relative;
}.open-btn{
	position: absolute;
	bottom:0px;
	right:0px;
	line-height: 1;
	color: white;
	background-color: #ff7600;
	font-size:2rem;
	padding: 0.5rem 1rem;
	border-radius: 1.5rem 0rem; 
}.profiles .right-column img{
	height:100%;
	width:100%;
	object-fit: cover;
	object-position: center;
}.profiles{
	padding-top: 5rem;
}

/*---PROFILE, MAP PAGE, COLUMN PAGE---*/
.column-page{
	
}#profile-page, #map-page, .column-page{
	padding: 3.5rem 2.5rem;
	overflow: hidden;
}#profile-page>div, #maptext>div, .left-column, .right-column{
	padding:1rem;
}

.profiles.column-page{
	padding: 0rem 0rem;
}.profiles.column-page>.left-column{
	padding: 4.5rem 3.5rem;
}.profiles.column-page>.right-column{
	padding: 0rem;
	padding-top:4.5rem;
	height:100vh;
	overflow: hidden;
}


/*---MAP PAGE---*/
#map{
	position: relative;
}#map-page-body{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    min-height:100vh;
}#map-container{
    
}#map img{
	width: 100%;
}#map-thumbnails{
	background-image: url(ASSETS/map_img/Placeholder-Map.png);
	background-size: cover;
	display: none;
}.map-btn{
	position: absolute;
	padding: 0;
	margin: 0;
	line-height: 1;
	color: white;
	background-color: #0000b4;
	text-align: center;
	width:1.8vw;
	height:1.8vw;
	line-height: 1.6vw;
	border-radius:0.9vw;
	font-size:1.8vw;
}.map-btn.nomentana116{
	top:3%;
	right:33%
}.map-btn.nomentana116-2{
	top:3%;
	right:35%
}.map-btn.po40{
	top:7.5%;
	left:51%;
}.map-btn.salita{
	top:33%;
	left:28%;
}.map-btn.vatikanas{
	top:22.5%;
	left:22.5%;
}.map-btn.palazzo-q{
	top:30%;
	left:45%;
}.map-btn.palazzo-v{
	top:36%;
	left:41.2%;
}.map-btn.torre{
	top:35%;
	left:38%;
}.map-btn.appia{
	bottom:4.5%;
	right:36%;
}.map-btn.castel{
	top:25%;
	left:31%;
}/*----MAP SUBPAGE----*/
.map-subpage h3{
	font-size: 2.2rem; /*IMAGE CAPTIONS*/
	padding-top: 0.5rem;
}.map-subpage h2{ /*PAGE TITLE*/
    font-size: 4.2rem;
}.map-subpage .right-column>img{
	width:100%;
}.map-subpage .right-column>h2{
	font-size: 2.4rem;
	padding-bottom: 0.5rem;
	color: #006200;
}.down-arrow.arrows{
	color: white;
	top:auto;
	bottom: 0;
	display: block;
	width:100%;
	text-align: center;
}.map-sub-body a{
	color: white;
}

/*---ALBUM PAGE---*/
#albumTitle{
	width:100%;
}#albumTitle{
	text-align: center;
	color: #ff611c;
	position: absolute;
	width: 100%;
	left:0;
	bottom:1.5rem;
}#containment-wrapper{
    height:calc(100vh - 4rem);
}.ui-widget-content{
	position: absolute;
	height:fit-content;
	left:10vw;
	top:10vh;
}.ui-widget-content>img{
	height:auto;
}.ui-widget-content,.ui-widget-content>img{
	border-radius: 1.5vh;
	cursor: move;
	max-width:50vh;
	max-height:62vh;
}.album1{
	left:5vw;
	top:15vh;
}.album2{
	left:8vw;
	top:12vh;
}.album3{
	left:10vw;
	top:18vh;
}.album4{
	left:15vw;
	top:14vh;
}.album5{
	left:20vw;
	top:20vh;
}.album6{
	left:23vw;
	top:20vh;
}.album7{
	left:28vw;
	top:30vh;
}.album8{
	left:32vw;
	top:25vh;
}.album9{
	left:35vw;
	top:20vh;
}.album9{
	left:38vw;
	top:22vh;
}.album10{
	left:7vw;
	top:50vh;
}.album11{
	left:45vw;
	top:22vh;
}.album12{
	left:45vw;
	top:22vh;
}.album13{
	left:45vw;
	top:22vh;
}.album14{
	left:45vw;
	top:22vh;
}.album15{
	left:45vw;
	top:22vh;
}.album16{
	left:48vw;
	top:27vh;
}.album17{
	left:70vw;
	top:20vh;
}.album18{
	left:50vw;
	top:10vh;
}.album19{
	left:47vw;
	top:12vh;
}.album20{
	left:27vw;
	top:12vh;
}.album21{
	left:27vw;
	top:12vh;
}.card{
	left:7vw;
	top:50vh;
}

/*------- CREDITS PAGE --------*/
#credits-body>h4{
    display: block;
    color: white;
    border:none;
    margin:0;
    position: absolute;
    top:0;
    left:0;
    width:100vw;
	height:100vh;
}#credits-main{
    position:absolute;
	color: white;
	top:0;
	padding: 2rem;
	width: 100%;
	height:100vh;
	overflow: scroll;
}#outro{
    padding: 6rem 2.5rem;
}#end-credits>div{
    position: absolute;
    width:100%;
    text-align: center;
    opacity: 0;
    transform: translate(0%, -50%); 
    top: 48%; 
    left: 0px;
}#end-credits h3,#end-credits h2{
    font-size: 3.5rem;
}

#end-credits>.first{
   animation: fadeInOut3 6s linear 1 forwards;
   -webkit-animation: fadeInOut3 6s linear 1 forwards;
   animation-delay: 110s;
}#end-credits>.second{
   animation: fadeInOut3 6s linear 1 forwards;
    -webkit-animation: fadeInOut3 6s linear 1 forwards;
   animation-delay: 115s;
}#end-credits>.third{
   animation: fadeInOut3 6s linear 1 forwards;
    -webkit-animation: fadeInOut3 6s linear 1 forwards;
   animation-delay: 120s;
}#end-credits>.fourth{
   animation: fadeInOut3 6s linear 1 forwards;
    -webkit-animation: fadeInOut3 6s linear 1 forwards;
   animation-delay: 125s;
}#end-credits>.fifth{
   animation: fadeInOut3 6s linear 1 forwards;
    -webkit-animation: fadeInOut3 6s linear 1 forwards;
   animation-delay: 130s;
}#end-credits>.sixth{
   animation: fadeInOut3 6s linear 1 forwards; 
    -webkit-animation: fadeInOut3 6s linear 1 forwards;
    animation-delay: 135s;
}#end-credits>.seventh{
   animation: fadeInOut3 6s linear 1 forwards;
  -webkit-animation: fadeInOut3 6s linear 1 forwards;
    animation-delay: 140s;
}#end-credits>.eight{
  animation: fadeInOut3 6s linear 1 forwards;
  -webkit-animation: fadeInOut3 6s linear 1 forwards;
    animation-delay: 145s;
}#end-credits>.ninth{
  animation: fadeInOut3 6s linear 1 forwards; 
  -webkit-animation: fadeInOut3 6s linear 1 forwards;
    animation-delay: 150s;
}#end-credits>.tenth{
   animation: fadeInOut3 6s linear 1 forwards;
  -webkit-animation: fadeInOut3 6s linear 1 forwards;
    animation-delay: 155s;
}#end-credits>.eleventh{
   animation: fadeInOut3 6s linear 1 forwards;
  -webkit-animation: fadeInOut3 6s linear 1 forwards;
    animation-delay: 160s;
}#end-credits>.twelfth{
   animation: fadeInOut3 6s linear 1 forwards;
  -webkit-animation: fadeInOut3 6s linear 1 forwards;
    animation-delay: 165s;
}
#credits-logos{
    position: absolute;
    width:fit-content;
    text-align: center;
    transform: translate(-50%, -0%); 
    bottom: 0; 
    left: 50%;
	vertical-align: center;
}#credits-logos>div{
    padding: 2rem;
    text-align: center;
    /*display: inline-flex;*/
    opacity: 0;
}#credits-logos img{
	width: 100%;
}.big-logo{
	opacity: 0;
	display: block;
	width:28vw;
	position: absolute;
	transform: translate(-50%, -50%); 
    left:50%;
	top:45%;
	animation: fadeInOut2 10s linear 1 forwards;
  	animation-delay: 170s;
}.big-logo img{
	width: 100%;
}.logo1{
	animation: fadeInOut2 10s linear 1 forwards;
  	animation-delay: 170s;
}.logo2{
  	animation: fadeInOut2 10s linear 1 forwards;
	animation-delay: 171s;
  	width:12vw;
}.logo3{
  animation: fadeInOut2 10s linear 1 forwards;
  animation-delay: 172s;
  width:14vw;
}.logo4{
  animation: fadeInOut2 10s linear 1 forwards;
  animation-delay: 173s;
  width:22vw;
}.logo5{
  animation: fadeInOut2 10s linear 1 forwards;
  animation-delay: 174s;
  width:17vw;
}

/*----MOBILE VERSION----*/
@media only screen and (max-width:700px){
	h1{
		font-size: 4rem;
	}.arrows{
		position: fixed;
	}#LandingPoem{
		display: none;
	}#MobilePoem{
		display:block;
	}.ui-widget-content,.ui-widget-content>img{
		border-radius: 20px;
		max-width:350px;
		max-height:380px;
	}.profiles.column-page>.right-column{
		padding-top: 1rem;
		height:80vh;
	}.column-page.profiles h2, .column-page.profiles h3{
	font-size:3rem;
	}.logo1,.logo2,.logo3,.logo4,.logo5{
		display: block;
		width: 40vw;
	}#credits-logos{
		top: 20%; 
    	left: 50%;
	}.big-logo{
		display: none;
	}
}

/*--map buttons - increase size when the sidebar is gone---*/
@media only screen and (max-width:1200px){
    .map-btn{
	   width:2.6vw;
	   height:2.6vw;
	   line-height: 2.4vw;
	   border-radius:1.3vw;
	   font-size:2.4vw;
    }
}


/*----DESKTOP VERSION----*/
@media only screen and (min-width:700px){
	body{
		width:100ww;
	}/*---LANDING PAGE---*/
	#LandingParagr{
       width:30vw;
	   min-width: 550px;
	   position: absolute;
	   top:40%;
	   right: 6rem;
	}#MobilePoem{
	   display: none;
	}#LandingPoem{
	   display: grid;
	   position: relative;
	   max-width: 800px;
	   grid-template-columns: repeat(4, 1fr);
	   margin: auto;
	   margin-top: 30vh;
	}#LandingPoem>pre{
	   padding: 1rem;
	}/*---PROFILE PAGE---*/
	#profile-page{
	   display: grid;
	   grid-template-columns: repeat(2, 1fr);
	}/*---PROFILE, MAP PAGE, COLUMN PAGE---*/
	#profile-page, #map-page, .column-page{
	   padding: 4rem 5rem;
	}#profile-page>div, #maptext>div, .left-column, .right-column{
	   padding:1rem;
	}
/*---MAP PAGE---*/
	#maptext{
	   display: grid;
	   grid-template-columns: repeat(2, 1fr);
	}/*---MAP POPUPS---*/
	.left-column{
		width:60%;
		float: left;
	}.right-column{
		width:40%;
		float: left;
    }.map-subpage{
        padding-right: 0.5rem; 
	}.map-subpage .right-column{
		padding-top: 6.1rem;
	}/*credits page*/
    #outro{
        width:70vw;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
        padding-top: 25vh;
	}#credits-logos{
		width:100%;
	}#credits-logos>div{
        /*display: inline-flex;*/
		display: inline-block;
	}.logo1{
		display: none !important;
	}
    
    
}@media only screen and (min-width:1200px){
	/*---PROFILE PAGE---*/
	#profile-page{
	   display: grid;
	   grid-template-columns: repeat(3, 1fr);
	}.subcolumns{
	   display: grid;
	   grid-template-columns: repeat(2, 1fr);
	}.left-sub-col{
	   padding-right:1rem;
	}.right-sub-col{
	   padding-left:1rem;
	}/*---MAP PAGE---*/
	#maptext{
	   display: grid;
	   grid-template-columns: repeat(3, 1fr);
	}#map-container{
	    display: flex;
        float:left;
	}#map{
		width:65%;
	}#map-thumbnails{
		position: relative;
		display: flex;
		flex-direction: column;
		width:35%;
		color: white;
		font-family: GaribaldiLight;
		font-size: 2.5rem;
		line-height: 1;
		margin: 0;
	}#map-thumbnails{
		background-color: #e6e6e6;
	}#map-thumbnails>div{
		width:auto;
		height:100%;
		display: none;
	}#map-thumbnails>div>img{
		object-fit: cover;
		width:100%;
		height:100%;
		overflow: hidden;
	}#map-thumbnails>div>h2{
		background-color: #0096ff;
		position: absolute;
		width:100%;
		padding: 1rem;
		bottom:0;
}
}@media only screen and (min-width:1800px){
     /*--INCREASE THE PADDING!--*/
    /*---PROFILE, MAP PAGE, COLUMN PAGE---*/
	#profile-page, #map-page, .column-page{
	   padding: 4rem 10vw;
	}#profile-page>div, #maptext>div, .left-column, .right-column{
	   padding:2rem;
	}.profiles.column-page>.left-column{
	   padding: 7rem 10vw;
    }.map-subpage{
        padding-right: 0.5rem; 
    }
}

/*----ANIMATION----*/
.elementToFadeInAndOut {
  animation: fadeInOut 6s linear 1 forwards;
}

@keyframes fadeInOut {
  0% {
    opacity: 0;
  }
  15% {
    opacity: 1;
  }85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}@keyframes fadeIn{
    0% {
        opacity: 0;
    }80% {
        opacity: 0;
    }100% {
        opacity: 1;
    }
}


@keyframes fadeInOut2 {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fadeInOut3 {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }11%{
	opacity: 1;
  }80% {
    opacity: 1;
  }81%{
	opacity: 0;
  }100% {
    opacity: 0;
  }
}