@charset "utf-8";
/* CSS Document */
*{
		margin:0;
		padding:0;
		border:0 none;
		font-family: 'Open Sans', Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
}
header{
	width: 100%;
	height: 132px;
	background-color: #9c9b9b;
}
/* Navigation */
.navigation{
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	height: 132px;
	max-width: 1152px;
	display: flex;
	margin: auto;
}
#logo_navi{
	background-color: white;
	height: 100%;
	width: 384px;
	display: flex; 
    justify-content: center; 
    align-items: center;
	height: 132px;
}
.navigations_menu{
	max-width: 768px;
    height: 132px;
	font-size: 15pt;
	margin: auto;
	letter-spacing: -1px;
}
.navigations_menu_liste{
	background-color: #9c9b9b;
	display: flex;
	width: auto;
	justify-content: space-between;
	flex-direction: row;
	max-padding: 0% 20px;
	list-style-type: none;
	color: white;
	text-align: center;
}
.navigations_menu_liste li  a{
	text-decoration: none;
	color: white;
	height: 132px;
	min-height: 10em;
    display: table-cell;
    vertical-align: middle;
	padding: 0 20px;
	  -o-transition:color 0.3s ease-out, background 0.3s ease-in;
  -ms-transition:color 0.3s ease-out, background 0.3s ease-in;
  -moz-transition:color 0.3s ease-out, background 0.3s ease-in;
  -webkit-transition:color 0.3s ease-out, background 0.3s ease-in;
  /* ...and now override with proper CSS property */
  transition:color 0.3s ease-out, background 0.3s ease-in;
}
.navigations_menu_liste li a:hover {
	color: #9c9b9b;
	background-color: white;
	height: 132px;
	min-height: 10em;
    display: table-cell;
    vertical-align: middle;
	padding: 0 20px;
}
label{
	margin: 0 40px 0 0;
	font-size: 26px;
	line-height: 70px;
	display: none;
	float:right;
}
#toggle{
	display: none;
}
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}
#navbar{
	position: fixed; /* Sticky/fixed navbar */
	height: 132px;
	background-color: #9c9b9b;
	width: 100%;
}
/* Headervideo */
.headervideo{
	padding: 0% 20%;
	z-index: -1;
}
/* Contentblöcke */
.content_block{
	max-width: 1152px;
	display: flex;
	margin: auto;
	margin-left: auto;
    margin-right: auto;

}
.textbox h1{
	padding: 10px;
	color: white;
    font-weight: 700;
    line-height: 180px;
    margin-left: 10px;
	margin-right: 10px;
    padding: 0;
    text-transform: uppercase;
    word-break: break-all;
	font-size: 100pt;

	font-weight: 600;
}
.block_a{
	width: 100%;
	min-height: 768px;
	background-color: #636363;
	display: flex;
	justify-content: center;
	flex-direction: row;
}
.hauptblock{
	max-width: 1152px;
	min-height: 768px;
}
.textblock{
	max-width: 768px;
	min-height: 768px;
	background-color: white;
}
.textblock p{
	padding: 30px;
	font-size: 15pt;
}
.textblock h2{
	padding-top: 30px;
	padding-left: 30px;
	font-size: 30pt;
}
.block_grey{
	width: 384px;
	min-height: 384px;
}
.block_magenta{
	width: 384px;
	height: 384px;
	background-color: #9c9b9b;
	text-align: right;
}
.block_magenta_color{
	min-height: 384px;
	margin-left: auto;
	margin-right: auto;
	background-color: #9c9b9b;
	/* Ausrichtung des Textes*/
	display: flex;
	flex-direction: column; 
	justify-content: center;
	text-align: center;
	color: white;
	font-size: 50px;
	background: url("Medien/Bilder/block_gray.jpg");
	transition: 0.5s;
	-webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.block_magenta_color:hover{
	font-size: 0px;
	background: url("Medien/Bilder/sample_block.jpg");
	transition: 0.5s;
	-webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.block_cyan_color{
	min-height: 384px;
	margin-left: auto;
	margin-right: auto;
	background-color: #22a8d7;	
	/* Ausrichtung des Textes*/
	display: flex;
	flex-direction: column; 
	justify-content: center;
	text-align: center;
	color: white;
	font-size: 50px;
		background: url("Medien/Bilder/block_cyan.jpg");
	transition: 0.5s;
	-webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;

}
.block_cyan{
	width: 384px;
	height: 384px;
	background-color: #22a8d7;
	display: flex;
	
}
.block_cyan_color:hover{
	font-size: 0px;
	background: url("Medien/Bilder/sample_block.jpg");
	transition: 0.5s;
	-webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;

}
.block_green_color{
	min-height: 384px;
	margin-left: auto;
	margin-right: auto;
	background-color: #e5007e;	
	/* Ausrichtung des Textes*/
	display: flex;
	flex-direction: column; 
	justify-content: center;
	text-align: center;
	color: white;
	font-size: 50px;
		background: url("Medien/Bilder/block_magenta.jpg");
	transition: 0.5s;
	-webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;

}
.block_green{
	width: 384px;
	height: 384px;
	background-color: #e5007e;	
	text-align: right;
	
}
.block_green_color:hover{
	font-size: 0px;
	background: url("Medien/Bilder/sample_block.jpg");
	transition: 0.5s;
	-webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;

}
.block_green2_color{
	min-height: 384px;
	margin-left: auto;
	margin-right: auto;
	background-color: #93c01f;	
	/* Ausrichtung des Textes*/
	display: flex;
	flex-direction: column; 
	justify-content: center;
	text-align: center;
	color: white;
	font-size: 50px;
		background: url("Medien/Bilder/block_green.jpg");
	transition: 0.5s;
	-webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;

}
.block_green2{
	width: 384px;
	height: 384px;
	background-color: #93c01f;	
	text-align: right;
}
.block_green2_color:hover{
	font-size: 0px;
	background: url("Medien/Bilder/sample_block.jpg");
	transition: 0.5s;
	-webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;

}
.block_4{
	width: 384px;
	height: 384px;
	background-color: #9c9b9b;
	display: flex;
}
.block_4_color{
	min-height: 384px;
	margin-left: auto;
	margin-right: auto;
	background-color: #9c9b9b;
	/* Ausrichtung des Textes*/
	display: flex;
	flex-direction: column; 
	justify-content: center;
	text-align: center;
	color: white;
	font-size: 50px;
		background: url("Medien/Bilder/block_gray.jpg");
	transition: 0.5s;
	-webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;

}
.block_4_color:hover{
	font-size: 0px;
	background: url("Medien/Bilder/sample_block.jpg");
	transition: 0.5s;
	-webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;

}
.block_5{
	width: 384px;
	height: 384px;
	background-color: #9c9b9b;
	display: flex;
}
.block_5_color{
	min-height: 384px;
	margin-left: auto;
	margin-right: auto;
	background-color: #9c9b9b;
	/* Ausrichtung des Textes*/
	display: flex;
	flex-direction: column; 
	justify-content: center;
	text-align: center;
	color: white;
	font-size: 50px;
		background: url("Medien/Bilder/block_gray.jpg");
	transition: 0.5s;
	-webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;

}
.block_5_color:hover{
	font-size: 0px;
	background: url("Medien/Bilder/sample_block.jpg");
	transition: 0.5s;
	-webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;

}
.content_block2{
	max-width: 1152px;
	display: flex;
	margin: auto;
	margin-left: auto;
    margin-right: auto;	
}
.content_block3{
	max-width: 1152px;
	display: flex;
	margin: auto;
	flex-direction: row-reverse;
}
.cyan_text h2{
	color: #22a8d7;
}
.magenta_text h2{
	color: #e5007e;
}
.green_text h2{
	color: #93c01f;
}


/* footer */

footer{
	width: 100%;
	background: #9c9b9b;
	height: 100px;
	display: flex;
	justify-content: center;
}
.footer_menu{
	display: flex;
	flex-direction: center;
	justify-content: space-between;
	text-align:center; 
	width: 70%;
    height: 100px;
	font-size: 20pt;
}
.footer_menu_liste{
	background-color: #9c9b9b;
	display: flex;
	width: auto;
	justify-content: space-between;
	list-style-type: none;
	color: white;
	text-align: center;
	margin: auto;
}
.footer_menu_liste li  a{
	color: white;
	height: 100px;
	min-height: 10em;
    display: table-cell;
    vertical-align: middle;
	text-decoration: none;
	-o-transition:color 0.3s ease-out, background 0.3s ease-in;
  -ms-transition:color 0.3s ease-out, background 0.3s ease-in;
  -moz-transition:color 0.3s ease-out, background 0.3s ease-in;
  -webkit-transition:color 0.3s ease-out, background 0.3s ease-in;
  /* ...and now override with proper CSS property */
  transition:color 0.3s ease-out, background 0.3s ease-in;
		padding: 0 15px;
}
.footer_menu_liste li a:hover {
	color: #E5007E;
	height: 100px;
	min-height: 10em;
    display: table-cell;
    vertical-align: middle;
	text-decoration: none;
		padding: 0 15px;
}






@media only screen and (max-width: 1399px){

label{
		display: block;
		cursor: pointer;
		color: white;
		padding-top: 30px;
	}

.navigations_menu{
		text-align: center;
		min-width: 100%;
		display: none;
		font-size: 50px;
	}
.navigations_menu a{
		display: block;
		border-bottom: 1px solid white;
		min-width: 100%;
		margin: 0;
	}
.navigations_menu_liste {
		display: flex;
		justify-content: right;
		padding-top: 0px;
		flex-direction:column; 
		padding-top: 50px;
	}
.navigations_menu_liste li a {
		padding: 0px 0px;
		min-width: 100%;
	-o-transition:color 0.3s ease-out, background 0.3s ease-in;
  -ms-transition:color 0.3s ease-out, background 0.3s ease-in;
  -moz-transition:color 0.3s ease-out, background 0.3s ease-in;
  -webkit-transition:color 0.3s ease-out, background 0.3s ease-in;
  /* ...and now override with proper CSS property */
  transition:color 0.3s ease-out, background 0.3s ease-in;
	}
.navigations_menu_liste li a:hover {
		background-color: #E5007E;
		color: white;
	}
#toggle:checked + .navigations_menu {
			display: block;
			position: absolute;
			top: 0;
			right: 0;
			margin-right: 0;
			background: #9c9b9b;
			padding-top: 70px;
			z-index: 9;
	}
label[for=toggle]{
			margin: 0 40 0 0;
			font-size: 50px;
			line-height: 70px;
			position: absolute;
			top: 0;
			right: 1;
			z-index: 10;
			padding-left: 50px;
	}
.navigations_menu_liste li  a{
	width: 1500px;
	-o-transition:color 0.3s ease-out, background 0.3s ease-in;
  -ms-transition:color 0.3s ease-out, background 0.3s ease-in;
  -moz-transition:color 0.3s ease-out, background 0.3s ease-in;
  -webkit-transition:color 0.3s ease-out, background 0.3s ease-in;
  /* ...and now override with proper CSS property */
  transition:color 0.3s ease-out, background 0.3s ease-in;
}
.navigations_menu_liste li a:hover {
	width: 1500px;
}
	
}