/*
*/
/*
Margin box
Border box
Padding box
Element box
*/

:root {
/*
belyj white #FFFFFF
chjonyj black #000000
goluboj light-blue #B6E5FE
sinij blue #003799
svetlo-seryj light-grey #F0F3F6
seryj gey #9FB0BF
tjomno-seryj dark-grey #3A3A3A
*/
	--color_1: #FFFFFF; /* white */
	--color_2: #000000; /* black */
	--color_3: #CFF3FF; /* goluboj light-blue B6E5FE CFEEFF CFF3FF DCF5FF */
	--color_35: #B6E5FE; /* goluboj light-blue */
	--color_4: #003799; /* sinij blue */
	--color_5: #F0F3F6; /* svetlo-seryjseryj light-grey*/
	--color_55: #D4DDE8; /* seryj 2 grey 2*/
	--color_6: #9FB0BF; /* seryj grey */	
	--color_7: #373D4D; /* tjomno-seryj dark-grey */

	--font_family_1: Arial;
	--font_family_2: Bahnschrift, Helvetica, Arial, sans-serif;
	/*
	--font_family_2: "Segoe UI";
	--font_family_2: "DejaVu Sans";
	--font_family_1: "Nimbus Sans L";
	letter-spacing: 0.05em;
	5px 0.15em 2%
	*/
}

body {
	margin: 0px;
	text-align: center;
	font-family: "Arial";
	font-size: 20px;
	font-style: normal;
	font-weight: normal;
	letter-spacing: 0.0em;
	
	background-image: url("Logo_Ramenit_r.png");
	background-attachment: fixed;
	background-blend-mode: lighten;
	background-repeat: repeat-xy;
	
	/*
	background-position: 0% 0%;
	
	opacity: 0.5;
	background-size: cover; contain
	z-index: -1;
	background-repeat: repeat-x;
	background-repeat: repeat-y;
	
	background: var(--color_1);
	
	background-image: url('img_back_1.jpg');
	background-position: center; /* Center the image *
	background-repeat: no-repeat; /* Do not repeat the image *
	background-size: cover; /* Resize the background image to cover the entire container *

	background: var(--color_2); /* background color /
	background: linear-gradient(0deg,#000,transparent 50%),linear-gradient(90deg,#000,transparent 50%);
	background: linear-gradient(90deg,#000,transparent 50%);
	background: linear-gradient(90deg,#000,transparent 30%);
	background: linear-gradient(180deg,#FF0,transparent 10%);
	background: linear-gradient(270deg,#000,transparent 30%);
	background: linear-gradient (270deg, rgba(94,103,12,0.1), transparent 30%);
	background: linear-gradient (270deg, rgba(94,103,129,0), rgba(0,0,0,1));
	background: linear-gradient (blue, 10%, pink);
	background: linear-gradient (270deg, #000, transparent 50%);
	background: linear-gradient(270deg,rgba(94,103,129,1),transparent 30%);
	background: linear-gradient(270deg,rgba(0,0,0,1), 30%);
	background: linear-gradient(270deg,rgba(0,0,0,1),transparent 30%);
	background: linear-gradient(270deg,rgba(94,103,129,1),transparent 20%);
	background: linear-gradient(270deg,#000,transparent 20%),linear-gradient(0deg,#000,transparent 5%);
	background: linear-gradient(270deg,rgba(0,0,0,1),transparent 20%), linear-gradient(0deg,rgba(0,0,0,1),transparent 5%);
	background: linear-gradient(270deg,rgba(94,103,129,1),transparent 20%), linear-gradient(0deg,rgba(94,103,129,1),transparent 5%);
	background: linear-gradient(270deg,rgba(75,78,80,1),transparent 20%), linear-gradient(0deg,rgba(75,78,80,1),transparent 5%);
	background: linear-gradient(270deg, rgba(75,78,80,1) 0%, transparent 20%), linear-gradient(0deg, rgba(75,78,80,1) 0%, transparent 5%);
	background: linear-gradient(90deg, rgba(0,160,250,0.6) 0%, transparent 60%), linear-gradient(270deg, rgba(60,70,80,0.7) 3%, transparent 40%), linear-gradient(0deg, rgba(75,78,80,1) 0%, transparent 5%);
	background: linear-gradient(90deg, rgba(0,160,250,0.6) 0%, transparent 60%), linear-gradient(0deg, rgba(75,78,80,1) 0%, transparent 5%);
	background: linear-gradient(270deg, rgba(0,160,250,0.6) 0%, transparent 20%);
	background: linear-gradient(270deg, rgba(206,238,254,1) 5%, transparent 20%);
	5px 0.15em 2%
	border: 0px solid black;
	padding: 0px;
	border-top: 8px solid var(--color_4);
	border-bottom: 8px solid var(--color_4);
	border-right: 0px solid var(--color_4);
	padding: 0px;
	margin: 0px;
	text-align: center;
	color: var(--color_2); /* Text color 
    margin: 0 auto;
	width: 100%; can move the area to the right even if no margins or boarders are sets
	width: 60%;
	width: 1200px;
	text-decoration: none; useles 
	auto = centered
	background-image: url("Home_Medicus_Logo_Name_11_16_300dpi_A0_farbig_durchsicht_small.png");
	background-repeat: no-repeat;
	background-position: center top;
	background-attachment: fixed; / scroll fixed
	<body topmargin bottommargin leftmargin rightmargin marginheight marginwidth>
	border: 5px solid green;
	padding-top: 5px;
	height: 100%;
	*/
}

