@charset "utf-8";
/* CSS Document */

body {
	background-color: #323232;
	font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif;
}

hr {
	background: url("../img/h2.gif") repeat left top;
	border: none;
	height: 10px;
}
h1,h2,h3,h4 {
	text-transform: capitalize !important;
}

/* header section */

.header {
	background-color: #fff;
}
.logobox {
	margin: 25px 0 0 0;
}
.logobox .logo {
	display: block;
	float: left;
	height: 100px;
	width: auto;
}
.navbox {
	margin: 25px 0 0 0;
	text-align: right;
}
.info {
	float: right;
	width: 100%;
}
.info li {
	display: inline-block;
	margin: 0 0 0 20px;
	vertical-align:top
}
.contact {
	color: #f79420;
	display: block;
	font-size: 18px;
	line-height: 20px;
	margin: 0;
}
.contact strong , .contact a {
	color: #be202e;
	font-weight: normal; 
}
.contact a:hover {
	color: #009345;
	text-decoration: none;
}
.badges {
	display: block;
	float: left;
	height: 60px;
	margin: 0;
	width: auto;
}

/* navigation */

.navbar {
	float: right;
	/* font-size: 22px; */
	font-size: 16px;
	line-height: 30px;
	margin-bottom: 0;
	text-transform: lowercase;
}
.navbar i {
	display: inline;
	font-size: 22px;
	line-height: 28px;
}
.navbar a {
	color: #000;
}
.navbar a:hover , .nav>li>a:focus , .nav>li>a:hover {
	background-color: #fff;
	color: #1e75bb;
}
.nav .open>a, .nav .open>a:focus, .nav .open>a:hover {
	background-color: #fff;
}
.nav li:last-child a {
	padding-right: 0px;
}
.dropdown-menu {
	border: none;
	border-radius: 0;
}
.dropdown-menu>li>a {
	color: #000;
}
.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
	background-color: #fff;
	color: #1e75bb;
	font-weight: bold;	color: #1e75bb;
}
.navbar-toggle {
    background-color: #1e75bb;
    border: 1px solid transparent;
}
.navbar-toggle .icon-bar {
    background-color: #fff;
}

/* hero section */

.herosection {
	background: #fff;
	/*height: 700px;*/
	height: 525px;
	position: relative;
	width: 100%;
}
.herosection .response {
	box-sizing: border-box;
    left: 50%;
    margin-left: -585px;
    padding: 12px;
	position: absolute;
	top: 40px;
	width: 1170px;
    z-index: 999;
}
.herosection .response h2 {
	color: #fff;
	font: bold 40px/1.2 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin: 0;
	padding: 0;
    text-shadow: 2px 2px 5px rgba(0,0,0,.75);
}
.herosection .hero {
	height: 525px;
}

/* welcome section */

.welcome {
	background: #1e75bb;
	color: #fff;
	font-size: 21px;
	line-height: 25px;
	padding: 25px 0;
	text-align: justify;
}
.welcome h1 {
	font-size: 42px;
	line-height: 36px;
	margin: 0;
	margin-bottom: 20px;
}
.welcome .readmore {
	color: #f79420;
	font-size: 18px;
	line-height: 20px;
	text-transform: lowercase;
}
.welcome .readmore:hover {
	color: #009345;
	text-decoration: none;
}
.callback {
	/*background: #f79420;*/
	color: #fff;
	padding: 10px 15px;
}
.red .callback {
	background: #be202e;
}
.blue .callback  {
	background: #1e75bb;
}
.orange .callback  {
	background: #f79420;
}
.green .callback  {
	background: #009345;
}
.callback .form-control {
	background-color: #f8ae59;
	border: none;
	border-radius: 0;
	box-shadow: none;
	color: #fff;
	height: 30px;
	margin-bottom: 10px;
}
.callback .form-control::-webkit-input-placeholder {
	color: #fff;
}

.callback .form-control:-moz-placeholder { /* Firefox 18- */
	color: #fff;  
}

.callback .form-control::-moz-placeholder {  /* Firefox 19+ */
	color: #fff;  
}

.callback .form-control:-ms-input-placeholder {  
	color: #fff;  
}
.callback .form-control:focus {
	background-color: #009345;
	box-shadow: none;
}
.callback .btn-submit {
	background-color: #fff;
	border: none;
	border-radius: 0;
	color: #1e75bb;
	font-size: 18px;
	font-weight: bold;
	height: 30px;
	text-transform: uppercase;
	width: 100%;
}

