/*! ===================== */
/*! SLIDING MENU VERTICAL */
/*! ===================== */
.sliding-menu {
    height    : 100vh !important;
    position  : fixed;
    top       : 0;
    left      : 0;
    opacity   : 0;
    transform : translateX(-100%);
    transition: all .4s ease-out;
    z-index   : 999;
    background: var(--azul-oscuro);    
}


.sliding-menu.muestra-menu {
    opacity           : 1;
    transform         : translateX(0);
    box-shadow        : -2px 0 12px 0 rgb(0 0 0 / 50%);
    -webkit-box-shadow: -2px 0 12px 0 rgb(0 0 0 / 50%);
    -moz-box-shadow   : -2px 0 12px 0 rgb(0 0 0 / 50%)
}.sliding-menu--header { padding: 20px } 
.sliding-menu a { color: #fff } 
.sliding-menu--header { display : flex; justify-content : space-between; align-items : center; background-color: rgba(0, 0, 0, 0.3); margin-bottom : -1px; z-index : 1; position : relative; height : 85px; border-bottom: solid 1px var(--blanco-transparente); } 
.main-logo--sliding { width: 150px; } 
.sliding-menu .close-menu { display: none; } 

@media screen and (min-width: 768px){
    .sliding-menu {max-width: 290px;}
}
@media screen and (max-width:1810px){
    .sliding-menu { width:100vw  } 
 .sliding-menu .close-menu { display : flex; align-items : center; justify-content: center; width : 20px; height : 20px; cursor : pointer; line-height : 1em; border-radius : 50%; cursor : pointer; color : #fff; font-size : 28px; } 
 .sliding-menu .close-menu svg { fill: #fff; } 
 .sliding-menu--header { height : 60px; } 
 }



.bg-sliding-menu { transition: opacity 1s cubic-bezier(.075, .82, .165, 1); opacity : 0 } 
.sliding-menu.muestra-menu+.bg-sliding-menu { content : ""; width : 100%; max-width : 100vw; height : 100vh; position : fixed; left : 0; top : 0; background-color: rgba(0, 0, 0, .7); z-index : 90; opacity : 1 } 




/*! ================================ */
.sliding-menu { font-size : 16px; max-height : 100vh; overflow-y : auto; display : flex; flex-direction: column; } 
.sliding-menu--body { margin-bottom: auto; } 
.sliding-menu--body ul { padding : 0; margin : 0; font-size : 1em; display : flex; flex-direction: column; list-style : none; width: 100%; } 
.sliding-menu--body ul.nav-subsec { font-size: .8em; } 
.sliding-menu--body .navbar-nav>li { border-bottom: solid 1px var(--blanco-transparente); width: 100%; position: relative; border-bottom: solid 1px rgba(255, 255, 255, 0.35); } 
.sliding-menu--body ul.nav-subsec > li { border-top: solid 1px rgba(255, 255, 255, 0.1); } 
.sliding-menu--body .nav-ico-submenu { position: absolute; top: 15px; right: 10px; width: 12px; opacity: .5; } 
.sliding-menu--body .navbar-nav a { display: block; width: 100%; } 
.sliding-menu--body .navbar-nav > li > a { padding: .7em 1em; } 
.sliding-menu--body .nav-subsec > li > a { padding: .7em 1.6em; color: #9bb2d9; transition: color .2s ease-in-out; } 
.sliding-menu--body .nav-subsec > li > a:hover { color: #fff; } 


.sliding-menu--body .navbar-nav>li>a:hover { background-color: rgba(0, 0, 0, 0.116); } 
.sliding-menu--body>ul>li { width: 100%; } 
.sliding-menu--body a:hover { text-decoration: none; } 

.sliding-menu--body img.logo-lsr{width: 140px;}
.sliding-menu--body img.logo-sumedico{width: 133px;}


.side-menu--logos .logo-yosoytu{width: 70px;}
.side-menu--logos a img{opacity: .8;}
.side-menu--logos a:hover img{opacity: 1; filter: brightness(1.1);} 




.sliding-menu--footer { background-color: rgb(0 0 0 / 20%); display : flex; flex-direction : column; align-items : center; justify-content : center; color : #fff; text-align : center; padding : 20px; } 
.sliding-menu--footer .redes { flex-wrap : wrap; justify-content: center; } 
.sliding-menu--footer .redes a { margin : 0; padding: 10px; } 
.sliding-menu--footer small { font-size : .6em; margin-top: 2rem; opacity : .7; } 


/*! COLOR SCOLLBAR */

html { --scrollbarBG: #000; --thumbBG : #153063; } 
.sliding-menu::-webkit-scrollbar { width: 11px; } 
.sliding-menu { scrollbar-width: thin; scrollbar-color: var(--thumbBG) var(--scrollbarBG); } 
.sliding-menu::-webkit-scrollbar-track { background: var(--scrollbarBG); } 
.sliding-menu::-webkit-scrollbar-thumb { background-color: var(--thumbBG); border-radius : 6px; border : 3px solid var(--scrollbarBG); }