.twentytwenty-horizontal .twentytwenty-handle:before,
.twentytwenty-horizontal .twentytwenty-handle:after,
.twentytwenty-vertical .twentytwenty-handle:before,
.twentytwenty-vertical .twentytwenty-handle:after {
  content:" ";
  display:block;
  position:absolute;
  z-index:30;
  background:#F7A600;
}

.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 {
	-webkit-transition-duration: 0.5s;
	-moz-transition-duration: 0.5s;
	transition-duration: 0.5s;
}

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

.twentytwenty-before-label:before, .twentytwenty-after-label:before {
	color:white;
	font-size:1.1em;
	font-family:'FiraSans-RegularItalic', sans-serif;
}

@media only screen and (max-width: 400px) {
.twentytwenty-before-label:before, .twentytwenty-after-label:before {
	font-size:0.8em;
}
}

.twentytwenty-before-label:before,
.twentytwenty-after-label:before {
	position: absolute;
	background:rgba(255, 255, 255, 0.2);
	background:none;
	line-height:36px;
	padding:0 8px;
 }

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

.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 {
	-webkit-box-sizing:content-box;
	-moz-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: rgba(0, 0, 0, 0);
}

.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 * {
	-webkit-box-sizing:content-box;
	-moz-box-sizing:content-box;
	box-sizing:content-box;
}

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

.twentytwenty-before-label:before {
    content: "Originalbild";
}

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

.twentytwenty-after-label:before {
	content: "Bildmontage";
}

.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 {
	-webkit-transition-property: background;
 	-moz-transition-property: background;
 	transition-property: background;
 	background:rgba(0, 0, 0, 0);
 	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:36px;
	width:19px;
	position:absolute;
	left:50%;
 	top:50%;
	z-index:40;
	cursor:pointer;
	margin-left:-9px;
  	margin-top:-18px;
	background:#F7A600;
	background:
		linear-gradient(135deg, transparent 4px, #F7A600 0) top left,
		linear-gradient(225deg, transparent 4px, #F7A600 0) top right,
		linear-gradient(315deg, transparent 4px, #F7A600 0) bottom right,
		linear-gradient(45deg,  transparent 4px, #F7A600 0) bottom left;
	background-size: 52% 52%;
	background-repeat: no-repeat;
}

.twentytwenty-horizontal .twentytwenty-handle:before {
	bottom:50%;
}


.twentytwenty-horizontal .twentytwenty-handle:after {
	top:50%;
}

.twentytwenty-vertical .twentytwenty-handle:before {
	left:50%;
}

.twentytwenty-vertical .twentytwenty-handle:after {
  	right:50%;
}

.twentytwenty-left-arrow {
	left:50%;
	margin-left:-13px;
	border-right:5px solid #ba114c;
}

.twentytwenty-right-arrow {
	right:50%;
	margin-right:-13px;
	border-left:5px solid #ba114c;
}

.twentytwenty-up-arrow {
	border-bottom:5px solid #ba114c;
	top:50%;
	margin-top:-13px;
}

.twentytwenty-down-arrow {
	border-top:5px solid #ba114c;
  	bottom:50%;
  	margin-bottom:-13px;
}