/* =============================================================================
   Typography
   ========================================================================== */


/* ROOT TEXT */
html 					{ font-size: 23px; line-height: 1.5; letter-spacing: 0.03em;}


/* HEADLINES */
h1 					{ font-size: 3.0rem; line-height: 1.1; } 	/* Titel */
h2 					{ font-size: 1.8rem; line-height: 1.2; } 	/* Absatztitel */ 																													
h3 					{ font-size: 1.2rem; line-height: 1.4; } 		

h1 .square, 
h2 .square {
	display:		inline-block;
	position:	relative;
   top: 			0.23em; /* Adjust to suit */
   left:  		0.1em;
   color: 		var(--color1);

   white-space: nowrap;
}
h1 .square {
   top: 					0.15em; /* Adjust to suit */
	transform-origin: bottom left;
   transform: 			scale(0.8);
   /*-webkit-transform:scale(0.8, 0.8);*/
} 
														

/* TEXTE */
.ch_facts			{ font-size: 3.0rem; }															/* Numbers Facts */
.ch_intro 			{ font-size: 1.2rem; line-height: 1.5; }									/* Intro Hero */
.ch_bt_label		{ font-size: 0.7rem; letter-spacing: 0.12em;}							/* Button Label */								/* Button Label */
.ch_note				{ font-size: 0.7rem; }															/* Marginalien */
.ch_rubrictitle   { font-size: 0.6rem; line-height: 1.4; letter-spacing: 0.15em; }	/* Rubrikentitel */





/* =============================================================================
   Links
   ========================================================================== */
   
/* NOTES */
/*.linknotes	{ font-size: 0.7rem; }		Marginalien*/


/* NAVIGATION */
.linknav		{ font-size: 1.8rem; line-height: 1.2; text-decoration: unset; }	/* Menue */ 


/* FOOTER META NAV */
.linknavfooter { font-size: 0.8rem; }






/* =============================================================================
   Buttons
   ========================================================================== */

   

/* =============================================================================
   Other Elements
   ========================================================================== */



/* =============================================================================
   Embedded Content
   ========================================================================== */


/*-------------------------------*/
/*             ANCOR	            */
/*-------------------------------*/

.ancor {
    visibility: hidden;
    height: 0px !important;
    position: absolute;
    margin: -150px;
}



/*-------------------------------*/
/*            NAVBAR             */
/*-------------------------------*/

