/*
Item name: Menuzord - Responsive Megamenu
Author: marcoarib - marco.arib@gmail.com
License: http://codecanyon.net/licenses     
*/

.badge-menu {
  position:absolute;
  top:-3px;
  left:30px;
  display: inline-block;
  padding: 0.25em 0.4em;
  font-size: 63%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25rem;
}

/* MENU CONTAINER
======================================*/
.menuzord,
.menuzord *{
  visibility:visible;
  box-sizing:border-box;
  -moz-box-sizing:border-box; 
  -webkit-box-sizing:border-box;
}
.menuzord{
  width: auto;
  padding: 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: #fff;
  z-index:1030;
  border-bottom:1px solid #992600!important;
  border-radius: 0.25rem;
}
/* menuzord  siehe mobil 451 display:block */
.menuzord a{
  -o-transition: color .3s linear, background .3s linear;
  -moz-transition: color .3s linear, background .3s linear;
  -webkit-transition: color .3s linear, background .3s linear;
  transition: color .3s linear, background .3s linear;
}

/* .menuzord ul li ul li {list-style: none;} ich test ie11*/

/* scrollable menu */
.menuzord-menu.scrollable > .scrollable-fix{
  display: none;
}

/* BRAND
======================================*/
.menuzord-brand{
  display:none;
  float: left;
  cursor: pointer;
}

/* MENU
======================================*/
.menuzord-menu{
  margin: 0;
  padding: 0;
  visibility:visible;
  float: left;
}
.menuzord-menu.case3 {
  width:100%;
}

/* Right alignment */
.menuzord-menu.menuzord-right{
  float: right;
}
/* Menu items */
.menuzord-menu > li{
  display: inline-block;
  float: left;
  list-style-type:none;

}/* erste LI mit  width:100% für nur rechte navidation Vertical */

.menuzord-menu > li.right{
  float: right;
}
.menuzord-menu > li.right  a{
  padding: 15px 20px; 
}

.menuzord-menu > li > a{
  padding: 15px 15px 15px 5px;
  display: inline-block;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  color:#992600;
  outline: 0;
  line-height: 1rem;
  text-transform:uppercase;
  position:relative;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent;
  border-radius: 0.25rem;
  width:100%;
 
}/* erste LI  text-shadow: 2px 2px 2px #fff; */
.menuzord-menu li a span.counts {
  padding-left:4px;
  font-style:italic;
  font-size:0.5rem;
  font-weight: 400;
}
.menuzord-menu li.level1 > a > span.counts {
  display:none;
}


/* Active/hover state (Menu items) */
.menuzord-menu > li.active > a,
.menuzord-menu > li.active1 > a,
.menuzord-menu > li.activeparent1 > a,
.menuzord-menu > li:hover > a{
 color: #eee;
  background:#992600;
}
/* color: #007bff; alt blau*/

/* DROPDOWN
======================================*/

.menuzord-menu ul.dropdown,.menuzord-menu ul.dropdown li ul.dropdown{
  list-style: none;
  list-style-color: transparent;
  margin: 0 0 0 0px;
  padding: 0px 0px;
  display: none;
  position: absolute;
  z-index: 99;
  min-width: 300px;
  white-space: nowrap;
  background: rgba(234, 235, 237, 1.0);
  border: 0px solid rgba(0, 0, 0, 0.01);
  border-radius: 0.25rem;
}
.menuzord-menu ul.dropdown, .menuzord-menu ul.dropdown li ul.dropdown .level2{
  list-style: none;
  list-style-color: transparent;
  margin: 0px 0 0 0px;
  padding: 0px 0px;
  display: none;
  position: absolute;
  z-index: 99;
  min-width: 330px;
  white-space: nowrap;
  background: #C4E4ED;
  border: 1px solid #C4E4ED;
  border-radius: 0.25rem;
}/* mobil zeile 463 !-> nur rechte Navigation 100% margin siehe Ferienwohnung*/

.menuzord-menu ul.dropdown li ul.dropdown{
  left: 100%;
}
/* Dropdown items */
.menuzord-menu ul.dropdown li{
  clear: both;
  width: 100%;
  border: 0 none;
  font-size: 0.9rem;
  line-height:1.2rem;
  position: relative;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  
}
.menuzord-menu ul.dropdown li a{
  width: 100%;
  background: #C4E4ED;
  padding: 8px 20px 8px 20px;
  color: #666;
  text-decoration: none;
  display: inline-block;
  float: left;
  clear: both;
  position: relative;
  outline: 0;
  font-weight:400;
  text-transform:none;
  -o-transition: padding .2s linear;
  -moz-transition: padding .2s linear;
  -webkit-transition: padding .2s linear;
  transition: padding .2s linear;
}

