@charset "utf-8";

/**
 * All navigation menu modules.
 * Separated from the other modules for better overview.
 * Code order: Visual appearance; top to bottom.
 *
 * @date     2011-11-09, 2011-10-31
 * @since    2011-07-18
 * @author   Christian Oellers <c.oellers@*.de>
 * @author   Alldesign, http://alldesign.de/
 * @version  1.3.0
 */

/* ----------------------------------------------------------------------------------------------------------- HEADER */

/* ------------------------------------------------------------------------------- mod_navigation */

/* ---------------------------------------------------------------- Locations */

/**
 * These content elements use custom classes
 * for both CSS and template usage.
 *
 * @see  ce_hyperlink_image.tpl
 */

.nav-location {
    display:flex;
    justify-content:space-between;
}

.nav-location .ce_hyperlink {
    font-family:'OptimaRegular', 'Verdana', 'Arial', 'Tahoma', 'DejaVu Sans', sans-serif;
    font-size:16px;
    text-align:center;
    flex:0 0 25%;
}

@media(max-width:768px) {
    .nav-location .ce_hyperlink {
        font-size:2vw;
    }
}

@media(max-width:550px) {
    .nav-location {
        flex-wrap:wrap;
    }

    .nav-location .ce_hyperlink {
        flex:0 0 50%;
        font-size:3vw;
    }

    .nav-location .ce_hyperlink img {
        max-width:unset;
        width:100%;
    }
}


@media(max-width:360px) {
    .nav-location .ce_hyperlink {
        flex:0 0 100%;
        font-size:16px;
    }

    .nav-location .ce_hyperlink + .ce_hyperlink {
        margin-top:15px;
    }
}
/* - 10 total */

.nav-location .ce_hyperlink a img {
    border:5px solid #3EB303;
}

.nav-location .ce_hyperlink.active img,
.nav-location .ce_hyperlink a:hover img {
    box-sizing:border-box;
    border:5px solid #FFF;
}

.nav-location .ce_hyperlink a {
    color:#FFF;
    display:block;
}

.nav-location .ce_hyperlink a:hover,
.nav-location .ce_hyperlink a:focus {
    color:#F8D900;
}

.nav-location .ce_hyperlink a:active {
    color:#FFF;
}

.nav-location .ce_hyperlink.active a {
    color:#F8D900;
}

/* ---------------------------------------------------------------- Main menu */

/**
 * Calculation helper in px:
 *
 *     1030 max. page width
 *   -   14 total border width
 *   = 1016 total menu button width
 *
 * IE and Mac/FF miscalculate the border,
 * so make sure the navigation is a bit wider that
 * it should to both allow a good looking hover
 * and keeping all items in one row.
 */
.nav-main ul {
    display:flex;
}

.nav-main li {
    flex:1 1 auto;
    font-family:'OptimaBold', 'Verdana', 'Arial', 'Tahoma', 'DejaVu Sans', sans-serif;
    font-size:14px;
    text-align:center;
    border-left:1px solid #456236;
    border-right:1px solid #9AD77C;
}

.nav-main li.first {
    border-left:none;
}

.nav-main li.last {
    border-right:none;
}

/**
 * height: 45-13 = 32
 */
.nav-main li a,
.nav-main li span {
    color:#FFF;
    display:block;
    height:32px;
    padding:13px 0 0;
}

