/*========================
 bg colors
=========================*/
.bg-col-black {
	background-color: rgba(0,0,0,1);
}
.bg-col-red {
	background-color: rgba(255,0,0,1);
}
.bg-col-blue {
background-color: rgba(48,153,255,1);
}
.bg-col-darkblue {
background-color: rgba(0,10,64,1);
}
.bg-col-aqua {
/*
	background-color: rgba(0,231,228,1);
*/
	background-color: rgba(210,241,242,1);
}
.bg-col-grey {
	background-color: rgba(237,237,237,1);
}
.bg-col-beige {
	background-color: rgba(237,235,230,1);
}
.bg-col-bleu {
	background-color: rgba(230,233,237,1);
}
.bg-col-schilf {
	background-color: rgba(230,237,235,1);
}
.bg-col-mauve {
	background-color: rgba(232,230,237,1);
}
.bg-col-rose {
	background-color: rgba(237,230,234,1);
}
.bg-col-white-blu {
	animation: white-blu-change 10s infinite;
}
@keyframes white-blu-change {
  0% {
	background-color: rgba(255, 255, 255, 1);
  }
  50% {
	background-color: rgba(40, 0, 255, 1);
  }
  100% {  
	background-color: rgba(255, 255, 255, 1);
  }
}
.glass-card {
	padding: 5px 10px;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 20px 10px rgba(255, 255, 255, 0.25);
  position: relative;
  overflow: hidden;
}
.glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(11, 20, 70, 0.8),
    transparent
  );
}
.glass-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(11, 20, 70, 0.8),
    transparent
  );
}
.cta-button {
	display: inline-block;
	margin: 5px 0 5px 0;
	padding: 10px;
	font-size: 1.5rem;
	font-weight: 400;
    text-align: center;
    background: var(--orange);
    border-radius: 24px;
    border: solid 1px var(--border);
    box-shadow: 2px 2px 0 var(--shadow), inset 1px 1px 0 var(--highlight);
}
@media screen and (max-width: 660px) {
	.cta-button {
		font-size: 1.1rem;
	}
}
.cta-button2 {
	display: inline-block;
	margin: 5px 0 5px 0;
	padding: 10px;
	font-size: 1.5rem;
	font-weight: 400;
    text-align: center;
    background: var(--oakgreen);
    border-radius: 24px;
    border: solid 1px var(--border);
    box-shadow: 2px 2px 0 var(--shadow), inset 1px 1px 0 var(--highlight);
}
@media screen and (max-width: 660px) {
	.cta-button2 {
		font-size: 1.1rem;
	}
}
.cta-button a, .cta-button2 a {
  color: rgba(255,255,255,1);
}
.cta-button a:hover, .cta-button2 a:hover {
	color: rgba(183,60,0,1);
}
.float-right {
	float: right;
	clear: right;
}
:root {
    --bgr1: #ffffff0d;
    --bgr2: #00000000;
    --bgr3: #00000008;
    --bgr4: #0000000f;
    --bgr5: #00000014;
    --border: rgb(0 0 0 / 8%);
    --highlight: rgb(255 255 255 / 28%);
    --shadow: rgb(0 0 0 / 2%);
    --text: rgb(0 0 0 / 75%);
    --embossed: rgb(0 0 0 / 17%);
    --textshadow: rgb(255 255 255 / 62%);
    --input: #fff;
    --orange: linear-gradient(90deg,rgba(255, 104, 0, 0.4) 0%, rgba(183, 60, 0, 0.85) 100%);
    --oakgreen: linear-gradient(90deg,rgba(64, 119, 48, 0.4) 0%, rgba(48, 94, 34, 0.85) 100%);
}
/*========================
font color
=========================*/
.font-col-white {
	color: rgba(255,255,255,1);
}
.font-col-red {
	color: rgba(255,0,0,1);
}
.font-col-blue {
	color: rgba(0,0,255,1);
}
/*========================
font style
=========================*/
.font-size-mega {
	font-size: 400%;
}
.slogan {
	max-width: 1400px;
	text-align: center;
	line-height: unset;
	font-weight: 300;
}
@media screen and (min-width: 810px) {
  .slogan {
	font-size: calc(35px + 25*(100vw - 810px)/633);
	padding-left: calc(50px + 25*(100vw - 810px)/633);
	}
}
@media screen and (max-width: 810px) {
  .slogan {
	font-size: calc(35px + 25*(100vw - 810px)/633);
	padding-left: calc(50px + 25*(100vw - 810px)/633);
	}
}
.size2rem {
	font-size: 1.9rem;
}
@media screen and (max-width: 660px) {
	.size2rem {
		font-size: 1.2rem;
	}
}
.size3rem {
	font-size: 2.9rem;
}
@media screen and (max-width: 660px) {
	.size3rem {
		font-size: 2.2rem;
	}
}
.teaser {
	display: inline-block;
	font-weight: 300;
	line-height: 2.5rem;
	border-bottom: 0;
}
.italic {
	font-style: italic;
}
.uppercase {
	text-transform: uppercase;
}
.center {
	text-align: center;
}
.copyright p {
	font-size: 0.95rem;
}
.shadow {
  -webkit-filter: drop-shadow( 3px 3px 2px rgba(40, 0, 255, 0.7));
  filter: drop-shadow( 3px 3px 2px rgba(40, 0, 255, 0.7));
}
#videostart {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  position: absolute;
}