/* Text Styles */
    .centeredText {
      text-align: center;
    }

    h1 {
      font-family: 'Roboto', sans-serif;
      font-weight: bold;
      font-size: 64px;
    }

    h2 {
      font-family: 'Roboto', sans-serif;
      font-weight: bold !important;
    }

    h5 {
      font-size: 24px !important;
    }

    p1 {
      font-family: 'roboto', sans-serif;
      font-size: 18px;
      font-weight: 300;
    }

    p2 {
      font-size: 20px;
      color: #022601;
      font-family: 'Roboto', sans-serif;
      font-weight: 400;
    }

    p3 {
      font-size: 24px;
      font-family: 'Roboto', sans-serif;
      font-weight: bold;
    }

    p4 {
      font-size: 36px;
      color: #272727;
      font-family: 'Roboto', sans-serif;
      font-weight: 300;
    }

    .greenOnWhite{color: #55A603;
      font-weight: bold;
      text-shadow: 1px 1px  5px #ffffff;
    }

      @media only screen and (max-width: 900px) {
        .mobileDisappear {
          display: none;
          }
        }

/* Responsive Blank Spaces */
      .blankSpace {height: 100px}

      @media only screen and (max-width: 575px) {
        .blankSpace {
          height: 100px !important;
        }
      }

      @media only screen and (max-width: 980px) and (min-width: 575px) {
        .blankSpaceSmallResponsive {
          height: 55px !important;
          }
        }

      @media only screen and (max-width: 950px) {
        .blankSpaceSmallResponsive {
          height: 35px !important;
        }
      }

        .blankSpaceSmallestResponsive {
          height: 35px !important;
          }

      @media only screen and (max-width: 600px) {
        .blankSpaceSmallestResponsive {
          height: 25px !important;
        }
      }

/* Hero banner background image */
      #herobg {
        position: relative;
        width:100vw;
        height:600px;
        background: url('../images/blogbanner.jpg');
        background-repeat: no-repeat;
        background-position: center;
        background-size:cover;
        background-attachment: fixed;
        background-color: #ffffff;
        padding-bottom: 5%;
      }

/* Smaller Logo on Mobile */
      #logo {
        position:absolute;
        top: 35px;
        left: 5%;
        width: 200px;
        height: auto;
        overflow:hidden;
      }

/* Display Smaller Logo at Breakpoint */
      @media only screen and (max-width: 768px) {
        #logo {
          display:block;
        }
      }
      
      @media only screen and (min-width: 768px) {
        #logo {
          display:none;
        }
      }

/* Desktop navigation */
      .navbar {
        margin-left: 8%;
        margin-right: 8%;
      }
      
      .navigationItem {
        display: none;
      }

      #navBackground {
        background: rgba(255,255,255,0.95);
        min-height: 100px;
        }

      @media only screen and (max-width: 575px) {
        #navBackground {
            box-shadow: 0px 10px 20px rgba(0,0,0,0.05);
            }
        }
        
      .nav-link p2:hover {
        color: #267302 !important;
      }

      .selected {
        width: 80%;
        height: 1px;
        margin-left: auto;
        margin-right: auto;
        background: #267302;
      }

/* Mobile Navigation Dropdown */
      .mobileNav {
        position: fixed;
        top: 0;
        right: 0;
        background-color: white;
        padding: 0px;
        width: 100%;
        height: 0vh;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all .5s ease;
        overflow: hidden;
        z-index: 1;
      }

      #mobileNavItems {
        display: flex;
        flex-direction: column;
        opacity: 0;
        color: black;
        transition: all .5s ease;
        text-align: center;
      }

      #mobileNavItems a {
        color: black;
      }

/* Mobile Hamburger Menu */
      .hamburgerMenu {
        position:absolute;
        top: 35px;
        right: 5%;
        z-index: 2 !important;
        overflow:hidden;
      }
      
      .hamburger {
        width: 30px;
        height: 20px;
      }

      .open {
        background: url(../images/Hamburger.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }
      
      .closed {
        background: url(../images/Close.png);
        background-repeat: no-repeat;
        background-size: 80% 105%;
      }
      
      .active {
        display: block;
      }

/* Display Mobile Hamburger Menu at Breakpoint */
      @media only screen and (max-width: 768px) {
        .hamburgerMenu {
          display:block;
          }
        }
      
      @media only screen and (min-width: 768px) {
        .hamburgerMenu {
          display:none;
          }
        }

/* Blog Post Responsiveness */
      @media only screen and (max-width: 575px)  {
        .responsivePost {
          margin-left: 5% !important;
          margin-right: 5% !important;}
        }

/* Featured Blog Post */
      #featuredBlogPost {
        background: white;
        height: auto;
        width: 100%;
        box-shadow: 10px 10px 20px rgba(0,0,0,0.25);
        padding-left: 10%;
        padding-right: 10%;
        border: solid 5px #55A603;
        overflow: hidden;
      }

      #featuredBlogPost:hover {
        transform:scale(1.01,1.01);
        transition: 1s;
      }

      #featuredBlogPost p1 {
        display: inline-block !important;
      }

      #featuredBlogPost {
        text-align: center;
      }

