/*DS Design

blue from portfolio #34425C;

282727

*/


html{
	background-color:#fff;
	

}

.mainHeader {
/*main header contains the nav for future z-index placement*/
	position: relative;
	z-index: 3;
	padding: 0px 0px 0px -50px;
	position: fixed;
	margin-top: 40px;
	margin-left: 35%;

}



body{

    width: 100%;
	font-size: 95%; /* base font size is 14px */
	font-family: Lato-Hairline, Lato-Regular,Lato-Light, Bank Gothic, Arial, 'Lucida Sans Unicode';
	text-align: left;
	display: none; 	
	overflow-x: hidden;
    overflow-y: scroll;
	
}



a {
	text-decoration: none;
	font-family: Lato-Light;
	
	}

a:link, a:visited {
	/*color: #00b4bc;*/
	color: #CF5C3F;
	transition: color #CF5C3F;
	
	}

a:hover, a:active {

	/*color: #743423;  e06245*/
	color: #743423;
	font-style: bold;
	
	}
	
	
.body{

	margin: 0% auto;
	width: 80%;
	clear: both;
	 
	

}



	/* CONTACT FORM CSS - BELOW*/

label {
    display:block;
    margin-top:20px;
    letter-spacing:2px;
}


/* Centre the page */
.contact_form {
	background: rgba(0,0,0, 0.4);
    display:block;
    margin:0 auto;
    width:576px;
}

/* Centre the form within the page */
form {
position: relative;
	z-index: 0;
	font-family: Lato-Light;
	text-align: left;
    margin:0 auto;
    width: 500px;
    background: rgba(0,0,0, 0.7);
    padding: 2% 0% 4% 2%;
}

/* Style the text boxes */
input, textarea {
    width:450px;
   
    height:27px;
    background:#efefef;
    border:1px solid #dedede;
    padding:10px;
    margin-top:3px;
    font-size:0.6em;
    color:#3a3a3a;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    opacity: 0.8;
}


input:focus, textarea:focus {
    border:1px solid #97d6eb;
}


#submit {
	margin-left: 170px;
	margin-bottom: 20px;
    width:125px;
    height:38px;
    background:url(img/submit.jpg);
    background-repeat: none;
    background-color: none;
    text-indent:-9999px;
    border:none;
    margin-top:20px;
    cursor:pointer;
    border-color: #fff;
		border-style: solid;
		border-width: 1px;
}


#submit:hover {
		border-color: #999;
		border-style: solid;
		border-width: 1px;
	    opacity:0.9;
	}

			/* CONTACT FORM CSS - ABOVE*/



/* below added after*/


.logotopleft{
	margin: 3px 0px 0px;
	
	

}


.top-header{
position: relative;
z-index: 1;
	background: rgba(197, 213, 205, 0.9);
	position: fixed;
	color: #FFF;
	font-family: Lato-Light;
	width: 111%;
	height: 75px;
	padding: 4% 3% 2% 15%;
	text-align: left;
	margin-top: -1%;
	margin-right: 0%;
	margin-left: -13%;
	margin-bottom: 1%;
	font-size: 140%;
	border-radius: 0px;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	/*box-shadow: 2px 2px 2px  #888888;*/
	
	
}




.logonew {

	display: none;
}



/*above added after*/

.mainHeader img{
	width: 100%;
	height: auto;
	margin: 0% 0% 0% 0%;
	

}

.mainHeader img:hover{
	background-color: rgba(255,255,255, 0.8);
	transition: .300s ease-in-out;
   -moz-transition:  .300s ease-in-out;
   -webkit-transition:  .300s ease-in-out;
	
}


/*.image-swap {
   width: 800px;
   height: 500px;
   background-image: url('img/Logo_hover copy.png');
   background-position: 0 0;
   overflow: hidden;
}
 
.image-swap:hover {
background-position: 0 100%;

}*/


