.spin::before,
.spin::after {
    box-sizing: inherit;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
}

.spin {
    height: 70px;
    width: 70px;
    background-color: transparent !important;
}

.splide__arrow--next:not(.about-us-arrow-next):not(.sub-page-circle):not(.deals-arrow-next):not(.romantic-arrow-next) {
    right: 17em ;
}

.splide__arrow--prev:not(.about-us-arrow-prev):not(.sub-page-circle):not(.deals-arrow-prev):not(.romantic-arrow-prev) {
    left: 17em ;
}

.deals {
  overflow: hidden;
}

.spin::before,
.spin::after {
    top: 0;
    left: 0;
}

.spin::before {
    border: 1px solid white;
}

.room-arrow-forward, .room-arrow-back {
    filter: brightness(10);
}

.circle:hover .room-arrow-forward {
    filter: unset
}

.circle:hover .room-arrow-back {
    filter: unset
}

.spin:hover::before {
    border-top-color: var(--button-hover);
    border-right-color: var(--button-hover);
    border-left-color: var(--button-hover);
    border-bottom-color: var(--button-hover);
    transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.10s, border-bottom-color 0.15s linear 0.20s, border-left-color 0.15s linear 0.30s;
}

.spin::after {
    border: 0 solid transparent;
}

.spin:hover::after {
    border-top: 1px solid var(--button-hover);
    border-left-width: 1px;
    border-right-width: 1px;
    transform: rotate(270deg);
    transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;
}

.circle {
    border-radius: 100%;
    box-shadow: none;
}

.circle::before,
.circle::after {
    border-radius: 100%;
}

@keyframes slideInFromLeft {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(0%);
    }
}

@keyframes slideInFromRight {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(0);
    }
}

@keyframes leFadeInBottom {
    from {
      opacity: 0;
      transform: translateY(100%);
    }
    to {
      opacity: 1;
      transform: translateY(0%);
    }
  }
  
.is-active > .rooms-v3-bg > .stripe-v3-right {  
    /* This section calls the slideInFromLeft animation we defined above */
    animation: 1s ease-out 0s 1 slideInFromLeft;
    background: #2d5432;
    padding: 30px;
    z-index: 2;
}

.is-active > .rooms-v3-bg > .stripe-v3-left {  
    /* This section calls the slideInFromLeft animation we defined above */
    animation: 1s ease-out 0s 1 slideInFromRight;
    background: #2d5432;
    padding: 30px;
    z-index: 2;
}

.is-prev > .rooms-v3-bg > .stripe-v3-right, .is-prev > .rooms-v3-bg > .stripe-v3-left {  
    /* This section calls the slideInFromLeft animation we defined above */
    display: none !important;
}


.is-prev > .rooms-v3-bg > .room-v3-pic > .rooms-filter{
    background-color: #1c402296;
}

.is-next > .rooms-v3-bg > .room-v3-pic > .rooms-filter{
    background-color: #1c402296;
} 

.rooms-p {
    animation-duration: 2s;
    animation-delay: 1s;
    animation-fill-mode: both;
}

.is-active > .rooms-v3-bg >.rooms-action-panel {
    animation-duration: 2s;
    animation-delay: 1s;
    animation-fill-mode: both;
}

.leFadeInBottom {
    animation-name: leFadeInBottom
}



/**/

@keyframes slide-up {
    from {
      margin-top: 100%;
      height: 300%;
    }
    to {
      margin-top: 0%;
      height: 100%;
    }
  }

  

  @keyframes slide-down {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0%);
    }
  }
  

  [data-inviewport="sauna"].is-inViewport > .row > .remove-spacing > .spa-description > .spa-description-background {
    animation: 2s slide-up;

    margin-bottom: 0%;
  }

  [data-inviewport="sauna"].is-inViewport > .row > .remove-spacing > .spa-background  {
    animation: 2s slide-down;

    margin-top: 0%;
  }

  [data-inviewport="sauna"].is-inViewport > .row > .remove-spacing > .spa-description > .spa-description-content.leFadeInRightDelayed{
    animation: 3s leFadeInRight;

  }



  [data-inviewport="jacuzzi"].is-inViewport > .row > .remove-spacing > .spa-description > .spa-description-background  {
    animation: 2s slide-up;

    margin-bottom: 0%;
  }

  [data-inviewport="jacuzzi"].is-inViewport > .row > .remove-spacing > .spa-background  {
    animation: 2s slide-down;

    margin-top: 0%;
  }

  [data-inviewport="jacuzzi"].is-inViewport > .row > .remove-spacing > .spa-description > .spa-description-content.leFadeInLeftDelayed{
    animation: 3s leFadeInLeft;

  }



  [data-inviewport="outdoor-pool"].is-inViewport > .row > .remove-spacing > .spa-description > .spa-description-background {
    animation: 2s slide-up;
    margin-bottom: 0%;
  }

  [data-inviewport="outdoor-pool"].is-inViewport > .row > .remove-spacing > .spa-background  {
    animation: 2s slide-down;
    margin-top: 0%;
  }

  [data-inviewport="outdoor-pool"].is-inViewport > .row > .remove-spacing > .spa-description > .spa-description-content.leFadeInRightDelayed{
    animation: 3s leFadeInRight;
  }


  [data-inviewport="outdoor-pool-2"].is-inViewport > .row > .remove-spacing > .spa-description  > .spa-description-background  {
    animation: 2s slide-up;
    margin-bottom: 0%;
  }

  [data-inviewport="outdoor-pool-2"].is-inViewport > .row > .remove-spacing > .spa-background  {
    animation: 2s slide-down;
    margin-top: 0%;
  }

  [data-inviewport="outdoor-pool-2"].is-inViewport > .row > .remove-spacing > .spa-description > .spa-description-content.leFadeInLeftDelayed{
    animation: 3s leFadeInLeft;
  }


  [data-inviewport="massage"].is-inViewport > .row > .remove-spacing > .spa-description  > .spa-description-background {
    animation: 2s slide-up;
    margin-bottom: 0%;
  }

  [data-inviewport="massage"].is-inViewport > .row > .remove-spacing > .spa-background  {
    animation: 2s slide-down;
    margin-top: 0%;
  }

  [data-inviewport="massage"].is-inViewport > .row > .remove-spacing > .spa-description > .spa-description-content.leFadeInRightDelayed{
    animation: 3s leFadeInRight;
  }

  [data-inviewport="fitness"].is-inViewport > .row > .remove-spacing > .spa-description  > .spa-description-background {
    animation: 2s slide-up;
    margin-bottom: 0%;
  }

  [data-inviewport="fitness"].is-inViewport > .row > .remove-spacing > .spa-background  {
    animation: 2s slide-down;
    margin-top: 0%;
  }

  [data-inviewport="fitness"].is-inViewport > .row > .remove-spacing > .spa-description > .spa-description-content.leFadeInRightDelayed{
    animation: 3s leFadeInRight;
  }

  [data-inviewport="hammam"].is-inViewport > .row > .remove-spacing > .spa-description  > .spa-description-background {
    animation: 2s slide-up;
    margin-bottom: 0%;
  }

  [data-inviewport="hammam"].is-inViewport > .row > .remove-spacing > .spa-background  {
    animation: 2s slide-down;
    margin-top: 0%;
  }

  [data-inviewport="hammam"].is-inViewport > .row > .remove-spacing > .spa-description > .spa-description-content.leFadeInRightDelayed{
    animation: 3s leFadeInRight;
  }

  .spa-block {
    overflow: hidden;
  }