@font-face {
    font-family: "font2";
    src: url("../fonts/roboto-300.ttf");
}

@font-face {
    font-family: "font3";
    src: url("../fonts/Fredericka-the-Great-regular.ttf");
}

@font-face {
    font-family: "font4";
    src: url("../fonts/appleberry.ttf");
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background-image: url("../img/Background.png");
}

#site {
    min-height: 100%;
    max-width: 1024px;
    position: relative;
    background-color: #ffffff;
    margin: 0px auto;
}

#header {
    background-color: #739701;
}

#header_banner {
    display: block;
    padding: 2px 0 2px 0;
}

#responsive_header_banner {
    display: none;
    visibility: hidden;
}

#content {
    margin-top: 2.0em;
    padding: 10px;
    padding-bottom: 7.0em;
}

#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    color: #739701;
    text-align: center;
    font-size: 12px;
}

img {
    max-width: 100%;
    width: auto;
    height: auto;
}

.nav_main {
    margin-top: 18px;
    background-color: white;
    border-bottom: solid #dddddd 1px;
}

#navigation ul {
    padding: 0px;
    margin: 0px;
}

#navigation ul:after {
    clear: both;
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
}

#navigation ul ul {
    padding: 0px;
    margin: 0px;
    visibility: hidden;
}

#navigation ul li {
    list-style: none;
    float: left;
}

#navigation ul li ul {
    display: inline;
    visibility: hidden;
    position: absolute;
    padding: 0px;
}

#navigation ul li:hover>ul {
    visibility: visible;
}

#navigation ul li ul li {
    float: none;
}

#navigation ul li ul li a {
    float: none;
    background-color: #739701;
}

#navigation ul li ul li a:hover {
    float: none;
    background-color: #739701;
    color: white;
}

#navigation ul li a {
    text-decoration: none;
    display: block;
    color: #333;
    padding: 10px 24px 10px 24px;
}

#navigation a {
    padding: 7px;
    background-color: white;
    text-decoration: blink;
    display: inline;
    color: #222222;    
}

#navigation a:hover {
    color: #ffffff;
    background-color: #739701;
}

.screen-reader-text {
    position: absolute;
    top: -9999px;
    left: -9999px;
}

/* Menü-Buttons normalerweise ausblenden */

.menu-toggle {
    display: none;
}

.active {
    color: #739701 !important;
}

.active:hover {
    color: #EB6913 !important;
}


@media screen and (max-width: 628px) {
    
    #header {
        height: 3.5em;        
    }

    .banner {
        display: inline;
    }

    #header_banner {
        display: none;
        visibility: hidden;
    }

    #navigation li {
        float: left;
        width: 100%;
    }

    #navigation ul li ul {
        float: left;
        width: 100%;
    }

    #responsive_header_banner {
        font-size: max(10vw, 30px);
        font-family: font3;
        padding-left: 0.5em;
        color: rgb(233, 221, 221);
        display: inline;
        visibility: visible;
    }

    /* Button zum Anzeigen des Menüs */
    .js .menu-toggle {
        float: right;
        width: 10%;
        display: inline;
        cursor: pointer;
        margin: 1px auto;
        font-weight: normal;
    }

    .js .nav_main li {
        display: none;
    }

    #navigation ul.toggled-on {
        display: block;
    }

    #navigation ul.toggled-on li, .no-js #navigation li {
        display: block;
    }

    [data-icon]:before {
        content: attr(data-icon);
        speak: none;
        display: inline-block;
        font-size: 200%;
    }

    .column_content, .column_content tr, .column_content td {
        display: block;
    }

    .column_content tr {
        width: 100%;
    }

    .column_content td {
        width: 100%;
    }

    .input_text {
        width: 100% !important;
    }

    .chained_select {
        margin-bottom: 0.5em;
        width: 100%;
    }

    .detail_bumper {           
        width: 100% !important;
    }
        
    img {
        max-width: 100% !important;
    }

    .content_wrapper {
        margin-left: 5px !important;
        margin-right: 5px !important;
    }

    .ingredientsname {    
        width: 10.0em !important;    
    }
    .qtyunit {
        width: 5.0em !important;
    }
}