#hw-effects {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     overflow-x: hidden;
     pointer-events: none;
     z-index: 1;
}

.batsBox {
     text-align: center;
     width: 600px;
     position: static;
     right: 0;
     margin: auto;
     will-change: transform, opacity;
}
.bat-overlay {
     width: 100%;
     height: 100%;
     position: absolute;
     top: -250px;
     right: -400px;
     z-index: 5;
     pointer-events: none;
}
svg {
     width: 100%;
}
.eye {
     fill: orange;
}
.shadow {
     -webkit-filter: blur(6px);
     filter: blur(6px);
     opacity: 0.2;
}
.bat {
     animation-direction: normal;
     animation: move 15s infinite;
     animation-timing-function: ease-in-out;
     transform-origin: 50% 50%;
     will-change: transform, opacity;
}
.bat1 {
     animation-direction: normal;
     animation: move1 15s infinite;
     animation-timing-function: ease-in-out;
     transform-origin: 50% 50%;
     will-change: transform, opacity;
}
.bat2 {
     animation-direction: normal;
     animation: move2 15s infinite;
     animation-timing-function: ease-in-out;
     transform-origin: 50% 50%;
     will-change: transform, opacity;
}
.wing {
     transform-origin: 50% 50%;
     animation-direction: normal;
     animation: wing 1s infinite;
     animation-timing-function: ease-in-out;
     will-change: transform, opacity;
}
.wing1 {
     transform-origin: 50% 50%;
     animation-direction: normal;
     animation: wing1 1s infinite;
     animation-timing-function: ease-in-out;
     will-change: transform, opacity;
}
@keyframes move {
0% {
     transform: translate(150px, 90px) rotate(10deg);
}
25% {
     transform: translate(-150px, 90px) rotate(-10deg);
}
50% {
     transform: translate(-160px, -80px) rotate(10deg);
}
75% {
     transform: translate(-140px, -100px) rotate(-10deg);
}
100% {
     transform: translate(150px, 90px) rotate(10deg);
}
}
@keyframes move1 {
0% {
     transform: translate(-140px, -70px) rotate(-10deg);
}
25% {
     transform: translate(0px, -50px) rotate(10deg);
}
50% {
     transform: translate(150px, 50px) rotate(-10deg);
}
75% {
     transform: translate(-100px, 30px) rotate(10deg);
}
85% {
transform: translate(-110px, 90px) rotate(10deg);
}
100% {
     transform: translate(-140px, -70px) rotate(-10deg);
}
}
@keyframes move2 {
0% {
     transform: translate(150px, -70px) scale(1) rotate(10deg);
}
25% {
     transform: translate(160px, -90px) scale(0.7) rotate(-10deg);
}
50% {
     transform: translate(170px, -100px) scale(0.7) rotate(10deg);
}
75% {
     transform: translate(105px, -80px) scale(1) rotate(-10deg);
}
100% {
     transform: translate(150px, -70px) scale(1) rotate(10deg);
}
}
@keyframes wing {
0% {
     transform: translate(0px, 0px) scale(1) rotate(0deg);
}
50% {
     transform: translate(0px, 0px) scaleX(0.5) rotate(-25deg);
}
100% {
     transform: translate(0px, 0px) scale(1) rotate(0deg);
}
}
@keyframes wing1 {
0% {
     transform: translate(0px, 0px) scale(1) rotate(0deg);
}
50% {
     transform: translate(0px, 0px) scaleX(0.5) rotate(25deg);
}
100% {
     transform: translate(0px, 0px) scale(1) rotate(0deg);
}
}
@media screen and (max-width: 768px) {
.batsBox {
     width: 100% !important;
     will-change: transform, opacity;
}
.bat-overlay {
     width: 100%;
     height: 100%;
     position: absolute;
     top: -250px;
     right: 0;
     left: 0;
}
}