@charset "UTF-8";


@font-face {
   font-family: "RobotoCondensed-Bold";
   src: url("../fonts/RobotoCondensed-Bold.ttf");}
@font-face {
   font-family: "RobotoCondensed-Light";
   src: url("../fonts/RobotoCondensed-Light.ttf");}
@font-face {
    font-family: "RobotoCondensed-Regular";
    src: url("../fonts/RobotoCondensed-Regular.ttf");}


:root{
	--layout_line:                							 0px;
	--layout_opacity:               						   1;
	
	
/*__FONTS */        
    --font_light:          'RobotoCondensed-Light',   sans-serif;
    --font_regular:        'RobotoCondensed-Regular', sans-serif;
    --font_bold:           'RobotoCondensed-Bold',    sans-serif;
/*__END of fonts */  
	
	
/*__TEXT */ 
    --headline__text__letter_spacing: 					 0.03rem;
	--headline__font_size: 								 1.60rem; 
	--headline__font_family:	 			 var(--font_regular);
    --headline__text__line_height: 						 2.80rem; 
   	--body__font_size: 									 1.60rem;  
    --body__text__line_height: 							 2.90rem;
    --body__text__letter_spacing: 						 0.03rem;
	--menu__font_size: 									 1.20rem;
    --menu__text__letter_spacing: 					 	 0.06rem;  
	--menu__gap: 										 	30px;	
	--logo__font_size: 									 2.50rem;
	--logo__letter_spacing: 							 0.06rem;
	--imprint__font_size: 								 1.20rem;
/*__END of text */   	
	
	
/*__Z-INDEX */
    --z_index_flys_in_from_right_menu:                     40000;
    --z_index_flys_in_from_right_menu_horizontal_lines:    10000;
    --z_index_flys_in_from_right_menu_square_behind_menu_x: 9999; 
    --z_index_flys_in_from_right_menu_menu_list_items:      9998;    
    --z_index_flys_in_from_right_menu_drop_down_box:        2000;
	--z_index__head_container: 								1999;	
    --z_index_button:                                         90;   
/*__END of z-index */   	
	
	
/*__PADDING */    
	--dynamic_padding: 	   									15px;
    --padding_tiny:         								 5px;
    --padding_small:       									10px;
    --padding_normal:      									15px;
    --padding_medium:      									30px; 
    --padding_large:       									45px;
    --padding_extra_large: 									60px;
/*__END of padding */   	
	 	
	
/*__TRANSITION TIMES */        
	--transition_time_font: 							   875ms; 	
	--transition_time_hoover_effect_for_links: 			   330ms;	
	--accordion_transition_time: 						   750ms;
	--accordion_open_close: 	                          cubic-bezier(0.25, 1, 0, 1);	
	
    --transition_time_color_mode:             			  1000ms;  
    --transition_time_padding:     						   875ms; 
    --logo_repositioning_transition-timing-function:      cubic-bezier(0.00, 0.975, 0.99, 1);
    --logo_repositioning_transition-duration: 			   875ms;    
/*__END of transition times */  	
	
	
/*__CUBIC BEZIR */  	
	--accordion_open_close: 		                      cubic-bezier(0.4, 0, 0.3, 1);	
	--main_cubic_bezir: 	 		                      cubic-bezier(0.4, 0, 0.3, 1);	
/*__END of cubic bezir */	
	
	
	
    --color_mode_01: rgba( 28,  28,  28, 1.0);
    --color_mode_02: rgba(255, 255, 255, 1.0);
	--color_mode_03: rgba(255, 255, 251, 1.0);
	--color_mode_04: rgba( 28,  28,  28, 0.1); 
	--color_mode_05: rgba(225, 225, 225, 1.0); } 

.darkmode {
    --color_mode_01: rgba(255, 255, 255, 1.0);
    --color_mode_02: rgba( 35,  35,  35, 1.0);
	--color_mode_03: rgba( 28,  28,  28, 1.0);
	--color_mode_04: rgba( 28,  28,  28, 1.0); 
	--color_mode_05: rgba( 90,  90,  90, 1.0); }


