@font-face { 
	font-family: 'CalibriLight';
    src: url('../ttf/CalibriL.ttf') format('truetype'); 
}

:root {
	--main-bg-color:#efefff;
	--main-bg2-color:#66829e;
	--main-hov-color:#8f8f8f;
	--main-txt-color:#0f0fff;
	--main-cont-color:#ef7000;
	--main-bd-color:#cfcfff;
}

.button {
	background-color:Transparent;
    border:1px solid var(--main-bd-color);
	color:var(--main-txt-color);
	cursor:pointer;
	display:block;
	float:left;
	font-weight:100;
	height:3em;
	line-height:3em;
	margin:0;
	padding:0;
	text-align:center;
	text-decoration:none;
	transition:border-color 0.5s;
	width:calc(100% - 2px);
		max-width:calc(24em - 2px);
		min-width:calc(12em - 2px);
}

.button:hover {
	color:var(--main-txt-color);
	border:1px solid var(--main-txt-color);
	transition:border-color 0.5s;
}

.hide {
	opacity:0;
}

.image h1 {
	border-left: solid 12px var(--main-cont-color);
	color:var(--main-bg-color);
	font-size:1.6em;
	padding: 0 0 0 1em;
}

.logo{
	background-color:Transparent;
	background-image:url("../img/logo/boehmert_engineering_ob.png");
	background-position:left;
	background-repeat:no-repeat;
	background-size:contain;
	display:block;
	float:left;
	height:2em;
	left:4%;
	margin:0;
	padding:0;
	position:fixed;
	transition:top 0.5s;
	top:1.5em;
	width:20.5em;
}

.out .logo{
	top:-6em;
}

.white .logo{
	background-image:url("../img/logo/boehmert_engineering_ow.png");
}

.scroll_container {
	background-color:Transparent;
	bottom:0; 
	color:var(--main-txt-color);
	font-size:0.8em;
	margin-bottom:1em;
	position:absolute; 
	text-align:center;
	width:100%;
}

.scroll_container .scroll {
	background-repeat:no-repeat;
	background-size:contain;
	border: solid var(--main-txt-color);
	border-width: 0 4px 4px 0;
	color:var(--main-txt-color);
	display:block;
	font-size:0.8em;
	float:none;
	height:1.5em;
	margin:0 auto 1em auto;
	text-align:center;
	text-decoration:none;
	transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
	width:1.5em;	
	transition:width 0.2s, height 0.2s;
}

.scroll:hover {
	height:2em;
	width:2em;
}

#welcome {
	background-attachment: fixed;
	background-color: var(--main-bg-color);
	background-image: url("../img/logo/boehmert_engineering_ob.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: auto 4em;
	height: 100%;
	transition: background-size 2.5s;
}

#aboutme {
	background-attachment: fixed;
	background-color: var(--main-bg-color);
	background-image: url("../img/img/aboutme/me.jpg");
	background-position: right center;
	background-repeat: no-repeat;
	height: 100%;
	transition: background-size 2.5s;
	background-size: 60% auto;
}

#aboutme article {
	background-color:var(--main-bg-color);
	color:var(--main-txt-color);
	height:100%;
	padding:7em 0 0 4%;
	width:36%;
		max-width:48em;
		min-width:25em;
}

#aboutme .dreieck {
	border-left: 100% solid transparent;
	border-right: 180px solid transparent;
	border-top: 1200px solid var(--main-bg-color);
	display:block;
	float:left;
	height:0;
	width:0;
	position:relative;
	z-index:10;
}

#signatur {
	display:block;
	height:10em;
	width:500px;
	float:left;
	background-color:Transparent;
	background-image: url("../img/img/aboutme/signation_b.png");
	background-size:15em auto;
	background-repeat:no-repeat;
}

#aboutme .scroll_container,
#konstruktion .scroll_container,
#druck .scroll_container,
#service .scroll_container,
#projekte .scroll_container,
#beratung .scroll_container {
	color:var(--main-bg-color);
}

#aboutme .scroll_container .scroll,
#konstruktion .scroll_container .scroll,
#druck .scroll_container .scroll,
#service .scroll_container .scroll,
#projekte .scroll_container .scroll,
#beratung .scroll_container .scroll {
	border-color:var(--main-bg-color);
}

