@charset "utf-8";

/* Header
-------------------------*/
#header{
	width:100%;
	height:60px;
	background:#222;
	display:flex;
	justify-content:space-between;
	align-items:center;
	position:fixed;
	top:0;
	left:0;
	box-sizing:border-box;
	z-index:10;}
#header #logo a{
	display:flex;
	align-items:center;}
.custom-logo{
	height:auto;
	width:60%;
	max-width:500px;
	max-height:60px;
	overflow:hidden;
	transition-property:opacity;
	transition-duration:0.25s;
	transition-timing-function:ease;}
#nav li a{
	display:block;
	color:#fff;
	position:relative;}
#nav .menu-item-has-children > a:after,
#nav .menu-item-has-children > a:before{
	display:block;
	content:"";
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	right:20px;
	margin:auto;
	width:10px;
	height:1px;
	background:#fff;
	transition:.2s;}
#nav .menu-item-has-children > a:after{
	transform:rotate(90deg);
	-webkit-transform:rotate(90deg);}
#nav .menu-item-has-children > a.open:before{
	transform:rotate(0deg);
	-webkit-transform:rotate(0deg);}
#nav .menu-item-has-children > a.open:after{
	background:transparent;}
#nav .menu-item-has-children .sub-menu{
	display:none;}
@media only screen and (max-width:767px){
	#header{
		padding:0 20px;}
	.overlay{
		width:0;
		height:0;
		position:fixed;
		z-index:11;
		top:0;
		left:0;
		opacity:0;
		transition:opacity .5s;
		background:rgba(255,255,255,.7);}
	.overlay.open{
		width:100%;
		height:100%;
		opacity:1;}
	#main{
		transition:all .5s;
		min-height:100vh;}
	#main.open{
		position:fixed;
		width:100%;}
	#menu_btn{
		top:5px;
		right:0;
		transition:.3s;
		cursor:pointer;
		position:fixed;
		z-index:9999;
		width:50px;
		height:50px;
		display:flex;
		align-items:center;
		justify-content:center;}
	.menu-trigger{
		width:18px;
		height:16px;
		position:relative;}
	.menu-trigger span{
		display:inline-block;
		box-sizing:border-box;
		position:absolute;
		left:0;
		width:100%;
		height:1px;
		background-color:#ddd;
		transition:all .5s;}
	.menu-trigger span:nth-of-type(1){
		top:0;}
	.menu-trigger span:nth-of-type(2){
		width:70%;
		top:7px;}
	.menu-trigger span:nth-of-type(3){
		bottom:0;}
	#menu_btn.active .menu-trigger span:nth-of-type(1){
		transform:translateY(7px) rotate(-45deg);}
	#menu_btn.active .menu-trigger span:nth-of-type(2){
		opacity:0;}
	#menu_btn.active .menu-trigger span:nth-of-type(3){
		transform:translateY(-7px) rotate(45deg);}
	#nav{
		width:280px;
		height:100%;
		overflow:auto;
		padding:90px 0;
		background:#000;
		position:fixed;
		top:0;
		right:0;
		z-index:12;
		transform:translate(280px);
		transition:all .5s;	}
	#nav.open{
		transform:translateZ(0);}
	#nav li a{
		position:relative;
		padding:10px 20px;
		color:#fff;}
	#nav .menu-item-has-children .sub-menu{
		padding:10px 20px;}
	#nav .menu-item-has-children > a.open:first-of-type{
		color:#dad4ec;}
	#nav .menu-item-has-children .sub-menu li{
		padding:0;
		margin-bottom:20px;}
	#nav .menu-item-has-children .sub-menu li:last-child{
		margin-bottom:0;}
	#nav .menu-item-has-children .sub-menu li a{
		padding:0;}
}
@media only screen and (min-width:768px){
	header{
		padding:0 20px;}
	header #logo{
		width:200px;}
	#menu_btn,
	.overlay{
		display:none;}
	#nav ul{
		display:flex;
		flex-wrap:wrap;}
	#nav li{
		position:relative;}
	#nav li a{
		padding:16px 20px;}
	#nav .menu-item-has-children > a{
		padding-right:40px;}
	#nav .menu-item-has-children > a.open:first-of-type,
	#nav .current-menu-item a{
		color:#dad4ec;}
	#nav .current-menu-item li a{
		color:#fff;}
	#nav li ul.sub-menu{
		flex-direction:column;
		background:#fff;
		position:absolute;
		width:200px;
		left:50%;
		top:100%;
		-webkit-transform:translateX(-50%);
		transform:translateX(-50%);
		padding:10px 0;}
	#nav li ul.sub-menu li{
		width:100%;}
	#nav li ul.sub-menu li a{
		line-height:1.6em;
		color:#83759a;
		padding:10px 20px;}
	#nav li ul.sub-menu li a:hover{
		color:#dad4ec;}
}

/* Footer
-------------------------*/
.f-menu{
	text-align:left;
	border-top:1px solid #ddd;
	height:auto;
	line-height:100%;
	padding:40px 20px 25px;}
.f-menu ul{
	line-height:1;
	margin: auto;
	display: flex;
	flex-wrap: wrap;}
.f-menu li{
	font-size:14px;
	display:block;
	float:left;
	width:50%;
	margin:0 0 12px 0;
	line-height:1.7;}
.f-menu li a{
	display:block;
	margin:0;
	padding:0;
	border-right:none;}
.f-menu li:last-of-type a{
	border:none;
	margin:0;
	padding:0;}
#copyright{
	background:#222;
	text-align:center;
	font-size:12px;
	color:#fff;
	line-height:50px;}
@media only screen and (min-width:768px){
	.f-menu{
		text-align:center;
		border-top:1px solid #ddd;
		padding: 10px 0;}
	.f-menu ul{
		font-size:0;
		line-height:1;
		max-width: 1200px;
		margin: auto;
		justify-content: center;}
	.f-menu li{
		font-size:14px;
		display:inline-block;
		margin: 0;
		width: auto;}
	.f-menu li a{
		display:block;
		margin:0 10px 0 0;
		padding:0 12px 0 0;
		border-right:1px solid #666;}
	.f-menu li:last-of-type a{
		border:none;
		margin:0;
		padding:0;}
}

/* RETURN TOP
--------------------*/