html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.container {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
}

.ad-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    visibility: hidden;
}

.final {
    display: none
}

.inner {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    padding-top: 150%;
    transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
}

.full-size {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.inner-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding-top: 150%;
}

.inner-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding-top: 150%;
}

.bg {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: auto;
    transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
}

.ellipse-1 {
    position: absolute;
    left: 74.06%;
    top: 59.58%;
    width: 5.16%;
    height: auto;
}

.ellipse-2 {
    position: absolute;
    left: 72.34%;
    top: 58.44%;
    width: 8.59%;
    height: auto;
}

.ellipse-3 {
    position: absolute;
    left: 70.31%;
    top: 57.08%;
    width: 12.66%;
    height: auto;
}

.text-intro {
    position: absolute;
    left: 36.09%;
    top: 69.17%;
    width: 27.97%;
    height: auto;
}

.btn-open {
    position: absolute;
    top: 20%;
    left: 0;
    width: 100%;
    height: 60%;
}

.asus-intro-3 {
    position: absolute;
    left: 14.22%;
    top: 30.83%;
    width: 72.34%;
    height: auto;
}

.asus-bottom {
    position: absolute;
    left: 14.22%;
    top: 54.79%;
    width: 72.34%;
    height: auto;
}

.asus-top-screen, .asus-top-screen-2, .asus-top-back {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
}

.asus-top-screen-2 {
    display: none;
}

.asus-intro-2 {
    position: absolute;
    left: 14.22%;
    top: 30.83%;
    width: 72.34%;
    height: auto;
}

/* ------------------------------------- */

.cover {
    position: absolute;
    left: 23.2%;
    top: 30.83%;
    width: 54.2%;
    height: 23.96%;
    transform-origin: bottom center;
    transform: rotateX(-90deg);
    /*opacity: 0.7;*/
}

.perspective {
    perspective: 900px;
    perspective-origin: 50% 39%;
    transform-style: preserve-3d;
}

/* ------------------------------------- */
.asus-intro-1 {
    position: absolute;
    left: 14.22%;
    /*top: 54.58%;*/
    top: 40%;
    width: 72.34%;
    height: auto;
}

.cta {
    position: absolute;
    left: 55%;
    top: 91.15%;
    width: 40.47%;
    height: auto;
}

.bg-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: #000;
}

.footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto;
}

.text-lenovo {
    position: absolute;
    left: 29.69%;
    top: 32.19%;
    width: 40%;
    height: auto;
}

.img-lenovo {
    position: absolute;
    left: 30.47%;
    top: 12.92%;
    width: 41.56%;
    height: auto;
}

.text-dell {
    position: absolute;
    left: 31.25%;
    top: 32.19%;
    width: 37.03%;
    height: auto;
}

.img-dell {
    position: absolute;
    left: 30.63%;
    top: 12.29%;
    width: 42.19%;
    height: auto;
}

.text-asus {
    position: absolute;
    left: 22.19%;
    top: 32.19%;
    width: 54.84%;
    height: auto;
}

.text-1 {
    position: absolute;
    left: 8.13%;
    top: 6.67%;
    width: 83.75%;
    height: auto;
}

.text-2 {
    position: absolute;
    left: 7.34%;
    top: 37.19%;
    width: 84.84%;
    height: auto;
}

.img-asus {
    position: absolute;
    left: 27.97%;
    top: 12.81%;
    width: 44.22%;
    height: auto;
}

.logo-windows {
    position: absolute;
    left: 27.03%;
    top: 44.58%;
    width: 46.56%;
    height: auto;
}

.logo-intro {
    position: absolute;
    left: 27.03%;
    bottom: 5%;
    width: 46.56%;
    height: auto;
}

.frame {
    position: absolute;
    left: 50%;
    top: 2.5%;
    width: 92.19%;
    height: 40.21%;
    transform: translate(-50%, 0);
    /*border: 3px solid #fff;*/
    overflow: hidden;
}

.frameI {
    position: absolute;
    left: 4%;
    top: 50%;
    width: 92%;
    height: 70%;
    transform: translate(0, -50%);
    overflow: hidden;
}

.ll, .lli {
    position: absolute;
    top: 0;
    left: 0;
    width: 0.6%;
    height: 100%;
    background: #fff;
}

.lr, .lri {
    position: absolute;
    top: 0;
    right: 0;
    width: 0.6%;
    height: 100%;
    background: #fff;
}

.lt, .lti {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    padding-top: 0.6%;
    background: #fff;
    transform-origin: top left;
}

.lb, .lbi {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding-top: 0.6%;
    background: #fff;
}

.logo-media {
    position: absolute;
    left: 52.84%;
    top: 80.52%;
    width: 37.78%;
    height: auto;
}

.video-container {
    position: absolute;
    left: 0;
    top: 53.02%;
    width: 100%;
    height: 37.5%;
}

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

.pause, .volume {
    position: absolute;
    bottom: 3%;
    width: 6%;
    height: auto;
    left: 1%;
}

.volume {
    left: auto;
    right: 1%;
}

.glow-2 {
    position: absolute;
    left: 5.94%;
    top: 24.48%;
    width: 88.91%;
    height: auto;
    display: none;
}

.glow-1 {
    position: absolute;
    left: 5.78%;
    top: 48.23%;
    width: 89.22%;
    height: auto;
}

.border-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: #666;
    z-index: 10;
}

.border-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: #666;
    z-index: 10;
}

.border-left {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
    background: #666;
    z-index: 10;
}

.border-right {
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background: #666;
    z-index: 10;
}

.cta_ {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media (min-aspect-ratio: 10/15){
    .container {
        width: 66.66666vh;
        left: 50%;
        transform: translate(-50%, 0);
    }
}

@media (max-aspect-ratio: 10/18) {
    /*.cta {*/
    /*    top: 84%;*/
    /*    left: 25%;*/
    /*    width: 50%;*/
    /*}*/
    .frame {
        left: 50%;
        top: -6%;
        width: 92.19%;
        height: 48%;
        transform: translate(-50%, 0);
        border: 3px solid #fff;
    }

    .text-1 {
        top: -2%;
    }

    .slider {
        top: -6%;
        width: 110%;
        height: 110%;
        left: -5%;
    }
}

@media (max-aspect-ratio: 1/2) {
    .cta {
        top: 84%;
        left: 25%;
        width: 50%;
    }

    .frame {
        left: 50%;
        top: -12%;
        width: 92.19%;
        height: 54%;
        transform: translate(-50%, 0);
        border: 2px solid #fff;
    }

    .text-1 {
        top: -7%;
    }

    .slider {
        top: -10%;
        width: 120%;
        height: 120%;
        left: -10%;
    }
}