/* Style the links inside the sidenav */
#mySidenav a {
  position: absolute; /* Position them relative to the browser window */
  left: -150px; /* Position them outside of the screen */
  transition: 0.3s; /* Add transition on hover */
  padding: 15px; /* 15px padding */
  width: 130px; /* Set a specific width */
  text-decoration: none; /* Remove underline */
  font-size: 1.1em; /* Increase font size */
  color: white; /* White text color */
  border-radius: 0 9px 9px 0; /* Rounded corners on the top right and bottom right side */
  z-index:9999;
  text-align:right;
  padding-right: 55px;
}

#mySidenav a:hover {
  left: 0; /* On mouse-over, make the elements appear as they should */
}

/* The about link: 20px from the top with a green background */
#icon1 {
  top: 20px;
  background-image: url("layout/icon-telefon.png"); /* The image used */
  background-position: center; /* Center the image */
  background-position: right 0.5em bottom 50%; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: 2em; 
  background-color: #376286;

}

#icon2 {
  top: 75px;
    background-image: url("layout/icon-mail.png"); /* The image used */
  background-position: center; /* Center the image */
  background-position: right 0.5em bottom 50%; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: 2em;
  background-color: #1D425E;
}

#icon3 {
  top: 130px;
    background-image: url("layout/icon-interhome.png"); /* The image used */
  background-position: center; /* Center the image */
  background-position: right 0.5em bottom 50%; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: 2em;
  background-color: #61A375;
}

#icon4 {
  top: 185px;
  background-color: #555 /* Light Black */
}


/* Style the links inside the sidenav */
#mySidenav2 a {
  position: absolute; /* Position them relative to the browser window */
  right: -150px; /* Position them outside of the screen */
  transition: 0.3s; /* Add transition on hover */
  padding: 15px; /* 15px padding */
  width: 130px; /* Set a specific width */
  text-decoration: none; /* Remove underline */
  font-size: 1.1em; /* Increase font size */
  color: white; /* White text color */
  border-radius: 9px 0 0 9px; /* Rounded corners on the top right and bottom right side */
  z-index:9999;
  text-align:left;
  padding-left: 55px;

}

#mySidenav2 a:hover {
  right: 0; /* On mouse-over, make the elements appear as they should */
}



/* The about link: 20px from the top with a green background */
#mySidenav2 #icon1 {
  top: 20px;
  background-image: url("layout/icon-telefon.png"); /* The image used */
  background-position: center; /* Center the image */
  background-position: left 0.5em bottom 50%; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: 2em; 
  background-color: #004F8C;

}

#mySidenav2 #icon2 {
  top: 75px;
    background-image: url("layout/icon-insta.png"); /* The image used */
  background-position: center; /* Center the image */
  background-position: left 0.5em bottom 50%; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: 2em;
  background-color: #0F3C62;
}

#mySidenav2 #icon3 {
  top: 130px;
    background-image: url("layout/icon-facebook.png"); /* The image used */
  background-position: center; /* Center the image */
  background-position: left 0.5em bottom 50%; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: 2em;
  background-color: #041A2A;
}

#mySidenav2 #icon4 {
  top: 185px;
  background-color: #555 /* Light Black */
}


.headcontainer {
	display:flex;
	flex-flow: row wrap;
}
.headcontainerbox_text {
	flex: 1 1 40%;
	position:relative;
	background:#004F8C;
	margin:0em;
	padding:0em;
	
}
.headcontainerbox_text_content {
	margin: 2em;
	padding:0;
  position: relative; 
  top: 20%; 
  transform: translateY(-20%); 
}
.headcontainerbox_bild {
	flex: 1 1 60%;
	position:relative;
	background:#EAEAEA;
	margin:0em;
	padding:0em;
}
.headcontainerbox_text h2, .headcontainerbox_text h3{
	font-size:2.4em;
	color:#fff; 
	margin:0;
	line-height:1.3em;
	text-align:right;
}
.headcontainerbox_text h3{
	font-size:1.4em;
	color:#fff;
	font-weight:400;
	margin:0;margin-top:0.5em;
	line-height:1.3em;
	text-align:right;
}
@media screen and (max-width: 1300px) {
.headcontainerbox_text_content {
	font-size:80%;
		margin: 1em;
	padding:0;
  position: relative; 
  top: 10%; 
  transform: translateY(-10%);
}
}
@media screen and (max-width: 1000px) {
.headcontainerbox_text_content {
	font-size:80%;
		margin: 1em;
	padding:0;
  position: relative; 
  top: 10%; 
  transform: translateY(-10%);
}
}

