@charset "utf-8";

.block {
  justify-content: center;
  margin: 0;
  width: 100%;

  & .block {
    width: unset;
  }

  & h4 {
    font-size: 1.5rem;
    font-weight: 200;
    line-height: 1.2;
    margin: 3rem 0 1rem;
    text-shadow: 0px 0px 1px rgba(35, 35, 35, .18);

    &::before {
      align-self: stretch;
      background: var(--color-6);
      border-bottom-right-radius: .5rem;
      border-top-left-radius: .5rem;
      content: "";
      height: auto;
      margin-right: 1rem;
      width: 4px;
    }
  }

  & p + p {
    margin-top: 2rem;
  }

  & p + *:not(p) {
    margin-top: 1.5rem;
  }
}

/* display:contents removes the element box so inline children lay out as direct block children */
.block :is(p, li) :is(a, em, span, strong) {
  display: contents;
}

.block--container {
  background: var(--compare-more);
  border-radius: 4px;
  box-shadow: var(--float-close);
  color: var(--contrast);
  flex-direction: column;
  max-width: var(--max-width);
  padding: 3rem;
  position: relative;
  -webkit-transform: translateY(var(--block-shift));
  transform: translateY(var(--block-shift));
  width: 100%;
  z-index: 1;

  & h2 {
    color: var(--contrast);
    flex-direction: column;
    font-size: 2em;
    font-weight: 800;
    margin-bottom: 1em;

    &::before {
      background: var(--blue-6);
      border-bottom-left-radius: 5rem;
      border-top-right-radius: 5rem;
      content: "";
      height: 0.5rem;
      margin-bottom: 0.5rem;
      margin-top: 1.5rem;
      -webkit-transform: rotateY(180deg);
      transform: rotateY(180deg);
      width: 12.5rem;
    }
  }
}

.image-place-holder::before {
  content: "";
  height: 100%;
}

.block-backer {
  margin: -4rem 0;
  position: relative;

  &::before {
    background-color: var(--block-backer-color);
    border-radius: 1rem;
    content: "";
    height: 50%;
    max-width: calc(var(--max-width) + 16rem);
    position: absolute;
    width: 100%;
  }
}

.switch .block--container {
  flex-direction: row;
}

.reset .block--container {
  background: var(--reset-bg);
  box-shadow: var(--reset-shadow);
  max-width: var(--reset-max-width);
  padding: var(--reset-padding);
}

/* Decorative animal image that bleeds out of its container */
.animal-special {
  bottom: 0;
  filter: drop-shadow(-18px 18px 14px #85919d45);
  max-width: calc(var(--max-width) / 2);
  position: absolute;
  -webkit-transform: translateX(-3rem) translateY(10rem);
  transform: translateX(-3rem) translateY(10rem);
  width: calc(40% + 3rem);
}
/*=====================================================================*/
.block ul[class=""],
.intro ul:not(ul[class]),.ul {
  border-left: 4px solid var(--color-3);
  border-radius: .25rem;
  flex-direction: column;
  font-size: .85rem;
  margin: 1rem 0 1rem 1.5rem;
  max-width: calc(100% - 3rem);
  padding: 1rem;

  & li {
    line-height: 1.4;
    margin: .5rem 1rem;
    position: relative;

    &::before {
      background-color: var(--color-3);
      border-bottom-right-radius: .5rem;
      border-top-right-radius: .5rem;
      content: "";
      height: .5rem;
      position: absolute;
      -webkit-transform: translateX(-1.25rem) translateY(.35em);
      transform: translateX(-1.25rem) translateY(.35em);
      width: .5rem;
    }
  }
}
/*=====================================================================*/
@media screen and (max-width: 480px) {
  .block {
    padding-left: .25rem;
    padding-right: .25rem;

    & h4 {
      margin: 2rem 0 1rem;
    }

    &.spacer {
      padding: 1rem;
    }
  }

  .block ul[class=""],
  .intro ul:not(ul[class]),
  .ul {
    margin: 1rem 0;
    max-width: unset;
    padding: 2rem 1rem;
  }

  .thirds {
    flex-direction: column;
    width: 100%;
  }

  .block--container {
    padding: 1rem;
  }

  .intro-with-widget > div {
    padding: 1rem;
  }

  .intro-with-widget .widget-box {
    margin: 2rem 0;
    -webkit-transform: none;
    transform: none;
  }

  .animal-special {
    -webkit-transform: translateY(10rem) translateX(-2rem);
    transform: translateY(10rem) translateX(-2rem);
    width: 100%;
  }

  [style*="padding-top: 8rem"],
  [style*="padding-top: 12rem"] {
    padding-top: 1rem !important;
  }

  .prominent-info section {
    flex-direction: column;
  }

  .prominent-info :is(.fees, .requirements) {
    width: 100%;

    & ul {
      margin: 1rem 0;
      padding: 1rem;
    }
  }

  .prominent-info select {
    width: 100%;
  }
}