body {width: 100%;}

.grid-container {
  display: grid;
  grid-template-columns: 120px 120px 120px auto auto auto auto auto auto auto auto 200px;
  grid-template-rows: 150px 100px auto auto 205px auto;
  padding: 10px;
  background-image: url('../images/Water_Drops.jpg');
}

.grid-container > div {
                       text-align: center;
                       /*border: 2px solid yellow;*/
                       padding: 0px 0px;
                       font-size: 30px;
                       }

.item1 {
  grid-column-start: 1 ;
  grid-column-end: 13;
  background-image: url('../images/Header_Background.jpg');}

.item2{grid-column-start: 1 ;
       grid-column-end: 13;
  
  }
.item3{grid-column-start: 1;
  grid-column-end: 13;
  }
.item4{grid-column-start:1 ;
  grid-column-end: 4;
  background-color: #F5F5F5; /*HTML Smoke White*/
  margin-left: 50px;
  }
.item5{grid-column-start:4 ;
  grid-column-end: 13;
  border-left: 2px solid black;
  }
.item6{grid-column-start:1 ;
  grid-column-end: 13 ;
  text-align: center;
  padding: 2px 2px 2px 2px;
  margin-left: 50px;
  }

header {position: relative;
	    display:block;
        float:left;
        width: 99%;
        height: 150px;
	     margin: 5px 5px 5px 5px;
       }	 

	
p   {display: block;
       float:right;
       color: white;
       font-size: 25px;
       text-align: center;
       padding: 10px 10px 10px 10px;
      }
		
h1.company_name1 {position: absolute;
                  float: left;
				  margin-top: 35px;
	              margin-left: 25px;
	              line-height: .05px;
	              font-size: 30px;
				  color: white;
	              font-family: 'Roboto Slab', serif;
				  font-weight: 400;
                  font-style: normal;
                  }	
			  
h1.company_name1::first-letter{font-size: 50px;
                              font-family: 'Roboto Slab', serif;
                              font-weight: 700;
                              font-style: normal;}

h1.company_name2 {position:absolute;
                  float: left;
		          line-height: .05px;
		          margin-top: 70px;
		          text-indent: 25px;
		          font-size: 30px;
				  color: white;
		          font-family: 'Roboto Slab', serif;
				  font-weight: 400;
                  font-style: normal;
                }

h1.info  {position: relative;
          float: right;
	      margin-top: 20px;
		  margin-right: 25px;
          margin-bottom: 0px;
		  font-size: 25px;
		  color: white;
		  font-family: 'Roboto Slab', serif;
		  font-weight: 100;
		  font-style: normal;
      /*  border: 5px dashed yellow*/      
         }

nav          {display:block;
              position: absolute;
              width: 100%;
		      height: 75px;
		      margin: 5px 5px 5px 5px;
             /* border: 2px solid red;*/
	          margin-top: 0px;
              padding-top: 0px;
                         
               }			  
		
/*ul     {position: absolute;
        width: 1090px;
        height: 60px;
        border: 1px solid red;
        border-radius: 10px;
        display: inline-block;
        background-color: #F5F5F5;
        margin-top: 0px;
        margin-left: -550px;
	    margin-right: 0px;
        margin-bottom: 125px;
        padding-left: 0px;
        padding-top: 10px;
        padding-bottom: 0px;
		list-style-type: none;
				
               }

li             {display: inline;
                width: 75px;
                height: 30px;
                font-size: 20px;
                padding: 10px 10px 10px 10px;
                box-shadow: 10px 10px 0px #a9a9a9;
                background-image: radial-gradient( circle farthest-corner at 10% 20%,  rgba(97,186,255,1) 0%, rgba(166,239,253,1) 90.1% );
                border: 2px solid black
				;
                border-radius: 5px;
                margin-left: 15px;
                cursor: pointer;
               }

li a:hover  {text-decoration: underline;} 


li a    {
          width: 75px;   
          text-decoration: none;
          color:black;

        }

.dropdown {position:relative;
           display:inline-block;

          }

.dropbtn {background-image: radial-gradient(circle farthest-corner at 10% 20%, rgba(97,186,255,1) 0%, rgba(166,239,253,1) 90.1%);
          width: 95px;
          height: 20px;
          padding: 10px 10px 10px 10px;
          font-size: 20px;
          border: none;
          cursor: pointer;
         }

.dropbtn:hover,.dropbtn:focus {text-decoration: underline;}

.dropdown-content {
                   display:none;
	           position:absolute;
	           margin-left: -12px;
	           background-color:#f1f1f1;
		   min-width: 150px;
	           box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.2);
		   z-index: 1;
		   
		   }
				   
.dropdown-content a {
                     width: 135px;
		             color: black;
		             font-size: 20px;
                     padding: 10px 10px;
                     text-declaration: none;
                     display: block;					 
					}
					
.show {display:block;}	*/

/*.mobile-container {display:none;}*/

