html,
button,
input,
select,
textarea {
}

body {
    font-size: 1em;
    line-height: 1.4;
    background: url(/Gemuese/Styles/Img/bg.jpg) repeat;
}

img {
    vertical-align: middle;
}

table {
    width: 100% !important;
    max-width: 100% !important;
}

    table td {
        vertical-align: top;
        width: 50% !important;
    }

h1, .address-title, .address-detail {
    color: #a7b152;
    font-size: 1.7em;
    line-height: 1.2em;
    font-weight: 300;
    margin: 5px 0 30px 0;
}

    h1.calendar {
        margin-bottom: 15px;
    }

    h1 .supersize {
        font-size: 1.6em;
    }

    h1.product-title {
        width: 80%;
    }

h2 {
    color: #4d7f4b;
    text-transform: uppercase;
    margin: 8px 0 0 0;
    padding: 0;
    font-size: 1em;
    line-height: 1.3em;
    font-weight: normal;
}

    h2.product-title {
        margin-top: 0;
    }

h3 {
    color: #a7b152;
    margin: 3px 0 0 0;
    padding: 0;
    font-size: 2em;
    font-size: 1.05em;
    line-height: 1.3em;
    font-weight: normal;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
}

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

.shadow {
    -webkit-box-shadow: 2px 2px 4px rgba(0,0,0,0.6);
    -moz-box-shadow: 2px 2px 4px rgba(0,0,0,0.6);
    box-shadow: 2px 2px 4px rgba(0,0,0,0.6);
    /*behavior: url(http://www.gemuese.ch/Gemuese/Gemuese/Scripts/PIE.htc);*/
}

.noborder {
    display: none;
}

.upper {
    text-transform: uppercase;
}


/* ===== Initializr Styles ==================================================
   Author: Jonathan Verrecchia - verekia.com/initializr/responsive-template
   ========================================================================== */

body {
    font: 16px/26px 'Roboto', Helvetica, sans-serif;
}

.wrapper {
    width: 95%;
    margin: 0 2.5%;
}

/* ===================
    ALL: Gemuese
   =================== */

/* =================== header */

header {
    position: relative;
    z-index: 5;
}

    header .header-content {
        position: relative;
        z-index: 10;
    }

/* =================== header meta */

.meta-wrapper {
    position: relative;
    display: inline-block;
    zoom: 1;
    *display: inline;
    height: 56px;
    background: #000;
    color: #fff;
    width: 100%;
    margin: 0;
    position: fixed;
    left: 0;
    z-index: 30;
    overflow: hidden;
    -webkit-box-shadow: 2px 2px 4px rgba(0,0,0,0.6);
    -moz-box-shadow: 2px 2px 4px rgba(0,0,0,0.6);
    box-shadow: 2px 2px 4px rgba(0,0,0,0.6);
    /*behavior: url(http://www.gemuese.ch/Gemuese/Gemuese/Scripts/PIE.htc);*/
}

    .meta-wrapper .right {
        float: right;
        margin-right: 5px;
    }

.active-nav {
    overflow: hidden;
}

    .active-nav .meta-wrapper {
        left: 80%;
        -webkit-transition: .2s all ease;
        -moz-transition: .2s all ease;
        -o-transition: .2s all ease;
        -ms-transition: .2s all ease;
        transition: .2s all ease;
    }


.meta-wrapper .logo {
    float: left;
    font-weight: 600;
    font-size: 1.5em;
    padding: 12px 2% 18px 2%;
    background: #4d7f4b;
    display: inline-block;
    zoom: 1;
    *display: inline;
}

    .meta-wrapper .logo a {
        text-decoration: none;
        color: #fff;
        font-size: 0.8em;
        line-height: 0;
    }

.meta-wrapper .meta ul {
    margin: 6px 6px 0 0;
    padding: 0;
    text-align: right;
}

    .meta-wrapper .meta ul li a {
        margin-right: 1%;
        font-size: 1em;
        font-weight: bold;
    }

    .meta-wrapper .meta ul li:first-child a {
        margin-left: 0;
    }



.meta a {
    color: #fff;
    text-decoration: none;
    font-weight: 300;
}

    .meta a:hover, .meta a.active {
        color: #295627;
    }

.mobile-nav-btn {
    display: block;
    float: left;
    background: url(img/mobile-nav-default.gif) no-repeat;
    background: url(img/mobile-nav-default-low.gif) no-repeat\9;
    background-position: 0 0;
    background-size: 32px 19px;
    text-indent: -9999px;
    height: 19px;
    width: 32px;
    margin: 19px 15px 0;
}

.active-nav .mobile-nav-btn {
    background: url(img/mobile-nav-open.gif) no-repeat;
    background: url(img/mobile-nav-open-low.gif) no-repeat\9;
    background-position: 0 0;
    background-size: 24px 25px;
    height: 25px;
    width: 24px;
    margin: 16px 15px 0;
}

.mobile-lng {
    padding: 15px 0;
    position: relative;
    float: left;
    width: 48px;
    text-align: center;
    font-size: 1.3em;
}

    .mobile-lng a, .mobile-lng a:visited {
        color: #fff;
        text-decoration: none;
    }

.mobile-login-btn {
    display: block;
    float: left;
    text-indent: -9999px;
    background: url(img/mobile-login.gif) no-repeat;
    background: url(img/mobile-login-low.gif) no-repeat\9;
    background-size: 22px 28px;
    width: 22px;
    height: 28px;
    margin: 13px 9px;
    padding: 0;
}

.mobile-search-btn {
    display: block;
    float: left;
    background: url(img/mobile-nav-search.gif) no-repeat;
    background: url(img/mobile-nav-search-low.gif) no-repeat\9;
    background-position: 0 0;
    background-size: 25px 24px;
    text-indent: -9999px;
    width: 25px;
    height: 24px;
    margin: 16px 0;
}

[role="navigation"] {
    padding: 4px;
    background: #000;
    position: fixed;
    height: 100%;
    border-right: 2px solid #fff;
    z-index: 300;
}


.mobile-nav {
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
}

    .mobile-nav .padding-wrapper {
        padding: 0% 50.5% 2% 1.5%;
    }

    .mobile-nav ul {
        padding: 0;
        margin: 0;
    }

    .mobile-nav a, .mobile-nav a:visited {
        color: #fff;
        text-decoration: none;
        font-family: 'Autour One';
        font-size: 1.3em;
        padding: 16px 0;
        display: block;
        border-bottom: 1px solid #fff;
        text-transform: uppercase;
    }

        .mobile-nav a:hover {
        }

    .mobile-nav .scroll-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 100%;
        width: 200%;
        overflow-y: scroll;
    }


/* =================== Mobile-Nav-Pattern */

[role="navigation"],
[role="main"],
[role="complementary"] {
    -webkit-transition: .2s all ease;
    -moz-transition: .2s all ease;
    -o-transition: .2s all ease;
    -ms-transition: .2s all ease;
    transition: .2s all ease;
    width: 100%;
    padding: 0%;
    display: block;
}

.js [role="navigation"] {
    left: -100%;
    margin-left: -2px;
    float: left;
    padding-bottom: 25em;
    z-index: 2;
}

.js [role="main"] {
    right: 0;
    background: #eee;
    box-shadow: 0 0 25px rgba(0,0,0,.2);
    float: left;
    z-index: 1;
    position: relative;
}

.active-nav [role="navigation"] {
    left: 0;
    width: 80%;
}

.active-nav [role="main"] {
    right: -80%;
}

.active-nav [role="main"] {
    -webkit-transition: .2s all ease;
    -moz-transition: .2s all ease;
    -o-transition: .2s all ease;
    -ms-transition: .2s all ease;
    transition: .2s all ease;
}

/* =================== search */

.search {
    position: absolute;
    width: 95%;
    top: -250px;
    -webkit-transition: .2s all ease;
    -moz-transition: .2s all ease;
    -o-transition: .2s all ease;
    -ms-transition: .2s all ease;
    transition: .2s all ease;
    z-index: 20;
    left: 2.5%;
    /*
    background:#000;
    padding:2%;
    line-height: 0;
    z-index:20;
        */
}

.active-nav .search {
    -webkit-transition: .2s all ease;
    -moz-transition: .2s all ease;
    -o-transition: .2s all ease;
    -ms-transition: .2s all ease;
    transition: .2s all ease;
    left: 82.5%;
}

.search.mobile-visible, .login-box-wrapper.mobile-visible {
    top: 70px;
    position: fixed;
    display: block;
    -webkit-transition: .2s all ease;
    -moz-transition: .2s all ease;
    -o-transition: .2s all ease;
    -ms-transition: .2s all ease;
    transition: .2s all ease;
}

.search input[type=text] {
    height: 20px;
    padding: 10px 5px 10px 5px;
    width: 94%;
    border: none;
    outline: none;
    font-style: italic;
    font-weight: 300;
    padding-left: 5%;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    /*behavior: url(http://www.gemuese.ch/Gemuese/Gemuese/Scripts/PIE.htc);*/
    position: relative;
}

.search input[type=image] {
    position: absolute;
    right: 4px;
    top: 8px;
    z-index: 100;
    width: 26px;
}

/* =================== info-box */

.info-login-wrapper {
    position: relative;
}

.info-box-wrapper {
    height: 180px;
    margin: 60px 0 0 0;
    float: left;
    width: 73%;
    margin: 100px 0 0 0;
    float: left;
    width: 100%;
}



.info-box {
    padding: 20px 3% 20px 5%;
    background: #fff;
    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    /* IE 5-7 */
    filter: alpha(opacity=70);
    /* Netscape */
    -moz-opacity: 0.7;
    /* Safari 1.x */
    -khtml-opacity: 0.7;
    /* Good browsers */
    opacity: 0.7;
    font-family: 'Autour One';
    display: none;
}

    .info-box a {
        text-decoration: none !important;
        color: #000 !important;
        display: block;
    }

    .info-box p {
        font-size: 1.2em;
        line-height: 1.4em;
        margin: 10px 0;
    }

.teaser-image {
    position: relative;
    /*
    display: inline-block;
    zoom: 1;
    *display: inline;
        */
    margin-top: 10px;
}

    .teaser-image img {
        width: 100%;
    }

.login-wrapper {
    float: right;
}

