/* Scss Document */



/* Add here all your css styles (customizations) */

/*backgrounds */




/*colors */
$color-orange: #FC8002;
$color-blue: #2093D6;
$scg-matte-black: rgb(60,60,60);
.scg-orange {color:$color-orange;}
.scg-blue {color:$color-blue;}

$width-x-small: 575px;
$width-small: 768px;
$width-medium: 991px;
$width-large: 1199px;

body {background: rgb(240,240,240);font-family: sofia-pro, sans-serif;}
.scg-matte-black-bg {background-color: $scg-matte-black;}

img.footerImg {max-width: 100%;}
ul.affiliates {margin-left: 0 !important; padding-left: 0 !important;}
ul.affiliates li {
	list-style-image: none; list-style-image: none;
	width: 48% !important; margin-right: 5px; float: left; display: inline; margin-bottom:5px !important; }
ul.affiliates li img {max-width: 100% !important;}

/* helpers */
.nl-envelope {border: #fff solid 1px; border-left: hidden; text-align: center;}
.u-btn-skew__inner i {padding-left: 20px;}
/* alignement */
cite.quoteCite {text-align: right; float: right; padding-right: 20px; font-size: 1.2em; }



.bannerbreak {display: inline;


	
	
	@media screen and (max-width: 1125px){display: none;}

}

.d-x-small-only {display:none;

@media screen and (max-width: 479px){
	display:inline;
	}

	@media screen and (max-width: 479px) and (orientation: landscape){
	display:none !important;
	}

}

.d-small-only {
	
	display:none;

@media screen and (max-width: 778px){
	display:inline;
	}

	@media screen and (max-width: 778px) and (orientation: landscape){
	display:none !important;
	}

}


.hide-md-dwn {
	
	@media screen and (min-width: $width-large){display: none ;}
	
	@media screen and (max-width: $width-medium){display: block;}
	
	
}

.show-md-up {
	@media screen and (min-width: 1024px){display: block;}
	@media screen and (max-width: 1023px){display: none ;}
}


.show-sm-down {
	
@media screen and (min-width: 778px){display: none;}
	@media screen and (max-width: 777px){display: block ;}	
	
}


.show-lg-only {
	
	@media screen and (min-width: 1200px){display: block !important;}
	
	@media screen and (max-width: $width-large){display: none !important;}
	
	
}

.nws {white-space: nowrap;}


@media screen and (max-width: 479px){
	
	
.g-pl-30--xs {padding-left: 0.24286rem !important; }

}

.featureBox-v2 {
	
	background-color: rgb(225,225,225);
	width: 100%;
	
}

.featureBox-v3 {
	
	background-color: rgb(225,225,225);
	width: 100%;
	text-align: center;
	
	& .trustedLogo {max-width: 120px; 
	
		
	
	}
	
}

.left-highlight:before {

	content: '.';
	position: absolute;
	top: 65px;
	left: 5px;
	height: 160px;
	width: 4px;
	background-color: $color-blue;
		
	
	
	
}

.left-highlight-v2 {display: block;  position: relative;}
.left-highlight-v2:before {

	content: '';
	position: absolute;
	top: -10px;
	left: -15px;
	height: 110%;
	width: 4px;
	background-color: $color-blue;
		
	
	
	
}




ul.responsiveList li {width: 100%;   font-size: 14px;
	padding: 25px 0px; border-bottom: #999 solid 1px;
	
	
	@media screen and (max-width: $width-medium){
		
		width: 30%;  display: inline-table !important;
		padding: 25px 10px; box-sizing: border-box; margin-right: 25px;
		text-align: center;
		
		&:nth-child(3n), &:nth-child(6n) {margin-right: 0;}
		& i {display: block; padding-bottom: 8px;}
		
	}
	@media screen and (max-width: $width-small){
		
		width: 49%;  display: inline-table !important;
		
	}
	
	@media screen and (max-width: $width-x-small){
		
		width: 100%;  display: inline-table !important;
		
	}
	
}

ul.responsiveList li i {font-size: 20px;}


ul.responsiveList-v2 li {width: 100%;   font-size: 14px;
	
	border-bottom: #999 solid 1px;
	padding: 20px 0;
	
	
	@media screen and (max-width: $width-small){
		
		width: 31%;  display: inline-table !important;
		
	}
	
	
	@media screen and (max-width: $width-x-small){
		
		width: 100%;  display: inline-table !important;
		
	}
	
}

ul.responsiveList-v3 {margin-top: -40px;}
ul.responsiveList-v3 li {width: 100%; text-align: center !important;   font-size: 14px;
	padding: 25px 0px; border-bottom: #999 solid 1px;
	
	
	@media screen and (max-width: $width-medium){
		
		
		
	}
	@media screen and (max-width: $width-small){
		
		width: 49%;  display: inline-table !important;
		
	}
	
	@media screen and (max-width: $width-x-small){
		
		width: 100%;  display: inline-table !important;
		
	}
	
}



ul.blockList { width: 100%; padding: 40px 0px;}
ul.blockList li {width:100%; display:inline-table !important; float: none; margin-bottom: 10px;  font-size: 14px; text-align: center;
	padding: 25px 0px; border: rgb(220,220,220) solid 1px;  box-sizing: border-box; font-size: 18px;
	
	
	@media screen and (max-width: $width-medium){
		ul.blockList { width: 100%; padding: 20px 0px;}
		  display: inline-table !important;
		padding: 25px 10px; box-sizing: border-box; 
		text-align: center;
		
		&:nth-child(3n), &:nth-child(6n) {margin-right: 0;}
		& i {display: block; padding-bottom: 8px;}
		
	}
	@media screen and (max-width: $width-small){
		
		width: 100%;  display: inline-table !important;
		
	}
	
	@media screen and (max-width: $width-x-small){
		
		width: 100%;  display: inline-table !important;
		text-align: center !important;
		
	}
	
}

ul.blockList li i {font-size: 50px; margin-bottom: 12px; display: block;}






.text-center-small {
	
	@media screen and (max-width: $width-medium){
	
		text-align: center !important;}

}

div.imgCenterSml {text-align: center;}
.img-center-small {
	
@media screen and (max-width: $width-medium){
	
		text-align: center !important; max-width: 280px; float: none; margin-left: auto; margin-right: auto;}	
	
	
}

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

	.hide-xs {display: none;}
	
}



