/* Core */
body{
	overflow-x: hidden;
	margin: 0;
	padding: 0;

}
a, button{
outline:none;
}
.wrapper{
	width:100%;
	height: 100%;
	padding:0;
	margin:0;
}

/* Font */
@font-face {
    font-family: robotoLight;
    src: url("includes/Roboto-Light.ttf");
    font-weight:300;
}
@font-face {
    font-family: robotoReg;
    src: url("includes/Roboto-Regular.ttf");
    font-weight:400;
}
@font-face {
    font-family: robotoBold;
    src: url("includes/Roboto-Bold.ttf");
    font-weight:700;
}



/* Menu */
.header{
	width:100%;
	overflow:hidden;
	height: 70px;
	background: #0d0d0d;
}

.menu{
	overflow:hidden;
	margin-left: 45%;
	margin-bottom: 0;
	transition: margin-left 1s;
}

.menu a{
	display: inline-block;
	overflow:hidden;
	font: 24px robotoLight,sans-serif;
	color: #dadada;
	width:145px;
	height:50px;
	text-decoration: none;
	padding: 20px 4px 2px 40px;
	transition: background 0.5s;
	-webkit-transition: background 0.5s;
}

.menu a:hover{
	/*-webkit-box-shadow: 0px 0px 2px 3px rgba(218, 218, 218, 0.65);
	-moz-box-shadow: 0px 0px 2px 3px rgba(218, 218, 218, 0.65);
	box-shadow: 0px 0px 2px 3px rgba(218, 218, 218, 0.65);*/
	background:rgba(12, 64, 126, 0.75);
}

/* Rows */
.row-1{
	padding: 0;
	width: 100%;
	height: 400px;
	background: url('Images/row1-bg.jpg') no-repeat; 
    background-size:100% 100%;
}

.row-2{
	overflow:hidden;
	width: 100%;
	height: 400px;
	background:#0d0d0d;
	color: #dadada
}
.row-3{
	float: left;
width: 90%;
height: 400px;
background: rgba(12, 64, 126, 1);
font: 24px robotoLight, sans-serif;
color: #FFF;
padding: 0% 5% 0% 5%;
	}

.row-4{
	position:relative;
	z-index: 6;
	padding: 0;
	overflow:hidden;
	width: 100%;
	height: 33em;
	background: #dddddd;
	font: 24px robotoLight, sans-serif;
}
.row-5{
overflow:hidden;
	width: 100%;
	height: 400px;
	background:#dadada;
	color: #0d0d0d;
}
.row-6{
	float: left;
	height: 75px;
	width: 100%;
	font: 24px robotoLight, sans-serif;
	background: #0d0d0d;
}
/* Columns */
.col-1{
	width:25%;
	min-height: 100%;

}



/*Row 1 */
.mobDetails{
	position: relative;
	padding: 25px 0 25px 65px;
	top: 60px;
	margin: 0px 0 0 0;
	left: -400px;
	transition: left 3s;	
}
.mobDetails img{
	border-radius: 10px;
}
#row-1Title{
	position:absolute;
	font: 54px robotoLight,sans-serif;
	color: #dadada;
	left:10px;
	top:30px;
}
#row-1Content{
	position:absolute;
	font: 20px robotoLight,sans-serif;
	color: #dadada;
	right: 25px;
	bottom:10px;
}
/* Row 2 */
.serviceSlider{
	position: absolute;
	left: 0px;
	width: 100%;
	height: 400px;
}
.serviceContainer{
	overflow: hidden;
	width: 1920px;
	height: 400px;
}
.residential{
	float:left;
	position:absolute;
	width:1920px;
	height:400px;

}

.council{
	float:left;
	position:absolute;
	width:1920px;
	height:400px;
}

.industrial{
	float:left;
	width:1920px;
	height:400px;
}


/* Row-3 */

.row-3 h1, .row-3 p {
	margin-top: 6%;
}


/* Row - 4 
.slidesjs-navigation {
position: absolute;
top: 3em;
left: 15%;
color: #FFF;
text-decoration: none;
z-index: 10;
background: rgba(46, 46, 46, 0.5);
border-radius: 5px;
-moz-border-radius: 5px;
padding: 2px 5px 2px 5px;
}
.slidesjs-next.slidesjs-navigation {
margin-left: 10em;
}
#slides > img{
	width:auto;
	height: auto;
}
#slides{
	width:auto;
	height:auto;
}
#slideTitle{
	width: 400px;
position: relative;
z-index: 11;
top: -700px;
left: 1640px;
font: 58px robotoReg, sans-serif;
color: #FFF;
padding-left: 25px;
background: rgba(46, 46, 46, 0.5);
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
} */

