* { 	padding:0; 	margin:0; 	-webkit-box-sizing:border-box; 	-moz-box-sizing:border-box; 	box-sizing:border-box; }
section { 	padding:20px; }
.menu_bar { 	display:none; }
header { 	width: 100%; }
header nav { 	background:#023859; 	z-index:1000; 	max-width: 1200px; 	width: 100%; 	margin:1em auto; }
header nav ul { 	list-style:none; }
header nav ul li { 	display:inline-block; margin:0;
	/*La razon por la que no usamos floar en vez de inline-block es porque no vamos a poder usar overflows en el header nav ul*/
	position: relative; }
header nav ul li:hover .children { 	display: block; }
/*Submenu*/
header nav ul li .children { 	background:#011826; 	position: absolute; 	display: none; 	width: 250%; 	z-index: 1000; }
header nav ul li .children li { 	display: block; 	overflow: hidden;	border-bottom: 1px solid rgba(255,255,255,.5);
	/*Usamos overflow hidden porque aqui si vamos a necesitar usar float*/ }
header nav ul li .children li a { 	display: block; }
header nav ul .children li a span { 	float: right; 	position: relative; 	top:3px; 	margin:0; }
header nav ul li a { 	color:#fff; 	text-decoration: none; 	display: inline-block; 	padding-top:1em; padding-bottom:1em; padding-left:0.5em; }
header nav ul li:hover { 	background:#E6344A; }
header nav ul li span { 	margin-right:0; }
header nav ul li .caret { 	position: relative; 	top: 3px; 	margin: 0; }
@media screen and (max-width:800px) { 	body { 		padding-top:80px; 	}
	.menu_bar { 		width: 100%; 		background:#E6344A; 		display: block; 		position: fixed; 		top:0; 	}
	.menu_bar .bt-menu { 		display: block; 		padding: 20px; 		color:#fff; 		overflow: hidden; 		font-size:25px; 		font-weight:bold; 		text-decoration: none; 	}
	.menu_bar span { 		float: right; 		font-size: 40px; 	}
	header nav { 		width: 80%; 		height: calc(100% - 80px); 		right:100%; 
		/*Con esto ocultamos el menu hacia la derecha, lo agregamos hasta el final*/
		margin: 0; 		position:fixed; 		overflow:scroll; 	}
	header nav ul li { 		display: block; 		border-bottom:1px solid rgba(255,255,255,.5); 	}
	header nav ul li a { 		display: block; 	}
	header nav ul li:hover .children{ 		display: none; 	}
	header nav ul li .children { 		width: 100%; 		position: relative; 		/*display: block;*/ 	}
	header nav ul li .children li a{ 		margin-left:20px; 	}
	header nav ul li .caret { 		float: right; 	}
}