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

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

    .footer-icon
      position: relative
      +flex(flex-start, flex-start)

      +respond-to-width(480)
        +flex(center, center)

      >:first-child
        margin-right: 10px
        display: block
        width: 18px
        position: relative

        .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%
    text-align: center

  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

  .footer-icon
    #footer-social-icon
      margin-top: 1px

// 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-icon
    #footer-menu-icon
      margin-top: 6px

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

  .footer-bottom-left
    padding: 0 30px
    font-size: 0.9rem
    opacity: 0.8

  .footer-bottom-mid
    a
      padding: 0 5px
      font-size: 0.9rem
      text-align: center
      opacity: 0.8
      color: $footerLinkColor
      transition: color 0.4s ease
      &:hover
        color: $footerHoverLinkColor

  .footer-bottom-right
    padding: 0 30px

  +respond-to-width(800)
    display: block

    .footer-bottom-left,
    .footer-bottom-mid,
    .footer-bottom-right
      display: block
      text-align: center
      line-height: 1.1

    .footer-bottom-mid,
    .footer-bottom-right
      margin-top: 10px
      text-align: center