body { -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } }


#nav {
  position: relative;
	/* float: right; */
	width: 100%;
	margin-top: 10px;
	/* width: calc(100% + 20px); */
	left: 0;
	/* margin-bottom: 20px; */
	clear: both;
}
#nav ul {
  display: none;
  width: 100%;
  list-style: none;
  margin: 0px;
  padding: 0px;
}
#nav ul li {
	margin: 0;
}
#nav ul li a {
  display: block;
  color: #333333;
	font-size: 18px;
	font-weight: 400;
  padding: 5px;
  text-decoration: none;
	
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
	position: relative;
  transition: 0.5s color ease;
	font-style: italic;
}

#nav ul li a .red {	color: #e50303; }
#nav ul li a .blue { color: #0d80bd; }
#nav ul li a .green { color: #23bb02; }
#nav ul li a .violet { color: #d804c7; }

#nav ul li a::after {
  content: "";
  transition: 0.5s all ease;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: #53b929;
}
#nav ul li a.current {
	color: #53b929;
}
#nav ul li a:hover {
	color: #53b929;
}
#nav ul li ul li a {
  padding-left: 1.5em;
	border: 0 none;
}
#nav ul li ul li ul li a {
  padding-left: 3.125em;
	border: 0 none;
}
#nav ul li a:hover:after {
  width: 100%;
}
#nav label {
  display: block;
  color: #ffffff;
  background: #2f2e5b;
  font-size: 1.1em;
  line-height: 2em;
  min-height: 2em;	
  position: relative;
  padding: .45em;
  margin: 0;
  cursor: pointer;
	
	
	/* width: calc(100% + 10px); */
	/* left: -10px; */
}
#nav label:after {
  color: #ffffff;
  font-size: 1.8em;	
  position: absolute;
  right: 20px;
  top: .2em;
  content: "\2261";
}
#nav input.trigger {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
#nav input.trigger:checked ~ ul,
#nav input.trigger:checked ~ ul li ul {
  display: block;
	position: static;
	width: 100%;
}


@media (min-width: 620px) {
	#nav {
		left: 0;
		margin: 0;
		width: 100%;
		clear: both;
		/* margin-top: 10px; */
		/* margin-bottom: 20px; */
	}
	#nav ul {		
		float: none;
		display: -webkit-flex;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	#nav ul li {
		position: relative;
		text-align: center;
		margin-bottom: 0;
	}
	#nav ul li a {
		padding: 10px;
	}
	#nav ul li ul {
		display: none;
		position: absolute;
		top: 20px;
		left: 0;
		width: 300px;
		z-index: 200;
		background-color: #ffffff;
	}
	#nav ul li ul li {
		text-align: left;
		margin-bottom: 0;
		margin: 0;
	}
	#nav ul li ul li a {
		padding: 10px 15px;
	}
	#nav ul li ul li a:hover {
		background-color: #eeeeee;
	}
	#nav ul li ul li a::before,
	#nav ul li ul li a::after {
		display: none;
	}
	#nav ul li ul li ul {
		z-index: 300;
		top: 0px;
		left: 100%;
	}
	#nav ul li ul li ul li a {
		padding-left: 30px !important;
	}
	#nav ul li:hover > ul {
		display: block !important;
	}
	#nav label {
		display: none;
	}
	#nav input.trigger:checked ~ ul,
	#nav input.trigger:checked ~ ul li ul {
		display: flex;
		flex-direction: row;
		display: none;
	}
	#nav input.trigger:checked ~ label {
		display: block;
	}	
}



@media (min-width: 1086px) {
	
	#nav {
		width: auto;
		clear: right;
		/* margin-top: 10px; */
	}
	#nav ul {
		
		width: auto;
		float: right;
		clear: right;
		
		/* float: none; */
		/* display: -webkit-flex; */
		/* display: flex; */
		/* justify-content: center; */
	}
}