#vision {
	border:solid 1em var(--main-cont-color);
	border-left:none;
	border-right:none;
	background-attachment:fixed;
	background-color:var(--main-bg2-color);
	background-image:url("../img/img/vision/vision.jpg");
	background-position:0;
	background-repeat:no-repeat;
	background-size:cover;
	height:60%;
			min-height:33%;
}

#vision article {
	float:none;
	height:auto;
		min-height:0;
	color:var(--main-bg-color);
	margin:0 auto;
	padding:10% 0 0 0;
	width:40%;        
	transition:opacity 1.5s;
}

#angebot {
	padding:7em 0 0 0;
	margin:0;
	background-color:var(--main-bg-color);	
	height:calc(100% - 7em);
	 min-height:0;
}

#angebot h1{
	text-align:center;
	width:100%;
}

#angebot article {
	display:block;
	float:left;
	height:auto;	
		min-height:0;
	padding:0;
	margin:0;
	width:25%;
}

#angebot article p {
	padding: 2em 8% 2em 8%;
	display:block;
	float:left;
	height:auto;
	margin:0 0 2em 0;	
	width:calc(100% - 8% - 8%);
}

#angebot article #p1 {
	padding: 2em 8% 0 16%;
	width:calc(100% - 8% - 16%);
}

#angebot article #p4 {
	padding: 2em 16% 0 8%;
	width:calc(100% - 8% - 16%);
}

#angebot .image {
	background-color:var(--main-bg2-color);
	background-repeat:no-repeat;
	background-size:110% auto;
	background-position:top center;
	color:var(--main-bg-color);
	display:block;
	float:left;
	height: calc(35% + 2em);
	padding:0;
	transition: background-size 0.7s;
	width:100%;
	z-index:10;
}

#angebot .image h1 {
	text-align:left;
	margin:1em 0 1em 0;
}

	#angebot #image1 .dreieck_links {
	width:calc(54% - 2em);
	}	

	#angebot #image1 .dreieck_rechts {
		width:calc(46% - 2em);
	}	

	#angebot #image4 .dreieck_links {
		width:calc(46% - 2em);
	}	

	#angebot #image4 .dreieck_rechts {
		width:calc(54% - 2em);
	}	

#angebot .button {
	display:block;
	float:left;
	margin:0;
	padding:0;
}

.image_container {
	display:block; 
	float:left; 
	height:100%;
	 min-height:15em;
	margin: 0 8% 2em 8%; 
	width:calc(100% - 8% - 8%);
}

#image1 .image_container {
	margin: 0 8% 2em 16%; 
	width:calc(100% - 8% - 16%);
}

#image4 .image_container {
	margin: 0 16% 2em 8%; 
	width:calc(100% - 16% - 8%);
}

#angebot #image1{
	background-image:url("../img/img/angebot/construction_n_prototyping.jpg");
}

#angebot #image2{
	background-image:url("../img/img/angebot/projectmanagement_n_documentation.jpg");
}

#angebot #image3{
	background-image:url("../img/img/angebot/consultation_n_management.jpg");
}

#angebot #image4{
	background-image:url("../img/img/angebot/workshop_n_training.jpg");
}

#angebot article:hover .image{
	background-size:132% auto;
}

#angebot .image h1 {
	font-size:1.6em;
	line-height:1.3em;
}

#angebot .image .button{
	border-color:var(--main-bg-color);
	color:var(--main-bg-color);
	float:left;
	min-width:calc(100%);
	max-width:100%;
	margin: calc(10% - 5px) 0 0 0;
}
#angebot .dreieck_links {
	border:no-border;
	border: 2em solid transparent; 
	border-bottom: 2em solid var(--main-bg-color);
	border-left:none;
	border-top:none;
	display:block; 
	float:left;
	height: 0; 
	width:calc(50% - 2em); 
}
	
#angebot .dreieck_rechts {
	border:no-border;
	border: 2em solid transparent; 
	border-bottom: 2em solid var(--main-bg-color);
	border-right:none;
	border-top:none;
	display:block; 
	float:right;
	height: 0; 
	width:calc(50% - 2em); 
}	

#konstruktion {
	background-color:var(--main-bg-color);
	height:100%;
}

