/* ------------------------------------------------------------------------------------ 
    __________  _   _____________
   / ____/ __ \/ | / /_  __/ ___/
  / /_  / / / /  |/ / / /  \__ \ 
 / __/ / /_/ / /|  / / /  ___/ / 
/_/    \____/_/ |_/ /_/  /____/  
                                 
/* ------------------------------------------------------------------------------------ */

@font-face { font-family:Arimo; font-weight: normal; font-style: normal; src:url(fonts/Arimo.ttf),local("Arimo");}
@font-face { font-family:Arimo; font-weight: bold; font-style: normal; src:url(fonts/Arimo-Bold.ttf),local("Arimo");}

@font-face { font-family:Asap; font-weight: normal; font-style: normal; src:url(fonts/Asap.otf),local("Asap");}
@font-face { font-family:Asap; font-weight: bold; font-style: normal; src:url(fonts/Asap-Bold.otf),local("Asap");}

@font-face { font-family:Amble; font-weight: normal; font-style: normal; src:url(fonts/Amble.ttf),local("Amble");}
@font-face { font-family:Amble; font-weight: bold; font-style: normal; src:url(fonts/Amble-Bold.ttf),local("Amble");}

/* ------------------------------------------------------------------------------------ 
    __    _____  ______  __  ________
   / /   /   \ \/ / __ \/ / / /_  __/
  / /   / /| |\  / / / / / / / / /   
 / /___/ ___ |/ / /_/ / /_/ / / /    
/_____/_/  |_/_/\____/\____/ /_/     
                                     
/* ------------------------------------------------------------------------------------ */

html
{
    height: 100%;
    margin: 0px;
    padding: 0px;
    font-size: 0;
}

body
{
    position: relative;
    min-width: 100%;
    min-height: 100%;
    display: inline;
    display: inline-block;
    outline: none 0px;
    margin:0px;
    background-color:#ffffff;
    color: var(--color_2);
    font-size: 16px;
    line-height:22px;
    font-family: Asap, Arial;
    overflow-y: scroll;
    text-align: center;
}


body
{
}


body > *
{
  text-align: left;
}

.main
{
    max-width:1280px;
    margin:0px auto;
    display:block;
    position: relative;
}

.clear { clear:both; }


ul
{
    list-style: none;
	list-style: none;
	margin-left: 0;
	padding-left:0px;
}

ul > li::before
{
    content: "- ";
	left: 0;
}

address
{
    font-style: normal;
}


/* ------------------------------------------------------------------------------------ 
      __________  __    ____  ____  _____
     / ____/ __ \/ /   / __ \/ __ \/ ___/
    / /   / / / / /   / / / / /_/ /\__ \ 
   / /___/ /_/ / /___/ /_/ / _, _/___/ / 
   \____/\____/_____/\____/_/ |_|/____/  
   
/* ------------------------------------------------------------------------------------ */

:root 
{
    --color_1:#143182; /* endorado_blue */
    --color_2:#5E666D; /* endorado_gray */
    --color_3:#AFCD0C; /* endorado_limegreen */
    --c_error:#ff0000;
    --c_white:#ffffff;
}

.color_1 { color:var(--color_1) !important; }
.cb_color_1 { background-color:var(--color_1) !important; }
.color_2 { color:var(--color_2) !important; }
.cb_color_2 { background-color:var(--color_2) !important; }
.color_3 { color:var(--color_3) !important; }
.cb_color_3 { background-color:var(--color_3) !important; }

.c_error { color:var(--c_error) !important; }
.cb_error { background-color:var(--c_error) !important; }
.c_white { color:var(--c_white) !important; }
.cb_white { background-color:var(--c_white) !important; }


/* ------------------------------------------------------------------------------------ 
    ____  ___   _____ _______________
   / __ )/   | / ___//  _/ ____/ ___/
  / __  / /| | \__ \ / // /    \__ \ 
 / /_/ / ___ |___/ // // /___ ___/ / 
/_____/_/  |_/____/___/\____//____/  
   
/* ------------------------------------------------------------------------------------ */

a
{
    color: var(--color_1);
    font-weight:bold;
    text-decoration: underline;
}

a:hover
{
    text-decoration: none;
}

a.content_3col_button
{
    font-weight: normal;
    text-decoration: none;
}

.spacing_5 { height:5px;}
.spacing_10 { height:10px;}
.spacing_15 { height:15px;}
.spacing_20 { height:20px;}
.spacing_25 { height:25px;}
.spacing_30 { height:30px;}
.spacing_35 { height:35px;}
.spacing_40 { height:40px;}
.spacing_45 { height:45px;}
.spacing_50 { height:50px;}
.spacing_60 { height:60px;}
.spacing_70 { height:70px;}
.spacing_80 { height:80px;}
.spacing_90 { height:90px;}
.spacing_100 { height:100px;}
.spacing_top { height:50px;}
.spacing_bottom { height:35px;}
.spacing_footer { height:40px;}

