@font-face {
  font-family: "MyriadPro-It";
  src: url("../fonts/MyriadPro-It.eot");
  src: url("../fonts/MyriadPro-It.eot?#iefix") format("embedded-opentype"),
    url("../fonts/MyriadPro-It.woff") format("woff"),
    url("../fonts/MyriadPro-It.ttf") format("truetype"),
    url("../fonts/MyriadPro-It.svg#MyriadPro-It") format("svg");
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "MyriadPro";
  src: url("../fonts/MyriadPro-Bold.eot");
  src: url("../fonts/MyriadPro-Bold.eot?#iefix") format("embedded-opentype"),
    url("../fonts/MyriadPro-Bold.woff") format("woff"),
    url("../fonts/MyriadPro-Bold.ttf") format("truetype"),
    url("../fonts/MyriadPro-Bold.svg#MyriadPro-Bold") format("svg");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "MyriadPro";
  src: url("../fonts/MyriadPro-Light.otf");
  src: url("../fonts/MyriadPro-Light.otf?#iefix") format("opentype");
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: "MyriadPro";
  src: url("../fonts/MyriadPro-Regular.eot");
  src: url("../fonts/MyriadPro-Regular.eot?#iefix") format("embedded-opentype"),
    url("../fonts/MyriadPro-Regular.woff") format("woff"),
    url("../fonts/MyriadPro-Regular.ttf") format("truetype"),
    url("../fonts/MyriadPro-Regular.svg#MyriadPro-Regular") format("svg");
  font-weight: normal;
  font-style: normal;
}

:root {
  --light-blue: #009de1;
  --navy: #132863;
  --white: #ffffff;
  --light-turquoise: #6eccc5;
  --dark-turquoise: #00a699;
  --light-gray: #cbcdd3;
  --dark-gray: #7a808c;
  --light-blue-text: #2fb4e9;
}

body {
  font-family: "MyriadPro", sans-serif !important;
  max-width: 100vw;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}
a, .blue-text {
  color: var(--light-blue-text);
}
a:hover {
  font-weight: bold;
}
.blue-text{
  font-weight: bold;
}
.header-youfirst {
  position: absolute;
  top: 63%;
  left: 20%;
}
.header-wrapper {
  width: 100%;
  display: flex;
  height: 100%;
  align-items: center;
  align-items: center;
  justify-content: center;
}
.header-title {
  font-size: 65px;
  text-align: center;
  color: var(--white);
  font-weight: lighter;
  margin-bottom: 10px;
}
.pagebody {
  width: 50%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  justify-content: center;
  /* transform: translate(0px, -5vh); */
  margin-top: 3em;
}
h1 {
  font-size: 48px;
  text-align: center;
  color: #2fb4e9;
  font-weight: lighter;
  margin: 10px 0;
}
.body-text {
  font-size: 18px;
  color: #000;
  line-height: 1.4em;
}

.body-text-to-confirm {
  font-size: 21px;
  color: #000;
  line-height: 25px;
  text-align: center;
}

.body-text.get-notified {
  margin-bottom: 10px;
}
.two-columns {
  margin-bottom: 0.5em;
}

