/*
 * Image Comparison Style
*/
.beer-slider {
	font-family: "Montserrat", sans-serif;
	text-transform: uppercase;
	font-size: .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: .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: .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 #000;
}

.htmegavc-ber-slider-4 .beer-handle {
	background: #fff;
	color: #000;
	border: 1px solid #000;
}

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

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