/*Styles for the mobile navigation menu*/

.navbar-width {
    width: calc(100% - 275px);
}

.navbar__items {
    display: inline-block;
    padding: 0;
    margin: 0;
}

.navbar__item {
    display: inline-block;
    vertical-align: middle;
}

/*Logo im Mobile menu*/
.navbar-mobilemenu > div.logoContainer {
    background: url("/images/logo2.png");
    background-repeat: no-repeat;
}

.navbar-toggler {
    /*
            float: left;
            margin: 0;
            height: 50px;
            width: 50px;
            background: #444;
            border-radius: 0;
            */
    margin-right: 15px;
    border: 0;
    outline: 0;
    z-index: 1
}

.navbar-toggler .icon-bar {
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 1px;
    background: #fff;
    transition: .5s ease;
}

.navbar-toggler .icon-bar + .icon-bar {
    margin-top: 5px;
}

.navbar-toggler.collapsed .icon-bar:nth-child(2) {
    transform: rotate(0)translateY(0)translateX(0);
}

.navbar-toggler.collapsed .icon-bar:nth-child(3) {
    opacity: 1
}

.navbar-toggler.collapsed .icon-bar:nth-child(4) {
    transform: rotate(0)translateY(0)translateX(0);
}

.navbar-toggler .icon-bar:nth-child(2) {
    transform: translateY(9px)rotate(-45deg);
}

.navbar-toggler .icon-bar:nth-child(3) {
    opacity: 0
}

.navbar-toggler .icon-bar:nth-child(4) {
    transform: translateY(-9px)rotate(45deg);
}

.logoContainer {
    height: 121px;
    width: 270px;
    transition: all 0.2s ease-in-out;
    display: inline-block;
}

button.navbar-toggler.collapsed + div .logoContainer {
    background: url("/images/logo2.png");
    background-repeat: no-repeat;
}

button.navbar-toggler:not(.collapsed) + div .logoContainer {
    background: url("/images/logo_small.png");
    background-repeat: no-repeat;
}

button.navbar-toggler.collapsed + div .mobileLangContainer {
    opacity: 0;
    width: 0;
}

button.navbar-toggler:not(.collapsed) + div .mobileLangContainer {
    opacity: 1;
    width: 100%;
    transition: opacity 2s, width 0s 0s;
}