.contenedor-dibujo{
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 4px;
    width: 100%;
    margin: 25vh 0;
    transition: all 700ms ease;
    position: absolute;
    top: 10vh;   
    z-index: 11000;
}

.nover{
    display: none;
    transition: all 700ms ease;
}
  
.dibujo {
    width: 150px;
    height: 150px;
    vertical-align: top;
    position: relative;
    border-radius: 10px;
    /* background-color: rgb(130 150 199 / 77%);
    box-shadow: 0px 0px 8px 3px; */
}
  
.dibujo-wrapper {
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.mano{
    display: none;
}
  
.hand-dibujo {
    position: relative;
}
  
.hand {
    background: #fff;
    width: 5px;
    height: 16px;
    border-radius: 20px;
    position: relative;
    left: -5px;
    margin-bottom: 17px;
    transform: rotate(-20deg);
    animation: handAnim 1.2s infinite;
}

.hand:after {
      content: "";
      background: #fff;
      width: 17px;
      height: 18px;
      border-radius: 4px 8px 38px 15px;
      transform: rotate(6deg) skewY(10deg);
      position: absolute;
      top: 13px;
      left: -1px;
}
  
.hand:before {
    content: "";
    background: #fff;
    width: 6px;
    height: 17px;
    border-radius: 2px 40px 20px 20px;
    position: absolute;
    top: 12px;
    left: -6px;
    transform: rotate(-38deg);
}

.circle {
    background-color: #fff;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: absolute;
    top: -7px;
    left: -7px;
    opacity: .5;
    animation: circleAnim 1.2s infinite 2.1s;
}
  
@keyframes handAnim {
    0% {
      top: 20px;
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      top: -20px;
      opacity: 0;
    }
  }
  
 @keyframes circleAnim {
    from { 
      transform: scale(0);
    }
    to {
      transform: scale(2);
      opacity: 0;
    }
  }
  
  
  
.mouse-dibujo {
    position: relative;
}
    
.mouse {
    width: 39px;
    height: 65px;
    background: #fff;
    border-radius: 20px;
    position: relative;
    margin-bottom: 3px;
}
  
.mouse:after {
    content: "";
    background: #D83C40;
    width: 7px;
    height: 12px;
    position: absolute;
    top: 5px;
    left: 50%;
    margin-left: -3px;
    border-radius: 20px;
    animation: scrollAnim 1.1s infinite;
}

.arrow {
    width: 12px;
    height: 12px;
    display: block;
    border-bottom: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
    position: relative;
    margin: 0 auto;
    animation: arrowAnim 1.2s infinite;
}
  
.arrow.arrow-01 {
    animation-delay: .2s;
}
.arrow.arrow-02 {
    animation-delay: .3s;
}
.arrow.arrow-03 {
    animation-delay: .4s;
}
@keyframes scrollAnim {
    from { 
      top: 5px;
    }
    to {
      top: 15px;
      opacity: 0;
    }
  }
  
@keyframes arrowAnim {
    0% {
      opacity: 0;
    }
    50% { 
      opacity: 1;
    }
    100% { 
      opacity: 0;
    }
  }
  
 
@media (max-width:768px) {
      .mano{
          display: block;
      }
      .raton{
          display: none;
      }
  }