h3 {
  margin-bottom: 61px;
  font-size: 64px;
  line-height: 76px;
}
/*
|----------------------------------------------------------------
| header
|----------------------------------------------------------------
*/
.bnr .wrapper {
  background-image: url(../images/cambie-village/cambie-village-bnr.jpg);
  height: 100vh;
}


.top-menu > a {
  z-index: 1;
}

.top-menu {
  padding: 50px 70px 0px;
  align-items: center;
}
.top-menu-container {
  padding-top: 0px;
}
/*
|----------------------------------------------------------------
| cambie-village-intro
|----------------------------------------------------------------
*/
.cambie-village-intro {
  padding: 150px 9vw 200px;
}
.cambie-village-intro h3 {
  width: 83%;
}

.cambie-village-intro .row {
  align-items: normal;
}
.cambie-village-intro .first-row {
  margin-top: 190px;
}
.cambie-village-intro .first-row .right img {
  margin-top: 385px;
}
.cambie-village-intro .second-row {
  margin-top: 3%;
}
.cambie-village-intro .first-row .right,
.cambie-village-intro .second-row .right {
  align-self: flex-end;
}
.cambie-village-intro h5 {
  color: #48503A;
}
/*
|----------------------------------------------------------------
| city-alive-sliders
|----------------------------------------------------------------
*/
.cambie-village-sliders {
  overflow: hidden;
}
.cambie-village-sliders .container {
  max-width: 100%;
}
.cambie-village-sliders .left {
  max-height: 960px;
}

/* counter */
.cambie-village-sliders .content-row {
  padding: 0px 5vw 90px;
  align-items: flex-start;
}
.cambie-village-sliders .count-wrapperA,
.cambie-village-sliders .count-wrapperC,
.cambie-village-sliders .count-wrapperB {
  width: 60px;
  transform: rotate(90deg) translate(-25px, -35%);
  transform-origin: left top;
}
.cambie-village-sliders .count-wrapperC {
  overflow: hidden;
}
.cambie-village-sliders .count-wrapperC .flickity-viewport {
  width: 60PX;
}

.cambie-village-sliders .counter {
  font-size: 60px;
  font-family: MinSansTrial-Regular;
  font-weight: normal;
  color: #9A9E8A;
  margin-bottom: -15px;
  margin-left: 40px;
}

.cambie-village-sliders .counter .total-items {
  font-size: 30px;
}

.cambie-village-sliders .count div{
  transform: rotate(-90deg);

}

/* carousel */
.cambie-village-sliders .right {
  background-color: #373E29;
  align-self: stretch;
}
.cambie-village-sliders .flickity-viewport,
.cambie-village-sliders .carousel {
  /* overflow: hidden; */
  width: 474px;
  height: 725px;
}
.cambie-village-sliders .carousel-cell {
  width: 474px;
  height: 725px;
  margin-right: 50px;
  counter-increment: carousel-cell;
}
.cambie-village-sliders h5 {
  color: #9A9E8A;
}

/* icon btn */
.cambie-village-sliders .flickity-prev-next-button {
  top: 47%!important;
  left: -30%!important;
  border: 2px solid #FFFFFF;
  background-color: transparent;
  color: #FFFFFF;
}
.cambie-village-sliders .flickity-prev-next-button.next {
  left: 120%!important;
}
/*
|----------------------------------------------------------------
| natural-biodiversity-intro
|----------------------------------------------------------------
*/
.natural-biodiversity-intro {
  padding: 200px 9vw;
  background-color: #EBECE8;
}
.natural-biodiversity-intro img {
  margin: 190px auto 10px;
} 

/*
|----------------------------------------------------------------
| biodiversity-gallery
|----------------------------------------------------------------
*/
.natural-biodiversity {
  padding-bottom: 200px;
  background-color: #EBECE8;
}
.natural-biodiversity .wrapper {
  text-align: center;
}
.natural-biodiversity .wrapper h3 {
  font-size: 36px;
  line-height: 44px;
  margin: 48px auto 221px;
  width: 55%;
}

.natural-biodiversity .lifestyle {
  margin-left: 0PX;
}

/* carousel */

.biodiversity-carousel .flickity-viewport {
  height: 745px;
}
.biodiversity-carousel .carousel-cell {
  width: 895px;
  height: 745px;
  margin-right: 30px;
  counter-increment: carousel-cell;
}
.biodiversity-carousel .carousel-cell:nth-child(9),
.biodiversity-carousel .carousel-cell:nth-child(7),
.biodiversity-carousel .carousel-cell:nth-child(5),
.biodiversity-carousel .carousel-cell:nth-child(3),
.biodiversity-carousel .carousel-cell:nth-child(1) {
  width: 474px;
}
.biodiversity-carousel .carousel-cell:nth-child(10),
.biodiversity-carousel .carousel-cell:nth-child(8),
.biodiversity-carousel .carousel-cell:nth-child(6),
.biodiversity-carousel .carousel-cell:nth-child(4),
.biodiversity-carousel .carousel-cell:nth-child(2) {
  width: 895px;
}


.circle-cursor {
  width: 260px;
  height: auto;
  z-index: 100;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity .2s cubic-bezier(.25,.74,.22,.99), transform 1s cubic-bezier(.25,.74,.22,.99);
  pointer-events: none;
}

/*
|----------------------------------------------------------------
| room-gallery - biodiversity-gallery
|----------------------------------------------------------------
*/
.room-gallery {
  overflow: hidden;
  background-color: #373E29;

}
.room-gallery .flickity-sync {
  padding: 130px 4vw 179px;

}
.room-gallery .flickity-sync.container {
  max-width: 2015px;
}
/* content-row */
.room-gallery .content-row {
  padding: 0px 5vw 0px;
  align-items: flex-start;
}
.room-gallery .count-wrapper {
  width: 60px;
  transform: rotate(90deg) translate(-25px, -35%);
  transform-origin: left top;
}

