footer.main
  position: relative
  z-index: 2
  padding-top: 100px
  padding-bottom: 100px
  width: 100%
  background: $light-background
  font-size: .818182em

  @extend %clearfix

  .photo
    +position(absolute, -50px 0 0 50%)
    margin-left: -50px
    width: 100px
    height: 100px
    border-radius: 50%
    background: #ccc

  .streamer-holder
    width: 42.8571%
    margin-left: 28.5714%
    margin-right: 28.5714%

    +respond-to(small-mobile)
      margin: 0
      width: 100%

  .streamer
    text-align: center
    font-size: 2.222em
    margin-bottom: 40px

    +respond-to(small-mobile)
      margin-bottom: 0

  .contact-data
    width: 21.4286%
    float: left

    +respond-to(mobile)
      width: 50%

    +respond-to(small-mobile)
      float: none
      width: 100%

    &.left
      margin-left: 28.5714%
      padding-right: 20px

      +respond-to(mobile)
        margin-left: 0

      +respond-to(small-mobile)
        padding: 40px

    &.right
      margin-right: 28.5714%
      padding-left: 20px

      +respond-to(mobile)
        margin-right: 0

      +respond-to(small-mobile)
        padding: 0 40px

    .inner
      padding: 20px 0
      border-top: 1px solid $border-on-light-background
      border-bottom: 1px solid $border-on-light-background

      +respond-to(small-mobile)
        text-align: center
        padding: 0
        border-top: none
        border-bottom: none
    a
      color: $color-default

      &:hover
        text-decoration: underline

  .small-navigation
    text-align: center

    ul
      margin-top: 30px
      display: inline-block
      list-style: none

    @extend %clearfix

    li
      float: left
      margin: 0 15px

      +respond-to(small-mobile)
        float: none

      a
        color: rgba(0,0,0,.4)
        font-size: .88em

        &:hover
          text-decoration: underline


  .social-footer
    text-align: center

    ul
      margin-top: 30px
      display: inline-block