img
  border-style: none

.menu
  .menu__item
    .btn-empsignup
      color: #fff
      margin-left: 5px
      margin-right: 5px
      border-radius: 5px
      padding-left: 10px
      padding-right: 10px

      &:hover
        color: #fff
    .btn-empsignup
      background:
        color: $firm-color-blue
      border:
        color: $firm-color-blue-border
      padding: 9px 10px 8px
      &:hover
        color: #fff
        border:
          color: $firm-color-blue-border-hov

.boxy__menu
  width: 100%
  margin: 0 auto
  position: fixed
  z-index: 5
  top: 0
  left: 0

.no-overflow
  overflow: hidden

.menu__wrapper
  overflow: hidden
  -webkit-transition: max-height .2s ease-in-out
  transition: max-height .2s ease-in-out

.menu__wrapper
  display: flex
  position: relative
  -webkit-box-pack: justify
  -ms-flex-pack: justify
  justify-content: space-between
  height: 68px
  margin: 0 auto
  overflow: visible

.menu--wrapper--mobile-open
  max-height: calc(100vh)

.menu__logo-wrapper
  display: -webkit-box
  display: -ms-flexbox
  display: flex
  -webkit-box-align: center
  -ms-flex-align: center
  align-items: center
  -webkit-box-pack: justify
  -ms-flex-pack: justify
  justify-content: space-between
  height: 74px
  padding: 0 1.5625rem
  border-bottom: 1px solid rgba(255, 255, 255, 0.5)

.menu__logo-wrapper
  height: auto
  padding: 0
  border-bottom: none

.menu__logo
  width: 100%
  max-width: 175px

.menu__logo-transparent-nav
  display: none
  width: 277px
  max-width: 277px
  margin-bottom: 10px

.menu__mobile-hamburger
  -webkit-box-ordinal-group: 2
  -ms-flex-order: 1
  order: 1

  span
    display: block
    position: relative
    left: 0
    width: 30px
    height: 2px
    margin: 7px 0
    -webkit-transition: left .2s ease
    transition: left .2s ease
    background: #fff

.menu__mobile-hamburger
  display: none

.menu__mobile-hamburger--open span
  &:first-child
    left: -5px

  &:last-child
    left: 5px

.menu--mobile-back-button
  display: none

.menu--mobile-back-button--visible
  display: -webkit-box
  display: -ms-flexbox
  display: flex
  -webkit-box-align: center
  -ms-flex-align: center
  align-items: center
  width: 100%
  height: 52px
  padding: 0 25px
  border-bottom: 1px solid rgba(255, 255, 255, 0.5)
  color: #fff
  font-size: 18px
  font-weight: 900

  img
    margin-right: 19px

.menu
  width: 100%
  height: calc(100vh - 74px)
  margin: 0
  padding: 10px 10px
  overflow-x: hidden
  overflow-y: auto
  -webkit-transition: margin-left .3s ease
  transition: margin-left .3s ease
  -webkit-clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%)
  clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%)

.menu
  display: -webkit-box
  display: -ms-flexbox
  display: flex
  -webkit-box-orient: horizontal
  -webkit-box-direction: normal
  -ms-flex-flow: row nowrap
  flex-flow: row nowrap
  -webkit-box-pack: end
  -ms-flex-pack: end
  justify-content: flex-end
  width: 100%
  max-height: 68px
  overflow-y: hidden
  list-style: none
  -webkit-clip-path: none
  clip-path: none

