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;
}

.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%);
}

.img-slide {
    position: absolute;
    left: 15.5%;
    top: 57.4%;
    width: 69%;
    height: auto;
}

.draggable {
    position: absolute;
    top: 50%;
    left: 10%;
    width: 80%;
    height: 35%;
    /*background: aqua;*/
    z-index: 5;
}

.arrow-left {
    position: absolute;
    left: 7.19%;
    top: 66.88%;
    width: 10.78%;
    height: auto;
    z-index: 2000;
}

.arrow-right {
    position: absolute;
    left: 82.03%;
    top: 66.88%;
    width: 10.78%;
    height: auto;
    z-index: 2000;
}

.tomato {
    position: absolute;
    left: 3.59%;
    top: 19.69%;
    width: 54.69%;
    height: auto;
}

.cta-arrow {
    position: absolute;
    left: 84.81%;
    top: 88.65%;
    width: 10.94%;
    height: auto;
}

.cta {
    position: absolute;
    left: 55.31%;
    top: 88.65%;
    width: 35.7%;
    height: auto;
}
.top-elements {
    top: 52%;
}
.text-1 {
    position: absolute;
    left: 6.25%;
    top: 4.06%;
    width: 47.97%;
    height: auto;
}

.text-2 {
    position: absolute;
    left: 6.09%;
    top: 8.85%;
    width: 78.44%;
    height: auto;
}

.photo {
    position: absolute;
    left: 52.19%;
    top: 13.13%;
    width: 59.53%;
    height: auto;
}

.logo {
    position: absolute;
    left: 6.25%;
    top: 88.54%;
    width: 23.91%;
    height: auto;
}

.star-5 {
    position: absolute;
    left: 50.47%;
    top: 41.35%;
    width: 3.91%;
    height: auto;
}

.star-4 {
    position: absolute;
    left: 45.78%;
    top: 41.35%;
    width: 3.91%;
    height: auto;
}

.star-3 {
    position: absolute;
    left: 41.09%;
    top: 41.35%;
    width: 4.06%;
    height: auto;
}

.star-2 {
    position: absolute;
    left: 36.09%;
    top: 41.35%;
    width: 4.06%;
    height: auto;
}

.star-1 {
    position: absolute;
    left: 30.94%;
    top: 41.35%;
    width: 4.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.666666vh;
        left: 50%;
        transform: translateX(-50%);
    }
}
@media (max-aspect-ratio: 100/155){
    .top-elements {
        top: 50%;
    }
}
@media (max-aspect-ratio: 1/2) {
    .top-elements {
        width: 120%;
        padding-top: 180%;
        left: -10%;
    }
    .inner-text {
        width: 110%;
        padding-top: 165%;
    }
    .slider {
        top: 55%;
        width: 110%;
        left: -5%;
        padding-top: 165%;
    }
}