.images{position: relative;
	    width: auto;
	    height: auto;
	    margin-left: auto;
	    margin-top: auto;
        margin-bottom: auto;
	    margin-left: auto;
	    padding-left: 10px;
	  /*border: 2px solid red;*/
        }	
		


.home_images{display:inline-block;
             padding-left:10px;}

aside img {width: auto;
           margin-top: 10px;
           margin-left: 0px;
           border: 2px solid black;
	       border-radius: 10px;
          }
		  
.estimate{position: relative;
          display: block;
	      width: 175px;
          height: 50px;
		  padding-top: 25px;
	      margin-top: 25px;
	      margin-right: auto;
	      margin-left: auto;
	   /* background-color: #004080;*/
	      border-radius: 5px;
	      background-image: linear-gradient(to right, red , yellow);		 
	        }
			 
aside a  {text-decoration: none;
          color: black;
          font-size: 20px;
          font-weight: bold;}
		  
aside a:hover {background-color: #e8e3e3;}	

#UnderConstruction {position: relative;
                    margin-top: 25px;
					margin-left: auto;
					margin-right: auto;
					}	 

main {display: inline-block;
      width: auto;
	  height: 675px;
      background-color: #F5F5F5; /*HTML Smoke White*/
      padding-bottom: 25px;
	  }
	  
main h3{text-align: left;
        margin-left: 50px;
		font-family:'Ephesis', cursive,'Roboto Slab', serif,'Yellowtail', cursive;
		font-size: 40px;
		font-weight: 300;
		color: #000099;
	   }
	   
main p {display:block;
        color: black;
		margin-right: 45px;
        margin-left: 50px;
		margin-top: -10px;
		text-align: left;
		text-indent: 25px;
	    font-family:'Josefin Slab', serif,'Roboto Slab';
	    font-weight: 200;
	  /*border: 2px solid black;*/
        word-wrap: normal;
	   }
	   
.last_paragraph{width: 93%;}

/*Begining of Footer (company information including phone number)*/	

