.nav
  .header-nav-container
    background: white
    display: flex
    height: 67px
    justify-content: space-between
    align-items: center
    position: relative
    padding: 0px 20px
    .main-submenu
      // margin: 0
      // list-style: none
      // white-space: nowrap
      // padding: 5px
      // z-index: 1
      // position: absolute
      // top: 100%
      // left: 0
      // background: grey
      // padding: 10px 20px
      // padding-top: 40px
      // //display: none
      // min-width: calc(100%)
      a
        font-size: 14px
        color: $black
        text-decoration: none !important
    .header-main-menu
      font-family: 'Gotham Pro'
      font-weight: 400
      span
        z-index: 2
      .header-main-menu-list
        margin-left: -40px
        margin-bottom: 0px
        margin-top: 0px
        list-style: none
        display: flex
        .header-main-menu-list__item
          text-transform: uppercase
          color: $black
          font-family: 'Gotham Pro'
          font-weight: 400
        .with-submenu
          > span
            padding-right: 15px
            cursor: default
            z-index: 2
            &::after
              content: ''
              position: absolute
              top: 5px
              right: 0px
              width: 0
              height: 0
              border-left: 4px solid transparent
              border-right: 4px solid transparent
              border-top: 6px solid $black
          &:hover
            .main-submenu
              display: block
          .main-submenu
            padding: 0
            margin: 0
            list-style: none
            white-space: nowrap
            padding: 5px
            z-index: 1
            position: absolute
            top: calc(100% - 40px)
            left: 0
            background: white
            padding: 20px 20px
            padding-top: 80px
            //display: none
            min-width: calc(100%)
            a
              font-size: 14px
              color: $black
              text-decoration: none !important
          .main-menu-sub-2, .main-menu-sub-3, .main-menu-sub-4
            li
              list-style: none
              .main-submenu2
                justify-content: center
                li
                  width: 16%
                  a
                    svg
                      border-right: 1px solid lightgrey
                      width: 100%
                      height: 90px
                    span
                      display: block
                      max-width: 100%
                      text-align: center
                      word-spacing: 1337px
                      white-space: normal
                      line-height: 18px
                      .invisible
                        display: inline
                        color: white
                  &:last-child
                    a
                      svg
                        border-right: none
          .main-menu-sub-1
            li
              list-style: none
            > li, ul
              display: flex
              flex-flow: row nowrap
              justify-content: flex-start
            > li
              > a
                font-size: 20px
                font-family: 'Gotham Pro'
                font-weight: 800
                letter-spacing: -0.5px
                display: block
                width: 25%
                margin-top: 4px
            .main-submenu2
              border-top: 1px solid lightgrey
              width: 82%
              margin-top: 20px
              padding-top: 15px
              li
                flex-basis: 19%
              a
                display: flex
                flex-flow: column nowrap
                align-items: center
                svg
                  width: 100%
                  height: 90px
                &:hover
                  svg
                    .st1, .st0, .st2, .st3
                      stroke: $hyellow
                span
                  display: block
                  max-width: 100%
                  text-align: center
                  word-spacing: 1337px
                  white-space: normal
                  line-height: 18px
              .premium-menu-item
                margin-top: -15px
                margin-bottom: -20px
                background-color: $black
                svg
                  position: relative
                  top: 0px
                  .st0
                    stroke: $lyellow
                &:hover
                  svg
                    position: relative
                    top: -3px
                a
                  margin-top: 15px
                  color: $lyellow
                  font-family: 'Gotham Pro'
                  font-weight: 800

          .main-menu-sub-2, .main-menu-sub-3, .main-menu-sub-4
            .main-submenu2
              display: flex
              flex-flow: row nowrap
              justify-content: center
              a
                display: flex
                flex-flow: column nowrap
                align-items: center
                svg
                  width: 150px
                  height: 150px
                &:hover
                  svg
                    .st1, .st0, .st2, .st3
                      stroke: $hyellow