@charset "utf-8";

@font-face {
  font-family: Arial;
  font-style: normal;
  font-weight: normal;
}

*	{ margin: 0; padding: 0; box-sizing: border-box; }

/* Colors */

:root
{
	--color_body:				rgb(0,0,0);
	--color_body_bg:			rgb(255,255,255);
	--color_content:			rgba(0,0,0,0.7);
	--color_content_bg:			rgb(235, 245, 247);
	--color_content_about:		rgb(92,173,181);
	--color_content_about_bg:	rgb(0,24,46);
	--color_modal_bg:			rgba(0,24,46,0.4);
	--color_modal_border:		rgb(130,130,130);
	--color_content_box_shadow: rgba(0,0,0,0.2);
	--color_link: 				rgb(90,151,153);
	--color_link_focus: 		rgb(101,101,103);
	--color_anchor:				rgba(240,142,0,0.3);
    --color_blue: 				rgb(1,66,202);
    --color_brown: 				rgb(151,105,63); /*(106,52,42);*/
    --color_green: 				rgb(29,127,6); /*(56,207,6);*/
    --color_orange: 			rgb(240,142,0); /*(239,142,1);*/
}

html { height: 100.2%; scroll-behavior: smooth }
      
body { font-family: Arial; font-size: 100%; line-height: 1.325em; color: var(--color_body); background: var(--color_body_bg); } 

div.header, div.content { max-width: 1920px; margin-left: auto; margin-right: auto; }
div.header { width: 90%; }
div.header img { width: 100%; }
/*div.content { max-width: 1920px; margin-left: auto; margin-right: auto; }
div.logo { max-width: 1920px; margin-left: auto; margin-right: auto; background-image: url(../images/prosperodes_logo.jpg); 
background-repeat: no-repeat; background-attachment: scroll; background-size: contain; height: 500px; }*/
h1, h2 { font-size: 1.5em; line-height: 1.4em; padding: 0.3em 0; font-weight: normal; text-align: center; }
h1.color { color: var(--color_blue); }
h2.color1 { color: var(--color_brown); }
h2.color2 { color: var(--color_green); }
h2.color3 { color: var(--color_orange); }
hr { width: 10.5em; border-width: 0 0 0.15em 0; margin-inline-start: auto; margin-inline-end: auto; margin-top: 0.27em; margin-bottom: 0.5em; }
hr.color { border-color: var(--color_blue); }
hr.color1 { border-color: var(--color_brown); }
hr.color2 { border-color: var(--color_green); }
hr.color3 { border-color: var(--color_orange); }
p { font-size: 1.12em; line-height: 1.4em; padding: 0.4em; }
div.maintitle { margin-top: 11.5em; }
div.maintitle a { color: var(--color_content); }
div.content { padding: 1em 20%; width: 90%; position: relative; text-align: center; color: var(--color_content); background-color: var(--color_content_bg); }
div.content p:last-child { margin-bottom: 0.5em; }
div.content.about { color: var(--color_content_about); background-color: var(--color_content_about_bg); }
div.content.imprint { width: 100%; margin-bottom: 0; margin-right: 0; margin-left: 0; padding-left: 0; padding-right: 0; }
div.content.imprint p:last-child { margin-bottom: 0; padding-bottom: 0.5em; }

div.twoblocks { display: table-cell; vertical-align: top; width: 48%; margin-bottom: 1em; }
div.twoblocks:nth-of-type(odd) { margin-right: 0; padding-right: 1em; }
div.twoblocks:nth-of-type(even) { margin-left: 0; padding-left: 1em; }

/* modal window */
.modal {
  display: none; position: fixed; z-index: 1; padding-top: 6em; left: 0; top: 0; width: 100%;
  height: 100%; overflow: auto; background-color: var(--color_content_about_bg); /* Fallback color */
  background-color: var(--color_modal_bg); /* Black w/ opacity */
}
.modal_content { background-color: var(--color_body_bg); margin: auto; padding: 2em; border: 1px solid var(--color_modal_border); width: 80%; max-width: 1920px; }
.close { color: var(--color_modal_bg); float: right; font-size: 4em; font-weight: bold; position: relative; z-index: 10; top: 0.2em; right: 0.1em; }
.close:hover, .close:focus { color: var(--color_content_about_bg); text-decoration: none; cursor: pointer; }
div.button_center { text-align: center; }
button#button_imprint { font-family: Arial; font-size: 1.2em; font-weight: normal; background-color: transparent; border: none; color: var(--color_orange) }
button#button_imprint:focus, button#button_imprint:hover, button#button_imprint:active { color: var(--color_content_bg); background-color: transparent; 
transition: color 0.4s ease-in-out 0.2s; }
  
.footnote { font-size: 0.9em; }

a { text-decoration: none; color: var(--color_content_about); transition: color 0.4s ease-in-out 0.2s; }
a:focus { color: var(--color_orange); text-decoration: none; }  
a:hover { color: var(--color_orange); text-decoration: none; }
a:active { color: var(--color_orange); text-decoration: none; }

.jobs_link a { text-decoration: none; color: var(--color_orange); transition: color 0.4s ease-in-out 0.2s; }
.jobs_link a:focus { color: var(--color_content_bg); text-decoration: none; }  
.jobs_link a:hover { color: var(--color_content_bg); text-decoration: none; }
.jobs_link a:active { color: var(--color_content_bg); text-decoration: none; }

/* common classes */
.bold { font-weight: bold; }
.italic { font-style: italic; }
.pointer { cursor: pointer; }
.clear { clear: both; }


/* small mobile: 320 x 480 | tablet: 600 x 800 or 768 x 1024 */
@media screen and (max-width: 800px)
{
	div.header { margin-top: 1.6em; margin-bottom: 1.6em; }
	div.content { margin-bottom: 2em; padding: 1em 0.5em; text-align: left; }
	div.twoblocks { width: 100%; display: block; }
	div.twoblocks:nth-of-type(odd) { padding: 0; margin-bottom: 0.5em; }
	div.twoblocks:nth-of-type(even) { padding: 0; margin-top: 0.5em; }
	.modal_content { padding: 1em; width: 100%; }
	div.content.imprint { margin: 0; padding: 0; }
	.anchor_to_top { margin: -2.75em 1em 0 0; }
	div.logo { display: none; }
}
/* medium */
@media screen and (min-width: 801px) and (max-width: 1280px)
{
	body { font-size: 115%; }
	div.header { margin-top: 1.8em; margin-bottom: 1.8em; }
	div.content { margin-bottom: 2.2em; padding: 1em 9em 1em 9em; }
	div.twoblocks { width: 100%; display: block; }
	div.twoblocks:nth-of-type(odd) { padding: 0; margin-bottom: 0.5em; }
	div.twoblocks:nth-of-type(even) { padding: 0; margin-top: 0.5em; }
	.modal_content { padding: 1.2em; width: 80%; }
	div.content.imprint { margin: 0; padding: 0; }
	div.logo_small { display: none; }
}

/* large */
@media screen and (min-width: 1281px) 
{
	div.header { margin-top: 2.0em; margin-bottom: 2.0em; }
	div.content { margin-bottom: 2.4em; padding: 1em 9em 1em 9em; }
	body { font-size: 130%; }
	div.twoblocks { text-align: justify; }
	div.twoblocks:nth-of-type(odd) { margin-right: 0; margin-bottom: 0.5em; }
	div.twoblocks:nth-of-type(even) { margin-left: 0; margin-top: 0.5em; }
	.modal_content { padding: 2.5em; width: 70%; }
	div.logo_small { display: none; }
}