#nav{

	display: none;

}
.mainHeader nav{
	position: relative;
	font-family: Lato-Regular;
	z-index: 3;
	/*background-color: #FFF;*/
	/*background: rgba(255,255,255, 0.2);*/
	font-family: Lato-Regular;
	height: 40.5px;
	/*border-bottom: solid #999;
	border-top: solid  #999;*/
	border-bottom-width: 1px;
	border-top-width: 1px;
	text-align: center;
	padding-right:  5px;
	/*box-shadow: 1px 1px 1px #000000;*/
	

	
}

.mainHeader nav ul {

	list-style: none;
	margin: 0% auto;
	
	
	
}

.mainHeader nav ul li {

	float: center;
	display: inline;
	position: relative;
	
	
}

.mainHeader nav a:link, .mainHeader nav a:visited {
	color: #FFF;
	/*color: #00b4bc; */
	display: inline-block;
	background-color: #;
	padding: 6px 35px;
	height: 20px;
	/*background-color: #FFF;*/
	font-family: Lato-Regular;
	
	

}

.mainHeader nav a:hover, .mainHeader nav a:active,
.mainHeader nav .active a:link, .mainHeader nav .active a:visited {

/*old nav font color #2A2D2D;   for appearing borders top and bottom ed123d*/
	
	color: #777;
	background: rgba(256,256,256, 0.0);
	clear: both;
	height: 19px;
	text-shadow: none;
	/*border-bottom: solid #E5E600; */
	/*border-top: solid #FF606E;*/
	border-bottom-width: 6px;
	border-top-width: 2px;
	/*border-bottom: solid #CC3300;*/
	transition: .300s ease-in-out;
   -moz-transition:  .300s ease-in-out;
   -webkit-transition:  .300s ease-in-out;
    /*box-shadow: -2px -3px 9px  #888888;*/
	
	
	
}

.nav-fade li  {
   /*background-color: transparent;*/
   color: #B67159;
   padding: 0px 3px 2px;
   display: inline-block;  
   
   }


.nav-fade li:hover {
      /*background: #009900;*/
      color: #B67159;
     
      }


.mainHeader nav ul li a {
	border-radius: 0px;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	

}


#toripic {
	
	width: 300px;
	height: 300px;
	background-image: url('img/tori.jpg');
	background-size: 100%;
	background-repeat: none;
	border-radius: 200px;
	background-position: 50% 50%;
	text-align: center;
	margin: auto;
	margin-top: -120px;
	
}


.mainContent {
	color: #000;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	
	
}

.content {
	
	width: 100%;
	float: left;	
	

}

.post-info {
	font-style: italic;d
	color: #999;
	font-size: 85%;
	width: 50%;

}

.topcontent {
	

	font-size: 220%;
	background-position: 100% 100%;
	color: #FFF;
    float: left;
	width: 100%;
	/*background: rgba(0,0,0, 0.2);*/
	padding: 5% 0% 9%;
	margin-right: 0%;
	margin-top: 150px;
	margin-left: 0%;
	margin-bottom: 0%;
	text-align: center;
	background-attachment: fixed;
	
	
	

	
	/*box-shadow: 1px 1px 1px  #888888;*/
	/*opacity: 0.9;*/
		
}

/*.bottomcontent {
	background-color: #FFF;
	height: 160%;
	width: 90%;			
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	padding: 3% 5% 5%;
	margin-right: 0%;
	margin-top: 2%;
	box-shadow: 1px 1px 1px  #888888;

}*/

.selectprojects {
	background-image: url('img/lights.jpg');
	background-attachment: fixed;
	background-position: 100% 100%;
	box-shadow: 6px 8px 20px  #999;
	/*background: rgba(0,0,0, 0.5);*/
	width: 110%;
	height: auto;
	padding: 0% 0% 2% 26%;
	float: left;
	margin: 0% 0% 0% -22%;

}

#featuredServices {
	background-image: url("img/-footer_bg2.jpg");
	background: rgba(0,0,0, 0.4);
	border-color: #fff;
	border-style: solid;
	border-radius: 5px;
	border-width: 1px;
	text-align: center;
	width: 30%;
	font-size: 110%;
	height: auto;
	margin-left: 27%;
	margin-top: 20px;
	padding: 1% 0% 1% 0%;
	box-shadow: 1px 1px 5px #000;
	font-family: Lato-Light;
	color: #FFF;
	/*box-shadow: 2px 2px 2px #999;*/
	/*color: #00b4bc;*/
	
}