*{	
	margin: 						0;
	padding: 						0;	
	box-sizing: 					border-box;					
	-webkit-text-size-adjust: 		100%;
	user-select:         			none; 						/* -- text cannot be copied -- */
	-webkit-user-select: 			none; 						/* -- text cannot be copied -- */
    -moz-user-select:    			none; 						/* -- text cannot be copied -- */
    -ms-user-select:     			none; 						/* -- text cannot be copied -- */
	-moz-tap-highlight-color: 		rgba(0,0,0,0) !important;	/* -- disables tap-highlight for Firefox and Android ... "!important" overwrites another "!important" that firefox uses by default -- */
	-webkit-tap-highlight-color: 	transparent;				/* -- disables tap-highlight for Safari -- */
    -webkit-font-smoothing:  		antialiased;				/* -- thin fonts look cleaner -- */
	-moz-osx-font-smoothing: 		grayscale;   				/* -- thin fonts look cleaner (Firefox on macOS equivalent) -- */
    webkit-text-size-adjust: 		none;        				/* <-------------------------------------------------------------------------------------------- */
    -moz-text-size-adjust:    		none;        				/* <-- supresses the increase of font-size when mobiles are turned from portrait to landscape -- */
    -ms-text-size-adjust:     		none;}       				/* <-------------------------------------------------------------------------------------------- */

html{
	font-size: 62.5%; /* 1 rem = 10px */
    scroll-behavior:          		smooth;	
} 
body{
	display: 						flex;
	justify-content: 				center;
	align-items: 					center;
    transition: 					background var(--transition_time_color_mode) ease-in-out; 
    text-decoration: 				none;
	background-color: 				var(--color_mode_02);
	background-color: 				var(--color_mode_03);	
}
a{ 
	background-color: 				rgba(0,0,0,0.00);
    cursor: 						pointer;
    color: 							var(--color_mode_01); 
	text-decoration: 				none; 
	text-decoration-color: 			transparent;
	text-decoration-thickness: 		1px;
	text-decoration-line: 			underline;
	transition: 					text-decoration-color 	var(--transition_time_hoover_effect_for_links) 	ease-in-out,
									color 					var(--transition_time_color_mode) 				ease-in-out;
	text-underline-offset: 			5px;
}
.underline{
	text-decoration-color: 			var(--color_mode_05);
	
}
a:hover{
  	text-decoration-color: 			var(--color_mode_05);	
} 
a, a:link, a:visited, a:hover, a:active {
    padding: 						0 !important;}                 
/*  display: 						inline !important; */       /* or inline-block if you need it */
li{ border: 						var(--layout_line) solid cyan;}

ul{
	list-style-type: 				none; 	  /* removes bullets */
    padding: 						0px 0px 0px 15px; /* Remove padding */
    margin: 						0;}       /* removes margins */

.list_with_bullet_points{
    list-style-position: 			outside;       
    list-style-type: 				initial;} 

nav{
	width: 							auto;}

button{
	touch-action:           		manipulation;  	/* -- prevents zoon of the page on double click -- */
	-webkit-tap-highlight-color: 	transparent; 	/* -- removes the (grey, super short) background color flash that appeares when the button is tapped on mobile devices -- */   	
	user-select: 					none;
    -ms-user-select: 				none;
	-moz-user-select: 				none; 			/* -- disables text selection (side effect) -- */
	-webkit-user-select: 			none;}  		/* -- with "user-select:none" text on buttons can not be copied ("selected") ... */
													/* -- this prevents the text from being highlighted when the button is pressed longer -- */	
button:focus{				
	outline: 						transparent;}

button:active{
	outline: 						transparent;}	/* -- "transparent" removes the (grey, super short) background color flash that appeares when the button is tapped on mobile devices -- */
											        /* -- "transparent" (instead of "none") keeps the visibility of "outline" for the case that a user a "high conrast" mode -- */
													/* -- "none" would remove the outline completely --*/

