/*	----------------------------------------------------------------------------------------------------------------------------

	CASCADING STYLE SHEET

	----------------------------------------------------------------------------------------------------------------------------

	Copyright (C) 2002 - Main_2021 movingline
	www.movingline.de | info@movingline.de

	---------------------------------------------------------------------------------------------------------------------------- */

/*	---------------------------------------------------------------------------- */
/*	HEADER */

	#header{
		position: fixed;
		height: 200px;
		width: 100%;
		background-color: #ffffff;
		z-index: 2;
		box-shadow: 0px 20px 60px 0px rgba(0,0,0,0.1);
	}

	@media only screen and (max-width: 1050px){
		#header{
			height: 170px;
		}
	}

	@media only screen and (max-width: 900px){
		#header{
			height: 130px;
		}
	}

	#header .topheader{
		position: relative;
		height: 80px;
		background-color: #373E5F;
	}

	@media only screen and (max-width: 1050px){
		#header .topheader{
			height: 60px;
		}
	}

	@media only screen and (max-width: 900px){
		#header .topheader{
			height: 40px;
		}
	}

	#header .logo a{
		position: relative;
		float: left;
		display: block;
		left: 0;
		top: -40px;
		width: 230px;
		height: 143px;
		text-indent: -9999px;
		background-image: url("../img/logo.svg");
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 100% auto;
		transition: all 0.2s ease 0s;
		z-index: 9992;
	}

	@media only screen and (max-width: 1050px){
		#header .logo a{
			width: 200px;
			height: 120px;
		}
	}

	@media only screen and (max-width: 900px){
		#header .logo a{
			width: 150px;
			height: 120px;
		}
	}

	#header .phone{
		position: relative;
		float: right;
		display: block;
		left: 0;
		top: 50px;
		font-family: "Raleway", "Arial", "Verdana", "Sans-Serif";
		font-weight: 400;
		font-size: 16px;
		text-transform: uppercase;
		color: #484685;
		padding: 10px 0px 10px 30px;
		background-image: url("../img/icon_phone.svg");
		background-repeat: no-repeat;
		background-position: center left;
		background-size: 25px;
		transition: all 0.2s ease 0s;
	}

	@media only screen and (max-width: 1050px){
		#header .phone{
			display: none;
		}
	}

	#header .nav_main{
		position: absolute;
		left: 60%;
		transform: translateX(-60%);
		top: 60px;
		transition: all 0.2s ease 0s;
	}

	@media only screen and (max-width: 1050px){
		#header .nav_main{
			left: auto;
			right: 0;
			transform: translateX(0);
			top: 50px;
		}
	}

	@media only screen and (max-width: 900px){
		#header .nav_main{
			display: none;
		}
	}

	#header .nav_main ul{
		display: inline-block;
		white-space: nowrap;
		margin: 0 auto;
	}

	#header .nav_main li{
		position: relative;
		display: inline-block;
		white-space: nowrap;
		margin: 0 5px;
	}

	#header .nav_main li a{
		font-family: "Raleway", "Arial", "Verdana", "Sans-Serif";
		font-weight: 400;
		font-size: 16px;
		text-transform: uppercase;
		color: #484685;
		padding: 5px;
	}

	#header .nav_main li span{
		position: absolute;
		top: -40px;
		left: 40px;
		width: 50px;
		height: 32px;
		background-image: url("../img/icon_new.png");
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 100%;
	}



/*	----------------------------------------------------------------------------------------------------------------------------
	BURGER BUTTON
	---------------------------------------------------------------------------------------------------------------------------- */


	#burger{
		display: none;
		position: absolute;
		top: 0;
		right: 0;
		z-index: 0;
		height: 40px;
		width: 50px;
		padding: 34px;
		cursor: pointer;
		z-index: 9991;
	}

	@media only screen and (max-width: 900px){
		#burger{
			display: block;
			padding: 24px;
		}
	}

	#burger .burger{
		float: left;
		position: relative;
		width: 100%;
	  	height: 100%;
	}

	#burger .burger .burger_inner{
	   position: relative;
	   width: 100%;
	   height: 100%;
	   }

	#burger .burger .burger_inner span{
	   position: absolute;
	   height: 2px;
	   width: 100%;
	   background-color: #373E5F;
	   transition: all 0.2s ease 0s;
	   }

	#burger .burger .burger_inner .bt{right: 0; top: 30%; width: 100%;}
	#burger .burger .burger_inner .bm{right: 0; top: 50%; width: 70%;}
	#burger .burger .burger_inner .bb{right: 0; top: 70%; width: 90%;}

	#burger .burger:hover .burger_inner .bt{right: 0; top: 30%; width: 100%;}
	#burger .burger:hover  .burger_inner .bm{right: 10px; top: 50%; width: 100%;}
	#burger .burger:hover  .burger_inner .bb{right: 0; top: 70%; width: 100%;}

	.open #burger .burger .burger_inner .bt{background-color: #373E5F; top: 50%; transform: rotate(45deg); width: 100%;}
	.open #burger .burger .burger_inner .bm{background-color: #373E5F; height: 0;}
	.open #burger .burger .burger_inner .bb{background-color: #373E5F; top: 50%; transform: rotate(-45deg); width: 100%;}







/*	----------------------------------------------------------------------------------------------------------------------------
	SITEBAR
	---------------------------------------------------------------------------------------------------------------------------- */

	#sitebar{
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		justify-content: center;
		align-content: center;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;

		overflow-y: auto;
		background-color: #eee;
		transform: translateY(-120%) skewY(10deg);
		transition: all 0.5s ease 0s;
		z-index: 3999;


	}

	.open #sitebar{
		top: 0;
		transform: translateY(0%) skewY(0deg);
	}

	.open{
		overflow-y: hidden;
	}


	#sitebar .nav_sitemap{
		width: 90%;
		padding-top: 200px;
		padding-bottom: 100px;
	}

	#sitebar .nav_sitemap ul{
		position: relative;
		width: 100%;
		height: 100%;
	}

	#header .nav_sitemap li{
		position: relative;
		margin-bottom: 10px;
	}

	#header .nav_sitemap li a{
		display: block;
		font-family: "Raleway", "Arial", "Verdana", "Sans-Serif";
		font-weight: 400;
		font-size: 25px;
		text-transform: uppercase;
		color: #484685;
		padding: 20px 0px;
	}

	#header .nav_sitemap li span{
		position: absolute;
		top: -15px;
		right: 40px;
		width: 50px;
		height: 32px;
		background-image: url("../img/icon_new.png");
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 100%;
	}

	#header .nav_sitemap .phonenumber{

		font-family: "Raleway", "Arial", "Verdana", "Sans-Serif";
		font-weight: 400;
		font-size: 25px;
		text-transform: uppercase;
		color: #484685;
		padding: 20px 30px;
		background-image: url("../img/icon_phone.svg");
		background-repeat: no-repeat;
		background-position: center left;
		background-size: 25px;
		transition: all 0.2s ease 0s;
	}

	/* END */