.top-sidebar {
	
	width: 25%;
	height: auto;
	color: #fff;
	/*background-color:  #FFF;*/
	background: rgba(0,0,0, 0.8);
	border-radius: 4px;
	border-style: solid;
	border-color: #fff;
	border-width: 1px;
	float: left;
	text-align: center;
	/*background: rgba(255,255,255, 0.6);*/
	margin-bottom: 1%;
	margin-left: -4%;
	margin-top: 2%;
	padding: 2% 2% 5%;
	/*box-shadow: 1px 1px 12px  #888;*/
	
}


.middle-sidebar {
    color: #FFFFFF;
	background: rgba(0,0,0, 0.8);
	border-radius: 4px;
	border-style: solid;
	border-color: #fff;
	border-width: 1px;
	color: #fff;
    /*background: rgba(256,256,256, 0.9);*/
	width: 25%;
	height: auto;
	float: left;
	border-radius: 4px;

	
	/*background: rgba(255,255,255, 0.6);*/
	margin-left: 3%;
	margin-top: 2%;
	padding: 2% 2% 5%;
	text-align: center;
   
	
}

.bottom-sidebar {
	text-align: center;
	border-radius: 4px;

	color: #FFF;
	width: 25%;
	height: auto;
	float: left;
	background: rgba(0,0,0, 0.8);
	border-radius: 4px;
	border-style: solid;
	border-color: #fff;
	border-width: 1px;
	color: #fff;
	margin: 2% 0% 2% 3%;
	padding: 2% 2% 6%;
	

	
}

.quote{
	float: left;
	color: #000000;
	

}

.mainFooter{
	background-image: url("img/bg1.jpg");
	background-attachment: fixed;
	background-repeat: none;
	background-color: #000;
	width: 112%;
	height: 200px;
	float: left;
	/*background-color: #000000;*/
	margin: 0% 0% 0% -13%;
	font-size: 85%;
	text-align: left;
	color: #FFF;
	padding: 5% 0% 6% 15%;
	box-shadow: 1px 1px 1px  #888888;
	border-radius: 0px;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	
}




/*.footer-left{

		float: left;
		width: 50%;
		padding: 0%;
		margin-left: 20px;

}

.footer-right{

		float: left;
		width: 50%;
		

}*/



@font-face {
   font-family: Lato-Regular;
   src: url(font/Lato/Lato-Regular.ttf);
}

@font-face {
   font-family: Lato-Hairline;
   src: url(font/Lato/Lato-Hairline.ttf);
}

@font-face {
   font-family: Lato-Light;
   src: url(font/Lato/Lato-Light.ttf);
}


p {

	color: #2A2D2D;
	font-family: Lato-Light;
	
	}
	
p1{
color: #777;
	font-size: 80%;
	font-family: Lato-Light;
	text-align: left;
}

p2 {
	color: #FFF;
	font-size: 100%;
	font-family: Lato-Light;
	text-align: left;
	
}


.readmore {

		background-color: rgba(197, 213, 205, 0.6);
		padding: 1% 2% 1% 2%;
		border-style: solid;
		border-width: 2px;
		border-color: #C8C8C8  ;
		text-align: center;
		width: 100px;
		height: auto;
		color: #222222;
		margin-left: 0%;
		margin-bottom: 200px;
		border-radius: 1px;
		-moz-border-radius: 1px;
		-webkit-border-radius: 1px;
		/*border-bottom: 3px solid #878787;*/
		font-family: Lato-Light;
		font-size: 85%;
		transition: .300s ease-in-out;
   		-moz-transition:  .300s ease-in-out;
  		-webkit-transition:  .300s ease-in-out;
  		font-family: Lato-Regular;
   		

}
.readmore:hover{
		/*background-color:  #EEEEE7;*/
		background-color: rgba(197, 213, 205, 0.4);
		border-style: solid;
		border-width: 2px;
		border-color: #FFF;
	    /*border-right-color: #2A2D2D;
	   	border-bottom-color: #2A2D2D;*/
		/*border-bottom: 3px solid #000000;*/
		color: #e06245;
		transition: .300s ease-in-out;
   		-moz-transition:  .300s ease-in-out;
   		-webkit-transition:  .300s ease-in-out;
   		/*#CF5C3F   #B3B3B3 */
}


