/* -- nav button -- */
/* ------------------------------------------------------------------------------------------------------------------------------------------------- */

#layout {
position: relative;
background: white;
}

#layout .overlay {
opacity: 0;
visibility: hidden;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(0,0,0,0.3);
z-index: 8000;

position: fixed;
right: 220px;

position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}

#navm {
position: fixed;
top: 0;
right:-220px;
bottom: 0;
width:220px;
z-index: 12000;
overflow: auto;
overflow-x: hidden;
box-sizing: border-box;
background: #fff;
opacity: 0;
visibility: hidden;
}

#navm ul,
#navm li {
list-style: none;
margin: 0;
padding: 0;
border: 0;
width: 100%;    
}

#navm ul {
width:100%;
position: relative;
margin-top: 100px;
padding: 0 15px;
}

#navm li{
border-bottom:1px solid #d9d9d9;
}

#navm li:last-child{
border:0;
}

#navm ul li.sub,
#navm li a {
display: block;
padding: 10px 0;
color: #3b3b3b;
text-transform: uppercase;
text-decoration: none;
width: 100%;
font-size: 14px;    
box-sizing: border-box;
font-family: 'Biko_Bold';
}

#navm ul ul {
position: relative;
width:100%;
padding: 0;
margin: 0;
}


#navm ul ul li{
    border:0;
}

#navm li.ico{
border:0;
width:25px;
height: 25px;
float: left;
display: inline-block;
}



#navm ul li{
    position: relative;
}

#navm ul li.sub{
height: 37px;  
overflow: hidden;
    position: relative;
}

#navm ul li.sub.open{
    height: auto;
}

#navm ul li.sub a{
    position: relative;
}

#navm ul li.sub:after{
    
    content: '';
    width:16px;
    height: 16px;
    position: absolute;
    top:18px;
    margin-top: -8px;
    right:0;
    background-position: center;
    background-size: 10px;
    background-repeat: no-repeat;
    background-image: url(../../img/png/arrows.png);
}
    
#navm ul li.sub.open:after{
    transform: rotate(90deg) ;
-webkit-transform: rotate(90deg) ;
-moz-transform: rotate(90deg) ;
-o-transform: rotate(90deg) ;
-ms-transform: rotate(90deg) ;
}




#navm li a:hover {
background: rgba(255,255,255,0.1);
    color:#373a3b;
}

#header h1 {
display: none;
}

#header .nav-button {
height: 77px;
width: 90px;
box-sizing: border-box;
padding: 24px 30px 0;
position: absolute;
right: 0;
top: 23px;
z-index: 100;
cursor: pointer;
display: none;
}

#header .nav-button span {
height: 4px;
background: #ea4529;
margin: 4px 0 4px;
display: block;
position: relative;
}

html.mobile #header .nav-button span:nth-child(1){
    
        transform: rotate(45deg) ;
-webkit-transform: rotate(45deg) ;
-moz-transform: rotate(45deg) ;
-o-transform: rotate(45deg) ;
-ms-transform: rotate(45deg) ;
    top:8px;
}

html.mobile #header .nav-button span:nth-child(2){
    
    opacity: 0;
    
}

html.mobile #header .nav-button span:nth-child(3){
    
        transform: rotate(-45deg) ;
-webkit-transform: rotate(-45deg) ;
-moz-transform: rotate(-45deg) ;
-o-transform: rotate(-45deg) ;
-ms-transform: rotate(-45deg) ;
    top:-8px;
}




/* -- media ipad -- */
/* ------------------------------------------------------------------------------------------------------------------------------------------------- */

@media screen and (max-width: 1024px) {


	/* ----------- nav mobile --------------- */
	
    
	#header .nav-button {
	display: block;
	}
    
   

	html.mobile #navm {
	right:0;
	opacity: 1;
	visibility: visible;
	}
    
    

	html.mobile body {
	overflow: hidden;
	}

    
    
	html.mobile #layout {
	margin-left: -220px;
	margin-right: 220px;
	}

	html.mobile #layout .overlay {
	opacity: 1;
	visibility: visible;
	cursor: pointer;
	}

	html.mobile #layout .overlay:hover {
	background: rgba(0,0,0,0);
	}
    
    

}