/* STYLE VARIABLES */

:root {

/* HEADER */
--header-color: #581090;
--header-background:  #366c411a;
--header-boxsizing: border-box;
--header-border-radius: 20px 20px 20px 20px;
--header-padding: 20px;
--header-display: grid;
--header-gridtemplate-columns: auto 1fr;
--header-alignitems: center;
--header-justifyitems: center;
--header-media-gridtemplatecolumns: 1fr;
--header-media-padding: 2px;

/* FOOTER */
--footer-borderradius: 20px 20px 20px 20px;
--footer-background: #366c411a url(/templates/frbasic/img/footer.png) no-repeat center bottom; 
--footer-backgroundsize: cover;
--footer-color: #366c41;
--footer-paddingleft: 20px;
--footer-paddingright: 20px;
--footer-minheight: 50px;
--footer-display: flex;
--footer-height: initial;
--footer-justifycontent: center;
--footer-media-paddingleft: 2px;
--footer-media-paddingright: 2px;

/* NAVIGATION MENU */
--headerbottom-background: linear-gradient(rgba(98, 36, 155, 0.1), rgba(98, 36,115,0)); 
--headerbottom-height: 20px;
--headerbottom-marginbottom: margin-bottom: 0px; 
--headerbottom-padding: 0;
--footertop-background: linear-gradient(rgba(98, 36, 155, 0.0), rgba(98, 36,115,0.1)); 
--footertop-height: 20px;
--footertop-marginbottom: margin-bottom: 0px; 
--footertop-padding: 0;
--menubox-background: ;
--menubox-borderradius: 0;
--menubox-padding: 0 10px;
--menubutton-margin: 0;
--menubutton-padding: 0;
--menubutton-border: 0;
--menubutton-color: #800080;
--menubutton-background: #800080;
--menubutton-opened-background: #5ca66a;
--link-fontfamily: 'Lato';
--link-color: #800080;
--link-background: #800080;
--link-fontsize: 1.0em;
--link-fontweight: 400;
--link-padding: 10px 10px;
--link-letterspacing: 1px;
--link-textdecoration: none;
--link-texttransform: uppercase;
--link-textshadow: 1px 1px 1px #000;
--link-lineheight: 140%;
--link-hovercolor: #ffffff;
--link-hoverbackground: #44a25a;
--link-sub-color: #ffffff;
--link-sub-fontsize: 0.7em;
--link-sub-fontweight: 400;
--link-sub-hovercolor: #ffffff;
--link-sub-hoverbackground: #ba43b9;
--link-sub-background: #800080e6;
--link-sub-padding:  6px 10px;

/* BREADCRUMBS */
--breadcrumb-hovercolor: #800080;

}


html {height:100%;}

body { 
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-family: 'Lato', sans-serif;
	font-size: 14px;
	line-height:130%;
	color:#333;
}
 

/* basics */ 
area, usemap {border:0;}
a img {border:0;}
a { text-decoration: none;}


/*navigation*/
.frnav li a:hover, .frnav li a:focus, .frnav li ul li a, .frnav a.menu-current, ul.frnav a.menu-parent { background-color: var(--link-background); color: var(--link-hovercolor);}
a:hover {color: var(--breadcrumb-hovercolor);} 

/*styles*/
/*headers*/

h1{
color: #800080;  
margin: 3px 0 10px 0;
line-height:120%;
font-size:3em; 
line-height:80%; 
font-weight:600; 
text-shadow: 2px 6px 9px #999;
font-family: 'Merienda';
}
@media (max-width: 700px)
  { H1 {font-size: 1.5em} }

h2{ 
color: #800080;  
margin: 3px 0 10px 0;
line-height:120%;
font-size: 2.25em; 
font-weight: bold;
text-shadow: 2px 6px 9px #aaa;
font-family: 'JosefinSS';
}
@media (max-width: 700px)
  { H2 {font-size: 1.2em} }

h3{ 
color: #800080; 
margin: 3px 0 10px 0;
line-height:120%;
font-size: 1.6em; 
text-shadow: 2px 4px 9px #ccc;
font-family: 'JosefinSSI';
}
@media (max-width: 700px)
  { H3 {font-size: 1.0em} }

h4{
margin: 3px 0 10px 0;
font-size: 1.4em;
color: #e3e3e3;
}
@media (max-width: 700px)
  { H4 {font-size: 0.9em} }

h5{
margin: 3px 0 10px 0;
font-size: 1.1em;
color: #e3e3e3;
}
@media (max-width: 700px)
  { H5 {font-size: 0.8em} }

h6{
margin: 3px 0 10px 0;
font-size: 0.9em;
color: #e3e3e3;
}
@media (max-width: 700px)
  { H6 {font-size: 0.7em} }


.topmenubar a { font-size: 18px ! important; }


hr{
	border:dotted #327893 1px; height:1px;
	clear:both;
}


li {	
	padding-bottom: 4px;		
} 

ul {	
	margin-top: 0;
	margin-bottom: 10px;
	margin-left: 0.9em;
	padding-left: 0.9em;
	list-style-image: url(img/li.gif);
	list-style-type: square	
}



ol {	
	margin-top: 0;
	margin-bottom: 10px;
	margin-left: 0.9em;
	padding-left: 0.9em;		
}


address {
	line-height:120%;
	margin: 10px 0 20px 0;
	padding-left: 10px;
	border-left: 6px solid #cdc2b6;
	font-style: normal;
	font-weight: bold;
	}


blockquote {	
	padding: 10px;
	margin: 0 0 20px 0;
}

pre, code {
	padding: 5px 0 10px 6px;
	margin: 3px 0 20px 0;	
	font-size:1em;	
	overflow:auto; 
	line-height:1.5em;
	color:#eee;		
}

table {	
	border-collapse:collapse;	
	border-top: 1px solid #cdc2b6;
	margin-top: 3px;
	margin-bottom:5px;
	width:100%;
	font: 0.85em;	
}

/*
table caption {font-size:1.1em; text-align:left; }
table th {font-size:0.9em; padding: 4px; text-align:left; vertical-align: top;  border-bottom: 1px solid #373737;}
table tbody td {font-size:0.9em; padding: 4px; vertical-align: top;  border-bottom: 1px solid #373737;}
table tbody tr:hover td {background-color:#444;}
tbody td p, tbody td h1, tbody td h2, tbody td h3, tbody td h4 {margin: 0; line-height:110%;}
*/
input , textarea, pre, code, blockquote, select {
	border: 1px solid #f57700;  background: transparent  url(img/bg50.png);  color: #000;
}


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

/* Specials */
p img[align="right"], h3 img[align="right"] { float:right; margin: 4px 0 5px 10px; max-width: 49%;}
p img[align="left"], h3 img[align="left"] { float:left; margin: 4px 10px 5px 0; max-width: 49%;}


body {
	margin: 0; padding: 0; 
	height:100%;
	color:#333;
	
	background: #eee url(img/p3.jpg) repeat fixed;
}

.wrapper {
	max-width: 1200px;
    	width: 90%;
    	margin: 30px auto;
	background: transparent  url(img/bg75.png); 
	z-index:300;
	position:relative;
	box-shadow: 0 0 60px #666;
	border-radius: 30px;
	
}



.header { 
            width: 100%; 
            height:120px;  
            position:relative;  
            float:left;
            margin: 0 0 0 0;
            border-radius: 30px 30px 0 0 ;
            background: rgba(98, 36, 155, 0.1) no-repeat center top;
            background-size: cover;
            align-items: center;
            display: grid;
            grid-template-columns: minmax(120px, 1fr) auto 1fr;
}

.footer {
          clear:both;
          width: 100%;
          position: relative;
          background: rgba(98, 36, 155, 0.1) no-repeat center bottom;
          background-size: cover;
          color: #581090 ! important;
          box-sizing: border-box;
          border-radius: 0 0 30px 30px; 
          padding-left: 25px; 
          padding-right: 25px;
          min-height: 100px;
          height: initial;
          justify-items: center;
          align-content: center;
 }
 
.footertop { 
clear: both; 
height: var(--footertop-height); 
background: var(--footertop-background); 
margin-bottom: var(--footertop-marginbottom);
padding: var(--footertop-padding);
 }

.headerbottom { 
clear: both; 
height: var(--headerbottom-height);
background: var(--headerbottom-background); 
margin-bottom: var(--headerbottom-marginbottom); 
padding: var(--headerbottom-padding);
 }

.logopic {max-width: 40%; margin: 10px 10px 10px 20px;}

.contentbox {width: 60%; float:left; }
.contentbox .inner {min-height:330px; margin: 15px 1% 20px 4%;}
.contentbox .inner p img {max-width:100%; height: auto ! important;}

