@charset "utf-8";



/* -- ul#menu -------------------------------------------------------------------------------- */


ul#menu {
 list-style-type: none;

	  width: 100%;

	  background: #ffffff;

	  opacity: 0.9;

	  position: absolute;

	  left: 0px;

	  top: 70px;

	  z-index: 990;

	  display: none; 
}


ul#menu li {
 text-align: center; 
}


ul#menu li a {
 text-decoration: none;

	       display: block;

	       padding: 15px 0; 
}


ul#menu li a:hover {
 background: #a9a9a9;

    	             opacity: 0.7; 
}





/* -- div#sp-icon -------------------------------------------------------------------------------- */


div#sp-icon {
 width: 70px;

	      height: 70px;

	      position: absolute;

	      right: 0px;

	      top: 0px;

	      z-index: 999;
 }


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: 30px;

	                                                          height: 3px;

	                                                          background: #000000;

	                                                          position: absolute;

	                                                          transition-property: transform;

	                                                          transition-duration: 0.3s; 
}


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


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


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



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

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


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