body svg {
  overflow: visible;
}

.d-spinner {
  -webkit-animation-duration: 2.4s;
          animation-duration: 2.4s;
  -webkit-animation-timing-function: cubic-bezier(0, 1, 0.3, 1);
          animation-timing-function: cubic-bezier(0, 1, 0.3, 1);
  -webkit-animation-direction: normal;
          animation-direction: normal;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-transform-origin: left bottom;
          transform-origin: left bottom;
}



.d-spinner.d-spinner__one {
  -webkit-animation-name: dSpinnerOne;
          animation-name: dSpinnerOne;
  fill: #0e304c;
}
.d-spinner.d-spinner__two {
  -webkit-animation-name: dSpinnerTwo;
          animation-name: dSpinnerTwo;
  fill: #173a5c;
}
.d-spinner.d-spinner__three {
  -webkit-animation-name: dSpinnerThree;
          animation-name: dSpinnerThree;
  fill: #2985ba;
}
.d-spinner.d-spinner__four {
  -webkit-animation-name: dSpinnerFour;
          animation-name: dSpinnerFour;
  fill: #3592cc;
}

@-webkit-keyframes dSpinnerOne {
  0% {
    opacity: 0;
    fill: #0e304c;
    -webkit-transform: rotateZ(-65deg) scale(0.6);
            transform: rotateZ(-65deg) scale(0.6);
  }
  7% {
    opacity: 1;
    fill: #0e304c;
    -webkit-transform: rotateZ(0) scale(1);
            transform: rotateZ(0) scale(1);
  }
  57% {
    -webkit-animation-timing-function: cubic-bezier(0, 0, 0, 1);
            animation-timing-function: cubic-bezier(0, 0, 0, 1);
    fill: #0e304c;
  }
  74% {
    opacity: 1;
    -webkit-transform: rotateZ(0) scale(1);
            transform: rotateZ(0) scale(1);
    -webkit-animation-timing-function: cubic-bezier(0, 0, 1, 0);
            animation-timing-function: cubic-bezier(0, 0, 1, 0);
  }
  83% {
    opacity: 0;
    -webkit-transform: rotateZ(45deg) scale(0.61);
            transform: rotateZ(45deg) scale(0.61);
  }
  100% {
    opacity: 0;
    -webkit-transform: rotateZ(45deg) scale(0.61);
            transform: rotateZ(45deg) scale(0.61);
  }
}
@keyframes dSpinnerOne {
  0% {
    opacity: 0;
    fill: #0e304c;
    -webkit-transform: rotateZ(-65deg) scale(0.6);
            transform: rotateZ(-65deg) scale(0.6);
  }
  7% {
    opacity: 1;
    fill: #0e304c;
    -webkit-transform: rotateZ(0) scale(1);
            transform: rotateZ(0) scale(1);
  }
  57% {
    -webkit-animation-timing-function: cubic-bezier(0, 0, 0, 1);
            animation-timing-function: cubic-bezier(0, 0, 0, 1);
    fill: #0e304c;
  }
  74% {
    opacity: 1;
    -webkit-transform: rotateZ(0) scale(1);
            transform: rotateZ(0) scale(1);
    -webkit-animation-timing-function: cubic-bezier(0, 0, 1, 0);
            animation-timing-function: cubic-bezier(0, 0, 1, 0);
  }
  83% {
    opacity: 0;
    -webkit-transform: rotateZ(45deg) scale(0.61);
            transform: rotateZ(45deg) scale(0.61);
  }
  100% {
    opacity: 0;
    -webkit-transform: rotateZ(45deg) scale(0.61);
            transform: rotateZ(45deg) scale(0.61);
  }
}
@-webkit-keyframes dSpinnerTwo {
  0% {
    opacity: 0;
    -webkit-transform: rotateZ(-65deg) scale(0.6);
            transform: rotateZ(-65deg) scale(0.6);
  }
  3% {
    opacity: 0;
    fill: #d4e6f2;
    -webkit-transform: rotateZ(-65deg) scale(0.6);
            transform: rotateZ(-65deg) scale(0.6);
  }
  10% {
    opacity: 1;
    fill: #d4e6f2;
    -webkit-transform: rotateZ(0) scale(1);
            transform: rotateZ(0) scale(1);
  }
  60% {
    -webkit-animation-timing-function: cubic-bezier(0, 0, 0, 1);
            animation-timing-function: cubic-bezier(0, 0, 0, 1);
    fill: #173a5c;
  }
  71% {
    opacity: 1;
    -webkit-transform: rotateZ(0) scale(1);
            transform: rotateZ(0) scale(1);
    -webkit-animation-timing-function: cubic-bezier(0, 0, 1, 0);
            animation-timing-function: cubic-bezier(0, 0, 1, 0);
  }
  79% {
    opacity: 0;
    -webkit-transform: rotateZ(45deg) scale(0.61);
            transform: rotateZ(45deg) scale(0.61);
  }
  100% {
    opacity: 0;
    -webkit-transform: rotateZ(45deg) scale(0.61);
            transform: rotateZ(45deg) scale(0.61);
  }
}
@keyframes dSpinnerTwo {
  0% {
    opacity: 0;
    -webkit-transform: rotateZ(-65deg) scale(0.6);
            transform: rotateZ(-65deg) scale(0.6);
  }
  3% {
    opacity: 0;
    fill: #d4e6f2;
    -webkit-transform: rotateZ(-65deg) scale(0.6);
            transform: rotateZ(-65deg) scale(0.6);
  }
  10% {
    opacity: 1;
    fill: #d4e6f2;
    -webkit-transform: rotateZ(0) scale(1);
            transform: rotateZ(0) scale(1);
  }
  60% {
    -webkit-animation-timing-function: cubic-bezier(0, 0, 0, 1);
            animation-timing-function: cubic-bezier(0, 0, 0, 1);
    fill: #173a5c;
  }
  71% {
    opacity: 1;
    -webkit-transform: rotateZ(0) scale(1);
            transform: rotateZ(0) scale(1);
    -webkit-animation-timing-function: cubic-bezier(0, 0, 1, 0);
            animation-timing-function: cubic-bezier(0, 0, 1, 0);
  }
  79% {
    opacity: 0;
    -webkit-transform: rotateZ(45deg) scale(0.61);
            transform: rotateZ(45deg) scale(0.61);
  }
  100% {
    opacity: 0;
    -webkit-transform: rotateZ(45deg) scale(0.61);
            transform: rotateZ(45deg) scale(0.61);
  }
}
@-webkit-keyframes dSpinnerThree {
  0% {
    opacity: 0;
    -webkit-transform: rotateZ(-65deg) scale(0.6);
            transform: rotateZ(-65deg) scale(0.6);
  }
  6% {
    opacity: 0;
    fill: white;
    -webkit-transform: rotateZ(-65deg) scale(0.6);
            transform: rotateZ(-65deg) scale(0.6);
  }
  13% {
    opacity: 1;
    fill: white;
    -webkit-transform: rotateZ(0) scale(1);
            transform: rotateZ(0) scale(1);
  }
  63% {
    fill: #2985ba;
    -webkit-animation-timing-function: cubic-bezier(0, 0, 0, 1);
            animation-timing-function: cubic-bezier(0, 0, 0, 1);
  }
  68% {
    opacity: 1;
    -webkit-transform: rotateZ(0) scale(1);
            transform: rotateZ(0) scale(1);
    -webkit-animation-timing-function: cubic-bezier(0, 0, 1, 0);
            animation-timing-function: cubic-bezier(0, 0, 1, 0);
  }
  76% {
    opacity: 0;
    -webkit-transform: rotateZ(45deg) scale(0.61);
            transform: rotateZ(45deg) scale(0.61);
  }
  100% {
    opacity: 0;
    -webkit-transform: rotateZ(45deg) scale(0.61);
            transform: rotateZ(45deg) scale(0.61);
  }
}
@keyframes dSpinnerThree {
  0% {
    opacity: 0;
    -webkit-transform: rotateZ(-65deg) scale(0.6);
            transform: rotateZ(-65deg) scale(0.6);
  }
  6% {
    opacity: 0;
    fill: white;
    -webkit-transform: rotateZ(-65deg) scale(0.6);
            transform: rotateZ(-65deg) scale(0.6);
  }
  13% {
    opacity: 1;
    fill: white;
    -webkit-transform: rotateZ(0) scale(1);
            transform: rotateZ(0) scale(1);
  }
  63% {
    fill: #2985ba;
    -webkit-animation-timing-function: cubic-bezier(0, 0, 0, 1);
            animation-timing-function: cubic-bezier(0, 0, 0, 1);
  }
  68% {
    opacity: 1;
    -webkit-transform: rotateZ(0) scale(1);
            transform: rotateZ(0) scale(1);
    -webkit-animation-timing-function: cubic-bezier(0, 0, 1, 0);
            animation-timing-function: cubic-bezier(0, 0, 1, 0);
  }
  76% {
    opacity: 0;
    -webkit-transform: rotateZ(45deg) scale(0.61);
            transform: rotateZ(45deg) scale(0.61);
  }
  100% {
    opacity: 0;
    -webkit-transform: rotateZ(45deg) scale(0.61);
            transform: rotateZ(45deg) scale(0.61);
  }
}
@-webkit-keyframes dSpinnerFour {
  0% {
    opacity: 0;
    -webkit-transform: rotateZ(-65deg) scale(0.6);
            transform: rotateZ(-65deg) scale(0.6);
  }
  9% {
    opacity: 0;
    fill: white;
    -webkit-transform: rotateZ(-65deg) scale(0.6);
            transform: rotateZ(-65deg) scale(0.6);
  }
  16% {
    opacity: 1;
    fill: white;
    -webkit-transform: rotateZ(0) scale(1);
            transform: rotateZ(0) scale(1);
  }
  64% {
    fill: #3592cc;
    -webkit-animation-timing-function: cubic-bezier(0, 0, 0, 1);
            animation-timing-function: cubic-bezier(0, 0, 0, 1);
  }
  65% {
    opacity: 1;
    -webkit-transform: rotateZ(0) scale(1);
            transform: rotateZ(0) scale(1);
    -webkit-animation-timing-function: cubic-bezier(0, 0, 1, 0);
            animation-timing-function: cubic-bezier(0, 0, 1, 0);
  }
  73% {
    opacity: 0;
    -webkit-transform: rotateZ(45deg) scale(0.61);
            transform: rotateZ(45deg) scale(0.61);
  }
  100% {
    opacity: 0;
    -webkit-transform: rotateZ(45deg) scale(0.61);
            transform: rotateZ(45deg) scale(0.61);
  }
}
@keyframes dSpinnerFour {
  0% {
    opacity: 0;
    -webkit-transform: rotateZ(-65deg) scale(0.6);
            transform: rotateZ(-65deg) scale(0.6);
  }
  9% {
    opacity: 0;
    fill: white;
    -webkit-transform: rotateZ(-65deg) scale(0.6);
            transform: rotateZ(-65deg) scale(0.6);
  }
  16% {
    opacity: 1;
    fill: white;
    -webkit-transform: rotateZ(0) scale(1);
            transform: rotateZ(0) scale(1);
  }
  64% {
    fill: #3592cc;
    -webkit-animation-timing-function: cubic-bezier(0, 0, 0, 1);
            animation-timing-function: cubic-bezier(0, 0, 0, 1);
  }
  65% {
    opacity: 1;
    -webkit-transform: rotateZ(0) scale(1);
            transform: rotateZ(0) scale(1);
    -webkit-animation-timing-function: cubic-bezier(0, 0, 1, 0);
            animation-timing-function: cubic-bezier(0, 0, 1, 0);
  }
  73% {
    opacity: 0;
    -webkit-transform: rotateZ(45deg) scale(0.61);
            transform: rotateZ(45deg) scale(0.61);
  }
  100% {
    opacity: 0;
    -webkit-transform: rotateZ(45deg) scale(0.61);
            transform: rotateZ(45deg) scale(0.61);
  }
}