/* =============================================================================
   Typography
   ========================================================================== */
   
/* ROOT TEXT */
html 					{ font-size: 24px; }

/* HEADLINES (0.8) */																												
h1 					{ font-size: 2.4rem; } 	/* Titel */
h2 					{ font-size: 1.5rem; } 	/* Absatztitel */ 																													
h3 					{ font-size: 1.2rem; } 		


/* TEXTE */
.ch_facts			{ font-size: 2.4rem; }	/* Numbers Facts */
.ch_intro 			{  }							/* Intro Hero */
.ch_bt_label		{  }							/* Button Label */
.ch_note				{  }							/* Marginalien */
.ch_rubrictitle   {  }							/* Rubrikentitel */





/* =============================================================================
   Links
   ========================================================================== */



/* =============================================================================
   Icons
   ========================================================================== */
   
i{
   transform-origin: top left;
   transform:        scale(0.9);
   margin-right:     8px;
}



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

   

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


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


/*-------------------------------*/
/*             PAGE              */
/*-------------------------------*/



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

.ancor {
    margin: -140px;
}



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

#navbar{
	padding-top: 	50px;
}
	#navbar .bg {					
	}
		#navbar .bg.open {
		}
			@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% + 20%) 0%, 40% 100%, 0% 100%); opacity: 0.8; }
				100%	{ clip-path: polygon(0% 0%, calc(100% + 20%) 0%, 100% 100%, 0% 100%); opacity: 1; }
			}
		#navbar .bg.close {
		}
			@keyframes poly-close {
				0%		{ clip-path: polygon(0% 0%, calc(100% + 20%) 0%, 100% 100%, 0% 100%); opacity: 1; }
				50%	{ clip-path: polygon(0% 0%, calc(40% + 20%) 0%, 40% 100%, 0% 100%); opacity: 0.8; }
				100%	{ clip-path: polygon(0% 0%, calc(0%) 0%, 0% 100%, 0% 100%); opacity: 0; }
			}


	/* LOGO */
	#navbar .lrg-logo,
	#navbar .sml-logo {

		transform-origin: 	top left;
		transform: 				scale(1.0);

		/*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.svg'); */
		}


	/* BURGER */
	#navbar .bt_burger {
	}

	/* MENU */
	#navbar .menu {
		top:	20vh;
	}
		#navbar .menu.grid-3{
			grid-template-columns: unset;
			grid-template-columns: 46% 46%;	
		}
		#navbar .menu .box{
			/*background-color: #FC00FD;*/
		}
			#navbar .menu ul{
			}
			#navbar .menu li{
				padding: 	0 0 5px 0;
			}


		/* KONTAKT NOTRUF */
		#navbar .menu .kontakt-emergency	{
			right: 		unset;
			top: 			unset;
			top: 			30vh;
			/*padding: 	0 !important;*/
			height: 		50vh;
			width:  		100vw;
			padding: 	5vh 25vw 0 var(--pagemargin);
		}
			#navbar .menu .kontakt-emergency span{
				display:  none;
			}
			#navbar .menu .kontakt-emergency .txt{
			}
			#navbar .menu .kontakt-emergency .links{
			}		
				#navbar .menu .kontakt-emergency .links a {
				}
				#navbar .menu .kontakt-emergency .links i {
					margin-right:	15px;
				}



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

.bt_sticky-emergency {
	bottom: 				8vh;
}





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

.hero-start{	
	height:					100vh;
	background-position: right top;
	background-size: 		155%;
}
	.hero-start .diagonal-shape-left {
		position:	relative;
		height:		55vh;
		width:		100vw;
		top: 			45vh;

		-webkit-clip-path: polygon(0% 20%, 100% 0%, 100% 100%, 0% 100%);
	}

	.hero-start .titlebox {
		margin-top: 0;
		width: 		70vw;
		top: 			62vh;
	}




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

.hero-subpage{	
	padding-top:  20vh !important; /* addtional padding */
}
	.hero-subpage .title{
	}
	.hero-subpage .diagonal-shape-bottom,
	.hero-subpage .diagonal-shape-top {
		height:		75vh;
	}
		/* TOP */
		.hero-subpage .diagonal-shape-top {
			height:		75vh;
			-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 70%, 0% 85%);
		}
		/* BOTTOM */
		.hero-subpage .diagonal-shape-bottom {
			-webkit-clip-path: polygon(0 15%, 100% 0%, 100% 85%, 0% 100%);
		}


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

.hero-title {	
	padding-top:  20vh !important;
}





/*-------------------------------*/
/*			  TEXT: CENTER       	*/
/*-------------------------------*/

.txt-intro {
}
	.txt-intro .colpos-2-to-3 {
		margin-right:  10vw;
	}



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

