/*
  mmenu CSS
*/

//	Animations
html.mm-opened, body.leftMenu  {
  .mm-page, #mm-blocker, .mm-fixed-top, .mm-fixed-bottom, .mm-menu.mm-horizontal > .mm-panel {
    -webkit-transition: -webkit-transform 0.5s ease;
    transition: transform 0.5s ease;

  }
  .mm-page, #mm-blocker {
    left: 0%;
    top: 0;
    margin: 0;
    border: 0px solid rgba(0, 0, 0, 0);
  }
  &.mm-opening {
    .mm-page, #mm-blocker {
      border: 0px solid rgba(100, 100, 100, 0);
    }
  }
}


//	Generic classes
.mm-menu .mm-hidden {
	display: none;
}

//	Fixed elements
.mm-fixed-top,
.mm-fixed-bottom {
	position: fixed;
	left: 0;
}
.mm-fixed-top {
	top: 0;
}
.mm-fixed-bottom {
	bottom: 0;
}


//	Menu, submenus, items
html.mm-opened .mm-page, .mm-menu > .mm-panel {
  @include box-sizing(border-box);
}


// html/body
html.mm-opened {
  width: 100%;
  height: 100%;
  body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
  }
}

// page + blocker
html.mm-opened .mm-page {
	height: 100%;
	overflow: hidden;
	position: fixed;
	right:auto;
	left:auto;
}
html.mm-background .mm-page {
	background: inherit;
}
#mm-blocker {
	background: rgba(255, 255, 255, 0);
	opacity: 0;
	display: none;
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 9999;
}
html.mm-opened #mm-blocker,
html.mm-blocking #mm-blocker {
	display: block;
}


// menu
.mm-menu {
  &.mm-current {
    display: block;
  }
  background: inherit;
  overflow: hidden;
  //height: 100%;
  bottom:0;
  padding: 0;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  > .mm-panel {
    background: inherit;

    -webkit-overflow-scrolling: touch;
    overflow: scroll;
    overflow-x: hidden;

    width: 100%;
    height: 100%;
    padding:  $menu-padding * 2;
    position: absolute;
    top: 0;
    z-index: 0;

    @include transform(translate3d(100%, 0, 0));

    &.mm-opened {
      @include transform(translate3d(0, 0, 0));
    }
    &.mm-subopened {
      @include transform(translate3d(-$menu-sub-offset, 0, 0));
    }
    &.mm-highest {
      z-index: 1;
    }
    &.mm-hidden {
      display: block;
      visibility: hidden;
    }
  }
}


//	Lists
.mm-menu {
  > .mm-list {
    padding: ( $menu-btn-size / 2 ) 0 $menu-btn-size 0;
  }
  .mm-list {
    padding: ( $menu-btn-size / 2 ) 0;
  }
}

.mm-panel > .mm-list {
  margin-left: -$menu-padding;
  margin-right: -$menu-padding;
  &:first-child {
    padding-top: 0;
  }
}