.image {	
	border-radius: 5px;
	border-style: solid;
	border-color: #000;
	border-width: 1px;
}

.imageswap{
	background: rgba(0,0,0, 0.8);
	padding: 1% 1% 1% 5%;
	margin: 0% 1% 1% -12%;
	width: 200px;

}





p3 {
    color: #FFF;
    font-family: Lato-Light;
    font-size: 170%;
    line-height: 150%;
    background: rgba(0,0,0, 0.3);
    padding: 1px 2px 1px 1px;
  
    
    }
    
    p4 {
    color: #282727;
    font-family: Lato-Hairline;
    font-size: 200%;
    line-height: 0.90;
    background-color: #;
    padding: 1px 2px 1px 1px;
    
    }
    
.contentimg {
     /*background: rgba(256,256,256, 0.2);*/
     padding: 2% 2% 2% 2%;
    
    
    }

hr	{
		height: 0.05px;
		background-color: #B3B3B3;
		border-radius: 4px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		
	
}


							/* --- ipad ------------------------------------------------------------
-------------------------------------------------------------------------
---------------------------------------------------------------- site ---*/




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

@media screen and (max-width: 1100px) {
		#menu {
	 		z-index: 6;
			z-index: 100;
			width:2.5em;
			height: 1.8em;
			display: block;
			background-color: rgba(51,153, 255, 0.8);
			font-size:2.00em;
			text-align: center;
			position: fixed;
			margin-bottom: 0px;
			margin-top: 0px;
			margin-left: 78%;
			padding-top: 2%;
			transition: .300s ease-in-out;
   			-moz-transition:  .300s ease-in-out;
  			-webkit-transition:  .300s ease-in-out;
}
		
		#menu:hover{
		
		background:#ddd;
}
		
		
		#nav.js {
			display: none;
		}
		
		
		ul {
		    width: 2px;
			z-index: 6;
			width:100%;
			position: fixed;
			background: rgba(256,256,256, 0.9);
			margin-top: 71px;
			list-style: none;
			margin-left: -11%;
			text-align: center;
			
		}
		
		
		li {
			width:100%;
			border-right:none;
			list-style: none;
			color: #fff;
			padding: 3%;
		}
	}
	
	@media screen and (min-width:1100px) {
		#menu {
			display: none;
		}
}
		

		a:link, a:visited {
		
	/*color: #00b4bc;*/
	color: #777;
	transition: color #256EB8;
	
	}

a:hover, a:active {

	/*color: #743423;  e06245*/
	color: #000;
	font-style: bold;
	
	}
	
	.mainHeader nav{
	display:none;
}
	
	/* --- start mobile phone ------------------------------------------------------------
-------------------------------------------------------------------------
---------------------------------------------------------------- site ---*/


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

@media screen and (max-width: 700 px) {
		#menu {
	 		z-index: 6;
			width:2.3em;
			height: 1.8em;
			display: block;
			background-color: rgba(51,153, 255, 0.8);
			font-size:1.35em;
			text-align: center;
			position: fixed;
			margin-bottom: 4px;
			margin-top: 10px;
			
			
			
			
		}
		
		#menu:hover{
		
		background:#ddd;
		}
		
		
		#nav.js {
			display: none;
		}
	
		
		ul {
		    width: 2px;
			z-index: 9;
			width:50%;
			position: fixed;
			background: rgba(256,256,256, 0.9);
			margin-top: 45px;
			list-style: none;
			margin-left: 0px;
			padding: 0 33% 0 25%;
			text-align: center;
		}
		
		li {
			width:100%;
			border-right:none;
			list-style: none;
			color: #fff;
			padding: 3%;
		}
		
		
		
		
	}
	
	
	
	
	@media screen and (min-width:800px) {
		#menu {
			display: none;
		}
	}
		

		a:link, a:visited {
		
	/*color: #00b4bc;*/
	color: #777;
	transition: color #256EB8;
	
	}

