.location-row
  position: relative
  background: #f6f6f6
  padding-bottom: 60px




  h1
    +font-header(36px, 36px)
    height: 50px
    color: white
    text-align: center
    position: relative
    top: -150px

  .content-container
    position: relative
    margin-bottom: 40px
    margin-top: -100px

    &.stick-content
      +position(fixed, 160px 0 null 0)
      z-index: 100
      +translate3d(0, -100%, 0)
      +transition(all 0.3s)

      .list
        .list-item
          height: 100px

      &.sticky
        +translate3d(0, 0, 0)


  .choose-location
    +position( absolute , 50px null null 0)
    width: $contentGrid*1.5
    +flex(flex-start, center)
    height: 110px

    p
      +font-bold(18px, 20px)
      color: $beige
      text-transform: uppercase
      letter-spacing: 1.8px
    .arrow
      +arrowRightBeige
      margin-left: 20px
      +translate3d(0,0,0)
      +transition(all 0.3s)

    &:hover
      .arrow
        +translate3d(5px, 0, 0)

  .list
    margin-left: $contentGrid*1.5
    +flex(space-between, flex-start)
    background: $beige
    +transition(width 0.3s)

    .list-item
      height: 160px
      +flex(center, center)
      cursor: pointer
      &:hover
        background: rgba(255, 255, 255, 0.1)
        p
          span
            width: 100%
            opacity: 0.3

      &.active
        background: rgba(255, 255, 255, 0.2)
        p
          span
            width: 100%
            opacity: 1

      .placeholder
        text-align: center
        width: 100%
      p
        +font-bold(20px)
        color: white
        text-transform: uppercase
        letter-spacing: 1.8px
        margin: 0 auto
        text-align: center
        display: inline-block
        position: relative

        span
          +position(absolute, null 0 -4px 0)
          width: 0px
          height: 2px
          background: white
          opacity: 0.3
          +transition(width 0.3s)

      .icon-holder
        height: 45px
        display: block
        .icon
          display: block
          margin: 0 auto 20px


      &.cursus
        .icon
          +sprite(0 -19px, 55px, 26px)
      &.meeting
        .icon
          +sprite(-56px -19px, 54px, 42px)
      &.partylocation
        .icon
          +sprite(-110px -20px, 26px, 43px)
      &.weekDay
        .icon
          +sprite(-140px -20px, 46px, 28px)

  .location-buttons
    position: absolute
    width: 100%


    .next-icon-location, .prev-icon-location
      position: absolute
      right: 0
      width: 10%
      max-width: 80px
      height: 160px
      background: $gray2
      opacity: 0
      z-index: -1
      cursor: pointer

      &:hover
        .arrow
          background: lighten($gray2, 4%)

      &.active
        opacity: 1
        z-index: 2

      .icon
        height: 80px
        +flex(center, center)
        span
          display: inline-block
          +transform(scale(0.8))

        &.cursus
          span
            +sprite(0 -19px, 55px, 26px)
        &.meeting
          span
            +sprite(-56px -19px, 54px, 42px)
        &.partylocation
          span
            +sprite(-110px -20px, 26px, 43px)
        &.weekDay
          span
            +sprite(-140px -20px, 46px, 28px)
      .arrow
        height: 80px
        +flex(center, center)

        span
          +arrowRightWhite
    .prev-icon-location
      right: auto
      left: 0

      .arrow
        span
          +arrowLeftWhite

  .locations
    width: 95%
    max-width: 1440px
    margin: auto
    position: relative
    min-height: 850px

    .location
      width: $contentGrid*9
      margin-left: $contentGrid*1.5
      opacity: 0
      position: absolute
      +translate3d(0,0,0)
      +transition(transform 0s, opacity 0.3s)

      &.activeLeft
        left: -100px
        +translate3d(100px,0,0)
        +transition(transform 0.3s, opacity 0.3s)
        z-index: 9
        opacity: 1
      &.activeRight
        left: 100px
        +translate3d(-100px,0,0)
        +transition(transform 0.3s, opacity 0.3s)
        z-index: 9
        opacity: 1

      &.active
        opacity: 1
        z-index: 9

      .left-block
        width: calc(100% / 9 * 4)
        float: left

        h2
          +font-header(36px)
          color: $beige

        p
          +font-default(18px, 26px)
          &:first-of-type
            margin-top: 50px
          &.intro
            +font-bold(22px, 32px)

          &.read-more
            +font-bold(18px)
            letter-spacing: 1.8px
            text-transform: uppercase
            cursor: pointer
            margin: 45px 0 45px
            &:after
              content: ''
              +arrowRightBlack
              margin-left: 30px
              +translate3d(0,0,0)
              +transition(all 0.3s)
            &:hover
              &:after
                +translate3d(5px, 0, 0)

      .right-block
        width: calc(100% / 9 * 4)
        float: right
        background: white
        -webkit-box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.04)
        -moz-box-shadow:    0px 5px 15px 0px rgba(0,0,0,0.04)
        box-shadow:         0px 5px 15px 0px rgba(0,0,0,0.04)

        .header
          padding: 45px 0
          +flex(center, center)
          text-align: center
          border-bottom: 1px solid rgba(202, 163, 88, 0.3)
          .icon
            &.cursus
              +sprite(0 -65px, 55px, 26px)
              display: inline-block
            &.meeting
              +sprite(-56px -65px, 54px, 42px)
              display: inline-block
            &.partylocation
              +sprite(-110px -65px, 26px, 43px)
              display: inline-block
            &.weekDay
              +sprite(-140px -65px, 46px, 30px)
              display: inline-block
          h4
            +font-bold(20px)
            text-transform: uppercase
            letter-spacing: 1.8px

        .list-check
          padding: 30px 0
          margin: 0
          border-bottom: 1px solid rgba(202, 163, 88, 0.3)

          ul
            list-style: none
            padding: 0 5px 0 8.5%
            li
              +flex(flex-start, flex-start)
              +font-bold(20px, 36px)
              margin-bottom: 5px
              color: $beige
              &:before
                content: ''
                +sprite(-190px -46px, 31px, 31px)
                display: inline-block
                margin-right: 15px
        .price
          height: 60px
          border-bottom: 1px solid rgba(202, 163, 88, 0.3)
          +flex(center, center)
          p
            text-align: center
            span
              +font-bold(20px)
              opacity: 0.5
            strong
              +font-default(40px)
              margin-left: 10px

        .reserve
          height: 120px
          +flex(center, center)
          a
            width: 80%
            background: $blue
            text-transform: uppercase
            height: 50px
            +font-bold(18px)
            color: white
            letter-spacing: 1.8px
            +flex(center, center)
            text-align: center
            max-width: 320px
            +transform(scale(1))
            +transition(all 0.3s)
            &:hover
              +transform(scale(0.95))

      .image-container
        height: 360px
        width: calc(100% / 9 * 10)
        margin-left: 100%/18*-1
        background-size: cover
        background-position: 50% 50%
        margin-top: 50px

+media-query(1100px)
  .location-row
    margin-top: 0 !important
    .content-container
      width: 100%

    h1
      top: -120px

    .list
      margin-left: 0
      width: 100%

+media-query(950px)

  .location-row
    .location-buttons
      .next-icon-location, .prev-icon-location
        height: 120px
        width: 60px
        .arrow, .icon
          height: 60px
        .icon
          span
            +transform(scale(0.6))
    .locations
      width: 100%
      .location
        width: 100%
        margin: 0 auto

        .image-container
          width: 100%
          margin-left: 0
        .left-block
          width: 80%
          max-width: 450px
          float: none
          margin: auto

        .right-block
          width: 80%
          margin: 0 auto
          min-width: 320px
          float: none
          position: relative

+media-query(800px)
  .location-row
    .content-container.stick-content
      top: 0

+media-query(700px)
  .location-row
    .location-buttons
      display: none
+media-query(650px)
  .location-row
    .list
      .list-item
        p
          +font-bold(16px, 24px)
          letter-spacing: 1.2px
+media-query(400px)
  .location-row
    .content-container
      .list
        .list-item
          p
            letter-spacing: 0

      &.stick-content

        .list
          .list-item
            p
              letter-spacing: 0