.dl-menuwrapper {
  width: 100%;
  float: left;
  position: relative;
  -webkit-perspective: 1000px;
  perspective: 1000px;
  -webkit-perspective-origin: 50% 200%;
  perspective-origin: 50% 200%;
  z-index: 9;
  ul {
    padding: 0;
    list-style: none;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
  }
  .dl-subview{
    li.dl-subviewopen,
    li.dl-subviewopen,
    li.dl-subview,
    .dl-submenu{
      border: none;
    }
  }
  li {
    position: relative;
    &:first-child{
      border-top: none;
    }
    a {
      display: block;
      position: relative;
      padding: 12px 30px;
      line-height: 30px;
      .mm-text{
        display: block;
      }
      .mm-desc {
        font-size: 12px;
        line-height: normal;
      }
      .mm-icon{
        width: 30px;
        font-size: 18px;
        margin-left: -10px;
        vertical-align: middle;
        &[class*="la-icon-"]{
          vertical-align: top;
        }
      }
    }
    &.active > a{

    }
    &.dl-back{
      > a{
        text-align: right;
      }
    }
    > a:not(:only-child){
      &:after{
        font-family: FontAwesome;
        content: "\f105";
        position: absolute;
        right: 20px;
        top: 12px;
        font-size: 16px;
      }
    }
    &.dl-back > a{
      &:before{
        font-family: FontAwesome;
        content: "\f177";
        float: left;
      }
    }
    .dl-submenu {
      display: none;
    }
  }

  .dl-menu {
    margin: 0;
    position: absolute;
    width: 100%;
    opacity: 0;
    pointer-events: none;
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    &.dl-menu-toggle {
      transition: all 0.3s ease;
      -webkit-transition: all 0.3s ease;
    }
    &.dl-menuopen {
      opacity: 1;
      pointer-events: auto;
      -webkit-transform: translateY(0px);
      transform: translateY(0px);
    }
  }

  > .dl-submenu{
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    margin: 0;
  }
}
.dl-menu{
  &.dl-subview{
    li{
      &,
      &.dl-subviewopen > a,
      &.dl-subview > a{
        display: none;
      }

      &.dl-subview,
      &.dl-subview .dl-submenu,
      &.dl-subviewopen,
      &.dl-subviewopen > .dl-submenu,
      &.dl-subviewopen .dl-submenu > li{
        display: block;
      }
    }
  }
}

/* No JS Fallback */
.no-js{
  .dl-menuwrapper {
    .dl-menu {
      position: relative;
      opacity: 1;
      -webkit-transform: none;
      transform: none;
    }
    li {
      .dl-submenu {
        display: block;
      }
      &.dl-back {
        display: none;
      }
      > a:not(:only-child) {
        &:after {
          content: '';
        }
      }
    }
  }
}

/* Animation classes for moving out and in */
.dl-menu{

  // Effect 01
  &.dl-animate-out-1 {
    -webkit-animation: MenuAnimOut1 0.4s;
    animation: MenuAnimOut1 0.4s;
  }
  &.dl-animate-in-1 {
    -webkit-animation: MenuAnimIn1 0.4s;
    animation: MenuAnimIn1 0.4s;
  }

  // Effect 02
  &.dl-animate-out-2 {
    -webkit-animation: MenuAnimOut2 0.3s ease-in-out;
    animation: MenuAnimOut2 0.3s ease-in-out;
  }
  &.dl-animate-in-2 {
    -webkit-animation: MenuAnimIn2 0.3s ease-in-out;
    animation: MenuAnimIn2 0.3s ease-in-out;
  }

  // Effect 03
  &.dl-animate-out-3 {
    -webkit-animation: MenuAnimOut3 0.4s ease;
    animation: MenuAnimOut3 0.4s ease;
  }
  &.dl-animate-in-3 {
    -webkit-animation: MenuAnimIn3 0.4s ease;
    animation: MenuAnimIn3 0.4s ease;
  }

  // Effect 04
  &.dl-animate-out-4 {
    -webkit-animation: MenuAnimOut4 0.4s ease;
    animation: MenuAnimOut4 0.4s ease;
  }
  &.dl-animate-in-4 {
    -webkit-animation: MenuAnimIn4 0.4s ease;
    animation: MenuAnimIn4 0.4s ease;
  }

  // Effect 05
  &.dl-animate-out-5 {
    -webkit-animation: MenuAnimOut5 0.4s ease;
    animation: MenuAnimOut5 0.4s ease;
  }
  &.dl-animate-in-5 {
    -webkit-animation: MenuAnimIn5 0.4s ease;
    animation: MenuAnimIn5 0.4s ease;
  }
}