button:active, button:focus {
	outline: 						transparent;}     /* -- "transparent" (instead of "none") keeps the visibility of "outline" for the case that a user a "high conrast" mode ... "none" would remove the outline completely -- */

.button{
    margin: 						0;
    border: 						1px solid var(--color_mode_01);     
    padding: 						10px 30px 10px 30px;
	border-radius: 30px;
    background-color: 				transparent;
	background-color: 				var(--color_mode_02); 	
    color: 							var(--color_mode_01);
    font-family: 					var(--font_light);
    font-size: 						var(--body__font_size);
	letter-spacing: 				0.10rem;
    cursor: 						pointer;
	transition: 					color 				var(--transition_time_color_mode) 	ease-in-out,
									background-color 	var(--transition_time_color_mode) 	ease-in-out,
									border 				var(--transition_time_color_mode) 	ease-in-out;}

.button a {
	text-decoration: none;}










.dynamic_main_container{
	border: 						var(--layout_line) solid red; 
	opacity: 						var(--layout_opacity);
    position: 						absolute;
	top: 							0px;
    width: 							calc(100% - (2 * var(--dynamic_padding)));
	max-width: 						1300px;
	height: 						200vh;
    min-height: 					100vh;
	transition: 					width var(--transition_time_padding) var(--main_cubic_bezir);}	










/*------------------*/
/*-- head section --*/
/*------------------*/
:root{
	--head_container__full_width__height: 		280px;
	--head_container__translateY: 				translateY(calc(-1 * (var(--head_container__full_width__height) - var(--horizontal_menu__height))));
	--menu__font_size: 							1.4rem;	/* will be overwritten by @media */
	--horizontal_menu__height: 	 				68px;
	--navigation__container__border_top: 		1px solid rgba(0,0,0,0.10); }

.head_container__full_width{
	border: 						var(--layout_line) solid green;
	opacity: 						var(--layout_opacity);
	z-index: 						var(--z_index__head_container);
	background: 					var(--color_mode_02);
    position: 						fixed;
	left: 							0px;
	width: 							100%;
	height: 						var(--head_container__full_width__height);
	display: 						flex;
	flex-direction: 				column;
	justify-content: 				center;
	align-items: 					center;
	box-shadow: 					0px 4px 4px rgba(0,0,0,0.07);
	transition: 					background  var(--transition_time_color_mode) ease-in-out,
									transform 	0.5s 							  ease-in-out; }

@media screen and (min-width: 957px){:root {--head_container__full_width__height: 		180px; }}	

.head_container__full_width.hidden {
  	transform: 			var(--head_container__translateY);}	
@media screen and (min-width: 957px){:root {--head_container__translateY: 0px; }}	

.head_container__dynamic{
	border: 						var(--layout_line) solid pink; 
	opacity: 						var(--layout_opacity);
	position: 						absolute;
	display: 						flex;
	flex-direction: 				column;
	justify-content: 				flex-end;
    width: 							calc(100% - (2 * var(--dynamic_padding)));
	max-width: 						1300px;
	height: 						100%;
	transition: 					width var(--transition_time_padding) var(--main_cubic_bezir); }

									 :root {--horizontal_menu__justify_content: flex-start; }
@media screen and (max-width: 956px){:root {--horizontal_menu__justify_content: center; }}
.horizontal_menu {
	padding: 						0;
	border: 						var(--layout_line) solid yellow;	
	color: 							var(--color_mode_01);
	position: 						relative;
	width: 							auto;
	height: 						var(--horizontal_menu__height);
	display: 						flex;
	flex-direction: 				row;
	align-items: 					center;
	justify-content: 				var(--horizontal_menu__justify_content);
	font-family: 					var(--font_light);
	text-transform: 				uppercase;
	font-size: 						var(--menu__font_size);
	letter-spacing: 				var(--menu__text__letter_spacing);
	gap: 							var(--menu__gap);
	transition: 					color 			var(--transition_time_color_mode) 	var(--main_cubic_bezir),
									gap 			var(--transition_time_font) 		var(--main_cubic_bezir),
									letter-spacing 	var(--transition_time_font) 		var(--main_cubic_bezir); }	

