.slider {
	width: 100%;
	max-width: 900px;
	height: 60%;
	max-height: 700px;
	position: relative;
	overflow: hidden;
}

.slide {
	width: 100%;
	height: 100%;
	position: absolute;
	color: white;
	font-size: 10em;
	display: flex;
	justify-content: center;
	align-items: center;
	user-select: none;   
}

.slide-smooth {
	transition: ease-in-out 1s;
}

.slide1 {
	background-color: rgb(112, 168, 107);
}

.slide2 {
	background-color: rgb(107, 154, 168);
}

.slide3 {
	background-color: rgb(144, 107, 168);
}

#btnPrev, #btnNext {
	width: 60px;
	height: 100%;
	border: none;
	background-color: rgba(66, 66, 66, 0);
	font-size: 30px;
	color: rgb(255, 255, 255);
	position: absolute;
	z-index: 10;
	cursor: pointer;
	transition: ease-in-out .1s;
}

#btnPrev:hover, #btnNext:hover {
	background-color: rgba(66, 66, 66, 0.4);
}

#btnPrev {
	left: 0px;
}

#btnNext {
	right: 0px;
}

.slider-navbar {
	width: 100%;
	height: auto;
	position: absolute;
	bottom: 5px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.slider-navbar button {
	width: 25px;
	height: 8px;
	background-color: rgba(255, 255, 255, 0.5);
	border: none;
	margin: 0 3px;
	cursor: pointer;
}

/* Animation of filling active navbar button to show time till autoslide */
@keyframes autoSlideFill {
	from {box-shadow: inset 0px 0 0 0 rgb(155, 33, 33);}
	to {box-shadow: inset 25px 0 0 0 rgb(155, 33, 33);}
}

.slider-navbar button.slider-navbar_cur-btn {
	background-color: rgb(167, 81, 81);
}

.slider-navbar_autoplay button.slider-navbar_cur-btn {
	animation: 3s linear autoSlideFill;
}

.slider-navbar button:not(.slider-navbar_cur-btn):hover {
	background-color: rgb(255, 255, 255);
}

#block {
	width: 100px;
	height: 100px;
	position: absolute;
	background-color: rgb(141, 99, 99);
	right: 50px;
	bottom: 50px;
}

#btn {
	width: 20px;
	height: 20px;
	position: absolute;
	right: 50px;
	bottom: 150px;
}