/* Scss Document */



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

/*backgrounds */

body {overflow-x: hidden;}


/*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;

button.close {color: #fff; font-size: 40px;
	position: absolute; top: 5%; right:5%;
	
	&:hover {color:#fff;}
	

}

/* Globals */

.navbar-brand {padding-top:  0px !important; padding-bottom: 0px !important;}

span.openSlickModal-1 {color: $color-orange; text-decoration:  underline;

	&:hover {text-decoration: none;
		cursor: pointer;}

	}



	/* Intro Slider */

	.indexHeader { 

		background:  rgba(0,0,0,0.7);

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

			background:  rgba(0,0,0,1);

		}


	}




	section#about .about-us {
		&.caseStudyWrapper {}

		& h3.caseStudy {font-size: 1em; margin-bottom: 10px;}

		position: relative;

		& .owl-thumbs {
			position: relative; 

			z-index: 10;
			width: 100%;
			margin-bottom: 40px;


			& .owl-thumb-item {

				position: relative;
				cursor: pointer;


				&:after {

					content: '\f054';
					font-family: 'Font Awesome 5 Pro';
					position: absolute;
					top:  35%;
					right: 10px;
					height: 25px;
					color: #fff;
					font-size: 20px;
				}






				height: 100px;
				background-color: #222221;
				border-bottom: $color-orange solid 3px;


				&:hover {
					background-color: $color-blue;
					border-bottom: #1d84c0 solid 3px;

					-webkit-transition: all 0.25s ease-in-out;
					-moz-transition: all 0.25s ease-in-out;
					-ms-transition: all 0.25s ease-in-out;
					-o-transition: all 0.25s ease-in-out;
					transition: all 0.25s ease-in-out;
				}




				margin-bottom: 8px;
				position: relative;



				& .left {


					width: 30%;
					background-size: cover;
					height:  100px; 
					position: relative; 
					display:inline-block;
					float: left;



				}
				& .right {




					display: flex;
					flex-direction: column;
					flex-wrap: nowrap;
					justify-content: center;
					align-items: flex-start;
					align-content: stretch;
					padding-left: 18px;
					height: 100px; 
					width:  70%;
					position: relative; 
					text-align: left;






					& h4 {color: #f1f1f1; font-size: 12px; line-height: 14px; margin-bottom: 4px; font-family: univia-pro, sans-serif !important;
						font-weight: 500;








					}


					& h3 {font-size: 16px; line-height: 16px; color: #f1f1f1; margin-bottom: 5px; font-family: univia-pro, sans-serif !important;
						font-weight: 500;





					}  	
				}
			}


		}

	}

	#introSlider {
		position: relative;
		padding:  0px;







		& .nextSlideBtn {


			position: absolute;
			bottom:  30px;
			right: 30px;
			z-index: 9999 !important;
			width: 245px;

			

			@media screen and (max-width: 767px) {
				bottom:  20px;
			right: 30px;

			}








			&.owl-thumb-item {
				position: absolute !important;
				&.active {
					@media screen and (max-width: 991px) {display:  none !important;}
				}
				position: relative;
				&:hover {cursor: pointer; border-bottom: $color-blue solid 4px;

					@media screen and (max-width: 767px) {border-bottom: rgba(55,55,55,0) solid 4px;}

				}


				




				&.active {
					border-bottom: $color-orange solid 4px !important;
				}

				height: 60px;

				background-color: rgba(0,0,0,0.7);
				margin-bottom: 8px;
				position: relative;

				@media screen and (max-width: 767px) {
					height: 40px;

					background-color: rgba(0,0,0,0);
				}

				& .left {


					width: 25%; background-size: contain; height:  60px; position: relative; display:inline-block; float: right;
					@media screen and (max-width: 991px) {display: block;margin-right: 0px; }

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




					display: flex;
					flex-direction: column;
					flex-wrap: nowrap;
					justify-content: center;
					align-items: flex-end;
					align-content: stretch;
					padding-right: 10px;
					height: 60px; width:  75%;position: relative;  

					@media screen and (max-width: 767px) {width: 100%;}






					& h5 {color: #f1f1f1; font-size: 12px; line-height: 14px; margin-bottom: 4px; font-family: univia-pro, sans-serif !important;
						font-weight: 500;


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

							font-size: 10px; line-height: 12px;
						}

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

							font-size: 0.7rem;
						}

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

							font-size: 8px; line-height: 10px;
						}

					}


					& h4 {font-size: 14px; line-height: 16px; color: #f1f1f1; margin-bottom: 0px; font-family: univia-pro, sans-serif !important;
						font-weight: 500;

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

							font-size: 12px; line-height: 14px;
						}

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

							font-size: 0.85rem;
						}



					}  	
				}
			}


		}


	}

	.outer { margin:-21px auto 0 auto;  position: relative;

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

			margin-top: 00px;

		}

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

			margin-top: 0px;

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

			margin-top: 0px;


		}

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

			margin-top: 60px;

		}


	}
	#big .item { 
		background: #222221;

		position: relative;
		padding: 0 !important;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: normal;
		align-items: center;
		align-content: normal;
		object-fit: fill;
		overflow-x: hidden;
		@media screen and (max-width: 550px) {

			min-height:  40vh !important;

		} 
