/* #mainHeader, #mainMenu {display: none;} */

/**
*
* mainMenu – zazu.berlin
* final setup and TYPO3
* by Thomas Hezel 2019
*
* basic setup
* https://codepen.io/andornagy/pen/RNeydj
* by Andor Nagy
*
**/

/*mobile Menu Hamburger*/

label.hamburger {
    display: none;
    width: 71px;
    height: 46px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    float: left;
    cursor: pointer;
    margin-top: 0.4em;
}

input#hamburger {
    display: none
}

.hamburgerLine {
    position: absolute;
    left: 10px;
    height: 4px;
    width: 51px;
    border-radius: 4px;
    background: #4c2f26;
    display: block;
    transition: 0.5s;
    transform-origin: center;
}

.hamburgerLine:nth-child(1) {
    top: 8px;
}

.hamburgerLine:nth-child(2) {
    top: 20px;
}

.hamburgerLine:nth-child(3) {
    top: 32px;
}

#hamburger:checked+.hamburger .hamburgerLine:nth-child(1) {
    transform: translateY(12px) rotate(-45deg);
}

#hamburger:checked+.hamburger .hamburgerLine:nth-child(2) {
    opacity: 0;
}

#hamburger:checked+.hamburger .hamburgerLine:nth-child(3) {
    transform: translateY(-12px) rotate(45deg);
}

/*NAVIGATION main NAV*/

#mainMenuBox .toggle,
[id^=drop] {
    display: none;
}

/* Since we'll have the "ul li" "float:left"
we need to add a clear after the container. */

#mainMenuBox nav:after {
    content: "";
    display: table;
    clear: both;
}

/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:reltive" */

#mainMenuBox nav ul {
    /* float: right; */
    padding: 0;
    margin: 0;
    list-style: none;
    /* position: relative; */
}

/* Positioning the navigation items inline, no inline float left instead*/

#mainMenuBox nav ul li {
    margin: 0px;
    float: left;
    border-bottom: solid 1px #4c2f26;
}

/* Styling the links */

#mainMenuBox nav a {
    display: block;
    padding: 1em .5em;
    /*padding top corresponds to font-size*/
    font-size: .9em;
    text-decoration: none;
}

/*from second level onwards background color*/
#mainMenuBox nav ul li ul li {
    background-color:rgba(240,240,240,0.6);
}

/*level 2 when hover over level 3*/
#mainMenuBox nav ul li ul li:hover {
    background: #a8b7c7;
}

/* Background color change on hover same as mobile nav!*/
#mainMenuBox nav a:hover {
    background-color: #e8f6d4;
}

/* Hide dropdowns by default
 * and giving it a position of absolute */

#mainMenuBox nav ul ul {
    display: none;
    position: absolute;
    /* has to be the same number as the "line-height" of "nav a" */
    top: 60px;
}

/*level 2 drop down*/

#mainMenuBox nav ul li:hover>ul {
    display: inherit;
}

/*first row drop down*/

#mainMenuBox nav ul ul li {
    float: none;
    display: list-item;
    position: relative;
    width: 170px;
}

/* second and other rows to the left
*  by the amount of the first row
*  left: - minus for menu items at the right border
*
*  avoid a second level for the very last item if your
*  menu floats right to the border of the screen
*  and the second level has a longer name then the first
*/
#mainMenuBox nav ul ul ul li {
    position: relative;
    top: -60px;
    /* same number as width nav ul ul li */
    left: 170px;
}

#mainMenuBox nav ul li:nth-child(7) ul ul li {
    left: -170px;
}


/* change '+' in order to change the dropdown symbol*/

#mainMenuBox li>a:after {
    content: '+';
}

#mainMenuBox li>a:only-child:after {
    content: '';
}

/*======= 760========= MEDIA QUERIES MAX WIDTH !!! only for Menu ======== Rand 16 = 728 ===*/

