@font-face {
    font-family: "btn";
    src: url("btn-light.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: "btn";
    src: url("btn-reg.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

html, body {
    margin: 0;
    padding: 0;
    font-size: 1vw;
}

.banner {
    font-family: 'btn', sans-serif;
    font-weight: 300;
    letter-spacing: .02em;
    width: 100vw;
    height: 100vh;
    position: relative;
    color: #fff;
    overflow: hidden;
    cursor: pointer;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    
    font-feature-settings: "kern";
}

.banner, .banner *, .banner:after, .banner:before {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

.logo {
    width: 16em;
    height: auto;
    position: absolute;
    top: 4em;
    left: 3.8em;
}

.byline {
    position: absolute;
    font-size: 2.1em;
    bottom: 4rem;
    right: 3.8rem;
    transition: all .4s ease 0s;
    opacity: 0;
}

.byline.show {
    transition-delay: .34s;
    opacity: 1
}

.super {
    letter-spacing: .4em;
    text-transform: uppercase;
    position: absolute;
    font-size: 1.7em;
    top: 6rem;
    right: 3.8rem;
    transition: all .4s ease 0s;
    opacity: 0;
}

.super.show {
    transition-delay: .14s;
    opacity: 1
}

.disc {
    font-size: .7em;
    font-weight: 400;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0 40rem 4.2rem 3.8rem;
    width: 100%;
    text-align: left;
    line-height: 1.2;
    font-weight: 400;
    transition: all .4s ease;
    opacity: 0;
}

.disc.show {
    opacity: 1
}

.lt-1 {
    width: .04em;
    display: inline-block;
}

.lt-2 {
    width: .1em;
    display: inline-block;
}

.wrap {
    width: 100%;
    padding: 0 2em;
    text-align: center;
    height: auto;
    position: absolute;
    left: 0;
    top: 48%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    
    padding: 0 10em;
    text-align: left;
    top: 55%
}

.wrap-1 {
    height: 100vh;
    top: 50%;
    padding: 0;
    white-space: nowrap
}

.copy-1 {
    background-image: url(copy-1.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right center;
    width: 40%;
    height: 100%
}

.copy-2 {
    background-image: url(copy-2.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left center;
    width: 60%;
    height: 100%;
    
    position: absolute !important;
    top: 0;
    left: 40%
}

.wrap-2 {
    top: 52%
}

.pe {
    pointer-events: none
}

.copy {
    white-space: nowrap;
    font-size: 4em;
    line-height: 1.3;
    position: relative;
    -webkit-transition: all .2s linear;
    -o-transition: all .2s linear;
    transition: all .2s linear;
    opacity: 0
}

.copy-1 {
    -webkit-transform: translateX(-12%);
        -ms-transform: translateX(-12%);
            transform: translateX(-12%);
}

.copy-2 {
    -webkit-transform: translateX(12%);
        -ms-transform: translateX(12%);
            transform: translateX(12%);
}

.total {
    display: block;
    font-size: 75%
}

.copy-3 {
    -webkit-transform: translateX(-12%);
        -ms-transform: translateX(-12%);
            transform: translateX(-12%);
    -webkit-transition-delay: .16s !important;
         -o-transition-delay: .16s !important;
            transition-delay: .16s !important
}

.copy-4,
.copy-5,
.copy-6 {
    margin-top: .25em;
    white-space: nowrap;
    font-size: 2.4em;
    -webkit-transform: translateX(-6%);
        -ms-transform: translateX(-6%);
            transform: translateX(-6%);
}

.copy-4 {
    font-size: 5.6em
}

.copy-5 {
    text-transform: uppercase
}

.copy-5 {
    -webkit-transition-delay: .08s !important;
         -o-transition-delay: .08s !important;
            transition-delay: .08s !important
}

.copy-6 {
    -webkit-transition-delay: .16s !important;
         -o-transition-delay: .16s !important;
            transition-delay: .16s !important
}

.copy-7 {
    -webkit-transform: translateX(-12%);
        -ms-transform: translateX(-12%);
            transform: translateX(-12%);
/*
    -webkit-transition-delay: .24s !important;
         -o-transition-delay: .24s !important;
            transition-delay: .24s !important
*/
}

.copy.show {
    transition: all .5s ease;
    -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0);
    opacity: 1
}

.btn {
    font-weight: 400;
    font-size: 1em;
    display: inline-block;
    position: relative;
    margin-top: 2em;
    margin-left: .3em;
/*    background-color: #1c69d3;*/
/*    border: .2em solid #fff;*/
    background-color: #0066b1;
    padding: 1em 2.8em;
}

.arrow {
    transition: all .2s ease;
    width: auto;
    height: .8em;
    position: relative;
    top: .1em;
    left: .1em;
}

.btn:hover, .btn:focus {
    transition: all .2s linear;
    background-color: #0653b6
}

@media (orientation: portrait) {
    html, body {
        font-size: 1vh
    }
    .banner {
        font-size: 1em
    }
    .wrap-2 {
        padding: 0 6em
    }
    .copy-1 {
        left: -1.5%
    }
    .copy-2 {
        left: 35%
    }
    .byline {
        bottom: 7rem
    }
    .super {
        top: 6.5rem;
        font-size: 1.5em
    }
    .btn {
        font-size: 1.2em
    }
    .disc {
        font-size: .8em;
        padding: 0 22rem 7rem 3.8rem;
    }
}