@import url('https://fonts.googleapis.com/css?family=Shadows+Into+Light');

html, body{
   width: 100%!important;
   height: 100%!important;
   margin: 0px!important;
   padding: 0px!important;
   overflow-x: hidden;
 }

 .main {
   background-color: #fff;
   width: 100%;
 }

 .grow {
     -webkit-box-flex: 1;
         -ms-flex: 1;
             flex: 1;
 }

 .container{
   margin: 0px!important;
   padding: 0px!important;
 }

.header-text {
  margin: -22% 0 14.8% 5%;
}

.header-text h1 {
  font-family: 'Shadows Into Light', sans-serif;
  font-size: 6vw;
}

.header img {
  margin-top: -15em;
  margin-right: 15em;
  width: 100%;
  height: auto;
}

.navbar {
  width: 100%;
}

.navbar ul {
  margin-left: 68.7%;
  margin-top: -.5em;
  width: 100%;
}

.navbar a {
  display: block;
  text-align: center;
  padding: 1.5em 2em!important;
  font-size: 11pt;
  -webkit-transition: background 1s ease-in-out;
  -o-transition: background 1s ease-in-out;
  transition: background 1s ease-in-out;
  -moz-transition: background .25s ease-in-out;
  -webkit-transition: background .25s ease-in-out;
}

.navbar a:hover {
  background-color: lightgreen;
}

.main  {
  margin-left: 1.5em;
  margin-bottom: 2em;
  margin-top: -.5em;
}

.p-3 {
  margin-left: 5em;
}

.p-3 a {
  text-decoration: none;
}

.blog-primary {
  color: #4c7d4c;
  border-color: #4c7d4c;
  -webkit-transition: background 1s ease-in-out;
  -o-transition: background 1s ease-in-out;
  transition: background 1s ease-in-out;
  -moz-transition: background .25s ease-in-out;
  -webkit-transition: background .25s ease-in-out;
}

.blog-primary:hover {
  background-color: #4c7d4c;
  color: #fff;
}

.blog-post img {
  width: 60%;
  height: auto;
  margin-bottom: 2em;
}

.footer-text {
  margin-left: 12em;
}

.page-footer {
  width: 100%;
  background-color: #b6fcb6;
  padding-top: 40px;

}

.page-footer li {
  list-style: none;
}

.page-footer a {
  color: #000;
  text-decoration: none;
}

.page-footer a:hover {
  opacity: .5;
}

.social {
   margin-left: -40px;
}

form {
  font-family: sans-serif;
  font-size: 12pt;
  color: #000;
  margin-top: 1em;
  padding-bottom: 5em;
}
  form p {
    margin-left: 0;
  }
  form button, form input, form select, form textarea {
    font-family: inherit;
    font-size: 100%;
    width: 35%;
   }
  form form.contact {
    text-align: center;
    margin: 0;
  }
  form .btn {
    margin-top: 8px;
    z-index: 1;
    border: .5px solid #000;
    padding: 10px;
   }
  form .form {
    width: 72%;
    margin-left: auto;
    margin-right: auto;
   }
  form button {
    font-family: 'Open Sans', sans-serif;
    font-weight: 200;
    background-color: #fff;
    -webkit-transition-duration: 0.4s;
    -o-transition-duration: 0.4s;
    transition-duration: 0.4s;
    float: left;
   }
  form button:hover {
    background-color: #4c7d4c;
    color: #fff;
  }
  form input[type=text], form textarea {
    width: 100%;
    padding: 1%;
    border-style: none;
    border-bottom: .5px solid #000;
    border-radius: 1px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-top: 10px;
    margin-bottom: 16px;
  }

.btn:focus, .btn:active, button:focus, button:active {
  outline: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

@media (max-width: 768px) {
    .footer-text {
      margin-left: 1em;
    }

    .nav ul {
      margin-left: 0;
      margin-top: 1em;
    }

    .blog-post img {
      width: 94%!important;
    }

    .header-text {
      margin-top: -13em;
      margin-bottom: 10em;
    }


 }

 @media (max-width: 992px) {
    .nav ul {
      margin-left: 0!important;
      margin-top: .5em;
    }

    .footer-text {
      margin-left: 8em;
    }

    .blog-post img {
      width: 100%;
      height: auto;
    }

    .p-3 {
      margin: 0;
    }

    .header img {
      margin: 0;
    }

 }


 @media (max-width: 1120px){
   .nav ul {
     margin-left: 6%;
   }

   .p-3 {
     margin: 0;
   }

 }

 @media (max-width: 1230px){
     .nav ul {
        margin-left: 64%;
     }

  }