.room-gallery .counter {
  font-size: 60px;
  font-family: MinSansTrial-Regular;
  font-weight: normal;
  color: #9A9E8A;

}

.room-gallery .counter .total-items {
  font-size: 30px;
}

.room-gallery .count div{
  transform: rotate(-90deg);

}
.room-gallery h2 {
  color: #AB7F53;
  margin-top: 10px;
  margin-left: 35px;
  margin-bottom: 0px;
}
.room-gallery .content-row p {
  color: #FFFFFF;
}

.room-gallery .content-row .subtitle {
  width: 510px;
  height: 125px;
  overflow: hidden;
}
.room-gallery .content-row .subtitle-wrapper {
  transform: rotate(90deg) translate(0px, -100%);
  transform-origin: left top;
  width: 125px;
  height: 510px;
  overflow: hidden;
  
}
.room-gallery .content-row .subtitle .column,
.room-gallery .content-row .subtitle .flickity-viewport {
  width: 125px;
  height: 510px!important;
  overflow: hidden;
}
.room-gallery .content-row .subtitle h2{
  transform: rotate(-90deg) translate(-170px, -212%);
  width: 510px;
  height: 100px;
  color: #FFFFFF;
}
.room-gallery .content-row .subtitle h2 .sub-title {
  font-family: MinSansTrial-Regular;
  font-weight: normal;
  font-size: 36px;
  line-height: 44px;
  color: #AB7F53;
  display: block;
  margin-top: -10px;
}


.room-gallery .content-row .right {
  height: 265px;
}
.room-gallery .content-row .detail {
  transform: rotate(90deg) translate(-25px, -100%);
  transform-origin: left top;
  width: 50px;
  height: 800px;
  overflow: hidden;
}
.room-gallery .content-row .detail .flickity-viewport {
  width: 50px;
  height: 800px;
}
.room-gallery .content-row .detail .column {
  width: 50px;
  height: 800px;
}
.room-gallery .content-row .detail p{
  transform: rotate(-90deg) translate(-363px, -715%);
  width: 800px;
  height: 50px;
  font-size: 20px;
  line-height: 30px;
}

.room-gallery .content-row .detail2, 
.room-gallery .content-row .detail3, 
.room-gallery .content-row .detail4, 
.room-gallery .content-row .detail5, 
.room-gallery .content-row .detail6, 
.room-gallery .content-row .detail7 {
  margin-top: -760px;
}

/* slider-row */
.room-gallery .sliders-row .left {
  height: 630px;
}

/* carousel */
/* .room-gallery .swiper-wrapper { */
  .room-gallery .sliders-row .carousel {
  overflow: hidden;
  width: 580px;
  height: 580px;
  border-radius: 50%;
}
.room-gallery .sliders-row .swiper-wrapper { 
    overflow: hidden;
    width: 580px;
    height: 620px;
  }

/* .room-gallery .cell { */
.room-gallery .sliders-row .carousel-cell {
  width: 580px!important;
  counter-increment: carousel-cell;
  opacity: 1;
  filter: none;
  transform: scale(1);
  transition: opacity 0.3s,filter 0.3s, transform 0.3s;
}
.room-gallery .sliders-row .carousel-cell .img{
  height: 580px;
}
.room-gallery .sliders-row .cell { 
    width: 580px!important;
    height: 580px!important;
    counter-increment: carousel-cell;
    opacity: 1;
    filter: none;
    transform: scale(1);
    transition: opacity 0.3s,filter 0.3s, transform 0.3s;
  }

.room-gallery .sliders-row .left .carousel-cell:nth-child(1) .img {
  background-image: url(../images/cambie-village/biodiversity-gallery/transportation-1.jpg);
} 
.room-gallery .sliders-row .left .carousel-cell:nth-child(2) .img {
  background-image: url(../images/cambie-village/biodiversity-gallery/education-1.jpg);
}  
.room-gallery .sliders-row .left .carousel-cell:nth-child(3) .img {
  background-image: url(../images/cambie-village/biodiversity-gallery/fitness-1.jpg);
  background-position: 75% 50%;
} 

.room-gallery .sliders-row .medium .carousel-cell:nth-child(1) .img {
  background-image: url(../images/cambie-village/biodiversity-gallery/transportation-2.jpg);
  background-position: center right;
} 
.room-gallery .sliders-row .medium .carousel-cell:nth-child(2) .img {
  background-image: url(../images/cambie-village/biodiversity-gallery/education-2.jpg);
  background-position: 90% 50%;
} 
.room-gallery .sliders-row .medium .carousel-cell:nth-child(3) .img {
  background-image: url(../images/cambie-village/biodiversity-gallery/fitness-2.jpg);
  background-position: 10% 50%;
} 

.room-gallery .sliders-row .right .carousel-cell:nth-child(1) .img {
  background-image: url(../images/cambie-village/biodiversity-gallery/transportation-3.jpg);
} 
.room-gallery .sliders-row .right .carousel-cell:nth-child(2) .img {
  background-image: url(../images/cambie-village/biodiversity-gallery/education-3.jpg);
  background-position: 65% 50%;
} 
.room-gallery .sliders-row .right .carousel-cell:nth-child(3) .img {
  background-image: url(../images/cambie-village/biodiversity-gallery/fitness-3.jpg);
} 