.mm-list {
  list-style: none;
  display: block;
  padding: 0;
  margin: 0;
  margin-right: 33px;
  > li {
    list-style: none;
    display: block;
    padding: 0;
    margin: 0;
    margin-right: 33px;
  }
  * {
    -webkit-text-size-adjust: none;
    font-size: $menu-font-size;

    text-shadow: none;
  }
  a , span{
    text-decoration: none;
    font-family: $menu-font;
    &:hover {
      text-decoration: none;
    }
    &.mm-subopen {
      width: $menu-btn-size ;
      height: 100%;
      padding: 0;
      position: absolute;
      right: 0;
      top: 0;
      z-index: 2;
      &::before {
        content: '';
        border-left-width: 1px;
        border-left-style: solid;
        display: block;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
      }
      &.mm-fullsubopen {
        width: 100%;
        &:before {
          border-left: none;
        }
      }
    }
    &.mm-subclose {
      text-indent: 20px;
      margin-top: 0px;
    }
    &.mm-subopen {
      + {
        a, span {
          padding-right: 45px;
        }
      }
      &:after {
        content: '';
        border: 2px solid transparent;
        display: block;
        width: 7px;
        height: 7px;
        margin-bottom: -3px;
        position: absolute;
        bottom: 50%;
        @include transform(rotate(-45deg));
      }
    }
    &.mm-subclose:before {
      content: '';
      border: 2px solid transparent;
      display: block;
      width: 7px;
      height: 7px;
      margin-bottom: -3px;
      position: absolute;
      bottom: 50%;
      @include transform(rotate(-45deg));
    }
    &.mm-subopen:after {
      border-top: none;
      border-left: none;
      right: 18px;
    }
    &.mm-subclose:before {
      border-right: none;
      border-bottom: none;
      left: 22px;
    }
  }
  > li {
    position: relative;
    > {
      a, span {
        @include text-overflow();
        color: inherit;
        line-height: 20px;
        display: block;
        padding: 12px 10px 12px 20px;
        margin: 0;
        &.mmLogo{ // New in v1.1.3
          padding: 0px;
        }
      }
    }
    &:not(.mm-subtitle):not(.mm-label):not(.mm-noresults) {
      &::after {
        content: '';
        border-bottom-width: 1px;
        border-bottom-style: solid;
        display: block;
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
      }
      &:after {
        width: auto;
        margin-left: -20px;
        position: relative;
        left: auto;
      }
    }
  }
  > li {
    &.mm-selected > a {
      &.mm-subopen {
        background: transparent;
        + {
          a, span {
            padding-right: 5px;
            margin-right: 40px;
          }
        }
      }
      &.mm-fullsubopen + {
        a, span {
          padding-right: $menu-btn-size + ( $menu-padding / 2 );
          margin-right: 0;
        }
      }
    }
    // Labels
    &.mm-label {
      font-size: 10px;
      font-family: $font-arial;
      text-transform: uppercase;
      text-indent: 20px;
      line-height: 25px;
      &.label-lg {
        font-size: $font-size-small;
        font-weight: 700;
        
        text-transform: uppercase;
        text-indent: 20px;
        line-height: 45px;
      }
    }
    i.label {
      font-size: 10px;
      font-family: $font-arial;
      font-style: normal;
    }
  }
}

.isMobile .mm-list,
.isMobile .mm-list > li {
	margin-right:0;
}



// vertical submenu
.mm-menu.mm-vertical .mm-list {
  margin-right: 0;
  li.mm-opened > .mm-list {
    margin-right: -33px;
  }
  .mm-panel {
    visibility: hidden;
    padding: 10px 0 20px 20px;
    position: absolute;
    opacity: 0;
    @include transform(translate3d(0, -10%, 0));
    @include transition (all 0.25s);
    li:last-child:after {
      border-color: transparent;
    }
  }
  li.mm-opened > .mm-panel {
    display: block;
    visibility: visible;
    position: relative;
    opacity: 1;
    @include transform(translate3d(0, 0, 0));
  }
  > li {
    &.mm-opened {
      > a.mm-subopen {
        height: $menu-btn-size;
      }
      > a.mm-subopen:after {
        @include transform(rotate(-315deg));
      }
    }
    > a.mm-subopen:after {
      @include transform(rotate(-255deg));
      @include transition (all 0.25s);
      top: 16px;
      right: 16px;
    }
  }
}

html.mm-opened .mm-page {
/*	box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); */
}