/* main section */

.mainarea {
	background-color: #fff;
	font-size: 18px;
	padding: 0 0 50px 0;
	text-align: justify;
}
.mainarea h2 {
	color: #3c72b5;
	font-size: 38px;
	font-weight: 700;
	text-align: center;
	text-transform: lowercase;
}
.mainarea.magreen h1 , .mainarea.magreen h2 , .mainarea.magreen h3 , .mainarea.magreen h4 , .mainarea.magreen h5 , .mainarea.magreen h6 , .mainarea.magreen .whatnext .phone {
	color: #009345;
}
.mainarea.mared h1 , .mainarea.mared h2 , .mainarea.mared h3 , .mainarea.mared h4 , .mainarea.mared h5 , .mainarea.mared h6 , .mainarea.mared .whatnext .phone {
	color: #be202e;
}
.mainarea.maorange h1 , .mainarea.maorange h2 , .mainarea.maorange h3 , .mainarea.maorange h4 , .mainarea.maorange h5 , .mainarea.maorange h6 , .mainarea.maorange .whatnext .phone {
	color: #f79420;
}
.bigbutton {
	color: #000;
	display: block;
}
.bigbutton:hover {
	color: #000;
}
.bigbutton .icons-large {
	display: block;
	font-size: 140px;
	line-height: 200px;
	margin: auto;
	text-align: center;
	transition: all .25s ease-in-out;
	-o-transition: all .25s ease-in-out;
	-moz-transition: all .25s ease-in-out;
	-webkit-transition: all .25s ease-in-out;
}
.bigbutton:hover .icons-large {
	font-size: 175px;
	transition: all .25s ease-in-out;
	-o-transition: all .25s ease-in-out;
	-moz-transition: all .25s ease-in-out;
	-webkit-transition: all .25s ease-in-out;
}
.icon-electrical-testing {
	color: #1e75bb;
}
.icon-electrical-installation {
	color: #009345;
}
.icon-emergency-electrician {
	color: #be202e;
}
.icon-electrical-maintenance {
	color: #f79420;
}
.bigbutton h3 {
	display: block;
	float: left;
	line-height: 40px;
	margin-top: 0;
	padding-top: 10px;
	text-align: left;
	width: 100%;
}
.bigbutton h3.border-blue {
	border-top: 2px solid #1e75bb;
}
.bigbutton h3.border-green {
	border-top: 2px solid #009345;
}
.bigbutton h3.border-red {
	border-top: 2px solid #be202e;
}
.bigbutton h3.border-orange {
	border-top: 2px solid #f79420;
}
.bigbutton h3 .bsg {
	color: #000;
	display: inline-block;
	font-size: 38px;
	font-weight: 900;
	letter-spacing: -2px;
	line-height: 40px;
	text-transform: lowercase;
	vertical-align:top
}
.bigbutton h3 .icons-inline {
	display: inline-block;
	font-size: 28px;
	line-height: 40px;
	vertical-align:top
}
.bigbutton h3 .title {
	color: #000;
	display: inline-block;
	font-size: 16px;
	font-weight: normal;
	line-height: 40px;
	text-transform: lowercase;
	vertical-align:top
}
.bigbutton h3 .title-v2 {
	display: block;
	font-size: 24px;
	font-weight: normal;
	line-height: 30px;
	text-align: center;
	text-transform: lowercase;
	vertical-align:top
}

/* internal page */

.imageheader {
	background-size: cover;
	background-position: center center;
	height: 300px;
	width: 100%;
}
.imageheader-niceic , .imageheader-niceic img {
	height: auto;
	width: 100%;
}
.pagetitle {
	background: #1e75bb;
	color: #fff;
}
.pagetitle.ptgreen {
	background: #009345;
}
.pagetitle.ptred {
	background: #be202e;
}
.pagetitle.ptorange {
	background: #f79420;
}
.pagetitle h1 {
	font-size: 42px;
	line-height: 36px;
	margin: 20px 0;
	/*text-transform: lowercase;*/
}
.pagetitle h1.lc {
	text-transform: lowercase;
}
.mainarea .callback {
	margin-top: 25px;
}
.whatnexthead {
	color: #3c72b5;
	font-size: 32px;
	font-weight: 700;
	text-align: center;
	text-transform: lowercase;
}
.whatnext {
	font-size: 20px;
}
.whatnext .phone {
	color: #3c72b5;
	font-size: 24px;
	font-weight: 700;
}

