// Home slider styles

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

// SLIDER
#home-slider-next {
	border: 2px solid $red;
	border-radius: 6px;
	color: $red;
	cursor: pointer;
	font-size: 20px;
	padding-top: 12px;
	position: absolute;
	text-align: center;
	top: calc(100vh - 140px); 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;
	min-height: 100vh;

	.slick-list, .slick-track {
		height: 100%;
	}
	#imparables-slide {
		min-height: 800px;

		a {
			position: absolute;
			top: 0; left: 0;
			width: 100%; height: 100%;
		}
	}
	.home-slider-slide {
		display: block;
		float: left;
		height: 100%;
		overflow: hidden;
		position: relative;

		.slider-bg-image {
			position: absolute;
			top: 50%; left: 50%;
			transform: translate(-50%, -50%);
			width: 100%; height: 100%;
			z-index: -1;
		}
		.container-fluid, .container-fluid > .row {
			height: 100%;
		}
		.slide-img-wrapper {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 12.5vh;

			.slide-img {
				position: relative;

				img {
					position: relative;
					width: 100%;
					z-index: 2;

					&.home-slider-photo {
						border-radius: 12px;
						box-shadow: 0 8px 20px rgba(0,0,0,0.15);
					}
				}
				.slide-img-accent {
					position: absolute;
				}
			}
		}
		.slide-text {
			color: $gray-800;
			margin-top: 4vh;
			padding-bottom: 64px;
			position: relative;
			text-align: center;
			z-index: 1;

			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;
				}
			}
			p {
				font-size: 16px;
				margin-bottom: 24px;
				text-shadow: 0 1px 8px rgba(0,0,0,0.15);
			}
		}
		.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;
			}
		}
		&.slide-bg-red {

			.slide-text {

				h1 {
					color: $red;
				}
				.white-label-text span {
					background-color: $red;
					color: $white;
				}
			}
		}
		&:after {
			content: '';
			display: block;
			background: linear-gradient(0deg, rgba($white,1) 0%, rgba($white,0) 100%);
			position: absolute;
			bottom: 0; left: 0;
			width: 100%; height: 30%;
			z-index: 0;
		}
	}
}




// 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);
    }
}