.rooms-row
  position: relative
  overflow: hidden
  padding-bottom: 50px
  margin-bottom: -50px

  .rooms
    position: relative
    z-index: 5

  .selection
    width: $contentGrid * 1.5
    float: left
    padding: 50px 2% 0 0
    position: relative

    .overlay
      background: url("/img/forrest.jpg")
      background-size: cover
      background-position: 50% 50%
      height: 50px
      margin-bottom: 50px
      width: 100%
      opacity: 0.4
      display: none

    .header-holder
      height: 50px
      +flex(flex-end, flex-end)
      margin-bottom: 40px
      h3
        +font-header(36px, 36px)
        color: white
        text-align: right

    h5
      +font-bold(18px)
      color: white
      text-transform: uppercase
      text-align: right
      letter-spacing: 1.8px

    ul
      list-style: none
      border-right: 1px solid rgba(255, 255, 255, 0.3)
      padding: 0
      margin-top: 15px

      &:first-of-type
        margin-bottom: 45px

      li
        text-align: right
        color: white
        padding-right: 10px
        +font-default(18px, 18px)
        margin-bottom: 8px
        cursor: pointer
        &.active
          +font-bold(18px, 18px)

  .room-content
    width: $contentGrid * 4.5
    float: left
    position: relative
    background: white

    .room-text
      position: absolute
      padding: 50px calc(100% / 4.5 * 0.5)
      opacity: 0
      +translate3d(0,0 ,0)
      +transition(all 0.3s)
      z-index: -1
      &.active
        opacity: 1
        z-index: 1

      .header-holder
        height: 50px
        +flex(flex-start, flex-end)
        margin-bottom: 40px

        h4
          +font-bold(20px, 20px )
          text-transform: uppercase
          letter-spacing: 1.8px
      p
        +font-default(18px, 26px)

        sup
          position: relative
          vertical-align: initial
          top: -5px

    .next
      +position(absolute, null 0 -50px null)
      width: 50%
      height: 50px
      padding: 0 5%
      background: $gray3
      color: white
      +flex(space-between, center)
      opacity: 0
      cursor: pointer
      z-index: -1
      text-transform: uppercase
      +font-bold(18px)
      letter-spacing: 1.8px



      &:after
        content: ''
        +sprite(0 0, 13px, 13px)
        display: inline-block
        +translate3d(0,0,0)
        +transition(all 0.3s)

      &.active
        opacity: 1
        z-index: 1
        &:hover
          &:after
            +translate3d(5px, 0,0)

  .room-photos
    width: $contentGrid * 6
    float: left
    position: relative
    &:before
      content: ''
      width: 65px
      height: 100%
      position: absolute
      right: -65px
      top: 0
      background-image: url('/img/shadow1.png')
      background-size: contain
      background-repeat: no-repeat
      background-position: 0 0
    &:after
      content: ''
      width: 100%
      height: 65px
      position: absolute
      right: 0
      bottom: -65px
      background-image: url('/img/shadow2.png')
      background-size: contain
      background-repeat: no-repeat
      background-position: 0 0

    .image-slider
      +position(absolute, 0 0 0 0)
      height: 100%
      width: 100%
      opacity: 0

      &.active
        opacity: 1

      .image
        +position(absolute, 0 0 0 0)
        width: 100%
        height: 100%
        background-size: cover
        background-position: 50% 50%
        opacity: 0
        +transition(all 0.8s)
        +transition-delay(0.2s)

        &.active
          opacity: 1
          +transition-delay(0s)

  .controllers
    +position(absolute, null -20px null null)
    margin-top: 5.5%
    z-index: 8
    display: block

    .next, .prev
      cursor: pointer
      border: 1px solid rgba(255, 255, 255, 0.3)
      border-radius: 9999px
      height: 40px
      width: 40px
      +flex(center, center)
      margin: 0
      padding: 0
      span
        margin: 0
        padding: 0
        +transition(all 0.3s)

    .next
      margin-bottom: 10px
      span
        +arrowRightWhite
    .prev
      +transition(all 4s)
      span
        +arrowLeftWhite
        +transition(all 4s)

  .background
    position: absolute
    top: 0
    left: 0
    height: calc(100% - 50px)
    width: 50%
    background: $beige
    z-index: 1

.forrest-rooms
  width: 100%
  background: #5B5445
  position: relative
  overflow: hidden

  .image
    +position(absolute, 0 0 0 0)
    width: 100%
    height: 100%
    background: url("/img/forrest.jpg")
    background-size: cover
    background-position: 50% 50%
    opacity: 0.4

  .content-container
    position: relative
    height: 100%
    .logo
      +position(absolute, 25% 0 null null)
      margin-right: -140px
      height: 282px
      width: 280px
      +transform(rotate(16deg))

+media-query(1115px)
  .rooms-row
    .background
      display: none
    .content-container
      width: 100%

      .selection
        width: 100%
        background-color: #5B5445
        padding: 0

        .overlay
          display: block


        &:after
          content: ''
          float: left
          clear: both
        .header-holder, .main-building, .side-building
          width: calc(100% /3.5)
          display: inline-block
          float: left
          z-index: 5
          position: relative
        .main-building, .side-building
          float: right
          padding-right: 10%

      .room-content
        width: 100%
        padding: 50px 10%
        .room-text
          padding: 0
          width: 80%
          max-width: 450px
      .room-photos
        width: 100%

    .controllers
      margin: 0
      bottom: 20px
      right: 5px
  .forrest-rooms
    top: 0 !important
    height: 200px !important
    .content-container
      display: none

+media-query(550px)
  .rooms-row
    .content-container
      .selection
        .header-holder
          display: block
          width: 100%
          padding: 0 10%
          margin-bottom: 10px

        .main-building, .side-building
          width: 50%
          padding: 0 10%

+media-query(450px)
  .rooms-row .room-content .next
    display: none