/* Copyright (C) Kodmyran AB All Rights Reserved */ @media print { .noprint { display: none; } } @page { margin: 0.5cm; } /* Snowflakes*/ .snowflake { position: absolute; width: 10px; height: 10px; background: linear-gradient(white, white); /* Workaround for Chromium's selective color inversion */ border-radius: 50%; filter: drop-shadow(0 0 10px white); } .resize-animation-stopper * { animation: none !important; transition: none !important; } body.prevent-scroll { overflow: hidden; } #skiplinks { left: 10px; position: absolute; top: 6px; z-index: 9999; } #skiplinks a { display: block; position: absolute; top: -500px; } #skiplinks a:focus, #skiplinks a:hover, #skiplinks a:active {background-color: #000; color: #fff; display: inline-block; font-weight: bold; left: 0; padding: 10px; position: absolute; top: 0; white-space: nowrap; } input { -webkit-user-select: text; } input::placeholder { color: #d2d2d2; } input:focus::placeholder { color: transparent; } .styled-select { overflow: hidden; background: #fff; border: 1px solid #DDDDDD; height: 40px; border-radius:2px; position: relative; } .styled-select select::-ms-expand { display: none; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity:0; } .styled-select select { width: 100%; height: 100%; border: 0; line-height: 1.5; -webkit-appearance: none; -moz-appearance: none; text-overflow: ''; appearance: none; padding: 0 10px; padding-right: 35px !important; } .styled-select:after { content: ""; width: 15px; height: 15px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M325.6 79.4c-5.9-5.9-15.4-5.9-21.2 0l-139.4 139.4L25.6 79.4c-5.9-5.9-15.4-5.9-21.2 0 -5.9 5.9-5.9 15.4 0 21.2l150 150c2.8 2.8 6.6 4.4 10.6 4.4s7.8-1.6 10.6-4.4l150-150C331.5 94.7 331.5 85.3 325.6 79.4z'/%3E%3C/svg%3E%0A"); background-size: 15px; background-repeat: no-repeat; background-position: 94%; transition: transform 0.3s ease; display: block; position: absolute; z-index: 1; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; } .styled-select:focus-within::after { transform: translateY(-50%) rotate(180deg); } .fadeitem {opacity: 1; transition: opacity .3s; transition-delay: .2s;} .fadeitem.faded {opacity: .3;} .fadescrollcontainer { position: relative; } .fadescrollcontainer-left:before { content: ""; position: absolute; top: 0; left: -5px; width: 10%; height: 100%; background: linear-gradient(to right, #dcdcdc, transparent); } .fadescrollcontainer-right:after { content: ""; position: absolute; top: 0; right: -5px; width: 10%; height: 100%; background: linear-gradient(to left, #dcdcdc, transparent); } .textSmall {font-size: 84%;} .textBig {font-size: 130%;} .textUnderline {text-decoration: underline;} .textItalic {font-style: italic;} .textBold {font-weight: 600;} .textNormal {font-weight: 300;} .textSmallLight {font-size: 80%; color: #666;} .textLightItalic {color: #7c7c7c;font-style: italic;} .textRight {text-align: right;} .textCenter {text-align: center;} .textLeft {text-align: left;} .dispNone {display: none;} .grey {color: #6b6b6b;} .green {color: #009900} .orange {color: #ea6a00 !important;} .onlyBig {display: none !important; } .onlySmall {display: block !important; } .close {display: none !important;} .open {display: block !important;} .sitemapLine { background:url(../images/line.gif); background-repeat:repeat-y; } .sitemapHline { background:url(../images/hline.gif); background-repeat:repeat-x; } .info, .error { position: relative; padding: 20px 10px 20px 50px; border: 1px solid #ccc; background: #fff; margin: 15px 0; } .info { border: 1px solid #9ac39d; background: #e7f6e8; color: #02830b; border-radius: 2px; } .info:before { content: '\2713'; font-size: 32px; font-weight: 400; left: 10px; position: absolute; top: 10%; color: #02830b; } .error { border: 1px solid #993333; background: #f2e7e7; color: #993333; } .error:before { content: '!'; font-size: 40px; font-weight: 400; left: 17px; position: absolute; top: 7%; color: #993333; } .observe { color: #993333; border: 1px dashed #993333; } ul.checked li { display: list-item; position: relative; padding: 2px 0 2px 20px; } ul.checked li:before { content: 'c'; position: absolute; left: 3px; top: -4px; height: inherit; color: #25c793; } .standardPageContainer .innerFill { padding: 10px; } .standardPageContainer { display: block; padding-left: 0; margin-bottom: 0; } .standardPageContainer ul, .tabs-panel ul { list-style-type: disc; margin-left: 20px;} .standardPageContainer li, .tabs-panel li { display: list-item; position: relative; padding: 8px 0 2px 0; } .standardPageContainer a, .tabs-panel a { text-decoration: underline; color: #007bc2; } #mobilecheck { display: block; } /* snow */ #snowToogle { position: fixed; bottom: 20px; left: 10px; padding: 10px 20px; border-radius: 30px; background-color: #41434e; color: #FFF; display: none; transistion: 0.3s ease-in-out; } .snowFlakes { pointer-events: none; } #snowToogle:hover { text-decoration: underline} #snowToogle:focus { background-color: #464646;} #backbutton { display: inline-block; background-color: #41434e; width: 50px; height: 50px; text-align: center; border-radius: 4px; position: fixed; bottom: 15px; right: 140px; transition: background-color .3s, opacity .5s; opacity: 0; z-index: 1000; border-top-left-radius: 20px; border-bottom-right-radius: 20px; border-bottom-left-radius: 4px; border: 1px solid #262935 } @media (min-width: 720px) { #snowToogle { display: block; } #backbutton { bottom: 20px; right: 95px; } } #backbutton::after { content: "\203A"; font-weight: normal; font-style: normal; font-size: 2em; line-height: 43px; color: #fff; transform: rotate(-90deg); display: inline-flex; margin-left: -7px; margin-top: 2px; } #backbutton:hover { cursor: pointer; background-color: #262935; opacity: 1; } #backbutton:active { background-color: #262935; } #backbutton.show { opacity: .8; } .md_switch { display: inline-flex; align-items: center; cursor: pointer; width: 100%; margin: 0; justify-content: center; font-size: .7em; color: #9e9e9e; } .md_switch .md_switch__toggle { position: relative; cursor: pointer; } .md_switch [type=checkbox] { position: absolute; opacity: 0; pointer-events: none; } .md_switch .md_switch__toggle::before, .md_switch .md_switch__toggle::after { content: ''; display: block; margin: 0 3px; transition: all 100ms cubic-bezier(0.4, 0.0, 0.2, 1); background: #BDBDBD; } .md_switch .md_switch__toggle::before { height: 1.3em; width: 3em; border-radius: 0.65em; opacity: 0.6; } .md_switch .md_switch__toggle::after { position: absolute; top: 50%; transform: translate(0, -50%); height: 1.7em; width: 1.7em; border-radius: 50%; } .md_switch [type=checkbox]:focus+.md_switch__toggle { /*outline: #5d9dd5 solid 1px; box-shadow: 0 0 8px #5e9ed6;*/ } .md_switch [type=checkbox]:disabled+.md_switch__toggle { cursor: not-allowed; filter: grayscale(100%); opacity: 0.6; } .md_switch [type=checkbox]:disabled+.md_switch__toggle::after { box-shadow: none; } .md_switch [type=checkbox]:checked+.md_switch__toggle::before { background: #12afdd; } .md_switch [type=checkbox]:checked+.md_switch__toggle::after{ background: #1387a9; } .md_switch [type=checkbox]:checked+.md_switch__toggle::after { transform: translate(calc(3em - 100%), -50%); } @media (min-width: 720px) { .md_switch { width: auto; padding: 0; margin: 5px 0; background-color: transparent; font-size: .8em; color: #000; } } .dialog-backdrop.active { display: block; z-index: 100;} .dialog-backdrop { background: rgba(0, 0, 0, 0.6); } .dialog-backdrop { display: none; position: fixed; overflow-y: auto; top: 0; right: 0; bottom: 0; left: 0; } #top-banner h1 { margin: 10px 0 30px 0; } #top-banner .inner { background-size: cover; min-height: 290px; position: relative; overflow: hidden; animation: banner-fade-in 250ms ease-in; background-position: center; margin-bottom: 10px; } @media (min-width: 720px) { #top-banner .inner { max-height: none; } } .collapsed { position: relative; max-height: 150px; overflow: hidden; padding-bottom: 15px; transition: max-height 0.5s cubic-bezier(0, 1, 0, 1); } .expand { max-height: 1000px; transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);} .fadeout { display: none; height: 4em; left: 0; position: absolute; bottom: 0; width: 100%; background-image: linear-gradient(rgba(255, 255, 255, 0) 0%,rgba(247, 247, 247, 1) 100%); } .bodytext { margin: 60px 0; } .bodytext.collapsed.expand { max-height: 9999px; transition: max-height 0.5s cubic-bezier(0, 1, 0, 1); padding-bottom: 50px; } .bodytext .cpToggle { display: none; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); } .bodytext .cpToggle button { font-family: Arial, sans-serif; font-weight: 700; border: 0; background-color: #10b1e0; padding: 10px 15px; border-radius: 20px; align-items: center; width: max-content; cursor: pointer; color: #fff; transition: background-color .3s ease-in; } .bodytext .cpToggle button:hover, .bodytext .cpToggle button:focus { background-color: #1498bf; outline: none;} .bodytext .cpToggle button:focus-visible { outline: 1px solid #000;} .bodytext p { padding: 8px 0;} .bodytext p:first-of-type { padding-top: 0; } @media (min-width: 720px) { .bodytext { /*column-count: 2; column-gap: 40px; column-rule-style: solid; column-rule-width: 1px; column-rule-color: #e2e2e2;*/ } } .formRow { display: flex; flex-direction: column; margin-bottom: 25px; align-items: flex-start; } .formRow label { display: block; margin: 3px 0; word-break: break-word;} .formRow input[type="text"], .formRow input[type="password"], textarea { padding: 10px 3px; } .formRow select { background-color:#fff; } .isLoggedInBox{ margin-bottom:25px; } input[aria-invalid='false'] { /*outline: 1px solid green;*/ } input[aria-invalid='true'] { outline: 1px solid red; background-color: #feefef; } .fielderror { display: none; color: red; } .fielderror p { margin: 0; font-size: .8em; } .chkBoxWrapper { display: flex; align-items: center; } .chkBoxWrapper input { margin-right: 10px; -webkit-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); padding: 10px; margin-left: 5px; } #sticky-buy { position: fixed; bottom: 0; left: 0; right: 0; box-shadow: 0 -2px 14px 0 rgba(0,0,0,.15); transform: scaleY(0); transition: transform .2s ease; transform-origin: bottom; z-index: 10; background-color: #fff; } #sticky-buy.show { transform: scaleY(1); transition: transform .4s ease; transform-origin: bottom; } #sticky-buy .inner { display: flex; flex-direction: row; flex-wrap: nowrap; padding: 10px; height: 100px; } #sticky-buy .buy-image { height: 100%; width: auto; max-width: 50px; } #sticky-buy .buy-brand { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 20px 0 10px; min-width: 160px; } #sticky-buy .buy-brand h3 { font-size: .7em; font-weight: 400; margin-bottom: 3px; } #sticky-buy .buy-brand h4 { max-height: 45px; font-size: .7em; word-break: break-word; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } #sticky-buy .buy-actions { text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; min-width: 100px; } #sticky-buy .buy-actions .button { font-size: .9em; width: 100%; } #sticky-buy .buy-actions .priceRegular { font-size: .9em; font-weight: 600; padding-top: 3px; } #footer { content-visibility: auto; contain-intrinsic-size: 630px; display: flex; flex-direction: column; background-color: #161616;color: #fff;width: 100%;font-size: .9em; margin-top: auto; } #footer a {color: #ccc;padding: 5px 0;margin: 5px 0;} #footer a:hover {text-decoration: underline;color: #117d0a;} #footer a:focus-visible { text-decoration:underline; outline: 1px solid #fff; color: #117d0a;} #footer h3 { margin-top: 15px; font-size: 1.4em; font-weight: 700; } #footerLogos { padding: 20px 0; display: flex; background-color: #fff; } #footerLogos .container { display: flex; justify-content: center; align-items: center; width: 100%; } #footerLogos a { margin: 0 40px; } #footerNewsletter { background-color: #202020; padding: 30px 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } #footerNewsletter h4 { color: #fff; font-size: 1.3em; font-weight: 700; margin-bottom: 25px; padding: 0; } #footerNewsletter.anchortrigger { background-color: #202020; animation-name: pulse; animation-duration: 1.2s; animation-iteration-count: 3; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7); background-color: #000; } 50% { box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); background-color: #117d0a; } 100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); background-color: #000; } } #ajaxNL { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; margin: 0 20%; } #ajaxNL .newsletter-field, #mc-embedded-subscribe-form .newsletter-field { width: 100%; padding: 10px; border: 0; } #ajaxNL .nlSubmit, #mc-embedded-subscribe-form .nlSubmit { border: 0; margin-top: 15px; padding: 10px 20px; border-radius: 30px; background-color: #117d0a; color: #fff; font-weight: 600; } #footerContent { padding: 40px 0 0 0; display: flex; } #footerContent .container { display: flex; justify-content: space-between; width: 100%; flex-direction: column; padding: 20px; } #footerContent .container .fcol { width: 100%; } #footerContent .fcol.fcol3 a img {display: inline-block; vertical-align: middle; margin-right: 25px;} #footerContent .fcol.fcol3 a:last-child img { margin-right: 0; background-color: #fff; border-radius: 10px; padding: 8px; } #footerContent h4 { color: #838383; font-size: 1em;font-weight: 600;margin-bottom: 10px;margin-top: 5px;padding: 0;} #footerContent ul { line-height: 1.4em; margin-bottom: 20px; } #footerContent li { display: block; margin: 15px 0;} #footerBottom { padding: 40px 0; display: flex; font-size: .9em; color: #9f9f9f; } #footerBottom .container { display: flex; justify-content: center; align-items: center; width: 100%; padding: 20px; } @media (min-width: 720px) { #ajaxNL .newsletter-field, #mc-embedded-subscribe-form .newsletter-field { width: auto; margin-right: 20px; } #ajaxNL .nlSubmit, #mc-embedded-subscribe-form .nlSubmit { margin-top: 0; } #footerContent .container { flex-direction: row; padding: 0; gap: 45px; } #footerContent .container .fcol { width: 25%; } #footerBottom .container { padding: 0;} #sticky-buy.show {display: none;} } /* Category product */ /*.productListContainer { display: grid; grid-template-columns: repeat(auto-fill, minmax(315px, 1fr)); grid-gap: 10px; }*/ .productListContainer { display: grid; grid-template-columns: repeat(auto-fill, minmax(245px, 1fr)); grid-gap: 10px; } .productListContainer {grid-auto-rows: minmax(0, 407px);} .productListContainer.withbuybuttons {grid-auto-rows: minmax(0, 455px);} .productListContainer article { content-visibility: auto; contain-intrinsic-size: 407px; display: flex; flex-direction: column; width: auto; height: auto; margin: 0;position: relative; background-color: #fff; transition: all .2s ease-in-out; } .productListContainer.withbuybuttons article { content-visibility: auto; contain-intrinsic-size: 455px; } .productListContainer article .symbolContainer { padding-left: 5px; max-width: 170px; } .productListContainer article .symbol { transform: scale(.9); margin: 2px 0 1px 0; transform-origin: top left; } .productListContainer article .symbol.symbol_790 { margin: 2px 0 -9px 0; } .productListContainer article .catProdImage { height: 240px; display: flex; justify-content: center; align-items: center; margin-bottom: 50px; overflow: hidden; position: relative; /* This is the space we need for the absolute positioned href! (see below) */ } /* kund-3605 */ .productListContainer article .catProdImage .mImageWrapper { position: absolute; bottom: 0; right: 2px; max-width: 60px;} .productListContainer article .catProdImage img { max-height: 240px; width: auto; transition: 0.6s ease; -webkit-backface-visibility: hidden;} .productListContainer article:hover img { transform:translateZ(0) scale(1.06); -webkit-backface-visibility: hidden; -webkit-transform: translateZ(0) scale(1.06); } .productListContainer article .catProdInner { flex: 1; padding: 0 10px 25px 10px; } .productListContainer article .productPrice { display: flex; align-items: baseline; font-size: 1.1em; font-weight: 600; flex-direction: row; flex-wrap: wrap; } .productListContainer article .productPrice .pricePrefix { font-size: .7em; } .productListContainer article .from_price { width: 100%; height: 16px; font-size: .6em; color: #8b8b8b; } .productListContainer article .priceOld { color: #a1a1a1; font-weight: 500; margin-left: 10px; } .productListContainer article .shortText { font-size: .8em; margin-top: 5px; height: 43px; text-overflow: ellipsis; overflow: hidden; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 5px; } .productListContainer article .stockStatus { position: absolute; right: 5px; bottom: 5px; font-size: .75em; } .productListContainer article .assocnr { position: absolute; bottom: 5px; left: 10px; font-size: .7em; color: #3b7dde; font-weight: 600; } .productListContainer article .stockstatustext svg { width: 9px; height: 9px; } .productListContainer article .stockStatus .deliverydays { display: none; } .productListContainer article .productBuy .button { padding: 12px 25px; } .productListContainer article h3 { font-size: .9em; font-weight: 600; } .productListContainer article a { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 2; padding: 250px 10px 0 10px; } .productListContainer article a span { height: 35px; overflow: hidden; display: block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; } .productListContainer article a::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: all 250ms ease; } .productListContainer article a:hover::after, .productListContainer article a:focus::after { content: ""; outline: none; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .productListContainer article a:focus-visible { outline: 1px solid black; } .productListContainer article a.selectlink { position: relative; top: auto; left: auto; height: auto; width: auto; padding: 5px 15px; } #notit { display: flex; /*background-color: #fff2cc;*/ background: linear-gradient(#F9EFAF, #F7E98D); padding: 20px; flex-direction: column; overflow: auto; background-color: rgb(255, 255, 204); box-shadow: 0 1px 4px rgb(0 0 0 / 25%); } #notit h2 { text-align: left; padding: 0 0 15px; font-size: 1.2em; } #notit ul {list-style-type: disc; margin-left: 15px;} #notit ul li {margin: 10px 0;} #notit::-webkit-scrollbar{width:8px} #notit::-webkit-scrollbar-track{background:#f9df98} #notit::-webkit-scrollbar-thumb{background:rgb(203 122 0 / 90%);border-radius:12px;transition:background .25s ease} #notit::-webkit-scrollbar-thumb:hover{background:rgb(203 122 0 / 100%)} #notit::-webkit-scrollbar{width:10px} #prodMisc #notit { max-height: 400px; margin-bottom: 10px; } #prodMisc #notit h2 { border-bottom: 0; margin-bottom: 0; padding-bottom: 5px; } /* Special banner in yellow area for gren and pallställ - KUND 3296*/ #notit.banner-notit { padding: 0; background-color: red; } .banner-notit { padding: 0; } @media (min-width: 720px) { .productListContainer .highlight { grid-column-end: span 2; } .productListContainer .highlight { display: flex; overflow: hidden; } #notit { grid-column: auto / span 2; /*grid-row: auto / span 2;*/ grid-row: auto / span 1 } } .ribbon-wrap { width: 100%; height: 188px; position: absolute; top: -1px; left: 1px; overflow: hidden; } .ribbon1 { font-size: .8em; width: 200px; height: 32px; line-height: 32px; position: absolute; top: 30px; right: -50px; z-index: 2; overflow: hidden; -webkit-transform: rotate(45deg); transform: rotate(45deg); background: #000; text-align: center; color: #fff; } .ribbon3 { background: #cac6ba none repeat scroll 0 0; color: #595037; font-size: 0.75em; height: 25px; left: 0; line-height: 25px; padding-left: 15px; position: absolute; top: 53%; width: 111px; z-index: 2; } .ribbon3:before, .ribbon3:after { content: ""; position: absolute; } .ribbon3:before { border-bottom: 6px solid #9e957c; border-left: 7px solid transparent; height: 0; top: -5.5px; width: 0; } .ribbon3:after { border-bottom: 12px solid transparent; border-left: 9px solid #cac6ba; border-top: 13px solid transparent; height: 0; right: -8.5px; width: 0; } .symbolContainer { /*pointer-events: none;*/ z-index: 2; max-width: 500px; left: 0; display: flex; flex-wrap: wrap; align-items: center; width: 100%; position: absolute; top: 5px; line-height: normal; text-align: left; background-repeat: no-repeat; max-width: 125px; } .symbol {position: relative; top: 0; display:flex; justify-content: center; align-items: center; /*width: 60px; height: 60px;*/ margin: 0 10px 10px 0; } /* .symbol.symbol_18_4425 { order: 30; z-index: 1; width: 50px; height: 50px; background-image: url("../images/symbol_eco.svg"); background-size: 24px; background-repeat: no-repeat; background-color: rgb(255 255 255 / 80%); border-radius: 100%; background-position: center center; border: 1px solid #39a800; transition: filter 0.5s ease-in-out;} .symbol.symbol_18_4425 .symboltext {display: none;} .symbol.symbol_24_4427 { order: 40; z-index: 1; width: 50px; height: 60px; background-image: url("../images/symbol_fire.svg"); background-size: 24px; background-repeat: no-repeat; border-radius: 50px; background-position: center center; border: 1px solid #e67000; background-color: #e67000; color: #fff; transition: filter 0.5s ease-in-out;} .symbol.symbol_24_4427 .symboltext {display: none;} */ /* Symbol ESD */ .symbol.symbol_780 { order: 10; z-index: 1; width: 76px; height: 76px; background-image: url("../images/symbol_esd.svg"); background-size: 60px; background-repeat: no-repeat; border-radius: 50px; background-position: center center; border: 1px solid transparent; background-color: transparent; color: #fff; transition: filter 0.5s ease-in-out;} .symbol.symbol_780 .symboltext {display: none;} /* Symbol Svenskt */ .symbol.symbol_778 { order: 20; z-index: 2; width: 76px; height: 76px; background-image: url("../images/symbol_swedish.svg"); background-size: 60px; background-repeat: no-repeat; border-radius: 50px; background-position: center center; border: 1px solid transparent; background-color: transparent; color: #fff; transition: filter 0.5s ease-in-out;} .symbol.symbol_778 .symboltext {display: none;} /* Symbol Bra arbetsmiljöval */ .symbol.symbol_790 { order: 20; z-index: 2; width: 100px; height: 120px; background-image: url("../images/bra-arbetsmiljoval-sm.png"); background-size: 90px; background-repeat: no-repeat; border-radius: 0; background-position: center center; border: 1px solid transparent; background-color: transparent; color: #fff; transition: filter 0.5s ease-in-out;} .symbol.symbol_790 .symboltext {display: none;} /* Symbol Stöld */ .symbol.symbol_669 { order: 30; z-index: 3; width: 76px; height: 76px; background-image: url("../images/symbol_theft.svg"); background-size: 60px; background-repeat: no-repeat; border-radius: 50px; background-position: center center; border: 1px solid transparent; background-color: transparent; color: #fff; transition: filter 0.5s ease-in-out;} .symbol.symbol_669 .symboltext {display: none;} /* Symbol brand */ .symbol.symbol_62 { order: 40; z-index: 4; width: 76px; height: 76px; background-image: url("../images/symbol_fire_1.svg"); background-size: 60px; background-repeat: no-repeat; border-radius: 50px; background-position: center center; border: 1px solid transparent; background-color: transparent; color: #fff; transition: filter 0.5s ease-in-out;} .symbol.symbol_62 .symboltext {display: none;} /* Symbol garanti */ .symbol.symbol_657 { order: 2; z-index: 2; width: 110px; height: 40px; border-radius: 30px; border-bottom-left-radius: 0; border: 1px solid transparent; background-color: #a99652; color: #fff; transition: filter 0.5s ease-in-out;} .symbol.symbol_657 .symboltext { font-size: 30px; line-height: 30px; } .symbol.symbol_657 .symboltext:after { content: "års garanti"; font-size: 12px; width: 40px; display: inline-block; vertical-align: middle; padding-left: 4px; line-height: 12px; margin-top: -4px; } /* Symbol går att kundanpassa */ .symbol.symbol_781 { order: 2; z-index: 2; width: 110px; height: 45px; border-radius: 30px; border-bottom-left-radius: 0; border: 1px solid transparent; background-color: #3d3d3d; color: #fff; transition: filter 0.5s ease-in-out;} .symbol.symbol_781 .sybmolInner { margin-left: 10px; } .symbol.symbol_781 .symboltext { font-size: 13px; /* line-height: 30px; */ } /* Symbol beställ provbit */ .symbol.symbol_779 { order: 2; z-index: 2; width: 110px; height: 40px; border-radius: 30px; border-bottom-left-radius: 0; border: 1px solid transparent; background-color: #3d3d3d; color: #fff; transition: filter 0.5s ease-in-out;} .symbol.symbol_779 .symboltext { font-size: 13px; line-height: 30px; } @media (min-width: 720px) { .symbolContainer { max-width: 125px; } } .subscriptionSpot { position: absolute; top: 14px; font-size: .8em; background-color: #ccc; padding: 5px 10px; border-radius: 30px; } .spotSale { display: inline-block; background-color: #FE3838; color: #fff; height: 60px; line-height: 60px; position: relative; text-align: center; top: 0; z-index: 1; left: 0; font-size: 1em; margin-bottom: 15px; width: 60px; border-radius: 100%; font-weight: 600; } .spotSale em {display: none;} .spotNew { position: relative;width: 80px; height: 50px; line-height: 50px; display: block; background-color: #07a2cb; color: white; font-weight: 600; font-size: 14px; z-index: 2; text-align: center; text-transform: uppercase; pointer-events: none; transform: scale(.8); transform-origin: top left; } .movieIcon { width: 30px; height: 30px; position: absolute; right: 4px; bottom: 5px; padding: 1px; z-index: 1; } .movieIcon svg { fill: #FF0033; } .tooltip:before, .tooltip:after { position: absolute; transition: 0.3s; opacity: 0; pointer-events: none; z-index: 50; font-size: .9em;} .tooltip:before { content: attr(data-tooltip); background-color: #333; width: -webkit-max-content; width: -moz-max-content; width: max-content; color: #fff; padding: 3px 10px; } .tooltip:after { content: ""; position: absolute; border-width: 12px; border-style: solid; } .tooltip:before, .tooltip[data-position=botttom]:before, .tooltip:after, .tooltip[data-position=botttom]:before { left: 50%; bottom: -12px; } .tooltip:before, .tooltip[data-position=botttom]:before { transform: translate(-50%, 100%); } .tooltip:after, .tooltip[data-position=botttom]:before { border-color: transparent transparent #333 transparent; transform: translate(-50%); } .tooltip[data-position=top]:before, .tooltip[data-position=top]:after { top: -12px; bottom: initial; } .tooltip[data-position=top]:before { transform: translate(-50%, -100%); } .tooltip[data-position=top]:after { border-color: #333 transparent transparent transparent; } .tooltip[data-position=left]:before, .tooltip[data-position=left]:after { top: 50%; bottom: initial; right: -12px; left: initial; } .tooltip[data-position=left]:before { transform: translate(100%, -50%);} .tooltip[data-position=left]:after {border-color: transparent #333 transparent transparent; transform: translate(0, -50%); } .tooltip[data-position=right]:before, .tooltip[data-position=right]:after { top: 50%; bottom: initial;left: -13px; right: initial; } .tooltip[data-position=right]:before { transform: translate(-100%, -50%); } .tooltip[data-position=right]:after { border-color: transparent transparent transparent #333;transform: translate(0, -50%); } .tooltip:hover:before, .tooltip:hover:after {opacity: 1;} .accordion-tabs { width: 100%; } .tabs-tab-list { display: flex; list-style: none; margin: 0; padding: 0; font-size: 1em; } .tabs-tab-list li { margin: 0; } .tabs-trigger { border-bottom: none; color: #666; display: none; margin: 0 5px 0 1px; padding: 15px 20px; text-decoration: none; border-bottom: 2px solid #bfbfbf; font-weight: 600;} .tabs-trigger:hover { border-bottom: none; color: #000; } .tabs-trigger.is-selected, .tabs-trigger.is-selected:hover, .tabs-trigger.is-selected:focus { border-bottom: 2px solid #117d0a; color: #000; } .tabs-trigger:active { outline: none; } .tabs-panel { display: block; margin: 0; padding: 0; } .tabs-panel:not(:first-of-type) { /*border-top: 1px solid #dcdcdc;*/ } .tabs-panel { /*border-top: 1px solid #dcdcdc;*/ margin-bottom: 1px; } .tabs-panel:last-child { /*border-bottom: 1px solid #dcdcdc;*/ } .tabs-panel.is-hidden .content { display: none; } .tabs-panel .content { padding: 10px; margin-top: -1px; background-color: #fff;} .tabs-panel:active, .tabs-panel:focus { outline: none; } .is-initialized.tabs-allowed .tabs-panel { display: inherit; } .accordion-trigger { display: flex; align-items: center; justify-content: space-between; cursor: pointer; padding: 15px 10px; background-color: #e6e6e6; font-weight: 600; font-size: 1em; } .accordion-trigger:focus {outline: none;} .accordion-trigger:focus-visible {outline: 1px solid #000;} .accordion-trigger-icon { pointer-events: none; } .accordion-trigger h2 { font-size: 1em; border: none; font-weight: 600; padding: 0; } .accordion-trigger-icon { display: inline-block; float: right; background-color: #3c3c3c; border-radius: 100%; padding: 6px; } .accordion-trigger-icon svg { margin: 0; } .accordion-trigger header { pointer-events: none;} .accordion-trigger[aria-expanded="true"] .toggleIcon:before{ transform: rotate(90deg); } .accordion-trigger[aria-expanded="true"] .toggleIcon:after{ transform: rotate(180deg); } .accordion-trigger h2 { pointer-events: none; } .toggleIcon { position: relative; width: 17px; height: 17px; } .toggleIcon:before, .toggleIcon:after{ content: ""; position: absolute; background-color: #fff; transition: transform 0.25s ease-out; } .toggleIcon:before{ top: 0; left: 50%; width: 2px; height: 100%; margin-left: -1px; } .toggleIcon:after{ top: 50%; left: 0; width: 100%; height: 2px; margin-top: -1px; } [aria-expanded="true"] .vert { display: none; } .label--open, .label--close { display: block; border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .label--close { display: none; } .is-open .label--open { display: none; } .is-open .label--close { display: block; } @media (min-width: 720px) { .tabs-panel .content { margin-top: 10px; padding: 20px; } .tabs-allowed .accordion-trigger { display: none; } .tabs-allowed .tabs-trigger { display: block; } .tabs-allowed .tabs-trigger:focus {outline: none;} .tabs-allowed .tabs-trigger:focus-visible {outline: 1px solid #000; background-color: #fff;} .tabs-allowed .tabs-panel { display: none; } .tabs-allowed .tabs-panel.is-hidden { display: none; } .tabs-allowed .tabs-panel { border-top: 2px solid #dbdbdb; } .tabs-allowed .tabs-tab-list { margin-bottom: -2px; } /*.tabs-panel:last-child { border: 0;}*/ } /* Medium button */ .mediumButton { background-color: #10b1e0; color: #fff; cursor: pointer; font-size: 0.9em; font-weight: 600; padding: 10px 20px; transition: all 400ms ease 0s; display: inline-block; border-radius: 20px; } .mediumButton:hover, .mediumButton:focus { color: #fff; background-color: #1498bf; } .mediumButton.dark { background-color: #636363; } .mediumButton.dark:hover, .mediumButton.dark:focus { color: #fff; background-color: #333; } /* Small button */ .smallButton { margin-left: 3px; } .smallButton a span { display: none; } .smallButton a { background-color: #117d0a; border-radius: 100%; color: #fff; text-align: center; transition: all 400ms ease 0s; display: flex; align-items: center; justify-content: center; padding: 10px; } .smallButton a:hover, .smallButton a:focus { color: #fff; background-color: #a11c15; } .smallButton svg { width:15px; height: 15px; fill: #fff;} /* Index related */ #indexCampaign { } #indexCampaign .campaigninfo { background-color: #fe3838; padding: 10px; color: #fff; } #indexCampaign .campaignbutton { display: flex; justify-content: center; margin: 10px 0; } #indexCampaign .campaignbutton a { background-color: #10b1e0; color: #fff; padding: 10px 15px; border-radius: 30px; font-weight: 500; margin: 10px 0; transition: background-color .3s; } #indexCampaign .campaignbutton a:hover, #indexCampaign .campaignbutton a:focus { background-color: #1498bf; } #indexSlideShow {} #pageIndex { padding-top: 5px; } #indexUspArea, #indexUspArea2 { margin: 10px 0; } #indexLowerUspArea { margin: 40px 0; } #indexUspArea .uspPlate p, #indexUspArea2 .uspPlate p, #indexLowerUspArea .uspPlate p {margin: 0; padding: 0; line-height: 0; } #indexUspArea .uspRow1, #indexUspArea2 .uspRow1, #indexLowerUspArea .uspRow1 { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch; gap: 10px; } #indexUspArea .uspRow1 .uspPlate, #indexUspArea2 .uspRow1 .uspPlate, #indexLowerUspArea .uspRow1 .uspPlate{ flex: 1 1 49%; } #indexUspArea .uspRow1 .uspPlate img, #indexUspArea2 .uspRow1 .uspPlate img, #indexLowerUspArea .uspRow1 .uspPlate img { width: 100%; height: auto; } #indexUspArea .uspRow2, #indexUspArea2 .uspRow2 { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch; gap: 10px; margin: 10px 0; } #indexUspArea .uspRow2 .uspPlate, #indexUspArea2 .uspRow2 .uspPlate{ flex: 1 1 24%; min-width: 200px; } #indexUspArea .uspRow2 .uspPlate img, #indexUspArea2 .uspRow2 .uspPlate img { width: 100%; height: auto; } #indexImagesFromCategories { } #indexImagesFromCategories h2 { padding-top: 0; } #indexImagesFromCategories > .container { background-color: white; margin: 0px auto; padding: 20px; } #indexImagesFromCategories .catWrapper { display: flex; flex-wrap: wrap; } #indexImagesFromCategories .catItem { flex:0 0 47%; max-width: 47%; margin-bottom: 15px; } #indexImagesFromCategories .catItem a { position: relative; display: flex; flex-direction: column; text-align: center; font-weight: bold; width: 100%; } #indexImagesFromCategories .catItem .imagewrap { margin-bottom: 10px; } #indexImagesFromCategories .catItem .image { height: 125px; margin-bottom: 10px; align-items: center; display: flex; justify-content: center; } #indexImagesFromCategories .catItem img { border-radius: 100%; max-width: 145px; max-height: 100%; /*max-width: 100%; height: auto;*/ /*max-width: fit-content;*/ height: inherit;} #indexImagesFromCategories .catItem .header { word-wrap: break-word; word-break: break-word; color: #4a4a4a; max-width: 16.1rem; line-height: 2rem; } #indexImagesFromCategories h3 { font-size: 1em; font-weight: 700; padding: 0; } #indexTopSellers{ margin-top: 10px;} #indexTopSellersFromCategories { margin: 20px 0;} #indexTopSellersFromCategories .catLink {font-size: .9em;margin-top: -6px;margin-bottom: 5px;} #indexTopSellersFromCategories .catLink a {background-color: #1a74e9;border-radius: 10px;padding: 2px 9px;color: #fff;} #indexTopSellersFromCategories .catLink a:hover {background-color: #20659f;} #indexTopSellersFromCategories .catLink { display: flex; justify-content: center; margin: 10px 0; } #indexTopSellersFromCategories .catLink a { background-color: #10b1e0; color: #fff; padding: 10px 15px; border-radius: 30px; font-weight: 500; margin: 10px 0; transition: background-color .3s; } #indexTopSellersFromCategories .catLink a:hover, #indexTopSellersFromCategories .catLink a:focus { background-color: #1498bf;} @media (min-width: 720px) { #indexImagesFromCategories .catItem { flex: 0 0 20%; max-width: 20%; } } #pageIndex h2 { text-align: left; border-bottom: 2px solid #dbdbdb; margin-bottom: 19px; padding-bottom: 16px; } /* Mini cart */ /* #miniCart { display: none; position: absolute; top: 100%; right: 0; width: 600px; padding: 5px; background-color: #fff; box-shadow: 0 1px 4px rgb(50 50 50 / 30%); max-height: 70vh; overflow-y: auto; z-index: 200; } #miniCart .cashier-form table { white-space: nowrap; word-wrap: break-word; display: flex; flex-direction: column; flex-wrap: wrap; } #miniCart .cashier-form table td { white-space: normal; text-overflow: ellipsis; } #miniCart .cashier-form table td a { display: flex;} #miniCart .cashier-form table th { } #miniCart .cashier-form table tr { display: flex; } #miniCart .cashier-form table tr.total {justify-content: flex-end; padding: 10px; background-color: #f7f7f7; margin: 10px 0; } #miniCart .cashier-form table tr.total td:first-of-type { padding-right: 17px; } #miniCart .cashier-form table tr.total td:last-of-type { padding-right: 30px; } #miniCart .cashier-form table td.col1 { align-items: center; justify-content: center; display: flex; width: 20%; } #miniCart .cashier-form table td.col2 { align-items: center; display: flex; flex: 1; flex-wrap: wrap; } #miniCart .cashier-form table td.col3 { align-items: center; justify-content: center; display: flex; width: 25%; } #miniCart .cashier-form .name { font-size: .8em; font-weight: 600; padding-bottom: 15px; width: 100%; } #miniCart .cashier-form .cartQtyWrapper { width: 100%; display: flex; align-items: center; } #miniCart .cashier-form .cartQtyWrapper .cartQty { font-size: .9em; font-weight: 600; margin-right: 30px; } #miniCart .cashier-form a.cartPlus, #miniCart .cashier-form a.cartMinus {display: flex; background-color: #eb7676; border-radius: 100%; margin-right: 20px; width: 24px; height: 24px; align-items: center; justify-content: center; color: #fff; font-size: 22px; font-weight: 700; } #miniCart .cashier-form a.cartPlus { background-color: #4da96c; } #miniCart .cashier-form a.cartPlus:hover, #miniCart .cashier-form a.cartPlus:focus, #miniCart .cashier-form a.cartMinus:hover, #miniCart .cashier-form a.cartMinus:focus { } #miniCart .cashier-form a.cartPlus:focus-visible, #miniCart .cashier-form a.cartPlus:focus-visible {outline: 1px solid #000; } #miniCart .cashier-form a.cartRemove { border: 2px solid #cbcbcb; border-radius: 100%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; margin: 10px 0 0 auto; } #miniCart .cashier-form a svg { max-width: 9px; fill: #cbcbcb; } #miniCart .cashier-form a.cartRemove:hover svg { fill: #333; } #miniCart .cashier-form a.cartRemove:hover { border-color: #333; } */ #miniCart { display: none; position: absolute; top: 100%; right: 0; width: 600px; padding: 5px; background-color: #fff; box-shadow: 0 1px 4px rgb(50 50 50 / 30%); max-height: 70vh; overflow-y: auto; z-index: 200; } #miniCart .cashier-form table { white-space: nowrap; word-wrap: break-word; display: flex; flex-direction: column; flex-wrap: wrap; } #miniCart .cashier-form table td { white-space: normal; text-overflow: ellipsis; } #miniCart .cashier-form table td a { display: flex; padding: 4px 0;} #miniCart .cashier-form table td .mspec { font-weight: 100; margin: 4px 0; background-color: #f6f2e7; padding: 5px 10px; font-size: .9em; border-radius: 10px } #miniCart .cashier-form table th { } #miniCart .cashier-form table tr { display: flex; margin-bottom: 20px; border-bottom: 1px solid #e4e4e4; padding-bottom: 10px; } #miniCart .cashier-form table tr.mountingRail { background-color: transparent; margin-top: -21px; padding-top: 14px; padding-right: 5px; padding-left: 110px; position: relative; outline: 3px solid white; outline-offset: -2px; border-bottom: 3px solid #ccc;} /*#miniCart .cashier-form table tr.mountingRail:after { bottom: 97%; left: 50%; border: solid transparent; content: ""; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(247, 247, 247, 0); border-bottom-color: #f7f7f7; border-width: 10px; margin-left: -10px; }*/ #miniCart .cashier-form table tr.mountingRail td .mspec { /*background-color: transparent;*/ } #miniCart .cashier-form table tr.total {justify-content: flex-end; padding: 10px; background-color: #f7f7f7; margin: 10px 0; } #miniCart .cashier-form table tr.total td:first-of-type { padding-right: 17px; } #miniCart .cashier-form table tr.total td:last-of-type { /*padding-right: 30px;*/ } #miniCart .cashier-form table td.col1 { align-items: center; justify-content: center; display: flex; /*width: 20%;*/ width: 100px; background-color: #fff; margin-right: 10px; } #miniCart .cashier-form table td.col2 { align-items: center; display: flex; flex: 1; flex-wrap: wrap; } #miniCart .cashier-form table td.col3 { justify-content: right; display: flex; width: 25%; font-size: .9em; } #miniCart .cashier-form .name { font-size: .8em; font-weight: 600; padding-bottom: 15px; width: 100%; } #miniCart .cashier-form .cartQtyWrapper { width: 100%; display: flex; align-items: center; } #miniCart .cashier-form .cartQtyWrapper .cartQty { font-size: .9em; margin-right: 30px; } #miniCart .cashier-form a.cartPlus, #miniCart .cashier-form a.cartMinus {display: flex; background-color: #9c9c9c; border-radius: 100%; margin-right: 20px; width: 24px; height: 24px; align-items: center; justify-content: center; color: #fff; font-size: 22px; } #miniCart .cashier-form a.cartPlus { background-color: #4da96c; } #miniCart .cashier-form a.cartPlus:hover, #miniCart .cashier-form a.cartPlus:focus, #miniCart .cashier-form a.cartMinus:hover, #miniCart .cashier-form a.cartMinus:focus { /*background-color: #1498bf;*/ } #miniCart .cashier-form a.cartPlus:focus-visible, #miniCart .cashier-form a.cartPlus:focus-visible {outline: 1px solid #000; } #miniCart .cashier-form a.cartRemove { border: 2px solid #cbcbcb; border-radius: 100%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; margin: 10px 0 0 auto; } #miniCart .cashier-form a svg { max-width: 9px; fill: #cbcbcb; } #miniCart .cashier-form a.cartRemove:hover svg { fill: #333; } #miniCart .cashier-form a.cartRemove:hover { border-color: #333; } #miniCart .button-confirm { padding: 10px 20px; margin: 0 5px 5px 0; } /* Ajax loader */ #ajaxLoader { width: 200px; height: 200px; position: fixed; top:-100%; right:-100%; left:-100%; bottom:-100%; margin:auto; z-index:1000; animation: animajaxloader 1.2s linear infinite; display: none; animation-play-state: paused; } #ajaxLoader.active, #ajaxLoader.active .axloader::before, #ajaxLoader.active .axloader::after { animation-play-state: running; } .axloader { position: absolute; top: calc(50% - 42px); left: calc(50% - 42px); width: 84px; height: 84px; border-radius: 50%; perspective: 800px; } .axloader .inner { position: absolute; box-sizing: border-box; width: 100%; height: 100%; border-radius: 50%; } .axloader .inner.one { left: 0; top: 0; animation: rotate-one 1s linear infinite; border-bottom: 3px solid #117d0a; } .axloader .inner.two { right: 0; top: 0; animation: rotate-two 1s linear infinite; border-right: 3px solid #117d0a; } .axloader .inner.three { right: 0; bottom: 0; animation: rotate-three 1s linear infinite; border-top: 3px solid #117d0a; } @keyframes rotate-one { 0% { transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg); } 100% { transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg); } } @keyframes rotate-two { 0% { transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg); } 100% { transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg); } } @keyframes rotate-three { 0% { transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg); } 100% { transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg); } } .wishlist ul { margin:0; padding:0; list-style:none; } .wishlist li { margin-right:20px; float:left; } .wishContainer { width: 450px; float: left; border: 1px dashed #ccc; min-height: 180px; position: relative; } .wishContainer .inner { margin: 10px; } .wishContainer .image { float: left; width: 100px; } .wishContainer .infobox { float: left; padding-left: 15px; width: 250px; } .wishContainer .infobox h3 { min-height: 40px; } .wishContainer .infobox .observe { margin-bottom: 10px; padding: 5px; } .wishContainer .infobox .price { padding-left: 0; font-weight: 600; } .wishContainer .infobox .actions { position: absolute; bottom: 10px; margin-right: 15px; } .wishContainer .infobox .actions input { margin-right: 20px; } .prodpagelinks { margin: 5px 0 15px; } .prodpagelinks ul { display: flex; flex-wrap: wrap; gap: 10px; } .prodpagelinks li { flex-basis: 100%; } .prodpagelinks a { padding: 7px 10px 3px; border-bottom: 2px solid #10b1e0; background-color: #10b1e0; border-radius: 20px; color: #fff; font-size: .85em; display: flex; align-items: center; justify-content: center; } .prodpagelinks a:after { content: " "; display: inline-flex; width: 15px; height: 15px; margin-left: 7px; font-size: 20px; font-weight: 600; order:2; background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='612.02px' height='612.02px' viewBox='0 0 612.02 612.02' style='enable-background:new 0 0 612.02 612.02;' xml:space='preserve'%3E%3Cg%3E%3Cg id='_x35__11_'%3E%3Cg%3E%3Cpath stroke='white' fill='white' d='M596.96,269.674L342.381,15.094c-20.079-20.079-52.644-20.079-72.723,0c-20.079,20.079-20.079,52.644,0,72.723 L487.852,306.01L269.658,524.202c-20.079,20.079-20.079,52.644,0,72.723s52.644,20.079,72.723,0L596.96,342.346 C617.039,322.317,617.039,289.753,596.96,269.674z M290.858,254.258L88.744,41.238c-20.309-21.378-53.204-21.378-73.513,0 s-20.309,56.058,0,77.462l165.371,174.289L15.231,467.278c-20.309,21.379-20.309,56.083,0,77.462s53.204,21.379,73.513,0 L290.858,331.72C311.167,310.342,311.167,275.662,290.858,254.258z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A"); background-size: 10px; background-repeat: no-repeat; background-position: center center; transition: transform 0.3s ease; transform: rotate(90deg); } @media (min-width: 720px) { .prodpagelinks li { flex-basis: auto; } } #prodReviews .container { display: flex; flex-wrap: wrap; position: relative; background-color: #fcfcfc; padding: 16px; } #prodReviews header { display: flex; width: 100%; justify-content: center; } #prodReviews .colRew { display: flex; justify-content: center; flex: 0 0 50%; max-width: 50%; } #divAllReviews { width: 100%; display: flex; flex-wrap: wrap;} #divAllReviews.collapsed { display: none; } #productReviewBtnMore { display: flex; align-items: center; justify-content: center; width: 100%; margin: 20px 0 0; } #productReviewBtn { display: flex; align-items: center; justify-content: center; width: 100%; margin: 20px 0; } #jsRevWritecontainer { width: 100%; display: flex; flex-wrap: wrap; padding: 20px; } #jsRevWritecontainer.collapsed { display: none; } #jsRevWritecontainer header { display: flex; width: 100%; justify-content: center; } #jsRevWritecontainer .formRow input[type="text"], #jsRevWritecontainer textarea { width: 100%; } @media (min-width: 720px) { #prodReviews .colRew { flex: 0 0 25%; max-width: 25%; } #jsRevWritecontainer form { width: 100%; max-width: 600px; margin: 0 auto !important; } } #jsRatingsBtn { display: flex; align-items: center; justify-content: center; width: 100%; margin: 20px 0; } #jsRatingsBtn ul { display: inline; } #jsRatingsBtn span { font-size: .8em; color: #7f7f7f; display: none; } .productReviewWrite { background-color: #f7f7f7; margin-top: 5px !important; } #prodReviews .innerFill{ background-color: transparent; border: none; padding: 0; } #footerReviews { background-color: transparent; } #prodReviews .lRev, #footerReviews .lRev { text-align: center; } #prodReviews .lRevName, #footerReviews .lRevName { font-weight: 600; height: 20px; overflow: hidden; margin-top: 10px; } #prodReviews .lRevGrade, #footerReviews .lRevGrade { font-size: .8em; margin: 10px 0 0; } #prodReviews .lRevText, #footerReviews .lRevText { font-size: 0.9em; line-height: 1.3em; position: relative; padding: 10px 20px; } #prodReviews .lRevDate, #footerReviews .lRevDate { display: none; font-size: .7em; color: #666; } #footerReviews .lRevDate { display: block; } #divTellAFriend { background-color: #f7f7f7; } .reviewGroup { font-size: 0; unicode-bidi: bidi-override; direction: rtl; } .reviewGroup * { font-size: 1.7rem; } .reviewGroup > input { display: none; } .reviewGroup > input + label { display:-moz-inline-stack; display:inline-block; *display:inline; overflow: hidden; text-indent: 9999px; width: .9em; white-space: nowrap; cursor: pointer; } .reviewGroup > input + label:before { display:-moz-inline-stack; display:inline-block; *display:inline; text-indent: -9999px; content: "\2606"; color: #888; } .reviewGroup > input:checked ~ label:before, .reviewGroup > input + label:hover ~ label:before, .reviewGroup > input + label:hover:before { content: "\2605"; color: #f9d100; } .reviewGroup > .star-cb-clear + label { text-indent: -9999px; width: .5em; margin-left: -.5em; } .reviewGroup > .star-cb-clear + label:before { width: .5em; } .reviewGroup:hover > input + label:before { content: "\2606"; color: #888; text-shadow: none; } .reviewGroup:hover > input + label:hover ~ label:before, .reviewGroup:hover > input + label:hover:before { content: "\2605"; color: #f9d100; } .rating li { display:-moz-inline-stack; display:inline-block; *display:inline; position: relative; width: .9em; color: #ccc; font-size: 1.6em; line-height: .9em; vertical-align: bottom; } .rating.grade-1 li:nth-child(-n+1){ color: #f9d100; } .rating.grade-2 li:nth-child(-n+2){ color: #f9d100; } .rating.grade-3 li:nth-child(-n+3){ color: #f9d100; } .rating.grade-4 li:nth-child(-n+4){ color: #f9d100; } .rating.grade-5 li:nth-child(-n+5){ color: #f9d100; } /* Contact/FAQ-page */ #contactForm label { font-weight: normal; } #toggleFaq {} .divQuestions .faqHeader { font-size: 0.85em; } .divQuestions .faqQuestionFold { font-size: 0.88em; } .divQuestions li { margin-bottom: 4px; list-style: none; } #faqWrapper h3 { font-weight: normal; border-bottom: medium none; margin-bottom: 0; padding: 0 0 5px; margin-left: 13px; } #faqWrapper h3 a { font-weight: normal; position: relative; display: block; } #faqWrapper h3 a:before { color: #117d0a; content: "+"; /* \203A */ font-size: 18px; left: -14px; position: absolute; top: -2px; font-weight: 600; } .faqQuestionFold { background: #f2f2f2 none repeat scroll 0 0; margin-bottom: 10px; margin-top: 8px; padding: 5px 10px; position: relative; } .faqQuestionFold:after, .faqQuestionFold:before { bottom: 100%; left: 5%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .faqQuestionFold:after { border-color: rgba(247, 247, 247, 0); border-bottom-color: #f1f1f1; border-width: 10px; margin-left: -10px; } #faqSubHeader { font-weight: 600; padding-top: 10px; } .toggleFaqDiv { margin-top: 5px; } /* Popup - Notify */ #notifyPopup { display: none; position:fixed; background-color: #ffffff; padding:10px; top: 50%; transform: translateY(-50%); right: 0; left: 0; margin-right: auto; margin-left: auto; min-height: 10em; width: 40%; max-width: 600px; min-width: 300px; max-height: 50%; overflow-y: auto; overflow-x: hidden; } #notifyPopupPane { margin:15px; padding-bottom: 8px; } #notifyPopupPane em { font-weight:600; font-style:normal; display:block; text-transform: uppercase; } #notifyPopupPane p { margin-top:10px; } #notifyPopupPane #notifyEmail { display: block; height: 38px; margin: auto; width: 100%; padding: 5px; margin-top: 5px; } #notifyPopupPane #notifyPopupPaneButtonBar { margin:auto; margin-top:20px; text-align: center; } #notifyPopupPane #notifyPopupPaneButtonBar input { margin-left:3px; margin-right:3px; } #notifyPopupPane #notifyPopupOk { padding: 0 20px; } /* ajaxPopupWindow */ #ajaxPopupWindow { display: none; position:fixed; background-color: #ffffff; padding:10px; top: 50%; transform: translateY(-50%); right: 0; left: 0; margin-right: auto; margin-left: auto; min-height: 10em; width: 40%; max-width: 600px; min-width: 300px; max-height: 50%; overflow-y: auto; overflow-x: hidden; } #ajaxPopupClose { background-color: #fff; height: 30px; line-height: 30px; position: absolute; right: 2px; text-align: center; top: 2px; width: 30px; z-index: 10000; cursor: pointer; } #ajaxPopupClose:hover:after, #ajaxPopupClose:focus:after{ color: #000; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } #ajaxPopupClose:after { color: #767676; content: "x"; font-size: 1.2em; height: 100%; left: 0; line-height: 30px; position: absolute; top: -1px; transition: all 200ms ease 0s; width: 100%; cursor: pointer; } .ajaxPopupHeader { font-weight: 600; margin-bottom: 5px; margin-top: 5px; text-align: center; text-transform: uppercase; } .ajaxPopupContent { padding:5px; } .ajaxPopupContent p:first-child { padding:0; margin:0; } /* ajaxPopupWindow */ #ajaxPopupNotify { display: none; position:fixed; background-color: #ffffff; padding:10px; top: 50%; transform: translateY(-50%); right: 0; left: 0; margin-right: auto; margin-left: auto; min-height: 10em; width: 40%; max-width: 600px; min-width: 300px; max-height: 50%; overflow-y: auto; overflow-x: hidden; } .button { background-color: #eee; background-repeat: repeat-x; background-size: 100% auto; border-color: #C8C8C8 #C8C8C8 #BBBBBB; border-style: solid; color: #fff !important; cursor: pointer; display:-moz-inline-stack; display:inline-block; *display:inline; line-height: 24px; padding: 6px 10px; text-align: center; text-decoration: none; vertical-align: middle; text-shadow: none; border: 0; -webkit-appearance: none; outline:none; position: relative; border-radius: 4px; z-index: 2; transition: all 200ms ease 0s; } .button:focus-visible { outline: 1px solid #000; } .button:active { outline: none; -moz-user-select: none; transform: translateY(2px); } .button.bigBuy { padding: 10px 20px !important; font-weight: 500; font-size: 1.1em; width: 100%; height: 45px; position: relative; overflow: hidden; letter-spacing: .03em; } .button.button-confirm.buybutton, .button.button-confirm.selectlink { padding: 12px 25px !important; font-weight: 500; font-size: 1.1em; position: relative; overflow: hidden; letter-spacing: .03em; } .button.button-confirm.jsAddOk:after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='405' height='405' viewBox='0 0 405.3 405.3'%3E%3Cpath d='M393.4 124.4L179.6 338.2c-15.8 15.8-41.5 15.8-57.4 0L11.9 227.8c-15.8-15.8-15.8-41.5 0-57.4 15.8-15.8 41.5-15.8 57.4 0l81.7 81.7L336 67.1c15.8-15.8 41.5-15.8 57.4 0C409.2 82.9 409.2 108.6 393.4 124.4z' stroke='white' fill='white'%3E%3C/path%3E%3C/svg%3E"); content: ""; position: absolute; top: 0; transition: all 200ms ease 0s; width: 100%; left: 0; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: 25px; } .button.button-confirm.bigBuy.jsAddOk:after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='405' height='405' viewBox='0 0 405.3 405.3'%3E%3Cpath d='M393.4 124.4L179.6 338.2c-15.8 15.8-41.5 15.8-57.4 0L11.9 227.8c-15.8-15.8-15.8-41.5 0-57.4 15.8-15.8 41.5-15.8 57.4 0l81.7 81.7L336 67.1c15.8-15.8 41.5-15.8 57.4 0C409.2 82.9 409.2 108.6 393.4 124.4z' stroke='white' fill='white'%3E%3C/path%3E%3C/svg%3E"); content: ""; position: absolute; transition: all 200ms ease 0s; width: 100%; left: 0; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: 25px; } .button.button-confirm.jsAddFail:after { background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='123.05px' height='123.05px' viewBox='0 0 123.05 123.05' style='enable-background:new 0 0 123.05 123.05;' xml:space='preserve'%3E%3Cg%3E%3Cpath fill='white' stroke='white' d='M121.325,10.925l-8.5-8.399c-2.3-2.3-6.1-2.3-8.5,0l-42.4,42.399L18.726,1.726c-2.301-2.301-6.101-2.301-8.5,0l-8.5,8.5 c-2.301,2.3-2.301,6.1,0,8.5l43.1,43.1l-42.3,42.5c-2.3,2.3-2.3,6.1,0,8.5l8.5,8.5c2.3,2.3,6.1,2.3,8.5,0l42.399-42.4l42.4,42.4 c2.3,2.3,6.1,2.3,8.5,0l8.5-8.5c2.3-2.3,2.3-6.1,0-8.5l-42.5-42.4l42.4-42.399C123.625,17.125,123.625,13.325,121.325,10.925z'/%3E%3C/g%3E%3C/svg%3E"); background-color: #cc4c3f; color: #fff; content: " "; font-size: 1em; height: 100%; left: 0; line-height: 37px; position: absolute; top: 0; transition: all 200ms ease 0s; width: 100%; border-radius: 4px; background-repeat: no-repeat; background-position: center center; background-size: 25px; } .button.jsAddOk, .button.jsAddFail, .button.jsAddOk:hover, .button.jsAddFail:hover { color: transparent !important; } .button.jsAddOk { color: transparent; transition: all 200ms ease 0s; } .button.button-confirm.bigBuy.jsAddFail:after { line-height: 48px; } .button.big { padding: 15px 20px !important; font-weight: 500; font-size: 1.3em; } .button:hover, .button:focus { background-color: #333333; color: #ffffff !important; background-position: 0 -15px; outline-offset: -6px; text-decoration: none; transition: background-position 0.1s linear 0s; } .button.button-disabled, .button:disabled { background-color: #EEEEEE; border-color: #E1E1E1; background: none repeat scroll 0 center transparent; box-shadow: none; cursor: default; font-style: italic; text-shadow: none; } input.button-confirm, button.button-confirm, a.button-confirm { background-size: 100% auto; border-color: #165b16 #165b16 #165b16; color: #fff !important; font-weight: 600; background-color: #2a8d4d; font-size: 1em; } input.button-confirm:hover, input.button-confirm:focus, button.button-confirm:hover, button.button-confirm:focus, a.button-confirm:hover, a.button-confirm:focus { background-color: #19773a; } input.button-confirm:focus::-moz-focus-inner, input.button-confirm:active::-moz-focus-inner, button.button-confirm:focus::-moz-focus-inner, button.button-confirm:active::-moz-focus-inner, a.button-confirm:focus::-moz-focus-inner, a.button-confirm:active::-moz-focus-inner{ border-color: white; } input.button-confirm.button-disabled, input.button-confirm:disabled, button.button-confirm.button-disabled, button.button-confirm:disabled, a.button-confirm.button-disabled, a.button-confirm:disabled { background-color: #f1630e; border-color: #165b16; } input.button-confirm-black, button.button-confirm-black, a.button-confirm-black{ background-size: 100% auto; font-weight: 600; background-color: gray; font-size: 1em; } input.button-confirm-black:hover, input.button-confirm-black:focus, button.button-confirm-black:hover, button.button-confirm-black:focus, a.button-confirm-black:hover, a.button-confirm-black:focus { background-color: #787878; } input.button-confirm-black:focus::-moz-focus-inner, input.button-confirm-black:active::-moz-focus-inner, button.button-confirm-black:focus::-moz-focus-inner, button.button-confirm-black:active::-moz-focus-inner, a.button-confirm-black:focus::-moz-focus-inner, a.button-confirm-black:active::-moz-focus-inner{ border-color: white; } input.button-confirm-black.button-disabled, input.button-confirm-black:disabled, button.button-confirm-black.button-disabled, button.button-confirm-black:disabled, a.button-confirm-black.button-disabled, a.button-confirm-black:disabled { background-color: #f1630e; border-color: #000; } .paging:last-of-type { margin: 20px 0; } .paging .paging-list { display: flex; justify-content: center; align-items: center; margin-top: 20px; } .paging .paging-list ul { display: flex; align-items: center; } .paging .paging-list li { margin-left: .7em; } .paging .paging-list li:first-child { margin-left: 0; } .paging .paging-list li a { background-color: #117d0a; border-radius: 100%; color: #fff; display: flex; height: 35px; line-height: 35px; text-align: center; width: 35px; transition: all 400ms ease 0s; justify-content: center; align-items: center; } .paging .paging-list li a:hover, .paging .paging-list li a:focus { color: #fff; background-color: #a11c15; } .paging .paging-list li.active a[aria-current = "true"] { background-color: #ccc; color: #000; } .paging .paging-list li.pagerPrev svg { width: 15px; height: 15px; fill: #fff; } .paging .paging-list li.pagerNext svg { width: 15px; height: 15px; fill: #fff; transform: rotate(180deg);} #paging-count { font-size: .8em; text-align: center; color:#000; margin: 10px 0; } @media (min-width: 720px) { .paging .paging-list { justify-content: flex-end; margin-top: 0;} } /* Search page */ span.highlight { color: #1387a9; } .search-related { margin: 30px 0; background-color: #fff; padding: 10px; font-size: .9em;} .search-related h4 { margin-bottom: 10px; } .search-related ul { display: flex; gap: 20px; } .search-related ul li { display: inline-flex; } .search-related ul li a { background-color: #8d8d8d; padding: 10px 15px; border-radius: 30px; color: #fff; transition: background-color .3s; } .search-related ul li a:hover, .search-related ul li a:focus { background-color: #000; } /* Search suggest */ div.suggest { font-size:12px; padding:6px; border-top:1px solid #e4e4e4; background: #fff; margin:0; clear:both; height:auto; overflow:auto; } div.suggest:first-child { border-top: 0; } div.suggest:last-child { border-bottom:none; } div.suggest em { float: right; font-size: 12px; } div.suggest div.image { display:block; padding-right:4px; width:10%; float:left; text-align:center; } div.suggest div.data { display:block; margin-right:4px; width:85%; float:left; } div.suggest div.data a { display: block; } div.suggest:hover { background-color: #ecfdff; border-top: 1px solid #cee7ea; } p.empty { margin:0; padding:3px; background: rgba( 233,241,17,0.87 ); } .typeahead, .tt-query, .tt-hint { width: 396px; height: 30px; padding: 8px 12px; line-height: 30px; border: 2px solid #ccc; border-radius: 2px; outline: none; } .tt-hint { display: none; } .typeahead { background-color: #fff; } .typeahead:focus { border: 2px solid #20659f; } .tt-menu { /*width:229px !important;*/ width: 100%; border:1px solid #cccccc; text-align: left; } p.fullsearch { background:#fff; padding:5px; margin:0; font-size: 12px; } p.suggestHead { background:#363636; color: #fff; padding:5px; margin:0; font-size: 12px; font-weight:300; text-align:left; } .suggest.tt-suggestion.tt-selectable > a { display: block; width: 100%; } /* Target: 480- */ @media only screen and (max-width : 480px) { input, select, textarea { border: 1px solid #ccc; font-family: inherit; font-size: 16px; } } /* Print */ @media print { .divToPrint { page-break-after: always; } .noPrint { display: none !important; } #wrapper { margin-top: 0 !important; } #topMenu { display: none !important; } #prodDesc {page-break-before: always; } .assoc, .anchorLink { display: none !important; } .productBuy { display: none !important; } #sticky-buy { display: none !important; } #jsBuyBtn { display: none !important; } .swiper-pagination { display: none !important; } .swiper-button-next { display: none !important; } .swiper-button-prev { display: none !important; } .col1 { display: none !important; } * { box-shadow: none !important; } .helpttext { display: none !important; } #productInfoConditions { display: none !important; } #printIcon { display: none !important; } #breadcrumbs { display: none !important; } #prodRelCat { display: none !important; } #prodAssoc { display: none !important; } #prodOthers { display: none !important; } #prodSimilars { display: none !important; } #footer { display: none !important; } #backbutton { display: none !important; } #btnToggleTable { display: none !important; } #leasing-preview-widget { display: none !important; } #d9h8mo1ih1go1f8pq9bu6 { display: none !important; } body.stickyheader #topBar:after { display: none !important; } table, img, svg { /*break-inside: avoid;*/ } body.stickyheader #topBar { /*display: none !important;*/ position: relative; width: 100%; z-index: 11; min-height: 0 !important; transform: translateY(0); } table.resp.zebra tr td div { max-height: 100px !important; opacity: 1 !important; padding: 8px !important; } } /* BASE */ *, *:after, *:before { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* ajaxPopupWindow */ #ajaxPopupWindow { display: none; position:fixed; background-color: #fff; padding:10px; top: 50%; transform: translateY(-50%); right: 0; left: 0; margin-right: auto; margin-left: auto; min-height: 10em; width: 90%; max-width: 700px; min-width: 300px; max-height: 50%; overflow-y: auto; overflow-x: hidden; } #ajaxPopupClose { border: 1px solid #dbdbdb; background-color: #fff; border-radius: 100%; height: 30px; line-height: 30px; position: absolute; right: 2px; text-align: center; top: 2px; width: 30px; z-index: 10000; cursor: pointer; } #ajaxPopupClose:hover:after, #ajaxPopupClose:focus:after{ color: #000; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } #ajaxPopupClose:after { color: #767676; content: ""; font-size: 1.2em; height: 100%; left: 0; line-height: 27px; position: absolute; top: 0; transition: all 200ms ease 0s; -webkit-transition: all 200ms ease 0s; width: 100%; cursor: pointer; background-size: 15px; background-position: center center; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 492 492' style='enable-background:new 0 0 492 492;' xml:space='preserve'%3E%3Cg%3E%3Cg%3E%3Cpath d='M300.188,246L484.14,62.04c5.06-5.064,7.852-11.82,7.86-19.024c0-7.208-2.792-13.972-7.86-19.028L468.02,7.872 c-5.068-5.076-11.824-7.856-19.036-7.856c-7.2,0-13.956,2.78-19.024,7.856L246.008,191.82L62.048,7.872 c-5.06-5.076-11.82-7.856-19.028-7.856c-7.2,0-13.96,2.78-19.02,7.856L7.872,23.988c-10.496,10.496-10.496,27.568,0,38.052 L191.828,246L7.872,429.952c-5.064,5.072-7.852,11.828-7.852,19.032c0,7.204,2.788,13.96,7.852,19.028l16.124,16.116 c5.06,5.072,11.824,7.856,19.02,7.856c7.208,0,13.968-2.784,19.028-7.856l183.96-183.952l183.952,183.952 c5.068,5.072,11.824,7.856,19.024,7.856h0.008c7.204,0,13.96-2.784,19.028-7.856l16.12-16.116 c5.06-5.064,7.852-11.824,7.852-19.028c0-7.204-2.792-13.96-7.852-19.028L300.188,246z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A"); } .ajaxPopupHeader { font-weight: 700; margin-bottom: 5px; margin-top: 5px; text-align: center; text-transform: uppercase; } .ajaxPopupContent { padding:5px; overflow: auto; } .ajaxPopupContent table { width: 100% !important; } .ajaxPopupContent td, .ajaxPopupContent th { padding: 5px; font-size: .9em; } /*! nouislider - 14.6.3 - 11/19/2020 */ /* Functional styling; * These styles are required for noUiSlider to function. * You don't need to change these rules to apply your design. https://cdnjs.com/libraries/noUiSlider */ .slider-area { display: flex; align-items: end; margin-top: 8px; justify-content: center; } input.sliderFirst, input.sliderSecond { width: 60px; border-radius: 18px; padding: 2px 9px; font-size: 12px; margin-right: 11px; background-color: #f7f7f7; color: #787878; } input.sliderSecond { margin-left: 11px; margin-right: 0; } input.sliderFirst:focus, input.sliderSecond:focus { padding: 2px 9px; box-shadow: none; margin:0 11px 0 0; background-color: #fff; color: #000; } input.sliderSecond:focus { margin:0 0 0 11px; } input.sliderFirst::-webkit-outer-spin-button, input.sliderFirst::-webkit-inner-spin-button, input.sliderSecond::-webkit-outer-spin-button, input.sliderSecond::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; } input.sliderFirst[type=number], input.sliderSecond[type=number]{ -moz-appearance: textfield; } .slider { flex: 1; margin: 0 10px; } .noUi-target, .noUi-target * { -webkit-touch-callout: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-select: none; -ms-touch-action: none; touch-action: none; -ms-user-select: none; -moz-user-select: none; user-select: none; -moz-box-sizing: border-box; box-sizing: border-box; } .noUi-target { position: relative; } .noUi-base, .noUi-connects { width: 100%; height: 100%; position: relative; z-index: 1; } /* Wrapper for all connect elements. */ .noUi-connects { overflow: hidden; z-index: 0; } .noUi-connect, .noUi-origin { will-change: transform; position: absolute; z-index: 1; top: 0; right: 0; -ms-transform-origin: 0 0; -webkit-transform-origin: 0 0; -webkit-transform-style: preserve-3d; transform-origin: 0 0; transform-style: flat; } .noUi-connect { height: 100%; width: 100%; } .noUi-origin { height: 10%; width: 10%; } /* Offset direction */ .noUi-txt-dir-rtl.noUi-horizontal .noUi-origin { left: 0; right: auto; } /* Give origins 0 height/width so they don't interfere with clicking the connect elements. */ .noUi-vertical .noUi-origin { width: 0; } .noUi-horizontal .noUi-origin { height: 0; } .noUi-handle { -webkit-backface-visibility: hidden; backface-visibility: hidden; position: absolute; } .noUi-touch-area { height: 100%; width: 100%; } .noUi-handle:focus { outline: none; /*background-color: #159b57;*/ background-color: #000; } .noUi-state-tap .noUi-connect, .noUi-state-tap .noUi-origin { -webkit-transition: transform 0.3s; transition: transform 0.3s; } .noUi-state-drag * { cursor: inherit !important; } /* Slider size and handle placement; */ .noUi-horizontal { height: 10px; } .noUi-horizontal .noUi-handle { width: 24px; height: 24px; right: -12px; top: -8px; border-radius: 100%; } .noUi-vertical { width: 18px; } .noUi-vertical .noUi-handle { width: 28px; height: 34px; right: -6px; top: -17px; } .noUi-txt-dir-rtl.noUi-horizontal .noUi-handle { left: -17px; right: auto; } /* Styling; Giving the connect element a border radius causes issues with using transform: scale */ .noUi-target { background: #dbdbdb; border-radius: 4px; } .noUi-connects { border-radius: 3px; } .noUi-connect { /*background: #1fbb6c;*/ background: #10b1e0; } /* Handles and cursors; */ .noUi-draggable { cursor: ew-resize; } .noUi-vertical .noUi-draggable { cursor: ns-resize; } .noUi-handle { /*border: 1px solid #159b57;*/ border-radius: 3px; /*background: #5b5b5b;*/ background: #595959; cursor: pointer; /*box-shadow: 0 0 7px rgb(0 0 0 / 30%);*/ } .noUi-active { /*box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB;*/ /*background-color: #159b57;*/ background: #000; } .noUi-handle:before, .noUi-handle:after { content: ""; display: block; position: absolute; height: 10px; width: 1px; background: #000; left: 10px; top: 7px; } .noUi-handle:after { left: 14px; } /* .noUi-handle:before { content: ""; display: block; position: absolute; height: 10px; width: 10px; background: #159b57; left: 8px; top: 8px; border-radius: 100%; } .noUi-vertical .noUi-handle:before, .noUi-vertical .noUi-handle:after { width: 14px; height: 1px; left: 6px; top: 14px; } .noUi-vertical .noUi-handle:after { top: 17px; } */ /* Disabled state; */ [disabled] .noUi-connect { background: #B8B8B8; } [disabled].noUi-target, [disabled].noUi-handle, [disabled] .noUi-handle { cursor: not-allowed; } /* Base; */ .noUi-pips, .noUi-pips * { -moz-box-sizing: border-box; box-sizing: border-box; } .noUi-pips { position: absolute; color: #999; } /* Values; */ .noUi-value { position: absolute; white-space: nowrap; text-align: center; font-size: 9px; top: 12px; } .noUi-value-sub { color: #ccc; font-size: 10px; } /* Markings; */ .noUi-marker { position: absolute; background: #CCC; } .noUi-marker-sub { background: #AAA; } .noUi-marker-large { background: #AAA; } /* Horizontal layout; */ .noUi-pips-horizontal { padding: 10px 0; height: 20px; top: 78%; left: 0; width: 100%; } .noUi-value-horizontal { -webkit-transform: translate(-50%, 50%); transform: translate(-50%, 50%); } .noUi-rtl .noUi-value-horizontal { -webkit-transform: translate(50%, 50%); transform: translate(50%, 50%); } .noUi-marker-horizontal.noUi-marker { margin-left: -1px; width: 1px; height: 5px; } .noUi-marker-horizontal.noUi-marker-sub { height: 10px; } .noUi-marker-horizontal.noUi-marker-large { height: 8px; } /* Vertical layout; */ .noUi-pips-vertical { padding: 0 10px; height: 100%; top: 0; left: 100%; } .noUi-value-vertical { -webkit-transform: translate(0, -50%); transform: translate(0, -50%); padding-left: 25px; } .noUi-rtl .noUi-value-vertical { -webkit-transform: translate(0, 50%); transform: translate(0, 50%); } .noUi-marker-vertical.noUi-marker { width: 5px; height: 2px; margin-top: -1px;} .noUi-marker-vertical.noUi-marker-sub { width: 10px; } .noUi-marker-vertical.noUi-marker-large { width: 15px; } .noUi-tooltip { display: block; position: absolute; border: 1px solid #D9D9D9; border-radius: 3px; background: #fff; color: #000; padding: 5px; text-align: center; white-space: nowrap; font-size: 10px; } .noUi-horizontal .noUi-tooltip { -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); left: 50%; bottom: 120%; } .noUi-vertical .noUi-tooltip { -webkit-transform: translate(0, -50%); transform: translate(0, -50%); top: 50%; right: 120%; } .noUi-horizontal .noUi-origin > .noUi-tooltip { -webkit-transform: translate(50%, 0); transform: translate(50%, 0); left: auto; bottom: 10px; } .noUi-vertical .noUi-origin > .noUi-tooltip { -webkit-transform: translate(0, -18px); transform: translate(0, -18px); top: auto; right: 28px; } .slider.noUi-state-tap .noUi-connect, .slider.noUi-state-tap .noUi-origin { -webkit-transition: transform 700ms; transition: transform 700ms; } .noUi-pips .noUi-value-large { color: #b9b9b9; } /** * Swiper 6.5.8 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2021 Vladimir Kharlampidi * * Released under the MIT License * * Released on: April 23, 2021 */ @font-face { font-family: 'swiper-icons'; src: url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA') format('woff'); font-weight: 400; font-style: normal; } :root { --swiper-theme-color: #565656; } .swiper-container { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; /* Fix of Webkit flickering */ z-index: 1; } .swiper-container-vertical > .swiper-wrapper { flex-direction: column; } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; box-sizing: content-box; } .swiper-container-android .swiper-slide, .swiper-wrapper { transform: translate3d(0px, 0, 0); } .swiper-container-multirow > .swiper-wrapper { flex-wrap: wrap; } .swiper-container-multirow-column > .swiper-wrapper { flex-wrap: wrap; flex-direction: column; } .swiper-container-free-mode > .swiper-wrapper { transition-timing-function: ease-out; margin: 0 auto; } .swiper-container-pointer-events { touch-action: pan-y; } .swiper-container-pointer-events.swiper-container-vertical { touch-action: pan-x; } .swiper-slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: transform; } .swiper-slide figure { display: flex; height: 100%; } .swiper-slide-invisible-blank { visibility: hidden; } .swiper-container-autoheight, .swiper-container-autoheight .swiper-slide { height: auto; } .swiper-container-autoheight .swiper-wrapper { align-items: flex-start; transition-property: transform, height; } .swiper-container-3d { perspective: 1200px; } .swiper-container-3d .swiper-wrapper, .swiper-container-3d .swiper-slide, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-cube-shadow { transform-style: preserve-3d; } .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-slide-shadow-bottom { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; } .swiper-container-3d .swiper-slide-shadow-left { background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-container-3d .swiper-slide-shadow-right { background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-container-3d .swiper-slide-shadow-top { background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-container-3d .swiper-slide-shadow-bottom { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-container-css-mode > .swiper-wrapper { overflow: auto; scrollbar-width: none; -ms-overflow-style: none; } .swiper-container-css-mode > .swiper-wrapper::-webkit-scrollbar { display: none; } .swiper-container-css-mode > .swiper-wrapper > .swiper-slide { scroll-snap-align: start start; } .swiper-container-horizontal.swiper-container-css-mode > .swiper-wrapper { scroll-snap-type: x mandatory; } .swiper-container-vertical.swiper-container-css-mode > .swiper-wrapper { scroll-snap-type: y mandatory; } :root { --swiper-navigation-size: 44px; /* --swiper-navigation-color: var(--swiper-theme-color); */ } .swiper-button-prev, .swiper-button-next { position: absolute; top: 50%; width: calc(var(--swiper-navigation-size) / 44 * 27); height: var(--swiper-navigation-size); margin-top: calc(0px - (var(--swiper-navigation-size) / 2)); z-index: 10; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--swiper-navigation-color, var(--swiper-theme-color)); } .swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled { opacity: 0.35; cursor: auto; pointer-events: none; } .swiper-button-prev:after, .swiper-button-next:after { font-family: swiper-icons; font-size: var(--swiper-navigation-size); text-transform: none !important; letter-spacing: 0; text-transform: none; font-variant: initial; line-height: 1; } .swiper-button-prev, .swiper-container-rtl .swiper-button-next { left: 10px; right: auto; } .swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after { content: 'prev'; } .swiper-button-next, .swiper-container-rtl .swiper-button-prev { right: 10px; left: auto; } .swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after { content: 'next'; } .swiper-button-prev.swiper-button-white, .swiper-button-next.swiper-button-white { --swiper-navigation-color: #ffffff; } .swiper-button-prev.swiper-button-black, .swiper-button-next.swiper-button-black { --swiper-navigation-color: #000000; } .swiper-button-lock { display: none; } :root { /* --swiper-pagination-color: var(--swiper-theme-color); */ } .swiper-pagination { position: absolute; text-align: center; transition: 300ms opacity; transform: translate3d(0, 0, 0); z-index: 10; } .swiper-pagination.swiper-pagination-hidden { opacity: 0; } .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets { bottom: 10px; left: 0; width: 100%; } .swiper-pagination-fraction { font-size: .9em;} .swiper-pagination-bullets-dynamic { overflow: hidden; font-size: 0; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transform: scale(0.33); position: relative; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { transform: scale(0.33); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { transform: scale(0.33); } .swiper-pagination-bullet { width: 8px; height: 8px; display: inline-block; border-radius: 50%; background: #000; opacity: 0.2; } button.swiper-pagination-bullet { border: none; margin: 0; padding: 0; box-shadow: none; -webkit-appearance: none; appearance: none; } .swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer; } .swiper-pagination-bullet-active { opacity: 1; background: var(--swiper-pagination-color, var(--swiper-theme-color)); } .swiper-container-vertical > .swiper-pagination-bullets { right: 10px; top: 50%; transform: translate3d(0px, -50%, 0); } .swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 6px 0; display: block; } .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { top: 50%; transform: translateY(-50%); width: 8px; } .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { display: inline-block; transition: 200ms transform, 200ms top; } .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 4px; } .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { left: 50%; transform: translateX(-50%); white-space: nowrap; } .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 200ms transform, 200ms left; } .swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 200ms transform, 200ms right; } .swiper-pagination-progressbar { background: rgba(0, 0, 0, 0.25); position: absolute; width: 100%; height: 2px; left: 0; bottom: 0; } .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: var(--swiper-pagination-color, var(--swiper-theme-color)); position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: scale(0); transform-origin: left top; } .swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { transform-origin: right top; } .swiper-container-horizontal > .swiper-pagination-progressbar, .swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { width: 100%; height: 4px; left: 0; top: auto; } .swiper-container-vertical > .swiper-pagination-progressbar, .swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { width: 4px; height: 100%; left: 0;top: 0; } .swiper-pagination-white { --swiper-pagination-color: #ffffff; } .swiper-pagination-black { --swiper-pagination-color: #000000; } .swiper-pagination-lock { display: none; } .swiper-scrollbar { border-radius: 10px; position: relative; -ms-touch-action: none; background: rgba(0, 0, 0, 0.1); } .swiper-container-horizontal > .swiper-scrollbar { position: absolute; left: 1%; bottom: 3px; z-index: 50; height: 5px; width: 98%; } .swiper-container-vertical > .swiper-scrollbar { position: absolute; right: 3px; top: 1%; z-index: 50; width: 5px; height: 98%; } .swiper-scrollbar-drag { height: 100%; width: 100%; position: relative; background: rgba(0, 0, 0, 0.5); border-radius: 10px; left: 0; top: 0; } .swiper-scrollbar-cursor-drag { cursor: move; } .swiper-scrollbar-lock { display: none; } .swiper-zoom-container { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; text-align: center; } .swiper-zoom-container > img, .swiper-zoom-container > svg, .swiper-zoom-container > canvas { max-width: 100%; max-height: 100%; object-fit: contain; } .swiper-slide-zoomed { cursor: move; } /* Preloader */ :root { /* --swiper-preloader-color: var(--swiper-theme-color); */ } .swiper-lazy-preloader { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; z-index: 10; transform-origin: 50%; animation: swiper-preloader-spin 1s infinite linear; box-sizing: border-box; border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color)); border-radius: 50%; border-top-color: transparent;} .swiper-lazy-preloader-white { --swiper-preloader-color: #fff;} .swiper-lazy-preloader-black { --swiper-preloader-color: #000; } .swiper-lazy:not(.swiper-lazy-loaded) { display: none; } /* Hide the empry image-icon, and alt text while loading image */ @keyframes swiper-preloader-spin { 100% { transform: rotate(360deg); } } /* a11y */ .swiper-container .swiper-notification { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; z-index: -1000; } .swiper-container-fade.swiper-container-free-mode .swiper-slide { transition-timing-function: ease-out; } .swiper-container-fade .swiper-slide { pointer-events: none; transition-property: opacity; } .swiper-container-fade .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-fade .swiper-slide-active, .swiper-container-fade .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-container-cube { overflow: visible; } .swiper-container-cube .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; visibility: hidden; transform-origin: 0 0; width: 100%; height: 100%;} .swiper-container-cube .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-cube.swiper-container-rtl .swiper-slide { transform-origin: 100% 0; } .swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-next, .swiper-container-cube .swiper-slide-prev, .swiper-container-cube .swiper-slide-next + .swiper-slide { pointer-events: auto; visibility: visible; } .swiper-container-cube .swiper-slide-shadow-top, .swiper-container-cube .swiper-slide-shadow-bottom, .swiper-container-cube .swiper-slide-shadow-left, .swiper-container-cube .swiper-slide-shadow-right { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .swiper-container-cube .swiper-cube-shadow { position: absolute; left: 0; bottom: 0px; width: 100%; height: 100%; opacity: 0.6; z-index: 0; } .swiper-container-cube .swiper-cube-shadow:before { content: ''; background: #000; position: absolute; left: 0; top: 0; bottom: 0; right: 0; filter: blur(50px); } .swiper-container-flip { overflow: visible; } .swiper-container-flip .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; } .swiper-container-flip .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-flip .swiper-slide-active, .swiper-container-flip .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-container-flip .swiper-slide-shadow-top, .swiper-container-flip .swiper-slide-shadow-bottom, .swiper-container-flip .swiper-slide-shadow-left, .swiper-container-flip .swiper-slide-shadow-right { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .swiper-slide .video-container { width: 100%; height: 0; position: relative; padding-bottom: 56.25%; top: 50%; transform: translateY(-50%); } .swiper-slide .video-container iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .gallery-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(85px, 1fr)); grid-gap: 5px; } .gallery-thumbs .swiper-slide { margin-right: 10px; width: 90px;} .gallery-thumbs .swiper-slide :last-child { margin-right: 0; } .gallery-thumbs .swiper-slide :first-child { margin-left: 0; } .gallery-thumbs .swiper-slide .mediawrapper:hover { border-color: #dddddd; } .gallery-thumbs .swiper-slide { display: flex; flex-direction: column; align-items: center; justify-content: center; } .gallery-thumbs .swiper-slide .mediawrapper { border: 1px solid #d3d3d3; background-color: #fff; padding: 15px; width: 90px; display: flex; align-items: center; justify-content: center; } .gallery-thumbs .swiper-slide img { max-height: 60px; } .gallery-thumbs .swiper-slide svg { max-height: 40px; } .gallery-thumbs .swiper-slide.swiper-slide-active .mediawrapper {border-color: #10b1e0; } .gallery-top { height: 100%; width: 100%; } .gallery-thumbs { height: 20%; box-sizing: border-box; padding: 10px 0; } .gallery-thumbs .swiper-slide { width: 20%; height: 100%; opacity: 0.4; } .gallery-thumbs .swiper-slide-active { opacity: 1; } .yt-player-inline { position: relative; width: 100%; border-radius: 7px; } .yt-player-inline iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .video-container { /*background-color: #f7f7f7; padding: .5em; border-radius: 10px;*/ margin-bottom: 1em; } .prodpagelinks a.ytInlineLink { border: 1px solid #FF0033; display: flex;align-items: center;font-size: .85em;padding: .25em .7em;border-radius: 20px;line-height: 0;background-color: #fff5f7;color: #000;} .prodpagelinks a.ytInlineLink:after { display: none; } .no_click_overlay { background-color: #fff; opacity: 0.4; pointer-events: none; position: relative; } .no_click_overlay:before { position: absolute; top: 200px; left: 50%; -webkit-animation: spiner .7s linear infinite; animation: spiner .7s linear infinite; border: 3px solid #ddd; border-top: 3px solid #42a5f5; border-radius: 50%; height: 80px; width: 80px; display: block; content: ' '; z-index: 22; } #basketItems.no_click_overlay:before { top: 5px; width: 30px; height: 30px; } @-webkit-keyframes spiner { to { border-top-color: #ec407a; -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spiner { to { border-top-color: #ec407a; -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .shakeit { animation: shakeshake 0.82s cubic-bezier(.36,.07,.19,.97) both; transform: translate3d(0, 0, 0); backface-visibility: hidden; perspective: 1000px; } @keyframes shakeshake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); } } /* ------------------ START CASHIER RELATED */ #qcPno.ok, input.ok { background-color: #b8ffa9; } #jsCashierForm { font-weight: 700; height: 70px; padding: 20px !important; background-color: #2a8d4d; margin: 20px 0 120px; font-size: 1.8em; } #qcTypeChoice { } #qcTypeChoice h3 { text-align: left; font-weight: bold; margin: 10px 0 0 0; padding: 5px 0; font-size: 1em; } .conditions { font-size: 1em; text-align: center; } #cashierChange, #cashierPage { max-width: 900px; margin: 0 auto; } #cashierChange h2, #cashierPage h2 { text-align: left; font-weight: normal; margin: 0; padding: 12px 0; font-size: 1.6em; } #cashierChange .cashierSection, #cashierPage .cashierSection{ margin-bottom: 35px; } #cashierCart { } #cashierCart .cashier-form table { white-space: nowrap; word-wrap: break-word; display: flex; flex-direction: column; flex-wrap: wrap; } #cashierCart .cashier-form table td { white-space: normal; text-overflow: ellipsis; padding: 5px; } #cashierCart .cashier-form table td:nth-child(2) { min-width: 140px; } #cashierCart .cashier-form table td a { display: flex; } #cashierCart .cashier-form table th { } #cashierCart .cashier-form table tr { display: flex; background-color: #fff; margin-bottom: 7px; padding: 5px; transition: box-shadow .3s; } #cashierCart .cashier-form table tr.summaryrow { margin-bottom: 0; justify-content: flex-end;} #cashierCart .cashier-form table tr.summaryrow.total .vatstate { font-size: .9em; padding: 5px 0; } #cashierCart .cashier-form table tr.summaryrow.total strong { font-size: 1.2em; } #cashierCart .cashier-form table tr.summaryrow.vat { color: #adadad; } #cashierCart .cashier-form table tr:hover { box-shadow: -1px 4px 7px #ccc; } #cashierCart .cashier-form table th.col1, #cashierCart .cashier-form table td.col1 { justify-content: center; display: flex; flex-basis: 20%; align-items: center; } #cashierCart .cashier-form table td.col2, #cashierCart .cashier-form table th.col2 { display: flex; flex: 1; flex-wrap: wrap; flex-basis: 40%; } #cashierCart .cashier-form table td.col3, #cashierCart .cashier-form table th.col3 { justify-content: flex-end; display: flex; flex: 1; font-weight: 600; font-size: .9em; } #cashierCart .cashier-form .name { flex: 1 0 100%; padding-right: 35px; margin-bottom: 20px; } #cashierCart .cashier-form .name .prodno { font-size: .7em; } #cashierCart .cashier-form .addon-service .name { margin-bottom: 0; } #cashierCart .cashier-form .addon-service h3 { padding: 0; } #cashierCart .cashier-form .mspec { font-weight: 100; margin: 4px 0; background-color: #f6f2e7; padding: 5px 10px; font-size: .7em; border-radius: 10px } #cashierCart .cashier-form table tr { display: flex; margin-bottom: 20px; border-bottom: 1px solid #e4e4e4; padding-bottom: 10px; } #cashierCart .cashier-form table tr.mountingRail { background-color: #fff; margin-top: -21px; padding-top: 14px; padding-right: 5px; padding-left: 110px; position: relative; outline: 3px solid white; outline-offset: -2px; border-bottom: 3px solid #ccc;} /*#miniCart .cashier-form table tr.mountingRail:after { bottom: 97%; left: 50%; border: solid transparent; content: ""; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(247, 247, 247, 0); border-bottom-color: #f7f7f7; border-width: 10px; margin-left: -10px; }*/ #cashierCart .cashier-form table tr.mountingRail td .mspec { /*background-color: transparent;*/ } #cashierCart .cashier-form table tr.mountingRail td.tableInfo { padding-right: 20px; } #cashierCart .cashier-form .name a:focus, #cashierCart .cashier-form .name a:hover { text-decoration: underline; } #cashierCart .cashier-form .unitPrice { flex: 0 0 100%; margin-bottom: 13px; } #cashierCart .cashier-form .cartQtyWrapper { justify-content: center; flex: 0 0 15%; display: flex; } #cashierCart .cashier-form .cartQtyWrapper .cartMinus, #cashierCart .cashier-form .cartQtyWrapper .cartPlus { width: 25px; align-items: center; justify-content: center; display: flex; height: 25px; } #cashierCart .cashier-form .cartQtyWrapper .cartMinus a, #cashierCart .cashier-form .cartQtyWrapper .cartPlus a { width: 100%; height: 100%; background-color: #fff; display: flex; align-items: center; justify-content: center; color: #777; /*border: 1px solid #ccc;*/ border-radius: 4px; font-size: 22px; } #cashierCart .cashier-form .cartQtyWrapper .cartPlus a { background-color: #4da96c; color: #fff; } #cashierCart .cashier-form .cartQtyWrapper .cartMinus a { background-color: #eb7676; color: #fff; } #cashierCart .cashier-form .cartQtyWrapper .cartQty { font-size: .9em; font-weight: 600; display: flex; align-items: center; justify-content: center; width: 68px; height: 25px; background-color: #f7f7f7; border-radius: 4px; margin: 0 10px; } #cashierCart .cashier-form a.cartPlus, #cashierCart .cashier-form a.cartMinus {display: flex; background-color: #10b1e0; border-radius: 100%; margin-right: 20px; width: 24px; height: 24px; align-items: center; justify-content: center; color: #fff; font-size: 22px; font-weight: 700; } #cashierCart .cashier-form a.cartPlus:hover, #cashierCart .cashier-form a.cartPlus:focus, #cashierCart .cashier-form a.cartMinus:hover, #cashierCart .cashier-form a.cartMinus:focus { background-color: #1498bf; } #cashierCart .cashier-form a.cartPlus:focus-visible, #cashierCart .cashier-form a.cartPlus:focus-visible {outline: 1px solid #000; } #cashierCart .cashier-form .toolbar { flex: 0 0 100%; display: flex; align-items: center; justify-content: space-between; /*margin-top: 20px;*/ } #cashierCart .cashier-form .toolbar .stockStatus { font-size: .8em; margin-right: 20px; } #cashierCart .cashier-form .toolbar .stockStatus .stockstatustext { font-weight: normal; } #cashierCart .cashier-form .toolbar .stockStatus .stockstatustext svg { width: 10px; height: 10px; } #cashierCart .cashier-form .toolbar .stockStatus .cartRemove { } #cashierCart .cashier-form .toolbar .cartRemove svg { width: 17px; height: 17px; } #cashierSummary { /*background-color: #f1ebe1; */ display: flex; align-items: center; justify-content: space-evenly; padding: 20px 0; font-weight: 600; margin: -15px 0 5px; font-size: 1.2em; } #cashierSummary h3 { padding: 0; } #cashierSummary h3 .vatinfo { font-size: .8em; color: #666; } #summaryCashier .sumbutton { display: flex; align-items: center; justify-content: center; } #btnShowSummaryCashier { border: 0; margin: 0 0 15px; background-color: #ccc; border-radius: 20px; padding: 5px 15px; cursor: pointer; transition: all .3s;} #btnShowSummaryCashier:hover, #btnShowSummaryCashier:focus { background-color: #4b4b4b; color: #fff; } #summaryCashierContent { max-height: 0; overflow: hidden; background-color: #fff; position: relative; margin-top: 10px; transition: max-height .3s; } #summaryCashierContent:after { bottom: 100%; left: 50%; border: solid transparent; content: ""; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(255, 255, 255, 0); border-bottom-color: #fff; border-width: 20px; margin-left: -20px; } #summaryCashierContent.open { max-height: 3000px; transition: max-height .3s; box-shadow: 1px -1px 6px 1px #ccc; padding: 15px; overflow: visible; margin-bottom: 25px;} #summaryCashierContent #cashierCart .cashier-form table tr:hover { box-shadow: none; } #summaryCashierContent #cashierCart .cashier-form .name { margin-bottom: 0;} #summaryCashierContent #cashierCart .cashier-form img {max-height: 20px; } #cashierCart .cashier-form table th.col1, #cashierCart .cashier-form table td.col1 { flex-basis: 10%; } @media (min-width: 720px) { #cashierCart .cashier-form table td.col2, #cashierCart .cashier-form table th.col2 { flex-basis: 60%; } #cashierCart .cashier-form table th.col3 { font-size: 1.1em; } #cashierCart .cashier-form .name { flex: 1 0 40%; padding-right: 35px; } #cashierCart .cashier-form .unitPrice { flex: 0 0 20%; margin-bottom: 0; } #cashierSummary { padding: 20px 20% 0; font-size: 1.5em; } } #qcDynamicCashier .couponwrapper, #qcDynamicCashier .commentwrapper { background-color: #f1ebe1; margin: 10px 0; padding: 8px 15px; } .jsToggleCouponContent, .jsToggleCommentContent { display: none; } .jsToggleComment, .jsToggleCoupon { cursor: pointer; display: block; padding: 4px 0; font-weight: normal; position: relative; } .jsToggleCoupon:after, .jsToggleComment:after { content: " "; width: 25px; height: 25px; font-size: 20px; font-weight: 600; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M325.6 79.4c-5.9-5.9-15.4-5.9-21.2 0l-139.4 139.4L25.6 79.4c-5.9-5.9-15.4-5.9-21.2 0 -5.9 5.9-5.9 15.4 0 21.2l150 150c2.8 2.8 6.6 4.4 10.6 4.4s7.8-1.6 10.6-4.4l150-150C331.5 94.7 331.5 85.3 325.6 79.4z'/%3E%3C/svg%3E%0A"); background-size: 15px; background-repeat: no-repeat; background-position: center center; transition: transform 0.3s ease; right: 0; display: inline-flex; position: absolute; top: 2px; pointer-events: none; } .jsToggleCoupon[aria-expanded="true"]:after, .jsToggleComment[aria-expanded="true"]:after{transform: rotate(-180deg);} #qcComment { width: 100%; } #coupon { height: 40px; border-radius: 2px; padding: 2px 4px; } #qcButton { display: flex; justify-content: flex-end; flex-basis: 100%; align-items: center; margin: 0 0 50px 0; } #qcButtonLink svg {width: 15px; height: 15px; fill: #fff; transition: opacity .3s; } #qcButtonLink.btnloader svg {opacity: 0; } #qcButtonBack { display: none; justify-content: flex-start; flex-basis: 100%; align-items: center; margin: 0; z-index: 3;} #qcButtonBackLink { padding: 10px !important; font-size: .9em; background-color: #767676; display: flex; align-items: center; } #qcButtonBackLink svg {width: 15px; height: 15px; margin-right: 10px; fill: #fff; transition: opacity .3s; transform: rotate(180deg); } #addressLookup { background-color: #efefef; padding: 10px; margin-bottom: 15px; } #loginContainer { background-color: #f1ebe1; padding: 10px; margin:15px 0 15px; } #loginContainer .loginQuestion button { font-family: Arial, sans-serif; font-weight: 700; border: 0; background-color: #10b1e0; padding: 10px 15px; border-radius: 20px; align-items: center; width: max-content; cursor: pointer; color: #fff; transition: background-color .3s ease-in; margin-bottom: 15px; } #loginContainer .loginQuestion button:hover, #loginContainer .loginQuestion button:focus { background-color: #1498bf; outline: none;} #loginContainer .loginQuestion button:focus-visible { outline: 1px solid #000;} #loginContainer .loginQuestion { display: flex; align-items: center; flex-direction: column; } #loginContainer .loginQuestion h3 { font-weight: 600; font-size: .9em; margin: 10px 0; } #loginContainer .loginQuestion p { font-size: .9em;} #loginContainer #loginForm { display: none; } #loginContainer #loginForm form { display: flex; justify-content: center; flex-wrap: wrap; } #loginContainer #loginForm form .formRow input { width: 100%; } #loginContainer #loginForm form .col1, #loginContainer #loginForm form .col2 { margin-top: 15px; flex-basis: 200px; } #loginContainer #loginForm form .col1 { margin-bottom: 0; } #loginContainer #loginForm form .col3 { flex-basis: 100%; align-items: center; margin-bottom: 0; } #loginContainer #loginForm form .col3 .button { width: 200px; margin-bottom: 17px; margin-top: -15px; } @media (min-width: 720px) { #loginContainer #loginForm form .col1 { margin-right: 40px; } } .qccashier-bonus { } .qcBonusLevels {} .qcBonusLevels ul {} .qcBonusLevels li {} .qcBonusLevels li:hover { background: #fff; } .qcBonusProduct { border-bottom: 1px dotted #e3e3e3; } .qcBonusProduct .f1 { } .qcBonusProduct .f1 img { display:block; margin:auto; } .qcBonusProduct .f2 {} .qcBonusProduct .f3 {} .qcBonusProduct .f3 select {} .qcBonusProduct .f4 { font-weight:600; } .qcBonusProduct .f5 { } .qcCartTbl .plus, .qcCartTbl .minus { display:-moz-inline-stack; display:inline-block; *display:inline; } #qcGiftWrapSelection { margin-top:10px; } #qcGiftWrapSelection ul { list-style: none; padding:0; margin:0; overflow:auto; height:auto; } #qcGiftWrapSelection li { margin:5px; display:block; float:left; height:140px; width:120px; padding:1px; border:1px solid #cccccc; background:#ffffff; cursor: pointer; position: relative; } #qcGiftWrapSelection li:hover { border: 1px solid #b2e5b2; } #qcGiftWrapSelection img { display:block; margin-left:auto; margin-right:auto; } #qcGiftWrapSelection li.active { border:1px solid #009900; } #qcGiftWrapSelection li.active:before { content: '\2713 '; padding-right: 5px; position: absolute; bottom: 2px; left: 10px; font-size: 120%; color: #009900; font-weight: 600; } #qcGiftWrapSelection li strong { display:block; margin-left:3px; margin-right:3px; margin-top:3px; text-align:center; clear:both; font-size:12px; height:14px; overflow:hidden; } #qcGiftWrapSelection li i { display:block; margin-left:3px; margin-right:3px; margin-top:3px; text-align:center; clear:both; font-style: normal; } .form-steps { display: flex; align-items: center; justify-content: center; padding: 15px 0 10px 0; } .form-steps:after { content: ""; display: table; clear: both; } .form-steps__item { padding: 0; position: relative; display: block; float: left; width: 25%; text-align: center; } .form-steps__item-content { display: inline-block; } .form-steps__item-icon { background: lightgray; color: #9c9c9c; border-radius: 100%; text-align: center; width: 40px; height: 40px; margin: 0 auto 4px auto; position: relative; font-size: 13px; font-weight: 700; z-index: 2; border: 2px solid; display: flex; align-items: center; justify-content: center; } .form-steps__item-text { font-size: 13px; color: #9c9c9c; font-weight: 500; } .form-steps__item-line { display: inline-block; height: 4px; width: 100%; background: #e4e4e4; float: left; position: absolute; left: -50%; top: 20px; z-index: 1; border: 1px solid #e4e4e4; } .form-steps__item--active .form-steps__item-icon { background: green; color: white; border-color: mediumseagreen; } .form-steps__item--active .form-steps__item-text { color: #575757; font-weight: 600; } .form-steps__item--active .form-steps__item-line, .form-steps__item--completed .form-steps__item-line { background: green; border: 2px solid mediumseagreen; } .form-steps__item--completed .form-steps__item-text { color: #4f5e77; } .form-steps__item--completed .form-steps__item-icon { background: green; background-image: url(data:image/svg+xml;base64,PHN2ZyBkYXRhLW5hbWU9IkxheWVyIDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDkuMTIgNyI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTkuMTIgMS4wNkw4LjA2IDAgMy4xOCA0Ljg4IDEuMDYgMi43NiAwIDMuODIgMy4xOCA3bDUuOTQtNS45NHoiLz48L3N2Zz4=); color: transparent; background-size: 10px; background-repeat: no-repeat; background-position: center center; width: 40px; height: 40px; line-height: 40px; border: 2px solid mediumseagreen; } @media only screen and (max-width: 720px) { .form-steps__item { width: 33%; } .form-steps__item-icon, .form-steps__item--completed .form-steps__item-icon { width: 30px; height: 30px; line-height: 30px; } .form-steps__item-line { top: 15px; } } @media (min-width: 720px) { #qcButtonBack { display: flex; } #topBar #qcButtonBack, #topBar #qcButtonBackLink { margin-right: -200px; } body.cashierrelated #topArea {display: none; } body.cashierrelated #topSearch {display: none; } body.cashierrelated #topContact {display: none; } body.cashierrelated #topLogo { justify-content: center; } body.cashierrelated #topMenu { display: none; } body.cashierrelated #topBar { height: 120px; min-height: auto; } body.cashierrelated #wrapper { margin-top: 135px; } body.cashierrelated #topBar:after { display: none; } body.cashierrelated #topBar > .container { max-width: 900px; margin: 0 auto; } } /* ------------------ END CASHIER RELATED */ .errorField { outline: 1px solid red; } .columnwrapper { display: flex; flex-wrap: wrap; } .columnwrapper .halfwidth { flex-basis: 100%; } @media (min-width: 720px) { .columnwrapper .halfwidth { flex-basis: 50%; } } .formWrapper { display: flex; flex-wrap: wrap; background-color: #f1ebe1; padding: 5px; flex-direction: column;} .formWrapper h4 { margin: 0 0 10px 0; padding: 15px 8px 15px 12px; background-color: #fbfbfb; font-weight: bold; } .formWrapper .contentHeadBefore { padding: 0 0 0 10px; } .formInner { flex: 1; flex-basis: 100%; background-color: #fff; padding: 25px; } .formInner .formRow input[type="text"], .formInner .formRow input[type="password"], .formInner textarea { width: 90%; } .formRow.double { display: flex; flex-direction: row; flex-wrap: wrap; } .formRow.double div { flex-basis: 100%; } @media (min-width: 720px) { .formRow.double div { flex-basis: 50%; } .formInner textarea { width: 27em; } } .requiredinfo { display: flex; align-items: center; flex-basis: 100%; margin: 10px; font-weight: bold; } .selectArea { display: flex; flex-wrap: wrap; background-color: #f1ebe1; padding: 5px; } .selectArea ul { flex: 0 0 100%; display: flex; flex-direction: column; flex-wrap: wrap; } .selectArea ul li { display: flex; flex: 1; align-items: center; background-color: #fff; flex: auto;; } .selectArea ul li label { display: flex; align-items: center; flex-basis: 100%; padding: 15px 0; cursor: pointer; } .selectArea ul li label .labelImage { margin-right: 0; margin-left: auto;} .selectArea ul li label img { max-width: 50px; max-height: 50px; margin-right: 10px;} .selectArea ul li:not(.active) label:hover{ background-color: #f7f7f7; } .selectArea ul li input[type="radio"] { margin:0 10px; } .selectArea ul li.active { background-color: #fff; } .selectArea ul li.active label { color: #000; } .selectArea .selectInfo {flex: 1; background-color: #d2cabd; padding: 7px; flex-basis: 100%; } .selectArea .selectInfo p { font-size: .9em; } .selectArea .selectInfo .infoImage { margin: 10px 0 20px; } .selectArea .selectInfo .infoImage img { max-height: 70px; } .selectArea.simple ul { flex: 0 0 100%; flex-direction: row; gap: 5px; } .selectArea.simple ul li { flex: 1 1 250px; } .selectArea [type="radio"]:checked, .selectArea [type="radio"]:not(:checked) { position: absolute; left: -9999px; } .selectArea [type="radio"]:checked + label, .selectArea [type="radio"]:not(:checked) + label { position: relative; padding-left: 35px; cursor: pointer; } .selectArea [type="radio"]:checked + label:before, .selectArea [type="radio"]:not(:checked) + label:before { content: ''; position: absolute; left: 7px;top: 50%; transform: translateY(-50%);width: 18px; height: 18px; border: 1px solid #ddd; border-radius: 100%; background: #fff; } .selectArea [type="radio"]:checked + label:after, .selectArea [type="radio"]:not(:checked) + label:after { content: ''; width: 10px; height: 10px; background-color: #10b1e0; position: absolute; top: 50%; left: 11px; border-radius: 100%; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } .selectArea [type="radio"]:not(:checked) + label:after { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } .selectArea [type="radio"]:checked + label:after { opacity: 1; -webkit-transform: scale(1) translateY(-50%); transform: scale(1) translateY(-50%); } .selectArea [type="radio"]:not(:checked) + label:hover:after { background-color: #ccc; opacity: .8; -webkit-transform: scale(1) translateY(-50%); transform: scale(1) translateY(-50%); } .selectArea [type="checkbox"]:checked, .selectArea [type="checkbox"]:not(:checked) { position: absolute; left: -9999px; } .selectArea [type="checkbox"]:checked + label, .selectArea [type="checkbox"]:not(:checked) + label { position: relative; padding-left: 35px; cursor: pointer; } .selectArea ul li [type="checkbox"]:checked + label, .selectArea [type="radio"]:checked + label { background-color: #d2cabd; border-top: 4px solid #10b1e0; } .selectArea [type="checkbox"]:checked + label:before, .selectArea [type="checkbox"]:not(:checked) + label:before { content: ''; position: absolute; left: 7px; top: 13px; width: 18px; height: 18px; border: 1px solid #ddd; border-radius: 100%; background: #fff; } .selectArea [type="checkbox"]:checked + label:after, .selectArea [type="checkbox"]:not(:checked) + label:after { content: ''; width: 10px; height: 10px; background-color: #10b1e0; position: absolute; top: 17px; left: 11px; border-radius: 100%; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } .selectArea [type="checkbox"]:not(:checked) + label:after { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } .selectArea [type="checkbox"]:checked + label:after { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } .selectArea [type="checkbox"]:not(:checked) + label:hover:after { background-color: #ccc; opacity: .8; -webkit-transform: scale(1); transform: scale(1); } .labelText { width: 100%; display: flex; justify-content: space-between; } .labelText .freightprice { font-weight: 600; padding-right: 14px; width: 100px; text-align: right; } @media (min-width: 720px) { .selectArea ul { /*flex: 0 0 300px;*/ flex: 0 0 100%; flex-flow: row; } } .qccashier-pay-info { background-color: #f7f4ee; height: 100%; display: flex; flex-direction: column; padding: 15px; } #qcNewsLetterToggle:before {top: 0;} #qcNewsLetterToggle:after {top: 4px;} .btnloader:after { content: ""; display: inline-block; margin-left: 5px; border-radius: 100%; right: 6px; top: 50%; width: 0; height: 0; margin-top: -2px; border: 2px solid rgba(255,255,255,0.5); border-left-color: #FFF; border-top-color: #FFF; animation: spin .6s infinite linear, grow .3s forwards ease-out; } @keyframes spin { to { transform: rotate(359deg); } } @keyframes grow { to { width: 14px; height: 14px; margin-top: 0; right: 13px; } } @media (min-width: 720px) { #mobilecheck { display: none; } .onlyBig {display: block !important; } .onlySmall {display: none !important; } #wrapper > .container {padding-top: 5px;} #jsRatingsBtn { text-align: left; } #jsRatingsBtn span { display: inline; } ul.checked.green li:before { color: #82b440; } ul.checked.green li { padding-left: 25px; color: #333; } } .navbar { position: relative; height: 60px; display: flex; align-items: center; justify-content: center; z-index: 100; } /* Top-level */ .navbar > .navbar-menu > li > a { display: flex; height: 100%; align-items: center; color:#fff; background: transparent; transition: background 0.25s linear, color 0.25s linear; } .navbar > .navbar-menu > li > a:hover, .navbar > .navbar-menu > li > a:focus { color: white; } .navbar > .navbar-menu > li > a[aria-expanded="true"] { background-color: hsl(116 85% 18% / 1); } .navbar > .navbar-menu > li > a[aria-expanded="true"]:after { top: 47px; left: 50%; border: solid transparent; content: ""; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(247, 247, 247, 0); border-bottom-color: #f7f7f7; border-width: 7px; margin-left: -7px; } /*.navbar > .navbar-menu > li > a[href^="https://solutions.kalls.se/"]:after { content: ""; width: 10px; height: 10px; background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve'%3E%3Cg%3E%3Cg%3E%3Cpath fill='#fff' stroke='#fff' d='M488.727,0H302.545c-12.853,0-23.273,10.42-23.273,23.273c0,12.853,10.42,23.273,23.273,23.273h129.997L192.999,286.09 c-9.087,9.087-9.087,23.823,0,32.912c4.543,4.543,10.499,6.816,16.455,6.816c5.956,0,11.913-2.273,16.455-6.817L465.455,79.458 v129.997c0,12.853,10.42,23.273,23.273,23.273c12.853,0,23.273-10.42,23.273-23.273V23.273C512,10.42,501.58,0,488.727,0z'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cpath fill='black' stroke='black' d='M395.636,232.727c-12.853,0-23.273,10.42-23.273,23.273v209.455H46.545V139.636H256c12.853,0,23.273-10.42,23.273-23.273 S268.853,93.091,256,93.091H23.273C10.42,93.091,0,103.511,0,116.364v372.364C0,501.58,10.42,512,23.273,512h372.364 c12.853,0,23.273-10.42,23.273-23.273V256C418.909,243.147,408.489,232.727,395.636,232.727z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A"); background-size: 10px; margin-left: 5px; margin-right: 10px;}*/ .navbar-menu { display: flex; align-items: center; /*justify-content: center;*/ justify-content: flex-start; width: 100%; height: 100%; } .navbar-menu a { display: block; padding: 0 25px; text-decoration: none; } .navbar-menu, .navbar-menu ul { margin: 0; padding: 0; list-style: none; } /* Nested */ .navbar-menu ul { position: absolute; top: 100%; visibility: hidden; opacity: 0; width: 100%; box-shadow: 0 0.25rem 1.5rem -8px #91919F; transition: visibility 0s linear 0.1s, opacity 0.1s linear; background-color: #f7f7f7; min-height: 300px; background: linear-gradient(90deg, #fff 250px, #f7f7f7 0%); max-width: 1500px; margin: 0 auto; left: 50%; transform: translateX(-50%); } .navbar-menu li { height: 100%; display: flex; align-items: center; } /* Top level in menu*/ .navbar > .navbar-menu > li.special { display: flex; } .navbar > .navbar-menu > li > a.other.brands {} .navbar > .navbar-menu > li > a.other.brands .menuName { order: 2; } .navbar > .navbar-menu > li > a.other.brands:hover, .navbar > .navbar-menu > li > a.other.brands:focus { background-color: #dadada; } .navbar > .navbar-menu > li > a.other.brands:after { content: ""; width: 70px; height: 35px; background-size: 28px; margin-left: 5px; margin-right: 15px; background-repeat: no-repeat; background-position: center; transition: all 0.25s linear; background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve'%3E%3Cg%3E%3Cg%3E%3Cpath d='M461.056,70.867V50.959C461.056,22.86,438.196,0,410.097,0H268.371c-13.613,0-26.409,5.301-36.034,14.927L31.899,215.366 c-9.626,9.625-14.927,22.422-14.927,36.034c0,13.612,5.301,26.409,14.927,36.034l20.367,20.367 c-0.863,3.744-1.32,7.609-1.32,11.545c0,13.612,5.301,26.409,14.927,36.034L207.596,497.1C217.53,507.033,230.58,512,243.629,512 c13.049,0,26.099-4.967,36.033-14.902l200.44-200.44c9.626-9.626,14.927-22.422,14.927-36.034v-141.72 C495.029,96.76,480.826,77.879,461.056,70.867z M55.921,263.411c-3.208-3.208-4.976-7.474-4.976-12.012 c0-4.538,1.768-8.802,4.976-12.012L256.36,38.948c3.209-3.207,7.474-4.975,12.012-4.975h141.724 c9.366,0,16.986,7.62,16.986,16.986v16.986H302.344c-13.613,0-26.409,5.301-36.034,14.927L70.848,278.336L55.921,263.411z M456.08,272.636l-200.44,200.44c-6.625,6.624-17.4,6.622-24.022,0L89.894,331.356c-3.208-3.208-4.976-7.474-4.976-12.012 c0-4.538,1.768-8.802,4.976-12.012l200.439-200.44c3.209-3.207,7.474-4.975,12.012-4.975h141.724 c9.366,0,16.986,7.62,16.986,16.986v141.72h0.001C461.056,265.161,459.288,269.427,456.08,272.636z'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cpath d='M376.124,135.891c-28.099,0-50.959,22.86-50.959,50.959s22.86,50.959,50.959,50.959s50.959-22.86,50.959-50.959 S404.223,135.891,376.124,135.891z M376.124,203.837c-9.366,0-16.986-7.62-16.986-16.986c0-9.366,7.62-16.986,16.986-16.986 c9.366,0,16.986,7.62,16.986,16.986C393.11,196.217,385.49,203.837,376.124,203.837z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A"); } .navbar-menu > li > a { font-size: 1em; } .navbar-menu li > a .menuImg { width: 40px; height: 40px; margin: 0 15px 0 0; } .navbar-menu li > a .menuImg img { height: 40px; width: auto; transition: opacity 0.25s linear; } /* First level in submenu */ .navbar-menu ul > li { height: auto; } .navbar-menu ul > li > a { width: 250px; padding: 15px; font-size: .9em; /*background-color: #fff;*/ /*background-color: #fff;*/ display: flex; align-items: center; } .navbar-menu ul > li > a:hover { background-color: #f7f7f7; color:#4aa5dc; } .navbar-menu ul > li > a .menuImg { width: 20px; height: 20px; margin-right: 15px; } .navbar-menu ul > li > a img { max-height: 20px; } .navbar-menu ul > li > a[aria-expanded="true"] { background-color: #ececec; } .navbar-menu ul > li > a[aria-expanded="true"]:after {left: 100%; top: 50%; border: solid transparent; content: ""; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(247, 247, 247, 0); border-left-color: #ececec; border-width: 7px; margin-top: -7px;background-color: transparent; } .navbar-menu li.allproducts a { font-weight: 600; } /* Second level in submenu */ .navbar-menu ul > li > ul { background: none; left: 250px; width: calc(100% - 250px); top: 0; max-height: 100%; min-height: 100%; padding-top: 40px; overflow-y: auto; overflow-x: hidden; box-shadow: none; display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; border-top: none; transform: translateX(0);} .navbar-menu ul > li > ul > li { background-color: transparent; display: flex; flex: 0 0 25%; } .navbar-menu ul > li > ul > li > a { width: 100%; background-color: transparent; } .navbar-menu ul > li > ul > li > a:hover { background-color: transparent; } .navbar-menu ul > li > ul > li.allproducts { display: none;} /* HACK: Prevents box shadow from child dropdowns from overlapping its parent dropdown */ .navbar-menu li.has-children > a { position: relative; } .navbar-menu li.has-children > a:after { position: absolute; content: ''; top: 0; right: 0; height: 100%; width: 0; background: inherit; z-index: 999; } /* ENDHACK */ .navbar-menu .activesub { visibility: visible; opacity: 1; transition-delay: 0s; } /* This can be found in media query for dekstop to where hover acts the same!! */ #loginlink { background-color: #c7c7c7; } #loginlink svg { width: 20px; margin-right: 8px; } @media (min-width: 720px) { #loginlink { display: none; } .navbar-menu.container { max-width: 1300px; justify-content: center; } .navbar-menu > li > a { font-size: .95em; } .navbar { background-color: #117d0a; width: 100%; z-index: 99; } .navbar h3 { color: #fff; position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; /* = visually-hidden */ } .navbar-menu { position: relative; } .navbar > .navbar-menu > li > a { color: #fff; } .navbar > .navbar-menu > li.login { display: none; } .navbar-menu li.allproducts { /*position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;*/ /* = visually-hidden */ } .navbar-menu li.allproducts a { border-bottom: 1px dashed #ccc; font-weight: 500; font-size: .9em; } .navbar-menu li.allproducts a .menuImg { display: none; } .navbar-menu li.special { margin-right: 0; margin-left: auto; } .navbar-menu > li > a { position: relative; } /*.navbar-menu > li > a:before { content: ""; position: absolute; right: 0; top: 50%; height: 60%; width: 1px; background: #d2d2d2; transform: translateY(-50%); }*/ .navbar-menu > li > a:hover, .navbar-menu > li > a:focus { background-color: #000;color: #fff; } .navbar-menu > li > a .menuImg img { opacity: .5; } .navbar-menu > li > a:hover .menuImg img, .navbar-menu > li.activeli > a .menuImg img { opacity: 1; } .navbar-menu > li.activeli > a .menuImg img { filter: invert(0.6) sepia(1) saturate(5) hue-rotate(174deg); } .navbar-menu ul > li > ul > li.allproducts a { border: 0;} .navbar-menu li > a .menuImg { margin: 0 15px 0 2%; } .navbar-menu li > a .menuName { line-height: 1.5em; letter-spacing: .03em; margin-right: 2%; } /*.navbar-menu li:focus-within > ul*/ .navbar-menu ul li:hover > ul, .navbar-menu ul li:focus-within > ul { visibility: visible; opacity: 1; transition-delay: .1s; /*transition-delay: .25s;*/ } /* This can be found in media query for mobile/general above, where hover acts the same!! */ } @media (max-width: 1200px) and (min-width: 720px) { .navbar-menu > li > a .menuImg, .navbar > .navbar-menu > li > a.other.brands:after { display: none; } .navbar, .navbar-menu.container { justify-content: flex-start; } .navbar-menu li > a .menuName { font-size: .9em; } .navbar > .navbar-menu > li > a {min-width: 85px;} } @media (max-width: 719px) { .navbar { flex-direction: column; align-items: normal; background-color: #fff; /*height: 100vh;*/ height: auto; bottom: 0; width: 85vw; position: fixed; top: 0; right:0; transform: translateX(85vw); } .navbar-menu { /*flex-direction: column; */ flex-wrap: wrap; align-content: baseline; align-items: normal; overflow-y: auto; justify-content: flex-start; font-size: .9em;} .navbar > .navbar-menu > li > a { flex: 1; color: #000; padding: 20px 15px; justify-content: space-between; border-bottom: 1px solid #dfdfdf;} .navbar-menu .activesub { position: relative; top: auto; left: auto; box-shadow: none; width: 100%; flex-wrap: wrap; align-content: baseline;} .navbar-menu li { flex: 0; align-items: normal; flex-direction: column; height: auto; flex-basis: 100%;} .navbar-menu li.has-children a:before { content: " "; width: 25px; height: 12px; font-size: 20px; font-weight: 600; order:2; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M325.6 79.4c-5.9-5.9-15.4-5.9-21.2 0l-139.4 139.4L25.6 79.4c-5.9-5.9-15.4-5.9-21.2 0 -5.9 5.9-5.9 15.4 0 21.2l150 150c2.8 2.8 6.6 4.4 10.6 4.4s7.8-1.6 10.6-4.4l150-150C331.5 94.7 331.5 85.3 325.6 79.4z'/%3E%3C/svg%3E%0A"); background-size: 15px; background-repeat: no-repeat; background-position: center center; transition: transform 0.3s ease; } .navbar-menu li.has-children a[aria-expanded="true"]:before {transform: rotate(-180deg); fill: red;} .navbar-menu li.no-children a:before { content: ""; display: none; } .navbar-menu ul { min-height: auto; transition: none; border-top: 0; max-width: none; margin: auto; left: auto; transform: translateX(0); } .navbar-menu ul > li { background-color: #f7f7f7; border-bottom: 1px solid #ccc; } .navbar-menu ul > li:last-child { border-bottom: 0; } .navbar > .navbar-menu > li > a[aria-expanded="true"] { background-color: #fff; } .navbar > .navbar-menu > li > a[aria-expanded="true"]:after { display: none; } .navbar-menu .-more {display: none;} .navbar-menu ul > li > a {width: auto; padding-left: 35px; font-size: 1em; justify-content: space-between;} .navbar-menu ul > li > a .menuImg { display: none; } .navbar-menu ul > li > ul > li {flex: 0 0 100%; } .navbar-menu ul > li > ul > li > a { padding-left: 55px; } .navbar > .navbar-menu > li > a:hover, .navbar > .navbar-menu > li > a:focus { color: #000; } .navbar-menu .menuName { margin-left: 0; margin-right: auto; } .navbar-menu > li > a .menuImg { display: none; width: 30px; height: 30px; } .navbar-menu li > a .menuImg img { height: 30px; } .navbar-menu ul > li > ul > li.allproducts { display: block;} .navbar > .navbar-menu > li > a.other.brands:after { display: none;} .navbar-menu.closed { display: none; } #navbar-support { padding: 10px 20px; } #navbar-support h3 { background-color: transparent; padding: 10px 0; border-bottom: 1px solid #bfbfbf; margin-bottom: 10px; } } /* Ripple effect */ .navbar-menu a { position: relative; overflow: hidden; } .navbar-menu a .ripple {border-radius: 50%; background-color: rgba(225,225,225,1); position: absolute; transform: scale(0); animation: ripple 0.3s linear; pointer-events: none; } @keyframes ripple{ to{ transform: scale(2.5); opacity: 0; } } /* The "more" button */ /* #navbar:not(.jsfied) { overflow-x: auto; padding-left: 17px; } #navbar .--hidden { display: none; } #navbar button { border: 0; width: 100%; height: 100%; display: block; font-size: 1em; line-height: 1.2; text-align: center; color: #FAF3DD; background-color: transparent; } #navbar .-primary > li > button { white-space: nowrap; padding: 0 25px; } #navbar .-primary > li > button:hover { } #navbar .-primary > li > button:active {} #navbar .-primary .-more { background-color: #ab221a; } #navbar .-primary .-more > button span { display: inline-block; transition: transform 0.2s; } #navbar .-secondary a, #navbar .-secondary button { padding: 0.6em; } #navbar .-secondary button:hover { background-color: #961534; } #navbar .-secondary button:active { background-color: #D51E49; } #navbar.--show-secondary .-secondary { display: block; } */ .customRadios [type="radio"]:checked, .customRadios [type="radio"]:not(:checked) { position: absolute; left: -9999px; } .customRadios [type="radio"]:checked + label, .customRadios [type="radio"]:not(:checked) + label { position: relative; padding-left: 28px; cursor: pointer; line-height: 23px; display: flex; align-items: center; color: #666; } .customRadios [type="radio"]:checked + label:before, .customRadios [type="radio"]:not(:checked) + label:before { content: ''; position: absolute; left: 0; top: 0; width: 23px; height: 23px; border: 2px solid #159b57; border-radius: 100%; background: #fff; } .customRadios [type="radio"]:checked + label:before { border-color: #007b3d; } .customRadios [type="radio"] + label { transition: all .2s ease-in-out; } .customRadios [type="radio"]:hover + label {transform: scale(1.02);} .customRadios [type="radio"]:not(:checked):hover + label:after { background-color: #ccc; opacity: 1; -webkit-transform: scale(1); transform: scale(1); } .customRadios [type="radio"]:checked + label:after, .customRadios [type="radio"]:not(:checked) + label:after { content: ''; width: 11px; height: 11px; background: #1fbb6c; position: absolute; top: 6px; left: 6px; border-radius: 100%; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } .customRadios [type="radio"]:not(:checked) + label:after { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } .customRadios [type="radio"]:checked + label:after { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } .customRadios [type="radio"]:focus-visible + label { outline: 2px solid #333; /* Only keyboard */ } .checkout-addon-service { margin-bottom: 35px; } .checkout-addon-service .selectArea.simple ul { flex-direction: column; } .checkout-addon-service .selectArea.simple li { flex: 0 1 auto; } .checkout-addon-service .selectArea ul li label { display: block; } .checkout-addon-service .addon-descr { font-size: 13px; font-weight: 400; padding: 5px 10px 5px 0; } .checkout-addon-service .addon-price { float: right; text-align: right; padding-right: 14px; font-weight: 600; } #leasing-preview-widget button { cursor: pointer; }