html, header {
  margin: 0;
  padding: 0;
  max-width: 100%;
 
}
/* topnav  */
#topcontact {
  top: 0;
  width: 100% !important;
  padding-top: 5px;
  padding-bottom: 5px;
  background-color: #33aaef;
  color: #000000;
  text-align: center;
  margin: 0;
}
@media screen and (max-width: 700px)  {
  #topcontact{
    display: none !important;
  }
  
}



.topnav {
  z-index: 1;
  position: relative;
  top: 10%;
  right: 3%;
  overflow: hidden;
  font-family: 'helvetica';
  font-weight: lighter;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color:rgb(255, 254, 254);
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 18px;

}

/* Change the color of links on hover */
.topnav a:hover {
  font-weight: bold;
}

/* Add a color to the active/current link */
.topnav a.active {
  color: #333333;
  font-weight: normal;
}

/* Right-aligned section inside the top navigation */
.topnav-right {
  float: right;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 900px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 900px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
}
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }

/* images */


/* .logo {
  width: 75%;
  z-index: 1;
  position: absolute;
  float: left;
  top: 5%;
  left: 2%;
  margin: 5px;
} */

/* @media screen and (max-width: 700px) {
  .logo {
    width: 50%;
    display: block;
    margin: 0 auto;
    float: left;
  }
} */

.banner {

width: 100%;
margin-bottom: 0;
}

#ad-banner {

  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("/img/prestigiouspressurebanner.JPG");
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

.hero-text button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 10px 25px;
  color: black;
  background-color: #ddd;
  text-align: center;
  cursor: pointer;
}

.hero-text button:hover {
  background-color: #555;
  color: white;
}

.row {
  padding-top: 50px;
  display: flex;
}

.column {
  flex: 33.333%;
  padding: 5px;
}
.column2 {
  flex: 50%;
  padding: 5px;
}
/* text */
p {
  font-family: 'Helvetica';
  z-index: 1;
  line-height: 1.6;
}

h1 {
  font-family: 'Impact';
  text-align: center;
  font-weight: 100;
  font-size: 33px;
}

h2 {
  font-family: 'Impact';
  text-align: center;
  font-weight: 100;
  font-size: 27px;
}

.newsection {
  background-color: #66cbfd;
  padding: 10px;
  margin: 0;
}



button{
  color: Black;
  background-color: #F6C156;
  font-family: helvetica;
  border: none;
  padding: 20px 10px;
  font-size: 2em;
  text-decoration: none;
  margin-bottom: 50px;
  text-align: center;
  display: inline-block;


}

button:hover {
  color: black;
  background-color: white;


}

footer {
  margin: 0 auto;
  text-align: center;

}

a.quote {
  text-decoration: none;
  color: rgb(255, 255, 255);
  background-color: #110b51;
  font-family: 'Times New Roman', Times, serif;
  border: none;
  padding: 20px 10px;
  border-radius: 1vw;
  margin-bottom: 50px;
  font-size: 1em;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

a.quote:hover {
  color: black;
  background-color: #f6c156;
  opacity: 0.6;
}

.quoteblock {
  text-align: center;
  margin: 0 auto;
  padding-top: 20px;
  padding-bottom: 20px;
  text-style: bold;


}
h3 {
  text-align: center;
  margin:50 auto;

}
blockquote {
  font-family: Georgia, serif;
  position: relative;
  margin: 0.5em;
  padding: 0.5em 2em 0.5em 3em;
}
/* Thanks: http://callmenick.com/post/styling-blockquotes-with-css-pseudo-classes */
blockquote:before {
  font-family: Georgia, serif;
  position: absolute;
  font-size: 6em;
  line-height: 1;
  top: 0;
  left: 0;
  content: "\201C";
}
/* blockquote:after {
  font-family: Georgia, serif;
  position: absolute;
 /* display: block; don't use this, it raised the quote too high from the bottom - defeated line-height? */
  /* float:right;
  font-size:6em;
  line-height: 1;
  right:0;
  bottom:-0.5em;
  content: "\201D";
} */
#homepara {
  line-height: 2em;
}

.review {

  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  line-height: 1.5em;
}
/*    Grid Styles - index.html */

.block1 { grid-area: heading; }
.block2 { grid-area: section1; }
.block3 { grid-area: img1; }
.block4 { grid-area: img2; }
.block5 { grid-area: img3; }
.block6 { grid-area: img4; }
.block7 { grid-area: section2; }
.block8 {grid-area: section3; }
.block9 {grid-area: img5; }
.block10 {grid-area: img6; }
.block11 {grid-area: img7; }
.block12 {grid-area: img8; }
.block13 {grid-area: img9; }
.block14 {grid-area: img10; }
.block15 {grid-area: section4; }
.block16 {grid-area: review1; }
.block17 {grid-area: review2; }
.block18 {grid-area: quotenow; }
.block19 {grid-area: footer;}
.block21 {grid-area: logo;}
.block22 {grid-area: nav;}
.block30 {grid-area: jot}