ul.subFeatureList {
	width: 100%;
	font-family: univia-pro, sans-serif;
	font-weight: 600;
	
	padding-bottom: 10px;
	text-align: center;
	padding-left: 0;
	margin-left: 0;
	
	@media screen and (max-width: $width-small) {text-align: center;}
	@media screen and (max-width: $width-x-small) {text-align: left;}
	
	
	


}
ul.subFeatureList li 
{
	display: inline;
	padding-right: 25px;
	border-right: rgb(200,200,200) solid 1px;
	margin-right: 25px;
	font-size: 25px;
	
	&:last-child {margin-right: 0px; border-right: hidden;}
	
	@media screen and (max-width: $width-large){ font-size: 22px;}
	
	@media screen and (max-width: $width-medium){ font-size: 18px;}
	
	@media screen and (max-width: $width-small) { 
		
	 width: 100%; 
		padding-right: 10px;
		font-size: 18px;
		
	 border: none;
		padding-left: 0;
		
		padding-bottom: 20px;
	}
	
	@media screen and (max-width: $width-x-small) { 
		display: block;
	 width: 100%; 
		padding-right: 10px;
		font-size: 22px;
		
	 border: none;
		padding-left: 2px;
		
		padding-bottom: 10px;
	}
	
	

}

ul.sliderList {}
ul.sliderList li {display: inline;}

@media screen and (max-width: $width-small) {
	
	.list-pd-l-small {padding-left: 16px;}
.list-pd-b-small {padding-left: 16px;}}

/*Services Section*/

.u-info-v2-2__item {
	
	
cursor: pointer;	
	
}







.u-info-v2-2 {z-index: 1000 !important;}


.u-info-v2-2__item:hover
{
transition: all .20s ease-in-out;
  -moz-transition: all .20s ease-in-out;
  -webkit-transition: all .20s ease-in-out;
	background-color: rgba(0,0,0,0.2);cursor: pointer;
	
}

.u-info-v2-2__item a.serviceBtn {color:rgba(255,255,255,0.7); font-weight: bold;  font-size: 45px; font-style: normal !important; text-decoration: none; letter-spacing: 1px; }
.u-info-v2-2__item:hover a.serviceBtn {color:rgb(31,142,206); font-weight: bold;  font-size: 45px; font-style: normal !important; text-decoration: none; }

.u-info-v2-2__item i.serviceIcon {color: $color-blue;}


/*
.u-info-v2-2__item:hover::after, .u-info-v2-2__item:hover::before {border-top: hidden;}
*/


.u-info-v2-2__item:hover i.serviceIcon 
{
font-size: 70px;
	transition-duration: 0.2s;
	z-index: 1 !important;

}
.u-info-v2-2__item:hover a {text-decoration: none!important;}

.homeServiceInfo {padding: 20px 10px 30px 10px !important; text-transform: uppercase;}
.homeServiceInfo a {text-decoration: none!important;}
.homeServiceInfo p {font-size: 1.1em;  padding: 0 10px;}


.u-btn-skew__inner .far {font-size: 1.8em; padding-right: 10px; float: left;}
.u-btn-skew__inner span {line-height: 1.8em; float: left; }

a .serviceMore {line-height: 30px; color: $color-blue}
p.serviceTypeLead {position: relative; text-align: center; font-weight: bold; font-style: italic;margin-top: 50px;  padding: 15px 0 5px 0; text-transform: uppercase; letter-spacing: 1px; display: block;}
p.serviceType {position: relative; padding: 0px 0 0px 0;}
h3.serviceBoxHeading {
font-family: univia-pro, sans-serif;
font-weight: 600;
font-style: normal;
	display: inline-block;
letter-spacing: 1px; font-size: 20px; line-height: 30px;   padding-bottom: 0px; 
	position: relative !important; color: #fff;  padding-left: 0px;  


&:after{
	content:'';
	position: absolute !important; 
	left: 0; 
	bottom:-30px; 
	background-color:  $color-blue;
	height: 3px; 
	width: 100%;
	margin-bottom: 20px;}
	
	}

h3.serviceBoxHeading span {font-size: 35px !important; line-height: 35px; letter-spacing: 3px; padding-bottom: 5px; display: block;}

#commercial {background-image: url("../img/bg/commercial_electricians.jpg");
background-size: cover; background-repeat: no-repeat; position: relative;}
#industrial {background-image: url("../img/bg/industrial_electricians_bground.jpg");
background-size: cover; background-repeat: no-repeat;}
#dataCentres {background-image: url("../img/bg/data_center_electricians_index_bg.jpg");
background-size: cover; background-repeat: no-repeat;}
#healthcare {background-image: url("../img/bg/healthcare_bground.jpg");
background-size: cover; background-repeat: no-repeat;}
#residential {background-image: url("../projects/black_rock2.jpg");
background-size: cover; background-repeat: no-repeat;
-webkit-clip-path: polygon(0 20%, 100% 0, 100% 90%, 0% 100%);
clip-path: polygon(0 20%, 100% 0, 100% 90%, 0% 100%); margin-top: 80px;}
#renewables {background-image: url("../img/bg/service_renewables.jpg");
background-size: cover; background-repeat: no-repeat;}


#commercial:after, #dataCentres:after, #residential:after  {
content: '';
    position: absolute;
    right: 0;
    top: 33%;
	width: 0px;
height: 0px;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-right: 60px solid rgba(25,25,25,0.6);
  }

#industrial:after, #healthcare:after, #renewables:after  {
content: '';
    position: absolute;
    left: 0;
    top: 33%;
	width: 0px;
height: 0px;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid rgba(25,25,25,0.6);
  }


ul.list-unstyled {font-family: sofia-pro, sans-serif;
	font-size: 15px !important;

font-style: normal;
font-weight: 300;
font-style: normal;
letter-spacing: 0px;}

p {font-family: sofia-pro, sans-serif; font-size: 15px; font-weight: 300 !important;
&.lead {font-size: 1.1em;
	
	line-height: 32px;
	padding-bottom: 10px;
	
	
}
	&.pageLead {font-size: 1.5em;
	
	line-height: 28px;
		padding-bottom: 10px;
	text-transform: uppercase;}
	
	#contacts-section & {
		font-size: 12px !important;
	}
}


#contacts-section h4 {font-size: 12px;font-weight: 300;}

section#contact .media {
	
	background-color: rgb(220,220,220); 
	border: rgb(220,220,220) solid 1px;
	border-radius: 4px;

}

section#contact .media a {color: $color-blue;
	
	&:hover {}
	&:active {}



}



