/*theming just for the home page*/

.rounded-corners (@radius: 5px) {border-radius: @radius; -webkit-border-radius: @radius;-moz-border-radius: @radius;}

@contentWidth: 100%;
@padding: 20px;

@offWhite: #f7f5f3;
@darkOffWhite: #eae7e3;
@bodyCopy: #3d3d37;

*, ::after, ::before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

html,body{
	overflow-x: hidden;
}

#loading-landing {
	background : url("http://localhost:8888/wp-content/themes/hattery-wordpress-theme/./images/felt.jpg") repeat;
	height:100%;
	width:100%;
	position:absolute;
	top:0;
	left:0;

	.main-img{
		background : url("http://hattery.com/wp-content/uploads/2013/01/Hare_Hattery.png") no-repeat scroll center top;
		background-color: transparent;
		height: 100%;
		width: 100%;
	}

	.logo{
		background: url("http://hattery.com/wp-content/themes/Hattery.com-WP_Theme/images/hattery.png") no-repeat center 20%;
		height: 100px;
		width: 100%;
	}
}

.section{
	position: relative;
/*	margin-bottom: @padding;*/
}

.shadow-border{
	border: 1px solid #ecebe9;
}

#section1{
	overflow: hidden;
}

#section1, #section3 #top{
	.section;
	
	height: 500px;
	/*padding-bottom: @padding;*/
	
	img#video-img{
		height: 100%;
		position: absolute;
		z-index: 1;
		left: 0;
	}
	
	#video-frame{
		width: 100%;
		overflow: hidden;
		position: absolute;
		/*display: none;*/
		/*z-index: 2;*/
/*		text-align: center;*/
	}

	#video-frame2{
		width: 100%;
		overflow: hidden;
		position: absolute;
		/*display: none;*/
		/*z-index: 2;*/
/*		text-align: center;*/
	}
	
	video{
		position: relative;
		z-index: 2;
	}
	
	.video-scale{
		height: 450px;
	}
	
	.video-scale2{
		height: 540px;
	}
	
	
	.video-position{
		left: 50%;
	}
	
	.section-content{
		color: white;
		position: absolute;
		width: 100%;
		z-index: 3;
		top: 40%;
		text-align: center;
		text-transform: uppercase;
		
		img{
			width: 75%;
			max-width: 758px;
			height: auto;
		}
	}
}

.frame{
	position: absolute;
	z-index: 10;
	margin-left: -@padding;
/*	margin-top: -@padding;*/
	display: table;
/*	visibility: hidden;
	visibility: visible;*/
	pointer-events: none;
	width: 100%;
	
	height: 500px;
		
	.row{

		display: table-row;
		height: @padding;

		div{
			display: table-cell;
			width: @padding;
			background: url('./images/felt.jpg') repeat center top;
			/*background-color: red;*/

			&.center{
				width: auto;
			}
		}
		
		&.middle{
			height: auto;
			div.center{
				background: transparent;
				width: auto;
			}
		}
		
	}
	
	&.fixed{
		/*visibility: visible;*/
		position: fixed;
		top: 0px;
	}
	
}

#section2, #section3, #section4{
	.section;
	
	margin-bottom: 0px;
	
	background-color: @offWhite;
	/*background: #f2f1ed url('./images/binky_sm.png') no-repeat center 100px;*/
	
	line-height: 30px;
	font-size: 20px;
	
	.scroll-section.active {
		opacity: 1;
	}

	.scroll-section {
		opacity: 0;
	}

	.innersection{
		clear: both;
		.inner{
			position: relative;
			top: 30%;
			width: 900px;
			margin: auto;
			
			h1, h2{
				margin-bottom: 15px;
			}
			
			div{
				/*float: left;*/
				display: inline-block;
				text-align: left;
				vertical-align: top;
			}

			
/*			img{
				float: right;
				display: inline-block;
				position: relative;
				top: -40px;
				padding-right: 50px;
				max-height: 200px;
			}*/
			
		}

	}
	
}

#section2{

		> div, .noactive {
			opacity:1;
			webkit-font-smoothing: antialiasing;
		}

		background: @offWhite url('./images/binky_lrg.png') no-repeat right top;
		background-position-y: 0;
		padding: 0 !important;
		overflow: hidden;
		z-index:9999;
		/*background-size: contain;*/
		#top{
			min-height: 400px;
			/*background: url('./images/binky_sm.png') no-repeat center top;
			background-size: contain;*/
			background-color: rgba(247, 245, 243, 0.1);
			div.footnote{
				/*padding-right: 220px;*/
				width: 330px;
				float: none;
				margin-left: 15px;
			}
			h1{
				/*text-transform: uppercase;*/
				line-height: 36px;
			}
		}
		
		.innersection{
			min-height: 200px;
			.inner{
				
				div.p{
					float: left;
					line-height: 20px;
    				width: 380px;
    				margin-right: 20px;
				}
				
				div.footnote{
					/*display: none;*/
					/*visibility: hidden;*/
					float: right;
					width: 185px;
					line-height: 18px;
					margin-top: 30px;
					min-height: 100px;
				}
			
				img{
					float: right;
					display: inline-block;
					position: relative;
					top: -40px;
					padding-right: 50px;
					max-height: 250px;
				}
			}

			.p1{
				line-height: 24px;
				width: 375px;
			}
			
		}
		.subelement {
			height: 480px;
			padding-top: 60px;
			background-color: white;
			background-repeat: no-repeat;
			position: relative;
			.image-parallax {
				top:-40px;
				position: absolute;
			}
			.image-parallax.top{
				top:-250px;
			}				
			.image-parallax.bottom{
				top:250px;	
			} 
		}

		.subelement:nth-of-type(2) {
			background-color: #51678E;
			/*background-color: rgba(158,165,131,1);
			background-color: rgba(81,76,71,1);*/
			/*background-image: url('http://hattery.com/wp-content/uploads/2013/01/illus_bg_brightfunds.png');*/
			background-position: bottom left; 
			color: white;
		}

		.subelement:nth-of-type(2) .reference-inline {
			color: rgba(158,165,131,1);
		}

		.subelement:nth-of-type(3) {
			background-color: rgb(247,245,243);
			/*background-image: url("http://hattery.com/wp-content/uploads/2013/01/illus_bg_eng2.png");*/
			background-position: top right;
		}

		.subelement:nth-of-type(4) {
			background-color: #54756F;
			/*background-color: rgba(122,138,165,1);
			background-color: rgba(81,76,71,1);*/
			/*background-image: url('http://hattery.com/wp-content/uploads/2013/01/illus_bg_able.png');*/
			background-position: bottom left; 
			color: white;
			z-index: 999;
		}

		.subelement:nth-of-type(4) .reference-inline {
			color: rgba(122,138,165,1);
		}

		.subelement:nth-of-type(5)  {
			/*background-image: url('http://hattery.com/wp-content/uploads/2013/01/illus_bg_copper.png');*/
			background-position: top right;
			background-color: rgb(247,245,243);
		}
}

		.project-link-wht, .project-link-blk{
			font-size: 11px;
			padding: 10px 0px 10px 25px;
			background-position: left 15px;
			margin-left: -24px;
			float: left;
		}

