.bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #fff;
    opacity: 0;
    
}
.bg .dotWrapper {
    position: absolute;
}
.bg .dotWrapper-1 {
    top: 53%;
    left: 78%;
    animation: flying 66s ease-in-out -1.7s infinite alternate;
}
.bg .dotWrapper-2 {
    top: 72%;
    left: 15%;
    animation: flying 68s ease-in-out -4.5s infinite alternate;
}
.bg .dotWrapper-3 {
    top: 67%;
    left: 86%;
    animation: flying 36s ease-in-out -9.3s infinite alternate;
}
.bg .dotWrapper-4 {
    top: 85%;
    left: 2%;
    animation: flying 32s ease-in-out -8.6s infinite alternate;
}
.bg .dotWrapper-5 {
    top: 21%;
    left: 40%;
    animation: flying 22s ease-in-out -9s infinite alternate;
}
.bg .dotWrapper-6 {
    top: 82%;
    left: 36%;
    animation: flying 57s ease-in-out -5.3s infinite alternate;
}
.bg .dotWrapper-7 {
    top: 64%;
    left: 14%;
    animation: flying 29s ease-in-out -0.6s infinite alternate;
}
.bg .dotWrapper-8 {
    top: 81%;
    left: 10%;
    animation: flying 30s ease-in-out -1.3s infinite alternate;
}
.bg .dotWrapper-9 {
    top: 8%;
    left: 85%;
    animation: flying 36s ease-in-out -4.1s infinite alternate;
}
.bg .dotWrapper-10 {
    top: 82%;
    left: 47%;
    animation: flying 66s ease-in-out -5.8s infinite alternate;
}
.bg .dotWrapper-11 {
    top: 81%;
    left: 94%;
    animation: flying 48s ease-in-out -8.2s infinite alternate;
}
.bg .dotWrapper-12 {
    top: 13%;
    left: 60%;
    animation: flying 38s ease-in-out -7.4s infinite alternate;
}
.bg .dotWrapper-13 {
    top: 100%;
    left: 56%;
    animation: flying 61s ease-in-out -5.5s infinite alternate;
}
.bg .dotWrapper-14 {
    top: 46%;
    left: 7%;
    animation: flying 46s ease-in-out -3.2s infinite alternate;
}
.bg .dotWrapper-15 {
    top: 85%;
    left: 66%;
    animation: flying 30s ease-in-out -8.7s infinite alternate;
}
.bg .dotWrapper-16 {
    top: 76%;
    left: 21%;
    animation: flying 50s ease-in-out -8.8s infinite alternate;
}
.bg .dotWrapper-17 {
    top: 44%;
    left: 30%;
    animation: flying 36s ease-in-out -2s infinite alternate;
}
.bg .dotWrapper-18 {
    top: 23%;
    left: 8%;
    animation: flying 38s ease-in-out -0.3s infinite alternate;
}
.bg .dotWrapper-19 {
    top: 8%;
    left: 16%;
    animation: flying 21s ease-in-out -6s infinite alternate;
}
.bg .dotWrapper-20 {
    top: 40%;
    left: 66%;
    animation: flying 37s ease-in-out -3.5s infinite alternate;
}
.bg .dotWrapper-21 {
    top: 22%;
    left: 60%;
    animation: flying 49s ease-in-out -2.8s infinite alternate;
}
.bg .dotWrapper-22 {
    top: 61%;
    left: 70%;
    animation: flying 48s ease-in-out -0.6s infinite alternate;
}
.bg .dotWrapper-23 {
    top: 24%;
    left: 30%;
    animation: flying 32s ease-in-out -0.7s infinite alternate;
}
.bg .dotWrapper-24 {
    top: 98%;
    left: 58%;
    animation: flying 46s ease-in-out -0.6s infinite alternate;
}
.bg .dotWrapper-25 {
    top: 78%;
    left: 72%;
    animation: flying 28s ease-in-out -2.9s infinite alternate;
}
.bg .dotWrapper-26 {
    top: 13%;
    left: 16%;
    animation: flying 70s ease-in-out -1.5s infinite alternate;
}
.bg .dotWrapper-27 {
    top: 9%;
    left: 42%;
    animation: flying 49s ease-in-out -7.7s infinite alternate;
}
.bg .dotWrapper-28 {
    top: 91%;
    left: 64%;
    animation: flying 32s ease-in-out -6.9s infinite alternate;
}
.bg .dotWrapper-29 {
    top: 44%;
    left: 91%;
    animation: flying 69s ease-in-out -1.8s infinite alternate;
}
.bg .dotWrapper-30 {
    top: 56%;
    left: 85%;
    animation: flying 45s ease-in-out -0.4s infinite alternate;
}
.bg .dotWrapper-31 {
    top: 56%;
    left: 83%;
    animation: flying 34s ease-in-out -1.2s infinite alternate;
}
.bg .dotWrapper-32 {
    top: 31%;
    left: 79%;
    animation: flying 21s ease-in-out -2.5s infinite alternate;
}
.bg .dotWrapper-33 {
    top: 8%;
    left: 77%;
    animation: flying 45s ease-in-out -4.6s infinite alternate;
}
.bg .dotWrapper-34 {
    top: 34%;
    left: 2%;
    animation: flying 63s ease-in-out -0.4s infinite alternate;
}
.bg .dotWrapper-35 {
    top: 30%;
    left: 96%;
    animation: flying 35s ease-in-out -5.8s infinite alternate;
}
.bg .dotWrapper-36 {
    top: 87%;
    left: 47%;
    animation: flying 63s ease-in-out -6.6s infinite alternate;
}
.bg .dotWrapper-37 {
    top: 48%;
    left: 7%;
    animation: flying 57s ease-in-out -6.1s infinite alternate;
}
.bg .dotWrapper-38 {
    top: 30%;
    left: 15%;
    animation: flying 61s ease-in-out -9.1s infinite alternate;
}
.bg .dotWrapper-39 {
    top: 35%;
    left: 16%;
    animation: flying 61s ease-in-out -3.3s infinite alternate;
}
.bg .dotWrapper-40 {
    top: 51%;
    left: 65%;
    animation: flying 63s ease-in-out -7.5s infinite alternate;
}
.bg .dotWrapper-41 {
    top: 74%;
    left: 95%;
    animation: flying 44s ease-in-out -1.8s infinite alternate;
}
.bg .dotWrapper-42 {
    top: 6%;
    left: 60%;
    animation: flying 22s ease-in-out -2.3s infinite alternate;
}
.bg .dotWrapper-43 {
    top: 27%;
    left: 54%;
    animation: flying 55s ease-in-out -1.6s infinite alternate;
}
.bg .dotWrapper-44 {
    top: 7%;
    left: 77%;
    animation: flying 62s ease-in-out -8.7s infinite alternate;
}
.bg .dotWrapper-45 {
    top: 18%;
    left: 68%;
    animation: flying 52s ease-in-out -9.7s infinite alternate;
}
.bg .dotWrapper-46 {
    top: 70%;
    left: 14%;
    animation: flying 23s ease-in-out -4.1s infinite alternate;
}
.bg .dotWrapper-47 {
    top: 34%;
    left: 64%;
    animation: flying 67s ease-in-out -1.5s infinite alternate;
}
.bg .dotWrapper-48 {
    top: 76%;
    left: 16%;
    animation: flying 34s ease-in-out -7.7s infinite alternate;
}
.bg .dotWrapper-49 {
    top: 3%;
    left: 76%;
    animation: flying 53s ease-in-out -2.8s infinite alternate;
}
.bg .dotWrapper-50 {
    top: 83%;
    left: 8%;
    animation: flying 58s ease-in-out -1.2s infinite alternate;
}
.bg .dotWrapper-51 {
    top: 25%;
    left: 34%;
    animation: flying 30s ease-in-out -2.3s infinite alternate;
}
.bg .dotWrapper-52 {
    top: 98%;
    left: 25%;
    animation: flying 28s ease-in-out -9.2s infinite alternate;
}
.bg .dotWrapper-53 {
    top: 89%;
    left: 82%;
    animation: flying 31s ease-in-out -6.7s infinite alternate;
}
.bg .dotWrapper-54 {
    top: 99%;
    left: 44%;
    animation: flying 46s ease-in-out -1.8s infinite alternate;
}
.bg .dotWrapper-55 {
    top: 74%;
    left: 51%;
    animation: flying 22s ease-in-out -2.9s infinite alternate;
}
.bg .dotWrapper-56 {
    top: 34%;
    left: 20%;
    animation: flying 49s ease-in-out -6.9s infinite alternate;
}
.bg .dotWrapper-57 {
    top: 70%;
    left: 35%;
    animation: flying 30s ease-in-out -6.3s infinite alternate;
}
.bg .dotWrapper-58 {
    top: 57%;
    left: 99%;
    animation: flying 65s ease-in-out -8.7s infinite alternate;
}
.bg .dotWrapper-59 {
    top: 88%;
    left: 100%;
    animation: flying 43s ease-in-out -10s infinite alternate;
}
.bg .dotWrapper-60 {
    top: 44%;
    left: 89%;
    animation: flying 36s ease-in-out -8s infinite alternate;
}
.bg .dotWrapper-61 {
    top: 61%;
    left: 28%;
    animation: flying 25s ease-in-out -1.6s infinite alternate;
}
.bg .dotWrapper-62 {
    top: 60%;
    left: 66%;
    animation: flying 69s ease-in-out -7s infinite alternate;
}
.bg .dotWrapper-63 {
    top: 77%;
    left: 65%;
    animation: flying 50s ease-in-out -9.7s infinite alternate;
}
.bg .dotWrapper-64 {
    top: 25%;
    left: 62%;
    animation: flying 55s ease-in-out -1s infinite alternate;
}
.bg .dotWrapper-65 {
    top: 32%;
    left: 6%;
    animation: flying 58s ease-in-out -1.1s infinite alternate;
}
.bg .dotWrapper-66 {
    top: 57%;
    left: 39%;
    animation: flying 48s ease-in-out -8.6s infinite alternate;
}
.bg .dotWrapper-67 {
    top: 42%;
    left: 99%;
    animation: flying 30s ease-in-out -5.5s infinite alternate;
}
.bg .dotWrapper-68 {
    top: 61%;
    left: 5%;
    animation: flying 62s ease-in-out -1s infinite alternate;
}
.bg .dotWrapper-69 {
    top: 97%;
    left: 56%;
    animation: flying 53s ease-in-out -0.9s infinite alternate;
}
.bg .dotWrapper-70 {
    top: 6%;
    left: 59%;
    animation: flying 66s ease-in-out -3.3s infinite alternate;
}
.bg .dotWrapper-71 {
    top: 24%;
    left: 80%;
    animation: flying 31s ease-in-out -4.8s infinite alternate;
}
.bg .dotWrapper-72 {
    top: 96%;
    left: 58%;
    animation: flying 56s ease-in-out -5.6s infinite alternate;
}
.bg .dotWrapper-73 {
    top: 13%;
    left: 40%;
    animation: flying 31s ease-in-out -4.8s infinite alternate;
}
.bg .dotWrapper-74 {
    top: 71%;
    left: 39%;
    animation: flying 57s ease-in-out -6.3s infinite alternate;
}
.bg .dotWrapper-75 {
    top: 30%;
    left: 18%;
    animation: flying 52s ease-in-out -0.1s infinite alternate;
}
.bg .dot {
    width: 7px;
    height: 7px;
    background: #dc143b;
    border-radius: 50%;
}
.bg .dot-1 {
    transform-origin: -10px -9px;
    animation: rotating 27s ease-in-out -9.1s infinite;
}
.bg .dot-2 {
    transform-origin: 10px 2px;
    animation: rotating 25s ease-in-out -6.3s infinite;
}
.bg .dot-3 {
    transform-origin: 4px -6px;
    animation: rotating 28s ease-in-out -2.4s infinite;
}
.bg .dot-4 {
    transform-origin: -2px 0px;
    animation: rotating 26s ease-in-out -6.2s infinite;
}
.bg .dot-5 {
    transform-origin: 4px -9px;
    animation: rotating 23s ease-in-out -1.9s infinite;
}
.bg .dot-6 {
    transform-origin: -5px -14px;
    animation: rotating 14s ease-in-out -7s infinite;
}
.bg .dot-7 {
    transform-origin: -11px 1px;
    animation: rotating 17s ease-in-out -7.9s infinite;
}
.bg .dot-8 {
    transform-origin: -11px -3px;
    animation: rotating 19s ease-in-out -3.1s infinite;
}
.bg .dot-9 {
    transform-origin: 6px -1px;
    animation: rotating 30s ease-in-out -6.9s infinite;
}
.bg .dot-10 {
    transform-origin: 12px 13px;
    animation: rotating 25s ease-in-out -7s infinite;
}
.bg .dot-11 {
    transform-origin: 0px 1px;
    animation: rotating 30s ease-in-out -4.3s infinite;
}
.bg .dot-12 {
    transform-origin: -4px 3px;
    animation: rotating 20s ease-in-out -6s infinite;
}
.bg .dot-13 {
    transform-origin: 5px -3px;
    animation: rotating 25s ease-in-out -4s infinite;
}
.bg .dot-14 {
    transform-origin: -14px -6px;
    animation: rotating 12s ease-in-out -8.6s infinite;
}
.bg .dot-15 {
    transform-origin: 5px -4px;
    animation: rotating 11s ease-in-out -9.2s infinite;
}
.bg .dot-16 {
    transform-origin: -3px -14px;
    animation: rotating 27s ease-in-out -9.3s infinite;
}
.bg .dot-17 {
    transform-origin: -3px 13px;
    animation: rotating 24s ease-in-out -0.6s infinite;
}
.bg .dot-18 {
    transform-origin: -1px 12px;
    animation: rotating 28s ease-in-out -2.2s infinite;
}
.bg .dot-19 {
    transform-origin: 2px 15px;
    animation: rotating 22s ease-in-out -2.3s infinite;
}
.bg .dot-20 {
    transform-origin: 12px -10px;
    animation: rotating 25s ease-in-out -7.3s infinite;
}
.bg .dot-21 {
    transform-origin: -8px -14px;
    animation: rotating 15s ease-in-out -9s infinite;
}
.bg .dot-22 {
    transform-origin: -1px -9px;
    animation: rotating 11s ease-in-out -5.2s infinite;
}
.bg .dot-23 {
    transform-origin: 14px -10px;
    animation: rotating 16s ease-in-out -3.5s infinite;
}
.bg .dot-24 {
    transform-origin: -11px -13px;
    animation: rotating 23s ease-in-out -1.6s infinite;
}
.bg .dot-25 {
    transform-origin: -1px 9px;
    animation: rotating 20s ease-in-out -6.3s infinite;
}
.bg .dot-26 {
    transform-origin: 13px 10px;
    animation: rotating 21s ease-in-out -1.3s infinite;
}
.bg .dot-27 {
    transform-origin: 10px 15px;
    animation: rotating 16s ease-in-out -1.6s infinite;
}
.bg .dot-28 {
    transform-origin: 5px -12px;
    animation: rotating 26s ease-in-out -0.3s infinite;
}
.bg .dot-29 {
    transform-origin: -2px 12px;
    animation: rotating 27s ease-in-out -8.6s infinite;
}
.bg .dot-30 {
    transform-origin: -3px -13px;
    animation: rotating 30s ease-in-out -3.6s infinite;
}
.bg .dot-31 {
    transform-origin: 0px -6px;
    animation: rotating 29s ease-in-out -4.2s infinite;
}
.bg .dot-32 {
    transform-origin: -14px 12px;
    animation: rotating 21s ease-in-out -4.6s infinite;
}
.bg .dot-33 {
    transform-origin: 4px 15px;
    animation: rotating 22s ease-in-out -0.4s infinite;
}
.bg .dot-34 {
    transform-origin: 8px 13px;
    animation: rotating 23s ease-in-out -5.9s infinite;
}
.bg .dot-35 {
    transform-origin: 9px 13px;
    animation: rotating 18s ease-in-out -4.2s infinite;
}
.bg .dot-36 {
    transform-origin: 1px -12px;
    animation: rotating 12s ease-in-out -4.7s infinite;
}
.bg .dot-37 {
    transform-origin: 6px -6px;
    animation: rotating 30s ease-in-out -7s infinite;
}
.bg .dot-38 {
    transform-origin: 11px 12px;
    animation: rotating 19s ease-in-out -2.9s infinite;
}
.bg .dot-39 {
    transform-origin: 9px 12px;
    animation: rotating 11s ease-in-out -3.8s infinite;
}
.bg .dot-40 {
    transform-origin: 10px 8px;
    animation: rotating 24s ease-in-out -9s infinite;
}
.bg .dot-41 {
    transform-origin: -12px 3px;
    animation: rotating 14s ease-in-out -9.7s infinite;
}
.bg .dot-42 {
    transform-origin: 13px 6px;
    animation: rotating 18s ease-in-out -6.6s infinite;
}
.bg .dot-43 {
    transform-origin: -7px -12px;
    animation: rotating 17s ease-in-out -7.2s infinite;
}
.bg .dot-44 {
    transform-origin: -14px 5px;
    animation: rotating 20s ease-in-out -5.1s infinite;
}
.bg .dot-45 {
    transform-origin: -2px 6px;
    animation: rotating 23s ease-in-out -4.2s infinite;
}
.bg .dot-46 {
    transform-origin: 2px 4px;
    animation: rotating 28s ease-in-out -6.9s infinite;
}
.bg .dot-47 {
    transform-origin: 7px -6px;
    animation: rotating 30s ease-in-out -9.1s infinite;
}
.bg .dot-48 {
    transform-origin: 6px -14px;
    animation: rotating 14s ease-in-out -7.7s infinite;
}
.bg .dot-49 {
    transform-origin: -3px 14px;
    animation: rotating 30s ease-in-out -7.2s infinite;
}
.bg .dot-50 {
    transform-origin: 14px 10px;
    animation: rotating 11s ease-in-out -4.6s infinite;
}
@keyframes rotating {
    0% {
        opacity: 0;
        transform: rotate(0deg);
   }
    25%, 75% {
        opacity: 1;
   }
    50% {
        opacity: 0;
   }
    100% {
        opacity: 0;
        transform: rotate(360deg);
   }
}
@keyframes flying {
    0% {
        transform: translate(0, 0);
   }
    10% {
        transform: translate(20px, 50px);
   }
    20% {
        transform: translate(-30px, 10px);
   }
    30% {
        transform: translate(10px, 60px);
   }
    40% {
        transform: translate(50px, 0px);
   }
    50% {
        transform: translate(-10px, -40px);
   }
    60% {
        transform: translate(-40px, 20px);
   }
    70% {
        transform: translate(30px, -30px);
   }
    80% {
        transform: translate(0px, -60px);
   }
    90% {
        transform: translate(40px, 10px);
   }
    100% {
        transform: translate(0, 0);
   }
}