.header-background
  position: relative
  width: 100%
  background:
    color: $greenGrey
    size: cover
    repeat: no-repeat
    position: 50% 50%
  //animation: fade-in 1s
  +flex(flex-start, flex-start)

  &.blue
    background: $turquoise

  .content-container
    position: relative
    margin: 0 auto

.base-intro-block
  margin-bottom: 100px
  //box-shadow: 0 14px 28px rgba(0,0,0,0.04), 0 10px 10px rgba(0,0,0,0.05)
  +flex()

  +respond-to(mobile)
    flex-direction: column-reverse
    margin-bottom: 50px

.base-content-block
  position: relative
  background:
    color: $mainTextBlockBgColor
  color: $white
  width: 100%
  max-width: $maxWidth
  padding: $paddingTextBlock
  flex: 1

  +respond-to-width(600)
    padding: $paddingSmallTextBlock

.base-image-block
  +flex()
  position: relative
  flex-direction: column
  flex: 1
  .base-image
    position: absolute
    width: 100%
    height: 100%
    background:
      repeat: no-repeat
      size: cover
      position: center

  +respond-to(mobile)
    min-height: 300px
    padding-bottom: 75%

.base-breadcrumb
  margin: 150px 0 15px 0

  +respond-to-width(700)
    margin: 50px 0 15px 0

  &.no-cta-head
    margin: 20px 0 15px 0 !important

  .content-container
    width: 100%

    //.breadcrumb
    //  ol
    //    li
    //      a
    //        span
    //          transition: color 0.4s ease !important
    //          color: $breadcrumbColor !important
    //          &:hover
    //            color: $breadcrumbHoverColor !important
    //
    //      &:after
    //        color: $white