body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul,.content-gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li,.content-gallery>ul li{float:left}.ce_gallery>ul li.col_first,.content-gallery>ul li.col_first{clear:left}.float_left,.media--left>figure{float:left}.float_right,.media--right>figure{float:right}.block{overflow:hidden}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both}
@media (max-width:767px){#wrapper{margin:0;width:auto}#container{padding-left:0;padding-right:0}#main,#left,#right{float:none;width:auto}#left{right:0;margin-left:0}#right{margin-right:0}}img{max-width:100%;height:auto}.ie7 img{-ms-interpolation-mode:bicubic}.ie8 img{width:auto}.audio_container audio{max-width:100%}.video_container video{max-width:100%;height:auto}.aspect,.responsive{position:relative;height:0}.aspect iframe,.responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%}.aspect--16\:9,.responsive.ratio-169{padding-bottom:56.25%}.aspect--16\:10,.responsive.ratio-1610{padding-bottom:62.5%}.aspect--21\:9,.responsive.ratio-219{padding-bottom:42.8571%}.aspect--4\:3,.responsive.ratio-43{padding-bottom:75%}.aspect--3\:2,.responsive.ratio-32{padding-bottom:66.6666%}
.mobile_menu{position:fixed;z-index:100;display:none}.mobile_menu .inner{height:100%;background:#000;overflow-y:scroll}.mobile_menu.active.position_left{box-shadow:2px 0 5px 0 rgba(0,0,0,.5)}.mobile_menu.active.position_top{box-shadow:0 2px 5px 0 rgba(0,0,0,.5)}.mobile_menu.active.position_right{box-shadow:-2px 0 5px 0 rgba(0,0,0,.5)}.mobile_menu.active.position_bottom{box-shadow:0 -2px 5px 0 rgba(0,0,0,.5)}.mobile_menu.active.no_shadow{box-shadow:none!important}.mobile_menu_trigger{display:none}.mobile_menu_wrapper{position:relative;width:100%;overflow:hidden}.mobile_menu_overlay{position:fixed;top:0;left:0;width:100%;height:100vh;z-index:99}.mobile_menu_overlay.background{background:rgba(0,0,0,.5)}.mobile_menu li.submenu_hide>ul{display:none}.mobile_menu li.submenu_show>ul{display:block}body.ie8 .mobile_menu,body.ie8 .mobile_menu_trigger,body.ie9 .mobile_menu,body.ie9 .mobile_menu_trigger{display:none!important}
@charset "UTF-8";
/**
 * "Yet Another Multicolumn Layout" - (X)HTML/CSS Framework
 *
 * (en) YAML core stylesheet
 * (de) YAML Basis-Stylesheet
 *
 * Don't make any changes in this file!
 * Your changes should be placed in any css-file in your own stylesheet folder.
 *
 * @copyright       Copyright 2005-2009, Dirk Jesse
 * @license         CC-A 2.0 (http://creativecommons.org/licenses/by/2.0/),
 *                  YAML-C (http://www.yaml.de/en/license/license-conditions.html)
 * @link            http://www.yaml.de
 * @package         yaml
 * @version         3.2
 * @revision        $Revision:426 $
 * @lastmodified    $Date:2009-10-21 21:12:11 +0200 (Mi, 21. Okt 2009) $
 */

/**
 * Contao Extension
 * @copyright  Felix Pfeiffer : Neue Medien 2007 - 2012
 * @author     Felix Pfeiffer <info@felixpfeiffer.com>
 * @package    Subcolumns
 */
@media screen,projection{.ym-grid{display:table;width:100%;table-layout:fixed;list-style-type:none;padding-left:0;padding-right:0;margin-left:0;margin-right:0}.ym-gl{float:left;margin:0}.ym-gr{float:right;margin:0 0 0 -5px}.ym-g15{width:15%}.ym-g20{width:20%}.ym-g25{width:25%}.ym-g30{width:30%}.ym-g33{width:33.333%}.ym-g35{width:35%}.ym-g38{width:38.2%}.ym-g40{width:40%}.ym-g45{width:45%}.ym-g50{width:50%}.ym-g55{width:55%}.ym-g60{width:60%}.ym-g62{width:61.8%}.ym-g65{width:65%}.ym-g66{width:66.666%}.ym-g70{width:70%}.ym-g75{width:75%}.ym-g80{width:80%}.ym-g85{width:85%}.ym-gbox{padding:0 10px}.ym-gbox-left{padding:0 10px 0 0}.ym-gbox-right{padding:0 0 0 10px}.ym-equalize{overflow:hidden}.ym-equalize>[class*="ym-g"]{display:table-cell;float:none;margin:0;vertical-align:top}.ym-equalize>[class*="ym-g"]>[class*="ym-gbox"]{padding-bottom:10000px;margin-bottom:-10000px}}@media print{.ym-grid>.ym-gl,.ym-grid>.ym-gr{overflow:visible;display:table}}
#colorbox,#cboxOverlay,#cboxWrapper{position:absolute;top:0;left:0;z-index:9999;overflow:hidden;-webkit-transform:translate3d(0,0,0)}#cboxWrapper{max-width:none}#cboxOverlay{position:fixed;width:100%;height:100%}#cboxMiddleLeft,#cboxBottomLeft{clear:left}#cboxContent{position:relative}#cboxLoadedContent{overflow:auto;-webkit-overflow-scrolling:touch}#cboxTitle{margin:0}#cboxLoadingOverlay,#cboxLoadingGraphic{position:absolute;top:0;left:0;width:100%;height:100%}#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow{cursor:pointer}.cboxPhoto{float:left;margin:auto;border:0;display:block;max-width:none;-ms-interpolation-mode:bicubic}.cboxIframe{width:100%;height:100%;display:block;border:0;padding:0;margin:0}#colorbox,#cboxContent,#cboxLoadedContent{box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box}#cboxOverlay{background:#000;opacity:.9;filter:alpha(opacity = 90)}#colorbox{outline:0}#cboxContent{margin-top:20px;background:#000}.cboxIframe{background:#fff}#cboxError{padding:50px;border:1px solid #ccc}#cboxLoadedContent{border:5px solid #000;background:#fff}#cboxTitle{position:absolute;top:-20px;left:0;color:#ccc}#cboxCurrent{position:absolute;top:-20px;right:0;color:#ccc}#cboxLoadingGraphic{background:url(../../assets/colorbox/images/loading.gif) no-repeat center center}#cboxPrevious,#cboxNext,#cboxSlideshow,#cboxClose{border:0;padding:0;margin:0;overflow:visible;width:auto;background:0 0}#cboxPrevious:active,#cboxNext:active,#cboxSlideshow:active,#cboxClose:active{outline:0}#cboxSlideshow{position:absolute;top:-20px;right:90px;color:#fff}#cboxPrevious{position:absolute;top:50%;left:5px;margin-top:-32px;background:url(../../assets/colorbox/images/controls.png) no-repeat top left;width:28px;height:65px;text-indent:-9999px}#cboxPrevious:hover{background-position:bottom left}#cboxNext{position:absolute;top:50%;right:5px;margin-top:-32px;background:url(../../assets/colorbox/images/controls.png) no-repeat top right;width:28px;height:65px;text-indent:-9999px}#cboxNext:hover{background-position:bottom right}#cboxClose{position:absolute;top:5px;right:5px;display:block;background:url(../../assets/colorbox/images/controls.png) no-repeat top center;width:38px;height:19px;text-indent:-9999px}#cboxClose:hover{background-position:bottom center}
@charset "UTF-8";
.contao-cookiebar {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 9999;
  font-size: 0;
  letter-spacing: 0;
  text-align: center;
  padding: 15px;
  max-height: 100vh;
  box-sizing: border-box;
  pointer-events: none;
  overflow: hidden; }
  .contao-cookiebar * {
    box-sizing: border-box; }
  .contao-cookiebar:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle; }
  .contao-cookiebar .cc-inner {
    display: inline-block;
    overflow-y: auto;
    max-height: 100%;
    max-width: 100%;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    font-size: 1rem;
    text-align: left; }
  .contao-cookiebar.cc-top .cc-inner {
    vertical-align: top; }
  .contao-cookiebar.cc-top.cc-active .cc-inner {
    animation: cookiebar-top-in 0.5s ease-in-out forwards; }
  .contao-cookiebar.cc-top.cc-saved .cc-inner {
    animation: cookiebar-top-out 0.5s ease-in-out forwards; }
  .contao-cookiebar.cc-bottom .cc-inner {
    vertical-align: bottom; }
  .contao-cookiebar.cc-bottom.cc-active .cc-inner {
    animation: cookiebar-bottom-in 0.5s ease-in-out forwards; }
  .contao-cookiebar.cc-bottom.cc-saved .cc-inner {
    animation: cookiebar-bottom-out 0.5s ease-in-out forwards; }
  .contao-cookiebar.cc-middle .cc-inner {
    vertical-align: middle; }
  .contao-cookiebar.cc-middle.cc-active .cc-inner {
    animation: cookiebar-middle-in 0.5s ease-in-out forwards; }
  .contao-cookiebar.cc-middle.cc-saved .cc-inner {
    animation: cookiebar-middle-out 0.5s ease-in-out forwards; }
  .contao-cookiebar.cc-left {
    text-align: left; }
  .contao-cookiebar.cc-right {
    text-align: right; }
  .contao-cookiebar .cc-head h1:first-child, .contao-cookiebar .cc-head h2:first-child, .contao-cookiebar .cc-head h3:first-child, .contao-cookiebar .cc-head h4:first-child, .contao-cookiebar .cc-head h5:first-child, .contao-cookiebar .cc-head h6:first-child {
    margin-top: 0; }
  .contao-cookiebar .cc-head p {
    margin-bottom: 15px; }
  .contao-cookiebar .cc-btn {
    display: inline-block;
    cursor: pointer;
    width: 100%;
    padding: 8px 14px;
    margin-bottom: 8px;
    font-size: 15px;
    outline: 0 none;
    border: 1px solid #cfcfcf;
    border-radius: 4px;
    color: #444;
    background: #f5f5f5; }
    .contao-cookiebar .cc-btn:hover {
      background: #ececec; }
    .contao-cookiebar .cc-btn:last-child {
      margin-bottom: 0; }
  .contao-cookiebar .grayscale .cc-btn {
    background: #f1efef; }
    .contao-cookiebar .grayscale .cc-btn:hover {
      background: #ececec; }
    .contao-cookiebar .grayscale .cc-btn.success {
      background: #fbfbfb; }
      .contao-cookiebar .grayscale .cc-btn.success:hover {
        background: #f7f7f7; }
  .contao-cookiebar .highlight .cc-btn.success {
    background: #4e9e3e;
    border-color: #3e7830;
    color: #fff; }
    .contao-cookiebar .highlight .cc-btn.success:hover {
      background: #4c933f; }
  .contao-cookiebar label {
    position: relative;
    display: block;
    padding: 8px 13px 8px 0;
    line-height: 1.2rem; }
    .contao-cookiebar label.group {
      font-weight: 600; }
  .contao-cookiebar input {
    position: absolute;
    width: 1px;
    height: 1px;
    outline: 0 none;
    opacity: 0; }
    .contao-cookiebar input + label {
      padding: 8px 13px 8px 50px;
      cursor: pointer; }
      .contao-cookiebar input + label:before {
        content: '';
        position: absolute;
        top: 6px;
        left: 0;
        width: 35px;
        height: 18px;
        margin: 0;
        box-sizing: content-box;
        border-radius: 10px;
        background: #fff;
        border: 2px solid #9c9b99;
        transition: border-color .2s; }
      .contao-cookiebar input + label:after {
        display: block;
        content: '';
        position: absolute;
        top: 10px;
        left: 4px;
        width: 14px;
        height: 14px;
        border-radius: 10px;
        background: #9c9b99;
        transition: background .2s, margin-left .2s, padding .2s; }
      .contao-cookiebar input + label:active:after {
        padding-left: 5px; }
    .contao-cookiebar input.cc-group-half + label:after {
      background: linear-gradient(to right, #9c9b99 0%, #9c9b99 50%, #399d32 50%, #399d32 100%); }
    .contao-cookiebar input:checked + label:after {
      background: #399d32;
      margin-left: 17px; }
    .contao-cookiebar input:checked + label:active:after {
      margin-left: 12px; }
    .contao-cookiebar input:checked + label:before {
      background: #dcf3db;
      border-color: #399d32; }
    .contao-cookiebar input:disabled + label {
      pointer-events: none; }
      .contao-cookiebar input:disabled + label:after {
        background: #c8c7c5; }
      .contao-cookiebar input:disabled + label:before {
        background: #f4f4f4;
        border-color: #c8c7c5; }
  .contao-cookiebar.cc-active .cc-inner {
    opacity: 1;
    pointer-events: auto;
    visibility: visible; }
  .contao-cookiebar.cc-active.cc-blocked {
    pointer-events: auto;
    animation: cookiebar-overlay-in 0.5s ease-in-out forwards; }
  .contao-cookiebar.cc-saved.cc-inner {
    opacity: 0;
    pointer-events: none;
    visibility: hidden; }
  .contao-cookiebar.cc-saved.cc-blocked {
    pointer-events: none;
    animation: cookiebar-overlay-out 0.5s ease-in-out forwards; }

@media (min-width: 768px) {
  .contao-cookiebar .cc-btn {
    width: auto;
    margin-bottom: 0; }
  .contao-cookiebar .cc-inner {
    max-width: 750px; } }

@keyframes cookiebar-overlay-in {
  0% {
    background: rgba(0, 0, 0, 0); }
  100% {
    background: rgba(0, 0, 0, 0.75); } }

@keyframes cookiebar-overlay-out {
  0% {
    background: rgba(0, 0, 0, 0.75); }
  100% {
    background: rgba(0, 0, 0, 0);
    visibility: hidden; } }

@keyframes cookiebar-top-in {
  0% {
    opacity: 0;
    transform: translateY(-100%); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes cookiebar-top-out {
  0% {
    opacity: 1;
    visibility: visible;
    transform: translateY(0); }
  100% {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-100%); } }

@keyframes cookiebar-middle-in {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }

@keyframes cookiebar-middle-out {
  0% {
    opacity: 1;
    visibility: visible;
    transform: scale(1); }
  100% {
    opacity: 0;
    visibility: hidden;
    transform: scale(0); } }

@keyframes cookiebar-bottom-in {
  0% {
    opacity: 0;
    transform: translateY(100%); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes cookiebar-bottom-out {
  0% {
    opacity: 1;
    visibility: visible;
    transform: translateY(0); }
  100% {
    opacity: 0;
    visibility: hidden;
    transform: translateY(100%); } }

.contao-cookiebar {
  color: #444444; }
  .contao-cookiebar p {
    color: #868686;
    line-height: 1.4; }
  .contao-cookiebar .cc-inner {
    padding: 25px;
    border-radius: 5px;
    -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);
    background: #fff; }
  .contao-cookiebar .cc-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: center;
    position: relative;
    border: 1px solid #d0d0d0;
    border-radius: 5px;
    margin-bottom: 10px; }
    .contao-cookiebar .cc-group > label {
      flex-grow: 1;
      margin: 5px 0 5px 10px; }
    .contao-cookiebar .cc-group .cc-detail-btn {
      border: 0 none;
      outline: 0 none;
      background: transparent;
      font-size: 13px;
      letter-spacing: 0;
      text-transform: initial;
      cursor: pointer;
      color: #a2a2a2;
      padding: 8px 10px;
      line-height: 1.2rem; }
      .contao-cookiebar .cc-group .cc-detail-btn span:nth-child(2) {
        display: none; }
      .contao-cookiebar .cc-group .cc-detail-btn.cc-active span:nth-child(1) {
        display: none; }
      .contao-cookiebar .cc-group .cc-detail-btn.cc-active span:nth-child(2) {
        display: inline; }
      .contao-cookiebar .cc-group .cc-detail-btn:hover {
        color: #717171; }
    .contao-cookiebar .cc-group .cc-detail-btn-details {
      display: inline-block;
      border: 0 none;
      outline: 0 none;
      background: transparent;
      font-size: 13px;
      letter-spacing: 0;
      text-transform: initial;
      cursor: pointer;
      color: #a2a2a2;
      text-decoration: underline;
      padding: 0;
      margin: 0 0 10px; }
      .contao-cookiebar .cc-group .cc-detail-btn-details span:nth-child(2) {
        display: none; }
      .contao-cookiebar .cc-group .cc-detail-btn-details.cc-active span:nth-child(1) {
        display: none; }
      .contao-cookiebar .cc-group .cc-detail-btn-details.cc-active span:nth-child(2) {
        display: inline; }
      .contao-cookiebar .cc-group .cc-detail-btn-details:hover {
        color: #717171; }
  .contao-cookiebar .cc-cookies {
    display: none;
    width: 100%;
    background: #fbfbfb;
    border-radius: 0 0 5px 5px; }
    .contao-cookiebar .cc-cookies > p {
      font-size: 0.875rem; }
    .contao-cookiebar .cc-cookies > p, .contao-cookiebar .cc-cookies > .cc-cookie {
      margin: 0;
      padding: 15px;
      border-top: 1px solid #e6e6e6; }
    .contao-cookiebar .cc-cookies .cc-cookie .cc-cookie-info {
      font-size: 0.875rem;
      background: #fff;
      padding: 10px;
      border-radius: 5px;
      border: 1px solid #efefef; }
      .contao-cookiebar .cc-cookies .cc-cookie .cc-cookie-info > div > span {
        font-weight: 600; }
      .contao-cookiebar .cc-cookies .cc-cookie .cc-cookie-info > div + div {
        margin-top: 5px; }
      .contao-cookiebar .cc-cookies .cc-cookie .cc-cookie-info + button.cc-detail-btn-details {
        margin-top: 15px; }
    .contao-cookiebar .cc-cookies .cc-cookie .cc-cookie-desc > p {
      margin-bottom: 0; }
    .contao-cookiebar .cc-cookies .cc-cookie label.cookie + p, .contao-cookiebar .cc-cookies .cc-cookie label.cookie + .cc-cookie-info, .contao-cookiebar .cc-cookies .cc-cookie label.cookie + button.cc-detail-btn-details {
      margin-top: 10px; }
    .contao-cookiebar .cc-cookies .cc-cookie p {
      margin: 0 0 15px;
      font-size: 0.875rem; }
  .contao-cookiebar .cc-footer, .contao-cookiebar .cc-info {
    text-align: center; }
  .contao-cookiebar .cc-info {
    margin-top: 15px; }
    .contao-cookiebar .cc-info > p {
      font-size: 0.875rem; }
    .contao-cookiebar .cc-info > a {
      display: inline-block;
      font-size: 0.813rem;
      color: #a2a2a2;
      text-decoration: none; }
      .contao-cookiebar .cc-info > a:hover {
        color: #717171; }
      .contao-cookiebar .cc-info > a + a:before {
        display: inline-block;
        content: '·';
        margin-right: 5px; }



/* first for IE 4–8 */
@font-face {
    font-family: ZwoWebPro-BoldItalic;
    src: url("../../files/templates/fonts/ZwoWebPro-BoldItalic.eot");
}

/* then for WOFF-capable browsers */
@font-face {
    font-family: ZwoWebPro-BoldItalic;   
    src: url("../../files/templates/fonts/ZwoWebPro-BoldItalic.woff") format("woff");
}
/* first for IE 4–8 */
@font-face {
    font-family: ZwoWeb-Light;
    src: url("../../files/templates/fonts/ZwoWeb-Light.eot");
}

/* then for WOFF-capable browsers */
@font-face {
    font-family: ZwoWeb-Light;
    src: url("../../files/templates/fonts/ZwoWeb-Light.woff") format("woff");
}




html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,dfn,em,img,ins,q,small,strong,sub,sup,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,caption,tfoot,thead,tr,th,td
{border:0;margin:0;padding:0}

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

html, body {-webkit-text-size-adjust: 100%;}

article,aside,figure,figure img,figcaption,hgroup,footer,header,nav,section,video,object{display:block}

a img{border:0}
figure{position:relative}

header .select-menu, header .styled_select {
    display: none !important;
}

html {
    /*
    background: url("../../files/templates/images/body_bg.png") no-repeat 50% 0;
    */
}

body {   overflow-y: scroll;  background: url("../../files/templates/images/top.png") repeat-x 0 0;}

.home #wrapper { width: 100%; background: url("../../files/templates/images/wrapper_bg.png") repeat-x 0 100%;}

#wrapper {
    width: 100%;
    background: url("../../files/templates/images/landing_wrapper_bg.png") repeat-x 0 115%;
    overflow: hidden;
}

#container, #footer .mod_article, #footer .footerlinks,#footer .mod_boxes4ward .boxes4ward_article, #header .inside{
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;

}

@media only screen  and (min-width : 1224px) {

    #container, #footer .mod_article, #footer .footerlinks,#footer .mod_boxes4ward .boxes4ward_article, #header .inside{
        width: 1140px;
    }

}

#header  {background: url("../../files/templates/images/header.png") repeat-x 0 0;}

#header .inside {height: 180px}

.home #container .ce_text, 
.home #container .ce_list ,
.home #container .mod_boxes4ward .ce_text{
    background-color: #fff;
    padding: 20px;
}

.home #container .ce_text.boxclean, 
.home #container .ce_list.boxclean ,
.home #container .mod_boxes4ward .ce_text.boxclean{
    background-color: transparent;
    padding: 0;
}

.home #container .ce_text.box{
    background-color: #ebebeb;    
}

#container .ce_text,
#container .ce_list.produktliste.blue,
#container .ce_list.produktliste.green, 
#container .ce_list.produktliste.lila {
    background: none;
    padding: 0;
}

#container .mod_boxes4ward .symbole .ce_text {
    background: #FFFFFF;padding: 20px;height: 190px
}

#container .produktliste.blue {background: #fafbfd url("../../files/templates/images/dotted.png") repeat-x 0 100%; ; padding: 25px 15px 25px 15px; width: 97.9%}

#container .produktliste.green {background: #fafbfd url("../../files/templates/images/dotted_green.png") repeat-x 0 100%; ; padding: 25px 15px 25px 15px; width: 97.9%}

#container .produktliste.lila {background: #fafbfd url("../../files/templates/images/dotted_lila.png") repeat-x 0 100%; ; padding: 25px 15px 25px 15px; width: 97.9%}


#container .ce_text.produktkatalog, 
#container .ce_text.bild, 
#container .ce_text.yellow, 
#container .ce_text.blue,
#container .ce_text.green,
#container .ce_text.lila{
    background: none;
    padding: 0;
    position: relative
}

#footer {
    width: 100%;
    background: #fff !important;
    color: #000000;
    display: inline-block;
}

#footer .mod_boxes4ward  { background:#fcaf17 }

#container {
    padding-bottom: 45px;  
}


#footer .inside p.right {
    float: right;
    width: 66%;
    margin: 1.5em 0 2.5em 0
}

#footer .inside .left {
    float: left;
    width: 32%;
    margin: 1.5em 0 2.5em 0
}

/*Logo Elemente*/
header h1 {
    background: transparent;
    color: #fff;
}


header #branding a, 
header #branding a:visited.active,
header #branding a:focus ,
header #branding a:hover,
header #branding  a:active  {  outline: 0px;text-decoration:none;background: none;}


header #branding {
    text-decoration: none;
    text-indent: -999em;
}
header #branding a {
    display: block;
    height: 100%;
    width: 100%;
    padding: 0
}
header #branding {
    background: url("../../files/templates/images/logo_mabo-sanitec.svg") no-repeat 0 0;
    box-shadow: none;
    display: inline-block;
    float: right;
    height: 70px;
    margin: 1.5em 0.05em 0 0;
    padding: 0;
    position: relative;
    text-decoration: none;
    text-indent: -999em;   
    width: 270px;
    z-index: 2;
}

.produktkatalog h3 {
    display: block;
    left: 292px;
    margin: 0;
    position: absolute;
    width: 230px;
    z-index: 2;
}

.produktkatalog p .button {
    display: block;
    left: 290px;
    margin: 0;
    position: absolute;
    top: 130px;
    z-index: 2;
}

.produktkatalog p, .bild p  {    
    margin: 0 !important;    
}

.bild h2, .bild h3, .bild h4, .bild h5 {
    display: block;
    margin: 15px 0 0 20px !important;
    position: absolute;
    width: 325px;
    z-index: 2;
    font-size: 23px;
}

.bild p .button {
    display: block;
    margin: -55px 0 0 20px !important;
    position: absolute;    
    z-index: 2;
}

.klick_anker, .white {background: white}

.klick_anker p {margin: 0.59em 0 0}

.row {margin-bottom:20px;}

/*
       |--------------------------------------------------------------------------
       | UItoTop jQuery Plugin 1.2
       | http://www.mattvarone.com/web-design/uitotop-jquery-plugin/
       |--------------------------------------------------------------------------
*/

#toTop {
    display:none;
    text-decoration:none;
    position:fixed;
    bottom:30px;
    right:30px;
    overflow:hidden;
    width:43px;
    height:57px;
    border:none;
    text-indent:100%;
    background:url("../../files/templates/images/ui.totop.png") no-repeat left 0;
}

#toTopHover {
    background:url("../../files/templates/images/ui.totop.png") no-repeat left -62px;
    width:43px;
    height:57px;
    display:block;
    overflow:hidden;
    float:left;
    opacity: 0;
    -moz-opacity: 0;
    filter:alpha(opacity=0);
}

#toTop:active, #toTop:focus {
    outline:none;
}

.pagination {
    border-top: 1px solid #ECE4D9;
    display: block;
    margin-top: 22px;
    padding-top: 4px;
    width: 1105px;
}

.pagination ul{float:right;margin:0;padding:0;text-align:right}
.pagination li{display:inline;margin:0;padding:0;list-style-type:none}
.pagination p{float:left;padding:3px 7px;text-align:left;background-color:#E9E9E9; margin: 0}

/**
       * @section Accessibility Module
       *
       * (en) skip links and hidden content
       * (de) Skip-Links und versteckte Inhalte
       */

/* (en) classes for invisible elements in the base layout */
/* (de) Klassen für unsichtbare Elemente im Basislayout */

.ym-skip,
.ym-hideme,
.ym-print {
    position:absolute;
    top:-32768px;
    left:-32768px; /* LTR */
}

/* (en) make skip links visible when using tab navigation */
/* (de) Skip-Links für Tab-Navigation sichtbar schalten */
.ym-skip:focus,
.ym-skip:active {
    position:static;
    top:0;
    left:0;
}

/* skiplinks:technical setup */
.ym-skiplinks {
    position:absolute;
    top:0px;
    left:-32768px;
    z-index:1000;
    width:100%;
    margin:0;
    padding:0;
    list-style-type:none;
}

.ym-skiplinks .ym-skip:focus,
.ym-skiplinks .ym-skip:active {
    left: 32768px;
    outline: 0 none;
    position: absolute;
    width: 100%;
}


.equalize > div {
    overflow: visible;
}

.cookiebar {
    background-color: #FCAF17;
    color: #333;
}

.cookiebar__button {
    margin: 0;
    padding: 0.3em 1.5em 0.2em;
    background-color: #305580;
    color: #fff;
    font-weight: 700;
    -webkit-border-radius: .2em;
    -moz-border-radius: .2em;
    border-radius: .2em;
    font: normal 1em/2em ZwoWeb-Light, arial, serif;
}

.cookiebar__button:hover {
    background-color: #1d3952;
    color: #fff;
}





/* Desktop */
@media (min-width: 960px) and (max-width: 1199px) {

    #container, #footer .mod_article, #footer .footerlinks, #footer .mod_boxes4ward .boxes4ward_article, #header .inside {
        margin: 0 auto;
        padding-left: 14px;
        padding-right: 14px;
        width: 960px;
    }

    #wrapper { background: url("../../files/templates/images/landing_wrapper_bg.png") repeat-x 0 120%;  }

    .home #container {  padding-bottom: 0; }

    .produktkatalog p .button {
        display: block;
        margin: -105px 0 0 220px;
        position: absolute;
        z-index: 2;
    }

    #header .inside {  height: 180px;  }

}

/*
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 959px) {

    html {
        background: url("../../files/templates/images/body_bg_Tablets.png") no-repeat scroll 71% 0 transparent;
    }

    #wrapper {
        background: url("../../files/templates/images/landing_wrapper_bg.png") repeat-x 0 130%;
    }

    #container, #footer .mod_article, #footer .footerlinks, #footer .mod_boxes4ward .boxes4ward_article, #header .inside {
        margin: 0 auto;
        padding-left: 14px;
        padding-right: 14px;
        width: 715px;
    }

    .produktkatalog p .button {
        display: block;
        left: 107px;
        position: absolute;
        top: 117px;
        z-index: 2;
        margin: 0
    }


    .produktkatalog h3 {
        display: block;
        left: 106px;
        position: absolute;
        width: 230px;
        z-index: 2;
        margin: 0
    }

    header #branding {
        margin: 1.5em 0.05em 0 0;
    }
    .home #container {
        padding-bottom: 0;
    }

    #header .inside {
        height: 175px;
    }

    .ce_download.down_one, .ce_download.down_two {
        float: left;
    }


}


/* Smartphones to Tablets */
@media (min-width: 481px) and (max-width: 767px) {

    body {
        background-position: 0 23px
    }

    #container, #footer .mod_article, #footer .footerlinks, #footer .mod_boxes4ward .boxes4ward_article, #header .inside {
        margin: 0 auto;
        padding-left: 14px;
        padding-right: 14px;
        width: 495px;
    }

    #header .inside {
        height: 170px !important;
    }

    header #branding {
        display: block;
        float: left;
        margin: 0;
        position: absolute;
        left: 0;
        top: 30px;
        width: 150px;
        background-size: 150px auto;
        height: 44px;
    }

    .headeline h1.blue, .headeline h2.blue {
        border-radius: 5px !important;
    }

    header #branding a {

    }
    img, figure, .mod_cfs_maps img {   max-width: 83%; }

    #header .inside {  height: 130px; }

    #mabo-klick-anker .ce_player {display: none}

    ym-equalize > [class*="ym-g"] {
        display: inline-block;
        vertical-align: unset;
    }

    .ym-gl, .ym-gr{
        float: none;
        margin: 0
    }

    .ym-g15,.ym-g20, .ym-g25, .ym-g30,  .ym-g33,  .ym-g35,  .ym-g38, .ym-g40, .ym-g45, .ym-g50, .ym-g55, .ym-g60,  .ym-g62,   .ym-g65, .ym-g66, .ym-g70,.ym-g75,  .ym-g80, .ym-g85,
    #footer .inside .left, #footer .inside p.right{
        width: 100% ;
        float: none;
        margin: 5px 0;
    }

    .equalize > div {
        display: inline-block;
    }

    .subcl, .subc , .subcr , .ym-gbox-left, .ym-gbox, .ym-gbox-right {
        padding: 0 !important;
    }

    footer ul.footerlist {
        overflow: hidden;
    }

    .ym-grid > [class*="ym-g"] > [class*="ym-gbox"],
    .ym-grid > [class*="ym-col"] > [class*="ym-cbox"] {
        overflow: hidden; /* optional for containing floats */
        padding: 0 !important;
        margin: 0 !important;
    }

    .equalize > div {
        display: inline-block;
    }

    .subcl, .subc , .subcr{
        padding: 0 !important;
    }
    footer ul.footerlist {
        overflow: hidden;
    }


    .produktkatalog h3, .produktkatalog p .button {
        left: 245px;
    }

    #footer .inside .left, #footer .inside p.right {
        float: left;
        margin: 1em 0 0.5em;
        width: 100%;
    }

    #footer .boxes4ward_article .ce_text.bild {
        margin: 0.5em 0;
    }

    #container #dreier-blog.mod_article .bild {
        margin: 0.9em 0;
    }

    /* Linearisation for Grid- and Column-Module, based on CSS class .linearize-level-1 */
    .ym-grid,
    .ym-grid > [class*="ym-g"],
    .ym-grid > [class*="ym-col"] {
        display: block;
        float: none;
        padding: 0;
        margin: 0;
        width: 100% !important;
    }

    .ym-grid > [class*="ym-g"] > [class*="ym-gbox"],
    .ym-grid > [class*="ym-col"] > [class*="ym-cbox"] {
        overflow: hidden; /* optional for containing floats */
        padding: 0 !important;
        margin: 0 !important;
    }

    #mabo-klick-anker .ce_player {display: none}

}


