.artist-view {
	.intro {
		position: relative;
		@include clearfix;
		margin-bottom: 40px;

		.parallax {
			position: absolute;
			z-index: 0;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			height: auto;
		}

		.liner {
			position: relative;
			z-index: 1;
			padding: 15vh 40px 20px 40px;

			h1 {
				color: #FFFFFF;
				padding-bottom: 20px;
			}

			.actions {
				.button {
					margin-right: 30px;
				}
			}

			.sub-views {
				color: #FFFFFF;
				position: absolute;
				bottom: 0;
				right: 30px;

				.option {
					display: inline-block;
					padding: 8px 0;
					margin: 0 10px;
					font-size: 18px;
					font-weight: 400;
					border-bottom: 4px solid transparent;
					cursor: pointer;

					&.active {
						border-color: $off_white;
					}

					&:not(.active):hover {
						border-color: rgba(255,255,255,0.2);
					}
				}
			}
		}

	}

	.artist-list {
		padding-top: 15px;
	}

	@include responsive( $bp_medium ){
		.intro {
			padding: 50px 30px 60px 30px;

			.parallax {
				height: 100%;
				background: $darkest_grey;
				canvas {
					opacity: 0.2;
					@include blur( 5px );
				}
			}

			.thumbnail {
				position: relative;
				width: 180px;
				margin: 0 auto 10px;
				left: auto;
				bottom: auto;
			}

			.heading-wrapper {
				height: auto;
				position: static;

				.heading {
					position: static;
					bottom: auto;
					left: auto;

					h1 {
						position: relative;
						text-align: center;
						padding: 15px 0;
					}

					.sub-views {
						position: absolute;
						bottom: 0;
						left: 20px;
						right: 20px;
					}
				}
			}

			.details-wrapper {
				padding: 0;
				position: relative;
				left: 0;
				right: 0;
				padding: 20px 0;
				z-index: 3;

				.actions {
					text-align: center;
					margin: 0;
					float: none;

					button {
						margin: 0 3px;
					}
				}

				.details {
					display: none;
				}
			}
		}

		.body {
			&.overview {
				.col.w70 {
					width: 100%;
				}
				.col.w5,
				.related-artists {
					display: none;
				}
			}
		}
	}
}