.callToActionGroup {
  width: 100%;
  margin: 20px 0;
  text-align: center;
}

.callToAction-title {
  color: #808080;
  font-size: 48px;
  font-weight: 700;
  margin: 0 0 40px 0;
}

.callToAction-subtitle {
  max-width: 660px;
  margin: 0 auto 48px;
  font-weight: 100;
  font-size: 20px;
}

.callToAction-form {
  max-width: 472px;
  margin: 0 auto 16px;
  height: 48px;
}

.callToAction-formInputsContainer {
  height: 100%;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 5px;
  overflow: hidden;
  display: flex;
  display: -webkit-flex;
}

.callToAction-form.is-invalid > .callToAction-formInputsContainer {
  border-color: rgb(238, 92, 94);
}

.callToAction-email {
  height: 100%;
  flex: 1 0 auto;
  -webkit-flex: 1 0 auto;
  padding: 0 16px;
  outline: 0;
  border: none;
  font-weight: 100;
  font-size: 20px;
  background-color: rgb(240, 242, 244);
}

.callToAction-email:focus {
  box-shadow: 0 0 2px 0 rgb(45, 170, 225) inset;
}

.callToAction-submit {
  width: 160px;
  outline: 0;
  border: none;
  background-color: rgb(15, 112, 183);
  color: rgb(255, 255, 255);
  font-weight: 100;
  font-size: 20px;
  line-height: 44px;
  cursor: pointer;
}

.callToAction-wide {
  width: 240px;
  margin: 0 auto 16px;
  border-radius: 5px;
}

.callToAction-submit:focus {
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

.callToAction-submit:hover {
  background-color: rgb(45, 170, 225);
}

.callToAction-caption {
  margin: 0 0 16px 0;
  font-weight: 100;
  font-size: 20px;
  color: rgb(198, 200, 202);
}

.topCallToAction {
  min-height: 552px;
  padding: 0 16px;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
}

#re-logo {
  width: 120px;
}

.valueProp {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  padding: 0 32px;
  margin-bottom: 64px;
}

.valueProp.is-rowReverse {
  flex-direction: row-reverse;
  -webkit-flex-direction: row-reverse;
}

.valueProp-explanation {
  max-width: 310px;
  margin: 16px auto;
  padding: 0 8px;
}

.valueProp-explanationTitle {
  font-weight: 100;
  font-size: 32px;
  margin: 0 0 32px 0;
}

.valueProp-explanationDetails {
  font-weight: 100;
  font-size: 20px;
  margin: 0;
}

.valueProp-screenshot {
  width: 100%;
  max-width: 648px;
}

.bottomCallToAction {
  width: 100%;
  max-width: 800px;
  padding: 24px 16px;
  margin: 16px auto;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(198, 200, 202);
}

/* Prequal quiz */
/**
 * NOTE: You can only transition on max-height and not height. Have the quiz increase in max-height
 * when the slides are rendered in to keep the elements vertically centered, and use CSS transition
 * on max-height to make the change in height less jarring.
 *
 * TODO: Using calculated height of quiz child elements to set max-height appropriately to actually
 * center elements on page.
 */
#quiz-container {
  --max-height-fail: 108px;
  --max-height-success: 78px;
  max-height: 62px;
  /* Crudely set height of slides. Does not factor in when the content line wraps, so just
     overestimate. */
  height: 300px;
  margin: 0 0.5em;
  transition: max-height 0.5s ease-in-out;
}

#quiz {
  font-weight: 100;
  font-size: 20px;
}

#quiz-initial-btn-container {
  width: 100%;
}

.quiz-btn-container {
  margin-top: 5px;
}

.quiz-button {
  width: 160px;
  outline: 0;
  border: none;
  border-radius: 5px;
  background-color: rgb(15, 112, 183);
  color: rgb(255, 255, 255);
  margin-right: 4px;
  line-height: 44px;
  cursor: pointer;
}

.quiz-button:focus {
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

.quiz-button:hover {
  background-color: rgb(45, 170, 225);
}

.quiz-button.no:hover {
  background-color: rgb(200,100,100);
}

.quiz-button.yes:hover {
  background-color: rgb(100,200,100);
}

.slide {
  width: 100%;
  margin: auto 0;
}

.slide ol,
.slide ul {
  text-align: left;
}

.materializer {
  transition: all .5s ease-out;
  transform: translateY(0);
  display: block;
}

.materializer.hidden {
  display: none;
}

.materializer.invisible {
  transition: all .4s ease-in;
  transform: translateY(50px);
  opacity: 0;
}

@media screen and (max-width: 414px) {
  .callToAction-title {
    font-size: 32px;
    margin: 0 0 24px 0;
  }

  .callToAction-subtitle {
    font-size: 14px;
    margin: 0 auto 32px;
  }

  .callToAction-email {
    font-size: 14px;
  }

  .callToAction-form {
    height: 36px;
  }

  .callToAction-submit {
    font-size: 14px;
    line-height: 30px;
    width: 115px;
  }

  .callToAction-wide {
    width: 170px;
  }

  #re-logo {
    width: 80px;
  }

  #quiz-container {
    /* Harcoded values obtained from inspection in Chrome dev console... */
    --max-height-fail: 78px;
    --max-height-success: 78px;
    max-height: 48px;
  }

  #quiz {
    font-size: 14px;
  }

  .quiz-button {
    line-height: 30px;
    width: 115px;
  }
}

.zoom-settings-img {
  min-width: 300px;
}

/* UTILITIES */
.u-noWrap {
  white-space: nowrap;
}

.js-auth {
  display: none;
}