/* 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: burlywood;
}

.pagehead {
     font-size: 40px;
}

.topnav {
  overflow: hidden;
  background-color: black;
  padding: 10px 0px;
  margin-top: 10px;
}

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

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


.topnav .icon {
  display: none;
     font-size: 25px;
}

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: 30%;
    margin: 20px auto 20px;
    text-align: center;
     padding: 15px;
     background-color: #004215;
     border: solid white 3px;
}

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

input[type=text], input[type=email], textarea, select, option, input[type=password] {
     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;
}

.syftitle{
     background-color: rgba(0,0,0,.7); width: 40%; float: left; margin: 30px 30px; border: solid white 2px;
}

.top-left {
     position: absolute;
     top: 25px;
     left: 25px;
     background-color: rgba(0,0,0,.8);
     border: solid white 2px;
     color: white;
     padding: 10px 20px;
}

.middle-left {
     position: absolute;
     bottom: 60px;
     left: 50px;
     background-color: rgba(0,0,0,.8);
     border: solid white 2px;
     color: white;
     padding: 15px 50px;
}

button {
     width: 200px;
     color: blanchedalmond;
     background-color: black;
     padding: 5px 10px;
     border: solid white 1px;
     border-radius: 10px;
     font-size: 18px;
     font-family: 'Merriweather', serif;
}

button:hover {
     background-color: white;
     color: black;
     border: solid black 1px;
     cursor: pointer;
}

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

.flex-container > div {
    width: 30%;
    margin: 20px auto 20px;
    text-align: center;
     padding: 0px;
     background-color: black;
     border: solid white 2px;
}

.flex-container > div:hover {
     /*box-shadow: 0px 0px 26px black;
     cursor: pointer;*/
}
 
#myBtnTop {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: red; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 10px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
  width: 60px;
}

.newsarchive {
     font-size: 16px; text-align: left; padding: 12px;
}

.newsarchiveicon {
     margin:10px; width: 40%;
}


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

     p, li {
          font-size: 18px;
     }
     
     .topnav {
          padding: 0px;
          font-size: 16px;
     }
     
     .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: 16px;
          line-height: 0px;
     }
     
     .companyname {
          font-size: 30px;
          padding-left: 20px;
     }
     
     .subhead {
          padding-left: 20px; 
          font-size: 18px;
     }
     
     #myTopnav {
          line-height: 10px;
          font-size: 17px;
     }
     
     .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 {
          font-size: 25px;
     }
     
     .syftitle{
          background-color: rgba(0,0,0,.7); margin: auto; width: 100%; border: none; margin-top: 50px;
     }
     
     .top-left {
          position: absolute;
          top: 0px;
          left: 0px;
          background-color: rgba(0,0,0,.5);
          border: solid white 2px;
          color: white;
          padding: 5px 15px;
          font-size: 10px;
          width: 100%;
     }
     
     .middle-left {
          display: none;
     }
     
     #official {
          display: none;
     }
}
     .container {
          position: relative;
          z-index: 0;
          /*text-align: center;*/
     }