.twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after, .twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after {
	content            : " ";
	display            : block;
	background         : #fff;
	position           : absolute;
	z-index            : 30;
	-moz-box-shadow    : 0px 0px 12px rgba(51, 51, 51, 0.5);
	-webkit-box-shadow : 0px 0px 12px rgba(51, 51, 51, 0.5);
	box-shadow         : 0px 0px 12px rgba(51, 51, 51, 0.5);
}

.twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after {
	width       : 3px;
	height      : 9999px;
	left        : 50%;
	margin-left : -1.5px;
}

.twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after {
	width      : 9999px;
	height     : 3px;
	top        : 50%;
	margin-top : -1.5px;
}

.twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay {
	position : absolute;
	top      : 0;
	width    : 100%;
	height   : 100%;
}

.twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay {
	-moz-transition-duration    : 0.5s;
	-o-transition-duration      : 0.5s;
	-webkit-transition-duration : 0.5s;
	transition-duration         : 0.5s;
}

.twentytwenty-before-label, .twentytwenty-after-label {
	-moz-transition-property    : opacity;
	-o-transition-property      : opacity;
	-webkit-transition-property : opacity;
	transition-property         : opacity;
}

.twentytwenty-before-label:before, .twentytwenty-after-label:before {
	color          : #fff;
	font-size      : 13px;
	letter-spacing : 0.1em;
}

.twentytwenty-before-label:before, .twentytwenty-after-label:before {
	position              : absolute;
	background            : rgba(255, 255, 255, 0.2);
	line-height           : 38px;
	padding               : 0 20px;
	-moz-border-radius    : 2px;
	-webkit-border-radius : 2px;
	border-radius         : 2px;
}

.twentytwenty-horizontal .twentytwenty-before-label:before, .twentytwenty-horizontal .twentytwenty-after-label:before {
	top        : 50%;
	margin-top : -19px;
}

.twentytwenty-vertical .twentytwenty-before-label:before, .twentytwenty-vertical .twentytwenty-after-label:before {
	left        : 50%;
	margin-left : -45px;
	text-align  : center;
	width       : 90px;
}

.twentytwenty-left-arrow, .twentytwenty-right-arrow, .twentytwenty-up-arrow, .twentytwenty-down-arrow {
	width    : 0;
	height   : 0;
	border   : 6px inset transparent;
	position : absolute;
}

.twentytwenty-left-arrow, .twentytwenty-right-arrow {
	top        : 50%;
	margin-top : -6px;
}

.twentytwenty-up-arrow, .twentytwenty-down-arrow {
	left        : 50%;
	margin-left : -6px;
}

.twentytwenty-container {
	-moz-box-sizing     : content-box;
	-webkit-box-sizing  : content-box;
	box-sizing          : content-box;
	z-index             : 0;
	overflow            : hidden;
	position            : relative;
	-webkit-user-select : none;
	-moz-user-select    : none;
}

.twentytwenty-container img {
	max-width : 100%;
	position  : absolute;
	top       : 0;
	display   : block;
}

.twentytwenty-container.active .twentytwenty-overlay, .twentytwenty-container.active :hover.twentytwenty-overlay {
	background : transparent;
}

.twentytwenty-container.active .twentytwenty-overlay .twentytwenty-before-label,
.twentytwenty-container.active .twentytwenty-overlay .twentytwenty-after-label, .twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-before-label,
.twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-after-label {
	opacity : 0;
}

.twentytwenty-container * {
	-moz-box-sizing    : content-box;
	-webkit-box-sizing : content-box;
	box-sizing         : content-box;
}

.twentytwenty-before-label {
	opacity : 0;
}

.twentytwenty-before-label:before {
	content : attr(data-content);
}

.twentytwenty-after-label {
	opacity : 0;
}

.twentytwenty-after-label:before {
	content : attr(data-content);
}

.twentytwenty-horizontal .twentytwenty-before-label:before {
	left : 10px;
}

.twentytwenty-horizontal .twentytwenty-after-label:before {
	right : 10px;
}

.twentytwenty-vertical .twentytwenty-before-label:before {
	top : 10px;
}

