/** Reset **/
*{box-sizing:border-box;}
body{margin:0; font-size:16px; color:#000; font-family: 'PT Mono', monospace; }
img{ max-width:100%;}
a{color:inherit; text-decoration:none;}
figure{margin:0;}
h1,h2,h3{margin:0;}

/* Structure */
.pages-container{ position:relative; width:100%; height: 100vh; overflow: hidden;}
.page{ position:absolute; width:100%; height:100%; top:0; left:100%; overflow: hidden; transition: 0.5s; background:#FFF; }
.page:nth-child(1){ left:0; }
.button{ display:inline-block; padding:0.5em 2em; cursor: pointer; border-radius:0.25em;}
.arrow{ position:absolute; cursor: pointer; top:50%; transform:translateY(-50%); text-align: center;}
.arrow i{ font-size:2em; }
.arrow-right, .arrow-right2{ right:2em; }
.arrow-left, .arrow-left2{ left:2em; }
.arrow-text{ font-size:0.8em; padding-top:0.4em; }


/* Pages */
#home{ background:url('../img/capa4.jpg'); background-size:cover; }
#home header{ width:30%; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); text-align:center;}
.intro-button{ background:#000; color:#FFF; }
#start-button{ color:#FFF; }
.expo-text{ position:absolute; width:70%; height:80vh; overflow-y:scroll; top:55%; left:50%; transform: translate(-50%,-50%); padding:0 2em; line-height: 1.5em; }
.expo-text h2{ margin-bottom:1em;}
#intro-text, #archive-text{ background:#7da7d9; font-weight:300; }
.intro-sub-text{ font-size:0.85em; }
.intro-subtitle{ font-weight:700; text-transform: uppercase; }
#intro-text b, #archive-text b{ font-weight:700;}

#intro-text::-webkit-scrollbar {width: 12px; height: 12px; }
#intro-text::-webkit-scrollbar-track {background-color: #7da7d9; }
#intro-text::-webkit-scrollbar-thumb {background-color: #40556e;border-radius: 4px; }
#intro-text::-webkit-scrollbar-thumb:hover {background-color: #2f3f52;}
#intro-text, #archive-text{ scrollbar-width: normal; scrollbar-color: #40556e #7da7d9; }

#archive-text{ background-color: #7da7d9; left:100%; z-index:99; position:absolute; width:100%; height:100%; top:0; left:100%; overflow: hidden; transition: 0.5s;  }
#archive-text a{ text-decoration:underline; font-weight: 700;}
#archive-closer{ position:absolute; font-size:2em; top:1em; right:1em; cursor: pointer;}

.logos-wrapper{ display: flex; flex-wrap: wrap; align-items: center;}
.logos-wrapper a{ width:15%; display:inline-block; margin:1em 1em 0 0; }
.logos-wrapper2 a{ margin:1em 4em 0 0;}
.logos-wrapper img{ width:100%; }

.intro-logos{ margin-top:4em; }
.intro-logos a{ margin-right: 4em;}
.intro-logos img{ height:4em; }


.logo-path{ position:absolute; top:2em; left:2em; font-size:0.9em;}
.logo-path span{ display:block;}
.logo-path span:first-child{ text-transform: uppercase; font-weight: 700;}

.svg-container{ position:absolute; height:80%; width:30%; top:50%; left:50%; transform: translate(-50%,-50%); text-align: center; z-index:1;}
#map-svg{ position:relative; z-index:1; }
.svg-container svg path{ transition: 0.3s;}
.svg-container svg path:hover{ cursor: pointer; fill:#7da7d9;}
.svg-container svg path.active-path{ fill:#7da7d9; }

.pointer-anim{ position:absolute; z-index:1; font-size:2.25em; background: #7da7d9;  color:#FFF;  top:50%; left:50%; border-radius:50%; width:2em; height:2em; font-weight:400; box-shadow: 0 0 10px rgba(125, 167, 217, 1); }
.pointer-anim i{ position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); font-size:0.8em;}
.pointer-anim-active{ animation:pointer_animation 4s ease-in-out forwards; }

@keyframes pointer_animation {
    0% {
        opacity:0;
        transform: scale(0.9);
    }
    12.5% {
        opacity:1;
        transform: scale(1);
    }
    25% {
        opacity:0.9;
        transform: scale(0.9);
    }
    37.5% {
        opacity:1;
        transform: scale(1);
    }
    50% {
        opacity:0.9;
        transform: scale(0.9);
    }
    62.5% {
        opacity:1;
        transform: scale(1);
    }
    75% {
        opacity:0.9;
        transform: scale(0.9);
    }
    87.5% {
        opacity:1;
        transform: scale(1);
    }
    99%{
       display:block;
    }
    100% {
        opacity:0;
        display:none;
        transform: scale(0);
    }
}



.path-title{ position:absolute; background:#000; color:#FFF; padding:0.25em 1em; font-size:0.9em; opacity:0; z-index:-1; transition:0.3s; }
.path-title.active-title{ opacity:1;z-index:1;}
#path-title1{ top:50%; left:5%;}
#path-title2{ top:15%; left:55%;}
#path-title3{ top:58%; left:68%;}
#path-title4{ bottom:15%; right:40%;}
#path-title5{ bottom:2%; right:30%;}

#paths{display:none; position:absolute; height:100%; width:100%; top:0; left:0; background:#FFF; z-index:9;}
.gallery-parts{position:absolute; width:100%; height:100%; top:0; left:0; overflow:hidden;}
.gallery-part{position:absolute; width:100%; height:100%; top:0; left:100%; transition:0.5s;}
.gallery-part:first-child{ left:0; }
.gallery-intro-wrapper{ display:flex; flex-wrap: wrap; justify-content: space-between; height:100vh;}
.gallery-intro-header{ width:40%; padding:2em; background:#7da7d9; color:#FFF; }
.gallery-intro-header h2{ font-size:3em; }
.gallery-intro-header div{ margin-top:0.5em; font-size:1.25em; }
.gallery-intro-header div span{ display:block; margin-bottom:2em;}
.gallery-intro-text{ width:60%;  padding:2em 10em 2em 2em; height:100%; overflow-y:scroll; line-height: 1.6em;  }
.gallery-logo{ }

.gallery-logo .logo-title{ text-transform: uppercase; font-weight: bold;}
.gallery-logo .logo-subtitle span{ display: inline; font-weight: 400;}
.gallery-logo .logo-subtitle span:first-child{ text-transform: none; font-weight: 400;}
.gallery-logo .logo-subtitle span:last-child{ color:#7da7d9; margin-left:1.5em; }


.path-gallery{ position:absolute; width:100%; height:100%; top:0; left:0; overflow: hidden; display:none; }
.gallery{ position:absolute; width:80%; height:85%; top:55%; left:50%; transform:translate(-50%,-50%); background:#FFF;}
.gallery-items{ position:absolute; width:100%; height:100%; overflow: hidden;}
.gallery-item{ position:absolute; width:100%; height:calc(100% - 3em); left:100%; transition: 0.4s;}
.gallery-item:first-child{ left:0; }
.gallery-item img{ width:100%; height:100%; object-fit: contain;}
.gallery-item video{ width:100%; height:100%; object-fit: contain; background:#000; }
.ga{ position:absolute; cursor: pointer; top:50%; transform:translateY(-50%); }
.ga i{font-size:2em;}
.ga-right{ right:-3em; }
.ga-left{ left:-3em; }
.gallery-closer{ position:absolute; font-size:2em; top:1em; right:1em; cursor: pointer; z-index:9; }
.gallery-subtitle{ position:absolute; top:100%; width:100%; padding:1em 0; text-align: center; }
.gallery-item iframe{ position:absolute; top:0; left:0; width:100%; height:100%; background:#000;}

.gallery-info{ position:absolute; bottom:1em; right:0; background:#FFF; z-index:9; }
.gallery-info .gallery-current{ font-weight: bold;}