#navigationbar {
	position: -webkit-sticky;
	position: sticky;
	transition: all 200ms;
	z-index: 8;
}

#navigationbar-menuElements {
	-webkit-overflow-scrolling: touch;
	/*background-color: #333333;*/
	display: flex;
	margin: 0;
	overflow: scroll;
	overflow-x: hidden;
	overflow-y: hidden;
	padding: 0;
	position: relative;
}

#navigationbar-menuElements>li:link>a {
	color: red !important;
}

#navigationbar-menuElements>li>a::after {
	display: none;
}

.navigationbar-heading a:hover {
	color: #333 !important;
}

.navigationBar {
	border: 0;
	margin: 0;
	padding: 0;
}

.navigationBar-activeArrow {
	bottom: -7px;
	line-height: 1;
	position: absolute;
	text-align: right;
	width: calc(50% - 4px);
}

.navigationBar-activeElementImage {
	height: 24px;
	width: 24px;
}

.navigationBar-arrow {
	align-items: center;
	background-color: #FFF;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	height: 36px !important;
	position: absolute;
	top: 28%;
	visibility: hidden;
	width: 36px;
	z-index: 1;
}

.navigationBar-arrowImage {
	background:
		url(/system/modules/de.stuttgart.uni.v3.basics/resources/img/sprites/sprites-icons-sprite.svg);
	height: 32px !important;
	transform: scale(1.5);
	width: 32px !important;
}

.navigationBar-arrowImageLeft {
	background-position: -132px 9px;
	background-size: 1450px 110px;
}

.navigationBar-arrowImageRight {
	background-position: -200px 9px;
	background-size: 1450px 110px;
}

.navigationBar-container {
	background-color: #333333;
	width: 100%;
}

.navigationBar-heading {
	color: #FFFFFF !important;
	font-size: 20px;
	line-height: 1;
	padding-left: 16px !important;
	padding-right: 16px !important;
	padding-top: 22px !important;
	padding-bottom: 22px !important;
	transition-duration: 0s !important;
	white-space: nowrap;
	text-decoration: none;
	height: 100%;
}

.navigationBar-heading:focus {
	background-color: #fff;
	color: #333 !important;
	outline: none;
	transition: background-color 200ms linear;
}

.navigationBar-landingPage {
	padding: 24px 16px !important;
}

.navigationBar-landingPageImage {
	background-image: url(/system/modules/de.stuttgart.uni.v3.zsb/resources/navigationbar/images/studyProgramList-white.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 35px;
	width: 35px;
}

.navigationBar-leftArrow {
	left: -10px;
}

.navigationBar-rightArrow {
	right: -10px;
}

.navigationBar-roundButton {
	margin: 6px;
	overflow: hidden;
	position: relative;
}

.navigationBar-subheading {
	color: inherit;
	font-size: 16px;
	padding-top: 3px;
}

@media (pointer :coarse) {
	#navigationbar-menuElements {
		overflow-x: scroll !important;
	}
}

@media (pointer : fine) {
	.nav li:hover a:hover {
		background: #FFF;
		color: #333333 !important;
	}
	
	#navigationbar-menuElements>li:hover>a {
		color: #333333 !important;
	}
	
	#navigationbar-menuElements>li:hover>a>.navigationBar-subheading {
		color: #333333 !important;
	}
	
	.navigationBar-arrow:hover {
		background-color: #00BEFF;
	}
	
	.navigationBar-arrow:hover>.navigationBar-roundButton>.navigationBar-arrowImageRight {
		background-position: -215px 9px;
	}
	
	.navigationBar-arrow:hover>.navigationBar-roundButton>.navigationBar-arrowImageLeft {
		background-position: -147px 9px;
	}
	
	.navigationBar-landingPageListItem:hover .navigationBar-landingPageImage {
		background-image: url(/system/modules/de.stuttgart.uni.v3.zsb/resources/navigationbar/images/studyProgramList-grey.svg);
	}
	
	.navigationBar-landingPageListItem:focus .navigationBar-landingPageImage {
		background-image: url(/system/modules/de.stuttgart.uni.v3.zsb/resources/navigationbar/images/studyProgramList-grey.svg);
	}
	
	.navigationBar-landingPageListItem:focus-within .navigationBar-landingPageImage {
		background-image: url(/system/modules/de.stuttgart.uni.v3.zsb/resources/navigationbar/images/studyProgramList-grey.svg);
	}

	.navigationBar-listItem:hover {
		background-color: white;
		transition: background-color 200ms linear;
	}
}