body {
  font-family: 'Poppins', sans-serif;
  color:#8D918D;
  font-size: 16px;
  line-height: 1.5em;
  margin: 0;
}

h1, h3{
  font-family: 'Open Sans', sans-serif;
  color: #989898;
}


p, h2, h3 {
  margin-bottom: 20px;
  margin-top: 0px;
}

h1{
  margin-bottom: 40px;
  line-height: 1.1em;
}

h3{
  font-size: 1.33em;
}

a{
  color: #8D918D;
  text-decoration: none;
  transition: .4s;
}


#contact-homepage p a{
  border-bottom: 1px solid #080C0D;
  font-weight: bold;
}

#contact-homepage p a:hover{
  color: #080C0D;
}

#customers-homepage{
  display: none;
}

/*** DESKTOP STYLES ***/
@media (min-width: 1100px) {

  .container {
    width: 1100px;
    margin:0 auto;
  }

  .content{
    padding: 60px 0;
  }

  /***HEADER DESKTOP STYLES***/

  #logo-bar{
    width: 100%;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0 0;
    text-align: center;
  }

  #logo-bar img{
/*    margin-bottom: 10px;*/
    width: 150px;
    height: auto;
  }

  a#header-tel{
    font-size: .9em;
    color:#8D918D;
    margin-bottom: 10px;
    border-bottom: 1px solid transparent;
  }

  a#header-tel:hover{
   border-bottom: 1px solid #8D918D;
  }

  #header-container{
    background-color: #8D918D;
  }

  #header-container #nav{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 25px 0px;
  }

  #myTopnav a{
    color: white;
    transition: background-color .4s;
    padding: 8px 12px;
    margin: 0 20px;
  }

  #myTopnav a:hover{
    background-color: white;
    color: #8D918D;
  }

  #myTopnav .icon{
    display:none;
  }

/*** HOMEPAGE DESKTOP STYLES***/
  
  #hero{
    background-color: #cdcdcd;
    padding:60px 0 65px;
    width: 100%;
    color: white;
    background: url(images/truck-hero.jpg) no-repeat 50% 49%;
    background-size: cover;
  }

  #hero .container{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 520px;
  }

  img.tree-background{
    z-index: 1;
    position: absolute;
    /*top: 200px;*/
    width: 915px;
  }

  #hero-text{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  #hero-text h1{
    color: white;
    font-size: 4em;
    line-height: 1em;
    font-weight: 900;
    display: none;
  }

  #hero-text p{
    padding-left: 20px;
    font-size: 1.5em;
    margin-bottom: 40px;
  }

  a.view-more{
    color: #fff;
    font-weight: bold;
    font-size: 1.25em;
    background-color: #8D918D;
    transition: .4s;
    border: 2px solid white;
    padding: 15px 25px;
    text-transform: uppercase;
    display: block;
    min-width: 540px;
    text-align: center;
    margin-bottom: 100px;
  }

  a.view-more:hover{
    color: #8D918D;
    background-color: #fff;
    border: 2px solid #8D918D;
  }

  #hero-img{
    margin-left: 20px;
    width: 46%;
    z-index: 2;
  }

  #hero-img img{
    width: 600px;
    height: auto;
    border: 20px solid white;
  }

  #services-homepage{
    display: flex;
    flex-flow: column;
    align-items: center;
    padding-top: 80px;
    padding-bottom: 0px;
    color: #080C0D;
/*    font-size: 1.15em;*/
  }

  #services-homepage .container{
    width: 850px;
    text-align: justify;
    padding-bottom: 60px;
/*    border-bottom: 2px solid #8D918D;*/
  }

  #services-homepage p{
    text-align: center;
