.sub-navigation
  position: relative
  z-index: 16
  height: 40px
  background: $blue url('/img/noise.png')

  .styling-block
    position: absolute
    left: 0
    top: 0
    width: 100%

    &.bottom
      bottom: 0
      top: auto
      margin-bottom: -340px
      .left, .right
        &:before
          top: auto
          bottom: 20px
    .left, .right
      background: $blue url('/img/noise.png')
      &:before
        opacity: 0.5
        border-color: $darkGray

  .types
    position: relative
    z-index: 2
    top: -190px
    width: calc(100% - 280px)
    margin: auto
    .content-container
      +flex(space-between, flex-start)
    .type
      display: block
      height: 208px
      width: 209px
      position: relative
      .background
        position: absolute
        left: 0
        top: 0
        +sprite(-820px 0, 209px, 208px)
        display: block
        +transform(rotate(0deg))
        +transform-origin(50% 50%)
        +transition(all 0.3s)
      a
        position: relative
        height: 100%
        min-width: 209px
        +flex(center, center)
        text-align: center

        p
          width: 100%
          display: inline-block
          max-width: 124px
          margin: 0
          +font-default(42px, 42px)
          color: rgba(82,82,82, 0.33)
          strong
            color: $darkGray
            +transition(all 0.3s)

        span
          width: 100%
          height: 4px
          max-width: 124px
          position: absolute
          left: calc(50% - 62px)
          top: calc(50% - 2px)
          background: $beige
      &.extra-top
        top: -110px
      &:hover
        .background
          +transform(rotate(10deg))
        a
          p
            strong
              color: $beige

  .choose-type
    position: relative
    top: -190px
    z-index: 5

    .arrows
      +flex(center, flex-start)
      .arrow
        +sprite(-775px -215px, 95px, 70px)
        display: block
        margin-bottom: 30px
        &.arrow-right
          +transform(scaleX(-1))

    h3
      +header-font2(55px, 55px)
      text-transform: uppercase
      text-align: center
      color: $lightGray
      letter-spacing: 0.5px
      text-shadow: 4px 4px $darkGray

+media-query(1200px)
  .sub-navigation
    height: 400px
    +flex(center, flex-start)
    +flex-rows
    .types
      +order(2)
      width: 100%
      top: 30px
      .content-container
        +flex(space-around, flex-start)
        +flex-rows

      .type
        width: 40%
        +flex(flex-end, center)
        margin-bottom: 30px
        .background
          left: auto
          right: 0
        &.extra-top
          top: 0
        &:nth-of-type(2n + 2)
          +flex(flex-start, center)
          .background
            left: 0
            right: auto

    .choose-type
      +order(1)
      width: 100%
      top: -8%
      .arrows
        display: none

+media-query(500px)
  .sub-navigation
    height: 875px
    .types
      top: 0
      .content-container
        +flex(center, flex-start)

      .type
        width: 100%