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%} .cc-head>*:first-child{margin-top:0}.cc-head>*:last-child{margin-bottom:15px}.contao-cookiebar{--ccb-backdrop: rgba(0, 0, 0, .75);--ccb-anim-duration: .5s;--ccb-checked-clr: #399d32;--ccb-checked-bg: #dcf3db;--ccb-unchecked-clr: #9c9b99;--ccb-unchecked-bg: #fff;--ccb-disabled-clr: #c8c7c5;--ccb-disabled-bg: #f4f4f4;--ccb-focus-clr: #00a4f4;position:fixed;inset:0;z-index:9999;display:flex;align-items:var(--ccb-align, center);justify-content:var(--ccb-justify, center);letter-spacing:0;padding:15px;max-height:100dvh;box-sizing:border-box;pointer-events:none;overflow:hidden;color:var(--ccb-clr, #444)}.contao-cookiebar *{box-sizing:border-box}.contao-cookiebar p{color:var(--ccb-text, #868686);line-height:1.4}.contao-cookiebar label{position:relative;display:block;padding:8px 13px 8px 0;line-height:1.2rem}.contao-cookiebar label.group{font-weight:600}.contao-cookiebar input{position:absolute;width:1px;height:1px;outline:0 none;opacity:0}.contao-cookiebar input+label{padding:8px 13px 8px 45px;cursor:pointer}.contao-cookiebar input+label:before,.contao-cookiebar input+label:after{content:"";position:absolute;border-radius:10px}.contao-cookiebar input+label:before{top:7px;left:0;width:35px;height:18px;margin:0;box-sizing:content-box;background:var(--ccb-unchecked-bg);border:1px solid var(--ccb-unchecked-clr);transition:border-color .2s}.contao-cookiebar input+label:after{display:block;top:11px;left:4px;width:12px;height:12px;background:var(--ccb-unchecked-clr);transition:background .2s,margin-left .2s,padding .2s}.contao-cookiebar input+label:active:after{padding-left:5px}.contao-cookiebar input.cc-group-half+label:after{background:linear-gradient(to right, var(--ccb-unchecked-clr) 0%, var(--ccb-unchecked-clr) 50%, var(--ccb-checked-clr) 50%, var(--ccb-checked-clr) 100%)}.contao-cookiebar input:checked+label:after{background:var(--ccb-checked-clr);margin-left:17px}.contao-cookiebar input:checked+label:active:after{margin-left:12px}.contao-cookiebar input:checked+label:before{background:var(--ccb-checked-bg);border-color:var(--ccb-checked-clr)}.contao-cookiebar input:disabled+label{pointer-events:none}.contao-cookiebar input:disabled+label:after{background:var(--ccb-disabled-clr)}.contao-cookiebar input:disabled+label:before{background:var(--ccb-disabled-bg);border-color:var(--ccb-disabled-clr)}.contao-cookiebar input:focus-visible:not(.cc-hide-focus)+label:before{outline:3px dashed var(--ccb-focus-clr);outline-offset:2px}.contao-cookiebar .cc-btn{display:inline-block;cursor:pointer;width:100%;padding:8px 14px;margin-bottom:8px;font-size:15px;outline:0 none;border:1px solid var(--ccb-btn-bdr, #cfcfcf);border-radius:4px;color:var(--ccb-btn-clr, #444);background:var(--ccb-btn-bg, #f5f5f5)}.contao-cookiebar .cc-btn:hover,.contao-cookiebar .cc-btn:focus{background:var(--ccb-btn-bg-hvr, #ececec)}.contao-cookiebar .cc-btn:last-child{margin-bottom:0}.contao-cookiebar .grayscale{--ccb-btn-bg: #f1efef;--ccb-btn-bg-hvr: #ececec}.contao-cookiebar .grayscale .success{--ccb-btn-bg: #fbfbfb;--ccb-btn-bg-hvr: #f7f7f7}.contao-cookiebar .highlight .success{--ccb-btn-bg: #4e9e3e;--ccb-btn-bg-hvr: #4c933f;--ccb-btn-bdr: #3e7830;--ccb-btn-clr: #fff}.cc-focus:not(.cc-hide-focus):focus-visible{outline:3px dashed var(--ccb-focus-clr);outline-offset:-3px}.cc-invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;float:left}.cc-inner{display:inline-block;overflow-y:auto;max-height:100%;max-width:100%;padding:23px;border-radius:3px;opacity:0;pointer-events:none;visibility:hidden;font-size:1rem;text-align:left;background:var(--ccb-bg, #fff);box-shadow:var(--ccb-box-shadow, rgba(99, 99, 99, 0.2)) 0 2px 8px 0;animation:var(--ccb-anim, cookiebar-middle-in) var(--ccb-anim-duration) ease-in-out forwards}.cc-group{position:relative;border:1px solid var(--ccb-bdr, #d0d0d0);border-radius:5px;margin-bottom:10px}.cc-cookie-info{font-size:.875rem;background:var(--ccb-info-bg, #fff);border:1px solid var(--ccb-info-bdr, #efefef);padding:10px;border-radius:5px}.cc-cookie-info>div>span{font-weight:600}.cc-cookie-info>div+div{margin-top:5px;word-wrap:break-word}.cc-cookie-info+button.cc-detail-btn-details{margin-top:15px}.cc-cookies{background:var(--ccb-cookies-bg, #fbfbfb);border-radius:0 0 5px 5px}.cc-cookies>p{font-size:.875rem}.cc-cookies>p,.cc-cookies>.cc-cookie{margin:0;padding:15px;border-top:1px solid var(--ccb-cookies-bdr, #fbfbfb)}.cc-cookie label.cookie+*{margin-top:10px}.cc-cookie p{margin:0 0 15px;font-size:.875rem}.cc-cookie-desc p{margin-bottom:0}.cc-footer,.cc-info{text-align:center}.cc-info{margin-top:15px}.cc-info>p{font-size:.875rem}.cc-info>a{display:inline-block;font-size:.813rem;color:var(--ccb-detail-clr, #a2a2a2);text-decoration:none}.cc-info>a:hover{color:var(--ccb-detail-clr-hvr, #717171)}.cc-info>a+a:before{display:inline-block;content:"·";margin-right:5px}.cc-active .cc-inner{opacity:1;pointer-events:auto;visibility:visible}.cc-active.cc-blocked{pointer-events:auto;animation:cookiebar-overlay-in var(--ccb-anim-duration) ease-in-out forwards}.cc-saved.cc-inner{opacity:0;pointer-events:none;visibility:hidden}.cc-saved.cc-blocked{pointer-events:none;animation:cookiebar-overlay-out var(--ccb-anim-duration) ease-in-out forwards}.cc-left{--ccb-justify: flex-start}.cc-right{--ccb-justify: flex-end}.cc-top{--ccb-align: flex-start}.cc-top.cc-active{--ccb-anim: cookiebar-top-in}.cc-top.cc-saved{--ccb-anim: cookiebar-top-out}.cc-middle.cc-active{--ccb-anim: cookiebar-middle-in}.cc-middle.cc-saved{--ccb-anim: cookiebar-middle-out}.cc-bottom{--ccb-align: flex-end}.cc-bottom.cc-active{--ccb-anim: cookiebar-bottom-in}.cc-bottom.cc-saved{--ccb-anim: cookiebar-bottom-out}@media(min-width: 768px){.contao-cookiebar .cc-btn{width:auto;margin-bottom:0}.cc-inner{max-width:var(--ccb-max-width, 750px)}}@media(forced-colors){.contao-cookiebar input+label:after{border:1px solid currentColor}.cc-inner{border:1px solid currentColor}input.cc-group-half+label:after{margin-left:9px}}@media(prefers-reduced-motion){.contao-cookiebar{--ccb-anim-duration: 2s}}@media print{.contao-cookiebar{opacity:0}}@keyframes cookiebar-overlay-in{0%{background:rgba(0,0,0,0)}to{background:var(--ccb-backdrop)}}@keyframes cookiebar-overlay-out{0%{background:var(--ccb-backdrop)}to{background:rgba(0,0,0,0);visibility:hidden}}@keyframes cookiebar-top-in{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}@keyframes cookiebar-top-out{0%{opacity:1;visibility:visible;transform:translateY(0)}to{opacity:0;visibility:hidden;transform:translateY(-100%)}}@keyframes cookiebar-middle-in{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}@keyframes cookiebar-middle-out{0%{opacity:1;visibility:visible;transform:scale(1)}to{opacity:0;visibility:hidden;transform:scale(0)}}@keyframes cookiebar-bottom-in{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes cookiebar-bottom-out{0%{opacity:1;visibility:visible;transform:translateY(0)}to{opacity:0;visibility:hidden;transform:translateY(100%)}}.cc-group{display:flex;flex-wrap:wrap;justify-content:space-between;align-content:center}.cc-group>label{flex-grow:1;margin:5px 0 5px 10px}.cc-cookies{display:none;width:100%}.cc-detail-btn{padding:8px 10px;line-height:1.2rem}.cc-detail-btn-details{text-decoration:underline;padding:0;margin:0 0 10px}.cc-detail-btn,.cc-detail-btn-details{display:inline-block;color:var(--ccb-detail-clr, #a2a2a2);border:0 none;outline:0 none;background:rgba(0,0,0,0);font-size:13px;letter-spacing:0;text-transform:initial;cursor:pointer}.cc-detail-btn span:nth-child(2),.cc-detail-btn-details span:nth-child(2){display:none}.cc-detail-btn.cc-active span:nth-child(1),.cc-detail-btn-details.cc-active span:nth-child(1){display:none}.cc-detail-btn.cc-active span:nth-child(2),.cc-detail-btn-details.cc-active span:nth-child(2){display:inline}.cc-detail-btn:hover,.cc-detail-btn-details:hover{background:rgba(0,0,0,0);color:var(--ccb-detail-clr-hvr, #717171)} #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} /** * @license * MyFonts Webfont Build ID 3867246, 2020-12-16T11:57:38-0500 * * The fonts listed in this notice are subject to the End User License * Agreement(s) entered into by the website owner. All other parties are * explicitly restricted from using the Licensed Webfonts(s). * * You may obtain a valid license at the URLs below. * * Webfont: FF DIN Light by FontFont * URL: https://www.myfonts.com/products/light-ff-din-364314 * Copyright: Copyright © 2023 Monotype Imaging Inc. All rights reserved. * * Webfont: FF DIN Bold by FontFont * URL: https://www.myfonts.com/products/bold-ff-din-364310 * Copyright: Copyright © 2023 Monotype Imaging Inc. All rights reserved. * * © 2023 MyFonts Inc. */ @font-face { font-family: "FFDINBold"; src: url('../../files/theme/fonts/webFonts/FFDINBold/font.woff2') format('woff2'), url('../../files/theme/fonts/webFonts/FFDINBold/font.woff') format('woff'); font-display: swap; } @font-face { font-family: "FFDINLight"; src: url('../../files/theme/fonts/webFonts/FFDINLight/font.woff2') format('woff2'), url('../../files/theme/fonts/webFonts/FFDINLight/font.woff') format('woff'); font-display: swap; } /*******************************/ /* */ /* OSPA 2023 - STYLES */ /* Autor: TN34.DE / The Gmo */ /* Version: 1.0 */ /* */ /*******************************/ /*! 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 { -webkit-box-sizing: content-box; 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 */ -webkit-text-decoration: underline dotted; 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 { -webkit-box-sizing: border-box; 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] { -webkit-box-sizing: border-box; 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; } /*! * Hamburgers * @description Tasty CSS-animated hamburgers * @author Jonathan Suh @jonsuh * @site https://jonsuh.com/hamburgers * @link https://github.com/jonsuh/hamburgers */ .hamburger { padding: 15px 15px; display: inline-block; cursor: pointer; -webkit-transition-property: opacity, -webkit-filter; transition-property: opacity, -webkit-filter; transition-property: opacity, filter; transition-property: opacity, filter, -webkit-filter; -webkit-transition-duration: 0.15s; transition-duration: 0.15s; -webkit-transition-timing-function: linear; transition-timing-function: linear; font: inherit; color: inherit; text-transform: none; background-color: transparent; border: 0; margin: 0; overflow: visible; } .hamburger:hover { opacity: 0.7; } .hamburger.is-active:hover { opacity: 0.7; } .hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::before, .hamburger.is-active .hamburger-inner::after { background-color: #000; } .hamburger-box { width: 40px; height: 24px; display: inline-block; position: relative; } .hamburger-inner { display: block; top: 50%; margin-top: -2px; } .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { width: 40px; height: 4px; background-color: #000; border-radius: 4px; position: absolute; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transition-duration: 0.15s; transition-duration: 0.15s; -webkit-transition-timing-function: ease; transition-timing-function: ease; } .hamburger-inner::before, .hamburger-inner::after { content: ""; display: block; } .hamburger-inner::before { top: -10px; } .hamburger-inner::after { bottom: -10px; } /* * 3DX */ .hamburger--3dx .hamburger-box { -webkit-perspective: 80px; perspective: 80px; } .hamburger--3dx .hamburger-inner { -webkit-transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dx .hamburger-inner::before, .hamburger--3dx .hamburger-inner::after { -webkit-transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dx.is-active .hamburger-inner { background-color: transparent !important; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .hamburger--3dx.is-active .hamburger-inner::before { -webkit-transform: translate3d(0, 10px, 0) rotate(45deg); transform: translate3d(0, 10px, 0) rotate(45deg); } .hamburger--3dx.is-active .hamburger-inner::after { -webkit-transform: translate3d(0, -10px, 0) rotate(-45deg); transform: translate3d(0, -10px, 0) rotate(-45deg); } /* * 3DX Reverse */ .hamburger--3dx-r .hamburger-box { -webkit-perspective: 80px; perspective: 80px; } .hamburger--3dx-r .hamburger-inner { -webkit-transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dx-r .hamburger-inner::before, .hamburger--3dx-r .hamburger-inner::after { -webkit-transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dx-r.is-active .hamburger-inner { background-color: transparent !important; -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); } .hamburger--3dx-r.is-active .hamburger-inner::before { -webkit-transform: translate3d(0, 10px, 0) rotate(45deg); transform: translate3d(0, 10px, 0) rotate(45deg); } .hamburger--3dx-r.is-active .hamburger-inner::after { -webkit-transform: translate3d(0, -10px, 0) rotate(-45deg); transform: translate3d(0, -10px, 0) rotate(-45deg); } /* * 3DY */ .hamburger--3dy .hamburger-box { -webkit-perspective: 80px; perspective: 80px; } .hamburger--3dy .hamburger-inner { -webkit-transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dy .hamburger-inner::before, .hamburger--3dy .hamburger-inner::after { -webkit-transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dy.is-active .hamburger-inner { background-color: transparent !important; -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); } .hamburger--3dy.is-active .hamburger-inner::before { -webkit-transform: translate3d(0, 10px, 0) rotate(45deg); transform: translate3d(0, 10px, 0) rotate(45deg); } .hamburger--3dy.is-active .hamburger-inner::after { -webkit-transform: translate3d(0, -10px, 0) rotate(-45deg); transform: translate3d(0, -10px, 0) rotate(-45deg); } /* * 3DY Reverse */ .hamburger--3dy-r .hamburger-box { -webkit-perspective: 80px; perspective: 80px; } .hamburger--3dy-r .hamburger-inner { -webkit-transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dy-r .hamburger-inner::before, .hamburger--3dy-r .hamburger-inner::after { -webkit-transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dy-r.is-active .hamburger-inner { background-color: transparent !important; -webkit-transform: rotateX(180deg); transform: rotateX(180deg); } .hamburger--3dy-r.is-active .hamburger-inner::before { -webkit-transform: translate3d(0, 10px, 0) rotate(45deg); transform: translate3d(0, 10px, 0) rotate(45deg); } .hamburger--3dy-r.is-active .hamburger-inner::after { -webkit-transform: translate3d(0, -10px, 0) rotate(-45deg); transform: translate3d(0, -10px, 0) rotate(-45deg); } /* * 3DXY */ .hamburger--3dxy .hamburger-box { -webkit-perspective: 80px; perspective: 80px; } .hamburger--3dxy .hamburger-inner { -webkit-transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dxy .hamburger-inner::before, .hamburger--3dxy .hamburger-inner::after { -webkit-transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dxy.is-active .hamburger-inner { background-color: transparent !important; -webkit-transform: rotateX(180deg) rotateY(180deg); transform: rotateX(180deg) rotateY(180deg); } .hamburger--3dxy.is-active .hamburger-inner::before { -webkit-transform: translate3d(0, 10px, 0) rotate(45deg); transform: translate3d(0, 10px, 0) rotate(45deg); } .hamburger--3dxy.is-active .hamburger-inner::after { -webkit-transform: translate3d(0, -10px, 0) rotate(-45deg); transform: translate3d(0, -10px, 0) rotate(-45deg); } /* * 3DXY Reverse */ .hamburger--3dxy-r .hamburger-box { -webkit-perspective: 80px; perspective: 80px; } .hamburger--3dxy-r .hamburger-inner { -webkit-transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dxy-r .hamburger-inner::before, .hamburger--3dxy-r .hamburger-inner::after { -webkit-transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dxy-r.is-active .hamburger-inner { background-color: transparent !important; -webkit-transform: rotateX(180deg) rotateY(180deg) rotateZ(-180deg); transform: rotateX(180deg) rotateY(180deg) rotateZ(-180deg); } .hamburger--3dxy-r.is-active .hamburger-inner::before { -webkit-transform: translate3d(0, 10px, 0) rotate(45deg); transform: translate3d(0, 10px, 0) rotate(45deg); } .hamburger--3dxy-r.is-active .hamburger-inner::after { -webkit-transform: translate3d(0, -10px, 0) rotate(-45deg); transform: translate3d(0, -10px, 0) rotate(-45deg); } /* * Arrow */ .hamburger--arrow.is-active .hamburger-inner::before { -webkit-transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1); transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1); } .hamburger--arrow.is-active .hamburger-inner::after { -webkit-transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1); transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1); } /* * Arrow Right */ .hamburger--arrow-r.is-active .hamburger-inner::before { -webkit-transform: translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1); transform: translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1); } .hamburger--arrow-r.is-active .hamburger-inner::after { -webkit-transform: translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1); transform: translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1); } /* * Arrow Alt */ .hamburger--arrowalt .hamburger-inner::before { -webkit-transition: top 0.1s 0.1s ease, -webkit-transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: top 0.1s 0.1s ease, -webkit-transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); } .hamburger--arrowalt .hamburger-inner::after { -webkit-transition: bottom 0.1s 0.1s ease, -webkit-transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: bottom 0.1s 0.1s ease, -webkit-transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); } .hamburger--arrowalt.is-active .hamburger-inner::before { top: 0; -webkit-transform: translate3d(-8px, -10px, 0) rotate(-45deg) scale(0.7, 1); transform: translate3d(-8px, -10px, 0) rotate(-45deg) scale(0.7, 1); -webkit-transition: top 0.1s ease, -webkit-transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); transition: top 0.1s ease, -webkit-transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22), -webkit-transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); } .hamburger--arrowalt.is-active .hamburger-inner::after { bottom: 0; -webkit-transform: translate3d(-8px, 10px, 0) rotate(45deg) scale(0.7, 1); transform: translate3d(-8px, 10px, 0) rotate(45deg) scale(0.7, 1); -webkit-transition: bottom 0.1s ease, -webkit-transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); transition: bottom 0.1s ease, -webkit-transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22), -webkit-transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); } /* * Arrow Alt Right */ .hamburger--arrowalt-r .hamburger-inner::before { -webkit-transition: top 0.1s 0.1s ease, -webkit-transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: top 0.1s 0.1s ease, -webkit-transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); } .hamburger--arrowalt-r .hamburger-inner::after { -webkit-transition: bottom 0.1s 0.1s ease, -webkit-transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: bottom 0.1s 0.1s ease, -webkit-transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); } .hamburger--arrowalt-r.is-active .hamburger-inner::before { top: 0; -webkit-transform: translate3d(8px, -10px, 0) rotate(45deg) scale(0.7, 1); transform: translate3d(8px, -10px, 0) rotate(45deg) scale(0.7, 1); -webkit-transition: top 0.1s ease, -webkit-transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); transition: top 0.1s ease, -webkit-transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22), -webkit-transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); } .hamburger--arrowalt-r.is-active .hamburger-inner::after { bottom: 0; -webkit-transform: translate3d(8px, 10px, 0) rotate(-45deg) scale(0.7, 1); transform: translate3d(8px, 10px, 0) rotate(-45deg) scale(0.7, 1); -webkit-transition: bottom 0.1s ease, -webkit-transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); transition: bottom 0.1s ease, -webkit-transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22), -webkit-transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); } /* * Arrow Turn */ .hamburger--arrowturn.is-active .hamburger-inner { -webkit-transform: rotate(-180deg); transform: rotate(-180deg); } .hamburger--arrowturn.is-active .hamburger-inner::before { -webkit-transform: translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1); transform: translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1); } .hamburger--arrowturn.is-active .hamburger-inner::after { -webkit-transform: translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1); transform: translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1); } /* * Arrow Turn Right */ .hamburger--arrowturn-r.is-active .hamburger-inner { -webkit-transform: rotate(-180deg); transform: rotate(-180deg); } .hamburger--arrowturn-r.is-active .hamburger-inner::before { -webkit-transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1); transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1); } .hamburger--arrowturn-r.is-active .hamburger-inner::after { -webkit-transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1); transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1); } /* * Boring */ .hamburger--boring .hamburger-inner, .hamburger--boring .hamburger-inner::before, .hamburger--boring .hamburger-inner::after { -webkit-transition-property: none; transition-property: none; } .hamburger--boring.is-active .hamburger-inner { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .hamburger--boring.is-active .hamburger-inner::before { top: 0; opacity: 0; } .hamburger--boring.is-active .hamburger-inner::after { bottom: 0; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } /* * Collapse */ .hamburger--collapse .hamburger-inner { top: auto; bottom: 0; -webkit-transition-duration: 0.13s; transition-duration: 0.13s; -webkit-transition-delay: 0.13s; transition-delay: 0.13s; -webkit-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--collapse .hamburger-inner::after { top: -20px; -webkit-transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; } .hamburger--collapse .hamburger-inner::before { -webkit-transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--collapse.is-active .hamburger-inner { -webkit-transform: translate3d(0, -10px, 0) rotate(-45deg); transform: translate3d(0, -10px, 0) rotate(-45deg); -webkit-transition-delay: 0.22s; transition-delay: 0.22s; -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--collapse.is-active .hamburger-inner::after { top: 0; opacity: 0; -webkit-transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; } .hamburger--collapse.is-active .hamburger-inner::before { top: 0; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Collapse Reverse */ .hamburger--collapse-r .hamburger-inner { top: auto; bottom: 0; -webkit-transition-duration: 0.13s; transition-duration: 0.13s; -webkit-transition-delay: 0.13s; transition-delay: 0.13s; -webkit-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--collapse-r .hamburger-inner::after { top: -20px; -webkit-transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; } .hamburger--collapse-r .hamburger-inner::before { -webkit-transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--collapse-r.is-active .hamburger-inner { -webkit-transform: translate3d(0, -10px, 0) rotate(45deg); transform: translate3d(0, -10px, 0) rotate(45deg); -webkit-transition-delay: 0.22s; transition-delay: 0.22s; -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--collapse-r.is-active .hamburger-inner::after { top: 0; opacity: 0; -webkit-transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; } .hamburger--collapse-r.is-active .hamburger-inner::before { top: 0; -webkit-transform: rotate(90deg); transform: rotate(90deg); -webkit-transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Elastic */ .hamburger--elastic .hamburger-inner { top: 2px; -webkit-transition-duration: 0.275s; transition-duration: 0.275s; -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); } .hamburger--elastic .hamburger-inner::before { top: 10px; -webkit-transition: opacity 0.125s 0.275s ease; transition: opacity 0.125s 0.275s ease; } .hamburger--elastic .hamburger-inner::after { top: 20px; -webkit-transition: -webkit-transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: -webkit-transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55), -webkit-transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .hamburger--elastic.is-active .hamburger-inner { -webkit-transform: translate3d(0, 10px, 0) rotate(135deg); transform: translate3d(0, 10px, 0) rotate(135deg); -webkit-transition-delay: 0.075s; transition-delay: 0.075s; } .hamburger--elastic.is-active .hamburger-inner::before { -webkit-transition-delay: 0s; transition-delay: 0s; opacity: 0; } .hamburger--elastic.is-active .hamburger-inner::after { -webkit-transform: translate3d(0, -20px, 0) rotate(-270deg); transform: translate3d(0, -20px, 0) rotate(-270deg); -webkit-transition-delay: 0.075s; transition-delay: 0.075s; } /* * Elastic Reverse */ .hamburger--elastic-r .hamburger-inner { top: 2px; -webkit-transition-duration: 0.275s; transition-duration: 0.275s; -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); } .hamburger--elastic-r .hamburger-inner::before { top: 10px; -webkit-transition: opacity 0.125s 0.275s ease; transition: opacity 0.125s 0.275s ease; } .hamburger--elastic-r .hamburger-inner::after { top: 20px; -webkit-transition: -webkit-transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: -webkit-transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55), -webkit-transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .hamburger--elastic-r.is-active .hamburger-inner { -webkit-transform: translate3d(0, 10px, 0) rotate(-135deg); transform: translate3d(0, 10px, 0) rotate(-135deg); -webkit-transition-delay: 0.075s; transition-delay: 0.075s; } .hamburger--elastic-r.is-active .hamburger-inner::before { -webkit-transition-delay: 0s; transition-delay: 0s; opacity: 0; } .hamburger--elastic-r.is-active .hamburger-inner::after { -webkit-transform: translate3d(0, -20px, 0) rotate(270deg); transform: translate3d(0, -20px, 0) rotate(270deg); -webkit-transition-delay: 0.075s; transition-delay: 0.075s; } /* * Emphatic */ .hamburger--emphatic { overflow: hidden; } .hamburger--emphatic .hamburger-inner { -webkit-transition: background-color 0.125s 0.175s ease-in; transition: background-color 0.125s 0.175s ease-in; } .hamburger--emphatic .hamburger-inner::before { left: 0; -webkit-transition: top 0.05s 0.125s linear, left 0.125s 0.175s ease-in, -webkit-transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335); transition: top 0.05s 0.125s linear, left 0.125s 0.175s ease-in, -webkit-transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335); transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in; transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in, -webkit-transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335); } .hamburger--emphatic .hamburger-inner::after { top: 10px; right: 0; -webkit-transition: top 0.05s 0.125s linear, right 0.125s 0.175s ease-in, -webkit-transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335); transition: top 0.05s 0.125s linear, right 0.125s 0.175s ease-in, -webkit-transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335); transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in; transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in, -webkit-transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335); } .hamburger--emphatic.is-active .hamburger-inner { -webkit-transition-delay: 0s; transition-delay: 0s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; background-color: transparent !important; } .hamburger--emphatic.is-active .hamburger-inner::before { left: -80px; top: -80px; -webkit-transform: translate3d(80px, 80px, 0) rotate(45deg); transform: translate3d(80px, 80px, 0) rotate(45deg); -webkit-transition: left 0.125s ease-out, top 0.05s 0.125s linear, -webkit-transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); transition: left 0.125s ease-out, top 0.05s 0.125s linear, -webkit-transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1), -webkit-transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); } .hamburger--emphatic.is-active .hamburger-inner::after { right: -80px; top: -80px; -webkit-transform: translate3d(-80px, 80px, 0) rotate(-45deg); transform: translate3d(-80px, 80px, 0) rotate(-45deg); -webkit-transition: right 0.125s ease-out, top 0.05s 0.125s linear, -webkit-transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); transition: right 0.125s ease-out, top 0.05s 0.125s linear, -webkit-transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); transition: right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); transition: right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1), -webkit-transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); } /* * Emphatic Reverse */ .hamburger--emphatic-r { overflow: hidden; } .hamburger--emphatic-r .hamburger-inner { -webkit-transition: background-color 0.125s 0.175s ease-in; transition: background-color 0.125s 0.175s ease-in; } .hamburger--emphatic-r .hamburger-inner::before { left: 0; -webkit-transition: top 0.05s 0.125s linear, left 0.125s 0.175s ease-in, -webkit-transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335); transition: top 0.05s 0.125s linear, left 0.125s 0.175s ease-in, -webkit-transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335); transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in; transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in, -webkit-transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335); } .hamburger--emphatic-r .hamburger-inner::after { top: 10px; right: 0; -webkit-transition: top 0.05s 0.125s linear, right 0.125s 0.175s ease-in, -webkit-transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335); transition: top 0.05s 0.125s linear, right 0.125s 0.175s ease-in, -webkit-transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335); transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in; transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in, -webkit-transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335); } .hamburger--emphatic-r.is-active .hamburger-inner { -webkit-transition-delay: 0s; transition-delay: 0s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; background-color: transparent !important; } .hamburger--emphatic-r.is-active .hamburger-inner::before { left: -80px; top: 80px; -webkit-transform: translate3d(80px, -80px, 0) rotate(-45deg); transform: translate3d(80px, -80px, 0) rotate(-45deg); -webkit-transition: left 0.125s ease-out, top 0.05s 0.125s linear, -webkit-transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); transition: left 0.125s ease-out, top 0.05s 0.125s linear, -webkit-transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1), -webkit-transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); } .hamburger--emphatic-r.is-active .hamburger-inner::after { right: -80px; top: 80px; -webkit-transform: translate3d(-80px, -80px, 0) rotate(45deg); transform: translate3d(-80px, -80px, 0) rotate(45deg); -webkit-transition: right 0.125s ease-out, top 0.05s 0.125s linear, -webkit-transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); transition: right 0.125s ease-out, top 0.05s 0.125s linear, -webkit-transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); transition: right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); transition: right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1), -webkit-transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); } /* * Minus */ .hamburger--minus .hamburger-inner::before, .hamburger--minus .hamburger-inner::after { -webkit-transition: bottom 0.08s 0s ease-out, top 0.08s 0s ease-out, opacity 0s linear; transition: bottom 0.08s 0s ease-out, top 0.08s 0s ease-out, opacity 0s linear; } .hamburger--minus.is-active .hamburger-inner::before, .hamburger--minus.is-active .hamburger-inner::after { opacity: 0; -webkit-transition: bottom 0.08s ease-out, top 0.08s ease-out, opacity 0s 0.08s linear; transition: bottom 0.08s ease-out, top 0.08s ease-out, opacity 0s 0.08s linear; } .hamburger--minus.is-active .hamburger-inner::before { top: 0; } .hamburger--minus.is-active .hamburger-inner::after { bottom: 0; } /* * Slider */ .hamburger--slider .hamburger-inner { top: 2px; } .hamburger--slider .hamburger-inner::before { top: 10px; -webkit-transition-property: opacity, -webkit-transform; transition-property: opacity, -webkit-transform; transition-property: transform, opacity; transition-property: transform, opacity, -webkit-transform; -webkit-transition-timing-function: ease; transition-timing-function: ease; -webkit-transition-duration: 0.15s; transition-duration: 0.15s; } .hamburger--slider .hamburger-inner::after { top: 20px; } .hamburger--slider.is-active .hamburger-inner { -webkit-transform: translate3d(0, 10px, 0) rotate(45deg); transform: translate3d(0, 10px, 0) rotate(45deg); } .hamburger--slider.is-active .hamburger-inner::before { -webkit-transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0); transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0); opacity: 0; } .hamburger--slider.is-active .hamburger-inner::after { -webkit-transform: translate3d(0, -20px, 0) rotate(-90deg); transform: translate3d(0, -20px, 0) rotate(-90deg); } /* * Slider Reverse */ .hamburger--slider-r .hamburger-inner { top: 2px; } .hamburger--slider-r .hamburger-inner::before { top: 10px; -webkit-transition-property: opacity, -webkit-transform; transition-property: opacity, -webkit-transform; transition-property: transform, opacity; transition-property: transform, opacity, -webkit-transform; -webkit-transition-timing-function: ease; transition-timing-function: ease; -webkit-transition-duration: 0.15s; transition-duration: 0.15s; } .hamburger--slider-r .hamburger-inner::after { top: 20px; } .hamburger--slider-r.is-active .hamburger-inner { -webkit-transform: translate3d(0, 10px, 0) rotate(-45deg); transform: translate3d(0, 10px, 0) rotate(-45deg); } .hamburger--slider-r.is-active .hamburger-inner::before { -webkit-transform: rotate(45deg) translate3d(5.71429px, -6px, 0); transform: rotate(45deg) translate3d(5.71429px, -6px, 0); opacity: 0; } .hamburger--slider-r.is-active .hamburger-inner::after { -webkit-transform: translate3d(0, -20px, 0) rotate(90deg); transform: translate3d(0, -20px, 0) rotate(90deg); } /* * Spin */ .hamburger--spin .hamburger-inner { -webkit-transition-duration: 0.22s; transition-duration: 0.22s; -webkit-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spin .hamburger-inner::before { -webkit-transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; } .hamburger--spin .hamburger-inner::after { -webkit-transition: bottom 0.1s 0.25s ease-in, -webkit-transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.1s 0.25s ease-in, -webkit-transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spin.is-active .hamburger-inner { -webkit-transform: rotate(225deg); transform: rotate(225deg); -webkit-transition-delay: 0.12s; transition-delay: 0.12s; -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--spin.is-active .hamburger-inner::before { top: 0; opacity: 0; -webkit-transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; } .hamburger--spin.is-active .hamburger-inner::after { bottom: 0; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transition: bottom 0.1s ease-out, -webkit-transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.1s ease-out, -webkit-transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Spin Reverse */ .hamburger--spin-r .hamburger-inner { -webkit-transition-duration: 0.22s; transition-duration: 0.22s; -webkit-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spin-r .hamburger-inner::before { -webkit-transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; } .hamburger--spin-r .hamburger-inner::after { -webkit-transition: bottom 0.1s 0.25s ease-in, -webkit-transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.1s 0.25s ease-in, -webkit-transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spin-r.is-active .hamburger-inner { -webkit-transform: rotate(-225deg); transform: rotate(-225deg); -webkit-transition-delay: 0.12s; transition-delay: 0.12s; -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--spin-r.is-active .hamburger-inner::before { top: 0; opacity: 0; -webkit-transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; } .hamburger--spin-r.is-active .hamburger-inner::after { bottom: 0; -webkit-transform: rotate(90deg); transform: rotate(90deg); -webkit-transition: bottom 0.1s ease-out, -webkit-transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.1s ease-out, -webkit-transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Spring */ .hamburger--spring .hamburger-inner { top: 2px; -webkit-transition: background-color 0s 0.13s linear; transition: background-color 0s 0.13s linear; } .hamburger--spring .hamburger-inner::before { top: 10px; -webkit-transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spring .hamburger-inner::after { top: 20px; -webkit-transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spring.is-active .hamburger-inner { -webkit-transition-delay: 0.22s; transition-delay: 0.22s; background-color: transparent !important; } .hamburger--spring.is-active .hamburger-inner::before { top: 0; -webkit-transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 10px, 0) rotate(45deg); transform: translate3d(0, 10px, 0) rotate(45deg); } .hamburger--spring.is-active .hamburger-inner::after { top: 0; -webkit-transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 10px, 0) rotate(-45deg); transform: translate3d(0, 10px, 0) rotate(-45deg); } /* * Spring Reverse */ .hamburger--spring-r .hamburger-inner { top: auto; bottom: 0; -webkit-transition-duration: 0.13s; transition-duration: 0.13s; -webkit-transition-delay: 0s; transition-delay: 0s; -webkit-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spring-r .hamburger-inner::after { top: -20px; -webkit-transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0s linear; transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0s linear; } .hamburger--spring-r .hamburger-inner::before { -webkit-transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spring-r.is-active .hamburger-inner { -webkit-transform: translate3d(0, -10px, 0) rotate(-45deg); transform: translate3d(0, -10px, 0) rotate(-45deg); -webkit-transition-delay: 0.22s; transition-delay: 0.22s; -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--spring-r.is-active .hamburger-inner::after { top: 0; opacity: 0; -webkit-transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0s 0.22s linear; transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0s 0.22s linear; } .hamburger--spring-r.is-active .hamburger-inner::before { top: 0; -webkit-transform: rotate(90deg); transform: rotate(90deg); -webkit-transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Stand */ .hamburger--stand .hamburger-inner { -webkit-transition: background-color 0s 0.075s linear, -webkit-transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: background-color 0s 0.075s linear, -webkit-transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.075s linear; transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.075s linear, -webkit-transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--stand .hamburger-inner::before { -webkit-transition: top 0.075s 0.075s ease-in, -webkit-transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.075s 0.075s ease-in, -webkit-transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--stand .hamburger-inner::after { -webkit-transition: bottom 0.075s 0.075s ease-in, -webkit-transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.075s 0.075s ease-in, -webkit-transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--stand.is-active .hamburger-inner { -webkit-transform: rotate(90deg); transform: rotate(90deg); background-color: transparent !important; -webkit-transition: background-color 0s 0.15s linear, -webkit-transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1); transition: background-color 0s 0.15s linear, -webkit-transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1); transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.15s linear; transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.15s linear, -webkit-transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--stand.is-active .hamburger-inner::before { top: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition: top 0.075s 0.1s ease-out, -webkit-transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.075s 0.1s ease-out, -webkit-transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--stand.is-active .hamburger-inner::after { bottom: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: bottom 0.075s 0.1s ease-out, -webkit-transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.075s 0.1s ease-out, -webkit-transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Stand Reverse */ .hamburger--stand-r .hamburger-inner { -webkit-transition: background-color 0s 0.075s linear, -webkit-transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: background-color 0s 0.075s linear, -webkit-transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.075s linear; transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.075s linear, -webkit-transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--stand-r .hamburger-inner::before { -webkit-transition: top 0.075s 0.075s ease-in, -webkit-transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.075s 0.075s ease-in, -webkit-transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--stand-r .hamburger-inner::after { -webkit-transition: bottom 0.075s 0.075s ease-in, -webkit-transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.075s 0.075s ease-in, -webkit-transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--stand-r.is-active .hamburger-inner { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); background-color: transparent !important; -webkit-transition: background-color 0s 0.15s linear, -webkit-transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1); transition: background-color 0s 0.15s linear, -webkit-transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1); transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.15s linear; transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.15s linear, -webkit-transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--stand-r.is-active .hamburger-inner::before { top: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition: top 0.075s 0.1s ease-out, -webkit-transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.075s 0.1s ease-out, -webkit-transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--stand-r.is-active .hamburger-inner::after { bottom: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: bottom 0.075s 0.1s ease-out, -webkit-transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.075s 0.1s ease-out, -webkit-transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Squeeze */ .hamburger--squeeze .hamburger-inner { -webkit-transition-duration: 0.075s; transition-duration: 0.075s; -webkit-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--squeeze .hamburger-inner::before { -webkit-transition: top 0.075s 0.12s ease, opacity 0.075s ease; transition: top 0.075s 0.12s ease, opacity 0.075s ease; } .hamburger--squeeze .hamburger-inner::after { -webkit-transition: bottom 0.075s 0.12s ease, -webkit-transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.075s 0.12s ease, -webkit-transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--squeeze.is-active .hamburger-inner { -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition-delay: 0.12s; transition-delay: 0.12s; -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--squeeze.is-active .hamburger-inner::before { top: 0; opacity: 0; -webkit-transition: top 0.075s ease, opacity 0.075s 0.12s ease; transition: top 0.075s ease, opacity 0.075s 0.12s ease; } .hamburger--squeeze.is-active .hamburger-inner::after { bottom: 0; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transition: bottom 0.075s ease, -webkit-transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.075s ease, -webkit-transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Vortex */ .hamburger--vortex .hamburger-inner { -webkit-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } .hamburger--vortex .hamburger-inner::before, .hamburger--vortex .hamburger-inner::after { -webkit-transition-duration: 0s; transition-duration: 0s; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; -webkit-transition-timing-function: linear; transition-timing-function: linear; } .hamburger--vortex .hamburger-inner::before { -webkit-transition-property: top, opacity; transition-property: top, opacity; } .hamburger--vortex .hamburger-inner::after { -webkit-transition-property: bottom, -webkit-transform; transition-property: bottom, -webkit-transform; transition-property: bottom, transform; transition-property: bottom, transform, -webkit-transform; } .hamburger--vortex.is-active .hamburger-inner { -webkit-transform: rotate(765deg); transform: rotate(765deg); -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } .hamburger--vortex.is-active .hamburger-inner::before, .hamburger--vortex.is-active .hamburger-inner::after { -webkit-transition-delay: 0s; transition-delay: 0s; } .hamburger--vortex.is-active .hamburger-inner::before { top: 0; opacity: 0; } .hamburger--vortex.is-active .hamburger-inner::after { bottom: 0; -webkit-transform: rotate(90deg); transform: rotate(90deg); } /* * Vortex Reverse */ .hamburger--vortex-r .hamburger-inner { -webkit-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } .hamburger--vortex-r .hamburger-inner::before, .hamburger--vortex-r .hamburger-inner::after { -webkit-transition-duration: 0s; transition-duration: 0s; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; -webkit-transition-timing-function: linear; transition-timing-function: linear; } .hamburger--vortex-r .hamburger-inner::before { -webkit-transition-property: top, opacity; transition-property: top, opacity; } .hamburger--vortex-r .hamburger-inner::after { -webkit-transition-property: bottom, -webkit-transform; transition-property: bottom, -webkit-transform; transition-property: bottom, transform; transition-property: bottom, transform, -webkit-transform; } .hamburger--vortex-r.is-active .hamburger-inner { -webkit-transform: rotate(-765deg); transform: rotate(-765deg); -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } .hamburger--vortex-r.is-active .hamburger-inner::before, .hamburger--vortex-r.is-active .hamburger-inner::after { -webkit-transition-delay: 0s; transition-delay: 0s; } .hamburger--vortex-r.is-active .hamburger-inner::before { top: 0; opacity: 0; } .hamburger--vortex-r.is-active .hamburger-inner::after { bottom: 0; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } /* Slider */ .slick-slider { position: relative; display: block; -webkit-box-sizing: border-box; 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); 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; } /*********************/ /* MIXINS: FLEXBOX */ /*********************/ * { outline: none; -webkit-box-sizing: border-box; box-sizing: border-box; } fieldset { padding: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } p:nth-of-type(1) { margin-top: 0; } p:nth-last-of-type(1) { margin-bottom: 0; } ul { margin: 0; padding: 0; } img { width: 100%; display: block; } * { -webkit-font-smoothing: antialiased; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004); line-height: 1.5; font-family: "FFDINLight", sans-serif; } b, strong { font-weight: normal; } h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-family: "FFDINBold", sans-serif; font-weight: normal; } h1 a, h1 span, .h1 a, .h1 span, h2 a, h2 span, .h2 a, .h2 span, h3 a, h3 span, .h3 a, .h3 span, h4 a, h4 span, .h4 a, .h4 span, h5 a, h5 span, .h5 a, .h5 span, h6 a, h6 span, .h6 a, .h6 span { display: block; font-family: inherit; font-weight: inherit; line-height: inherit; font-size: inherit; } h1 a.light, h1 span.light, .h1 a.light, .h1 span.light, h2 a.light, h2 span.light, .h2 a.light, .h2 span.light, h3 a.light, h3 span.light, .h3 a.light, .h3 span.light, h4 a.light, h4 span.light, .h4 a.light, .h4 span.light, h5 a.light, h5 span.light, .h5 a.light, .h5 span.light, h6 a.light, h6 span.light, .h6 a.light, .h6 span.light { font-family: "FFDINLight", sans-serif !important; } h1 a.bold, h1 span.bold, .h1 a.bold, .h1 span.bold, h2 a.bold, h2 span.bold, .h2 a.bold, .h2 span.bold, h3 a.bold, h3 span.bold, .h3 a.bold, .h3 span.bold, h4 a.bold, h4 span.bold, .h4 a.bold, .h4 span.bold, h5 a.bold, h5 span.bold, .h5 a.bold, .h5 span.bold, h6 a.bold, h6 span.bold, .h6 a.bold, .h6 span.bold { font-family: "FFDINBold", sans-serif !important; } h1 a, .h1 a, h2 a, .h2 a, h3 a, .h3 a, h4 a, .h4 a, h5 a, .h5 a, h6 a, .h6 a { text-decoration: none; color: inherit; -webkit-transition: color 0.35s ease-in; transition: color 0.35s ease-in; } @media (hover: hover) { h1 a:hover, .h1 a:hover, h2 a:hover, .h2 a:hover, h3 a:hover, .h3 a:hover, h4 a:hover, .h4 a:hover, h5 a:hover, .h5 a:hover, h6 a:hover, .h6 a:hover { color: #007ac3; } } h1:not(.reverse) span:nth-of-type(1), .h1:not(.reverse) span:nth-of-type(1), h2:not(.reverse) span:nth-of-type(1), .h2:not(.reverse) span:nth-of-type(1), h3:not(.reverse) span:nth-of-type(1), .h3:not(.reverse) span:nth-of-type(1), h4:not(.reverse) span:nth-of-type(1), .h4:not(.reverse) span:nth-of-type(1), h5:not(.reverse) span:nth-of-type(1), .h5:not(.reverse) span:nth-of-type(1), h6:not(.reverse) span:nth-of-type(1), .h6:not(.reverse) span:nth-of-type(1) { font-family: "FFDINLight", sans-serif; } h1.reverse span:nth-last-of-type(1), .h1.reverse span:nth-last-of-type(1), h2.reverse span:nth-last-of-type(1), .h2.reverse span:nth-last-of-type(1), h3.reverse span:nth-last-of-type(1), .h3.reverse span:nth-last-of-type(1), h4.reverse span:nth-last-of-type(1), .h4.reverse span:nth-last-of-type(1), h5.reverse span:nth-last-of-type(1), .h5.reverse span:nth-last-of-type(1), h6.reverse span:nth-last-of-type(1), .h6.reverse span:nth-last-of-type(1) { font-family: "FFDINLight", sans-serif; } h1 + p, .h1 + p, h2 + p, .h2 + p, h3 + p, .h3 + p, h4 + p, .h4 + p, h5 + p, .h5 + p, h6 + p, .h6 + p { margin-top: 0; } h2, .h2 { font-size: 2.5rem; font-size: clamp(1.25rem, 2.1vw, 2.5rem); line-height: 1.125; font-weight: normal; margin-bottom: 1.875rem; margin-bottom: clamp(1rem, 1.5625vw, 1.875rem); } h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-size: 1.5rem; font-size: clamp(1.125rem, 1.25vw, 1.5rem); line-height: 1.273; font-family: "FFDINBold", sans-serif; font-weight: normal; } p, li, th, td { font-size: 1.125rem; font-size: clamp(1rem, 0.9375vw, 1.125rem); } p a, p span, li a, li span, th a, th span, td a, td span { font-size: inherit; line-height: inherit; } p a, li a, th a, td a, label a { color: #006daf; } p a span, li a span, th a span, td a span, label a span { color: inherit; } p a:visited, li a:visited, th a:visited, td a:visited, label a:visited { color: #007ac3; } .bg-col p a, li a, th a, td a, label a { color: #006daf; } p strong, li strong, th strong, td strong, label strong { font-family: "FFDINBold", sans-serif; } a { text-underline-offset: 0.2em; } a.button { position: relative; -webkit-appearance: none; -moz-appearance: none; appearance: none; display: inline-block; text-decoration: none; font-family: "FFDINBold", sans-serif; color: #000000; border-bottom: 1px solid #000000; margin-top: 1.25rem; -webkit-transition: all 0.35s ease-in; transition: all 0.35s ease-in; } @media (hover: hover) { a.button:hover { color: #007ac3; border-color: #007ac3; } } sup, sub { font-family: inherit; font-weight: inherit; line-height: inherit; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: none; } /*********************/ /* MIXINS: FLEXBOX */ /*********************/ .flex { display: -webkit-box; display: -ms-flexbox; display: flex; } .flex-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .flex-v-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .flex-v-start { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .flex-v-end { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .flex-v-spread { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .flex-h-start { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .flex-h-end { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .flex-h-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .flex-h-spread { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .flex-column { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .flex-column-reverse { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .flex-row { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .flex-row-reverse { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .flex-wrap { -ms-flex-wrap: wrap; flex-wrap: wrap; } .flex-no-wrap { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } #header { position: fixed; top: 0; left: 0; width: 100%; z-index: 7; border-bottom: 1px solid #ffffff; -webkit-transition: border-color 0.35s ease-in; transition: border-color 0.35s ease-in; } #header .inside { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; padding-top: 2.1875vw; padding-top: clamp(1.54rem, 2.1875vw, 2.625rem); padding-left: 4.8vw; padding-left: clamp(2.5rem, 4.8vw, 5.75rem); padding-right: 4.8vw; padding-right: clamp(2.5rem, 4.8vw, 5.75rem); padding-bottom: 1.77vw; padding-bottom: clamp(1.25rem, 1.77vw, 2.125rem); background-color: rgba(255, 0, 0, 0); -webkit-transition: all 0.35s ease-in; transition: all 0.35s ease-in; } @media all and (max-width: 33.75rem) { #header .inside { padding-top: 1.77vw; padding-top: clamp(1.25rem, 1.77vw, 2.125rem); padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } } @media all and (max-width: 33.75rem) and (max-width: 58.125rem) { #header .inside { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } #header .inside .logo { position: absolute; top: 50%; left: 0; right: 0; z-index: 11; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 9.16667; width: clamp(5rem, 9.16667vw, 11rem); margin: 0 auto; -webkit-transition: width 0.35s ease-in; transition: width 0.35s ease-in; } #header .inside .logo svg { display: block; width: 100%; height: auto; } #header .inside .logo svg path { fill: #ffffff !important; -webkit-transition: fill 0.35s ease-in; transition: fill 0.35s ease-in; } body.nav-open #header .inside .logo svg path { fill: #007ac3 !important; } body.mm-wrapper_opened #header .inside .logo svg path { fill: #007ac3 !important; } #header .inside .nav__block { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 2.65vw; height: clamp(2rem, 2.65vw, 3.125rem); } #header .inside .nav__block.meta { margin-left: 3.125vw; margin-left: clamp(1.25rem, 3.125vw, 3.75rem); -webkit-transition: height 0.35s ease-in; transition: height 0.35s ease-in; } #header .inside .nav__block.meta .toggle-lang { position: relative; height: 100%; padding-left: 1.875rem; padding-left: clamp(1rem, 1.6vw, 1.875rem); } #header .inside .nav__block.meta .toggle-lang span { display: block; font-size: 1.1875rem; font-size: clamp(1rem, 1vw, 1.1875rem); color: #ffffff; font-weight: 300; line-height: 1; text-transform: uppercase; margin-top: 0.125rem; -webkit-transition: color 0.35s ease-in; transition: color 0.35s ease-in; } #header .inside .nav__block.meta .toggle-lang:before { content: ""; position: absolute; top: 0; left: 0; width: 1px; height: 100%; background-color: #ffffff; -webkit-transition: all 0.35s ease-in; transition: all 0.35s ease-in; } body.mm-wrapper_opened #header .inside .nav__block.meta .toggle-lang { pointer-events: none; opacity: 0; } #header .inside .nav__block.meta .mod_changelanguage { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; height: 100%; padding-left: 1.875rem; padding-left: clamp(1rem, 1.6vw, 1.875rem); } #header .inside .nav__block.meta .mod_changelanguage:before { content: ""; position: absolute; top: 0; left: 0; width: 1px; height: 100%; background-color: #ffffff; -webkit-transition: all 0.35s ease-in; transition: all 0.35s ease-in; } #header .inside .nav__block.meta .mod_changelanguage ul { list-style: none; margin: 0; padding: 0; } #header .inside .nav__block.meta .mod_changelanguage ul li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100%; line-height: 1; margin-top: 0.125rem; } #header .inside .nav__block.meta .mod_changelanguage ul li.active strong { font-size: 1.1875rem; font-size: clamp(1rem, 1vw, 1.1875rem); color: #ffffff; font-weight: 300; line-height: 1; -webkit-transition: color 0.35s ease-in; transition: color 0.35s ease-in; } #header .inside .nav__block.meta .mod_changelanguage ul li:not(.active) { display: none; } #header .inside .nav__block.meta .mod_search .icon { width: 2rem; } #header .inside .nav__block.meta .mod_search .icon svg { width: auto; height: 80%; min-height: 20px; max-height: 1.75rem; display: block; } #header .inside .nav__block .page-switch { list-style: none; margin: 0; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; height: 100%; } #header .inside .nav__block .page-switch li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; height: 100%; line-height: 1; } #header .inside .nav__block .page-switch li a, #header .inside .nav__block .page-switch li span { display: block; font-size: 1.1875rem; font-size: clamp(1rem, 1vw, 1.1875rem); color: #ffffff; line-height: 1; margin-top: 0.125rem; -webkit-transition: color 0.35s ease-in; transition: color 0.35s ease-in; } #header .inside .nav__block .page-switch li:nth-of-type(1) { padding-right: 3.125vw; padding-right: clamp(1rem, 3.125vw, 3.75rem); } #header .inside .nav__block .page-switch li:nth-of-type(2) { padding-left: 3.125vw; padding-left: clamp(1rem, 3.125vw, 3.75rem); } #header .inside .nav__block .page-switch li:nth-of-type(2):before { content: ""; position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); height: 100%; width: 1px; background-color: #ffffff; -webkit-transition: background-color 0.35s ease-in; transition: background-color 0.35s ease-in; } #header .inside .nav__block button { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; outline: none; background: none; padding: 0; } #header .inside .nav__block button.hamburger { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; z-index: 11; margin-right: 3.125vw; margin-right: clamp(1.25rem, 3.125vw, 3.75rem); } #header .inside .nav__block button.hamburger .hamburger-box { height: 20px; } #header .inside .nav__block button.hamburger .hamburger-box .hamburger-inner { margin-top: 0; } #header .inside .nav__block button.hamburger .hamburger-box .hamburger-inner, #header .inside .nav__block button.hamburger .hamburger-box .hamburger-inner:before, #header .inside .nav__block button.hamburger .hamburger-box .hamburger-inner:after { height: 1px; background-color: #ffffff; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } body.nav-open #header .inside .nav__block button.hamburger .hamburger-box .hamburger-inner, body.nav-open #header .inside .nav__block button.hamburger .hamburger-box .hamburger-inner:before, body.nav-open #header .inside .nav__block button.hamburger .hamburger-box .hamburger-inner:after { background-color: #000000; } #header .inside .nav__block button.hamburger.hamburger--slider-r .hamburger-inner { top: 0px; } #header .inside .nav__block button.hamburger:hover { opacity: 1; } #header .inside .nav__block button.toggle-search { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; max-width: 2.1875rem; width: 1.823vw; width: clamp(1.5rem, 1.823vw, 2.1875rem); height: 100%; } body.theme--private #header .inside .nav__block button.toggle-search { margin-right: 1.75rem; margin-right: clamp(0.85rem, 1.5vw, 1.75rem); } #header .inside .nav__block button.toggle-search svg { width: 80%; height: auto; display: block; } #header .inside .nav__block button.toggle-search svg path { fill: #ffffff !important; -webkit-transition: fill 0.35s ease-in; transition: fill 0.35s ease-in; } body.mm-wrapper_opened #header .inside .nav__block button.toggle-search { pointer-events: none; opacity: 0; } .headerColor-reverse:not(.mm-wrapper_opened) #header { border-color: #000000; } .headerColor-reverse:not(.mm-wrapper_opened) #header .inside .logo svg path { fill: #007ac3 !important; } .headerColor-reverse:not(.mm-wrapper_opened) #header .inside .nav__block.meta .mod_changelanguage ul li.active strong { color: #000000; } .headerColor-reverse:not(.mm-wrapper_opened) #header .inside .nav__block.meta .mod_changelanguage:before { background-color: #000000; } .headerColor-reverse:not(.mm-wrapper_opened) #header .inside .nav__block button.toggle-search svg path { fill: #000000 !important; } .headerColor-reverse:not(.mm-wrapper_opened) #header .inside .nav__block button.toggle-lang span { color: #000000; } .headerColor-reverse:not(.mm-wrapper_opened) #header .inside .nav__block button.toggle-lang:before { background-color: #000000; } .headerColor-reverse:not(.mm-wrapper_opened) #header .inside .nav__block button.hamburger .hamburger-box .hamburger-inner, .headerColor-reverse:not(.mm-wrapper_opened) #header .inside .nav__block button.hamburger .hamburger-box .hamburger-inner:before, .headerColor-reverse:not(.mm-wrapper_opened) #header .inside .nav__block button.hamburger .hamburger-box .hamburger-inner:after { background-color: #000000; } .headerColor-reverse:not(.mm-wrapper_opened) #header .inside .nav__block .page-switch li a, .headerColor-reverse:not(.mm-wrapper_opened) #header .inside .nav__block .page-switch li span { color: #000000; } .headerColor-reverse:not(.mm-wrapper_opened) #header .inside .nav__block .page-switch li:nth-of-type(2):before { background-color: #000000; } .scrolled:not(.mm-wrapper_opened) #header { border-color: #000000; border-color: #000000; } .scrolled:not(.mm-wrapper_opened) #header .inside .logo svg path { fill: #007ac3 !important; } .scrolled:not(.mm-wrapper_opened) #header .inside .nav__block.meta .mod_changelanguage ul li.active strong { color: #000000; } .scrolled:not(.mm-wrapper_opened) #header .inside .nav__block.meta .mod_changelanguage:before { background-color: #000000; } .scrolled:not(.mm-wrapper_opened) #header .inside .nav__block button.toggle-search svg path { fill: #000000 !important; } .scrolled:not(.mm-wrapper_opened) #header .inside .nav__block button.toggle-lang span { color: #000000; } .scrolled:not(.mm-wrapper_opened) #header .inside .nav__block button.toggle-lang:before { background-color: #000000; } .scrolled:not(.mm-wrapper_opened) #header .inside .nav__block button.hamburger .hamburger-box .hamburger-inner, .scrolled:not(.mm-wrapper_opened) #header .inside .nav__block button.hamburger .hamburger-box .hamburger-inner:before, .scrolled:not(.mm-wrapper_opened) #header .inside .nav__block button.hamburger .hamburger-box .hamburger-inner:after { background-color: #000000; } .scrolled:not(.mm-wrapper_opened) #header .inside .nav__block .page-switch li a, .scrolled:not(.mm-wrapper_opened) #header .inside .nav__block .page-switch li span { color: #000000; } .scrolled:not(.mm-wrapper_opened) #header .inside .nav__block .page-switch li:nth-of-type(2):before { background-color: #000000; } .scrolled:not(.mm-wrapper_opened) #header .inside { background-color: #ffffff; padding-top: 1.375rem; padding-top: clamp(0.75rem, 1.15vw, 1.375rem); padding-bottom: 1.15vw; padding-bottom: clamp(0.75rem, 1.15vw, 1.375rem); } .scrolled:not(.mm-wrapper_opened) #header .inside .logo { width: 7.3vw; width: clamp(5rem, 7.3vw, 8.75rem); } .scrolled:not(.mm-wrapper_opened) #header .inside .nav__block { height: 2.25rem; } html { scroll-behavior: smooth; } #container { z-index: 1; } #wrapper { overflow: hidden; } .mod_article { overflow: visible; scroll-margin-top: 4.16667vw; scroll-margin-top: clamp(60px, 4.16667vw, 80px); } .mod_article.noOverflow { overflow: hidden; } .mod_article.flow > .inside > * + * { margin-top: 10rem; margin-top: clamp(5rem, 8.333vw, 10rem); } #intro .mod_article { overflow: hidden; } #intro .mod_article.noOverflow { overflow: visible; } #container .mod_article { padding-top: 5rem; padding-top: clamp(2.5rem, 4.1665vw, 5rem); padding-bottom: 5rem; padding-bottom: clamp(2.5rem, 4.1665vw, 5rem); } #container .mod_article:nth-of-type(1):not(.npTop) { padding-top: 6.25vw; padding-top: clamp(2.625rem, 6.25vw, 7.5rem); } #container .mod_article:nth-last-of-type(1) { padding-bottom: 0; } #container .mod_article:nth-last-of-type(1) .inside > *:nth-last-child(1):not(.-bg):not(.has-bg-img):not(.cta-container) { margin-bottom: 10rem; margin-bottom: clamp(5rem, 8.333vw, 10rem); } #container .mod_article.npTop { padding-top: 0; } #container .mod_article.npBtm { padding-bottom: 0; } #container .mod_article.bg-color { position: relative; z-index: 2; background-color: #f8fcfe; } #container .mod_article.shiftUp { position: relative; margin-top: -13.28125vw; z-index: 0; } #container .mod_article.shiftUp > .inside > div { padding-top: 13.28125vw; } #container .mod_article.shiftUp > .inside > div > div > div { margin-top: 13.28125vw; margin-top: clamp(5.75rem, 13.28125vw, 15.9375rem); } .mod_article.hasDeco { position: relative; } .mod_article.hasDeco .inside { position: relative; z-index: 1; } .mod_article.hasDeco .deco { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; } .mod_article.hasDeco .deco .graphic { position: absolute; opacity: 0.35; } .mod_article.hasDeco .deco .graphic svg { width: 100%; height: auto; display: block; } .mod_article.hasDeco .deco .graphic.-l { top: 0; width: 65.5%; } .mod_article.hasDeco .deco .graphic.-r { top: 25%; width: 25.5%; } .mod_article.hasDeco .deco.-l-s .graphic.-l { left: 0; } .mod_article.hasDeco .deco.-l-s .graphic.-r { right: 0; } .mod_article.hasDeco .deco.-s-l .graphic.-r { left: 0; } .mod_article.hasDeco .deco.-s-l .graphic.-l { right: 0; } .mod_article.hasDeco .deco.-s-l .graphic svg { -webkit-transform: scaleX(-1); transform: scaleX(-1); } body.theme--public .mod_article:nth-last-of-type(1) .inside > *:nth-last-child(1).cta-container { margin-bottom: 10rem; margin-bottom: clamp(5rem, 8.333vw, 10rem); } body.theme--public .mod_customcatalogreader .cta-container { margin-bottom: 10rem; margin-bottom: clamp(5rem, 8.333vw, 10rem); } #footer { position: relative; z-index: 5; } #footer * { color: #ffffff; } #footer .inside { background-color: #007ac3; padding-top: 4rem; padding-bottom: 4rem; padding-top: clamp(1.75rem, 3.35vw, 4rem); padding-bottom: clamp(1.75rem, 3.35vw, 4rem); } #footer .inside .row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; justify-content: space-between; padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } @media all and (max-width: 58.125rem) { #footer .inside .row { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } #footer .inside .row.main { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } #footer .inside .row.meta { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } #footer .inside .row.main { width: calc(100% + 1rem); margin-left: -0.5rem; } #footer .inside .row .col { margin-left: 0.5rem; margin-right: 0.5rem; } #footer .inside .row .col.address { margin-bottom: 1.375rem; margin-bottom: clamp(1rem, 1.15vw, 1.375rem); } #footer .inside .row .col.address p { font-size: 1.25rem; font-size: clamp(1rem, 1.1vw, 1.25rem); line-height: 1.4; margin-top: 0; margin-bottom: 0; } #footer .inside .row .col.address p a { text-decoration: none; } @media (hover: hover) { #footer .inside .row .col.address p a { position: relative; } #footer .inside .row .col.address p a:before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: #ffffff; -webkit-transform: scale(0, 1); transform: scale(0, 1); -webkit-transform-origin: center; transform-origin: center; -webkit-transition: -webkit-transform 0.35s ease-in; transition: -webkit-transform 0.35s ease-in; transition: transform 0.35s ease-in; transition: transform 0.35s ease-in, -webkit-transform 0.35s ease-in; } #footer .inside .row .col.address p a:hover:before { -webkit-transform: scale(1, 1); transform: scale(1, 1); } } #footer .inside .row .col.address p + p { margin-top: 0.75rem; margin-top: clamp(0.5rem, 0.75vw, 0.75rem); } @media all and (max-width: 53.125rem) { #footer .inside .row .col.address p { text-align: center; margin-bottom: 1rem; } } #footer .inside .row .col.social { margin-bottom: 1.375rem; margin-bottom: clamp(1rem, 1.15vw, 1.375rem); } #footer .inside .row .col.social ul { list-style: none; margin: 0; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; } #footer .inside .row .col.social ul li a { display: block; } #footer .inside .row .col.social ul li a svg { height: 2.25rem; height: clamp(1.5rem, 1.875vw, 2.25rem); width: auto; display: block; } #footer .inside .row .col.social ul li a svg path { fill: #ffffff; -webkit-transition: fill 0.35s ease-in; transition: fill 0.35s ease-in; } @media (hover: hover) { #footer .inside .row .col.social ul li a:hover svg path { fill: #C6DAED; } } #footer .inside .row .col.social ul li + li { margin-left: 2.8125rem; margin-left: clamp(1rem, 2.35vw, 2.8125rem); } #footer .inside .row .copyright { font-size: 1rem; text-align: center; opacity: 0.46; } #footer .inside .row .mod_customnav ul li a span, #footer .inside .row .mod_customnav ul li strong { font-size: 1.25rem; font-size: clamp(1rem, 1.1vw, 1.25rem); } @media (hover: hover) { #footer .inside .row .mod_customnav ul li a span { position: relative; } #footer .inside .row .mod_customnav ul li a span:before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: #ffffff; -webkit-transform: scale(0, 1); transform: scale(0, 1); -webkit-transform-origin: center; transform-origin: center; -webkit-transition: -webkit-transform 0.35s ease-in; transition: -webkit-transform 0.35s ease-in; transition: transform 0.35s ease-in; transition: transform 0.35s ease-in, -webkit-transform 0.35s ease-in; } #footer .inside .row .mod_customnav ul li a:hover span:before { -webkit-transform: scale(1, 1); transform: scale(1, 1); } } #footer .inside .row .mod_customnav ul li + li { margin-left: 3.4375rem; margin-left: clamp(1rem, 2.87vw, 3.4375rem); } @media all and (max-width: 53.125rem) { #footer .inside .row.main { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #footer .inside .row.meta { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #footer .inside .row.meta .copyright { margin-top: 0.75rem; } } #footer .inside .cols { padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } @media all and (max-width: 58.125rem) { #footer .inside .cols { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } @media all and (max-width: 28.125rem) { #footer .inside .cols { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } #footer .inside .cols > .col > .row { padding-left: 0; padding-right: 0; } #footer .inside .cols > .col.main { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } #footer .inside .cols > .col.award { -ms-flex-negative: 1; flex-shrink: 1; padding-left: 36px; } #footer .inside .cols > .col.award .image { min-width: 90px; width: 7.1875vw; width: clamp(90px, 7.1875vw, 138px); } @media all and (max-width: 28.125rem) { #footer .inside .cols > .col.award { padding-left: 0; margin-bottom: 2.375rem; margin-bottom: clamp(2rem, 1.9792vw, 2.375rem); } } @media all and (max-width: 78.125rem) { #footer .inside .cols > .col .row.main { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } #footer .inside .cols > .col .row.meta { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } #footer .inside .cols > .col .row.meta .copyright { margin-top: 0.75rem; } } @media all and (max-width: 28.125rem) { #footer .inside .cols > .col .row.main, #footer .inside .cols > .col .row.meta { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } @media all and (min-width: 28.1875rem) { #footer .inside .cols > .col .row > .col.address p { text-align: left !important; } #footer .inside .cols > .col .row p.copyright { text-align: left; } } .custom #intro .mod_article { padding-top: 0; padding-bottom: 0; } .custom #intro .mod_article.layout-default, .custom #intro .mod_article.layout-outer, .custom #intro .mod_article.layout-full { padding-left: 0; padding-right: 0; } html { --color-main: #007ac3; --color-black: #000000; --color-btn-txt: #ffffff; --color-btn-border: #007ac3; --color-btn-bg: #007ac3; } .nav_overlay { position: fixed; top: 0; left: 0; z-index: 10; width: 100%; height: 100%; overflow-y: scroll; display: none; } .nav_overlay > button { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; outline: none; background: none; padding: 0; position: absolute; top: 50px; right: 90px; width: 2.25rem; height: 2.25rem; background: pink; } .nav_overlay .inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding-top: 10.41667vw; padding-top: clamp(5.5rem, 10.41667vw, 12.5rem); padding-left: 10.41667vw; padding-left: clamp(2.5rem, 10.41667vw, 12.5rem); padding-right: 9.375vw; padding-right: clamp(2.5rem, 9.375vw, 11.25rem); padding-bottom: 4.1667vh; padding-bottom: clamp(1.75rem, 4.1667vh, 5rem); width: 100%; min-height: 100%; } @media all and (max-width: 58.125rem) { .nav_overlay .inner { padding-left: 4.8vw; padding-left: clamp(2.5rem, 4.8vw, 5.75rem); padding-right: 4.8vw; padding-right: clamp(2.5rem, 4.8vw, 5.75rem); } } @media all and (max-width: 39.375rem) { .nav_overlay .inner { padding-bottom: 1rem; } } .nav_overlay .inner .nav-container { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .nav_overlay .inner .nav-container .featured { position: absolute; top: 0; right: 0; z-index: 1; width: 37.135vw; max-width: 44.5625rem; } .nav_overlay .inner .nav-container .featured > *:not(.nav-teaser), .nav_overlay .inner .nav-container .featured > .nav-teaser:nth-child(n+2) { display: none; } @media all and (max-width: 39.4375rem) { .nav_overlay .inner .nav-container .featured { display: none; } } .nav_overlay .inner .nav-container .mod_navigation { position: relative; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .nav_overlay .inner .nav-container .mod_navigation ul { list-style: none; margin: 0; padding: 0; height: 100%; } .nav_overlay .inner .nav-container .mod_navigation ul li button.prevPanel { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; outline: none; background: none; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 2.5rem; margin-bottom: clamp(1.25rem, 2.1vw, 2.5rem); } .nav_overlay .inner .nav-container .mod_navigation ul li button.prevPanel span { font-family: "FFDINBold", sans-serif; font-size: 1.25rem; font-size: clamp(1rem, 1.1vw, 1.25rem); color: #007ac3; } .nav_overlay .inner .nav-container .mod_navigation ul li button.prevPanel svg { margin-left: 0 !important; margin-right: 0.75rem; -webkit-transform: scale(-1); transform: scale(-1); } @media all and (min-width: 78.1875rem) { .nav_overlay .inner .nav-container .mod_navigation ul li button.prevPanel { display: none; } } .nav_overlay .inner .nav-container .mod_navigation ul li a { text-decoration: none; } .nav_overlay .inner .nav-container .mod_navigation ul li a span { color: #000000; -webkit-transition: color 0.35s ease-in; transition: color 0.35s ease-in; } @media (hover: hover) { .nav_overlay .inner .nav-container .mod_navigation ul li a:hover span { color: #007ac3 !important; } } .nav_overlay .inner .nav-container .mod_navigation ul li strong { cursor: pointer; color: #000000; font-weight: normal; -webkit-transition: color 0.35s ease-in; transition: color 0.35s ease-in; } @media (hover: hover) { .nav_overlay .inner .nav-container .mod_navigation ul li strong:hover { color: #007ac3 !important; } .nav_overlay .inner .nav-container .mod_navigation ul li strong:hover + svg path { fill: #007ac3; } } .nav_overlay .inner .nav-container .mod_navigation ul li.trail > a, .nav_overlay .inner .nav-container .mod_navigation ul li.trail > strong, .nav_overlay .inner .nav-container .mod_navigation ul li.trail > .nextPanel > a, .nav_overlay .inner .nav-container .mod_navigation ul li.trail > .nextPanel > strong { color: #007ac3; } .nav_overlay .inner .nav-container .mod_navigation ul li.trail > a > span, .nav_overlay .inner .nav-container .mod_navigation ul li.trail > strong > span, .nav_overlay .inner .nav-container .mod_navigation ul li.trail > .nextPanel > a > span, .nav_overlay .inner .nav-container .mod_navigation ul li.trail > .nextPanel > strong > span { color: inherit; } .nav_overlay .inner .nav-container .mod_navigation ul li.active > strong, .nav_overlay .inner .nav-container .mod_navigation ul li.active > .nextPanel > strong { color: #007ac3 !important; } .nav_overlay .inner .nav-container .mod_navigation ul.level_1 { -webkit-transition: -webkit-transform 0.35s ease-in; transition: -webkit-transform 0.35s ease-in; transition: transform 0.35s ease-in; transition: transform 0.35s ease-in, -webkit-transform 0.35s ease-in; } @media all and (min-width: 78.1875rem) { .nav_overlay .inner .nav-container .mod_navigation ul.level_1 { width: 16.5%; } } @media all and (max-width: 78.125rem) { .nav_overlay .inner .nav-container .mod_navigation ul.level_1 { width: 100%; } .nav_overlay .inner .nav-container .mod_navigation ul.level_1[data-step="1"] { -webkit-transform: translateX(0); transform: translateX(0); } .nav_overlay .inner .nav-container .mod_navigation ul.level_1[data-step="2"] { -webkit-transform: translateX(-100%); transform: translateX(-100%); } .nav_overlay .inner .nav-container .mod_navigation ul.level_1[data-step="3"] { -webkit-transform: translateX(-200%); transform: translateX(-200%); } } .nav_overlay .inner .nav-container .mod_navigation ul.level_1 > li > strong, .nav_overlay .inner .nav-container .mod_navigation ul.level_1 > li > a span { font-size: 1.5rem; font-size: clamp(1.125rem, 1.25vw, 1.5rem); font-family: "FFDINBold", sans-serif; } .nav_overlay .inner .nav-container .mod_navigation ul.level_1 > li > strong { cursor: default; } .nav_overlay .inner .nav-container .mod_navigation ul.level_1 > li + li { margin-top: 1.375rem; margin-top: clamp(0.75rem, 1.15vw, 1.375rem); } .nav_overlay .inner .nav-container .mod_navigation ul.level_1 > li.submenu { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .nav_overlay .inner .nav-container .mod_navigation ul.level_1 > li.submenu svg { width: 0.75rem; margin-left: 0.75rem; margin-bottom: 0.25rem; } .nav_overlay .inner .nav-container .mod_navigation ul.level_1 > li.submenu svg path { -webkit-transition: fill 0.35s ease-in; transition: fill 0.35s ease-in; } .nav_overlay .inner .nav-container .mod_navigation ul.level_1 > li.submenu.subActive svg path { fill: #007ac3; } .nav_overlay .inner .nav-container .mod_navigation ul.level_1 > li.products { /* &:after { content: ""; position: absolute; bottom: 0; z-index: 1; height: 2rem; height: clamp(1rem, 1.6667vw, 2rem); background: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0)); left: 25%; width: 75%; @media all and (min-width: 84.4375rem) { left: 15.625rem; width: calc(100% - 15.625rem); } } */ } .nav_overlay .inner .nav-container .mod_navigation ul.level_2 { width: 83.5%; position: absolute; top: 0; opacity: 0; } @media all and (max-width: 78.125rem) { .nav_overlay .inner .nav-container .mod_navigation ul.level_2 { width: 100%; } } .nav_overlay .inner .nav-container .mod_navigation ul.level_2.toggled { opacity: 1; z-index: 1; } .nav_overlay .inner .nav-container .mod_navigation ul.level_2 li > strong, .nav_overlay .inner .nav-container .mod_navigation ul.level_2 li > a span, .nav_overlay .inner .nav-container .mod_navigation ul.level_2 li > .nextPanel > a, .nav_overlay .inner .nav-container .mod_navigation ul.level_2 li > .nextPanel > strong { font-size: 1.25rem; font-size: clamp(1rem, 1.1vw, 1.25rem); font-family: "FFDINLight", sans-serif; } @media all and (max-width: 47.9375rem) { .nav_overlay .inner .nav-container .mod_navigation ul.level_2 li > strong, .nav_overlay .inner .nav-container .mod_navigation ul.level_2 li > a span, .nav_overlay .inner .nav-container .mod_navigation ul.level_2 li > .nextPanel > a, .nav_overlay .inner .nav-container .mod_navigation ul.level_2 li > .nextPanel > strong { font-size: 1.5rem; font-size: clamp(1.125rem, 1.25vw, 1.5rem); } } .nav_overlay .inner .nav-container .mod_navigation ul.level_2 { left: 16.5%; } .nav_overlay .inner .nav-container .mod_navigation ul.level_2 li.strong > a span, .nav_overlay .inner .nav-container .mod_navigation ul.level_2 li.strong > strong { font-family: "FFDINBold", sans-serif; } @media all and (max-width: 78.125rem) { .nav_overlay .inner .nav-container .mod_navigation ul.level_2 { left: 100%; } .nav_overlay .inner .nav-container .mod_navigation ul.level_2 li > a span, .nav_overlay .inner .nav-container .mod_navigation ul.level_2 li > strong { font-family: "FFDINBold", sans-serif; } } @media all and (max-width: 78.125rem) { .nav_overlay .inner .nav-container .mod_navigation ul.level_3 { opacity: 0; } .nav_overlay .inner .nav-container .mod_navigation ul.level_3.toggled { opacity: 1; z-index: 1; } } .nav_overlay .inner .nav-container .mod_navigation ul li:not(.products) ul.level_2 li { padding-left: 1.5625vw; padding-left: clamp(0.25rem, 0.9vw, 0.85rem); padding-right: 1.5625vw; padding-right: clamp(0.5rem, 0.9vw, 0.85rem); } .nav_overlay .inner .nav-container .mod_navigation ul li:not(.products) ul.level_2 li + li { margin-top: 0.875rem; margin-top: clamp(0.875rem, 1.25vw, 1.5rem); } .nav_overlay .inner .nav-container .mod_navigation ul li.products ul.wrapper { position: absolute; top: 0; opacity: 0; padding-bottom: 2rem; padding-bottom: clamp(1rem, 1.6667vw, 2rem); } @media all and (min-width: 78.1875rem) { .nav_overlay .inner .nav-container .mod_navigation ul li.products ul.wrapper { left: 16.5%; width: 83.5%; } } @media all and (max-width: 78.125rem) { .nav_overlay .inner .nav-container .mod_navigation ul li.products ul.wrapper { left: 100%; width: 100%; } } .nav_overlay .inner .nav-container .mod_navigation ul li.products ul.wrapper.toggled { opacity: 1; z-index: 1; } @media all and (min-width: 78.1875rem) { .nav_overlay .inner .nav-container .mod_navigation ul li.products ul.wrapper.overflow { overflow-y: scroll; } } .nav_overlay .inner .nav-container .mod_navigation ul li.products ul.wrapper > .level_2 { position: relative; width: 100%; left: 0; opacity: 1; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-line-pack: start; align-content: flex-start; /* @media all and (max-width: 47.9375rem) { display: block; } */ } @media all and (max-width: 78.125rem) { .nav_overlay .inner .nav-container .mod_navigation ul li.products ul.wrapper > .level_2 li { margin-bottom: 0.75rem; margin-bottom: clamp(0.75rem, 1.25vw, 1.5rem); } } @media all and (min-width: 78.1875rem) { .nav_overlay .inner .nav-container .mod_navigation ul li.products ul.wrapper > .level_2 > li { padding-left: 1.5625vw; padding-left: clamp(0.5rem, 1.5625vw, 1.875rem); padding-right: 1.5625vw; padding-right: clamp(0.5rem, 1.5625vw, 1.875rem); } .nav_overlay .inner .nav-container .mod_navigation ul li.products ul.wrapper > .level_2 > li .nextPanel svg { display: none; } } @media all and (max-width: 78.125rem) { .nav_overlay .inner .nav-container .mod_navigation ul li.products ul.wrapper > .level_2 > li { width: 100%; } .nav_overlay .inner .nav-container .mod_navigation ul li.products ul.wrapper > .level_2 > li .nextPanel { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .nav_overlay .inner .nav-container .mod_navigation ul li.products ul.wrapper > .level_2 > li .nextPanel > a { pointer-events: none; } .nav_overlay .inner .nav-container .mod_navigation ul li.products ul.wrapper > .level_2 > li .nextPanel:hover a span { color: #007ac3; } .nav_overlay .inner .nav-container .mod_navigation ul li.products ul.wrapper > .level_2 > li ul.level_3 { position: absolute; top: 0; left: 100%; width: 100%; } } @media all and (min-width: 78.1875rem) { .nav_overlay .inner .nav-container .mod_navigation ul li.products ul.wrapper > .level_2 > li.product-overview { width: 100%; margin-top: 2rem; margin-top: clamp(1rem, 1.6667vw, 2rem); margin-bottom: 0; -webkit-box-ordinal-group: 101; -ms-flex-order: 100; order: 100; } } .nav_overlay .inner .nav-container .mod_navigation ul li.products ul.wrapper > .level_2 > li.submenu > a span, .nav_overlay .inner .nav-container .mod_navigation ul li.products ul.wrapper > .level_2 > li.submenu > strong, .nav_overlay .inner .nav-container .mod_navigation ul li.products ul.wrapper > .level_2 > li.submenu > .nextPanel > a, .nav_overlay .inner .nav-container .mod_navigation ul li.products ul.wrapper > .level_2 > li.submenu > .nextPanel > strong { display: block; font-family: "FFDINBold", sans-serif; } .nav_overlay .inner .nav-container .mod_navigation ul li.products ul.wrapper > .level_2 > li.submenu > a span span, .nav_overlay .inner .nav-container .mod_navigation ul li.products ul.wrapper > .level_2 > li.submenu > strong span, .nav_overlay .inner .nav-container .mod_navigation ul li.products ul.wrapper > .level_2 > li.submenu > .nextPanel > a span, .nav_overlay .inner .nav-container .mod_navigation ul li.products ul.wrapper > .level_2 > li.submenu > .nextPanel > strong span { font-family: inherit; } @media all and (min-width: 78.1875rem) { .nav_overlay .inner .nav-container .mod_navigation ul li.products ul.wrapper > .level_2 > li.submenu > a span, .nav_overlay .inner .nav-container .mod_navigation ul li.products ul.wrapper > .level_2 > li.submenu > strong, .nav_overlay .inner .nav-container .mod_navigation ul li.products ul.wrapper > .level_2 > li.submenu > .nextPanel > a, .nav_overlay .inner .nav-container .mod_navigation ul li.products ul.wrapper > .level_2 > li.submenu > .nextPanel > strong { padding-bottom: 1rem; margin-bottom: 0.875rem; border-bottom: 2px solid #000000; } } @media all and (min-width: 78.1875rem) { .nav_overlay .inner .nav-container .mod_navigation ul li.products ul.wrapper > .level_2 > li.submenu > ul > li { padding-top: 7px; padding-top: clamp(4px, 0.365vw, 7px); padding-bottom: 7px; padding-bottom: clamp(4px, 0.365vw, 7px); } } @media all and (min-width: 78.1875rem) { .nav_overlay .inner .nav-container.productsActive .featured { opacity: 0; z-index: 0; } .nav_overlay .inner .nav-container.productsActive .mod_navigation { z-index: 1; } } .nav_bg { position: fixed; top: 0; left: 0; z-index: 9; width: 100%; height: 100%; background-color: #ffffff; -webkit-transform: scale(0, 1); transform: scale(0, 1); -webkit-transform-origin: left; transform-origin: left; -webkit-transition: -webkit-transform 0.3s linear; transition: -webkit-transform 0.3s linear; transition: transform 0.3s linear; transition: transform 0.3s linear, -webkit-transform 0.3s linear; } .nav_bg .deco { position: absolute; top: 0; right: 0; max-width: 50%; opacity: 0; } .nav_bg .deco svg { height: 100vh; width: auto; display: block; } body.nav-open .nav_bg { -webkit-transform: scale(1, 1); transform: scale(1, 1); } body.nav-open .nav_bg .deco { opacity: 0.35; } @media all and (min-width: 39.4375rem) and (max-width: 78.125rem) { body.theme--private .nav_overlay .inner .mod_navigation { max-width: 50%; } } @media all and (min-width: 78.1875rem) { body.theme--private .nav_overlay .inner ul.level_1 > li.products ul.level_2 { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[4]; grid-template-columns: repeat(4, 1fr); grid-auto-rows: auto; } body.theme--private .nav_overlay .inner ul.level_1 > li.products ul.level_2:not(.overflow) { height: auto; } body.theme--private .nav_overlay .inner ul.level_1 > li.products ul.level_2.overflow { overflow-y: scroll; background: red; } body.theme--private .nav_overlay .inner ul.level_1 > li.products ul.level_2 > li { width: 100%; } body.theme--private .nav_overlay .inner ul.level_1 > li.products ul.level_2 > li:nth-of-type(1) { -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1/3; -ms-grid-row: 3; -ms-grid-row-span: 1; grid-row: 3/4; } body.theme--private .nav_overlay .inner ul.level_1 > li.products ul.level_2 > li:nth-of-type(2) { -ms-grid-column: 1; -ms-grid-column-span: 1; grid-column: 1/2; -ms-grid-row: 1; -ms-grid-row-span: 2; grid-row: 1/3; } body.theme--private .nav_overlay .inner ul.level_1 > li.products ul.level_2 > li:nth-of-type(3) { -ms-grid-column: 2; -ms-grid-column-span: 1; grid-column: 2/3; -ms-grid-row: 1; -ms-grid-row-span: 2; grid-row: 1/3; } body.theme--private .nav_overlay .inner ul.level_1 > li.products ul.level_2 > li:nth-of-type(4) { -ms-grid-column: 3; -ms-grid-column-span: 1; grid-column: 3/4; -ms-grid-row: 1; -ms-grid-row-span: 1; grid-row: 1/2; } body.theme--private .nav_overlay .inner ul.level_1 > li.products ul.level_2 > li:nth-of-type(5) { -ms-grid-column: 3; -ms-grid-column-span: 1; grid-column: 3/4; -ms-grid-row: 2; -ms-grid-row-span: 1; grid-row: 2/3; } body.theme--private .nav_overlay .inner ul.level_1 > li.products ul.level_2 > li:nth-of-type(6) { -ms-grid-column: 4; -ms-grid-column-span: 1; grid-column: 4/5; -ms-grid-row: 1; -ms-grid-row-span: 2; grid-row: 1/3; } } @media all and (min-width: 78.1875rem) and (max-width: 93.75rem) { body.theme--private .nav_overlay .inner { padding-right: 4.8vw; padding-right: clamp(2.5rem, 4.8vw, 5.75rem); } body.theme--private .nav_overlay .inner .mod_navigation ul li.products ul.level_2 > li { padding-left: 1.5625vw; padding-left: clamp(0.25rem, 0.9vw, 0.85rem); padding-right: 1.5625vw; padding-right: clamp(0.5rem, 0.9vw, 0.85rem); } } body.theme--public .nav_overlay .inner .mod_navigation ul li.products ul.wrapper > .level_2 { display: -webkit-box; display: -ms-flexbox; display: flex; } @media all and (min-width: 78.1875rem) { body.theme--public .nav_overlay .inner .mod_navigation ul li.products ul.wrapper > .level_2 > li { width: 33.333%; } } .nav_overlay .inner .made-in-germany { padding-top: 6.25rem; padding-top: clamp(2.5rem, 5.21vw, 6.25rem); margin-bottom: 0; } .nav_overlay .inner .meta { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-top: 1.5rem; padding-top: clamp(1rem, 1.25vw, 1.5rem); } .nav_overlay .inner .meta .social ul { list-style: none; margin: 0; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; } .nav_overlay .inner .meta .social ul li a { display: block; } .nav_overlay .inner .meta .social ul li a svg { height: 2.25rem; height: clamp(1.25rem, 1.5625vw, 1.875rem); width: auto; display: block; } .nav_overlay .inner .meta .social ul li a svg path { fill: #000000 !important; -webkit-transition: fill 0.35s ease-in; transition: fill 0.35s ease-in; } @media (hover: hover) { .nav_overlay .inner .meta .social ul li a:hover svg path { fill: #007ac3 !important; } } .nav_overlay .inner .meta .social ul li + li { margin-left: 2.8125rem; margin-left: clamp(0.85rem, 1.98vw, 2.375rem); } .nav_overlay .inner .meta .mod_customnav { margin-top: 1.75rem; } @media all and (max-width: 39.375rem) { .nav_overlay .inner .meta .mod_customnav { margin-top: 1rem; } } .nav_overlay .inner .meta .mod_customnav ul li a span, .nav_overlay .inner .meta .mod_customnav ul li strong { font-family: "FFDINLight", sans-serif; font-weight: normal; color: #000000; } .nav_overlay .inner .meta .mod_customnav ul li a span { -webkit-transition: color 0.35s ease-in; transition: color 0.35s ease-in; } @media (hover: hover) { .nav_overlay .inner .meta .mod_customnav ul li a:hover span { color: #007ac3 !important; } } .nav_overlay .inner .meta .mod_customnav ul li + li { margin-left: 2.625rem; margin-left: clamp(1rem, 2.1875vw, 2.625rem); } .mod_customnav ul { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 0; list-style: none; } .mod_customnav ul li a { text-decoration: none; } .mod_customnav ul li strong { font-weight: normal; } body.nav-open { overflow: hidden; } .mod_breadcrumb ul { display: -webkit-box; display: -ms-flexbox; display: flex; list-style: none; margin: 0; padding: 0; margin-left: -0.35rem; } .mod_breadcrumb ul li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; line-height: 1.25; } .mod_breadcrumb ul li:nth-of-type(n+3) { margin-left: 1.05vw; margin-left: clamp(0.35rem, 1.05vw, 1rem); } .mod_breadcrumb ul li.first { margin-right: 0.6667vw; margin-right: clamp(0.3rem, 0.6667vw, 0.8rem); } .mod_breadcrumb ul li.first a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-left: 0.35rem; padding-right: 0.35rem; } .mod_breadcrumb ul li.first a svg { width: 0.625rem; margin-bottom: 0.204166667vw; } .mod_breadcrumb ul li.first a svg path { -webkit-transition: fill 0.35s ease-in; transition: fill 0.35s ease-in; } @media (hover: hover) { .mod_breadcrumb ul li.first a:hover svg path { fill: #007ac3 !important; } } .mod_breadcrumb ul li:not(.first) svg { width: 0.4rem; width: clamp(0.3rem, 0.3333vw, 0.4rem); margin-right: 1.05vw; margin-right: clamp(0.35rem, 1.05vw, 1rem); margin-bottom: 0.15625vw; } .mod_breadcrumb ul li:not(.first) a { -webkit-transition: color 0.35s ease-in; transition: color 0.35s ease-in; } @media (hover: hover) { .mod_breadcrumb ul li:not(.first) a:hover { color: #007ac3 !important; } } .mod_breadcrumb ul li svg { -ms-flex-negative: 0; flex-shrink: 0; } .mod_breadcrumb ul li a, .mod_breadcrumb ul li span { font-size: 1rem; font-size: clamp(0.7rem, 0.8333vw, 1rem); color: #000000; text-align: center; padding-top: 1rem; padding-top: clamp(0.625rem, 0.8333vw, 1rem); padding-bottom: 1rem; padding-bottom: clamp(0.625rem, 0.8333vw, 1rem); } .mod_breadcrumb ul li a { font-family: "FFDINLight", sans-serif; text-decoration: none; } .mod_newslist.gridlist { padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } @media all and (max-width: 58.125rem) { .mod_newslist.gridlist { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .mod_newslist.gridlist .teaser-container { position: relative; /* .slick-arrow { @include slickArrow; @media all and (min-width: 43.8125rem) { display: none; } } */ } .mod_newslist.gridlist .teaser-container .teaser-list { /* display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr; column-gap: 2rem; row-gap: 2rem; column-gap: clamp(1rem, 2.1vw, 2rem); row-gap: clamp(1rem, 2.1vw, 2rem); @media all and (max-width: 53.125rem) { //grid-template-columns: repeat(2, 1fr); //grid-template-rows: repeat(3, 1fr); //display: block; } @media all and (max-width: 28.125rem) { //display: block; } */ } .mod_newslist.gridlist .teaser-container .teaser-list .layout_latest { position: relative; aspect-ratio: 1/1; /* &:nth-child(1) { grid-column: 1 / 2; grid-row: 1 / 2; @media all and (max-width: 53.125rem) { grid-column: 1 / 2; grid-row: 1 / 2; } } &:nth-child(2) { grid-column: 2 / 3; grid-row: 1 / 2; @media all and (max-width: 53.125rem) { grid-column: 2 / 3; grid-row: 1 / 2; } } &:nth-child(3) { grid-column: 3 / 4; grid-row: 1 / 2; @media all and (max-width: 53.125rem) { grid-column: 1 / 2; grid-row: 2 / 3; } } &:nth-child(4) { grid-column: 1 / 2; grid-row: 2 / 3; @media all and (max-width: 53.125rem) { grid-column: 2 / 3; grid-row: 2 / 3; } } &:nth-child(5) { grid-column: 2 / 3; grid-row: 2 / 3; @media all and (max-width: 53.125rem) { grid-column: 1 / 2; grid-row: 3 / 4; } } &:nth-child(6) { grid-column: 3 / 4; grid-row: 2 / 3; @media all and (max-width: 53.125rem) { grid-column: 2 / 3; grid-row: 3 / 4; } } @media all and (max-width: 28.125rem) { & + .layout_latest { margin-top: 2rem; margin-top: clamp(1rem, 2.1vw, 2rem); } } */ position: relative; } @media all and (max-width: 28.125rem) { .mod_newslist.gridlist .teaser-container .teaser-list .layout_latest { aspect-ratio: 1.5/1; } } .mod_newslist.gridlist .teaser-container .teaser-list .layout_latest .info, .mod_newslist.gridlist .teaser-container .teaser-list .layout_latest .bg-img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .mod_newslist.gridlist .teaser-container .teaser-list .layout_latest .info { z-index: 2; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; padding-top: 2rem; padding-left: 2rem; padding-right: 2rem; padding-bottom: 2rem; padding-top: clamp(1rem, 2.1vw, 2rem); padding-left: clamp(1rem, 2.1vw, 2rem); padding-right: clamp(1rem, 2.1vw, 2rem); padding-bottom: clamp(1rem, 2.1vw, 2rem); } .mod_newslist.gridlist .teaser-container .teaser-list .layout_latest .info h3 { position: relative; z-index: 1; font-size: 1.5rem; font-size: clamp(1.125rem, 1.25vw, 1.5rem); font-family: "FFDINBold", sans-serif; color: #ffffff; line-height: 1.333; word-break: normal; -ms-hyphens: auto; hyphens: auto; } .mod_newslist.gridlist .teaser-container .teaser-list .layout_latest .info h3 span { font-family: "FFDINLight", sans-serif; } .mod_newslist.gridlist .teaser-container .teaser-list .layout_latest .info:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; background: -webkit-gradient(linear, left bottom, left top, from(#0B2437), color-stop(13%, rgba(11, 36, 55, 0.9607843137)), to(rgba(11, 36, 55, 0))); background: linear-gradient(0deg, #0B2437 0%, rgba(11, 36, 55, 0.9607843137) 13%, rgba(11, 36, 55, 0) 100%); mix-blend-mode: multiply; opacity: 0.5; } .mod_newslist.gridlist .teaser-container .teaser-list .layout_latest .bg-img { z-index: 1; } .mod_newslist.gridlist .teaser-container .teaser-list .layout_latest .bg-img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } .mod_newslist.gridlist .teaser-container .teaser-list .layout_latest a { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 5; } .mod_newslist.gridlist .teaser-container .teaser-list .layout_latest .hover { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; padding-top: 2.5vw; padding-top: clamp(1.375rem, 2.5vw, 3rem); padding-left: 2.5vw; padding-left: clamp(1.375rem, 2.5vw, 3rem); padding-right: 2.5vw; padding-right: clamp(1.375rem, 2.5vw, 3rem); padding-bottom: 2.8125rem; padding-bottom: clamp(1.875rem, 2.34375vw, 2.8125rem); background: -webkit-gradient(linear, left bottom, left top, from(rgba(11, 36, 55, 0.85)), color-stop(50%, rgba(0, 0, 0, 0))); background: linear-gradient(0deg, rgba(11, 36, 55, 0.85) 0%, rgba(0, 0, 0, 0) 50%); opacity: 0; -webkit-transition: opacity 0.35s ease-in; transition: opacity 0.35s ease-in; z-index: 4; } .mod_newslist.gridlist .teaser-container .teaser-list .layout_latest .hover .inside { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; height: 100%; border-bottom: 2px solid #ffffff; } .mod_newslist.gridlist .teaser-container .teaser-list .layout_latest .hover .inside .arrow { position: absolute; right: 0; bottom: 10px; bottom: clamp(5px, 0.5208vw, 10px); width: 7.5%; min-width: 22px; } .mod_newslist.gridlist .teaser-container .teaser-list .layout_latest .hover .inside .arrow svg { width: 100%; height: auto; display: block; } .mod_newslist.gridlist .teaser-container .teaser-list .layout_latest .hover .inside .arrow svg path { fill: #ffffff; } .mod_newslist.gridlist .teaser-container .teaser-list .layout_latest .hover .inside .arrow:not(.ext) svg { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .mod_newslist.gridlist .teaser-container .teaser-list .layout_latest .hover .inside span { width: 100%; font-family: "FFDINBold", sans-serif; font-size: 1.875rem; font-size: clamp(1rem, 1.5625vw, 1.875rem); color: #ffffff; padding-left: 10px; padding-left: clamp(4px, 0.521vw, 10px); padding-right: 10px; padding-right: clamp(4px, 0.521vw, 10px); margin-bottom: 0 !important; } @media (hover: hover) { .mod_newslist.gridlist .teaser-container .teaser-list .layout_latest:hover .hover { opacity: 1; } } .mod_newslist.gridlist .teaser-container .nav-block { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media all and (max-width: 28.125rem) { .mod_newslist.gridlist .teaser-container .nav-block { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } } .mod_newslist.gridlist .teaser-container .nav-block .arrows { display: -webkit-box; display: -ms-flexbox; display: flex; padding-top: 3.125vw; padding-top: clamp(1.5rem, 3.125vw, 3.75rem); } .mod_newslist.gridlist .teaser-container .nav-block .arrows button { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; outline: none; background: none; padding: 0; -webkit-transform-origin: center; transform-origin: center; -webkit-transition: opacity 0.35s ease-in; transition: opacity 0.35s ease-in; } .mod_newslist.gridlist .teaser-container .nav-block .arrows button svg { display: block; width: 2.875rem; width: clamp(2rem, 2.4vw, 2.875rem); height: auto; } .mod_newslist.gridlist .teaser-container .nav-block .arrows button svg path { -webkit-transition: fill 0.35s ease-in; transition: fill 0.35s ease-in; } .mod_newslist.gridlist .teaser-container .nav-block .arrows button + button { margin-left: 2.91667vw; margin-left: clamp(2.25rem, 2.91667vw, 3.5rem); } .mod_newslist.gridlist .teaser-container .nav-block .arrows button.slick-prev { -webkit-transform: scale(-1); transform: scale(-1); } .mod_newslist.gridlist .teaser-container .nav-block .arrows button.disabled { opacity: 0.17; pointer-events: none; } @media (hover: hover) { .mod_newslist.gridlist .teaser-container .nav-block .arrows button:hover svg path { fill: #007ac3 !important; } } @media all and (min-width: 43.8125rem) { .mod_newslist.gridlist .teaser-container .nav-block .arrows { display: none; } } @media all and (min-width: 28.1875rem) { .mod_newslist.gridlist .teaser-container .nav-block .arrows { padding-top: 0; } } @media all and (max-width: 28.125rem) { .mod_newslist.gridlist .teaser-container .nav-block .arrows { margin-bottom: 15px; } } .mod_newslist.gridlist .teaser-container .nav-block .arrows button svg path { fill: #ffffff; } .mod_newslist.gridlist .teaser-container .nav-block .archive-link a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; text-decoration: none; padding-top: 1.5rem; padding-bottom: 0.8125rem; border-bottom: 2px solid #000000; } .mod_newslist.gridlist .teaser-container .nav-block .archive-link a > div { font-size: 1.125rem; font-size: clamp(1rem, 0.9375vw, 1.125rem); font-family: "FFDINBold", sans-serif; line-height: 1.15; color: #000000; text-align: left; margin-right: 0.5rem; -webkit-transition: color 0.35s ease-in; transition: color 0.35s ease-in; } .mod_newslist.gridlist .teaser-container .nav-block .archive-link svg { width: 1.25rem; width: clamp(1rem, 1.1vw, 1.25rem); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .mod_newslist.gridlist .teaser-container .nav-block .archive-link svg path { fill: #000000; -webkit-transition: fill 0.35s ease-in; transition: fill 0.35s ease-in; } .se_news-start .mod_newslist.gridlist .teaser-container .nav-block .archive-link a { border-color: #ffffff; } .se_news-start .mod_newslist.gridlist .teaser-container .nav-block .archive-link a > div { color: #ffffff; } .se_news-start .mod_newslist.gridlist .teaser-container .nav-block .archive-link svg path { fill: #ffffff; } @media all and (min-width: 120.0625rem) { .mod_newslist.gridlist .teaser-container .news-slider { width: calc(100% + 2rem); margin-left: -1rem; } } @media all and (min-width: 48.0625rem) and (max-width: 120rem) { .mod_newslist.gridlist .teaser-container .news-slider { width: calc(100% + 2.1vw); margin-left: -1.05vw; } } @media all and (max-width: 48rem) { .mod_newslist.gridlist .teaser-container .news-slider { width: calc(100% + 1rem); margin-left: -0.5rem; } } @media all and (min-width: 120.0625rem) { .mod_newslist.gridlist .teaser-container .slick-slide { padding-left: 1rem; padding-right: 1rem; } } @media all and (min-width: 48.0625rem) and (max-width: 120rem) { .mod_newslist.gridlist .teaser-container .slick-slide { padding-left: 1.05vw; padding-right: 1.05vw; } } @media all and (max-width: 48rem) { .mod_newslist.gridlist .teaser-container .slick-slide { padding-left: 0.5rem; padding-right: 0.5rem; } } .mod_newsarchive { padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } @media all and (max-width: 58.125rem) { .mod_newsarchive { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .mod_newsarchive .teaser-list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; width: calc(100% + 4.375vw); margin-left: -2.1875vw; } @media all and (min-width: 120.0625rem) { .mod_newsarchive .teaser-list { width: calc(100% + 5.25rem); margin-left: -2.625rem; } } @media all and (max-width: 58.125rem) { .mod_newsarchive .teaser-list { width: calc(100% + 2.5rem); margin-left: -1.25rem; } } .mod_newsarchive .teaser-list .teaser { width: 33.333%; padding-left: 2.1875vw; padding-right: 2.1875vw; } @media all and (min-width: 120.0625rem) { .mod_newsarchive .teaser-list .teaser { padding-left: 2.625rem; padding-right: 2.625rem; } } @media all and (max-width: 58.125rem) { .mod_newsarchive .teaser-list .teaser { padding-left: 1.25rem; padding-right: 1.25rem; } } @media all and (min-width: 58.1875rem) { .mod_newsarchive .teaser-list .teaser:nth-child(n+4) { margin-top: 5rem; margin-top: clamp(2.5rem, 4.1665vw, 5rem); } } @media all and (min-width: 33.8125rem) and (max-width: 58.125rem) { .mod_newsarchive .teaser-list .teaser { width: 50%; } .mod_newsarchive .teaser-list .teaser:nth-child(n+3) { margin-top: 5rem; margin-top: clamp(2.5rem, 4.1665vw, 5rem); } } @media all and (max-width: 33.75rem) { .mod_newsarchive .teaser-list .teaser { width: 100%; } .mod_newsarchive .teaser-list .teaser + .teaser { margin-top: 5rem; margin-top: clamp(2.5rem, 4.1665vw, 5rem); } } .mod_newsarchive .teaser-list .teaser .image { position: relative; margin-bottom: 2.5vw; margin-bottom: clamp(1.5rem, 2.5vw, 3rem); } .mod_newsarchive .teaser-list .teaser .image a { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; } .mod_newsarchive .teaser-list .teaser .info * { word-break: normal; -ms-hyphens: auto; hyphens: auto; } .mod_newsarchive .teaser-list .teaser .info h2 { font-size: 1.5rem; font-size: clamp(1.125rem, 1.25vw, 1.5rem); font-family: "FFDINBold", sans-serif; line-height: 1.333; margin-bottom: 0.625rem; } .mod_newsarchive .teaser-list .teaser .info h2 span { font-family: "FFDINLight", sans-serif; } .mod_newsarchive .teaser-list .teaser .info h2 a { font-family: "FFDINBold", sans-serif; } .mod_newsarchive .teaser-list .teaser .info p { margin-top: 1em; } .mod_newsreader .layout_full { padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } @media all and (max-width: 58.125rem) { .mod_newsreader .layout_full { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .mod_newsreader .layout_full > * + * { margin-top: 10rem; margin-top: clamp(5rem, 8.333vw, 10rem); } .mod_newsreader .layout_full .ce_text { word-break: normal; -ms-hyphens: auto; hyphens: auto; } .mod_newsreader .layout_full .ce_text h2 { font-size: 1.5rem; font-size: clamp(1.125rem, 1.25vw, 1.5rem); } .mod_newsreader .layout_full .ce_text + .ce_text { margin-top: 10rem; margin-top: clamp(5rem, 8.333vw, 10rem); } @media all and (min-width: 53.1875rem) { .mod_newsreader .layout_full .ce_text { -webkit-columns: 2; -moz-columns: 2; columns: 2; -webkit-column-gap: 3.125vw; -moz-column-gap: 3.125vw; column-gap: 3.125vw; -webkit-column-gap: clamp(35px, 3.125vw, 60px); -moz-column-gap: clamp(35px, 3.125vw, 60px); column-gap: clamp(35px, 3.125vw, 60px); } } .mod_newsreader p.back { text-align: center; padding-top: 9.15vw; padding-top: clamp(4.6875rem, 9.15vw, 10.9375rem); } .mod_newsreader p.back a { position: relative; -webkit-appearance: none; -moz-appearance: none; appearance: none; display: inline-block; text-decoration: none; font-family: "FFDINBold", sans-serif; color: #000000; border-bottom: 1px solid #000000; margin-top: 1.25rem; -webkit-transition: all 0.35s ease-in; transition: all 0.35s ease-in; } @media (hover: hover) { .mod_newsreader p.back a:hover { color: #007ac3; border-color: #007ac3; } } .mod_eventlist .teaser-container { padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } @media all and (max-width: 58.125rem) { .mod_eventlist .teaser-container { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .mod_eventlist .teaser-container .teaser-list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; width: calc(100% + 4.375vw); margin-left: -2.1875vw; } @media all and (min-width: 120.0625rem) { .mod_eventlist .teaser-container .teaser-list { width: calc(100% + 5.25rem); margin-left: -2.625rem; } } @media all and (max-width: 58.125rem) { .mod_eventlist .teaser-container .teaser-list { width: calc(100% + 2.5rem); margin-left: -1.25rem; } } .mod_eventlist .teaser-container .teaser-list .event { width: 25%; padding-left: 2.1875vw; padding-right: 2.1875vw; } @media all and (min-width: 120.0625rem) { .mod_eventlist .teaser-container .teaser-list .event { padding-left: 2.625rem; padding-right: 2.625rem; } } @media all and (max-width: 58.125rem) { .mod_eventlist .teaser-container .teaser-list .event { padding-left: 1.25rem; padding-right: 1.25rem; } } @media all and (min-width: 58.1875rem) { .mod_eventlist .teaser-container .teaser-list .event:nth-child(n+5) { margin-top: 5rem; margin-top: clamp(2.5rem, 4.1665vw, 5rem); } } @media all and (min-width: 58.1875rem) and (max-width: 93.75rem) { .mod_eventlist .teaser-container .teaser-list .event { width: 33.333%; } .mod_eventlist .teaser-container .teaser-list .event:nth-child(n+4) { margin-top: 5rem; margin-top: clamp(2.5rem, 4.1665vw, 5rem); } } @media all and (min-width: 33.8125rem) and (max-width: 58.125rem) { .mod_eventlist .teaser-container .teaser-list .event { width: 50%; } .mod_eventlist .teaser-container .teaser-list .event:nth-child(n+3) { margin-top: 5rem; margin-top: clamp(2.5rem, 4.1665vw, 5rem); } } @media all and (max-width: 33.75rem) { .mod_eventlist .teaser-container .teaser-list .event { width: 100%; } .mod_eventlist .teaser-container .teaser-list .event + .event { margin-top: 5rem; margin-top: clamp(2.5rem, 4.1665vw, 5rem); } } .mod_eventlist .teaser-container .teaser-list .event .image_container { position: relative; margin-bottom: 2.5vw; margin-bottom: clamp(1.5rem, 2.5vw, 3rem); background-color: #007ac3; } .mod_eventlist .teaser-container .teaser-list .event .data h2 { font-size: 1.5rem; font-size: clamp(1.125rem, 1.25vw, 1.5rem); font-family: "FFDINBold", sans-serif; line-height: 1.333; } .mod_eventlist .teaser-container .teaser-list .event.bygone .image_container { opacity: 0.2; } .sticky_buttons { list-style: none; margin: 0; padding: 0; position: fixed; top: 50%; right: 0; z-index: 5; -webkit-transform: translateY(-50%) translateX(100%); transform: translateY(-50%) translateX(100%); display: none; } @media all and (min-width: 33.8125rem) { .sticky_buttons { display: block; } } .sticky_buttons li { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-transform: translateX(clamp(-4.5rem, -3.75vw, -3.5rem)); transform: translateX(clamp(-4.5rem, -3.75vw, -3.5rem)); -webkit-transition: -webkit-transform 0.35s ease-in; transition: -webkit-transform 0.35s ease-in; transition: transform 0.35s ease-in; transition: transform 0.35s ease-in, -webkit-transform 0.35s ease-in; } .sticky_buttons li:hover { -webkit-transform: translateX(-100%); transform: translateX(-100%); } .sticky_buttons li button { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; outline: none; background: none; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 4.5rem; height: 4.5rem; width: clamp(3.5rem, 3.75vw, 4.5rem); height: clamp(3.5rem, 3.75vw, 4.5rem); } .sticky_buttons li button svg { height: auto; display: block; } .sticky_buttons li .content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding-left: 35px; padding-right: 90px; } .sticky_buttons li .content p, .sticky_buttons li .content a { font-size: 1rem; line-height: 1.25; } .sticky_buttons li.contact button, .sticky_buttons li.contact .content { background-color: #0B2437; } .sticky_buttons li.contact button svg { width: 69.16667%; } .sticky_buttons li.contact .content { padding-top: 20px; padding-bottom: 20px; } .sticky_buttons li.contact .content p, .sticky_buttons li.contact .content a { color: #ffffff; } .sticky_buttons li.contact .content p:nth-of-type(1) { font-family: "FFDINBold", sans-serif; } .sticky_buttons li.contact .content a { margin-top: 0; } .sticky_buttons li.public { -webkit-box-shadow: 0 0 0.25rem #cccccc; box-shadow: 0 0 0.25rem #cccccc; } .sticky_buttons li.public button, .sticky_buttons li.public .content { background-color: #ffffff; } .sticky_buttons li.public button svg { width: 66.667%; } .sticky_buttons li.public .content p { font-family: "FFDINBold", sans-serif; margin-bottom: 0; } .sticky_buttons li.public .content a { color: #000000; } .sticky_buttons li.sustainability button, .sticky_buttons li.sustainability .content { background-color: #ffffff; } .sticky_buttons li.sustainability button picture { width: 66.667%; } .sticky_buttons li + li { margin-top: 1.875rem; margin-top: clamp(1rem, 1.5625vw, 1.875rem); } .search_overlay { position: fixed; top: 0; left: 0; z-index: 10; width: 100%; height: 100vh; display: none; } .search_overlay .hamburger { position: absolute; top: 3.020833333vw; top: clamp(1.9375rem, 3.1vw, 3.625rem); right: 4.8vw; right: clamp(2.5rem, 4.8vw, 5.75rem); padding: 0; } .scrolled .search_overlay .hamburger { top: 1.875vw; top: clamp(1rem, 1.875vw, 2.25rem); } .search_overlay .hamburger .hamburger-box .hamburger-inner { margin-top: 0; } .search_overlay .hamburger .hamburger-box .hamburger-inner, .search_overlay .hamburger .hamburger-box .hamburger-inner:before, .search_overlay .hamburger .hamburger-box .hamburger-inner:after { height: 1px; background-color: #ffffff; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .search_overlay .hamburger.hamburger--slider-r .hamburger-inner { top: 0px; } .search_overlay .hamburger:hover { opacity: 1; } .search_overlay .inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 100%; } .search_overlay .inner h2 { color: #ffffff; } .search_overlay .inner .mod_search { width: 100%; } .search_overlay .inner .mod_search .formbody .widget.widget-text input, .search_overlay .inner .mod_search .formbody .widget.widget-submit .submit { color: #ffffff; border-color: #ffffff; } .search_overlay .inner .mod_search .formbody .widget.widget-text input { font-family: "FFDINBold", sans-serif; font-size: 1.5rem; } .search_overlay_bg { position: fixed; top: 0; left: 0; z-index: 9; width: 100%; height: 100%; background-color: #0B2437; -webkit-transform: scale(0, 1); transform: scale(0, 1); -webkit-transform-origin: right; transform-origin: right; -webkit-transition: -webkit-transform 0.3s linear; transition: -webkit-transform 0.3s linear; transition: transform 0.3s linear; transition: transform 0.3s linear, -webkit-transform 0.3s linear; } body.search-open .search_overlay_bg { -webkit-transform: scale(1, 1); transform: scale(1, 1); } .mod_search.search-results { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } @media all and (max-width: 58.125rem) { .mod_search.search-results { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .mod_search.search-results form { width: 100%; } .mod_search.search-results p.header { margin-top: 5rem; margin-top: clamp(2.5rem, 4.1665vw, 5rem); margin-bottom: 2.5rem; margin-bottom: clamp(1.25rem, 2.1vw, 2.5rem); width: 100%; } .mod_search.search-results > div h2 { font-size: 1.5rem; font-size: clamp(1.125rem, 1.25vw, 1.5rem); font-family: "FFDINBold", sans-serif; margin-bottom: 0.5rem; } .mod_search.search-results > div p { margin-top: 0; margin-bottom: 0; } .mod_search.search-results > div p + p { margin-top: 0.5rem; } @media all and (min-width: 125.0625rem) { .mod_search.search-results > div { width: 50%; } .mod_search.search-results > div:nth-of-type(n+3) { margin-top: 2.5rem; margin-top: clamp(1.25rem, 2.1vw, 2.5rem); } .mod_search.search-results > div:nth-of-type(odd) { padding-right: 4vw; padding-right: clamp(2.5rem, 4vw, 4.6875rem); } .mod_search.search-results > div:nth-of-type(even) { padding-left: 4vw; padding-left: clamp(2.5rem, 4vw, 4.6875rem); } } @media all and (max-width: 125rem) { .mod_search.search-results > div:nth-of-type(n+2) { margin-top: 5rem; margin-top: clamp(2.5rem, 4.1665vw, 5rem); } } body.search-open { overflow: hidden; } .language_overlay { position: fixed; top: 0; left: 0; z-index: 10; width: 100%; height: 100vh; display: none; } .language_overlay .hamburger { position: absolute; top: 3.020833333vw; top: clamp(1.9375rem, 3.1vw, 3.625rem); right: 4.8vw; right: clamp(2.5rem, 4.8vw, 5.75rem); padding: 0; } .scrolled .language_overlay .hamburger { top: 1.875vw; top: clamp(1rem, 1.875vw, 2.25rem); } .language_overlay .hamburger .hamburger-box .hamburger-inner { margin-top: 0; } .language_overlay .hamburger .hamburger-box .hamburger-inner, .language_overlay .hamburger .hamburger-box .hamburger-inner:before, .language_overlay .hamburger .hamburger-box .hamburger-inner:after { height: 1px; background-color: #ffffff; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .language_overlay .hamburger.hamburger--slider-r .hamburger-inner { top: 0px; } .language_overlay .hamburger:hover { opacity: 1; } .language_overlay .inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding-left: 21.615vw; padding-right: 21.615vw; padding-left: clamp(6rem, 21.615vw, 25.9375rem); padding-right: clamp(6rem, 21.615vw, 25.9375rem); height: 100%; } @media all and (max-width: 39.375rem) { .language_overlay .inner { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .language_overlay .inner h2 { color: #ffffff; } .language_overlay .inner .mod_changelanguage ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; list-style: none; margin: 0; padding: 0; } .language_overlay .inner .mod_changelanguage ul li { width: 50%; } .language_overlay .inner .mod_changelanguage ul li strong, .language_overlay .inner .mod_changelanguage ul li a span { display: block; font-size: 3.4375rem; font-size: clamp(1.375rem, 2.865vw, 3.4375rem); font-family: "FFDINLight", sans-serif; font-weight: 300; color: #ffffff; text-align: center; } @media all and (max-width: 39.375rem) { .language_overlay .inner .mod_changelanguage ul li strong, .language_overlay .inner .mod_changelanguage ul li a span { font-size: 5.625rem; font-size: clamp(2rem, 4.6875vw, 5.625rem); } } .language_overlay .inner .mod_changelanguage ul li strong { opacity: 0.5; } .language_overlay .inner .mod_changelanguage ul li a { text-decoration: none; } .language_overlay .inner .mod_changelanguage ul li:nth-of-type(1), .language_overlay .inner .mod_changelanguage ul li:nth-of-type(2) { margin-bottom: 1.5rem; } .language_overlay .inner .mod_changelanguage ul li:nth-of-type(1) { padding-right: 1.25rem; padding-right: clamp(0.75rem, 1.042vw, 1.25rem); } .language_overlay .inner .mod_changelanguage ul li:nth-of-type(1) strong, .language_overlay .inner .mod_changelanguage ul li:nth-of-type(1) a span { text-align: right; } .language_overlay .inner .mod_changelanguage ul li:nth-of-type(2) { padding-left: 1.25rem; padding-left: clamp(0.75rem, 1.042vw, 1.25rem); } .language_overlay .inner .mod_changelanguage ul li:nth-of-type(2) strong, .language_overlay .inner .mod_changelanguage ul li:nth-of-type(2) a span { text-align: left; } .language_overlay .inner .mod_changelanguage ul li.lang-fr, .language_overlay .inner .mod_changelanguage ul li.lang-es, .language_overlay .inner .mod_changelanguage ul li.lang-it, .language_overlay .inner .mod_changelanguage ul li.lang-ru, .language_overlay .inner .mod_changelanguage ul li.lang-nl { width: auto; margin-bottom: 1rem; padding-left: 0.75rem; padding-left: clamp(0.5rem, 0.625vw, 0.75rem); padding-right: 0.75rem; padding-right: clamp(0.5rem, 0.625vw, 0.75rem); } .language_overlay .inner .mod_changelanguage ul li.lang-fr strong, .language_overlay .inner .mod_changelanguage ul li.lang-fr a span, .language_overlay .inner .mod_changelanguage ul li.lang-es strong, .language_overlay .inner .mod_changelanguage ul li.lang-es a span, .language_overlay .inner .mod_changelanguage ul li.lang-it strong, .language_overlay .inner .mod_changelanguage ul li.lang-it a span, .language_overlay .inner .mod_changelanguage ul li.lang-ru strong, .language_overlay .inner .mod_changelanguage ul li.lang-ru a span, .language_overlay .inner .mod_changelanguage ul li.lang-nl strong, .language_overlay .inner .mod_changelanguage ul li.lang-nl a span { font-size: 1.25rem; font-size: clamp(1rem, 1.1vw, 1.25rem); } .language_overlay_bg { position: fixed; top: 0; left: 0; z-index: 9; width: 100%; height: 100%; background-color: #007ac3; -webkit-transform: scale(1, 0); transform: scale(1, 0); -webkit-transform-origin: bottom; transform-origin: bottom; -webkit-transition: -webkit-transform 0.3s linear; transition: -webkit-transform 0.3s linear; transition: transform 0.3s linear; transition: transform 0.3s linear, -webkit-transform 0.3s linear; } body.changelanguage-open .language_overlay_bg { -webkit-transform: scale(1, 1); transform: scale(1, 1); } body.changelanguage-open { overflow: hidden; } /* body.contact { #container { min-height: 100vh; } } */ .contact-modal { /* @include inner-width; padding-left: 20.8333vw; padding-right: 20.8333vw; padding-left: clamp(5.0625rem, 20.8333vw, 25rem); padding-right: clamp(5.0625rem, 20.8333vw, 25rem); @media all and (max-width: 39.375rem) { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(1.0625rem, 3.646vw, 4.375rem); padding-right: clamp(1.0625rem, 3.646vw, 4.375rem); } */ } .contact-modal .ce_form { /* .modal { h2 { width: 100%; @include font30; } @include flex-wrap; display: none; &.active { @include flex; } & > fieldset { //width: calc(100% + 1.875rem); //margin-left: -0.9375rem; & > * { padding-left: 0.9375rem; padding-right: 0.9375rem; } } fieldset { @include flex; @include flex-wrap; flex-grow: 1; &.w50, &.w100 { //background: pink; flex-grow: 0; } &.w50 { width: 50%; } &.w100 { width: 100%; } .ce_form { width: 100%; } .widget { width: 100%; } &.cols { .widget { width: 50%; } } .row { margin-top: 0; .explanation { width: auto; } } } .widget { &:not(.widget-submit) { margin-bottom: 2rem; } &.widget-textarea { & + .widget-explanation { @include flow-spacing-half(margin-top); } } } .nav { @include flow-spacing-half(margin-top); width: 100%; //padding-right: 0; .buttons { @include flex; @include flex-h-spread; &.o-p { @include flex-h-start; } &.o-n { @include flex-h-end; } width: 100%; margin-bottom: 2.25rem; & > div { display: inline-block; text-decoration: none; font-family: $fontBold; color: $black; line-height: 1.15; border-bottom: 1px solid $black; //margin-top: 1.25rem; @include transition-hover(all); &.next { pointer-events: none; touch-action: none; opacity: 0.25; } } &.active { & > div.next { pointer-events: all; touch-action: all; opacity: 1; } } } &.last { .widget.widget-submit { width: auto; margin-top: 0; border: none; button { margin-top: 0; } } } } &.step-2 { .nav { .progress { &:after { transform: scale(0.333,1); } } } } &.step-3 { .nav { .progress { &:after { transform: scale(0.666,1); } } } } } &.debug { .modal { &.step-1 { background-color: pink; } &.step-2 { background-color: yellow; } &.step-3 { background-color: lightblue; } &.step-4 { background-color: lightcoral; } &.step-5 { background-color: lightseagreen } &.step-6 { background-color: red; } .submodal { &.step-1 { background-color: pink; } &.step-2 { background-color: yellow; } &.step-3 { background-color: lightcoral; } &.step-4 { background-color: lightseagreen; } &.step-5 { background-color: red; } &.step-6 { background-color: purple; } } } } } .progress { position: relative; width: calc(100% - 1.875rem); margin-left: 0.9375rem; //width: 100%; height: 3px; &:before, &:after { content: ""; position: absolute; left: 0; width: 100%; background-color: $black; } &:before { top: 1px; height: 1px; } &:after { top: 0; height: 3px; transform: scale(0,1); transform-origin: left; @include transition(all); } } [data-progress="1"] { &:after { transform: scale(0.333,1); } } [data-progress="2"] { &:after { transform: scale(0.666,1); } } [data-progress="3"] { &:after { transform: scale(1,1); } } */ } @media all and (min-width: 39.4375rem) { .contact-modal .ce_form .formbody .col-w50 > * { width: 50%; padding-right: 0.9375rem; } } .contact-modal .ce_form .formbody .main-selection h3 { margin-top: 0 !important; } @media all and (max-width: 39.375rem) { .contact-modal .ce_form .formbody .main-selection { margin-top: 0; } } .contact-modal .ce_form .formbody .widget label.dependent.mandatory:after { content: "*"; } .contact-modal .ce_form .formbody .widget:not(.widget-explanation) { margin-bottom: 2rem; } .contact-modal .ce_form .formbody .widget.widget-explanation h2, .contact-modal .ce_form .formbody .widget.widget-explanation h3, .contact-modal .ce_form .formbody .widget.widget-explanation h4, .contact-modal .ce_form .formbody .widget.widget-explanation h5, .contact-modal .ce_form .formbody .widget.widget-explanation h6 { font-size: 1.5rem; font-size: clamp(1.125rem, 1.25vw, 1.5rem); line-height: 1.16667; font-family: "FFDINBold", sans-serif; font-weight: normal; margin-top: 5rem; margin-top: clamp(2.5rem, 4.1665vw, 5rem); margin-bottom: 1.875rem; margin-bottom: clamp(1.5rem, 1.5625vw, 1.875rem); } .contact-modal .ce_form .formbody .widget.widget-explanation p { white-space: normal; } .contact-modal .ce_form .formbody .widget.widget-explanation:not(.mandatory-explanation) p:nth-last-of-type(1) { margin-bottom: 5rem; margin-bottom: clamp(2.5rem, 4.1665vw, 5rem); } .contact-modal .ce_form .formbody .widget.widget-explanation.mandatory-explanation p { white-space: nowrap; } .contact-modal .ce_form .formbody .widget.widget-explanation.mandatory-explanation p:nth-last-of-type(1) { margin-bottom: 5rem; margin-bottom: clamp(2.5rem, 4.1665vw, 5rem); } .contact-modal .ce_form .formbody .widget.widget-explanation.info { max-width: 62.5rem; padding-right: 10%; } .contact-modal .ce_form .formbody .widget.widget-explanation.info a { position: relative; position: relative; -webkit-appearance: none; -moz-appearance: none; appearance: none; display: inline-block; text-decoration: none; font-family: "FFDINBold", sans-serif; color: #000000; border-bottom: 1px solid #000000; margin-top: 1.25rem; -webkit-transition: all 0.35s ease-in; transition: all 0.35s ease-in; line-height: clamp(1rem, 1.1vw, 1.25rem); padding-right: 5.21vw; padding-right: clamp(3.125rem, 5.21vw, 6.25rem); padding-bottom: 1rem; padding-bottom: clamp(0.625rem, 0.8333vw, 1rem); border-bottom: 2px solid #000000; } @media (hover: hover) { .contact-modal .ce_form .formbody .widget.widget-explanation.info a:hover { color: #007ac3; border-color: #007ac3; } } .contact-modal .ce_form .formbody .widget.widget-explanation.info a:before, .contact-modal .ce_form .formbody .widget.widget-explanation.info a:after { content: ""; position: absolute; top: 0; right: 0; width: 1rem; width: clamp(0.75rem, 0.8333vw, 1rem); aspect-ratio: 1/1; background-repeat: no-repeat; background-position: center; background-size: contain; } .contact-modal .ce_form .formbody .widget.widget-explanation.info a:before { z-index: 1; background-image: url(../../files/theme/img/icons/icon-arrow.svg); -webkit-transition: opacity 0.35s ease-in; transition: opacity 0.35s ease-in; } .contact-modal .ce_form .formbody .widget.widget-explanation.info a:after { background-image: url(../../files/theme/img/icons/icon-arrow-blue.svg); } @media (hover: hover) { .contact-modal .ce_form .formbody .widget.widget-explanation.info a:hover:before { opacity: 0; } } .contact-modal .ce_form .formbody .widget.widget-explanation.first h2 { margin-top: 0; } .contact-modal .ce_form .formbody .widget.widget-radio > fieldset { display: -webkit-box; display: -ms-flexbox; display: flex; } .contact-modal .ce_form .formbody .widget.widget-radio.cols { display: block; } .contact-modal .ce_form .formbody .widget.widget-radio.cols > fieldset > span { margin-left: 0 !important; } @media all and (min-width: 33.8125rem) { .contact-modal .ce_form .formbody .widget.widget-radio.cols > fieldset { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .contact-modal .ce_form .formbody .widget.widget-radio.cols > fieldset > span { width: 50%; } .contact-modal .ce_form .formbody .widget.widget-radio.cols > fieldset > span label { padding-right: 1rem; } .contact-modal .ce_form .formbody .widget.widget-radio.cols > fieldset > span:nth-of-type(n+3) { margin-top: 1.5rem; } } @media all and (max-width: 33.75rem) { .contact-modal .ce_form .formbody .widget.widget-radio.cols > fieldset { display: block; } .contact-modal .ce_form .formbody .widget.widget-radio.cols > fieldset > span + span { margin-top: 1.5rem; } } @media all and (max-width: 64rem) { .contact-modal .ce_form .formbody .widget.widget-radio:not(.cols) > fieldset { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .contact-modal .ce_form .formbody .widget.widget-radio:not(.cols) > fieldset span + span { margin-top: 1.5rem; margin-left: 0; } } .contact-modal .ce_form .formbody .widget.widget-radio.error > fieldset { -ms-flex-wrap: wrap; flex-wrap: wrap; } .contact-modal .ce_form .formbody .widget.widget-radio.error .error { width: 100%; margin-bottom: 8px; } .contact-modal .ce_form .ajaxconfirm h2, .contact-modal .ce_form .ajaxconfirm p { text-align: center; } .contact-modal .ce_form .ajaxconfirm h2 { font-size: 3.4375rem; font-size: clamp(1.375rem, 2.865vw, 3.4375rem); line-height: 1.25; } .contact-modal .ce_form .ajaxconfirm h2 span { display: block; line-height: inherit; } .contact-modal .ce_form .ajaxconfirm p { font-size: 1.25rem; font-size: clamp(1rem, 1.1vw, 1.25rem); } .contact-modal .mandatory-explanation { margin-top: 5rem; margin-top: clamp(2.5rem, 4.1665vw, 5rem); } .contao-cookiebar .cc-inner { width: 25vw; min-width: 28.125rem; border-radius: 0; background-color: #f8fcfe; } @media all and (max-width: 39.375rem) { .contao-cookiebar .cc-inner { width: 100%; min-width: 100%; max-width: 100%; } } .contao-cookiebar .cc-btn, .contao-cookiebar .cc-group { border-radius: 0; } .contao-cookiebar .highlight .cc-btn.success { background-color: #007ac3; border-color: #007ac3; } .contao-cookiebar .highlight .cc-btn.success:hover { background-color: #006daf; border-color: #006daf; } .contao-cookiebar input:checked + label:before { border-color: #007ac3; background-color: rgba(0, 122, 195, 0.2); } .contao-cookiebar input:checked + label:after { background-color: #007ac3; } #colorbox #cboxContent { margin-top: 32px; } #colorbox #cboxLoadedContent { border-width: 2px; border-color: #0B2437; } #colorbox #cboxPrevious, #colorbox #cboxNext { top: 0; width: 50%; height: 100%; margin-top: 0; background: none; } #colorbox #cboxPrevious:before, #colorbox #cboxNext:before { content: ""; position: absolute; top: 50%; width: 2.65vw; height: 2.65vw; width: clamp(1.5rem, 2.65vw, 3.125rem); height: clamp(1.5rem, 2.65vw, 3.125rem); background-color: #0B2437; background-image: url(../../files/theme/img/icons/icon-arrow-w.svg); background-repeat: no-repeat; background-size: 60%; background-position: center; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: background-color 0.35s ease-in; transition: background-color 0.35s ease-in; } @media (hover: hover) { #colorbox #cboxPrevious:hover:before, #colorbox #cboxNext:hover:before { background-color: #007ac3; } } #colorbox #cboxPrevious { left: 0; } #colorbox #cboxPrevious:before { left: 2px; -webkit-transform: translateY(-50%) scale(-1); transform: translateY(-50%) scale(-1); } #colorbox #cboxNext { right: 0; } #colorbox #cboxNext:before { right: 2px; } #colorbox #cboxCurrent { top: 0; right: 2rem; right: clamp(1.625rem, 1.667vw, 2rem); line-height: 1; padding-bottom: 0.25rem; -webkit-transform: translateY(-100%); transform: translateY(-100%); } #colorbox #cboxClose { top: -0.5rem; right: 0; -webkit-transform: translateY(-100%); transform: translateY(-100%); width: 1.5rem; height: 1.5rem; width: clamp(1.125rem, 1.25vw, 1.5rem); height: clamp(1.125rem, 1.25vw, 1.5rem); background: none; } #colorbox #cboxClose:before, #colorbox #cboxClose:after { content: ""; position: absolute; top: 0; width: 135%; width: 141.4%; height: 1px; background-color: #ffffff; } #colorbox #cboxClose:before { left: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: top left; transform-origin: top left; } #colorbox #cboxClose:after { right: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: top right; transform-origin: top right; } #cboxOverlay { background: #007ac3; } .pagination { position: relative; width: 100%; margin-top: 5rem; margin-top: clamp(2.5rem, 4.1665vw, 5rem); } @media all and (min-width: 25.0625rem) and (max-width: 39.375rem) { .pagination { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .pagination p a, .pagination p strong, .pagination li a, .pagination li strong { font-size: 1.125rem; font-size: clamp(1rem, 0.9375vw, 1.125rem); font-family: "FFDINBold", sans-serif; line-height: 1; } @media all and (min-width: 39.4375rem) { .pagination p { position: absolute; top: 0; left: 0; } } @media all and (min-width: 25.0625rem) and (max-width: 39.375rem) { .pagination p { -ms-flex-negative: 0; flex-shrink: 0; padding-right: 1.75rem; } } @media all and (max-width: 25rem) { .pagination p { text-align: center; margin-bottom: 0.5rem; } } .pagination ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; } @media all and (min-width: 39.4375rem) { .pagination ul { padding-left: 6.78vw; padding-right: 6.78vw; padding-left: clamp(6.875rem, 6.78vw, 8.125rem); padding-right: clamp(6.875rem, 6.78vw, 8.125rem); } } @media all and (min-width: 25.0625rem) and (max-width: 39.375rem) { .pagination ul { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } } .pagination ul li { /* strong.active { position: relative; &:after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: $black; } } */ } .pagination ul li a { display: inline-block; color: #007ac3; color: #000000; text-decoration: none; color: #767676; -webkit-transition: color 0.35s ease-in; transition: color 0.35s ease-in; } @media (hover: hover) { .pagination ul li a:hover { color: #007ac3; } } .pagination ul li.previous, .pagination ul li.next { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .pagination ul li.previous svg, .pagination ul li.next svg { width: 18px; } .pagination ul li.previous svg path, .pagination ul li.next svg path { -webkit-transition: fill 0.35s ease-in; transition: fill 0.35s ease-in; } @media (hover: hover) { .pagination ul li.previous svg:hover path, .pagination ul li.next svg:hover path { fill: #007ac3; } } .pagination ul li.previous svg { margin-right: 2.1875vw; margin-right: clamp(18px, 2.1875vw, 42px); -webkit-transform: scale(-1); transform: scale(-1); } .pagination ul li.next svg { margin-left: 2.1875vw; margin-left: clamp(18px, 2.1875vw, 42px); } @media all and (min-width: 39.4375rem) { .pagination ul li + li { margin-left: 0.75rem; } } @media all and (max-width: 39.375rem) { .pagination ul li + li { margin-left: 1.25rem; } } .ce_accordion .toggler { position: relative; cursor: pointer; font-size: 1.25rem; font-size: clamp(1rem, 1.1vw, 1.25rem); font-family: "FFDINBold", sans-serif; line-height: 1.5; padding-top: 1.1875rem; padding-bottom: 1.1875rem; padding-right: 4.375rem; padding-right: clamp(2.5rem, 3.7625vw, 4.375rem); -webkit-transition: color 0.35s ease-in; transition: color 0.35s ease-in; } .ce_accordion .toggler h2, .ce_accordion .toggler h3, .ce_accordion .toggler h4, .ce_accordion .toggler h5, .ce_accordion .toggler h6 { font-size: inherit; font-family: inherit; line-height: inherit; font-weight: inherit; margin: 0; padding: 0; } .ce_accordion .toggler .ui-icon { position: absolute; top: 50%; right: 1.25rem; right: clamp(0.625rem, 1.1vw, 1.25rem); -webkit-transform: translateY(-50%) rotate(0); transform: translateY(-50%) rotate(0); width: 1.875rem; height: 1.875rem; width: clamp(1.25rem, 1.5625vw, 1.875rem); height: clamp(1.25rem, 1.5625vw, 1.875rem); -webkit-transition: -webkit-transform 0.35s ease-in; transition: -webkit-transform 0.35s ease-in; transition: transform 0.35s ease-in; transition: transform 0.35s ease-in, -webkit-transform 0.35s ease-in; } .ce_accordion .toggler .ui-icon:before, .ce_accordion .toggler .ui-icon:after { content: ""; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: #000000; -webkit-transition: background-color 0.35s ease-in; transition: background-color 0.35s ease-in; } .ce_accordion .toggler .ui-icon:before { width: 2px; height: 100%; } .ce_accordion .toggler .ui-icon:after { width: 100%; height: 2px; } @media (hover: hover) { .ce_accordion .toggler:hover { color: #007ac3; } .ce_accordion .toggler:hover .ui-icon:before, .ce_accordion .toggler:hover .ui-icon:after { background-color: #007ac3; } } .ce_accordion .toggler.active .ui-icon { -webkit-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg); } .ce_accordion .accordion { padding-bottom: 1.75rem; } .ce_accordion .accordion + .toggler { border-top: 2px solid #000000; } .download-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } @media all and (max-width: 58.125rem) { .download-wrapper { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } @media all and (min-width: 120.0625rem) { .download-wrapper { width: calc(100% + 5.125rem); margin-left: -2.5625rem; } } @media all and (max-width: 120rem) { .download-wrapper { width: calc(100% + 4.27vw); margin-left: -2.135vw; } } @media all and (min-width: 120.0625rem) { .download-wrapper > * { padding-left: 2.5625rem; padding-right: 2.5625rem; } } @media all and (max-width: 120rem) { .download-wrapper > * { padding-left: 2.135vw; padding-right: 2.135vw; } } @media all and (min-width: 78.1875rem) { .download-wrapper > * { width: 33.333%; } .download-wrapper > *:nth-child(n+4) { margin-top: 5.625rem; margin-top: clamp(3.5rem, 4.6875vw, 5.625rem); } } @media all and (min-width: 39.4375rem) and (max-width: 78.125rem) { .download-wrapper > * { width: 50%; } .download-wrapper > *:nth-child(n+3) { margin-top: 5.625rem; margin-top: clamp(3.5rem, 4.6875vw, 5.625rem); } } @media all and (max-width: 39.375rem) { .download-wrapper > * { width: 100%; } .download-wrapper > * + * { margin-top: 5.625rem; margin-top: clamp(3.5rem, 4.6875vw, 5.625rem); } } @media all and (min-width: 78.1875rem) { .download-wrapper.--2cols > * { width: 50%; } .download-wrapper.--2cols > *:nth-child(n+3) { margin-top: 5.625rem; margin-top: clamp(3.5rem, 4.6875vw, 5.625rem); } } @media all and (max-width: 78.125rem) { .download-wrapper.--2cols > * { width: 100%; } .download-wrapper.--2cols > * + * { margin-top: 5.625rem; margin-top: clamp(3.5rem, 4.6875vw, 5.625rem); } } .content-download:not(li), .download-element:not(li) { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; } .content-download:not(li) h3, .content-download:not(li) p, .download-element:not(li) h3, .download-element:not(li) p { font-size: 1.125rem; font-size: clamp(1rem, 0.9375vw, 1.125rem); } .content-download:not(li) > a, .download-element:not(li) > a { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; } .content-download:not(li) .col.preview, .download-element:not(li) .col.preview { width: 4.6875vw; width: clamp(50px, 4.6875vw, 5.625rem); -ms-flex-negative: 0; flex-shrink: 0; } @media all and (max-width: 39.375rem) { .content-download:not(li) .col.preview, .download-element:not(li) .col.preview { width: 5.625rem; } } .content-download:not(li) .col.text, .download-element:not(li) .col.text { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; min-height: 100%; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; margin-left: 1.5rem; margin-left: clamp(1.25rem, 1.25vw, 1.5rem); } .content-download:not(li) .col.text .title h3, .content-download:not(li) .col.text .title p, .download-element:not(li) .col.text .title h3, .download-element:not(li) .col.text .title p { -webkit-transition: color 0.35s ease-in; transition: color 0.35s ease-in; } .content-download:not(li) .col.text .title h3 a, .content-download:not(li) .col.text .title p a, .download-element:not(li) .col.text .title h3 a, .download-element:not(li) .col.text .title p a { font-family: inherit; font-weight: inherit; color: inherit; text-decoration: none; pointer-events: none; } .content-download:not(li) .col.text .title h3, .download-element:not(li) .col.text .title h3 { font-family: "FFDINBold", sans-serif; line-height: 1.5; } .content-download:not(li) .col.text .title p, .download-element:not(li) .col.text .title p { font-family: "FFDINLight", sans-serif; } .content-download:not(li) .col.text .info, .download-element:not(li) .col.text .info { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 1rem; padding-bottom: 1rem; padding-bottom: clamp(0.5rem, 0.8333vw, 1rem); border-bottom: 2px solid #000000; -webkit-transition: border-color 0.35s ease-in; transition: border-color 0.35s ease-in; } @media all and (min-width: 39.4375rem) and (max-width: 50rem) { .content-download:not(li) .col.text .info, .download-element:not(li) .col.text .info { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } } @media all and (max-width: 30rem) { .content-download:not(li) .col.text .info, .download-element:not(li) .col.text .info { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } } .content-download:not(li) .col.text .info p span, .download-element:not(li) .col.text .info p span { font-family: "FFDINLight", sans-serif; line-height: 1; -webkit-transition: color 0.35s ease-in; transition: color 0.35s ease-in; } .content-download:not(li) .col.text .info p span.cta, .download-element:not(li) .col.text .info p span.cta { font-family: "FFDINBold", sans-serif; } .content-download:not(li) .col.text .info p span.divider, .download-element:not(li) .col.text .info p span.divider { margin-left: 0.25rem; margin-right: 0.25rem; } .content-download:not(li) .col.text .info p span.details, .download-element:not(li) .col.text .info p span.details { text-transform: uppercase; } @media all and (min-width: 39.4375rem) and (max-width: 50rem) { .content-download:not(li) .col.text .info p, .download-element:not(li) .col.text .info p { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .content-download:not(li) .col.text .info p span, .download-element:not(li) .col.text .info p span { line-height: 1.273; } .content-download:not(li) .col.text .info p span.cta, .download-element:not(li) .col.text .info p span.cta { width: 100%; } } @media all and (max-width: 30rem) { .content-download:not(li) .col.text .info p, .download-element:not(li) .col.text .info p { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .content-download:not(li) .col.text .info p span, .download-element:not(li) .col.text .info p span { line-height: 1.273; } .content-download:not(li) .col.text .info p span.cta, .download-element:not(li) .col.text .info p span.cta { width: 100%; } } .content-download:not(li) .col.text .info .icon, .download-element:not(li) .col.text .info .icon { width: 1.5625rem; width: clamp(1rem, 1.31vw, 1.5625rem); } @media all and (min-width: 39.4375rem) and (max-width: 50rem) { .content-download:not(li) .col.text .info .icon, .download-element:not(li) .col.text .info .icon { margin-bottom: 0.3125rem; } } @media all and (max-width: 30rem) { .content-download:not(li) .col.text .info .icon, .download-element:not(li) .col.text .info .icon { margin-bottom: 0.3125rem; } } .content-download:not(li) .col.text .info .icon svg, .download-element:not(li) .col.text .info .icon svg { width: 100%; height: auto; display: block; } .content-download:not(li) .col.text .info .icon svg path, .download-element:not(li) .col.text .info .icon svg path { -webkit-transition: fill 0.35s ease-in; transition: fill 0.35s ease-in; } .content-download:not(li) .col.text .info .icon svg + svg, .download-element:not(li) .col.text .info .icon svg + svg { margin-left: 0.35rem; } .content-download:not(li).hasPreview .col.preview .image_container img, .download-element:not(li).hasPreview .col.preview .image_container img { border: 1px solid #C6DAED; } @media all and (hover: hover) { .content-download:not(li):hover .col.text .title h3, .content-download:not(li):hover .col.text .title p, .download-element:not(li):hover .col.text .title h3, .download-element:not(li):hover .col.text .title p { color: #007ac3; } .content-download:not(li):hover .col.text .info, .download-element:not(li):hover .col.text .info { border-color: #007ac3; } .content-download:not(li):hover .col.text .info p span, .download-element:not(li):hover .col.text .info p span { color: #007ac3; } .content-download:not(li):hover .col.text .info .icon svg path, .download-element:not(li):hover .col.text .info .icon svg path { fill: #007ac3 !important; } } .download-list .content-download, .download-element { border-bottom: 2px solid #000000; } .download-list .content-download a, .download-element a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; text-decoration: none; padding-top: 1.5rem; padding-top: clamp(0.75rem, 1.25vw, 1.5rem); padding-right: 1.25rem; padding-right: clamp(1rem, 1.1vw, 1.25rem); padding-bottom: 0.8125rem; padding-bottom: clamp(6px, 0.68vw, 0.8125rem); cursor: pointer; } @media all and (max-width: 39.375rem) { .download-list .content-download a, .download-element a { padding-top: 1.25rem; padding-bottom: 1rem; } } .download-list .content-download a > div, .download-element a > div { font-family: "FFDINBold", sans-serif; line-height: 1.15; color: #000000; -webkit-transition: color 0.35s ease-in; transition: color 0.35s ease-in; } .download-list .content-download a > div span, .download-element a > div span { font-family: "FFDINLight", sans-serif; line-height: inherit; } .download-list .content-download a > div span.details, .download-element a > div span.details { white-space: nowrap; } .download-list .content-download a svg, .download-element a svg { -ms-flex-negative: 0; flex-shrink: 0; width: 1.25rem; width: clamp(1rem, 1.1vw, 1.25rem); height: auto; display: block; margin-left: 0.5rem; } .download-list .content-download a svg path, .download-element a svg path { fill: #000000; -webkit-transition: fill 0.35s ease-in; transition: fill 0.35s ease-in; } @media (hover: hover) { .download-list .content-download a:hover > div, .download-element a:hover > div { color: #007ac3 !important; } .download-list .content-download a:hover svg path, .download-element a:hover svg path { fill: #007ac3 !important; } } .content-download.download-element { border: none; } .content-downloads.hasPreview { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .content-downloads.hasPreview .inner { width: 100%; } .content-downloads.hasPreview .inner .list-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; width: 100%; margin-top: 0; } @media all and (max-width: 33.75rem) { .content-downloads.hasPreview .inner .list-container { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .content-downloads.hasPreview .inner .list-container .preview { width: 14.0625vw; width: clamp(8.75rem, 14.0625vw, 16.875rem); -ms-flex-negative: 0; flex-shrink: 0; } @media all and (max-width: 33.75rem) { .content-downloads.hasPreview .inner .list-container .preview { width: 100%; } } .content-downloads.hasPreview .inner .list-container .download-container { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } @media all and (min-width: 33.8125rem) { .content-downloads.hasPreview .inner .list-container .download-container { margin-left: 1.5rem; margin-left: clamp(1.25rem, 1.25vw, 1.5rem); } } @media all and (max-width: 33.75rem) { .content-downloads.hasPreview .inner .list-container .download-container { width: 100%; margin-top: 1.5rem; margin-top: clamp(0.5rem, 1.25vw, 1.5rem); } } .mod_article > .inside > .content-download, .mod_article > .inside > .content-downloads { padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } @media all and (max-width: 58.125rem) { .mod_article > .inside > .content-download, .mod_article > .inside > .content-downloads { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .download-list.columns { max-width: none !important; } @media all and (min-width: 120.0625rem) { .download-list.columns { width: calc(100% + 5.125rem); margin-left: -2.5625rem !important; } } @media all and (max-width: 120rem) and (min-width: 48rem) { .download-list.columns { width: calc(100% + 4.27vw); margin-left: -2.135vw !important; } } .download-list.columns > li { width: 100%; border-bottom: 0; } @media all and (min-width: 120.0625rem) { .download-list.columns > li { padding-left: 2.5625rem; padding-right: 2.5625rem; } } @media all and (max-width: 120rem) and (min-width: 48rem) { .download-list.columns > li { padding-left: 2.135vw; padding-right: 2.135vw; } } @media all and (min-width: 48rem) { .download-list.columns > li { width: 50%; } } .download-list.columns > li a { border-bottom: 2px solid #000000; } .content-text > h2, .content-text > h3, .content-text > h4, .content-text > h5, .content-text > h6, .content-text .nb > h2, .content-text .nb > h3, .content-text .nb > h4, .content-text .nb > h5, .content-text .nb > h6, .textarea > h2, .textarea > h3, .textarea > h4, .textarea > h5, .textarea > h6 { font-size: 1.5rem; font-size: clamp(1.125rem, 1.25vw, 1.5rem); font-family: "FFDINBold", sans-serif; font-weight: normal; } .content-text > h2 + p, .content-text > h2 + ul, .content-text > h2 + ol, .content-text > h2 + table, .content-text > h2 + .nb, .content-text > h2 + blockquote, .content-text > h3 + p, .content-text > h3 + ul, .content-text > h3 + ol, .content-text > h3 + table, .content-text > h3 + .nb, .content-text > h3 + blockquote, .content-text > h4 + p, .content-text > h4 + ul, .content-text > h4 + ol, .content-text > h4 + table, .content-text > h4 + .nb, .content-text > h4 + blockquote, .content-text > h5 + p, .content-text > h5 + ul, .content-text > h5 + ol, .content-text > h5 + table, .content-text > h5 + .nb, .content-text > h5 + blockquote, .content-text > h6 + p, .content-text > h6 + ul, .content-text > h6 + ol, .content-text > h6 + table, .content-text > h6 + .nb, .content-text > h6 + blockquote, .content-text .nb > h2 + p, .content-text .nb > h2 + ul, .content-text .nb > h2 + ol, .content-text .nb > h2 + table, .content-text .nb > h2 + .nb, .content-text .nb > h2 + blockquote, .content-text .nb > h3 + p, .content-text .nb > h3 + ul, .content-text .nb > h3 + ol, .content-text .nb > h3 + table, .content-text .nb > h3 + .nb, .content-text .nb > h3 + blockquote, .content-text .nb > h4 + p, .content-text .nb > h4 + ul, .content-text .nb > h4 + ol, .content-text .nb > h4 + table, .content-text .nb > h4 + .nb, .content-text .nb > h4 + blockquote, .content-text .nb > h5 + p, .content-text .nb > h5 + ul, .content-text .nb > h5 + ol, .content-text .nb > h5 + table, .content-text .nb > h5 + .nb, .content-text .nb > h5 + blockquote, .content-text .nb > h6 + p, .content-text .nb > h6 + ul, .content-text .nb > h6 + ol, .content-text .nb > h6 + table, .content-text .nb > h6 + .nb, .content-text .nb > h6 + blockquote, .textarea > h2 + p, .textarea > h2 + ul, .textarea > h2 + ol, .textarea > h2 + table, .textarea > h2 + .nb, .textarea > h2 + blockquote, .textarea > h3 + p, .textarea > h3 + ul, .textarea > h3 + ol, .textarea > h3 + table, .textarea > h3 + .nb, .textarea > h3 + blockquote, .textarea > h4 + p, .textarea > h4 + ul, .textarea > h4 + ol, .textarea > h4 + table, .textarea > h4 + .nb, .textarea > h4 + blockquote, .textarea > h5 + p, .textarea > h5 + ul, .textarea > h5 + ol, .textarea > h5 + table, .textarea > h5 + .nb, .textarea > h5 + blockquote, .textarea > h6 + p, .textarea > h6 + ul, .textarea > h6 + ol, .textarea > h6 + table, .textarea > h6 + .nb, .textarea > h6 + blockquote { margin-top: 1em; } .content-text p, .content-text ul, .content-text ol, .content-text table, .content-text .nb, .content-text blockquote, .content-text .nb p, .content-text .nb ul, .content-text .nb ol, .content-text .nb table, .content-text .nb .nb, .content-text .nb blockquote, .textarea p, .textarea ul, .textarea ol, .textarea table, .textarea .nb, .textarea blockquote { font-size: 1.125rem; font-size: clamp(1rem, 0.9375vw, 1.125rem); font-family: "FFDINLight", sans-serif; line-height: 1.55; } .content-text p strong, .content-text ul strong, .content-text ol strong, .content-text table strong, .content-text .nb strong, .content-text blockquote strong, .content-text .nb p strong, .content-text .nb ul strong, .content-text .nb ol strong, .content-text .nb table strong, .content-text .nb .nb strong, .content-text .nb blockquote strong, .textarea p strong, .textarea ul strong, .textarea ol strong, .textarea table strong, .textarea .nb strong, .textarea blockquote strong { font-family: "FFDINBold", sans-serif; line-height: inherit; font-weight: normal; } .content-text p strong a, .content-text ul strong a, .content-text ol strong a, .content-text table strong a, .content-text .nb strong a, .content-text blockquote strong a, .content-text .nb p strong a, .content-text .nb ul strong a, .content-text .nb ol strong a, .content-text .nb table strong a, .content-text .nb .nb strong a, .content-text .nb blockquote strong a, .textarea p strong a, .textarea ul strong a, .textarea ol strong a, .textarea table strong a, .textarea .nb strong a, .textarea blockquote strong a { font-family: inherit; font-weight: inherit; } .content-text p + h2, .content-text p + h3, .content-text p + h4, .content-text p + h5, .content-text p + h6, .content-text p + .nb, .content-text ul + h2, .content-text ul + h3, .content-text ul + h4, .content-text ul + h5, .content-text ul + h6, .content-text ul + .nb, .content-text ol + h2, .content-text ol + h3, .content-text ol + h4, .content-text ol + h5, .content-text ol + h6, .content-text ol + .nb, .content-text table + h2, .content-text table + h3, .content-text table + h4, .content-text table + h5, .content-text table + h6, .content-text table + .nb, .content-text .nb + h2, .content-text .nb + h3, .content-text .nb + h4, .content-text .nb + h5, .content-text .nb + h6, .content-text .nb + .nb, .content-text blockquote + h2, .content-text blockquote + h3, .content-text blockquote + h4, .content-text blockquote + h5, .content-text blockquote + h6, .content-text blockquote + .nb, .content-text .nb p + h2, .content-text .nb p + h3, .content-text .nb p + h4, .content-text .nb p + h5, .content-text .nb p + h6, .content-text .nb p + .nb, .content-text .nb ul + h2, .content-text .nb ul + h3, .content-text .nb ul + h4, .content-text .nb ul + h5, .content-text .nb ul + h6, .content-text .nb ul + .nb, .content-text .nb ol + h2, .content-text .nb ol + h3, .content-text .nb ol + h4, .content-text .nb ol + h5, .content-text .nb ol + h6, .content-text .nb ol + .nb, .content-text .nb table + h2, .content-text .nb table + h3, .content-text .nb table + h4, .content-text .nb table + h5, .content-text .nb table + h6, .content-text .nb table + .nb, .content-text .nb .nb + h2, .content-text .nb .nb + h3, .content-text .nb .nb + h4, .content-text .nb .nb + h5, .content-text .nb .nb + h6, .content-text .nb .nb + .nb, .content-text .nb blockquote + h2, .content-text .nb blockquote + h3, .content-text .nb blockquote + h4, .content-text .nb blockquote + h5, .content-text .nb blockquote + h6, .content-text .nb blockquote + .nb, .textarea p + h2, .textarea p + h3, .textarea p + h4, .textarea p + h5, .textarea p + h6, .textarea p + .nb, .textarea ul + h2, .textarea ul + h3, .textarea ul + h4, .textarea ul + h5, .textarea ul + h6, .textarea ul + .nb, .textarea ol + h2, .textarea ol + h3, .textarea ol + h4, .textarea ol + h5, .textarea ol + h6, .textarea ol + .nb, .textarea table + h2, .textarea table + h3, .textarea table + h4, .textarea table + h5, .textarea table + h6, .textarea table + .nb, .textarea .nb + h2, .textarea .nb + h3, .textarea .nb + h4, .textarea .nb + h5, .textarea .nb + h6, .textarea .nb + .nb, .textarea blockquote + h2, .textarea blockquote + h3, .textarea blockquote + h4, .textarea blockquote + h5, .textarea blockquote + h6, .textarea blockquote + .nb { margin-top: 2.5rem; margin-top: clamp(1.25rem, 2.1vw, 2.5rem); } .content-text p + p, .content-text p + table, .content-text ul + p, .content-text ul + table, .content-text ol + p, .content-text ol + table, .content-text table + p, .content-text table + table, .content-text .nb + p, .content-text .nb + table, .content-text blockquote + p, .content-text blockquote + table, .content-text .nb p + p, .content-text .nb p + table, .content-text .nb ul + p, .content-text .nb ul + table, .content-text .nb ol + p, .content-text .nb ol + table, .content-text .nb table + p, .content-text .nb table + table, .content-text .nb .nb + p, .content-text .nb .nb + table, .content-text .nb blockquote + p, .content-text .nb blockquote + table, .textarea p + p, .textarea p + table, .textarea ul + p, .textarea ul + table, .textarea ol + p, .textarea ol + table, .textarea table + p, .textarea table + table, .textarea .nb + p, .textarea .nb + table, .textarea blockquote + p, .textarea blockquote + table { margin-top: 1em; } .content-text p + ul, .content-text p + ol, .content-text ul + ul, .content-text ul + ol, .content-text ol + ul, .content-text ol + ol, .content-text table + ul, .content-text table + ol, .content-text .nb + ul, .content-text .nb + ol, .content-text blockquote + ul, .content-text blockquote + ol, .content-text .nb p + ul, .content-text .nb p + ol, .content-text .nb ul + ul, .content-text .nb ul + ol, .content-text .nb ol + ul, .content-text .nb ol + ol, .content-text .nb table + ul, .content-text .nb table + ol, .content-text .nb .nb + ul, .content-text .nb .nb + ol, .content-text .nb blockquote + ul, .content-text .nb blockquote + ol, .textarea p + ul, .textarea p + ol, .textarea ul + ul, .textarea ul + ol, .textarea ol + ul, .textarea ol + ol, .textarea table + ul, .textarea table + ol, .textarea .nb + ul, .textarea .nb + ol, .textarea blockquote + ul, .textarea blockquote + ol { margin-top: 2.5rem; margin-top: clamp(1.25rem, 2.1vw, 2.5rem); } .content-text ul + p, .content-text ul + ul, .content-text ul + ol, .content-text ul + table, .content-text ul + .nb, .content-text ul + blockquote, .content-text ol + p, .content-text ol + ul, .content-text ol + ol, .content-text ol + table, .content-text ol + .nb, .content-text ol + blockquote, .content-text .nb ul + p, .content-text .nb ul + ul, .content-text .nb ul + ol, .content-text .nb ul + table, .content-text .nb ul + .nb, .content-text .nb ul + blockquote, .content-text .nb ol + p, .content-text .nb ol + ul, .content-text .nb ol + ol, .content-text .nb ol + table, .content-text .nb ol + .nb, .content-text .nb ol + blockquote, .textarea ul + p, .textarea ul + ul, .textarea ul + ol, .textarea ul + table, .textarea ul + .nb, .textarea ul + blockquote, .textarea ol + p, .textarea ol + ul, .textarea ol + ol, .textarea ol + table, .textarea ol + .nb, .textarea ol + blockquote { margin-top: 2.5rem; margin-top: clamp(1.25rem, 2.1vw, 2.5rem); } .content-text blockquote, .content-text .nb blockquote, .textarea blockquote { font-family: "FFDINLight", sans-serif; font-size: 2.5rem; font-size: clamp(1.25rem, 2.1vw, 2.5rem); line-height: 1.25; } .content-text blockquote q, .content-text .nb blockquote q, .textarea blockquote q { font-family: inherit; font-size: inherit; line-height: inherit; } .content-text blockquote p, .content-text .nb blockquote p, .textarea blockquote p { margin-top: clamp(1.25rem, 1.5625vw, 1.875rem); } .content-text.hl p, .content-text.hl ul li, .content-text.hl ol li, .content-text.hl table, .content-text.hl blockquote, .textarea.hl p, .textarea.hl ul li, .textarea.hl ol li, .textarea.hl table, .textarea.hl blockquote { font-size: 2.5rem; font-size: clamp(1.25rem, 2.1vw, 2.5rem); line-height: 1.25; } @media all and (min-width: 33.8125rem) { .content-text.cols, .textarea.cols { -webkit-columns: 2; -moz-columns: 2; columns: 2; -webkit-column-gap: 3.125vw; -moz-column-gap: 3.125vw; column-gap: 3.125vw; -webkit-column-gap: clamp(1.875rem, 3.125vw, 3.75rem); -moz-column-gap: clamp(1.875rem, 3.125vw, 3.75rem); column-gap: clamp(1.875rem, 3.125vw, 3.75rem); } } .content-text .nb, .textarea .nb { -webkit-column-break-inside: avoid; -moz-column-break-inside: avoid; break-inside: avoid; } .content-text.hyphens, .textarea.hyphens { -ms-hyphens: auto; hyphens: auto; word-break: normal; } .content-text.hasImg, .textarea.hasImg { -webkit-columns: unset !important; -moz-columns: unset !important; columns: unset !important; -webkit-column-gap: unset !important; -moz-column-gap: unset !important; column-gap: unset !important; } @media all and (min-width: 36.3125rem) { .content-text.hasImg figure, .textarea.hasImg figure { width: 40%; width: clamp(220px, 40%, 600px); margin-bottom: 1.5625vw; margin-bottom: clamp(15px, 1.5625vw, 30px); } } @media all and (max-width: 36.25rem) { .content-text.hasImg figure, .textarea.hasImg figure { margin-bottom: 5rem; margin-bottom: clamp(2.5rem, 4.1665vw, 5rem); } } .content-text.hasImg:not(.noFloat):not(.imgRight) figure, .textarea.hasImg:not(.noFloat):not(.imgRight) figure { float: left; } @media all and (min-width: 36.3125rem) { .content-text.hasImg:not(.imgRight) figure, .textarea.hasImg:not(.imgRight) figure { margin-right: 3.125vw; margin-right: clamp(35px, 3.125vw, 60px); } } @media all and (min-width: 36.3125rem) { .content-text.hasImg.imgRight.noFloat figure, .textarea.hasImg.imgRight.noFloat figure { margin-left: 3.125vw; margin-left: clamp(35px, 3.125vw, 60px); } } .content-text.hasImg.imgRight:not(.noFloat) figure, .textarea.hasImg.imgRight:not(.noFloat) figure { float: right; } @media all and (min-width: 36.3125rem) { .content-text.hasImg.imgRight:not(.noFloat) figure, .textarea.hasImg.imgRight:not(.noFloat) figure { margin-left: 3.125vw; margin-left: clamp(35px, 3.125vw, 60px); } } @media all and (min-width: 64.0625rem) { .content-text.hasImg.noFloat, .textarea.hasImg.noFloat { display: -webkit-box; display: -ms-flexbox; display: flex; } .content-text.hasImg.noFloat figure, .textarea.hasImg.noFloat figure { -ms-flex-negative: 0; flex-shrink: 0; } } @media all and (max-width: 64rem) { .content-text.hasImg.noFloat:not(.imgRight) figure, .textarea.hasImg.noFloat:not(.imgRight) figure { float: left; } } @media all and (min-width: 64.0625rem) { .content-text.hasImg.noFloat.imgRight, .textarea.hasImg.noFloat.imgRight { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } } @media all and (max-width: 64rem) { .content-text.hasImg.noFloat.imgRight figure, .textarea.hasImg.noFloat.imgRight figure { float: right; } } .content-text + .content-text, .content-text + .textarea, .textarea + .content-text, .textarea + .textarea { margin-top: 2.5rem; margin-top: clamp(1.25rem, 2.1vw, 2.5rem); } .content-table { padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } @media all and (max-width: 58.125rem) { .content-table { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .content-table h2, .content-table h3, .content-table h4, .content-table h5, .content-table h6 { font-family: "FFDINBold", sans-serif; } .content-table h3 + table, .content-table h4 + table, .content-table h5 + table, .content-table h6 + table { margin-top: 1em; } .content-table table { width: 100%; border-collapse: collapse; } .content-table table thead tr th, .content-table table thead tr td, .content-table table tbody tr th, .content-table table tbody tr td { text-align: left; line-height: 1; word-break: normal; -ms-hyphens: auto; hyphens: auto; padding-top: 0.75rem; padding-left: 0.5rem; padding-right: 0.5rem; padding-bottom: 0.75rem; } .content-table table thead tr th { font-family: "FFDINBold", sans-serif; font-weight: normal; } .content-table table tbody tr:nth-of-type(odd) { background-color: #C6DAED; } @media all and (min-width: 33.8125rem) { .content-table table.centerTableCells thead tr td:nth-of-type(n + 2), .content-table table.centerTableCells thead tr th:nth-of-type(n + 2), .content-table table.centerTableCells tbody tr td:nth-of-type(n + 2), .content-table table.centerTableCells tbody tr th:nth-of-type(n + 2) { text-align: center; } } @media all and (max-width: 33.75rem) { .content-table table { display: block; } .content-table table thead { display: none; } .content-table table tbody { display: block; } .content-table table tbody tr { display: block; padding-top: 2.5rem; padding-top: clamp(1.25rem, 2.1vw, 2.5rem); padding-bottom: 2.5rem; padding-bottom: clamp(1.25rem, 2.1vw, 2.5rem); } .content-table table tbody tr td { display: -webkit-box; display: -ms-flexbox; display: flex; } .content-table table tbody tr td:before { content: attr(data-label); width: 30%; min-width: 9.5rem; font-family: "FFDINBold", sans-serif; font-weight: normal; word-break: normal; -ms-hyphens: auto; hyphens: auto; } } .content-table .table-explanation { margin-top: 1rem; } @media all and (min-width: 33.8125rem) { .content-table.col_1_fixed table tbody tr th { width: 14.323vw; width: clamp(185px, 14.323vw, 275px); } } @media all and (max-width: 33.75rem) { .content-table.col_1_fixed table tbody tr { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .content-table.col_1_fixed table tbody tr th { -ms-flex-negative: 0; flex-shrink: 0; width: 9.635vw; width: clamp(150px, 34.26vw, 185px); padding-right: 20px; } .content-table.col_1_fixed table tbody tr td:before { content: none; } } @media all and (max-width: 30rem) { .content-table.col_1_fixed table tbody tr { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .content-table.col_1_fixed table tbody tr th, .content-table.col_1_fixed table tbody tr td { width: 100%; } } .ce_hyperlink.button a, .content-hyperlink.button a { position: relative; -webkit-appearance: none; -moz-appearance: none; appearance: none; display: inline-block; text-decoration: none; font-family: "FFDINBold", sans-serif; color: #000000; border-bottom: 1px solid #000000; margin-top: 1.25rem; -webkit-transition: all 0.35s ease-in; transition: all 0.35s ease-in; } @media (hover: hover) { .ce_hyperlink.button a:hover, .content-hyperlink.button a:hover { color: #007ac3; border-color: #007ac3; } } .ce_hyperlink.arrow, .content-hyperlink.arrow { margin-top: 1.25rem; border-bottom: 2px solid #000000; } .ce_hyperlink.arrow a, .content-hyperlink.arrow a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; text-decoration: none; padding-top: 1.5rem; padding-top: clamp(0.75rem, 1.25vw, 1.5rem); padding-bottom: 0.8125rem; padding-bottom: clamp(6px, 0.68vw, 0.8125rem); padding-right: 1.25rem; padding-right: clamp(1rem, 1.1vw, 1.25rem); } .ce_hyperlink.arrow a > div, .content-hyperlink.arrow a > div { font-size: 1.125rem; font-size: clamp(1rem, 0.9375vw, 1.125rem); font-family: "FFDINBold", sans-serif; line-height: 1.15; color: #000000; -webkit-transition: color 0.35s ease-in; transition: color 0.35s ease-in; } .ce_hyperlink.arrow a > div span, .content-hyperlink.arrow a > div span { font-family: "FFDINLight", sans-serif; } .ce_hyperlink.arrow a svg, .content-hyperlink.arrow a svg { width: 1.25rem; width: clamp(1rem, 1.1vw, 1.25rem); height: auto; display: block; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .ce_hyperlink.arrow a svg path, .content-hyperlink.arrow a svg path { fill: #000000; -webkit-transition: fill 0.35s ease-in; transition: fill 0.35s ease-in; } @media (hover: hover) { .ce_hyperlink.arrow a:hover > div, .content-hyperlink.arrow a:hover > div { color: #007ac3 !important; } .ce_hyperlink.arrow a:hover svg path, .content-hyperlink.arrow a:hover svg path { fill: #007ac3 !important; } } .ce_list ol, .ce_text ol, .content-list ol, .content-text ol, .textarea ol, .text ol { list-style: none; counter-reset: list-counter; margin: 0; padding: 0; } .ce_list ol li, .ce_text ol li, .content-list ol li, .content-text ol li, .textarea ol li, .text ol li { counter-increment: list-counter; position: relative; padding-left: 1.5rem; padding-left: clamp(1.5rem, 1.5625vw, 1.875rem); } .ce_list ol li:before, .ce_text ol li:before, .content-list ol li:before, .content-text ol li:before, .textarea ol li:before, .text ol li:before { content: counter(list-counter, decimal-leading-zero); position: absolute; top: 0; left: 0; font-family: "FFDINBold", sans-serif; font-weight: normal; text-align: right; } .ce_list ol li > ol, .ce_list ol li + li, .ce_text ol li > ol, .ce_text ol li + li, .content-list ol li > ol, .content-list ol li + li, .content-text ol li > ol, .content-text ol li + li, .textarea ol li > ol, .textarea ol li + li, .text ol li > ol, .text ol li + li { margin-top: 0.5rem; } .ce_list ul, .ce_text ul, .content-list ul, .content-text ul, .textarea ul, .text ul { list-style: none; margin: 0; padding: 0; } .ce_list ul li, .ce_text ul li, .content-list ul li, .content-text ul li, .textarea ul li, .text ul li { position: relative; padding-left: 1.15rem; padding-left: clamp(0.75rem, 1.1vw, 1.15rem); } .ce_list ul li:before, .ce_text ul li:before, .content-list ul li:before, .content-text ul li:before, .textarea ul li:before, .text ul li:before { content: "-"; position: absolute; left: 0; top: 0; } .ce_list ul li + li, .ce_text ul li + li, .content-list ul li + li, .content-text ul li + li, .textarea ul li + li, .text ul li + li { margin-top: 0.5rem; } .image_container img { display: block; max-width: 100%; height: auto; } .image_container .caption { font-size: 1.125rem; font-size: clamp(1rem, 0.9375vw, 1.125rem); font-style: italic; margin-top: 1.5rem; margin-top: clamp(0.5rem, 1.25vw, 1.5rem); } .ce_image.spacingLeft, .content-image.spacingLeft { padding-left: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); } @media all and (max-width: 58.125rem) { .ce_image.spacingLeft, .content-image.spacingLeft { padding-left: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); } } .ce_image.spacingRight, .content-image.spacingRight { padding-right: 12.15vw; padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } @media all and (max-width: 58.125rem) { .ce_image.spacingRight, .content-image.spacingRight { padding-right: 7.5vw; padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .ce_image.spacingBoth, .content-image.spacingBoth { padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } @media all and (max-width: 58.125rem) { .ce_image.spacingBoth, .content-image.spacingBoth { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .content-gallery > ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: calc(100% + 1.5rem); margin-left: -0.75rem; } @media all and (max-width: 120rem) { .content-gallery > ul { width: calc(100% + 1.25vw); margin-left: -0.625vw; } } .content-gallery > ul li { float: none; padding-left: 0.75rem; padding-right: 0.75rem; } @media all and (max-width: 120rem) { .content-gallery > ul li { padding-left: 0.625vw; padding-right: 0.625vw; } } @media all and (max-width: 39.375rem) { .content-gallery > ul li { padding-left: 0.25rem; padding-right: 0.25rem; } } @media all and (min-width: 120.0625rem) { .content-gallery > ul li:nth-of-type(n + 5) { margin-top: 1.5rem; } } @media all and (min-width: 78.1875rem) { .content-gallery > ul li { width: 25%; } .content-gallery > ul li:nth-of-type(n + 5) { margin-top: 1.25vw; } } @media all and (min-width: 48rem) and (max-width: 78.125rem) { .content-gallery > ul li { width: 33.333%; } .content-gallery > ul li:nth-of-type(n + 4) { margin-top: 1.25vw; } } @media all and (max-width: 47.9375rem) { .content-gallery > ul li { width: 50%; } .content-gallery > ul li:nth-of-type(n + 3) { margin-top: 1.25vw; } } @media all and (max-width: 39.375rem) { .content-gallery > ul li:nth-of-type(n + 3) { margin-top: 0.5rem; } } .content-gallery > ul li .image_container img { width: 100%; display: block; } @media (hover: hover) { .content-gallery > ul li a { position: relative; } .content-gallery > ul li a:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; background-color: rgba(0, 122, 195, 0.65); background-image: url(../../files/theme/img/icons/icon-search-w.svg); background-repeat: no-repeat; background-position: center; background-size: 12.5%; opacity: 0; -webkit-transition: opacity 0.35s ease-in; transition: opacity 0.35s ease-in; } .content-gallery > ul li a:hover:before { opacity: 1; } } .mod_article > .inside > .ce_form { padding-left: 21.615vw; padding-right: 21.615vw; padding-left: clamp(6rem, 21.615vw, 25.9375rem); padding-right: clamp(6rem, 21.615vw, 25.9375rem); } @media all and (max-width: 39.375rem) { .mod_article > .inside > .ce_form { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .ce_form, .mod_login, .mod_lostPassword { --color-main: #007ac3; --color-black: #000000; } @media all and (max-width: 58.125rem) { .ce_form form .formbody .desktop-vis, .mod_login form .formbody .desktop-vis, .mod_lostPassword form .formbody .desktop-vis { display: none; } } @media all and (min-width: 58.1875rem) { .ce_form form .formbody .mobile-vis, .mod_login form .formbody .mobile-vis, .mod_lostPassword form .formbody .mobile-vis { display: none; } } @media all and (max-width: 58.125rem) { .ce_form form .formbody .mobile-vis, .mod_login form .formbody .mobile-vis, .mod_lostPassword form .formbody .mobile-vis { display: block; } } .ce_form form .formbody .cols, .mod_login form .formbody .cols, .mod_lostPassword form .formbody .cols { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; width: 100%; margin: 0; } @media all and (min-width: 39.4375rem) { .ce_form form .formbody .cols.cols_25-75 > div:nth-of-type(1), .mod_login form .formbody .cols.cols_25-75 > div:nth-of-type(1), .mod_lostPassword form .formbody .cols.cols_25-75 > div:nth-of-type(1) { width: 25%; } .ce_form form .formbody .cols.cols_25-75 > div:nth-of-type(2), .mod_login form .formbody .cols.cols_25-75 > div:nth-of-type(2), .mod_lostPassword form .formbody .cols.cols_25-75 > div:nth-of-type(2) { width: 75%; } } .ce_form form .formbody .cols .widget, .mod_login form .formbody .cols .widget, .mod_lostPassword form .formbody .cols .widget { width: 100%; margin-bottom: 2rem; } @media all and (min-width: 39.4375rem) { .ce_form form .formbody .cols .widget, .mod_login form .formbody .cols .widget, .mod_lostPassword form .formbody .cols .widget { width: 50%; } .ce_form form .formbody .cols .widget:nth-child(odd), .mod_login form .formbody .cols .widget:nth-child(odd), .mod_lostPassword form .formbody .cols .widget:nth-child(odd) { padding-right: 0.9375rem; } .ce_form form .formbody .cols .widget:nth-child(even), .mod_login form .formbody .cols .widget:nth-child(even), .mod_lostPassword form .formbody .cols .widget:nth-child(even) { padding-left: 0.9375rem; } } .ce_form form .formbody .row, .mod_login form .formbody .row, .mod_lostPassword form .formbody .row { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; margin-top: 2rem; margin-top: clamp(1.75rem, 1.6667vw, 2rem); top: -0.375rem; top: clamp(-0.375rem, -0.3125vw, -0.125rem); } @media all and (min-width: 58.1875rem) { .ce_form form .formbody .row > .checkboxes, .mod_login form .formbody .row > .checkboxes, .mod_lostPassword form .formbody .row > .checkboxes { padding-right: 2.5rem; padding-right: clamp(1.5rem, 2.1vw, 2.5rem); } } .ce_form form .formbody fieldset, .mod_login form .formbody fieldset, .mod_lostPassword form .formbody fieldset { border: 0; margin: 0; } .ce_form form .formbody fieldset legend, .mod_login form .formbody fieldset legend, .mod_lostPassword form .formbody fieldset legend { position: absolute; width: 1px; height: 1px; padding: 1px; overflow: hidden; } .ce_form form .formbody input, .ce_form form .formbody textarea, .ce_form form .formbody select, .mod_login form .formbody input, .mod_login form .formbody textarea, .mod_login form .formbody select, .mod_lostPassword form .formbody input, .mod_lostPassword form .formbody textarea, .mod_lostPassword form .formbody select { width: 100%; border-radius: 0; } .ce_form form .formbody select:-ms-expand, .mod_login form .formbody select:-ms-expand, .mod_lostPassword form .formbody select:-ms-expand { display: none; } .ce_form form .formbody input.radio, .ce_form form .formbody input.checkbox, .mod_login form .formbody input.radio, .mod_login form .formbody input.checkbox, .mod_lostPassword form .formbody input.radio, .mod_lostPassword form .formbody input.checkbox { margin: 0; padding: 0; } .ce_form form .formbody input[type=hidden], .mod_login form .formbody input[type=hidden], .mod_lostPassword form .formbody input[type=hidden] { display: none; } .ce_form form .formbody input[type=checkbox]:not(:checked), .ce_form form .formbody input[type=checkbox]:checked, .ce_form form .formbody input[type=radio]:not(:checked), .ce_form form .formbody input[type=radio]:checked, .mod_login form .formbody input[type=checkbox]:not(:checked), .mod_login form .formbody input[type=checkbox]:checked, .mod_login form .formbody input[type=radio]:not(:checked), .mod_login form .formbody input[type=radio]:checked, .mod_lostPassword form .formbody input[type=checkbox]:not(:checked), .mod_lostPassword form .formbody input[type=checkbox]:checked, .mod_lostPassword form .formbody input[type=radio]:not(:checked), .mod_lostPassword form .formbody input[type=radio]:checked { position: absolute; left: -9999px; } .ce_form form .formbody input[type=checkbox]:checked + label, .ce_form form .formbody input[type=radio]:checked + label, .mod_login form .formbody input[type=checkbox]:checked + label, .mod_login form .formbody input[type=radio]:checked + label, .mod_lostPassword form .formbody input[type=checkbox]:checked + label, .mod_lostPassword form .formbody input[type=radio]:checked + label { position: relative; cursor: pointer; } .ce_form form .formbody input[type=checkbox]:not(:checked) + label:after, .ce_form form .formbody input[type=radio]:not(:checked) + label:after, .mod_login form .formbody input[type=checkbox]:not(:checked) + label:after, .mod_login form .formbody input[type=radio]:not(:checked) + label:after, .mod_lostPassword form .formbody input[type=checkbox]:not(:checked) + label:after, .mod_lostPassword form .formbody input[type=radio]:not(:checked) + label:after { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } .ce_form form .formbody input[type=checkbox]:checked + label:after, .ce_form form .formbody input[type=radio]:checked + label:after, .mod_login form .formbody input[type=checkbox]:checked + label:after, .mod_login form .formbody input[type=radio]:checked + label:after, .mod_lostPassword form .formbody input[type=checkbox]:checked + label:after, .mod_lostPassword form .formbody input[type=radio]:checked + label:after { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } .ce_form form .formbody .checkbox_container > span, .ce_form form .formbody .radio_container > span, .mod_login form .formbody .checkbox_container > span, .mod_login form .formbody .radio_container > span, .mod_lostPassword form .formbody .checkbox_container > span, .mod_lostPassword form .formbody .radio_container > span { display: block; min-height: 1.875rem; min-height: clamp(1.25rem, 1.5625vw, 1.875rem); } .ce_form form .formbody .checkbox_container label, .ce_form form .formbody .radio_container label, .mod_login form .formbody .checkbox_container label, .mod_login form .formbody .radio_container label, .mod_lostPassword form .formbody .checkbox_container label, .mod_lostPassword form .formbody .radio_container label { position: relative; display: block; padding-left: 2.8125rem; min-height: 1.875rem; font-family: "FFDINLight", sans-serif; word-wrap: normal; -ms-hyphens: auto; hyphens: auto; } .ce_form form .formbody .checkbox_container label span, .ce_form form .formbody .radio_container label span, .mod_login form .formbody .checkbox_container label span, .mod_login form .formbody .radio_container label span, .mod_lostPassword form .formbody .checkbox_container label span, .mod_lostPassword form .formbody .radio_container label span { color: var(--color-black); } .ce_form form .formbody .checkbox_container label span a, .ce_form form .formbody .radio_container label span a, .mod_login form .formbody .checkbox_container label span a, .mod_login form .formbody .radio_container label span a, .mod_lostPassword form .formbody .checkbox_container label span a, .mod_lostPassword form .formbody .radio_container label span a { color: inherit; } .ce_form form .formbody .checkbox_container label:before, .ce_form form .formbody .checkbox_container label:after, .ce_form form .formbody .radio_container label:before, .ce_form form .formbody .radio_container label:after, .mod_login form .formbody .checkbox_container label:before, .mod_login form .formbody .checkbox_container label:after, .mod_login form .formbody .radio_container label:before, .mod_login form .formbody .radio_container label:after, .mod_lostPassword form .formbody .checkbox_container label:before, .mod_lostPassword form .formbody .checkbox_container label:after, .mod_lostPassword form .formbody .radio_container label:before, .mod_lostPassword form .formbody .radio_container label:after { content: ""; top: 0; left: 0; width: 1.875rem; height: 1.875rem; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.35s ease-in; transition: all 0.35s ease-in; } .ce_form form .formbody .checkbox_container label:before, .ce_form form .formbody .radio_container label:before, .mod_login form .formbody .checkbox_container label:before, .mod_login form .formbody .radio_container label:before, .mod_lostPassword form .formbody .checkbox_container label:before, .mod_lostPassword form .formbody .radio_container label:before { position: absolute; left: 0; background: none; border: 2px solid var(--color-black); } .ce_form form .formbody .checkbox_container label:after, .ce_form form .formbody .radio_container label:after, .mod_login form .formbody .checkbox_container label:after, .mod_login form .formbody .radio_container label:after, .mod_lostPassword form .formbody .checkbox_container label:after, .mod_lostPassword form .formbody .radio_container label:after { position: absolute; left: 0; } .ce_form form .formbody .checkbox_container legend span.mandatory, .ce_form form .formbody .radio_container legend span.mandatory, .mod_login form .formbody .checkbox_container legend span.mandatory, .mod_login form .formbody .radio_container legend span.mandatory, .mod_lostPassword form .formbody .checkbox_container legend span.mandatory, .mod_lostPassword form .formbody .radio_container legend span.mandatory { margin-left: 4px; } .ce_form form .formbody .radio_container label:before, .ce_form form .formbody .radio_container label:after, .mod_login form .formbody .radio_container label:before, .mod_login form .formbody .radio_container label:after, .mod_lostPassword form .formbody .radio_container label:before, .mod_lostPassword form .formbody .radio_container label:after { border-radius: 100%; } .ce_form form .formbody .radio_container label:after, .mod_login form .formbody .radio_container label:after, .mod_lostPassword form .formbody .radio_container label:after { position: absolute; top: 0; left: 0; background-color: var(--color-main); } .ce_form form .formbody .radio_container input[type=radio]:checked + label:before, .mod_login form .formbody .radio_container input[type=radio]:checked + label:before, .mod_lostPassword form .formbody .radio_container input[type=radio]:checked + label:before { border-color: var(--color-main); } .ce_form form .formbody .radio_container input[type=radio]:checked + label:after, .mod_login form .formbody .radio_container input[type=radio]:checked + label:after, .mod_lostPassword form .formbody .radio_container input[type=radio]:checked + label:after { opacity: 1; -webkit-transform: scale(0.65); transform: scale(0.65); } .ce_form form .formbody .checkbox_container label:after, .mod_login form .formbody .checkbox_container label:after, .mod_lostPassword form .formbody .checkbox_container label:after { position: absolute; top: 0; left: 0; background-color: var(--color-main); background-image: url(../../files/theme/img/icons/icon-check.svg); background-repeat: no-repeat; background-position: center; -webkit-transition: all 0.2s; transition: all 0.2s; } .ce_form form .formbody .radio_container, .mod_login form .formbody .radio_container, .mod_lostPassword form .formbody .radio_container { display: -webkit-box; display: -ms-flexbox; display: flex; } .ce_form form .formbody .radio_container > span + span, .mod_login form .formbody .radio_container > span + span, .mod_lostPassword form .formbody .radio_container > span + span { margin-left: 2.375rem; } .ce_form form .formbody .radio_container label, .mod_login form .formbody .radio_container label, .mod_lostPassword form .formbody .radio_container label { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; line-height: 1; } .ce_form form .formbody .widget input, .ce_form form .formbody .widget textarea, .mod_login form .formbody .widget input, .mod_login form .formbody .widget textarea, .mod_lostPassword form .formbody .widget input, .mod_lostPassword form .formbody .widget textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; outline: none; padding: 0; font-family: "FFDINBold", sans-serif; color: var(--color-black); background: none; } .ce_form form .formbody .widget input.hidden, .ce_form form .formbody .widget textarea.hidden, .mod_login form .formbody .widget input.hidden, .mod_login form .formbody .widget textarea.hidden, .mod_lostPassword form .formbody .widget input.hidden, .mod_lostPassword form .formbody .widget textarea.hidden { display: none; } .ce_form form .formbody .widget label, .mod_login form .formbody .widget label, .mod_lostPassword form .formbody .widget label { color: var(--color-black); } .ce_form form .formbody .widget.widget-text .label-container, .mod_login form .formbody .widget.widget-text .label-container, .mod_lostPassword form .formbody .widget.widget-text .label-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .ce_form form .formbody .widget.widget-text .label-container .info-container, .mod_login form .formbody .widget.widget-text .label-container .info-container, .mod_lostPassword form .formbody .widget.widget-text .label-container .info-container { position: relative; } .ce_form form .formbody .widget.widget-text .label-container .info-container > .info, .mod_login form .formbody .widget.widget-text .label-container .info-container > .info, .mod_lostPassword form .formbody .widget.widget-text .label-container .info-container > .info { margin-left: 0.5rem; } .ce_form form .formbody .widget.widget-text .label-container .info-container > .info svg, .mod_login form .formbody .widget.widget-text .label-container .info-container > .info svg, .mod_lostPassword form .formbody .widget.widget-text .label-container .info-container > .info svg { width: 20px; } .ce_form form .formbody .widget.widget-text .label-container .info-container > .info svg path, .ce_form form .formbody .widget.widget-text .label-container .info-container > .info svg circle, .ce_form form .formbody .widget.widget-text .label-container .info-container > .info svg polygon, .mod_login form .formbody .widget.widget-text .label-container .info-container > .info svg path, .mod_login form .formbody .widget.widget-text .label-container .info-container > .info svg circle, .mod_login form .formbody .widget.widget-text .label-container .info-container > .info svg polygon, .mod_lostPassword form .formbody .widget.widget-text .label-container .info-container > .info svg path, .mod_lostPassword form .formbody .widget.widget-text .label-container .info-container > .info svg circle, .mod_lostPassword form .formbody .widget.widget-text .label-container .info-container > .info svg polygon { -webkit-transition: fill 0.35s ease-in; transition: fill 0.35s ease-in; } @media (hover: hover) { .ce_form form .formbody .widget.widget-text .label-container .info-container > .info:hover svg path, .ce_form form .formbody .widget.widget-text .label-container .info-container > .info:hover svg circle, .ce_form form .formbody .widget.widget-text .label-container .info-container > .info:hover svg polygon, .mod_login form .formbody .widget.widget-text .label-container .info-container > .info:hover svg path, .mod_login form .formbody .widget.widget-text .label-container .info-container > .info:hover svg circle, .mod_login form .formbody .widget.widget-text .label-container .info-container > .info:hover svg polygon, .mod_lostPassword form .formbody .widget.widget-text .label-container .info-container > .info:hover svg path, .mod_lostPassword form .formbody .widget.widget-text .label-container .info-container > .info:hover svg circle, .mod_lostPassword form .formbody .widget.widget-text .label-container .info-container > .info:hover svg polygon { fill: #007ac3; } } .ce_form form .formbody .widget.widget-text .label-container .info-container .info-modal, .mod_login form .formbody .widget.widget-text .label-container .info-container .info-modal, .mod_lostPassword form .formbody .widget.widget-text .label-container .info-container .info-modal { display: none; position: absolute; left: -15px; bottom: 48px; color: #ffffff; text-wrap: normal; -ms-hyphens: auto; hyphens: auto; width: 23.96vw; width: clamp(220px, 23.96vw, 460px); padding: 1rem; background-color: #007ac3; } .ce_form form .formbody .widget.widget-text .label-container .info-container .info-modal:before, .mod_login form .formbody .widget.widget-text .label-container .info-container .info-modal:before, .mod_lostPassword form .formbody .widget.widget-text .label-container .info-container .info-modal:before { content: ""; position: absolute; left: 24px; bottom: 1px; width: 16px; height: 10px; -webkit-transform: translateY(100%) scale(-1); transform: translateY(100%) scale(-1); clip-path: polygon(0 100%, 50% 0, 100% 100%); background-color: #007ac3; } .ce_form form .formbody .widget.widget-text input, .mod_login form .formbody .widget.widget-text input, .mod_lostPassword form .formbody .widget.widget-text input { line-height: 2rem; border-bottom: 2px solid var(--color-black); } .ce_form form .formbody .widget.widget-textarea textarea, .mod_login form .formbody .widget.widget-textarea textarea, .mod_lostPassword form .formbody .widget.widget-textarea textarea { display: block; width: 100%; padding-top: 0.5rem; padding-bottom: 1rem; border-bottom: 2px solid var(--color-black); } .ce_form form .formbody .widget.widget-checkbox + .widget-checkbox, .ce_form form .formbody .widget.widget-checkbox + .widget-radio, .ce_form form .formbody .widget.widget-radio + .widget-checkbox, .ce_form form .formbody .widget.widget-radio + .widget-radio, .mod_login form .formbody .widget.widget-checkbox + .widget-checkbox, .mod_login form .formbody .widget.widget-checkbox + .widget-radio, .mod_login form .formbody .widget.widget-radio + .widget-checkbox, .mod_login form .formbody .widget.widget-radio + .widget-radio, .mod_lostPassword form .formbody .widget.widget-checkbox + .widget-checkbox, .mod_lostPassword form .formbody .widget.widget-checkbox + .widget-radio, .mod_lostPassword form .formbody .widget.widget-radio + .widget-checkbox, .mod_lostPassword form .formbody .widget.widget-radio + .widget-radio { margin-top: 1rem; } .ce_form form .formbody .widget.widget-checkbox .checkbox_container, .mod_login form .formbody .widget.widget-checkbox .checkbox_container, .mod_lostPassword form .formbody .widget.widget-checkbox .checkbox_container { border: none; margin: 0; } .ce_form form .formbody .widget.widget-checkbox + .widget-explanation, .mod_login form .formbody .widget.widget-checkbox + .widget-explanation, .mod_lostPassword form .formbody .widget.widget-checkbox + .widget-explanation { margin-left: 7vw; margin-left: clamp(1.5rem, 7vw, 15rem); } .ce_form form .formbody .widget.widget-select label, .mod_login form .formbody .widget.widget-select label, .mod_lostPassword form .formbody .widget.widget-select label { display: block; margin-bottom: 0.75rem; } .ce_form form .formbody .widget.widget-select select, .mod_login form .formbody .widget.widget-select select, .mod_lostPassword form .formbody .widget.widget-select select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: none; border: none; font-family: "FFDINBold", sans-serif; color: var(--color-black); line-height: 2rem; border-bottom: 2px solid var(--color-black); background-image: url(../../files/theme/img/icons/icon-angle-down.svg); background-repeat: no-repeat; background-size: 10px; background-position: right 0.5rem center; } .ce_form form .formbody .widget.widget-fineuploader, .mod_login form .formbody .widget.widget-fineuploader, .mod_lostPassword form .formbody .widget.widget-fineuploader { width: 100%; margin-top: 2rem; margin-bottom: 2rem; } .ce_form form .formbody .widget.widget-fineuploader label, .mod_login form .formbody .widget.widget-fineuploader label, .mod_lostPassword form .formbody .widget.widget-fineuploader label { display: none; } .ce_form form .formbody .widget.widget-fineuploader .qq-upload-button, .mod_login form .formbody .widget.widget-fineuploader .qq-upload-button, .mod_lostPassword form .formbody .widget.widget-fineuploader .qq-upload-button { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; min-height: 12rem; margin-bottom: 1.25rem; border: 2px dashed var(--color-black); background: none; color: #ffffff; text-align: center; } .ce_form form .formbody .widget.widget-fineuploader .qq-upload-button > div span, .mod_login form .formbody .widget.widget-fineuploader .qq-upload-button > div span, .mod_lostPassword form .formbody .widget.widget-fineuploader .qq-upload-button > div span { display: block; } .ce_form form .formbody .widget.widget-fineuploader .qq-uploader, .mod_login form .formbody .widget.widget-fineuploader .qq-uploader, .mod_lostPassword form .formbody .widget.widget-fineuploader .qq-uploader { position: relative; } .ce_form form .formbody .widget.widget-fineuploader .qq-uploader .qq-upload-drop-area, .mod_login form .formbody .widget.widget-fineuploader .qq-uploader .qq-upload-drop-area, .mod_lostPassword form .formbody .widget.widget-fineuploader .qq-uploader .qq-upload-drop-area { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin-top: 0; margin-bottom: 0; background-color: #006daf; } .ce_form form .formbody .widget.widget-fineuploader .qq-uploader .qq-upload-drop-area span, .mod_login form .formbody .widget.widget-fineuploader .qq-uploader .qq-upload-drop-area span, .mod_lostPassword form .formbody .widget.widget-fineuploader .qq-uploader .qq-upload-drop-area span { position: absolute; top: 50%; left: 0; right: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-family: "FFDINBold", sans-serif; font-size: 1.25rem; font-size: clamp(1rem, 1.1vw, 1.25rem); color: #ffffff; } .ce_form form .formbody .widget.widget-fineuploader .values-container .values-list, .mod_login form .formbody .widget.widget-fineuploader .values-container .values-list, .mod_lostPassword form .formbody .widget.widget-fineuploader .values-container .values-list { list-style-type: disc; } .ce_form form .formbody .widget.widget-fineuploader .values-container .values-list li:nth-last-of-type(1), .mod_login form .formbody .widget.widget-fineuploader .values-container .values-list li:nth-last-of-type(1), .mod_lostPassword form .formbody .widget.widget-fineuploader .values-container .values-list li:nth-last-of-type(1) { padding-bottom: 1.25rem; } .ce_form form .formbody .widget.widget-fineuploader .values-container .values-list li .fineuploader-item .content, .mod_login form .formbody .widget.widget-fineuploader .values-container .values-list li .fineuploader-item .content, .mod_lostPassword form .formbody .widget.widget-fineuploader .values-container .values-list li .fineuploader-item .content { display: -webkit-box; display: -ms-flexbox; display: flex; } .ce_form form .formbody .widget.widget-fineuploader .values-container .values-list li .fineuploader-item .content img, .mod_login form .formbody .widget.widget-fineuploader .values-container .values-list li .fineuploader-item .content img, .mod_lostPassword form .formbody .widget.widget-fineuploader .values-container .values-list li .fineuploader-item .content img { display: none; } .ce_form form .formbody .widget.widget-fineuploader .values-container .values-list li .fineuploader-item.file span.name, .ce_form form .formbody .widget.widget-fineuploader .values-container .values-list li .fineuploader-item.file span.details, .mod_login form .formbody .widget.widget-fineuploader .values-container .values-list li .fineuploader-item.file span.name, .mod_login form .formbody .widget.widget-fineuploader .values-container .values-list li .fineuploader-item.file span.details, .mod_lostPassword form .formbody .widget.widget-fineuploader .values-container .values-list li .fineuploader-item.file span.name, .mod_lostPassword form .formbody .widget.widget-fineuploader .values-container .values-list li .fineuploader-item.file span.details { color: #ffffff; } .ce_form form .formbody .widget.widget-fineuploader .values-container .values-list li .fineuploader-item.file span.name, .mod_login form .formbody .widget.widget-fineuploader .values-container .values-list li .fineuploader-item.file span.name, .mod_lostPassword form .formbody .widget.widget-fineuploader .values-container .values-list li .fineuploader-item.file span.name { font-family: "FFDINBold", sans-serif; } .ce_form form .formbody .widget.widget-fineuploader .values-container .values-list li .fineuploader-item.file span.details, .mod_login form .formbody .widget.widget-fineuploader .values-container .values-list li .fineuploader-item.file span.details, .mod_lostPassword form .formbody .widget.widget-fineuploader .values-container .values-list li .fineuploader-item.file span.details { font-family: "FFDINLight", sans-serif; color: #C6DAED; } .ce_form form .formbody .widget.widget-fineuploader .values-container .values-list li .fineuploader-item.file span.details span, .mod_login form .formbody .widget.widget-fineuploader .values-container .values-list li .fineuploader-item.file span.details span, .mod_lostPassword form .formbody .widget.widget-fineuploader .values-container .values-list li .fineuploader-item.file span.details span { color: inherit; } .ce_form form .formbody .widget.widget-fineuploader .values-container .values-list li .fineuploader-item.file span + span, .mod_login form .formbody .widget.widget-fineuploader .values-container .values-list li .fineuploader-item.file span + span, .mod_lostPassword form .formbody .widget.widget-fineuploader .values-container .values-list li .fineuploader-item.file span + span { margin-left: 0.15rem; } .ce_form form .formbody .widget.widget-fineuploader .values-container .values-list li .fineuploader-item.file a, .mod_login form .formbody .widget.widget-fineuploader .values-container .values-list li .fineuploader-item.file a, .mod_lostPassword form .formbody .widget.widget-fineuploader .values-container .values-list li .fineuploader-item.file a { color: #ffffff; } .ce_form form .formbody .widget.widget-fineuploader .values-container .values-list li .fineuploader-item .delete, .mod_login form .formbody .widget.widget-fineuploader .values-container .values-list li .fineuploader-item .delete, .mod_lostPassword form .formbody .widget.widget-fineuploader .values-container .values-list li .fineuploader-item .delete { color: #000000; margin-left: 0.25rem; } .ce_form form .formbody .widget.widget-fineuploader .qq-upload-list .qq-upload-size, .mod_login form .formbody .widget.widget-fineuploader .qq-upload-list .qq-upload-size, .mod_lostPassword form .formbody .widget.widget-fineuploader .qq-upload-list .qq-upload-size { color: #C6DAED; } .ce_form form .formbody .widget.widget-fineuploader .qq-upload-list button, .mod_login form .formbody .widget.widget-fineuploader .qq-upload-list button, .mod_lostPassword form .formbody .widget.widget-fineuploader .qq-upload-list button { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; outline: none; background: none; padding: 0; text-decoration: underline; } .ce_form form .formbody .widget.widget-fineuploader .qq-upload-list li.qq-upload-success, .mod_login form .formbody .widget.widget-fineuploader .qq-upload-list li.qq-upload-success, .mod_lostPassword form .formbody .widget.widget-fineuploader .qq-upload-list li.qq-upload-success { display: none; } .ce_form form .formbody .widget.widget-fineuploader + p.explanation, .mod_login form .formbody .widget.widget-fineuploader + p.explanation, .mod_lostPassword form .formbody .widget.widget-fineuploader + p.explanation { font-style: italic; margin-bottom: 2.3125rem; } .ce_form form .formbody .widget.widget-fineuploader .qq-alert-dialog-selector, .mod_login form .formbody .widget.widget-fineuploader .qq-alert-dialog-selector, .mod_lostPassword form .formbody .widget.widget-fineuploader .qq-alert-dialog-selector { background-color: #EFF5F8; } .ce_form form .formbody .widget.widget-fineuploader .qq-alert-dialog-selector button, .mod_login form .formbody .widget.widget-fineuploader .qq-alert-dialog-selector button, .mod_lostPassword form .formbody .widget.widget-fineuploader .qq-alert-dialog-selector button { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; outline: none; background: none; padding: 0; position: relative; appearance: none; display: inline-block; text-decoration: none; font-family: "FFDINBold", sans-serif; color: #000000; border-bottom: 1px solid #000000; margin-top: 1.25rem; -webkit-transition: all 0.35s ease-in; transition: all 0.35s ease-in; } @media (hover: hover) { .ce_form form .formbody .widget.widget-fineuploader .qq-alert-dialog-selector button:hover, .mod_login form .formbody .widget.widget-fineuploader .qq-alert-dialog-selector button:hover, .mod_lostPassword form .formbody .widget.widget-fineuploader .qq-alert-dialog-selector button:hover { color: #007ac3; border-color: #007ac3; } } .ce_form form .formbody .widget.widget-captcha, .mod_login form .formbody .widget.widget-captcha, .mod_lostPassword form .formbody .widget.widget-captcha { margin-top: 1.5rem; } .ce_form form .formbody .widget.widget-captcha input, .mod_login form .formbody .widget.widget-captcha input, .mod_lostPassword form .formbody .widget.widget-captcha input { line-height: 2rem; border-bottom: 2px solid #000000 !important; } .ce_form form .formbody .widget.widget-captcha .captcha_text, .mod_login form .formbody .widget.widget-captcha .captcha_text, .mod_lostPassword form .formbody .widget.widget-captcha .captcha_text { display: block; margin-top: 0.5rem; } .ce_form form .formbody .widget.widget-password input, .mod_login form .formbody .widget.widget-password input, .mod_lostPassword form .formbody .widget.widget-password input { line-height: 2rem; border-bottom: 2px solid var(--color-black); } .ce_form form .formbody .widget.widget-submit, .mod_login form .formbody .widget.widget-submit, .mod_lostPassword form .formbody .widget.widget-submit { width: 100%; } .ce_form form .formbody .widget.widget-submit .submit, .mod_login form .formbody .widget.widget-submit .submit, .mod_lostPassword form .formbody .widget.widget-submit .submit { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; outline: none; background: none; padding: 0; position: relative; appearance: none; display: inline-block; text-decoration: none; font-family: "FFDINBold", sans-serif; color: #000000; border-bottom: 1px solid #000000; margin-top: 1.25rem; -webkit-transition: all 0.35s ease-in; transition: all 0.35s ease-in; } @media (hover: hover) { .ce_form form .formbody .widget.widget-submit .submit:hover, .mod_login form .formbody .widget.widget-submit .submit:hover, .mod_lostPassword form .formbody .widget.widget-submit .submit:hover { color: #007ac3; border-color: #007ac3; } } .ce_form form .formbody .widget.widget-explanation, .mod_login form .formbody .widget.widget-explanation, .mod_lostPassword form .formbody .widget.widget-explanation { margin-top: 0; } .ce_form form .formbody .widget.widget-explanation p, .mod_login form .formbody .widget.widget-explanation p, .mod_lostPassword form .formbody .widget.widget-explanation p { white-space: nowrap; } @media all and (max-width: 58.125rem) { .ce_form form .formbody .widget.widget-explanation, .mod_login form .formbody .widget.widget-explanation, .mod_lostPassword form .formbody .widget.widget-explanation { margin-top: 1.5rem; } } .ce_form form .formbody .widget.error p.error, .mod_login form .formbody .widget.error p.error, .mod_lostPassword form .formbody .widget.error p.error { font-size: 0.85rem; color: var(--color-main); } .ce_form form .formbody .widget.error p.error + input, .ce_form form .formbody .widget.error p.error + textarea, .ce_form form .formbody .widget.error p.error + select, .mod_login form .formbody .widget.error p.error + input, .mod_login form .formbody .widget.error p.error + textarea, .mod_login form .formbody .widget.error p.error + select, .mod_lostPassword form .formbody .widget.error p.error + input, .mod_lostPassword form .formbody .widget.error p.error + textarea, .mod_lostPassword form .formbody .widget.error p.error + select { border-color: var(--color-main); } .ce_form form .formbody .widget.error.widget-checkbox p.error, .mod_login form .formbody .widget.error.widget-checkbox p.error, .mod_lostPassword form .formbody .widget.error.widget-checkbox p.error { margin-bottom: 0.55rem; } .ce_form form .formbody ::-webkit-input-placeholder, .mod_login form .formbody ::-webkit-input-placeholder, .mod_lostPassword form .formbody ::-webkit-input-placeholder { font-family: "FFDINBold", sans-serif; color: var(--color-black); } .ce_form form .formbody ::-moz-placeholder, .mod_login form .formbody ::-moz-placeholder, .mod_lostPassword form .formbody ::-moz-placeholder { font-family: "FFDINBold", sans-serif; color: var(--color-black); } .ce_form form .formbody :-ms-input-placeholder, .mod_login form .formbody :-ms-input-placeholder, .mod_lostPassword form .formbody :-ms-input-placeholder { font-family: "FFDINBold", sans-serif; color: var(--color-black); } .ce_form form .formbody ::-ms-input-placeholder, .mod_login form .formbody ::-ms-input-placeholder, .mod_lostPassword form .formbody ::-ms-input-placeholder { font-family: "FFDINBold", sans-serif; color: var(--color-black); } .ce_form form .formbody ::placeholder, .mod_login form .formbody ::placeholder, .mod_lostPassword form .formbody ::placeholder { font-family: "FFDINBold", sans-serif; color: var(--color-black); } span.LV_invalid { color: var(--color-main); } .ce_form form .formbody .widget input.LV_invalid_field, .ce_form form .formbody .widget textarea.LV_invalid_field { background: rgba(var(--color-main), 0.1); } .form-confirmation svg { display: block; width: 8.333vw; width: clamp(6.5rem, 8.333vw, 10rem); margin-top: 1rem; margin-left: auto; margin-right: auto; -webkit-transform: scale(0, 0); transform: scale(0, 0); -webkit-animation-name: confirm; animation-name: confirm; -webkit-animation-duration: 0.85s; animation-duration: 0.85s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .form-confirmation svg path { fill: var(--color-main); } .form-confirmation p { text-align: center; } .form-confirmation p.h2 { font-size: 3.4375rem; font-size: clamp(1.375rem, 2.865vw, 3.4375rem); font-family: "FFDINBold", sans-serif; line-height: 1.125; margin-bottom: 1.875rem; margin-bottom: clamp(1rem, 1.5625vw, 1.875rem); } .form-confirmation p strong { font-family: "FFDINBold", sans-serif; } .bg-dark .ce_form form .formbody .widget.widget-select label { margin-bottom: 0; } .bg-dark .ce_form form .formbody .widget.widget-select select { background-color: #007ac3; background-image: url(../../files/theme/img/icons/icon-angle-down-w.svg); } @-webkit-keyframes confirm { 0% { -webkit-transform: scale(0, 0); transform: scale(0, 0); } 100% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } } @keyframes confirm { 0% { -webkit-transform: scale(0, 0); transform: scale(0, 0); } 100% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } } .content-player { position: relative; } .content-player.spacingLeft { padding-left: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); } @media all and (max-width: 58.125rem) { .content-player.spacingLeft { padding-left: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); } } .content-player.spacingRight { padding-right: 12.15vw; padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } @media all and (max-width: 58.125rem) { .content-player.spacingRight { padding-right: 7.5vw; padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .content-player.spacingBoth { padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } @media all and (max-width: 58.125rem) { .content-player.spacingBoth { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .content-player figure { position: relative; } .content-player figure button.play { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; outline: none; background: none; padding: 0; position: absolute; top: 50%; left: 50%; z-index: 1; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 7.5rem; width: clamp(3.5rem, 5vw, 7.5rem); } .content-player figure button.play svg { width: 100%; height: auto; display: block; } .content-player figure button.play svg .button-circle circle { opacity: 0.25; -webkit-transition: opacity 0.35s ease-in; transition: opacity 0.35s ease-in; } @media (hover: hover) { .content-player figure button.play:hover svg .button-circle circle { opacity: 0.75; } } .content-player figure video { display: block; width: 100%; } .content-player.autoplay-video button.play { display: none; } .ce_youtube { position: relative; width: 100%; height: auto; } .ce_youtube:before { content: ""; padding-top: 56.25%; display: block; } .ce_youtube iframe { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100% !important; height: 100% !important; border: none; } .ce_youtube .video_container .video-wall { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100% !important; height: 100% !important; } @media all and (max-width: 50rem) { .ce_youtube .video_container .video-wall { min-width: 0; min-height: 0; } } .hero_container { position: relative; } .hero_container .hero-section { position: relative; width: 100%; } .hero_container .hero-section .inner { padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } @media all and (max-width: 58.125rem) { .hero_container .hero-section .inner { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .hero_container .hero-section .inner .headline { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .hero_container .hero-section .inner .headline h1, .hero_container .hero-section .inner .headline li a, .hero_container .hero-section .inner .headline li span { color: #ffffff; } .hero_container .hero-section .inner .headline svg path { fill: #ffffff; } .hero_container .hero-section .bg-img, .hero_container .hero-section .bg-video { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; max-height: 100vh; } .hero_container .hero-section .bg-img:before, .hero_container .hero-section .bg-video:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; mix-blend-mode: multiply; } .hero_container .hero-section .bg-img { width: 100%; } .hero_container .hero-section .bg-img .image_container { width: 100%; height: 100%; } .hero_container .hero-section .bg-img .image_container img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } .hero_container .hero-section .bg-video video { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } .hero_container .hero-section.-default { aspect-ratio: 16/9; max-height: 100vh; } .hero_container .hero-section.-default .inner { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; z-index: 1; } @media all and (max-width: 33.75rem) { .hero_container .hero-section.-default { aspect-ratio: 4/3; } } .hero_container .hero-section.-default .inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } @media all and (min-width: 48rem) { .hero_container .hero-section.-default .inner { padding-left: 27.1vw; padding-left: clamp(5rem, 27.1vw, 32.5rem); } } .hero_container .hero-section.-default .inner .headline { margin-left: 1rem; margin-bottom: 6.46vw; margin-bottom: clamp(2rem, 6.46vw, 7.75rem); } .hero_container .hero-section.-default .inner .headline h1 { font-size: 5.625rem; font-size: clamp(1.5rem, 4.6875vw, 5.625rem); line-height: 1.1778; text-align: right; } .hero_container .hero-section.-default .bg-img:before { bottom: auto; height: 50%; background: -webkit-gradient(linear, left bottom, left top, from(rgba(15, 45, 78, 0)), to(#000000)); background: linear-gradient(0deg, rgba(15, 45, 78, 0) 0%, #000000 100%); opacity: 0.31; } .hero_container .hero-section.-default .bg-img:after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; top: auto; height: 50%; background: transparent -webkit-gradient(linear, left top, left bottom, from(rgba(15, 45, 78, 0)), to(#000000)); background: transparent linear-gradient(180deg, rgba(15, 45, 78, 0) 0%, #000000 100%); opacity: 0.31; } .hero_container .hero-section.-overflow { aspect-ratio: 16/10; } @media all and (max-width: 39.375rem) { .hero_container .hero-section.-overflow { margin-bottom: 5rem; margin-bottom: clamp(2.5rem, 4.1665vw, 5rem); } } @media all and (max-width: 33.75rem) { .hero_container .hero-section.-overflow { aspect-ratio: 13/10; } } @media all and (max-width: 25rem) { .hero_container .hero-section.-overflow { aspect-ratio: 9/10; } } .hero_container .hero-section.-overflow .inner { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; z-index: 1; } .hero_container .hero-section.-overflow .inner .headline { margin-bottom: 18.5vw; } .hero_container .hero-section.-overflow .inner .headline h1 span { font-size: 7.5rem; font-size: clamp(2rem, 6.25vw, 7.5rem); line-height: 1; /* &.special { @include flex; @include flex-row-reverse; @include flex-v-end; & > span { font-family: $fontLight; text-align: left; &.small { font-size: 1.75rem; font-size: clamp(0.85rem, 1.46vw, 1.75rem); max-width: 35%; max-width: clamp(9.5rem, 35%, 20rem); margin-left: 5%; margin-bottom: 2.5%; margin-bottom: clamp(0.5rem, 2.5%, 1.375rem); } } } */ } .hero_container .hero-section.-overflow .inner .headline h1 span:nth-of-type(1) { -webkit-transform: translateX(-7.5%); transform: translateX(-7.5%); } .hero_container .hero-section.-overflow .inner .headline h1 span:nth-last-of-type(1) { -webkit-transform: translateX(7.5%); transform: translateX(7.5%); } .hero_container .hero-section.-overflow .bg-img { right: auto; bottom: auto; max-height: none; } .hero_container .hero-section.-overflow .bg-img:before { height: 38%; background: -webkit-gradient(linear, left bottom, left top, from(rgba(15, 45, 78, 0)), to(#102F51)) 0% 0%; background: linear-gradient(0deg, rgba(15, 45, 78, 0) 0%, #102F51 100%) 0% 0%; opacity: 0.59; } @media all and (max-width: 33.75rem) { .hero_container .hero-section.-overflow .bg-img { width: 130%; left: -15%; } } @media all and (max-width: 25rem) { .hero_container .hero-section.-overflow .bg-img { width: 200%; left: -50%; } } .hero_container .hero-section.-content .inner .headline { margin-bottom: 7.3vw; margin-bottom: clamp(2rem, 7.3vw, 8.75rem); } .hero_container .hero-section.-content .inner .headline h1 { font-size: 3.4375rem; font-size: clamp(1.375rem, 2.865vw, 3.4375rem); line-height: 1.27; } .hero_container .hero-section.-content .inner .ce_text { width: 45.85%; } @media all and (max-width: 64rem) { .hero_container .hero-section.-content .inner .ce_text { width: 70%; } } .hero_container .hero-section.-content .bg-img:before, .hero_container .hero-section.-content .bg-video:before { background: -webkit-gradient(linear, left top, right top, from(rgba(11, 36, 55, 0.8784313725)), color-stop(84%, rgba(11, 36, 55, 0.1921568627)), to(rgba(11, 36, 55, 0))); background: linear-gradient(90deg, rgba(11, 36, 55, 0.8784313725) 0%, rgba(11, 36, 55, 0.1921568627) 84%, rgba(11, 36, 55, 0) 100%); opacity: 0.55; } .hero_container .hero-section.-content.style01 .inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; position: relative; z-index: 1; min-height: 100%; padding-top: 7.3vw; padding-top: clamp(2rem, 7.3vw, 8.75rem); padding-bottom: 4.16667vw; padding-bottom: clamp(2.625rem, 4.16667vw, 5rem); } .hero_container .hero-section.-content.style01 .inner .headline { margin-bottom: 2.75rem; margin-bottom: clamp(1rem, 2.3vw, 2.75rem); } .hero_container .hero-section.-content.style01 .inner p { color: #ffffff; } body.theme--private .hero_container .hero-section.-content.style01 { aspect-ratio: 2.477/1; } @media all and (max-width: 84.375rem) { body.theme--private .hero_container .hero-section.-content.style01 .ce_text { width: 65%; } } @media all and (max-width: 71.875rem) { body.theme--private .hero_container .hero-section.-content.style01 .ce_text { width: 100%; } } @media all and (max-width: 58.125rem) { body.theme--private .hero_container .hero-section.-content.style01 { aspect-ratio: 2/1; } } @media all and (max-width: 47.9375rem) { body.theme--private .hero_container .hero-section.-content.style01 { aspect-ratio: 1.5/1; } } @media all and (max-width: 39.375rem) { body.theme--private .hero_container .hero-section.-content.style01 { aspect-ratio: 1/1; } } @media all and (max-width: 28.125rem) { body.theme--private .hero_container .hero-section.-content.style01 { aspect-ratio: 0.75/1; } } body.theme--public .hero_container .hero-section.-content.style01 { aspect-ratio: 2.477/1; } @media all and (max-width: 58.125rem) { body.theme--public .hero_container .hero-section.-content.style01 { aspect-ratio: 5/2; } } @media all and (max-width: 48rem) { body.theme--public .hero_container .hero-section.-content.style01 { aspect-ratio: 16/9; } } @media all and (max-width: 33.75rem) { body.theme--public .hero_container .hero-section.-content.style01 { aspect-ratio: 4/3; } } .hero_container .hero-section.-content.style02 .row.img, .hero_container .hero-section.-content.noTxt .row.img { position: relative; aspect-ratio: 3.3/1; } @media all and (max-width: 58.125rem) { .hero_container .hero-section.-content.style02 .row.img, .hero_container .hero-section.-content.noTxt .row.img { aspect-ratio: 5/2; } } @media all and (max-width: 48rem) { .hero_container .hero-section.-content.style02 .row.img, .hero_container .hero-section.-content.noTxt .row.img { aspect-ratio: 16/9; } } @media all and (max-width: 33.75rem) { .hero_container .hero-section.-content.style02 .row.img, .hero_container .hero-section.-content.noTxt .row.img { aspect-ratio: 4/3; } } .hero_container .hero-section.-content.style02 .row.img .inner, .hero_container .hero-section.-content.noTxt .row.img .inner { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; z-index: 1; padding-bottom: 4.16667vw; padding-bottom: clamp(2.625rem, 4.16667vw, 5rem); } .hero_container .hero-section.-content.style02 .row.img .inner .headline, .hero_container .hero-section.-content.noTxt .row.img .inner .headline { margin-bottom: 0; } .hero_container .hero-section.-content.style02 .row.txt, .hero_container .hero-section.-content.noTxt .row.txt { margin-top: 2.5rem; margin-top: clamp(1.25rem, 2.1vw, 2.5rem); } .hero_container .hero-section.-product .row.img { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; aspect-ratio: 2.477/1; width: 100%; max-height: 48.4375rem; } @media all and (max-width: 33.75rem) { .hero_container .hero-section.-product .row.img { aspect-ratio: 4/3; } } .hero_container .hero-section.-product .row.img .inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; position: relative; z-index: 1; padding-top: 11.25vw; padding-top: clamp(8rem, 11.25vw, 13.5rem); padding-bottom: 4.16667vw; padding-bottom: clamp(2.625rem, 4.16667vw, 5rem); } @media all and (min-width: 33.8125rem) { .hero_container .hero-section.-product .row.img .inner { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } } @media all and (max-width: 33.75rem) { .hero_container .hero-section.-product .row.img .inner { padding-top: 10rem; padding-top: clamp(5rem, 8.333vw, 10rem); padding-bottom: 0; } } .hero_container .hero-section.-product .row.img .inner .headline h1 { font-size: 3.4375rem; font-size: clamp(1.375rem, 2.865vw, 3.4375rem); line-height: 1.27; } @media all and (min-width: 33.8125rem) { .hero_container .hero-section.-product .row.img .inner .headline h1 { padding-right: 40%; } } .hero_container .hero-section.-product .row.img .inner p { color: #ffffff; } .hero_container .hero-section.-product .row.img .inner .ce_text { width: 45.85%; margin-top: 2.75rem; margin-top: clamp(1rem, 2.3vw, 2.75rem); } .hero_container .hero-section.-product .row.img .featured-img { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; position: absolute; right: 6.875%; bottom: -4.1667vw; bottom: clamp(-5rem, -4.1667vw, -1.5rem); z-index: 2; width: 32.25%; max-width: 38.75rem; -webkit-box-sizing: content-box; box-sizing: content-box; } @media all and (max-width: 33.75rem) { .hero_container .hero-section.-product .row.img .featured-img { width: 50%; left: 0; right: 0; margin-left: auto; margin-right: auto; } } .hero_container .hero-section.-product .row.img .featured-img .overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } @media all and (min-width: 701px) { .hero_container .hero-section.-product .row.img .featured-img .overlay { opacity: 0; } } .hero_container .hero-section.-product .row.img .featured-img .overlay .tooltip_container { list-style: none; margin: 0; padding: 0; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } @media all and (max-width: 43.75rem) { .hero_container .hero-section.-product .row.img .featured-img .overlay .tooltip_container li .tooltip-content { top: 0 !important; bottom: auto !important; } } .hero_container .hero-section.-product .row.img .featured-img .overlay .tooltip_container li button { width: 2.92vw; height: 2.92vw; width: clamp(2rem, 2.92vw, 3.5rem); height: clamp(2rem, 2.92vw, 3.5rem); background-color: #91C020; -webkit-transition: all 0.35s ease-in; transition: all 0.35s ease-in; } .hero_container .hero-section.-product .row.img .featured-img .overlay .tooltip_container li button svg { min-width: 1rem; } .hero_container .hero-section.-product .row.img .featured-img .overlay .tooltip_container li button:before, .hero_container .hero-section.-product .row.img .featured-img .overlay .tooltip_container li button:after { background-color: #ffffff; } @media (hover: hover) { .hero_container .hero-section.-product .row.img .featured-img .overlay .tooltip_container li button:hover { background-color: #82ac1c; border-color: #ffffff; } } @media all and (max-width: 33.75rem) { .hero_container .hero-section.-product .row.img .featured-img .overlay .tooltip_container li .tooltip-content { width: 45vw; -webkit-transform: translateX(50%) scale(0, 1); transform: translateX(50%) scale(0, 1); -webkit-transform-origin: top center; transform-origin: top center; } .hero_container .hero-section.-product .row.img .featured-img .overlay .tooltip_container li.active .tooltip-content { -webkit-transform: translateX(50%) scale(1, 1); transform: translateX(50%) scale(1, 1); } } .hero_container .hero-section.-product .row.img .featured-img .overlay .icon_container { list-style: none; margin: 0; padding: 0; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; } .hero_container .hero-section.-product .row.img .featured-img .overlay .icon_container li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 4.2vw; height: 4.2vw; width: clamp(2rem, 4.2vw, 5rem); height: clamp(2rem, 4.2vw, 5rem); border-radius: 100%; overflow: hidden; background-color: #007ac3; } .hero_container .hero-section.-product .row.img .featured-img .overlay .icon_container li svg { width: 60%; } .hero_container .hero-section.-product .row.img .featured-img .overlay .icon_container li svg path, .hero_container .hero-section.-product .row.img .featured-img .overlay .icon_container li svg rect, .hero_container .hero-section.-product .row.img .featured-img .overlay .icon_container li svg circle { fill: #ffffff !important; } .hero_container .hero-section.-product .row.img .bg-img:before { bottom: auto; height: 45%; background: -webkit-gradient(linear, left bottom, left top, from(rgba(15, 45, 78, 0)), to(#000000)); background: linear-gradient(0deg, rgba(15, 45, 78, 0) 0%, #000000 100%); opacity: 0.46; } .hero_container .hero-section.-product .row.img .bg-img:after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; top: auto; height: 55%; background: transparent -webkit-gradient(linear, left top, left bottom, from(rgba(15, 45, 78, 0)), to(#000000)); background: transparent linear-gradient(180deg, rgba(15, 45, 78, 0) 0%, #000000 100%); opacity: 0.51; } @media all and (max-width: 33.75rem) { .hero_container .hero-section.-product .row.img { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .hero_container .hero-section.-product .row.img .inner h1, .hero_container .hero-section.-product .row.img .inner p, .hero_container .hero-section.-product .row.img .inner li a, .hero_container .hero-section.-product .row.img .inner li span { color: #000000; } .hero_container .hero-section.-product .row.img .inner svg path { fill: #000000; } .hero_container .hero-section.-product .row.img .inner .ce_text { width: 100%; } .hero_container .hero-section.-product .row.img .img-block { position: relative; aspect-ratio: 4/3; } } @media all and (min-width: 701px) { .hero_container .hero-section.-product.featuredSFX .row.img .featured-img .overlay { -webkit-transform: translateY(250%); transform: translateY(250%); } } .hero_container .hero-section.-simple .inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; position: relative; z-index: 1; min-height: 100%; padding-left: 0; padding-right: 0; padding-top: 14.35vw; padding-top: clamp(9.0625rem, 14.35vw, 17.1875rem); padding-bottom: 9.15vw; padding-bottom: clamp(4.6875rem, 9.15vw, 10.9375rem); } .hero_container .hero-section.-simple .inner .headline { padding-left: 21.615vw; padding-right: 21.615vw; padding-left: clamp(6rem, 21.615vw, 25.9375rem); padding-right: clamp(6rem, 21.615vw, 25.9375rem); margin-bottom: 2.75rem; margin-bottom: clamp(1rem, 2.3vw, 2.75rem); } @media all and (max-width: 39.375rem) { .hero_container .hero-section.-simple .inner .headline { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .hero_container .hero-section.-simple .inner .headline h1 { font-size: 3.4375rem; font-size: clamp(1.375rem, 2.865vw, 3.4375rem); line-height: 1.273; text-align: center; } .hero_container .hero-section.-simple .inner .headline .mod_breadcrumb { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .hero_container .hero-section.-simple .inner h1, .hero_container .hero-section.-simple .inner p, .hero_container .hero-section.-simple .inner li a, .hero_container .hero-section.-simple .inner li span { color: #000000; } .hero_container .hero-section.-simple .inner svg path { fill: #000000; } .hero_container .hero-section.-simple .inner p { text-align: center; } .hero_container .hero-section.-simple .inner .ce_text { padding-left: 25.78125%; padding-left: clamp(5.3125rem, 25.78125%, 30.9375rem); padding-right: 25.78125%; padding-right: clamp(5.3125rem, 25.78125%, 30.9375rem); } @media all and (max-width: 58.125rem) { .hero_container .hero-section.-simple .inner .ce_text { padding-left: 21.615vw; padding-right: 21.615vw; padding-left: clamp(6rem, 21.615vw, 25.9375rem); padding-right: clamp(6rem, 21.615vw, 25.9375rem); } } @media all and (max-width: 58.125rem) and (max-width: 39.375rem) { .hero_container .hero-section.-simple .inner .ce_text { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .hero_container .hero-section.-simple .deco { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; } .hero_container .hero-section.-simple .deco .graphic { position: absolute; opacity: 0.35; } .hero_container .hero-section.-simple .deco .graphic svg { width: 100%; height: auto; display: block; } .hero_container .hero-section.-simple .deco .graphic.-l { top: 0; width: 53.125%; } .hero_container .hero-section.-simple .deco .graphic.-r { top: 0; width: 35%; } .hero_container .hero-section.-simple .deco.-l-s .graphic.-l { left: 0; } .hero_container .hero-section.-simple .deco.-l-s .graphic.-r { right: 0; } .hero_container .hero-section.-simple .deco.-s-l .graphic.-r { left: 0; } .hero_container .hero-section.-simple .deco.-s-l .graphic.-l { right: 0; } .hero_container .hero-section.-simple .deco.-s-l .graphic svg { -webkit-transform: scaleX(-1); transform: scaleX(-1); } .hero_container .hero-section.-simple .deco { margin-top: -5%; } .hero_container .stoerer_container.-sticky { bottom: 4.9vw; bottom: clamp(3.5625rem, 4.9vw, 5.875rem); } .cases.-text-container h2.label { font-size: 1.25rem; font-size: clamp(1rem, 1.1vw, 1.25rem); } .cases.-text-container h2.label span { display: inline; font-family: "FFDINLight", sans-serif; font-weight: 100; } .cases.-text-container h2.label span:nth-of-type(1) { font-family: "FFDINBold", sans-serif; font-weight: 700; } .cases.-text-container .ce_text.hl { -ms-hyphens: auto; hyphens: auto; word-break: normal; } .cases.-text-container .ce_text.hl h2, .cases.-text-container .ce_text.hl h3, .cases.-text-container .ce_text.hl h4, .cases.-text-container .ce_text.hl h5, .cases.-text-container .ce_text.hl h6 { font-size: 2.5rem; font-size: clamp(1.25rem, 2.1vw, 2.5rem); line-height: 1.25; font-family: "FFDINLight", sans-serif; font-weight: 100; } .cases.-text-container .ce_text.hl h2 strong, .cases.-text-container .ce_text.hl h3 strong, .cases.-text-container .ce_text.hl h4 strong, .cases.-text-container .ce_text.hl h5 strong, .cases.-text-container .ce_text.hl h6 strong { font-family: "FFDINBold", sans-serif; } .cases.-text-container .ce_text + .ce_text { margin-top: 2.5rem; margin-top: clamp(1.25rem, 2.1vw, 2.5rem); } .cases.-text-container.img-txt, .cases.-text-container.txt-img { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media all and (max-width: 39.375rem) { .cases.-text-container.img-txt, .cases.-text-container.txt-img { padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } } @media all and (max-width: 39.375rem) and (max-width: 58.125rem) { .cases.-text-container.img-txt, .cases.-text-container.txt-img { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .cases.-text-container.img-txt .col, .cases.-text-container.txt-img .col { width: 100%; } .cases.-text-container.img-txt .col.text, .cases.-text-container.txt-img .col.text { padding-top: 2.5rem; padding-top: clamp(1.25rem, 2.1vw, 2.5rem); padding-bottom: 2.5rem; padding-bottom: clamp(1.25rem, 2.1vw, 2.5rem); } .cases.-text-container.img-txt .col.image.multiple > div + div, .cases.-text-container.txt-img .col.image.multiple > div + div { margin-top: 10rem; margin-top: clamp(5rem, 8.333vw, 10rem); } @media all and (max-width: 39.375rem) { .cases.-text-container.img-txt .col.image.multiple > div + div, .cases.-text-container.txt-img .col.image.multiple > div + div { margin-top: 1.5rem; } } @media all and (min-width: 39.4375rem) { .cases.-text-container.img-txt .col.text, .cases.-text-container.txt-img .col.text { width: 60%; } .cases.-text-container.img-txt .col.image, .cases.-text-container.txt-img .col.image { width: 40%; } .cases.-text-container.img-txt .col.image.multiple .img-high, .cases.-text-container.txt-img .col.image.multiple .img-high { width: 68.2%; } } .cases.-text-container.img-txt.bg-col, .cases.-text-container.txt-img.bg-col { position: relative; } .cases.-text-container.img-txt.bg-col .col.text, .cases.-text-container.txt-img.bg-col .col.text { padding-top: 0; padding-bottom: 0; } .cases.-text-container.img-txt.bg-col .col.text:after, .cases.-text-container.txt-img.bg-col .col.text:after { content: ""; position: absolute; top: 0; left: 0; z-index: -1; height: 100%; width: 100vw; background-color: #EFF5F8; } .cases.-text-container.img-txt.bg-col:not(.multipleImg), .cases.-text-container.txt-img.bg-col:not(.multipleImg) { padding-bottom: 5rem; padding-bottom: clamp(2.5rem, 4.1665vw, 5rem); } .cases.-text-container.img-txt.bg-col.multipleImg .col.text, .cases.-text-container.txt-img.bg-col.multipleImg .col.text { position: relative; padding-top: 5rem; padding-top: clamp(2.5rem, 4.1665vw, 5rem); padding-bottom: 5rem; padding-bottom: clamp(2.5rem, 4.1665vw, 5rem); } @media all and (max-width: 39.375rem) { .cases.-text-container.img-txt.bg-col, .cases.-text-container.txt-img.bg-col { padding-top: 5rem; padding-top: clamp(2.5rem, 4.1665vw, 5rem); } .cases.-text-container.img-txt.bg-col .col.text, .cases.-text-container.txt-img.bg-col .col.text { position: unset; margin-bottom: 2.5rem; margin-bottom: clamp(1.25rem, 2.1vw, 2.5rem); } .cases.-text-container.img-txt.bg-col .col.text:after, .cases.-text-container.txt-img.bg-col .col.text:after { height: 80%; } } .cases.-text-container.img-txt.shift-img, .cases.-text-container.txt-img.shift-img { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } @media all and (max-width: 39.375rem) { .cases.-text-container.img-txt.shift-img, .cases.-text-container.txt-img.shift-img { padding-top: 5rem; padding-top: clamp(2.5rem, 4.1665vw, 5rem); } } .cases.-text-container.img-txt.shift-img .col.text, .cases.-text-container.txt-img.shift-img .col.text { padding-top: 5rem; padding-top: clamp(2.5rem, 4.1665vw, 5rem); padding-bottom: 5rem; padding-bottom: clamp(2.5rem, 4.1665vw, 5rem); } @media all and (max-width: 39.375rem) { .cases.-text-container.img-txt.shift-img .col.text, .cases.-text-container.txt-img.shift-img .col.text { padding-top: 0; } } @media all and (min-width: 39.4375rem) { .cases.-text-container.img-txt.shift-img .col.image, .cases.-text-container.txt-img.shift-img .col.image { -webkit-transform: translateY(16%); transform: translateY(16%); } } @media all and (min-width: 120.0625rem) { .cases.-text-container.img-txt.shift-img .col.image, .cases.-text-container.txt-img.shift-img .col.image { -webkit-transform: translateY(7.75rem); transform: translateY(7.75rem); } } @media all and (min-width: 39.4375rem) { .cases.-text-container.img-txt.shift-img + .-text-container, .cases.-text-container.txt-img.shift-img + .-text-container { padding-top: 17.75rem; padding-top: clamp(8rem, 14.8vw, 17.75rem); } } .cases.-text-container.img-txt { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } @media all and (max-width: 39.375rem) { .cases.-text-container.img-txt { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } } @media all and (min-width: 64.0625rem) { .cases.-text-container.img-txt .col.text { padding-left: 10.9375vw; padding-left: clamp(2.5rem, 10.9375vw, 13.125rem); } } @media all and (min-width: 39.4375rem) { .cases.-text-container.img-txt .col.text { padding-right: 12.15vw; padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } } @media all and (min-width: 39.4375rem) and (max-width: 58.125rem) { .cases.-text-container.img-txt .col.text { padding-right: 7.5vw; padding-right: clamp(2rem, 7.5vw, 4.375rem); } } @media all and (min-width: 39.4375rem) and (max-width: 64rem) { .cases.-text-container.img-txt .col.text { padding-left: 3.96vw; } } @media all and (max-width: 39.375rem) { .cases.-text-container.img-txt .col.text { margin-top: 2.5rem; margin-top: clamp(1.25rem, 2.1vw, 2.5rem); } } @media all and (max-width: 39.375rem) { .cases.-text-container.txt-img { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } @media all and (min-width: 64.0625rem) { .cases.-text-container.txt-img .col.text { padding-right: 10.9375vw; padding-right: clamp(2.5rem, 10.9375vw, 13.125rem); } } @media all and (min-width: 39.4375rem) { .cases.-text-container.txt-img .col.text { padding-left: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); } } @media all and (min-width: 39.4375rem) and (max-width: 58.125rem) { .cases.-text-container.txt-img .col.text { padding-left: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); } } @media all and (min-width: 39.4375rem) and (max-width: 64rem) { .cases.-text-container.txt-img .col.text { padding-right: 3.96vw; } } .cases.-text-container.no-img { padding-top: 5rem; padding-top: clamp(2.5rem, 4.1665vw, 5rem); padding-bottom: 5rem; padding-bottom: clamp(2.5rem, 4.1665vw, 5rem); } .cases.-text-container.no-img.bg-col { background-color: #EFF5F8; } .cases.-text-container.no-img.darkBg * { color: #ffffff; } .cases.-text-container.no-img .inner { padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } @media all and (max-width: 58.125rem) { .cases.-text-container.no-img .inner { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } @media all and (min-width: 39.4375rem) { .cases.-text-container.no-img .inner.limitWidth { padding-right: 20%; } .cases.-text-container.no-img .inner.limitWidth .ce_text:not(.hl) { padding-right: 10%; } } @media all and (min-width: 47.9375rem) { .cases.-text-container.no-img .inner > .cols:not(.ce_text) { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .cases.-text-container.no-img .inner > .cols:not(.ce_text) > .ce_text { width: 50%; } .cases.-text-container.no-img .inner > .cols:not(.ce_text) > .ce_text:nth-child(1) { margin-right: 1.75rem; margin-right: clamp(1rem, 1.45vw, 1.75rem); } .cases.-text-container.no-img .inner > .cols:not(.ce_text) > .ce_text:nth-child(2) { margin-left: 1.75rem; margin-left: clamp(1rem, 1.45vw, 1.75rem); } .cases.-text-container.no-img .inner > .cols:not(.ce_text) > .ce_text + .ce_text { margin-top: 0; } } .cases.-text-container.no-img.bg-img { position: relative; } .cases.-text-container.no-img.bg-img .inner { position: relative; z-index: 1; } .cases.-text-container.no-img.bg-img .bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; } .cases.-text-container.no-img.bg-img .bg:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: transparent -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.8784313725)), color-stop(100%, rgba(11, 36, 55, 0.1921568627)), to(rgba(11, 36, 55, 0))); background: transparent linear-gradient(0deg, rgba(0, 0, 0, 0.8784313725) 0%, rgba(11, 36, 55, 0.1921568627) 100%, rgba(11, 36, 55, 0) 100%); mix-blend-mode: multiply; opacity: 0.63; } .cases.-text-container.no-img.bg-img .bg .image_container { width: 100%; height: 100%; } .cases.-text-container.no-img.bg-img .bg .image_container img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } .special-headline h1, .special-headline h2, .special-headline h3, .special-headline h4, .special-headline h5, .special-headline h6, .special-headline div { line-height: 1.125; } .special-headline h1 span, .special-headline h2 span, .special-headline h3 span, .special-headline h4 span, .special-headline h5 span, .special-headline h6 span, .special-headline div span { display: block; line-height: inherit; } .special-headline h1:before, .special-headline h1:after, .special-headline h2:before, .special-headline h2:after, .special-headline h3:before, .special-headline h3:after, .special-headline h4:before, .special-headline h4:after, .special-headline h5:before, .special-headline h5:after, .special-headline h6:before, .special-headline h6:after, .special-headline div:before, .special-headline div:after { content: none; } .special-headline h1.inline span, .special-headline h2.inline span, .special-headline h3.inline span, .special-headline h4.inline span, .special-headline h5.inline span, .special-headline h6.inline span, .special-headline div.inline span { display: inline; } .special-headline.center { text-align: center; } .special-headline.align-grid { padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } @media all and (max-width: 58.125rem) { .special-headline.align-grid { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } /* .mod_article { .inside { & > .special-headline { @include outer-width; } } } */ .teaser-block-container { padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } @media all and (max-width: 58.125rem) { .teaser-block-container { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .teaser-block-container .teaser-list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; width: calc(100% + 4.375vw); margin-left: -2.1875vw; } @media all and (min-width: 120.0625rem) { .teaser-block-container .teaser-list { width: calc(100% + 5.25rem); margin-left: -2.625rem; } } @media all and (max-width: 58.125rem) { .teaser-block-container .teaser-list { width: calc(100% + 2.5rem); margin-left: -1.25rem; } } .teaser-block-container .teaser-list.quadro-cols .teaser { width: 25%; } @media all and (min-width: 78.1875rem) { .teaser-block-container .teaser-list.quadro-cols .teaser:nth-child(n+5) { margin-top: 5rem; margin-top: clamp(2.5rem, 4.1665vw, 5rem); } } @media all and (min-width: 33.8125rem) and (max-width: 78.125rem) { .teaser-block-container .teaser-list.quadro-cols .teaser { width: 50%; } .teaser-block-container .teaser-list.quadro-cols .teaser:nth-child(n+3) { margin-top: 5rem; margin-top: clamp(2.5rem, 4.1665vw, 5rem); } } @media all and (max-width: 33.75rem) { .teaser-block-container .teaser-list.quadro-cols .teaser { width: 100%; } .teaser-block-container .teaser-list.quadro-cols .teaser + .teaser { margin-top: 5rem; margin-top: clamp(2.5rem, 4.1665vw, 5rem); } } .teaser-block-container .teaser-list.triple-cols .teaser { width: 33.333%; } @media all and (min-width: 58.1875rem) { .teaser-block-container .teaser-list.triple-cols .teaser:nth-child(n+4) { margin-top: 5rem; margin-top: clamp(2.5rem, 4.1665vw, 5rem); } } @media all and (min-width: 33.8125rem) and (max-width: 58.125rem) { .teaser-block-container .teaser-list.triple-cols .teaser { width: 50%; } .teaser-block-container .teaser-list.triple-cols .teaser:nth-child(n+3) { margin-top: 5rem; margin-top: clamp(2.5rem, 4.1665vw, 5rem); } } @media all and (max-width: 33.75rem) { .teaser-block-container .teaser-list.triple-cols .teaser { width: 100%; } .teaser-block-container .teaser-list.triple-cols .teaser + .teaser { margin-top: 5rem; margin-top: clamp(2.5rem, 4.1665vw, 5rem); } } .teaser-block-container .teaser-list.double-cols { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .teaser-block-container .teaser-list.double-cols .teaser { width: 33.333%; } @media all and (min-width: 78.1875rem) { .teaser-block-container .teaser-list.double-cols .teaser:nth-child(odd) { margin-left: 16.667%; } .teaser-block-container .teaser-list.double-cols .teaser:nth-child(even) { margin-right: 16.667%; } } @media all and (min-width: 33.8125rem) { .teaser-block-container .teaser-list.double-cols .teaser:nth-child(n+3) { margin-top: 5rem; margin-top: clamp(2.5rem, 4.1665vw, 5rem); } } @media all and (min-width: 33.8125rem) and (max-width: 78.125rem) { .teaser-block-container .teaser-list.double-cols .teaser { width: 50%; } } @media all and (max-width: 33.75rem) { .teaser-block-container .teaser-list.double-cols .teaser { width: 100%; } .teaser-block-container .teaser-list.double-cols .teaser + .teaser { margin-top: 5rem; margin-top: clamp(2.5rem, 4.1665vw, 5rem); } } .teaser-block-container .teaser-list .teaser { padding-left: 2.1875vw; padding-right: 2.1875vw; } @media all and (min-width: 120.0625rem) { .teaser-block-container .teaser-list .teaser { padding-left: 2.625rem; padding-right: 2.625rem; } } @media all and (max-width: 58.125rem) { .teaser-block-container .teaser-list .teaser { padding-left: 1.25rem; padding-right: 1.25rem; } } .teaser-block-container .teaser-list .teaser h2, .teaser-block-container .teaser-list .teaser h3, .teaser-block-container .teaser-list .teaser h4, .teaser-block-container .teaser-list .teaser h5, .teaser-block-container .teaser-list .teaser h6 { font-size: 2.1875rem; font-size: clamp(1.25rem, 1.85vw, 2.1875rem); /* a { font-family: $fontBold; color: inherit; line-height: 1.15; font-weight: normal; text-decoration: none; //span { line-height: 1; } @include transition-hover(color); @media (hover: hover) { &:hover { color: $main-col; } } } */ margin-bottom: 1.25rem; } .teaser-block-container .teaser-list .teaser h2 span, .teaser-block-container .teaser-list .teaser h3 span, .teaser-block-container .teaser-list .teaser h4 span, .teaser-block-container .teaser-list .teaser h5 span, .teaser-block-container .teaser-list .teaser h6 span { font-family: "FFDINLight", sans-serif; } .teaser-block-container .teaser-list .teaser .text p { word-break: normal; -ms-hyphens: auto; hyphens: auto; } .teaser-block-container .teaser-list .teaser .image { position: relative; margin-bottom: 2.95vw; margin-bottom: clamp(1.75rem, 2.95vw, 3.5rem); /* @media all and (max-width: 33.75rem) { padding-left: 15%; padding-right: 15%; } */ } .teaser-block-container .teaser-list .teaser .image a { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; } @media (hover: hover) { .teaser-block-container .teaser-list .teaser .image:hover + .info h2 a { color: #007ac3; } .teaser-block-container .teaser-list .teaser .image:hover + .info a.button { color: #007ac3; border-color: #007ac3; } } .teaser-block-container .teaser-list .teaser .button.toPublic { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border: none; } .teaser-block-container .teaser-list .teaser .button.toPublic > div { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .teaser-block-container .teaser-list .teaser .button.toPublic > div span { font-family: "FFDINBold", sans-serif; border-bottom: 1px solid #000000; margin-top: 2px; margin-bottom: 2px; } .teaser-block-container .teaser-list .teaser .button.toPublic > div span:nth-of-type(1) { padding-right: 0.2em; } .teaser-block-container .teaser-list .teaser .button.toPublic svg { width: 26px; display: block; margin-right: 8px; } .teaser-block-container .teaser-list .teaser.bg .image > .image_container { position: relative; z-index: 1; } .teaser-block-container .teaser-list .teaser.bg .bg-img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; } .teaser-block-container .teaser-list .teaser.bg .bg-img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } .teaser-block-container .teaser-list .teaser.new .image { position: relative; background-color: #EFF5F8; } .teaser-block-container .teaser-list .teaser.new .image .new-sticker { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; bottom: 0; right: 1.98vw; right: clamp(16px, 1.98vw, 38px); -webkit-transform: translateY(50%); transform: translateY(50%); width: 5.416667vw; width: clamp(60px, 5.416667vw, 104px); aspect-ratio: 1/1; border-radius: 100%; background-color: #007ac3; } .teaser-block-container .teaser-list .teaser.new .image .new-sticker span { display: block; font-family: "FFDINBold", sans-serif; font-size: 1.75rem; font-size: clamp(1.25rem, 1.46vw, 1.75rem); font-size: 1.46vw; font-size: clamp(0.85rem, 1.46vw, 1.75rem); color: #ffffff; line-height: 1.15; white-space: nowrap; margin-top: 0.3125vw; margin-top: clamp(4px, 0.3125vw, 6px); } .teaser-block-container .teaser-list .teaser.new .image .new-sticker span.--m { font-size: 1.25vw; font-size: clamp(0.875rem, 1.25vw, 1.5rem); } .teaser-block-container .teaser-list .teaser.new .image .new-sticker span.--s { font-size: 1.041666667vw; font-size: clamp(0.625rem, 1.041666667vw, 1.25rem); } @media all and (max-width: 33.75rem) { .teaser-block-container .teaser-list .teaser.new .image .new-sticker { width: 14.815vw; width: clamp(48px, 14.815vw, 80px); } } .teaser-special-container .teaser-list { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[20]; grid-template-columns: repeat(20, 1fr); -webkit-box-align: start; -ms-flex-align: start; align-items: start; } .teaser-special-container .teaser-list > div { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .teaser-special-container .teaser-list.start-left .col, .teaser-special-container .teaser-list.start-right .col { position: relative; display: -ms-grid; display: grid; -ms-grid-row: 1; grid-row-start: 1; } .teaser-special-container .teaser-list.start-left .col:nth-child(1), .teaser-special-container .teaser-list.start-right .col:nth-child(1) { z-index: 1; } .teaser-special-container .teaser-list.start-right .col .intro { padding-left: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); } @media all and (max-width: 58.125rem) { .teaser-special-container .teaser-list.start-right .col .intro { padding-left: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); } } .teaser-special-container .teaser-list.start-right .col:nth-child(1) { -ms-grid-column: 1; grid-column-start: 1; -ms-grid-column-span: 12; grid-column-end: 13; -ms-grid-columns: (1fr)[12]; grid-template-columns: repeat(12, 1fr); } .teaser-special-container .teaser-list.start-right .col:nth-child(1) .teaser.count1 { -ms-grid-column: 1; grid-column-start: 1; -ms-grid-column-span: 10; grid-column-end: 11; padding-left: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); } @media all and (max-width: 58.125rem) { .teaser-special-container .teaser-list.start-right .col:nth-child(1) .teaser.count1 { padding-left: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); } } .teaser-special-container .teaser-list.start-right .col:nth-child(1) .teaser.count1 .info { padding-right: 20%; } .teaser-special-container .teaser-list.start-right .col:nth-child(1) .teaser.count2 { -ms-grid-column: 1; grid-column-start: 1; -ms-grid-column-span: 8; grid-column-end: 9; } .teaser-special-container .teaser-list.start-right .col:nth-child(1) .teaser.count2 .info { padding-left: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); } @media all and (max-width: 58.125rem) { .teaser-special-container .teaser-list.start-right .col:nth-child(1) .teaser.count2 .info { padding-left: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); } } .teaser-special-container .teaser-list.start-right .col:nth-child(2) { -ms-grid-column: 11; grid-column-start: 11; -ms-grid-column-span: 10; grid-column-end: 21; -ms-grid-columns: (1fr)[10]; grid-template-columns: repeat(10, 1fr); z-index: 1; } .teaser-special-container .teaser-list.start-right .col:nth-child(2) .teaser.count1 { -ms-grid-column: 4; grid-column-start: 4; -ms-grid-column-span: 8; grid-column-end: 12; } .teaser-special-container .teaser-list.start-right .col:nth-child(2) .teaser.count1 .info { padding-right: 12.15vw; padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } @media all and (max-width: 58.125rem) { .teaser-special-container .teaser-list.start-right .col:nth-child(2) .teaser.count1 .info { padding-right: 7.5vw; padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .teaser-special-container .teaser-list.start-right .col:nth-child(2) .teaser.count2 { -ms-grid-column: 2; grid-column-start: 2; -ms-grid-column-span: 10; grid-column-end: 12; padding-right: 12.15vw; padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } @media all and (max-width: 58.125rem) { .teaser-special-container .teaser-list.start-right .col:nth-child(2) .teaser.count2 { padding-right: 7.5vw; padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .teaser-special-container .teaser-list.start-right .col:nth-child(2) .teaser.count2 .info { padding-right: 20%; } .teaser-special-container .teaser-list.start-left .col .intro { padding-right: 12.15vw; padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } @media all and (max-width: 58.125rem) { .teaser-special-container .teaser-list.start-left .col .intro { padding-right: 7.5vw; padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .teaser-special-container .teaser-list.start-left .col:nth-child(1) { -ms-grid-column: 9; grid-column-start: 9; -ms-grid-column-span: 12; grid-column-end: 21; -ms-grid-columns: (1fr)[12]; grid-template-columns: repeat(12, 1fr); z-index: 1; } .teaser-special-container .teaser-list.start-left .col:nth-child(1) .teaser.count1 { -ms-grid-column: 3; grid-column-start: 3; -ms-grid-column-span: 10; grid-column-end: 13; padding-right: 12.15vw; padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } @media all and (max-width: 58.125rem) { .teaser-special-container .teaser-list.start-left .col:nth-child(1) .teaser.count1 { padding-right: 7.5vw; padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .teaser-special-container .teaser-list.start-left .col:nth-child(1) .teaser.count1 .info { padding-right: 20%; } .teaser-special-container .teaser-list.start-left .col:nth-child(1) .teaser.count2 { -ms-grid-column: 5; grid-column-start: 5; -ms-grid-column-span: 8; grid-column-end: 13; } .teaser-special-container .teaser-list.start-left .col:nth-child(1) .teaser.count2 .info { padding-right: 12.15vw; padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } @media all and (max-width: 58.125rem) { .teaser-special-container .teaser-list.start-left .col:nth-child(1) .teaser.count2 .info { padding-right: 7.5vw; padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .teaser-special-container .teaser-list.start-left .col:nth-child(2) { -ms-grid-column: 1; grid-column-start: 1; -ms-grid-column-span: 10; grid-column-end: 11; -ms-grid-columns: (1fr)[10]; grid-template-columns: repeat(10, 1fr); } .teaser-special-container .teaser-list.start-left .col:nth-child(2) .teaser.count1 { -ms-grid-column: 1; grid-column-start: 1; -ms-grid-column-span: 7; grid-column-end: 8; } .teaser-special-container .teaser-list.start-left .col:nth-child(2) .teaser.count1 .info { padding-left: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); } @media all and (max-width: 58.125rem) { .teaser-special-container .teaser-list.start-left .col:nth-child(2) .teaser.count1 .info { padding-left: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); } } .teaser-special-container .teaser-list.start-left .col:nth-child(2) .teaser.count2 { -ms-grid-column: 1; grid-column-start: 1; -ms-grid-column-span: 9; grid-column-end: 10; padding-left: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); } @media all and (max-width: 58.125rem) { .teaser-special-container .teaser-list.start-left .col:nth-child(2) .teaser.count2 { padding-left: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); } } .teaser-special-container .teaser-list.start-left .col:nth-child(2) .teaser.count2 .info { padding-right: 20%; } @media all and (min-width: 39.4375rem) { .teaser-special-container .teaser-list .col.no-intro { padding-top: 25vw; } } .teaser-special-container .teaser-list .col .intro { -ms-grid-column: 1; grid-column-start: 1; -ms-grid-column-span: 12; grid-column-end: 13; padding-top: 8.4375rem; padding-bottom: 10rem; padding-top: clamp(3.75rem, 7.1vw, 8.4375rem); padding-bottom: clamp(5rem, 8.35vw, 10rem); } @media all and (max-width: 39.375rem) { .teaser-special-container .teaser-list .col .intro { padding-top: 0; padding-bottom: 3.75rem; } } .teaser-special-container .teaser-list .col .teaser h2 { font-size: 2.5rem; font-size: clamp(1.25rem, 2.1vw, 2.5rem); line-height: 1.125; margin-top: 3rem; margin-top: clamp(1.75rem, 2.5vw, 3rem); margin-bottom: 1.125rem; margin-bottom: clamp(0.75rem, 0.9375vw, 1.125rem); } .teaser-special-container .teaser-list .col .teaser + .teaser { margin-top: 5rem; margin-top: clamp(2.5rem, 4.1665vw, 5rem); } @media all and (max-width: 39.375rem) { .teaser-special-container .teaser-list .col .teaser + .teaser { margin-top: 5rem; margin-top: clamp(2.5rem, 4.1665vw, 5rem); } } @media all and (max-width: 39.375rem) { .teaser-special-container .teaser-list .col + .col { margin-top: 5rem; margin-top: clamp(2.5rem, 4.1665vw, 5rem); } } @media all and (max-width: 39.375rem) { .teaser-special-container .teaser-list { display: block; padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } } @media all and (max-width: 39.375rem) and (max-width: 58.125rem) { .teaser-special-container .teaser-list { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } @media all and (max-width: 39.375rem) { .teaser-special-container .teaser-list.start-left .col .intro, .teaser-special-container .teaser-list.start-right .col .intro { padding-left: 0; padding-right: 0; } .teaser-special-container .teaser-list.start-left .col:nth-child(1), .teaser-special-container .teaser-list.start-left .col:nth-child(2), .teaser-special-container .teaser-list.start-right .col:nth-child(1), .teaser-special-container .teaser-list.start-right .col:nth-child(2) { display: block; } .teaser-special-container .teaser-list.start-left .col:nth-child(1) .teaser.count1, .teaser-special-container .teaser-list.start-left .col:nth-child(1) .teaser.count2, .teaser-special-container .teaser-list.start-left .col:nth-child(2) .teaser.count1, .teaser-special-container .teaser-list.start-left .col:nth-child(2) .teaser.count2, .teaser-special-container .teaser-list.start-right .col:nth-child(1) .teaser.count1, .teaser-special-container .teaser-list.start-right .col:nth-child(1) .teaser.count2, .teaser-special-container .teaser-list.start-right .col:nth-child(2) .teaser.count1, .teaser-special-container .teaser-list.start-right .col:nth-child(2) .teaser.count2 { padding-left: 0; padding-right: 0; } .teaser-special-container .teaser-list.start-left .col:nth-child(1) .teaser.count1 .info, .teaser-special-container .teaser-list.start-left .col:nth-child(1) .teaser.count2 .info, .teaser-special-container .teaser-list.start-left .col:nth-child(2) .teaser.count1 .info, .teaser-special-container .teaser-list.start-left .col:nth-child(2) .teaser.count2 .info, .teaser-special-container .teaser-list.start-right .col:nth-child(1) .teaser.count1 .info, .teaser-special-container .teaser-list.start-right .col:nth-child(1) .teaser.count2 .info, .teaser-special-container .teaser-list.start-right .col:nth-child(2) .teaser.count1 .info, .teaser-special-container .teaser-list.start-right .col:nth-child(2) .teaser.count2 .info { padding-left: 0; padding-right: 0; } } @media all and (min-width: 39.4375rem) { .teaser-extended-container { padding-left: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); } } @media all and (min-width: 39.4375rem) and (max-width: 58.125rem) { .teaser-extended-container { padding-left: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); } } .teaser-extended-container .teaser .image-block { position: relative; padding-bottom: 4.375rem; padding-bottom: clamp(2.75rem, 3.65vw, 4.375rem); } .teaser-extended-container .teaser .image-block .featured-img { position: absolute; left: 0; bottom: 0; z-index: 1; width: 42.85%; } .teaser-extended-container .teaser .image-block .bg-img { position: relative; } .teaser-extended-container .teaser .image-block .bg-img svg { position: absolute; top: 3.65vw; top: clamp(2.1875rem, 3.65vw, 4.375rem); right: 0; width: 3.5vw; width: clamp(1.5rem, 3.5vw, 4.1875rem); height: auto; display: block; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); right: 3.65vw; right: clamp(2.1875rem, 3.65vw, 4.375rem); } .teaser-extended-container .teaser .image-block .bg-img svg path { fill: #ffffff !important; } .teaser-extended-container .teaser .image-block a { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; } .teaser-extended-container .teaser .text-block { padding-right: 25.78125%; padding-right: clamp(5.3125rem, 25.78125%, 30.9375rem); margin-top: 5.42vw; margin-top: clamp(3.75rem, 5.42vw, 6.5rem); } .teaser-extended-container .teaser .text-block h2 { margin-bottom: 1.98vw; margin-bottom: clamp(1.125rem, 1.98vw, 2.375rem); } @media all and (max-width: 58.125rem) { .teaser-extended-container .teaser .text-block { padding-right: 12.15vw; padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } } @media all and (max-width: 58.125rem) and (max-width: 58.125rem) { .teaser-extended-container .teaser .text-block { padding-right: 7.5vw; padding-right: clamp(2rem, 7.5vw, 4.375rem); } } @media all and (max-width: 39.375rem) { .teaser-extended-container .teaser .text-block { padding-left: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); } } @media all and (max-width: 39.375rem) and (max-width: 58.125rem) { .teaser-extended-container .teaser .text-block { padding-left: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); } } .teaser-bg-container .teaser { position: relative; } .teaser-bg-container .teaser .text-block { padding-left: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); } @media all and (max-width: 58.125rem) { .teaser-bg-container .teaser .text-block { padding-left: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); } } .teaser-bg-container .teaser .image-block { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; } .teaser-bg-container .teaser .image-block:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; } .teaser-bg-container .teaser .image-block .image_container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; } .teaser-bg-container .teaser .image-block .image_container img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } .teaser-bg-container .teaser .image-block svg { position: absolute; top: 3.65vw; top: clamp(2.1875rem, 3.65vw, 4.375rem); right: 0; width: 3.5vw; width: clamp(1.5rem, 3.5vw, 4.1875rem); height: auto; display: block; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); z-index: 2; right: 3.65vw; right: clamp(2.1875rem, 3.65vw, 4.375rem); } .teaser-bg-container .teaser .image-block svg path { fill: #ffffff !important; } .teaser-bg-container .teaser.style01 .text-block { padding-right: 25.78125%; padding-right: clamp(5.3125rem, 25.78125%, 30.9375rem); padding-top: 16.25vw; padding-top: clamp(10rem, 16.25vw, 19.5rem); padding-bottom: 9.65vw; padding-bottom: clamp(5.75rem, 9.65vw, 11.5625rem); } @media all and (max-width: 58.125rem) { .teaser-bg-container .teaser.style01 .text-block { padding-right: 12.15vw; padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } } @media all and (max-width: 58.125rem) and (max-width: 58.125rem) { .teaser-bg-container .teaser.style01 .text-block { padding-right: 7.5vw; padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .teaser-bg-container .teaser.style01 > a { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; } .teaser-bg-container .teaser.style02 .text-block { padding-top: 16.25vw; padding-top: clamp(7.5rem, 11.98vw, 14.375rem); padding-bottom: 9.65vw; padding-bottom: clamp(5.75rem, 10.5vw, 12.5rem); } .teaser-bg-container .teaser.style02 .text-block .ce_text { padding-right: 58%; } @media all and (max-width: 58.125rem) { .teaser-bg-container .teaser.style02 .text-block .ce_text { padding-right: 25.78125%; padding-right: clamp(5.3125rem, 25.78125%, 30.9375rem); } } @media all and (max-width: 39.375rem) { .teaser-bg-container .teaser.style02 .text-block .ce_text { padding-right: 12.15vw; padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } } @media all and (max-width: 39.375rem) and (max-width: 58.125rem) { .teaser-bg-container .teaser.style02 .text-block .ce_text { padding-right: 7.5vw; padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .teaser-bg-container .teaser:not(.lightBg) .text-block * { color: #ffffff; } .teaser-bg-container .teaser:not(.lightBg) .text-block .ce_text a.button { border-color: #ffffff; } .teaser-bg-container .teaser:not(.lightBg) .image-block:before { background: -webkit-gradient(linear, left top, right top, from(rgba(11, 36, 55, 0.8784313725)), color-stop(84%, rgba(11, 36, 55, 0.1921568627)), to(rgba(11, 36, 55, 0))); background: linear-gradient(90deg, rgba(11, 36, 55, 0.8784313725) 0%, rgba(11, 36, 55, 0.1921568627) 84%, rgba(11, 36, 55, 0) 100%); mix-blend-mode: multiply; opacity: 0.51; } .teaser-bg-container .teaser.lightBg .image-block:before { background: -webkit-gradient(linear, left top, right top, from(#eff5f8), color-stop(28%, rgba(239, 245, 248, 0.8745098039)), color-stop(80%, rgba(239, 245, 248, 0)), to(rgba(239, 245, 248, 0))); background: linear-gradient(90deg, #eff5f8 0%, rgba(239, 245, 248, 0.8745098039) 28%, rgba(239, 245, 248, 0) 80%, rgba(239, 245, 248, 0) 100%); } @media all and (max-width: 58.125rem) { .teaser-bg-container .teaser.lightBg .image-block:before { background: -webkit-gradient(linear, left top, right top, from(#eff5f8), color-stop(55%, rgba(239, 245, 248, 0.8745098039)), color-stop(100%, rgba(239, 245, 248, 0)), to(rgba(239, 245, 248, 0))); background: linear-gradient(90deg, #eff5f8 0%, rgba(239, 245, 248, 0.8745098039) 55%, rgba(239, 245, 248, 0) 100%, rgba(239, 245, 248, 0) 100%); } } @media all and (max-width: 39.375rem) { .teaser-bg-container .teaser.lightBg .image-block:after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #f8fcfe; opacity: 0.5; } } .teaser-bg-container .teaser.lightBg .image-block svg path { fill: #000000 !important; } @media all and (max-width: 39.375rem) { .teaser-bg-container.spacing-left { padding-left: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); } } @media all and (max-width: 39.375rem) and (max-width: 58.125rem) { .teaser-bg-container.spacing-left { padding-left: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); } } @media all and (max-width: 39.375rem) { .teaser-bg-container.spacing-right { padding-right: 12.15vw; padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } } @media all and (max-width: 39.375rem) and (max-width: 58.125rem) { .teaser-bg-container.spacing-right { padding-right: 7.5vw; padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .teaser-bg-container.spacing-left .teaser.style02 .text-block .ce_text, .teaser-bg-container.spacing-right .teaser.style02 .text-block .ce_text { padding-right: 50%; } @media all and (max-width: 58.125rem) { .teaser-bg-container.spacing-left .teaser.style02 .text-block .ce_text, .teaser-bg-container.spacing-right .teaser.style02 .text-block .ce_text { padding-right: 12.15vw; padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } } @media all and (max-width: 58.125rem) and (max-width: 58.125rem) { .teaser-bg-container.spacing-left .teaser.style02 .text-block .ce_text, .teaser-bg-container.spacing-right .teaser.style02 .text-block .ce_text { padding-right: 7.5vw; padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .teaser-linklist-container { padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } @media all and (max-width: 58.125rem) { .teaser-linklist-container { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .teaser-linklist-container .teaser-list { list-style: none; margin: 0; padding: 0; } .teaser-linklist-container .teaser-list li { border-bottom: 2px solid #000000; } .teaser-linklist-container .teaser-list li a, .teaser-linklist-container .teaser-list li button { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; text-decoration: none; padding-top: 1.5rem; padding-bottom: 0.8125rem; cursor: pointer; } .teaser-linklist-container .teaser-list li a > div, .teaser-linklist-container .teaser-list li button > div { font-size: 3.125rem; font-size: clamp(1.375rem, 2.61vw, 3.125rem); font-family: "FFDINBold", sans-serif; line-height: 1.15; color: #000000; text-align: left; margin-right: 0.5rem; -webkit-transition: color 0.35s ease-in; transition: color 0.35s ease-in; } .teaser-linklist-container .teaser-list li a > div span, .teaser-linklist-container .teaser-list li button > div span { font-family: "FFDINLight", sans-serif; } .teaser-linklist-container .teaser-list li a svg, .teaser-linklist-container .teaser-list li button svg { width: 2.3vw; width: clamp(1.5rem, 2.3vw, 2.75rem); height: auto; display: block; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .teaser-linklist-container .teaser-list li a svg path, .teaser-linklist-container .teaser-list li button svg path { fill: #000000; -webkit-transition: fill 0.35s ease-in; transition: fill 0.35s ease-in; } .teaser-linklist-container .teaser-list li a.ext svg, .teaser-linklist-container .teaser-list li button.ext svg { -webkit-transform: rotate(0); transform: rotate(0); } @media (hover: hover) { .teaser-linklist-container .teaser-list li a:hover > div, .teaser-linklist-container .teaser-list li button:hover > div { color: #007ac3 !important; } .teaser-linklist-container .teaser-list li a:hover svg path, .teaser-linklist-container .teaser-list li button:hover svg path { fill: #007ac3 !important; } } .teaser-linklist-container .teaser-list.anchor li button { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; outline: none; background: none; padding-left: 0; } .teaser-linklist-container .teaser-list.anchor li button svg { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .nav-teaser { position: relative; } .nav-teaser .image.new { position: relative; background-color: #EFF5F8; } .nav-teaser .image.new .new-sticker { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; bottom: 0; right: 1.98vw; right: clamp(16px, 1.98vw, 38px); -webkit-transform: translateY(50%); transform: translateY(50%); width: 5.416667vw; width: clamp(60px, 5.416667vw, 104px); aspect-ratio: 1/1; border-radius: 100%; background-color: #007ac3; } .nav-teaser .image.new .new-sticker span { display: block; font-family: "FFDINBold", sans-serif; font-size: 1.75rem; font-size: clamp(1.25rem, 1.46vw, 1.75rem); font-size: 1.46vw; font-size: clamp(0.85rem, 1.46vw, 1.75rem); color: #ffffff; line-height: 1.15; white-space: nowrap; margin-top: 0.3125vw; margin-top: clamp(4px, 0.3125vw, 6px); } .nav-teaser .image.new .new-sticker span.--m { font-size: 1.25vw; font-size: clamp(0.875rem, 1.25vw, 1.5rem); } .nav-teaser .image.new .new-sticker span.--s { font-size: 1.041666667vw; font-size: clamp(0.625rem, 1.041666667vw, 1.25rem); } @media all and (max-width: 33.75rem) { .nav-teaser .image.new .new-sticker { width: 14.815vw; width: clamp(48px, 14.815vw, 80px); } } .nav-teaser .info { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-top: 1.875vw; margin-top: clamp(18px, 1.875vw, 36px); border-bottom: 2px solid #000000; } .nav-teaser .info .h2 { margin-bottom: 0.8333vw; margin-bottom: clamp(8px, 0.8333vw, 16px); } .nav-teaser .info .h2 span { -webkit-transition: color 0.35s ease-in; transition: color 0.35s ease-in; } .nav-teaser .info svg { -ms-flex-negative: 0; flex-shrink: 0; max-width: 35px; width: 1.823vw; width: clamp(20px, 1.823vw, 35px); margin-bottom: 1.146vw; margin-bottom: clamp(12px, 1.146vw, 22px); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .nav-teaser .info svg path { -webkit-transition: fill 0.35s ease-in; transition: fill 0.35s ease-in; } .nav-teaser a { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; } @media (hover: hover) { .nav-teaser:hover .info .h2 span { color: #007ac3; } .nav-teaser:hover .info svg path { fill: #007ac3; } } .hyperlink.back { margin-bottom: 0 !important; } .hyperlink.back a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; text-decoration: none; padding-top: 2.5rem; padding-top: clamp(1.5rem, 2.1vw, 2.5rem); padding-bottom: 2.5rem; padding-bottom: clamp(1.5rem, 2.1vw, 2.5rem); padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); background-color: #006daf; cursor: pointer; -webkit-transition: background-color 0.35s ease-in; transition: background-color 0.35s ease-in; } @media all and (max-width: 58.125rem) { .hyperlink.back a { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .hyperlink.back a > div { font-size: 1.125rem; font-size: clamp(1rem, 0.9375vw, 1.125rem); font-family: "FFDINBold", sans-serif; line-height: 1.15; color: #ffffff; -webkit-transition: color 0.35s ease-in; transition: color 0.35s ease-in; } .hyperlink.back a > div span { font-family: "FFDINLight", sans-serif; } .hyperlink.back a svg { width: 1.25rem; width: clamp(1rem, 1.1vw, 1.25rem); height: auto; display: block; -webkit-transform: rotate(45deg) scale(-1); transform: rotate(45deg) scale(-1); margin-right: 0.75rem; } .hyperlink.back a svg path { fill: #ffffff; -webkit-transition: fill 0.35s ease-in; transition: fill 0.35s ease-in; } @media (hover: hover) { .hyperlink.back a:hover { background-color: #C6DAED; } .hyperlink.back a:hover > div { color: #006daf !important; } .hyperlink.back a:hover svg path { fill: #006daf !important; } } .benefits_block h2, .iconlist-container h2 { font-size: 2.5rem; font-size: clamp(1.25rem, 2.1vw, 2.5rem); color: #ffffff; line-height: 1.15; text-align: center; position: relative; display: block; margin-bottom: 2.8125rem; margin-bottom: clamp(1.5rem, 2.35vw, 2.8125rem); } .benefits_block ul, .iconlist-container ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .benefits_block ul li, .iconlist-container ul li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; width: 20%; } .benefits_block ul li:nth-of-type(n+6), .iconlist-container ul li:nth-of-type(n+6) { margin-top: 3.75rem; margin-top: clamp(1.75rem, 3.125vw, 3.75rem); } @media all and (max-width: 930px) { .benefits_block ul li, .iconlist-container ul li { width: 33.333%; } .benefits_block ul li:nth-of-type(n+4), .iconlist-container ul li:nth-of-type(n+4) { margin-top: 3.75rem; margin-top: clamp(1.75rem, 3.125vw, 3.75rem); } } @media all and (max-width: 540px) { .benefits_block ul li, .iconlist-container ul li { width: 50%; } .benefits_block ul li:nth-of-type(n+3), .iconlist-container ul li:nth-of-type(n+3) { margin-top: 2.8125rem; margin-top: clamp(1.5rem, 2.35vw, 2.8125rem); } } .benefits_block ul li span.icon, .iconlist-container ul li span.icon { display: block; position: relative; border: 1px solid #ffffff; border-radius: 100%; width: 45%; } .benefits_block ul li span.icon:before, .iconlist-container ul li span.icon:before { content: ""; display: block; padding-top: 100%; } .benefits_block ul li span.icon > .ratio, .iconlist-container ul li span.icon > .ratio { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .benefits_block ul li span.icon > .ratio svg, .iconlist-container ul li span.icon > .ratio svg { width: 80%; } .benefits_block ul li span.icon > .ratio svg path, .benefits_block ul li span.icon > .ratio svg polygon, .benefits_block ul li span.icon > .ratio svg rect, .benefits_block ul li span.icon > .ratio svg circle, .iconlist-container ul li span.icon > .ratio svg path, .iconlist-container ul li span.icon > .ratio svg polygon, .iconlist-container ul li span.icon > .ratio svg rect, .iconlist-container ul li span.icon > .ratio svg circle { fill: #ffffff; } .benefits_block ul li span.label, .iconlist-container ul li span.label { display: block; margin-top: 1rem; font-size: 1rem; line-height: 1.35; color: #ffffff; text-align: center; padding-left: 0.75rem; padding-right: 0.75rem; } .benefits-container ul { list-style: none; margin: 0; padding: 0; margin-top: 2.5rem; } .benefits-container ul li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .benefits-container ul li .icon { -ms-flex-negative: 0; flex-shrink: 0; width: 3.25vw; width: clamp(2rem, 3.25vw, 3.875rem); margin-right: 1.25vw; margin-right: clamp(1rem, 1.25vw, 1.5rem); } .benefits-container ul li .icon svg { width: 100%; height: auto; display: block; } .benefits-container ul li .label { font-size: 1.125rem; font-size: clamp(1rem, 0.9375vw, 1.125rem); font-family: "FFDINBold", sans-serif; word-break: normal; -ms-hyphens: auto; hyphens: auto; max-width: 21.875rem; } .benefits-container ul li.col-blue .label { color: #007ac3; } .benefits-container ul li.col-blue .icon svg path { fill: #007ac3 !important; } .benefits-container ul li.col-green .label { color: #91C020; } .benefits-container ul li.col-green .icon svg path { fill: #91C020 !important; } .benefits-container ul li + li { margin-top: 2rem; margin-top: 2rem; } .text-container.no-img { padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } @media all and (max-width: 58.125rem) { .text-container.no-img { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .text-container.no-img.centerText h2, .text-container.no-img.centerText h3, .text-container.no-img.centerText h4, .text-container.no-img.centerText h5, .text-container.no-img.centerText h6, .text-container.no-img.centerText p, .text-container.no-img.centerText li { text-align: center; } .text-container.no-img .inner { display: block; } .text-container.no-img .inner .list-container { margin-top: 2.87vw; margin-top: clamp(1.75rem, 2.87vw, 3.4375rem); } .text-container.no-img .inner .list-container .teaser-linklist-container { padding-left: 0; padding-right: 0; } .text-container.no-img .inner .list-container .teaser-linklist-container .teaser-list { max-width: 57.5%; min-width: -webkit-min-content; min-width: -moz-min-content; min-width: min-content; } .text-container.no-img .inner .list-container .teaser-linklist-container .teaser-list li a { padding-right: 1.25rem; padding-right: clamp(1rem, 1.1vw, 1.25rem); } .text-container.no-img .inner .list-container .teaser-linklist-container .teaser-list li a > div { font-size: 1.125rem; font-size: clamp(1rem, 0.9375vw, 1.125rem); } .text-container.no-img .inner .list-container .teaser-linklist-container .teaser-list li svg { width: 1.25rem; width: clamp(1rem, 1.1vw, 1.25rem); } .text-container.no-img .inner .list-container .download-container .download-list { list-style: none; margin: 0; padding: 0; } @media all and (min-width: 43.8125rem) { .text-container.no-img .inner .list-container .download-container .download-list { max-width: 57.5%; } } .text-container.no-img .inner .list-container .download-container .download-list li a { padding-right: 1.25rem; padding-right: clamp(1rem, 1.1vw, 1.25rem); } .text-container.no-img .inner .list-container .download-container .download-list li a > div { font-size: 1.125rem; font-size: clamp(1rem, 0.9375vw, 1.125rem); font-family: "FFDINBold", sans-serif; line-height: 1.15; color: #000000; -webkit-transition: color 0.35s ease-in; transition: color 0.35s ease-in; } .text-container.no-img .inner .list-container .download-container .download-list li svg { width: 1.25rem; width: clamp(1rem, 1.1vw, 1.25rem); } .text-container.no-img.alignCols { padding-left: 0; padding-right: 0; } @media all and (min-width: 46.9375rem) { .text-container.no-img.alignCols .inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } .text-container.no-img.alignCols .inner > *:nth-child(odd) { padding-left: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); width: 45.85%; } } @media all and (min-width: 46.9375rem) and (max-width: 58.125rem) { .text-container.no-img.alignCols .inner > *:nth-child(odd) { padding-left: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); } } @media all and (min-width: 46.9375rem) { .text-container.no-img.alignCols .inner > *:nth-child(even) { padding-right: 12.15vw; padding-right: clamp(2.5rem, 12.15vw, 14.5rem); width: 54.15%; padding-left: 8.275%; } } @media all and (min-width: 46.9375rem) and (max-width: 58.125rem) { .text-container.no-img.alignCols .inner > *:nth-child(even) { padding-right: 7.5vw; padding-right: clamp(2rem, 7.5vw, 4.375rem); } } @media all and (min-width: 46.9375rem) { .text-container.no-img.alignCols .inner .ce_text.cols { -webkit-columns: 1; -moz-columns: 1; columns: 1; } } @media all and (max-width: 46.875rem) { .text-container.no-img.alignCols .inner { padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } } @media all and (max-width: 46.875rem) and (max-width: 58.125rem) { .text-container.no-img.alignCols .inner { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .text-container.no-img.spacing-right { padding-right: 25.78125%; padding-right: clamp(5.3125rem, 25.78125%, 30.9375rem); } @media all and (max-width: 47.9375rem) { .text-container.no-img.spacing-right { padding-right: 12.15vw; padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } } @media all and (max-width: 47.9375rem) and (max-width: 58.125rem) { .text-container.no-img.spacing-right { padding-right: 7.5vw; padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .text-container.no-img.spacing-left { padding-left: 25.78125%; padding-left: clamp(5.3125rem, 25.78125%, 30.9375rem); text-align: right; } @media all and (max-width: 47.9375rem) { .text-container.no-img.spacing-left { padding-left: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); text-align: left; } } @media all and (max-width: 47.9375rem) and (max-width: 58.125rem) { .text-container.no-img.spacing-left { padding-left: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); } } .text-container.no-img.spacing-left .teaser-linklist-container, .text-container.no-img.spacing-left .download-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .text-container.no-img.spacing-left .teaser-linklist-container > *, .text-container.no-img.spacing-left .download-container > * { width: 100%; } .text-container.no-img.darkBg { color: #ffffff; } .text-container.no-img.darkBg .col.txt h2, .text-container.no-img.darkBg .col.txt h3, .text-container.no-img.darkBg .col.txt h4, .text-container.no-img.darkBg .col.txt h5, .text-container.no-img.darkBg .col.txt h6, .text-container.no-img.darkBg .col.txt p { color: #ffffff; } .text-container.no-img.darkBg .col.txt a.button { color: #ffffff; border-color: #ffffff; } .text-container.no-img.has-bg-col, .text-container.no-img.has-bg-img { position: relative; padding-top: 19.375rem; padding-top: clamp(7.5rem, 16.15vw, 19.375rem); padding-bottom: 19.375rem; padding-bottom: clamp(7.5rem, 16.15vw, 19.375rem); } .text-container.no-img.has-bg-col .bg, .text-container.no-img.has-bg-img .bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; } .text-container.no-img.has-bg-col .bg { background-color: #f8fcfe; } .text-container.no-img.has-bg-img { position: relative; } .text-container.no-img.has-bg-img .bg:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: transparent -webkit-gradient(linear, left top, left bottom, from(#0B2437), color-stop(13%, rgba(11, 36, 55, 0.9607843137)), to(rgba(11, 36, 55, 0))); background: transparent linear-gradient(180deg, #0B2437 0%, rgba(11, 36, 55, 0.9607843137) 13%, rgba(11, 36, 55, 0) 100%); opacity: 0.76; } .text-container.no-img.has-bg-img .bg .image_container { width: 100%; height: 100%; } .text-container.no-img.has-bg-img .bg .image_container img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } .text-container .inner { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; z-index: 1; } .text-container .inner .headline + .ce_text { margin-top: 0.75rem; } .text-container .inner .col { position: relative; z-index: 1; width: 50%; } .text-container .inner .col.img { position: relative; z-index: 2; } .text-container .inner .col.img .tooltip_container { list-style: none; margin: 0; padding: 0; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; } .text-container .inner .col.img .image_container, .text-container .inner .col.img .tooltip_container { max-width: 60rem; margin-left: auto; margin-right: auto; } .text-container .inner .col.txt { padding-top: 2.5rem; padding-top: clamp(1.5rem, 2.1vw, 2.5rem); } .text-container .inner .col.txt:not(.hasList) { padding-bottom: 2.5rem; padding-bottom: clamp(1.5rem, 2.1vw, 2.5rem); } .text-container .inner .col.txt h2, .text-container .inner .col.txt h3, .text-container .inner .col.txt h4, .text-container .inner .col.txt h5, .text-container .inner .col.txt h6 { font-size: 2.5rem; font-size: clamp(1.25rem, 2.1vw, 2.5rem); line-height: 1.125; margin-bottom: 1.875rem; margin-bottom: clamp(1rem, 1.5625vw, 1.875rem); } @media all and (min-width: 39.4375rem) { .text-container .inner .col.txt .list-container { padding-right: 15%; } } @media all and (max-width: 39.375rem) { .text-container .inner .col.img, .text-container .inner .col.txt { width: 100%; } .text-container .inner .col.txt { padding-bottom: 0; } } .text-container .inner.darkBg { color: #ffffff; } .text-container .inner.darkBg .col.txt h2, .text-container .inner.darkBg .col.txt h3, .text-container .inner.darkBg .col.txt h4, .text-container .inner.darkBg .col.txt h5, .text-container .inner.darkBg .col.txt h6, .text-container .inner.darkBg .col.txt p { color: #ffffff; } .text-container .inner.darkBg .col.txt a.button { color: #ffffff; border-color: #ffffff; } @media (hover: hover) { .text-container .inner.darkBg .col.txt a.button:hover { color: #007ac3; border-color: #007ac3; } } .text-container .inner.align-top { padding-top: 7.5rem; padding-top: clamp(3.5rem, 6.25vw, 7.5rem); } .text-container .inner.align-top .col.txt { padding-top: 7.6vw; padding-top: clamp(5.890625rem, 7.6vw, 9.0625rem); padding-bottom: 0; } .text-container .inner.align-center { padding-top: 7.5rem; padding-top: clamp(3.5rem, 6.25vw, 7.5rem); } .text-container .inner.align-center .col.txt { padding-top: 0; padding-bottom: 0; } @media all and (max-width: 39.375rem) { .text-container .inner.align-center .col.txt { padding-top: 2.5rem; padding-top: clamp(1.25rem, 2.1vw, 2.5rem); padding-bottom: 2.5rem; padding-bottom: clamp(1.25rem, 2.1vw, 2.5rem); } } .text-container .inner.align-bottom { padding-top: 7.5rem; padding-top: clamp(3.5rem, 6.25vw, 7.5rem); } .text-container .inner.align-bottom .col.txt { padding-top: 0; } @media all and (min-width: 39.4375rem) { .text-container .inner.align-bottom .col.txt:not(.hasList) { padding-bottom: 7.6vw; padding-bottom: clamp(4.5rem, 7.6vw, 9.0625rem); } } .text-container .inner.txt-img .col.txt { padding-left: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); } @media all and (max-width: 58.125rem) { .text-container .inner.txt-img .col.txt { padding-left: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); } } @media all and (min-width: 93.75rem) { .text-container .inner.txt-img .col.txt .ce_text { padding-right: 30%; } } @media all and (min-width: 39.4375rem) { .text-container .inner.txt-img .col.txt .ce_text { padding-right: 15%; } } @media all and (max-width: 39.375rem) { .text-container .inner.txt-img { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .text-container .inner.txt-img .col.txt { padding-right: 12.15vw; padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } } @media all and (max-width: 39.375rem) and (max-width: 58.125rem) { .text-container .inner.txt-img .col.txt { padding-right: 7.5vw; padding-right: clamp(2rem, 7.5vw, 4.375rem); } } @media all and (max-width: 39.375rem) { .text-container .inner.txt-img .col.img { margin-top: 5rem; margin-top: clamp(2.5rem, 4.1665vw, 5rem); } .text-container .inner.txt-img.reverse { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .text-container .inner.txt-img.reverse .col.img { margin-top: 0; margin-bottom: 5rem; margin-bottom: clamp(2.5rem, 4.1665vw, 5rem); } } .text-container .inner.img-txt { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } @media all and (min-width: 39.4375rem) { .text-container .inner.img-txt .col.txt { padding-right: 12.15vw; padding-right: clamp(2.5rem, 12.15vw, 14.5rem); padding-left: 5%; } } @media all and (min-width: 39.4375rem) and (max-width: 58.125rem) { .text-container .inner.img-txt .col.txt { padding-right: 7.5vw; padding-right: clamp(2rem, 7.5vw, 4.375rem); } } @media all and (max-width: 39.375rem) { .text-container .inner.img-txt { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .text-container .inner.img-txt .col.txt { padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } } @media all and (max-width: 39.375rem) and (max-width: 58.125rem) { .text-container .inner.img-txt .col.txt { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } @media all and (max-width: 39.375rem) { .text-container .inner.img-txt .col.img { margin-bottom: 5rem; margin-bottom: clamp(2.5rem, 4.1665vw, 5rem); } .text-container .inner.img-txt.reverse { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .text-container .inner.img-txt.reverse .col.img { margin-top: 5rem; margin-top: clamp(2.5rem, 4.1665vw, 5rem); margin-bottom: 0; } } @media all and (min-width: 39.4375rem) { .text-container .inner.align-top { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .text-container .inner.align-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .text-container .inner.align-bottom { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } } .text-container.has-bg-col, .text-container.has-bg-img { position: relative; } .text-container.has-bg-col .bg, .text-container.has-bg-img .bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; } .text-container.has-bg-col .txt-img.align-top.noImgOffset .col.txt, .text-container.has-bg-col .txt-img.align-top.noImgOffset + .bg, .text-container.has-bg-col .txt-img.align-bottom.noImgOffset .col.txt, .text-container.has-bg-col .txt-img.align-bottom.noImgOffset + .bg, .text-container.has-bg-col .img-txt.align-top.noImgOffset .col.txt, .text-container.has-bg-col .img-txt.align-top.noImgOffset + .bg, .text-container.has-bg-col .img-txt.align-bottom.noImgOffset .col.txt, .text-container.has-bg-col .img-txt.align-bottom.noImgOffset + .bg, .text-container.has-bg-img .txt-img.align-top.noImgOffset .col.txt, .text-container.has-bg-img .txt-img.align-top.noImgOffset + .bg, .text-container.has-bg-img .txt-img.align-bottom.noImgOffset .col.txt, .text-container.has-bg-img .txt-img.align-bottom.noImgOffset + .bg, .text-container.has-bg-img .img-txt.align-top.noImgOffset .col.txt, .text-container.has-bg-img .img-txt.align-top.noImgOffset + .bg, .text-container.has-bg-img .img-txt.align-bottom.noImgOffset .col.txt, .text-container.has-bg-img .img-txt.align-bottom.noImgOffset + .bg { margin-bottom: 0 !important; } @media all and (min-width: 39.4375rem) { .text-container.has-bg-col .txt-img.align-top .col.txt, .text-container.has-bg-col .txt-img.align-top + .bg, .text-container.has-bg-col .txt-img.align-bottom .col.txt, .text-container.has-bg-col .txt-img.align-bottom + .bg, .text-container.has-bg-col .img-txt.align-top .col.txt, .text-container.has-bg-col .img-txt.align-top + .bg, .text-container.has-bg-col .img-txt.align-bottom .col.txt, .text-container.has-bg-col .img-txt.align-bottom + .bg, .text-container.has-bg-img .txt-img.align-top .col.txt, .text-container.has-bg-img .txt-img.align-top + .bg, .text-container.has-bg-img .txt-img.align-bottom .col.txt, .text-container.has-bg-img .txt-img.align-bottom + .bg, .text-container.has-bg-img .img-txt.align-top .col.txt, .text-container.has-bg-img .img-txt.align-top + .bg, .text-container.has-bg-img .img-txt.align-bottom .col.txt, .text-container.has-bg-img .img-txt.align-bottom + .bg { margin-bottom: 9.65vw; margin-bottom: clamp(3.125rem, 9.65vw, 11.5625rem); } } @media all and (max-width: 39.375rem) { .text-container.has-bg-col .txt-img.align-bottom:not(.noImgOffset) + .bg, .text-container.has-bg-col .img-txt.align-bottom:not(.noImgOffset) + .bg, .text-container.has-bg-img .txt-img.align-bottom:not(.noImgOffset) + .bg, .text-container.has-bg-img .img-txt.align-bottom:not(.noImgOffset) + .bg { max-height: 85%; } } .text-container.has-bg-col .bg { background-color: #f8fcfe; } .text-container.has-bg-img { position: relative; } .text-container.has-bg-img .bg:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: -webkit-gradient(linear, left top, right top, from(rgba(11, 36, 55, 0.8784313725)), color-stop(84%, rgba(11, 36, 55, 0.1921568627)), to(rgba(11, 36, 55, 0))); background: linear-gradient(90deg, rgba(11, 36, 55, 0.8784313725) 0%, rgba(11, 36, 55, 0.1921568627) 84%, rgba(11, 36, 55, 0) 100%); opacity: 0.83; } .text-container.has-bg-img .bg .image_container { width: 100%; height: 100%; } .text-container.has-bg-img .bg .image_container img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } .text-container.has-bg-img .img-txt + .bg:before { -webkit-transform: scale(-1); transform: scale(-1); } .text-container.tt { position: relative; z-index: 2; } .text-container.outer-width { margin-left: 12.15vw; margin-right: 12.15vw; margin-left: clamp(2.5rem, 12.15vw, 14.5rem); margin-right: clamp(2.5rem, 12.15vw, 14.5rem); } @media all and (max-width: 58.125rem) { .text-container.outer-width { margin-left: 7.5vw; margin-right: 7.5vw; margin-left: clamp(2rem, 7.5vw, 4.375rem); margin-right: clamp(2rem, 7.5vw, 4.375rem); } } .text-container.outer-width.has-bg-img .inner.txt-img .col.txt { padding-left: 1.5625vw; padding-left: clamp(0.9375rem, 1.5625vw, 1.875rem); } .text-container.outer-width.has-bg-img .inner.img-txt .col.txt { padding-right: 1.5625vw; padding-right: clamp(0.9375rem, 1.5625vw, 1.875rem); } @media all and (max-width: 39.375rem) { .text-container.outer-width.has-bg-img .inner.txt-img .col.txt, .text-container.outer-width.has-bg-img .inner.img-txt .col.txt { padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } } @media all and (max-width: 39.375rem) and (max-width: 58.125rem) { .text-container.outer-width.has-bg-img .inner.txt-img .col.txt, .text-container.outer-width.has-bg-img .inner.img-txt .col.txt { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .text-container.outer-width:not(.has-bg-img) .inner { /* @media all and (max-width: 58.125rem) { @include flex-column; @include flex-v-center; &.reverse { @include flex-column-reverse; } &.txt-img, &.img-txt { .col { &.img, &.txt { width: 100%; } &.txt { @include flow-spacing-half(margin-top); margin-bottom: 0; } &.img { } } &.align-top, &.align-center, &.align-bottom { .col { &.txt { padding-bottom: 8.65vw; padding-bottom: clamp(2rem, 7.5vw, 4.375rem); } } & + .bg { margin-top: 9.65vw; margin-top: clamp(12.5rem, 25.81vw, 15rem); margin-bottom: 0; } } } } */ } .text-container.outer-width:not(.has-bg-img) .inner.txt-img .col.txt { padding-right: 1.5625vw; padding-right: clamp(0.9375rem, 1.5625vw, 1.875rem); padding-left: 0; } .text-container.outer-width:not(.has-bg-img) .inner.img-txt .col.txt { padding-left: 3.125rem; padding-left: clamp(1.25rem, 2.61vw, 3.125rem); padding-left: 1.5625vw; padding-left: clamp(0.9375rem, 1.5625vw, 1.875rem); padding-right: 0; } @media all and (max-width: 39.375rem) { .text-container.outer-width:not(.has-bg-img) .inner.txt-img .col, .text-container.outer-width:not(.has-bg-img) .inner.img-txt .col { padding: 0; } .text-container.outer-width:not(.has-bg-img) .inner.txt-img .col.txt { padding-right: 0; } .text-container.outer-width:not(.has-bg-img) .inner.txt-img .col.img { margin-top: 5rem; margin-top: clamp(2.5rem, 4.1665vw, 5rem); } .text-container.outer-width:not(.has-bg-img) .inner.txt-img .col.reverse.img { margin-top: 0; margin-bottom: 5rem; margin-bottom: clamp(2.5rem, 4.1665vw, 5rem); } .text-container.outer-width:not(.has-bg-img) .inner.img-txt .col.txt { padding-left: 0; } .text-container.outer-width:not(.has-bg-img) .inner.img-txt .col.img { margin-bottom: 5rem; margin-bottom: clamp(2.5rem, 4.1665vw, 5rem); } .text-container.outer-width:not(.has-bg-img) .inner.img-txt .col.reverse.img { margin-top: 5rem; margin-top: clamp(2.5rem, 4.1665vw, 5rem); margin-bottom: 0; } } .text-tile-container .inner { display: -webkit-box; display: -ms-flexbox; display: flex; } .text-tile-container .inner.align-top { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .text-tile-container .inner.align-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .text-tile-container .inner.align-bottom { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .text-tile-container .inner.img-fw .col.img { width: 45.85%; } .text-tile-container .inner.img-fw .col.txt { width: 54.15%; } .text-tile-container .inner.img-outerWidth .col.img { width: 54.15%; } .text-tile-container .inner.img-outerWidth .col.txt { width: 45.85%; } .text-tile-container .inner.txt-img { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .text-tile-container .inner.txt-img.img-fw .col.txt { padding-left: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: 8.275%; } @media all and (max-width: 58.125rem) { .text-tile-container .inner.txt-img.img-fw .col.txt { padding-left: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); } } .text-tile-container .inner.txt-img.img-outerWidth .col.img { padding-right: 12.15vw; padding-right: clamp(2.5rem, 12.15vw, 14.5rem); padding-left: 8.275%; } @media all and (max-width: 58.125rem) { .text-tile-container .inner.txt-img.img-outerWidth .col.img { padding-right: 7.5vw; padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .text-tile-container .inner.txt-img.img-outerWidth .col.txt { padding-left: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); } @media all and (max-width: 58.125rem) { .text-tile-container .inner.txt-img.img-outerWidth .col.txt { padding-left: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); } } .text-tile-container .inner.img-txt.img-fw .col.txt { padding-right: 12.15vw; padding-right: clamp(2.5rem, 12.15vw, 14.5rem); padding-left: 8.275%; } @media all and (max-width: 58.125rem) { .text-tile-container .inner.img-txt.img-fw .col.txt { padding-right: 7.5vw; padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .text-tile-container .inner.img-txt.img-outerWidth .col.img { padding-left: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: 8.275%; } @media all and (max-width: 58.125rem) { .text-tile-container .inner.img-txt.img-outerWidth .col.img { padding-left: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); } } .text-tile-container .inner.img-txt.img-outerWidth .col.txt { padding-right: 12.15vw; padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } @media all and (max-width: 58.125rem) { .text-tile-container .inner.img-txt.img-outerWidth .col.txt { padding-right: 7.5vw; padding-right: clamp(2rem, 7.5vw, 4.375rem); } } @media all and (max-width: 46.875rem) { .text-tile-container .inner.txt-img.img-fw .col.img, .text-tile-container .inner.txt-img.img-fw .col.txt, .text-tile-container .inner.txt-img.img-outerWidth .col.img, .text-tile-container .inner.txt-img.img-outerWidth .col.txt, .text-tile-container .inner.img-txt.img-fw .col.img, .text-tile-container .inner.img-txt.img-fw .col.txt, .text-tile-container .inner.img-txt.img-outerWidth .col.img, .text-tile-container .inner.img-txt.img-outerWidth .col.txt { width: 100%; } .text-tile-container .inner.txt-img { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .text-tile-container .inner.txt-img .col.img { margin-top: 5rem; margin-top: clamp(2.5rem, 4.1665vw, 5rem); } .text-tile-container .inner.txt-img.reverse { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .text-tile-container .inner.txt-img.reverse .col.img { margin-top: 0; margin-bottom: 5rem; margin-bottom: clamp(2.5rem, 4.1665vw, 5rem); } .text-tile-container .inner.txt-img.img-fw .col.txt { padding-right: 12.15vw; padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } } @media all and (max-width: 46.875rem) and (max-width: 58.125rem) { .text-tile-container .inner.txt-img.img-fw .col.txt { padding-right: 7.5vw; padding-right: clamp(2rem, 7.5vw, 4.375rem); } } @media all and (max-width: 46.875rem) { .text-tile-container .inner.txt-img.img-outerWidth .col.txt { padding-right: 12.15vw; padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } } @media all and (max-width: 46.875rem) and (max-width: 58.125rem) { .text-tile-container .inner.txt-img.img-outerWidth .col.txt { padding-right: 7.5vw; padding-right: clamp(2rem, 7.5vw, 4.375rem); } } @media all and (max-width: 46.875rem) { .text-tile-container .inner.txt-img.img-outerWidth .col.img { padding-left: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); } } @media all and (max-width: 46.875rem) and (max-width: 58.125rem) { .text-tile-container .inner.txt-img.img-outerWidth .col.img { padding-left: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); } } @media all and (max-width: 46.875rem) { .text-tile-container .inner.img-txt { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .text-tile-container .inner.img-txt .col.img { margin-bottom: 5rem; margin-bottom: clamp(2.5rem, 4.1665vw, 5rem); } .text-tile-container .inner.img-txt.reverse { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .text-tile-container .inner.img-txt.reverse .col.img { margin-top: 5rem; margin-top: clamp(2.5rem, 4.1665vw, 5rem); margin-bottom: 0; } .text-tile-container .inner.img-txt.img-fw .col.txt { padding-left: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); } } @media all and (max-width: 46.875rem) and (max-width: 58.125rem) { .text-tile-container .inner.img-txt.img-fw .col.txt { padding-left: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); } } @media all and (max-width: 46.875rem) { .text-tile-container .inner.img-txt.img-outerWidth .col.txt { padding-left: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); } } @media all and (max-width: 46.875rem) and (max-width: 58.125rem) { .text-tile-container .inner.img-txt.img-outerWidth .col.txt { padding-left: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); } } @media all and (max-width: 46.875rem) { .text-tile-container .inner.img-txt.img-outerWidth .col.img { padding-right: 12.15vw; padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } } @media all and (max-width: 46.875rem) and (max-width: 58.125rem) { .text-tile-container .inner.img-txt.img-outerWidth .col.img { padding-right: 7.5vw; padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .text-tile-container .inner .col.img.new .image { position: relative; background-color: #EFF5F8; padding-top: 5rem; padding-top: clamp(2.5rem, 4.1665vw, 5rem); padding-bottom: 5rem; padding-bottom: clamp(2.5rem, 4.1665vw, 5rem); } .text-tile-container .inner .col.img.new .image .new-sticker { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; bottom: 0; right: 1.98vw; right: clamp(16px, 1.98vw, 38px); -webkit-transform: translateY(50%); transform: translateY(50%); width: 5.416667vw; width: clamp(60px, 5.416667vw, 104px); aspect-ratio: 1/1; border-radius: 100%; background-color: #007ac3; } .text-tile-container .inner .col.img.new .image .new-sticker span { display: block; font-family: "FFDINBold", sans-serif; font-size: 1.75rem; font-size: clamp(1.25rem, 1.46vw, 1.75rem); font-size: 1.46vw; font-size: clamp(0.85rem, 1.46vw, 1.75rem); color: #ffffff; line-height: 1.15; white-space: nowrap; margin-top: 0.3125vw; margin-top: clamp(4px, 0.3125vw, 6px); } .text-tile-container .inner .col.img.new .image .new-sticker span.--m { font-size: 1.25vw; font-size: clamp(0.875rem, 1.25vw, 1.5rem); } .text-tile-container .inner .col.img.new .image .new-sticker span.--s { font-size: 1.041666667vw; font-size: clamp(0.625rem, 1.041666667vw, 1.25rem); } @media all and (max-width: 46.875rem) { .text-tile-container .inner .col.img.new .image .new-sticker { width: 14.815vw; width: clamp(48px, 14.815vw, 80px); } } .text-tile-container .inner .col.txt .content > h2, .text-tile-container .inner .col.txt .content > h3, .text-tile-container .inner .col.txt .content > h4, .text-tile-container .inner .col.txt .content > h5, .text-tile-container .inner .col.txt .content > h6 { font-size: 2.5rem; font-size: clamp(1.25rem, 2.1vw, 2.5rem); line-height: 1.125; } .text-tile-container .inner .col.txt .content .ce_text > h3, .text-tile-container .inner .col.txt .content .ce_text > h4, .text-tile-container .inner .col.txt .content .ce_text > h5, .text-tile-container .inner .col.txt .content .ce_text > h6 { margin-bottom: 1.875rem; margin-bottom: clamp(1rem, 1.5625vw, 1.875rem); } .text-tile-container .inner .col.txt .benefits-container { margin-top: 4.6875vw; margin-top: clamp(2.87rem, 4.6875vw, 5.625rem); } .txt-img-block-container { padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } @media all and (max-width: 58.125rem) { .txt-img-block-container { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .txt-img-block-container .txt-img-list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; width: calc(100% + 4.375vw); margin-left: -2.1875vw; } @media all and (min-width: 120.0625rem) { .txt-img-block-container .txt-img-list { width: calc(100% + 5.25rem); margin-left: -2.625rem; } } @media all and (max-width: 58.125rem) { .txt-img-block-container .txt-img-list { width: calc(100% + 2.5rem); margin-left: -1.25rem; } } .txt-img-block-container .txt-img-list.triple-cols .txt-img-block { width: 33.333%; } @media all and (min-width: 58.1875rem) { .txt-img-block-container .txt-img-list.triple-cols .txt-img-block:nth-child(n+4) { margin-top: 5rem; margin-top: clamp(2.5rem, 4.1665vw, 5rem); } } @media all and (min-width: 33.8125rem) and (max-width: 58.125rem) { .txt-img-block-container .txt-img-list.triple-cols .txt-img-block { width: 50%; } .txt-img-block-container .txt-img-list.triple-cols .txt-img-block:nth-child(n+3) { margin-top: 5rem; margin-top: clamp(2.5rem, 4.1665vw, 5rem); } } @media all and (max-width: 33.75rem) { .txt-img-block-container .txt-img-list.triple-cols .txt-img-block { width: 100%; } .txt-img-block-container .txt-img-list.triple-cols .txt-img-block + .txt-img-block { margin-top: 5rem; margin-top: clamp(2.5rem, 4.1665vw, 5rem); } } .txt-img-block-container .txt-img-list.double-cols .txt-img-block { width: 50%; } @media all and (min-width: 33.8125rem) { .txt-img-block-container .txt-img-list.double-cols .txt-img-block:nth-child(n+3) { margin-top: 5rem; margin-top: clamp(2.5rem, 4.1665vw, 5rem); } } @media all and (max-width: 33.75rem) { .txt-img-block-container .txt-img-list.double-cols .txt-img-block { width: 100%; } .txt-img-block-container .txt-img-list.double-cols .txt-img-block + .txt-img-block { margin-top: 5rem; margin-top: clamp(2.5rem, 4.1665vw, 5rem); } } .txt-img-block-container .txt-img-list .txt-img-block { padding-left: 2.1875vw; padding-right: 2.1875vw; } @media all and (min-width: 120.0625rem) { .txt-img-block-container .txt-img-list .txt-img-block { padding-left: 2.625rem; padding-right: 2.625rem; } } @media all and (max-width: 58.125rem) { .txt-img-block-container .txt-img-list .txt-img-block { padding-left: 1.25rem; padding-right: 1.25rem; } } .txt-img-block-container .txt-img-list .txt-img-block h2, .txt-img-block-container .txt-img-list .txt-img-block h3, .txt-img-block-container .txt-img-list .txt-img-block h4, .txt-img-block-container .txt-img-list .txt-img-block h5, .txt-img-block-container .txt-img-list .txt-img-block h6 { font-size: 2.1875rem; font-size: clamp(1.25rem, 1.85vw, 2.1875rem); margin-bottom: 0.625rem; } .txt-img-block-container .txt-img-list .txt-img-block h2 a, .txt-img-block-container .txt-img-list .txt-img-block h3 a, .txt-img-block-container .txt-img-list .txt-img-block h4 a, .txt-img-block-container .txt-img-list .txt-img-block h5 a, .txt-img-block-container .txt-img-list .txt-img-block h6 a { font-family: "FFDINBold", sans-serif; color: inherit; line-height: 1.125; text-decoration: none; } .txt-img-block-container .txt-img-list .txt-img-block h2 a, .txt-img-block-container .txt-img-list .txt-img-block h3 a, .txt-img-block-container .txt-img-list .txt-img-block h4 a, .txt-img-block-container .txt-img-list .txt-img-block h5 a, .txt-img-block-container .txt-img-list .txt-img-block h6 a { position: relative; display: block; } .txt-img-block-container .txt-img-list .txt-img-block h2 a span, .txt-img-block-container .txt-img-list .txt-img-block h3 a span, .txt-img-block-container .txt-img-list .txt-img-block h4 a span, .txt-img-block-container .txt-img-list .txt-img-block h5 a span, .txt-img-block-container .txt-img-list .txt-img-block h6 a span { display: block; position: absolute; top: 0; left: 0; overflow: hidden; -webkit-transform: translateY(100%); transform: translateY(100%); -webkit-transition: -webkit-transform 0.75s linear; transition: -webkit-transform 0.75s linear; transition: transform 0.75s linear; transition: transform 0.75s linear, -webkit-transform 0.75s linear; font-size: inherit; } .txt-img-block-container .txt-img-list .txt-img-block h2 a span:before, .txt-img-block-container .txt-img-list .txt-img-block h3 a span:before, .txt-img-block-container .txt-img-list .txt-img-block h4 a span:before, .txt-img-block-container .txt-img-list .txt-img-block h5 a span:before, .txt-img-block-container .txt-img-list .txt-img-block h6 a span:before { display: inline-block; content: attr(data-content); -webkit-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition: -webkit-transform 0.75s linear; transition: -webkit-transform 0.75s linear; transition: transform 0.75s linear; transition: transform 0.75s linear, -webkit-transform 0.75s linear; font-family: "FFDINBold", sans-serif; color: #007ac3; } @media (hover: hover) { .txt-img-block-container .txt-img-list .txt-img-block h2 a:hover span, .txt-img-block-container .txt-img-list .txt-img-block h3 a:hover span, .txt-img-block-container .txt-img-list .txt-img-block h4 a:hover span, .txt-img-block-container .txt-img-list .txt-img-block h5 a:hover span, .txt-img-block-container .txt-img-list .txt-img-block h6 a:hover span { -webkit-transform: translateY(0); transform: translateY(0); } .txt-img-block-container .txt-img-list .txt-img-block h2 a:hover span:before, .txt-img-block-container .txt-img-list .txt-img-block h3 a:hover span:before, .txt-img-block-container .txt-img-list .txt-img-block h4 a:hover span:before, .txt-img-block-container .txt-img-list .txt-img-block h5 a:hover span:before, .txt-img-block-container .txt-img-list .txt-img-block h6 a:hover span:before { -webkit-transform: translateY(0); transform: translateY(0); } } .txt-img-block-container .txt-img-list .txt-img-block p { word-break: normal; -ms-hyphens: auto; hyphens: auto; } .txt-img-block-container .txt-img-list .txt-img-block .image { position: relative; margin-bottom: clamp(1.75rem, 2.95vw, 3.5rem); /* @media all and (max-width: 33.75rem) { padding-left: 15%; padding-right: 15%; } */ } .txt-img-block-container .txt-img-list .txt-img-block .image a { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; } .txt-img-block-container .txt-img-list .txt-img-block.bg .image > .image_container { position: relative; z-index: 1; } .txt-img-block-container .txt-img-list .txt-img-block.bg .bg-img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; } .txt-img-block-container .txt-img-list .txt-img-block.bg .bg-img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } .text-container.has-icon .cols { display: -webkit-box; display: -ms-flexbox; display: flex; } .text-container.has-icon .cols.align-top { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .text-container.has-icon .cols.align-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .text-container.has-icon .cols.align-bottom { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .text-container.has-icon .cols .subcol.image { width: 17.1875vw; width: clamp(5rem, 17.1875vw, 15.625rem); -ms-flex-negative: 0; flex-shrink: 0; } .text-container.has-icon .cols .subcol:not(.image) { padding-left: 2.5rem; padding-left: clamp(1.5rem, 2.1vw, 2.5rem); -ms-flex-negative: 1; flex-shrink: 1; } .list-container { margin-top: 2.87vw; margin-top: clamp(1.75rem, 2.87vw, 3.4375rem); } .list-container .teaser-linklist-container { padding-left: 0; padding-right: 0; } .list-container .teaser-linklist-container .teaser-list li a, .list-container .teaser-linklist-container .teaser-list li button { padding-right: 1.25rem; padding-right: clamp(1rem, 1.1vw, 1.25rem); } .list-container .teaser-linklist-container .teaser-list li a > div, .list-container .teaser-linklist-container .teaser-list li button > div { font-size: 1.125rem; font-size: clamp(1rem, 0.9375vw, 1.125rem); } .list-container .teaser-linklist-container .teaser-list li svg { width: 1.25rem; width: clamp(1rem, 1.1vw, 1.25rem); } .list-container .download-container .download-list { list-style: none; margin: 0; padding: 0; } .list-container .download-container .download-list li a { padding-right: 1.25rem; padding-right: clamp(1rem, 1.1vw, 1.25rem); } .list-container .download-container .download-list li a > div { font-size: 1.125rem; font-size: clamp(1rem, 0.9375vw, 1.125rem); line-height: 1.15; color: #000000; -webkit-transition: color 0.35s ease-in; transition: color 0.35s ease-in; } .list-container .download-container .download-list li a > div span.title { font-family: "FFDINBold", sans-serif; } .list-container .download-container .download-list li a > div span.details { font-family: "FFDINLight", sans-serif; text-transform: uppercase; } .list-container .download-container .download-list li svg { width: 1.25rem; width: clamp(1rem, 1.1vw, 1.25rem); } .image-grid-gallery { padding-top: 10rem; padding-top: clamp(5rem, 8.333vw, 10rem); } @media all and (min-width: 48rem) { .image-grid-gallery { padding-bottom: 7.5rem; padding-bottom: clamp(3.75rem, 6.25vw, 7.5rem); } } @media all and (min-width: 48rem) { .image-grid-gallery .cols:not(.count_1) { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } } .image-grid-gallery .cols:not(.count_1) .col .video { position: relative; } .image-grid-gallery .cols:not(.count_1) .col .video.imgSquare { aspect-ratio: 1/1; } .image-grid-gallery .cols:not(.count_1) .col .video.imgHigh { aspect-ratio: 1/1.2; } .image-grid-gallery .cols:not(.count_1) .col .video button.play { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; outline: none; background: none; padding: 0; position: absolute; top: 50%; left: 50%; z-index: 1; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 7.5rem; width: clamp(3.5rem, 5vw, 7.5rem); } .image-grid-gallery .cols:not(.count_1) .col .video button.play svg { width: 100%; height: auto; display: block; } .image-grid-gallery .cols:not(.count_1) .col .video button.play svg .button-circle circle { opacity: 0.25; -webkit-transition: opacity 0.35s ease-in; transition: opacity 0.35s ease-in; } @media (hover: hover) { .image-grid-gallery .cols:not(.count_1) .col .video button.play:hover svg .button-circle circle { opacity: 0.75; } } .image-grid-gallery .cols:not(.count_1) .col video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } .image-grid-gallery .cols .col > * + * { margin-top: 7.5rem; margin-top: clamp(3.75rem, 6.25vw, 7.5rem); } .image-grid-gallery .cols .col .video { position: relative; } .image-grid-gallery .cols .col .video button.play { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; outline: none; background: none; padding: 0; position: absolute; top: 50%; left: 50%; z-index: 1; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 7.5rem; width: clamp(3.5rem, 5vw, 7.5rem); } .image-grid-gallery .cols .col .video button.play svg { width: 100%; height: auto; display: block; } .image-grid-gallery .cols .col .video button.play svg .button-circle circle { opacity: 0.25; -webkit-transition: opacity 0.35s ease-in; transition: opacity 0.35s ease-in; } @media (hover: hover) { .image-grid-gallery .cols .col .video button.play:hover svg .button-circle circle { opacity: 0.75; } } @media all and (min-width: 48rem) { .image-grid-gallery .cols .col { width: 50%; } .image-grid-gallery .cols .col .image.imgHigh { padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } } @media all and (min-width: 48rem) and (max-width: 58.125rem) { .image-grid-gallery .cols .col .image.imgHigh { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } @media all and (min-width: 48rem) { .image-grid-gallery .cols .col:nth-child(1) { padding-left: 3.75rem; padding-left: clamp(1.875rem, 3.125vw, 3.75rem); } .image-grid-gallery .cols .col:nth-child(1) .image.imgHigh { padding-left: 0; } .image-grid-gallery .cols .col:nth-last-child(1) { padding-right: 3.75rem; padding-right: clamp(1.875rem, 3.125vw, 3.75rem); } .image-grid-gallery .cols .col:nth-last-child(1) .image.imgHigh { padding-right: 0; } } @media all and (max-width: 47.9375rem) { .image-grid-gallery .cols .col + .col { margin-top: 5px; } .image-grid-gallery .cols .col .image + .image, .image-grid-gallery .cols .col .image + .video, .image-grid-gallery .cols .col .video + .image { margin-top: 5px; } } .image-grid-gallery .cols.count_1 .col { padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); width: 100%; padding-top: 0 !important; } @media all and (max-width: 58.125rem) { .image-grid-gallery .cols.count_1 .col { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .image-grid-gallery .cols.count_1 .col video { width: 100%; height: auto; display: block; } @media all and (min-width: 48rem) { .image-grid-gallery .cols .col:nth-child(1) { padding-top: 18.23vw; padding-top: clamp(150px, 18.23vw, 350px); } } blockquote { margin: 0; } blockquote p:nth-last-of-type(1) { margin-top: clamp(1.25rem, 1.5625vw, 1.875rem); } .quote .ce_text.hl blockquote { font-size: 2.5rem; font-size: clamp(1.25rem, 2.1vw, 2.5rem); } .quote .ce_text.hl blockquote p.cite { font-size: 1.125rem; font-size: clamp(1rem, 0.9375vw, 1.125rem); } .quote .ce_text:not(.hl) blockquote { font-size: 1.125rem; font-size: clamp(1rem, 0.9375vw, 1.125rem); line-height: 1.5; } .quote.hasGraphic .inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .quote.hasGraphic .inner .graphic svg { width: 4.792vw; width: clamp(32px, 4.792vw, 92px); margin-top: 0.82vw; margin-top: clamp(12px, 0.82vw, 24px); -ms-flex-negative: 0; flex-shrink: 0; } .quote.hasGraphic .inner .graphic svg path { fill: #007ac3; } .quote.hasGraphic.spacing-default .inner .graphic { padding-right: 3.385vw; padding-right: clamp(32px, 3.385vw, 65px); } .quote.hasGraphic.spacing-left .inner { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .quote.hasGraphic.spacing-left .inner .graphic { padding-left: 3.385vw; padding-left: clamp(32px, 3.385vw, 65px); } @media all and (min-width: 46.9375rem) { .quote .txt-img .col.txt { text-align: right; } } .tooltip_container { list-style: none; margin: 0; padding: 0; } .tooltip_container li { position: absolute; z-index: 1; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .tooltip_container li button { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; outline: none; background: none; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; z-index: 1; width: 4.0625rem; height: 4.0625rem; width: clamp(2.55rem, 3.4vw, 4.0625rem); height: clamp(2.55rem, 3.4vw, 4.0625rem); border: 1px solid #ffffff; border-radius: 100%; background-color: #0B2437; -webkit-transition: all 0.35s ease-in; transition: all 0.35s ease-in; } .tooltip_container li button:before, .tooltip_container li button:after { content: ""; position: absolute; top: 50%; left: 50%; background-color: #ffffff; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transform-origin: center; transform-origin: center; -webkit-transition: background-color 0.35s ease-in; transition: background-color 0.35s ease-in; } .tooltip_container li button:before { width: 2px; height: 50%; } .tooltip_container li button:after { width: 50%; height: 2px; } .tooltip_container li button svg { width: 50%; min-width: 1.625rem; height: auto; display: block; } .tooltip_container li button svg rect { fill: #ffffff; -webkit-transition: fill 0.35s ease-in; transition: fill 0.35s ease-in; } @media (hover: hover) { .tooltip_container li button:hover { border-color: #0B2437; background-color: #ffffff; } .tooltip_container li button:hover:before, .tooltip_container li button:hover:after { background-color: #0B2437; } .tooltip_container li button:hover svg rect { fill: #0B2437; } } .darkBg .tooltip_container li button { border-color: #0B2437; background-color: #ffffff; } .darkBg .tooltip_container li button:before, .darkBg .tooltip_container li button:after { background-color: #0B2437; } .darkBg .tooltip_container li button svg rect { fill: #0B2437; } @media (hover: hover) { .darkBg .tooltip_container li button:hover { border-color: #ffffff; background-color: #0B2437; } .darkBg .tooltip_container li button:hover:before, .darkBg .tooltip_container li button:hover:after { background-color: #ffffff; } .darkBg .tooltip_container li button:hover svg rect { fill: #ffffff; } } .tooltip_container li .tooltip-content { position: absolute; top: 50%; right: 50%; width: 31.5vw; width: clamp(25rem, 31.5vw, 30rem); padding-top: 2.1vw; padding-left: 2.35vw; padding-right: 2.35vw; padding-bottom: 2.1vw; padding-top: clamp(1.5rem, 2.1vw, 2.5rem); padding-left: clamp(1.25rem, 2.35vw, 2.8125rem); padding-right: clamp(1.25rem, 2.35vw, 2.8125rem); padding-bottom: clamp(1.25rem, 2.1vw, 2.5rem); -webkit-transform: scale(0, 1); transform: scale(0, 1); -webkit-transform-origin: right; transform-origin: right; -webkit-transition: -webkit-transform 0.2s linear; transition: -webkit-transform 0.2s linear; transition: transform 0.2s linear; transition: transform 0.2s linear, -webkit-transform 0.2s linear; background-color: #EFF5F8; } @media all and (max-width: 58.125rem) { .tooltip_container li .tooltip-content { width: 55vw; padding-top: 3.8vw; padding-top: clamp(2.525rem, 3.8vw, 4.53125rem); } } .tooltip_container li .tooltip-content .content { position: relative; z-index: 1; opacity: 0; -webkit-transition: all 0.35s linear; transition: all 0.35s linear; } .tooltip_container li .tooltip-content .content h2, .tooltip_container li .tooltip-content .content h3, .tooltip_container li .tooltip-content .content h4, .tooltip_container li .tooltip-content .content h5, .tooltip_container li .tooltip-content .content h6, .tooltip_container li .tooltip-content .content p, .tooltip_container li .tooltip-content .content li { font-size: 1.25rem; font-size: clamp(1rem, 1.1vw, 1.25rem); color: #000000; word-break: auto; -ms-hyphens: auto; hyphens: auto; margin-bottom: 0.75rem; } .tooltip_container li .tooltip-content .content h2, .tooltip_container li .tooltip-content .content h3, .tooltip_container li .tooltip-content .content h4, .tooltip_container li .tooltip-content .content h5, .tooltip_container li .tooltip-content .content h6 { font-family: "FFDINBold", sans-serif; } .tooltip_container li .tooltip-content .content p:nth-last-of-type(1) { margin-bottom: 0; } .tooltip_container li .tooltip-content:after { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .tooltip_container li.openTop .tooltip-content { top: auto; bottom: 50%; } .tooltip_container li.active { z-index: 2; } .tooltip_container li.active button { border-color: #ffffff; background-color: #0B2437; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .tooltip_container li.active button:before, .tooltip_container li.active button:after { background-color: #ffffff; } .tooltip_container li.active button svg rect { fill: #0B2437; } .tooltip_container li.active .tooltip-content { -webkit-transform: scale(1, 1); transform: scale(1, 1); } .tooltip_container li.active .tooltip-content .content.show { opacity: 1; } @media all and (min-width: 58.1875rem) { .tooltip_container li.open-v-top .tooltip-content { top: auto; bottom: 50%; } .tooltip_container li.open-v-btm .tooltip-content { top: 50%; bottom: auto; } } @media all and (max-width: 58.125rem) { .tooltip_container li { /* transform: scale(1,0) translateX(50%); transform-origin: top; //padding-top: 2.1vw; //padding-top: clamp(1.5rem, 2.1vw, 2.5rem); padding-top: 3.8vw; padding-top: clamp(2.775rem, 3.8vw, 4.53125rem); */ } .tooltip_container li.open-h-right .tooltip-content { left: 50%; right: auto; -webkit-transform-origin: left; transform-origin: left; } .tooltip_container li.open-h-center .tooltip-content { -webkit-transform: scale(0, 1) translateX(50%); transform: scale(0, 1) translateX(50%); } .tooltip_container li.open-h-center.active .tooltip-content { -webkit-transform: scale(1, 1) translateX(50%); transform: scale(1, 1) translateX(50%); } } .tooltip-legend-container { padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } @media all and (max-width: 58.125rem) { .tooltip-legend-container { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .tooltip-legend-container .cols { display: -webkit-box; display: -ms-flexbox; display: flex; } .tooltip-legend-container .cols.aligng-top { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .tooltip-legend-container .cols.aligng-cnt { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .tooltip-legend-container .cols.aligng-btm { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } @media all and (max-width: 47.9375rem) { .tooltip-legend-container .cols { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .tooltip-legend-container .cols .col.txt h2, .tooltip-legend-container .cols .col.txt h3, .tooltip-legend-container .cols .col.txt h4, .tooltip-legend-container .cols .col.txt h5, .tooltip-legend-container .cols .col.txt h6 { font-size: 2.5rem; font-size: clamp(1.25rem, 2.1vw, 2.5rem); margin-bottom: 2.61vw; margin-bottom: clamp(1.25rem, 2.61vw, 3.125rem); } .tooltip-legend-container .cols .col .tt-block { position: relative; } .tooltip-legend-container .cols .col .tt-block .tooltip_container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; } .tooltip-legend-container .cols .col .tt-block .tooltip_container li button { font-family: "FFDINBold", sans-serif; font-size: 0.75rem; font-size: clamp(0.5rem, 0.625vw, 0.75rem); color: #ffffff; line-height: 1; width: 2.92vw; height: 2.92vw; width: clamp(1.25rem, 1.55vw, 1.85rem); height: clamp(1.25rem, 1.55vw, 1.85rem); } .tooltip-legend-container .cols .col .tt-block .tooltip_container li button:before, .tooltip-legend-container .cols .col .tt-block .tooltip_container li button:after { content: none; } @media (hover: hover) { .tooltip-legend-container .cols .col .tt-block .tooltip_container li button:hover { color: #0B2437; } } .tooltip-legend-container .cols .col .tt-block .tooltip_container li.toggled button { color: #0B2437; border-color: #0B2437; background-color: #ffffff; } @media all and (min-width: 25.0625rem) { .tooltip-legend-container .cols .col .tooltip-legend { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } } .tooltip-legend-container .cols .col .tooltip-legend ol { list-style: none; margin: 0; padding: 0; counter-reset: custom-counter; list-style: none; width: 100%; } @media all and (min-width: 25.0625rem) { .tooltip-legend-container .cols .col .tooltip-legend ol:nth-child(1) { padding-right: 2.5%; } .tooltip-legend-container .cols .col .tooltip-legend ol:nth-child(2) { padding-left: 2.5%; } } @media all and (min-width: 25.0625rem) and (max-width: 48rem) { .tooltip-legend-container .cols .col .tooltip-legend ol:nth-child(1) { padding-right: 5%; } .tooltip-legend-container .cols .col .tooltip-legend ol:nth-child(2) { padding-left: 5%; } } .tooltip-legend-container .cols .col .tooltip-legend ol li { counter-increment: custom-counter; position: relative; padding-left: 2.25rem; padding-left: clamp(1.75rem, 2.1vw, 2.25rem); font-size: 1.25rem; font-size: clamp(1rem, 1.1vw, 1.25rem); font-family: "FFDINLight", sans-serif; line-height: 1.15; word-break: normal; -ms-hyphens: auto; hyphens: auto; -webkit-transition: all 0.35s ease-in; transition: all 0.35s ease-in; } .tooltip-legend-container .cols .col .tooltip-legend ol li:before { content: counter(custom-counter, decimal-leading-zero); position: absolute; top: 0; left: 0; font-family: "FFDINBold", sans-serif; text-align: right; } .tooltip-legend-container .cols .col .tooltip-legend ol li + li { margin-top: 1rem; margin-top: clamp(0.75rem, 0.85vw, 1rem); } .tooltip-legend-container .cols .col .tooltip-legend ol li.toggled { font-family: "FFDINBold", sans-serif; color: #007ac3; } @media all and (max-width: 25rem) { .tooltip-legend-container .cols .col .tooltip-legend { margin-bottom: 1.5rem; } .tooltip-legend-container .cols .col .tooltip-legend ol { width: 100%; } .tooltip-legend-container .cols .col .tooltip-legend ol + ol { margin-top: 1rem; margin-top: clamp(0.75rem, 0.85vw, 1rem); } } .tooltip-legend-container .cols:not(.legend-cols) .col { width: 100%; } @media all and (min-width: 48rem) { .tooltip-legend-container .cols:not(.legend-cols) .col:nth-child(1) { width: 70%; padding-right: 7.5%; padding-right: clamp(1.75rem, 7.5%, 6.25rem); } .tooltip-legend-container .cols:not(.legend-cols) .col:nth-child(2) { width: 30%; } } @media all and (min-width: 48rem) { .tooltip-legend-container .cols:not(.legend-cols) .col .tooltip-legend ol + ol { margin-top: 1rem; margin-top: clamp(0.75rem, 0.85vw, 1rem); } } @media all and (min-width: 25.0625rem) { .tooltip-legend-container .cols:not(.legend-cols) .col .tooltip-legend { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 1.5rem; } .tooltip-legend-container .cols:not(.legend-cols) .col .tooltip-legend ol { max-width: 50%; } .tooltip-legend-container .cols:not(.legend-cols) .col .tooltip-legend ol:nth-child(1) { padding-right: 5%; } .tooltip-legend-container .cols:not(.legend-cols) .col .tooltip-legend ol:nth-child(2) { padding-left: 5%; } } .tooltip-legend-container .cols.legend-cols .col { width: 100%; } @media all and (min-width: 48rem) { .tooltip-legend-container .cols.legend-cols .col:nth-child(1) { width: 45%; padding-right: 7.5%; padding-right: clamp(1.75rem, 7.5%, 6.25rem); } .tooltip-legend-container .cols.legend-cols .col:nth-child(2) { width: 55%; } } @media all and (max-width: 47.9375rem) { .tooltip-legend-container .cols.legend-cols .col + .col { margin-top: 10rem; margin-top: clamp(5rem, 8.333vw, 10rem); } } .tooltip-legend-container .cols.legend-cols .col ol.tooltip-legend { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 1.5rem; } .tooltip-legend-container .cols.legend-cols .col ol.tooltip-legend .cut { width: 50%; } .tooltip-legend-container .cols.legend-cols .col ol.tooltip-legend .cut:nth-child(1) { padding-right: 1.5625vw; padding-right: clamp(0.9375rem, 1.5625vw, 1.875rem); } .tooltip-legend-container .cols.legend-cols .col ol.tooltip-legend .cut:nth-child(2) { padding-left: 1.5625vw; padding-left: clamp(0.9375rem, 1.5625vw, 1.875rem); } .tooltip-nl-container .inner .tt-img { position: relative; width: 50%; max-width: 60rem; margin-left: auto; margin-right: auto; } @media all and (max-width: 58.125rem) { .tooltip-nl-container .inner .tt-img { width: 29.0625rem; max-width: 100%; } } .tooltip-nl-container .tooltip_container.-small li button { width: 2.92vw; width: clamp(1.25rem, 1.55vw, 1.85rem); height: 2.92vw; height: clamp(1.25rem, 1.55vw, 1.85rem); } .faq-container { padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } @media all and (max-width: 58.125rem) { .faq-container { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .faq-container h2, .faq-container h3, .faq-container h4, .faq-container h5, .faq-container h6 { font-size: 1.5rem; font-size: clamp(1.125rem, 1.25vw, 1.5rem); font-family: "FFDINBold", sans-serif; font-weight: 700; } .faq-container ul.faq-list { list-style: none; margin: 0; padding: 0; } .faq-container ul.faq-list li h2, .faq-container ul.faq-list li h3, .faq-container ul.faq-list li h4, .faq-container ul.faq-list li h5, .faq-container ul.faq-list li h6 { margin-bottom: 0.75rem; } .faq-container ul.faq-list li + li { margin-top: 1.5rem; } .faq-container .ce_accordion { border-top: 2px solid #000000; } @media all and (min-width: 48rem) { .faq-container .ce_accordion .accordion { padding-right: 11.15vw; } } .text-container + .faq-container { margin-top: 1.5rem; } .cta-container .inner > h1, .cta-container .inner > h2, .cta-container .inner > h3, .cta-container .inner > h4, .cta-container .inner > h5, .cta-container .inner > h6 { font-size: 5.625rem; font-size: clamp(2rem, 4.6875vw, 5.625rem); line-height: 1.1; } .cta-container .inner .col.info > h1, .cta-container .inner .col.info > h2, .cta-container .inner .col.info > h3, .cta-container .inner .col.info > h4, .cta-container .inner .col.info > h5, .cta-container .inner .col.info > h6 { font-size: 5.625rem; font-size: clamp(2rem, 4.6875vw, 5.625rem); line-height: 1.1; } .cta-container:not(.multisteps):not(.contact) { padding-left: 21.615vw; padding-right: 21.615vw; padding-left: clamp(6rem, 21.615vw, 25.9375rem); padding-right: clamp(6rem, 21.615vw, 25.9375rem); } @media all and (max-width: 39.375rem) { .cta-container:not(.multisteps):not(.contact) { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .cta-container:not(.multisteps):not(.contact) .inner h1, .cta-container:not(.multisteps):not(.contact) .inner h2, .cta-container:not(.multisteps):not(.contact) .inner h3, .cta-container:not(.multisteps):not(.contact) .inner h4, .cta-container:not(.multisteps):not(.contact) .inner h5, .cta-container:not(.multisteps):not(.contact) .inner h6 { text-align: center; } .cta-container:not(.multisteps):not(.contact) .inner h1 span:nth-child(1), .cta-container:not(.multisteps):not(.contact) .inner h2 span:nth-child(1), .cta-container:not(.multisteps):not(.contact) .inner h3 span:nth-child(1), .cta-container:not(.multisteps):not(.contact) .inner h4 span:nth-child(1), .cta-container:not(.multisteps):not(.contact) .inner h5 span:nth-child(1), .cta-container:not(.multisteps):not(.contact) .inner h6 span:nth-child(1) { -webkit-transform: translateX(-7.5%); transform: translateX(-7.5%); } .cta-container:not(.multisteps):not(.contact) .inner h1 span:nth-child(2), .cta-container:not(.multisteps):not(.contact) .inner h2 span:nth-child(2), .cta-container:not(.multisteps):not(.contact) .inner h3 span:nth-child(2), .cta-container:not(.multisteps):not(.contact) .inner h4 span:nth-child(2), .cta-container:not(.multisteps):not(.contact) .inner h5 span:nth-child(2), .cta-container:not(.multisteps):not(.contact) .inner h6 span:nth-child(2) { -webkit-transform: translateX(7.5%); transform: translateX(7.5%); } .cta-container:not(.multisteps):not(.contact) .inner .ce_text p { width: 80%; width: clamp(16.25rem, 37vw, 44.375rem); margin-left: auto; margin-right: auto; text-align: center; } @media all and (max-width: 58.125rem) { .cta-container:not(.multisteps):not(.contact) .inner .ce_text p { width: 100%; } } .cta-container:not(.multisteps):not(.contact) .inner .ce_text ul { list-style: none; margin: 0; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 2.125rem; } .cta-container:not(.multisteps):not(.contact) .inner .ce_text ul li { padding-left: 0; } .cta-container:not(.multisteps):not(.contact) .inner .ce_text ul li + li { margin-top: 0; } .cta-container:not(.multisteps):not(.contact) .inner .ce_text ul li:before { content: none; } .cta-container:not(.multisteps):not(.contact) .inner .ce_text ul li a { display: inline-block; font-size: 2.5rem; font-size: clamp(1.25rem, 2.1vw, 2.5rem); font-family: "FFDINBold", sans-serif; text-decoration: none; color: #000000; white-space: nowrap; } .cta-container:not(.multisteps):not(.contact) .inner .ce_text ul li a { position: relative; display: block; } .cta-container:not(.multisteps):not(.contact) .inner .ce_text ul li a span { display: block; position: absolute; top: 0; left: 0; overflow: hidden; -webkit-transform: translateY(100%); transform: translateY(100%); -webkit-transition: -webkit-transform 0.75s linear; transition: -webkit-transform 0.75s linear; transition: transform 0.75s linear; transition: transform 0.75s linear, -webkit-transform 0.75s linear; font-size: inherit; } .cta-container:not(.multisteps):not(.contact) .inner .ce_text ul li a span:before { display: inline-block; content: attr(data-content); -webkit-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition: -webkit-transform 0.75s linear; transition: -webkit-transform 0.75s linear; transition: transform 0.75s linear; transition: transform 0.75s linear, -webkit-transform 0.75s linear; font-family: "FFDINBold", sans-serif; color: #007ac3; } @media (hover: hover) { .cta-container:not(.multisteps):not(.contact) .inner .ce_text ul li a:hover span { -webkit-transform: translateY(0); transform: translateY(0); } .cta-container:not(.multisteps):not(.contact) .inner .ce_text ul li a:hover span:before { -webkit-transform: translateY(0); transform: translateY(0); } } @media all and (min-width: 58.1875rem) { .cta-container:not(.multisteps):not(.contact) .inner .ce_text ul li { width: 50%; } } @media all and (min-width: 39.4375rem) { .cta-container:not(.multisteps):not(.contact) .inner .ce_text ul { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .cta-container:not(.multisteps):not(.contact) .inner .ce_text ul li:nth-of-type(odd) { text-align: right; padding-right: 2.34375vw; padding-right: clamp(0.9375rem, 2.34375vw, 2.8125rem); } .cta-container:not(.multisteps):not(.contact) .inner .ce_text ul li:nth-of-type(odd) a span { left: auto; right: 0; } .cta-container:not(.multisteps):not(.contact) .inner .ce_text ul li:nth-of-type(even) { text-align: left; padding-left: 2.34375vw; padding-left: clamp(0.9375rem, 2.34375vw, 2.8125rem); } } @media all and (min-width: 39.4375rem) and (max-width: 58.125rem) { .cta-container:not(.multisteps):not(.contact) .inner .ce_text ul li:nth-of-type(odd) { padding-right: 0.9375rem; } .cta-container:not(.multisteps):not(.contact) .inner .ce_text ul li:nth-of-type(even) { padding-left: 0.9375rem; } } @media all and (max-width: 39.375rem) { .cta-container:not(.multisteps):not(.contact) .inner .ce_text ul { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .cta-container:not(.multisteps):not(.contact) .inner .ce_text ul li { text-align: center !important; } .cta-container:not(.multisteps):not(.contact) .inner .ce_text ul li + li { margin-top: 1.5rem; margin-top: clamp(1rem, 1.25vw, 1.5rem); } } .cta-container:not(.multisteps):not(.contact) .inner .ce_form { margin-top: 12.5rem; margin-top: clamp(3.5rem, 8.333vw, 10rem); } @media all and (min-width: 58.1875rem) { .cta-container.multisteps, .cta-container.contact { padding-left: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); } } @media all and (min-width: 58.1875rem) and (max-width: 58.125rem) { .cta-container.multisteps, .cta-container.contact { padding-left: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); } } @media all and (min-width: 58.1875rem) { .cta-container.multisteps .inner, .cta-container.contact .inner { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[12]; grid-template-columns: repeat(12, 1fr); -ms-grid-rows: 1fr; grid-template-rows: 1fr; } .cta-container.multisteps .inner > *:nth-child(1), .cta-container.contact .inner > *:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1; } .cta-container.multisteps .inner > *:nth-child(2), .cta-container.contact .inner > *:nth-child(2) { -ms-grid-row: 1; -ms-grid-column: 2; } .cta-container.multisteps .inner > *:nth-child(3), .cta-container.contact .inner > *:nth-child(3) { -ms-grid-row: 1; -ms-grid-column: 3; } .cta-container.multisteps .inner > *:nth-child(4), .cta-container.contact .inner > *:nth-child(4) { -ms-grid-row: 1; -ms-grid-column: 4; } .cta-container.multisteps .inner > *:nth-child(5), .cta-container.contact .inner > *:nth-child(5) { -ms-grid-row: 1; -ms-grid-column: 5; } .cta-container.multisteps .inner > *:nth-child(6), .cta-container.contact .inner > *:nth-child(6) { -ms-grid-row: 1; -ms-grid-column: 6; } .cta-container.multisteps .inner > *:nth-child(7), .cta-container.contact .inner > *:nth-child(7) { -ms-grid-row: 1; -ms-grid-column: 7; } .cta-container.multisteps .inner > *:nth-child(8), .cta-container.contact .inner > *:nth-child(8) { -ms-grid-row: 1; -ms-grid-column: 8; } .cta-container.multisteps .inner > *:nth-child(9), .cta-container.contact .inner > *:nth-child(9) { -ms-grid-row: 1; -ms-grid-column: 9; } .cta-container.multisteps .inner > *:nth-child(10), .cta-container.contact .inner > *:nth-child(10) { -ms-grid-row: 1; -ms-grid-column: 10; } .cta-container.multisteps .inner > *:nth-child(11), .cta-container.contact .inner > *:nth-child(11) { -ms-grid-row: 1; -ms-grid-column: 11; } .cta-container.multisteps .inner > *:nth-child(12), .cta-container.contact .inner > *:nth-child(12) { -ms-grid-row: 1; -ms-grid-column: 12; } .cta-container.multisteps .inner > .col.info, .cta-container.contact .inner > .col.info { -ms-grid-column: 1; -ms-grid-column-span: 8; grid-column: 1/9; -ms-grid-row: 1; -ms-grid-row-span: 1; grid-row: 1/2; } .cta-container.multisteps .inner > .col.img, .cta-container.contact .inner > .col.img { display: -ms-grid; display: grid; -ms-grid-column: 8; -ms-grid-column-span: 5; grid-column: 8/13; -ms-grid-row: 1; -ms-grid-row-span: 1; grid-row: 1/2; -webkit-box-align: end; -ms-flex-align: end; align-items: end; } } @media all and (max-width: 58.125rem) { .cta-container.multisteps .inner > .col.info, .cta-container.contact .inner > .col.info { padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } } @media all and (max-width: 58.125rem) and (max-width: 58.125rem) { .cta-container.multisteps .inner > .col.info, .cta-container.contact .inner > .col.info { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } @media all and (max-width: 58.125rem) { .cta-container.multisteps .inner > .col.img, .cta-container.contact .inner > .col.img { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .cta-container.multisteps .inner > .col.img > div, .cta-container.contact .inner > .col.img > div { width: 75%; } } .cta-container.multisteps .inner > .col.info .contact-modal, .cta-container.contact .inner > .col.info .contact-modal { padding-top: 5.99vw; padding-top: clamp(2.25rem, 5.99vw, 7.1875rem); padding-bottom: 9.0625vw; padding-bottom: clamp(2.8125rem, 9.0625vw, 13.5rem); } .cta-container.multisteps .inner > .col.info { position: relative; z-index: 1; } .cta-container.multisteps .inner > .col.info h2 { margin-bottom: 3.4vw; margin-bottom: clamp(30px, 3.4vw, 65px); } @media all and (max-width: 46.875rem) { .cta-container.multisteps .inner > .col.info h2 { margin-top: 5rem; margin-top: clamp(2.5rem, 4.1665vw, 5rem); } } .cta-container.multisteps .inner > .col.info button.toggle-form { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; outline: none; background: none; padding: 0; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-left: 1.25rem; padding-left: clamp(0.75rem, 1.1vw, 1.25rem); padding-right: 1.25rem; padding-right: clamp(0.75rem, 1.1vw, 1.25rem); border-bottom: 2px solid #000000; -webkit-transition: border-color 0.35s ease-in; transition: border-color 0.35s ease-in; } .cta-container.multisteps .inner > .col.info button.toggle-form > div { font-size: 2.5rem; font-size: clamp(1.25rem, 2.1vw, 2.5rem); color: #000000; margin-right: 2.605vw; margin-right: clamp(20px, 2.605vw, 50px); -webkit-transition: color 0.35s ease-in; transition: color 0.35s ease-in; } .cta-container.multisteps .inner > .col.info button.toggle-form svg { width: 1.6667vw; width: clamp(1.25rem, 1.6667vw, 2rem); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .cta-container.multisteps .inner > .col.info button.toggle-form svg path { -webkit-transition: fill 0.35s ease-in; transition: fill 0.35s ease-in; } @media (hover: hover) { .cta-container.multisteps .inner > .col.info button.toggle-form:hover { border-color: #007ac3; } .cta-container.multisteps .inner > .col.info button.toggle-form:hover > div { color: #007ac3; } .cta-container.multisteps .inner > .col.info button.toggle-form:hover svg path { fill: #007ac3; } } @media all and (max-width: 39.375rem) { .cta-container.multisteps .inner > .col.info button.toggle-form { margin-bottom: 1.5rem; } } .cta-container.multisteps .inner > .col.info .contact-modal { display: none; } .cta-container.multisteps .inner > .col.img .image_container img { display: block; } .cta-video-container { position: relative; padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); padding-top: 8.1vw; padding-top: clamp(4.5rem, 8.1vw, 9.6875rem); padding-bottom: 8.1vw; padding-bottom: clamp(4.5rem, 8.1vw, 9.6875rem); } @media all and (max-width: 58.125rem) { .cta-video-container { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .cta-video-container .inner { position: relative; z-index: 1; border-top: 2px solid #ffffff; border-bottom: 2px solid #ffffff; padding-top: 3.65vw; padding-top: clamp(2.1875rem, 3.65vw, 4.375rem); padding-bottom: 4.1667vw; padding-bottom: clamp(2.5rem, 4.1667vw, 5rem); } .cta-video-container .inner h2, .cta-video-container .inner h3, .cta-video-container .inner h4, .cta-video-container .inner h5, .cta-video-container .inner h6 { font-size: 3.4375rem; font-size: clamp(1.375rem, 2.865vw, 3.4375rem); margin-bottom: 3.75vw; margin-bottom: clamp(2.625rem, 3.75vw, 4.5rem); } .cta-video-container .inner ul { list-style: none; margin: 0; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media all and (min-width: 39.4375rem) and (max-width: 43.75rem) { .cta-video-container .inner ul { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } } .cta-video-container .inner ul li p { font-size: 1.25rem; font-size: clamp(1rem, 1.1vw, 1.25rem); } .cta-video-container .inner ul li p span { display: block; } @media all and (min-width: 43.8125rem) { .cta-video-container .inner ul li + li { margin-left: 8.9vw; margin-left: clamp(5rem, 8.9vw, 10.625rem); } } @media all and (max-width: 39.375rem) { .cta-video-container .inner ul li { width: 100%; } .cta-video-container .inner ul li + li { margin-top: 3.125rem; } } .cta-video-container .inner a.button { border-color: inherit; } .cta-video-container .inner svg { position: absolute; top: 3.65vw; top: clamp(2.1875rem, 3.65vw, 4.375rem); right: 0; width: 3.5vw; width: clamp(1.5rem, 3.5vw, 4.1875rem); height: auto; display: block; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .cta-video-container .inner svg path { fill: #ffffff !important; } .cta-video-container .inner * { color: #ffffff; } .cta-video-container .video_bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; } .cta-video-container .video_bg:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; background-color: #0B2437; opacity: 0.7; } .cta-video-container .video_bg video { position: absolute; top: 0; left: 0; z-index: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } .facts-container .facts { list-style: none; margin: 0; padding: 0; } .facts-container .facts li p { margin: 0; } .facts-container .facts li p.number { font-family: "FFDINBold", sans-serif; line-height: 1; } .facts-container .facts li p.label span { display: block; } .facts-container .facts li p.label span:nth-child(2) { font-family: "FFDINBold", sans-serif; } .facts-container.large .facts { padding-left: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: 25.78125%; padding-right: clamp(5.3125rem, 25.78125%, 30.9375rem); } @media all and (max-width: 58.125rem) { .facts-container.large .facts { padding-left: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); } } @media all and (max-width: 39.375rem) { .facts-container.large .facts { padding-right: 12.15vw; padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } } @media all and (max-width: 39.375rem) and (max-width: 58.125rem) { .facts-container.large .facts { padding-right: 7.5vw; padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .facts-container.large .facts li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .facts-container.large .facts li:nth-of-type(even) { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .facts-container.large .facts li + li { margin-top: 7.8125vw; margin-top: clamp(3.5rem, 7.8125vw, 9.375rem); } .facts-container.large .facts li .number { font-size: 12.5rem; font-size: clamp(4.5rem, 10.5vw, 12.5rem); margin-right: 2.45vw; margin-right: clamp(0.75rem, 2.45vw, 2.9375rem); } .facts-container.large .facts li .label span { font-size: 3.4375rem; font-size: clamp(1.5rem, 2.865vw, 3.4375rem); line-height: 1.1; } .facts-container.large .facts li .label span:nth-child(2) { font-family: "FFDINBold", sans-serif; } .facts-container.compact { padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } @media all and (max-width: 58.125rem) { .facts-container.compact { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .facts-container.compact .facts { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .facts-container.compact .facts li .number { font-size: 3.4375rem; font-size: clamp(2.1875rem, 2.865vw, 3.4375rem); } .facts-container.compact .facts li .label span { font-size: 1.25rem; font-size: clamp(1rem, 1.1vw, 1.25rem); } @media all and (min-width: 43.8125rem) { .facts-container.compact .facts li { width: 33.3333%; } .facts-container.compact .facts li:nth-child(n+4) { margin-top: clamp(2.5rem, 3.125vw, 3.75rem); } } @media all and (min-width: 30.0625rem) and (max-width: 43.75rem) { .facts-container.compact .facts li { width: 50%; } .facts-container.compact .facts li:nth-child(n+3) { margin-top: clamp(2.5rem, 3.125vw, 3.75rem); } } @media all and (max-width: 30rem) { .facts-container.compact .facts li { width: 100%; } .facts-container.compact .facts li:nth-child(n+2) { margin-top: clamp(2.5rem, 3.125vw, 3.75rem); } } .stoerer_container.-sticky { position: absolute; left: 0; bottom: 0; z-index: 1; width: 27.1vw; width: clamp(18.5rem, 27.1vw, 32.5rem); padding-top: 2.75vw; padding-left: 3.4vw; padding-right: 2.865vw; padding-bottom: 2.75vw; padding-top: clamp(2.25rem, 2.75vw, 3.25rem); padding-left: clamp(2rem, 3.4vw, 4.0625rem); padding-right: clamp(1.75rem, 2.865vw, 3.4375rem); padding-bottom: clamp(2.25rem, 2.75vw, 3.25rem); background-color: #ffffff; -webkit-transition: background-color 0.35s ease-in; transition: background-color 0.35s ease-in; } .stoerer_container.-sticky .hl { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; margin-bottom: 1.75rem; margin-bottom: clamp(1rem, 1.46vw, 1.75rem); } .stoerer_container.-sticky .hl h2, .stoerer_container.-sticky .hl h3, .stoerer_container.-sticky .hl h4, .stoerer_container.-sticky .hl h5, .stoerer_container.-sticky .hl h6 { font-size: 2.5rem; font-size: clamp(1.25rem, 2.1vw, 2.5rem); font-family: "FFDINBold", sans-serif; margin-bottom: 0; -webkit-transition: color 0.35s ease-in; transition: color 0.35s ease-in; } .stoerer_container.-sticky .hl svg { width: 1.667vw; width: clamp(1.25rem, 1.667vw, 1.9375rem); height: auto; display: block; margin-top: 0.265vw; margin-top: clamp(0.125rem, 0.265vw, 0.3125rem); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .stoerer_container.-sticky .hl svg path, .stoerer_container.-sticky .hl svg rect, .stoerer_container.-sticky .hl svg polygon, .stoerer_container.-sticky .hl svg circle, .stoerer_container.-sticky .hl svg ellipse, .stoerer_container.-sticky .hl svg line, .stoerer_container.-sticky .hl svg polyline { fill: #000000 !important; -webkit-transition: fill 0.35s ease-in; transition: fill 0.35s ease-in; } .stoerer_container.-sticky p { font-size: 1.125rem; font-size: clamp(1rem, 0.9375vw, 1.125rem); word-break: normal; -ms-hyphens: auto; hyphens: auto; -webkit-transition: color 0.35s ease-in; transition: color 0.35s ease-in; } .stoerer_container.-sticky p a { color: inherit; } .stoerer_container.-sticky > a { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; } @media all and (max-width: 47.9375rem) { .stoerer_container.-sticky { position: relative; bottom: auto !important; width: 100%; padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } } @media all and (max-width: 47.9375rem) and (max-width: 58.125rem) { .stoerer_container.-sticky { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } @media all and (max-width: 47.9375rem) { .stoerer_container.-sticky h2, .stoerer_container.-sticky h3, .stoerer_container.-sticky h4, .stoerer_container.-sticky h5, .stoerer_container.-sticky h6, .stoerer_container.-sticky p { color: #ffffff; } .stoerer_container.-sticky .hl svg path, .stoerer_container.-sticky .hl svg rect, .stoerer_container.-sticky .hl svg polygon, .stoerer_container.-sticky .hl svg circle, .stoerer_container.-sticky .hl svg ellipse, .stoerer_container.-sticky .hl svg line, .stoerer_container.-sticky .hl svg polyline { fill: #ffffff !important; } } @media (hover: hover) { .stoerer_container.-sticky.-color-default:hover h2, .stoerer_container.-sticky.-color-default:hover h3, .stoerer_container.-sticky.-color-default:hover h4, .stoerer_container.-sticky.-color-default:hover h5, .stoerer_container.-sticky.-color-default:hover h6, .stoerer_container.-sticky.-color-default:hover p, .stoerer_container.-sticky.-color-accent:hover h2, .stoerer_container.-sticky.-color-accent:hover h3, .stoerer_container.-sticky.-color-accent:hover h4, .stoerer_container.-sticky.-color-accent:hover h5, .stoerer_container.-sticky.-color-accent:hover h6, .stoerer_container.-sticky.-color-accent:hover p { color: #ffffff; } .stoerer_container.-sticky.-color-default:hover .hl svg path, .stoerer_container.-sticky.-color-default:hover .hl svg rect, .stoerer_container.-sticky.-color-default:hover .hl svg polygon, .stoerer_container.-sticky.-color-default:hover .hl svg circle, .stoerer_container.-sticky.-color-default:hover .hl svg ellipse, .stoerer_container.-sticky.-color-default:hover .hl svg line, .stoerer_container.-sticky.-color-default:hover .hl svg polyline, .stoerer_container.-sticky.-color-accent:hover .hl svg path, .stoerer_container.-sticky.-color-accent:hover .hl svg rect, .stoerer_container.-sticky.-color-accent:hover .hl svg polygon, .stoerer_container.-sticky.-color-accent:hover .hl svg circle, .stoerer_container.-sticky.-color-accent:hover .hl svg ellipse, .stoerer_container.-sticky.-color-accent:hover .hl svg line, .stoerer_container.-sticky.-color-accent:hover .hl svg polyline { fill: #ffffff !important; } } @media all and (max-width: 47.9375rem) { .stoerer_container.-sticky.-color-default { background-color: #007ac3; } } @media (hover: hover) { .stoerer_container.-sticky.-color-default:hover { background-color: #007ac3; } } @media (hover: hover) and (max-width: 47.9375rem) { .stoerer_container.-sticky.-color-default:hover { background-color: #006daf; } } @media all and (max-width: 47.9375rem) { .stoerer_container.-sticky.-color-accent { background-color: #91C020; } } @media (hover: hover) { .stoerer_container.-sticky.-color-accent:hover { background-color: #91C020; } } @media (hover: hover) and (max-width: 47.9375rem) { .stoerer_container.-sticky.-color-accent:hover { background-color: #82ac1c; } } .img-list-container { padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); margin-top: 2.5rem; margin-top: clamp(1.25rem, 2.1vw, 2.5rem); } @media all and (max-width: 58.125rem) { .img-list-container { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .img-list-container ul { list-style: none; margin: 0; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media all and (min-width: 39.4375rem) { .img-list-container ul li { width: 50%; } .img-list-container ul li:nth-of-type(n+3) { margin-top: 2.5rem; margin-top: clamp(1.25rem, 2.1vw, 2.5rem); } .img-list-container ul li:nth-of-type(odd) { padding-right: 1.5625vw; padding-right: clamp(0.9375rem, 1.5625vw, 1.875rem); } .img-list-container ul li:nth-of-type(even) { padding-left: 1.5625vw; padding-left: clamp(0.9375rem, 1.5625vw, 1.875rem); } } @media all and (max-width: 39.375rem) { .img-list-container ul li { width: 100%; } .img-list-container ul li:nth-of-type(n+2) { margin-top: 5rem; margin-top: clamp(2.5rem, 4.1665vw, 5rem); } } .custom-list ul { list-style: none; margin: 0; padding: 0; } .custom-list ul li { padding-top: 1.1875rem; } .custom-list ul li .label { display: block; font-size: 1.25rem; font-size: clamp(1.125rem, 1.5vw, 1.25rem); font-family: "FFDINBold", sans-serif; line-height: 1.5; padding-bottom: 1.1875rem; } .custom-list ul li .label h2, .custom-list ul li .label h3, .custom-list ul li .label h4, .custom-list ul li .label h5, .custom-list ul li .label h6 { font-size: inherit; font-family: inherit; line-height: inherit; font-weight: inherit; margin: 0; padding: 0; } .custom-list ul li .text { padding-bottom: 1.1875rem; } .custom-list ul li + li { border-top: 2px solid #000000; } .custom-list .cols { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .custom-list .cols > div { width: 100%; padding: 0; } @media all and (min-width: 39.4375rem) { .custom-list .cols > div ul li:nth-of-type(1) { padding-top: 0; } .custom-list .cols > div:nth-child(odd) { padding-right: 1.5625vw; padding-right: clamp(0.9375rem, 1.5625vw, 1.875rem); } .custom-list .cols > div:nth-child(even) { padding-left: 1.5625vw; padding-left: clamp(0.9375rem, 1.5625vw, 1.875rem); } } @media all and (min-width: 39.4375rem) { .custom-list .cols > div:nth-child(odd) { width: 45%; } .custom-list .cols > div:nth-child(even) { width: 55%; } } .mod_article > .inside > .custom-list { padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } @media all and (max-width: 58.125rem) { .mod_article > .inside > .custom-list { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .alpha-list-container { padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } @media all and (max-width: 58.125rem) { .alpha-list-container { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .alpha-list-container .alpha-list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; width: calc(100% + 3.96vw); margin-left: -1.98vw; } @media all and (min-width: 120.0625rem) { .alpha-list-container .alpha-list { width: calc(100% + 4.75rem); margin-left: -2.375rem; } } @media all and (max-width: 39.375rem) { .alpha-list-container .alpha-list { width: calc(100% + 1.5rem); margin-left: -0.75rem; } } .alpha-list-container .alpha-list .list-block { margin-top: 4.667vw; margin-top: clamp(2.8125rem, 4.667vw, 5rem); } .alpha-list-container .alpha-list .list-block h2 { font-size: 3.4375rem; font-size: clamp(1.375rem, 2.865vw, 3.4375rem); font-family: "FFDINBold", sans-serif; font-weight: 700; margin-left: 1.98vw; } .alpha-list-container .alpha-list .list-block ul { list-style: none; margin: 0; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .alpha-list-container .alpha-list .list-block ul li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; padding-left: 1.98vw; padding-right: 1.98vw; } @media all and (min-width: 120.0625rem) { .alpha-list-container .alpha-list .list-block ul li { padding-left: 2.375rem; padding-right: 2.375rem; } } @media all and (max-width: 39.375rem) { .alpha-list-container .alpha-list .list-block ul li { padding-left: 0.75rem; padding-right: 0.75rem; } } .alpha-list-container .alpha-list .list-block ul li span { display: block; width: 100%; font-size: 1.25rem; font-size: clamp(1rem, 1.1vw, 1.25rem); font-family: "FFDINBold", sans-serif; border-bottom: 2px solid #000000; } .alpha-list-container .alpha-list .list-block:not(.-w50) { width: 100%; } @media all and (min-width: 53.1875rem) { .alpha-list-container .alpha-list .list-block:not(.-w50) ul li { width: 25%; } .alpha-list-container .alpha-list .list-block:not(.-w50) ul li:nth-of-type(n+5) { margin-top: 2.125rem; margin-top: clamp(1.75rem, 1.78vw, 2.125rem); } } @media all and (max-width: 53.125rem) { .alpha-list-container .alpha-list .list-block:not(.-w50) ul li { width: 50%; } .alpha-list-container .alpha-list .list-block:not(.-w50) ul li:nth-of-type(n+3) { margin-top: 2.125rem; margin-top: clamp(1.75rem, 1.78vw, 2.125rem); } } @media all and (max-width: 25rem) { .alpha-list-container .alpha-list .list-block:not(.-w50) ul li { width: 100%; } .alpha-list-container .alpha-list .list-block:not(.-w50) ul li:nth-of-type(n+2) { margin-top: 2.125rem; margin-top: clamp(1.75rem, 1.78vw, 2.125rem); } } .alpha-list-container .alpha-list .list-block.-w50 { width: 50%; } @media all and (max-width: 25rem) { .alpha-list-container .alpha-list .list-block.-w50 { width: 100%; } } @media all and (min-width: 53.1875rem) { .alpha-list-container .alpha-list .list-block.-w50 ul li { width: 50%; } .alpha-list-container .alpha-list .list-block.-w50 ul li:nth-of-type(n+3) { margin-top: 2.125rem; margin-top: clamp(1.75rem, 1.78vw, 2.125rem); } } @media all and (max-width: 53.125rem) { .alpha-list-container .alpha-list .list-block.-w50 ul li { width: 100%; } .alpha-list-container .alpha-list .list-block.-w50 ul li:nth-of-type(n+2) { margin-top: 2.125rem; margin-top: clamp(1.75rem, 1.78vw, 2.125rem); } } .slider-container { padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } @media all and (max-width: 58.125rem) { .slider-container { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .slider-container .slider.slider-gallery .slick-track, .slider-container .slider.slider-custom .slick-track { display: -webkit-box; display: -ms-flexbox; display: flex; } .slider-container .slider.slider-gallery .slick-track .slick-slide, .slider-container .slider.slider-custom .slick-track .slick-slide { height: inherit !important; } .slider-container .slider.slider-gallery .slick-slide > div, .slider-container .slider.slider-gallery .slick-slide > div .slide-item, .slider-container .slider.slider-custom .slick-slide > div, .slider-container .slider.slider-custom .slick-slide > div .slide-item { height: 100%; } @media all and (min-width: 120.0625rem) { .slider-container .slider.slider-gallery { width: calc(100% + 5.25rem); margin-left: -2.625rem; } } @media all and (max-width: 120rem) { .slider-container .slider.slider-gallery { width: calc(100% + 4.375vw); margin-left: -2.1875vw; } } @media all and (max-width: 33.75rem) { .slider-container .slider.slider-gallery { width: calc(100% + 1.25rem); margin-left: -0.625rem; } } .slider-container .slider.slider-gallery .slick-slide > div .slide-item .inner { height: 100%; } @media all and (min-width: 120.0625rem) { .slider-container .slider.slider-gallery .slick-slide .slide-item { padding-left: 2.625rem; padding-right: 2.625rem; } } @media all and (max-width: 120rem) { .slider-container .slider.slider-gallery .slick-slide .slide-item { padding-left: 2.1875vw; padding-right: 2.1875vw; } } @media all and (max-width: 33.75rem) { .slider-container .slider.slider-gallery .slick-slide .slide-item { padding-left: 0.625rem; padding-right: 0.625rem; } } .slider-container .slider.slider-gallery .slick-slide .slide-item .inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .slider-container .slider.slider-gallery .slick-slide .slide-item .inner .image { position: relative; z-index: 1; width: 60%; margin-left: 20%; } .slider-container .slider.slider-gallery .slick-slide .slide-item .inner .text { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; background-color: #EFF5F8; margin-top: -3.25rem; padding-top: 6rem; padding-left: 10%; padding-right: 10%; padding-bottom: 2.875rem; } .slider-container .slider.slider-gallery .slick-slide .slide-item .inner .text .title { font-size: 1.25rem; font-size: clamp(1rem, 1.1vw, 1.25rem); margin-bottom: 1rem; } .bg-color .slider-container .slider.slider-gallery .slick-slide .slide-item .inner .text { background-color: #ffffff; } @media all and (min-width: 120.0625rem) { .slider-container .slider.slider-custom { width: calc(100% + 1.625rem); margin-left: -0.8125rem; } } @media all and (max-width: 120rem) { .slider-container .slider.slider-custom { width: calc(100% + 1.354vw); margin-left: -0.677vw; } } @media all and (max-width: 33.75rem) { .slider-container .slider.slider-custom { width: calc(100% + 0.75rem); margin-left: -0.375rem; } } .slider-container .slider.slider-custom .slick-slide .slide-item { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } @media all and (min-width: 120.0625rem) { .slider-container .slider.slider-custom .slick-slide .slide-item { padding-left: 0.8125rem; padding-right: 0.8125rem; } } @media all and (max-width: 120rem) { .slider-container .slider.slider-custom .slick-slide .slide-item { padding-left: 0.677vw; padding-right: 0.677vw; } } @media all and (max-width: 33.75rem) { .slider-container .slider.slider-custom .slick-slide .slide-item { padding-left: 0.375rem; padding-right: 0.375rem; } } .slider-container .slider.slider-custom .slick-slide .slide-item .inner { position: relative; padding-bottom: 2.8125rem; padding-bottom: clamp(1.875rem, 2.34375vw, 2.8125rem); } .slider-container .slider.slider-custom .slick-slide .slide-item .inner .text { padding-left: 2.5vw; padding-left: clamp(1.375rem, 2.5vw, 3rem); padding-right: 2.5vw; padding-right: clamp(1.375rem, 2.5vw, 3rem); } .slider-container .slider.slider-custom .slick-slide .slide-item .inner .text h3 { margin-bottom: 1rem; } .slider-container .slider.slider-custom .slick-slide .slide-item .inner .text p { word-break: normal; -ms-hyphens: auto; hyphens: auto; } .slider-container .slider.slider-custom .slick-slide .slide-item .inner > a { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; } .slider-container .slider.slider-custom .slick-slide .slide-item.hasLink .inner .hover { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; padding-top: 2.5vw; padding-top: clamp(1.375rem, 2.5vw, 3rem); padding-left: 2.5vw; padding-left: clamp(1.375rem, 2.5vw, 3rem); padding-right: 2.5vw; padding-right: clamp(1.375rem, 2.5vw, 3rem); padding-bottom: 2.8125rem; padding-bottom: clamp(1.875rem, 2.34375vw, 2.8125rem); background: -webkit-gradient(linear, left bottom, left top, from(rgba(11, 36, 55, 0.85)), color-stop(50%, rgba(0, 0, 0, 0))); background: linear-gradient(0deg, rgba(11, 36, 55, 0.85) 0%, rgba(0, 0, 0, 0) 50%); opacity: 0; -webkit-transition: opacity 0.35s ease-in; transition: opacity 0.35s ease-in; } .slider-container .slider.slider-custom .slick-slide .slide-item.hasLink .inner .hover .inside { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; height: 100%; border-bottom: 2px solid #ffffff; } .slider-container .slider.slider-custom .slick-slide .slide-item.hasLink .inner .hover .inside .arrow { position: absolute; right: 0; bottom: 10px; bottom: clamp(5px, 0.5208vw, 10px); width: 7.5%; min-width: 22px; } .slider-container .slider.slider-custom .slick-slide .slide-item.hasLink .inner .hover .inside .arrow svg { width: 100%; height: auto; display: block; } .slider-container .slider.slider-custom .slick-slide .slide-item.hasLink .inner .hover .inside .arrow svg path { fill: #ffffff; } .slider-container .slider.slider-custom .slick-slide .slide-item.hasLink .inner .hover .inside .arrow:not(.ext) svg { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .slider-container .slider.slider-custom .slick-slide .slide-item.hasLink .inner .hover .inside span { width: 100%; font-family: "FFDINBold", sans-serif; font-size: 1.875rem; font-size: clamp(1rem, 1.5625vw, 1.875rem); color: #ffffff; padding-left: 10px; padding-left: clamp(4px, 0.521vw, 10px); padding-right: 10px; padding-right: clamp(4px, 0.521vw, 10px); margin-bottom: 0 !important; } @media (hover: hover) { .slider-container .slider.slider-custom .slick-slide .slide-item.hasLink .inner:hover .hover { opacity: 1; } } .slider-container .slider.slider-custom .slick-slide .slide-item.standard .inner { padding-top: 2.8125rem; padding-top: clamp(1.875rem, 2.34375vw, 2.8125rem); background-color: #f8fcfe; } .slider-container .slider.slider-custom .slick-slide .slide-item.standard .inner .image { margin-bottom: 2.8125rem; margin-bottom: clamp(1.875rem, 2.34375vw, 2.8125rem); } .slider-container .slider.slider-custom .slick-slide .slide-item.hasBgImg .inner { padding-bottom: 0; } .slider-container .slider.slider-custom .slick-slide .slide-item.hasBgImg .inner .text { padding-bottom: 2.8125rem; padding-bottom: clamp(1.875rem, 2.34375vw, 2.8125rem); } .slider-container .slider.slider-custom .slick-slide .slide-item.hasBgImg .inner .text * { color: #ffffff; } .slider-container .slider.slider-custom .slick-slide .slide-item.hasBgImg .inner .bg-img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; } .slider-container .slider.slider-custom .slick-slide .slide-item.hasBgImg .inner .bg-img .image_container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .slider-container .slider.slider-custom .slick-slide .slide-item.hasBgImg .inner .bg-img .image_container img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: top center; object-position: top center; } .slider-container .slider.slider-custom .slick-slide .slide-item.laura-philipp .inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; padding-top: 2.8125rem; padding-top: clamp(1.875rem, 2.34375vw, 2.8125rem); padding-bottom: 0; background-color: #000; } .slider-container .slider.slider-custom .slick-slide .slide-item.laura-philipp .inner .text * { color: #ffffff; } .slider-container .slider.slider-custom .slick-slide .slide-item.union-berlin .inner { padding-top: 4.75rem; padding-top: clamp(2.5rem, 3.96vw, 4.75rem); background-color: #EC1823; } .slider-container .slider.slider-custom .slick-slide .slide-item.union-berlin .inner .image { width: 50%; margin-left: auto; margin-right: auto; margin-bottom: 5rem; margin-bottom: clamp(3.4375rem, 4.1667vw, 5rem); } .slider-container .slider.slider-custom .slick-slide .slide-item.union-berlin .inner .text * { color: #ffffff; } .slider-container .controls { padding-top: 3.125vw; padding-top: clamp(2rem, 3.125vw, 3.75rem); } .slider-container .controls .slider { position: relative; width: 100%; margin-left: 0; } .slider-container .controls .slider:after { content: ""; position: absolute; top: 1px; left: 0; width: 100%; height: 1px; background-color: #000000; } .slider-container .controls .slider .slick-slide { height: 3px; background-color: #000000; opacity: 0; } .slider-container .controls .slider .slick-slide.slick-current { opacity: 1; } .slider-container .controls .nav-block { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .slider-container .controls .nav-block .arrows { display: -webkit-box; display: -ms-flexbox; display: flex; padding-top: 3.125vw; padding-top: clamp(1.5rem, 3.125vw, 3.75rem); } .slider-container .controls .nav-block .arrows button { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; outline: none; background: none; padding: 0; -webkit-transform-origin: center; transform-origin: center; -webkit-transition: opacity 0.35s ease-in; transition: opacity 0.35s ease-in; } .slider-container .controls .nav-block .arrows button svg { display: block; width: 2.875rem; width: clamp(2rem, 2.4vw, 2.875rem); height: auto; } .slider-container .controls .nav-block .arrows button svg path { -webkit-transition: fill 0.35s ease-in; transition: fill 0.35s ease-in; } .slider-container .controls .nav-block .arrows button + button { margin-left: 2.91667vw; margin-left: clamp(2.25rem, 2.91667vw, 3.5rem); } .slider-container .controls .nav-block .arrows button.slick-prev { -webkit-transform: scale(-1); transform: scale(-1); } .slider-container .controls .nav-block .arrows button.disabled { opacity: 0.17; pointer-events: none; } @media (hover: hover) { .slider-container .controls .nav-block .arrows button:hover svg path { fill: #007ac3 !important; } } /* .slick-arrow { @include flex; @include flex-center; position: absolute; z-index: 2; width: 2rem; height: 2rem; background-color: $grey; text-indent: -9999px; overflow: hidden; appearance: none; padding: 0; border: none; background-image: url(../../files/theme/img/icons/icon-arrow.svg); background-repeat: no-repeat; background-size: 1.75rem; background-position: center; background-color: $grey; cursor: pointer; //} &.slick-prev { left: 0; transform: translateY(-50%) rotate(-90deg); } &.slick-next { right: 0; transform: translateY(-50%) rotate(90deg); } } .slider__row { position: relative; } .slider__basic, .slider__img, .slider__img__style { position: relative; .slick-dots { @include flex; @include flex-h-center; width: 100%; list-style: none; li { font-size: 0; line-height: 1; button { text-indent: -9999px; overflow: hidden; appearance: none; padding: 0; border: none; } &.slick-active { button { } } } } .slick-list { padding: 0 !important; .slick-track { .slick-slide { padding: 1rem; } } } } .slider__img, .slider__img__style { .slick-list { .slick-track { .slick-slide { img { width: 100%; height: auto; display: block; transform: scale(0.85); } &.slick-center { @media all and (min-width: 850px) { img { transform: scale(1.15); } } } } } } } .slider__img__caption, .slider__img__caption__style { .slick-slide { h3, p { } h3 { } p { } } } .slider__basic { .slick-list { padding: 0 !important; .slick-track { @include flex; .slick-slide { height: auto; & > div { min-height: 100%; img { width: 100%; height: auto; display: block; } .__info { @include event-teaser-info; // mixin in "/teaser" } } } } } } */ .made-in-germany { padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media all and (max-width: 58.125rem) { .made-in-germany { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .made-in-germany + .text-container { margin-top: 6.25vw; margin-top: clamp(2.5rem, 6.25vw, 7.5rem); } .made-in-germany.margin-top { margin-top: 6.25vw; margin-top: clamp(2.5rem, 6.25vw, 7.5rem); margin-bottom: 0; } .made-in-germany svg { display: block; width: 1.15vw; width: clamp(1rem, 1.15vw, 1.375rem); height: auto; margin-bottom: 0.525vw; margin-bottom: clamp(0.45rem, 0.525vw, 0.625rem); } .made-in-germany .label { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; } .made-in-germany .label:before, .made-in-germany .label:after { content: ""; background-color: #000000; height: 1px; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .made-in-germany .label span { display: block; font-size: 1.125rem; font-size: clamp(0.75rem, 0.9375vw, 1.125rem); text-transform: uppercase; padding-left: 1.3567vw; padding-right: 1.3567vw; padding-left: clamp(0.5rem, 1.3567vw, 1.625rem); padding-right: clamp(0.5rem, 1.3567vw, 1.625rem); } .video-download .inner button { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; outline: none; background: none; padding: 0; } .video-download .inner svg { height: auto; display: block; } .video-download .inner .info { margin-bottom: 1.5rem; margin-bottom: clamp(1rem, 1.25vw, 1.5rem); } .video-download .inner .info h3, .video-download .inner .info p { font-size: 1.125rem; font-size: clamp(1rem, 0.9375vw, 1.125rem); } .video-download .inner .video_container { position: relative; } .video-download .inner .video_container button.play { position: absolute; top: 50%; left: 50%; z-index: 1; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 5.4375rem; width: clamp(3.75rem, 4.53125vw, 5.4375rem); } @media all and (max-width: 43.75rem) { .video-download .inner .video_container button.play { width: clamp(3.75rem, 12.43vw, 5.4375rem); } } .video-download .inner .video_container button.play svg .button-circle circle { opacity: 0.25; -webkit-transition: opacity 0.35s ease-in; transition: opacity 0.35s ease-in; } @media (hover: hover) { .video-download .inner .video_container button.play:hover svg .button-circle circle { opacity: 0.75; } } .video-download .inner .video_container video { width: 100%; height: auto; display: block; } .video-download .inner ul.options { list-style: none; margin: 0; padding: 0; } .video-download .inner ul.options li { border-bottom: 2px solid #000000; } .video-download .inner ul.options li button, .video-download .inner ul.options li a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; padding-top: 1.75rem; padding-top: clamp(1.375rem, 1.5vw, 1.75rem); padding-bottom: 1rem; } .video-download .inner ul.options li button span, .video-download .inner ul.options li a span { font-size: 1.125rem; font-size: clamp(1rem, 0.9375vw, 1.125rem); font-family: "FFDINBold", sans-serif; font-weight: 500; color: #000000; -webkit-transition: color 0.35s ease-in; transition: color 0.35s ease-in; } .video-download .inner ul.options li button span span, .video-download .inner ul.options li a span span { font-family: "FFDINLight", sans-serif; font-weight: 100; } .video-download .inner ul.options li button svg path, .video-download .inner ul.options li a svg path { -webkit-transition: fill 0.35s ease-in; transition: fill 0.35s ease-in; } @media (hover: hover) { .video-download .inner ul.options li button:hover span, .video-download .inner ul.options li a:hover span { color: #007ac3; } .video-download .inner ul.options li button:hover svg path, .video-download .inner ul.options li a:hover svg path { fill: #007ac3; } } .video-download .inner ul.options li svg { width: 25px; height: auto; display: block; } .video-download .inner ul.options li a { text-decoration: none; } @media all and (max-width: 39.375rem) { .video-download .inner ul.options li:nth-of-type(1) { display: none; } } .product-table-container { padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } @media all and (max-width: 58.125rem) { .product-table-container { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .product-table-container .inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; position: relative; } .product-table-container .inner .product-table-wrapper { width: 100%; } .product-table-container .inner .product-table-wrapper .product-table { width: calc(100% + 2rem); width: 100%; } .product-table-container .inner .product-table-wrapper .product-table .slick-track { display: -webkit-box; display: -ms-flexbox; display: flex; } .product-table-container .inner .product-table-wrapper .product-table .slick-track .slick-slide { min-height: 100%; height: auto; float: none; } .product-table-container .inner .product-table-wrapper .product-table .slick-track .slick-slide > div { height: 100%; } .product-table-container .inner .product-table-wrapper .product-table.gallery_5 .item { width: 20%; } .product-table-container .inner .product-table-wrapper .product-table.gallery_4 .item { width: 25%; } .product-table-container .inner .product-table-wrapper .product-table .item { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; width: 20%; height: 100%; } .product-table-container .inner .product-table-wrapper .product-table .item .image, .product-table-container .inner .product-table-wrapper .product-table .item .title, .product-table-container .inner .product-table-wrapper .product-table .item .ressources-container { margin-left: 1rem; margin-right: 1rem; } .product-table-container .inner .product-table-wrapper .product-table .item .title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding-top: 1.25rem; padding-bottom: 1.75rem; padding-bottom: clamp(1.25rem, 1.46vw, 1.75rem); border-bottom: 2px solid #000000; } .product-table-container .inner .product-table-wrapper .product-table .item .title span { font-family: "FFDINBold", sans-serif; } .product-table-container .inner .product-table-wrapper .product-table .item .title span span { font-family: "FFDINLight", sans-serif; } .product-table-container .inner .product-table-wrapper .product-table .item .title span.hidden { opacity: 0; } .product-table-container .inner .product-table-wrapper .product-table .item .title.center { text-align: center; } .product-table-container .inner .product-table-wrapper .product-table .item .ressources-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .product-table-container .inner .product-table-wrapper .product-table .item .data-container .col { margin-top: 1.5rem; } .product-table-container .inner .product-table-wrapper .product-table .item .data-container .col h4 { font-size: 1.125rem; font-size: clamp(1rem, 0.9375vw, 1.125rem); font-family: "FFDINBold", sans-serif; font-weight: 500; line-height: 1.5; text-align: center; margin-bottom: 0.5rem; padding-left: 1rem; padding-right: 1rem; } .product-table-container .inner .product-table-wrapper .product-table .item .data-container .col ul { list-style: none; margin: 0; padding: 0; } .product-table-container .inner .product-table-wrapper .product-table .item .data-container .col ul li { padding-left: 1rem; padding-right: 1rem; } .product-table-container .inner .product-table-wrapper .product-table .item .data-container .col ul li > span { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 100%; padding-top: 0.5rem; padding-bottom: 0.25rem; text-align: center; word-break: normal; -ms-hyphens: auto; hyphens: auto; } .product-table-container .inner .product-table-wrapper .product-table .item .data-container .col ul li:nth-of-type(odd) { background: #C6DAED; } .product-table-container .inner .product-table-wrapper .product-table .item .data-container.double { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .product-table-container .inner .product-table-wrapper .product-table .item .data-container.double .col:nth-child(odd) { padding-right: 0.25rem; } .product-table-container .inner .product-table-wrapper .product-table .item .data-container.double .col:nth-child(odd) h4, .product-table-container .inner .product-table-wrapper .product-table .item .data-container.double .col:nth-child(odd) ul li { text-align: right; } .product-table-container .inner .product-table-wrapper .product-table .item .data-container.double .col:nth-child(even) { padding-left: 0.25rem; } .product-table-container .inner .product-table-wrapper .product-table .item .data-container.double .col:nth-child(even) h4, .product-table-container .inner .product-table-wrapper .product-table .item .data-container.double .col:nth-child(even) ul li { text-align: left; } .product-table-container .inner .product-table-wrapper .product-table .item .download-list { list-style: none; margin: 0; padding: 0; padding-top: 1rem; } .product-table-container .inner .product-table-wrapper .product-table .item .download-list li a { padding-right: 0; } .product-table-container .inner .product-table-wrapper .product-table .item .link-list { list-style: none; margin: 0; padding: 0; } .product-table-container .inner .product-table-wrapper .product-table .item .link-list li { border-bottom: 2px solid #000000; } .product-table-container .inner .product-table-wrapper .product-table .item .link-list li a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; text-decoration: none; padding-top: 1.5rem; padding-top: clamp(0.75rem, 1.25vw, 1.5rem); padding-bottom: 0.8125rem; padding-bottom: clamp(6px, 0.68vw, 0.8125rem); cursor: pointer; } .product-table-container .inner .product-table-wrapper .product-table .item .link-list li a > div { font-size: 1.125rem; font-size: clamp(1rem, 0.9375vw, 1.125rem); font-family: "FFDINBold", sans-serif; line-height: 1.15; color: #000000; -webkit-transition: color 0.35s ease-in; transition: color 0.35s ease-in; } .product-table-container .inner .product-table-wrapper .product-table .item .link-list li a > div span { font-family: "FFDINLight", sans-serif; color: inherit; -webkit-transition: color 0.35s ease-in; transition: color 0.35s ease-in; } .product-table-container .inner .product-table-wrapper .product-table .item .link-list li svg { width: 1.25rem; width: clamp(1rem, 1.1vw, 1.25rem); height: auto; display: block; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .product-table-container .inner .product-table-wrapper .product-table .item .link-list li svg path { fill: #000000; -webkit-transition: fill 0.35s ease-in; transition: fill 0.35s ease-in; } @media (hover: hover) { .product-table-container .inner .product-table-wrapper .product-table .item .link-list li:hover a div { color: #007ac3 !important; } .product-table-container .inner .product-table-wrapper .product-table .item .link-list li:hover a svg path { fill: #007ac3 !important; } } .product-table-container.hasLegend .inner .product-table-wrapper { width: calc(100% - 12.5rem); } @media all and (max-width: 1250px) { .product-table-container.hasLegend .inner .product-table-wrapper { width: calc(100% - 7.5rem); } } .product-table-container.hasLegend .inner .product-table-legend { width: 12.5rem; } @media all and (max-width: 1250px) { .product-table-container.hasLegend .inner .product-table-legend { width: 7.5rem; } } .product-table-container.hasLegend .inner .product-table-legend ul { list-style: none; margin: 0; padding: 0; } .product-table-container.hasLegend .inner .product-table-legend ul li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; word-break: normal; -ms-hyphens: auto; hyphens: auto; } .product-table-container.hasLegend .inner .product-table-legend ul li span { padding-top: 0.5rem; padding-left: 0.25rem; padding-bottom: 0.25rem; } .product-table-container.hasLegend .inner .product-table-legend ul li:nth-of-type(odd) { background-color: #C6DAED; } .product-table-container.hasLegend .inner .product-table-legend ul li.download { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; padding-bottom: 0.8125rem; padding-bottom: clamp(6px, 0.68vw, 0.8125rem); margin-bottom: 2px; line-height: 1.15; } .product-table-container.hasLegend .inner .product-table-legend ul li.download span { line-height: inherit; } .product-table-container .product-table-add-on { margin-top: 2.5rem; margin-top: clamp(1.25rem, 2.1vw, 2.5rem); } .product-table-container .arrows { display: -webkit-box; display: -ms-flexbox; display: flex; padding-top: 3.125vw; padding-top: clamp(1.5rem, 3.125vw, 3.75rem); -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; bottom: 0; right: 0; width: 100%; display: none; padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } .product-table-container .arrows button { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; outline: none; background: none; padding: 0; -webkit-transform-origin: center; transform-origin: center; -webkit-transition: opacity 0.35s ease-in; transition: opacity 0.35s ease-in; } .product-table-container .arrows button svg { display: block; width: 2.875rem; width: clamp(2rem, 2.4vw, 2.875rem); height: auto; } .product-table-container .arrows button svg path { -webkit-transition: fill 0.35s ease-in; transition: fill 0.35s ease-in; } .product-table-container .arrows button + button { margin-left: 2.91667vw; margin-left: clamp(2.25rem, 2.91667vw, 3.5rem); } .product-table-container .arrows button.slick-prev { -webkit-transform: scale(-1); transform: scale(-1); } .product-table-container .arrows button.disabled { opacity: 0.17; pointer-events: none; } @media (hover: hover) { .product-table-container .arrows button:hover svg path { fill: #007ac3 !important; } } @media all and (max-width: 58.125rem) { .product-table-container .arrows { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } @media all and (max-width: 1500px) { .product-table-container.g5 .inner { padding-bottom: 5rem; padding-bottom: clamp(3.1875rem, 4.1667vw, 5rem); } } @media all and (max-width: 1750px) { .product-table-container.g5-l .inner { padding-bottom: 5rem; padding-bottom: clamp(3.1875rem, 4.1667vw, 5rem); } .product-table-container.g5-l .slick-prev { margin-left: 9.375rem; } } @media all and (max-width: 1250px) { .product-table-container.g5-l .slick-prev { margin-left: 7.5rem; } } @media all and (max-width: 1350px) { .product-table-container.g4 .inner { padding-bottom: 5rem; padding-bottom: clamp(3.1875rem, 4.1667vw, 5rem); } } @media all and (max-width: 1550px) { .product-table-container.g4-l .inner { padding-bottom: 5rem; padding-bottom: clamp(3.1875rem, 4.1667vw, 5rem); } .product-table-container.g4-l .slick-prev { margin-left: 9.375rem; } } @media all and (max-width: 1250px) { .product-table-container.g4-l .slick-prev { margin-left: 7.5rem; } } @media all and (max-width: 1050px) { .product-table-container.g3 .inner { padding-bottom: 5rem; padding-bottom: clamp(3.1875rem, 4.1667vw, 5rem); } } @media all and (max-width: 1250px) { .product-table-container.g3-l .inner { padding-bottom: 5rem; padding-bottom: clamp(3.1875rem, 4.1667vw, 5rem); } .product-table-container.g3-l .slick-prev { margin-left: 9.375rem; } } @media all and (max-width: 1250px) { .product-table-container.g3-l .slick-prev { margin-left: 7.5rem; } } @media all and (max-width: 1500px) { .product-table-container .product-table.gallery_5 { width: calc(100% + 1rem); } .product-table-container .product-table.gallery_5 + .arrows { display: -webkit-box; display: -ms-flexbox; display: flex; } } @media all and (max-width: 1750px) { .product-table-container .product-table.gallery_5_legend { width: calc(100% + 1rem); } .product-table-container .product-table.gallery_5_legend + .arrows { display: -webkit-box; display: -ms-flexbox; display: flex; } } @media all and (max-width: 1350px) { .product-table-container .product-table.gallery_4 { width: calc(100% + 1rem); } .product-table-container .product-table.gallery_4 + .arrows { display: -webkit-box; display: -ms-flexbox; display: flex; } } @media all and (max-width: 1550px) { .product-table-container .product-table.gallery_4_legend { width: calc(100% + 1rem); } .product-table-container .product-table.gallery_4_legend + .arrows { display: -webkit-box; display: -ms-flexbox; display: flex; } } @media all and (max-width: 1050px) { .product-table-container .product-table.gallery_3 { width: calc(100% + 1rem); } .product-table-container .product-table.gallery_3 + .arrows { display: -webkit-box; display: -ms-flexbox; display: flex; } } @media all and (max-width: 1250px) { .product-table-container .product-table.gallery_3_legend { width: calc(100% + 1rem); } .product-table-container .product-table.gallery_3_legend + .arrows { display: -webkit-box; display: -ms-flexbox; display: flex; } } .credit-container { margin-top: 5rem; margin-top: clamp(2.5rem, 4.1665vw, 5rem); } .credit-container p { text-align: center; } @media all and (max-width: 47.9375rem) { .main-attraction { padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } } @media all and (max-width: 47.9375rem) and (max-width: 58.125rem) { .main-attraction { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .main-attraction svg { display: block; width: 82px; width: clamp(45px, 4.275vw, 82px); height: auto; } .main-attraction .content { margin-top: 1.875rem; margin-top: clamp(1.5625rem, 1.5625vw, 1.875rem); } @media all and (min-width: 48rem) { .main-attraction .content { padding-right: 12.15vw; padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } } @media all and (min-width: 48rem) and (max-width: 58.125rem) { .main-attraction .content { padding-right: 7.5vw; padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .main-attraction .content .ce_text { word-break: normal; -ms-hyphens: auto; hyphens: auto; } @media all and (min-width: 64.0625rem) { .main-attraction .content .ce_text { padding-right: 20%; } } .realized-by p, .realized-by a { line-height: 1.85; } @media all and (min-width: 39.4375rem) { .realized-by .cols { display: -webkit-box; display: -ms-flexbox; display: flex; } } .realized-by .cols .col.contact ul { list-style: none; margin: 0; padding: 0; } .realized-by .cols .col.contact ul li { display: -webkit-box; display: -ms-flexbox; display: flex; } .realized-by .cols .col.contact ul li:before { content: none; } .realized-by .cols .col.contact ul li a { font-family: "FFDINBold", sans-serif; color: #000000; text-decoration: none; -webkit-transition: color 0.35s ease-in; transition: color 0.35s ease-in; } @media (hover: hover) { .realized-by .cols .col.contact ul li a:hover { color: #007ac3; } } .realized-by .cols .col.contact ul li svg { display: block; width: 18px; height: auto; margin-right: 18px; } .realized-by .cols .col.contact ul li svg path { fill: #007ac3; } @media all and (min-width: 39.4375rem) { .realized-by .cols .col + .col { margin-left: 4.6vw; margin-left: clamp(50px, 4.6vw, 88px); } } @media all and (max-width: 39.375rem) { .realized-by .cols .col + .col { margin-top: 1.875rem; margin-top: clamp(1rem, 1.5625vw, 1.875rem); } } .iconlist-container .inner { padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } @media all and (max-width: 58.125rem) { .iconlist-container .inner { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .iconlist-container .inner ul li .hl { font-size: 1.125rem; font-size: clamp(1rem, 0.9375vw, 1.125rem); margin-top: 1.75rem; margin-bottom: 0.75rem; } @media all and (min-width: 39.4375rem) { .iconlist-container .inner ul li .text { padding-left: 1rem; padding-right: 1rem; } } .iconlist-container .inner ul li .text p, .iconlist-container .inner ul li .text li { color: #ffffff; text-align: center; } @media all and (min-width: 71.9375rem) { .iconlist-container .inner ul.cols_4 li { width: 25%; } .iconlist-container .inner ul.cols_4 li:nth-child(n+5) { margin-top: 5rem; margin-top: clamp(2.5rem, 4.1665vw, 5rem); } } @media all and (max-width: 71.875rem) and (min-width: 39.4375rem) { .iconlist-container .inner ul.cols_4 li { width: 50%; } .iconlist-container .inner ul.cols_4 li:nth-child(n+3) { margin-top: 5rem; margin-top: clamp(2.5rem, 4.1665vw, 5rem); } } @media all and (max-width: 39.375rem) { .iconlist-container .inner ul.cols_4 li { width: 100%; } .iconlist-container .inner ul.cols_4 li:nth-child(n+2) { margin-top: 5rem; margin-top: clamp(2.5rem, 4.1665vw, 5rem); } } .iconlist-container .inner.bgCol { padding-top: 7.1875rem; padding-bottom: 7.1875rem; padding-top: clamp(5rem, 6vw, 7.1875rem); padding-bottom: clamp(5rem, 6vw, 7.1875rem); background-color: #007ac3; } .iconlist-container .inner.noBg ul li span.icon { border-color: #007ac3; } .iconlist-container .inner.noBg ul li span.icon svg path, .iconlist-container .inner.noBg ul li span.icon svg polygon, .iconlist-container .inner.noBg ul li span.icon svg circle { fill: #007ac3; } .iconlist-container .inner.noBg ul li span.label { color: #007ac3; } .partner-container { padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } @media all and (max-width: 58.125rem) { .partner-container { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .partner-container .teaser-list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; width: calc(100% + 4.375vw); margin-left: -2.1875vw; } @media all and (min-width: 120.0625rem) { .partner-container .teaser-list { width: calc(100% + 5.25rem); margin-left: -2.625rem; } } @media all and (max-width: 58.125rem) { .partner-container .teaser-list { width: calc(100% + 2.5rem); margin-left: -1.25rem; } } .partner-container .teaser-list .teaser { width: 25%; padding-left: 2.1875vw; padding-right: 2.1875vw; } @media all and (min-width: 106.3125rem) { .partner-container .teaser-list .teaser { padding-left: 2.625rem; padding-right: 2.625rem; } } @media all and (max-width: 58.125rem) { .partner-container .teaser-list .teaser { padding-left: 1.25rem; padding-right: 1.25rem; } } @media all and (min-width: 106.3125rem) { .partner-container .teaser-list .teaser:nth-child(n+5) { margin-top: 5rem; margin-top: clamp(2.5rem, 4.1665vw, 5rem); } } @media all and (min-width: 58.1875rem) and (max-width: 106.25rem) { .partner-container .teaser-list .teaser { width: 33.333%; } .partner-container .teaser-list .teaser:nth-child(n+4) { margin-top: 5rem; margin-top: clamp(2.5rem, 4.1665vw, 5rem); } } @media all and (min-width: 33.8125rem) and (max-width: 58.125rem) { .partner-container .teaser-list .teaser { width: 50%; } .partner-container .teaser-list .teaser:nth-child(n+3) { margin-top: 5rem; margin-top: clamp(2.5rem, 4.1665vw, 5rem); } } @media all and (max-width: 33.75rem) { .partner-container .teaser-list .teaser { width: 100%; } .partner-container .teaser-list .teaser + .teaser { margin-top: 5rem; margin-top: clamp(2.5rem, 4.1665vw, 5rem); } } .partner-container .teaser-list .teaser .inner { position: relative; } .partner-container .teaser-list .teaser .inner .image { position: relative; } .partner-container .teaser-list .teaser .inner .image .label { position: absolute; top: 0; right: 0; font-size: 1.125rem; font-size: clamp(1rem, 0.9375vw, 1.125rem); font-family: "FFDINBold", sans-serif; line-height: 1; color: #ffffff; letter-spacing: -0.05em; background-color: #007ac3; padding-top: 0.875rem; padding-left: 1.875rem; padding-right: 1.875rem; padding-bottom: 0.625rem; } .partner-container .teaser-list .teaser .inner .button { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding-top: 25px; padding-top: clamp(18px, 1.31vw, 25px); padding-bottom: 10px; padding-bottom: clamp(6px, 0.521vw, 10px); border-bottom: 2px solid #000000; } .partner-container .teaser-list .teaser .inner .button div { font-family: "FFDINBold", sans-serif; font-size: 1.125rem; font-size: clamp(1rem, 0.9375vw, 1.125rem); -webkit-transition: color 0.35s ease-in; transition: color 0.35s ease-in; } .partner-container .teaser-list .teaser .inner .button svg { width: 1rem; } .partner-container .teaser-list .teaser .inner .button svg path { fill: #000000; -webkit-transition: fill 0.35s ease-in; transition: fill 0.35s ease-in; } .partner-container .teaser-list .teaser .inner a { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; } @media (hover: hover) { .partner-container .teaser-list .teaser .inner:hover .button div { color: #007ac3; } .partner-container .teaser-list .teaser .inner:hover .button svg path { fill: #007ac3; } } .cases_container .case .headline, .cases_container .case .subheadline, .cases_detail .facts .headline, .cases_detail .facts .subheadline { font-family: "FFDINBold", sans-serif; font-weight: 500; } .cases_container .case .headline, .cases_detail .facts .headline { font-size: 2.5rem; font-size: clamp(1.25rem, 2.1vw, 2.5rem); -webkit-transition: color 0.35s ease-in; transition: color 0.35s ease-in; padding-right: 3.125rem; padding-right: clamp(2.5rem, 2.61vw, 3.125rem); } .cases_container .case .subheadline, .cases_detail .facts .subheadline { font-size: 1.25rem; font-size: clamp(1rem, 1.1vw, 1.25rem); border-bottom: 2px solid #000000; padding-bottom: 0.625rem; padding-bottom: clamp(0.25rem, 0.55vw, 0.625rem); margin-bottom: 1.375rem; margin-bottom: clamp(0.55rem, 1.15vw, 1.375rem); } .cases_container .case ul, .cases_detail .facts ul { list-style: none; margin: 0; padding: 0; } .cases_container .case ul li, .cases_detail .facts ul li { font-size: 1.125rem; font-size: clamp(1rem, 0.9375vw, 1.125rem); } .cases_container .case > ul, .cases_detail .facts > ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; width: calc(100% + 3.96vw); margin-left: -1.98vw; } @media all and (min-width: 120.0625rem) { .cases_container .case > ul, .cases_detail .facts > ul { width: calc(100% + 4.75rem); margin-left: -2.375rem; } } @media all and (max-width: 39.375rem) { .cases_container .case > ul, .cases_detail .facts > ul { width: calc(100% + 1.5rem); margin-left: -0.75rem; } } .cases_container .case > ul > li, .cases_detail .facts > ul > li { width: 25%; padding-left: 1.98vw; padding-right: 1.98vw; } @media all and (min-width: 120.0625rem) { .cases_container .case > ul > li, .cases_detail .facts > ul > li { padding-left: 2.375rem; padding-right: 2.375rem; } } @media all and (min-width: 31.3125rem) and (max-width: 71.875rem) { .cases_container .case > ul > li, .cases_detail .facts > ul > li { width: 50%; } .cases_container .case > ul > li:nth-child(n+3), .cases_detail .facts > ul > li:nth-child(n+3) { margin-top: 1.5rem; } } @media all and (max-width: 39.375rem) { .cases_container .case > ul > li, .cases_detail .facts > ul > li { padding-left: 0.75rem; padding-right: 0.75rem; } } @media all and (max-width: 31.25rem) { .cases_container .case > ul > li, .cases_detail .facts > ul > li { width: 100%; } .cases_container .case > ul > li + li, .cases_detail .facts > ul > li + li { margin-top: 1.5rem; } } .cases_container { padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } @media all and (max-width: 58.125rem) { .cases_container { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .cases_container .case { position: relative; border-bottom: 2px solid #000000; padding-bottom: clamp(0.75rem, 1.5625vw, 1.875rem); } .cases_container .case a { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; text-indent: -9999px; overflow: hidden; } .cases_container .case svg { position: absolute; top: 0; right: 0; width: 3.5vw; width: clamp(1.875rem, 2.3vw, 2.75rem); height: auto; display: block; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .cases_container .case svg path { fill: #000000 !important; -webkit-transition: fill 0.35s ease-in; transition: fill 0.35s ease-in; } .cases_container .case + .case { margin-top: 5rem; margin-top: clamp(2.5rem, 4.1665vw, 5rem); } @media all and (max-width: 64rem) { .cases_container .case + .case { margin-top: 7.5rem; margin-top: clamp(3.75rem, 6.25vw, 7.5rem); } } @media (hover: hover) { .cases_container .case:hover .headline { color: #007ac3; } .cases_container .case:hover svg path { fill: #007ac3 !important; } } .cases_detail .hero_container .hero-section { aspect-ratio: 384/155; } .cases_detail .hero_container .hero-section .inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); position: relative; z-index: 1; min-height: 100%; padding-top: 11.25vw; padding-top: clamp(8rem, 11.25vw, 13.5rem); padding-bottom: 4.16667vw; padding-bottom: clamp(2.625rem, 4.16667vw, 5rem); padding-right: 50%; } @media all and (max-width: 58.125rem) { .cases_detail .hero_container .hero-section .inner { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } @media all and (max-width: 33.75rem) { .cases_detail .hero_container .hero-section .inner { padding-top: 10rem; padding-top: clamp(7.5rem, 8.333vw, 10rem); } } .cases_detail .hero_container .hero-section .inner * { color: #ffffff; } .cases_detail .hero_container .hero-section .inner .headline h1 span { font-size: 3.4375rem; font-size: clamp(1.375rem, 2.865vw, 3.4375rem); color: inherit; line-height: 1.27; } .cases_detail .hero_container .hero-section .inner .headline + .textarea { margin-top: 2.5rem; margin-top: clamp(1.25rem, 2.1vw, 2.5rem); } .cases_detail .hero_container .hero-section .inner .tech-draw { position: absolute; right: 0; bottom: 0; width: 40%; } @media all and (max-width: 58.125rem) { .cases_detail .hero_container .hero-section .inner .tech-draw { display: none; } } .cases_detail .hero_container .hero-section .bg-img:before { background: transparent -webkit-gradient(linear, left top, right top, from(rgba(11, 36, 55, 0.8784313725)), color-stop(84%, rgba(11, 36, 55, 0.1921568627)), to(rgba(11, 36, 55, 0))); background: transparent linear-gradient(90deg, rgba(11, 36, 55, 0.8784313725) 0%, rgba(11, 36, 55, 0.1921568627) 84%, rgba(11, 36, 55, 0) 100%); opacity: 0.6; } .cases_detail .hero_container .hero-section .bg-img:after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; mix-blend-mode: multiply; background: transparent -webkit-gradient(linear, left top, left bottom, from(rgba(11, 36, 55, 0.8784313725)), color-stop(84%, rgba(11, 36, 55, 0.1921568627)), to(rgba(11, 36, 55, 0))); background: transparent linear-gradient(180deg, rgba(11, 36, 55, 0.8784313725) 0%, rgba(11, 36, 55, 0.1921568627) 84%, rgba(11, 36, 55, 0) 100%); opacity: 0.6; } .cases_detail .facts { padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); margin-top: 2.5rem; margin-top: clamp(1.25rem, 2.1vw, 2.5rem); } @media all and (max-width: 58.125rem) { .cases_detail .facts { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .cases_content > .mod_article { padding-top: 0 !important; padding-bottom: 0 !important; } .cases_content > .mod_article .inside > div:not(.cases):not(.image-grid-gallery):not(.cta-container):not(.nextLink):not(.back) { padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); margin-top: 5rem; margin-top: clamp(2.5rem, 4.1665vw, 5rem); margin-bottom: 5rem; margin-bottom: clamp(2.5rem, 4.1665vw, 5rem); } @media all and (max-width: 58.125rem) { .cases_content > .mod_article .inside > div:not(.cases):not(.image-grid-gallery):not(.cta-container):not(.nextLink):not(.back) { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .cases_content > .mod_article .inside .nextLink { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); margin-top: 2.5rem; margin-top: clamp(1.25rem, 2.1vw, 2.5rem); margin-bottom: 10rem; margin-bottom: clamp(5rem, 8.333vw, 10rem); } @media all and (max-width: 58.125rem) { .cases_content > .mod_article .inside .nextLink { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .cases_content > .mod_article .inside .nextLink a { position: relative; -webkit-appearance: none; -moz-appearance: none; appearance: none; display: inline-block; text-decoration: none; font-family: "FFDINBold", sans-serif; color: #000000; border-bottom: 1px solid #000000; margin-top: 1.25rem; -webkit-transition: all 0.35s ease-in; transition: all 0.35s ease-in; } @media (hover: hover) { .cases_content > .mod_article .inside .nextLink a:hover { color: #007ac3; border-color: #007ac3; } } .reference-list-container { padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } @media all and (max-width: 58.125rem) { .reference-list-container { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .reference-list-container .teaser-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-wrap: wrap; flex-wrap: wrap; width: calc(100% + 4.375vw); margin-left: -2.1875vw; } @media all and (min-width: 120.0625rem) { .reference-list-container .teaser-list { width: calc(100% + 5.25rem); margin-left: -2.625rem; } } @media all and (max-width: 58.125rem) { .reference-list-container .teaser-list { width: calc(100% + 2.5rem); margin-left: -1.25rem; } } .reference-list-container .teaser-list .teaser { width: 33.333%; padding-left: 2.1875vw; padding-right: 2.1875vw; } @media all and (min-width: 120.0625rem) { .reference-list-container .teaser-list .teaser { padding-left: 2.625rem; padding-right: 2.625rem; } } @media all and (max-width: 58.125rem) { .reference-list-container .teaser-list .teaser { padding-left: 1.25rem; padding-right: 1.25rem; } } @media all and (min-width: 58.1875rem) { .reference-list-container .teaser-list .teaser:nth-child(n+4) { margin-top: 5rem; margin-top: clamp(2.5rem, 4.1665vw, 5rem); } } @media all and (min-width: 33.8125rem) and (max-width: 58.125rem) { .reference-list-container .teaser-list .teaser { width: 50%; } .reference-list-container .teaser-list .teaser:nth-child(n+3) { margin-top: 5rem; margin-top: clamp(2.5rem, 4.1665vw, 5rem); } } @media all and (max-width: 33.75rem) { .reference-list-container .teaser-list .teaser { width: 100%; } .reference-list-container .teaser-list .teaser + .teaser { margin-top: 5rem; margin-top: clamp(2.5rem, 4.1665vw, 5rem); } } .reference-list-container .teaser-list .teaser .inner { position: relative; } .reference-list-container .teaser-list .teaser .inner .title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding-top: 25px; padding-top: clamp(18px, 1.31vw, 25px); padding-bottom: 10px; padding-bottom: clamp(6px, 0.521vw, 10px); border-bottom: 2px solid #000000; } .reference-list-container .teaser-list .teaser .inner .title div { font-family: "FFDINBold", sans-serif; font-size: 1.125rem; font-size: clamp(1rem, 0.9375vw, 1.125rem); -webkit-transition: color 0.35s ease-in; transition: color 0.35s ease-in; } .reference-list-container .teaser-list .teaser .inner .title svg { width: 1rem; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .reference-list-container .teaser-list .teaser .inner .title svg path { fill: #000000; -webkit-transition: fill 0.35s ease-in; transition: fill 0.35s ease-in; } .reference-list-container .teaser-list .teaser .inner a { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; } @media (hover: hover) { .reference-list-container .teaser-list .teaser .inner:hover .title div { color: #007ac3 !important; } .reference-list-container .teaser-list .teaser .inner:hover .title svg path { fill: #007ac3 !important; } } .mod_customcatalogreader { margin-bottom: 0 !important; } .reference-hero-container .bg { position: relative; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .reference-hero-container .bg > .image_container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .reference-hero-container .bg > .image_container img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: bottom; object-position: bottom; } .reference-hero-container .bg > .customelement { height: 100%; } .reference-hero-container .bg > .customelement div { height: 100%; } @media all and (min-width: 39.4375rem) { .reference-hero-container .hl-container { position: absolute; left: 0; bottom: 0; z-index: 1; padding-left: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-bottom: 5rem; padding-bottom: clamp(2.5rem, 4.1665vw, 5rem); } } @media all and (min-width: 39.4375rem) and (max-width: 58.125rem) { .reference-hero-container .hl-container { padding-left: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); } } @media all and (min-width: 39.4375rem) { .reference-hero-container .hl-container h1, .reference-hero-container .hl-container h1 span, .reference-hero-container .hl-container p { color: #ffffff; } .reference-hero-container .hl-container h1 { font-size: 3.4375rem; font-size: clamp(1.375rem, 2.865vw, 3.4375rem); line-height: 1.15; } .reference-hero-container .hl-container h1 span.stars { line-height: 1; } .reference-hero-container .hl-container h1 span.stars:before { display: block; } .reference-hero-container .hl-container h1 span.stars.five_superior:before, .reference-hero-container .hl-container h1 span.stars.five:before { content: "*****"; } .reference-hero-container .hl-container h1 span.stars.four_superior:before, .reference-hero-container .hl-container h1 span.stars.four:before { content: "****"; } .reference-hero-container .hl-container h1 span.stars.three:before { content: "***"; } .reference-hero-container .hl-container h1 span.stars.superior { display: -webkit-box; display: -ms-flexbox; display: flex; } .reference-hero-container .hl-container h1 span.stars.superior > span { font-size: 60%; margin-left: 0.75rem; } .reference-hero-container .hl-container h1 span.light { font-family: "FFDINLight", sans-serif; } .reference-hero-container .hl-container h1 + p { margin-top: 20px; margin-top: clamp(14px, 1.355vw, 26px); } } @media all and (min-width: 39.4375rem) and (max-width: 64rem) { .reference-hero-container .hl-container { margin-bottom: 5rem; margin-bottom: clamp(2.5rem, 4.1665vw, 5rem); } } @media all and (min-width: 39.4375rem) { .reference-hero-container .bg { height: 100vh; } } @media all and (max-width: 39.375rem) { .reference-hero-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; height: 100vh; } .reference-hero-container .hl-container { padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); padding-top: 7.5rem; padding-top: clamp(3.75rem, 6.25vw, 7.5rem); padding-bottom: 7.5rem; padding-bottom: clamp(3.75rem, 6.25vw, 7.5rem); } } @media all and (max-width: 39.375rem) and (max-width: 58.125rem) { .reference-hero-container .hl-container { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .reference-content-container { padding-bottom: 10rem; padding-bottom: clamp(5rem, 8.333vw, 10rem); } .reference-content-container > .row .image_container a { cursor: -webkit-zoom-in; cursor: zoom-in; } .reference-content-container > .row h2.realized { font-size: 1.125rem; font-size: clamp(1rem, 0.9375vw, 1.125rem); } .reference-content-container > .row:not(.fw) { padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } @media all and (max-width: 58.125rem) { .reference-content-container > .row:not(.fw) { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .reference-content-container > .row.intro { padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); padding-top: 5rem; padding-top: clamp(2.5rem, 4.1665vw, 5rem); padding-bottom: 5rem; padding-bottom: clamp(2.5rem, 4.1665vw, 5rem); } @media all and (max-width: 58.125rem) { .reference-content-container > .row.intro { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } @media all and (max-width: 39.375rem) { .reference-content-container > .row.intro { padding-top: 0.1rem; } } .reference-content-container > .row.intro .text > p { padding-right: 25%; } .reference-content-container > .row.intro .text + .realized-by { margin-top: 5rem; margin-top: clamp(2.5rem, 4.1665vw, 5rem); } .reference-content-container > .row.features { display: -webkit-box; display: -ms-flexbox; display: flex; } @media all and (max-width: 39.375rem) { .reference-content-container > .row.features { -ms-flex-wrap: wrap; flex-wrap: wrap; } } .reference-content-container > .row.features .col.list { -ms-flex-negative: 1; flex-shrink: 1; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; padding-top: 7.5rem; padding-top: clamp(3.75rem, 6.25vw, 7.5rem); padding-bottom: 7.5rem; padding-bottom: clamp(3.75rem, 6.25vw, 7.5rem); padding-left: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: 12.15vw; padding-right: clamp(2.5rem, 12.15vw, 14.5rem); background-color: #EFF5F8; } @media all and (max-width: 58.125rem) { .reference-content-container > .row.features .col.list { padding-left: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); } } @media all and (max-width: 58.125rem) { .reference-content-container > .row.features .col.list { padding-right: 7.5vw; padding-right: clamp(2rem, 7.5vw, 4.375rem); } } @media all and (min-width: 71.9375rem) { .reference-content-container > .row.features .col.list { width: 42.7%; } } @media all and (max-width: 39.375rem) { .reference-content-container > .row.features .col.list { width: 100%; } } .reference-content-container > .row.features .col.list ul { list-style: none; margin: 0; padding: 0; } .reference-content-container > .row.features .col.list ul li a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #000000; text-decoration: none; } .reference-content-container > .row.features .col.list ul li a svg { display: block; width: 82px; width: clamp(45px, 4.275vw, 82px); height: auto; margin-right: 42px; margin-right: clamp(20px, 2.1875vw, 42px); } .reference-content-container > .row.features .col.list ul li a svg path { -webkit-transition: fill 0.35s ease-in; transition: fill 0.35s ease-in; } .reference-content-container > .row.features .col.list ul li a span { font-family: "FFDINLight", sans-serif; font-size: 1.125rem; font-size: clamp(1rem, 0.9375vw, 1.125rem); color: inherit; -webkit-transition: color 0.35s ease-in; transition: color 0.35s ease-in; } @media (hover: hover) { .reference-content-container > .row.features .col.list ul li a:hover { color: #007ac3; } .reference-content-container > .row.features .col.list ul li a:hover svg path { fill: #007ac3; } } .reference-content-container > .row.features .col.list ul li + li { margin-top: 30px; margin-top: clamp(15px, 1.5625vw, 30px); } .reference-content-container > .row.features .col.img { -ms-flex-negative: 1; flex-shrink: 1; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } @media all and (min-width: 71.9375rem) { .reference-content-container > .row.features .col.img { width: 57.3%; } } @media all and (max-width: 39.375rem) { .reference-content-container > .row.features .col.img { width: 100%; } } .reference-content-container > .row.features .col.img .image_container { position: relative; min-height: 100%; aspect-ratio: 1.51/1; } .reference-content-container > .row.features .col.img .image_container img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } .reference-content-container > .row.gallery { padding-top: 10rem; padding-top: clamp(5rem, 8.333vw, 10rem); } @media all and (min-width: 48rem) { .reference-content-container > .row.gallery { padding-bottom: 7.5rem; padding-bottom: clamp(3.75rem, 6.25vw, 7.5rem); } } @media all and (min-width: 48rem) { .reference-content-container > .row.gallery .cols:not(.count_1) { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } } .reference-content-container > .row.gallery .cols:not(.count_1) .col .video { position: relative; } .reference-content-container > .row.gallery .cols:not(.count_1) .col .video.imgSquare { aspect-ratio: 1/1; } .reference-content-container > .row.gallery .cols:not(.count_1) .col .video.imgHigh { aspect-ratio: 1/1.2; } .reference-content-container > .row.gallery .cols:not(.count_1) .col .video button.play { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; outline: none; background: none; padding: 0; position: absolute; top: 50%; left: 50%; z-index: 1; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 7.5rem; width: clamp(3.5rem, 5vw, 7.5rem); } .reference-content-container > .row.gallery .cols:not(.count_1) .col .video button.play svg { width: 100%; height: auto; display: block; } .reference-content-container > .row.gallery .cols:not(.count_1) .col .video button.play svg .button-circle circle { opacity: 0.25; -webkit-transition: opacity 0.35s ease-in; transition: opacity 0.35s ease-in; } @media (hover: hover) { .reference-content-container > .row.gallery .cols:not(.count_1) .col .video button.play:hover svg .button-circle circle { opacity: 0.75; } } .reference-content-container > .row.gallery .cols:not(.count_1) .col video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } .reference-content-container > .row.gallery .cols .col > * + * { margin-top: 7.5rem; margin-top: clamp(3.75rem, 6.25vw, 7.5rem); } .reference-content-container > .row.gallery .cols .col .video { position: relative; } .reference-content-container > .row.gallery .cols .col .video button.play { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; outline: none; background: none; padding: 0; position: absolute; top: 50%; left: 50%; z-index: 1; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 7.5rem; width: clamp(3.5rem, 5vw, 7.5rem); } .reference-content-container > .row.gallery .cols .col .video button.play svg { width: 100%; height: auto; display: block; } .reference-content-container > .row.gallery .cols .col .video button.play svg .button-circle circle { opacity: 0.25; -webkit-transition: opacity 0.35s ease-in; transition: opacity 0.35s ease-in; } @media (hover: hover) { .reference-content-container > .row.gallery .cols .col .video button.play:hover svg .button-circle circle { opacity: 0.75; } } @media all and (min-width: 48rem) { .reference-content-container > .row.gallery .cols .col { width: 50%; } .reference-content-container > .row.gallery .cols .col .image.imgHigh { padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } } @media all and (min-width: 48rem) and (max-width: 58.125rem) { .reference-content-container > .row.gallery .cols .col .image.imgHigh { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } @media all and (min-width: 48rem) { .reference-content-container > .row.gallery .cols .col:nth-child(1) { padding-left: 3.75rem; padding-left: clamp(1.875rem, 3.125vw, 3.75rem); } .reference-content-container > .row.gallery .cols .col:nth-child(1) .image.imgHigh { padding-left: 0; } .reference-content-container > .row.gallery .cols .col:nth-last-child(1) { padding-right: 3.75rem; padding-right: clamp(1.875rem, 3.125vw, 3.75rem); } .reference-content-container > .row.gallery .cols .col:nth-last-child(1) .image.imgHigh { padding-right: 0; } } @media all and (max-width: 47.9375rem) { .reference-content-container > .row.gallery .cols .col + .col { margin-top: 5px; } .reference-content-container > .row.gallery .cols .col .image + .image, .reference-content-container > .row.gallery .cols .col .image + .video, .reference-content-container > .row.gallery .cols .col .video + .image { margin-top: 5px; } } .reference-content-container > .row.gallery .cols.count_1 .col { padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); width: 100%; padding-top: 0 !important; } @media all and (max-width: 58.125rem) { .reference-content-container > .row.gallery .cols.count_1 .col { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .reference-content-container > .row.gallery .cols.count_1 .col video { width: 100%; height: auto; display: block; } @media all and (max-width: 47.9375rem) { .reference-content-container > .row.outro-image { margin-top: 5px; } } .reference-content-container > .row.outro-image .photo-credit { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); padding-top: 1.375rem; } @media all and (max-width: 58.125rem) { .reference-content-container > .row.outro-image .photo-credit { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .reference-content-container > .row.additional-info { margin-top: 5rem; margin-top: clamp(2.5rem, 4.1665vw, 5rem); } .reference-content-container > .row.additional-info .textarea h2, .reference-content-container > .row.additional-info .textarea h3, .reference-content-container > .row.additional-info .textarea h4, .reference-content-container > .row.additional-info .textarea h5, .reference-content-container > .row.additional-info .textarea h6 { font-size: 1.125rem; font-size: clamp(1rem, 0.9375vw, 1.125rem); margin-bottom: 1em; } @media all and (min-width: 33.8125rem) { .reference-content-container > .row.additional-info .textarea { -webkit-columns: 2; -moz-columns: 2; columns: 2; -webkit-column-gap: 3.125vw; -moz-column-gap: 3.125vw; column-gap: 3.125vw; -webkit-column-gap: clamp(1.875rem, 3.125vw, 3.75rem); -moz-column-gap: clamp(1.875rem, 3.125vw, 3.75rem); column-gap: clamp(1.875rem, 3.125vw, 3.75rem); } } .reference-content-container > .row.realized { padding-top: 7.5rem; padding-top: clamp(3.75rem, 6.25vw, 7.5rem); } .reference-content-container > .row.cta { position: relative; margin-top: 10rem; margin-top: clamp(5rem, 8.333vw, 10rem); } .reference-content-container > .row.cta .deco { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; } .reference-content-container > .row.cta .deco .graphic { position: absolute; opacity: 0.35; } .reference-content-container > .row.cta .deco .graphic svg { width: 100%; height: auto; display: block; } .reference-content-container > .row.cta .deco .graphic.-l { top: 0; width: 65.5%; } .reference-content-container > .row.cta .deco .graphic.-r { top: 25%; width: 25.5%; } .reference-content-container > .row.cta .deco.-l-s .graphic.-l { left: 0; } .reference-content-container > .row.cta .deco.-l-s .graphic.-r { right: 0; } .reference-content-container > .row.cta .deco.-s-l .graphic.-r { left: 0; } .reference-content-container > .row.cta .deco.-s-l .graphic.-l { right: 0; } .reference-content-container > .row.cta .deco.-s-l .graphic svg { -webkit-transform: scaleX(-1); transform: scaleX(-1); } .reference-content-container > .row.cta .cta-container { position: relative; z-index: 1; } .hero-slideshow .slide .ce_image { position: relative; overflow: hidden; height: 100%; /* @media all and (min-width: 64.0625rem) and (max-aspect-ratio: 1/1) { .image_container { img { height: 100%; width: auto; } } } @media all and (max-width: 64rem) { aspect-ratio: 2.4/1; } */ } .hero-slideshow .slide .ce_image .image_container { position: absolute; -webkit-transition: all 5s linear; transition: all 5s linear; width: 100%; height: 100%; } .hero-slideshow .slide .ce_image .image_container { position: absolute; -webkit-transition: all 10s linear; transition: all 10s linear; width: 100%; height: 100%; } .hero-slideshow .slide .ce_image .image_container img { width: 115%; height: 115%; max-width: none; -o-object-fit: cover; object-fit: cover; -o-object-position: bottom; object-position: bottom; } .hero-slideshow .slide.zoomIn .ce_image .image_container { top: 50%; left: 50%; bottom: 0; -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); } .hero-slideshow .slide.zoomIn.animate .ce_image .image_container { -webkit-transform: translate(-50%, -50%) scale(1.15); transform: translate(-50%, -50%) scale(1.15); } .hero-slideshow .slide.zoomOut .ce_image .image_container { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) scale(1.15); transform: translate(-50%, -50%) scale(1.15); } .hero-slideshow .slide.zoomOut.animate .ce_image .image_container { -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); } .hero-slideshow .slide.moveUp .ce_image .image_container { top: 0; left: -12.5%; -webkit-transform: translateY(0) scale(1.25); transform: translateY(0) scale(1.25); } .hero-slideshow .slide.moveUp.animate .ce_image .image_container { -webkit-transform: translateY(15%) scale(1.25); transform: translateY(15%) scale(1.25); } .hero-slideshow .slide.moveLeft .ce_image .image_container { top: 0; left: 0; -webkit-transform: translateX(0) scale(1.25); transform: translateX(0) scale(1.25); } .hero-slideshow .slide.moveLeft.animate .ce_image .image_container { -webkit-transform: translateX(-15%) scale(1.25); transform: translateX(-15%) scale(1.25); } .hero-slideshow .slide.moveRight .ce_image .image_container { top: 0; right: 0; -webkit-transform: translateX(0) scale(1.25); transform: translateX(0) scale(1.25); } .hero-slideshow .slide.moveRight.animate .ce_image .image_container { -webkit-transform: translateX(15%) scale(1.25); transform: translateX(15%) scale(1.25); } .hero-slideshow .slide.moveDown .ce_image .image_container { bottom: 0; left: -12.5%; -webkit-transform: translateY(0) scale(1.25); transform: translateY(0) scale(1.25); } .hero-slideshow .slide.moveDown.animate .ce_image .image_container { -webkit-transform: translateY(-15%) scale(1.25); transform: translateY(-15%) scale(1.25); } .ref_container { position: relative; z-index: 1; } .ref_container > * + * { margin-top: 2.5rem; margin-top: clamp(1.25rem, 2.1vw, 2.5rem); } .reference-slider-container { padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } @media all and (max-width: 58.125rem) { .reference-slider-container { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .reference-slider-container .inner { position: relative; } .reference-slider-container .inner .slick-arrow { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; outline: none; background: none; padding: 0; position: absolute; top: 50%; z-index: 1; width: 2.65vw; height: 2.65vw; width: clamp(2.25rem, 2.65vw, 3.125rem); height: clamp(2.25rem, 2.65vw, 3.125rem); margin-top: 0; background-color: #0B2437; background-image: url(../../files/theme/img/icons/icon-arrow-w.svg); background-repeat: no-repeat; background-size: 60%; background-position: center; -webkit-transition: background-color 0.35s ease-in; transition: background-color 0.35s ease-in; } .reference-slider-container .inner .slick-arrow.slick-prev { left: 0; -webkit-transform: translateY(-50%) scale(-1); transform: translateY(-50%) scale(-1); } .reference-slider-container .inner .slick-arrow.slick-next { right: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); } @media (hover: hover) { .reference-slider-container .inner .slick-arrow:hover { background-color: #007ac3; } } .reference-slider-container .inner .reference-slider { background-color: #ffffff; } .reference-slider-container .inner .reference-slider .slide-content { position: relative; display: block !important; } .reference-slider-container .inner .reference-slider .slide-content .inner { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .reference-slider-container .inner .reference-slider .slide-content .inner .info { position: relative; padding-top: 2.916667vw; padding-left: 5.8333vw; padding-right: 5.8333vw; padding-bottom: 2.916667vw; padding-top: clamp(2.5rem, 2.916667vw, 3.5rem); padding-left: clamp(2.75rem, 5.8333vw, 7rem); padding-right: clamp(2.75rem, 5.8333vw, 7rem); padding-bottom: clamp(2.5rem, 2.916667vw, 3.5rem); background-color: rgba(0, 0, 0, 0.45); -webkit-transition: background-color 0.35s ease-in; transition: background-color 0.35s ease-in; /* &:after { content: ""; @include stretch; background-color: rgba($black, .45); z-index: 0; } */ } .reference-slider-container .inner .reference-slider .slide-content .inner .info h2, .reference-slider-container .inner .reference-slider .slide-content .inner .info span.button { position: relative; color: #ffffff; z-index: 1; } .reference-slider-container .inner .reference-slider .slide-content .inner .info h2 { font-size: 3.125rem; font-size: clamp(1.375rem, 2.61vw, 3.125rem); text-align: center; } .reference-slider-container .inner .reference-slider .slide-content .inner .info .link { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .reference-slider-container .inner .reference-slider .slide-content .inner .info .link span.button { display: inline-block; font-family: "FFDINBold", sans-serif; font-size: 1.25rem; font-size: clamp(1rem, 1.1vw, 1.25rem); line-height: 1.1; text-decoration: none; border-bottom: 1px solid #ffffff; } .reference-slider-container .inner .reference-slider .slide-content .inner .info a { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; } .reference-slider-container .inner .reference-slider .slide-content .inner .info svg { position: absolute; top: 3.65vw; top: clamp(2.1875rem, 3.65vw, 4.375rem); right: 0; width: 3.5vw; width: clamp(1.5rem, 3.5vw, 4.1875rem); height: auto; display: block; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); z-index: 2; top: 1.25rem; right: 1.25rem; top: clamp(0.75rem, 1.05vw, 1.25rem); right: clamp(0.75rem, 1.05vw, 1.25rem); width: 1.6667vw; width: clamp(1.25rem, 1.6667vw, 2rem); opacity: 0; -webkit-transition: opacity 0.35s ease-in; transition: opacity 0.35s ease-in; } .reference-slider-container .inner .reference-slider .slide-content .inner .info svg path { fill: #ffffff !important; } @media (hover: hover) { .reference-slider-container .inner .reference-slider .slide-content .inner .info:hover { background-color: #007ac3; } .reference-slider-container .inner .reference-slider .slide-content .inner .info:hover svg { opacity: 1; } } .mod_customcataloglist.cc_locations .locations-list-container { padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } @media all and (max-width: 58.125rem) { .mod_customcataloglist.cc_locations .locations-list-container { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .mod_customcataloglist.cc_locations .locations-list-container .teaser-list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; width: calc(100% + 4.375vw); margin-left: -2.1875vw; } @media all and (min-width: 120.0625rem) { .mod_customcataloglist.cc_locations .locations-list-container .teaser-list { width: calc(100% + 5.25rem); margin-left: -2.625rem; } } @media all and (max-width: 58.125rem) { .mod_customcataloglist.cc_locations .locations-list-container .teaser-list { width: calc(100% + 2.5rem); margin-left: -1.25rem; } } .mod_customcataloglist.cc_locations .locations-list-container .teaser-list .teaser { width: 33.333%; padding-left: 2.1875vw; padding-right: 2.1875vw; } @media all and (min-width: 120.0625rem) { .mod_customcataloglist.cc_locations .locations-list-container .teaser-list .teaser { padding-left: 2.625rem; padding-right: 2.625rem; } } @media all and (max-width: 58.125rem) { .mod_customcataloglist.cc_locations .locations-list-container .teaser-list .teaser { padding-left: 1.25rem; padding-right: 1.25rem; } } @media all and (min-width: 58.1875rem) { .mod_customcataloglist.cc_locations .locations-list-container .teaser-list .teaser:nth-child(n+4) { margin-top: 5rem; margin-top: clamp(2.5rem, 4.1665vw, 5rem); } } @media all and (min-width: 33.8125rem) and (max-width: 58.125rem) { .mod_customcataloglist.cc_locations .locations-list-container .teaser-list .teaser { width: 50%; } .mod_customcataloglist.cc_locations .locations-list-container .teaser-list .teaser:nth-child(n+3) { margin-top: 5rem; margin-top: clamp(2.5rem, 4.1665vw, 5rem); } } @media all and (max-width: 33.75rem) { .mod_customcataloglist.cc_locations .locations-list-container .teaser-list .teaser { width: 100%; } .mod_customcataloglist.cc_locations .locations-list-container .teaser-list .teaser + .teaser { margin-top: 5rem; margin-top: clamp(2.5rem, 4.1665vw, 5rem); } } .mod_customcataloglist.cc_locations .locations-list-container .teaser-list .teaser .inner { position: relative; } .mod_customcataloglist.cc_locations .locations-list-container .teaser-list .teaser .inner .title h2 { font-size: 1.875rem; font-size: clamp(1.25rem, 1.5625vw, 1.875rem); margin-top: 2.61vw; margin-top: clamp(25px, 2.61vw, 50px); -webkit-transition: color 0.35s ease-in; transition: color 0.35s ease-in; } .mod_customcataloglist.cc_locations .locations-list-container .teaser-list .teaser .inner .button { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding-top: 25px; padding-top: clamp(18px, 1.31vw, 25px); padding-bottom: 10px; padding-bottom: clamp(6px, 0.521vw, 10px); border-bottom: 2px solid #000000; } .mod_customcataloglist.cc_locations .locations-list-container .teaser-list .teaser .inner .button div { font-family: "FFDINBold", sans-serif; font-size: 1.125rem; font-size: clamp(1rem, 0.9375vw, 1.125rem); -webkit-transition: color 0.35s ease-in; transition: color 0.35s ease-in; } .mod_customcataloglist.cc_locations .locations-list-container .teaser-list .teaser .inner .button svg { width: 1rem; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .mod_customcataloglist.cc_locations .locations-list-container .teaser-list .teaser .inner .button svg path { fill: #000000; -webkit-transition: fill 0.35s ease-in; transition: fill 0.35s ease-in; } .mod_customcataloglist.cc_locations .locations-list-container .teaser-list .teaser .inner a { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; } @media (hover: hover) { .mod_customcataloglist.cc_locations .locations-list-container .teaser-list .teaser .inner:hover .title h2 { color: #007ac3; } .mod_customcataloglist.cc_locations .locations-list-container .teaser-list .teaser .inner:hover .button div { color: #007ac3 !important; } .mod_customcataloglist.cc_locations .locations-list-container .teaser-list .teaser .inner:hover .button svg path { fill: #007ac3 !important; } } @media all and (min-width: 53.1875rem) { .mod_customcatalogreader.cc_locations .intro { display: -webkit-box; display: -ms-flexbox; display: flex; } } @media all and (min-width: 53.1875rem) { .mod_customcatalogreader.cc_locations .intro .col { width: 50%; } .mod_customcatalogreader.cc_locations .intro .col:nth-child(1) { padding-left: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: 5rem; padding-right: clamp(2.5rem, 4.1665vw, 5rem); } } @media all and (min-width: 53.1875rem) and (max-width: 58.125rem) { .mod_customcatalogreader.cc_locations .intro .col:nth-child(1) { padding-left: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); } } @media all and (min-width: 53.1875rem) { .mod_customcatalogreader.cc_locations .intro .col:nth-child(2) { padding-right: 12.15vw; padding-right: clamp(2.5rem, 12.15vw, 14.5rem); padding-left: 5rem; padding-left: clamp(2.5rem, 4.1665vw, 5rem); } } @media all and (min-width: 53.1875rem) and (max-width: 58.125rem) { .mod_customcatalogreader.cc_locations .intro .col:nth-child(2) { padding-right: 7.5vw; padding-right: clamp(2rem, 7.5vw, 4.375rem); } } @media all and (max-width: 53.125rem) { .mod_customcatalogreader.cc_locations .intro .col { padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } } @media all and (max-width: 53.125rem) and (max-width: 58.125rem) { .mod_customcatalogreader.cc_locations .intro .col { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } @media all and (max-width: 53.125rem) { .mod_customcatalogreader.cc_locations .intro .col:nth-child(1) { margin-bottom: 5rem; margin-bottom: clamp(2.5rem, 4.1665vw, 5rem); } } .mod_customcatalogreader.cc_locations .intro .col .ce_text ul li span { font-family: "FFDINBold", sans-serif; } .mod_customcatalogreader.cc_locations .noGallery { margin-bottom: 10rem; margin-bottom: clamp(5rem, 8.333vw, 10rem); } .mod_customcatalogreader.cc_locations .gallery { padding-top: 10rem; padding-top: clamp(5rem, 8.333vw, 10rem); margin-bottom: 10rem; margin-bottom: clamp(5rem, 8.333vw, 10rem); } @media all and (min-width: 48rem) { .mod_customcatalogreader.cc_locations .gallery { padding-bottom: 7.5rem; padding-bottom: clamp(3.75rem, 6.25vw, 7.5rem); } } @media all and (min-width: 48rem) { .mod_customcatalogreader.cc_locations .gallery .cols:not(.count_1) { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } } .mod_customcatalogreader.cc_locations .gallery .cols:not(.count_1) .col .video { position: relative; } .mod_customcatalogreader.cc_locations .gallery .cols:not(.count_1) .col .video.imgSquare { aspect-ratio: 1/1; } .mod_customcatalogreader.cc_locations .gallery .cols:not(.count_1) .col .video.imgHigh { aspect-ratio: 1/1.2; } .mod_customcatalogreader.cc_locations .gallery .cols:not(.count_1) .col .video button.play { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; outline: none; background: none; padding: 0; position: absolute; top: 50%; left: 50%; z-index: 1; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 7.5rem; width: clamp(3.5rem, 5vw, 7.5rem); } .mod_customcatalogreader.cc_locations .gallery .cols:not(.count_1) .col .video button.play svg { width: 100%; height: auto; display: block; } .mod_customcatalogreader.cc_locations .gallery .cols:not(.count_1) .col .video button.play svg .button-circle circle { opacity: 0.25; -webkit-transition: opacity 0.35s ease-in; transition: opacity 0.35s ease-in; } @media (hover: hover) { .mod_customcatalogreader.cc_locations .gallery .cols:not(.count_1) .col .video button.play:hover svg .button-circle circle { opacity: 0.75; } } .mod_customcatalogreader.cc_locations .gallery .cols:not(.count_1) .col video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } .mod_customcatalogreader.cc_locations .gallery .cols .col > * + * { margin-top: 7.5rem; margin-top: clamp(3.75rem, 6.25vw, 7.5rem); } .mod_customcatalogreader.cc_locations .gallery .cols .col .video { position: relative; } .mod_customcatalogreader.cc_locations .gallery .cols .col .video button.play { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; outline: none; background: none; padding: 0; position: absolute; top: 50%; left: 50%; z-index: 1; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 7.5rem; width: clamp(3.5rem, 5vw, 7.5rem); } .mod_customcatalogreader.cc_locations .gallery .cols .col .video button.play svg { width: 100%; height: auto; display: block; } .mod_customcatalogreader.cc_locations .gallery .cols .col .video button.play svg .button-circle circle { opacity: 0.25; -webkit-transition: opacity 0.35s ease-in; transition: opacity 0.35s ease-in; } @media (hover: hover) { .mod_customcatalogreader.cc_locations .gallery .cols .col .video button.play:hover svg .button-circle circle { opacity: 0.75; } } @media all and (min-width: 48rem) { .mod_customcatalogreader.cc_locations .gallery .cols .col { width: 50%; } .mod_customcatalogreader.cc_locations .gallery .cols .col .image.imgHigh { padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } } @media all and (min-width: 48rem) and (max-width: 58.125rem) { .mod_customcatalogreader.cc_locations .gallery .cols .col .image.imgHigh { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } @media all and (min-width: 48rem) { .mod_customcatalogreader.cc_locations .gallery .cols .col:nth-child(1) { padding-left: 3.75rem; padding-left: clamp(1.875rem, 3.125vw, 3.75rem); } .mod_customcatalogreader.cc_locations .gallery .cols .col:nth-child(1) .image.imgHigh { padding-left: 0; } .mod_customcatalogreader.cc_locations .gallery .cols .col:nth-last-child(1) { padding-right: 3.75rem; padding-right: clamp(1.875rem, 3.125vw, 3.75rem); } .mod_customcatalogreader.cc_locations .gallery .cols .col:nth-last-child(1) .image.imgHigh { padding-right: 0; } } @media all and (max-width: 47.9375rem) { .mod_customcatalogreader.cc_locations .gallery .cols .col + .col { margin-top: 5px; } .mod_customcatalogreader.cc_locations .gallery .cols .col .image + .image, .mod_customcatalogreader.cc_locations .gallery .cols .col .image + .video, .mod_customcatalogreader.cc_locations .gallery .cols .col .video + .image { margin-top: 5px; } } .mod_customcatalogreader.cc_locations .gallery .cols.count_1 .col { padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); width: 100%; padding-top: 0 !important; } @media all and (max-width: 58.125rem) { .mod_customcatalogreader.cc_locations .gallery .cols.count_1 .col { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .mod_customcatalogreader.cc_locations .gallery .cols.count_1 .col video { width: 100%; height: auto; display: block; } .mod_customcatalogreader.cc_locations .gallery .photo-credit { margin-top: 1.375rem; } .mod_customcatalogreader.cc_locations .gallery .photo-credit.align-left { padding-left: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); } @media all and (max-width: 58.125rem) { .mod_customcatalogreader.cc_locations .gallery .photo-credit.align-left { padding-left: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); } } .mod_customcatalogreader.cc_locations .gallery .photo-credit.align-right { margin-left: 50%; padding-left: 3.75rem; padding-left: clamp(1.875rem, 3.125vw, 3.75rem); } .mod_customcatalogreader.cc_locations .gallery .photo-credit.align-outer-right { padding-right: 12.15vw; padding-right: clamp(2.5rem, 12.15vw, 14.5rem); float: right; } @media all and (max-width: 58.125rem) { .mod_customcatalogreader.cc_locations .gallery .photo-credit.align-outer-right { padding-right: 7.5vw; padding-right: clamp(2rem, 7.5vw, 4.375rem); } } @media all and (min-width: 48rem) { .mod_customcatalogreader.cc_locations .gallery .cols .col:nth-child(1) { padding-top: 20.3125vw; padding-top: clamp(185px, 20.3125vw, 390px); } } .mod_customcatalogreader.cc_locations .contact { padding-left: 21.615vw; padding-right: 21.615vw; padding-left: clamp(6rem, 21.615vw, 25.9375rem); padding-right: clamp(6rem, 21.615vw, 25.9375rem); padding-left: 20.8333vw; padding-right: 20.8333vw; padding-left: clamp(5.0625rem, 20.8333vw, 25rem); padding-right: clamp(5.0625rem, 20.8333vw, 25rem); } @media all and (max-width: 39.375rem) { .mod_customcatalogreader.cc_locations .contact { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } @media all and (max-width: 39.375rem) { .mod_customcatalogreader.cc_locations .contact { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(1.0625rem, 3.646vw, 4.375rem); padding-right: clamp(1.0625rem, 3.646vw, 4.375rem); } } .special-element.se_benefits { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 5rem; margin-top: clamp(2.5rem, 4.1665vw, 5rem); position: relative; overflow: visible; } @media all and (max-width: 43.75rem) { .special-element.se_benefits { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } } .special-element.se_benefits .row, .special-element.se_benefits .col { position: relative; z-index: 1; } .special-element.se_benefits .row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; position: relative; width: 100%; overflow: visible; } .special-element.se_benefits .row .ce_player { position: relative; z-index: 1; width: 48%; min-width: 29.375rem; } @media all and (max-width: 39.375rem) { .special-element.se_benefits .row .ce_player { width: 100%; min-width: 0; padding-left: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); } } @media all and (max-width: 39.375rem) and (max-width: 58.125rem) { .special-element.se_benefits .row .ce_player { padding-left: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); } } .special-element.se_benefits .row .ce_player .video_container video { display: block; } .special-element.se_benefits .row:after { content: ""; position: absolute; top: -1px; left: 0; z-index: 0; height: 38.5%; width: 100%; background-color: inherit; } .special-element.se_benefits .col.cl { width: 52%; padding-left: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: 2.5%; padding-right: 4.75%; padding-right: clamp(2rem, 4.75%, 5.625rem); padding-top: 10rem; padding-top: clamp(5rem, 8.333vw, 10rem); } @media all and (max-width: 58.125rem) { .special-element.se_benefits .col.cl { padding-left: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); } } @media all and (max-width: 39.375rem) { .special-element.se_benefits .col.cl { width: 100%; padding-right: 12.15vw; padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } } @media all and (max-width: 39.375rem) and (max-width: 58.125rem) { .special-element.se_benefits .col.cl { padding-right: 7.5vw; padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .special-element.se_benefits .col.cr { width: 48%; padding-left: 4.75%; padding-left: clamp(2rem, 4.75%, 5.625rem); padding-right: 0; } @media all and (max-width: 39.375rem) { .special-element.se_benefits .col.cr { width: 100%; padding-left: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); } } @media all and (max-width: 39.375rem) and (max-width: 58.125rem) { .special-element.se_benefits .col.cr { padding-left: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); } } @media all and (max-width: 43.75rem) { .special-element.se_benefits .col.cl { width: 100%; padding-top: 5rem; padding-top: clamp(2.5rem, 4.1665vw, 5rem); padding-right: 12.15vw; padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } } @media all and (max-width: 43.75rem) and (max-width: 58.125rem) { .special-element.se_benefits .col.cl { padding-right: 7.5vw; padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .special-element.se_benefits .col.cr { width: 48%; min-width: 0; -ms-flex-negative: 0; flex-shrink: 0; } @media all and (max-width: 43.75rem) { .special-element.se_benefits .col.cr { width: 100%; padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } } @media all and (max-width: 43.75rem) and (max-width: 58.125rem) { .special-element.se_benefits .col.cr { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .special-element.se_benefits .text-container { margin-top: 5vw; margin-top: clamp(3.5rem, 5vw, 6rem); padding-left: 0; padding-right: 0; } @media all and (max-width: 78.125rem) { .special-element.se_benefits .text-container .inner .list-container .teaser-linklist-container .teaser-list { max-width: 100%; } } @media all and (max-width: 39.375rem) { .special-element.se_benefits .text-container { margin-top: 10rem; margin-top: clamp(5rem, 8.333vw, 10rem); } } body.theme--public .special-element.se_benefits { /* .custom-list { margin-top: 10rem; margin-top: clamp(5rem, 8.333vw, 10rem); @media all and (max-width: 39.375rem) { @include flow-spacing(margin-top); } } */ } body.theme--public .special-element.se_benefits .bg-graphic { position: absolute; left: 0; z-index: 0; top: 0; width: 45%; } @media all and (max-width: 39.375rem) { body.theme--public .special-element.se_benefits .bg-graphic { width: 70%; } } body.theme--public .special-element.se_benefits .bg-graphic svg { width: 100%; height: auto; display: block; } body.theme--private .special-element.se_benefits { position: relative; -ms-flex-wrap: initial; flex-wrap: initial; padding-top: 0; padding-bottom: 5rem; padding-bottom: clamp(2.5rem, 4.1665vw, 5rem); background-color: #f8fcfe; /* @media all and (max-width: 43.75rem) { @include flex-column-reverse; //@include flow-spacing-half(margin-top); } */ /* .col { &.cl { //width: 52%; flex-grow: 1; @include flow-spacing(padding-top); @include outer-width-l; padding-right: 2.5%; padding-right: 4.75%; padding-right: clamp(2rem, 4.75%, 5.625rem); @media all and (max-width: 43.75rem) { @include flow-spacing-half(padding-top); @include outer-width-r; } } &.cr { width: 48%; min-width: 0; flex-shrink: 0; @media all and (max-width: 43.75rem) { width: 100%; @include outer-width; } } } */ } body.theme--private .special-element.se_benefits:after { content: ""; position: absolute; top: -1px; left: 0; z-index: 0; height: 5rem; height: clamp(2.5rem, 4.1665vw, 5rem); width: 100%; background-color: #ffffff; } @media all and (max-width: 43.75rem) { body.theme--private .special-element.se_benefits:after { height: 10rem; height: clamp(5rem, 8.333vw, 10rem); } } body.theme--private .special-element.se_benefits .row:after { background-color: #ffffff; } .special-element.se_news-start { position: relative; overflow: visible; } .special-element.se_news-start:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 80%; background: #0B2437; z-index: 0; } .special-element.se_news-start > .special-headline { margin-top: 10rem; margin-top: clamp(5rem, 8.333vw, 10rem); } .special-element.se_news-start > .special-headline span { color: #ffffff; } .special-element.se_news-start > div { position: relative; z-index: 1; } .special-element.se_news-start > div > div { margin-top: 0 !important; } .special-element.se_news-start > div.mod_newslist { z-index: 2; } .special-element.se_news-start > div.text-container .bg:before { content: ""; position: absolute; top: -2px; left: 0; width: 100%; height: calc(100% + 2px); background: -webkit-gradient(linear, left top, left bottom, from(#0B2437), color-stop(13%, rgba(11, 36, 55, 0.9607843137)), to(rgba(11, 36, 55, 0))); background: linear-gradient(180deg, #0B2437 0%, rgba(11, 36, 55, 0.9607843137) 13%, rgba(11, 36, 55, 0) 100%); opacity: 1; } .hero-map-container.v1 { position: relative; overflow: visible; } @media all and (min-width: 48rem) { .hero-map-container.v1 { aspect-ratio: 2/1; } } .hero-map-container.v1 .text-container { padding-top: 20.5%; } @media all and (max-width: 47.9375rem) { .hero-map-container.v1 .text-container { padding-top: 40%; padding-top: clamp(170px, 30%, 220px); padding-bottom: 10rem; padding-bottom: clamp(5rem, 8.333vw, 10rem); } } .hero-map-container.v1 .text-container h1 { font-size: 3.4375rem; font-size: clamp(1.375rem, 2.865vw, 3.4375rem); line-height: 1.1778; } .hero-map-container.v1 .text-container .ce_text { max-width: 35vw; max-width: clamp(300px, 35vw, 600px); } .hero-map-container.v1 .map-container { position: absolute; top: 0; right: 0; width: 100%; } .hero-map-container.v1 .map-container ul { list-style: none; margin: 0; padding: 0; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .hero-map-container.v1 .map-container ul li { position: absolute; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .hero-map-container.v1 .map-container ul li svg { width: 1.3vw; width: clamp(14px, 1.3vw, 25px); } .hero-map-container.v1 .map-container ul li svg path { fill: #007ac3; } .hero-map-container.v1 .map-container ul li.main svg { width: 2.6vw; width: clamp(26px, 2.6vw, 50px); } .hero-map-container.v1 .map-container ul li.ospa-hauptsitz { top: 35.15%; left: 69.1%; } .hero-map-container.v2 > .inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media all and (max-width: 39.375rem) { .hero-map-container.v2 > .inner { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .hero-map-container.v2 > .inner .text-container { width: 51.05%; } .hero-map-container.v2 > .inner .text-container > .inner { max-width: 40.75rem; } @media all and (min-width: 78.1875rem) { .hero-map-container.v2 > .inner .text-container { padding-right: 0; } } @media all and (max-width: 64rem) { .hero-map-container.v2 > .inner .text-container { width: 65%; } } @media all and (min-width: 39.4375rem) and (max-width: 78.125rem) { .hero-map-container.v2 > .inner .text-container { padding-right: 1.5rem; } } @media all and (max-width: 78.125rem) { .hero-map-container.v2 > .inner .text-container { padding-top: 14.35vw; padding-top: clamp(9.0625rem, 14.35vw, 17.1875rem); padding-right: 1.5rem; } } @media all and (max-width: 39.375rem) { .hero-map-container.v2 > .inner .text-container { padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); width: 100%; } } @media all and (max-width: 39.375rem) and (max-width: 58.125rem) { .hero-map-container.v2 > .inner .text-container { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .hero-map-container.v2 > .inner .content-image { width: 48.95%; -ms-flex-negative: 0; flex-shrink: 0; } @media all and (max-width: 64rem) { .hero-map-container.v2 > .inner .content-image { width: 35%; } } @media all and (max-width: 39.375rem) { .hero-map-container.v2 > .inner .content-image { width: 100%; padding-left: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); margin-bottom: 10rem; margin-bottom: clamp(5rem, 8.333vw, 10rem); } } @media all and (max-width: 39.375rem) and (max-width: 58.125rem) { .hero-map-container.v2 > .inner .content-image { padding-left: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); } } @media all and (min-width: 39.4375rem) and (max-width: 78.125rem) { .hero-map-container.v2:not(.search) .text-container { margin-bottom: 10rem; margin-bottom: clamp(5rem, 8.333vw, 10rem); } } @media all and (max-width: 39.375rem) { .hero-map-container.v2:not(.search) .text-container { margin-bottom: 5rem; margin-bottom: clamp(2.5rem, 4.1665vw, 5rem); } } .hero-map-container.search > .inner { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -ms-flex-wrap: wrap; flex-wrap: wrap; } .hero-map-container.search > .inner h1 { font-size: 3.4375rem; font-size: clamp(1.375rem, 2.865vw, 3.4375rem); line-height: 1.18; } .hero-map-container.search > .inner .text-container { padding-top: 15.1vw; padding-top: clamp(150px, 15.1vw, 290px); } @media all and (max-width: 39.375rem) { .hero-map-container.search > .inner .text-container { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } } .hero-map-container.search > .inner .search-container { padding-top: 7.5rem; padding-top: clamp(3.75rem, 6.25vw, 7.5rem); } .hero-map-container.search > .inner .search-container .ce_form { padding-top: 52px; padding-top: clamp(40px, 2.7vw, 52px); padding-left: 80px; padding-left: clamp(30px, 4.1667vw, 80px); padding-right: 80px; padding-right: clamp(30px, 4.1667vw, 80px); padding-bottom: 28px; background-color: #C6DAED; } .hero-map-container.search > .inner .search-container .ce_form fieldset + fieldset { margin-top: 1.75rem; } .hero-map-container.search > .inner .search-container .ce_form .widget.widget-select label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: none; } .hero-map-container.search > .inner .search-container .ce_form .widget.widget-select select { background-image: url(../../files/theme/img/icons/icon-angle-down.svg); background-repeat: no-repeat; background-size: 22px; background-size: clamp(16px, 1.146vw, 22px); background-position: center right; } .hero-map-container.search > .inner .search-container .ce_form .widget.widget-submit { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } @media all and (max-width: 39.375rem) { .hero-map-container.search > .inner > .content-image { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } } .hero-map-container.search > .inner > .fachberater { width: 100%; margin-top: 1.5rem; padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); margin-bottom: 10rem; margin-bottom: clamp(5rem, 8.333vw, 10rem); } @media all and (max-width: 58.125rem) { .hero-map-container.search > .inner > .fachberater { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } @media all and (max-width: 39.375rem) { .hero-map-container.search > .inner > .fachberater { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } } .hero-map-container.search > .inner > .fachberater .ap_inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -ms-flex-wrap: wrap; flex-wrap: wrap; padding-top: 80px; padding-top: clamp(40px, 4.1667vw, 80px); padding-bottom: 80px; padding-bottom: clamp(24px, 3.333vw, 64px); background-color: #C6DAED; } .hero-map-container.search > .inner > .fachberater .ap_inner h2.error { font-size: 1.5rem; font-size: clamp(1.125rem, 1.25vw, 1.5rem); text-align: center; margin-bottom: 0; } .hero-map-container.search > .inner > .fachberater .ap_inner .item { padding-left: 80px; padding-left: clamp(30px, 4.1667vw, 80px); padding-right: 80px; padding-right: clamp(30px, 4.1667vw, 80px); } @media all and (min-width: 39.4375rem) { .hero-map-container.search > .inner > .fachberater .ap_inner .item:not(.fw) { width: 50%; } .hero-map-container.search > .inner > .fachberater .ap_inner .item:not(.fw):nth-child(n+3) { margin-top: 1.5rem; } } @media all and (max-width: 39.375rem) { .hero-map-container.search > .inner > .fachberater .ap_inner .item:not(.fw) { width: 100%; } .hero-map-container.search > .inner > .fachberater .ap_inner .item:not(.fw) + .item { margin-top: 2.5rem; margin-top: clamp(1.25rem, 2.1vw, 2.5rem); } } .hero-map-container.search > .inner > .fachberater .ap_inner .item.fw { width: 100%; } .hero-map-container.search > .inner > .fachberater .ap_inner .item .info { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media all and (max-width: 93.75rem) { .hero-map-container.search > .inner > .fachberater .ap_inner .item .info { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .hero-map-container.search > .inner > .fachberater .ap_inner .item .info h2 { font-size: 1.125rem; font-size: clamp(1rem, 0.9375vw, 1.125rem); width: 100%; margin-bottom: 0; } .hero-map-container.search > .inner > .fachberater .ap_inner .item .info * { line-height: 2; } .hero-map-container.search > .inner > .fachberater .ap_inner .item .info .ap_col { padding-bottom: 1rem; } @media all and (min-width: 93.8125rem) { .hero-map-container.search > .inner > .fachberater .ap_inner .item .info .ap_col.name { max-width: 60%; padding-right: 4.1667vw; padding-right: clamp(30px, 4.1667vw, 80px); } } .hero-map-container.search > .inner > .fachberater .ap_inner .item .info .ap_col.name p span { display: block; } @media all and (min-width: 93.8125rem) { .hero-map-container.search > .inner > .fachberater .ap_inner .item .info .ap_col.contact { max-width: 40%; } } .hero-map-container.search > .inner > .fachberater .ap_inner .item .info .ap_col.contact ul li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .hero-map-container.search > .inner > .fachberater .ap_inner .item .info .ap_col.contact ul li span, .hero-map-container.search > .inner > .fachberater .ap_inner .item .info .ap_col.contact ul li a { font-family: "FFDINBold", sans-serif; } .hero-map-container.search > .inner > .fachberater .ap_inner .item .info .ap_col.contact ul li svg { -ms-flex-negative: 0; flex-shrink: 0; width: 18px; display: block; margin-right: 1rem; } .hero-map-container.search > .inner > .fachberater .ap_inner .item .info .ap_col.contact ul li svg path { fill: #007ac3; } .hero-map-container.search > .inner > .fachberater .ap_inner .item .info .ap_col.contact ul li > a { color: #000000; text-decoration: none; -webkit-transition: color 0.35s ease-in; transition: color 0.35s ease-in; } @media (hover: hover) { .hero-map-container.search > .inner > .fachberater .ap_inner .item .info .ap_col.contact ul li > a:hover { color: #007ac3; } } .special-element.se_logo-list { padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); margin-top: -50px; margin-top: clamp(-50px, -2.6042vw, -40px); } @media all and (max-width: 58.125rem) { .special-element.se_logo-list { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .special-element.se_logo-list ul { list-style: none; margin: 0; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media all and (min-width: 120.0625rem) { .special-element.se_logo-list ul { width: calc(100% + 70px); margin-left: -35px; } } @media all and (max-width: 120rem) and (min-width: 85.8125rem) { .special-element.se_logo-list ul { width: calc(100% + 3.646vw); margin-left: -1.823vw; } } @media all and (max-width: 85.8125rem) { .special-element.se_logo-list ul { width: calc(100% + 50px); margin-left: -25px; } } .special-element.se_logo-list ul li { height: 100px; height: clamp(60px, 5.2083vw, 100px); margin-top: 50px; margin-top: clamp(40px, 2.6042vw, 50px); } @media all and (min-width: 120.0625rem) { .special-element.se_logo-list ul li { padding-left: 35px; padding-right: 35px; } } @media all and (max-width: 120rem) and (min-width: 85.8125rem) { .special-element.se_logo-list ul li { padding-left: 1.823vw; padding-right: 1.823vw; } } @media all and (max-width: 85.8125rem) { .special-element.se_logo-list ul li { padding-left: 25px; padding-right: 25px; } } .special-element.se_logo-list ul li img { height: 100%; width: auto; } .columns { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } @media all and (max-width: 58.125rem) { .columns { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .columns > div { width: 100%; } @media all and (min-width: 39.4375rem) { .columns > div:nth-child(odd) { padding-right: 1.5625vw; padding-right: clamp(0.9375rem, 1.5625vw, 1.875rem); } .columns > div:nth-child(even) { padding-left: 1.5625vw; padding-left: clamp(0.9375rem, 1.5625vw, 1.875rem); } } @media all and (max-width: 39.375rem) { .columns > div + div { margin-top: 5rem; margin-top: clamp(2.5rem, 4.1665vw, 5rem); } } @media all and (min-width: 39.4375rem) { .columns.cols_50-50 > div { width: 50%; } .columns.cols_45-55 > div:nth-child(odd) { width: 45%; } .columns.cols_45-55 > div:nth-child(even) { width: 55%; } .columns.cols_55-45 > div:nth-child(odd) { width: 55%; } .columns.cols_55-45 > div:nth-child(even) { width: 45%; } } @media all and (max-width: 39.375rem) { .columns.reverse { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } } .columns > div .columns { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 0; } .columns > div .columns > div { width: 100% !important; padding: 0 !important; } .columns .column > * { padding-left: 0; padding-right: 0; } @media all and (min-width: 64.0625rem) { .columns.gegenstromanlagen-vergleich > div:nth-child(odd) { width: 45.85%; padding-right: 0; } .columns.gegenstromanlagen-vergleich > div:nth-child(even) { width: 54.15%; padding-left: 8.275%; } } @media all and (max-width: 64rem) { .columns.gegenstromanlagen-vergleich.reverse { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .columns.gegenstromanlagen-vergleich.reverse > div:nth-child(odd), .columns.gegenstromanlagen-vergleich.reverse > div:nth-child(even) { width: 100%; padding-left: 0; padding-right: 0; } .columns.gegenstromanlagen-vergleich.reverse > div:nth-child(even) { margin-bottom: 5rem; margin-bottom: clamp(2.5rem, 4.1665vw, 5rem); } } @media all and (max-width: 43.75rem) { #scroll-container, .noscroll-container { margin-top: 0 !important; } } @media all and (min-width: 33.8125rem) and (max-width: 43.75rem) { #scroll-container, .noscroll-container { padding-top: 10rem; padding-top: clamp(5rem, 8.333vw, 10rem); } } @media all and (max-width: 33.75rem) { #scroll-container, .noscroll-container { padding-top: 5rem; padding-top: clamp(2.5rem, 4.1665vw, 5rem); } } #scroll-container { padding-top: 5rem; padding-top: clamp(2.5rem, 4.1665vw, 5rem); margin-top: 0 !important; margin-bottom: 5rem; margin-bottom: clamp(2.5rem, 4.1665vw, 5rem); } @media all and (min-width: 701px) { #scroll-container > * { padding-left: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: 46%; } } @media all and (min-width: 701px) and (max-width: 58.125rem) { #scroll-container > * { padding-left: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); } } @media all and (max-width: 700px) { #scroll-container > * { padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } } @media all and (max-width: 700px) and (max-width: 58.125rem) { #scroll-container > * { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } #scroll-container > * + * { margin-top: 5rem; margin-top: clamp(2.5rem, 4.1665vw, 5rem); } #scroll-container .text-container .inner .list-container .download-container .download-list { max-width: 100%; } @media all and (min-width: 43.8125rem) and (max-width: 84.375rem) { #scroll-container .text-container .inner .list-container .download-container .download-list { min-width: 0; max-width: 100%; width: 100%; } } body.basic #container .mod_article:nth-of-type(1) { padding-top: 0; } .mod_login, .mod_lostPassword { padding-left: 21.615vw; padding-right: 21.615vw; padding-left: clamp(6rem, 21.615vw, 25.9375rem); padding-right: clamp(6rem, 21.615vw, 25.9375rem); } @media all and (max-width: 39.375rem) { .mod_login, .mod_lostPassword { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } .mod_login form, .mod_lostPassword form { max-width: 57.125rem; max-width: clamp(36.25rem, 47.6vw, 57.125rem); margin-left: auto; margin-right: auto; } .mod_login .widget + .widget, .mod_lostPassword .widget + .widget { margin-top: 2rem; } .mod_login .widget.widget-text input.LV_invalid_field, .mod_login .widget.widget-password input.LV_invalid_field, .mod_lostPassword .widget.widget-text input.LV_invalid_field, .mod_lostPassword .widget.widget-password input.LV_invalid_field { border-color: #ff0000 !important; } .mod_login .widget.widget-text span.LV_validation_message, .mod_login .widget.widget-password span.LV_validation_message, .mod_lostPassword .widget.widget-text span.LV_validation_message, .mod_lostPassword .widget.widget-password span.LV_validation_message { display: block; margin-top: 0.5rem; font-family: "FFDINBold", sans-serif; color: #ff0000; } .mod_login .widget.widget-submit, .mod_lostPassword .widget.widget-submit { width: auto !important; } .mod_login .row, .mod_lostPassword .row { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .mod_login .row .ce_hyperlink.small a, .mod_lostPassword .row .ce_hyperlink.small a { position: relative; -webkit-appearance: none; -moz-appearance: none; appearance: none; display: inline-block; text-decoration: none; font-family: "FFDINBold", sans-serif; color: #000000; border-bottom: 1px solid #000000; margin-top: 1.25rem; -webkit-transition: all 0.35s ease-in; transition: all 0.35s ease-in; font-family: "FFDINLight", sans-serif; font-style: italic; } @media (hover: hover) { .mod_login .row .ce_hyperlink.small a:hover, .mod_lostPassword .row .ce_hyperlink.small a:hover { color: #007ac3; border-color: #007ac3; } } body.partner-zone { /* .mod_article { & > .inside { & > .ce_headline { @include outer-width; } } } */ /* .download-wrapper { & + .special-headline { @include flow-spacing(margin-top); } } */ } body.theme--public.ref-public .ce_image.skizze .caption { text-align: center; margin-top: 2rem; margin-top: clamp(1.5rem, 1.6667vw, 2rem); } body.theme--public.contact #container .mod_article:nth-of-type(1) { padding-top: 14.35vw; padding-top: clamp(9.0625rem, 14.35vw, 17.1875rem); } body.theme--public.contact .mod_breadcrumb { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } body.theme--public.contact .cta-container .inner h1 span, body.theme--public.contact .cta-container .inner h2 span, body.theme--public.contact .cta-container .inner h3 span, body.theme--public.contact .cta-container .inner h4 span, body.theme--public.contact .cta-container .inner h5 span, body.theme--public.contact .cta-container .inner h6 span { font-size: 3.4375rem; font-size: clamp(1.375rem, 2.865vw, 3.4375rem); line-height: 1.273; } body.theme--public.contact .cta-container .inner h1 span:nth-child(1), body.theme--public.contact .cta-container .inner h2 span:nth-child(1), body.theme--public.contact .cta-container .inner h3 span:nth-child(1), body.theme--public.contact .cta-container .inner h4 span:nth-child(1), body.theme--public.contact .cta-container .inner h5 span:nth-child(1), body.theme--public.contact .cta-container .inner h6 span:nth-child(1) { -webkit-transform: translateX(-3.5%); transform: translateX(-3.5%); } body.theme--public.contact .cta-container .inner h1 span:nth-child(2), body.theme--public.contact .cta-container .inner h2 span:nth-child(2), body.theme--public.contact .cta-container .inner h3 span:nth-child(2), body.theme--public.contact .cta-container .inner h4 span:nth-child(2), body.theme--public.contact .cta-container .inner h5 span:nth-child(2), body.theme--public.contact .cta-container .inner h6 span:nth-child(2) { -webkit-transform: translateX(3.5%); transform: translateX(3.5%); } body.theme--public.contact .cta-container .inner .ce_text { margin-top: 2.125rem; } body.theme--public.contact .cta-container .inner .ce_text p { font-size: 1.25rem; font-size: clamp(1rem, 1.1vw, 1.25rem); } body.theme--private.home #container .mod_article { position: relative; z-index: 2; } body.theme--private.home #container .mod_article.shiftUp { z-index: 1; } body.theme--private.home #container .mod_article.shiftUp + .mod_article { z-index: 0; } body.theme--private.home #container .mod_article:last-of-type .inside > :last-child:not(.-bg) { margin-bottom: 0; } @media all and (min-width: 39.4375rem) and (max-width: 58.125rem) { body.theme--private.home .tooltip_container li.open-h-right .tooltip-content, body.theme--private.home .tooltip_container li.open-h-center .tooltip-content { left: auto; right: 50%; -webkit-transform-origin: right; transform-origin: right; } body.theme--private.home .tooltip_container li.open-h-center .tooltip-content { -webkit-transform: scale(0, 1); transform: scale(0, 1); } body.theme--private.home .tooltip_container li.open-h-center.active .tooltip-content { -webkit-transform: scale(1, 1); transform: scale(1, 1); } } body.theme--private.probeschwimmen #intro .mod_article { overflow: visible; } body.theme--private.probeschwimmen .hero-map-container .map-container ul li.floatup-floating-center { top: 38.5%; left: 68.95%; } body.theme--private.probeschwimmen .hero-map-container .map-container ul li.steinbauer-gmbh { top: 36.55%; left: 77.05%; } body.theme--private.probeschwimmen .hero-map-container .map-container ul li.hermann-becker-gmbh-co { top: 26.45%; left: 65.67%; } body.theme--private.probeschwimmen .hero-map-container .map-container ul li.loechte-gmbh { top: 23.8%; left: 63.25%; } body.theme--private.probeschwimmen .hero-map-container .map-container ul li.vivell-ag-schwimmbadtechnik { top: 45.05%; left: 66.85%; } body.theme--private.probeschwimmen .hero-map-container .map-container ul li.weerts-pool-spa { top: 27.25%; left: 60.55%; } body.theme--private.probeschwimmen .hero-map-container .map-container ul li.gruenform-achtermann { top: 41.5%; left: 73.95%; } body.theme--private.probeschwimmen .cta-container.multisteps { padding-top: 10rem; padding-top: clamp(5rem, 8.333vw, 10rem); padding-bottom: 10rem; padding-bottom: clamp(5rem, 8.333vw, 10rem); } body.theme--private.probeschwimmen .cta-container.multisteps .inner { padding-bottom: 10rem; padding-bottom: clamp(5rem, 8.333vw, 10rem); } body.theme--private.partner #intro .mod_article { overflow: visible; } body.theme--private.partner-detail .hero_container .hero-section.-simple .inner .headline { margin-bottom: 0; } body.theme--private.partner-detail .text-container.no-img { padding-left: 21.615vw; padding-right: 21.615vw; padding-left: clamp(6rem, 21.615vw, 25.9375rem); padding-right: clamp(6rem, 21.615vw, 25.9375rem); margin-bottom: 5rem; margin-bottom: clamp(2.5rem, 4.1665vw, 5rem); } @media all and (max-width: 39.375rem) { body.theme--private.partner-detail .text-container.no-img { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } body.theme--private.partner-detail .text-container.realized-by .cols { display: block; } body.theme--private.partner-detail .text-container.realized-by .cols .col + .col { margin-top: 1rem; margin-left: 0; } @media all and (min-width: 39.4375rem) { body.theme--private.partner-detail .contact-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } body.theme--private.partner-detail .contact-wrapper > div:nth-child(odd) { width: 54.15%; padding-left: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: 8.275%; } } @media all and (min-width: 39.4375rem) and (max-width: 58.125rem) { body.theme--private.partner-detail .contact-wrapper > div:nth-child(odd) { padding-left: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); } } @media all and (min-width: 39.4375rem) { body.theme--private.partner-detail .contact-wrapper > div:nth-child(even) { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; padding-right: 12.15vw; padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } } @media all and (min-width: 39.4375rem) and (max-width: 58.125rem) { body.theme--private.partner-detail .contact-wrapper > div:nth-child(even) { padding-right: 7.5vw; padding-right: clamp(2rem, 7.5vw, 4.375rem); } } @media all and (max-width: 39.375rem) { body.theme--private.partner-detail .contact-wrapper { padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } } @media all and (max-width: 39.375rem) and (max-width: 58.125rem) { body.theme--private.partner-detail .contact-wrapper { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } @media all and (max-width: 39.375rem) { body.theme--private.partner-detail .contact-wrapper > div + div { margin-top: 5rem; margin-top: clamp(2.5rem, 4.1665vw, 5rem); } } body.theme--private.partner-detail #container .mod_article:nth-of-type(1) { padding-top: 0 !important; } body.theme--private.partner-detail #container .mod_article:nth-last-of-type(1) .inside > div:nth-of-type(1).teaser-bg-container { margin-bottom: 0 !important; } body.theme--private.contact .hero_container .hero-section.-simple .inner { padding-bottom: 0; } body.theme--private.landing.home .teaser-special-container .teaser a.button { display: none; } body.theme--private.landing.home .reference-slider .info { display: none; } body.theme--private.landing.home .button-all-references { margin-left: 12.15vw; margin-left: clamp(2.5rem, 12.15vw, 14.5rem); } body.theme--private.landing.home .button-all-references a { color: #ffffff; border-color: #ffffff; } body.theme--private.landing.downloads .hero-map-container.search > .inner > .search-container { width: 100%; padding-top: 0; padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } @media all and (max-width: 58.125rem) { body.theme--private.landing.downloads .hero-map-container.search > .inner > .search-container { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } body.theme--private.landing.downloads .hero-map-container.search > .inner > .search-container > .text { width: 100%; padding-top: 52px; padding-top: clamp(40px, 2.7vw, 52px); padding-left: 80px; padding-left: clamp(30px, 4.1667vw, 80px); padding-right: 80px; padding-right: clamp(30px, 4.1667vw, 80px); background-color: #C6DAED; } body.theme--private.landing.downloads .hero-map-container.search > .inner > .fachberater { margin-bottom: 0; } body.theme--private.landing.downloads .button-all-downloads { margin-top: 3.125rem; margin-top: clamp(1.25rem, 2.61vw, 3.125rem); margin-left: 12.15vw; margin-left: clamp(2.5rem, 12.15vw, 14.5rem); } body.editors #header .inside .logo svg path { fill: #007ac3 !important; } body.editors #header .inside .nav__block .meta button.hamburger .hamburger-box .hamburger-inner, body.editors #header .inside .nav__block .meta button.hamburger .hamburger-box .hamburger-inner:before, body.editors #header .inside .nav__block .meta button.hamburger .hamburger-box .hamburger-inner:after { background-color: #000000; } body.editors .ce_text.explanation, body.editors .ce_text.variant { padding: 1rem; padding-left: 12.15vw; padding-right: 12.15vw; padding-left: clamp(2.5rem, 12.15vw, 14.5rem); padding-right: clamp(2.5rem, 12.15vw, 14.5rem); } @media all and (max-width: 58.125rem) { body.editors .ce_text.explanation, body.editors .ce_text.variant { padding-left: 7.5vw; padding-right: 7.5vw; padding-left: clamp(2rem, 7.5vw, 4.375rem); padding-right: clamp(2rem, 7.5vw, 4.375rem); } } body.editors .ce_text.explanation { font-size: 14px; color: #ffffff; background: red; margin-top: 0 !important; } body.editors .ce_text.variant { padding-top: 1.5rem; padding-bottom: 0; } body.editors .relative_frame { position: relative; height: 30vh; min-height: 25rem; background: #cccccc; } body.editors .mod_article { padding-top: 0 !important; padding-bottom: 0 !important; } body.editors .mod_article.flow > .inside > .explanation + *, body.editors .mod_article.flow > .inside > .variant + * { margin-top: 0 !important; } body.editors .mod_article .inside > * { border-top: 1px dashed #cccccc; } body.editors .mod_article .inside > *:nth-child(1), body.editors .mod_article .inside > *.explanation, body.editors .mod_article .inside > *.explanation + *, body.editors .mod_article .inside > *.variant + * { border: none; } body.editors .mod_article .inside > *.variant { border-color: #000000; } /* Schnelle CSS Anpassungen während der Entwicklung. Sollte dann gelegentlich nach Prüfung und/oder Verbesserung in den Hauptzweig übernommen werden. */ /* Einheitliches PLZ-Label für die unterschiedlichen Länder (PLZ-DE, PLZ-ES) */ form div.plz label { display: none; }