#videoheader
{
	height:512px;
	left:0;
	overflow:hidden;
	position:absolute;
	right:0;
    top:0;
}

#videoheader video
{
	left:calc(50% - 990px);
	position:absolute;
    top:0;
    max-width:none;
}

#mainheader
{
	background:url('../Images/headerbar_plain.png') no-repeat top center;
	height:273px;
	left:0;
	position:absolute;
	top:365px;
	width:100%;
	z-index:1000;
}

#mainheader:after
{
	background:url('../Images/alles_andere_ist_kaese.png') no-repeat center;
	background-size:100%;
	content:'';
	height:108px;
	position:absolute;
	right:calc(50% - 500px);
	top:85px;
	width:200px;
	z-index:5;
}


@media (min-width:768px) and (max-width:1023px)
{
	#mainheader
	{
		top:160px;
	}
	
	#mainheader:after
	{
        right:calc(50% - 376px);
        width:150px;
	}
}

@media (min-width:1024px)
{
	#mainheader #mainmenu
	{
		background:url('../Images/menuezettel_telefon.png') no-repeat;
		height:370px;
		left:60px;
		padding:110px 0 0 40px;
		position:absolute;
		top:20px;
		width:238px;
	}
	
	#mainheader #mainmenu .close
	{
		display:none;
	}
	
	#mainheader #mainmenu div
	{
		float:left;
		font-size:17px;
		line-height:19px;
		margin:0 0 10px;
		width:135px;
	}
	
	#mainheader #mainmenu div.last
	{
		margin-bottom:0;
	}
  
	/*#mainheader #mainmenu div a{ color:#fff!important; background-color:#000!important;}*/

	#mainheader #mainmenu div a:hover,
	#mainheader #mainmenu div.active a
	{
		font-weight:bold;
		text-decoration:none;
     
	}
	
	#mainheader #mainmenu #phonewrapper
	{
		display:none;
	}
}

@media (max-width:1023px)
{
	#videoheader
	{
        background:url(../Images/header_mobile_fallback.png) top center;
        background-size:cover;
        height:210px;
	}
	
	#videoheader video
	{
        display:none;
	}
	
	#mainheader #mobilmenubutton
	{
		background:#b21500;
		height:50px;
		left:15px;
		position:absolute;
		top:110px;
		width:58px;
	}
	
	#mainheader #mobilmenubutton .topline,
	#mainheader #mobilmenubutton .midline,
	#mainheader #mobilmenubutton .botline
	{
		background:#fff;
		display:block;
		height:4px;
		left:10px;
		position:absolute;
		top:10px;
		width:calc(100% - 20px);
	}
	
	#mainheader #mobilmenubutton .midline
	{
		top:23px;
	}
	
	#mainheader #mobilmenubutton .botline
	{
		top:36px;
	}
	
	#mainheader #mainmenu
	{
		background:#fae7af;
		height:100vh;
		left:0;
		opacity:0;
	    overflow-x: hidden;
    	overflow-y: auto;
		padding:100px 40px 40px;
		position:fixed;
		top:0;
	    transition: all 0.1s ease-in-out;
	    -moz-transition: all 0.1s ease-in-out;
	    -webkit-transition: all 0.1s ease-in-out;
	    -o-transition: all 0.1s ease-in-out;
	    visibility:hidden;
		width:100%;
		z-index: 80;
	}
	
	.menuopen #mainheader #mainmenu
	{
		opacity:1;
	    transition: all 0.3s ease-in-out;
	    -moz-transition: all 0.3s ease-in-out;
	    -webkit-transition: all 0.3s ease-in-out;
	    -o-transition: all 0.3s ease-in-out;
	    visibility:visible;
	}
	
	#mainheader #mainmenu .close
	{
		color:#b21500;
		cursor:pointer;
		font-family:Arial;
		font-size:30px;
		font-weight:bold;
		line-height:30px;
		position:absolute;
		right:30px;
		top:30px;
	}
	
	#mainheader #mainmenu div
	{
		float:left;
		font-size:17px;
		line-height:19px;
		margin:0 0 20px;
		text-align:center;
		width:100%;
	}
	
	#mainheader #mainmenu div.last
	{
		margin-bottom:0;
	}
	
	#mainheader #mainmenu div a:hover,
	#mainheader #mainmenu div.active a
	{
		font-weight:bold;
		text-decoration:none;
	}
	
	#mainheader #mainmenu #phonewrapper
	{
		color:#51270d;
		float:left;
		font-style:italic;
		margin:30px 0 0;
		width:100%;
	}
	
	#mainheader #mainmenu #phonewrapper .name
	{
		display:block;
	}
	
	#mainheader #mainmenu #phonewrapper a
	{
		color:#51270d;
	}
}

@media (max-width:767px)
{
	#mainheader
	{
		background-size:930px;
		top:140px;
	}
	
	#mainheader:after
    {
        display:none;
    }
	
	#mainheader #mobilmenubutton
	{
		height:44px;
		top:44px;
		width:50px;
	}
	
	#mainheader #mobilmenubutton .midline
	{
		top:20px;
	}
	
	#mainheader #mobilmenubutton .botline
	{
		top:30px;
	}
}