/* Smartphones */
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {

    body {
        background-position: 0 23px;

    }
    body {
        min-width:420px;
    }

    #container, #footer .mod_article, #footer .footerlinks, #footer .mod_boxes4ward .boxes4ward_article, #header .inside {
        padding-left: 0;
        padding-right: 0;
        width: 420px;
    }

    header #branding {
        display: block;
        float: left;
        margin: 0;
        position: absolute;
        left: 0;
        top: 30px;
        width: 150px;
        background-size: 150px auto;
        height: 44px;
    }

    .headeline h1.blue, .headeline h2.blue {
        border-radius: 5px !important;
    }

    img, figure, .mod_cfs_maps img {   max-width: 83%; }

    #header .inside {  height: 130px; }

    #mabo-klick-anker .ce_player {display: none}

    .ym-equalize > [class*="ym-g"] {
        display: inline-block;
        vertical-align: unset;
    }

    .ym-gl, .ym-gr{
        float: none;
        margin: 0
    }

    .ym-g15,.ym-g20, .ym-g25, .ym-g30,  .ym-g33,  .ym-g35,  .ym-g38, .ym-g40, .ym-g45, .ym-g50, .ym-g55, .ym-g60,  .ym-g62,   .ym-g65, .ym-g66, .ym-g70,.ym-g75,  .ym-g80, .ym-g85,
    #footer .inside .left, #footer .inside p.right{
        width: 100% ;
        float: none;
        margin: 5px 0;
    }

    .equalize > div {
        display: inline-block;
    }

    .subcl, .subc , .subcr , .ym-gbox-left, .ym-gbox, .ym-gbox-right {
        padding: 0 !important;
    }

    footer ul.footerlist {
        overflow: hidden;
    }

    .ym-grid > [class*="ym-g"] > [class*="ym-gbox"],
    .ym-grid > [class*="ym-col"] > [class*="ym-cbox"] {
        overflow: hidden; /* optional for containing floats */
        padding: 0 !important;
        margin: 0 !important;
    }

    header .styled_select {        
        display: none;        
    }

    img, figure, .mod_cfs_maps img {
        height: auto;
        margin: 0;
        max-width: 98%;
        width: auto;
    }
    .mod_dlh_googlemaps img, .dlh_googlemap img { max-width: none; }

    /* http://sonspring.com/journal/clearing-floats */
    .clear {
        clear:both;
        display:block;
        height:0;
        overflow:hidden;
        visibility:hidden;
        width:0;
    }

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

    .produktkatalog h3 {
        width: 196px;
        left: 180px;
    }

    .produktkatalog p .button {
        display: block;
        left: 175px;
        margin: 0;
        position: absolute;
        top: 120px;
        z-index: 2;
    }
    #footer .inside .left {
        float: left;
        margin: 0.9em 0 0.5em;
        width: 100%;
    }

    #footer .inside p.right {
        float: left;
        margin: 0.5em 0;
        width: 100%;
    }

    #footer .boxes4ward_article .ce_text.bild {
        margin: 0.5em 0;
    }

    #container #dreier-blog.mod_article .bild {
        margin: 0.9em 0;
    }

    .home #container {  padding-bottom: 0;
    }

    #container .produktliste.blue, #container .produktliste.lila, #container .produktliste.green {
        margin: 15px 0 0;
        padding: 0;
        width: 100%;
    }

    #header .inside { height: 170px;  }

    #mabo-klick-anker .ce_player {display: none}

    .produktliste {
        margin-top: 20px;
        display: inline-block;
    }

    .produktliste ul {
        margin-left: 0;
    }

    .produktliste ul li {
        margin-bottom: 10px;
        width: 100%;
    }
    .produktliste ul li span {
        margin-right: 0;
        width: 100%;
    }
    .ce_download.down_one, .ce_download.down_two {
        float: none;
    }
}

