@font-face {
    font-family: "Pebble";
    src: url("pebble.woff") format("woff");
    font-weight: 400;
    font-style: normal;
}

/*
@font-face {
    font-family: "TeliaSans";
    src: url("ts-regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
}
*/

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

/*
@font-face {
    font-family: "TeliaSans";
    src: url("ts-bold.woff") format("woff");
    font-weight: 600;
    font-style: normal;
}
*/

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

.banner {
    width: 100vw;
    height: 100vh;
    position: relative;
    color: #004b50;
    overflow: hidden;
    cursor: pointer;
    font-family: "TeliaSans", sans-serif;
    font-weight: 500;
    line-height: 1.4;
    -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;
}

.banner {
    background-repeat: no-repeat;
    background-size: cover;
}

.top {
}

.bottom {
}

.tint {
    position: absolute;
    top: -2px;
    left: 0;
    background-image: url(tint.png);
    background-repeat: repeat-x;
    background-size: contain;
    opacity: .4;
    width: 100%;
    height: 17em;
}

.left, .right {
    position: absolute;
    width: 50%;
    height: 100%;
    top: 0;
}

.left {
    left: 5em;
}

.right {
    right: 0;
}

.stand-wrap {
    position: absolute;
    width: 38em;
    height: auto;
    left: 50%;
    transform: translateX(-50%);
    bottom: -8em;
}

.stand {
    width: 100%;
    height: auto;
}

.tv-off {
    position: absolute;
    top: 0;
    left: 0;
}

.animate .tv-off {
    transition: opacity .5s ease;
}

.show-3 .tv-off {
    opacity: 0;
}

.content-wrap {
    position: absolute;
    top: 3.6em;
    width: 9.5em;
    height: auto;
    left: 50%;
    transform: translateX(-50%);
}

.content {
    position: relative;
    width: 100%;
    height: auto;
    opacity: 0;
}

.c-2, .c-3, .c-4 {
    position: absolute;
    top: 0;
    left: 0;
}

.animate .content {
    transition: all .38s cubic-bezier(.45, 1, 1, 1);
    transition-delay: .2s;
}

.c-2 {
    transform: rotateY(180deg);
}

.c-3, .c-4 {
    transform: translateY(3em);
    transition: all .36s ease-in-out;
}

.show-3 .c-1 {
    opacity: 1;
    transform: rotateY(180deg);
}

.show-3 .c-2 {
    opacity: 1;
    transform: rotateY(0deg);
    transition-delay: .15s;
    
    transition-delay: .35s;
}

.show-3 .c-3 {
    opacity: 1;
    transform: translateY(0em);
    transition-delay: .24s;
    
    transition-delay: .44s;
}

.show-3 .c-4 {
    opacity: 1;
    transform: translateY(0em);
    transition-delay: .3s;
    
    transition-delay: .5s;
}

.transparent {
    background-color: transparent;
}

.copy {
    padding-right: 2.5em;
    position: relative;
    font-weight: 500;
    color: #fff;
    margin-bottom: 2rem;
    display: inline-block;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

.hero {
    font-family: "Pebble", sans-serif;
    font-weight: 400;
    font-size: 5.6em;
    font-size: 6vw;
    line-height: 1;
    white-space: nowrap;
}

.h {
    position: relative;
    transform: translate(.5em,-.5em);
    transform: scale(1.2);
    transform-origin: bottom left;
    -webkit-filter: blur(6px);
    filter: blur(6px);
    display: inline-block;
    opacity: 0;
    will-change: auto;
}

.animate .h {
    transition: all .5s ease
}

.show-1 .h,
.show-2 .h,
.show-3 .h {
    opacity: 1;
    transform: translate(0,0);
    transform: scale(1);
    filter: blur(0px);
}

/*
.animate .h-1 {
    transition-delay: .3s;
}

.animate .h-2 {
    transition-delay: .25s;
}

.animate .h-3 {
    transition-delay: .2s;
}

.animate .h-4 {
    transition-delay: .1.5s;
}

.animate .h-5 {
    transition-delay: .1s;
}

.animate .h-6 {
    transition-delay: .05s;
}

.animate .h-7 {
    transition-delay: 0s;
}
*/

.show-1 .h-1 {
    transition-delay: 0s;
}

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

.show-1 .h-3 {
    transition-delay: .2s;
}

.show-1 .h-4 {
    transition-delay: .3s;
}

.show-1 .h-5 {
    transition-delay: .4s;
}

.show-1 .h-6 {
    transition-delay: .5s;
}

.show-1 .h-7 {
    transition-delay: .6s;
}

.byline {
    font-size: 1.8em;
    margin-top: 2rem;
    width: 90%;
    line-height: 1.4;
}

.btn {
    margin-top: 2.4rem;
    font-size: 1.3rem;
    display: inline-block;
    background-color: #0c6;
    color: #222;
    padding: 0.6em 2em;
    border-radius: 3em;
}

.btn:hover {
    color: #fff;
    background-color: #990ae3;
}

.animate .btn {
    transition: all .2s ease
}

.byline,
.btn-wrap {
    opacity: 0;
    transform: translateY(1em);
}

.btn-wrap {
    transform: translateY(2em);
}

.animate .byline,
.animate .btn-wrap {
    transition: all .4s ease
}

.show-3 .byline,
.show-3 .btn-wrap {
    opacity: 1;
    transform: translateY(0em);
}

.show-3 .btn-wrap {
    transition-delay: .08s;
}

.logo {
    position: absolute;
    width: 11em;
    height: auto;
    top: 4em;
    right: 4em;
}

@media (orientation: landscape) {
}

@media (orientation: portrait) {
    html, body {
        font-size: 2.2vw;
    }
    .left, .right {
        position: absolute;
        width: 100%;
    }
    .left {
        left: 1em;
    }
    .stand-wrap {
        bottom: -2em;
    }
    .copy {
/*        top: calc(50% - 16em);*/
        transform: translate(-50%,-70%);
    }
    .animate .copy {
        transition: all .5s ease;
    }
    .show-4 .copy {
/*        top: calc(50% - 16em);*/
        transform: translate(-50%,-130%);
    }
    .show-2 .byline,
    .show-2 .btn-wrap {
        opacity: 1;
        transform: translateY(0em);
    }
    .show-2 .btn-wrap {
        transition-delay: .08s;
    }
    .hero {
        font-size: 4.6em;
    }
}

/*@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;
    }
}

/*@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;*/
    }
}