/*
    &:before {

        	content: '';
        	position: absolute;
        	display: block;
        	top:  0px;
        	left:  0px;
        	height: 100%;
        	width: 100%;
        	background-image: url("../img/slides/geometric-overlay.png");
        	opacity: 0.4;

        	
        
        	background-size: cover;
        	z-index: 999 !important;

        }
        */

        &:after {

        	content: '';
        	position: absolute;
        	display: block;
        	top:  0px;
        	left:  0px;
        	height: 100%;
        	width: 100%;
        	background: rgba(40,40,40,0.5);
        	background-size: cover;
        	z-index: 999 !important;}



        	& img {object-fit: fill !important; height: 100%;  width:  100%; display:  block;position: relative; max-width: none !important; z-index: 1;

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

        			min-height:  40vh !important;

        		} 
        	}

        	& .textWrap {

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

        			margin-top: 0vw;
        			margin-left:  70px;

        		}

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

        			margin-top: 0vw;
        			margin-left:  8vw;

        		}



        		position: absolute;
        		margin-left: 10%;
        		z-index: 9999;

        		& .btn-md {


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


        				padding:  5px 15px 5px 10px !important;
        				font-size: 10px !important;
        			}

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


        				padding:  5px 15px 5px 10px !important;
        				font-size: 6px !important;
        			}

        		}

        		& h1 {	font-family: univia-pro, sans-serif !important;
        			font-weight: 600;
        			font-size: 4vw;

        			@media screen and (min-width: 1799px) {
        				font-size: 72px;

        			}

        			margin-bottom:  0px;
        			color: #f1f1f1;
        			text-transform: capitalize;


        			max-width: 900px;
        			text-align: left;

        			& span {font-style: italic;}

        			@media screen and (max-width: 1199px) {
        				font-size: 4.5vw;


        			}

        			@media screen and (max-width: 550px) {
        				font-size: 5.5vw;


        			}



        		}

        		& h4 {

        			font-size: 2vw;
        			margin-top: 0px;
        			margin-bottom: 0px;
        			font-family: univia-pro, sans-serif !important;
        			font-weight: 900;
        			color: #f1f1f1;

        			@media screen and (max-width: 550px) {
        				font-size: 3vw;


        			}


        		}


        		&.flip {right: 10%;}

        	}



        }

        section#clientLogos {  
        	position: relative;

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

        		padding: 20px 0px;
        	}
        	& #clientCarousel {


        		& .owl-stage {

        			position: relative;
        			padding-top:  0px;
        			padding-bottom: 0px;
        			display: flex;
        			align-items: center;



        			display: flex;
        			align-items: center;

        			& .item {


        				& img {
        					display: flex;
        					justify-content: center;
        					align-items: center;

        					max-height: 70px;
        					width: auto;
        					max-width: 135px;

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

        						max-height: 50px;
        						max-width: 100px;
        					}

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

        						max-height: 30px;
        						max-width: 90px;
        					}




        				}


        			}
        		}


        	}




        	& .trustedByTag {

        		position: absolute;
        		top:  -20px;
        		left:  2.5%;
        		display: inline-block;
        		background-color: #222221;
        		padding: 8px;
        		font-family: univia-pro, sans-serif !important;
        		font-weight: 900;
        		color: #f1f1f1;
        		z-index: 1;


        		@media screen and (max-width: 991px) {
        			top:  0px;

        			padding: 4px;
        			font-size: 10px;
        			display: none;


        		}

        	} 
        }


        .clients {margin-top: 20px; position:  relative;display: inline; float: left; width: 100%;


        }



        .clients_v2 {


        	& .owl-stage {

        		position: relative;
        		padding-top:  0px;
        		padding-bottom: 0px;
        		display: flex;
        		align-items: center;


        	}
        }


        #services {
        	padding-top: 200px;

        	& h2 {font-family: univia-pro, sans-serif !important; }

        	& .serviceBground {
        		background-color: #444441;
        		-webkit-border-radius: 4px;


        		& p {font-family: univia-pro, sans-serif;
        			font-weight: 500; font-size: 18px;}
        		}

        		& #commercial, #dataCentres, #residential, #industrial, #healthcare, #ev-charging {
        			min-height:  350px;
        			position:  relative;
        			display: flex;
        			justify-content: center;
        			align-items: center;




        			&:before   {
        				content: '';
        				position: absolute;
        				left: 0;
        				bottom: 0%;
        				width: 100%;
        				height: 100%;
        				background-color: rgba(0,0,0,0.2);

        			}



        			&:after   {
        				content: '';
        				position: absolute;
        				left: 0;
        				bottom: 0%;
        				width: 0;
        				height: 0;
        				margin-left: calc(50% - 50px);
        				width: 0;
        				height: 0;
        				border-style: solid;
        				border-width: 0 50px 40px 50px;
        				border-color: transparent transparent #222221 transparent;}
        			}




        		}



        		.serviceBox.flipper {
        			-webkit-transform-origin: 100% 213.5px;
        			-moz-transform-origin: 100% 213.5px;
        			-ms-transform-origin: 100% 213.5px;
        			transform-origin: 100% 213.5px;
        		}

        		.flipper {
        			-webkit-transition: 0.6s;
        			-webkit-transform-style: preserve-3d;
        			-ms-transition: 0.6s;
        			-moz-transition: 0.6s;
        			-moz-transform: perspective(1000px);
        			-moz-transform-style: preserve-3d;
        			-ms-transform-style: preserve-3d;
        			transition: 0.6s;
        			transform-style: preserve-3d;
        			position: relative;
        		}
        		.front, .back {
        			-webkit-backface-visibility: hidden;
        			-moz-backface-visibility: hidden;
        			-ms-backface-visibility: hidden;
        			backface-visibility: hidden;
        			-webkit-transition: 0.6s;
        			-webkit-transform-style: preserve-3d;
        			-webkit-transform: rotateY(0deg);
        			-moz-transition: 0.6s;
        			-moz-transform-style: preserve-3d;
        			-moz-transform: rotateY(0deg);
        			-o-transition: 0.6s;
        			-o-transform-style: preserve-3d;
        			-o-transform: rotateY(0deg);
        			-ms-transition: 0.6s;
        			-ms-transform-style: preserve-3d;
        			-ms-transform: rotateY(0deg);
        			transition: 0.6s;
        			transform-style: preserve-3d;
        			transform: rotateY(0deg);
        			position: absolute;
        			top: 0;
        			left: 0;
        		}
        		.front {
        			-webkit-transform: rotateY(0deg);
        			-ms-transform: rotateY(0deg);
        			background: transparent;
        			z-index: 2;


        			width: 100%;
        		}
        		.vertical .back {
        			-webkit-transform: rotateX(180deg);
        			-moz-transform: rotateX(180deg);
        			-ms-transform: rotateX(180deg);
        			transform: rotateX(180deg);
        		}
        		.back {
        			background: rgba(150,150,150,0.8);
        			-webkit-transform: rotateY(-180deg);
        			-moz-transform: rotateY(-180deg);
        			-o-transform: rotateY(-180deg);
        			-ms-transform: rotateY(-180deg);
        			transform: rotateY(-180deg);
        			position: relative;
        			padding: 5% !important;

        			width: 100%;
        			min-height: 100%;
        		}
        		.serviceBox:hover .front, .icon_box_1.hover .front {
        			-webkit-transform: rotateY(180deg);
        			-moz-transform: rotateY(180deg);
        			-o-transform: rotateY(180deg);
        			transform: rotateY(180deg);
        		}
        		.serviceBox:hover .back, .icon_box_1.hover .back {
        			-webkit-transform: rotateY(0deg);
        			-moz-transform: rotateY(0deg);
        			-o-transform: rotateY(0deg);
        			-ms-transform: rotateY(0deg);
        			transform: rotateY(0deg);
        		}

        		.serviceBox .back h3,
        		.serviceBox .back i{
        			color: #ffffff;
        		}










        		/* Case Study */
        		#landingSection { 

        			border:  #fff solid 1px;
        			height: 75vh;
        			@media screen and (max-width:  991px) {
        				height: auto;
        				margin-bottom:  0px;
        				padding-bottom: 0px;
        			}

        			position: relative;



        			& .picPanel {height: 75vh;
        				background-position: center;
        				background-size: contain; 

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


        					height: 100%;


        				}

        				& .gallerySlide {height: 75vh;

        					& img {
        						height: 75vh;
        						object-fit: cover;
        						width: 100%; }



        						@media screen and (max-width: 991px) {
        							height: 100%;

        							& img {height: auto;
        								object-fit: contain;}

        							}



        						}

        					}


        					& .textPanel {
        						position: relative;
        						height: 75vh;
        						padding-top: 110px;
        						padding-right: 40px;
        						display: flex;
        						flex-direction: column;
        						flex-wrap: nowrap;
        						justify-content: center;
        						align-items: center;
        						align-content: normal;

        						&:after {
        							position: absolute;
        							content: '';
        							bottom: -30px;
        							left:  45%;
        							width: 0;
        							height: 0;
        							border-style: solid;
        							border-width: 50px 60px 0 60px;
        							border-color: #000000 transparent transparent transparent;}


        							@media screen and (max-width: 991px) {
        								height: 35vh;
        								max-height: 35vh !important;
        								min-height: 35vh;

        								justify-content: center;
        								align-items: center;
        								align-content: normal;
        								text-align: center;

        							}





        							& h1 {	
        								font-family: univia-pro, sans-serif !important;
        								font-weight: 900;
        								font-size: 4vw;
        								white-space: nowrap;
        								margin-bottom:  0px;
        								color: #ffffff;
        								text-transform: capitalize;

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

        									font-size: 2.5rem;

        								}




        							}

        						}

        						& h4 {
        							font-family: univia-pro, sans-serif !important;
        							font-weight: 300;
        							margin-bottom:  0px;
        							color: #ffffff;
        							font-size: 1.5vw;
        							white-space: nowrap;

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

        								font-size: 1.15rem;

        							}
        						}

        						& h6 {

        							display:  inline-block;
        							background-color: $color-orange;
        							padding: 8px 10px 10px 10px;
        							color: #fff;
        							font-family: univia-pro, sans-serif !important;
        							font-weight: 300;
        							font-size:  1vw;
        							margin-bottom: 8px;
        							white-space: nowrap;
        							@media screen and (max-width: 991px) {

        								font-size: 0.8rem;
        								padding: 3px 5px 3px 5px;

        							}


        						}





        						& .js-prev  {

        							background:  rgba(30,30,30,0.85);
        							border: none;
        							margin-left: 25px;
        							&:hover {background:  rgba(10,10,10,1);}
        						}
        						& .js-next  {

        							background:  rgba(30,30,30,0.85);
        							border: none;
        							margin-right: 25px;

        							&:hover {background:  rgba(10,10,10,1);}
        						}





        					}

        					#projectInfo {
        						background-color: #fff;

        						padding-top: 70px;
        						padding-bottom: 70px;

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

        							padding-top: 40px;
        							padding-bottom: 50px;

        						}





        						& h5 {

        							font-family: univia-pro, sans-serif !important; 

        						}

        						& h6 {

        							display:  inline-block;
        							background-color: $color-orange;
        							padding: 8px 10px 6px 10px;
        							color: #fff;
        							font-family: univia-pro, sans-serif !important;
        							font-weight: 600;
        							font-size:  0.8em;
        							margin-bottom: 12px;

        						}

        						& p.lead {font-family: univia-pro, sans-serif;
        							font-weight: 500;
        							font-style: normal;color: #222221;margin-bottom:  0px; line-height: 1.5em;}

        							& .projectData {
        								padding: 0px;
        								background-color: #ffffff !important;

        								margin-top:  -130px;

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

        									margin-top:  -10px;

        									text-align: center;
        								}

        								& .wrapper {

        									background-color: #f1f1f1;
        									padding: 40px 30px 20px 25px;

        									& img {

        										@media screen and (max-width:  991px) {
        											max-width:  150px;}
        										}





        										& h5 {
        											font-size:  1em; 
        											margin-bottom: 10px;
        											font-family: univia-pro, sans-serif;
        											font-weight: 600;
        											color: #000;
        										}

        										& p {font-family: univia-pro, sans-serif;
        											font-weight: 500;
        											font-style: normal; color: #222221 !important; }


        										}


        									}


        									& ul.list-unstyled-v2 {
        										vertical-align: top;
        										-webkit-column-count: 3;
        										-moz-column-count: 3;
        										column-count: 3;
        										margin-top:  15px;
        										font-family: univia-pro, sans-serif;
        										font-weight: 500;
        										font-size: 15px !important;
        										font-weight: 500;
        										font-style: normal;

        										font-style: normal;
        										letter-spacing: 0px;    page-break-inside: avoid;
        										break-inside: avoid;
        										-webkit-column-break-inside: avoid; 


        										& li {padding: 8px 0px; }


        										p {font-family: sofia-pro, sans-serif;  font-size: 15px; line-height: 32px;
        											padding-bottom: 10px;


        										}

        										@media screen and (max-width: 767px) {
        											-webkit-column-count: 2;
        											-moz-column-count: 2;
        											column-count: 2;
        										}

        									}









        								}

        								#sub-feature {

        									background-color: #fff;

        									padding-top: 70px;
        									padding-bottom: 70px;

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

        										padding-top: 40px;
        										padding-bottom: 50px;

        									}


        									& .js-pagination {z-index: 999;}

        									& h5 {

        										font-family: univia-pro, sans-serif !important;
        										font-weight: 600;
        										margin-bottom:  25px;

        									}

        									& h6 {

        										display:  inline-block;
        										background-color: $color-orange;
        										padding: 8px 10px 6px 10px;
        										color: #fff;
        										font-family: univia-pro, sans-serif !important;
        										font-weight: 600;
        										font-size:  0.8em;
        										margin-bottom: 12px;

        									}


        									& .js-slide {

        										margin-right: 5px;
        										font-family: univia-pro, sans-serif !important;
        										font-weight: 400;


        										& .wrapper {
        											position: relative;

        											& h3 {

        												position: absolute;
        												top: -15px;
        												left: 15px;
        												background-color:  $color-blue;
        												padding: 10px;

        												color: #fff !important;
        												font-family: univia-pro, sans-serif !important;
        												font-weight: 500;
        												font-size: 0.8em;
        												text-transform: uppercase;

        											}

        											& p.description {
        												padding: 8px;
        												font-family: univia-pro, sans-serif !important;
        												font-weight: 400;}


        											}
        										}

        									}

        									#clientSaid {
        										background-color: #fff;

        										padding-top: 70px;
        										padding-bottom: 70px;

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

        											padding-top: 40px;
        											padding-bottom: 50px;

        										}


        										font-family: univia-pro, sans-serif;
        										font-weight: 500;
        										& h3 {font-family: univia-pro, sans-serif;}

        										& p {font-family: univia-pro, sans-serif;
        											font-weight: 500;}

        											& h6 {font-family: univia-pro, sans-serif;
        												font-weight: 700;
        												font-size:  16px; position: relative;
        												display:  inline-block;
        												clear: both;
        												float: left;




        												&:after {

        													background-color: #d22b20;
        													content: '';
        													width: 100%;;
        													position: absolute;
        													bottom: -5px;
        													left: 0px;
        													height: 3px;

        													}}

        													& img {
        														max-width:  150px;
        													}

        													& cite {
        														color: #d22b20;
        														clear: left; float: left;

        														& span {padding: 0 5px;}

        													}

        												}

        													#clientSaidElite {
        										background-color: #fff;

        										padding-top: 70px;
        										padding-bottom: 70px;

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

        											padding-top: 40px;
        											padding-bottom: 50px;

        										}


        										font-family: univia-pro, sans-serif;
        										font-weight: 500;
        										& h3 {font-family: univia-pro, sans-serif;}

        										& p {font-family: univia-pro, sans-serif;
        											font-weight: 500;}

        											& h6 {font-family: univia-pro, sans-serif;
        												font-weight: 700;
        												font-size:  16px; position: relative;
        												display:  inline-block;
        												clear: both;
        												float: left;




        												&:after {

        													background-color: #3F87C7;
        													content: '';
        													width: 100%;;
        													position: absolute;
        													bottom: -5px;
        													left: 0px;
        													height: 3px;

        													}}

        													& img {
        														max-width:  150px;
        													}

        													& cite {
        														color: #3F87C7;
        														clear: left; float: left;

        														& span {padding: 0 5px;}

        													}

        												}


        												#projectImagery {


        													padding-top: 70px;
        													padding-bottom: 70px;

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

        														padding-top: 40px;
        														padding-bottom: 50px;

        													}

        													& h5 {
        														font-family: univia-pro, sans-serif;
        														font-weight: 900;

        													}
        												}

        												#builderSaid {
        													background-color: #f1f1f1;

        													padding-top: 70px;
        													padding-bottom: 70px;

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

        														padding-top: 40px;
        														padding-bottom: 50px;

        													}

        													font-family: univia-pro, sans-serif;
        													font-weight: 500;
        													& h3 {font-family: univia-pro, sans-serif;}

        													& p {font-family: univia-pro, sans-serif;
        														font-weight: 500;}

        														& h6 {font-family: univia-pro, sans-serif;
        															font-weight: 700;
        															font-size:  16px; position: relative;
        															display:  inline-block;
        															clear: both;
        															float: left;




        															&:after {

        																background-color: #f57817;
        																content: '';
        																width: 100%;;
        																position: absolute;
        																bottom: -5px;
        																left: 0px;
        																height: 3px;

        																}}

        																& img {max-width:  150px;}

        																& cite {
        																	color: #f57817;
        																	clear: left; float: left;

        																	& span {padding: 0 5px;}

        																}

        															}

        															#theLume {

        																& p {

        																	&.lead {
        																		font-family: univia-pro, sans-serif;
        																		font-weight: 700;
        																		font-size:  1.2em;

        																		& a {color:  #fff; font-weight: 900; text-decoration: underline;
        																			&:hover {text-decoration:  none;}

        																		}
        																	}


        																}

        																& .btn {
        																	font-family: univia-pro, sans-serif;
        																	font-weight: 700;

        																}

        															}


        															.announcementBar {

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

        																	display:  none;
        																}

        																background-color: #222221; font-size: 10px; letter-spacing: 1px; padding: 5px 30px; text-align: center; color: #f1f1f1;

        																& a {color: $color-orange !important; text-decoration: underline;

        																	&:hover {text-decoration: none; color: $color-orange;}
        																	&:visited {text-decoration: underline !important; color: $color-orange;}
        																}
        																& a.openSlickModal-1 {color: $color-orange !important; text-decoration: underline;

        																	&:hover {text-decoration: none; color: $color-orange;}
        																}

        															}

        															.clientModal {


        																& img {

        																	@media screen and (max-width: $width-medium) {

        																		max-width: 180px;
        																		display: block;
        																		margin-bottom: 25px !important;
        																		float: left !important;
        																		clear: right;
        																	}

        																}
        															}

        															.clientModal button.close {color: #fff; opacity: 1; font-size: 40px;
        																position: absolute; top: 80px !important; right: 80px !important;
        																z-index: 9999;
        																&:hover {color:#fff;opacity: 0.5;}




        																@media screen and (max-width: $width-small) {
        																	top: 0px;
        																	right: 30px !important;
        																	font-size: 20px !important;
        																	z-index: 9999;

        																}




        															}

        															.offerModal button.close {color: #fff; opacity: 1; font-size: 30px;
        																position: absolute; top: -10px !important; right: 40px !important;
        																z-index: 9999;
        																&:hover {color:#fff;opacity: 0.5;}






        																@media screen and (max-width: 545px) {
        																	top: -60px;
        																	right: -20px !important;
        																	font-size: 20px !important;
        																	z-index: 9999;

        																}




        															}

        															h4.formHeading {font-size: 28px;

        																@media screen and (max-width: $width-x-small) {

        																	font-size: 20px;

        																}

        															}


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


        															#featureBG {


        															}

        															span.aboutLogo {max-width: 100px; 
        																margin-top: -30px;display: inline-block;
        																margin-bottom: 20px;

        																& img {max-width: 100px; }

        																@media screen and (max-width: $width-small) {


        																	text-align: center !important;

        																	float: none; margin-left: auto; margin-right: auto;
        																}


        															}

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

        															span.heroText {color: $color-blue; font-weight: bold;}

        															.picCaption {position: absolute; bottom: 0px; left: 0px; z-index: 9999; background-color: rgba(0,0,0,0.6); width: 100%; padding: 10px 10px 0px 10px; }
        															.picCaption p {font-size: 12px; line-height: 14px; color: #fff;}
        															.dropEffect {

        																-webkit-box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75);
        																-moz-box-shadow:    4px 4px 5px 0px rgba(50, 50, 50, 0.75);
        																box-shadow:         4px 4px 5px 0px rgba(50, 50, 50, 0.75);
        																-webkit-border-radius: 2px;
        																-moz-border-radius: 2px;
        																border-radius: 2px;

        															}
        															.dropS img {

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

        															}


        															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 */
        																#mce-error-response {
        																	padding-top: 10px;
        																	font-size: 10px;

        																	& a {clear: left; color: $color-blue;}
        																}

        																#mce-responses {
        																	padding-top: 10px;
        																	font-size: 10px; color: $color-blue;}


        																	#scgAboutMobile {

        																		display: none;

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

        																			display: block !important;
        																		}
        																	}

        																	#scgAboutDesktop {
        																		display: block; 
        																		padding-bottom: 80px;

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

        																			display: none !important;
        																		}


        																	}





        																	.indexPT-1 {

        																		padding-top: 35px; 



        																	}

        																	.u-nav-v8__title {
        																		display: block; font-size: 25px; 

        																		@media screen and (max-width: 545px) {
        																			font-size: 18px;

        																		}

        																		@media screen and (max-width: 400px) {
        																			font-size: 14px;

        																		}

        																	}

        																	.u-nav-v8__description {
        																		color: inherit;
        																		font-style: normal;


        																		@media screen and (max-width: 545px) {
        																			font-size: 15px;

        																		}

        																		@media screen and (max-width: 400px) {
        																			font-size: 11px;

        																		}

        																	}







        																	.u-nav-v8-1 {margin-top: 30px; margin-bottom: 30px;width: 100%;

        																		& li {width: 49.6%; display: inline-block;


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

        																				width: 49.2%;

        																			}

        																		}





        																	}

        																	h1 {text-transform: uppercase ;}

        																	.leadContent {padding-top: 30px;


        																		@media screen and (max-width: $width-small) {


        																			padding-top: 0px;
        																		}

        																	}

        																	.list-item-inline {display: inline !important;}

        																	.contactInfoBlock {float:left;

        																		@media screen and (max-width: $width-small) {

        																			float: none; margin: 0 auto;
        																		} 

        																	} 

        																	blockquote {


        																		@media screen and (max-width: 767px) {padding-top: 40px;}
        																	}

        																	.nl-envelope {border: #fff solid 1px; border-left: hidden; text-align: center;}
        																	.u-btn-skew__inner i {padding-left: 20px;}
        																	/* alignement */

        																	#emButton {


        																		@media screen and (max-width: $width-small) {


        																			font-size: 12px;
        																		}
        																	}

        																	cite.quoteCite {text-align: right; float: right; padding-right: 20px; font-size: 16px; line-height: 20px;

        																		& span {text-transform: uppercase;}
        																	}

        																	.pl-lg {padding-left: 1em;}

        																	#newsletter h5 {font-size: 20px; line-height: 30px;}


        																	.sliderDT {

        																		@media screen and (min-width: 991px) {
        																			display: block;
        																		}

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


        																	}



        																	.sliderMB {

        																		.sliderDT {

        																			@media screen and (min-width: 991px) {
        																				display: none;
        																			}

        																			@media screen and (max-width: 990px) {
        																				display: block;
        																			}


        																		}


        																	}

        																	.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 50px 30px 50px !important; ;}
