/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 1 version
*/

.beforeafters .row{
	align-items: center;
}


.beforeafter__column-wrappera,
.beforeafter__column-wrapper {
	place-content: center;
	position: relative;
	overflow: hidden;
	border-radius: 7px;
	--position: 50%;
	overflow: hidden;
	padding: 13px 11px;
	background-color: #fff;
	box-shadow: 0 0 10px rgba(221, 232, 248, 1);
}

.beforeafter__column-wrappera:after,
.beforeafter__column-wrapper:after {
	content: "After";
	position: absolute;
	right: 24px;
	top: 26px;
	background-color: rgba(0, 23, 60, 0.80);
	color: #fff;
	border-radius: 7px;
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	padding: 1.5px 9px;
}

.beforeafter__column-wrappera:before,
.beforeafter__column-wrapper:before {
	content: "Before";
	position: absolute;
	left: 24px;
	top: 26px;
	background-color: rgba(0, 23, 60, 0.80);
	color: #fff;
	border-radius: 7px;
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	padding: 1.5px 9px;
	z-index: 1;
}

.image-container {
	height: 276px;
	width: 100%;
	position: relative;
}

.beforeafter__content h2 > span {
    position: relative;
	display: inline-block;
    z-index: 1;
}


.beforeafter__content h2 > span:before{
    content: '';
    background:url('/wp-content/themes/cflvein/assets/img/full-width-contact-color-line.png') no-repeat center center;
    position: absolute;
    left: 0;
    bottom: -21px;    
    width: 100%;
    height: 100%;
    z-index: -1;
}

.slider-image {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
	-o-object-position: left;
	   object-position: left;
	border-radius: 7px;
}

.image-before {
	position: absolute;
	inset: 0;
	width: var(--position);
}

.slidera,
.slider {
	position: absolute;
	inset: 0;
	cursor: pointer;
	opacity: 0;
	/* for Firefox */
	width: 100%;
	height: 100%;
}

.slider:focus-visible~.slider-button {
	outline: 5px solid black;
	outline-offset: 3px;
}

.slider-line {
	position: absolute;
	inset: 0;
	width: 4px;
	height: 100%;
	background-color: #fff;
	/* z-index: 10; */
	left: var(--position);
	-webkit-transform: translateX(-50%);
	        transform: translateX(-50%);
	pointer-events: none;
}

.slider-button {
	position: absolute;
	border-radius: 100vw;
	display: -ms-grid;
	display: grid;
	place-items: center;
	top: 50%;
	left: var(--position);
	-webkit-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);
	pointer-events: none;
}

.beforeafter__content span {
	font-weight: 700;
	position: relative;
}

.beforeafter__content span img {
	position: absolute;
	right: 0;
	width: 117px;
	bottom: 0;
}

.beforeafter__content .btn {
	margin-top: 10px;
}

.beforeafter__content {
	margin-bottom: 25px;
}

.image-dragger-info p {
	font-size: 14px;
	font-weight: 600;
	color: #28303C;
}

.image-dragger-info {
	background-color: #DDE8F8;
	border-radius: 7px;
	padding: 1px 18px 5px;
	text-align: center;
	margin-top: 18px;
}

.image-dragger-info p span {
	width: 36px;
	height: 20px;
	display: inline-block;
}

.beforeafter__column {
	padding: 0 9px;
}

.inner-beforeafters .beforeafter__column .row>* {
	margin-top: 20px;
}

.inner-beforeafters .beforeafter__column .row>*:first-child {
	margin-top: 0;
}

@media(min-width: 768px) {
	.beforeafter__content span img {
		width: 146px;
	}

	.beforeafter__column {
		padding: 0;
	}

	.image-dragger-info {
		padding: 1px 18px 8px;
	}
	
	.inner-beforeafters .beforeafter__column .row>* {
		margin-top: 0;
	}
}

@media(min-width: 1200px) {

	.beforeafters .flex-opposite{
		flex-direction: row-reverse;	
	}	

	.beforeafters  .beforeafter__content{
		margin-left: 0;	
		margin-right: 20px;
	}
	
	.beforeafters .flex-opposite .beforeafter__content{
		margin-left: 30px;	
		margin-right: 0;
	}

	.beforeafter__content {
		margin-bottom: 0;
	}

	.beforeafter__content span img {
		width: 180px;
	}

	.image-dragger-info {
		padding: 1px 14px 8px;
	}

	.image-dragger-info p{
		font-size: 15px;
	}
}