:root {
  --anim-height: 100vh;
  --anim-max-height: 77vw;
  --anim-padding-top: 7.7rem;
  --scroll-height: 200vh;
}

body.home {
  padding-top: 0;
}
body.home .wrapper {
  position: relative;
}
body.home main {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding-bottom: calc(var(--anim-padding-top) - 2em);
}
body.home.anim-finish main {
  position: relative;
}
body.home.anim-finish .content-height {
  display: none;
}
body.home .scroll-anim-points {
  position: relative;
  height: var(--scroll-height);
  width: 1px;
}
body.home .point {
  position: absolute;
  left: 0;
  height: 10px;
  width: 1px;
}
body.home .p-1a {
  top: var(--anim-padding-top);
}
body.home .p-1b {
  top: 20%;
}
body.home .p-2a {
  top: 18%;
}
body.home .p-2b {
  top: 70%;
}
body.home .p-3a {
  top: 65%;
}
body.home .p-3b {
  top: 95%;
}
body.home .p-end {
  top: 100%;
}

.otgs-development-site-front-end {
  display: none;
}

#scrollColors {
  -webkit-transition: opacity 0.5s ease-out;
  transition: opacity 0.5s ease-out;
}
#scrollColors.reset {
  opacity: 0;
}

.anim-container {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: var(--anim-height);
  max-height: var(--anim-max-height);
  min-height: 50vh;
  padding-top: var(--anim-padding-top);
  overflow: hidden;
}
.anim-container .a-center {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  width: 100%;
  max-width: 100vh;
  padding-top: calc(var(--anim-padding-top) / 2);
  margin: 0 auto;
  z-index: 2;
}
.anim-container .a-content {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 60%;
}
.anim-container .a-content:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.anim-container .texto {
  position: absolute;
  top: 73%;
  left: -50%;
  width: 200%;
  text-align: center;
  font-size: 6.4vmin;
  line-height: 1.2;
  font-weight: 400;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 10;
}
.anim-container .t-1 {
  opacity: 0;
  -webkit-transition: all 1s 0.5s ease-out;
  transition: all 1s 0.5s ease-out;
}
.loaded .anim-container .t-1 {
  opacity: 1;
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
}
.anim-container .t-2 {
  opacity: 0;
  color: #FFF;
  font-weight: 500;
}
.anim-container .icono {
  position: relative;
  width: 12.5%;
  z-index: 3;
}
.anim-container .espiga {
  position: absolute;
  top: calc(var(--anim-padding-top) / 2);
  left: 41%;
  width: 21%;
  -webkit-transform: translate(-50%, -17.4%);
      -ms-transform: translate(-50%, -17.4%);
          transform: translate(-50%, -17.4%);
  z-index: 7;
  opacity: 0.2;
  -webkit-transition: all 1.2s 0.5s ease-out;
  transition: all 1.2s 0.5s ease-out;
}
.anim-container .espiga .imagen.part-b {
  position: absolute;
  opacity: 0;
  top: -1px;
  left: 0;
  bottom: 100%;
}
.anim-container .espiga:after {
  content: "";
  display: block;
  padding-bottom: 546%;
}
.loaded .anim-container .espiga {
  opacity: 1;
}
.anim-container .espiga picture,
.anim-container .espiga img {
  display: block;
  width: 100%;
}
.anim-container .espiga .mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
  -webkit-mask-image: url("../img/circle.svg");
          mask-image: url("../img/circle.svg");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  margin: -2.5rem 0 0 -2.5rem;
  opacity: 1;
}
.anim-container .espiga .mask:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.anim-container .hexagono {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12.95%;
  -webkit-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 6;
}
.anim-container .hexagono svg {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
}
.anim-container .hexagono.h-1 {
  -webkit-transform: translate(-50%, -50%) rotate(180deg);
      -ms-transform: translate(-50%, -50%) rotate(180deg);
          transform: translate(-50%, -50%) rotate(180deg);
}
.anim-container .hexagono.h-1 path {
  fill: #73f6f7;
}
.anim-container .hexagono.h-2 {
  -webkit-transform: translate(-50%, -50%) rotate(225deg);
      -ms-transform: translate(-50%, -50%) rotate(225deg);
          transform: translate(-50%, -50%) rotate(225deg);
}
.anim-container .hexagono.h-2 path {
  fill: #bfd335;
}
.anim-container .hexagono.h-3 {
  -webkit-transform: translate(-50%, -50%) rotate(270deg);
      -ms-transform: translate(-50%, -50%) rotate(270deg);
          transform: translate(-50%, -50%) rotate(270deg);
}
.anim-container .hexagono.h-3 path {
  fill: #fcfb56;
}
.anim-container .hexagono.h-4 {
  -webkit-transform: translate(-50%, -50%) rotate(315deg);
      -ms-transform: translate(-50%, -50%) rotate(315deg);
          transform: translate(-50%, -50%) rotate(315deg);
}
.anim-container .hexagono.h-4 path {
  fill: #f8bf46;
}
.anim-container .hexagono.h-5 {
  -webkit-transform: translate(-50%, -50%) rotate(0deg);
      -ms-transform: translate(-50%, -50%) rotate(0deg);
          transform: translate(-50%, -50%) rotate(0deg);
}
.anim-container .hexagono.h-5 path {
  fill: #ea3226;
}
.anim-container .hexagono.h-6 {
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
      -ms-transform: translate(-50%, -50%) rotate(45deg);
          transform: translate(-50%, -50%) rotate(45deg);
}
.anim-container .hexagono.h-6 path {
  fill: #ea3a9f;
}
.anim-container .hexagono.h-7 {
  -webkit-transform: translate(-50%, -50%) rotate(90deg);
      -ms-transform: translate(-50%, -50%) rotate(90deg);
          transform: translate(-50%, -50%) rotate(90deg);
}
.anim-container .hexagono.h-7 path {
  fill: #ea3ef5;
}
.anim-container .hexagono.h-8 {
  -webkit-transform: translate(-50%, -50%) rotate(135deg);
      -ms-transform: translate(-50%, -50%) rotate(135deg);
          transform: translate(-50%, -50%) rotate(135deg);
}
.anim-container .hexagono.h-8 path {
  fill: #052ff6;
}