.grid-container {
  width: 90vw;
  height: 96vh;
  margin:0 auto;
 

  display: grid;
  grid-template-areas:

  'heading heading heading heading heading heading '
  'section1 section1 section1 section1 section1 section1'
  'img1 img1 img2 img2 img3 img3 '
  ' img4 img4 img4 section2 section2 section2 '
  'section3 section3 section3 section3 section3 section3 '
  'img5 img5 img6 img6 img7 img7'
  'img8 img8 img9 img9 img10 img10'
  'section4 section4 section4 section4 section4 section4'
  'review1 review1 review1 review2 review2 review2'
  'quotenow quotenow quotenow quotenow quotenow quotenow '
  '. . jot jot . . '
  'footer footer footer footer footer footer'

;

  grid-column-gap: 20px;
  grid-row-gap: 20px;


  grid-template-columns: auto auto auto auto auto auto;

}

/* Responsive design for phones */
@media screen and (max-width:700px) {
  .grid-container {
    grid-template-areas:
    'heading'
    'section1'
    'img1'
    'img2'
    'img3'
    'img4'
    'section2'
    'section3'
    'img5'
    'img6'
    'img7'
    'img8'
    'img9'
    'img10'
    'section4'
    'review1'
    'review2'
    'quotenow'
    'jot'
    'footer'
    ;
    grid-template-columns: none;
    
  }

}

/*    Grid Styles - pressurewashing.html */

.block1a { grid-area: section1; }
.block2a { grid-area: img; }
.block3a { grid-area: footer; }



.grid-container2 {
  width: 90vw;
  height: 96vh;
  margin:0 auto;
 

  display: grid;
  grid-template-areas:

  'section1 section1 section1 img img img'
  'footer footer footer footer footer footer'

;

  grid-column-gap: 20px;
  grid-row-gap: 20px;


  grid-template-columns: auto auto auto auto auto auto;

}

/* Responsive design for phones */
@media screen and (max-width:700px) {
  .grid-container2 {
    grid-template-areas:
      'section1'
      'img'
      'footer'

    ;
    grid-template-columns: none;
    
  }

}



/*    Grid Styles - softwashing.html */

.block1b { grid-area: section1; }
.block2b { grid-area: img; }
.block3b { grid-area: footer; }



.grid-container3 {
  width: 90vw;
  height: 96vh;
  margin:0 auto;
 

  display: grid;
  grid-template-areas:

  'section1 section1 section1 img img img'
  'footer footer footer footer footer footer'

;

  grid-column-gap: 20px;
  grid-row-gap: 20px;


  grid-template-columns: auto auto auto auto auto auto;

}

/* Responsive design for phones */
@media screen and (max-width:700px) {
  .grid-container3 {
    grid-template-areas:
      'section1'
      'img'
      'footer'

    ;
    grid-template-columns: none;
    
  }

}

/*    Grid Styles - commercialwashing.html */

.block1c { grid-area: section1; }
.block2c { grid-area: img; }
.block3c { grid-area: footer; }
.block4c { grid-area: logo1; }
.block5c { grid-area: logo2; }
.block6c { grid-area: logo3; }
.block7c { grid-area: logo4; }
.block8c { grid-area: logo5; }
.block9c { grid-area: logo6; }
.block10c { grid-area: logo7; }
.block11c { grid-area: logo8; }
.block12c { grid-area: logo9; }


.grid-container4 {
  width: 90vw;
  height: 96vh;
  margin:0 auto;
 

  display: grid;
  grid-template-areas:

  'section1 section1 img img'
  'logo1 logo2 logo3 logo4 '
  'logo5 logo6 logo7 logo8'
  '. logo9 logo9 .'
  'footer footer footer footer'
  

;

  grid-column-gap: 20px;
  grid-row-gap: 20px;


  grid-template-columns: auto auto auto auto;

}

.customerlogo {
  width: 100px;
  object-fit: contain;
  margin: 0 auto;
  display: block;
}

/* Responsive design for phones */
@media screen and (max-width:700px) {
  .grid-container4 {
    grid-template-areas:
      'section1'
      'img'
      'logo1'
      'logo2'
      'logo3'
      'logo4'
      'logo5'
      'logo6'
      'logo7'
      'logo8'
      'logo9'
      'footer'

    ;
    grid-template-columns: none;
    
  }

}

