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

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

@font-face {
    font-family: "g";
    src: url("g-semibold.woff") format("woff");
    font-weight: 600;
    font-style: normal;
    font-display: block;
}

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

.banner {
    font-family: 'bn', 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;
}

.bottom {
    background: rgb(0,9,32);
    background: linear-gradient(0deg, rgba(0,9,32,1) 0%, rgba(0,32,143,1) 100%);
}

.tint,
.tint-g {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0; right: 0; bottom: 0; left: 0;
    background-color: rgba(0,0,0,0.35);
}

.tint-light {
    background-color: rgba(0,0,0,0.05);
}

.tint-g {
    background: linear-gradient(0deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.75) 100%);
}

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

.video {
    position: absolute;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background-color: #000;
    /* background-image: url(blur.jpg); */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    object-fit: cover;
    object-position: 50% 50%;
}

.box-vid {
    opacity: 0;
    transition: opacity .5s ease;
}

.bv-show .box-vid {
    opacity: 1;
}

.box-vid-1 {
    background-image: url(blur-1.jpg);
}

.box-vid-2 {
    background-image: url(blur-2.jpg);
}

.box-vid-3 {
    background-image: url(blur-3.jpg);
}

.box-vid-4 {
    background-image: url(blur-4.jpg);
}

.start {
    width: 100%;
    text-align: center;
    position: absolute;
    top: 46%;
    transform: translateY(-50%);
    padding: 0 5rem;
}

.hero {
    font-size: 11.5em;
    font-size: 7.8em;
    line-height: 0.95;
}

.hero-l {
    font-size: 8.8em;
}

.wsnw {
    white-space: nowrap ;
}

.byline {
    font-size: 5em;
    font-size: 3.8em;
    line-height: 1;
    margin-top: .32em;
    transform: translateY(.4em);
    opacity: 0;
    color: #00208f;
}

@media (orientation: landscape) {
    .br-p {
        display: none;
    }
}

.hs {
    display: inline-block;
    transform: translateY(.6em);
    opacity: 0;
    color: #00208f;
}

.animate .hs,
.animate .byline {
    transition: all .36s ease, color .55s ease;
}

.show-1 .hs,
.show-1 .byline {
    opacity: 1;
    transform: translateY(0);
    color: #fff;
}

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

.show-1 .hs-2 {
    transition-delay: .09s;
}

.show-1 .hs-3 {
    transition-delay: .18s;
}

.show-1 .hs-4 {
    transition-delay: .25s;
}

.show-1 .hs-5 {
    transition-delay: .32s;
}

.show-1 .hs-6 {
    transition-delay: .38s;
}

.show-1 .hs-7 {
    transition-delay: .43s;
}

.logo-v {
    width: 3em;
    height: auto;
    margin-bottom: .25em;
}

.animate .logo {
    transition: all .33s ease;
}

.footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 3.5em 4em;
}

.footer::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 300%;
    height: 75vh;
    left: 0%;
    bottom: 0%;
    background: linear-gradient(0deg, rgba(0,9,32,1) 0%, rgba(0,9,32,0) 100%);
    z-index: -1;
    opacity: .5;
}

.logo-h {
    width: 16em;
    width: 21em;
    height: auto;
    position: absolute;
    z-index: 999;
    top: -2.3em;
    left: 50%;
    transform: translateX(-50%);
}

.logo-h {
    transform: translateX(-50%) scale(1.25);
    transform: translate(-50%,-35%) scale(1.25);
    transform-origin: bottom;
}

.animate .logo-h {
    transition: all .4s ease;
}

.show-2 .logo-h,
.show-3 .logo-h {
    transform: translateX(-50%);
}

.spectrum-bar {
    pointer-events: none;
    width: 100%;
    height: .65em;
    position: relative;
}

.spectrum-bar {
    transform: scaleX(.25);
    transition: all .4s ease;
    opacity: 0;
}

