.headroom {
    transition: transform .25s ease-in-out;
    will-change: transform;
}
.headroom--pinned {
    -ms-transform: translateY(0%);
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
}
.headroom--unpinned {
    -ms-transform: translateY(-120%);
    -webkit-transform: translateY(-120%);
    transform: translateY(-120%);
}

@media only screen
	{

#nav {
    width: 100%;
    position: absolute;
    display: block;
    top:0px;
    margin: 5;
    right:5%;
    font-size: 18px;
	}

#nav ul ul {
	margin: 0px;
	}
			
#nav > a {
	display: none;
	}

#nav li	{
	position: relative;
	margin-bottom: 0px;    
	font-size: 18px;
    text-align: center;
	}

#nav li a {
	display: block;
	-webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
	}
				
#nav li a:active {
	background-color: #c00;
	font-size: 18px;
	}

			/* expand icon */
#nav a.submenu:after, #nav span.submenu:after, #nav strong.submenu:after {
	border-bottom: none;
	content: '\e90f';
    font-family: icons;
	display: inline-block;
	position: relative;
	right: -0.3em;
	opacity:1;
	-webkit-transition: opacity .5s ease;
	-moz-transition: opacity .5s ease;
	-o-transition: opacity .5s ease;
	transition: opacity .5s ease;
	}
			
#nav li:hover > a.submenu:after {
	opacity:.2;-webkit-transition: opacity .5s ease;
	-moz-transition: opacity .5s ease;
	-o-transition: opacity .5s ease;
	transition: opacity .5s ease;
	}

			/* first level */

#nav > ul	{
	height: 100%;
	float: right;
	}
				
#nav > ul > li {
	height: 100%;
	float: left;
	position:relative;
	display: inline-block;
	}
	
#nav > ul > li > a,
#nav ul.level_1 li span.active,
#nav ul.level_1 li span.forward,
#nav ul.level_1 li strong.active,
#nav ul.level_1 li strong.forward{
	height: 100%;
	padding: 0 3rem 0 3rem;
	font-size: 1.3rem;
	line-height: 8rem;
	text-align: center;
	}
						
#nav > ul > li:hover > a,
#nav > ul:not( :hover ) > li.active > a,
#nav ul.level_1 li.trail {
	color: #fff;
	}
						
#nav ul.level_1 li.trail a {
	color: #fff;
	}
				
		/* second level */

#nav li ul {
	visibility: hidden;
	position: absolute;
	top: -5%;
	width:17em;
	opacity: 0;
    filter: alpha(opacity=0);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
	}

#nav li:hover ul {
	visibility: visible;
	display: block;
	right:0;
	left: 0;
	top:100%;
	opacity: 1;
	-webkit-transition: opacity 0.4s;
    -moz-transition: opacity 0.4s;
    -o-transition: opacity 0.4s;
    transition: opacity 0.4s;
    filter: alpha(opacity=100);
    -webkit-box-shadow: 6px 6px 40px -10px rgba(0,0,0,0.75);
	-moz-box-shadow: 6px 6px 40px -10px rgba(0,0,0,0.75);
	box-shadow: 6px 6px 40px -10px rgba(0,0,0,0.75);
	}
					
#nav li.last:hover ul {
	right:0;
	left:auto;
	}
						
#nav li ul.level_2 a,
#nav ul.level_2 li span.active,
#nav ul.level_2 li span.forward,
#nav ul.level_2 li strong.active,
#nav ul.level_2 li strong.forward{
	display: block;
	line-height: 1em;
	text-align:left;
	font-size: 16px;
	font-color: #fff;
	padding: 1.5em;
	color: #fff;
	}
	
#nav ul.level_2 li.submenu.trail {

	}
						
#nav li ul li a:hover,
#nav li ul:not( :hover ) li.active a,
#nav ul li.active {
	position:relative;
	color:#fff;
	cursor: pointer;
	}
				
		/* third level */
				
#nav ul.level_2 li ul.level_3 {
	visibility: hidden;
	left: -80%;
	top:0;
	opacity: 0;
	}
						
#nav ul.level_2 li:hover ul.level_3 {
	visibility: visible;
	position: absolute;
	top:0;
	left: -100%;
	width: 17em;
	-webkit-transition: opacity 0.6s, 0.2s;
	-moz-transition: opacity 0.6s, 0.2s;
	-o-transition: opacity left 0.6s, 0.2s;
	transition: opacity 0.6s, 0.2s;
	opacity: 1;
	}