@charset "UTF-8";
@import url("01-normalize-801.css");
@import url("02-boilerplate-701.css");
@import url("03-basic-style.css");
@import url("05-default-template.css");
@import url("06-dce.css");
@import url("07-all-content.css");

/*
zazu.berlin - Film + Digital
Responsive Design – Mobile First - sitepackage for
Author: Thomas Hezel (c) 2019 - 20190509
http://zazu.berlin



/**
*
* Header
*
**/

/*======= 320-NO Q =========== Rand 5  = 310 ===*/
/*spacer for the fixed menu at desktop size,
  displays only at normal fixed menu*/
#menuSpacer {
    display: none;
}

#mainHeader {
    width: 100%;
    /*for absolute telefon, mail*/
    position: relative;
    font-family: 'poppins-light', Courier, monospace;
    font-weight: 500;
    margin-bottom: 1.5em;
}

/**
* logo
**/

#mainHeader #logoContainer {
    width: 100%;
    padding: 1em;
    margin: 0;
    float: none;
}

#mainHeader #logo {
    width: 100%;
    height: auto;
}

/**
* mainMenu
**/

/*mobile Menu Hamburger*/

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

input#hamburger {
    display: none
}

.hamburgerLine {
    position: absolute;
    left: 10px;
    height: 3px;
    width: 40px;
    background: #6F3B51;
    display: block;
    transition: 0.5s;
    transform-origin: center;
}

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

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

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

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

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

#hamburger:checked+.hamburger .hamburgerLine:nth-child(3) {
    transform: translateY(-10px) 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:relative" */

#mainMenuBox nav ul {
    padding: 0;
    margin: 20px 0 0 0;
    list-style: none;
    position: relative;
    z-index: 999;
}

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

#mainMenuBox nav ul li {
    margin: 0px;
    float: left;
}

#mainMenuBox nav ul li.current {
    background: linear-gradient(#6F3B51 0 0) bottom right/ 65% 1px no-repeat transparent;
}

/* Styling the links */

#mainMenuBox nav a {
    display: block;
    padding: 5px 5px;
    font-size: 20px;
    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: #FDF2E5;
}

/*Background color change on Hover at mobile nav!
full width just bottom line*/
#mainMenuBox nav a:hover {
    border-bottom: solid 1px #6F3B51;
    color: #6F3B51;
}

/*to avoid movement of the whole page by 1px on hover*/
#mainMenuBox nav a {
    border-bottom: solid 1px transparent;
}


/* 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: '+';
}

/*point after menu entry for now submenu*/
#mainMenuBox li>a:only-child:after {
    content: '.';
}

/*
*
*======= 767========= MEDIA QUERIES MAX WIDTH !!! only for Menu ======== Rand 15 = 738 ===
*
*
*/

@media all and (max-width: 767px) {
    #mainMenuBox {
        position: static;
        /*back to normal for "absolute" telefon, mail back to Header*/

    }

    label.hamburger {
        display: block;
    }

    /* zazu: plus sign is now from lable*/
    #mainMenuBox li>a:after {
        content: '';
    }

    /*hide the nav menu, not the LINK!*/
    /*.toggle+a,*/
    #mainMenuList {
        display: none;
    }

    /* Styling the toggle lable
    * zazu:
    * lable 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 Lable*/
    #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: #FDF2E5;
        border: none;
    }

    /*padding of the dropdown menu mobile, level2*/
    #mainMenuBox nav ul ul a {
        padding: 14px 30px;
    }

    /*padding of the dropdown menu mobile, level3*/
    #mainMenuBox nav ul ul ul a {
        padding: 14px 42px;
    }

    /*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 Tier 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%;
    }
}

/*======= 990 ======== MEDIA QUERIES ======== border 15 = 960 ===*/
@media only screen and (min-width: 990px) {}

/*END MENU*/


/*======= 576 ========= MEDIA QUERIES ======= border 15 = 546 ===*/

@media only screen and (min-width: 576px) {}

/*======= 768========= MEDIA QUERIES ======== Rand 15 = 738 ===*/

/* @media now 768 since mixture of 'max' and 'min'*/

@media only screen and (min-width: 768px) {

    /*fixed menu and header Aug 2026*/
    #mainHeader {
        position: fixed;
        background-color: rgba(255, 255, 255, 0.95);
        z-index: 1000;
    }

    #menuSpacer {
        display: block;
        width: 100%;
        height: 188px;
    }

    /*end fixed menu*/

    #mainHeader #logoContainer {
        text-align: center;
    }

    #mainHeader #logo {
        width: 35%;
    }

}

/*======= 990 ======== MEDIA QUERIES ==========*/

@media only screen and (min-width: 990px) {
    #mainMenuBox nav a {
        padding: 5px 9px;
    }

    #mainHeader #logo {
        width: 27.354%;
    }
}


/*======= 1099 ======= MEDIA QUERIES ======== for fixed menu spacer ==*/

@media only screen and (min-width: 1099px) {
    #menuSpacer {
        height: 165px;
    }

}



/*======= 1398 ======= MEDIA QUERIES ======== Rand 30 = 1398 ==*/

@media only screen and (min-width: 1398px) {
    #mainMenuBox nav a {
        padding: 5px 19px;
    }
}

/*======= 2512 ======= MEDIA QUERIES ==== Rand 151-45 = 2396 ==*/

@media only screen and (min-width: 2512px) {}

/*END-DCE x*/

/*======== Header ================================================*/