.login-box-wrapper {
    display: block !important;
    background-color: #4d7f4b;
    background: url(/Gemuese/Styles/Img/nav-bg.png) repeat-y center center;
    background-color: #4d7f4b;
    padding: 13px 3%;
    float: right;
    position: absolute;
    top: -250px;
    width: 90%;
    z-index: 25;
    -webkit-transition: .2s all ease;
    -moz-transition: .2s all ease;
    -o-transition: .2s all ease;
    -ms-transition: .2s all ease;
    transition: .2s all ease;
    left: 2%;
    -webkit-box-shadow: 2px 2px 4px rgba(0,0,0,0.6);
    -moz-box-shadow: 2px 2px 4px rgba(0,0,0,0.6);
    box-shadow: 2px 2px 4px rgba(0,0,0,0.6);
}

.active-nav .login-box-wrapper {
    -webkit-transition: .2s all ease;
    -moz-transition: .2s all ease;
    -o-transition: .2s all ease;
    -ms-transition: .2s all ease;
    transition: .2s all ease;
    left: 82%;
}

.login-box {
    padding: 5px 0;
    border-top: 1px solid #a7b152;
    color: #a7b152;
}

    .login-box h3 {
        color: #a7b152;
        margin: 0;
        font-size: 1.4em;
        font-weight: 300;
        margin-top: 5px;
        margin-bottom: 10px;
    }

    .login-box input {
        width: 95%;
        height: 35px;
        font-style: italic;
        padding-left: 5%;
        border: none;
        outline: none;
        margin-top: 10px;
    }

    .login-box .row {
        margin-top: 0;
    }

    .login-box .left {
        float: left;
        width: 85%;
        line-height: 1.1em;
        font-size: 0.9em;
        margin-top: 10px;
    }

    .login-box .right {
        float: right;
        text-align: right;
        width: 15%;
        margin-top: 10px;
    }

a.register {
    color: #a7b152;
    text-decoration: none;
}

    a.register:hover {
        color: #4d7e4a;
    }


