﻿
.container {
	position: relative;
	}
.headerimage {
	height: 278px;
	background-image:url('../images/products/mehrfachansicht_header_1280_278.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position:76% 10%;
	}

	
.text-block {
  	position: absolute;
  	top: 30px;
	left: 1em;
 	color: white;
 
	padding: 1em;
	width: 60%;
	background: rgba(255,255,255, .6);
	border-radius: 20px;
}

.text-block h4 {
	text-transform: uppercase;
	font-size: 1.0em;
	font-weight: 100;
	margin-block-end: .2em;
	color: #95b944;
	margin-top: 0;
	}

.text-block p {
	font-size: .8em;
	font-weight: 400;
	color: #315f9e;
	width: 100%;
	}

#triangle3 {
border-style: solid;
border-width: 0 180px 20px 0;
border-color: transparent #00a6e3 transparent transparent;
background: #d9d9d9;
}
@media screen and (min-width:300px) {
	#triangle3 {
	border-width: 0 282px 20px 0;
	}
}

@media screen and (min-width:400px) {
	#triangle3 {
	border-width: 0 382px 20px 0;
	}
}

@media screen and (min-width:500px) {
	#triangle3 {
	border-width: 0 482px 20px 0;
	}
}


@media screen and (min-width:600px) {
.subimage img{
	
	
	background-size: cover;
	background-repeat: no-repeat;
	
	width: 100%;
	
	height: auto;
	}
.flaeche {
	width: 80%;
}
.text-block {
  	width: 66%;
	  left: 4em;
}
.text-block h4 {
	font-size: 2.0em;
	}
	#triangle3 {
	border-width: 0 582px 20px 0;
	}

	
	}
@media screen and (min-width:700px) {
	#triangle3 {
	border-width: 0 682px 20px 0;
	}
}
	
	
@media screen and (min-width:900px) {
	#triangle3 {
	border-width: 0 882px 20px 0;
	}
}
	

@media screen and (min-width:940px) {
.subimage img{
	
	
	background-size: cover;
	background-repeat: no-repeat;
	
	width: 100%;
	
	height: auto;
	}
.text-block {
  	width: 60%;
	left: 4em;
}
.text-block h4 {
	font-size: 2.8em;
	}

	
	}


@media screen and (min-width:1000px) {
	#triangle3 {
	border-width: 0 982px 20px 0;
	}
}


@media screen and (min-width:1115px) {
.subimage img{
	background-image:url(../images/shutterstock_639884194.png);
	background-size: cover;
	background-repeat: no-repeat;
	width: 100%;
	height: auto;
	}
.text-block {
  	width: 50%;
	left: 4em;
}
.text-block h4 {
	font-size: 2.8em;
	}

	
	}
@media screen and (min-width:1228px) {
	.text-block {
	  	width: 42%;
	  	left: 4em;
	}
}
@media screen and (min-width:1280px) {
	#triangle3 {
	border-width: 0 1250px 20px 0;
	}
}

