/*-- -------------------------- -->
<---           Hero             -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0em) {
  #hero {
    font-family: 'Roboto', 'Arial', sans-serif;
    /* Centers button */
    text-align: center;
    /* changes on tablet */
    padding: 0 1rem;
    padding-bottom: 6.25rem;
    position: relative;
    z-index: 1;
    /* prevents overflow from the lines extending past the screen width */
    overflow: hidden;
  }
  #hero .cs-picture {
    /* Background Image */
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
  }
  #hero .cs-picture:before {
    /* Black Color Overlay */
    content: '';
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .7;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: 1;
    /* prevents the cursor from interacting with it */
    pointer-events: none;
  }
  #hero .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* Makes image act like a background-image */
    object-fit: cover;
  }
  #hero .cs-container {
    width: 100%;
    max-width: 80em;
    /* we put the padding top and bottom on the container instead of #Hero so the pseudo element lines go to the top and bottom of the section */
    /* 144px - 280px - leaving extra space for the navigation */
    /* changes on tablet */
    padding: clamp(9em, 25.95vw, 17.5em) 0;
    margin: auto;
    position: relative;
  }
  #hero .cs-container:before {
    /* Left Line */
    content: '';
    width: 1px;
    height: 100%;
    background: -moz-linear-gradient(top, rgba(250, 251, 252, 0.5) 0%, rgba(250, 251, 252, 0) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(250, 251, 252, 0.5) 0%, rgba(250, 251, 252, 0) 100%);
    /* Chrome10-25,Safari5.1-6 */
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
  }
  #hero .cs-flex-group {
    /* 60px - 220px */
    margin-bottom: clamp(3.75em, 15.5vw, 13.75em);
    margin: auto;
    width: 80vw;
    /* 464px - 562px */
    max-width: clamp(29em, 60vw, 35.125em);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    box-sizing: border-box;
  }
  #hero .cs-topper {
    /* 13px - 16px */
    font-size: clamp(0.8125rem, 1.6vw, 1rem);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: .1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 1rem;
    display: block;
  }
  #hero .cs-title {
    /* 39px - 61px */
    font-size: clamp(2.4375rem, 6.4vw, 3.8125rem);
    font-weight: 900;
    line-height: 1.2em;
    text-align: center;
    width: 100%;
    /* 32px - 40px */
    margin: 0 auto clamp(2rem, 4vw, 2.5rem) 0;
    color: var(--bodyTextColorWhite);
    position: relative;
  }
  #hero .cs-text {
    /* 16px - 20px */
    font-size: clamp(1rem, 1.95vw, 1.25rem);
    line-height: 1.5em;
    text-align: center;
    width: 100%;
    /* 32px - 40px */
    margin: 0 auto clamp(2rem, 4vw, 2.5rem) 0;
    /* 40px - 48px */
    margin-bottom: clamp(2.5rem, 4vw, 3rem);
    color: var(--bodyTextColorWhite);
  }
  #hero .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875em, 5.5vw, 3.5em);
    width: 11.25rem;
    text-decoration: none;
    font-weight: 700;
    margin: 0 0.5rem 1rem 0.5rem;
    color: #fff;
    padding: 0;
    background-color: var(--accent);
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: color .3s;
  }
  #hero .cs-button-solid:before {
    content: '';
    position: absolute;
    display: block;
    height: 100%;
    width: 0%;
    background: var(--accentHover);
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width .3s;
  }
  #hero .cs-button-solid:hover {
    color: var(--bodyTextColorWhite);
  }
  #hero .cs-button-solid:hover:before {
    width: 100%;
  }
  #hero .cs-button-transparent {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875em, 5.5vw, 3.5em);
    width: 11.25rem;
    /* 46px - 56px */
    height: clamp(2.875em, 5.5vw, 3.5em);
    text-decoration: none;
    font-weight: 700;
    margin: 0 0.5rem;
    color: #fff;
    padding: 0;
    background-color: transparent;
    border: 1px solid var(--bodyTextColorWhite);
    box-sizing: border-box;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
  }
  #hero .cs-button-transparent:before {
    content: '';
    position: absolute;
    display: block;
    background: var(--primaryDark);
    opacity: 1;
    /* so it sits on top of the border */
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    z-index: -1;
    transform-origin: left;
    /* this is what creates the grow affect on hover */
    transform: scaleX(0);
    transition: transform .3s;
  }
  #hero .cs-button-transparent:hover:before {
    transform: scaleX(1);
  }
  #hero .cs-button-transparent .cs-img {
    display: block;
    margin-right: 0.75rem;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48em) {
  #hero {
    /* 32px - 40px */
    padding: 0 clamp(2em, 5vw, 2.5em);
  }
  #hero .cs-container {
    padding: clamp(7em, 27.95vw, 17.5em) 0 clamp(9em, 30.95vw, 23.5em) 0;
  }
  #hero .cs-container:after {
    /* Right Line */
    content: '';
    width: 1px;
    height: 100%;
    background: -moz-linear-gradient(top, rgba(250, 251, 252, 0) 0%, rgba(250, 251, 252, 0.5) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(250, 251, 252, 0) 0%, rgba(250, 251, 252, 0.5) 100%);
    /* Chrome10-25,Safari5.1-6 */
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    right: 0;
  }
  #hero .cs-button-solid {
    margin-bottom: 0;
    margin-right: 1.25rem;
  }
}
/* Desktop Parallax Effect - 1300px */
@media only screen and (min-width: 81.25em) {
  #hero {
    background: url("/images/landing-2000w.jpeg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* creates parallax effect on background image */
    background-attachment: fixed;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0em) {
  body.dark-mode #hero .cs-background:before {
    opacity: .8;
  }
}
/*-- -------------------------- -->
<---          Services          -->
<--- -------------------------- -*/
/* Mobile */
@media only screen and (min-width: 0em) {
  .services {
    border-radius: 0.3125em;
    margin: auto;
    margin-top: -10.4375em;
    position: relative;
    z-index: 100;
    background: #fff;
    width: 90%;
    max-width: 82.5em;
    padding: 3.125em 1.25em;
    border-top: 0.375em solid var(--primary);
    box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.05);
    margin-bottom: 3.125em;
  }
  .services .card {
    display: block;
    width: 100%;
    max-width: 22.3125em;
    margin: auto;
    margin-bottom: 3.125em;
  }
  .services .card:last-of-type {
    margin-bottom: 0;
  }
  .services .card picture {
    background: var(--primary);
    width: 5.5em;
    height: 5.5em;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    margin-bottom: 1.4375em;
    border-radius: 50%;
  }
  .services .card picture img {
    width: 3em;
    height: 3em;
  }
  .services .card h2 {
    text-align: center;
    font-size: 2em;
    line-height: 1.35em;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 0.65em;
  }
  .services .card p {
    text-align: center;
    line-height: 1.33333333em;
    width: 100%;
    opacity: .7;
  }
}
/* Inbetween */
@media only screen and (min-width: 768px) {
  .services {
    font-size: min(1.8vw, 1em);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 98%;
  }
  .services .card {
    margin: 0;
    max-width: 20.3125em;
  }
}
/* Large Desktop */
@media only screen and (min-width: 1300px) {
  .services {
    padding: 3.125em 5em;
  }
  .services .card {
    max-width: 22.3125em;
  }
}
/* Dark mode */
@media only screen and (min-width: 0em) {
  body.dark-mode #services {
    background: var(--cardBgCool);
  }
  body.dark-mode #services picture {
    background: var(--primary);
  }
  body.dark-mode #services h2 {
    color: var(--headerColor);
    font-weight: bold;
  }
  body.dark-mode #services p {
    color: var(--accent);
    opacity: 1;
  }
}

/*-- -------------------------- -->
<---   Givebutter button hosts  -->
<--- -------------------------- -*/
/* Givebutter <givebutter-button> renders its own internal styled button (colors/label set via
   element attributes; the form opens in a modal on click). These rules only nudge the custom
   element's host layout so it sits correctly inside the nav, footer, and home CTA. They do NOT
   control Givebutter's internal button styling (that is set via attributes / the Dashboard). */
#navigation .nav-donate givebutter-button {
  display: inline-block;
  vertical-align: middle;
  font-size: 1rem;
  font-weight: bold;
  text-transform: uppercase;
}
#footer .footer-donate givebutter-button {
  display: inline-block;
  font-size: 1.125rem;
  opacity: .9;
}
#cta givebutter-button.cs-cta-donate {
  display: inline-block;
  font-size: 1rem;
  font-weight: bold;
  text-transform: uppercase;
}