@import url('./fonts.css');

html {
	scroll-behavior: smooth;
}

body {
	font-family: Roboto, Arial;
	color: #ffffff;
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
	font-size: 16px;
	background-color: #000000;
}

header {
	background-color: #000000;
	height: 78px;
}

.navbar-brand {
	display: inline;
	margin-right: 0;
}

.navbar-brand img {
	margin-right: 0%;
	margin-left: 0%;
	max-height: 100%;
}

.optimiert-logo img {
	margin-right: 0%;
	margin-left: 0%;
	max-height: 100%;
}

header img.img-fluid {
	max-width: 250px;
}

.page-details header .arrow {
	display: none;
}

.slogan {
	font-size: 1rem;
	padding: 0.7rem 1.2rem;
	border: 1px solid #fff;
	display: inline-block;
	letter-spacing: 4px;
}

.arrow {
	position: absolute;
	left: calc(50% - 1.3rem);
	top: 100%;
	display: flex;
}

.arrow-left {
	border-bottom: 1.3rem solid transparent;
	border-right: 1.3rem solid #000000;
}

.arrow-right {
	border-bottom: 1.3rem solid transparent;
	border-left: 1.3rem solid #000000;
}

h1, h2, h3 {
	font-family: 'Heebo', sans-serif;
	font-weight: 300;
	color: #7F7F7F;
}

h1 {
	font-size: 1.7rem;
}

h2 {
	font-size: 1.5rem;
}

h3 {
	font-size: 1.2rem;
}

main {
	padding-top: 80px;
	padding-bottom: 1.5rem;
}

section {
	font-size: 1.1rem;
}

section ul {
	list-style: none;
}

section li:before {
	 content: "\25AA";
	 color: #ffffff;
	 font-weight: bold;
	 display: inline-block;
	 width: 1em;
	 margin-left: -1em;
}

section a {
	color: #0fa9ea;
	text-decoration: none;
}

section a:hover {
	text-decoration: underline;
	color: #ffffff;
}

.image-container {
	padding: 0;
	background-size: cover;
	background-position-x: center;
	overflow: hidden;
	background-image: none;
}

.image-container > .image-text {
	padding: 0 15px 3.1rem;
	font-size: 17px;
<!--	font-style: italic;-->
}

.nav-link {
	color: #ffffff;
}

.card {
	border: none;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
}

.card-body {
	background-color: #F2F2F2;
}

.image {
	position: relative;
	width: 100%;
}

.image > .arrow-top {
	display: flex;
	left: calc(50% - 1.3rem);
	top: 0;
	bottom: auto;
}

.image > .arrow-top > .arrow-left {
	border-bottom: 1.3rem solid transparent;
	border-left: 1.3rem solid #000000;
	border-right: none;
}

.image > .arrow-top > .arrow-right {
	border-bottom: 1.3rem solid transparent;
	border-right: 1.3rem solid #000000;
	border-left: none;
}

.image > .arrow-bottom {
	display: flex;
	left: calc(50% - 1.3rem);
	top: auto;
	bottom: 0;
}

.image > .black-line-left {
	display: block;
	bottom: 0;
	height: 1.3rem;
	width: calc(50% - 1.3rem);
}

.image > .black-line-right {
	display: block;
	bottom: 0;
	height: 1.3rem;
	width: calc(50% - 1.21rem);
}

.image > .arrow-bottom > .arrow-left {
	border-top: 1.3rem solid transparent;
	border-right: 1.3rem solid #000000;
	border-bottom: none;
}

.image > .arrow-bottom > .arrow-right {
	border-top: 1.3rem solid transparent;
	border-left: 1.3rem solid #000000;
	border-bottom: none;
}

.btn-secondary {
	background-color: #ffffff;
	border-color: #ffffff;
	color: #000000;
}

footer.fixed-bottom {
	background-color: #000000;
	position: relative;
	border-top: 1px solid #ffffff;
	padding-top: 1rem;
}

footer > .arrow {
	top: auto;
	bottom: 100%;
	left: calc(50% - 30px);
	display: none;
}

footer > .arrow > .arrow-left {
	border-top: 30px solid transparent;
	border-right: 30px solid #000000;
	border-bottom: none;
}

footer > .arrow > .arrow-right {
	border-top: 30px solid transparent;
	border-left: 30px solid #000000;
	border-bottom: none;
}

.black-line-left {
	background-color: #000;
	position: absolute;
	left: 0;
	bottom: 100%;
	height: 30px;
	width: calc(50% - 30px);
	display: none;
}

.black-line-right {
	background-color: #000;
	position: absolute;
	right: 0;
	bottom: 100%;
	height: 30px;
	width: calc(50% - 30px);
	display: none;
}

footer .footernav {
	padding-top: 0.2rem;
}

footer .nav-link {
	color: #0fa9ea;
	font-size: 1rem;
	padding: 0 1.5rem;
}

footer a {
	color: #0fa9ea;
}