#konstruktion article {
	width:calc(33% - 6%);	
}

#konstruktion #article1_konstruktion {
	padding:7em 2% 0 4%;
}

#konstruktion #image_container {
	display:block; 
	height:100%; 
	width:67%; 
	float:left;
}

#konstruktion .image {
	background-attachment:fixed;
	background-color:var(--main-bg2-color);
	background-repeat:no-repeat;
	background-size:67% auto;
	background-position:right top;
	color:var(--main-bg-color);
	display:block;
	float:left;
	height:calc(50% - 7em);
	margin:0;
	padding:7em 6% 0 3%;
	transition: background-size 0.7s;
	width:calc(100% - 6% - 3%);
	z-index:10;
}

#konstruktion .image:hover{
	background-size:80% auto;
}

#konstruktion #image5 {
	background-image:url("../img/img/konstruktion/Konstruktion.jpg");
}

#konstruktion #image6 {
	background-image:url("../img/img/konstruktion/Umsetzung.jpg");
	background-position:right bottom;
	height:calc(50% - 2em);
	padding:2em 6% 0 3%;
}

#druck {
	background-color:var(--main-bg-color);
	height:100%;
}

#vid_player {
	background-color:var(--main-bg2-color);
	display:block;
	float:left;
	margin:auto;
	height:100%;
	overflow:hidden; 
	width:100%; 
	z-index:-20; 
}

#druck article {
	background-color:Transparent;
	background-image:url("../img/bgi/transparent_dark_b.png");
	background-repeat:no-repeat;
	background-size:100%;
	color:var(--main-bg-color);
	display:flex;
		display:-webkit-flex;
	float:left;
	height:100%;
	padding:0;
	position:absolute;
	width:100%;
}

#druck article h1 {
	background-color:Trasparent;
	margin:auto;
	padding:0;
	text-align:center;	
	vertical-align:middle;
	width:100%;
	transition:opacity 1.5s;
}

#druck .info {
	background-image:url("../img/img/konstruktion/plus.png");
	background-repeat:no-repeat;
	background-position:0 0;
	background-size:2.5em;
	display:block;
	max-width:30em;
	padding:1.4em 0 0 1.6em;
	position:absolute;
	text-align:left;
	transition:background-size 0.7s, background-position 0.7s;
	width:auto;
}

#druck .info:hover {
	background-size:3em;
	background-position:-0.25em -0.25em;
}

#druck .info p {
	opacity:0;
	transition: opacity 0.7s;
}

#druck .info:hover p {
	opacity:1.0;
	transition: opacity 0.7s;
}

#druck #info1 {
	top:70%;
	left:4%;
}

#druck #info2 {
	top:7em; 
	right:4%;
}

#druck #info3 {
	left:50%;
	top:60%;
}

#druck #info4 {
	left:10%; 
	top:20%;
}

#service {
	background-color:var(--main-bg-color);
	height:100%;
}

#service article {
	display:block;
	float:left;
	height:calc(35% - 7em);	
		min-height:10em;
	padding:7em 4% 2em 4%;
	margin:0;
	width:calc(100% - 4% - 4%);
}

#service article div {
	width:60%;
	margin:auto;
}

#service .dreieck {
	border-left: 100% solid transparent;
	border-right: 180px solid transparent;
	border-top: 1200px solid #efefff;
	display:block;
	float:left;
	height: 0;
	width: 0;
	position:relative;
	z-index:10;
}

#service .dreieck_links {
	border:no-border;
	border: 2em solid transparent; 
	border-top: 2em solid var(--main-bg-color);
	border-left:none;
	border-bottom:none;
	display:block; 
	float:left;
	height: 0; 
	width:calc(50% - 2em); 
}
	
#service .dreieck_rechts {
	border:no-border;
	border: 2em solid transparent; 
	border-top: 2em solid var(--main-bg-color);
	border-right:none;
	border-bottom:none;
	display:block; 
	float:right;
	height: 0; 
	width:calc(50% - 2em); 
}

#service #image7 .dreieck_links {
	width:calc(62% - 2em);
}	

#service #image7 .dreieck_rechts {
	width:calc(38% - 2em);
}	

#service #image9 .dreieck_links {
	width:calc(38% - 2em);
}	

