@import "library.less";

.grey-container {
	position: relative;
	background: @lightGrey;
	width: 100%;
}

.white-container {
	position: relative;
	background: #fff;
	width: 100%;
}

.page-profile {
	.grey-container;
	
	>.container {
		position: relative;
		width: 1200px;
		margin: 0 auto;
	}
	
	.profile-header {
		position: relative;
		width: 100%;
		height: 530px;
		
		.bg {
			position: absolute;
			z-index: 1;
			left: 0px;
			top: 0px;
			width: 100%;
			height: 100%;
			.cover;
			
			.shadow {
				position: absolute;
				width: 100%;
				height: 251px;
				background: url(../images/profile-header-shadow.png) repeat-x;
				left: 0px;
				bottom: 0px;
			}
		}
		
		.name {
			position: relative;
			text-align: center;
			color: #fff;
			font-size: 40px;
			line-height: 60px;
			top: 330px;
			z-index: 2;
			
			a {
				color: @red;
			}
		}
		
	}
}

.tiles {
	.tile {
		position: relative;
		width: 360px;
		height: 410px;
		margin: 30px 0 0 30px;
		float: left;
		
		a, i {
			display: block;
			color: inherit;
			text-decoration: none;
		}
		.image {
			width: 100%;
			height: 250px;
			overflow: hidden;
			
			i {
				display: block;
				width: 100%;
				height: 100%;
				.cover;
				.transition;
				-webkit-transform: scale(1);
				-moz-transform: scale(1);
				-ms-transform: scale(1);
				-o-transform: scale(1);
				transform: scale(1);
			}
		}
		.title {
			text-align: center;
			font-family: 'garamond-premier-pro-caption';
			font-size: 24px;
			line-height: 28px;
		}
		.info {
			text-align: center;
			font-size: 12px;
			line-height: 14px;
			margin-top: 15px;
			
			span {
				color: @grey;
				font-family: 'garamond-premier-pro-caption';
			}
			.line {
				position: relative;
				display: inline-block;
				margin: 0 10px;
				width: 1px;
				height: 10px;
				background: #000;
				top: 1px;
			}
		}
		.tags {
			color: @red;
			text-align: center;
			margin: 10px 0;
			
			a {
				display: inline;
				font-family: 'trivia-grotesk', sans-serif;
				font-size: 16px;
				line-height: 16px;
				text-transform: lowercase;
				font-variant: small-caps;
				
				&:hover {
					color: lighten(@red, 5%);
				}
			}
		}
		.options {
			position: absolute;
			top: -150px;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			z-index: 2;
			width: 300px;
			height: 82px;
			opacity: 0;
			.transition;
			
			.option {
				float: left;
				width: 150px;
				height: 82px;
				background: @red;
				font-size: 28px;
				line-height: 82px;
				text-align: center;
				color: #ffffff;
				font-family: sans-serif;
				.box-sizing;
				
				&:first-child {
					.part-radius(@tl: 100px, @bl: 100px);
					border-right: 2px solid rgba(255,255,255,0.5);
				}
				&:last-child {
					.part-radius(@tr: 100px, @br: 100px);
				}
				&:hover {
					background: lighten(@red, 5%);
				}
			}
		}
		
		&:hover {
			.image i {
				.transition(@duration: 3s);
				-webkit-transform: scale(1.11111111);
				-moz-transform: scale(1.11111111);
				-ms-transform: scale(1.11111111);
				-o-transform: scale(1.11111111);
				transform: scale(1.11111111);
			}
			.options {
				opacity: 1;
			}
		}
		&:active {
			
		}
	}
}