.border-gradient {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% + 1.5rem);
  height: calc(100% + 1.5rem);
  border-radius: 100%;
  -webkit-transform: translate(-50%, -50%) rotate(180deg);
      -ms-transform: translate(-50%, -50%) rotate(180deg);
          transform: translate(-50%, -50%) rotate(180deg);
  background: conic-gradient(#73f6f7, #bfd335, #fcfb56, #f8bf46, #ea3226, #ea3a9f, #ea3ef5, #052ff6, #73f6f7);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 0.5rem), black 0);
          mask: radial-gradient(farthest-side, transparent calc(100% - 0.5rem), black 0);
  opacity: 0;
  -webkit-transition: opacity 0.8s ease-out, -webkit-transform 1.2s ease-out;
  transition: opacity 0.8s ease-out, -webkit-transform 1.2s ease-out;
  transition: transform 1.2s ease-out, opacity 0.8s ease-out;
  transition: transform 1.2s ease-out, opacity 0.8s ease-out, -webkit-transform 1.2s ease-out;
}
.loaded .border-gradient {
  opacity: 1;
  -webkit-transform: translate(-50%, -50%) rotate(0deg);
      -ms-transform: translate(-50%, -50%) rotate(0deg);
          transform: translate(-50%, -50%) rotate(0deg);
}

.a-back {
  position: absolute;
  top: var(--anim-padding-top);
  top: 0;
  left: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}
.a-back .mask {
  position: absolute;
  top: calc(50% + var(--anim-padding-top) / 2);
  left: 50%;
  width: 5rem;
  z-index: 2;
  -webkit-mask-image: url("../img/circle.svg");
          mask-image: url("../img/circle.svg");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  margin: 0 0 0 -2.5rem;
  opacity: 0;
}
.a-back .mask:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.a-back .back-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--anim-height);
  max-height: var(--anim-max-height);
  background: url("../img/animation-back-full.jpg") no-repeat center 50%;
  background-size: cover;
  overflow: hidden;
  z-index: 1;
}
.anim-finish .a-back .back-image {
  display: none;
}
.anim-finish .a-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--anim-height);
  max-height: var(--anim-max-height);
  background: url("../img/animation-back-full.jpg") no-repeat center 50%;
  background-size: cover;
  overflow: hidden;
  z-index: 1;
}

@media screen and (max-height: 800px) {
  .anim-container .a-center {
    max-width: 110vh;
  }
}
@media screen and (max-width: 1280px) {
  .anim-container {
    --anim-max-height: 100vw;
  }
}
@media screen and (max-width: 820px) and (max-aspect-ratio: 5/5) {
  .anim-container {
    --anim-height: 110vw;
    --anim-max-height: 100vh;
    min-height: 0;
  }
  .anim-container .a-center {
    max-width: none;
  }
}/*# sourceMappingURL=animaciones.css.map */