.qatar {
    margin: 0;
    padding: 0;
    height: 50vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    /*background: url(/assets/img/bg/main-bg.jpg) bottom / cover no-repeat;*/
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 1) 50%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 1) 50%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: cover;
    mask-size: cover;
}

.sky {
    background-color: #0172c0;
    background-size: cover;
    height: 100%;
    width: 100%;
    top: 0;
    overflow: hidden;
}

.cloud-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 110vw;
    height: 100%;
    overflow: hidden;
}

@-webkit-keyframes animateCloud {
    0% {
        transform: translateX(-10%);
    }

    100% {
        transform: translateX(200%);
    }
}

@-moz-keyframes animateCloud {
    0% {
        transform: translateX(-10%);
    }

    100% {
        transform: translateX(200%);
    }
}

@keyframes animateCloud {
    0% {
        transform: translateX(-10%);
    }

    100% {
        transform: translateX(200%);
    }
}

.cloud-1 {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
    z-index: 0;
    top: 0vh;
    height: 10vh;
    overflow: visible;
    animation: animateCloud 215s linear infinite -60s;
    -webkit-animation: animateCloud 297s linear infinite -60s;
    -moz-animation: animateCloud 171s linear infinite -60s;
}

.cloud-2 {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
    z-index: 0;
    top: 0vh;
    height: 10vh;
    overflow: visible;
    animation: animateCloud 283s linear infinite -60s;
    -webkit-animation: animateCloud 153s linear infinite -60s;
    -moz-animation: animateCloud 285s linear infinite -60s;
}

.cloud-3 {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
    z-index: 0;
    top: 0vh;
    height: 10vh;
    overflow: visible;
    animation: animateCloud 177s linear infinite -60s;
    -webkit-animation: animateCloud 243s linear infinite -60s;
    -moz-animation: animateCloud 223s linear infinite -60s;
}

.cloud-4 {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
    z-index: 0;
    top: 0vh;
    height: 10vh;
    overflow: visible;
    animation: animateCloud 189s linear infinite -60s;
    -webkit-animation: animateCloud 267s linear infinite -60s;
    -moz-animation: animateCloud 239s linear infinite -60s;
}

.cloud-5 {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
    z-index: 0;
    top: 0vh;
    height: 10vh;
    overflow: visible;
    animation: animateCloud 112s linear infinite -60s;
    -webkit-animation: animateCloud 108s linear infinite -60s;
    -moz-animation: animateCloud 235s linear infinite -60s;
}

.cloud-6 {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
    z-index: 0;
    top: 0vh;
    height: 10vh;
    overflow: visible;
    animation: animateCloud 253s linear infinite -60s;
    -webkit-animation: animateCloud 180s linear infinite -60s;
    -moz-animation: animateCloud 238s linear infinite -60s;
}

.cloud-7 {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
    z-index: 0;
    top: 0vh;
    height: 10vh;
    overflow: visible;
    animation: animateCloud 185s linear infinite -60s;
    -webkit-animation: animateCloud 202s linear infinite -60s;
    -moz-animation: animateCloud 168s linear infinite -60s;
}

.cloud-8 {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
    z-index: 0;
    top: 0vh;
    height: 10vh;
    overflow: visible;
    animation: animateCloud 294s linear infinite -60s;
    -webkit-animation: animateCloud 273s linear infinite -60s;
    -moz-animation: animateCloud 136s linear infinite -60s;
}

.cloud-9 {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
    z-index: 0;
    top: 0vh;
    height: 10vh;
    overflow: visible;
    animation: animateCloud 129s linear infinite -60s;
    -webkit-animation: animateCloud 151s linear infinite -60s;
    -moz-animation: animateCloud 114s linear infinite -60s;
}

.cloud-10 {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
    z-index: 0;
    top: 0vh;
    height: 10vh;
    overflow: visible;
    animation: animateCloud 156s linear infinite -60s;
    -webkit-animation: animateCloud 129s linear infinite -60s;
    -moz-animation: animateCloud 295s linear infinite -60s;
}

.cloud-11 {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
    z-index: 0;
    top: 0vh;
    height: 10vh;
    overflow: visible;
    animation: animateCloud 163s linear infinite -60s;
    -webkit-animation: animateCloud 298s linear infinite -60s;
    -moz-animation: animateCloud 268s linear infinite -60s;
}

.cloud-12 {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
    z-index: 0;
    top: 0vh;
    height: 10vh;
    overflow: visible;
    animation: animateCloud 266s linear infinite -60s;
    -webkit-animation: animateCloud 138s linear infinite -60s;
    -moz-animation: animateCloud 179s linear infinite -60s;
}

