@charset "utf-8";
@media (min-width:768px) {
	nav{
		background:linear-gradient(#fff, #f1f1f1)
	}
	ul#menu{
	display: flex;
	justify-content:space-around;
	height:45px;
	max-width: 990px;
	margin: auto;
}
	ul#menu a{
		text-decoration:none;
		color:#333;
		display: block;
		line-height: 45px;
		text-align: center;
		width: 160px;
	}
	ul#menu a:hover{
		color:#555;
	}
	ul#menu li a:visited{
		color:#333;
	}
}
@media (min-width:768px) and (max-width:991px) {
	ul#menu a{
		width: 125px;
	}
}
@media (min-width:992px) and (max-width:1199px) {
	ul#menu a{
		width: 150px;
	}
}
@media (max-width:767px){
	ul#menu {
		list-style-type : none;
		background : #000;
		opacity : 0.9;
		position : absolute;
		left : 0px;
		top : 65px!important;
		display : none;
		z-index: 99;
	}

	ul#menu li {
		text-align : center;
		border-bottom:dotted 1px #ccc;
	}

	ul#menu li a {
		text-decoration : none;
		display : block;
		line-height: 60px;
		color:#fff;
		width: auto;
	}

	ul#menu li a:hover {
		background : #555;
	}

	ul#menu li a:visited{
		color:#fff;
		}
		
	div#sp-icon {
		width : 70px;
		height : 70px;
		position : absolute;
		right : 0px!important;
		top : 0px;
		
	}

	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;
		transition-property : transform;
		transition-duration : 0.3s;
	}

	div#sp-icon span {
		position : absolute;
		left : 50%;
		top : 50%;
		transform : translate( -50%, -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;
	}
}