@charset "UTF-8";
/* CSS Document */

@media screen and (max-width: 1195px), (max-height: 780px){
	
	.c-hamburger {
	display: block;
	position: fixed;
	top: 3vh;
	right: 3vh;
	width: 60px;
	height: 20px;
	font-size: 0;
	text-indent: -9999px;
	box-shadow: none;
	border: none;
	cursor: pointer;
	z-index: 501;
	color: #0580b6;
	padding: 3vh;
	background-color: #ffffff;
}

.c-hamburger:focus {outline: none;}

.c-hamburger span {
	display: block;
	position: absolute;
	left: 18px;
	right: 18px;
	height: 3px;
	background: #00528e;
}

.c-hamburger span::before,
.c-hamburger span::after {
	position: absolute;
	display: block;
	left: 0;
	width: 100%;
	height: 3px;
	background-color: #00528e;
	content: "";
}

.c-hamburger span::before {top: -7px;}
.c-hamburger span::after {bottom: -7px;}

.c-hamburger--htx span::before,
.c-hamburger--htx span::after {
	transition-duration: 0.3s, 0.3s;
	transition-delay: 0.3s, 0s;

}

.c-hamburger--htx span::before {transition-property: top, transform;}
.c-hamburger--htx span::after {transition-property: bottom, transform;}

/* active state, i.e. menu open */


.c-hamburger--htx.is-active span {background: none;}

.c-hamburger--htx.is-active span::before {top: 0; transform: rotate(45deg);}
.c-hamburger--htx.is-active span::after {bottom: 0; transform: rotate(-45deg);}

.c-hamburger--htx.is-active span::before,
.c-hamburger--htx.is-active span::after {
	transition-delay: 0s, 0.3s;
	background-color:#00528e;
}
	#nav-background{
		display: none;
		height: 100vh;
		position: fixed;
		max-width: 100vw;
	}
	
	#content-nav{
	height: 100%;
	display: flex;
	grid-template-columns: none;
	align-items: center;
	}
	
	nav{
	height: 75%;
	display: flex;
	width: 100%;
	flex-direction: column;
	justify-content: space-evenly;
	}
	
	nav div{
	height: 100%;
	align-content: center;
	}
	
	nav a{
	display: flex;
	align-self: center;
	height: auto;
	width: 140px;
	text-align: left;
	}

	#stroke-blue, #stroke-gray{
	width: 3px;
	height: 150%;
	bottom: -75%;
	left: 25%;
	}
	.hero-img img{
	width: calc( 100% - 6vh );
	padding: 3vh;
	top: 12vh;
	margin-right: 0px;
	}
	#content{
	grid-template-rows: auto auto auto auto auto auto auto;
	overflow: hidden;
	}
	.section{
    grid-template-rows: max-content max-content max-content auto max-content;
	}
	h1{
		padding: 4vh 0 2vh
	}
.txt-column-4-right {
    grid-column-start: 2;
  }
.img-left-small{
    height: 50vh;
    grid-column-start: 1;
    grid-column-end: 13;
    grid-row-start: 2;
    grid-row-end: 3;
	}
.img-left-small img{
    height: auto;
	}
	#frank-gbr .img-left-small img{
		bottom: -80%;
	}
.txt-column-2-right{
    grid-column-start: 2;
    grid-column-end: 12;
    grid-row-start: 4;
    grid-row-end: 5;
}
.slider {
    grid-column-start: 1;
    grid-column-end: 13;
    grid-row-start: 5;
    grid-row-end: 6;
    min-height: 100vh;
}
.slider-img-mask, .slider-img-mask-2{
    height: 50vh;
    width: 100%;
    left: 0;
}
.slider-img-mask img, .slider-img-mask-2 img {
    align-self: center;
    max-height: 100%;
    position: absolute;
}
.slide{
		height: 100vh;
}
.txt-column-2-right-slider, .txt-column-2-left-slider{
    width: calc( 100% / 12 * 10 );
    left: calc( 100% / 12 * 1 );
    top: 10vh;
}
.slider-bttn-right, .slider-bttn-right-2{
	left: calc( 100% / 12 * 10.5);
	}
.slider-bttn-left-2{
	left: 2%;
	}
.slider-bttn-right-2, .slider-bttn-left-2{
	top: 38vh;
	}
.dots{
    grid-column-end: 13;
    grid-row-start: 7;
    grid-row-end: 7;
    margin-top: 4.6vh;
}
#gemeinsame-referenzen {
    height: 129vh;
    grid-template-rows: max-content max-content;
}
.txt-column-2-left {
    grid-column-start: 2;
    grid-column-end: 12;
    grid-row-start: 1;
    grid-row-end: 2;
}
.slider-top {
    grid-row-start: 2;
}
.dots-2 {
    top: -60vh;
	grid-column-start: 1;
    grid-row-start: 6;
    grid-row-end: 6;
}
	#kontakt{
    height: auto;
    grid-template-rows: max-content max-content max-content;

}
	
	.txt-column-4-left{
		grid-column-end: 12;
    grid-row-end: 3;
}
	.txt-column-4-after{
		
	grid-column-start: 2;
	grid-column-end: 12;
	grid-row-start: 4;
	grid-row-end: 5;
	}