/* blog */

.blogtitlelink h2 {
	display: block;
	float: left;
	width: 100%;
}
.blogtitlelink:hover h2 {
	color: #be202e;
	text-decoration: none;
}
.wrapper {
	display: block;
	float: left;
	max-height: 300px;
}
.datestamp {
	color: #009345;
	display: block;
	float: left;
	font: bold 14px/18px 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-align: center;
	width: 100%;
}
.bloglink {
	background-color: #be202e;
	clear: both;
	color: #f79420;
	display: block;
	float: left;
	font: bold 16px/30px 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif;
	padding: 0 25px;
	text-align: center;
	text-decoration: none;
	text-shadow: none;
	text-transform: uppercase;
}
.bloglink:hover {
	background-color: #f79420;
	color: #be202e;
	text-decoration: none;
}

/* electrical installation */

.servicelink h4 , h4.service {
	color: #009345;
	font-size: 24px;
	font-weight: bold;
	text-align: center;
}
.servicelink:hover , .servicelink h4:hover {
	color: #be202e;
	text-decoration: none;
}

/* contact us form */

#contactform .form-control {
	background-color: #009345;
	border: none;
	border-radius: 0;
	box-shadow: none;
	color: #fff;
	margin-bottom: 10px;
}
#contactform .form-control::-webkit-input-placeholder {
	color: #fff;
}

#contactform .form-control:-moz-placeholder { /* Firefox 18- */
	color: #fff;  
}

#contactform .form-control::-moz-placeholder {  /* Firefox 19+ */
	color: #fff;  
}

#contactform .form-control:-ms-input-placeholder {  
	color: #fff;  
}
#contactform .form-control:focus {
	background-color: #f79420;
	box-shadow: none;
}
#contactform textarea {
	height: 122px;
}
#contactform .btn-submit {
	background-color: #1e75bb;
	border: none;
	color: #fff;
	height: 34px;
	text-transform: uppercase;
	width: 100%;
}

/* responsive videos */

