/* ==========================================================================
   # BOF v2.css
   --------------------------------------------------------------------------
   # StyleSheet: Layout v2
   # Datum: 2020-12-21
   # Version: 1.0.0
   # Autor: Patrick Dietze | MAE Systems GmbH
   ========================================================================== */






/* ==========================================================================
   # editor.css
   ========================================================================== */


/* @import url(https://fonts.googleapis.com/css?family=Oswald:300,400,700%7CRoboto:400,300,400italic,700,700italic);*/

*, *::before, *::after {
    box-sizing: border-box;
}

body { 	
    font-family: 'Roboto', sans-serif;
    font-size: 1.1em;
    line-height:140%;
    color:#444;
}
 

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

/*colors*/

h1, h2, h3, a { color: #0b3e77; }

.topmenubar, a#mobilemenu {background:#0b3e77;      }
.topmenubar a, a#mobilemenu { font-size: 20px ! important; font-family: "Oswald", sans-serif; color:#fff }

.nav li ul li { border-top: 1px solid #cdc2b6; background-color:#25799e; }
.nav li a:hover, .nav li a:focus, .nav li ul li a, .nav a.menu-current, ul.nav a.menu-parent { background-color: #25799e; color: #fff; }
/* 2 level hover */
.nav li ul a:hover,  .nav li ul a.menu-current { background-color: #0b3e77;  color: #fff;}

p, h1, h2, h3, h4, h5, h6 { margin: 3px 0 30px 0; }

h1, h2, h3 {line-height:140%; }
h4, h5, h6 { color: #0b3e77; }

h1 { font-family: "Oswald", sans-serif; font-size: 2.2em; line-height:120%;} 
h2 { font-family: "Oswald", sans-serif; font-size: 1.6em;} 
h3 { font-family: "Oswald", sans-serif; font-size: 1.2em; } 
h4 { font-size: 1em;} 
h5 { font-size: 0.95em; }
h6 { font-size: 0.9em; }

a:hover {color: #000;} 


hr {
    clear: both; 
    float: none; 
    width: 100%; 
    height: 2px;
    margin: 1.8em 0;
    border: none; 
    background: #a6d8f6;
    background-image: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0.2, rgb(166, 216, 246)),
        color-stop(0.5, rgb(255,255,255))
    );
}


li {	
    padding-bottom: 10px;		
} 

ul {	
    margin-top: 0;
    margin-bottom: 15px;
    margin-left: 0.9em;
    padding-left: 0.9em;
    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;	
}


input , textarea, pre, code, blockquote, select {
    border: 1px solid #0b3e77;  background: rgba(255, 255, 255, 0.9);  color: #000;
    font-family: 'Roboto',sans-serif;
}

/*=======================================================================================*/	

/* Standards */

/* Specials */
p img[align="right"], h3 img[align="right"] {float:right; max-width:49%; margin: 3px 0 2px 0.5%; height:auto;}
p img[align="left"], h3 img[align="left"] {float:left; max-width:49%; margin: 3px 1% 2px 0; height:auto;}


.button {
    display: block; clear:both; padding: 2px 10px 5px 10px;  margin: 10px 10px 10px auto;  text-align: center;  border: 2px solid #ccc;  border-radius: 1.2em; transition: 0.8s all;
    background: rgba(200, 200, 200, 0.5);
}

.button:hover {
    background: rgba(30, 123, 0, 0.5); color: #fff;  border-radius: 0.5em;  
}

table {
    border-collapse:collapse;
    border: none;
}


table.table {
    clear:both;	
    border-collapse:collapse;
    border: none;	
    border-top: 1px solid #666;
    margin: 20px 0 5px 0;
    width:100%;
    font: 0.85em;	
}

table.table caption {font-size:1.1em; text-align:left; }
table.table th {font-size:0.9em; padding: 4px; text-align:left; vertical-align: top;  background:transparent url(images/bg75.png);  border: none; border-bottom: 1px solid #666;}
table.table tbody td {font-size:0.9em; padding: 4px; vertical-align: top;  background:transparent url(images/bg50.png); border: none; border-bottom: 1px solid #666;}
table.table tbody tr:hover td {background-color:#fff;}
table.table tbody td p, table.table tbody td h1, table.table tbody td h2, table.table tbody td h3, table.table tbody td h4 {margin: 0; line-height:110%;}


img.picfull {width:100%; height:auto;}
img.pic2left {float:left; width:49%; margin: 3px 1% 2px 0; height:auto;}
img.pic2right {float:right; width:49%; margin: 3px 0 2px 0.5%; height:auto;}

img.pic3left {float:left; width:32%; margin: 3px 1.5% 2px 0; height:auto;}
img.pic3right {float:right; width:32%; margin: 3px 0 2px 0.3%; height:auto;}

img.pic4left {float:left; width:24%; margin: 3px 1% 2px 0; height:auto;}
img.pic4right {float:right; width:24%; margin: 3px 0 2px 0.5%; height:auto;}


/*Show and Hide Responsive*/
.hideOnDesktops {display: none;}
body .showOnDesktops {display: block;}	

.visibletest div {background-color:green; text-align:center;}

/* Small devices (tablets, up to 768px) */
@media (max-width: 768px) {
    img.pic2left, img.pic2right {width: 100%;  margin: 3px 0 2px 0;}
    img.pic3left, img.pic3right, img.pic4left, img.pic4right  {width: 49%;}
	
    /*Show and Hide Responsive*/
    body .hideOnTablets {display: none;}
    .hideOnDesktops {display: block;}
    body div .showOnTablets {display: block;}
}

/* Small devices (Smartphone, up to <440px) */
@media (max-width: 440px) {
    img.pic2left, img.pic2right {width: 100%;  margin: 3px 0 2px 0;}
    img.pic3left, img.pic3right, img.pic4left, img.pic4right  {width: 49%;}
	
    /*Show and Hide Responsive*/
    .hideOnMobiles {display: none;}
    body .hideOnTablets {display: block;}
    body .hideOnDesktops {display: block;}
    body div .showOnMobiles {display: block;}
}

/* ========================================================================== */




/* ==========================================================================
   # style.css
   ========================================================================== */



html {height:100%;}


body {
    margin: 0; padding: 0; 
    height:100%;
    color:#333;	
    background: #d1e9ff no-repeat fixed;
}

.wrapper {
    max-width: 1400px;
    width: 90%;
    margin: 30px auto;
    background: #fff; 
    position:relative;
    box-shadow:  0px 5px 10px 0px rgba(50, 50, 50, 0.2);
    border-radius: 20px 0 20px 0; 
}

#topmenubar2container  {width:100%; position:fixed; top:-60px; left:0;}
#topmenubar2  { max-width: 1400px; width: 90%; margin: 0 auto; }
#topmenubar2container.isvisible {top:0;  transition:0.5s top;}

.page-header, .page-footer { width: 100%;  position:relative; border-radius: 20px 0 0 0;}
.page-header  { position:relative; float:left; width: 100%;  margin: 0 0 0 0;  }

.page-footer {	
  height:70px;
  border-radius: 0 0 20px 0;	
  clear:both; background: no-repeat center center;
}

.logopic {max-width:60%;  position:absolute; top:20px; left: 3%; z-index: 5; }
.innerheader {font-size: 0; width:100%; background: #fff no-repeat center center; background-size: cover; }

.topmenubar { clear: both; margin-bottom:30px;}

.contentbox {width: 48%; 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%; line-height: 1.8em;}
.contentboxwide p {line-height: 1.7em; margin-bottom: 20px;}

.rightbox {width: 48%; float:right;  }
.rightbox .inner {margin: 15px 4% 20px 1%;}
.rightbox .inner p img {max-width:100%; height: auto ! important;}



.page-footer .inner { position:absolute; top:10px; left: 10%; width:80%; font-size:0.8em; padding: 10px; text-align:center; line-height:110%;  color: #0b3e77 ! important; 	border-radius: 20px;  background: rgba(255, 255, 255, 0.4);}
.page-footer .inner span { font-size:0.9em;}
.page-footer .inner a {color: #0b3e77 ! important;}



.flex-direction-nav {display:none;}
.flexslider { margin: 0 0 0 0 ! important;}

/***********************************
	menu
************************************/

a#mobilemenu  {
    display:  none;   
}
a#mobilemenu span {display:block; padding: 10px 15px ; font-weight: bold;}


.search_box {float:right;  width:160px; text-align:right; margin-top:9px; }
.search_box .searchstring {	
    width:90px;	
    font-size:14px;
    padding: 5px 2px 3px 2px;
    border:  #fff 2px solid; 
    background: rgba(255, 255, 255, 0.7);
}

.search_box .submitbutton {
    vertical-align: top; margin:0 9px 0 2px;  background: none; border: none;
}

#showlogin {display:block; float:left; position:relative;  width:30px; text-align:right; margin:6px 6px 0 0; }
#login-box {position:absolute; width:200px; left:30px; top:-10px; padding:5px; font-size:11px; z-index:2000; background: rgba(255, 255, 255, 0.9);}
#login-box .loginsubmit {border:0;}
#login-box .inputfield {width:80px; border: 1px solid #c9e8f9; padding:1px;}



/* Link Formatting */
ul.nav, ul.extramenu { 
    list-style-type: none;
    /* *zoom: 1; */
    margin: 0; padding: 0;
    position: relative; 
	
}

ul.nav li {
    float: left; 
    list-style-type: none;
    list-style-image: none;
    position: relative;  	
    margin: 0; padding: 0;
    border-right: 3px solid #fff;
}


.nav li a {
    display: block; 	
    text-decoration: none;
    line-height:120%;
    /*text-shadow: 1px 1px 1px #000;*/
    padding: 10px 10px;
    color:#fff;
}


/* Hover Formatting */
.nav  li a:hover, .nav li a:focus, .nav li a:active, .nav li a.active, .nav a.menu-current, .nav a.menu-parent {
    color: #fff;
}


/* 2 level */
.nav li ul {
    display: none;
    width: 15em; 
    margin: 0; padding:0;
    position: absolute;
    box-shadow: 0 10px 40px #666;
}

.nav li ul li {
    width: 15em; 
    text-align: left; 
    margin: 0; 
    padding: 0;
    border-right: none;
}
.nav li ul li a {	
    color: #fff;
    padding: 6px 10px;
}


/* 2 level hover 
.nav li ul a:hover,  .nav li ul a.menu-current { background-color: #cdc2b6;  color: #000;}
*/

/* Show and hide */
.nav li:hover ul, .nav li a:focus ul {display: block; }
.nav li ul ul { display: none;}
.nav li:hover ul ul {display: none;}
.nav li:hover>ul, .nav  li li:hover>ul {display: block;  z-index: 1000;}


/* 3 Ebene  */
.nav li ul li ul	{ 
    margin: -20px 0 0 70%; 
    padding:0;
    z-index: 9999;  
    display: none;
    width: 11em; 
}
.nav li ul li ul li {
    width: 11em;
}

/* Positioning hover */
.nav li {position: relative;}

.nav li:hover {
    z-index: 10000;	
    white-space: normal;
}

/*Flexslider */
div.flex-viewport ol.flex-control-nav {
    bottom: 10px ! important; 
}

/*==================================================================================================*/


/*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;
}


/*frontteaserblock*/

.frontteaserblock {margin:30px 0; width:100%; overflow:hidden;}
.frontteaserblock div {width:102%;}
.frontteaserblock div a {box-sizing: content-box; float:left; display:block; width:23.8%; margin: 0 1% 10px 0; padding-bottom:20px; opacity:0.9; background:#fff; border-bottom: 2px solid #eee; }
.frontteaserblock div a span {display:block;}
.frontteaserblock div a span.picturebackground {width:100%; background-size: 100% auto, auto; background-position: center center;  transition:0.6s all;}
.frontteaserblock div a img {width:100%; float:left; opacity:1; transition:0.9s all;}
.frontteaserblock div a .mt_title {margin:10px 5px 0 10px; height:40px; font-size:20px; line-height:120%; font-weight:bold; }
.frontteaserblock div a .mt_desc {margin:0 5px 0 10px; XXheight:130px; line-height:120%; font-size:0.9em; }

.frontteaserblock div a:hover  {opacity:1;}
.frontteaserblock div a:hover span.picturebackground {width:100%; background-size: 180% auto, auto; }
.frontteaserblock div a:hover img {opacity:0;}


.flexslider li {padding: 0;}

.mobiles_only {display: none;}

.mod_topic_commentbox {
    background: transparent;
}

/* ================================================================================================= */
/* Smaller Screens */
@media screen and (max-width: 1024px) {
    .wrapper { width: 100%; margin: 0 auto; box-shadow:  none; border-radius: 0 0 0 0; }
    #topmenubar2  {width: 100%;}
}

@media screen and (max-width: 768px) {
    .mobiles_only {display: block;}
    .desktops_only {display: none;}
	
    .search_box {margin-top:-30px;}

    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    .container { width: 100%; border-left: none;	border-right: none;}

    .mainbox {margin: 20px 0 20px 0;}
    .contentbox {width: 100%; margin: 20px 0 20px 0;}
    .rightbox {width: 100%;  margin: 20px 0 20px 0;}


    .page-footer { width: 100%; }
    .contentbox .inner {margin: 10px;  }
    .rightbox .inner {margin: 10px;  }


     .page-header {background: #fff no-repeat center center; overflow: hidden; }	 
    .flexslider {display:none;}


    #topmenubar1 { height:30px; display: none;}
    #topmenubar2container {display:none;}
	
	
    a#mobilemenu { 
            display:  block;    
            color: #fff;
            width:100%;
            clear: both;
            font-size:16px;
    }



    ul.nav {max-width:260px; position:absolute; left:0; z-index:2000;}
     ul.nav ul, u.nav ul ul {width:100% ! important; position: static; margin: 0 0 0 0 ! important; }

    ul.nav ul {}
    ul.nav li ul {display: block ! important;}
    ul.nav li, ul.nav li li, ul.nav li li li {
            width:100% ! important;
            float: left;
            border-right: none; 	
            display: block;
            border-bottom: 1px solid #fff;
            background-color: #333;	
    }
	

    ul.nav li.menu-parent > ul, ul.nav li.menu-current > ul {display: block}	

    ul.nav a {padding: 10px 5px; color:#fff;}
    ul.nav a.menu-current {  background-color: #4dc4ef;}	



    .tp_picture  {max-width:40%;}
    .tp_picture .tp_pic {max-width:100%;}

    .frontteaserblock div a {width:49%; }
	
}


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

    .wrapper { width: 100%;}

    .frontteaserblock div {width:100%;}
    .frontteaserblock div a {float:none; width:100%; clear:left; height:auto ! important; clear:both; border:none;}
    .frontteaserblock div .row1 {}	
    .frontteaserblock div a .mt_title {height:auto; margin-bottom:20px;}

}

/*  SECTIONS     ============================================================================= */
.section {
    clear: both;
    padding: 0px;
    margin: 0px;
}

img {
    max-width: 100%;
    height: auto;
}

.mittig {
    text-align: center;
}

/*  COLUMN SETUP     ============================================================================= */
.col {
    display: block;
    float:left;
    margin: 0% 0 0% 3.6%;
}
.col:first-child { margin-left: 0; }

@media only screen and (max-width: 800px) {
    .col { 
        margin: 1% 1% 1% 1%;
    }
    .col:first-child { 
        margin-left: 1%; 
        margin-right: 1%;
    }
}

/*  GROUPING     ============================================================================= */
.group:before,
.group:after {
    content:"";
    display:table;
}
.group:after {
    clear:both;
}
.group {
    zoom:1; /* For IE 6/7 */
}

/*  2 BOXEN   ============================================================================= */
.span_2_of_2 {
width: 100%;
}

.span_1_of_2 {
width: 47.2%;
}

@media only screen and (max-width: 1024px) {
#containergreen .col { 
margin: 0% 0% 0% 0%;
line-height: 0em;
}
#containergreen .span_1_of_2 {
width: 98%; 
}
}

@media only screen and (max-width: 800px) {
.span_2_of_2 {
width: 98%; 
}
.span_1_of_2 {
width: 98%; 
}
}

/*  3 BOXEN Downloadgalerie */
.span_3_of_down {
width: 69.0%;
text-align: left;
}
.span_2_of_down {
width: 17.0%;
padding-bottom: 20px;
font-size: 0.8em;
text-align: right;
}
.span_1_of_down {
width: 6.6%;
text-align: left;
}
.span_3_of_down a {
font-weight: 700;
color: #000000;
transition-property: color;
transition-duration: 2.0s;
-moz-animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);
animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);
-webkit-animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);
}
.span_3_of_down a:hover {
color : #db1802;
}


/* ========================================================================== */


body {
    min-width: 320px;
}

.page-header {
    line-height: 1;
}

.page-footer {
    background-color: #2E95CF;
}
.page-footer a:hover {
    text-decoration: underline;
}

.footer-link:before {
    content: "|";
    padding: 0 0.25rem;
}

.text-center {
    text-align:center;
}

.frame-layout-5 li {
    border-bottom: 1px solid #a6d8f6; 
    padding: 1rem 0;
    margin: 1rem 0;
}

.preview-image {
    position: relative;
    display: block;
    
}

.preview-image .preview-icon {
    position: absolute;
    top: 0;
    left: 0;
    float: none;
    padding: 0;
    
}

.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}


.col-sm-4,
.col-sm-6,
.col-sm-8,
.col-sm-12 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}


@media (min-width: 769px) {
    
    .col-sm-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
    
    .col-sm-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
    
    .col-sm-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }
    
    .col-sm-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}


.frame-type-form_formframework {
    max-width: 800px;
}

.form-group {
    margin: 0.5rem 0;
}

.form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.xxlarge {
    min-height: 8rem;
}

button[type="submit"] {
    cursor: pointer;
    width: 100%;
    border: none;
    background: #0b3e77;
    color: #FFF;
    margin: 0 0 40px;
    padding: 8px;
    font-size: 1.2rem;
    border-radius: 5px;
}

.f3-widget-paginator {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
}
.f3-widget-paginator li{
    padding: 0.25rem;
    margin: 0.25rem;
}

/* Small devices (tablets, up to 768px) */
@media (max-width: 768px) {
    .innerheader {font-size: 0; width:100%; background: #fff no-repeat center center; background-size: cover; }
}

/* ==========================================================================
   # EOF v2.css
   ========================================================================== */