@font-face
{
	font-family: "Poppins"; 
	src: local("Poppins"),
	url("Poppins-Regular.ttf")
	format("TrueType")
}

@font-face
{
	font-family: "Mitr"; 
	src: local("Mitr"),
	url("Mitr-Regular.ttf")
	format("TrueType")
}

*																								{ box-sizing: border-box; }
header, nav, main, footer												{ display: block; }
body, button																		{ 
																									padding: 0; margin: 0; 
																									font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif;
																									font-size:1em; line-height:100%; background:#ffffff; color:#444444;
																								}
input, textarea																	{ font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif; }

header																					{ background-color: #ffffff; width: 100%; height:80px; padding-top:1em; }

nav ul																					{ margin: 0; height: 0; max-height: 0; overflow: hidden; transition: max-height 1s; }

/* LINK: */
a, a.link																				{ color:#3183b5; text-decoration:none; }
a:hover																					{ opacity:0.7; }

.highlight																			{ background:#ff00ff; color:#ffffff; padding:0.5em; }

/* HEADLINES: */
h1																							{ font-size:1.8em; font-family: 'Poppins', sans-serif; color:#014d88; margin-bottom:0.4em; margin-top:0; font-weight:normal; line-height:1; hyphens: auto; }
h1.headline																			{ text-align:center; font-family: 'Mitr'; font-size:3em; hyphens: none; font-weight:bold; }
h1.subheadline																	{ text-align:center; font-family: 'Mitr'; font-size:2.5em; hyphens: none; font-weight:bold; color:#ff8d00; }
h2																							{ font-size:1.6em; font-family: 'Poppins', sans-serif; color:#3183b5; margin-bottom:0.4em; font-weight:normal; line-height:1; hyphens: auto; }
h3																							{ font-size:1.4em; font-family: 'Poppins', sans-serif; color:#ff8d00; margin-bottom:0.4em; font-weight:normal; line-height:1; hyphens: auto; }
h4																							{ font-size:1.2em; font-family: 'Poppins', sans-serif; font-weight:bold; color:#3183b5; margin-bottom:0.4em; font-weight:normal; line-height:1; hyphens: auto; }

#alertNo																				{ padding:0.5em; border:double 7px #ff0033; color:#ff0033; font-size:120%; background:#ffffff; }
#alertYa																				{ padding:0.5em; border:double 7px #1CAD33; color:#1CAD33; font-size:120%; background:#ffffff; }

.clear																					{ clear:both; }
.anker																					{ margin-bottom:80px; }
.white																					{ color: #ffffff; }


.CONTENT																				{ 
																									display: block; margin:0 auto; padding-left:20px; padding-right:20px; font-size:0.8em;
																									margin-left: auto; margin-right: auto; max-width: 95%; margin: 2em auto;
																									
																									/* hyphens - Silbentrennung */
																									/*
																									-moz-hyphens: auto;
																									-o-hyphens: auto;
																									-webkit-hyphens: auto;
																									-ms-hyphens: auto;
																									hyphens: auto;
																									*/
																								}

																								
.CONTENT li																				{ list-style-image:url(../images/bullit_new.png)}
																								
.reframe-X 																				{ margin-left: auto; margin-right: auto; max-width: 94%; margin: 0.5em auto; }
.teaser 																					{ 
																									overflow:hidden; background-color: #ffffff; height:180px; 
																									margin-bottom:1ex; box-shadow:0px 7px 7px 0px #cccccc; 
																									border:solid 1px #cccccc; border-radius: 7px;
																									padding:1em; text-align:center;
																									/* ex = Höhe der Kleinbuchstaben des verwendeten Fonts. h-shadow v-shadow blur spread  */
																									display: block; margin-left: auto; margin-right: auto; 
																									/* zentriert bilder */
																								}
.teaser																					{ position:relative; }
.square																					{ color:#ffffff; font-size:2em; line-height:1.2em; }
.teaser h1																			{ color:#ffffff; font-size:1.5em; }
.teaser p																				{ color:#ffffff; }
.teaser .PLUS																		{ position:absolute; left:0; bottom:0; width:1.1em; height:1.1em; line-height:1.1em; background:#ffffff; color:#014d88; font-size:2em; }
																							
.menu 																						{ 
																									overflow:hidden; margin-bottom:1ex; padding:1em;
																									/* ex = Höhe der Kleinbuchstaben des verwendeten Fonts. h-shadow v-shadow blur spread  */
																									display: block; margin-left: auto; margin-right: auto; 
																									/* zentriert bilder */
																								}

.lines p 																				{ height: 16px; background-color: silver; border-radius: 8px; }
.largeblock																			{ height: 100px; background-color: hsl(145,50%,80%); margin-top: 1em; }

/* IMAGES: */
.img-responsive																	{ max-width:100%; height:auto; }
.img-teaser																			{ max-width:100%; height:auto; }
.img-partner																		{ max-height:100%; width:auto; }
.img-header																			{ display: block; margin-left: auto; margin-right: auto; } /* zentriert bilder */
.img-icon																				{ max-width:4.4em; display: block; margin-left: auto; margin-right: auto; margin-bottom:1em; } /* zentriert bilder */
.logo																						{ max-width:100px; }
.teaser-portale																	{ box-shadow:0px 7px 7px 0px #cccccc; }
.img-plakat																			{ box-shadow: 5px 5px 10px #888888; }

.list																						{ font-family: 'Mitr'; font-size:1.2em; font-weight:normal; }

.puenktchen hr																		{ height:4px; border:0; background:transparent url('../images/puenktchen.png') repeat-x; }

#story img																				{ box-shadow: 5px 5px 10px #cccccc; }



/* FOOTER */
footer																						{ background-color:#014d88; color:#ffffff; }
footer .footCONTENT																{ margin:0 auto; max-width:1100px; }
footer a:link																			{ color: #ffffff; text-decoration: underline; }
footer a:visited																	{ color: #ffffff; text-decoration: underline; }
footer a:hover																		{ opacity:0.7; text-decoration: underline; }
.footer																					{ overflow:hidden; font-size:1.2em; line-height:1.3em; text-align:center; margin:1em; }
.right																					{ text-align:right; }


/* ~~~~~~~~~~~~~ FORMS ~~~~~~~~~~~~~~~~ */
input[type=text], select,
input[type=password]															{ width: 100%; padding: 12px; border: 1px solid #cccccc; border-radius: 4px; box-sizing: border-box; resize: vertical; font-size:1em; }
textarea																					{ width: 100%; height:200px; padding: 12px; border: 1px solid #cccccc; border-radius: 4px; box-sizing: border-box; resize: vertical; font-size:1em; }
label																							{ padding: 6px 12px 12px 0; display: inline-block; } /* top right bottom left */
input[type=submit]																{ background-color: #ff8d00; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; float: left; font-size:1em; }
.container																			{ border-radius: 7px; border:solid 1px #cccccc; background-color: #f2f2f2; padding: 20px; }
.col-25																					{ float: left; width: 25%; margin-top: 6px; }
.col-75																					{ float: left; width: 75%; margin-top: 6px; }
.row:after																			{ content: ""; display: table; clear: both; } /* Clear floats after the columns */

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px)						{ 
																									.col-25, .col-75, input[type=submit]			{ width: 100%; margin-top: 0; }
																								}


/* ~~~~~~~~~~~~~ NAVBAR  ~~~~~~~~~~~~~~ */
/* #navbar																					{ height:90px; } */
nav, #navbar																			{ z-index:1000; }

#navbar																					{ margin: 0 auto; max-width: 95%; height:80px; padding-top:1em; }
.navbar-fixed																		{ position: fixed; top: -3em; opacity:0.8; }

nav																							{
																									position: fixed; /* keine Animation beim Scrollen ! */
																									top: 0em;
																									width: 100%;
																									color: #777777;
																									background: #ffffff;
																									opacity:0.9;
																									font-weight: normal;
																									font-size: 1em;
																									border-bottom:solid 1px #cccccc; 
																									/*	border-top:solid 1px #ffffff; */
																								}  /* h-shadow v-shadow blur spread color */

nav ul																						{ text-align: center; margin: 0; line-height:4em; vertical-align:bottom } /* line-heigt, damit logo und text bottom aligned sind */
nav ul li																						{ display: inline-block; padding: 0 1em; line-height: 1em; color:#333333; /* font-size:1em; */ } /* line-heigt für den blauen strich drunter */
nav ul li:hover																			{
																									-webkit-transition: all 500ms;
																									-moz-transition: all 500ms;
																									-o-transition: all 500ms;
																									-ms-transition: all 500ms;
																									transition: all 300ms;
																									/* color:#3183b5; */
																									color:#014d88;
																								}
nav ul li.on																				{ color:#014d88; border-bottom: 2px solid #ff8d00; }

.filler																					{ width: 100%; height: 20px; background: #ffffff; opacity:0.85; }
.two																						{ height: 0px; }
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */


#MENU_ICON																			{ width: 100%; margin-left: auto; } /* MENU-Icon */
.menu_icon																			{ width: 35px; height: 3px; background-color:#000000; margin: 6px 0; } /* top/bottom, right/left */
.ul-2																						{ margin-left:1em; }


/* SIDENAV */
.sidenav																			{
																								height: 100%; width: 0; position: fixed; z-index: 2000; top: 0; right: 0; background-color: #333333;
																								overflow-x: hidden; transition: 0.5s; padding-top: 60px; opacity:0.85; margin-left:4em;
																								line-height:100%;
																							}
.sidenav a																			{
																								/* padding: 8px 8px 8px 32px; */ text-decoration: none; font-size: 25px; color: #ffffff; display: block;
																								transition: 0.3s; font-size:0.8em; line-height:100%; margin:1em; 
																							}
.sidenav a:hover																{ color: #ffffff; opacity:0.6; }
.sidenav .closebtn															{ position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; }


/* ALLES GRÖßER SMART-PHONE AUFLÖSUNG: */
@media screen and (max-height: 399px)						{ 
																									.sidenav {padding-top: 15px;}
																									.sidenav a {font-size: 18px;}
																								}

@media screen and (max-width: 499px)						{ footer {padding-top:0.5em; padding-bottom:0.5em; font-size:0.8em; } }
																								
@media (min-width: 1024px) 											{
																									#MENU_ICON							{ display:none }
																									nav											{ margin-top: 0; font-size: 1.3em; margin-bottom: 1ex; }
																									nav ul										{ 
																																						margin: 0; height: auto; overflow: visible; 
																																						display: flex; flex-wrap: wrap; justify-content: space-between; list-style-type: none; padding-left: 0;
																																						/* line-height:5.5em; */
																																					}
																									nav ul li										{ text-align: center; text-transform: uppercase; font-size:0.7em; line-height:1.8em; }
																									#navbar									{ padding-top:0.3em; }
																								}
																								
@media (min-width: 400px)												{
																									.reframe-X								{ max-width: 100%; }
																									.CONTENT								{ max-width: 100%; }
																									.flex-2									{  }
																									.teaser									{ max-width: 100%; margin:1em; padding:1em; }
																									.square									{ height: 120px; font-size:1.2em; line-height:1.2em; }
																									.lines p:nth-child(2)		{ width: 70%}
																									.largeblock							{ height: 90px; }
																									.sidenav a								{ font-size:120%; margin-left:30%; }
																									.img_125								{ width:360px; }
																								}																								

@media (min-width: 500px) 											{
																									.flex-2									{ display: flex; justify-content: space-between; max-width: 100%; }
		 																							.flex-content-2					{ display: flex; }
																									.teaser									{ width: 48%; height: 250px; margin:0.5em; padding:1em; }
																									.square									{ height: 120px; }
																									.menu										{ width: 48%; margin:0.5em; padding:1em; }
																									.lines p:nth-child(2)		{ width: 50%}
																									.CONTENT								{ /* text-align:justify; */ font-size:1em; line-height:130%; }
																									.CONTENT li								{ text-align:left; }
																									.footer									{ width: 48%; height: 250px; margin:0.5em; padding:1em; font-size:1em; line-height:1.3em; }
																									.sidenav a								{ font-size:100%; }
																									.ul-2-li								{ line-height:0.5em; }
																									.teaser h1								{ font-size:1em; }
																									.teaser p								{ font-size:0.8em; line-height:1.2em; }
																									.footer 									{ overflow:hidden; font-size:0.8em; line-height:1.3em; height:auto; }
																									.footerRight						{ text-align:right; }
																									.img_125								{ width:360px; }
																								}

@media (min-width: 768px) 											{
																									.teaser h1								{ font-size:1.2em; }
																									.teaser p								{ font-size:1em; line-height:1.4em; }
																									.img_125								{ width:550px; }
																								}
	
@media (min-width: 800px) 											{
																									.reframe-X 								{ max-width: 1100px; width: 90%; margin-left: auto; margin-right: auto; }

																									.footer 									{ /* width: 32%; font-size:1.1em; line-height:1.4em; */ }
																									/* .teaser 									{ height: 350px; margin:1em; padding:1.5em; overflow: hidden; } */
																									.menu 										{ margin:1em; padding:1.5em; overflow: hidden; }
																									.lines p:nth-child(2)		{ display: none } /* VORSICHT, DIESE ZEILE WIRD AUSGEBLENDET !!! */
																									.CONTENT								{ max-width: 1100px; width: 90%; /* text-align:justify; */ font-size:1.2em; line-height:150%; }
																									.sidenav a								{ font-size:120%; }
																									.teaser h1								{ font-size:1em; }
																									.teaser p								{ font-size:0.8em; line-height:1.2em; }
																									.square									{ padding:0.5em; }
}

@media (min-width: 1024px) 											{
																									.teaser									{ height: 350px; margin:1em; padding:1.5em; overflow: hidden; }
																									.square									{ height: 120px; padding:1em;}
																									.footer 									{ margin:1em; padding:1.5em; overflow: hidden; }
																									.teaser h1								{ font-size:1.5em; }
																									.teaser p								{ font-size:1em; line-height:1.4em; }
																								}

@media (min-width: 1100px) 											{
																									#navbar									{ max-width: 1100px; width:95%; }
																									.footer 									{ font-size:1em; line-height:1.6em; }
																								}









/* to top with jquery fading */
.back-to-top																			{ position:fixed; bottom:100px; right:20px; background:url(../images/arrows.svg) left top no-repeat; width:27px; height:50px; }
.back-to-top a																		{ text-indent:-9999px; display: block; }
.back-to-top:hover																{ background:url(../images/arrows.svg) left -24px no-repeat; }


.small																						{ font-size:60%; line-height:1.2em; }



#LITERATURE .frame																{ border-bottom:solid 5px #ff8d00; }
#LITERATURE .image-frame													{ float:left; width:20%; padding:0.5em; text-align:right; }
#LITERATURE .text-frame														{ float:left; width:55%; padding:0.5em; }
#LITERATURE .teaser-image													{ overflow:hidden; width:100px; }


div.Button																				{ margin:auto; width:80%; border:solid 1px #ff8d00; font-size:2em; padding:1em; text-align:center; }
div.Button:hover																	{ color:#ffffff; background:#ff8d00; }






/* TOOLTIP: */
.tooltip {
  position: relative;
  display: inline-block;
  text-decoration:underline;
	/* border-bottom: 1px dotted black; */
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 200px;
  background-color: #3183b5;
  color: #ffffff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
	font-size:12px;
	line-height:15px;
	text-align:left;
	padding: 5px;
  
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
  margin-left: -60px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}






/* ---------------- ACCORDION ALLE AUFKLAPPBAR ---------------- */
/*
p.accordions																		{ padding:0.1em; }

.accordion {
  background-color: #014d88;
	color:#ffffff;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
	font-size:1em;
}

.active, .accordion:hover {
  background-color: #ff8d00;
}

.accordion:after {
  content: '\002B';
  color: #ffffff;
  float: right;
  margin-left: 5px;
	font-size:2em;
}

.active:after {
  content: "\2212";
	color: #ffffff;
	font-size:2em;
}

.panel {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
	border:solid 1px #eeeeee;
}
*/


/* --------------- ACCORDION EINZELN AUFKLAPPBAR START ------------------*/
.accordion, .accordion * {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
 
.accordion {
    overflow:hidden;
    box-shadow:0px 1px 3px rgba(0,0,0,0.25);
    border-radius:3px;
    background:#f7f7f7;
}
 
/*----- Section Titles -----*/
.accordion-section-title {
    width:100%;
    padding:15px;
    display:inline-block;
    border-bottom:1px solid #ffffff;
    background:#aaaaaa;
    transition:all linear 0.15s;
    /* Type */
    font-size:1.100em;
    /* text-shadow:0px 1px 0px #ffffff; */
    color:#ffffff;
}
 
.accordion-section-title.active, .accordion-section-title:hover {
    background:#cccccc;
    /* Type */
    text-decoration:none;
    /* text-shadow:0px 1px 0px #1a1a1a; */
    color:#555555;
}
 
.accordion-section:last-child .accordion-section-title {
    border-bottom:none;
}
 
/*----- Section Content -----*/
.accordion-section-content {
    padding:15px;
    display:none;
}
.accordion-section-content-filter {
    padding:5px;
    display:none;
}

/* --------------- ACCORDION END ------------------*/






/* --------------- FIXED BUTTON START ------------------*/
.fixedButton1																		{
																									position: fixed; top: 25%; right: 0px; padding: 0px; box-shadow:0px 0px 5px 5px #dddddd; 
																									/* box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit; */
																								}
.roundedFixedBtn1																{
																									height: 80px; width: 100px; padding: 7px; font-size:250%; font-family: 'Architects Daughter'; font-size: 1em;
																									font-weight: normal; border-radius: 2%; background-color: #ff00ff; color: white; text-align: center; cursor: pointer;
																								}
.fixedButton2																		{
																									position: fixed; top: 15%; left: 0px; padding: 0px; box-shadow:0px 0px 5px 5px #dddddd; 
																									/* box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit; */
																								}
.roundedFixedBtn2																{
																									height: 202px; width: 300px; padding: 5px; 
																									border-radius: 2%; background-color: #ffffff; text-align: center; cursor: pointer;
																								}
.fixedButton3																		{
																									position: absolute; top: 7%; left: 0px; padding: 0px;
																									/* box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit; */
																								}
.roundedFixedBtn3																{
																									height: 220px; width: 550px; padding: 5px; 
																									
																								}
/* --------------- FIXED BUTTON END ------------------*/














#mailFrame				{ margin:15px; padding:20px; max-width:900px; border:solid 1px #dddddd; }


/* TAB SLIDE */

.tablink																					{ background:#f3f3f3; padding:15px; border:none; width:80%; margin-bottom:10px; border-radius: 4px; }
.tablink:hover																		{ opacity:0.8; }
.StoryOn																					{ background:#014d88; padding:15pxpx; border:none; width:80%; margin-bottom:10px; color:#ffffff; }



/* W3.CSS 4.13 June 2019 by Jan Egil and Borge Refsnes */
/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
.w3-sidebar.w3-collapse{display:block!important}}
.w3-bar-block .w3-dropdown-hover,.w3-bar-block .w3-dropdown-click{width:100%}
.w3-card,.w3-card-2{box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)}

.w3-bar .w3-bar-item{padding:8px 16px;float:left;width:auto;border:none;display:block;outline:0}
.w3-bar .w3-button{white-space:normal}
.w3-padding-small{padding:4px 8px!important}.w3-padding{padding:8px 16px!important}.w3-padding-large{padding:12px 24px!important}
.w3-container:after,.w3-container:before,.w3-panel:after,.w3-panel:before,.w3-row:after,.w3-row:before,.w3-row-padding:after,.w3-row-padding:before, .w3-cell-row:before,.w3-cell-row:after,.w3-clear:after,.w3-clear:before,.w3-bar:before,.w3-bar:after{content:"";display:table;clear:both}

/* animations */
.w3-animate-opacity{animation:opac 0.8s}@keyframes opac{from{opacity:0} to{opacity:1}}
.w3-animate-left{position:relative;animation:animateleft 0.4s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
.w3-animate-right{position:relative;animation:animateright 0.4s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
.w3-animate-top{position:relative;animation:animatetop 0.4s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
.w3-animate-bottom{position:relative;animation:animatebottom 0.4s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
.w3-animate-zoom {animation:animatezoom 0.6s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}