.preloader {
    width: 100%;
    height: 100vh;
    position: fixed;
    z-index: +2000;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.9);
    }
    .preloader .container-fluid {
      padding-left: 0;
      padding-right: 0;
      padding-bottom: 0;
      position: relative;
      width: 100%;
      height: 100%;
      max-width: 1450px;
      max-height: 700px;
    }
  
  .spinner {
    top: 50%;
    left: 52%;
    bottom: 50%;
    z-index: 1;
    height: 30px;
    width: 30px;
    margin-left: -15px;
    margin-top: -40px;
  
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  
    position: relative;
    }
    .spinner span {
      width: 30px;
      height: 30px;
      border-radius: 30px;
      display: block;
      position: absolute;
      opacity: 0.7;
    }
    .spinner .ball-1 {
      z-index: 4;
      background-color: #ff0000;
      left: -20px;
      -webkit-transform: translate(50%, 50%) scale(0.5);
      -webkit-animation: animateSway 2s infinite ease-in-out, animateScale 2s infinite ease-in-out;
      animation: animateSway 2s infinite ease-in-out, animateScale 2s infinite ease-in-out;
    }
    .spinner .ball-2 {
      z-index: 3;
      background-color: #0d0c0c;
      left: -20px;
      -webkit-transform: translate(50%, 50%) scale(0.5);
      -webkit-animation: animateSway 2s infinite ease-in-out 500ms, animateScale 2s infinite ease-in-out 500ms;
      animation: animateSway 2s infinite ease-in-out 500ms, animateScale 2s infinite ease-in-out 500ms;
    }
    .spinner .ball-3 {
      z-index: 2;
      background-color: #cecece;
      left: -20px;
      -webkit-transform: translate(50%, 50%) scale(0.5);
      -webkit-animation: animateSway 2s infinite ease-in-out 1s, animateScale 2s infinite ease-in-out 1s;
      animation: animateSway 2s infinite ease-in-out 1s, animateScale 2s infinite ease-in-out 1s;
    }
    .spinner .ball-4 {
      z-index: 1;
      background-color: #5d5a59;
      left: -20px;
      -webkit-transform: translate(50%, 50%) scale(0.5);
      -webkit-animation: animateSway 2s infinite ease-in-out 1.5s, animateScale 2s infinite ease-in-out 1.5s;
      animation: animateSway 2s infinite ease-in-out 1.5s, animateScale 2s infinite ease-in-out 1.5s;
    }
   /* Your CSS for .preloader and .spinner here */

.preloader.disappear {
  animation: vanish 2s forwards;
}

  
  @-webkit-keyframes animateSway {
    0% { left: -20px }
    50% { left: 20px }
    100% { left: -20px }
  }
  
  @keyframes animateSway {
    0% { left: -20px }
    50% { left: 20px }
    100% { left: -20px }
  }
  
  @-webkit-keyframes animateScale {
    0% { -webkit-transform: translate(50%, 50%) scale(0.5); z-index: -1 }
    25% { -webkit-transform: translate(50%, 50%) scale(1); z-index: +1 }
    50% { -webkit-transform: translate(50%, 50%) scale(0.5); z-index: -1 }
    75% { -webkit-transform: translate(50%, 50%) scale(0.25); z-index: -2 }
    100% { -webkit-transform: translate(50%, 50%) scale(0.5); z-index: -1 }
  }
  
  @keyframes animateScale {
    0% { transform: translate(50%, 50%) scale(0.5); z-index: -1 }
    25% { transform: translate(50%, 50%) scale(1); z-index: +1 }
    50% { transform: translate(50%, 50%) scale(0.5); z-index: -1 }
    75% { transform: translate(50%, 50%) scale(0.25); z-index: -2 }
    100% { transform: translate(50%, 50%) scale(0.5); z-index: -1 }
  }
  
  @keyframes vanish {
    100%{
      opacity: 0;
      visibility: hidden;
    }
  }