/* CSS Document */

* {
  box-sizing: border-box;
}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

[class*="col-"] {
     float: left;
     padding: 3px;
     border: 0px solid red;
}

body {
     font-family: 'Merriweather', serif;
     margin: 0px;
     background-color: #62a072;
}

.pagehead {
     background-image: url("images/sprinkler_head.jpg");
     background-position: center;
     color: white;
     height: 500px;
     margin: 0px;
     padding: 0px;
}

.topnav {
  overflow: hidden;
  background-color: coral;
  padding: 10px 0px;
}

.topnav a {
  float: none;
  display: inline;
  color: black;
  text-align: center;
  padding: 24px 16px;
  text-decoration: none;
  font-size: 24px;
  font-weight: bold;
}

.topnav a:hover {
  background-color: gold;
  color: black;
}


.topnav .icon {
  display: none;
}

p, li {
     font-size: 22px;
}

.companyname {
     font-size: 40px;
     padding-left: 100px;
}

.subhead {
     padding-left: 100px; 
     font-size: 24px;
}

.phone-white{
     color:white;
}

.flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 0px;
}

.flex-container > div {
    width: 18%;
    margin: 20px auto 20px;
    text-align: center;
     padding: 0px;
     background-color: #004215;
     border: solid white 3px;
}

.flex-container > div:hover {
     box-shadow: 0px 0px 26px black;
     cursor: pointer;
}

input[type=text], input[type=email], textarea, select, option {
     font-size: 20px;
     width: 100%;
     font-family: 'Merriweather', serif;
     color: black;
}

input[type=submit] {
     font-size: 20px;
     width: 40%;
     font-family: 'Merriweather', serif;
     color: black;
}

@media screen and (max-width: 1000px) {
     
    [class*="col-"] {
        width: 100%;
    }

     p, li {
          font-size: 18px;
     }
     
     .topnav {
          padding: 0px;
     }
     
     .topnav a:not(:first-child) {
          display: none;
     }
     
     .topnav a.icon {
          float: right;
          display: block;
     }
     
     .topnav.responsive {
          position: relative;
     }
     
     .topnav.responsive .icon {
          position: absolute;
          right: 0;
          top: 0;
     }
     
     .topnav.responsive a {
          float: none;
          display: block;
          text-align: left;
     }
     
     .topnav a {
          float: left;
          font-size: 18px;
          line-height: 0px;
     }
     
     .companyname {
          font-size: 24px;
          padding-left: 20px;
     }
     
     .subhead {
          padding-left: 20px; 
          font-size: 18px;
     }
     
     #myTopnav {
          line-height: 10px;
          font-size: 19px;
     }
     
     .flex-container > div {
              width: 95%;
          }
     
     input[type=text], input[type=email], textarea, select, option {
          font-size: 20px;
          width: 100%;
          font-family: 'Merriweather', serif;
          color: black;
     }
     
     input[type=submit] {
          font-size: 20px;
          width: 95%;
          font-family: 'Merriweather', serif;
          color: black;
          background-color: lightgrey;
     } 
     
     
     .pagehead {
          background-image: url("images/sprinkler_head.jpg");
          background-position-x: -1150px;
          color: white;
          height: 400px;
          margin: 0px;
          padding: 0px;
     }
}