body {
    inset: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    position: fixed;
  }

  #loading {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    width: 100%;
  }

  #loading img {
    animation: 1s ease-in-out 0s infinite alternate breathe;
    opacity: .66;
    transition: opacity .4s;
  }

  #loading.main_done img {
    opacity: 1;
  }

  #loading.init_done img {
    animation: .33s ease-in-out 0s 1 forwards zooooom;
    opacity: .05;
  }

  @keyframes breathe {
    from {
      transform: scale(1)
    }

    to {
      transform: scale(0.95)
    }
  }

  @keyframes zooooom {
    from {
      transform: scale(1)
    }

    to {
      transform: scale(10)
    }
  }

  #loading-text {
    -moz-animation: loading-text-opacity 2s linear 0s infinite normal;
    -o-animation: loading-text-opacity 2s linear 0s infinite normal;
    -webkit-animation: loading-text-opacity 2s linear 0s infinite normal;
    animation: loading-text-opacity 2s linear 0s infinite normal;
    color: #808080;
    font-family: "Helvetica Neue, "Helvetica", ""arial";
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    width: 100px;
    display: block;
    margin: 0 auto;
    /*margin-top: 45px;
    opacity: 0;
    position: absolute;
    top: 0;
     */
     z-index: 999;
  }

  @keyframes loading-text-opacity {
    0%  {opacity: 0}
    20% {opacity: 0}
    50% {opacity: 1}
    100%{opacity: 0}
  }

  @-moz-keyframes loading-text-opacity {
      0%  {opacity: 0}
      20% {opacity: 0}
      50% {opacity: 1}
      100%{opacity: 0}
  }

  @-webkit-keyframes loading-text-opacity {
      0%  {opacity: 0}
      20% {opacity: 0}
      50% {opacity: 1}
      100%{opacity: 0}
  }

  @-o-keyframes loading-text-opacity {
      0%  {opacity: 0}
      20% {opacity: 0}
      50% {opacity: 1}
      100%{opacity: 0}
  }