:root {
  --hero-sm-height: 600px;
  --hero-md-height: 750px;
  --hero-lg-height: 800px;
}

.hero-wrapper {
  background: var(--trillium);
  position: relative;
}

@media (min-width: 768px) {
  .hero-wrapper:after {
    height: 100%;
    width: 35%;
    right: 0;
    bottom: 0;
  }
}

/* =========== Hero Image =========== */
.hero-wrapper .img-holder {
  line-height: 0;
}

@media (min-width: 768px) {
  .hero-wrapper .img-holder {
    width: 65%;
    position: absolute;
    overflow: hidden;
    height: var(--hero-sm-height);
  }
}

@media (min-width: 992px) {
  .hero-wrapper .img-holder {
    height: var(--hero-md-height);
  }
}

@media (min-width: 1200px) {
  .hero-wrapper .img-holder {
    height: var(--hero-lg-height);
  }
}

@media (min-width: 768px) {
  .hero-wrapper .img-holder:after {
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 11%,rgba(0,0,0,0.2) 45%,rgba(0,0,0,0.8) 100%);
    content: "";
    width: 100%;
    height: 100%;
    bottom: 0;
    position: absolute;
    left: 0;
  }
}

.hero-wrapper .img-holder img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

/* =========== Topographic Background =========== */
.hero-wrapper .topo-holder {
  width: 100%;
  position: absolute;
  overflow: hidden;
  height: 50px;
  right: 0;
  bottom: -50px;
}

@media (min-width: 768px) {
  .hero-wrapper .topo-holder {
    width: 35%;
    bottom: initial;
    height: var(--hero-sm-height);
  }
}

@media (min-width: 992px) {
  .hero-wrapper .topo-holder {
    height: var(--hero-md-height);
  }
}

@media (min-width: 1200px) {
  .hero-wrapper .topo-holder {
    height: var(--hero-lg-height);
  }
}

.hero-wrapper .topo-holder:after {
  content: "";
  background: var(--under-the-elms) url("/modules/custom/ohio_slideshow/images/map_2.svg") no-repeat right center;
  position: absolute;
  height: 100%;
  width: 100%;
}

/* =========== Hero Content =========== */
.hero {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-direction: column;
  position: relative;
  background: var(--under-the-elms);
  margin-bottom: 50px;
}

@media (min-width: 768px) {
  .hero {
    background: none;
    flex-direction: row;
    margin-bottom: 0;
  }
}

@media (max-width: 992px) {
  .hero.container {
    width: 100%;
    max-width: none;
    padding: 0;
  }
}

.hero-text {
  align-self: flex-end;
  text-align: center;
  padding: 0 15px;
  margin-bottom: 40px;
  width: 100%;
  container-name:hero-text-container;
  container-type:normal;
}

@media (min-width: 768px) {
  .hero .hero-text {
    width: 65%;
    text-align: left;
    margin-bottom: 80px;
  }
}

.hero-text .display-one {
  font-size: clamp(4rem, 4vw + 1.5rem, 6rem);
  line-height: 1.1;
  color: var(--white);
  font-family: var(--text-display);
  word-wrap: break-word;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}

/* Safari-specific heading exceptions */
@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
  .hero-text .display-one {
    word-wrap: unset;
    overflow-wrap: unset;
    hyphens: unset;
    -webkit-hyphens: unset;
  }
}

.hero-text.has-cta .display-one {
  font-family: var(--text-serif);
}

@media (max-width: 992px) {
  .hero-text:not(.has-cta) .display-one {
    font-size: 32px;
  }
}

.hero-text .field--name-field-caption-plain {
  margin: 15px 0 0;
  font-size: 28px;
  color: var(--white);
  font-style: italic;
  font-family: var(--text-serif);
}

.hero-text:not(.has-cta) .field--name-field-caption-plain {
  margin: 15px 0 0px;
  font-style: unset;
}

@media (min-width: 768px) {
  .hero-text .display-one {
    font-size: clamp(4rem, 3vw + 1.5rem, 6rem);
  }

  @container hero-text-container (min-width: 470px) {
    .hero-text .display-one {
      font-size: clamp(4rem, 4vw + 1.5rem, 6rem);
    }
  }
}

.hero .hero-text .button {
  margin: 15px 0 0px;
}

.hero .fancy {
  width: 50px;
}

/* =========== Forms div - Freya, Slate, Akero forms =========== */
.hero.rfi div.hero-text+div {
  width: 100%;
}

.hero.rfi .form-required::after {
  margin: 0 0 0 2px;
}

@media (min-width: 768px) {
  .hero.rfi div.hero-text+div {
    width: 45%;
    height: var(--hero-sm-height);
  }
}

@media (min-width: 992px) {
  .hero.rfi div.hero-text+div {
    height: var(--hero-md-height);
  }
}