/* .show-1 .spectrum-bar, */
.show-2 .spectrum-bar,
.show-3 .spectrum-bar {
    opacity: 1;
    transition-delay: .25s;
    transform: scaleX(1);
}

.sb-glow {
    opacity: .8;
    position: absolute;
    content: "";
    width: 100%;
    height: 800%;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background-image: url(spectrum-glow.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50% 50%;
    transition: all .5s ease 1s;

    width: 100vw;
    height: 140vh;
}

.sb-bar {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(134,34,194,1) 0%, rgba(48,67,229,1) 25%, rgba(91,246,251,1) 45%, rgba(115,241,159,1) 60%, rgba(255,227,30,1) 75%, rgba(219,1,0,1) 100%);
}

.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: .6em;
    grid-row-gap: .6em;
    padding: 7.5em 4em 12em 4em;
    width: 100%;
    height: 100%;
}

.grid::before {
    white-space: nowrap;
    font-size: 2.4em;
    content: "Våre nordiske dramafavoritter";
    position: absolute;
    z-index: 999;
    left: 50%;
    transform: translate(-50%, -1.8em);
    opacity: 0;
}

.animate .grid::before {
    transition: all .25s ease;
}

.show-2 .grid::before,
.show-3 .grid::before {
    transition: all .4s ease .4s;
    opacity: 1;
}

.box {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.play::before {
    content: "";
    position: absolute;
    top: 48%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-image: url(play.svg);
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 1;
    opacity: 0;
    transition: all .25s ease;
    width: 2.2em;
    height: 2.2em;
    filter: drop-shadow(0.4em 0.6em 1em rgba(0,0,0,0.8));
}

@media (orientation: landscape) {

    .play::before {
        opacity: .85;
    }

    .box:hover .play::before {
        opacity: 1;
    }

    .bv-show .play::before,
    .bv-show:hover .play::before {
        opacity: 0;
    }

    .bv-pause:hover .play::before {
        opacity: 1;
    }
}

@media (orientation: portrait) {

    .play::before {
        opacity: 1;
    }

    .bv-show .play::before {
        opacity: 0;
    }

    .bv-pause .play::before {
        opacity: 1;
    }
}

.box-copy {
    font-size: 1.6em;
    line-height: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    padding: 2.8rem 2rem;

    font-size: 1.38em;

    /* padding: 2.6rem 2rem;
    font-family: "g";
    font-weight: 500;
    text-transform: uppercase;
    font-size: 1em;
    line-height: 1.2; */
}

.box-footer {
    position: absolute;
    left: 0;
    bottom: 2em;
    text-align: center;
    width: 100%;
}

.original {
    font-family: "g";
    font-weight: 500;
    margin-bottom: 1em;
    font-size: .9em;
}

.box-btn {
    font-family: "g";
    font-weight: 600;
    border: 2px solid #fff;
    background-color: rgba(0,0,0,.2);
    color: #fff;
    padding: .5em 2em;
    padding: .45em 2em .55em 2em;
    border-radius: 2em;
    display: inline-block;
    transition: all .2s ease;
}

.box-btn:hover {
    background-color: #fff;
    color: #000;
}

.box-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;

    transition: all .33s ease;

    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0)
}

.box-bg-1 {
    background-image: url(bg-1.jpg);
}

.box-bg-2 {
    background-image: url(bg-2.jpg);
}

.box-bg-3 {
    background-image: url(bg-3.jpg);
    background-position: 15% 10%;
}

.box-bg-4 {
    background-image: url(bg-4.jpg);
    background-position: 35% 50%;
}

.box:hover .box-bg {
    transform: scale(1.12);
}

/* .bv-show.box:hover .box-bg {
    transform: none;
} */

.bv-show .box-bg {
    opacity: 0;
}
    
.box-1 { grid-area: 1 / 1 / 2 / 2; }
.box-2 { grid-area: 1 / 2 / 2 / 3; }
.box-3 { grid-area: 1 / 3 / 2 / 4; }
.box-4 { grid-area: 1 / 4 / 2 / 5; }