#h1_introtext
{
    font-family: Asap;
    font-size: 42px;
    line-height: 42px;
    color:#FFFFFF;
    padding: 328px 0px 6px 0px;    
	text-shadow: 1px 1px 7px rgba(22,48,90, 0.75);
}

h1
{
    font-family: Asap;
    font-weight: bold;
    font-size: 100px;
    line-height: 96px;
    color: #FFFFFF;
    padding: 328px 0px 240px 0px;
    margin:0px;
	text-shadow: 1px 1px 7px rgba(22,48,90, 0.75);
}
	
h2
{
    font-family:Asap;
    font-weight:normal;
    font-size:48px;
    line-height:39px;
    color:var(--color_1);
    padding:72px 0px 0px 0px;
    margin:0px;
}

.h2_line	
{
    height:3px; 
    width:145px;
    background-color: var(--color_1);
    margin-top:15px;
    margin-bottom:15px;        
}

h3
{
    font-family:Asap;
    font-weight:normal;
    font-size: 40px;
    line-height: 38px;
    color: var(--color_1);
    padding: 70px 0px 24px 0px;
    margin:0px;
}

.h3_box
{
    font-family:Asap;
    font-weight:bold;
    font-size: 40px;
    line-height: 38px;
    color: #FFFFFF;
    padding: 68px 0px 24px 0px;
    margin:0px;
}

.h3_subtext	
{
    font-family: Asap;
    font-weight: bold;
    font-size: 20px;
    line-height: 20px;
    color: var(--color_1);
    padding: 0px 0px 24px 0px;
}

h4
{
    font-family: Asap;
    font-weight: normal;
    font-size: 40px;
    line-height: 40px;
    color: var(--color_1);
    padding: 64px 0px 20px 0px;
    margin:0px;
}

h5
{
    font-family:Asap;
    font-weight:normal;
    font-size: 40px;
    line-height: 38px;
    color: var(--color_1);
    padding: 72px 0px 34px 0px;
    margin:0px;
}

.introduction_text
{
    font-family: Asap;
    font-weight: bold;
    font-size: 18px;
    line-height: 22px;
    color: var(--color_2);
    padding: 0px 0px 14px;
}

.content_2columns
{
    float:left;
    width: 46.875%;
    margin-right:6.25%;
}
.content_2columns:nth-child(2n)
{
    margin-right:0%;
}

body::-webkit-scrollbar {
    width: 1em;
}
   
 body::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #D1D5D8;
 }

body::-webkit-scrollbar-thumb {
    background-color: rgba(10, 99, 161, 0.4);
    outline: 1px solid var(--color_2);
}

body::-webkit-scrollbar-thumb:hover {
    background-color: var(--color_1);
    outline: 1px solid var(--color_2);
}

body::scrollbar {
    width: 1em;
}
   
  body::scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #D1D5D8;
  }

body::scrollbar-thumb {
    background-color: rgba(10, 99, 161, 0.4);
    outline: 1px solid var(--color_2);
}
body::scrollbar-thumb:hover {
    background-color: var(--color_1);
    outline: 1px solid var(--color_2);
}

.highlight_text 
{
    color: var(--color_1);
	font-size: 16px;
	padding-bottom:3px;
    font-weight: bold;
}
mark 
{
    background-color: initial;
    color: var(--color_1);
    font-weight: bold;
}

/* ------------------------------------------------------------------------------------ 
    __  ___________    ____ 
   / / / / ____/   |  / __ \
  / /_/ / __/ / /| | / / / /
 / __  / /___/ ___ |/ /_/ / 
/_/ /_/_____/_/  |_/_____/  
   
/* ------------------------------------------------------------------------------------ */

#header_box
{
    position: relative;
    z-index:11;
}
#header
{
    display: block;
    position: absolute;
    width:100%;
    height:100%;
}

#head_background
{
    position: absolute;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    z-index:−21474834;
    
    background-image:url(graphics/background_home.jpg);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center top;
}



#head_background img
{
    width:100%;
}


#main_logo		
{
	position:	absolute;
	width:	24.84375%;
	top:	28px;
    right:	0px;
    transition: width 300ms, opacity 300ms;
}
#main_logo2	
{
	position:	absolute;
	width:	24.84375%;
	top:	28px;
    right:	0px;
    transition: width 300ms, opacity 300ms;
    opacity: 0;
}

#header_bar
{
    width:100%;
    position: fixed;
    z-index:10000;
}
#header_bar_background
{
    position:absolute;
    left:0px;
    top:0px;
    width: 100%;
    height: 100%;
    background-color: var(--color_3);
    opacity: 0.0;
    box-shadow: 0px 0px 6px rgb(0 0 0 / 40%);
}

