/*CDN de font-awesomew, pe7Stoke y ElegantIcons para páginas que lo necesiten*/
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css');
@import url('https://cdn.jsdelivr.net/npm/pixeden-stroke-7-icon@1.2.3/pe-icon-7-stroke/dist/pe-icon-7-stroke.min.css');
@import url('https://cdn.jsdelivr.net/npm/eleganticons@0.0.1/css/style.min.css');

.logo{width:76px !important}

@media (max-width: 992px){ 
.ejta-menu-lateral-generico ul li {

    margin: 0px 0px 0px 10px !important;
  
	}
	.logo{max-width:76px !important}

}



body {
    position: relative;
    transition: left 0.4s ease;
    left: 0;
}
 
.ejta-contenedor {
    z-index: 2;
    position: fixed; 
    top: 0;
    left: 0;
    /* Cambiado a absolute */
    display: flex;
    width: 100%;

}

.ejta-columna-izquierda {
    width: 400px;
    padding: 0;
    margin: 0;
    position: relative;
    left: -400px;
    /* Desplazamiento fuera de la pantalla */
    height: 100%;
    background-color: red;
    z-index: 99;
    transition: left 0.1s ease;
}

.ejta-columna-derecha {
    position: absolute;
    left: 400px;
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 0);
    opacity: 0;
    display: none;
    z-index: 100;
    cursor: pointer;
    transition: opacity 0.5s ease;

}

#ejta-toggleButton {
    position: relative;
    margin-left: 10px;
    margin-right: auto;
    cursor: pointer;
    z-index: 0;
}

/* Menú lateral */
.ejta-menu-lateral-generico {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    font-size: 0.875em;
    line-height: 25px;
    font-family: "Poppins", Helvetica, sans-serif;
    font-weight: 300;
    color: #555;
    background-color: #f0f0f0;
    overflow: hidden;
}

.ejta-menu-lateral-generico ul {
    list-style: none;
}

.ejta-menu-lateral-generico ul li {
    opacity: 1;
    cursor: pointer;
    position: relative;
    margin: 0px 0px 0px -20px;
    padding: 0px 0px 0px 0px;
}

.ejta-menu-lateral-generico ul li a {
    text-decoration: none;
    color: #555;
}

.ejta-menu-lateral-generico hr {
    opacity: 0.2;
    border-top: 0.1px solid #333;
    border-left: none;
    border-right: none;
    border-bottom: none;
    /*width: 440px;*/
    margin-left: -20px;
    display: flex;
    flex-wrap: nowrap;
    /* Evita que los elementos se envuelvan */
    margin-bottom: 0px;
}

.ejta-menu-titulo {
    text-align: center;
    color: rgba(0, 0, 0, .3);
    padding: 0px;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    margin: 0 -20px 0 -20px;
    /* Elimina el margen y el padding */
    padding: 10px 0px 5px 0px;
    font-size: 0.92rem;
    font-family: "Poppins", Helvetica, sans-serif;
    color: rgb(189 189 189);
}

.ejta-menu-titulo:hover {
    color: #3f9fff;
}

.ejta-contenedor:not(.height-100Per) .ejta-menuContainer{
    display: none!important;
}


.ejta-menuContainer {
    position: fixed;
    overflow: hidden;
    /*width: 400px;*/
    width: 75%;
    min-width: 120px;
    max-width: 420px;
}

@media (max-width: 450px) and (min-width: 360px) {
    .ejta-menuContainer {
        max-width: 290px;
    }
}
@media (max-width: 360px) and (min-width: 0px) {
    .ejta-menuContainer {
        max-width: 250px;
    }
}

#ejta-espaciador {
    /*Barra espaciadora para que no se oculten partes con el menu administrador en sistemas como WP activo*/
    height: 0;
}

/** Clases que añaden la flecha al item que tiene enlace a menú */
.ejta-menu-lateral-generico ul li {
    position: relative;
    /* Permite posicionar el icono */
    padding: 8px 0;
}

.ejta-menu-lateral-generico ul li.li-with-arrow {
    display: flex;
    /*justify-content: space-between;*/
    align-items: center;
}
.li-with-arrow .fas {
    left: 100%;
    position: sticky;
}
.ejta-menu-lateral-generico ul li.li-with-arrow a{
    width: 100%;
    margin: -8px 0 -8px 0;
    padding: 8px 0 8px 0;
}