.login-wrapper {
    position: relative;
    margin-top: 25px;
    background: #4d7e4a;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}

    .login-wrapper a {
        display: block;
        color: #fff;
        font-size: 1.2em;
        text-decoration: none;
        width: 76px;
        height: 22px;
        padding: 8px 0 12px 50px;
    }

        .login-wrapper a:hover, .login-wrapper a.active {
            color: #4d7e4a;
            background: #295627;
        }

            .login-wrapper a:hover:before, .login-wrapper a.active:before {
                content: ' ';
                height: 0;
                position: absolute;
                width: 0;
                border: 13px solid transparent;
                border-bottom-color: #295627;
                bottom: 100%;
                left: 45px;
            }

        .login-wrapper a.logout:hover:before {
            border: none;
        }

        .login-wrapper a i {
            position: relative;
            top: 1px;
            display: block;
            float: left;
            background: url(img/login-sprite.png) no-repeat;
            background: url(img/login-sprite-low.png) no-repeat\9;
            background-position: 0 0;
            background-size: 32px 20px;
            width: 16px;
            height: 20px;
            margin-left: -35px;
        }

        .login-wrapper a.logout i {
            background: url(img/login-logout-access-sprite.png) no-repeat;
            background: url(img/login-logout-access-sprite-low.png) no-repeat\9;
            background-position: 0 0;
            background-size: 32px 63px;
            height: 23px;
        }

        .login-wrapper a:hover i, .login-wrapper a.active i {
            background-position: -16px 0;
        }

        .login-wrapper a.logout:hover i, .login-wrapper a.logout.active i {
            background-position: -16px 0;
        }

a.link-teaser {
    text-decoration: none;
    margin-bottom: 20px;
    display: block;
}

    a.link-teaser:hover .teaser-image {
        /* IE 8 */
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
        /* IE 5-7 */
        filter: alpha(opacity=70);
        /* Netscape */
        -moz-opacity: 0.7;
        /* Safari 1.x */
        -khtml-opacity: 0.7;
        /* Good browsers */
        opacity: 0.7;
    }

    a.link-teaser:hover span.arrow, a.link-teaser:hover .section span.arrow {
        background: url(img/arrow-sprite.png) no-repeat;
        background: url(img/arrow-sprite-low.png) no-repeat\9;
        background-position: 0 -18px;
        background-size: 36px 54px;
    }

    a.link-teaser:hover span, a.link-teaser:hover .section .label span {
        color: #4d7e4a;
        background-position: -18px -18px !important;
    }

a.arrow, span.arrow {
    display: block;
    background: url(img/arrow-sprite.png) no-repeat;
    background: url(img/arrow-sprite-low.png) no-repeat\9;
    background-position: 0 -18px;
    background-size: 36px 54px;
    width: 18px;
    height: 18px;
    margin-top: 5px;
    float: right;
}

    a.arrow.arrow-vegetables {
        margin-top: 30px;
    }

    a.arrow:hover, span.arrow:hover {
        background-position: -18px -18px;
    }

a.arrow-left {
    position: relative;
    display: block;
    color: #295627;
    text-decoration: none;
    font-size: 0.7em;
    line-height: 1.4em;
    width: 100%;
    margin-bottom: 30px;
}

    a.arrow-left i {
        position: absolute;
        display: block;
        background: url(img/arrow-sprite.png) no-repeat;
        background: url(img/arrow-sprite-low.png) no-repeat\9;
        background-position: 0 -18px;
        background-size: 36px 54px;
        width: 18px;
        height: 18px;
        left: -25px;
    }

    a.arrow-left:hover i {
        background-position: -18px -18px;
    }

h2 a {
    color: #4d7f4b;
    text-decoration: none;
}


.btn {
    float: right;
    background: #4d7e4a;
    border: none;
    color: #fff;
    text-align: right;
    padding: 3px 16px;
    margin-top: 10px;
    text-transform: uppercase;
    font-size: 0.9em;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    text-decoration: none;
    /*behavior: url(http://www.gemuese.ch/Gemuese/Gemuese/Scripts/PIE.htc);*/
}

    .btn:hover {
        background: #295627;
        color: #4d7e4a;
    }

    .btn.back:hover {
        color: #fff !important;
        background-color: #c8c8c8 !important;
    }

    .btn.login {
        padding: 0 16px;
        text-decoration: none;
    }

        .btn.login:hover {
            background: #295627;
            color: #4d7e4a;
        }

.paging-next {
    display: inline-block;
    background: url(img/arrow-sprite.png) no-repeat;
    background: url(img/arrow-sprite-low.png) no-repeat\9;
    background-position: 0 -18px;
    background-size: 36px 54px;
    width: 18px;
    height: 18px;
    text-indent: -9999px;
    position: relative;
    top: 4px;
}

.paging-prev {
    display: inline-block;
    background: url(img/arrow-sprite.png) no-repeat;
    background: url(img/arrow-sprite-low.png) no-repeat\9;
    background-position: 0 0;
    background-size: 36px 54px;
    width: 18px;
    height: 18px;
    text-indent: -9999px;
    position: relative;
    top: 4px;
}

.paging-next:hover {
    background-position: -18px -18px;
}

.paging-prev:hover {
    background-position: -18px 0;
}

a.bulletin {
    display: inline-block;
    zoom: 1;
    *display: inline;
    margin-top: 20px;
    color: #4d7f4b;
    text-decoration: none;
    padding-right: 25px;
    position: relative;
}

    a.bulletin span.arrow {
        position: absolute;
        right: 0;
        top: -1px;
    }

.lng {
    display: inline-block;
    zoom: 1;
    *display: inline;
    background: url(img/circle-sprite.png) no-repeat;
    background: url(img/circle-sprite-low.png) no-repeat\9;
    background-position: 0 3px;
    background-size: 42px 21px;
    width: 21px;
    height: 25px;
    text-align: center;
    line-height: 1.8em;
    margin: 0 !important;
}

a.lng {
    color: #4d7e4a;
    line-height: 1.7em;
    font-weight: normal !important;
}

    a.lng:hover, a.lng.active {
        background-position: -21px 3px;
        color: #fff;
    }

.image-right img {
    max-width: 100%;
}

.main .image-right {
    margin-top: 10px;
}


/* Styles for user-dropdown
-----------------------------------------------------------*/

.gemuese-dropdown {
    width: 100%;
    /* Size and position */
    position: relative; /* Enable absolute positionning for children and pseudo elements */
    margin: 0 auto;
    /*padding: 2px 35px 2px 20px;*/
    padding: 0;
    /* Styles */
    cursor: pointer;
    display: block;
    outline: none;
    color: #4d7f4b;
    background: #fff;
    text-transform: none;
}

.product .gemuese-dropdown {
    border: 1px solid #c4cb8c !important;
}

.gemuese-dropdown span {
    /* Size and position */
    position: relative; /* Enable absolute positionning for children and pseudo elements */
    margin: 0 auto;
    padding: 8px 25% 8px 5%;
    width: 70%;
    display: block;
    z-index: 5;
    /* Styles */
    background: #fff;
    cursor: pointer;
    outline: none;
    color: #4d7f4b;
    text-transform: none;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    /*behavior: url(http://www.gemuese.ch/Gemuese/Gemuese/Scripts/PIE.htc);*/
}

    .gemuese-dropdown span:after {
        content: " ";
        background: url(img/arrow-sprite.png) no-repeat;
        background: url(img/arrow-sprite-low.png) no-repeat\9;
        background-position: 0 -36px;
        background-size: 36px 54px;
        width: 18px;
        height: 18px;
        display: block;
        position: absolute;
        right: 10px;
        top: 14px;
        margin-top: -3px;
    }

.gemuese-dropdown .dropdown-wrapper {
    margin: 0;
    position: absolute;
    display: inline;
    top: -2px;
    left: 0;
    right: 0px;
    padding: 2px 0 0 0;
    z-index: 10;
    /* Hiding */
    opacity: 0;
    visibility /*\**/: hidden\9;
    pointer-events: none;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.gemuese-dropdown .dropdown {
    /* Size & position */
    margin: 0;
    padding: 20px 0;
    width: 100%;
    /* Styles */
    background: #fff !important;
    list-style: none;
    border: 1px solid #e8ecac;
    border-top: none;
    -webkit-box-shadow: 0 0 5px 2px rgba(233,236,148,1);
    -moz-box-shadow: 0 0 5px 2px rgba(233,236,148,1);
    box-shadow: 0 0 5px 2px rgba(233,236,148,1);
    position: relative !important;
    display: block !important;
    /*behavior: url(http://www.gemuese.ch/Gemuese/Gemuese/Scripts/PIE.htc);*/
}

    .gemuese-dropdown .dropdown li {
        -webkit-transition: all 0.3s ease-out;
        -moz-transition: all 0.3s ease-out;
        -ms-transition: all 0.3s ease-out;
        -o-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
        position: relative;
    }

        .gemuese-dropdown .dropdown li:hover {
            background: #e1e6af;
        }

        .gemuese-dropdown .dropdown li a {
            display: block;
            text-decoration: none;
            color: #4d7f4b;
            padding: 5px 15px;
            white-space: nowrap;
            position: relative;
        }

        /* Hover state */

        .gemuese-dropdown .dropdown li:hover a {
        }

/* Active state */

.gemuese-dropdown.active span:after {
    border-width: 0 5px 5px 5px;
}

.gemuese-dropdown.active .dropdown-wrapper {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.gemuese-dropdown.relative.active .dropdown-wrapper {
    position: relative;
    display: block;
    top: -43px;
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

.gemuese-dropdown.relative * {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

.gemuese-dropdown.relative .dropdown li {
    -webkit-transition: all 0.3s ease-out !important;
    -moz-transition: all 0.3s ease-out !important;
    -ms-transition: all 0.3s ease-out !important;
    -o-transition: all 0.3s ease-out !important;
    transition: all 0.3s ease-out !important;
}


/* No CSS3 support */
.no-opacity .gemuese-dropdown .dropdown,
.no-pointerevents .gemuese-dropdown .dropdown {
    display: none;
    visibility: hidden;
    opacity: 0; /* If opacity support but no pointer-events support */
    pointer-events: auto; /* If pointer-events support but no pointer-events support */
}

.no-opacity .gemuese-dropdown.active .dropdown,
.no-pointerevents .gemuese-dropdown.active .dropdown {
    display: block;
    visibility: visible;
}


/* =================== slider */

header .slider {
    position: absolute;
    top: 56px;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    z-index: 1;
    /*
    background: url(/Gemuese/Styles/Img/header.jpg);
background-size: cover;
background-position: center center;
        */
}

.slider-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.slider-inner-wrapper {
    /*width: 1440px;*/
    margin: 0 auto;
    position: relative;
    height: 100%;
    overflow: hidden;
}

.slider-controls {
    position: absolute;
    top: 80px;
    left: 0;
    z-index: 20;
    width: 100%;
}

    .slider-controls a.slider-button {
        display: block;
        width: 11px;
        height: 11px;
        background: url(img/slider-button-sprite.png) no-repeat;
        background: url(img/slider-button-sprite-low.png) no-repeat\9;
        background-position: 0 0;
        background-size: 22px 11px;
        float: left;
        margin-left: 5px;
    }

        .slider-controls a.slider-button:hover, .slider-controls a.slider-button.active {
            background-position: -11px 0;
        }

.slider-wrapper ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.slider-wrapper li {
    display: none;
    position: absolute;
    width: 100%;
}

    .slider-wrapper li:first-child {
        display: block;
    }


    .slider-wrapper li img {
        width: 110%;
        min-height: 100%;
    }

.slider-item {
    display: none;
}

    .slider-item:first-child {
        display: block;
    }

/* =================== main-nav */

header .main-nav {
    display: none;
}

nav.main-nav {
    background: #000;
    margin: 15px 0 30px 0;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    /*behavior: url(http://www.gemuese.ch/Gemuese/Gemuese/Scripts/PIE.htc);*/
    position: relative;
}

    nav.main-nav ul {
        padding: 0;
    }

    nav.main-nav a {
        font-family: 'Autour One';
        position: relative;
        text-transform: uppercase;
        width: 25%;
        padding: 18px 0 15px 0;
        display: block;
        float: left;
        text-align: center;
        text-decoration: none;
    }

        nav.main-nav a, nav.main-nav a:visited {
            color: #fff;
        }

            nav.main-nav a.active, nav.main-nav a:hover, nav.main-nav .subnav-bg:hover + a {
                color: #A6B052;
                background: url(img/nav-a-bg.png) center center;
            }

                nav.main-nav a.active:after, nav.main-nav a:hover:after {
                    top: 100%;
                    content: " ";
                    height: 15px;
                    left: 0;
                    right: 0;
                    background: url(img/nav-arrow.png) no-repeat;
                    background: url(img/nav-arrow-low.png) no-repeat\9;
                    background-position: center center;
                    background-size: 28px 15px;
                    position: absolute;
                    margin: 0;
                    padding: 0;
                }

    nav.main-nav .subnav-bg {
        height: auto;
        max-height: 0;
        overflow: hidden;
        background: url(img/nav-bg.png) center center;
        position: absolute;
        left: 0;
        top: 97%;
        margin: 20px;
        -webkit-box-shadow: 2px 2px 4px rgba(0,0,0,0.6);
        -moz-box-shadow: 2px 2px 4px rgba(0,0,0,0.6);
        box-shadow: 2px 2px 4px rgba(0,0,0,0.6);
    }


    nav.main-nav .subnav {
        padding: 0 2% 0 2%;
    }

    /*fixed IE8 problem*/
    nav.main-nav a.active + .subnav-bg, /*nav.main-nav a:hover + .subnav-bg,*/ nav.main-nav .subnav-bg:hover {
        height: auto;
        max-height: 1000px;
        -webkit-transition: all 1s ease-in-out;
        -moz-transition: all 1s ease-in-out;
        -o-transition: all 1s ease-in-out;
        transition: all 1s ease-in-out;
    }

    nav.main-nav a + .subnav-bg {
        max-height: 0;
    }

    nav.main-nav .subnav a {
        background: none;
        text-align: left;
        font-size: 1em;
        width: 100%;
        height: 100%;
        background: none;
        font-family: 'Roboto';
        color: #A6B052;
        padding: 0;
        margin: 20px 0 0 0;
        border-top: 1px solid #A6B052;
        border-bottom: 1px solid #A6B052;
    }

        nav.main-nav .subnav a:hover {
            color: #4d7e4a;
            border-top: 1px solid #4d7e4a;
            border-bottom: 1px solid #4d7e4a;
        }

    nav.main-nav .subnav li {
        position: relative;
        display: block;
        float: left;
        width: 23%;
        margin-left: 2.5%;
    }

        nav.main-nav .subnav li:first-child {
            margin-left: 0;
        }

    nav.main-nav .subnav a:after {
        display: none;
    }

    nav.main-nav ul.level-1 {
        width: 92%;
    }

    nav.main-nav .subnav a + ul.level-2 {
        display: block;
        left: 0;
        top: 100%;
    }

    nav.main-nav .subnav.level-2 {
    }

        nav.main-nav .subnav.level-2 li {
            float: none;
            display: inline;
            position: static;
            margin: 0;
        }

        nav.main-nav .subnav.level-2 a {
            text-transform: none;
            padding: 0;
            font-size: 0.8em;
            color: #fff;
            border: none;
            margin: 0;
        }

            nav.main-nav .subnav.level-2 a:hover {
                color: #A6B052;
                text-decoration: underline;
            }

nav.left-nav {
    padding: 3%;
    font-size: 0.7em;
}

    nav.left-nav h2 {
        font-size: 2em;
        text-align: center;
        text-transform: uppercase;
        font-family: 'Autour One';
        color: #000;
    }

    nav.left-nav ul {
        padding: 0;
    }

        nav.left-nav ul ul {
            margin: 0;
        }

        nav.left-nav ul li {
            display: block;
            padding: 0;
            margin-top: 0;
        }

            nav.left-nav ul li:first-child {
                margin-top: 0;
            }

            nav.left-nav ul li:hover, nav.left-nav ul li.active {
            }

            nav.left-nav ul li a {
                color: #a7b152;
                border-bottom: 1px solid #a7b152;
                font-size: 1.4em;
                line-height: 1.8em;
                text-decoration: none;
                text-transform: uppercase;
                display: block;
            }

                nav.left-nav ul li a:hover {
                    color: #4d7e4a;
                }

            nav.left-nav ul li:first-child a {
                border-top: 1px solid #a7b152;
            }

    nav.left-nav a.loggedin, nav.left-nav a.login {
        position: relative;
    }

        nav.left-nav a.login:after {
            position: absolute;
            right: 0;
            content: " ";
            width: 16px;
            height: 21px;
            background: url(img/login-logout-access-sprite.png) no-repeat;
            background: url(img/login-logout-access-sprite-low.png) no-repeat\9;
            background-position: 0 -45px;
            background-size: 32px 63px;
            top: 3px;
        }

        nav.left-nav a.loggedin:after {
            position: absolute;
            right: 0;
            content: " ";
            width: 16px;
            height: 21px;
            background: url(img/login-logout-access-sprite.png) no-repeat;
            background: url(img/login-logout-access-sprite-low.png) no-repeat\9;
            background-position: 0 -23px;
            background-size: 32px 63px;
            top: 1px;
        }

    nav.left-nav ul ul {
        display: none;
    }

    nav.left-nav ul li.active ul {
        display: block;
        border-bottom: 1px solid #a7b152;
    }

    nav.left-nav ul li li {
        padding: 0;
        margin: 0;
    }

        nav.left-nav ul li li:first-child a {
            border-top: none;
        }

        nav.left-nav ul li li a {
            color: #121212;
            text-transform: none;
            border-bottom: none;
            border-top: 1px solid #121212;
        }

        nav.left-nav ul li li.active a {
            text-decoration: underline;
        }

        nav.left-nav ul li li ul {
            margin-left: 15px;
            display: none !important;
        }

        nav.left-nav ul li li.active ul {
            display: block !important;
        }

        nav.left-nav ul li li ul li a {
            text-decoration: none !important;
        }


.container {
    width: 100%;
    overflow: hidden;
}

/* =================== main */



.main-container {
    position: relative;
    overflow: hidden;
}

.main {
    position: relative;
    z-index: 0;
}

    .main aside .section {
        border-top: 1px solid #628e60;
        margin-top: 10px;
    }

    .main p, .paragraph {
        color: #141414;
        font-size: 0.85em;
        line-height: 1.4em;
        margin: 5px 0 0 0;
    }

.table-wrapper {
    overflow: hidden;
    overflow-x: auto;
}


.main .youtube-frame {
    position: relative;
    padding: 2%;
    -webkit-box-shadow: 0 5px 10px #c8c2bd;
    -moz-box-shadow: 0 5px 10px #c8c2bd;
    box-shadow: 0 5px 10px #c8c2bd;
    margin-bottom: 15px;
}

.main .youtube-wrapper {
    position: relative;
    padding-bottom: 58.5%;
    padding-top: 10px;
    height: 0;
}

    .main .youtube-wrapper iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

.main .label {
    position: absolute;
    z-index: 30;
    right: -12px;
    bottom: 40px;
}

    .main .label a, .main .label span {
        display: block;
        background: url(/Gemuese/Styles/Img/label.png) no-repeat;
        width: 118px;
        height: 24px;
        color: #fff;
        text-decoration: none;
        text-transform: uppercase;
        font-size: 0.9em;
        padding: 6px 5px 5px 10px;
    }

        .main .label a:hover, .main .label span:hover {
            color: #4d7e4a;
            background: url(/Gemuese/Styles/Img/label-hover.png) no-repeat;
        }

.main aside {
    padding: 4%;
    margin: 0 0 0 0;
    background: #fff;
}

    .main aside .section {
        border-top: 1px solid #628e60;
        margin-top: 10px;
    }

    .main aside .link-teaser:first-child .section {
        margin-top: 0;
    }

    .main aside a.arrow {
        padding-left: 10px;
    }

    .main aside.left {
        margin: 0 3% 25px;
    }

        .main aside.left.no-nav {
            margin: 0;
        }

    .main aside.right {
    }



.main .related {
    margin-top: 15px;
    padding-left: 25px;
}

.main aside.right p {
    margin-bottom: 30px;
}

.main article {
    padding: 10px 4%;
    margin: 0;
    background: #fff;
}

    .main article .home-container {
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid #628e60;
    }

.main .logo-row {
    background: #fff;
    top: 30px;
}

.main .logo-swiss-diva, .logo-swiss-diva-left {
    display: none;
}

.main .logo-natural-wrapper {
    position: relative;
    float: right;
    margin-bottom: 15px;
}

    .main .logo-natural-wrapper img {
        max-width: 320px;
    }

.main article.wide section:first-child, .main article.login section:first-child {
    border-top: 1px solid #a7b152;
}

.main article.hub section:first-child {
    border-top: 1px solid #a7b152;
}

.main article.home section {
    border-top: 1px solid #628e60;
    padding-bottom: 10px;
}

.main .col3 {
}

.main span.btn {
    float: right;
    padding-top: 0;
    padding-bottom: 0;
    height: 25px;
    line-height: 1.6em;
}

.main .link-teaser:hover span.btn {
    background: #295627;
    color: #4d7e4a;
}

.main a.btn.back, .main a.btn.back:hover {
    color: #fff;
    background-color: #c8c8c8;
    text-decoration: none;
    padding: 3px 9px;
    float: left;
}

.main .btn.news {
    padding: 0px 9px;
    margin-top: 30px;
}

.main a.btn.back.recipes {
    float: right;
}


.main a.btn.back.vegetables {
    position: absolute;
    bottom: 0;
    right: 0;
    float: right;
}

.main .cart a.btn.back {
    padding: 0px 9px;
}

.main .col6:first-child {
    padding-left: 0;
}

.main .col6 .btn {
    text-decoration: none;
    padding: 0 22px;
    float: left;
}

    .main .col6 .btn:hover, .main .col6 .btn.active {
        background: #295627;
        color: #4d7e4a;
    }

.main .col6 {
    padding-left: 4%;
}

.main .link-teaser:first-child .col4, .main .row.price .col4:first-child {
    padding-left: 0;
}

.main .row.shop-overview {
    margin-top: -30px;
}

.main p, .paragraph {
    margin: 0;
}

    .paragraph.staff {
        padding-top: 10px;
    }

    .paragraph h2 {
        font-size: 1em;
    }

    .paragraph h3 {
        margin-bottom: 20px;
    }

    .paragraph a {
        text-decoration: none;
        color: #4d7e4a;
    }

    .main p.lead {
        color: #a7b152;
        margin-bottom: 30px;
        width: 80%;
        font-size: 0.95em;
    }

        .main p.lead.video {
            margin-bottom: 0;
        }

    .main p a {
        color: #4d7f4b;
        text-decoration: none;
    }

    .main p.lead.calendar {
        font-size: 1.4em;
        margin-bottom: 10px;
    }

        .main p.lead.calendar #selected-month {
            text-transform: uppercase;
        }

.main article.wide.search-page {
    padding-left: 3%;
}

.main .search-page .input-wrapper {
    margin-top: 0;
    position: relative;
}

.main .search-page input[type=text] {
    width: 40%;
    padding-left: 2%;
    float: left;
}

.main .search-page .btn {
    float: left;
    text-decoration: none;
    padding: 0 16px;
}

.main .search-page h1 {
    margin-bottom: 10px;
}

.main .search-page a {
    text-decoration: none;
}

.main .product-image {
    float: left;
    width: 30%;
}

    .main .product-image img {
        max-width: 100%;
    }

.main .product-details {
    float: left;
    width: 65%;
    padding-left: 5%;
}

    .main .product-details .cart {
        position: relative;
        width: 100%;
        float: left;
        margin-bottom: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid #a7b152;
    }


.main .bottom {
    position: absolute;
    bottom: 20px;
    right: 0;
}

.main .shop-progress {
    margin: 40px 0 20px 0;
}

    .main .shop-progress div {
        float: left;
        width: 32%;
        color: #fff;
        background: #c8c8c8;
        margin-left: 1%;
        text-align: center;
        position: relative;
        text-transform: uppercase;
        font-size: 0.8em;
    }

        .main .shop-progress div.active {
            background: #a7b152;
        }

        .main .shop-progress div:first-child {
            margin-left: 0;
        }

        .main .shop-progress div:before {
            position: absolute;
            z-index: 5;
            content: " ";
            width: 0;
            height: 0;
            border-top: 13px solid transparent;
            border-bottom: 13px solid transparent;
            border-left: 13px solid #fff;
            left: 0;
        }

        .main .shop-progress div:first-child:before {
            border: none;
        }

        .main .shop-progress div:after {
            position: absolute;
            z-index: 10;
            content: " ";
            width: 0;
            height: 0;
            border-top: 13px solid transparent;
            border-bottom: 13px solid transparent;
            border-left: 13px solid #c8c8c8;
            right: -13px;
            top: 0;
        }

        .main .shop-progress div.active:after {
            border-left: 13px solid #a7b152;
        }

        .main .shop-progress div a {
            text-decoration: none;
            color: #fff;
        }

.main .product-details .price {
    font-size: 1.5em;
    margin-bottom: 30px;
}

.main article.hub {
    position: relative;
}

.main .shop-wrapper {
    position: relative;
}

    .main .shop-wrapper .title-lead {
        min-height: 90px;
    }

.main .amount {
    float: left;
}

    .main .amount input {
        width: 45px;
        display: block;
        margin-top: 10px;
    }

.main .cart .back {
    float: left;
}

.main .cart .proceed {
    float: right;
}

.main .cart a.btn {
    padding: 0 9px;
    text-decoration: none;
}

    .main .cart a.btn.checkout {
        margin-left: 10px;
    }

    .main .cart a.btn:hover {
        background: #295627;
        color: #4d7e4a;
    }

.main .cart-row {
    border-top: 1px solid #a7b152;
    padding: 20px 0;
    font-size: 0.75em;
}

    .main .cart-row:first-child {
        border-top: none;
    }

    .main .cart-row.controls {
        padding: 0;
    }

    .main .cart-row.shipping, .main .cart-row.total {
        padding: 10px 0 35px 0;
    }

    .main .cart-row.shipping {
        border-bottom: 2px solid #a7b152;
    }

    .main .cart-row .article {
        position: relative;
        float: left;
        width: 65%;
    }

    .main .cart-row .head h2 {
        color: #121212;
        line-height: 0.5em;
    }

    .main .cart-row .article .image-wrapper {
        float: left;
        width: 20%;
        min-height: 60px;
    }

        .main .cart-row .article .image-wrapper img {
            max-width: 100%;
        }

    .main .cart-row .article .detail {
        float: left;
        padding-left: 5%;
        width: 60%;
    }

        .main .cart-row .article .detail .bottom {
            position: relative;
            float: left;
            bottom: 0;
        }

    .main .cart-row .units {
        float: left;
        width: 10%;
    }

        .main .cart-row .units input {
            width: 25px;
        }

        .main .cart-row .units span {
            text-transform: uppercase;
            color: #4d7f4b;
        }

    .main .cart-row .price {
        float: left;
        width: 20%;
        padding-left: 3%;
    }

.main .cart .article span.tax {
    color: #969696;
}

.main .input-wrapper {
    margin-top: 20px;
}

    .main .input-wrapper.vegetables {
        margin-top: 50px;
    }

        .main .input-wrapper.vegetables .btn {
            margin-left: 10px;
        }

.char-button {
    display: block;
    color: #4d7f4b;
    text-decoration: none;
    float: left;
    background: #fff;
    padding: 0 5px;
    margin-left: 2px;
    margin-top: 3px;
    font-size: 0.85em;
    line-height: 1.5em;
}

    .char-button.active {
        color: #fff;
        background: #4d7f4b;
    }

.checkbox-wrapper {
}

.main input[type="checkbox"] {
    background: #fff;
    border: 0;
    outline: 0;
    width: 20px;
    height: 20px;
}

input[type="checkbox"] {
    outline: none;
    border: none;
    opacity: 0;
    filter: alpha(opacity=0);
    top: 4px;
}

.checkbox {
    background: #fff;
    width: 24px;
    height: 24px;
    position: relative;
}

    .checkbox.login {
        border: 1px solid #c4cb8c;
    }

    .checkbox.checked {
        background: url(img/checkbox.png) no-repeat;
        background: url(img/checkbox-low.png) no-repeat\9;
        background-position: 0;
        background-size: 24px 24px;
    }

    .checkbox.error {
    }

.main .form-wrapper {
    background: #ebeed9;
    padding: 0 10px 20px 10px;
}

.main input[type="text"], .main input[type="password"], .main .input-wrapper textarea {
    outline: none;
    padding: 2%;
    border: 1px solid #c4cb8c;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    /*behavior: url(http://www.gemuese.ch/Gemuese/Gemuese/Scripts/PIE.htc);*/
}

.main .checkbox.checkout {
    border: 1px solid #c4cb8c;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    /*behavior: url(http://www.gemuese.ch/Gemuese/Gemuese/Scripts/PIE.htc);*/
    float: left;
}

.main label.checkout {
    float: left;
    width: 85%;
}

.main input[type="text"]:focus, .main input[type="password"]:focus, .main .input-wrapper textarea:focus {
    outline: none;
    border-color: #a7b152;
    -webkit-box-shadow: 0 0 5px 2px rgba(233,236,148,1);
    -moz-box-shadow: 0 0 5px 2px rgba(233,236,148,1);
    box-shadow: 0 0 5px 2px rgba(233,236,148,1);
    /*behavior: url(http://www.gemuese.ch/Gemuese/Gemuese/Scripts/PIE.htc);*/
}

.main input[type="text"].error {
}

.main .facts {
    float: right;
    background: url(img/blackboard.jpg) no-repeat;
    width: 350px;
    height: 270px;
    margin-bottom: 10px;
    font-family: 'Autour One';
    font-size: 0.75em;
    line-height: 1.5em;
}

    .main .facts ul {
        margin-left: 20px;
        margin-top: 50px;
        width: 65%;
        color: #fff;
    }

.main .input-wrapper label {
    display: block;
    color: #4d7f4b;
    text-transform: uppercase;
    margin-bottom: 5px;
    font-size: 0.9em;
}

.main .input-wrapper input[type=text], .main .input-wrapper input[type=password] {
    width: 96%;
    height: 30px;
}

.main .input-wrapper textarea {
    height: auto;
    width: 45%;
}

    .main .input-wrapper textarea.wide {
        width: 95%;
        height: 200px;
    }

.main .input-wrapper input.zip {
    float: left;
    width: 19% !important;
}

.main .input-wrapper input.city {
    float: right;
    width: 70% !important;
    margin-left: -2px;
}

.main .input-wrapper.vegetarian .checkbox {
    float: left;
}

.input-wrapper.login .checkbox, .form-wrapper.form .checkbox {
    float: left;
}

.input-wrapper.vegetarian label, .input-wrapper.login label, .form-wrapper.form label {
    float: left;
    margin-left: 10px;
}

.login-box .input-wrapper.login {
    margin-top: 10px;
    font-size: 0.8em;
    float: left;
}


.main .form-error p {
    color: red;
}

.main input.error {
    border: 1px solid red;
}

.main .use-delivery-address, .main .cb-terms {
    float: left;
}

.main .same-address, .main .terms {
    float: left;
    margin-left: 10px;
    margin-top: 3px;
    text-transform: none !important;
    color: #121212 !important;
}

.main .same-address {
    width: 90%;
}

#delivery-form {
    display: none;
}

/* Shopping Cart Preview*/

.cart-preview {
    position: absolute;
    top: 21px;
    right: 4%;
}

    .cart-preview.start {
        margin-top: 10px;
    }

.cart-text {
    color: #a7b152;
    font-size: 0.9em;
}

a.cart-icon {
    display: block;
    background: url(img/car-sprite.png) no-repeat;
    background: url(img/car-sprite-low.png) no-repeat\9;
    background-position: 0 0;
    background-size: 54px 52px;
    width: 27px;
    height: 24px;
}

    a.cart-icon:hover {
        background-position: -27px 0;
    }

    a.cart-icon.full {
        background-position: 0 -24px;
        height: 28px;
    }

        a.cart-icon.full:hover {
            background-position: -27px -24px;
        }

.main .frame img {
    width: 100%;
}

.main .youtube-frame {
}

.main .youtube-wrapper {
}

    .main .youtube-wrapper iframe {
    }

.main .label {
}

    .main .label a, .main .label span {
    }

        .main .label a:hover, .main .label span:hover {
        }

.paging {
    width: 100%;
}

    .paging .btn {
        padding: 0 9px;
        margin: 0;
        float: none !important;
    }

    .paging a {
        color: #c8c2bd;
        text-decoration: none;
        font-size: 0.85em;
    }

        .paging a:hover, .paging a.active {
            color: #4d7f4b;
        }

        .paging a.btn {
            text-decoration: none;
            color: #fff;
        }

    .paging ul {
        margin: 0 auto;
        padding: 0;
        text-align: center;
    }

    .paging li {
        margin-left: 20px;
        display: inline;
    }

        .paging li:first-child {
            margin-left: 0;
        }

/* =================== sitemap */
.main .sitemap {
    width: 100%;
    padding: 0;
    padding-top: 10px;
    margin-left: 0;
    margin-right: 0;
}

    .main .sitemap .padding-wrapper {
        margin: 15px 4% 0 4%;
        border-top: 1px solid #628e60;
    }

.sitemap ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid #a7b152;
    overflow: hidden;
    position: relative;
}


    .sitemap ul ul li {
        margin-top: 10px;
    }

        .sitemap ul ul li li {
            margin-top: 0;
        }

    .sitemap ul li {
        width: 100%;
        margin-bottom: -99999px;
        padding-bottom: 99999px;
    }

        .sitemap ul li li {
            border: none;
        }

    .sitemap ul ul {
        border-bottom: 0;
    }



        .sitemap ul ul ul ul {
            padding-left: 15px;
        }

            .sitemap ul ul ul ul li:before {
                content: "\2013\A0";
                position: absolute;
                left: 0;
            }

    .sitemap ul a, .sitemap ul a:hover, .sitemap ul a:visited {
        color: #628e60;
        text-decoration: none;
        text-transform: uppercase;
        font-size: 0.9em;
    }

    .sitemap ul ul a, .sitemap ul ul a:hover, .sitemap ul ul a:visited {
        color: #a7b152;
        text-decoration: none;
        text-transform: none;
    }

    .sitemap ul ul ul a, .sitemap ul ul ul a:hover, .sitemap ul ul ul a:visited {
        color: #000;
        text-decoration: none;
    }


/* =================== footer */

.footer-container {
    background: #1a1a1a;
}

footer h3 {
    margin: 5px 0;
}

.breadcrumb-wrapper {
    width: 95%;
    padding: 6px 2.5%;
    background: #fff;
}

    .breadcrumb-wrapper a {
        color: #141414;
        font-size: 0.85em;
        text-decoration: none;
    }

    .breadcrumb-wrapper span {
        color: #4d7f4b;
        font-size: 0.85em;
    }

    .breadcrumb-wrapper a:hover {
        text-decoration: underline;
    }

.main .form-wrapper .row.vegetables {
    position: relative;
}

/* =================== Lehrstellen */


/* =================== SEASON CALENDAR */


#calendar {
    position: relative;
    padding-top: 30px;
    overflow: hidden;
    margin-top: 15px;
}

#season-vegetables {
    margin: 0;
    padding: 0;
    border-top: 1px solid #4d7f4b;
    border-bottom: 1px solid #4d7f4b;
    margin: 20px 0;
    padding: 20px 0;
    min-height: 40px;
    position: relative;
}

    #season-vegetables li {
        float: left;
        list-style: none;
        display: none;
        color: #000 !important;
        position: relative;
        margin-right: 10px;
    }

        #season-vegetables li img {
            margin: 0;
            max-width: 100px;
        }

