:root{
    --fondo-color: #ffffff;
    --fondo-transparente:   hwb(34 53% 13% / 0);

    --color-texto: rgb(17, 82, 50);
    --color-titulo: rgb(17, 82, 50);
    --color-botones-hover:  rgb(253, 190, 25);
    --color-botones:  rgba(236, 234, 234, 0.695);
    --border-color: rgba(240, 248, 255, 0.684);
    --color-barra:  rgb(17, 82, 50);

    
    --fuente:    'Mulish', sans-serif;
    --fuente-size-normal:  1.1em;
    --fuente-size-titulo:  1.2em;
    --fuente-size-sub:  1.4em;
    --fuente-texto-barra: 2em;
    --fuente-size-peke:  0.95rem;   
}



.video-js{
    width: 100%;
    margin: 0 auto ;
    background-color:rgba(255, 255, 255, 0);
    list-style: none;
    margin-top: 10px;
}

#modal{
    display: flex;
    position:fixed;
    z-index: 9;
    height: 100vh;
    width: 100%;
    margin: 0 auto ;   
    text-align: center;
    align-content: center;
    background-color:rgba(255, 255, 255, 0);

  
}

#btn-modal{
    position:fixed;
    margin: 0 auto;
    top: 20%;
    left: 75%;
    z-index: 10;
    background-color:var(--color-botones-hover);
    color: var(--color-texto);
    cursor: pointer;
    font-family: var(--fuente);
    border-radius: 10px;
    font-size: var(--fuente-size-peke);
    font-weight: 900;
    padding: 10px 20px;
    box-shadow:5px 5px 10px rgb(17, 82, 50); /* SOMBRA */  ; 
    display: none;
}

#btn-modal:hover{
    background-color:var(--color-barra);
    color:var(--fondo-color);
}


.btn_ad{
   margin-top: 10px;
    margin: 0 auto;
   height: 40px;
    z-index: 10;
    background-color:rgba(243, 240, 72, 0.907);
    color: var(--color-texto);
    cursor: pointer;
    font-family: var(--fuente);
    border-radius: 5px;
    font-size: var(--fuente-size-peke);
    font-weight: 900;
    padding: 5px 10px;
    box-shadow:3px 3px 10px rgb(17, 82, 50); /* SOMBRA */  ; 
}




/* PARA ESCRITORIO */
@media( min-width: 934px ){

    .video-js{
        width: 100%;
        margin: 0 auto ;
        background-color:rgba(131, 155, 236, 0.608);
        list-style: none;
        margin-top: 10px;
    }

    #btn-modal{
        display: none;
        top: 20%;
        left: 58%;
        box-shadow:5px 5px 10px rgb(17, 82, 50); /* SOMBRA */  ; 
    }


    .btn-modal{
        top: 20%;
        left: 58%;
        box-shadow:5px 5px 10px rgb(17, 82, 50); /* SOMBRA */  ; 
        display: none;
    }
    
    .btn_ad{
        margin-top: 10px;
         margin: 0 auto;
        height: 40px;
         z-index: 10;
         background-color:rgba(243, 240, 72, 0.907);
         color: var(--color-texto);
         cursor: pointer;
         font-family: var(--fuente);
         border-radius: 5px;
         font-size: var(--fuente-size-peke);
         font-weight: 900;
         padding: 5px 10px;
         box-shadow:3px 3px 10px rgb(17, 82, 50); /* SOMBRA */  ; 
     }

}