/*Multiples*/

/*For the entire body of the code*/

body {
  background-color: #f7fafa;
  max-width: unset;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  padding: 0px;
  margin: 0px;
}

/*Hide the page titles*/

.singular .hentry .entry-header .entry-title,
.page-title {
  text-align: center;
  display: none;
}

/*Any non-class header*/

header {
  background-color: #3762b3;
  color: #f7fafa;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 14px;
  text-align: center;
  font-family: sans-serif;
}

/*Footer*/

footer {
  margin: 20px;
  padding: 10px;
  font-size: 10px;
  text-align: center;
  list-style-position: inside;
  line-height: 2.0;
}

/*Any heading with this class*/

.Heading {
  font-size: 14px;
  padding-bottom: 8px;
  text-align: center;
  font-family: sans-serif;
  padding: 0px;
  margin: 0px;
}

/*Pictures*/

img {
  margin-left: auto;
  margin-right: auto;
  display: block;
  width: 200px;
  height: 210px;
  max-width: 100%;
  max-height: 100%;
}

/*Row of column*/

.rowServices {
  display: flex;
  column-gap: 50px;
  column-width: auto;
  column-rule-width: 20px;
}

.rowAbout {
  display: flex;
  column-gap: 40px;
}

/*Columns*/

.columnServices {
  flex: 50%;
  margin: auto;
  padding: 2px;
}

.columnAbout {
  margin: auto;
  padding: 2px;
}

/*Menu*/

.Menu {
  background-color: #a0e5e8;
  font-size: 12px;
  text-align: center;
  word-spacing: 50px;
  padding: 5px;
}

/*To make the first menu item hover on contract*/

.Menu a:hover {
  background-color: #55a5ad;
  color: #f5f3f0;
  border-style: solid;
  border-color: #0a0600;
  transition-duration: 1.5s;
}

/*To make the second menu item hover*/

.Menu b:hover {
  background-color: #55a5ad;
  color: #f5f3f0;
  border-style: solid;
  border-color: #0a0600;
  transition-duration: 1s;
}

/*The third menu item*/

.Menu c:hover {
  background-color: #55a5ad;
  color: #f5f3f0;
  border-style: solid;
  border-color: #0a0600;
  transition-duration: 1s;
  font-family: Arial;
}

/*Edits the menu items themselves*/

.Menu a {
  border: solid;
  padding: 10px;
  border-color: #638f91;
}

/*About Us*/

/*History article*/

.History {
  font-family: sans-serif;
  font-size: 12px;
  padding: 5px;
  margin-left: 10px;
  margin-right: 10px;
}

/*The entire section on each employee*/

.Employee {
  padding: 5px;
  font-size: 12px;
}

/*The job title*/

.title {
  font-family: sans-serif;
  font-size: 13px;
  text-align: center;
  padding-bottom: 8px;
  text-decoration: underline;
  text-decoration-line: unset;
  margin-right: 5px;
}

/*All Employees Headings*/

.headingEmployees {
  text-align: center;
  font-size: 13px;
  font-family: Arial;
}

/*Workers Picture*/

.imageWorkers {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 860px;
  height: 400px;
  max-width: auto;
  max-height: auto;
}

/*Picture of Each Employee*/

.imageEmployee {
  width: 350px;
  height: 450px;
  float: unset;
  margin: auto;
  padding: 1px;
}

/*Home*/

/*Opening hours*/

.Hours {
  font-family: Arial;
  padding: 3px;
  margin-left: 30px;
  line-height: 2.0;
}

/*Hero Image*/

.heroImage {
  background-image: url(https://i0.wp.com/plumbingwallyoverman.com/wp-content/uploads/2023/10/Logo.webp?ssl=1&resize=438%2C438), linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
  height: 100px;
  width: auto;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  padding: 220px;
}

#wopHeader {
  font-size: 14px;
  position: relative;
  top: -250px;
  background-color: rgba(55, 98, 179, 0.7);
}

.homeHeading {
  position: relative;
  top: -40px;
  font-size: 28px;
}

.heroText {
  font-size: 13px;
  margin: 5px;
  position: absolute;
  top: 235px;
  left: -5px;
  right: -5px;
  bottom: 10px;
  background-color: rgba(24, 179, 239, 0.7);
  text-align: center;
  height: 200px;
}

