/*
 * Image Comparison Style
*/
.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; }

/*=====================
    Compare 3
=======================*/
.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); }

/*=====================
    Compare 4
=======================*/
.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; }

/*=====================
    Compare 5
=======================*/
.htmegavc-ber-slider-5 .beer-handle {
  height: 70px;
  width: 70px;
  background: #fff; }

.htmegavc-ber-slider-5 .beer-reveal {
  border-right: 5px solid #ffffff; }