#loader {

    position: fixed;

    top: 0;
    left: 0;
  min-height: 100vh;
  width: 100vw;
  display: flex;
    /* justify-content: center; */
  align-items: center;
  justify-content: center;
  background-color: #000;

  z-index: 101;

  transition: opacity 0.5s ease-in-out;
}



@-webkit-keyframes animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 1220.173095703125px;
    stroke-dasharray: 1220.173095703125px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 1220.173095703125px;
  }
}

@keyframes animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 1220.173095703125px;
    stroke-dasharray: 1220.173095703125px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 1220.173095703125px;
  }
}

.svg-elem-1 {
  -webkit-animation: animate-svg-stroke-1 2s cubic-bezier(0.47, 0, 0.745, 0.715)
    0.05s infinite alternate-reverse;
  animation: animate-svg-stroke-1 2s cubic-bezier(0.47, 0, 0.745, 0.715) 0.05s
    infinite alternate-reverse;
}

@-webkit-keyframes animate-svg-stroke-2 {
  0% {
    stroke-dashoffset: 1818.1373291015625px;
    stroke-dasharray: 1818.1373291015625px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 1818.1373291015625px;
  }
}

@keyframes animate-svg-stroke-2 {
  0% {
    stroke-dashoffset: 1818.1373291015625px;
    stroke-dasharray: 1818.1373291015625px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 1818.1373291015625px;
  }
}

.svg-elem-2 {
  -webkit-animation: animate-svg-stroke-2 2s cubic-bezier(0.47, 0, 0.745, 0.715)
    0.25s infinite alternate-reverse;
  animation: animate-svg-stroke-2 2s cubic-bezier(0.47, 0, 0.745, 0.715) 0.25s
    infinite alternate-reverse;
}

.fadeOut {
    opacity: 0; /* makes the element invisible */
    pointer-events: none; /* This stops clicks/taps , 
    we cannot use display none because it removes the element 
    from DOM and then we cannot perform any operations on it */
  /* -webkit-animation: fadeOut 1s ease-in; */
  /* animation: fadeOut 1s ease-in; */
}