#contactUs {
  position: relative;
  left: 5px;
  bottom: 5px;
  top: -20px;
  padding: 8px;
  font-size: 12px;
}

/*The unordered list of what our plumbers do*/

.WhatWeDo {
  font-family: Arial;
  font-size: 12px;
  padding: inherit;
  list-style-type: disc;
  line-height: 2.0;
  text-align: left;
  list-style-position: inside;
  margin-top: 2px;
  padding-top: 1px;
  position: relative;
  left: 250px;
}

/*The lists inside of the list*/

.SubList {
  list-style-type: circle;
  text-align: left;
  list-style-position: inside;
  font-size: 12px;
  font-family: Arial;
  position: relative;
}

.button {
  font-size: 12px;
  background-color: #3762b3;
  color: #f7fafa;
  position: relative;
  left: 275px;
  padding: 4px;
}

.button:hover {
  background-color: #a0e5e8;
  color: #3762b3;
  border-color: #3762b3;
  transition-duration: 1s;
}

/*Services*/

/*Heading of Services Plumbers Can Do*/

.servicesHeading {
  text-decoration: underline;
  text-align: center;
  font-size: 14px;
  font-family: Arial;
}

/*Section about Repairs and Installations*/

.InstallationsRepairs {
  font-family: Arial;
}

/*Section about Remodeling*/

.Remodeling {
  font-family: Arial;
}

/*Lists of Services*/

.servicesList {
  text-align: center;
  list-style-position: inside;
  line-height: 1.5;
}

/*Inspections Headings*/

.Inspections {
  text-align: center;
  font-size: 12px;
  font-family: Arial;
  text-decoration: underline;
  padding-bottom: 8px;
  padding-top: 2px;
}

/*Contact Us*/

/*Address*/

.Address {
  font-size: 12px;
  font-family: Arial;
  text-align: center;
}

/*Contact List*/

.contactList {
  font-size: 12px;
  text-align: center;
  list-style-position: inside;
}

/********************************************
*********************************************
********************************************/

/*Mobile Only*/

