.beer-slider {
font-family: "Montserrat", sans-serif;
text-transform: uppercase;
font-size: 0.75rem;
letter-spacing: 1px;
margin-bottom: 1.5rem;
position: relative;
}
input.beer-range {
-moz-appearance: none;
-ms-touch-action: auto;
-webkit-appearance: slider-horizontal !important;
bottom: 0;
cursor: pointer;
height: 100%;
left: -1px;
margin: 0;
opacity: 0;
position: absolute;
top: 0;
touch-action: auto;
width: calc(100% + 2px);
z-index: 2;
}
.beer-slider::before {
background: transparent;
content: "";
height: 100%;
opacity: 0.35;
position: absolute;
right: 0;
top: 0;
width: 100%;
}
.htmegavc-imagecomparison .beer-handle,
.htmegavc-imagecomparison .beer-range:focus ~ .beer-handle{
box-shadow: none;
}
.htmegavc-label-pos-center .beer-reveal[data-beer-label]::after,
.htmegavc-label-pos-center .beer-slider[data-beer-label]::after{
top: 50%;
}
.htmegavc-label-pos-bottom .beer-reveal[data-beer-label]::after,
.htmegavc-label-pos-bottom .beer-slider[data-beer-label]::after{
bottom: 1.5rem;
top: auto;
}
.beer-slider .beer-reveal{
border:0;
border-color: transparent;
}
.beer-slider.htmegavc-ber-slider-2::before {
position: absolute;
content: "";
background: #1a012a;
top: 0;
right: 0;
width: 100%;
height: 100%;
opacity: 0.35; }
.htmegavc-ber-slider-2 .beer-handle {
background: #ed552d;
color: #fff; }
.htmegavc-ber-slider-2 .beer-range:focus ~ .beer-handle {
background: #18012c; } .htmegavc-ber-slider-3 .beer-reveal {
border-right: 3px solid #ed552d; }
.htmegavc-ber-slider-3 .beer-handle {
background: transparent;
color: #ed552d; }
.htmegavc-ber-slider-3 .beer-range:focus ~ .beer-handle {
background: transparent;
box-shadow: none; }
.htmegavc-ber-slider-3 .beer-reveal[data-beer-label]:after,
.beer-slider.htmegavc-ber-slider-3[data-beer-label]:after {
bottom: 1.5rem;
top: auto; }
.htmegavc-ber-slider-3 .beer-handle:before {
left: 3px; }
.htmegavc-ber-slider-3 .beer-handle:after {
right: -3px;
transform: rotate(137deg); } .htmegavc-ber-slider-4 .beer-reveal {
border-right: 3px solid #000000; }
.htmegavc-ber-slider-4 .beer-handle {
background: #fff;
color: #000;
border: 1px solid #000000; } .htmegavc-ber-slider-5 .beer-handle {
height: 70px;
width: 70px;
background: #fff; }
.htmegavc-ber-slider-5 .beer-reveal {
border-right: 5px solid #ffffff; }