// Menu color
.mm-menu {
  color: rgba(255, 255, 255, 0.6);
  .mm-list {
    > li {
      a, span {
        @include transition (all 0.25s);
      }
      &:after {
        border-color: rgba(0, 0, 0, 0.15);
      }
      > a {
        &.mm-subclose {
          background: rgba(0, 0, 0, 0.1);
          color: rgba(255, 255, 255, 0.3);
        }
        &.mm-subopen:after, &.mm-subclose:before {
          border-color: rgba(255, 255, 255, 0.3);
        }
        &.mm-subopen:before {
          border-color: rgba(0, 0, 0, 0.15);
        }
      }
      &:hover > {
        a, span {
          background: rgba(0, 0, 0, 0.1);
        }
      }
      &.mm-selected > {
        a, span {
          background: rgba(0, 0, 0, 0.1);
        }
      }
    }
    li.mm-label {
      background: rgba(255, 255, 255, 0.05);
    }
  }
  &.mm-vertical .mm-list li.mm-opened > {
    a.mm-subopen, ul {
      background: rgba(255, 255, 255, 0.05);
    }
  }
}


// Menu width
.mm-menu {
	width: $menu-left-size + 50px;
}


// Menu width mobile fix
.isMobile .mm-menu {
	width: $menu-left-size;
}


html.mm-opened.mm-opening {
  #mm-blocker {
    left: 0;
    @include transform(translate3d($menu-left-size, 0, 0));
  }
  .mm-page {
    left: 0;
    @include transform(translate3d($menu-left-size - $left-menu-show, 0, 0));
  }
}

@media all and (max-width: 550px) {
  .mm-menu {
    display: none;
  }
  html.mm-opened.mm-opening {
    .mm-page, #mm-blocker {
      left: 0;
      @include transform(translate3d($menu-left-size, 0, 0));
    }
  }
}


//	Bugfix for browsers without support for overflowscrolling
html.mm-nooverflowscrolling.mm-opened {
  height: auto;
  overflow: auto;
  overflow-x: hidden;
  overflow-y: scroll;
  body {
    overflow: auto;
  }
  .mm-page {
    min-height: 1000px;
    position: fixed;
  }
  .mm-menu {
    height: auto;
    min-height: 1000px;
    overflow: auto;
    overflow-x: hidden;
    position: relative;
    left: auto;
    top: auto;
  }
  > .mm-panel {
    position: relative;
    height: auto;
    display: none;
    left: 0;
    &.mm-current {
      display: block;
    }
  }
}



//counters
em.mm-counter {
  font-style: normal;
  text-indent: 0;
  display: block;
  margin-top: -10px;
  position: absolute;
  right: 40px;
  top: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  height: $menu-btn-size/2;
  line-height: $menu-btn-size /2;
  min-width: $menu-btn-size/2;
  padding: 0 7px;
  border-radius: 2px;
  + a {
    &.mm-subopen {
      padding-left: $menu-btn-size;
      + {
        a, span {
          padding-right: $menu-btn-size * 2;
        }
      }
    }
    &.mm-fullsubopen {
      padding-left: 0;
    }
  }
}


// vertical submenu
.mm-vertical li.mm-selected > em.mm-counter + a.mm-subopen + {
  a, span {
    margin-right: 75px;
  }
}


// Search
.mm-nosubresults > em.mm-counter {
  display: none;
}

.mm-menu em.mm-counter {
  color: rgba(255, 255, 255, 0.4);
  font-size: 10px;
  font-weight: 700;
}



// header

$menu-header-height: 60px;
$menu-header-padding-top: $menu-header-height / 2;

.mm-header {
  @include box-sizing(border-box);
  -webkit-text-size-adjust: none;
  font-size: $font-size-large;
  text-shadow: none;
  background: inherit;
  border-bottom: 1px solid transparent;
  text-align: center;
  line-height: $menu-padding * 2;
  width: 100%;
  height: $menu-header-height;
  padding: $menu-header-padding-top ($menu-btn-size + 50px) 0 $menu-btn-size;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  span {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    width: 100%;
    position: relative;
    z-index: 1;
  }
  a {
    @include box-sizing(border-box);
    text-decoration: none;
    display: block;
    width: $menu-btn-size;
    height: 100%;
    position: absolute;
    bottom: 0;
    &:before {
      content: '';
      border: 2px solid transparent;
      display: block;
      width: 7px;
      height: 7px;
      margin-bottom: -5px;
      position: absolute;
      bottom: 50%;
      @include transform(rotate(-45deg));
      margin-bottom: -15px;
    }
    &.mm-prev {
      left: 0;
      &:before {
        border-right: none;
        border-bottom: none;
        left: 22px;
      }
    }
    &.mm-next {
      right: 0;
      &:before {
        border-top: none;
        border-left: none;
        right: 18px;
      }
    }
  }
}