.flex_top_row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding-left: 0.5em;
	padding-right: 0.5em;
	background-color: transparent;
	border: 0px solid yellow;
	/*
	background-color: var(--color_3);
	background: #d9d7d5;
	background: var(--color_3);
	flex-wrap: wrap;
	flex-wrap: nowrap;
	margin: 9px;
	vertical-align: top;
	vertical-align: text-top;
	*/
}

.flex_top_row_block {
	background-color: transparent;
	border: 0px solid blue;
	margin-top: auto; /*to center the content*/
	margin-bottom: auto; /*to center the content*/
	/*
	background-color: var(--color_3);
	vertical-align: middle;	
	margin: auto; /*to center the content*
	padding-left: -3px;
	padding-right: 3px;
	border-radius: 17px;
	margin-bottom: 17px;
	opacity: 0.8;
	background-color: #F0F3F6;
	background-color: #E3E3E3;
	border: 3px solid var(--color_6);
	box-shadow: 10px 10px 8px grey;
	background-color: var(--color_4);
	background-color: var(--color_11);
	background: #767775;
	flex-basis: 100%;
	height: 100px;
	margin-top: 9px;
	margin-bottom: 0.5rem;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	margin-left: 9px;
	margin-right: 9px;
	margin-left: 1rem;
	border: 17px solid var(--color_4);
	border: 1px solid black;
	*/
}

.flex_top_row_inside {
	margin: auto; /*to center the content*/
	border: 0px solid pink;
	/*
	background-color: var(--color_1);
	margin-bottom: 17px;
	border-radius: 17px;
	background-color: #F0F3F6;
	background-color: #E3E3E3;
	border: 3px solid var(--color_6);
	box-shadow: 10px 10px 8px grey;
	background-color: var(--color_4);
	background-color: var(--color_11);
	background: #767775;
	flex-basis: 100%;
	height: 100px;
	margin-top: 9px;
	margin-bottom: 0.5rem;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	margin-left: 9px;
	margin-right: 9px;
	margin-left: 1rem;
	border: 17px solid var(--color_4);
	border: 1px solid black;
	*/
}

.flex_top_row_header {
	font-family: var(--font_family_1);
	font-style: normal;
	font-size: var(--font_size_header_1);
	color: var(--color_2); /* Text color */
	text-align: center;
	vertical-align: middle;
	background-color: transparent;
	margin-top: 0em;
	margin-bottom: 0em;
	margin-left: 0em;
	margin-right: 0em;
	padding-top: 0.3em;
	padding-bottom: 0.3em;
	padding-left: 0.4em;
	padding-right: 0.4em;
	/*

	*/
}

