article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; }

html, body { padding: 0; margin: 0; }
h1, h2, h3, h4, p, a { margin:0; padding:0px; font-weight:normal; text-decoration:none; }
ul, ol, dl, li { margin:0; padding:0; list-style:none; }
form, fieldset, input, textarea, select, button { margin:0; padding:0; border:0; }
img { border:none; }


/* Clearfix - Use Overflow:hidden if possible, use clearfix when overflow cannot be used */

.clearfix:before,
.clearfix:after {
    content: ".";    
    display: block;    
    height: 0;    
    overflow: hidden; 
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; } /* IE < 8 */


/* main style */

html {
	height: 100%;
}

body {
	font-family:'Open Sans', sans-serif;
	font-size:62.5%;
	font-weight: 400;
	
	color:#666;
	
	background-color:white;
	
	width:100%;
	height:100%;
}


h1 { font-size: 6em; font-weight: 300; margin: 40px 0; }
h2 { font-size: 3.2em; font-weight: 300; margin: 40px 0; color: #00C3FF; }
h3 { font-size: 2.4em; font-weight: 300; margin: 40px 0; color: #78C832; }

p { font-size: 1.8em; margin: 20px 0; }

a:link, a:active, a:visited { color: #00C3FF; }
a:hover { color: #78C832; }

strong, b { font-weight: 700; }
em, i { font-style: italic; }


#page-body {

	width: 100%;
	min-height: 100%;
	position: relative;
}

#page-content {
	padding-bottom: 170px;
	position: relative;
	z-index: 1;
}


/* Generic */

.content-wrap {
	width: 1136px;
	margin: 20px auto;
	padding: 1px 0;
	text-align: center;
	position: relative;
	z-index: 2;
}


section {
	position: relative;
	overflow: auto;
}



/* Background images */

.bg-image {
	background-size: cover;
	background-attachment: fixed;
	background-position: center center;
}


/* Header/Navigation */


header#main-header {
	width: 100%;
	height: 100px;
	position: fixed;
	top: 0;
	z-index: 5;
	background-color: white;
	background-color: rgba(255,255,255,0.95);
	
	box-shadow: 0px 2px 12px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 2px 12px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0px 2px 12px rgba(0,0,0,0.2);
}

#main-header-inner {
	position: relative;
	width: 1136px;
	margin: 0 auto;
}

a#header-logo, a#header-logo:link, a#header-logo:active, a#header-logo:visited {
	display: block; 
	padding-left: 115px;
	height: 50px;
	line-height: 52px;
	background-image: url('../img/oulton-cleaning-logo.png');
	background-size: 95px 50px;
	background-repeat: no-repeat;
	position: absolute;
	top: 25px;
	left: 0;
	font-size: 3.6em;
	font-weight: 300;
	color: #00C3FF;
}


#header-nav-mobile-button {
	display: block;
	width: 80px; height: 80px;
	line-height: 80px;
	top:10px;
	position: relative;
	color: #999;
	text-align: center;
	float: right;
	font-size: 4em;
	color: #00C3FF;
}
#header-nav-mobile-button:hover { cursor: pointer; }
	

nav#main-nav {
	position: absolute;
	top: 30px;
	height: 40px;
	right: 0;
}

nav#main-nav ul {
	
}

nav#main-nav ul li {
	float: left;
}

nav#main-nav ul li a, nav#main-nav ul li a:link, nav#main-nav ul li a:active, nav#main-nav ul li a:visited {
	display: block;
	height: 40px; line-height: 40px;
	color: #00C3FF;
	padding: 0 8px;
	margin: 0;
	font-size: 1.6em;
	
	transition: background-color .2s linear;
	-moz-transition: background-color .2s linear;
	-webkit-transition: background-color .2s linear;
}

nav#main-nav ul li.active a,
nav#main-nav ul li a:hover {
	color: #78C832;
	
	transition: background-color .2s linear;
	-moz-transition: background-color .2s linear;
	-webkit-transition: background-color .2s linear;
}



