/* Fonts */
@font-face {
	font-family: 'Client Mono';
	src: url('fonts/ClientMono-Bold.woff2') format('woff2'), url('fonts/ClientMono-Bold.woff') format('woff');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'National';
	src: url('fonts/National-Bold.woff2') format('woff2'), url('fonts/National-Bold.woff') format('woff');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'National';
	src: url('fonts/National-Regular.woff2') format('woff2'), url('fonts/National-Regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

/*** Reset ***/
*{box-sizing:border-box;user-select: none; -moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;}
html{scroll-behavior: smooth;}
body{margin:0; font-family: 'National'; font-size:18px;  overflow-y:hidden;  }
img{max-width:100%;}
a{text-decoration:none;color:inherit;}
h1,h2,h3{margin:0;}
p{margin:0;}
figure{margin:0;}

.expo-intro{position:absolute; top:0; left:0; width:100vw; height:100vh; }
.expo-intro figure{ position:absolute; width:100%; height:100%; }
.expo-intro figure img{ width:100%; height:100%; object-fit: cover; object-position: center bottom;}
.expo-intro-filter{position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.4);}

.expo-intro header{position:absolute; z-index:2; width:50%; top:50%; left:50%; transform:translate(-50%,-50%); color:#FFF; text-align:center; }
.expo-intro h2{ font-family: 'Prata', serif; font-size:3em; font-weight:400; line-height: 1em;   }
.expo-intro h2 span{ display: inline-block; transform:translateX(-35%); position:relative;}
.expo-intro h2 span:after{ content:''; display:block; height:2px; background:#FFF; width:0.9em; position:absolute; top:50%; left:100%; margin-left:0.25em; transform: translateY(-50%);} 
.expo-intro h3{ font-family: 'Prata', serif; font-size:3em; font-weight:400;}
.expo-intro h3 span{  display: inline-block; transform:translateX(25%); }

.expo-arrow{position:absolute; z-index:10; top:50%; transform:translateY(-50%); cursor: pointer; width: 4vw; height:4vw; }
#expo-intro-arrow-left{ left:4vw; background:url('../img/slide_left.png') no-repeat center; background-size:contain; }
#expo-intro-arrow-right{ right:15vw; background:url('../img/slide_right.png') no-repeat center; background-size:contain; }
#expo-intro-arrow-right:after{ display:block; content: 'Iniciar Itinerário'; text-transform:uppercase; position:absolute; right:100%; color:#FFF; text-align:center; font-family: 'Bebas Neue', cursive; font-size:1.25em; margin-right:1em; font-weight:400;  }


.flex-container{display: flex; flex-wrap: wrap;}

.photo-item{position:absolute; overflow:hidden; /*cursor:pointer;*/ box-shadow: 0 0 15px rgba(0,0,0,0.5); }
.photo-item img{display:block; width:auto;}
.text-item{position:absolute;  font-size:2em; font-weight:400; line-height:1.2em; cursor: default; font-family: 'Raleway', serif; }
.text-item::after{ content:''; height:20vh; background:#FFF; width:5px; left:100%; }
.title-item{position:absolute; font-family: 'Prata', serif;   font-size:2em; font-weight:400; line-height:1.6em; cursor: default; width:90vh; text-align:center; top:40%; transform: rotateZ(-90deg) ;  transform-origin:center; }
.background-item{position:absolute; top:0; left:0; width:100vw; height:100vh; background:center no-repeat fixed; background-size:cover;}
.background-color{position:absolute; top:0; left:0; width:100vh; height:100vh;}
.photo-item .photo-content{ display:none; }

.separator{ position:absolute; top:0; width:50vw; height:100vh; font-family: 'Raleway', serif; }
.separator-title{ position:absolute; font-family: 'Prata', serif;   font-size:4em; font-weight:400; cursor: default; text-align:center; top:45%; transform: rotateZ(-90deg); transform-origin:center center; left:45%; line-height:1em; }
.separator-title::after{ content:''; position:absolute; width:1em; background:#FFF; height:2px; bottom:200%; left:0; }
.separator-text{ position:absolute; font-family: 'Raleway', serif; width:40%; bottom:15%; left:7.5%; font-size:1.3em;  }

.photo-plus{position:absolute; background:url('../img/plus1.png') center bottom; top:0; right:1.5em; cursor: pointer; background-size:cover; width:1.5em; height:2.5em; }

.photo-plus-sound{position:absolute; background:url('../img/plus2.png') center bottom; top:0; right:1.5em; cursor: pointer; background-size:cover; width:1.5em; height:2.5em;  }

.photo-item[data-sound]:hover{ transform:scale(1.025,1.025); transition:0.3s; }

#image-viewer{position:fixed; top:0; left:0; width:100%; height:100%; z-index:99; background:rgba(12, 88, 121,0.8); display:none;*color:#FFF;}
#image-viewer figure{position:absolute; width:25vw; left:5vw; top:22vh; box-shadow:0 0 15px rgba(0,0,0,0.6); }
#image-viewer figure img{ display:block; width:100%;   }
#viewer-text{ position:absolute; width:55vw; right:10vw; top: 25vh; color:#FFF; font-family: 'Prata', serif;  }
#viewer-text h3{ margin:0; font-size:2em; margin-bottom:0.75em; }
#viewer-text p{ font-size:1em; line-height: 1.5em; font-family: 'Raleway', sans-serif;}
/*#image-viewer p{position:absolute; margin:0; top:85vh; margin-top:1em; font-size:1em; color:#444; text-align:center; width:80%; left:10%;}
#image-viewer i{position:absolute;top:1em;right:1em;cursor: pointer; font-size:2em; z-index:99; color:#666;}*/
#viewer-text{ position:absolute; width:55vw; right:10vw; top: 10vw; color:#FFF; }

#video-viewer{position:fixed; top:0; left:0; width:100%; height:100%; z-index:99; background:rgba(12, 88, 121,0.8); display:none;}
#video-viewer .video-wrapper{ position:absolute; width:50%; left:50%; top:50%; transform:translate(-50%,-50%);  }
#video-viewer .video-container{ position:relative; width:100%; padding-top:56.66%; }
#video-viewer .video-container video{ position:absolute; width:100%; height:100%; top:0; left:0; box-shadow:0 0 10px rgba(0,0,0,0.3); }
#video-viewer h2{position:absolute; font-size:1.6em; color:#FFF; bottom: 105%; font-family: 'Prata', serif; font-weight:400; }

.width25{width:25%;}
.width50{width:50%;}
.width75{width:75%;}
.width100{width:100%;}
.left0{left:0;}
.left25{left:25%;}
.left50{left:50%;}
.left75{left:75%;}
.layer1{z-index:1;}
.layer2{z-index:2;}
.layer3{z-index:3;}
.layer4{z-index:4;}

.main-container{position:relative; height:100vh; /*width:100vw;*/ /*width:500vw;*//*height:100vh; overflow:hidden;*/ } 

#audio-allow{position:fixed; width:100%; height:100%; top:0; left:0; z-index:999; background:#FFF;}
#audio-allow-button{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:#000; color:#FFF; padding: 0.5em 2em; cursor: pointer;}

.page{ position:absolute; top:0; left:0; width:100%; height:100%; background-color:#6c3593; color:#FFF; 
transition:1s; }
#cover{ z-index:1000;}
#cover-img{position:absolute; width:75vw; top:0; left:12.5vw;}
#about{z-index:999; background-color:#6c3593; }

.arrow{position:absolute;  height:19vh; top:50%; transform:translateY(-50%); cursor:pointer; right: 2%; padding-top: 9vh; font-size:0.7em; font-family:'Client Mono';  }
.arrow-right{background:url('../img/arrow_left.jpg') no-repeat top center; background-size:8vh auto; transition: 1s;}


.about-text{ position:absolute; width:70vw; height:60vh; top:20vh; left:15vw; padding-right: 2em; overflow-y: scroll; text-align: justify; line-height: 1.6em; font-size:1em; font-weight:400; font-family: "National", sans-serif; }

[data-sound] .sound-icon{ display:block; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:35px; height:35px; background:url('../img/sound-icon.png') no-repeat center #FFF; background-size:50% auto; border-radius:50%;  z-index:99; opacity:0;  }
[data-sound]:hover .sound-icon{opacity:1;}

#logo{position:absolute; width:80px; left:50%; transform:translateX(-50%);}
#logo span{display:inline-block; height:100px;width:100%; position:relative;}
#logo span:after{content:''; display:block; position:absolute; top:50%; width:100%; height:3px; background:#000;}
.stripe{height:1px; background:#FFF; margin:2em 0;}


.next-place-arrow{ position:absolute; top:50%; transform: translateY(-50%); right:2em; font-family: 'Bebas Neue', cursive; font-size:1.25em; background:url('../img/side_right_blue.png') no-repeat right center; background-size:auto 8vh; padding:0 10vh 0 0; height:85vh; color:rgb(12, 88, 121); z-index:99; }
.next-place-arrow2{ position:absolute; top:50%; transform: translateY(-50%); right:2em; font-family: 'Bebas Neue', cursive; font-size:1.25em; background:url('../img/slide_right.png') no-repeat right center; background-size:auto 8vh; padding:0 10vh 0 0 ; height:8vh; color:#FFF; z-index:99;  }