.heart {
    position: absolute;
    top: .8em;
    right: .8em;
    width: 1.8em;
    height: auto;
}

.box-logo {
    width: 100%;
    height: auto;
    max-height: 1.6rem;
    object-fit: contain;
    object-position: 50% 50%;
    margin-bottom: 1.5rem;
    padding: 0 2rem;
}

.box-logo-1 {
    margin-bottom: 1.7rem;
}

.box-logo-2 {
    max-height: 2.2rem;
    padding: 0 4rem;
}

.box-logo-3 {
    max-height: 1.8rem;
    margin-bottom: 1.7rem;
    padding: 0 2.5rem;
}

.box-logo-4 {
    max-height: 3rem;
    margin-bottom: 1.3rem;
    padding: 0 3rem;
}

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

/********/

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

.animate .box {
    transition: all .5s ease;
}

.show-2 .box,
.show-3 .box {
    transform: translateY(0%);
    opacity: 1
}

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

.show-2 .box-3 {
    transition-delay: .15s
}

.show-2 .box-4 {
    transition-delay: .3s
}

.grid,
.grid::before,
.footer {
    pointer-events: none;
}

.show-2 .grid,
.show-3 .grid {
    pointer-events: auto;
}

@media (orientation: portrait) {
    html, body {
        font-size: 2vw;
    }
    .start {
        top: 44%;
        padding: 0 3rem;
    }
    .logo-h {
        transform: translate(-50%,-95%) scale(1.25);
    }
    .hero {
        /* font-size: 10em; */
    }
    .byline {
        margin-top: .5em;
        /* font-size: 4.5em; */
        font-size: 4.25em;
    }
    .br-l {
        display: none;
    }
    .grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        padding: 8em 2em 16em 2em;
    }
    .box-1 { grid-area: 1 / 1 / 2 / 2; }
    .box-2 { grid-area: 1 / 2 / 2 / 3; }
    .box-3 { grid-area: 2 / 1 / 3 / 2; }
    .box-4 { grid-area: 2 / 2 / 3 / 3; }
    .box {
        font-size: 1.3em;
    }
    .box-copy {
        padding: 3rem 3.5rem;
    }
    .footer {
        padding: 3.5em 2em 7em 2em;
    }
    .play::before,
    .play::after {
        top: 46% !important;
    }
}

@media (orientation: portrait) and (min-aspect-ratio: 5/8) {
    html, body {
        font-size: 1.3vw;
        font-size: 1.6vw;
    }
    .start {
        padding: 0 4rem;
    }
    .play::before,
    .play::after {
        top: 38%;
    }
    /* .exit {
        background-color: rgba(255, 0, 0, 0.466);
    } */
}

@media (orientation: portrait) and (min-aspect-ratio: 5/6) {
    html, body {
        font-size: 1.3vw;
    }
    /* .exit {
        background-color: rgba(30, 0, 255, 0.466);
    } */
}

@media (min-aspect-ratio: 1/1) and (max-aspect-ratio: 10/7) {
    html, body {
        font-size: 1.4vw;
        font-size: 1.3vw;
    }
}

/* WEATHER */

.show-rain,
.show-cloud,
.show-sun {
    display: none;
}

.rain .show-rain {
    display: block;
}

.cloud .show-cloud {
    display: block;
}

.sun .show-sun {
    display: block;
}

.top .tint {
    display: none;
}

.top.rain .video {
    background-image: url(../assets/blur-rain.jpg);
}
.top.rain .tint {
    display: block;
}

.top.cloud .video {
    background-image: url(../assets/blur-cloud.jpg);
}

.top.sun .video {
    background-image: url(../assets/blur-sun.jpg);
}
.top.sun .tint {
    display: block;
    background-color: rgba(0,0,0,0.05);
}