.bodyX {
    /* background-image: url('https://static.pexels.com/photos/414171/pexels-photo-414171.jpeg'); */
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    /* background-image: url(../img/inopu2.png); */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* -webkit-animation: slidein 10s; */
    /* animation: slidein 10s infinite; */

    /* -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;

    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;

    -webkit-animation-direction: alternate;
    animation-direction: alternate; */
}
.xbackground{
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  /* height: 100%; */
  height: 135px;
  /* background-color: rgb(0, 0, 0, 0.5); */
  /* background-color: #25D3; */
  background-color: #092F56;
  opacity: .8;
  z-index: 9;
}
.xbackgroundCentro{
    position: absolute;
    top: -15px;
    right: 0;
    width: 100%;
    height: 102vh;
    background-color: rgb(0, 0, 0, 0.5);
    /* background-color: #25D3; */
    /* background-color: #25D366; */
    opacity: .5;
    z-index: 9;
}

@media (max-width: 768px) {
    .xbackgroundCentro{
        position: absolute;
        top: -15px;
        right: 0;
        width: 100%;
        height: 780px;
        background-color: rgb(0, 0, 0, 0.5);
        /* background-color: #25D3; */
        /* background-color: #25D366; */
        opacity: .5;
        z-index: 9;
    }
}
/* @-webkit-keyframes slidein {
    from {
        background-position: top;
        background-size: 3000px;
    }

    to {
        background-position: -100px 0px;
        background-size: 2750px;
    }
} */

@keyframes slidein {
    from {
        background-position: right;
        /* background-size: 3000px; */
    }

    to {
        background-position: 0px;
        /* background-size: 2750px; */
    }

}



.center {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(75, 75, 250, 0.3);
    border-radius: 3px;
}

.center h1 {
    text-align: center;
    color: white;
    font-family: 'Source Code Pro', monospace;
    text-transform: uppercase;
}

/* gdfdfdf */

.animacaoSlider {
    /* height: 100vh; */
     /* background: linear-gradient(90deg,#e52e71,#ff8a00); */

  }
   .slider-thumb{
    opacity: .2;
   }
  .thumb1::before{
    position: absolute;
    left: -3%;
    top: 4%;
    z-index: -1;
    width: 450px;
    height: 450px;
  }
  .thumb2::before{
    position: absolute;
    left: 83%;
    top: 39%;
    z-index: 1 !important;
    width: 72px;
    height: 72px;
    opacity: .4;
  }

.thumb4::before{
    position: absolute;
    left: 0;
    top: 28%;
    z-index: 1 !important;
    width: 280px;
    height: 250px;
    opacity: .4;
}

.thumb5::before{
    position: absolute;
    left: 75%;
    top: 23%;
    z-index: -1;
    width: 410px;
    height: 410px;
}

  .thumb3::before{
    position: absolute;
    left: 85%;
    top: 10%;
    z-index: -1;
    width: 130px;
    height: 130px;
  }
  .slider-thumb::before {
    /* position: absolute; */
    content: "";
    /* left: 30%;
    top: 20%; */
    /* width: 250px;
    height: 250px; */
    background: linear-gradient(334deg, #84c1ef, #008AF4) !important;
    border-radius: 62% 47% 82% 35% / 45% 45% 80% 66%;
    /* border-radius: 100%; */
    will-change: border-radius, transform, opacity;
    animation: sliderShape 5s linear infinite;
    display: block;
    z-index: -1;
    -webkit-animation: sliderShape 5s linear infinite;
  }
  @keyframes sliderShape{
    0%,100%{
    border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
    /* border-radius: 100%; */
      transform: translate3d(0,0,0) rotateZ(0.01deg);
    }
    34%{
        border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%;
        /* border-radius: 100%; */
      transform:  translate3d(0,5px,0) rotateZ(0.01deg);
    }
    50%{
      transform: translate3d(0,0,0) rotateZ(0.01deg);
    }
    67%{
      border-radius: 100% 60% 60% 100% / 100% 100% 60% 60% ;
      /* border-radius: 100%; */
      transform: translate3d(0,-3px,0) rotateZ(0.01deg);
    }
  }