.room-gallery .left .cell:nth-child(1) {
  background-image: url(../images/test/Lounge-1\ \(1\).jpg);
} 
.room-gallery .left .cell:nth-child(2) {
  background-image: url(../images/test/Home\ Office-1.jpg);
} 
.room-gallery .left .cell:nth-child(3) {
  background-image: url(../images/test/Gym-1.jpg);
} 

.room-gallery .medium .cell:nth-child(1) {
  background-image: url(../images/test/Closet.jpg);
} 
.room-gallery .medium .cell:nth-child(2) {
  background-image: url(../images/test/Gym-1.jpg);
} 
.room-gallery .medium .cell:nth-child(3) {
  background-image: url(../images/test/Home\ Office-1.jpg);
} 

.room-gallery .right .cell:nth-child(1) {
  background-image: url(../images/test/Kidsplay\ Room-3.jpg);
} 
.room-gallery .right .cell:nth-child(2) {
  background-image: url(../images/test/Media\ Room-1.jpg);
} 
.room-gallery .right .cell:nth-child(3) {
  background-image: url(../images/test/Gym-1.jpg);
}


/* captions */
.room-gallery h5 {
  font-size: 20px;
  color: #9A9E8A;
}
.room-gallery .captions-row > .column {
  width: 200px;
  height: 40px;
  overflow: hidden;
  text-align: center;
}
.room-gallery .caption-wrapper {
  transform: rotate(90deg) translate(-20px, -100%);
  transform-origin: left top;
  width: 40px;
  height: 200px;
  overflow: hidden;
}
.room-gallery .caption-wrapper.is-center {
  left: 30%;
}
.room-gallery .caption-wrapper .column,
.room-gallery .caption-wrapper .flickity-viewport {
  width: 40px;
  height: 200px!important;
  overflow: hidden;
}
.room-gallery .caption-wrapper h5{
  transform: rotate(-90deg) translate(-70px, -224%);
  width: 200px;
  height: 40px;
}

/* icon btn */
.flickity-prev-next-button {
  top: -10%;
  width: 60px;
  height: 60px;
  border: 2px solid #9A9E8A;
  background-color: transparent;
  color: #9A9E8A;
}
.flickity-prev-next-button .flickity-button-icon {
  left: 25%;
  top: 25%;
  width: 50%;
  height: 50%;

}
.flickity-prev-next-button:hover {
  background-color: unset;
}
.flickity-prev-next-button.next {
  left: 95px;
}

/*
|----------------------------------------------------------------
| activity
|----------------------------------------------------------------
*/
.activity {
  padding: 200px 9vw 126px;
}
.activity p {
  width: 92%;
}

/*
|----------------------------------------------------------------
| vera-map
|----------------------------------------------------------------
*/
.west-map .left{
  flex-basis: 60%;
  max-width: 60%;
}
.west-map .right{
  flex-basis: 40%;
  max-width: 40%;
  background-color: rgba(161,105,79,0.1);
}

.west-map .location-icons{
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}


/* accorion */
.west-map .accordion {
  width: 80%;
  margin-top: 30px;
  margin-left: 50px;
}
.accordion-button:focus {
  border-color: transparent;

}
.accordion-button:not(.collapsed) {
  background-color: transparent;
  color: #AB7F53;
  border-color: transparent;
  box-shadow: none;
}
.west-map button {
  font-family: SweetSansPro-Regular;
  font-size: 32px;
  line-height: 48px;
  letter-spacing: -1px;
  color: #48503A;
  text-transform: uppercase;
  font-weight: normal;
  background-color: transparent;
}
.west-map .accordion-body {
  font-family: SweetSansPro-Regular;
  font-size: 20px;
  line-height: 30px;
  color: #48503A;
  font-weight: normal;
}
.west-map .accordion-item {
  border-bottom: 1px solid #4E4E4E;
  border-left: none;
  border-right: none;
  border-radius:0%;
  background-color: transparent;
}
.west-map .accordion-item:first-child {
  border-top: 1px solid #4E4E4E;

}

/*
|----------------------------------------------------------------
| location-distance
|----------------------------------------------------------------
*/
.location-distance {
  padding: 40px 9vw 160px;
}
.location-distance .container{
  padding-top: 0px;
}
.location-distance .row{
  justify-content: normal;
}
.location-distance .first-row .right {
  padding-left: 30px;
  border-left: 2px dashed #737A57;
}
.location-distance h3 {
  font-size: 50px;
  line-height: 76px;
  margin-top: -5px;
  margin-bottom: 0px;

}

.col-container {
  display: inline-flex;
  align-items: center;

}
.location-distance .num {
  font-family: SweetSansPro-Light;
  font-weight: lighter;
  font-size: 180px;
  line-height: 228px;
  white-space: -1px;
  color: #48503A;
  margin-right: 5px;
  margin-top: -50px;
}
.col-container img {
  width: 40px;
  height: auto;

}
.col-container p {
  font-family: SweetSansPro-Regular;
  font-weight: normal;
  font-size: 18px;
  text-transform: uppercase;
  line-height: 26px;
  letter-spacing: -1px;
  color: #48503A;
  margin-bottom: 0px; 
}

.location-distance2 {
  margin-bottom: 200px;
}




/*
|----------------------------------------------------------------
| Query media
|----------------------------------------------------------------
*/
@media (max-width: 1890px) {
  
  /* sync flicity - cambie-village-sliders */
  .cambie-village-sliders .flickity-viewport,
  .cambie-village-sliders .carousel {
    /* overflow: hidden; */
    width: 374px; 
    height: 572px;
  }
  .cambie-village-sliders .carousel-cell {
    width: 374px;
    height: 572px;
    margin-right: clamp(10px,3vw,50px);
  }

  
  /* SYNC flickity - room-gallery*/
  /* slider-row */
  .room-gallery .sliders-row .left {
    height: 560px;
  }
    .room-gallery .sliders-row .carousel {
    overflow: hidden;
    width: 510px;
    height: 510px;
    border-radius: 50%;
  }
  .room-gallery .sliders-row .carousel-cell {
    width: 510px!important;
    counter-increment: carousel-cell;
    opacity: 1;
    filter: none;
    transform: scale(1);
    transition: opacity 0.3s,filter 0.3s, transform 0.3s;
  }
  .room-gallery .sliders-row .carousel-cell .img{
    height: 510px;

  }
}

