#load {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
  }
  
  #load > p {
    position: absolute;
    width: 180px;
    height: 24px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 2;
    text-align: center;
    color: #fff;
    letter-spacing: 3px;
    font-size: 1.8rem;
  }
  
  #load > p:before {
    content: "";
    display: block;
    width: 100%;
    height: 15px;
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: rgb(151, 151, 151);
    -webkit-transition: 0.3s;
    transition: 0.3s;
    -webkit-animation-name: loading-anm;
    animation-name: loading-anm;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
  }
  
  #load > p > img {
    height: 100%;
    max-width: none;
    position: relative;
  }
  
  #load:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    background-color: #7d5a27;
  }
  
  @-webkit-keyframes loading-anm {
    0% {
      opacity: 0;
      left: 0;
      width: 0;
    }
    50% {
      opacity: 1;
      left: 0;
      width: 100%;
    }
    100% {
      opacity: 0;
      left: 100px;
      width: 0;
    }
  }
  
  @keyframes loading-anm {
    0% {
      opacity: 0;
      left: 0;
      width: 0;
    }
    50% {
      opacity: 1;
      left: 0;
      width: 100%;
    }
    100% {
      opacity: 0;
      left: 180px;
      width: 0;
    }
  }
  
  #loading {
    display: none;
  }