a:hover, a:active {

	/*color: #743423;  e06245*/
	color: #000;
	font-style: bold;
	
	}
		
/* --- end mobile phone above ------------------------------------------------------------
-------------------------------------------------------------------------
---------------------------------------------------------------- site ---*/		

.top-header{
    z-index:6;
	background: rgba(197, 213, 205, 0.9);
	background-image: url('');
	position: fixed;
	color: #FFF;
	font-family: Lato-Light;
	width:100%;
	height: 52px;
	padding: 0% 0% 0% -2%;
	text-align: left;
	margin-top: -4%;
	margin-right: 0%;
	margin-left: -1%;
	margin-bottom: 0%;
	font-size: 140%;
	border-radius: 0px;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	
}


html{
	
	
	background-size: 900px;
	margin-top: 0px;
	

}
.imageswap{
display: none;
}


.body{
	
	width: 100%;	
	font-size: 92%;
	background-color: #fff;
	font-family: Lato-Light;
	-webkit-width-adjust: 100%;
	-webkit-height-adjust: 100%;
	-o-width-adjust: 100%;
	-o-width-adjust: 100%;
	}



	/*.mainHeader img{
	width: 96.5%;
	visibility:url('img/');
	box-shadow: 1px 1px 1px  #888888;
	

	

	}*/
	
.logonew{
	z-index: 10;
	position: fixed;
	display: block;
	margin-left: 10%;
	float: left;
	background-color: rgba(0,0,0, 0.9);
	padding: 2% 2%;
	width: 100px;
	height: auto;
	margin-top: 2px;
	
	
	}
	
	
	/*.logo{
	display: none;
	
	}*/

	
.contentimg{
		width: 50%;
		height: auto;
	}		
	
/*.slider{
		display: none;
}
.shadow{
  		display: none;
}

.slider img{
	w	display: none;
}*/
	
.logo {
	dsiplay:none;
	}
	
	.logotopleft{
		dsiplay:none;
	
	

}


	
	
	/* CONTACT FORM CSS - BELOW------------------------------------------------*/

label {
    display:block;
    margin-top:20px;
    letter-spacing:2px;
     background-color: #282727;
}


/* Centre the page */
.contact_form {
	
    display: block;
    margin:0 auto;
    width: 100%;
    background-color: #282727;
    margin-bottom: -20%;
}

/* Centre the form within the page */
form {
	font-family: Lato-Light;
	text-align: left;
    margin: 0 0;
    width:108%;
    font-size: 70%;
    text-align: center;
    padding: 3% 0% 3% 0%;
    margin-left: -3%;
    background-color: #282727;
    
}

/* Style the text boxes */
input, textarea {
    width:60%;
    font-family: Lato-Light;
    height:27px;
    background:#efefef;
    border:1px solid #dedede;
    padding:10px;
    margin-top:3px;
    font-size:0.8em;
    color:#3a3a3a;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    opacity: 0.8;
    
}


input:focus, textarea:focus {
    border:1px solid #97d6eb;
    font-family: Lato-Light;
    
}



#submit {
	margin-left: 0%;
	margin-bottom: 20px;
    width:125px;
    height:38px;
    background:url(img/submit.jpg);
    background-repeat: none;
    background-color: none;
    text-indent:-9999px;
    border:none;
    margin-top:20px;
    cursor:pointer;
    border-color: #fff;
		border-style: solid;
		border-width: 1px;
}


#submit:hover {
		background-color: rgba(245,245,245, 0.0);
		border-style: solid;
		border-width: 1px;
	    opacity:0.9;
	}

			/* CONTACT FORM CSS - ABOVE-----------------------------------------------------*/
			/* CONTACT FORM CSS - ABOVE*/






	
.logotopleft{
		dsiplay:none;
	
	

}

.mainHeader nav{
display:none;
	height: 201px;
	
	}

