.loading {
  display: block;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #377447;
  opacity: 1;
  z-index: 9999;
  transition: all 1.5s 2s ease-in-out;
}

.loading .loading-wrapper {
  position: relative;
  left: calc(50% - 25px);
  top: calc(50% - 20px);
  width: 50px;
  height: 40px;
  transition: all 2s 1s ease-in-out;
}

.loading .loading-wrapper .rec {
  float: left;
  height: 100%;
  width: 6px;
  margin-right: 3px;
  background: #fff;
  animation: loading 1.2s infinite ease-in-out;
}

.loading .loading-wrapper .rec:last-child {
  margin-right: 0px;
}

.loading .loading-wrapper .r2 {
  animation-delay: -1.1s;
}

.loading .loading-wrapper .r3 {
  animation-delay: -1s;
}

.loading .loading-wrapper .r4 {
  animation-delay: -.9s;
}

.loading .loading-wrapper .r5 {
  animation-delay: -.8s;
}

@keyframes loading {
  0%, 100%, 40% {
    -ms-transform: scaleY(0.5);
    transform: scaleY(0.5);
  }
  20% {
    -ms-transform: scaleY(1);
    transform: scaleY(1);
  }
}

.loading.loaded {
  visibility: hidden;
  opacity: 0;
}

.loaded .loading-wrapper {
  opacity: 0;
}