#menu_bar
{
    padding-top:64px;
    overflow: visible;
}

#menu_bar ul
{
    margin:0px 0px 8px 0px;
	overflow-x:clip;
	overflow-y:visible;
    position: relative;
}

#menu_bar ul > li::before
{
    content: "";
	left: initial;
}

#menu_bar ul > li
{
    display:inline-block;
    color: transparent; 
	background-color:transparent; /* Hintergrundfarbe des Menübuttons im Status inaktiv (mit Transparent unsichtbar) */
	font-family:Arimo;
	font-weight:bold;
    font-size:16px;
    margin-left:5px;
	transition: background-color 400ms;
}

#menu_bar ul > li > a
{
    text-decoration: none;
    color:#FFFFFF; 
    cursor:pointer;
	padding: 4px 5px;
    display:block;
    border: 2px solid transparent; /* Farbe des Rahmens um den Menübutton im Status inaktiv (mit Transparent unsichtbar) */
	transition: color 400ms;
}

#menu_bar ul > li:nth-of-type(1)
{
    margin-left:0px;
}

#menu_bar ul > li:hover > a,
#menu_bar ul > li.menu_bar_button_active > a
{
    border: 2px solid transparent; /* Farbe des Rahmens um den Menübutton im Status hover */
    text-decoration: none;
    color:var(--color_1);
	transition: color 400ms;
}

#menu_bar ul > li.menu_bar_button_active,
#menu_bar ul > li:hover
{
	background-color:#FFFFFF; /* Hintergrundfarbe des Menübuttons im Status aktiv (mit Transparent unsichtbar) */
	transition: background-color 400ms;
}

/* ------------------------------------------------------------------------------------ 
   __________  _   _______________   ________
  / ____/ __ \/ | / /_  __/ ____/ | / /_  __/
 / /   / / / /  |/ / / / / __/ /  |/ / / /   
/ /___/ /_/ / /|  / / / / /___/ /|  / / /    
\____/\____/_/ |_/ /_/ /_____/_/ |_/ /_/     
   
/* ------------------------------------------------------------------------------------ */

.box_shadow
{
    box-shadow: 0px 0px 12px rgb(0 0 0 / 40%);
}

.content_2col
{
    float:left;
    width: 46.875%;
    margin-right:6.25%;
}

.content_2col:nth-child(2n)
{
    margin-right:0%;
}

.grid_3col
{
    display: grid;
    row-gap: 50px;
    column-gap: 0.7812%;
    grid-template-columns: 32.8125% 32.8125% 32.8125%;
}

.grid_3col > *
{
    width:100%;
}

.grid_3col .imgcontainer 
{
    position: relative;
    padding-top: 66.66666666666667%;
    display: block;
}

