/*Estilos solo para la pagina:lys.php*/

/*Variables lys.php*/
:root{    
    --lys-txt-title-size:42px;
    --lys-txt-subtitle-size:24px;
    --lys-txt-gral-size:22px;
    --lys-txt-gral-color:#4E4E4E;

    --lys-txt-title-size-mw967:34px;
    --lys-txt-subtitle-size-mw967:larger;
    --lys-txt-gral-size-mw967:medium;

    --lys-txt-title-size-mw767:xx-large;
    --lys-txt-subtitle-size-mw767:x-large;
    --lys-txt-gral-size-mw767:18px;
}

/*font*/ 
@font-face {
    font-family: "HelveticaBold";
    src: url('../font/Helvetica-Bold.ttf');
    font-display: swap; 
}
@font-face {
    font-family: "HelveticaNormal";
    src: url('../font/Helvetica.ttf');
    font-display: swap; 
}
.titlelys-div1{
    font-family: "HelveticaBold";
}
.ptxt-lys{
    font-family: "HelveticaNormal";
}

/*Microlearning por WhatsApp*/
.titlelys-div1{
    font-size: var(--lys-txt-title-size);
    color: var(--lys-txt-gral-color);
}
#img-lys-logo{
    width:22%;    
}
.ptxt-lys{
    font-size: var(--lys-txt-gral-size);    
    color: var(--lys-txt-gral-color);
}
#img-lys-smartphone{
    width:30%;
    margin-top: 5%;
}
.aref{
    text-decoration: none;
}
.botones{    
    font-size: var(--lys-txt-gral-size);
    background: #4285F4;
    color: #FFFFFF;
    padding: 15px;
    border-radius: 15px;
    width: 250px;
    margin: auto;
}

/* responsive */
@media (max-width: 967px){
    .titlelys-div1 {
        font-size: var(--lys-txt-title-size-mw967);        
    }
    #img-lys-logo {
        width: 25%;        
    }
    .ptxt-lys{
        font-size: var(--lys-txt-gral-size-mw967);
    }
    .botones{
        width: 180px;
        font-size: var(--lys-txt-gral-size-mw967);
    }
}

@media (max-width: 767px){    
    .titlelys-div1{
        font-size: var(--lys-txt-title-size-mw767);
    }
    #img-lys-logo{
        width: 40%;        
        margin: 5% 0% 5% 0%;
    }
    #img-lys-smartphone{
        width: 35%;
        margin-bottom: 5%;
    }
    .ptxt-lys{
        font-size: var(--lys-txt-gral-size-mw767);
    }
    .ptxt-lys br{
        display: none;
    }
    .botones{     
        margin-bottom: 5%;
    }
}