.phone-input {
  width: 100%;
  border: 1px solid #cbcdd3 !important;
  height: 50px;
}
.body-text-note {
  width: 50%;
  margin: 0 auto;
  font-style: italic;
  color: #2fb4e9;
  margin-bottom: 1em;
  text-align: justify;
}
.body-text-grey-note{
  width: 50%;
  margin: 0 auto;
  color: #7A808C;
  margin-bottom: 12px;
}
.body-text-grey-note div{
  padding-left: 91px;
  font-size: 14px;
}
.iti {
  width: 50%;
  display: block;
  margin: 0 auto;
}
.btn-wrapper {
  text-align: center;
}
.thank-you {
  display: none;
}
input[type="text"] {
  border: 1px solid #cbcdd3 !important;
  height: 50px !important;
  color: #222 !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  padding: 0 15px !important;
  border-radius: 0.25rem;
}
.btn {
  /* min-width: 200px; */
  width: 300px;
  padding: 5px 0 !important;
  border-radius: 100px !important;
  border: 0;
  font-size: 20px !important;
  color: #ffffff !important;
  display: inline-block;
  text-align: center;
  text-decoration: none !important;
  -webkit-box-shadow: 0px 5px 7px 1px rgb(0 0 0 / 64%);
  -moz-box-shadow: 0px 5px 7px 1px rgba(0, 0, 0, 0.64);
  box-shadow: 0px 5px 7px 1px rgb(0 0 0 / 64%);
  transition: all linear 0.1s;
  margin: 10px;
  position: relative;
  height: 50px !important;
  cursor: pointer;
}
.blue-btn {
  background: -moz-linear-gradient(90deg, #132863 0%, #009DE1 100%);
  background: -webkit-linear-gradient(90deg, #132863 0%, #009DE1 100%);
  background: linear-gradient(90deg, #132863 0%, #009DE1 100%);
}
.grey-btn {
  background: linear-gradient(90deg, #7A808C 0%, #CBCDD3 100%);
  background: -webkit-linear-gradient(90deg, #7A808C 0%, #CBCDD3 100%);
  background: -moz-linear-gradient(90deg, #7A808C 0%, #CBCDD3 100%);
}
.turquoise-btn {
  background: linear-gradient(90deg, #00A699 0%, #6ECCC5 100%);
  background: -webkit-linear-gradient(90deg, #00A699 0%, #6ECCC5 100%);
  background: -moz-linear-gradient(90deg, #00A699 0%, #6ECCC5 100%);
}
.links{
  display: flex;
  justify-content: center;
  margin: 2em 0;
}
.confirm-number{
  display: none;
}
.number-to-confirm{
  color: #004587;
  font-weight: bold;
}
.confirm-number{
  width: 80%;
  margin: 3em;
}
.confirm-number-buttons{
  display: flex;
  justify-content: center;
}
.pagehead {
  background: -moz-linear-gradient(
    90deg,
    var(--navy) 0%,
    var(--light-blue) 40%,
    var(--light-blue) 60%,
    var(--navy) 100%
  );
  background: -webkit-linear-gradient(
    90deg,
    var(--navy) 0%,
    var(--light-blue) 40%,
    var(--light-blue) 60%,
    var(--navy) 100%
  );
  background: linear-gradient(
    90deg,
    var(--navy) 0%,
    var(--light-blue) 40%,
    var(--light-blue) 60%,
    var(--navy) 100%
  );
  height: 120px;
  /* display: flex; */
  justify-content: center;
  align-items: center;
  /* background-image: url(../images/headerBackground.png); */
}

.g-recaptcha{
  display: flex;
  justify-content:center;
}

@media all and (max-width: 1500px) {
  .iti,.body-text-grey-note,.body-text-note {
    width: 65%;
  }
}

@media all and (max-width: 1366px) {
  .iti,.body-text-grey-note,.body-text-note {
    width: 75%;
  }
}

@media all and (max-width: 1199px) {
  .iti,.body-text-grey-note,.body-text-note {
    width: 85%;
  }
}

@media all and (max-width: 1024px) {
  .iti,.body-text-grey-note,.body-text-note {
    width: 100%;
  }
  .pagebody{
    width: 65%;
  }
}

@media all and (max-width: 768px) {
  .pagebody {
    width: 70%;
  }
  .links {
    flex-direction: column;
  }
}

@media all and (max-width: 600px) {
  .pagebody {
    width: 80%;
  }

  .body-text-grey-note div {
    font-size: 13px;
  }
}

@media all and (max-width: 540px) {
  .confirm-number-buttons {
    flex-direction: column;
  }
}
@media all and (max-width: 425px) {
  .header-title {
    font-size: 55px;
  }
}
@media all and (max-width: 375px) {
  .btn {
    width: 200px;
  }
}