#google-map-frank-gmbh {
    grid-column-start: 2;
    grid-column-end: 12;
    grid-row-start: 3;
    grid-row-end: 4;
    width: 100%;
    height: 80%;
}
#google-map-frank-gbr {
    grid-column-start: 2;
    grid-column-end: 12;
    grid-row-start: 5;
    grid-row-end: 6;
    width: 100%;
    height: 80%;
}
	#impressum {
    grid-template-rows: max-content max-content;

}
	footer{
		height: 7vh;
	}
	
	#footer-content{
	justify-content: space-evenly;
	}
	
	footer #footer-content a{
		margin: 0;
		font-size: 12px;
	}
	
	
}

@media screen and (min-width: 1195px) and (min-height: 780px){
	#nav-background{
		display: block !important;
	}
}




.cookie-container{
	position: fixed;
	bottom: -100%;
	/*left: 0;*/
	right: 15px;
	/*background: #2f3640;*/
	background: #fff;
	/*color: #f5f6fa;*/
	color: #2f3640;
	/*padding: 0 32px;*/
	padding: 0;
	height: auto;
	width: 360px;
	z-index: 500;

	transition: 400ms;
	-webkit-box-shadow: 0 -2px 16px #2f3640;
	-moz-box-shadow: 0 -2px 16px #2f3640;
	box-shadow: 0 -2px 16px #2f3640;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
}
.cookie-container.active {
	bottom: 15px;
}
.cookie-container .info-text{
	padding: 15px;
}
.cookie-container .info-text h3{
	font-size: 24px !important;
	color:#2f3640;
	font-weight: 700;
	line-height: 1;
	letter-spacing: normal;
	margin: 0 0 12px;
}
.cookie-container p{
	font-size: 14px !important;
	color: #000000
}
.cookie-container .cookie-categories-wrapper{
	color:#323335;

}
.cookie-container .cookie-categories-wrapper .category-list {
	list-style: none;
	padding: 0 16px;
	margin: 0;
	max-height: 320px;
	overflow-y: auto;
}
.cookie-container .cookie-categories-wrapper .category-list .category{
	-webkit-border-radius: 8px;
	border-radius: 8px;
	background-color: #eee;
	padding: 12px;
	color: #323335;
	margin-bottom: 8px;
	position: relative;
	list-style:none;
	margin-left:0;
	font-size: 16px;
}

.cookie-container .cookie-btn {
	background: #0580b6;
	border: 0;
	color: #f5f6fa;
	padding: 12px 48px;
	font-size: 18px;
	margin-bottom: 8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;

	cursor: pointer;
	width: 100%;
}
.cookie-container .cookie-btn.color-sub{
	background: #ccc;
	margin-bottom: 10px;
}

.cookie-container .cookie-btn:disabled{
	cursor: not-allowed;
	color: #ccc;
	background: #eee;
}

.cookie-container .toggle {
	margin:0 0 0 0rem;
	position: relative;
	display: inline-block;
	width: 4rem;
	height: 2rem;
	vertical-align: middle;
	margin-right: 15px;
}

.cookie-container .toggle input {
	display: none;
}

.cookie-container .roundbutton {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	/*background-color: #33455e;*/
	background-color: #ccc;
	display: block;
	transition: all 0.3s;
	border-radius: 3.4rem;
	cursor: pointer;
}
.cookie-container .name {
	vertical-align: middle;
	display: inline-block;
	color: #000000
}

.cookie-container .roundbutton:before {
	position: absolute;
	content: "";
	height: 1.4rem;
	width: 1.4rem;
	border-radius: 100%;
	display: block;
	left: 0.3rem;
	bottom: 0.3rem;
	background-color: white;
	transition: all 0.3s;
}

.cookie-container input:checked + .roundbutton {
	background-color: #0580b6;
}

.cookie-container input:checked + .roundbutton:before  {
	transform: translate(2rem, 0);
}

.cookie-container .button-wrapper{
	padding: 0 15px;
}

.cookieBannerLinks {
	color: #0580b6;
}

#cookieOverlay {
	position: fixed; /* Sit on top of the page content */
	display: none; /* Hidden by default */
	width: 100%; /* Full width (cover the whole page) */
	height: 100%; /* Full height (cover the whole page) */
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.5); /* Black background with opacity */
	z-index: 450; /* Specify a stack order in case you're using a different order for other elements */
	cursor: pointer; /* Add a pointer on hover */
}