@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(160, 104, 0);
        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);
             }
         }