/*.mainHeader nav ul {
	padding-left: 0;
	}

.mainHeader nav ul li {
	width: 100%;
	text-align: center;
	display: block;
	
	}

.mainHeader nav a:link, .mainHeader nav a:visited {
	padding: 10px 25px;
	height: 20px;
	display: block;
	

	}
	
.nav-fade li {
   background: #00000;
   padding: 0px 0px 0px;
   display: inline-block;
   transition: background .25s ease-in-out;
   -moz-transition: background .25s ease-in-out;
   -webkit-transition: background .25s ease-in-out;
   }

   .nav-fade li:hover {
      background: #fff;
     
      }
	
	*/
	
	
	.content {
	width: 100%;
	float: left;
	margin-top: 2%;
	
	}
	
	.post-info{
	display: none;
	
	}

.topcontent {
	width: 94%;
	float: left;
	font: 75%;
	padding: 35% 6% 0% 1%;
	margin-top: 2%;
	margin-bottom: -50%;
		
	}
	
	
/*.selectprojects {
	
	
	margin-left: 50px;
	width: 160%;
	height: auto;
	/*padding: 0% 90% 2% 13%;*/
	float: left;
	margin: 0% 0% 0% -22%;
	

}
.selectprojects {
	background-image: url( 'img/lights.jpg');
	background-attachment: fixed;
	box-shadow: 6px 8px 20px  #888888;
	/*background: rgba(0,0,0, 0.5);*/
	margin-left: 50px;
	width: 100%;
	height: auto;
	padding: 0% 0% 2% 26%;
	float: left;
	margin: 0% 0% 0% -22%;

}

#featuredServices {
	background-image: url("img/-footer_bg3.jpg");
	text-align: center;
	width: 50%;
	font-size: 110%;
	height: auto;
	margin-top: 5%;
	margin-left: 22%;
	padding: 1% 0% 2% 0%;
	font-family: Lato-Light;
	color: #fff;
	
	/*color: #00b4bc;*/
	
}
	
	
	.bottomcontent {
	width: 90%;
	background-color: #FFF;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	padding: 3% 5%;
	margin-top: 2%;

	 }
	 
	.top-sidebar {
	background-attachment: fixed;
	width: 85%;
	padding: 2% 3% 4% 4%;
	margin: 2% 0% 1% 0%;
	
	}
	.middle-sidebar {
	
	float:left;
	width: 85%;
	margin: 2% 0% 1% 0%;
	padding: 2% 3% 4% 4%
	
	}

	.bottom-sidebar {
	width: 85%;
	margin: 2% 0% 1% 0%;
	padding: 2% 3% 4%;
	
	}
	
	
	.readmore {

		background: rgba(235,235,235, 0.2);
		padding: 1% 2% 1% 2%;
		border-style: solid;
		border-width: 2px;
		border-color: #989898;
		text-align: center;
		width: 100px;
		height: auto;
		color: #222222;
		margin-top: 8%;
		margin-left: 0%;
		border-radius: 2px;
		-moz-border-radius: 2px;
		-webkit-border-radius: 2px;
		/*border-bottom: 3px solid #878787;*/
		font-family: Lato-Light;
		font-size: 85%;
		transition: .300s ease-in-out;
   		-moz-transition:  .300s ease-in-out;
  		-webkit-transition:  .300s ease-in-out;
  		font-family: Lato-Regular;
   		

}

p2 {
	color: #FFF;
	font-size: 80%;
	font-family: Lato-Light;
	text-align: left;
	
}

p3 {
    color: #FFF;
    font-family: Lato-Light;
    font-size: 130%;
    line-height: 150%;
    background: rgba(0,0,0, 0.3);
    padding: 1px 2px 1px 1px;
  
    
    }
    

	.mainFooter{
	width: 95%;
	float: left;
	margin: 0% 0% 0% -1%;
	clear: both;
	font-size: 85%;
	text-align: left;
	color: #FFF;
	padding: 5%;
	margin-left: -2%;
	
	
	
	.mainFooter .footer-left {

		float: left;
		width: 50px;
		margin-right:2%;
		
		

	}

	.footer-right{

		float: left;
		width: 12.5%;
		margin-left: 5%;
		}
	
	
	.bottom-footer{
	
		position: absolute;
		clear:both;

		
		
		
	}
}