/* CSS Document */



.display{display: none;}
.mobil{display: inherit;}


@media screen and (max-width: 1230px){
	.row{width: 100% ; margin: 0 auto;clear: both;}
header nav ul, section .slider{width: 100%;}
section .slider{height: auto; display: block; margin: 0 auto; position: relative;}
section .slider img{width: 100%; height: auto;}

}

@media screen and (max-width: 970px){
header nav ul li a{float: left;color: #303c49; padding: 12px 20px; border-bottom: 2px solid #F0F1F2; font-size: 0.9em;}
}
@media screen and (max-width: 910px){
header nav ul li a{float: left;color: #303c49; padding: 12px 15px; border-bottom: 2px solid #F0F1F2; font-size: 0.9em;}
}
@media screen and (max-width: 825px){
header nav ul li a{float: left;color: #303c49; padding: 12px 10px; border-bottom: 2px solid #F0F1F2; font-size: 0.85em;}
}
@media screen and (max-width: 780px){
.row{width: 99% ; margin: 0 auto;clear: both;}
[class*='col-'] {padding: 0 0; float: left;}
.col-100, .col-90, .col-80, .col-70, .col-60,.col-50,.col-40,.col-30,.col-25,.col-20,.col-10{width: 100%; margin: 0; padding: 10px 10px;}	
.display{display:inherit;}
.mobil{display: none;}
	
button {  display: inline-block;  margin: 0;  border: none;  background: none;}
button span {  display: block;}
.button_menu {		display:block;		background:#303C49;		position:absolute; right: 10px;	top: 10px;	cursor:pointer;		color:#fff;		padding:20px 5px 12px 5px;		z-index:160;		width:120px;		 height: 54px; border: 2px solid #fff;}
header nav{display: inherit;width: 100%; background: #F0F1F2; height: 0px;}
header nav ul {	position: absolute; top: 64px; right: 10px; margin-left: 0px; width: 200px; z-index: 150;		background:#F0F1F2;	}	
header nav ul li {		margin:0px !important;				max-width:none;		white-space:nowrap;	 }
header nav ul li a  {		min-height:auto;		color:#303C49;	background-image:none;		text-align:center;	width: 200px;	margin:0px;	float:none; display: block; 	line-height: 30px; border-bottom: 2px solid #F0F1F2;}
header nav ul li {		display:none;		float:none;	}
header nav ul li:hover a{color:#303C49;		 border-bottom: 2px solid #303C49;}
header .head-grau .logo img{float: left;}
header .head-grau .logo span{margin: 15px 0 0 20px; display: block; float: left;}

section .col-33{padding: 20px; width: 100%;}

section ul{list-style:circle; margin-left: 20px; margin-bottom: 30px;}
section .start-content .col-50{padding: 0;}
section .start-content .col-50 ul{list-style:circle; margin: 0; margin-left: 20px;}

.center-box{height: auto; display: block;  margin-bottom: 50px; color: #303C49; border: 1px solid #f0f1f2; position: relative; font-size: 0.8em; height: 218px;}
.center-box .image{float: left; width: 50%; overflow: hidden;}
.center-box img{height: 100%; width: auto;}
.center-box ul{margin: 0 0 30px 0px;}
.center-box .content{float: left; padding: 10px 20px 15px 20px; width: 50%;}
.center-box h3{margin: 0 0 20px 0;}
.center-box p{margin: 0 0px 15px 0px;}
footer{padding: 20px 0 80px 0;}
footer .col-33{padding: 20px; width: 100%;}

.formular{padding: 55px 10px 10px 10px;}
}
@media screen and (max-width: 650px){
section .col-33{padding: 20px; width: 60%;}
.center-box{height: auto; display: block;  margin-bottom: 50px; color: #303C49; border: 1px solid #f0f1f2; position: relative; font-size: 0.8em; height: 500px;}
.center-box .image{float: left; width: 100%; overflow: hidden;}
.center-box img{height: auto; width: 100%;}
.center-box .content{float: left; padding: 10px 20px 15px 20px; width: 100%;}
}
@media screen and (max-width: 580px){
header .head-grau{height: 120px;}
header .head-grau .logo img{float: none; clear:both;}
header .head-grau .logo span{margin: 15px 0 0 0px; display: block; float: none; clear: both;}
br.display{display: none;}	
section .col-33{padding: 20px; width: 70%;}
}
@media screen and (max-width: 480px){	
section .col-33{padding: 20px; width: 80%;}
.center-box{ height: 450px;}
}
@media screen and (max-width: 380px){	
section .col-33{padding: 20px; width: 100%;}
.center-box{ height: 450px;}
}
@media screen and (max-width: 450px){
header .head-grau{height: 150px;}
}
@media screen and (max-width: 280px){
header .head-grau{height: 170px;}
}
@media only screen and (min-width : 781px) {
	.button_menu {		display:none;	}	
	nav {	}
	nav ul {		position:static;	}	
	nav ul li {		display:block !important;	}

	
}
.grid-button {  padding:20px 25px 12px 25px;  cursor: pointer;  user-select: none;}
.grid-button .grid {  width: 6px;  height:6px;  background: #fff;  color: #fff;  /* Not in use when the colors are specified below */  transition: 0.3s;}
.grid-button.close .grid {  transform: rotate3d(0, 0, 1, -45deg) scale3d(0.8, 0.8, 0.8);}
.grid-button.collapse .grid {  box-shadow: -8px 0, -8px 8px, 8px 0, 8px -8px, 0 -8px, -8px -8px, 0 8px, 8px 8px;}
.grid-button.collapse.close .grid {  box-shadow: -6px 0, 0 0 transparent, 6px 0, 0 0 transparent, 0 -6px, 0 0 transparent, 0 6px, 0 0 transparent;}
button span.text {	margin-left:30px;	margin-top:-15px; font-size: 1.3em; text-transform: uppercase;}