/* FOOTER */

footer#main-footer {
	width: 100%;
	height: 150px;
	position: absolute;
	bottom: 0;
	z-index: 2;
	
	background-color: #333333;
	color: white;
	
	border-top: 6px #00C3FF solid;
}

#main-footer-inner {
	position: relative;
	width: 1136px;
	margin: 0 auto;
}

a#footer-logo:link, a#footer-logo:active, a#footer-logo:visited, a#footer-logo:hover {
	display: block;
	width: 152px;
	height: 80px;
	background-image: url('../img/oulton-cleaning-logo.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	position: absolute;
	top: 30px;
	left: 0;
}

#footer-right {
	position: absolute;
	top: 40px; right: 0;
	text-align: right;
	color: white;
	font-size: 2.2em;
	font-weight: 300;
}
#footer-right span {
	display: block;
}

#footer-db {
	width: 200px;
	margin: 0 auto;	
	position: relative;
	top: 40px;
	font-weight: 300;
	text-align: center;
}
#footer-db-logo:link, #footer-db-logo:link, #footer-db-logo:visited {
	display: block;
	width: 40px; height: 40px;
	margin: 0 auto;
	background-image: url('../img/dennis-barber-logo.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	
}
#footer-db-text a:link, #footer-db-text a:active, #footer-db-text a:visited {
	display: inline-block;
	color: white;
	font-weight: 700;
	margin-top: 5px;
}

.page-footer-office {
	width: 45%;
	margin: 40px 2.5%;
	float: left;
}

.page-footer-phone1 { display: block; font-size: 3.6em; font-weight: 300; color: #78C832; margin: 0; }
.page-footer-phone2 { display: block; font-size: 6em; font-weight: 300; color: #00C3FF; margin: -10px 0 0 0; }
.page-footer-link { display: block; font-size: 2em; font-weight: 300; color: #666; }


/* Services nav */

a.services-nav-item, a.services-nav-item:link, a.services-nav-item:active, a.services-nav-item:visited {
	display: table;
	width: 25%; height: 250px;
	float: left;
	overflow: hidden;
	background-size: cover;
	background-position: center center;
	position: relative;
	z-index: 1;
}
a.services-nav-item:hover p {
	transition:background-color .1s linear;
	-moz-transition:background-color .1s linear;
	-webkit-transition:background-color .1s linear;
}

.services-nav-item p {
	display: table-cell;
	width: 100%; height: 100%;
	vertical-align: middle;
	text-align: center;
	font-size: 3.6em;
	color: white;
	font-weight: 300;
	text-shadow: 0px 1px 4px rgba(0,0,0,0.20);
	overflow: hidden;
	transition:background-color .1s linear;
	-moz-transition:background-color .1s linear;
	-webkit-transition:background-color .1s linear;
}

.services-nav-item:nth-child(odd) p { background-color: rgba(0, 196, 255, 0.7); }
.services-nav-item:nth-child(even) p { background-color: rgba(0, 111, 171, 0.7); }

.services-nav-item:nth-child(odd):hover p { background-color: rgba(0, 196, 255, 0.4); }
.services-nav-item:nth-child(even):hover p { background-color: rgba(0, 111, 171, 0.4); }

.services-nav-office { background-image: url('../img/service-office.jpg'); }
.services-nav-domestic { background-image: url('../img/service-domestic.jpg'); }
.services-nav-carpet { background-image: url('../img/service-carpet.jpg'); }
.services-nav-commercial { background-image: url('../img/service-commercial.jpg'); }


/* Hero */

#hero {
	width: 100%;
	height: 450px;
	position: relative;
	z-index: 2;
	border-bottom: 6px #00C3FF solid;
	box-shadow: 0px 2px 12px rgba(0,0,0,0.2);
	background-size: cover;
	background-attachment: fixed;
	background-position: center auto;
	position: relative;
}
#hero-inner {
	display: table;
	width: 1136px;
	height: 350px;
	margin: 100px auto 0 auto;
	padding: 0;
}
#hero-inner-cell {
	display: table-cell;
	width: 100%; height: 100%;
	vertical-align: middle;
	text-align: center;
}

