.show-sub-menu
  padding: 80px 0
  >p
    font-size: 1rem
    line-height: 1.2
    color: $darkGreen
    font-weight: 700
    margin: 0 0 1rem

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

    li
      font-size: 0.9rem
      line-height: 1.2
      border-bottom: 1px solid rgba($turquoise, 0.35)

      a
        +flex(space-between, flex-start)
        text-decoration: none
        color: $darkGreen
        padding: 15px 0
        transition: color 0.3s

        p
          margin: 0
          width: calc(100% - 27px)

        .arrow
          position: relative
          right: 4px
          top: 1px
          display: inline-block
          width: 9px
          transform: translate3d(0,0,0)
          transition: transform 0.5s

          svg
            width: 100%
            max-height: 18px
            transform-origin: center
            transform: rotate(270deg)

            &.arrow-icon
              .st0
                fill: $turquoise

        &:hover
          color: $darkerGreen
          .arrow
            transform: translate3d(8px,0,0)

      &.active
        a
          color: $darkerGreen
          font-weight: 700

  .overview-page &
    >p
      color: white

    ul

      li
        border-bottom-color: rgba(white, 0.35)

        a
          color: $lightTurquoise

          .arrow
            svg
              &.arrow-icon
                .st0
                  fill: white

          &:hover
            color: white

        &.active
          a
            color: white