/* ========================================== */
/* ============= General Styles ============= */
/* ========================================== */

/* ---- Font Import ---- */

	@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,300);

/* ---- End Font Import ---- */

/* ---- General Styles ---- */

	body, html {
		margin: 0;
		padding: 0;
	}

	h1, h2, h3, h4, p, a, li {
		font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	}

	div.container {
		width: 960px;
		margin: 0 auto;
	}
	
	#wrapper {
		overflow: hidden;
	}

/* ---- End General Styles ---- */

/* ---- YM Grid System ---- */

	.ym20 {
		float: left;
		width: 20%;
	}
	
	.ym30 {
		float: left;
		width: 30%;
	}
	
	.ym33 {
		float: left;
		width: 33.33%;
	}
	
	.ym40 {
		float: left;
		width: 40%;
	}
	
	.ym45 {
		float: left;
		width: 45%;
	}

	.ym50 {
		float: left;
		width: 50%;
	}
	
	.ym55 {
		float: left;
		width: 55%;
	}
	
	.ym60 {
		float: left;
		width: 60%;
	}
	
	.ym70 {
		float: left;
		width: 70%;
	}
	
	.ym80 {
		float: left;
		width: 80%;
	}

/* ---- End YM Grid System ---- */

/* ========================================== */
/* =========== End General Styles =========== */
/* ========================================== */


/* ========================================== */
/* ============ Desktop/Main CSS ============ */
/* ========================================== */


/* ---- Header ---- */
	header {
		height: 120px;
		padding: 28px 30px 0px;
	}
	
	header section img.logo {
		float: left;
	}
	.contact {
	    background-image: url("img/phone-logo.png");
	    background-position: left 0;
	    background-repeat: no-repeat;
	    float: right;
	    margin-right: -25px;
	    padding-left: 97px;
	    width: 34%;
	}
	.contact img {
	    float: left;
	    margin-right: 15px;
	}
	.contact p.font-1 {
	    color: #58585a;
	    font-size: 25px;
	    font-weight: 300;
		margin: -15px 0 0;
	    text-align: left;
	}
	.font-2 {
	    height: 46px;
	    margin-bottom: 0 !important;
	    margin-left: 0 !important;
	    margin-right: 0 !important;
	    margin-top: -5px;
	}
	
	.font-2 > a {
		color: #4fa259;
		font-size:44px;
		font-weight:800;
		text-decoration: none;
		text-align: left !important;
	}
	
    .font-3{
	    color:#58585a;
	    font-size:14px;
	    text-align: left;
	    font-weight:400;
    }

		/* ---- End Header ---- */


/* ---- Banner---- */

	main section.slider {
		background: url('img/banner-bg.jpg') no-repeat scroll transparent;
		background-size: cover;
		background-position: center center;
		width: 100% !important;
		height: 345px;
		padding-top: 40px;
	}


	.banner{
		width: 960px;
		margin: 0 auto;
	}
	
	
	.banner-text h1{
	    font-size:40px;
	    color:#ffffff;
		margin-top:0px;
	}

	.banner-text {
	    float: left;
	    width: 50%;
	    padding-top: 20px;
	}
			
	.banner-text p{
		font-size:23px;
		color:#ffffff;
	}

	.banner-image{
		float:right;
		width:50%;
	}

/* ---- Second Section ---- */
	
.section2-container-left{
    float:left;
    width:35%;	
     margin-top: -60px;
}
.section2-container-right{
    float:right;
    width:60%;	
     margin-top: -60px;
}

.section2-container-left > h2, .section2-container-right > h2{
	color: #4fa259;
	font-size:30px;
}

.section2-container-left > p, .section2-container-right > p{
	color: #58585a;
	 font-weight: 300;
	 line-height: 28px;
	font-size:16px !important;
}
.section2-container-left > img {
    float: right;
    margin-bottom: 35px;
    margin-left: 62%;
    margin-top: 10px;
    text-align: right !important;
}

.visit {
    background-color: #4fa259;
    border-radius: 5px;
    clear: both;
    color: #ffffff;
    padding: 10px 0;
    text-align: center;
    width: 100%;
}
.visit > p {
    font-size: 26.14px;
    font-weight: 800;
    margin: 0;
}



