/* --------------------------------------------
   HTML Reset
-------------------------------------------- */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  -webkit-text-size-adjust: none;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;

  
}



/* HEADER STYLES
*********************************/ 
header {width: 100%; position: fixed;top:0;clear: both; margin: 0; z-index:100; }
header hgroup { width:100%; margin: 0; background:#fff; height:45px;padding:0;opacity: .85;}
header hgroup .header_wrap { width:100%; margin: 0 auto; position:relative;  }
header #nav_wrap {right:0; width: 100%; position:absolute; top:0; overflow:hidden;z-index: 0; }
header #logo { margin: 0; padding: 2px 0 0 0; position:absolute; z-index:1000; width:auto; left:0; cursor: pointer;}
header .logo {text-transform: uppercase; color:#333;font-size: 16px; padding:8px 40px; letter-spacing: .05em; font-weight: bold; cursor: pointer;}

nav ul  {box-shadow: inset 0 2px 2px rgba(0,0,0,0.1);}




/* NAV STYLES
*********************************/ 

.menu-button{float:right;height:45px;cursor: pointer;}

.menu-container {
    display: inline-block;
    cursor: pointer;
	width: 100%;
	margin-top:7px;
}

.bar1, .bar2, .bar3 {
    width: 35px;
    height: 2px;
    background-color: #333;
    margin: 6px 40px;
    transition: 0.3s;
}

/* Rotate first bar */
.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-6px, 6px) ;
    transform: rotate(-45deg) translate(-6px, 6px) ;
}

/* Fade out the second bar */
.change .bar2 {
    opacity: 0;
}

/* Rotate last bar */
.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-6px, -5px) ;
    transform: rotate(45deg) translate(-6px, -5px) ;
}



/* 1st level menu */

[role='navigation'] {
	margin: 0;
	padding:20px 0 40px 0;
	width: 100%;
	float:none;
    background: #000;
	text-align:center;
	overflow:hidden;
	
}

[role='navigation']:after { /* clearfix */
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

.flexNav-touch [role='navigation'],
.flexNav-no-touch [role='navigation'] {	
	display: none;
}



[role='navigation'] .top-level a {
	position: relative;
	display:block;
	width:100%;
	margin: 0;
	letter-spacing: .1em;
	font-weight:300;
	text-transform:uppercase;font-size: 24px; text-align:center; color:#999; padding: 20px 0 0px; -webkit-transition: all 0.5s ease;
		 -moz-transition: all 0.3s ease;
		   -o-transition: all 0.3s ease;
		  -ms-transition: all 0.3s ease;
			  transition: all 0.3s ease;
	
	
}

[role='navigation'] .top-level a:hover {
	color:#f57f29;
}




[role='navigation'] .tertiary {
	display:none;
	
    
}



[role='navigation'] .current {
	
	text-decoration: none;
	font-weight: 700;
	
}

[role='navigation'] a.current {
	padding-right:0;
	color: #f57f29;

}
[role='navigation'] a.current:hover {color:#666;}


[role='navigation'] li a {
	display: block;
	color: #666;
	font-weight: 300;
}



.slide { 
	  transform: translateY(-200px);
	  animation: slide 0.8s ease forwards;
	}

.slide:nth-child(1)  {
	  animation-duration: 0.2s;
	
	}
.slide:nth-child(2)  {
	  animation-duration: 0.4s;
	}
.slide:nth-child(3)  {
	  animation-duration: 0.6s;
	}
.slide:nth-child(4)  {
	  animation-duration: 0.8s;
	}
.slide:nth-child(5)  {
	  animation-duration: 1.0s;
	}
.slide:nth-child(6)  {
	  animation-duration: 1.2s;
	}
.slide:nth-child(7)  {
	  animation-duration: 1.4s;
	}

	

	@keyframes slide {
	  to {
		transform: translateX(0);
	  }
	}


/* 2nd level menu */

[role='navigation'] li ul {
	width: 100%;
	position: relative;
	margin:0;
	padding:0;
}

[role='navigation'] li ul li {
	float: none;
	width: 100%;
	margin:0;
	padding:2px 0;	
}

[role='navigation'] .sub-menu {
	background:#dedede;
	padding:15px 30px 15px 0;
	opacity:1.0;
	

}





[role='navigation'] .sub-menu li a {
	font-size:14px;
	font-style:normal;
	color:#333;
	margin: 0;
	text-transform:uppercase;
	letter-spacing:.3em;
	opacity:1.0;
	background-image:url('../images/arrow_left_BlackOnWhite.png');
	background-repeat:no-repeat;
	background-size: 16px;
	background-position:right;
	padding:2px 25px;
}


[role='navigation'] .sub-menu li a:hover {
	color:#999;
}

[role='navigation'] .sub-menu li .current {
	font-weight: 700;

}