@import url("bootstrap.css");
@import url("font.css");
@import url("fullpage.css");
html, body{min-height: 100%}
body{font-family: 'Avenir Next Rounded Pro'; font-weight: normal; text-transform: uppercase; background: #c2e8f8}
body{background-size: cover}
.navbar-dark{background:transparent!important}

a{
    transition: all 100ms ease-in-out
}
.navbar-brand img{width: 246px;}
.navbar-dark .navbar-nav .active>.nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show>.nav-link{
    color:#004f2a;
    opacity: 1;

}
.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover{
    color:#004f2a;
    opacity: 1;
}
.navbar-dark .navbar-nav .nav-link{
    color:#004f2a;
    opacity: 0.5;
    font-size: 1.2em;
    display: inline-block;
    text-align: center
}
.noise{
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    background: url('../img/bg-noise-desktop.png') center center no-repeat;
    background-size: cover;
    pointer-events: none;
    z-index: 2;
}
.bg{
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    background: url('../img/bg-desktop.png') center center no-repeat;
    background-size: cover;
    pointer-events: none;
    z-index: 1;

}
.desktop{
    width: 100%;
    height: 100%
}
#fullpage{
    z-index: 3;
}
.text{
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    display: block;
}
#slide-one{
    background-image: url('../img/01-desktop.png')
}
#slide-two{
    background-image: url('../img/02-desktop.png')
}
#slide-three{
    background-image: url('../img/03-desktop.png')
}
.text article{
    opacity: 0;
}


.video{
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    position: relative;
    width: 800px;
    max-width: 60vw;
}


.map{
    left: 50%;
    top: 50%;
    transform: translate(-50%, -40%);
    position: relative;
    width: 900px;
    max-width: 75vw;
}



.iframe-container {
    padding-top: 56.25%;
    height: 0px;
    position: relative;
}

.iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

a.biletix{
    display: block;
    position: absolute;
    z-index: 234234234;
    width: 10.416666666666668VW;
    height: 10.416666666666668VW;
    cursor: pointer;
    background: url('../img/biletix.png?v3') no-repeat center;
    text-indent: -10000px;
    background-size: contain;
    bottom: 10px;
    left: 10px;
    transition: all 300ms ease-in-out


}

@media (max-width:680px){
    a.biletix{
        width: 70px;
        height: 70px;
        cursor: pointer;
        bottom: auto;
        top: 105px;
        left: auto;
        right: 10px;
    }
    
    
    #slide-one{
        background-image: url('../img/01-mobile.png')
    }
    #slide-two{
        background-image: url('../img/02-mobile.png')
    }
    #slide-three{
        background-image: url('../img/03-mobile.png')
    }
    
    .bg{
        background: url('../img/bg-mobile.png') center center no-repeat;
        background-size: 100% auto;
    
    }
    .navbar-dark .navbar-nav .nav-link{
        font-size: 12px;
        padding: 0;
    }
    .navbar-brand{
        margin: 0;
        padding:0;
    }
    .navbar-brand img{
        width: 108px
    }
    .navbar-nav{
        margin: 0!important;
        padding:0;
        display: block;
        width: calc(100% - 118px);
        float: right;
    }
    .nav-item{
        width: 50%;
        float: left;
    }
    
    .video, .map{
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        position: relative;
        max-width: 95vw;
    }
}