@property --logo-top{
    syntax: "<percentage>";
    inherits: false;
    initial-value: 0%;
  }
  @property --fill{
    syntax: "<color>";
    inherits: false;
    initial-value: transparent;
  }
  @property --stroke{
    syntax: "<color>";
    inherits: false;
    initial-value: #cccccc;
  }
  @property --logo-display{
    syntax: "<string>";
    inherits: false;
    initial-value: none;
  }
  .logoloader__wrapper{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100001;
    display: var(--logo-display, none);
    background: #fff;  
  }
  .logoloader__wrapper.active{
    --logo-display: block;
  }

  .logoloader{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .logoloader svg{
    width:400px;
    max-width: 80vw;
  }


.logoloader__st0{
    animation:reload 3s ease  forwards;
    animation-delay:1s;
    /* stroke-dashoffset:30px; */
    fill:var(--fill,transparent);
    stroke:var(--stroke,#004576) !important;
    --stroke:#cccccc;
    transform: translateY(var(--logo-top));
  }
  svg{
     background:#fff;
    z-index: 1;
    display: block;
  }
  .logoloader__st0{
    fill:var(--fill,transparent);
  }

  .logoloader__st0.red-igp{
    --brand-color:#c84536;
    --stroke:#c84536;
  }


  .title-wrapper{
    position:absolute;
    height:24px;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin: auto auto 48px auto;
      display: inline-flex;
    overflow:hidden;
      align-items: center;
      justify-content: center;
      z-index: 0;
  }
  .title-wrapper .title{
    transform:translateY(-140%);
    animation:reveal 0.7s cubic-bezier(0.77, 0, 0.175, 1)
    forwards;
    font-size:1.7rem;
    font-family:'Manrope', sans-serif;
    line-height:1;
    color:#333333;
    animation-delay:3.3s;
  }

  @keyframes reload {
    60%{
      --fill:transparent;
      --stroke:var(--brand-color,#004576);
      --logo-top:0%
    }
    75%{
      stroke-dashoffset:0;
      --fill:var(--brand-color,#004576);
      --stroke:var(--brand-color,#004576);
      --logo-top:0%
    }
    90%{
      stroke-dashoffset:0;
      --fill:var(--brand-color,#004576);
      --stroke:var(--brand-color,#004576);
      --logo-top:-50%
    }
    100%{
      stroke-dashoffset:0;
      --fill:var(--brand-color,#004576);
      --stroke:var(--brand-color,#004576);
      --logo-top:-50%
    }
  }
  @keyframes reveal{
    100%{
      transform:translateY(0%);
    }
  }