/*Estilos solo para la pagina: totara-engage.php*/

/*Variables totara-engage.php*/
:root {
    --totaraengage-txt-title-size:42px;
    --totaraengage-txt-subtitle-size:24px;
    --totaraengage-txt-gral-size:22px;
    --totaraengage-txt-gral-color:#FFFFFF;       

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

    --totaraengage-txt-title-size-mw767:xx-large;
    --totaraengage-txt-subtitle-size-mw767:x-large;
    --totaraengage-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; 
}
.titletotaraengage-div1,#h3txt-totaraengage,.h3-totaraengage,.ptxt-titleico{
    font-family: "HelveticaBold";
}
#ptxt-totaraengage,.ptxt-totaraengage-subtitle,.ptxt-txtnormal1,.ptxt-txtnormal2{
    font-family: "HelveticaNormal";
}

#pag-totaraengage{
    background: #000000;
}

/*cambios menu main, solo pag Totara Learn */
#pag-totaraengage #ac-globalnav-mtaec{
    background: #000000;
}
#pag-totaraengage #ac-globalnav-mtaec .ac-gn-linkmtaec-taec{    
    background-image: url(../menu/img_menu/main-menu/taec_logo.png);    
}
#pag-totaraengage #ac-globalnav-mtaec .ac-gn-linkmtaec{
    color: #FFFFFF;
}
#pag-totaraengage .ac-gn-menuicon-bread-mtaec-crust {
    background: #FFFFFF;
}
#pag-totaraengage #ac-gn-menustate-mtaec:checked ~ #ac-globalnav-mtaec{
    background: #000000;
}
#pag-totaraengage #ac-globalnav-mtaec .services,#topmenu span a{
    color:#FFFFFF !important;
}

/*menu descriptivo*/
#pag-totaraengage .ac-localnav-scrim#ac-localnav.ac-localnav-dark .ac-ln-background{
    background-color:#000000;
}
#pag-totaraengage #ac-localnav.ac-localnav-dark .ac-ln-title a,#pag-totaraengage #servicedesktop, #pag-totaraengage #servicemovile{
    color:#FFFFFF;
}
#pag-totaraengage #ac-localnav.ac-localnav-dark .ac-ln-menu-link.current, #pag-totaraengage #ac-localnav.ac-localnav-dark .ac-ln-menu-link {
    color: #FFFFFF;
    opacity: 1;
}
#pag-totaraengage #ac-localnav.ac-localnav-dark .ac-ln-menucta-chevron::before, 
#pag-totaraengage #ac-localnav.ac-localnav-dark .ac-ln-menucta-chevron::after,
#pag-totaraengage #ac-ln-menustate:checked ~ .ac-localnav-dark#ac-localnav .ac-ln-menucta-chevron::before,
#pag-totaraengage #ac-ln-menustate:checked ~ .ac-localnav-dark#ac-localnav .ac-ln-menucta-chevron::after{
    background: #FFFFFF;
}
#pag-totaraengage #ac-ln-menustate:checked ~ .ac-localnav-dark#ac-localnav .ac-ln-background{
    background: #000000;
}
#pag-totaraengage #ac-localnav.ac-localnav-dark .ac-ln-background:after{
    background: #000000;
}

/*Aprovecha el poder*/
.titletotaraengage-div1{
    font-size: var(--totaraengage-txt-title-size);    
    color: var(--totaraengage-txt-gral-color);
}
#img-totaraengage-logo{
    width:60%;
    margin-top: 2%;
}
#h3txt-totaraengage{
    font-size: var(--totaraengage-txt-subtitle-size);   
    color: var(--totaraengage-txt-gral-color); 
}
#ptxt-totaraengage{
    font-size: var(--totaraengage-txt-gral-size);   
    color: var(--totaraengage-txt-gral-color); 
    margin-top: 20px;
}

