@import 'slider.css';

body { background:#015581; position:relative;}
div.header { background:transparent;position:absolute;}

div#wrapper { width:100%; max-width:none; overflow:hidden; }
div#breadcrumb { display:none;}
#contentwrp 	{ width:100%; margin:0; }
#background {padding-bottom: 82%;}

.important {display: block;position: absolute;top: 0;left: 0;width: 100%;z-index: 1;padding: 0;text-align: center;	box-sizing: border-box;}
section { padding:2.5% 0; float:left; clear:both; display:block; width:100%; position:relative; margin:0 0 }
.section.about-us { height:25vw;background-image:url(../files/roesch-gruppe-infos.jpg) !important; background-size:cover; background-attachment:fixed}

.section.business-unit {padding:50px 0 50px 0;}

.section.business-unit.first { padding:50px 0 10px 0 !important;}
.section.business-unit.second { padding:10px 0 50px 0;}
.section.business-unit .paragraph { justify-content:space-between;}
.section.business-unit .paragraph .text { display:flex;flex-wrap:wrap; position:relative; padding:0; margin:15px; width:calc(33.333% - 30px); border-radius:3px; overflow:hidden; box-shadow:0 0 3px #ccc;}
.section.business-unit .paragraph .text h2 { position:relative; width:100%; background:var(--section-color-even);margin:0;order:1;font-size:1.3em; }
.section.business-unit .paragraph .text p {margin:0;}
.section.business-unit .paragraph .text img { width:100% !important; height:auto !important;}

.section.business-unit.second .paragraph .text { display:flex;flex-wrap:wrap; position:relative; padding:0; margin:15px; width:calc(50% - 30px); border-radius:3px; overflow:hidden; box-shadow:0 0 3px #ccc;}

 a.button {display:block; color:var(--headline-color);	padding:20px;font-weight:500;text-align:center;font-family:var(--basic-font-family);}

a.button:hover {text-decoration:underline; color:#000; }
a.button:hover::after { content:"\f138"; font-family: FontAwesome; position:absolute; right:10%; }

.paragraph .text.business-unit:nth-child(1) {
  position: relative;
  padding: 2rem 1rem 2rem 0;
}

.paragraph .text.business-unit:nth-child(2) {
  position: relative;
  padding: 2rem 0 2rem 1rem;
}

.content { padding:2.5% 20% 0;float: left;clear: both;display: block;width: 100%;position: relative; text-align:center;}

h2 { margin:0 0 .5em; font-weight:600;}
.flex {position: relative;width: 100%;height: 100%;padding:0 0%;display: flex;	display: -webkit-flex;	display: -moz-flex;	box-pack: justify;	justify-content: space-between;
         -webkit-justify-content: space-between; -moz-justify-content:space-between;
		align-items: stretch;margin: 0;flex-wrap: wrap;	-webkit-flex-wrap: wrap;
}

.item{margin: 0;padding: 0 0 0;list-style: none;width:32.333%;text-align:center;position: relative;overflow:hidden;}

.item img{ margin:auto; width:100%; transition:1s;transition: all ease 1s;}

.item .info {  width:100%;z-index:10;padding:.5em 2rem; color:#2d2f33; font-weight:300; letter-spacing:.2em ; text-align:left }
.item h2 { font-size:1vw;margin:1em 0 .7em; text-align:center;  color:#2d2f33;  font-weight:300}

	

.flexbox { width:90%; margin:0 auto}
.flexbox-item{ width:48%;margin: 0 1%;}
.flexbox-item h2 a{ margin:0; background:#82bb25; color:#fff;padding: 20px 2rem; text-align:center; font-weight:300; width:100%; display:block; transition:.5s}
.flexbox-item h2 a:after { content:'\f105'; font:1em/1 FontAwesome;	display: inline-block; margin:3px 0 0 2em; font-weight:900}
.flexbox-item h2 a:hover{ background:#57585a;}

a.more-btn { color:#fff; border:1px solid #fff;font-size:1em; font-weight:300; margin:.5em 0 0;padding:.5em 1em; display:inline-block; text-transform:uppercase}
a.more-btn:hover { background:#e48591}

 /* Slideshow container */
.slideshow-container { position:absolute; bottom:10vw; left:0; width:100%; background:rgba(0,0,0,.2);padding: 2vw 0;}
.mySlides {  display: none;  text-align: center;}
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -30px;
  padding: 16px;
  color: #fff;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
 }
.next { position: absolute;  right: 0;  border-radius: 3px 0 0 3px;}
.prev:hover, .next:hover {  background-color: rgba(0,0,0,0.8);  color: white;}
.dot-container {  text-align: center;}
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;}
.active, .dot:hover {  background-color: #fff;}
q { font-weight:400; color:#fff; font-size:1.5em; line-height:1.2em}
.author {font-weight:700; color:#fff; margin:0; padding:.5vw 0 1vw;font-size:1.5em;} 


#introPic { position:relative; float:left; clear:both; height:auto; width:100%; background-attachment:fixed!important; }


@media screen and (max-width:1650px ) {
	.flex {  padding: 0 10%;}
}
@media screen and (max-width:1440px ) {
	.item .info {width: 100%;padding: .5em 1rem; }
	.item h2 {font-size: 2.5vw;line-height:1.2em}
	.item p { line-height:1.3em; letter-spacing:.15em }

	#mainNavigation { position:relative;}
}
@media screen and (max-width:1280px ) {
	.flex {	padding: 0 7%;}
	#background {padding-bottom: 90%;}
}
@media screen and (max-width:1200px ) {
	.item p, .content { line-height:1.2em; letter-spacing:.10em; font-size:.95em }
	#introPic div div a.more-btn { font-size:1.2em; line-height:1.2em}
}

@media screen and (max-width:1100px) {
	div#main-wrapper { margin:0 !important; }
	#startslider { margin-top:120px;}	
	#startslider {margin-top: 90px; }
}
@media screen and (max-width:1023px ) {
	 .item h2 {font-size: 2vw;}
	.flex {	padding: 0 5%;}	
	#background {padding-bottom: 80%;}
	h3, h4 { font-size: 2.5vw;}

	#introPic {background-attachment:scroll !important; background-position:center !important}
	#introPic div div {font-size: 2.5vw;line-height: 1em;}
	#introPic h3 {font-size: 4vw;}

}
@media screen and (max-width:960px ) {
	.item {	width: 100%; height:auto; display:block; }
	.item img { float:left; margin:0;width: 45%;}
	.item .info { float:right;width: 100%; padding:0}
	
	.content {padding: 2.5% 5% 0;}	
}
@media screen and (max-width:850px ) {
	.section.about-us {height:40vw;}
	a.button {padding:10px;}
}
@media screen and (max-width:768px ) {
	.flex { padding: 0 5%;}
	.item h2 {font-size: 1.2em;margin:1em 0 1em;}
	#introPic {	height:60vw;}
	#introPic div.cattext {margin: 25% 0 0;}
	
	.item img { float:left; margin:0 0 1em;width: 100%;}
	.item .info { float:right;width: 100%; padding:0}
}
@media screen and (max-width:700px ) {
	
	#startslider {
		margin-top: 90px;
	}
	
	div.hdtext { padding:2rem 20px 2rem 20px !important; }		

	.section.business-unit.first { padding:40px 0 0px 0 !important}
	.section.business-unit.second {padding: 0 0 50px 0;}

	.section.business-unit .paragraph .text,
	.section.business-unit.second .paragraph .text { width:100%;padding:0 0 0 0;background:#fff; margin-top:30px; }
	.section.business-unit .paragraph .text p {margin:0; padding:0;}
	.section.business-unit .paragraph .text:nth-child(1), .section.business-unit .paragraph .text:nth-child(2) { padding:0;}
	
	.section.business-unit .paragraph .text img {
		width: 165% !important;
		height: auto !important;
		max-width: unset;
		position: relative;
		left: -35%;
	}
}
@media screen and (max-width:500px ) {
	.item img { float:left; margin:0 0 1em;width: 100%;}
	.item .info { float:right;width: 100%; padding:0}
	#mainNavigation { position:relative;  }
}