.logo {
    position: fixed;
	width: 150px;
	height: 60px;
	background-image: url("../images/design/Christine-Derr-Logo-c.svg");
	background-size: cover cover;
	background-repeat: no-repeat;
	background-position: center center;
	top: 10px;
	right: 20px;
    z-index: 2000;
}

@media(min-width:400px) {
	.logo { 
        position: absolute;
        width: 200px;
        height: 89px;
	    background-image: url("../images/design/Christine-Derr-Logo.svg");
        top: 100px;
        right: 50px;
        left: inherit;
	}
}

@media(min-width:768px) {
	.logo { 
        width: 300px;
        height: 134px;
        top: 200px;
        right: 100px;
	}
}

@media(min-width:992px) {
	.logo { 
        width: 400px;
        height: 178px;
        top: 200px;
        right: 100px;
	}
}



/*  TOGGLE  */

.navbar-toggle {
    position: absolute;
	padding: 0px;
	text-align: center;
    left: 20px;
    top: 12px;
    background-color: var(--zero) !important;
    border: 0px solid transparent !important;
    border-radius: 0px;
	color: var(--secondary);
    z-index: 100;
}

@media(min-width:768px) {
    
    .navbar-toggle {
        left: 20px;
        top: 2px;
    }
}

.hamburger {
	padding: 0px; 
}



/*  SIDE  */

.navbar {
    position: relative;
    z-index: 1000 !important;
    
}


.navbar-header { 
    display: block;
    position: fixed;
    height: 70px; 
    width: 100%;    
    background-color: var(--zero); 
    z-index: 2;
}



@media(min-width:768px) {
    .navbar-header { 
        display: none; 
        height: 44px; 
        width: 200px;
    }
    .navbar-header-scrolled { 
        display: block !important; 
        z-index: 1;
    }
    
    .navbar-header-scrolled .navbar-toggle { 
        display: block !important; 
    }
}


#navbar-ex-collapse {
    display: none;
    width: auto;
    padding-right: 0px;
    padding-left: 0px;
    overflow-x: visible;
    -webkit-overflow-scrolling: touch;
    border-top: 0px solid transparent;
    -webkit-box-shadow: inset 0 0px 0 rgba(255, 255, 255, .1);
    box-shadow: inset 0 0px 0 rgba(255, 255, 255, .1);
}

@media(min-width:768px) {
	#navbar-ex-collapse:not(.navbar-collapse-scrolled) {
        background-color: inherit !important;
        display: block;
    }
}
#navbar-ex-collapse.in, #navbar-ex-collapse.collapsing {
    display: block;
}


#sidebar {
    position: fixed;
    top: 70px;
    left: 0px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: auto;
    width: 200px;
    background-color: var(--secondary);
    z-index: 2;
}

.collapse-scrolled {
        display: inherit;
    }
@media(min-width:768px) {
	#sidebar {
        position: absolute;
        top: 0px;
		height: 100vH;
	}
    .sidebar-scrolled {
        position: fixed!important;
        top: 44px !important;
		height: auto !important;
	}
    .collapse-scrolled {
        display: none;
    }
}



/* NAVIGATION */

.side-nav { 
    margin-bottom: 2em; 
    width: 200px;
    display: block; 
    padding-inline-start: 0;
}

.side-nav>li {
    width: 200px;
    display: block;
    list-style: none;
    position: relative;
}

.side-nav>li>a {
    position: relative;
    display: block;
    padding: 12px 0px 12px 20px !important; 
    font-size: 1.2em; 
    color: var(--zero); 
    font-weight: 400; 
    text-decoration: none;
    text-transform: uppercase; 
    line-height: 1.2em;
}

.side-nav>li>a:hover,
.side-nav>li>a:focus {
    color: var(--secondary); 
    background-color: var(--tertiary); 
    text-decoration: none; 
}

.side-nav>li.active>a, 
.side-nav>li.active>a:hover,
.side-nav>li.active>a:focus { 
    width: 200px;
    height: 44px;
    background-color: var(--zero);
    color: var(--secondary);
    text-decoration: none; 
}
.side-nav>li.active:after {
    content: '';
    position: absolute;
    width: 0px;
    height: 0px;
    right: -22px;
    top: 0px;
    border-style: solid;
    border-width: 22px 0 22px 22px;
    border-color: transparent transparent transparent var(--zero) !important;
}



/*  QUICKLINKS  */


ul.menue_quicklinks 						{ display: block; -webkit-padding-start: 0px; }
ul.menue_quicklinks li 						{ list-style-type: none; text-align: left; }
ul.menue_quicklinks a 						{ color: var(--zero); font-size: 1em; font-weight: normal; text-decoration: none; display: block; text-transform: uppercase; margin-bottom: 10px; padding-left: 20px; }
ul.menue_quicklinks a:hover 				{ background-color: var(--tertiary); color: var(--secondary); text-decoration: none; }
ul.menue_quicklinks a.active 		        { background-color: var(--zero); color: var(--secondary); }
ul.menue_quicklinks a.active:hover 		    { background-color: var(--zero); color: var(--secondary); }
ul.menue_quicklinks li.active a             { color: var(--primary); }