<html>
<head>

<style type="text/css">

html { scroll-behavior: smooth; }

:root {

	--color_text_bright:		#FFFFFF;
	--color_text_dark:			#4F4F4F;
    --color_links: 					#48A1AF;
	--color_hover: 				#48A1AF;
	--color_line:						#CDCDCD;

	--gradient1_1:					#368084;		/*blau 58A7AC 175559*/
	--gradient1_2:				#368084;

	
	--gradient2_1:				#84C91A;		/*grün*/
	--gradient2_2:				#639613;

	--gradient_edge_white: #E0E0E0;

	--color_font_dark: #4F4F4F;
	--color_font_white: #FFFFFF;
	--color_grey_1: #EBEBEB;
	--color_grey_2: #4F4F4F;
    --color_blue_1: #499498;
	
	--color_green_1: #7EBF19;
    --color_green_2: #A7C61A;
	--color_yellow_1: #E7A846;
	--color_red_1: #E74646;
	--color_text_green: #9AD73D;
	
	--webapp_pit: #ECECEC;
	--webapp_gradient1_2: #C0C0C0;
	--webapp_gradient1_1: #EEEEEE;
	--webapp_red: #E74646;
	--webapp_yellow: #E7A846;
	--webapp_green1: #A7C61A;
	--webapp_green2: #7EBF19;
	--webapp_grey: #4F4F4F;
	
	
	--spacer_mobile: 5vw;
	--spacer_screen: 20vw;
	
}

body { 

	background-image: linear-gradient(90deg, var(--gradient1_2), var(--gradient1_2));
	background-size: 100% 100%;
	background-repeat:no-repeat;
				
	color:#000000;
	font-family: arial;
	font-size:11;
}

* { padding:0; margin:0; }

@font-face { font-family: 'Gidolinya-Regular';
            src: url('fonts/Gidolinya-Regular.woff')  format('woff');
			font-weight: normal;
			font-style: normal;
			}

