/*
--------------------------------------------
CONTACT-BAR
--------------------------------------------
*/


.contact-bar adress {
    background: rgba(0, 0, 0, .9);
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 3rem;
}


.contact-bar adress a, .contact-bar adress span {
    color: white;
    font-size: var(--font-size-small);
}

.siteLoginWrapper button, .siteLoginWrapper button.show {
	background: none;
	padding: 0;
	border: none;
}

.siteLoginWrapper button:hover {
	background: none;
}

.siteLoginWrapper button:hover span {
	color: var(--primary-color);
}

.siteLoginWrapper bi-person-lock, .siteLoginWrapper bi-person-check {
	margin-right: 0.25rem;
	font-size: 1rem;
}

ul#usermenu.dropdown-menu {
	top: 2rem;
	background-color: var(--primary-color);
	height: auto;
}

ul#usermenu.dropdown-menu li:hover a {
	color: var(--accent-color);
}

@media (max-width: 768px) {
    .sitePhoneNumber, .siteEmailAdress, .siteWhatsapp, .siteLogin {
        display: none;
    }
    div.contact-bar adress svg {
        width: 40px;
        height: 40px;
        padding: 5px;
    }
}

@media (min-width: 768px) {
    div.contact-bar adress {
        padding: .3rem;
        font-size: var(--font-size-small);
        position: absolute;
        top: 0;
        width: 100vw;
        height: 40px;
    }
    adress svg {
        margin-top: -.1rem;
    }
    div.contact-bar adress span.siteWhatsapp {
        color: #4bc85a;
    }
    div.contact-bar adress span.siteWhatsapp:hover, div.contact-bar adress span.siteEmailAdress:hover, div.contact-bar adress span.siteLogin:hover {
        color: var(--primary-color);
    }
}



/*
--------------------------------------------
SITE_LOGO
--------------------------------------------
*/


.nav-logo img {
    padding-left: .5rem;
}

@media (min-width: 1080px) {
    .nav-logo {
        text-align: center;
        width: 100vw;
    }
}


@media (max-width: 768px) {
    ul#mainMenuList {
        background: rgba(0,0, 0,.9);
        top: -2px;
        height: 100vh;
        overflow: auto;
        height: calc(100vh - 90px);
    }
}




/*______________________________________

TABLET >= 720px
______________________________________*/

@media (min-width: 45em) {

    .container-navigation {
        position: fixed;
        z-index: 1500;
        top: 0;
        width: 100%;
    }
}



/*______________________________________

VIEWPORT DESKTOP M   >= 1280px
______________________________________*/


/* Haupt-Navigation */

.navbar_main {
    background: #4d4a45;
    padding: 0;
    z-index: 1;
}

.navbar_main .nav-item .nav-link {
    font-size: 1.3rem;
    color: #fff;
}

.navbar_main .nav-item .nav-link:hover {
    border-bottom: 2px solid #33b5c5;
}

.navbar_main .active .nav-link {
    border-bottom: 2px solid #33b5c5;
}

.navbar_main .level2 {
    min-width: 220px;
}

.container-navigation nav .level2 .nav-link {
    padding: 10px 20px !important;
}

/*mobile Menu Hamburger*/

label.hamburger {
    display: none;
    width: 40px;
    height: 50px;
    position: relative;
    margin-left: auto;
    float: left;
    cursor: pointer;
    margin-top: 0.4rem;
    margin-right: 1rem;
    cursor: pointer;
}

input#hamburger {
    display: none
}

.hamburgerLine {
    position: absolute;
    height: .3rem;
    width: 100%;
    background: #fff;
    display: block;
    border-radius: 2px;
    opacity: 1;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}

.hamburgerLine:nth-child(1) {
    top: .4rem;
    right: 0;
}

.hamburgerLine:nth-child(2) {
    top: 1.25rem;
    right: 0;
}

.hamburgerLine:nth-child(3) {
    top: 2.1rem;
    right: 0;
    /*width: 3rem;*/
}

#hamburger:checked+.hamburger .hamburgerLine:nth-child(1) {
    top: 18px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
}