@media (max-width: 1700px) { 
  h3 {
    margin-bottom: clamp(30px,3vw,61px);
    font-size: clamp(30px,4vw,64px);
    line-height: clamp(36px,4vw,76px);
  }

  .cambie-village-intro {
    padding: clamp(80px,8vw,150px) 9vw clamp(120px,9.3vw,200px);
  }

  .cambie-village-intro .first-row {
    margin-top: clamp(115px,9vw,190px);
  }
  .cambie-village-intro .first-row .right img {
    margin-top: clamp(230px,20vw,385px);
  }

  /* simple snyc carousel */


  /* biodiversity */
  .natural-biodiversity-intro {
    padding: clamp(120px,9.3vw,200px) 9vw;
  }
  .natural-biodiversity-intro img {
    margin: clamp(115px,9vw,190px) auto 10px;
  }

  /* room--gallery */

  /* SYNC flickity - room-gallery*/

  .room-gallery .flickity-sync {
    padding: clamp(60px,7vw,130px) 4vw clamp(100px,9vw,179px);
  }

  /* content-row */
  .room-gallery .content-row {
    padding: 0px 2vw clamp(10px,1.5vw,30px);
  }
  .room-gallery .content-row .left {
    margin-bottom: -3px;
  }
  .room-gallery .counter {
    font-size:clamp(40px,3.5vw, 60px);
  }
  .room-gallery .count-wrapper {
    width: 55px;
  }
  /* subtitle */
  .room-gallery .content-row .subtitle h2 {
    transform: rotate(-90deg) translate(-190px, -200%);
  }
 

  /* detail */
  .room-gallery .content-row .detail {
    transform: rotate(90deg) translate(-25px, -89%);
  }
  .room-gallery .content-row .detail p {
    transform: rotate(-90deg) translate(-355px, -722%);
  }

  /* slider-row */
  .room-gallery .sliders-row .left {
    height: 490px;
  }
    .room-gallery .sliders-row .carousel {
    overflow: hidden;
    width: 440px;
    height: 440px;
    border-radius: 50%;
  }
  .room-gallery .sliders-row .carousel-cell {
    width: 440px!important;
    counter-increment: carousel-cell;
    opacity: 1;
    filter: none;
    transform: scale(1);
    transition: opacity 0.3s,filter 0.3s, transform 0.3s;
  }
  .room-gallery .sliders-row .carousel-cell .img{
    height: 440px;

  }
  /* icon */
  .flickity-prev-next-button {
    width: clamp(30px,3.5vw,60px);
    height: clamp(30px,3.5vw,60px);
  }
  .flickity-prev-next-button.next {
    left: clamp(50px,6vw,95px);
  }
  /* end here */


  .natural-biodiversity {
    padding-bottom: clamp(0px,9.3vw,200px);
  }

  /* ccarousl */
  .biodiversity-carousel .flickity-viewport {
    height: clamp(460px,46vw,750px)!important;
  }
  .biodiversity-carousel .carousel-cell {
    height: clamp(186px,40vw,745px);
    margin-right: clamp(15px,1.5vw,30px);
  }
  .biodiversity-carousel .carousel-cell:nth-child(9),
  .biodiversity-carousel .carousel-cell:nth-child(7),
  .biodiversity-carousel .carousel-cell:nth-child(5),
  .biodiversity-carousel .carousel-cell:nth-child(3),
  .biodiversity-carousel .carousel-cell:nth-child(1) {
    width: clamp(18px,30vw,474px);
  }
  .biodiversity-carousel .carousel-cell:nth-child(10),
  .biodiversity-carousel .carousel-cell:nth-child(8),
  .biodiversity-carousel .carousel-cell:nth-child(6),
  .biodiversity-carousel .carousel-cell:nth-child(4),
  .biodiversity-carousel .carousel-cell:nth-child(2) {
    width: clamp(223px,56.5vw,895px);
  }

  /* activity */
  .activity {
    padding: clamp(120px,9.3vw,200px) 9vw clamp(70px,6.5vw,126px);
  }

  /* location map */
  .west-map button {
    font-size: clamp(19px,1.2vw,32px);
    line-height: clamp(30px,2.5vw,48px);
    padding: clamp(3px,1vw,15px) 0px;
  }
  .west-map .accordion-body {
    font-size: clamp(12px,1.2vw,20px);
    line-height: clamp(21px,2.2vw,30px);
    padding: 0px;

  }
  .west-map .accordion {
    margin-left: clamp(30px,2.5vw,50px);
  }

  /* all numberds */
  .location-distance1 {
    margin-bottom: -10px;
    margin-left: 5vw;
  }
  .location-distance2 {
    margin-top: -10px;
    margin-bottom: clamp(90px,8vw,170px);
    margin-left: 5vw;
  }
  .location-distance2 .left,
  .location-distance2 .right {
    padding-top: 20px;
  }
  .location-distance .num {
    font-size: clamp(113px,11vw,180px);
    line-height: clamp(143px,12vw,228px);
  }
  .location-distance h3 {
    font-size: clamp(31px,2vw,50px);
    line-height: clamp(45px,6vw,76px);
  }
  .col-container p {
    font-size: clamp(11px,1vw,18px);
    line-height: clamp(15px,1.6vw,26px);
  }
  .col-container img {
    width: clamp(25px,2vw,40px);
  }

} 