.homeServiceInfo a {text-decoration: none!important;}
.homeServiceInfo p {font-size: 1.1em;  padding: 0 40px;}


.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 { text-align: center; font-weight: bold; font-style: italic;  text-transform: uppercase; letter-spacing: 1px; display: inline-block;

	@media screen and (max-width: 1200px) {
		
		max-width: 200px !important;
		
		float: none; margin-left: auto; margin-right: auto;
	}


}
p.serviceTypeLead span {display: inline-block;}

p.serviceType {position: relative; padding: 0px 0 0px 0;}
h3.serviceBoxHeading {
	text-transform: uppercase;
	font-family: 'Roboto', 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: rgb(200,200,200);  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: 38px !important; font-family: univia-pro, sans-serif !important; line-height: 45px; letter-spacing: 0px; padding-bottom: 0px; display: block; }


	}


	#commercial:after, #dataCentres:after, #residential:after, #renewables:after  {
		content: '';
		position: absolute;
		right: 0;
		top: 35%;
		width: 0px;
		height: 0px;
		border-top: 50px solid transparent;
		border-bottom: 50px solid transparent;
		border-right: 50px solid rgba(25,25,25,1);


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

			top: 37%;
			border-top: 40px solid transparent;
			border-bottom: 40px solid transparent;
			border-right: 40px solid rgba(25,25,25,1);

		}

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

			top: 39%;
			border-top: 30px solid transparent;
			border-bottom: 30px solid transparent;
			border-right: 30px solid rgba(25,25,25,1);

		}

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

			width: 0;
			height: 0;
			left: 42.5%;
			top: 80%;
			border-style: solid;
			border-width: 0 40px 50px 40px;
			border-color: transparent transparent rgba(25,25,25,1) transparent;
		}

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


			left: 39%;



		}




	}

	#industrial:after, #healthcare:after, #ev-charging:after  {
		content: '';
		position: absolute;
		left: 0;
		top: 33%;
		width: 0px;
		height: 0px;
		border-top: 50px solid transparent;
		border-bottom: 50px solid transparent;
		border-left: 50px solid rgba(25,25,25,1);

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

			top: 35%;
			border-top: 40px solid transparent;
			border-bottom: 40px solid transparent;
			border-left: 40px solid rgba(25,25,25,1);

		}

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

			top: 39%;
			border-top: 30px solid transparent;
			border-bottom: 30px solid transparent;
			border-left: 30px solid rgba(25,25,25,1);

		}


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

			width: 0;
			height: 0;
			left: 42.5%;
			top: 80%;
			border-style: solid;
			border-width: 0 40px 50px 40px;
			border-color: transparent transparent rgba(25,25,25,1) transparent;



		}

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


			left: 39%;



		}
	}

	.serviceCol{background-color: rgba(0,0,0,0.4);}


	#introSlide {background-image: url("../img/slides/index_5.jpg");
	background-size: cover; background-position: left center; background-repeat: no-repeat; position: relative; 

	@media screen and (max-width: $width-small) {
		background-image: url("../img/slides/index_5_tablet.jpg");
		background-position: top right;


	}

	@media screen and (max-width: $width-x-small) {
		background-image: url("../img/slides/index_5_mob.jpg");
		background-position: top right;


	}
}

