nav{
	position: relative;
	text-align:center;
	display:block;
	z-index:9999;
	background-color:#a2fceb;


}

/* Main Menu */
.mainmenu{
	display: inline-block;	
	cursor:pointer;
	outline:none;
	
}
.mainmenu > a{
	color: #333;	
	text-decoration: none;
	text-transform: uppercase;
	display:block;
	padding:10px;
	font-weight:bold;

}
.mainmenu >  a:hover{
	color:#f54a7e;
	opacity:1;
}




/* Sub Menu */
.submenu{
	opacity:0;
	position: absolute;
	background-color:rgba(255, 255, 255, 0.8);
	visibility:hidden;
	box-shadow: 0px 0px 3px #333;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;
	z-index: 999;
	text-align:left;	
	overflow:auto;
	box-sizing:border-box;
	padding:20px;
	font-size:90%;
	min-width:180px;
}



.submenu > a{
	display:block;
	text-align:left;
	font-weight:normal;
	padding: 5px 10px;
	color: #000;
	display:block;
	border-top-width: 1px;
	border-top-style: dashed;
	border-top-color: #CCC;	
}
.submenu > a:hover{
	color:#f54a7e;
	

}

.submenu > b{
	display:block;
	font-weight:normal;
	padding: 5px 10px;
	border-top-width: 1px;
	border-top-style: dashed;
	border-top-color: #CCC;	
	}
	

	
.submenu > anak a{
	background-image:url(icon.png);
	background-repeat:no-repeat;
	background-position:10px 6px;

}	
	
.submenu > anak a{
	display:block;
	font-weight:normal;
	padding-top: 3px;
	padding-right: 10px;
	padding-bottom: 3px;
	padding-left: 25px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	color:#000;
	line-height:15px;	
}

.submenu > anak a:hover{
	background-image:url(icono.png);
	color:#005186;
}

/*on rollover */
.mainmenu:hover .submenu,
.mainmenu:focus .submenu{
	opacity:1;
	visibility:visible;
}





/* 3 Line For Mobile WIll Fucking Appear */

#toggle, #toggle + label {
  display:none;
  cursor:pointer;
}

@media only screen and (max-width: 870px) {
#toggle + label {
  display:block;
}
#toggle + label:before {
	content:"\2630";
	font-size: 36px;
	font-weight: bold;
		color:#f54a7e;	
	background-color:#a2fceb;
	display:block;
	min-height:30px;
	padding-top:15px;
	text-align:center;

}
nav{	
	position: static;
	display:block;
	width:100%;
	z-index:999;
	background-color: #fff;
	border-top-width: 3px;
	border-bottom-width: 3px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #f54a7e;
	border-bottom-color: #f54a7e;
	text-align:center;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;
	opacity:0;
	max-height:0px;
	box-sizing:border-box;
}

#toggle:checked ~ nav {
	max-height:999px;
	opacity:1;
	padding:10px;
	margin-top:10px;
}


.mainmenu{
	display: block;
	text-align:left;
}

.mainmenu > a{
	padding:5px 10px;
}



.submenu{
	box-shadow:	none;
	border:none;
	display:none;
	position: static;	
	padding:10px;
	font-size:80%;
		}
		
.mainmenu:focus .submenu,
.mainmenu:hover .submenu{
	display:block;
}		
		
		
}