.loading {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: 999999;
  background-color: #fff;
}
.loading .loadingitem {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}
.loading .logo {
  width: 400px;
  margin: 0 auto;
}
.loading .logo svg path {
  stroke: #111;
  stroke-dasharray: 2000;
  stroke-dashoffset: 0;
  stroke-width: .3;
  animation: logoanime 3.5s ease-in 0s forwards 1;
}

@keyframes logoanime {
  0% {
    stroke-dashoffset: 2000;
    fill: transparent;
  }
  40% {
    stroke-dashoffset: 2000;
    fill: transparent;
  }
  50% {
    fill: transparent;
  }
  100% {
    stroke-dashoffset: 0;
    fill: #111;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-2 ( 960px )
 
------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-3 ( 644px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
  .loading .logo {
    width: 260px;
  }
}