@font-face { font-family: 'Gidole-Regular';
            src: url('fonts/Gidole-Regular.woff')  format('woff');
			font-weight: normal;
			font-style: normal;
			}
			 
	a:link { text-decoration:none; font-weight:normal; color:#FFFFFF; }
	a:visited { text-decoration:none; font-weight:normal; color:#FFFFFF; }
	a:hover { text-decoration:none; font-weight:normal; color:#FFFFFF; }

		p { margin-top: 1.5em; }

.link:link {  color: var(--color_text_green); font-weight: bold; text-decoration: none;  }
.link:visited {  color: var(--color_text_green); font-weight: bold; text-decoration: none; }				
.link:hover {  color: var(--color_text_green); font-weight: bold; text-decoration: underline; }
		


.indent { margin-left: 2em; border-left: solid 0.15em; padding-left: 0.8em; }

@media (max-width: 1080px) {

.indent { margin-left: 1em }

}

/* Font Formats */

b 							{ font-size: 1.618em; letter-spacing: 0.02em; line-height: 1.2em; font-weight: bold; }

.font_normal 	{ font-family: 'Gidole-Regular'; color: var(--color_font_white); font-size: 1.3rem; line-height: 1.3em; }

.font_quote 		{ font-family: 'Gidolinya-Regular'; color: var(--color_font_white); font-size: 1.8rem; line-height: 1.2em; letter-spacing: 0.02em; font-style: italic; }

.font_big				{ font-family: 'Gidolinya-Regular'; color: var(--color_font_white); font-size: 1.8rem; line-height: 1.2em; letter-spacing: 0.02em; font-weight: bold; }

.font_small		{ font-family: 'Gidolinya-Regular'; color: var(--color_font_white); font-size: 1.2rem; line-height: 1.2em; letter-spacing: 0.02em; }

.green 					{ color:var(--color_green_1); font-weight: bold; }

.dark						{ color:var(--color_text_dark); }

.bond					{ white-space: nowrap; }


@media (max-width: 1080px) {
	
.font_normal 	{ font-size: 2.4rem; line-height: 1.2em; }

.font_quote 		{ font-size: 2.8rem; line-height: 1.2em; }

.font_big				{ font-size: 3.2rem; line-height: 1.2em; }

.font_small		{ font-size: 2rem; line-height: 1.2em; }
	
}

@media (min-width: 1921px) {
	
.font_normal 	{ font-size: 1.3vw; line-height: 1.3em; }

.font_quote 		{ font-size: 2.8vw; line-height: 1.2em; }

.font_big				{ font-size: 1.8vw; line-height: 1.2em; }

.font_small		{ font-size: 1.2vw; line-height: 1.2em; }
	
}


/* Main Page Elements */

.center_page { display: flex; width: 100%; flex-wrap: wrap; justify-content: center; }
.center { width: 100%; text-align: center; }

.spacer_content { display: inline-block; width: 100%; height: 4rem; }
.break { display: inline-block; width: 100%; }

	@media (max-width: 1080px) { .spacer_content  { height: 12rem; } }
	@media (min-width: 1920px) { .spacer_content  { height: 6vw; } }

.darkbg {
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	justify-content: center;
	background-image: linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,0.3) 0.2vw, rgba(0,0,0,0.1) 2vw);
	background-blend-mode: multiply;
	padding: 4vw 0 1vw 0;
}

.title { text-align: center; margin: 0 10px 5rem 10px; width: 100%; padding: 0 5vw; font-family: 'Gidolinya-Regular'; color: var(--color_font_white); font-size: 5em; font-weight: bold; line-height: 2em; letter-spacing: 0.02em; }
.subtitle  { display: block; text-align: center; width: 88vw; padding: 0 0; margin-bottom: 8vw; font-family: 'Gidolinya-Regular'; color: var(--color_font_white); font-size: 4rem; font-weight: bold; line-height: 1.2em; letter-spacing: 0.02em; }


	@media (min-width: 1081px) { 
	.title { font-size: 2rem; margin: 0 10px 5rem 10px; }
	.subtitle {  font-size: 2.5rem; margin-bottom: 2vw; } 	
	}

.text { display: block; text-align: left; width: 40vw; max-width: 650px;  padding: 0 4vw; margin: 0 auto 4vw auto; }
.text_title { font-family: 'Gidolinya-Regular'; font-size: 1.618em; margin-bottom: 1.5em; font-weight: bold; line-height: 1.2em; }
	
	@media (max-width: 1080px) { 
	.text { width: 92vw; max-width: 92vw; text-align: left; margin-bottom: 5rem; }
	.text_title { margin: 1em 0 1em 0; text-align: center; }
	}
	
	@media (min-width: 1921px) { 
	.text { width: 40vw; max-width: 40vw; margin-bottom: 5rem; }
	.title { font-size: 2vw; margin: 0 10px 4vw 10px; }
	.subtitle {  font-size: 2.5vw; } 	
	}

.unit { font-size: 0.618em; font-weight: bold; }
.deeptwo { font-size: 0.8em; vertical-align: -0.4em; line-height: 0.6em; }

.source { display: block; width: 100%; padding: 2vw 2.5vw 0vw 2.5vw; text-align: right; font-family: 'Gidolinya-Regular'; color: var(--color_font_white); font-size: 1.2rem; line-height: 1.4em; letter-spacing: 0.02em; }

@media (max-width: 1080px) {
	.source { font-size: 2.5rem; padding: 2vw 2.5vw; text-align: center; }
		}
		
@media (min-width: 1921px) {
	.source { font-size: 1.1vw; }
		}
	
	
.graphic { display: block; text-align: left; width: 38vw;  padding: 0 0vw; margin: 0 auto 4vw auto; background-position: center; background-size: contain; background-repeat: no-repeat; }
	
.circle { display: block; text-align: left; width: 40vw; height: 40vw; padding: 0 0vw; margin: -7vw auto 4vw auto; background-position: center; background-size: contain; background-repeat: no-repeat;  border-radius: 100%; border: solid 2px white;  max-width: 500px; max-height: 500px; filter: drop-shadow(0.5vw 0.5vw 1.5vw rgba(0, 0, 0, 0.3)); }


@media (max-width: 1080px) { 
	.graphic { width: 92vw; font-size: 4vw; line-height: 1.3em; text-align: center; }
	.circle { width: 60vw; height: 60vw; margin-top: -9vw; }
	}
	
@media (min-width: 1921px) { 
	.circle { border: solid 0.2vw white; width: 30vw; height: 30vw; max-width: 30vw; max-height: 30vw; margin-top: -9vw; }
}

.description { display: block; width: 38vw; max-width: 500px; padding: 4vw; text-align: center; line-height: 1.5em; z-index: 3; font-style: oblique 10deg;
background-image: url(graphics/dot.svg); background-position: center; background-size: contain;  background-repeat: no-repeat; background-blend-mode: multiply; }

.description_mini { display: block; width: 13vw; max-width: 500px; min-width: 300px; margin: 2vw 4vw 2vw 0; padding: 1vw; text-align: center; font-style: oblique 10deg;
background-image: url(graphics/dot.svg); background-position: center; background-size: contain; background-repeat: no-repeat; background-blend-mode: multiply; }
.description_mini_icon { display: block; width: 8vw; height: 8vw; margin: -2.5vw auto 0.5vw auto; background-position: center; background-size: contain;  background-repeat: no-repeat; filter: drop-shadow(0.5vw 0.5vw 1.5vw rgba(0, 0, 0, 0.3));  }
.description_mini_text { position: relative; left: 0px; top: 0px; width: 13vw; min-width: 300px; margin-bottom: 3vw; padding: 0 1vw; text-align: center; }

.description_arrow { display: block; width: 2vw; height: auto; margin: -1.5vw 0 0 0; background-image: url(graphics/arrow_right.svg); background-position: center; background-size: contain; background-repeat: no-repeat; }


.description_middle { display: block; width: 20rem; margin: -3em 1em 3em 1em; padding: 0 2rem; text-align: center;
background-image: url(graphics/dot.svg); background-position: center; background-size: 10rem; background-repeat: no-repeat; background-blend-mode: multiply; }
.description_middle_icon { display: block; width: 20rem; height: 15rem; margin: 0 auto -4em auto; background-position: center; background-size: contain;  background-repeat: no-repeat;  }
.description_middle_text { position: relative; margin: 0 auto; top: 0px; text-align: center; width: 20rem; padding: 0 2rem; }


@media (max-width: 1080px) {	
	.description { width: 80vw; max-width: 80vw; padding: 8vw; }
	.description_mini { width: 40vw; margin: 8vw auto 4vw auto; padding: 2vw; }
	.description_mini_icon { width: 25vw; height: 25vw; margin: -5vw auto 2.5vw auto;}
	.description_mini_text { width: 80vw; margin-bottom: 5vw; }
	
	.description_arrow { width: 100%; height: 8vw; margin: 6vw 0 2vw 0; background-image: url(graphics/arrow_down.svg); }
	
	.description_middle { width: 92vw; margin: -3vw 0 2vw 0; background-size: 30vw; }
	.description_middle_icon { width: 75vw; height: 30vw; margin: 6vw auto 3vw auto; }
	.description_middle_text { width: 80vw; margin-bottom: 5vw; }
	}
	
@media (min-width: 1921px) {	
	.description_mini, .description_mini_text { width: 15vw; max-width: 15vw; }
	.description { width: 30vw; max-width: 40vw; padding: 5vw; }

.description_middle { width: 20vw; margin: -3vw 1vw 3vw 1vw; padding: 0 2vw; background-size: 10vw; }

.description_middle_icon { width: 20vw; height: 15vw; margin: 0 auto -4vw auto; }

.description_middle_text { margin: 0 auto;	top: 0px; width: 20vw; padding: 0 2vw; }


}


/* Kacheln */

.tile_white { width: 15vw; min-width: 290px; margin: 0 2vw 2vw 2vw; padding: 1vw 0; background-color: white; border-radius: 2vw; filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.7)); }
.tile_icon { display: block; width: 8vw; height: 8vw; margin: 0 auto 0.5vw auto; background-size: contain; }
.tile_edge { display: block; width: 100%; height: 2vw; margin: -1vw 0 1vw 0; background-image: linear-gradient(#FFFFFF00 , var(--gradient_edge_white) 80%, #FFFFFF00); }
.tile_title { display: block; width: 100%; margin: 0 0 0 0; text-align: center;
									font-family: 'Gidolinya-Regular'; color: var(--color_font_dark); font-size: 2.5em; line-height: 1.2em; letter-spacing: 0.02em;  }
.tile_description { display: block; width: 90%; margin: 0 auto 0 auto; text-align: center; height: 9em;
									font-family: 'Gidolinya-Regular'; color: var(--color_font_dark); font-size: 1.8em; line-height: 1.2em;  }

.tile_ribbon { display: block; width: 160px; height: 28px; margin: 7px 0 5px -7px; padding-right: 14px; background-color: var(--color_green_1); border-radius: 0 20px 20px 0; 
text-align: right; font-family: 'Gidolinya-Regular'; color: white; font-size: 1.8em; letter-spacing: 0.02em; line-height: 1.5em; filter: drop-shadow(2px 3px 5px rgba(0, 0, 0, 0.4)); cursor: pointer; transition: all 0.3s ease-in-out;  }
.tile_ribbon:hover { width: 165px; height: 30px; margin: 8px 0 0px -9px; transition: all 0.2s ease-in-out; font-size: 1.85em; line-height: 1.5em; filter: drop-shadow(3px 4px 6px rgba(0, 0, 0, 0.3)); }

.tile_ribbon_back { position: relative; left: -7px; top: -40px; width: 7px; height: 7px; background-color: #254B18; clip-path: polygon(100% 0%, 0% 100%, 100% 100%); transition: all 0.3s ease-in-out; }
.tile_ribbon:hover + .tile_ribbon_back { left: -9px; width: 9px; height: 9px; top: -39px; background-color: #254B18; transition: all 0.2s ease-in-out; }
									
.plus { display: inline-block; width: 1em; height: 1em; margin: 0 0.5em 0 0; vertical-align: -0.15em; background-image: url(graphics/plus.svg); }
.tile_ribbon_top { position: absolute; left: -14px; top: -14px; width: 250px; height: 200px; background-size: contain; background-repeat: no-repeat; }

@media (max-width: 1080px) {

.tile_white { width: 80vw; margin: 5vw 2vw 5vw 2vw;  border-radius: 6vw; }
.tile_icon { width: 30vw; height: 30vw; margin: 2vw auto 1vw auto; }
.tile_edge { height: 6vw; margin: -2vw 0 3vw 0; }
.tile_title { font-size: 6em; }
.tile_description { font-size: 3.5em; }

.tile_ribbon { width: 50vw; height: 1.6em; margin: 0 0 0.6em -0.3em; padding-right: 0.6em; border-radius: 0 0.8em 0.8em 0; font-size: 4em; }
.tile_ribbon:hover { width: 51vw; height: 1.6em; margin: 0.1em 0 0.35em -0.4em; padding-right: 0.6em; border-radius: 0 0.9em 0.9em 0; font-size: 4.1em; }
.tile_ribbon_back { left: -1.2em; top: -10em; width: 1.2em; height: 1.2em; }
.tile_ribbon:hover + .tile_ribbon_back { left: -1.7em; top: -9.6em; width: 1.6em; height: 1.6em; }

.tile_ribbon_top { left: -2.7vw; top: -2.7vw; width: 50vw; height: 30vw; }
}

@media (min-width: 1921px) {

.tile_white { width: 20vw; height: 32vw; margin: 2vw 2vw 2vw 2vw;  border-radius: 2vw; }
.tile_title { font-size: 1.5vw; }
.tile_description { font-size: 1.2vw; line-height: 1.3em; }

.tile_ribbon_top {
	left: -0.8vw;
	top: -0.8vw;
	width: 15vw;
	height: 9vw;
}

.tile_ribbon {
	width: 8em;
	height: 1.6em;
	margin: 1em 0 -0.6em -0.4vw;
	padding-right: 0.5em;
	border-radius: 0 0.8em 0.8em 0;
	font-size: 1.4vw;
	line-height: 1.6em;
	filter: drop-shadow(0.1vw 0.1vw 0.1vw rgba(0, 0, 0, 0.4));
}

.tile_ribbon:hover {
	width: 8em;
	height: 1.6em;
	margin: 1em 0 -0.6em -0.4vw;
	padding-right: 0.5em;
	border-radius: 0 0.8em 0.8em 0;
	font-size: 1.45vw;
	line-height: 1.6em;
	filter: drop-shadow(0.1vw 0.1vw 0.1vw rgba(0, 0, 0, 0.4));
	}
	
.tile_ribbon_back {
	left: -0.4vw;
	top: -1.8vw;
	width: 0.4vw;
	height: 0.4vw;
}

.tile_ribbon:hover + .tile_ribbon_back { left: -0.42vw; top: -1.86vw; width: 0.42vw; height: 0.43vw; }




}

}



/* Video */

.video { display: block; position: relative; width: 48vw; height: 27vw; min-width: 1000px; min-height: 563px; margin: 40px auto 40px auto; 									
									-moz-box-shadow: 		0px 0px 40px .00000030;
									-webkit-box-shadow: 	0px 0px 40px .00000030;
									box-shadow: 					0px 0px 40px .00000030; }

.video_player { width: 48vw; height: 27vw; min-width: 1000px; min-height: 563px; }

.video_peaky { position: absolute; left: -100px; bottom: 75px; width: 200px; height: 200px; background-image: url(graphics/peaky_video.svg); background-position: center; background-size: contain;  background-repeat: no-repeat; }

@media (max-width: 1080px) {	
.video { width: 96vw; height: 54vw; min-width: 96vw; min-height: 54vw; }

.video_player { width: 96vw; height: 54vw; min-width: 96vw; min-height: 54vw; }
}

@media (min-width: 1921px) {
.video { width: 60vw; height: 33.75vw;  }
.video_player { width: 60vw; height: 33.75vw;  }
.video_peaky {
	left: -5.07vw;
	bottom: 4vw;
	width: 10vw;
	height: 10vw;
	}
}

@media (max-width: 1199px) {	
.video_peaky { display: none; }
}




.edge_dark { display: block; width: 100%; height: 100px; margin: -250px 0 20px 0; 
background-image: linear-gradient(#4F4F4F00, #00000010 66%, #4F4F4F00); mix-blend-mode: darken; }

.edge_bright { display: block; width: 100%; height: 50px; margin: -20px 0 50px 0; 
background-image: linear-gradient(#4F4F4F00, #F4F4F410 66%, #4F4F4F00); mix-blend-mode: lighten; }






/* Instagram Linkin Bio */

.linkinbio_base { display: inline-block; position: relative; width: 98vw; max-width: 700px; margin: 1vw; border-radius: 15px; 
background-image: linear-gradient(white, white 60px, var(--gradient_edge_white) 100px, white 110px, white);
filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.7)); }

.linkinbio_img { display: block; float: left; width: 33vw; height: 33vw; max-width: 230px; max-height: 230px; margin: 10px 20px 20px 10px; z-index: 4; background-repeat: no-repeat; background-size: contain; background-position: center top; background-image: url(graphics/insta_hover.svg); }

.linkinbio_img_layer { position: absolute; left: 10px; top: 10px; width: 33vw; height: 33vw; max-width: 230px; max-height: 230px; z-index: 5; background-repeat: no-repeat; background-size: 200%; 
background-image: url(graphics/insta_hover.svg); background-position: center; opacity: 0.0; animation: 1s; }
.linkinbio_img_layer:hover { opacity: 0.8; background-size: 100%; transition: 1s;}

.linkinbio_date { display: block; float: left; width: calc(60vw - 30px); max-width: 435px; margin-top: 10px; z-index: 5;
									font-family: 'Gidolinya-Regular'; color: var(--color_font_dark); font-size: 1.5em; line-height: 2em; letter-spacing: 0.02em;  }

.linkinbio_title { display: block; float: left; width: calc(60vw - 30px); max-width: 435px; margin-top: -5px; z-index: 5;
									font-family: 'Gidolinya-Regular'; color: var(--color_font_dark); font-size: 2.5em; line-height: 1.2em; letter-spacing: 0.02em;  }

.linkinbio_link { display: block; width: calc(97vw - 40px); max-width: 650px; height: 40px; z-index: 5; padding: 0 15px 0 15px; margin: 10px 0.5vw 15px 0.5vw; background-color: var(--color_grey_1); border-radius: 20px;
									vertical-align: middle; text-align: center; font-family: 'Gidolinya-Regular'; color: var(--color_font_dark); font-size: 1.8em; line-height: 2em; letter-spacing: 0.02em; white-space: nowrap;
									overflow: hidden; text-overflow: ellipsis; transition: 0.2s; }
.linkinbio_link:hover { background-color: var(--color_blue_1); color: white; transition: 0.2s; }

@media (max-width: 1080px) { 
.linkinbio_base {
	max-width: 95vw;
	width: 95vw;
	border-radius: 3vw;
	margin: 2vw 1vw 2vw 1vw;
	background-image: linear-gradient(white, white 35.5vw, var(--gradient_edge_white) 38.5vw, white 39.2vw, white);
}

.linkinbio_img {
	max-width: 33vw;
	max-height: 33vw;
	margin: 2vw 3vw 7vw 2vw;
}

.linkinbio_date { font-size: 3em; max-width: calc(65vw - 95px); width: calc(65vw - 95px); }

.linkinbio_title {
	font-size: 4em;
	max-width: calc(65vw - 95px);
	width: calc(65vw - 95px);
}

.linkinbio_link {
	font-size: 3.5em;
	height: 2em;
	width: 87vw;
	max-width: 87vw;
	border-radius: 1em;
	padding: 0 0.5em 0 0.5em;
	margin: 0vw 2vw 2vw 2vw;
}

}

@media (min-width: 1921px) {
	
.linkinbio_base {
	max-width: 40vw;
	margin: 1vw;
	border-radius: 1vw;
	background-image: linear-gradient(white, white 4vw, var(--gradient_edge_white) 6vw, white 6.3vw, white);
	-moz-box-shadow: 2px 2px 9px .555;
	-webkit-box-shadow: 2px 2px 9px .555;
	box-shadow: 2px 2px 9px .555;
}

.linkinbio_title {
	width: calc(55vw - 30px);
	max-width: 20vw;
	margin-top: 0.3vw;
	font-size: 1.5vw;
}

.linkinbio_img {
	max-width: 15vw;
	max-height: 15vw;
	margin: 1vw;
}

.linkinbio_date {
	max-width: 23vw;
	margin-top: 1vw;
	font-size: 1.2vw;
	line-height: 1em;
	letter-spacing: 0.02em;
}

.linkinbio_link {
	width: 38vw;
	max-width: 38vw;
	height: 2em;
	padding: 0;
	margin: 1vw;
	border-radius: 1em;
	text-align: center;
	font-size: 1.1vw;
	line-height: 2em;
}

	
}


.description_dot { position: relative; left: calc(50% - 150px); top: -300px; width: 300px; height: 300px; z-index: 2; border-radius: 300px; background-color: black; mix-blend-mode: multiply; opacity: 15% }

.linkbutton, .linkbutton_action, #bar_start1_button, #bar_start2_button, #bar_start3_button 
{ display: inline-block; clear: both; margin: 2em auto; text-align: center; padding: 0.3em 0.9em; border: solid 0.15em white; border-radius: 3em; z-index: 5;
font-family: 'Gidolinya-Regular'; font-size: 1.3rem; text-decoration: none; animation: linkbutton_out 0.2s; animation-timing-function: linear; animation-fill-mode: forwards; }

.linkbutton_action
{ animation: linkbutton_action 1.5s infinite; animation-timing-function: ease-in-out; animation-fill-mode: forwards; font-size: 2.0rem; }

.linkbutton:hover, .linkbutton_action:hover, #bar_start1_button:hover, #bar_start2_button:hover, #bar_start3_button:hover 
{ animation: linkbutton_in 0.3s; animation-timing-function: ease-in-out; animation-fill-mode: forwards; text-decoration: none; }

.linkbutton_insta { display: block; clear: both; width: 60vw; margin: 1em auto; text-align: center; padding: 0.3em 0.9em; border: solid 0.15em white; border-radius: 3em; z-index: 5;
font-family: 'Gidolinya-Regular'; font-size: 3rem; text-decoration: none; }

@media (min-width: 1081px) {
	.linkbutton_insta { display: none; }
}

.scrollbutton, .scrollbutton_titlepic { display: inline-block; margin-left: 0vw; margin-top: 0vw; width: 3vw; height: 2vw; border: solid 0.2vw white; border-radius: 10em; 
background-repeat: no-repeat; background-size: 2vw 2vw; background-image: url(graphics/scrollbutton_arrow.svg); background-position: center;
animation: linkbutton_out 0.2s; animation-timing-function: linear; animation-fill-mode: forwards;  }

.scrollbutton:hover, .scrollbutton_titlepic:hover { animation: linkbutton_in 0.3s; animation-timing-function: ease-in-out; animation-fill-mode: forwards; text-decoration: none; }

.scrollbutton_titlepic { position: absolute; left: 48.5vw; bottom: 1.5vw; }

@media (max-width: 1080px) { 
.scrollbutton { display: none; width: 12vw; height: 8vw; background-size: 8vw 8vw; border-width: 0.5vw; }
.scrollbutton_titlepic {
	position: absolute;
	left: 41vw;
	bottom: 6vw;
	width: 18vw;
	height: 6vw;
	/* margin: 0 auto; */
	/* display: block; */
	border: solid 0.5vw white;
	background-size: 6vw 6vw;
	animation: none;
}

.scrollbutton_titlepic:hover { animation: none; }

.linkbutton, #bar_start1_button, #bar_start2_button, #bar_start3_button { font-size: 2.5rem; }
.linkbutton_action { font-size: 4rem; }
}

@media (min-width: 1921px) {
	.linkbutton, .linkbutton_action { font-size: 1.1vw; }
	
}

@keyframes linkbutton_in {
  0% 		{ padding: 0.3em 0.9em; margin: 2em 0;  }  
  80% 		{ padding: 0.5em 1.1em; margin: 1.8em -0.2em; }
  100% 	{ padding: 0.4em 1.0em; margin: 1.9em -0.1em; }
}

@keyframes linkbutton_out {
  0% 		{ padding: 0.4em 1.0em; margin: 1.9em -0.1em; }
  70% 		{ padding: 0.4em 1.0em; margin: 1.9em -0.1em; }
  100% 	{ padding: 0.3em 0.9em; margin: 2em 0;  }  
}

@keyframes linkbutton_action {
  0% 		{ padding: 0.3em 0.9em; margin: 2em 0;  }  
  80% 		{ padding: 0.3em 0.9em; margin: 2em 0;  }  
  90% 		{ padding: 0.5em 1.1em; margin: 1.8em -0.2em; }
  100% 	{ padding: 0.3em 0.9em; margin: 2em 0;  }  
}


/* Header */

.header { display: block; left: 0; top: 0; width: 100%; height: 103px; position: sticky; z-index: 10; background-color: transparent; }

.header_element { position: absolute; left: 0; top: 0; width: 100%; filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.7)); z-index: 2; }

.header_element1 { display: block; float: left; width: 280px; height: 100px; background-color: white; }
.header_element2_mobile { display: none; float: left; width: 200px; height: 100px; margin: 0 -1px; }
.header_element2_desktop { display: block; float: left; width: 200px; height: 100px; }
.header_element3 { display: block; float: left; width: calc(100% - 480px); height: 40px; background-color: white; }
 
.header_logo { position: absolute; width: 330px; height: 90px; margin: 5px 20px 30px 25px; z-index: 10; background-image: url("graphics/logo_peakpick_peaky1.svg"); background-size: contain; background-repeat: no-repeat; background-position: center; }

.header_logo_animation {
	position: absolute;
	width: 69px;
	height: 69px;
	left: 189px;
	top: 5px;
	z-index: 11;
	background-image: url("graphics/peakylogo_animation.gif");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.header_links { position: absolute; display: table; top: 10px; right: 20px; width: auto; z-index: 10; text-align: right; font-family: 'Gidolinya-Regular'; color: #FFFFFF; font-size: 2.2em; letter-spacing: 0.05em; }
.header_links a { /*position: relative;*/ display: table-cell; height: 87px; vertical-align: bottom; padding: 0 25px 0 25px; background: transparent; background-size: 0; background-repeat: no-repeat; background-position: top center; z-index: 5; }
.header_links a:hover { background-size: 198px; text-decoration: none; }

.header_links_line { position: relative; top: 66px; left: 0px; width: 100%; height: 3px; border-top: solid 2px var(--color_grey_2); z-index: 1; }

.header_stickybackground {
	position: sticky;
	left: 0;
	top: 0;
	margin-top: -6vw;
	margin-bottom: 2vw;
	width: 100%;
	height: 100px;
	z-index: 6;
	background-image: linear-gradient(90deg, var(--gradient1_1), var(--gradient1_2));
	background-size: 100% 100%;
	background-repeat: no-repeat;

}

.spacer_top { display: inline-block; width: 100%; height: 100px; }

@media (max-width: 1080px) {	

.header_element1 { width: 280px; height: 130px; }
.header_element2_mobile { display: block; }
.header_element2_desktop { display: none; }
.header_element3 { width: calc(100% - 478px); height: 30px; }

.header_logo {
	width: 310px;
	height: 110px;
	margin: 10px 20px 20px 12px;
	background-image: url("graphics/logo_peakpick_dark.svg");
}

.header_logo_animation { display: none; }

.header_links { display: none; }
.header_links_line { display: none; }

.header_stickybackground  { height: 0px; }

.spacer_top { height: 200px; }

}

@media (min-width: 1921px) {

.header { height: 6vw; position: sticky; z-index: 10; background-color: transparent; }

.header_element { position: absolute; left: 0; top: 0; width: 100%; filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.7)); z-index: 2; }

.header_element1 { width: 16vw; height: 6vw; }
.header_element2_desktop { width: 12vw; height: 6vw; }
.header_element3 { display: block; float: left; width: 72vw; height: 2.4vw; margin-left: -1px;  }

.header_logo {
	width: 19vw;
	height: 6vw;
	margin: 0.1vw 0vw 0vw 1vw;
}

.header_logo_animation {
	width: 4vw;
	height: 4vw;
	left: 10.45vw;
	top: 0.48vw;
}

.header_links {
	top: 0.6vw;
	right: 1.5vw;
	width: auto;
	z-index: 10;
	font-size: 1.5vw;
	letter-spacing: 0.05vw;
}

.header_links a {
	height: 5.3vw;
	padding: 0 1vw 0 1vw;
	background-size: 0; 
}

.header_links a:hover { background-size: 12vw; }



.header_links_line {
	top: 4vw;
	left: 0px;
	height: 3vw;
	border-top: solid 0.14vw var(--color_grey_2);
}

.header_stickybackground {
	height: 6vw;
}

.spacer_top { height: 5vw; }

}	


/* Dropdown Menu */

.dropdown { position: absolute; right: 30px; top: 50px; width: 70px; height: 70px; background-image: url(graphics/menu_button1.svg); background-size: 100%; border: none; z-index: 8; }

.dropdown-content { display: none; position: absolute; right: -30px; top: -50px; width: 100vw; padding-top: 200px; padding-bottom: 20px; background: var(--color_grey_2); opacity: 1.0; z-index: 2; filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.7));}

.dropdown-content .menu_element { display: block; width: 100vw; height: 12vw;
text-transform: uppercase; font-family: 'Gidolinya-Regular'; font-style: normal; text-decoration: none; color:var(--color_font_white); font-size: 6vw; text-align:center; }

.dropdown-content .menu_element:hover { color: var(--color_green_1); }

.dropdown:hover .dropdown-content { display: block; }

.dropdown .menu_buttons {
	display: inline-block;
	width: 8.5vw;
	height: 8.5vw;
	margin: 0vw 3vw 3vw 3vw;
}

.dropdown .edge {
	display: inline-block;
	width: 100%;
	height: 6vw;
	text-align: center;
	background-image: linear-gradient(0deg,#4F4F4F00 , #404040 80%, #4F4F4F00);
}

@media (min-width: 1081px) {

.dropdown { display: none; }

}



/* Bilder */

.titlepic { position: relative; display: block; width: 100%; height: 100vh; z-index: 5; 
background-size: cover; background-position: right bottom; background-repeat: no-repeat; background-attachment: fixed; background-image: url(img/titlepic_006.webp);
/*filter: drop-shadow(-1px 3px 3px rgba(50, 50, 0, 0.3)); */}

.titlepic_scrolllayer { width: 100%; height: 100vh; z-index: 5; 
background-size: cover; background-position: right bottom; background-repeat: no-repeat; }

.slidepic { display: block; width: 100%; height: 20vw; z-index: 5; 
background-size: 100%; background-position: center top; background-repeat: no-repeat; background-attachment: fixed;
/*filter: drop-shadow(-1px 3px 3px rgba(50, 50, 0, 0.3)); */}

.fullpic { display: block; width: 100%; height: 25vw; z-index: 5; 
background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: scroll;
filter: drop-shadow(-1px 3px 3px rgba(50, 50, 0, 0.3)); }

.titlepic_line1, .titlepic_line2, .titlepic_line3 {
	display: inline-block;
	margin-top: 4vw;
	margin-left: 4vw;
	padding: 0.2vw 0.6vw;
	background-color: var(--color_grey_2);
	font-family: 'Gidolinya-Regular';
	color: var(--color_font_white);
	font-size: 2.8vw;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	transform: skewx(-10deg);
	filter: drop-shadow(3px 3px 3px rgba(50, 50, 0, 0.5));
}

.titlepic_line2 { margin-top: 0.8vw; margin-left: 13vw; }
.titlepic_line3 { margin-top: 0.8vw; margin-left: 20vw; }

.titlepic_text {
	position: absolute;
	display: block;
	left: 3vw;
	bottom: 6vw;
	width: 38vw;
	margin-top: 10vw;
	margin-left: 3vw;
	font-family: 'Gidolinya-Regular';
	color: var(--color_font_white);
	font-size: 1.7vw;
	line-height: 1.2em;
	letter-spacing: 0.02em;
	filter: drop-shadow(0px 0px 1vw rgba(50, 50, 0, 0.5));
}


@media (max-width: 1080px) {	

.titlepic {
	height: 100vh;
	background-size: cover;
	background-position: center bottom;
	background-attachment: fixed;
	background-image: url(img/titlepic_005_mobile.webp);
}

.titlepic_scrolllayer { height: 40vh; background-size: 120%; background-position: top right; background-attachment: scroll; }

.titlepic_line1, .titlepic_line2, .titlepic_line3 { margin-left: 6vw; margin-top: 12vw; font-size: 6.5vw; }
.titlepic_line2 { margin-top: 1.0vw; margin-left: 9.5vw;  }
.titlepic_line3 { margin-top: 1.0vw; margin-left: 13vw;  }

.titlepic_text {
	display: block;
	bottom: 20vw;
	width: 90vw;
	margin-left: 2vw;
	font-size: 5vw;
	line-height: 1.2em;
}

.slidepic {
	height: 30vh;
	background-size: 180vw;
	margin-bottom: -10vw;
	background-position: top;
}
.fullpic { height: 450px; background-size: 120vw;}

}


/* Footer */

.bubble_newsletter { display: none; width: 230px; height: 150px; margin: 0 auto -10px auto; background-size: contain; background-repeat: no-repeat; background-position: center; background-image: url('graphics/bubble_newsletter.svg') }
@media (max-width: 1080px) { 
.bubble_newsletter { width: 400px; height: 250px; }
 }

.iframe_footer { position: relative; width: 100%; height: 105rem; margin: 50px 0 0 0; background-color: #4F4F4F; z-index: 8;
 									-moz-box-shadow: 		2px 2px 9px #555;
									-webkit-box-shadow: 	2px 2px 9px #555;
									box-shadow: 					0px 0px 10px #00000080;
 }

.footer_edge { display: inline-block; width: 100%; height: 6vw; text-align: center; margin-top: 12vw; background-image: linear-gradient(#4F4F4F00 , #404040 80%, #4F4F4F00); }
.footer_icon { display: inline-block; vertical-align: middle; width: 10vw; height: 10vw; margin: -10vw 2vw 0 2vw; background-size: contain; background-position: center; background-repeat: no-repeat; transform: scale(0.85); transition: ease-in-out; }
.footer_icon:hover {transform: scale(0.9); animation: test 0.2s ease-in-out; }
.footer_mail { display: inline-block; vertical-align: middle; height: 12vw; margin: 1vw 2vw 0 2vw;
						font-family: 'Gidolinya-Regular'; color: #FFFFFF; font-size: 6vw; line-height: 2.8em; letter-spacing: 0.02em; transform: scale(0.85); transition: ease-in-out; }
.footer_mail:hover { transform: scale(0.9); animation: test 0.2s ease-in-out; }

@keyframes test {
  0% 			{ transform: scale(0.85); }  
  80% 		{ transform: scale(1.0); }
  100% 		{ transform: scale(0.9);  }
}

.footer_logo { display: inline-block; text-align: left; width: 100%; height:15vw; margin-top: 12vw; background-image: url(graphics/logo_peakpick_white.svg); background-position: center; background-size: contain; background-repeat: no-repeat; }

.footer_index { display: inline-block; width: 49%; text-align: center; vertical-align: top; margin-top: 10vw; margin-bottom: 10vw; font-family: 'Gidolinya-Regular'; font-size: 5vw; line-height: 2em; letter-spacing: 0.02em; }

.footer_link { color: #FFFFFF; }
.footer_link:hover  { color: var(--color_text_green);  }


.footer_partners_area { text-align: center; background-color: white;  filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.8)); }

.footer_partners { display: inline-block; text-align: center; vertical-align: middle; width: 45vw; height:32vw; margin-top: 2vw; 
font-family: 'Gidolinya-Regular'; color: var(color_font_dark); font-size: 5vw; line-height: 15vw; background-position: center; background-size: contain; background-repeat: no-repeat; }

.footer_partners_wide { display: inline-block; text-align: center; vertical-align: middle; width: 74vw; height:20vw; margin-top: 2vw; 
font-family: 'Gidolinya-Regular'; color: var(--color_font_dark); font-size: 5vw; line-height: 20vw; background-position: center; background-size: contain; background-repeat: no-repeat; }

.footer_partners, .footer_partners_wide { filter: grayscale(0); }
.footer_partners:hover, .footer_partners_wide:hover { filter: grayscale(0); }

.footer_bottomline_left { display: block; margin-left: 10vw; width: 80vw; margin-bottom: 5vw; text-align: center; font-family: 'Gidolinya-Regular'; color: #909090; font-size: 3.7vw; }
.footer_bottomline_right { display: block; margin-left: 10vw; width: 80vw; margin-bottom: 5vw; text-align: center; font-family: 'Gidolinya-Regular'; color: #909090; font-size: 3.7vw; }

.footer_award {
	display: block;
	float: right;
	width: 48vw;
	height: 12vw;
	margin: 1vw 0 7vw 2vw;
	padding: 3vw 3vw 0vw 40vw;
	border-radius: 8vw 0 0 8vw;
	background: white;
	background-image: url(graphics/logo_bpe.png);
	background-position: left;
	background-repeat: no-repeat;
	background-size: contain;
	font-family: 'Gidolinya-Regular';
	font-size: 4vw;
	text-align: right;
	line-height: 1.2em;
	letter-spacing: 0.02em;
	color: var(--color_font_dark);
}


@media (min-width: 1081px) {
.iframe_footer { height: 260px; }
.footer_edge { height: 70px; text-align: right; margin-top: 15px; }
.footer_icon { width: 50px; height: 50px; margin: -10px 5px 0 5px; }
.footer_mail { height: 50px; margin: 5px 2vw 0 10px; font-size: 2em; line-height: 1.5em; }
.footer_logo { width: 150px; height:70px; margin: 20px 70px 20px 50px;  }
.footer_index_area { display: block; width: 100vw; padding-bottom: 2rem; }
.footer_index { width: 150px; text-align: left; margin: 20px 10px 20px 10px; font-size: 1.5em; line-height: 1.5em; }
.footer_partners_area { text-align: right; width: 96vw; padding: 1vw 2vw;}
.footer_partners { width: 110px; height: 110px; margin-left: 2vw; margin-top: 0; text-align: right; font-size: 1.5em; line-height: 2em; }
.footer_partners_wide { width: 230px; height: 110px; margin-left: 2vw; margin-top: 0; text-align: right; font-size: 1.5em; line-height: 2em; }

.footer_bottomline_left { width: 85vw; float: left; font-size: 1.4em; text-align: left; margin: 0 0 1vw 2.5vw; }
.footer_bottomline_right { width: 10vw; float: right; font-size: 1.4em; text-align: right; margin: 0 2.5vw 1vw 0; }

.footer_partners, .footer_partners_wide { filter: grayscale(1); transition: 0.4s; }
.footer_partners:hover, .footer_partners_wide:hover { filter: grayscale(0); transition: 0.2s; }

.footer_award {
	width: 12vw;
	height: 3vw;
	margin: 2vw 0 0vw 2vw;
	padding: 0.8vw 2.5vw 0vw 10vw;
	border-radius: 8vw 0 0 8vw;
	font-size: 1vw;
}



}

@media (min-width: 1921px) {
.iframe_footer { height: 27vw; }
.footer_icon { width: 3vw; height: 3vw; margin: 0.5vw 0.5vw 0 0.5vw; }
.footer_mail { font-size: 1.6vw; line-height: 1.2em; }
.footer_edge { height: 4.4vw; margin-top: 0vw; }
.footer_logo { width: 10vw;	height: 4vw; margin: 1vw 3vw 2vw 2vw;}
.footer_index {	width: 10vw; margin: 1vw 1vw 2vw 1vw; font-size: 1.1vw; }
.footer_partners_area { text-align: right; margin-right: 1vw; }
.footer_partners { width: 8vw; height: 8vw; margin-left: 2vw; margin-top: 0; text-align: right; font-size: 1.5vw; line-height: 2em; }
.footer_partners_wide { width: 17vw; height: 8vw; margin-left: 2vw; margin-top: 0; text-align: right; font-size: 1.5vw; line-height: 2em; }

.footer_bottomline_left { font-size: 1.0vw; margin: 0 0 1vw 1.5vw; }
.footer_bottomline_right { font-size: 1.0vw; margin: 0 1.5vw 1vw 0; }

.footer_partners, .footer_partners_wide { filter: grayscale(1); transition: 0.4s; }
.footer_partners:hover, .footer_partners_wide:hover { filter: grayscale(0); transition: 0.2s; }

}


/* Seitenspezifische Inhalte */

.impressum { display: inline-block; width: 92vw; font-size: 3.5em; line-height: 1.3em; text-align: justify; vertical-align: top; margin: 0 0 2em 0;
 text-align: justify; font-family: 'Gidole-Regular'; color: #FFFFFF;
 -ms-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto; }

@media (min-width: 1081px) {
		.impressum { width: 49vw; max-width: 600px; padding: 0 4vw; font-size: 1.3rem; }
	}

@media (min-width: 1921px) {
		.impressum {	width: 40vw; max-width: 40vw; padding: 0 4vw; font-size: 1.2vw; }
	}

/* Fragen-Bubbles */

.faq { display: block; position: relative; width: 450px; height: 450px; margin: 0 1vw -2vw 1vw; text-align: center; }

#faq1, #faq2, #faq3, #faq4, #faq5 { display: none; }
.faq_dot1, .faq_dot2, .faq_dot3, .faq_dot4, .faq_dot5 { display: block; width: 280px; height: 280px; margin: 0 auto; animation: faq_dot 0.5s;
background-image: url(graphics/dot.svg); background-position: center; background-repeat: no-repeat; background-size: contain; }

.faq_icon1, .faq_icon2, .faq_icon3, .faq_icon4, .faq_icon5 
{ display: block; width: 160px; height: 160px; margin: -315px auto 10px auto; background-position: center; background-repeat: no-repeat; background-size: contain; filter: drop-shadow(0.5vw 0.5vw 1.5vw rgba(0, 0, 0, 0.3)); }

.faq_question1, .faq_question2, .faq_question3, .faq_question4, .faq_question5 { display: block; padding: 0 30px; margin-bottom: 15px; font-style: oblique 10deg; }
.faq_answer1, .faq_answer2, .faq_answer3, .faq_answer4, .faq_answer5 { display: none; margin: 0 0 0 0; margin-top: -400px; width: 450px; height: 350px; }
.faq_answer_center { display: table-cell; height: 400px; vertical-align: middle; }

.faq_toggle { display: block; margin: 0 auto; width: 30px; height: 30px; background-image: url(graphics/arrow_down.svg); background-position: center; background-repeat: no-repeat; background-size: contain; transition: 0.4s; }

.faq_toggle:hover { transform: translateY(5px); transition: 0.4s; } 

#faq1:checked ~ .faq_answer1 { display: block; } 
#faq1:checked ~ .faq_question1 { display: none; } 
#faq1:checked ~ .faq_dot1 { width: 360px; height: 360px; animation: faq_dot_exp 0.5s; } 
#faq1:checked ~ .faq_icon1 { display: none; } 

#faq2:checked ~ .faq_answer2 { display: block; } 
#faq2:checked ~ .faq_question2 { display: none; } 
#faq2:checked ~ .faq_dot2 { width: 360px; height: 360px; animation: faq_dot_exp 0.5s; } 
#faq2:checked ~ .faq_icon2 { display: none; } 

#faq3:checked ~ .faq_answer3 { display: block; } 
#faq3:checked ~ .faq_question3 { display: none; } 
#faq3:checked ~ .faq_dot3 { width: 360px; height: 360px; animation: faq_dot_exp 0.5s; } 
#faq3:checked ~ .faq_icon3 { display: none; } 

#faq4:checked ~ .faq_answer4 { display: block; } 
#faq4:checked ~ .faq_question4 { display: none; } 
#faq4:checked ~ .faq_dot4 { width: 360px; height: 360px; animation: faq_dot_exp 0.5s; } 
#faq4:checked ~ .faq_icon4 { display: none; } 

#faq5:checked ~ .faq_answer5 { display: block; } 
#faq5:checked ~ .faq_question5 { display: none; } 
#faq5:checked ~ .faq_dot5 { width: 360px; height: 360px; animation: faq_dot_exp 0.5s; } 
#faq5:checked ~ .faq_icon5 { display: none; } 


@keyframes faq_dot_exp {
  0% 		{ width: 280px; height: 280px; margin-bottom: 120px;  }
  100% 	{ width: 360px; height: 360px; margin-bottom: 0px;  }
}

@keyframes faq_dot {
  0% 			{ width: 360px; height: 360px; }
  100% 		{ width: 280px; height: 280px;  }
}

@media (max-width: 1080px) {

.faq { width: 95vw; height: 65vw; margin: 4vw auto 4vw auto; font-size: 3rem;  }
.faq_dot1, .faq_dot2, .faq_dot3, .faq_dot4, .faq_dot5 { width: 50vw; height: 50vw; }
.faq_icon1, .faq_icon2, .faq_icon3, .faq_icon4, .faq_icon5 { width: 25vw; height: 25vw; margin: -54vw auto 1vw auto; }
.faq_toggle { margin: 0 auto; width: 8vw; height: 8vw; }
.faq_question1, .faq_question2, .faq_question3, .faq_question4, .faq_question5 { margin: 3vw auto 0 auto; width: 70vw; font-style: oblique 10deg; }

.faq_answer1, .faq_answer2, .faq_answer3, .faq_answer4, .faq_answer5 { margin: 0 auto; margin-top: -60vw; width: 80vw; height: 50vw; }
.faq_answer_center { height: 50vw; }

#faq1:checked ~ .faq_dot1 { width: 60vw; height: 60vw; } 
#faq2:checked ~ .faq_dot2 { width: 60vw; height: 60vw; } 
#faq3:checked ~ .faq_dot3 { width: 60vw; height: 60vw; } 
#faq4:checked ~ .faq_dot4 { width: 60vw; height: 60vw; } 
#faq5:checked ~ .faq_dot5 { width: 60vw; height: 60vw; } 

@keyframes faq_dot_exp {
  0% 		{ width: 50vw; height: 50vw; margin-bottom: 10vw; }
  100% 	{ width: 60vw; height: 60vw; margin-bottom: 0px;  }
}

@keyframes faq_dot {
  0% 			{ width: 60vw; height: 60vw; }
  100% 		{ width: 50vw; height: 50vw;  }
}

}

@media (min-width: 1921px) {

.faq {
	width: 25vw;
	height: 25vw;
	margin: 0 1vw -2vw 1vw;
}

.faq_dot1, .faq_dot2, .faq_dot3, .faq_dot4, .faq_dot5 { display: block; width: 15vw; height: 15vw; }

#faq1:checked ~ .faq_dot1 { width: 22vw; height: 22vw; } 
#faq2:checked ~ .faq_dot2 { width: 22vw; height: 22vw; } 
#faq3:checked ~ .faq_dot3 { width: 22vw; height: 22vw; } 
#faq4:checked ~ .faq_dot4 { width: 22vw; height: 22vw; } 
#faq5:checked ~ .faq_dot5 { width: 22vw; height: 22vw; } 

.faq_icon1, .faq_icon2, .faq_icon3, .faq_icon4, .faq_icon5 
{ width: 8vw; height: 8vw; margin: -17vw auto 10px auto; }

.faq_answer1, .faq_answer2, .faq_answer3, .faq_answer4, .faq_answer5 { margin-top: -20vw; width: 25vw; height: 17vw; }
.faq_answer_center { height: 15vw; }

.faq_toggle { width: 2vw; height: 2vw; }

@keyframes faq_dot_exp {
  0% 		{ width: 15vw; height: 15vw; margin-bottom: 10vw; }
  100% 	{ width: 22vw; height: 22vw; margin-bottom: 0px;  }
}

@keyframes faq_dot {
  0% 			{ width: 22vw; height: 22vw; }
  100% 		{ width: 15vw; height: 15vw;  }


}



</style>

</head>
</html>