.wrap{
    opacity: 0;
}
.wrap.on{
    opacity: 1;
    transition: 2s 5s;
}




body {
    background: #000000;
    font-family: "Helvetica", "Arial", sans-serif;
    color: rgba(255,255,255,0.8);
    font-weight: 100;
    font-size: 15px;
  }
  .loader-bg{
    position: relative;
    width: 100%;
    height: 100vh;
  }
  #loading_container{
    width: 200px;
    height: 100vh;
    position: fixed; 
    margin: auto;
    display: block;
    top: calc(50% - 100px);
    left: calc(50% - 100px);
  }
  .loader-bg p{
    font-size:1.2em ;
  }
  .L{
    
    position: absolute;
    left:5%;

    top:50%;
    -webkit-animation: L 2s infinite;
  }
  .O{
    position: absolute;
    left:18%;
    top:50%;
    -webkit-animation: O 2s infinite;
    -webkit-animation-delay: 100ms;
  }
  .A{
    position: absolute;
    left:35%;
    top:50%;
    -webkit-animation: A 2s infinite;
    -webkit-animation-delay: 200ms;
  }
  .D{
    position: absolute;
    left:50%;
    top:50%;
    -webkit-animation: D 2s infinite;
    -webkit-animation-delay: 300ms;
  }
  .I{
    position: absolute;
    left:65%;
    top:50%;
    -webkit-animation: I 2s infinite;
    -webkit-animation-delay: 400ms;
  }
  .N{
    position: absolute;
    left:75%;
    top:50%;
    -webkit-animation: N 2s infinite;
    -webkit-animation-delay: 500ms;
  }
  .G{
    position: absolute;
    left:90%;
    top:50%;
    -webkit-animation: G 2s infinite;
    -webkit-animation-delay: 600ms;
  }
  
  @-webkit-keyframes L {
    0% {top:0px; opacity:0;}
    50% {top:50px; opacity: 1;}
    100% {top:0px; opacity: 0;}
  }
  @-webkit-keyframes O {
    0% {top:0px; opacity:0;}
    50% {top:50px; opacity: 1;}
    100% {top:0px; opacity: 0;}
  }
  @-webkit-keyframes A {
    0% {top:0px; opacity:0;}
    50% {top:50px; opacity: 1;}
    100% {top:0px; opacity: 0;}
  }
  @-webkit-keyframes D {
    0% {top:0px; opacity:0;}
    50% {top:50px; opacity: 1;}
    100% {top:0px; opacity: 0;}
  }
  @-webkit-keyframes I {
    0% {top:0px; opacity:0;}
    50% {top:50px; opacity: 1;}
    100% {top:0px; opacity: 0;}
  }
  @-webkit-keyframes N {
    0% {top:0px; opacity:0;}
    50% {top:50px; opacity: 1;}
    100% {top:0px; opacity: 0;}
  }
  @-webkit-keyframes G {
    0% {top:0px; opacity:0;}
    50% {top:50px; opacity: 1;}
    100% {top:0px; opacity: 0;}
  }