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

https://engageinteractive.co.uk/blog/em-vs-rem-vs-px
https://elementor.com/help/whats-the-difference-between-px-em-rem-vw-and-vh/#:~:text=VW%20is%20useful%20for%20creating,up%20the%20entire%20viewport's%20height.

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

	/*html {
		font-size: 62.5%;
		line-height: 62.5%;
	  	height: 100%;
	  	width: 100%;
	  	overflow: hidden;	  	
	}	
	body {
		margin: 0;
		-webkit-overflow-scrolling: touch;
		height: 100%;  
		overflow-y: auto;	
		overflow-x: hidden;	
		color: var(--n20);
	}
	*/

	html {
		font-size: 62.5%;
		line-height: 62.5%;
	  	height: 100%;
	  	width: 100%;
	  	overflow: hidden;	  	
	}
	body {
		margin: 0;
		-webkit-overflow-scrolling: touch;
		height: 100%;  
		overflow-y: auto;	
		overflow-x: hidden;	
		color: var(--n20);
	}	

	.preload * {

	}

	/* This makes the \n in the lang.js json part break into a new line */
	.lang {
		white-space: pre-line;
	}

/* ------------------------------ */
/* FONTS & TYPOGRAPHY */
/* ------------------------------ */

	h1 {
		font-family: 'Barlow Semi Condensed', sans-serif;
		font-size: 5.6rem;
		font-weight: 600;
		line-height: 7.2rem;
		margin: 0;		
	}
	h1.accent {
		font-weight: 800;
	}

	h2 {
		font-family: 'Barlow Semi Condensed', sans-serif;
		font-size: 3.6rem;
		font-weight: 500;
		line-height: 4.8rem; /*5.6*/
		margin: 0;
	}

	h3 {
		font-family: 'Barlow Semi Condensed', sans-serif;
		font-size: 2.4rem;
		font-weight: 600;
		line-height: 3.8rem;	
		margin: 0;
	}	

	h4 {
		font-family: 'Barlow', sans-serif;
		font-size: 1.8rem;
		font-weight: 600;
		line-height: 3.2rem;
		margin: 0;
	}

	h2.accent,
	h3.accent,
	h4.accent {
		font-weight: 700;
	}
	p.accent {
		font-weight: 600;
	}		

	p {
		font-family: 'Barlow', sans-serif;
		font-size: 1.8rem;
		font-weight: 400;
		line-height: 3.2rem;
		margin: 0;
	}
	p.small {
		font-family: 'Barlow', sans-serif;
		font-size: 1.4rem;
		font-weight: 400;
		line-height: 2.2rem;
		margin: 0;
	}

	p.subline {
		font-family: 'Barlow Semi Condensed', sans-serif;
		font-size: 2.4rem;
		font-weight: 400;
		line-height: 3.8rem;		
	}
	a {
		text-decoration: none;
	}


	.list ul li {
		margin-bottom: var(--sp100);
		padding-left: var(--sp100);
		
	}

/* ------------------------------ */
/* TEXTLINK */
/* ------------------------------ */	
	a.link {
		font-family: 'Barlow Semi Condensed', sans-serif;
		font-size: 2.4rem;
		font-weight: 400;
		line-height: 3.8rem;	
		color: var(--n60);	
		position: relative;
	}
	a.inline-link {
		font-family: inherit !important;
		font-size: inherit !important;
		font-weight: inherit !important;
		line-height: inherit !important;
	}
	a {
		color: var(--h100);	
		position: relative;	
	}
	a:hover {
		color: var(--h100);	
	}	
	a.link:hover {
		color: var(--n20);
	}

	a:hover, a.link:hover {
		cursor: pointer;			
	}
	
	a:hover:after {
		background-color: var(--h100);
	}
	a.link:hover:after {
		background-color: var(--n20);
	}
	a:hover:after, a.link:hover:after {
		position: absolute;
		content: "";
		height: var(--l100);
		width: 100%;
		left: 0px;
		bottom: -6px;

	  	animation-name: moveScale;
	  	animation-duration: var(--a100);
	  	transform-origin: left;	
	  	animation-timing-function: ease;
	}

	a.link:active {
		opacity: 0.75;
	}
	a:active {
		opacity: 0.75;
	}

	a.resetLink:after {
		height:  0;
	}	

/* ------------------------------ */
/* KEYFRAMES */
/* ------------------------------ */	

	@keyframes moveScale {
	  from {transform: scaleX(0);}
	  to {transform: scaleX(1);}
	}

:root {



/* ------------------------------ */
/* BREAKPOINTS */
/* ------------------------------ */		
	--smartphone: 640px;
	--tablet-portrait: 768px;
	--tablet-landscape: 1024px;
	--desktop: 1280px;
	--desktop-hd: 1920px;
	--desktop-4k: 2560px;

/* ------------------------------ */
/* Lines */
/* ------------------------------ */	
	--l50: 0.1px;
	--l100: 1px;
	--l200: 2px;

/* ------------------------------ */
/* ANIMATION */
/* ------------------------------ */	
	--a100: 0.25s;
	--a200: 0.5s;
	--a300: 0.75s;
	--a400: 1s;
	--a800: 2s;
	--a1600: 4s;

/* ------------------------------ */
/* ELEVATIONS */
/* ------------------------------ */	
	--elevation-basic: 0px 0px 13px rgba(0, 0, 0, 0.13);
	--elevation-big: 0px 20px 40px rgba(0, 0, 0, 0.25);
/* ------------------------------ */
/* ABSTAENDE */
/* ------------------------------ */
	--sp50: 0.8rem;
	--sp100: 1.4rem;
	--sp200: 2.4rem;
	--sp300: 3.2rem;
	--sp400: 4rem;
	--sp450: 4.8rem;
	--sp500: 6.4rem;	
	--sp600: 8rem;
	--sp700: 10rem;
	--sp1400: 20rem;

/* ------------------------------ */
/* FARBEN */
/* ------------------------------ */
	--h100: #146FFF;
	--h40: #083A65;
	--n20: #081433;
	--n60: #838C99;
	--n80: #CCCED1;
	--n90: #E0E2E5; 
	--n96: #F2F3F5; 
	--n100: #ffffff;
	--b96: #A2D2F5;
	--t96: #A2E1F5;
	--y98: #FAEB9B;
	--r96: #FEADA8;
	/* ------------------------------ */
	--b84: #101867;
	/* ------------------------------ */
	--sr100: #FF3C3C;
	--sg100: #10D23B;
	--sy100: #FFBD3C;
	--sb100: #146FFF;

}