body {
    margin: 0;
    padding: 0;
}

.background {
    width: 100%;
    height: 800px;
    position: fixed;
    top: 0;
    z-index: -10;
    background: -webkit-linear-gradient(top, rgb(161, 219, 255) 0%, rgb(203, 235, 255) 53%, rgb(240, 249, 255) 100%); /* Chrome10+,Safari5.1+ */
    background-color: rgb(161, 219, 255); /* Chrome10+,Safari5.1+ */

    background-size: 100% 100%;
}

.clouds {
    width: 400px;
    height: 600px;
    position: absolute;
    z-index: -2;
}

.cloud1 {
    top: -150px;
    fill: #eee;
    left: 55%;
    /*Animation shorthand syntax order: name, duration, timing-function, delay, iteration-count, direction, fill-mode*/
    -webkit-animation: move 20s linear infinite;
    -moz-animation: move 20s linear infinite;
    -o-animation: move 20s linear infinite;
    animation: move 20s linear infinite;
}

.cloud2 {
    width: 400px;
    height: 600px;
    top: 0px;
    fill: #eee;
    left: 15%;
    -webkit-animation: move 35s linear infinite backwards;
    -moz-animation: move 35s linear infinite backwards;
    -o-animation: move 35s linear infinite backwards;
    animation: move 35s linear infinite backwards;
}

@-webkit-keyframes move {
    from {
        -webkit-transform: translateX(-400px);
    }
    to {
        -webkit-transform: translateX(1350px);
    }
}


@keyframes lds-interwind {
    0%, 100% {
        animation-timing-function: cubic-bezier(0.2, 0, 0.8, 1);
    }
    50% {
        animation-timing-function: cubic-bezier(0, 0.2, 1, 0.8);
    }
    0% {
        -webkit-transform: rotate(0deg) translate(0, -20px) scale(0);
        transform: rotate(0deg) translate(0, -20px) scale(0);
    }
    50% {
        -webkit-transform: rotate(180deg) translate(0, -20px) scale(1);
        transform: rotate(180deg) translate(0, -20px) scale(1);
    }
    100% {
        -webkit-transform: rotate(360deg) translate(0, -20px) scale(0);
        transform: rotate(360deg) translate(0, -20px) scale(0);
    }
}

@-webkit-keyframes lds-interwind {
    0%, 100% {
        animation-timing-function: cubic-bezier(0.2, 0, 0.8, 1);
    }
    50% {
        animation-timing-function: cubic-bezier(0, 0.2, 1, 0.8);
    }
    0% {
        -webkit-transform: rotate(0deg) translate(0, -20px) scale(0);
        transform: rotate(0deg) translate(0, -20px) scale(0);
    }
    50% {
        -webkit-transform: rotate(180deg) translate(0, -20px) scale(1);
        transform: rotate(180deg) translate(0, -20px) scale(1);
    }
    100% {
        -webkit-transform: rotate(360deg) translate(0, -20px) scale(0);
        transform: rotate(360deg) translate(0, -20px) scale(0);
    }
}

div.lds-interwind {
    position: relative;
}

div.lds-interwind div {
    position: absolute;
    top: 70px;
    left: 70px;
    -webkit-animation: lds-interwind 1s linear infinite;
    animation: lds-interwind 1s linear infinite;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #018948;
}

div.lds-interwind div:last-child {
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s;
    background: #f7d118;
}

.lds-interwind {
    width: 200px !important;
    height: 200px !important;
    -webkit-transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
    transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
}