.fadeRight,
.fadeLeft,
.fadeDown,
.fadeUp,
.fadeScale,
.fade,
.mainText {
  position: absolute;
  left: -9999999px;
  opacity: 0;
  visibility: hidden;
}

@-webkit-keyframes fade {
  0% {
    opacity: 0;
    visibility: hidden;
  }

  100% {
    opacity: 1;
    visibility: visible;
  }
}

@keyframes fade {
  0% {
    opacity: 0;
    visibility: hidden;
  }

  100% {
    opacity: 1;
    visibility: visible;
  }
}

@-webkit-keyframes fadeDown {
  0% {
    -webkit-transform: translate3d(0,-2rem,0);
    transform: translate3d(0,-2rem,0);
    opacity: 0;
    visibility: hidden;
  }

  100% {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    opacity: 1;
    visibility: visible;
  }
}

@keyframes fadeDown {
  0% {
    -webkit-transform: translate3d(0,-2rem,0);
    transform: translate3d(0,-2rem,0);
    opacity: 0;
    visibility: hidden;
  }

  100% {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    opacity: 1;
    visibility: visible;
  }
}

@-webkit-keyframes fadeDownArrowHero {
  0% {
    -webkit-transform: translate3d(0,-2rem,0) translateX(-50%);
    transform: translate3d(0,-2rem,0) translateX(-50%);
    opacity: 0;
    visibility: hidden;
  }

  100% {
    -webkit-transform: translate3d(0,0,0) translateX(-50%);
    transform: translate3d(0,0,0) translateX(-50%);
    opacity: 1;
    visibility: visible;
  }
}

@keyframes fadeDownArrowHero {
  0% {
    -webkit-transform: translate3d(0,-2rem,0) translateX(-50%);
    transform: translate3d(0,-2rem,0) translateX(-50%);
    opacity: 0;
    visibility: hidden;
  }

  100% {
    -webkit-transform: translate3d(0,0,0) translateX(-50%);
    transform: translate3d(0,0,0) translateX(-50%);
    opacity: 1;
    visibility: visible;
  }
}

@-webkit-keyframes fadeUp {
  0% {
    -webkit-transform: translate3d(0,5rem,0);
    transform: translate3d(0,5rem,0);
    opacity: 0;
    visibility: hidden;
  }

  100% {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    opacity: 1;
    visibility: visible;
  }
}

@keyframes fadeUp {
  0% {
    -webkit-transform: translate3d(0,5rem,0);
    transform: translate3d(0,5rem,0);
    opacity: 0;
    visibility: hidden;
  }

  100% {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    opacity: 1;
    visibility: visible;
  }
}

@-webkit-keyframes fadeScale {
  0% {
    -webkit-transform: scale(.5);
    transform: scale(.5);
    opacity: 0;
    visibility: hidden;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    visibility: visible;
  }
}

@keyframes fadeScale {
  0% {
    -webkit-transform: scale(.5);
    transform: scale(.5);
    opacity: 0;
    visibility: hidden;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    visibility: visible;
  }
}

@-webkit-keyframes fadeLeft {
  0% {
    -webkit-transform: translate3d(-5rem,0,0);
    transform: translate3d(-5rem,0,0);
    opacity: 0;
    visibility: hidden;
  }

  100% {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    opacity: 1;
    visibility: visible;
  }
}

@keyframes fadeLeft {
  0% {
    -webkit-transform: translate3d(-5rem,0,0);
    transform: translate3d(-5rem,0,0);
    opacity: 0;
    visibility: hidden;
  }

  100% {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    opacity: 1;
    visibility: visible;
  }
}

@-webkit-keyframes fadeRight {
  0% {
    -webkit-transform: translate3d(5rem,0,0);
    transform: translate3d(5rem,0,0);
    opacity: 0;
    visibility: hidden;
  }

  100% {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    opacity: 1;
    visibility: visible;
  }
}

@keyframes fadeRight {
  0% {
    -webkit-transform: translate3d(5rem,0,0);
    transform: translate3d(5rem,0,0);
    opacity: 0;
    visibility: hidden;
  }

  100% {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    opacity: 1;
    visibility: visible;
  }
}

@-webkit-keyframes Rotate {
  0% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    opacity: 1;
    visibility: visible;
    -webkit-transform-origin: bottom center;
    transform-origin: bottom center;
  }

  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    opacity: 1;
    visibility: visible;
    -webkit-transform-origin: bottom center;
    transform-origin: bottom center;
  }
}

@keyframes Rotate {
  0% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    opacity: 1;
    visibility: visible;
    -webkit-transform-origin: bottom center;
    transform-origin: bottom center;
  }

  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    opacity: 1;
    visibility: visible;
    -webkit-transform-origin: bottom center;
    transform-origin: bottom center;
  }
}