#service #image9 .dreieck_rechts {
	width:calc(62% - 2em);
}	

#service .image {
	background-color:var(--main-bg2-color);
	background-repeat:no-repeat;
	background-position:center;
	background-size:auto 120%;
	color:var(--main-bg-color);
	display:block;
	float:left;	
	margin:0;
	height:calc(65% - 2em);
	width:calc(33%);
	transition:background-size 0.7s;
}

#service #image7 h1 {
	margin:3em 0 1em 12%;
}

#service #image7 p {
	padding:0 6% 0 12%;
	width:calc(100% - 18%);
}

#service #image8 h1 {
	margin:3em 6% 1em 6%;
}

#service #image8 p {
	padding:0 6% 0 6%;
	width:calc(100% - 12%);
}

#service #image9 h1 {
	margin:3em 12% 1em 6%;
}

#service #image9 p {
	padding:0 12% 0 6%;
	width:calc(100% - 18%);
}

#service .button {
	border:solid 1px var(--main-bg-color);
	color:var(--main-bg-color);
	position:absolute;
	bottom:7em;
}

#service .button:hover{
	color:var(--main-bg-color);
}

#service .image:hover {
	background-size:auto 144%;
}

#service #image7 {
	background-image:url("../img/img/service/auftragsservice.jpg");

}

#service #image8 {
	background-image:url("../img/img/service/invest.jpg");
	width:calc(34%);
}

#service #image9 {
	background-image:url("../img/img/service/workshops.jpg");
}

#projekte {
	background-color:var(--main-bg-color);
	color:var(--main-txt-color);
	height:100%;
}

#projekte article {	
	color:var(--main-txt-color);
	height:100%;
	float:right;
	padding:7em 4% 0 2%;
	width:calc(33% - 6%);
}

#projekte .image{
	background-color:var(--main-bg2-color);
	background-repeat:no-repeat;
	background-size:100% auto;
	background-position:left bottom;
	background-attachment:fixed;
	color:var(--main-bg-color);
	display:block;
	float:left;
	height:calc(50% - 2em);
	padding:2em 2% 0 4%;
	width:calc(67% - 6%);
	transition:background-size 0.7s;
}

#projekte #image10 {
	background-image:url("../img/img/projekte/projektmanagement.jpg");
	padding:7em 2% 0 4%;
	height:calc(50% - 7em);
	background-position:top;
}

#projekte #image11 {
	background-image:url("../img/img/projekte/dokumentation.jpg");
	background-position:bottom;
}

#beratung {
	background-color:var(--main-bg-color);
	color:var(--main-txt-color);
	height:100%;
}

#beratung article {	
	color:var(--main-txt-color);
	height:100%;
	float:left;
	padding:7em 2% 0 4%;
	width:calc(33% - 6%);
}

#beratung .image{
	background-color:var(--main-bg2-color);
	background-repeat:no-repeat;
	background-size:100% auto;
	background-position:right center;
	background-attachment:fixed;
	color:var(--main-bg-color);
	display:block;
	float:left;
	height:calc(33% - 2em);
	padding:2em 2% 0 4%;
	width:calc(67% - 6%);
	transition:background-size 0.7s;
}

#beratung #image12 {
	background-image:url("../img/img/beratung/strategie.jpg");
	padding:7em 2% 0 4%;
	height:calc(34% - 7em);
}

#beratung #image13 {
	background-image:url("../img/img/beratung/produktion.jpg");
}

#beratung #image14 {
	background-image:url("../img/img/beratung/logistik.jpg");
}

#beratung .image:hover {
	background-size:120% auto;
}


#projekte .image:hover {
	background-size:120% auto;
}

#trainings {
	background-color:var(--main-bg-color);
	color:var(--main-txt-color);
	height:100%;
}

#trainings article {
	height:calc(100% - 7em);
	min-height:0;
	padding: 7em 4% 0 4%;
	width:calc(100% - 8%);
}

#trainings h3 {
	margin:0;
	padding:0;
}

#trainings h4 {
	margin:0;
	padding:0 0 1em 0;
	font-weight:normal;
	color:var(--main-cont-color);
}

