@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

html, body {margin:0;padding:0;font-family:'Roboto', sans-serif;font-size:10px;}

body {background-color:#e7eaec;}

.wrapper {position:relative;display:flex;width:100%;height:100vh;overflow:hidden;}

.col.col-left {position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;height:80vh;padding-left:3vw;padding-top:5vh;width:65%;z-index:1;}

.col.col-left .titles > * {margin:0;}
.col.col-left .titles .title {margin-bottom:1rem;font-weight:bold;font-size:7rem;color:#000000;}
.col.col-left .titles .subtitle {font-weight:normal;font-size:5rem;color:#000000;}

.col.col-left .description {width:75%;font-weight:normal;font-size:3rem;color:#000000;}

.col.col-left .promo > * {margin:0;}
.col.col-left .promo .promo-title {font-weight:normal;font-size:5rem;color:#000000;}
.col.col-left .promo .promocode {position:relative;font-weight:bold;font-size:13rem;color:#2ed2b0;cursor:pointer;}
.col.col-left .promo .promocode > * {transition:opacity .4s;}
.col.col-left .promo .promocode .promo-copy {margin-top:3rem;vertical-align:top;height:6rem;width:auto;opacity:0.5;cursor:pointer;}
.col.col-left .promo .promocode .promo-copy:hover {opacity:0.7;}
.col.col-left .promo .promocode .promo-text {opacity:1.0;}
.col.col-left .promo .promocode .promo-message {position:absolute;visibility:hidden;top:14rem;left:0;font-size:4rem;font-weight:normal;color:#000000;opacity:0;transition-property:all;}
.col.col-left .promo .promocode.anim .promo-copy {opacity:0.9;}
.col.col-left .promo .promocode.anim .promo-text {opacity:0.5;}
.col.col-left .promo .promocode .promo-message.active {visibility:visible;opacity:1;}

.col.col-left .buttons {display:flex;}
.col.col-left .buttons .btn {width:50%;}
.col.col-left .buttons .btn img {width:100%;height:auto;}
.col.col-left .buttons .btn-google {margin-right:1vw;}

.col.col-right {position:relative;width:35%;height:100vh;}
.col.col-right .logo {position:absolute;display:flex;align-items:flex-end;justify-content:center;padding:40px 50%;top:-32%;right:-91%;width:100%;height:50%;transform:rotateZ(36deg);background:#2ed2b0;text-align:center;}
.col.col-right .logo img {width:60%;max-width:526px;height:auto;}
.col.col-right .phones {position:absolute;height:auto;top:10vh;right:3vw;}

@media (max-height: 900px) {
    html {font-size:7px;}
    .col.col-right .logo img {width:50%;}
}

@media (max-height: 750px) {
    html {font-size:6px;}
}

@media (max-width: 1690px) {
    html {font-size:5px;}
}

@media (max-width: 1520px) {
    .col.col-left .description {width:60%;}
}

@media (max-width: 1220px) {
    .col.col-left .buttons {width:60%;}
    .col.col-right .phones {top:auto;bottom:12vh;width:30%;}
    .col.col-left .description {width:40%;}
    .col.col-right .logo img {width:90%;}
}

@media (max-width: 1040px) {
    .bg {background-size:cover;background-position:left -100% top;}
}

@media (max-width: 800px) {
    .bg {width:60%;}
    .col.col-left .description {width:60%;}
    .col.col-right .phones {width:55%;}
}

@media (max-width: 660px) {
    html {font-size:4px;}

    .wrapper {flex-direction:column;}

    .bg {width:100%;height:75vh;background-size:cover;background-position:left 50vw top;}

    .wrapper .col {width:100%;}

    .col.col-left {order:2;height:40vh;}
    .col.col-left .promo .promo-title {font-weight:bold;}
    .col.col-left .titles .subtitle {width:75%;}
    .col.col-left .buttons {margin-top:2vh;width:50%;}

    .col.col-right {order:1;height:45vh;}
    .col.col-right .phones {right:auto;left:6vw;bottom:0;width:67%;}
    .col.col-right .logo {padding:20px 30%;top:-31%;right:-71%;}
    .col.col-right .logo img {width:40%;}
}