.specFont {font-family: univia-pro, sans-serif;
font-weight: 600;
font-style: normal;  letter-spacing: 1px;   ; position: relative !important; color: #000; padding-top: 5px; font-size: 20px; padding-left: 0px; display: inline-block;}




h2.specFont {font-family: univia-pro, sans-serif;
font-weight: 600;
font-style: normal;
font-style: none;  letter-spacing: 0px; font-size: 32px; line-height: 45px;    padding-bottom: 10px; 
	 position: relative !important; color: rgb(100,100,100);   padding-left: 0px; display: inline-block;}

h2.feature {position: relative;font-size: 35px; margin-bottom: 30px;}
h2.feature:after{
	content:'';
	position: absolute !important; 
	left: 0px; 
	bottom:-5px; 
	background-color: $color-blue !important; 
	height: 5px; 
	width: 100%;
	
	}

h2.specFontCenter {font-family: univia-pro, sans-serif;
font-weight: 600;
font-style: normal;
font-style: none;  letter-spacing: 0px; font-size: 38px; line-height: 45px;    padding-bottom: 10px; 
	 position: relative !important; color: rgb(150,150,150);  padding-left: 0px; display: inline-block;}

h3.specFont {
font-family: univia-pro, sans-serif;
font-weight: 600;
font-style: normal;
	display: inline-block;
letter-spacing: 0px; font-size: 28px; line-height: 30px; padding-top: 0px;   padding-bottom: 0px; 
	position: relative !important; color: rgb(100,100,100);  padding-left: 0px;  }


h3.promoHeading {
font-family: univia-pro, sans-serif;
font-weight: 600;
font-style: normal;
	display: inline-block;
letter-spacing: 0px; font-size: 20px; line-height: 30px; padding-top: 0px;   padding-bottom: 0px; 
	position: relative !important; color: rgb(100,100,100);  padding-left: 0px; word-spacing: 5px;

	& span {word-spacing: 2px; font-size: 30px;}


}
	
	

h3.promoHeading::after{
	content:'';
	position: absolute !important; 
	left: 100px; 
	bottom:-4px; 
	background-color: transparent !important; 
	height: 0px; 
	width: 100px;
	
	
	}


h4.specFont {
font-family: univia-pro, sans-serif;
font-weight: 700;
font-style: normal;  letter-spacing: 0px;  font-weight: 600;  letter-spacing: 0px;   padding-bottom: 0px; position: relative !important;  padding-top: 5px; padding-left: 0px; display: inline-block;}

.media-body h2 {
font-family: univia-pro, sans-serif;
font-weight: 500;
font-style: normal; font-size: 25px;  letter-spacing: 0px;   letter-spacing: 0px;   padding-bottom: 0px; position: relative !important; color: #000; padding-top: 5px; padding-left: 0px; display: inline-block;	
}


h5.specFont {
font-family: univia-pro, sans-serif;
font-weight: 600;
font-style: normal;
	display: inline-block;
letter-spacing: 0px; font-size: 28px; line-height: 26px; padding-top: 0px;   padding-bottom: 4px; 
	position: relative !important; color: rgb(100,100,100);  padding-left: 0px;  
	
&:after{
	content:'';
	position: absolute !important; 
	left: 0; 
	bottom:-5px; 
	background-color:  $color-blue;
	height: 3px; 
	width: 100%;}
	
	}


	
	







h2.specFontCenter:after{
	content:'';
	position: absolute !important; 
	left: 42.5%; 
	bottom:-15px; 
	background-color: #01B2FE !important; 
	height: 5px; 
	width: 80px;
	
	}

span.trustedBy { 
	position: relative; width: 12%; display: inline; float: left; text-align: left; padding-left: 30px; font-family: univia-pro, sans-serif;  color: rgb(90,90,90) !important; padding-top: 20px; font-size: 16px;    font-weight: 600;
	
	
	@media screen and (max-width: 1168px){ font-size: 14px; padding-top: 25px; padding-left: 20px;}
	@media screen and (max-width: 950px){width: 15%; }
	@media screen and (max-width: 712px){font-size: 12px;}
	
	@media screen and (max-width: 650px){display: none; }




}

.clients {margin-top: 0px; display: inline; float: left; width: 88%; 
@media screen and (max-width: 950px){width: 85%; }
	@media screen and (max-width: 712px){ }
	@media screen and (max-width: 650px){width: 100%; }

}
/*
.clients:after{
	content:'';
	position: absolute !important; 
	left: 2.5%; 
	bottom:-15px; 
	background-color: rgb(240,240,240) !important; 
	height: 2px; 
	width: 95%;
}
*/

.clients_v2 {margin-top: 0px; display: inline; float:none; width: 100%;
@media screen and (max-width: 950px){width: 100%; }
	@media screen and (max-width: 712px){ }
	@media screen and (max-width: 650px){width: 100%; }

}


.clients_v2 img {max-width: 100px; height: auto;}

.clientLogo {background-color: #fff;}

.js-carousel {margin-bottom: 0;}
.js-prev 
{position: absolute;
 left: 0px;
 top: 45%;
}
.js-next 
{position: absolute;
 right: 0px;
 top: 45%;
}

h5.clientTitle {font-size: 1.1rem;

	& span {text-transform: uppercase; font-size: 1.4rem;}
}

/*
span.trustedBy:after {

content: '';
position: absolute;
width: 100%;
right: 4px;
bottom: -4px;
background-color: rgb(100,100,100);
height: 2px;

}
*/





.bg-clip {
	
 background: rgb(240,240,240);	
	margin-top: 0px;

	padding-bottom: 0px;
	padding-top: 0px;
	margin-bottom: 0px;
	
	  clip-path: polygon(0px 100%,100% 91.5%,100% 0px,0% 0%);
	-webkit-clip-path: polygon(0px 100%,100% 91.5%,100% 0px,0% 0%);
	z-index: 100 !important;
	
	
	
}

.bg-clip-1a {
	
 background: rgb(240,240,240);	
	

	padding-bottom: 20px;
	padding-top: 18px;
	margin-bottom: 0px;
	/*
	  clip-path: polygon(0px 0px, 100% 0%, 100% 65%, 0% 100%);
	-webkit-clip-path: polygon(0px 100%,100% 90%,100% 0px,0% 0%);
	*/
	
	
	
}

.bg-clip-2 {
	
/*
	background: url("../img/vector-abstract-hexagon-pattern-molecular-sci-fi-scientific-design-tech-innovation-concept-background.png");
	*/
	
	background-image: url("../img/bg/services_bground.png");
	background-repeat: none;
	background-position: top center;
	background-repeat: no-repeat;
	background-color: rgb(220,220,220);
	background-size: cover;
	padding-top: 150px;
	padding-bottom: 90px;
	
	  clip-path: polygon(0 0, 100% 5%, 100% 95%, 0% 100%);
	-webkit-clip-path: polygon(0 0, 100% 5%, 100% 95%, 0% 100%);
	
	
	@media screen and (max-width: $width-large){ 
	
	clip-path: polygon(0px 100%,100% 95%,100% 0%,0% 5%);
	-webkit-clip-path: polygon(0px 100%,100% 95%,100% 0%,0% 5%);
	}
	
	@media screen and (max-width: $width-small){ 
	
	clip-path: polygon(0px 100%,100% 97.5%,100% 0%,0% 2.5%);
	-webkit-clip-path: polygon(0px 100%,100% 97.5%,100% 0%,0% 2.5%);
	}


}

.bg-clip-2a {
	
	background-repeat: none;
	background-position: top center;
	background-repeat: no-repeat;
	background-color: rgb(220,220,220);
	background-size: cover;
	padding-top: 160px;
	padding-bottom: 90px;
	clip-path: polygon(0 1%, 99% 10%, 100% 89%, 0 100%);
	-webkit-clip-path: polygon(0 1%, 99% 10%, 100% 89%, 0 100%);
	
	
	@media screen and (max-width: $width-large){ 
	
	clip-path: polygon(0px 100%,100% 100%,100% 0%,0% 5%);
	-webkit-clip-path: polygon(0px 100%,100% 100%,100% 0%,0% 5%);
	}
	
	@media screen and (max-width: $width-small){ 
	
	clip-path: polygon(0px 100%,100% 100%,100% 0%,0% 2.5%);
	-webkit-clip-path: polygon(0px 100%,100% 100%,100% 0%,0% 2.5%);
	}


}

.bg-clip-2b {
	
	background-repeat: none;
	background-position: top center;
	background-repeat: no-repeat;
	background-color: rgb(220,220,220);
	background-size: cover;
	padding-top: 160px;
	padding-bottom: 90px;
	clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 100%);
	-webkit-clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 100%);
	
	
	@media screen and (max-width: $width-large){ 
	
	clip-path: polygon(0px 100%,100% 100%,100% 0%,0% 5%);
	-webkit-clip-path: polygon(0px 100%,100% 100%,100% 0%,0% 5%);
	}
	
	@media screen and (max-width: $width-small){ 
	
	clip-path: polygon(0px 100%,100% 100%,100% 0%,0% 2.5%);
	-webkit-clip-path: polygon(0px 100%,100% 100%,100% 0%,0% 2.5%);
	}


}





