/* Mobile Navigation */
body.no-scroll{
  overflow: hidden;
}

/* Toggles */
*[toggle-nav]{
  background-color: #fff;
  width: 55px;
  height: 55px;
  right: 0;
  top: 0;

  text-align: center;
  display: none;
  position: absolute;
  overflow: hidden;
  margin: 0;
  padding: 0;
  font-size: 0;
  text-indent: -9999px;
  appearance: none;
  box-shadow: none;
  border-radius: none;
  border: none;
  cursor: pointer;
  transition: background 0.3s;
  z-index: 999;
}
*[toggle-nav]:focus {
  outline: none;
}
.hamburger-icon span {
  top: 25px;
  left: 9px;
  right: 9px;
  height: 4px;
  background: #fff;

  display: block;
  position: absolute;
  transition: background 0s 0.3s;
}
.hamburger-icon span::before,
.hamburger-icon span::after {
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #fff;

  position: absolute;
  display: block;
  content: "";
  transition-duration: 0.3s, 0.3s;
  transition-delay: 0.3s, 0s;
}
.hamburger-icon span::before {
  top: -10px;
  transition-property: top, transform;
}
.hamburger-icon span::after {
  bottom: -10px;
  transition-property: bottom, transform;
}
/* active state, i.e. menu open */
.mobile-menu *[toggle-nav] {
  background-color: #fff;
}
.mobile-menu .hamburger-icon span {
  background: none;
}
.mobile-menu .hamburger-icon span::before {
  top: 0;
  transform: rotate(45deg);
}
.mobile-menu .hamburger-icon span::after {
  bottom: 0;
  transform: rotate(-45deg);
}
/* Mobile Menu X */
.mobile-menu .hamburger-icon span::before,
.mobile-menu .hamburger-icon span::after {
  background: #444;
  transition-delay: 0s, 0.3s;
}


[full-menu] i.fa-chevron-down {
  display: none;
}

/* Toggled elements for mobile menu */
[mobile-menu-item]{
  display: none;
}
.mobile-menu [mobile-menu-item]{
  display: block;
}

/* Structure */
[full-menu] > nav,
[full-menu] > nav > ul {
  line-height: 50px;
}
[full-menu] > nav > ul{
  display: inline-block;
  text-align: left;
}
[full-menu] > nav ul > li{
  position: relative;
  display: block;
  float: left;
}
[full-menu] > nav > ul > li > a{
  display: block;
}
[full-menu] > nav ul li:hover > a,
[full-menu] > nav ul li.current-menu-item > a{
}

[full-menu] > nav ul > li ul{
  position: absolute;
  left: 0;
  max-height: 0;
  overflow: hidden;
  
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  -khtml-opacity: 0;
  opacity: 0;

  -webkit-transition: all 500ms;
  -moz-transition: all 500ms;
  -o-transition: all 500ms;
  transition: all 500ms;
}
[full-menu] > nav ul > li:hover ul{
  max-height: 100vh;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  -khtml-opacity: 1;
  opacity: 1;
}
[full-menu] > nav ul > li ul li{
  float: none;
}
[full-menu] > nav ul > li ul li a{
  display: block;

  -webkit-transition: all 800ms;
  -o-transition: all 800ms;
  transition: all 800ms;
}
[full-menu] > nav ul > li ul li a:hover{
}

/* When mobile nav is active */
.mobile-menu [full-menu]{
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  -khtml-opacity: 1;
  opacity: 1;
  -webkit-transform: translateX( 0 );
  -ms-transform: translateX( 0 );
  -o-transform: translateX( 0 );
  transform: translateX( 0 );
  -webkit-transition: all 400ms;
  -o-transition: all 400ms;
  transition: all 400ms;
}
.mobile-menu [full-menu] i.fa-chevron-down {
  display: inline-block;
}
.mobile-menu [full-menu] > nav{
  position: relative;
  right: auto;
  top: auto;
}

/**
 * Overlay when mobile nav is visible
 */
[full-menu-overlay]{
  background: #000;
  position: fixed;
  max-height: 0;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: -10;
  overflow: hidden;

  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  -khtml-opacity: 0;
  opacity: 0;
}
.mobile-menu [full-menu-overlay]{
  max-height: 100vh;
  z-index: 10;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
  filter: alpha(opacity=60);
  -moz-opacity: .6;
  -khtml-opacity: .6;
  opacity: .6;
}