#hamburger:checked+.hamburger .hamburgerLine:nth-child(2) {
    opacity: 0;
}

#hamburger:checked+.hamburger .hamburgerLine:nth-child(3) {
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
    top: 18px;
}

/*NAVIGATION main NAV*/

.container-navigation .toggle,
[id^=drop] {
    display: none;
}

/* Since we'll have the "ul li" "float:left"
we need to add a clear after the container. */

.container-navigation nav:after {
    content: "";
    display: table;
    clear: both;
}

/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:reltive" */

.container-navigation nav ul {
    float: right;
    padding: 0 1rem;
    margin: auto;
    position: relative;
}

.container-navigation nav ul li {
    list-style-type: none;
}

/* Positioning the navigation items inline, no inline float left instead*/

.container-navigation nav ul li {
    margin: 0px;
    float: left;
}

.container-navigation nav ul li a {
    color: white;
}

#mainMenu ul.submenu {
    list-style-type: none;
    min-width: 250px;
}

#mainMenu ul.submenu li {
    padding: 0 .5rem;
}


.container-navigation nav ul .submenu li.active a {
    color: var(--primary-color);
}

/* Styling the links */

.container-navigation nav ul li a {
    display: block;
    padding: 1rem 1rem 1rem 2.5rem;
    /*padding top corresponds to font-size*/
    text-decoration: none;
}

@media all and (min-width: 760px) {
    .container-navigation nav ul li a {
        padding: .75rem;
    }
    .container-navigation nav ul {
        padding: 0;
    }
}

/*from second level onwards background color*/
.container-navigation nav ul li ul li {
    background-color:rgba(0, 0, 0, .9);
}

/*level 2 when hover over level 3*/
.container-navigation nav ul li ul li:hover {
    color: var(--primary-color);
}

/* Background color change on hover same as mobile nav!*/
.container-navigation nav a:hover {
    color: var(--primary-color);
}

/* Hide dropdowns by default
 * and giving it a position of absolute */

.container-navigation nav ul ul {
    display: none;
    position: absolute;
}

/*level 2 drop down*/

.container-navigation nav ul li:hover>ul {
    display: inherit;
}

/*first row drop down*/

.container-navigation nav ul ul li {
    float: none;
    display: list-item;
    position: relative;
}

/* second and other rows to the left
*  by the amount of the first row
*  left: - minus for menu items at the right border
*
*  avoid a second level for the very last item if your
*  menu floats right to the border of the screen
*  and the second level has a longer name then the first
*/
.container-navigation nav ul ul ul li {
    position: relative;
    top: -60px;
    /* same number as width nav ul ul li */
    left: 220px;
}

.container-navigation nav ul li:nth-child(7) ul ul li {
    left: -170px;
}


/* change '+' in order to change the dropdown symbol*/

.container-navigation li>a:after {
    content: '+';
}

.container-navigation li>a:only-child:after {
    content: '';
}

@media all and (min-width: 760px) {
    .container-navigation li > a::after {
        display: none;
    }
}

/*======= 760========= MEDIA QUERIES MAX WIDTH !!! only for Menu ======== Rand 16 = 728 ===*/