@media screen and (max-width: 300px){:root {--menu__font_size: 				0.9rem;
											--menu__gap: 					  10px; }}
@media screen and (min-width: 301px){:root {--menu__font_size: 				1.0rem;
											--menu__gap: 					  10px; }}
@media screen and (min-width: 361px){:root {--menu__font_size: 				1.2rem;
											--menu__gap: 					  14px; }}
@media screen and (min-width: 430px){:root {--menu__font_size: 				1.4rem;
											--menu__gap: 					  15px; }}	
@media screen and (min-width: 580px){:root {--menu__font_size: 				1.6rem;
											--menu__gap: 					  30px; 
											--menu__text__letter_spacing:  0.10rem;
	}}	


									 :root {--line_over_menu__display: none;}
@media screen and (max-width: 956px){:root {--line_over_menu__display: block;}}
.line_over_menu{
	position: 						absolute;
	display: 						var(--line_over_menu__display);;
	bottom: 						var(--horizontal_menu__height);
	left: 							0px;
	width: 							100vw;
	height: 						1px;
	background-color: 				var(--color_mode_04);
	transition:  					background-color var(--transition_time_color_mode) var(--main_cubic_bezir); }

/*-------------------------*/
/*-- END of head section --*/
/*-------------------------*/










/*----------*/
/*-- logo --*/
/*----------*/
:root{
	--logo_top: 					45px;
	--logo_width: 					200px;
	--logo_scaling: 				0.9;
	--logo_right: 					calc(var(--logo_scaling) * 213px);}

@media screen and (max-width: 956px){
:root {--logo_right: calc((0.5 * 100%) + ((var(--logo_scaling) * 213px) * 0.5)); }}	

.logo_gesine_muerling{
	transform: 						scale(var(--logo_scaling));
    border: 						var(--layout_line) solid red;
    position: 						absolute;
	top: 							var(--logo_top);
    right: 							var(--logo_right); /* -- 213px = width of the original logo -- */
    transition: 					right var(--transition_time_padding) ease-in-out;}
.circle {
	background-color: rgba(255,255,240,1.00);
	border-radius: 					50%;
	position: 						absolute;}

#circle_01{background-color: rgba(249, 247, 113, 1);} /* colors at start (are then randomly overwritten with javascript)*/
#circle_02{background-color: rgba(211, 234, 113, 1);}
#circle_03{background-color: rgba(163, 224, 193, 1);}
#circle_04{background-color: rgba(148, 206, 239, 1);}
#circle_05{background-color: rgba(253, 204, 111, 1);}
#circle_06{background-color: rgba(248, 174, 162, 1);}
#circle_07{background-color: rgba(235, 176, 190, 1);}

#circle_01 {top:239px;   left:173px;   z-index:100;   width:425px;   height:425px;}
#circle_02 {top: 97px;   left:240px;   z-index: 90;   width:539px;   height:539px;}
#circle_03 {top: 31px;   left:366px;   z-index: 80;   width:549px;   height:549px;}
#circle_04 {top: 85px;   left:557px;   z-index: 70;   width:422px;   height:422px;}
#circle_05 {top:215px;   left:  0px;   z-index: 60;   width:383px;   height:383px;}
#circle_06 {top: 37px;   left:102px;   z-index: 50;   width:460px;   height:460px;}
#circle_07 {top:  0px;   left:313px;   z-index: 40;   width:370px;   height:370px;}
.brain{
	position: 						absolute;
	z-index: 						2;
	top: 							0px;
	left: 							135px;
	border: 						1px solid red;
	box-sizing: 					border-box;   
	width: 							0px; 
	height: 						0px;
	transform: 						scale(0.08);
	opacity: 						1;}
