dude

app.less

.listing-top {
	margin: 25px -10px 20px -10px;

	.desktop(@screen-desktop {
		height: 480px;
	});

	.tabs-outer {

		.nav-tabs {
			margin: 0;
			border: 0;

			li {
				position: relative;
				margin: 0;
				border: 0;
				border-right: 1px solid rgba(255, 255, 255, 0.25);

				&.active, &:hover {
					a {
						.opacity(1);
						background: #1a293c;
					}
				}

				a {
					padding: 9px 50px 9px 30px;
					border: 0;
					border-radius: 0;
					background: transparent;
					color: @white;
					.opacity(0.7);
					.transition(opacity, .2s, ease);

					&:after {
						content: '';
						position: absolute;
						top: 10px;
						right: 20px;
						width: 21px;
						height: 21px;
					}

					&.video-link {
						&:after {
							background: url(../img/icon-video.png) no-repeat;
						}
					}

					&.photos-link {
						padding: 9px 30px;
					}

					&.map-link {
						&:after {
							background: url(../img/icon-map.png) no-repeat;
						}
					}
				}
			}
		}
	}

	.visuals {
		margin-bottom: 20px;
		padding-left: 10px;

		.tabs-outer {
			height: 43px;

			.gradients > .global
		}

		.showcase {
			background: @stone-blue;

			img {
				width: 100%;
			}
		}

		.img-reel {
			padding: 0 10px;

			div {
				height: 80px;
				padding: 0;
			}

			.thumbs {
				position: relative;
				margin: 0;
				padding: 0;
				list-style-type: none;
				z-index: 1;

				li {
					padding: 0;
					.opacity(0.5);

					&.active, &:hover {
						.opacity(1);
					}
					a {
						padding: 0;

						img {
							max-width: 100%;
						}
					}
				}
			}
		}
	}

	.assets {

		.cta-contact {
			padding: 20px;
			margin-bottom: 25px;
			color: @white;


			h2 {
				margin: 10px 0 2px 0;
				font-size: 24px;
				line-height: 1em;
			}

			h3 {
				margin: 0;
				font-size: 16px;

				.fonts > .header-serif
			}

			.email {
				-ms-word-break: break-all;
				word-break: break-all;
				-webkit-hyphens: auto;
				-moz-hyphens: auto;
				hyphens: auto;
			}

			.cta-top {
				margin-bottom: 18px;
				border-bottom: 1px solid @yellow;

				p {
					font-size: smaller;
				}
			}

			.cta-bottom {
				position: relative;

				p {
					margin: 0 0 5px 0;
				}

				a {
					font-size: 16px;
					color: @white;
					text-decoration: underline;
				}

				.icons {
					position: absolute;
					top: 8px;
					right: 0;

					img {
						margin-left: 10px;
					}
				}
			}

			.gradients > .global
		}

		.downloads {
			border-bottom: 1px solid @light-gray;

			h4 {
				margin: 0 0 18px 0;
			}

			a {
				font-size: 18px;
				font-family: @font-family-serif;
				font-weight: 700;
				color: @stone-blue;

				span {
					position: relative;
					float: right;
					padding-right: 30px;
					font-size: 14px;

					&:after {
						content: '';
						position: absolute;
						top: -3px;
						right: 0;
						width: 21px;
						height: 22px;
						background: url(../img/icon-download.png) no-repeat;
					}

					.fonts > .subtitle
				}
			}

			ul {

				li {

					&:last-child {
						margin: 0;
						padding: 10px 0 5px;

						a {
							position: relative;
							color: @slate-blue;

							&:after {
								content: '';
								position: absolute;
								top: 7px;
								right: -50px;
								width: 33px;
								height: 19px;
								background: url(../img/icon-arrow-yellow.png) no-repeat;
							}
						}
					}
				}
			}
		}
	}	
}