.bg-clip-3 {
	
	background-repeat: none;
	background-position: top center;
	background-repeat: no-repeat;
	
	background-size: cover;
	padding-top: 20px;
	padding-bottom: 20px;
	clip-path: polygon(0 1%, 99% 0, 100% 100%, 0 89%);
	-webkit-clip-path: polygon(0 1%, 99% 0, 100% 100%, 0 89%);
	
	
	@media screen and (max-width: $width-large){ 
	
	clip-path: polygon(0px 100%,100% 100%,100% 0%,0% 5%);
	-webkit-clip-path: polygon(0px 100%,100% 100%,100% 0%,0% 5%);
	}
	
	@media screen and (max-width: $width-small){ 
	
	clip-path: polygon(0px 100%,100% 100%,100% 0%,0% 2.5%);
	-webkit-clip-path: polygon(0px 100%,100% 100%,100% 0%,0% 2.5%);
	}


}


.testimonial_bground {
	
	margin-top: -50px;
	
/*
	background: url("../img/vector-abstract-hexagon-pattern-molecular-sci-fi-scientific-design-tech-innovation-concept-background.png");
	*/
	
	background-image: url("../img/bg/services_bground.png");
	background-repeat: none;
	background-position: top center;
	background-repeat: no-repeat;
	background-color: rgba(25,25,25,0.95);
	background-size: cover;
	padding-top: 150px;
	padding-bottom: 90px;
	

	
	
	@media screen and (max-width: $width-large){ 
	
	clip-path: polygon(0px 100%,100% 95%,100% 0%,0% 5%);
	-webkit-clip-path: polygon(0px 100%,100% 95%,100% 0%,0% 5%);
	}
	
	@media screen and (max-width: $width-small){ 
	
	clip-path: polygon(0px 100%,100% 97.5%,100% 0%,0% 2.5%);
	-webkit-clip-path: polygon(0px 100%,100% 97.5%,100% 0%,0% 2.5%);
	}


}


 


div.media {border: rgb(200,200,200) solid 1px; border-radius: 2px;  padding: 30px 15px 30px 30px;}

.u-info-v2-2 {padding-top: 10px !important;}


 h3.serviceTitle {
color: rgb(200,200,200)!important; 
font-family: univia-pro, sans-serif;
font-weight: 700;
font-style: normal;  letter-spacing: 0px;  font-weight: 600;  letter-spacing: 0px;   padding-bottom: 0px; position: relative !important;  padding-top: 0px; padding-left: 0px; display: inline-block;} 






/*SCG COLOURS*/
.g-bg-transparent {background-color: transparent !important;}

.featureBox p {font-family: upgrade, sans-serif !important;
font-weight: 400;
font-style: normal;}


.map {
    width: 100%;
    height: 450px;
}

#map {
    height: 100%;
}

img.img-styled{

-webkit-box-shadow: 4px 4px 5px 0px rgba(160, 160, 160, 0.75);
-moz-box-shadow:    4px 4px 5px 0px rgba(160, 160, 160, 0.75);
box-shadow:         4px 4px 5px 0px rgba(160, 160, 160, 0.75);

}

/* Auxillery Menu*/
.hideBreak {display: none;}


.tp-bullets {}

.owl-nav {bottom: 60%; position: absolute; left: -7.5%; width: 115%; font-size: 40px; }
.owl-nav .owl-next, .owl-nav .owl-prev {padding: 10px 20px !important;}
.owl-carousel .owl-nav .owl-prev {left: 0; position: absolute; }
.owl-carousel .owl-nav .owl-next {right: 0; position: absolute; }

#clientCarousel {position: relative;}
#clientCarousel .owl-nav { position: absolute; top: -50px; left: 95%; color: rgb(200,200,200); width: 50px; height: 20px; font-size: 18px; 

	@media screen and (max-width: 1100px ) {
		
	left: 92%; 	
		
		
	}
	
	@media screen and (max-width: 700px ) {
		
	left: 90%; 	
		
		
	}
	
	@media screen and (max-width: 700px ) {
		
	left: 85%; 	
		
		
	}


}



.owl-carousel .item {padding: 10px;}
.owl-carousel img{

-webkit-box-shadow: 4px 4px 5px 0px rgba(160, 160, 160, 0.75);
-moz-box-shadow:    4px 4px 5px 0px rgba(160, 160, 160, 0.75);
box-shadow:         4px 4px 5px 0px rgba(160, 160, 160, 0.75);

}




.owl-carousel.clients img, .owl-carousel.clients_v2 img{

-webkit-box-shadow: none;
-moz-box-shadow:   none;
box-shadow:         none;

}

span.altHeading {color: rgb(54,157,217); letter-spacing: 0px; font-size: 35px; }
.subcaption {text-align: center; margin-top: 15px;}

.rowPad {padding-top: 50px; padding-bottom: 60px;}
.overlapUp {margin-top: -105px !important;}

@media screen and (max-width: 767px) {
	
.rowPad {padding-top: 0px; padding-bottom: 60px;}	
	
}

@media screen and (max-width: 767px) {
	.overlapUp {margin-top: -65px !important;}
	
	
}

ul.inline li {display: inline-table !important;}

#auxMenu {font-family: 'Lato',;   color: #d9d9d9; letter-spacing: 0px; font-size: 8px;}
#auxMenu a {color: #d9d9d9; font-size: 10px;}