#contactSlide {background-image: url("../img/bg/contact_us.jpg");
background-size: cover; background-position: left center; background-repeat: no-repeat; 



@media screen and (max-width: $width-x-small) {
	background-image: url("../img/bg/contact_us_bground_mobile.jpg");
	background-position: top right;


}
}



#commercial {background-image: url("../img/bg/commercial_electricians_index.jpg");
background-size: cover; background-repeat: no-repeat; position: relative;

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

	min-height: 250px;
}

}


#industrial {background-image: url("../img/bg/industrial_electricians_bground_v2.jpg");
background-size: cover; background-repeat: no-repeat;
@media screen and (max-width: 767px) {

	min-height: 250px;
}
}



#dataCentres {background-image: url("../img/bg/data_center_bg.jpg");
background-size: cover; background-repeat: no-repeat;
@media screen and (max-width: 767px) {

	min-height: 250px;
}
}


#healthcare {background-image: url("../img/bg/healthcare_bground.jpg");
background-size: cover; background-repeat: no-repeat;

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

	min-height: 250px;
}
}


#residential {background-image: url("../img/bg/residential_bg.jpg");
background-size: cover; background-repeat: no-repeat;
@media screen and (max-width: 767px) {

	min-height: 250px;
	}}


	#ev-charging {background-image: url("../img/slides/porsche-normal.jpg");
	background-size: cover; background-repeat: no-repeat;
	
	@media screen and (max-width: 767px) {
		
		min-height: 250px;
	}


}