.drop_header {
	/*position: absolute; /* fixed/sticky/absolute position */
    position: fixed;
    top: 0px;
	left: 0px;
	width: 100%;
	background-color: var(--color_1);
	display: none; /*inline block none */
	opacity: 0.9;
	z-index: 1;
}

.ButtonsToChapter_h {
	line-height: 0.2;
	padding-bottom: 0.2em;
	text-align: center;
	/*
	padding-top: 0.2em;
	*/
}

.ButtonToChapter_h {
	position: sticky; /* fixed sticky absolute ??? */
	outline: none; /* Remove outline */
	background-color: var(--color_3);
	cursor: pointer; /* Add a mouse pointer on hover */
	padding-left: 1.0em;
	padding-right: 1.0em;
	padding-top: 0.1em;
	padding-bottom: 0.1em;
	border: 1px solid var(--color_1);
	border-radius: 5px;
	font-size: var(--font_size_3);
	color: var(--color_1); /* Text color */
	margin: auto; /*to center the content*/
	/*
	display: inline;/* none  block inline inline-block
	padding: 0.1em; /* Some padding = from text to boarder
	width: 9em;
	*/
}

.ButtonToChapter_h:hover {
  background-color: var(--color_6); /* Background color on hover */
}

.img_logo {

	/*
	padding-top: 7px;
	width: 180px;
	left: 50%;
	padding-bottom: 0.5em;
	height: 100px;
	position: inherit;
	position: absolute; /* fixed/sticky/absolute position
	position: fixed; /* fixed/sticky/absolute position
	bottom: 20px; /* Place the button at the bottom of the page
	top: 14px; /* Place the button at the top of the page
	left: 20px;
	*/
}

.company_name {
	font-family: var(--font_family_1);
	font-weight: bold;
	border: 0px solid pink;
	/*
	text-align: center;
	margin-left: var(--margin_1);
	margin-right: var(--margin_1);
	padding-top: 0.4em;
	padding-top: 5px;
	opacity: 0.8;
	z-index: 400;
	font-size: 50px;
	font-family: Arial;
	*/
}

.ButtonsToChapter {
	margin: auto; /*to center the content*/
	/*
	text-align: center;
	line-height: 0.2;
	font-size: var(--font_size_text_1);
	*/
}

.ButtonToChapter {
	position: sticky; /* fixed sticky absolute ??? */
	outline: none; /* Remove outline */
	margin: auto; /*to center the content*/
	margin-bottom: 2px;
	background-color: var(--color_3);
	cursor: pointer; /* Add a mouse pointer on hover */
	padding: 0.2em;
	border: 0px solid var(--color_2);
	border-radius: 5px; /* Rounded corners */
	font-size: var(--font_size_text_1);
	color: var(--color_2); /* Text color */ /*controlled in HTML file <STYLE>a {text-decoration: none; color: #000000;}</STYLE> */
	/*
	width: 9em;
	box-shadow: 0px 7px 5px 2px var(--color_7);*
	width: 9em;
	position: sticky; /* fixed sticky absolute ??? *
	outline: none; /* Remove outline *
	margin: auto; /*to center the content*
	box-shadow: 0px 7px 5px 2px var(--color_7);
	background-color: var(--color_4);
	cursor: pointer; /* Add a mouse pointer on hover *
	padding: 0.2em;
	border: 1px solid var(--color_7);
	border-radius: 5px; /* Rounded corners *
	font-size: var(--font_size_text_1);
	color: var(--color_1); /* Text color *
	
	
	
	appearance: none;
	box-sizing: border-box;
	display: inline;/*  none ,  block , inline , inline-block
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	bottom: 20px; /* Place the button at the bottom of the page
	right: 30px; /* Place the button 30px from the right
	left: 50%;
	left: 9px;
	z-index: 99; /* Make sure it does not overlap
	padding: 7px; /* Some padding = from text to boarder
	font-size: 18px;
	color: var(--color_1); /* Text color
	color: var(--color_2); /* Text color
	text-decoration: none; useless
	margin-left: 9px;
	margin-right: 18px;
	margin: 22px;
	text-align: center;
	*/
}

.ButtonToChapter:hover {
  background-color: var(--color_6); /* Background color on hover */
}