@media screen and (max-width: 900px) {
#mySidenav2 {
	display:none;
}
.headcontainerbox_bild {
	flex: 1 1 90%;
	order: 1;
}
.headcontainerbox_text {
	flex: 1 1 90%;
	order: 2;
}
.headcontainerbox_text_content {
	padding:1;
  position: relative; 
  top: 0%; 
  transform: translateY(-0%);
}
.headcontainerbox_text h2, .headcontainerbox_text h3{
	line-height:1.15em;
	margin:0;
	text-align:center;
}
}

/* Layout-Variante-1 */
.sliderbox_text {
	position: absolute;
	right:20px;
	top:30px;
	z-index:10;
	transition: 0.3s;
}
.sliderbox_text h2, .sliderbox_text h3{
	font-size:2em;
	color:#fff; color:#004F8C;
	margin:0;
	line-height:1.3em;
	text-align:right;
}
.sliderbox_text h3{
	font-size:1.4em;
	color:#fff; color:#004F8C;
	margin:0;margin-top:0.5em;
	line-height:1.3em;
	text-align:right;
}
.sliderbox_text h2 span{
	background:#004F8C; background:#fff;
	padding:0.3em;
}
.sliderbox_text h3 span{
	background:#004F8C; background:#fff;
	padding:0.5em;
}

@media screen and (max-width: 790px) {
#mySidenav {
	display:none;
}
.sliderbox_text {
	font-size:80%;
}
}
@media screen and (max-width: 590px) {
#mySidenav {
	display:none;
}
.sliderbox_text {
	font-size:70%;
		position: absolute;
	right:10px;
	top:15px;
}
.sliderbox_text h2, .sliderbox_text h3{
  color: #fff;
  text-shadow: 
    -2px -2px #A4A4A4, 
    2px 2px #333;
  transition: all .12s ease-out;
}
.sliderbox_text h2 span, .sliderbox_text h3 span{
	background:none;
	padding:0em;
}
}

/* Layout-Variante-3 */
.headcontainer3 {
	display:flex;
	flex-flow: row wrap;
	position:relative;
}
.headcontainer3box_text {
	flex: 1 1 50%;
	position:relative;
	background:#004F8C;
	margin:0em;
	padding:0em;
	
}
.headcontainer3box_text_content {
position:absolute;
top:3em;
left:10%;
max-width:60%;
z-index:10;
}
.headcontainer3box_bild {
	flex: 1 1 50%;
	position:relative;
	background:#EAEAEA;
	margin:0em;
	padding:0em;
}
.headcontainer3box_text_content h2, .headcontainer3box_text_content h3{
	font-size:2.4em;
	color:#fff; 
	margin:0;
	line-height:1.3em;
	text-align:left;
}
.headcontainer3box_text_content h3{
	font-size:1.4em;
	color:#fff;
	font-weight:400;
	margin:0;margin-top:0.5em;
	line-height:1.3em;
	text-align:left;
}
.headcontainer3box_text_content h4{
	font-size:1.8em;
	color:#fff; 
	margin:0;
	line-height:1.3em;
	text-align:left;
	display:none;
	  text-shadow: 
    2px 2px #333;
  transition: all .12s ease-out;
}

@media screen and (max-width: 1300px) {
.headcontainer3box_text_content {
top:2em;
left:8%;
}
}
@media screen and (max-width: 1150px) {
.headcontainer3box_text_content {
top:1em;
left:6%;
font-size:90%;
}
#mySidenav2 {
	display:none;
}
}
@media screen and (max-width: 1000px) {
.headcontainer3box_text_content {
top:1em;
left:5%;
font-size:80%;
}
}
@media screen and (max-width: 800px) {
.headcontainer3box_text_content {
top:1em;
left:5%;
font-size:80%;
max-width:80%;
}
.headcontainer3box_bild {
	flex: 1 1 70%;
}
.headcontainer3box_text {
	flex: 1 1 30%;
}
.headcontainer3box_text_content h2, .headcontainer3box_text_content h3{
  color: #fff;
  text-shadow: 
    2px 2px #333;
  transition: all .12s ease-out;
}
}
@media screen and (max-width: 600px) {
.headcontainer3box_text_content {
top:1.5em;
left:3%;
max-width:70%;
}
.headcontainer3box_bild {
	flex: 1 1 80%;
}
.headcontainer3box_text {
	flex: 1 1 20%;
}
.headcontainer3box_text_content h2, .headcontainer3box_text_content h3{
  display:none;
}
.headcontainer3box_text_content h4{
	display:block;
}
}