/* ---- slider styles ------------------------------------------------------------------- */

section#slider-section {
	position: relative;	
	width: 100%;
}

section#slider-section::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-position: 50% 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url(../img/backdrop.jpg);
	filter: saturate(0%) opacity(6%);
	pointer-events: none;
}

section#slider-section.content {
	position: relative;
}

.slider {
	position: relative;
	width: 100%;
	overflow: hidden;
	height: 600px;
}

.slider-controls {
	position: absolute;
	top: 0;
	right: 0;
	padding: 32px;
}

.slide {
	display: flex;
	flex-direction: column;
	position: absolute;
	margin-left: 100%;
	width: 100%;
	height: 100%;
	padding: 0;
	cursor: pointer;
	overflow: hidden;
}

.slide-background-container {
	position: relative;
	overflow: hidden;	
	flex: 1 0 auto;
}

.slide-background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: 50% 50%;
	transition: transform 0.3s ease-out;
}	

.slide-background::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	pointer-events: none;
}
	
.slide-background:hover {	
	transform: scale(1.1);
}

.slide-title {
	flex: 0 0 auto;
	padding: 0 0 0 0;
	animation: fade-out-left 0.2s ease-out forwards;
	opacity: 0;
}

.slide-header {
	margin: 32px 0 32px 0;
}

.slide-caption {
	padding: 32px;
	background: #111;
}

.animate-active .slide-title {
	animation: fade-in-right 0.2s ease-out forwards;
	animation-delay: 0.6s;
}