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

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

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

.banner {
    font-family: 'er', sans-serif;
    font-weight: 500;
    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: 13em;
    height: auto;
    position: absolute;
    top: 2em;
    right: 2.5em;
}

.badge {
    width: 40em;
    height: auto;
    position: relative;
    right: 0;
    top: 0;
}

.new {
    width: 40em;
    height: auto;
    position: absolute;
    top: 0;
    left: 8rem
}

.wrap {
    width: 100%;
    text-align: center;
    height: auto;
    position: absolute;
    left: 0;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    text-align: left;
    top: 50%;
    display: inline-block
}

.wrap-1 {
    width: 50%
}

.wrap-2 {
    left: 50%;
    width: 50%
}

.copy-1 {
    padding-left: 8rem
}

.copy-2 {
    text-align: center;
    padding-right: 12rem;
    font-weight: 500;
    font-size: 5em
}

.copy-2 .ws {
    display: block;
    white-space: nowrap
}

.bold {
    position: relative;
    font-weight: 600
}

.under:after {
    content: "";
    position: absolute;
    width: 102%;
    background: #ffd341;
    height: .08em;
    border-radius: .1em;
    bottom: 0;
    left: -.1em;
}

.wrap-3 {
    display: flex;
    flex-wrap: wrap;
    padding: 0 12em;
    top: 60%;
}

.dish-copy {
    transition: all .5s ease;
    font-size: 1.2em
}

.trans .dish-copy {
    transform: scale(1.16)
}

.dish-btn {
    position: relative;
    color: #ffd341;
    pointer-events: all;
    transition: all .5s ease;
}

.change .dish-btn {
    opacity: 0;
    pointer-events: none
}

.header,
.footer {
    transition: all .3s ease;
    pointer-events: all;
    opacity: 1;
    position: relative;
    font-size: 2em;
    text-align: center;
    width: 100%
}

.header {
    text-shadow: 0 0.2em .8em #f3342e;
    margin-bottom: .25em;
}

.footer {
    margin-top: .5em;
}

.dish-btn.under:after,
.footer.under:after {
    position: relative;
    left: 0;
    width: 9.5em;
    display: block;
    margin: 0 auto
}

.dish-btn.under:after {
    transition: all .2s ease;
    opacity: 0;
    width: 0
}

.dish-btn:hover,
.dish-btn:focus,
.footer:hover,
.footer:focus {
    color: #ffd341;
}

.box {
    text-align: center;
    width: 25%
}

.box:hover .dish {
    transform: translate(-.33em, -1em);
    transform: scale(1.08);
}

.change .box:hover .dish {
    transform: none;
}

.box:hover .dish-btn.under:after {
    opacity: 1;
    width: 5em
}

.dish {
    transition: all .2s ease;
    width: 19em;
    width: 100%;
    height: auto;
    position: relative;
}

.back {
    position: absolute;
    margin: -2em 0 0em -3em;
    width: 6em;
    padding: 1em;
    height: auto;
    transform: rotate(5deg);
    transition: all .3s ease;
    opacity: 0;
    pointer-events: none;
}

.back:hover, .back:focus {
    transform: rotate(-10deg);
}

.back:active {
    transform: rotate(-30deg);
}

.wrap-3.show.change .back {
    opacity: 1;
    pointer-events: all;
}

.box {
    transform-origin: center;
    transition: all .4s cubic-bezier(.4, .1, .4, 1.4);
    transform: translateY(50%);
    opacity: 0
}

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

.wrap-3 .header,
.wrap-3 .footer {
    transform: translateY(100%);
    opacity: 0
}

.wrap-3.show .header,
.wrap-3.show .footer {
    transform: translateY(0%);
    opacity: 1
}

.wrap-3.show.change .header,
.wrap-3.show.change .footer {
    opacity: 0;
    pointer-events: none;
}

.show .hide {
    pointer-events: none;
    transform: translateY(50%);
    opacity: 0;
}

.box.trans {
    transform: scale(1.4) translateX(41%);
}

.box-2.trans {
    transform: scale(1.4) translateX(-30%);
}

.box-3.trans {
    transform: scale(1.4) translateX(-102%);
}

.box-4.trans {
    transform: scale(1.4) translateX(-173%);
}

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

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

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

/*RECIPES*/

