/* :::::::::::::::::::::::::::::::::::::::: IMAGEN DEL PLANETA Y ESTRATOSFERA :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
#planeta {
    position:absolute;
    top:50px;
    z-index:8;
}
    #mapa {
        position: absolute;
        top: 10px;
        left: 10px;
        width: 360px;
        height: 360px;
        box-shadow: 0 0 4px 9px #fff;
        border-radius: 50%;
        overflow: hidden;
    }

/* :::::::::::::::::::::::::::::::::::::::: AVIONICA :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

    #espacio_aereo {
        position: absolute;
        top: 0;
        left: 0;
        width: 380px;
        height: 380px;
        border-radius: 50%;
        overflow: hidden;
        box-shadow: 0 0 22px 6px #04283d;
        z-index:8;
    }

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */    

        #avion0, #avion1, #avion2 , #avion3, #avion4 {
        	position:absolute;
            width:70px;
            height:70px;
        	animation-iteration-count: infinite;
        	animation-timing-function: linear;	
        }
        
/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */   

        #avion0 {
            width:70px;
            height:150px;
            z-index: 8;
            animation: avion0 8s linear infinite; 
        }
        @keyframes avion0 {
            0% {
                left: 10%;
                top: 10%;
                transform: rotate(87deg) scale(0.1);
            }
            35% {
                left: 22%;
                top: 45%;
                transform: rotate(77deg) scale(0.2);
            }
            100% {
                left: 38%;
                top: 89%;
                transform: rotate(72deg) scale(0.1);
            }
        }
        
        #avion1 {
            z-index: 9;
            animation: avion1 10s linear infinite; 
        }
        @keyframes avion1 {
            0% {
                left: 10%;
                top: 80%;
                transform: rotate(335deg) scale(0.1);
            }
                        30% {
                left: 30%;
                top: 60%;
                transform: rotate(305deg) scale(0.3);
            }
                        100% {
                left: 50%;
                top: -1%;
                transform: rotate(290deg) scale(0);
            }
        }

        #avion2 {
            z-index: 5;
            animation: avion2 4s linear infinite; 
        }
        @keyframes avion2 {
            0% {
                left: 10%;
                top: 80%;
                transform: rotate(335deg) scale(0.1);
            }
                        30% {
                left: 30%;
                top: 60%;
                transform: rotate(305deg) scale(0.3);
            }
                        100% {
                left: 50%;
                top: -1%;
                transform: rotate(290deg) scale(0);
            }
        }
        
        #avion3 {
            z-index: 6;
            animation: avion3 8s linear infinite; /* linear = velocidad constante */
        }
        @keyframes avion3 {
            0% {
                left: 100%;
                top: 60%;
                transform: rotate(180deg) scale(0.1);
            }
            50% {
                left:50%;  /* Mitad del movimiento */
                top: 60%;
                transform: rotate(180deg) scale(0.4); /* Mitad de la escala */
            }
            100% {
                left: 0;
                top: 60%;
                transform: rotate(180deg) scale(0.1); /* Vuelve a la escala inicial */
            }
        }
        
        #avion4 {
            z-index: 2;
            animation: avion4 7s linear infinite; /* linear = velocidad constante */
        }
        @keyframes avion4 {
            0% {
    left: 5%;
    top: 70%;
    transform: rotate(305deg) scale(0.1);
}
            50% {
    left: 20%;
    top: 30%;
    transform: rotate(306deg) scale(0.4);
}
            100% {
    left: 40%;
    top: 0;
    transform: rotate(325deg) scale(0.2);
}

}     

@media screen and (min-width: 820px) {
}