.block_languages {
	outline: none;
	border: 0px solid var(--color_1);
	padding: 0px;
	background-color: transparent;
	cursor: pointer; /* Add a mouse pointer on hover */
	margin-top: 5px;
	margin-bottom: 5px;
	/*
	position: absolute; /* fixed sticky absolute ???
	top: 14px;
	right: 20px;
	display: none;  Hidden by default
	text-align: center;
	margin: auto; /*to center the content*
	position: fixed; /* fixed/sticky/absolute position 
	bottom: 20px; /* Place the button at the bottom of the page
	right: 30px; /* Place the button 30px from the right
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: 99; /* Make sure it does not overlap
	outline: 5px dotted green;
	background-color: var(--color_5); /* Set a background color
	padding: 3px; /* Some padding = from text to boarder
	border: solid 1px var(--color_1); /* borders
	border-radius: 5px; /* Rounded corners
	border: none;
	border-style: none;
	font-size: 14px;
	color: var(--color_1); /* Text color
	opacity: 0.8;
	z-index: 2;
	width: 56px;
	*/
}

.button_language {
	padding: 0px;
	border: 0px solid yellow;
	background-color: transparent;
	outline: none;
	margin: auto; /*to center the content*/
	height: 50px;
	font-family: var(--font_family_1);
	font-size: 14px;
	color: var(--color_2); /* Text color */
	/*
	width: 0px;
	font-family: Arial;
	border: none;
	z-index: 3;
	position: center;
	text-align: center;
	*/
}

.button_language:hover {
	background-color: var(--color_6); /* Background color on hover */
}

hr {
	height: 2px;
	width: 100%;
	background-color: var(--color_2); /* line color */
	/*background-color: #ff0000; /* line color */
	display: block;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px; /* auto 0 px em*/
	margin-right: 0px;
	border: 0px solid black; /*none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit*/
	/*border-width: 0px;*/
	text-align: center;
}

.white_1 {
	background-color: var(--color_1);
	color: var(--color_2);
	/*
	background-color: #FFFFFF;
	background-color: #F0F0F0;
	background-color: var(--color_11);
	*/
}

.light_blue_1 {
	background-color: transparent;
	color: var(--color_2);
	/*
	background-color: var(--color_3);
	
	background-color: var(--color_6);
	background-color: #000000;
	background-color: #282828;
	background-color: #898989;
	background-color: #B0B8BF;
	background-color: var(--color_8);
	background-color: #DDE7EF;
	background-color: #9FB0BF;
	*/
}

.text_style_slogan {
	margin-left: var(--margin_1);
	margin-right: var(--margin_1);
	margin-top: 0em;
	margin-bottom: 0em;
	text-align: center;
	line-height: 1.0em;
	font-size: var(--font_size_header_1);
	font-family: var(--font_family_1);
	font-style: normal;
	font-weight: bold;
	color: var(--color_2); /* Text color */
	/*
	font-size: 24px;
	font-family: Arial;
	letter-spacing: 0.1em;
	background-color: var(--color_3);
	line-height: 1.9;
	margin: auto;  /*to center the content*
	opacity: 0.8;
	z-index: 300;
	*/
}

.block_nutzen {
	margin-left: var(--margin_1);
	margin-right: var(--margin_1);
	text-align: auto;
}

.text_nutzen {
	font-style: normal;
	/*font-family: Arial;*/
	font-family: var(--font_family_2);
	text-align: left;
	font-size: var(--font_size_text_1);
	margin: auto;
	max-width: 60rem;
	color: var(--color_2);
}

.header_chapter {
	font-family: var(--font_family_1);
	font-style: normal;
	color: var(--color_2); /* Text color */
	letter-spacing: 0.1em;
	margin-left: var(--margin_1);
	margin-right: var(--margin_1);
	text-align: center;
	/*
	background-color: var(--color_7);
	border: 1px solid black;
	padding-top: 0.3em;
	padding-bottom: 0.3em;
	font-weight: bold;
	
	font-family: Arial;
	font-size: 30px;
	font-size: var(--font_size_header_1);
	color: var(--color_1); /* Text color 
	text-align: center;
	margin-left: 11em;
	margin-right: 11em;
	padding-left: 0.5em;
	padding-right: 0.5em;
	*/
}

