/* 	HTML5 Boilerplate
 
	html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
	v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark
*/

/* CSS reset with box-sizing fix */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 vertical-align: baseline;
 outline: none;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
 display: block;
}
html {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
*, *:before, *:after {
 box-sizing: inherit;
}
body {
 line-height: 1;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}

@media screen and (max-width: 640px) {
  table {
    overflow-x: auto;
    display: block;
  }
}

/* Element-Klassen */

select {
	height:28px;
}

button, .button {
	padding: 6px 12px;
	color: #000;
	font-size:12px;
	text-decoration: none;
	outline: none;
  background: #fff;
	vertical-align: baseline;
	cursor: pointer;
	margin: 0;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.25);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.25);
	box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  border: 0px solid #eee;
  border-bottom: 1px solid rgba(0,0,0,0.25);
}

button:hover, .button:hover {
    background: #aaa;
    background: -webkit-gradient(linear, left top, left bottom, from(#aaa), to(#ccc));
    background: -moz-linear-gradient(top, #aaa, #ccc);
    background: linear-gradient(#aaa, #ccc);
}
.ie .button:hover {
    border: none;
    -pie-background: linear-gradient(#aaa, #ccc);
}
.button:active {
    background: #666;
    background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#666));
    background: -moz-linear-gradient(top,  #ccc, #666);
    background: linear-gradient(#ccc, #666);
}
.ie .button:active {
    border: none;
    -pie-background: linear-gradient(#ccc, #666);
}

.button.orange {
    background: #FF483A;
    background: -webkit-gradient(linear, left top, left bottom, from(#CC532F), to(#FF483A));
    background: -moz-linear-gradient(top, #CC532F, #FF483A);
    background: linear-gradient(#CC532F, #FF483A);
}
.ie .button.orange {
    border: none;
    -pie-background: linear-gradient(#bc1928, #ec1928);
}
.button.orange:hover {
    background: #f47c20;
    background: -webkit-gradient(linear, left top, left bottom, from(#bc1928), to(#9f0712));
    background: -moz-linear-gradient(top, #bc1928, #9f0712);
    background: linear-gradient(#bc1928, #9f0712);
}
.ie .button.orange:hover {
    border: none;
    -pie-background: linear-gradient(#bc1928, #9f0712);
}
.button.orange:active {
    background: #ff8b16;
    background: -webkit-gradient(linear, left top, left bottom, from(#ec1928), to(#bc1928));
    background: -moz-linear-gradient(top,  #ec1928, #bc1928);
    background: linear-gradient(#ec1928, #bc1928);
}
.ie .button.orange:active {
    border: none;
    -pie-background: linear-gradient(#ec1928, #bc1928);
}

input.important {
  display:none !important; /*SPAM-Schutz*/
}


/************* ELEMENTE **************/

body {
  font-size: 14px;
  line-height: 18px;
  font-weight: 300; 
  color: #333;
}

#content a, #content a:visited { color: #437F9C; }

#content a.btn { font-size: 1em; text-decoration: none; color:#333; border: 1px solid #ccc; padding: 4px 15px; transition: background-color .3s; background-color: #eee; border-radius: 4px; }
#content a.btn:hover { background-color: rgba(0,0,0,0.4); color: white; }

@media only screen and (max-width: 780px) {
  #content a.btn { font-size: 0.9em; padding: 5px 13px; }
}

@media only screen and (max-width: 560px) {
  #content a.btn { font-size: 0.8em; padding: 4px 11px; }
}


#content .content_box {
  margin: 0 auto;
}

#content .content_box > *,
#content h1,
#content h2,
#content h3,
#content p,
#content ul,
#content hr,
#content table,
#content .form_box,
#content .youtube_box,
#content .vimeo_box,
#content .video_box,
#content .code_box,
#content .image_box,
#content .table_box { max-width: 1000px; }

/* 1. Header */

#content h1 { color: #333; margin: 0 auto 0.5em; font-size: 2.0em; font-weight: 700; padding: 0.3em 0 0.1em; line-height: 1em}
#content h2 { color: #555; margin: 0 auto 0.4em; font-size: 1.5em; font-weight: 700; line-height: 1.1em; padding: 0.3em 0 0.1em;}
#content h3 { color: #777; margin: 0 auto 0.3em; font-size: 1.2em; font-weight: 700; padding: 0.3em 0 0.1em;}
#content h4 { color: #999; margin: 0 auto 0.2em; font-size: 1em; font-weight: 700; padding: 0.3em 0 0.1em;}

@media only screen and (max-width: 1020px) {
  #content h1, #content h2, #content h3, #content h4 { padding-left: 10px; padding-right: 10px; }
}

@media only screen and (max-width: 780px) {
  #content h1 { font-size: 1.5em; }
  #content h2 { font-size: 1.3em; }
  #content h3 { font-size: 0.9em; }
  #content h4 { font-size: 0.8em; }
}

@media only screen and (max-width: 560px) {
  #content h1 { font-size: 1.3em; }
  #content h2 { font-size: 1.1em; }
  #content h3 { font-size: 0.9em; }
  #content h4 { font-size: 0.8em; }
}

/* 2. Paragraph */

#content p, #content ul { margin: 0 auto 1em; padding: 0;}
#content ul { padding-left: 16px;}

@media only screen and (max-width: 1020px) {
  #content p { padding-left: 10px; padding-right: 10px; }
  #content ul { padding-left: 26px; padding-right: 10px; }
}

@media only screen and (max-width: 780px) {
  #content p, #content ul { font-size: 0.9em; }  
}

@media only screen and (max-width: 560px) {
  #content p, #content ul { font-size: 0.9em; }  
}

/* 3. Image */

#content .image_box { margin: 0 auto 10px; display: -webkit-flex; display: flex; -webkit-align-items: flex-start; /* Safari */ align-items: flex-start; }
#content .image_box.sizetype_wide { width: 100%; max-width: 100%; }
#content .image_box.show_text_beyond { display: block; }

#content .image_box .image_div { flex: 0 0 auto; margin: 0 auto;}
#content .image_box.show_text_left .image_div { order : 2; }
#content .image_box.show_text_right .image_div { order : 1; }
#content .image_box.show_text_beyond .image_div { text-align: center; }

#content .image_box .content_image { border: none; padding: 0; width:100%; }
#content .image_box.show_text_left .content_image { width: 100%; }
#content .image_box.show_text_right .content_image { width: 100%; }
#content .image_box.show_text_beyond .content_image { width: auto; }
#content .image_box.sizetype_custom .content_image { width: 100%; }

#content .image_box .image_text { padding: 0 10px; align-self: flex-end; }
#content .image_box .image_text p { margin-bottom: 0; }
#content .image_box.sizetype_wide .image_text { position: absolute; top: 45%; text-align: center; }

#content .image_box.show_text_left .image_text { order : 1; padding-left: 0; }
#content .image_box.show_text_right .image_text { order : 2; padding-right: 0; }
#content .image_box.show_text_beyond .image_text { text-align: center; }

@media only screen and (max-width: 1020px) {
  #content .content_image { padding-left: 10px; padding-right: 10px; }
}

@media only screen and (max-width: 400px) {
  #content .content_image { width: 100% !important; }  
  #content .image_box { display: block; }
}

/* 4. Audio */

#content .audio_box { background-color: rgba(230,230,230,0.3); padding: 1em 0 0; border-top: 1px solid rgba(51, 51, 51, 0.1); border-bottom: 1px solid rgba(51, 51, 51, 0.1); margin-bottom: 1em; }
#content audio { display: block; margin: 0 auto 5px; }
#content .audio_title { display: block; text-align: center; font-weight: 700; color:#333; font-size: 12px; margin: 0 auto 1em;}

@media only screen and (max-width: 1020px) {
  #content audio { padding-left: 10px; padding-right: 10px; }
}

@media only screen and (max-width: 560px) {
  #content audio { width: 100% !important; }  
}

/* 5. Trennlinien */

#content hr { margin: 5px auto;}

/* 6. Video */

#content .video_box { padding: 1em 0 0; margin-bottom: 1em; }
#content video { display: block; margin: 0 0 1em; border: 1px solid #ddd;}

@media only screen and (max-width: 1020px) {
  #content video { padding-left: 10px; padding-right: 10px; }
}

@media only screen and (max-width: 560px) {
  #content video { width: 100% !important; }  
}

/* 7. Tables */

#content .table_box { padding: 0; margin-bottom: 1em;}
#content table { border-spacing: 0px; }
#content table thead, table tbody { border:inherit; border-color: #ccc; border-style:solid; }
#content table tr { border:inherit; }
#content tr th { border:inherit; padding: 3px 6px; background-color:rgba(255,255,255,0.3); -webkit-box-sizing: initial; -moz-box-sizing: initial; box-sizing: initial; }
#content tr td { border:inherit; padding: 3px 6px; background-color:rgba(255,255,255,0.6); -webkit-box-sizing: initial; -moz-box-sizing: initial; box-sizing: initial; height: 17px; }

@media screen and (max-width: 600px) {
  #content table { margin: 0 10px 1em !important; width: calc(100% - 20px); max-width: calc(100% - 20px) !important; }
  #content thead { display: none !important; }
  #content tr td:first-child {background: #f0f0f0; font-weight:bold;}
  #content tbody td {display: block;  text-align:center; height: auto; width: auto !important;}
  #content tbody td:before { 
    content: attr(data-th); 
    display: block;
    text-align:center;  
  }
}


/* 8. Contact */

.form_box { margin: 0 auto 1em; }
#content form { padding: 0 0 5px; margin: 0 0 1em;}

.form_box textarea, .form_box input {
  display:block;
  font-size: 1em;
  font-family: inherit;
}

@media only screen and (max-width: 1020px) {
  #content form { padding-left: 10px; padding-right: 10px; }
}

input[type=button], input[type=submit] { 
  -webkit-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0; 
  -moz-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
  box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
  color:#333;
  background-color:#eee;
  border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border:none;
  font-size:14px;
  font-weight:300;
  padding: 4px 8px;
  cursor: pointer;
}

input[type=text], 
input[type=date],
input[type=datetime],
input[type=number],
input[type=search],
input[type=time],
input[type=url],
input[type=email], 
input[type=tel], 
input[type=radio], 
input[type=password], 
input[type=email],
textarea, 
select { 
  font-family: inherit;
  font-size: 1.1em;
  font-weight: lighter;
  border:1px solid #ccc; 
  -webkit-transition: all 0.30s ease-in-out; 
  -moz-transition: all 0.30s ease-in-out; 
  -ms-transition: all 0.30s ease-in-out; 
  -o-transition: all 0.30s ease-in-out; 
  outline: none; 
  padding: 4px 6px; 
  margin: 0 1% 3px 0;
  border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  outline: none;
}

#content input::-webkit-input-placeholder { font-size: 0.8em; }
#content input::-moz-placeholder { font-size: 0.8em; } /* firefox 19+ */
#content input:-ms-input-placeholder { font-size: 0.8em; } /* ie */
#content input:-moz-placeholder { font-size: 0.8em; }
#content textarea::-webkit-input-placeholder { font-size: 0.8em; }
#content textarea::-moz-placeholder { font-size: 0.8em; } /* firefox 19+ */
#content textarea:-ms-input-placeholder { font-size: 0.8em; } /* ie */
#content textarea:-moz-placeholder { font-size: 0.8em; }

@media only screen and (max-width: 780px) {
  #content form { width: calc() !important; padding: 0 10px;}
}

@media only screen and (max-width: 560px) {
  #content form { width: 100% !important; padding: 0 10px;}
}

/* 9. Tool */

#content .code_box { padding: 1em 0 0; margin-bottom: 1em; }
#content .code_title { margin-bottom: 0; }

/* 10. Gallery */

#content .gallery_div { background-color: rgba(230,230,230,0.3); padding: 1em 0 0; border-top: 1px solid rgba(51, 51, 51, 0.1); border-bottom: 1px solid rgba(51, 51, 51, 0.1); margin-bottom: 1em; }
#content .gallery { position: relative; margin: 0 auto 1em; display: block; }
#content .gallery::after { content: ''; display: block; clear: both; }

#content .gallery .thumbnail { position: absolute; width: 200px; height: 200px; overflow: hidden; }
#content .thumbnail .gallery_image { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }

#content .thumbnail .gallery_image.landscape { height: 100%; width: auto; }
#content .thumbnail .gallery_image.portrait { height: auto; width: 100%; }

@media only screen and (max-width: 1020px) {
  #content .gallery { margin-left: 10px; margin-right: 10px; }
}

/* 11. YouTube */

#content .youtube_inner_box { position: relative; height: 0; margin : 0 0 1em; }
#content iframe.youtube { position: absolute; top:0; left: 0; width: 100%; height:100%; border: 1px solid #ddd; }

@media only screen and (max-width: 560px) {
  #content .youtube_inner_box { width: 100% !important; padding-bottom: 56% !important;}
}

/* 12. Vimeo */

#content .vimeo_inner_box { position: relative; height: 0; margin : 0 0 1em; }
#content iframe.vimeo { position: absolute; top:0; left: 0; width: 100%; height:100%; border: 1px solid #ddd;}

@media only screen and (max-width: 560px) {
  #content .vimeo_inner_box { width: 100% !important; padding-bottom: 56% !important;}
}

/* 13. Superheader */

#content .superheader { margin: 0 auto 0; padding-top: 10px; padding-bottom: 10px; }
#content .superheader::after { content: ''; display: block; clear: both; }
#content .superheader_image { margin: 0 1% 0 0; }
#content .superheader_image img { width: 100%; margin: 0; padding: 0; margin-bottom: 20px;}
#content .superheader_title { font-size: 200%; font-weight: bold; margin-top: 0px; padding-left: 0;}
#content .superheader_text { padding: 0; }
#content .superheader aside { padding-left: 10px; }
#content .superheader_btn { display: inline-block; }

@media only screen and (max-width: 1020px) {
  #content .superheader { max-width: 98%; padding: 0 1% 0; }
}

@media only screen and (max-width: 700px) {
  #content .superheader { padding-top: 10px; padding-bottom: 10px; }
  #content .superheader_image { float: none; margin: 0 auto; width: 96% !important; }
  #content .superheader_title { margin: 0.3em 0 0 0; font-size: 180%; }
  #content .superheader aside { padding: 0; margin: 1em 0 !important; }
  #content .superheader_text { padding: 0; clear: left;}
}

@media only screen and (max-width: 550px) {
  #content .superheader_image { max-width: 96% !important; }
  #content .superheader_title { font-size: 160%; }
}

/* 14. Teaser */

#content .teaser_box { background-color: rgba(230,230,230,0.3); border-top: 1px solid rgba(51, 51, 51, 0.1); border-bottom: 1px solid rgba(51, 51, 51, 0.1); margin-bottom: 1em; }
#content .teaser { margin: 10px auto 10px; overflow: hidden; padding-bottom: 5px; }
#content .teaser::after { content: ''; display: block; clear: both; }
#content .teaser_image { float: left; margin: 0; width: 30%; padding: 2px; border: 1px solid rgba(51, 51, 51, 0.1); background-color: #fff}
#content .teaser_hyperlink { text-decoration: none; }
#content .teaser_title { font-weight: bold; margin:0; padding: 3px 0 3px;}
#content .teaser_subtitle { font-weight: bold; margin:0; padding: 3px 0 7px; }
#content .teaser_text { margin: 5px 0 5px 31%; padding: 0 10px; font-size: 90%; }
#content .teaser_datum { margin:6px 0 0; font-size: 0.8em; color: #999; }
#content .teaser_btn { display: inline-block; margin: 2px 0;}
#content .teaser a { color: #333;}


@media only screen and (max-width: 1020px) {
  #content .teaser_image { margin-left: 10px; }
  #content .teaser_title { margin-left: 10px; margin-right: 10px; }
  #content .teaser_subtitle { margin-left: 10px; margin-right: 10px; }
  #content .teaser_text { padding-left: 20px; }
}

@media only screen and (max-width: 700px) {
  #content .teaser { margin: 0; }
  #content .teaser_image { float: none; margin: 0 0 0 10px; width: 96% !important; }
  #content .teaser_text { margin: 0; font-size: 0.9em; padding: 0 10px; }
}

@media only screen and (max-width: 550px) {
  #content .teaser_text { margin: 0; font-size: 0.9em; padding: 0 10px; }
}

/* 15. Quadriple */
#content .quadriple_box { background-color: rgba(230,230,230,0.3); border-top: 1px solid rgba(51, 51, 51, 0.1); border-bottom: 1px solid rgba(51, 51, 51, 0.1); padding: 1em 0; margin: 0 0 1em;}
#content .quadriple { margin: 0 auto; overflow: hidden; }
#content .quadriple a {text-decoration: none; color:#666;}
#content .quadriple_hyperlink { display: block; }
#content .quadriple::after { content: ''; display: block; clear: both; }
#content .quadriple aside { float: left; text-align: center; margin: 0 0.5% 0.5%; background-color: #fff; padding: 0.5em;}
#content .quadriple.two aside { width: 49%; }
#content .quadriple.three aside { width: 32.333333333%; }
#content .quadriple.four aside { width: 24%; }
#content .quadriple_content { margin: 5px; }
#content .quadriple aside .quadriple_image_div { overflow: hidden; text-align: center; margin-bottom: 1em; }
#content .quadriple.two aside .quadriple_image { max-height: 100%; max-width: 100%; overflow: hidden; }
#content .quadriple.three aside .quadriple_image { max-height: 100%; max-width: 100%; overflow: hidden; }
#content .quadriple.four aside .quadriple_image { max-height: 100%; max-width: 100%; overflow: hidden; }
#content .quadriple_text { font-size: 1em; margin: 0;}

#content .quadriple aside {display: inline-block;vertical-align: middle;-webkit-transform: translateZ(0);transform: translateZ(0);box-shadow: 0 0 1px rgba(0, 0, 0, 0);-webkit-backface-visibility: hidden;backface-visibility: hidden;-moz-osx-font-smoothing: grayscale;position: relative;-webkit-transition-property: color;transition-property: color;-webkit-transition-duration: 0.5s;transition-duration: 0.5s; }
#content .quadriple.spezial aside:before {content: "";position: absolute;z-index: -1;top: 0;left: 0;right: 0;bottom: 0;background: #ccc;-webkit-transform: scaleY(0);transform: scaleY(0);-webkit-transform-origin: 50% 0;transform-origin: 50% 0;-webkit-transition-property: transform;transition-property: transform;-webkit-transition-duration: 0.5s;transition-duration: 0.5s;-webkit-transition-timing-function: ease-out;transition-timing-function: ease-out; }
#content .quadriple aside:hover, #content .quadriple aside:focus, #content .quadriple aside:active { font-weight: : bold; }
#content .quadriple aside:hover:before, #content .quadriple aside:focus:before, #content .quadriple aside:active:before {-webkit-transform: scaleY(1);transform: scaleY(1);-webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); }
#content .quadriple aside:hover * {font-weight: bold; cursor: pointer;}

#content .quadriple aside:first-child { margin-left: 0 }
#content .quadriple aside:last-child { margin-right: 0 }

#content .quadriple_box.bunt aside:hover, #content .quadriple aside:focus, #content .quadriple aside:active {color: #333; }
#content .quadriple_box.bunt aside:hover * {color:#333;}

@media only screen and (max-width: 780px) {
  #content .quadriple.four aside { width: 49%; }  
  #content .quadriple_title { font-size: 1.2em; }
  #content .quadriple_text { font-size: 1em; margin: 0;}
  #content .quadriple_image_div { margin: 0 auto; }
}

@media only screen and (max-width: 560px) {
  #content .quadriple aside { width: 100% !important; float:none !important; text-align: left; margin: 1% 0; padding: 5px; min-height: 0 !important; }
  #content .quadriple_image_div { float:none; margin: 0 8px 0 0; border: 0px red dotted; }
  #content h2.quadriple_title { margin-left: 1%; }
  #content h3.quadriple_title { margin-left: 1%; padding-left: 2px; }
  #content .quadriple_text { margin-left: 1%; padding-left: 2px; }
}



/************** KLASSEN **************/

/* 1. Header */

/* 2. Paragraph */

#content .smiley { width:20px !important; height:20px !important; border:none !important; padding:0 !important; margin: 0 !important; vertical-align:top; }

/* 3. Image */

/* */

/* 5. Lines */

#content hr.standard { border: 0; height: 1px; background: #333; }
#content hr.verlauf { border: 0; height: 1px; background: #333; background-image: linear-gradient(to right, #ccc, #333, #ccc); }
#content hr.dick { border: 0; height: 3px; background: #333; }
#content hr.gestrichelt { border: 0; height: 1px; border-bottom: 1px dashed #ccc; background: #999; }
#content hr.unsichtbar { border: 0; height: 1px; background: none; }





/* Text, der nicht selektierbar sein soll */
nav *, .noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* IE/Edge */
  user-select: none;           /* non-prefixed version, currently
                                  not supported by any browser */
}


/********** mywebstyle-GRID ***********/
  .col-2, .col-3, .col-4, .col-6, .col-8, .col-9, .col-12 { float: left; }
  .col-2 { width:  25%; }
  .col-3 { width:  25%; }
  .col-4 { width:  33.33333333%; }
  .col-6 { width:  50%; }
  .col-8 { width:  66.66666666%; }
  .col-9 { width:  75%; }

@media only screen and (max-width: 900px) {
  .col-2 { width:  33.33333333%; }
  .col-3 { width:  50%; }
  .col-4 { width: 100%; }
  .col-6 { width: 100%; }
  .col-8 { width: 100%; }
  .col-9 { width: 100%; }
}

@media only screen and (max-width: 500px) {
  .col-2 { width:  50%; }
  .col-3 { width: 100%; }
  .col-4 { width: 100%; }
  .col-6 { width: 100%; }
  .col-8 { width: 100%; }
  .col-9 { width: 100%; }
}



/***** NAVIGATION *****/

nav .menu_icon {display: none;}

nav ul { list-style: none; }
nav ul li a { text-decoration: none; }

nav.popup { background-color: rgba(0, 0, 0, 0.50); position: absolute; top: 0; padding: 0; width: 100%; z-index: 20;}
nav.popup .menu_icon { display: none; }
nav.popup::after { content: ''; display: block; clear: both; }
nav.popup ul { margin: 0 auto; padding: 0; max-width: 1000px; }
nav.popup ul li:hover { background-color: rgba(0, 0, 0, 0.40); }
nav.popup ul li:hover > ul { display: block; }
nav.popup ul li a { display: inline-block; color: white; padding: 12px 20px 14px 20px; background: no-repeat center left; background-size: 15px 15px; text-decoration: none; position: relative; }
nav.popup ul li a:visited { color: white; }
nav.popup ul li a:hover { background-color: rgba(0, 148, 234, 0.50); }
nav.popup ul ul { position: absolute; top: 100%; background-color: rgba(0, 0, 0, 0.50); display: none;}
nav.popup ul ul li { position: relative; }
nav.popup ul ul li a { width: 100%; }
nav.popup ul ul ul { background-color: rgba(0, 0, 0, 0.40); left: 100%; top: 0px; width: 100%;}
nav.popup a[aria-haspopup="true"]::after { content: ''; display: block; width: 0px; height: 0px; position: absolute; top: 16px; right: 15px; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 4px solid white; }
nav.popup > ul > li > a[aria-haspopup="true"]::after { border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid white; left: 20px; right: auto; bottom: 6px; top: auto; }
nav.popup a.aktiv { background-color: rgba(0, 148, 234, 0.40); color: #333; }


/* top-level */
nav.popup > ul { margin: 0 auto; }
nav.popup > ul > li { float: left; }
nav.popup > ul > li > a { width: auto; }

/* footer */
footer { margin: 0; color: #333; background-color:#fff; padding: 8px 0;}
footer .content { font-size: .8em; color: #333; }
footer .content a { color: #437F9C; }

@media only screen and (max-width: 1020px) {
  footer .content { padding-left: 10px; padding-right: 10px; }
}

/* medium screens */
@media screen and (max-width:1000px) {
  nav.popup a { font-size: 0.9em; }
  nav.popup > ul > li > a { padding: 10px 15px 10px 15px; }
  nav.popup > ul > li > a[aria-haspopup="true"]::after { left: 15px; bottom: 3px; }
}

@media screen and (max-width:900px) {
  nav.popup a { font-size: 0.85em; }
}

@media screen and (max-width:800px) {
  nav.popup a { font-size: 0.8em; }
}

/* popup on small screens */
@media screen and (max-width:700px) {
  nav.popup { padding: 10px 10px; right: 0; }
  nav.popup .menu_icon { display: block; width: 20px; cursor: pointer;}
  /*nav.popup:hover > ul, nav.popup:active > ul { display: block; }  */
  nav.popup ul, nav.popup ul ul, nav.popup ul ul ul { position: static; }
  nav.popup > ul { padding: 0; display: none; }
  nav.popup > ul > li { float: none; }
  nav.popup ul li:hover { background: none; }
  nav.popup ul li:hover > ul { display: none; }
  nav.popup ul li a { width: auto; display: block; margin: 4px 10px; padding: 4px 15px; }
  nav.popup ul li a:hover { background-color: rgba(255, 255, 255, .2); }
  nav.popup ul ul { background: none; }
  nav.popup ul ul li a { margin-left: 20px; width: auto; }
  nav.popup ul ul ul { background: none; }
  nav.popup ul ul ul li a { margin-left: 40px; width: auto; }
  nav.popup > ul > li a[aria-haspopup="true"]::after { border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid white; right: auto; left: 2px; bottom: 7px; top: auto; }
  nav.popup a.aktiv { display: block; }
}

/***** ********** *****/