/*
ANIMAZIONE DEL DRONE
*/


.anim_drone {
    position: relative;
    animation-name: slide_in;
    animation-duration: 5s;
    animation-delay: 0s;
    animation-direction: normal;
    animation-fill-mode: none;
    animation-play-state: running;
    animation-iteration-count: infinite;
    animation-timing-function: ease-out; 

    width: 200px;
    height: 250px;
    
}

@keyframes slide_in {
    0% {

        opacity: 0;
        margin-left: 0;
    }

    10% {
        opacity: 1;
    }

    40% {
        margin-left: 45%;

    }

    60% {
        margin-left: 45%;
        
    }

    90%{
        opacity: 1;
    }

    100% {
        opacity: 0;
        margin-left: 85%;
    }
}


.drone_body {
    position: relative;
    left: 25px;
    height: 50px;
    width: 150px;
    background-image: url("../img/drone.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

@keyframes rf_show {

    0% {
        height: 0;
    }

    40% {
        height: 0;
    }

    50% {
        height: 200px;
        
    }
    60% {
        height: 0;
    }

    100% {
        height: 0;
    }

}

.rf_ray {
    position: relative;
    left: 25px;
    height: 0px;
    width: 150px;
    
    background-image: url("../img/rf.png");
    background-position: center top;
    background-repeat: no-repeat;
    overflow: hidden;
    
    animation: rf_show 5s linear infinite normal;
   
}


.anim_ground {
    height: 75px;
    width: 100%;

    background-image: url("../img/ground.png");
    background-position: center top;
    background-repeat: repeat-x;
    background-size: contain;
}

.mine {
    position: relative;
    height: 30px;
    width: 150px;
    top: 20px;
    margin-left: 47.5%;
    background-image: url("../img/mine.png");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: contain;
}