.li-with-arrow {
    font-weight: 400;
    font-size: 14px;
}


/*Iconos del menú lateral*/
.ejta-iconos-menu {
    cursor: pointer;
    font-size: 1em;
    opacity: 0.4;
    padding-right: 10px;
}

/* Menú hamburguesa 
.ejta-menu-button {
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    width: 30px;
    height: 30px;
    transition: all 1s;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    position: relative;
}

.ejta-menu-button span {
    width: 30px;
    height: 4px;
    background: #fff;
    margin-top: 5px;
}
*/

.ejta-barra-nav-izq {
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: left 0.4s ease, padding 0.4s ease-in-out;
    left: 0;
    height: 53px;
    width: -webkit-fill-available;
    border: 1px;
    background-color: transparent;
    position: fixed;
    top: 0;
    font-size: 1em;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    letter-spacing: 2px;
    z-index: 1000;
    height: 73px;
    width: 100%;
}

.ejta-barra-nav-izq{ 
    /* background: #480048; */
    transition: left 0.4s ease, padding 0.4s ease-in-out;
    background: -webkit-linear-gradient(left, #480048, #C04848);
    background: linear-gradient(to right, #000000ee, #f06400);
    padding: 7px 0px 13px 10px;
}

/*.ejta-logotipo {
    height: 45px;
}*/


.ejta-left {
    margin-right: auto;
}

.ejta-center {
    flex: 2;
    text-align: center;
}

.ejta-right {
    flex: 2;
    text-align: right;
}

/*Animaciones*/
/* Animación para mostrar el menú */

@keyframes desaparecer-der {
    0% {
        left: 0;
        opacity: 1;
    }

    100% {
        left: 400px;
        opacity: 0;
    }
}

@keyframes desaparecer-izq {
    0% {
        left: 0;
        opacity: 1;
    }

    100% {
        left: -400px;
        opacity: 0;
    }
}

@keyframes aparecer-der {
    0% {
        left: 400px;
        opacity: 0;
    }

    100% {
        left: 0;
        opacity: 1;
    }
}

@keyframes aparecer-izq {
    0% {
        left: -400px;
        opacity: 0;
    }

    100% {
        left: 0;
        opacity: 1;
    }
}

.desaparecer-derecha {
    /*position: absolute;*/
    animation: desaparecer-der 0.2s linear;
}

.desaparecer-izquierda {
    position: absolute;
    animation: desaparecer-izq 0.3s linear;
}

.aparecer-derecha {
    /*position: absolute;*/
    animation: aparecer-der 0.3s linear;
}

.aparecer-izquierda {
    /*position: absolute;*/
    animation: aparecer-izq 0.3s linear;
}

/** Menú hamburguer **/





/** Menú Desktop **/
.ejta-nav-item {
    padding: 0px 3px;
    margin-top: 4px;
}
.logo{
    max-width: none;
}

.ejta-login-header {
    display: flex;
    align-items: end;
    margin-left: auto;
    margin-top: 0px;
    text-align: center;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 2px;
    line-height: 1;
    padding-right: 10px;
    font-size: 1em;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    margin-left: -140px;
}

.ejta-login-header a {
    text-decoration: none;
}

.ejta-login-candado::before {
    font-family: 'ElegantIcons';
    content: "\7e";
    text-decoration: none;
    font-size: 1.5em;
    font-weight: 100;
    color: #fff;
    font-size: 28px;
    margin-bottom: 5px;
}

.icono-menu{
    position: relative;
    padding-top: 15px;
}
.icono-menu-movil{
    margin-right: 5px; 
    font-size: 1.5em;
}

.icono-menu-principal{
    font-weight: 400;
    float: left !important;
    padding-top: 2px;
    font-size: 1.5em;
}



.ejta-login-candado {
    display: block;
    color: #fff!important;
    font-weight: 600;
    font-size: 0.725em;
    text-transform: uppercase;
    text-decoration: none;
    margin-top: 5px;
    font-family: "Poppins";
    font-size:13px;
}

.ejta-login-candado div{
    padding-top: 5px;
}

.ejta-login-candado:hover,     .ejta-login-candado:hover::before {
    text-decoration: none;
    color: #688bb8!important;
    transition: all .2s linear; 
}

.ejta-lista-horizontal {
    list-style-type: none;
    /*padding: 0;*/
    margin-top: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-transform: uppercase;
}

.ejta-lista-horizontal>ul {
    margin-top: 20px;
    padding: 0;
}

.ejta-lista-horizontal>li {
    user-select: none;
    display: block;
    align-items: end;
    padding: 0 8px 15px 8px;
    cursor: pointer;
    /*margin-right: 30px;*/
    margin-right: 0px;
    transition: color 0.2s ease;
    font-weight: 600;
    letter-spacing: 2px;
    font-family: "Poppins";
}

.ejta-lista-horizontal>li:hover {
    color: #3f9fff;
}

.ejta-boton-login {
	background-image:none !important;
    background-color: #FFC107 !important;
    color: #333;
    padding: 13px 30px !important;
    border-radius: 25px;
    font-size: 13px;
    font-weight: 700;
    border: none;
    text-transform: uppercase;
    cursor: pointer;
    letter-spacing: 2px;
	line-height: 1em;
}

/** Menú central */
.ejta-menu-central {
    width: 100%;
    text-align: end;
    display: none;
    margin-top: 7px;
    /** Fuente */
    color: #ffffff;
    font-size: 0.825em;
    font-weight: 400;
    margin-right: 140px;

}

.ejta-menu-central-complementario {
    display: block;
    width: 100%;
    text-align: end;
}



/** WordPress **/
.ejta-has-admin-bar {
    /*Si la barra de menú administración de WordPress está activa*/
    padding-top: 40px;
}

@media (min-width: 992px) {

    #ejta-toggleButton {
        display: none;
    }

    .ejta-menu-central {
        display: block;
    }

    .ejta-menu-central-complementario {
        display: none;
    }

    /** Sub menús */
    ul.ejta-sub-menu {
        position: absolute;
        visibility: hidden;

        top: 100%;
        margin: 0;
        margin-top: 20px;
        padding: 0;
        min-width: 210px;
        background: #fff;
        color: #333;
        text-align: left;
        text-transform: none;
        -webkit-box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.175);
        -moz-box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.175);
        box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.175);

        transform: translateY(-5px);
        -webkit-transform: translateY(-5px);
        -moz-transform: translateY(-5px);
        -ms-transform: translateY(-5px);
        -o-transform: translateY(-2px);

        -webkit-transition: all 0.2s ease;
        -ms-transition: all 0.2s ease;
        transition: all 0.2s ease;

        list-style: none;
        cursor: pointer;
        z-index: -1;

        transition: all 0.1s ease-in-out;
    }

    ul.ejta-lista-horizontal li:hover ul.ejta-sub-menu {
        display: block;
    }

    ul.ejta-sub-menu::before {
        /* Estilo para crear el triángulo en la parte superior */
        content: '';
        position: absolute;
        top: 0;
        margin-top: -14px;
        left: 15%;
        border-width: 7px;
        border-style: solid;
        border-color: transparent transparent #fff transparent;
        /* Cambia al color de fondo deseado */
    }

    ul.ejta-sub-menu li {
        display: block;
        font-size: 13px;
        font-size: 1.1em;
        font-weight: 400;
        letter-spacing: 0;
        color: #555;
        border-bottom: 1px solid #ededed;
        display: block;
        padding: 0;
        margin: 0;
        line-height: 1;
        transition: padding 0.4s ease;

        font-family: 'Poppins';
        font-size: 13px;
    }

    ul.ejta-sub-menu li:hover {
        cursor: pointer;
        background: #f4f0f0;
        padding-left: 10px;
    }


    ul.ejta-sub-menu a {
        display: block;
        width: 100%;
        height: 100%;
        text-decoration: none;
        padding: 15px 10px;
        color: #555;
        transition: all 0.0s linear;
    }

    ul.ejta-sub-menu a:hover {
        width: 100%;
        color: #3f9fff;
    }


    .ejta-lista-horizontal>li:hover ul.ejta-sub-menu {
        visibility: visible;
        margin-top: 0px;
        z-index: 100;
    }

}
.enlacemenuprincipal{
    color:white;
}

