html, body, .banner {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    background-color: #fff;
    font-size: 10px
}

.banner {
    position: relative;
    background-color: #000;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 100% center;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    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);
}

.banner, .banner *, .banner:after, .banner:before {
    box-sizing: border-box;
    backface-visibility: hidden
}

.tint {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: .08;
    pointer-events: none;
}

.wrap {
    width: calc(25% - 2em);
    width: calc(100vh / 3);
    height: calc(100% - 6em);
    position: absolute;
    bottom: 3em;
    right: 3em;
}

.side {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 75%;
    width: calc((100% - (100vh / 3)) - 3em);
    height: 100%;
}

.box {
    position: absolute;
    display: inline-block;
    width: 100%;
    height: calc(100% / 3);
    background-size: contain;
    background-position: 50% 25%;
    background-repeat: no-repeat;
    background-position: center center;
    top: 0;
    left: 0;
    border: .5rem solid transparent;
    overflow: hidden;
    -webkit-transform: translateX(110%);
    transform: translateX(110%)
}

.box:nth-child(2) {
    top: calc(100% / 3)
}

.box:nth-child(3) {
    top: calc(100% / 3 * 2)
}

.box-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #fff;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    transition: opacity .4s ease, transform .4s ease
}

.box-exit {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999
}

.logo {
    width: 9em;
    height: auto;
    position: absolute;
    top: 0;
    left: 7em;
}

.logo-farmen {
    width: 13em;
    left: 19em;
    top: 4.3em
}

.badge {
    width: 18em;
    height: auto;
    position: absolute;
    top: 5em;
    left: 5em;
}

.copy {
    width: 100%;
    line-height: 1.2;
    text-align: center;
    text-align: left;
    position: relative;
    color: #fff;
    top: 53%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    padding: 0 7em;
}

.copy-f {
    top: 55%
}

.hero {
    line-height: 1;
    font-size: 8em
}

.hero-f {
    line-height: 1.3;
    font-size: 6em;
    padding: 0 3em 0 0
}

.bold {
    font-weight: 700
}

.ast {
    position: relative;
    top: -.4em;
    font-size: .7em
}

.preamble {
    font-weight: 400;
    line-height: 1.4;
    margin-top: .7em;
    font-size: 2.5em
}

.disc {
    margin-top: 2em;
    font-size: 1.25em
}

.button {
    font-weight: 700;
    text-transform: uppercase;
    background-color: #a40235;
    color: #fff;
    white-space: nowrap;
    cursor: pointer;
    line-height: 1;
    position: relative;
    text-decoration: none;
    text-align: center;
    display: inline-block;
    margin: 2.25em auto 0 auto;
    padding: 1.4em 4em;
    font-size: 1.4em;
    letter-spacing: .1em;
    transition: background 150ms ease-out, color 150ms ease-out;
    text-shadow: none;
}

.button:hover, .button:focus {
    background-color: #720125
}

.box-copy {
    width: 70%;
    position: absolute;
    z-index: 999;
    font-size: 2em;
    line-height: 1.3;
    left: 0;
    bottom: 0;
    pointer-events: none;
    color: #017416;
    opacity: 1;
    padding: .8em;
    transition: opacity .3s ease .05s, left .3s ease .05s
}

.product-copy {
    font-weight: 400;
    position: relative;
    left: -1em;
    color: #000;
    left: 0;
    transition: opacity .3s ease .05s, left .3s ease .05s;
    opacity: 1
}

.product-name {
    position: relative;
    margin-bottom: .5em;
    font-size: .6em
}

.product-disc {
    line-height: 1.4;
    font-size: .6em;
    margin-top: .1em;
    color: #474747
}

.box-btn {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1em;
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 1.4em;
    z-index: 999;
    background-color: #a40235;
    padding: 1.2em 0;
    width: 27%;
    text-align: center;
    letter-spacing: .1em;
    line-height: 1;
    opacity: 1;
    transition: background .3s ease, opacity .3s ease-out, color .3s ease;
}

.move:nth-child(n+1) {
    transition: transform .5s ease, opacity .5s ease;
    -webkit-transform: none !important;
    transform: none !important;
    opacity: 1 !important;
}