.links {
    position: relative;
    margin-bottom: 10px;
}

    .links a {
        margin: 10px 10px 0 0;
        margin-right: 10px;
    }

        .links a.bulletin {
        }

            .links a.bulletin span.arrow {
            }


#seasoncalendar[data-month="january"] #season-vegetables li.january,
#seasoncalendar[data-month="february"] #season-vegetables li.february,
#seasoncalendar[data-month="march"] #season-vegetables li.march,
#seasoncalendar[data-month="april"] #season-vegetables li.april,
#seasoncalendar[data-month="may"] #season-vegetables li.may,
#seasoncalendar[data-month="june"] #season-vegetables li.june,
#seasoncalendar[data-month="july"] #season-vegetables li.july,
#seasoncalendar[data-month="august"] #season-vegetables li.august,
#seasoncalendar[data-month="september"] #season-vegetables li.september,
#seasoncalendar[data-month="october"] #season-vegetables li.october,
#seasoncalendar[data-month="november"] #season-vegetables li.november,
#seasoncalendar[data-month="december"] #season-vegetables li.december {
    display: inline;
}

#season-vegetables li .title {
    display: none;
}

    #season-vegetables li .title:before {
        content: ' ';
        height: 0;
        position: absolute;
        width: 0;
        border: 5px solid transparent;
        border-top-color: #4d7e4a;
        top: 100%;
        left: 7px;
    }


