body {
    background: url(../img/bg.webp) top left no-repeat;
    font-family: "Asap", sans-serif;
}

.container {width:1400px; margin: 0 auto; text-align: center;}
.left { float: left; width: 45%; text-align: center; margin: 0 auto;}
.right { float: right; width: 55%;}
.right img { width: 86%; padding: 110px 0 0 50px; text-align: center; margin: 0 auto;}
.clear { clear: both;}
.logo {width: 250px; margin: 25vh auto 0;}
.logo img {width: 100%;}
.title {font-size: 40px; color: #fff; padding: 35px 0; line-height: 60px; }
.title span {display: block; text-transform: uppercase; font-weight: 500;font-size: 45px; }
.text {color: #218fc2; font-size: 23px; border: 1px solid #218fc2; padding: 20px 20px; border-radius: 50px; }
.text2 {color: #fff; font-size: 18px;padding: 20px 20px; line-height: 35px; }

img {
    animation: colorize 2s cubic-bezier(0, 0, .78, .36) 1;
    background: transparent;
    display: block;
}

@keyframes colorize {
    0% {
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
    }
    100% {
        -webkit-filter: grayscale(0%);
        filter: grayscale(0%);
    }
}

@media screen and (max-width: 767px) {
    .container { width: 90%; }
    .left { float: none; width: 100%;}
    .right { float: none; width: 100%; margin: 0 auto; text-align: center;}
    .logo {width: 110px; margin: 4vh auto 0;}
    .title {font-size: 21px; padding: 25px 0; line-height: 40px; }
    .title span {font-size: 25px; }
    .text {color: #218fc2; font-size: 14px; padding: 10px; }
    .right img { width: 86%; padding: 30px 0 0px;}
}