footer
  background:
    color: $footerBgColor
  color: $footerTextColor
  .content-container
    +flex()
    +flex-rows
    padding: 100px 0 50px 0

    +respond-to-width(740)
      justify-content: center

    .footer-icon
      position: absolute
      left: -25px
      width: 18px
      margin-bottom: 10px
      .cls-1
        fill: $footerIconsColor

  // global title styles for footer
  h3
    color: $footerTitlesColor
    +font-semi-bold(18px, 22px)
    margin-bottom: 10px
    padding: 0
    text-transform: uppercase

// contact information block
.footer-contact
  position: relative
  +flex(flex-start, center)
  flex-direction: column
  flex-basis: 33.3333333%

  +respond-to-width(740)
    flex-basis: 50%

  +respond-to-width(480)
    flex-basis: 75%

  p
    padding: 0
    margin: 3px 0

  .line
    opacity: 0.30
    top: 0
    right: 0
    position: absolute
    width: 1px
    height: 100px
    background:
      color: $footerLinesColor

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

  .footer-contact-wrapper
    position: relative
    +flex()
    flex-direction: column

    a
      transition: color 0.4s ease
      color: $footerLinkColor
      &:hover
        color: $footerHoverLinkColor

// social links block
.footer-social
  position: relative
  +flex(flex-start, center)
  flex-direction: column
  flex-basis: 33.3333333%

  +respond-to-width(740)
    flex-basis: 50%

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

  a
    padding: 0
    margin: 3px 0
    color: $footerLinkColor
    transition: color 0.4s ease
    &:hover
      color: $footerHoverLinkColor

  .line
    opacity: 0.30
    top: 0
    right: 0
    position: absolute
    width: 1px
    height: 100px
    background:
      color: $footerLinesColor

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

  .footer-social-wrapper
    position: relative
    +flex()
    flex-direction: column

// menu block
.footer-menu
  position: relative
  +flex(flex-start, center)
  flex-direction: column
  flex-basis: 33.3333333%

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

  ul
    padding: 0
    margin: 0
    list-style: none
    li
      padding: 0
      margin: 3px 0
      a
        color: $footerLinkColor
        transition: color 0.4s ease
        &:hover
          color: $footerHoverLinkColor

  .footer-menu-wrapper
    position: relative
    +flex()
    flex-direction: column

// footer block
.footer-bottom
  margin-top: 40px
  width: 100%
  +flex(center, center)

  .footer-bottom-left
    padding: 0 30px
  .footer-bottom-right
    padding: 0 30px

  +respond-to-width(500)
    +flex-direction(column)