#stage
{
	
}

/*
	section
*/

.section .wrapper
{
	width: calc(100% - 100px);
	max-width: 1200px;
	margin: 0 auto;
}

/*
	cover
*/

#cover
{
	position: relative;
	height: 720px;
	margin-bottom: 100px;
	background: #000;
	overflow: hidden;
}
	#cover .logo
	{
		top: 50px;
		background: url('../img/logo-white.png') no-repeat 0% 0%;
		background-size: contain;
		width: 80px;
		height: 20px;
		z-index: 2;
	}
	#cover .social
	{
		position: absolute;
		right: 30px;
		top: 30px;
		color: #fff;
		z-index: 9;
	}
		#cover .social a
		{
			display: block;
			width: 50px;
			height: 50px;
			line-height: 56px;
			text-align: center;
			background-color: rgba(255, 255, 255, 0);
		}
			#cover .social a:hover
			{
				background-color: rgba(255, 255, 255, .1);
			}

	#cover .background
	{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #000 url('../img/cover-1.jpg') no-repeat 50% 50%;
		background-size: cover;
		z-index: 0;
		
		opacity: 0;
	}
	#cover .foreground
	{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
		
		text-align: center;
		opacity: 0;
	}	
		#cover .foreground h1
		{
			display: inline-block;
			width: 80%;
			color: #fff;
			font-size: 90px;
			line-height: 90px;
			font-weight: 200;
			margin-top: 150px;
		}
		#cover .foreground p
		{
			display: inline-block;
			width: 560px;
			color: #c3b29c;
		}
	
/*
	grid
*/

#grid
{
	
}
	#grid .item
	{
		position: relative;
		float: left;
		margin-bottom: 30px;
		overflow: hidden;
	}
		.image .foreground,
		#grid .item .foreground
		{
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			z-index: 1;
		}
		.image .background,
		#grid .item .background
		{
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			z-index: 0;
			
			background-position: 50% 50%;
			background-repeat: no-repeat;
			background-size: cover;
		}
		
	#grid .item.grey
	{
		background-color: #e2e2e1;
	}
	#grid .item.wood
	{
		background-image: url('../img/small-wood.jpg');
	}
	#grid .item.small
	{
		width: calc(50% - 15px);
		height: 360px;
	}
		#grid .item.right
		{
			float: right;
		}
	#grid .item.wide
	{
		width: 100%;
		height: 560px;
	}
		#grid .item.wide .centered
		{
			color: #fff;
			font-size: 90px;
			line-height: 90px;
			letter-spacing: -3px;
			font-weight: 200;
			text-align: center;
			width: calc(100% - 100px);
		}
	#grid .item.text .foreground
	{
		padding: 50px;
	}
		#grid .item.text .foreground h2,
		#grid .item.text .foreground p
		{
			width: 75%;
			min-width: 300px;
		}
		#grid .item.text .foreground h2
		{
			font-size: 42px;
			line-height: 48px;
			font-weight: 500;
		}
	#grid .logo-dff
	{
		position: absolute;
		width: 88px;
		height: 88px;
		top: 40px;
		left: 40px;
		background: url('../img/logo-dff.png') no-repeat 50% 50%;
		background-size: contain;
	}

/*
	product info
*/

#products
{
	margin-bottom: 50px;
}
	#products .item
	{
		float: left;
		width: calc(50% - 15px);
	}
		#products .item.right
		{
			float: right;
		}
		#products .item .image
		{
			position: relative;
			width: 100%;
			height: 360px;
			margin-bottom: 60px;
		}
		#products .item .price
		{
			position: absolute;
			z-index: 2;
			top: 30px;
			left: 30px;
			background-color: #22242f;
			width: 92px;
			height: 65px;
			padding: 15px;
			color: #fff;
			font-size: 42px;
			line-height: 42px;
		}
			#products .item .price .small
			{
				font-size: 24px;
				padding-left: 3px;
			}
		#products .item h3
		{
			font-size: 19px;
			line-height: 26px;
			letter-spacing: 0px;
			font-weight: 600;
		}
		#products .item p
		{
			font-size: 16px;
			line-height: 22px;
			width: 60%;
			min-width: 300px;
		}
	

/*
	footer
*/
	
#footer
{
	font-size: 16px;
	line-height: 22px;
	color: #888586;
	padding: 50px 0;
}
	#footer .item
	{
		float: left;
		width: calc(25%);
	}
	#footer .item.right
	{
		text-align: right;
	}
	
@media only screen and (max-width: 800px)
{
	#cover .logo
	{
		left: 50%;
		margin-left: -40px;
	}
	#cover .foreground p
	{
		display: none;
	}
	#cover .foreground h1
	{
		margin-top: 120px;
	}
	#grid .item.small,
	#grid .item.wide
	{
		float: none;
		width: 100%;
		height: 460px;
	}
		#grid .item.white
		{
			height: 360px;
		}
		#grid .item.wide .centered
		{
			width: 100%;
			line-height: 82px;
		}
	#products .item
	{
		float: none;
		width: 100%;
	}
		#products .item .image
		{
			margin-bottom: 30px;
		}
		#products .item .info
		{
			margin-bottom: 60px;
		}
	#grid .item.text.white .foreground
	{
		padding: 0;
		text-align: center;
	}
	#grid .item.text .foreground h2
	{
		display: inline-block;
		width: 80%;
		font-size: 42px;
		line-height: 48px;
	}
	#grid .item.text .foreground p
	{
		width: 100%;
		font-size: 28px;
    	line-height: 34px;
	}
	
	#products .info h3,
	#products .info p
	{
		font-size: 28px;
    	line-height: 34px;
		margin-bottom: 30px;
	}
   
	#footer
	{
		padding-top: 0;
	}
		#footer .item
		{
			width: 50%;
		}
		#footer .item:nth-child(3)
		{
			width: 100%;
			margin-top: 30px;
		}
		#footer .item.right
		{
			display: none;
		}
		#footer .item p
		{
			font-size: 20px;
    		line-height: 28px;
		}
}