#renewables {background-image: url("../img/bg/service_renewables.jpg");
background-size: cover; background-repeat: no-repeat;

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

	min-height: 250px;
}


}







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; color: #000;
			font-weight: 700;


			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_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;
	
	@media screen and (max-width: $width-large){ 

		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%);
	}
	
	@media screen and (max-width: $width-medium){ 

		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%);
	}
	
	@media screen and (max-width: $width-small){ 

		clip-path: polygon(0px 100%,100% 91.5%,100% 0%,0% 0%);
		-webkit-clip-path: polygon(0px 100%,100% 91.5%,100% 0%,0% 0%);
	}

	
}

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

	padding-bottom: 20px;
	padding-top: 18px;
	margin-bottom: 0px;
	
	
	
	
	
	
}

.bg-clip-2 {
	

	
	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: 220px;
	padding-bottom: 120px;
	
	clip-path: polygon(0px 100%,100% 97%,100% 0%,0% 5%);
	-webkit-clip-path: polygon(0px 100%,100% 97%,100% 0%,0% 5%);
	
	
	@media screen and (max-width: $width-large){ 
		padding-top: 220px;
		padding-bottom: 100px;
		clip-path: polygon(0px 100%,100% 97%,100% 0%,0% 5%);
		-webkit-clip-path: polygon(0px 100%,100% 97%,100% 0%,0% 5%);
	}
	
	@media screen and (max-width: $width-medium){ 
		padding-top: 220px;
		padding-bottom: 80px;

		clip-path: polygon(0px 100%,100% 98.5%,100% 0%,0% 5%);
		-webkit-clip-path: polygon(0px 100%,100% 98.5%,100% 0%,0% 5%);
	}
	
	@media screen and (max-width: $width-small){ 
		padding-top: 180px;
		padding-bottom: 100px;
		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-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-2c {
	

	
	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: 8vw;
	padding-bottom: 120px;
	
	clip-path: polygon(0px 100%,100% 97%,100% 0%,0% 4vw);
	-webkit-clip-path: polygon(0px 100%,100% 97%,100% 0%,0% 4vw);
	
	
	


}





.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/slides/about_us.jpg");
	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){ 


	}
	
	@media screen and (max-width: $width-small){ 


	}


}





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-family: oswald, 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: 'Roboto', sans-serif; text-transform: uppercase; font-size: 20px;

		& span {

			font-size: 30px;
			letter-spacing: 2px;


		}
		& span.indexLink {

			font-size: 18px;
			letter-spacing: 2px;
			padding-top: 5px;


		}

		& i {

			color: #000000;
			padding: 0px 15px;

		}

		& .bannerLink {color: #ffffff;

			&:hover {text-decoration: underline;}
			&:active {text-decoration: underline;}

		}

	}
	.tp-caption-sub {font-family: 'Roboto', 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: 5px;

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

  		top: 6px;

  	}


  }

  .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 {}


  										/*SECTIONS*/

  										section.leadSection {

  											padding-top: 40px;
  											padding-bottom: 40px;


  										}

  										section.sectionTwo {


  											background-repeat: none;
  											background-position: top center;
  											background-repeat: no-repeat;
  											background-color: rgb(220,220,220);
  											background-size: cover;

  											clip-path: polygon(0 0, 100% 6%, 100% 94%, 0% 100%);
  											-webkit-clip-path: polygon(0 0, 100% 6%, 100% 94%, 0% 100%);


  											@media screen and (max-width: $width-large){ 

  												clip-path: polygon(0 0, 100% 6%, 100% 94%, 0% 100%);
  												-webkit-clip-path: polygon(0 0, 100% 6%, 100% 94%, 0% 100%);
  											}

  											@media screen and (max-width: $width-small){ 

  												clip-path: polygon(0 0, 100% 2%, 100% 98%, 0% 100%);
  												-webkit-clip-path: polygon(0 0, 100% 2%, 100% 98%, 0% 100%);
  											}


  										}




  										section.sectionTwoAlt {


  											background-repeat: none;
  											background-position: top center;
  											background-repeat: no-repeat;
  											background-color: rgb(220,220,220);
  											background-size: cover;

  											clip-path: polygon(0 0, 100% 6%, 100% 94%, 0% 100%);
  											-webkit-clip-path: polygon(0 0, 100% 6%, 100% 100%, 0% 100%);


  											@media screen and (max-width: $width-large){ 

  												clip-path: polygon(0 0, 100% 6%, 100% 94%, 0% 100%);
  												-webkit-clip-path: polygon(0 0, 100% 6%, 100% 100%, 0% 100%);
  											}

  											@media screen and (max-width: $width-small){ 

  												clip-path: polygon(0 0, 100% 6%, 100% 94%, 0% 100%);
  												-webkit-clip-path: polygon(0 0, 100% 6%, 100% 100%, 0% 100%);
  											}


  										}

  										section.sectionTwoAlt-v2 {


  											background-repeat: none;
  											background-position: top center;
  											background-repeat: no-repeat;
  											background-color: rgb(220,220,220);
  											background-size: cover;

  											clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
  											-webkit-clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);




  											@media screen and (max-width: $width-large){ 


  											}

  											@media screen and (max-width: $width-small){ 


  											}


  										}


  										.g-bg-matte-testimonials{

  											background: -moz-linear-gradient(225deg, rgba(0, 0, 0,0.9) 30%, rgba(50, 50, 50,0.9) 60%), url("../img/slides/about_us.jpg") no-repeat;
  											background: -o-linear-gradient(225deg, rgba(0, 0, 0,0.9) 30%, rgba(50, 50, 50,0.9) 60%), url("../img/slides/about_us.jpg") no-repeat;
  											background: -ms-linear-gradient(225deg, rgba(0, 0, 0,0.9) 30%, rgba(50, 50, 50,0.9) 60%), url("../img/slides/about_us.jpg") no-repeat;
  											background: linear-gradient(315deg, rgba(0, 0, 0,0.9) 30%, rgba(50, 50, 50,0.9) 60%), url("../img/bg/clients_bground_v2.jpg") no-repeat;
  											background: -webkit-linear-gradient(225deg, rgba(0, 0, 0,0.65) 30%, rgba(50, 50, 50,0.65) 60%), url("../img/slides/about_us.jpg") no-repeat;
  											background-size: cover;
  											clip-path: polygon(0 0, 100% 6%, 100% 94%, 0 100%);
  											-webkit-clip-path: polygon(0 0, 100% 6%, 100% 94%, 0 100%);
  											padding-bottom: 180px;
  											z-index: 9999;
  											margin-bottom: -50px;


  											@media screen and (max-width: $width-small){ 

  												clip-path: polygon(0 0, 100% 2%, 100% 98%, 0% 100%);
  												-webkit-clip-path: polygon(0 0, 100% 2%, 100% 98%, 0% 100%);
  											}





  										}


  										section.sectionTwoAltBlue {


  											background-repeat: repeat-x;
  											background-image: linear-gradient(225deg, #429edc, #00629e);
  											background-position: top center;
  											background-repeat: no-repeat;
  											background-size: cover;

  											clip-path: polygon(0 0, 100% 6%, 100% 100%, 0% 100%);
  											-webkit-clip-path: polygon(0 0, 100% 6%, 100% 100%, 0% 100%);





  											@media screen and (max-width: $width-large){ 

  												clip-path: polygon(0 0, 100% 6%, 100% 100%, 0% 100%);
  												-webkit-clip-path: polygon(0 0, 100% 6%, 100% 100%, 0% 100%);
  											}

  											@media screen and (max-width: $width-small){ 

  												clip-path: polygon(0 0, 100% 6%, 100% 100%, 0% 100%);
  												-webkit-clip-path: polygon(0 0, 100% 6%, 100% 100%, 0% 100%);
  											}


  										}



  										section.sectionThree {

  										}

  										section.sectionFour  {

  											background-repeat: none;
  											background-position: top center;
  											background-repeat: no-repeat;
  											background-color: rgb(220,220,220);
  											background-size: cover;

  											clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 100%);
  											-webkit-clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 100%);


  											@media screen and (max-width: $width-large){ 

  												clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 100%);
  												-webkit-clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 100%);
  											}

  											@media screen and (max-width: $width-small){ 

  												clip-path: polygon(0 0, 100% 2%, 100% 100%, 0 100%);
  												-webkit-clip-path: polygon(0 0, 100% 2%, 100% 100%, 0 100%);

  											}


  										}





  										/* HEADINGS */

  										h2.pageHeading {
  											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;}

  											}

  											h2.pageHeading span {font-size: 60px !important; line-height: 55px; letter-spacing: 3px; padding-bottom: 5px; display: block;}


  											.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;

  												}

  												.featureHeading-v3 {

  													position: relative;
  													padding-bottom: 0;
  													letter-spacing: 2px;
  													font-size: 
  													& span {font-size: 30px;
  														position: relative;
  														color: $color-blue;
  														margin-left: 8px;}
  													}



  													.featureHeading-v3 span:after{
  														content:'';
  														position: absolute !important; 
  														left: 0%; 
  														bottom:-25px; 
  														background-color:  $color-blue;
  														height: 4px; 
  														width: 100%;
  														margin-bottom: 20px;
  													}

  													.featureHeading-v4 {

  														position: relative;
  														padding-bottom: 0;
  														display: inline-block;


  														@media screen and (max-width: $width-x-small)

  														{padding-top: 10px !important; }


  														& span {font-size: 50px;
  															position: relative;
  															display: inline-block;
  															color: $color-blue;
  															margin-left: 0px;
  															@media screen and (max-width: $width-x-small) {
  																font-size: 35px;
  															}



  														}
  													}

  													.featureHeading-v4 span:after{
  														content:'';
  														display: inline-block;
  														position: absolute !important; 
  														left: 0%; 
  														bottom:-25px; 
  														background-color:  $color-blue;
  														height: 4px; 
  														width: 100%;
  														margin-bottom: 20px;
  													}

  													.featureHeading-v5 {

  														position: relative;
  														padding-bottom: 0;
  														display: inline-block;


  														@media screen and (max-width: $width-x-small)

  														{padding-top: 10px !important; }


  														& span {font-size: 50px;
  															position: relative;
  															display: inline-block;
  															color: $color-blue;
  															margin-left: 0px;
  															@media screen and (max-width: $width-x-small) {
  																font-size: 35px;
  															}



  														}
  													}

  													.featureHeading-v5 span:after{
  														content:'';
  														display: inline-block;
  														position: absolute !important; 
  														left: 0%; 
  														bottom:-25px; 
  														background-color:  #ffffff;
  														height: 4px; 
  														width: 100%;
  														margin-bottom: 20px;
  													}


  													ul.trustedByList  {



  														width: 100%;


  														& li {
  															width:120px;
  															margin-right: 30px;
  															display: inline-table;

  															@media screen and (max-width: 1199px) {
  																width:100px;


  															}




  															@media screen and (min-width: 768px) and (max-width: 991px) {

  																width:95px;

  															}

  															@media screen and (max-width: 430px) {
  																width:32%;
  																margin-right: 0px;
  																text-align: center;


  															}



  															&  img {
  																max-width: 100%;



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


  																	max-width: 80% !important;


  																}





  															}

  														}


  													}


  													h2.offerUnderline {position: relative; display: inline-block;

  														&:after {

  															content: '';
  															width: 100%;
  															height: 4px;
  															background-color: #fff;
  															position: absolute;
  															left: 0;
  															bottom: 5px;

  														};

  													}

  													.cctvPackages {

  														width: 100%;
  														display: flex;
  														justify-content: space-between;
  														margin: 10px 0;

  														& div {
  															padding: 10px 10px 10px 10px; 
  															border: rgba(255,255,255,0.4) solid 1px; width: 20%; text-align: center;

  															& h3 {font-size: 14px; color: $color-orange; margin-bottom: 0; padding-bottom: 0}
  															& h4 {font-size: 10px; color: #fff; position: relative;


  																&::after  {

  																	content: '';
  																	width: 50%;
  																	height: 3px;
  																	background-color: $color-orange;
  																	position: absolute; bottom: -10px;
  																	left: 25%;
  																}



  															}

  															& h5 {font-size: 10px; color: #fff; margin-bottom: 0; padding-bottom: 0;}

  														}


  													}

  													a.pdf-download {color: #000;

  														&:hover {opacity: 0.5;};
  													}


  													.introProcess {display: flex; flex-direction: row; justify-content: space-between; width: 100%; margin-bottom: 20px;


  														& .processStep {border: rgb(220,220,220) solid 1px; text-align: center; width: 25%; padding: 15px; margin-right: 5px;

  															& span {font-size: 14px;}
  															& i {display: block; clear: both;}

  															& h3.h5 {font-size: 14px; text-transform: uppercase; }



  														}

  													}

  													.moreLink { width: 100%; text-align: right; margin-bottom: 15px; padding-right: 5px; font-size: 14px;

  														& a {color: $color-blue;}}


  														#carouselCus3 .js-prev {left: 90%;    padding: 15px;  background-color: rgba(0,0,0,0.3);


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

  																left: 0%;

  															}

  															@media screen and (max-width: $width-small) {

  																top: 1% !important;

  															}




  															&:hover {background-color: rgba(0,0,0,0.1);}

  														}


  														#carouselCus3 .js-next {right: 0%;  padding: 15px;  background-color: rgba(0,0,0,0.3);

  															@media screen and (max-width: $width-small) {

  																top: 1% !important;

  															}

  															&:hover {background-color: rgba(0,0,0,0.1);}
  														}

  														div.sponsoringLogo img{
  															max-width: 150px;

  															&:hover {opacity: 0.5;};

  														}


  														.heroList {
  															padding-left: 0;
  															margin-left: 0px;
  															margin-bottom: 40px;
  															width: 100%;

  															@media screen and (max-width: $width-medium) {

  																margin-top: 30px;
  																margin-bottom: 20px;}

  																@media screen and (max-width: $width-small) {

  																	margin-top: 18px;
  																	margin-bottom: 20px;}




  																	& li {position: relative; color: #000; font-size: 16px; display: inline-table;  margin-left: 0;
  																		width: 49%; padding-left: 30px; margin-bottom: 8px;


  																		&:last-child {margin-bottom:0;}



  																		&:before {
  																			content: "\f0a9";
  																			position: absolute;
  																			left: 0;
  																			top: 0px;
  																			display: block;
  																			font-size: 16px;
  																			padding: 0px;
  																			color: $color-blue;
  																			font-weight: 900;
  																			font-family: "Font Awesome 5 Pro";
  																		}







  																	}

  																}

  																/* responsice helpers */

  																.linkBtn {width: 240px; padding-top: 5px; padding-left: 0px; padding-right: 8px;}

  																.aboutHeading {padding-left: 40px;}
  																@media screen and (max-width: $width-small) {

  																	.aboutHeading {padding-left: 0px;}

  																}

  																@media screen and (max-width: $width-x-small) {

  																	.xs-margin-left-10px {margin-left: 10px;}

  																	.resBreak {display: block;}



  																} 


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

  																	.mobDrop {clear: left; display: block;}

  																	span.mobLineHeight {}



  																} 

  																/* Form Captcha */

  																.submit-container {

  																	display: flex;
  																	flex-direction: row;
  																	justify-content: space-between;
  																	align-items: flex-end;

  																	@media screen and (min-width: 768px) and (max-width: 1200px) {
  																		flex-direction: column;
  																		align-items: flex-start;

  																		& button {
  																			margin-top: 2rem;
  																			width: 100%;
  																		}
  																	}


  																	@media screen and (max-width: 600px) {
  																		flex-direction: column;
  																		align-items: flex-start;

  																		& button {
  																			margin-top: 2rem;
  																			width: 100%;
  																		}
  																	}
  																}


  																/* Page Reviews */

  																#accordion-07 {
  																	& .u-accordion-color-primary .u-accordion__header [aria-expanded="true"] {
  																		color: transparent !important;
  																		border: #fff solid 2px;
  																	}
  																	& .u-accordion-color-primary .u-accordion__header [aria-expanded="false"] {
  																		color: transparent !important;
  																	}

  																	& .card {
  																		background-color: transparent !important;
  																	}

  																	& .u-accordion__header {
  																		border: rgba(200,200,200,0.2) solid 1px;
  																	}

  																	& span.title {
  																		&:before {
  																			display: none !important;
  																			text-decoration: none !important;
  																		}
  																		&:after {
  																			display: none !important;
  																			text-decoration: none !important;
  																		}
  																	}

  																	& .client-details {

  																		display: flex;
  																		justify-content: space-between;

  																		& img.logo {
  																			max-width: 200px;
  																			height: auto;
  																		}

  																		@media screen and (max-width: 991px){
  																			& img.logo {
  																				max-width: 100px;
  																				height: auto;
  																			}
  																		}

  																		@media screen and (max-width: 767px){
  																			flex-direction: column;
  																			& img.logo {
  																				margin-top: 4rem;
  																				max-width: 250px;
  																				height: auto;
  																			}


  																		}
  																	}



  																}