@media (max-width: 590px) and (min-width: 0px) {
    .ejta-boton-login {
        padding: 9px !important;
    }
}
/**Menú hamburguesa**/
@media (max-width: 991px) {

    /* Estilos para el botón de hamburguesa */
    #ejta-toggleButton {
        height: 20px;
        display: block;
        cursor: pointer;
        transform: rotate(0deg);
        /* Agrega esta línea */
    }

    .inactive#ejta-toggleButton:hover div {

        transition: background-color 0.3s ease;
        background-color: #B2B2B2
    }

    div.ejta-bar {
        width: 30px;
        height: 4px;
        margin: 5px 0;
        background-color: #fff;
        /* Color de las barras */
        transition: transform 0.3s ease-in-out;
        /* Transición para animación */

    }
    
    .position-fixed{
        position: fixed;
    }

    /* Estilos para las barras cuando el botón está activado */
    .active .ejta-bar.top-bar {
        animation: ejta-bar-top .4s forwards;
    }

    .active .ejta-bar.middle-bar {
        animation: ejta-bar-center .4s forwards;
    }
    .ejta-bar.middle-bar {
        margin-right: 10px;
    }

    .active .ejta-bar.bottom-bar {
        animation: ejta-bar-bottom .4s forwards;
    }

    /** Animación */
    @keyframes ejta-bar-top {
        0% {
            transform: translateY(0) rotate(0deg);
        }

        30% {
            transform: translateY(9px) rotate(0deg);
        }

        100% {
            transform: translateY(9px) rotate(225deg);
        }
    }

    @keyframes ejta-bar-center {
        0% {
            transform: translateY(0) rotate(0deg);

        }

        30% {
            transform: translateY(0) rotate(0deg);
            opacity: 0;
        }

        100% {
            transform: translateY(0) rotate(0deg);
            opacity: 0;
        }
    }

    @keyframes ejta-bar-bottom {
        0% {
            transform: translateY(0) rotate(0deg);
        }

        30% {
            transform: translateY(-9px) rotate(0deg);
        }

        100% {
            transform: translateY(-9px) rotate(315deg);
        }
    }

    /* Estilos para las barras cuando el botón está desactivado */
    .inactive .ejta-bar.top-bar {
        animation: reverse-bar-top .4s forwards;
    }

    .inactive .ejta-bar.middle-bar {
        animation: reverse-bar-center .4s forwards;
    }

    .inactive .ejta-bar.bottom-bar {
        animation: reverse-bar-bottom .4s forwards;
    }

    /** Animación inversa */
    @keyframes reverse-bar-top {
        0% {
            transform: translateY(9px) rotate(225deg);
        }

        30% {
            transform: translateY(9px) rotate(0deg);
        }

        100% {
            transform: translateY(0) rotate(0deg);
        }
    }

    @keyframes reverse-bar-center {
        0% {
            transform: translateY(0) rotate(0deg);
            opacity: 0;
        }

        30% {
            transform: translateY(0) rotate(0deg);
            opacity: 0;
        }

        100% {
            transform: translateY(0) rotate(0deg);
        }
    }

    @keyframes reverse-bar-bottom {
        0% {
            transform: translateY(-9px) rotate(315deg);
        }

        30% {
            transform: translateY(-9px) rotate(0deg);
        }

        100% {
            transform: translateY(0) rotate(0deg);
        }
    }
}
/*Capa oscuara al abrir menu*/
/*.position-fixed .hfeed, .position-fixed .ejta-columna-derecha{
    opacity: .3;
    transition: background 1s;
    background: #000;
   
}*/
/*.height-100Per .mm-slideout {*/
.position-fixed .mm-slideout {
    opacity: .3;
    transition: background 1s;
    background: #000;
    display: none;
    width: 100%;
    height: 100%;
    
    position: fixed;
    top: 0;
    z-index: 0;
    display: block;
    margin-left: -13px;
    cursor: pointer;

}
.ejta-logo-header{
    position: absolute;
}
@media (max-width: 992px) {
    .ejta-logo-header{
        margin-left:60px;
    }
}

.aparecer-derecha .ejta-iconos-menu{
    margin-left: 45px;
    margin-top: 8px;
    float:left;
}
.fa-chevron-left:before{
    color:#555;
}

#page {
    top: 63px;
}