@-webkit-keyframes Scale {
  0% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    opacity: 1;
    visibility: visible;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    visibility: visible;
  }
}

@keyframes Scale {
  0% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    opacity: 1;
    visibility: visible;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    visibility: visible;
  }
}

@-webkit-keyframes Name {
  0% {
    -webkit-transform: rotate(180deg) translateX(-13px) translateY(50px);
    transform: rotate(180deg) translateX(-13px) translateY(50px);
    opacity: 0;
    visibility: hidden;
  }

  100% {
    -webkit-transform: rotate(180deg) translateX(-13px) translateY(0);
    transform: rotate(180deg) translateX(-13px) translateY(0);
    opacity: 1;
    visibility: visible;
  }
}

@keyframes Name {
  0% {
    -webkit-transform: rotate(180deg) translateX(-13px) translateY(50px);
    transform: rotate(180deg) translateX(-13px) translateY(50px);
    opacity: 0;
    visibility: hidden;
  }

  100% {
    -webkit-transform: rotate(180deg) translateX(-13px) translateY(0);
    transform: rotate(180deg) translateX(-13px) translateY(0);
    opacity: 1;
    visibility: visible;
  }
}

@-webkit-keyframes translate {
  0% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    opacity: 1;
    visibility: visible;
  }

  100% {
    -webkit-transform: translateY(-2%);
    transform: translateY(-2%);
    opacity: 1;
    visibility: visible;
  }
}

@keyframes translate {
  0% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    opacity: 1;
    visibility: visible;
  }

  100% {
    -webkit-transform: translateY(-2%);
    transform: translateY(-2%);
    opacity: 1;
    visibility: visible;
  }
}

@-webkit-keyframes translateX {
  0% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    opacity: 1;
    visibility: visible;
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
  }
}

@keyframes translateX {
  0% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    opacity: 1;
    visibility: visible;
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
  }
}

/* Hero */

