/** Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) http://cssreset.com */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* 1. Corrects font family not being inherited in all browsers. 2. Corrects font size not being inherited in all browsers. 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome */ button, input, select, textarea { font-family: inherit; font-size: 100%; margin: 0; line-height: normal; } /* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls. 2. Corrects inability to style clickable `input` types in iOS. 3. Improves usability and consistency of cursor style between image-type `input` and others. */ button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } /* Re-set default cursor for disabled elements. */ button[disabled], input[disabled] { cursor: default; } /* 1. Addresses box sizing set to `content-box` in IE 8/9. 2. Removes excess padding in IE 8/9. */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; } /* 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome. 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome (include `-moz` to future-proof). */ input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } /* Removes inner padding and search cancel button in Safari 5 and Chrome on OS X. */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /* Removes inner padding and border in Firefox 4+. */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /* 1. Removes default vertical scrollbar in IE 8/9. 2. Improves readability and alignment in all browsers. */ textarea { overflow: auto; vertical-align: top; } /* Corrects font family set oddly in Safari 5 and Chrome. */ code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em; } /* Improves readability of pre-formatted text in all browsers. */ pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } .tooltip--content { border: 0 !important; clip: rect(0 0 0 0) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important; } @font-face { font-family: 'Suisse Intl'; font-style: normal; font-weight: 400; src: url("../fonts/SuisseIntl/webfiles/SuisseIntl-Regular-WebM.woff2") format("woff2"), url("../fonts/SuisseIntl/webfiles/SuisseIntl-Regular-WebM.woff") format("woff"); } @font-face { font-family: 'Suisse Intl'; font-style: normal; font-weight: 600; src: url("../fonts/SuisseIntl/webfiles/SuisseIntl-SemiBold-WebM.woff2") format("woff2"), url("../fonts/SuisseIntl/webfiles/SuisseIntl-SemiBold-WebM.woff") format("woff"); } body { font-family: "Suisse Intl", "Helvetica Neue", sans-serif; } .h1, .frm h1, .experience_header--title, .blog_post--title, .product_title--title, .system_message--title, .product_header--title { font-size: 50px; font-size: 2.77778rem; font-weight: 600; line-height: 1.08571; letter-spacing: -.015em; margin: 0; color: #f2f2f2; } @media (max-width: 750px) { .h1, .frm h1, .experience_header--title, .blog_post--title, .product_title--title, .system_message--title, .product_header--title { font-size: 26px; font-size: 1.44444rem; } } .h2, .product_teaser--title, .wysiwyg_text h1, .wysiwyg_text h2 { font-size: 36px; font-size: 2rem; font-weight: 600; line-height: 1.15789; letter-spacing: 0; margin: 0; color: #f1f1f1; } @media (max-width: 750px) { .h2, .product_teaser--title, .wysiwyg_text h1, .wysiwyg_text h2 { font-size: 21px; font-size: 1.16667rem; } } .h3, .teaser_grid--title, .section_title--title, .icon_list--entry--title { font-size: 22px; font-size: 1.22222rem; font-weight: 600; line-height: 1.33333; letter-spacing: 0; margin: 0; color: #d4d4d4; } @media (max-width: 750px) { .h3, .teaser_grid--title, .section_title--title, .icon_list--entry--title { font-size: 18px; font-size: 1rem; } } .h4 { font-weight: 600; } .btn, .btn-small, input[type="submit"], .frm h2, .download_item--link, .experience_header--name, .teaser_grid--more, .blog_post--date, .blog_post--author, .gallery--image_description span, .experience_teaser--name, .news_teaser--more, .map--infobox p.title, .link_item--link, .product_teaser--subtitle, .system_message--link a, .back_item--link, .slideshow--pager { font-size: 15px; font-size: 0.83333rem; font-weight: 600; text-decoration: none; text-align: center; line-height: 1.57143; letter-spacing: .005em; color: #fff; } @media (max-width: 750px) { .btn, .btn-small, input[type="submit"], .frm h2, .download_item--link, .experience_header--name, .teaser_grid--more, .blog_post--date, .blog_post--author, .gallery--image_description span, .experience_teaser--name, .news_teaser--more, .map--infobox p.title, .link_item--link, .product_teaser--subtitle, .system_message--link a, .back_item--link, .slideshow--pager { font-size: 13px; font-size: 0.72222rem; } } /* For IE 6/7 only Include this rule to trigger hasLayout and contain floats. */ .l-clearfix, .l-leftright { *zoom: 1; } .l-clearfix:before, .l-leftright:before, .l-clearfix:after, .l-leftright:after { content: ""; display: table; } .l-clearfix:after, .l-leftright:after { clear: both; } html { font-size: 18px; font-size: 112.5%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @media (max-width: 750px) { html { height: 100%; } } body { font-size: 18px; font-size: 1rem; line-height: 1.5; background: #222; color: #9d9d9d; } #body { position: relative; width: 100%; overflow: hidden; } p.p { margin-top: 1em; margin-bottom: 1em; } #site-container { min-height: 100%; } .site-page { position: relative; } .site-content { clear: both; } a { color: #d4d4d4; text-decoration: underline; -moz-transition: color 0.35s linear; -o-transition: color 0.35s linear; -webkit-transition: color 0.35s linear; transition: color 0.35s linear; } a:hover { color: #f3f3f3; } a:active { outline: none; } a:selected { border: none; outline: none; } a:focus { outline: none; } abbr { border-bottom: 1px dotted gray; } p sup, .t-sup { position: relative; top: -0.75ex; } p sub, .t-sub { position: relative; top: 0.5ex; } strong { font-weight: bold; } button { cursor: pointer; } .t-strong { font-weight: bold; } .t-left { text-align: left; } .t-right { text-align: right; } .t-center { text-align: center; } .t-small { font-size: smaller; } .t-nowrap { white-space: nowrap; } .l-content { background: #222; overflow: hidden; } .l-site-width { position: relative; max-width: 1280px; margin: 0 auto; padding: 0 80px; } @media only screen and (max-width: 1050px) { .l-site-width { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: auto; padding: 0 20px; } } .l-content-width { position: relative; width: 840px; margin: 0 auto; } @media only screen and (max-width: 850px) { .l-content-width { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: auto; padding: 0 20px; } } @media (max-width: 750px) { .l-content-width .cloudimage-360 { margin-left: -20px; margin-right: -20px; width: auto !important; } } .l-horizontal-list { list-style: none; margin: 0; padding: 0; } .l-horizontal-list > li { display: inline-block; vertical-align: top; *vertical-align: auto; *zoom: 1; *display: inline; } .l-horizontal > * { display: inline-block; vertical-align: top; *vertical-align: auto; *zoom: 1; *display: inline; } .l-horizontal-samewidth-list { list-style: none; margin: 0; padding: 0; width: 100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .l-horizontal-samewidth-list > li { -webkit-box-flex: 1; -moz-box-flex: 1; width: 500px; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .lt-ie10 .l-horizontal-samewidth-list { display: table; table-layout: fixed; } .lt-ie10 .l-horizontal-samewidth-list > li { width: auto; height: 100%; display: table-cell; } .l-grid { margin-right: -41px; font-size: 0.0000001px; } @media (max-width: 400px) { .l-grid { margin-right: -21px; } } .l-column { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; display: inline-block; vertical-align: top; *vertical-align: auto; *zoom: 1; *display: inline; padding-right: 40px; font-size: 18px; font-size: 1rem; } @media (max-width: 400px) { .l-column { padding-right: 20px; } } .l-gap, .l-grid.l-grid-gap > .l-column { margin-bottom: 40px; } .l-gap.l-gap-small, .l-grid.l-grid-gap.l-grid-gap-small > .l-column { margin-bottom: 20px; } .l-gap.l-gap-large, .l-grid.l-grid-gap.l-grid-gap-large > .l-column { margin-bottom: 80px; } .l-gap-above { margin-top: 40px; } .l-gap-above.l-gap-small { margin-top: 20px; } .l-gap-above.l-gap-large { margin-top: 80px; } .l-grid.l-grid-gap.l-grid-gap-small { margin-bottom: -20px; } .l-grid.l-grid-gap.l-grid-gap-large { margin-bottom: -80px; } .l-grid.l-grid-gap { margin-bottom: -40px; } .l-one-whole { width: 99.99%; } .l-one-half { width: 49.995%; } .l-one-quarter { width: 24.9975%; } .l-three-quarters { width: 74.9925%; } .l-one-third { width: 33.33%; } .l-two-thirds { width: 66.66%; } .l-one-fifth { width: 19.998%; } .l-two-fifths { width: 39.996%; } .l-three-fifths { width: 59.994%; } .l-four-fifths { width: 79.992%; } @media print { .l-print-one-whole { width: 99.99%; } .l-print-one-half { width: 49.995%; } .l-print-one-quarter { width: 24.9975%; } .l-print-three-quarters { width: 74.9925%; } .l-print-one-third { width: 33.33%; } .l-print-two-thirds { width: 66.66%; } .l-print-one-fifth { width: 19.998%; } } @media only screen and (max-width: 1050px) { .l-tablet-one-whole { width: 99.99%; } .l-tablet-one-half { width: 49.995%; } .l-tablet-one-quarter { width: 24.9975%; } .l-tablet-three-quarters { width: 74.9925%; } .l-tablet-one-third { width: 33.33%; } .l-tablet-two-thirds { width: 66.66%; } .l-tablet-one-fifth { width: 19.998%; } } @media only screen and (max-width: 850px) { .l-tablet-portrait-one-whole { width: 99.99%; } .l-tablet-portrait-one-half { width: 49.995%; } .l-tablet-portrait-one-quarter { width: 24.9975%; } .l-tablet-portrait-three-quarters { width: 74.9925%; } .l-tablet-portrait-one-third { width: 33.33%; } .l-tablet-portrait-two-thirds { width: 66.66%; } .l-tablet-portrait-one-fifth { width: 19.998%; } } @media (max-width: 750px) { .l-mobile-one-whole { width: 99.99%; } .l-mobile-one-half { width: 49.995%; } .l-mobile-one-quarter { width: 24.9975%; } .l-mobile-three-quarters { width: 74.9925%; } .l-mobile-one-third { width: 33.33%; } .l-mobile-two-thirds { width: 66.66%; } .l-mobile-one-fifth { width: 19.998%; } } @media (max-width: 400px) { .l-mobile-portrait-one-whole { width: 99.99%; } .l-mobile-portrait-one-half { width: 49.995%; } .l-mobile-portrait-one-quarter { width: 24.9975%; } .l-mobile-portrait-three-quarters { width: 74.9925%; } .l-mobile-portrait-one-third { width: 33.33%; } .l-mobile-portrait-two-thirds { width: 66.66%; } .l-mobile-portrait-one-fifth { width: 19.998%; } } .l-leftright .l-left { display: block; float: left; } .l-leftright .l-right { display: block; float: right; } .l-leftright-table { display: table; width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .l-leftright-table .l-left, .l-leftright-table .l-right { display: table-cell; vertical-align: middle; } .l-leftright-table .l-right { text-align: right; } @media only screen and (max-width: 1050px) { .l-leftright.l-tablet-leftright-reset .l-left, .l-leftright.l-tablet-leftright-reset .l-right { float: none; } .l-leftright-table.l-tablet-leftright-reset { display: block; } .l-leftright-table.l-tablet-leftright-reset .l-left, .l-leftright-table.l-tablet-leftright-reset .l-right { display: block; text-align: left; } } @media only screen and (max-width: 850px) { .l-leftright.l-tablet-portrait-leftright-reset .l-left, .l-leftright.l-tablet-portrait-leftright-reset .l-right { float: none; } .l-leftright-table.l-tablet-portrait-leftright-reset { display: block; } .l-leftright-table.l-tablet-portrait-leftright-reset .l-left, .l-leftright-table.l-tablet-portrait-leftright-reset .l-right { display: block; text-align: left; } } @media (max-width: 750px) { .l-leftright.l-mobile-leftright-reset .l-left, .l-leftright.l-mobile-leftright-reset .l-right { float: none; } .l-leftright-table.l-mobile-leftright-reset { display: block; } .l-leftright-table.l-mobile-leftright-reset .l-left, .l-leftright-table.l-mobile-leftright-reset .l-right { display: block; text-align: left; } } @media (max-width: 400px) { .l-leftright.l-mobile-portrait-leftright-reset .l-left, .l-leftright.l-mobile-portrait-leftright-reset .l-right { float: none; } .l-leftright-table.l-mobile-portrait-leftright-reset { display: block; } .l-leftright-table.l-mobile-portrait-leftright-reset .l-left, .l-leftright-table.l-mobile-portrait-leftright-reset .l-right { display: block; text-align: left; } } .l-left-float { float: left; } .l-right-float { float: right; } .l-clear-float { clear: left; } .tooltip.tooltip-icon:before, .icon:before, .pagination--button:before { background-image: url("../img/icons--sprite.png?20240717"); } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .tooltip.tooltip-icon:before, .icon:before, .pagination--button:before { background-image: url("../img/icons2x--sprite.png?20240717"); background-size: 417px 397px; } } .icon-logo:before, .icon-logo { background-position: -1px -1px; width: 140px; height: 25px; margin-left: -70px; margin-top: -13px; } .icon-instagram-new:before, .icon-instagram-new { background-position: -1px -28px; width: 80px; height: 80px; margin-left: -40px; margin-top: -40px; } .icon-engine:before, .icon-engine { background-position: -143px -1px; width: 80px; height: 80px; margin-left: -40px; margin-top: -40px; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .icon-engine:before, .icon-engine { background-position: -83px -110px; } } .icon-faq:before, .icon-faq { background-position: -1px -110px; width: 80px; height: 80px; margin-left: -40px; margin-top: -40px; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .icon-faq:before, .icon-faq { background-position: -143px -1px; } } .icon-youtube-new:before, .icon-youtube-new { background-position: -83px -110px; width: 80px; height: 80px; margin-left: -40px; margin-top: -40px; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .icon-youtube-new:before, .icon-youtube-new { background-position: -1px -110px; } } .icon-connected:before, .icon-connected { background-position: -225px -1px; width: 80px; height: 80px; margin-left: -40px; margin-top: -40px; } .icon-invisible:before, .icon-invisible { background-position: -225px -83px; width: 80px; height: 80px; margin-left: -40px; margin-top: -40px; } .icon-support:before, .icon-support { background-position: -1px -192px; width: 74px; height: 80px; margin-left: -37px; margin-top: -40px; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .icon-support:before, .icon-support { background-position: -77px -192px; } } .icon-ride-quality:before, .icon-ride-quality { background-position: -77px -192px; width: 74px; height: 80px; margin-left: -37px; margin-top: -40px; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .icon-ride-quality:before, .icon-ride-quality { background-position: -1px -192px; } } .icon-swiss-tech:before, .icon-swiss-tech { background-position: -153px -192px; width: 73px; height: 80px; margin-left: -37px; margin-top: -40px; } .icon-spare-parts:before, .icon-spare-parts { background-position: -228px -192px; width: 64px; height: 80px; margin-left: -32px; margin-top: -40px; } .icon-service:before, .icon-service { background-position: -307px -1px; width: 62px; height: 80px; margin-left: -31px; margin-top: -40px; } .icon-performance:before, .icon-performance { background-position: -307px -83px; width: 62px; height: 80px; margin-left: -31px; margin-top: -40px; } .icon-app:before, .icon-app { background-position: -307px -165px; width: 59px; height: 80px; margin-left: -30px; margin-top: -40px; } .icon-display:before, .icon-display { background-position: -83px -28px; width: 53px; height: 80px; margin-left: -27px; margin-top: -40px; } .icon-download-new:before, .icon-download-new { background-position: -165px -110px; width: 46px; height: 80px; margin-left: -23px; margin-top: -40px; } .icon-lightweight:before, .icon-lightweight { background-position: -1px -274px; width: 44px; height: 80px; margin-left: -22px; margin-top: -40px; } .icon-battery:before, .icon-battery { background-position: -47px -274px; width: 32px; height: 80px; margin-left: -16px; margin-top: -40px; } .icon-twist-shift:before, .icon-twist-shift { background-position: -81px -274px; width: 65px; height: 30px; margin-left: -33px; margin-top: -15px; } .icon-screwdriver:before, .icon-screwdriver { background-position: -81px -306px; width: 46px; height: 46px; margin-left: -23px; margin-top: -23px; } .icon-motor:before, .icon-motor { background-position: -129px -306px; width: 46px; height: 44px; margin-left: -23px; margin-top: -22px; } .icon-cloud:before, .icon-cloud { background-position: -177px -306px; width: 46px; height: 39px; margin-left: -23px; margin-top: -20px; } .icon-batterie:before, .icon-batterie { background-position: -148px -274px; width: 46px; height: 27px; margin-left: -23px; margin-top: -14px; } .icon-sensor:before, .icon-sensor { background-position: -307px -247px; width: 46px; height: 24px; margin-left: -23px; margin-top: -12px; } .icon-helpcenter:before, .icon-helpcenter { background-position: -371px -1px; width: 45px; height: 45px; margin-left: -23px; margin-top: -23px; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .icon-helpcenter:before, .icon-helpcenter { background-position: -371px -189px; } } .icon-elektrobike:before, .icon-elektrobike { background-position: -371px -48px; width: 45px; height: 45px; margin-left: -23px; margin-top: -23px; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .icon-elektrobike:before, .icon-elektrobike { background-position: -371px -95px; } } .icon-swiss-made:before, .icon-swiss-made { background-position: -371px -95px; width: 45px; height: 45px; margin-left: -23px; margin-top: -23px; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .icon-swiss-made:before, .icon-swiss-made { background-position: -371px -1px; } } .icon-gauge:before, .icon-gauge { background-position: -371px -142px; width: 45px; height: 45px; margin-left: -23px; margin-top: -23px; } .icon-natural-feeling:before, .icon-natural-feeling { background-position: -371px -189px; width: 45px; height: 45px; margin-left: -23px; margin-top: -23px; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .icon-natural-feeling:before, .icon-natural-feeling { background-position: -371px -48px; } } .icon-light-and-strong:before, .icon-light-and-strong { background-position: -371px -236px; width: 45px; height: 45px; margin-left: -23px; margin-top: -23px; } .icon-gears:before, .icon-gears { background-position: -371px -283px; width: 45px; height: 43px; margin-left: -23px; margin-top: -22px; } .icon-check:before, .icon-check { background-position: -1px -356px; width: 40px; height: 40px; margin-left: -20px; margin-top: -20px; } .icon-steuerung:before, .icon-steuerung { background-position: -43px -356px; width: 31px; height: 40px; margin-left: -16px; margin-top: -20px; } .icon-map-point-fav:before, .icon-map-point-fav { background-position: -225px -306px; width: 25px; height: 31px; margin-left: -13px; margin-top: -16px; } .icon-map-point-open:before, .icon-map-point-open { background-position: -252px -306px; width: 25px; height: 31px; margin-left: -13px; margin-top: -16px; } .icon-map-point:before, .icon-map-point { background-position: -279px -306px; width: 25px; height: 31px; margin-left: -13px; margin-top: -16px; } .icon-map-point-fav-open:before, .icon-map-point-fav-open { background-position: -306px -306px; width: 25px; height: 30px; margin-left: -13px; margin-top: -15px; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .icon-map-point-fav-open:before, .icon-map-point-fav-open { background-position: -355px -247px; } } .icon-loader:before, .icon-loader { background-position: -333px -306px; width: 27px; height: 28px; margin-left: -14px; margin-top: -14px; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .icon-loader:before, .icon-loader { background-position: -306px -306px; } } .icon-locate:before, .icon-locate { background-position: -371px -328px; width: 25px; height: 24px; margin-left: -13px; margin-top: -12px; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .icon-locate:before, .icon-locate { background-position: -252px -165px; } } .icon-locate-neg-rollover:before, .icon-locate-neg-rollover { background-position: -225px -165px; width: 25px; height: 24px; margin-left: -13px; margin-top: -12px; } .icon-locate-rollover:before, .icon-locate-rollover { background-position: -252px -165px; width: 25px; height: 24px; margin-left: -13px; margin-top: -12px; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .icon-locate-rollover:before, .icon-locate-rollover { background-position: -371px -328px; } } .icon-pfeil-detail:before, .icon-pfeil-detail { background-position: -398px -328px; width: 9px; height: 21px; margin-left: -5px; margin-top: -11px; } .icon-zoom-out:before, .icon-zoom-out { background-position: -279px -165px; width: 20px; height: 20px; margin-left: -10px; margin-top: -10px; } .icon-back:before, .icon-back { background-position: -143px -83px; width: 20px; height: 20px; margin-left: -10px; margin-top: -10px; } .icon-back-rollover:before, .back_item--link:hover .back_item--link--icon.icon:before, .icon-back-rollover { background-position: -165px -83px; width: 20px; height: 20px; margin-left: -10px; margin-top: -10px; } .icon-close:before, .icon-close { background-position: -187px -83px; width: 20px; height: 20px; margin-left: -10px; margin-top: -10px; } .icon-close-neg:before, .icon-close-neg { background-position: -196px -274px; width: 20px; height: 20px; margin-left: -10px; margin-top: -10px; } .icon-download:before, .icon-download { background-position: -218px -274px; width: 20px; height: 20px; margin-left: -10px; margin-top: -10px; } .icon-download-rollover:before, .download_item--link:hover .download_item--link--icon.icon:before, .icon-download-rollover { background-position: -240px -274px; width: 20px; height: 20px; margin-left: -10px; margin-top: -10px; } .icon-facebook:before, .icon-facebook { background-position: -262px -274px; width: 20px; height: 20px; margin-left: -10px; margin-top: -10px; } .icon-facebook-neg:before, .icon-facebook-neg { background-position: -284px -274px; width: 20px; height: 20px; margin-left: -10px; margin-top: -10px; } .icon-fav:before, .icon-fav { background-position: -306px -274px; width: 20px; height: 20px; margin-left: -10px; margin-top: -10px; } .icon-goto:before, .icon-goto { background-position: -328px -274px; width: 20px; height: 20px; margin-left: -10px; margin-top: -10px; } .icon-goto-rollover:before, .link_item--link:hover .link_item--link--icon.icon:before, .icon-goto-rollover { background-position: -76px -356px; width: 20px; height: 20px; margin-left: -10px; margin-top: -10px; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .icon-goto-rollover:before, .link_item--link:hover .link_item--link--icon.icon:before, .icon-goto-rollover { background-position: -335px -306px; } } .icon-info-white:before, .tooltip.tooltip-icon:before, .icon-info-white { background-position: -98px -356px; width: 20px; height: 20px; margin-left: -10px; margin-top: -10px; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .icon-info-white:before, .tooltip.tooltip-icon:before, .icon-info-white { background-position: -76px -356px; } } .icon-instagram:before, .icon-instagram { background-position: -120px -356px; width: 20px; height: 20px; margin-left: -10px; margin-top: -10px; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .icon-instagram:before, .icon-instagram { background-position: -98px -356px; } } .icon-instagram-neg:before, .icon-instagram-neg { background-position: -142px -356px; width: 20px; height: 20px; margin-left: -10px; margin-top: -10px; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .icon-instagram-neg:before, .icon-instagram-neg { background-position: -120px -356px; } } .icon-kontakt:before, .icon-kontakt { background-position: -164px -356px; width: 20px; height: 20px; margin-left: -10px; margin-top: -10px; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .icon-kontakt:before, .icon-kontakt { background-position: -142px -356px; } } .icon-left:before, .icon-left { background-position: -186px -356px; width: 20px; height: 20px; margin-left: -10px; margin-top: -10px; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .icon-left:before, .icon-left { background-position: -164px -356px; } } .icon-left-neg:before, .pagination--button-prev:before, .icon-left-neg { background-position: -208px -356px; width: 20px; height: 20px; margin-left: -10px; margin-top: -10px; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .icon-left-neg:before, .pagination--button-prev:before, .icon-left-neg { background-position: -186px -356px; } } .icon-right:before, .icon-right { background-position: -230px -356px; width: 20px; height: 20px; margin-left: -10px; margin-top: -10px; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .icon-right:before, .icon-right { background-position: -208px -356px; } } .icon-right-neg:before, .pagination--button-next:before, .icon-right-neg { background-position: -252px -356px; width: 20px; height: 20px; margin-left: -10px; margin-top: -10px; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .icon-right-neg:before, .pagination--button-next:before, .icon-right-neg { background-position: -230px -356px; } } .icon-shop:before, .icon-shop { background-position: -274px -356px; width: 20px; height: 20px; margin-left: -10px; margin-top: -10px; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .icon-shop:before, .icon-shop { background-position: -252px -356px; } } .icon-twitter:before, .icon-twitter { background-position: -296px -356px; width: 20px; height: 20px; margin-left: -10px; margin-top: -10px; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .icon-twitter:before, .icon-twitter { background-position: -274px -356px; } } .icon-twitter-neg:before, .icon-twitter-neg { background-position: -318px -356px; width: 20px; height: 20px; margin-left: -10px; margin-top: -10px; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .icon-twitter-neg:before, .icon-twitter-neg { background-position: -296px -356px; } } .icon-youtube:before, .icon-youtube { background-position: -340px -356px; width: 20px; height: 20px; margin-left: -10px; margin-top: -10px; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .icon-youtube:before, .icon-youtube { background-position: -318px -356px; } } .icon-youtube-neg:before, .icon-youtube-neg { background-position: -362px -356px; width: 20px; height: 20px; margin-left: -10px; margin-top: -10px; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .icon-youtube-neg:before, .icon-youtube-neg { background-position: -340px -356px; } } .icon-zoom:before, .icon-zoom { background-position: -384px -356px; width: 20px; height: 20px; margin-left: -10px; margin-top: -10px; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .icon-zoom:before, .icon-zoom { background-position: -362px -356px; } } .icon-map-point-neg:before, .icon-map-point-neg { background-position: -350px -274px; width: 18px; height: 18px; margin-left: -9px; margin-top: -9px; } .icon-menu:before, .icon-menu { background-position: -76px -378px; width: 16px; height: 9px; margin-left: -8px; margin-top: -5px; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .icon-menu:before, .icon-menu { background-position: -384px -356px; } } .icon-accordion-footer-open:before, .icon-accordion-footer-open { background-position: -355px -247px; width: 12px; height: 7px; margin-left: -6px; margin-top: -4px; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .icon-accordion-footer-open:before, .icon-accordion-footer-open { background-position: -209px -92px; } } .icon-accordion-footer:before, .icon-accordion-footer { background-position: -355px -256px; width: 12px; height: 7px; margin-left: -6px; margin-top: -4px; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .icon-accordion-footer:before, .icon-accordion-footer { background-position: -357px -306px; } } .icon-accordion-footer-white:before, .icon-accordion-footer-white { background-position: -209px -83px; width: 12px; height: 7px; margin-left: -6px; margin-top: -4px; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .icon-accordion-footer-white:before, .icon-accordion-footer-white { background-position: -355px -264px; } } .icon-accordion-footer-open-white:before, .icon-accordion-footer-open-white { background-position: -209px -92px; width: 12px; height: 7px; margin-left: -6px; margin-top: -4px; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .icon-accordion-footer-open-white:before, .icon-accordion-footer-open-white { background-position: -209px -83px; } } .icon-dropdown:before, .icon-dropdown { background-position: -355px -265px; width: 12px; height: 5px; margin-left: -6px; margin-top: -3px; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .icon-dropdown:before, .icon-dropdown { background-position: -196px -296px; } } .icon-plus-icon:before, .icon-plus-icon { background-position: -294px -192px; width: 11px; height: 11px; margin-left: -6px; margin-top: -6px; } .icon-bullet-point:before, .icon-bullet-point { background-position: -409px -328px; width: 4px; height: 7px; margin-left: -2px; margin-top: -4px; } .tooltip.tooltip-icon:before, .icon:before, .pagination--button:before { content: ""; position: absolute; top: 50%; left: 50%; } .tooltip.tooltip-icon:before { margin-left: 0; left: auto; right: 0; } .icon, .pagination--button { display: inline-block; vertical-align: middle; text-indent: -9999px; letter-spacing: -1ex; text-decoration: none; padding: 0; margin: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; } .icon-logo { margin: 0; } .icon-instagram-new { margin: 0; } .icon-engine { margin: 0; } .icon-faq { margin: 0; } .icon-youtube-new { margin: 0; } .icon-connected { margin: 0; } .icon-invisible { margin: 0; } .icon-support { margin: 0; } .icon-ride-quality { margin: 0; } .icon-swiss-tech { margin: 0; } .icon-spare-parts { margin: 0; } .icon-service { margin: 0; } .icon-performance { margin: 0; } .icon-app { margin: 0; } .icon-display { margin: 0; } .icon-download-new { margin: 0; } .icon-lightweight { margin: 0; } .icon-battery { margin: 0; } .icon-twist-shift { margin: 0; } .icon-screwdriver { margin: 0; } .icon-motor { margin: 0; } .icon-cloud { margin: 0; } .icon-batterie { margin: 0; } .icon-sensor { margin: 0; } .icon-helpcenter { margin: 0; } .icon-elektrobike { margin: 0; } .icon-swiss-made { margin: 0; } .icon-gauge { margin: 0; } .icon-natural-feeling { margin: 0; } .icon-light-and-strong { margin: 0; } .icon-gears { margin: 0; } .icon-check { margin: 0; } .icon-steuerung { margin: 0; } .icon-map-point-fav { margin: 0; } .icon-map-point-open { margin: 0; } .icon-map-point { margin: 0; } .icon-map-point-fav-open { margin: 0; } .icon-loader { margin: 0; } .icon-locate { margin: 0; } .icon-locate-neg-rollover { margin: 0; } .icon-locate-rollover { margin: 0; } .icon-pfeil-detail { margin: 0; } .icon-zoom-out { margin: 0; } .icon-back { margin: 0; } .icon-back-rollover { margin: 0; } .icon-close { margin: 0; } .icon-close-neg { margin: 0; } .icon-download { margin: 0; } .icon-download-rollover { margin: 0; } .icon-facebook { margin: 0; } .icon-facebook-neg { margin: 0; } .icon-fav { margin: 0; } .icon-goto { margin: 0; } .icon-goto-rollover { margin: 0; } .icon-info-white { margin: 0; } .icon-instagram { margin: 0; } .icon-instagram-neg { margin: 0; } .icon-kontakt { margin: 0; } .icon-left { margin: 0; } .icon-left-neg { margin: 0; } .icon-right { margin: 0; } .icon-right-neg { margin: 0; } .icon-shop { margin: 0; } .icon-twitter { margin: 0; } .icon-twitter-neg { margin: 0; } .icon-youtube { margin: 0; } .icon-youtube-neg { margin: 0; } .icon-zoom { margin: 0; } .icon-map-point-neg { margin: 0; } .icon-menu { margin: 0; } .icon-accordion-footer-open { margin: 0; } .icon-accordion-footer { margin: 0; } .icon-accordion-footer-white { margin: 0; } .icon-accordion-footer-open-white { margin: 0; } .icon-dropdown { margin: 0; } .icon-plus-icon { margin: 0; } .icon-bullet-point { margin: 0; } .icon.icon { margin: 0; } .pagination { text-align: center; margin: 40px 0; font-size: 16px; } .pagination--site_list > li { display: inline-block; } .pagination--site_list--button { display: inline-block; padding: 10px; text-decoration: none; color: #9d9d9d; } .pagination--site_list--button:hover, .pagination--site_list--button:focus { color: white; } .pagination--site_list--button.is-active { color: white; } .pagination--button { display: inline-block; width: 40px; height: 35px; border: 1px solid #444; margin: 30px -1px 0 0; } .pagination--button:hover, .pagination--button:focus { border-color: white; z-index: 1; } #font-size-indicator { position: fixed; z-index: 30000; top: 50%; left: 50%; margin-left: -80px; margin-top: -80px; width: 160px; height: 160px; text-align: center; line-height: 160px; border-radius: 8px; background-color: rgba(0, 0, 0, 0.7); color: white; font-weight: bold; text-shadow: 0 -1px 0 black; -moz-transition: font-size 100ms ease-out; -o-transition: font-size 100ms ease-out; -webkit-transition: font-size 100ms ease-out; transition: font-size 100ms ease-out; } #font-size-indicator .font-size-percentage { position: absolute; font-size: 10px; left: 10px; right: 10px; bottom: 10px; line-height: 1; } .btn, .btn-small, input[type="submit"] { display: inline-block; width: 290px; height: 80px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 27px 0; background: #1e1e1e; border: 1px solid #333; -moz-transition: background 0.25s, border-color 0.25s; -o-transition: background 0.25s, border-color 0.25s; -webkit-transition: background 0.25s, border-color 0.25s; transition: background 0.25s, border-color 0.25s; } .btn:hover, .btn-small:hover, input[type="submit"]:hover { background: #f2f2f2; color: #222; border-color: #f1f1f1; } .btn-small { width: auto; height: auto; padding: 14px 20px; } .btn-highlight { background: #dc0000; border: 1px solid #b00000; } .btn-highlight:hover { color: white; background: #b00000; border-color: #b00000; } .site_footer { min-height: 550px; background: #101010; text-align: center; } .site_footer--quick_links { margin-top: 60px; } .site_footer--quick_links a { margin: 10px; } .site_footer--copy { font-size: 15px; font-size: 0.83333rem; color: #fff; margin: 40px 0; } .main_navigation { display: block; display: flex; position: absolute; overflow: auto; width: 307px; background: #dc0000; height: 800px; top: 0; right: 0; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: space-between; right: -307px; -moz-transition: right 0.1s linear; -o-transition: right 0.1s linear; -webkit-transition: right 0.1s linear; transition: right 0.1s linear; } .main_navigation.is-visible { right: 0; display: flex; } @media only screen and (max-width: 850px) { .main_navigation { top: -30px; } } .main_navigation--item_list { margin-top: 170px; flex-shrink: 0; } @media only screen and (max-width: 850px) { .main_navigation--item_list { margin-top: 30px; } } .main_navigation--item { display: block; } .main_navigation--item.is-active .main_navigation--link { background: #b00000; } .main_navigation--link { display: block; position: relative; box-sizing: border-box; padding: 10px 0; height: 53px; line-height: 1.85; font-size: 18px; font-size: 1rem; letter-spacing: 2px; font-weight: 600; color: #fff; padding-left: 2.2rem; text-decoration: none; -moz-transition: background 0.2s linear; -o-transition: background 0.2s linear; -webkit-transition: background 0.2s linear; transition: background 0.2s linear; } .main_navigation--link:hover, .main_navigation--link:focus-visible { background: #b00000; } .main_navigation--link.is-active { background: #b00000; } .main_navigation--item_list:hover .main_navigation--link.is-active, .main_navigation--item_list:focus-within .main_navigation--link.is-active { background: none; } .main_navigation--item_list:hover .main_navigation--link.is-active:hover, .main_navigation--item_list:focus-within .main_navigation--link.is-active:focus-visible { background: #b00000; } @media only screen and (max-width: 850px) { .main_navigation--link { padding: 6px 0; padding-left: 2.2rem; height: 44px; } } .main_navigation--subnav .main_navigation--item.is-open > a { background: #b00000; } .main_navigation--subnav .main_navigation--item.is-open > a:hover { background: #b00000; } .main_navigation--subnav { display: none; } .main_navigation--subnav .main_navigation--link { font-size: 15px; font-size: 0.83333rem; line-height: 2.2; font-weight: 400; padding-left: 4rem; letter-spacing: 2px; } .main_navigation--subnav .main_navigation--link:hover { background: #b00000; } .main_navigation--item.is-open .main_navigation--subnav { display: block; } .main_navigation--bottom { margin-top: 10px; height: 80px; border-top: 1px solid #b00000; } @media only screen and (max-width: 850px) { .main_navigation--bottom { height: 60px; } } .main_navigation--bottom--link { display: block; padding: 30px 0; font-size: 13px; font-size: 0.72222rem; letter-spacing: 1px; font-weight: 600; color: #fff; text-align: center; text-decoration: none; background: #c30000; -moz-transition: background 0.35s linear; -o-transition: background 0.35s linear; -webkit-transition: background 0.35s linear; transition: background 0.35s linear; } .main_navigation--bottom--link:hover { background: #b00000; } @media only screen and (max-width: 850px) { .main_navigation--bottom--link { padding: 21px 0; } } .main_navigation--close { position: absolute; display: block; width: 40px; height: 40px; top: 20px; left: 26px; } .main_navigation--close::before, .main_navigation--close::after { content: ''; display: block; height: 1px; width: 16px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; background-color: currentColor; } .main_navigation--close::before { transform: rotate(-45deg); } .main_navigation--close::after { transform: rotate(45deg); } .main_logo { display: block; position: absolute; top: 35px; left: 80px; width: 150px; height: 50px; z-index: 1000; } @media only screen and (max-width: 1050px) { .main_logo { left: 40px; } } @media only screen and (max-width: 850px) { .main_logo { width: 120px; left: 20px; } } .main_logo img { width: 100%; } .main_form { max-width: 510px; margin-bottom: 80px; } .frm h1 { margin-bottom: 80px; margin-top: 160px; } .frm h2 { text-align: left; margin-bottom: 20px; margin-top: 40px; } .frm p { font-size: 15px; font-size: 0.83333rem; margin: 40px 0; } .frm img { display: block; margin-top: 80px; } .frm--field { margin-bottom: 10px; } .frm--submit { margin-top: 80px; margin-bottom: 160px; } .frm--checkbox--container { position: relative; } .frm--fieldset { margin-bottom: 80px; } input[type="text"], input[type="date"], input[type="tel"], input[type="password"], input[type="number"], input[type="email"] { box-sizing: border-box; width: 100%; height: 60px; border: 0; padding: 20px; font-size: 15px; font-size: 0.83333rem; color: #1e1e1e; letter-spacing: 1px; } input[type="text"]:focus, input[type="date"]:focus, input[type="tel"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="email"]:focus { outline: none; } .frm--label { display: none; } .frm--label.frm--label-checkbox { display: inline-block; padding-left: 50px; font-size: 15px; font-size: 0.83333rem; } .has-error input, .has-error textarea { border: 3px solid #b00000; color: #b00000; } .has-error input:focus, .has-error textarea:focus { outline: none; } textarea { box-sizing: border-box; width: 100%; border: 0; padding: 20px; font-size: 15px; font-size: 0.83333rem; } select, textarea { -webkit-font-smoothing: antialiased; } select { width: 110%; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; border: none; font-style: normal; outline: none; display: inline-block; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; } .frm-styled-select { background-image: url("../img/icons/dropdown.png"); background-repeat: no-repeat; background-size: 12px 5px; background-position: 470px center; box-sizing: border-box; width: 100%; height: 60px; border: 0; padding: 16px 20px; overflow: hidden; background-color: #fff; font-size: 15px; font-size: 0.83333rem; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .frm-styled-select { background-image: url("../img/icons2x/dropdown.png"); } } .csstransforms3d:not(.gecko) .frm input[type="checkbox"], .csstransforms3d:not(.gecko) .frm input[type="radio"] { border: none; display: -moz-inline-stack; display: inline-block; vertical-align: middle; zoom: 1; padding: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; position: absolute; top: 8px; width: 22px; height: 22px; border: 1px solid #444; } .csstransforms3d:not(.gecko) .frm input[type="checkbox"]:focus, .csstransforms3d:not(.gecko) .frm input[type="radio"]:focus { outline: 0; } .csstransforms3d:not(.gecko) .frm input, .csstransforms3d:not(.gecko) .frm textarea { -webkit-appearance: none; } .csstransforms3d:not(.gecko) .frm input[type="checkbox"] { -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; } .csstransforms3d:not(.gecko) .frm input[type="checkbox"]:checked { background-image: url("../img/icons/check.png"); background-repeat: no-repeat; background-size: 40px 40px; background-position: center center; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .csstransforms3d:not(.gecko) .frm input[type="checkbox"]:checked { background-image: url("../img/icons2x/check.png"); } } .csstransforms3d:not(.gecko) .frm input[type="radio"] { -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; } .csstransforms3d:not(.gecko) .frm input[type="radio"]:checked:after { content: ""; position: absolute; top: 6px; left: 6px; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; width: 8px; height: 8px; background: #fff; } .has-error.frm--checkbox--container .frm--field--container, .has-error.frm--checkbox--container .frm--label, .csstransforms3d:not(.gecko) .has-error.frm--checkbox--container .frm--field--container, .csstransforms3d:not(.gecko) .has-error.frm--checkbox--container .frm--label { color: #b00000; } .has-error.frm--checkbox--container input, .csstransforms3d:not(.gecko) .has-error.frm--checkbox--container input { border: 1px solid #b00000; } .has-error.frm--checkbox--container input[type="radio"]:checked:after, .csstransforms3d:not(.gecko) .has-error.frm--checkbox--container input[type="radio"]:checked:after { background: #b00000; } .frm--message { font-size: 15px; font-size: 0.83333rem; color: rgba(255, 255, 255, 0.8); padding: 10px 0 20px; } .frm--message.frm--message-error { color: #b00000; } .lt-ie9 .frm--message-onfocus { visibility: visible; opacity: 1; display: block; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; } .language_switcher { display: inline-block; } .language_switcher--language_list { display: block; position: absolute; width: 100%; top: 61px; left: 0; height: 121px; display: none; } .language_switcher--language_list.is-open { display: block; } .language_switcher--language_list--item { height: 60px; } .language_switcher--language_list--item:first-child { margin-bottom: 1px; } .language_switcher--language_list--link { display: block; color: #9d9d9d; font-size: 15px; font-size: 0.83333rem; text-decoration: none; padding: 19px 20px; background: rgba(252, 252, 252, 0.9); -moz-transition: color 0.35s linear, background 0.35s linear; -o-transition: color 0.35s linear, background 0.35s linear; -webkit-transition: color 0.35s linear, background 0.35s linear; transition: color 0.35s linear, background 0.35s linear; } .language_switcher--language_list--link:hover { color: #222; background-color: #fcfcfc; } .language_switcher--language_list--link.is-active { color: #222; background-color: #fcfcfc; } .page_header.is-static .page_header--overlay { position: relative; } .page_header--overlay { height: 130px; position: absolute; z-index: 100; width: 100%; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjYiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.6)), color-stop(100%, rgba(0, 0, 0, 0))); background: -moz-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)); background: -webkit-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)); background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)); pointer-events: none; } .page_header--right { position: fixed; top: 0; right: 0; z-index: 1010; } @media only screen and (max-width: 850px) { .page_header--right { position: absolute; top: 30px; right: 0px; width: 140px; } } .navigation { font-size: 0; } .navigation--item { display: block; float: left; width: 60px; height: 60px; margin-right: 1px; margin-bottom: 1px; } .navigation--item-long { width: 120px; } @media only screen and (max-width: 850px) { .navigation--item-long { width: 60px; } } .navigation--link, .language_switcher--current, .navigation--link-more { display: block; color: #222; font-size: 13px; font-size: 0.72222rem; line-height: 2; font-weight: 600; text-decoration: none; text-align: center; padding: 18px 0; height: 60px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background-color: rgba(252, 252, 252, 0.9); -moz-transition: color 0.35s linear, background 0.35s linear; -o-transition: color 0.35s linear, background 0.35s linear; -webkit-transition: color 0.35s linear, background 0.35s linear; transition: color 0.35s linear, background 0.35s linear; } .navigation--link:hover, .language_switcher--current:hover, .navigation--link-more:hover { color: #222; background-color: #fcfcfc; } .navigation--link-contact, .navigation--link-shop { width: 60px; height: 60px; text-indent: -999px; overflow: hidden; padding: 0; background-color: rgba(252, 252, 252, 0.9); } .navigation--link-contact:hover, .navigation--link-shop:hover { background-color: #fcfcfc; } .navigation--link-contact { background-image: url("../img/icons/kontakt.png"); background-repeat: no-repeat; background-size: 20px 20px; background-position: center center; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .navigation--link-contact { background-image: url("../img/icons2x/kontakt.png"); } } .navigation--link-shop { background-image: url("../img/icons/shop.png"); background-repeat: no-repeat; background-size: 20px 20px; background-position: center center; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .navigation--link-shop { background-image: url("../img/icons2x/shop.png"); } } .navigation--link-menu { position: relative; width: 160px; background: #dc0000; color: #fff; } .navigation--link-menu:hover { color: #fff; background: #b00000; } @media only screen and (max-width: 850px) { .navigation--link-menu { width: 60px; height: 60px; text-indent: -999px; overflow: hidden; padding: 0; } } .menu_icon--container { height: 9px; width: 16px; position: absolute; top: 26px; left: 25px; } @media only screen and (max-width: 850px) { .menu_icon--container { left: 22px; } } .menu_icon--bar { background-color: #fff; position: absolute; height: 1px; width: 100%; display: block; -moz-transition: all 200ms height; -o-transition: all 200ms height; -webkit-transition: all 200ms height; transition: all 200ms height; } .menu_icon--bar_top { top: 0; } .menu_icon--bar_middle { top: 4px; } .menu_icon--bar_bottom { bottom: 0; } .mobile_nav { display: block; position: absolute; width: 100%; top: 61px; left: 0; display: none; } .mobile_nav.is-visible { display: block; } .mobile_nav--item { height: 60px; margin-bottom: 1px; } .mobile_nav--link { display: block; color: #9d9d9d; font-size: 15px; font-size: 0.83333rem; text-decoration: none; padding: 19px 20px; background: rgba(252, 252, 252, 0.9); -moz-transition: color 0.35s linear, background 0.35s linear; -o-transition: color 0.35s linear, background 0.35s linear; -webkit-transition: color 0.35s linear, background 0.35s linear; transition: color 0.35s linear, background 0.35s linear; } .mobile_nav--link:hover { color: #222; background-color: #fcfcfc; } .mobile_nav--link.is-active { color: #222; background-color: #fcfcfc; } .downloads { margin: 80px 0; } .download_item:not(:last-child) { margin-bottom: 0.5rem; } .download_item--link { display: block; max-width: max-content; padding-left: 35px; min-height: 20px; position: relative; text-align: left; color: #c8c8c8; -moz-transition: color 0.35s; -o-transition: color 0.35s; -webkit-transition: color 0.35s; transition: color 0.35s; } .download_item--link:hover { color: #f2f2f2; } .download_item--weight { display: inline-block; font-weight: 400; vertical-align: bottom; white-space: nowrap; margin-left: 0.5em; } .download_item--link--icon.icon { position: absolute; top: 0; left: 0; } div.video { position: relative; margin-top: 80px; margin-bottom: 80px; text-align: center; overflow: hidden; } div.video h2 { margin-bottom: 30px; } .video--video_length { font-size: 13px; font-size: 0.72222rem; margin: 1.9em 0 1.15em; font-size: 1rem; line-height: 18px; line-height: 1.125rem; text-align: right; } .video--poster { z-index: 1; position: absolute; top: 0; right: 0; bottom: 0; left: 0; transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); } .video.poster-hidden .video--poster { opacity: 0; transform: scale(1.1); pointer-events: none; } .video--poster img { z-index: 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .video--poster::after { content: ''; z-index: 1; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.2); } .video--play { z-index: 2; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 6rem; height: 6rem; margin: auto; } @media (max-width: 750px) { .video--play { width: 4rem; height: 4rem; } } .video--play::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; transition: transform 0.25s cubic-bezier(0.165, 0.84, 0.44, 1); transform: scale(1); background-color: #dc0000; } .video--poster:hover .video--play::before { transform: scale(1.1); } .video--poster:focus-visible .video--play::before { transform: scale(1.1); } .video--play::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 0; height: 0; margin: auto; border-top: 1rem solid transparent; border-bottom: 1rem solid transparent; transform: translateX(0.2rem); border-left: 2rem solid white; } @media (max-width: 750px) { .video--play::after { border-top: 0.67rem solid transparent; border-bottom: 0.67rem solid transparent; transform: translateX(0.13rem); border-left: 1.33rem solid white; } } .video--video { height: 0; padding-bottom: 56.25%; position: relative; } .video--video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .tooltip { cursor: help; vertical-align: middle; position: relative; display: inline-block; overflow: visible; } .tooltip.tooltip-link { text-decoration: underline; text-underline-position: under; text-decoration-style: dashed; } .tooltip.tooltip-icon { position: relative; padding-right: calc(20px + 0.25em); } .tooltip--icon { position: relative; width: 20px; vertical-align: middle; } .tooltip--flyout { position: absolute; left: -999em; visibility: hidden; opacity: 0; padding: 0; max-width: 25em; box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.15); background-color: #fff; } @media (max-width: 400px) { .tooltip--flyout { max-width: calc(100vw - 40px); } } .tooltip--flyout.is-left .tooltip--flyout--arrow { border-right: none; border-bottom: 10px solid transparent; border-left: 10px solid #fff; border-top: 10px solid transparent; height: 0; width: 0; top: 20px; right: -10px; } .tooltip--flyout.is-right .tooltip--flyout--arrow { border-left: none; border-bottom: 10px solid transparent; border-right: 10px solid #fff; border-top: 10px solid transparent; height: 0; width: 0; top: 20px; left: -10px; } .tooltip--flyout.is-top .tooltip--flyout--arrow { border-bottom: none; border-right: 10px solid transparent; border-left: 10px solid transparent; border-top: 10px solid #fff; height: 0; width: 0; bottom: -10px; left: 10px; } .tooltip--flyout.is-bottom .tooltip--flyout--arrow { border-top: none; border-bottom: 10px solid #fff; border-left: 10px solid transparent; border-right: 10px solid transparent; height: 0; width: 0; top: -10px; left: 10px; } .tooltip--flyout.is-left .tooltip--flyout--arrow, .tooltip--flyout.is-right .tooltip--flyout--arrow { margin-top: -12px; } .tooltip--flyout.is-top .tooltip--flyout--arrow, .tooltip--flyout.is-bottom .tooltip--flyout--arrow { margin-left: -12px; } .tooltip--flyout.is-visible { left: auto; display: block; visibility: visible; opacity: 1; transform: none; z-index: 10010; transition: transform 50ms ease-out; } .tooltip--flyout--content { padding: 15px 20px; } @media (max-width: 400px) { .tooltip--flyout--content { padding: 15px; } } .tooltip--flyout--arrow { position: absolute; } .tooltip--flyout--arrow:before { content: ''; position: absolute; z-index: -1; } .tooltip-right { float: right; } .experience_header--inner { position: absolute; width: 100%; top: 30%; } .experience_header--title { position: relative; text-align: center; line-height: 70px; margin-top: 180px; } @media (max-width: 750px) { .experience_header--title { box-sizing: border-box; padding: 0 20px; line-height: 40px; } } .experience_header--image { width: 144px; height: 144px; position: absolute; border-radius: 144px; overflow: hidden; text-align: center; left: 50%; margin-left: -72px; top: 0; -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -moz-transition: -moz-transform 0.35s; -o-transition: -o-transform 0.35s; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; } .experience_header--image:before { content: ''; display: block; position: absolute; z-index: 100; width: 100%; height: 100%; -moz-box-shadow: inset 0 0 0 10px rgba(255, 255, 255, 0.5); -webkit-box-shadow: inset 0 0 0 10px rgba(255, 255, 255, 0.5); box-shadow: inset 0 0 0 10px rgba(255, 255, 255, 0.5); border-radius: 144px; } .experience_header--image img { display: block; position: absolute; z-index: 0; width: auto; height: 100%; left: 50%; -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); } .experience_header--name { text-decoration: none; } /*! Flickity v2.3.0 https://flickity.metafizzy.co ---------------------------------------------- */ .flickity-enabled { position: relative; } .flickity-enabled:focus { outline: none; } .flickity-viewport { overflow: hidden; position: relative; height: 100%; } .flickity-slider { position: absolute; width: 100%; height: 100%; } /* draggable */ .flickity-enabled.is-draggable { -webkit-tap-highlight-color: transparent; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .flickity-enabled.is-draggable .flickity-viewport { cursor: move; cursor: -webkit-grab; cursor: grab; } .flickity-enabled.is-draggable .flickity-viewport.is-pointer-down { cursor: -webkit-grabbing; cursor: grabbing; } /* ---- flickity-button ---- */ .flickity-button { position: absolute; background: rgba(255, 255, 255, 0.75); border: none; color: #333; } .flickity-button:hover { background: white; cursor: pointer; } .flickity-button:focus { outline: none; box-shadow: 0 0 0 5px #19F; } .flickity-button:active { opacity: 0.6; } .flickity-button:disabled { opacity: 0.3; cursor: auto; /* prevent disabled button from capturing pointer up event. #716 */ pointer-events: none; } .flickity-button-icon { fill: currentColor; } /* ---- previous/next buttons ---- */ .flickity-prev-next-button { top: 50%; width: 44px; height: 44px; border-radius: 50%; /* vertically center */ transform: translateY(-50%); } .flickity-prev-next-button.previous { left: 10px; } .flickity-prev-next-button.next { right: 10px; } /* right to left */ .flickity-rtl .flickity-prev-next-button.previous { left: auto; right: 10px; } .flickity-rtl .flickity-prev-next-button.next { right: auto; left: 10px; } .flickity-prev-next-button .flickity-button-icon { position: absolute; left: 20%; top: 20%; width: 60%; height: 60%; } /* ---- page dots ---- */ .flickity-page-dots { position: absolute; width: 100%; bottom: -25px; padding: 0; margin: 0; list-style: none; text-align: center; line-height: 1; } .flickity-rtl .flickity-page-dots { direction: rtl; } .flickity-page-dots .dot { display: inline-block; width: 10px; height: 10px; margin: 0 8px; background: #333; border-radius: 50%; opacity: 0.25; cursor: pointer; } .flickity-page-dots .dot.is-selected { opacity: 1; } @media (min-width: 751px) { .teaser_grid { margin-bottom: 80px; } } @media (max-width: 750px) { .teaser_grid { margin-bottom: 40px; margin-left: -20px; margin-right: -20px; } } @media (min-width: 1051px) { .teaser_grid--layout { margin-top: -80px; display: flex; flex-wrap: wrap; align-items: flex-start; margin-left: -30px; margin-right: -30px; justify-content: center; } .teaser_grid--layout > * { margin-top: 80px; flex: 0 0 calc(100% / 3 - 60px); margin-left: 30px; margin-right: 30px; } } @media (min-width: 751px) and (max-width: 1050px) { .teaser_grid--layout { margin-top: -80px; display: flex; flex-wrap: wrap; align-items: flex-start; margin-left: -30px; margin-right: -30px; } .teaser_grid--layout > * { margin-top: 80px; flex: 0 0 calc(100% / 2 - 60px); margin-left: 30px; margin-right: 30px; } } .teaser_grid--card { text-decoration: none; } @media (max-width: 750px) { .teaser_grid--card { width: 70%; padding-left: 20px; } .teaser_grid--card:last-child { padding-right: 20px; } } .teaser_grid--image { transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); } @media (min-width: 751px) { .teaser_grid--card:hover .teaser_grid--image, .teaser_grid--card:focus-visible .teaser_grid--image { transform: scale(0.975); } } .teaser_grid--image img { display: block; width: 100%; height: auto; } .teaser_grid--content { transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); } @media (max-width: 750px) { .teaser_grid--content { padding: 30px 0; } } @media (min-width: 751px) { .teaser_grid--content { z-index: 0; position: relative; padding: 30px 25px; margin-left: -25px; margin-right: -25px; background-color: #222; } .teaser_grid--card:hover .teaser_grid--content, .teaser_grid--card:focus-visible .teaser_grid--content { transform: translateY(-0.75rem); } .teaser_grid--content::before { content: ''; z-index: -1; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #282828; opacity: 0; transition: opacity 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.25s; } .teaser_grid--card:hover .teaser_grid--content::before, .teaser_grid--card:focus-visible .teaser_grid--content::before { transition: opacity 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s; opacity: 1; } } .teaser_grid--text { margin-top: 10px; } .teaser_grid--more { text-align: left; margin-top: 20px; } .blog_post { max-width: 620px; } .blog_post:first-child { margin-top: 260px; } .blog_post_teaser { max-width: 620px; margin: 160px 0; } .blog_post_teaser:first-child { margin-top: 260px; } .blog_post--date, .blog_post--author { line-height: 24px; line-height: 1.33333rem; text-align: left; } .blog_post--author { font-weight: 400; color: rgba(242, 242, 242, 0.6); margin-bottom: 20px; } .blog_post--title { margin: 20px 0 70px; } .blog_post--video { margin-top: 40px; margin-bottom: 70px; } .blog_post--image { margin-top: 40px; margin-bottom: 70px; } .blog_post--image img { display: block; max-width: 100%; height: auto; } .blog_post--content p { margin-bottom: 40px; } .blog_post--content p.highlight { font-weight: 600; color: #f2f2f2; } .cta_button { margin-top: 80px; margin-bottom: 80px; text-align: center; } .cta_button .btn { margin: 5px; } .accordion { margin-bottom: 50px; margin-bottom: 2.77778rem; clear: both; } @media (max-width: 750px) { .accordion { margin-bottom: 30px; } } .accordion *, .accordion *::before, .accordion *::after { box-sizing: border-box; } .accordion--list { border-top: 1px solid rgba(255, 255, 255, 0.15); } .accordion--item { position: relative; border-bottom: 1px solid rgba(255, 255, 255, 0.15); overflow: hidden; } .accordion--item--trigger { cursor: pointer; margin: 0; padding: 15px 50px 15px 0; position: relative; display: block; width: 100%; text-align: left; outline: none; user-select: none; } .accordion--item--trigger:after { content: ''; display: block; position: absolute; width: 12px; height: 12px; margin-top: -6px; right: 10px; top: 50%; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); transition: transform 150ms ease-out; } .accordion--item--trigger:hover { color: white; } .accordion--item--trigger.is-opened:after { transform: rotateZ(225deg); } .accordion--item--content { display: none; padding: 20px 0; } .accordion--item--content.is-opened { display: block; } .gallery { margin: 80px 0; display: flex; flex-wrap: wrap; } .gallery img { width: 100%; display: block; opacity: 0; transform: scale(1.05); } .gallery.is-in-view img { transition: opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 8s cubic-bezier(0.165, 0.84, 0.44, 1); opacity: 1; transform: none; } .gallery--image-one { box-sizing: border-box; width: calc(50% - 1px); margin-right: 1px; } .gallery.is-in-view .gallery--image-one img { transition-delay: 0s; } .gallery--image-two { box-sizing: border-box; width: calc(50% - 1px); margin-left: 1px; } .gallery.is-in-view .gallery--image-two img { transition-delay: 0.2s; } .gallery--image-three { width: 100%; margin-top: 2px; } .gallery.is-in-view .gallery--image-three img { transition-delay: 0.4s; } .gallery--image-one, .gallery--image-two, .gallery--image-three { position: relative; overflow: hidden; } @media (max-width: 750px) { .gallery--image-one, .gallery--image-two, .gallery--image-three { width: 100%; margin-left: 0; margin-right: 0; margin-top: 0; margin-bottom: 2px; aspect-ratio: 2.35 / 1; } .gallery--image-one img, .gallery--image-two img, .gallery--image-three img { height: 100%; object-fit: cover; } } @media (max-width: 400px) { .gallery--image-one, .gallery--image-two, .gallery--image-three { aspect-ratio: 1.6 / 1; } } .gallery--image_descriptions { padding-top: 50px; clear: both; } .gallery--image_description { position: relative; font-size: 13px; font-size: 0.72222rem; color: #c8c8c8; line-height: 24px; padding-left: 80px; } .gallery--image_description span { display: block; position: absolute; top: 1px; left: 0; width: 80px; color: #c8c8c8; text-align: left; } .experience_teaser { margin: 80px 0; } .experience_teaser img { width: 100%; display: block; -moz-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); -moz-transition: all 2s; -o-transition: all 2s; -webkit-transition: all 2s; transition: all 2s; } .experience_teaser:last-child { margin-bottom: 0; } .experience_teaser--image-one { box-sizing: border-box; width: 50%; float: left; overflow: hidden; } .experience_teaser--image-one .experience_teaser--inner { overflow: hidden; margin-right: 1px; margin-bottom: 2px; } .experience_teaser--image-two { width: 50%; float: left; } .experience_teaser--image-two .experience_teaser--inner { overflow: hidden; margin-bottom: 2px; margin-left: 1px; } .experience_teaser--image-three { width: 100%; clear: both; } .experience_teaser--image-one, .experience_teaser--image-two, .experience_teaser--image-three { position: relative; display: block; overflow: hidden; } @media (max-width: 750px) { .experience_teaser--image-one, .experience_teaser--image-two, .experience_teaser--image-three { width: 100%; float: none; padding-right: 0; margin-bottom: 1px; overflow: hidden; height: 285px; } } @media (max-width: 400px) { .experience_teaser--image-one, .experience_teaser--image-two, .experience_teaser--image-three { height: 200px; } } .experience_teaser--image-one:hover img, .experience_teaser--image-two:hover img, .experience_teaser--image-three:hover img { -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } .experience_teaser--image-one:hover .experience_teaser--overlay, .experience_teaser--image-two:hover .experience_teaser--overlay, .experience_teaser--image-three:hover .experience_teaser--overlay { opacity: 1; visibility: visible; } @media (max-width: 750px) { .experience_teaser--image-three img { width: 200%; margin-left: -50%; position: absolute; bottom: 0; } } .experience_teaser--overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); visibility: hidden; opacity: 0; -moz-transition: opacity 0.35s; -o-transition: opacity 0.35s; -webkit-transition: opacity 0.35s; transition: opacity 0.35s; display: flex; align-items: center; justify-content: center; } html.no-flexbox .experience_teaser--overlay-inner { position: absolute; width: 100%; height: 150px; top: 50%; margin-top: -75px; } @media (max-width: 750px) { html.no-flexbox .experience_teaser--overlay-inner { height: 100px; margin-top: -50px; } } .experience_teaser--quote { max-width: 520px; padding: 0 20px; padding-top: 30px; font-size: 22px; font-size: 1.22222rem; line-height: 1.364em; text-align: center; color: #f2f2f2; font-weight: 300; margin: 0 auto 20px; } @media (max-width: 750px) { .experience_teaser--quote { padding-top: 10px; font-size: 15px; font-size: 0.83333rem; } } news_teaser { margin: 80px auto; } @media only screen and (max-width: 850px) { news_teaser { margin: 20px 0; } } .news_teaser--link { display: block; position: relative; overflow: hidden; text-decoration: none; height: 520px; max-width: 400px; margin: auto; } .news_teaser--inner { display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow: hidden; background: #282828; text-decoration: none; } .news_teaser--image img { max-width: 100%; display: block; } .news_teaser--overlay { position: absolute; bottom: -100px; z-index: 10; background: #282828; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-transition: bottom 0.25s ease-out; -o-transition: bottom 0.25s ease-out; -webkit-transition: bottom 0.25s ease-out; transition: bottom 0.25s ease-out; } .news_teaser--title { font-size: 28px; font-size: 1.55556rem; font-weight: 600; margin-top: 0.7em; margin-bottom: 0.7em; text-align: center; -moz-transition: -moz-transform 0.25s ease-out; -o-transition: -o-transform 0.25s ease-out; -webkit-transition: -webkit-transform 0.25s ease-out; transition: transform 0.25s ease-out; } .news_teaser--text { font-size: 15px; font-size: 0.83333rem; color: #c8c8c8; padding: 0 60px; line-height: 25px; line-height: 1.38889rem; text-align: center; padding-bottom: 140px; transform: translate3d(0, 0, 0); -moz-transition: -moz-transform 0.25s ease-out; -o-transition: -o-transform 0.25s ease-out; -webkit-transition: -webkit-transform 0.25s ease-out; transition: transform 0.25s ease-out; } .news_teaser--more { color: rgba(255, 255, 255, 0.3); position: absolute; width: 100%; left: 0; bottom: 50px; } .news_teaser--link:hover .news_teaser--overlay { bottom: 0; } .news_teaser--link:hover .news_teaser--title { transform: translate3d(0, 20px, 0); } .news_teaser--link:hover .news_teaser--text { transform: translate3d(0, 20px, 0); } @media only screen and (max-width: 850px) { .news_teaser--link:hover .news_teaser--overlay { bottom: -100px; } .news_teaser--link:hover .news_teaser--title { transform: translate3d(0, 0, 0); } .news_teaser--link:hover .news_teaser--text { transform: translate3d(0, 0, 0); } } .news_teaser-plain .news_teaser--image img { max-width: 100%; display: block; } .news_teaser-plain .news_teaser--overlay { height: 100%; padding-bottom: 100px; position: relative; } @media only screen and (max-width: 850px) { .news_teaser-plain .news_teaser--link:hover .news_teaser--overlay { padding-bottom: 100px; margin-top: 0; } .news_teaser-plain .news_teaser--link:hover .news_teaser--title { transform: translate3d(0, 0, 0); } .news_teaser-plain .news_teaser--link:hover .news_teaser--text { transform: translate3d(0, 0, 0); } } @media only screen and (max-width: 850px) { .news_teaser--slideshow { overflow: hidden; } } .news_teaser--slideshow div.l-grid { display: flex; justify-content: center; } .news_teaser--navigation { display: block; position: absolute; bottom: 20px; width: 100%; text-align: center; display: none; } @media only screen and (max-width: 850px) { .news_teaser--navigation { display: block; } } .news_teaser--navigation--prev, .news_teaser--navigation--next { display: inline-block; height: 40px; width: 50px; border: 1px solid #3c3c3c; -moz-transition: background 0.35s; -o-transition: background 0.35s; -webkit-transition: background 0.35s; transition: background 0.35s; } .news_teaser--navigation--prev { background-image: url("../img/icons/left-neg.png"); background-repeat: no-repeat; background-size: 20px 20px; background-position: center center; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .news_teaser--navigation--prev { background-image: url("../img/icons2x/left-neg.png"); } } .news_teaser--navigation--prev:hover { background-color: rgba(60, 60, 60, 0.5); } .news_teaser--navigation--next { background-image: url("../img/icons/right-neg.png"); background-repeat: no-repeat; background-size: 20px 20px; background-position: center center; border-left: 0; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .news_teaser--navigation--next { background-image: url("../img/icons2x/right-neg.png"); } } .news_teaser--navigation--next:hover { background-color: rgba(60, 60, 60, 0.5); } .image { text-align: center; margin: 80px 0; } .image img { display: block; max-width: 100%; margin: auto; } @media (max-width: 750px) { .product_title { margin: 120px 0 80px; } } @media (min-width: 751px) { .product_title { margin: 160px 0 100px; } } .product_title--title { text-align: center; font-size: 36px; font-size: 2rem; } @media only screen and (max-width: 850px) { .product_title--title { font-size: 21px; font-size: 1.16667rem; } } @media (max-width: 750px) { .section_title { margin: 120px 0 60px; } } @media (min-width: 751px) { .section_title { margin: 160px 0 80px; } } .section_title--title { text-align: center; color: #f1f1f1; font-weight: 600; } .map { height: 700px; position: relative; } .map #google-maps-zoom-in, .map #google-maps-zoom-out { position: relative; width: 60px; height: 60px; background-color: #1e1e1e; -moz-transition: background-color 200ms; -o-transition: background-color 200ms; -webkit-transition: background-color 200ms; transition: background-color 200ms; } .map #google-maps-zoom-in:hover, .map #google-maps-zoom-out:hover { background-color: #444; } .map #google-maps-zoom-wrapper { position: absolute; right: 30px; bottom: 10px; width: 60px; height: 123px; overflow: hidden; cursor: pointer; text-align: center; } .map #google-maps-zoom-in { margin-bottom: 3px; background-image: url("../img/icons/zoom.png"); background-repeat: no-repeat; background-size: 20px 20px; background-position: center center; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .map #google-maps-zoom-in { background-image: url("../img/icons2x/zoom.png"); } } .map #google-maps-zoom-out { background-image: url("../img/icons/zoom-out.png"); background-repeat: no-repeat; background-size: 20px 20px; background-position: center center; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .map #google-maps-zoom-out { background-image: url("../img/icons2x/zoom-out.png"); } } @media only screen and (max-width: 1050px) { .map { height: 600px; } } @media (max-width: 750px) { .map { height: 400px; margin-top: 120px; } .map #google-maps-zoom-in, .map #google-maps-zoom-out { width: 30px; height: 30px; } .map #google-maps-zoom-wrapper { right: 15px; bottom: 10px; width: 30px; height: 63px; } } #map-canvas { height: 700px; } @media only screen and (max-width: 1050px) { #map-canvas { height: 600px; } } @media (max-width: 750px) { #map-canvas { height: 400px; } } .map--search { display: block; /*position: absolute; bottom: 20px; left: 30px;*/ margin-top: 45px; margin-bottom: 45px; font-size: 0; } @media (max-width: 750px) { .map--search { bottom: auto; top: 20px; left: 15px; right: 15px; width: auto; } } .map--search .map--search--right { text-align: right; } .map--search .map--search--current_loc_btn::before { content: ' '; height: 28px; width: 28px; position: absolute; margin-left: -33px; display: block; background-image: url("../img/icons/locate.png"); background-repeat: no-repeat; background-size: 25px 24px; } @media (max-width: 750px) { .map--search .map--search--current_loc_btn::before { margin-left: -40px; } } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .map--search .map--search--current_loc_btn::before { background-image: url("../img/icons2x/locate.png"); } } .map--search .map--search--current_loc_btn.is-loading::before { background-image: url("../img/icons/loader.png"); background-repeat: no-repeat; background-size: 27px 28px; margin-left: -38px; animation: rotate 1.5s infinite linear; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .map--search .map--search--current_loc_btn.is-loading::before { background-image: url("../img/icons2x/loader.png"); } } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(359deg); } } .map--search .map--search--current_loc_btn { display: inline-block; height: 60px; width: auto; text-align: left; padding: 0; padding-left: 50px; padding-right: 10px; border: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: transparent; opacity: 0.8; font-size: 15px; font-size: 0.83333rem; background-position: 10px center; -moz-transition: opacity 0.35s; -o-transition: opacity 0.35s; -webkit-transition: opacity 0.35s; transition: opacity 0.35s; } .map--search .map--search--current_loc_btn:hover { /*@include retina-graphic('icons/locate-rollover.png', 'icons2x/locate-rollover.png');*/ opacity: 1; } .map--search .map--search--current_loc_btn:focus { outline: none; } .map--search .map--search--current_loc_btn_value { color: #fff; } @media (max-width: 750px) { .map--search .map--search--current_loc_btn_value { display: none; } } .map--search .map--search--btn { height: 60px; width: 100px; padding: 17px 0; } .map--search .map--search--btn:focus { outline: none; } @media (max-width: 750px) { .map--search .map--search--btn { width: 100%; } } .map--search--field { background: rgba(255, 255, 255, 0.9); border-radius: 0; } .map--search--field::-webkit-input-placeholder { color: black; } .map--search--field::-moz-placeholder { /* Firefox 19+ */ color: black; } .map--search--field:-ms-input-placeholder { color: black; } .map--search--field:-moz-placeholder { /* Firefox 18- */ color: black; } .map--search_field_container { display: inline-block; width: 220px; margin-bottom: 10px; } .map--search--inner { position: relative; } .map--search_field_container-country { display: inline-block; width: 220px; box-sizing: border-box; height: 60px; border: 0; padding: 16px 20px; background-color: #fff; font-size: 15px; font-size: 0.83333rem; margin-bottom: 10px; position: relative; background-image: url("../img/icons/dropdown.png"); background-repeat: no-repeat; background-size: 12px 5px; background-repeat: no-repeat; background-size: 12px 5px; background-position: 90% center; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .map--search_field_container-country { background-image: url("../img/icons2x/dropdown.png"); } } @media (max-width: 750px) { .map--search_field_container-country { background-position: 90% center; } } @media only screen and (max-width: 1050px) { .map--search_field_container-country { background-position: 95% center; } } .map--search--field-country::-ms-expand { display: none; } .map--search_buttons_container { display: inline-block; width: 160px; } @media (max-width: 750px) { .map--search_buttons_container { width: auto; float: right; } } @media (max-width: 750px) { .map--search_field_container { width: calc(100% - 75px); } .map--search_field_container-country { width: 100%; } } .map--legend { margin-top: 10px; } .map--legend--column { text-align: right; font-size: 14.9999px; } .map-legend-icon-fav { background-image: url("../img/icons/fav.png"); background-repeat: no-repeat; background-size: 20px 20px; padding-left: 30px; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .map-legend-icon-fav { background-image: url("../img/icons2x/fav.png"); } } .map-legend-icon { background-size: 18px 18px; background-image: url("../img/icons/map-point-neg.png"); background-repeat: no-repeat; background-size: 18px 18px; padding-left: 30px; margin-right: 10px; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .map-legend-icon { background-image: url("../img/icons2x/map-point-neg.png"); } } .map--infobox { position: absolute; bottom: 100px; left: 30px; z-index: 20; width: 320px; background: rgba(255, 255, 255, 0.9); font-size: 15px; font-size: 0.83333rem; line-height: 1.4; padding-top: 20px; display: none; } .map--infobox a { color: #444; } .map--infobox p { padding: 0 20px; } .map--infobox p.title { text-align: left; color: #444; } .map--infobox.is-active { display: block; } .map--infobox--link { display: block; margin-top: 20px; border-top: 1px solid #9d9d9d; line-height: 50px; padding: 0 20px; color: #444; } .map--infobox--link:hover { color: #1e1e1e; } .map--infobox--close_btn { position: absolute; top: 5px; right: 5px; width: 20px; height: 20px; background-image: url("../img/icons/close.png"); background-repeat: no-repeat; background-size: 20px 20px; background-position: center center; opacity: 1; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .map--infobox--close_btn { background-image: url("../img/icons2x/close.png"); } } .map--infobox--close_btn:hover { opacity: 0.8; } @media (max-width: 750px) { .map--infobox { bottom: auto; top: 70px; left: 15px; width: 200px; font-size: 13px; font-size: 0.72222rem; line-height: 1.4; } .map--infobox p.title { text-align: left; color: #9d9d9d; } .map--infobox--link { display: block; margin-top: 10px; line-height: 30px; padding: 0 20px; } } .map--search-results-pageination { width: 100%; text-align: center; } .map--search-results-pageination ul { display: inline-block; margin: 0px auto; } .map--search-results-pageination ul li { float: left; padding: 10px; } .map--search-results-pageination ul li a { text-decoration: none; } .map--search-results-pageination ul li a.is-active { color: #fff; } .map--search-results-arrows { display: inline-block; margin: 0px auto; } .map--search-results-arrows .map--search-results-arrows-left, .map--search-results-arrows .map--search-results-arrows-right { float: left; width: 50px; line-height: 50px; border: 1px solid #333; text-decoration: none; } .map--search-results { margin-top: 100px; margin-bottom: 60px; position: relative; } .map--search-results_row { box-sizing: border-box; display: table; width: 100%; padding: 30px 60px; border-bottom: 1px solid #9d9d9d; position: relative; } .map--search-results_row::before { content: ''; background-image: url("../img/icons/map-point-neg.png"); background-repeat: no-repeat; background-size: 18px 18px; width: 20px; height: 20px; width: 20px; height: 20px; position: absolute; margin-left: -50px; margin-top: 7px; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .map--search-results_row::before { background-image: url("../img/icons2x/map-point-neg.png"); } } .map--search-results_row.is-favorite::before { background-image: url("../img/icons/fav.png"); background-repeat: no-repeat; background-size: 20px 20px; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .map--search-results_row.is-favorite::before { background-image: url("../img/icons2x/fav.png"); } } .link_item--link { color: #c8c8c8; -moz-transition: color 0.35s; -o-transition: color 0.35s; -webkit-transition: color 0.35s; transition: color 0.35s; } .link_item--link:hover { color: #f2f2f2; } .link_item--link--icon.icon { margin-right: 20px; } .table { width: 100%; font-size: 0.75rem; color: #f2f2f2; margin-bottom: 80px; } .table--row td:first-child { padding: 5px; border-bottom: 1px solid rgba(255, 255, 255, 0.15); } .table--row td:not(:first-child) { padding: 5px; border-bottom: 1px solid rgba(255, 255, 255, 0.15); border-left: 1px solid rgba(255, 255, 255, 0.15); } .product_teaser { margin: 80px 0 0; position: relative; z-index: 0; } @media (max-width: 750px) { .product_teaser { min-height: 200px; overflow: hidden; } } .product_teaser--content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; text-align: center; z-index: 10; text-shadow: 0 0 15px rgba(0, 0, 0, 0.15); } .product_teaser--overlay { position: absolute; top: 0; left: 0; height: 90%; width: 100%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ z-index: 5; } .product_teaser--inner { display: block; max-width: 500px; width: 100%; padding-left: 20px; padding-right: 20px; margin: 0 auto; } .product_teaser--title { max-width: 500px; margin: auto; margin-top: 15px; margin-bottom: 50px; text-align: center; line-height: 46px; } @media (max-width: 750px) { .product_teaser--title { margin-top: 10px; margin-bottom: 30px; line-height: 1.2; } } .product_teaser--link { text-align: center; } .product_teaser--link .btn { min-width: 200px; width: auto; height: 60px; padding: 17px 25px; } @media (max-width: 750px) { .product_teaser--link .btn { height: 44px; padding: 10px 0; } } .product_teaser--background { overflow: hidden; } .product_teaser--background img { width: 100%; display: block; transform: scale(1.3); } @media (max-width: 550px) { .product_teaser--background img { aspect-ratio: 1 / 1; object-fit: cover; } } .product_teaser.is-in-view .product_teaser--background img { transition: transform 8s cubic-bezier(0.25, 0.46, 0.45, 0.94); transform: none; } .measures { text-align: center; margin: 80px 0; } @media (max-width: 750px) { .measures { padding: 0 0 0 20px; } } .measures--image { position: relative; display: inline-block; margin: auto; } .measures--image img { display: block; max-width: 100%; } .measures--image span { display: block; position: absolute; width: 60px; height: 24px; margin-left: -30px; margin-top: -12px; font-size: 13px; font-size: 0.72222rem; font-weight: 600; color: #444; color: rgba(242, 242, 242, 0.6); background: #222; } .measures--width { position: absolute; height: 1px; left: 30px; right: 30px; bottom: 0; background: #444; background: rgba(242, 242, 242, 0.15); } .measures--width span { left: 50%; } .measures--height { position: absolute; width: 1px; top: 30px; bottom: 30px; left: 0; background: #444; background: rgba(242, 242, 242, 0.15); } .measures--height span { top: 50%; } .slideshow .measures--image span { background: #1e1e1e; } .notification_cookie { *zoom: 1; font-size: 13px; font-size: 0.72222rem; position: fixed; left: 0; right: 0; bottom: 0; padding: 30px 0; background-color: #101010; color: #fff; box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.15); z-index: 999999; display: flex; align-items: center; } .notification_cookie:before, .notification_cookie:after { content: ""; display: table; } .notification_cookie:after { clear: both; } @media (max-width: 520px) { .notification_cookie { padding: 20px 0; } } .notification_cookie.warning { background-color: #dc0000; color: #fff; } .notification_cookie.warning .notification_cookie--icon > .Icon { fill: #fff; } .notification_cookie:not(.is-open) { display: none; } .notification_cookie.is-open { animation: notification-in .5s 1 forwards; } .notification_cookie.is-closed { animation: notification-out .5s 1 forwards; } .notification_cookie--column { vertical-align: bottom; } .notification_cookie--column:first-child { vertical-align: top; } .notification_cookie--icon { display: flex; float: left; margin-right: 1em; } .notification_cookie--content { float: left; } .notification_cookie--close { position: relative; float: right; margin-left: auto; flex-shrink: 0; font-size: 11px; font-size: 0.61111rem; } @media only screen and (max-width: 850px) { .notification_cookie--close { margin-top: 20px; } } .notification_cookie--link { color: white; font-family: "Suisse Intl", "Helvetica Neue", sans-serif; font-weight: 400; text-decoration: underline; } .notification_cookie--link:hover { text-decoration: none; } .notification_cookie--text { font-size: 14px; font-size: 0.77778rem; } @keyframes notification-in { 0% { transform: translateY(100%); } 100% { transform: none; } } @keyframes notification-out { 0% { transform: none; opacity: 1; } 50% { opacity: 1; } 100% { transform: translateY(100%); opacity: 0; } } .icon_list { margin-top: 80px; margin-bottom: 80px; } @media (max-width: 750px) { .icon_list { margin-top: 40px; margin-bottom: 40px; } } @media (min-width: 1051px) { .icon_list--list { margin-top: -80px; display: flex; flex-wrap: wrap; align-items: flex-start; margin-left: -30px; margin-right: -30px; justify-content: center; } .icon_list--list > * { margin-top: 80px; flex: 0 0 calc(100% / 3 - 60px); margin-left: 30px; margin-right: 30px; } } @media (min-width: 751px) and (max-width: 1050px) { .icon_list--list { margin-top: -80px; display: flex; flex-wrap: wrap; align-items: flex-start; margin-left: -30px; margin-right: -30px; } .icon_list--list > * { margin-top: 80px; flex: 0 0 calc(100% / 2 - 60px); margin-left: 30px; margin-right: 30px; } } @media (min-width: 751px) { .icon_list--list { margin-bottom: 80px; } } @media (max-width: 750px) { .icon_list--entry { margin-bottom: 40px; } } .icon_list.is-in-view .icon_list--entry:nth-of-type(1) .icon_list--entry--icon_wrapper { transition-delay: 0.75s; } .icon_list.is-in-view .icon_list--entry:nth-of-type(2) .icon_list--entry--icon_wrapper { transition-delay: 0.9s; } .icon_list.is-in-view .icon_list--entry:nth-of-type(3) .icon_list--entry--icon_wrapper { transition-delay: 1.05s; } .icon_list.is-in-view .icon_list--entry:nth-of-type(4) .icon_list--entry--icon_wrapper { transition-delay: 1.2s; } .icon_list.is-in-view .icon_list--entry:nth-of-type(5) .icon_list--entry--icon_wrapper { transition-delay: 1.35s; } .icon_list.is-in-view .icon_list--entry:nth-of-type(6) .icon_list--entry--icon_wrapper { transition-delay: 1.5s; } .icon_list.is-in-view .icon_list--entry:nth-of-type(n+7) .icon_list--entry--icon_wrapper { transition-delay: 1.65s; } .icon_list--entry--icon_wrapper { margin-bottom: 20px; opacity: 0; transform: translateY(-1rem); } .icon_list.is-in-view .icon_list--entry--icon_wrapper { transition: opacity 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.75s cubic-bezier(0.165, 0.84, 0.44, 1); opacity: 1; transform: none; } .icon_list--entry--title { margin-bottom: 1em; } .price_table { width: 100%; font-size: 15px; font-size: 0.83333rem; letter-spacing: 1px; color: #f2f2f2; margin-bottom: 80px; } .price_table--row td { padding: 5px; border-bottom: 1px solid rgba(255, 255, 255, 0.15); } .price_table--row td:first-child { font-weight: 600; } .price_table--row td:nth-last-child(2) { width: 110px; text-align: center; color: rgba(242, 242, 242, 0.6); } .price_table--row td:last-child { width: 110px; text-align: right; color: rgba(242, 242, 242, 0.6); white-space: nowrap; } @media (max-width: 750px) { .price_table--row td:nth-last-child(2) { width: 60px; } .price_table--row td:last-child { width: 60px; } } .system_message { margin: 350px auto 150px; text-align: center; } @media (max-width: 750px) { .system_message { margin: 350px 20px 150px; } } .system_message--image { text-align: center; } .system_message--image img { max-width: 100%; } .system_message--title { margin: 40px 0; } .system_message--text { margin: 40px auto 90px; max-width: 550px; font-size: 15px; font-size: 0.83333rem; letter-spacing: 1px; } .system_message--link a { display: inline-block; height: 60px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 17px 30px; border: 1px solid #333; -moz-transition: background 0.35s linear; -o-transition: background 0.35s linear; -webkit-transition: background 0.35s linear; transition: background 0.35s linear; } .system_message--link a:hover { background: #f2f2f2; color: #222; } .back_item--link { color: #c8c8c8; -moz-transition: color 0.35s; -o-transition: color 0.35s; -webkit-transition: color 0.35s; transition: color 0.35s; } .back_item--link:hover { color: #f2f2f2; } .back_item--link--icon.icon { margin-right: 20px; } .wysiwyg_text { color: #c8c8c8; margin: 80px auto; } .wysiwyg_text h1, .wysiwyg_text h2 { margin-bottom: 25px; margin-top: 50px; line-height: 1.2; } .wysiwyg_text h3 { color: #f1f1f1; font-size: 13px; font-size: 0.72222rem; font-weight: 600; margin-bottom: 30px; } .wysiwyg_text p, .wysiwyg_text li { font-size: 18px; font-size: 1rem; line-height: 34px; line-height: 1.88889rem; font-weight: 300; } @media (max-width: 400px) { .wysiwyg_text p, .wysiwyg_text li { font-size: 16px; font-size: 0.88889rem; line-height: 1.8; } } .wysiwyg_text ul, .wysiwyg_text ol { margin-bottom: 30px; } .wysiwyg_text p { margin-bottom: 34px; } .wysiwyg_text a { color: #9d9d9d; text-decoration: underline; } .wysiwyg_text a:hover { color: #f1f1f1; } .wysiwyg_text span.highlight { background: transparent; color: #f1f1f1; font-weight: 400; } .wysiwyg_text li { position: relative; list-style: none; padding-left: 25px; font-size: 15px; font-size: 0.83333rem; line-height: 24px; } .wysiwyg_text li:before { content: ""; position: absolute; width: 10px; height: 100%; left: 1px; top: 1px; background-image: url("../img/icons/bullet-point.png"); background-repeat: no-repeat; background-size: 4px 7px; background-position: 0 9px; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .wysiwyg_text li:before { background-image: url("../img/icons2x/bullet-point.png"); } } .wysiwyg_text table { width: 100%; font-size: 0.75rem; color: #f2f2f2; margin-bottom: 80px; } .wysiwyg_text tr td:first-child { padding: 5px; border-bottom: 1px solid rgba(255, 255, 255, 0.15); } .wysiwyg_text tr td:not(:first-child) { padding: 5px; border-bottom: 1px solid rgba(255, 255, 255, 0.15); border-left: 1px solid rgba(255, 255, 255, 0.15); } .page-title .h1 { margin: 260px 0 80px; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; } .product_header { position: relative; padding-top: 500px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } @media only screen and (max-width: 850px) { .product_header { padding-top: 500px !important; } } .product_header--content { position: absolute; top: 0; width: 700px; height: 100%; z-index: 15; left: 50%; margin-left: -350px; } @media (max-width: 750px) { .product_header--content { width: 100%; left: 0; margin-left: 0; } } .product_header--title { position: absolute; width: 100%; text-align: center; line-height: 70px; top: 30%; } @media (max-width: 750px) { .product_header--title { font-size: 26px; font-size: 1.44444rem; box-sizing: border-box; padding: 0 40px; line-height: 40px; top: 40%; } } .product_header--next { display: block; width: 60px; height: 60px; position: absolute; top: 60%; left: 50%; margin-left: -30px !important; overflow: visible; letter-spacing: 1px; line-height: 52px; font-size: 13px; font-size: 0.72222rem; color: #f2f2f2; text-decoration: none; } .product_header--next .circle { position: absolute; display: block; width: 60px; height: 60px; border: 1px solid #fff; border-radius: 30px; opacity: 1; -moz-transition: opacity 0.35s linear; -o-transition: opacity 0.35s linear; -webkit-transition: opacity 0.35s linear; transition: opacity 0.35s linear; overflow: hidden; } .product_header--next .text { position: absolute; display: block; left: 80px; width: 120px; line-height: 17px; margin-top: 23px; font-weight: 600; } .product_header--next .circle--inner { position: absolute; display: block; width: 60px; height: 60px; opacity: 1; } .product_header--next:hover, .product_header--next.is-active { opacity: 1; } @media only screen and (max-width: 1050px) { .product_header--next { display: none; } .product_header--next.show-on-tablet { display: block; margin-top: 30px; } .product_header--next.show-on-tablet .text { position: relative; left: 0px; width: 120px; line-height: 17px; margin-top: 80px; text-align: center; margin-left: -30px; } } .product_header--overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjEuMCIgeDI9IjAuNSIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzIyMjIyMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzIyMjIyMiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #222222), color-stop(100%, rgba(34, 34, 34, 0))); background-image: -moz-linear-gradient(bottom, #222222 0%, rgba(34, 34, 34, 0) 100%); background-image: -webkit-linear-gradient(bottom, #222222 0%, rgba(34, 34, 34, 0) 100%); background-image: linear-gradient(to top, #222222 0%, rgba(34, 34, 34, 0) 100%); z-index: 10; pointer-events: none; } .product_header--background { position: fixed; top: 0; left: 0; right: 0; z-index: -1; } .product_header--background img, .product_header--background video { position: absolute; top: 0; left: 0; width: 100%; z-index: 0; display: block; } .product_header--background img.product_header--poster { display: block; } @media only screen and (max-width: 850px) { .product_header--background { padding-top: 500px !important; } .product_header--background img, .product_header--background video { width: auto; height: 500px; left: 50%; -moz-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); z-index: 0; } } html.no-videoautoplay .product_header--background .product_header--poster { display: block; } html.no-videoautoplay .product_header--background .product_header--video { display: none; } .stats { margin-bottom: 80px; margin-top: -60px; } .stats--item { text-align: left; margin-top: 50px; } .stats--title { font-size: 13px; font-size: 0.72222rem; font-weight: 600; color: #f2f2f2; } .stats--number { font-size: 50px; font-size: 2.77778rem; font-weight: 600; color: #f1f1f1; display: block; float: left; line-height: 40px; margin-bottom: 20px; opacity: 0; } @media (max-width: 750px) { .stats--number { font-size: 40px; font-size: 2.22222rem; margin-bottom: 10px; } } .stats--number.animating { opacity: 1; } .stats--unit { font-size: 18px; font-size: 1rem; font-weight: 600; color: #f1f1f1; display: block; float: left; line-height: 26px; margin-left: 10px; } @media (max-width: 750px) { .stats--unit { font-size: 14px; font-size: 0.77778rem; } } .stats--description { font-size: 13px; font-size: 0.72222rem; font-weight: 600; line-height: 1.5; color: #9d9d9d; clear: both; } .slideshow { margin-bottom: 80px; margin-top: 100px; width: 100%; height: 100%; position: relative; } .slideshow--list { width: 100%; position: relative; } .slideshow--slide { width: 100%; height: 100%; } .slideshow--slide.is-loaded { position: absolute; top: 0; left: 0; } .slideshow--slide:first-child { visibility: visible; opacity: 1; } .slideshow--slide.is-active .slideshow--claim { visibility: visible; opacity: 1; } .slideshow--navigation--prev, .slideshow--navigation--next { display: block; position: absolute; top: 50%; margin-top: -20px; } .slideshow--navigation--prev { left: 40px; } .slideshow--navigation--next { right: 40px; } .slideshow--pager_list { width: auto; text-align: center; } .slideshow--pager_list > li { display: inline-block; } @media only screen and (max-width: 850px) { .slideshow--pager_list { display: -webkit-flex; display: flex; } .slideshow--pager_list > li { -webkit-flex-grow: 1; flex-grow: 1; } } .slideshow--pager_container { z-index: 0; position: absolute; width: 100%; top: -61px; } .slideshow--pager_container::before { content: ''; z-index: -1; position: absolute; bottom: 0; left: 0; right: 0; border-bottom: 1px solid #444; } .slideshow--pager { display: inline-block; position: relative; padding: 1px 20px; height: 60px; line-height: 60px; } @media only screen and (max-width: 850px) { .slideshow--pager { width: 100%; padding: 1px 0; } } .slideshow--pager:before { content: ''; display: block; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; transition: width 0s ease, background .5s ease; } .slideshow--pager:after { content: ''; display: block; position: absolute; right: 0; bottom: 0; height: 1px; width: 0; background: #9f9f9f; transition: width .5s ease; } html.no-touchevents .slideshow--pager:hover:before, .slideshow--pager.is-active:before { width: 100%; background: #9f9f9f; transition: width .5s ease; } html.no-touchevents .slideshow--pager:hover:after, .slideshow--pager.is-active:after { width: 100%; background: transparent; transition: all 0s ease; } .quick_links { position: relative; display: inline-block; } .quick_links--item { display: inline-block; width: 60px; height: 60px; margin-right: 1px; margin-bottom: 1px; background: rgba(252, 252, 252, 0.9); font-size: 13px; font-size: 0.72222rem; } .quick_links--item a { display: block; width: 60px; color: #222; text-decoration: none; text-align: center; padding: 18px 0; text-indent: -9999px; overflow: hidden; } .anker_nav { position: fixed; bottom: 0; left: 0; right: 0; height: 70px; border-top: 1px solid #444; background: #222; z-index: 100; bottom: -80px; } .anker_nav--link_list { display: block; margin: 0; padding: 0; text-align: center; } .anker_nav--link_list--item { display: inline-block; height: 70px; width: 130px; } .anker_nav--line { position: absolute; height: 1px; width: 700px; left: 0; top: -1px; background: #dc0000; } .anker_nav--link_list--item--link { display: block; position: relative; z-index: 10; line-height: 70px; font-size: 13px; font-size: 0.72222rem; color: rgba(255, 255, 255, 0.3); text-decoration: none; font-weight: 600; } .anker_nav--link_list--item--link::before { content: ""; position: absolute; width: 5px; height: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; top: -3px; left: 50%; margin-left: -2px; background: #444; border: 0 solid #e21f00; -moz-transition: all 200ms 400ms; -o-transition: all 200ms 400ms; -webkit-transition: all 200ms; -webkit-transition-delay: 400ms; transition: all 200ms 400ms; } .anker_nav--link_list--item--link.is-active { color: white; } .anker_nav--link_list--item--link.is-active::before { content: ""; position: absolute; width: 12px; height: 12px; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px; top: -9px; left: 50%; margin-left: -4px; background: #dc0000; border: 2px solid #dc0000; box-shadow: inset 0 0 0 3px #222; } .anker_nav--link_list--item--link.is-past::before { content: ""; position: absolute; width: 7px; height: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px; top: -4px; left: 50%; margin-left: -4px; background: #dc0000; } .skiplinks .skiplink a { position: absolute; top: 0; z-index: 10000; top: -9999999px; right: -9999999px; padding: 5px 8px; border: 1px solid #000; background: #fff; font-size: 16px; font-size: 0.88889rem; } .skiplinks .skiplink a:focus, .skiplinks .skiplink a:active { top: 0; left: 0; right: auto; } .social_list { text-align: center; margin-top: 60px; } .social_list--item { display: inline-block; margin: 0 6px; } .social_list--link { display: block; width: 60px; height: 60px; border: 1px solid #fff; border-radius: 30px; opacity: 0.4; -moz-transition: opacity 0.35s linear; -o-transition: opacity 0.35s linear; -webkit-transition: opacity 0.35s linear; transition: opacity 0.35s linear; } .social_list--link:hover, .social_list--link.is-active { opacity: 1; } .footer_nav { text-align: center; margin-top: 60px; } .footer_nav--link_list--item { display: inline-block; } @media (max-width: 750px) { .footer_nav--link_list--item { display: block; } } .footer_nav--link_list--item--link { display: block; font-weight: 600; letter-spacing: 1px; color: rgba(255, 255, 255, 0.6); -moz-transition: color 0.35s linear; -o-transition: color 0.35s linear; -webkit-transition: color 0.35s linear; transition: color 0.35s linear; padding: 10px 10px; text-decoration: none; } @media only screen and (max-width: 1382px) { .footer_nav--link_list--item--link { font-size: 13px; font-size: 0.72222rem; } } @media (min-width: 1383px) { .footer_nav--link_list--item--link { font-size: 15px; font-size: 0.83333rem; } } .footer_nav--link_list--item--link:hover, .footer_nav--link_list--item--link.is-active { color: white; } .is-visuallyhidden { border: 0; clip: auto; height: 10px; margin-bottom: -10px; overflow: hidden; padding: 0; position: absolute; width: 10px; color: transparent; background: transparent; z-index: 1000000; } .is-visuallyhidden:not(:focus) { border: 0 !important; clip: rect(0 0 0 0) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important; } .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .is-visible { display: block; } .is-hidden { display: none; } html.js .is-hidden-js { display: none; } .is-visible-mobile-portrait { display: none !important; } .is-visible-mobile { display: none !important; } .is-visible-tablet { display: none !important; } .is-visible-tablet-portrait { display: none !important; } .is-hidden-desktop { display: none !important; } .is-visible-desktop { display: block !important; } .is-hidden-js { display: none; } html.no-js .is-hidden-js { display: block; } html.js .is-hidden-js { display: none; } html.no-js .is-visible-js { display: none; } @media only screen and (max-width: 1050px) { .is-hidden-desktop { display: block !important; } .is-visible-desktop { display: none !important; } .is-visible-tablet { display: block !important; } .is-hidden-tablet { display: none !important; } } @media only screen and (max-width: 850px) { .is-visible-tablet-portrait { display: block !important; } .is-hidden-tablet-portrait { display: none !important; } } @media (max-width: 750px) { .is-visible-mobile { display: block !important; } .is-hidden-mobile { display: none !important; } } @media (max-width: 400px) { .is-visible-mobile-portrait { display: block !important; } .is-hidden-mobile-portrait { display: none !important; } } @media print { .is-visible-print { display: block !important; } .is-hidden-print { display: none !important; } } body:after { display: none; content: 'desktop'; } @media only screen and (max-width: 1050px) { body:after { content: 'tablet'; } } @media only screen and (max-width: 850px) { body:after { content: 'tablet-portrait'; } } @media (max-width: 750px) { body:after { content: 'mobile'; } } @media (max-width: 400px) { body:after { content: 'mobile-portrait'; } } .media-dispatcher-fallback { display: none; margin-bottom: 0px; } @media only screen and (max-width: 1050px) { .media-dispatcher-fallback { margin-bottom: 1px; } } @media only screen and (max-width: 850px) { .media-dispatcher-fallback { margin-bottom: 2px; } } @media (max-width: 750px) { .media-dispatcher-fallback { margin-bottom: 3px; } } @media (max-width: 400px) { .media-dispatcher-fallback { margin-bottom: 4px; } } body:before { display: none; content: ''; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { body:before { content: 'retina'; } } @media print { * { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } } .is-disabled-fld, .is-disabled-label { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); opacity: 0.5; } .is-disabled { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); opacity: 0.5; pointer-events: none; } *[disabled] { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); opacity: 0.5; pointer-events: none; }