@charset "utf-8";

.before_after{
	text-align:center;
	position:relative;
	overflow:hidden;
}

.before_after > div:first-child, 
.before_after > img{
	width:100%;
}

.before_after > div:first-child{
	position:absolute;
	top:0;
	left:0;
	z-index:1;
}

.before_after_trigger{
	width:100%;
	height:4px;
	text-decoration:none;
	display:block;
	position:absolute;
	left:0;
	z-index:1;
}

.before_after_trigger::before, 
.before_after_trigger::after{
	content:"";
	width:calc(50% - 25px); 
	height:100%;
	background:#FFF;
	display:block;
	position:absolute;
	top:0;
}

.before_after_trigger::before{
	left:0;
}

.before_after_trigger::after{
	right:0;
}

.before_after_trigger > span{
	width:40px;
	height:40px;
	margin:-22px auto auto;
	border:solid #FFF 5px;
	display:block;
	box-sizing:unset;
	border-radius:50%;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
}

.before_after_trigger > span::before, 
.before_after_trigger > span::after{
	color:#FFF;
	font-size:14px;
	line-height:20px;
	display:block;
}

.before_after_trigger > span::before{
	content:"\25B2";
}

.before_after_trigger > span::after{
	content:"\25BC";
}

.before_after_release{
	position:absolute;
	z-index:2;
}

.before_after_release_top, 
.before_after_release_bottom{
	width:100%;
	height:10px;
	left:0;
}

.before_after_release_right, 
.before_after_release_left{
	width:10px;
	height:100%;
	top:0;
}

.before_after_release_top{
	top:0;
}

.before_after_release_right{
	right:0;
}

.before_after_release_bottom{
	bottom:0;
}

.before_after_release_left{
	left:0;
}