@media (min-width: 1200px) {
  .hero.rfi div.hero-text+div {
    height: var(--hero-lg-height);
  }
}

.hero.rfi div.hero-text+div .fr-form,
.hero.rfi div.hero-text+div #akero-form-container,
.hero.rfi div.hero-text+div #rfi,
.hero.rfi div.hero-text+div .webform-submission-form {
  background: var(--light-gray);
  padding: 20px;
  max-height: none;
  overflow-y: auto;
  min-height: 100%;
}

.hero.rfi div.hero-text+div #edit-actions {
  display: inline-flex;
  width: 100%;
}

.hero.rfi div.hero-text+div #edit-actions input {
  width: 100%;
}

.hero.rfi div.hero-text+div .js-form-item input {
  border: none;
}

.hero.rfi div.hero-text+div textarea {
  background-color: var(--light-gray);
}

.hero.rfi div.hero-text+div .js-form-item table {
  border-collapse: separate;
  border-spacing: 0 5px;
}

.hero.rfi div.hero-text+div .js-form-item .tabledrag-toggle-weight-wrapper,
.hero.rfi div.hero-text+div .js-form-item .webform-multiple-add {
  display: none;
}

.hero.rfi div.hero-text+div .js-form-item .draggable {
  background-color: unset;
}

.hero.rfi div.hero-text+div .js-form-item .draggable:first-of-type td:last-of-type input:last-of-type {
  display: none;
}

.hero.rfi div.hero-text+div .js-form-item .handle {
  width: 25px;
  height: 25px;
  margin: 0 5px;
}

.hero.rfi div.hero-text+div .js-form-item input[type="text"],
.hero.rfi div.hero-text+div .js-form-item input[type="email"],
.hero.rfi div.hero-text+div .js-form-item input[type="tel"],
.hero.rfi div.hero-text+div .js-form-item input[type="number"],
.hero.rfi div.hero-text+div .js-form-item input[type="date"],
.hero.rfi div.hero-text+div .js-form-item select {
  width: 95%;
  background-color: var(--light-gray);
}

.hero.rfi div.hero-text+div .js-form-type-radio,
.hero.rfi div.hero-text+div .js-form-type-checkbox {
  display: flex;
}

.hero.rfi div.hero-text+div .js-form-type-radio input,
.hero.rfi div.hero-text+div .js-form-type-checkbox input {
  order: 1;
  width: 25%;
  align-self: center;
}

@media (min-width: 768px) {
  .hero.rfi div.hero-text+div .fr-form,
  .hero.rfi div.hero-text+div #akero-form-container,
  .hero.rfi div.hero-text+div #rfi,
  .hero.rfi div.hero-text+div .webform-submission-form {
    max-height: var(--hero-sm-height);
  }
}

@media (min-width: 992px) {
  .hero.rfi div.hero-text+div .fr-form,
  .hero.rfi div.hero-text+div #akero-form-container,
  .hero.rfi div.hero-text+div #rfi,
  .hero.rfi div.hero-text+div .webform-submission-form {
    max-height: var(--hero-md-height);
  }
}

@media (min-width: 1200px) {
  .hero.rfi div.hero-text+div .fr-form,
  .hero.rfi div.hero-text+div #akero-form-container,
  .hero.rfi div.hero-text+div #rfi,
  .hero.rfi div.hero-text+div .webform-submission-form {
    max-height: var(--hero-lg-height);
  }
}

/* =========== Freya Form Styles =========== */
.hero.rfi div.hero-text+div .fr-form .fr-form__heading {
  color: var(--under-the-elms);
}

.hero.rfi div.hero-text+div .fr-form .fr-label {
  color: var(--under-the-elms);
  font-weight: bold;
  margin-top: 0px;
  margin-bottom: 0px;
}

@media (min-width: 768px) {
  .hero.rfi div.hero-text+div .fr-form .fr-form-step {
    justify-content: space-between;
  }
}

.hero.rfi div.hero-text+div .fr-form .half-width {
  width: 100%;
  padding: 0;
}

@media (min-width: 768px) {
  .hero.rfi div.hero-text+div .fr-form .half-width {
    width: calc(50% - 5px);
  }
}

.hero.rfi div.hero-text+div .fr-form .fr-form-field input, .hero.rfi div.hero-text+div .fr-form .fr-form-field select {
  padding: 6px !important;
  margin-bottom: 0;
}

.hero.rfi div.hero-text+div .fr-form .fr-button--submit {
  background: var(--cutler);
  padding: 20px;
}

.hero.rfi div.hero-text+div .fr-form .fr-button--submit span {
  color: var(--white);
  font-family: var(--text-display);
  font-size: 26px;
}

#block-heroblock .hero.rfi div.hero-text+div .fr-form-field>div {
  margin-bottom: 12px;
}