.menuzord-menu ul.dropdown li li a{
  width: 100%;
  background: none;
  padding: 8px 20px 8px 20px;
  color: #6c757d;
  text-decoration: none;
  display: inline-block;
  float: left;
  clear: both;
  position: relative;
  outline: 0;
  font-weight:400;
  text-transform:none;
  -o-transition: padding .2s linear;
  -moz-transition: padding .2s linear;
  -webkit-transition: padding .2s linear;
  transition: padding .2s linear;
  border-radius: 0.25rem;
   background: #ddd;
}
/* .menuzord-menu ul.dropdown li li {
  list-style-type: none;overflow:hidden
} */
/* hack ie11 noch testen */

/* Hover state (dropdown items) */
.menuzord-menu ul.dropdown li:hover > a{
  padding-left: 20px;
  padding-right: 0px;
  color: #fff;
  background: #3DA5C2;
  border-radius: 0.25rem;
}
.menuzord-menu ul.dropdown li li:hover > a{
  padding-left: 20px;
  padding-right: 0px;
   color: #34699D;
  background: #A3C2E0;
  border-radius: 0.25rem;
}



/* Dropdown left alignment */
.menuzord-menu ul.dropdown.dropdown-left{
  left: none;
}
.menuzord-menu ul.dropdown li ul.dropdown.dropdown-left{
  left: -100%;
}



/* DROPDOWN/MEGAMENU INDICATORS
======================================*/
.menuzord-menu li .indicator{
   width: 20px;
    height: 20px;
    position: absolute;
    right: 0;
    top: 10; 
  margin-left: 20px;
  line-height:0.90;
  vertical-align:bottom;
  border-bottom:0px solid #666
}/* erste LI und alle*/
.menuzord-menu li .indicator .fas{
  line-height:0.90 !important;
}

.menuzord-menu li ul.dropdown li .indicator{
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 1rem;
  
}





/* MEGAMENU
======================================*/
.menuzord-menu > li > .megamenu{
  width: 100%;
  padding: 10px 0px 10px 0px;
  left: 0;
  position: absolute;
  display: none;
  z-index: 99;
  background: rgba(234, 235, 237, 1.0);
  border: 0px solid rgba(0, 0, 0, 0.01);
  border-radius: 0.25rem;
}

/* GRID SYSTEM
======================================*/
.menuzord-menu > li > .megamenu .megamenu-row{
  width: 100%;
  margin-top: 15px;
}
.menuzord-menu > li > .megamenu .megamenu-row:first-child {
  margin-top: 0;
}
.menuzord-menu > li > .megamenu .megamenu-row:before,
.menuzord-menu > li > .megamenu .megamenu-row:after {
  display: table;
  content: "";
  line-height: 0;
}
.menuzord-menu > li > .megamenu .megamenu-row:after {
  clear: both;
}
.menuzord-menu > li > .megamenu .megamenu-row .col12{
  display: block;
  min-height: 20px;
  float: left;
  width: 100%;
}

.menuzord-menu > li > .megamenu .megamenu-row .col12 > ul {
  list-style-type:none;
  margin: 0px; 
  padding: 0px;
}
.menuzord-menu > li > .megamenu .megamenu-row .col12 > ul > li {
  float:left;
  width: 25%;
  padding: 0px 20px;
  
  
}
.menuzord-menu > li > .megamenu .megamenu-row .col12 > ul > li:nth-child(4n+1) {
  clear:both;
}