.dl-menuwrapper > .dl-submenu.dl-animate-in-1 {
  -webkit-animation: SubMenuAnimIn1 0.4s ease;
  animation: SubMenuAnimIn1 0.4s ease;
}

.dl-menuwrapper > .dl-submenu.dl-animate-in-2 {
  -webkit-animation: SubMenuAnimIn2 0.3s ease-in-out;
  animation: SubMenuAnimIn2 0.3s ease-in-out;
}

.dl-menuwrapper > .dl-submenu.dl-animate-in-3 {
  -webkit-animation: SubMenuAnimIn3 0.4s ease;
  animation: SubMenuAnimIn3 0.4s ease;
}

.dl-menuwrapper > .dl-submenu.dl-animate-in-4 {
  -webkit-animation: SubMenuAnimIn4 0.4s ease;
  animation: SubMenuAnimIn4 0.4s ease;
}

.dl-menuwrapper > .dl-submenu.dl-animate-in-5 {
  -webkit-animation: SubMenuAnimIn5 0.4s ease;
  animation: SubMenuAnimIn5 0.4s ease;
}

.dl-menuwrapper > .dl-submenu.dl-animate-out-1 {
  -webkit-animation: SubMenuAnimOut1 0.4s ease;
  animation: SubMenuAnimOut1 0.4s ease;
}

.dl-menuwrapper > .dl-submenu.dl-animate-out-2 {
  -webkit-animation: SubMenuAnimOut2 0.3s ease-in-out;
  animation: SubMenuAnimOut2 0.3s ease-in-out;
}

.dl-menuwrapper > .dl-submenu.dl-animate-out-3 {
  -webkit-animation: SubMenuAnimOut3 0.4s ease;
  animation: SubMenuAnimOut3 0.4s ease;
}

.dl-menuwrapper > .dl-submenu.dl-animate-out-4 {
  -webkit-animation: SubMenuAnimOut4 0.4s ease;
  animation: SubMenuAnimOut4 0.4s ease;
}

.dl-menuwrapper > .dl-submenu.dl-animate-out-5 {
  -webkit-animation: SubMenuAnimOut5 0.4s ease;
  animation: SubMenuAnimOut5 0.4s ease;
}

@-webkit-keyframes MenuAnimOut1 {
  0% { }
  50% {
    -webkit-transform: translateZ(-250px) rotateY(30deg);
  }
  75% {
    -webkit-transform: translateZ(-372.5px) rotateY(15deg);
    opacity: .5;
  }
  100% {
    -webkit-transform: translateZ(-500px) rotateY(0deg);
    opacity: 0;
  }
}

@-webkit-keyframes MenuAnimOut2 {
  0% { }
  100% {
    -webkit-transform: translateX(-100%);
    opacity: 0;
  }
}

@-webkit-keyframes MenuAnimOut3 {
  0% { }
  100% {
    -webkit-transform: translateZ(300px);
    opacity: 0;
  }
}

@-webkit-keyframes MenuAnimOut4 {
  0% { }
  100% {
    -webkit-transform: translateZ(-300px);
    opacity: 0;
  }
}

@-webkit-keyframes MenuAnimOut5 {
  0% { }
  100% {
    -webkit-transform: translateY(40%);
    opacity: 0;
  }
}

@keyframes MenuAnimOut1 {
  0% { }
  50% {
    -webkit-transform: translateZ(-250px) rotateY(30deg);
    transform: translateZ(-250px) rotateY(30deg);
  }
  75% {
    -webkit-transform: translateZ(-372.5px) rotateY(15deg);
    transform: translateZ(-372.5px) rotateY(15deg);
    opacity: .5;
  }
  100% {
    -webkit-transform: translateZ(-500px) rotateY(0deg);
    transform: translateZ(-500px) rotateY(0deg);
    opacity: 0;
  }
}

@keyframes MenuAnimOut2 {
  0% { }
  100% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    opacity: 0;
  }
}

