/* GENERAL */


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

html {
	overflow: auto;
}

html,
body {
	width: 100%;
	height: 100%;
	margin: 0;
	border: 0;
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	background-color: #FAFAFA;
}

div, 
p, 
a, 
span, 
h1, 
h2, 
h3, 
ul, 
table, 
tr, 
td, 
input, 
label, 
textarea, 
button {
	font-family: 'Avenir-Light', 'Avenir Light', sans-serif;
	font-weight: normal;
	font-style: normal;
	font-size: 0.9rem;
	color: #AAA;
}

img {
	display: block;
	outline: none;
	border: 0;
	color: #FAFAFA;
}

.clear {
	clear: both;
}

.hidden {
	opacity: 0;
	pointer-events: none;
}


/* TEXT */


a {
	color: inherit;
	text-decoration: none;
	outline: none;
	border: 0;
	cursor: pointer;
}

a:hover,
.selected,
strong, 
h2 {
	color: #666;
}

strong {
	font-weight: normal;
}

p, 
h1, 
h2, 
h3 {
	padding: 0;
	margin-top: 0;
	margin-bottom: 1.2rem;
	line-height: 1.5rem;
}

p:last-child {
	margin-bottom: 0;
}

h1, 
h2, 
h3 {
	font-weight: normal;
}

h1 {
	font-size: 1.2rem;
}

h2 {
	font-size: 0.9rem;
	margin: 0;
}

h3 {
	
}

ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 0;
}

.header svg, 
.footer svg, 
.mobile-menu-btn svg {
	fill: #444;
}


/* TRANSITIONS */


.loading *, 
.resizing * {
	-webkit-transition: none !important;
	-moz-transition: none !important;
	 -o-transition: none !important;
	-ms-transition: none !important;
	transition: none !important;
}

a, 
button {
	-webkit-transition: color 250ms;
	-moz-transition: color 250ms;
	 -o-transition: color 250ms;
	-ms-transition: color 250ms;
	transition: color 250ms;
}

.home .gallery > div {
	-webkit-transition: opacity 1500ms;
	-moz-transition: opacity 1500ms;
	 -o-transition: opacity 1500ms;
	-ms-transition: opacity 1500ms;
	transition: opacity 1500ms;
}


/* CONTENT */


.content {
	position: relative;
	float: left;
	width: 100%;
}

.header, 
.footer {
	position: relative;
	display: table;
	float: left;
	width: 100%;
	background-color: rgba(250, 250, 250, 1.0);
	z-index: 250;
}

.header {
	height: 10rem;
}

.header .logo-eight {
	width: 30px;
	height: 42px;
	display: inline-block;
	vertical-align: -16px;
	margin: 0 0.625rem;
}

.footer {
	display: none;
	height: 10rem;
	text-align: center;
	text-transform: uppercase;
	z-index: 250;
}

.mobile-menu, 
.mobile-menu-btn, 
.mobile-header {
	display: none;
}

.menu {
	display: table;
	width: 100%;
	height: 100%;
}

.menu ul {
	position: relative;
	width: 100%;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	font-size: 0;
}

.menu ul li {
	display: inline-block;
	text-transform: uppercase;
}

.menu ul li a {
	font-size: 0.875rem;
	padding: 0.250rem 0.875rem;
}


/* HOME */


.home .content .gallery {
	position: relative;
	width: 100vw;
	height: 68vh;
	margin: 0 0 2.25rem 0;
	overflow: hidden;
}

.home .content .gallery > div {
	position: absolute;
	width: 100%;
	height: 100%;
}

.home .content .gallery img {
	width: auto;
	height: 100%;
	margin: 0 auto;
}

.home .content .intro {
	position: relative;
	display: block;
	width: 100%;
	max-width: 60rem;
	margin: 0 auto;
	text-align: center;
}

.home .content .intro p {
	padding: 0 1.250rem;
}

.home .footer {
	display: table;
}

.home .footer div {
	display: table-cell;
	vertical-align: middle;
	padding: 0 1rem 0 0;
}

.home .footer .logo-eight, 
.commercial .footer .logo-eight, 
.residential .footer .logo-eight {
	width: 30px;
	height: 42px;
	display: inline-block;
	vertical-align: -16px;
	margin: 0 1rem;
}


/* COMMERCIAL & RESIDENTIAL */


.commercial .content div, 
.residential .content div {
	max-width: 60rem;
	margin: 0 auto;
	text-align: center;
	font-size: 0;
}

.commercial .content .text, 
.residential .content .text {
	max-width: 40rem;
	margin: 0 auto;
	text-align: center;
}

.commercial .content .range:first-child, 
.residential .content .range:first-child {
	margin: 2.5rem 0 2rem 0;
}

.commercial .content .range, 
.residential .content .range {
	margin: 2.5rem 0 1.625rem 0;
}