.contentboxwide {width: 100% ! important;  }
.contentboxwide .inner {margin: 15px 2% 20px 2%;}

.rightbox {width: 15%; float:right; border-left: 1px solid #999;  }
.rightbox .inner {padding:16px 16px 0 16px;}
.rightbox .inner p img {max-width:100%; height: auto ! important;}

.leftbox {width: 15%; float:left; border-right: 1px solid #999;  }
.leftbox .inner {padding:16px 16px 0 16px;}
.leftbox .inner p img {max-width:100%; height: auto ! important;}

.borderbox {height:40px; clear:both;}
/* .borderbox {height:40px; clear:both; background: transparent url(img/bg50.png) repeat-x ;} */


.fulltop {padding:0 10px 10px 10px;}
.fullbottom {clear: both; padding:10px 10px 0 10px;}

.frrow {
	/*background: #fff;*/
}
.frrow:before,
.frrow:after {
	content:"";
	display: table ;
	clear:both;
}

.frcol-1{ width: 33.33%; float: left; min-height: 1px; padding:10px 10px 10px 10px;} /* padding: 10px;}*/
.frcol-2{ width: 66.66%; float: left; min-height: 1px; padding:10px 10px 10px 10px;}  /* padding: 10px;}*/
.frcol-3{ width: 100%; float: left; min-height: 1px; padding:10px 10px 10px 10px;}  /* padding: 10px; }*/
.frcol-4{ width: 100%; float: left; min-height: 1px; padding:10px 10px 10px 10px;}  /* padding: 10px; }*/
.frcol-20{ width: 20%; float: left; min-height: 1px; padding:10px 10px 10px 10px;} /* padding: 10px;}*/
.frcol-60{ width: 60%; float: left; min-height: 1px; padding:10px 10px 10px 10px;}  /* padding: 10px;}*/
.frcol-80{ width: 80%; float: left; min-height: 1px; padding:10px 10px 10px 10px;}  /* padding: 10px; }*/
.frcol-100{ width: 100%; float: left; min-height: 1px; padding:10px 10px 10px 10px;}  /* padding: 10px; }*/




@media all and (max-width:900px){
	.frcol-1{ width: 100%; }
	.frcol-2{ width: 100%; }
	.frcol-3{ width: 100%; }
	.frcol-4{ width: 100%; }
	.frcol-20{ width: 100%; }
	.frcol-60{ width: 100%; }
	.frcol-80{ width: 100%; }
	.frcol-100{ width: 100%; }	
}


#fulltop #outervideobox {float:left; }

#fulltop .videosize1 {width: 66%;  }
#fulltop .videosize2, #fulltop .videosizedefault {width: 100%;  }
#fulltop .videosize3 {width:  126%; margin-left:-13%;}

.resizevideoswitch {display:block; float:right; width:80px; height:30px; margin: 3px 0.2% 0 0;}
.resizevideoswitch a {display:block; float:right; width:28px; height:20px; color:#fff; font-weight:bold; opacity:0.3}
.resizevideoswitch a:hover {opacity:0.6}
a#videoswitch2 {background: transparent url(img/vminus.png) no-repeat;}
a#videoswitch1 {background: transparent url(img/vplus.png) no-repeat;}
#fulltop .videosize3 .resizevideoswitch{margin: 3px 15% 0 0;}







.footer .inner { position:absolute; top:10px; left: 10%; width:80%; font-size:0.8em; text-align:center; line-height:110%;  color: #000 ! important}
.footer .inner span { font-size:0.7em;}
.footer .inner a {color: #fff ! important;}


/* #flecken {width:100%; height:100%; display:block; position:fixed; top:0; left:0; z-index:1;} */
/* .fleck { position:absolute; z-index:10;} */

.breadcrumbs {margin-left: 40px; padding:10px 5px 4px 0px; clear:both;}



/* ##########
   MENU
   ########## */
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
  background: var(--menubox-background);
  margin: var(--menubutton-margin);
  padding: var(--menubutton-padding);
  border: var(--menubutton-border);
  border-radius: var(--menubox-borderradius);
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#cssmenu #menu-button {
  display: none;
}
#cssmenu {
  font-family: var(--link-fontfamily);

}
#cssmenu > ul > li {
  float: left;
}
#cssmenu.align-center > ul {
  font-size: 0;
  text-align: center;
}
#cssmenu.align-center > ul > li {
  display: inline-block;
  float: none;
}
#cssmenu.align-center ul ul {
  text-align: left;
}
#cssmenu.align-right > ul > li {
  float: right;
}
#cssmenu > ul > li > a {
  color: var(--link-color);
  font-size: var(--link-fontsize);
  font-weight: var(--link-fontweight);
  padding: var(--link-padding);
  letter-spacing: var(--link-letterspacing);
  text-decoration: var(--link-textdecoration);
  text-transform: var(--link-texttransform);
  text-shadow: var(--link-textshadow);
}
#cssmenu > ul > li:hover > a {
  color: var(--link-hovercolor);
}
#cssmenu > ul > li.has-sub > a {
  padding-right: 30px;
}
#cssmenu > ul > li.has-sub > a:after {
  position: absolute;
  top: 22px;
  right: 11px;
  width: 8px;
  height: 2px;
  display: block;
  background: var(--link-sub-background);
  content: '';
}
#cssmenu > ul > li.has-sub > a:before {
  position: absolute;
  top: 19px;
  right: 14px;
  display: block;
  width: 2px;
  height: 8px;
  background: var(--link-sub-background);
  content: '';
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}
#cssmenu > ul > li.has-sub:hover > a:before {
  top: 23px;
  height: 0;
}
#cssmenu ul ul {
  position: absolute;
  left: -9999px;
}
#cssmenu.align-right ul ul {
  text-align: right;
}
#cssmenu ul ul li {
  height: 0;
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}
#cssmenu li:hover > ul {
  left: auto;
}
#cssmenu.align-right li:hover > ul {
  left: auto;
  right: 0;
}
#cssmenu li:hover > ul > li {
  height: 35px;
}
#cssmenu ul ul ul {
  margin-left: 100%;
  top: 0;
}
#cssmenu.align-right ul ul ul {
  margin-left: 0;
  margin-right: 100%;
}
#cssmenu ul ul li a {
  border-bottom: 1px solid rgba(150, 150, 150, 0.15);
  padding: 11px 15px;
  width: 170px;
  font-size: var(--link-sub-fontsize);
  text-decoration: none;
  color: var(--link-sub-color);
  font-weight: 400;
  background:  var(--link-sub-background);
}
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last-item > a {
  border-bottom: 0;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:hover {
  color: var(--link-sub-hovercolor);
}
#cssmenu ul ul li.has-sub > a:after {
  position: absolute;
  top: 16px;
  right: 11px;
  width: 8px;
  height: 2px;
  display: block;
  background:  var(--link-sub-background);
  content: '';
}
#cssmenu.align-right ul ul li.has-sub > a:after {
  right: auto;
  left: 11px;
}
#cssmenu ul ul li.has-sub > a:before {
  position: absolute;
  top: 13px;
  right: 14px;
  display: block;
  width: 2px;
  height: 8px;
  background:  var(--link-sub-background);
  content: '';
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}
#cssmenu.align-right ul ul li.has-sub > a:before {
  right: auto;
  left: 14px;
}
#cssmenu ul ul > li.has-sub:hover > a:before {
  top: 17px;
  height: 0;
}
@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
  #cssmenu {
    width: 100%;
  }
  #cssmenu ul {
    width: 100%;
    display: none;
  }
  #cssmenu.align-center > ul {
    text-align: left;
  }
  #cssmenu ul li {
    width: 100%;
    border-top: 1px solid rgba(120, 120, 120, 0.2);
  }
  #cssmenu ul ul li,
  #cssmenu li:hover > ul > li {
    height: auto;
  }
  #cssmenu ul li a,
  #cssmenu ul ul li a {
    width: 100%;
    border-bottom: 0;
  }
  #cssmenu > ul > li {
    float: none;
  }
  #cssmenu ul ul li a {
    padding-left: 25px;
  }
  #cssmenu ul ul ul li a {
    padding-left: 35px;
  }
  #cssmenu ul ul li a {
    color: var(--link-sub-color);
    background: none;
  }
  #cssmenu ul ul li:hover > a,
  #cssmenu ul ul li.active > a {
    color: #ffffff;
  }
  #cssmenu ul ul,
  #cssmenu ul ul ul,
  #cssmenu.align-right ul ul {
    position: relative;
    left: 0;
    width: 100%;
    margin: 0;
    text-align: left;
  }
  #cssmenu > ul > li.has-sub > a:after,
  #cssmenu > ul > li.has-sub > a:before,
  #cssmenu ul ul > li.has-sub > a:after,
  #cssmenu ul ul > li.has-sub > a:before {
    display: none;
  }
  #cssmenu #menu-button {
    display: block;
    padding: 17px;
    color: var(--menubutton-color);
    cursor: pointer;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 700;
  }
  #cssmenu #menu-button:after {
    position: absolute;
    top: 22px;
    right: 17px;
    display: block;
    height: 4px;
    width: 20px;
    border-top: 2px solid #dddddd;
    border-bottom: 2px solid #dddddd;
    content: '';
  }
  #cssmenu #menu-button:before {
    position: absolute;
    top: 16px;
    right: 17px;
    display: block;
    height: 2px;
    width: 20px;
    background: #dddddd;
    content: '';
  }
  #cssmenu #menu-button.menu-opened:after {
    top: 23px;
    border: 0;
    height: 2px;
    width: 15px;
    background: #ffffff;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  #cssmenu #menu-button.menu-opened:before {
    top: 23px;
    background: #ffffff;
    width: 15px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  #cssmenu .submenu-button {
    position: absolute;
    z-index: 99;
    right: 0;
    top: 0;
    display: block;
    border-left: 1px solid rgba(120, 120, 120, 0.2);
    height: 46px;
    width: 46px;
    cursor: pointer;
    background: var(--menubutton-background);
  }
  #cssmenu .submenu-button.submenu-opened {
    background: var(--menubutton-opened-background);
  }
  #cssmenu ul ul .submenu-button {
    height: 34px;
    width: 34px;
  }
  #cssmenu .submenu-button:after {
    position: absolute;
    top: 22px;
    right: 19px;
    width: 8px;
    height: 2px;
    display: block;
    background: #dddddd;
    content: '';
  }
  #cssmenu ul ul .submenu-button:after {
    top: 15px;
    right: 13px;
  }
  #cssmenu .submenu-button.submenu-opened:after {
    background: #ffffff;
  }
  #cssmenu .submenu-button:before {
    position: absolute;
    top: 19px;
    right: 22px;
    display: block;
    width: 2px;
    height: 8px;
    background: #dddddd;
    content: '';
  }
  #cssmenu ul ul .submenu-button:before {
    top: 12px;
    right: 16px;
  }
  #cssmenu .submenu-button.submenu-opened:before {
    display: none;
  }
}
/*Overview List*/
.mod_topic_loop a.videoblock {
	display: block;
	float:left;
	width: 200px;
	max-width:35%;
	height: 110px;
	overflow: hidden;
	margin: 0 10px 10px 0;
	background:#000;
}
.mod_topic_loop a.videoblock img {
	width: 100%;
	opacity:0.8;
}

