body > footer
  background-color: $brand-color
  color: $white

  strong
    color: $white

  .content
    +glashelder-outer-container()
    position: relative

  .arrow
    position: relative
    display: block
    max-width: 455px
    width: 100%
    text-decoration: none
    margin: 0 auto
    text-align: center
    font-family: $font-sans
    top: -100px
    margin-bottom: -100px

    &:before
      content: ''
      position: relative
      display: block
      height: 32px
      max-width: 400px
      z-index: 99
      margin: 0 auto
      margin-top: -22px
      background-color: $brand-secondary
      background-image: -moz-linear-gradient(top,  rgba(0,0,0,0) 75%, rgba(0,0,0,.1) 100%) /* FF3.6+ */
      background-image: -webkit-gradient(linear, left top, left bottom, color-stop(75%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,.1))) /* Chrome,Safari4+ */
      background-image: -webkit-linear-gradient(top,  rgba(0,0,0,0) 75%,rgba(0,0,0,.1) 100%) /* Chrome10+,Safari5.1+ */
      background-image: -o-linear-gradient(top,  rgba(0,0,0,0) 75%,rgba(0,0,0,.1) 100%) /* Opera 11.10+ */
      background-image: -ms-linear-gradient(top,  rgba(0,0,0,0) 75%,rgba(0,0,0,.1) 100%) /* IE10+ */
      background-image: linear-gradient(to bottom,  rgba(0,0,0,0) 75%,rgba(0,0,0,.1) 100%) /* W3C */

    h3
      color: $white

    .arrow-body
      width: 100%
      padding-top: 25px
      background-color: $brand-secondary

    .arrow-tip
      width: 100%

  .inner
    margin: 0 auto
    max-width: 455px
    width: 100%

    a
      color: $white
    a:hover
      text-decoration: underline

    h3
      color: $white
      font-weight: normal
      font-size: 28px
      text-align: center

    h4
      color: $white
      font-size: 1.25em

    .sub-title
      font-style: italic
      text-align: center

    .pre
      display: inline-block
      width: 50px

    address a
      color: $white
      text-decoration: none

    .linkedin a, .twitter a
      color: $white
      +transition(color, .5s, ease)
      &:hover
        color: $brand-color

    .linkedin
      padding-top: 1em
      padding-bottom: 1em
      position: relative
      color: $white
      a
        text-decoration: none
        font-weight: bold
      a:hover
        color: $white
        text-decoration: underline
      &:before
        content: ''
        display: inline-block
        width: 32px
        height: 32px
        margin-right: 1em
        background-image: url(../img/icons/icon-linkedin.png)
        background-position: center center
        background-repeat: no-repeat
        vertical-align: middle

    .twitter
      padding-top: 1em
      position: relative
      color: $white
      padding-left: 48px

      a
        text-decoration: none
        display: block

      a .screen-name
        display: block
        text-decoration: none
        font-weight: bold

      a:hover
        color: $white
      a:hover .screen-name
        text-decoration: underline

      &:before
        content: ''
        position: absolute
        left: 0px
        top: 16px
        display: block
        width: 32px
        height: 32px
        margin-right: 1em
        background-image: url(../img/icons/icon-twitter.png)
        background-position: center center
        background-repeat: no-repeat
        vertical-align: middle

    a
      text-decoration: none

    .komma
      left: 45px
      display: table
      margin: 50px auto
      position: relative
      color: $white
      text-decoration: none
      opacity: .7
      +transition(opacity .5s)
      &:hover
        opacity: 1
      a
        text-decoration: none
      &:before
        content: ''
        position: absolute
        display: block
        float: left
        left: -45px
        width: 28px
        height: 100%
        background-image: url(../img/icons/icon-komma.png)
        background-position: center center
        background-repeat: no-repeat