.section-top-artists-from {

	footer {
		text-align: right;
		padding-top: 20px;
	}

	.section-main {

		@media @bp_1024 {
			.clearfix;
			margin: 0;
			display: flex;
			flex-direction: row;
			flex: 1;
			width: 100%;
		}

		> .col-1 {

			@media @bp_1024 {
				.box-sizing;
				width: 33.33%;
				float: left;
				display: flex;
				flex: 1;
				flex-direction: column;
				justify-content: flex-start;
				align-items: flex-start;
			}

			@media @bp_1200 {
				width: 41.66%;
				flex: 5;
			}
		}

		> .col-2 {

			@media @bp_1024 {
				width: 66.66%;
				float: right;
				flex: 2;
			}

			@media @bp_1200 {
				width: 58.33%;
				flex: 7;
			}
		}
	}

	.wrapper {
		.clearfix;
		padding: 30px;
		background-color: @white;
	}

	.inside-wrapper {
		margin: -15px;

		@media @bp_768 {
			.box-sizing();
			margin: 0;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			width: 100%;
		}
	}

	.sub-col-1,
	.sub-col-2 {
		.box-sizing();

		@media @bp_768 {
			//width: 50%;
			//float: left;
			padding: 0 15px;
		}
	}

	.sub-col-1 {

		@media @bp_768 {
			width: 290px;
			max-width: 290px;
			padding: 0;
		}
	}

	.sub-col-2 {
		text-align: center;

		@media @bp_768 {
			text-align: left;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			flex: 1;
			padding-right: 0;
			padding-left: 30px;
		}
	}

	.tracks {
		text-align: left;

		.tracks-list-item {
			padding-top: 10px;
			padding-bottom: 10px;
		}

		.btn-play {
			background-size: 14px;
		}

		.col-1,
		.col-4 {
			display: none;
		}
	}

	.side-filter {
		.clearfix;
		padding-bottom: 30px;
		text-align: left;

		.btn {
			text-align: left;

			@media @bp_768 {
				.font-size(22);
				clear: none;
				vertical-align: middle;
				display: inline-block;
			}

			@media @bp_1024 {
				clear: both;
				.font-size(32);
			}

			@media @bp_1200 {
				.font-size(42);
			}
		}
	}

	.list-tracks {

		li:last-child {

			.tracks-list-item {
				border-bottom: 0;
			}
		}
	}

	.btn-side-filter {
		//white-space: nowrap;
		margin-right: 35px;
		
		@media @bp_768 {
			float: left;
			clear: both;
			margin: 0 30px 10px 0;
		}

		@media @bp_1024 {
			margin: 30px 30px 0 0;
		}

		@media @bp_1440 {
			margin-top: 45px;
		}

		&:first-child {
			margin-top: 0;
		}

		&:last-child {
			margin-right: 0;
		}
	}

	.card {
		max-width: 290px;
		margin: 0 auto;

		@media @bp_1024 {
			width: 290px;
		}

		figure {
			height: 290px;
		}

		h3 {
			display: none;
		}

		article {
			height: 85px;
		}
	}

	.buttons {
		text-align: right;
		padding-top: 10px;

		@media @bp_768 {
			padding-top: 0;
		}
	}
}