/* CSS Document */



.btn_menu {
  width: 100%;
  padding: 10px;
  display: inline-block;
  border-bottom: 1px solid #565656; color:black; cursor:pointer;
}

.btn_menu:hover{ background-color:#2d2d2d; color:#fff; text-decoration:none }


.btn_salir {
  position: absolute;
  bottom: 0px;
  width: 100%;
  padding: 10px;
  display: inline-block;
  border-top: 1px solid #dc3545;
  color: #fff;
  cursor: pointer;
  left: 0px;
  text-align: center;
  background-color: #dc3545;
}
.btn_salir:hover{ background-color:#ff4c5d; color:#fff; text-decoration:none }


.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 100;
  padding: 48px 0 0;
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}

.caja_logo {
  text-align: center;
  font-size: 1rem;
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
}


/*Menu*/

.menu-togg {
  cursor: pointer;
  position: relative;
  transition: 1.1s;
  width: 100px;
  top: 0px;    z-index:99;
}
.menu-togg .txt {
  position: relative;
  top: 15px;
}

.menu-togg .txt.active{
display: none;   
}

.abrir,
.cerrar{
position: absolute;
top: 15px;
right: 65px;
transition: 0.5s;
}

.cerrar{
display: none;
}

.cerrar.active{
display: block;
}

.menu-togg.active .abrir{
display: none; 
}
.menu-togg.active{
 height: 40px;width: 100px;
}
.linea{
content: '';
position: absolute;
width: 28px;
height: 3.3px;
left: 0;
background: #000;
top: 14px;
}

.linea.active{
display: none;
}


.menu-togg:before,
.menu-togg:after
{
content: '';
position: absolute;
width: 37px;
height: 3.3px;
left: 0px;
background:#000;
}

.menu-togg:before
{
top: 32px;
transition: .5s;
}

.menu-togg:after
{
top: 23px;
transition: .5s;
}

.menu-togg.active:before
{
top: 23px;
transform: rotate(45deg);
background: #000;    
transition: .5s;
}

.menu-togg.active:after
{
top: 23px;
transform: rotate(-45deg);
background: #000;  
transition: .5s;
}

.noscro{	
  overflow: hidden;
  
}

.caja_s_btn {
  position: absolute;
  bottom: 50px;
  right: 140px;
}
.menu{
height: 100vh;
background: #000;
opacity: 0.9;
display: none;
z-index:9999;
position: fixed;
width: 100%;top: 0px;
}


.menu.active{
display: block;
transition-duration: 0.5s;  

}


.menu ul{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: left;
z-index: 14;
}

.menu ul li{
list-style: none;
}

.menu ul li a{
display: block;
font-size: 50px;
margin: 10px 0;
color: black;
font-family: 'next2', sans-serif;
text-decoration: none;
line-height: 70px;
}


.conte_cate_pop_left{ position:fixed; top:0px; left:-100%; height:100%; width:270px; background-color:#E2C9B5; z-index:9999;-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;	}
.conte_cate_pop_right{ position:fixed; top:0px; right:-100%; height:100%; width:100%; background-color:#00000052;z-index:999; padding:20px 50px 50px 50px;-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;	}

.conte_cate_pop_left.active{ left:0px; -webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;	}

.conte_cate_pop_right.active{right:0px;
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;	 }





/*fin Contador*/

@media screen and (max-width: 1200px) {}
@media screen and (max-width: 1064px) {}
@media screen and (max-width: 1024px) {}
@media screen and (max-width: 992px) {}
@media screen and (max-width: 768px) {}
@media screen and (max-width: 680px) {}
@media screen and (max-width: 480px) {}
@media screen and (max-width: 360px) {}