.img_container {
	width: 100%;
	margin: 0 auto;
}

.img_back {
	width: 100%;
	height: auto;
	/*
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	background-color: transparent;
	background-repeat: no-repeat;
    background-position: center;
	background-image: url('img_back_1.jpg');
	width: 100%;
    height: 100%;
    object-fit: contain;
	
	background-size: 100%;
	display: flex;
	flex-basis: 100%;
	position: relative;
	width: 100%;
	
	heigth: 100%
	*/
}

#img_back_2 {
	background-color: transparent;
	background-image: url('img_back_2.jpg');
	background-repeat: no-repeat;
    background-position: center; 
	background-size: 100%;
	/*
	position: relative;
	width: 100%;
	heigth: 100%
	*/
}

.flex_topics_small {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding-left: 0.5em;
	padding-right: 0.5em;
	border: 0px solid yellow;
	/*
	margin: auto;
	text-align: center;
	background: #d9d7d5;
	background: var(--color_3);
	flex-wrap: wrap;
	flex-wrap: nowrap;
	margin: 9px;
	vertical-align: top;
	vertical-align: text-top;
	*/
}

.flex_topics_block_small {
	background-color: var(--color_1);
	border: 0px solid var(--color_6);
	margin-top: 0.2em;
	margin-bottom: 0.2em;
	padding: 0px;
	/*
	box-shadow: 0px 3px 2px 2px var(--color_6);
	margin: 5px;
	border-radius: 17px;
	margin-bottom: 17px;
	opacity: 0.8;
	background-color: #F0F3F6;
	background-color: #E3E3E3;
	border: 3px solid var(--color_6);
	box-shadow: 10px 10px 8px grey;
	background-color: var(--color_4);
	background-color: var(--color_11);
	background: #767775;
	flex-basis: 100%;
	height: 100px;
	margin-top: 9px;
	margin-bottom: 0.5rem;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	margin-left: 9px;
	margin-right: 9px;
	margin-left: 1rem;
	border: 17px solid var(--color_4);
	border: 1px solid black;
	*/
}

.flex_topics_inside_small {
	border: 0px solid var(--color_3);
	background-color: var(--color55);
	/*
	background-color: var(--color_1);
	margin-bottom: 17px;
	border-radius: 17px;
	
	background-color: #F0F3F6;
	background-color: #E3E3E3;
	border: 3px solid var(--color_6);
	box-shadow: 10px 10px 8px grey;
	background-color: var(--color_4);
	background-color: var(--color_11);
	background: #767775;
	flex-basis: 100%;
	height: 100px;
	margin-top: 9px;
	margin-bottom: 0.5rem;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	margin-left: 9px;
	margin-right: 9px;
	margin-left: 1rem;
	border: 17px solid var(--color_4);
	border: 1px solid black;
	*/
}

.ButtonToTopic_small {
	display: none; /* none block inline-block */
	/*position: sticky; /* fixed sticky absolute */
	outline: none; /* Remove outline */
	background-color: var(--color_1);
	cursor: pointer; /* Add a mouse pointer on hover */
	font-size: var(--font_size_header_1);
	color: var(--color_2); /* Text color */
	margin-top: 0em;
	margin-bottom: 0em;
	padding-top: 0.2em;
	padding-bottom: 0.2em;
	border: 0px solid var(--color_2);
	border-radius: 5px; /* Rounded corners */
	cursor: pointer; /* Add a mouse pointer on hover */
}

.ButtonToTopic_small:hover {
	background-color: var(--color_6); /* Background color on hover */
}

.click_icon {
	width: 30px;
	animation-name: picture_inside;
	animation-duration: 800ms;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-direction: alternate;
}

@keyframes picture_inside {
	0% { opacity: 0.3; }
	100% { opacity: 1; }
}

.flex_topics {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding-left: 0.5em;
	padding-right: 0.5em;
	/*
	background: #d9d7d5;
	background: var(--color_3);
	flex-wrap: wrap;
	flex-wrap: nowrap;
	margin: 9px;
	vertical-align: top;
	vertical-align: text-top;
	*/
}