/* CONTACT FORM EDITS */
.fui-submit {
	display: inline-block;
  font-weight: 400;
  color: #212529;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
	position: relative;
	padding-top: 1.07143rem !important;
	padding-bottom: 1.07143rem !important;
	padding-left: 1.42857rem !important;
    padding-right: 1.42857rem !important;
  transition: .2s ease;
  cursor: pointer;
  font-size: 1rem !important;
  color: #fff;
  background-color: #3398dc !important;
  border: hidden !important;
  font-style: normal !important;
  text-transform: uppercase;
}

/* NEW SIDEBAR ENQUIRY FORM STYLING */

#popup-1 {

	background-color: #222221 !important;
	padding:4rem 2rem;
}

/*
.slickWindow { 
	z-index: 900;

	&:after {
		content: '';
		position: absolute;
		bottom: 0px;
		right: -100px;
		background-image: url('../img/logo/scg_elec_logo_black_watermark.png'); 
		width: 100%;
		height: 100%;
		background-repeat: no-repeat;
		background-position: 35% 110%;
		opacity: 0.02;
		z-index: 1;
		 transform: rotate(-25deg);

	}
	
	
}
*/

button.cta-btn {
	
	margin-bottom: 4rem;
  min-width: 210px;
}

.openSlickModal-1 {
	min-width: 185px;
}

