body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul,.content-gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li,.content-gallery>ul li{float:left}.ce_gallery>ul li.col_first,.content-gallery>ul li.col_first{clear:left}.float_left,.media--left>figure{float:left}.float_right,.media--right>figure{float:right}.block{overflow:hidden}.media{display:flow-root}.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}.audio_container audio{max-width:100%}.video_container video{max-width:100%;height:auto}.aspect,.responsive{position:relative;height:0}.aspect iframe,.responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%}.aspect--16\:9,.responsive.ratio-169{padding-bottom:56.25%}.aspect--16\:10,.responsive.ratio-1610{padding-bottom:62.5%}.aspect--21\:9,.responsive.ratio-219{padding-bottom:42.8571%}.aspect--4\:3,.responsive.ratio-43{padding-bottom:75%}.aspect--3\:2,.responsive.ratio-32{padding-bottom:66.6666%} legend{width:100%;display:block;font-weight:700;border:0}input[type=text],input[type=password],input[type=date],input[type=datetime],input[type=email],input[type=number],input[type=search],input[type=tel],input[type=time],input[type=url],input:not([type]),textarea{width:100%;display:inline-block;padding:3px 6px;background:#fff;border:1px solid #ccc;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-moz-box-shadow:inset 0 1px 1px #eee;-webkit-box-shadow:inset 0 1px 1px #eee;box-shadow:inset 0 1px 1px #eee;-moz-transition:all .15s linear;-webkit-transition:all .15s linear;-o-transition:all .15s linear;transition:all .15s linear;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}input[type=text]:focus,input[type=password]:focus,input[type=date]:focus,input[type=datetime]:focus,input[type=email]:focus,input[type=number]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=time]:focus,input[type=url]:focus,input:not([type]):focus,textarea:focus{outline:0;background:#fcfcfc;border-color:#bbb}input[type=file]{cursor:pointer}select,input[type=file]{display:block}form button,input[type=file],input[type=image],input[type=submit],input[type=reset],input[type=button],input[type=radio],input[type=checkbox]{width:auto}textarea,select[multiple],select[size]{height:auto}input[type=radio],input[type=checkbox]{margin:0 3px 0 0}input[type=radio],input[type=checkbox],label{vertical-align:middle}input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{cursor:not-allowed;background:#eee}input[type=radio][disabled],input[type=checkbox][disabled],input[type=radio][readonly],input[type=checkbox][readonly]{background:0 0}form button,input[type=submit],.button{display:inline-block;padding:4px 15px 4px 14px;margin-bottom:0;text-align:center;vertical-align:middle;line-height:16px;font-size:11px;color:#000;cursor:pointer;border:1px solid #ccc;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#ececec;background-image:-moz-linear-gradient(top,#fff,#ececec);background-image:-webkit-linear-gradient(top,#fff,#ececec);background-image:-ms-linear-gradient(top,#fff,#ececec);background-image:-o-linear-gradient(top,#fff,#ececec);background-image:linear-gradient(to bottom,#fff,#ececec);background-repeat:repeat-x;-moz-transition:background .15s linear;-webkit-transition:background .15s linear;-o-transition:background .15s linear;transition:background .15s linear}form button:hover,input[type=submit]:hover,.button:hover{text-decoration:none;background-position:0 -15px!important}form button:active,input[type=submit]:active,.button:active{background-color:#e6e6e6;background-position:0 -30px!important}form button.blue,input[type=submit].blue,.button.blue{background-color:#2f96b4;background-image:-moz-linear-gradient(top,#5bc0de,#2f96b4);background-image:-webkit-linear-gradient(top,#5bc0de,#2f96b4);background-image:-ms-linear-gradient(top,#5bc0de,#2f96b4);background-image:-o-linear-gradient(top,#5bc0de,#2f96b4);background-image:linear-gradient(to bottom,#5bc0de,#2f96b4);border-color:#2f96b4;color:#fff}form button.blue:active,input[type=submit].blue:active,.button.blue:active{background-color:#2e95b3}form button.green,input[type=submit].green,.button.green{background-color:#51a351;background-image:-moz-linear-gradient(top,#62c462,#51a351);background-image:-webkit-linear-gradient(top,#62c462,#51a351);background-image:-ms-linear-gradient(top,#62c462,#51a351);background-image:-o-linear-gradient(top,#62c462,#51a351);background-image:linear-gradient(to bottom,#62c462,#51a351);border-color:#51a351;color:#fff}form button.green:active,input[type=submit].green:active,.button.green:active{background-color:#4f9f4f}form button.orange,input[type=submit].orange,.button.orange{background-color:#f89406;background-image:-moz-linear-gradient(top,#fbb450,#f89406);background-image:-webkit-linear-gradient(top,#fbb450,#f89406);background-image:-ms-linear-gradient(top,#fbb450,#f89406);background-image:-o-linear-gradient(top,#fbb450,#f89406);background-image:linear-gradient(to bottom,#fbb450,#f89406);border-color:#f89406;color:#fff}form button.orange:active,input[type=submit].orange:active,.button.orange:active{background-color:#f28f04}form button.red,input[type=submit].red,.button.red{background-color:#bd362f;background-image:-moz-linear-gradient(top,#ee5f5b,#bd362f);background-image:-webkit-linear-gradient(top,#ee5f5b,#bd362f);background-image:-ms-linear-gradient(top,#ee5f5b,#bd362f);background-image:-o-linear-gradient(top,#ee5f5b,#bd362f);background-image:linear-gradient(to bottom,#ee5f5b,#bd362f);border-color:#bd362f;color:#fff}form button.red:active,input[type=submit].red:active,.button.red:active{background-color:#be322b}.widget{margin-bottom:12px}.widget>label{display:block;margin-bottom:6px;font-weight:700}.inline-form .widget{display:inline-block;margin-bottom:0;vertical-align:middle}.horizontal-form .widget:after{content:"";display:table;clear:both}.horizontal-form .widget>label{width:20%;float:left;padding:3px 2% 0 0;text-align:right}.horizontal-form .widget>input,.horizontal-form .widget>textarea{width:78%;float:left}.horizontal-form .widget>fieldset{margin-left:20%} .mod_visitors .invisible { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; float: left; width:0px; height:0px; } .mobile_menu{position:fixed;z-index:100;display:none}.mobile_menu .inner{height:100%;background:#000;overflow-y:scroll}.mobile_menu.active.position_left{box-shadow:2px 0 5px 0 rgba(0,0,0,.5)}.mobile_menu.active.position_top{box-shadow:0 2px 5px 0 rgba(0,0,0,.5)}.mobile_menu.active.position_right{box-shadow:-2px 0 5px 0 rgba(0,0,0,.5)}.mobile_menu.active.position_bottom{box-shadow:0 -2px 5px 0 rgba(0,0,0,.5)}.mobile_menu.active.no_shadow{box-shadow:none!important}.mobile_menu_trigger{display:none}.mobile_menu_wrapper{position:relative;width:100%;overflow:hidden}.mobile_menu_overlay{position:fixed;top:0;left:0;width:100%;height:100vh;z-index:99}.mobile_menu_overlay.background{background:rgba(0,0,0,.5)}.mobile_menu li.submenu_hide>ul{display:none}.mobile_menu li.submenu_show>ul{display:block}body.ie8 .mobile_menu,body.ie8 .mobile_menu_trigger,body.ie9 .mobile_menu,body.ie9 .mobile_menu_trigger{display:none!important} .sharebuttons { overflow:hidden; } .sharebuttons > ul.theme { list-style-type:none; margin:-4px; padding:0; } .sharebuttons > ul.theme:after { content:""; display:block; clear:both; } .sharebuttons > ul.theme > li { float:left; } .sharebuttons > ul.theme > li > a { margin:4px; display:block; white-space:nowrap; overflow:hidden; text-indent:101%; background-repeat:no-repeat; background-position:center; } .sharebuttons > ul.text > li > a { text-indent:0; } .sharebuttons > ul.fontawesome > li > a { text-indent:0; text-decoration:none; font-size:24px; width:32px; height:32px; line-height:32px; text-align:center; color:#606060; transition:0.4s; } .sharebuttons > ul.fontawesome > li > a:hover { color:#000; } /* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; } [dir='rtl'] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } .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%; } } #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} table.sortable thead th{background-image:url(../../assets/tablesorter/images/default.svg);background-repeat:no-repeat;background-position:center right}table.sortable thead th.tablesorter-headerAsc{background-image:url(../../assets/tablesorter/images/asc.svg)}table.sortable thead th.tablesorter-headerDesc{background-image:url(../../assets/tablesorter/images/desc.svg)} .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} /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers. */ body { margin: 0; } /** * Render the `main` element consistently in IE. */ main { display: block; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * Remove the gray background on active links in IE 10. */ a { background-color: transparent; } /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Remove the border on images inside links in IE 10. */ img { border-style: none; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Remove the default vertical scrollbar in IE 10+. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10. * 2. Remove the padding in IE 10. */ [type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in Edge, IE 10+, and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Misc ========================================================================== */ /** * Add the correct display in IE 10+. */ template { display: none; } /** * Add the correct display in IE 10. */ [hidden] { display: none; } .float_left { float: left; } .float_right { float: right; } .invisible { width: 0; height: 0; left: -1000px; top: -1000px; position: absolute; overflow: hidden; display: inline; } /* 100 fein Thin (Hairline) 200 extraleicht Extra Light (Ultra Light) 300 leicht Light 400 normal Normal (Regular) 500 medium Medium 600 halbfett Semi Bold (Demi Bold) 700 fett Bold 800 extrafett Extra Bold (Ultra Bold) 900 schwarz Black (Heavy) 950 extraschwarz Extra Black (Ultra Black) */ /* magra-regular - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Magra'; font-style: normal; font-weight: 400; src: url('/files/theme/fonts/magra-v14-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* magra-700 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Magra'; font-style: normal; font-weight: 700; src: url('/files/theme/fonts/magra-v14-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* permanent-marker-regular - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Permanent Marker'; font-style: normal; font-weight: 400; src: url('/files/theme/fonts/permanent-marker-v16-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* source-sans-3-regular - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Source Sans 3'; font-style: normal; font-weight: 400; src: url('/files/theme/fonts/source-sans-3-v18-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* source-sans-3-700 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Source Sans 3'; font-style: normal; font-weight: 700; src: url('/files/theme/fonts/source-sans-3-v18-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* Columns die class .div-2-columns, .div-3-columns, .div-4-columns einem Element geben, das direkte Childelemente hat, die in Spalten sollen. Es sollten dann keine Header oder sonstwas parallel zu den divs liegen. Einstellungen: Entweder die Variablen unter default-config direkt verändern, oder, um diese zu erhalten, eine neue Instanz erstellen. Neue Instanz: ***-custom-1.less kopieren als ***-custom-2.less (oder -3 usw.) und diese bei "Import der zu nutzenden Instanzen" importieren. In der Kopie im Klassennamen den Zähler einen hochzählen, also aus .***-1 wird .***-2. In der Kopie können nun eigene Werte für die Variablen gesetzt werden. */ .div-2-columns { display: flex; flex-wrap: wrap; justify-content: space-between; } .div-2-columns > div { flex: 0 1 calc((100% - 40px * (2 - 1)) / 2); } .div-2-columns-shrink2fit { display: flex; flex-wrap: wrap; justify-content: left; } .div-2-columns-shrink2fit > div:first-child { flex-basis: unset; flex-shrink: 1; } .div-2-columns-shrink2fit > div:last-child { flex-basis: unset; flex-shrink: 0; flex-grow: 1; } .div-3-columns { display: flex; flex-wrap: wrap; justify-content: space-between; } .div-3-columns > div { flex: 0 1 calc((100% - 40px * (3 - 1)) / 3); } .div-4-columns { display: flex; flex-wrap: wrap; justify-content: space-between; } .div-4-columns > div { flex: 0 1 calc((100% - 40px * (4 - 1)) / 4); } #main .mod_article.div-2-columns { display: block; } #main .mod_article.div-2-columns .article-inside { display: flex; flex-wrap: wrap; justify-content: space-between; } #main .mod_article.div-2-columns .article-inside > div { flex: 0 1 calc((100% - 40px * (2 - 1)) / 2); } #main .mod_article.div-3-columns { display: block; } #main .mod_article.div-3-columns .article-inside { display: flex; flex-wrap: wrap; justify-content: space-between; } #main .mod_article.div-3-columns .article-inside > div { flex: 0 1 calc((100% - 40px * (3 - 1)) / 3); } #main .mod_article.div-4-columns { display: block; } #main .mod_article.div-4-columns .article-inside { display: flex; flex-wrap: wrap; justify-content: space-between; } #main .mod_article.div-4-columns .article-inside > div { flex: 0 1 calc((100% - 40px * (4 - 1)) / 4); } @media only screen and (max-width: 900px) { .div-2-columns > div, .div-3-columns > div, .div-4-columns > div { flex: 0 1 100%; } #main .mod_article.div-2-columns .article-inside > div, #main .mod_article.div-3-columns .article-inside > div, #main .mod_article.div-4-columns .article-inside > div { flex: 0 1 100%; margin-bottom: 4rem; } } /* @layout-header-sticky: true; @content-padding: @layout-content-padding; @layout-content-padding-mobile: calc(@layout-content-padding / 2); @layout-limited-width: 960px; // General Colors @color-body-bg: #eee; @color-container-bg: #fff; @color-topbar-bg: @color-gray-dark; @color-header-bg: rgba(255, 255, 255, 0.5); @color-slider-bg: rgba(255, 255, 255, 1); @color-footer-bg: @color-gray-light; @color-bottom-bg: @color-gray-dark; @color-container: @color-text; @color-topbar: @color-text; @color-header: @color-text; @color-slider: @color-text; @color-footer: @color-gray-light; @color-footer-links: @color-text; @color-footer-links-hover: @color-links-hover-inverted; @color-bottom: @color-text; @color-bottom-links: @color-links-inverted; @color-bottom-links-hover: @color-links-hover-inverted; // Wenn @width-mode-wrapper = boxed, dann sind die anderen nicht boxed, aber eben alle gefangen im boxed wrapper //fullwidth: element & inside 100% Breite, kein padding //fullwidth-boxed-content: Element 100% Breite, inside auf Contentbreite, zentriert, kein padding //fullwidth-boxed-content-padding: wie fullwidth-boxed-content, mit padding //boxed: Element ist an sich auf Contentbreite limitiert und zentriert, inside dann wie elementbreite, kein padding @width-mode-wrapper: 'fullwidth'; // boxed || fullwidth: Dann können die einzelnen elemente machenwas sie wollen @width-mode-topbar: 'fullwidth-boxed-content-padding'; // boxed, fullwidth-boxed-content, fullwidth,fullwidth-boxed-content-padding @width-mode-header: 'fullwidth-boxed-content-padding'; // boxed, fullwidth-boxed-content, fullwidth,fullwidth-boxed-content-padding @width-mode-slider: 'fullwidth'; // boxed, fullwidth-boxed-content, fullwidth,fullwidth-boxed-content-padding @width-mode-container: 'fullwidth'; // boxed oder fullwidth. Bei fullwidth machen left-column und/oder right-column keinen sinn. @width-mode-footer: 'fullwidth-boxed-content-padding'; // boxed, fullwidth-boxed-content, fullwidth,fullwidth-boxed-content-padding @width-mode-bottom: 'fullwidth-boxed-content-padding'; // boxed, fullwidth-boxed-content, fullwidth,fullwidth-boxed-content-padding */ body { background-color: #fff; } #wrapper { display: flex; flex-direction: column; min-height: 100vh; } #topbar { background-color: #efe8e2; color: black; width: 100%; } #topbar > .inside { max-width: 1200px; margin: 0 auto; height: 100%; padding-left: 20px; padding-right: 20px; } @media only screen and (max-width: 900px) { } #header { background-color: white; color: #263843; z-index: 9; position: sticky; top: 0; transition: border-bottom 0.5s ease-in-out; width: 100%; } #header > .inside { max-width: 1200px; margin: 0 auto; height: 100%; padding-left: 20px; padding-right: 20px; } @media only screen and (max-width: 900px) { #header > .inside { justify-content: space-around; } } .fixed-header #header { border-bottom: 1px solid #eee; } #slider { background-color: #fff; color: #263843; width: 100%; position: relative; } #slider > .inside { width: 100%; height: 100%; } #wrapper .mod_article, #wrapper .mod_article .article-inside { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; width: 100%; } #wrapper .mod_article.limited, #wrapper .mod_article .article-inside.limited { width: 960px; max-width: 100%; margin: 0 auto; } #container { background-color: #fff; color: #263843; flex: 1 0 auto; width: 100%; } #container #main .mod_article .article-inside { max-width: 1200px; margin: 0 auto; height: 100%; padding-left: 20px; padding-right: 20px; } @media screen and (max-width: 900px) { #container #main .mod_article .article-inside { padding-left: calc(20px / 2); padding-right: calc(20px / 2); } } #container #main .mod_article.fullwidth .article-inside { max-width: unset; width: 100%; margin: 0; height: 100%; padding-left: 0; padding-right: 0; } #container { width: 100%; position: relative; } #main { float: none; height: 100%; } #main .inside { padding-top: 0; } #footer { background-color: #f9f5f3; padding: 50px 0; width: 100%; } #footer, #footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6, #footer p, #footer ul, #footer li { color: black; } #footer a:not(.prime-button) { color: black; } #footer a:not(.prime-button):hover { color: #263843; } #footer > .inside { max-width: 1200px; margin: 0 auto; height: 100%; padding-left: 20px; padding-right: 20px; } #footer .inside .footer-columns { display: flex; flex-wrap: wrap; justify-content: space-between; flex-wrap: nowrap; } #footer .inside .footer-columns > div { flex: 0 1 calc((100% - 40px * (4 - 1)) / 4); } #bottom { background-color: black; color: white; padding: 10px 0; width: 100%; } #bottom a { color: white; } #bottom a:hover { color: #E7EAEE; } #bottom > .inside { max-width: 1200px; margin: 0 auto; height: 100%; padding-left: 20px; padding-right: 20px; } .mod_article.bg-extended-3 { background-color: #8C8782; } @media only screen and (max-width: 900px) { #footer .inside .footer-columns { flex-direction: column; flex-wrap: wrap; } #footer .inside .footer-columns > *[class^="footer-col"] { width: 100%; } #footer .inside .footer-columns p { margin-top: 0.25rem; } } /* MIXINS für Layout */ .fullwidth-boxed-content { width: 100%; position: relative; } .fullwidth-boxed-content > .inside { max-width: 1200px; margin: 0 auto; height: 100%; } .fullwidth { width: 100%; position: relative; } .fullwidth > .inside { width: 100%; height: 100%; } .boxed { max-width: 1200px; margin: 0 auto; } .boxed > .inside { max-width: unset; margin: unset; } .fullwidth-boxed-content-padding { width: 100%; } .fullwidth-boxed-content-padding > .inside { max-width: 1200px; margin: 0 auto; height: 100%; padding-left: 20px; padding-right: 20px; } #header .inside { display: flex; align-items: center; justify-content: space-between; } #topbar .inside { display: flex; justify-content: flex-end; padding: 0.25rem 0 calc(1rem / 2) 0; } @media only screen and (max-width: 1200px) { #topbar .inside { justify-content: flex-start; } } #footer .footer-socials-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; } #footer .footer-socials-bar .socials { padding: 0; } #footer .footer-socials-bar p { font-size: 1.875rem; font-weight: bold; } @media only screen and (max-width: 1200px) { #footer .footer-socials-bar { flex-direction: column; } #footer .footer-socials-bar div:nth-child(3) { margin-top: 25px; } } #footer h4 { font-size: 1.875rem; font-weight: bold; } #footer p { margin-top: calc(1rem / 2); font-size: 1.375rem; line-height: 2.5rem; } .mod_article .article-right { display: none; } .mod_article.seitenspalte .article-inside { display: flex; gap: 5%; } .mod_article.seitenspalte .article-inside .article-main { flex-basis: 100%; flex-grow: 1; flex-shrink: 2; overflow-wrap: break-word; } .mod_article.seitenspalte .article-inside .article-main .content-text { padding-left: 100px; } .mod_article.seitenspalte .article-inside .article-main .content-text.media { padding-left: 0; } .mod_article.seitenspalte .article-inside .article-right { display: block; flex-basis: 300px; flex-shrink: 0; flex-grow: 1; } .mod_article.schmal .article-inside { display: flex; gap: 5%; padding: 0; } .mod_article.schmal .article-inside .article-main { flex-shrink: 1; } .mod_article.schmal .article-inside .article-main .content-text { padding-left: 100px; } .mod_article.schmal .article-inside .article-main .content-text.media { padding-left: 0; } .mod_article.schmal .article-inside .article-right { display: block; flex-basis: 300px; flex-shrink: 0; } @media only screen and (max-width: 1200px) { .article-right { flex-grow: 0; } .mod_article.seitenspalte .article-inside .article-main .content-text, .mod_article.schmal .article-inside .article-main .content-text { padding-left: 0; } } @media only screen and (max-width: 900px) { .mod_article.seitenspalte .article-inside { flex-direction: column; } .mod_article.seitenspalte .article-inside .article-right { margin-right: 0; } .mod_article.schmal .article-inside .article-main { margin-left: 0; max-width: 100%; } .mod_article.schmal .article-inside .article-right { display: none; } } /*-------------------------------------------------------------------------------------------*/ *, *:after, *:before { box-sizing: inherit; } html { box-sizing: border-box; font-family: 'Source Sans 3', 'Magra', -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif; font-size: 80%; font-weight: 400; line-height: 1.3; background-color: #ffffff; color: #263843; overflow-y: scroll; min-height: 100%; scroll-behavior: smooth; } @media only screen and (max-width: 900px) { html { font-size: 72%; } } :target { scroll-margin-top: 300px; } address, blockquote, dl, fieldset, figure, hr, ol, p, pre, ul { margin-bottom: 0; margin-top: 1rem; } dd, ol, ul { margin-left: 1rem; } a { color: #66cc00; transition: color 0.1s ease-in-out; font-weight: bold; } a:hover { color: #408000; } :not(p) a { text-decoration: none; } figure { margin: 0; } img { display: block; width: 100%; height: auto; } :focus { outline: 0; } /* Defaults @headings__font-family: @base-font-family; @headings__font-weight: 700; @paragraph__link-color: @color-links; @code__color: @color-highlight; @selection-background: @color-brand; @pre__color-background: @color-gray; @pre__color: @color-text; @selection-color: @color-text; @paragraph__link-decoration: underline; @paragraph__link-decoration--hover: none; @hr-border: @base-border; @headings-h1-font-size: 2.25rem; @headings-h2-font-size: 1.75rem; @headings-h3-font-size: 1.5rem; @headings-h4-font-size: 1.25rem; @headings-h5-font-size: 1rem; @headings-h6-font-size: 0.875rem; */ h1, h2, h3, h4, h5, h6 { font-weight: 700; font-family: 'Magra', 'Source Sans 3', 'Magra', -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif; } h1, .h2-wie-h1 h2, .h3-wie-h1 h3, .h4-wie-h1 h4, .h5-wie-h1 h5, .h6-wie-h1 h6, h2.h2-wie-h1, h3.h3-wie-h1, h4.h4-wie-h1, h5.h5-wie-h1, h6.h6-wie-h1 { font-size: 3rem; font-weight: bold; line-height: 1.3; margin-top: 0; } h2 { font-size: 2.25rem; line-height: 1.5; margin-top: 2rem; } h3 { font-size: 1.5rem; line-height: 1.5; margin-top: 2rem; } h4 { font-size: 1.375rem; line-height: 1.5; margin-top: 1.5rem; } h5 { font-size: 1.25rem; line-height: 1.5; margin-top: 1.5rem; } h6 { font-size: 1.15rem; line-height: 1.5; margin-top: 1.5rem; } h1, h2, h3, h4, h5, h6 { margin-bottom: 0; } /* // +: nur direkt folgendes Element auf gleicher Ebene // >: Nur Kind-Elemente in der nächsten Ebene, tiefere Ebenen nicht // Header, die nicht im Text nach einem p oder anderem Header stehen, haben keinen margin-top, aber einem bottom. //Auch header, die CHild von einem div sind, also wohl einen text eröffnen. // Auch p, dass als erstes Element in einem ce-text steht hat keinen topmargin div + h1, div + h2, div + h3, div + h4 , div + h5, div + h6, div > h1:first-of-type, div > h2:first-of-type, div > h3:first-of-type, div > h4:first-of-type , div > h5:first-of-type, div > h6:first-of-type, div.ce_text > p:first-child{ margin-top:0; margin-bottom:1rem; } */ p, ul, ol { font-size: 1.5rem; margin-top: 1rem; } h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p { margin-top: 0.3em; } p + p { margin-top: 1em; } code { color: #A4036f; } pre { padding: 1rem; background: ##707070; color: #263843; overflow-x: scroll; } hr { margin-top: 1rem; margin-bottom: 1rem; border: 0; border-top: 1px solid #E7EAEE; } b, strong { font-weight: bold; } .li--block { margin-bottom: 1rem; } .ce_text { margin-bottom: 1rem; } ::selection { background: #26c4c4; color: #263843; opacity: 1; } .indent { text-indent: 196px; } @media screen and (max-width: 960px) { .indent { text-indent: 0; } } h1.uppercase, .h2-wie-h1.uppercase h2, h2.h2-wie-h1.uppercase, .wie-h1.uppercase h2, h2.h2-wie-h1.uppercase { font-size: 2.813rem; font-weight: bold; line-height: 3.125rem; margin-top: 0; margin-bottom: 1rem; text-transform: uppercase; } .p-subtitle p { font-size: 1.375rem; margin-top: 0; } h1, h2, h3, h4, h5, h6 { color: black; } .color-default { color: #263843 !important; } .color-default a { color: #66cc00 !important; } .color-default a:hover { color: #408000 !important; } .color-default a.active { color: #408000 !important; } .color-default h1, .color-default h2, .color-default h3, .color-default h4, .color-default h5, .color-default h6 { color: #263843 !important; } .color-dark { color: #26c4c4 !important; } .color-dark a { color: #26c4c4 !important; } .color-dark a:hover { color: #408000 !important; } .color-dark a.active { color: #408000 !important; } .color-dark h1, .color-dark h2, .color-dark h3, .color-dark h4, .color-dark h5, .color-dark h6 { color: #26c4c4 !important; } .color-light { color: white !important; } .color-light a { color: white !important; } .color-light a:hover { color: #A4036f !important; } .color-light a.active { color: #A4036f !important; } .color-light h1, .color-light h2, .color-light h3, .color-light h4, .color-light h5, .color-light h6 { color: white !important; } /*--------------------------------------------------------------------------------------------------*/ /* Grid Einer Moduleinbindung wie z.B. news die classes = grid und cols_1 bis 6 geben. Oder einem anderen Element, dass dann direkte Kinder hat, die ins grid sollen. Keine Extraelemente wie ein Header! Galleries hat ein Extragrid, weil da die cols von Contao gesetzt werden. */ .grid { /* @grid-column-gap: (@layout-content-padding * 2); @grid-row-gap: (@layout-content-padding * 2); @grid-float-columns-breakpoint: @layout-content-breite; //variables für grid mit css grids @grid-gap: (@layout-content-padding * 2); @grid-minwidth-absolute: 225px; //Spalten werden responsive weniger, um diese Mindestspaltenbreite zu halten */ } .grid.cols_1 { display: grid; grid-auto-flow: dense; gap: 40px; grid-template-columns: repeat(auto-fill, minmax(max( ( 100% - 0px ) / 1 , 320px ), 1fr)); } .grid.cols_2 { display: grid; grid-auto-flow: dense; gap: 40px; grid-template-columns: repeat(auto-fill, minmax(max( ( 100% - 40px ) / 2 , 320px ), 1fr)); } .grid.cols_3 { display: grid; grid-auto-flow: dense; gap: 40px; grid-template-columns: repeat(auto-fill, minmax(max( ( 100% - 80px ) / 3 , 320px ), 1fr)); } .grid.cols_4 { display: grid; grid-auto-flow: dense; gap: 40px; grid-template-columns: repeat(auto-fill, minmax(max( ( 100% - 120px ) / 4 , 320px ), 1fr)); } .grid.cols_5 { display: grid; grid-auto-flow: dense; gap: 40px; grid-template-columns: repeat(auto-fill, minmax(max( ( 100% - 160px ) / 5 , 320px ), 1fr)); } .grid.cols_6 { display: grid; grid-auto-flow: dense; gap: 40px; grid-template-columns: repeat(auto-fill, minmax(max( ( 100% - 200px ) / 6 , 320px ), 1fr)); } .grid.cols_3:has( > :nth-child(2)):not(:has( > :nth-child(3))) { /* exakt 2 Elemente */ grid-template-columns: repeat(2, 1fr); } .grid.cols_3:has( > :nth-child(1)):not(:has( > :nth-child(2))) { /* exakt 1 Element */ grid-template-columns: 1fr; } .grid-inside { /* @grid-column-gap: (@layout-content-padding * 2); @grid-row-gap: (@layout-content-padding * 2); @grid-float-columns-breakpoint: @layout-content-breite; //variables für grid mit css grids @grid-gap: (@layout-content-padding * 2); @grid-minwidth-absolute: 225px; //Spalten werden responsive weniger, um diese Mindestspaltenbreite zu halten */ } .grid-inside.cols_1 { display: grid; grid-auto-flow: dense; gap: 40px; grid-template-columns: repeat(auto-fill, minmax(max( ( 100% - 0px ) / 1 , 225px ), 1fr)); } .grid-inside.cols_2 { display: grid; grid-auto-flow: dense; gap: 40px; grid-template-columns: repeat(auto-fill, minmax(max( ( 100% - 40px ) / 2 , 225px ), 1fr)); } .grid-inside.cols_3 { display: grid; grid-auto-flow: dense; gap: 40px; grid-template-columns: repeat(auto-fill, minmax(max( ( 100% - 80px ) / 3 , 225px ), 1fr)); } .grid-inside.cols_4 { display: grid; grid-auto-flow: dense; gap: 40px; grid-template-columns: repeat(auto-fill, minmax(max( ( 100% - 120px ) / 4 , 225px ), 1fr)); } .grid-inside.cols_5 { display: grid; grid-auto-flow: dense; gap: 40px; grid-template-columns: repeat(auto-fill, minmax(max( ( 100% - 160px ) / 5 , 225px ), 1fr)); } .grid-inside.cols_6 { display: grid; grid-auto-flow: dense; gap: 40px; grid-template-columns: repeat(auto-fill, minmax(max( ( 100% - 200px ) / 6 , 225px ), 1fr)); } .grid-inside.cols_1 .article-inside { display: grid; grid-auto-flow: dense; gap: 40px; grid-template-columns: repeat(auto-fill, minmax(max( ( 100% - 0px ) / 1 , 225px ), 1fr)); } .grid-inside.cols_2 .article-inside { display: grid; grid-auto-flow: dense; gap: 40px; grid-template-columns: repeat(auto-fill, minmax(max( ( 100% - 40px ) / 2 , 225px ), 1fr)); } .grid-inside.cols_3 .article-inside { display: grid; grid-auto-flow: dense; gap: 40px; grid-template-columns: repeat(auto-fill, minmax(max( ( 100% - 80px ) / 3 , 225px ), 1fr)); } .grid-inside.cols_4 .article-inside { display: grid; grid-auto-flow: dense; gap: 40px; grid-template-columns: repeat(auto-fill, minmax(max( ( 100% - 120px ) / 4 , 225px ), 1fr)); } .grid-inside.cols_5 .article-inside { display: grid; grid-auto-flow: dense; gap: 40px; grid-template-columns: repeat(auto-fill, minmax(max( ( 100% - 160px ) / 5 , 225px ), 1fr)); } .grid-inside.cols_6 .article-inside { display: grid; grid-auto-flow: dense; gap: 40px; grid-template-columns: repeat(auto-fill, minmax(max( ( 100% - 200px ) / 6 , 225px ), 1fr)); } .grid-inside.cols_1 { display: block; } .grid-inside.cols_2 { display: block; } .grid-inside.cols_3 { display: block; } .grid-inside.cols_4 { display: block; } .grid-inside.cols_5 { display: block; } .grid-inside.cols_6 { display: block; } /*----------------------------------------------------------------------------------------------------------------*/ p.font-color-brand { color: #ee7203; } p.font-size-xxl { font-size:4rem; } .spalten-foto.media { display: flex; } .spalten-foto.media figure { float: none; flex-basis: 30%; flex-shrink: 0; } .spalten-foto.media.media--right figure { order: 1; } .spalten-foto.media h1, .spalten-foto.media h2, .spalten-foto.media h3, .spalten-foto.media h4 { margin-top: 0; } .spalten-foto.media p strong { color: #26c4c4; } @media only screen and (max-width: 900px) { .spalten-foto.media { flex-direction: column; } .spalten-foto.media figure { width: unset; } } .fullwidth-picture figure { width: 100vw; height: 500px; position: relative; overflow: hidden; margin: 0; } .fullwidth-picture figure img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; } .fullwidth-picture .overlay-wrapper { position: absolute; top: 0; left: 0; height: 400px; width: 100%; display: flex; padding: 0 40px; align-items: center; /* Vertikal zentrieren */ } .fullwidth-picture .overlay-wrapper .rte { padding: 0; } .fullwidth-picture .overlay-wrapper h1, .fullwidth-picture .overlay-wrapper h2, .fullwidth-picture .overlay-wrapper h3, .fullwidth-picture .overlay-wrapper h4, .fullwidth-picture .overlay-wrapper h5, .fullwidth-picture .overlay-wrapper h6 { color: white; margin-top: 0; } .mod_listing { padding-left: 196px; } .mod_listing select { width: 50px; } .mod_listing table { background: #E7EAEE; } .mod_listing th { padding: 10px 20px; background-color: #66cc00; } .mod_listing th a { color: white; text-transform: uppercase; } .mod_listing td { padding: 10px 20px; background-color: #efe8e2; } @media only screen and (max-width: 900px) { .mod_listing { padding-left: 0; } .mod_listing table { background: white; } } .explanation p { font-size: 1rem; color: ##707070 !important; } .member { box-shadow: 0px 3px 31px #00000029; border-radius: 0px 80px 0px 0px; } .member figure { position: relative; } .member figure img { border-radius: 4px 80px 0px 80px; } .member figure figcaption { position: absolute; bottom: 0; right: 0; padding: 4px 8px; border-radius: 14px 14px 0px 14px; background-color: #66cc00; color: white; } .member .rte { padding: calc(1rem * 2.5); color: ##707070; } .member .rte h3 { margin-top: 0; } .member .rte p:has(a[href^="/"]) { text-align: right; } .member .rte p:has(a[href^="/"]) a { position: relative; display: inline-block; text-indent: 99999px; overflow: hidden; width: 48px; height: 48px; } .member .rte p:has(a[href^="/"]) a::after { content: ""; display: inline-block; width: 48px; height: 48px; background-image: url("/files/theme/img/layout/pfeil_rechts_cards.png"); background-size: contain; background-repeat: no-repeat; position: absolute; top: 0; left: 0; } .infobox { padding-top: 1rem; padding-bottom: 1.5rem; margin: 1rem 0; } .rechte-spalte { margin-top: calc(1rem * 3); } .rechte-spalte h1, .rechte-spalte h2, .rechte-spalte h3, .rechte-spalte h4, .rechte-spalte h5, .rechte-spalte h6 { padding: 7px 15px; background-color: #5c2751; display: inline; border-radius: 14px 14px 14px 0px; font: normal normal bold 17px/20px Magra; color: #FFFFFF; margin-left: 20px; } .rechte-spalte .rte { background-color: #efe8e2; padding: 20px; margin-top: -10px; } .rechte-spalte .rte p { font: normal normal normal 16px/22px Magra; color: #5E5E5E; } .rechte-spalte .rte a { color: #66cc00; font: normal normal bold 16px/22px Magra; } .rechte-spalte:first-child { margin-top: 1rem; } .kontaktbox { margin-top: 3rem; } .kontaktbox h1, .kontaktbox h2, .kontaktbox h3, .kontaktbox h4, .kontaktbox h5, .kontaktbox h6 { padding: 7px 15px; background-color: #5c2751; display: inline; border-radius: 14px 14px 14px 0px; font: normal normal bold 17px/20px Magra; color: #FFFFFF; margin-left: 20px; } .kontaktbox .rte { background-color: #efe8e2; padding: 20px; margin-top: -10px; } .kontaktbox .rte p { font: normal normal normal 16px/22px Magra; color: #5E5E5E; } .kontaktbox .rte a { color: #66cc00; font: normal normal bold 16px/22px Magra; } .kontaktbox figure { width: 70px; display: inline-block; position: relative; top: 30px; margin-left: 50px; } .kontaktbox figure img { border-radius: 50%; } .kontaktbox .rte { padding: 40px 20px 20px 20px; } .kontaktbox .funktion { font: normal normal normal 14px/22px Magra; color: #023621; text-transform: uppercase; } .kontaktbox .name { font: normal normal bold 20px/28px Source Sans Pro; color: black; } .newsletter-sidebox { margin-top: 3rem; } .newsletter-sidebox h1, .newsletter-sidebox h2, .newsletter-sidebox h3, .newsletter-sidebox h4, .newsletter-sidebox h5, .newsletter-sidebox h6 { padding: 7px 15px; background-color: #5c2751; display: inline; border-radius: 14px 14px 14px 0px; font: normal normal bold 17px/20px Magra; color: #FFFFFF; margin-left: 20px; } .newsletter-sidebox .rte { background-color: #efe8e2; padding: 20px; margin-top: -10px; } .newsletter-sidebox .rte p { font: normal normal normal 16px/22px Magra; color: #5E5E5E; } .newsletter-sidebox .rte a { color: #66cc00; font: normal normal bold 16px/22px Magra; } .tags-of-this { margin-top: 3rem; } .tags-of-this h1, .tags-of-this h2, .tags-of-this h3, .tags-of-this h4, .tags-of-this h5, .tags-of-this h6 { padding: 7px 15px; background-color: #5c2751; display: inline; border-radius: 14px 14px 14px 0px; font: normal normal bold 17px/20px Magra; color: #FFFFFF; margin-left: 20px; } .tags-of-this .rte { background-color: #efe8e2; padding: 20px; margin-top: -10px; } .tags-of-this .rte p { font: normal normal normal 16px/22px Magra; color: #5E5E5E; } .tags-of-this .rte a { color: #66cc00; font: normal normal bold 16px/22px Magra; } .tags-of-this ul { margin-left: 0; padding-left: 0; } .tags-of-this ul li { display: inline; padding-right: 1rem; line-height: 1.5rem; } .enclosures-of-this { margin-top: 3rem; } .enclosures-of-this h1, .enclosures-of-this h2, .enclosures-of-this h3, .enclosures-of-this h4, .enclosures-of-this h5, .enclosures-of-this h6 { padding: 7px 15px; background-color: #5c2751; display: inline; border-radius: 14px 14px 14px 0px; font: normal normal bold 17px/20px Magra; color: #FFFFFF; margin-left: 20px; } .enclosures-of-this .rte { background-color: #efe8e2; padding: 20px; margin-top: -10px; } .enclosures-of-this .rte p { font: normal normal normal 16px/22px Magra; color: #5E5E5E; } .enclosures-of-this .rte a { color: #66cc00; font: normal normal bold 16px/22px Magra; } .enclosures-of-this ul { margin-left: 0; padding-left: 0; } .enclosures-of-this ul li { display: inline; padding-right: 1rem; line-height: 1.5rem; } .quote { color: white; } .quote.media--left figure { margin-right: 6rem; } .quote strong { position: relative; sont-size: 2rem; font-weight: 700; } .quote strong::before { content: '\f10d'; font-family: 'Font Awesome 6 Free'; font-size: 4rem; font-weight: 900; color: #66cc00; position: absolute; top: -30px; left: -70px; } .bio { color: white; font: normal normal normal 18px/32px Source Sans Pro; } .deko-text { font-family: 'Permanent Marker'; font-size: 1.5rem; color: #66cc00; text-transform: uppercase; text-align: center; } .colorbox { padding: calc(1rem * 2) calc(1rem * 1.5) calc(1rem * 4) calc(1rem * 1.5); margin-bottom: 25px; position: relative; border-radius: 8px; -webkit-box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0, 0, 0, 0); box-shadow: 0px 10px 13px -7px #000, 5px 5px 15px 5px rgba(0, 0, 0, 0); } .colorbox h1, .colorbox h2, .colorbox h3, .colorbox h4, .colorbox h5, .colorbox h6 { margin-top: 0; margin-bottom: 0; } .colorbox h2 + hr { max-width: 50%; border-top: 2px solid; color: inherit; margin: 0 0 calc(1rem * 1.5) 0; } .colorbox ul { margin-left: 0; padding: calc(1rem * 2) 0 calc(1rem * 2) 25px; } .colorbox ul li { list-style-type: square; font-size: 1.375rem; margin-top: calc(1rem / 2); } .colorbox p.button { position: absolute; bottom: 0; } .colorbox p:nth-last-child(2), .colorbox ul { padding-bottom: calc(1rem * 3); } .colorbox.team-member hr { max-width: 29%; border-top: 2px solid #26c4c4; margin: 0 0 calc(1rem * 4) 0; } .colorbox.team-member figure { width: 50%; } .colorbox.team-member h4 { margin-top: calc(1rem * 2); } .colorbox.team-member p { line-height: 2; } .colorbox.team-member p:has(strong) { line-height: 1.3; } @media only screen and (max-width: 900px) { .colorbox.team-member figure { width: 100%; } } /*-----------------------------------------------------------------------------*/ /* Introtext Gestaltet einen Text als Willkommenstext, ideal als erster Text auf der Homepage nach einem Slider oder Hero. Class "introtext" (oder introtext-1, introtext-2) an ein Text-Element vergeben. Textaufbau solle mit H1 beginnen, kann auch H2 und h3 und p enthalten. */ .introtext { /* Defaults @introtext-margin-top: 0; @introtext-h1-margin-bottom: 2rem; @introtext-h2-margin-bottom: 2.5rem; @introtext-p-margin-bottom: 1rem; @introtext-margin-bottom: 1rem; @introtext-h1-font-size: @headings-h1-font-size; @introtext-h2-font-size: @headings-h2-font-size; @introtext-p-font-size: @headings-h3-font-size; @introtext-maxwidth-small: 600px; @introtext-maxwidth-default: 740px; @introtext-maxwidth-medium: 840px; */ text-align: center; margin-left: auto; margin-right: auto; margin-top: 0; margin-bottom: 0; max-width: 740px; margin-left: 0; margin-right: 0; max-width: 100%; } .introtext.maxwidth-medium { max-width: 840px; } .introtext.maxwidth-small { max-width: 600px; } .introtext h1 { margin-top: 0; margin-bottom: calc(1rem * 2.5); font-size: 3rem; } .introtext h2 { margin-top: 0; margin-bottom: calc(1rem * 2.5); font-size: 2.25rem; } .introtext p { margin-top: 0; margin-bottom: calc(1rem * 2); font-size: 1.5rem; } .introtext h1, .introtext h2 { line-height: 1.2; text-transform: uppercase; } .introtext.custom-1 { /* Defaults @introtext-margin-top: 0; @introtext-h1-margin-bottom: 2rem; @introtext-h2-margin-bottom: 2.5rem; @introtext-p-margin-bottom: 1rem; @introtext-margin-bottom: 1rem; @introtext-h1-font-size: @headings-h1-font-size; @introtext-h2-font-size: @headings-h2-font-size; @introtext-p-font-size: @headings-h3-font-size; @introtext-maxwidth-small: 600px; @introtext-maxwidth-default: 740px; @introtext-maxwidth-medium: 840px; */ text-align: center; margin-left: auto; margin-right: auto; margin-top: 0; margin-bottom: 0; max-width: 740px; text-align: left; margin-left: 0; margin-right: 0; max-width: 100%; } .introtext.custom-1.maxwidth-medium { max-width: 840px; } .introtext.custom-1.maxwidth-small { max-width: 600px; } .introtext.custom-1 h1 { margin-top: 0; margin-bottom: calc(1rem * 2.5); font-size: 3rem; } .introtext.custom-1 h2 { margin-top: 0; margin-bottom: calc(1rem * 2.5); font-size: 2.25rem; } .introtext.custom-1 p { margin-top: 0; margin-bottom: calc(1rem * 2); font-size: 1.5rem; } .introtext.custom-1 h1, .introtext.custom-1 h2 { line-height: 1.2; text-transform: uppercase; margin-bottom: 0; } .introtext.custom-1 p { font-weight: 700; } .introtext.custom-2 { /* Defaults @introtext-margin-top: 0; @introtext-h1-margin-bottom: 2rem; @introtext-h2-margin-bottom: 2.5rem; @introtext-p-margin-bottom: 1rem; @introtext-margin-bottom: 1rem; @introtext-h1-font-size: @headings-h1-font-size; @introtext-h2-font-size: @headings-h2-font-size; @introtext-p-font-size: @headings-h3-font-size; @introtext-maxwidth-small: 600px; @introtext-maxwidth-default: 740px; @introtext-maxwidth-medium: 840px; */ margin-left: auto; margin-right: auto; margin-top: 0; margin-bottom: 0; max-width: 740px; text-align: center; color: white; margin-left: 0; margin-right: 0; max-width: 100%; } .introtext.custom-2.maxwidth-medium { max-width: 840px; } .introtext.custom-2.maxwidth-small { max-width: 600px; } .introtext.custom-2 h1 { margin-top: 0; margin-bottom: calc(1rem * 2.5); font-size: 3rem; } .introtext.custom-2 h2 { margin-top: 0; margin-bottom: calc(1rem * 2.5); font-size: 3rem; } .introtext.custom-2 p { margin-top: 0; margin-bottom: calc(1rem * 2); font-size: 1.5rem; } .introtext.custom-2 h1, .introtext.custom-2 h2, .introtext.custom-2 h3 { font-size: 3rem; color: white; line-height: 1.2; text-transform: uppercase; margin-bottom: 0; } .introtext.custom-2 p { font-weight: 700; } /*-----------------------------------------------------------------------------------------------------*/ /* Defaults @links-button-bg: @color-btn; @links-button-bg-hover: ligthen(@color-btn,10%); @links-button-border: 1px solid @color-btn; @links-button-border-hover: 1px solid ligthen(@color-btn,10%); @links-button-border-radius: 3px; @links-button-fontsize: 1rem; @links-button-padding: 6px 15px; @links-button-color: @color-btn-text; @links-button-color-hover: lighten(@color-btn-text,10%); @links-button-texttransform: normal; @links-ext-symbol-show: false; // true or false @links-ext-symbol: '\f08e'; */ a[href^="#lb"]::before { content: "\f15c"; font-family: "Font Awesome 6 Free"; font-size: 0.75em; margin-right: 5px; } p.back a::before { font-family: 'Font Awesome 6 Free'; content: '\f100'; font-size: inherit; line-height: inherit; display: inline-block; text-rendering: auto; -moz-osx-font-smoothing: grayscale; padding-right: 7px; margin: 2rem 0; } .button a, a.button, button.button, button.submit { display: inline-block; padding: 1rem calc(1rem * 2); margin-bottom: 0; text-align: center; vertical-align: middle; color: white; font-size: 1.375rem; cursor: pointer; border: none; border-radius: 0; background: #26c4c4; background-repeat: repeat-x; transition: background 0.15s linear; text-transform: normal; } .button a:hover, a.button:hover, button.button:hover, button.submit:hover { border: none; color: #e6e6e6; background: ligthen(#26c4c4, 10%); } #main a[href^="http"], #main a[href^="mailto:"], #main a[href^="tel:"] { font-weight: bold; } p.more { margin-top: 1.5rem; } p.more + p.more { margin-top: 0; } p.more a { text-transform: uppercase; font-weight: bold !important; } p.more a::after { content: "\f054"; font-family: "Font Awesome 6 Free"; font-size: 0.8em; margin-right: 4px; margin-left: 6px; } .button { margin-bottom: 20px; } .button a { display: block; } .button a, a.button, button.button, button.submit { font-weight: 400; } .color-dark .button a, .color-dark a.button, .color-dark button.button, .color-dark button.submit { color: white !important; } .color-dark .button a a, .color-dark a.button a, .color-dark button.button a, .color-dark button.submit a { color: white !important; } .color-dark .button a a:hover, .color-dark a.button a:hover, .color-dark button.button a:hover, .color-dark button.submit a:hover { color: #A4036f !important; } .color-dark .button a a.active, .color-dark a.button a.active, .color-dark button.button a.active, .color-dark button.submit a.active { color: #A4036f !important; } .color-dark .button a h1, .color-dark a.button h1, .color-dark button.button h1, .color-dark button.submit h1, .color-dark .button a h2, .color-dark a.button h2, .color-dark button.button h2, .color-dark button.submit h2, .color-dark .button a h3, .color-dark a.button h3, .color-dark button.button h3, .color-dark button.submit h3, .color-dark .button a h4, .color-dark a.button h4, .color-dark button.button h4, .color-dark button.submit h4, .color-dark .button a h5, .color-dark a.button h5, .color-dark button.button h5, .color-dark button.submit h5, .color-dark .button a h6, .color-dark a.button h6, .color-dark button.button h6, .color-dark button.submit h6 { color: white !important; } .color-light .button a, .color-light a.button, .color-light button.button, .color-light button.submit { background-color: #A4036f; color: #26c4c4 !important; } .color-light .button a a, .color-light a.button a, .color-light button.button a, .color-light button.submit a { color: #26c4c4 !important; } .color-light .button a a:hover, .color-light a.button a:hover, .color-light button.button a:hover, .color-light button.submit a:hover { color: #408000 !important; } .color-light .button a a.active, .color-light a.button a.active, .color-light button.button a.active, .color-light button.submit a.active { color: #408000 !important; } .color-light .button a h1, .color-light a.button h1, .color-light button.button h1, .color-light button.submit h1, .color-light .button a h2, .color-light a.button h2, .color-light button.button h2, .color-light button.submit h2, .color-light .button a h3, .color-light a.button h3, .color-light button.button h3, .color-light button.submit h3, .color-light .button a h4, .color-light a.button h4, .color-light button.button h4, .color-light button.submit h4, .color-light .button a h5, .color-light a.button h5, .color-light button.button h5, .color-light button.submit h5, .color-light .button a h6, .color-light a.button h6, .color-light button.button h6, .color-light button.submit h6 { color: #26c4c4 !important; } .button-inverted a { background-color: transparent; border-color: white; color: white; } .mod_navigation li.prime-button a, .prime-button a, a.prime-button, .second-button a, a.second-button, .third-button a, a.third-button, .shape-button a { color: white; font-size: 1.5rem; font-weight: 700; border-radius: 0px 80px 80px 80px; padding: 1rem 2rem !important; transition: background 0.2s ease; } .mod_navigation li.prime-button a, .prime-button a, a.prime-button { background-color: #f2bb05; } .mod_navigation li.prime-button a:hover, .prime-button a:hover, a.prime-button:hover { background-color: #66cc00; color: white; } .mod_navigation li.prime-button a.active, .prime-button a.active, a.prime-button.active { background-color: #61bf03; } .second-button a, a.second-button { background-color: #66cc00; } .second-button a:hover, a.second-button:hover { background-color: #26c4c4; color: white; } .second-button a.active, a.second-button.active { background-color: #61bf03; } .third-button a, a.third-button { background-color: #5c2751; } .third-button a:hover, a.third-button:hover { background-color: #A4036f; color: white; } .third-button a.active, a.third-button.active { background-color: #88055D; } .article-main:has(.tagcloud.show) .second-button a { background-color: #23afaf; } @media screen and (max-width: 900px) { .shape-button a { font-size: 1.25rem; } } /*--------------------------------------------------------------------------------------------*/ #mainmenu.mod_navigation { margin-top: 0; padding: 0; overflow: visible; flex-grow: 1; } #mainmenu.mod_navigation ul { list-style-type: none; margin: 0; padding: 0; display: flex; justify-content: space-between; } #mainmenu.mod_navigation ul li { position: relative; } #mainmenu.mod_navigation li a, #mainmenu.mod_navigation li.active strong, #mainmenu.mod_navigation li.trail strong { display: block; margin-left: 0 0 0 15px; margin-right: 0 0 0 15px; font-weight: 700; font-size: 1.25rem; } #mainmenu.mod_navigation a { color: #263843; position: relative; } #mainmenu.mod_navigation li:hover a { color: #263843; } #mainmenu.mod_navigation a.first, #mainmenu.mod_navigation strong.first { margin-left: 0; } #mainmenu.mod_navigation a.last, #mainmenu.mod_navigation strong.last { margin-right: 0; } #mainmenu.mod_navigation li.trail strong, #mainmenu.mod_navigation a.trail, #mainmenu.mod_navigation li.active strong { color: #263843; } #mainmenu.mod_navigation .level_1 > li::after { content: ""; position: absolute; left: 0; bottom: 0; height: 5px; width: 0%; background: linear-gradient(270deg, #7ADD07 0%, #1AC7D8 100%) 0% 0% no-repeat padding-box; transition: width 0.7s ease; } #mainmenu.mod_navigation .level_1 > li:hover::after, #mainmenu.mod_navigation .level_1 > li.trail::after, #mainmenu.mod_navigation .level_1 > li.active::after { width: 100%; } #mainmenu.mod_navigation.divider li a::after, #mainmenu.mod_navigation.divider li strong::after { content: ""; padding: 0; } #mainmenu.mod_navigation li:last-child a::after { content: unset; } #mainmenu.mod_navigation ul.level_2 { flex-direction: column; position: absolute; top: 100%; left: 0; background: white; padding: 1rem; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); min-width: 150px; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.7s ease; z-index: 10; } #mainmenu.mod_navigation li:hover .level_2 { opacity: 1; visibility: visible; transform: translateY(0); } #mainmenu.mod_navigation .level_2 li { margin: 0.5rem 0; } #mainmenu.mod_navigation .level_2 a { font-weight: normal; color: #333; } #mainmenu.mod_navigation .level_2 a:hover { color: green; } #mainmenu.mod_navigation ul { justify-content: space-around; } #mainmenu.mod_navigation ul li a, #mainmenu.mod_navigation ul li strong { padding: 1rem 0; } #mainmenu.mod_navigation ul li.forward.prime-button { opacity: 0; } #mainmenu.mod_navigation ul li.prime-button::after { display: none; } #mainmenu.mod_navigation ul.level_2 { padding: 20px; border-radius: 0px 0px 60px 0px; } #mainmenu.mod_navigation li:hover ul.level_2 { background-color: white; } #mainmenu.mod_navigation .level_2 li { border: none; border-top: none; padding-left: 0; } #mainmenu.mod_navigation .level_2 li:first-child { border-top: none; } @media screen and (max-width: calc(1200px - 1px)) { #mainmenu.mod_navigation ul li a, #mainmenu.mod_navigation ul li li.active a, #mainmenu.mod_navigation ul li strong { text-transform: none; } } @media screen and (max-width: 1000px) { #mainmenu.mod_navigation ul li a, #mainmenu.mod_navigation ul li li.active a, #mainmenu.mod_navigation ul li strong { font-size: 1rem; } } @media screen and (max-width: 960px) { #mainmenu.mod_navigation { display: none; } } .mod_customnav { margin-top: 0px; padding: 10px 10px; overflow: visible; /* gets vertical on mobile devices at mobil breakpoint */ } .mod_customnav ul { list-style-type: none; margin: 0; padding: 0; display: flex; justify-content: space-between; } .mod_customnav ul li { position: relative; } .mod_customnav li a, .mod_customnav li.active strong, .mod_customnav li.trail strong { display: block; margin-left: 0; margin-right: 0; font-weight: 600; font-size: 0.9rem; } .mod_customnav a { color: black; position: relative; } .mod_customnav li:hover a { color: white; } .mod_customnav a.first, .mod_customnav strong.first { margin-left: 0; } .mod_customnav a.last, .mod_customnav strong.last { margin-right: 0; } .mod_customnav li.trail strong, .mod_customnav a.trail, .mod_customnav li.active strong { color: white; } .mod_customnav .level_1 > li::after { content: ""; position: absolute; left: 0; bottom: 0; height: 5px; width: 0%; background: linear-gradient(270deg, #7ADD07 0%, #1AC7D8 100%) 0% 0% no-repeat padding-box; transition: width 0.7s ease; } .mod_customnav .level_1 > li:hover::after, .mod_customnav .level_1 > li.trail::after, .mod_customnav .level_1 > li.active::after { width: 100%; } .mod_customnav.divider li a::after, .mod_customnav.divider li strong::after { content: "|"; padding: 10px; } .mod_customnav li:last-child a::after { content: unset; } .mod_customnav ul.level_2 { flex-direction: column; position: absolute; top: 100%; left: 0; background: white; padding: 1rem; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); min-width: 150px; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.7s ease; z-index: 10; } .mod_customnav li:hover .level_2 { opacity: 1; visibility: visible; transform: translateY(0); } .mod_customnav .level_2 li { margin: 0.5rem 0; } .mod_customnav .level_2 a { font-weight: normal; color: #333; } .mod_customnav .level_2 a:hover { color: green; } @media screen and (max-width: 900px) { .mod_customnav { float: none; } .mod_customnav ul { float: none; display: flex; flex-direction: column; } .mod_customnav ul li { float: none; } .mod_customnav a, .mod_customnav strong { padding: 1em 0 1em 0; } .mod_customnav a, .mod_customnav li.active a, .mod_customnav strong { padding-left: 0; margin-left: 0; } .mod_customnav.divider li a::after, .mod_customnav.divider li strong::after { content: ""; padding: 0; } } /*----------------------------------------------------------------------------------------------*/ /* Default Values @nav-margin-top: 0; @nav-padding: 10px 10px; @nav-color-links: @color-links; @nav-color-links-hover: @color-links-hover; @nav-color-links-active: @color-links-active; @nav-active-borderbottom: 5px solid @color-links-active; @nav-links-font-size: 1rem; @nav-links-font-weight: 400; @nav-links-uppercase: false; @nav-links-margin: 0; @nav-divider =""; @nav-divider-padding = 0; // 2. Level Mainmenue" @nav-color-links-2nd: @color-links; @nav-color-links-2nd-hover: @color-links-hover; @nav-color-links-2nd-active: @color-links-active; @nav-links-2nd-font-size: 1rem; @nav-links-2nd-active-font-weight: normal; @nav-links-2nd-uppercase: false; @nav-links-2nd-padding: 7px 20px 7px 20px; @nav-links-2nd-bordertop: 5px solid @nav-color-links-2nd; //Anpassungen an bestimmten breakpoints @nav-mainnav-breakpoint-1: calc(@layout-content-breite - 1px); //Erste ANpassungen des mainnav @nav-mainnav-breakpoint-2: 1000px; //weitere Anpassungen des mainnav */ /*Main Nav mixin*/ /* defaults //Mobilemenü @nav-color-mobilemenu-trigger: @color-brand; @nav-mobilmenue-font-size: 1.25rem; @nav-mobilmenue-active-font-weight: normal; @nav-mobilmenue-color-links: @color-text; @nav-mobilmenue-color-links-active: @color-brand; @nav-color-mobilmenue-background: @color-gray-light; @nav-color-mobilmenue-background-active: @color-brand; @nav-mobilmenu-border-color: grey; */ .mod_mobile_menu { display: none; } @media screen and (max-width: 960px) { .mod_mobile_menu { display: block !important; background-color: white; text-align: right; padding: 10px 0; } .mod_mobile_menu .mobile_menu_trigger { display: block; color: #66cc00; } } .mobile_menu .inner { background: white; } .mobile_menu .mainmenumobile { display: block; } .mobile_menu .mainmenumobile ul { list-style-type: none; margin: 0; padding: 0; } .mobile_menu .mainmenumobile li { border-bottom: 1px solid #E7EAEE; } .mobile_menu .mainmenumobile li.prime-button { display: none; } .mobile_menu .mainmenumobile.second li.prime-button { border: none; padding: 20px; display: block; } .mobile_menu .mainmenumobile.second li.prime-button a.prime-button { color: white; text-align: center; } .mobile_menu .mainmenumobile li.not-in-mmenu { display: none; } .mobile_menu .mainmenumobile .level_2 > li.first { border-top: 1px solid #E7EAEE; } .mobile_menu .mainmenumobile .level_2 > li.last { margin-bottom: 0; } .mobile_menu .mainmenumobile li a, .mobile_menu .mainmenumobile li strong { font-size: 1.5rem; position: relative; display: block; padding: 15px; text-decoration: none; color: black; } .mobile_menu .mainmenumobile.second li a, .mobile_menu .mainmenumobile.second strong { font-weight: normal; } .mobile_menu .mainmenumobile .level_1 > li a.active, .mobile_menu .mainmenumobile .level_1 > li a:hover, .mobile_menu .mainmenumobile .level_1 > li strong.active { font-weight: 700; background: white; color: #66cc00; } .mobile_menu .mainmenumobile .level_1 > li a.submenu::after { content: "+"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; line-height: 36px; text-align: center; border-radius: 50%; background-color: #66cc00; color: #000; /* schwarzes Plus */ font-weight: bold; font-size: 30px; pointer-events: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); /* dezenter Rand */ } .mobile_menu .mainmenumobile li.trail > a { background: #f2f2f2; } .mobile_menu .mainmenumobile .level_2 > li > a, .mobile_menu .mainmenumobile .level_2 > li > strong { padding: 8px 8px 8px 30px; font-size: 1.25rem; } .mobile_menu .mainmenumobile .level_3 > li > a, .mobile_menu .mainmenumobile .level_3 > li > strong { padding: 8px 8px 8px 50px; font-size: 0.9rem; } /*----------------------------------------------------------------------------------------------*/ .media--left figure { width: 30%; margin-right: calc(1rem * 2); margin-bottom: 1rem; } .media--left figure img { border-radius: 0px 80px; } .media--right figure { width: 30%; margin-left: 1rem; margin-bottom: 1rem; } .media--right figure img { border-radius: 80px 0px; } .content-image figcaption, .content-text figcaption { font: normal normal normal 16px/20px Source Sans Pro; color: #5E5E5E; text-align: center; } .content-text + .content-image { margin-top: calc(1rem * 3); } .content-text + .content-image img { border-radius: 0px 80px; } @media only screen and (max-width: 599px) { .media--left figure, .media--right figure { width: 50%; } } @media only screen and (max-width: 400px) { .media--left figure, .media--right figure { width: 100%; float: none; margin-left: 0; margin-right: 0; } } /*-----------------------------------------------------------------------------------------*/ /* Zu Breadcrumbs gibt es einen Abschnitt in scripts.js, da das Modul immer den Startknoten-Namen als erstes Element ausgibt, und Home halt die erste "Unterseite" ist. Die meisten wollen aber Home als erstes Element und bei Home eben nicht root >> Home. !!! Der Homepage die class=not-in-breadcrumbs geben */ /* default @breadcrumbs-fontsize-link: 1.3rem; @breadcrumbs-color-link: @color-links; @breadcrumbs-color-link-hover: @color-links-active; @breadcrumbs-color-link-active: @color-links-active; @breadcrumbs-padding: 5px; @breadcrumbs-marker: '>>'; @breadcrumbs-marker-padding: 5px; */ .mod_breadcrumb { padding-left: 20px; padding-right: 20px; } .mod_breadcrumb ul { list-style-type: none; margin: 0; padding: 0; } .mod_breadcrumb ul li { display: inline-block; padding-left: 5px; } .mod_breadcrumb ul li:first-child { padding-left: 0; } .mod_breadcrumb ul li::after { content: '>'; font-size: inherit; line-height: inherit; display: inline-block; text-rendering: auto; -moz-osx-font-smoothing: grayscale; padding-left: 5px; color: #8C8782; } .mod_breadcrumb ul li:last-child::after { display: none; } .mod_breadcrumb ul li, .mod_breadcrumb ul li a { /*text-transform: uppercase;*/ font-weight: normal; font-size: 1.1rem; opacity: 1; } .mod_breadcrumb ul li a { color: #8C8782; transition: all 0.2s ease-in-out; } .mod_breadcrumb ul li a:hover { color: #8C8782; } .mod_breadcrumb ul li.active { color: #8C8782; } .not-in-breadcrumbs #wrapper .mod_breadcrumb li.first { display: none; } @media screen and (max-width: 900px) { .mod_breadcrumb { display: none; } } .mod_breadcrumb { padding-top: 0; padding-bottom: 0.3rem; background-color: #efe8e2; } .mod_breadcrumb ul { max-width: 1200px; margin: 0 auto; padding-left: 98px; } @media screen and (max-width: 1000px) { .mod_breadcrumb { display: block; } .mod_breadcrumb ul { padding-left: 0; } } .home .mod_breadcrumb { display: none; } /*--------------------------------------------------------------------------------------------------------------*/ /* Der einzelne Slide-Container */ [data-rsts-name] { position: relative; /* Bezugspunkt für absolute Kinder */ overflow: hidden; /* Sicherheit bei Überschneidungen */ } /* Das Bild soll den 560px-Slot füllen wie vorher */ [data-rsts-name] .content-image picture, [data-rsts-name] .content-image img { display: block; width: 100%; height: 560px; /* deine fixe Slider-Höhe */ object-fit: cover; object-position: center; /* ggf. anpassen */ } /* Der Text-Container liegt über dem Bild */ [data-rsts-name] .slider-content { position: absolute; inset: 0; /* top/right/bottom/left: 0 */ display: flex; /* für bequeme Ausrichtung */ align-items: flex-start; /* z.B. unten links… */ justify-content: flex-start; flex-direction: column; } /* Der eigentliche Text darf wieder interaktiv sein */ [data-rsts-name] .slider-content .rte { pointer-events: auto; max-width: 70ch; /* Lesebreite begrenzen (optional) */ color: #fff; /* Kontrast */ text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); /* Lesbarkeit auf hellem Bild */ } /* default @header-min-height: (@layout-content-breite / 4); @header-max-height: (@layout-content-breite / 2); @header-position: center center; @slider-content-padding: 140px 100px; @slider-control-prev-icon: '\f104'; @slider-control-next-icon: '\f105'; @slider-control-padding: 5px; @slider-control-font-size: 2rem; */ .img-header img { width: 100%; max-width: 100%; height: auto; min-height: 400px; max-height: 485px; object-fit: cover; object-position: bottom center; } .img-header.pos-left-center img { object-position: left center; } .img-header.pos-right-center img { object-position: right center; } .img-header.pos-top-center img { object-position: top center; } .img-header.pos-top-left img { object-position: top left; } .img-header.pos-top-right img { object-position: top right; } .img-header.pos-bottom-center img { object-position: bottom center; } .img-header.pos-bottom-left img { object-position: bottom left; } .img-header.pos-bottom-right img { object-position: bottom right; } .overlay-wrapper { position: absolute; top: 0; left: 0; width: 100%; } .overlay-wrapper .content, .overlay-wrapper .rte { max-width: 1200px; margin: 0 auto; padding: 60px 0 0 0; } .mod_rocksolid_slider .rsts-next, .mod_rocksolid_slider .rsts-prev { top: calc(50% - 2rem / 2); font-size: 0; line-height: 0; margin: 0; } .mod_rocksolid_slider .rsts-prev { left: max(10px, calc((100% - 1200px) / 2 + 10px)); right: unset; } .mod_rocksolid_slider .rsts-next { left: unset; right: max(10px, calc((100% - 1200px) / 2 + 10px)); } @media only screen and (max-width: 900px) { .mod_rocksolid_slider .mod_rocksolid_slider { height: 150px; } } .img-header.slim { min-height: 280px; max-height: 280px; } .overlay-wrapper .content, .overlay-wrapper .rte { padding-left: 98px; padding-right: 98px; } .overlay-wrapper .content p em, .overlay-wrapper .rte p em { font-family: 'Permanent Marker'; font-size: 1.25rem; color: #66cc00; } .overlay-wrapper .content h1, .overlay-wrapper .rte h1 { color: white; text-transform: uppercase; font-size: 3rem; } .overlay-wrapper .content p, .overlay-wrapper .rte p { color: white; font-size: 1.5rem; } @media only screen and (max-width: 900px) { .overlay-wrapper .content, .overlay-wrapper .rte { padding-left: 20px; padding-right: 20px; padding-top: 20px; } .overlay-wrapper .content p em, .overlay-wrapper .rte p em { color: #66cc00; } } .rsts-slide > div:first-of-type .slider-content { max-width: 1200px; margin: 0 auto; padding-left: 98px; padding-right: 98px; padding-top: 5%; } .rsts-slide > div:first-of-type .slider-content .rte p em { font-family: 'Permanent Marker'; font-size: 1.25rem; color: #66cc00; } .rsts-slide > div:first-of-type .slider-content .rte h1 { color: white; text-transform: uppercase; font-size: 3rem; } .rsts-slide > div:first-of-type .slider-content .rte p { color: white; font-size: 1.5rem; } .mod_article.header .article-inside { position: relative; } .weisse-welle { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100vw; height: 118px; background-image: url('/files/images/page-headers/welle_weiss-2.png'); background-repeat: repeat-x; background-position: center bottom; background-size: 1920px 118px; /* oder auto 100% wenn Höhe fix bleiben soll */ pointer-events: none; } .beige-welle { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100vw; height: 118px; background-image: url('/files/images/page-headers/welle_weiss-2.png'); background-repeat: repeat-x; background-position: center bottom; background-size: 1920px 118px; /* oder auto 100% wenn Höhe fix bleiben soll */ pointer-events: none; background-image: url('/files/images/page-headers/welle_beige-2.png'); } .mod_rocksolid_slider { width: 100%; max-height: 560px; min-height: 450px !important; padding-bottom: 0; } .mod_rocksolid_slider .rsts-nav-bullets { position: absolute; right: unset; top: unset; bottom: 0; left: 50%; transform: translate(-50%, 0); z-index: 1; } .mod_rocksolid_slider .rsts-nav-bullets ul { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 5px; background-color: white; border-radius: 15px; } .mod_rocksolid_slider .rsts-nav-bullets ul li { padding: 4px; } .mod_rocksolid_slider .rsts-nav-bullets ul li a { display: block; width: 11px; height: 11px; padding: 0; font-size: 0; line-height: 0; border: none; background-color: black; border-radius: 50%; outline: none; cursor: pointer; transition: all 0.3s ease; } .mod_rocksolid_slider .rsts-nav-bullets ul li a.active { background-color: #66cc00; box-shadow: none; } .mod_rocksolid_slider .rsts-next, .mod_rocksolid_slider .rsts-prev { font-size: 30px; width: 50px; height: 50px; border-radius: 50%; background-color: white; box-shadow: 0px 3px 6px #0000004D; text-align: center; line-height: 3.4rem; color: #66cc00; transition: all 0.2s ease; } .mod_rocksolid_slider .rsts-next:hover, .mod_rocksolid_slider .rsts-prev:hover { color: #023621; } /*----------------------------------------------------------------------------------------------*/ /* .slick // slickslider-news .slick-slider button.slick-prev .slick-list .slick-track .slick-slide button.slick-next ul.slick-dots */ .slickslider-events { /* default @slider-slick-content-padding: 140px 100px; @slider-slick-control-prev-icon: '\f104'; @slider-slick-control-next-icon: '\f105'; @slider-slick-control-padding: 5px; @slider-slick-control-font-size: 2rem; */ /*Own Code*/ padding: 0 96px; } .slickslider-events .slick-slide { padding: 0 40px; } .slickslider-events .slick-next, .slickslider-events .slick-prev { position: absolute; top: 40% !important; } .slickslider-events .slick-prev { left: -60px; } .slickslider-events .slick-next { right: -60px; } .slickslider-events .slick-dots { position: absolute; bottom: 0; left: 50%; z-index: 1; display: flex; flex-wrap: nowrap; list-style: none; margin: 0; padding: 5px; transform: translate(-50%, 0); background-color: white; border-radius: 15px; } .slickslider-events .slick-dots li { padding: 4px; } .slickslider-events .slick-dots li button { display: block; width: 11px; height: 11px; padding: 0; font-size: 0; line-height: 0; border: none; background-color: black; border-radius: 50%; outline: none; cursor: pointer; transition: all 0.3s ease; } .slickslider-events .slick-dots .slick-active button { background-color: #66cc00; } .slickslider-events .slick-container { padding-bottom: calc(1rem * 2); } .slickslider-events .slick-container .event { padding: 17px; margin-bottom: 0; } .slickslider-events .slick-container .event .content-wrapper { box-shadow: 0px 3px 17px #00000029; background-color: white; padding: 20px 20px 20px 90px; margin-bottom: 0; position: relative; } .slickslider-events .slick-container .event .content-wrapper .text { padding: 20px; } .slickslider-events .slick-container .event .content-wrapper .time-deko { position: absolute; top: 0; left: 20px; width: 56px; height: 96px; color: white; background-color: #5c2751; border-radius: 0px 0px 40px 0px; margin-top: 0; padding-top: 5px; padding-left: 10px; } .slickslider-events .slick-container .event .content-wrapper .time-deko .day { font-size: 2rem; margin-top: 0; } .slickslider-events .slick-container .event .content-wrapper .time-deko .month { font-size: 1.125rem; margin-top: 0; } .slickslider-events .slick-container .event .content-wrapper p.category { margin-top: 0; font-size: 1.125rem; color: #66cc00; text-transform: uppercase; } .slickslider-events .slick-container .event .content-wrapper h3 { margin-top: 1rem; margin-bottom: 1rem; } .slickslider-events .slick-container .event .content-wrapper h3, .slickslider-events .slick-container .event .content-wrapper h3 a { color: black; line-height: 1.875rem; } .slickslider-events .slick-container .event .content-wrapper p.time { font-size: 1.125rem; color: #66cc00; margin-bottom: calc(1rem * 1.5); } .slickslider-events .slick-next, .slickslider-events .slick-prev { font-size: 30px; width: 50px; height: 50px; border-radius: 50%; background-color: white; box-shadow: 0px 3px 6px #0000004D; text-align: center; line-height: 3.4rem; color: #66cc00; transition: all 0.2s ease; } .slickslider-events .slick-next:hover, .slickslider-events .slick-prev:hover { color: #023621; } .display-none { display: none !important; } .slickslider-testimonial, .slickslider-news, .slickslider-pics { /* default @slider-slick-content-padding: 140px 100px; @slider-slick-control-prev-icon: '\f104'; @slider-slick-control-next-icon: '\f105'; @slider-slick-control-padding: 5px; @slider-slick-control-font-size: 2rem; */ /*Own Code*/ padding: 0 96px; } .slickslider-testimonial .slick-slide, .slickslider-news .slick-slide, .slickslider-pics .slick-slide { padding: 0 40px; } .slickslider-testimonial .slick-next, .slickslider-news .slick-next, .slickslider-pics .slick-next, .slickslider-testimonial .slick-prev, .slickslider-news .slick-prev, .slickslider-pics .slick-prev { position: absolute; top: 40% !important; } .slickslider-testimonial .slick-prev, .slickslider-news .slick-prev, .slickslider-pics .slick-prev { left: -60px; } .slickslider-testimonial .slick-next, .slickslider-news .slick-next, .slickslider-pics .slick-next { right: -60px; } .slickslider-testimonial .slick-dots, .slickslider-news .slick-dots, .slickslider-pics .slick-dots { position: absolute; bottom: 0; left: 50%; z-index: 1; display: flex; flex-wrap: nowrap; list-style: none; margin: 0; padding: 5px; transform: translate(-50%, 0); background-color: white; border-radius: 15px; } .slickslider-testimonial .slick-dots li, .slickslider-news .slick-dots li, .slickslider-pics .slick-dots li { padding: 4px; } .slickslider-testimonial .slick-dots li button, .slickslider-news .slick-dots li button, .slickslider-pics .slick-dots li button { display: block; width: 11px; height: 11px; padding: 0; font-size: 0; line-height: 0; border: none; background-color: black; border-radius: 50%; outline: none; cursor: pointer; transition: all 0.3s ease; } .slickslider-testimonial .slick-dots .slick-active button, .slickslider-news .slick-dots .slick-active button, .slickslider-pics .slick-dots .slick-active button { background-color: #66cc00; } .slickslider-testimonial .slick-slider, .slickslider-news .slick-slider, .slickslider-pics .slick-slider { padding-bottom: calc(1rem * 2); } .slickslider-testimonial .slick-slider .slick-slide, .slickslider-news .slick-slider .slick-slide, .slickslider-pics .slick-slider .slick-slide { padding: 17px; max-height: 560px; } .slickslider-testimonial .slick-slider .slick-slide .layout_latest, .slickslider-news .slick-slider .slick-slide .layout_latest, .slickslider-pics .slick-slider .slick-slide .layout_latest { box-shadow: 0px 3px 17px #00000029; border-radius: 4px 80px 4px 4px; max-height: 520px; min-height: 420px; background-color: white; } .slickslider-testimonial .slick-slider .slick-slide .layout_latest img, .slickslider-news .slick-slider .slick-slide .layout_latest img, .slickslider-pics .slick-slider .slick-slide .layout_latest img { border-radius: 4px 80px 4px 80px; } .slickslider-testimonial .slick-slider .slick-slide .layout_latest figcaption, .slickslider-news .slick-slider .slick-slide .layout_latest figcaption, .slickslider-pics .slick-slider .slick-slide .layout_latest figcaption { display: none; } .slickslider-testimonial .slick-slider .slick-slide .layout_latest .text, .slickslider-news .slick-slider .slick-slide .layout_latest .text, .slickslider-pics .slick-slider .slick-slide .layout_latest .text { padding: 20px; } .slickslider-testimonial .slick-slider .slick-slide .layout_latest .text .ce_text, .slickslider-news .slick-slider .slick-slide .layout_latest .text .ce_text, .slickslider-pics .slick-slider .slick-slide .layout_latest .text .ce_text { max-height: 400px; } .slickslider-testimonial .slick-slider .slick-slide .layout_latest .info, .slickslider-news .slick-slider .slick-slide .layout_latest .info, .slickslider-pics .slick-slider .slick-slide .layout_latest .info { font-size: 1.25rem; } .slickslider-testimonial .slick-slider .slick-slide .layout_latest .info time, .slickslider-news .slick-slider .slick-slide .layout_latest .info time, .slickslider-pics .slick-slider .slick-slide .layout_latest .info time { color: #66cc00; } .slickslider-testimonial .slick-slider .slick-slide .layout_latest h3, .slickslider-news .slick-slider .slick-slide .layout_latest h3, .slickslider-pics .slick-slider .slick-slide .layout_latest h3 { margin-top: 1rem; } .slickslider-testimonial .slick-slider .slick-slide .layout_latest h3, .slickslider-news .slick-slider .slick-slide .layout_latest h3, .slickslider-pics .slick-slider .slick-slide .layout_latest h3, .slickslider-testimonial .slick-slider .slick-slide .layout_latest h3 a, .slickslider-news .slick-slider .slick-slide .layout_latest h3 a, .slickslider-pics .slick-slider .slick-slide .layout_latest h3 a { color: black; line-height: 1.875rem; } .slickslider-testimonial .slick-slider .slick-slide .layout_latest h3 a::after, .slickslider-news .slick-slider .slick-slide .layout_latest h3 a::after, .slickslider-pics .slick-slider .slick-slide .layout_latest h3 a::after { content: "\f061"; font-family: "Font Awesome 6 Free"; font-size: inherit; color: #66cc00; margin-right: 4px; margin-left: 6px; } .slickslider-testimonial .slick-slider .slick-slide .layout_latest p.more, .slickslider-news .slick-slider .slick-slide .layout_latest p.more, .slickslider-pics .slick-slider .slick-slide .layout_latest p.more { display: none; } .slickslider-testimonial .slick-next, .slickslider-news .slick-next, .slickslider-pics .slick-next, .slickslider-testimonial .slick-prev, .slickslider-news .slick-prev, .slickslider-pics .slick-prev { font-size: 2rem; width: 50px; height: 50px; border-radius: 50%; background-color: white; box-shadow: 0px 3px 6px #0000004D; text-align: center; line-height: 4rem; color: #66cc00; transition: all 0.2s ease; } .slickslider-testimonial .slick-next:hover, .slickslider-news .slick-next:hover, .slickslider-pics .slick-next:hover, .slickslider-testimonial .slick-prev:hover, .slickslider-news .slick-prev:hover, .slickslider-pics .slick-prev:hover { color: #023621; } .slickslider-pics .slick-slider .slick-slide, .slickslider-testimonial .slick-slider .slick-slide { min-height: unset; } @media only screen and (max-width: 900px) { .slickslider-testimonial, .slickslider-news, .slickslider-pics { padding: 0 40px; } .slickslider-testimonial .slick-slider .slick-prev, .slickslider-news .slick-slider .slick-prev, .slickslider-pics .slick-slider .slick-prev { left: -38px; } .slickslider-testimonial .slick-slider .slick-next, .slickslider-news .slick-slider .slick-next, .slickslider-pics .slick-slider .slick-next { right: -38px; } .slickslider-events { padding: 0 40px; } .slickslider-events .slick-slider .slick-prev { left: -38px; } .slickslider-events .slick-slider .slick-next { right: -38px; } .slickslider-events .slick-slider .slick-slide .layout_teaser { padding: 120px 20px 20px 20px; } } /*--------------------------------------------------------------------------------*/ /*Default-Values @logo-width: 350px; @logo-padding-top: 20px; @logo-padding-left: 0; @logo-padding-bottom: 10px; @logo-width-mobil: calc(100vw - @layout-content-padding - @layout-content-padding - 40px); @logo-padding-top-mobil: 15px; @logo-padding-left-mobil: 0; @logo-padding-bottom-mobil: 15px; */ .logo { float: left; width: 196px; padding-top: calc(1rem * 2); padding-left: 0; padding-bottom: calc(1rem * 2); transition: width 0.2s ease-in-out; } .fixed-header .logo { width: 150px; } @media only screen and (max-width: 900px) { .logo { width: calc(100vw - 20px - 20px - 40px); max-width: 196px; padding-top: 1rem; padding-left: 0; padding-bottom: 1rem; } } /*-------------------------*/ .logo-bg { float: left; width: 196px; height: auto; padding-top: calc(1rem * 2); padding-left: 0; padding-bottom: calc(1rem * 2); background-color: white; background-image: url(/files/theme/styles/img/ci/logo.jpg); background-repeat: no-repeat; background-position: center; background-size: contain; } .fixed-header .logo { width: 196px; min-width: 100px; max-width: 80vw; } .mobile_menu .logo { display: block; float: none; width: 100%; max-width: 100%; box-shadow: 0px 3px 6px #00000029; padding: 20px; } .mobile_menu .logo figure { width: 143px; } /*---------------------------------------------------------------------------------------*/ /*default @topbar-text-padding: 20px 0 20px 0; @topbar-text-padding-medium: 10px 0 10px 0; @topbar-text-padding-mobil: 0 10px 10px 10px; @topbar-text-distance: 20px; @topbar-text-icons-padding-right: 5px; @topbar-text-font-size: inherit; @topbar-text-color: inherit; @topbar-text-link-color: @color-default; @topbar-text-link-color-hover: inherit; */ .topbar-text { float: right; text-align: right; font-size: 1.3rem; padding: 0 20px 0 0; margin-bottom: 0; color: inherit; } .topbar-text p { margin: 0; } .topbar-text i::before { padding-right: 5px; } .topbar-text a { color: #263843; padding-right: calc(1rem * 2); } .topbar-text a:last-of-type { padding-right: 0; } .topbar-text a:hover { color: #263843; } @media only screen and (max-width: 1200px) { .topbar-text { padding: 0 20px 0 0; } } @media only screen and (max-width: 900px) { .topbar-text { float: none; text-align: left; padding: 0; } .topbar-text a { padding-left: 0; } } .topbar-text { float: none; text-align: unset; padding: 5px 0 0 0; } .topbar-text p, .topbar-text a { font-size: 1.3rem; font-weight: 400; margin: 0 !important; display: inline-block; } .topbar-text a::before { display: block; content: attr(title); font-weight: bold; height: 0; overflow: hidden; visibility: hidden; } .topbar-text a:hover { font-weight: 400; } @media only screen and (max-width: 1000px) { body:not(.fixed-header) .topbar-text { display: none; } } @media only screen and (max-width: 900px) { .topbar-text { display: none; } } /*---------------------------------------------------------------------------------*/ /*default @bottom-content-padding: 20px 0 20px 0; @bottom-content-padding-medium: 10px 0 10px 0; @bottom-content-padding-mobil: 0 10px 10px 10px; @bottom-content-distance: 20px; @bottom-content-icons-padding-right: 5px; @bottom-content-font-size: inherit; @bottom-contentt-color: inherit; @bottom-content-link-color: @color-default; @bottom-content-link-color-hover: inherit; */ .bottom-content { float: right; text-align: right; font-size: inherit; padding: 20px 0 20px 0; margin-bottom: 0; color: inherit; } .bottom-content p { margin: 0; } .bottom-content i::before { padding-right: 5px; } .bottom-content a { color: #263843; padding-right: 20px; } .bottom-content a:last-of-type { padding-right: 0; } .bottom-content a:hover { color: inherit; } .bottom-content { float: none; text-align: unset; } .bottom-content p, .bottom-content a { font-weight: 300; margin: 0 !important; display: inline-block; } .bottom-content a::before { display: block; content: attr(title); font-weight: bold; height: 0; overflow: hidden; visibility: hidden; } .bottom-content a:hover { font-weight: 900; } .bottom-content p:first-child { padding-left: 100px; } .bottom-content p:last-child { float: right; } @media only screen and (max-width: 960px) { .bottom-content p, .bottom-content a { display: block; } .bottom-content p:first-child { padding-left: 75px; } .bottom-content p:last-child { float: none; padding-left: 75px; margin-bottom: 20px; } } /*---------------------------------------------------------------------------------*/ .socials { /* defaults @socials-padding: 20px 0 0 20px; @socials-padding-medium: 10px 20px 0 0; @socials-padding-mobil: 10px 0 0 10px; @socials-font-size: inherit; @socials-color: inherit; @socials-color-hover: @socials-color; @socials-items-padding-left: 10px; @socials-breakpoint-1: @layout-content-breite; // padding-medium wird aktiv @socials-breakpoint-2: @breakpoint-mobil-standard; // padding-mobil wird aktiv, no float */ float: right; padding: 7px 30px 0 0; float: none; } .socials a { color: #263843; } .socials a:hover { color: #66cc00; } .socials i::before { font-size: 1.5rem; padding-left: calc(1rem * 3); } @media only screen and (max-width: 1200px) { .socials { padding: 7px 30px 0 0; } } @media only screen and (max-width: 900px) { .socials { float: none; padding: 0; } } .mobile_menu .socials { /* defaults @socials-padding: 20px 0 0 20px; @socials-padding-medium: 10px 20px 0 0; @socials-padding-mobil: 10px 0 0 10px; @socials-font-size: inherit; @socials-color: inherit; @socials-color-hover: @socials-color; @socials-items-padding-left: 10px; @socials-breakpoint-1: @layout-content-breite; // padding-medium wird aktiv @socials-breakpoint-2: @breakpoint-mobil-standard; // padding-mobil wird aktiv, no float */ float: right; padding: 0 calc(1rem * 5) 0 0; float: none; display: flex; justify-content: space-between; padding: 20px 40px 0 40px !important; } .mobile_menu .socials a { color: black; } .mobile_menu .socials a:hover { color: #66cc00; } .mobile_menu .socials i::before { font-size: 3rem; padding-left: 1rem; } @media only screen and (max-width: 1200px) { .mobile_menu .socials { padding: 0; } } @media only screen and (max-width: 900px) { .mobile_menu .socials { float: none; padding: 0; } } .mobile_menu .socials i::before { display: block; padding: 0; } /* Social im Footer*/ #footer .footer-socials-bar .socials { /* defaults @socials-padding: 20px 0 0 20px; @socials-padding-medium: 10px 20px 0 0; @socials-padding-mobil: 10px 0 0 10px; @socials-font-size: inherit; @socials-color: inherit; @socials-color-hover: @socials-color; @socials-items-padding-left: 10px; @socials-breakpoint-1: @layout-content-breite; // padding-medium wird aktiv @socials-breakpoint-2: @breakpoint-mobil-standard; // padding-mobil wird aktiv, no float */ float: right; padding: 0 calc(1rem * 5) 0 0; float: none; } #footer .footer-socials-bar .socials a { color: #66cc00; } #footer .footer-socials-bar .socials a:hover { color: #66cc00; } #footer .footer-socials-bar .socials i::before { font-size: 3rem; padding-left: 1rem; } @media only screen and (max-width: 1200px) { #footer .footer-socials-bar .socials { padding: 0; } } @media only screen and (max-width: 900px) { #footer .footer-socials-bar .socials { float: none; padding: 0; } } /*--------------------------------------------------------------------------------------------------*/ ul.cloud { margin-left: 0rem; padding-left: 0; } ul.cloud li { display: inline; padding-right: 1rem; line-height: 1.5rem; } ul.cloud li a { color: white; font-size: 1rem; } .tag-cloud-filter { display: grid; grid-template-rows: 0fr; transition: 250ms grid-template-rows ease; flex-basis: unset; flex-shrink: 1; margin-right: calc(1rem * 2); background-color: #26c4c4; box-shadow: 0px 3px 6px #00000045; border-radius: 0px 80px 80px 80px; } .tag-cloud-filter.show { grid-template-rows: 1fr; padding: 20px 30px 50px 30px; } .tag-cloud-filter .tagcloud-inside { overflow: hidden; padding: 0; } .tag-cloud-filter .tagcloud-inside:has(div.reset) .cloud { display: none; } .tag-cloud-filter ul li.size1 a { font: normal normal normal 20px/42px 'Source Sans 3'; letter-spacing: 1.34px; color: black; } .tag-cloud-filter ul li.size2 a { font: normal normal normal 24px/42px 'Source Sans 3'; letter-spacing: 1.61px; color: #5e5e5e; } .tag-cloud-filter ul li.size3 a { font: normal normal bold 30px/42px 'Source Sans 3'; letter-spacing: 2.01px; color: black; } .tag-cloud-filter ul li.active a { background-color: white; padding: 5px 10px; border-radius: 0 15px 15px 15px; } .tag-cloud-filter .reset { margin-bottom: 1rem; } .tag-cloud-filter .reset a { font-size: 24px; background-color: #E24A2F; color: white; padding: 5px 10px; border-radius: 0 15px 15px 15px; } .tag-cloud-filter div.close { color: white; margin-bottom: 20px; } .mod_newslist { padding: 17px; /*Own Code*/ } .mod_newslist > .pagination { grid-column: 1 / -1; padding-left: 0; margin: 0 auto; } .mod_newslist .newsgrid-inject { padding-left: 20%; } .mod_newslist .newsgrid-inject > div:first-child { margin-top: 0; } @media only screen and (max-width: 1150px) { .mod_newslist > div.newsgrid-inject { display: none; } } .mod_newslist .layout_latest { box-shadow: 0px 3px 17px #00000029; border-radius: 4px 80px 4px 4px; max-height: 520px; min-height: 420px; background-color: white; } .mod_newslist .layout_latest img { border-radius: 4px 80px 4px 80px; } .mod_newslist .layout_latest figcaption { display: none; } .mod_newslist .layout_latest .text { padding: 20px; } .mod_newslist .layout_latest .text .ce_text { max-height: 400px; } .mod_newslist .layout_latest .info { font-size: 1.25rem; } .mod_newslist .layout_latest .info time { color: #66cc00; } .mod_newslist .layout_latest h3 { margin-top: 1rem; } .mod_newslist .layout_latest h3, .mod_newslist .layout_latest h3 a { color: black; line-height: 1.875rem; } .mod_newslist .layout_latest h3 a::after { content: "\f061"; font-family: "Font Awesome 6 Free"; font-size: inherit; color: #66cc00; margin-right: 4px; margin-left: 6px; } .mod_newslist .layout_latest p.more { display: none; } .mod_newsreader .news-header { max-width: 75%; margin-left: 130px; } .mod_newsreader .news-header h2 { color: #66cc00; text-transform: uppercase; } .mod_newsreader .news-header .info { padding: 1rem 0 2rem 0; } .mod_newsreader .news-header .info time { font-weight: 700; } .mod_newsreader .news-container { display: flex; gap: 130px; } .mod_newsreader .news-container .news-body { flex-shrink: 1; } .mod_newsreader .news-container .news-body .content-text:first-child figure img { border-radius: 0px 160px 160px 160px; } .mod_newsreader .news-container .news-body .content-text:first-child figure figcaption { text-align: center; padding: 10px; } .mod_newsreader .news-container .news-body > div { margin-left: 130px; } .mod_newsreader .news-container .news-body > div.breit { margin-left: 0; } .mod_newsreader .news-container .news-body .sharebuttons { margin-top: 30px; } .mod_newsreader .news-container .news-body .sharebuttons li { padding: 15px; } .mod_newsreader .news-container .news-body .sharebuttons li a { color: #66cc00; } .mod_newsreader .news-container .news-body .sharebuttons li:first-child { padding-top: 20px; font-weight: 700; } .mod_newsreader .news-container .news-right { display: block; flex-basis: 320px; flex-shrink: 0; flex-grow: 1; } @media screen and (max-width: 1200px) { .mod_newsreader .news-header { max-width: unset; margin-left: 0; } .mod_newsreader .news-container .news-body > div { margin-left: 0; } .mod_newsreader .news-container .news-right { margin-right: 0; } } @media screen and (max-width: 900px) { .mod_newsreader .news-header { max-width: unset; margin-left: 0; } .mod_newsreader .news-container { flex-direction: column; gap: 30px; } .mod_newsreader .news-container .news-body > div { margin-left: 0; } .mod_newsreader .news-container .news-right { margin-right: 0; } } /*----------------------------------------------------------------------------------------*/ p.location, p.time { margin: 0; } p.location i::before, p.time i::before { padding-right: 0.5rem; padding-left: 3px; } .event { margin-bottom: 70px; } .next-events-full { margin-top: 0; } .next-events-full .event div[itemprop=description] { display: flex; margin-top: 20px; } .next-events-full .event div[itemprop=description] .image { flex-shrink: 0; width: 48%; margin-right: 4%; } .next-events-full .event div[itemprop=description] .image img { width: 100%; } .next-events-full .event div[itemprop=description] .teaser p:first-child { margin-top: 0; } @media only screen and (max-width: 900px) { .event { margin-bottom: 35px; } .next-events-full { margin-top: 0; } .next-events-full .event div[itemprop=description] { flex-direction: column; } .next-events-full .event div[itemprop=description] h3 { font-size: 1.25rem; } .next-events-full .event div[itemprop=description] .image { flex-shrink: 0; width: 100%; margin-right: 0; } .next-events-full .event div[itemprop=description] .teaser p:first-child { margin-top: 10px; } } .all-events-short { margin-top: 0; } .all-events-short .event div[itemprop=description] { display: flex; margin-top: 20px; } .all-events-short .event div[itemprop=description] .image { flex-shrink: 0; width: 19%; margin-right: 2%; } .all-events-short .event div[itemprop=description] .image img { width: 100%; } .all-events-short .event div[itemprop=description] h3 { margin-top: 0; } .all-events-short .event div[itemprop=description] .teaser * { font-size: 0; margin: 0; padding: 0; } .all-events-short .event div[itemprop=description] .teaser em { margin-top: 1rem; display: inline-block; } .all-events-short .event div[itemprop=description] .teaser em, .all-events-short .event div[itemprop=description] .teaser em * { font-size: 1rem; font-style: normal; } @media only screen and (max-width: 900px) { .all-events-short { margin-top: 0; } .all-events-short .event div[itemprop=description] { flex-direction: column; margin-top: 20px; } .all-events-short .event div[itemprop=description] .image { flex-shrink: 0; width: 33%; margin: 0 0 10px; } .all-events-short .event div[itemprop=description] .image img { width: 100%; } .all-events-short .event div[itemprop=description] h3 { margin-top: 0; font-size: 1.25rem; } } .mod_eventlist.events-main { padding: 17px; } .mod_eventlist.events-main .layout_teaser { box-shadow: 0px 3px 17px #00000029; padding: 20px 20px 20px 90px; position: relative; } .mod_eventlist.events-main .layout_teaser .text { padding: 20px; } .mod_eventlist.events-main .layout_teaser .time-deko { position: absolute; top: 0; left: 20px; width: 56px; height: 96px; color: white; background-color: #5c2751; border-radius: 0px 0px 40px 0px; margin-top: 0; padding-top: 5px; padding-left: 10px; } .mod_eventlist.events-main .layout_teaser .time-deko .day { font-size: 2rem; margin-top: 0; } .mod_eventlist.events-main .layout_teaser .time-deko .month { font-size: 1.125rem; margin-top: 0; } .mod_eventlist.events-main .layout_teaser p.category { margin-top: 0; font-size: 1.125rem; color: #66cc00; text-transform: uppercase; } .mod_eventlist.events-main .layout_teaser h3 { margin-top: 1rem; margin-bottom: 1rem; } .mod_eventlist.events-main .layout_teaser h3, .mod_eventlist.events-main .layout_teaser h3 a { color: black; line-height: 1.875rem; } .mod_eventlist.events-main .layout_teaser p.time { font-size: 1.125rem; color: #66cc00; margin-bottom: calc(1rem * 1.5); } @media only screen and (max-width: 900px) { .mod_eventlist.events-main .layout_teaser { padding: 120px 20px 20px 20px; } } .mod_eventreader .event-header { max-width: 75%; margin-left: 0; } .mod_eventreader .event-container { clear: both; margin-top: calc(1rem * 2); display: flex; gap: 130px; } .mod_eventreader .event-container .event-body { flex-shrink: 1; } .mod_eventreader .event-container .event-body .content-text:first-child figure img { border-radius: 0px 160px 160px 160px; } .mod_eventreader .event-container .event-body .content-text:first-child figure figcaption { text-align: center; padding: 10px; } .mod_eventreader .event-container .event-body > div { margin-left: 130px; } .mod_eventreader .event-container .event-body > div.breit { margin-left: 0; } .mod_eventreader .event-container .event-right { display: block; flex-basis: 320px; flex-shrink: 0; flex-grow: 1; } .mod_eventreader .layout_full { padding: 20px 20px 20px 90px; position: relative; } .mod_eventreader .layout_full .text { padding: 20px; } .mod_eventreader .layout_full .time-deko { float: left; width: 56px; height: 96px; color: white; background-color: #5c2751; border-radius: 0px 0px 40px 0px; margin: 0 calc(1rem * 3) 0 0; padding-top: 5px; padding-left: 10px; } .mod_eventreader .layout_full .time-deko .day { font-size: 2rem; margin-top: 0; } .mod_eventreader .layout_full .time-deko .month { font-size: 1.125rem; margin-top: 0; } .mod_eventreader .layout_full p.category { margin: 0 0 10px 0; font-size: 1.125rem; color: #66cc00; text-transform: uppercase; } .mod_eventreader .layout_full h1 { line-height: 1.1; margin-top: 0; margin-left: calc(1rem * 2); margin-bottom: calc(1rem * 3); color: black; } .mod_eventreader .layout_full p.info { clear: both; float: left; margin: 0 calc(1rem * 2.5) 0 0; font-size: 1.25rem; font-weight: 700; color: black; } .mod_eventreader .layout_full p.location { font-size: 1.25rem; font-weight: 400; color: black; } @media screen and (max-width: 1200px) { .mod_eventreader .event { padding: 20px; } .mod_eventreader .event .event-header { max-width: unset; margin-left: 0; } .mod_eventreader .event .event-container .event-body > div { margin-left: 0; } .mod_eventreader .event .event-container .event-right { margin-right: 0; } } @media screen and (max-width: 900px) { .mod_eventreader .event-header { max-width: unset; margin-left: 0; } .mod_eventreader .event-container { flex-direction: column; gap: 30px; } .mod_eventreader .event-container .event-body > div { margin-left: 0; } .mod_eventreader .event-container .event-right { margin-right: 0; } } /*--------------------------------------------------------------------------------------------------*/ .pagination { padding-left: calc(33% + 20px); } .pagination p { margin-top: 0; } .pagination ul { list-style-type: none; margin: 0; padding: 0; display: flex; } .pagination ul li a, .pagination ul li strong { padding: 5px 15px 5px 0px; } /*-------------------------------------------------------------------------------------------------------------*/ /* Image Box * 2.12.2019 * seitenumsatz.de 28.10.2020: NI: CHANGE/ADD: statt @imagebox-text-align gibt es nun @imagebox-left-text-align: right; @imagebox-right-text-align: left; Jeweils dafür, wenn text links oder rechts neben dem Bild ist 28.10.2020: NI: CHANGE: Statt 1.5rem: @imagebox-text-header-font-size: @headings-h2-font-size; //default wie h2 02.11.2020: NIHL: DEL: @imagebox-bg-color-gradient-l2r und @imagebox-bg-color-gradient-l2r 02.11.2020: NIHL: ADD: @imagebox-bg-color-1-gradient-l2r und @imagebox-bg-color-1-gradient-l2r, @imagebox-bg-color-2-gradient-l2r und @imagebox-bg-color-2-gradient-l2r 5.5.2021: WfV: Add: Wenn IMGBOX in einem fullwidth-Article ist, wird die textbreite auf die contentbreite beschränkt. */ /*Allgemeine Variablen für alle IMG-BOX-Instanzen*/ .img-box { display: flex; color: #263843; margin-bottom: 10px; min-height: 100%; } .img-box a { color: white; } .img-box a:hover { color: #A4036f; } .img-box figure { width: 50%; float: none; } .img-box figure img { object-fit: cover; object-position: center; height: 100%; } .img-box figure.float_left { order: 1; margin-right: 5px; } .img-box figure.float_left ~ .text { margin-left: 5px; text-align: left; } .img-box figure.float_right { order: 3; margin-left: 5px; } .img-box figure.float_right ~ .text { margin-right: 5px; text-align: right; } .img-box .text { display: inline-block; padding: 10px; order: 2; width: 50%; } .img-box .text h1, .img-box .text h2, .img-box .text h3, .img-box .text h4, .img-box .text h5, .img-box .text h6 { font-size: 2.25rem; font-weight: 400; text-transform: none; color: #263843; } .img-box.no-gutter { margin-bottom: 0; } .img-box.no-gutter figure.float_left, .img-box.no-gutter figure.float_left ~ .text, .img-box.no-gutter figure.float_right, .img-box.no-gutter figure.float_right ~ .text { width: 50%; margin: 0; } .fullwidth .img-box figure.float_left ~ .text { padding-right: calc((100vw - 1200px) / 2); } .fullwidth .img-box figure.float_right ~ .text { padding-left: calc((100vw - 1200px) / 2); } @media only screen and (max-width: 1200px) { .fullwidth .img-box figure.float_left ~ .text { padding-right: 20px; } .fullwidth .img-box figure.float_right ~ .text { padding-left: 20px; } } @media screen and (max-width: 900px) { .img-box { flex-direction: column; margin-bottom: 20px; min-height: unset; } .img-box figure { width: 100% !important; max-width: 100% !important; float: none; } .img-box figure.float_left { order: 1; margin: 0; } .img-box figure.float_left ~ .text { margin-left: 0; } .img-box figure.float_right { order: 1; margin-left: 0; } .img-box figure.float_right ~ .text { margin-right: 0; } .img-box .text { width: 100% !important; text-align: left !important; padding-top: 0 !important; } } .img-box.custom-1 { display: flex; color: #263843; margin-bottom: 10px; min-height: 100%; } .img-box.custom-1 a { color: white; } .img-box.custom-1 a:hover { color: #A4036f; } .img-box.custom-1 figure { width: 50%; float: none; } .img-box.custom-1 figure img { object-fit: cover; object-position: center; height: 100%; } .img-box.custom-1 figure.float_left { order: 1; margin-right: 5px; } .img-box.custom-1 figure.float_left ~ .text { margin-left: 5px; text-align: left; } .img-box.custom-1 figure.float_right { order: 3; margin-left: 5px; } .img-box.custom-1 figure.float_right ~ .text { margin-right: 5px; text-align: right; } .img-box.custom-1 .text { display: inline-block; padding: 10px; order: 2; width: 50%; } .img-box.custom-1 .text h1, .img-box.custom-1 .text h2, .img-box.custom-1 .text h3, .img-box.custom-1 .text h4, .img-box.custom-1 .text h5, .img-box.custom-1 .text h6 { font-size: 2.25rem; font-weight: 400; text-transform: none; color: #263843; } .img-box.custom-1.no-gutter { margin-bottom: 0; } .img-box.custom-1.no-gutter figure.float_left, .img-box.custom-1.no-gutter figure.float_left ~ .text, .img-box.custom-1.no-gutter figure.float_right, .img-box.custom-1.no-gutter figure.float_right ~ .text { width: 50%; margin: 0; } .fullwidth .img-box.custom-1 figure.float_left ~ .text { padding-right: calc((100vw - 1200px) / 2); } .fullwidth .img-box.custom-1 figure.float_right ~ .text { padding-left: calc((100vw - 1200px) / 2); } @media only screen and (max-width: 1200px) { .fullwidth .img-box.custom-1 figure.float_left ~ .text { padding-right: 20px; } .fullwidth .img-box.custom-1 figure.float_right ~ .text { padding-left: 20px; } } @media screen and (max-width: 900px) { .img-box.custom-1 { flex-direction: column; margin-bottom: 20px; min-height: unset; } .img-box.custom-1 figure { width: 100% !important; max-width: 100% !important; float: none; } .img-box.custom-1 figure.float_left { order: 1; margin: 0; } .img-box.custom-1 figure.float_left ~ .text { margin-left: 0; } .img-box.custom-1 figure.float_right { order: 1; margin-left: 0; } .img-box.custom-1 figure.float_right ~ .text { margin-right: 0; } .img-box.custom-1 .text { width: 100% !important; text-align: left !important; padding-top: 0 !important; } } .img-box.custom-1 figure img { object-fit: contain; object-position: top; } .vollprofil .ce_text.img-box-1 figure { margin-bottom: 220px; } .vollprofil p.dozentin-profil { margin-top: 0; } .sprechblase { position: absolute; top: 504px; left: 50%; transform: translateX(-110%); } .sprechblase figure { width: 270px; height: auto; transform: rotate(-90deg); } .sprechblase p { position: absolute; top: 50%; left: 0px; width: 100%; padding: 0 20px; margin: 0; text-align: center; font-size: 1.5rem; font-weight: 900; color: white; line-height: 1.1; text-transform: uppercase; transform: translateY(-50%); } @media only screen and (max-width: 1200px) { .sprechblase { top: calc((100vw - 340px) / 2 - 50px); } } @media only screen and (max-width: 1160px) { .sprechblase { top: calc((100vw - 100px) / 2 - 50px); } } @media only screen and (max-width: 900px) { .sprechblase { top: calc((100vw - 40px) - 100px); left: 40px; transform: none; } .vollprofil .img-box-1 figure { margin-bottom: 190px; } } .img-box.custom-2 { display: flex; color: #263843; margin-bottom: 10px; min-height: 100%; } .img-box.custom-2 a { color: white; } .img-box.custom-2 a:hover { color: #A4036f; } .img-box.custom-2 figure { width: 50%; float: none; } .img-box.custom-2 figure img { object-fit: cover; object-position: center; height: 100%; } .img-box.custom-2 figure.float_left { order: 1; margin-right: 5px; } .img-box.custom-2 figure.float_left ~ .text { margin-left: 5px; text-align: left; } .img-box.custom-2 figure.float_right { order: 3; margin-left: 5px; } .img-box.custom-2 figure.float_right ~ .text { margin-right: 5px; text-align: right; } .img-box.custom-2 .text { display: inline-block; padding: 10px; order: 2; width: 50%; } .img-box.custom-2 .text h1, .img-box.custom-2 .text h2, .img-box.custom-2 .text h3, .img-box.custom-2 .text h4, .img-box.custom-2 .text h5, .img-box.custom-2 .text h6 { font-size: 2.25rem; font-weight: 400; text-transform: none; color: #263843; } .img-box.custom-2.no-gutter { margin-bottom: 0; } .img-box.custom-2.no-gutter figure.float_left, .img-box.custom-2.no-gutter figure.float_left ~ .text, .img-box.custom-2.no-gutter figure.float_right, .img-box.custom-2.no-gutter figure.float_right ~ .text { width: 50%; margin: 0; } .fullwidth .img-box.custom-2 figure.float_left ~ .text { padding-right: calc((100vw - 1200px) / 2); } .fullwidth .img-box.custom-2 figure.float_right ~ .text { padding-left: calc((100vw - 1200px) / 2); } @media only screen and (max-width: 1200px) { .fullwidth .img-box.custom-2 figure.float_left ~ .text { padding-right: 20px; } .fullwidth .img-box.custom-2 figure.float_right ~ .text { padding-left: 20px; } } @media screen and (max-width: 900px) { .img-box.custom-2 { flex-direction: column; margin-bottom: 20px; min-height: unset; } .img-box.custom-2 figure { width: 100% !important; max-width: 100% !important; float: none; } .img-box.custom-2 figure.float_left { order: 1; margin: 0; } .img-box.custom-2 figure.float_left ~ .text { margin-left: 0; } .img-box.custom-2 figure.float_right { order: 1; margin-left: 0; } .img-box.custom-2 figure.float_right ~ .text { margin-right: 0; } .img-box.custom-2 .text { width: 100% !important; text-align: left !important; padding-top: 0 !important; } } /*--------------------------------------------------------------------------------------------------------------*/ /*Allgemeine Klasssen für alle Img-box Instanzen*/ .imgbox-img-pos-left figure img { object-position: left; } .imgbox-img-pos-10per figure img { object-position: 10%; } .imgbox-img-pos-20per figure img { object-position: 20%; } .imgbox-img-pos-30per figure img { object-position: 30%; } .imgbox-img-pos-40per figure img { object-position: 40%; } .imgbox-img-pos-50per figure img { object-position: 50%; } .imgbox-img-pos-60per figure img { object-position: 60%; } .imgbox-img-pos-65per figure img { object-position: 65%; } .imgbox-img-pos-70per figure img { object-position: 70%; } .imgbox-img-pos-80per figure img { object-position: 80%; } .imgbox-img-pos-90per figure img { object-position: 90%; } .imgbox-img-pos-right figure img { object-position: right; } .imgbox-bg-color-white .text { background-color: white; color: #263843; } .imgbox-bg-color-white .text h1, .imgbox-bg-color-white .text h2, .imgbox-bg-color-white .text h3, .imgbox-bg-color-white .text h4, .imgbox-bg-color-white .text h5, .imgbox-bg-color-white .text h6 { color: #263843; } .imgbox-bg-color-1-gradient-l2r .text { background: linear-gradient(to right, #f2bb05 0%, #f2bb05 50.1%, #fff 50%, #fff 100%); color: #263843; } .imgbox-bg-color-1-gradient-l2r .text a { color: inherit; } .imgbox-bg-color-1-gradient-l2r .text a:hover { color: #408000; } .imgbox-bg-color-1-gradient-l2r .text h1, .imgbox-bg-color-1-gradient-l2r .text h2, .imgbox-bg-color-1-gradient-l2r .text h3, .imgbox-bg-color-1-gradient-l2r .text h4, .imgbox-bg-color-1-gradient-l2r .text h5, .imgbox-bg-color-1-gradient-l2r .text h6 { color: #263843; } .imgbox-bg-color-1-gradient-r2l .text { background: linear-gradient(to left, #f2bb05 0%, #f2bb05 50.1%, #fff 50%, #fff 100%); color: #263843; } .imgbox-bg-color-1-gradient-r2l .text a { color: inherit; } .imgbox-bg-color-1-gradient-r2l .text a:hover { color: #408000; } .imgbox-bg-color-1-gradient-r2l .text h1, .imgbox-bg-color-1-gradient-r2l .text h2, .imgbox-bg-color-1-gradient-r2l .text h3, .imgbox-bg-color-1-gradient-r2l .text h4, .imgbox-bg-color-1-gradient-r2l .text h5, .imgbox-bg-color-1-gradient-r2l .text h6 { color: #263843; } .imgbox-bg-color-brand .text { background-color: #26c4c4; } .imgbox-bg-color-highlight .text { background-color: #A4036f; } .imgbox-bg-color-1 .text { background-color: gray; } .imgbox-bg-color-2 .text { background-color: #E7EAEE; } .imgbox-bg-color-3 .text { background-color: green; } .imgbox-bg-color-4 .text { background-color: red; } .ce_text.img-box.img-pos-left figure img { object-position: left; } .ce_text.img-box.img-pos-10per figure img { object-position: 10%; } .ce_text.img-box.img-pos-20per figure img { object-position: 20%; } .ce_text.img-box.img-pos-30per figure img { object-position: 30%; } .ce_text.img-box.img-pos-40per figure img { object-position: 40%; } .ce_text.img-box.img-pos-50per figure img { object-position: 50%; } .ce_text.img-box.img-pos-60per figure img { object-position: 60%; } .ce_text.img-box.img-pos-65per figure img { object-position: 65%; } .ce_text.img-box.img-pos-70per figure img { object-position: 70%; } .ce_text.img-box.img-pos-80per figure img { object-position: 80%; } .ce_text.img-box.img-pos-90per figure img { object-position: 90%; } .ce_text.img-box.img-pos-right figure img { object-position: right; } /* @galleries-gap: 40px; @galleries-minwidth-absolute: 200px; @galleries-height-ratio: 66.66%; // 4:3 = 75%, 1:1 = 100% usw. @galleries-object-position: center; // top, center, bottom, right, left */ .ce_gallery.ganze-Bilder ul li figure img, .content-gallery.ganze-Bilder ul li figure img { object-fit: contain !important; } .ce_gallery ul.cols_1, .content-gallery ul.cols_1, .ce_gallery.content-gallery--cols-1 ul, .content-gallery.content-gallery--cols-1 ul { grid-template-columns: repeat(auto-fill, minmax(min(max( calc((100% - ( 1 - 1) * 40px ) / 1 ), 150px ),100%), 1fr)); gap: 40px; display: grid; grid-auto-flow: dense; } .ce_gallery ul.cols_1 li, .content-gallery ul.cols_1 li, .ce_gallery.content-gallery--cols-1 ul li, .content-gallery.content-gallery--cols-1 ul li { float: none; } .ce_gallery ul.cols_1 li figure img, .content-gallery ul.cols_1 li figure img, .ce_gallery.content-gallery--cols-1 ul li figure img, .content-gallery.content-gallery--cols-1 ul li figure img { height: 100%; width: 100%; aspect-ratio: 1.5; object-fit: cover; object-position: center; } .ce_gallery ul.cols_2, .content-gallery ul.cols_2, .ce_gallery.content-gallery--cols-2 ul, .content-gallery.content-gallery--cols-2 ul { grid-template-columns: repeat(auto-fill, minmax(min(max( calc((100% - ( 2 - 1) * 40px ) / 2 ), 150px ),100%), 1fr)); gap: 40px; display: grid; grid-auto-flow: dense; } .ce_gallery ul.cols_2 li, .content-gallery ul.cols_2 li, .ce_gallery.content-gallery--cols-2 ul li, .content-gallery.content-gallery--cols-2 ul li { float: none; } .ce_gallery ul.cols_2 li figure img, .content-gallery ul.cols_2 li figure img, .ce_gallery.content-gallery--cols-2 ul li figure img, .content-gallery.content-gallery--cols-2 ul li figure img { height: 100%; width: 100%; aspect-ratio: 1.5; object-fit: cover; object-position: center; } .ce_gallery ul.cols_3, .content-gallery ul.cols_3, .ce_gallery.content-gallery--cols-3 ul, .content-gallery.content-gallery--cols-3 ul { grid-template-columns: repeat(auto-fill, minmax(min(max( calc((100% - ( 3 - 1) * 40px ) / 3 ), 150px ),100%), 1fr)); gap: 40px; display: grid; grid-auto-flow: dense; } .ce_gallery ul.cols_3 li, .content-gallery ul.cols_3 li, .ce_gallery.content-gallery--cols-3 ul li, .content-gallery.content-gallery--cols-3 ul li { float: none; } .ce_gallery ul.cols_3 li figure img, .content-gallery ul.cols_3 li figure img, .ce_gallery.content-gallery--cols-3 ul li figure img, .content-gallery.content-gallery--cols-3 ul li figure img { height: 100%; width: 100%; aspect-ratio: 1.5; object-fit: cover; object-position: center; } .ce_gallery ul.cols_4, .content-gallery ul.cols_4, .ce_gallery.content-gallery--cols-4 ul, .content-gallery.content-gallery--cols-4 ul { grid-template-columns: repeat(auto-fill, minmax(min(max( calc((100% - ( 4 - 1) * 40px ) / 4 ), 150px ),100%), 1fr)); gap: 40px; display: grid; grid-auto-flow: dense; } .ce_gallery ul.cols_4 li, .content-gallery ul.cols_4 li, .ce_gallery.content-gallery--cols-4 ul li, .content-gallery.content-gallery--cols-4 ul li { float: none; } .ce_gallery ul.cols_4 li figure img, .content-gallery ul.cols_4 li figure img, .ce_gallery.content-gallery--cols-4 ul li figure img, .content-gallery.content-gallery--cols-4 ul li figure img { height: 100%; width: 100%; aspect-ratio: 1.5; object-fit: cover; object-position: center; } .ce_gallery ul.cols_5, .content-gallery ul.cols_5, .ce_gallery.content-gallery--cols-5 ul, .content-gallery.content-gallery--cols-5 ul { grid-template-columns: repeat(auto-fill, minmax(min(max( calc((100% - ( 5 - 1) * 40px ) / 5 ), 150px ),100%), 1fr)); gap: 40px; display: grid; grid-auto-flow: dense; } .ce_gallery ul.cols_5 li, .content-gallery ul.cols_5 li, .ce_gallery.content-gallery--cols-5 ul li, .content-gallery.content-gallery--cols-5 ul li { float: none; } .ce_gallery ul.cols_5 li figure img, .content-gallery ul.cols_5 li figure img, .ce_gallery.content-gallery--cols-5 ul li figure img, .content-gallery.content-gallery--cols-5 ul li figure img { height: 100%; width: 100%; aspect-ratio: 1.5; object-fit: cover; object-position: center; } .ce_gallery ul.cols_6, .content-gallery ul.cols_6, .ce_gallery.content-gallery--cols-6 ul, .content-gallery.content-gallery--cols-6 ul { grid-template-columns: repeat(auto-fill, minmax(min(max( calc((100% - ( 6 - 1) * 40px ) / 6 ), 150px ),100%), 1fr)); gap: 40px; display: grid; grid-auto-flow: dense; } .ce_gallery ul.cols_6 li, .content-gallery ul.cols_6 li, .ce_gallery.content-gallery--cols-6 ul li, .content-gallery.content-gallery--cols-6 ul li { float: none; } .ce_gallery ul.cols_6 li figure img, .content-gallery ul.cols_6 li figure img, .ce_gallery.content-gallery--cols-6 ul li figure img, .content-gallery.content-gallery--cols-6 ul li figure img { height: 100%; width: 100%; aspect-ratio: 1.5; object-fit: cover; object-position: center; } .ce_gallery nav.pagination, .content-gallery nav.pagination { text-align: center; padding: 50px 0 50px 0; } .ce_gallery nav.pagination ul, .content-gallery nav.pagination ul { justify-content: center; } /*------------------------------------------------------------------------------------------------*/ /* Der article bekommt class=videoteaser Video: eigenes_html: