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

  .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: $primaryColor
  color: $white
  width: 100%
  max-width: $maxWidth
  padding: $paddingTextBlock
  flex: 1

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

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

    +respond-to(mobile)
      min-height: 250px
      background:
        position: 50% 50%

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

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

  .content-container
    width: 100%
    .breadcrumb
      ol
        li
          a
            span
              color: $white !important
              &:hover
                color: lighten($lightBlue, 20%) !important

          &:after
            color: $white