.sliderCircular__container {
   display: grid;
   grid-template-columns: 100%;
   gap: 10px;
   overflow: hidden;
}

@media (min-width: 992px) {
   .sliderCircular__container {
      overflow: visible;
      grid-template-columns: auto 1fr;
   }
}

img {
   border: 0;
   max-width: 100%;
   height: auto;
}

.slider-wrapper {
   width: 360px;
   margin: 0 auto;
   position: relative;
   /* transform: scale(.8); */
   display: flex;
   align-items: center;
}

@media (max-width: 767px) {
   .slider-wrapper {
      transform: scale(.7);
      left: -26px;
   }
}


.rotatescroll img {
   vertical-align: middle;
   border: 9px solid #016d38;
}

.rotatescroll img,
.rotatescroll .overview li {
   border-radius: 50%;
}

/* Tiny Circleslider */

.rotatescroll {
   position: relative;
   height: 360px;
   width: 360px;
   padding: 30px;
   overflow: hidden;
}

.rotatescroll .viewport {
   /* width: 360px; */

   height: 360px;
   position: relative;
   margin: 0 auto;
   overflow: hidden;
   pointer-events: none;
   background-color: #016d38;
}

.rotatescroll .overview {
   /* position: absolute; */
   position: relative;
   width: 798px;
   list-style: none;
   left: 0;
   top: 0;
   margin: -20px 0 0 -20px;
   padding: 0;
   z-index: 0;
}

.rotatescroll .overview li {
   height: 342px;
   width: 342px;
   float: left;
   position: relative;
   padding: 15px;
   margin: 4px 0 0 4px;
}

.rotatescroll .overlay {
   pointer-events: none;
   position: absolute;
   left: 0;
   top: 0;
   height: 360px;
   width: 360px;
   background: url("../../img/interactivos/slider-circular/slider.svg") 0 0 no-repeat;
}

.rotatescroll .overlay-interaction {
   background: url("../../img/interactivos/slider-circular/slider.svg") 0 0 no-repeat;
   z-index: 0;
}

.rotatescroll [class*="-hovered"] {
   z-index: 1;
}

/*  https://mathiasbynens.be/notes/css-escapes  */
.rotatescroll .slideno\(4\),
.is-slide1-hovered {
   transform: rotate(0deg);
}

.rotatescroll .slideno\(1\),
.is-slide2-hovered {
   transform: rotate(90deg);
}

.rotatescroll .slideno\(2\),
.is-slide3-hovered {
   transform: rotate(180deg);
}

.rotatescroll .slideno\(3\),
.is-slide4-hovered {
   transform: rotate(270deg);
}



element.style {
   top: 158.953px;
   left: 39.2788px;
}

.rotatescroll .thumb {
   touch-action: none;
   -ms-touch-action: none;
   position: absolute;
   top: 6px;
   cursor: pointer;
   /* left: 137px; */
   left: 177px;
   width: 20px;
   height: 20px;
   z-index: 200;
   background: #ffdc5d;
   border: 3px solid #016d38;
   border-radius: 50%;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   -ms-border-radius: 50%;
   -o-border-radius: 50%;
}

.rotatescroll .dot {
   left: inherit !important;
   top: 0 !important;
   z-index: 100;
   text-align: center;
   overflow: hidden;
   position: absolute;
   /* top: 0; */

   right: 0;
   width: 50%;
   height: 50%;
   transform-origin: 0% 100%;
}

/*.rotatescroll .dot span {
    display: none; 
 }*/

.rotatescroll .dot:after {
   content: '';
   position: absolute;
   top: 2px;
   left: 0;
   border-left: 2px solid #016d38;
   height: 38px;
   /* display: table-cell; */
}

.char1 {
   transform-origin: center !important;
}

.dot-3 .char1 {
   transform: rotate(180deg) !important;
}

.rotatescroll .text {
   padding-top: 20px;
}

.rotatescroll .flip.text {
   padding-top: 30px;
   top: 20px !important;
}

.rotatescroll .flip.text span {
   top: 14px !important;
}

.rotatescroll .active .flip.text span {
   top: 20px !important;
}

.rotatescroll .active h1 div.text {
   color: #fff;
   padding: 20px;
   height: 8px !important;
   font-family: Sansation, sans-serif;
}

.rotatescroll .active h1 div.text:hover {
   color: #fff;
   text-shadow: none;
}

.rotatescroll h1 span {
   line-height: 0.35;
   white-space: pre;
   overflow: visible;
   padding: 0px;
}

.rotatescroll .flip {
   transform: rotate(180deg)
}

.rotatescroll .dot h1 {
   position: absolute;
   left: -100%;
   width: 200%;
   height: 200%;
   transform: skewY(0deg) rotate(45deg);
   margin: 0;
   cursor: pointer;
   text-align: center;
   font-size: 22px;
   line-height: 0;
   font-weight: bold;
   text-transform: uppercase;
   color: #fff;
}

