nav.category-menu
  width: 300px
  position: relative
  font-size: 18px
  line-height: 29px
  background-color: #3C414B
  z-index: 10
  border-radius: 5px
  padding-top: 17px

  h2
    color: white
    margin: 0 20px 17px 20px
    font-size: 16px
    font-weight: bold
    line-height: 26px
    text-transform: uppercase

  > ul
    position: relative
    display: block
    z-index: 10
    //top: 60px
    left: 0
    margin: 0
    background-color: $euroOffWhite
    box-shadow: 5px 5px 20px 0 rgba(33,48,112,0.05)
    color: $euroSubHeaderGrey
    font-family: $headerFontFamily
    list-style: none
    padding: 25px 0
    height: 0
    min-height: 255px
    overflow: hidden
    transition: height 0.4s

    .bg
      display: block
      width: 150%
      height: 100%
      position: absolute
      top: 0
      left: 0
      z-index: -1
      opacity: 0
      background-color: rgba(0,0,0,0.3)
      transform: translate3d(0%, 0, 0)
      transition: opacity 0.2s, transform 0s 0.2s

    li
      padding: 0
      a
        font-size: 18px
        line-height: 29px
        padding: 6px 20px
        display: block
        position: relative
        z-index: 2
        text-decoration: none
        color: $euroSubHeaderGrey

        &:hover
          background-color: $euroLighterGrey
          border-left: solid 5px $blue
          padding-left: 15px

      &.active
        a
          background-color: $euroLighterGrey
          border-left: solid 5px $blue
          padding-left: 15px

    ul
      display: block
      width: 100%
      height: auto
      position: absolute
      top: 0
      right: 0
      padding: 0
      padding-left: 16.5%
      background-color: transparent
      z-index: 5
      list-style: none
      transform: translate3d(100%, 0, 0) translateZ(0)
      transition: transform 0.4s

      &.open
        transform: translate3d(0, 0, 0) translateZ(0)

        .bg
          opacity: 1
          transform: translate3d(-80%, 0, 0)
          transition: opacity 0.2s, transform 0s

        li
          &.subcategory-header
            .back-button
              left: -20%


      &:after
        content: ''
        position: absolute
        display: block
        width: 83.5%
        height: 100%
        right: 0
        top: 0
        z-index: 0
        background-color: white
        box-shadow: -5px 0px 15px -5px rgba(0,0,0,0.5)

      li
        z-index: 6
        display: block
        position: relative

        //&:hover
        //  padding-left: 15px

        &.subcategory-header
          border-bottom: solid 1px #C8CDD2
          padding: 0

          a:hover
            border-left: none
            //padding-left: 18px

          .back-button
            position: absolute
            display: block
            left: -19%
            top: 0
            width: 20%
            height: 100%
            background-color: $blue
            color: white
            padding: 12px 15px
            z-index: 10
            cursor: pointer
            box-shadow: inset -5px 0px 15px -5px rgba(0,0,0,0.5)

          h4
            margin: 0
            margin-top: 5px
            font-size: 14px
            line-height: 20px
            color: $euroDarkGrey
            text-transform: uppercase
            position: relative

          svg
            position: absolute
            right: 18px
            top: 15px

          a
            padding: 10px 18px
            position: relative

            &:hover
              background-color: darken(white, 5%)

        a
          text-decoration: none

.side-block
  height: 180px
  +flex(center, center)
  flex-direction: column
  position: relative

  a.button
    min-width: 180px
    box-shadow: 5px 5px 20px 0 rgba(33,48,112,0.1)

  &.first
    padding: 20px 0

    &.home
      height: auto

    a.button
      margin: 28px 0

    .img-holder
      position: absolute
      top: -128px
      left: 20px
      z-index: 0

      img
        height: 330px

  &.second
    +flex(space-evenly, center)
    background-color: $euroLighterGrey
    text-align: center
    margin-bottom: 60px
    z-index: 5
    height: 166px
    box-shadow: 2px 2px 10px 0px rgba(48,127,211,0.05)

    svg
      position: absolute
      top: -15px
      left: -15px

    p
      margin: 0
      color: #848D9B
      font-size: 15px
      font-weight: 600
      line-height: 22px

      a
        color: #3291FF
        text-decoration: none

  &.last
    height: 140px
    padding: 20px 40px
    background-color: white
    font-size: 15px
    line-height: 24px
    font-family: $headerFontFamily
    color: $euroDarkGrey
    box-shadow: 2px 2px 15px 0px rgba(22,57,95,0.05)
    align-items: flex-start

    +respond-to-width(1280)
      padding: 20px

    p:first-child
      font-weight: 600
      color: #848D9B
      padding-left: 65px
      margin-bottom: 0

    span
      display: inline-block
      height: 15px
      font-weight: 600
      margin-right: 20px

      svg
        position: relative
        top: 2px
        margin-right: 5px


body.home
  .side-block.first
    margin-top: 0


+respond-to-width(950)

  nav.category-menu
    width: 100%
    padding-top: 0
    background-color: transparent
    display: none

    h2
      display: none

    > ul
      padding: 0
      min-height: auto
      height: auto
      box-shadow: none

      li
        position: relative
        padding: 10px 20px
        border-bottom: 1px solid #E0E1E3

        a
          font-family: $fontFamily
          color: #3C414B
          font-size: 16px
          font-weight: bold
          line-height: 24px

          &:hover
            border-left: none
            background-color: transparent
            padding-left: 20px

        &:after
          position: absolute
          top: 0
          right: 20px
          width: 5px
          height: 100%
          content: ""
          background-position: 0 center
          background-repeat: no-repeat
          background-image: url("/img/svg/arrow/arrow_dark.svg")
          transition: transform 0.2s

        &.active
          border-bottom: solid 2px $blue
          a
            color: $blue
            border-left: none
            background-color: transparent
            padding-left: 20px

          &:after
            background-image: url("/img/svg/arrow/arrow_blue.svg")
            transform: rotate(90deg)

      ul
        position: relative
        transform-origin: 0 0
        transform: translate3d(0, 0, 0) translateZ(0)
        padding-left: column(1,12)
        z-index: -1
        opacity: 0
        height: 0

        li
          height: 0
          padding: 0 20px
          border-bottom: none
          &.subcategory-header
            border-bottom: none
            .back-button
              display: none

          &.active
            border-bottom: solid 1px rgba(0,0,0, 0.1)
            border-top: solid 1px rgba(0,0,0, 0.1)
            background-color: white

            &:last-of-type
              border-bottom: none

            &:after
              transform: none

        &.open
          height: 100%
          opacity: 1
          border-bottom: solid 1px rgba(0,0,0, 0.1)

          .bg
            width: 50%
            background: linear-gradient(90deg, rgba(238,238,238,0) 0%, rgba(238,238,238,1) 100%)
            box-shadow: inset -15px 0px 25px -10px rgba(0, 0, 0, 0.2)

          li
            height: 100%
            padding: 10px 20px
            &.subcategory-header
              display: none

        &:after
          width: column(11,12)
          background-color: #F0F5FA
          box-shadow: none

  .side-block
    &.first
      display: none

    &.second
      display: none

    &.last
      display: none