.grid_3col .imgcontainer > img {
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.content_3col
{
    float:left;
    width: 32.8125%;
    margin-right:0.7812%;
    margin-bottom:1.3812%;
}
.content_3col:nth-child(3n)
{
    margin-right:0%;
}


.content_3col_2
{
    float:left;
    width: 60.28125%;
    margin-left:3.125%;
    margin-right:3.000%;
    margin-bottom:16px;
}

.content_3col_button
{
    background-color: var(--color_3);
    transition: background-color 600ms;
    display:block;
    color:#ffffff;
}


.content_3col_button:hover
{
    background-color: var(--color_1);
}

.content_3col_button h3
{
    color:#ffffff;
}

.content_3col_button .content_3col
{
    margin-bottom:0.0%;
}

.button_box_3col
{
    display:block;
    background-color:var(--color_3);
    color:#ffffff;
    transition: background-color 600ms;
    display:block;
    margin-bottom:10px;
}

.button_box_3col:hover
{
    background-color:var(--color_1);
    transition: background-color 500ms;
}

.button_box_3col > img
{
    display: block;
    width:100%;
}

.button_box_3col_text
{
    display:block;
    font-family: Amble;
    font-weight: bold;
    font-size: 32px;
    line-height: 32px;
    color:#FFFFFF;
    padding: 0px 0px 28px 0px;
    text-align: center;
}

a.button_box_3col
{
    text-decoration: none;
}

.button_3col_2
{
    display:block;
    border:0px;
    cursor: pointer;
    background-color: var(--color_1);
    color: #ffffff;
    font-weight:bold;
    padding:15px 0px;
    margin-top:25px;

    font-size: 18px;
    font-weight: bold;
    height:auto;
    text-decoration: none;
    text-align: center;
}
.button_3col_2:hover
{
    background-color: var(--color_2);
}


.sub_content
{
    background-color:#D1D5D8;
    position:relative
}

.image_box_3col
{
    position: relative;
}


.image_box_3col::after
{
    content: " ";
    padding-top:66.66666666666667%;
    display:block;
}

.image_box_3col img
{
    display: block;
    position: absolute;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    object-fit: cover;
}
.contact_field_label 
{
    width:100%;
}
.contact_field_value
{
    width:100%;
    min-width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin:5px 0px 10px 0px;
	font-size:15px;
    height:36px;
}

textarea.contact_field_value
{
    min-height:100px;
    height:200px;
    max-height:300px;
}

#contact_field_value_submit
{
    border:0px;
    cursor: pointer;
    background-color: var(--color_1);
    color: #ffffff;
    font-weight:bold;
    padding:15px 0px;
    margin-top:25px;

    font-size: 18px;
    font-weight: bold;
    height:auto;
}

#contact_field_value_submit:hover
{
    background-color: var(--color_2);
}

.g-recaptcha
{
    margin-top:30px;
}

.contact_error
{
    color:red;
    font-weight:bold;
    font-size:16px;
    margin:2px 0px 12px 0px;
}

.picture-list
{
    display: flex;
    flex-direction: row;
}

.picture-list-160 > .picture-list-text
{
    margin:16px 0px 0px 20px;
}
.picture-list-img
{
    
}

.picture-list-160 .picture-list-img
{
    width:120px;
    height:120px;
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}

.picture-list-text
{
    flex:1;
}

.picture-list-8 img
{
    margin-right:8px;
}

/* ------------------------------------------------------------------------------------ 
    __________  ____  ________________ 
   / ____/ __ \/ __ \/_  __/ ____/ __ \
  / /_  / / / / / / / / / / __/ / /_/ /
 / __/ / /_/ / /_/ / / / / /___/ _, _/ 
/_/    \____/\____/ /_/ /_____/_/ |_|  

/* ------------------------------------------------------------------------------------ */

footer
{
    background-color:var(--color_1);
    background-image:url(graphics/footer_background.jpg);
    background-repeat:no-repeat;
    background-position:center top;
    min-height:250px;
    position: relative;
}

footer a
{
    color:#C6C8CA;
}

#footer a:hover
{
    color:#ffffff;
}

.footer_headline
{
	font-weight: bold;
    font-family: Amble;
	font-style: normal;
	font-size: 14px;
	line-height: 14px;
	color: #ffffff;
	padding: 0px 0px 5px 0px;

}

.footer_text
{
  font-size:14px;
  line-height:16px;
  font-weight:normal;
  color:#C6C8CA;
  font-family: Amble;
  padding:0px 0px 5px 0px;
}

#footer_links a
{
  display:block;
  font-size:14px;
  line-height:21px;
  text-decoration: underline;
}


#footer_links a:hover
{
  text-decoration: none;
}

.footer_block
{
  float:left;
  position: relative;
  margin-right:60px;
}

#footer_links
{
  position: relative;
  right:0px;
  top:0px;
}

#by_box
{
  position: absolute;
  right:0px;
  top:0px;
  color:#ffffff;
  font-size:14px;
  line-height:16px;
}

#infinite_logo img
{
  margin-left:4px;
  vertical-align: bottom;
  opacity:0.4;
  transition: opacity 300ms;
}

#infinite_logo:hover img
{
  opacity:1;
}

/** ------------ COOKIEBAR ----------------------*/

#cookie_bar_button
{
  float:right; 
  margin:0px 0px 10px 25px; 
  display:block; 
  cursor:pointer; 
  background-color:#FFFFFF;		
  opacity:0.6;
  padding:10px 25px 10px 25px;
  font-size:15pt;
  color:var(--color_1);
}

#cookie_bar_button:hover
{
  opacity:1.0;
}

#cookie_bar
{
	font-size:14px; 
	line-height:15px; 
	position:fixed; 
	bottom:0px; 
	padding:15px 4% 15px 4%; 
	background-color:var(--color_1); 
	color:#FFFFFF;
	width:92%; 
	z-index:100; 
	text-align:left;
}

#cookie_bar a
{
  color:#FFFFFF;
  text-decoration:underline;
}
#cookie_bar a:hover
{
  text-decoration:none;
}

/* ------------------------------------------------------------------------------------ 
    ____  __    __  _____________   _______
   / __ \/ /   / / / / ____/  _/ | / / ___/
  / /_/ / /   / / / / / __ / //  |/ /\__ \ 
 / ____/ /___/ /_/ / /_/ // // /|  /___/ / 
/_/   /_____/\____/\____/___/_/ |_//____/  
                                                                         
/* ------------------------------------------------------------------------------------ */

.lightbox_image_title
{
	font-size:20px;
	line-height:24px;
	color:var(--color_1); 	
	font-weight:bold;
	padding: 16px 0px 4px 0px;	
}

.lightbox_image_text
{
	padding: 0px 0px 16px 0px;	
}