/*----------------------------------
Index Page
----------------------------------*/
.mainimage {
  width: 100%;
}
.mainimagebox {
  width: 100%;
  text-align: center;
  background-color: black;
  background-position: center 75px;
  padding: 28.7rem;
  background-image: url("../images/tocci.webp");
  background-size: 100%;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
.thankyou {
  margin-bottom: 10rem;
}
.promobox {
  position: absolute;
  bottom: 5rem;
  left: 7rem;
  color: white;
  font-size: 1.2rem;
  font-family: "Roboto", sans-serif;
  padding-right: 2rem;
  padding-left: 2rem;
  border-radius: 2rem;
  background-color: rgba(0, 0, 0, 0.3);
}
.synauth {
  width: 30%;
  margin: 1rem auto 1rem auto;
}
.headerpromo {
  font-size: 2.25rem;
  text-align: center;
  font-weight: 700;
  margin: 1rem auto -.75rem auto;
  background-color: none;
  color: #13dcff;
  line-height: 80%;
}
.headersub {
  font-size: 1.75rem;
  text-align: center;
  background-color: none;
  margin: 1.25rem auto;
}
.headerdesc {
  font-size: 2.75rem;
  text-align: center;
  background-color: none;
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  margin: 1.25rem auto;
  line-height: 70%;
}
.promobuttonsbox {
  margin-top: 1.5rem;
  text-align: center;
  width: 100%;
}
.promobuttons {
  border: 0rem solid #ffffff;
  padding: 0.5rem;
  border-radius: 0.5rem;
  background-color: #669933;
  color: white;
  font-size: 1.2rem;
  margin: 0 1.5rem .25rem 1.5rem;
  text-align: center;
}
.purpose {
  width: 70%;
  margin: 2rem auto 7rem auto;
  font-weight: 300;
  font-size: 1.35rem;
  text-align: center;
  color: white;
  font-family: "Roboto", sans-serif;
}
.GGG {
  width: 90%;
  margin: 0 auto;
  font-weight: 500;
  font-size: 4rem;
  text-align: center;
  color: white;
  font-family: "Roboto", sans-serif;
}
.GGGLogo1 {
  width: 90%;
  margin: 7rem auto 0 auto;
  text-align: center;
}
.GGGLogo3 {
  width: 20%;
}
.locations {
  padding-top: .25rem;
  padding-bottom: 5rem;
  width: 100%;
  color: white;  
  font-family: "Roboto", sans-serif;
  padding-right: 2rem;
  padding-left: 2rem;
  background-color: rgba(0, 0, 0, 0.5);
}
.locationstext {
  font-size: 3rem;
  text-align: center;
  font-weight: 500;
  color: rgb(149, 246, 74);
  margin: 5rem auto 4rem auto;
  background-color: none;
  text-decoration: underline;
  text-underline-offset: 2rem;
  text-decoration-thickness: .05rem;
}
.areas {
  background-color: none;
  padding-left: 10rem;
}
.county {
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr; 
  font-weight: 500;
  color: rgb(149, 246, 74);
  text-align: center;
  width: 90%;
  font-size: 1.75rem;
}
.Counties1 {
  display: inline;
  margin: .5rem auto 2rem auto;
}
.Counties2 {
  display: none;
}
.cities {
  display: inline-block; 
  grid-template-columns: 1fr 1fr; 
  width: 12rem;
  list-style: none;
  padding-left: 2rem;
  margin: 0;
  text-align: left;
  font-size: 1.2rem;
}
.cities li {
  padding-bottom: .75rem;
}
.cities1 {
  text-align: center;
  width: 100%;
}
.cityframe {
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr; 
  width: 90%; 
}
.areasweserve {
  background-image: url("../images/locations.webp");
  background-attachment: fixed;
  background-size: 100%;
  background-position: -1000;
  background-repeat: no-repeat;
}
.quality {
  background-color: none;
  text-align: left;
  align-items: right;
  width: 100%;
  display: inline-block; 
  margin: 0;
}
.sytextheader {
  color: #90f642;
  font-size: 3rem;
  text-align: center;
  font-weight: 500;
  padding: 1rem;
  font-family: "Roboto", sans-serif;
}
.syvideo {
  background-color: none;
  width: 59.35%;
  float: left;
  margin: 0;
}
.sytext {
  width: 40.65%;
  background-color: none;
  float: right;
  margin: 0;
}
.syitem {
  text-align: left;
  padding-left: 2rem;
  float: left;  
  color: white;
  font-family: "Roboto", sans-serif;
  background-color: rgb(34, 38, 38);
}
.syitem2 {
  text-align: center;
  padding-bottom: 1rem;
  padding-top: .75rem;
  background-color: none;
  width: 100%;
  background-color: rgb(34, 38, 38);
}
.syvid {
  padding-bottom: .8rem;
  background-color: rgb(34, 38, 38);
  text-align: left;
  width: 100%;
  height: 70%;
}
.envid {
  width: 100%;
  height: 70%;
}
.syitem3 {
  text-align: left;
  padding-left: 2rem;
  float: left;  
  color: white;
  border-top: 1px solid #90f642;
  font-family: "Roboto", sans-serif;
  background-color: black;
}
.syitem img {
  padding-right: 2rem;
  padding-bottom: .40rem;
  float: left;
}
.syitem3 img {
  padding-right: 2rem;
  padding-bottom: .40rem;
  float: left;
}
.syitemheader {
  text-align: left;
  margin: 0;
  float: left;  
  color: #90f642;
  font-size: 1.25rem;
  font-family: "Roboto", sans-serif;
}
.pets {
  position: relative;
  text-align: center;
  color: white;
}
.dogvid {
  position: absolute;
  top: 20px;
  right: 16px;
  width: 35%;
  border-right: black solid .5rem;
  border-top: black solid .5rem;
  border-left: black solid .5rem;
  border-bottom: black solid .5rem;
  background-color: black;
}
.dogvideo {
  width: 100%;
}
.dogtextarea {
  position: absolute;
  text-align: left;
  width: 34%;
  bottom: 20px;
  left: 16px;
  border-radius: 2rem;
  padding-left: 2rem;
  font-family: "Roboto", sans-serif;
  background-color: rgba(0, 0, 0, 0.40);
}
.dogtext {
  margin-top: 1rem;
  font-size: 3rem;
  font-weight: 500;
  color: rgb(149, 246, 74);
  }
  @media (max-width: 1000px) {
    .dogtext {
      text-decoration: none;
      margin-left: -1rem;
    }
  }
.pettext {
  font-size: 1.25rem;
  line-height: 2.1rem;
  font-weight: 300;
  padding-right: 1rem;
}
.pet-button {
  border: 0rem solid #ffffff;
  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
  border-radius: 0.5rem;
  background-color: #669933;
  color: white;
  font-size: 1.2rem;
  margin: auto 1rem 1.5rem 0;
}
.golf {
  position: relative;
  text-align: center;
  color: white;
  margin-top: 1rem;
}
.golf img {
  width: 100%;
}
.golfvid {
  position: absolute;
  top: 20px;
  left: 16px;
}
.golfvidpos {
  overflow: hidden;
}
.pelz {
  position: absolute;
  top: 0; left: 0;
  width: 650px;
  height: 366px;
  border-right: black solid .5rem;
  border-top: black solid .5rem;
  border-left: black solid .5rem;
  border-bottom: black solid .5rem;
  background-color: black;
}
.golftextarea {
  position: absolute;
  text-align: left;
  width: 34%;
  bottom: 20px;
  right: 16px;
  border-radius: 2rem;
  padding-left: 2rem;
  font-family: "Roboto", sans-serif;
  background-color: rgba(0, 0, 0, 0.5);
}
.golftext {
  margin-top: 1rem;
  font-size: 3rem;
  font-weight: 500;
  color: rgb(149, 246, 74);
  }
  @media (max-width: 1000px) {
    .golftext {
      text-decoration: none;
      margin-left: -1rem;
    }
  }
  @media (max-width: 637px) {
    .golftext {
      margin-top: -1rem;
    }
  }
  @media (max-width: 580px) {
    .golftext {
      margin-top: -3rem;
    }
  }
  .howmade {
    width: 100%;
    text-align: center;
    margin-top: 2rem;
  }
  .line {
    border: 1px solid grey;
    width: 74%;
    margin: 0 auto 2.5rem auto;
  }
  .factoryvid {
    width: 75%;
    height: 86%
  }
  .productbuttonarea {
    text-align: center;
  }
  .products-button {
    border: 0rem solid #ffffff;
    padding: 0.7rem 0.75rem 0.5rem 0.75rem;
    border-radius: 0.5rem;
    background-color: #669933;
    color: white;
    font-size: 1.2rem;
    margin: 3rem auto 3rem auto;
  }
  .resources {
    font-family: "Roboto", sans-serif;
    color: white;
    padding-left: 2rem;
  }
  .resourcearea {
    font-family: "Roboto", sans-serif;
    font-size: 1.25rem;
    line-height: 1rem;
    color: white;
    padding-left: 2rem;
  }
  .contactus {
    font-family: "Roboto", sans-serif;
    color: white;
    padding-left: 2rem;
  }
  .contactusarea {
    font-family: "Roboto", sans-serif;
    font-size: 1.25rem;
    color: white;
    padding-left: 2rem;
  }
  .contacttext {
    color: #90df30;
    text-decoration: none;
   }
  .copyright {
    text-align: center;
    color: white;
    font-size: .9rem;


    font-family: "Roboto", sans-serif;
}
/*--------------------------------------------
Index Page 1700px
--------------------------------------------*/
@media (max-width: 1700px) {
  .mainimagebox {
    background-size: cover;
    background-position: inherit;
  }
}
/*--------------------------------------------
Index Page 1366px - Large iPad wide
--------------------------------------------*/
@media (max-width: 1366px) {
  .mainimagebox {
    background-size: auto;
  }
  .purpose {
    width: 90%;
  }
  .areas {
    background-color: none;
    padding-left: 4rem;
  }
  .areasweserve {
    background-size: 250%;
  }
  .locationstext {
    margin: 5rem 6rem 4rem auto;
  }
}
/*--------------------------------------------
Index Page 1055px - Large iPad narrow
--------------------------------------------*/
@media (max-width: 1055px) {
  .promobox {
    top: 4.25rem;
    bottom: -40rem;
    margin-right: 5rem;
    margin-left: -10.75rem;
    font-size: 1.2rem;
    font-family: "Roboto", sans-serif;
    padding-left: 5rem;
    padding-right: 1rem;
    border-radius: 0rem;
    width: 96%;
  }
  .areasweserve {
      background-attachment: fixed;
      background-size: 400%;
      background-position: -60rem;
      background-repeat: no-repeat;
    }
    .locationstext {
      margin: 5rem 3rem 4rem auto;
    }
    .areas {
      padding-left: 0;
    }
    .dogvid {
      width: 45%;
    }
    .dogtextarea {
      width: 44%;
    }
    .golftextarea {
      bottom: 24px;
      width: 46%;
    }
    .golf img {
      width: 175%;
      overflow: hidden;
    }
    .pelz {
      width: 29rem;
    }
}
/*--------------------------------------------
Index Page 1000px
--------------------------------------------*/
@media (max-width: 1000px) {
  .mainimagebox {
    background-size: cover;
    background-position: inherit;
  }
  .pelz {
    position: relative;
    width: 100%;
  }
  .promobox {
    bottom: -40rem;
    left: 11rem;
    margin-right: 5rem;
    margin-left: -10.75rem;
    font-size: 1.2rem;
    font-family: "Roboto", sans-serif;
    padding-left: 1rem;
    padding-right: 1rem;
    border-radius: 0rem;
    width: 96%;
  }
  .headerpromo {
    font-size: 2.25rem;
    text-align: center;
    font-weight: 700;
    margin: 1rem auto -.75rem auto;
    background-color: none;
    color: #13dcff;
    line-height: 120%
  }
  .headerdesc {
    font-size: 2.75rem;
    text-align: center;
    background-color: none;
    font-family: "Roboto", sans-serif;
    font-weight: bold;
    margin: 1.25rem auto;
    line-height: 120%;
  }
  .headersub {
    font-size: 1.75rem;
    text-align: center;
    background-color: none;
    margin: 1.75rem auto;
  }
  .promobuttonsbox {
    margin-top: 1.5rem;
    text-align: center;
    width: 100%;
  }
  .promobuttons {
    border: 0rem solid #ffffff;
    padding: 0.5rem;
    border-radius: 0.5rem;
    background-color: #669933;
    color: white;
    font-size: 1.2rem;
    margin: 0 1.5rem 1.75rem 1.5rem;
    text-align: center;
  }
  .purpose {
    width: 100%;
    margin: 2rem auto 7rem auto;
    font-weight: 300;
    font-size: 1.35rem;
    text-align: center;
    color: white;
    font-family: "Roboto", sans-serif;
  }
  .GGGLogo1 {
    text-align: center;
  }
  .GGGLogo1 img {
    width: 60%;
  }
  .locations {
    padding-top: .25rem;
    width: 100%;
    color: white;  
    font-family: "Roboto", sans-serif;
    padding-right: 2rem;
    padding-left: 2rem;
    background-color: rgba(0, 0, 0, 0.5);
  }
  .locationstext {
    font-size: 3rem;
    text-align: center;
    font-weight: 500;
    color: rgb(149, 246, 74);
    margin: 5rem 3.5rem 4rem auto;
    background-color: none;
    text-decoration: none;
  }
  .areas {
    background-color: none;
    text-align: center;
    margin: 0 auto;
  }
  .county {
    display: none;
  }
  .Counties2 {
    font-size: 1.5rem;
    display: block;
    margin: 1rem auto 2rem auto;
    color: rgb(149, 246, 74);
  }
  .cities {
    border: 1px solid none; 
    background-color: none;
    width: 22rem;
    list-style: none;
    padding-left: 2rem;
    text-align: left;
    font-size: 1.2rem;
  }
  .cities1 {
    display: grid;
    grid-template-columns: 1fr;
  }
  .cityframe {
    display: block;
    border: 1px solid none; 
    width: 100%; 
  }
  .areasweserve {
    background-attachment: fixed;
    background-size: 300%;
    background-position: -20rem;
    background-repeat: no-repeat;
  }
  .syvid {
    padding-bottom: .8rem;
    background-color: rgb(34, 38, 38);
    text-align: left;
    width: 170%;
    height: 30%;
  }
  .envid {
    width: 170%;
    height: 30%;
  }
  .sytext {
    width: 100%;
    background-color: none;
    float: right;
    margin: 0;
  }
  .sy {
    width: 100%;
  }
  .dogtextarea {
    position: relative;
    text-align: center;
    margin-left: -2.5rem;
    margin-top: 3rem;
    width: 100%;
    border-radius: 2rem;
    font-family: "Roboto", sans-serif;
    background-color: rgba(0, 0, 0, 0.40);
  }
  .golftextarea {
    position: relative;
    text-align: center;
    margin-left: -.5rem;
    width: 100%;
    border-radius: 2rem;
    padding-left: 2rem;
    font-family: "Roboto", sans-serif;
    background-color: rgba(0, 0, 0, 0.5);
  }
  .sytextheader {
    border-top: 1px solid grey;
    padding-top: 4rem;
  }
  .factoryvid {
    width: 100%;
    height: 30%
  }
  .dogvid {
    position: relative;
    width: 100%;
    margin-left: .5rem;
    border-right: black solid .5rem;
    border-top: black solid .5rem;
    border-left: black solid .5rem;
    border-bottom: black solid .5rem;
    background-color: black;
  }
  .dogvideo {
    width: 100%;
  }
  .pets img {
    display: none;
  }
  .golf {
    position: inherit;
  }
  .golfvid {
    position: inherit;
    margin-bottom: 2rem;
  }
  .contactus {
    padding-bottom: 1rem;
  }
}
/*--------------------------------------------
Index Page 800px
--------------------------------------------*/
@media (max-width: 800px) {
  .mainimagebox {
    background-size: cover;
    background-position: inherit;
  }
  .synauth {
    width: 50%;
    margin: 1rem auto 1rem auto;
  }
  .promobox {
    bottom: -10rem;
    left: 11rem;
    margin-right: 5rem;
    margin-left: -10.75rem;
    font-size: 1.2rem;
    font-family: "Roboto", sans-serif;
    padding-left: 1rem;
    padding-right: 1rem;
    border-radius: 0rem;
    width: 96%;
  }
  .headerpromo {
    font-size: 2.25rem;
    text-align: center;
    font-weight: 700;
    margin: 1rem auto -.75rem auto;
    background-color: none;
    color: #13dcff;
    line-height: 120%
  }
}
/*--------------------------------------------
Index Page 800px
--------------------------------------------*/
@media (max-width: 485px) {
  .promobox {
    bottom: -10rem;
    margin-right: 5rem;
    margin-left: -10.75rem;
    font-size: 1.2rem;
    font-family: "Roboto", sans-serif;
    padding-left: 1rem;
    padding-right: 1rem;
    border-radius: 0rem;
    width: 90%;
  }
}
/*--------------------------------------------
ABOUT PAGE
--------------------------------------------*/
.aboutheader {
  background-color: rgba(0, 0, 0, 0.5);
  padding-top: 12rem;
  width: 100%;
  color: white;  
  font-family: "Roboto", sans-serif;
  padding-right: 2rem;
}
.aboutggg {
  background-image: url("../images/backyard.jpg");
  background-size: 100%;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
.aboutbox {
  padding-top: 1rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-bottom: 20rem;
  margin: 0 auto;
  width: 77%;
}
.aboutgggtext {
  text-align: center;
  margin: 5rem auto 1rem auto;
}
.aboutheader3 {
  font-size: 3rem;
  margin-bottom: 1rem;
  text-shadow: -4px 3px 4px rgba(0, 0, 0, 1);
}
.aboutheader2 {
  font-size: 4rem;
  margin: 0;
  color: #90f642;
  text-shadow: -4px 3px 4px rgba(0, 0, 0, 1);
}
.abouttext {
  text-align: center;
  font-size: 1.6rem;
  text-shadow: -4px -4px 4px rgba(0, 0, 0, 1);
  line-height: 1.3;
}
.aboutsynlawn {
  width: 100%;
  padding-top: 1rem;
  background-color: rgb(25, 25, 25);
}
.SYNLawnLogo {
  display: inline;
  width: 21%;
}
.synpurpose {
  width: 90%;
  margin: 1rem auto 2rem auto;
  font-weight: 500;
  font-size: 3rem;
  text-align: center;
  color: #90f642;
  font-family: "Roboto", sans-serif;
}
.synpurpose2 {
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; 
  border: 1px solid grey; 
  background-color: none;
  text-align: left;
  font-size: 1rem;
  color: #f5f5f5;
  background-color: rgb(21, 21, 21);
}
.iconicevent1 {
  padding: 1rem 1rem 15rem 1rem;
  margin-top: 0;
  font-size: 1.5rem;
  background-color: rgb(25, 25, 25);
}
.iconicevent2 {
  padding: 1rem 1rem 9rem 1rem;
  margin-top: 0;
  font-size: 1.5rem;
  background-color: rgb(25, 25, 25);
}
.iconicevent3 {
  padding: 1rem 1rem 11rem 1rem;
  margin-top: 0;
  font-size: 1.5rem;
  background-color: rgb(25, 25, 25);
}
.iconicevent4 {
  padding: 1rem 1rem 11rem 1rem;
  margin-top: 0;
  font-size: 1.5rem;
  background-color: rgb(25, 25, 25);
}
.iconicevent5 {
  padding: 1rem 1rem 7rem 1rem;
  margin-top: 0;
  font-size: 1.5rem;
  background-color: rgb(25, 25, 25);
}
.iconicevent6 {
  padding: 1rem 1rem 6rem 1rem;
  margin-top: 0;
  font-size: 1.5rem;
  background-color: rgb(25, 25, 25);
}
.year {
  border-top: 1.5rem solid #f5f5f5;
  border-bottom: 1.5rem solid #f5f5f5;
  border-left: .75rem solid #f5f5f5;
  border-right: .75rem solid #f5f5f5;
  background-color: #76bc42;
  font-size: 2.7rem;
  font-weight: 700;
  text-align: center;
  font-family: "Roboto", sans-serif;
}
.year2 {
  border: 1px solid white;
  width: 88%;
  padding: .5rem;
  margin: -1rem auto .5rem auto;
}
.year3 {
  border-top: 1.5rem solid #f5f5f5;
  border-bottom: 1.5rem solid #f5f5f5;
  border-left: 1.5rem solid #f5f5f5;
  border-right: .75rem solid #f5f5f5;
  background-color: #76bc42;
  font-size: 2.7rem;
  font-weight: 700;
  text-align: center;
  font-family: "Roboto", sans-serif;
}
.year4 {
  border-top: 1.5rem solid #f5f5f5;
  border-bottom: 1.5rem solid #f5f5f5;
  border-left: .75rem solid #f5f5f5;
  border-right: 1.5rem solid #f5f5f5;
  background-color: #76bc42;
  font-size: 2.7rem;
  font-weight: 700;
  text-align: center;
  font-family: "Roboto", sans-serif;
}
.grass {
  width: 100%;
}
.whyggg {
  color: #90f642;
  font-size: 3rem;
  text-align: center;
  font-weight: 500;
  padding: 1rem;
  margin: 3rem auto 1.5rem auto;
  font-family: "Roboto", sans-serif;
}
.whygggabout {
  color: #90f642;
  font-size: 3rem;
  text-align: center;
  font-weight: 500;
  padding: 1rem;
  margin: 3rem auto 1.5rem auto;
  font-family: "Roboto", sans-serif;
}
.whyggggolf {
  color: #90f642;
  font-size: 3rem;
  text-align: center;
  font-weight: 500;
  padding: 1rem;
  margin: 3rem auto 1.5rem auto;
  font-family: "Roboto", sans-serif;
}
.whygggpets {
  color: #90f642;
  font-size: 3rem;
  text-align: center;
  font-weight: 500;
  padding: 1rem;
  margin: 3rem auto 1.5rem auto;
  font-family: "Roboto", sans-serif;
}
.whysynlawn {
  display: grid; 
  grid-template-columns: 33.33% 33.33% 33.33%;
  color: white;
  font-size: 1.25rem;
  font-family: "Roboto", sans-serif;
  margin-bottom: 3rem;
}
.whysynlawn li {
  list-style: none;
  line-height: 3rem;
}
/*--------------------------------------------
About Page 1366px - Large iPad wide
--------------------------------------------*/
@media (max-width: 1366px) {
  .aboutggg {
    background-size: 160%;
  }
  .iconicevent1 {
    padding: 1rem 1rem 29rem 1rem;
  }
  .iconicevent2 {
    padding: 1rem 1rem 18rem 1rem;
  }
  .iconicevent3 {
    padding: 1rem 1rem 13rem 1rem;
  }
  .iconicevent4 {
    padding: 1rem 1rem 22rem 1rem;
  }
  .iconicevent5 {
    padding: 1rem 1rem 15rem 1rem;
  }
  .iconicevent6 {
    padding: 1rem 1rem 11rem 1rem;
  }
  .syvid {
    height: 91%;
  }
  .syvideo {
    width: 100%;
  }
  .envid {
    height: 89%;
  }
  .syitem {
    padding: 1rem 2rem 1rem 3rem;
  }
  .factoryvid {
    height: 68%
  }
  .sytext {
    width: 78%;
    float: none;
    margin: 0 auto;
  }
  .sytextcontainer {
    width: 100%;
    padding-top: 100rem;
  }
  .quality {
    background-color: rgb(34, 38, 38);
    margin-bottom: -5rem;
  }
  .aboutbox {
    padding-top: 1rem;
    padding-bottom: 1rem;
    margin: 0 auto;
    width: 90%;
  }
  .aboutheader {
    padding-top: 2rem;
  }
}
/*--------------------------------------------
About Page 1055px - Large iPad narrow
--------------------------------------------*/
@media (max-width: 1055px) {
  .aboutggg {
    background-size: 200%;
  }
  .synpurpose2 {
    display: grid; 
    grid-template-columns: 1fr; 
  }
  .iconicevent1 {
    padding: 1rem 1rem 5rem 1rem;
  }
  .iconicevent2 {
    padding: 1rem 1rem 5rem 1rem;
  }
  .iconicevent3 {
    padding: 1rem 1rem 5rem 1rem;
  }
  .iconicevent4 {
    padding: 1rem 1rem 5rem 1rem;
  }
  .iconicevent5 {
    padding: 1rem 1rem 5rem 1rem;
  }
  .iconicevent6 {
    padding: 1rem 1rem 5rem 1rem;
  }
  .year2 {
    width: 97%;
  }
  .syvid {
    height: 72%;
  }
  .syvideo {
    width: 100%;
  }
  .envid {
    height: 72%;
  }
  .syitem {
    padding: 1rem 2rem 1rem 3rem;
  }
  .factoryvid {
    height: 27%
  }
  .sytext {
    width: 100%;
  }
  .sytextcontainer {
    width: 100%;
    padding-top: 65rem;
  }
}
/*----------------------------------------------
1000px About Page
----------------------------------------------*/
@media (max-width: 1000px) {
  .aboutbox {
    padding-top: 1rem;
    padding-bottom: 20rem;
    margin: 0 auto;
    width: 90%;
  }
  .whysynlawn {
    display: inline-block;
    margin-left: -2rem;
  }
  .whysynlawn li {
    line-height: 2.5rem;
  }
  .synpurpose2 {
    display: inline-block;
  }
  .year {
    border-top: .75rem solid #f5f5f5;
    border-bottom: .1rem solid #f5f5f5;
    border-left: .75rem solid #f5f5f5;
    border-right: .75rem solid #f5f5f5;
  }
  .year2 {
    border: 1px solid white;
    width: 88%;
    padding: .5rem;
    margin: -1rem auto .5rem auto;
  }
  .year3 {
    border-top: .75rem solid #f5f5f5;
    border-bottom: .1rem solid #f5f5f5;
    border-left: .75rem solid #f5f5f5;
    border-right: .75rem solid #f5f5f5;
  }
  .year4 {
    border-top: .5rem solid #f5f5f5;
    border-bottom: .75rem solid #f5f5f5;
    border-left: .75rem solid #f5f5f5;
    border-right: .75rem solid #f5f5f5;
  }
}
/*--------------------------------------------
About Page 1000px - Smart Phones
--------------------------------------------*/
@media (max-width: 1000px) {
  .syvideo {
    width: 59%;
  }
  .syvid {
    height: 40%;
  }
  .sytextcontainer {
    padding-top: 44rem;
  }
  .envid {
    height: 40%;
  }
}
/*----------------------------------------------
Pets page
----------------------------------------------*/
.dogimage {
  width: 100%;
  text-align: center;
  background-color: black;
  background-position: left 79px;
  padding: 28rem;
  background-image: url("../images/dogimagedesk.jpg");
  background-size: 100%;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
.landscapeimage {
  background-size: 100%;
  text-align: center;
  background-color: black;
  background-position: left 79px;
  padding: 28rem;
  background-image: url("../images/landscapeimage2.jpg");
  background-attachment: fixed;
  background-repeat: no-repeat;
}
.dogheader {  
  color: white;  
  font-family: "Roboto", sans-serif;
  padding-right: 2rem;
}
.dogbox {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  margin: 0 auto;
  width: 76%;
}
.dogboxarea {
  position: absolute;
  text-align: left;
  width: 34%;
  left: 80px;
  border-radius: 2rem;
  padding-left: 2rem;
  font-family: "Roboto", sans-serif;
  background-color: rgba(0, 0, 0, 0.6);
}
.petbox {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  margin: 0 auto;
  width: 76%;
}
.petboxarea {
  position: absolute;
  text-align: left;
  width: 34%;
  left: 80px;
  border-radius: 2rem;
  padding-left: 2rem;
  font-family: "Roboto", sans-serif;
  background-color: rgba(0, 0, 0, 0.6);
}
.golfboxarea {
  position: absolute;
  text-align: left;
  width: 34%;
  left: 80px;
  border-radius: 2rem;
  padding-left: 2rem;
  font-family: "Roboto", sans-serif;
  background-color: rgba(0, 0, 0, 0.6);
}
.whypets {
  display: grid; 
  grid-template-columns: 50% 50%;
  color: white;
  font-size: 1.25rem;
  font-family: "Roboto", sans-serif;
  margin-bottom: 3rem;
  border-bottom: 1px solid grey;
}
.whypets li {
  list-style: none;
  line-height: 3rem;
}
.whypets1 {
  font-size: 1.1rem;
  font-family: "Roboto", sans-serif;
  margin-top: 0;
  margin-bottom: 3rem;
}
.lifetimewarranty {
  width: 90%;
  margin: 0 auto 3rem auto;
  font-weight: 300;
  font-size: 2.5rem;
  text-align: center;
  color: #90f642;
  font-family: 'Lucida Handwriting Std', sans-serif;
}
.petphotosarea {
  width: 100%;
  padding: 3.5px;
  background-color: rgb(31, 31, 31);
}
.petphotos {
  display: grid; 
  grid-template-columns: 25% 25% 25% 25%;
}
.petphoto {
  width: 97.5%;
  border: 6px solid rgb(31, 31, 31);
}
.petproductsgo {
  font-family: "Roboto", sans-serif;
  font-size: 1.2rem;
  margin: 5rem auto;
  text-align: center;
}
.petproductsgotext {
  color: #90f642;
  font-size: 3rem;
}
.petproductsgotext2 {
  color: white;
  font-size: 1.4rem;
  margin-bottom: 3rem;
}
.pets-go {
  border: 0rem solid #ffffff;
  padding: 0.7rem 0.75rem 0.5rem 0.75rem;
  border-radius: 0.5rem;
  background-color: #669933;
  color: white;
  font-size: 1.2rem;
  margin: .5rem 0 auto 0;
}

/*----------------------------------------------
1000px Pets page
----------------------------------------------*/
@media (max-width: 1000px) {
  .dogimage {
    background-position: center 90px;
    background-image: url("../images/dogimage.jpg");
  }

  .petboxarea {
    width: 100%;
    padding-left: 0;
    left: .25rem;
    text-align: center;
    margin: 2rem auto 0 auto;
  }
  .golfboxarea {
    width: 100%;
    padding-left: 0;
    left: .25rem;
    text-align: center;
    margin: 2rem auto 0 auto;
  }
  .whypets {
    display: inline-block;
    margin-left: -2rem;
  }
  .petphotosarea {
    padding: 0;
  }
  .ggglogo3 {
    width: 70%
  }
  .landscapeimage {
    background-size: cover;
    background-image: url("../images/landscapeimage.jpg");
  }
  .whygggabout {
    margin: 34rem auto 1.5rem auto;
  }
  .whyggg {
    margin: 34rem auto 1.5rem auto;
  }
  .whygggpets {
    margin: 35rem auto 1.5rem auto;
  }
}
@media (max-width:485px) {
  .landscapeimage {
    background-size: auto;
    background-image: url("../images/landscapeimage.jpg");
  }
  .SYNLawnLogo {
    width: 60%;
  }
}

@media (max-width: 700px) {
  .aboutggg {
    background-size: 350%;
    background-position: -150px;
  }
  .whygggabout {
    margin: 3rem auto 1.5rem auto;
  }
}
/*-----------------------------------------
Golf Page
----------------------------------------*/
.golfimage {
  background-image: url("../images/golfphotos/golfimage.jpg");
  background-attachment: fixed;
  background-position: left 80px;
  padding: 28rem;
  background-repeat: none;
  background-size: 100%;
  text-align: center;
  background-repeat: no-repeat;
}

/*--------------------------------------------
Applications Pages 1366px - Large iPad narrow
--------------------------------------------*/
@media (max-width: 1366px) {
  .landscapeimage {
    background-size: 120%;
    padding: 25rem;
  }
  .dogimage {
    padding: 25rem;
  }
  .golfimage {
    padding: 25rem;
  }
  .dogboxarea {
    width: 47%;
    margin: -4rem auto;
  }
  .petboxarea {
    width: 47%;
    margin: -4rem auto;
  }
  .golfboxarea {
    width: 47%;
    margin: -4rem auto;
  }
}
/*--------------------------------------------
Applications Pages 1055px - Large iPad narrow
--------------------------------------------*/
@media (max-width: 1055px) {
  .landscapeimage {
    background-size: 120%;
    padding: 20rem;
  }
  .dogimage {
    padding: 20rem;
  }
  .golfimage {
    padding: 20rem;
  }
  .dogboxarea {
    width: 47%;
    margin: -12rem auto;
  }
  .petboxarea {
    width: 47%;
    margin: -12rem auto;
  }
  .golfboxarea {
    width: 47%;
    margin: -12rem auto;
  }
}
/*--------------------------------------------
Applications Pages 1000px - Smart Phones
--------------------------------------------*/
@media (max-width: 1000px) {
  .dogboxarea {
    width: 100%;
    padding-left: 0;
    left: .25rem;
    text-align: center;
    margin: 22rem auto 0 auto;
  }
  .golfboxarea {
    width: 100%;
    padding-left: 0;
    left: .25rem;
    text-align: center;
    margin: 22rem auto 0 auto;
  }
  .petboxarea {
    width: 100%;
    padding-left: 0;
    left: .25rem;
    text-align: center;
    margin: 22rem auto 0 auto;
  }
}
/*----------------------------------------------
1000px Golf page
----------------------------------------------*/
@media (max-width: 1000px) {
  .golf img {
    display: none;
  }
  .whyggggolf {
    margin: 35rem auto 1.5rem auto;
  }
}
/*-----------------------------------------
Products Page
-----------------------------------------*/
.productscontainer {
  margin-top: 10rem;
}
.SYNLogo1 {
  width: 100%;
  text-align: center;
}
.synprodheader {
  color: #90f642;
  font-size: 3rem;
  text-align: center;
  font-weight: 500;
  padding: 1rem;
  margin: .5rem auto 1.5rem auto;
  font-family: "Roboto", sans-serif;
  text-decoration: underline;
  text-underline-offset: 2rem;
  text-decoration-thickness: .05rem;
}
.synproddesc {
  color: white;
  font-size: 1.6rem;
  text-align: center;
  font-family: "Roboto", sans-serif;
}
.synprodsub {
  margin: 1rem auto 0 auto;
  font-size: 3rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
  color: #90f642;
  background-color: rgb(21, 21, 21);
  width: 65%;
}
.productframes {
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr; 
}
.productframe {
  padding: .5rem;
  margin: 3rem .5rem 3rem .5rem;
  background-color: rgb(21, 21, 21);
}
.productframe2 {
  padding: .5rem;
  margin: -1rem .5rem 3rem .5rem;
  background-color: rgb(21, 21, 21);
}
.productframe img {
  width: 100%;
  border: 1px solid grey;
}
.productframe2 img {
  width: 100%;
  border: 1px solid grey;
}
.prodname {
  font-size: 1.4rem;
}
.products-go {
  border: 0rem solid #ffffff;
  padding: 0.7rem 0.75rem 0.5rem 0.75rem;
  border-radius: 0.5rem;
  background-color: #669933;
  color: white;
  font-size: 1.2rem;
  width: 100%;
}
.productcatalogbutton {
  text-align: center;
  width: 100%;
  margin-top: 3rem;
  margin-bottom: 6rem;
}
.products-go2 {
  border: 0rem solid #ffffff;
  padding: 1.7rem 0.75rem 1.5rem 0.75rem;
  border-radius: 0.5rem;
  background-color: #669933;
  color: white;
  font-size: 1.8rem;
  width: 50%
}
/*-----------------------------------------
1000px Products Page
-----------------------------------------*/
@media (max-width: 1000px) {
  .productscontainer {
    margin-top: 9rem;
  }
  .SYNLogo1 {
    width: 100%;
    text-align: center;
  }
  .synlogo1 img {
    width: 50%;
  }
  .synprodheader {
    text-decoration: none;
  }
  .synprodsub {
    width: 90%;
  }
  .productframes {
    display: inline-block;
  }
  .products-go2 {
    width: 90%;
  }
}
/*----------------------------------------
Catalog Page
----------------------------------------*/
.productscontainer2 {
  margin-top: 10rem;
}
.catalogframes {
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr; 
  margin: 0 5rem 0 5rem;
}
.catalogframe {
  padding: .5rem;
  margin: 3rem .5rem 3rem .5rem;
  background-color: rgb(21, 21, 21);
}
.catalogframe2 {
  padding: .5rem;
  margin: -1rem .5rem 3rem .5rem;
  background-color: rgb(21, 21, 21);
}
.catalogframe img {
  width: 100%;
  border: 1px solid grey;
}
.catalogframe2 img {
  width: 100%;
  border: 1px solid grey;
}
.synproddesc2 {
  color: white;
  font-size: 1.6rem;
  text-align: center;
  margin-top: 3.5rem;
  font-family: "Roboto", sans-serif;
}
.usda img {
  width: 100%;
  margin-top: 2rem;
  margin-left: 9rem;
}
/*-----------------------------------------
1000px Catalog Page
-----------------------------------------*/
@media (max-width: 1000px) {
  .catalogframes {
    display: inline-block;
    width: 100%;
    margin: 0 auto;
  }
  .usda img {
    margin-left: 0;
    margin-bottom: 2rem;
    margin-top: 0;
  }
  .synproddesc2 {
    margin-top: 0;
  }
}
/*------------------------------------------
Gallery Pages
------------------------------------------*/
.galleryframes {
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; 
  margin: 0 5rem 0 5rem;
}
.galleryframe {
  margin: 3rem .5rem 3rem .5rem;
  background-color: rgb(21, 21, 21);
}
.galleryframe2 {
  margin: -2.1rem .5rem 3rem .5rem;
  background-color: rgb(21, 21, 21);
}
.galleryframe img {
  width: 100%;
  height: 14rem;
  border: 1px solid grey;
}
.galleryframe2 img {
  width: 100%;
  height: 14rem;
  border: 1px solid grey;
}
.galleryheader {
  color: #90f642;
  font-size: 3rem;
  text-align: center;
  font-weight: 500;
  padding: 1rem;
  margin: -2.5rem auto 1.5rem auto;
  font-family: "Roboto", sans-serif;
  text-decoration: underline;
  text-underline-offset: 2rem;
  text-decoration-thickness: .05rem;
}
/*--------------------------------------------
Gallery Pages 1366px - Large iPad narrow
--------------------------------------------*/
@media (max-width: 1366px) {
  .galleryframe img {
    height: 11rem;
  }
  .galleryframe2 img {
    height: 11rem;
  }
}
/*--------------------------------------------
Gallery Pages 1055px - Large iPad narrow
--------------------------------------------*/
@media (max-width: 1055px) {
  .galleryframe img {
    height: 8rem;
  }
  .galleryframe2 img {
    height: 8rem;
  }
}
/*----------------------------------------------
1000px Gallery pages
----------------------------------------------*/
@media (max-width: 1000px) {
  .galleryframes {
    display: inline-block;
    width: 60%;
    float: center;
    text-align: right;
  }
  .galleryheader {
    text-decoration: none;
    margin-bottom: 0;
  }
}
/*--------------------------------------------
Gallery Pages 800px - Phone narrow
--------------------------------------------*/
@media (max-width: 1000px) {
  .galleryframes {
    width: 100%;
    Margin: 0;
  }
  .galleryframe img {
    height: 40rem;
  }
  .galleryframe2 img {
    height: 40rem;
  }
  .galleryframe2 {
    margin: -2.1rem .5rem 5rem .5rem;
    background-color: rgb(21, 21, 21);
  }
}
/*--------------------------------------------
Gallery Pages 485px - Phone narrow
--------------------------------------------*/
@media (max-width: 485px) {
  .galleryframes {
    width: 100%;
    Margin: 0;
  }
  .galleryframe img {
    height: 20rem;
  }
  .galleryframe2 img {
    height: 20rem;
  }
  .galleryframe2 {
    margin: -2.1rem .5rem 5rem .5rem;
    background-color: rgb(21, 21, 21);
  }
}
/*-------------------------------------
Phone Button
------------------------------------*/
.phone-header {
  border: 0rem solid #ffffff;
  padding: 0.25rem 0.5rem 0.5rem 0.5rem;
  border-radius: 0.5rem;
  background-color: #669933;
  color: white;
  font-size: 1.2rem;
  margin: auto 1rem auto 2rem;
}
@media (max-width: 1000px) {
  .phone-header {

    text-align: left;
    margin: 0.5rem;
  }
}
  @media (max-width: 700px) {
    .phone-header {
      text-align: left;
      margin: 0.5rem;
    }
}
/*-----------------------------------------
Contact
-----------------------------------------*/
.contactarea {
  text-align: center;
  font-family: "Roboto", sans-serif;
  font-size: 1.5rem;
  width: 50%;
  margin: 7rem auto -7rem auto;
  z-index: 1;
}
.contacttext2 {
  color: #90df30;
  margin-bottom: 3rem;
}
@media (max-width: 1000px) {
  .contactarea {
    margin-top: 10rem;
    width: 100%;
  }
}
/*----------------------------------------
Financing
----------------------------------------*/
.financing {
  width: 18rem;
}
.payovertime {
  margin-bottom: 1rem;
}
/*---------------------------------------
Font Awesome Brands
---------------------------------------*/
.fa-brands {
  color: #90df30;
}
/*---------------------------------------
Blog List Styles
---------------------------------------*/
.bloglist {
  width: 65%;
  background-color: rgb(35, 35, 36);
  margin: 0 auto 1.5rem auto;
  border-radius: 0.5rem;
}
.archive {
  width: 23%;
  float: right;
  color: #58b846;
  font-weight: bold;
  font-family: "Roboto", sans-serif;
  font-size: 1.75rem;
  text-align: center;
  margin-right: .75rem;
}
.archivecontainer {
  width: 73%;
  margin: 0 auto;
}
.archivemobile {
  visibility: hidden;
}
.w3-container {
  padding: 0;
}
.w3-light-green {
  font-size: 1.43rem;
}
.w3-bar-block .w3-bar-item  {
  font-size: 1rem;
}
.bloglistitem {
  background-color: rgb(45, 53, 53);
  width: 75%;
  border-radius: 0.5rem 0 0 0.5rem;
  padding-bottom: 2rem;
}
.mainblogimage {
  text-align: left;
  padding: 2rem 0 2rem 2rem;
}
.mainblogimage img {
  width: 95%;
}
.blogintro {
  margin-bottom: 1rem;
  color: white;
  font-size: 1rem;
  font-family: "Roboto", sans-serif;
}
.blogsig {
  color: white;
  font-size: .9rem;
  font-family: "Roboto", sans-serif;
}
.blogbutton {
  margin-bottom: 1rem;
  margin-top: -1.25rem;
  padding: .25rem .5rem .25rem .5rem;
  font-family: "Roboto", sans-serif;
  border-radius: 0.5rem;
  font-weight: bold;
  float: right;
  background-color: #58b846;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-decoration: none;
  color: #174e22;
  font-size: 18px;
  border-radius: 5px;
  width: 200px;
  height: 40px;
  font-weight: bold;
  border-bottom: 4px solid #179e43;
  transition: 0.3s;
  box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.4);
  background-color: #19d256;
}
.blogbutton:hover {
  box-shadow: 0 0 rgba(0, 0, 0, 0.4);
  border-bottom-width: 2px;
  transform: translateY(2px);
}
.blogdivision {
  height: .25rem;
  background-color: #58b846;
  clear: both;
}
@media (max-width: 1000px) {
  .mainblogimage {
    padding: 1rem 0 1rem 1rem;
  }
  .bloglistitem {
    width: 100%;
    border-radius: 0.5rem;
    display: inline-block; 
  }
  .archive {
    width: 100%;
    display: none;
  }
  .archivemobile {
    color: #58b846;
    font-weight: bold;
    font-family: "Roboto", sans-serif;
    font-size: 1.75rem;
    text-align: center;
    visibility: visible;
  }
  .archivecontainer {
    margin-left: 2rem;  
  }
}
/*---------------------------------------
Blog Post Styles 1366px iPad narrow
---------------------------------------*/
@media (max-width: 1366px) {
  .blogpost {
    width: 73%;
  }
}
/*---------------------------------------
Blog List Styles 1055px iPad narrow
---------------------------------------*/
@media (max-width: 1055px) {
  .bloglist {
    width: 76%;
  }
}
@media (max-width: 1000px) {
  .bloglist {
    width: 95%;
  }
}
/*-------------------------------------
Blog Post Styles
-------------------------------------*/
.blogarea {
  width: 92%;
  margin: 0 auto;
}
.blogtitle {
  margin-bottom: 1rem;
  margin-top: -1rem;
  color: #58b846;
  font-weight: bold;
  font-family: "Roboto", sans-serif;
  font-size: 1.75rem;
}
.blogpost {
  background-color: rgb(45, 53, 53);
  width: 50%;
  margin: 0 auto;
  border-radius: 0.5rem;
  padding-bottom: 2rem;
}
.blogtext {
  margin-bottom: 1rem;
  color: white;
  font-size: 1rem;
  font-family: "Roboto", sans-serif;
}
.blogtext2 {
  margin-bottom: 1rem;
  color: #58b846;
  font-size: 1.25rem;
  font-weight: bold;
  font-family: "Roboto", sans-serif;
}
.blogcontainer {
  margin-top: 5.5rem;
  margin-bottom: 2rem;
}
.blogimage {
  text-align: left;
  padding: 2rem 0 2rem 2rem;
}
.blogimage img {
  width: 96%;
}
.blogimage2 {
  text-align: left;
  padding-bottom: 2rem;
}
.blogimage2 img {
  width: 100%;
}
.blogimage3 {
  text-align: left;
  padding: 0.5rem 0 2rem 2rem;
}
.blogimage3 img {
  width: 96%;
}
@media (max-width: 1000px) {
  .blogpost {
    width: 95%;
  }
  .blogimage {
    width: 100%;
    text-align: center;
    margin: 0 auto;
    padding: 1rem 0 1rem 0;
  }
  .blogimage img {
    width: 90%;
    text-align: center;
    margin: 0 auto;
  }
  .blogtitle {
    margin-top: 0;
  }
  .blogimage2 {
    text-align: left;
    padding-bottom: 2rem;
  }
  .blogimage2 img {
    width: 100%;
  }
  .blogimage3 {
    width: 100%;
    text-align: center;
    margin: 0 auto;
    padding: 1rem 0 1rem 0;
  }
  .blogimage3 img {
    width: 90%;
    text-align: center;
    margin: 0 auto;
  }
}