@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  padding l,r  15  = 290 ===*/

#mainHeader {
    width: 100%;
    /*for absolute telefon, mail*/
    position: relative;
    font-family: 'inter', Arial, sans-serif;
    font-weight: 500;
    padding-top: 20px;
}

/**
* logo
**/

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

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

/**
* mainMenu
**/





/*======= 767 after mobile menu ======== MEDIA QUERIES ===========*/
/*max-width -- max-width -- max-width*/

@media only screen and (max-width: 767px) {


    /*
* settings for the mobile menu
*/


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

    /* 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: var(--green);
    }

    #mainMenuBox .toggle:after {
        content: '+';
        font-size: 1.5em;
        color: var(--green);
    }

    #mainMenuBox [id^=drop]:checked+.toggle:after {
        content: '–';
        color: var(--green);
    }

    /*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 {
        color: var(--green);
        border: none;
    }

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

    /*padding of the dropdown menu mobile, level3*/
    #mainMenuBox nav ul ul ul a {
        padding: 14px 42px;
        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 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" */
    }

}


/*
*
* start menu with no width and then min-width
*
*/

/*mobile Menu Hamburger*/

label.hamburger {
    display: block;
    width: 66px;
    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: 41px;
    border-radius: 4px;
    background: var(--fontDarkBlue);
    display: block;
    transition: 0.5s;
    transform-origin: center;
}

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

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

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

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

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

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

/*
* 
* NAVIGATION main NAV
*
*/



/*don't display the input checkbox, and the lable with toggle*/
#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;
    z-index: 999;
}

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

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

/*
* big drop-down area
*
*/

#mainMenuBox ul li ul {
    position: absolute;
    right: 0;
    width: 100%;
    padding-left: 15%;
    padding-right: 5%;
    height: 200px;
    background: rgba(255,255,255, 0.9);
}
/*
* Styling the links
*/

#mainMenuBox nav a {
    display: block;
    padding: 17px 7px;
    /*padding top corresponds to font-size*/
    text-decoration: none;
    text-transform: uppercase;
    color: var(--darkBlue);
}


/*drop down menu font size*/
#mainMenuBox nav ul li ul li a {
    font-size: 16px;
}

/*from second level onwars dropdown font style*/
#mainMenuBox nav ul li ul li a::before {
    float: left;
    content: '>';
    margin-right: 5px;
    color: var(--darkBlue);
}

/*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 {
    color: var(--green);
}

/* 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: 350px;
}

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




/*======= 330 mobile menu ======== MEDIA QUERIES ===========*/

/*space on the right side for the finger to scroll on mobile open*/
@media all and (max-width: 330px) {
    #mainMenuBox nav ul li {
        display: block;
        width: 94%;
    }
}

/*======= 768 after mobile menu ======== MEDIA QUERIES ===========*/
/*from here it is the normal menu*/

@media only screen and (min-width: 768px) {
    label.hamburger {
        display: none;
    }

    /* change '+' in order to change the dropdown symbol*/
    #mainMenuBox li.plus>a:after {
        content: '+';
    }

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

}


/*======= 990 ======== MEDIA QUERIES ======== border 15 = 960 ===*/

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

    /*first level distance between sites*/
    #mainMenuBox nav a {
        padding: 17px 9px;
    }
}

/*END MENU*/


/**
* header general settings with min-width
**/

#headerContact {
    text-align: right;
    padding-top: 5px;
}

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

#headerContact svg {
    width: 39px;
    height: auto;
    margin-left: 20px;
}

/*push it up on the level of the phone icon*/
#mainMenu {
    margin-top: -45px;
    padding-bottom: 10px;
}


/*make the logo smaller*/

#mainHeader #logoContainer {
    display: flex;
    justify-content: center;
}

#logoContainer img {
    display: block;
    width: 80%;
    margin-left: 10%;
}

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

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

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

/* @media 768 be carefull mixture of 'max' and 'min'*/

@media only screen and (min-width: 768px) {
    #mainHeader #logoContainer {
        padding: 1em 1em 1em 0;
        float: left;
        width: 365px;
        justify-content: left;
    }

    #logoContainer img {
    width: 360px;
    margin-left: 0;
}

    /*push it up on the level of the phone icon*/
#mainMenu {
    margin-top: 0;
    padding-bottom: 0;
}

#headerContact {
    padding-top: 48px;
}


}

/*======= 990 ======== MEDIA QUERIES ======== border 15 = 960 ===*/

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

/*======= 1398 ======= MEDIA QUERIES ======== border 30 = 1338 ==*/

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

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

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

/*END-DCE x*/

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