@media only screen and (max-device-width: 600px) {
   img, video {
   max-width: 100%;
   height: auto;
}
}
/* Pantalla de carga */
#loading-screen {
       position: fixed;
       width: 100%;
       height: 100%;
       background-color: rgb(48, 159, 187);
       z-index: 9999;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
   }

   /* Estilo para el mensaje */
   #loading-message {
       margin-top: 20px;
       font-size: 25px;
       color: #f0f0f0;
       font-family: Arial, Helvetica, sans-serif;
       font-weight: bold;
   }

   /* Logo en la parte superior */
   #logo {
       position: absolute;
       top: 20px;
       width: 150px;
   }


   .spinner {
color: #ffffff;
font-size: 45px;
text-indent: -9999em;
overflow: hidden;
width: 1em;
height: 1em;
border-radius: 50%;
position: relative;
transform: translateZ(0);
animation: mltShdSpin 1.7s infinite ease, round 1.7s infinite ease;
}

@keyframes mltShdSpin {
0% {
box-shadow: 0 -0.83em 0 -0.4em,
0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
5%,
95% {
box-shadow: 0 -0.83em 0 -0.4em, 
0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 
0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
10%,
59% {
box-shadow: 0 -0.83em 0 -0.4em, 
-0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, 
-0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
}
20% {
box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em,
-0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, 
-0.749em -0.34em 0 -0.477em;
}
38% {
box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em,
-0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, 
-0.82em -0.09em 0 -0.477em;
}
100% {
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 
0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
}

@keyframes round {
0% { transform: rotate(0deg) }
100% { transform: rotate(360deg) }
}

        /* Efecto de aparicion progresiva del mensaje */
        #loading-message {
            margin-top: 20px;
            font-size: 25px;
            font-family: Arial, Helvetica, sans-serif;
            color: #ffffff;
            opacity: 0;
            transform: translateX(-100%);
            animation: slideIn 2s ease-in-out forwards, slideOut 2s ease-in-out 5s forwards;
        }

        #loading-message-2 {
            margin-top: 20px;
            font-size: 25px;
            font-family: Arial, Helvetica, sans-serif;
            color: #ffffff;
            font-weight: bold;
            opacity: 0;
            transform: translateX(-100%);
        }

        /* Animacion de entrada */
        @keyframes slideIn {
            0% {
                opacity: 0;
                transform: translateX(0);
            }
            100% {
                opacity: 1;
                transform: translateX(0);
            }
        }

        /* Animacion de salida */
        @keyframes slideOut {
            0% {
                opacity: 1;
                transform: translateX(0);
            }
            100% {
                opacity: 0;
                transform: translateX(0);
            }
        }

        /* Animacion para el segundo mensaje */
        @keyframes slideInSecond {
            0% {
                opacity: 0;
                transform: translateX(0%);
            }
            100% {
                opacity: 1;
                transform: translateX(0);
            }
        }