#enquiryForm {
	& .fui-label, .fui-legend {
		font-weight: bold;
	}
	& .fui-row {
		margin-bottom: 0.35rem;
		@media screen and (max-width: 767px) {
			display: block;
		}
	}
 
	& .fui-layout-wrap {

		display: flex;
		flex-direction: row;
		justify-content: space-between;
		@media screen and (max-width: 767px) {
			flex-direction: column;
			justify-content: start;
			align-items: flex-start;
		}
	}

	& textarea {
		min-height: 200px;
	}

}

#contactForm {
	& .fui-label, .fui-legend {
		font-weight: bold;
	}

	& .fui-instructions p {
		@media screen and (min-width: 991px) and (max-width: 1199px) {
			font-size: 12px !important;

		}
	}
	& .fui-row {
		margin-bottom: 0.35rem;
		@media screen and (max-width: 767px) {
			display: block;
		}
	}
 
	& .fui-layout-wrap {

		display: flex;
		flex-direction: row;
		justify-content: space-between;
		@media screen and (max-width: 1199px) {
			flex-direction: column;
			justify-content: start;
			align-items: flex-start;
		}
	}

	& textarea {
		min-height: 200px;
	}

}


#popup-1 {
	& .fui-label, .fui-legend {
		font-weight: bold;
	}
	& .fui-row {
		margin-bottom: 0.35rem;
		@media screen and (max-width: 991px) {
			display: block;
		}
	}
 
	& .fui-layout-wrap {

		display: flex;
		flex-direction: row;
		justify-content: space-between;
		@media screen and (max-width: 991px) {
			flex-direction: column;
			justify-content: start;
			align-items: flex-start;
		}
	}

	& textarea {
		min-height: 200px;
	}

}


