/* =============================================
Block - Hero
============================================= */
/* =============================================================================
Import me into 'individual' scss partials
============================================================================= */
/* =============================================================================
Functions
============================================================================= */
/* Deep-get sass map
=================================================== */
/* =============================================================================
Mixins
============================================================================= */
/* =================================================
Breakpoints
=================================================== */
/* =============================================================================
Breakpoint definition
============================================================================= */
/* =============================================================================
Config
============================================================================= */
.block-hero {
  position: relative;
  min-height: 320px;
  /* Primary style (base of tertiary style)
  =================================================== */
  /* Primary light & Secondary light
  =================================================== */
  /* Secondary Style
  =================================================== */
  /* Tertiary
  =================================================== */
  /* Color variations
  =================================================== */
}
.block-hero.first-line .block-hero__paragraph {
  max-width: 480px;
}
.block-hero.first-line .block-hero__heading:before {
  content: "";
  float: right;
  width: calc(100% - 290px);
  height: 1px;
}
.block-hero__container {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
}
.block-hero__subheading, .block-hero__heading, .block-hero__paragraph {
  position: relative;
  z-index: 2;
}
.block-hero__subheading {
  margin-bottom: 0.625em;
  color: var(--colors-gray2);
  font-weight: 500;
  font-size: var(--font-size-base);
  font-family: var(--font-family-heading), var(--font-family-fallback-heading);
  letter-spacing: 2.7px;
  text-transform: uppercase;
}
.block-hero__heading {
  margin-bottom: 1.25rem;
  color: var(--colors-gray5);
}
.block-hero__heading.tsl-heading--secondary {
  font-size: var(--font-size-xl);
}
@media all and (max-width: calc(768px - 1px)) {
  .block-hero__heading.tsl-heading--primary {
    font-size: var(--font-size-xl);
  }
}
@media all and (max-width: calc(1600px - 1px)) {
  .block-hero.with-bottom .block-hero__image figure svg {
    max-width: 500px;
    transform: translate3d(60px, 0, 0);
  }
}
@media all and (max-width: calc(1024px - 1px)) {
  .block-hero.with-bottom .block-hero__image figure svg {
    max-width: inherit;
    transform: translate3d(0, 0, 0);
  }
}
.block-hero__media {
  z-index: 9;
  flex: 0 1 420px;
}
@media all and (max-width: calc(768px - 1px)) {
  .block-hero__media {
    margin-top: 4rem;
  }
  .block-hero__media .media--video {
    margin-bottom: 2rem;
    padding-bottom: 100%;
  }
}
.block-hero.image--bottom .block-hero__image .media--image {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-end;
  height: 100%;
}
.block-hero__paragraph {
  margin-bottom: 2rem;
  color: var(--colors-gray5);
  font-size: var(--font-size-body-large);
  opacity: 0.8;
}
.block-hero__links {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}
@media all and (max-width: calc(1024px - 1px)) {
  .block-hero__links {
    flex-direction: column;
    margin-top: 2rem;
  }
}
@media all and (min-width: 1024px) {
  .block-hero__links .tsl-link + .tsl-link {
    margin-left: 2.5em;
  }
}
.block-hero .tsl-next-block {
  z-index: 9;
  margin: 5rem 0 0;
}
.block-hero .block-hero__dots,
.block-hero .block-hero-primary__dots {
  display: none;
}
@media all and (max-width: calc(1024px - 1px)) {
  .block-hero .block-hero__dots,
  .block-hero .block-hero-primary__dots {
    display: none !important;
  }
}
@media all and (min-width: 768px) {
  .block-hero--primary .block-hero__container, .block-hero--primary-light .block-hero__container, .block-hero--tertiary .block-hero__container {
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
  }
}
.block-hero--primary .block-hero__content, .block-hero--primary-light .block-hero__content, .block-hero--tertiary .block-hero__content {
  position: static;
  flex: 1 1 50%;
  max-width: 540px;
}
.block-hero--primary .block-hero__image, .block-hero--primary-light .block-hero__image, .block-hero--tertiary .block-hero__image {
  position: relative;
  z-index: 2;
  flex: 1 1 100%;
}
@media all and (min-width: 768px) {
  .block-hero--primary .block-hero__image, .block-hero--primary-light .block-hero__image, .block-hero--tertiary .block-hero__image {
    flex: 0 1 calc(50% - 2rem);
    margin-left: 2rem;
  }
}
.block-hero--primary .block-hero__links .tsl-link + .tsl-link, .block-hero--primary-light .block-hero__links .tsl-link + .tsl-link, .block-hero--tertiary .block-hero__links .tsl-link + .tsl-link {
  margin-top: 1rem;
  margin-left: 0;
}
@media all and (max-width: calc(1024px - 1px)) {
  .block-hero--primary .block-hero__links, .block-hero--primary-light .block-hero__links, .block-hero--tertiary .block-hero__links {
    align-items: flex-start;
    justify-content: flex-start;
  }
  .block-hero--primary .block-hero__links .tsl-link + .tsl-link, .block-hero--primary-light .block-hero__links .tsl-link + .tsl-link, .block-hero--tertiary .block-hero__links .tsl-link + .tsl-link {
    margin-top: 1rem;
  }
}
.block-hero--primary-light, .block-hero--secondary-light {
  background: var(--colors-gray5);
}
.block-hero--primary-light .block-hero__subheading, .block-hero--secondary-light .block-hero__subheading {
  color: var(--colors-brand-1);
}
.block-hero--primary-light .block-hero__paragraph,
.block-hero--primary-light .block-hero__heading, .block-hero--secondary-light .block-hero__paragraph,
.block-hero--secondary-light .block-hero__heading {
  color: var(--colors-text);
}
.block-hero--primary-light .block-hero__transition svg path, .block-hero--secondary-light .block-hero__transition svg path {
  fill: var(--colors-gray5);
}
.block-hero--secondary {
  background-color: var(--colors-brand-2);
}
.block-hero--secondary .block-hero__image, .block-hero--secondary-light .block-hero__image {
  flex-basis: 100%;
  margin-bottom: 2.5rem;
}
.block-hero--secondary .block-hero__image:empty, .block-hero--secondary-light .block-hero__image:empty {
  display: none;
}
.block-hero--secondary .block-hero__container,
.block-hero--secondary .block-hero__heading, .block-hero--secondary-light .block-hero__container,
.block-hero--secondary-light .block-hero__heading {
  text-align: center;
}
.block-hero--secondary .block-hero__links, .block-hero--secondary-light .block-hero__links {
  justify-content: center;
  margin-top: 5rem;
  margin-left: 0;
}
.block-hero--secondary .block-hero__subheading, .block-hero--secondary-light .block-hero__subheading {
  margin-bottom: 1.5rem;
  opacity: 0.5;
}
.block-hero--secondary .block-hero__content, .block-hero--secondary-light .block-hero__content {
  max-width: 681px;
}
.block-hero--secondary .block-hero__image img, .block-hero--secondary-light .block-hero__image img {
  margin: 2.5rem auto 0;
}
.block-hero--secondary .block-hero__dots, .block-hero--secondary-light .block-hero__dots {
  position: absolute;
  display: block;
  width: 300px;
  height: 300px;
}
.block-hero--secondary .dots-left__container, .block-hero--secondary-light .dots-left__container {
  position: absolute;
  bottom: 0%;
  left: -70px;
}
.block-hero--secondary .dots-right__container, .block-hero--secondary-light .dots-right__container {
  top: 10%;
  right: -81px;
}
.block-hero--secondary-light {
  background-image: none;
}
.block-hero--tertiary {
  overflow: hidden;
}
.block-hero--tertiary .block-hero__container {
  padding: 4rem 0 8rem;
}
@media all and (max-width: calc(1024px - 1px)) {
  .block-hero--tertiary .block-hero__container {
    padding: 6rem 0 4rem;
  }
}
@media all and (max-width: calc(649px - 1px)) {
  .block-hero--tertiary .block-hero__container {
    padding: 1rem 0;
  }
}
@media all and (min-width: 1440px) {
  .block-hero--tertiary .block-hero__container {
    min-height: 41vw;
  }
}
.block-hero--tertiary .block-hero__subheading {
  margin-bottom: 1.75rem;
  color: var(--colors-brand-1);
  font-size: var(--font-size-base);
  text-transform: uppercase;
}
.block-hero--tertiary .block-hero__image {
  position: relative;
  right: -5%;
}
@media all and (min-width: 1024px) {
  .block-hero--tertiary .block-hero__image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 55%;
  }
  .block-hero--tertiary .block-hero__image img,
  .block-hero--tertiary .block-hero__image .tsl-embed {
    width: 100%;
    height: auto;
    margin: 0;
  }
  .block-hero--tertiary .block-hero__image .tsl-video {
    height: 100%;
  }
}
@media all and (min-width: 1440px) {
  .block-hero--tertiary .block-hero__image {
    width: 44%;
  }
}
.block-hero--tertiary .tsl-next-block {
  position: absolute;
  bottom: 2rem;
}
@media all and (min-width: 1024px) {
  .block-hero--tertiary .tsl-next-block {
    bottom: 6rem;
  }
}
.block-hero--tertiary .block-hero__paragraph,
.block-hero--tertiary .block-hero__heading {
  z-index: 2;
}
.block-hero.bg--dark {
  background-color: var(--colors-brand-2);
}
.block-hero__bottom {
  padding-top: 1rem;
  padding-bottom: 2.5rem;
  border-top: 1px solid #1A488C;
  text-align: center;
}
.block-hero__bottom .container {
  position: relative;
}
.block-hero__bottom .bottom__images {
  position: absolute;
  top: 20px;
  right: 0;
  display: flex;
}
@media all and (max-width: calc(1024px - 1px)) {
  .block-hero__bottom .bottom__images {
    position: relative;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
  }
}
.block-hero__bottom .bottom__images .logo-item {
  max-width: 130px;
  max-height: 75px;
  margin-left: 20px;
}
.block-hero__bottom .bottom__link.tsl-link--link-primary {
  padding-top: 40px;
}
.block-hero__bottom .bottom__link.tsl-link--link-primary:hover span::before {
  top: 5px;
  -webkit-transition: all 400ms;
  transition: all 400ms;
}
.block-hero__bottom .bottom__link.tsl-link--link-primary span {
  position: relative;
  display: inline-block;
  color: #FFF;
  -webkit-transition: all 400ms;
  transition: all 400ms;
}
.block-hero__bottom .bottom__link.tsl-link--link-primary span::before {
  content: "";
  position: absolute;
  top: 0;
  left: -35px;
  width: 24px;
  height: 24px;
  border-radius: 12px;
  background-color: var(--colors-brand-1);
  background-image: url(/app/themes/geocomply/assets/img/arrow-down.svg);
  background-position: center;
  background-size: 12px 12px;
  background-repeat: no-repeat;
  -webkit-transition: all 400ms;
  transition: all 400ms;
  transform: rotate(90deg);
}