@keyframes MenuAnimOut3 {
  0% { }
  100% {
    -webkit-transform: translateZ(300px);
    transform: translateZ(300px);
    opacity: 0;
  }
}

@keyframes MenuAnimOut4 {
  0% { }
  100% {
    -webkit-transform: translateZ(-300px);
    transform: translateZ(-300px);
    opacity: 0;
  }
}

@keyframes MenuAnimOut5 {
  0% { }
  100% {
    -webkit-transform: translateY(40%);
    transform: translateY(40%);
    opacity: 0;
  }
}

@-webkit-keyframes MenuAnimIn1 {
  0% {
    -webkit-transform: translateZ(-500px) rotateY(0deg);
    opacity: 0;
  }
  20% {
    -webkit-transform: translateZ(-250px) rotateY(30deg);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateZ(0px) rotateY(0deg);
    opacity: 1;
  }
}

@-webkit-keyframes MenuAnimIn2 {
  0% {
    -webkit-transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0px);
    opacity: 1;
  }
}

@-webkit-keyframes MenuAnimIn3 {
  0% {
    -webkit-transform: translateZ(300px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0px);
    opacity: 1;
  }
}

@-webkit-keyframes MenuAnimIn4 {
  0% {
    -webkit-transform: translateZ(-300px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0px);
    opacity: 1;
  }
}

@-webkit-keyframes MenuAnimIn5 {
  0% {
    -webkit-transform: translateY(40%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    opacity: 1;
  }
}

@keyframes MenuAnimIn1 {
  0% {
    -webkit-transform: translateZ(-500px) rotateY(0deg);
    transform: translateZ(-500px) rotateY(0deg);
    opacity: 0;
  }
  20% {
    -webkit-transform: translateZ(-250px) rotateY(30deg);
    transform: translateZ(-250px) rotateY(30deg);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateZ(0px) rotateY(0deg);
    transform: translateZ(0px) rotateY(0deg);
    opacity: 1;
  }
}

@keyframes MenuAnimIn2 {
  0% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
    opacity: 1;
  }
}

@keyframes MenuAnimIn3 {
  0% {
    -webkit-transform: translateZ(300px);
    transform: translateZ(300px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0px);
    transform: translateZ(0px);
    opacity: 1;
  }
}

@keyframes MenuAnimIn4 {
  0% {
    -webkit-transform: translateZ(-300px);
    transform: translateZ(-300px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0px);
    transform: translateZ(0px);
    opacity: 1;
  }
}

