nav ul li.current a { color: #FF9800; text-decoration: underline; }

@-webkit-keyframes bugfix {
  	from {
    	padding: 0;
  	}
  	to {
    	padding: 0;
 	}
}
input[type=checkbox] {
  	position: absolute;
  	top: -9999px;
  	left: -9999px;
}

label {
  	/*display: none; add inp tel*/
  	cursor: pointer;
  	user-select: none;
}

nav[role="custom-dropdown"] {
	line-height: 1;
  	position: relative;
  	width: 100%;
}
nav[role="custom-dropdown"] a,
nav[role="custom-dropdown"] label {
  	color: #513A70;
  	text-decoration: none;
  	font: 1.4em sans-serif;
  	transition: color .3s ease-in-out;
}
nav[role="custom-dropdown"] ul {
  	padding: 0;
  	margin: 0 auto;
  	width: 100%;
  	list-style: none;
}
nav[role="custom-dropdown"] ul > li {
  	float: left;
  	padding: .2em .55em;
  	text-align: center;
  	transition-duration: .3s;
  	transition-timing-function: ease-in-out;
  	transition-property: box-shadow, color;
  	cursor: pointer;
}
nav[role="custom-dropdown"] ul > li:hover {
  	background-color: #513A70;
  	color: #fff;
  	box-shadow: 0 0.05em 0.25em 0 rgba(0, 0, 0, 0.35), inset 0 0 0 2em rgba(0, 0, 0, 0.3);
}
nav[role="custom-dropdown"] ul > li:hover > a {
  	color: #fff;
}

/* small screens */
@media screen and (max-width: 44em) {
  	html,
  	body {
    	margin: 0;
  	}

	nav[role="custom-dropdown"] ul {
    	display: none;
    	height: 100%;
  	}
  	nav[role="custom-dropdown"] label {
	    position: relative;
	    display: block;
	    width: 100%;
	    min-height: 2.25em;
	    padding: .45em;
	    font-size: 1.1em;
	    margin: 0;
  	}
  	nav[role="custom-dropdown"] label:after {
	    position: absolute;
	    right: .25em;
	    top: 0;
	    content: "\2261";
	    font-size: 1.8em;
  	}
  	nav[role="custom-dropdown"] input[type=checkbox]:checked ~ label:after {
    	color: #222;
  	}
  	nav[role="custom-dropdown"] input[type=checkbox]:checked ~ ul {
    	display: block;
  	}
  	nav[role="custom-dropdown"] input[type=checkbox]:checked ~ ul > li {
    	width: 100%;
    	opacity: .8;
    	text-align: left;
  	}
  	nav[role="custom-dropdown"] input[type=checkbox]:checked ~ ul > li:after {
    	position: absolute;
	    right: .25em;
	    content: "\203A";
	    font: bold 1.4em sans-serif;
  	}
}
