@charset "utf-8";
/* CSS Document */

html{height:100%; width:100%; overflow-y:scroll;}
body{ margin: 0; background:url(images/background.jpg) no-repeat fixed center center / cover transparent; height:100%; font-family:Helvetica, sans-serif;}
.clear{ clear:both;}
.link {color: #03039D; text-decoration:none;}
.link:visited{color: #03039D;}



.wrapper_page {width:100%; max-width:1380px;  margin:0 auto;}

.logo{ background:#fff; float:left; padding:20px; box-shadow:rgba(0,0,0, 0.4) 2px 2px 2px; border-radius:0px 0px 5px 5px;}
nav{ max-height:50px;  width:100%; background:rgba(0,0,0,0.8); border-radius:0px 0px 5px 5px;}
.menu{float:right; height}
.menu ul{ display:none;}
.menu, .submenu{ margin:0px; padding:0px; list-style-type:none;}
.submenu{ max-width:335px; padding-bottom:10px;}
.menu li{ float:left; padding:15px 20px 25px 20px; color:#FFF; border-radius:0px 0px 5px 5px;
	 /* For Safari 3.1 to 6.0 */
    -webkit-transition-property: background, padding;
    -webkit-transition-duration: 0.2s;
    -webkit-transition-delay: 0s;
    /* Standard syntax */
    transition-property: background, padding;
    transition-duration: 0.2s;
    transition-delay: 0s;}
.menu li a{color:#fff;  font-family: 'Istok Web', sans-serif; font-weight:bold; text-transform:uppercase; text-decoration:none; min-width: 200px;}
.menu li:hover a{ color:rgba(45,41,127,1);}
.menu li:hover{ background:#fff; border-radius:0px 0px 5px 5px; padding:20px 20px 20px 20px;}
.menu li:hover ul{display: block; margin:16px 0 0 -20px; position:absolute;  box-shadow:rgba(0,0,0, 0.4) 2px 2px 2px; background:#fff; border-radius:0px 0px 5px 5px;}
.menu li:hover ul li{ margin:0px; padding:0px; padding:5px 20px; }
.menu li:hover ul li a{font-size:14px; color:#000; font-weight:normal; display:block}
.menu li:hover ul li:hover a{color:rgba(45,41,127,1); font-weight:bold;}
.active {  color:#900;}

.sidebar_33{ box-sizing:border-box; width:33%;  float:right; font-size:16px; color:#000;}
.sidebar_33_box{background:rgba(255,255,255, 0.9); padding:20px;  margin-bottom:30px; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);}
.sidebar_33_box li {margin-left: 20px;}
.sidebar_60{ box-sizing:border-box; width:60%;  float:right; font-size:16px; color:#000;}
.sidebar_60_box{background:rgba(255,255,255, 0.9); padding:20px;  margin-bottom:30px; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);}
.zitat{ font-style:italic; line-height:20px; }
.radius{border-radius:5px;}
.inline{ display:inline; margin:0px;}
.button{ background:rgba(0,0,0,0.7); min-width:120px; margin-top:10px; display:block;  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); padding:10px;  color:#FFF; font-family: 'Istok Web', sans-serif;  text-decoration:none;
 /* For Safari 3.1 to 6.0 */
    -webkit-transition-property: margin-left;
    -webkit-transition-duration: 0.2s;
    -webkit-transition-delay: 0s;
    /* Standard syntax */
    transition-property: margin-left;
    transition-duration: 0.2s;
    transition-delay: 0s;}
.button:hover{ margin-left:10px; text-decoration:none; background:rgba(45,41,127,1); color:#FFF;}	
h1{font-family: 'Istok Web', sans-serif; font-weight:bold; font-size:18px; color:#03039d; text-transform:uppercase; margin:0px 0 10px 0; }
h2{font-family: 'Istok Web', sans-serif; font-weight:bold; font-size:16px; color:#03039d; text-transform:uppercase; margin:20px 0 10px 0;}
h3{font-family: 'Istok Web', sans-serif; font-size:16px; margin:20px 0 10px 0; font-weight:100;}


.produkt_box{box-sizing:border-box; width:60%; float:right; font-size:16px; color:#000; background:rgba(255,255,255, 0.9); padding:20px;  margin:30px 0 30px 0; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);}

.produkt{box-sizing:border-box; width:60%; overflow:hidden; padding:20px; float:right; font-size:16px; color:#000; background:rgba(255,255,255, 0.9); margin-bottom:30px; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);}
.produkt section { width:250px;}
.produkt H2{ margin:0px; display:inline-block;}
.produkt H3{ margin: 20px 0 3px 0; font-size:16px; }
.produkt li{ margin-left:20px; }
.produkt img{ width:30%; float:right;}

.sidemenu{ box-sizing:border-box; width:290px; float:left; font-size:16px; color:#000; background:rgba(255,255,255, 0.9); padding:20px;  margin:30px 0 30px 0; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);}
.sidemenu ul{ margin:0 0 0 20px; padding:0;  list-style-type:circle;}
.sidemenu li{ margin-top:5px; }
.sidemenu_sub{margin-left:20px;}
.sidemenu a{color: #03039D; text-decoration:none;}
.sidemenu a:visited{color: #03039D;}
.introtext li{margin-left:20px}
.introtext_sc h1{ margin: 0px; }


#produkt_wrapper{background:#069; width:100px; overflow:hidden;   box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
 /* For Safari 3.1 to 6.0 */
    -webkit-transition-property: height;
    -webkit-transition-duration: 0.2s;
    -webkit-transition-delay: 0s;
    /* Standard syntax */
    transition-property: height;
    transition-duration: 0.2s;
    transition-delay: 0s;}
.produkt_mainbar a{ text-decoration:none; }
.produkt_schalter{float:right;}
.produkt_mainbar{ }
.produkt_content{ width:70%; float:left;}
.produkt_content li{margin-left:20px}
.produkt_sidebar{ width:30%; float:left;  margin-top:15px;}
.produkt_sidebar img{width:100%;}
 #f2_more, #r2_more, #r3_more, #r4_more, #r5_more, #r6_more, #r7_more, #r8_more, #r9_more, #r10_more{ display:none;}
 #f1_more, #r1_more{ display:block;}

#f2_minus, #r2_minus, #r3_minus, #r4_minus, #r5_minus, #r6_minus, #r7_minus, #r8_minus, #r9_minus, #r10_minus{display:none;}
#f1_plus, #r1_plus {display:none;}

.beispiele_r{ width:40%; float:left; padding:0px 20px; box-sizing:border-box;}
.beispiele_l{width:60%; float:left; margin-bottom:15px;}
.beispiele_l img { width:100%;}

.logobanner{ height:80px; width:100%; background:rgba(0,0,0,0.5); opacity:0.2; padding:10px; box-sizing:border-box; color:#FFF; font-family: 'Istok Web', sans-serif; font-weight:bold;text-transform:uppercase; 
 /* For Safari 3.1 to 6.0 */
    -webkit-transition-property: opacity;
    -webkit-transition-duration: 0.2s;
    -webkit-transition-delay: 0s;
    /* Standard syntax */
    transition-property: opacity;
    transition-duration: 0.2s;
    transition-delay: 0s;}
.logobanner:hover{ opacity:1;}


.smartmenu{ width:100%;  margin:0px; padding:0px; list-style:none; margin-top:10px; display:none;}
.smartmenu li{width:100%; text-align:center; margin-bottom:2px; background:rgba(0,0,0,0.8);}
.smartmenu a{display block;color:#fff;  font-family: 'Istok Web', sans-serif; font-weight:bold; text-transform:uppercase; text-decoration:none; padding:10px; width:100%; display:block;}
.smartmenu a:hover{ background:#fff; color:rgba(45,41,127,1);}


@media all and (max-width: 1200px) {
 .sidebar_33{width:60%;}
 }

@media all and (max-width: 1100px) {
 .logo{ width:100%;}
 .logo img{ margin:0 auto;}
 nav { min-height:170px;font-size:12px}
 .sidebar_33{width:60%;}
  .sidebar_60{width:100%;}
   .sidemenu{display:none;}
}


@media all and (max-width: 800px) {
	 .logo{ display:block;}
 .sidebar_33{width:100%;}
 #zitatbox{margin-top:10px;}
 .beispiele_r, .beispiele_l{float:none; width:100%;}
 .beispiele_r{margin-top:-10px;margin-bottom:40px;}
 .beispiele_r{padding-left:0px;}
 .menu{display:none;}
 .produkt_content{ width:100%;}
 .produkt_sidebar{ width:100%}
 nav{ background:rgba(0,0,0,0); clear:both; max-height:500px; }
 .smartmenu{display:block;}

}

@media all and (max-width: 1100px) and (orientation:portrait) {
   .logo{ display:block;}
 .sidebar_33{width:100%;}
 #zitatbox{margin-top:10px;}
 .beispiele_r, .beispiele_l{float:none; width:100%;}
 .beispiele_r{margin-top:-10px;margin-bottom:40px;}
 .beispiele_r{padding-left:0px;}
 .menu{display:none;}
 .produkt_content{ width:100%;}
 .produkt_sidebar{ width:100%}
 nav{ background:rgba(0,0,0,0); clear:both; max-height:600px; ;font-size:18px}
 .smartmenu{display:block;}

}