.txt-left {
}
	.txt-left .txt.box {
														/*border:  solid 1px #2433FF;*/
		grid-column: span 3 !important;				
	}




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

.team-group{
	grid-template-columns:	13.33% 13.33% 13.33% 13.33% 13.33% 13.33% ;	/* change to grid-6 */
}
	.team-group .memberbloc{
		grid-column: span 2;
	}
	.team-group .txt{
		font-size: 0.7rem; 		/*.ch_note */
	}




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

.tablelist {
}
	.tablelist .col1 {
		margin-bottom:		20px;
	}
		.tablelist li {
			min-height: 		35px;

			padding-left:		50px;
			padding-top:		2px;
			margin-bottom:		15px;

			background-size:		35px 35px;
			background-position: 0 0;
															/*background-color:  #D000C8;*/
		}




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

.factbox{ 
}
	.factbox .text {  
		grid-column: span 2; 
	}




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

.accordions {
}
	.accordions .acc {
	}
		.accordions .acc li {
		}

		/* BOX */
		.accordions .acc_ctrl {
			padding: 2% 15% 2% 3%;
		}

			/* ICON */
			.accordions .acc_ctrl:before,
			.accordions .acc_ctrl:after{
				right: 			0;
				width: 			18px;
				height: 			3px;
			}

		/* PANEL */
		.accordions .acc_panel {
			padding: 3% 5% 5% 3%;
		}




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

#footer {
}
	#footer .logo {
		padding-bottom:  100px;
	}
	#footer .contact {
		padding-bottom:  50px;
	}






/* =============================================================================
   CHANGE: BASE and ADDONS
   ========================================================================== */




/*-------------------------------*/
/*             PAGE              */
/*-------------------------------*/

/* PADDING */
:root {
	--pagemargin: 	7vw;		/* padding left & right */
}



/*-------------------------------*/
/*      GRID: 4-SPALTIG          */
/*      GRID: 6-SPALTIG          */
/*-------------------------------*/

/* GRID  */
.grid-4,
.grid-6 {  }


/* 4-COLUMN GRID  */
.grid-4 {  }

	/* BOX */
	/*.grid-4 .box { grid-column: span 2 !important; }*/

	/* COLUMN POSTION */
	.grid-4 .box.center-span-2	{ grid-column: span 4 !important; margin: 0 10% 0 10%}
	.grid-4 .box.colpos-2-to-3	{ grid-column: span 4 !important; }


/* 6-COLUMN GRID  */
.grid-6 {  }

	/* BOX */
	.grid-6 .box { grid-column: span 3 !important; }

		/* COLUMN POSTION */
		.grid-6 .box.span-2, 
		.grid-6 .left-span-2 { grid-column: span 3 !important; }

		.grid-6 .box.center-span-4	{ 
			/*grid-column-start: 2 !important; grid-column-end: span 4 !important;*/
			grid-column: span 6 !important;
		}



/* 3-COLUMN GRID  
.grid-3 {
	grid-template-columns:	48% 48%;
}
	/* COLUMN POSITION 
	.grid-3 .box.colpos-3 { grid-column: unset;}
*/


/* BLOC GAPS */
.gap-0-25-top 		{ padding-top:		 10px; }
.gap-0-25-bottom	{ padding-bottom:	 10px; }
.gap-0-5-top 		{ padding-top:		 20px; }
.gap-0-5-bottom	{ padding-bottom:	 20px; }
.gap-1-top 			{ padding-top:		 30px; }
.gap-1-bottom		{ padding-bottom:	 30px; }
.gap-2-top 			{ padding-top:		 60px; }
.gap-2-bottom		{ padding-bottom:	 60px; }
.gap-3-top 			{ padding-top:		 90px; }
.gap-3-bottom		{ padding-bottom:	 90px; }
.gap-4-top 			{ padding-top:		120px; }
.gap-4-bottom		{ padding-bottom:	120px; }








/*-------------------------------*/
/*           BUTTONS    	      */
/*-------------------------------*/

/* BUTTON DEFAULT */
.button {
	transition:		none;
	padding: 		12px 20px 10px 20px;
}
	.button span {
		padding-right: 20px;
	}
	.button span:after {
		transition:		none;
		transform:		scale(1);
		opacity:			1;
		padding-right: 20px;
	}	

	/* HOVEREFFECT */
	.hover-teaser span,
	.button:hover span,
	.button-boarder:hover span,
	.button-light:hover span {
		padding-right: -20px;
	}

	.hover-teaser span:after,
	.button:hover span:after,
	.button-boarder:hover span:after,
	.button-light:hover span:after {
		right:		-20px;
	}