@media all and (max-width: 760px) {
    #mainMenuBox {
        position: static;
        /*back to normal for "absolute" telefon, mail back to Header*/
    }
    label.hamburger {
        display: block;
    }
    /* zazu: plus sign is now from label*/
    #mainMenuBox li>a:after {
        content: '';
    }
    /*hide the nav menu, not the LINK!*/
    /*.toggle+a,*/
    #mainMenuList {
        display: none;
    }
    /* Styling the toggle label
    * zazu:
    * label is no page link! only for drop down
    * floats right and with neg. margin down
    */
    #mainMenuBox .toggle {
        display: block;
        padding: 15px 20px 10px 20px;
        text-decoration: none;
        border: none;
        margin-bottom: -40px;
        width: 20%;
        float: right;
        cursor: pointer;
    }
    #mainMenuBox .toggle:hover {
        color: #5c2466;
    }
    #mainMenuBox .toggle:after {
        content: '+';
        font-size: 1.5em;
        color: #5c2466;
    }
    #mainMenuBox [id^=drop]:checked+.toggle:after {
        content: '–';
        color: #5c2466;
    }
    /*second level, different style*/
    #mainMenuBox nav ul li ul li .toggle {
        padding: 15px 20px 10px 20px;
    }
    /* Display Dropdown when clicked on Parent Label*/
    #hamburger:checked+label+ul,
    #mainMenuBox [id^=drop]:checked+label+a+ul {
        display: block;
    }
    /* Change menu item's width to 100% */
    #mainMenuBox nav ul li {
        display: block;
        width: 100%;
    }
    #mainMenuBox nav ul ul .toggle,
    #mainMenuBox nav ul ul a {
        padding: 0 40px;
    }
    #mainMenuBox nav ul ul ul a {
        padding: 0 80px;
    }
    #mainMenuBox nav a:hover {
        background-color: #7fcce0;
        border: none;
    }
    #mainMenuBox nav ul ul a,
    #mainMenuBox nav ul ul ul a {
        padding: 14px 20px;
        font-size: 17px;
    }
    /*second level color*/
    #mainMenuBox nav ul ul a {
        background-color: #e8fccd;
    }
    /*third level color*/
    #mainMenuBox nav ul ul ul a {
        background-color: #a9e954;
    }
    /* Hide Dropdowns by Default second level*/
    #mainMenuBox nav ul ul {
        float: none;
        position: static;
    }
    /* Hide menus on hover */
    #mainMenuBox nav ul ul li:hover>ul,
    #mainMenuBox nav ul li:hover>ul {
        display: none;
    }
    /* fisrt level Dropdown */
    #mainMenuBox nav ul ul li {
        display: block;
        width: 100%;
    }
    #mainMenuBox nav ul ul ul li {
        position: static;
        /* has to be the same number as the "width" of "nav ul ul li" */
    }
}

@media all and (max-width: 330px) {
    #mainMenuBox nav ul li {
        display: block;
        width: 94%;
    }
}

/**
* header contact
**/

#headerContact {
    float: right;
    text-align: right;
}

#headerContact a {
    text-decoration: none;
    color: #2f383c;
}

/*======= 480 ========= MEDIA QUERIES ======= Rand 6 = 460 ===*/

@media only screen and (min-width: 480px) {
    #mainHeader #logoContainer {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        justify-content: center;
    }
    #mainHeader #logo {
        width: 0;
    }
}

/*======= 760========= MEDIA QUERIES ======== Rand 16 = 728 ===*/

/* @media now 761 not 760 since mixture of 'max' and 'min'*/

@media only screen and (min-width: 761px) {
    #mainHeader #logoContainer {
        padding: 1em 1em 1em 0;
        float: left;
        width: 40%;
        clear: right;
        justify-content: left;
    }
    #headerContact {
        margin-top: 0.95em;
    }
}


#mainMenu li a {
  color: #4c2f26;
/* text-transform: uppercase; */
    /* display:block; */
    /* min-width:140px; */
    /* min-width:60px;
    padding: 0 5px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    color: #fff;
    /* background: #cd5614; */
    /* background: #6c4c3f; */
    /* background: #4c2f26; */
    /* text-decoration: none; */
}
/*Hover state for top level links*/
#mainMenu li:hover a {
    background: #6d6a6a;
}
/*Style for dropdown links*/
#mainMenu li:hover ul a {
    background: #f3f3f3;
    color: #2f3036;
    height: 40px;
    line-height: 40px;
}
/*Hover state for dropdown links*/
#mainMenu li:hover ul a:hover {
    /* background: #4c2f26; */
    color: #4c2f26;
}

#mainMenuBox {
  max-width: 1240px;
  margin: auto;
}


#mainHeader {
transition: all .4s;
  position: fixed;
  z-index: 12;
  width: 100%;
  padding: 1.333em 0;
  top: 0;
  background: #fff;
}

#mainMenu a {
display: inline-block;
padding: .9em 0;
line-height: 1em;
transition: color .4s;
}
#mainMenu {
text-transform: uppercase;
width: auto;
box-sizing: border-box;

}