.sdoor {
	position: relative;
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
}

.sdoor img {
	display: block;
	width: 100%;
}

.sdoor img:first-child {
	display: none;
}

.sdoor-cover {
	position: absolute;
	z-index: 10;
	-webkit-transition: clip 0.2s;
	        transition: clip 0.2s;
}

.sdoor img.sdoor-cover {
	display: block;
}

.sdoor.is-active .sdoor-cover {
	display: block;
}

.sdoor.is-dragging .sdoor-cover,
.sdoor.is-dragging .sdoor-handle {
	-webkit-transition: none;
	        transition: none;
}

.sdoor-handle {
	position: absolute;
	z-index: 15;
	left: 0;
	top: 0;
	bottom: 0;
	width: 104px;
	cursor: ew-resize;
	-webkit-transition: left 0.2s;
	        transition: left 0.2s;
	background: url(../img/sdoor.png) no-repeat center;
}

.sdoor-handle-inner {
	position: relative;
	width: 4px;
	background: #fff;
	height: 100%;
	margin-left: 50px;
}

.sdoor-handle-left,
.sdoor-handle-right {
	position: absolute;
	top: 50%;
	border: 7px solid;
	border-color: transparent #fff;
	opacity: 0;
}

.sdoor.is-hinting .sdoor-handle-left,
.sdoor.is-hinting .sdoor-handle-right {
	-webkit-animation-duration: 1.5s;
	        animation-duration: 1.5s;
	-webkit-animation-iteration-count: infinite;
	        animation-iteration-count: infinite;
}

.sdoor.is-hinting .sdoor-handle-left {
	-webkit-animation-name: sdoor-point-left, sdoor-fade;
	        animation-name: sdoor-point-left, sdoor-fade;
}

.sdoor.is-hinting .sdoor-handle-right {
	-webkit-animation-name: sdoor-point-right, sdoor-fade;
	        animation-name: sdoor-point-right, sdoor-fade;
	-webkit-animation-delay: 0.75s;
    animation-delay: 0.75s;
}

.sdoor-handle-left {
	left: -5px;
	border-left: none;
	margin: -4px 0 0 -7px;
}

.sdoor-handle-right {
	right: -5px;
	border-right: none;
	margin: -4px -7px 0 0;
}

@-webkit-keyframes sdoor-point-left {
	80% {
		left: -25px;
	}
	100% {
		left: -25px;
	}
}

@keyframes sdoor-point-left {
	80% {
		left: -25px;
	}
	100% {
		left: -25px;
	}
}

@-webkit-keyframes sdoor-point-right {
	60% {
		right: -25px;
	}
	100% {
		right: -25px;
	}
}

@keyframes sdoor-point-right {
	60% {
		right: -25px;
	}
	100% {
		right: -25px;
	}
}

@-webkit-keyframes sdoor-fade {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 1;
	}
	80% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

@keyframes sdoor-fade {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 1;
	}
	80% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}