/*#roto {
  position: relative;
}
#roto::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  background: linear-gradient(0deg, #fff, transparent);
  opacity: 0;
  z-index: 4;
  transition: 0.2s all ease;
}
#roto.active::before {
  opacity: 1;
  height: 50%;
}*/
/*.hero-banner,
.slide {
  overflow-x: hidden !important;
  max-width: 100vw;
}*/

.hero-banner, .slide {
    overflow: hidden !important;
    max-width: 100vw;
    max-height: 100vh;
}

.slide {
  width: 100%;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  background-color: #000;
}
.slide .mainImage {
  position: absolute;
  /*width: 130vw;
  height: 130vw;*/
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  object-position: bottom;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  animation-name: rotate;
  animation-timing-function: cubic-bezier(0.02, 0.63, 0.23, 0.99);
  animation-iteration-count: 1;
  animation-duration: 1.1s;
}
.slide .roundOuter {
  position: absolute;
  width: 86vw;
  height: 86vw;
  overflow: hidden;
  border-radius: 50%;
  left: calc(50% - 43vw);
  top: calc(50% - 43vw);
  /*filter: brightness(0.9);*/
  z-index: 1;
  /*border: 1px solid rgba(255, 255, 255, 0.2);*/
}
.slide .roundOuter .round-outer-img {
  position: absolute;
  /*width: 130vw;
  height: 130vw;*/
  width: 100vw;
  height: 100vh;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  object-position: bottom;
  animation-name: rotate;
  animation-timing-function: cubic-bezier(0.02, 0.63, 0.23, 0.99);
  animation-iteration-count: 1;
  animation-duration: 1.3s;
}
.slide .roundInner {
  position: absolute;
  width: 50vw;
  height: 50vw;
  overflow: hidden;
  left: calc(50% - 25vw);
  top: calc(50% - 25vw);
  border-radius: 50%;
  /*border: 1px solid rgba(255, 255, 255, 0.2);*/
  z-index: 2;
}
.slide .roundInner .round-inner-img {
  position: absolute;
  /*width: 130vw;
  height: 130vw;*/
  width: 100vw;
  height: 100vh;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  object-position: bottom;
  animation-name: rotate;
  animation-timing-function: cubic-bezier(0.02, 0.63, 0.23, 0.99);
  animation-iteration-count: 1;
  animation-duration: 1.2s;
}
.slide .slideText {
  position: absolute;
  z-index: 6;
  width: 100%;
  height: 100%;
  display: grid;
  place-content: center;
  text-align: center;
  /*background: linear-gradient(313deg, rgb(41 160 212 / 80%) 45%, rgb(243 244 246 / 30%) 70%, #f5851f 100%);*/
  /*background: linear-gradient(136deg, rgb(41 160 212 / 60%) 70%, #414141 100%);*/
  background: linear-gradient(-180deg, rgb(41 160 212 / 5%) 30%, #414141 100%);
  padding: 0 15px;
}
.slide .slideText h1 {
    font-size: 4.5rem;
    font-weight: 700;
    text-align: center;
    animation-delay: 1s;
    position: relative;
    color: #FFF;
    font-family: 'Clash Display', sans-serif;
    letter-spacing: .1rem;
    line-height: 1.5;
    margin-bottom: 1rem;
    z-index: 5;
    filter: drop-shadow(3px 3px 10px #414141);
}
.slide .slideText h1::after {
  content: "";
  position: absolute;
  width: 40vw;
  height: 1px;
  background-color: #fff;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.slide .slideText p {
    text-align: center;
    font-size: 1rem;
    padding-left: 0;
    animation-delay: 1.5s;
    z-index: 5;
    color: #FFF;
    font-family: 'Montserrat', sans-serif;
    line-height: 1.5;
    margin-bottom: 0;
    letter-spacing: .05rem;
    filter: drop-shadow(5px 3px 15px #414141);
}
.slide .slideText .buttonNav {
  display: flex;
  justify-content: center;
  gap: 12px;
  animation-delay: 1.7s;
}
.slide .slideText .buttonNav button {
  border: none;
  background: transparent;
  color: #fff;
  font-size: 1.3rem;
  filter: drop-shadow(0 2px 10px #000);
}
.slide .slideText .buttonNav span {
  display: grid;
  width: 1px;
  flex: 0 0 1px;
  background-color: #fff;
  filter: drop-shadow(0 2px 10px #000);
}

@keyframes rotate {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) scale(5);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg) scale(1);
  }
}
@media (max-width: 767px) {
  /*.hero-banner,
  .slide {
    overflow-x: hidden !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    position: relative;
  }*/
  /*.slide .mainImage {
    width: 130vh;
    height: 130vh;
  }*/
  .slide .mainImage {
        width: 100vw;
        height: 100vh;
    }
  /*.slide .roundOuter {
    width: 86vh;
    height: 86vh;
    left: calc(50% - 43vh);
    top: calc(50% - 43vh);
  }*/
  /*.slide .roundOuter {
        width: 60vw;
        height: 60vw;
        left: calc(50% - 30vw);
        top: calc(50% - 30vw);
    }
  .slide .roundOuter .round-outer-img {
    width: 100vw;
    height: 100vw;
  }*/
  /*.slide .roundInner {
    width: 50vh;
    height: 50vh;
    left: calc(50% - 25vh);
    top: calc(50% - 25vh);
  }*/
  /*.slide .roundInner {
        width: 35vw;
        height: 35vw;
        left: calc(50% - 17.5vw);
        top: calc(50% - 17.5vw);
    }
  .slide .roundInner .round-inner-img {
    width: 100vw;
    height: 100vw;
  }*/
  .slide .slideText h1 {
    /*font-size: 2rem;*/
    /*letter-spacing: 3vw;
    padding-left: 3vw;*/
  }
  .slide .slideText p {
    font-size: 1rem;
    padding: 0 15px;
    /*letter-spacing: 2vw;
    padding-left: 2vw;*/
  }
}