﻿
.container {
	position: relative;
	}
.subimage {
	background-image:url(../images/subimage/subimage.jpg);
	background-size: 100% auto;
	background-repeat: no-repeat;
	
	width: 100%;
	height: 200px;
	
	}





.flaeche {
  content: '';
  position: absolute;
  top: 40px;
  left: 0;
  background-color: #00a6e4;
  color: white;
  padding-left: 20px;
  padding-right: 20px;
  
  width: 100%;
  height: 100%;
  -webkit-transform: skew(0deg, -1.6deg);
  -moz-transform: skew(0deg, -1.6deg);
  -ms-transform: skew(0deg, -1.6deg);
  -o-transform: skew(0deg, -1.6deg);
  
  transform: skew(0deg, -1.6deg);
 
  opacity: .8;
}
	
.text-block {
  position: absolute;
  top: 70px;
  left: 2em;
  color: white;
 
  padding-right: 10px;
  
  width: 80%;
  height: 100%;
}

.text-block h4 {
	text-transform: uppercase;
	font-size: 1.0em;
	font-weight: 400;
	margin-block-end: .2em;
	}

.text-block p {
	font-size: .8em;
	font-weight: 400;
	}
	
	
@media screen and (min-width:415px) {
.flaeche {
  top: 40px;
}
	
.text-block {
  top: 90px;
}
}


@media screen and (min-width:450px) {
	.subimage {
		height: 280px;
		}
	.flaeche {
		width: 80%;
	  	height: 80%;
	  	top: 80px;
		}
	.text-block {
	  	width: 66%;
		left: 3em;
		padding-right: 20px;
		top: 80px;
		}
	.text-block h4 {
		font-size: 1.2em;
		}

	.text-block p {
		font-size: 1em;
		}
	
}


@media screen and (min-width:600px) {
.subimage {
	background-size: auto 100%;
	}

.text-block h4 {
	font-size: 1.4em;
	}

	
	}
@media screen and (min-width:780px) {
.subimage {
	background-size: cover;
	}
}

@media screen and (min-width:900px) {
.subimage {
		height: 320px;
		}
.flaeche {
	width: 70%;
  	height: 100%;
  	top: 60px;
}
.text-block {
  	width: 66%;
  	height: 100%;
	left: 4em;
	padding-right: 100px;
	top: 60px;
}
.text-block h4 {
	font-size: 2.4em;
	}
.text-block p {
	font-size: 1.2em;
		}
}






@media screen and (min-width:1115px) {
.subimage {
	height: 430px;
	}
.flaeche {
	width: 54%;
  	height: 90%;
  	top: 20px;
}
.text-block {
  	width: 45%;
  	height: 100%;
	left: 4em;
	padding-right: 0px;
	top: 20px;
}
.text-block h4 {
	font-size: 3.0em;
	}

	
	}

