.loading {
    display: none;
}

.loading-background {
  position: fixed;
  opacity: 0.5;
  z-index: 100;
  width: 100%;
  height: 100%;
  background-color: white;
}

.loader {
  position: fixed;
  z-index: 110;
  top: 50%;
  left: 50%;
  margin-left: -380px;
  margin-top: -70px;
}

.loader>span {
  font-size: 70px;
  font-family: OpenSans;
  font-weight: bold;
  color: transparent;
  -webkit-text-stroke:2px #262626;
  animation: 4s infinite forwards linear;
}

span:nth-child(1) {
  animation-name: fill1;
}

@keyframes fill1 {
  13% {
      color: transparent;
      font-size: 70px;
  }

  16% {
      color: #262626;
      font-size: 80px;
  }

  48% {
      color: #262626;
      font-size: 80px;
  }

  52% {
      color: transparent;
      font-size: 70px;
  }

  100% {
      color: transparent;
      font-size: 70px;
  }
}

span:nth-child(2) {
  animation-name: fill2;
}

@keyframes fill2 {
  15% {
      color: transparent;
      font-size: 70px;
  }

  20% {
      color: #262626;
      font-size: 80px;
  }

  50% {
      color: #262626;
      font-size: 80px;
  }

  54% {
      color: transparent;
      font-size: 70px;
  }

  100% {
      color: transparent;
      font-size: 70px;
  }
}

span:nth-child(3) {
  animation-name: fill3;
}

@keyframes fill3 {
  18% {
      color: transparent;
      font-size: 70px;
  }

  22% {
      color: #262626;
      font-size: 80px;
  }

  52% {
      color: #262626;
      font-size: 80px;
  }

  56% {
      color: transparent;
      font-size: 70px;
  }

  100% {
      color: transparent;
      font-size: 70px;
  }
}

span:nth-child(4) {
  animation-name: fill4;
}

@keyframes fill4 {
  20% {
      color: transparent;
      font-size: 70px;
  }

  24% {
      color: #262626;
      font-size: 80px;
  }

  54% {
      color: #262626;
      font-size: 80px;
  }

  58% {
      color: transparent;
      font-size: 70px;
  }

  100% {
      color: transparent;
      font-size: 70px;
  }
}

span:nth-child(5) {
  animation-name: fill5;
}

@keyframes fill5 {
  22% {
      color: transparent;
      font-size: 70px;
  }

  26% {
      color: #262626;
      font-size: 80px;
  }

  56% {
      color: #262626;
      font-size: 80px;
  }

  60% {
      color: transparent;
      font-size: 70px;
  }

  100% {
      color: transparent;
      font-size: 70px;
  }
}

span:nth-child(6) {
  animation-name: fill6;
}

@keyframes fill6 {
  22% {
      color: transparent;
      font-size: 70px;
  }

  26% {
      color: #262626;
      font-size: 80px;
  }

  58% {
      color: #262626;
      font-size: 80px;
  }

  62% {
      color: transparent;
      font-size: 70px;
  }

  100% {
      color: transparent;
      font-size: 70px;
  }
}

span:nth-child(7) {
  animation-name: fill7;
}

@keyframes fill7 {
  24% {
      color: transparent;
      font-size: 70px;
  }

  28% {
      color: #262626;
      font-size: 80px;
  }

  60% {
      color: #262626;
      font-size: 80px;
  }

  64% {
      color: transparent;
      font-size: 70px;
  }

  100% {
      color: transparent;
      font-size: 70px;
  }
}

span:nth-child(8) {
  animation-name: fill8;
}

@keyframes fill8 {
  26% {
      color: transparent;
      font-size: 70px;
  }

  30% {
      color: #262626;
      font-size: 80px;
  }

  62% {
      color: #262626;
      font-size: 80px;
  }

  66% {
      color: transparent;
      font-size: 70px;
  }

  100% {
      color: transparent;
      font-size: 70px;
  }
}