.flex_topics_block {
	background-color: var(--color_1);
	margin-bottom: 17px;
	border: 1px solid var(--color_2);
	border-radius: 17px;
	/*
	opacity: 0.8;
	background-color: #F0F3F6;
	background-color: #E3E3E3;
	border: 3px solid var(--color_6);
	box-shadow: 10px 10px 8px grey;
	background-color: var(--color_4);
	background-color: var(--color_11);
	background: #767775;
	flex-basis: 100%;
	height: 100px;
	margin-top: 9px;
	margin-bottom: 0.5rem;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	margin-left: 9px;
	margin-right: 9px;
	margin-left: 1rem;
	border: 17px solid var(--color_4);
	border: 1px solid black;
	*/
}

.flex_topics_inside {
	border: 0px solid var(--color_6);
	
	/*
	background-color: var(--color_1);
	margin-bottom: 17px;
	border-radius: 17px;
	
	background-color: #F0F3F6;
	background-color: #E3E3E3;
	border: 3px solid var(--color_6);
	box-shadow: 10px 10px 8px grey;
	background-color: var(--color_4);
	background-color: var(--color_11);
	background: #767775;
	flex-basis: 100%;
	height: 100px;
	margin-top: 9px;
	margin-bottom: 0.5rem;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	margin-left: 9px;
	margin-right: 9px;
	margin-left: 1rem;
	border: 17px solid var(--color_4);
	border: 1px solid black;
	*/
}

.header_in_blocks {
	font-family: var(--font_family_1);
	font-style: normal;
	font-size: var(--font_size_header_1);
	color: var(--color_2); /* Text color */
	text-align: center;
	vertical-align: middle;
	background-color: transparent;
	margin-top: 0.5em;
	margin-left: 1em;
	margin-right: 1em;
	padding-top: 0.4em;
	padding-bottom: 0.4em;
	padding-left: 0.5em;
	padding-right: 0.5em;
	/*
	letter-spacing: 0.1em;
	background-color: var(--color_11);
	font-weight: bold;
	background-color: var(--color_4);
	border: 1px solid black;/
	border: solid var(--color_6);
	border-width: 9px 1px;
	font-family: Arial;
	font-size: 24px;
	*/
}

.text_in_block {
	margin-left: 1em;
	margin-right: 1em;
	background-color: transparent;
	text-align: left;
	font-family: var(--font_family_2);
	font-style: normal;
	font-size: var(--font_size_text_1);
	color: var(--color_2); /* Text color */
	/*
	background-color: var(--color_11);
	background-color: var(--color_2);
	display: inline-block;  if commented out it arranges to teh left
	font-family: Arial;
	font-weight: normal;
	font-size: 20px;
	text-indent: 1em; only for the forst line
	border: 3px solid var(--color_6);
	letter-spacing: 0.1em;
	width: 360px;
	height: 100px;
	vertical-align: top;
	*/
}

.ButtonToTopic_area {
	margin-left: 8px;
	margin-right: 8px;
	margin-bottom: 8px;
	/*
	margin-top: 8px;
	color: var(--color_2);
	color: &00FF00;
	*/
}

.ButtonToTopic {
	display: none;/* none block inline-block */
	position: sticky; /* fixed sticky absolute */
	outline: none; /* Remove outline */
	background-color: var(--color_55); /* Background color */
	cursor: pointer; /* Add a mouse pointer on hover */
	padding: 7px; /* Some padding = from text to boarder*/
	border: 1px solid var(--color_2);
	border-radius: 5px; /* Rounded corners */
	font-size: var(--font_size_text_1);
	color: var(--color_2); /* Text color */
	/*
	font-size: 20px;
	appearance: none;
	box-sizing: border-box;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	bottom: 20px; /* Place the button at the bottom of the page 
	right: 30px; /* Place the button 30px from the right 
	left: 50%;
	left: 9px;
	z-index: 99; /* Make sure it does not overlap 
	text-decoration: none; useless 
	width: 10em;
	margin-left: 9px;
	margin-right: 18px;
	margin: 22px;
	text-align: center;
	margin: auto;/*to center the content
	margin-left: 4px;
	margin-right: 4px;
	margin-bottom: 4px;
	box-shadow: 0px 7px 5px 2px var(--color_6);
	*/
}