/* Smaller Blog Post */
      .blogPostSmall {
        background: white;
        border: solid 2px #55A603;
        height: auto;
        width: 100%;
        padding-left: 10%;
        padding-right: 10%;
        overflow: hidden;
      }

      .blogPostSmall p1 {
        display: inline-block !important;
      }

/* Larger Blog Post */
      .blogPostLarge {
        background: white;
        border: solid 2px #55A603;
        height: auto;
        width: 100%;
        overflow: hidden;
      }

      .blogPostLarge p1 {
        display: inline-block !important;
      }

      .blogPostLargeContent {
        padding-left: 10%;
        padding-right: 10%;
      }

      .blue {
        border: solid 2px #527AE2  !important;
      }

/* Search Bar */
      .input-group {
        height: 50px !important;
      }

      .form-control {
        height: 50px !important;
        background: #eeeeee !important;
        font-size: 18px !important;
      }

      .rounder {
        border-radius: 5px 0px 0px 5px !important;
      }

      .textalter {
        font-size: 18px !important;
        font-weight: 300 !important;
      }

/* Filters Dropdown */
      #dropdownMenuButton {background: #eeeeee !important;
        border: solid 1px #ced4d9 !important;
        width: 100%;
        height: 50px !important;
        color: #6c757d;
        text-align: left !important;
        border-radius: 5px 5px 5px 5px !important;
      }

      .dropdown-menu {
        width: 100%;
      }

      .btn-lg p1 {
        color: #6c757d;
        display: inline-block;
        font-weight: 400;
      }

      .dropdown-toggle::after {
        display: inline-block;
        width: 0;
        height: 0;
        margin-left: .3em;
        vertical-align: middle;
        content: "";
        border-top: .3em solid;
        border-right: .3em solid transparent;
        border-left: .3em solid transparent;
        position: absolute;
        left: 88%;
        margin-top: 12px;
        background: #EEEEEE;
      }

      @media only screen and (max-width: 600px) {
        .dropdown-toggle::after {
          left: 88% !important;
        }
      }

      @media only screen and (max-width: 800px) and (min-width: 570px)  {
        .dropdown-toggle::after {
          display:none !important;
        }
      }

      .dropdown button {
        overflow: hidden;
      }

/* Search Button */
      .search {
        border-right: solid 1px #ced4d9 !important;
        border-top: solid 1px #ced4d9 !important;
        border-bottom: solid 1px #ced4d9 !important;
        border-left: none !important;
        background: white !important;
        border-radius: 0px 5px 5px 0px !important;
        color: #55A603 !important;
        padding-left: 40px !important;
        padding-right: 40px !important;
        letter-spacing: 1px;
      }

      .search:hover {
        border: solid 1px #55A603 !important;
        background: #55A603 !important;
        border-radius: 0px 5px 5px 0px !important;
        color: #ffffff!important;
        padding-left: 40px !important;
        padding-right: 40px !important;
        opacity: .8;
      }

/* Read More Button */
      .readMore {
        background: #55A603 !important;
        border-radius: 50px 50px 50px 50px !important;
        color: white !important;
        padding-left: 30px !important;
        padding-right: 30px !important;
        letter-spacing: 1px;
      }

      .readMore:hover {
        opacity:.8;
      }

      .readMore-Blue {
        background: #527AE2 !important;
        border-radius: 50px 50px 50px 50px !important;
        color: white !important;
        padding-left: 30px !important;
        padding-right: 30px !important;
        letter-spacing: 1px;
      }

      .readMore-Blue:hover {
        opacity:.8;
      }


/* Bottom Page Navigation */
      .separatorLine {
        height: 1px;
        width: 100%;
        background:#cecece
      }

      #pageNav {
        text-align: center;
      }

      .pageNumber:hover {
        color: #247000 !important;
        cursor: pointer;
      }

      .bi:hover {
        fill: #247000;
        cursor: pointer !important;
      }

      .selectedLink {
        font-weight: bold;
      }

/* Footer */
      #footer {
        background: #034001;
        height: 100%;
        text-align: center;
      }
        
      #footer p1 {
        color: white;
        opacity: .6;
      }

/* Footer Social Media Icons */ 
      #footer a {
        font-size: 40px !important;
      }
        
      #footer a:hover {
        color: white;
        text-decoration: none;
      }
        
      .fa {
        padding: 20px;
        width: 100px;
        font-size: 50px;
        text-align: center;
        text-decoration: none;
        color: white;
        }
        
      #firsticon {
        padding-left: none !important;
        padding-right: 20px;
      }
          
      .fa:hover {
        opacity: 0.8;
        }