// header mobile fix
.isMobile .mm-header {
  padding: $menu-header-padding-top $menu-btn-size 0 $menu-btn-size;
}




.mm-hassearch .mm-header {
	height: $menu-btn-size + $menu-padding;
	padding-top: $menu-padding * 2;
	top:  $menu-btn-size + $menu-padding;
}
.mm-hassearch .mm-header a:before {
	margin-bottom: -10px;
}
.mm-menu.mm-hasheader li.mm-subtitle {
	display: none;
}
.mm-menu.mm-hasheader .mm-panel {
	padding-top: 80px;
}
.mm-menu.mm-hasheader.mm-hassearch .mm-panel {
	padding-top: 120px;
}
.mm-menu.mm-hasheader.mm-ismenu .mm-panel {
	padding-top: 60px;
}
.mm-menu.mm-hasheader.mm-ismenu.mm-hassearch .mm-panel {
	padding-top: 100px;
}
.mm-menu .mm-header {
	border-color: rgba(0, 0, 0, 0.15);
	color: rgba(255, 255, 255, 0.3);
}
.mm-menu .mm-header a:before {
	border-color: rgba(255, 255, 255, 0.3);
}



.mm-search {
  @include box-sizing(border-box);
  input {
    @include box-sizing(border-box);
    -webkit-text-size-adjust: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    text-shadow: none;
    border: none;
    border-radius: 2px;
    line-height: 30px;
    outline: none;
    display: block;
    width: 100%;
    height: 30px;
    margin: 0;
    padding: 0 10px;
    opacity: 0;
    @include transform(translateX(30%));
    @include transition (all 0.4s);
  }
  background: inherit;
  height: $header-heigth;
  padding: $menu-padding;
  padding-right: 60px;
  border-bottom: 5px rgba(0, 0, 0, 0.1) solid;
  position: relative;
  top: 0;
  z-index: 2;
}

.mm-opening .mm-search input ,
.leftMenu .mm-search input {
  opacity: 1;
  @include transform(translateX(0%));
}

.mm-menu {
  li {
    &.mm-nosubresults > a.mm-subopen {
      display: none;
      + {
        a, span {
          padding-right: 10px;
        }
      }
    }
    &.mm-noresults {
      color: rgba(255, 255, 255, 0.3);
      text-align: center;
      font-size: 20px;
      display: none;
      padding-top: 80px;
      &:after {
        border: none;
      }
    }
  }
  &.mm-noresults li.mm-noresults {
    display: block;
  }
  &.mm-hassearch .mm-panel {
    padding-top: $header-heigth;
  }
  .mm-search input {
    background: rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.6);
  }
}


.isMobile .mm-search  {
	padding-right:10px;
}

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////			POSITION RIGTH			//////////////////////////////////////////////////////////// */
/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

html.mm-right.mm-opened {
  .mm-menu.mm-right {
    display: block;
  }
  .mm-page, #mm-blocker {
    left: auto;
    right: 0%;
  }
  &.mm-opening {
    .mm-page, #mm-blocker {
      left: auto;
    }
    .mm-page, #mm-blocker {
      @include transform(translate3d(-$menu-right-size, 0, 0));
    }
  }
}


.mm-menu.mm-right {
  width: $menu-right-size + 50px;
  right: -50px;
  left: auto;
  .mm-search input {
    margin-left: 0;
    @include transform(translateX(-30%));
  }
}

.mm-opening .mm-menu.mm-right .mm-search input {
  @include transform(translateX(0%));
}

