/**************************/
/*         ARTISTS        */
/**************************/

.artists {
	padding: 40px 105px;
	background-color: #1b1b1b;
	min-height: calc(100vh - 68px - 226px);
	/*
		68px  - height of header
		226px - height of footer
	*/
}

.artists
.artists__title {
	margin: 0 0 50px;
	color: #fff;
}

.artists
.artists__years {
	/*display: flex;*/
	position: relative;
	width: calc(100% - 64px);
	margin: 0 32px 32px;
}

.artists
.artists__years
.slick-list {
	overflow: hidden;
}

.artists
.artists__years
.slick-track {
	display: flex;
}

.artists
.artists__years
.slick-prev,
.artists
.artists__years
.slick-next {
	width: 18px;
	height: 34px;
	top: calc(50% - 17px);
	transition: .15s ease;
	padding: 1px 0;
	cursor: pointer;
}

@media screen and (max-width: 768px) {
	.artists
	.artists__years
	.slick-prev,
	.artists
	.artists__years
	.slick-next {
		width: 9px;
		height: 16px;
		top: 4px;
	}
}

.artists
.artists__years
.slick-prev {
	position: absolute;
	left: -32px;
}

.artists
.artists__years
.slick-next {
	position: absolute;
	right: -32px;
}

/*.artists*/
/*.artists__years*/
/*.slick-prev:before {*/
	/*content: '';*/
	/*opacity: 1;*/
	/*position: absolute;*/
	/*height: 37px;*/
	/*width: 23px;*/
	/*background-image: url('/images/nav-l.svg');*/
	/*background-repeat: no-repeat;*/
	/*z-index: 1;*/
	/*background-size: 23px;*/
	/*left: calc(50% - 40px);*/
/*}*/

/*.artists*/
/*.artists__years*/
/*.slick-next:before {*/
	/*content: '';*/
	/*opacity: 1;*/
	/*position: absolute;*/
	/*height: 37px;*/
	/*width: 23px;*/
	/*background-image: url('/images/nav-r.svg');*/
	/*background-repeat: no-repeat;*/
	/*z-index: 1;*/
	/*background-size: 23px;*/
	/*left: calc(50% - 40px);*/
/*}*/

.artists
.artists__years
.item {
	display: inline-block;
	font-size: 64px;
	font-weight: bold;
	line-height: 0.98;
	color: #484848;
	transition: .15s ease;
	cursor: pointer;
	text-align: center;
}

.artists
.artists__years
.item:hover {
	color: #e5131c;
	text-decoration: none;
}

.artists
.artists__years
.item.active {
	color: #fff;
}

.artists
.artists__years
.item:not(:last-child) {
	margin-right: 80px;
}

.artists
.artists__list
.item {
	margin: 0 0 30px;
	cursor: pointer;
}

.artists
.artists__list
.item:hover > .item__title {
	color: #e5131c;
}

.artists
.artists__list
.item
.item__pic {
	position: relative;
	margin: 0 0 20px;
	padding-bottom: 100%;
	overflow: hidden;
	background-position: center;
	background-size: cover;

	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	transition: filter .15s ease;
}
.artists
.artists__list
.item:hover > .item__pic{
	-webkit-filter: grayscale(0);
	filter: grayscale(0);
}

.artists
.artists__list
.item
.item__pic
img {
	position: absolute;
	top: 50%;
	left: 50%;
	width: auto;
	min-width: 100%;
	min-height: 100%;
	transform: translate(-50%, -50%);
	transition: .15s ease;
}

.artists
.artists__list
.item
.item__title {
	margin: 0 0 10px;
	font-size: 20px;
	font-weight: bold;
	transition: .15s ease;
	color: #fff;
}

.artists
.artists__list
.item
.item__exp {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.artists
.artists__list
.item
.item__exp
.exp-item {
	margin: 0 6px 6px 0;
	padding: 5px 16px;
	font-size: 12px;
	font-style: italic;
	letter-spacing: 0.5px;
	color: #fff;
	border-radius: 12px;
	background-color: #444;
	transition: .15s ease;
}

.artists .artists__list .item .item__exp .exp-item:hover {
	background-color: #cbcbcb;
	color: #000;
}

@media screen and (max-width: 1280px) {
	.artists {
		padding: 40px;
	}
	.artists
	.artists__title {
		margin: 0 0 50px 70px;
	}
}

@media screen and (max-width: 1024px) {
	.artists .artists__title {
		margin: 0 0 50px 0;
	}
}


@media screen and (max-width: 992px) {
	.artists
	.artists__years {
		flex-wrap: wrap;
		justify-content: space-around;
	}
	.artists
	.artists__years
	.item {
		font-size: 50px;
	}
	.artists
	.artists__years
	.item:not(:last-child) {
		margin-right: 40px;
	}
}

@media screen and (max-width: 767px) {
	.artists {
		padding: 40px 16px;
		min-height: calc(100vh - 68px - 326px);
		/*
			68px  - height of header
			326px - height of footer
		*/
	}
	.artists .artists__title {
		margin: 0 0 50px 0;
	}

	.artists .artists__years .item {
		font-size: 24px;
	}
	.artists .artists__years .item:not(:last-child) {
		margin-right: 16px;
	}
	.artists .artists__list .item .item__title {
		margin: 0 0 24px;
	}
}

@media screen and (max-width: 575px) {
	.artists {
		padding: 40px 16px;
		min-height: calc(100vh - 68px - 396px);
		/*
			68px  - height of header
			396px - height of footer
		*/
	}
}