/* level2 */
.menuzord-menu > li > .megamenu .megamenu-row .col12 > ul > li > a {
  color:#6c757d;
  display:block;
  text-transform:none;
  font-size: 0.9rem;
  line-height:1.2rem;
  font-weight:600;
  padding: 8px 0px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  
}
.menuzord-menu > li > .megamenu .megamenu-row .col12 > ul > li > a:hover {
  color:#007bff;
  text-decoration:none;
}
/* level3 */
.menuzord-menu > li > .megamenu .megamenu-row .col12 > ul ul {
  list-style-type:square;
  margin: 0 0 15px 20px;
  padding: 2px 0 0 0;
}
.menuzord-menu > li > .megamenu .megamenu-row .col12 > ul ul li {
  float:none;
}
.menuzord-menu > li > .megamenu .megamenu-row .col12 > ul ul li a {
  color:#6c757d;
  display:block;
  font-size: 0.8rem;
  line-height:1.2rem;
  font-weight:400;
  padding: 2px 0px;
}
.menuzord-menu > li > .megamenu .megamenu-row .col12 > ul ul li a:hover {
  color:#007bff;
  text-decoration:none;
}
/* level 4,5,6 */
.menuzord-menu > li > .megamenu .megamenu-row .col12 > ul ul ul {
  display:none !important;
}


/* SHOW/HIDE BUTTON (MOBILE MODE)
======================================*/
.menuzord .showhide{
  position:absolute;
  z-index:1;
  top:0px;
  left:0px;
  width: 100%;
  padding: 0px 0 0;
  display: none;
  float: right;
  text-decoration: none;
  outline: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent;
  text-align:right;

}
/* Show/hide button icon */
.menuzord .showhide .fas{
  line-height:46px;
  font-size:1.2rem;
  color:#666;
  margin: 0px 20px;
}




/* ICONS (parent menu items)
======================================*/
.menuzord-menu > li > a > i{
  margin: 0 5px 0 0;
  font-size: 1.2rem;
  float: left;
  line-height: 20px;
  font-family: 'Font Awesome 5 Free';
  font-weight:900;
}



