.beer-slider {
position: relative;
display: inline-block;
overflow: hidden;
}
.beer-slider *,
.beer-slider:after,
.beer-slider :after,
.beer-slider:before,
.beer-slider :before {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.beer-slider img,
.beer-slider svg {
vertical-align: bottom;
}
.beer-slider > * {
height: 100%;
}
.beer-slider > img {
max-width: 100%;
height: auto;
}
.beer-reveal {
position: absolute;
z-index: 1;
top: 0;
right: 50%;
left: 0;
overflow: hidden;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
opacity: 0;
border-right: 1px solid #8dbf41;
}
.beer-reveal > :first-child {
width: 200%;
max-width: none;
height: 100%;
}
.beer-reveal > img:first-child {
height: auto;
}
.beer-range {
position: absolute;
z-index: 2;
top: 0;
bottom: 0;
left: -1px;
width: -webkit-calc(100% + 2px);
width: calc(100% + 2px);
height: 100%;
margin: 0;
cursor: pointer;
opacity: 0;
-webkit-appearance: slider-horizontal !important;
-moz-appearance: none;
-ms-touch-action: auto;
touch-action: auto;
}
.beer-range::-webkit-slider-thumb {
height: 300vh;
-webkit-appearance: none;
}
.beer-range::-moz-range-thumb {
height: 300vh;
-webkit-appearance: none;
}
.beer-range::-ms-tooltip {
display: none;
}
.beer-handle {
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
width: 48px;
height: 48px;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
pointer-events: none;
opacity: 0;
color: #000000;
border-radius: 50%;
background: #8dbf41 url(//perevedy.ru/wp-content/themes/perevedy/img/svg/ico-handle-slider.svg) center center no-repeat;
background-size: 30px auto;
}
.beer-ready .beer-handle,
.beer-ready .beer-reveal {
opacity: 1;
}