@clr_blue: #00a4ff;

.same-materials-label {
	width: 100%;
	left: 0px;
	height: 10px;
	padding-bottom: 30px;
	background: url(../images/same.png) no-repeat center center;
}
.same-materials {
/*	border-top: 1px solid #aaa;*/
/*	border-bottom: 1px solid #aaa;*/
	position: relative;
	overflow: hidden;
	height: 620px;
	padding-left: 130px;
/*	box-shadow: inset 0px 2px 15px rgba(0,0,0,0.3);*/
/*	background: url(../images/same.png) no-repeat left center, url(../../../Global/images/ui/grid.png);*/
	
	>.shadow {
		position: absolute;
		width: 100%;
		left: 0px;
		height: 24px;
		
		&.up {
			background: url(../../../Global/images/ui/shadow-up.png);
		}
		&.down {
			bottom: 0px;
			background: url(../../../Global/images/ui/shadow-down.png);
		}
	}
	
	.article {
		float: left;
		position: relative;
		width: 120px;
		height: 226px;
		padding-bottom: 10px;
		margin: 30px 3% 30px 3%;
		font-family: Futura;
		cursor: pointer;
		
		p {
			margin: 0;
		}
		a {
			color: inherit;
			text-decoration: none;
		}
		.tag {
			position: relative;
			font-size: 11px;
			line-height: 12px;
			height: 10px;
			font-family: Futura !important;
			text-transform: uppercase;
			margin-top: 15px;
			text-align: center;
			letter-spacing: 1px;
			z-index: 1;
		}
		.tag a:hover {
			color: @clr_blue;
		}
		img {
			width: 120px;
			height: 120px;
			margin-top: 7px;
		}
		.title {
			font-family: Octava;
			font-size: 15px;
			line-height: 17px;
			margin-top: 10px;
			text-align: center;
		}
		.back {
			position: absolute;
			display: none;
			opacity: 0;
			top: 17px;
			left: 0;
			width: 140%;
			margin-left: -20%;
			height: 100%;
			
			.lead {
				font-family: Futura;
				font-size: 15px;
				line-height: 21px;
				margin: 32px 0 50px 0;
				text-align: center;
			}
			.views {
				display: inline-block;
				padding-left: 20px;
				background: url(../../../Global/images/ui/ico-views.png) no-repeat left center;
				font-family: Futura;
				font-size: 12px;
				margin-top: 20px;
			}
			.comments {
				display: inline-block;
				margin-left: 10px;
				padding-left: 20px;
				background: url(../../../Global/images/ui/ico-comments.png) no-repeat left center;
				font-family: Futura;
				font-size: 12px;
				margin-top: 20px;
			}
		}
		
		&.visual {
			width: 300px;
			height: 226px;
			
			img {
				position: absolute;
				top: 0px;
				width: 100%;
				height: 100%;
			}
			.title {
				position: absolute;
				display: none;
				z-index: 1;
				bottom: 20px;
				text-align: center;
				width: 100%;
				background: rgba(0,0,0,0.7);
			}
			.back {
				top: 0px;
				width: 100%;
				height: 243px;
				margin-left: 0px;
				
				.lead {
					margin-top: 75px;
					font-size: 17px;
				}
				.comments, .views {
					margin-top: 50px;
				}
			}
		}
		
	}
	.article:hover {
		.back {
			display: block !important;
			opacity: 1;
			background: #fff;
		}
	}
}