* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

body { background-color: #ffffff; }

img { max-width: 100%; border: none;}

.container { max-width: 60em; margin: 0px auto; }
.search { color: #ffffff; font-size: 0.8em; text-align: right; text-decoration: none; padding-top: 3px;     }

.head { border-bottom:1px solid #ccc; background-color: #fff; position: relative; z-index: 99; }
.head .container { width: 100%; }
.head > h1 { text-align: center; }

.cart-block { float:right; width:200px; background-color: #6364a7;}

.cart-link-container { float:left; width:100px; height:25px; background: url('../../images/cart-button-bg.png') no-repeat; background-size:cover; position: relative; }
.cart-link { position: absolute; top: 10%; left:32px;}
.cart-link a { color: #ffffff; font-size: 0.8em; text-decoration: none; }
.cart-link a:hover { text-decoration: underline; color: #a3a4ea;}

.checkout-link-container { float:right; width:100px; height:25px; background: url('../../images/checkout-button-bg.png') no-repeat; background-size:cover; position: relative; }
.checkout-link { position: absolute; top: 10%; right:31px;}
.checkout-link a { color: #ffffff; font-size: 0.8em; text-decoration: none; }
.checkout-link a:hover { text-decoration: underline;  color: #a3a4ea;}

.search-container { clear: both; width:200px; height:25px; background: url('../../images/search-bg.png') no-repeat; background-size:cover; position: absolute; top:35px; }

#searchwrapper {
    width:200px;
    height:25px;
    background-image:url('../../images/search-bg.png');
    background-repeat:no-repeat;
    padding:0px;
    margin:0px;
    position:relative;
}
 
#searchwrapper form { display:inline ; }
 
.searchbox {
    border:0px;
    background-color:transparent;
    position:absolute;
    font-family: "Raleway",Arial,sans-serif; color: #777777; font-size: 0.8em;
    top:2px;
    left:5px;
    width:165px;
    height:22px;
}
 
.searchbox_submit {
    border:0px;
    background-color:transparent;
    position:absolute;
    top:0px;
    left:175px;
    width:25px;
    height:25px;
}


.menu-link {
    display: none;
    text-decoration: none;
}

.menu { 
    float: left; max-width: 60em;
    -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; 
}

.menu ul { 
    padding: 0px;
    margin: 0px;
    list-style: none;
    position: relative;
    display: inline-table;
}
.menu > li > ul.sub-menu {
    min-width: 10em;
    padding: 4px 0;
    background-color: #f4f4f4;
    border: 1px solid #CCC;
    border: 1px solid rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
}
.menu ul:after {
    content: ""; clear: both; display: block;
}
.menu ul li {
    padding: 0px;
}
.menu > ul > li { 
    display: inline-block;
}
.menu ul li a { 
    display: block;
    text-decoration: none;
    color: #48b542;
    font-size: .9em;
}
.menu ul li > a { 
    height:58px;
    padding: 19px 12px; 
}
.menu ul ul { 
    display: none; 
    position: absolute; 
    top:100%;
    min-width: 260px;
    background-color: #f4f4f4;
    border: 1px solid #CCC;
    border: 1px solid rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.menu ul li:hover > ul {
    display: block;
}
.menu ul ul > li {
    position: relative;
}
.menu ul ul > li a {
    padding: 5px 15px 5px 10px;
    height: auto;
    background-color: #f4f4f4;
    -webkit-transition: background-color 0.2s ease-out;  
    -moz-transition: background-color 0.2s ease-out;
    -ms-transition: background-color 0.2s ease-out;
    -o-transition: background-color 0.2s ease-out;
    transition: background-color 0.2s ease-out; 
}
.menu ul ul > li a:hover {
    background-color: #48b542;
    background-color: rgba(72, 181 ,66, 0.9);
    color: #fff;
}
.menu ul ul ul {
    position: absolute; 
    left: 100%; 
    top:0;
}

ul.nav-right {
    float:right;
    right:-1px;
}

li.nav-right {
    list-style: none;
    position: relative;
    display: inline;
    padding-left: 10px;
}

.nav-right a {
    font-size: 0.9em;
    color: #555555;
    text-decoration: none;
}

.nav-right a:hover {
    text-decoration: underline;
}

.masthead ul {
    list-style: none;
    display: inline;
}

.masthead {
    padding-top: 5px;
}

.top-bar {
    display: block;
    color: #fff;
    background-color: #48b542;
    background-color: rgba(72, 181 ,66, 0.9);
    height: 6px;
}

.footer {
    display: block;
    color: #fff;
    background-color: #48b542;
    background-color: rgba(72, 181 ,66, 0.9);
    height: 150px;
    padding-top: 20px;
    font-size: 0.9em;
}

ul.footer {
    padding: 0px;
    margin: 0px;
    list-style: none;
    position: relative;
    display: inline;
    font-size: 0.8em;
    line-height: 1.4em;
    left: 5px;
    top: 2px;
}

.footer_title {
    font-size: 1.1em;
}

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

ul.footer a:hover {
    text-decoration: underline;
}

.footer_under {
    display: block;
    background-color: #615fa6;
    background-color: rgba(97, 95 ,166, 0.9);
    height: 20px;
}

.lowercase {text-transform: lowercase;}


@media screen and (max-width: 768px) {
    
    .menu-link {
        display: block;
        color: #fff;
        background-color: #48b542;
        background-color: rgba(72, 181 ,66, 0.9);
        height: 50px;
    }
    .menu {
        clear: both;
        min-width: inherit;
        float: none;
    }
    .menu, .menu > ul ul {
        overflow: hidden;
        max-height: 0;
        background-color: #f4f4f4;
    }
    .menu > li > ul.sub-menu {
    padding: 0px;
    border: none;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    }
    .menu.active, .menu > ul ul.active {
        max-height: 55em;
    }
    .menu ul {
        display: inline;
    }
    .menu > ul {
        border-top: 1px solid #808080;
    }
    .menu li, .menu > ul > li {
        display: block;
    }
    .menu li a {
        color: #000;
        display: block;
        padding: 0.8em;
        border-bottom: 1px solid #808080;
        position: relative;
    }
    .menu li.has-submenu > a:after {
        content: '+';
        position: absolute;
        top: 0;
        right: 0;
        display: block;
        font-size: 1.5em;
        padding: 0.55em 0.5em;
    }
    .menu li.has-submenu > a.active:after {
        content: "-";
    }
    .menu ul ul > li a {
        background-color: #e4e4e4;
        height:58px;
        padding: 19px 18px 19px 30px;
    }
    .menu ul ul, .menu ul ul ul {
        display: inherit;
        position: relative;
        left: auto; top:auto;
        box-shadow: none; 
        border:none;
    }

    .menu ul ul ul > li a {
        background-color: #c8e9c6;
        height:58px;
        padding: 19px 18px 19px 30px;
    }
    
    .menu li.level1-indent {
        padding-left: 25px;
    }

    ul.nav-right {
        display:none;
        text-decoration:none;
    }

    ul.sub-right {
        float:right;
        right:-1px;
    }

    .top-bar {
        display:none;
        text-decoration:none;
    }

    .cart-block {
        display:none;
        text-decoration:none;
    }

    .nav-desktop {
        display:none;
        text-decoration:none;
    }
    .headline {
        font-size: 1.5em;
    }

    .footer {
        height: 100%;
    }

}

@media screen and (max-width: 480px) {
    
    .menu-link {
        display: block;
        color: #fff;
        background-color: #48b542;
        background-color: rgba(72, 181 ,66, 0.9);
        height: 50px;
    }
    .menu {
        clear: both;
        min-width: inherit;
        float: none;
    }
    .menu, .menu > ul ul {
        overflow: hidden;
        max-height: 0;
        background-color: #f4f4f4;
    }
    .menu > li > ul.sub-menu {
    padding: 0px;
    border: none;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    }
    .menu.active, .menu > ul ul.active {
        max-height: 55em;
    }
    .menu ul {
        display: inline;
    }
    .menu > ul {
        border-top: 1px solid #808080;
    }
    .menu li, .menu > ul > li {
        display: block;
    }
    .menu li a {
        color: #000;
        display: block;
        padding: 0.8em;
        border-bottom: 1px solid #808080;
        position: relative;
    }
    .menu li.has-submenu > a:after {
        content: '+';
        position: absolute;
        top: 0;
        right: 0;
        display: block;
        font-size: 1.5em;
        padding: 0.55em 0.5em;
    }
    .menu li.has-submenu > a.active:after {
        content: "-";
    }
    .menu ul ul > li a {
        background-color: #e4e4e4;
        height:58px;
        padding: 19px 18px 19px 30px;
    }
    .menu ul ul, .menu ul ul ul {
        display: inherit;
        position: relative;
        left: auto; top:auto;
        box-shadow: none; 
        border:none;
    }

    .menu ul ul ul > li a {
        background-color: #c8e9c6;
        height:58px;
        padding: 19px 18px 19px 30px;
    }

    .menu li.level1-indent {
        padding-left: 25px;
    }

    ul.nav-right {
        display:none;
        text-decoration:none;
    }

    ul.sub-right {
        float:right;
        right:-1px;
    }

    .top-bar {
        display:none;
        text-decoration:none;
    }

    .cart-block {
        display:none;
        text-decoration:none;
    }

    .nav-desktop {
        display:none;
        text-decoration:none;
    }
    .headline {
        font-size: 1.5em;
    }

    .footer {
        height: 100%;
    }

    .footer_title {
        font-size: 1.1em;
    }

    ul.footer {
        padding: 0px;
        margin: 0px;
        list-style: none;
        position: relative;
        display: inline;
        font-size: 1.1em;
        line-height: 1.3em;
    }

    ul.footer a {
        color: #fff;
        line-height: 1.3em;
    }

    .footer_under {
        display: block;
        background-color: #615fa6;
        background-color: rgba(97, 95 ,166, 0.9);
        height: 40px;
    }


}