/* Landscape */
@media only screen
and (min-device-width : 414px)
and (max-device-height : 896px)
and (-webkit-device-pixel-ratio : 2)
and (orientation : landscape) {

    body {
        min-width:720px;
        background-position: 0 0;
    }

    #container, #footer .mod_article, #footer .footerlinks, #footer .mod_boxes4ward .boxes4ward_article, #header .inside {
        padding-left: 0;
        padding-right: 0;
        width: 720px;
    }

    .headeline h1.blue:before, .headeline h2.blue:before {

    }
    .ce_download.down_one, .ce_download.down_two {
        float: none;
    }
}

@media only screen and (max-width: 479px) {
    body {
        background-position: 0 -21px ;
    }

    body {  min-width:350px;  }

    .produktliste {
        margin-top: 20px;
        display: inline-block;
    }
    #container, #footer .mod_article, #footer .footerlinks, #footer .mod_boxes4ward .boxes4ward_article, #header .inside {
        padding-left: 0;
        padding-right: 0;
        width: 350px;
    }

    header #branding {
        display: block;
        float: left;
        margin: 0;
        position: absolute;
        left: 0;
        top: 30px;
        width: 150px;
        background-size: 150px auto;
        height: 44px;
    }

    .headeline h1.blue, .headeline h2.blue {
        border-radius: 5px !important;
    }

    img, figure, .mod_cfs_maps img {   max-width: 83%; }

    #header .inside {  height: 130px; }

    #mabo-klick-anker .ce_player {display: none}

    .ym-equalize > [class*="ym-g"] {
        display: inline-block;
        vertical-align: unset;
    }

    .ym-gl, .ym-gr{
        float: none;
        margin: 0
    }

    .ym-g15,.ym-g20, .ym-g25, .ym-g30,  .ym-g33,  .ym-g35,  .ym-g38, .ym-g40, .ym-g45, .ym-g50, .ym-g55, .ym-g60,  .ym-g62,   .ym-g65, .ym-g66, .ym-g70,.ym-g75,  .ym-g80, .ym-g85,
    #footer .inside .left, #footer .inside p.right{
        width: 100% ;
        float: none;
        margin: 5px 0;
    }

    .equalize > div {
        display: inline-block;
    }

    .subcl, .subc , .subcr , .ym-gbox-left, .ym-gbox, .ym-gbox-right {
        padding: 0 !important;
        margin-bottom: 0 !important;
    }

    footer ul.footerlist {
        overflow: hidden;
    }

}



.margin-top-10 {
    margin-top: 10px;
}

.margin-top-20 {
    margin-top: 20px;
}

.margin-top-30 {
    margin-top: 30px;
}

.margin-top-40 {
    margin-top: 40px;
}

.margin-top-50 {
    margin-top: 50px;
}

.margin-top-60 {
    margin-top: 60px;
}

.margin-bottom-10 {
    margin-bottom: 10px;
}

.margin-bottom-20 {
    margin-bottom: 20px;
}

.margin-bottom-30 {
    margin-bottom: 30px;
}

.margin-bottom-40 {
    margin-bottom: 40px;
}

.margin-bottom-50 {
    margin-bottom: 50px;
}

.margin-bottom-60 {
    margin-bottom: 60px;
}


.padding-top-10 {
    padding-top: 10px;
}

.padding-top-20 {
    padding-top: 20px;
}

.padding-top-30 {
    padding-top: 30px;
}

.padding-top-40 {
    padding-top: 40px;
}

.padding-top-50 {
    padding-top: 50px;
}

.padding-top-60 {
    padding-top: 60px;
}

.padding-bottom-10 {
    padding-bottom: 10px;
}

.padding-bottom-20 {
    padding-bottom: 20px;
}

.padding-bottom-30 {
    padding-bottom: 30px;
}


.padding-bottom-40 {
    padding-bottom: 40px;
}

.padding-bottom-50 {
    padding-bottom: 50px;
}

.padding-bottom-60 {
    padding-bottom: 60px;
}