#season-vegetables li:hover .title {
    content: " ";
    position: absolute;
    display: block;
    top: -5px;
    left: 0;
    background: #cecece;
    text-transform: uppercase;
    background: #4d7f4b;
    color: #fff;
    padding: 5px 7px;
    line-height: 1.2em;
    font-size: 0.7em;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    /*behavior: url(http://www.gemuese.ch/Gemuese/Gemuese/Scripts/PIE.htc);*/
}


#calendar .col {
    float: left;
    width: 47px;
    height: 30px;
}

    #calendar .col .border-wrapper {
        border-left: 1px solid #4d7f4b;
        height: 100%;
        padding: 0 6%;
        width: 85%;
        z-index: 30;
        position: absolute;
    }

    #calendar .col:first-child .border-wrapper {
        border-left: none;
    }

#calendar .vegetable {
    margin: 0;
}

    #calendar .vegetable .col, #mobile-vegetables .row {
        background: #eee;
    }

#mobile-vegetables .row {
    display: none;
}

    #mobile-vegetables .row.hasSeason {
        display: block;
    }


#calendar .vegetable .months-wrapper .col {
    position: relative;
}

#calendar .col.odd, #calendar .odd .col, #mobile-vegetables .odd.row {
    background: #fff;
}

#calendar .index {
    padding-top: 30px;
    background: #fff;
    top: 0;
    position: absolute;
    z-index: 40;
    border-right: 1px solid green;
}

#calendar .label-wrapper {
    position: relative;
    width: 100px;
    background: #eee;
    float: none;
}

#calendar .label {
    padding: 0 6%;
    height: 100%;
    position: relative;
    overflow: hidden;
    top: auto;
    left: 0;
    right: auto;
    bottom: auto;
    z-index: 1;
    font-size: 0.8em;
    font-weight: bold;
    display: block;
    text-decoration: none;
    color: #969696;
}

#calendar #dd-mobile-months {
    margin: 0 0 10px 0;
    width: 100%;
    padding: 10px;
}

#calendar #mobile-vegetables {
    list-style: none;
    margin: 0;
    padding: 0;
}

#calendar .mobile-label {
    padding: 7px 4px;
}

