/* CSS Document */

.masker{
	width:100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	background-color: rgba(0,0,0,0.7);
	z-index: 1000;
	display: none;
}
.masker.open{
	display: block;
}
.masker.close{
	display: none;
}





.modalNav{
	z-index: 2000;
	position: fixed;
	top: 100px;
	left: 10%;
	width: 80%;
	height: 100%;
	display: none;
}
.modalNav.open{
	display: block;
}
.modalNav.close{
	display: none;
}



.navSwitchButton{
	position: fixed;
	top: 100px;
	right: 100px;
	z-index: 9000;
	color: #fff;
	display: block;
	width: 80px;
	heigth: 80px;
}
.navSwitchButton div{ background-color: #fff; width: 20px; height: 3px;}






.modalNavSwitch{
	position: fixed;
	width: 25px;
	height: 23px;
	right: 30px;
	top: 30px;
	z-index: 7000;
	border: solid 1px #fff;
	padding: 5px;
	background-color: rgba(0,0,0,0.1);
}
.modalNavSwitch .bar{
	position: absolute;
	width: 25px;
	height: 3px;
	margin-bottom: 5px;
	background-color: #fff;
	left: 5px;
	top:15px;
	transition: all 0.3s;
	transform-origin:50% 50%;
}
.modalNavSwitch .bar:nth-child(1){
	transform:rotate(0deg);
	top: 7px;
}
.modalNavSwitch .bar:nth-child(2){
	opacity: 1;
	top: 15px;
}
.modalNavSwitch .bar:nth-child(3){
	transform:rotate(0deg);
	top: 23px;
}


.modalNavSwitch.state_1{
	position: fixed;
	border: solid 1px #999;
}
.modalNavSwitch.state_1 .bar{
	background-color: #ccc;
}
.modalNavSwitch.state_1 .bar:nth-child(1){
	transform:rotate(45deg);
	top: 15px;
}
.modalNavSwitch.state_1 .bar:nth-child(2){
	opacity: 0;
	top: 15px;
}
.modalNavSwitch.state_1 .bar:nth-child(3){
	transform:rotate(-45deg);
	top: 15px;
}




@media only screen and (max-width:480px) {
}
@media only screen and (min-width : 481px) and (max-width : 1024px) {
}
@media only screen and (min-width:1025px) {
	.modalNavSwitch{ display: none;}
}