/* Levels */
.active1 > a { color:#FF6600 !important;}
.activeparent1 > a { color:#FF6600 !important;}

.active2 > a { color:#FF6600 !important;}
.activeparent2 > a { color:#FF6600 !important;}

.active3 > a { color:#FF6600 !important;}
.activeparent3 > a { color:#FF6600 !important;}

.active4 > a { color:#FF6600 !important;}
.activeparent4 > a { color:#FF6600 !important;}

.active5 > a { color:#FF6600 !important;}
.activeparent5 > a { color:#FF6600 !important;}

/* test */
 
 

/* MOBILE MODE (RESPONSIVE MODE)
======================================*/

@media (max-width: 920px){

  .menuzord-menu > li > .megamenu .megamenu-row .col12 > ul > li { width: 33.3333%; }
  .menuzord-menu > li > .megamenu .megamenu-row .col12 > ul > li:nth-child(4n+1) { clear:none; }
  .menuzord-menu > li > .megamenu .megamenu-row .col12 > ul > li:nth-child(3n+1) { clear:both; }

  .menuzord {display:block}
}



@media (max-width: 1100px){

  .badge-menu {
    top: 15px;
    right: 15px;
    left:inherit;
  }

  /* ^^ max width Mobiel ober ::  Responsive menu container alte 991px such in bootstrap.menuzord.min.js anpassen und in stylesheet.css zeie 831  max-width: 1100px*/
  .menuzord-responsive.menuzord{
    padding: 0;
  }
  
  .menuzord-menu ul.dropdown, .menuzord-menu ul.dropdown li ul.dropdown .level2{
  list-style: none;
  list-style-color: transparent;
  margin: 0px 0 0 0px;
  padding: 0px 0px;
  display: none;
  position: absolute;
  z-index: 99;
  min-width: 280px;
  white-space: nowrap;
  background: rgba(234, 235, 237, 1.0);
  border: 0px solid rgba(0, 0, 0, 0.01);
  border-radius: 0.25rem;
}
  /* Brand */
  .menuzord-responsive .menuzord-brand{
    padding: 13px 10px;
    display: inline-block;
    text-decoration: none;
    font-size: 1rem;
    line-height: 1.2rem;
    font-weight: 700;
    color:#666;
    outline: 0;
    text-transform:uppercase;
    position:relative;
  }

  /* Show/hide button */
  .menuzord-responsive .showhide{
    margin: 0;
  }
  
  /* Menu */
  .menuzord-responsive .menuzord-menu{
    width: 100%;
    float: left !important;
  }
  /* scrollable menu*/
  .menuzord-responsive .menuzord-menu.scrollable{
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .menuzord-responsive .menuzord-menu.scrollable > .scrollable-fix{
    display: block;
  }
  
  /* Menu items */
  .menuzord-responsive .menuzord-menu > li{
    width: 100%;
    display: block;
    position: relative;
  }
  .menuzord-responsive .menuzord-menu > li > a{
    width: 100%;
    padding: 14px 10px;
    display: block;
    border-bottom: solid 1px #555;
  }
  .menuzord-responsive .menuzord-menu > li:first-child > a{
    border-top: solid 1px #555;
  }
  
  /* Dropdown */
  .menuzord-responsive .menuzord-menu ul.dropdown,
  .menuzord-responsive .menuzord-menu ul.dropdown li ul.dropdown{
    width: 100%;
    left: 0;
    position: static;
    border: none;
    float: left;
    border-radius:0px;
    padding: 0px;
  }
  
  /* Dropdown items */
  .menuzord-responsive .menuzord-menu ul.dropdown li{
    position: relative;
    border:none;
  }
  .menuzord-responsive .menuzord-menu ul.dropdown li a{
    color:#666;
    text-transform:none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    float:none;
  }
  
  
  .menuzord-responsive .menuzord-menu.menuzord-indented > li > ul.dropdown > li > a{ padding-left: 20px !important; }
  .menuzord-responsive .menuzord-menu.menuzord-indented > li > ul.dropdown > li > ul.dropdown > li > a{ padding-left: 40px !important; }
  .menuzord-responsive .menuzord-menu.menuzord-indented > li > ul.dropdown > li > ul.dropdown > li > ul.dropdown > li > a{ padding-left: 60px !important; }
  .menuzord-responsive .menuzord-menu.menuzord-indented > li > ul.dropdown > li:hover > a{ padding-left: 20px !important; }
  .menuzord-responsive .menuzord-menu.menuzord-indented > li > ul.dropdown > li > ul.dropdown > li:hover > a{ padding-left: 40px !important; }
  .menuzord-responsive .menuzord-menu.menuzord-indented > li > ul.dropdown > li > ul.dropdown > li > ul.dropdown > li:hover > a{ padding-left: 60px !important; }
  
  /* Dropdown/megamenu indicators */
  .menuzord-responsive .menuzord-menu li .indicator{    
    width: 60px;
    height: 45px;
    position: absolute;
    right: 0;
    top: 0;
    font-size: 1.2rem;
    text-align: center;
    line-height: 2.8rem;
    border-left: solid 1px #555;
  }
  .menuzord-responsive .menuzord-menu li ul.dropdown li .indicator{
    height: 36px;
    right: 0;
    top: 0;
    font-size: 1.2rem;
    line-height: 36px;
    border-left: 1px solid rgba(0, 0, 0, 0.05);
  }
  
  /* Megamenu */
  .menuzord-responsive .menuzord-menu > li > .megamenu{
    width: 100% !important;
    left: 0 !important;
    position: static;
    border-top: none;
    border-radius:0px;
  }
  .menuzord-responsive .menuzord-menu > li > .megamenu .megamenu-row [class*="col"]{
    float: none;
    display: block;
    width: 100% !important;
    margin-left: 0;
    margin-top: 15px;
  }
  .menuzord-responsive .menuzord-menu > li > .megamenu .megamenu-row:first-child  [class*="col"]:first-child {
    margin-top: 0;
  }
  .menuzord-responsive .menuzord-menu > li > .megamenu .megamenu-row{
    margin-top: 0;
  }

  .menuzord-menu > li > .megamenu .megamenu-row .col12 > ul > li { width: 50%; }
  .menuzord-menu > li > .megamenu .megamenu-row .col12 > ul > li:nth-child(4n+1) { clear:none; }
  .menuzord-menu > li > .megamenu .megamenu-row .col12 > ul > li:nth-child(3n+1) { clear:none; }
  .menuzord-menu > li > .megamenu .megamenu-row .col12 > ul > li:nth-child(2n+1) { clear:both; }
}

@media (max-width: 500px){
  .menuzord-menu > li > .megamenu .megamenu-row .col12 > ul > li { width: 100%; }
  .menuzord-menu > li > .megamenu .megamenu-row .col12 > ul > li:nth-child(4n+1) { clear:none; }
  .menuzord-menu > li > .megamenu .megamenu-row .col12 > ul > li:nth-child(3n+1) { clear:none; }
  .menuzord-menu > li > .megamenu .megamenu-row .col12 > ul > li:nth-child(2n+1) { clear:none; }
}

