html {
   
-webkit-text-size-adjust: 100%;}

a:hover {
    outline:0;
}

img {
    border: 0;
	margin:0;
	padding:0;
}

figure {
    margin: 0;
}


legend {
    border: 0; 
    padding: 0; 
}
 
 body {
font-family: sans-serif, Trebuchet MS, verdana, helvetica, geneva , arial black;
background-color: lightgrey;
line-height: 1.5em;
margin:0 ;
font-size:18px;
 }
 
 
 /* ============== TOP DIV SECTION ================   */
 
.topdiv {margin:0px;
 overflow:auto;
width:100%;
background-color:white;
}

.imagelogo {
line-height:90px;
margin-top:10px;
float:left;
height:70px;
width:70px;
margin-bottom:10px;
}

.left {float:left;
width:10%;
margin-top:0px;
line-height:90px;
}

.middle {float:left;
width:70%;
margin-top:0px;
margin-bottom:0px;
text-align:left;} 

.right {float:right;
width:20%;
margin-top:0px;
margin-bottom:0px;
text-align:center;

}


h1{
font-weight:normal;
font-size:2.3em;
line-height:90px;
margin-top:0px;
margin-bottom:0px;
padding:0;


}

.telephone { line-height:90px;
margin-top:0px;
margin-bottom:0px;
font-size:90%;
text-decoration:none;
color:black;}

.telephone p {padding:0;}




/* ============== NAV BAR SECTION ================   */



.nav ul {margin-top:0px;
margin-bottom:0px;
list-style-type:none;
padding:8px;
background-color:black;
text-align:center;
overflow:hidden;

}

.nav ul li {display:inline;
vertical-align:middle;
}

.nav ul li a { text-decoration:none;
font-family:'Satisfy', cursive;
background-color:black;
color:white;
padding:8px 10px 4px 10px;
margin-right:15px;
font-size:1.3em;
font-style:italic; }

.nav ul li a:hover{background-color:white;
color:black;}

/* ============== INDEX CONTENT ================   */
.containerpic {width:100%;
margin-bottom:0;
padding:0;
}

 .mainpic { 
 width:100%;
 height:600px;
 margin-bottom:0;
 padding-bottom:0;
 display:block;
 
 }
 

 /* ============== PREVIOUS WORK CONTENT  ================   */
 .pics {width:29.3%;
 float:left;
 margin-left:2%;
 margin-right:2%;
 margin-top:30px;
 color:black;
 height:310px;
}
 
 .pics img {width:100%;
 height:280px;
 
 }
 
 figcaption {text-align:center;
 font-weight:bold;}
 

 /* ============== ABOUT US CONTENT ================   */
 .aboutus {margin-left:10px;}
 

 
 /* ============== SERVICES CONTENT SECTION ================   */
 
 .service {
 margin-left:2%;
 margin-right:2%;}
 
 
   h2 { font-family:'Satisfy', cursive;
font-size:1.8em;
font-style:italic; }
  
  
/* ============== CONTACT US CONTENT ================   */
.contactuslink {
	color:black;}

.contact {width:100%;
overflow:auto;
margin-top:40px;
}	
	
	
.contactleft {width:33.3%;
float:left;
text-align:left;
}

.contactmiddle {float:left;
width:33.3%;
text-align:center;}

.contactmiddle img {padding-right:5px;}

.contactleft p {padding-left:20px;
text-decoration:none;
color:black;}




.contactright {width:33.3%;
float:left;
text-align:right;
}

.contactright img {padding-right:20px;}

.contactright img:hover{opacity:0.5;}
.contactmiddle img:hover{opacity:0.5;}
.contactleft p+p:hover {opacity:0.5;}


/* ============== TESTOMONIALS CONTENT SECTION ================   */
 fieldset { border: 3px solid black;
 padding-left: 20px;
 padding-right: 20px;
 margin-top:35px;
 margin-bottom:20px;
 margin-left:5px;
 margin-right:5px;
 
 }
 
 .review:hover{opacity:0.5;}
 
 .review {padding-left:10px;}
 
 .checkareview p {padding-left:10px;}


 /* ============== FOOTER SECTION ================   */
 
 #footer { width:100%;
 margin-top:0;
 background-color:black;
 text-align:center;
 font-size:70%;
 color:white;
 padding-top:0;
 overflow:auto;

 }
 
 .footerp {margin:0;
 padding:2px;}
 

 /* ============== MEDIA QUERIES SECTION ================   */
 

	 @media all and (max-width: 960px)
	 
	 {
		
		 
		 .nav ul {font-size:11px;}
		 
		 .pics {width:45%;
		 margin-left:2.5%;
		 margin-right:2.5%
		 }
		 	 
			 h1 {padding-left:15px;}
			 .contact {text-align:center;
			 display:block:}
			 
			 .contactleft {
			 float:none;
			 text-align:center;
			  display:block;
			  width:100%}
			 
			  .contactmiddle {
			 float:none;
			 text-align:center;
			 margin-bottom:30px;
			  display:block;
			  width:100%;
			 }
			 
			  .contactright {
			 float:none;
			 text-align:center;
			 display:block;
			 width:100%
			}
			
			.contactleft p {padding:0px;
			 text-align:center;}
			.contactright img {padding-right:0;
			text-align:center;}
			
			.contactmiddle img {text-align:center;
			padding-right:0;}
	 }
	 
	 
	 
	 @media all and (max-width: 650px)
	 {
		
		body {font-size:95%}
		
		  
		
		  
		 .imagelogo {height:70px;
		 width:70px;
		 margin-top:10px;
		 }
		 
		  .right {display:none;}
		  
		  .left {width:20%}
		  
		  .middle {width:80%;}
		  
		  
		   .pics img { height:250px;}
		   .pics {height:270px;
		   margin-bottom:12px;}
		   
		   
		   .burger {display:block;
		   height:32px;
		   width:100%;
		   background: url(burger-nav.png) no-repeat 50% center;
		   cursor:pointer;
		   background-color:black;
		   
		   }
		   
		   .nav ul {overflow:hidden;
		   height:0;
		   padding:0px;
		   }
		   
		   .nav ul.open {height:auto;}
		   
		   .nav ul li {display:block;
		   text-align:center;
		   font-size:1.3em;
		   padding:12px;}
		   
		   .nav ul li a {border-bottom:1px solid white;
		   margin:0px;
		   
		   }
		   
		  
	 }
 

 @media all and (max-width: 450px)
	 {
		.pics {width:95%;
		margin-left:2.5%;
		margin-right:2.5%;
		}
		
		h1 {
		font-size:1.8em;
		padding-left:10px;}
	
		 
		 .imagelogo {height:50px;
		 width:50px;
		 margin-top:20px;}
		 
		 h1 {padding-left:6px;}
	
		 
         
		}
		
		 @media all and (max-width: 360px)
		 
		 {
		 
		 .contactright img {
		   width:100%;}
		   
		   .contactmiddle img {
		   width:100%;}
		  
		   h1 {font-size:1.6em;}
		 }