.sun {
    position: absolute;
    top: 40px;
    left: 15%;
    margin: auto;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: white;
    opacity: 0.9;
    box-shadow: 0px 0px 40px 15px white;
}

#canvas1,
#canvas2,
#canvas3 {
    display: none;
}

.ray_box {
    position: absolute;
    margin: auto;
    top: 0px;
    left: 0;
    right: 0;
    bottom: 0;
    width: 70px;
    -webkit-animation: ray_anim 60s linear infinite;
    animation: ray_anim 60s linear infinite;
}

.ray {
    background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
    margin-left: 10px;
    border-radius: 80% 80% 0 0;
    position: absolute;
    opacity: 0.1;
    left: 34%;
    -webkit-transform-origin: left;
    transform-origin: left;
}

.ray:nth-of-type(1) {
    width: 103px;
    height: 49px;
    top: calc(50% - 24.5px);
    -webkit-transform: rotate(36deg);
    transform: rotate(36deg);
}

.ray:nth-of-type(2) {
    width: 125px;
    height: 40px;
    top: calc(50% - 20px);
    -webkit-transform: rotate(72deg);
    transform: rotate(72deg);
}

.ray:nth-of-type(3) {
    width: 132px;
    height: 44px;
    top: calc(50% - 22px);
    -webkit-transform: rotate(108deg);
    transform: rotate(108deg);
}

.ray:nth-of-type(4) {
    width: 93px;
    height: 6px;
    top: calc(50% - 3px);
    -webkit-transform: rotate(144deg);
    transform: rotate(144deg);
}