.wrap-4 {
    width: 50%;
    left: 50%;
    display: flex;
    flex-wrap: wrap;
    padding-right: 20em;
    top: 60%;
    
    transition: all .5s ease;
    pointer-events: none;
    opacity: 0
}

.wrap-4.show {
    pointer-events: all;
    opacity: 1
}

.package {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right center;
    width: 50%;
    object-fit: contain;
    height: auto;
    transition: opacity .5s ease, transform .5s ease;
    opacity: 0
}

.show .package {
    opacity: 1;
    transition-delay: .5s;
    transform: rotate(10deg);
}

.recipe-wrap {
    padding-left: 1em;
    width: 50%;
    justify-content: center;
    align-self: center;
}

.recipe-head {
    font-size: 1.4em;
    line-height: 1.1;
    text-transform: uppercase
}

.twenty {
    width: 7em;
    height: auto;
    position: relative;
    left: -4em;
    top: -1em;
    opacity: 0;
    transition: all .5s ease;
    transform: rotate(-20deg);
}

.show .twenty {
    opacity: 1;
    transition-delay: .7s;
    transform: rotate(0);
}

.recipe-copy {
    line-height: 1.5
}

.recipe-copy:before {
    content: "+";
    color: #ffd341;
    display: block;
}

.recipe-footer {
    margin-top: 1em
}

.recipe-footer:before {
    content: "Produktutvalget gjelder uke 1-2";
    position: relative;
    display: block;
    margin: 0 auto;
    top: 4.8em;
    font-size: .5em
}

/*TRANSITIONS*/

.copy-1 {
    opacity: 0
}

.copy-1 {
    transform: translateX(-15%) rotate(-10deg);
    transition: all .4s cubic-bezier(.4, .1, .4, 1.4);
}

.new {
    transition: all .4s cubic-bezier(.4, .1, .4, 1.4);
}

.copy.show {
    transform: none;
    opacity: 1
}

.copy-1 .new {
    transform: rotate(-45deg);
    opacity: 0
}

.copy-1.show .new {
    transform: rotate(0);
    transition-delay: .3s;
    opacity: 1
}

.copy-1 {
    transition: all .4s cubic-bezier(.4, .1, .4, 1.4);
}

.copy-2 .ws {
    opacity: 0;
    transition: all .4s cubic-bezier(.4, .1, .4, 1.4);
    transform: translateX(15%)
}

.copy-2.show .ws {
    transform: translateX(0%);
    opacity: 1
}

.copy-2 .ws-2 {
    transition-delay: .1s;
}

.copy-2 .ws-3 {
    transition-delay: .15s;
}

.copy-2 .ws-1 .under:after {
    transition: all .3s ease;
    opacity: 0;
    width: 0
}

.copy-2.show .ws-1 .under:after {
    transition-delay: .4s;
    opacity: 1;
    width: 102%
}

.wrap-4.show.wipe {
    opacity: 0
}

@media (orientation: portrait) {
    html, body {
        font-size: 1vh
    }
    .banner {
        font-size: 1.2em
    }
    .wrap-1, .wrap-2 {
        font-size: 0.8em;
        width: 100%
    }
    .wrap-1 {
        margin-top: -14em;
    }
    .wrap-2 {
        left: 0;
        margin-top: 14em;
    }
    .badge {
        margin: 0 auto;
        display: block;
    }
    .new {
        left: 0
    }
    .copy-1, .copy-2 {
        padding: 0
    }
    .wrap-3 {
        padding: 0 4em;
        top: 52%;
    }
    .wrap-3.change {
        top: 50%
    }
    .box {
        width: 50%
    }
    .box.trans {
        transform: scale(1.4) translateX(36%);
    }

    .box-2.trans {
        transform: scale(1.4) translateX(-36%);
    }

    .box-3.trans {
        transform: scale(1.4) translate(36%, -70%);
    }

    .box-4.trans {
        transform: scale(1.4) translate(-36%, -70%);
    }
    .wrap-3 .footer {
        margin-top: 1em;
    }
    .wrap-4 {
        width: 100%;
        left: 0;
        padding: 0 5em;
        margin-top: 9em
    }
}

@media (orientation: portrait) and (min-width: 600px) {
    .wrap-3 {
        padding: 0 12em;
    }
}

.exit-wrap {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
}

.imp-img {
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 0;
}

.pe {
    pointer-events: none
}