#navbar {
	position:	fixed;
	top: 			0;
	width:		100%;
	height:		auto;

	display:		block;
	padding: 	40px var(--pagemargin) 30px var(--pagemargin);

	transition:	top 0.3s;
	z-index:		5;

	/*background-color:	#FFF;*/
															/*border:  solid 1px #2433FF;*/
	}
	#navbar.bg_white{
		/*height:  100vh;*/
		width: 	100vw;

		background-color:	#FFF;
		opacity: 			0.98;
		box-shadow: 		-10px -15px 30px grey; 
	}
	#navbar .bg {
		position:		absolute;
		top: 				0;
		left:				0;

		width: 			100vw;
		height: 			100vh;

		background-color:	#FFF;
		z-index:				-1;				
															/*border:  solid 1px #2433FF;	*/	
	}
		#navbar .bg.open {
			/*height: 		100vh;
			transition: height 0.5s ease 0s;*/
			
			width: 							100vw;
			animation-name: 				poly-open;
			animation-fill-mode: 		forwards;
			animation-timing-function: linear;
			animation-duration: 			0.3s;
		}
			@keyframes poly-open {
				0%		{ clip-path: polygon(0% 0%, calc(0%) 0%, 0% 100%, 0% 100%); opacity: 0.3; }
				50%	{ clip-path: polygon(0% 0%, calc(40% + 10%) 0%, 40% 100%, 0% 100%); opacity: 0.8; }
				100%	{ clip-path: polygon(0% 0%, calc(100% + 10%) 0%, 100% 100%, 0% 100%); opacity: 1; }
			}

		#navbar .bg.close {
			/*height: 		0vh;
			transition: height 0.5s ease 0s;*/

			animation-name: poly-close;
			animation-fill-mode: forwards;
			animation-timing-function: linear;
			animation-duration: 	0.3s;
		}
			@keyframes poly-close {
				0%		{ clip-path: polygon(0% 0%, calc(100% + 10%) 0%, 100% 100%, 0% 100%); opacity: 1; }
				50%	{ clip-path: polygon(0% 0%, calc(40% + 10%) 0%, 40% 100%, 0% 100%); opacity: 0.8; }
				100%	{ clip-path: polygon(0% 0%, calc(0%) 0%, 0% 100%, 0% 100%); opacity: 0; }
			}
		/* Hack for start. Else animation will played on reload.*/
		#navbar .bg.default {
			width: 			0;	
		}


	/* LOGO */
	#navbar .lrg-logo,
	#navbar .sml-logo {
		position:	relative;
		display: 	inline-block;
		width: 		160px;
		height: 		50px;
		float: 		left;
		cursor: 		pointer;
			
		background-size: 		auto 100%;
		background-position:	left bottom;
	   background-repeat:	no-repeat;
		background-image:		url('../images/velox_logo-white.svg'); 
																									/*border:  solid 1px #2433FF;*/
	}
		#navbar .lrg-logo.orange,
		#navbar .sml-logo.orange {
			background-image:		url('../images/velox_logo.svg'); 
		}

		#navbar .lrg-logo.open {
			background-image:		url('../images/velox_logo.svg'); 
		}
		#navbar .lrg-logo.close {
			background-image:		url('../images/velox_logo-white.svg'); 
		}


	/* BURGER */
	#navbar .bt_burger {
		position:	relative;
		top:			-5px;
		float: 		right;		
		display:		none;								
	}
		#navbar .bt_burger.show {
			display:	block;
			z-index:	5;
		}

	/* MENU */
	#navbar .menu {
		position:  	absolute;
		top:			23vh;
		left:  		0;				/* reset */
		width:		89vw;			/* reset */
		z-index:		4;

		/*opacity: 	0;
		transition:	opacity 0.5s;*/

		visibility:	hidden; 
		opacity:		0;
		transition:	visibility 0.5s, opacity 0.5s; 
      																			
      																		/*border:  solid 1px #2433FF;*/
	}
		#navbar .menu.open{
			visibility: visible; 
			opacity: 	1;
		}
		#navbar .menu.close{
			visibility:	hidden; 
			opacity: 	0;
		}
		#navbar .menu ul{
			margin:			0;
			padding:			0; 
			list-style: 	none;
			text-align: 	left;
		}
		#navbar .menu li{
			overflow:	hidden;
			display: 	block;
			padding: 	0 0 10px 0;
		}

		/* KONTAKT NOTRUF */
		#navbar .menu .kontakt-emergency	{
			position:	absolute;
			right: 		0;
			top: 			-25vh;
			height: 		102vh;
			width:  		40vw;
			padding: 	25vh var(--pagemargin) 0 3vw;

	    	background:	var(--color1);

			opacity:		0;
			transition:	opacity 0.5s; 
			transition-delay: 800ms;

		}
			#navbar .menu .kontakt-emergency.open{
				opacity: 	1;
			}
			#navbar .menu .kontakt-emergency.close{
				opacity: 	0;
			}
			#navbar .menu .kontakt-emergency .txt{
			}
			#navbar .menu .kontakt-emergency .links{
																					/*border:  solid 1px #2433FF;*/
			}		
				#navbar .menu .kontakt-emergency .links a {
    				display:				flex;
    				align-items:		center;
					text-decoration:	none;
				}
				#navbar .menu .kontakt-emergency .links i {
					margin-right:	20px;
				}





/*-------------------------------*/
/*			 BUTTON: NOTRUF   	   */
/*-------------------------------*/

.bt_sticky-emergency {
	position: fixed;
	height:  130px;
	width:	130px;

	bottom: 	12vh;
	right:	var(--pagemargin);

	cursor:	pointer;

	background-position: right;
	background-size: 		cover;
	background-repeat: 	no-repeat;
	background-image:		url('../images/velox_notruf.svg'); 

	filter: drop-shadow(0.30rem 0.30rem 0.4rem rgba(0, 0, 0, 0.2));

	z-index:  3;
}





/*-------------------------------*/
/*        HERO FULLSCREEN        */
/*-------------------------------*/