@media all {

    /*     --hide mobilmenue
    ------------------------------------------------- */
    .selectnav {display: none;}
    #mobnav {display: none!important;}

    .ym-hlist {
        /* (en) containing floats in IE */
        /* (de) Einfassen der Floats im IE */
        width:100%;
        overflow:hidden;
        /* (en|de) Bugfix:IE - collapsing horizontal margins */
        position: absolute;
        top: 104px;
        line-height:1em;
    }

    .ym-hlist ul {        
        margin:0;
        padding: 0 0 35px 0;
        /* (en|de) Bugfix:IE - Doubled Float Margin Bug */
        display:inline;
        float:left; /* LTR */
    }

    .ym-hlist ul li {
        /* (en|de) Bugfix:IE - Doubled Float Margin Bug */
        display:inline;
        float:left; /* LTR */
        font-size:1.1em;
        line-height:1em;
        list-style-type:none;
        margin: 0;
        padding:0;
        text-transform: uppercase;
        font-family: ZwoWeb-Light, arial, serif;
    }

    .ym-hlist ul li a,
    .ym-hlist ul li strong
    {
        background:transparent;
        color: #000000;
        display: block;
        font-size: 1em;
        line-height: 2em;
        padding: 0 0.9em;
        font-weight: normal;
        text-decoration: none;
        width: auto;
    }

    .ym-hlist ul li a:hover,
    .ym-hlist ul li strong:hover {
        color: #fff;
    }

    .ym-hlist ul.level_1 li a:focus,
    .ym-hlist ul.level_1 li a:hover,
    .ym-hlist ul.level_1 li a:active,
    .ym-hlist ul.level_1 li strong:focus,
    .ym-hlist ul.level_1 li strong:hover,
    .ym-hlist ul.level_1 li strong:active {
        color: #fff;
        outline: 0 none;
        background: url("../../files/templates/images/nav_hover.png") no-repeat center top;
    }

    .ym-hlist ul.level_1 li.active,
    .ym-hlist ul.level_1 li.active strong.active {
        color: #fff;
        background: url("../../files/templates/images/nav_active.png") no-repeat center top;
    }

    .ym-hlist ul.level_1 li.active strong:hover,
    .ym-hlist ul.level_1 li.active a:focus,
    .ym-hlist ul.level_1 li.active a:hover,
    .ym-hlist ul.level_1 li.active a:active,
    .ym-hlist ul.level_1 li.trail a,
    .ym-hlist ul.level_1 li.trail strong.trail {
        color: #fff; 
        background: url("../../files/templates/images/nav_active.png") no-repeat center top;
    }
    /*navigation Level 2*/

    .ym-hlist ul.level_2 {    
        display: block;
        left: 0;
        margin: 6px 0 0;
        padding: 0;
        position: absolute;
        z-index: 7;
    }

    .ym-hlist ul.level_2 li {
        /* (en|de) Bugfix:IE - Doubled Float Margin Bug */
        display:inline;
        float:left; /* LTR */
        font-size: 0.80em;
        line-height:1em;
        list-style-type:none;
        margin: 0 .25em 0 0;
        padding:0;
        text-transform: uppercase;
        font-family: ZwoWeb-Light, arial, serif;
    }

    .ym-hlist ul.level_2 li a,
    .ym-hlist ul.level_2 li strong,
    .ym-hlist ul.level_2 li.trail a {
        background-color: #9a9a9a !important;
        display: block;
        text-decoration: none;
        font-size: 1em;
        line-height: 1.9em;
        padding: 0.2em 0.9em 0 0.9em;
        font-weight: normal;
        text-decoration: none;
        width: auto;
        font-weight: 400;
        border-radius: 5px;
        background-image: none !important;
        color: #fff;
    }

    .ym-hlist ul.level_2 li.active a:hover,
    .ym-hlist ul.level_2 li a:hover,
    .ym-hlist ul.level_2 li strong:hover,
    .ym-hlist ul.level_2 li a.sibling:hover {
        background: #305580 !important;
        color: #fff !important;
        border-radius: 5px;

    }

    .ym-hlist ul.level_2 li.active strong,
    .ym-hlist ul.level_2 li.active a:focus,
    .ym-hlist ul.level_2 li.active a:active,
    .ym-hlist ul.level_2 li.trail a,
    .ym-hlist ul.level_2 li.active {
        background: #FCAF17 !important;
        color: #fff !important;
        border-radius: 5px;

    }


    /*Footer Navigation --- Links -----------------------------------------------------------------------------------------*/

    footer .left a{
        color:#000;
        background:transparent;
        text-decoration:none;
        text-transform: uppercase;
        margin: 0 10px 0 0
    }

    footer .right a{
        color:#305580;
        background:transparent;
        text-decoration:none;        
    }

    /*--- Links ----------------------------------------------------------------------------------------- */


    footer .left a:active { outline: none; }

    /* (en) maximum constrast for tab focus - change with great care */
    /* (en) Maximaler Kontrast für Tab Focus - Ändern Sie diese Regel mit Bedacht */
    footer .left a:hover,
    footer .left a:focus {    
        color:#305580;
        text-decoration:none;
    }




    /* search form -------------------------------------- */

    #search {
        float: right;
        margin: 0;
        position: absolute;
        right: 25px;
        top: 98px; 
        z-index: 9;
    }

    .ym-searchform {
        float:right;
        display: inline;
        line-height: 2em;
        padding: 0.5em 0;
    }

    .ym-searchform .ym-searchfield, input#ctrl_keywords_15 {
        background: #fff;
        line-height: 19px;
        font-size: 0.85em;
        padding: 0.22em;
        width: 13em;
        border: solid 1px #888;
        border: solid 1px rgba(0, 0, 0, .2);
        outline: none;
        -webkit-appearance: none;
        -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
        -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
    }

    .ym-searchform .ym-searchbutton, input#ctrl_submit_15 {       
        -webkit-appearance: none;
        cursor: pointer;
        display: inline-block;
        white-space: nowrap;
        background-color: #fcaf17;
        background-image: -webkit-linear-gradient(top, #ffc042, #fcaf17);
        background-image: -moz-linear-gradient(top, #ffc042, #fcaf17);
        background-image: -ms-linear-gradient(top, #ffc042, #fcaf17);
        background-image: -o-linear-gradient(top, #ffc042, #fcaf17);
        background-image: linear-gradient(top, #ffc042, #fcaf17);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffc042', EndColorStr='#fcaf17');
        border: 1px solid #fcaf17;
        -webkit-border-radius: .5em;
        -moz-border-radius: .5em;
        border-radius: .5em;
        -webkit-box-shadow: 0 0 1px 1px rgba(255, 255, 255, .8) inset, 0 1px 0 rgba(0, 0, 0, .15);
        -moz-box-shadow: 0 0 1px 1px rgba(255, 255, 255, .8) inset, 0 1px 0 rgba(0, 0, 0, .15);
        box-shadow: 0 0 1px 1px rgba(255, 255, 255, .8) inset, 0 1px 0 rgba(0, 0, 0, .15);
        color: #fff !important;
        font-size: 0.9em;
        line-height: 22px;
        margin: 0;
        padding: 0.15em 0.95em;
        overflow: visible; /* removes extra side spacing in IE */
        text-decoration: none !important;
        text-shadow: 0 1px 0 rgba(0, 0, 0, .4);

    }

    .ym-searchform .ym-searchbutton:hover,  input#ctrl_submit_15:hover {
        background-color: #305580;
        background-image: -webkit-linear-gradient(top, #3f6fa6, #305580);
        background-image: -moz-linear-gradient(top, #3f6fa6, #305580);
        background-image: -ms-linear-gradient(top, #3f6fa6, #305580);
        background-image: -o-linear-gradient(top, #3f6fa6, #305580);
        background-image: linear-gradient(top, #3f6fa6, #305580);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#3f6fa6', EndColorStr='#305580');
        border: 1px solid #3f6fa6;

    }
    .mod_search form  { 
        background: #eee;
        display: inline-block;
        padding: 20px;
        width: auto;
    }
}

/* Desktop */
@media (min-width: 960px) and (max-width: 1199px) { 

    .ym-hlist {
        width: 960px;
    }



}

/* Tablets */
@media (min-width: 768px) and (max-width: 959px) { 
    .ym-hlist {
        width: 720px;
    }

    .ym-hlist ul li {
        font-size: 1em;
        margin: 4px 0 0 0; 
    }

    .ym-hlist {
        line-height: 1em;
        overflow: hidden;
        position: absolute;
        top: 100px;  
    }

    .ym-hlist ul li a, .ym-hlist ul li strong  {
        line-height: 2.1em;  
        padding: 0 0.7em;
    }  

    #search {
        float: right;
        margin: 0;
        position: absolute;
        right: 0;
        top: 97px;

    }

    .ym-searchform {
        display: inline;
        float: left;
        line-height: 2em;
        padding: 0.5em 1.5em;
    }
    .ym-searchform .ym-searchfield, input#ctrl_keywords_15 {  
        width: 9em;
    }

}

/* Smartphones to Tablets */
@media (min-width: 481px) and (max-width: 767px) {
    header #desknav {  display: none;}
    #mobnav, .selectnav {display: inline-block;}

    #search {
        left: 0;
        line-height: 20px;
        opacity: 1 !important;
        padding: 3px;
        width: 90%; 
        margin: 0 5% 0 5%;
        top: 121px; 
        position: absolute;
        display: inline-block;
    }

    .ym-searchform {
        display: block;
        float: none;
        width: auto;
        padding: 5px 5px 5px 0;
        text-align: right;
    }

    .ym-searchform input[type="search"] {width: 82%; }

    .selectnav {
        background-color: #FFFFFF;
        border: 1px solid #FCAF17;
        border-radius: 4px 4px 4px 4px;          
        font-family: "Trebuchet MS",Verdana,sans-serif;
        font-size: 12px;
        height: 27px;
        left: 0;
        line-height: 20px;
        opacity: 1 !important;
        padding: 3px;
        width: 90%; 
        margin: 0 5% 0 5%;
        top:94px; 
        position: absolute;

    }

}
/* Smartphones */
@media (max-width: 480px) {


    header #desknav {  display: none;   }
    #mobnav, .selectnav {display: inline-block;}

    #search {
        left: 0;
        line-height: 20px;
        opacity: 1 !important;
        padding: 3px;
        width: 90%; 
        margin: 0 5% 0 5%;
        top: 76px;
        position: absolute;
        display: inline-block;
    }

    .ym-searchform {
        display: block;
        float: none;
        width: auto;
        padding: 5px 5px 5px 0;
        text-align: left;
    }

    .ym-searchform input[type="search"] {  width: 75%;  }


}

/* Smartphones to Tablets */
@media (min-width: 320px) and (max-width: 480px) {
    header #desknav { display: none; }
    #mobnav, .selectnav {display: inline-block;}


}

/* Smartphones */
@media (max-width: 479px) {
    .ym-searchform input[type="search"] {
        width: 66%;
    }
}

.mod_mobile_menu  {

}

.mod_mobile_menu .bar {
     position: absolute;
     right: 0px;
     top: 23px;
    height: 45px;
    display: inline-block;
    display: inline-block;
 }

.mod_mobile_menu .far-bar {
    position: relative;
    display: inline-block;
    background: url("../../files/templates/images/menu-lines.svg") no-repeat 50% 50%;
    background-size: 20px;
    padding: 5px;
    border: 2px solid #305580;
    border-radius: 100%;
    width: 30px;
    height: 30px;
    line-height: 30px;
}

.mobile_menu.active .close {
    position: absolute;
    display: inline-block;
    background: #fff url("../../files/templates/images/close.svg") no-repeat 50% 50%;
    background-size: 20px;
    border-radius: 100%;
    padding: 5px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    right: -15px;
    top: 10px;
    font-size: 0;
    z-index: 999;
}


.mod_mobile_menu .men {
    margin: 0;
    display: inline-block;
    line-height: 44px;
    vertical-align: text-bottom;
    position: relative;
}

.mobile_menu .inner {
    background: #fff;
}

.mobile_menu .inner .ym-hlist {
    position: relative;
    top: auto;

}

.mobile_menu .inner .ym-hlist ul {
    float: none;
    position: relative;
}

.mobile_menu .inner .ym-hlist ul li {
    display: block;
    float: none;
    margin: 0;
    border-bottom: 1px solid #eee;
}

.mobile_menu .ym-hlist ul.level_2 li.active strong,
.mobile_menu .ym-hlist ul.level_2 li.active a:focus,
.mobile_menu .ym-hlist ul.level_2 li.active a:active,
.mobile_menu .ym-hlist ul.level_2 li.trail a,
.mobile_menu .ym-hlist ul.level_2 li.active,
.mobile_menu .ym-hlist ul.level_2 li a,
.mobile_menu .ym-hlist ul.level_2 li strong,
.mobile_menu .ym-hlist ul.level_2 li.trail a{
    border-radius: 0;
}

.mobile_menu li.submenu_show > ul {
    margin-top: 0;
}

/**
 * "Yet Another Multicolumn Layout" - YAML CSS Framework
 *
 * YAML form theme: "gray-theme"
 *
 * @copyright			 Copyright 2005-2012, Dirk Jesse
 * @license				 CC-BY 2.0 (http://creativecommons.org/licenses/by/2.0/),
 *                       YAML-CDL (http://www.yaml.de/license.html)
 * @link                 http://www.yaml.de
 * @package				 yaml
 * @version              v4.0.2
 * @revision             $Revision: 743 $
 * @lastmodified         $Date: 2012-10-23 23:01:14 +0200 (Di, 23 Okt 2012) $
 */

@media screen and (min-width: 0px){

    /**
    * @section general width settings for formular elements in modern browsers
    *          switching to CSS3 box modell "border-box" for perfect flexible forms
    *
    * Styling for: <labels>, <input>, <textarea> and <select>
    *
    */

    .ym-form input,
    .ym-form input,
    .ym-form textarea,
    .ym-form select {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
        width: 100%;
    }

    .ym-columnar label {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
    }

    .ym-columnar .ym-fbox-select select,
    .ym-columnar .ym-fbox-text input,
    .ym-columnar .ym-fbox-text textarea { width:70%; }

    .ym-full .ym-fbox-select select,
    .ym-full .widget input,
     .ym-full .widget .textarea,
    .ym-full .ym-fbox-text input,
    .ym-full .ym-fbox-text textarea { width:100%; }
}

@media screen, projection {

    /**
    * @section general form styling
    *
    * Styling for: <form>, <fieldset>, <legend>, <label> and rows (class="ym-fbox-[xxx]")
    *
    */
    .ym-form {
        background:#F7F7F7;
        border:2px #fff solid;
        margin: 1.5em 0 0 0;
        padding: 0;
        -webkit-box-shadow: 0 0 4px #ddd;
        -moz-box-shadow: 0 0 4px #ddd;
        box-shadow: 0 0 4px #ddd;
    }

    .ym-form fieldset {
        position:static;
        background:transparent;
        margin: 0.75em 0 0.75em 0;
        padding: 0 0.5em;
    }

    .ym-form legend {
        background:transparent;
        color:#000;
        font-size:1.2em;
        line-height:1.25em;
        font-weight:bold;
        padding:0 0.5em;
    }

    .ym-form label {
        color: #305580;
        line-height: 1.5em;
        display: block;
        font-size: 13px;
        margin-bottom: 5px;
    }

    .ym-label {
        color: #305580;
        padding-top: 0.25em;
    }

    .ym-form .ym-form div.ym-fbox-check:focus + label {
        color:#000;
    }

    /* styling containing DIV elements | Gestaltung der kapselnden DIV-Elemente */
    .ym-form div.widget,
    .ym-form div.ym-fbox-text,
    .ym-form div.ym-fbox-select,
    .ym-form div.ym-fbox-check,
    .ym-form div.ym-fbox-button {
        padding: 0 1em;
        margin-bottom: 0.5em;
    }

    .ym-form div.ym-fbox-button {        
        padding:0 1em 1.0em 1em;
        margin: 0;
    }

    .ym-form .ym-gbox {
        padding: 0 0.5em;
        margin-right: 0;
    }

    .ym-form h6 {
        color: #000;
        margin: 1em 0 0 1em;
    }

    /**
    * @section styling form elements
    *
    * Styling for: Input, Textarea, Select ...
    *
    */

    /* styling standard form elements with 'almost' equal flexible width */
    /* Gestaltung der einzelnen Formularelemente mit annähend gleicher Breite */
    .ym-form .ym-fbox-text input,
    .ym-form .widget input,
    .ym-form .ym-fbox-text textarea {
        line-height: 35px;
        padding: 9px;
        margin-top: -2px;
        height: 35px;
    }

    .ym-form .ym-fbox-select select {
        line-height: 1em;
        padding: 0.25em 2px 0.25em 1px;
        margin-top: -2px;
    }

    /* proportional fonts for all form elements */
    .ym-form input,
    .ym-form textarea,
    .ym-form select,
    .ym-form optgroup {
        font-family: Helvetica, Arial, sans-serif;
        -webkit-box-shadow: inset 0 0 4px #eee;
        -moz-box-shadow: inset 0 0 4px #eee;
        box-shadow: inset 0 0 4px #eee;
    }
    .ym-form textarea {
        padding: 9px;
    }

    .ym-form optgroup {
        font-style:normal;
        font-weight:bold;
    }

    .ym-form .ym-fbox-text input,
    .ym-form .ym-fbox-text textarea,
    .ym-form .ym-fbox-select select {
        border:1px solid #ddd;
    }

    /* General form styling	| Allgemeine Formatierung des Formulars */
    .ym-form .ym-message {
        color:#305580;
        margin-bottom:0.5em;
    }

    /* Highlight mandatory fields | Pflichtfeldkennzeichnung hervorheben */
    .ym-form .ym-required {
        color:#800;
        font-weight:bold;
    }

    /* form validation highlight colors */
    .ym-form input:valid,
    .ym-form textarea:valid { 
        background-color: #fff;
        border: solid 1px #888;
        border: solid 1px rgba(255,255,255,.1);
        outline: none;

        -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.2);
        -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,.2);
        box-shadow: inset 0 1px 3px rgba(0,0,0,.2);
    }
    .ym-form input:invalid,
    .ym-form textarea:invalid { 
        background-color: #FFF0EF;
        border: solid 1px #888;
        border: solid 1px rgba(255,255,255,.1);
        outline: none;

        -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.2);
        -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,.2);
        box-shadow: inset 0 1px 3px rgba(0,0,0,.2);
    }

    /**
    * @section error messages
    *
    */

    .ym-form .ym-error label {
        color:#800;
        font-weight:normal;
    }

    .ym-form .ym-error input,
    .ym-form .ym-error select,
    .ym-form .ym-error textarea {
        border: 1px #800 solid;
    }

    .ym-form .ym-error input:hover,
    .ym-form .ym-error input:focus,
    .ym-form .ym-error select:hover,
    .ym-form .ym-error select:focus,
    .ym-form .ym-error textarea:hover,
    .ym-form .ym-error textarea:focus {
        border: 1px #EF1100 solid !important;
        
    }

    .ym-form .ym-error .ym-message {
        color:#EF1100;
        font-weight: bold;
        margin-top: 0;
    }

    /* :hover and :focus status on form fields | Effekt zur Hervorhebung von Formularfeldern bei :hover oder :focus */
    .ym-form div.ym-fbox-text input:focus,
    .ym-form div select:focus,
    .ym-form div textarea:focus,
    .ym-form div.ym-fbox-text input:hover,
    .ym-form div select:hover,
    .ym-form div textarea:hover,
    .ym-form div.ym-fbox-text input:active,
    .ym-form div select:active,
    .ym-form div textarea:active {       
        background:#fff;
        border: solid 1px #9F9F9F;
        border: solid 1px rgba(159,159,159,.1);
        outline: none;

        -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.5);
        -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,.5);
        box-shadow: inset 0 1px 3px rgba(0,0,0,.5);
    }

    /**
    * @section Buttons
    *
    * inspired from: Catalin Rosu (http://www.red-team-design.com/just-another-awesome-css3-buttons)
    */
    .ym-button,
    .ym-form button,
    .ym-form input[type="button"],
    .ym-form input[type="reset"],
    .ym-form input[type="submit"],
    .button, p.more a, p.back a, p.back a:hover,
    .ce_download.down_one a, .ce_download.down_two a {
        display: inline-block;
        white-space: nowrap;
        background-color: #FCAF17;
        -webkit-border-radius: .2em;
        -moz-border-radius: .2em;
        border-radius: .2em;
        color: #333 !important;
        cursor: pointer;
        font: normal 1em/2em ZwoWeb-Light, arial, serif;
        margin: 1.5em 0.75em 0 0;
        padding: 0.3em 1.5em 0.2em;
        overflow: visible; /* removes extra side spacing in IE */
        text-decoration: none !important;
        border: 0;
        outline: none;
    }

    .ym-form button:hover,
    .ym-form input[type="button"]:hover,
    .ym-form input[type="reset"]:hover,
    .ym-form input[type="submit"]:hover,
    .ym-button:hover,
    .button:hover,
    p.more a:hover, p.back a,
    .ce_download.down_one a:hover, .ce_download.down_two a:hover {
        background-color: #305580;
        color: #fff !important;

    }

    .ym-form button:active,
    .ym-form input[type="button"]:active,
    .ym-form input[type="reset"]:active,
    .ym-form input[type="submit"]:active,
    .ym-button:active {
         background-color: #305580;
        color: #fff !important;                
                      
    }

    .ym-form button:focus,
    .ym-form input[type="button"]:focus,
    .ym-form input[type="reset"]:focus,
    .ym-form input[type="submit"]:focus,
    .ym-button:focus {
        outline: 0;
        background: #fafafa;
    }

    .button {
        margin: 0 0.75em 0.75em 0;
    }

    /* pseudo elements don't work on input */
    .ym-form button:before,
    .ym-button:before {
        background: #ccc;
        background: rgba(0,0,0,.1);
        float: left;
        width: 1em;
        text-align: center;
        font-size: 1.5em;
        margin: 0 1em 0 -1em;
        padding: 0 .2em;
        -moz-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
        -webkit-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
        box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
        -moz-border-radius: .15em 0 0 .15em;
        -webkit-border-radius: .15em 0 0 .15em;
        border-radius: .15em 0 0 .15em;
        pointer-events: none;
    }

    .ym-add:before { content: "\271A"; }
    .ym-delete:before { content: "\2718"; }
    .ym-edit:before { content: "\270E"; }
    .ym-email:before { content: "\2709"; }
    .ym-like:before { content: "\2764"; }
    .ym-next:before { content: "\279C"; }
    .ym-play:before { content: "\25B6"; }
    .ym-save:before { content: "\2714"; }
    .ym-spark:before { content: "\2737"; }
    .ym-star:before { content: "\2605"; }

    /* removes extra inner spacing in Firefox */
    .ym-form button::-moz-focus-inner {
        border: 0;
        padding: 0;
    }

    /* If line-height can't be modified, then fix Firefox spacing with padding */
    .ym-form input[type=button]::-moz-focus-inner,
    .ym-form input[type=reset]::-moz-focus-inner,
    .ym-form input[type=submit]::-moz-focus-inner {
        padding: .4em;
    }

    /* The disabled styles */
    .ym-form button[disabled],
    .ym-form button[disabled]:hover,
    .ym-form input[type=button][disabled],
    .ym-form input[type=button][disabled]:hover,
    .ym-form input[type=reset][disabled],
    .ym-form input[type=reset][disabled]:hover,
    .ym-form input[type=submit][disabled],
    .ym-form input[type=submit][disabled]:hover,
    .ym-button.ym-disabled,
    .ym-button.ym-disabled:hover {
        background: #eee;
        color: #aaa !important;
        border-color: #aaa;
        cursor: default;
        text-shadow: none;
        position: static;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }

    /* ie6 support styles - redefined buttons, because of missing support for attribute selectors */
    * html .ym-button,
    * html .ym-form button {
        display: inline-block;
        white-space: nowrap;
        background-color: #ccc;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#cccccc');
        border: 1px solid #777;
        color: #333 !important;
        cursor: pointer;
        font: normal 1em/2em Helvetica, Helvetica, sans-serif;
        margin: 1.5em 0.75em 0 0;
        padding: 0 1.5em;
        overflow: visible; /* removes extra side spacing in IE */
        text-decoration: none !important;
    }

    * html .ym-form button:focus,
    * html .ym-button:focus {
        outline: 0;
        background: #fafafa;
    }

    * html .ym-form button:hover,
    * html .ym-button:hover {
        background-color: #ddd;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd');
    }

    * html .ym-form button:active,
    * html .ym-button:active {
        background-color: #bbb;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#cccccc', EndColorStr='#bbbbbb');
        position: relative;
        top: 1px;
    }

    * html .ym-button.ym-disabled,
    * html .ym-button.ym-disabled:hover {
        background: #eee;
        color: #aaa !important;
        border-color: #aaa;
        cursor: default;
        text-shadow: none;
        position: static;
    }
    
    .anrede .ym-fbox-check input {
        margin-left: 10%;
        width: 27%;
    }
    .anrede div.ym-fbox-check {
        padding: 0;
    }
    .ym-form .anrede {
        display: block;
        margin: 1em 0.25em 0 0;
        padding: 0;
        width: 100%;
    }
    .anrede .ym-fbox-check {
        float: left;
        margin: 0;
        padding: 0;
        width: 10%;
    }

    .ym-form .anrede legend {
        background: none;
        color: #305580;
        font-size: 1.05em;
        font-weight: normal;
        line-height: 1.25em;
        padding:0;
        margin: 0 0 0.5em 0
    }

    .ym-form .anrede span {
        display: inline-block;
        float: left;
        width: 13%;
    }

    .ym-form .anrede span label {
        display: inline-block;
        font-size: 15px;
        margin: 0;
        line-height: 20px;
        vertical-align: top;
    }
    .ym-form .anrede span input {
        width: 20px;
        height: 20px;
        line-height: 20px;
    }
    .ym-form .captcha_text {
        margin: 10px 0 0 0;
        display: inline-block
    }

    .ym-form .datenschutz input {
        width: 15px;
        float: left;
        margin-top: 5px;
        margin-right: 10px;
        cursor: pointer;
    }

    .ym-form .datenschutz label {
        padding-left: 2em;
font-size: 0.8666666667em;
display: block !important;
margin: 0 !important;
}
}



