@font-face{ font-family: 'News Cycle'; font-style: normal; font-weight: 400; font-display: swap; src: local('News Cycle'), local('NewsCycle'), url(../fonts/news-cycle/news-cycle.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{ font-family: 'News Cycle'; font-style: normal; font-weight: 700; font-display: swap; src: local('News Cycle Bold'), local('NewsCycle-Bold'), url(../fonts/news-cycle/news-cycle-bold.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

html{ width: 100%;height: 100%}
body{ background-size: cover; background-attachment: fixed; background-color:#1b1919; width: 100%; height: 100%; margin: 0; font-family: 'News Cycle', sans-serif; color:#fff}

.page-wrap{width: 1448px; margin: 0 auto; min-height: 100%; -webkit-background-clip: content-box;background-clip: content-box}

.p-header{ width: 100%; height:auto}
.p-logo{ margin: 15px 0 10px 0}
.p-logo img{ width:360px}
.p-instagram{ position: fixed; z-index: 20; bottom: 5px; right: 15px}
.topright{position: relative; z-index: 2; width: auto; margin: 0 auto 0 auto; float: right}
.p-topmenu{ width: 416px; height: 36px; background-color:#393939; position:relative; color:#ffffff; font-size: 1.1em}

body[rel=intro-page] .p-logo{margin: auto; position: absolute; z-index:30;top: 0; left: 0; bottom: 0; right: 0}
body[rel=intro-page] .p-logo img{ min-width: 420px;width: 46%; height:auto}

body[rel=default-page] .p-logo{position: fixed !important; z-index:140 !important;right:20px; top:0}
body[rel=default-page] .p-logo img{ max-width: 160px;width: auto; height:auto}

.p-topmenu img{ float: left}
.p-topmenu .m-item a{ color: #ffffff; text-decoration:none}
#top-menu{ margin: 0; padding:0}
#top-menu li{list-style: none; float: left; padding: 3px 25px 0 25px; height: 36px}
#top-menu li:last-child:after{content: ''}
#top-menu li a:hover{color:#96c531}
#top-menu .m-item-act a{ text-decoration:none}
#top-menu .m-item-act, #top-menu .m-item-act a{background-color:#1b1919}

#p-teaser{ margin:0 0 0 0;padding:0;list-style:none;width:100%;max-height:840px; height:auto;overflow:hidden; position: relative;margin-bottom:10px}
#p-teaser img{ object-fit: cover;height:100% !important;min-height:140px !important;max-height:840px !important; width:100% !important;padding:0;margin:0}

.swipe-wrap{overflow: hidden;position: relative}
.swiper-slide{max-height:840px;position:relative;bottom:0;overflow:hidden}

#p-teaser[rel=background-slide-index]{ position:absolute; z-index:1;height:100vh !important; width: 100% !important; max-height:100vh !important}
#p-teaser[rel=background-slide-index] img{ object-fit: cover !important;max-height:100vh !important; width: 100% !important}
#p-teaser[rel=background-slide-index] .swiper-slide{ height:100% !important;min-height:100vh !important;max-height:auto !important; min-width:100% !important}

.ov-index{ position: fixed; z-index:20; bottom:40px; font-weight: 600; font-size:22px;width: 100%; max-width:1448px;display: inline-block; text-align: center}
.ov-index intro{display:inline-block;padding: 0 20px}

@media screen and (orientation:landscape) {
    .ov-index intro{width:auto}
}

.prev_button{ background: url('../global/slide_previous.gif') no-repeat;width:55px;height: 140px;opacity: .8;position: absolute;top: 40%;z-index: 152;overflow: hidden;text-indent: -9999em;margin-top: -25px;-webkit-transition: all 0.2s;-moz-transition: all 0.2s;transition: all 0.2s;visibility: hidden}
.next_button{ background: url('../global/slide_next.gif') no-repeat ;width: 55px;height: 140px;opacity: .8;position: absolute;top: 40%;right: 0;z-index: 152;overflow: hidden;text-indent: -9999em;margin-top: -25px;-webkit-trasition: all 0.2s;-moz-transition: all 0.2s;transition: all 0.2s;visibility: hidden}
.prev_button:hover ,.next_button:hover{opacity: 1 !important;cursor:pointer}

.swiper_pagination{ position: relative;margin:-30px 10px 0 0; z-index: 150;text-align:right}
.swiper-pagination-bullet{margin-right:15px; height: 15px; width: 15px;border-radius: 50%;border: 1px solid #fff; cursor: pointer;transition: all 0.2s ease 0s;opacity:1;background:transparent}
.swiper-pagination-bullet:last-of-type{margin-right:15px !important}
.swiper-pagination-bullet:hover,.swiper-pagination-bullet-active{ border:1px solid #96c531;background-color:#96c531}

.box-right{ width: 316px;float: left}
.box-right .news-listing{ display:block; margin: 0 0 30px 0}

.news-listing{flex-basis:25%; display: flex}
/*.news-listing:nth-of-type(3){ width: 100%}*/
.news-listing h1, .news-listing headline_1{ font-size: 21px; margin-bottom: 10px}
.news-listing .at-teaser{ float: left; width: 700px}
.news-listing:hover .at-date{opacity:0}

li.news-listing:first-child{ width:100%}
li.news-listing:first-child:nth-last-child(1){ width:100%}

.at-date{font-size: .8em; position:absolute; z-index:4;background-color: #393939; color: #ffffff; padding: 2px 10px 4px 10px;transition-delay:0.2s;transition:background 0.6s ease-out; -webkit-transition:background 0.6s ease-out;-o-transition:background 0.6 ease-out;opacity:1}
.scroller{position: absolute; z-index: 60; display: none; right: 20px;height: 90px}
.scroller .offscreen{position: absolute;right:-200px}
.scroller .onscreen{position: absolute;right:40px}

.lightbox{display: none;position: fixed; z-index: 999;top: 0; left: 0; width: 100%; height: 100%; text-align: center; background: rgba(0,0,0,0.8);text-decoration:none}
.lightbox:hover{background: rgba(0,0,0,0.8)}
.lightbox img{max-width: 100%; width: auto; height: auto; max-height: 80vh}
.lightbox .caption{text-align: left; background-color: #ffffff; color:#5a5a5a;max-width:1448px; margin: 0 auto}
.lightbox .caption p{margin: 0; padding: 5px 10px; font-size: .9em}
.lightbox:target{outline: none; display: block}
.lightbox-wrp{border: 22px solid #ffffff; border-top: 18px solid #ffffff;margin-top: 3%; display:inline-block;box-shadow: 0px 3px 6px #444444;max-width: 90%}

.containerMM{width: auto;height: 54px;margin: 0 auto !important;text-align: left;font-size: 1.1em; display: table;position: relative;z-index: 40}
.containerMM a{font-family: 'News Cycle', sans-serif; font-weight: 700}

body[rel=default-page] .containerMM{width: 100%; float:left}
#wrap_slide_menu{width: 100%; display: inline-block;float:left}
.p-footer{width: 1448px; background-color:#393939; color: #ffffff;font-size:.9em; height: 60px; margin: 0 auto}
.p-footer table{width:866px; margin: 0 auto; margin-top: 7px}
.p-footer td{vertical-align:top}
.p-footer .containerMM{padding:0;margin:0;position: static;width:auto;font-size: 1em}
.p-footer .m-item, .p-footer .m-item-act{font-size: .9em; height: auto; text-transform:uppercase;background-color: #a39c88}
.p-footer .m-item a, .p-footer .m-item-act a{background-color: #a39c88}
.p-footer .m-item a,.p-footer a:hover{color: #ffffff}
.p-footer a{text-decoration: none; padding:0; height:30px}
.p-footer strong{color: #ffffff; font-size:1.1em}

footer{display:block; margin-top: 25px}


footer ul.flex{ margin:0}
footer li.list-content{width: 25% !important;display: flex; float: left; padding: 0}
footer li.list-content div{ display:table-cell; vertical-align: middle; text-align: center; position: relative;margin:10% auto}
footer li.list-content img{ width:auto !important}

ul[category=team]{ display: flex; flex-wrap: wrap;margin:0 -30px 0 0 !important; justify-content: flex-start; align-content: space-between}
.team{ flex-direction: column; flex: 0 0 20; flex-basis:33%; margin-bottom: 20px; list-style: none}
.team-image img{ width:100%}
.team .inner-margin{margin: 0 20px 0 0}

.content-main{text-align: left;background-color: #1b1919; color: #fff;font-size: 1.2em;padding: 16px 48px}
.box-left{ width: 682px; margin-right: 50px; float: left}

.p-breadcrumb{font-size: .9em;font-family: 'News Cycle', sans-serif;font-weight: 400;color: #fff; padding: 16px 32px; background-color: #252525; display:block; margin-bottom:24px}
.p-breadcrumb a{margin: 0;color: #a7a7a7;text-decoration: none;font-family: 'News Cycle', sans-serif;font-weight: 700}
.p-breadcrumb a:hover{color:#96c531}

.page-topic1, headline_1{padding: 0px 0 3px 0;color: #fff}
.page-topic2, headline_2{color: #fff;background-color: transparent}
h1, headline_1{ color: #fff;font-family: 'News Cycle', sans-serif; font-weight: 400; font-size: 32px; margin: 0; padding:0}
h2, headline_2{ color: #a7a7a7;font-family: 'News Cycle', sans-serif; font-weight: 400; font-size: 22px; margin: 0 0 20px 0; padding:0}
h2 a, headline_2 a{color: #000000;background-color: transparent}
h3, headline_3{font-size: 22px;margin: 10px 0 20px 0; color:#fff; font-weight: 700 !important}
h4, h5{font-size: 1.2em;margin: 0}
h3,h4, h5, headline_3{background-color: transparent;font-family: 'News Cycle', sans-serif;font-weight: 300;margin-bottom: 10px;line-height: 1.3em}
headline_1, headline_2, headline_3{ display: block}
a{ color: #96c531}
a img{border: none}
a:hover{text-decoration: none;background-color: transparent}
.a-links{ width: 100%}

.containerContent{width: 100%;padding: 0; clear:both;display:block}
.containerContent ul{padding: 0 0 0 0;margin: 0 0 0 20px;list-style: square}
.containerContent ol{padding: 0 0 0 0;margin: 0 0 0 20px}


.pageNavigation ul{padding: 0em;margin: 0 0 0 2em}
#pageSitemap ul li{list-style: none;margin-left: -1em}
.articleImage img{margin-bottom: 2em}
.list_spacer{margin: 25px 0 25px 0;height: 1px;border-bottom: 1px dotted #cccccc}
.p-table{width: 310px}
.p-table h4{margin-bottom: 0}
.p-table tr td{vertical-align: top;padding-bottom: 5px}
.td-label{padding-right: 10px; text-transform: uppercase; color:#a7a7a7; font-weight:200;padding-top:2px;font-size:14px}

.active-image img{}
.galleryImage{ float: left; margin: 10px 50px 40px 0}
.galleryImage:nth-of-type(3n){ clear: right; margin-right:0}
.inactive-image:hover{}

.price_info{font-size: 0.8em;color: #6a6a6a;font-family: 'News Cycle', sans-serif;font-weight: 300}
.price_info ol li{list-style-type: super-decimal; margin-left: -40px}
/** gallery part **/

#p-thumblist{overflow: hidden}
#p-overlay{display: none;width: 1448px;height: 550px;background-color: #8d121b;color: #282828;position: absolute;z-index:201}
#galleryImageBox{width: 1448px;height: 550px;display: none;overflow:hidden}
#gallery_navig{width: 1448px;position: absolute;z-index: 20;margin-top: -29px;text-align: center}
#gallery_navig img{margin-right: 1px}
#ul-page-sitemap li{list-style-type:none}
.image-signature,.caption{color: #6a6a6a;padding: 1em 0 2em 0;font-size: 0.8em;font-family: 'News Cycle', sans-serif;font-weight: 300}
.caption{margin:0;padding:5px 0 0 0}
#THUMBNAIL_LISTING{text-align: left}
#THUMBNAIL_LISTING a{margin: 0;padding:0;display: inline-block}
#THUMBNAIL_LISTING a:nth-of-type(3n){margin-right: 0; clear: left}
.img-no{opacity: 0.5;width: 140px;height: 70px}
.img-no:hover{opacity: 1}
#wrap-gal{width: 100%; overflow:hidden;text-align:center}
.wrap-g{width: 100%; height: auto; min-width: 1448px;min-height: 550px;overflow: hidden;visibility: hidden}
.wrap-g img{width: 100%; height: auto; min-width: 1448px;min-height: 550px}

#customer-gal div{float: left;margin: 0;padding:0;position: relative}
#customer-gal{overflow: hidden;position: relative}
.swipe-wrap{overflow: hidden;position: relative}
.a-left, .a-right{float: left}
.act-img{outline: 2px solid #ffffff}
.act-img img, .act-img:hover{opacity: 1}
.label{margin-right: 6px;color: #f59000;background-color: transparent}
.icon-img-left{float: left;margin-right: 12px}
.icon-img-right{float: right;margin-left: 12px}
.arrows{display: none;position: absolute;z-index: 12}
.arrows a img{opacity:0.85}
.arrows a img:hover{opacity: 1}
#thumb-preview{position: absolute;z-index: 18;box-shadow: 0px 2px 12px #050505; border: 10px solid #ffffff; display: none}

.box-image-left{color:#fff}
.box-image-left img{float: left;margin: 0 20px 0 0}
.box-image-left .f-img{float: left;margin-right: 15px}
.box-image-left h1, .box-image-left headline_1{font-size:1.3em; margin: 0;color:#050505;font-family: 'News Cycle', sans-serif;font-weight: 400}
.box-image-left h2, .box-image-left headline_2{font-size:1.2em;font-family: 'News Cycle', sans-serif;color:#050505; margin-bottom: 10px}

.f-left{float: left}
.f-right{float: right}
.clear{ float: none;clear: both}
.center{text-align: center}
.content-spacer{height: 20px}
.ct-spc-double{clear: both;float:none;height: 40px}
.code-only{display: none}
*[data-attr="mobile-only"], *[device_view=tablet-only], *[device_view=mobile-only], *[device_view=smartphone-only]{ display:none !important}
*[data-attr="desktop-only"]{ display:block !important}

.inner{width: 260px; margin-left: 5px;margin-right: 40px}
.inner:nth-of-type(3n){width: 260px;margin-right:40px}
.inner:nth-of-type(4n){margin-right:0; clear:right}
.inner2{width: 420px; margin-left: 5px;margin-right: 30px; float: left}
.inner2:nth-of-type(3n){margin-right:0; clear:right}
.inner1{width: 187px; margin-top: 78px}
.inner3{float: left; width: 66.66% !important}
.detail-right{width:33%; float:right}
.detail-right img{width:100%}
.inner-wrap{width: 100%; margin: 0 auto 0 auto; text-align: left}

.ul-files{padding: 0; }
.ul-files li{list-style:none;margin-left:-12px}
.filedownload{color: #232627;text-decoration: none; font-size: .9em}
.filedownload a{text-decoration: none;color: #232627}
.filedownload:hover{color: #585858;font-size: .9em}
.filedownload.pdf:before{padding-left: 2px; position: relative; top: 2px; margin-right: 5px;content: url('../global/file-pdf.png')}
.filedownload.mp3:before{padding-left: 2px; position: relative; margin: -2px 0 0 0;content: url('../global/mp3_download_icon.gif')}
.filedownload.jpg:before{padding-left: 2px; position: relative; margin: -2px 0 0 0;content: url('../global/jpg_download_icon.gif')}
.filedownload.txt:before{padding-left: 2px; position: relative; margin: -2px 0 0 0;content: url('../global/txt_download_icon.gif')}
.filedownload.doc:before{padding-left: 2px; position: relative; margin: -2px 0 0 0;content: url('../global/doc_download_icon.png')}
.filedownload.xls:before{padding-left: 2px; position: relative; margin: -2px 0 0 0;content: url('../global/xls_download_icon.png')}
#nav-trigger{ display:none; cursor: pointer}
.is_hidden{ display:block}
.video-wrapper{height: auto;position: relative}
.video-wrapper iframe, .video-wrapper embed, .video-wrapper object, .video-wrapper video{left: 0;position: relative;top: 0;width: 100% !important}
.fb-video{width:100% !important}

.fade-block{ background: linear-gradient(#fff, #e3e3e3)}

ul.flex {box-sizing: border-box; list-style: outside none none; margin: 0 0 0 -32px; padding: 0 0 0 -32px !important; display: flex; flex-wrap: wrap; flex-direction: row}
ul.flex li{display: flex;transition: all .2s ease}
ul.flex li .list-content{ width:100%;flex-direction: column;display:flex; padding: 32px 0 0 32px;position: relative}

.grid-col-3 li{flex-basis: 33.33%}

ul[category=imagegalleries].grid-col-3 li, ul[category=media-detail].grid-col-3 li{ flex-basis:33.33% !important}
ul[category=media-detail].grid-col-3 li img{ width:100%; height: auto;transition: all .3s ease; padding:0 20px 20px 0}
ul[category=media-detail].grid-col-3 li h1, ul[category=media-detail].grid-col-3 li headline_1{ flex-basis:100% !important}

.list-content{ background-color: #1b1919; width: 100%}
.list-content img{ width:100%; height: auto !important;transition: all .3s ease}
.list-content .at-image:hover button{ opacity: 1; color: #fff;cursor: pointer;background-color: #96c531;; z-index: 30}
.list-content .at-image:hover img{ opacity:.4;filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
  filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%)}

.grid-col-3 .at-image, .news-listing .at-image{ position: relative; display: block; float:none; clear:both; text-align: center}
.grid-col-3 button, .news-listing button{ opacity:1; background-color: transparent;color:#fff;position:absolute;bottom: 15px; left: 0; right: 0; display: inline-block;margin: 0 auto; font-weight:400; height:auto; padding: 10px 40px !important;transition: all .2s ease}

.grid-col-3 .teaser, .news-listing .teaser{ opacity:0;position:absolute; height:100%; width: 100%;; z-index: 20}
.grid-col-3 .teaser p, .news-listing .teaser p{ padding:1em}
.list-content .at-image:hover .teaser{ opacity: 1 !important; color:#fff}

.grid-col-3 .at-teaser{ text-align: left; display: none}

.lightbox{display: none;position: fixed; z-index: 999;top: 0; left: 0; width: 100%; height: 100%; text-align: center; background: rgba(0,0,0,0.8) !important;text-decoration:none}
.lightbox:hover{background: rgba(0,0,0,0.8)}
.lightbox img, #ov-inner.multimedia-video, #ov-inner.multimedia-audio{max-width: 80vw;max-height: 80vh;margin-top: 2%}
.lightbox .caption{text-align: left; background-color: #ffffff; color:#5a5a5a;max-width:1280px; margin: 0 auto}
.lightbox .caption p{margin: 0; padding: 5px 10px; font-size: 1.1em}
.lightbox:target{outline: none; display: block}
.lightbox-wrp .swiper_container{ width:100%}
.lightbox-wrp .swiper_pagination{ margin: 10px 0 0 10px}
.lightbox-wrp .swiper_pagination .swiper-pagination-bullet:hover, .lightbox-wrp .swiper_pagination .swiper-pagination-bullet-active{ background-color:#e05710;border: 1px solid #e05710}
.lightbox-wrp .swiper_pagination .swiper-pagination-bullet{border: 1px solid #e05710}
.lightbox-wrp .swiper-wrapper{ height: 400 !important; width: auto !important; overflow:hidden}
.lightbox-wrp .swiper-slide{ height: auto !important; width: auto !important; max-height: 840px !important}
.lightbox-wrp .swiper-slide img{ width:100% !important; height: auto !important; max-height: 840px !important; object-fit: scale-down}
.lightbox-wrp .swiper-slide .caption{ width: 100% !important; background-color: #fff; display:block; position:absolute; bottom: 0}
.lightbox-wrp, #ov-inner.multimedia-video, #ov-inner.multimedia-audio{border: 22px solid #ffffff; border-top: 18px solid #ffffff;display:inline-block;box-shadow: 0px 3px 6px #444444;max-width: 90%;background: url(../global/loader_24.png) no-repeat center #232627; margin-top: 2%}
.lightbox-wrp{ height: auto !important}
.lightbox-wrp .caption{ width: auto !important; max-width: 100%}
.lightbox-wrp .caption p{ display:inline-block !important}
.lightbox-wrp .caption p{margin: 0; padding: 5px 10px; font-size: 1.1em}

.lbi{position: fixed; z-index: 40000;top: 0; left: 0; width: 100%; height: 100%; text-align: center; background: rgba(0,0,0,0.8) !important;text-decoration:none}

.lbi img{max-width: 100%; height: auto; max-height: 80vh}
.lbi .caption{text-align: left; background-color: #ffffff; color:#5a5a5a; margin: 0 auto; border-top:1px solid #eaeaea}
.lbi .caption p{display:inline-block !important;margin: 0; padding: 5px 0; font-size: 1em}

.lbi .lb-wrp{overflow:hidden;max-width: 90%; background: url(../global/loader_24.png) no-repeat center #232627; display: inline-block;box-shadow: 0px 6px 12px #000000; outline:1px solid #ffffff;margin-top: 5%}

.cookie-policy{ background: url(../global/bg-menu.png) repeat; padding-bottom:10px;color:#ffffff; position:fixed;bottom:0;z-index:200; text-align:center;width:1448px; display: inline-block !important; font-size: 1.1em; max-height: 99vh; overflow: auto; line-height: 1.4}
.cookie-policy h3, .cookie-policy headline_3{ color:#fff; margin: 15px 0 5px 0;font-size: 1.4em;}
.cookie-policy .a-button a,.cookie-policy button{float: none; clear:both;transition: background 0.4s ease-out; -webkit-transition: background 0.4s ease-out;-o-transition: background 0.4 ease-out}
.cookie-policy p{margin: 0 auto 15px auto}
.cookie-policy-innerwrap{ max-width: 90%; margin: 10px auto 0 auto; text-align: left}
.cookie-policy .content-spacer{ height: 10px}
.cookie-policy button{ color: #96c531; background-color: #393939; margin-bottom: 4px; padding:5px 30px; font-size: 1.1em}
.cookie-policy button:hover{ color:#fff; background-color:#272727}
.cookie-policy .feedback-error{color:#96c531; padding:15px; font-weight: 400;  margin: 10px 0}
.cookie-policy label.cb-label{ width:45%;color:#fff}

a.a-button{color: #96c531; background-color: #393939; margin-bottom: 4px; padding:5px 30px; font-size: 1.1em; text-decoration: none;transition: background 0.4s ease-out; -webkit-transition: background 0.4s ease-out;-o-transition: background 0.4 ease-out}
a.a-button:hover{ color:#fff; background-color:#272727}

table[rel=pageflip]{ margin-top:26px;padding:10px 5px 0 0; border-top:1px dotted #cccccc}
select[rel=pageflip]{ text-align:center; padding: 0 30px;border:1px dotted #cccccc}
.pageflip-spinner{ background: url(../global/loader_24.png) center right+5px no-repeat #fff}
select[rel=pageflip] option{ padding-right: 0}
button[rel=pageflip-next]{ background: url(../global/a-next-red.png) no-repeat #96c531; float:none; clear: both; margin:0; padding-right:10px}
button[rel=pageflip-previous]{ background: url(../global/a-back-red.png) no-repeat #96c531;float:none; clear: both; margin:0; padding-right:10px}

div[rel=steckbrief] table{ width: 100% !important;float: right;margin:20px 0 20px 30px}
div[rel=steckbrief] table td.td-label{padding-right: 10px; width: 30% !important}
.characteristics{ width: 33.3%; max-width:400px; background-color: #252525; padding: 20px;line-height: 1.6;font-size: 16px; margin-top: 5px; color:#fff}
.characteristics , .characteristics headline_3{font-size: 16px; font-weight: 400; margin:0;color:#fff; text-transform: uppercase}

.book-promo{ position: absolute; z-index:199; width: 80%; top:50%;left:50%;transform: translate(-50%, -50%);color:#282727; box-shadow: 0px 3px 6px #444444; font-size: 1.6em; margin: 20px auto; min-height:auto !important}
.book-promo .inner-box{display:flex;background-color: #fff;}
.book-promo h1{color:#282727;font-size: 1.6em; line-height: 1.2em; margin-top:40px}
.book-promo a.close-promo{ text-decoration:none; color:#96c531; background-color: #393939; padding: 5px 40px 10px 20px; cursor: pointer}
.promo-flex{ flex-basis:33.33%; padding: 20px 0 60px 25px; position: relative}
.promo-flex:nth-of-type(2){ flex-basis: 66.66%; border-left: 4px dotted #dfdfdf;padding: 20px 50px 60px 25px;}
.promo-flex p{margin:10px 0}
.promo-cover{ position: absolute; z-index: 2; left:-40px; margin-bottom:-20px; width:110%}
.promo-stoerer{ position: relative;
z-index: 2;
top: -7px; margin-right:-20px;
float: right;}
.promo-close{ position:absolute; z-index:200; right:20px;top:20px; cursor: pointer}
.promo-flex .a-button{ margin-top:30px; padding: 5px 20px 10px 20px}

@media all and (max-width: 1448px){ 
    body[rel=intro-page] #wrap_slide_menu{width: 100%; display: inline-block;float:none}
    
    
    .page-wrap, .inner-wrap{width:100%}
}

@media all and (max-width: 980px){ 
    div[rel=steckbrief] table{ width: 100% !important;float: none; clear: both; margin:20px 0 20px 0}
    .cookie-policy{ width:100%}
    
    ul[category=team]{ display: flex; flex-wrap: wrap;margin:0 -20px 0 0 !important; justify-content: flex-start; align-content: space-between}
    .team{ flex-basis:50%}
    
    .book-promo{ top:32px;left:0;transform: translate(0, 0);}
    .book-promo .inner-box{ }
    .promo-flex, .promo-flex:nth-of-type(2){ flex-basis:50%}
    .promo-cover{ height: 76%;
width: auto;
left: -20px;
bottom: 40px;}
    .promo-stoerer{ }
}

@media all and (max-width: 680px){
    .characteristics{max-width: 100%}
    div[rel=steckbrief] {width:100%;}
    div[rel=steckbrief] table{ width: 100% !important}
    div[rel=steckbrief] table, div[rel=steckbrief] table{border: 0}
    div[rel=steckbrief] table thead, div[rel=steckbrief] table thead{border: none; clip: rect(0 0 0 0);height: 1px; margin: -1px; overflow: hidden;padding: 0; position: absolute;width: 1px}
    div[rel=steckbrief] table tr{ border-bottom: 1px dotted #fff;display: block;margin-bottom: .625em}
    div[rel=steckbrief] table tr:last-of-type, div[rel=treehouse] table tr:last-of-type{border-bottom: none}
    div[rel=steckbrief] table td, div[rel=steckbrief] table td{border-bottom: 1px dotted #ddd;display: block; width: auto !important; font-size: .85em; text-align: right}
    div[rel=steckbrief] table td{text-align: left}
    
    div[rel=steckbrief] table td::before, div[rel=steckbrief] table td::before{ content: attr(data-label); float: left; font-weight: 700; text-transform: uppercase;width:110px}
    div[rel=steckbrief] table td:last-child, div[rel=steckbrief] table td:last-child{ border-bottom: 0}
    
    div[rel=steckbrief] thead{display:none}
    div[rel=steckbrief] h3, div[rel=steckbrief] headline_3[scope=toggle]{ opacity: 0}
    
    ul[category=team]{ display: flex; flex-wrap: wrap;margin:0 0 0 0 !important; justify-content: flex-start; align-content: space-between}
    .team{ flex-basis:100%}
    .team .inner-margin{margin: 0}
}

@media all and (min-width: 320px) and (max-width: 640px){
    .containerContent{ margin-top: 30px}
    .cookie-policy{ margin-top: 36px; font-size: 1.2em}
    .cookie-policy-innerwrap{ width:90%}
    .cookie-policy button{ width:100%;font-size: 1em}
    .cookie-policy p{text-align: justify}
	body{ font-size: 14px; background-image:none}
	.page-wrap, .inner-wrap{width: 100%; border:none}
	.stoerer{display:none;visibility:hidden;background: url(../global/kdf-stoerer.png) right no-repeat; width: 178px;height:178px; position:absolute; z-index:4000;margin-left: 0;margin-top: 260px}
	.p-logo{ margin-left: 5px; display:none}
	.p-logo img{ width: 75%; max-width: 260px; height: auto}
    .ov-index{font-size:18px; bottom:20px; text-shadow: 14px 4px 12px rgba(.9,.9,.9,.8)}
    .ov-index intro{ min-width: auto}
    
	.containerContent, .box-main, .p-footer, .p-footer table, .content-main, .containerMM{width: auto}
	.p-breadcrumb, .a-links{ display: none}
    .p-topmenu img{ width: auto !important}
	.box-main{margin: 20px 0 20px 0}
	h1, headline_1{font-size:17pt;font-weight:400}
	.box-left, .box-right, .inactive-image{ margin: 10px 0px 40px 0; clear: both; float: none; width: auto}
	.ai-small img{ width:100%; height: auto}
	.content-main{ padding: 0 12px}
	#p-slideshow, .containerMM{ display:none}
    *[device_view=tablet-only], *[device_view=mobile-only], *[device_view=smartphone-only]{ display:block !important}
	
	.p-footer table{ padding: 0 20px 10px 0}
	#p-header, #p-header img, .news-listing img{ flex-basis:100% width: 100%; height: auto}
	.newsletter-weburl{ padding: 5px 10px; text-align:right; background-color:#1b1919}
	.scroller{right: 10px; height:60px;bottom:10px; z-index: 1000}
	.scroller img{ width: 40px; height:40px;box-shadow: 0px 3px 6px #444444}
	.video-wrapper{position: relative;padding-bottom: 56.25%;height: 0}
	.video-wrapper iframe,.video-wrapper embed,.video-wrapper object{position: absolute;width: 100%;height: 100%;left: 0;top: 0}
	body:not([rel=intro-page]) #nav-trigger{ position:fixed; top: 10px; left: 12px; z-index: 4000;display:block}
	body[rel=intro-page] #nav-trigger img{ max-width: 200px; width: auto; height: auto}
    
    body[rel=intro-page] #nav-trigger img[mobile-nav]{ position: fixed; z-index: 30; right: 0; top:0}
    body:not([rel=intro-page]) #nav-trigger img{ max-width: 160px; width: auto; height: auto}
    body[rel=intro-page] #nav-trigger{ position:fixed; margin: 10px auto !important; z-index: 4000;display:block; width: 100%; text-align: center}
	.box-main img{width:100%;height:auto}
	
	.news-listing .at-image{ margin-right: 0;float: none}
	.news-listing .at-teaser{ width: auto; float: none}
	
	.is_hidden{ display:none; margin-top: 50px}
	.is_visible{ display:block}
	.containerMM{
		top: 0;width: 100%;margin: 0;text-align: center;font-size: 1.1em
	}
    ul.flex li.news-listing{ flex-basis: 100%; width:100%}
    .scroller{position: absolute; z-index: 60; display: none; right: 0px;height: 60px}
    .scroller img {box-shadow: none !important}
    
    footer li.list-content{ width:50% !important}
    footer li.list-content:nth-of-type(2n+1){ clear: left}
    
    .book-promo{top: 54px; box-shadow:none}
    .book-promo .inner-box{ flex-direction: column}
    .promo-cover{ width: 100%;
position: relative;
z-index: 2;
right: 20px;
bottom: auto;
top: 20px;
height: auto;}
    .promo-flex{ padding:20px 0 60px 25px}
    .promo-stoerer {
    position: absolute;
    z-index: 2;
    margin-left: 0;
    width: 130px;
    left: 10px;
    }
    .book-promo h1{ margin-top: 0}
    .promo-flex, .promo-flex:nth-of-type(2){ flex-basis: 100%}
    .promo-flex:nth-of-type(2){ border-left: none}
    .promo-flex .a-button{ display:inline-block; width: 100%; box-sizing: border-box; text-align:center}

}



@media all and (min-width: 641px) and (max-width: 1180px){ 
	.page-wrap, .inner-wrap{width: 100%; border:none;
	-webkit-background-clip: border-box; /* for Safari */
    background-clip: border-box; /* for IE9+, Firefox 4+, Opera, Chrome */
	}
	.containerContent, .box-main, .p-footer, .p-header, .p-footer table, .content-main, .p-breadcrumb{width: auto}
	.box-left, .inactive-image{ float: left; margin: 10px 50px 40px 0; width: auto}
	.box-left{ width: 60%}
	.box-right{ width: 30%; margin:0; display:table-cell}
	.box-right .news-listing{ display: inline-table;width: 100%; margin:0}
	.video-wrapper{position: relative;padding-bottom: 56.25%;height: 0}
	.video-wrapper iframe,.video-wrapper embed,.video-wrapper object{position: absolute;width: 100%;height: 100%;left: 0;top: 0}
	.box_skitter .prev_button{ left: 0px}
	.box_skitter .next_button{ right: 0px}
	.p-header{width: 100%;height: auto}
    .p-logo img{ width: 40%; height: auto}
	#nav-trigger{ display: none}
}

@media all and (min-width: 640px) and (max-width: 1256px){
	.box_skitter .prev_button{ left: 0px}
	.box_skitter .next_button{ right: 0px}
	.containerMM{width: 100% !important}
     .img-width-583{ width:100% !important}
}

@media all and (max-width: 980px){
    .grid-col-3 li{ flex-basis: 50%}
    .grid-col-3 li:nth-of-type(3n){ width: 100%}
    
    .grid-col-3 li:last-child .list-content{}
    .grid-col-3 li:last-child .list-content button{ }
}
@media all and (min-width: 640px) and (max-width: 880px){
    .content-main{padding: 10px 20px}
	.topright{ position: fixed; top: 0; width: 100%}
	.p-topmenu{ width:100%}
	
	.box-left,.box-right{ width: 100%; float: none}
	#nav-trigger{ display: none}
	.box-main img{width:100%;height:auto}
    .box-main .a-links img{ width: auto}
    
    .inner3, .detail-right{width:48% !important}
    .inner3 input[type="text"], .inner3 textarea, .inner3 input[type="password"]{ width:95% !important; display: inline-block !important}
    .box-image-left .f-img{ width:100% !important}
    .img-width-583{ width:100% !important}
    footer li.list-content{ width:50% !important; height: 240px}
    
    .grid-col-3 li .list-content{padding-right:0 20px 15px 20px !important}
    li[rel=treehouse] button{ width:90% !important}
    
    a[rel=treehouse], a{ word-break: break-all }
    
    div[rel=treehouse] table{ width: 100% !important}
    div[rel=treehouse] table, div[rel=treehouse] table{border: 0}
    div[rel=treehouse] table thead, div[rel=treehouse] table thead{border: none; clip: rect(0 0 0 0);height: 1px; margin: -1px; overflow: hidden;padding: 0; position: absolute;width: 1px}
    div[rel=treehouse] table tr{ border-bottom: 1px dotted #564c4d;display: block;margin-bottom: .625em}
    div[rel=treehouse] table tr:last-of-type, div[rel=treehouse] table tr:last-of-type{border-bottom: none}
    div[rel=treehouse] table td, div[rel=treehouse] table td{border-bottom: 1px dotted #ddd;display: block; width: auto !important; font-size: .85em; text-align: right}
    div[rel=treehouse] table td{text-align: left}
    div[rel=treehouse] table td::before, div[rel=treehouse] table td::before{ content: attr(data-label); float: left; font-weight: 700; text-transform: uppercase;width:110px}
    div[rel=treehouse] table td:last-child, div[rel=treehouse] table td:last-child{ border-bottom: 0}
}

@media all and (min-width: 320px) and (max-width: 640px){
    .header-spacer{height:15px}
    #p-teaser{min-height:auto}
    .swiper_pagination{display:none}
    
    ul.grid-col-3{ margin:0;padding: 15px 0 0 0 !important; display: block !important}
    
    .grid-col-3 li{ width:100%; display:block}
    .grid-col-3 .list-content{padding:0 !important; margin:0 0 10px 0}
    
    .grid-col-3 .at-teaser{ display: block}
    .grid-col-3 button, .news-listing button{ font-size: 1em; font-weight:400; height: auto;padding: 5px 20px 5px !important; left:5px; right:5px}
    .list-content{ display: block}
    
    .box-main img{width:100%;height:auto}
    .box-main .a-links img{ width: auto}
    .inner3, .detail-right{float:none; clear:both;width:100% !important}
    .inner3 input[type="text"], .inner3 textarea, .inner3 input[type="password"]{ width:90% !important; display: block !important}
    .img-width-583{ width:100% !important}
    
    .p-logo img{ width: 40%; height: auto}
    body[rel="intro-page"] .p-logo img{ min-width: 90% !important}
    .topright{ margin:0; float: none; position: fixed; z-index: 400; top: 0; width: 100%}
    .p-topmenu{ width: 100%; left: 0}
    
    .containerMM{ position: fixed; z-index:201 !important; min-height: 100% !important; background: rgba(0,0,0,0.59); overflow: auto;padding-top: 60px}
    
    body[rel="intro-page"] #wrap_slide_menu{ padding-top: 80px}
    body:not([rel="intro-page"]) #wrap_slide_menu{ padding-top: 60px}
    
    #top-menu li{ padding: 3px 9px 0 9px; height:33px}
    .box-image-left .f-img{width: 100% !important}
    footer li.list-content{ width:100% !important}
    footer li.list-content{ clear: both; float:none}
    
    label.cb-label{ width:85% !important}
    input[type="checkbox"]{margin-right: 5px}
    
    input[type="submit"]{width:100%; text-align: center;padding: 5px 15px}
    
    a[rel=treehouse], a{ word-break: break-all }
    
    div[rel=treehouse] table{ width: 100% !important}
    div[rel=treehouse] table, div[rel=treehouse] table{border: 0}
    div[rel=treehouse] table thead, div[rel=treehouse] table thead{border: none; clip: rect(0 0 0 0);height: 1px; margin: -1px; overflow: hidden;padding: 0; position: absolute;width: 1px}
    div[rel=treehouse] table tr{ border-bottom: 1px dotted #564c4d;display: block;margin: .625em 5px}
    div[rel=treehouse] table tr:first-of-type{}
    div[rel=treehouse] table tr:last-of-type, div[rel=treehouse] table tr:last-of-type{border-bottom: none}
    div[rel=treehouse] table td, div[rel=treehouse] table td{border-bottom: 1px dotted #ddd;display: block; width: auto !important; font-size: .9em; text-align: right}
    div[rel=treehouse] table td{text-align: left}
    
    div[rel=treehouse] table td::before, div[rel=treehouse] table td::before{ content: attr(data-label); float: left; font-weight: 700; text-transform: uppercase;width:110px}
    div[rel=treehouse] table td:last-child, div[rel=treehouse] table td:last-child{ border-bottom: 0}
}