/* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- *\
dlMenu Style
\* --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */
@import '_dlMenu__anim.scss';
@font-face {
  font-family: 'icomoon';
  src:url('../fonts/icomoon.eot');
  src:url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
  url('../fonts/icomoon.woff') format('woff'),
  url('../fonts/icomoon.ttf') format('truetype'),
  url('../fonts/icomoon.svg#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

.m-menuWrapper{
  @extend %clearFix;
  margin-bottom: 16px; height: 48px; background-color: #000000;
  .mobilText{
    line-height: 44px; font-size: 20px; color: white; font-weight: bold; text-transform: uppercase; padding-left: 5%; float: left;
    @media #{$mq-tab_720} {
      display: none;
    }
  }
}

/* >> dlMenu > mobilMenu Style
--- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */
.dl-menuwrapper{font-family: $titleFont;font-weight: 100; width: 100%; float: left; position: relative; -webkit-perspective: 1000px; perspective: 1000px; -webkit-perspective-origin: 50% 200%; perspective-origin: 50% 200%; text-align: right;}

.dlMenu__mobilMenu{@include transition(); display: block; background-color: transparent;
  @include selectDisable;
  min-height: 50px; width: 100%; z-index: 99;position: relative; top: 0; right: 0;
  a{
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent; /* For some Androids */
  }
  .dl-menuwrapper{
    button{
      position: relative; right: 8px; top: 3px; width: 44px; height: 44px; padding: 0; background-color: $color-primary; background-image: url("../images/bg-mobilMenu.svg"); background-repeat: no-repeat; background-position: center center; background-size: 34px 34px; border: none; overflow: hidden; cursor: pointer; outline: none; z-index: 10; text-indent: -900em; margin: 0;
    }
    ul{background-color: $color-darkBlue;}
  }
  @media #{$mq-iPad_land} {
    display: none;
  }
}

.dl-menuwrapper ul{padding: 0; list-style: none; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; text-align: center;}
.dl-menuwrapper li{position: relative; text-align: center; border-bottom: 1px solid lighten($color-darkBlue,9%)}
.dl-menuwrapper li a{
  display: block; position: relative; padding:0.75rem 0.5rem; font-size: 1.2rem; color: white; font-weight: 700; text-transform: uppercase; outline: none; cursor: pointer; text-decoration: none; line-height: 1.3;
  @media #{$mq-iPad_land} {
    display: inline-block; padding: 0.35rem 0.75rem;  font-size: 1.2rem;
  }
}

/*.no-touch .dl-menuwrapper li a:hover {color: $color-green;}*/
.no-touch .dl-menuwrapper li:first-child > a{border-top: none;}
.dl-menuwrapper li.dl-back > a {padding-left: 30px; color:white; background-color: darken($color-primary,3%);}
.dl-menuwrapper li.dl-back:after,
.dl-menuwrapper li > a:not(:only-child):after { content: "\e000"; position: absolute; top: 0; height: 100%; font-size: 11px; line-height: 44px; font-family: 'icomoon'; speak: none; -webkit-font-smoothing: antialiased; color:white;}
.dl-menuwrapper li.dl-back:after {left: 10px; color: white; -webkit-transform: rotate(180deg); transform: rotate(180deg);}
.dl-menuwrapper li > a:after {right: 10px; color: rgba(255,255,255,0.6);}
.dl-menuwrapper .dl-menu {margin: 0; position: absolute; width: 100%; opacity: 0; pointer-events: none;	-webkit-transform: translateY(0); transform: translateY(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 0; background-color: $color-primary;}
.dl-menuwrapper .dl-menu.dl-menu-toggle {transition: all 0.3s ease;}
.dl-menuwrapper .dl-menu.dl-menuopen {top: 58px; overflow-y: auto; opacity: 1; pointer-events: auto; -webkit-transform: translateY(0px);transform: translateY(0px);
}
/*.dl-menuwrapper .dl-menu.dl-menu-toggle {opacity: 1; pointer-events: auto; -webkit-transform: translateY(0px);	transform: translateY(0px);}*/

/* Hide the inner submenus */
.dl-menuwrapper li .dl-submenu {display: none;}

/*When a submenu is openend, we will hide all li siblings. For that we give a class to the parent menu called "dl-subview". We also hide the submenu link.
The opened submenu will get the class "dl-subviewopen". All this is done for any sub-level being entered.*/
.dl-menu.dl-subview li,
.dl-menu.dl-subview li.dl-subviewopen > a,
.dl-menu.dl-subview li.dl-subview > a {display: none;}
.dl-menu.dl-subview li.dl-subview,
.dl-menu.dl-subview li.dl-subview .dl-submenu,
.dl-menu.dl-subview li.dl-subviewopen,
.dl-menu.dl-subview li.dl-subviewopen > .dl-submenu,
.dl-menu.dl-subview li.dl-subviewopen > .dl-submenu > li {display: block;}

/* Dynamically added submenu outside of the menu context */
.dl-menuwrapper > .dl-submenu {position: absolute; width: 100%; left: 0; margin-top: 0; top: 50px;}

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

header .page-menu_mobil .dl-menu{margin-top: 0;}

.page-menu_pc{display: none;}

.dl-menuwrapper > .dl-submenu,
.dl-menuwrapper .dl-menu{top: 50px;}

#mobil_menu{
  .mobilmenu--fix{background-color: $color-secondary; padding-left: 1.5rem; 
    background-image: url(../images/icons/btn-login.svg);
    background-repeat: no-repeat;
    background-position: left 0.55rem center;
    background-size: 16px 16px;
  }
}