/**
 * 9. =Featured & Sliders
 * ----------------------------------------------------------------------------
 */
 
@keyframes slider-fade-in {
  from {
    opacity: 0;
    transform: translate3d(0, 0px, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.slick-initialized img {
	display: inline;
}

// Slider navigation arrows
.common-slider {
	
	.slick-arrow {
		display: none;
		position: absolute;
		z-index: 100;
		top: 50%;
		left: 0;
		margin-top: -16px; 
		
		background: transparent;
		border: 1px solid #fff;
		color: #fff;
		font-size: 18px;
		height: 32px;
		width: 30px;
		line-height: 30px;
		text-align: center;
		box-sizing: border-box;
		transition-property: color, background;
		
		i {
			line-height: inherit;
		}
		
		&:hover {
			background: #fff;
			color: #161616;
		}
	}
		
	.prev-arrow {
		left: 25px;
	}
	
	.next-arrow {
		left: auto;
		right: 25px;
	}
	
	.item {
		opacity: 0;
		transition: opacity 0.2s ease-in;
	}
	
	.slides {
		max-height: 400px;
	}

	.loaded {
		
		&.slides {
			max-height: none;
		}
		
		.item {
			opacity: 1;
		}
	}
	
	// Paralax - hide image
	.parallax .wp-post-image {
		visibility: hidden;
	} 
}


/**
 * The Main Slider
 */
.main-slider {
	margin-bottom: 65px;
	width: 100%;
	font-family: $title-font;

	img {
		max-width: 762px;
		transition: filter 0.3s ease-in;
		
		&:hover {
			opacity: 1;
		}
	}

	.item {
		position: relative;
		margin-right: 3px;
	
		&:after {
			content: "";
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 98%;
			
			background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(140,140,140,0) 45%,rgba(0,0,0,0.36) 100%);
			pointer-events: none; 
			transform: translate3d(0,0,0);
		}

		&:hover img {
			filter: brightness(110%);
		}
	}

	.slider-overlay {
		position: absolute;
		display: none;
		bottom: 0;
		width: 100%;
		padding: 28px;
		padding-bottom: 24px;
		z-index: 1;
		box-sizing: border-box;
	}
	
	
	.prev-arrow {
		left: initial; 
		margin-left: -50px;
	}

	.next-arrow {
		left: initial;
		right: initial;
		margin-left: 20px;
	}
}

// Active animation with a delay for main slider
.active .slider-overlay {
	animation: 0.35s slider-fade-in;
	animation-fill-mode: both;
	animation-delay: 0.4s;
	display: block;
}

// Slider overlay for main slider
.slider-overlay {

	.category {
		display: inline-block;
		background: #fff;
		padding: 0 8px;
		line-height: 24px;
		font-size: 11px;
		font-weight: 500;
		letter-spacing: 0.1em;
		text-transform: uppercase;
	}
	
	.heading {
		margin-top: 15px;
		margin-bottom: 7px;
		font-family: $title-font;
		font-size: 38px;
		font-weight: 600;
		line-height: 1.3;

		@include breakpoint(1500px) {
			font-size: fluid-size((small: 28px, 1500px: 38px));
		}

		@include breakpoint(small) {
			font-size: 28px;
		}
	}
	
	.heading a {
		color: #fff;
	}
	
	.excerpt {
		color: #fff;
		font-size: 16px;
		-webkit-font-smoothing: antialiased;
	}
	
	.excerpt p {
		margin: 0;
	}
	
	.read-more {
		float: right;
		margin-top: -36px;
		padding: 10px 16px;
		background: transparent;
		border: 1px solid #fff;
		
		color: #fff;
		text-transform: uppercase;
		font-size: 11px;
		font-weight: 500;
		line-height: 1;
		letter-spacing: 0.11em;
		
		@include breakpoint(x-small) {
			display: none;
		}
	}
	
	.read-more:hover {
		background: #fff;
		color: inherit;
	}
}


// For medium devices, adjust the arrows and images
@include breakpoint(medium) {
	.main-slider { 
	
		.slick-arrow {
			margin-left: 0;
		}
	
		.prev-arrow {
			left: 25px;
		}
		
		.next-arrow {
			right: 25px;
			left: auto;
		}
		
		img {
			max-width: initial;
			width: 100%;
		}
		
		.item {
			margin: 0;
		}
	}
}

@include breakpoint(x-small) {
	.main-slider .slick-arrow {
		display: none !important;
	}
}

// Gallery slider for posts
.gallery-slider {
	.prev-arrow {
		left: 25px;
	}
	
	.next-arrow {
		right: 25px;
		left: auto;
	}
}

.gallery-slider-lg {
	height: inherit;
	
	.slick-list,
	.slick-track,
	.slick-slide > a {
		height: inherit;	
	}
	
	.slick-slide {
		margin: 0 3px;
		
		&:after {
			position: absolute;
			content: "";
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(#111, 0.29);
			transition: background 0.3s ease-in;
			pointer-events: none;
			will-change: opacity;
		}
	}
	
	img {
		width: auto;
		height: 100%;
	}
	
	&.parallax img {
		visibility: hidden;
	} 
}


/**
 * Stylish Slider - Borrows from .main-slider and modifies
 */
.stylish-slider {
	
	img {
		max-width: 900px;
		
		// Decrease width for large tablets to prevent pagination
		// going out of bounds.
		@include breakpoint(large, medium) {
			max-width: 700px;
		}
	}
	
	.active .slider-overlay {
		animation: 0.35s fade-in;
		animation-fill-mode: both;
		animation-delay: 0.4s;
	}
	
	.slider-overlay {
		top: 50%;
		bottom: auto;
		padding: 20px;
		transform: translate3d(0, -50%, 0);
		text-align: center;
	}
	
	.heading {
		font-size: 38px;
		line-height: 1.3;
		max-width: 90%;
		margin-left: auto;
		margin-right: auto;
		
		@include breakpoint(small) {
			font-size: 24px;
		}
	}
	
	.excerpt {
		@include breakpoint(tiny) {
			display: none;
		}
	}
	
	.read-more {
		display: inline-block;
		float: none;
		margin-top: 24px;
	}
	
	.item {
		margin-right: 10px;
	}
	
	.item:after {
		background: rgba(0,0,0,.28);
		top: 0px;
		width: calc(100% - 20px);
		height: calc(100% - 20px);
		margin: 10px;
	}
	
	.prev-arrow {
		margin-left: -60px;
	}
	
	.next-arrow {
		margin-left: 30px;
	}
}

/**
 * Carousel Slider
 */
.carousel-slider {
	max-width: 100%;
	overflow: hidden;
	
	.item {
		position: relative;
		margin-right: 30px;
		transform: translate3d(0, 0, 0);
		
		&:after {
			position: absolute;
			content: "";
			border: 1px solid #fff;
			top: 0px;
			width: calc(100% - 30px);
			height: calc(100% - 30px);
			margin: 15px;
			z-index: 3;
			pointer-events: none;
			transform: translate3d(0, 0, 0);
		}
	}
	
	@include breakpoint(medium) {
		img {
			width: 100%;
			max-width: initial;
			max-height: 300px;
			
			object-fit: cover;
			// For polyfill
			font-family: 'object-fit: cover;';
		}
	}
	
	.slick-list {
		margin-right: -30px;
	}
	
	// Prevent a flash in Chrome on first slide.
	// DO NOT add both slick-track and slick-list - causes blurriness in Safari
	.slick-track {
		-webkit-perspective: 2000;
	}
	
	.overlay {
		position: absolute;
		z-index: 2;
		width: 100%;
		bottom: 0;
		left: 0;
		padding: 0 30px;
		padding-bottom: 35px;
		background: rgba(#000, 0.6);
		box-sizing: border-box;
		text-align: center;
		pointer-events: none;
		transform: translate3d(0, 0, 0);
		transition: all 0.3s ease-in;
		
		@include breakpoint(large) {
			width: 100%;
		}
	}
	
	.item:hover .overlay {
		background: rgba(#000, 0.7);
	}
	
	img:hover {
		opacity: 1;
	}
	
	.category {
		display: inline-block;
		vertical-align: top;
		transform: translateY(-50%);
		background: $main-color;
		color: #fff;
		padding: 7px 11px;
		line-height: 1;
		font-family: $title-font;
		font-size: 12px;
		font-weight: 500;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		pointer-events: auto;
		-webkit-font-smoothing: antialiased;
	}
	
	.heading {
		margin-top: 8px;
		margin-bottom: 4px;
		font-family: $title-font;
		font-size: 23px;
		font-weight: 500;
		line-height: 1.4;
	}
	
	.heading a {
		color: #fff;
	}
	
	.slick-arrow {
		opacity: 0;
		visibility: hidden;
		transition-property: all;
	}
	
	.slides:hover .slick-arrow {
		opacity: 1;
		visibility: visible;
	}
}

/**
 * Grid Tall Slider
 */
 
.grid-b-slider {
	
	.item {
		position: relative;
		margin-right: percentage(2/1170);
		transform: translate3d(0, 0, 0);
		float: left;
		
		&:after {
			position: absolute;
			content: "";
			top: 0;
			width: 100%;
			height: 100%;
			background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 45%,rgba(0,0,0,0.65) 100%);
			transition: opacity 0.4s ease-in-out;
			pointer-events: none;
		}
		
		&:hover:after {
			opacity: 0.8;
		}
		
		&:last-child {
			margin-right: 0;
		}
		
		&:hover img {
			transform: scale(1.06);
		}
	}
	
	.item-large {
		width: percentage(554/1170);
		
		@include breakpoint(medium) {
			width: 100%;
			max-height: 400px;
			margin-right: 0;
			margin-bottom: 2px;
			
			.wp-post-image {
				max-height: 400px;
			}
		}
	}
	
	.item-small {
		width: percentage(306/1170);
		
		@include breakpoint(medium) {
			width: calc(50% - 1px);
			margin-right: 2px;
			max-height: 300px;
			
			.wp-post-image {
				max-height: 300px;
			}
		}
	}
	
	.overlay {
		position: absolute;
		z-index: 2;
		width: 100%;
		bottom: 0;
		left: 0;
		padding: 0 27px;
		padding-bottom: 28px;
		box-sizing: border-box;
		pointer-events: none;
		transform: translate3d(0, 0, 0);
		
		@include breakpoint(large) {
			width: 100%;
		}
		
		@include breakpoint(small) {
			padding-left: 20px;
			padding-right: 20px;
		}
		
		@include breakpoint(x-small) {
			padding-left: 14px;
			padding-right: 14px;
		}
	}
	
	.wp-post-image {
		width: 100%;
		object-fit: cover;
		font-family: 'object-fit: cover;';
		
		transition: transform 0.5s ease-in;
		
		&:hover {
			opacity: 1;
		}
	}
	
	.image-link {
		display: block;
		overflow: hidden;
	}
	
	// Post Meta
	
	.post-meta {
		color: #fafafa;
		margin-bottom: 0;
		-webkit-font-smoothing: antialiased;
	
		.post-author a {
			color: inherit;
			font-weight: 500;
		}
	
		.by {
			display: none;
		}
	}
	
	// Hide all meta except heading
	.item-small .post-meta {
		@include breakpoint(x-small) {
			> :not(.heading) {
				display: none;
			}
			
			.heading {
				margin-bottom: 0;
			}
		}
	}
		
	.cat-label {
		position: static;
	}
	
	.category {
		background: $main-color;

		pointer-events: auto;
	}
	
	.heading {
		margin-top: 15px;
		margin-bottom: 15px;
		font-family: $title-font;
		font-size: 32px;
		font-weight: 600;
		line-height: 1.2;
		
		@include breakpoint(x-small) {
			font-size: 25px;	
		}
	}
	
	.heading a {
		color: #fff;
	}
	
	.item-small {
		.heading {
			font-size: 23px;
			line-height: 1.28;
			
			@include breakpoint(x-small) {
				font-size: 19px;
			}
		}
	}
	
}

/**
 * Bold Slider
 */
.bold-slider {
	font-family: $title-font;
	
	&:hover .slick-arrow {
		visibility: visible;
		opacity: 1;
	}
	
	.item {
		position: relative;
		height: 660px;
		min-height: 480px;
		
		@include breakpoint(1500px, small) {
			height: calc(100vw * 0.44);
		}
		
		@include breakpoint(small) {
			min-height: initial;
			height: 400px;
		}
		
		@include breakpoint(x-small) {
			height: 300px;
		}
		
		&:after {
			position: absolute;
			content: "";
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(#111, 0.29);
			transition: background 0.3s ease-in;
			pointer-events: none;
			will-change: opacity;
		}
		
		&:hover:after {
			background: rgba(#000, 0.4);
		}
		
		> a {
			display: block;
			height: 100%;
		}
	}
	
	.wp-post-image {
		max-width: 100%;
		width: 100%;
		height: inherit;
		object-fit: cover;
		
		// No opacity changes needed
		will-change: initial;
		
		// For polyfill
		font-family: 'object-fit: cover;';
		
		&:hover {
			opacity: 1;
		}
	}

	.item .wp-post-image:hover {
		box-shadow: none;
		transform: none;
		filter: none;
	}
	
	.overlay {
		position: absolute;
		z-index: 2;
		width: 80%;
		max-width: 650px;
		top: 50%;
		left: 50%;
		margin-top: -20px;
		transform: translate3d(-50%, -50%, 0);
		padding: 25px;
		box-sizing: border-box;
		text-align: center;
		
		opacity: 0;
		
		@include breakpoint(x-small) {
			max-width: 95vw !important;
		}
	}
	
	.active .overlay {
		opacity: 1;
		
		> * {
			animation: 0.96s fade-in-up-lg, 1s fade-in;
			animation-timing-function: cubic-bezier(0.32, 0.29, 0, 0.96);
			animation-fill-mode: both;
			animation-delay: 0.75s;
		}
		
		> :nth-child(1) {
			animation-delay: 0.35s;
		}
		
		> :nth-child(2) {
			animation-delay: 0.55s;
		}
		
		> :nth-child(3) {
			animation-delay: 0.75s;
		}
	}
		
	.cats {
		display: block;
		
		a {
			display: inline-block;
			padding: 0 8px;
			background: #000;
			color: #fff;
			line-height: 26px;
			font-size: 12px;
			font-weight: 500;
			letter-spacing: 0.1em;
			text-transform: uppercase;
			-webkit-font-smoothing: antialiased;
		}
	}
	
	.heading {
		margin-top: 21px;
		font-family: $title-font;
		font-size: 44px;
		font-weight: 700;
		line-height: 1.3;
		letter-spacing: -0.01em;
		
		@include breakpoint(small) {
			font-size: 31px;
		}
	
		@include breakpoint(x-small) {
			font-size: 28px;
		}
	}
	
	.heading a {
		color: #fff;
	}
	
	.author {
		display: inline-block;
		margin-top: 27px;
		color: #fff;
		text-transform: uppercase;
		font-size: 11px;
		font-weight: 500;
		line-height: 1;
		letter-spacing: 0.1em;
		
		@include breakpoint(x-small) {
			display: none;
		}
		
		a {
			color: inherit;
		}
	}
	
	.slick-arrow {
		margin-top: -19px;
		height: 38px;
		width: 38px;
		border: 0;
		border-radius: 50%;
				
		background: rgba(#fff, 0.5);
		color: #000;
		font-size: 22px;
		line-height: 36px;
		
		visibility: hidden;
		opacity: 0;
		transition: all 0.3s ease-in;

		@include breakpoint(small) {
			display: none !important;
		}
	}
	
	.next-arrow {
		padding-left: 3px;
	}
	
	.prev-arrow {
		padding-right: 3px;
	}
	
	
	// Thumbnails 
	// ----
	.thumbs-wrap {
		display: flex;
		position: relative;
		margin-bottom: -4px;
		justify-content: center;
		transform: translate3d(0, 0, 0);
	}
	
	.thumbs {
		display: flex;
		margin-top: -50px;
		padding: 9px;
		background: #fff;
	}
	
	.post-thumb {
		padding-right: 9px;
		
		img {
			display: block;
			width: 136px;
			height: 90px;
			object-fit: cover;
			
			// For polyfill
			font-family: 'object-fit: cover;';		
		}
		
		&:last-child {
			padding-right: 0;
		}
	}
	
	.thumbs .active img {
		filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.13));
	}
	
}

/**
 * Fashion Slider
 */
 .fashion-slider {
	position: relative;

	.slick-track {
		-webkit-perspective: 2000;
	}
	
	.wrap {
		@include breakpoint(medium) {
			max-width: none;
			max-width: initial;
			width: 100%;
			padding: 0;
		}
	}
	
	.item {
		position: relative;
		height: 625px;
		min-height: 400px;
		
		@include breakpoint(1400px, medium) {
			height: calc(100vw * 0.4);
		}
		
		@include breakpoint(medium) {
			min-height: auto;
			min-height: initial;
			height: 400px;
		}
		
		@include breakpoint(x-small) {
			height: 300px;
		}
	}

	.image-link {
		display: block;
		height: 100%;
	}
	
	.wp-post-image {
		width: 100%;
		max-width: none;
		max-width: initial;
		height: inherit;
		will-change: initial;

		object-fit: cover;
		
		// For polyfill
		font-family: 'object-fit: cover;';

		&:hover {
			opacity: 1;
		}
	}
	
	.overlay-wrap {		
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		pointer-events: none;
	}

	.overlay {
		max-width: 680px;
		min-width: 50%;
		opacity: 0;
		will-change: opacity;
		pointer-events: auto;

		padding: 35px 45px;
		//box-shadow: 0 0 15px rgba(0, 0, 0, 0.01);
		box-shadow: 3px 3px 5px rgba(#000, 0.03); 
		box-sizing: border-box;

		background: rgba(#fff, 0.96);
		text-align: center;

		@include breakpoint(small) {
			max-width: 90%;
			min-width: 350px;
		}

		@include breakpoint(x-small) {
			padding: 20px 15px;
		}
	}

	.active .overlay {
		opacity: 1;
		animation: 0.8s fade-in-up-lg, 0.9s fade-in;
		animation-timing-function: cubic-bezier(0.32, 0.29, 0, 0.96);
		animation-fill-mode: both;
		animation-delay: 0.75s;
	}
	
	.post-meta {
		margin-bottom: 0;
	}
	
	.post-title {
		margin-top: 20px;
		margin-bottom: 20px;
		font-size: 33px;
		line-height: 1.3;
		
		@include breakpoint(large) {
			font-size: fluid-size((small: 28px, large: 30px));
		}

		@include breakpoint(small) {
			font-size: 24px;
		}
	}
	
	.post-date {
		@include breakpoint(tiny) {
			display: none;
		}
	}
	
	.slick-arrow {
		opacity: 0;
		visibility: hidden;
		transition-property: all;
	}

	.prev-arrow {
		left: 36px;
	}

	.next-arrow {
		right: 36px;
	}
	
	.slides:hover .slick-arrow {
		opacity: 1;
		visibility: visible;
	}
}