footer a:hover,
footer .nav-link:hover {
	color: #ffffff;
	text-decoration: underline;
}
@media(min-width: 767px) {
	header {
		height: 106px;
	}
	main {
		padding-top: 106px;
		padding-bottom: 64px;
	}
}
@media(min-width: 992px) {
	.navbar-brand img {
		margin-right: 10%;
		margin-left: 10%;
	}

	.optimiert-logo img {
		margin-right: 10%;
		margin-left: 10%;
	}

	.arrow {
		left: calc(50% - 30px);
	}

	.arrow-left {
		border-bottom: 30px solid transparent;
		border-right: 30px solid #000000;
	}

	.arrow-right {
		border-bottom: 30px solid transparent;
		border-left: 30px solid #000000;
	}
	.navbar-brand img {
		margin-right: 0.5;
	}

	.optimiert-logo img {
		margin-left: 0.5;
	}
	section:not(.details) {
		height: calc(100vh - 106px - 50px)!important;
		margin-bottom: 5rem;
	}
	section:last-child {
		margin-bottom: 0;
	}
	.image-container {
		height: calc(100vh - 106px - 50px);
		background-image: inherit;
	}
	.image-container .image img {
		display: none;
	}
	.image-container > .image-text {
		position: absolute;
		padding: 1.3rem 1.5rem;
		background-color: rgba(0,0,0,0.55);
		max-width: 31%;
		border-radius: 2rem 2rem 0;
	}
	.image {
		height: 100%;
	}
	.image > .arrow-top {
		left: calc(50% - 30px);
	}

	.image > .arrow-top > .arrow-left {
		border-bottom: 30px solid transparent;
		border-left: 30px solid #000000;
	}

	.image > .arrow-top > .arrow-right {
		border-bottom: 30px solid transparent;
		border-right: 30px solid #000000;
	}

	.image > .arrow-bottom {
		left: calc(50% - 30px);
	}

	.image > .black-line-left {
		height: 30px;
		width: calc(50% - 30px);
	}

	.image > .black-line-right {
		height: 30px;
		width: calc(50% - 30px);
	}

	.image > .arrow-bottom > .arrow-left {
		border-top: 30px solid transparent;
		border-right: 30px solid #000000;
	}

	.image > .arrow-bottom > .arrow-right {
		border-top: 30px solid transparent;
		border-left: 30px solid #000000;
	}
	footer.fixed-bottom {
		position: fixed;
		height: 50px;
		border: none;
		padding-top: 0;
	}
	footer > .arrow {
		display: flex;
	}
	footer > .black-line-left {
		display: block;
	}
	footer > .black-line-right {
		display: block;
	}
	footer .footernav {
		opacity: 0.5;
		transition: all;
		transition-duration: 0.4s;
		padding-top: 0.4rem;
	}
	footer .footernav .nav-link {
		font-size: 0.8rem;
		transition: all;
		transition-duration: 0.4s;
		text-align: center;
	}
	footer:hover .footernav {
		opacity: 1;
		font-size: 0.9rem;
		padding-top: 0.4rem;
	}
	footer:hover .footernav .nav-link {
		font-size: 0.9rem;
	}
	footer .footernav .nav-item:nth-child(1) .nav-link{
		width: 177px;
	}
	footer .footernav .nav-item:nth-child(2) .nav-link{
		width: 170px;
	}
	footer .footernav .nav-item:nth-child(3) .nav-link{
		width: 203px;
	}
	footer .footernav .nav-item:nth-child(4) .nav-link{
		width: 158px;
	}
	footer .footernav .nav-item:nth-child(5) .nav-link{
		width: 121px;
	}
	footer .footernav .nav-item:nth-child(6) .nav-link{
		width: 130px;
	}
	/* Desktop Background Images */
	#start .image-container {
		background-image: url('../images/desk/Norbert-Desk-00.jpg');
	}
	#start .image-container > .image-text {
		top: 70%;
		left: 50%;
		transform: translateX(-50%);
		border-radius: 2rem 2rem 2rem 2rem;
		max-width: 50%;
	}
	#problem .image-container {
		background-image: url('../images/desk/Norbert-Desk-01.jpg');
	}
	#problem .image-container > .image-text {
		top: 5%;
		left: 3%;
		border-radius: 2rem 2rem 0 2rem;
		max-width: 40%;
	}

	#suche .image-container {
		background-image: url('../images/desk/Norbert-Desk-02.jpg');
	}
	#suche .image-container > .image-text {
		top: 5%;
		left: 3%;
		max-width: 35%;
	}

	#uebermich .image-container {
		background-image: url('../images/desk/Norbert-Desk-03.jpg');
	}
	#uebermich .image-container > .image-text {
		top: 5%;
		right: 3%;
		border-radius: 2rem 2rem 2rem 0;
		max-width: 45%;
	}

	#werkeln .image-container {
		background-image: url('../images/desk/Norbert-Desk-04.jpg');
	}
	#werkeln .image-container > .image-text {
		top: 5%;
		right: 3%;
		border-radius: 2rem 2rem 2rem 0;
		max-width: 28%;
	}

	#loesung .image-container {
		background-image: url('../images/desk/Norbert-Desk-05.jpg');
	}
	#loesung .image-container > .image-text {
		bottom: 15%;
		right: 3%;
		border-radius: 0 2rem 2rem 2rem;
		max-width: 35%;
	}

	#details .image-container {
		background-image: url('../images/desk/Norbert-Desk-06.jpg');
	}
	#details .image-container > .image-text {
		top: 20%;
		left: 45%;
		border-radius: 2rem 2rem 2rem 0;
		max-width: 35%;
	}

	.datenschutz .container-fluid .row,
	.impress .container-fluid .row,
	.not-found .container-fluid .row,
	.details .container-fluid .row {
		margin-right: calc(4.9% - 15px);
		margin-left: calc(4.9% - 15px);
	}
}
@media (min-width: 1600px) {
	.container {
		max-width: 1520px;
	}
	.image-container > .image-text {
		max-width: 28%;
	}
}
@media (min-width: 767px) and (max-width: 1024px) {
	header {
		height: 80px;
	}
	main {
		padding-top: 80px;
	}
	.image-container {
		height: calc(100vh - 80px - 30px);
	}
	footer.fixed-bottom {
		height: 35px;
	}
}