/* Bootstrap Accordion Mobile Navigation */

.header-mobile {
    background-image: url("../Images/Backgrounds/mobile-header-bg.png"); 
    background-size: auto 100%;
    background-position: top center;
    background-repeat: no-repeat;
    height: 100px;
    z-index: 10;
    margin-bottom: -18px;
    position: relative;
}
.header-mobile-dropdown {
    position: relative;
}

.nav .panel-group {
    position: absolute;
    top: 20px;
    left: 15px;
    min-width: 50%;
    z-index: 10;
    width: 280px;
}

.nav .panel {
    border: 0;
    background-color: transparent;
}

.nav .panel-heading {
    background-color: transparent;
    background-image: url('');
}

.nav .panel.panel-default {
    border-radius: 0;
}

.nav .panel-collapse.collapse {

}

/* set panel-heading paddings to a instead of h3 */    
.nav .panel-heading { padding: 0 }
.nav .panel-heading a { 
    width: 50px;
    height: 50px;
    float: left;
    background-image: url("../Images/Icons/mobileNavi.png");
    background-size: 100% auto;
    background-position: bottom left;

}

.nav .panel-body {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0;
    z-index: 7;
    background-color: #fefaf4;
}

/* change color of collapsed class */
.nav .panel-heading a.collapsed { background-position: top left; }

/* reposition the left arrows */
.nav .panel-heading .accordion-toggle.collapsed:after { top: 10px; }
.nav .panel-heading .accordion-toggle:after { top: 10px; }



/* Panel */
.header-mobile-dropdown .panel-collapse {
    position: absolute;
    top: 0px;
    z-index: 7;
    background-color: #fefaf4;
    min-width: 50%;
    width: 280px;
    box-shadow: 0 0 1000px rgba(150,150,150,0.7);
}

.nav ul {
    list-style-type: none;
    padding: 0;
}

.nav li,
.nav ul {
    width: 100%;
    float: left;
}

.nav li {
    position: relative;
}

.nav li a {
    text-transform: uppercase;
}


.nav li .icon,
.nav li .icon-bg{
    position: absolute;
    height: 45px;
    width: 45px;
    top: 0;
    left: 0;
}

.nav li .icon {
    background-size: 80% auto;
    background-position: center;
    z-index: 5;
}

.nav li span.icon-bg {
    background: transparent url("../Images/Backgrounds/orangerKreis.png") no-repeat scroll center center;
    background-size: contain;
}

.nav li.active span.icon-bg,
.nav li:hover span.icon-bg {
    background: transparent url("../Images/Backgrounds/gruenerKreis.png") no-repeat scroll center center;
    background-size: contain;

}

.nav li .link-text a {
    float: left;
    margin-left: 55px;
    padding: 14px 0;
    margin-bottom: 5px;
    color: #000;
}


/*################################################*/
/* mobile logo */
/*################################################*/

.mobile-logo-brand {
    position: absolute;
    top: 13px;
    left: 50%;
    width: 70px;
    height: 70px;
    margin-left: -35px;
    z-index: 10;
}

.mobile-logo-brand a {
    float: left;
    width: 100%;
    height: 100%;
    background-image: url("../Images/Logo/NaturwertBio_Logo.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}

/*################################################*/
/* Mobile Special Nav */
/*################################################*/
.mobile-special-nav {
    margin-right: 15px;
    z-index: 100;
    position: relative;

}

.mobile-special-nav a {
    float: left;
    margin-top: 22px;
    margin-left: 10px;
    height: 40px;
    width: 40px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}



.mobile-special-nav a.nav-search{
    background-image: url("../Images/Icons/lupe.png");
}

.mobile-special-nav a.nav-myTimes {
    background-image: url("../Images/Icons/einkaufswagen.png");
}