#modal6 {

	& .fui-btn, .fui-submit {
		background-color: #000000 !important;
		opacity: 0.85;

		&:hover {
			opacity: 0.7;
		}
	}

	& .fui-alert-success {
		margin-bottom: 2rem;
	}



}



.border-btm {
	border-bottom: rgba(100,100,100,0.4) solid 1px;
	padding-bottom: 10px;
	margin-bottom: 15px
	;
}

.case-study-page {
	@media screen and (min-width: 768px) {
	overflow: visible;


	& .project-data-panel {
		position: sticky !important;
  top: 60px !important;
  right: 0px !important;
	}
}

	& #projectInfo {

		& h6 {
			font-size: 1.5rem;
			line-height: 2rem;
			border-radius: 10px;
			background: transparent !important;
			color: #EC8733;
			padding: 0px;

		}


	}

	& a.text-link {

		font-weight: 600;
		text-decoration: underline;
		color: #222221;
		&:hover {
			text-decoration: none;
		}
	}

	& .image-caption {
		margin-top: 8px;
		line-height: 16px;
		font-size: 12px;
	}

	& cite {
		& a.client-link {
		
		color: #3F87C7 !important;
			text-decoration: underline;

			&:hover {
				text-decoration: none;
		}

	
		
}

	
}
}

.owl-thumb-item {
	position: relative;

	&:after {

		position: absolute;
		top: 20px;
		right: -40px;
		font-family: "Font Awesome 5 Pro";
		font-size: 1em;
		content: '\f054';
		width: 30px;
		height: 30px;
		color: #fff;



	}

	&:hover {
		&:after {

		
		color: $color-blue;



	}
	}
}