.before-after-slider.horizontal .slider { -webkit-appearance: slider-vertical; opacity: 0; }

.before-after-slider.horizontal .slider-bar { height: 6px; width: 100%; top: calc(50% - 3px); left: 0; }

.before-after-slider.horizontal .slider-button { transform: rotate(90deg); }

.before-after-slider.horizontal .slider-image.foreground { width: 100%; border-right: none; }

.before-after-slider .slider-wrapper { position: relative; }

.before-after-slider .slider-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover !important; background-position: center center !important; }

.before-after-slider .slider { position: absolute; -webkit-appearance: none; appearance: none; width: 100%; height: 100%; outline: none; margin: 0; transition: all .2s; background-color: transparent; }

.before-after-slider .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 0; height: 0; background: transparent; cursor: pointer; opacity: 0; pointer-events: none; }

.before-after-slider .slider::-moz-range-thumb { width: 0; height: 0; background: transparent; cursor: pointer; opacity: 0; pointer-events: none; }

.before-after-slider .slider-bar { position: absolute; top: 0; left: calc(50% - 3px); width: 6px; height: 100%; background-color: #FFF; pointer-events: none; }

.before-after-slider .slider-button { pointer-events: none; position: absolute; width: 30px; height: 30px; border-radius: 50%; background-color: white; left: calc(50% - 15px); top: calc(50% - 15px); cursor: pointer; font-size: 16px; }

.before-after-slider .slider-button:after { content: ''; padding: 3px; display: inline-block; border: solid #5D5D5D; border-width: 0 2px 2px 0; transform: translatex(7px) rotate(-45deg); }

.before-after-slider .slider-button:before { content: ''; padding: 3px; display: inline-block; border: solid #5D5D5D; border-width: 0 2px 2px 0; transform: translatex(7px) rotate(135deg); }