@import url('https://fonts.googleapis.com/css?family=Roboto');

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

.slider {
	position: relative;
	overflow: hidden;
	height: 100vh;
	width: 100vw;
}

.slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 0.4s ease-in-out;
}

.slide.current {
	opacity: 1;
}

.slide .content {
	position: absolute;
	bottom: 70px;
	left: -600px;
	opacity: 0;
	width: 600px;
	background-color: rgba(36, 36, 36, 0.85);
	color: #fff;
	padding: 35px;
}

.slide .content h1 {
	margin-bottom: 10px;
}

.slide.current .content {
	opacity: 1;
	transform: translateX(600px);
	transition: all 0.7s ease-in-out 0.3s;
}

.buttons button#next {
	position: absolute;
	top: 40%;
	right: 15px;
	padding-right: 12px;
}

.buttons button#prev {
	position: absolute;
	top: 40%;
	left: 15px;
	padding-left: 12px;
}

.buttons button {
	border: 2px solid #fff;
	background-color: rgba(36, 36, 36, 0.5);
	color: #fff;
	cursor: pointer;
	padding: 4px 15px;
	border-radius: 50%;
	outline: none;
	font-size: 1.5rem;
}

.buttons button:hover {
	background-color: rgba(255, 255, 255, 1);
	color: #333;
}

@media (max-width: 500px) {
	.slide .content {
		bottom: -300px;
		left: 0;
		width: 100%;
	}

	.slide.current .content {
		transform: translateY(-300px);
	}
}

/* Backgorund Images */

.slide:first-child {
	background: url('../images/slide-1.jpg') no-repeat center center/cover;
}

.slide:nth-child(2) {
	background: url('../images/slide-2.jpg') no-repeat center center/cover;
}

.slide:nth-child(3) {
	background: url('../images/slide-3.jpg') no-repeat left center/cover;
}