div.item6 {margin-top: 10px;
           padding-top: 50px;
           background-color:  #c7b8b8;}
	
p.name {position:absolute;
        width: 550px;
        height: auto;
        text-align: center;
        padding-top: 5px;
		clear: both;
        margin-top: 0px;
        margin-left: -225px;
	    font-size: 22px;
        color: black;
        text-indent: 25px;
        font-family:'Josefin Slab', serif,'Roboto Slab';
	    font-weight: 500;
		font-style: normal;
	  /*border: 2px solid yellow;*/
	 }
	 
p.address{position: absolute;
          width: auto;
          margin-top: 25px;
          margin-left: 875px;
		  color: black;
          font-family:'Josefin Slab', serif,'Roboto Slab';
          font-size: 16px;
		  text-align: center;
		  font-weight: 500;
		  font-style: normal;
          /*border: 2px solid yellow;*/
   
           }
		   
/*Beginning of the responsive navigation menu styles or css to control the styles, apperance and activity of products dropdown tab located on the main menu*/
body {margin:0;font-family:Arial;}

.topnav {
  overflow: hidden;
  width: 52%;
  margin-top: 10px;
  margin-right: auto;
  margin-left: auto;
 /* border: 2px solid blue;  border*/
  border-radius: 10px;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 15px;
  padding-bottom: 15px;
  background-color:#4d4d4d;
}

.topnav a {
  margin-left: 16px;   
  float:left;  
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
 /* border: 2px solid yellow; border*/
  border-radius: 5px;
  background-image: radial-gradient( circle farthest-corner at 10% 20%,  rgba(97,186,255,1) 0%, rgba(166,239,253,1) 90.1% );
  
  }

.active {
  background-color: #04AA6D;
  color: white;
  
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropbtn {background-image: radial-gradient( circle farthest-corner at 10% 20%,  rgba(97,186,255,1) 0%, rgba(166,239,253,1) 90.1% );
          color: black;
		  border-radius: 5px;
		  }

.dropdown .dropbtn {
  font-size: 17px;    
  border: none;
  outline: none;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0px;
 /* border: 2px solid red;  border*/
  box-shadow: 10px 10px 0px #a9a9a9;
  margin-left: 15px; /*Moved the products tab over 13px to the right*/
}

.dropdown-content {
  margin-left: 15px;
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  background-color: white;
  background-image: none;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}

.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

.dropdown:hover .dropdown-content {
  display: block;
}

@media screen and (max-width: 600px) {
  .topnav {width: 95%;           /*Changed the width of the screen to 100% of the viewport*/ 
           float: left;           /*Changed Float property to back to left to accommodate for mobile menu*/  
		   padding-left: 0px;}    /*Changed the padding-left property to ZERO to accommodate for mobile menu*/
		   
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;
                      z-index: 1;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
	
  }
  .topnav.responsive .dropdown {float: none;
                               }
  .topnav.responsive .dropdown-content {position: relative;
                                       }
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

/*End of responsive navigation menu styling*/

/*Begining of Contact_Us Styles / CSS*/
.message {display: block;
          position: absolute;
          font-family: 'Roboto', sans-serif;
          font-size: 20px;
          margin-left: 42px;
   }

aside {height: 958px;
      }
	   
.alumax {margin-top: 50px;}

.basco {margin-top: 50px;}
h2{float:left;
   margin-left: 75px;
   }
   
 main {width: 100%;
      height: 97.8%;
	  background-color: #F5F5F5;
	  margin-bottom: 5px;
	 /* border: 2px solid red;*/
	  }
	  
.message {display: block;
          position: absolute;
          font-family: 'Roboto', sans-serif;
          font-size: 20px;
          margin-left: 42px;
   }
 
 form {width: 65%;
      height: auto;
	  display: inline-block;
	  margin-top: 50px;
	  clear: both;
	  margin-right: 375px;
    /*border: 2px solid blue;*/
	 }
	 
.fieldset {position: absolute;
           display: flex;
		   width: 500px;
	       margin-top: 25px;
           width: 85%;}
.personal_info { position: relative;
	             display: inline;
				 text-align: left;
	             width: 25px;
				 clear: both;
				 margin-top: 50px;}

.first1{display: inline-block;
        
        margin-left: 10px;
        margin-right: 35px;}

.first{ display: inline-block;
        width: auto;
        height: auto;
		clear: both;
		margin-right: auto;
		margin-left: -20px;
		font-size: 12px;
		text-align: left;
		padding: 15px 5px;
		
	  }
	  
label {font-size: 12px;}
input.input1{display: inline-block;
	         width: 175px;
             font-size: 18px;
			 padding: 2px 2px 2px 2px;
			 }
			 
.last1 {
	    display: inline-block;
		
		}
	  
.last{ display: inline-block;
       width: auto;
       height: auto;
	   text-align: center;
	   font-size: 12px;
	   margin-left: 0px;
	   margin-right: auto;
	   margin-top: 50px;
	   text-align:left;
	   padding: 15px 5px;
	  }
	  
.name {display: inline-block;}

.address1{display: block;
          width: 350px;
		  height:85px;
          margin: 10px 0px 0px 10px;
		  padding: 5px 0px;
		 }

.address{width: 550px;
         height: 25px;
         margin-left:0px;
	     margin-top: 25px;
	     font-size: 12px;
	     text-align:left;
		 padding: 15px 5px;
        }
		
input.input2{width: 400px;
             font-size: 18px;
			 padding:2px 2px 2px 2px;
			 }
			  
.city1 {
	    display: inline-block;
        width: auto;
        height: auto;
		margin: -145px 25px 5px 25px;}			  
		
.city {margin-left: 0px;
       font-size: 12px;
	 /*  border: 2px solid black;*/
	   padding: 10px 5px;
	   text-align: left;
	   margin: 0;
       }
	  
.state1{
	    display: inline-block;
		margin-left: 50px;
       }	  

.state {display: inline;
        position: relative;
        text-align: left;
        font-size: 12px;
		clear: both;
        margin-left: -10px;
	 /* border: 2px solid black;*/
		padding: 10px 10px;
        }
		
input.input5 {display: inline;
              width: 50px;
	          margin-top: -45px;
			  margin-left: 10px;
			  font-size: 18px;
			  }
			  
.zipcode1 {
	
	       display: inline-block;
	       margin-top: 25px;
		   margin-left: 25px;}

.zipcode {
	      display: inline;
		  font-size: 12px;
		  margin-left: 15px;
		  margin-top: 0px;
		  margin-bottom: -45px;
		  }
				 
input.input3 {width: 25px;
              font-size: 18px;
			  padding: 2px 2px 2px 2px;
			  }
			  
.phone1 {margin-left: 10px;}			  
				 
.phone {width: 250px; 
        position: relative;
       /* border: 2px solid black;*/ 
		font-size: 12px; 
		text-align: left;
		clear: both;
		margin-left: 0px;
		padding: 5px 5px;
		}
		
.email1 {}
		
.email {font-size: 12px;
        clear:both;
		margin-left: 12px;
		}
		

		
input.input4 {width: 165px;
              font-size: 18px;
			  clear: both;
			  padding: 2px 2px 2px 2px;
			  margin-left: 10px;
			 }
		
.recommend {text-align: left;
            font-size: 20px;
			margin-top: 10px;
			margin-left: 10px;
			padding: 10px 10px;
			}
			
.description {font-size: 18px;
              text-align: left;
              margin-top: 10px;
			  margin-left: 10px;}
			  
.submit1{display: inline-block;}			  
			  
.submit {display: inline;
	     text-align: left;
         margin-top: 10px;
		 clear: both;
		 margin-left: -794px;}
	
label {text-align: left;}
	
input {font-size: 15px;
       display: block;
      }
input1 {display: block;}
	  
option{font-size: 15px;
      }
	  
textarea {text-align: left;
          width: 500px;
          height: 250px;
		  font-size: 15px;
		  }