@charset "utf-8";
#menu-bar {
	display:none;
}

#menu-bar:checked ~ .menu {
	transform: translateX(0%);
}


#drop-1{
	display:none;
	float:left;
}

#drop-1:checked ~ .menuSS{
	display:block;
	position:relative;

}

header label {
	float:right;
	font-size:40px;
	cursor:pointer;
	padding-top:10px;	
}


.icono{
	padding:10px 25px 10px 10px;
	font-size:40px;

}
.menu {
	position:absolute;
	top:70px;
	left:0;
	width:100%;
	height:100vh;
	background:#262F6D;
	transition:all 0.8s;
	transform: translateX(-100%);
}

/* Resets */
.menu a { 
	vertical-align:middle;
    text-decoration: none;
    font-size: 17px;
    color: #FFFFFF;
    display: block; }
.menu a:hover { 
	background:#B3CCD8;
	color:#000000;
	text-decoration:underline;	
	}
.menu ul { 
    list-style: none;
    margin-top: 20px;
    padding: 0; 
    }
.menu ul li a{ padding-top: 25px;}

/* Top-level menu */
.menu > ul > li { 
    position: relative; }
.menu > ul > li > a { 
    padding: 25px 20px;
    display: block;}
.menu > ul > li:first-child { margin: 0; }
.menu > ul > li:first-child a { border: 0; }
.menu > ul > li:first-child a { 
	margin-top:-20px;
}


/* Dropdown Menu */
.menu  ul li ul { 
    position: absolute;
    background: #259DD5;
    width: 100%; 
    margin: 0;
    padding: 0;
    display: none; }
.menu ul li ul li { 
    text-align: center;
    width: 100%; }
.menu ul li ul a { padding: 10px 0; }
.menu ul li:hover ul { display: none; }


	

@media(min-width:1024px){
	.menu {
		position:static;
		width:auto;
		height:auto;
		transform: translateX(0%);			
		float:right;
		display:flex;
	}
	.menu > ul > li { 
	    float: left;
	    position: relative;
	     }

	header label {
		display:none;
	}
	
	.menu a {
		border:none;
	}
	/* Dropdown Menu */
	.menu  ul li ul { 
	    position: absolute;
	    background: #259DD5;
	    width: 100%; 
	    margin: 0;
	    padding: 0;
	    display: none; }
	.menu ul li ul li { 
	    text-align: center;
	    width: 100%; }
	.menu ul li ul a { padding: 10px 0; }
	.menu ul li:hover ul { display: block; }

	.menu > ul > li > a { 
    padding: 25px 20px;
    height: 70px;
    margin-top:-20px;
    border-left: 1px solid #FFF;
    display: block;}


}