#trainings #image_corona {
	background-image:url("../img/img/trainings/corona.gif");
	background-size:contain;
	background-position:center left;	
	background-repeat:no-repeat;
	display:block;
	float:left;
	height:14em;
	width:15em;
}

#trainings #message {
	display:block; 
	float:left;
	width:45%;
}

#trainings .seminar {	
	display:none;
	padding:1em;
	float:left;
	width:calc(18em);
	margin:0 1em 2em 0;
	height:auto;
	min-height:calc(17em - 2em);
	transition:box-shadow 0.6s;
	border:solid 1px var(--main-bd-color);
}

#trainings .seminar:hover{
	 box-shadow: 0.1em 0 0.5em 0 rgba(15, 15, 15, 0.2), -0.1em 0 0.5em 0 rgba(15, 15, 15, 0.2);	
	border-color:var(--main-bg-color);	  
}

#trainings .date,
#trainings .location,
#trainings .pricing,
#trainings .attendees {
		background-position:left;
	background-repeat:no-repeat;
	background-size:contain;
	background-size:1.2em;
	height:2em;
	line-height:2em;
	padding:0 0 0 2em;
}

#trainings .date {
	background-image:url("../img/img/trainings/date.png");
}

#trainings .location {
	background-image:url("../img/img/trainings/location.png");
}

#trainings .pricing {
	background-image:url("../img/img/trainings/pricing.png");
}

#trainings .attendees {
	background-image:url("../img/img/trainings/attendees.png");
	margin:0 0 1em 0;
}

#kontakt {
	background-color:var(--main-bg-color);
	color:var(--main-txt-color);
	height:100%;
}

#kontakt article {
	height:calc(70% - 4em);
	min-height:0;
	padding: 4em 2% 0 4%;
	width:34%;
}

#kontakt h1 {
	margin:0;
}

#kontakt .banner {
	background-image:url('../img/img/kontakt/kontakt.jpg');
	background-repeat:no-repeat;
	background-position:top right;
	background-size:cover; 
	display:flex;
		display:-webkit-flex;
	float:left; 
	height:30%; 
	margin:auto;
	text-align:center;
	width:100%;
}

#kontakt .banner h1 {
	background-color:Transparent;
	color:var(--main-bg-color);
	font-size:1.6em;
	margin:auto;
	padding:0 4%;
	text-align:center;	
	vertical-align:middle;
	width:100%;
}

#kontakt .fullsize {
	width:calc(100% - 1em - 2px);
}

#kontakt input[type="submit"] {
	margin:2em 0 0 0;
}

#karte {
	background-image:url("../img/img/kontakt/karte.jpg");
	background-position:reight;
	background-size:cover;
	background-color:var(--main-bg2-color);
	display:block;
	float:left;
	height:70%;
	margin:0;
	overflow:hidden;
	padding:0;
	width:60%;
}

#openstreetmap {
	display:block;
	float:none;
	height:calc(70%);
	margin:0;
	overflow:hidden; 
	padding:0;
	right:0;
	width:60%;
}

#openstreetmap iframe {
	border:none; 
	display:block; 
	float:left;
	height:100%;
	margin:0; 
	overflow-x:hidden; 
	overflow-y:hidden; 	
	padding:0;
	scroll:none;
	width:100%; 
}

#kontakt .scroll_container .scroll {
	margin:0 auto 0 auto;
	transform: rotate(225deg);
		-webkit-transform: rotate(225deg);
		-ms-transform: rotate(225deg);
}

#xing,
#twitter,
#whatsapp,
#facebook,
#instagram,
#youtube,
#skype {
	background-color:Transparent;
	background-image:url("../img/logo/xing.png");
	background-position:center;
	background-repeat:no-repeat;
	background-size:1.5em;
	display:block;
	float:left;
	margin:1em 1em 0 0;
	height:1.5em;
	width:1.5em;
	transition:background-image 0.8s, border 0.8s;
}

#twitter {
	background-image:url("../img/logo/socialmedia/twitter.png");
}

#whatsapp {
	background-image:url("../img/logo/socialmedia/whatsapp.png");
	display:none;
}

#facebook {
	background-image:url("../img/logo/socialmedia/facebook.png");
}

#instagram {
	background-image:url("../img/logo/socialmedia/instagram.png");
}

#youtube {
	background-image:url("../img/logo/socialmedia/youtube.png");
	display:none;
}