/*    font-weight: bold;*/
    font-size: 1.15em;
  }

  .service{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 1.5em;
    height: 280px;
    width: 280px;
    text-align: left;
    padding: 20px;
  }

  a.service-link {
    box-shadow: 1px 1px 4px #989898;
    transition: .4s;
  }

  a.service-link:hover{
    background-color: #F5F5F5;
    box-shadow:  4px 4px 10px #8D918D;
  }

  .service h3{
    text-transform: uppercase;
    color: #8D918D;
    margin-bottom: 0px;
    text-align: center;
  }

  .service img{
    width: 175px;
    height: auto;
    margin-bottom: 20px;
  }

  .service ul{
    margin-left: 40px;
    margin-top: 0px;
  }

  #about-margin-div{
    display: none;
  }

  #about-homepage .container{
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #about-homepage h1{
    color: #8D918D;
    text-transform: uppercase;
  }

  #about-homepage p{
    color: #989898;
    text-align: center;
    width: 65%;
  }

  #about-homepage-black{
    background-color: #8D918D;
    padding: 0 100px;
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 160px;
    height: 470px;
  }

  #about-homepage-text{
    align-self: center;
    margin-right: 80px;
    display: flex;
    flex-direction: column;
  }

  #about-homepage-text h3{
    color: white;
  }

  #about-homepage-text p{
    color: white;
    text-align: left;
    width: 100%;
  }

  #about-homepage-text a.view-more{
    width: 90px;
    text-align: center;
  }  

  #about-homepage-text a.view-more:hover{
    background-color: #989898;
  }

  #about-homepage-img img{
    width: 500px;
    height: auto;
    margin-top: -120px;
    border: 20px solid white;
  }

  #customers-homepage{
    padding-bottom: 80px;
  }

  #customers-homepage h2{
    text-transform: uppercase;
    text-align: center;
    color: #8D918D;
  }

  #customers-homepage p{
    text-align: center;
    color: #989898;
  }

  #customers-container{
    display: flex;
    justify-content: space-evenly;
    align-items: flex-start;
    margin-top: 60px;
  }

  #customers-container .customers-border{
    width: 1px;
    height: 600px;
    align-self: center;
    background-color: #989898;
  }

  .customer-individual{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 350px;
    margin: 0 40px;
  }

  .customer-individual .p-quote{
    font-size: 4em;
    font-weight: bold;
    color: #8D918D !important;
    font-family: 'Playfair Display', serif;
  }

  .customer-individual .p-bold{
    font-weight: bold;
    color: #8D918D !important;
    font-size: .8em;
    text-align: left !important;
  }

  .customer-individual img{
    margin-bottom: 40px;
  }

  /***CONTACT DESKTOP STYLES***/

  #contact-homepage .container{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: flex-start;
  }

  #contact-homepage h1{
    border-bottom: none;
    width: 100%;
  }

  #contact-text{
    width: 460px;
  }

  #contact-text iframe{
    width: 460px;
    height: 300px;
    margin-top:20px;
  }

  .contact-form{
    display: flex;
    flex-direction: column;
    width:460px;
  }

  .contact-form input,
  .contact-form textarea{
    font-family: 'Poppins', sans-serif;
    color:#080C0D;
    border: 1px solid #8D918D;
    padding:10px;
    margin-bottom: 20px;
  }

  .contact-form textarea{
    height: 150px;
  }

  .contact-form #submit{
    background-color: #8D918D;
    border:2px solid #8D918D;
    color: white;
    font-weight: bold;
    width: 40%;
    transition: .4s;
    align-self: flex-end;
  }

  .contact-form #submit:hover{
    background-color: white;
    color: #8D918D;
    cursor: pointer;
  }


  /***DEFENSIBLE SPACE DEKSTOP STYLES***/

  .subpage h1{
    color: #8D918D;
    padding-bottom: 10px;
    margin-bottom:40px;
  }

  .full-width-img{
    width: 100%;
    margin-bottom: 60px;
  }

  .full-width-img img{
    width: 100%;
    height: auto;
  }

  .subpage-img{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: flex-start;
  }

  .subpage-img img{
    width: 520px;
    height: auto;
    margin-bottom: 60px;
  }

  .subpage ul{
    margin-left: 40px;
    margin-bottom: 60px;
  }

  .subpage ul li{
    line-height: 1.4em;
  }

  /*TREE AND BRUSH REMOVAL DESKTOP STYLES*/
  
  .tree-brush-img{
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    justify-content: flex-start;
    height: 2220px;
    margin-top:40px;
  }

  .tree-brush-img img{
    margin:0 20px 40px;
  }

  /*** FOOTER DESKTOP STYLES***/

  footer{
    width: 100%;
    background-color: #8D918D;
    padding-top: 40px;
  }

  footer .container{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    color: #fff;
  }

  .footer-col{
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    width: 21%;
  }

  .footer-col1{
    margin-right: 40px;
    align-items: center;
  }

  .footer-col p{
    font-size: .9em;
  }

  .footer-col h3{
    color: white;
    margin-top:40px;
  }

  .footer-col p a{
    color: #fff;
    transition: .4s;
    border-bottom: 1px solid transparent;
  }

  .footer-col p a:hover{
    color: white;
    border-bottom: 1px solid white;
  }

  /*.footer-col2{
    align-self: center;
  }*/

  a.bdg{
    color: white;
    border-bottom: 1px solid #8D918D;
    transition: border-bottom .4s;
  }

  a.bdg:hover{
    border-bottom: 1px solid white;
  }

  .footer-col img{
    margin-bottom: 10px;
    width: 150px;
    height: auto;
  }

  #footer-social{
    display: flex;
    justify-content: space-around;
  }

  #footer-social i{
    color: #989898;
    padding: 5px;
    height: 15px;
    width: 15px;
    text-align: center;
    border-radius: 50%;
    border: 1px solid #989898;
    transition: background-color .4s;
    margin: 0 5px;
  }

  #footer-social i:hover{
    background-color: white;
    color: #8D918D;
  }

  #footer-copyright{
    width: 80%;
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #989898;
    margin-top: 20px;
    font-size: .9em;
  }


}