.ButtonToTopic:hover {
	background-color: var(--color_6); /* Background color on hover */
}

.header_business_area {
	font-family: var(--font_family_1);
	font-style: normal;
	font-size: var(--font_size_header_2);
	letter-spacing: 0.1em;
	color: var(--color_2); /* Text color */
	text-align: center;
	vertical-align: middle;
	margin-top: 0.0em;
	margin-left: var(--margin_1);
	margin-right: var(--margin_1);
	border: 0px solid black;
	padding-top: 0.3em;
	padding-bottom: 0.3em;
	/*
	display: inline-block; /* if commented out it arranges to the left
	margin-left: 1em;
	margin-right: 1em;
	background-color: var(--color_8);
	width: 360px;
	height: 100px;
	font-family: Arial;
	font-size: 24px;
	font-weight: bold;
	*/
}

.text_style_most {
	font-style: normal;
	font-family: var(--font_family_2);
	text-align: left;
	font-size: var(--font_size_text_1);
	margin-left: var(--margin_1);
	margin-right: var(--margin_1);
	/*
	font-family: Arial
	font-size: 20px;
	margin: auto;
	margin-left: 33px;
	transform: translateX (120px);
	text-indent: 1em;
	padding-left: min(6%, 30px);
	padding-left: max(26%, 500px);
	margin-left: 20%;
	margin-right: 20%;
	*/
}

.business_area_region {
	/*background-color: var(--color_2);*/
}

.div_doc_flow {
	border: 0px solid #930073;
	text-align: center;
}

.img_doc_flow {
	width: 100%;
}

.visitenkarte {
	background-color: var(--color_55);
	text-align: center;
	color: var(--color_2);
	padding: 0.3em;
	border: 1px solid black;
	border-radius: 3px; /* Rounded corners */
	/*
	background-color: var(--color_5);
	*/
}

footer {
	background-color: var(--color_3);
	/*border: 5px solid var(--color_9);*/
	text-align: center;
	color: var(--color_2);
	/*font-family: Arial;*/
	font-family: var(--font_family_2);
	font-style: normal;
	font-weight: normal;
	font-size: 20px;
}

/* 360px - мобильная версия браузеров*/
@media (max-width: 400px) {
	body {
		/*background: #00000F;*/
		--margin_1: 3%;
		--font_size_header_1: 22px;
		--font_size_header_2: 26px;
		--font_size_text_1: 18px;
		--font_size_3: 14px;
	}
	
	.img_logo {
		width: 100px;
		/*
		position: absolute; /* fixed sticky absolute inherit 
		top: 0px;
		left: 10px;
		*/
	}

	.block_languages {
		/*
		width: 100px;
		top: 5px;
		right: 10px;
		*/
	}
	
	.company_name {
		font-size: 24px;
	}
	
	.header_chapter {
		font-size: 28px;
	}
	
/*	.flex_top_row_block	{
		flex-basis: 33%;
	}
*/
	.flex_topics_block_small {
		flex-basis: 100%;
	}
	
	.flex_topics {
		display: none;
	}
	
	.flex_topics_block {
		flex-basis: 100%;
	}
	
	.flex_top_row_inside {
		flex-basis: 100%;
	}
}

/* От ландшафтного экрана телефона до потретного планшета*/
@media (min-width: 401px) and (max-width: 767px) {
	body {
		/*background: #0000F0;*/
		--margin_1: 5%;
		--font_size_header_1: 22px;
		--font_size_header_2: 30px;
		--font_size_text_1: 22px;
		--font_size_3: 16px;
	}
	
	.img_logo {
		width: 110px;
		/*
		position: absolute; /* fixed sticky absolute inherit 
		top: 0px;
		left: 10px;
		*/
	}
	
	.block_languages {
		width: 80px;
		/*
		top: 5px;
		right: 10px;
		*/
	}
	
	.company_name {
		font-size: 30px;
	}
	
	.header_chapter {
		font-size: 30px;
	}
/*
	.flex_top_row_block	{
		flex-basis: 33%;
	}
*/
	.flex_topics_block_small {
		flex-basis: 100%;
	}
	
	.flex_topics {
		display: none;
	}
	
	.flex_topics_block {
		flex-basis: 49%;
	}
	
	.flex_top_row_inside {
		flex-basis: 100%;
	}
}