#calendar .hasSeason .label {
    color: #4d7f4b;
}

#calendar .label:hover {
    text-decoration: underline;
}

#months .seasonmonth {
    font-size: 0.7em;
    color: #4d7f4b;
    text-align: center;
    font-weight: bold;
}

#calendar .vegetable.odd .label-wrapper {
    background: #fff;
}

.months-wrapper {
    position: relative;
    padding-left: 100px;
    overflow: visible;
    min-width: 564px;
}

#calendar #months {
    margin: 0;
    position: absolute;
    padding-left: 0;
    top: 0;
    min-width: 560px;
    z-index: 25;
}

#months .months-wrapper {
    position: relative;
    background: #fff;
    z-index: 45;
}

.seasonmonth {
    cursor: pointer;
}

#calendar #months .seasonmonth {
    position: relative;
}

#calendar #months .label {
    background: #fff;
}

#calendar .seasonmonth {
    height: 30px;
}

    #calendar .seasonmonth.season:after {
        background: #ccc !important;
        position: absolute;
        display: block;
        content: " ";
        top: 25%;
        bottom: 25%;
        width: 100%;
    }

#calendar .hasSeason .seasonmonth.season:after {
    background: #a7b152 !important;
}

#calendar .seasonmonth:before {
    display: none;
    position: absolute;
    content: " ";
    width: 100%;
    height: 100%;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    z-index: 20;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -ms-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
}

#seasoncalendar.january .seasonmonth.january, #seasoncalendar[data-month="january"] .january,
#seasoncalendar.february .seasonmonth.february, #seasoncalendar[data-month="february"] .february,
#seasoncalendar.march .seasonmonth.march, #seasoncalendar[data-month="march"] .march,
#seasoncalendar.april .seasonmonth.april, #seasoncalendar[data-month="april"] .april,
#seasoncalendar.may .seasonmonth.may, #seasoncalendar[data-month="may"] .may,
#seasoncalendar.june .seasonmonth.june, #seasoncalendar[data-month="june"] .june,
#seasoncalendar.july .seasonmonth.july, #seasoncalendar[data-month="july"] .july,
#seasoncalendar.august .seasonmonth.august, #seasoncalendar[data-month="august"] .august,
#seasoncalendar.september .seasonmonth.september, #seasoncalendar[data-month="september"] .september,
#seasoncalendar.october .seasonmonth.october, #seasoncalendar[data-month="october"] .october,
#seasoncalendar.november .seasonmonth.november, #seasoncalendar[data-month="november"] .november,
#seasoncalendar.december .seasonmonth.december, #seasoncalendar[data-month="december"] .december {
    color: #fff;
    z-index: 30;
}

    #seasoncalendar.january .seasonmonth.january:before, #seasoncalendar[data-month="january"] .january:before,
    #seasoncalendar.february .seasonmonth.february:before, #seasoncalendar[data-month="february"] .february:before,
    #seasoncalendar.march .seasonmonth.march:before, #seasoncalendar[data-month="march"] .march:before,
    #seasoncalendar.april .seasonmonth.april:before, #seasoncalendar[data-month="april"] .april:before,
    #seasoncalendar.may .seasonmonth.may:before, #seasoncalendar[data-month="may"] .may:before,
    #seasoncalendar.june .seasonmonth.june:before, #seasoncalendar[data-month="june"] .june:before,
    #seasoncalendar.july .seasonmonth.july:before, #seasoncalendar[data-month="july"] .july:before,
    #seasoncalendar.august .seasonmonth.august:before, #seasoncalendar[data-month="august"] .august:before,
    #seasoncalendar.september .seasonmonth.september:before, #seasoncalendar[data-month="september"] .september:before,
    #seasoncalendar.october .seasonmonth.october:before, #seasoncalendar[data-month="october"] .october:before,
    #seasoncalendar.november .seasonmonth.november:before, #seasoncalendar[data-month="november"] .november:before,
    #seasoncalendar.december .seasonmonth.december:before, #seasoncalendar[data-month="december"] .december:before {
        background: #4d7f4b !important;
        display: block;
    }

#seasoncalendar .y-scroll-wrapper {
    height: 200px;
}

#seasoncalendar .x-scroll-wrapper {
    overflow: scroll;
    position: static;
    height: 400px;
}

#seasoncalendar .top-left-white {
    width: 100px;
    height: 30px;
    background: #fff;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 50;
}

#calendar #vegetables {
    margin: 0;
    width: 644px;
}

/* =================== VEGETABLES */

.vegetable-wrapper h2 {
    margin-bottom: 10px;
}

a.btn.veg-detail, a.btn.veg-detail:hover {
    float: right;
    background: #a7b152;
    color: #fff;
}

a.btn.recipe {
    float: left;
    margin: 20px 0;
    display: inline-block;
}

.col-vegetable {
    float: left;
    width: 55%;
}

    .col-vegetable img {
        max-width: 80% !important;
    }

.col-actions {
    float: right;
    width: 30%;
    margin-right: 5%;
}

.main section.search-result, .main section.recipe-detail, .main section.documents {
    margin-bottom: 30px;
}

    .main section.recipe-detail img {
        max-width: 100%;
    }

.main .col4 .price {
    color: #121212;
}

/* =================== FOOTER */

footer p {
    color: #fff;
    font-size: 0.75em;
    line-height: 1.4em;
}

footer a {
    color: #fff;
    text-decoration: none;
    line-height: 1.4em;
}

    footer a.social-link {
        font-size: 0.75em;
        display: block;
        position: relative;
        padding-top: 13px;
        padding-left: 38px;
        height: 25px;
    }

        footer a.social-link:before {
            content: " ";
            position: absolute;
            left: 0;
            width: 28px;
            height: 28px;
            background: url(img/social-sprite.png) no-repeat;
            background: url(img/social-sprite-low.png) no-repeat\9;
            background-position: 0 0;
            background-size: 56px 82px;
        }

        footer a.social-link:hover:before {
            background-position: -28px 0;
        }

        footer a.social-link.youtube:before {
            background-position: 0 -28px;
        }

        footer a.social-link.youtube:hover:before {
            background-position: -28px -28px;
        }

        footer a.social-link.tv:before {
            background-position: 0 -56px;
        }

        footer a.social-link.tv:hover:before {
            background-position: -28px -56px;
        }

        footer a.social-link.instagram:before {
            background: url(img/instagram.png) no-repeat;
            background: url(img/instagram-low.png) no-repeat\9;
            background-size: 28px;
        }

        footer a.social-link.instagram:hover:before {
            background: url(img/instagram-hover.png) no-repeat;
            background: url(img/instagram-hover-low.png) no-repeat\9;
        }

footer .social-wrapper {
    padding: 35px 1% 0 1.5%;
}

    footer .social-wrapper .social {
        width: 100%;
        border-top: 1px solid #a7b152;
    }

footer .contact-wrapper {
    padding: 35px 1% 35px 1.5%;
}

    footer .contact-wrapper .contact {
        float: left;
        width: 100%;
        border-top: 1px solid #a7b152;
    }

    footer .contact-wrapper .contact-inner {
        float: left;
    }

        footer .contact-wrapper .contact-inner a {
            color: #a7b152;
        }

    footer .contact-wrapper .vsgp-logo {
        float: left;
        margin-top: 100px;
    }


    footer .contact-wrapper .vsgp-logo {
        margin: 2%;
        margin-left: 0;
    }

        footer .contact-wrapper .vsgp-logo img {
            max-width: 150px;
        }


.mobile-hidden, .tablet-hidden {
    display: none !important;
}

a.mobile-category-title {
    color: #121212;
}

.gmap {
    height: 300px;
    margin-top: 20px;
    width: 100%;
}

.row .gmap img {
    max-width: none !important;
}

.info-box-wrapper a {
    text-decoration: none;
    color: #121212;
}

.tags {
    margin-top: 15px;
}

    .tags a.btn {
        color: #fff;
        display: inline-block;
        margin-right: 10px;
        padding: 3px 9px;
        float: left;
    }

.apprentice h2 {
    font-size: 2em;
    font-weight: 700;
    margin-bottom: 20px;
}

.apprentice .row-filter {
    margin-bottom: 20px;
}

.apprentice .col-label, .apprentice .col-values {
    color: #4d7f4b;
    font-size: 0.9em;
}

.apprentice .col-label {
    text-transform: uppercase;
    font-weight: 700;
}

.apprentice .col-25 {
    float: left;
    width: 22%;
    margin-left: 4%;
}

    .apprentice .col-25:first-child {
        margin-left: 0;
    }

.apprentice .col-33 {
    float: left;
    width: 32%;
    margin-left: 2%;
}

    .apprentice .col-33:first-child {
        margin-left: 0;
    }

.apprentice .col-50, .apprentice-list .col-50 {
    float: left;
    width: 48%;
    margin-left: 4%;
}

    .apprentice .col-50:first-child, .apprentice-list .col-50:first-child {
        margin-left: 0;
    }

.apprentice-list {
    font-size: 0.9em;
    line-height: 1.2em;
}

    .apprentice-list .col-40.green {
        color: #4d7f4b;
    }

.apprentice .checkbox {
    float: left;
    margin-right: 5px;
}

.apprentice-list {
    border-bottom: 1px solid #4d7f4b;
    padding-bottom: 30px;
}

h2.apprentice {
    margin: 20px 0;
}

span.check, span.x {
    position: relative;
    top: 4px;
    margin-right: 5px;
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url(/Gemuese/Styles/Img/check.png) no-repeat;
}

span.x {
    background: url(/Gemuese/Styles/Img/x.png) no-repeat;
}

.apprentice-list .col-40, .apprentice-list .col-60 {
    margin-bottom: 20px;
}

    .apprentice-list .col-40.green {
        margin-bottom: 0;
    }

/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (min-width: 480px) {
    /* ====================
    INTERMEDIATE: Menu
   ==================== */

    .meta-wrapper .logo {
        padding: 12px 2% 18px 2%;
    }

        .meta-wrapper .logo a {
            font-size: 0.95em;
        }

    .meta-wrapper .logo {
        padding: 13px 10% 17px 10%;
    }

    .mobile-lng {
        width: 63px;
        font-size: 1.5em;
    }

    .mobile-login-btn {
        margin: 13px 20px;
    }


    .mobile-search-btn {
        width: 50px;
    }

    nav a {
    }

    .slider-wrapper li img {
        width: 100%;
        min-height: inherit;
        position: relative;
        margin-top: -7%;
        -webkit-transition: 1s all ease;
        -moz-transition: 1s all ease;
        -o-transition: 1s all ease;
        -ms-transition: 1s all ease;
        transition: 1s all ease;
    }

    .info-box-wrapper {
        height: 200px;
        margin: 110px 0 0 0;
    }

    /* ========================
    INTERMEDIATE: IE Fixes
   ======================== */

    nav ul li {
    }

    .mobile-hidden {
        display: block !important;
    }

        .mobile-hidden.inline {
            display: inline !important;
        }

    .only-mobile {
        display: none;
    }
}