/*** MOBILE STYLES ***/
@media screen and (max-width : 1099px){
  
   .container {
        width:100%;
        margin: 0 auto;
    }

    .content{
      padding: 60px 20px;
    }

  /*** HEADER MOBILE STYLES ***/

  #logo-bar{
    width: 100%;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0 0;
    text-align: center;
  }

  #logo-bar img{
    width: 150px;
    height: auto;
  }

 a#header-tel{
    font-size: .9em;
    color:#8D918D;
    margin-bottom: 10px;
    border-bottom: 1px solid transparent;
  }

 a#header-tel:hover{
   border-bottom: 1px solid #8D918D;
  }

  #header-container{
    padding:15px 20px 0;
    background-color:#8D918D;
    min-height:45px;
  }

  /* Links inside the navbar */
  .topnav a { 
    float: left;
    font-size: 16px;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }

  /* Add a background color to navbar links on hover */
  .topnav a:hover{
    background-color: white;
    color:#8D918D;
  }

  /* When the screen is less than 1099 pixels wide, hide all links. 
  Show the link that should open and close the topnav (.icon) */
  .topnav a{
    display:none;
  }

  .topnav a.icon {
    display: block;
    font-size:24px;
    float:right;
    color:#fff;
    padding:5px;
  }

  /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. 
  This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
  .topnav.responsive {
    position: relative; 
    clear:both;
    padding-top: 40px;
    padding-bottom:40px;
    margin-left:20px;
  }
    .topnav.responsive a.icon {
      position: absolute;
      right: 0;
      top: 0px;
      border-bottom: none;
    }

    .topnav a.icon:hover {
      background-color: #8D918D !important;
      color: white !important;
    }

    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
      border-bottom: 1px solid white;
    }
    .topnav.responsive .dropdown {float: none;}
    .topnav.responsive .dropdown-content {position: relative;}
    .topnav.responsive .dropdown .dropbtn {
      display: block;
      /*width: 100%;*/
      text-align: left;
    }

    /*** HOMEPAGE MOBILE STYLES***/
  
  #hero{
    background-color: #cdcdcd;
    color: white;
    padding: 0 0 60px;
    height: 400px;
    background: url(images/truck-hero.jpg) no-repeat center;
    background-size: cover;
  }

  #hero .container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /*background-image: url('images/cat2.jpg');*/
    padding: 40px 0;
    height: 400px;
  }

  img.tree-background{
   display: none;
  }

  #hero-text{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 20px;
  }

  #hero-text h1{
    color: white;
    font-size: 2em;
    line-height: 1em;
    font-weight: 900;
    display: none;
  }

  #hero-text p{
    font-size: 1.25em;
    margin-bottom: 40px;
  }

 a.view-more{
    color: #fff;
    font-weight: bold;
    background-color: #8D918D;
    transition: background-color .4s;
    border: 2px solid white;
    padding: 10px 75px;
    text-transform: uppercase;
    margin-bottom: 20px;
  }

  a.view-more:hover{
    color: #8D918D;
    background-color: #fff;
    border: 2px solid #8D918D;
  }

  #hero-img{
    text-align: center;
    padding:  0 20px;
  }

  #hero-img img{
    width: 90%;
    max-width: 450px;
    height: auto;
    margin-top: 25px;
    border: 15px solid white;;
  }

  #services-homepage{
    display: flex;
    flex-flow: column;
    align-items: center;
    padding-top: 40px;
    padding-bottom: 20px;
    color: #080C0D;
  }

  #services-homepage .container{
    padding-bottom: 40px;