.home-hero {
	height: 600px !important;
	background-image: url('../img/clean-reception-room-blur.jpg');
	background-size: cover;
	background-attachment: fixed;
	position: relative;
	
}
.home-hero #hero-inner-cell { height: 500px; }

#hero-inner-cell h1 {
	color: white;
	margin: 0;	
	text-shadow: 0px 1px 4px rgba(0,0,0,0.20);
}


/* GALLERIES */

.page-gallery {
	width: 100%;
	overflow: hidden;
}

ul.gallery-images-list {
	width: 100%;
}

ul.gallery-images-list li {
	width: 24%;
	margin: 0.5%;
	float: left;
}

ul.gallery-images-list li img {
	width: 100%; height: auto;
}



/* HOME */

#home-content {
	width: 55%;
	margin-right: 5%;
	float: left;
}

#home-facebook-plugin {
	width: 40%;
	float: left;
}



/* CONTACT */

	/* Contact form */

	form.contact-form {
		width: 60%;
		margin: 0 auto;
		text-align: center;
	}
	
	form.contact-form fieldset { width: 100%; }
	
	form.contact-form .row { width: 100%; margin: 6px 0; overflow: hidden; } 
	
	form.contact-form .row .contact-input-full,
	form.contact-form .row .contact-input-half,
	form.contact-form .row .contact-textarea {
		padding: 10px 0;
		text-indent: 10px;
		background: white;
		border: 1px solid #ccc;
		border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px;

		font-size: 1.8em;
		color: #333;
		
		transition:0.2s border linear; -moz-transition:0.2s border linear; -webkit-transition:0.2s border linear; 
	}
	
	form.contact-form .row .contact-input-full { width: 99%; width: calc(100% - 2px); }
	form.contact-form .row .contact-input-half { width: 49%; width: calc(50% - 5px); float: left; }
	form.contact-form .row .contact-input-half:first-child { margin-right: 6px; }
	
	form.contact-form .row .contact-textarea { width: 100%; width: calc(100% - 2px); height: 200px; }
	
	form.contact-form .row .contact-input-full:focus,
	form.contact-form .row .contact-input-half:focus,
	form.contact-form .row .contact-textarea:focus {
		outline: none;
		border: 1px solid #78C832;
		transition:0.2s border linear; -moz-transition:0.2s border linear; -webkit-transition:0.2s border linear; 
	}
	
	form.contact-form .button { padding: 10px 60px; }
	
	.contact-sent,
	.contact-error {
		display: block;
		width: 100%;
		margin: 20px 0;
		padding: 10px 20px;
		text-align: center;
		font-size: 1.6em;
		border-radius: 4px;
	}
	
	.contact-sent { background-color: #b3ff70; color: #234e1a; }
	.contact-error { background-color: #c73131; color: white; }


/* SERVICES TABLE */

.services-table-wrap {
	width: 100%;
	margin: 40px;
	overflow: hidden;
}

.services-table-item {
	width: 30%;
	margin: 0 1.5%;
	float: left;
	border:1px #ccc solid;
	border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px;
}

.services-table-item .title-bronze, 
.services-table-item .title-silver, 
.services-table-item .title-gold {
	display: block;
	color: white;
	width: 100%;
	text-align: center;
	padding: 20px 0;
	margin: 0;
	font-size: 2.4em;
}

.services-table-item .title-bronze { background-color: #977a42; }
.services-table-item .title-silver { background-color: #7c7c7c; }
.services-table-item .title-gold { background-color: #d5b231; }

.price-box {
	width: 100%;
	background-color: #eee;
	padding: 10px 0;
	font-size: 2.6em;
}
.price-box .price-label { display: block; font-size: 0.4em; font-style: italic; }

.services-table-item ul { width: 100%; }
.services-table-item ul li { display: block; width: 100%; text-align: center; border-top: 1px #eee solid; padding: 15px 0; }
.services-table-item ul li p { display: block; margin: 0 40px; font-size: 1.4em; }

.services-table-item ul li.highlight { background-color: #78C832; color: white; }

/* buttons */

.button,
a.button:link, .button:active, .button:visited {
	display: inline-block;
	padding: 10px 20px;
	text-align: center;
	
	/* BG: */
	background: #00C3FF;
	border: 2px solid white;
	border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px;
	/* Text */
	font-size: 1.6em;
	color: white;
	line-height: 22px;
	transition:0.1s all linear; -moz-transition:0.1s all linear; -webkit-transition:0.1s all linear; 
}
.button:hover,
a.button:hover {
	cursor: pointer;
	background-color: #78C832;
	transform: scale(1.1); -moz-transform: scale(1.1); -webkit-transform: scale(1.1);
	transition:0.1s all linear; -moz-transition:0.1s all linear; -webkit-transition:0.1s all linear; 
}



/* Overrides */

.lowercase { text-transform: uppercase !important; }
.uppercase { text-transform: uppercase !important; }

.parallax { background-position: center center; }
.parallax-elem { position: relative !important; }



/* RESPONSIVE tablet
 * ----------------------- */


@media screen and (max-width:1136px)
{
	.content-wrap {
		width: 90%;
	}
	
	#hero-inner { width: 100%; }
	
}

/* RESPONSIVE mobile
 * ----------------------- */

@media screen and (min-width:761px)
{
	.mobile-only { display: none !important; }
}

@media screen and (max-width:760px)
{
	
	.mobile-hidden { display: none !important; }
	
	body {
		font-size: 50%;
	}
	
	#main-header-inner { width: 100%; }
	
	a#header-logo, a#header-logo:link, a#header-logo:active, a#header-logo:visited {
		width:95px;
		height: 50px;
		top: 25px;
		left: 20px;
		font-size: 0em;
		overflow: hidden;
	}
	
	nav#main-nav { top: 100px; background-color: white; border-bottom: 6px #00C3FF solid; }
	nav#main-nav ul { display: none; width: 100%; margin: 0; padding: 0; }
	nav#main-nav ul li { width: 100%; margin: 0; padding: 0; background-color: white; }
	
	nav#main-nav ul li a, nav#main-nav ul li a:link, nav#main-nav ul li a:active, nav#main-nav ul li a:visited {
		width: 100%;
		height: 40px; line-height: 40px;
		padding: 0;
		text-indent: 20px;
		font-size: 2em;
	}
	
	
	#main-footer-inner { width: 100%; }
	
	
	.page-footer-office {
		width: 100%;
		margin: 20px 0;
		float: none;
	}
		
		
		
	#hero { height: 350px; }
	#hero-inner { height: 250px; }
	.home-hero { height: 500px !important; }
	.home-hero #hero-inner-cell { height: 400px; }

	a.services-nav-item, a.services-nav-item:link, a.services-nav-item:active, a.services-nav-item:visited {
		width: 50%; height: 200px;
	}
	
	.services-nav-item:nth-child(1) p, .services-nav-item:nth-child(4) p { background-color: rgba(0, 196, 255, 0.7); }
	.services-nav-item:nth-child(2) p, .services-nav-item:nth-child(3) p { background-color: rgba(0, 111, 171, 0.7); }
	.services-nav-item:nth-child(1):hover p, .services-nav-item:nth-child(4):hover p { background-color: rgba(0, 196, 255, 0.4); }
	.services-nav-item:nth-child(2):hover p, .services-nav-item:nth-child(3):hover p { background-color: rgba(0, 111, 171, 0.4); }


		
	#home-content {
		width: 100%;
		margin: 0;
		float: none;
	}
	
	#home-facebook-plugin {
		width: 100%;
		float: none;
	}

	
}