/*row5*/
.aboutTitle{
	font: 30px robotoLight,sans-serif;
	margin: 30px 0 0 5%;
}
.aboutContent{
	margin: 0% 5% 1% 10%;
	width: 70%;
	font: 20px robotoLight, sans-serif;
}
/*row6 footer*/
.footerLeft{
	float: left;
	width: 45%;
	padding: 28px 0 0px 26px;
	height: 47px;
	color: #FFF;
	font: 18px robotoReg, sans-serif;
}
.footerRight{
	float: left;
	width: 47%;
	height: 47px;
	color: rgba(12, 64, 126, 1);
	padding: 23px 0 5px 110px;
	font: 24px robotoReg, sans-serif;
}
#footerContact{
	margin: 0;
	font: 24px robotoLight, sans-serif;
	display: inline-block;
}
#footerContact b{
	color:#dadada;
}

/*Different Slider*/
#slider{
	min-width:1905px !important;
}
.swipe {
  overflow: hidden;
  visibility: hidden;
  position: relative;
}
.swipe-wrap {
  overflow: hidden;
  position: relative;
}
.swipe-wrap > div {
  float:left;
  width:100%;
  position: relative;
}
.slideNav{
	position: relative;
	z-index:20;
	top: -10%;
	left: 10%;

}

.slideNav > button{
	background:#2d71e0;
	
	-webkit-border-top-left-radius:29px;
	-moz-border-radius-topleft:29px;
	border-top-left-radius:29px;
	-webkit-border-top-right-radius:29px;
	-moz-border-radius-topright:29px;
	border-top-right-radius:29px;
	-webkit-border-bottom-right-radius:29px;
	-moz-border-radius-bottomright:29px;
	border-bottom-right-radius:29px;
	-webkit-border-bottom-left-radius:29px;
	-moz-border-radius-bottomleft:29px;
	border-bottom-left-radius:29px;
	text-indent:0;
	border:1px solid #337fed;
	display:inline-block;
	color:#ffffff;
	font: 24px robotoLight, sans-serif;
	height:45px;
	line-height:45px;
	width:121px;
	text-decoration:none;
	text-align:center;
	
}
.slideNav > Button:hover {
	background: #3094ff;
	

}
/*Media Queries - Desktop Resize*/
@media all and (max-width: 1750px){
	.menu{
		margin-left: 40%;
		margin-bottom: 0;
		z-index: 99;
	}
	.footerRight{
		margin-left: -25%;
	}
}
@media all and (max-width: 1650px){
	.aboutContent{
		width: 85%;
	}
	.footerRight{
		margin-left: 0;
		width:50%;
		padding: 23px 0 0px 0px;
	}
}
@media all and (max-width: 1605px){
	.menu{
		margin-left: 35%;
		margin-bottom: 0;
	}
	.mobDetails{
		position: relative;
		font: 24px robotoLight,sans-serif;
		color: #dadada;
		padding: 25px 5px 5px 50px;
	}
}

@media all and (max-width: 1480px){
	.menu{
		width:100%;
		position:fixed;
		z-index: 99;
		background:#0d0d0d;
		margin-left: 0;
		margin-bottom: 0;
		padding-left: 7%;
	}
	.menu a {
		font: 17px robotoLight, sans-serif;
		width: 85px;
		padding: 21px 25px 0 25px;
		margin-left:5%;
	}
	.mobDetails{ width:120%;}
	#row-1Content{ right: 30%;}
	.row-4 {height:23em;}
	.aboutContent{width:85%;
		font-size: 18px;}
	.safetyContent{top: 120px;}
	.footerRight{ margin-left: 5%;
width: 65%;}
	.footerLeft{ display:none;}
}

@media all and (max-width: 1195px){
	.aboutContent{
		font-size: 15px;
	}
	.footerRight {
margin-left: 10%;
width: 100%;
}
.row-5{
	margin-top: -15%;
z-index: 100;
position: relative;
}

}
@media all and (max-width: 850px){
	.footerRight, #footerContact{
		font-size:18px;
	}
	.menu a {
font: 15px robotoLight, sans-serif;
width: 10%;
padding: 21px 15px 0 15px;
margin-left: 5%;
}
	.menu{
		padding-left: 0;
	}
	}

	@media all and (max-width: 680px){
		.row-5{
			margin-top: -35%;
			height:500px;
		}

		.menu a{
			width: 8%;

		}


	}