body {
	width: 100%;
	height: 100%;
	font-family: 'Open Sans';
	color: #202020;
	background-color: #FFF;
}
html {
	width: 100%;
	height: 100%;
}
h1, h2, h3, h4, h5, h6 {
	margin: 0px;
    padding: 0px;
	text-transform: uppercase;
}
p{
	margin-bottom: 0px;
	font-size: 14px;
}

h1, h2{
	font-size: 30px;
	line-height: 40px;
}

h2.small{
	font-size: 22px;
	line-height: 32px;
	margin-bottom: 10px;
}

h3{
	font-size: 18px;
}

.container{
	max-width: 1100px;
}

.topbar{
    background-color: #f5f5f5;
}

.topbar_container{
	display: flex;
	justify-content: space-between;
}

.topbar_contnent{
}

.topbar_contnent2{
	text-align: center;
}
.topbar_contnent3{
	text-align: right;
}

.topbar_contnent a, .topbar_contnent p{
	padding: 15px 0px;
	display: inline-block;
}

a{
	color: #202020;
	transition: all .3s ease-in-out;
	text-decoration: none;
	font-size: 14px;
}

a:hover{
	text-decoration: none;
	color: #004077;
}

.topbar_contnent i{
	margin-right: 10px;
	color: #004077;
}

.topbar_contnent i, .topbar_contnent p{
	display: inline-block;
}

img{
	width: 100%;
}

nav{
	background-color: #ffffff;
	transition: all 0.2s ease-in-out;
}

.nav_container{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 5px 0px;
	transition: all 0.2s ease-in-out;
}

nav ul{
	display: flex;
	list-style: none;
	margin: 0px;
}

nav ul li{
	margin-left: 20px;
	text-transform: uppercase;
}

/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 99;
	box-shadow: 0 0 50px rgba(0,0,0,.2);
	transition: all 0.2s ease-in-out;
}

.sticky .nav_container{
	padding: 5px 0px;
}

/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.stickyPadding {
	padding-top: 75px;

}

.logo{
	width: 200px;
}

.carousel-inner .carousel-item{
	height: 700px;
}

.carousel-inner .carousel-item .container{
	display: flex;
	height: 100%;
	align-items: center;
}

.carousel_titel{
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	max-width: 450px;
	border-radius: 10px;
	overflow: hidden;
}

.carousel_header{
	background-color: rgba(0,0,0,.8);
	color: #ffffff;
	border-bottom: 2px solid #004077;
	padding: 20px;

}

.carousel_desc{
	background-color: rgba(0,0,0,.5);
	color: #ffffff;
	padding: 20px;
}

.d_flex{
	display: flex;
}
.schnellkontakt{
	margin: 40px 0px;
	justify-content: space-between;
	align-items: center;
	position: absolute;
	background-color: #fff;
	width: 400px;
	top: -330px;
	right: 0;
	padding: 40px;
	flex-wrap: wrap;
	border-radius: 20px;
}

