@keyframes slide_disp {
	from {
		left: -100%;
		transform: rotateY(-90deg);
	}
	to {left: 0%;}
}

@keyframes slide_hid {
	from {
		left: 0%;
		width: 100%;
	}
	to {
		left: 100%;
		width: 0%;
		transform: rotateY(90deg);
	}
}

#slider {
	width: 100%;
	height: 300px;
	background-color: black;
	box-shadow: 0px -8px 16px 2px black;
	border-bottom: 2px solid #0080ff;
}

.slide {
	background-color: black;
	margin: 0;
	height: 300px;
	background-repeat: no-repeat;
	background-size: auto 300px;
	background-position: center center;
}

.slide_disp {
	position: absolute;
	top: 80px;
	left: 0px;
	width: 100%;
	animation-name: slide_disp;
	animation-duration: 0.7s;
}

.slide_disp_auto {
	position: absolute;
	top: 80px;
	left: 0px;
	width: 100%;
}

.slide_hid {
	position: absolute;
	top: 80px;
	left: 100%;
	width: 0%;
	animation-name: slide_hid;
	animation-duration: 0.7s;
}

.slide_hid_auto {
	position: absolute;
	top: 80px;
	left: 100%;
	width: 0%;
}

#slider_bt {
	position: absolute;
	top: 80px;
	left: 8px;
	opacity: 0;
	z-index: 1;
	cursor: pointer;
	transition: opacity 0.3s;
}

#slider:hover #slider_bt, #slider:focus #slider_bt {
	opacity: 1;
}

.slider_bt_hid {
	display: none;
}