/**********
NAVIGATION Menu
***********/
header { 
	margin:0; padding:1em; position:fixed; z-index:20; width:100%; text-align:left; 
	display:flex; flex-direction:row; align-items:stretch;
	min-height:90px;
	transition:all 300ms; 
	background:rgba(36,36,36,0.55);
	}

header .logo img{ position:absolute; z-index:22; top:0.4em; left:50%; transform:translateX(-50%); width:180px; max-width:initial; height:auto; transition:all 300ms; }
header .nav-right { flex-grow:1; display:flex; flex-direction:row-reverse; align-items:center; align-content:flex-end; }
header .social-icons { width:auto; display:none; }

nav { 
	position:absolute; z-index:500;
	text-align:left;
	top:0;
	height:100vh;
	left:0;
	background-color:rgba(0,0,0,0.9);
	width:85%;
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
	transform-origin: left;
	transition: transform 300ms ease-in-out;
	}

nav.open {
    transform: translateX(0);
    -webkit-transform: translateX(0);
	}

.nav-toggle { 
	cursor: pointer;
	right:1em;
	}
.nav-toggle .bar1, .nav-toggle .bar2, .nav-toggle .bar3 {
	width: 35px;
	height: 4px;
	background-color: #FFF;
	margin: 5px 0;
	transition: 0.4s;
	}
.nav-toggle.open .bar1 {
	-webkit-transform: rotate(-45deg) translate(-7px, 6px);
	transform: rotate(-45deg) translate(-7px, 6x);
	}
.nav-toggle.open .bar2 {opacity: 0;}
.nav-toggle.open .bar3 {
	-webkit-transform: rotate(45deg) translate(-7px, -6px);
	transform: rotate(45deg) translate(-7px, -6px);
	}

nav ul {
	margin:0;
	padding:0;
	list-style:none;
	}

nav ul li{
	margin:0; text-transform:uppercase;
	border-bottom:1px dotted rgba(255,255,255, 0.1);
	}

nav ul li:last-child {
	border-bottom:none;
	}
	
nav ul li a{
	color:#FFF;
	text-decoration:none;
	padding:0.8em 1.6em;
	display:block;
	}
nav ul li a:hover, nav ul li a:active, nav ul li a:focus { color:#a7ce39; }
	
nav ul li.active a { color:#b2b2b2; }
nav ul li.active a:hover, nav ul li.active a:active, nav ul li.active a:focus { color:#a7ce39; }


nav ul li a:hover{
	background-color:rgba(255,255,255,0.1);
	}
		
nav ul li ul li{
	margin-top:-0.8em;
	border-bottom:none;
	}

nav ul li ul li a{
	padding-left:3em;
	}


header.scrolled { background:rgba(36,36,36,0.85);}
header.scrolled .logo img { width:100px; max-width:initial; height:auto; }

	
@media screen and (min-width:800px) {

	header { align-items:stretch; padding:1em 1em 0em 1em; }
	header .nav-toggle { display:none; }
	header .logo{  }
	header .logo img{ top:0.8em; left:0.8em; transform:translateX(0%); }

	header.scrolled { transform:translateY(-3.4em); }
	header.scrolled .logo img { top:calc(0.8em + 3.4em) }


	header .social-icons { display:flex; flex-grow:0; font-size:1em;  }

	header .nav-right { 
		flex-direction:column;
		align-items:flex-end;
		}


	nav {
		background-color:rgba(0,0,0,0);
		align-self:flex-end;
		width:auto;
		height:auto;
		position:relative;
		display:block;
		top:auto;
		transition: none;
		transform: scale(1,1);
		background: none 
		}
		
	nav ul { margin-top:0.3em; display:flex; flex-wrap:wrap; justify-content:flex-end;}

	nav ul li{
		border:none; /*border:1px solid yellow;*/
		}
	nav ul li a{
		position:relative; padding:0.5em 0.5em 0.8em 0.5em; margin:0 0.5em; font-size:1.2em; /*border:1px solid green;*/
		}

	nav ul li.active a { border-bottom:0px solid #bbbbbb; }
		
	nav ul li a:hover{
		background-color:transparent;
		}

nav ul li a::after {
    content: '';
    display: block;
	position:absolute;
    width: calc(100% - 1em);
    height: 3px;
    background: #a7ce39;
	margin-top:-3px;
	opacity:0;
    transition: all .3s;
	}

nav ul li a:hover::after {
    margin-top:0.2em;
	opacity:1;
	}

	nav ul li ul{
		display:flex;
		flex-direction: column;
		position:absolute;
		border-top:0px solid rgba(255,255,255, 0.1);
		border-bottom:1px solid rgba(0,0,0, 1);
		background-color:rgba(36,36,36,0.45);
		transform: scale(1, 0);
		transform-origin: top;
		transition: transform 200ms ease-in-out;
		margin-left:1.2em;
		margin-top:-0.05em;
		}

header.scrolled nav ul li ul { background:rgba(36,36,36,0.85);}
		
	nav ul li ul li{
		border-bottom:1px dotted rgba(255,255,255, 0.1);
		margin:0;
		}
		
	nav ul li ul li a{
		padding:0.5em 1em 0.5em 0.5em;
		}
	nav ul li ul li a:hover{
		background-color:transparent;
		}
		
	nav ul li:hover ul {
		transform: scale(1, 1);
		}	
	}

@media screen and (min-width:800px) and (max-width:1229px) {
	nav { font-size:0.8em; }
	}
@media screen and (min-width:1230px) and (max-width:1350px) {
	nav { font-size:0.9em; }
	}