.nav-main li a:hover,
.nav-main li a:focus,
.nav-main li span,
.nav-main li.trail a {
    color:#F8D900;
    background-image:-moz-linear-gradient(100% 100% 90deg, #0A5A00, #60E404);
    background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#60E404), to(#0A5A00));
}

.nav-main li a:active {
    background-image:-moz-linear-gradient(100% 100% 90deg, #2C8501, #42BE03);
    background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#42BE03), to(#2C8501));
}

/* -------------------------------------------------------------- Unternehmen */

/**
 * 2-in-1 Navigation.
 */

.nav-USI {
    background:#E3E4E5;
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:20px;
}

.nav-USI li {
    font-family:'Verdana', 'Arial', 'Tahoma', 'DejaVu Sans', sans-serif;
    font-size:9px;
    line-height:120%;
}

.nav-USI li a {
    color:#888;
}

.nav-USI li a:hover {
    color:#444; /* #000 has buggy contrast rendering */
}

.nav-USI li a:active {
    color:#888;
}

/**
 * Unternehmen.
 */

.nav-USI .mod_navigation {
    float:right;
    overflow:visible;
    margin:5px 0 0 0;
}

.nav-USI .mod_navigation ul.level_2 {
    display:none;
}

.nav-USI .mod_navigation li.l1 {
    position:relative;
    overflow:hidden;
    padding:0 5px 5px 0;
    /** / background:yellow; /**/
}

.nav-USI .mod_navigation li {
    white-space:nowrap;
}

.nav-USI .mod_navigation li.l1 span.l1.submenu {
    position:relative;
    display:block;
    padding:0 15px 3px 5px;
}

.nav-USI .mod_navigation li a {
    display:block;
    height:15px;
}

.nav-USI .mod_navigation li.l1 ul {
    position:relative;
    background:#FFF; /* rgba(255, 255, 255, 0.95) */
    box-shadow:1px 2px 2px rgba(0, 0, 0, 0.25);
    -moz-box-shadow:1px 2px 2px rgba(0, 0, 0, 0.25);
    -webkit-box-shadow:1px 2px 2px rgba(0, 0, 0, 0.25);
    /** / display:block;/**/
}

.nav-USI .mod_navigation li.l1 ul li {
    padding:2px 14px 2px 6px;
    line-height:160%;
}

.nav-USI .mod_navigation li.l1:hover ul {
    display:block;
}

.nav-USI .mod_navigation li.l2 a:hover {
    color:#2D8202;
}

.nav-USI .mod_navigation li.l2 a:active {
    color:#888;
}

.nav-USI .mod_navigation li.garten-shop a {
    color:#2D8202;
}

/**
 * Impressum, Sitemap.
 */

.nav-USI .mod_customnav {
    float:right;
}

.nav-USI .mod_customnav li {
    float:left;
    margin:5px 20px 0 0;
}

.nav-USI .mod_customnav li.last {
    margin-right:0;
}

/* ---------------------------------------------------------------- H1 / Logo */

h1.logo {
    background:url('/tl_files/layout/logo-hephata-garten-shop.png') no-repeat;
    background-size:contain;
    max-width:296px;
    width:100%;
    height:44px;
    position:absolute;
    right:0;
    top:40px;
}

/* ------------------------------------------------------------------------------------------------- CONTAINER : LEFT */

/* ------------------------------------------------------------- ce_hyperlink */

/**
 * Back-link to root category from main navigation.
 * (inactive)
 */

.ce_hyperlink.root-category {
    font-family:'Verdana', 'Arial', 'Tahoma', 'DejaVu Sans', sans-serif;
    font-size:12px;
    line-height:30px;
    text-align:right;
}

.ce_hyperlink.root-category a {
    color:#00A000;
}

.ce_hyperlink.root-category a:hover {
    color:#000;
}

.ce_hyperlink.root-category a:active {
    color:#00A000;
}

/* -------------------------------------------------------- mod_catalogfilter */

.mod_catalogfilter .filter_group .list .option {
    font-family:'Verdana', 'Arial', 'Tahoma', 'DejaVu Sans', sans-serif;
    font-size:12px;
    line-height:25px;
    text-align:right;
}

.mod_catalogfilter .filter_group .list .option a {
    color:#00A000;
}

.mod_catalogfilter .filter_group .list .option a:hover {
    color:#000;
}

.mod_catalogfilter .filter_group .list .option a:active {
    color:#00A000;
}

.mod_catalogfilter .filter_group .list .option.active a {
    font-weight:bold;
}

.mod_catalogfilter .clearall {
    font-family:'Verdana', 'Arial', 'Tahoma', 'DejaVu Sans', sans-serif;
    font-size:12px;
    text-align:right;
    margin:20px 0;
}

.mod_catalogfilter .clearall a {
    color:#B13BBD;
}

.mod_catalogfilter .clearall a:hover {
    color:#D528C2;
}

.mod_catalogfilter .clearall a:active {
    color:#B13BBD;
}
/* -------------------------------------------------- Product left navigation */

.left .mod_catalogfilter {
    margin:0 12px 85px 0;
}

.left .mod_catalogfilter .widget.filter_field_category_nav_1 {
    margin:0 0 10px;
}

/* ----------------------------------------------------------- mod_navigation */

/* Replaced by mod_catalogfilter */

.left .mod_navigation {
    margin:0 10px 20px 0;
}

.left .mod_navigation li {
    font-family:'Verdana', 'Arial', 'Tahoma', 'DejaVu Sans', sans-serif;
    font-size:12px;
    line-height:30px;
    text-align:right;
}

.left .mod_navigation li a {
    color:#00A000;
}

.left .mod_navigation li span,
.left .mod_navigation li a:hover {
    color:#000;
}

.left .mod_navigation li a.active {
    color:#00A000;
}

/* Level 2 */

.left .mod_navigation .level_2 {
    display:none;
    margin:0 0 10px;
}

.left .mod_navigation li.l1.active .level_2,
.left .mod_navigation li.l1.trail .level_2 {
    display:block;
}

.left .mod_navigation .level_2 li {
    font-size:11px;
    line-height:130%;
}

.left .mod_navigation .level_2 a {
    color:#848484;
}

.left .mod_navigation .level_2 a:hover,
.left .mod_navigation .level_2 span {
    color:#000;
}

/* ----------------------------------------------------------------------------------------------------------- FOOTER */

/**
 * Shift 270 col. width + 30 padding.
 */
.footer .mod_customnav {
    margin:0 0 0 300px;
    padding:15px 0 0;
}

.footer .mod_customnav li {
    float:left;
    border-right:1px solid #2D8202;
    margin:0 0 0 5px;
    padding:0 5px 0 0;
    font-family:'OptimaRegular', 'Verdana', 'Arial', 'Tahoma', 'DejaVu Sans', sans-serif;
    font-size:14px;
    line-height:120%;
}

.footer .mod_customnav li.last {
    border:none;
}

.footer .mod_customnav li a,
.footer .mod_customnav span {
    color:#2D8202;
}

.footer .mod_customnav a:hover,
.footer .mod_customnav a:focus,
.footer .mod_customnav span {
    color:#000;
}

.footer .mod_customnav a:active {
    color:#2D8202;
}