.cloud-13 {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
    z-index: 0;
    top: 0vh;
    height: 10vh;
    overflow: visible;
    animation: animateCloud 213s linear infinite -60s;
    -webkit-animation: animateCloud 176s linear infinite -60s;
    -moz-animation: animateCloud 162s linear infinite -60s;
}

.cloud-14 {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
    z-index: 0;
    top: 0vh;
    height: 10vh;
    overflow: visible;
    animation: animateCloud 245s linear infinite -60s;
    -webkit-animation: animateCloud 206s linear infinite -60s;
    -moz-animation: animateCloud 281s linear infinite -60s;
}

.cloud-15 {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
    z-index: 0;
    top: 0vh;
    height: 10vh;
    overflow: visible;
    animation: animateCloud 113s linear infinite -60s;
    -webkit-animation: animateCloud 127s linear infinite -60s;
    -moz-animation: animateCloud 297s linear infinite -60s;
}

.cloud-16 {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
    z-index: 0;
    top: 0vh;
    height: 0vh;
    overflow: visible;
    animation: animateCloud 207s linear infinite -60s;
    -webkit-animation: animateCloud 205s linear infinite -60s;
    -moz-animation: animateCloud 250s linear infinite -60s;
}

.cloud-17 {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
    z-index: 0;
    top: 0vh;
    height: 0vh;
    overflow: visible;
    animation: animateCloud 366s linear infinite -60s;
    -webkit-animation: animateCloud 329s linear infinite -60s;
    -moz-animation: animateCloud 255s linear infinite -60s;
}

.cloud-18 {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
    z-index: 0;
    top: 0vh;
    height: 0vh;
    overflow: visible;
    animation: animateCloud 452s linear infinite -60s;
    -webkit-animation: animateCloud 282s linear infinite -60s;
    -moz-animation: animateCloud 445s linear infinite -60s;
}

.cloud-19 {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
    z-index: 0;
    top: 0vh;
    height: 0vh;
    overflow: visible;
    animation: animateCloud 320s linear infinite -60s;
    -webkit-animation: animateCloud 222s linear infinite -60s;
    -moz-animation: animateCloud 398s linear infinite -60s;
}

.cloud-20 {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
    z-index: 0;
    top: 0vh;
    height: 0vh;
    overflow: visible;
    animation: animateCloud 382s linear infinite -60s;
    -webkit-animation: animateCloud 329s linear infinite -60s;
    -moz-animation: animateCloud 293s linear infinite -60s;
}

.cloud-21 {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
    z-index: 0;
    top: 0vh;
    height: 0vh;
    overflow: visible;
    animation: animateCloud 284s linear infinite -60s;
    -webkit-animation: animateCloud 226s linear infinite -60s;
    -moz-animation: animateCloud 374s linear infinite -60s;
}

.cloud-22 {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
    z-index: 0;
    top: 0vh;
    height: 0vh;
    overflow: visible;
    animation: animateCloud 438s linear infinite -60s;
    -webkit-animation: animateCloud 298s linear infinite -60s;
    -moz-animation: animateCloud 246s linear infinite -60s;
}

.cloud-23 {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
    z-index: 0;
    top: 0vh;
    height: 0vh;
    overflow: visible;
    animation: animateCloud 289s linear infinite -60s;
    -webkit-animation: animateCloud 219s linear infinite -60s;
    -moz-animation: animateCloud 318s linear infinite -60s;
}

.cloud-24 {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
    z-index: 0;
    top: 0vh;
    height: 0vh;
    overflow: visible;
    animation: animateCloud 490s linear infinite -60s;
    -webkit-animation: animateCloud 369s linear infinite -60s;
    -moz-animation: animateCloud 298s linear infinite -60s;
}

.cloud-25 {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
    z-index: 0;
    top: 0vh;
    height: 0vh;
    overflow: visible;
    animation: animateCloud 375s linear infinite -60s;
    -webkit-animation: animateCloud 372s linear infinite -60s;
    -moz-animation: animateCloud 497s linear infinite -60s;
}

.cloud-part-1 {
    width: 438px;
    height: 308px;
    border-radius: 50%;
    position: absolute;
    top: -23vh;
    left: -50vw;
}

.cloud-part-2 {
    width: 355px;
    height: 279px;
    border-radius: 50%;
    position: absolute;
    top: -27vh;
    left: -50vw;
}

.cloud-part-3 {
    width: 359px;
    height: 283px;
    border-radius: 50%;
    position: absolute;
    top: -34vh;
    left: -50vw;
}

.cloud-part-4 {
    width: 374px;
    height: 209px;
    border-radius: 50%;
    position: absolute;
    top: -27vh;
    left: -50vw;
}

.cloud-part-5 {
    width: 584px;
    height: 320px;
    border-radius: 50%;
    position: absolute;
    top: -34vh;
    left: -50vw;
}