/* ------------------- */
/* --- END of logo --- */
/* ------------------- */










/*----------*/
/*-- text --*/
/*----------*/
.text_headline{
	font-family: 					var(--headline__font_family);
	font-size: 						var(--headline__font_size);
    line-height: 					var(--headline__text__line_height); /* -- space between headline and the rest text -- */
	letter-spacing: 				var(--headline__text__letter_spacing);
    display: 						block;
    position: 						relative;
    max-width: 						100%;
    height: 						auto;
    text-wrap: 						balance;
    color: 							var(--color_mode_01);
    transition: 					padding 	var(--transition_time_padding) 		ease-in-out,
									font-size 	var(--transition_time_padding) 		ease-in-out,
									color 		var(--transition_time_color_mode) 	ease-in-out; 

/*	font-variant: 					small-caps; */}

/*
.text_headline::first-letter{
	font-variant: 					normal; } */


.text_body{
/*  text-wrap: balance; */
    text-align: 					left;
    color: 							var(--color_mode_01);
    margin: 						0px;
    padding:  						0px 0px 0px 0px;
    font-size: 						var(--body__font_size);
    font-family: 					var(--font_light);
    line-height: 					var(--body__text__line_height);
	letter-spacing: 				var(--body__text__letter_spacing);	
    heigth: 						auto;
    display: 						block;
    transition: 					color 		var(--transition_time_color_mode) 	ease-in-out,
									line-height var(--transition_time_padding) 		ease-in-out; }
/*@media screen and (max-width: 440px){:root {--body__text__line_height: 2.0rem;}} */

.text_body_regular {
	font-family: 					var(--font_regular); }
/*-----------------*/
/*-- END of text --*/
/*-----------------*/









/*-------------*/
/*-- imprint --*/
/*-------------*/	
:root{
	--menu__justify_content: 		center;
	--imprint_container__height: 	40px; }

.imprint__container{
	border: 						var(--layout_line) solid blue;
	background-color: 				var(--color_mode_02);
	box-shadow: 					0px -2px 4px rgba(0,0,0,0.07);
	position: 						fixed;
	bottom: 						0px;	
	left: 							0px;
	width: 							100%;
	height: 						var(--imprint_container__height);
	display: 						flex;
	align-items: 					center;
	justify-content: 				var(--menu__justify_content);
	flex-direction: 				column;
	gap: 							var(--menu__gap);	
	transition: 					background  var(--transition_time_color_mode) ease-in-out; }

.dynamic_imprint_container	{
	border: 						var(--layout_line) solid red; 
	opacity: 						var(--layout_opacity);
	display: 						flex;
	flex-direction: 				row;
	align-items: 					center;
	justify-content: 				var(--menu__justify_content);
    width: 							calc(100% - (2 * var(--dynamic_padding)));
	max-width: 						1300px;
	height: 						100%;
	transition: 					width var(--transition_time_padding) var(--main_cubic_bezir); }
.text_imprint_horizontal {
	border: 						var(--layout_line) solid orange;	
	padding: 						0px 50px;
	height: 						var(--imprint_container__height);
	display: 						flex;
	flex-direction: 				row;
	justify-content: 				var(--menu__justify_content);
	align-items: 					center;
	gap: 							var(--menu__gap);
	font-size: 						var(--imprint__font_size);
	letter-spacing: 				var(--menu__text__letter_spacing);
	line-height:  					var(--body__text__line_height);
	color: 							var(--color_mode_01);
    transition: 					color 		var(--transition_time_color_mode) 	ease-in-out,
									font-size 	var(--transition_time_font) 	ease-in-out; }
.text_imprint{	
	display: 						inline-block;
	border: 						var(--layout_line) solid yellow;
	font-size: 						var(--imprint__font_size);
    font-family: 					var(--font_light);
    line-height: 					0px;
	text-transform: 				uppercase; 
	position: 						relative;
	top: 							0px;
/*	font-variant: 					small-caps; */} 
/* .text_imprint::first-letter{
	font-variant: 					normal;} */
