body{
	font-family:Arial;
	}
	
/*Estilos Generales*/
header{
	width:100%;
	background:#136dc0;
}
	
#btn-menu{
	display:none;
}
header label{

display:none;	
width:35px;
height:35px;
padding:10px;
border-rigth:1px solid #fff;
	}
	
header label:hover{
cursor:pointer;
background:rgba(0,0,0,0.3);	
	}






nav ul{
	list-style:none;
	padding:0;
	}
nav li{
	line-height:3rem;
	position:relative;
	width:180px;
	}
nav li ul{
	position:absolute;
	}
nav a{
	color:#ddd;
	display:block;
	padding:0 0.5em;
	text-decoration:none;
	transition:.4s;
	}
nav a:hover{
	background:rgba(0,0,0,.5);
	}

/*primer nivel*/
nav>ul{
	background:#136dc0;
	display:flex;
	width:100%;
	}
nav>ul>li{
	float:left;
	}
nav li:hover>ul{
	display:block;}
	
/*segundo nivel*/
nav li li{
	background:#0659a5;
	max-height:0;
	overflow:hidden;
	transition:all .4s;
	width:180px;
	}
nav li:hover>ul> li{
	max-height:500px;;
	overflow:visible;
	
	}
nav>ul>li>ul{
	top:100%;

	}
/* tercer nivel*/

nav ul ul ul {
	left:100%;
	top:0;
	}
	
@media(max-width:768px){
	header label{
		display:block;
		}
	.menu{
	position:absolute;
	background:#136dc0;
	width:auto;
	height:10%;	
	margin-left:-70%;
	transition:all 1s;
	padding:-20px;
		}
	.menu ul{
		flex-direction:column;
		}
		
	.menu li{
	border-top: 1px solid #fff;
	padding:0px;
		
		}

#btn-menu:checked ~ .menu {
margin-left:0;	
	}
	.menu>ul>li>ul{
	left:100%;
	top:-0.9px;
	padding:0;
	text-align:center;
		}
		.menu>ul>li{
	left:0%;
	text-align:center;
		}
		nav a:hover{
	background:rgba(0,0,0,.5);
	}
	nav li{
	line-height:3rem;
	position:relative;
	width:120px;
	}
	
	}