.mod_topic_loop a:hover.videoblock img {
	width: 130% ! important;
	height:auto;
	margin-left: -15% ! important;
	margin-top: -30px ! important;
	opacity:1;
}

/*Topic Sidebar:*/
.mod_topic_prevnext div {clear:left; font-size:11px; margin-top:20px;}

.mod_topic_prevnext a.videoblock {
	display: block;
	float:left;
	width: 100px;
	max-width:50%;
	height: 60px;
	overflow: hidden;
	margin: 0 5px 0 0;
	background:#000;
}

.mod_topic_prevnext a.videoblock img {
	width: 100%;
	height:auto;
	opacity:0.8;
}

.mod_topic_prevnext a:hover.videoblock img {
	width: 130% ! important;
	height:auto;
	margin-left: -15% ! important;
	margin-top: -5px ! important;
	opacity:1;
}






/*Big Video Box:*/
#videobox {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; 
	height: 0; 
	overflow: hidden;
}
 
#videobox  iframe,
#videobox  object,
#videobox  embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*frontteaserblock*/

.frontteaserblock {margin:30px 0; width:100%; overflow:hidden;}
.frontteaserblock div {width:103.3%;}
.frontteaserblock div a {float:left; display:block; width:31%; margin-right:2%; opacity:0.9; background:#fff;}
.frontteaserblock div a img {width:100%; }
.frontteaserblock div a .mt_title {display:block; margin:10px 5px 0 10px; height:40px; font-size:16px; lineheight:120%; font-weight:bold; }
.frontteaserblock div a .mt_desc {display:block; margin:0 5px 0 10px; height:90px }
.frontteaserblock div a:hover  {opacity:1;}




.mobiles_only {display: none;}
.desktops_only {}

.mod_topic_commentbox {
	background: transparent;
}

/* ================================================================================================= */
/* Smaller Screens */
@media screen and (max-width: 768px) {

	body { background-image: none; }
	
	.wrapper {
    		margin: auto; 
		box-shadow: 0 0 0px #666;
		width: 96%;}


	.mobiles_only {display: block;}
	.desktops_only {display: none;}
	
	
	
	.search_box {margin-top:-30px;}
	#showlogin {display:none;}
	
	
	#fulltop #outervideobox {}
	#fulltop .videosize1 {width: 100%;  }
	#fulltop .videosize2 {width: 100%;  }
	#fulltop .videosize3 {width:  100%; margin-left:0;}
	
	.resizevideoswitch {display:none ! important;  }
	
	/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
	.container { width: 100%; border-left: none;	border-right: none;}
	
	.mainbox {margin: 20px 0 20px 0;}
	.contentbox {width: 100%;}
    .rightbox {width: 100%; border-left: none;  border-right: none; }
    .leftbox {width: 100%; border-left: none;  border-right: none; }

	/* #flecken {display:none ! important;  } */
	
	.footer { width: 100%; }
	.contentbox .inner {margin: 10px;  }
	
	
	
	
	
	a#mobilemenu { 
		display:  block;  
		background: #e3e3e3;   
		color: #800080;
		width:100%;
		clear: both;
		font-size:16px;
	}
	
	ul#mobile, ul#mobile ul, ul#mobile ul ul {width:100% ! important; position: static ! important; margin: 0 0 0 0 ! important; display: none}
	
	ul#mobile ul {}
	ul#mobile li, ul#mobile li li, ul#mobile li li li {
		width:100% ! important;
		float: left;
		border-right: none; 	
		display: block;
		border-bottom: 1px solid #fff;
		background-color: #333;	
	}
	
	
	ul#mobile li.menu-parent > ul, ul#mobile li.menu-current > ul {display: block}
	ul#mobile {display: block}
	
	ul#mobile a {padding: 10px 5px; color:#fff;}
	ul#mobile a.menu-parent {  background-color: #4dc4ef;}	
	#mobile a.menu-parent { }
	
	
	ul#mobile {display:none;}
	
	
	.tp_picture  {max-width:40%;}
	.tp_picture .tp_pic {max-width:100%;}
	
	
	.frontteaserblock div {width:100%;}
	.frontteaserblock div a {width:100%; clear:left; margin-bottom:30px;}
	.frontteaserblock div .row1 {clear:left;}
	.frontteaserblock div a img {width:48%; float:left; margin-right:4%;}
	.frontteaserblock div a .mt_title {height:auto; margin-bottom:20px;}
	.frontteaserblock div a .mt_desc {height:auto; }
}