.commercial .content .item, 
.residential .content .item {
	position: relative;
	display: inline-block;
	width: auto;
	max-width: 200px;
	background-color: #F4F4F4;
	margin: 1.250rem 0.675rem 0 0.675rem;
	padding: 0 0 2.125rem 0;
}

.commercial .content .item img, 
.residential .content .item img {
	width: 100%;
	height: auto;
}

.commercial .content .item p, 
.residential .content .item p {
	position: absolute;
	width: 100%;
	text-align: center;
	bottom: 0.250rem;
	font-size: 0.813rem;
}

.commercial .footer, 
.residential .footer {
	display: table;
}

.commercial .footer div, 
.residential .footer div {
	display: table-cell;
	vertical-align: middle;
	padding: 0 1rem 0 0;
}


/* TEXT PAGES */


.outside {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	outline: none;
}

.text {
	display: table;
	width: 100%;
	height: 100%;
}

.text .table {
	display: table-cell;
	vertical-align: middle;
	text-align: left;
}

.text .table div {
	display: block;
	width: 100%;
	max-width: 40rem;
	margin: 0 auto;
	padding: 0 0 3.125rem 0;
	text-align: center;
}

.contact .content {
	position: absolute;
	height: 100%;
	padding: 10rem 0 4.375rem 0;
}


/* ICONS */


.icon:before {
	position: absolute;
	top: 0;
	left: 0;
	width: 22px;
	height: 24px;
	font-family: 'Dimension-8';
	font-size: 22px;
}

a.facebook, 
a.twitter, 
a.pinterest, 
a.instagram {
	position: relative;
	display: inline-block;
	width: 22px;
	height: 24px;
	margin: 0 0.250rem -0.5rem 0.250rem;
}

.facebook:before {
	content: '\E800';
}

.pinterest:before {
	content: '\E801';
}

.twitter:before {
	content: '\E802';
}

.instagram:before {
	content: '\E808';
}


/* DESKTOP */


