/**** header ****/
header{
	overflow:hidden;
}
.logo{
	position:absolute;
	top:2em;
	left:3%;
	width:20%;
	z-index:10;
}
.globalNav{
	margin:0;
	width:100%;
	overflow:hidden;
	font-family: 'Josefin Sans', sans-serif;
	font-weight:bold;
}
.globalNav ul{
	float:right;
	margin-right: 1em;
}
.globalNav li{
	float:left;
	padding:2em 2em;
	line-height:1;
	transition:.3s ease-in-out;
}
.globalNav li.icon{
	padding:2em 1em;
}
.globalNav li:hover{
	opacity:.5;
}	
.globalNav li span{
	font-size:.6em;
}

/**** menu-btn ****/
.menu-btn {
    display: none;
    width: 44px;
    height:44px;
    position: fixed;
    top: 2em;
    right: 5%;
	z-index:100;
}
.menu-btn span {
    display: block;
    width: 44px;
    height: 1px;
    position: absolute;
    left: 0px;
	background: #333;
    transition: .5s;
    -webkit-transition: .5s;
    -moz-transition: .5s;
}
.menu-btn span:first-child {
    top: 8px;
}
.menu-btn span:nth-child(2) {
    margin-top: -1px;
    top: 50%;
}
.menu-btn span:last-child {
    bottom: 8px;
}

/* clicked menu button */
.open .menu-btn span:first-child {
    transform: translateY(14px) rotate(45deg);
	background:#fff;
	
}
.open .menu-btn span:nth-child(2) {
    opacity: 0;
}
.open .menu-btn span:last-child {
    transform: translateY(-14px) rotate(-45deg);
	background:#fff;
}

/**** open nav ****/
.open .globalNav{
	opacity:1;
	width:100%;
	height:100%;	
	background:#333 url(../img/bg_footer.jpg) bottom no-repeat;
	background-size: cover;
	z-index:15;
}
.open .globalNav ul{
	opacity:1;
	float: none;
	padding:1em;
	margin:2em 0 0;
	font-size:1.5em;
}
.open .globalNav li{
	float:none;
	line-height:1;
	margin:0;
	border-bottom:#999 1px solid;
}
.open .globalNav li.icon{
	display: inline-block;
	padding:2em 1em;
	border: none;
}
.open .globalNav a{
	color:#fff;
}


@media screen and (max-width: 979px){
.menu-btn {
    display: block;
}
.globalNav{
	opacity:0;
	position:fixed;
	top:0;
	right:0;
	width:0;
	height:0;
	overflow:hidden;
}
.globalNav ul{
	opacity:0;
}
}