// Home slider styles

// Slick reset
.slick-slide {
	outline: none !important;
}

// SLIDER
#home-slider-next {
	border: 2px solid $white;
	border-radius: 6px;
	color: $white;
	cursor: pointer;
	font-size: 20px;
	padding-top: 12px;
	position: absolute;
	text-align: center;
	top: calc(100vh - 78px); right: 30px;
	@include transition(0.15s);
	width: 48px; height: 48px;
	z-index: 1001;

	&:hover {
		background-color: $white;
		box-shadow: 0 0 0 0.2rem rgba($white, 0.5) !important;
		color: $red;
	}
}
#home-slider {
	overflow: hidden;
	height: 100vh;

	.slick-list, .slick-track {
		height: 100%;
	}
	.home-slider-slide {
		float: left;
		height: 100%;
		position: relative;

		.slider-bg-image {
			position: absolute;
			top: 50%; left: 50%;
			transform: translate(-50%, -50%);
			width: 100%; height: 100%;
		}
		.container-fluid {
			height: 100%;
		}
		.slide-text {
			color: $white;
			margin-top: 10vh;
			text-align: center;

			img {
				margin-left: auto;
				margin-right: auto;
				max-width: 100%;
			}
			h2 {
				font-size: 36px;
				font-weight: $light;
				letter-spacing: 0.02em;
				text-shadow: 0 1px 16px rgba(0,0,0,0.2);

				&:after {
					content: '';
					display: block;
					@include transColor($white, 0.6);
					margin: 32px auto 32px;
					width: 80px; height: 2px;
				}
				sup {
					display: inline-block;
					font-size: 0.25em;
					position: relative;
					top: -2em;
				}
			}
			h3 {
				font-weight: $light;
				letter-spacing: 0.2em;
				text-shadow: 0 1px 12px rgba(0,0,0,0.3);
				text-transform: uppercase;
			}
			p {
				font-size: 16px;
				margin-bottom: 24px;
				text-shadow: 0 1px 8px rgba(0,0,0,0.3);
			}
			.btn {
				text-shadow: 0 1px 8px rgba(0,0,0,0.3);
			}
		}
		.slide-float {
			animation: fg-drift ease-out 14s 1 both;
			-webkit-mask-image: linear-gradient(to bottom, black 90%, transparent 100%);
			mask-image: linear-gradient(to bottom, black 90%, transparent 100%);
			position: absolute;
		}

		&#red-slide {
			background: #931a25;
			background: -moz-linear-gradient(-25deg, #830a15 0%, #cf585a 100%);
			background: -webkit-linear-gradient(-25deg, #830a15 0%,#cf585a 100%);
			background: linear-gradient(155deg, #830a15 0%,#cf585a 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#830a15', endColorstr='#cf585a',GradientType=1 );
    		background-size: 500% 500%;

    		img {
    			margin-bottom: 48px;
    			margin-left: auto; margin-right: auto;
    			max-width: 60%;
    			width: 240px;
    		}
		}
		&.animate-slide {

			&#red-slide {
				animation: bg-drift-gradient ease-out 14s 1 both;
			}
			.slider-bg-image {
				animation: bg-drift ease-out 14s 1 both;
			}
		}
		&.dark-slide:before {
			content: '';
			display: block;
			background-color: rgba(#000, 0.25);
			position: absolute;
			top: 0; left: 0;
			width: 100%; height: 100%;
		}
		&.dark-slide-text {
			color: $gray-900;

			h2, p {
				color: $gray-900;
			}
		}
	}
}




// Animations
@keyframes bg-drift {
    from {
    	transform: translate(-49%, -47%) scale(1.25);
    }
    to {
    	transform: translate(-50%, -50%) scale(1.1);
    }
}
@keyframes bg-drift-gradient {
    from {
    	background-position: 0% 50%;
    }
    to {
    	background-position: 100% 50%;
    }
}
@keyframes fg-drift {
    from {
    	transform: translate(0,0) scale(1);
    }
    to {
    	transform: translate(-1vw, -1vh) scale(1.05);
    }
}