.text_imprint_horizontal a:hover{
  	text-decoration-color: 			var(--color_mode_05); } 
@media screen and (max-width: 390px){:root {--imprint__font_size: 	10px;
											--menu__gap: 			10px; }}
@media screen and (min-width: 957px){:root {--menu__justify_content: 	flex-end; }}
/*--------------------*/
/*-- EMD of imprint --*/
/*--------------------*/










/*----------------------*/
/*-- DARK MODE TOGGLE --*/
/*----------------------*/
.dynamic_dark_mode_toggle_container{
	pointer-events: 	none;
	position: fixed;
	bottom: 0px;
	border: 						var(--layout_line) solid black; 
	opacity: 						var(--layout_opacity);
    width: 							calc(100% - (2 * var(--dynamic_padding)));
	max-width: 						1300px;
	height: 						var(--imprint_container__height);
	transition: 					width var(--transition_time_padding) var(--main_cubic_bezir); }
.dark-mode-toggle {        
/* -- TRANSPARENT FIELD for DARK MODE TOGGLE (bigger than symbol = easier to click) -- */
	border: 						var(--layout_line) solid red;
    display: 						flex;
	position: 						relative;
	bottom: 						0rem;
	margin-right: 					0;
	margin-left: 					auto;
	justify-content: 				center;
	align-items: 					center;
    transition: 					right var(--transition_time_padding) ease-in-out;
    width: 							2.0rem;
    height: 						var(--imprint_container__height);
    background-color: 				transparent;
    cursor: 						pointer;
    pointer-events: 				all; }
.dark-mode-toggle_container_for_size{                         /* -- 1px BLACK OULINE of the dark mode toggle -- */
    display: 						flex;
	position: 						relative;
	top: 							0px;
    border: 						1px solid var(--color_mode_01);
    width: 							3rem;
    height: 						0.9rem;
    transition: 					border      var(--transition_time_color_mode) ease-in-out; }
.dark-mode-toggle_symbol_left{                                /* -- LEFT SIDE of the dark mode toggle -- */
    background-color: 				var(--color_mode_01); 
    flex: 							1;
    transition: 					color 		var(--transition_time_color_mode) ease-in-out,
									background  var(--transition_time_color_mode) ease-in-out; }
.dark-mode-toggle_symbol_right{                               /* -- RIGHT SIDE of the dark mode toggle -- */
    background-color: 				var(--color_mode_02); 
    flex: 							1;
    transition: 					color 		var(--transition_time_color_mode) ease-in-out,
									background  var(--transition_time_color_mode) ease-in-out; }
/*-----------------------------*/
/*-- END of dark mode toggle --*/
/*-----------------------------*/










/* ----------------- */
/* ----------------- */
/* --- ACCORDION --- */
/* ----------------- */
/* ------------__acc */
.accordion_group {
	border: 						var(--layout_line) solid orange;	
    border-bottom: 					1px solid var(--color_mode_01);
	transition: 					border var(--transition_time_color_mode) ease-in-out;
    -webkit-transition: 			border var(--transition_time_color_mode) ease-in-out;
    -o-transition: 					border var(--transition_time_color_mode) ease-in-out; }
.accordion_expandable_section {
	border: 						var(--layout_line) solid blue;	
    border-top: 					1px solid var(--color_mode_01);
    transition: 					border-color var(--transition_time_color_mode) ease-in-out; }
.accordion_header {
	border: 						var(--layout_line) solid green;	
    display: 						flex;
    justify-content: 				space-between;
    align-items: 					center;
    padding: 						0;
    cursor: 						pointer;
    user-select: 					none; }