/* Active */
            
.box:hover:after {
    opacity: .65
}
.box:hover .box-copy {
    color: #fff;
    opacity: 1;
}
.box:hover .product-copy {
    opacity: 1;
    left: 0;
}
.box:hover .amount {
    color: #fff;
}
.box:hover .box-btn {
    background-color: #720125
}
.box:hover .box-bg {
    -webkit-transform: scale(1.07);
    transform: scale(1.07)
}

/* Portrait */
            
@media (orientation: portrait) {
    .banner {
        position: initial;
        background-position: 70% bottom;
    }
    .video-2 {
        object-position: 60% 50%
    }
    .box-bg {
        background-position: 50% 40%
    }
    .button {
        font-size: 1.6em;
        margin: 2.5em auto 0 auto
    }
    .wrap {
        bottom: 5em;
        height: calc((100vw / 3) + 2em);
        width: 94.5%;
        width: calc(100% - 5em);
        right: 2.5em;
    }
    .box {
        width: calc(100% / 3);
        height: 100%;
        -webkit-transform: translateY(120%);
        transform: translateY(120%)
    }
    .box:nth-child(2) {
        top: 0;
        left: calc(100% / 3)
    }
    .box:nth-child(3) {
        top: 0;
        left: calc(100% / 3 * 2)
    }
    .side {
        width: 100%;
        height: calc(100% - (100vw / 3));
        top: 0;
    }
    .copy {
        text-align: center
    }
    .copy-f {
        top: 62.5%
    }
    .hero {
        font-size: 7em
    }
    .hero-f {
        padding: 0;
        font-size: 6em
    }
}

/* Pixel portrait */
            
@media (orientation: portrait) {
    html, .banner {
        font-size: 8px
    }
}

@media (max-width: 760px) and (orientation: portrait) {
    html, .banner {
        font-size: 5px
    }
}

@media (max-width: 340px) and (orientation: portrait) {
    html, .banner {
        font-size: 4px
    }
}

/* Pixel landscape */

@media (max-width: 1300px) and (orientation: landscape) {
    html, .banner {
        font-size: 9px
    }
}

@media (max-width: 1200px) and (orientation: landscape) {
    html, .banner {
        font-size: 8px
    }
}

@media (max-width: 1100px) and (orientation: landscape) {
    html, .banner {
        font-size: 7px
    }
}

@media (max-width: 1000px) and (orientation: landscape) {
    html, .banner {
        font-size: 6px
    }
}

@media (max-width: 800px) and (orientation: landscape) {
    html, .banner {
        font-size: 5px
    }
}

@media (max-width: 700px) and (orientation: landscape) {
    html, .banner {
        font-size: 4px
    }
}

@media (min-width: 1600px) and (orientation: landscape) {
    html, .banner {
        font-size: 10.5px
    }
}

@media (min-width: 1900px) and (min-height: 1000px) and (orientation: landscape) {
    html, .banner {
        font-size: 13px
    }
}

@media (min-width: 2200px) and (min-height: 1200px) and (orientation: landscape) {
    html, .banner {
        font-size: 15px
    }
}

/* Video */

.video-wrap {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background-color: #000;
}

.video {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
}

/* Support */

@media (min-aspect-ratio: 16/9) {
  .video {
      height: 300%;
      top: -100%;
    }
}
@media (max-aspect-ratio: 16/9) {
  .video {
      width: 300%;
      left: -100%;
    }
}

@supports (object-fit: cover) {
  .video {
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
  }
}

/* Edge fix for not supporting object-fit on video */

@media (min-aspect-ratio: 16/9) {
  _:-ms-lang(x), _:-webkit-full-screen, .video {
      height: 300%;
      top: -100%;
    }
}
@media (max-aspect-ratio: 16/9) {
  _:-ms-lang(x), _:-webkit-full-screen, .video {
      width: 300%;
      left: -100%;
    }
}

.video::-webkit-media-controls-start-playback-button, .video::-webkit-media-controls {
    display: none !important;
    -webkit-appearance: none;
}