*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}


header{
	position: fixed;
	width: 100%;
	height: 55px;
	top: 0;
	left: 0;
	z-index: 999;
	padding: 20px;
	background: #ffff;
}

header #button-menu{
	font-size: 30px;
	color: #fff;
	cursor: pointer;
	vertical-align: middle;
}

.navegacion{
	position: absolute;
	top: 90%;
	/*left: -20px;*/
	width: 0%;
	height: 100vh;
	background: rgba(0,0,0,.0);
	z-index: 9999;

}

.navegacion ul{
	width: 320px;
	height: 100%;
	background: #fff;
	list-style: none;

	position: absolute;
	top: 0;
	left: -340px;

	transition: left .3s;
	padding-left: 0px;
}

.navegacion .menu li.title-menu{
	padding: 0px;
	background: #333;
	color: #fff;
	text-align: center;
	font-size: 22px;
}

.navegacion .menu a{
	display: block;
	padding: 10px;
	border-bottom: 1px solid #cccc;

	font-size: 14px;
	font-weight: 200;
	text-decoration: none;
	color: #333;
}

.navegacion .menu a:hover{
	background: #1a1a1a;
	color: #fff;
}

.navegacion .menu li span.icon-menu{
	margin-right: 12px;
}

.navegacion .menu .item-submenu > a::after{
	font: normal normal normal 14px/1 FontAwesome;
  	font-size: inherit;
  	text-rendering: auto;
  	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
	content: '\f105';

	float: right;
	color: #C5C5C5;
}
.navegacion .menu .item-submenu2 > a::after{
	font: normal normal normal 14px/1 FontAwesome;
  	font-size: inherit;
  	text-rendering: auto;
  	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
	content: '\f105';

	float: right;
	color: #C5C5C5;
}

/* Submenu ============*/

.navegacion .submenu li.title-menu{
	background: #fff;
	color: #1a1a1a;
}

.navegacion .submenu li.go-back{
	padding: 10px 20px;
	background: #333;
	color: #fff;
	font-size: 18px;
	cursor: pointer;
}

.navegacion .submenu li.go-back::before{
	font: normal normal normal 14px/1 FontAwesome;
  	font-size: inherit;
  	text-rendering: auto;
  	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
	content: '\f0d9';
	margin-right: 10px;
}

/*Submenu*/
.navegacion .submenu2 li.title-menu{
	background: #fff;
	color: #1a1a1a;
}

.navegacion .submenu2 li.go-back{
	padding: 10px 20px;
	background: #333;
	color: #fff;
	font-size: 18px;
	cursor: pointer;
}

.navegacion .submenu2 li.go-back::before{
	font: normal normal normal 14px/1 FontAwesome;
  	font-size: inherit;
  	text-rendering: auto;
  	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
	content: '\f0d9';
	margin-right: 10px;
}
@media screen and (max-width: 991px){
header{height: 70px;}
header #button-menu{vertical-align: bottom;}
.navegacion{top: 70px; left: 0px;}/*Poner en 70 cuando no haya topbar y 100 cuando si existe*/
}
@media screen and (max-width: 768px){
	header{height: 70px;} /*Poner en 70 cuando no haya topbar y 100 cuando si existe*/
	.navegacion{top: 70px; left: 0px;}/*Poner en 70 cuando no haya topbar y 100 cuando si existe*/
	header #button-menu{vertical-align: bottom;}
}
@media screen and (max-width:560px){
header #button-menu{vertical-align: middle;}
}
@media screen and (max-width: 415px){
	header{height: 50px;}/*Poner en 50 cuando no haya topbar y 80 cuando si existe*/
	.navegacion{top: 50px; left: 0px;}/*Poner en 95 cuando no haya topbar y 125 cuando si existe, cuando no exista buscador 75*/
}
@media screen and (max-width: 375px){
.navegacion{top: 50px;}
}
@media screen and (max-width: 320px){
	.navegacion ul{
		width: 100%;
	}
	.navegacion{top:50px;}
}