.accordion_title {
    border: 						var(--layout_line) solid orange;
	display: inline-block;
	padding: 						15px 15px 16px 0px;                        
    color:  						var(--color_mode_01);					
    font-family: 					var(--font_light);     					
    font-size: 						var(--body__font_size);		

	letter-spacing: 				var(--body__text__letter_spacing);
	transition: 					color var(--transition_time_color_mode) ease-in-out;
    -webkit-transition: 			color var(--transition_time_color_mode) ease-in-out;
    -o-transition: 					color var(--transition_time_color_mode) ease-in-out; 
/*	text-transform: 				uppercase; */
/*	font-variant: small-caps;*/
}
/*.accordion_title::first-letter{font-variant: normal;}*/


.accordion_rotating_x {
    flex-shrink: 0;
	border: 						var(--layout_line) solid lightgray;	
	position: 						relative;
	right: 							0;
	width: 							11px;
	height: 						11px;
    transition: 					transform 0.33s ease;	
    -webkit-transition: 			transform 0.33s ease;
    -o-transition: 					transform 0.33s ease; }
.accordion_rotating_x::before,
.accordion_rotating_x::after {
    content: 						"";
    position: 						absolute;
    background: 					var(--color_mode_01);
    transition: 					background var(--transition_time_color_mode) ease-in-out; }
.accordion_rotating_x::before {
	width: 							100%; 
	height: 						1px; 
	top: 							5px; 
	left: 							0;
	transition: 					transform 	0.33s 	ease, 
									background 	var(--transition_time_color_mode) ease-in-out; }
.accordion_rotating_x::after  {
	width: 							1px; 
	height: 						100%; 
	top: 							0; 
	left: 							5px; 
	transition: 					transform 	0.33s 	ease, 
									background 	var(--transition_time_color_mode) ease-in-out; }
.accordion_expandable_section[aria-expanded="true"] .accordion_rotating_x {transform: rotate(45deg); }
.accordion_content {
    border: 						var(--layout_line) solid red;
	overflow: 						hidden; 
	height: 						0;	
	border: 						var(--layout_line) solid lightblue;	
	font-family: 					var(--font_light), sans-serif;
    font-size: 						var(--body__font_size);
	line-height: 					var(--body__text__line_height);
    color:  						var(--color_mode_01);					
	transition: 					color var(--transition_time_color_mode) ease-in-out,
									height var(--accordion_transition_time) var(--accordion_open_close);
    -webkit-transition: 			color var(--transition_time_color_mode) ease-in-out,
		 							height var(--accordion_transition_time) var(--accordion_open_close);
    -o-transition: 					color var(--transition_time_color_mode) ease-in-out,
									height var(--accordion_transition_time) var(--accordion_open_close); }
.accordion_body {
	border: 						var(--layout_line) solid cyan;
    padding-bottom: 				20px;
    font-family: 					'RobotoCondensed-Light', sans-serif;
    font-size: 						var(--body__font_size);
	line-height: 					auto;
	letter-spacing: 				var(--body__text__letter_spacing); }
.accordion_body a {
    display: 						block; }
.accordion_body .link_in_accordion:not(:first-child) {
    margin-top: 					10px; }
.link_in_accordion{
	border: 						var(--layout_line) solid red;	
	text-decoration-color: 			transparent;
    transition-property: 			text-decoration-color;
    transition-duration: 			var(--transition_time_hoover_effect_for_links);
    color:  						var(--color_mode_01);					
	transition: 					color var(--transition_time_color_mode) ease-in-out;
    -webkit-transition: 			color var(--transition_time_color_mode) ease-in-out;
    -o-transition: 					color var(--transition_time_color_mode) ease-in-out; }
.link_in_accordion:hover {
	text-decoration-color: 			var(--color_mode_01); }
/*-----------------------*/
/*-----------------------*/
/*-- END of accordion ---*/
/*-----------------------*/
/*-----------------------*/










/*------------*/
/*-- SPACER --*/
/*------------*/
:root{--body_top_spacer_height: 	310px;
	  --headline_to_text_spacer: 	10px;}
@media screen and (max-width: 956px){:root {--body_top_spacer_height: 390px;}}
@media screen and (max-width: 440px){:root {--headline_to_text_spacer: 10px;}}
.body_top_spacer{
	border: 						var(--layout_line) solid red;
	width: 							100%;
	height: 						var(--body_top_spacer_height);}