@media (max-width: 1500px) { 
  
  .cambie-village-intro {
    padding: clamp(80px,8vw,150px) 5vw clamp(120px,9.3vw,200px);
  }

  
  /* sync flicity - cambie village */
  
  .cambie-village-sliders .flickity-viewport,
  .cambie-village-sliders .carousel {
    width: 324px; 
    height: 497px;
  }
  .cambie-village-sliders .carousel-cell {
    width: 324px;
    height: 497px;
  }

  .cambie-village-sliders .counter {
    font-size: 50px;
  }
  .cambie-village-sliders .count-wrapperC {
    width: 50px;
  }
  .cambie-village-sliders .count-wrapperC .flickity-viewport {
    width: 50PX;
  }


  /* biodiversity */
  .natural-biodiversity-intro {
    padding: clamp(120px,9.3vw,200px) 5vw;
  }

  
  /* SYNC flickity - room-gallery*/
  .room-gallery .content-row {
    padding: 0px 1vw;
  }
  /* counter */
  .room-gallery .count-wrapper {
    width: 50px;
  }
  .room-gallery .content-row .subtitle h2 .sub-title {
    font-size: 26px;
    line-height: 32px;
  }
  .room-gallery .content-row .subtitle {
    height: 162px;
  }

  .room-gallery .content-row .subtitle-wrapper,
  .room-gallery .content-row .subtitle .column,
  .room-gallery .content-row .subtitle .flickity-viewport {
    width: 145px;
  }

  /* detail */
  .room-gallery .content-row .right {
    height: 220px;
  }
  .room-gallery .content-row .detail p {
    font-size: 18px;
    line-height: 26px;
  }
  .room-gallery .content-row .detail {
    transform: rotate(90deg) translate(-25px, -90%);
  }
  .room-gallery .content-row .detail2, 
.room-gallery .content-row .detail3, 
.room-gallery .content-row .detail4, 
.room-gallery .content-row .detail5, 
.room-gallery .content-row .detail6, 
.room-gallery .content-row .detail7, 
.room-gallery .content-row .detail8, 
.room-gallery .content-row .detail9, 
.room-gallery .content-row .detail10 {
  margin-top: -766px;
}

  /* slider-row */
  .room-gallery .sliders-row .left {
    height: 440px;
  }
    .room-gallery .sliders-row .carousel {
    overflow: hidden;
    width: 390px;
    height: 390px;
    border-radius: 50%;
  }
  .room-gallery .sliders-row .carousel-cell {
    width: 390px!important;
    counter-increment: carousel-cell;
    opacity: 1;
    filter: none;
    transform: scale(1);
    transition: opacity 0.3s,filter 0.3s, transform 0.3s;
  }
  .room-gallery .sliders-row .carousel-cell .img{
    height: 390px;

  }

  /* end here */

  
  /* all numberds */

  
  .west-map .accordion {
    margin-top: 10px;
  }

  .location-distance1 {
    margin-bottom: -35px;
  }
  .location-distance2 {
    margin-top: -35px;
  }
  
}

@media (max-width: 1353px) {

    /* sync flicity - cambie village */
  .cambie-village-sliders .flickity-viewport,
  .cambie-village-sliders .carousel {
    width: 274px; 
    height: 420px;
  }
  .cambie-village-sliders .carousel-cell {
    width: 274px;
    height: 420px;
  }
  .cambie-village-sliders .counter {
    font-size: 38px;
  }
  .cambie-village-sliders .count div {
    transform: rotate(-90deg) translate(0px, 2%);
  }

  
  .cambie-village-sliders .count-wrapperC {
    width: 40px;
  }
  .cambie-village-sliders .count-wrapperC .flickity-viewport {
    width: 45px;
  }
  
  /* SYNC flickity - room-gallery*/
  .room-gallery .flickity-sync {
    padding: clamp(60px,7vw,130px) 1vw clamp(100px,9vw,179px);
  }
  /* counter */
  .room-gallery .counter {
    width: 110px;
  }
  .room-gallery .count-wrapper {
    width: 43px;
  }

  /* subtitle */
  .room-gallery .content-row .subtitle h2 {
    transform: rotate(-90deg) translate(-198px, -205%);
  }

    /* detail */
  .room-gallery .content-row .detail2, 
  .room-gallery .content-row .detail3, 
  .room-gallery .content-row .detail4, 
  .room-gallery .content-row .detail5, 
  .room-gallery .content-row .detail6, 
  .room-gallery .content-row .detail7, 
  .room-gallery .content-row .detail8, 
  .room-gallery .content-row .detail9, 
  .room-gallery .content-row .detail10 {
    margin-top: -765px;
  }
  .room-gallery .content-row .detail {
    transform: rotate(90deg) translate(-25px, -83%);
  }

  /* slider-row */
  .room-gallery .sliders-row .left {
    height: 390px;
  }
    .room-gallery .sliders-row .carousel {
    overflow: hidden;
    width: 340px;
    height: 340px;
    border-radius: 50%;
  }
  .room-gallery .sliders-row .carousel-cell {
    width: 340px!important;
    counter-increment: carousel-cell;
    opacity: 1;
    filter: none;
    transform: scale(1);
    transition: opacity 0.3s,filter 0.3s, transform 0.3s;
  }
  .room-gallery .sliders-row .carousel-cell .img{
    height: 340px;

  }
}