span:nth-child(9) {
  animation-name: fill9;
}

@keyframes fill9 {
  28% {
      color: transparent;
      font-size: 70px;
  }

  32% {
      color: #262626;
      font-size: 80px;
  }

  64% {
      color: #262626;
      font-size: 80px;
  }

  68% {
      color: transparent;
      font-size: 70px;
  }

  100% {
      color: transparent;
      font-size: 70px;
  }
}

span:nth-child(10) {
  animation-name: fill10;
}

@keyframes fill10 {
  30% {
      color: transparent;
      font-size: 70px;
  }

  34% {
      color: #262626;
      font-size: 80px;
  }

  66% {
      color: #262626;
      font-size: 80px;
  }

  70% {
      color: transparent;
      font-size: 70px;
  }

  100% {
      color: transparent;
      font-size: 70px;
  }
}

span:nth-child(11) {
  animation-name: fill11;
}

@keyframes fill11 {
  32% {
      color: transparent;
      font-size: 70px;
  }

  36% {
      color: #262626;
      font-size: 80px;
  }

  68% {
      color: #262626;
      font-size: 80px;
  }

  72% {
      color: transparent;
      font-size: 70px;
  }

  100% {
      color: transparent;
      font-size: 70px;
  }
}

span:nth-child(12) {
  animation-name: fill12;
}

@keyframes fill12 {
  34% {
      color: transparent;
      font-size: 70px;
  }

  38% {
      color: #262626;
      font-size: 80px;
  }

  70% {
      color: #262626;
      font-size: 80px;
  }

  74% {
      color: transparent;
      font-size: 70px;
  }

  100% {
      color: transparent;
      font-size: 70px;
  }
}

span:nth-child(13) {
  animation-name: fill13;
}

@keyframes fill13 {
  36% {
      color: transparent;
      font-size: 70px;
  }

  40% {
      color: #262626;
      font-size: 80px;
  }

  72% {
      color: #262626;
      font-size: 80px;
  }

  76% {
      color: transparent;
      font-size: 70px;
  }

  100% {
      color: transparent;
      font-size: 70px;
  }
}

span:nth-child(14) {
  animation-name: fill14;
}

@keyframes fill14 {
  38% {
      color: transparent;
      font-size: 70px;
  }

  42% {
      color: #262626;
      font-size: 80px;
  }

  74% {
      color: #262626;
      font-size: 80px;
  }

  78% {
      color: transparent;
      font-size: 70px;
  }

  100% {
      color: transparent;
      font-size: 70px;
  }
}

span:nth-child(15) {
  animation-name: fill15;
}

@keyframes fill15 {
  40% {
      color: transparent;
      font-size: 70px;
  }

  44% {
      color: #262626;
      font-size: 80px;
  }

  76% {
      color: #262626;
      font-size: 80px;
  }

  80% {
      color: transparent;
      font-size: 70px;
  }

  100% {
      color: transparent;
      font-size: 70px;
  }
}

span:nth-child(16) {
  animation-name: fill16;
}

@keyframes fill16 {
  42% {
      color: transparent;
      font-size: 70px;
  }

  46% {
      color: #262626;
      font-size: 80px;
  }

  78% {
      color: #262626;
      font-size: 80px;
  }

  82% {
      color: transparent;
      font-size: 70px;
  }

  100% {
      color: transparent;
      font-size: 70px;
  }
}