.appointment {
    margin-top: 10px;
    text-align: center;
    width: 100%;
}
.appointment p {
    background-image: url("img/search-icon.png");
    background-position: left center;
    background-repeat: no-repeat;
    color: #4fa259;
    font-size: 23px;
    height: 50px;
    margin: 0 auto;
    padding-left: 30px;
    padding-top: 12px;
    width: 275px;
}
.electrical-plans {
    background-color: #f26c4f;
    border-radius: 5px;
    clear: both;
    color: #ffffff;
    margin-bottom: 12px;
    margin-top: 40px !important;
    padding: 10px 0;
    text-align: center;
    width: 100%;
}
.electrical-plans p {
    color: #ffffff;
    font-size: 28.81px;
    font-weight: 800;
    margin: 0 auto;
    padding: 10px 0;
}
.info-pack {
    background-color: #58585a;
    border-radius: 5px;
    clear: both;
    color: #ffffff;
    padding: 10px 25px;
    text-align: left;
    width: 92%;
}

.info-pack > h2 {
    font-size: 20px !important;
    margin: 5px 0;
}
.info-pack > p {
    font-size: 16px !important;
    font-weight: 300;
    margin-bottom: 12px;
    margin-top: 10px;
}

/* ---- Third Section ---- */

.section-3{
	text-align: center;
}
.section-3 .container > img {
    margin-top: 50px;
}
.section-3 h2{
	font-size:37.22px;
	color:#58585a;
	 margin-top: -25px;
	 margin-bottom:20px;
}

/* ---- Fourth Section ---- */
.section-4 .container{
    border-top: 21px solid #4fa259;
}


.section-4 .container .ym50, .section-4 .container .ym50-right {
    margin-bottom: 50px;
    margin-top: 10px;
    width: 46%;
}

/* ---- Fifth Section ---- */

.ym50-right{
	width:50%;
	float:right;
}
.section-5 .container{
    border-top: 21px solid #4fa259;
}

.section-5 .container .ym50, .section-5 .container .ym50-right  {
    margin-bottom: 15px;
    margin-top: 15px;
    width: 46%;
}

.section-4 .container .ym50 h2, .section-5 .container .ym50 h2, .section-4 .container .ym50-right h2, .section-5 .container .ym50-right h2 {
    background-position: left top;
    background-repeat: no-repeat;
    color: #4fa259;
    font-size: 30px;
    font-weight: 800;
    padding-left: 70px;
    padding-top: 10px;
}
.section-4 .container .ym50 p, .section-5 .container .ym50 p, .section-4 .container .ym50-right p, .section-5 .container .ym50-right p{
	font-size:16px;
	color:#58585a;
	 line-height: 28px;
	font-weight:300;
}
.owner{
	background-image:url("img/owner-icon.png");
}
.ob{
	background-image:url("img/builder-icon.png");
}
.builders{
	background-image:url("img/builders-icon.png");
	background-position: left center !important;
}
.architects{
	background-image:url("img/architecs-icon.png");	
	background-position: left center !important;
}
/* ---- End Body ---- */



/* ---- Footer ---- */

	footer section {
		margin-top:40px;
	}
	
	.footer-details .container {
       border-top:6px solid #eeeeee;
	}
	.footer-details .container ul li{
       list-style-type: none;
       float:left;
       margin-right: 40px;
	}
	.footer-details .container p{
       color:#58585a;
       font-size:16px;
       font-weight: normal;
       margin-top: 12px;
	}
	.footer-details .container p span{
       color:#4fa259;
	}
	footer section h2 {
	    color: #4fa259;
	    font-size: 28px;
	    font-weight: normal;
	    margin: 0px 0px 0px -40px;
	}

	.no-margin {
    	margin-right: 0 !important;
	}
	footer section p {
		font-size: 13px;
		color:#58585a;
	}
	
	footer section p a {
		color: #4fa259;
		text-decoration: none;
	}
	
	
	footer .ym50-right {
	    text-align: right;
	}
/* ---- End Footer ---- */

/* ========================================== */
/* ========== End Desktop/Main CSS ========== */
/* ========================================== */