.ray:nth-of-type(5) {
    width: 86px;
    height: 11px;
    top: calc(50% - 5.5px);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.ray:nth-of-type(6) {
    width: 117px;
    height: 52px;
    top: calc(50% - 26px);
    -webkit-transform: rotate(216deg);
    transform: rotate(216deg);
}

.ray:nth-of-type(7) {
    width: 114px;
    height: 16px;
    top: calc(50% - 8px);
    -webkit-transform: rotate(252deg);
    transform: rotate(252deg);
}

.ray:nth-of-type(8) {
    width: 130px;
    height: 15px;
    top: calc(50% - 7.5px);
    -webkit-transform: rotate(288deg);
    transform: rotate(288deg);
}

.ray:nth-of-type(9) {
    width: 84px;
    height: 28px;
    top: calc(50% - 14px);
    -webkit-transform: rotate(324deg);
    transform: rotate(324deg);
}

.ray:nth-of-type(10) {
    width: 125px;
    height: 43px;
    top: calc(50% - 21.5px);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}

.ray:nth-of-type(11) {
    width: 87px;
    height: 53px;
    top: calc(50% - 26.5px);
    -webkit-transform: rotate(396deg);
    transform: rotate(396deg);
}

.ray:nth-of-type(12) {
    width: 104px;
    height: 30px;
    top: calc(50% - 15px);
    -webkit-transform: rotate(432deg);
    transform: rotate(432deg);
}

.ray:nth-of-type(13) {
    width: 130px;
    height: 36px;
    top: calc(50% - 18px);
    -webkit-transform: rotate(468deg);
    transform: rotate(468deg);
}

.ray:nth-of-type(14) {
    width: 115px;
    height: 17px;
    top: calc(50% - 8.5px);
    -webkit-transform: rotate(504deg);
    transform: rotate(504deg);
}

.ray:nth-of-type(15) {
    width: 104px;
    height: 34px;
    top: calc(50% - 17px);
    -webkit-transform: rotate(540deg);
    transform: rotate(540deg);
}

.ray:nth-of-type(16) {
    width: 118px;
    height: 15px;
    top: calc(50% - 7.5px);
    -webkit-transform: rotate(576deg);
    transform: rotate(576deg);
}

.ray:nth-of-type(17) {
    width: 100px;
    height: 54px;
    top: calc(50% - 27px);
    -webkit-transform: rotate(612deg);
    transform: rotate(612deg);
}

.ray:nth-of-type(18) {
    width: 131px;
    height: 20px;
    top: calc(50% - 10px);
    -webkit-transform: rotate(648deg);
    transform: rotate(648deg);
}

.ray:nth-of-type(19) {
    width: 89px;
    height: 22px;
    top: calc(50% - 11px);
    -webkit-transform: rotate(684deg);
    transform: rotate(684deg);
}

.ray:nth-of-type(20) {
    width: 92px;
    height: 52px;
    top: calc(50% - 26px);
    -webkit-transform: rotate(720deg);
    transform: rotate(720deg);
}

@-webkit-keyframes ray_anim {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.visualisation-container--sunny {
    display: none;
}

.cloud {
    background: #fff;
    /* background: linear-gradient(to top, #fff 5%, #f1f1f1 100%); */
    border-radius: 100px;
    box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);
    height: 120px;
    position: absolute;
    width: 350px;
    z-index: 1 !important;
}

.cloud:after,
.cloud:before {
    background: #fff;
    content: "";
    position: absolute;
    z-index: -1;
}

.cloud:after {
    border-radius: 100px;
    height: 100px;
    left: 50px;
    top: -50px;
    width: 100px;
}

.cloud:before {
    border-radius: 200px;
    width: 180px;
    height: 180px;
    right: 50px;
    top: -90px;
}

.cloud:nth-of-type(1) {
    -webkit-animation: animateCloud 19s linear infinite;
    animation: animateCloud 19s linear infinite;
    -webkit-transform: scale(0.0933333333);
    transform: scale(0.1933333333);
    top: 23%;
}

.cloud:nth-of-type(2) {
    -webkit-animation: animateCloud 28s linear infinite;
    animation: animateCloud 28s linear infinite;
    -webkit-transform: scale(0.23);
    transform: scale(0.23);
    top: 17%;
}

.cloud:nth-of-type(3) {
    -webkit-animation: animateCloud 17s linear infinite;
    animation: animateCloud 17s linear infinite;
    -webkit-transform: scale(0.0866666667);
    transform: scale(0.1866666667);
    top: 15%;
}

.cloud:nth-of-type(4) {
    -webkit-animation: animateCloud 15s linear infinite;
    animation: animateCloud 15s linear infinite;
    -webkit-transform: scale(0.2333333333);
    transform: scale(0.2333333333);
    top: 14%;
}

.cloud:nth-of-type(5) {
    -webkit-animation: animateCloud 29s linear infinite;
    animation: animateCloud 29s linear infinite;
    -webkit-transform: scale(0.31);
    transform: scale(0.31);
    top: 1%;
}

.cloud:nth-of-type(6) {
    -webkit-animation: animateCloud 40s linear infinite;
    animation: animateCloud 40s linear infinite;
    -webkit-transform: scale(0.3333333333);
    transform: scale(0.3333333333);
    top: 20%;
}

.cloud:nth-of-type(7) {
    -webkit-animation: animateCloud 19s linear infinite;
    animation: animateCloud 19s linear infinite;
    -webkit-transform: scale(0.23);
    transform: scale(0.23);
    top: -3%;
}

.cloud:nth-of-type(8) {
    -webkit-animation: animateCloud 34s linear infinite;
    animation: animateCloud 34s linear infinite;
    -webkit-transform: scale(0.36);
    transform: scale(0.36);
    top: 17%;
}

.cloud:nth-of-type(9) {
    -webkit-animation: animateCloud 20s linear infinite;
    animation: animateCloud 20s linear infinite;
    -webkit-transform: scale(0.3366666667);
    transform: scale(0.3366666667);
    top: 20%;
}

.cloud:nth-of-type(10) {
    -webkit-animation: animateCloud 36s linear infinite;
    animation: animateCloud 36s linear infinite;
    -webkit-transform: scale(0.2966666667);
    transform: scale(0.2966666667);
    top: 3%;
}

.cloud:nth-of-type(11) {
    -webkit-animation: animateCloud 24s linear infinite;
    animation: animateCloud 24s linear infinite;
    -webkit-transform: scale(0.2333333333);
    transform: scale(0.2333333333);
    top: 9%;
}

.cloud:nth-of-type(12) {
    -webkit-animation: animateCloud 26s linear infinite;
    animation: animateCloud 26s linear infinite;
    -webkit-transform: scale(0.2333333333);
    transform: scale(0.2333333333);
    top: 11%;
}

.cloud:nth-of-type(13) {
    -webkit-animation: animateCloud 24s linear infinite;
    animation: animateCloud 24s linear infinite;
    -webkit-transform: scale(0.2433333333);
    transform: scale(0.2433333333);
    top: 29%;
}

.cloud:nth-of-type(14) {
    -webkit-animation: animateCloud 45s linear infinite;
    animation: animateCloud 45s linear infinite;
    -webkit-transform: scale(0.24);
    transform: scale(0.24);
    top: 27%;
}

.cloud:nth-of-type(15) {
    -webkit-animation: animateCloud 26s linear infinite;
    animation: animateCloud 26s linear infinite;
    -webkit-transform: scale(0.1833333333);
    transform: scale(0.1833333333);
    top: 21%;
}

.cloud:nth-of-type(16) {
    -webkit-animation: animateCloud 28s linear infinite;
    animation: animateCloud 28s linear infinite;
    -webkit-transform: scale(0.05);
    transform: scale(0.15);
    top: 24%;
}

.cloud:nth-of-type(17) {
    -webkit-animation: animateCloud 30s linear infinite;
    animation: animateCloud 30s linear infinite;
    -webkit-transform: scale(0.0933333333);
    transform: scale(0.0933333333);
    top: -3%;
}

.cloud:nth-of-type(18) {
    -webkit-animation: animateCloud 22s linear infinite;
    animation: animateCloud 22s linear infinite;
    -webkit-transform: scale(0.1433333333);
    transform: scale(0.1433333333);
    top: 10%;
}

.cloud:nth-of-type(19) {
    -webkit-animation: animateCloud 32s linear infinite;
    animation: animateCloud 32s linear infinite;
    -webkit-transform: scale(0.3433333333);
    transform: scale(0.3433333333);
    top: 13%;
}

.cloud:nth-of-type(20) {
    -webkit-animation: animateCloud 12s linear infinite;
    animation: animateCloud 12s linear infinite;
    -webkit-transform: scale(0.36);
    transform: scale(0.36);
    top: 22%;
}


@-webkit-keyframes animateCloud {
    0% {
        margin-left: -30%;
        opacity: 0.5;
    }

    100% {
        margin-left: 100%;
        opacity: 0.6;
    }
}

@keyframes animateCloud {
    0% {
        margin-left: -30%;
        opacity: 0.5;
    }

    100% {
        margin-left: 100%;
        opacity: 0.6;
    }
}