.hero-start{	
	height:		100vh;

	background-position: right;
	background-size: 		cover;
	background-repeat: 	no-repeat;

	background-color: rgb(0 0 0 / 0.2);  /*black and 20% transparent*/ 
	background-blend-mode: multiply;
																/*background-color:  #D000C8;*/
}
	.hero-start .diagonal-shape-left {
		height:					100vh;
		background: 			var(--color1); 
		-webkit-clip-path:	polygon(0% 0%, calc(40% + 10%) 0%, 40% 100%, 0% 100%);
	}

	.hero-start .titlebox {
		position:	absolute;
		margin: 		30vh var(--pagemargin) 0 var(--pagemargin);
		width: 		40%;

		z-index:		2;
																/*background-color:  #D000C8;*/
	}




/*-------------------------------*/
/*        	HERO SUBPAGE         */
/*-------------------------------*/

.hero-subpage{	
	padding-top:  	28vh;
}
	.hero-subpage .title{
		padding-right:  15%;	
	}
	.hero-subpage .img {
		animation-delay: 1s;	
	}
	/* SHAPES */
	.hero-subpage .diagonal-shape-bottom,
	.hero-subpage .diagonal-shape-top {
		position: 	absolute;
		top: 			0;	/* top position via jquery */
		left: 		0;

		width:  		100vw;
		height:		100vh;
		z-index:  	-1;

		background: var(--color1); 
	}
		.hero-subpage .diagonal-shape-bottom {
			height:		115vh;
		}
		/* TOP */
		.hero-subpage .diagonal-shape-top {
			/*-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 0% 90%);*/
			-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 70%, 0% 95%);
		}
		/* BOTTOM */
		.hero-subpage .diagonal-shape-bottom {
			-webkit-clip-path: polygon(0 25%, 100% 0%, 100% 75%, 0% 100%);
		}



/*-------------------------------*/
/*        	HERO TITLE         */
/*-------------------------------*/

.hero-title {	
	padding-top:  	28vh;
}



/*-------------------------------*/
/*				TEXT: INTRO       	*/
/*-------------------------------*/

.txt-intro {
																/*background-color:  #D000C8;*/
}



/*-------------------------------*/
/*				TEXT: LEFT 	      	*/
/*-------------------------------*/

.txt-left {
																/*border:  solid 1px #2433FF;*/
}



/*-------------------------------*/
/*			TEXT: 2 COLUMN	      	*/
/*-------------------------------*/

.txt-2Col {
}
	.txt-2Col .bt{
	}




/*-------------------------------*/
/*				TEXT+IMAGE				*/
/*-------------------------------*/

.txt-img{
}
	/* TEXT */
	.txt-img .txt {  }
		.txt-img .txt.right {
			order:  2; 
		}
	/* IMAGE */
	.txt-img .img {  }
		.txt-img .img.left{
			order:  1; 
		}
		/*.txt-img .img .img-holder{

			background-position: center;
			background-size:		cover;
			background-repeat:	no-repeat;

			background-color:    var(--color4);
		}*/





/*-------------------------------*/
/*					TEASER				*/
/*-------------------------------*/

.teaser-group{
}
	.teaser-group .teaser{
		cursor:	pointer;
	}

		/* IMAGE */
		.teaser-group .teaser .img  {
			overflow: 					hidden; 
			background-color:    	var(--color4);	
		}
			/* ZOOM */
			.teaser-group .teaser .img .img-holder {
			    transition: transform 0.3s ease; 
			    height:	100%;
			}
			.teaser-group .teaser:hover .img .img-holder {
			    transform: scale(1.1);
			}

		/* TEXT */
		.teaser-group .teaser .txt{
			padding-right: 20%;
		}





/*-------------------------------*/
/*			  IMAGE: LARGE				*/
/*-------------------------------*/

.img-large{  
}
	.img-large .img {  
	}
		/*.img-large .img .img-holder{
			background-position: center;
			background-size:		cover;
			background-repeat:	no-repeat;

			background-color:  var(--color4);
		}*/




/*-------------------------------*/
/*					TEAM	   			*/
/*-------------------------------*/

.team-group {
}






/*-------------------------------*/
/*				TABLE LIST     		*/
/*-------------------------------*/

.tablelist {
}

/* no default list elements */
.tablelist ol, 
.tablelist ul {
	list-style: 		none;
	list-style-image: none;
	margin: 				0;
	padding: 			20px 0 0 0;
}


	.tablelist .col1 {
		margin-bottom:		20px;
	}
		.tablelist li {
			min-height: 		40px;
			/*line-height: 	40px;*/

			/*vertical centered
			display: flex;
			align-items: center;
			*/

			padding-left:		70px;
			padding-top:		2px;
			margin-bottom:		20px;

			background-image:		url('../images/arrow_cercle.svg');
			background-size:		40px 40px;
			background-repeat: 	no-repeat;
			background-position: 0 2px;
															/*background-color:  #D000C8;*/
		}
		.tablelist ul li:last-child {
		    margin-bottom: 0; 
		    												/*background-color:  #FBFF8C;*/
		}




