Iris/src/scss/views/_discover.scss

.discover-view {
	
	.intro {
		position: relative;
		padding: 90px 40px 70px;
		z-index: 1;

		.parallax {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
		}

		h1 {
			font-size: 3rem;
			line-height: 3rem;
		}

		.liner {
			z-index: 2;
			position: relative;
			color: $white;

			h2 {
				padding-bottom: 8px;
			}
		}
	}

	.parameters {
		@include clearfix();
		padding-top: 50px;

		.seeds,
		.tunabilities {
			float: left;
		}
	}

	.seeds {
		.seed {
			color: $white;			
			padding: 0 30px 30px 0;
			float: left;

			.thumbnail-wrapper {
				float: left;
				width: 44px;
				border: 0 !important;
			}

			.label {
				.remove {
					@include animate();
					cursor: pointer;
					font-size: 10px;
					padding: 4px;
					margin-left: 4px;

					&:hover {
						color: $red;
					}
				}
			}

			.name {
				font-size: 16px;
				padding-top: 3px;
			}

			&.has-thumbnail {
				.label,
				.name {
					padding-left: 52px;
				}
			}
		}
	}

	.tunabilities {
		@include clearfix();
		
		.tunability {
			width: 200px;
			float: left;
			box-sizing: border-box;
			padding: 0 30px 30px 0;
			position: relative;

			.input {
				float: none;
				width: 100%;
				padding-top: 4px;
			}

			.input-range {
				.input-range__label-container {
					display: none;
				}
			}

			.remove {
				@include animate();
				cursor: pointer;
				font-size: 10px;
				padding: 4px;
				margin-left: 4px;

				&:hover {
					color: $red;
				}
			}
		}
	}

	.actions {
		padding-top: 40px;

		.autocomplete-field {
			width: 250px;
			display: inline-block;
			vertical-align: top;
			padding: 0;
			margin-right: 1px;

			.input {
				float: none;
				margin: 0 10px 10px 0;

				input {
					background: rgba(100,100,100,0.5);
					color: $white;
					padding: 15px 13px 10px;
					font-size: 16px;
					border: 1px solid transparent;
					border-top-right-radius: 0;
					border-bottom-right-radius: 0;

					&:focus,
					&:active {
						border-color: $blue;
					}
				}

				&:after {
					background: $blue;
				}
			}

			.results {
				top: 49px;
			}
		}

		.dropdown-field {
			.button {
				background: rgba(100,100,100,0.5);
				color: $white;
				padding: 16px 20px 14px 20px;
				border-top-left-radius: 0;
				border-bottom-left-radius: 0;
			}

			.options {
				top: 50px;
				right: 20px;
			}
		}

		.submit {

		}
	}
	
	section {
		.grid {
			padding-bottom: 20px;
		}
	}

	@include responsive($bp_medium){
		
		.intro {
			padding: 40px 20px;
		}

		.parameters {

			.seeds {
				padding-top: 20px;
				float: none;

				.seed {
					float: none;
				}
			}

			.tunabilities {
				float: none;

				.tunability {
					width: 100%;
					float: none;
				}
			}

			.add {
				.add-properties {
					margin-right: 0;
				}
			}
		}

		.col {
			&.tracks {
				width: 100%;
			}

			&.others,
			&.w5 {
				display: none;
			}
		}
	}
}

.discover-featured-view,
.discover-new-releases-view {
	.intro {
		position: relative;
		padding-top: 80px;

		header {
			margin-bottom: 0;
		}

		.parallax {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
		}

		.content {
			padding: 40px;
			color: $white;
			position: relative;
			z-index: 2;

			.thumbnail {
				float: left;
				max-width: 200px;
			}

			h1,
			h2,
			h3,
			.actions {
				padding-left: 240px;
			}

			h2 {
				padding-top: 20px;
			}

			h3 {
				opacity: 0.5;
			}

			.actions {
				padding-top: 40px;
			}
		}
	}

	@include responsive($bp_medium){
		.intro {
			padding-top: 50px;

			.content {
				padding: 20px;

				h1 {
					padding-top: 0;
				}

				h2 {
					padding-top: 0;
				}

				h3 {
					line-height: 1.3em;
				}

				h2,
				h3,
				.actions {
					padding-left: 45%;
				}

				.actions {
					padding-top: 15px;
				}

				.thumbnail {
					max-width: 40%;
				}
			}
		}
	}
}