/* ================================================================================================= */
/* Smaller Screens */
@media screen and (max-width: 400px) {

	.frontteaserblock div a img {width:100%; float:none;}
	.frontteaserblock div a .mt_title {clear:both; height:auto; margin:10px 5px 5px 10px;}
	.frontteaserblock div a .mt_desc { margin:0 5px 30px 10px; }
	



}

/* FONTS */

/* Merienda One - regular */
@font-face {
  font-family: 'Merienda';
  src:    url('../fonts/MeriendaOne-Regular.ttf') format('truetype'); /* Safari, Android, iOS */
  font-style: normal;
  font-weight: 400;
}

/* Josefin Sans Semibold - regular */
@font-face {
  font-family: 'JosefinSS';
  src:    url('../fonts/josefin-sans-semibold.ttf') format('truetype'); /* Safari, Android, iOS */
  font-style: normal;
  font-weight: 600;
}

/* Josefin Sans Semibold - Italic */
@font-face {
  font-family: 'JosefinSSI';
  src:    url('../fonts/josefin-sans-semibold-italic.ttf') format('truetype'); /* Safari, Android, iOS */
  font-style: italic;
  font-weight: 600;
}

/* Lato - regular */
@font-face {
  font-family: 'Lato';
  src:    url('../fonts/lato_regular.ttf') format('truetype'); /* Safari, Android, iOS */
  font-style: normal;
  font-weight: 400;
}
/* Lato - regular Italic */
@font-face {
  font-family: 'Lato';
  src:    url('../fonts/lato_italic.ttf') format('truetype'); /* Safari, Android, iOS */
  font-style: italic;
  font-weight: 400;
}
/* Lato - medium */
@font-face {
  font-family: 'Lato';
  src:    url('../fonts/lato_medium.ttf') format('truetype'); /* Safari, Android, iOS */
  font-style: normal;
  font-weight: 500;
}
/* Lato - medium Italic */
@font-face {
  font-family: 'Lato';
  src:    url('../fonts/lato_medium-italic.ttf') format('truetype'); /* Safari, Android, iOS */
  font-style: italic;
  font-weight: 500;
}
/* Lato - semi bold */
@font-face {
  font-family: 'Lato';
  src:    url('../fonts/lato_semibold.ttf') format('truetype'); /* Safari, Android, iOS */
  font-style: normal;
  font-weight: 600;
}
/* Lato - semi bold Italic */
@font-face {
  font-family: 'Lato';
  src:    url('../fonts/lato_semibold-italic.ttf') format('truetype'); /* Safari, Android, iOS */
  font-style: italic;
  font-weight: 600;
}
/* Lato - bold */
@font-face {
  font-family: 'Lato';
  src:    url('../fonts/lato_bold.ttf') format('truetype'); /* Safari, Android, iOS */
  font-style: normal;
  font-weight: 700;
}
/* Lato - bold Italic */
@font-face {
  font-family: 'Lato';
  src:    url('../fonts/lato_bold-italic.ttf') format('truetype'); /* Safari, Android, iOS */
  font-style: italic;
  font-weight: 700;
}
/* Lato - extra bold */
@font-face {
  font-family: 'Lato';
  src:    url('../fonts/lato_heavy.ttf') format('truetype'); /* Safari, Android, iOS */
  font-style: normal;
  font-weight: 800;
}
/* Lato - extra bold Italic */
@font-face {
  font-family: 'Lato';
  src:    url('../fonts/lato_heavy-italic.ttf') format('truetype'); /* Safari, Android, iOS */
  font-style: italic;
  font-weight: 800;
}
/* Lato - black */
@font-face {
  font-family: 'Lato';
  src:    url('../fonts/lato_black.ttf') format('truetype'); /* Safari, Android, iOS */
  font-style: normal;
  font-weight: 900;
}
/* Lato - black Italic */
@font-face {
  font-family: 'Lato';
  src:    url('../fonts/lato_black-italic.ttf') format('truetype'); /* Safari, Android, iOS */
  font-style: italic;
  font-weight: 900;
}
/* Fira mono - regular */
@font-face {
  font-family: 'Fira';
  src:    url('../fonts/fira-mono-regular.ttf') format('truetype'); /* Safari, Android, iOS */
  font-style: normal;
  font-weight: 400;
}
/* Fira mono - medium */
@font-face {
  font-family: 'Fira';
  src:    url('../fonts/fira-mono-medium.ttf') format('truetype'); /* Safari, Android, iOS */
  font-style: normal;
  font-weight: 600;
}
/* Fira mono - bold */
@font-face {
  font-family: 'Fira';
  src:    url('../fonts/fira-mono-bold.ttf') format('truetype'); /* Safari, Android, iOS */
  font-style: normal;
  font-weight: 700;
}
/* Noto sans - regular */
@font-face {
  font-family: 'Noto';
  src:    url('../fonts/noto-sans-regular.ttf') format('truetype'); /* Safari, Android, iOS */
  font-style: normal;
  font-weight: 400;
}
/* Noto sans - Italic */
@font-face {
  font-family: 'Noto';
  src:    url('../fonts/noto-sans-italic.ttf') format('truetype'); /* Safari, Android, iOS */
  font-style: italic;
  font-weight: 400;
}
/* Noto sans - bold */
@font-face {
  font-family: 'Noto';
  src:    url('../fonts/noto-sans-bold.ttf') format('truetype'); /* Safari, Android, iOS */
  font-style: normal;
  font-weight: 700;
}
/* Noto sans - bold Italic */
@font-face {
  font-family: 'Noto';
  src:    url('../fonts/noto-sans-bold-italic.ttf') format('truetype'); /* Safari, Android, iOS */
  font-style: italic;
  font-weight: 700;
}