@charset "UTF-8";

/* This file uses "CSS nesting", which is a relatively new feature, but industry standard (I checked the "caniuse" website). 
	We started implementing this on our PY26 changes. VS Code supports it, just not VS.
	So for now, if you see CSS "errors", check on VSCode to see if they are spurious. */

.hero {
  margin-bottom: 0;
  padding-top: 100px;
  padding-bottom: 100px;
  background: var(--white);

  picture img {
    border-radius: 20px;
  }
}

.hero h1 {
  margin: 0;
  padding: 0 0 20px 0;
  color: var(--dark-blue-900);
  font-size: 52px;
  font-weight: 600;
  font-style: normal;
  letter-spacing: -.01em;
  line-height: 52px;
  text-align: left;
}

.hero h1 span {
  display: block;
}

.hero h2 {
  margin-bottom: 30px;
  font-size: 20px;
  font-weight: 400;
  line-height: 32px;
  text-align: left;
}

.zipContainer {
  display: block;
  padding: 1px;
  width: fit-content;
}

.textfield {
  padding: 20px;
  color: var(--dark-gray);
  font-size: 20px;
  font-family: var(--primary-font);
  line-height: 32px;
  letter-spacing: -0.2px;
  font-weight: 400;
  background: var(--white);

  &::placeholder, &:focus {
    color: var(--dark-gray);
  }
}

.card-disclaimer {
  color: #707070;
  font-family: var(--primary-font);
  font-size: 16px;
  font-weight: 600;
}

.bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  color: #00366f;
  font-family: var(--primary-font);
  font-size: 20px;
  font-weight: 500;
}

.bullets li {
  padding: 0 0 25px 0;
}

.bullets li span {
  display: inline-block;
  width: 20px;
  text-align: center;
}

input {
  vertical-align: middle;
}

.message {
  margin-bottom: 0;
  padding: 10px 0;
  color: #DE4F5C;
  font-family: var(--primary-font);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
}

#TrustedSiteBadge {
  display: none;
}

@media (min-width:991px) and (max-width:1199px) {
  .hero h1 {
    font-size: 3em;
  }
}

@media (min-width:768px) and (max-width:991px) {
  .hero {
    margin-bottom: 0;
    padding-top: 50px;
    padding-bottom: 35px;
  }

  .hero h1 {
    margin-top: 31px;
  }

  .hero h1,
  .hero h2 {
    text-align: center;
  }

  .message {
    padding: 10px 0;
    font-size: 14px;
    font-weight: 700;
    text-align: left;
  }

  .zipContainer {
    margin: 0 auto;
  }
}

@media screen and (max-width:767px) {
  .hero {
    margin-bottom: 0;
    padding-top: 10px;
    padding-bottom: 0;
  }

  .hero h1 {
    margin-top: 31px;
    font-size: 40px;
    line-height: 48px;
    text-align: center;
  }

  .hero h2 {
    font-size: 20px;
    text-align: center;
    font-weight: 600;
    line-height: 24px;
  }

  .hero p {
    margin-bottom: 40px;
    text-align: center;
  }

  .zipContainer {
    display: block;
    margin: 0 auto;
    padding: 1px;
  }

  .textfield {
    margin-bottom: 15px;
    height: auto;
    font-size: 16px;
    border-radius: 10px;
    padding-bottom: 15px;
    padding-top: 15px;
    border-color: var(--dark-gray);
    box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, 0.15);
  }
  
  #txtZip {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
  }

  .btn-default {
    width: 100%;
    font-size: 20px;
    padding-top: 15px;
    padding-bottom: 15px;
    min-height: 48px;
    border-radius: 6px;
  }

  #btn1 {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
  }

  .message {
    padding: 10px 20px;
    color: #DE4F5C;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
  }

  #TrustedSiteBadge {
    display: block;
    margin: 15px auto 0 auto;
    padding-left: 0;
    padding-bottom: 0;
    text-align: center;
  }

  .bullets {
    list-style: none;
    margin: 0;
    padding: 0;
    color: #00366f;
    font-family: var(--primary-font);
    font-size: 20px;
    font-weight: 500;
  }

  .bullets li {
    margin: 0 auto;
    padding: 0 0 35px 0;
    width: 75%;
    text-align: center;
  }

  .bullets li span {
    display: block;
    margin: 0 auto;
    width: 20px;
    text-align: center;
  }

  .bullets li span .fas {
    font-size: 28px;
  }
}

@media (min-width:439px) and (max-width:639px) {
  .zipContainer {
    display: block;
    margin: 0 auto;
    padding: 1px;
    width: 70%
  }

  .zipContainer2 {
    width: 70%;
  }
}

@media (min-width:320px) and (max-width:439px) {
  .zipContainer {
    display: block;
    margin: 0 auto;
    padding: 1px;
    width: 100%;
  }
}

@media screen and (max-width: 360px) {
  .mobile-menu li a {
    font-size: 13px;
  }
}

@media screen and (max-width: 320px) {
  .mobile-menu li a {
    font-size: 11px;
  }

  .zipContainer {
    display: block;
    margin: 0 auto;
    padding: 1px;
    width: 100%;
  }
}