.panel.redirects

  .column
    height: 100%
    text-align: center
    overflow: hidden

    +row-height(8)

    +respond-to-width(1280)
      +row-height(7)

    +respond-to-width(1024)
      +row-height(6)

    +respond-to(mobileNavigation)
      display: block
      width: 100%

    &.pattern
      background: $green url(/images/structure/pattern.png) center center
      background-size: cover

    &.striped
      +stripedCount(6)

    &:hover
      .teeth-top
        top: 20px
      .teeth-bottom
        bottom: 20px
      .bg
        opacity: 1
      .arrow
        opacity: 1
        left: 10px

  .valign-child
    position: relative
    z-index: 5

  .bg
    +position(absolute, 0 null null 0)
    width: 100%
    height: 100%
    background: $purpleLight
    opacity: 0

    +transition(opacity 200ms ease-out)

  .teeth-top
    display: inline-block
    +position(absolute, -70px null null 50%)
    +sprite(0,-180px,217px,60px)
    margin-left: -108px

    +transition(top 200ms ease-out)

  .teeth-bottom
    display: inline-block
    +position(absolute, null null -70px 50%)
    +sprite(-240px,-180px,208px,60px)
    margin-left: -104px

    +transition(bottom 200ms ease-out)

  .title
    +RobotoSlab
    color: #fff
    font-size: 1.777777778em

  .arrow
    display: inline-block
    position: relative
    top: -4px
    left: 0
    +sprite(-420px, -50px, 12px, 10px)
    opacity: 0

    +transition(opacity 200ms ease-out, left 200ms ease-out)