.embed-container {
	position: relative;
	padding-bottom: 52.5%; /* 16/9 ratio */
	padding-top: 30px; /* IE6 workaround*/
	height: 0;
	overflow: hidden;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* collapsible section */

.panel-group .panel {
    border-radius: 0;
}
.panel-default>.panel-heading {
	background-color: #1e75bb;
	border-color: #1e75bb;
	color: #fff;
	border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.panel-title {
    font-size: 21px;
}
.panel-title a , .panel-title a:hover {
	text-decoration: none;
}

/* areas */

.areas {
	list-style: none;
	padding: 0;
	width: 100%;
}
@media (max-width: 600px){
	.areas li {
		width: 50% !important;
	}
}
@media (max-width: 480px){
	.areas li {
		width: 100% !important;
	}
}
.areas li {
	display: block;
	float: left;
	text-align: center;
	width: 33%;
}
.areas li a {
	font-size: 24px;
	font-weight: bold;
}
.areas li a:hover {
	color: #009345;
	text-decoration: none;
}

.arealink {
	color: #f79420;
	display: block;
	font-size: 24px;
	font-weight: bold;
	text-align: center;
	text-transform: lowercase;
}
.arealink:hover {
	color: #337ab7;
	text-decoration: none;
}
.arealink i {
	color: #337ab7;
	padding-right: 10px;
}

/* footer section */

.footer {
	color: #fff;
	font-size: 14px;
	line-height: 14px;
	padding: 20px 0;
}
.footer h4 {
	font-size: 14px;
	font-weight: normal;
	line-height: 14px;
}
.footer a {
	color: #fff;
	text-decoration: none;
}
.footer .footcol1 h4 , .footer .footcol1 a:hover {
	color: #1e75b8;
}
.footer .footcol2 h4 , .footer .footcol2 a:hover {
	color: #009045;
}
.footer .footcol3 h4 , .footer .footcol3 a:hover {
	color: #bb202e;
}
.footer .footcol4 h4 , .footer .footcol4 a:hover {
	color: #f49120;
}
.footcol4 a {
	font-size: 25px;
	margin-right: 5px;
}

/* responsive */

@media screen and (max-width: 767px) {
  .logobox , .navbox {
    margin: 10px 0 0;
  }
  .logobox .logo {
    height: 50px;
  }
  .info li {
    margin: 0 0 0 10px;
  }
  .contact {
    font-size: 11px;
    line-height: 15px;
  }
  .badges {
    height: 30px;
    margin: 10px 0 0 0;
  }
  .navbar {
    float: left;
    margin-right: -15px;
    text-align: left;
    width: 100%;
  }
  .herosection , .herosection .hero {
    height: 300px;
  }
  .herosection .response , .galleria-theme-bsg .galleria-info {
  	left: 0;
    margin-left: 15px;
    width: 90%;
  }
  .herosection .response {
  	padding: 0;
    top: 25px;
  }
  .galleria-theme-bsg .galleria-info {
    bottom: 40px;
  }
  .galleria-theme-bsg .galleria-info-text {
    padding: 0;
  }
  .herosection .response h2 , .galleria-theme-bsg .galleria-info-description {
    font: bold 20px/1.2 "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
  }
  .galleria-theme-bsg .galleria-info-title {
    font: bold 26px/1.1 "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
  }
  .galleria-theme-bsg .galleria-info-description a {
    font: bold 18px/30px "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
    margin-top: 10px;
    width: 200px;
  }
  .welcome , .welcome .readmore {
    font-size: 16px;
    line-height: 18px;
  }
  .welcome h1 , .pagetitle h1 {
    font-size: 32px;
    line-height: 30px;
  }
  .mainarea {
    font-size: 14px;
  }
  .mainarea h2 {
    font-size: 28px;
  }
  .bigbutton .icons-large {
    font-size: 105px;
    line-height: 150px;
  }
  .bigbutton:hover .icons-large {
	font-size: 130px;
  }
}
@media screen and (max-width: 500px) {
  .info li {
    margin: 0px 0px 0px 2px;
  }
  .logobox .logo {
    height: 40px;
  }
  .badges {
    height: 26px;
    margin: 12px 0px 0px;
  }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
  .logobox .logo {
    /* height: 75px; */
    height: 60px;
  }
  .info li {
    margin: 0 0 0 15px;
  }
  .badges {
    height: 40px;
    margin-top: 7px; 
  }
  .contact {
    font-size: 16px;
    line-height: 18px;
  }
  .navbar {
	font-size: 13px;
  }
  .nav > li > a {
    padding: 10px;
  }
  .herosection , .herosection .hero {
    height: 400px;
  }
  .herosection .response , .galleria-theme-bsg .galleria-info {
    margin-left: -375px;
    width: 750px;
  }
  .herosection .response h2 , .galleria-theme-bsg .galleria-info-description {
    font: bold 25px/1.2 "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
  }
  .galleria-theme-bsg .galleria-info-title {
    font: bold 30px/1.1 "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
  }
  .welcome , .welcome .readmore {
    font-size: 18px;
    line-height: 20px;
  }
  .welcome h1 , .pagetitle h1 {
    font-size: 34px;
    line-height: 30px;
  }
  .mainarea {
    font-size: 16px;
  }
  .mainarea h2 {
    font-size: 30px;
  }
}
@media screen and (min-width: 991px) and (max-width: 1399px) {
  .herosection , .herosection .hero {
	height: 450px;
  }
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
  .navbar {
	font-size: 13px;
  }
  .nav > li > a {
    padding: 10px;
  }
  .herosection .response , .galleria-theme-bsg .galleria-info {
    margin-left: -485px;
    width: 970px;
  }
  .bigbutton h3 .bsg {
	font-size: 28px;
	letter-spacing: -2px;
	line-height: 40px;
  }
  .bigbutton h3 .icons-inline {
	font-size: 20px;
	line-height: 40px;
  }
  .bigbutton h3 .title {
	font-size: 13px;
	line-height: 40px;
  }
}

@media (min-width: 385px){
	.navboxmob {
		display: none;
	}
}
@media (max-width:385px){
	
	.navbox{
		display: none;
	}
	.navboxmob {
		display: block;
		width: 100%;
		float: left;
		margin-top: 8px;
	}
	.navbar-toggle {
		
		color: #fff;
		margin-top: -35px;
	}
	.info {
		padding-left: 0;
	
	}
	.contact {
		font-size: 14px;
		line-height: 20px;
	}
	.info li:first-child {
		/*width: 100%;*/
		
	}
	.badges {
		height: 50px;
	}
	
	
}

/* Homepage Responsive elements for banner */

@media (max-width:1000px){
	
	.galleria-container {
		height: 425px;
	}
	
}