.header-area .palatin-main-menu .classy-navbar .classynav ul li a {
      color: #FFF
  }

  .topsection .overlay {
      background: rgba(0, 0, 0, .2);
  }

  .topsection .swaper h2 {
      font-size: 50px;
      color: #FFF;

      /* white-space: nowrap; */

  }

  

  .topsection .maskbig img {
      top: -20%;
  }

  .room {
      position: relative;
      /*       overflow: hidden; */
  }

  .room .handwrite {
      font-size: 60px
  }


  .overtherainbow {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 1;
      /* overflow: hidden */
  }

  .swape {
      position: absolute;
      top: 0;
      left: 0;
      width: 50%;
      height: 100%;
      padding: 100px;
      background: rgba(0, 0, 0, .5);

  }

  .mt100 {
      margin-top: 100px
  }

  .roomspec ul {
      list-style: none;
  }

  .roomspec li {
      font-size: 22px;
      color: #FFF;
      line-height: 2em
  }

  .roomspec li img {
      vertical-align: middle;
      margin-right: 10px;
      max-width: 50px
  }

  #room1 {
      margin-top: -300px;

  }

  .room {
      margin-bottom: -10px !important;
      /* overflow: hidden; */
  }

  .room h3:before {
      content: '+ '
  }

  .price h2 {
      font-size: 40px;
      color: #0099ff;
      text-shadow: none
  }

  .price h2:after {
      content: " THB";
      font-size: 20px
  }

  section {
      margin: 0;
      padding: 0;
  }

  #room1 {
      margin-top: -200px;
      /* z-index: -1; */

  }

  .swape {
      width: 50% !important;
  }

  .swape>div {
      position: absolute;
      top: 50%;

      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
  }

  .swape h1 {
      color: #FFF;
      letter-spacing: 1.5px;
      text-transform: uppercase !important;
      margin: 80px 0 0 0;
      font-size: 40px
  }


  .swape2 {
      right: 0 !important;
      left: auto !important
  }

  @media(max-width: 992px) {
      .mt100 {
          margin-top: 0
      }

      .swape {
          height: 100vh;
          width: 50%;
          padding: 40px;
          left: 0;
          top: 0;
          -webkit-transform: none;
          -moz-transform: none;
          -ms-transform: none;
          transform: none;

      }

      .swape h1 {
          font-size: 30px;
      }


      .roomspec li {
          font-size: 18px;
          vertical-align: middle;
          /*           white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis */
      }

      section {
          min-height: auto !important
      }

      #room1 {
          margin: -80px 0 0 0;
      }

      .room .handwrite {
          font-size: 60px
      }
  }

  @media(max-width: 480px) {
      #room1 {
          margin: -50px 0 0 0;
      }

      #room1 h1 {
          margin-top: 40px !important
      }

      .swape {
          width: 100% !important;
          padding: 30px;
      }

      .swape h1 {
          font-size: 20px;
          margin: 30px 0 0 0;
          white-space: normal;
      }

      .swape>div {
          top: 0;

          -webkit-transform: translate(0);
          -moz-transform: translate(0);
          -ms-transform: translate(0);
          transform: translate(0);
      }

      .roomspec li {
          font-size: 14px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          width: 100%;
          margin: 0
      }

      .roomspec li>img {
          height: 20px
      }

      .price h2 {
          font-size: 20px;
          margin: 10px 0;
      }

      .swape a {
          margin: 0;
          font-size: 16px;
          padding: 5px 20px;
      }
  }

  #roomlist h1 {
      color: #FFF;
      font-weight: 600
  }

  #roomlist h2 {
      color: #FFF;
      margin: 0;
      font-size: 20px
  }

  #roomlist h3 {
      color: #FFF;
      margin: 20px 0 0 0;
      font-size: 14px;
  }

  #roomlist h3:before {
      content: ""
  }

  .roomspec li {
      font-size: 16px;
      display: -webkit-box;
      /* OLD - iOS 6-, Safari 3.1-6 */
      display: -moz-box;
      /* OLD - Firefox 19- (buggy but mostly works) */
      display: -ms-flexbox;
      /* TWEENER - IE 10 */
      display: -webkit-flex;
      /* NEW - Chrome */
      display: flex;
      /* NEW, Spec - Opera 12.1, Firefox 20+ */
  }

  .price {
      margin: 30px 0 10px 0;
      border-top: 1px solid #FFF;
      border-bottom: 1px solid rgba(255, 255, 255, .5);
      clear: both;
      padding: 20px 0;
      text-align: right
  }

  .price h2 {
      font-weight: 800;
      font-size: 30px
  }

  .price h2:before {
      content: " Price ";
      color: #FFF;
      font-size: 15px;
      vertical-align: text-top
  }

  .price h2:after {
      content: " THB /Night ";
      color: #FFF;
      font-size: 12px;
      text-transform: uppercase;
  }



  .swape {
      width: 60% !important;
      padding: 30px;

  }

  .roomspec {
      columns: 3;
      -webkit-columns: 3;
      -moz-columns: 3;
  }

  .roomspec li>img {
      width: 100% !important;
      height: auto;

  }

  .roomspec li>div:first-child {
      /*   width: auto;
      float: left */
  }

  .roomspec li>div:last-child {
      width: 60%;
      float: left;
      position: relative;
  }

  .roomspec li>div:last-child h3 {
      position: absolute;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);

      margin: 0 !important;
      padding: 0 !important;
      line-height: 1.2em;
      white-space: normal !important
  }

  .swape>div {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      width: 90%
  }

  @media(max-width: 1500px) {
      .swape {
          width: 70% !important;
      }

      .roomspec {
          columns: 3;
          -webkit-columns: 3;
          -moz-columns: 3;
      }

      .swape>div {
          position: relative;
          top: 0;
          left: 0;
          transform: none;
          width: 100%
      }

      .swape {
          padding: 100px 40px 0 40px
      }
  }

  @media(max-width: 1200px) {
      .swape {
          width: 100% !important;
          position: relative;
          padding: 20px 40px 40px 40px;
          margin-bottom: -10px;
      }

      .overtherainbow {
          position: relative;
          background: rgba(0, 0, 0, .8);
          margin: -10px 0 10px 0
      }

      .roomspec {
          columns: 3;
          -webkit-columns: 3;
          -moz-columns: 3;
      }

      .swape h1 {
          font-size: 25px
      }

      .price h2 {
          font-size: 40px !important
      }

      .swape a {
          width: 100%;
          float: none
      }
  }

  @media(max-width: 767px) {
      .roomspec li>div:first-child {
          width: auto;
          float: left
      }

      .roomspec li>div:last-child {
          width: 50%;
          float: left;
          position: relative;
      }

      .roomspec {
          columns: 2;
          -webkit-columns: 2;
          -moz-columns: 2;
      }
  }

  .bookspace {
      padding: 20px;
      width: 100%;
      background: #333;
      text-align: center
  }

  @media(max-width: 480px) {
      .roomspec {
          columns: 1;
          -webkit-columns: 1;
          -moz-columns: 1;
      }

      .bookspace {
          position: fixed;
          top: auto;
          left: 0;
          right: 0;
          bottom: 0;
          z-index: 99
      }

  }



  .swape a,
  .bookspace a {
      /* booknow */
      background: #0099ff;
      padding: 12px 35px;
      margin: 0 auto;
      font-size: 22px;
      color: #fff;
      letter-spacing: 1px;
      text-align: center;
      text-decoration: none;
      border: 0;
      outline: 0;
      display: inline-block;
      -webkit-transform: skew(-21deg);
      transform: skew(-21deg);
      cursor: pointer;
      z-index: 999
  }

  .swape a {
      float: right
  }

  .swape a>span,
  .bookspace a>span {
      display: inline-block;
      -webkit-transform: skew(21deg);
      transform: skew(21deg);
  }

  .swape a {
      float: none
  }

  .btn-gallery {
      -webkit-transform: skew(0deg) !important;
      transform: skew(0deg) !important;
      margin: 20px auto !important;
      display: block;
      font-size: 16px !important;
      float: left !important
  }

  .price {
      padding: 20px 0 60px 0;
  }

  #roomlist h2 {
      font-size: 30px
  }