

/* 09. SLICK Slider
================================================================ */

.slick-slider {
	.qt-item {
		max-width: 300px;
		overflow: hidden;
		margin: 0;
		&.qt-slick-opacity-fx {
			opacity: 0.5;
			transition: opacity 0.3s;
			transition-delay: 0.3s;
		}
		backface-visibility: hidden;
		&.slick-center {
			opacity: 1;
		}
		.qt-part-archive-item {
			margin-bottom: 0;
			&.qt-vertical {
				.qt-item-header {
					.qt-header-mid {
						min-height: 240px;
						height: 240px;
						overflow: hidden;
						padding: 40px 10px;
						.qt-item-title {
							font-size: 1rem;
						}
					}
				}	
			}
		
			&.qt-part-item-post-hero {
				.qt-item-header {
					.qt-header-top {
						display: none;
					}
					.qt-header-mid {
						padding: 80px 0;
						min-height: 180px;
					}
				}
				margin-bottom: 0;
			}
			&.qt-item-podcast {
				.qt-item-header {
					.qt-header-mid {
						padding:  0;
						min-height: 240px;
						height: 240px;
					}
				}
				margin-bottom: 0;
			}
			&.qt-part-archive-item-show {
				.qt-item-header {
					.qt-header-mid {
						min-height: 0;
    					height: 140px;
    					padding: 0 0 15px 0;
					}
				}
			}
		}
	}

	&.qt-slickslider-podcast {
		.qt-item {

		}
	}

	

	/* This is for sliders with multiple items, to use the cols padding of materializecss */
	&.qt-slickslider-multiple {
		.qt-item {
			@extend .col;
			@extend .s12;
		}

	}

	






	.slick-dots {
		position: relative;
		width: 100%;
		text-align: center;
		top: auto;
		bottom: 10px;
		li {
			display: inline-block;
			margin: 4px;
			button {
				content: " ";
				display: block;
				width: 40px;
				height: 6px;
				background: white;
				box-shadow: 0 0 10px rgba(0,0,0,0.5);
				border: none;
				cursor: pointer;
				font-size: 0;
				overflow: hidden;
				color: transparent;
				 outline: none;
				transition: background 0.3s;
			}
			&.slick-active button {
				background: $primary-color;
			}
		}
	}
	&.qt-slickslider-single {
		.slick-dots {
			bottom: 10px;
			position: absolute;
		}
	}
}




/* Arrows
	============================================================= */
.qt-slickslider-container {
	position: relative;
	.slick-arrow {
		position: absolute;
		border: none;
		display: block;
		
		left: 0;
		top: 0;
		z-index: 100;
		height: 100%;
		width: 50px;
		cursor: pointer;
		outline: none;
		color: transparent;
		font-size: 0;
		opacity: 1;
		transition: opacity 0.3s;
		
		background: transparent;
		text-align: right;
		&::after {
			font-size: 3rem;
			display: inline;
		    font-family: "dripicons-v2";
		    speak: none;
		    font-style: normal;
		    font-weight: normal;
		    font-variant: normal;
		    text-transform: none;
		    line-height: 1;
		    content: "\55";
		    -webkit-font-smoothing: antialiased;
		    -moz-osx-font-smoothing: grayscale;
			color: white;
		}
		&.slick-next {

			&::after {
				content: "\56";
			}
			left: auto;
			text-align: left;
			right: 0;
		}
		
	}



	/* Arrows out of the slider
	============================================================= */
	&.qt-slickslider-externalarrows .slick-arrow {
		background: transparent;
		width: 50px;
		left: -38px;
		top: -5px;
		&.slick-next {
			background: transparent;
			right: -38px;
		}
		&::after {
		}
	}
	
}





.qt-slickslider-fullscreen {
	width: 90%;
	margin: 0 auto;
	
}