span:nth-child(17) {
    animation-name: fill17;
  }
  
  @keyframes fill17 {
    44% {
        color: transparent;
        font-size: 70px;
    }
  
    48% {
        color: #262626;
        font-size: 80px;
    }
  
    80% {
        color: #262626;
        font-size: 80px;
    }
  
    84% {
        color: transparent;
        font-size: 70px;
    }
  
    100% {
        color: transparent;
        font-size: 70px;
    }
  }

  @media screen and (max-width: 1200px) {
    .loader {
        top: 50%;
        left: 50%;
        margin-left: -170px;
        margin-top: -20px;
      }
      
      .loader>span {
        font-size: 25px;
      }

      span:nth-child(1) {
        animation-name: fill1;
      }
      
      @keyframes fill1 {
        13% {
            color: transparent;
            font-size: 25px;
        }
      
        16% {
            color: #262626;
            font-size: 28px;
        }
      
        48% {
            color: #262626;
            font-size: 28px;
        }
      
        52% {
            color: transparent;
            font-size: 25px;
        }
      
        100% {
            color: transparent;
            font-size: 25px;
        }
      }
      
      span:nth-child(2) {
        animation-name: fill2;
      }
      
      @keyframes fill2 {
        15% {
            color: transparent;
            font-size: 25px;
        }
      
        20% {
            color: #262626;
            font-size: 28px;
        }
      
        50% {
            color: #262626;
            font-size: 28px;
        }
      
        54% {
            color: transparent;
            font-size: 25px;
        }
      
        100% {
            color: transparent;
            font-size: 25px;
        }
      }
      
      span:nth-child(3) {
        animation-name: fill3;
      }
      
      @keyframes fill3 {
        18% {
            color: transparent;
            font-size: 25px;
        }
      
        22% {
            color: #262626;
            font-size: 28px;
        }
      
        52% {
            color: #262626;
            font-size: 28px;
        }
      
        56% {
            color: transparent;
            font-size: 25px;
        }
      
        100% {
            color: transparent;
            font-size: 25px;
        }
      }
      
      span:nth-child(4) {
        animation-name: fill4;
      }
      
      @keyframes fill4 {
        20% {
            color: transparent;
            font-size: 25px;
        }
      
        24% {
            color: #262626;
            font-size: 28px;
        }
      
        54% {
            color: #262626;
            font-size: 28px;
        }
      
        58% {
            color: transparent;
            font-size: 25px;
        }
      
        100% {
            color: transparent;
            font-size: 25px;
        }
      }
      
      span:nth-child(5) {
        animation-name: fill5;
      }
      
      @keyframes fill5 {
        22% {
            color: transparent;
            font-size: 25px;
        }
      
        26% {
            color: #262626;
            font-size: 28px;
        }
      
        56% {
            color: #262626;
            font-size: 28px;
        }
      
        60% {
            color: transparent;
            font-size: 25px;
        }
      
        100% {
            color: transparent;
            font-size: 25px;
        }
      }
      
      span:nth-child(6) {
        animation-name: fill6;
      }
      
      @keyframes fill6 {
        22% {
            color: transparent;
            font-size: 25px;
        }
      
        26% {
            color: #262626;
            font-size: 28px;
        }
      
        58% {
            color: #262626;
            font-size: 28px;
        }
      
        62% {
            color: transparent;
            font-size: 25px;
        }
      
        100% {
            color: transparent;
            font-size: 25px;
        }
      }
      
      span:nth-child(7) {
        animation-name: fill7;
      }
      
      @keyframes fill7 {
        24% {
            color: transparent;
            font-size: 25px;
        }
      
        28% {
            color: #262626;
            font-size: 28px;
        }
      
        60% {
            color: #262626;
            font-size: 28px;
        }
      
        64% {
            color: transparent;
            font-size: 25px;
        }
      
        100% {
            color: transparent;
            font-size: 25px;
        }
      }
      
      span:nth-child(8) {
        animation-name: fill8;
      }
      
      @keyframes fill8 {
        26% {
            color: transparent;
            font-size: 25px;
        }
      
        30% {
            color: #262626;
            font-size: 28px;
        }
      
        62% {
            color: #262626;
            font-size: 28px;
        }
      
        66% {
            color: transparent;
            font-size: 25px;
        }
      
        100% {
            color: transparent;
            font-size: 25px;
        }
      }
      
      span:nth-child(9) {
        animation-name: fill9;
      }
      
      @keyframes fill9 {
        28% {
            color: transparent;
            font-size: 25px;
        }
      
        32% {
            color: #262626;
            font-size: 28px;
        }
      
        64% {
            color: #262626;
            font-size: 28px;
        }
      
        68% {
            color: transparent;
            font-size: 25px;
        }
      
        100% {
            color: transparent;
            font-size: 25px;
        }
      }
      
      span:nth-child(10) {
        animation-name: fill10;
      }
      
      @keyframes fill10 {
        30% {
            color: transparent;
            font-size: 25px;
        }
      
        34% {
            color: #262626;
            font-size: 28px;
        }
      
        66% {
            color: #262626;
            font-size: 28px;
        }
      
        70% {
            color: transparent;
            font-size: 25px;
        }
      
        100% {
            color: transparent;
            font-size: 25px;
        }
      }
      
      span:nth-child(11) {
        animation-name: fill11;
      }
      
      @keyframes fill11 {
        32% {
            color: transparent;
            font-size: 25px;
        }
      
        36% {
            color: #262626;
            font-size: 28px;
        }
      
        68% {
            color: #262626;
            font-size: 28px;
        }
      
        72% {
            color: transparent;
            font-size: 25px;
        }
      
        100% {
            color: transparent;
            font-size: 25px;
        }
      }
      
      span:nth-child(12) {
        animation-name: fill12;
      }
      
      @keyframes fill12 {
        34% {
            color: transparent;
            font-size: 25px;
        }
      
        38% {
            color: #262626;
            font-size: 28px;
        }
      
        70% {
            color: #262626;
            font-size: 28px;
        }
      
        74% {
            color: transparent;
            font-size: 25px;
        }
      
        100% {
            color: transparent;
            font-size: 25px;
        }
      }
      
      span:nth-child(13) {
        animation-name: fill13;
      }
      
      @keyframes fill13 {
        36% {
            color: transparent;
            font-size: 25px;
        }
      
        40% {
            color: #262626;
            font-size: 28px;
        }
      
        72% {
            color: #262626;
            font-size: 28px;
        }
      
        76% {
            color: transparent;
            font-size: 25px;
        }
      
        100% {
            color: transparent;
            font-size: 25px;
        }
      }
      
      span:nth-child(14) {
        animation-name: fill14;
      }
      
      @keyframes fill14 {
        38% {
            color: transparent;
            font-size: 25px;
        }
      
        42% {
            color: #262626;
            font-size: 28px;
        }
      
        74% {
            color: #262626;
            font-size: 28px;
        }
      
        78% {
            color: transparent;
            font-size: 25px;
        }
      
        100% {
            color: transparent;
            font-size: 25px;
        }
      }
      
      span:nth-child(15) {
        animation-name: fill15;
      }
      
      @keyframes fill15 {
        40% {
            color: transparent;
            font-size: 25px;
        }
      
        44% {
            color: #262626;
            font-size: 28px;
        }
      
        76% {
            color: #262626;
            font-size: 28px;
        }
      
        80% {
            color: transparent;
            font-size: 25px;
        }
      
        100% {
            color: transparent;
            font-size: 25px;
        }
      }
      
      span:nth-child(16) {
        animation-name: fill16;
      }
      
      @keyframes fill16 {
        42% {
            color: transparent;
            font-size: 25px;
        }
      
        46% {
            color: #262626;
            font-size: 28px;
        }
      
        78% {
            color: #262626;
            font-size: 28px;
        }
      
        82% {
            color: transparent;
            font-size: 25px;
        }
      
        100% {
            color: transparent;
            font-size: 25px;
        }
      }
      
      span:nth-child(17) {
          animation-name: fill17;
        }
        
        @keyframes fill17 {
          44% {
              color: transparent;
              font-size: 25px;
          }
        
          48% {
              color: #262626;
              font-size: 28px;
          }
        
          80% {
              color: #262626;
              font-size: 28px;
          }
        
          84% {
              color: transparent;
              font-size: 25px;
          }
        
          100% {
              color: transparent;
              font-size: 25px;
          }
        }
  }