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



/* BODY */
body {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	height: 100vh;
	background: #e0e0e0;
	font-family: 'Roboto', sans-serif;
}



/* SLIDER CONTAINER */
.slider {
	position: relative;
	width: 50%;
	margin: 1rem auto;
	text-align: center;
}



/* SLIDES CONTAINER */
.slider__slides {
	position: relative;
}



/* SLIDE */
.slider__slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-shadow: -1px 49px 35px -20px rgba(0,0,0,0.39);
	opacity: 0;
	visibility: hidden;
	transition: opacity 1s ease-in-out;
}

.slider__slide.active {
	opacity: 1;
	visibility: visible;
}



/* IMAGES */
.slider__img {
	object-fit:cover;
	object-position: 50% 20%;
	width: 100%;
	height: 100%;
}



/* BUTTONS */
.slider__btns {
	position: absolute;
	width: 100%;
	top: 50%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.material-icons {
	display: block;
	color: black;
	text-decoration: none;
	box-shadow: -1px 49px 35px -20px rgba(0,0,0,0.39);
	transition: .1s ease-in-out;
	background: #e0e0e0;
	border-radius: 50%;
	padding: 10px;
	margin: 0 10px;
	text-align: center;
	opacity: .3;
}

.material-icons:hover {
	opacity: 1;
}

.material-icons:active {
	transform: scale(.9);
}



/* BTN AUTO */
h1 {
	position: relative;
	color: #212529;
}

.btn__auto {
	position: relative;
	background: none;
	outline: none;
	border: none;
	font-family: 'Roboto', sans-serif;
	box-shadow: -1px 49px 35px -20px rgba(0,0,0,0.39);
	color: #d7263d;
}

.btn__auto:active {
	transform: scale(.9);
}



/* RESPONSIVE DESIGN */

/* min width 320px */
@media screen and (min-width: 320px) {
	.slider {
		width: 90%;
	}

	.slider__slides {
		height: 12.5rem;
	}


	.material-icons {
		font-size: 1.25rem;
	}

	h1 {
		top: 20px;
		font-size: 1rem;
	}

	.btn__auto {
		top: 30px;
		font-size: 1.5rem;
		cursor: pointer;
	}
}

/* min width 768px */
@media screen and (min-width: 768px) {
	.slider {
		width: 70%;
	}

	.slider__slides {
		height: 15.625rem;
	}
}

/* min width 1200px */
@media screen and (min-width: 1200px) {
	.slider {
		width: 60%;
	}

	.slider__slides {
		height: 21.875rem;
	}
}

/* min width 1600px */
@media screen and (min-width: 1200px) {
	.slider {
		width: 50%;
	}

	.slider__slides {
		height: 28.125rem;
	}
}