.tp-caption {font-family: univia-pro, sans-serif !important;}
.tp-caption-sub {font-family: sofia-pro, sans-serif;}
.tp-sub-caption:before {
	content: '';
	width: 500px;
	height: 2px;
	position: absolute;
	bottom: 0;
	left: 0;

}





.featureBox {padding: 25px; background-color: rgba(200,200,200,0.1); border: rgb(230,230,230) solid 1px; background: url("../img/bg/energy_management.jpg") no-repeat contain;}
.featureBox h3.h5 {font-family: Raleway !important; font-weight: 700; text-transform: uppercase; letter-spacing: 0px;}
.featureBox p {font-family: Raleway !important; color: rgb(120,120,120) !important; }


div.introText h2.h2 {font-family: Raleway !important; font-weight: 700;}

/*
div.introText p:after {
	
content:'';
	position: absolute !important; 
	left: 0px; 
	bottom:-20px; 
	background-color: rgb(32,147,214) !important; 
	height: 5px; 
	width: 10%;
	left: 45%;
	
	
}
*/

.borderBottom {border-bottom: rgb(245,245,245) solid 1px; padding-bottom: 60px;}
/*
.roundedTopLeft {
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
 border-top-left-radius: 5px;

}
.roundedTopRight {
-moz-border-radius-topright: 5px !important;
-webkit-border-top-right-radius: 5px !important;
border-top-right-radius: 5px;
}
*/


	
.roundedTop {
-moz-border-radius: 5px !important;
-webkit-border-radius: 5px !important;
 border-radius: 5px !important;

}



.roundedLeftOnly {
	-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
 border-top-left-radius: 5px;
}
.roundedRightOnly {
	
	-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius: 5px;
 border-top-right-radius: 5px;

	
}
	





.dropShadow {
	-webkit-box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    2px 2px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow:         2px 2px 5px 0px rgba(50, 50, 50, 0.75);
	
	
	
}