@media (max-width: 1199px) {

  /* sync flickity - room gallery */
  .room-gallery .flickity-sync {
    padding: 70px 1% 130px;
  }
  .room-gallery .content-row {
    padding-left: 7vw;
    padding-bottom: 0px;
    margin-bottom: -50px;
    /* width: 70%; */
    margin: 0;
    margin-bottom: -40px;
  }
  .room-gallery .content-row .left {
    margin-bottom: 40px;
  }
  .room-gallery .break-line {
    display: inline;
  }

  /* counter */

  /* subtitle */
  .room-gallery .content-row .subtitle {
    height: 85px;
  }
  .room-gallery .content-row .subtitle-wrapper,
  .room-gallery .content-row .subtitle .column,
  .room-gallery .content-row .subtitle .flickity-viewport {
    width: 105px;
  }
  .room-gallery .content-row .subtitle h2 {
    transform: rotate(-90deg) translate(-198px, -220%);
  }
  .room-gallery .content-row .detail2,
   .room-gallery .content-row .detail3, 
   .room-gallery .content-row .detail4, 
   .room-gallery .content-row .detail5, 
   .room-gallery .content-row .detail6, 
   .room-gallery .content-row .detail7, 
   .room-gallery .content-row .detail8, 
   .room-gallery .content-row .detail9, 
   .room-gallery .content-row .detail10 {
    margin-top: -770px;
  }

  /* detail */
  .room-gallery .content-row .detail {
    transform: rotate(90deg) translate(-25px, -95%);
  }
  .room-gallery .content-row .right {
    height: 230px;
  }
  /* btn icon */
  .flickity-prev-next-button.previous {
    left: 86vw;
  }
  .flickity-prev-next-button.next {
    left: 92vw;
  }

}

@media (max-width: 1100px) {
    
    /* sync flicity - cambie village */
  .cambie-village-sliders .flickity-viewport,
  .cambie-village-sliders .carousel {
    width: 224px; 
    height: 345px;
  }
  .cambie-village-sliders .carousel-cell {
    width: 224px;
    height: 345px;
  }
  .cambie-village-sliders .count div {
    transform: rotate(-90deg) translate(0px, 8%);
  }

  
  .cambie-village-sliders .counter {
    font-size: 48px;
    margin-bottom: -27px;
  }
  .cambie-village-sliders .count-wrapperC {
    width: 43px;
  }
  .cambie-village-sliders .count-wrapperC .flickity-viewport {
    width: 45px;
  }
  .cambie-village-sliders .wrapper.is-center {
    top: 53%;
  }

  /* sync flickity */

  /* slider-row */
  .room-gallery .sliders-row .left {
    height: 340px;
  }
    .room-gallery .sliders-row .carousel {
    overflow: hidden;
    width: 290px;
    height: 290px;
    border-radius: 50%;
  }
  .room-gallery .sliders-row .carousel-cell {
    width: 290px!important;
    counter-increment: carousel-cell;
    opacity: 1;
    filter: none;
    transform: scale(1);
    transition: opacity 0.3s,filter 0.3s, transform 0.3s;
  }
  .room-gallery .sliders-row .carousel-cell .img{
    height: 290px;

  }


  /* map */
  .west-map .accordion {
    margin-top: 5px;
  }
  .west-map .accordion {
    margin-left: clamp(5px,1.5vw,50px);
  }
  .west-map .accordion {
    width: 92%;
  }



}

@media (max-width: 1000px) {

  /* map-container */
  
  .west-map .map-container {
    flex-direction: column;
  }
  .west-map .left,
  .west-map .right {
    flex-basis: 100%;
    max-width: 100%;
  }
  .west-map .accordion {
    margin-top: 60px;
    width: auto;
  }
  .west-map .accordion {
    margin-bottom: 60px;
    margin: 60px 12vw 78px;
  }
  .accordion-item .accordion-button {
    padding: 10px 0px;
  }
  .west-map .accordion-body {
    padding-left: 0px;
    padding-top: 0px;
    font-size: 14px;
    line-height: 20px;
  }
  .west-map .accordion-body ol {
    padding-left: 0px;
  }

  .west-map button {
    font-size: 19px;
    line-height: 30px;
  }


  .col-container p {
    margin-bottom: 6px;
  }
}

@media (max-width: 991px) {
  .cambie-village-sliders .flickity-prev-next-button.next {
    left: 103%!important;
  }
  .cambie-village-sliders .flickity-prev-next-button {
    left: -20%!important;
  }
}

@media (max-width: 900px) { 

  /* sync flickity */

  /* slider-row */
  .room-gallery .sliders-row .left {
    height: 310px;
  }
    .room-gallery .sliders-row .carousel {
    overflow: hidden;
    width: 260px;
    height: 260px;
    border-radius: 50%;
  }
  .room-gallery .sliders-row .carousel-cell {
    width: 260px!important;
    counter-increment: carousel-cell;
    opacity: 1;
    filter: none;
    transform: scale(1);
    transition: opacity 0.3s,filter 0.3s, transform 0.3s;
  }
  .room-gallery .sliders-row .carousel-cell .img{
    height: 260px;

  }
  /* caption */
  .room-gallery .caption-wrapper {
    transform: rotate(90deg) translate(-20px, -75%);
  }

  .activity h1 {
    width: 120%;
  }
}