@media all and (max-width: 1080px) {
    .container-navigation {
        position: sticky;
        top: 0;
        z-index: 1000;
        /*back to normal for "absolute" telefon, mail back to Header*/
    }
    label.hamburger {
        display: block;
    }
    /* zazu: plus sign is now from label*/
    .container-navigation li>a:after {
        content: '';
    }
    /*hide the nav menu, not the LINK!*/
    /*.toggle+a,*/
    #mainMenuList {
        display: none;
    }
    /* Styling the toggle label
    * zazu:
    * label is no page link! only for drop down
    * floats right and with neg. margin down
    */
    .container-navigation .toggle {
        display: block;
        text-decoration: none;
        border: none;
        width: 10%;
        float: left;
        cursor: pointer;
        top: 1.5rem;
        position: relative;
    }
    .container-navigation .toggle:hover {
        color: #E30613;
    }
    .container-navigation .toggle::after {
        font-size: 2em;
        color: var(--primary-color);
        border-style: solid;
        border-width: 0.1em 0.1em 0 0;
        content: '';
        display: inline-block;
        height: 0.45em;
        position: relative;
        transform: rotate(45deg);
        vertical-align: top;
        width: 0.45em;
    }
    .container-navigation [id^=drop]:checked+.toggle::after {
        font-size: 2em;
        color: var(--primary-color);
        border-style: solid;
        border-width: 0.1em 0.1em 0 0;
        content: '';
        display: inline-block;
        height: 0.45em;
        position: relative;
        transform: rotate(135deg);
        vertical-align: top;
        width: 0.45em;
    }
    .container-navigation nav ul li ul li {
        background-color: rgba(90,87,81,0);
    }
    /*second level, different style*/
    .container-navigation nav ul li ul li .toggle {
        padding: 0;
    }
    .container-navigation nav .level2 .nav-link {
        padding: 13px 10px 10px 30px !important;
    }
    /* Display Dropdown when clicked on Parent Label*/
    #hamburger:checked+label+ul,
    .container-navigation [id^=drop]:checked+label+a+ul {
        display: block;
    }
    /* Change menu item's width to 100% */
    .container-navigation nav ul li {
        display: block;
        width: 100%;
    }
    .container-navigation nav ul ul .toggle,
    .container-navigation nav ul ul a {
        padding: 0 40px;
    }
    .container-navigation nav ul ul ul a {
        padding: 0 80px;
    }
    .container-navigation nav a:hover {
        border: none;
    }
    .container-navigation nav ul ul a,
    .container-navigation nav ul ul ul a {
        padding: 14px 20px 14px 0px;
    }
    /*second level color*/
    .container-navigation nav ul ul a {

    }
    /*third level color*/
    .container-navigation nav ul ul ul a {

    }
    /* Hide Dropdowns by Default second level*/
    .container-navigation nav ul ul {
        float: none;
        position: static;
    }
    /* Hide menus on hover */
    .container-navigation nav ul ul li:hover>ul,
    .container-navigation nav ul li:hover>ul {
        display: none;
    }
    /* fisrt level Dropdown */
    .container-navigation nav ul ul li {
        display: block;
        width: 100%;
    }
    .container-navigation nav ul ul ul li {
        position: static;
        /* has to be the same number as the "width" of "nav ul ul li" */
    }
}

@media all and (max-width: 330px) {
    .container-navigation nav ul li {
        display: block;
        width: 94%;
    }
}





/* _navbar.scss */


@media (min-width: 768px) {
    .navbar-expand-md {
        flex-wrap: nowrap;
        justify-content: flex-start;
    } }

@media (min-width: 768px) {
    .navbar-expand-md .navbar-nav {
        flex-direction: row;
    }}


.navbar {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding-top: 0rem;
    padding-bottom: 0rem;
    background: rgba(0, 0, 0, .8);
    height: 55px;
}

@media (min-width: 768px) {
    .navbar {
        top: 40px;
        height: 100px;
    }
}

.navbar-nav {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    list-style-type: none;
}

.nav-link {
    display: block;
    padding: .5rem 1rem;
    color: #0d6efd;
    text-decoration: none;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
}

@media (max-width: 768px) {
    ul.submenu {
        background: rgba(0, 0, 0, .9);
        width: 100vw;
        margin-left: 40px !important;
    }
}

ul.submenu > li.divider:not(.parent) {
    border-bottom: 1px solid white;
    height: 1px;
    width: auto;
    overflow: hidden;
}

span.mod-menu__heading {
    padding: .75rem;
    display: block;
    color: var(--accent-color);
    position: relative;
}

span.mod-menu__heading:hover {
    color: var(--accent-color);
}

.mod-menu__heading::after {
    content: "";
    height: 1px;
    width: 75%;
    background: var(--primary-color);
    position: absolute;
    left: -0.5rem;
    bottom: 0;
}


/* Breadcrumbs */

section#breadcrumbs ol.mod-breadcrumbs.breadcrumb {
    padding-left: 0 !important;
    padding-right: 0 !important;
}