/* Index Painting Stylesheet */



body {
    font-family: 'Open Sans', sans-serif;
	margin:0;
	padding:0;
	background:#30c1a3;
	color:#222;
}

/* ==========================================================================
   Global
   ========================================================================== */

.clear {
	clear:both;
}
   
p {
	font-size:14px;
	line-height:22px;
	color:#222;
	margin:0 0 15px 0;
}
h1 {
	font-size:20px;
	color:#0a6f5a;
	font-weight:bold;
	line-height:22px;
	margin:0 0 15px 0;
	text-transform:uppercase;
	font-style:italic;
}
   
/* ==========================================================================
   Structure
   ========================================================================== */
   
.container {
	max-width:1200px; 
	margin:50px auto 0 auto;
}
.container2 {
	max-width:1200px; 
	margin:0 auto;
}

/* ==========================================================================
   Navigation
   ========================================================================== */
.tinynav {display:none;}
#nav {
	float:right;
	margin:40px 0 0 0;
	list-style-type:none;
}
#nav li {
	display:inline;
	float:left; 
	margin:0 0 0 0;
}
#nav li a {
	color:#fff;
	background:#222;
	padding:10px 27px;
	text-decoration:none;
	border-right:1px solid #666;
	transition:all .5s;
}
#nav li a.current, #nav li a:hover {
	background:#049b7c;
}

/* ==========================================================================
   Custom Styles
   ========================================================================== */
.wrapper {
	padding:25px;
	background:#fff;
	box-shadow:0 0 8px #222;
	-webkit-box-shadow:0 0 8px #222;
	-moz-box-shadow:0 0 8px #222;
	position:relative;
	z-index:900;
}

.logo {
	float:left;
}
#header-contacts {
	float:right;
	margin:10px 0 0 0;
}
.phone {
	float:right;
	font-size:20px;
	font-style:italic;
	background:url(../images/phone.png) no-repeat left center;
	padding:0 0 0 30px;
	margin:0 30px 0 0;
}

.mobile {
	float:right;
	font-size:20px;
	font-style:italic;
	background:url(../images/mobile.png) no-repeat left center;
	padding:0 0 0 25px;
}

.welcome {
	float:left;
	width:440px;
	padding:65px 0 0 0;
}
.welcome p {
	font-style:italic;
	text-align:justify;
	line-height:22px;
	margin:0 0 40px 0;
}
#slideshow {
	width:;
	float:right;
}
#slideshow img {
	border:5px solid #fff;
	box-shadow:0 0 4px #222;
	-webkit-box-shadow:0 0 4px #222;
	-moz-box-shadow:0 0 4px #222;
}
.rect {
	position:relative;
	width:130px;
	height:221px;
	float:left;
	box-shadow:0 0 4px #555;
	-webkit-box-shadow:0 0 4px #555;
	-moz-box-shadow:0 0 4px #555;
	cursor:pointer;
	transition:all .5s;
}