@media all {

    /**
    * (en) reset monospaced elements to font size 16px in all browsers
    * (de) Schriftgröße von monospaced Elemente in allen Browsern auf 16 Pixel setzen
    *
    * @see: http://webkit.org/blog/67/strange-medium/
    */

    textarea,
    pre,
    code,
    kbd,
    samp,
    var,
    tt {
        font-family:Consolas, "Lucida Console", "Andale Mono", "Bitstream Vera Sans Mono", "Courier New", Courier;
    }

    /* (en) base layout gets standard font size 14px */
    /* (de) Basis-Layout erhält Standardschriftgröße von 14 Pixeln */
    body {
        font-family: ZwoWeb-Light, arial, serif;
        font-size:95.50%; /* base: 14px */
        color:#305580;
        /* (en) Prevent auto-scaling of text in mobile webkit browsers */
        /* (de) Automatische Schriftvergrößerung in mobilen Webkit-Browsern vermeiden */
        -webkit-text-size-adjust:100%;
    }

    /*--- Headings | Überschriften ------------------------------------------------------------------------*/

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: ZwoWebPro-BoldItalic, sans-serif;
        font-weight: 400;
        color:#fcaf17;
        margin:0;
    }

    h1.blue,
    h2.blue,
    h3.blue,
    h4.blue,
    h5.blue,
    h6.blue,
    .blue h1,
    .blue h2,
    .blue h3,
    .blue h4,
    .blue h5,
    .blue h6{
        font-family: ZwoWebPro-BoldItalic, sans-serif;
        font-weight: 400;
        color:#305580;
        margin: 0.9em 0 0.4em;
    }

    .produktliste h1.blue,
    .produktliste h2.blue,
    .produktliste h3.blue,
    .produktliste h4.blue,
    .produktliste h5.blue,
    .produktliste h6.blue,
    .produktliste .blue h1,
    .produktliste .blue h2,
    .produktliste .blue h3,
    .produktliste .blue h4,
    .produktliste .blue h5,
    .produktliste .blue h6{
        font-family: ZwoWebPro-BoldItalic, sans-serif;
        font-weight: 400;
        color:#305580;
        margin: 0;
    }

    .mod_newsarchive h2 a, .layout_latest h2 a{
        font-family: ZwoWebPro-BoldItalic, sans-serif;
        font-weight: 400;
        color:#fcaf17;
        margin:0;
    }

    .mod_newsarchive h2 a:hover, .layout_latest h2 a:hover {
        font-family: ZwoWebPro-BoldItalic, sans-serif;
        font-weight: 400;
        color:#305580;
        margin:0;
        background: no-repeat
    }

    #container h2.produktliste.blue{ background:#00a5e2; color: #fff; font-size: 150%; padding: 10px }

    .produktliste.blue h3{ color: #00a5e2; font-size: 150%;}

    #container h2.produktliste.green{ background:#38B6AB; color: #fff; font-size: 150%; padding: 10px }

    .produktliste.green h3{ color: #38B6AB; font-size: 150%;}

    #container h2.produktliste.lila{ background:#a877b2; color: #fff; font-size: 150%; padding: 10px }

    .produktliste.lila h3{ color: #a877b2; font-size: 150%;}


    #duschwannenfuss-sets h2.yellow, #badewannenfuss-sets h2.yellow {display: block;background: #FCAF17; color: #fff;padding: 15px 10px 45px 10px; font-size: 22px;}

    #duschwannenfuss-sets h3, #badewannenfuss-sets h3 {display: block;background: #FCAF17; color: #fff;padding: 5px 10px;  font-size:18px;  margin: 18px 0 0; }

    h1 {
        font-size:350%;
        line-height: 1.2em;
        margin: 0.4286em 0 0;
    }

    .headeline { margin: 0 0 20px}


    .home .headeline h1.yellow, .home .headeline h2.yellow {              
        padding: 15px 460px 0 25px;       

    }

    .headeline.block {
        overflow: visible;
    }

    .headeline h1.blue, .headeline h2.blue {
        background: #305580;
        color: #FFFFFF;       
        margin: 0 0 25px 0;
        padding: 15px 125px 0 0;       
        text-transform: uppercase;
        font-size: 170%;
        height: 125px;
        border-radius: 0 5px 5px 0;
        position: relative;
    }
    .headeline h1.blue:before, .headeline h2.blue:before {
        left: auto;
        right: 100%;
        width: 100vw;
        bottom: 0;
        top: 0;
        position: absolute;
        content: " ";
        background: inherit;
    }

    .headeline h1.yellow, .headeline h2.yellow {
        background: #fcaf17;
        color: #fff;   
        height: 125px;
        margin:  0 0 25px 0;
        padding: 15px 100px 0 15px;
        font-size: 170%;
        border-radius: 5px 5px;
    }


    h2 {
        font-size:250%;
        line-height: 1.2em;
        margin: 0.6em 0 0 0;
    }

    h3 {
        font-size:175%;
        line-height: 1.2571em;
        margin:0;
    }

    h4 {
        font-size:133.33%;
        line-height: 1.125em;
        margin:1.125em 0 20px 0;
    }

    h5 {
        font-size:116.67%;
        line-height: 1.2857em;
        margin: 1.2857em 0 0 0;
    }

    h6 {
        font-weight: bold;
        font-size:100%;
        line-height: 1.5em;
        margin: 1.5em 0 0 0;
    }


    #produkte .blue h3 a, #produkte .yellow h3 a, #produkte .green h3 a, #produkte .lila h3 a
    {color: #fff;text-transform: uppercase;padding: 5px 5px 5px 5px;margin: 0; display: block; text-align: center;}

    #produkte .yellow h3 a {background: #fcaf17; }
    #produkte .blue h3 a {background: #00A5E2; }
    #produkte .green h3 a {background: #31bcad; }
    #produkte .lila h3 a {background: #9e76b4; }
    #produkte .blue h3 { margin: 0; }

    .table_yellow h3 {
        background: none repeat scroll 0 0 #FCAF17;
        color: #FFFFFF;
        font-size: 1.2em;
        margin: 20px 0 -10px 2px;
        padding: 5px;
        width: 97.5%;
    }

    /* --- Lists | Listen  -------------------------------------------------------------------------------- */

    ul,
    ol,
    dl {
        font-size:1em;
        line-height:1.5em;
        margin: 1.5em 0 0 1em;
    }

    ul {
        list-style-type:disc;
    }

    ol {
        list-style-type:decimal;   

    }

    ul ul {
        list-style-type:circle;
        margin-top:0;
    }

    ol ol {
        list-style-type:lower-latin;
        margin-top:0;
    }

    ol ul {
        list-style-type:circle;
        margin-top:0;
    }

    li {
        font-size:1em;
        line-height:1.5em;
        margin-left:0.8em;
    }

    .listing_big li {
        background:  url("../../files/templates/images/ok_big.png") no-repeat 0 center; 
        line-height: 1.7;
        list-style-type: none;
        font-size:1.3em;
        padding: 5px 0 5px 15%    
    }

    .listing_small li {
        background:  url("../../files/templates/images/ok_small.png") no-repeat 0 6px; 
        line-height: 1.7;
        list-style-type: none;
        font-size:1.32em;
        padding: 2px 0 2px 6%    
    }

    dt { font-weight:bold; }

    dd { margin:0 0 1.5em 0.8em; }

    /* --- general text formatting | Allgemeine Textauszeichnung ------------------------------------------ */

    p {
        font-size:1.1em;
        line-height:1.6em;
        margin: 1.5em 0 0 0;
    }

    blockquote, cite, q {
        font-family: Georgia, "Times New Roman", Times, serif;
        font-style:italic;
    }

    blockquote {
        margin:1.5em 0 0 1.5em;
        color:#666;
    }

    strong, b { font-weight:bold; }

    em, i { font-style:italic; }

    big {
        font-size:116.667%;
    }

    small {
        font-size:85.71%;
    }

    pre,
    code,
    kbd,
    tt,
    samp,
    var {
        font-size:100%;
    }

    pre {
        line-height:1.5em;
        margin: 1.5em 0 0 0;
        white-space: pre;
        white-space: pre-wrap;
        word-wrap: break-word;
    }
    pre, code { color:#800; }

    kbd, samp, var, tt {
        color:#666;
        font-weight:bold;
    }

    var, dfn { font-style:italic; }

    acronym, abbr {
        border-bottom:1px #aaa dotted;
        font-variant:small-caps;
        letter-spacing:.07em;
        cursor:help;
    }

    sub,
    sup {
        font-size: 75%;
        line-height: 0;
        position: relative;
        vertical-align: baseline;
    }

    sup { top: -0.5em; }
    sub { bottom: -0.25em; }

    mark {
        background: #ff0;
        color: #000;
    }

    hr {
        color:#fff;
        background:transparent;
        margin:0 0 0.75em 0;
        padding:0 0 0.75em 0;
        border:0;
        border-bottom:1px #eee solid;
    }

    /*--- Links ----------------------------------------------------------------------------------------- */

    a {
        color:#FCAF17;
        background:transparent;
        text-decoration:none;
    }

    a:active { outline: none; }

    /* (en) maximum constrast for tab focus - change with great care */
    /* (en) Maximaler Kontrast für Tab Focus - Ändern Sie diese Regel mit Bedacht */
    a:hover,
    a:focus {
        background-color: #305580;
        color: #fff;
        text-decoration: none;
    }

    .mime_icon {
        float: left;
        margin: 1px 5px 5px 0;
    }

    .ce_download a {
        line-height: 1.3em;
        color: #305580;
        font-size: 0.95em;
        position: relative;
        padding-left: 25px;
    }

    .ce_download p {
        margin: 0
    }

    .ce_download a:hover,
    .ce_download a:focus {
        background-color: transparent;
        color: #FCAF17;
        text-decoration: none;
    }

    .ce_download a span.size {
        margin: 5px 0;
        font-size: 0.6em;
        display: inline-block
    }

    .ce_download.down_one a, .ce_download.down_two a{
        color:#305580;
    }

    .ce_download.down_one a:hover, .ce_download.down_two a:hover {
        color: #fff
    }

    .ce_download.down_one .mime_icon, .ce_download.down_two .mime_icon {
        float: left;
        margin: 5px 5px 5px 0;
    }

    .ce_download.down_one a, .ce_download.down_two a {
        margin: 1.5em 0.75em 0 0;
        float: left;
        padding: 0.3em 9px 0.2em 30px;
        position: relative;
        font-size: 13px;
    }

    .ce_download a:before {
          content: "";
          background: url("../../files/templates/images/pdf.svg") no-repeat 0 0;
          height: 25px;
          width: 20px;
          background-size: 20px;
          display: inline-block;
          position: absolute;
          top: -5px;
          left: 0px;
      }


    .ce_download .ext-zip a:before {
        content: "";
        background: url("../../files/templates/images/zip.svg") no-repeat 0 0;
        height: 25px;
        width: 20px;
        background-size: 20px;
        display: inline-block;
        position: absolute;
        top: -5px;
        left: 0px;
    }

    .ce_download.down_one a:before,
    .ce_download.down_two a:before {

        top: 9px;
        left: 5px;
    }


    .ce_download.down_one, .ce_download.down_two {

        margin: 0;
        padding: 0;
    }

    .ce_download.down_one p, .ce_download.down_two p {
        margin-top: 0;
    }


    /* --- images ------------------ */
    img, figure, .mod_cfs_maps img {
        margin: 0;
        height: auto;
        width: auto;
        max-width: 100%;
    }

    figure img, .dlh_googlemap, .image_container img {
    }

    header figure img, header .dlh_googlemap,
    header .image_container img,
    .home figure img, 
    .home .dlh_googlemap,
    .home .image_container img,
    footer .image_container img{border: 0; padding: 0}

    .home .ce_image.block {
        overflow: visible;
    }

    .dlh_googlemap img {  max-width: none; max-height: none; }

    #dlh_googlemap_1 { width: 100% !important;margin: 1em 0 0 0 }

    iframe, object, embed{max-width: 100%;} 


    .flexible {
        margin-top: 1.5em;
        max-width: 100%;
        height: auto;
    }

    * html .flexible {	/* IE6 support */
        width: 98%;		/* 2% space for borders */
    }

    .bordered {
        margin-top: 1.5em;
        border: 2px #eee solid;
        border: 2px rgba(255,255,255,1) solid;
        -webkit-box-shadow: 0 0 3px rgba(0,0,0,.25);
        -moz-box-shadow: 0 0 3px rgba(0,0,0,.25);
        box-shadow: 0 0 3px rgba(0,0,0,.25);
    }
    .image_container.float_left {
        display: inline;
        float: left;
        margin: 1.8em 1.5em 0.15em 0;
    }

    .image_container.float_right {
        display: inline;
        float: right;
        margin: 1.8em 0 0.15em 1.5em;
    }

    .image_container a:hover,
    .image_container a:focus,
    .image_container a:active{background: none; }

    .image_container.float_left .caption {
        display: block;
        font-size: 91.667%;
        font-weight: normal;
        margin-top: 0;
        overflow: hidden;
        padding: 0 0.5em 0.3em 0.5em;
        color: #fff;
        width: 96% !important;
    }

    .image_container.float_right .caption{

        display: block;
        font-size: 91.667%;
        font-weight: normal;
        margin-top: 0;
        overflow: hidden;
        padding: 0 0.5em 0.3em 0.5em;
        color: #fff;
        width: 96% !important;
    }




    /**
    * ----------------------------------------------------------------------- #
    *
    * Generic Content Classes
    *
    * (en) standard classes for positioning and highlighting
    * (de) Standardklassen zur Positionierung und Hervorhebung
    *
    * @section content-generic-classes
    */
    .highlight {
        color:#c30;
    }

    .dimmed {
        color:#888;
    }


    .box > *:first-child {
        margin-top: 0;
    }

    .label {
        font-family: Verdana, Geneva, sans-serif;
        padding: 1px 6px 2px;
        display: inline-block;
        vertical-align:middle;
        letter-spacing: normal;
        white-space:nowrap;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        background: #06C;
        color: #fff;
        font-size: 10px;
        line-height: 12px;
    }

    .info {
        background:#f4f4f4;
    }

    .success {
        background:#8c8;
    }

    .warning {
        background:#cc8;
    }

    .error {
        background:#c88;
    }

    .float-left {
        float:left;
        display:inline;
        margin: 1.5em 1em 0 0;
    }

    .float-right {
        float:right;
        display:inline;
        margin: 1.5em 0 0 1em;
    }

    .center {
        display:block;
        text-align:center;
        margin: 1.5em auto 0 auto;
    }

    /**
    * ------------------------------------------------------------------------------------------------- #
    *
    * Tables | Tabellen
    *
    * (en) Generic classes for table-width and design definition
    * (de) Generische Klassen für die Tabellenbreite und Gestaltungsvorschriften für Tabellen
    *
    * @section content-tables
    */


    /* seo friendly tables */

    .table {

    }

    .table-head{

    }

    table caption {
        font-variant:small-caps;
    }

    th, td {
        line-height: 1.5em;
        vertical-align: top;
        padding: 0.7143em 0.5em;
    }

    th *:first-child,
    td *:first-child {
        margin-top: 0;
    }

    th.nowrap,
    td.nowrap {

    }

    thead th {

        color: #fff;
        font-size: 16px;
    }

    .fraunhofer thead th {

        color: #305580;
        font-size: 16px;
    }

    tbody th {

    }
    tbody tr.odd {
        background: #fff
    }

    .ce_table.green thead tr,.ce_table.green .table-head .column  {
        background: #38B6AB; color: #fff;
        font-size: 1.2em
    }

    .ce_table.blue thead tr, .ce_table.blue .table-head .column  {
        background: #00A5E2; color: #fff;
        font-size: 1.2em
    }

    .ce_table.table_yellow thead tr,.ce_table.table_yellow .table-head .column {
        background: #FCAF17; color: #fff !important;
        font-size: 1.2em
    }

    .ce_table.green thead tr,.ce_table.green .table-head .column  {
        background: #38B6AB; color: #fff;
        font-size: 1.2em
    }

    /* highlight row on mouse over */
    tbody tr.odd:hover th,
    tbody tr.odd:hover td {
        background:#E8EBF3;
    }   


    /* highlight row on mouse over */
    tbody tr:hover th,
    tbody tr:hover td {
    / / background: #f8f8f8;
    }

    .table-head .column{ /* Column inside the table-head */
        background:#fff;
        color:#333333;
        border-right:1px solid #fff;
        border-bottom:none;
        font-size: 1.2em;
        line-height: 1.5em;
        padding: 0.7143em 0.5em;
    }

    .table-head .column:hover{ /* Column hover inside the table-head */
        background:#FAFAFA;
    }


    .row{

    }
    .row .column:nth-child(1){ /* First column in a row */

    }
    .row:last-child .column{  /* column in a last row */
        border-bottom:none;
    }
    .column {

        padding: 10px;
        vertical-align: top;
        line-height: 1.5em;
    }

    .restables-clone tr:nth-child(2n+1) {

    }
    .restables-clone tr{

    }

    tbody .even, .restables-clone tr:nth-child(2n+1) > td:first-child {
        background: #E8EBF3;
        color: #305580
    }

    .restables-clone  td:first-child {
        font-weight: 700;
    }

    tbody .even:hover {
        background: #E8EBF3;
        color: #2d466e
    }


    .vcard {
        line-height: 1.5em;
        margin: 0 !important;
        /* small IE-Fix for background images */
        zoom: 1;
    }

    .vcard .nickname.invisible {
        display: inline;
        height: 0;
        left: 0;
        overflow: hidden;
        position: relative;
        top: 0;
        width: auto;
    }

    span.vcard,
    span.vevent {
        padding:2px 1px 2px 70px !important;
        margin:0 2px 0 !important;
    }

    .vcard .tel{ margin: 0.25em 0}

    .vcard .mail, .vcard .web{ margin: 0.25em 0}

    .vcard a {
        padding-left:11px;
        background:url("../../files/templates/images/external_link.png") top left no-repeat;
        color:#305580;
    }

    .vcard .adr {
        display:block;
        margin:0.9em 0 0 0;
    }

    .vcard .email, .vcard .web {
        font-family:ZwoWeb-Light, arial, serif;        
    }

    .vcard .tel span.desc {
        display: inline-block;
        margin: 0;
        width: 60px;
    }

    /* rel-tag */

    a[rel~="tag"] {
        padding-right:32px;
        background-image:url("../../files/templates/images/icon-rel-tag.png");
        background-repeat: no-repeat;
        background-position: right;
    }

    /* geo */

    abbr[class~="geo"],.vcard .geo {
        padding-left:32px;
        background:url("../../files/templates/images/icon-geo.png") no-repeat left;
        border:none;
        cursor:default;
        margin: 0.55em 0
    }

    /*Sitemap navigation*/

    .mod_sitemap ul{margin:0;padding:0;list-style-type:none}

    .mod_sitemap ul.level_2,
    .mod_sitemap ul.level_3,
    .mod_sitemap ul.level_4,
    .mod_sitemap ul.level_5{
        padding-left:15px
    }
    .mod_sitemap ul.level_1 a{font-weight:bold}
    .mod_sitemap ul.level_2 a{background-color:#fff;font-weight:normal}
    .mod_sitemap ul li a{
        width:100%;
        position:relative;
        display:inline-block;
        padding-top:5px;
        padding-bottom:5px;
        padding-left:15px;
        border-top:1px solid #e1e1e1;
        list-style-type:circle;
        background:url("../../files/templates/images/sitemap_a_list.png") left center no-repeat
    }
    .mod_sitemap ul li a:hover{background-color:#fafafa;color: #fcaf17;text-decoration:none}

    video{width:100%}

    .produktliste  li {
        background: none ;
        list-style: none;
        margin: 0;
        padding: 0 0 0 5px;
    }

    .produktliste ul li span {
        clear: both; 
        float: left;
        margin-right: 20px;
        text-align: left;
        width: 195px;
    }


    .mod_boxes4ward span {
        display: inline-block;
        text-align: left;       
        width: 37px;
        line-height: 30px;
        vertical-align: middle;
        margin-right: 10px;
    }

    .mod_boxes4ward .symbole ul {margin: 0; }
    .mod_boxes4ward .symbole li {list-style-type: none; margin: 5px 0 0 0; line-height: 30px;vertical-align: middle;    }

    .layout_latest .info {
        margin: 67px 0 0 270px;
        padding: 2px 5px;
        position: absolute;
        font-size: 0.8em
    }

    .layout_latest .teaser p {  
        margin: 1.9em 0 0;
    }
    .layout_latest p.more {  
        margin: -0.5em 0 0;
    }

    .layout_full h1 {
        font-size: 250%;
        line-height: 1.2em;
        margin: 0.4286em 0 0;
    }

    .layout_full .info {
        margin: 0 0 0 0;
        padding: 2px 5px;   
        font-size: 0.8em;
        display: inline-block; 
    }


    #container .layout_full .ce_text, #container .layout_full .ce_list.produktliste {
        background: none repeat scroll 0 0 transparent;
        padding: 0;
    }

    #ausschreibungstexte .box .ce_text h3, #downloads .box .ce_text h3 {
        color: #FFFFFF;
        display: block;
        margin: -15px -15px 0 -15px;
        padding: 5px 5px 5px 5px;
        text-transform: uppercase;
        background: #FCAF17;
        text-align: center;
    }

    #downloads .box .ce_text h3 {
        font-size: 160%;
    }

    #downloads .box h3 {
        background: none repeat scroll 0 0 #FCAF17;
        color: #FFFFFF;
        display: block;
        margin: 0;
        padding: 8px 5px 5px 5px;
        text-transform: uppercase;
        font-size: 160%;
        text-align: center
    }

    #ausschreibungstexte .box .ce_text, #downloads .box .ce_text {
        background: #fff;
        padding: 15px 15px 15px 15px;        
    }

    #downloads h5.ce_headline{       
        padding: 0px 15px 0px 15px;
        margin: 15px 0 15px 0;
    }
    #ausschreibungstexte .box .ce_download ,  .box .ce_download{
        background: #fff;
        padding: 0px 15px 0px 15px
    }

    object, embed, video, iframe {
        max-width:100%;
    }
    .ce_html5 video {
        width:100%;
        height:auto;
    }

    .mejs-controls .mejs-time-rail .mejs-time-loaded {
        background: linear-gradient(rgba(48, 85, 128, 0.9), rgba(48, 85, 128,0.7)) repeat scroll 0 0 transparent !Important;
        width: 0;
    }

    .mejs-controls .mejs-time-rail .mejs-time-current {
        background: linear-gradient(rgba(252, 175, 23, 0.8), rgba(252, 175, 23, 0.5)) repeat scroll 0 0 transparent !Important;
        width: 0;
    }

    #footer .inside .left p { padding: 0; margin: 0; }
    footer ul.footerlist  { margin: 0.5em 0 0  }

    footer ul.footerlist li {    
        padding: 0 0;
        list-style-type: none;
        display: block;
        float: left;
        margin: 0 2px;
    }

    footer ul.footerlist li a {
        background-image: url("../../files/templates/images/social_sprites.png");
        background-repeat: no-repeat;
        display: inline-block;
        height: 35px;
        width: 35px;
        text-indent: -999em;
        margin: 0;
    }

    footer ul li.youtube a {background: url("../../files/templates/images/social_sprites.png") no-repeat 0 0 }
    footer ul li.rss a { background: url("../../files/templates/images/social_sprites.png") no-repeat -37px 0; }
    footer ul li.plus a { background: url("../../files/templates/images/social_sprites.png") no-repeat -74px 0;   }
    footer ul li.facebook a { background: url("../../files/templates/images/social_sprites.png") no-repeat -111px 0;  }
    footer ul li.kontakt a { background: url("../../files/templates/images/social_sprites.png") no-repeat -148px 0; }
    footer ul li.youtube a:hover { background: url("../../files/templates/images/social_sprites.png") no-repeat 0 -37px  }
    footer ul li.rss a:hover { background: url("../../files/templates/images/social_sprites.png") no-repeat -37px -37px; }
    footer ul li.plus a:hover { background: url("../../files/templates/images/social_sprites.png") no-repeat -74px -37px;  }
    footer ul li.facebook a:hover { background: url("../../files/templates/images/social_sprites.png") no-repeat -111px -37px;  }
    footer ul li.kontakt a:hover {  background: url("../../files/templates/images/social_sprites.png") no-repeat -148px -37px;  }

}


/* Desktop */
@media (min-width: 960px) and (max-width: 1199px) {
    h3 {
        font-size: 130%;
    }

    h2 {
        font-size: 150%;
    }
    .produktkatalog h3 {
        display: block;
        margin: 0;
        position: absolute;
        width: 230px;
        z-index: 2;
        left: 292px;
    }

    .bild h2, .bild h3, .bild h4, .bild h5 {
        width: 193px;
        font-size: 17px;
    }

    .home .headeline h1.yellow, .home .headeline h2.yellow {
        padding: 15px 175px 0 25px;
    }

    .headeline h1.blue, .headeline h2.blue {
        padding: 15px 30px 0 0;
        font-size: 130%;

    }

    .headeline h1.yellow, .headeline h2.yellow {
        padding: 15px 49px 0 15px;
        font-size: 130%;
    }


    #downloads .box h3 {
        font-size: 130%;

    }
    .ce_table table {
        /*float: left;*/
        display: block;
        width: 100%;
        overflow: auto;
        word-break: normal;
        word-break: keep-all;
    }



    .ce_table.blue table thead th.head_1,
    .ce_table.blue table thead th.head_2, 
    .ce_table.green table thead th.head_1,
    .ce_table.green table thead th.head_2{
        display: block;
        width: 35%;
        overflow: hidden;
        float: left;
    }

    .ce_table.blue table thead th.head_0,
    .ce_table.green table thead th.head_0{
        display: block;
        width: 20%;
        overflow: hidden;
        float: left;
    }
    .ce_table.blue table th.col_0, 
    .ce_table.green table th.col_0 {
        float: left;
        width: 23%;
    }

    .ce_table table td.col_2,  .ce_table table td.col_1 {


    }
    table img, table figure {
        max-width: 83%;
    }

    .ym-hlist ul li a, .ym-hlist ul li strong {
        font-size: 0.9em;
    }

}

/* Tablets */
@media (min-width: 768px) and (max-width: 959px) {

    .headeline h1.blue:before, .headeline h2.blue:before {
        display: none;
    }

    .ym-hlist ul li a, .ym-hlist ul li strong {
        font-size: 0.9em;
    }
    h2 {
        font-size: 170%;
        line-height: 1.2em;
        margin: 0.6em 0 0;
    }
    h3 {
        font-size: 145%;
        line-height: 1.2571em;
        margin: 0;
    }

    .bild h2, .bild h3, .bild h4, .bild h5 {
        display: block;
        margin: 15px 0 0 20px !important;
        position: absolute;
        width: 181px;
        z-index: 2;
        font-size: 18px;
    }

    .home .headeline h1.yellow, .home .headeline h2.yellow {
        padding: 15px 190px 0 25px;
    }


    .headeline h1.blue, .headeline h2.blue {
        font-size: 130%;
        height: 110px;
        margin: 0 0 25px;
        padding: 15px 56px 0 0;
        text-transform: uppercase;
    }

    .headeline h1.yellow, .headeline h2.yellow {
        font-size: 130%;
        height: 110px;
        margin: 0 0 25px;
        padding: 15px 12px 0 15px;
    }
    #produkte .blue h3 a, #produkte .yellow h3 a, #produkte .green h3 a, #produkte .lila h3 a {
        font-size: 89%;
    }

    .ce_table.blue table thead th.head_1,
    .ce_table.blue table thead th.head_2, 
    .ce_table.green table thead th.head_1,
    .ce_table.green table thead th.head_2{
        display: block;
        width: 35%;
        overflow: hidden;
        float: left;
    }

    .ce_table.blue table thead th.head_0,
    .ce_table.green table thead th.head_0{
        display: block;
        width: 20%;
        overflow: hidden;
        float: left;
    }
    .ce_table.blue table th.col_0, 
    .ce_table.green table th.col_0 {
        float: left;
        width: 23%;
    }

    .ce_table table td.col_2,  .ce_table table td.col_1 {


    }

    table img, table figure {
        max-width: 83%;
    }

    #downloads .box h3 {
        font-size: 100%;

    }

    #duschwannenfuss-sets h2.yellow, #badewannenfuss-sets h2.yellow {
        font-size: 150%;
    }
    #duschwannenfuss-sets h3, #badewannenfuss-sets  h3{
        font-size: 145%;
    }

    ul, ol, dl {
        font-size: 1em;
        line-height: 1.5em;
        margin: 1.5em 0 1em 1em;
    }

}

