.loading-page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #FFF;
  background-image: url("../images/white-bg.jpg");
  z-index: 999; }
  .loading-page > div {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: spinning_animation 2s cubic-bezier(0.63, 0.045, 0.34, 1) 0s normal none infinite;
    animation: spinning_animation 2s cubic-bezier(0.63, 0.045, 0.34, 1) 0s normal none infinite; }

.material {
  width: 70px;
  height: 70px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }
  .material__spinner {
    width: 60px;
    height: 60px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    -webkit-animation: material-rotate-all 1s linear infinite;
    animation: material-rotate-all 1s linear infinite; }
    .material__spinner--color .material__right {
      -webkit-animation: material-fade-in-second 1.2s linear infinite alternate;
      animation: material-fade-in-second 1.2s linear infinite alternate; }
      .material__spinner--color .material__right .material__bar::after {
        bottom: -6px;
        left: -3px; }
    .material__spinner--color .material__left {
      -webkit-animation: material-fade-in-second 1.2s linear infinite alternate;
      animation: material-fade-in-second 1.2s linear infinite alternate; }
      .material__spinner--color .material__left .material__bar::after {
        bottom: -6px;
        right: -3px; }
    .material__spinner--color .material__bar {
      border-color: #fff; }
      .material__spinner--color .material__bar::after {
        background-color: #ffffff; }
  .material__right {
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    overflow: hidden; }
    .material__right .material__bar {
      border-radius: 0 200px 200px 0;
      border-left: none;
      -webkit-transform: rotate(-10deg);
      -ms-transform: rotate(-10deg);
      transform: rotate(-10deg);
      -webkit-transform-origin: left center;
      -ms-transform-origin: left center;
      transform-origin: left center;
      -webkit-animation: material-rotate-right 0.75s linear infinite alternate;
      animation: material-rotate-right 0.75s linear infinite alternate; }
      .material__right .material__bar::after {
        bottom: -6px;
        left: -3px; }
  .material__left {
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden; }
    .material__left .material__bar {
      border-right: none;
      -webkit-transform: rotate(10deg);
      -ms-transform: rotate(10deg);
      transform: rotate(10deg);
      -webkit-transform-origin: right center;
      -ms-transform-origin: right center;
      transform-origin: right center;
      -webkit-animation: material-rotate-left 0.75s linear infinite alternate;
      animation: material-rotate-left 0.75s linear infinite alternate; }
      .material__left .material__bar::after {
        bottom: -6px;
        right: -3px; }
  .material__bar {
    width: 100%;
    height: 100%;
    border-radius: 200px 0 0 200px;
    border: 6px solid #666;
    position: relative;
    border-color: #003E8D; }
    .material__bar::after {
      background-color: #003E8D; }

@-webkit-keyframes spinning_animation {
  0% {
    -webkit-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg);
    -o-transform: scale(1) rotate(0deg); }
  50% {
    -webkit-transform: scale(0.8) rotate(360deg);
    transform: scale(0.8) rotate(360deg);
    -o-transform: scale(0.8) rotate(360deg); }
  100% {
    -webkit-transform: scale(1) rotate(720deg);
    transform: scale(1) rotate(720deg);
    -o-transform: scale(1) rotate(720deg); } }

@keyframes spinning_animation {
  0% {
    -webkit-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg);
    -o-transform: scale(1) rotate(0deg); }
  50% {
    -webkit-transform: scale(0.8) rotate(360deg);
    transform: scale(0.8) rotate(360deg);
    -o-transform: scale(0.8) rotate(360deg); }
  100% {
    -webkit-transform: scale(1) rotate(720deg);
    transform: scale(1) rotate(720deg);
    -o-transform: scale(1) rotate(720deg); } }
@-webkit-keyframes material-rotate-all {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  to {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg); } }
@keyframes material-rotate-all {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  to {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg); } }
@-webkit-keyframes material-fade-in-second {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
@keyframes material-fade-in-second {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
@-webkit-keyframes material-rotate-right {
  from {
    -webkit-transform: rotate(-175deg);
    transform: rotate(-175deg); }
  to {
    -webkit-transform: rotate(-30deg);
    transform: rotate(-30deg); } }
@keyframes material-rotate-right {
  from {
    -webkit-transform: rotate(-175deg);
    transform: rotate(-175deg); }
  to {
    -webkit-transform: rotate(-30deg);
    transform: rotate(-30deg); } }
@-webkit-keyframes material-rotate-left {
  to {
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg); }
  from {
    -webkit-transform: rotate(175deg);
    transform: rotate(175deg); } }
@keyframes material-rotate-left {
  to {
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg); }
  from {
    -webkit-transform: rotate(175deg);
    transform: rotate(175deg); } }