/* -------------------- */
/* header
/* -------------------- */

a{
	color:initial;
	text-decoration:none;
}

.header{
    height:74px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:10px 0;
	width:100%;
}
.header .site-title{
	max-width:200px;
	padding:0 10px;
}
.header .site-title img{
	width:100%;
}

.header .nav-wrapper{
/*	z-index:1000;*/
	transform: translateX(100%);      
	transition: .3s;      
	width: 20vw;
	min-width:300px;
	height: 100vh;      
	position: fixed;      
	top: 0;      
	right: 0;      
	z-index: 2;
}
.nav-wrapper.slide-in{      
	transform: translateX(0);      
	transition: .6s;     
}

.header .nav-list{
    display: flex;
	flex-direction: column;
	padding-top:100px;
	list-style-type: none;
}
.header-nav{        
	width: 100%;        
	height: 100%;        
	background: rgba(179,193,166,0.8);
	z-index: 2;
}     
.header-nav.nav-list{        
	display: block;        
	position: absolute;        
	top: 50%;        
	left: 50%;        
	transform: translate(-50%,-50%);        
	text-align: center;
}
.header-nav.nav-item{        
	width:90%;
	margin:10px auto;
	text-align:right;
}
.header-nav .nav-list li {
	padding:15px 20px;
	font-family: 'Montserrat', sans-serif;
	font-weight:500;
	font-size:18px;
}
.header-nav .nav-list li a{
	color:#333;
}
@media screen and (max-width:440px){
	.header .nav-wrapper{
		width: 100vw;
	}
	.header .nav-list{
		padding-top:50px;
	}
	.header-nav .nav-list li {
		padding:10px;
	}
}


/* ------------------ */
/* humberger-menu */
/* ------------------ */
.burger-btn{
	display: block;      
	width: 50px;      
	height: 50px;      
	position: relative;      
	z-index: 3;
	border:none;
	padding:0 20px;
	right:0;
}
.bar{      
	width: 40px;      
	height: 1px;        
	display: block;      
	position: absolute;      
	left: 50%;      
	transform: translateX(-50%);      
	background-color: #fff;    
}    
.bar.change-color {
    background-color: #333;
}
.bar_top{   
	top: 10px;
}
.bar_mid{    
	top: 50%;
}
.bar_bottom{
	bottom: 10px;
}
.burger-btn.close .bar_top{
	width:50px;
	transform: translate(-50%,15px) rotate(40deg);      
	transition: transform .3s;
}    
.burger-btn.close .bar_mid{      
	opacity: 0;       
	transition: opacity .3s;    
}    
.burger-btn.close .bar_bottom{      
	width: 50px;      
	transform: translate(-50%,-15px) rotate(-40deg);      
	transition: transform .3s;    
}
@media screen and (max-width:440px){
	.header{
		padding:0;
	    height:50px;
	}
	.burger-btn{
		width: 40px;      
		height: 40px;      
		border:none;
		padding:0 20px;
		right:0;
		top:10px;
	}
	.bar{      
		width: 30px;      
	}    
	.burger-btn.close .bar_top{
		width:40px;
		transform: translate(-50%,10px) rotate(40deg);      
	}    
	.burger-btn.close .bar_bottom{      
		width: 40px;      
		transform: translate(-50%,-10px) rotate(-40deg);      
	}
}