.schnell_icon{
	border: 1px solid #e2e6e7;
	border-radius: 1000px;
	margin-right: 20px;
	width: 80px;
	height: 80px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.links{
	align-items: center;
}

.schnellkontakt .links{
	flex-direction: column;
}
.schnellkontakt .rechts{
	width: 100%;
}

.schnellkontakt .btn-custom{
	width: 100%;
}

.schnell_icon i{
	font-size: 30px;
	color: #004077;
}

.schnell_text{
	margin: 20px 0px;
}

.leistungen{
	background-color: #f5f5f5;
	padding: 80px 0px;
	text-align: left;
}

.leistungen p{
	max-width: 50%;
}

.btn-custom{
	border-radius: 1000px;
	padding: 15px 30px;
	color: #ffffff;
	background-color: #004077;
	text-transform: uppercase;
}

.line{
	width: 150px;
	height: 2px;
	background-color: #004077;
	margin: 40px 0;
}

.line.small{
	width: 50px;
	margin: 30px 0;
}

.leistungen_container{
	margin-top: 40px;
	flex-wrap: wrap;
	justify-content: space-between;
}

.leistungen_box{
	background-color: #ffffff;
	flex: 0 0 calc(50% - 15px);
	margin-bottom: 25px;
	border-radius: 10px;
	overflow: hidden;
	display: flex;
}

.leistungen_text{
	padding: 30px 25px;
}


.leistungen_text p{
	max-width: 100%;
}

.leistungen_box img{
	height: 100%;
	max-width: 40%;
	flex: 0 0 40%;
	object-fit: cover;
	object-position: center;
}

.impressionen{
	padding: 80px 0px;
	text-align: left;
}

.impressionen_container{
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 40px;
}

.impressionen_container div{
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0px 3px 20px var(--img_shadow);
	background-position: center center;
	background-size: cover;
	cursor: pointer;
	flex: 0 0 calc(33.333333% - 15px);
	height: 250px;
	margin-bottom: 25px;
	border-radius: 10px;
}

.impressionen_container img{
	width: auto;
	height: 100%;
}

.impressionen_container_bottom img{
	width: 100%;
	height: auto;
}

/* The Modal (background) */
.modal {
	display: none;
	position: fixed;
	z-index: 9999999;
	padding-top: 0px;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0,0,0,0.7);
	justify-content: center;
	align-items: center;
}