@media only screen and (min-width: 768px) {
    .beta {
        position: absolute;
        top: 0;
        left: 0;
        right: auto;
        z-index: 200;
    }

    .js [role="main"] {
        background: none;
    }

    h2 {
    }

    h3 {
    }

    .paragraph {
    }

    .desktop-hidden {
        display: none;
    }

    .tablet-hidden {
        display: block !important;
    }

        .tablet-hidden.inline {
            display: inline !important;
        }

    header .main-nav {
        display: block;
    }

    nav.left-nav ul {
        padding: 0;
        margin-top: -10px;
    }

        nav.left-nav ul ul {
            margin: 0 0 10px 0;
        }

        nav.left-nav ul li {
            display: block;
            padding: 10px;
            margin-top: 10px;
        }

            nav.left-nav ul li:first-child {
                margin-top: 0;
            }

            nav.left-nav ul li:hover, nav.left-nav ul li.active {
                background: #ebeed9;
            }

            nav.left-nav ul li a {
                color: #a7b152;
                border-bottom: 1px solid #a7b152;
                border-top: 1px solid #a7b152;
                font-size: 0.85em;
                text-decoration: none;
                text-transform: uppercase;
                display: block;
            }



            nav.left-nav ul li li {
                padding: 0;
                margin: 0;
            }

                nav.left-nav ul li li:first-child a {
                    border-top: none;
                }

                nav.left-nav ul li li a {
                    padding-left: 10px;
                    color: #121212;
                    text-transform: none;
                    border-bottom: none;
                    border-top: 1px solid #121212;
                }

                    nav.left-nav ul li li a:hover, nav.left-nav ul li li a.active {
                        text-decoration: underline;
                    }

    .active-nav [role="main"], .active-nav .meta-wrapper {
        right: auto;
        left: 0;
    }


    header {
        z-index: 50;
        height: 522px;
        -webkit-transition: 1s all ease;
        -moz-transition: 1s all ease;
        -o-transition: 1s all ease;
        -ms-transition: 1s all ease;
        transition: 1s all ease;
    }

        header .slider {
            top: 0;
        }

        header .slider-control {
            position: absolute;
            z-index: 100;
            top: 250px;
            width: 45px;
            height: 45px;
            display: block;
            text-indent: -9999px;
        }

            header .slider-control.back {
                left: 0;
                background: url(/Gemuese/Styles/Img/back.png) no-repeat;
            }

            header .slider-control.next {
                right: 0;
                background: url(/Gemuese/Styles/Img/next.png) no-repeat;
            }

    .slider-wrapper li img {
        max-height: none;
        width: 100%;
        margin-top: 0;
    }

    .meta-wrapper {
        width: 73%;
        float: left;
        margin-top: 30px;
        height: 40px;
        background: #4d7f4b;
        position: relative;
        left: 0;
        overflow: visible;
        z-index: 10;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        /*behavior: url(http://www.gemuese.ch/Gemuese/Gemuese/Scripts/PIE.htc);*/
    }

        .meta-wrapper:before {
            background: #4d7f4b;
            content: " ";
            position: absolute;
            left: -300%;
            width: 400%;
            height: 100%;
            -webkit-box-shadow: 2px 2px 4px rgba(0,0,0,0.6);
            -moz-box-shadow: 2px 2px 4px rgba(0,0,0,0.6);
            box-shadow: 2px 2px 4px rgba(0,0,0,0.6);
            z-index: -1;
            margin-left: 1px;
            /*behavior: url(http://www.gemuese.ch/Gemuese/Gemuese/Scripts/PIE.htc);*/
            -moz-border-radius: 2px;
            -webkit-border-radius: 2px;
            border-radius: 2px;
        }

        .meta-wrapper .meta {
            margin-right: 5px;
        }

        .meta-wrapper .logo {
            padding: 4px 0 0 0;
            font-size: 2em;
            margin-top: 1px;
        }

    nav.main-nav a {
        font-size: 1.7em;
    }

    .main {
        background: #fff;
    }

        .main .facts {
            margin: 0 0 10px 10px;
        }

        /* =================== search */

        .main article.wide.search-page {
            width: 65%;
        }

        .main .search-field {
            width: 80% !important;
            height: 15px !important;
        }

        .main .search-page .btn {
            position: absolute;
            bottom: 0;
            right: 0;
        }

        .main p.lead {
            width: auto;
        }

        .main .cart .article span {
            margin-left: 60%;
        }

        .main .cart-row .article .detail .bottom {
            bottom: 0;
            right: initial;
        }

        .main .cart-row .units input {
            width: 45px;
        }

        .main .cart-row {
            font-size: 0.9em;
        }

    /* =================== search */
    .search {
        -webkit-transition: none;
        -moz-transition: none;
        -o-transition: none;
        -ms-transition: none;
        transition: none;
    }

        .search, .search.mobile-visible {
            float: right;
            width: 25%;
            height: 40px;
            margin-top: 30px;
            text-align: right;
            position: relative;
            top: 0;
            left: 0;
        }

    input.search {
        position: absolute;
        right: 0;
        top: 20px;
        background: url(img/magnifier.png) no-repeat;
        background: url(img/magnifier-low.png) no-repeat\9;
        background-position: 0 0;
        background-size: 26px 26px !important;
        width: 26px;
        height: 26px;
        z-index: 100;
    }

    /* =================== info-box */
    .info-box-wrapper {
        margin: 80px 0 0 0;
        width: 73%;
        max-width: 665px;
    }

    .main-container {
    }

    .info-box {
        padding: 30px 3% 20px 3%;
    }

        .info-box h3 {
            color: #000;
            font-size: 4em;
            margin: 0;
            line-height: 1em;
        }

        .info-box p {
            line-height: 1.4em;
            font-size: 1.8em;
            margin: 10px 0;
        }

    .login-box-wrapper {
        background: url(/Gemuese/Styles/Img/login-box-bg.png) repeat-y;
        /* IE 8 */
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        /* IE 5-7 */
        filter: alpha(opacity=0);
        /* Netscape */
        -moz-opacity: 0;
        /* Safari 1.x */
        -khtml-opacity: 0;
        /* Good browsers */
        opacity: 0;
        transition: opacity .25s ease-in-out;
        -moz-transition: opacity .25s ease-in-out;
        -webkit-transition: opacity .25s ease-in-out;
        position: relative;
        position: absolute;
        bottom: 0;
        margin-top: 20px;
        width: 23%;
        top: auto;
        right: 0;
        left: auto;
        padding: 1%;
    }

        .login-box-wrapper.visible {
            /* IE 8 */
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
            /* IE 5-7 */
            filter: alpha(opacity=100);
            /* Netscape */
            -moz-opacity: 1;
            /* Safari 1.x */
            -khtml-opacity: 1;
            /* Good browsers */
            opacity: 1;
            transition: opacity .25s ease-in-out;
            -moz-transition: opacity .25s ease-in-out;
            -webkit-transition: opacity .25s ease-in-out;
        }



        .login-box-wrapper.mobile-visible {
            top: auto;
            position: absolute;
            display: block;
        }

    header.no-slider .login-box-wrapper {
        bottom: -266px;
        top: auto;
        right: -1000px;
    }

        header.no-slider .login-box-wrapper.visible {
            right: 150px;
        }

    header.no-slider .login-wrapper a:hover:before, header.no-slider .login-wrapper a.active:before {
        content: ' ';
        height: 0;
        position: absolute;
        width: 0;
        border: 10px solid transparent;
        border-right-color: #295627;
        left: -20px;
        top: 12px;
    }

    header.no-slider .login-wrapper a.logout:hover:before {
        border: none;
    }

    nav ul li {
        display: inline;
    }

    .meta-wrapper {
    }

    .main-container {
    }

    .main {
    }

        .main header {
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;
        }

        .main article {
            width: 48.5%;
            padding: 0 1%;
            float: left;
            margin: 15px 0 15px 0;
            background: none;
            min-height: 600px;
        }

        .main .image-left {
            float: left;
            width: 230px;
            margin-bottom: 10px;
        }

        .main .image-right {
            float: right;
            width: 40%;
            margin: 10px 0 10px 10px;
        }

            .main .image-right.small {
                margin-top: 15px;
            }

            .main .image-right.recipe {
                margin-bottom: 15px;
            }

        .main .form-wrapper .row {
            margin-bottom: 0;
        }

            .main .form-wrapper .row.vegetables {
                position: relative;
            }

        .main .row.vegetables {
            margin-bottom: 15px;
        }

    .vegetable-wrapper {
        padding-bottom: 30px;
        border-bottom: 1px solid #c8c2bd;
    }

    .main article.wide {
        width: 55%;
    }

    .main article.superwide {
        width: 73%;
        position: relative;
    }

    .main article.news section {
        border-top: none;
        border-bottom: 1px solid #dcdcdc;
        margin: 0 0 10px 0 !important;
    }

        .main article.news section .arrow {
            margin-bottom: 26px;
        }

    .main article.news h1 {
        margin: 5px 0;
    }

    .main article.news section:first-child {
        border-top: 1px solid #4d7e4a !important;
        border-bottom: none;
    }

    .main article.login {
        width: 100%;
    }

        .main article.login table {
            width: 80%;
        }

    .main article .login-content-wrapper {
        padding: 0 2.5%;
        width: 95%;
    }

    .main article.wide .content {
        width: 100%;
    }

    .main article.wide .title-image {
        margin-top: 15px;
    }

    .main article .content {
        width: 70%;
    }

    .main article .content-image-wrapper {
        width: 70%;
    }

    .main .shop-wrapper {
        width: 86%;
        float: left;
    }

        .main .shop-wrapper .title-lead {
            min-height: initial;
        }

    .main .title-lead .shop {
        float: left;
        width: 85%;
    }

    .cart-preview {
        float: right;
        position: relative;
        top: auto;
        right: auto;
    }

        .cart-preview.start {
            margin-top: 10px;
        }

    .main .title-lead img {
        margin-top: 15px;
    }

    .main article img {
        max-width: 100%;
    }

    .main article.hub {
        width: 72%;
        padding-left: 2%;
        border-right: none;
    }

    .main article.login {
        width: 95%;
        padding: 0 2.5%;
        border-right: none;
    }

    hr.separator {
        border-top: 1px solid #628e60;
        margin-top: 30px;
    }

    main article.login section {
        border-top: none;
        margin: 0 0 30px 0;
    }

    .main article.wide h2 {
        text-transform: none;
    }

    .main article .row {
        margin-bottom: 30px;
    }

        .main article .row.product-overview {
            margin-top: 60px;
            position: relative;
        }

    .main .col1 {
        float: left;
        width: 70%;
    }

    .main .col2 {
        float: left;
        width: 47.5%;
    }

        .main .col2:first-child {
            padding-right: 5%;
        }

    .main .link-teaser {
        margin-bottom: 0;
    }

        .main .link-teaser .col2 {
            padding-right: 0;
        }

        .main .link-teaser:first-child .col2 {
            padding-right: 5%;
        }

    .main .col3 {
        margin-bottom: 0;
        float: left;
        width: 30%;
        padding-left: 5%;
    }

    .main .link-teaser:first-child .col3 {
        padding-left: 0;
    }

    .main .col4 {
        float: left;
        width: 21%;
        padding-bottom: 35px;
        padding-left: 5%;
    }

        .main .col4:first-child {
            padding-left: 0;
        }


        .main .col4 .teaser-image {
            text-align: center;
        }

        .main .col4 img {
            max-width: 85%;
            margin-bottom: 15px;
        }

        .main .col4 .price {
            color: #121212;
            font-weight: 700;
            font-size: 0.9em;
            border-top: 1px solid #a7b152;
            border-bottom: 1px solid #a7b152;
            position: absolute;
            bottom: 0;
            width: 21%;
        }

    .main .col6 {
        float: left;
        width: 13%;
    }

    .main .input-wrapper input[type=text], .main .input-wrapper input[type=password] {
        width: 95%;
        height: 30px;
    }

    .main .input-wrapper input.zip {
        width: 13% !important;
    }

    .main aside {
        float: right;
        width: 22.5%;
        padding: 0 1% 0 1%;
        margin: 15px 0 15px 0;
        background: none;
    }

        .main aside.left {
            margin-top: 10px !important;
        }

            .main aside.left.no-nav {
                margin: 15px 0 15px 0 !important;
            }

        .main aside .section {
            border-top: 1px solid #628e60;
            margin-top: 10px;
        }

        .main aside .link-teaser:first-child .section {
            margin-top: 0;
        }

        .main aside a.arrow {
            padding-left: 10px;
        }

        .main aside.left {
            width: 22%;
            float: left;
            padding: 0 1% 0 1.5%;
            margin: 0;
            border-right: 1px solid #dcdcdc;
        }

        .main aside.right {
            border-left: 1px solid #dcdcdc;
        }

            .main aside.right.narrow {
                width: 16%;
            }

    .main .related {
        margin-top: 15px;
        padding-left: 25px;
    }

    .main aside.right p {
        margin-bottom: 30px;
    }

    .main .frame {
        position: relative;
        width: 94%;
        margin-left: -2%;
        margin-bottom: 15px;
        padding: 10px;
        -webkit-box-shadow: 0 5px 10px #c8c2bd;
        -moz-box-shadow: 0 5px 10px #c8c2bd;
        box-shadow: 0 5px 10px #c8c2bd;
    }

    .main .col1 .frame {
        width: 99%;
        margin-left: 0;
    }

    .main .sitemap {
        padding-top: 0;
    }

        .main .sitemap .padding-wrapper {
            margin: 15px;
        }

    .sitemap ul {
        margin-bottom: 30px;
        padding-bottom: 30px;
    }

        .sitemap ul li {
            float: left;
            width: 23%;
            border-left: 1px solid #c8c8c8;
            padding-left: 2%;
        }

        .sitemap ul ul li {
            margin-top: 20px;
        }

        .sitemap ul:after {
            content: " ";
            position: absolute;
            width: 100%;
            height: 30px;
            background: #fff;
            bottom: 0;
        }

        .sitemap ul > li:first-child {
            padding-left: 0;
            border-left: none;
        }

    .sitemap li li {
        float: none;
        width: auto;
        border: none;
        margin: 0;
        padding: 0;
    }

    .sitemap ul ul {
        margin-bottom: 0;
        border-bottom: 0;
        padding-bottom: 0;
    }


        .sitemap ul ul:after {
            display: none;
        }

        .sitemap ul ul ul li {
            margin-top: 0;
        }

    footer p {
        color: #fff;
        font-size: 0.75em;
        line-height: 1.4em;
    }

    footer a {
        color: #fff;
        text-decoration: none;
        line-height: 1.4em;
    }

    footer .contact-wrapper .vsgp-logo img {
        max-width: 150px;
    }

    footer .social-wrapper {
        float: left;
        width: 37.5%;
        padding: 35px 1% 35px 1.5%;
    }

        footer .social-wrapper .social {
            width: 90%;
        }

    footer .contact-wrapper {
        float: left;
        width: 57.5%;
        padding: 35px 1% 35px 1.5%;
    }

        footer .contact-wrapper .contact {
            float: left;
            width: 100%;
            border-top: 1px solid #a7b152;
        }

        footer .contact-wrapper .contact-inner {
            float: left;
        }

        footer .contact-wrapper .vsgp-logo {
            float: right;
        }

    /* =================== SEASON CALENDAR */

    #seasoncalendar .x-scroll-wrapper {
        overflow: hidden;
        height: auto;
    }

    #calendar #vegetables {
        overflow: visible;
        height: auto;
        width: auto;
        padding: 0;
    }

    #calendar .col {
        width: 8.3333333%;
    }

    #calendar #months .col {
    }

    #calendar #months {
        width: 100%;
        min-width: inherit;
    }

    .months-wrapper {
        min-width: initial !important;
    }

    #months {
        position: relative;
    }

    #seasoncalendar .top-left-white {
        width: 20%;
    }

    #calendar .index {
        width: 20% !important;
    }

        #calendar .index .col {
            width: 100%;
        }

    .months-wrapper {
        padding-left: 20%;
    }

    .main .input-wrapper.vegetarian {
        margin-top: 60px;
    }

    .apprentice-list .col-40, .apprentice-list .col-60 {
        float: left;
    }

    .apprentice-list .col-40 {
        width: 40%;
        margin-right: 5%;
        margin-bottom: 0;
    }

    .apprentice-list .col-60 {
        width: 55%;
        margin-bottom: 0;
    }

    .apprentice .col-label, .apprentice .col-values {
        float: left;
    }

    .apprentice .col-label {
        width: 10%;
    }

        .apprentice .col-label.wide {
            width: 100%;
        }

    .apprentice .col-values {
        width: 85%;
        margin-left: 5%;
    }

        .apprentice .col-values.wide {
            width: 100%;
            margin-left: 0;
        }
}

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

    /* ===============
    Maximal Width
   =============== */

    .wrapper {
        width: 1083px; /* 1140px - 10% for margins */
        margin: 0 auto;
    }

    .slider-wrapper li img {
        width: 110%;
        min-height: 100%;
        margin-top: -16%;
    }

    nav.left-nav {
        font-size: 1em;
    }

    footer .social-wrapper {
        float: left;
        width: 22.5%;
        padding: 35px 1% 35px 1.5%;
    }

    footer .contact-wrapper {
        float: left;
        width: 72.5%;
        padding: 35px 1% 35px 1.5%;
    }
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

    .ir:before {
        content: "";
        display: block;
        width: 0;
        height: 150%;
    }

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

    .visuallyhidden.focusable:active,
    .visuallyhidden.focusable:focus {
        clip: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        position: static;
        width: auto;
    }

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
        display: none;
    }

        img.recipe-image {
            display: block !important;
        }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }

    header, aside, footer, .logo-row, .youtube-frame {
        display: none;
    }
}