@media (max-width: 767px) {
  h3 {
    font-size:30px;
    line-height: 36px;
  }
  .top-menu {
    padding: 30px 5% 0px;
  }

  /* cambie village intro */
  .cambie-village-intro {
    padding: 103px 12vw 99px;
  }
  .cambie-village-intro .first-row {
    margin-top: 93px;
  }
  .cambie-village-intro .first-row .right img {
    margin-top: 0px;
  }
  .cambie-village-intro .first-row .right {
    padding-right: 5px;
  }
  .cambie-village-intro .first-row .left-mobile {
    padding-left: 5px;
  }

  /* cambie-village-sliders */
  .cambie-village-sliders .wrapper.is-center {
    left: 60%;
  }
  .cambie-village-sliders .right {
    height: 550px;
  }
  .flickity-page-dots {
    text-align: left;
    bottom: 10px;
  }
  .flickity-page-dots .dot.is-selected {
    background-color: #FFFFFF;
  }
  .flickity-page-dots .dot {
    background-color: transparent;
    border: 1px solid #FFFFFF;
    opacity: 1;
    margin: 0 6px;
  }
  .cambie-village-sliders .flickity-viewport,
  .cambie-village-sliders .carousel {
    overflow: visible;
    width: 310px; 
    height: 409px;
  }
  .cambie-village-sliders .carousel {
    height: 442px;
    width: 83vw;
    overflow: hidden;
  }
  .cambie-village-sliders .carousel-cell {
    width: 310px;
    height: 409px;
    margin-right: 10px;
  }


  /* natural-biodiversity */
  .natural-biodiversity-intro {
    padding: 100px 12vw 144px;
  }
  .natural-biodiversity-intro img {
    margin: 53px 0 0 ;
  }
  /* natural-biodiversity */
  .natural-biodiversity {
    background-color: transparent;
    padding: 0px 0px 100px 12vw;
  }
  .natural-biodiversity {
    padding-bottom: 100px;
  }

  /* ccarousl */
  .natural-biodiversity .lifestyle.mobile-version {
    margin-top: -80px;
  }
  .biodiversity-carousel .flickity-viewport {
    height: 270px!important;
  }
  .biodiversity-carousel .carousel-cell {
    height: auto;
    margin-right: 10px;
  }
  .biodiversity-carousel .carousel-cell:nth-child(9),
  .biodiversity-carousel .carousel-cell:nth-child(7),
  .biodiversity-carousel .carousel-cell:nth-child(5),
  .biodiversity-carousel .carousel-cell:nth-child(3),
  .biodiversity-carousel .carousel-cell:nth-child(1) {
    width: 173px;
  }
  .biodiversity-carousel .carousel-cell:nth-child(10),
  .biodiversity-carousel .carousel-cell:nth-child(8),
  .biodiversity-carousel .carousel-cell:nth-child(6),
  .biodiversity-carousel .carousel-cell:nth-child(4),
  .biodiversity-carousel .carousel-cell:nth-child(2) {
    width: 328px;
  }
  .biodiversity-carousel .flickity-page-dots {
    bottom: -25px;
  }
  .biodiversity-carousel .flickity-page-dots .dot.is-selected {
    background-color: #737A57;
  }
  .biodiversity-carousel .flickity-page-dots .dot {
    border: 1px solid #737A57;
  }

  /* activity */
  .activity {
    padding: 100px 12vw 93px;
  }
  .activity h1 {
    margin-bottom: 46px;
  }
  .activity h3 {
    margin-bottom: 30px!important;
  }
  .activity p {
    width: 100%;
  }


  /* sync flickity */
    
  .room-gallery .content-row .left{
    margin-bottom: 20px;
  }
  .room-gallery .content-row .detail p {
    font-size: 13px;
    line-height: 18px;
  }

  /* detail */
  .room-gallery .content-row .right {
    height: 162px;
  }
  .room-gallery .content-row .detail2, .room-gallery .content-row .detail3, .room-gallery .content-row .detail4, .room-gallery .content-row .detail5, .room-gallery .content-row .detail6, .room-gallery .content-row .detail7, .room-gallery .content-row .detail8, .room-gallery .content-row .detail9, .room-gallery .content-row .detail10 {
    margin-top: -778px;
  }
    /* slider-row */
    .room-gallery .sliders-row .left {
      height: 260px;
    }
      .room-gallery .sliders-row .carousel {
      overflow: hidden;
      width: 210px;
      height: 210px;
      border-radius: 50%;
    }
    .room-gallery .sliders-row .carousel-cell {
      width: 210px!important;
      counter-increment: carousel-cell;
      opacity: 1;
      filter: none;
      transform: scale(1);
      transition: opacity 0.3s,filter 0.3s, transform 0.3s;
    }
    .room-gallery .sliders-row .carousel-cell .img{
      height: 210px;

    }
    
  /* caption */
  .room-gallery .caption-wrapper {
    transform: rotate(90deg) translate(-20px, -68%);
  }


  /* 28west map  */
  .location-distance {
    padding: 95px 0vw 112px 12vw;
  }
  .location-distance .first-row .right {
    border: none;
    padding-left: 0px;
  }
  .location-distance .num {
    font-size: 130px;
    line-height: 187px;
    margin-top: -65px;
  }
  .location-distance h3 {
    font-size: 35px;
    line-height: 53px;
  }
  .col-container p {
    font-size: 12px;
    line-height: 18px;
  }
  .col-container img {
    width: 29px;
    height: 27.69px;
  }
}

@media (max-width: 650px) {
  /* slider-row */
  .room-gallery .sliders-row .left {
    height: 230px;
  }
    .room-gallery .sliders-row .carousel {
    overflow: hidden;
    width: 180px;
    height: 180px;
    border-radius: 50%;
  }
  .room-gallery .sliders-row .carousel-cell {
    width: 180px!important;
    counter-increment: carousel-cell;
    opacity: 1;
    filter: none;
    transform: scale(1);
    transition: opacity 0.3s,filter 0.3s, transform 0.3s;
  }
  .room-gallery .sliders-row .carousel-cell .img{
    height: 180px;
  }
  
  /* caption */
  .room-gallery .caption-wrapper {
    transform: rotate(90deg) translate(-20px, -63%);
  }

  /* btn icon */
  .flickity-prev-next-button.previous {
    left: 84vw;
  }
  .flickity-prev-next-button.next {
    left: 91vw;
  }
  .flickity-prev-next-button {
    top: -12%;
  }
}

