/* Container properties */
#scene {
        
    /* Positioning and dimensions */
    position: relative;
    width:100%;
    height: 100%;
    overflow: hidden;
    
    /* --- Gradient background --- */
    /* Solid fallback for old browsers */
    background: linear-gradient(rgb(10, 50, 255, 0.3) ,rgb(21, 255, 200, 0.7) , rgb(255, 100, 50, 0.5));
}

.stand {
    /* image is 12 x 130 px */
    position: absolute;
    bottom: 0;
    left: 250px;
}

.blades {
    /* image is 120 x 120 px */
    position: absolute;
    bottom:70px;
    left: 196px;
     /* Firefox */
    -moz-animation: bladeSpin 10s ease-in-out infinite;
    /* WebKit - Chrome and Safari */
    -webkit-animation: bladeSpin 10s ease-in-out infinite;
    /* Opera */
    -o-animation: bladeSpin 10s ease-in-out infinite;
    /* general syntax */
    animation: bladeSpin 10s ease-in-out infinite;
}

.cloud {
    position: absolute;
    /* Firefox */
    -moz-animation: cloudDrift linear infinite;
    /* WebKit - Chrome and Safari */
    -webkit-animation: cloudDrift linear infinite;
    /* Opera */
    -o-animation: cloudDrift linear infinite;
    /* general syntax */
    animation: cloudDrift linear infinite;
}

.lrg {
    /* image is 130 x 67 px */
    width:250px;
    height:125px;
    top: 40px;
    left: -140px;
    /* Firefox */
    -moz-animation-duration: 30s;
    /* WebKit - Chrome and Safari */
    -webkit-animation-duration: 30s;
    /* Opera */
    -o-animation-duration: 30s;
    /* general syntax */
    animation-duration: 30s;
}

.med {
    /* image is 100 x 52 px */
    width:200px;
    height:100px;
    top: 80px;
    left: -110px;
    /* Firefox */
    -moz-animation-duration: 40s;
    /* WebKit - Chrome and Safari */
    -webkit-animation-duration: 40s;
    /* Opera */
    -o-animation-duration: 40s;
    /* general syntax */
    animation-duration: 40s;
}
.sml {
    /* image is 70 x 36 px */
    width:150px;
    height:75px;
    top: 10px;
    left: -80px;
    /* Firefox */
    -moz-animation-duration: 50s;
    /* WebKit - Chrome and Safari */
    -webkit-animation-duration: 50s;
    /* Opera */
    -o-animation-duration: 50s;
    /* general syntax */
    animation-duration: 50s;
}

@media (max-width: 479px) {
    .lrg {
        width:150px;
        height:75px;
        /* image is 130 x 67 px */
        top: 40px;
        left: -140px;
        /* Firefox */
        -moz-animation-duration: 15s;
        /* WebKit - Chrome and Safari */
        -webkit-animation-duration: 15s;
        /* Opera */
        -o-animation-duration: 15s;
        /* general syntax */
        animation-duration: 15s;
    }
    
    .med {
        /* image is 100 x 52 px */
        width:130px;
        height:65px;
        top: 80px;
        left: -110px;
        /* Firefox */
        -moz-animation-duration: 20s;
        /* WebKit - Chrome and Safari */
        -webkit-animation-duration: 20s;
        /* Opera */
        -o-animation-duration: 20s;
        /* general syntax */
        animation-duration: 20s;
    }
    .sml {
        /* image is 70 x 36 px */
        width:100px;
        height:50px;
        top: 10px;
        left: -80px;
        /* Firefox */
        -moz-animation-duration: 25s;
        /* WebKit - Chrome and Safari */
        -webkit-animation-duration: 25s;
        /* Opera */
        -o-animation-duration: 25s;
        /* general syntax */
        animation-duration: 25s;
    }
}

/* general syntax */
@keyframes bladeSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(1440deg); }
}
/* Firefox */
@-moz-keyframes bladeSpin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(1440deg); }
}
/* WebKit - Chrome and Safari */
@-webkit-keyframes bladeSpin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(1440deg); }
} 
/* Opera */
@-o-keyframes bladeSpin {
    from { -o-transform: rotate(0deg); }
    to { -o-transform: rotate(1440deg); }
} 

/* general syntax */
@keyframes cloudDrift {
    from { transform: translateX(0%); }
    to { transform: translateX(133vw); }
}
/* Firefox */
@-moz-keyframes cloudDrift {
    from { -moz-transform: translateX(0%);; }
    to { -moz-transform: translateX(133vw); }
}
/* WebKit - Chrome and Safari */
@-webkit-keyframes cloudDrift {
    from { -webkit-transform: translateX(0%);; }
    to { -webkit-transform: translateX(133vw); }
} 
/* Opera */
@-o-keyframes cloudDrift {
    from { -o-transform: translateX(0%);; }
    to { -o-transform: translateX(133vw); }
}