/*.info-box-wrapper {
    -webkit-transition: 1s all ease;
    -moz-transition: 1s all ease;
    -o-transition: 1s all ease;
    -ms-transition: 1s all ease;
    transition: 1s all ease;
}

[role="main"].minimal-header .slider-wrapper li img {
    margin-top: -19%;
    -webkit-transition: 1s all ease;
    -moz-transition: 1s all ease;
    -o-transition: 1s all ease;
    -ms-transition: 1s all ease;
    transition: 1s all ease;
}
*/
header.no-slider nav.main-nav .subnav-bg {
    top: 93%;
}

header.no-slider + .main-container {
    padding-top: 55px;
}

header.no-slider .slider-controls, header.no-slider .info-box-wrapper, header.no-slider slider {
    display: none;
}

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

    header.no-slider .slider-controls, header.no-slider .info-box-wrapper, header.no-slider slider {
        display: block;
    }

    header.no-slider + .main-container {
        padding-top: 0;
    }
}


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

    header {
        /*position: fixed;
        margin: 0 auto;
        width: 100%;*/
    }

    .main-container {
        /*padding-top: 522px;
        -webkit-transition: 1s all ease;
        -moz-transition: 1s all ease;
        -o-transition: 1s all ease;
        -ms-transition: 1s all ease;
        transition: 1s all ease;*/
    }


    [role="main"].minimal-header .main-container {
        /*padding-top: 257px;*/
    }

    header.no-slider {
        height: 242px;
        /*-webkit-transition: 1s all ease;
        -moz-transition: 1s all ease;
        -o-transition: 1s all ease;
        -ms-transition: 1s all ease;
        transition: 1s all ease;*/
    }

        header.no-slider .info-box-wrapper {
            margin: 0 !important;
            height: 0 !important;
            overflow: hidden;
            /*-webkit-transition: 1s all ease;
            -moz-transition: 1s all ease;
            -o-transition: 1s all ease;
            -ms-transition: 1s all ease;
            transition: 1s all ease;*/
        }
}


@media only screen and (min-width: 1140px) {
    header.no-slider .slider-wrapper li img {
        margin-top: -27%;
        /*-webkit-transition: 1s all ease;
        -moz-transition: 1s all ease;
        -o-transition: 1s all ease;
        -ms-transition: 1s all ease;
        transition: 1s all ease;*/
    }
}