.isMobile .mm-menu.mm-right {
  width: $menu-right-size;
  right: 0;
}

@media all and (max-width: 550px) {
  .mm-menu.mm-right {
    width: $menu-right-size;
    //display: none;
  }
  .isMobile .mm-menu.mm-right {
    width: 250px;
    right: 0;
  }
  html.mm-right.mm-opened.mm-opening {
    #mm-blocker {
      right: auto;
      @include transform(translate3d(-250px, 0, 0));
    }
    .mm-page {
      right: auto;
      @include transform(translate3d(-250px, 0, 0));
    }
  }
}
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////			POSITION NEXT			//////////////////////////////////////////////////////////// */
/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.mm-menu {
  &.mm-next {

    @include transition (none 0.5s ease);
    -webkit-transition-property: top, right, bottom, left, -webkit-transform;
    -moz-transition-property: top, right, bottom, left, -moz-transform;
    -ms-transition-property: top, right, bottom, left, -o-transform;
    -o-transition-property: top, right, bottom, left, -ms-transform;
    transition-property: top, right, bottom, left, transform;
    left: -80%;
  }
  &.mm-right {
    &.mm-front {
      right: -($menu-right-size + 50px);
    }
    &.mm-next {
      right: -($menu-right-size + 50px);
      left: auto;
    }
  }
}

html {
  &.mm-opened.mm-next .mm-page {
    box-shadow: none;
  }
  &.mm-opening .mm-menu {
    &.mm-next {
      left: 0%;
    }
    &.mm-right.mm-next {
      left: auto;
      right: 0%;
    }
  }
}

@media all and (min-width: 550px) {
.mm-menu.mm-right.mm-front,
.mm-menu.mm-right.mm-next {
/*	right: -350px;*/
  @include transform(translate3d(50px, 0, 0 ));
}
}


/*		
////////////////////////////////////////////////////////////////
//////////     TOGGLE MENU      ///////////////
////////////////////////////////////////////////////////////
*/

html {
  .toggle-menu {
    background-color: transparent;
    cursor: pointer;
    height: 100%;
    left: 0px;
    position: fixed;
    top: 0;
    width: $left-menu-show;
    z-index: 100;
  }
  &.mm-opened .toggle-menu {
    @include transform(translate3d(-100%, 0, 0));
  }
  .leftMenu .toggle-menu {
    display:none;
  }
}

// New in v1.1.3
body.leftMenu{ 
  .toggle-menu {
    display:none;
  }
  &.in{
    .toggle-menu {
      display:block;
    }
  }
  .mm-menu:not(.mm-right){
    top:$header-heigth;
    .mm-panel {
      //padding-top: $header-heigth;
    }
    .mm-list{
      padding-top:0;
    }
    &.mm-hassearch .mm-panel {
      padding-top: $header-heigth;
    }
  }
}

@media (max-width: 991px) {
  // New in v1.1.3
  body.leftMenu{ 
    .toggle-menu {
      display:block;
    }
  }
}

/*		
////////////////////////////////////////////////////////////////
//////////     MENU  COLOR     ///////////////
////////////////////////////////////////////////////////////
*/
.mm-ismenu {
  background: $menu-bg-off-canvas;
}

.mm-page {
  right: 0;
  left: 0;
  @include transform(translate3d(0, 0, 0));
  // #header {
  //   left: 0;
  // }
}

.mm-menu {
  .icon {
    font-size:$menu-icon-size;
    width: 17px;
    height: 17px;
    text-align: center;
    margin: 0 15px 0 -2px;
    line-height: 17px;
    color: rgba(255, 255, 255, 0.3);
  }
  &.mm-right .icon {
    margin: 0 5px 0 -2px;
  }
  li.img a {
    font-size: $menu-font-size;
    img {
      float: left;
      margin: -5px 10px -5px 0;
    }
    small {
      font-size: ($menu-font-size - 2px);
    }
  }
}