@charset "UTF-8";
/*drawerMenu.css */

/* Toggle(Button) */
#navToggle {
	display: none;
	position: absolute;/*to body*/
	right: 13px;
	top: 16px;
	width: 30px;
	height: 25px;
	cursor: pointer
}

#navToggle div {
	position: relative
}

#navToggle span {
	display: block;
	position: absolute;
	width: 100%;
	border-bottom: solid 3px #999;
	-webkit-transition: .35s ease-in-out;
	-moz-transition: .35s ease-in-out;
	transition: .35s ease-in-out
}

#navToggle span:nth-child(1) { top: 0 }
#navToggle span:nth-child(2) { top: 11px }
#navToggle span:nth-child(3) { top: 22px }


/*Media-queries_____________________________________*/
@media screen and (max-width: 767px) {

/* Toggle(Button) */
#navToggle { display: block }

/* Click Toggle(Button) */
.openNav #navToggle span:nth-child(1) {
	top: 11px;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	transform: rotate(-45deg)
}

.openNav #navToggle span:nth-child(2),
.openNav #navToggle span:nth-child(3) {
	top: 11px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	transform: rotate(45deg)
}

/*header menu*/
.openNav nav {
	-moz-transform: translateY(510px);
	-webkit-transform: translateY(510px);
	transform: translateY(510px);
	z-index: 99999999999;
}

header nav {
	position: absolute;
	right: 0;
	top: -450px;
	background: rgba(0,0,0);
	width: 100%;
	padding: 0px 0 0 0;
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
	-o-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
	text-align: left;
}

header nav ul { margin: 0px 0 0 0; width: 100% }
header nav ul li { 
	display: block;
	margin: 0;
	border-bottom: dotted 1px #23A8F2;
	font-size: 14px;
	line-height: 48px
}

header nav ul li a { 
	display: block;
	color: #FFF;
	padding: 0 0 0 10px;
}

header nav ul li::after { content: '' }
header nav ul li:last-child { border-bottom: none }

header nav ul li a:hover { 
	background: #CCC;
}



}