.transition(@target: all, @duration: 400ms, @type: ease, @delay: 0s) {
	-webkit-transition: @target @duration @type @delay;
	-moz-transition: @target @duration @type @delay;
	-ms-transition: @target @duration @type @delay;
	-o-transition: @target @duration @type @delay;
	transition: @target @duration @type @delay;
}

.box-sizing {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.cover {
	background-size: cover;
	background-position: center center;
}

.clear {
	clear: both;
}

.contain {
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}

/**/

@bgColor: #2E3236;
@black: #221E1F;
@textColor: #F0F2EF;

body, html {
	background-color: @bgColor;
}

.page {
	position: relative;
	background-color: @bgColor;
	
	background-image: url(../images/f2.png);
	/*background-repeat: no-repeat;*/
	background-attachment: fixed;
	background-position: left top;
	
	.decoration {
		position: absolute;
		width: 400px;
		height: 555px;
		top: 50px;
		.cover;
		
		&.left {
			background-image: url(../images/f2.png);
			left: 0;
		}
		
		&.right {
			background-image: url(../images/f1.png);
			right: 0;
		}
	}
	
	.dark {
		/*color: @textColor;*/
		/*background-color: @black;*/
	}
	
	#look {
		@s: 550px;
		
		position: fixed;
		left: 0;
		top: 0;
		z-index: 2;
		width: 100%;
		height: 100%;
		background-color: fadeout(@black, 20%);
		display: none;
	
		.content {
			position: absolute;
			z-index: 3;
			width: @s;
			height: @s;
			left: 50%;
			top: 50%;
			margin-left: -@s / 2;
			margin-top: -@s / 2;
			
			.image {
				width: 100%;
				height: 100%;
				.cover;
			}
			
			.info {
				position: absolute;
				width: 300px;
				left: 100%;
				margin-left: 30px;
				top: 0;
				color: @textColor;
				font-family: 'trivia-grotesk';
				
				.user {
					display: block;
				
					.photo {
						width: 80px;
						height: 80px;
						float: left;
						background-color: @black;
						.cover;
					}
					
					.name {
						float: left;
						max-width: 200px;
						padding-left: 15px;
						padding-top: 15px;
						font-size: 18px;
					}
					
					&:hover {
						.name {
							text-decoration: underline;
						}
					}
				}
				
				.date {
					margin-top: 30px;
					font-size: 12px;
				}
				
				.text {
					margin-top: 30px;
					overflow: hidden;
					font-size: 14px;
					line-height: 24px;
					
					&:empty {
						display: none;
					}
				}
			}
		}
		
		&.shown {
			display: block;
		}
	}
	
	.header {
		width: 900px;
		margin: 0 auto;
		padding-top: 100px;
		color: @textColor;
		
		.column {
			float: left;
			width: 300px;
			padding-right: 30px;
			.box-sizing;
		}
	
		.title {
			font-size: 36px;
			line-height: 40px;
			margin-bottom: 30px;
			font-family: 'oukwat-regular';
		}
		
		.subtitle {
			font-size: 22px;
			line-height: 30px;
			margin-bottom: 50px;
			font-family: 'trivia-serif';
		}
		
		.description {
			font-size: 16px;
			line-height: 22px;
			font-family: 'trivia-grotesk';
		}
	}
	
	.feed-wrapper {
		
	}
	
	.feed {
		margin: 0 auto;
		width: 900px;
		margin-top: 100px;
		padding-bottom: 150px;
		/*background-image: url(../images/f2.png);
		background-repeat: repeat-y;
		background-position: center top;*/
		
		.item {
			@s: 300px;
		
			position: relative;
			width: @s;
			float: left;
			cursor: pointer;
			
			.data {
				display: none;
			}
		
			.image-container {
				width: 100%;
				height: @s;
				background-color: @black;
				background-image: url(../images/load.gif);
				background-repeat: no-repeat;
				background-position: center;
				
				.image {
					width: 100%;
					height: 100%;
					.cover;
				}
			}
			
			.look {
				position: absolute;
				width: 100%;
				height: 100%;
				left: 0;
				top: 0;
				background-color: fadeout(@black, 30%);
				opacity: 0;
				.transition(@target: opacity, @duration: 100ms);
				
				svg {
					position: absolute;
					width: 50%;
					height: 50%;
					color: @textColor;
					left: 0;
					top: 0;
					right: 0;
					bottom: 0;
					margin: auto;
					
					path {
						fill: currentColor;
					}
				}
			}
			
			&:hover {
				.look {
					opacity: 1;
				}
			}
		}
	}
}