body > div.overlay div.dialog div.headline:before, body > div.overlay div.dialog div.headline:after { content: " ";display: table; } body > div.overlay div.dialog div.headline:after { clear: both; } /* Following are not defined as they wouldn't make sense (they would match all elements and thus doesn't need a media query) .xsDown() .xsUp() lgDown() lgUp() */ /*.xs(@rules) { @media @breakpoint-xs-and-down { @rules(); } }*/ .productGrid div.productThumb .ratingContainer .rating { font-size: 20px;letter-spacing: 3px; } .productGrid div.productThumb .ratingContainer .rating.small { font-size: 16px; } .productGrid div.productThumb .ratingContainer .rating.large { font-size: 24px; } .productGrid div.productThumb .ratingContainer .rating .fullStars { color: #222222; } .productGrid div.productThumb .ratingContainer .rating .emptyStars { color: #E9E9E9; } .productGrid div.productThumb .ratingContainer .rating .emptyStars.half { position: relative; } .productGrid div.productThumb .ratingContainer .rating .emptyStars.half::before { display: block;z-index: 1;position: absolute;top: 0;left: 0;width: auto;content: '\f089';overflow: hidden;color: #8E8E8E; } .productGridHeader { position: relative;margin-bottom: 40px;padding-bottom: 0;border-bottom: 0;text-align: center; } .productGridHeader::after { position: absolute;z-index: 0;content: '';top: 50%;left: 0;right: 0;height: 1px;background-color: #DFDFDF; } .productGridHeader h2, .productGridHeader h3, .productGridHeader h4 { position: relative;z-index: 50;padding: 0 20px;background-color: white;display: inline-block;margin: 0;font-size: 26px; } .blockEditContent [data-structured-data-type="FAQ"][data-faq-style="collapse"] .question::after, input[type="checkbox"].formControl + .checkMark::after, .slider .knob { /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'icomoon' !important;speak: none;font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;line-height: 1;/* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; } header div.search { position: static; } header .searchSuggestions { background-color: white; position: absolute; z-index: 1010; height: auto; left: 0; width: 100%; -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); } @media (min-width: 768px) { header .searchSuggestions { left: 50%; width: 750px; margin-left: -375px; } } @media (min-width: 992px) and (max-width: 1199px) { header .searchSuggestions { width: 600px; margin-left: -300px; } } @media (min-width: 1200px) { header .searchSuggestions { width: 700px; margin-left: -350px; } } header .searchSuggestions .searchSuggestion { font-size: 15px; cursor: pointer; padding: 6px 20px; } header .searchSuggestions .searchSuggestion:hover { background-color: #F9F9F9; } header .searchSuggestions .searchSuggestion.header, header .searchSuggestions .searchSuggestion.showAllResults { font-weight: 700; font-size: 16px; border-top: 1px solid #DFDFDF; } header .searchSuggestions .searchSuggestion.header { cursor: auto; margin-top: 5px; } header .searchSuggestions .searchSuggestion.product .price { text-align: right; font-weight: 700; } header .searchSuggestions .searchSuggestion.showAllResults { text-align: center; padding: 10px; margin-top: 10px; } header .searchSuggestions .searchSuggestion.highlighted { background-color: #77D3EE22; } header .stickyHeader { position: fixed; top: 0; background-color: white; z-index: 1000; width: 100%; height: 60px; -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15); box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15); } @media (max-width: 991px) { header .stickyHeader.pinned { display: block; } } @media (max-width: 767px) { header .stickyHeader.categoryMenuShown { height: 110px; } } header .stickyHeader .mobileMenu { text-align: center; line-height: 60px; color: #0F3F68; font-size: 19px; } @media (max-width: 767px) { header .stickyHeader .search { padding: 0; } header .stickyHeader .search input[name="query"] { font-size: 16px; } } @media (max-width: 420px) { header .stickyHeader .search input[name="query"] { padding-left: 14px; padding-right: 14px; } header .stickyHeader .search button { padding: 0 12px; } } @media (max-width: 380px) { header .stickyHeader .search input[name="query"] { font-size: 14px; } } @media (max-width: 359px) { header .stickyHeader .search input[name="query"] { padding-left: 10px; padding-right: 10px; } } header .stickyHeader .search .input-group { margin-top: 18px / 2; } header .stickyHeader .search .searchSuggestions { top: 60px; } header .stickyHeader .cart { line-height: 60px; text-align: center; } header .stickyHeader .cart a { display: inline-block; position: relative; } header .stickyHeader .cart a img { width: 30px; } header .stickyHeader .cart a .cartQuantity { position: absolute; border-radius: 100%; font-weight: 700; text-align: center; top: 11px; right: -7px; width: 16px; height: 16px; line-height: 16px; font-size: 10px; background-color: #CAD8E1; color: #000; } header .breadcrumbs ol li + li::before { /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'icomoon' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\e105"; color: #78787A; padding: 0 5px; } header .cartPopup { position: fixed; top: 0; right: 0; z-index: 1020; background-color: white; width: 506px; font-size: 16px; font-weight: 400; padding: 0 15px 15px 15px; -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); } @media (max-width: 767px) { header .cartPopup { width: 100%; } } @media (max-width: 380px) { header .cartPopup { font-size: 14px; } } header .cartPopup .header { background-color: #000000; color: white; text-align: center; height: 38px; line-height: 38px; margin: 0 -15px; } header .cartPopup .products { margin-bottom: 10px; max-height: 360px; overflow-x: hidden; overflow-y: scroll; } @media (max-width: 380px) { header .cartPopup .products { max-height: 300px; } } header .cartPopup .products .row { border-top: 1px solid #DFDFDF; padding: 15px 15px; } header .cartPopup .products .row:first-child { border-top: none; } header .cartPopup .products .row:hover { background-color: #F9F9F9; } header .cartPopup .products .row > div { height: 50px; } header .cartPopup .products .row > div > * { display: block; position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } header .cartPopup .products .image { text-align: center; padding: 0; width: 50px; } header .cartPopup .products .image img { width: 50px; } @media (max-width: 380px) { header .cartPopup .products .title { width: 52%; } } header .cartPopup .products .quantityPrice { padding-left: 0; text-align: right; } header .cartPopup .products .remove { padding-left: 0; padding-right: 0; text-align: right; } @media (max-width: 380px) { header .cartPopup .products .remove { min-width: 15px; } } header .cartPopup .products .remove button { border: none; background: none; width: 100%; height: 100%; text-align: center; } header .cartPopup .products .remove button .icon { color: #CF6D6D; } header .cartPopup .totals { margin-bottom: 20px; } header .cartPopup .totals .amount { text-align: right; } html.overlaid, html.overlaid body { overflow-y: hidden; } body > div.overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1090; overflow-y: scroll; background-color: rgba(128, 128, 128, 0.7); height: 100%; } body > div.overlay div.dialog { display: inline-block; position: relative; top: 50%; left: 50%; border-radius: 4px; background-color: white; -webkit-transform: translateY(-50%) translateX(-50%); -ms-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); } @media (max-width: 767px) { body > div.overlay div.dialog { min-width: 90%; max-width: 90%; } } @media (min-width: 768px) and (max-width: 991px) { body > div.overlay div.dialog { min-width: 500px; max-width: 600px; } } @media (min-width: 992px) { body > div.overlay div.dialog { min-width: 650px; max-width: 700px; } } body > div.overlay div.dialog div.headline { padding: 15px; border-bottom: 1px solid #DFDFDF; } body > div.overlay div.dialog div.headline .title { font-weight: 700; font-size: 18px; } body > div.overlay div.dialog div.headline button.close { padding: 0 10px; font-size: 24px; float: right; cursor: pointer; background: transparent; font-weight: bold; line-height: 1; color: black; border: 0; text-shadow: 0 1px 0 white; opacity: 0.2; filter: alpha(opacity=20); -webkit-appearance: none; -moz-appearance: none; appearance: none; } body > div.overlay div.dialog div.headline button.close:hover, body > div.overlay div.dialog div.headline button.close:focus { text-decoration: none; cursor: pointer; opacity: 0.5; filter: alpha(opacity=50); } body > div.overlay div.dialog div.headline + .content, body > div.overlay div.dialog div.headline + .buttons { margin-top: 15px; } body > div.overlay div.dialog div.content { padding: 15px; max-height: 400px; overflow-y: scroll; overflow-x: hidden; } body > div.overlay div.dialog div.content + .buttons { margin-top: 15px; } @media (max-width: 767px) { body > div.overlay div.dialog div.content { max-height: 250px; } } @media (min-width: 768px) and (max-width: 991px) { body > div.overlay div.dialog div.content { max-height: 350px; } } @media (min-width: 992px) { body > div.overlay div.dialog div.content { max-height: 450px; } } @media (min-width: 992px) and (max-height: 600px) { body > div.overlay div.dialog div.content { max-height: 350px; } } @media (min-width: 992px) and (max-height: 500px) { body > div.overlay div.dialog div.content { max-height: 250px; } } body > div.overlay div.dialog div.content a { text-decoration: underline; } body > div.overlay div.dialog div.buttons { padding: 15px; text-align: right; border-top: 1px solid #DFDFDF; } body > div.overlay div.dialog div.buttons:empty { padding: 0; border: 0; } body > div.overlay div.dialog div.buttons button + button { margin-left: 10px; } section.advantages { background-color: #F9F9F9; } section.advantages .row { padding-top: 60px; padding-bottom: 60px; } @media (max-width: 767px) { section.advantages .row { padding-top: 40px; padding-bottom: 40px; } } section.advantages .advantage { text-align: center; cursor: pointer; } @media (max-width: 767px) { section.advantages .advantage { margin: 15px 0; } } section.advantages .advantage .iconWrapper { width: 130px; height: 130px; margin: 0 auto; background-color: white; border-radius: 100%; } section.advantages .advantage .iconWrapper .icon { font-size: 60px; line-height: 130px; } @media (min-width: 992px) and (max-width: 1199px) { section.advantages .advantage .iconWrapper { width: 120px; height: 120px; } section.advantages .advantage .iconWrapper .icon { line-height: 120px; } } @media (min-width: 768px) and (max-width: 991px) { section.advantages .advantage .iconWrapper { width: 90px; height: 90px; } section.advantages .advantage .iconWrapper .icon { font-size: 50px; line-height: 90px; } } @media (max-width: 767px) { section.advantages .advantage .iconWrapper { width: 70px; height: 70px; } section.advantages .advantage .iconWrapper .icon { font-size: 32px; line-height: 70px; } } section.advantages .advantage h3 { font-size: 26px; margin-top: 22px; margin-bottom: 11px; } @media (min-width: 768px) and (max-width: 991px) { section.advantages .advantage h3 { font-size: 22px; } } @media (max-width: 767px) { section.advantages .advantage h3 { font-size: 20px; } } section.advantages .advantage .description { line-height: 1.42857143; } section.advantages .advantage .description a { text-decoration: underline; } section.advantages .advantage .description a:hover { color: #0076A3; } section.newsletter { text-align: center; /* form.subscribeNewsletter { margin-top: 20px; .recaptchaNotice { @unnoticedGrey: #BCBCBC; color: @unnoticedGrey !important; font-size: 12px; a { text-decoration: underline; color: @unnoticedGrey; } } } */ } section.newsletter .container { padding-top: 60px; padding-bottom: 60px; } @media (min-width: 768px) and (max-width: 991px) { section.newsletter .container { padding-top: 50px; padding-bottom: 50px; } } @media (max-width: 767px) { section.newsletter .container { padding-top: 40px; padding-bottom: 40px; } } section.newsletter h2 { font-size: 36px; margin-top: 0; margin-bottom: 10px; } @media (min-width: 768px) and (max-width: 991px) { section.newsletter h2 { font-size: 30px; } } @media (max-width: 767px) { section.newsletter h2 { font-size: 28px; } } section.newsletter form { margin-top: 20px; } section.newsletter input[name="email"] { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; position: relative; } section.newsletter input[name="email"]:focus { z-index: 3; } section.newsletter button { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; z-index: 2; margin-left: -1px; } section.newsletter button .icon { font-size: 18px; } section.links { background-color: #F9F9F9; } section.links .container { padding-top: 60px; padding-bottom: 60px; } @media (max-width: 767px) { section.links .container { padding: 40px 0; } } @media (min-width: 768px) and (max-width: 991px) { section.links .container { padding-top: 50px; padding-bottom: 50px; } } section.links h3 { margin: 0 0 15px 0; font-weight: 400; font-size: 26px; } section.links ul { padding: 0; margin: 0; } section.links ul li { list-style: none; line-height: 1.42857143; } footer ul { padding: 0; margin: 0; } footer ul li { list-style: none; } footer .container > .row { padding: 15px 0; } footer .item { vertical-align: middle; height: 45px; line-height: 45px; margin-top: 15px; margin-bottom: 15px; text-align: center; } .embed-responsive { position: relative; display: block; height: 0; padding: 0; overflow: hidden; } .embed-responsive .embed-responsive-item, .embed-responsive iframe, .embed-responsive embed, .embed-responsive object, .embed-responsive video { position: absolute; top: 0; left: 0; bottom: 0; height: 100%; width: 100%; border: 0; } .embed-responsive-16by9 { padding-bottom: 56.25%; } .embed-responsive-4by3 { padding-bottom: 75%; } .slideshow { padding-left: 15px; padding-right: 15px; display: flex; } .slideshow .wrapper { display: flex; align-items: center; padding-top: 15px; padding-bottom: 15px; border-top: 1px solid; border-bottom: 1px solid; } .slideshow .wrapper .slider-arrow { background: none; border: none; cursor: pointer; z-index: 1; font-size: 70px; color: #a2a2a2; -webkit-transition: color 150ms linear; -o-transition: color 150ms linear; transition: color 150ms linear; } @media (min-width: 992px) { .slideshow .wrapper .slider-arrow:hover { color: #000000; } } @media (max-width: 991px) { .slideshow .wrapper .slider-arrow { display: none; } } .slideshow .wrapper .slider-arrow.auto-scroll { display: none; } .slideshow .wrapper .imageSlider { overflow: hidden; position: relative; white-space: nowrap; } .slideshow .wrapper .imageSlider .slide { position: relative; display: inline-block; float: none; white-space: normal; vertical-align: middle; margin-bottom: unset !important; padding-left: 5px; padding-right: 5px; } .slideshow .wrapper .imageSlider .imageContainer { float: left; position: relative; width: 100%; } .slideshow .wrapper .imageSlider .imageContainer.slideTransition { -webkit-transition: -webkit-transform 400ms ease; -moz-transition: -moz-transform 400ms ease; -o-transition: -o-transform 400ms ease; transition: transform 400ms ease; } lite-youtube { background-color: #000; position: relative; display: block; contain: content; background-position: center center; background-size: cover; cursor: pointer; max-width: 720px; } /* gradient */ lite-youtube::before { content: ''; display: block; position: absolute; top: 0; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==); background-position: top; background-repeat: repeat-x; height: 60px; padding-bottom: 50px; width: 100%; transition: all 0.2s cubic-bezier(0, 0, 0.2, 1); } /* responsive iframe with a 16:9 aspect ratio thanks https://css-tricks.com/responsive-iframes/ */ lite-youtube::after { content: ""; display: block; padding-bottom: calc(100% / (16 / 9)); } lite-youtube > iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; border: 0; } /* play button */ lite-youtube > .lty-playbtn { display: block; /* Make the button element cover the whole area for a large hover/click target… */ width: 100%; height: 100%; /* …but visually it's still the same size */ background: no-repeat center / 68px 48px; /* YT's actual play button svg */ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 48"><path d="M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55c-2.93.78-4.63 3.26-5.42 6.19C.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z" fill="red"/><path d="M45 24 27 14v20" fill="white"/></svg>'); position: absolute; cursor: pointer; z-index: 1; filter: grayscale(100%); transition: filter 0.1s cubic-bezier(0, 0, 0.2, 1); border: 0; } lite-youtube:hover > .lty-playbtn, lite-youtube .lty-playbtn:focus { filter: none; } /* Post-click styles */ lite-youtube.lyt-activated { cursor: unset; } lite-youtube.lyt-activated::before, lite-youtube.lyt-activated > .lty-playbtn { opacity: 0; pointer-events: none; } .lyt-visually-hidden { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } @media (min-width: 0px) and (max-width: 767px) { .paddingLeftNone-xs { padding-left: 0; } } @media (min-width: 768px) and (max-width: 991px) { .paddingLeftNone-sm { padding-left: 0; } } @media (min-width: 992px) and (max-width: 1199px) { .paddingLeftNone-md { padding-left: 0; } } @media (min-width: 1200px) { .paddingLeftNone-lg { padding-left: 0; } } @media (min-width: 0px) and (max-width: 767px) { .paddingLeftFive-xs { padding-left: 5px; } } @media (min-width: 768px) and (max-width: 991px) { .paddingLeftFive-sm { padding-left: 5px; } } @media (min-width: 992px) and (max-width: 1199px) { .paddingLeftFive-md { padding-left: 5px; } } @media (min-width: 1200px) { .paddingLeftFive-lg { padding-left: 5px; } } @media (min-width: 0px) and (max-width: 767px) { .paddingLeftTen-xs { padding-left: 10px; } } @media (min-width: 768px) and (max-width: 991px) { .paddingLeftTen-sm { padding-left: 10px; } } @media (min-width: 992px) and (max-width: 1199px) { .paddingLeftTen-md { padding-left: 10px; } } @media (min-width: 1200px) { .paddingLeftTen-lg { padding-left: 10px; } } @media (min-width: 0px) and (max-width: 767px) { .paddingLeftFifteen-xs { padding-left: 15px; } } @media (min-width: 768px) and (max-width: 991px) { .paddingLeftFifteen-sm { padding-left: 15px; } } @media (min-width: 992px) and (max-width: 1199px) { .paddingLeftFifteen-md { padding-left: 15px; } } @media (min-width: 1200px) { .paddingLeftFifteen-lg { padding-left: 15px; } } @media (min-width: 0px) and (max-width: 767px) { .paddingRightNone-xs { padding-right: 0; } } @media (min-width: 768px) and (max-width: 991px) { .paddingRightNone-sm { padding-right: 0; } } @media (min-width: 992px) and (max-width: 1199px) { .paddingRightNone-md { padding-right: 0; } } @media (min-width: 1200px) { .paddingRightNone-lg { padding-right: 0; } } @media (min-width: 0px) and (max-width: 767px) { .paddingRightFive-xs { padding-right: 5px; } } @media (min-width: 768px) and (max-width: 991px) { .paddingRightFive-sm { padding-right: 5px; } } @media (min-width: 992px) and (max-width: 1199px) { .paddingRightFive-md { padding-right: 5px; } } @media (min-width: 1200px) { .paddingRightFive-lg { padding-right: 5px; } } @media (min-width: 0px) and (max-width: 767px) { .paddingRightTen-xs { padding-right: 10px; } } @media (min-width: 768px) and (max-width: 991px) { .paddingRightTen-sm { padding-right: 10px; } } @media (min-width: 992px) and (max-width: 1199px) { .paddingRightTen-md { padding-right: 10px; } } @media (min-width: 1200px) { .paddingRightTen-lg { padding-right: 10px; } } @media (min-width: 0px) and (max-width: 767px) { .paddingRightFifteen-xs { padding-right: 15px; } } @media (min-width: 768px) and (max-width: 991px) { .paddingRightFifteen-sm { padding-right: 15px; } } @media (min-width: 992px) and (max-width: 1199px) { .paddingRightFifteen-md { padding-right: 15px; } } @media (min-width: 1200px) { .paddingRightFifteen-lg { padding-right: 15px; } } .blockEditContent { line-height: 1.42857143; /*.slideshow {*/ /*overflow: hidden; .wrapper { overflow: hidden; height:100%; &::after { content: ''; display: block; clear: both; } .backSlider, .forwardSlider { position: absolute; top: 50%; .transform(translateY(-50%)); z-index: 10; cursor: pointer; font-size: 70px; } .backSlider{ left: 0; } .forwardSlider{ right: 0; } &, .sliderContainer { float: left; position: relative; width: 100%; white-space: nowrap; &.slideTransition{ .transition-transform(400ms ease); } &>* { width: 100%; display: inline-block; float: none; position: relative; white-space: normal; vertical-align: middle; } } opacity: 0; transition: opacity 0.3s ease; &.slider { opacity: 1; } }*/ /* display: flex; align-items: center; padding-top: 10px; padding-bottom: 10px; border-top: 1px solid; border-bottom: 1px solid; .slider-wrapper { overflow: auto; //scroll-snap-type: x mandatory; //transition: scroll-left 0.3s ease; //scroll-behavior: smooth; flex-grow: 1; position: relative; -webkit-overflow-scrolling: touch; // For Chrome, Safari, and newer versions of Opera &::-webkit-scrollbar { display: none; // Hide scrollbar } // For Firefox scrollbar-width: none; // For Internet Explorer and Edge -ms-overflow-style: none; } .slider-content { display: flex; transition: transform 0.3s; } .slider-arrow { cursor: pointer; background: none; border: none; font-size: 24px; } .slide { scroll-snap-align: start; width: 100%; padding-left: 5px; padding-right: 5px; } }*/ } .blockEditContent > br, .blockEditContent > .container > br { display: block; content: ""; margin-top: 20px; } .blockEditContent::before, .blockEditContent::after { content: " "; display: table; } @media (max-width: 767px) { .blockEditContent div.row .bs-col-xs { margin-bottom: 30px; margin-bottom: 10px; } .blockEditContent div.row .bs-col-xs img { width: 100%; height: auto; } .blockEditContent div.row .bs-col-xs.bottomZero-xxs { margin-bottom: 0px; } } @media (min-width: 768px) and (max-width: 991px) { .blockEditContent div.row .bs-col-sm { margin-bottom: 30px; } .blockEditContent div.row .bs-col-sm img { width: 100%; height: auto; } .blockEditContent div.row .bs-col-sm.bottomZero-sm { margin-bottom: 0px; } } @media (min-width: 992px) and (max-width: 1199px) { .blockEditContent div.row .bs-col-md { margin-bottom: 30px; } .blockEditContent div.row .bs-col-md img { width: 100%; height: auto; } .blockEditContent div.row .bs-col-md.bottomZero-md { margin-bottom: 0px; } } @media (min-width: 1200px) { .blockEditContent div.row .bs-col-lg { margin-bottom: 30px; } .blockEditContent div.row .bs-col-lg img { width: 100%; height: auto; } .blockEditContent div.row .bs-col-lg.bottomZero-lg { margin-bottom: 0px; } } .blockEditContent div.deviceIndicator { display: block; } .blockEditContent a { text-decoration: underline; } .blockEditContent a.floatLeft { float: left; } .blockEditContent a.floatRight { float: right; } .blockEditContent p { --fontSizeXxs: 16px; --fontSizeXs: 16px; --fontSizeSm: 16px; --fontSizeMd: 16px; --fontSizeLg: 16px; --textColor: #222222; --backgroundColor: none; color: var(--textColor); background-color: var(--backgroundColor); background-clip: content-box; margin: 0 0 11px 0; } @media (max-width: 479px) { .blockEditContent p { font-size: var(--fontSizeXxs); } } @media (min-width: 480px) and (max-width: 767px) { .blockEditContent p { font-size: var(--fontSizeXs); } } @media (min-width: 768px) and (max-width: 991px) { .blockEditContent p { font-size: var(--fontSizeSm); } } @media (min-width: 992px) and (max-width: 1199px) { .blockEditContent p { font-size: var(--fontSizeMd); } } @media (min-width: 1200px) { .blockEditContent p { font-size: var(--fontSizeLg); } } .blockEditContent p.textAlignLeft { text-align: left; } .blockEditContent p.textAlignCenter { text-align: center; } .blockEditContent p.textAlignRight { text-align: right; } .blockEditContent img { max-width: 100%; height: auto; } .blockEditContent img.floatLeft { float: left; } .blockEditContent img.floatRight { float: right; } .blockEditContent img.centerImage { margin: 0 auto; display: block; } .blockEditContent h2, .blockEditContent h3, .blockEditContent h4, .blockEditContent h5, .blockEditContent h6 { font-weight: 600; line-height: 1.1; } .blockEditContent h2.textAlignLeft, .blockEditContent h3.textAlignLeft, .blockEditContent h4.textAlignLeft, .blockEditContent h5.textAlignLeft, .blockEditContent h6.textAlignLeft { text-align: left; } .blockEditContent h2.textAlignCenter, .blockEditContent h3.textAlignCenter, .blockEditContent h4.textAlignCenter, .blockEditContent h5.textAlignCenter, .blockEditContent h6.textAlignCenter { text-align: center; } .blockEditContent h2.textAlignRight, .blockEditContent h3.textAlignRight, .blockEditContent h4.textAlignRight, .blockEditContent h5.textAlignRight, .blockEditContent h6.textAlignRight { text-align: right; } .blockEditContent h2.fontWeightNormal, .blockEditContent h3.fontWeightNormal, .blockEditContent h4.fontWeightNormal, .blockEditContent h5.fontWeightNormal, .blockEditContent h6.fontWeightNormal { font-weight: 400; } .blockEditContent h2.fontWeightLight, .blockEditContent h3.fontWeightLight, .blockEditContent h4.fontWeightLight, .blockEditContent h5.fontWeightLight, .blockEditContent h6.fontWeightLight { font-weight: 200; } .blockEditContent h2 { font-size: 26px; margin-top: 22px; margin-bottom: 11px; } .blockEditContent h3 { font-size: 22px; margin-top: 22px; margin-bottom: 11px; } .blockEditContent h4, .blockEditContent h5, .blockEditContent h6 { font-size: 16px; margin-top: 11px; margin-bottom: 11px; } .blockEditContent table { width: 100%; max-width: 100%; margin-bottom: 22px; background-color: transparent; } .blockEditContent table th, .blockEditContent table td { padding: 8px; border-top: 1px solid #DDDDDD; } .blockEditContent table th { text-align: left; } .blockEditContent ul, .blockEditContent ol { margin-top: 0; margin-bottom: 11px; } .blockEditContent hr { margin-top: 22px; margin-bottom: 22px; border: 0; border-top: 1px solid #EEEEEE; } .blockEditContent iframe { display: block; } @media (max-width: 767px) { .blockEditContent.teaser a, .blockEditContent.teaser img { float: none; display: block; max-width: 100%; } } .blockEditContent.teaser a.floatLeft, .blockEditContent.teaser img.floatLeft { padding-right: 15px; } .blockEditContent.teaser a.floatRight, .blockEditContent.teaser img.floatRight { padding-left: 15px; } @media (max-width: 767px) { .blockEditContent.teaser a.floatRight, .blockEditContent.teaser img.floatRight, .blockEditContent.teaser a.floatRight img, .blockEditContent.teaser img.floatRight img { margin-left: auto; } } .blockEditContent.teaser a.centerImage, .blockEditContent.teaser img.centerImage { margin: 0 auto; display: block; } .blockEditContent [data-structured-data-type="FAQ"][data-faq-style="collapse"] { border-top: 1px solid #DFDFDF; border-bottom: 1px solid #DFDFDF; margin-bottom: 0px; padding-left: 15px; border-top: none; } .blockEditContent [data-structured-data-type="FAQ"][data-faq-style="collapse"] .question { font-size: 16px; cursor: pointer; padding: 14px; padding-left: 0; margin: 0; } .blockEditContent [data-structured-data-type="FAQ"][data-faq-style="collapse"] .question::after { content: "\f078"; float: right; font-size: 13px; line-height: 16px; } .blockEditContent [data-structured-data-type="FAQ"][data-faq-style="collapse"] .answer { display: none; border: none; padding-top: 0 !important; padding-left: 10px; } .blockEditContent [data-structured-data-type="FAQ"][data-faq-style="collapse"].open .question::after { content: "\f077"; } .blockEditContent [data-structured-data-type="FAQ"][data-faq-style="collapse"].open .answer { display: block; } .blockEditContent .colorWrapper { padding: 15px; } .blockEditContent .colorWrapper.edge { position: relative; width: 100vw; height: auto; left: 50%; transform: translateX(-50%); padding: 0; max-width: none; } .blockEditContent .imageWrapper { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; position: relative; } .blockEditContent .imageSticker { display: inline-block; position: absolute; padding-left: 5px; padding-right: 5px; pointer-events: none; background-color: #000000; color: #ffffff; opacity: 0.8; } @media (max-width: 767px) { .blockEditContent .imageSticker { font-size: 85% !important; } } a.formControl, button.formControl { display: inline-block; text-align: center; border-style: solid; border-width: 1px; white-space: nowrap; touch-action: manipulation; cursor: pointer; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } a.formControl:active, button.formControl:active { -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); } a.formControl:hover, button.formControl:hover, a.formControl:focus, button.formControl:focus { text-decoration: none; } a.formControl.uppercase, button.formControl.uppercase { text-transform: uppercase; } a.formControl[disabled], button.formControl[disabled] { cursor: not-allowed; } a.formControl.block, button.formControl.block { width: 100%; display: block; } a.formControl.small, button.formControl.small { font-size: 14px; padding: 1px 5px; line-height: 1.5; /*border-radius: @border-radius;*/ } a.formControl.medium, button.formControl.medium, a.formControl, button.formControl { font-size: 16px; padding: 6px 12px; line-height: 1.42857143; /*border-radius: @border-radius;*/ } a.formControl.large, button.formControl.large { font-size: 18px; padding: 14px 20px; line-height: 1.3333333; /*border-radius: @border-radius;*/ } @media (max-width: 991px) { a.formControl.large, button.formControl.large { font-size: 16px; padding: 14px 12px; line-height: 1.3333333; /*border-radius: @border-radius;*/ } } a.formControl.white, button.formControl.white { color: #000; border-color: #000; background-color: white; } a.formControl.white::after, button.formControl.white::after { color: #000; } a.formControl.white:focus, button.formControl.white:focus { color: #000; border-color: #000000; background-color: #e6e6e6; } a.formControl.white:hover, button.formControl.white:hover { color: #000; border-color: #000000; background-color: #e6e6e6; } a.formControl.white:active, button.formControl.white:active { color: #000; border-color: #000000; background-color: #e6e6e6; } a.formControl.white:active:hover, button.formControl.white:active:hover, a.formControl.white:active:focus, button.formControl.white:active:focus, a.formControl.white:active.focus, button.formControl.white:active.focus { color: #000; border-color: #000000; background-color: #d4d4d4; } a.formControl.white[disabled]:hover, button.formControl.white[disabled]:hover, a.formControl.white[disabled]:focus, button.formControl.white[disabled]:focus, a.formControl.white[disabled].focus, button.formControl.white[disabled].focus { border-color: #000; background-color: white; } a.formControl.green, button.formControl.green { color: white; border-color: #76AA34; background-color: #84BE3A; } a.formControl.green::after, button.formControl.green::after { color: white; } a.formControl.green:focus, button.formControl.green:focus { color: white; border-color: #324816; background-color: #69972e; } a.formControl.green:hover, button.formControl.green:hover { color: white; border-color: #557b26; background-color: #69972e; } a.formControl.green:active, button.formControl.green:active { color: white; border-color: #557b26; background-color: #69972e; } a.formControl.green:active:hover, button.formControl.green:active:hover, a.formControl.green:active:focus, button.formControl.green:active:focus, a.formControl.green:active.focus, button.formControl.green:active.focus { color: white; border-color: #324816; background-color: #567c26; } a.formControl.green[disabled]:hover, button.formControl.green[disabled]:hover, a.formControl.green[disabled]:focus, button.formControl.green[disabled]:focus, a.formControl.green[disabled].focus, button.formControl.green[disabled].focus { border-color: #76AA34; background-color: #84BE3A; } a.formControl.green[disabled], button.formControl.green[disabled] { color: #707070; border-color: #707070; } a.formControl.red, button.formControl.red { color: white; border-color: #D43F3A; background-color: #D9534F; } a.formControl.red::after, button.formControl.red::after { color: white; } a.formControl.red:focus, button.formControl.red:focus { color: white; border-color: #751c1a; background-color: #c9302c; } a.formControl.red:hover, button.formControl.red:hover { color: white; border-color: #ab2a25; background-color: #c9302c; } a.formControl.red:active, button.formControl.red:active { color: white; border-color: #ab2a25; background-color: #c9302c; } a.formControl.red:active:hover, button.formControl.red:active:hover, a.formControl.red:active:focus, button.formControl.red:active:focus, a.formControl.red:active.focus, button.formControl.red:active.focus { color: white; border-color: #751c1a; background-color: #ac2925; } a.formControl.red[disabled]:hover, button.formControl.red[disabled]:hover, a.formControl.red[disabled]:focus, button.formControl.red[disabled]:focus, a.formControl.red[disabled].focus, button.formControl.red[disabled].focus { border-color: #D43F3A; background-color: #D9534F; } a.formControl.whiteGreen, button.formControl.whiteGreen { color: #222222; border-color: #222222; background-color: white; } a.formControl.whiteGreen::after, button.formControl.whiteGreen::after { color: #222222; } a.formControl.whiteGreen:not([disabled]):hover, button.formControl.whiteGreen:not([disabled]):hover, a.formControl.whiteGreen:not([disabled]):focus, button.formControl.whiteGreen:not([disabled]):focus { color: white; background-color: #84BE3A; border-color: #84BE3A; } a.formControl.whiteGreen:not([disabled]):hover:active, button.formControl.whiteGreen:not([disabled]):hover:active, a.formControl.whiteGreen:not([disabled]):focus:active, button.formControl.whiteGreen:not([disabled]):focus:active { background-color: #69972e; border-color: #638f2c; } a.formControl.whiteGreen[disabled], button.formControl.whiteGreen[disabled] { color: #707070; border-color: #707070; } a.formControl.whiteBlack, button.formControl.whiteBlack { color: #222222; border-color: #222222; background-color: white; } a.formControl.whiteBlack::after, button.formControl.whiteBlack::after { color: #222222; } a.formControl.whiteBlack:not([disabled]):hover, button.formControl.whiteBlack:not([disabled]):hover, a.formControl.whiteBlack:not([disabled]):focus, button.formControl.whiteBlack:not([disabled]):focus, a.formControl.whiteBlack:not([disabled]):active, button.formControl.whiteBlack:not([disabled]):active { color: white; background-color: #222222; } a.formControl.blackWhite, button.formControl.blackWhite { color: #FFF; border-color: #000; background-color: #000; /*&:not([disabled]) { &:hover, &:focus, &:active { color: #000; background-color: #FFF; } }*/ } a.formControl.blackWhite::after, button.formControl.blackWhite::after { color: #FFF; } a.formControl.blackWhite:disabled, button.formControl.blackWhite:disabled { background-color: #B0B0B0; border-color: #B0B0B0; } a.formControl.blue, button.formControl.blue { color: white; border-color: #009BD6; background-color: #00ADEF; } a.formControl.blue::after, button.formControl.blue::after { color: white; } a.formControl.blue:focus, button.formControl.blue:focus { color: white; border-color: #003f57; background-color: #0088bc; } a.formControl.blue:hover, button.formControl.blue:hover { color: white; border-color: #006f99; background-color: #0088bc; } a.formControl.blue:active, button.formControl.blue:active { color: white; border-color: #006f99; background-color: #0088bc; } a.formControl.blue:active:hover, button.formControl.blue:active:hover, a.formControl.blue:active:focus, button.formControl.blue:active:focus, a.formControl.blue:active.focus, button.formControl.blue:active.focus { color: white; border-color: #003f57; background-color: #006e98; } a.formControl.blue[disabled]:hover, button.formControl.blue[disabled]:hover, a.formControl.blue[disabled]:focus, button.formControl.blue[disabled]:focus, a.formControl.blue[disabled].focus, button.formControl.blue[disabled].focus { border-color: #009BD6; background-color: #00ADEF; } a.formControl.lightBlue, button.formControl.lightBlue { color: black; border-color: #AFDADC; background-color: #AFDADC; } a.formControl.lightBlue::after, button.formControl.lightBlue::after { color: black; } a.formControl.lightBlue:focus, button.formControl.lightBlue:focus { color: black; border-color: #56b1b5; background-color: #8ccacc; } a.formControl.lightBlue:hover, button.formControl.lightBlue:hover { color: black; border-color: #84c6c9; background-color: #8ccacc; } a.formControl.lightBlue:active, button.formControl.lightBlue:active { color: black; border-color: #84c6c9; background-color: #8ccacc; } a.formControl.lightBlue:active:hover, button.formControl.lightBlue:active:hover, a.formControl.lightBlue:active:focus, button.formControl.lightBlue:active:focus, a.formControl.lightBlue:active.focus, button.formControl.lightBlue:active.focus { color: black; border-color: #56b1b5; background-color: #73bec2; } a.formControl.lightBlue[disabled]:hover, button.formControl.lightBlue[disabled]:hover, a.formControl.lightBlue[disabled]:focus, button.formControl.lightBlue[disabled]:focus, a.formControl.lightBlue[disabled].focus, button.formControl.lightBlue[disabled].focus { border-color: #AFDADC; background-color: #AFDADC; } a.formControl.whiteLightBlue, button.formControl.whiteLightBlue { color: black; border-color: #AFDADC; background-color: #FFF; } a.formControl.whiteLightBlue::after, button.formControl.whiteLightBlue::after { color: black; } a.formControl.whiteLightBlue:focus, button.formControl.whiteLightBlue:focus { color: black; border-color: #56b1b5; background-color: #e6e6e6; } a.formControl.whiteLightBlue:hover, button.formControl.whiteLightBlue:hover { color: black; border-color: #84c6c9; background-color: #e6e6e6; } a.formControl.whiteLightBlue:active, button.formControl.whiteLightBlue:active { color: black; border-color: #84c6c9; background-color: #e6e6e6; } a.formControl.whiteLightBlue:active:hover, button.formControl.whiteLightBlue:active:hover, a.formControl.whiteLightBlue:active:focus, button.formControl.whiteLightBlue:active:focus, a.formControl.whiteLightBlue:active.focus, button.formControl.whiteLightBlue:active.focus { color: black; border-color: #56b1b5; background-color: #d4d4d4; } a.formControl.whiteLightBlue[disabled]:hover, button.formControl.whiteLightBlue[disabled]:hover, a.formControl.whiteLightBlue[disabled]:focus, button.formControl.whiteLightBlue[disabled]:focus, a.formControl.whiteLightBlue[disabled].focus, button.formControl.whiteLightBlue[disabled].focus { border-color: #AFDADC; background-color: #FFF; } a.formControl.mitID, button.formControl.mitID { color: #FFFFFF; background-color: #0060E6; border-radius: 0px; border: unset; padding: 0px; } a.formControl.mitID div.mitIDWrapper, button.formControl.mitID div.mitIDWrapper { display: flex; height: 48px; line-height: 48px; justify-content: center; align-items: center; } a.formControl.mitID div.mitIDWrapper img.mitIDLogo, button.formControl.mitID div.mitIDWrapper img.mitIDLogo { height: 14px; margin-right: 16px; margin-left: 24px; } a.formControl.mitID div.mitIDWrapper span.mitIDButtonText, button.formControl.mitID div.mitIDWrapper span.mitIDButtonText { margin-right: 24px; font-family: "IBM Plex Sans"; font-size: 14px; font-weight: 600; letter-spacing: 0.8px; } select.formControl, textarea.formControl, input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]).formControl { display: block; margin: 0; padding: 0; border: 1px solid #DFDFDF; background-color: white; background-image: none; color: #222222; -webkit-appearance: none; -moz-appearance: none; appearance: none; } select.formControl[disabled], textarea.formControl[disabled], input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]).formControl[disabled] { font-style: italic; color: #888888; } select.formControl:focus, textarea.formControl:focus, input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]).formControl:focus { border-color: #000; } select.formControl.error, textarea.formControl.error, input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]).formControl.error, select.formControl:not(:focus):not(:placeholder-shown):invalid, textarea.formControl:not(:focus):not(:placeholder-shown):invalid, input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]).formControl:not(:focus):not(:placeholder-shown):invalid { border-color: red; } textarea.formControl::-moz-placeholder, input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]).formControl::-moz-placeholder { color: #888888; opacity: 1; } textarea.formControl:-ms-input-placeholder, input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]).formControl:-ms-input-placeholder { color: #888888; } textarea.formControl::-webkit-input-placeholder, input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]).formControl::-webkit-input-placeholder { color: #888888; } select.formControl, input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]).formControl { width: 100%; height: 36px; font-size: 16px; padding: 0 12px; } select.formControl.large, input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]).formControl.large { height: 54px; font-size: 18px; padding: 0 20px; } select.formControl { background-image: url('/img/vector/select-arrows.svg'); background-repeat: no-repeat; background-position: right 10px center; background-size: 13px; padding-right: 30px; } select.formControl.large { background-size: 15px; padding-right: 35px; } textarea.formControl { padding: 6px 12px; } textarea.formControl:not([cols]) { width: 100%; } .noScroll { overflow: hidden; position: fixed; top: 0; left: 0; right: 0; } .loadingContent { text-align: center; padding: 30px 0; width: 100%; } @-webkit-keyframes animRotate { 0% { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } @-moz-keyframes animRotate { 0% { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } @-o-keyframes animRotate { 0% { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes animRotate { 0% { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } .loadingContent .icon { display: inline-block; margin: auto; font-size: 70px; color: #000000; text-align: center; -webkit-animation: animRotate 1.5s infinite linear; -moz-animation: animRotate 1.5s infinite linear; -o-animation: animRotate 1.5s infinite linear; animation: animRotate 1.5s infinite linear; } .loadingContent .icon:before { content: "\e8da"; } .widgetWrapper .widgetContentContainer { margin: 0 20px 95px 0; position: fixed; bottom: -40px; right: 0px; width: 370px; height: 570px; overflow: hidden; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3); /*border-radius: 10px;*/ background-color: #fff; z-index: 2000; opacity: 0; transition: bottom 0.15s ease-in, opacity 0.2s ease-in; } .widgetWrapper .widgetContentContainer.open { bottom: 0px; opacity: 1; transition: bottom 0.15s ease-in, opacity 0.2s ease-in; } @media (max-width: 767px) { .widgetWrapper .widgetContentContainer.open { bottom: 0; right: 0; z-index: 3000; transition: all 0.25s ease-in; } } @media (max-width: 767px) { .widgetWrapper .widgetContentContainer { margin: 0; /*border-radius: unset;*/ bottom: -570px; right: -370px; width: 100%; height: 100%; z-index: 3000; transition: all 0.25s ease-in; } } .widgetWrapper .widgetContentContainer .widgetSearch { background-color: #000000; position: absolute; top: 0; width: 100%; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3); height: 75px; line-height: 75px; display: table; z-index: 1; } .widgetWrapper .widgetContentContainer .widgetSearch .contactText { color: #fff; margin-left: 5%; font-size: large; line-height: 1; } .widgetWrapper .widgetContentContainer .widgetSearch .search { padding: 0 5% 0 5%; display: inline-table; line-height: calc(75px/2); width: 100%; position: relative; } .widgetWrapper .widgetContentContainer .widgetSearch .search input { padding: 2px 15px; border-radius: 0; /*border-top-left-radius: 6px; border-bottom-left-radius: 6px;*/ border: none; border-right: 1px solid #DFDFDF; width: 100%; } .widgetWrapper .widgetContentContainer .widgetSearch .search .searchBtn { padding: 2px 15px; /*border-top-right-radius: 6px; border-bottom-right-radius: 6px;*/ background-color: #fff; border: none; width: 10%; display: table-cell; text-align: center; cursor: pointer; } .widgetWrapper .widgetContentContainer .widgetSearch .search .searchSuggestions { position: absolute; left: 5%; top: 105%; right: 5%; z-index: 1; /*border-radius: 6px;*/ background-color: #fff; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3); } .widgetWrapper .widgetContentContainer .widgetSearch .search .searchSuggestions .contentBlocks { padding: 0; margin: 0; } .widgetWrapper .widgetContentContainer .widgetSearch .search .searchSuggestions .contentBlocks .contentBlock { display: block; padding: 6px 8px; width: 100%; font-size: medium; line-height: normal; cursor: pointer; /*&:first-child { border-top-right-radius: 6px; border-top-left-radius: 6px; } &:last-child { border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; }*/ } .widgetWrapper .widgetContentContainer .widgetSearch .search .searchSuggestions .contentBlocks .contentBlock:hover { background-color: #f4f7f9; } .widgetWrapper .widgetContentContainer .widgetSearch .widgetBtn { display: table-cell; width: 10%; vertical-align: middle; color: #fff; text-align: center; } .widgetWrapper .widgetContentContainer .widgetSearch .widgetBtn.left { padding-left: 5%; } .widgetWrapper .widgetContentContainer .widgetSearch .widgetBtn.right { padding-right: 5%; } .widgetWrapper .widgetContentContainer .widgetSearch .widgetBtn span { cursor: pointer; display: block; } .widgetWrapper .widgetContentContainer #tabFaq, .widgetWrapper .widgetContentContainer #tabContact { display: none; } .widgetWrapper .widgetContentContainer #tabFaq:checked ~ .widgetContent .tabFaq, .widgetWrapper .widgetContentContainer #tabContact:checked ~ .widgetContent .tabContact { display: block; } .widgetWrapper .widgetContentContainer #tabFaq:checked ~ .widgetMenu ul .tabFaq, .widgetWrapper .widgetContentContainer #tabContact:checked ~ .widgetMenu ul .tabContact { border-color: #000000; } .widgetWrapper .widgetContentContainer .widgetContent { position: absolute; bottom: 60px; top: 75px; width: 100%; overflow: hidden; } .widgetWrapper .widgetContentContainer .widgetContent .widgetBreadcrumbs { padding-bottom: 10px; font-size: 14px; } .widgetWrapper .widgetContentContainer .widgetContent .widgetBreadcrumbs ol { margin: 0; padding: 0; } .widgetWrapper .widgetContentContainer .widgetContent .widgetBreadcrumbs ol li { list-style: none; display: inline-block; } .widgetWrapper .widgetContentContainer .widgetContent .widgetBreadcrumbs ol li a { cursor: pointer; color: #78787A; } .widgetWrapper .widgetContentContainer .widgetContent .widgetBreadcrumbs ol li span { padding-left: 5px; padding-right: 5px; } .widgetWrapper .widgetContentContainer .widgetContent .tabFaq { display: none; overflow-y: auto; max-height: 100%; height: 100%; padding: 10px; font-size: 15px; } .widgetWrapper .widgetContentContainer .widgetContent .tabFaq h1 { font-size: 20px; margin-bottom: 20px; } .widgetWrapper .widgetContentContainer .widgetContent .tabFaq .searchText { padding-bottom: 15px; } .widgetWrapper .widgetContentContainer .widgetContent .tabFaq .rootCategory { display: inline-table; padding: 10px; text-align: center; width: 50%; height: 33%; } .widgetWrapper .widgetContentContainer .widgetContent .tabFaq .rootCategory .cellWrapper { width: 100%; height: 100%; display: table-cell; vertical-align: middle; text-align: center; } .widgetWrapper .widgetContentContainer .widgetContent .tabFaq .rootCategory .cellWrapper .icon-wrapper { cursor: pointer; width: 69px; height: 69px; margin-bottom: 5px; display: inline-table; border-radius: 50%; background-color: #000000; } .widgetWrapper .widgetContentContainer .widgetContent .tabFaq .rootCategory .cellWrapper .icon-wrapper div { display: table-cell; vertical-align: middle; } .widgetWrapper .widgetContentContainer .widgetContent .tabFaq .rootCategory .cellWrapper .icon-wrapper div img { height: 40px; width: 40px; } .widgetWrapper .widgetContentContainer .widgetContent .tabFaq .rootCategory .cellWrapper .categoryLabel { cursor: pointer; overflow: hidden; } @media (max-width: 767px) { .widgetWrapper .widgetContentContainer .widgetContent .tabFaq .rootCategory .cellWrapper .categoryLabel { height: 38px; } } .widgetWrapper .widgetContentContainer .widgetContent .tabFaq .contentBlocks { padding: 0; margin: 0; } .widgetWrapper .widgetContentContainer .widgetContent .tabFaq .contentBlocks .contentBlock { display: block; padding: 6px 8px; width: 100%; font-size: large; border: 1px solid #DFDFDF; cursor: pointer; margin-bottom: -1px; /*&:first-child { border-top-right-radius: 6px; border-top-left-radius: 6px; } &:last-child { border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; }*/ } .widgetWrapper .widgetContentContainer .widgetContent .tabFaq .contentBlocks .contentBlock h5, .widgetWrapper .widgetContentContainer .widgetContent .tabFaq .contentBlocks .contentBlock p { margin: 0; margin-bottom: 10px; } .widgetWrapper .widgetContentContainer .widgetContent .tabFaq .contentBlocks .contentBlock h5 { font-size: 18px; font-weight: 500; } .widgetWrapper .widgetContentContainer .widgetContent .tabFaq .contentBlocks .contentBlock p { color: #78787A; font-size: 15px; } .widgetWrapper .widgetContentContainer .widgetContent .tabFaq .contentBlocks .contentBlock small { color: #78787A; } .widgetWrapper .widgetContentContainer .widgetContent .tabFaq .contentBlocks .contentBlock:hover { background-color: #f4f7f9; } .widgetWrapper .widgetContentContainer .widgetContent .tabFaq .row { margin: 0; } .widgetWrapper .widgetContentContainer .widgetContent .tabContact { -webkit-overflow-scrolling: touch; overflow-y: scroll; display: none; height: 100%; } .widgetWrapper .widgetContentContainer .widgetContent .tabContact p { padding: 10px; } .widgetWrapper .widgetContentContainer .widgetContent .tabContact iframe { width: 100%; height: 100%; border: none; } .widgetWrapper .widgetContentContainer .widgetContent .tabContact .messageSentBox { margin-top: 25px; font-size: large; text-align: center; } .widgetWrapper .widgetContentContainer .widgetContent .tabContact form.contactUs { padding: 10px; height: 100%; display: flex; flex-direction: column; justify-content: space-between; } .widgetWrapper .widgetContentContainer .widgetContent .tabContact form.contactUs .contactInputs, .widgetWrapper .widgetContentContainer .widgetContent .tabContact form.contactUs .message { flex: 1; display: flex; flex-direction: column; } .widgetWrapper .widgetContentContainer .widgetContent .tabContact form.contactUs textarea { flex: 1; resize: none; } .widgetWrapper .widgetContentContainer .widgetMenu { position: absolute; bottom: 0; width: 100%; height: 60px; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3); border-top: 1px solid #eee; } .widgetWrapper .widgetContentContainer .widgetMenu ul { white-space: nowrap; margin: 0; padding: 0; list-style: none; } .widgetWrapper .widgetContentContainer .widgetMenu ul li { border-top: 3px solid transparent; display: inline-block; top: 0px; width: 50%; line-height: 60px; text-align: center; } .widgetWrapper .widgetContentContainer .widgetMenu ul li label { margin-top: -3px; cursor: pointer; display: block; } .widgetWrapper .widgetContentContainer .widgetMenu ul li label:hover { background-color: #000000; color: #fff; } .widgetBtnMain { position: fixed; bottom: 20px; right: 20px; display: block; cursor: pointer; border: none; border-radius: 50%; width: 55px; height: 55px; padding: 0; color: #fff; background-color: #000000; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3); z-index: 2500; font-weight: bold; line-height: 1px; } .widgetBtnMain .icon { font-size: 30px; } /*#bubble-position { position: fixed; bottom: 25px; right: 90px; z-index: 2500; animation: bubble-position 0.5s 1; -webkit-animation: bubble-position 0.5s 1; animation-fill-mode: forwards; animation-delay: 5s; -webkit-animation-delay: 5s;*/ /* Safari and Chrome */ /* -webkit-animation-fill-mode: forwards; } @keyframes bubble-position { from {opacity :1;} to {opacity :0;} } @-webkit-keyframes bubble-position { from {opacity :1;} to {opacity :0;} }*/ /*.bubble { position: relative; background: rgb(34, 34, 34); color: rgb(255, 255, 255); font-family: "Trebuchet MS"; font-size: 16px; line-height: 40px; box-shadow: rgba(0, 0, 0, 0.3) 5px 5px 10px 0px; text-align: center; width: 165px; height: 40px; border-radius: 0px; padding: 0px; } .bubble::after { content: ""; position: absolute; display: block; width: 0px; z-index: 1; border-style: solid; border-width: 15px 0px 0px 20px; border-color: transparent transparent transparent rgb(34, 34, 34); top: 50%; right: -10px; margin-top: -10px; }*/ /* body .sideMenu { .mdUp({ display: none; }); } */ html.sideMenu { overflow-x: hidden; overflow-y: hidden; } html.sideMenu body { position: absolute; width: 100%; -webkit-box-shadow: 0 0 7px 5px rgba(0, 0, 0, 0.15); box-shadow: 0 0 7px 5px rgba(0, 0, 0, 0.15); transition: left 200ms ease, right 200ms ease; } html.sideMenu body.left { left: 0; transition: left 200ms ease; } html.sideMenu body.right { right: 0; transition: right 200ms ease; } html.sideMenu body > .sideMenuOverlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.25); z-index: 1030; } html.sideMenu body .sideMenu.open { display: block !important; position: fixed; top: 0; z-index: -1; height: 100%; width: 280px; overflow-x: hidden; overflow-y: auto; background-color: white; transition: left 200ms ease, right 200ms ease; } html.sideMenu body .sideMenu.open.left { left: -280px; right: auto; } html.sideMenu body .sideMenu.open.right { left: auto; right: -280px; } html.sideMenu body.sideMenuOpen.left { left: 280px; } html.sideMenu body.sideMenuOpen.right { right: 280px; } html.sideMenu body.sideMenuOpen .sideMenu.left { left: 0; } html.sideMenu body.sideMenuOpen .sideMenu.right { right: 0; } .slideMenu { overflow: hidden; } .slideMenu:not(.noAnimation) { -webkit-transition: height 0.3s ease; -o-transition: height 0.3s ease; transition: height 0.3s ease; } .slideMenu:not(.noAnimation) > ul, .slideMenu:not(.noAnimation) > .content { -webkit-transition: -webkit-transform 0.3s ease; -moz-transition: -moz-transform 0.3s ease; -o-transition: -o-transform 0.3s ease; transition: transform 0.3s ease; } .slideMenu > ul, .slideMenu > .content { position: relative; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); } .slideMenu ul, .slideMenu .content { padding: 0; margin: 0; width: 100%; list-style: none; } .slideMenu ul:not(.expanded), .slideMenu .content:not(.expanded) { display: none; } .slideMenu li ul { position: absolute; top: 0; left: 100%; } .slideMenu a { display: block; color: inherit; text-decoration: none; } .slideMenu a:not(.back):not(.title) { padding: 10px 15px; } .slideMenu a:not(.back):not(.title):hover { background-color: rgba(0, 0, 0, 0.1); } .slideMenu .header { position: relative; padding: 10px 15px; border-bottom: 1px solid #DFDFDF; } .slideMenu .header .title { margin: 0; padding: 0; font-size: 18px; font-weight: 600; text-align: center; line-height: 19px; } .slideMenu .header.sub { border-bottom: 1px solid black; } .slideMenu .header.sub .title { text-align: unset; font-weight: unset; } .slideMenu a.back { /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'icomoon' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 20px; position: absolute; top: 50%; left: 15px; margin-top: -10px; } .slideMenu a.back::before { content: "\e104"; margin-right: 1em; float: left; } .slideMenu .next::after { content: '+'; margin-left: 1em; float: right; } .slideMenu address { padding: 10px 15px; } .mobileMenuContainer { overflow-x: hidden; overflow-y: scroll; position: fixed; } .mobileMenuContainer .links ul { margin: 0; padding: 8px 15px; background-color: #F9F9F9; list-style: none; } .mobileMenuContainer .links ul a { font-size: 14px; color: #222222; } .mobileMenuContainer .customLinks { border-top: 1px solid #DFDFDF; } .mobileMenuContainer .customLinks .beautyButton { background-color: #222; } .productGrid div.banner > .inner { position: relative; } .productGrid div.banner > .inner div.image { display: flex; justify-content: center; align-items: center; overflow: hidden; aspect-ratio: 1/1; } .productGrid div.banner > .inner div.image img { max-width: none; height: 100%; width: auto; } .productGrid div.banner > .inner a.wrapperLink { position: absolute; right: 0; left: 0; top: 0; bottom: 0; } .productGrid div.banner > .inner div.buttons { margin-top: 0px; height: 36px; } .productGrid div.banner > .inner div.buttons a { border-style: none; height: 36px; padding-top: 0; } .productGrid div.productThumb.hovering .scaleImage { transition: transform 0.5s ease-in-out; } .productGrid div.productThumb.hovering span.badge { z-index: 1; } .productGrid div.productThumb.hovering div.image { overflow: hidden; } .productGrid div.productThumb.hovering:hover .scaleImage { transition: transform 0.5s ease-in-out; transform: scale(1.15); } .productGrid div.productThumb.hovering:hover span.badge { opacity: 0; } .productGrid div.productThumb a { text-decoration: none; } .productGrid div.productThumb a:hover { text-decoration: none; } .productGrid div.productThumb > .inner { margin-bottom: 60px; max-width: 200px; margin-left: auto; margin-right: auto; } @media (min-width: 992px) and (max-width: 1199px) { .productGrid div.productThumb > .inner { margin-bottom: 54px; } } @media (min-width: 768px) and (max-width: 991px) { .productGrid div.productThumb > .inner { margin-bottom: 48px; } } @media (max-width: 767px) { .productGrid div.productThumb > .inner { margin-bottom: 36px; } } .productGrid div.productThumb > .inner.small { margin-bottom: 30px; } .productGrid div.productThumb > .inner.small img { max-width: 60px !important; } .productGrid div.productThumb > .inner.small .badge, .productGrid div.productThumb > .inner.small .ratingContainer, .productGrid div.productThumb > .inner.small .discountPercent { display: none; } .productGrid div.productThumb > .inner.small .title, .productGrid div.productThumb > .inner.small .prices { font-size: 14px; } .productGrid div.productThumb > .inner.small .buttons a, .productGrid div.productThumb > .inner.small .buttons button { font-size: 14px; } .productGrid div.productThumb > .inner.small .prices > * { min-height: 22px; line-height: 22px; } .productGrid div.productThumb > .inner.small .title { height: 48px; } .productGrid div.productThumb .image { position: relative; text-align: center; } .productGrid div.productThumb .image .badge { position: absolute; top: 0; right: 0; width: 100%; height: 100%; } .productGrid div.productThumb .image .badge.membershipDiscount { height: 84px; width: 84px; /* .inner { height: inherit; width: inherit; border: 3px solid #EEE452; border-radius: 100%; background-color: #FFED76; display: table-cell; vertical-align: middle; .textWrapper { .percent, .text { font-weight: 700; line-height: 1.1; color: #222222; display: block; } .percent { font-size: 32px; .xsDown({font-size: 26px;}); } .text { font-size: 10px; } } } */ } @media (max-width: 991px) { .productGrid div.productThumb .image .badge.membershipDiscount { height: 70px; width: 70px; } } .productGrid div.productThumb .image .badge img { position: absolute; right: 0px; top: 0px; max-width: 85px; } @media (max-width: 991px) { .productGrid div.productThumb .image .badge img { max-width: 70px; } } .productGrid div.productThumb .image .badge img[alt="Julen 2019"], .productGrid div.productThumb .image .badge img[alt="Julen 2020"], .productGrid div.productThumb .image .badge img[alt="Julen 2021"], .productGrid div.productThumb .image .badge img[alt="Gavekort - Julegran"] { top: auto; bottom: 0px; max-width: 85%; left: 50%; transform: translateX(-50%); } .productGrid div.productThumb .image .badge.left { left: 0; right: unset; } .productGrid div.productThumb .image .badge.left img { left: 0; right: unset; max-width: 65px; } @media (max-width: 991px) { .productGrid div.productThumb .image .badge.left img { max-width: 55px; } } .productGrid div.productThumb .image .badge .imageWrapper { position: absolute; top: 0px; right: 0px; max-width: 100%; } .productGrid div.productThumb .image .badge .imageWrapper img { position: static; width: 85px; height: 85px; } @media (max-width: 991px) { .productGrid div.productThumb .image .badge .imageWrapper img { height: 70px; width: 70px; } } .productGrid div.productThumb .image .badge .imageWrapper .textWrapper { line-height: 1; position: absolute; right: 0; top: 48%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); color: #000; width: 100%; } .productGrid div.productThumb .image .badge .imageWrapper .textWrapper.new { top: 44%; } .productGrid div.productThumb .image .badge .imageWrapper .textWrapper .percent { font-size: 32px; font-weight: bold; line-height: 1; } @media (max-width: 991px) { .productGrid div.productThumb .image .badge .imageWrapper .textWrapper .percent { font-size: 26px; } } .productGrid div.productThumb .image .badge .imageWrapper .textWrapper .text { font-size: 18px; font-weight: normal; max-width: 60px; margin: auto; } .productGrid div.productThumb .image .badge .imageWrapper .textWrapper .text.new { font-size: 16px; font-weight: bold; } @media (max-width: 991px) { .productGrid div.productThumb .image .badge .imageWrapper .textWrapper .text { font-size: 14px; } } .productGrid div.productThumb .image img { max-width: 100%; height: auto; } .productGrid div.productThumb .image span.icon.favorite { width: 20px; cursor: pointer; /*@media(hover: hover) and (pointer: fine) { &:hover { .outline{ display: none; } .filled{ display: inline-block; } } } */ } .productGrid div.productThumb .image span.icon.favorite .filled { display: none; } .productGrid div.productThumb .image span.icon.favorite.favorited .outline { display: none; } .productGrid div.productThumb .image span.icon.favorite.favorited .filled { display: inline-block; } @media (pointer: fine) { .productGrid div.productThumb .image span.icon.favorite:hover .outline { display: none; } .productGrid div.productThumb .image span.icon.favorite:hover .filled { display: inline-block; } } @media (any-pointer: coarse) { .productGrid div.productThumb .image span.icon.favorite { padding: 5px; width: 30px; } } .productGrid div.productThumb .image span.icon.favorite { position: absolute; left: 0; bottom: 0; } .productGrid div.productThumb .title { height: 60px; overflow: hidden; font-size: 18px; margin-top: 11px; margin-bottom: 11px; font-weight: 600; line-height: 1.1; text-align: center; } .productGrid div.productThumb .ratingContainer { min-height: 30px; text-align: center; margin-top: 15px; } .productGrid div.productThumb .prices { font-size: 18px; text-align: center; font-weight: 700; margin-top: 15px; max-height: 50px; } .productGrid div.productThumb .prices > * { min-height: 25px; line-height: 25px; } .productGrid div.productThumb .prices .normalPrice { text-decoration: line-through; color: #707070; } .productGrid div.productThumb .prices .memberPriceWrapper { background-color: #EAD1D3; display: flex; justify-content: center; } .productGrid div.productThumb .prices .memberPriceWrapper .memberPrice { margin-left: 2px; } @media (min-width: 992px) { .productGrid div.productThumb .prices .memberPriceWrapper .memberPrice { margin-left: 4px; } } .productGrid div.productThumb .prices .memberPriceWrapper .memberPriceText { font-size: 15px; } .productGrid div.productThumb .prices .discount { white-space: nowrap; } .productGrid div.productThumb .prices .discount .bottleDeposit { font-size: 14px; font-weight: lighter; line-height: 14px; } .productGrid div.productThumb .prices .discount .discountPercent { margin-left: 10px; padding-left: 10px; border-left: 1px solid #DFDFDF; font-weight: 400; color: #707070; } @media (max-width: 359px) { .productGrid div.productThumb .prices .discount .discountPercent { display: none; } } .productGrid div.productThumb .buttons { margin-top: 15px; height: 50px; } .productGrid div.productThumb .buttons a:hover, .productGrid div.productThumb .buttons a:active, .productGrid div.productThumb .buttons a:focus { text-decoration: none; } .productGrid div.productThumb .buttons a, .productGrid div.productThumb .buttons button { height: 50px; line-height: 1; display: flex; align-items: center; justify-content: center; } @media (max-width: 330px) { .productGrid div.productThumb .buttons a, .productGrid div.productThumb .buttons button { font-size: 14px; } } .productGrid div.productThumb .bannerTextWrapper { padding-top: 14px; padding-left: 12px; padding-right: 12px; height: 210px; } .productGrid div.productThumb .bannerTextWrapper .blockEditContent { overflow: hidden; line-height: 1; overflow-wrap: break-word; } .productSlider { overflow: hidden; position: relative; white-space: nowrap; } .productSlider .productContainer { float: left; position: relative; width: 100%; } .productSlider .productContainer.slideTransition { -webkit-transition: -webkit-transform 400ms ease; -moz-transition: -moz-transform 400ms ease; -o-transition: -o-transform 400ms ease; transition: transform 400ms ease; } .productSlider .productContainer .productThumb { position: relative; display: inline-block; float: none; white-space: normal; vertical-align: middle; } .productSlider .backSlider, .productSlider .forwardSlider { position: absolute; cursor: pointer; top: 20%; transform: translateY(-50%); z-index: 1; font-size: 70px; color: #a2a2a2; -webkit-transition: color 150ms linear; -o-transition: color 150ms linear; transition: color 150ms linear; } @media (min-width: 992px) { .productSlider .backSlider:hover, .productSlider .forwardSlider:hover { color: #000000; } } .productSlider .backSlider { left: 0; } .productSlider .forwardSlider { right: 0; } .powerstepOverlay .powerstep { position: absolute; top: 50%; left: 50%; padding: 30px 50px; background: #FFF; width: 100%; overflow-y: scroll; max-height: 100%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @media (min-width: 992px) { .powerstepOverlay .powerstep { max-width: 950px; } } @media (max-width: 767px) { .powerstepOverlay .powerstep { left: 0; right: 0; width: auto; padding: 10px 5px; -webkit-transform: translate(0%, -50%); -ms-transform: translate(0%, -50%); transform: translate(0%, -50%); } } .powerstepOverlay .powerstep .closeIcon { position: absolute; top: -4px; right: 14px; font-size: 40px; text-shadow: 0 0 3px #fff; cursor: pointer; } .powerstepOverlay .powerstep .subTitle { font-weight: normal; margin: 0; } .powerstepOverlay .powerstep .title { margin: 0; margin-bottom: 15px; } .powerstepOverlay .powerstep .title, .powerstepOverlay .powerstep .subTitle { margin-left: 5px; } .powerstepOverlay .powerstep .productGrid.productSlider { margin-left: 0; margin-right: 0; } @media (min-width: 992px) { .powerstepOverlay .powerstep .productGrid.productSlider .forwardSlider, .powerstepOverlay .powerstep .productGrid.productSlider .backSlider { display: none; } } @media (max-width: 767px) { .powerstepOverlay .powerstep .productGrid .productThumb .inner { margin-bottom: 15px; } } .powerstepOverlay .powerstep .continueShoppingWrapper { padding-right: 25px; padding-left: 0; } @media (max-width: 767px) { .powerstepOverlay .powerstep .continueShoppingWrapper { padding: 0; padding-bottom: 10px; } } .powerstepOverlay .powerstep .continueShoppingWrapper .continueShopping { width: 100%; } .powerstepOverlay .powerstep .checkoutWrapper { padding-left: 25px; padding-right: 0; } @media (max-width: 767px) { .powerstepOverlay .powerstep .checkoutWrapper { padding: 0; } } .powerstepOverlay .powerstep .checkoutWrapper .cart, .powerstepOverlay .powerstep .checkoutWrapper .checkout { width: 100%; } input[type="checkbox"].formControl, input[type="radio"].formControl { padding: 0; margin: 0; width: 0; height: 0; opacity: 0; position: absolute; } input[type="checkbox"].formControl + .checkMark, input[type="radio"].formControl + .checkMark { display: inline-block; cursor: pointer; border: 1px solid #DEDEDE; height: 17px; width: 17px; margin-right: 6px; margin-bottom: 0px; vertical-align: middle; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } input[type="checkbox"].formControl + .checkMark::after, input[type="radio"].formControl + .checkMark::after { display: block; position: absolute; } input[type="checkbox"].formControl:focus + .checkMark, input[type="radio"].formControl:focus + .checkMark { border-color: #ababab; } input[type="checkbox"].formControl.large + .checkMark, input[type="radio"].formControl.large + .checkMark { height: 26px; width: 26px; margin-right: 12px; } input[type="checkbox"].formControl.error + .checkMark, input[type="radio"].formControl.error + .checkMark { border-color: red; } input[type="radio"].formControl + .checkMark { border-radius: 100%; } input[type="radio"].formControl + .checkMark::after { border-radius: 100%; height: 9px; width: 9px; top: 3px; left: 3px; content: ''; -webkit-transition: background 0.1s linear; -o-transition: background 0.1s linear; transition: background 0.1s linear; } input[type="radio"].formControl:checked.black + .checkMark::after { background-color: #222222; } input[type="radio"].formControl:checked + .checkMark::after { background-color: #04B2EE; } input[type="radio"].formControl:checked.green + .checkMark::after { background-color: #84BE3A; } input[type="radio"].formControl:checked + .checkMark.checkmarkIcon::after { /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'icomoon' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: none; content: "\f00d"; line-height: 17px; color: #E5B8B3; position: initial; } input[type="radio"].formControl:checked + .checkMark.checkmarkIcon { background-color: #FFFFFF; border-color: #FFFFFF; } input[type="radio"].formControl.large + .checkMark::after { height: 14px; width: 14px; top: 5px; left: 5px; } input[type="radio"].formControl.large + .checkMark.checkmarkIcon::after { line-height: 26px; font-size: larger; margin-left: 3px; } input[type="checkbox"].formControl + .checkMark::after { height: 15px; width: 15px; top: 0px; left: 0px; line-height: 15px; text-align: center; font-size: 14px; color: transparent; content: "\f00d"; -webkit-transition: color 0.1s linear; -o-transition: color 0.1s linear; transition: color 0.1s linear; } input[type="checkbox"].formControl:checked.black + .checkMark::after { color: #222222; } input[type="checkbox"].formControl:checked + .checkMark::after { color: #04B2EE; } input[type="checkbox"].formControl:checked.green + .checkMark::after { color: #84BE3A; } input[type="checkbox"].formControl:checked.pink + .checkMark::after { color: #E5B8B3; } input[type="checkbox"].formControl.large + .checkMark::after { height: 24px; width: 24px; line-height: 24px; font-size: 22px; } aside .box { margin-bottom: 30px; } aside .box > .title { font-size: 18px; font-weight: 600; padding: 14px 0; margin: 0px; } aside .box > .search { margin-bottom: 10px; } aside .box > .search input[name="query"] { padding-right: 0 !important; border-top-right-radius: 0!important; border-bottom-right-radius: 0!important; } aside .box > .search input[name="query"]:focus + .input-group-btn button { border-color: #133c68; } aside .box > .search button { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; margin-left: -1px; border-color: #DFDFDF; border-left: none; height: 36px; } aside .box > .search button .icon-search { color: #8D8D8D; font-size: 16px; } aside .box > .content { padding: 10px 0; border: 1px solid #DFDFDF; } aside .box > .content ul.menu { padding: 0; margin: 0; } aside .box > .content ul.menu li { list-style: none; display: block; line-height: 34px; } aside .box > .content ul.menu li span.link, aside .box > .content ul.menu li a { display: block; padding: 0 15px; } aside .box > .content ul.menu li span.link:hover { cursor: pointer; text-decoration-line: underline; } aside .box > .content ul.menu li.active > span.link, aside .box > .content ul.menu li.active > a { background-color: #F9F9F9; } aside .box > .content ul.menu > li > a { padding-left: 15px; } aside .box > .content ul.menu > li > ul > li > a { padding-left: 30px; } aside .box > .content ul.menu > li > ul > li > ul > li > a { padding-left: 45px; } aside .box > .content ul.menu > li > ul > li > ul > li > ul > li > a { padding-left: 60px; } .slider { position: relative; min-height: 20px; } .slider .track { position: absolute; top: 50%; right: 0; left: 0; z-index: 10; margin-top: -2px; height: 3px; background-color: #F9F9F9; } .slider .knob { position: absolute; top: 50%; left: 0%; z-index: 20; margin-top: -10px; margin-left: -10px; cursor: hand; cursor: pointer; color: #000; font-size: 20px; } .slider .knob::before { content: "\ee79"; } .justifyContainer { font-size: 0.1px; text-align: justify; } .justifyContainer::after { content: ''; display: inline-block; width: 100%; } .justifyContainer .justifyItem { display: inline-block; text-align: justify; } .loadingOverlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.7); } .loadingOverlay.fullScreen { position: fixed; z-index: 1050; } @-webkit-keyframes delayVisibility { 90% { visibility: hidden; } 100% { visibility: visible; } } @-moz-keyframes delayVisibility { 90% { visibility: hidden; } 100% { visibility: visible; } } @-o-keyframes delayVisibility { 90% { visibility: hidden; } 100% { visibility: visible; } } @keyframes delayVisibility { 90% { visibility: hidden; } 100% { visibility: visible; } } .loadingOverlay:not(.noLoading)::after { position: absolute; content: ''; display: block; top: 0; left: 0; right: 0; bottom: 0; background-image: url('/img/common/spin.svg'); background-position: center center; background-repeat: no-repeat; -webkit-animation: 2s delayVisibility; -moz-animation: 2s delayVisibility; -o-animation: 2s delayVisibility; animation: 2s delayVisibility; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; animation-fill-mode: forwards; visibility: hidden; } @media (max-width: 767px) { .loadingOverlay:not(.noLoading)::after { width: 100vw; height: 100vh; background-position: 50% 40%; } } .rangeSlider { position: relative; padding-top: 10px; } .rangeSlider .minLabel, .rangeSlider .maxLabel { padding-top: 10px; } .rangeSlider .minLabel { float: left; } .rangeSlider .maxLabel { float: right; } .rangeSlider::after { content: ''; display: block; clear: both; } .rangeSlider input[type='range'] { width: 100%; overflow: hidden; cursor: pointer; outline: none; -webkit-appearance: none; background: none; position: absolute; left: 0; right: 0; } .rangeSlider input[type='range']::-webkit-slider-runnable-track { -webkit-appearance: none; background: none; height: 1px; background: #003D7C; } .rangeSlider input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; background: none; position: relative; height: 15px; width: 15px; margin-top: -7px; background: #fff; border: 1px solid #003D7C; border-radius: 25px; z-index: 1; } .rangeSlider input[type='range']::-moz-range-thumb { position: relative; height: 15px; width: 15px; background: #fff; border: 1px solid #003D7C; border-radius: 25px; z-index: 1; } .rangeSlider input[type='range']::-moz-range-track { background: black; height: 1px; } .rangeSlider input[type='range'].max, .rangeSlider input[type='range'].min { position: absolute; overflow: visible !important; height: 0; } .rangeSlider input[type='range'].min::-webkit-slider-thumb, .rangeSlider input[type='range'].min::-moz-range-thumb, .rangeSlider input[type='range'].min::-moz-range-track { z-index: 2; } aside.menuFilters { overflow-y: hidden; } aside.menuFilters .box[data-filter-type] .content { padding: 10px 15px; } aside.menuFilters .box[data-filter-type][data-filter-type="range"] .rangeSelectionPreview { padding-top: 5px; } aside.menuFilters .box[data-filter-type][data-filter-type="range"] .rangeSelectionPreview .from, aside.menuFilters .box[data-filter-type][data-filter-type="range"] .rangeSelectionPreview .to { font-size: 16px; } aside.menuFilters .box[data-filter-type][data-filter-type="selectMultiple"] fieldset, aside.menuFilters .box[data-filter-type][data-filter-type="selectSingle"] fieldset { border: none; padding: 0; margin: 0; } aside.menuFilters .box[data-filter-type][data-filter-type="selectMultiple"] .content, aside.menuFilters .box[data-filter-type][data-filter-type="selectSingle"] .content { padding-bottom: 0; } aside.menuFilters .box[data-filter-type][data-filter-type="selectMultiple"] .options, aside.menuFilters .box[data-filter-type][data-filter-type="selectSingle"] .options { max-height: 245px; overflow-x: auto; padding-bottom: 10px; } aside.menuFilters .box[data-filter-type][data-filter-type="selectMultiple"] .options .radio, aside.menuFilters .box[data-filter-type][data-filter-type="selectSingle"] .options .radio, aside.menuFilters .box[data-filter-type][data-filter-type="selectMultiple"] .options .checkbox, aside.menuFilters .box[data-filter-type][data-filter-type="selectSingle"] .options .checkbox { padding: 3px 0px; position: relative; } aside.menuFilters .box[data-filter-type][data-filter-type="selectMultiple"] .options .radio > *, aside.menuFilters .box[data-filter-type][data-filter-type="selectSingle"] .options .radio > *, aside.menuFilters .box[data-filter-type][data-filter-type="selectMultiple"] .options .checkbox > *, aside.menuFilters .box[data-filter-type][data-filter-type="selectSingle"] .options .checkbox > * { vertical-align: middle; } div.pageCenter h1 { margin-top: 22px; margin-bottom: 11px; } @media (max-width: 767px) { div.pageCenter .showLessMobile:not(.contentShown) { overflow: hidden; height: 48px; position: relative; } div.pageCenter .showLessMobile:not(.contentShown)::before { content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.001) 17px, white 47px); pointer-events: none; } div.pageCenter .showLessMobile + .showMore { display: block; text-align: right; padding-right: 10px; cursor: pointer; color: black; margin-top: -30px; height: 32px; margin-bottom: 5px; } div.pageCenter .showLessMobile.contentShown + .showMore { display: none !important; } } div.pageCenter .topCMS { margin-bottom: 30px; } div.pageCenter .selectedFilters { margin-bottom: 30px; } div.pageCenter .selectedFilters .heading { padding: 5px 0; font-size: 18px; font-weight: 600; } div.pageCenter .selectedFilters .filters button { margin-right: 8px; margin-bottom: 8px; font-size: 14px; } div.pageCenter .filterSortButtons { margin-bottom: 30px; } @media (max-width: 330px) { div.pageCenter .filterSortButtons button { font-size: 14px; } } div.pageCenter .filterOptions { margin-bottom: 30px; } div.pageCenter .filterOptions .resultCountContainer { padding-right: 30px; } @media (min-width: 768px) { div.pageCenter .filterOptions { text-align: right; } div.pageCenter .filterOptions select { width: 250px; } div.pageCenter .filterOptions > * { display: inline-block; } } div.pageCenter .productGrid { position: relative; } div.pageCenter .productGrid div.loadingProducts { text-align: center; padding: 30px 0; width: 100%; } @-webkit-keyframes animRotate { 0% { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } @-moz-keyframes animRotate { 0% { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } @-o-keyframes animRotate { 0% { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes animRotate { 0% { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } div.pageCenter .productGrid div.loadingProducts .icon { display: inline-block; margin: auto; font-size: 70px; color: #222; text-align: center; -webkit-animation: animRotate 1.5s infinite linear; -moz-animation: animRotate 1.5s infinite linear; -o-animation: animRotate 1.5s infinite linear; animation: animRotate 1.5s infinite linear; } div.pageCenter .productGrid div.loadingProducts .icon:before { content: "\e8da"; } div.pageCenter .productGrid button.loadMore { width: 300px; margin: 0 auto; } div.pageCenter .bottomCMS { margin-top: 30px; } div.pageCenter .landingPageLinks { margin-top: 30px; text-decoration: underline; } @-webkit-keyframes filterSlideIn { 100% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } } @-moz-keyframes filterSlideIn { 100% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } } @-o-keyframes filterSlideIn { 100% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } } @keyframes filterSlideIn { 100% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } } @-webkit-keyframes filterSlideOut { 0% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } 100% { -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); } } @-moz-keyframes filterSlideOut { 0% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } 100% { -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); } } @-o-keyframes filterSlideOut { 0% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } 100% { -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); } } @keyframes filterSlideOut { 0% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } 100% { -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); } } @media (max-width: 767px) { .filterContainer { display: none; } .filterContainer .filterMenu { height: 100%; } .filterContainer .filterMenu .filterMenuContent { position: relative; padding-bottom: 36px; height: 100%; background: white; padding: 10px 0; } .filterContainer .filterMenu .filterMenuContent [data-filter-type] { margin-bottom: 0px; } .filterContainer .filterMenu .filterMenuContent [data-filter-type] .title { cursor: pointer; padding: 10px 15px; font-size: 16px; font-weight: normal; -webkit-transition: background-color 300ms ease-in-out; -o-transition: background-color 300ms ease-in-out; transition: background-color 300ms ease-in-out; } .filterContainer .filterMenu .filterMenuContent [data-filter-type] .title:hover { background-color: rgba(0, 0, 0, 0.1); } .filterContainer .filterMenu .filterMenuContent [data-filter-type] .content { position: absolute; top: 0; right: 0px; width: 280px; background: white; border-left: 1px solid #DFDFDF; overflow-y: scroll; padding: 0; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); } .filterContainer .filterMenu .filterMenuContent [data-filter-type] .content .search { padding: 10px 15px 0 15px; } .filterContainer .filterMenu .filterMenuContent [data-filter-type] .content .search .form-group { margin-bottom: 0; } .filterContainer .filterMenu .filterMenuContent [data-filter-type] .content .options { padding: 10px 15px; max-height: none; margin-bottom: 50px; } } @media (max-width: 767px) { .filterMenuContent .box.title { display: none; } } @media (min-width: 768px) { .filterMenuContent .box.title { margin-bottom: 0px; } .filterMenuContent .box.collapsed { border-top: 1px solid #DFDFDF; border-bottom: 1px solid #DFDFDF; margin-bottom: 0px; } .filterMenuContent .box.collapsed + .box.collapsed { border-top: none; } .filterMenuContent .box.collapsed .title { font-size: 16px; cursor: pointer; padding-left: 15px; } .filterMenuContent .box.collapsed .title::after { /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'icomoon' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\f078"; margin-right: 10px; float: right; font-size: 13px; line-height: 16px; } .filterMenuContent .box.collapsed .content { display: none; border: none; padding-top: 0 !important; -webkit-transition: height 200ms ease; -o-transition: height 200ms ease; transition: height 200ms ease; } .filterMenuContent .box.collapsed.open .title::after { content: "\f077"; } .filterMenuContent .box.collapsed.open .content { display: block; } } /*# sourceMappingURL=landing-page.css.map */