/* SMALL ======================================================= */
@media #{$small-and-down} {
	.qt-footer-bottom {
		padding: 2rem 0 4rem 0;
		.qt-menu-social {
			padding: 1.5rem 0;
			text-align: center;
			li {
				float: none !important;
				display: inline-block;
			}
		}
	}


	
	.qt-slickslider-container .slick-slider.qt-slickslider-single .qt-item .qt-part-archive-item.qt-part-item-post-hero .qt-item-header .qt-header-mid .qt-title a {
	    font-size: 1.8rem;
	    display: block;
	    display: -webkit-box;
	    max-width: 100%;
	    -webkit-line-clamp: 4;
	    -webkit-box-orient: vertical;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    ine-height: 1.05em;
	    height: 4.2em;
	}


}

/* TABLET ======================================================= */
@media #{$small-and-up} {
	/*  GENERAL */
	.qt-spacer-l {
	margin-top: 4rem;
	}
	.qt-spacer-m {
		margin-top: 2.4rem;
	}
	.qt-spacer-s {
		margin-top: 1.2rem;
	}

	.qt-vertical-padding-l {
		padding: 4rem 0;
	}
	.qt-vertical-padding-m {
		padding: 2.4rem 0;
	}

	.qt-vertical-padding-s {
		padding: 1.2em 0;
	}

	/* Slick slider
   ========================================================================== */
	.slick-slider {
		
	}



	/* Slick slider (desktop for slidk-slider.scss)
   ========================================================================== */

	.qt-slickslider-container {
		.slick-slider {
			.qt-item {
				max-width: 650px;
				.qt-item-header {
					.qt-header-mid {
						min-height: 360px;
						height: 360px;
						.qt-item-title {
							font-size: 1.8rem;
						}
					}
				}
			}
			&.qt-slickslider-single {
				.qt-item {
					max-width: 800px;
					width: 800px;
					.qt-part-archive-item {
						&.qt-part-item-post-hero {
							.qt-item-header {
								.qt-header-mid {
									padding: 80px 0;
									min-height: 180px;
								}
							}
							margin-bottom: 0;
						}
					}
				}
				.slick-dots {
					bottom: 10px;
				}
			}

			&.qt-slickslider-multiple {
				.qt-item {
					max-width: $qt-max-container-size;

					.qt-part-archive-item {

						&.qt-vertical {
							.qt-item-header {
								.qt-header-mid {
									min-height: 190px;
									height: 190px;
									padding: 0 1rem;;
									.qt-item-title {
										font-size: 2rem;
									}
								}
							}	
						}
					
					}
				}
			}
			.slick-dots {
				bottom: 0;
				margin-top: 15px;
			}

		}

		
		.slick-arrow {
			position: absolute;
			border: none;
			display: block;
			top: 0;
			left: 0;
			z-index: 100;
			height: 100%;
			width: 50px;
			cursor: pointer;
			background: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
			background: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
			background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */
			outline: none;
			color: transparent;
			font-size: 0;
			opacity: 1;
			transition: opacity 0.3s;
			// display: none;
			&:hover {
				opacity: 1;
			}
			&.slick-next {
				left: auto;
				right: 0;
				background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 2%, rgba(0,0,0,1) 100%);
				background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 2%,rgba(0,0,0,1) 100%); 
				background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 2%,rgba(0,0,0,1) 100%);
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=1 );
				&::after {
					content: "\56";
				}
			}
		}
		
	}


	 /* Chart tracklist
    ========================================================================== */
	.qt-chart-tracklist {
		.qt-chart-track {
			.qt-chart-table {
				display: table;
				.qt-position, .qt-titles, .qt-action {
					display: table-cell;
					width: 170px;
				}
				.qt-titles {
					width: auto;
					padding: 0 14px 0 40px;
				}
				.qt-action {
					display: table-cell;
					width:auto;
					padding: 0 20px 0 0;
				}
			}
		}
	}

}


@media #{$large-and-down} {
	.qt-slickslider-container {
		overflow: hidden;

		&.qt-slickslider-externalarrows {
			.slick-arrow {
				left: 10px;
				&.slick-next {
					left: auto;
					right: 8px;
				}
			}
		}
	}
	
}