@media only screen 
and (min-width : 768px) {
	
	.gallery .content {
		position: absolute;
		top: 0;
		height: 100%;
		overflow: hidden;
	}

	.gallery .footer {
		position: absolute;
		display: table;
		height: 8.75rem;
		bottom: 0;
	}

	.gallery .images {
		position: absolute;
		width: 62500rem;
		height: 100%;
		top: 0;
		left: 0;
		padding: 10rem 0 8.75rem 0;
		z-index: 50;
		-webkit-transform: translate3d(0, 0, 0);
		-moz-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		-o-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}

	.gallery .images .item {
		position: relative;
		float: left;
		width: 100vw;
		height: 100%;
		text-align: center;
		cursor: pointer;
		display: none;
	}

	.gallery .images .active {
		display: block;
	}

	.gallery .images .item img {
		position: absolute;
		width: auto;
		max-height: 100%;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}

	.gallery .images, 
	.gallery .images .item, 
	.gallery .images .item img {
		-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
		-ms-backface-visibility: hidden;
		backface-visibility: hidden;
	}

	.controls .prev, 
	.controls .next {
		position: absolute;
		top: 50%;
		width: 50px;
		height: 85px;
		z-index: 100;
		margin-top: -2.25rem;
		padding: 0.625rem;
	}
	
	.controls .prev.disabled, 
	.controls .next.disabled {
		opacity: 0;
		pointer-events: none;
	}
	
	.controls .prev {
		left: 2.25rem;
	}
	
	.controls .next {
		right: 2.25rem;
	}
	
	.controls svg {
		fill: #DDD;
	}
	
	.controls .prev,
	.controls .next {
		cursor: pointer;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
	
}


/* TABLET */


@media only screen 
and (max-width : 1024px) {

	.header {
		height: 7.5rem;
		padding-top: 0.375rem;
	}
	
	.footer {
		height: 6.25rem !important;
		padding-bottom: 0.75rem;
	}
	
	.gallery .images {
		padding-top: 7.5rem;
		padding-bottom: 6.25rem;
	}
	
	.controls .prev {
		left: 1.4rem;
	}
	
	.controls .next {
		right: 1.4rem;
	}
	
}


/* TABLET PORTRAIT */


@media only screen 
and (max-width : 1024px) 
and (orientation : portrait) {
	
	.header {
		height: 11.25rem;
	}
	
	.footer {
		height: 10rem !important;
	}
	
	.home .content .gallery {
		position: relative;
		height: 52vh;
	}
	
	.gallery .images {
		padding-top: 11.25rem;
		padding-bottom: 10rem;
	}
	
	.gallery .images .item img.landscape {
		max-width: 100%;
		max-height: inherit;
	}
	
}


/* MOBILE */


@media only screen 
and (max-width : 767px) {
	
	.content {
		
	}
	
	.header, 
	.footer {
		height: 6.25rem !important;
	}
	
	.header {
		padding-top: 0;
	}
	
	.footer {
		padding-bottom: 0;
	}
	
	.header .menu {
		display: none;
	}
	
	.mobile-header {
		display: table;
		width: 100%;
		height: 100%;
		text-align: center;
	}
	
	.mobile-header div {
		display: table-cell;
		vertical-align: middle;
		text-transform: uppercase;
		padding: 0 0.875rem 0 0;
	}
	
	.mobile-header .logo-eight {
		margin: 0 1rem;
	}
	
	.mobile-menu-btn {
		position: absolute;
		display: block;
		top: 0;
		left: 0.5rem;
		width: auto;
		height: 6.25rem;
		text-align: center;
		z-index: 500;
	}
	
	.mobile-menu-btn img, 
	.mobile-menu-btn svg {
		display: inline-block;
		width: auto;
		height: 42px;
		margin-top: 29px;
		opacity: 0.35;
	}
	
	.mobile-menu {
		position: absolute;
		display: table;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		padding-bottom: 15px;
		background-color: rgba(250, 250, 250, 1.0);
		text-align: center;
		opacity: 0;
		pointer-events: none;
		z-index: 100;
		-webkit-transition: opacity 250ms;
		-moz-transition: opacity 250ms;
		 -o-transition: opacity 250ms;
		-ms-transition: opacity 250ms;
		transition: opacity 250ms;
	}
	
	.menu-active .mobile-menu {
		opacity: 1.0;
		pointer-events: auto;
	}
	
	.mobile-menu ul {
		position: relative;
		width: 100%;
		display: table-cell;
		vertical-align: middle;
		text-align: center;
		padding-top: 4rem;
	}
	
	.mobile-menu ul li {
		text-transform: uppercase;
		font-size: 0.875rem;
	}
	
	.mobile-menu ul li a {
		display: inline-block;
		padding: 0.875rem 1rem;
		margin: 0;
	}
	
	.home .content .gallery {
		position: relative;
		width: 100%;
		height: auto;
		margin: 0 0 1.5rem 0;
	}

	.home .content .gallery > div {
		position: relative;
		width: 100%;
		height: auto;
	}
	
	.home .content .gallery > div.hidden {
		display: none;
	}

	.home .content .gallery img {
		width: 100%;
		height: auto;
	}
	
	.gallery .content {
		position: relative;
		height: auto;
		margin: 0;
		overflow: visible;
	}
	
	.gallery .content .images {
		position: relative;
		width: 100%;
		height: auto;
		padding: 0;
		opacity: 1.0;
	}
	
	.gallery .content .images .item {
		width: 100%;
		height: auto;
		margin-bottom: 10px;
	}
	
	.gallery .content .images .item:last-child {
		margin-bottom: 0;
	}
	
	.gallery .content .images .item img {
		width: 100%;
		height: auto;
	}
	
	.gallery .footer {
		position: relative;
		height: 6.25rem;
	}
	
	.controls {
		display: none;
	}
	
	.outside {
		position: absolute;
		width: 100%;
		height: 100%;
	}
	
	.text {
		display: table;
		width: 100%;
		height: 100%;
		padding: 0 1.250rem 1.250rem 1.250rem;
	}

	.text .table {
		display: table-cell;
		vertical-align: middle;
	}

	.text .table div {
		max-width: none;
		padding: 0;
	}
	
	.suppliers .text, 
	.about .text, 
	.suppliers .text .table div, 
	.about .text .table div {
		padding-top: 0;
	}
	
	.commercial .content .text, 
	.residential .content .text {
		padding-top: 0;
		padding-bottom: 0;
	}
	
	.commercial .content .range, 
	.residential .content .range {
		margin: 1.875rem 0 !important;
	}
	.commercial .content .item, 
	.residential .content .item {
		width: 45%;
		margin: 0.375rem 0 0 0;
	}
	
	.commercial .content .item.even, 
	.residential .content .item.even {
		margin-left: 0.250rem;
	}
	
	.commercial .content .item.odd, 
	.residential .content .item.odd {
		margin-right: 0.250rem;
	}
	
	.contact .outside {
		padding: 3.125rem 0 0 0;
	}
	
}


/* MOBILE LANDSCAPE */


@media only screen 
and (max-width : 767px) 
and (orientation : landscape) {

	.header, 
	.footer, 
	.mobile-menu-btn {
		height: 5rem !important;
	}
	
	.mobile-menu-btn svg {
		margin-top: 20px;
	}
	
	.gallery .images {
		padding-top: 5rem;
		padding-bottom: 6.25rem;
	}

	.mobile-menu {
		padding-bottom: 0;
		z-index: 750;
	}
	
	.mobile-menu ul {
		padding-top: 0;
	}
	
	.mobile-menu ul li a {
		display: block;
		padding: 0.65rem 1rem;
		margin: 0;
	}
	
	.contact .content, 
	.contact .outside {
		height: auto;
		position: relative;
		padding: 0;
	}
	
	.contact .text .table {
		display: block;
	}
	
}