.twentytwenty-vertical .twentytwenty-after-label:before {
	bottom : 10px;
}

.twentytwenty-overlay {
	-moz-transition-property    : background;
	-o-transition-property      : background;
	-webkit-transition-property : background;
	transition-property         : background;
	background                  : transparent;
	z-index                     : 25;
}

.twentytwenty-overlay:hover {
	background : rgba(0, 0, 0, 0.5);
}

.twentytwenty-overlay:hover .twentytwenty-after-label {
	opacity : 1;
}

.twentytwenty-overlay:hover .twentytwenty-before-label {
	opacity : 1;
}

.twentytwenty-before {
	z-index : 20;
}

.twentytwenty-after {
	z-index : 10;
}

.twentytwenty-handle {
	height                : 38px;
	width                 : 38px;
	position              : absolute;
	left                  : 50%;
	top                   : 50%;
	margin-left           : -22px;
	margin-top            : -22px;
	border                : 3px solid #fff;
	-moz-border-radius    : 1000px;
	-webkit-border-radius : 1000px;
	border-radius         : 1000px;
	-moz-box-shadow       : 0px 0px 12px rgba(51, 51, 51, 0.5);
	-webkit-box-shadow    : 0px 0px 12px rgba(51, 51, 51, 0.5);
	box-shadow            : 0px 0px 12px rgba(51, 51, 51, 0.5);
	z-index               : 40;
	cursor                : pointer;
}

@media screen and (max-width : 1001px) {
	.twentytwenty-handle {
		transform : scale(2.5);
	}
}

.twentytwenty-horizontal .twentytwenty-handle:before {
	bottom             : 50%;
	margin-bottom      : 22px;
	-moz-box-shadow    : 0 3px 0 #fff, 0px 0px 12px rgba(51, 51, 51, 0.5);
	-webkit-box-shadow : 0 3px 0 #fff, 0px 0px 12px rgba(51, 51, 51, 0.5);
	box-shadow         : 0 3px 0 #fff, 0px 0px 12px rgba(51, 51, 51, 0.5);
}

.twentytwenty-horizontal .twentytwenty-handle:after {
	top                : 50%;
	margin-top         : 22px;
	-moz-box-shadow    : 0 -3px 0 #fff, 0px 0px 12px rgba(51, 51, 51, 0.5);
	-webkit-box-shadow : 0 -3px 0 #fff, 0px 0px 12px rgba(51, 51, 51, 0.5);
	box-shadow         : 0 -3px 0 #fff, 0px 0px 12px rgba(51, 51, 51, 0.5);
}

.twentytwenty-vertical .twentytwenty-handle:before {
	left               : 50%;
	margin-left        : 22px;
	-moz-box-shadow    : 3px 0 0 #fff, 0px 0px 12px rgba(51, 51, 51, 0.5);
	-webkit-box-shadow : 3px 0 0 #fff, 0px 0px 12px rgba(51, 51, 51, 0.5);
	box-shadow         : 3px 0 0 #fff, 0px 0px 12px rgba(51, 51, 51, 0.5);
}

.twentytwenty-vertical .twentytwenty-handle:after {
	right              : 50%;
	margin-right       : 22px;
	-moz-box-shadow    : -3px 0 0 #fff, 0px 0px 12px rgba(51, 51, 51, 0.5);
	-webkit-box-shadow : -3px 0 0 #fff, 0px 0px 12px rgba(51, 51, 51, 0.5);
	box-shadow         : -3px 0 0 #fff, 0px 0px 12px rgba(51, 51, 51, 0.5);
}

.twentytwenty-left-arrow {
	border-right : 6px solid #fff;
	left         : 50%;
	margin-left  : -17px;
}

.twentytwenty-right-arrow {
	border-left  : 6px solid #fff;
	right        : 50%;
	margin-right : -17px;
}

.twentytwenty-up-arrow {
	border-bottom : 6px solid #fff;
	top           : 50%;
	margin-top    : -17px;
}

.twentytwenty-down-arrow {
	border-top    : 6px solid #fff;
	bottom        : 50%;
	margin-bottom : -17px;
}