/*    border-bottom: 2px solid #8D918D;*/
  }

  #services-homepage p{
    line-height: 1.15em;
/*    font-weight: bold;*/
    text-align: center;
  }

  a.service-link {
    box-shadow: 1px 1px 4px #989898;
    transition: .4s;
    margin-bottom: 80px;
  }

  a.service-link:hover{
    background-color: #F5F5F5;
    box-shadow:  4px 4px 10px #8D918D;
  }

  .service{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 280px;
    padding: 20px;
    border-bottom: 1px solid #989898;
  }

  .service h3{
    text-transform: uppercase;
    color: #8D918D;
  }

  .service img{
    margin-bottom: 40px;
  }

  .service ul{
    text-align: left;
    margin-top: 0px;
    line-height: 1.5em;
  }

  #about-margin-div{
    margin-top: 60px;
  }

  #about-homepage{
    padding: 0 0 60px;
  }

  #about-homepage .container{
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #about-homepage h1{
    color: #8D918D;
    text-transform: uppercase;
    padding: 0 20px;
  }

  #about-homepage p{
    color: #989898;
    padding: 0 25px;
  }

  #about-homepage-black{
    background-color: #8D918D;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    margin-top: 160px;
    padding: 40px 0 60px;
  }

  #about-homepage-text{
    align-self: center;
    text-align: center;
    padding:  0 20px;
  }

  #about-homepage-text h3{
    color: white;
  }

  #about-homepage-text p{
    color: white;
    margin-bottom: 40px;
    text-align: center;
  }

  #about-homepage-text a.view-more{
    border: 2px solid #8D918D;
  }

  #about-homepage-text a.view-more:hover{
    background-color: #989898;
  }

  #about-homepage-img{
    display: flex;
    justify-content: center;
    margin-top: -160px;
  }

  #about-homepage-img img{
    width: 75%;
    height: auto;
    max-width: 450px;
    margin-bottom: 60px;
    border: 20px solid white;
  }

  #customers-homepage{
    padding-bottom: 20px;
    padding-top: 20px;
  }

  #customers-homepage h2{
    text-transform: uppercase;
    text-align: center;
    color: #8D918D;
    line-height: 1.25em;
  }

  #customers-homepage p{
    text-align: center;
    color: #989898;
  }

  #customers-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 60px;
  }

  .customer-individual{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 315px;
    margin-bottom: 60px;
  }

  .customers-border{
    height: 1px;
    background-color: #989898;
    width: 100%;
    margin-bottom: 60px;
  }

  .customer-individual .p-quote{
    font-size: 4em;
    font-weight: bold;
    color: #8D918D !important;
    font-family: 'Playfair Display', serif;
  }

  .customer-individual .p-bold{
    font-weight: bold;
    color: #8D918D !important;
    text-align: left !important;
    font-size: .8em;
  }

  .customer-individual img{
    margin-bottom: 40px;
  }

  /***CONTACT MOBILE STYLES***/

  #contact-homepage .container{
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #contact-text{
    width: 100%;
    border-bottom: 1px solid #8D918D;
    padding-bottom: 60px;
    margin-bottom: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #contact-text p{
    width: 215px;
  }

  #contact-text iframe{
    width: 320px;
    height: 240px;
    margin-top:20px;
  }

  .contact-form{
    display: flex;
    flex-direction: column;
    width:100%;
    max-width: 400px;
  }

  .contact-form input,
  .contact-form textarea{
    font-family: 'Poppins', sans-serif;
    color:#8D918D;
    border: 1px solid #8D918D;
    padding:10px;
    margin-bottom: 20px;
  }

  .contact-form textarea{
    height: 100px;
  }

  .contact-form #submit{
    background-color: #8D918D;
    border:2px solid #8D918D;
    color: white;
    font-weight: bold;
    width: 40%;
    transition: .4s;
    align-self: flex-end;
  }

  .contact-form #submit:hover{
    background-color: white;
    color: #8D918D;
    cursor: pointer;
  }

  /***EXCAVATING & GRADING MOBILE STYLES***/

  .subpage h1{
    color: #8D918D;
    margin-top: 0px;
    margin-bottom:60px;
    text-align: center;
  }

  .full-width-img{
    width: 100%;
    margin: 40px 0;
  }

  .full-width-img img{
    width: 100%;
    height: auto;
  }

  .subpage-img{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    align-items: flex-start;
  }

  .subpage-img img{
    width: 100%;
    max-width: 450px;
    height: auto;
    margin-bottom: 40px;
  }

  .subpage ul{
    margin-left: 20px;
    margin-bottom: 60px;
  }

  .subpage ul li{
    line-height: 1.4em;
  }


  /*** FOOTER DESKTOP STYLES***/

  footer{
    background-color: #8D918D;
    padding: 60px 20px 0px;
  }

  footer .container{
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
  }

  .footer-col{
    display: flex;
    flex-flow: column;
    align-items: center;
    margin-bottom: 40px;
    text-align: center;
  }

  .footer-col1{
  }

  .footer-col p{
    font-size: .9em;
  }

  .footer-col h3{
    color: white;
  }

  .footer-col p a{
    color: #fff;
    border-bottom: 1px solid transparent;
    transition: .4s;
  }

  .footer-col p a:hover{
    color: white;
    border-bottom: 1px solid white;
  }

  a.bdg{
    color: white;
    border-bottom: 1px solid #8D918D;
    transition: border-bottom .4s;
  }

  a.bdg:hover{
    border-bottom: 1px solid white;
  }

  .footer-col img{
    margin-bottom: 20px;
    width: 150px;
    height: auto;
  }

  #footer-social{
    display: flex;
    justify-content: space-around;
  }

  #footer-social i{
    color: #989898;
    padding: 5px;
    height: 15px;
    width: 15px;
    text-align: center;
    border-radius: 50%;
    border: 1px solid #989898;
    transition: background-color .4s;
    margin: 0 5px;
  }

  #footer-social i:hover{
    background-color: white;
    color: #8D918D;
  }

  #footer-copyright{
    font-size: .9em;
    width: 100%;
    border-top: 1px solid white;
    padding-top: 20px;
    text-align: center;
  }



}