/*==========================================================================
  Social Media Icon bar
  ========================================================================== */

.social-media
  position: fixed
  right: calc( (100% - 2200px) / 2 )
  top: 0
  width: 80px
  height: 100%
  +flex(center, center)
  +flex-rows

  +respond-to-width(2216)
    right: 0



  ul
    padding: 0
    list-style: none

    li
      width: 100%
      text-align: center
      margin-bottom: 25px


      &:last-of-type
        margin-bottom: 0

      a
        display: block
        opacity: 1
        transition: opacity 0.3s

        &:hover
          opacity: 0.6

    .m3
      a
        display: block
        width: 30px
        height: 18px
        background-image: url("/img/3m_logo.svg")
        background-size: contain
        background-position: center
        background-repeat: no-repeat

    .youtube
      a
        +sprite(-1px -1px, 30px, 30px)
    .facebook
      a
        +sprite(-1px -33px, 30px, 30px)
    .twitter
      a
        +sprite(-1px -97px, 30px, 30px)
    .instagram
      a
        +sprite(-1px -65px, 30px, 30px)
    .vimeo
      a
        +sprite(-1px -129px, 30px, 30px)

  +respond-to-width(1370)
    width: 60px

  /* Mobile view
    ========================================================================== */
  +respond-to-width-or-height(500, 600)
    position: relative
    right: 0
    height: 100px
    width: 100%

    ul
      +flex(center, center)

      li
        margin-bottom: 0
        margin-right: 25px

        +respond-to-width(370)
          margin-right: 18px

        &:last-of-type
          margin-right: 0