/*    Grid Styles - housewash.html */

.block1d { grid-area: section1; }
.block2d { grid-area: img; }
.block3d { grid-area: footer; }



.grid-container5 {
  width: 90vw;
  height: 96vh;
  margin:0 auto;
 

  display: grid;
  grid-template-areas:

  'img img img section1 section1 section1'
  'footer footer footer footer footer footer'

;

  grid-column-gap: 20px;
  grid-row-gap: 20px;


  grid-template-columns: auto auto auto auto auto auto;

}

/* Responsive design for phones */
@media screen and (max-width:700px) {
  .grid-container5 {
    grid-template-areas:
      'section1'
      'img'
      'footer'

    ;
    grid-template-columns: none;
    
  }

}


/*    Grid Styles - contact.html */

.block1z { grid-area: banner; }
.block2z { grid-area: form; }
.block3z { grid-area: parag; }
.block4z { grid-area: footer; }



.grid-container9 {
  width: 98vw;
  height: 96vh;
  margin:0 auto;
 

  display: grid;
  grid-template-areas:

  'banner banner banner banner banner banner'
  'parag parag parag parag parag parag'
  'form form form form form form'
  'footer footer footer footer footer footer'

;

  grid-column-gap: 20px;
  grid-row-gap: 40px;


  grid-template-columns: auto auto auto auto auto auto;

}

/* Responsive design for phones */
@media screen and (max-width:700px) {
  .grid-container9 {
    grid-template-areas:
      'banner'
      'form'
      'parag'
      'footer'

    ;
    grid-template-columns: none;
    
  }

}

*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}


.container {
  height: 140px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  overflow: hidden;
}

.container .logo {
  max-width: 250px;
  padding: 0 10px;
  overflow: hidden;
}

.container .logo a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 100px;
}

.container .logo a img {
  max-width: 100%;
  max-height: 100px;
}

.container .navbar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding: 0 10px;
}

.container .navbar ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.container .navbar ul li a {
  text-decoration: none;
  color: #000000;
  font-size: 16px;
  display: block;
  height: 60px;
  line-height: 60px;
  cursor: pointer;
  padding: 0 10px;
  font-family: Georgia, 'Times New Roman', Times, serif;
  text-transform: uppercase;
}

.container .navbar ul li a:hover {
  color: #ffffff;
  background-color: rgba(23, 23, 23, 0.9);
}

.container .navbar ul .close {
  display: none;
  text-align: right;
  padding: 10px;
}

.container .navbar ul .close span {
  font-size: 40px;
  display: inline-block;
  border: 1px solid #000000;
  padding: 0 10px;
  cursor: pointer;
}

.container .navbar .icon-bar {
  padding: 18px 8px;
  width: 50px;
  height: 60px;
  display: none;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  cursor: pointer;
}

.container .navbar .icon-bar i {
  background-color: #000000;
  height: 2px;
}

@media only screen and (max-width:  1430px) {
  .container {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }

  .container .logo {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }

  .container .navbar {
    -webkit-box-flex: 0;
    -ms-flex: 0;
    flex: 0;
  }

  .container .navbar ul {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    position: fixed;
    left: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    background: #ffffff;
    width: 100%;
    height: 100%;
    overflow: auto;
    -webkit-transition: left .3s;
    -o-transition: left .3s;
    transition: left .3s;
  }

  .container .navbar ul li a {
    padding: 10px;
    font-size: 16px;
    height: auto;
    line-height: normal;
    color: #555555;
    font-family: Georgia, 'Times New Roman', Times, serif;
  }

  .container .navbar ul .close {
    display: block;
  }

  .container .navbar .icon-bar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  .container .navbar ._Menus-show {
    left: 0;
  }
}

.body {
  max-width: 700px;
  margin: 0 auto;
  padding: 10px;
}

ul li {
  font-family: helvetica; 
}
#phonenum {
  text-decoration: none;
  border-style: solid;
  border-radius: 10px;
}


#phonenum-ad {
  text-decoration: none;
  border-style: solid;
  border-radius: 10px;
  text-align: left;
}
textarea, input[type=text], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=submit] {
  width: 100%;
  background-color: #F6C156;
  color: black;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: rgb(250, 239, 217);
}

.fa {
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 30px;
  width: 30px;
  text-align: center;
  text-decoration: none;
  margin: 0 auto;
 border-radius: 20%;

}

.fa:hover {
    opacity: 0.7;
}

.fa-facebook {
  background: #3B5998;
  color: white;
  margin-left: 15px;
}

.fa-instagram {
  background: #125688;
  color: white;
}