.mr {
	margin:0 0 0 20px;
}
.rect h2 {
	position:absolute;
	bottom:0;
	width:100%;
	text-align:center;
	color:#fff;
	font-style:italic;
	font-size:18px;
	font-weight:bold;
	margin:0 0 0 0;
	padding:10px 0;
	background: rgba(0, 0, 0, 0.8); 
	transition:all .5s;
}
.rect:hover > h2 {
	color:#30c1a3;
}
.com {
	transition:all .5s;
	background:url(../images/commercial2.jpg) no-repeat;
}
.dom {
	transition:all .5s;
	background:url(../images/domestic2.jpg) no-repeat;
}
.ind {
	transition:all .5s;
	background:url(../images/industrial2.jpg) no-repeat;
}
.com:hover {
	background:url(../images/commercial.jpg) no-repeat;
}
.dom:hover {
	background:url(../images/domestic.jpg) no-repeat;
}
.ind:hover {
	background:url(../images/industrial.jpg) no-repeat;
}
#bottom {
	position:relative;
	z-index:800;
	background:#473a32 url(../images/wood.jpg) no-repeat top center;
	width:100%;
	height:138px;
	margin:-30px 0 0 0;
}
.shadow {
	width:1100px;
	height:56px;
	background:url(../images/shadow.png) no-repeat center center;
	margin:15px auto 0 auto;
}
.ladder {
	background:url(../images/ladder.png) no-repeat;
	height:453px; 
	width:148px;
	position:absolute;
	bottom:-35px;
	right:-130px;
}
.roller {
	background:url(../images/roller.png) no-repeat;
	height:48px; 
	width:99px;
	position:absolute;
	bottom:-55px;
	left:-120px;
}
#footer {
	clear:both;
	margin:20px 0 0 0;
	background: rgba(0, 0, 0, 0.8); 
	padding:10px 0;
	height:27px;
}
.copy {
	float:left;
	color:#ccc;
	font-size:13px;
	font-style:italic;
	padding:0 0 0 25px;
}
.designer {
	float:right;
	color:#ccc;
	font-size:13px;
	font-style:italic;
	padding:0 25px 0 0;
}
.designer a {
	color:#ccc;
	text-decoration:none;
}
.gallery {padding:80px 0 0 0;}
.gallery img {width:400px;}
.hide {display:none;}
.list li {margin:0 0 7px 0; font-size:14px; line-height:20px;}
.col-1 {padding:80px 0 0 0; width:47%; float:left;}
.col-2 {padding:80px 0 0 0; width:47%; float:right;}
.main {
	position:relative;
	width:30%; height:250px; float:left;
	border:3px solid #222;
	background:#222;
}
.main img {
	
	width:100%;
	height:100%;
	transition:all .5s;
}
.main h2 {
	position:absolute;
	bottom:100px;
	width:100%;
	text-align:center;
	color:#fff;
	font-style:italic;
	font-size:22px;
	line-height:18px;
	font-weight:bold;
	margin:0 0 0 0;
	padding:15px 0;
	background: rgba(0, 0, 0, 0.8); 
	transition:all .5s;
}
.main a:hover > h2 {
	color:#30c1a3;
	padding:18px 0;
	bottom:90px;
}
.main a:hover > img {
	opacity:0.8;
}
.commercial, .domestic, .industrial  {margin:0 15px 150px 15px;}
.col-form {width:35%; float:left; padding:80px 0 0 0; margin:0 30px 0 0;}
.map {width:100%; height:370px; border:1px solid #999 !important; padding:3px !important;}
.col-map {width:30%; float:left; padding:80px 0 0 0; margin:0 30px 0 0;}
.details {width:25%; float:left; padding:80px 0 0 0;}


.contact-form {width:100%;}
.contact-form input, .contact-form textarea { 
	width: 75% ; float:left; margin:0 0 15px 0; font-family: 'Didact Gothic', sans-serif; 
}

.contact-form textarea {height:120px;}
.contact-form label {width:20%; float:left; display: block; margin-bottom: 5px; color:#333; font-size:13px; clear:both; padding:0 0 5px 0;  }
.contact-form label span {color:red;}
.contact-form { 
	margin: 30px 0 0 0;
	
}
.contact-form input, .contact-form textarea, .contact-form select{ 
	background: none repeat scroll 0 0 #FFFFFF; 
	border: 1px solid #C9C9C9; 
	color: #545658; 
	padding: 8px; 
	font-size: 14px; 
	border-radius: 2px 2px 2px 2px; 
}
.contact-form select{ width:105%; color:#999; font-size:13px; margin:0 0 10px 0;}


#submit { 
	display:block;
	background: #049b7c; 
	color: #fff; 
	cursor: pointer; 
	height: 40px; 
	padding: 0; 
	float:right;
	width: 100px; 
	position:relative;
	left:0px;
	transition:all .5s;
	font-size:16px; text-transform:uppercase;
}
#submit:hover { 
	background: #167c67; 
	
}

/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (max-width:1024px) {
	#nav {display:none;}
	.tinynav {display:block; clear:both; width:280px; padding:10px; position:relative; top:30px; background:#f3f3f3;}
	#header-contacts {
	clear:both; float:left;
	margin:10px 0 0 0;
	}
	#slideshow, .shadow, .ladder, .roller {display:none;}
	
	.welcome {width:100%; float:left;}
}
@media only screen and (max-width:600px) {
	.logo {width:300px; margin:0 0 30px 0;}
	.mr {margin:0 0 0 0px !important;}
	.rect {
		display:none;
	}
	.container {
	max-width:1200px; 
	margin:0px auto 0 auto;
	}
	#footer {
	clear:both;
	margin:20px 0 0 0;
	background: rgba(0, 0, 0, 0.8); 
	padding:10px 0;
	height:100px;
	}
	.copy {
		float:none;
		text-align:center;
		color:#ccc;
		font-size:13px;
		font-style:italic;
		padding:0 0 0 25px;
	}
	.designer {
		float:none;
		text-align:center;
		color:#ccc;
		font-size:13px;
		font-style:italic;
		padding:0 25px 0 0;
	}
	.col-1 {padding:80px 0 0 0; width:90%; float:left; clear:both}
	.col-2 {padding:80px 0 0 0; width:90%; float:left; clear:both;}
	.main {
		position:relative;
		width:70%; height:250px; float:left;
		border:3px solid #222;
		background:#222;
	}
	.main h2 {
	position:absolute;
	bottom:50px;
	width:100%;
	text-align:center;
	color:#fff;
	font-style:italic;
	font-size:22px;
	line-height:18px;
	font-weight:bold;
	margin:0 0 0 0;
	padding:15px 0;
	background: rgba(0, 0, 0, 0.8); 
	transition:all .5s;
	}
	.main a:hover > h2 {
	color:#30c1a3;
	padding:18px 0;
	bottom:45px;
}
	
	.commercial, .domestic, .industrial  {margin:0 15px 15px 0;}
	.col-form {width:100%; float:left; padding:80px 0 0 0; margin:0 30px 0 0;}
	.col-map {width:100%; float:left; padding:80px 0 0 0; margin:0 30px 0 0;}
	.details {width:100%; float:left; padding:80px 0 0 0;}	
}
@media only screen and (max-width:400px) {
	.phone, .mobile {float:left; clear:both; position:relative; top:10px;}
	.main {
		position:relative;
		width:100%; height:150px; float:left;
		border:3px solid #222;
		background:#222;
	}
}