.menu--wrapper--mobile-open .menu
  margin-left: 0
  padding-bottom: 90px

  &:before
    content: ''
    position: absolute
    bottom: 0
    width: 100%
    height: 50px
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(17, 61, 239, 0)), to(#103beb))
    background-image: linear-gradient(to bottom, rgba(17, 61, 239, 0), #103beb)
    pointer-events: none

.menu--mobile-back-button--visible .menu
  height: calc(100vh - 127px)

.menu__link
  display: -webkit-box
  display: -ms-flexbox
  display: flex
  -webkit-box-align: center
  -ms-flex-align: center
  align-items: center
  margin-bottom: 10px

.menu__link a
  display: inline-block
  padding: 10px
  color: #fff
  font-size: 18px
  font-weight: 400
  text-decoration: none


.menu__link a
  width: 90%
  color: #000
  font-size: 16px

  &:hover
    border-radius: 2px
    background-color: #f8fafb
    color: #1E75BC
    text-decoration: none


.menu__item
  display: flex
  box-sizing: border-box
  flex-direction: column
  align-items: center
  justify-content: center

.menu__item
  &:first-child
    padding: 30px 0 0 0

  &.menu__item--selected
    padding: 20px 0 30px 0

  &.menu__item--unselected
    display: none

.menu__item:first-child
  padding: 0

  &:hover .menu__item-label::after
    left: -275px
    width: calc(100% + 275px)
    height: 40px

.menu__item--selected > .menu__item-label
  display: none

.menu__item-label
  display: block
  padding: 25px 10px
  color: #fff
  font-weight: 500
  letter-spacing: 1px
  text-decoration: none
  text-transform: uppercase
  white-space: nowrap


.menu__item-label
  font-size: 14px

  &:hover
    color: #fff
    text-decoration: none
    cursor: pointer

.menu__item--with-submenu
  cursor: default
  display: flex
  align-items: center

.dropdown__menu
  position: absolute
  list-style: none
  width: 12rem
  background: #f8fafb
  justify-content: center
  flex-direction: column
  display: flex
  gap: 1rem
  border-radius: 0 0 18px 18px
  box-shadow: 0px 6px 6px 0px rgba(0, 0, 0, 0.25)
  padding: 20px
  visibility: hidden
  opacity: 0
  transition: .2s linear all
  z-index: 3
  right: -2rem
  top: 4.4rem
  @include phone
    width: 100%
    left: 0
    right: unset
    top: unset

.has-dropdown:hover .dropdown__menu
  visibility: visible
  opacity: 1

.dropdown__menu li
  img
    width: 20px
    &:hover
      fill: white
  display: flex
  flex-direction: row
  align-items: center
  gap: 1rem
  color: black
  padding: 1rem
  border-radius: 10px
  transition: .2s linear all

  &:hover
    background:#D8A500
    // color: white
    text-decoration: none

.menu__submenu--5-column
  .custom-row
    width: 100%
    margin: 0 auto
  .media
    flex-direction: column
    .mr-4
      width: 100%
  .card
    transition: .5s ease-in-out
    height: 95%
    border: none
    box-shadow: 0px 0px 10px rgba(0, 0, 0, .1)
    @include phone
      padding: 0 12px !important
      .text-center
        padding-left: 0 !important
        margin-bottom: .4rem !important
    &:hover
      box-shadow: 0px 0px 10px rgba(0, 0, 0, .21)
      .card-title
        transition: .5s ease-in-out
        color: #848484
  .resource-hover
    overflow: hidden
    transition: .5s ease-in-out
    box-shadow: 0 1px 50px 0 rgba(0, 0, 0, .2)
    padding: 1rem
    border-radius: 20px

    &:hover
      .resource-new-hover
        transform: scale(1.04)
        padding: 2rem 1rem 1rem 1rem
  .resource-new-hover
    transition: .1s ease-in-out
    padding: .5rem
    h2
      font-size: 14px
      border-bottom: 1px solid #b9bed1
      padding-bottom: 1rem
      margin-bottom: 2rem
      text-transform: uppercase
      @include desktop
        font-size: 0.8rem
  .img-fluid
    width: 35px
    margin: 0 auto
    padding-top: 7px
  .card-title
    font-size: 1rem
    margin-bottom: .5rem
    color: #000
    text-transform: capitalize
    white-space: pre-line    
    @include desktop
      font-size: 0.8rem
    @include phone
      font-size: .7rem
      text-align: center
      margin-bottom: 0 !important
  .card-text
    font-size: .8rem
    color: #000
    white-space: pre-line
    @include desktop-sm
      font-size: 0.6rem
    @include desktop
      font-size: 0.6rem
    @include phone
      display: none
  .media-body
    margin-top: .5rem
    .text-secondary
      text-transform: uppercase
      font-size: .8rem
      font-weight: 400
    h6
      margin-top: .4rem
      color: #3a405b
      white-space: pre-line
      @include desktop-sm
        font-size: 0.8rem
      @include desktop
        font-size: 0.8rem
  .menu__submenu--5-column--active
    transform: translateY(0)
  .custom-mb
    margin-bottom: 3rem
    @include phone
      margin-bottom: 1rem
      max-width: 50%
.new-menu-video
  height: 34vh
  iframe
    width: 100%
    height: 100%
  .fitVids-wrapper
    padding: 0 !important
    height: 100%
    width: 100%
    iframe
      width: 100%
      height: 100%
.menuhubnav
  .collapse
    display: block !important
.custom-font
  @include phone
    font-size: .8rem
.mobile-menu-btn
  display: flex
  align-items: center
  padding: 8px 12px
  a
    display: flex
    align-items: center
    transition: .5s ease-in-out
    span
      height: 15px
      width: 15px
      display: flex
      align-items: center
      margin-left: 4px
      transition: .5s ease-in-out
      @include phone
        display: none
  button
    position: relative
    padding: 0 !important
    height: 17px
    width: 17px
    svg
      position: absolute
      top: 0
      left: 0
      right: 0
      bottom: 0
      z-index: 999
  @include phone
    font-size: .8rem
.menu__submenu--5-column
  .custom-row
    @include phone
      width: 100%
      position: absolute
      left: 0
      height: 100%
      overflow: hidden
      align-content: flex-start !important
      margin-top: 1rem
      .resource-hover
        display: none
.menu__submenu--5-column--active
  @include phone
    height: 70vh !important
    background-color: #fff
    padding: 1rem 0 
    margin-top: .5rem
    position: fixed
    top: 3rem
    left: 0
    right: 0
    z-index: 99
    transition: all .5s linear ease-in-out
    transition-delay: 40ms
    -webkit-transition: all 0.2s linear
    -moz-transition: all 0.2s linear
    -o-transition: all 0.2s linear
    transition: all 0.2s linear    
  .resource-hover
    @include phone
      flex: auto 
      max-width: 100%
      display: none
.custom-overflow
  overflow: hidden      
.custom-resource-overflow
  overflow: hidden  
.custom-flex-8
  @include phone
    flex: auto
    max-width: 100%
    .container
      @include phone
        max-width: 100%
        padding: 0
.sub-menu-close
  display: none
  @include phone
    display: block
.for-mobile-only
  @include phone
    overflow: hidden
.menu__submenu-column
  display: inline-block
  -webkit-box-sizing: border-box
  box-sizing: border-box
  -webkit-box-flex: 1
  -ms-flex: 1 0 auto
  flex: 1 0 auto
  width: 19.5em
  margin: 0
  padding: 0px 20px
  vertical-align: top

.menu__submenu--1-column
  border-right: 0

.menu__submenu--2-column
  right: 0

.menu__submenu--3-column
  min-height: 31.25rem


.menu__submenu--3-column
  min-height: auto

.menu__submenu--4-column
  min-height: 40.625rem

.menu__submenu--4-column
  min-height: auto

.menu__submenu--3-column, .menu__submenu--4-column
  left: 50%
  -webkit-transform: translateX(-50%)
  transform: translateX(-50%)

.menu__submenu--2-column .menu__submenu-column
  max-width: calc(100vw / 2 - 1px)

.menu__submenu--3-column .menu__submenu-column
  max-width: calc(100vw / 3 - 1px)

.menu__submenu--4-column .menu__submenu-column
  max-width: calc(100vw / 4 - 1px)

.menu__submenu li
  display: -webkit-box
  display: -ms-flexbox
  display: flex

.menu__submenu-column:not(:first-child)
  border-left: 1px solid #e3e3e3

.menu__submenu--visible
  display: block

.menu__submenu--1-column
  margin-left: -160px

.menu__submenu--2-column
  margin-left: -320px

.menu__link-icon
  display: inline-block
  width: 40px
  height: 20px
  margin-left: 15px
  background-repeat: no-repeat
  background-position: center
  vertical-align: middle

.menu__link-icon
  height: 30px
  margin-left: 0

.menu__link-icon--learn-sub-menu-icon
  height: 25px
  padding-top: 10px

.menu__link-icon--learn-sub-menu-icon 
  height: 45px
  padding-top: 10px

.alta-header 
  .topbar 
    .ml-4
      @include phone
        display: flex !important
.custom-flex-8
  .container
    @include desktop
      max-width: 100%
.menu__submenu--5-column 
  .resource-hover
    height: 100% !important
    h2
      @include desktop-sm
        font-size: 1.6rem
      @include desktop
        font-size: 1.5rem

.menu__submenu--5-column 
  .custom-mb
    @include desktop-sm
      margin-bottom: 1rem !important
    @include desktop
      margin-bottom: 0rem !important
.topbar
  display: none

.menu__submenu
  position: absolute
  top: 34px
  box-sizing: border-box
  border-right: 1px solid #ddd
  border-bottom: 1px solid #ddd
  padding: 20px
  border-left: 1px solid #ddd
  border-radius: 0 0 4px 4px
  background-color: #f8fafb
  box-shadow: 0 2px 42px 0 rgba(0, 0, 0, 0.16)
  list-style: none
  text-align: left
  right: 0
  left: 0
  top: -3rem
  overflow: hidden
  width: 100%
  z-index: -1 
  height: 0
  transition-delay: 40ms
  display: unset
  -webkit-transition: all 0.3s linear
  -moz-transition: all 0.3s linear
  -o-transition: all 0.3s linear
  transition: all 0.3s linear
  pointer-events: none !important
  @include phone 
    z-index: 2000
.menuhubnav
  &:hover
    .menu__submenu
      overflow-x: auto !important
      top: 4rem !important
      pointer-events: auto !important
      height: 63vh
      @include desktop-sm
        height: 74vh
      @include desktop
        height: 76vh
      @include phone
        overflow: hidden
        height: 100%
        top: 4rem !important
      &::-webkit-scrollbar-track 
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3) 
        border-radius: 10px 
        background-color: #F5F5F5 
      &::-webkit-scrollbar 
        width: 7px 
        background-color: #F5F5F5 
      &::-webkit-scrollbar-thumb 
        border-radius: 10px 
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3) 
        background-color: #212529         
         

.menu__submenu-column
  margin: 0
  padding: 0
  list-style: none
  text-transform: capitalize

.dropdown-toggle
  &::after
    font-size: 1.2rem

#submenuIcon
  width: 40px
  height: 40px