// header background image fills the full screen.
.header-image
  position: relative
  width: 100%
  height: calc( 100vh - #{$navigationHeight} )
  background:
    color: darken($primaryColor, 20%)
    image: $mainBgImage
    size: cover
    repeat: no-repeat
    position: 50% 50%
  animation: fade-in-background 1s 

  .content-container
    +font-semi-bold($bigStreamerFontSize, $bigStreamerLineHeight)
    color: $bigStreamerColor
    height: 100%
    +flex(center, flex-start)
    flex-direction: column
    p
      +font-default($subStreamerFontSize, $subStreamerLineHeight)
      color: $subStreamerColor

      +respond-to(small)
        +font-default(20px, 22px)

    +respond-to(small)
      +font-semi-bold(24px, 45px)


  +respond-to(small)
    +font-semi-bold(30px, 36px)
    height: 500px

  +respond-to(mobile)
    height: 350px

// introduction full-width row
.intro-row
  position: relative
  width: 100%
  background:
    color: $primaryColor

  // content container
  .content-container
    +flex(center, flex-start)

    +respond-to(small)
      padding: 100px 0

    +respond-to(mobile)
      padding: 50px 0
      flex-direction: column

// introduction block
.intro-block
  +flex(center, flex-start)
  flex-direction: column
  position: relative
  top: -$partInViewport
  left: $contentGrid*0.75
  background: $introBlockBgColor
  width: $contentGrid*7.5
  min-height: $heightIntroBlock
  padding: $paddingTextBlock calc(#{$contentGrid}*1.5 + #{$paddingTextBlock}) $paddingTextBlock $paddingTextBlock
  color: $introBlockTextColor

  h3
    color: $introBlockTitleColor

  +respond-to(small)
    top: 0
    left: 0
    padding: $paddingTextBlock

  +respond-to(mobile)
    width: 100%
    padding: $paddingTextBlock / 2.5


// call to actions buttons on homepage
.intro-btns
  +flex()
  flex-direction: column
  position: relative
  top: calc(-#{$partInViewport + $heightIntroBtns/4})
  left: -$contentGrid*0.75
  height: $heightIntroBtns
  background:
    color: $primaryColor
  width: $contentGrid*3
  min-width: $widthIntroBtns

  +respond-to(small)
    top: 0
    left: 0
    width: $widthIntroBtns / 1.2
    min-width: auto

  +respond-to(mobile)
    flex-direction: row
    width: 100%
    height: $heightIntroBtns / 2

  +respond-to-width(460)
    height: $heightIntroBtns / 4

  // telephone button
  .btn-call
    background:
      color: $btnCallBgColor
    +flex(center, center)
    flex-direction: column
    flex-grow: 1
    color: $iconCallColor
    transition: background 0.3s, color 0.3s
    .icon
      width: 25px
      height: 25px
      #call-icon
        .cls-1
          fill: $iconCallColor

    +respond-to(mobile)
      flex-basis: 50%

    +respond-to-width(460)
      .mobile-hide-number
        display: none

    &:hover
      cursor: pointer
      background:
        color: $btnCallHoverBgColor
      color: $iconCallHoverColor
      .icon
        animation: phone-rings 1.5s infinite ease
        #call-icon
          .cls-1
            fill: $iconCallHoverColor


  // go to contact button
  .btn-contact
    background:
      color: $btnContactBgColor
    +flex(center, center)
    flex-direction: column
    flex-grow: 1
    color: $iconContactColor
    transition: background 0.3s, color 0.3s
    .icon
      width: 25px
      height: 25px
      #contact-icon
        .cls-1
          fill: $iconContactColor

      +respond-to-width(460)
        display: none

    +respond-to(mobile)
      flex-basis: 50%

    &:hover
      cursor: pointer
      background:
        color: $btnContactHoverBgColor
      color: $iconContactHoverColor
      .icon
        animation: icon-move-left-and-right 0.5s infinite
        #contact-icon
          .cls-1
            fill: $iconContactHoverColor

// discover our possibilities full-width row
.discover-row
  position: relative
  background:
    color: $discoverItemsBgColor
  color: $discoverMainTitle

  .content-container
    padding: 100px 0
    +flex(center, center)
    flex-direction: column

    +respond-to(mobile)
      text-align: center
      padding: 50px 0

.discover-block
  +respond-to-width(1080)
    max-width: 500px

    .discover-item-wrapper
      margin-bottom: 10px

  +flex(center, center)
  +flex-rows

.discover-item-wrapper
  +flex(center, center)
  +flex-direction(column)

  .discover-item
    position: relative
    +flex(center, center)
    width: $discoverItemSize
    height: $discoverItemSize
    margin: 10px
    background:
      color: transparent
      position: 50% 50%
      size: cover
      repeat: no-repeat
    border-radius: $discoverItemBorderRadius
    transform: scale(1)
    transition: background 0.4s ease

    &:after
      content: ''
      background-color: $primaryColor
      opacity: 0.25
      width: 100%
      height: 100%
      transition: opacity 0.4s ease
      border-radius: $discoverItemBorderRadius

    &:hover
      cursor: pointer
      &:after
        opacity: 0

    &.item-1
      background:
        image: $discoverItem1

    &.item-2
      background:
        image: $discoverItem2

    &.item-3
      background:
        image: $discoverItem3

    &.item-4
      background:
        image: $discoverItem4

  .discover-item-content
    a
      +font-semi-bold(20px, 30px)
      color: $black