@keyframes MenuAnimIn5 {
  0% {
    -webkit-transform: translateY(40%);
    transform: translateY(40%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@-webkit-keyframes SubMenuAnimIn1 {
  0% {
    -webkit-transform: translateX(50%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0px);
    opacity: 1;
  }
}

@-webkit-keyframes SubMenuAnimIn2 {
  0% {
    -webkit-transform: translateX(100%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0px);
    opacity: 1;
  }
}

@-webkit-keyframes SubMenuAnimIn3 {
  0% {
    -webkit-transform: translateZ(-300px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0px);
    opacity: 1;
  }
}

@-webkit-keyframes SubMenuAnimIn4 {
  0% {
    -webkit-transform: translateZ(300px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0px);
    opacity: 1;
  }
}

@-webkit-keyframes SubMenuAnimIn5 {
  0% {
    -webkit-transform: translateZ(-200px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0);
    opacity: 1;
  }
}

@keyframes SubMenuAnimIn1 {
  0% {
    -webkit-transform: translateX(50%);
    transform: translateX(50%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
    opacity: 1;
  }
}

@keyframes SubMenuAnimIn2 {
  0% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
    opacity: 1;
  }
}

@keyframes SubMenuAnimIn3 {
  0% {
    -webkit-transform: translateZ(-300px);
    transform: translateZ(-300px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0px);
    transform: translateZ(0px);
    opacity: 1;
  }
}

@keyframes SubMenuAnimIn4 {
  0% {
    -webkit-transform: translateZ(300px);
    transform: translateZ(300px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0px);
    transform: translateZ(0px);
    opacity: 1;
  }
}

@keyframes SubMenuAnimIn5 {
  0% {
    -webkit-transform: translateZ(-200px);
    transform: translateZ(-200px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
  }
}

@-webkit-keyframes SubMenuAnimOut1 {
  0% {
    -webkit-transform: translateX(0%);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(50%);
    opacity: 0;
  }
}

@-webkit-keyframes SubMenuAnimOut2 {
  0% {
    -webkit-transform: translateX(0%);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(100%);
    opacity: 0;
  }
}

@-webkit-keyframes SubMenuAnimOut3 {
  0% {
    -webkit-transform: translateZ(0px);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(-300px);
    opacity: 0;
  }
}

@-webkit-keyframes SubMenuAnimOut4 {
  0% {
    -webkit-transform: translateZ(0px);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(300px);
    opacity: 0;
  }
}

@-webkit-keyframes SubMenuAnimOut5 {
  0% {
    -webkit-transform: translateZ(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(-200px);
    opacity: 0;
  }
}

@keyframes SubMenuAnimOut1 {
  0% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(50%);
    transform: translateX(50%);
    opacity: 0;
  }
}

@keyframes SubMenuAnimOut2 {
  0% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    opacity: 0;
  }
}

@keyframes SubMenuAnimOut3 {
  0% {
    -webkit-transform: translateZ(0px);
    transform: translateZ(0px);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(-300px);
    transform: translateZ(-300px);
    opacity: 0;
  }
}

@keyframes SubMenuAnimOut4 {
  0% {
    -webkit-transform: translateZ(0px);
    transform: translateZ(0px);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(300px);
    transform: translateZ(300px);
    opacity: 0;
  }
}

@keyframes SubMenuAnimOut5 {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(-200px);
    transform: translateZ(-200px);
    opacity: 0;
  }
}



.site-header-mobile{
  display: none;
  .header-component-inner{
    @include single-transition(padding);
  }
  .header-component-outer{
    float: left;
  }
  .header-component-outer_2{
    float: right;
  }
  .site-branding{
    img{
      max-height: 80%;
      position: absolute;
      top: 50%;
    }
  }
  .header-main{
    position: relative;
  }
  .mobile-menu-wrap {
    position: absolute;
    width: 100%;
    top: 100%;
    z-index: 9;
    left: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    text-transform: uppercase;
    .open-mobile-menu &{
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      -webkit-transform: translateY(0px);
      transform: translateY(0px);
    }
  }
  .site-header-inner {
    width: 100%;
  }
  .la_com_action--dropdownmenu li a{
    padding: 10px 20px;
  }
}


body.open-mobile-menu{
  overflow: hidden;
  .la-overlay-global {
    visibility: visible;
    opacity: 0.7;
    z-index: 3;
    transition: none;
    -webkit-transition: none;
  }
  .mobile-menu-wrap{
    .dl-menu{
      max-height: 75vh;
      overflow: auto;
    }
  }
}

.header-mb-v1{
  .site-header-mobile{
    .site-branding {
      img {
        left: 50%;
        @include translate2d(-50%,-50%);
        -webkit-transform: translate(-webkit-calc(-50% + 1px), -webkit-calc(-50% + 1px));
      }
    }
    .header-component-outer_logo{
      width: 40%;
      left: 30%;
    }
    .header-component-outer_1{
      width: 30%;
      position: relative;
      left: -40%;
    }
    .header-component-outer_2{
      max-width: 30%;
    }
  }
}

.header-mb-v2{
  .site-header-mobile{
    .site-branding {
      img {
        @include translate2d(0,-50%);
        -webkit-transform: translate(0, -webkit-calc(-50% + 1px));
      }
    }
    .header-component-outer_1{
      float: right;
    }
  }
}

.header-mb-v3{
  .site-header-mobile{
    .site-branding {
      img {
        right: 0;
        @include translate2d(0,-50%);
        -webkit-transform: translate(0, -webkit-calc(-50% + 1px));
      }
    }
    .header-component-outer_logo{
      float: right;
    }
  }
}

.header-mb-v4{
  .site-header-mobile{
    .site-branding {
      img {
        left: 50%;
        @include translate2d(-50%,-50%);
        -webkit-transform: translate(-webkit-calc(-50% + 1px), -webkit-calc(-50% + 1px));
      }
    }
    .header-component-outer_logo{
      width: 100%;
      position: relative;
    }
  }
}