.preloader {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    position: fixed;
    z-index: 999;
    right: 0;
    top: 0;
    background: #0c2d62;
    transition-duration: 2s;
    -webkit-transition-duration: 1s;
    transition-timing-function: cubic-bezier(0.86, 0, 0.09, 1);
    -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.09, 1);
  }
  .preloader figure {
    width: 240px;
    height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    animation: fadeup 0.30s;
    position: relative;
  }
  .preloader figure:after {
      content: "";
      width: 100%;
      height: 100%;
      border: 2px solid #000;
      border-top: 2px solid #ffa800;
      border-radius: 50%;
      position: absolute;
      left: 0;
      top: 0;
      animation: rotate1 0.60s infinite;
  }
  .preloader img {
    height: 120px;
    display: inline-block;
  }
  
  .page-loaded .preloader {
    top: -100%;
  }
  
  @keyframes fadeup {
    0% {
      transform: translateY(20px);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }
  @keyframes rotate1 {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }