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{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li{float:left}.ce_gallery>ul li.col_first{clear:left}.float_left{float:left}.float_right{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} .rs-columns { clear: both; display: inline-block; width: 100%; } .rs-column { float: left; width: 100%; margin-top: 7.69231%; margin-right: 7.69231%; } .rs-column.-large-first { clear: left; } .rs-column.-large-last { margin-right: -5px; } .rs-column.-large-first-row { margin-top: 0; } .rs-column.-large-col-1-1 { width: 100%; } .rs-column.-large-col-2-1 { width: 46.15385%; } .rs-column.-large-col-2-2 { width: 100%; } .rs-column.-large-col-3-1 { width: 28.20513%; } .rs-column.-large-col-3-2 { width: 64.10256%; } .rs-column.-large-col-3-3 { width: 100%; } .rs-column.-large-col-4-1 { width: 19.23077%; } .rs-column.-large-col-4-2 { width: 46.15385%; } .rs-column.-large-col-4-3 { width: 73.07692%; } .rs-column.-large-col-4-4 { width: 100%; } .rs-column.-large-col-5-1 { width: 13.84615%; } .rs-column.-large-col-5-2 { width: 35.38462%; } .rs-column.-large-col-5-3 { width: 56.92308%; } .rs-column.-large-col-5-4 { width: 78.46154%; } .rs-column.-large-col-5-5 { width: 100%; } .rs-column.-large-col-6-1 { width: 10.25641%; } .rs-column.-large-col-6-2 { width: 28.20513%; } .rs-column.-large-col-6-3 { width: 46.15385%; } .rs-column.-large-col-6-4 { width: 64.10256%; } .rs-column.-large-col-6-5 { width: 82.05128%; } .rs-column.-large-col-6-6 { width: 100%; } @media screen and (max-width: 900px) { .rs-column { margin-top: 7.69231%; margin-right: 7.69231%; } .rs-column.-large-first { clear: none; } .rs-column.-large-last { margin-right: 7.69231%; } .rs-column.-large-first-row { margin-top: 7.69231%; } .rs-column.-medium-first { clear: left; } .rs-column.-medium-last { margin-right: -5px; } .rs-column.-medium-first-row { margin-top: 0; } .rs-column.-medium-col-1-1 { width: 100%; } .rs-column.-medium-col-2-1 { width: 46.15385%; } .rs-column.-medium-col-2-2 { width: 100%; } .rs-column.-medium-col-3-1 { width: 28.20513%; } .rs-column.-medium-col-3-2 { width: 64.10256%; } .rs-column.-medium-col-3-3 { width: 100%; } .rs-column.-medium-col-4-1 { width: 19.23077%; } .rs-column.-medium-col-4-2 { width: 46.15385%; } .rs-column.-medium-col-4-3 { width: 73.07692%; } .rs-column.-medium-col-4-4 { width: 100%; } .rs-column.-medium-col-5-1 { width: 13.84615%; } .rs-column.-medium-col-5-2 { width: 35.38462%; } .rs-column.-medium-col-5-3 { width: 56.92308%; } .rs-column.-medium-col-5-4 { width: 78.46154%; } .rs-column.-medium-col-5-5 { width: 100%; } .rs-column.-medium-col-6-1 { width: 10.25641%; } .rs-column.-medium-col-6-2 { width: 28.20513%; } .rs-column.-medium-col-6-3 { width: 46.15385%; } .rs-column.-medium-col-6-4 { width: 64.10256%; } .rs-column.-medium-col-6-5 { width: 82.05128%; } .rs-column.-medium-col-6-6 { width: 100%; } } @media screen and (max-width: 599px) { .rs-column { margin-top: 7.69231%; margin-right: 7.69231%; } .rs-column.-large-last { margin-right: 7.69231%; } .rs-column.-large-first-row { margin-top: 7.69231%; } .rs-column.-medium-first { clear: none; } .rs-column.-medium-last { margin-right: 7.69231%; } .rs-column.-medium-first-row { margin-top: 7.69231%; } .rs-column.-small-first { clear: left; } .rs-column.-small-last { margin-right: -5px; } .rs-column.-small-first-row { margin-top: 0; } .rs-column.-small-col-1-1 { width: 100%; } .rs-column.-small-col-2-1 { width: 46.15385%; } .rs-column.-small-col-2-2 { width: 100%; } .rs-column.-small-col-3-1 { width: 28.20513%; } .rs-column.-small-col-3-2 { width: 64.10256%; } .rs-column.-small-col-3-3 { width: 100%; } .rs-column.-small-col-4-1 { width: 19.23077%; } .rs-column.-small-col-4-2 { width: 46.15385%; } .rs-column.-small-col-4-3 { width: 73.07692%; } .rs-column.-small-col-4-4 { width: 100%; } .rs-column.-small-col-5-1 { width: 13.84615%; } .rs-column.-small-col-5-2 { width: 35.38462%; } .rs-column.-small-col-5-3 { width: 56.92308%; } .rs-column.-small-col-5-4 { width: 78.46154%; } .rs-column.-small-col-5-5 { width: 100%; } .rs-column.-small-col-6-1 { width: 10.25641%; } .rs-column.-small-col-6-2 { width: 28.20513%; } .rs-column.-small-col-6-3 { width: 46.15385%; } .rs-column.-small-col-6-4 { width: 64.10256%; } .rs-column.-small-col-6-5 { width: 82.05128%; } .rs-column.-small-col-6-6 { width: 100%; } } .mejs__offscreen{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal}.mejs__container{background:#000;box-sizing:border-box;font-family:'Helvetica',Arial,serif;position:relative;text-align:left;text-indent:0;vertical-align:top}.mejs__container *{box-sizing:border-box}.mejs__container video::-webkit-media-controls,.mejs__container video::-webkit-media-controls-panel,.mejs__container video::-webkit-media-controls-panel-container,.mejs__container video::-webkit-media-controls-start-playback-button{-webkit-appearance:none;display:none!important}.mejs__fill-container,.mejs__fill-container .mejs__container{height:100%;width:100%}.mejs__fill-container{background:0 0;margin:0 auto;overflow:hidden;position:relative}.mejs__container:focus{outline:0}.mejs__iframe-overlay{height:100%;position:absolute;width:100%}.mejs__embed,.mejs__embed body{background:#000;height:100%;margin:0;overflow:hidden;padding:0;width:100%}.mejs__fullscreen{overflow:hidden!important}.mejs__container-fullscreen{bottom:0;left:0;overflow:hidden;position:fixed;right:0;top:0;z-index:1000}.mejs__container-fullscreen .mejs__mediaelement,.mejs__container-fullscreen video{height:100%!important;width:100%!important}.mejs__background{left:0;position:absolute;top:0}.mejs__mediaelement{height:100%;left:0;position:absolute;top:0;width:100%;z-index:0}.mejs__poster{background-position:50% 50%;background-repeat:no-repeat;background-size:cover;left:0;position:absolute;top:0;z-index:1}:root .mejs__poster-img{display:none}.mejs__poster-img{border:0;padding:0}.mejs__overlay{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;left:0;position:absolute;top:0}.mejs__layer{z-index:1}.mejs__overlay-play{cursor:pointer}.mejs__overlay-button{background:url(../../assets/mediaelement/images/mejs-controls.svg) no-repeat;background-position:0 -39px;height:80px;width:80px}.mejs__overlay:hover>.mejs__overlay-button{background-position:-80px -39px}.mejs__overlay-loading{height:80px;width:80px}.mejs__overlay-loading-bg-img{-webkit-animation:mejs__loading-spinner 1s linear infinite;animation:mejs__loading-spinner 1s linear infinite;background:url(../../assets/mediaelement/images/mejs-controls.svg) -160px -40px no-repeat;display:block;height:80px;width:80px;z-index:1}@-webkit-keyframes mejs__loading-spinner{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes mejs__loading-spinner{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.mejs__controls{bottom:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:40px;left:0;list-style-type:none;margin:0;padding:0 10px;position:absolute;width:100%;z-index:3}.mejs__controls:not([style*='display: none']){background:rgba(255,0,0,.7);background:-webkit-linear-gradient(transparent,rgba(0,0,0,.35));background:linear-gradient(transparent,rgba(0,0,0,.35))}.mejs__button,.mejs__time,.mejs__time-rail{font-size:10px;height:40px;line-height:10px;margin:0;width:32px}.mejs__button>button{background:url(../../assets/mediaelement/images/mejs-controls.svg);border:0;cursor:pointer;display:block;font-size:0;height:20px;line-height:0;margin:10px 6px;overflow:hidden;padding:0;position:absolute;text-decoration:none;width:20px}.mejs__button>button:focus{outline:dotted 1px #999}.mejs__container-keyboard-inactive a,.mejs__container-keyboard-inactive a:focus,.mejs__container-keyboard-inactive button,.mejs__container-keyboard-inactive button:focus,.mejs__container-keyboard-inactive [role=slider],.mejs__container-keyboard-inactive [role=slider]:focus{outline:0}.mejs__time{box-sizing:content-box;color:#fff;font-size:11px;font-weight:700;height:24px;overflow:hidden;padding:16px 6px 0;text-align:center;width:auto}.mejs__play>button{background-position:0 0}.mejs__pause>button{background-position:-20px 0}.mejs__replay>button{background-position:-160px 0}.mejs__time-rail{direction:ltr;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;height:40px;margin:0 10px;padding-top:10px;position:relative}.mejs__time-total,.mejs__time-buffering,.mejs__time-loaded,.mejs__time-current,.mejs__time-float,.mejs__time-hovered,.mejs__time-float-current,.mejs__time-float-corner,.mejs__time-marker{border-radius:2px;cursor:pointer;display:block;height:10px;position:absolute}.mejs__time-total{background:rgba(255,255,255,.3);margin:5px 0 0;width:100%}.mejs__time-buffering{-webkit-animation:buffering-stripes 2s linear infinite;animation:buffering-stripes 2s linear infinite;background:-webkit-linear-gradient(135deg,rgba(255,255,255,.4) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.4) 75%,transparent 75%,transparent);background:linear-gradient(-45deg,rgba(255,255,255,.4) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.4) 75%,transparent 75%,transparent);background-size:15px 15px;width:100%}@-webkit-keyframes buffering-stripes{0%{background-position:0 0}to{background-position:30px 0}}@keyframes buffering-stripes{0%{background-position:0 0}to{background-position:30px 0}}.mejs__time-loaded{background:rgba(255,255,255,.3)}.mejs__time-current,.mejs__time-handle-content{background:rgba(255,255,255,.9)}.mejs__time-hovered{background:rgba(255,255,255,.5);z-index:10}.mejs__time-hovered.negative{background:rgba(0,0,0,.2)}.mejs__time-current,.mejs__time-buffering,.mejs__time-loaded,.mejs__time-hovered{left:0;-webkit-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;-webkit-transition:.15s ease-in all;transition:.15s ease-in all;width:100%}.mejs__time-buffering{-webkit-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1)}.mejs__time-hovered{-webkit-transition:height .1s cubic-bezier(.44,0,1,1);transition:height .1s cubic-bezier(.44,0,1,1)}.mejs__time-hovered.no-hover{-webkit-transform:scaleX(0)!important;-ms-transform:scaleX(0)!important;transform:scaleX(0)!important}.mejs__time-handle,.mejs__time-handle-content{border:4px solid transparent;cursor:pointer;left:0;position:absolute;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);z-index:11}.mejs__time-handle-content{border:4px solid rgba(255,255,255,.9);border-radius:50%;height:10px;left:-7px;top:-4px;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);width:10px}.mejs__time-rail:hover .mejs__time-handle-content,.mejs__time-rail .mejs__time-handle-content:focus,.mejs__time-rail .mejs__time-handle-content:active{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.mejs__time-float{background:#eee;border:solid 1px #333;bottom:100%;color:#111;display:none;height:17px;margin-bottom:9px;position:absolute;text-align:center;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);width:36px}.mejs__time-float-current{display:block;left:0;margin:2px;text-align:center;width:30px}.mejs__time-float-corner{border:solid 5px #eee;border-color:#eee transparent transparent;border-radius:0;display:block;height:0;left:50%;line-height:0;position:absolute;top:100%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);width:0}.mejs__long-video .mejs__time-float{margin-left:-23px;width:64px}.mejs__long-video .mejs__time-float-current{width:60px}.mejs__broadcast{color:#fff;height:10px;position:absolute;top:15px;width:100%}.mejs__fullscreen-button>button{background-position:-80px 0}.mejs__unfullscreen>button{background-position:-100px 0}.mejs__mute>button{background-position:-60px 0}.mejs__unmute>button{background-position:-40px 0}.mejs__volume-button{position:relative}.mejs__volume-button>.mejs__volume-slider{-webkit-backface-visibility:hidden;background:rgba(50,50,50,.7);border-radius:0;bottom:100%;display:none;height:115px;left:50%;margin:0;position:absolute;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);width:25px;z-index:1}.mejs__volume-button:hover{border-radius:0 0 4px 4px}.mejs__volume-total{background:rgba(255,255,255,.5);height:100px;left:50%;margin:0;position:absolute;top:8px;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);width:2px}.mejs__volume-current{background:rgba(255,255,255,.9);left:0;margin:0;position:absolute;width:100%}.mejs__volume-handle{background:rgba(255,255,255,.9);border-radius:1px;cursor:ns-resize;height:6px;left:50%;position:absolute;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);width:16px}.mejs__horizontal-volume-slider{display:block;height:36px;position:relative;vertical-align:middle;width:56px}.mejs__horizontal-volume-total{background:rgba(50,50,50,.8);border-radius:2px;font-size:1px;height:8px;left:0;margin:0;padding:0;position:absolute;top:16px;width:50px}.mejs__horizontal-volume-current{background:rgba(255,255,255,.8);border-radius:2px;font-size:1px;height:100%;left:0;margin:0;padding:0;position:absolute;top:0;width:100%}.mejs__horizontal-volume-handle{display:none}.mejs__captions-button,.mejs__chapters-button{position:relative}.mejs__captions-button>button{background-position:-140px 0}.mejs__chapters-button>button{background-position:-180px 0}.mejs__captions-button>.mejs__captions-selector,.mejs__chapters-button>.mejs__chapters-selector{background:rgba(50,50,50,.7);border:solid 1px transparent;border-radius:0;bottom:100%;margin-right:-43px;overflow:hidden;padding:0;position:absolute;right:50%;visibility:visible;width:86px}.mejs__chapters-button>.mejs__chapters-selector{margin-right:-55px;width:110px}.mejs__captions-selector-list,.mejs__chapters-selector-list{list-style-type:none!important;margin:0;overflow:hidden;padding:0}.mejs__captions-selector-list-item,.mejs__chapters-selector-list-item{color:#fff;cursor:pointer;display:block;list-style-type:none!important;margin:0 0 6px;overflow:hidden;padding:0}.mejs__captions-selector-list-item:hover,.mejs__chapters-selector-list-item:hover{background-color:#c8c8c8!important;background-color:rgba(255,255,255,.4)!important}.mejs__captions-selector-input,.mejs__chapters-selector-input{clear:both;float:left;left:-1000px;margin:3px 3px 0 5px;position:absolute}.mejs__captions-selector-label,.mejs__chapters-selector-label{cursor:pointer;float:left;font-size:10px;line-height:15px;padding:4px 10px 0;width:100%}.mejs__captions-selected,.mejs__chapters-selected{color:#21f8f8}.mejs__captions-translations{font-size:10px;margin:0 0 5px}.mejs__captions-layer{bottom:0;color:#fff;font-size:16px;left:0;line-height:20px;position:absolute;text-align:center}.mejs__captions-layer a{color:#fff;text-decoration:underline}.mejs__captions-layer[lang=ar]{font-size:20px;font-weight:400}.mejs__captions-position{bottom:15px;left:0;position:absolute;width:100%}.mejs__captions-position-hover{bottom:35px}.mejs__captions-text,.mejs__captions-text *{background:rgba(20,20,20,.5);box-shadow:5px 0 0 rgba(20,20,20,.5),-5px 0 0 rgba(20,20,20,.5);padding:0;white-space:pre-wrap}.mejs__container.mejs__hide-cues video::-webkit-media-text-track-container{display:none}.mejs__overlay-error{position:relative}.mejs__overlay-error>img{left:0;max-width:100%;position:absolute;top:0;z-index:-1}.mejs__cannotplay,.mejs__cannotplay a{color:#fff;font-size:.8em}.mejs__cannotplay{position:relative}.mejs__cannotplay p,.mejs__cannotplay a{display:inline-block;padding:0 15px;width:100%} #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} .content-slider{overflow:hidden;visibility:hidden;position:relative}.slider-wrapper{overflow:hidden;position:relative}.slider-wrapper>*{float:left;width:100%;position:relative}.slider-control{height:30px;position:relative}.slider-control a,.slider-control .slider-menu{position:absolute;top:9px;display:inline-block}.slider-control .slider-prev{left:0}.slider-control .slider-next{right:0}.slider-control .slider-menu{top:0;width:50%;left:50%;margin-left:-25%;font-size:27px;text-align:center}.slider-control .slider-menu b{color:#bbb;cursor:pointer}.slider-control .slider-menu b.active{color:#666} @font-face { font-family: 'DINBold'; src: url('../../files/fonts/din-bold-webfont.eot'); src: url('../../files/fonts/din-bold-webfont.eot?#iefix') format('embedded-opentype'), url('../../files/fonts/din-bold-webfont.woff') format('woff'), url('../../files/fonts/din-bold-webfont.ttf') format('truetype'), url('../../files/fonts/din-bold-webfont.svg#DINBold') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'DINLight'; src: url('../../files/fonts/din-light-webfont.eot'); src: url('../../files/fonts/din-light-webfont.eot?#iefix') format('embedded-opentype'), url('../../files/fonts/din-light-webfont.woff') format('woff'), url('../../files/fonts/din-light-webfont.ttf') format('truetype'), url('../../files/fonts/din-light-webfont.svg#DINLight') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'DINRegular'; src: url('../../files/fonts/din-regular-webfont.eot'); src: url('../../files/fonts/din-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../../files/fonts/din-regular-webfont.woff') format('woff'), url('../../files/fonts/din-regular-webfont.ttf') format('truetype'), url('../../files/fonts/din-regular-webfont.svg#DINRegular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'DINMedium'; src: url('../../files/fonts/din-medium-webfont.eot'); src: url('../../files/fonts/din-medium-webfont.eot?#iefix') format('embedded-opentype'), url('../../files/fonts/din-medium-webfont.woff') format('woff'), url('../../files/fonts/din-medium-webfont.ttf') format('truetype'), url('../../files/fonts/din-medium-webfont.svg#DINMedium') format('svg'); font-weight: normal; font-style: normal; } .clear { clear: both; } * { margin: 0; padding: 0; } @font-face { font-family: 'hydrocontrol'; src: url('../../files/fonts/hydrocontrol.eot'); src: url('../../files/fonts/hydrocontrol.eot?#iefix') format('embedded-opentype'), url('../../files/fonts/hydrocontrol.woff') format('woff'), url('../../files/fonts/hydrocontrol.ttf') format('truetype'), url('../../files/fonts/hydrocontrol.svg#hydrocontrol') format('svg'); font-weight: normal; font-style: normal; } .icon { /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'hydrocontrol' !important; /* speak: none; */ font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .btn-searcher:after { content: "\e900"; font-size: 2.2em; color: #fff; text-indent: 0; display: block; line-height: initial; } .btn-accup:before { content: "\e901"; } .btn-accdown:before { content: "\e902"; } .btn-close:after { content: "\e903"; font-size: 2.2em; vertical-align: bottom; color: #005387; } .btn-menu:before, .btn-search:before, .btn-shop:before, .btn-request:before { font-size: 2.8em; } @media screen and (max-width: 599px) { .btn-menu:before, .btn-search:before, .btn-shop:before, .btn-request:before { font-size: 2.8em!important; } } @media screen and (max-width: 740px) { .safari.mobile .btn-menu:before, .safari.mobile .btn-search:before, .safari.mobile .btn-shop:before, .safari.mobile .btn-request:before { font-size: 2.6em; } } @media screen and (max-width: 768px) { .btn-menu:before, .btn-search:before, .btn-shop:before, .btn-request:before { font-size: 2.2em; } } .btn-menu:before { content: "\e904"; vertical-align: bottom; color: #005387; } .btn-search:before { content: "\e905"; vertical-align: bottom; color: #005387; } .btn-shop:before { content: "\e906"; vertical-align: bottom; color: #005387; } .btn-request:before { content: "\e907"; vertical-align: bottom!important; color: #005387; } @font-face { font-family: 'hydrocon'; src: url('../../files/fonts/hydroicon.eot'); src: url('../../files/fonts/hydroicon.eot?#iefix') format('embedded-opentype'), url('../../files/fonts/hydroicon.ttf') format('truetype'), url('../../files/fonts/hydroicon.woff') format('woff'), url('../../files/fonts/hydroicon.svg#hydroicon') format('svg'); font-weight: normal; font-style: normal; } *[data-icon]:before { content: attr(data-icon); font: 4em/1 "hydrocon" !important; color: #005387; margin: 0 auto; } [class^="ico-"], [class*=" ico-"], [class^="mco-"], [class*=" mco-"] { /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'hydrocon' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .ico-iot-aggregate:before, .ico-iot-aggregatecytropac-cytrobox:before { content: "\e93c"; } .ico-hydroblog:before, .ico-hydroblog-post:before { content: "\e93b"; } .ico-rexroth-service:before, .ico-boschrexrothhydraulikservice:before, .ico-hydac-service:before, .ico-hydac-druckspeicher-blasenspeicher-service:before { content: "\e93a"; } .ico-auszeichnungen:before { content: "\e939"; } .ico-schlauch-service:before, .ico-hydraulikschlauchservice:before { content: "\e937"; } .ico-motore:before { content: "\e938"; } .ico-filtration:before, .ico-filtrationsgeraete:before, .ico-filteraggregat:before { content: "\e935"; } .ico-dguvinspect:before, .ico-dguv-pruefungen:before { content: "\e936"; } .ico-seminar-anmeldung:before, .ico-seminar-buchung:before, .ico-seminar-daten:before, .ico-seminar-liste:before, .ico-register:before { content: "\e900"; } .ico-support:before { content: "\e901"; } .ico-insider:before { content: "\e902"; } .ico-experts:before { content: "\e903"; } .ico-quality:before { content: "\e904"; } .ico-time:before { content: "\e905"; } .ico-pdf:before { content: "\e906"; } .ico-video:before { content: "\e907"; } .ico-benefits:before { content: "\e908"; } .ico-emergency:before { content: "\e909"; } .ico-phone:before { content: "\e90a"; } .ico-dialog:before { content: "\e90b"; } .ico-pneushop:before { content: "\e90c"; } .ico-estore:before { content: "\e90d"; } .ico-nofound:before { content: "\e90e"; } .ico-location:before { content: "\e90f"; } .ico-delivery:before { content: "\e910"; } .ico-brands:before { content: "\e911"; } .ico-selection:before { content: "\e912"; } .ico-company:before { content: "\e913"; } .ico-stellenangebote:before, .ico-jobs:before { content: "\e914"; } .ico-artikel:before, .ico-aktuelles:before, .ico-news:before { content: "\e915"; } .ico-wirueberuns:before, .ico-hydrobar:before { content: "\e916"; } .ico-kontakt:before, .ico-contact:before { content: "\e917"; } .ico-team:before { content: "\e918"; } .ico-inhouse-schulung:before, .ico-teilnehmer-stimmen:before, .ico-seminardetails:before, .ico-seminarthemen:before, .ico-hydraulikschulungen:before, .ico-grundlagen-schulung:before, .ico-dguv113-015:before, .ico-dguv113-020:before, .ico-auffrischungskurs:before, .ico-schlauch-konfektionierer:before, .ico-seminare:before { content: "\e919"; } .ico-downloads:before { content: "\e91a"; } .ico-sicherheitsdaten:before, .ico-security:before { content: "\e91b"; } .ico-technischedaten:before, .ico-techdata:before { content: "\e91c"; } .ico-vorschriftengesetze:before, .ico-vorschriften-gesetze:before, .ico-regulations:before { content: "\e91d"; } .ico-anleitungen:before, .ico-manuals:before { content: "\e91e"; } .ico-software:before { content: "\e91f"; } .ico-hydrobar-medien:before, .ico-media:before { content: "\e920"; } .ico-components:before { content: "\e921"; } .ico-druckbehaelter:before, .ico-druckspeicher:before, .ico-vessels:before, .ico-hydraulikdruckspeicher:before { content: "\e922"; } .ico-filter:before, .ico-hydraulik-filter:before, .ico-hydraulikfilter:before { content: "\e923"; } .ico-schlauchleitungen:before, .ico-hoses:before { content: "\e924"; } .ico-pumpen:before, .ico-pumps:before { content: "\e925"; } .ico-ventile:before, .ico-valves:before, .ico-hydraulikventile:before { content: "\e926"; } .ico-mengenteiler:before, .ico-divider:before { content: "\e927"; } .ico-hydraulikzylinder:before, .ico-cylinder:before, .ico-hydraulikzylinderkaufen:before { content: "\e928"; } .ico-verschraubungen:before, .ico-connector:before { content: "\e929"; } .ico-grossaggregate:before, .ico-aggregate:before, .ico-hydraulikaggregate:before { content: "\e92a"; } .ico-kleinaggregate:before, .ico-kompaktaggregate:before, .ico-smallaggregat:before { content: "\e92b"; } .ico-sonderloesungen:before, .ico-extrasolution:before { content: "\e92c"; } .ico-planungkonstruktion:before, .ico-planung-konstruktion:before, .ico-construction:before { content: "\e92d"; } .ico-aggregate-anlagenbau:before, .ico-aggregate--anlagenbau:before, .ico-builder:before { content: "\e92e"; } .ico-service:before { content: "\e92f"; } .ico-anlagen-wartung:before, .ico-wartung:before { content: "\e930"; } .ico-reparatur-service:before, .ico-reparatur:before { content: "\e931"; } .ico-speicher-service:before, .ico-speicher:before { content: "\e932"; } .ico-installation:before, .ico-installationen:before { content: "\e933"; } .ico-mietgeraetepool:before, .ico-reantaltool:before { content: "\e934"; } .ico-404seitenichtgefunden:before { content: "\e91b"; } /*! * jQuery Accordion 0.0.1 * (c) 2014 Victor Fernandez * MIT Licensed. */ /* Requirements */ [data-accordion] [data-content] { overflow: hidden; max-height: 0; } /* Basic Theme */ [data-accordion] { line-height: 1; } [data-control], [data-content] > * { border-bottom: 1px solid #888; padding: 10px; } [data-content] [data-accordion] { border: 0; padding: 0; } [data-accordion] [data-control] { position: relative; padding-right: 40px; } [data-accordion] > [data-control]:after { content: ""; position: absolute; right: 10px; top: 12px; font-size: 25px; font-weight: 200; color: #444; height: 15px; width: 24px; background: url('../../files/hydrobar/images/down.png') center center no-repeat; background-size: 50%; } [data-accordion].open > [data-control]:after { -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); } /* Eigene templates section('section','block_section_aside'); ?> */ /* Base Setting ------------------------------------------------------------------- */ .svg { display: block; vertical-align: top; } .clear { clear: both; } * { margin: 0; padding: 0; } .logo { display: inline-block; margin-top: 18px; } .ce-partner { display: inline; padding: 8px; } .popup_content .ce-partner, .foo .ce-partner { display: none!important; } .blue { color: #005387; } @media screen and (max-width: 500px) { .ce-partner { display: none; } } .block { overflow: hidden; } /* Base Styles ------------------------------------------------------------------- */ /* NOTE html is set to 12px sizing. So basically 1.5em = 12px. */ html, body { height: 100%; width: 100%; } html { font-size: 12px; overflow-x: hidden; -webkit-text-size-adjust: none; } body { margin: 0; padding: 0; font-family:'DINLight', Helvetica, Arial, sans-serif; font-size: 14px; color: #595959; } a { text-decoration: none; color: #3c97cb; /* #858585; */ } a:hover { color: #000; } a.selected { color: #000 !important; text-decoration: underline; } a:focus { outline: none; } button:focus { outline: none; } /* Container ------------------------------------------------------------------- */ #wrapper { } #header { position: relative; width: 99.999%; height: 148px; } #header .inside { max-width: 1100px; min-height: 148px; margin: 0 auto; border-bottom: 8px solid #3c97cb; } #promos { margin-top: 8px;} #promos .inside { margin: 0 2% 0 2%; } .mod_rocksolid_slider .ce_text, .mod_rocksolid_slider .ce_slidertext { max-width: 820px; margin: 50px auto; } #chapternav { margin-top: 8px; } #chapternav .inside { margin: 0 2% 0 2%; } #localnav { margin-top: 8px; border-bottom: 1px solid #cfcfcf; } #localnav .inside { max-width: 1100px; margin: 0 auto; } /* #main ---- */ #main .contentpanel { margin: 0 2% 0 2%; } #main .heropanel { margin: 0 2% 0 2%; } #main .heropanel-inner { max-width: 1100px; margin: 0 auto; } .add-8-space { margin-top: 8px!important; } #main .centered-wrapper-inner { max-width: 1100px; margin: 0 auto; } #main .centered-wrapper { max-width: 1100px; margin: 0 auto; } #main .centered-wrapper.-fullwidth { max-width: inherit; margin: 0 2%; } #main .ce_productlist .inside { max-width: 1100px; margin: 40px auto 0 auto; } #main .contentsection, #main .servicestrip { max-width: 1100px; margin: 0 auto; } #main .touchstrip { max-width: 1100px; margin: 0 auto; border-bottom: 8px solid #3c97cb; position: relative; } /* #main blank ---- */ #suchergebnis, #aktuelles, #artikel { min-height: 250px; } /* #footer container --- */ #footer { width: 100%; position: relative; background: #d8dbdc; color: #333; padding-bottom: 70px; } #footer .inside { max-width: 1100px; margin: 0 auto; } #adress-strip { background: #fff; } #adress-strip .inside { padding: 1% 0 1% 0; } /* Media queries */ @media screen and (max-width: 738px) { .mod_rocksolid_slider .ce_slidertext { margin: 10px auto !important; background-color: rgba(236, 236, 236, 0.8); } .mod_rocksolid_slider .ce_slidertext div.h1 { padding-top: 20px; } .mod_rocksolid_slider .ce_slidertext .more { padding-bottom: 20px; } } @media screen and (max-width: 767px){ #footer { padding-bottom: 20px; } } @media screen and (max-width: 980px) { #wrapper { width: 99.999%!important; } #header .inside { margin: 0 3% 0 3%!important; } #promos .inside { margin: 0!important; } #chapternav .inside { margin: 0!important; } #localnav .inside { margin: 0 3%!important; } .mod_rocksolid_slider .ce_text, .mod_rocksolid_slider .ce_slidertext { margin: 40px auto; padding: 0 3% 0 3%!important; } #main .contentpanel { margin: 0!important; } #main .heropanel { margin: 0!important; } #main .heropanel-inner { margin: 0 3% 0 3%!important; } #main .contentsection { margin: 0 3% 0 3%!important; } #main .centered-wrapper { margin: 0 3% 0 3%!important; } #main .centered-wrapper.-fullwidth { margin: 0!important; } #main .centered-wrapper-inner.-fullwidth { margin: 0 3%!important; } #main .ce_productlist .inside { margin: 40px 3% 0 3%!important; } #main .servicestrip { margin: 0 3% 20px 3%!important; } #main .touchstrip { margin: 0 3% 0 3%!important; } #footer .inside { margin: 0 3% 0 3%!important; } } @media screen and (max-width: 1180px) { #wrapper { width: 99.999%; } #header .inside { margin: 0 6% 0 6%; } #promos .inside { margin: 0 2% 0 2%; } #chapternav .inside { margin: 0 2% 0 2%; } #localnav .inside { margin: 0 6% 0 6%; } .mod_rocksolid_slider .ce_text, .mod_rocksolid_slider .ce_slidertext { margin: 40px auto; } #main .contentpanel { margin: 0 2% 0 2%; } #main .heropanel { margin: 0 2% 0 2%; } #main .heropanel-inner { margin: 0 4% 0 4%; } #main .contentsection { margin: 0 4% 0 4%; } #main .centered-wrapper { margin: 0 6% 0 6%; } #main .centered-wrapper.-fullwidth { margin: 0 2% 0 2%; } #main .centered-wrapper-inner.-fullwidth { margin: 0 4.5% 0 4.5%; } #main .ce_productlist .inside { margin: 40px 6% 0 6%; } #main .servicestrip { margin: 0 6% 20px 6%; } #main .touchstrip { margin: 0 6% 0 6%; } #footer .inside { margin: 0 6% 0 6%; } #adress-strip .inside { padding: 1.5% 0 1.5% 0; margin: 0 2% 0 2%; } } /* Google map ------------------------------------------------------------------- */ #map-canvas { height: 100%; width: 100% } #main .mapper .centered-wrapper-inner.-fullwidth { padding: 0!important; max-width: inherit; } #kontakt { margin-bottom: 20px!important; } .info-map { position: relative; clear: both; } .info-map-gmap { height: 20.375em; } @media screen and (max-width: 980px) { #main .mapper .centered-wrapper-inner.-fullwidth { padding: 0; margin: 0!important; } } @media screen and (max-width: 599px) { .info-map-gmap { height: 20em; } /* margin-right: 5.55556%; margin-left: 5.55556%; */ #main .mapper .centered-wrapper-inner.-fullwidth { padding: 0; margin: 0!important; } } /* Google Map Boxes ------------------------------------------------------------------- */ .info-map-boxes { zoom: 1; position: relative; margin-top: -7.25em; margin-bottom: 6px; margin-left: 6px; -webkit-transition: opacity 0.2s linear; -moz-transition: opacity 0.2s linear; -o-transition: opacity 0.2s linear; transition: opacity 0.2s linear; } .info-map-boxes:before { content: ""; display: table; } .info-map-boxes:after { content: ""; display: table; clear: both; } @media screen and (max-width: 599px) { .info-map-boxes { margin-top: 1.375em; } } .info-map-boxes-item { padding: 0 1.42857em 0.21429em 1.42857em; border-radius: 3px; font-size: 0.875em; color: inherit; background: white; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 7px rgba(0, 0, 0, 0.15); } .info-map-boxes-item.rs-column { width: inherit!important; } @media screen and (max-width: 599px) { .info-map-boxes-item.rs-column { width: 100%!important; max-width: 90%; } } .info-map-boxes-item a .globalBtn { font-size: 1.25em; } .info-map-boxes-item:before { float: right; margin: 0; padding: 0.15152em 0 0.45455em 0.30303em; font-size: 4.71429em; color: #8570a6; background: white; } .info-map-boxes-item:hover, .info-map-boxes-item:focus { text-decoration: none; } .info-map-boxes-item h3 { margin: 0.57143em 0; padding: 0 0 0.21429em; border-bottom: 1px solid #e5e8ee; color: #8570a6; font-size: 1em; font-weight: bold; } .info-map-boxes-item p { margin: 0.57143em 0; } .info-map-boxes-item-link { color: #1782c5; } /* Error icon for 404 page not found ------------------------------------------------------------------- */ #header-404-seite-nicht-gefunden .local-icon i { margin-top: 20px; background: url("../../files/hydrobar/images/ico-404.svg") center center no-repeat!important; background-size: 70%!important; } #header-404-seite-nicht-gefunden .local-intro { padding: 4px 0 0 0!important; } /* Footer - Sitemap styling ------------------------------------------------------------------- */ #footer .mod_navigation { display: block; } #footer .mod_navigation.mobile { display: none; } #footer .mod_navigation { padding: 30px 0 30px 0;} #footer .mod_navigation ul.level_1, #footer .mod_navigation ul.level_2 { list-style-type: none; } #footer .mod_navigation .dir-column { position: relative; z-index: 1; min-height: 2px; margin: 0; padding: 0; float: left; } #footer .mod_navigation .dir-column { width: 20%; } #footer .mod_navigation .dir-column:nth-child(2) { width: 23%; } #footer .mod_navigation .dir-column:nth-child(4) { width: 22%; } #footer .mod_navigation .dir-column:last-child { width: 15%; } #footer .mod_navigation .level_1, #footer .mod_navigation .level_2 { font-size: 0.95em; } #footer .mod_navigation .level_1 { font-family: 'DINRegular', Helvetica, Arial, sans-serif; } #footer .mod_navigation .dir-column li a { color: #6a6b6b; } #footer .mod_navigation .dir-column li.social, #footer .mod_navigation .dir-column li a.submenu { color: #000; } #footer .mod_navigation ul li { line-height: 1.6em; display: block; } #footer .mod_navigation ul li a:hover { color: #6a6b6b; text-decoration: underline; } #footer .level_1 div.social { font-size: 1.2em; } .social a.facebook { display: inline-block; width: 20px; height: 20px; margin-right: 8px; background: url("../../files/hydrobar/images/ico-facebook.svg") center center no-repeat; } .social a.youtube { display: inline-block; width: 20px; height: 20px; margin-top: 4px; background: url("../../files/hydrobar/images/ico-youtube.svg") center center no-repeat; } .mac.safari.webkit .social a.facebook { display: inline-block; width: 24px; height: 24px; margin-right: 8px; background: url("../../files/hydrobar/images/ico-facebook.png") center center no-repeat; } .mac.safari.webkit .social a.youtube { display: inline-block; width: 24px; height: 24px; margin-right: 8px; background: url("../../files/hydrobar/images/ico-youtube.png") center center no-repeat; } /* Media queries */ @media screen and (max-width: 767px){ #footer .mod_navigation { display: none; } #footer .mod_navigation.mobile { display: block; } #footer .social { text-align: center; } } #footer .mobile .level_1 li { font-size: 1.25em!important; } #footer .mobile .level_2 li { font-size: 0.95em!important; } /* @media screen and (min-width: 599px) { .ios.safari #footer .mobile .level_1 li { font-size: inherit!important; } .ios.safari #footer .mobile .level_2 li { font-size: inherit!important; } .ios.safari #footer .level_1 div.social { font-size: 1.6em!important; } } */ @media screen and (min-width: 736px) { .ios.safari #footer .level_1 div.social { font-size: 1.3em; } } #footer .mobile .level_1 li a { color: #000; } #footer .mobile .level_2 li a { color: #6a6b6b; } #footer .mobile button { margin: 0; padding: 0; background: inherit; border: inherit; font: inherit; outline: none; width: 100%; display: block; text-align: left; color: inherit; cursor: pointer; } #footer .mobile [data-control], #footer .mobile [data-content] > * { border-bottom: 1px solid #a3a5a6; padding: 10px 0 10px 0; } #footer .mobile ul.level_2 li:first-child { margin-top: 8px; } #footer .mobile ul.level_2 li:last-child { margin-bottom: 14px; } #footer .mobile [data-content] > * { border-bottom: none; padding: 2px 10px; } #footer .mobile [data-accordion] { line-height: 1; } #footer .mobile [data-accordion] > [data-control]:after { content: ""; position: absolute; right: 10px; top: 12px; font-size: 25px; font-weight: 200; color: #444; height: 15px; width: 24px; background: url('../../files/hydrobar/images/ico-down.png') center center no-repeat; background-size: 50%; } /* Footer - Adress Styling ------------------------------------------------------------------- */ .adress { text-align: center; } .adress strong { color: #005286; } .adress p, .adress a { color: #333!important; line-height: 1.3em !important; font-size: 1em !important; margin: inherit !important; } .adress a:hover { text-decoration: underline; } /* Media queries @media screen and (min-width: 599px) { .safari.mobile .adress { font-size: inherit; } } @media screen and (min-width: 736px) { .safari.mobile .adress { font-size: 0.65em; } } */ /* Footer - CustomNav styling ------------------------------------------------------------------- */ #footer .copyright { display: inline-block; float: left; padding: 20px 0; width: 40%; } #footer .mod_customnav { position: relative; z-index: 1; min-height: 2px; margin: 20px 0; padding: 0; float: right; } #footer .mod_customnav li { display: inline; padding: 0 15px; } #footer .mod_customnav li:last-child { display: inline; padding: 0 0 0 15px; } #footer .mod_customnav ul.level_1 { font-size: 1em; } #footer .mod_customnav li a { color: #6a6b6b; } #footer .mod_customnav li a:hover { color: #6a6b6b; text-decoration: underline; } /* Media queries */ @media screen and (max-width: 410px){ #footer .mod_customnav { border: inherit!important; margin-top: 10px!important; padding: 0; } #footer .mod_customnav ul { float: none!important; } #footer .mod_customnav li, #footer .mod_customnav li:first-child, #footer .mod_customnav li:last-child { padding: 8px 0 6px 0!important; display: block; border-top: 1px solid #a3a5a6; } #footer .mod_customnav li a { display: block; width: 100%; } } @media screen and (max-width: 767px){ #footer .copyright { width: inherit; padding: 20px 0 0 0; } #footer .copyright, #footer .mod_customnav { float: none; } #footer .mod_customnav ul { float: right; } #footer .mod_customnav { margin-top: 10px; padding-top: 10px; border-top: 1px solid #a3a5a6; } #footer .mod_customnav li { padding: 0 10px;} #footer .mod_customnav li:first-child { padding: 0 10px 0 0; } #footer .mod_customnav li:last-child { padding: 0 0 0 10px; } } /* Menu-Buttons ------------------------------------------------------------------- */ .menubar { display: inline-block; float: right; margin-top: 24px; } .menubar:after { clear: both; } button.btn-menu span, button.btn-search span, button.btn-shop span, button.btn-request span, button.btn-close span { display: inline-block; padding: 0px 8px 8px 4px; font-size: 1.4em!important; color: #005387; vertical-align: bottom; font-family: 'DINLight', Helvetica, Arial, sans-serif!important; } /* Media queries */ @media screen and (max-width: 340px) { button.btn-close span { display: none; } } /*@media screen and (max-width: 380px) { button.btn-search, button.btn-shop { display: none; } } */ @media screen and (max-width: 340px) { button.btn-search, button.btn-shop { display: none; } } @media screen and (max-width: 380px) { button.btn-search { display: none; } } /* before 599px and font-size 0.85em*/ @media screen and (max-width: 680px) { button.btn-menu span, button.btn-search span, button.btn-shop span, button.btn-request span { display: none; } button.btn-menu, button.btn-search, button.btn-shop { padding: 0; } button.btn-request { padding: 0 6px; } .safari.mobile button.btn-menu, .safari.mobile button.btn-search, .safari.mobile button.btn-shop { padding: 0 2px; } .safari.mobile button.btn-request { padding: 0 6px; font-size: 0.85em; vertical-align: bottom; } } @media screen and (max-width: 740px) { .safari.mobile button.btn-menu span, .safari.mobile button.btn-search span, .safari.mobile button.btn-shop span, .safari.mobile button.btn-request span { font-size: 1.6em!important; } } @media screen and (max-width: 768px) { button.btn-menu span, button.btn-search span, button.btn-shop span, button.btn-request span { padding: 0px 8px 4px 4px; } } button.btn-close span { padding: 3px 14px 5px 4px!important; } button.btn-menu, button.btn-search, button.btn-shop, button.btn-request, button.btn-close { border: none; background: none; cursor: pointer; } #menuzone, #searchzone, #shopzone { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); } .popup_visible #menuzone, .popup_visible #searchzone, .popup_visible #shopzone { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } /* Overlay content styling ------------------------------------------------------------------- */ #menuzone_wrapper, #searchzone_wrapper, #shopzone_wrapper { position: absolute!important; overflow: hidden!important; height: auto!important; } #menuzone, #searchzone, #shopzone { vertical-align: top!important; position: relative; } #menuzone .container, #searchzone .container, #shopzone .container { display: block!important; } #menuzone .container:before, #menuzone .container:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #menuzone .container .logo, #menuzone .container .headerfield, #searchzone .container .logo, #searchzone .container .headerfield, #shopzone .container .logo, #shopzone .container .headerfield, #request .inside .headerfield { display: inline-block; } .headerfield a, .headerfield span { font-size: 1.2em; font-weight: 400; line-height: 1.5em; color: #595959; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } .headerfield h1, .headerfield div.h1, .headerfield h2, .headerfield h3 { font-weight: 400; font-family: 'DINRegular', Helvetica, Arial, sans-serif; letter-spacing: -.005em; font-size: 2.0em; } #menuzone .container .btn-close, #searchzone .container .btn-close, #shopzone .container .btn-close, #request .inside .btn-close { position: absolute; right: 22px; top: 26px; display: block; } /* Overlay navigation container ------------------------------------------------------------------- */ #menuzone .container, #searchzone .container, #shopzone .container { max-width: 1100px; margin: 0 6% 0 6%; } #searchzone, #shopzone { width: 98%; max-width: 1100px; } /* Media queries */ @media screen and (max-width: 980px) { #menuzone .container, #searchzone .container, #shopzone .container { margin: 0 3% 0 3%; } } /* Main navigation ------------------------------------------------------------------- */ #menuzone .container .mod_navigation { margin: 50px auto 0 auto; } #menuzone .level_1 li { position: relative; line-height: 1.7em; } #menuzone li { list-style-type: none; margin-bottom: 40px; } #menuzone .mod_navigation li { float: left; width: 33%; font-size: 1.4em; font-weight: 400; font-family: 'DINRegular', Helvetica, Arial, sans-serif; position: relative; } .ios.safari #menuzone .mod_navigation li { font-size: 1.4em; } .ios.safari #menuzone .mod_navigation li li { font-size: 1em; } /* Menu icons as background files */ #menuzone .mod_navigation li svg { position: absolute; top: 0; left: 0; width: 52px; height: 52px; display: block; } .mco-hydraulik-service { background: #005387 url("../../files/hydrobar/images/service.svg") no-repeat top center; background-size: 90%; } .mco-hydraulik-aggregate { background: #005387 url("../../files/hydrobar/images/aggregate.svg") no-repeat center center; background-size: 90%; } .mco-komponenten { background: #005387 url("../../files/hydrobar/images/components.svg") no-repeat center center; background-size: 90%; } .mco-seminare { background: #005387 url("../../files/hydrobar/images/seminare.svg") no-repeat center center; background-size: 90%; } .mco-downloads { background: #005387 url("../../files/hydrobar/images/downloads.svg") no-repeat top center; background-size: 90%; } .mco-profil { background: #005387 url("../../files/hydrobar/images/company.svg") no-repeat top center; background-size: 90%; } #menuzone .mod_navigation li a, #menuzone .mod_navigation li span { background-size: 50px 50px; color: #005387; display: table-cell; height: 60px; padding-left: 66px; vertical-align: middle; } #menuzone .mod_navigation li li { float: none; display: block; font-size: inherit; font-family: 'DINLight', Helvetica, Arial, sans-serif; width: auto; height: auto; margin-bottom: 0; } #menuzone .mod_navigation li li a, #menuzone .mod_navigation li li span { width: auto; height: auto; margin-bottom: 0; white-space: nowrap; font-size: 0.9em; } #menuzone .mod_navigation li li a:hover { color: #3c97cb; } /* Media queries */ @media screen and (max-width: 390px) { #menuzone .headerfield { display: none!important; } } @media screen and (max-width: 420px) { #request .inside .headerfield { display: none!important; } } @media screen and (max-width: 470px) { #menuzone h1 { font-size: 1.6em; } } @media screen and (max-width: 599px) { #request .inside .headerfield h1 { font-size: 1.6em; } } @media screen and (max-width: 640px) { #menuzone .mod_navigation { margin-left: 28px!important; } #menuzone .mod_navigation li { width: 98%!important; } } @media screen and (max-width: 960px) { #menuzone .mod_navigation li { width: 50%; } } /* Legal section of menu zone ------ */ #menuzone .mod_customnav { margin: 40px auto 0 auto; text-align: center; } #menuzone .mod_customnav li { font-size: inherit; display: inline-block; padding: 4px 15px; width: auto; float: none; } /* Media queries */ @media screen and (max-width: 430px) { #menuzone .mod_customnav li { margin-bottom: 0; } #menuzone .mod_customnav ul { float: none!important; width: 99%!important; } #menuzone .mod_customnav li, #menuzone .mod_customnav li:first-child, #menuzone .mod_customnav li:last-child { padding: 8px 0 6px 0!important; display: block; font-size: 1.1em; border-top: 1px solid #a3a5a6; } #menuzone .mod_customnav li:last-child { border-bottom: 1px solid #a3a5a6; margin-bottom: 20px; } #menuzone .mod_customnav li a { display: block; width: 99%!important; } } @media screen and (max-width: 599px) { #menuzone .mod_customnav li { padding: 4px 10px; } } /* Search function ------------------------------------------------------------------- */ #searchzone .mod_search { margin: 50px auto 0 auto; } #searchzone .mod_search .formbody { width: 90%; margin: 0 auto; } #searchzone .mod_search input.text { height: 42px; width: 90%; font-size: 1.4em; padding: 0 10px 0 10px; font-family: 'DINlight', Arial, Helvetica, sans-serif; color: #000; border: 1px solid #a9a9a9; -webkit-border-radius:0px; -webkit-appearance: none; float: left; } #searchzone .mod_search input.text:focus::-ms-input-placeholder{ color: transparent; } #searchzone .mod_search input.text::-ms-input-placeholder { color: #888; } #searchzone .mod_search input.text::-webkit-input-placeholder{ color: #888; } #searchzone .mod_search input.text:focus::-webkit-input-placeholder{ text-indent: -999px; color: transparent; } #searchzone .mod_search input.text:focus::-moz-placeholder{ color: transparent; } #searchzone .mod_search input.text::-moz-placeholder{ color: #888; } #searchzone .mod_search button.submit { margin-top: 1px; background-color: #005387; cursor: pointer; height: 40px; width: 42px; border: inherit; vertical-align: top; } /* Search button */ .mod_search .widget-submit #ctrl_submit_25 { background: url("../../files/hydrobar/images/ico-searchresult.svg") center center no-repeat; background-size: 80%; font-size: 0em; } #searchzone .mod_search button.submit:hover { background-color: #3c97cb; } /* Media queries */ @media screen and (max-width: 380px) { #searchzone .mod_search input.text { width: 34%!important; } } @media screen and (max-width: 390px) { #searchzone .headerfield { display: none!important; } } @media screen and (max-width: 470px) { #searchzone .mod_search input.text { max-width: 80%; } #searchzone h1 { font-size: 1.6em; } } @media screen and (max-width: 700px) { #searchzone .mod_search input.text { width: 84%!important; } } /* Search information service content ------------------------------------------------------------------- */ .ce_rsce_serviceinfo_boxes { margin: 50px auto; padding-bottom: 40%; overflow: auto; display: table; } .container .box_inside { margin: 0 auto; width: 56%; display: table-cell; text-align: center; } .icon-boxes-item { width: 220px!important; display: inline-block; margin: 0; font-size: 1.15em; font-family: 'DINRegular', Helvetica, Arial, sans-serif; text-align: left; } .icon-boxes-item h3 { margin: 10px 0 6px 0; font-weight: 400; } .icon-boxes-item p { line-height: 1.4em; font-family: 'DINLight', Helvetica, Arial, sans-serif; font-weight: 400; } .icon-boxes-item p a { margin-top: 2px; color: #005387; display: block; font-size: 1.1em; } .icon-boxes-item p a:hover { color: #3c97cb; } .icon-boxes-item span { text-align: center; display: block; } .icon-boxes-item:first-child { padding: 0 6% 0 0; border-right: 1px solid #b8b8b8; } .icon-boxes-item:last-child { padding: 0 0 0 6%; } /* Media queries */ @media screen and (max-width: 599px) { .icon-boxes-item { display: block; margin: 0 auto; } .icon-boxes-item:first-child, .icon-boxes-item:last-child { padding: 0; } .icon-boxes-item:first-child { border: 0; margin-bottom: 40px; } .icon-boxes-item:last-child { padding: 30px 0 0 0; border-top: 1px solid #b8b8b8; } } /* Search results ------------------------------------------------------------------- */ #header-suche .local-intro { padding: 4px 0 0 0!important; position: relative; } .ico-suchergebnis { margin-top: 23px; background: url("../../files/hydrobar/images/ico-searchresult.svg") center center no-repeat; background-size: 60%; } #suchergebnis .mod_search form { display: none; } #suchergebnis .mod_search { margin-left: 85px; } @media screen and (max-width: 980px) { #suchergebnis .mod_search { margin-left: 0; } } #suchergebnis .mod_search p.header { display: block; margin: 0 0 20px 0; font-size: 1.2em; line-height: 1.4em; font-weight: 400; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } #suchergebnis .mod_search div.even, #suchergebnis .mod_search div.odd { padding: 15px 0; border-bottom: 1px solid #cfcfcf; max-width: 58em; } #suchergebnis .mod_search h3 a { color: #005387; font-size: 1.25em; font-weight: 400; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } #suchergebnis .mod_search span.relevance { /* float: right; */ margin-left: 8px; font-size: 14px; color: #000; font-weight: 400; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } #suchergebnis .mod_search p.context { font-size: 1.15em; line-height: 1.4em; font-weight: 400; font-family: 'DINLight', Helvetica, Arial, sans-serif; } #suchergebnis .mod_search p.url { margin-top: 4px; } #suchergebnis .mod_search p.url a { color: #2c8dc5; font-weight: 400; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } #suchergebnis .mod_search h3 a:hover, #suchergebnis .mod_search p.url a:hover { text-decoration: underline; } /* Legal info ------------------------------------------------------------------- */ #header-impressum .local-intro { padding: 4px 0 0 0!important; position: relative; } .ico-impressum { margin-top: 23px; background: url("../../files/hydrobar/images/ico-legalinfo.svg") center center no-repeat; background-size: 60%; } /* Disclaimer ------------------------------------------------------------------- */ #header-haftungsausschluss .local-intro { padding: 4px 0 0 0!important; position: relative; } .ico-haftungsausschluss { margin-top: 23px; background: url("../../files/hydrobar/images/ico-disclaimer.svg") center center no-repeat; background-size: 60%; } /* Datenschutz ------------------------------------------------------------------- */ #header-datenschutz .local-intro { padding: 4px 0 0 0!important; position: relative; } .ico-datenschutz, .ico-datenschutzfuerlieferanten, .ico-datenschutzfuerkunden, .ico-datenschutzfuerbewerber { margin-top: 23px; margin-bottom: -5px; background: url("../../files/hydrobar/images/ico-privacy.svg") center center no-repeat; background-size: 60%; } #datenschutz a.link { display: inline-block; line-height: 1.4em; } #datenschutz a.link:after { display: inline-block; content: " "; background-image: url("../../files/hydrobar/images/ico-linkarrow.svg"); background-size: 20px 20px; vertical-align: top; height: 20px; width: 20px; margin-left: 4px; font-family: Arial, Helvetica, sans-serif; } #datenschutz .privacy-path { margin-bottom: 30px; border-bottom: 4px #ececec solid; } #datenschutz .privacy-path p:last-child { line-height: 0; } #datenschutz .privacy-path a.link { color: #3c97cb; } #datenschutz .privacy-path a.link:hover { color: #3c97cb; text-decoration: underline; } /* Datenschutz / back link */ #datenschutz-lieferanten p.back, #datenschutz-kunden p.back, #datenschutz-bewerber p.back { padding: 0 0 10px 0; margin: 0 0 20px 0; width: 100%; border-bottom: 4px solid #ececec; } #datenschutz-lieferanten span.privabck, #datenschutz-kunden span.privabck, #datenschutz-bewerber span.privabck { width: 20px; height: 20px; display: inline-block; vertical-align: top; background: url("../../files/hydrobar/images/reg-paddle-next.png") 0 -3px no-repeat; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -moz-transform: rotate(180deg); } #datenschutz-lieferanten .back a, #datenschutz-kunden .back a, #datenschutz-bewerber .back a { display: inline-block; font-size: 1.25em; font-weight: 400; color: #3c97cb; font-family: 'DINMedium', Helvetica, Arial, sans-serif; } #datenschutz-lieferanten p.back a:hover, #datenschutz-kunden p.back a:hover, #datenschutz-bewerber p.back a:hover { text-decoration: underline; } /* Shop switch content ------------------------------------------------------------------- */ #shopzone .shopselector { margin-top: 50px; } #shopzone .shopselector h1, #shopzone .shopselector div.h1 { color: #005387; font-size: 2em; font-weight: 400; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } #shopzone .shopselector h2, #shopzone .shopselector div.h2 { margin: 5px 0 10px 0; line-height: 1.3em; font-weight: 400; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } #shopzone .shopselector p { font-size: 1.2em; line-height: 1.4em; font-weight: 400; font-family: 'DINLight', Helvetica, Arial, sans-serif; } #shopzone .shophint { margin-top: 50px; width: 82%; line-height: 1.4em; } #shopzone .ce_button { margin-top: 20px; } #shopzone .ce_hyperlink { margin-top: 20px; border-top: 2px solid #e2e2e2; border-bottom: 2px solid #e2e2e2; } #shopzone .ce_hyperlink a { display: inline-block; vertical-align: top; padding: 9px 26px 5px 0; font-size: 1.2em; border: none; font-family: 'DINRegular', Helvetica, Arial, sans-serif; background: url("../../files/hydrobar/images/reg-paddle-next.png") center right no-repeat; } #shopzone .ce_hyperlink a:hover { color: #3071a9; } /* Shop image with Icon ---- */ #shopzone .ce_image { margin-bottom: 20px; max-height: 322px; overflow: hidden; position: relative; } #shopzone .ce_image img { width: 100%; } #shopzone .ce_image .icon { display: inline-block; width:74px; height: 68px; background: #005387; position: absolute; top:6px; left:6px; } #shopzone .ce_image .ico-pneushop, #shopzone .ce_image .ico-estore { color: #fff; font-size: 4em; line-height: 1; text-align: center; padding-top: 6px; } /* Media queries */ @media screen and (max-width: 390px) { #shopzone .headerfield { display: none!important; } } @media screen and (max-width: 470px) { #shopzone .headerfield h1 { font-size: 1.6em; } } /* Request page styling with form-elements ------------------------------------------------------------------- */ #request { padding-bottom: 6%; background: #f7f7f7; overflow: auto; min-height: 100vh; } #request .inside { max-width: 980px; margin: 0 auto; } @media screen and (max-width: 980px) { #request .inside { margin: 0 3%!important; } } @media screen and (max-width: 1180px) { #request .inside { margin: 0 4%; } } #request .ce_form { padding: 0 0 0 20px; } #request .inside .ce_form { margin-top: 50px; display: inline-block; float: left; } #request .inside .ce_text { margin-top: 50px; margin-left: 7.69231%; display: inline-block; float: left; padding-bottom: 10px; border-bottom: 1px solid #a9a9a9; } @media screen and (max-width: 420px) { #request .inside .ce_text { display: none; } #request .ce_form { padding: 0 0 0 10px!important; } } @media screen and (max-width: 599px) { #request .inside .ce_text { display: none; } #request .ce_form { padding: 0 0 0 20px; } } @media screen and (max-width: 846px) { #request .inside .ce_text { display: none; } #request .ce_form { padding: 0 0 0 60px; } } @media screen and (max-width: 940px) { #request .inside .ce_text { margin-left: 0; } } /* Form styling */ #request .inside .ce_form .widget { margin: 20px 0; max-width: 540px; } #request .inside .ce_form .widget-textarea { margin-bottom: 40px; } #request .inside .ce_form .widget-headline h3 { font-size: 1.6em; line-height: 0; font-weight: 400; color: #595959; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } #request .inside .ce_form fieldset { border: none; max-width: 540px; } #request .inside .ce_form fieldset .widget:first-child { width: 20%!important; margin: 0 8% 0 0; display: inline-block; } #request .inside .ce_form fieldset .widget:last-child { width: 68%!important; margin: 0; display: inline-block; } #request .inside .ce_form label { display: block; margin-bottom: 4px; font-size: 1.1em; font-weight: 400; color: #000; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } #request .inside .ce_form input { width: 90%; padding: 10px; font-size: 1.1em; font-family: 'DINRegular', Helvetica, Arial, sans-serif; border: 1px solid #a9a9a9; -webkit-border-radius:0px; -webkit-appearance: none; } #request .inside .ce_form h3.consent-head { margin-top: 40px; } #request .inside .ce_form input[type="checkbox"] { position: relative; vertical-align:top; width: 6%; -webkit-appearance: checkbox; transform:scale(1.5, 1.5); } .safari #request .inside .ce_form input[type="checkbox"], .safari.mobile #request .inside .ce_form input[type="checkbox"] { -webkit-appearance: checkbox; transform:scale(1.15, 1.15); } #request .inside .ce_form input[type="checkbox"]:after { display: inline-block; width: 42px; height: 42px; } #request .inside .ce_form .consent span label { position: relative; display: inline-block; line-height: 1.25em; max-width:86%; } @media screen and (max-width:450px){ #request .inside .ce_form h3.consent-head { font-size: 1.4em!important;} #request .inside .ce_form .consent span label { padding-left: 2%!important; } } /* Consent show/hide - Einwilligung ------------- */ #show-consent, #consent-info { display: none; } #show-consent:checked~#consent-info { display: block; } #request .inside .ce_form label.consent-more { text-decoration: none; color: #3c97cb; font-size: 1.2em; font-weight: 400; font-family: 'DINRegular', Helvetica, Arial, sans-serif; cursor: pointer; } #request .inside .ce_form label.consent-more:hover { color: #000101; } #consent-info { max-width: 500px; padding-right: 20px; } #consent-info p { margin: 15px 0; font-size: 1.05em; line-height: 1.25em; color: #000101; } /* Textarea and form elements -------------------- */ #request .inside .ce_form textarea { padding: 10px; resize: none; width: 90%; font-size: 1.1em; font-family: 'DINRegular', Helvetica, Arial, sans-serif; border: 1px solid #a9a9a9; -webkit-border-radius:0px; -webkit-appearance: none; } #request .inside .ce_form input:focus::-ms-input-placeholder{ color: transparent; } #request .inside .ce_form input::-ms-input-placeholder { color: #888; } #request .inside .ce_form input::-webkit-input-placeholder{ color: #888; } #request .inside .ce_form input:focus::-webkit-input-placeholder{ text-indent: -999px; color: transparent; } #request .inside .ce_form input:focus::-moz-placeholder{ color: transparent; } #request .inside .ce_form input::-moz-placeholder{ color: #888; } #request .inside .ce_form textarea:focus::-ms-input-placeholder{ color: transparent; } #request .inside .ce_form textarea::-ms-input-placeholder { color: #888; } #request .inside .ce_form textarea::-webkit-input-placeholder{ color: #888; } #request .inside .ce_form textarea:focus::-webkit-input-placeholder{ text-indent: -999px; color: transparent; } #request .inside .ce_form textarea:focus::-moz-placeholder{ color: transparent; } #request .inside .ce_form textarea::-moz-placeholder{ color: #888; } #request .inside .ce_form .submit_container { max-width: 540px; } #request .inside .ce_form .submit_container input { width: auto; } /*#request .inside .ce_form .submit_container input.submit */ #request .widget-submit button.submit { display: inline-block; background: #3c97cb; color: #fff; vertical-align: top; padding: 10px 14px 8px 14px; font-size: 1.2em; border: none; font-family: 'DINRegular', Helvetica, Arial, sans-serif; cursor: pointer; } /*#request .inside .ce_form .submit_container input.submit:hover*/ #request .widget-submit button.submit:hover { background: #3071a9; transition: all 0.3s ease 0s; } /* Adress styling */ #request .inside .ce_text h3 { font-size: 1.6em; line-height: 0; font-weight: 400; color: #595959; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } #request .inside .ce_text p, #request .inside .ce_text p.anschrift { font-size: 1.15em; line-height: 1.4em; font-weight: 400; font-family: 'DINLight', Helvetica, Arial, sans-serif; } #request .inside .ce_text p.anschrift { margin-top: 10px; } #request .inside .ce_text p strong { display:inline-block; margin-top: 20px; margin-bottom: 4px; font-weight: bold; color: #595959; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } #request .inside .ce_text.danke p strong { display:inherit; margin: 0!important; font-weight: 400; font-family: 'DINRegular', Helvetica, Arial, sans-serif!important; } #request .inside .ce_text p a { display: inline-block; font-size: 1.1em; color: #005387; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } #request .inside .ce_text.danke p a { font-size: 1em!important; } #request .inside .ce_text p span.icon { display: inline-block; max-width: 45px; font-size: 3em; line-height: 0; vertical-align: bottom; color: #005387; } #request .inside .ce_text p a.email { margin-left: 48px; } #request .inside .ce_text p a:hover { color: #3c97cb; } /* Success transmit */ #request .ce_text.danke { display: inline-block; /* padding-bottom: 200px; */ margin-left: 7%; max-width: 72%; } @media screen and (max-width: 599px) { #request .ce_text.danke { margin-left: 22px!important; max-width: 90%!important;} } @media screen and (max-width: 767px) { #request .ce_text.danke { margin-left: 7%; max-width: 80%;} } #request .ce_text.danke h1 { color: #005387; font-weight: 400; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } #request .ce_text.danke h3 { margin: 0 0 10px 0; font-size: 1.6em; line-height: 1.4em; font-weight: 400; color: #005387; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } #request .ce_text.danke p { margin: 10px 0 10px 0; font-size: 1.2em; line-height: 1.4em; font-weight: 400; font-family: 'DINLight', Helvetica, Arial, sans-serif; } /* Sub navigation - Chapternav ------------------------------------------------------------------- */ #chapternav .inside { background: rgba(242,242,242,1); overflow: hidden; padding: 4px 0; text-align: center; } #chapternav .mod_navigation { position: relative; overflow: hidden; } /* Media queries */ @media screen and (max-width: 980px) { #chapternav .mod_navigation { position: relative; overflow: visible; overflow-x: scroll; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; -ms-overflow-style: none; /* IE 10+ */ overflow: -moz-scrollbars-none; /* Firefox */ } #chapternav .mod_navigation { margin: 0 3%!important; } #chapternav .mod_navigation::-webkit-scrollbar { display: none; /* Safari and Chrome */ } li.chapternav-item.first { padding-left: 20px;} li.chapternav-paddle-next, li.chapternav-paddle-back { display: block!important; } .safari.mobile li.chapternav-paddle-next, .safari.mobile li.chapternav-paddle-back { display: none!important; } .safari.mobile li.chapternav-item.first { padding-left: 0!important; } } @media screen and (max-width: 1080px) { #chapternav .mod_navigation { position: relative; overflow: visible; overflow-x: scroll; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; -ms-overflow-style: none; /* IE 10+ */ overflow: -moz-scrollbars-none; /* Firefox */ } #chapternav .mod_navigation { margin: 0 4%; } #chapternav .mod_navigation::-webkit-scrollbar { display: none; /* Safari and Chrome */ } /* Hide scrollbar for IE, Edge and Firefox */ #chapternav .mod_navigation { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } li.chapternav-item.first { padding-left: 20px;} li.chapternav-paddle-next, li.chapternav-paddle-back { display: block!important; } .ios.safari li.chapternav-paddle-next, .ios.safari li.chapternav-paddle-back { display: none!important; } .ios.safari li.chapternav-item.first { padding-left: 0!important;} } .chapternav-wrapper:before, .chapternav-wrapper:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .chapternav-wrapper { display: table; margin: 0 auto; overflow: hidden; } li.chapternav-item { display: table-cell; vertical-align: top; margin: 0; padding: 0 1px; } li.chapternav-item a { display: block; font-size: 0.9em; line-height: 1.3em; color: #fff; width: 108px; height: 100px; padding: 8px 4px 0 4px; background: #005387; } /* Inline navigation paddles left and right */ li.chapternav-paddle-back { position: absolute; top: 0; left: 0; } li.chapternav-paddle-next { position: absolute; top: 0; right: 0; } li.chapternav-paddle-next, li.chapternav-paddle-back { display: none; } .ios.safari li.chapternav-paddle-next, .ios.safari li.chapternav-paddle-back { display: none!important; } li.chapternav-paddle-next input, li.chapternav-paddle-back input { width: 24px; height: 108px; background: #f2f2f2; border: none; cursor: pointer; } li.chapternav-paddle-back input.backBtn { text-indent: -999px; border-right: 1px solid #cfcfcf; background: #f2f2f2 url("../../files/hydrobar/images/btn-paddle-back.svg") left center no-repeat; } li.chapternav-paddle-next input.nextBtn { text-indent: -999px; border-left: 1px solid #cfcfcf; background: #f2f2f2 url("../../files/hydrobar/images/btn-paddle-next.svg") left center no-repeat; } .safari.webkit li.chapternav-paddle-back input.backBtn { background: #f2f2f2 url("../../files/hydrobar/images/btn-paddle-back.png") left center no-repeat; } .safari.webkit li.chapternav-paddle-next input.nextBtn { background: #f2f2f2 url("../../files/hydrobar/images/btn-paddle-next.png") left center no-repeat; } li.chapternav-paddle-next input:focus, li.chapternav-paddle-back input:focus { outline: none; } /* Icon handling of definitions in hydroicon.css */ li.chapternav-item a i { display: block; font-size: 5em; } li.chapternav-item a i[class^="ico-"], li.chapternav-item a i[class*=" ico-"] { padding: 8px 0; } li.chapternav-item a i.ico-planung-konstruktion, li.chapternav-item a i.ico-aggregate--anlagenbau, li.chapternav-item a i.ico-vorschriften-gesetze { padding: 24px 0; line-height: 0; } li.chapternav-item a i.ico-hydraulikdruckspeicher, li.chapternav-item a i.ico-hydraulikzylinderkaufen, li.chapternav-item a i.ico-hydraulikschlauchservice, li.chapternav-item a i.ico-boschrexrothhydraulikservice, li.chapternav-item a i.ico-iot-aggregatecytropac-cytrobox { padding: 28px 0; line-height: 0; } li.chapternav-item a i.ico-hydac-druckspeicher-blasenspeicher-service { display: none; } /* Sub navigation - Localnav ------------------------------------------------------------------- */ #localnav .local-intro { padding: 4px 0; position: relative; } /* Icon and title zone */ #localnav .local-icon { display: inline-block; color: #fff; width: 81px; height: 76px; background: #005387; text-align: center; } #localnav .local-icon .icon { display: block; padding-top: 38px; font-size: 4em; line-height: 0; vertical-align: center; } .local-icon i.ico-aggregate-anlagenbau { padding-top: 35px!important; } #header-sicherheitsdaten .local-icon .icon { padding-top: 36px!important; } #localnav .local-intro h3, #localnav .local-intro div.h3 { display: inline-block; font-size: 2em; font-weight: 400; color: #005387; font-family: 'DINRegular', Helvetica, Arial, sans-serif; vertical-align: top; padding: 30px 0 0 30px; white-space: nowrap!important; } /* Localnav loc_navigation zone */ #localnav .loc-menu { position: absolute; top: 0; right: 0; margin: 30px 0 0 0; } #localnav .loc-menu ul { display: block; list-style-type: none; } .loc-menu li.local-item { float: left; } .loc-menu li.local-item a.more { padding: 9px 10px; } .loc-menu li.local-item button.globalBtn { margin-left: 10px; } .loc-menu .local-item a { display: inline-block; vertical-align: bottom; font-size: 1.3em; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } .loc-menu .local-item a:hover, .loc-menu .local-item a:active { text-decoration: underline; } /* Fixed position on scroll */ .fixed-header { position: fixed; top: 0; left: 0; width: 100%; z-index:2; } #localnav.fixed-header { margin-top: 0; background: #fff; } #localnav.fixed-header .inside { /* padding-top: 8px; */ border-top: 8px solid #3c97cb; } /* Media queries */ @media screen and (max-width: 400px) { #localnav .local-intro { padding: 4px 0 0 0!important; text-align: center; } #localnav .loc-menu { margin: 4px 0!important; text-align:center!important; } #localnav .loc-menu ul { display: block; width: 100%; } .loc-menu li.local-item { display: block; float: none; border-bottom: 1px solid #cfcfcf; } .loc-menu li.local-item:last-child { border: none; margin-top: 4px; } .loc-menu li.local-item button.globalBtn { margin-left: 0!important; } } @media screen and (max-width: 480px) { #localnav .local-intro h3 { font-size: 1.8em; padding: 20px 0 16px 10px!important; } .loc-menu .local-item a { font-size: 1.1em; } .loc-menu li.local-item button.globalBtn { margin-left: 8px; } } @media screen and (max-width: 599px) { #localnav .local-icon { display: none; } #localnav .local-intro h3 { padding: 30px 0 16px 0; } } @media screen and (max-width: 768px) { #localnav .loc-menu { position: relative; top: inherit; right: inherit; margin: 0; padding: 6px 0 0 0; width: 100%; text-align: right; border-top: 1px solid #cfcfcf; } #localnav .loc-menu ul { display:inline-block; } } /* Global Button styling ------------------------------------------------------------------- */ button.globalBtn { display: inline-block; background: #3c97cb; color: #fff; vertical-align: top; padding: 7px 14px 5px 14px; font-size: 1em; border: none; font-family: 'DINRegular', Helvetica, Arial, sans-serif; cursor: pointer; } button.globalBtn:hover { background: #3071a9; transition: all 0.3s ease 0s; } .request button.globalBtn { margin-left: 5px; } .more button.globalBtn { font-size: 1.2em; padding: 10px 12px 8px 12px; } /* Dialog widget > Touch strip ------------------------------------------------------------------- */ .dialog_widget { padding: 14px 0 14px 0; display: table; } .dialog_widget-item { display: table-cell; } .dialog_widget-item:first-child { padding-right: 30px; border-right: 1px solid #b8b8b8; } .dialog_widget-item:last-child { padding-left: 16px; } .dialog_widget-item a { font-size: 1.15em!important; display: inline-block; color: #333; font-family: 'DINRegular', Helvetica, Arial, sans-serif; vertical-align: top; padding-top: 4px; } .dialog_widget-item a:hover > span, .dialog_widget-item a:focus > span { color: #3c97cb; } .dialog_widget-item span { display: block; font-size: 20px; color: #005387; line-height: 1.4em; } .dialog_widget .ico-phone:before, .dialog_widget .ico-emergency:before, .dialog_widget .ico-dialog:before { font-size: 3.5em; vertical-align: top; color: #005387; } /* Media queries */ @media screen and (max-width: 569px) { .dialog_widget { margin: 0 auto; padding: 14px 0 5px 0; } .dialog_widget-item { display: block; } .dialog_widget-item:first-child { padding: 10px; border: 0; } .dialog_widget-item:last-child { padding: 10px; border-top: 1px solid #b8b8b8; } } @media screen and (max-width: 910px) { .dialog_widget { margin: 0 auto; } } /* klicktipp Widget > Touch strip ------------------------------------------------------------------- */ #slideout { position: absolute; bottom: -8px; right: 0; width: 280px; padding: 14px 10px 10px 10px; display: block; background: #005387; border-bottom: 8px solid #3c97cb; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; } #slideout label { width: 100%; vertical-align: middle; display: inline-block; color: #fff; font-size: 1.15em; line-height: 1.2em; } #slideout label i { float: right; vertical-align: top; display: inline; } /* tabslideout handling */ #slideout-tab { position: relative; bottom: 0; right: 0; color: #fff; cursor:pointer; } #slideout-inner { position: absolute; bottom: -344px; /* -388px; */ right: 0px; background: #cbedf6; border: 3px solid #005387; width: 274px; padding: 14px 10px 10px 10px; height: 306px; /* 350px; */ cursor:auto; } #showblock:checked + #slideout{bottom: 336px; /*380px;*/ } #showblock{display:none;} #close-tab { position: absolute; top: 10px; right: 6px; cursor:pointer; } #close-tab i { font-size: 0.6em; font-weight: bold; } /* Font styling */ #slideout-inner h3 { margin-bottom: 4px; font-size: 1.4em; line-height: 1.25em; color: #005387; } #slideout-inner p { font-size: 1.1em; line-height: 1.4em; color: #000; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } /* Form styling */ .ktv-image { display: block; margin-top: 4px; } .ktv2-form-element-textfield { width: 98%; height: 38px; display: block; background: #fff; font-size: 1.15em; color: #666; border: 1px solid #a9a9a9; text-align:center; } .ktv2-form-element-textfield:focus::-ms-input-placeholder{ color: transparent; } .ktv2-form-element-textfield::-ms-input-placeholder { color: #666; } .ktv2-form-element-textfield::-webkit-input-placeholder{ color: #999; } .ktv2-form-element-textfield:focus::-webkit-input-placeholder{ text-indent: -999px; color: transparent; } .ktv2-form-element-textfield:focus::-moz-placeholder{ color: transparent; } .ktv2-form-element-textfield::-moz-placeholder{ color: #666; } .ktv2-submit-element-button { margin-top: 4px; width: 98%; height: 38px; display: block; background: #ea9213; border: 1px solid #a9a9a9; cursor:pointer; } .ktv2-submit-element-button.button-image { background: #ea9213 url("../../files/hydrobar/images/btn-ktv-submit.svg") top center no-repeat; } .ktv2-submit-element-button.more-image { background: #ea9213 url("../../files/hydrobar/images/btn-ktv-submit-more.svg") top center no-repeat; } input.ktv2-submit-element-button { -webkit-border-radius:0px; -webkit-appearance: none; } input.ktv2-submit-element-button:hover, input.ktv2-submit-element-button:focus { background: #ff7118 url("../../files/hydrobar/images/btn-ktv-submit.svg") top center no-repeat; } input.ktv2-submit-element-button.more-image:hover, input.ktv2-submit-element-button.more-image:focus { background: #ff7118 url("../../files/hydrobar/images/btn-ktv-submit-more.svg") top center no-repeat; } /* Media queries */ @media screen and (max-width: 910px) { #slideout { position: inherit; margin: 0 auto; } } /* Callya widget - Global page head ------------------------------------------------------------------- */ .callya_widget { position: absolute; right: 0; bottom: 0; } .callya-number { display: inline-block; height:43px; padding: 0 20px 0 10px; margin: 0; vertical-align: top; background: #ececec url("../../files/hydrobar/images/callyarrow.png") top right no-repeat; } .callya-number .lable { display: block; color: #56534f; font-size: 1em; margin: 5px 0 2px 0; font-weight: 400; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } .callya-number a.value-no { color: #005387; font-size: 18px; line-height: 1em; font-weight: 400; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } .callya-number a.value-no:hover, .callya-number a.value-no:focus, .callya-number a.value-no:active { color: #3c97cb; text-decoration: none; } .callya-button { display: inline-block; width: 43px; height: 43px; margin: 0 0 0 -4px; padding: 0; line-height: 0; } .callya-button a.value-call { display: block; width: 43px; height: 43px; vertical-align: bottom; background: #005387 url("../../files/hydrobar/images/ico-callya.svg") top center no-repeat; } .mac.safari.webkit .callya-button a.value-call { display: block; width: 43px; height: 43px; vertical-align: bottom; background: #005387 url("../../files/hydrobar/images/ico-callya.png") top center no-repeat!important; } @media screen and (max-width: 390px) { .callya-number { padding: 0 10px 0 10px; background: #ececec; } .callya-number a.value-no { display: none; } .callya-button a.value-call:hover, .callya-button a.value-call:focus, .callya-button a.value-call:active { background: #3c97cb url("../../files/hydrobar/images/ico-callya.svg") top center no-repeat; } } /* Slider Startpage ------------------------------------------------------------------- */ .mod_rocksolid_slider { height: 544px; max-height: 544px; width: 100%; background-color: #ececec; text-align: center; } .mod_rocksolid_slider .ce_text h1, .mod_rocksolid_slider .ce_slidertext div.h1 { font-size: 3em; line-height: 1.05em; font-weight:400; margin-bottom: 4px; color: #005387; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } .ce_slidertext.hwh div.h1 { color: #fff!important; } .mod_rocksolid_slider .ce_text h2, .mod_rocksolid_slider .ce_slidertext div.h2 { font-size: 2em; line-height: 1.15em; font-weight:400; color: #595959; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } .mod_rocksolid_slider .ce_slidertext a.more, .mod_rocksolid_slider .ce_slidertext span.more { margin-top: 30px; /* margin-left: 84px; */ display: inline-block; font-size: 1.4em; font-weight: 400; /*color: #3c97cb;*/ font-family: 'DINMedium', Helvetica, Arial, sans-serif; /* -- Button -- */ color: #fff; background: #e38b0c; padding: 12px 8px 8px 12px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; } .mod_rocksolid_slider .ce_slidertext a.more:hover, .mod_rocksolid_slider .ce_slidertext span.more:hover, .mod_rocksolid_slider .ce_slidertext a.more:active, .mod_rocksolid_slider .ce_slidertext span.more:active { /* text-decoration: underline; */ background: #d4830e; transition: all 0.3s ease 0s; } .mod_rocksolid_slider .ce_slidertext i.ico-linkarrow { width: 20px; height: 20px; display: inline-block; vertical-align: top; background: url("../../files/hydrobar/images/ico-linkarrow-sld.svg") top center no-repeat; } .mod_rocksolid_slider .ce_slidertext .new-label { float: right; margin-top: 20px; margin-left: -84px; display: inline-block; width: 84px; height: 40px; vertical-align: bottom; background-size: 40px 84px; background: #3c97cb url("../../files/hydrobar/images/lbl-new.svg") center center no-repeat; } .mac.safari.webkit .mod_rocksolid_slider .ce_slidertext .new-label { background: #3c97cb url("../../files/hydrobar/images/lbl-new.png") center center no-repeat!important; } .mod_rocksolid_slider .ce_slidertext .new-label:after { clear: right; } @media screen and (max-width: 420px) { .mod_rocksolid_slider .ce_text h1, .mod_rocksolid_slider .ce_slidertext h1, .mod_rocksolid_slider .ce_text div.h1, .mod_rocksolid_slider .ce_slidertext div.h1 { font-size: 2.8em; } .mod_rocksolid_slider .ce_text h2, .mod_rocksolid_slider .ce_slidertext h2, .mod_rocksolid_slider .ce_text div.h2, .mod_rocksolid_slider .ce_slidertext div.h2 { font-size: 1.8em; } .mod_rocksolid_slider .ce_slidertext .new-label { float: none; display: block; line-height: 4em; margin: 15px auto; } } .rsts-skin-default .rsts-nav { position: absolute; left: 0; right: 0; width: 100%; bottom: 12px; text-align: center; } .rsts-skin-default .rsts-nav-bullets a { display: inline-block; width: 40px; height: 3px; overflow: hidden; margin: 12px 4px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; outline: none; text-align: left; text-indent: -999px; background-color: #fff; background-color: rgba(207,207,207,1); -webkit-background-clip: padding; -moz-background-clip: padding; background-clip: padding-box; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .rsts-skin-default .rsts-nav-bullets a:hover, .rsts-skin-default .rsts-nav-bullets a.active { background-color: #005387; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } /* Promotion Teaser Startpage ------------------------------------------------------------------- */ .promotion-teaser-row { margin: 4px 0 4px 0; overflow: hidden; } .promotion-teaser-row:before, .promotion-teaser-row:after { content: ' '; display: table; } .promotion-item { display: inline-block; width: 25%; height: 242px; text-align: center; background: #ececec; position: relative; margin: 0; padding: 0; float: left; min-height: 2px; border-right: 2px solid #fff; box-sizing: border-box; } .promotion-item:last-child { border: 0; } /* Picture handler */ figure.promotions-item-image { width: 100%; text-align: center; overflow: hidden; } .promotions-item-image img{ max-width: inherit; position: relative; left: 40%; transform: translate(-40%,0) } /* Picture handler ie8 */ .no-csstransforms figure.promotions-item-image img { left: 100%; /* move the whole width of the image to the right */ margin-left: -200%; /* magic! */ } /* Promotionbox content styling */ .promo-txt { margin: 15px auto 0 auto; max-width: 288px; position: absolute; top: 0; left: 0; right: 0; padding: 0 3%; } .promo-txt h3 { font-size: 1.4em; line-height: 1.3em; color: #005387; } .promo-txt p { font-size: 1.25em; line-height: 1.3em; color: #000; } .start_promofact .ce_list ul { margin: 30px 0 0 0; padding: 0; list-style-type: none; } .start_promofact .ce_list li { display: block; padding-left: 30px; font-size: 1.25em; line-height: 1.4em; font-weight: 400; color: #000101; font-family: 'DINLight', Helvetica, Arial, sans-serif; } .start_promofact .ce_list li:before { content: ">"; margin-left: -30px; margin-right: 12px; vertical-align: top; } /* Media queries */ @media screen and (max-width: 736px) { .promotion-teaser-row::before, .promotion-teaser-row::after { width: 100%!important; } .promotion-item { display: block; float: none!important; width: auto!important; min-width: 0; margin-bottom: 4px; border: 0; } } @media screen and (max-width: 1080px) { .promotion-item { width: 50%; } .promotion-item:nth-child(2) { border: 0; margin-bottom: 4px; } .promotion-item:last-child { border: 0; } } /* Service-Strip - Overview pages ------------------------------------------------------------------- */ #main .ce_rsce_serviceinfo_boxes { display: block!important; } #main .servicestrip { margin-top: 20px!important; margin-bottom: 20px!important; padding: 0 0 20px 0; border-bottom: 8px solid #ececec; } #main .icon-boxes-item { border: 0; padding: 0 4% 0 0; position: relative; } #main .icon-boxes-item:last-child { padding-right: 0!important; } #main .box-content { position: relative; text-align: left; width: 205px; display: inline-block; float: left; } /* Text styling */ #main .icon-boxes-item h3 { font-size: 1.15em; line-height: 1.3em; } #main .icon-boxes-item p { font-size: 1.05em; } /* Media queries */ @media screen and (max-width: 599px) { #main .ce_rsce_serviceinfo_boxes { display: table!important; width: 94%!important; } #main .ce_rsce_serviceinfo_boxes > .icon-boxes-item { width: auto!important; display: block; } #main .icon-boxes-item { padding: 0!important; float: none!important; } #main .icon-boxes-item .box-content { padding: 0!important; float: none!important; display: block; margin: 0 auto; } } @media screen and (max-width: 1060px) { #main .icon-boxes-item { padding-right: 0!important; width: 50%!important; float: left; } #main .icon-boxes-item .box-content { padding: 0 8%; } #main .icon-boxes-item:nth-child(1) > .box-content, #main .icon-boxes-item:nth-child(3) > .box-content { float: right; padding: 0 8%; } } @media screen and (max-width: 1180px) { #main .icon-boxes-item { padding: 0 1% 0 0; } #main .icon-boxes-item:last-child { padding-right: 0!important; } } /* Contentpanels - Main page ------------------------------------------------------------------- */ #main .contentpanel { margin-top: 8px!important; background: #ececec; height: 456px; position: relative; } #main .contentpanel.first { margin-top: 7px!important; } #main .contentsection { /* position: relative; */ position: absolute; top: 0; right: 0; bottom: 0; left: 0; } #main .contentsection .contentbox { width: 364px; } #main .contentsection .contentbox.txtmdl { width: inherit!important; text-align: center; } /* Picture handler */ #main .contentpanel figure { width: 100%; max-height: 456px; text-align: center; overflow: hidden; } #main .panelimage img{ max-width: inherit; position: relative; left: 40%; transform: translate(-40%,0); } /* Picture handler ie8 */ .no-csstransforms #main .contentpanel figure.panelimage img { left: 100%; /* move the whole width of the image to the right */ margin-left: -200%; /* magic! */ } @media screen and (max-width: 599px) { #main .panelimage img { padding-top:15%; left:38%!important; } #main .nopad .panelimage img { padding-top:0!important; left:52%!important; } } @media screen and (max-width: 740px) { #main .panelimage img{ left:43%; transform: translate(-64%,0)!important; } } @media screen and (max-width: 980px) { #main .panelimage img{ transform: translate(-54%,0)!important; } } @media screen and (max-width: 1180px) { #main .panelimage img{ transform: translate(-45%,0); } } #main .contentbox.txtlft { position: absolute; top: 24px; left: 74px; padding-top: 20px; } #main .contentbox.txtrgt { position: absolute; top: 24px; right: 35px; padding-top: 20px; } #main .contentbox.txtmdl { position: absolute; top: 24px; right: 0; left: 0; padding-top: 20px; } #main .contentbox h1 { font-size: 2.65em; line-height: 1.1em; font-weight: 400; margin-bottom: 4px; color: #005387; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } #main .contentbox p { font-size: 1.8em; line-height: 1.2em; font-weight: 400; color: #595959; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } @media screen and (max-width: 420px) { #main .contentbox h1 { font-size: 2.45em; } #main .contentbox p { font-size: 1.7em; } } #main .link-wrapper { margin-top: 20px; } #main .link-wrapper a { display: inline-block; width: 49%; font-size: 1.4em; font-weight: 400; color: #3c97cb; font-family: 'DINMedium', Helvetica, Arial, sans-serif; } #main .link-wrapper a:hover, #main .link-wrapper a:focus { text-decoration: underline; } #main .link-wrapper .ico-linkarrow { width: 20px; height: 20px; display: inline-block; vertical-align: top; background: url("../../files/hydrobar/images/ico-linkarrow.svg") top center no-repeat; } #main .contentbox.txtmdl .link-wrapper { display: block; max-width: 340px; margin: 20px auto; } /* Media queries */ @media screen and (max-width: 738px) { #main .contentbox.txtlft { left: 0!important; right: 0!important; width: inherit!important; text-align: center; } #main .contentbox.txtrgt { left: 0!important; right: 0!important; width: inherit!important; text-align: center; } #main .contentbox.txtlft .link-wrapper, #main .contentbox.txtrgt .link-wrapper { display: block; max-width: 340px; margin: 20px auto; } #main .contentbox.txtlft, #main .contentbox.txtrgt, #main .contentbox.txtmdl { /* background: #ececec; */ background-color: rgba(236, 236, 236, 0.8) } } @media screen and (max-width: 599px) { #main .contentbox.txtlft .link-wrapper, #main .contentbox.txtrgt .link-wrapper { max-width: inherit!important; margin: 16px auto; } #main .link-wrapper a { margin-top: 4px; display: block; width: 100%; } } /* Content-Element - Main page ------------------------------------------------------------------- */ .centered-wrapper-inner { padding: 30px 30px; } .centered-wrapper-inner.-fullwidth { padding: 30px 2%; } @media screen and (max-width: 738px) { .centered-wrapper-inner, .centered-wrapper-inner.-fullwidth { padding: 30px 16px; } } @media screen and (max-width: 980px) { .centered-wrapper-inner.-fullwidth { padding: 30px 0%; } } @media screen and (max-width: 1180px) { .centered-wrapper-inner.-fullwidth { padding: 30px 1%!important; } } /* Font styles */ #main .rs-columns h1, #main .rs-column h1, #main .rs-columns div.h1, #main .rs-column div.h1, #main .ce_text h1, #main .ce_text div.h1 { margin-bottom: 10px; font-size: 2.3em; line-height: 1.1em; font-weight: 400; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } #main .rs-columns h2, #main .rs-column h3, #main .ce_text h2, #main .ce_text div.h2 { margin-bottom: 10px; font-size: 2em; line-height: 1.15em; font-weight: 400; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } #main .rs-columns h3, #main .rs-column h3, #main .ce_text h3 { margin: 14px 0; font-size: 1.6em; line-height: 1.2em; font-weight: 400; color: #005387; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } #main .rs-columns.centered h1, #main .rs-columns.centered h2, #main .rs-columns.centered h3 { text-align: center; } #main .ce_text p { margin: 15px 0; font-size: 1.25em; line-height: 1.4em; font-weight: 400; color: #000101; font-family: 'DINLight', Helvetica, Arial, sans-serif; } #main .ce_text.intro p { margin: 0!important; } /* Automatic Border styles */ .-border-top { border-top-color: #ececec; border-top-style: solid; } .-border-bottom { border-bottom-color: #ececec; border-bottom-style: solid; } /* Automatic Background colors */ .-standard-color { background-color: #ececec; } .-security-color { background-color: #f3c736; } .-highlight-color { background-color: #3c97cb; } .-color-inverted { color: #fff; } /* Notification */ .-notification { padding: 2px 14px 2px 14px; border: 2px dashed #89772c; background-color: #f3c736; } /* Defined Box heights */ .-small { min-height: 228px; } .-medium { min-height: 456px; } .-large { min-height: 544px; } /* Automatic Font switch styles for security */ #main .centered-wrapper.-security-color { border: 2px dashed #89772c; } #main .-security-color .rs-columns h3 { color: #000!important; } #main .-standard-color .rs-columns a.link, #main .-security-color .rs-columns a.link { margin-left: 4px; color: #2080b0!important; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } #main .-standard-color .rs-columns a.link:hover, #main .-standard-color .rs-columns a.link:active, #main .-security-color .rs-columns a.link:hover, #main .-security-color .rs-columns a.link:active { text-decoration:underline!important; } /* #main .-security-color .rs-columns a.link:after { content: ">"; margin-left: 6px; font-family: Arial, Helvetica, sans-serif; } */ #main .-standard-color .rs-columns a.link:after, #main .-security-color .rs-columns a.link:after { display: inline-block; content: " "; background-image: url("../../files/hydrobar/images/ico-linkarrow.svg"); background-size: 20px 20px; vertical-align: top; height: 20px; width: 20px; margin-left: 4px; font-family: Arial, Helvetica, sans-serif; } /* Picture element ce_image styling ------------------------------------------------------------------- */ #main .ce_text img, #main .ce_image img { width: 100%; } /* List bullets styling ------------------------------------------------------------------- */ #main .ce_list h1, #main .ce_list h2, #main .ce_list h3 { margin: 14px 0 0 0; font-size: 1.25em; line-height: 1.4em; font-weight: 400; color: #000101; font-family: 'DINMedium', Helvetica, Arial, sans-serif; } #main .ce_text ul, #main .ce_list ul { margin: 0; padding: 0; list-style-type: none; } #main .ce_text li, #main .ce_list li { font-size: 1.25em; line-height: 1.4em; font-weight: 400; color: #000101; font-family: 'DINLight', Helvetica, Arial, sans-serif; } #main .ce_text li, #main .ce_list li { display: block; padding-left: 30px; } #main .ce_text li:before, #main .ce_list li:before { content: ">"; margin-left: -30px; margin-right: 12px; vertical-align: top; } /* Kontakt styling - Main page ------------------------------------------------------------------- */ /* Erste Hilfe ---- */ #kontakt .first-aid .dialog_widget-item { padding: 0; } #kontakt .first-aid .dialog_widget-item:first-child { border: 0; } #kontakt .first-aid .dialog_widget { padding: 0; } #kontakt .first-aid .dialog_widget-item a { padding-top: 4px; } #kontakt .first-aid .dialog_widget-item span { padding-top: 2px; } @media screen and (max-width: 980px) { #kontakt .first-aid .dialog_widget { margin: 0; } } /* Dialog ---- */ #article-79 .ce_text span.icon { display: inline-block; float: left; vertical-align: top; padding-bottom: 10px; font-size: 2.7em; color: #005387; } #article-79 .dialog_widget-item:last-child { padding-left: 0!important; } #article-79 .dialog_widget-item:first-child { border-right: 0!important; } /* Öffnungszeiten ---- */ table.opentime { min-width: 250px; border-collapse: separate; border-spacing: 1px 0; } table.opentime td { font-size: 1.25em; line-height: 1.4em; font-weight: 400; color: #000101; font-family: 'DINLight', Helvetica, Arial, sans-serif; } table.opentime td:nth-child(even) { text-align: right; } table.opentime td { padding-top: 3px; border-bottom: 1px solid #d8dbdc; } #kontakt .ce_download { margin-left: 0; } #kontakt .ce_download .size { display: none; } /* Hero-Panel - Content-Element - Main page ------------------------------------------------------------------- */ #main .heropanel { margin-bottom: 4px!important; display: block; height: 540px; background-color: #ececec; position: relative; } /* Picture handler */ #main .heropanel figure { width: 100%; max-height: 540px; text-align: center; overflow: hidden; } #main .heroimage img{ max-width: inherit; position: relative; left: 40%; transform: translate(-40%,0); } /* Picture handler ie8 */ #main .contentpanel figure.heroimage img { left: 100%; /* move the whole width of the image to the right */ margin-left: -200%; /* magic! */ } @media screen and (max-width: 599px) { #main .heroimage img { padding-top:10%; left:5%!important; } #main .nopad .heroimage img { padding-top:0!important; left:52%!important; } } @media screen and (max-width: 768px) { #main .heroimage img{ padding-top:6%; left: 20%; } } @media screen and (max-width: 980px) { #main .heroimage img{ transform: translate(-41%,0)!important; } } #main .heropanel-inner { position: absolute; top: 0; left: 0; right: 0; } #main .heropanel h1, #main .heropanel h2, #main .heropanel h3 { font-size: 2.6em; line-height: 1.1em; font-weight: 400; color: #005387; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } #main .heropanel .swap { margin: 50px 20px 0 115px; padding-right: 8%; } /* Label */ #main .heropanel-inner .new-label { display: block; width: 84px; height: 40px; margin: 10px 0 0 115px; overflow: hidden; background-size: 40px 84px; background: #3c97cb url("../../files/hydrobar/images/lbl-new.svg") center center no-repeat; } .mac.safari.webkit #main .heropanel-inner .new-label { display: block; width: 84px; height: 40px; margin: 10px 0 0 115px; overflow: hidden; background-size: 40px 84px; background: #3c97cb url("../../files/hydrobar/images/lbl-new.png") center center no-repeat; } /* Media queries */ @media screen and ( max-width: 599px) { #main .heropanel .swap { margin: 30px 0 0 0!important; } #main .heropanel-inner { text-align: center; } #main .heropanel-inner .new-label { margin: 6px 0 0 0!important; } } @media screen and ( max-width: 768px) { #main .heropanel .swap { margin: 50px 40px 0 40px; } #main .heropanel-inner .new-label { margin: 6px 0 0 40px; } } @media screen and ( max-width: 980px) { #main .heropanel .swap { margin: 50px 20px 0 118px; padding-right: 0; } #main .heropanel-inner .new-label { margin: 6px 0 0 118px; } } /* Product lister - Content-Element - Main page ------------------------------------------------------------------- */ #main .ce_productlist .inside { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; /* overflow: auto; */ } #main .ce_productlist .inside:before { content: ""; display: table; } #main .ce_productlist .inside:after { clear: both; } #main .product-item { display: inline-block; position: relative; overflow: hidden; width: 334px; /* width: 30.544%; */ margin-right: 3.69231%; margin-top: 1.846155%; margin-bottom: 1.846155%; /* margin-top: 3.69231%; */ background-color: #ececec; height: 470px; box-sizing: border-box; } #main .-item-3, #main .-item-6, #main .-item-9, #main .-item-12, #main .-item-15, #main .-item-18, #main .-item-21, #main .-item-24, #main .-item-27, #main .-item-30 { margin-right: 0; } /* Headline style */ #main .ce_productlist .inside h1, #main .ce_productlist .inside h2, #main .ce_productlist .inside h3 { font-size: 1.6em; line-height: 1.2em; font-weight: 400; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } /* Product description text */ #main .product_text { position: absolute; bottom: 0; left: 0; right: 0; padding: 15px; } #main .product_text h4 { margin-bottom: 4px; font-size: 1.4em; line-height: 1.2em; font-weight: 400; color: #005387; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } #main .product_text p { font-size: 1.15em; line-height: 1.2em; font-weight: 400; color: #060606; font-family: 'DINLight', Helvetica, Arial, sans-serif; } /* File-Attachment styling */ #main a.product_attachment { display: inline-block; margin-top: 10px; font-size: 1.1em; font-weight: 400; color: #3c97cb; font-family: 'DINMedium', Helvetica, Arial, sans-serif; } #main a.product_attachment:hover, #main a.product_attachment:focus { text-decoration: underline; } #main a.product_attachment .ico-linkarrow { width: 15px; height: 15px; display: inline-block; vertical-align: top; background: url("../../files/hydrobar/images/ico-linkarrow.svg") top center no-repeat; } /* Buy CTA - button */ #main .product-item a.product_purchase { background: #c68706; /* blue #005387; /* 3c97cb; */ width: 86px; display: block; position: absolute; bottom: 11px; right: 2px; text-align: center; color: #fff; font-family: 'DINLight', Helvetica, Arial, sans-serif; font-weight: 400; font-size: 1.15em; padding: 6px 0 3px 0; } #main .product-item a.product_purchase:hover { background: #a27417; /* blue #023859; /* #de6113; */ transition: all 0.3s ease 0s; } #main .product-item a.product_purchase i { padding-right: 4px; } #main .product-item a.product_purchase i.btn-shop:before { font-size: 20px; color: #fff!important; vertical-align: top; margin-top: -1px; display: inline-block; } .chrome #main .product-item a.product_purchase { padding: 4px 0 4px 0; } /* Label */ #main .product-item .new-label { position: absolute; top: 15px; right:20px; display: block; width: 64px; height: 30px; margin: 6px 0 0 115px; background: #3c97cb url("../../files/hydrobar/images/lbl-new.svg") center center no-repeat; } .safari.webkit #main .product-item .new-label { width: 64px; height: 30px; background: #3c97cb url("../../files/hydrobar/images/item-new.png") center center no-repeat; } #main .product-item .top-label { position: absolute; top: 15px; right:20px; display: block; width: 64px; height: 30px; margin: 6px 0 0 115px; background: #1daea2 url("../../files/hydrobar/images/lbl-top.svg") center center no-repeat; } .safari.webkit #main .product-item .top-label { width: 64px; height: 30px; background: #1daea2 url("../../files/hydrobar/images/item-top.png") center center no-repeat; } /* Media queries */ @media screen and (max-width: 1180px) { #main .ce_productlist .inside h1, #main .ce_productlist .inside h2, #main .ce_productlist .inside h3 { margin-bottom: 10px; } #main .product_text, #main .ce_productlist .inside h1, #main .ce_productlist .inside h2, #main .ce_productlist .inside h3 { text-align: left; } #main .product-item { width: 47.89%; } #main .-item-3, #main .-item-6, #main .-item-9, #main .-item-12, #main .-item-15, #main .-item-18, #main .-item-21, #main .-item-24, #main .-item-27, #main .-item-30 { margin-right: 3.69231%; } #main .-item-2, #main .-item-4, #main .-item-6, #main .-item-8, #main .-item-10, #main .-item-12, #main .-item-14, #main .-item-16, #main .-item-18, #main .-item-20, #main .-item-22, #main .-item-24, #main .-item-26, #main .-item-28 { margin-right: 0!important; } #main .product-item .product_image { width: 334px; margin: 0 auto; } } /* @media screen and (max-width: 767px) { #main .product-item { width: 47.89%; } } */ @media screen and (max-width: 790px) { #main .ce_productlist .inside { text-align: center; overflow: hidden; } #main .product-item { width: 334px!important; } #main .ce_productlist [class^="-item-"], #main .ce_productlist [class*=" -item-"] { margin-right: 1.846155%!important; margin-left: 1.846155%!important; } #main .product-item .product_image { max-width: 100%; margin: 0 auto; } } @media screen and (max-width: 599px) { #main .ce_productlist .inside h1, #main .ce_productlist .inside h2, #main .ce_productlist .inside h3 { text-align: center; margin-bottom: 15px; } } @media screen and (max-width: 400px) { #main .ce_productlist .inside:before { display: block!important; margin: 0; } #main .product-item { display: block!important; margin: 15px auto 20px auto!important; width: 100%!important; } #main .ce_productlist [class^="-item-"], #main .ce_productlist [class*=" -item-"] { margin-left: 0!important; margin-right: 0!important; } #main .product-item a.product_purchase i { display: none!important; } } /* Aktuelles - News Lister styling ------------------------------------------------------------------- */ .mod_newslist, #aktuelles .ce_text { margin-left: 85px; max-width: 58em; } @media screen and (max-width: 980px) { .mod_newslist, #aktuelles .ce_text { margin-left: 0!important; } } .mod_newslist .layout_latest { position: relative; } .mod_newslist .featured { background-color: #eee; border: 1px solid #ccc; color: #777; display: inline-block; padding: 4px 6px 2px; font-size: 11px; position: relative; top: -12px; margin-left: 6px; } .mod_newslist .featured:before { content:"ANKÜNDIGUNG"; font-weight: 400; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } @media screen and (max-width: 599px) { .mod_newslist .featured { display: none; } } .mod_newslist div.even, .mod_newslist div.odd { padding: 15px 0; border-bottom: 1px solid #cfcfcf; } .mod_newslist h1 a, .mod_newslist h2 a, .mod_newslist h3 a { margin: 14px 0; font-size: 1.3em; line-height: 1.2em; font-weight: 400; color: #005387; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } .mod_newslist h1 a:hover, .mod_newslist h2 a:hover, .mod_newslist h3 a:hover { transition: all 0.2s ease-in 0.2s; /* explorer 10 */ -webkit-transition: all 0.2s ease-in 0.2s; /* chrome & safari */ -moz-transition: all 0.2s ease-in 0.2s; /* firefox */ -o-transition: all 0.2s ease-in 0.2s; /* opera */ color: #003556; } .mod_newslist p.info { margin: 8px 0; line-height: 1.4em; font-weight: 400; color: #9e9e9e; font-family: 'DINLight', Helvetica, Arial, sans-serif; } .mod_newslist .teaser p { font-size: 1.25em; line-height: 1.4em; font-weight: 400; color: #000101; font-family: 'DINLight', Helvetica, Arial, sans-serif; } .mod_newslist p.more { margin: 10px 0; } .mod_newslist p.more a { display: inline-block; font-size: 1.25em; font-weight: 400; color: #3c97cb; font-family: 'DINMedium', Helvetica, Arial, sans-serif; } .mod_newslist p.more a:hover { text-decoration: underline; } /* Aktuelles - News Teaser-Startpage styling ------------------------------------------------------------------- */ .strt-newsteaser .ce_button { float: right; } .strt-newsteaser .ce_button button.globalBtn { font-size: 0.9em!important; } #newsteaser.mod_newslist { clear: both; display: inline-block; width: 100%; margin-left: 0!important; max-width: inherit!important; } #newsteaser .layout_short { float: left; width: 28.20513%; border-top: 1px solid #cfcfcf; padding: 10px 0!important; } #newsteaser .layout_short.first, #newsteaser .layout_short.odd { margin-right: 7.69231%; } #newsteaser .layout_short.last { margin-right: 0!important; } #newsteaser.mod_newslist h1 { font-size: 2.15em; line-height: 1.1em; font-weight: 400; margin-bottom: 4px; color: #005387; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } #newsteaser .layout_short h2 { font-size: 1.2em; line-height: 1.1em; font-weight: 400; color: #005387; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } #newsteaser .layout_short .ce_text p { font-size: 1.25em; line-height: 1.4em; font-weight: 400; color: #000101; font-family: 'DINLight', Helvetica, Arial, sans-serif; } @media screen and (max-width: 800px) { #newsteaser .layout_short { float: none; width: 100%; border-top: 1px solid #cfcfcf; border-bottom: inherit!important; padding: 10px 0!important; } #newsteaser .layout_short.first, #newsteaser .layout_short.odd, #newsteaser .layout_short.last { margin-right: 0!important; } } /* Global pagination ------------------------------------------------------------------- */ .pagination { background: #ececec;} .pagination li { display: inline-block; } .pagination .next, .pagination .previous { display: inline-block; } .pagination a.btn-accup, .pagination a.btn-accdown, .pagination span.btn-accup, .pagination span.btn-accdown { font-size: 2.6em; margin-top:-2px; width: 38px; height: 38px; } .pagination .btn-accup { -webkit-transform: rotate(-90deg); /* Safari */ -moz-transform: rotate(-90deg); /* Firefox */ -ms-transform: rotate(-90deg); /* IE */ -o-transform: rotate(-90deg); /* Opera */ } .pagination .btn-accdown { -webkit-transform: rotate(-90deg); /* Safari */ -moz-transform: rotate(-90deg); /* Firefox */ -ms-transform: rotate(-90deg); /* IE */ -o-transform: rotate(-90deg); /* Opera */ } .pagination a.btn-accup, .pagination a.btn-accdown { color: #3c97cb; } .pagination a.btn-accup:hover, .pagination a.btn-accdown:hover { background-color: #3c97cb; color: #fff; } .pagination span.btn-accup, .pagination span.btn-accdown { color: #cfcfcf; } .pagination li.totalpage { float: right; margin: 10px 14px; } .pagination span.total { display: inline-block; vertical-align: top; font-size: 1.15em; line-height: 1; font-weight: 400; color: #868686; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } /* Aktuelles - News Reader styling ------------------------------------------------------------------- */ .mod_newsreader, #aktuelles .ce_text { margin-left: 85px; max-width: 58em; } @media screen and (max-width: 980px) { .mod_newsreader { margin-left: 0; } } /* Article styling */ .mod_newsreader h1 { margin: 14px 0 10px 0; font-size: 2.4em; line-height: 1em; font-weight: 400; color: #005387; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } .mod_newsreader h2, .mod_newsreader .ce_image h1, .mod_newsreader .ce_image h2, .mod_newsreader .ce_text h1, .mod_newsreader .ce_text h2 { margin: 10px 0; font-size: 2em!important; line-height: 1.15em; font-weight: 400; color: #595959; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } #artikel .mod_newsreader figure { margin-bottom: 20px; background: #ececec; } #artikel .mod_newsreader .ce_text h1, #artikel .mod_newsreader .ce_text h2, #artikel .mod_newsreader .ce_text h3 { margin: 10px 0; font-size: 1.6em!important; line-height: 1em; font-weight: 400; color: #595959; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } #artikel .mod_newsreader .ce_text p { margin: 15px 0; } .mod_newsreader p.info { margin: 8px 0 10px 0; line-height: 1.4em; font-weight: 400; color: #9e9e9e; font-family: 'DINLight', Helvetica, Arial, sans-serif; } .caption { margin: 0; padding: 8px; color: #000; font-style: italic; font-weight: 400; font-family: 'DINLight', Helvetica, Arial, sans-serif; } /* Newsreader Picture --- */ #artikel .layout_full img { width: 100%!important; } /* Hydro blog - Lister --- */ .layout_latest.blog div.blog_teaser p { font-size: 1.25em; line-height: 1.4em; font-weight: 400; color: #000101; font-family: 'DINLight', Helvetica, Arial, sans-serif; } /* Hydro blog - Post reader --- */ .mod_newsmenu { margin-left: 85px; max-width: 58em; } .mod_newsmenu ul li a { margin: 8px 0 10px 0; line-height: 1.4em; font-weight: 600; color: #3c97cb; font-family: 'DINLight', Helvetica, Arial, sans-serif; } .mod_newsmenu ul li a:hover { text-decoration: underline; } @media screen and (max-width: 980px) { .mod_newsmenu { margin: inherit!important; text-align: center!important; } } div.post .ce_text h1 { font-size: 2em!important; line-height: 1.15em; font-weight: 400; color: #595959; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } div.post .ce_text ul li p { font-size: 1em!important; } /* Hydro blog - Lister image --- */ .image_blog_container { display: block; margin-bottom: 20px; } .layout_full .post .ce_text figure.image_container { display: block; margin: 10px 0 20px 0!important; } .image_blog_container img.crop-center{ height: 315px; width: 100% !important; object-fit: cover; object-position: top center; } .layout_latest.blog h2 a:hover { text-decoration: underline; } /* Hydro blog - Metadata --- */ .ce_rsce_metablog { display: block; margin: 10px 0 20px 0; font-size: 1.2em!important; color: #6e6e6e; line-height: 1.4em; font-weight: 400; font-family: 'DINLight', Helvetica, Arial, sans-serif; } .ce_rsce_metablog span { display: inline-block; padding-right: 20px; } /* Hydro blog - Post sharing --- */ .layout_full div.share { margin: 15px 0; font-size: 1.25em; line-height: 1.4em; font-weight: 400; color: #000101; font-family: 'DINLight', Helvetica, Arial, sans-serif; } div.share p { display: block; padding-bottom: 8px; border-bottom: 1px solid silver; } div.share p span { font-size: 0.98em!important; color: #6e6e6e; } .layout_full div.share a { font-weight: 600; display: block; margin-top: 4px; color: #3c97cb; } .layout_full div.share a:hover { text-decoration: underline; } .layout_full div.share a span.ico-postshare { width: 20px; height: 20px; padding: 0 10px 0 0; margin-left: -4px; display: inline-block; vertical-align: top; background: url("../../files/hydrobar/images/ico-share.svg") top center no-repeat; } /* Attachement --- */ #artikel .enclosure { display: block; margin-top: 20px!important; } .enclosure .attach-header { font-weight: 400; color: #595959; font-family: 'DINLight', Helvetica, Arial, sans-serif; } .enclosure .attach-item { margin: 4px 0; padding: 4px 0; border-bottom: 1px solid #cfcfcf; } .enclosure i.ico-attachment { display: inline-block; width: 38px; height: 38px; background: url("../../files/hydrobar/images/ico-attach.svg") top center no-repeat; } .enclosure a { margin-left: 10px; padding: 12px 0; display: inline-block; vertical-align: top; font-size: 1.2em; font-weight: 400; color: #005387; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } .enclosure a:hover { text-decoration: underline; } .enclosure .size { margin-left: 10px; padding: 14px 0; display: inline-block; vertical-align: top; font-weight: 400; color: #595959; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } /* Artikel back link */ .mod_newsreader p.back { margin: 20px 0 0 0; } .mod_newsreader .back { padding: 0 0 20px 0; border-bottom: 8px solid #ececec; } .mod_newsreader i.ico-linkarrow { width: 20px; height: 20px; display: inline-block; vertical-align: top; background: url("../../files/hydrobar/images/ico-linkarrow.svg") 0 2px no-repeat; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -moz-transform: rotate(180deg); } .mod_newsreader p.back a { display: inline-block; font-size: 1.25em; font-weight: 400; color: #3c97cb; font-family: 'DINMedium', Helvetica, Arial, sans-serif; } .mod_newsreader p.back a:hover { text-decoration: underline; } /* Downloads styling ------------------------------------------------------------------- */ .ce_download, .ce_downloads { margin: 0 auto; padding: 5px; border-bottom: 6px solid #ececec; max-width: 62em; } .ce_download { padding-bottom: 0; } .ce_download, .ce_downloads { margin-bottom: 20px; } @media screen and (max-width: 980px) { .ce_download, .ce_downloads { margin-left: 0; } } .ce_download .file-item, .ce_downloads .file-item { padding: 6px 0; position: relative; border-top: 1px solid #cfcfcf; } .ce_download h1, .ce_download h2, .ce_download h3, .ce_downloads h1, .ce_downloads h2, .ce_downloads h3 { margin-bottom: 4px; font-size: 1.45em; line-height: 1.2em; font-weight: 400; color: #005387; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } .ce_download a, .ce_downloads a { display: inline-block; vertical-align: top; font-weight: 400; color: #005387; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } .ce_download a { margin: 18px 0 0 4px; font-size: 1.25em; } .ce_downloads a { margin: 19px 0 0 0; font-size: 1.2em; } .ce_download a:hover, .ce_downloads a:hover { text-decoration: underline; } .ce_download .size, .ce_downloads .size { display: inline-block; vertical-align: top; font-weight: 400; color: #595959; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } .ce_download .size, .ce_downloads .size { margin: 20px 0 0 4px; } @media screen and (max-width: 480px) { .ce_download .size, .ce_downloads .size { display: none; } } .ce_download .mime, .ce_downloads .mime { position: absolute; top: 0; right: 0; padding: 3px 8px 1px 8px; color: #fff; background: #3c97cb; font-size: 0.85em; font-weight: 400; font-family: 'DINLight', Helvetica, Arial, sans-serif; letter-spacing: .99653px; } i.ico-pdf { display: inline-block; color: #005387; font-size: 3.4em; } i.ico-attach { margin: 4px 4px 0 4px; vertical-align: bottom; display: inline-block; width: 38px; height: 38px; background: url("../../files/hydrobar/images/ico-attach.svg") top center no-repeat; background-size: 100%; } /* Downloaderbox styling ------------------------------------------------------------------- */ .ce_downloader { /* margin-left: 85px; */ margin: 0 auto; padding: 5px; max-width: 62em; overflow: auto; border-bottom: 6px solid #ececec; } @media screen and (max-width: 1100px) { .ce_downloader { max-width: inherit; margin: 0 auto; } } @media screen and (max-width: 1040px) { .downloader-wrapper { padding: 0 14%; } .downloader-item:nth-child(2) { margin-right: 0; } .downloader-item:nth-child(4) { margin-right: 0; } .downloader-item:nth-child(6) { margin-right: 0; } .downloader-item:nth-child(8) { margin-right: 0; } } @media screen and (max-width: 980px) { .ce_downloader { margin-left: 0!important; } .downloader-wrapper { padding: 0 11%; } .downloader-item:nth-child(2) { margin-right: 0; } .downloader-item:nth-child(4) { margin-right: 0; } .downloader-item:nth-child(6) { margin-right: 0; } .downloader-item:nth-child(8) { margin-right: 0; } } @media screen and (max-width: 868px) { .downloader-wrapper { padding: 0 9%!important; } .downloader-item { margin-right: 1.5%; } } @media screen and (max-width: 768px) { .downloader-wrapper { padding: 0!important; text-align: center; } .downloader-item { display: block!important; float: none!important; margin: 15px auto 15px auto!important; padding: initial!important; } } .downloader-wrapper:before, .downloader-wrapper:after { /* content: ' '; display: table; */ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .downloader-item { display: inline-block; width: 250px; /* height: 242px; */ text-align: center; /* background: #ececec; */ position: relative; margin-right: 2.5%; /* padding: 4px; */ float: left; min-height: 2px; /* border: 2px solid #ececec; */ box-sizing: border-box; margin-top: 15px; margin-bottom: 15px; } .downloader-item:nth-child(3) { margin-right: 0; } .downloader-image { padding: 20px 0; width: 242px; border: 2px solid #ececec; text-align: center; } .downloader-info { padding: 10px 20px; width: 206px; height: 76px; text-align: left; background: #ececec; } .downloader-get { padding: 10px 20px; width: 202px; text-align: left; border: 2px solid #ececec; } .downloader-get .ico-downloads { font-size: 1.5em; } .ce_downloader h1, .ce_downloader h2, .ce_downloader h3 { margin-bottom: 8px; font-size: 1.45em; line-height: 1.2em; font-weight: 400; color: #005387; font-family: 'DINRegular', Helvetica, Arial, sans-serif; padding-bottom:4px; border-bottom: 1px solid #cfcfcf; } .downloader-info a { display: inline-block; vertical-align: top; font-size: 1.2em; font-weight: 400; color: #005387; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } .downloader-info .desc { margin-top: 4px; font-weight: 400; line-height: 1.4em; color: #000; font-family: 'DINLight', Helvetica, Arial, sans-serif; } /* Seminare // EventManager Lister styling ------------------------------------------------------------------- */ #main .mod_event_categorylist h1 { margin: 14px 0 0 0; font-size: 1.25em; line-height: 1.4em; font-weight: 400; color: #000101; font-family: 'DINMedium', Helvetica, Arial, sans-serif; } /* EventManager > Eventlist Empty --- */ .mod_event_categorylist .empty { font-size: 1.2em; line-height: 1.4em; font-weight: 400; color: #000101; font-family: 'DINLight', Helvetica, Arial, sans-serif; } .mod_event_categorylist .empty p:nth-of-type(1) { margin-bottom: 20px; font-weight: 400; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } /* EventManager > Download element --- */ .ce_download.seminar { margin-top: 14px!important; margin-left: 0!important; } .ce_download.seminar h1, .ce_download.seminar h2, .ce_download.seminar h3 { margin-bottom: 4px; font-size: 1.45em!important; line-height: 1.2em; font-weight: 400; color: #005387; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } /* EventManager > Event lister --- */ .event.event_list { margin: 20px 0; } .event.event_list.first { margin: 4px 0 0 0!important; } .event_list .info a { margin: 0; font-size: 1.3em; line-height: 1.4em; font-weight: 400; font-family: 'DINMedium', Helvetica, Arial, sans-serif; } .event_list .info a:hover, .event_list .info a:active { text-decoration: underline; } .event_list .info .date, .event_list .teaser, .event_list .price strong { font-size: 1.2em; line-height: 1.4em; font-weight: 400; color: #000101; font-family: 'DINLight', Helvetica, Arial, sans-serif; } .event_list .price strong { color: #005387; font-weight: 400; font-family: 'DINMedium', Helvetica, Arial, sans-serif; } .event_list .price .label { display: inline-block; } .event_list .info .date { margin-bottom: 6px; padding: 3px 0 1px 4px; background:#ececec; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } .event_list .price { margin-top: 4px; padding: 6px 0 4px 0; border-bottom: 3px solid #ececec; border-top: 3px solid #ececec; } /* EventManager > Event Status --- */ .booking .info.info_sold_out, .booking .info.info_delayed, .booking .info.info_canceled { display: inline-block; vertical-align: top; width: 100%; margin: 0 0 8px 0; padding: 0; } .booking .info_sold_out span, .booking .info_delayed span, .booking .info_canceled span { display: block; text-align: center; padding: 4px; color: #fff; font-weight: 400; font-family: 'DINMedium', Helvetica, Arial, sans-serif; } .booking .last_seats { display: block; text-align: center; padding: 4px; color: #fff; font-weight: 400; font-family: 'DINMedium', Helvetica, Arial, sans-serif; background: #26a822; } /* EventManager > Status colored boxes --- */ .booking .info_sold_out span { background: #ed3434; } .booking .info_delayed span { background: #229845; } .booking .info_canceled span { background: #e7892d; } /* EventManager > Booking button and form ------------------------------------------------------------------- */ .booking .submit_button input { display: inline-block; background: #3c97cb; color: #fff; vertical-align: top; margin-top: 4px; padding: 7px 14px 5px 14px; font-size: 1.15em; border: none; font-family: 'DINRegular', Helvetica, Arial, sans-serif; cursor: pointer; -webkit-appearance: none; } .booking .submit_button input:hover { background: #3071a9; transition: all 0.3s ease 0s; } .booking .submit_button, .booking .event_details { display: inline-block; } .booking .event_details a { display: inline-block; vertical-align: top; margin-top: 5px; padding: 7px 14px 5px 14px; font-size: 1.05em; border: none; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } .booking .event_details a i.ico-linkarrow { width: 15px; height: 15px; display: inline-block; vertical-align: top; background: url("../../files/hydrobar/images/ico-linkarrow.svg") top center no-repeat; } .booking .event_details a:hover, .booking .event_details a:active { color: #3c97cb; text-decoration: underline; } .booking .info { display: inline-block; vertical-align: top; margin-top: 5px; padding: 7px 14px 5px 0; } .booking .info_active a { margin: 0; font-size: 1em; line-height: 1.4em; font-weight: 400; font-family: 'DINMedium', Helvetica, Arial, sans-serif; } /* Seminare // EventManager Reader styling for details ------------------------------------------------------------------- */ .event.layout_full .booking .event_details { display: none; } .event.layout_full h1 { margin: 15px 0 0 0; line-height: 1em!important; } .event.layout_full .teaser { font-size: 1.25em; line-height: 1.4em; font-weight: 400; color: #000101; font-family: 'DINLight', Helvetica, Arial, sans-serif; } .event.layout_full .event_object { margin: 8px 0; } .event.layout_full .event_price { margin-top: 4px; padding: 9px 0 4px 0; display: block; border-bottom: 3px solid #ececec; border-top: 3px solid #ececec; } .event.layout_full .event_date { margin-top: 15px; margin-bottom: 0; padding: 8px 0 0 0; border-top: 2px solid #ececec; } .event.layout_full .event_date .label, .event.layout_full .event_date .value, .event.layout_full .event_times .label, .event.layout_full .event_times .value, .event.layout_full .event_price .label, .event.layout_full .event_price .value, .event.layout_full .event_category .label, .event.layout_full .event_category .value, .event.layout_full .event_location .label, .event.layout_full .event_location .value, .event.layout_full .event_certificate .label, .event.layout_full .event_certificate .value, .event.layout_full .event_tutor .label, .event.layout_full .event_tutor .value, .event.layout_full .event_contact .label, .event.layout_full .event_contact .value, .event.layout_full .event_amount .label, .event.layout_full .event_amount .value { display: inline-block; } .event.layout_full .event_price .value strong { display: inline-block; font-size: 1.15em; margin-right: 4px; color: #005387; } .event.layout_full .event_date .value strong { color: #000; font-weight: 400; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } .event.layout_full .event_date .label, .event.layout_full .event_times .label, .event.layout_full .event_price .label, .event.layout_full .event_category .label, .event.layout_full .event_location .label, .event.layout_full .event_certificate .label, .event.layout_full .event_amount .label, .event.layout_full .event_tutor .label, .event.layout_full .event_contact .label { width: 26%; font-size: 1em!important; } .event.layout_full .event_date .value, .event.layout_full .event_category .value, .event.layout_full .event_location .value, .event.layout_full .event_certificate .value, .event.layout_full .event_amount .value, .event.layout_full .event_tutor .value a, .event.layout_full .event_contact .value a { font-size: 1.15em; } .event.layout_full .event_tutor .value a, .event.layout_full .event_contact .value a { font-weight: 400; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } .event.layout_full .event_category { padding: 8px 0 0 0; border-top: 2px solid #ececec; } .event.layout_full .event_contact { padding: 0 0 8px 0; border-bottom: 2px solid #ececec; } @media screen and (max-width: 900px) { .event.layout_full .event_date .label, .event.layout_full .event_times .label, .event.layout_full .event_price .label, .event.layout_full .event_category .label, .event.layout_full .event_location .label, .event.layout_full .event_certificate .label, .event.layout_full .event_amount .label, .event.layout_full .event_tutor .label, .event.layout_full .event_contact .label { display: none; } .event.layout_full .event_amount .value:after { content: " Teilnehmer"; } } @media screen and (max-width: 599px) { .event.layout_full .event_date .label, .event.layout_full .event_times .label, .event.layout_full .event_price .label, .event.layout_full .event_category .label, .event.layout_full .event_location .label, .event.layout_full .event_certificate .label, .event.layout_full .event_amount .label, .event.layout_full .event_tutor .label, .event.layout_full .event_contact .label { display: inline-block!important; } .event.layout_full .event_amount .value:after { display: none; } } @media screen and (max-width: 490px) { .event.layout_full .event_date .label, .event.layout_full .event_times .label, .event.layout_full .event_price .label, .event.layout_full .event_category .label, .event.layout_full .event_location .label, .event.layout_full .event_certificate .label, .event.layout_full .event_amount .label, .event.layout_full .event_tutor .label, .event.layout_full .event_contact .label { display: none!important; border: 1px solid red; } .event.layout_full .event_amount .value:after { content: " Teilnehmer"; display: inline; } } .event.layout_full .event_target_group p, .event.layout_full .event_description p { margin: 15px 0; font-size: 1.25em; line-height: 1.4em; font-weight: 400; color: #000101; font-family: 'DINLight', Helvetica, Arial, sans-serif; } .event.layout_full .event_object.event_target_group { margin-top: 25px; display: block; } .event.layout_full .event_description ul { margin: 0; padding: 0; list-style-type: none; } .event.layout_full .event_description li { display: block; padding-left: 30px; font-size: 1.25em; line-height: 1.4em; font-weight: 400; color: #000101; font-family: 'DINLight', Helvetica, Arial, sans-serif; } .event.layout_full .event_description li:before { content: ">"; margin-left: -30px; margin-right: 12px; vertical-align: top; } /* EventManager // Reader back ----- */ .mod_event_reader .back { margin-top: 20px; padding: 0 0 20px 0; border-bottom: 8px solid #ececec; } .mod_event_reader p.back a { display: inline-block; font-size: 1.25em; font-weight: 400; color: #3c97cb; font-family: 'DINMedium', Helvetica, Arial, sans-serif; } .mod_event_reader i.ico-linkarrow { width: 20px; height: 20px; display: inline-block; vertical-align: top; background: url("../../files/hydrobar/images/ico-linkarrow.svg") 0 2px no-repeat; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -moz-transform: rotate(180deg); } .mod_event_reader p.back a:hover { text-decoration: underline; } /* Seminare // EventManager Related events ------------------------------------------------------------------- */ .mod_event_related .info { margin: 15px 0 6px 0; font-size: 1.25em; line-height: 1.4em; font-weight: 400; color: #000101; font-family: 'DINLight', Helvetica, Arial, sans-serif; } .mod_event_related .related_event { margin-top: 4px; padding: 6px 0 4px 0; border-bottom: 6px solid #ececec; } .mod_event_related a { margin: 4px 4px 0 4px; font-size: 1.3em; line-height: 1.4em; font-weight: 400; font-family: 'DINMedium', Helvetica, Arial, sans-serif; } .mod_event_related a:hover { text-decoration: underline; } .mod_event_related p.subtitle, .mod_event_related p.date { font-size: 1.2em; line-height: 1.4em; font-weight: 400; color: #000101; font-family: 'DINLight', Helvetica, Arial, sans-serif; } .mod_event_related .subtitle { padding: 0 4px 8px 4px; border-bottom: 3px solid #ececec; } .mod_event_related .date { margin-bottom: 8px; padding: 4px 8px 1px 8px; text-align: right; font-size: 1em; background: #ececec; } .mod_event_related p.date span { padding-left: 10px; color: #000; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } .mod_event_related .event_details a { display: inline-block; vertical-align: top; margin-top: 5px; padding: 7px 14px 5px 4px; font-size: 1.05em; border: none; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } .mod_event_related .event_details a i.ico-linkarrow { width: 18px; height: 18px; display: inline-block; vertical-align: top; background: url("../../files/hydrobar/images/ico-linkarrow.svg") top center no-repeat; } /* Seminare // EventManager Warenkorb styling ------------------------------------------------------------------- */ .mod_event_cart h1 { margin-bottom: 10px; font-weight: 400; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } .cart_items h2 { margin-bottom: 6px; font-weight: 400; } /* Basket cart ---------------- */ .cart_table table { margin-bottom: 20px; width: 99.9%; border-collapse: collapse; font-size: 1.25em; line-height: 1.4em; font-weight: 400; font-family: 'DINLight', Helvetica, Arial, sans-serif; } .cart_table th { border-bottom: 1px solid #595959; color: #000101; font-size: 0.95em; font-weight: 400; } .cart_table thead { margin-top: 10px; background: #ececec; } .cart_table tbody { background: #fafafa; } .cart_table td, .cart_table th { padding-top: 10px; padding-bottom: 5px; } td, th { padding: 4px 8px; vertical-align: top; text-align: left; } .cart_table th.right, .cart_table td.right { text-align: right; } .cart_table th.middle, .cart_table td.middle { text-align: center; } .cart_table .event_item td { padding-right: 7px; padding-bottom: 8px; vertical-align: top; border-bottom: 3px solid #ececec; } .event_item div.event_title { font-size: 1.1em; } .cart_object.event_date { margin-top: 4px; } .cart_object.event_date .label, .cart_object.event_type .label { font-size: 0.85em; width: 85px; display: inline-block; } .cart_object.event_date .value, .cart_object.event_type .value {font-size: 0.9em;} .cart_object.event_date .value, .event_full_price { color: #000101; } .cart_table .grandTotal th.col_0 { border-bottom: 0; } .cart_table tfoot td, .cart_table tfoot th { padding-top: 7px; } .cart_table tfoot { border-bottom: 8px solid #ececec; } .cart_table tfoot .grandTotal { font-weight: 400; font-family: 'DINMedium', Helvetica, Arial, sans-serif; } .mod_event_cart tfoot .tax td.col_1, .mod_event_checkout tfoot .tax td.col_1 { white-space: nowrap; } /* Nowrap elements inside of table --- */ .event_price, .event_full_price, .grandTotal .col_3, .tax .col_3, .subTotal .col_3 { white-space: nowrap; } /* Amount select ---------------- */ .event_amount .select { padding: 2px 10px 0px 10px; border: 1px solid #ccc; font-size: 1em; font-family: 'DINRegular', Helvetica, Arial, sans-serif; color: #000101; border: 1px solid #a9a9a9; width: 60px; text-align: right; -webkit-border-radius: 0px; /* -webkit-appearance: none; */ } .event_amount .select option { padding: 4px 10px 2px 10px; } .chrome.webkit .event_amount .select { padding: 5px 8px 2px 8px!important; width: 60px!important; } .win.edge .event_amount .select, .win.ie .event_amount .select { padding: 5px 0 2px 4px!important; width: 60px!important; } /* Basket cart / buttons -------------- */ .mod_event_cart .buttons span.delete, .mod_event_checkout .buttons span.delete { margin-top: 15px; display: block; } .mod_event_cart .buttons a.delete, .mod_event_checkout .buttons a.delete { display: inline-block; vertical-align: top; color: #fc0909; font-size: 0.95em; font-weight: 400; font-family: 'DINRegular', Helvetica, Arial, sans-serif; line-height: 1; } .mod_event_cart .buttons a.delete:hover, .mod_event_cart .buttons a.delete:active, .mod_event_checkout .buttons a.delete:hover, .mod_event_checkout .buttons a.delete:active { text-decoration: underline; } .mod_event_cart .buttons a.delete:before, .mod_event_checkout .buttons a.delete:before { content: "\e903"; vertical-align: top; margin-right: 10px; padding: 3px 5px 2px 4px; background: #fc0909; font-weight: bold; color: #fff; font-family: 'hydrocontrol' !important; } .submit_button_cart, .submit_button_checkout, .step_overview .submit_abort, .step_overview .submit_checkout { display: inline-block; } .submit_button_cart input, .submit_button_checkout a, .submit_button input, .step_finish .print_links a.button, .step_overview .submit_abort a.submit { display: inline-block; background: #3c97cb; color: #fff; vertical-align: top; margin-top: 4px; padding: 7px 14px 5px 14px; font-size: 1.15em; border: none; font-family: 'DINRegular', Helvetica, Arial, sans-serif; cursor: pointer; } .submit_button_checkout a { margin-left: 5px; } .step_overview .submit_abort { margin-right: 4px; } .submit_button_cart input:hover, .submit_button_checkout a:hover, .submit_button input:hover, .step_finish .print_links a.button:hover, .step_overview .submit_abort a.submit:hover { background: #3071a9; transition: all 0.3s ease 0s; } .price_info { display: block; margin: 10px 0 0 0; padding: 0 0 20px 0; border-bottom: 8px solid #ececec; } .ios.mobile input { -webkit-border-radius: 0!important; -webkit-appearance: none!important; } /* EventManager / Event Card empty ------ */ .mod_event_cart .error h2 { margin-bottom: 6px; font-weight: 400; } .mod_event_cart .error p { padding: 10px 6px 0 6px; background: #fafafa; border-top: 2px solid #ececec; font-size: 1.2em; line-height: 1.4em; font-weight: 400; font-family: 'DINLight', Helvetica, Arial, sans-serif; } .mod_event_cart .error p:last-child { padding-top: 0; padding-bottom: 10px; border-top: 0; border-bottom: 3px solid #ececec; } .mod_event_cart .error p a { font-weight: 400; font-family: 'DINMedium', Helvetica, Arial, sans-serif; } .cart_table .subTotal { border-bottom: 5px solid #eee; } @media screen and (max-width: 900px) { .cart_object.event_date .label, .cart_object.event_type .label { display: none; } } @media screen and (max-width: 599px) { /* Force table to not be like tables anymore */ .cart_table table, .cart_table thead, .cart_table tbody, .cart_table tfoot, .cart_table th, .cart_table td, .cart_table tr { display: block; } /* Hide table headers (but not display: none;, for accessibility) */ .mod_event_cart .cart_table thead tr, .mod_event_cart .cart_table tfoot th:nth-of-type(2), .mod_event_cart .cart_table tfoot td:nth-of-type(1), .mod_event_cart .cart_table tfoot td:nth-of-type(2), .step_start .cart_table thead tr, .step_start .cart_table tbody .subTotal td:nth-of-type(1), .step_start .cart_table tbody .subTotal td:nth-of-type(2), .step_payment .cart_table thead tr, .step_payment .cart_table tfoot .grandTotal td:nth-of-type(1), .step_payment .cart_table tfoot .grandTotal th:nth-of-type(1), .step_overview .cart_table thead tr, .step_overview .cart_table tfoot .grandTotal td:nth-of-type(1), .step_overview .cart_table tfoot .grandTotal th:nth-of-type(1), .step_overview .cart_table tfoot .tax td:nth-of-type(1), .step_overview .cart_table tfoot .tax td:nth-of-type(2), .step_finish .cart_table thead tr, .step_finish .cart_table tfoot .grandTotal td:nth-of-type(1), .step_finish .cart_table tfoot .grandTotal th:nth-of-type(1), .step_finish .cart_table tfoot .tax td:nth-of-type(1), .step_finish .cart_table tfoot .tax td:nth-of-type(2) { position: absolute; top: -9999px; left: -9999px; } .cart_table tr { border: 1px solid #ccc; } .cart_table td { /* Behave like a "row" */ border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 6px; } .cart_table td.event_title { padding-top: 40px; display: block; } .cart_table td:before { /* Now like a table header */ position: absolute; /* Top/left values mimic padding */ top: 6px; left: 6px; width: 25%; padding-right: 10px; white-space: nowrap; font-size: 0.95em; } .event_amount .select { width: 80px; } .cart_table td.middle { text-align: right; } .cart_table .buttons { text-align:right; } /* Label the data */ .cart_table tbody td:nth-of-type(1):before { content: "Veranstaltung:"; } .cart_table tbody td:nth-of-type(2):before { content: "Preis"; text-align: left; } .cart_table tbody td:nth-of-type(3):before { content: "Anzahl"; text-align: left; } .cart_table tbody td:nth-of-type(4):before { content: "Summe"; text-align: left; } .step_payment .cart_table tfoot .grandTotal th:nth-of-type(2):before, .step_finish .cart_table tfoot .grandTotal th:nth-of-type(2):before, .cart_table tfoot th:nth-of-type(3):before, .step_overview .cart_table tfoot .grandTotal th:nth-of-type(2):before { content: "Gesamt"; margin-right: 20px; } .cart_table tfoot td:nth-of-type(3):before { content: "enthaltene MwSt."; text-align: right; } .mod_event_checkout .cart_table tfoot .tax td:nth-of-type(3):before { content: "inkl. 19% MwSt."; text-align: left; } .mod_event_checkout.step_start .cart_table tbody .subTotal td:nth-of-type(1):before, .mod_event_checkout.step_start .cart_table tbody .subTotal td:nth-of-type(2):before, .mod_event_checkout.step_start .cart_table tbody .subTotal td:nth-of-type(3):before { content: ""; } .mod_event_checkout.step_start .cart_table tbody .subTotal td:nth-of-type(3):before { content: "Zwischensumme"; text-align: left; } } /* Seminare // EventManager Registration ------------------------------------------------------------------- */ .mod_event_registration_guest h1 { margin-bottom: 10px; font-weight: 400; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } .regist-participant, .regist-adress, .regist-dialog, .regist-captcha { padding: 20px; margin-bottom: 25px; border: 1px solid #a9a9a9; } .mod_event_registration_guest .widget { display: inline-block; width: 48%; margin-right: 20px; } .regist-participant .widget:nth-of-type(3), .regist-adress .widget:nth-of-type(5), .regist-dialog .widget:nth-of-type(2), .regist-dialog .widget:nth-of-type(4) { margin-right: 0; } /* Salutation Select ------------- */ .mod_event_registration_guest .widget.widget-select { display: block; width: 100%; } .regist-participant .widget:nth-of-type(1) select { padding: 5px 8px 2px 8px; width: 90px; border: 1px solid #a9a9a9; font-size: 1.2em; font-family: 'DINRegular', Helvetica, Arial, sans-serif; -webkit-border-radius: 0px; /* -webkit-appearance: none; */ background: #fafafa; } .regist-participant .widget:nth-of-type(1) select > option { padding: 2px 4px 1px 4px; } /* Company and Adress --- */ .regist-adress .widget:nth-of-type(1), .regist-adress .widget:nth-of-type(2) { display: block; margin-right: 0; width: 100%; } .regist-adress .widget:nth-of-type(1) input, .regist-adress .widget:nth-of-type(2) input { width: 94%; } /* PLZ and City --- */ .regist-adress .widget:nth-of-type(3) { display: inline-block; width: 10%; margin-right: 30px; } .regist-adress .widget:nth-of-type(4) { display: inline-block; width: 33.5%; margin-right: 0; } .regist-adress .widget:nth-of-type(5) { display: block; } /* Captcha ------- */ .mod_event_registration_guest .widget-captcha { width: 100%; } .mod_event_registration_guest .captcha_text { margin-left: 20px; display: inline-block; font-size: 1.25em; font-weight: 400; color: #005387; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } .mod_event_registration_guest .widget-captcha input { display: inline-block; width: 25%!important; padding: 10px; font-size: 1.1em; font-weight: 400; font-family: 'DINRegular', Helvetica, Arial, sans-serif; border: 1px solid #a9a9a9; background: #fafafa; -webkit-border-radius: 0px; -webkit-appearance: none; } /* Seminar-Terms --- */ .mod_event_registration_guest .regist-terms { border: 0; } .item_agreement .label { display: none; } .item_agreement { display: block; padding: 0 0 10px 0; margin-bottom: 20px; border-bottom: 8px solid #ececec; } .agreement_check_text { font-size: 1.2em; font-weight: 400; font-family: 'DINRegular', Helvetica, Arial, sans-serif; vertical-align: bottom; } .item_agreement .value input[type="checkbox"]{ display: inline-block; width: 35px; /*Desired width*/ height: 25px; /*Desired height*/ background: #fafafa; cursor: pointer; -ms-transform: scale(1.5); /* IE */ -moz-transform: scale(1.5); /* FF */ /* -webkit-transform: scale(1.5); /* Safari and Chrome */ -o-transform: scale(1.5); /* Opera */ vertical-align: top; } .item_agreement .value input[type="checkbox"]:focus { outline: none; } .item_agreement .agreement_text p { margin: 15px 0 15px 40px; font-size: 1.15em; line-height: 1.3em; font-weight: 400; font-family: 'DINLight', Helvetica, Arial, sans-serif; } .item_agreement .agreement_text p a { font-weight: 400; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } /* Browser hack ------------- */ .chrome.webkit .item_agreement .value input[type="checkbox"]{ width: 20px!important; height: 20px!important; margin-right: 8px; border: 1px solid #001010; } .chrome.webkit .item_agreement .agreement_text p { margin: 15px 0 15px 32px; } .mod_event_registration_guest .widget-select label, .mod_event_registration_guest .widget-text label, .mod_event_registration_guest .widget-captcha label { display: block; margin-top: 8px; margin-bottom: 4px; font-size: 1.1em; font-weight: 400; color: #001010; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } .mod_event_registration_guest .widget-text input { width: 90%; padding: 10px; font-size: 1.1em; font-family: 'DINRegular', Helvetica, Arial, sans-serif; border: 1px solid #a9a9a9; background: #fafafa; -webkit-border-radius: 0px; -webkit-appearance: none; } .regist-participant > legend:nth-child(1), .regist-adress > legend:nth-child(1), .regist-dialog > legend:nth-child(1), .regist-captcha > legend:nth-child(1) { max-width: 95%; padding: 2px 6px 2px 6px; background: #fff; color: #005387; font-size: 1.2em; font-weight: 400; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } /* Errors ------------- */ .widget p.error, .item_agreement .value p.error { color: #ff0606; } /* Next button ------------- */ .mod_event_registration_guest .submit_container, .mod_event_registration_guest .goback_container { display: inline-block; } .mod_event_registration_guest .goback_container { margin-right: 4px; } .mod_event_registration_guest .submit_container input, .mod_event_registration_guest .goback_container a { display: inline-block; background: #3c97cb; color: #fff; vertical-align: top; margin-top: 4px; padding: 7px 14px 5px 14px; font-size: 1.15em; border: none; font-family: 'DINRegular', Helvetica, Arial, sans-serif; cursor: pointer; } .mod_event_registration_guest .submit_container input:hover, .mod_event_registration_guest .goback_container a:hover { background: #3071a9; transition: all 0.3s ease 0s; } .mod_event_registration_guest .register_info { display: block; margin: 10px 0 0 0; padding: 0 0 20px 0; border-bottom: 8px solid #ececec; } .mod_event_registration_guest .regist-terms legend { display: none; } @media screen and (max-width: 1078px) { /* City --- */ .regist-adress .widget:nth-of-type(4) { width: 32.5%; } } @media screen and (max-width: 768px) { .mod_event_registration_guest .widget { width: 47%; } .mod_event_registration_guest .widget-captcha { width: 100%; } /* City --- */ .regist-adress .widget:nth-of-type(4) { width: 30%; } } @media screen and (max-width: 599px) { .mod_event_registration_guest .widget { display: block; width: 100%; } .mod_event_registration_guest .widget input { display: block; width: 95%; } .regist-participant .widget:nth-of-type(1) select { display: block; width: 100%; } /* PLZ and city --- */ .regist-adress .widget:nth-of-type(3), .regist-adress .widget:nth-of-type(4) { display: block; width: 99.5%; } .regist-captcha .widget input { display: block; width: 95%!important; } .regist-captcha .widget .captcha_text { display: block; margin: 10px 0!important; } } /* EventManager > Checkout - Booking process ------------------------------------------------------------------- */ .mod_event_checkout h1 { margin-bottom: 10px; font-weight: 400; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } /* Checkout Steps --------------- */ ul.checkout_steps { background-color: #ececec; } .checkout_steps li { display: inline-block; padding: 0 10px; background-color: #ececec; } .checkout_steps li a, .checkout_steps li span { display: inline-block; padding: 12px 0 7px 0; font-size: 1.25em; font-weight: 400; font-family: 'DINRegular', Helvetica, Arial, sans-serif; line-height: 1; } .checkout_steps li.active a { border-bottom: 3px solid #3c97cb; } .checkout_steps li.active a { color: #001010; } .checkout_steps li.inactive span, .checkout_steps li.done span { color: #aba9a9; } @media screen and (max-width: 599px) { ul.checkout_steps { background-color: transparent; } .checkout_steps li { margin: 2px 0; padding: 0; display: block; background-color: #ececec; } .checkout_steps li a, .checkout_steps li span { padding: 10px 0 7px 20px; border-left: 4px solid #ececec; } .checkout_steps li.active a { border-left: 4px solid #3c97cb; border-bottom: 0; } } /* Checkout Booking person info --------- */ .mod_event_checkout .info { margin: 12px 0; font-size: 1.2em; line-height: 1.4em; font-weight: 400; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } /* Checkout Booking recipient ----------- */ .checkout_participants { margin-bottom: 20px; } .checkout_participants h3 { margin: 14px 0; font-size: 1.6em; line-height: 1.2em; font-weight: 400; color: #005387; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } .checkout_participants .participant { padding: 10px 20px 15px 20px; border: 3px solid #eee; background: #fafafa; } .checkout_participants .participant .item.col_0 { display: inline-block; } .checkout_participants .participant .item.col_1, .checkout_participants .participant .item.col_2, .checkout_participants .participant .item.col_3, .checkout_participants .participant .item.col_4 { display: inline-block; width: 38%; } .checkout_participants .participant .item.col_0, .checkout_participants .participant .item.col_1, .checkout_participants .participant .item.col_3 { margin-right: 20px; } .checkout_participants .participant .item.col_2 { margin-right: 0; } .checkout_participants .participant .item .label { display: block; } .checkout_participants .participant .item.col_0 { vertical-align: top; } .checkout_participants .participant .item.col_3 { margin-top: 4px; margin-left: 110px; } .checkout_participants .participant .item .label { margin-top: 4px; margin-bottom: 4px; font-size: 1.1em; font-weight: 400; color: #000; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } .checkout_participants .participant .item .value select { padding: 5px 8px 2px 8px; width: 90px; border: 1px solid #a9a9a9; font-size: 1.2em; font-family: 'DINRegular', Helvetica, Arial, sans-serif; -webkit-border-radius: 0px; background: #fff; } .checkout_participants .participant .item .value input { padding: 10px; font-size: 1.15em; font-family: 'DINRegular', Helvetica, Arial, sans-serif; border: 1px solid #a9a9a9; background: #fff; -webkit-border-radius: 0px; } .checkout_participants .participant .item.col_1 .value input, .checkout_participants .participant .item.col_2 .value input, .checkout_participants .participant .item.col_3 .value input, .checkout_participants .participant .item.col_4 .value input { width: 90%; } @media screen and (max-width: 767px) { .checkout_participants .participant .item.col_0 { display: block; margin-bottom: 4px; } .checkout_participants .participant .item.col_3 { margin-left: 0; } .checkout_participants .participant .item.col_1, .checkout_participants .participant .item.col_2, .checkout_participants .participant .item.col_3, .checkout_participants .participant .item.col_4 { width: 47%; } } @media screen and (max-width: 599px) { .checkout_participants .participant .item.col_0 { display: block; margin-bottom: 4px; } .checkout_participants .participant .item.col_3 { margin-left: 0; } .checkout_participants .participant .item.col_1, .checkout_participants .participant .item.col_2, .checkout_participants .participant .item.col_3, .checkout_participants .participant .item.col_4 { display: block; width: 100%; margin-bottom: 4px; } } /* EventManager > Checkout - Booking show step overview ------------------------------------------------------------------- */ .step_overview .cart_items .cart_table:before { content: "Bitte prüfen Sie die Angaben der Buchung sorgfältig."; display: block; margin: 12px 0; font-size: 1.2em; line-height: 1.4em; font-weight: 400; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } /* Participant summary ---- */ .checkout_elements .checkout_participants div.participant_item .value .participant span.field_name { display: inline-block; width: 50%; margin: 4px 20px 0 0; } .checkout_elements .checkout_participants div.participant_item .value .participant span.field_email { display: inline-block; } .checkout_elements .checkout_participants div.participant_item .value .participant span.field_name, .checkout_elements .checkout_participants div.participant_item .value .participant span.field_email { font-size: 1.2em; line-height: 1.4em; font-weight: 400; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } .checkout_elements .checkout_participants div.participant_item .value .participant span.field_name:before { content: "Vorname, Name:"; } .checkout_elements .checkout_participants div.participant_item .value .participant span.field_email:before { content: "E-Mail-Adresse:"; } .checkout_elements .checkout_participants div.participant_item .value .participant span.field_name:before, .checkout_elements .checkout_participants div.participant_item .value .participant span.field_email:before { display: block; font-size: 0.9em; font-weight: 400; color: #066195; font-family: 'DINLight', Helvetica, Arial, sans-serif; } .billing_address .item .value { margin-bottom: 20px; } @media screen and (max-width: 599px) { .checkout_elements .checkout_participants div.participant_item .value .participant span.field_name, .checkout_elements .checkout_participants div.participant_item .value .participant span.field_email { display: block; } .checkout_elements .checkout_participants div.participant_item .value .participant span.field_email { margin-top: 4px; } } /* EventManager > Checkout - Finish of the booking process ------------------------------------------------------------------- */ .mod_event_checkout.step_finish h2, .billing_address h3 { margin: 14px 0 7px 0; font-size: 1.6em; line-height: 1.2em; font-weight: 400; color: #005387; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } .mod_event_checkout.step_finish .checkout_participants h3 { margin: 0 0 7px 0; } .mod_event_checkout .info, .mod_event_checkout .toggler { font-size: 1.2em; line-height: 1.4em; font-weight: 400; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } .mod_event_checkout .msg_success { font-size: 1.2em; line-height: 1.4em; font-weight: 400; font-family: 'DINLight', Helvetica, Arial, sans-serif; } .mod_event_checkout .msg_success { display: block; margin-bottom: 30px; padding: 15px; background: #eff8e5; border: 2px solid #86d235; } .mod_event_checkout .msg_success p:nth-of-type(1) { margin-bottom: 10px; } .mod_event_checkout .info { margin: 12px 0; } .mod_event_checkout .toggler { margin: 0 0 12px 0; } /* Billing adress styling ---- */ .billing_address .value { padding: 10px 20px 15px 20px; border: 3px solid #eee; background: #fafafa; } /* .billing_address .value .item_company, .billing_address .value .item_name, .billing_address .value .item_street, .billing_address .value .item_city { display: inline-block; width: 50%; margin: 4px 20px 0 0; } */ .billing_address .value .item_company, .billing_address .value .item_name, .billing_address .value .item_street, .billing_address .value .item_city, .billing_address .value .item_phone, .billing_address .value .item_fax, .billing_address .value .item_email { font-size: 1.2em; line-height: 1.4em; font-weight: 400; font-family: 'DINLight', Helvetica, Arial, sans-serif; } .billing_address .value .item_phone span.label, .billing_address .value .item_fax span.label, .billing_address .value .item_email span.label { width: 62px; display: inline-block; } .mod_event_registration_guest fieldset.regist-terms legend ( display: none; ) /* EventManager / Checkout / Hotel booking --- */ .mod_event_checkout .hotel_booking { display: block; margin: 10px 0 0 0; padding: 0 0 20px 0; border-bottom: 8px solid #ececec; } .mod_event_checkout .hotel_booking h3 { margin: 14px 0 7px 0; font-size: 1.6em; line-height: 1.2em; font-weight: 400; color: #005387; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } .mod_event_checkout .hotel_booking p { font-size: 1.2em; line-height: 1.4em; font-weight: 400; font-family: 'DINLight', Helvetica, Arial, sans-serif; } .mod_event_checkout .hotel_booking a.btn-hotel { display: block; margin-top: 4px; width: 211px; height: 37px; background: #3c97cb url("../../files/hydrobar/images/btn-hotel.png") top left no-repeat; } .mod_event_checkout .hotel_booking a.btn-hotel:hover { background: #3071a9 url("../../files/hydrobar/images/btn-hotel.png") top left no-repeat; transition: all 0.3s ease 0s; } /* EventManager / Print variable -------------------------------------------------------------------- */ @media print { #header, #localnav, #footer, .checkout_steps, .print_links, .touchstrip { display: none; } body { font-size: 90%; } .mod_event_checkout.step_finish h2, .participant_item h3, .billing_address h3 { margin-top: 0; color: #000; } .price_info { margin-top: 0; padding-bottom: 10px; } .event_item .event_title a, .checkout_elements .checkout_participants div.participant_item .value .participant span.field_name:before, .checkout_elements .checkout_participants div.participant_item .value .participant span.field_email:before { color: #000; } .centered-wrapper-inner:after { content: "Hydrobar GmbH - Umberto-Nobile-Str. 16 - 71063 Sindelfingen (Flugfeld) - Tel. +49 70 31.49 94-0 - verkauf@hydrobar.de"; margin-top: 10px; display: block; } } /* Manufacturer > Brand boxes in row ------------------------------------------------------------------- */ .manufacturer-brands { margin: 2.5em 0 0 0; padding-bottom: 20px; border-bottom: 3px solid #ececec; zoom: 1; } .manufacturer-brands:before { content: ""; display: table; } .manufacturer-brands:after { content: ""; display: table; clear: both; } .manufacturer-brands > h1, .manufacturer-brands > h2, .manufacturer-brands > h3, .manufacturer-brands > h4, .manufacturer-brands > h5, .manufacturer-brands > h6 { margin-top: 0; margin-bottom: 1em; font-weight: 400; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } .headline-hr:before, .headline-hr:after { clear: both; height: 0; overflow: visible; margin: 2.25em 0; border: 0; border-top: 3px solid #ececec; } .headline-hr { overflow: hidden; } .headline-hr:before, .headline-hr:after { display: inline-block; vertical-align: middle; width: 100%; margin: 0 0.625em 0 -100%; } .headline-hr:after { content: ""; margin: 0 -100% 0 0.625em; } .headline-hr { text-align: center; } .headline-hr:before { content: ""; } .manufacturer-brand-item { font-size: 0.875em; text-decoration: none; color: inherit; outline: none; } .manufacturer-brand-item.rs-column { margin-top: 2.69231%;} @media screen and (max-width: 599px) { .manufacturer-brand-item.rs-column { margin-top: 4.69231%;} } .manufacturer-brand-item .image-wrapper { position: relative; display: block; overflow: hidden; outline: none; } .manufacturer-brand-item { text-align: center; } .manufacturer-brand-item .image-wrapper { margin: 0 auto 1.28571em auto; width: 150px; height: 45px; } .manufacturer-brand-item img { display: block; width: 100%; height: auto; } /* Youtube Player ------------------------------------------------------------------- */ .ce_youtube-wrapper { position: relative; margin: 1.5em 0; /* ratio 16 to 9 */ padding-bottom: 56.25%; height: 0; overflow: hidden; background: #000; } .ce_youtube-wrapper iframe, .ce_youtube-wrapper object, .ce_youtube-wrapper embed, .ce_youtube-wrapper .ce_youtube-wrapper-poster { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .ce_youtube-wrapper-poster { background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; } .ce_youtube-wrapper-poster:before { font: 1.25em/1; content: url("../../files/hydrobar/images/ytb-play_panel.png"); -webkit-font-smoothing: antialiased; font-smoothing: antialiased; text-rendering: geometricPrecision; text-indent: 0; display: inline-block; position: relative; position: absolute; top: 50%; left: 50%; margin: -1.2em -1.675em; padding: 0.7em 1.2em 0.6em 1.4em; border-radius: 0.5em; color: white; background: black; background: rgba(0, 0, 0, 0.6); transition: background-color 0.1s linear; } .ce_youtube-wrapper-poster:hover:before { opacity: 0.9; background: #005387; /* #cc181e; */ } .mejs-video:not(.mejs-container-fullscreen), .mejs-audio:not(.mejs-container-fullscreen) { margin: 1.25em 0; background: transparent; } .mejs-video button, .mejs-audio button { -webkit-appearance: button; -moz-appearance: button; appearance: button; border-radius: 0; box-shadow: none; } .ce_youtube.thankx { width: 80%; } .ce_youtube.movietron { width: 83%; } .ce_youtube { position: relative; padding-bottom: 62.65%; width: 100%; height: auto; margin-bottom: 8px; } @media screen and (max-width:748px) { .ce_youtube.thankx, .ce_youtube.movietron { width: 100%!important; } } /* Accordion - Contentelement ------------------------------------------------------------------- */ .ce_akkordion { padding: 0 5px 0 5px; margin: 0 auto; max-width: 62em; } .ce_akkordion > * + * { border-top: transparent; } .akkordion-item-hd { display: block; padding: 15px 30px 4px 0; position: relative; cursor: pointer; font-size: 1.45em; line-height: 1.2em; font-weight: 400; color: #005387; font-family: 'DINRegular', Helvetica, Arial, sans-serif; border-bottom: 1px solid #005387; /*ececec; */ } .akkordion-item-input:checked ~ .akkordion-item-bd { max-height: 1000px; padding-top: 15px; margin-bottom: 15px; -webkit-transition: max-height 1s ease-in, margin .3s ease-in, padding .3s ease-in; transition: max-height 1s ease-in, margin .3s ease-in, padding .3s ease-in; } .akkordion-item-input:checked ~ .akkordion-item-hd > .akkordion-toggler { -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); } .akkordion-toggler { display: block; width: 30px; position: absolute; top: calc(50% - 6px ); /*minus half font-size*/ right: 0; pointer-events: none; -webkit-transition: -webkit-transform .3s ease; transition: transform .3s ease; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); text-align: center; font-size: 12px; line-height: 1; } .akkordion-toggler:before { font-family: 'hydrocontrol' !important; line-height: 1; content: "\e902"; font-size: 1.95em; } .akkordion-item-bd { max-height: 0; margin-bottom: 0; overflow: hidden; -webkit-transition: max-height .15s ease-out, margin-bottom .3s ease-out, padding .3s ease-out; transition: max-height .15s ease-out, margin-bottom .3s ease-out, padding .3s ease-out; } .akkordion-item-bd .ce_downloads { padding: 0; } .akkordion-item-bd .ce_download h1, .akkordion-item-bd .ce_download h2, .akkordion-item-bd .ce_download h3, .akkordion-item-bd .ce_downloads h1, .akkordion-item-bd .ce_downloads h2, .akkordion-item-bd .ce_downloads h3 { color: #595959; font-size: 1.25em; } .akkordion-item-input { clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden; position: absolute; left: -9999px; } /* ce_gallery - Picture gallery ------------------------------------------------------------------- */ .ce_gallery .image_container img { display: block; width: 100%; height: auto; } .ce_gallery .image_container a { position: relative; display: block; overflow: hidden; /* Fixes IE bug */ text-decoration: none; } .ce_gallery .image_container a:hover:before, .ce_gallery .image_container a:focus:before { content: ""; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.3); } .ce_gallery .image_container a:hover:after, .ce_gallery .image_container a:focus:after { font: 1.8em/1 "DINRegular, Helvetica, Arial, sans-serif"; font-weight: bold; content: "+"; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; text-rendering: geometricPrecision; background-color: #605f5c; padding: 4px 10px; text-indent: 0; display: inline-block; position: relative; position: absolute; top: 50%; left: 50%; z-index: 2; margin: -0.5em; color: white; text-shadow: 0 0 2px rgba(0, 0, 0, 0.35); } .ce_gallery .image_container a:hover img, .ce_gallery .image_container a:focus img { -webkit-filter: blur(2px); -moz-filter: blur(2px); filter: blur(2px); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } .ce_gallery > ul.cols_1 > li { width: 100%; } .ce_gallery > ul.cols_2 > li { width: 49.25%; } .ce_gallery > ul.cols_3 > li { width: 32.33333%; } .ce_gallery > ul.cols_4 > li { width: 23.875%; } .ce_gallery > ul.cols_5 > li { width: 18.8%; } .ce_gallery > ul.cols_6 > li { width: 15.41667%; } .ce_gallery > ul.cols_7 > li { width: 13%; } .ce_gallery > ul.cols_8 > li { width: 11.1875%; } .ce_gallery > ul.cols_9 > li { width: 9.77778%; } .ce_gallery > ul.cols_10 > li { width: 8.65%; } .ce_gallery > ul.cols_11 > li { width: 7.72727%; } .ce_gallery > ul.cols_12 > li { width: 6.95833%; } @media screen and (max-width: 599px) { .ce_gallery.ce_gallery > ul > li { /* doubled class for specificity */ width: auto; } } .ce_gallery.no-resize > ul > li { width: auto; } .main-content .ce_gallery { margin: 1.5em 0; } .ce_gallery > ul { zoom: 1; margin: 0 !important; padding: 0 0 1.5% 0 !important; list-style: none !important; } .ce_gallery > ul:before { content: ""; display: table; } .ce_gallery > ul:after { content: ""; display: table; clear: both; } .ce_gallery > ul > li { float: left; width: 23.875%; margin: 1.5% 0 0 1.5%; } @media screen and (max-width: 599px) { .ce_gallery > ul > li { margin-left: 0; margin-right: 1.5%; } } .ce_gallery > ul > li.col_first { clear: left; margin-left: 0; } @media screen and (max-width: 599px) { .ce_gallery > ul > li.col_first { clear: none; } } .ce_gallery > ul > li.col_last { /* for rounding failures */ margin-right: -1%; } @media screen and (max-width: 599px) { .ce_gallery > ul > li.col_last { margin-right: 1.5%; } } .ce_gallery > ul > li > .image_container { display: block; width: 100%; } .ce_gallery img { width: 100%; height: auto; } /* Widget Google Stars ------------------------------------------------------------------- */ .pe-richsnippets #pe_rating { width: 100%; border-top: 2px solid aliceblue; padding: 10px; } #pe_stars > span::before { color: #3c97cb!important; font-size: 1.2em; } #pe_rating.pe_g.pe_l > span { margin-left: 1em!important; } #pe_rating.pe_g.pe_l > span.pe_u { text-decoration: none; } #pe_rating.pe_g.pe_l > span.pe_u:hover, #pe_rating.pe_g.pe_l > span.pe_u:focus { text-decoration: underline; } #pe_rating.pe_g .pe_u { color: #6a6b6b; } /* Startpage > Video Reason argumentation ------------------------------------------------------------------- */ .arguments div.prehead { font-size: 1.8em; line-height: 1.1em; font-weight: 400; margin-bottom: 10px; color: #595959; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } .arguments h1 { font-size: 2.15em; line-height: 1.1em; font-weight: 400; margin-bottom: 4px; color: #005387; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } .arghead, .convihead { font-size: 1.7em; line-height: 1.1em; font-weight: 400; color: #005387; font-family: 'DINRegular', Helvetica, Arial, sans-serif; padding-top: 6px; } .convihead { line-height: 1.3em; } .convince p { font-size: 1.25em; line-height: 1.4em; font-weight: 400; color: #000101; font-family: 'DINLight', Helvetica, Arial, sans-serif; } .blank-col { color: #ececec; } @media screen and (max-width: 1360px) { .arghead { font-size: 1.325em!important; } } @media screen and (max-width: 1080px) { .arghead { font-size: 1.5em!important; text-align: right; } } @media screen and (max-width: 900px) { .arghead { font-size: 1.5em!important; text-align: inherit!important; margin-bottom: 10px; } .blank-col { display: none; } } /* Ordered list startpage -------- */ .reason ol, .reason.last ol { list-style: none; counter-reset: li; } .reason ol li { padding-left: 10px; margin-left: 14px; } .reason li:before { counter-increment: li; content: counter(li)'.'; background: #005387; color: #fff; display: inline-block; width: 22px; margin: 0 0 0 -22px; text-align: center; vertical-align: top; padding: 4px 1px 2px 2px; } .reason li { font-size: 1.2em; line-height: 1.3em; margin-bottom:20px; font-family: 'DINRegular', Helvetica, Arial, sans-serif; color: #595959; background: #eaeaea; } .reason.last ol li.first { counter-reset: li 3; } /* .reason.last ol { counter-reset: li; counter-increment: li 3; } */ .reason.last li:before { counter-increment: li; content: counter(li)'.'; } /* Lister text styling --------*/ .reason li span { margin: -22px 0 0 14px; display: inline-block; color: #595959; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } .start_promofact, .start_lister { width: inherit; } @media screen and (max-width: 1080px) { .start_promofact { width: 100%!important; margin-bottom:20px; } .start_lister { width: 45%!important; } } @media screen and (max-width: 900px) { .start_promofact, .start_lister { width: inherit!important; } .start_lister { margin: 0!important; } } /* Startpage > Video promotion ----------------------------------------- */ .startytb { position: relative; margin-top: 8px; } .ytbtext { position: absolute; top: 0; left: 0; right: 0; padding-bottom: 10px; /* background-color: rgba(53, 61, 71, 0.6); */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzM1M2Q0NyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, rgba(53,61,71,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6-15 */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(53,61,71,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome4-9,Safari4-5 */ background: -webkit-linear-gradient(top, rgba(53,61,71,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */ background: -o-linear-gradient(top, rgba(53,61,71,1) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10-11.50 */ background: -ms-linear-gradient(top, rgba(53,61,71,1) 0%,rgba(255,255,255,0) 100%); /* IE10 preview */ background: linear-gradient(to bottom, rgba(53,61,71,1) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#353d47', endColorstr='#00ffffff',GradientType=0 ); /* IE6-8 */ z-index: 1; } .ytbtext .ce_text { max-width: 29.05%; /* margin: 0 auto; */ padding: 30px 20px 10px 30px; } .ytbtext .ce_text p { margin-bottom: 6px; font-size: 1.25em; line-height: 1.4em; color: #fff; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } .ytbtext button.talkBtn { display: inline-block; margin-left: 30px; background: #e38b0c; color: #fff; vertical-align: top; padding: 10px 14px 8px 14px; font-size: 1.2em; border: none; font-family: 'DINRegular', Helvetica, Arial, sans-serif; cursor: pointer; } .ytbtext button.talkBtn:hover { background: #d4830e; transition: all 0.3s ease 0s; } .ytbtext button.talkBtn a { text-decoration: none; color: inherit!important; } @media screen and (max-width: 1280px) { .ytbtext .ce_text { max-width: 50%; } } @media screen and (max-width: 1080px) { .ytbtext .ce_text { max-width: inherit; } } @media screen and (max-width: 768px) { .ytbtext .ce_text { max-width: inherit; padding: 25px 20px 10px 20px; } .ytbtext button.talkBtn { display: none; } } @media screen and (max-width: 599px) { .ytbtext, .ytbtext button.talkBtn { display: none; } } /* Start video ----- */ .startytb .centered-wrapper-inner.-fullwidth { padding: 0!important; } .youstart .ce_youtube-wrapper { margin: 0!important; } .ce_youtube.youstart { position: relative; padding-bottom: 41.65%; /*56.25%;*/ width: 100%; height: auto; max-height: 540px; } .ce_youtube iframe { position: absolute; top: 0; left: -1; right: 0; bottom: 0; width: 100% !important; height: 100% !important; } @media screen and (max-width: 900px) { .youstart div.ce_youtube-wrapper[style] { padding-bottom: 58.06%!important; } .youstart div.ce_youtube-wrapper iframe, .youstart div.ce_youtube-wrapper object, .youstart div.ce_youtube-wrapper embed { position: absolute; top: -10%!important; left: -10%!important; width: 120%!important; height: 120%!important; } .ce_youtube.youstart { padding-bottom: 56.06%;} } @media screen and (max-width: 599px) { .youstart div.ce_youtube-wrapper[style] { padding-bottom: 82.06%!important; } .youstart .ce_youtube-wrapper iframe, .youstart .ce_youtube-wrapper object, .youstart .ce_youtube-wrapper embed { position: absolute; top: -10%!important; left: -20%!important; width: 140%!important; height: 140%!important; } } /* Klicktipp > Lead-Magnet popup ------------------------------------------------------------------- */ .euf_overlay { z-index:500!important; } .euf_overlay__close { padding: 0.05rem 0.75rem; font-size: 2.85em!important; color: #005387; font-weight: 400; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } .euf_overlay__content.mod_euf_overlay { background: #cbedf6!important; border: 5px solid #005387; max-width: 250px!important; padding: 1em!important; } .mod_euf_overlay .klicklabel { display: none!important; } .euf_innertxt h3 { margin-top: 0.5em; margin-bottom: 4px; font-size: 1.4em; line-height: 1.25em; color: #005387; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } .euf_innertxt p { margin-bottom: 10px; font-size: 1.1em; line-height: 1.4em; color: #000; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } /* Cookiebar styling ------------------------------------------------------------------- */ /* .cookiebar { position: relative!important; text-align: left; background-color: #f5dbdb!important; border-bottom: 1px solid #e64343; color: #000101; font-family: 'DINLight', Helvetica, Arial, sans-serif; font-size: 1.15em!important; line-height: 1.3em; font-weight: 400; } .cookiebar--active { margin-bottom: 10px; } .cookiebar__message, .cookiebar__text { margin-right: inherit; display: inline; width: 78%; max-width: 1020px; } .cookiebar__link { display: inline; color: #000101; text-decoration: underline; } .cookiebar__link:hover { text-decoration: none; } .cookiebar__button { display: inline; margin: 0 1% 0 3%; background: #3c97cb; color: #fff; vertical-align: top; padding: 9px 14px 7px 14px; font-size: 1em; border: none; font-weight:400; font-family: 'DINRegular', Helvetica, Arial, sans-serif!important; } .cookiebar__button:hover { background: #3071a9; transition: all 0.3s ease 0s; } @media screen and (max-width: 990px) { .cookiebar__message, .cookiebar__text { width: 84%; } } @media screen and (max-width: 900px) { .cookiebar__message, .cookiebar__text { width: 100%; } .cookiebar__button { display: block!important; margin-top: 8px!important; } } */ .mod_cms_accept_tags { background: rgba(80, 80, 80, 0.5)!important; } .mod_cms_accept_tags .info h3 { display: inline-block; font-size: 2em; font-weight: 400; color: #005387; font-family: 'DINRegular', Helvetica, Arial, sans-serif; vertical-align: top; padding: 4px 0 10px 0; white-space: nowrap !important; } .mod_cms_accept_tags .info p { font-size: 1.25em; line-height: 1.4em; font-weight: 400; color: #000101; font-family: 'DINLight', Helvetica, Arial, sans-serif; } @media screen and (max-width: 420px){ .mod_cms_accept_tags .info h3 { font-size: 1.6em; } .mod_cms_accept_tags .info p { font-size: 1.1em; line-height: 1.4em; } } .mod_cms_accept_tags form > .tags > div { border-top: 2px solid #e0e0e0; } .mod_cms_accept_tags form > .tags > div .head label { background: #c0cfd0!important; } .mod_cms_accept_tags form > .tags > div .head input:checked + label { background: #89cbef!important; } .mod_cms_accept_tags form > .tags > div .head input:checked + label:after { background: #3c97cb!important; } .mod_cms_accept_tags form > .tags > div .head { font-size: 1.25em; line-height: 1.4em; font-weight: 700; color: #000101; font-family: 'DINLight', Helvetica, Arial, sans-serif; } .mod_cms_accept_tags form > .tags > div p { font-size: 1.1em!important; line-height: 1.4em; font-weight: 400; color: #000; font-family: 'DINLight', Helvetica, Arial, sans-serif; } @media screen and (max-width: 420px){ .mod_cms_accept_tags .formbody .widget-submit { display: block!important; margin-top: 8px!important; } .mod_cms_accept_tags form > .tags > div { flex-basis: inherit!important; display: block!important; width: 100%!important; } .mod_cms_accept_tags form > .tags > div .head { display: block!important; width: 100%!important; } .mod_cms_accept_tags form > .tags > div .head label { float:right!important;} .mod_cms_accept_tags form > .tags > div p { display: none!important; } } .mod_cms_accept_tags button[value="accept"] { display: inline-block; background: #3c97cb!important; color: #fff; vertical-align: top; padding: 10px 14px 8px 14px; font-size: 1em; border: none; font-family: 'DINRegular', Helvetica, Arial, sans-serif; cursor: pointer; } .mod_cms_accept_tags button[value="accept"]:hover { background: #3071a9; transition: all 0.3s ease 0s; } /* WhatsApp Modal obverlay box ------------------------------- */ /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 36000160; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ -webkit-animation-name: fadeIn; /* Fade in the background */ -webkit-animation-duration: 0.4s; animation-name: fadeIn; animation-duration: 0.4s } /* The WhatsApp icon */ #whicon { position: fixed; z-index: 16000160; bottom: 20px; right: 20px; overflow: hidden; text-align: center; background-color: #4dc247; border-radius: 50%; border: 1px solid #4dc247; overflow: hidden; height: 50px; width: 50px; } #whicon > div { height: 100%; width: 100%; position: relative; margin-top: -1px; /* margin-left: -3px; */ } /* Chrome selector --- */ .ch #whicon > div { margin-top: -4px; margin-left: -2px; } #whicon svg { fill: white; width: 41px; height: 50px; } /* Modal Content */ .modal-content { position: fixed; bottom: 80px; right: 16px; background-color: #fefefe; width: 80%; max-width: 258px; -webkit-animation-name: slideIn; -webkit-animation-duration: 0.4s; animation-name: slideIn; animation-duration: 0.4s } /* The Close Button */ .close { color: white; float: right; font-size: 30px; font-weight: normal; font-family: Arial, Helvetica, sans-serif; } .close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; } .modal-header { padding: 2px 16px 4px 16px; background-color: #4dc247; color: white; } .modal-header h2 { font-family: Arial, Helvetica, sans-serif; font-size: 1.2em; line-height: inherit; color: #fff; display: block; padding: 12px 0 4px 0; } .modal-header h2::before { content: " "; background: url("../../files/hydrobar/images/img_whatsapp100.png") bottom left no-repeat; background-size: 28px 28px; padding: 10px 36px 0 0; } .modal-body { margin-top: 4px; padding: 8px 16px; } .modal-body p { font-size: 1.1em; line-height: 1.4em; color: #000; font-family: 'DINRegular', Helvetica, Arial, sans-serif; } p .whbtn { margin: 8px 0; border-top: 1px solid #e0e0e0; background-color: #4dc247; display: block; padding: 8px 4px 4px 4px; color: #fff; text-align: center; } /* Add Animation */ @-webkit-keyframes slideIn { from {bottom: -300px; opacity: 0} to {bottom: 80; opacity: 1} } @keyframes slideIn { from {bottom: -300px; opacity: 0} to {bottom: 80; opacity: 1} } @-webkit-keyframes fadeIn { from {opacity: 0} to {opacity: 1} } @keyframes fadeIn { from {opacity: 0} to {opacity: 1} } /* Certificate with overlay light-box ------------------------------- */ /* Certificate Settings */ .cert { zoom: 1; clear: both; /* display: flow-root; */ } .cert:before { content: ""; display: table; } .cert:after { content: ""; display: table; clear: both; } .cert-item { position: relative; float: left; overflow: hidden; color: inherit; } /* .cert-item:nth-of-type(even) { border-color: #b2b9c4; }*/ /* Certificate Grid */ /* -verylarge-col-4-1 -large-col-4-1 -medium-col-2-1 -small-col-1-1 */ section.cert-item:nth-child(5n+1).-large-col-4-1 { clear: left; } .cert-item.-verylarge-col-4-1, .cert-item.-large-col-4-1 { width: 25%; } @media screen and (max-width: 900px) { /* section.cert-item:nth-child(3n+1).-large-col-4-1 { clear: left; } */ .cert-item.-medium-col-3-1 { width: 33.33333%!important; } } @media screen and (max-width: 599px) { .cert-item.-small-col-2-1 { width: 50%!important; } } .cert-item-image { position: relative; display: block; overflow: hidden; border: 2px solid #3e3e3e; margin: 4px; } .cert-item-image img { display: block; width: 100%; height: auto; } /* Styles the lightbox, removes it from sight and adds the fade-in transition */ .diabox-target { position: fixed; top: -100%; left: 0; background: rgba(0,0,0,.8); width: 100%; opacity: 0; -webkit-transition: opacity .5s ease-in-out; -moz-transition: opacity .5s ease-in-out; -o-transition: opacity .5s ease-in-out; transition: opacity .5s ease-in-out; overflow: hidden; z-index: 99999999; } /* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */ .diabox-target img { margin: auto; position: absolute; top: 0; left:0; right:0; bottom: 0; max-height: 0%; max-width: 50%; width:580px; border: 3px solid white; box-shadow: 0px 0px 8px rgba(0,0,0,.3); box-sizing: border-box; -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; } /* Styles the close link, adds the slide down transition */ a.diabox-close { display: block; width:50px; height:50px; box-sizing: border-box; background: white; color: black; text-decoration: none; position: absolute; top: -80px; right: 0; -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; } /* Provides part of the "X" to eliminate an image from the close link */ a.diabox-close:before { content: ""; display: block; height: 30px; width: 1px; background: black; position: absolute; left: 26px; top:10px; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); } /* Provides part of the "X" to eliminate an image from the close link */ a.diabox-close:after { content: ""; display: block; height: 30px; width: 1px; background: black; position: absolute; left: 26px; top:10px; -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -o-transform:rotate(-45deg); transform:rotate(-45deg); } /* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */ .diabox-target:target { opacity: 1; top: 0; bottom: 0; } .diabox-target:target img { max-height: 100%; max-width: 100%; } .diabox-target:target a.diabox-close { top: 0px; } /* User centric Cookie consent */ .usercentrics-button .privacy-chip-wrapper { cursor: pointer; font-size: 12px!important; text-align: center; }