/* Text Styles */
    p1 {
      font-family: 'roboto', sans-serif;
      color: #272727;
      font-size: 18px;
      font-weight: 300;
    }

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

/* Blank Spaces */
    .blankSpace {
      height: 100px !important;
    }

    .blankSpaceSmallerResponsive {
      height: 70px !important;
    }

    @media only screen and (max-width: 650px) {
      .blankSpaceSmallerResponsive {
      height: 700px !important;
      }
    }

    .blankSpaceSmall {
      height: 40px !important;
    }

    .blankSpaceLargeResponsive {
      height: 150px;
    }

    @media only screen and (max-width: 650px) {
      .blankSpaceLargeResponsive {
      height: 775px !important;
      }
    }

    .blankSpaceSmallResponsive {
      height: 40px !important;
    }

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

/* Navigation Bar Background */
    @media only screen and (min-width: 768px) {
      #navBackground {
        background: #ffffff;
      }
    }

    #navBackground {
      background: #ffffff;
      min-height: 100px;
      }

    @media only screen and (max-width: 575px) {
      #navBackground {
        box-shadow: 0px 10px 20px rgba(0,0,0,0.05);
      }
    }

/* Desktop Navigation Links */
    .navbar {
      margin-left: 8%;
      margin-right: 8%;
    }

    .navigationItem {
      display: none;
    }

    .nav-link p2:hover {
      color: #267302 !important;
    }

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

/* Mobile Navigation */
    .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;
      }
          
    @media only screen and (max-width: 768px) {
      .hamburgerMenu {
        display:block;
      }
    }

    @media only screen and (min-width: 768px) {
      .hamburgerMenu {
        display:none;
      }
    }

    .hamburgerMenu {
      position:absolute;
      top: 35px;
      right: 5%;
      z-index: 2 !important;
      overflow:hidden;
    }

    .hamburger {
      width: 7vw;
      height: 5vw;
    }
      
    .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;
    }

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

    #mobileNavItems a {
      color: black;
    }
  
/* Logo on Mobile Navigation */
    @media only screen and (max-width: 768px) {
      #logo {
        display: block;
      }
    }

    @media only screen and (min-width: 768px) {
      #logo {
        display: none;
      }
    }

    #logo {
      position:absolute;
      top: 35px;
      left: 5%;
      width: 200px;
      height: auto;
      overflow:hidden;
    }

/* Hero Banner Background Image */
    #herobg {
      position: relative;
      width:100vw;
      height:100vh;
      background: url('../images/supportbanner.jpg');
      background-repeat: no-repeat;
      background-position: center top;
      background-size:cover;
      background-attachment: fixed;
      background-color: #f0f0f0;
    }

/* Hero Banner Heading */
    @media only screen and (max-width: 650px) {
      .heroBannerContent {
        margin-left: 5%;
        margin-right: 5%
      }
    }

    #herobg h1 {
      font-family: 'Roboto', sans-serif;
      font-weight: bold;
      font-size: 64px;
      color: #034001;
      text-shadow: 1px 1px  5px #ffffff
    }

/* App Download Buttons */
    #appStoreIcon {
      width: 141px !important;
      height: 42px !important;
      margin-bottom: 3%;
      border-radius: 6px;
      box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
    }

    #appStoreIcon:hover {
      cursor: pointer;
      opacity: .8;
    }

    #googlePlayIcon {
      width: 140px !important;
      height: 42px !important;
      margin-bottom: 3%;
      border-radius: 6px;
      box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
    }

    #googlePlayIcon:hover {
      cursor: pointer;
      opacity: .8;
    }

/* Search Bar */
    .input-group {
      height: 60px !important;
      background-color: rgba(0,0,0,0);
      box-shadow: 10px 10px 20px rgba(0,0,0,0.15);
      border-radius: 0px 5px 5px 0px !important;
    }

    .form-control {
      height: 60px !important;
      background: hsl(0, 0%, 93%);
      border-radius: 5px 0px 0px 5px !important;
    }

    .btn {
      background: #55A603 !important;
      border-radius: 0px 5px 5px 0px !important;
      color: white !important;
      letter-spacing: 1px;
      padding-left: 60px !important;
      padding-right: 60px !important;
    }

    @media only screen and (max-width: 650px)  {
      .btn {
        padding-left: 30px !important;
        padding-right: 30px !important;
      }
    }

    .btn:hover {
      background: #478D01 !important;
    }

/* Support Cards */
    .supportCard {
      width: 80%;
      height: auto;
      padding-top: 15%;
      padding-bottom: 7%;
      padding-left: 0px !important;
      padding-right: 0px !important;
      background: #ffffff;
      box-shadow: 10px 10px 20px rgba(0,0,0,0.15);
      border: solid 1px rgb(206, 206, 206);
      border-radius: 4px;
    }

    .middleCard {
      margin-left: auto;
      margin-right: auto;
    }

    .rightCard {
      margin-left: auto;
    }

    .center {
      text-align: center;
    }

    @media only screen and (max-width: 800px) and (min-width: 600px) {
      .supportCard {
        width: 100% !important
      }
    }

    @media only screen and (max-width: 600px)  {
      .supportCard {
        margin-left: auto !important;
        margin-right: auto;
        width: 60% !important;
        height: 80% !important;
      }
    }

    .supportCard:hover {
      transform: scale(1.02,1.02);
      transition: 1s;
      cursor: pointer;
    }

    .supportCard p2 {
      color: #55A603;
      font-weight: bold;
    }

    @media only screen and (max-width: 850px) and (min-width: 570px) {
      .supportCard p2 {
        display: none
      }
    }

    .supportItem {
      height: 50px;
      width: auto;
      margin-left: auto;
      margin-right: auto;
    }

    @media only screen and (max-width: 850px) {
    .supportItem {
      height: 55px !important;
      width: auto !important;
      }
    }

    @media only screen and (max-width: 800px) and (min-width: 575px) {
      .supportItem {
        height: 40px !important;
        width: auto !important;
      }
    }

/* Body Section */
    #bodySection {
      background: #f0f0f0;
      height: auto;
    }

/* Support Containers */
    .supportContainer {
      border: solid 1px rgb(206, 206, 206);
      padding-left: 7%;
      padding-right: 7%;
      padding-top: 7%;
      padding-bottom: 3%;
      min-height: 250px;
      background: white;
      border-radius: 3px;
    }

  @media only screen and (max-width: 650px)  {
    .supportContainer {
      margin-left: 5%;
      margin-right: 5%;
    }
  }

/* Popular FAQ List */
    .underlineLink {
      text-decoration: underline;
    }

    .underlineLink:hover {
      color: #267302 !important;
      cursor: pointer;
    }

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