@charset "UTF-8";
/**
 * Hero module styles.
 * Reference: modulos/mod_hero/mod_hero.css
 */

.mod_hero {
  background: none;
}
.mod_hero:before {
  display: none !important;
}
.mod_hero .wrapper {
  position: relative;
  overflow: hidden;
}
.mod_hero .wrapper:after {
  content: "";
  width: 50%;
  height: 100%;
  background: #231F20;
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
}
@media screen and (max-width: 40em) {
  .mod_hero .wrapper:after {
    width: 100%;
    opacity: 0.8;
  }
}
.mod_hero .wrapper .herobg {
  width: 50%;
  left: 25%;
}
@media screen and (max-width: 40em) {
  .mod_hero .wrapper .herobg {
    left: 50%;
    width: 100%;
  }
}
.mod_hero .wrapper .row {
  padding: calc(120px + 10%) 20px;
}
@media screen and (max-width: 64em) {
  .mod_hero .wrapper .row {
    padding: calc(150px + 6%) 20px;
  }
}
@media screen and (max-width: 40em) {
  .mod_hero .wrapper .row {
    padding: calc(80px + 4%) 20px;
  }
}
.mod_hero .wrapper .row .inner {
  position: absolute;
  top: 50%;
  left: 0;
  padding: 0 60px 0 20px;
  transform: translateY(-50%);
}
@media screen and (max-width: 64em) {
  .mod_hero .wrapper .row .inner {
    padding-right: 40px;
  }
}
.mod_hero .wrapper .row .inner h1 {
  margin-bottom: 10px;
  padding-bottom: 0;
}
@media screen and (max-width: 40em) {
  .mod_hero .wrapper .row .inner {
    width: 100%;
    position: relative;
    top: 0;
    left: 0 !important;
    transform: none !important;
    padding: 0;
  }
}
.mod_hero .wrapper .media {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  max-width: 50%;
  overflow: hidden;
}
@media screen and (max-width: 40em) {
  .mod_hero .wrapper .media {
    max-width: 100%;
  }
}
.mod_hero.no-bg .wrapper:after {
  width: 100%;
}
.mod_hero.no-bg .wrapper .row .inner {
  text-align: center;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}
.mod_hero.dark .row .inner * {
  color: #fff;
}
.mod_hero.dark .row .inner .partial_breadcrumb li:before {
  background: #fff;
}
@media screen and (max-width: 40em) {
  .mod_hero.mobile-stack .wrapper {
    display: flex;
    flex-direction: column;
  }
  .mod_hero.mobile-stack .wrapper:after {
    display: none;
  }
  .mod_hero.mobile-stack .wrapper .media {
    order: 1;
    position: relative;
  }
  .mod_hero.mobile-stack .wrapper .row {
    order: 2;
    padding: 20px;
  }
}