.cloud-part-6 {
    width: 292px;
    height: 122px;
    border-radius: 50%;
    position: absolute;
    top: -20vh;
    left: -50vw;
}

.cloud-part-7 {
    width: 301px;
    height: 126px;
    border-radius: 50%;
    position: absolute;
    top: -34vh;
    left: -50vw;
}

.cloud-part-8 {
    width: 209px;
    height: 151px;
    border-radius: 50%;
    position: absolute;
    top: -24vh;
    left: -50vw;
}

.cloud-part-9 {
    width: 526px;
    height: 154px;
    border-radius: 50%;
    position: absolute;
    top: -28vh;
    left: -50vw;
}

.cloud-part-10 {
    width: 609px;
    height: 305px;
    border-radius: 50%;
    position: absolute;
    top: -31vh;
    left: -50vw;
}

.cloud-part-11 {
    width: 582px;
    height: 297px;
    border-radius: 50%;
    position: absolute;
    top: -29vh;
    left: -50vw;
}

.cloud-part-12 {
    width: 355px;
    height: 215px;
    border-radius: 50%;
    position: absolute;
    top: -32vh;
    left: -50vw;
}

.cloud-part-13 {
    width: 474px;
    height: 251px;
    border-radius: 50%;
    position: absolute;
    top: -22vh;
    left: -50vw;
}

.cloud-part-14 {
    width: 600px;
    height: 214px;
    border-radius: 50%;
    position: absolute;
    top: -22vh;
    left: -50vw;
}

.cloud-part-15 {
    width: 520px;
    height: 326px;
    border-radius: 50%;
    position: absolute;
    top: -34vh;
    left: -50vw;
}

.cloud-part-16 {
    width: 347px;
    height: 102px;
    border-radius: 50%;
    position: absolute;
    top: 56vh;
    left: -50vw;
    opacity: 0.7;
}

.cloud-part-17 {
    width: 262px;
    height: 125px;
    border-radius: 50%;
    position: absolute;
    top: 57vh;
    left: -50vw;
    opacity: 0.7;
}

.cloud-part-18 {
    width: 252px;
    height: 133px;
    border-radius: 50%;
    position: absolute;
    top: 2vh;
    left: -50vw;
    opacity: 0.7;
}

.cloud-part-19 {
    width: 211px;
    height: 115px;
    border-radius: 50%;
    position: absolute;
    top: 34vh;
    left: -50vw;
    opacity: 0.7;
}

.cloud-part-20 {
    width: 381px;
    height: 135px;
    border-radius: 50%;
    position: absolute;
    top: 64vh;
    left: -50vw;
    opacity: 0.7;
}

.cloud-part-21 {
    width: 264px;
    height: 53px;
    border-radius: 50%;
    position: absolute;
    top: 37vh;
    left: -50vw;
    opacity: 0.7;
}

.cloud-part-22 {
    width: 216px;
    height: 116px;
    border-radius: 50%;
    position: absolute;
    top: 30vh;
    left: -50vw;
    opacity: 0.7;
}

.cloud-part-23 {
    width: 320px;
    height: 80px;
    border-radius: 50%;
    position: absolute;
    top: 55vh;
    left: -50vw;
    opacity: 0.7;
}

.cloud-part-24 {
    width: 347px;
    height: 61px;
    border-radius: 50%;
    position: absolute;
    top: 63vh;
    left: -50vw;
    opacity: 0.7;
}

.cloud-part-25 {
    width: 214px;
    height: 55px;
    border-radius: 50%;
    position: absolute;
    top: 73vh;
    left: -50vw;
    opacity: 0.7;
}

#cloud-back {
    filter: url(#filter-back);
    box-shadow: 300px 300px 30px -20px #fff;
}

#cloud-mid {
    filter: url(#filter-mid);
    box-shadow: 300px 340px 70px -60px rgba(158, 168, 179, 0.3);
}

#cloud-front {
    filter: url(#filter-front);
    box-shadow: 300px 370px 60px -100px rgba(0, 0, 0, 0.2);
}

@keyframes randomGradientMove {
    0% {
        background-position: 0% 0%;
    }

    10% {
        background-position: 25% 50%;
    }

    20% {
        background-position: 50% 25%;
    }

    30% {
        background-position: 75% 75%;
    }

    40% {
        background-position: 100% 50%;
    }

    50% {
        background-position: 50% 100%;
    }

    60% {
        background-position: 25% 75%;
    }

    70% {
        background-position: 75% 25%;
    }

    80% {
        background-position: 100% 100%;
    }

    90% {
        background-position: 50% 50%;
    }

    100% {
        background-position: 0% 0%;
    }
}

.drone{
    position: absolute;
    left: -130px;
}