@media (min-width: 576px) {
  .room-gallery .sliders-row .left .carousel {
    overflow: visible;
  }
  .room-gallery .sliders-row .left .flickity-viewport {
    border-radius: 50%!important;
    overflow: hidden!important;
  }
}

@media (max-width: 575px) {
  .desktop-version575 {
    display: none!important;
  }
  .mobile-version575{
    display: block;
  }
  .bnr .logo-metallic {
    width: 227px;
    top: 31%!important;
  }

   /* SYNC flickity - room-gallery*/
   .room-gallery .content-row {
    width: 100%;
   }
   .room-gallery .content-row .left {
    flex-direction: column;
    margin-bottom: -3px;
   }
   /* counter */
   .room-gallery .counter {
    font-size: 36px;
    line-height: 50px;
   }
   .room-gallery .count-wrapper {
    width: 36px;
    transform: rotate(90deg) translate(0px, -70%);
  }
   .room-gallery .counter .total-items {
    font-size: 18px;
    line-height: 50px;
   }
  .room-gallery .content-row .subtitle-wrapper, .room-gallery .content-row .subtitle .column, .room-gallery .content-row .subtitle .flickity-viewport {
    width: 80px;
  }
  .room-gallery .content-row .subtitle h2 {
    transform: rotate(-90deg) translate(-196px, -240%);
  }


   /* detail */
   .room-gallery .content-row .right {
     height: 230px;
    }
   .room-gallery .content-row .subtitle h2 .sub-title {
    font-size: 21px;
    line-height: 36px;
    margin-top: 0px;
   }
   .room-gallery .content-row .detail {
    transform: rotate(90deg) translate(-25px, -96.5%);
  }
  .room-gallery .content-row .detail2-2, 
  .room-gallery .content-row .detail3-3, 
  .room-gallery .content-row .detail4-4, 
  .room-gallery .content-row .detail5-5, 
  .room-gallery .content-row .detail6-6, 
  .room-gallery .content-row .detail7-7, 
  .room-gallery .content-row .detail8-8, 
  .room-gallery .content-row .detail9-9, 
  .room-gallery .content-row .detail10-10 {
    margin-top: -780px;
  }


   /* slider-row */
.room-gallery .sliders-row {
  /* max-width: 540px; */
  max-width: 421px;
  margin: 0 auto;
}
  .room-gallery h5 {
    font-size: 14px;
    text-align: center;
  }
  /* left */
  .room-gallery .sliders-row .left {
    height: 400px;
    margin-bottom: 15px;
  }
    .room-gallery .sliders-row .carousel {
    overflow: hidden;
    width: 390px;
    height: 390px;
    border-radius: 50%;
  }
  .room-gallery .sliders-row .carousel-cell {
    width: 390px!important;
    counter-increment: carousel-cell;
    opacity: 1;
    filter: none;
    transform: scale(1);
    transition: opacity 0.3s,filter 0.3s, transform 0.3s;
  }
  .room-gallery .sliders-row .carousel-cell .img{
    height: 390px;

  }
  /* medium */
  .room-gallery .medium {
    height: 200px;
  }
    .room-gallery .medium .carousel {
    overflow: hidden;
    width: 190px;
    height: 190px;
    border-radius: 50%;
  }
  .room-gallery .sliders-row .right .flickity-viewport {
    margin-top: 0px;
  }
  .room-gallery .medium .carousel-cell {
    width: 190px!important;
    counter-increment: carousel-cell;
    opacity: 1;
    filter: none;
    transform: scale(1);
    transition: opacity 0.3s,filter 0.3s, transform 0.3s;
  }
  .room-gallery .medium .carousel-cell .img{
    height: 190px;
  }
  /* medium */
  .room-gallery .right {
    height: 200px;
  }
    .room-gallery .right .carousel {
    overflow: hidden;
    width: 190px;
    height: 190px;
    border-radius: 50%;
  }
  .room-gallery .right .carousel-cell {
    width: 190px!important;
    counter-increment: carousel-cell;
    opacity: 1;
    filter: none;
    transform: scale(1);
    transition: opacity 0.3s,filter 0.3s, transform 0.3s;
  }
  .room-gallery .right .carousel-cell .img{
    height: 190px;
  }

  /* caption */
  .room-gallery .left .caption-wrapper {
    transform: rotate(90deg) translate(205px, -85%);
  }
  .room-gallery .medium .caption-wrapper {
    transform: rotate(90deg) translate(105px, -68%);
  }
  .room-gallery .right .caption-wrapper {
    transform: rotate(90deg) translate(105px, -68%);
  }
  
  .caption-wrapper {
    overflow: visible!important;
  }
  .flickity-prev-next-button {
    top: unset;
    width: 49px;
    height: 49px;
  }
  .flickity-prev-next-button.previous {
    left: -35px;
    top: 130%;
    z-index: 999;
  }
  .flickity-prev-next-button .flickity-button-icon {
    transform: rotate(-89deg);
  }
  .flickity-prev-next-button.next {
    left: -35px;
    top: -45%;
    z-index: 999;
  }

}

@media (max-width: 420px) {
  .flickity-prev-next-button.next {
    top: -42%;
  }

}
@media (max-width: 414px) {
  .flickity-prev-next-button.next {
    top: -40%;
  }

}
@media (max-width: 400px) {
  .flickity-prev-next-button.next {
    top: -37%;
  }

}