/* От портретного планшета до ландшафтного экрана и настольных дисплеев*/
/*@media (min-width: 768px) and (max-width: 979px) {*/
@media (min-width: 768px) and (max-width: 1099px) {
	body {
		/*background: #000F00;*/
		--margin_1: 7%;
		--font_size_header_1: 26px;
		--font_size_header_2: 32px;
		--font_size_text_1: 22px;
		--font_size_3: 18px;
	}
	
	.img_logo {
		width: 150px;
		/*
		position: absolute; /* fixed sticky absolute inherit
		top: 5px;
		left: 15px;
		*/
	}
	
	.block_languages {
		width: 150px;
		/*
		top: 5px;
		right: 10px;
		*/
	}
	
	.company_name {
		font-size: 34px;
	}
	
	.header_chapter {
		font-size: 36px;
	}
/*	
	.flex_top_row_block	{
		flex-basis: 33%;
	}
*/	
	.flex_topics_small {
		display: none;
	}
	
	.flex_topics_block_small {
		flex-basis: 49%;
	}
	
	.flex_topics_block {
		flex-basis: 49%;
	}
	
	.flex_top_row_inside {
		flex-basis: 49%;
	}
	
	.img_doc_flow {
		width: 680px;
	}
}

/* Большой дисплей*/
/*@media (min-width: 978px) {*/
@media (min-width: 1100px) and (max-width: 1549px) {
	body {
		/*background: #00F000;*/
		--margin_1: 10%;
		--font_size_header_1: 26px;
		--font_size_header_2: 36px;
		--font_size_text_1: 22px;
		--font_size_3: 20px;
	}
	
	.img_logo {
		width: 180px;
		/*
		position: absolute; /* fixed sticky absolute inherit
		top: 5px;
		left: 20px;
		*/
	}
	
	.block_languages {
		width: 180px;
		/*
		top: 16px;
		right: 20px;
		*/
	}
	
	.company_name {
		font-size: 34px;
	}
	
	.header_chapter {
		font-size: 36px;
	}
/*	
	.flex_top_row_block	{
		flex-basis: 33%;
	}
*/
	.flex_topics_small {
		display: none;
	}
	
	.flex_topics_block_small {
		flex-basis: 33%;
	}
	
	.flex_topics_block {
		flex-basis: 33%;
	}
	
	.flex_top_row_inside {
		flex-basis: 33%;
	}
	
	.img_doc_flow {
		width: 680px;
	}
}

@media (min-width: 1550px) {
	body {
		/*background: #0F0000;*/
		--margin_1: 10%;
		--font_size_header_1: 26px;
		--font_size_header_2: 38px;
		--font_size_text_1: 22px;
		--font_size_3: 20px;
	}
	
	.img_logo {
		width: 180px;
		/*
		position: absolute; /* fixed sticky absolute inherit 
		top: 10px;
		left: 20px;
		*/
	}
	
	.block_languages {
		width: 180px;
		/*
		top: 16px;
		right: 20px;
		*/
	}
	
	.company_name {
		font-size: 34px;
	}
	
	.header_chapter {
		font-size: 36px;
	}
/*	
	.flex_top_row_block	{
		flex-basis: 33%;
	}
*/
	.flex_topics_small {
		display: none;
	}
	
	.flex_topics_block_small {
		flex-basis: 33%;
	}
	
	.flex_topics_block {
		flex-basis: 33%;
	}
	
	.flex_top_row_inside {
		flex-basis: 33%;
	}
	
	.img_doc_flow {
		width: 680px;
	}
}

/*
img_background {
	background-image:url(X.png);
	/*
    -webkit-transition:background-image 0.5s;
    /* Other vendor-prefixed transition properties /
    transition:background-image 0.5s;*
}