@charset "utf-8";


ul#menu {
    list-style-type : none;
    background : #ffffff;
    opacity : 0.85;
    position : fixed;
    left : 0px;
    top : 0px;
    z-index : 990;
    display : none;
}

ul#menu li {
    text-align : center;
    border-bottom: 1px solid #75AD6E;
}

ul#menu li a {
    text-decoration : none;
    display : block;
    padding : 15px 0;
    font-size: 24px;
    color: #50B581;
}

ul#menu li a:hover {
    background-color: #50B581;
    opacity : 0.7;
    color: #FFFFFF;
}


div#sp-icon {
    width : 70px;
    height : 70px;
    position : fixed;
    top : 3px;
    z-index : 999;
    left: 400px;
}

div#sp-icon:hover {
	cursor : pointer;
	opacity : 0.7;
}

div#sp-icon span,
div#sp-icon span:before,
div#sp-icon span:after {
    display : inline-block;
    width : 50px;
    height : 4px;
    background-color: #FFAEB0;
    transition-property : transform;
    transition-duration : 0.3s;
}

div#sp-icon span {
    position : absolute;
    top : 50%;
    transform : translate( -50%, -50% );
    left: 50%;
}

div#sp-icon span:before {
	content : "";
	position : absolute;
	transform : translateY( -10px ) rotate( 0deg );
}

div#sp-icon span:after {
	content : "";
	position : absolute;
	transform : translateY( 10px ) rotate( 0deg );
}


div.sp-close span {
	background : transparent !important;
}

div.sp-close span:before {
	transform : rotate( 45deg ) !important;
}

div.sp-close span:after {
	transform : rotate( -45deg ) !important;
}