.headline_to_text_spacer{
	height: 						var(--headline_to_text_spacer);
	transition: 					height var(--transition_time_padding) ease-in-out;}
.headline_to_accordion_spacer{
	height: 						20px}
.spacer_for_undelying_title_picture{
    border: 						var(--layout_line) solid limegreen;
    max-width: 						100%;
    height: 						100vh;}   
.space_at_top_of_the_page{
    height: 						37px; 
/*  box-shadow: 					0 -2px 3px rgba(0,0,0,0.10); */
    background-color: 				var(--color_mode_02); 
    transition: 					background-color var(--transition_time_color_mode) ease-in-out;} /* <-- spacer at top of the page */
.spacer_00{     height:    7px;}
.spacer_01{     height:   10px;}
.spacer_02{     height:   15px;}
.spacer_03{     height:   20px;}
.spacer_04{     height:   30px;}
.spacer_05{     height:   39px;}
.spacer_06{     height:   45px;}
.spacer_07{     height:   60px;}
.spacer_08{     height:   75px;}
.spacer_09{     height:   90px;}
.spacer_10{     height:  150px;}
.spacer_11{     height:  180px;}
.spacer_bottom{ height:  210px;}
/*-------------------*/
/*-- END of spacer --*/
/*-------------------*/










/*---------------------------*/
/*-- BREAK POINTS (@MEDIA) --*/
/*---------------------------*/
/* Extra-Small Mobile */
@media screen and (max-width:  279px) 							   {:root {--dynamic_padding:   2px;}}	
@media screen and (max-width:  279px) and (orientation: landscape) {:root {--dynamic_padding:  15px;}}	
/* Small Mobile */
@media screen and (min-width:  280px) 							   {:root {--dynamic_padding:  10px;}}	
@media screen and (min-width:  280px) and (orientation: landscape) {:root {--dynamic_padding:  15px;}}	
/* Mid-Range Mobile */
@media screen and (min-width:  360px) 							   {:root {--dynamic_padding:  15px;}}	
@media screen and (min-width:  360px) and (orientation: landscape) {:root {--dynamic_padding:  15px;}}	
/* Large Mobile */
@media screen and (min-width:  480px) 							   {:root {--dynamic_padding:  30px;}}	
@media screen and (min-width:  480px) and (orientation: landscape) {:root {--dynamic_padding:  15px;}}	
/* Phablets */
@media screen and (min-width:  600px) and (orientation: portrait)  {:root {--dynamic_padding:  35px;}}
@media screen and (min-width:  600px) and (orientation: landscape) {:root {--dynamic_padding:  15px;}}
/* Small Tablets */
@media screen and (min-width:  768px) and (orientation: portrait)  {:root {--dynamic_padding:  40px;}}
@media screen and (min-width:  768px) and (orientation: landscape) {:root {--dynamic_padding:  15px;}}
/* Mid-Sized Tablets */
@media screen and (min-width:  900px) 							   {:root {--dynamic_padding:  50px;}}
/* Large Tablets */
@media screen and (min-width: 1024px) 							   {:root {--dynamic_padding:  60px;}}
/* Extra-Large Tablets */
@media screen and (min-width: 1200px) 							   {:root {--dynamic_padding:  90px;}}
/* Small Computers */
@media screen and (min-width: 1280px) 							   {:root {--dynamic_padding: 105px;}}
/* Medium Computers */
@media screen and (min-width: 1440px) 							   {:root {--dynamic_padding: 120px;}}
/* Ultra-Wide Medium */
@media screen and (min-width: 1680px) 							   {:root {--dynamic_padding: 135px;}}
/* Large Computers */
@media screen and (min-width: 1920px) 							   {:root {--dynamic_padding: 200px;}}
/* 4K+ Displays */
@media screen and (min-width: 2560px) 							   {:root {--dynamic_padding: 300px;}}