@media only screen and (min-width: 1024px) {
    
    /* Texts Main */
    #hero .hero__copy h1,
    #hero .hero__copy h2,
    #hero .hero__copy .hero__award__row,
    #hero .hero__copy .hero__copy__description,
    #hero .hero__arrow__wrapper {
      opacity: 0;
      visibility: hidden;
    }
  
    #hero.animateActive .hero__copy h1,
    #hero.animateActive .hero__copy h2,
    #hero.animateActive .hero__copy .hero__award__row,
    #hero.animateActive .hero__copy .hero__copy__description {
      -webkit-animation: fadeDown .8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
      animation: fadeDown .8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
      -webkit-animation-delay: .2s;
      animation-delay: .2s;
    }

    #hero.animateActive .hero__arrow__wrapper{
        -webkit-animation: fadeDownArrowHero .8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
      animation: fadeDownArrowHero .8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
      -webkit-animation-delay: .2s;
      animation-delay: .2s;
    } 
  
    #hero.animateActive .hero__copy h2,
    #hero.animateActive .hero__copy .hero__copy__description{
      -webkit-animation-delay: .4s;
      animation-delay: .4s;
    }
    
    #hero.animateActive .hero__copy .hero__award__row{
      -webkit-animation-delay: .8s;
      animation-delay: .8s;
    }

    #hero.animateActive .hero__arrow__wrapper{
        -webkit-animation-delay: 1.2s;
      animation-delay: 1.2s;
    }

    /* Hero Stay */

    #hero.stay.animateActive .hero__copy .hero__award__row{
      -webkit-animation-delay: .2s;
      animation-delay: .2s;
    }
    
    #hero.stay.animateActive .hero__copy h1{
      -webkit-animation-delay: .8s;
      animation-delay: .8s;
    }
    
    /* Hero Discover */

    #hero.hero__404 .discover__start{
      opacity: 0;
      visibility: hidden;
  }

    #hero.hero__404.animateActive .discover__start {
        -webkit-animation: fadeDown .8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
        animation: fadeDown .8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
        -webkit-animation-delay: 1.2s;
        animation-delay: 1.2s;
    }

    #hero.discover.animateActive .hero__copy h1{
      -webkit-animation-delay: .2s;
      animation-delay: .2s;
    }
    
    #hero.discover.animateActive .hero__copy .hero__copy__description{
      -webkit-animation-delay: .8s;
      animation-delay: .8s;
    }

    /* Experience */

    #experience .experience__maincopy{
        opacity: 0;
        visibility: hidden;
    }

    #experience.animateActive .experience__maincopy {
        -webkit-animation: fadeDownArrowHero .8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
        animation: fadeDownArrowHero .8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
        -webkit-animation-delay: .2s;
        animation-delay: .2s;
    }
    
    /* Eat */
    #hero.eat .hero__copy__relais,
    #hero.eat .discover__start,
    #hero.eat .hero__arrow,
    #hero.eat .eat__hero__desc figure{
      opacity: 0;
      visibility: hidden;
    }

    #hero.eat.animateActive .hero__copy__relais,
    #hero.eat.animateActive .discover__start,
    #hero.eat.animateActive .hero__arrow,
    #hero.eat.animateActive .eat__hero__desc figure{
      -webkit-animation: fadeDown .8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
        animation: fadeDown .8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
        -webkit-animation-delay: .2s;
        animation-delay: .2s;
    }

    #hero.eat.animateActive .hero__copy__relais{
      -webkit-animation-delay: .4s;
      animation-delay: .4s;
    }

    #hero.eat.animateActive .hero__arrow,
    #hero.eat.animateActive .discover__start{
      -webkit-animation-delay: .8s;
      animation-delay: .8s;
    }

    #hero.eat.animateActive .eat__hero__desc figure{
      -webkit-animation-delay: 1s;
      animation-delay: 1s;
    }

    /* Hero Contact */

    #hero.hero__contact .hero__copy__contact a,
    #hero.hero__contact .hero__copy__contact__info,
    #hero.hero__contact .hero__copy__contact__form{
      opacity: 0;
      visibility: hidden;
    }

    #hero.hero__contact.animateActive .hero__copy__contact a,
    #hero.hero__contact.animateActive .hero__copy__contact__info,
    #hero.hero__contact.animateActive .hero__copy__contact__form{
      -webkit-animation: fadeDown .8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
        animation: fadeDown .8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
    }

    #hero.hero__contact.animateActive .hero__copy__contact a{
      -webkit-animation-delay: .4s;
      animation-delay: .4s;
    }

    #hero.hero__contact.animateActive .hero__copy__contact__info{
      -webkit-animation-delay: .6s;
      animation-delay: .6s;
    }

    #hero.hero__contact.animateActive .hero__copy__contact__form{
      -webkit-animation-delay: .8s;
      animation-delay: .8s;
    }


    /* Video Copy */


    /* Step into villa */

    #calltoaction1 .calltoaction__splitimage__image__copy h3,
    #calltoaction1 .calltoaction__splitimage__image__copy .calltoaction__splitimage__image__copy__award,
    #calltoaction1 .calltoaction__splitimage__image__copy .calltoaction__splitimage__image__copy__description{
      opacity: 0;
      visibility: hidden;
    }

    #calltoaction1.animateActive .calltoaction__splitimage__image__copy h3,
    #calltoaction1.animateActive .calltoaction__splitimage__image__copy .calltoaction__splitimage__image__copy__award,
    #calltoaction1.animateActive .calltoaction__splitimage__image__copy .calltoaction__splitimage__image__copy__description{
      -webkit-animation: fadeDown .8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
      animation: fadeDown .8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
      -webkit-animation-delay: .2s;
      animation-delay: .2s;
    }

    #calltoaction1.animateActive .calltoaction__splitimage__image__copy .calltoaction__splitimage__image__copy__award{
      -webkit-animation-delay: .4s;
      animation-delay: .4s;
    }

    #calltoaction1.animateActive .calltoaction__splitimage__image__copy .calltoaction__splitimage__image__copy__description{
      -webkit-animation-delay: .8s;
      animation-delay: .8s;
    }

    /* Be One */

    #calltoaction2 .calltoaction__splitimage__image__copy h4,
    #calltoaction2 .calltoaction__splitimage__image__copy h5,
    #calltoaction2 .calltoaction__splitimage__image__copy span,
    #calltoaction2 .calltoaction__splitimage__image__copy figure{
      opacity: 0;
      visibility: hidden;
    }

    #calltoaction2.animateActive .calltoaction__splitimage__image__copy h4,
    #calltoaction2.animateActive .calltoaction__splitimage__image__copy h5,
    #calltoaction2.animateActive .calltoaction__splitimage__image__copy span,
    #calltoaction2.animateActive .calltoaction__splitimage__image__copy figure{
      -webkit-animation: fadeDown .8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
      animation: fadeDown .8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
      -webkit-animation-delay: .2s;
      animation-delay: .2s;
    }

    #calltoaction2.animateActive .calltoaction__splitimage__image__copy h5{
      -webkit-animation-delay: .4s;
      animation-delay: .4s;
    }

    #calltoaction2.animateActive .calltoaction__splitimage__image__copy span{
      -webkit-animation-delay: .8s;
      animation-delay: .8s;
    }
    
    #calltoaction2.animateActive .calltoaction__splitimage__image__copy figure{
      -webkit-animation-delay: 1s;
      animation-delay: 1s;
    }

    /* Sustainablity */

    #calltoaction3 .calltoaction__splitimage__image__copy h4,
    #calltoaction3 .calltoaction__splitimage__image__copy h5,
    #calltoaction3 .calltoaction__splitimage__image__copy__description{
      opacity: 0;
      visibility: hidden;
    }

    #calltoaction3.animateActive .calltoaction__splitimage__image__copy h4,
    #calltoaction3.animateActive .calltoaction__splitimage__image__copy h5,
    #calltoaction3.animateActive .calltoaction__splitimage__image__copy__description{
      -webkit-animation: fadeDown .8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
      animation: fadeDown .8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
      -webkit-animation-delay: .2s;
      animation-delay: .2s;
    }

    #calltoaction3.animateActive .calltoaction__splitimage__image__copy h5{
      -webkit-animation-delay: .4s;
      animation-delay: .4s;
    }

    #calltoaction3.animateActive .calltoaction__splitimage__image__copy__description{
      -webkit-animation-delay: .8s;
      animation-delay: .8s;
    }
    
    /* Call Stay */

    #calltoactionstay1 .calltoaction__splitimage__image__copy h4,
    #calltoactionstay1 .calltoaction__splitimage__image__copy p{
      opacity: 0;
      visibility: hidden;
    }

    #calltoactionstay1.animateActive .calltoaction__splitimage__image__copy h4,
    #calltoactionstay1.animateActive .calltoaction__splitimage__image__copy p{
      -webkit-animation: fadeDown .8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
      animation: fadeDown .8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
      -webkit-animation-delay: .2s;
      animation-delay: .2s;
    }

    #calltoactionstay1.animateActive .calltoaction__splitimage__image__copy p{
      -webkit-animation-delay: .4s;
      animation-delay: .4s;
    }
    
    /* Separation Text */
  
    .separation__text .separation__text__wrapper p{
      opacity: 0;
      visibility: hidden;
    }
    
    .separation__text.animateActive .separation__text__wrapper p{
      -webkit-animation: fadeDown .8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
      animation: fadeDown .8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
      -webkit-animation-delay: .2s;
      animation-delay: .2s;
    }

    /* Explore Curated */

    .curated .curated__wrapper .curated__title,
    .curated .curated__wrapper .curated__desc,
    .curated .curated__wrapper .curated__desc__cta{
      opacity: 0;
      visibility: hidden;
    }

    .curated.animateActive .curated__wrapper .curated__title,
    .curated.animateActive .curated__wrapper .curated__desc,
    .curated.animateActive .curated__wrapper .curated__desc__cta{
      -webkit-animation: fadeDown .8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
      animation: fadeDown .8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
      -webkit-animation-delay: .2s;
      animation-delay: .2s;
    }

    .curated.animateActive .curated__wrapper .curated__desc{
      -webkit-animation-delay: .6s;
      animation-delay: .6s;
    }
    
    .curated.animateActive .curated__wrapper .curated__desc__cta{
      -webkit-animation-delay: 1s;
      animation-delay: 1s;
    }

    /* Awards */

    #awards .awards__affi,
    #awards .awards__first{
      opacity: 0;
      visibility: hidden;
    }

    #awards.animateActive .awards__affi,
    #awards.animateActive .awards__first{
      -webkit-animation: fadeDown .8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
      animation: fadeDown .8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
      -webkit-animation-delay: .2s;
      animation-delay: .2s;
    }

    #awards.animateActive .awards__affi{
      -webkit-animation-delay: .8s;
      animation-delay: .8s;
    }
    
    /* Awards */

    #awards.awards__about h4{
      opacity: 0;
      visibility: hidden;
    }

    #awards.animateActive.awards__about h4{
      -webkit-animation: fadeDown .8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
      animation: fadeDown .8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
      -webkit-animation-delay: .2s;
      animation-delay: .2s;
    }
    
    /* Footer */

    #footer:not(.internal) .footer__dis,
    #footer:not(.internal) .footer__reserv,
    #footer:not(.internal) .submenu__one,
    #footer:not(.internal) .submenu__social{
      opacity: 0;
      visibility: hidden;
    }

    #footer:not(.internal).animateActiveOffsetMax .footer__dis,
    #footer:not(.internal).animateActiveOffsetMax .footer__reserv,
    #footer:not(.internal).animateActiveOffsetMax .submenu__one,
    #footer:not(.internal).animateActiveOffsetMax .submenu__social{
      -webkit-animation: fadeDown .8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
      animation: fadeDown .8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
      -webkit-animation-delay: .2s;
      animation-delay: .2s;
    }

    #footer:not(.internal).animateActiveOffsetMax .footer__reserv{
      -webkit-animation-delay: .4s;
      animation-delay: .4s;
    }
    
    #footer:not(.internal).animateActiveOffsetMax .submenu__one{
      -webkit-animation-delay: 1s;
      animation-delay: 1s;
    }
    
    #footer:not(.internal).animateActiveOffsetMax .submenu__social{
      -webkit-animation-delay: .8s;
      animation-delay: .8s;
    }


}