/*-------------------------------*/
/*			  TEXT: FACTBOX			*/
/*-------------------------------*/

.factbox{ 
}
	.factbox .text {  
		text-align: center;									/*border: solid 1px #FC253A*/
	}





/*-------------------------------*/
/*				ACCORDION	   		*/
/*-------------------------------*/

.accordions {
															/*	border:  solid 1px #2433FF;*/
}
	.accordions .acc {
		
		margin: 0;
		padding: 0;
		
		overflow: hidden;
	}
		.accordions .acc li {
			list-style-type: none;
			padding-bottom: 20px;
		}

		/* BOX */
		.accordions .acc_ctrl {
			border:			none;
			cursor:	 		pointer;
			display: 		block;
			outline: 		none;

			padding: 2% 20% 2% 3%;
			/*padding: 		1.8em;
			padding-left: 	3.0em;*/

			position: 		relative;
			width: 			100%;

			text-align: 	left;
			background:		#FFF;
		}
			.accordions .acc_ctrl.active {
				transition: all 0.2s ease-in-out;
				background: 	var(--color1);
			}

			/* TITLE */
			.accordions .acc_ctrl h3{
				color: 		var(--color3);
			}
			.accordions .acc_ctrl.active h3{
				position: 	relative;
				color: 		#FFF;
			}			

			/* ICON */
			.accordions .acc_ctrl:before,
			.accordions .acc_ctrl:after{
				margin-right: 	37px;
				position: 		absolute;
				height: 			4px;
				right: 			0;
				top: 				50%;
				width: 			20px;

				/*background: 	#FFF;*/
				background: 	var(--color1);
				content: 		'';
			}
				.accordions .acc_ctrl:before {
					-webkit-transform: rotate(90deg);
					-moz-transform: rotate(90deg);
					-ms-transform: rotate(90deg);
					-o-transform: rotate(90deg);
					transform: rotate(90deg);
					-webkit-transition: all 0.2s ease-in-out;
					-moz-transition: all 0.2s ease-in-out;
					-ms-transition: all 0.2s ease-in-out;
					-o-transition: all 0.2s ease-in-out;
					transition: all 0.2s ease-in-out;
				}
			.accordions .acc_ctrl.active:before {
				-webkit-transform: rotate(0deg);
				-moz-transform: rotate(0deg);
				-ms-transform: rotate(0deg);
				-o-transform: rotate(0deg);
				transform: rotate(0deg);
			}
				/* ICON OPEN */
				.accordions .acc_ctrl.active:after,
				.accordions .acc_ctrl.active:before{
					background: 	#FFF;
				}

		/* PANEL */
		.accordions .acc_panel {
			display:			none;
			overflow:		hidden;


			padding: 3% 20% 5% 3%;

			/*padding: 1em 10em 2em 1.8em ;*/

			/*padding: 		1em;
			padding-left: 	1.8em;
			padding-right: 10em;*/

			background: 	#FFF;
		}
		.accordions .acc_panel li {
			list-style-type: initial;
		}




/*-------------------------------*/
/*		  	GALLERY/SLIDER	     		*/
/*-------------------------------*/

.slider { 
	position:		relative;
	width: 			100vw;
	height:			auto;
	padding-left:	var(--pagemargin);
																	/*border: solid 1px #FC0107;*/
}
	.slider .projektGallery{
		position:	relative;
		width: 		100%;
																	/*border: solid 1px #2919F8;*/
	}
	




/*-------------------------------*/
/*					FOOTER   		   */
/*-------------------------------*/

#footer {
	background-color: var(--color1);
}
	#footer .logo {
		background-size: 		145px 45px;
	   background-repeat:	no-repeat;
		background-image:		url('../images/velox_logo-white.svg'); 
	}
	#footer .claim {
		text-align: 	right;
	}
	#footer .contact {
	}
	#footer .social {
	}
	#footer .imprint {
		text-align: 	right;
	}
		#footer .imprint a{
			padding-left: 20px;
		}