/*La plataforma para crear*/
.h3-totaraengage{
    color: var(--totaraengage-txt-gral-color);
    text-align: right;
    font-size: var(--totaraengage-txt-subtitle-size);
    margin-bottom: 30px;
}
.ptxt-totaraengage-subtitle{
    color: var(--totaraengage-txt-gral-color);
    text-align-last: end;
    text-align: justify;
    font-size: var(--totaraengage-txt-gral-size);
}
#img-shared{
    float: right;
    margin-right: -12px;
    width: 100%;
}

/*Fondo turquesa*/
#cont-fondo{
    margin-top: -20%;
    background-image: url(../img/Totara-engage/fondo.png);
    background-repeat: no-repeat;
    background-size: cover;
}
#subcont-col12{
    padding-top: 35%;
    padding-bottom: 2%;
}
.img-icos{
    width: 90px;
}
.ptxt-titleico{
    color: var(--totaraengage-txt-gral-color);
    text-align: left;
    font-size: 16px;
    padding-left: 30px;
    padding-right:30px;
}
.ptxt-txtnormal2{
    color: var(--totaraengage-txt-gral-color);
    text-align: justify;
    font-size: 18px;
}
.txthidden{
    display: none;
}
#conttxt2{
    padding-bottom:3%;
}

/*Otros Servicios*/
#pag-totaraengage .txt-hr{
    background-color: #000000;
    color: var(--totaraengage-txt-gral-color);
    padding: 0px 30px 0px 30px;
}
#pag-totaraengage #hr-div{    
    height: 20px; 
    border-bottom: 2px solid #FFFFFF; 
    text-align: center;
}


/* responsive */
@media (min-width: 1980px){
    #subfondo{
        padding-top: 5%;
    }
}

@media (max-width: 1600px){
    #subcont-col12{
        padding-top:30%;
    }
}

@media (max-width: 1400px){    
    .img-icos {        
        height: fit-content;
    }
}

@media (max-width: 1200px){    
    #cont-fondo {
        background: #36BDB1;   
        margin-top: -10%;     
    }
    #subcont-col12 {
        padding-top: 20%;     
    }
}

@media (max-width: 967px){
    .txthidden{
        display: inherit;
        margin-top: 5%;
    }
    #conttxt2{
        display: none;
    }
    .ptxt-titleico {
        margin-top: 20px;
    }
    .titletotaraengage-div1 {
        font-size: var(--totaraengage-txt-title-size-mw967);  
    }
    #img-totaraengage-logo {
        width: 70%;     
    }
    #h3txt-totaraengage,.h3-totaraengage{
        font-size: var(--totaraengage-txt-subtitle-size-mw967);
    }
    #ptxt-totaraengage,.ptxt-totaraengage-subtitle{
        font-size: var(--totaraengage-txt-gral-size-mw967);
    }
    #cont-fondo {
        margin-top: 0%;     
    }
    #subcont-col12 {
        padding-top: 8%;     
    }
    #pag-totaraengage #hr-div{
        width: 100%;         
    }
}
@media (max-width: 767px){ 
    #ac-ln-menustate:checked ~ .ac-localnav-dark#ac-localnav .ac-ln-menu-link.current{
        color: #FFFFFF;
        font-weight: bold;
        opacity: 1 !important;
    } 
    #cont-fondo {     
        margin-top: 15%;
    }
    .ptxt-titleico {
        margin-top: 0px;
    }
    .titletotaraengage-div1{
        font-size: var(--totaraengage-txt-title-size-mw767);
    }
    #img-totaraengage-logo{
        width: 85%;        
        margin: 5% 0% 5% 0%;
    }
    #h3txt-totaraengage, .h3-totaraengage{
        font-size: var(--totaraengage-txt-subtitle-size-mw767);
    }  
    #ptxt-totaraengage, .ptxt-totaraengage-subtitle{
        font-size: var(--totaraengage-txt-gral-size-mw767);
    }
    #ptxt-totaraengage br{
        display: none;
    }
    #img-shared {     
        margin-right: 0px;        
    }
    .ptxt-txtnormal2 {                 
        margin-bottom: 8%;
    }
}