/* Modal Content */
.modal-content {
	position: relative;
	background-color: transparent;
	margin: 0px auto;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

.modal-content.impdata{
	background-color: #fff;
	text-align: inherit;
}

.impdata .modal-header,.impdata .modal-body,.impdata .modal-footer{
	width: 100%;
}

.impdata h1, .impdata h2, .impdata h3, .impdata h4 {
	font-size: 18px;
	line-height: 28px;
	margin: 10px 0px;
}

/* The schliessen Button */
.schliessen {
	color: #ffffff;
	position: absolute;
	top: 10px;
	right: 25px;
	font-size: 35px;
	font-weight: bold;
	transition: all .3s ease-in-out;
}

.noscroll_slide {
	overflow: hidden;
}

.schliessen:hover,
.schliessen:focus {
	color: #004077;
	text-decoration: none;
	cursor: pointer;
}

.mySlides {
	display: none;
}

.mySlides img, .mySlidesKO img, .mySlidesAUS img{
	width: 100%;
	max-width: 960px;
	max-height: 750px;
}

.cursor {
	cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	padding: 16px;
	margin-top: -50px;
	color: white;
	font-weight: bold;
	font-size: 20px;
	transition: 0.6s ease;
	border-radius: 0 3px 3px 0;
	user-select: none;
	-webkit-user-select: none;
}

.prev{
	left: 0;
}

/* Position the "next button" to the right */
.next {
	right: 0;
	border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
	color: #004077;
	background-color: rgba(0, 0, 0, 0.8);
}

.referenz{
	text-align: left;
	padding: 80px 0px;
	background-color: #f5f5f5;
}


.kontakt{
	text-align: left;
	padding: 120px 0px 0px;
}

.fix{
	text-align: left;
	padding: 80px 0px;
	background-image: url("../img/6_web.jpg");
	background-attachment: fixed;
	background-position: center center;
	background-size: cover;
}

.fix h2{
	margin-bottom: 40px;
	background-color: rgba(0,0,0,.5);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	color: #ffffff;
	display: inline-block;
	padding: 20px 40px;
	border-radius: 10px;
}

.kontakt-form{
	margin-top: 40px;
	justify-content: space-between;
}

form, .kontakt_img{
	flex: 0 0 calc(50% - 20px);
	text-align: left;
}

.kontakt_img img {
	width: auto;
	max-width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 20px;
}

.iframe{
	margin-top: 80px;
}

iframe{
	width: 100%;
	height: 320px;
	margin-bottom: -6px;
}

.form-control{
	margin-bottom: 10px;
	border-radius: 10px;
	padding: 10px 20px;
}

.form-control:focus, .btn-custom:focus{
	outline: none;
	box-shadow: none;
}

textarea{
	height: 200px;
}

.kontakt-small{
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 40px;
}

form .btn-custom{
	border-radius: 10px;
}

.kontakt-small .topbar_contnent{
	border:none;
}

footer{
	padding: 40px 0px;
	background-color: #004077;
}

footer .container{
	justify-content: space-between;
}

footer p{
	color: #ffffff;
}

.impressum p span{
	cursor: pointer;
}

.hamburger, .nav_close{
	display: none;
}

.uc-partner-icon{
	width: auto;
}

.grecaptcha-badge iframe{
	border-radius: 0px;
}

.bg-success, .bg-danger{
	padding: 15px;
	color: #fff;
	margin-top: 20px;
	border-radius: 10px;
}

@media screen and (max-width: 768px){
	.schnellkontakt{
		flex-wrap: wrap;
		justify-content: center;
	}
	.schnellkontakt .rechts{
		margin-top: 40px;
	}
	.leistungen_box, .impressionen_container div {
		flex: 0 0 calc(50% - 15px);
	}
	.fix{
		background-attachment: inherit;
	}
}
@media screen and (max-width: 480px){
	h2{
		font-size: 22px;
		line-height: 32px;
	}
	.hamburger, .nav_close{
		display: inline-block;
	}
	.hamburger i, .nav_close i{
		font-size: 30px;
	}
	.topbar{
		display: none;
	}
	.nav_container{
		flex-wrap: wrap;
	}

	.nav_close{
		position: absolute;
		top: 20px;
		right: 20px;
	}

	.schnellkontakt{
		position: static;
		width: 100%;
		padding: 0px;
	}

	.schnellkontakt .links {
		align-items: center;
		flex-wrap: wrap;
		justify-content: center;
	}
	.schnell_icon{
		margin-right: 0px;
		margin-bottom: 20px;
	}

	nav ul{
		display: none;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: auto;
		padding-left: 0px;
		padding-top: 100px;
		min-width: 270px;
		background-color: #fff;
		z-index: 2;
	}

	nav ul li{
		padding: 10px 20px;
		margin-left: 0px;
		border-top: 1px solid #efefef;
	}

	nav li a{
		display: block;
	}

	.carousel-inner .carousel-item .container{
		align-items: flex-start;
	}

	.carousel-inner .carousel-item {
		height: 400px;
	}

	.carousel_titel{
		margin-top: 40px;
		max-width: 235px;
	}

	h1{
		font-size: 16px;
		line-height: 26px;
	}

	.carousel_desc{
		font-size: 10px;
	}

	.schnellkontakt .links {
		align-items: center;
		flex-wrap: wrap;
		justify-content: center;
		text-align: left;
	}
	.schnell_icon{
		margin-right: 0px;
		margin-bottom: 20px;
	}

	.leistungen_box, .impressionen_container div {
		flex: 0 0 100%;
		flex-wrap: wrap;
	}

	.leistungen_box img {
		height: auto;
		max-width: 100%;
		flex: 0 0 100%;
	}
	.kontakt-form{
		flex-wrap: wrap;
	}

	form, .iframe, .kontakt_img {
		flex: 0 0 100%;
	}

	form{
		margin-bottom: 40px;
	}

	footer .container {
		justify-content: center;
		flex-direction: column;
		align-items: center;
	}

	.copy{
		margin-bottom: 10px;
	}

	.leistungen, .impressionen, .referenz, .kontakt{
		padding: 40px 0px;
	}

	.kontakt{
		padding: 40px 0px 0px;
	}

	.leistungen p {
		max-width: 100%;
	}

	.kontakt_img img {
		width: 100%;
		max-width: 100%;
		height: auto;
		object-fit: cover;
		border-radius: 20px;
	}

	.topbar_contnent{
		width: 100%;
	}
}