@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 - zazupackage for
Author: Thomas Hezel (c) 2019 - 20190302
http://zazu.berlin



/**
*
* Header
*
**/

/*======= 320-NO Q =========== Rand 5  = 310 ===*/

#mainHeader {
    width: 100%;
    /*for absolute telefon, mail*/
    position: relative;
    margin-bottom: 1em;
}

/**
* logo
**/

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

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

/**
* mainMenu
**/


/*mobile Menu Hamburger*/

label.hamburger {
    display: none;
    /*border: solid 1px #95de11;*/
    width: 51px;
    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(--blue);
    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(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;
    z-index: 999;
}

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

#mainMenuBox nav ul li {
    margin: 0px;
    float: left;
    border-bottom: solid 1px var(--blue);
}

/* Styling the links */

#mainMenuBox nav a {
    display: block;
    padding: 16px 5px;
    /*padding top corresponds to font-size*/
    font-size: 16px;
    text-decoration: none;
}

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

/*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! Here normal nav*/
#mainMenuBox nav a:hover {
    background-color: var(--brightBlue);
}

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

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

    /*third level color*/
    #mainMenuBox nav ul ul ul a {
        background-color: red;
    }

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

/*======= 960 ======== MEDIA QUERIES ======== Rand 22 = 916 ===*/

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

    /*first level distance between sites*/
    #mainMenuBox nav a {
        padding: 18px 10px;
        font-size: 18px;
    }

}

/*======= 1254 ======= MEDIA QUERIES ======== Rand 28 = 1198 ==*/

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

    /*first level distance between sites*/
    #mainMenuBox nav a {
        padding: 18px 13px;
        font-size: 18px;
    }

}

/*END MENU*/


/**
* header contact
**/

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

#headerContact #mail {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 76 67'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:none;stroke:%2362B4EA;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3ESenden%3C/title%3E%3Cpath class='a' d='M21.9,65.27H65.82a3.19,3.19,0,0,0,3.06-2.67l4.19-29.9A2.29,2.29,0,0,0,70.75,30H26.18L46.81,49l24.62-17.8'/%3E%3Cline class='a' x1='35.58' y1='55.99' x2='14.02' y2='55.99'/%3E%3Cline class='a' x1='30.83' y1='48.04' x2='2.94' y2='48.04'/%3E%3Cline class='a' x1='23.88' y1='40.1' x2='11.24' y2='40.1'/%3E%3C/svg%3E");
    display: inline-block;
    width: 40px;
    height: auto;
    margin-top: 8px;
}

#headerContact #phone {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 76 67'%3E%3Cdefs%3E%3Cstyle%3E.a,.b%7Bfill:none;stroke:%2362B4EA;stroke-width:2px;%7D.a%7Bstroke-linecap:square;stroke-linejoin:round;%7D.b%7Bstroke-miterlimit:10;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3ETelefon%3C/title%3E%3Cpath class='a' d='M53.51,47.55a3.49,3.49,0,0,0-4-.23l-5.77,3.19a98.69,98.69,0,0,1-8.95-8h0l-.05,0,0,0h0a97.7,97.7,0,0,1-8-8.94l3.18-5.77a3.52,3.52,0,0,0-.22-4l-6.38-9.56a2.58,2.58,0,0,0-2.5-1.29c-1.75.08-6.91,4.94-6.91,4.94-2.73,2.42-2.13,4.55-2.13,4.55,1.84,13,15.51,25.53,16.56,26.62,1.41,1.31,13.62,14.72,26.62,16.55,0,0,2.12.61,4.55-2.12,0,0,4.86-5.16,4.94-6.91a2.57,2.57,0,0,0-1.3-2.5Z'/%3E%3Cpath class='b' d='M40.79,22.74a13.06,13.06,0,0,1,12.7,12.65'/%3E%3Cpath class='b' d='M41.05,15.5A20.29,20.29,0,0,1,60.72,35'/%3E%3C/svg%3E");
    display: inline-block;
    width: 40px;
    height: auto;
    margin-top: 8px;
}

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

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

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

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

    /*for bigger screens no margin under header*/

    #mainHeader { 
        margin-bottom: 0;
    }

    #mainHeader #logoContainer {
        padding: 1em 1em 0 0;
        float: left;
        width: 260px;
        clear: right;
        justify-content: left;
    }

    #headerContact {
        margin-top: 23px;
    }

    /* no line under li for normal menu*/
    #mainMenuBox nav ul li {
        border-bottom: none;
    }

    #mainMenu {
        clear: right;
    }

}



/*======= 960 ======== MEDIA QUERIES ======== Rand 22 = 916 ===*/

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

/*======= 1254 ======= MEDIA QUERIES ======== Rand 28 = 1198 ==*/

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

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

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

/*END-DCE x*/

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