.c-compare{--h:9;--m:2rem 0;--w:16;--thumb-bgc:none;--thumb-bgc-focus:none;--thumb-w:1rem;margin:var(--m);position:relative}.c-compare:after{content:"";display:block;padding-bottom:calc((var(--h)/var(--w))*100%)}.c-compare__left,.c-compare__right{height:100%;object-fit:cover;position:absolute;width:100%}.c-compare__left{clip-path:polygon(0 0,var(--value) 0,var(--value) 100%,0 100%)}.c-compare__right{clip-path:polygon(100% 0,var(--value) 0,var(--value) 100%,100% 100%)}.c-compare__range{background-color:transparent;font-family:inherit;height:100%;margin:0;opacity:0;position:absolute;width:100%}.c-compare__range::-moz-range-thumb{background-color:transparent;cursor:ew-resize;height:100%;width:var(--thumb-w)}.c-compare__range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;-moz-appearance:none;background-color:transparent;cursor:ew-resize;height:100%;width:var(--thumb-w)}.c-compare__range:focus::-webkit-slider-thumb{background-color:var(--thumb-bgc-focus)}.c-compare__range:focus::-moz-range-thumb{background-color:var(--thumb-bgc-focus)}.c-compare__range::-moz-range-track{background:transparent;background-size:100%;box-sizing:border-box}.c-compare__range::-webkit-slider-runnable-track{background:transparent;background-size:100%;box-sizing:border-box;height:100%}.c-compare__range,.c-compare__range::-webkit-slider-runnable-track,.c-compare__range::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none}.before:before{right:2.6rem}.before:before,.c-compare:before{background:#fffd;border:1px solid #707070;border-radius:8px;bottom:2.4rem;color:#7f7e7d;font-size:1.4rem;font-weight:lighter;min-width:90px;opacity:.8;padding:.5rem;position:absolute;text-align:center;text-transform:uppercase}.c-compare:before{left:2.6rem;z-index:1}.bullet{align-items:center;background-color:#fff;background-size:contain;border-radius:50%;content:"";display:flex;height:4.8rem;justify-content:space-around;left:var(--value);margin-left:-2.4rem;position:absolute;top:50%;width:4.8rem}.arrow{height:26px}@media screen and (max-width:600px){.arrow{height:10px}.bullet{height:1.8rem;margin-left:-.9rem;width:1.8rem}.before:before{background:#fffd;border:1px solid #707070;border-radius:8px;color:#7f7e7d;font-weight:lighter;opacity:.8;right:.8rem;text-align:center;text-transform:uppercase}.before:before,.c-compare:before{bottom:.6rem;font-size:1.4rem;min-width:50px;padding:.2rem}.c-compare:before{left:.8rem}.bullet{border-radius:50%;height:2rem;margin-left:-1rem;width:2rem}}