@media only screen and (max-width: 658px) {
  /*For the entire body of the code*/

  /*Multiples*/

  /*For the entire body of the code*/

  body {
    background-color: #f7fafa;
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
  }

  /*Any non-class header*/

  header {
    background-color: #3762b3;
    color: #f7fafa;
    margin-top: 11px;
    margin-bottom: 12px;
    font-size: 24px;
    text-align: center;
    font-family: sans-serif;
  }

  /*Footer*/

  footer {
    margin: 20px;
    padding: 10px;
    font-size: 12px;
    text-align: center;
    list-style-position: inside;
    line-height: 2.0;
  }

  /*Any heading with this class*/

  .Heading {
    font-size: 14px;
    padding-bottom: 10px;
    text-align: center;
    font-family: sans-serif;
  }

  /*Pictures*/

  img {
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 200px;
    height: 210px;
    max-width: 100%;
    max-height: 100%;
  }

  /*Row of column*/

  .rowServices {
    display: flex;
    flex-wrap: wrap;
  }

  .rowAbout {
    display: flex;
    flex-wrap: wrap;
  }

  /*Columns*/

  .columnServices {
    flex: 50%;
  }

  .columnAbout {
    flex: 50%;
  }

  /*Menu*/

  .Menu {
    background-color: #a0e5e8;
    font-size: 14px;
    text-align: center;
    word-spacing: 50px;
    padding: 5px;
  }

  /*To make the first menu item hover on contract*/

  .Menu a:hover {
    background-color: #55a5ad;
    color: #f5f3f0;
    border-style: solid;
    border-color: #0a0600;
    transition-duration: 1.5s;
  }

  /*To make the second menu item hover*/

  .Menu b:hover {
    background-color: #55a5ad;
    color: #f5f3f0;
    border-style: solid;
    border-color: #0a0600;
    transition-duration: 1s;
  }

  /*The third menu item*/

  .Menu c:hover {
    background-color: #55a5ad;
    color: #f5f3f0;
    border-style: solid;
    border-color: #0a0600;
    transition-duration: 1s;
    font-family: Arial;
  }

  /*Edits the menu items themselves*/

  .Menu a {
    border: solid;
    padding: 10px;
    border-color: #638f91;
  }

  /*About Us*/

  /*History article*/

  .History {
    font-family: Arial;
    font-size: 12px;
    padding: 5px;
    margin-left: 12px;
    margin-right: 12px;
    display: flex;
    flex-wrap: wrap;
    flex-flow: column;
  }

  /*The entire section on each employee*/

  .Employee {
    padding: 14px;
    font-size: 12px;
    display: wrap;
    flex-wrap: wrap;
    flex-flow: column;
  }

  /*The job title*/

  .title {
    font-family: Arial;
    font-size: 13px;
    text-align: center;
    padding-bottom: 10px;
    text-decoration: underline;
    margin-right: 10px;
    display: flex;
    flex-wrap: wrap;
  }

  /*All Employees Headings*/

  .headingEmployees {
    text-align: center;
    font-size: 14px;
    font-family: Arial;
  }

  /*Workers Picture*/

  .imageWorkers {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: auto;
    max-width: auto;
    max-height: auto;
    display: block;
  }

  /*Picture of Each Employee*/

  .imageEmployee {
    width: 100%;
    height: auto;
    float: unset;
    margin: auto;
    padding: 2px;
    display: block;
  }

  /*Home*/

  /*Opening hours*/

  .Hours {
    font-family: Arial;
    line-height: 2.0;
    font-size: 13px;
    text-align: left;
  }

  /*Wally Overman Plumbing*/

  /*Hero Image*/

  .heroImage {
    background-image: url(https://i0.wp.com/plumbingwallyoverman.com/wp-content/uploads/2023/10/Logo.webp?ssl=1&resize=438%2C438), linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
    height: 500px;
    width: auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  }

  /* 
    Image Address:
    https://i0.wp.com/plumbingwallyoverman.com/wp-content/uploads/2022/09/cropped-WallyOvermanPlumbing_Logo.jpg?ssl=1&resize=438%2C438
*/

  /*Wally Overman Plumbing Header*/

  #wopHeader {
    font-size: 15px;
    position: relative;
    top: -288px;
    left: 0px;
    right: 0px;
    background-color: rgba(55, 98, 179, 0.8);
  }

  /*Wally Overman Plumbing Heading*/

  .homeHeading {
    position: relative;
    top: -50px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    font-size: 14px;
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 1;
  }

  .heroText {
    font-size: 13px;
    margin: 5px;
    position: absolute;
    top: 290px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: #18b3ef;
    opacity: 0.7;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    height: 220px;
  }

  #contactUs {
    position: relative;
    left: 5px;
    padding-top: 0px;
    padding-bottom: 0px;
    font-size: 12px;
  }

  /*The unordered list of what our plumbers do*/

  .WhatWeDo {
    font-family: Arial;
    font-size: 12px;
    padding: inherit;
    list-style-type: disc;
    line-height: 2.0;
    text-align: left;
    list-style-position: inside;
    margin-top: 2px;
    padding-top: 1px;
    position: relative;
    left: 100px;
  }

  /*The lists inside of the list*/

  .SubList {
    list-style-type: circle;
    text-align: left;
    list-style-position: inside;
    font-size: 12px;
    font-family: Arial;
    position: relative;
    left: 5px;
  }

  /*Services*/

  /*Heading of Services Plumbers Can Do*/

  .servicesHeading {
    text-decoration: underline;
    text-align: center;
    font-size: 14px;
    font-family: Arial;
  }

  /*Section about Repairs and Installations*/

  .InstallationsRepairs {
    font-size: 12px;
    font-family: Arial;
  }

  /*Section about Remodeling*/

  .Remodeling {
    font-size: 12px;
    font-family: Arial;
  }

  /*Lists of Services*/

  .servicesList {
    text-align: left;
    list-style-position: inside;
    line-height: 2.0;
    position: relative;
    left: 50px;
  }

  /*Contact Us*/

  /*Address*/

  .Address {
    font-size: 12px;
    font-family: Arial;
    text-align: center;
  }

  /*Contact List*/

  .contactList {
    font-size: 12px;
    text-align: center;
    list-style-position: inside;
  }
}

/*End of Mobile Only Bracklets*/