section#wall-of-fame
  background-color: $white

  .content
    +glashelder-outer-container()
    position: relative
    +media($ipad-portrait)

    .col-left

      +span-columns(6)
      +media($ipad-portrait)
        +span-columns(12)

      .inner
        position: relative
        box-sizing: content-box
        padding-top: 40px
        padding-bottom: 30px
        padding-left: 65px
        padding-right: 2.5%
        left: -65px
        width: 100%
        background-color: $brand-color
        color: $white
        h2
          display: none
        +media($ipad-portrait)
          padding-left: 40px
          padding-right: 40px
          left: -40px
          h2
            display: block
            margin-top: 0
            color: #fff
        p
          padding-right: 40px

    .col-right
      +span-columns(6)
      +media($ipad-portrait)
        display: none
      h2
        text-align: right
        font-size: 2em

  .fame-intro
    position: relative
    margin-left: auto
    margin-right: auto
    z-index: 99
    +media($ipad-portrait)
      position: relative

  .fame-image
    margin-top: -150px
    margin-bottom: -150px
    position: relative
    img
      margin-top: -150px
    +media($ipad-portrait)
      display: none


  +media($ipad-portrait)
    .fame-content
      padding: 0
      padding-top: 30px

  .fame-content ul
    position: relative
    margin: 0 5%
    padding: 30px
    list-style: none
    background-color: $white
    text-align: justify
    +clearfix
    +media($iphone-portrait)
      padding: 0
      margin: 0

    &:after
      // fix for last line justify
      content: ""
      display: inline-block
      width: 100%
      line-height: 0

    +media($iphone-portrait)
      li.hide-on-device
        display: none

    li
      display: inline-block
      margin: 0
      padding: 0
      width: 30%
      text-align: center
      margin-bottom: 1em

      opacity: 0
      +transition(opacity 1s)
      &.on-screen
        opacity: 1

      &:nth-child(3n+1)
        +transition-delay(.25s)
      &:nth-child(3n+2)
        +transition-delay(.5s)
      &:nth-child(3n+3)
        +transition-delay(.75s)

      +media($iphone-portrait)
        display: table
        width: 100%

      a
        display: table-cell
        width: 100%
        height: 100%
        text-decoration: none
        vertical-align: middle

      p, h3
        color: $light-gray
        font-size: 1em
        margin: 0
      h3
        text-transform: uppercase
        +media($iphone-portrait)
          text-align: left
      p
        font-family: $font-sans
        +media($iphone-portrait)
          text-align: left
      img
        width: 100%
        +media($iphone-portrait)
          display: inline-block
          width: 40%
          vertical-align: middle

      .labels
        height: 75px
        +media($iphone-portrait)
          display: inline-block
          width: 50%
          height: auto
          vertical-align: middle
          padding-left: 25px