.rotatescroll .dot-1 {
   transform: rotate(315deg) skewY(0deg);
}

.rotatescroll .dot-2 {
   transform: rotate(45deg) skewY(0deg);
}

.rotatescroll .dot-3 {
   transform: rotate(135deg) skewY(0deg);
}

.rotatescroll .dot-4 {
   transform: rotate(225deg) skewY(0deg);
}


/*=== imagen derecha ===*/

.imagen-derecha {
   display: flex;
   align-items: center;
   z-index: 1;
   padding: 0;
}

#escena {
   display: block;
   width: 100%;
}

@keyframes bounceIn1 {

   0%,
   20%,
   40%,
   60%,
   80%,
   to {
      animation-timing-function: cubic-bezier(.215, .61, .355, 1)
   }

   0% {
      opacity: 0;
      transform: scale3d(.3, .3, .3)
   }

   20% {
      transform: scale3d(1.1, 1.1, 1.1)
   }

   40% {
      transform: scale3d(.9, .9, .9)
   }

   60% {
      opacity: 1;
      transform: scale3d(1.03, 1.03, 1.03)
   }

   80% {
      transform: scale3d(.97, .97, .97)
   }

   to {
      opacity: 1;
      transform: scaleX(1)
   }
}

@keyframes bounceIn2 {

   0%,
   20%,
   40%,
   60%,
   80%,
   to {
      animation-timing-function: cubic-bezier(.215, .61, .355, 1)
   }

   0% {
      opacity: 0;
      transform: scale3d(.3, .3, .3)
   }

   20% {
      transform: scale3d(1.1, 1.1, 1.1)
   }

   40% {
      transform: scale3d(.9, .9, .9)
   }

   60% {
      opacity: 1;
      transform: scale3d(1.03, 1.03, 1.03)
   }

   80% {
      transform: scale3d(.97, .97, .97)
   }

   to {
      opacity: 1;
      transform: scaleX(1)
   }
}

@keyframes bounceIn3 {

   0%,
   20%,
   40%,
   60%,
   80%,
   to {
      animation-timing-function: cubic-bezier(.215, .61, .355, 1)
   }

   0% {
      opacity: 0;
      transform: scale3d(.3, .3, .3)
   }

   20% {
      transform: scale3d(1.1, 1.1, 1.1)
   }

   40% {
      transform: scale3d(.9, .9, .9)
   }

   60% {
      opacity: 1;
      transform: scale3d(1.03, 1.03, 1.03)
   }

   80% {
      transform: scale3d(.97, .97, .97)
   }

   to {
      opacity: 1;
      transform: scaleX(1)
   }
}

@keyframes bounceIn4 {

   0%,
   20%,
   40%,
   60%,
   80%,
   to {
      animation-timing-function: cubic-bezier(.215, .61, .355, 1)
   }

   0% {
      opacity: 0;
      transform: scale3d(.3, .3, .3)
   }

   20% {
      transform: scale3d(1.1, 1.1, 1.1)
   }

   40% {
      transform: scale3d(.9, .9, .9)
   }

   60% {
      opacity: 1;
      transform: scale3d(1.03, 1.03, 1.03)
   }

   80% {
      transform: scale3d(.97, .97, .97)
   }

   to {
      opacity: 1;
      transform: scaleX(1)
   }
}

.escena-01 {
   animation: bounceIn1 1s;
}

.escena-02 {
   animation: bounceIn2 1s;
}

.escena-03 {
   animation: bounceIn3 1s;
}

.escena-04 {
   animation: bounceIn4 1s;
}

.imgEscena {
   max-width: 400px;
   width: 100%;
   margin: 0 auto;
   display: block;
}

.sliderCircular__content {
   display: none;
   font-size: .9rem;
   line-height: 1.5;
   background-color: #F1F1F1;
   padding: 10px 15px;
   border-radius: 15px;
   border: 2px solid #016d38;
}

.escena-01 .contentEscena1 {
   display: block;
}

.escena-02 .contentEscena2 {
   display: block;
}

.escena-03 .contentEscena3 {
   display: block;
}

.escena-04 .contentEscena4 {
   display: block;
}

.listPrimary {
   list-style: none;
   padding-left: 0;
   margin-bottom: .3rem;
}

.listPrimary li {
   position: relative;
   padding-left: 40px;
   font-size: .9rem;
   line-height: 1.5;
}

.listPrimary li::before {
   content: "";
   display: block;
   width: 10px;
   height: 10px;
   background-color: #016d38;
   border-radius: 50%;
   position: absolute;
   left: 15px;
   top: 10px;
}

.bold {
   font-weight: bold;
}

.primary {
   color: #016d38;
}

.text-center {
   text-align: center;
   display: flex;
   align-items: center;
}

p {
   margin-bottom: .3rem;
   font-size: .9rem;
   line-height: 1.5;
}

/*=== FIN REDI  ===*/