#skype {
	background-image:url("../img/logo/socialmedia/skype.png");
	display:none;
}

#xing {
	background-image:url("../img/logo/socialmedia/xing.png");
}





@media screen and (max-width: 1300px){
	#welcome {
		background-size:50% auto;
	}

	#aboutme {
		background-position: 70% -20%;
		height: auto;
		min-height: 100%;
			color: var(--main-bg-color);
			background-color: var(--main-bg2-color);
	}
	
	#aboutme article {
		background-color:Transparent;
		color: var(--main-bg-color);
		height:auto;
			min-height:100%;
		padding:5em 4% 0 4%;
		width: 36%;
			min-width:0;
			max-width:100%;
	}
	
	#signatur {
		background-image:url("../img/img/aboutme/signation_w.png");
	}
	
	#aboutme .button {
		border:solid 1px var(--main-bg-color);
		color:var(--main-bg-color);
	}

	#aboutme .button:hover {
		color:var(--main-bg-color);
	}
	
	#aboutme .dreieck {
		display:none;
	}

	
	#vision {
		height:auto;
	}
	
	#vision article {
		background-color:Transparent;
		color:var(--main-bg-color);
		height:auto;
		padding:2em 4% 0 4%;
		width: 92%;
			min-height:100%;
	}
	
	#vision article p {
		display:block;
		float:left;
		height:auto;
			min-height:1em;
	}
	
	#angebot {
		height:auto;
		min-height:0;
		padding:5em 0 0 0;
	}
	
	#angebot h1{
		text-align:left;
		padding: 0 4%;
		width:calc(100% - 4% - 4%);
	}

	#angebot article {
		height:auto;
		width:100%;
	}
	
	#angebot .image h1 {
		font-size:1.6em;
	}

	#angebot article p,
	#angebot article #p1,
	#angebot article #p4 {
		padding: 2em 4% 2em 4%;
		margin:0 0 2em 0;	
		width:calc(100% - 4% - 4%);
	}
	
	#angebot .image {
		background-size:cover;
	}
	
	#angebot article:hover .image{
		background-size:cover;
	}
	
	#angebot #image1 .dreieck_links,
	#angebot #image1 .dreieck_rechts,
	#angebot #image4 .dreieck_links,
	#angebot #image4 .dreieck_rechts {
		width:calc(50% - 2em);
	}

	.image_container,
	#image1 .image_container,
	#image4 .image_container {
		margin: 0 4% 2em 4%; 
		width:calc(100% - 4% - 4%);
	}
	
	#konstruktion {
		height:auto;
		min-height:0;
		padding: 0;
	}
	
	#konstruktion article {
		padding: 5em 4% 0 4%;
		height: auto;
		width:calc(100% - 4% - 4%);
	}
	
	#konstruktion .image,
	#konstruktion #image6{
		background-size:cover;
		padding: 2em 4% 5em 4%;
		height: auto;
		width:calc(100% - 4% - 4%);
	}
	#konstruktion #image6:hover,
	#konstruktion .image:hover{
		background-size:cover;
	}
	
	#konstruktion #image_container {
		width:100%; 		
	}
	
	#druck {
		height:auto;
		min-height:0;
		padding:0;
	}
	
	#druck article{
		
		padding:0;
	}
		
	#druck h1 {
		display:none;
		float:left;
		padding:7em;
		margin:7em;
		height:100%;
		width:auto;
		position:absolute;
		
	}
	
	#druck .info {
		display:none;
	}
		
	#druck article {
		padding:5em 4% 0 4%;
		height:auto;
		width:calc(100% - 4% - 4%);
	}
	
	#druck .scroll_container {
		display:none;
	}
	
	#service  {
		height:auto;
	}

	#service article {
		padding:2em 4% 2em 4%;
	}

	#service article div {
		width:100%;
		margin:auto;
	}

	#service .dreieck_rechts,
	#service .dreieck_links {
		display:none;
	}

	#service .image,
	#service #image8 {
		background-color:var(--main-bg2-color);
		background-repeat:no-repeat;
		background-position:center;
		background-size:cover;
		color:var(--main-bg-color);
		display:block;
		float:left;	
		margin:0;
		height:calc(65% - 2em);
		width:calc(100%);
		transition:background-size 0.7s;
	}

	#service #image7 h1,
	#service #image8 h1,
	#service #image9 h1 {
		margin:1em 4% 1em 4%;
	}

	#service #image7 p,
	#service #image8 p,
	#service #image9 p {
		padding:0 4% 0 4%;
		width:calc(100% - 8%);
	}

	#service .button {
		border:solid 1px var(--main-bg-color);
		color:var(--main-bg-color);
		position:sticky;
		margin-bottom:2em;
	}

	#service #image9 .button {
		margin-bottom:7em;
	}

	#service .button:hover{
		color:var(--main-bg-color);
	}

	#service .image:hover {
		background-size:cover;
	}
	
	#projekte {
		height:auto;
		min-height:0;
	}

	#projekte article {	
		color:var(--main-txt-color);
		height:auto;
		
		float:left;
		padding:7em 4% 0 4%;
		width:calc(100% - 8%);
	}

	#projekte .image{
		background-color:var(--main-bg2-color);
		background-repeat:no-repeat;
		background-size:cover;
		color:var(--main-bg-color);
		display:block;
		float:left;
		height:auto;
		padding:1em 4% 2em 4%;
		width:calc(100% - 8%);
		transition:background-size 0.7s;
	}

	#projekte #image10 {
		padding:1em 4% 2em 4%;
		background-position:top;
	}

	#projekte #image11 {
		background-image:url("../img/img/projekte/dokumentation.jpg");
		background-position:bottom;
		padding:1em 4% 5em 4%;
	}

	#projekte .image:hover {
		background-size:cover;
	}
	
	#projekte .button {
		border-color:var(--main-txt-color);
		margin:0;
		width:100%;
		max-width:none;
	}
	
	#beratung {
		height:auto;
		min-height:0;
	}

	#beratung article {	
		color:var(--main-txt-color);
		height:auto;
		
		float:left;
		padding:7em 4% 0 4%;
		width:calc(100% - 8%);
	}

	#beratung .image{
		background-color:var(--main-bg2-color);
		background-repeat:no-repeat;
		background-size:cover;
		color:var(--main-bg-color);
		display:block;
		float:left;
		height:auto;
		padding:1em 4% 2em 4%;
		width:calc(100% - 8%);
		transition:background-size 0.7s;
	}

	#beratung #image12 {
		padding:1em 4% 2em 4%;
	}

	#beratung #image14 {
		padding:1em 4% 5em 4%;
	}

	#beratung .image:hover {
		background-size:cover;
	}
	
	#beratung .button {
		border-color:var(--main-txt-color);
		margin:0;
		width:100%;
		max-width:none;
	}

		
	#trainings {
		background-color:var(--main-bg-color);
		color:var(--main-txt-color);
		height:auto;
		 min-height:none;
		padding:0;
	}


	#trainings article {
		height:auto;
		min-height:0;
		max-height:none;
		padding: 5em 4% 5em 4%;
		width:calc(100% - 8%);
	}
	
	#trainings #image_corona {
		background-position:center;	
		margin-bottom:2em;
		width:100%;
	}
	
	#trainings #message {
		width:100%;
	}

	#trainings .seminar {
		padding:2em 0;		
		float:left;
		width:calc(100%);
		margin:0;
		height:auto;
		min-height:calc(15em - 2em);
		border:none;
		border-top:solid 1px var(--main-bd-color);
	}

	#trainings .button {
		width:100%;
		max-width:none;
		min-width:0;
	}

	#trainings .seminar:hover{
		  box-shadow: none;
	}
	
	#trainings .button {
		border-color:var(--main-txt-color);
		margin:0;
		width:100%;
		max-width:none;
	}

	#kontakt {
		height:auto;
			min-height:100%;
	}

	#kontakt .banner {
		height:auto; 
	}

	#kontakt .banner h1 {
		color:var(--main-bg-color);
		font-size:1.6em;
		margin:2.5em auto;
		padding:0 4%;
	}
	
	#kontakt .dreieck {
		display:none;
	}

	#kontakt article {
		padding:2em 4% 0 4%;
		width:92%;
			max-width:48em;		
	}
		
	#openstreetmap {
		display:none;
	}
}