.production-mobile-menu
  display: none
  padding: 60px 0
  background: linear-gradient(0deg, $blue-300 0%, $blue 100%)

  +respond-to-width(960)
    display: block

  .grid-col
    overflow: visible

    +respond-to-width(430)
      width: 100%

  h4
    margin: 0 0 80px
    color: $neutral-200
    font-size: 0.75rem
    font-weight: bold
    letter-spacing: 1px
    line-height: 1rem
    text-transform: uppercase
    position: relative
    z-index: 30

    &:before
      content: ''
      position: absolute
      display: block
      width: 50px
      left: -5px
      height: 0
      opacity: 0.5
      transform: rotate(-45deg)
      border-top: solid 1px white
      z-index: 20

    &:after
      content: ''
      position: absolute
      display: block
      width: 65px
      left: -18px
      height: 0
      opacity: 0.5
      transform: rotate(-45deg)
      border-top: solid 1px white
      z-index: 20

  ul
    list-style: none
    margin: 0
    padding: 0

    li
      position: relative
      padding-left: 0
      color: $pastelBlue
      font-size: 1.125rem
      line-height: 1.375rem

      + li
        margin-top: 16px


      a
        width: 100%
        text-decoration: none
        color: $semiLightBlue
        display: inline-block
        padding-right: 65px
        transition: color 0.3s

        &:hover
          color: lighten($semiLightBlue, 10%)

        &:after
          position: absolute
          top: 1px
          right: 0
          width: 18px
          height: 100%

          content: ""
          background-position: center center
          background-repeat: no-repeat
          background-image: url("/img/svg/arrow_small_color.svg")
          transition: background-position 0.2s

      &.active
        font-weight: bold
        position: relative

        &:before
          content: ''
          top: 6px
          left: -30px
          position: absolute

          width: 0
          height: 0
          border-bottom: 10px solid $red-500
          border-left: 10px solid transparent

        a
          color: white

          &:after
            display: none

        +respond-to-width(600)
          &:before
            left: 0

          a
            padding-left: 30px