/* ===================*/
/* sidemenu ========= */
/* ===================*/
.side-menu { position: fixed; top: 0; left: 0; height: 100vh; visibility: hidden; opacity: 0; } 
.inner-side-menu { width : 0; overflow : auto; height : 100%; background-color: #131313; background : linear-gradient(0deg, #000 0%, var(--casi-negro) 100%)}

@media screen and (max-width:768px){
 .navbar-nav .open .dropdown-menu { background-color: rgba(0, 0, 0, 0.3); } 
 }


/* animando . . . . . . */
.side-menu { transition: visibility 0s, opacity 0.2s linear; } 
.side-menu.toggled { visibility: visible; opacity: 1; z-index: 9999; box-shadow: 9px 0 8px 0px rgba(0, 0, 0, 0.3); } 
.side-menu.toggled .inner-side-menu { width: 80vw; overflow: scroll; max-height: 100vh; display: flex; flex-direction: column; } 



/*zona interna del menu, encolumno nav y tools */

.side-menu--header {
    padding         : 15px;
    display         : flex;
    align-items     : center;
    background-color: var(--main-color);
    height          : 67px;
}

.main-header.fixed + .side-menu .side-menu--header {
    height: 45px;
}

.main-header.fixed + .side-menu .side-menu--main-logo { width: 140px; } 



.side-menu--main-logo { filter: invert(100) brightness(100); width: 160px;  } 

.side-menu--header .redes-sociales { margin-left: auto; } 


/* entorno del sidemenu ===== */

.nav .open>a, .nav .open>a:focus, .nav .open>a:hover { background-color: transparent; } 

.inner-side-menu .caret { color: var(--main-color-focus) } 
.inner-side-menu a { color: #fff } 

.side-menu--body .ul-main > li > a { border-bottom: solid 1px rgb(255 255 255 / 7%); font-size: 1.2em;} 
.side-menu--body .ul-main .subsec {position: relative;top: auto;font-size: .9em; background-color: transparent;} 
.side-menu--body .ul-main .subsec a {padding:.7em 2em ; opacity: .8; font-size: 1.12em;} 




.inner-side-menu .ul-main,
.inner-side-menu .nav { margin: 0 } 

.inner-side-menu > .ul-main > li { border-bottom: solid 1px rgba(0,0,0,0.2); } 
.inner-side-menu > .ul-main > li > a { font-size: 16px; font-weight: 100; display: flex; } 
.inner-side-menu > .ul-main > li > a > i { margin-left: auto; opacity: 0.5; } 
.inner-side-menu > .ul-main > li > a:hover { background-color: rgba(0,0,0,0.3) } 
.inner-side-menu > .ul-main > li > a:hover i { opacity: 1; } 
.inner-side-menu > .ul-main > li > a:focus { background-color: var(--main-color-focus); color: #fff } 

.inner-side-menu > .ul-main .ico-movil-drop { opacity: 1; color:var(--main-color-focus); background-color: rgba(0, 0, 0, 0.2) } 
.inner-side-menu > .ul-main > li.dropdown.open > a { background-color: rgba(0, 0, 0, 0.4); border-bottom: solid 1px rgba(255,255,255,0.1); } 


.inner-side-menu .dropdown-menu { background-color: rgba(0,0,0,1); width: 100%; margin-top: 0; padding-top: 0 } 
.inner-side-menu .dropdown-menu li { border-bottom: dotted 1px rgba(241, 241, 241, 0.2) } 
.inner-side-menu .dropdown-menu li:last-child { border-bottom: 0 } 
.inner-side-menu .dropdown-menu li > a { padding-top: 7px; padding-bottom: 7px } 

.inner-side-menu .dropdown-toggle.dropdow-link:focus i { color:#fff!important; } 


li.dropdown { position: relative } 
li.dropdown a.dropdow-link { background-color: rgba(0,0,0,0.15); z-index: 99; position: absolute; right: 0; top: 0; width: 50px; height: 100%; display: flex; justify-content: center; align-items: center } 






.side-menu--body .minilogos-links{flex-direction: column; align-items: flex-start;}
.side-menu--body .minilogos-links a{border-bottom: solid 1px rgb(255 255 255 / 10%); padding-left: 15px; width: 100%; display: flex; align-items: center; padding-top: 7px;}
.side-menu--body .minilogos-links a:last-child{border-bottom: none;}

.side-menu--body .minilogos-links svg {width: auto; height: 20px;}
.side-menu--body .minilogos-links svg > g:first-child path{fill: rgba(255, 255, 255, 0.8);}
.side-menu--body .minilogos-links svg > g:last-child path{fill: var(--main-color-focus);}




.flex-align { display: flex; flex-direction: row; flex-wrap: wrap } 




.side-menu--footer { padding:15px; padding-top: 0; margin-top: auto; } 
.side-menu--footer ul.redes-sociales { margin-bottom: 15px; align-items: center;   border-bottom: solid 1px rgba(255, 255, 255, 0.4); padding-top: 15px; padding-bottom: 15px; justify-content: center; } 
.side-menu--footer ul.redes-sociales a{background-color: #fff;}






/*btn ssucribete chido 
*/


.side-menu--body li.menu_item_sec-suscripcion {
    padding-left : 10px;
    padding-right: 10px;
    border-bottom: solid 1px rgb(255 255 255 / 7%);
    width        : 100%;
}


.side-menu--body .ul-main > li > a.btn-suscribete-chido  {
    background-color: #09c2fa;
    color           : #fff;
    border-radius   : 3px;
    padding         : 4px 8px;
    font-size       : .8em;
    line-height     : 1.4em;
    display         : flex;
    align-items     : center;
    justify-content : center;
    font-weight     : 600;
    margin-right     : auto;
    text-transform  : uppercase;
    margin-right    : 5px;
    padding-top     : 7px;
    width: max-content;
    font-size: .8em;
}

.side-menu--body .btn-suscribete-chido:hover {
    text-decoration : none;
    background-color: #34d0ff;
}

.side-menu--body .btn-suscribete-chido svg {
    fill        : #fff;
    width       : 15px;
    margin-right: 7px;
}






/* buscador */
.side-menu-buscador { display: flex; align-items: center; justify-content: center; width: 100%; } 
.side-menu-buscador > form { width: 100%; } 
.side-menu-buscador input, .side-menu-buscador .btn { border-radius: 0 } 
.side-menu-buscador input { border-top-left-radius: 3px; border-bottom-left-radius: 3px; background-color: transparent; } 
.side-menu-buscador input:focus { background-color: rgba(255, 255, 255, 0); } 
.side-menu-buscador button.btn { background-color: transparent; } 
.side-menu-buscador .form-control,
.side-menu-buscador .btn-default { border: none; border-radius: 0; border-bottom: solid 1px var(--main-color-focus); padding-left: 0; padding-right: 0; color: #fff; } 
.side-menu-buscador .ico-lupa { fill: var(--main-color-focus); width: 16px; } 

.side-menu-buscador .form-control:focus { box-shadow: none; border-bottom: solid 1px #fff; } 
.side-menu-buscador .form-control::placeholder {color: var(--main-color-focus);} 






/*! Animacion Toggle ===================================== */
/*!genericos */
.c-hamburger:focus { outline: 0 } 
.c-hamburger { background-color : transparent; display : block; position : relative; overflow : hidden; margin : 0; padding : 0; width : 30px; height : 30px; font-size : 0; text-indent : -9999px; -webkit-appearance: none; -moz-appearance : none; appearance : none; box-shadow : none; border-radius : none; border : none; cursor : pointer; -webkit-transition: background .3s; transition : background .3s } 
.c-hamburger span { display : block; position : absolute; top : 13px; left : 0; right : 0; height : 3px; width : 100%; border-radius: 0 } 
.c-hamburger span::after,
.c-hamburger span::before { position : absolute; display : block; left : 0; width : 100%; height : 3px; border-radius: 0; content : "" } 
.c-hamburger span::before { top: -10px } 
.c-hamburger span::after { bottom: -10px } 

/*! animacion y efectos */
.c-hamburger span { -webkit-transition: background 0; transition : background 0 } 
.c-hamburger span::after,
.c-hamburger span::before { -webkit-transition-duration: .3s, .3s; transition-duration : .3s, .3s; -webkit-transition-delay : .3s, 0; transition-delay : .3s, 0 } 
.c-hamburger span::before { -webkit-transition-property: top, -webkit-transform; transition-property : top, transform } 
.c-hamburger span::after { -webkit-transition-property: bottom, -webkit-transform; transition-property : bottom, transform } 
.c-hamburger.is-active span::before { top : 0; -webkit-transform: rotate(45deg); -ms-transform : rotate(45deg); transform : rotate(45deg) } 
.c-hamburger.is-active span::after { bottom : 0; -webkit-transform: rotate(-45deg); -ms-transform : rotate(-45deg); transform : rotate(-45deg) } 
.c-hamburger.is-active span::after,
.c-hamburger.is-active span::before { -webkit-transition-delay: 0s, .3s; transition-delay : 0s, .3s } 

.c-hamburger span,
.c-hamburger span::after,
.c-hamburger span::before { background-color: var(--main-color) } 
.c-hamburger.is-active span::after,
.c-hamburger.is-active span::before { background-color: var(--main-color-focus) } 
.c-hamburger.is-active span { background-color: transparent } 
#button-toggle { position: relative; z-index: 9999999999; } 
.c-hamburger { transform: scale(.8) translateY(1px) translateX(-10px); } 
.fixed .c-hamburger { transform: scale(.6); } 
.fixed .c-hamburger span, 
.fixed .c-hamburger span::after,
.fixed .c-hamburger span::before { background-color: #fff; } 
.fixed .c-hamburger.is-active span { background-color: transparent; } 
.fixed .c-hamburger.is-active span::after,
.fixed .c-hamburger.is-active span::before { background-color: var(--main-color-focus); }