#section3{
		background-color: rgb(247,245,243);
		padding: 0px;
		margin-top: 20px;
		z-index: 9999;
		overflow: hidden;
		/*margin-bottom: @padding;*/
		#top{
			/*background: url('./images/eating.jpg') no-repeat center top;
			background-size: cover;*/
/*			text-align: center;
			position: relative;*/
			
/*			#content img{
				position: relative;
				top: 45%;
/*				margin-top: 45%;*!/
				max-width: 600px;
				height: auto;
			}*/
			
		}

		.description {
			background-color: rgb(247,245,243);
			height: 300px;
			margin: -20px 0;
			position: relative;
			width: 100%;
			z-index: 100;
		}

		.description .main {
			margin: auto;
			width: 900px;
			padding: 85px 0px;

			h2 {
				margin-bottom: 15px;
			}
		}

		.description .main p {
			width:425px;
			line-height: 20px;
		}

		div.scroller-holder {
			left: 20px;
			overflow: hidden;
			position: fixed;
			top: 0;
		}

		img.scroller-tile {
			max-width: none;
			visibility: hidden;
			/*-webkit-backface-visibility:hidden;
			-webkit-perspective:1000;*/
		}

		.scroller-descr {
			-webkit-transform-style: preserve-3d;
			-moz-transform-style: preserve-3d;
			-ms-transform-style: preserve-3d;
			-o-transform-style: preserve-3d;
			transform-style: preserve-3d;
		}

		img {
			max-width: none;
		}
		
		#inside{
			padding: 0px 100px 100px;
		}
		
		.innersection{
			min-height: 400px;
			.inner{
				
				font-size: 14px;
				line-height: 18px;
				
				h2{
					/*text-transform: uppercase;*/
					line-height: 30px;
				}
				
				div.p{
					float: left;
/*					font-size: 14px;
					line-height: 18px;*/
					width: 360px;
					margin-top: 80px;
				}
			
				img{
					float: right;
					max-width: 400px;
					height: auto;
					/*padding-left: 30px;*/
					/*border: 15px solid #fff;*/
					.shadow-border;
					background-color: #fff;
					padding: 10px;
				}
				
			}
			
		}
		
}

#section4{
	margin-bottom: @padding;
	color: @offWhite;
	z-index: 9999;
	#contact{
		background: #40556a url('./images/map_bg.jpg') no-repeat center center;
/*		background-size: contain;*/
		min-height: 560px;
		padding-top: 75px;
		
		text-align: center;
		font-size: 14px;
		line-height: 22px;
		
		img#build{
			margin-top: 60px;
			margin-bottom: 20px;
		}
		
		#social{
			display: block;
			margin-top: 30px;
			font-weight: bold;
			font-style: italic;
			.social-button{
				display: inline;
				/*float: left;*/
				position: relative;
				padding: 10px 15px;
				margin-right: 6px;
				border: 2px solid @darkOffWhite;
				cursor: pointer;
				
				&#email{
					/*padding-right: 100px;*/
				}
				
				img{
					position: relative;
					top: 4px;
				}
				
				&:hover{
					background-color: #324151;
				}
			}
		}
		
		.links{
			display: block;
			width: 500px;
			margin: auto;
			padding-top: 60px;
			
			.calltoaction{
				display: inline;
				width: 190px;
				font-size: 17px;
				line-height: 24px;
				cursor: pointer;
				float: left;
				text-align: left;
				.project-link-wht{
					padding-top: 6px;
					margin-left: -24px;
				}
				
				&.last{
					float: right;
				}
			}
			
		}
		
	}
	
	#next{
		background-color: #324151;
		padding: 30px 50px;
		min-height: 0px;
		
		font-size: 12px;
		line-height: 20px;
		
		.location{
			float: left;
			margin-right: 50px;
		}

	}
}

.reference-inline{
	.rounded-corners;
	font-size: 8px;
	line-height: 12px;
	background-color: #fff;
	padding: 0px 4px;
	font-weight: bold;
}

.reference-footnote{
	font-size: 8px;
/*	line-height: 8px;*/
	font-weight: bold;
	margin-left: -15px;
	padding-right: 10px;
}

.fitscreen{
	width: 100%;
	height: 600px;
}