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

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

		.thumbnail {
			position: absolute;
			z-index: 2;
			max-width: 240px;
			bottom: 0;
			left: 40px;
		}

		.heading-wrapper {
			height: 50vh;
			position: relative;
			z-index: 2;

			.heading {
				position: absolute;
				bottom: 0;
				left: 320px;

				h1 {
					color: #FFFFFF;
					padding-top: 30px;
					padding-bottom: 10px;
				}

				.sub-views {
					color: #FFFFFF;

					.option {
						display: inline-block;
						padding: 8px 0;
						margin-right: 20px;
						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);
						}
					}
				}
			}
		}

		.details-wrapper {
			padding-left: 320px;
			padding-top: 35px;

			.actions {
				float: left;
				margin-right: 20px;
			}

			.details {
				padding-top: 6px;
			}
		}

	}

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

	@include responsive( $bp_medium ){
		.intro {

			padding: 50px 30px 0 30px;
			margin: 0 0 100px 0;

			.parallax {
				height: 100%;
				canvas {
					@include blur( 10px );
				}
			}

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

			.heading-wrapper {
				height: auto;

				.heading,
				.sub-views {
					position: relative;
					bottom: auto;
					left: auto;
				}
			}

			.details-wrapper {
				padding: 0;
				position: absolute;
				bottom: -90px;
				left: 30px;
				width: 100%;
				z-index: 2;
			}
		}

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