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

@font-face {
    font-family: "vn";
    src: url("vn-medium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: block;
}

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

.banner {
    font-family: 'vn', serif;
    font-weight: 400;
    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: 15em;
    height: auto;
    margin-bottom: 2.5em;
    transition: all .33s ease;
}

.wrap {
    text-align: center;
    height: auto;
    position: absolute;
}

.wrap-1 {
    left: 5em;
    top: 2.5em;
    left: 50%;
    top: calc(50% - 20em);
    transform: translate(-50%, -25%);
    color: #fff;
    padding: 0 4em;
    white-space: nowrap;
}

.hero {
    font-weight: 500;
    font-size: 2.5em;
    line-height: 1.3;
}

.hero br {
    display: none
}

.wrap-3 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
    top: calc(50% + 5em);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.box-copy {
    padding-left: .4em;
    transition: all .5s ease;
    font-size: .8em;
}

.box-title {
    font-weight: 500;
    white-space: nowrap;
    font-size: 1.45em;
    margin-bottom: .5em;
    line-height: 1.2;
}

.box-preamble {
    white-space: nowrap;
    font-size: 1.2em;
    line-height: 1.4;
}

.btn {
    margin-top: 1em;
    font-size: 1.2em;
}

.btn-arrow {
    margin-left: .2em;
    width: .7em;
    height: auto;
    stroke: #fff;
}

.btn:hover {
    opacity: .5
}

.box {
    position: relative;
    text-align: left;
    padding: 0 4em;
    cursor: pointer;
}

.box-img {
    transition: all .2s ease;
    width: 17em;
    height: auto;
    position: relative;
    margin-bottom: 1.6em;
}

/********/

.box {
    transform-origin: center;
    transform: translateY(20%);
    opacity: 0
}

.animate .box {
    transition: all .4s cubic-bezier(.4, .1, .4, 1.4);
    transition: all .5s ease;
}

.show .box {
    transform: translateY(0%);
    opacity: 1
}

.show .box-1 {
    transition-delay: 0s
}

.show .box-2 {
    transition-delay: .04s
}

.show .box-3 {
    transition-delay: .08s
}

@media (orientation: portrait) {
    html, body {
        font-size: 1.9vw;
    }
    .wrap-1 {
        top: calc(50% - 38em);
    }
    .hero {
        font-size: 3em;
    }
    .hero br {
        display: block
    }
    .wrap-3 {
        top: calc(50% + 6em);
    }
    .box {
        padding: 1.7em 2em;
    }
    .box-img {
        width: 16em;
        margin-bottom: 1.2em
    }
}

/*@media (orientation: portrait) and (min-width: 520px) {*/
/*@media (min-aspect-ratio: 1/1) and (max-aspect-ratio: 5/8) {*/
@media (orientation: portrait) and (min-aspect-ratio: 5/8) {
    html, body {
        font-size: 1.5vw;
    }
    .wrap-1 {
        top: calc(50% - 28em);
    }
    .wrap-3 {
        top: calc(50% + 3em);
    }
}

/*@media (min-aspect-ratio: 1/1) and (max-aspect-ratio: 10/8) {*/
@media (min-aspect-ratio: 1/1) and (max-aspect-ratio: 10/7) {
    html, body {
        font-size: 1.2vw;
/*        font-size: 1.5vh;*/
    }
}