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


.slider {
	position: absolute;
	overflow: hidden;
	height: 100%;
	width: 100%;
}

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

.slide.current {
	opacity: 1;	
}

.slide .content {
	position: absolute;
	bottom: 70px;
	left: -600px;
	opacity: 0;
	width: 600px;
	background-color: rgba(255,255,255,.8);
	color: #333;
	padding: 33px;
}

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

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

.buttons {
	display: none;
}

.buttons button#next {
	position: absolute;
	top: 50%;
	right: 15px;	
}

.buttons button#prev {
	position: absolute;
	top: 50%;
	left: 15px;	
}

.buttons button {
	border: 2px solid #fff;
	background-color: transparent;
	color: #fff;
	cursor: pointer;
	padding: 13px 15px;
	border-right: 50%;
	outline: none;
}

.buttons button:hover {
	background: #fff;
	color: #333;
}

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

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

.slide:first-child {
	background: url('../img/head2.jpg') no-repeat top center / cover;
}
.slide:nth-child(2) {
	background: url('../img/head3.jpg') no-repeat top center / cover;
}
.slide:nth-child(3) {
	background: url('../img/head4.jpg') no-repeat top center / cover;
}
.slide:nth-child(4) {
	background: url('../img/head5.jpg') no-repeat top center / cover;
}
.slide:nth-child(5) {
	background: url('../img/head7.jpg') no-repeat top center / cover;
}
.slide:nth-child(6) {
	background: url('../img/head8.jpg') no-repeat top center / cover;
}