/* Landscape */
@media only screen
and (min-device-width : 414px)
and (max-device-height : 896px)
and (-webkit-device-pixel-ratio : 2)
and (orientation : landscape) {

    .headeline h1.blue:before, .headeline h2.blue:before {

    }
}


/* Smartphones to Tablets */
@media (min-width: 481px) and (max-width: 767px) {

    .headeline h1.blue:before, .headeline h2.blue:before {
        display: none;
    }

    .home .headeline h1.yellow, .home .headeline h2.yellow {
        padding: 15px 190px 0 15px;
    }


    .headeline h1.blue, .headeline h2.blue {
        font-size: 170%;
        height: 100px;
        margin: 0 0 10px;
        padding: 15px 251px 0 15px;
        text-transform: uppercase;
    }

    .headeline h1.yellow, .headeline h2.yellow {
        font-size: 170%;
        height: 100px;
        margin: 0 0 10px;
        padding: 15px 12px 0 15px;
    }

    .odd_rows{
        color:white;
        background-color:#00A5E2;
    }

    .odd_rows .column:hover{
        background:#0099CF;
        color: #fff
    }


    .bild h2, .bild h3, .bild h4, .bild h5 {
        display: block;
        margin: 15px 0 0 20px !important;
        position: absolute;
        width: 193px;
        z-index: 2;
    }

    .produktliste ul {
        margin-left: 0;
    }

    .produktliste ul li {
        margin-bottom: 10px;
        width: 100%;
    }

    .produktliste ul li:nth-of-type(2n) {
        background: #eee;
    }

    .produktliste ul li span {
        margin-right: 0;
        width: 100%;
    }
}



/* Smartphones */
@media (max-width: 480px) {

    .headeline h1.blue, .headeline h2.blue {
        font-size: 130%;
        height: 87px;
        margin: 0 0 5px;
        padding: 10px 83px 0 15px;

    }

    .headeline h1.blue:before, .headeline h2.blue:before {
        display: none;
    }

    .home .headeline h1.yellow, .home .headeline h2.yellow {
        padding: 15px 72px 0 15px;
    }

    .headeline h1.yellow, .headeline h2.yellow {
        font-size: 130%;
        height: 85px;
        margin: 0 0 5px;
        padding: 15px 25px 0 15px;
    }

    h2 {
        font-size: 200%;
        line-height: 1.2em;
        margin: 0.6em 0 0;
    }

    h3 {
        font-size: 120%;
        line-height: 1.2571em;
        margin: 0;
    }

    .image_container.float_right {
        display: inline;
        float: right;
        margin: 0.5em 0 0.15em;
        width: 100%;
    }

    .image_container.float_left{
        display: inline;
        float: right;
        margin: 0.5em 0 0.15em;
        width: 100%;
    }

    .layout_latest .info {
        float: left;
        font-size: 0.8em;
        margin: 0;
        padding: 15px 0 0 0;
        position: relative;
    }
    .mod_newsarchive h2 a, .layout_latest h2 a {
        color: #FCAF17;
        display: block;
        float: left;
        font-family: ZwoWebPro-BoldItalic,sans-serif;
        font-weight: 400;
        padding: 11px 0 0;
        width: 100%;
    }

    .odd_rows{
        color:white;
        background-color:#00A5E2;
    }

    .odd_rows .column:hover{
        background:#0099CF;
    }


    .bild h2, .bild h3, .bild h4, .bild h5 {
        display: block;
        margin: 15px 0 0 20px !important;
        position: absolute;
        width: 193px;
        z-index: 2;
    }

    .produktliste ul {
        margin-left: 0;
    }

    .produktliste ul li {
        margin-bottom: 10px;
        width: 100%;
        padding: 5px 10px;
    }
    .produktliste ul li span {
        margin-right: 0;
        width: 100%;
    }

    .produktliste ul li:nth-of-type(2n) {
        background: #E8EBF3;
    }
}

/**
 * BxSlider v4.0 - Fully loaded, responsive content slider
 * http://bxslider.com
 *
 * Written by: Steven Wanderski, 2012
 * http://stevenwanderski.com
 * (while drinking Belgian ales and listening to jazz)
 *
 * CEO and founder of bxCreative, LTD
 * http://bxcreative.com
 */


/** RESET AND LAYOUT
===================================*/

.bx-wrapper {
    position: relative;
    margin: 0 auto 0px;

    *zoom: 1;
    padding: 5px
}

.bx-wrapper img {
    max-width: 100%;
    display: block;
}

/** THEME
===================================*/
.bx-wrapper {
    -moz-box-sizing: border-box;
}

.bx-wrapper .bx-viewport {
    background: #fff;
    overflow: hidden;
    margin: 30px 0 0 0;
    -moz-box-shadow: 0 0 5px #ccc;
    -webkit-box-shadow: 0 0 5px #ccc;
    box-shadow: 0 0 5px #ccc;
    border: solid #fff 1px;   
    padding: 0 0 5px 0 
}

.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
    position: absolute;
    bottom: 10px;
    width: 100%;
    z-index: 100;
}

/* LOADER */

.bx-wrapper .bx-loading {
    min-height: 50px;
    background: url("../../files/templates/images/bx_loader.gif") center center no-repeat #fff;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2000;
}

/* PAGER */

.bx-wrapper .bx-pager {
    text-align: center;
    font-size: .85em;
    font-family: Arial;
    font-weight: bold;
    color: #666;
    padding-top: 20px;
}

.bx-wrapper .bx-pager .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
    display: inline-block;
    *zoom: 1;
    *display: inline;
}

.bx-wrapper .bx-pager.bx-default-pager a {
    background: #666;
    text-indent: -9999px;
    display: block;
    width: 10px;
    height: 10px;
    margin: 0 5px;
    outline: 0;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.bx-wrapper .slide a {
    display: block
}

.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
    background: #000;
}
/* DIRECTION CONTROLS (NEXT / PREV) */

.bx-wrapper .bx-prev {
    left: 10px;
    background: url("../../files/templates/images/controls.png") no-repeat 0 -32px;
}

.bx-wrapper .bx-next {
    right: 10px;
    background: url("../../files/templates/images/controls.png") no-repeat -43px -32px;
}

.bx-wrapper .bx-prev:hover {
    background-position: 0 0;
}

.bx-wrapper .bx-next:hover {
    background-position: -43px 0;
}

.bx-wrapper .bx-controls-direction a {
    position: absolute;
    top: 50%;
    margin-top: -2px;
    outline: 0;
    width: 32px;
    height: 32px;
    text-indent: -9999px;
    z-index: 9999;
    opacity: 0.5
}

.bx-wrapper .bx-controls-direction a.disabled {
    display: block;
}

/* AUTO CONTROLS (START / STOP) */

.bx-wrapper .bx-controls-auto {
    text-align: center;
}

.bx-wrapper .bx-controls-auto .bx-start {
    display: block;
    text-indent: -9999px;
    width: 10px;
    height: 11px;
    outline: 0;
    background: url("../../files/templates/images/controls.png") -86px -11px no-repeat;
    margin: 0 3px;
    opacity: 0.5
}

.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active {
    background-position: -86px 0;
}

.bx-wrapper .bx-controls-auto .bx-stop {
    display: block;
    text-indent: -9999px;
    width: 9px;
    height: 11px;
    outline: 0;
    background: url("../../files/templates/images/controls.png") -86px -44px no-repeat;
    margin: 0 3px;
    opacity: 0.5
}

.bx-wrapper .bx-controls-auto .bx-stop:hover,
.bx-wrapper .bx-controls-auto .bx-stop.active {
    background-position: -86px -33px;opacity: 1
}

/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
    text-align: left;
    width: 80%;
}

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
    right: 0;
    width: 35px;
}

.bx-wrapper .bx-caption {
    position: absolute; 
}
.bx-wrapper .image_container .caption  {
    font-size: 0.8em ;
    text-align: center;
    width: 140px !important;
}


@media only screen and (max-width: 767px) {
    .bx-controls-direction {display: block;}
}



/* 
    Document   : table
    Created on : 26.06.2013, 07:15:31
    Author     : redwise
    Description:
        Purpose of the stylesheet follows.
*/

table {
    display: block;
    width: 100%;
    overflow: auto;
    word-break: normal;
    word-break: keep-all;
}

table.restables-clone {
    display: none;
}

table th {
    font-weight: bold;
    text-align: left;

}

table td {
    padding: 0.5rem 1rem;
}

table.narrow {
    margin: 1.4286em 0 0 0;
}

table.narrow th,
table.narrow td {
    padding: 0 0.5em;
    line-height: 1.4286em;
}

table.bordertable {
    border:1px #ccc solid;
}

table caption {
    font-variant:small-caps;
}

th, td {
    line-height: 1.5em;
    vertical-align: top;
    padding: 0.7143em 0.5em;
}

th *:first-child,
td *:first-child {
    margin-top: 0;
}

th.nowrap,
td.nowrap {
    white-space: nowrap;
}


table {
    display: table;
    margin-bottom: 16px;
    border-collapse: collapse;
    border-spacing: 0;
    margin-top: 16px;
}

.restables-clone {
    display: none;
}


table.restables-clone td {
    width: 50%;
}

table.restables-clone td:first-child {
    font-weight: bold;
}

table.restables-clone tr:first-child td {
    background: #f3f6fa;
}


.format-table thead th {
    color: #305580;
}

.format-table tbody tr.odd {
    background: transparent;
}

.format-table tbody .even {
    background: transparent;
}

.format-table th, .format-table td {
    padding: 4px 0.5em;
}

 .format-table td.col_1,
 .format-table th.head_1 {
    width: 60%;
}

.format-table td.col_0,
.format-table th.head_0{
    width: 40%;
}

@media (max-width: 991px) {
    .restables-origin {
        display: none;
    }

    .restables-clone {
        display: table;
        font-size: 13px;
    }

    .format-table {
        margin-top: 15px;
    }
}


@media (min-width: 960px) and (max-width: 1199px) {


}

@media (min-width: 768px) and (max-width: 959px) {


}

@media (min-width: 481px) and (max-width: 767px) {

}

/* Smartphones */
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {

    .format-table tr {

    }

    .format-table td.col_0, .format-table td.col_1, .format-table td, .format-table th.head_0, .format-table th.head_1 {
        width: 50%;

    }

    .format-table table {
        font-size: 13px;
    }

}


/* Landscape */
@media only screen
and (min-device-width: 414px)
and (max-device-height: 896px)
and (-webkit-device-pixel-ratio: 2)
and (orientation: landscape) {


    .format-table tr {

    }

    .format-table td.col_0, .format-table td.col_1, .format-table td, .format-table th.head_0, .format-table th.head_1 {
        width: 50%;

    }

    .format-table table {
        font-size: 13px;
    }

}

@media only screen and (max-width: 479px) {

    .format-table table {
        font-size: 13px;
    }

    .restables-clone td {
        width: 50%;

    }

    .ce_download.down_one, .ce_download.down_two {

    }

    .format-table tr {

    }

    .format-table td.col_0, .format-table td.col_1, .format-table td, .format-table th.head_0, .format-table th.head_1 {
        width: 50%;

    }

}


@media print {

    /**
    * @section basic layout preparation
    */

    /* (en) change font size unit to [pt] - avoids problems with [px] in Gecko based browsers  	*/
    /* (de) Wechsel der der Schriftgrößen-Maßheinheit zu [pt] - Probleme mit [px] in Gecko-Browsern vermeiden */
    body {
        font-size: 10pt;
        padding: 0 5px;
    }

    /* (en) Hide unneeded container of the screenlayout in print layout */
    /* (de) Für den Druck nicht benötigte Container des Layouts abschalten */
    nav, .ym-searchform, header, footer ,#footer, #header, #dreier-blog {
        display:none;
    }

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

    /* (en) Avoid page breaks right after headings */
    /* (de) Vermeidung von Seitenumbrüchen direkt nach einer Überschrift */
    h1,h2,h3,h4,h5,h6 {
        page-break-after:avoid;
    }

    .headeline h1.blue, .headeline h2.blue , .headeline h1.yellow, .headeline h2.yellow{
        page-break-after:avoid;
        margin: 0;
        padding: 0;
        height: 30px;
        color: #FCAF17;
    }
    li , .listing_small li, .listing_big li{
        font-size: 1em;
        line-height: 1.5em;
        margin-left: 0;
        padding: 0
    }
    ul, ol, dl {
        font-size: 1em;
        line-height: 1.5em;
        margin: 0;
    }
    /*------------------------------------------------------------------------------------------------------*/

    /* (en) optional output of acronyms and abbreviations*/
    /* (de) optionale Ausgabe von Auszeichnung von Abkürzungen */

    /*
    abbr[title]:after,
    acronym[title]:after {
            content:'(' attr(title) ')';
    }
    */

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

    /* (en) optional URL output of hyperlinks in print layout */
    /* (de) optionale Ausgabe der URLs von Hyperlinks */
    /*
    a[href]:after {
            content:" <URL:"attr(href)">";
            color:#444;
            background:inherit;
            font-style:italic;
    }
    */
}