a.link-v1 {color:#ffffff;}
a.link-v1:hover, a.link-v1:active {color:#ffffff; text-decoration: underline;}


.customTopBar {background: #01B2FE;}
.topBarPhone {display: inline; font-size: 16px; color: #232121; line-height: 30px; padding-left: 6px; font-family: "Open Sans", Helvetica, Arial, sans-serif; letter-spacing: -1px; font-weight: bold;}

.g-bg-grey { background-color: #232121;  }
.g-bg-scg-g {background-color: #ADAFB2;}




.footerLogo {padding-bottom: 20px;}
.footerLogo img {width: 80px; max-width: 110px; height: auto;}

.scg-background { 
	background-image: url(../img/logo/scg-white-logo-transparent.png); 
	background-position: 125% 0%; background-size: 60%; background-repeat: no-repeat;
}

.hidden-sm {display:block;}

/*NAVIGATION*/

.navbar-brand img {width: 140px; margin-top: -5px;

	@media screen and (max-width: $width-medium){
		
		width: 120px;
		
	}
	@media screen and (max-width: $width-small){
		
		width: 100px;
		
	}


}

/*--------------------------------------------------
  Hamburgers
----------------------------------------------------*/
.hamburger {
  padding: 10px; position: fixed !important; top: 10px; right: 25px; }

.hamburger-box {
  width: 37px;
  height: 25px;
	@media screen and (max-width: $width-small){
		
		
		
	}


}

.hamburger-inner {
  margin-top: 1px; }

.hamburger-inner, .hamburger-inner::after, .hamburger-inner::before {
  width: 37px;
  height: 2px;
  border-radius: 0;
@media screen and (max-width: $width-small){
		
		width: 30px;
		
	}


}

.u-header__section--dark {padding: 10px 0;

	@media screen and (max-width: $width-medium){padding: 3px 0px 0px 0px;}
	@media screen and (max-width: $width-small){padding: 3px 0;}



}

.u-header__section--light .hamburger-inner,
.u-header__section--light .hamburger-inner::after,
.u-header__section--light .hamburger-inner::before {
  background: #555; }

.u-header__section--dark .hamburger-inner,
.u-header__section--dark .hamburger-inner::after,
.u-header__section--dark .hamburger-inner::before {
  background: #eee; }




	
	.form-control i {position: absolute}







/*NAVIGATION*/

.navbar {padding-right: 0px;}
.nav-link {font-size: 14px; 
	color: #e1e1e1 ;
	text-transform: capitalize;
	font-weight: 400;
	letter-spacing: 1px;
	font-style: normal;
	border-right: rgb(220,220,220) solid 1px;
	border-top-right-radius: 0px !important;
	border-bottom-right-radius: 0px !important;
	text-align: center !important;
	min-width: 150px;
	
	@media screen and (max-width: $width-medium){
		
		border-right: none;
		font-size: 20px; 
		
	}
	
	}


a.nav-link {font-family: univia-pro, sans-serif !important;
font-weight: 400;
font-style: normal;
	
	&:hover { 
	color: $color-orange !important;}
	
}

li.nav-item {
	position: relative; text-align: center !important;
&.active:after {content:'';width: 80%; position: absolute; left: 10%; bottom: 0px; height: 4px; background-color: #FC8002;
	
	
	}}
	
	@media screen and (max-width: $width-medium){
	li.nav-item.active:after {
		position: relative;
content:'';width: 80%; position: absolute; left: 10%; bottom: 0px; height: 0px; background-color: transparent;
		}
	
	}
		


.nav-link a:hover {background: #fff !important; }


li.nav-item ul#nav-submenu-1, li.nav-item ul#nav-submenu-2  {padding-top: 0;background-color: transparent!important; font-family: univia-pro, sans-serif !important; font-size: 14px;}

li.nav-item ul#nav-submenu-1 li, li.nav-item ul#nav-submenu-2 li {background-color: rgb(155,155,155) !important; padding-bottom: 5px; margin-bottom: 3px; 


}

.hs-sub-menu li a {color: rgb(0,0,0) !important; text-align: center;}



/*MOBILE TOP BAR*/
ul.mobileTopBar {width: 100% !important; padding: 0; text-align: right;  padding-left: 0;}
ul.mobileTopBar li{display: inline-table; }
ul.mobileTopBar li.tb-tagLine { width: auto; float: left !important; text-align: left !important;  }
ul.mobileTopBar li.tb-linkedIn { text-align: right; }
ul.mobileTopBar li.tb-email { text-align: right; }
ul.mobileTopBar li.tb-phone { text-align: right;}

@media only screen and (max-width: 767px) {
ul.mobileTopBar {padding-top:10px;}
}
/*FEATURE BANNER*/

div.featureBanner {position: absolute; left:0; bottom: 80px; width: 100%;}
div.featureBanner .featureIcon {float: left; display: inline; }
div.featureBanner .featureHeading {float: left; display: inline; margin-left: 20px;}
div.featureBanner .featureSubHeading {margin-left: 65px; font-size: 20px;} 	
@media only screen and (max-width: 767px) {
div.featureBanner {position: absolute; left:5%; bottom: 20px; width: 90%; text-align: center;}	
div.featureBanner .featureIcon {float: none; display: inline; }
div.featureBanner .featureHeading {float: left; display: inline; margin-left: 0px;}
div.featureBanner .featureSubHeading {margin-left: 65px; font-size: 20px;} 	
}
@media only screen and (max-width: 575px) {
	div.featureBanner .featureSubLine {display: none;} 
	div.featureBanner .featureSubHeading {display: none;} 
	
	
}




/*QUICK LINKS*/

div.serviceBlock {border: #f1f1f1 solid 1px; padding: 10px; background-color: rgba(225,225,225,0.2);
-webkit-box-shadow: 3px 3px 5px 0px rgba(190, 190, 190, 0.75);
-moz-box-shadow:    3px 3px 5px 0px rgba(190, 190, 190, 0.75);
box-shadow:         3px 3px 5px 0px rgba(190, 190, 190, 0.75);
}
/*CUSTOM LISTS*/
ul.logo-stack {}
ul.logo-stack li {max-width: 100%;}
@media only screen and (max-width: 767px) {
	
	
ul.logo-stack li {display: inline-table; width: 25%; margin-right: 5%;}	
	
	
}







@media only screen and (max-width: 1199px) {
	
	.scg-background {background-position: 120% -25%; background-size: 60%;}	
	
}


@media only screen and (max-width: 991px) {
	
	.scg-background {background-position: 125% 160%; background-size: 60%;}	
	
	
}

@media only screen and (max-width: 767px) {
	
	.scg-background {background-position: 115% 120%; background-size: 80%;}	
	
}

@media only screen and (max-width: 500px) {
	
	.scg-background {background-position: 115% 110%; background-size: 80%;}	
	
}

/*Master Slider Caption Layout*/





.ms-layer.thin-text-white{
	color: #FFF;
	background: rgba(0, 0, 0, 0.72);
	font-size: 77px;
	font-weight: 100;
	padding: 20px 25px;
	margin: 0;
	text-shadow: -1px 1px #000;
}

.ms-layer.thin-text-black{
	color: black;
	font-size: 77px;
	font-weight: 100;
	background: rgba(255, 255, 255, 0.78);
	padding: 20px 25px;
	margin: 0;
	text-shadow: -1px 1px rgba(255, 255, 255, 0.51);
}



.ms-layer.bold-text-white{
	color: #FFF;
	background:rgba(100,100,100,0.75);
	
	line-height:normal;
	
	margin: 0;
	padding: 20px 20px 5px 20px !important;
	position: absolute;
	
	
}

.ms-layer.bold-text-white h3 {font-weight: 900;
	font-size: 50px !important;}
.ms-layer.bold-text-white p {font-weight: 900;
	font-size: 20px !important; padding-bottom: 0; margin-bottom: 0; text-align: center;}

.captiontext {
	
	
	float:none; 
	margin-left:auto; margin-right:auto;
	font-weight: 300;
	padding: 10px 0px 10x 0px;
	text-align: center;
	
	font-size: 25px;
	font-weight: bold;
	position: absolute;
	margin-top: 140px;
	
	text-align: center;
}

@media only screen and (max-width: 1050px) {
	
	.captiontext {margin-top: 180px;}
	
}


@media only screen and (max-width: 991px) {
	
	
	
	.ms-layer.bold-text-white{
	
	padding: 20px 20px 0px 20px !important;
		position: absolute;}
	
	
	
	.ms-layer.bold-text-white h3 {font-weight: 900;
	font-size: 35px !important;}
.ms-layer.bold-text-white p {font-weight: 900;
	font-size: 15px !important; padding-bottom: 8px; margin-bottom: 0;}
	
}

@media only screen and (max-width: 767px) {
	
	.captiontext {display: none;}
	
}

@media only screen and (max-width: 500px) {
	
	.ms-layer.bold-text-white h3 {font-weight: 900; font-size: 25px !important;}
.ms-layer.bold-text-white p {font-weight: 900; font-size: 10px !important; padding-bottom: 8px; margin-bottom: 0; text-align: center;}

}

@media only screen and (max-width: 479px) {
	
	.ms-layer.bold-text-white h3 {font-weight: 900; font-size: 20px !important;}
.ms-layer.bold-text-white p {font-weight: 900; font-size: 10px !important; padding-bottom: 8px; margin-bottom: 0; text-align: center;}
	.caption-hidden-sm {display: none;}

}
	




.slide-1 .bigtext {
	top: 20% !important;
	width: 100%;
	text-align: center;
}

.slide-1 .captionTextWrap {
	top: 28% !important;
	margin-top: 50px;
	text-align: center;
	width: 100%;
}

.captiontext i {margin-left: 8px;}


.slide-1 .captiontextTwo {
	
	top: 40% !important;
	margin-top: 100px;
	width:100%; text-align:center;
	
}


	


@media only screen and (min-width: 0px) and (max-width: 600px) {

.ms-layer.bold-text-white-backup{
	color: #FFF;
	background:rgb(100,100,100);
	font-weight: 900;
	font-size: 30px !important;
	line-height:normal;
	text-shadow:-1px 1px black;
	margin: 0;
	padding: 20px 20px 20px 0px !important;
}

.slide-1 .captionTextWrap {
	top: 29% !important;
	margin-top: 10px !important;
	text-align: center;
	width: 100%;
}

.slide-1 .captiontext {
	width:290px;
	color: #FFF;
	float:none; 
	margin-left:auto; margin-right:auto;
	font-weight: 300;
	padding: 10px 0px 10px 0px;
	text-align: center;
	border: solid 2px #FFF;
	font-size: 18px;
	text-shadow: -1px 1px #000;
}


.slide-1 .captiontextTwo {
	
	top: 45% !important;
	margin-top: 100px;
	width:100%; text-align:center;
	
}



	
	
	}

@media only screen and (min-width: 0px) and (max-width: 750px) and (orientation: landscape) {
	
	.ms-layer.bold-text-white-backup{
	color: #FFF;
	background:rgb(100,100,100);
	font-weight: 900;
	font-size: 25px !important;
	line-height:normal;
	text-shadow:-1px 1px black;
	margin: 0;
	padding: 20px 20px 20px 0px !important;
}
	
	
	
	.slide-1 .captionTextWrap {
	top: 45% !important;
	margin-top: 10px !important;
	text-align: center;
	
	width: 100%;
}

.slide-1 .captiontext {
	width:290px;
	color: #FFF;
	float:none; 
	margin-left:auto; margin-right:auto;
	font-weight: 300;
	padding: 10px 0px 10px 0px;
	text-align: center;
	border: solid 2px #FFF;
	font-size: 15px;
	text-shadow: -1px 1px #000;
}

	.slide-1 .captiontextTwo {
	
	top: 50% !important;
	margin-top: 100px;
	width:100%; text-align:center;
	
}
	
	
	
	}








.slide-2 .blacktext {
	top: 43% !important;
	left: 16% !important;
}

.slide-2 .whitetext {
	top: 43% !important;
	left: 54% !important;
}

.slide-3 .bigtext {
	width: 100%;
	text-align: center;
	top: 50% !important;
}

.slide-3 .blacktext {
	left: 27% !important;
	top: 50% !important;
	padding: 7px 20px;
	margin-top: -10%;
}

.slide-4{
	color:white;
	text-shadow: -1px 1px black;
}

.slide-4 .box{
	left: 60px;
	top: 40% !important;
	width: 46%;
	padding-bottom: 18% !important;
	background: rgba(0, 0, 0, 0.72);
}

.slide-4 .small-text {
	margin: 0;
	top: 40% !important;
	font-weight: 300;
	left: 82px;
	padding: 0;
	margin-top: 16px;
}

.slide-4 .medium-text {
	font-weight: 100;
	top: 40% !important;
	font-size: 77px;
	left: 73px;
	margin: 0;
	padding: 0;
	margin-top: 25px;
}

.slide-4 .big-text{
	font-weight: 900;
	left: 77px;
	top: 40% !important;
	padding: 0;
	font-size: 80px;
	margin: 0;
	margin-top: 90px;
}

.slide-5 .video-caption {
	color: #FFF;
	border: solid 4px #FFF;
	padding: 12px 10px;
	width: 71%;
	left: 106px;
	font-weight: 600;
	text-align: center;
	font-size: 52px;
	top: 44% !important;
}

/* EFFECTS */

img.boxed {
	
	-webkit-box-shadow: 2px 2px 9px 0px rgba(50, 50, 50, 0.23);
-moz-box-shadow:    2px 2px 9px 0px rgba(50, 50, 50, 0.23);
box-shadow:         2px 2px 9px 0px rgba(50, 50, 50, 0.23);
	
}

/*ABOUT US*/

#aboutUs h4 { margin-bottom: 0;}
#aboutUs p {}



/* HEADINGS */

.featureHeading-v2 {
	
	position: relative;
	padding-bottom: 0;
	letter-spacing: 2px;
	& span {font-size: 50px;
		position: relative;
	color: $color-blue;
	margin-left: 8px;}
		}
	
	
	
.featureHeading-v2 span:after{
	content:'';
	position: absolute !important; 
	left: 0%; 
	bottom:-25px; 
	background-color:  $color-blue;
	height: 4px; 
	width: 100%;
	margin-bottom: 20px;
}