:root {

}

html {
	scroll-behavior: smooth;
}

/*** Fonts ***/
/* open-sans-300 - latin */
@font-face {
	font-display: swap;
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 300;
	src: url('/_shared/fonts/open-sans-v44-latin-300.woff2') format('woff2');
}
/* open-sans-300italic - latin */
@font-face {
	font-display: swap;
	font-family: 'Open Sans';
	font-style: italic;
	font-weight: 300;
	src: url('/_shared/fonts/open-sans-v44-latin-300italic.woff2') format('woff2');
}
/* open-sans-regular - latin */
@font-face {
	font-display: swap;
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	src: url('/_shared/fonts/open-sans-v44-latin-regular.woff2') format('woff2');
}
/* open-sans-italic - latin */
@font-face {
	font-display: swap;
	font-family: 'Open Sans';
	font-style: italic;
	font-weight: 400;
	src: url('/_shared/fonts/open-sans-v44-latin-italic.woff2') format('woff2');
}
/* open-sans-700 - latin */
@font-face {
	font-display: swap;
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 700;
	src: url('/_shared/fonts/open-sans-v44-latin-700.woff2') format('woff2');
}
/* open-sans-700italic - latin */
@font-face {
	font-display: swap;
	font-family: 'Open Sans';
	font-style: italic;
	font-weight: 700;
	src: url('/_shared/fonts/open-sans-v44-latin-700italic.woff2') format('woff2');
}

/*** Global Layout ***/
body {
	font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, Ubuntu, roboto, noto, segoe ui, arial, sans-serif;
	font-size: 18px;
	line-height: 1.5
}

/*** headline ***/
.display-title p.subline {
	font-size: .618em;
}

/*** Menue ***/
.navbar-toggler:focus {
	box-shadow: unset;
}
.menu-button {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	row-gap: 7px;
}

.menu-button-line,
.menu-button::before,
.menu-button::after {
	content: "";
	width: 32px;
	height: 3px;
	background-color: #333333;
	transition: transform 0.3s, opacity 0.3s;
}

.menu-button.is-opened .menu-button-line {
	opacity: 0;
}

.menu-button.is-opened::before {
	transform: translateY(10px) rotate(45deg);
}

.menu-button.is-opened::after {
	transform: translateY(-10px) rotate(-45deg);
}

/**** Loader Animation
*********************************/
.no-js #loader {
	display:none;
}
#loader {
	width: 100vw;
	height: 100vh;
	position: fixed;
	z-index: 999999;
	left: 0;
	top: 0;
	background-color: rgba(255,255,255,1);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity .4s;
}
#loader.hidden {
	opacity: 0;
}
.sk-chase {
	width: 80px;
	height: 80px;
	position: relative;
	animation: sk-chase 2.5s infinite linear both;
}
.sk-chase-dot {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0; 
	animation: sk-chase-dot 2.0s infinite ease-in-out both; 
}
.sk-chase-dot:before {
	content: '';
	display: block;
	width: 25%;
	height: 25%;
	background-color: silver;
	border-radius: 100%;
	animation: sk-chase-dot-before 2.0s infinite ease-in-out both; 
}
.sk-chase-dot:nth-child(1) { animation-delay: -1.1s; }
.sk-chase-dot:nth-child(2) { animation-delay: -1.0s; }
.sk-chase-dot:nth-child(3) { animation-delay: -0.9s; }
.sk-chase-dot:nth-child(4) { animation-delay: -0.8s; }
.sk-chase-dot:nth-child(5) { animation-delay: -0.7s; }
.sk-chase-dot:nth-child(6) { animation-delay: -0.6s; }
.sk-chase-dot:nth-child(7) { animation-delay: -0.5s; }
.sk-chase-dot:nth-child(8) { animation-delay: -0.4s; }
.sk-chase-dot:nth-child(1):before { animation-delay: -1.1s; background-color: #000; }
.sk-chase-dot:nth-child(2):before { animation-delay: -1.0s; background-color: #333; }
.sk-chase-dot:nth-child(3):before { animation-delay: -0.9s; background-color: #666; }
.sk-chase-dot:nth-child(4):before { animation-delay: -0.8s; background-color: #999; }
.sk-chase-dot:nth-child(5):before { animation-delay: -0.7s; background-color: #bbb; }
.sk-chase-dot:nth-child(6):before { animation-delay: -0.6s; background-color: #ccc; }
.sk-chase-dot:nth-child(7):before { animation-delay: -0.5s; background-color: #ddd; }
.sk-chase-dot:nth-child(8):before { animation-delay: -0.4s; background-color: #eee; }

@keyframes sk-chase {
	100% { transform: rotate(360deg); } 
}
@keyframes sk-chase-dot {
	80%, 100% { transform: rotate(360deg); } 
}
@keyframes sk-chase-dot-before {
	50% {
		transform: scale(0.4); 
	} 100%, 0% {
		transform: scale(1); 
	} 
}

/**** Media Queries
*********************************/

@media (min-width: 576px) { /* sm */

}

@media (min-width: 768px) { /* md */

}

@media (min-width: 992px) { /* lg */

}

@media (min-width: 1200px) { /* xl */

}

@media (min-width: 1400px) { /* xxl */

}