.loader-text-lg {
  color: #00bcd4!important;
  font-size: 32px;
}

.Typist .Cursor {
  display: inline-block; }

.Typist .Cursor--blinking {
  opacity: 1;
  animation: blink 1s linear infinite; }

@keyframes blink {
  0% {
    opacity: 1; }

  50% {
    opacity: 0; }

  100% {
    opacity: 1; } }

@keyframes blinker {
  0% {
    opacity: 1; }

  50% {
    opacity: 0; }

  100% {
    opacity: 1; } }

.loader {
  position: relative;
  margin: 50px auto;
  width: 50px;
  height: 50px;
  zoom: 1.7;
}

.circular {
  animation: rotate 2s linear infinite;
  height: 50px;
  position: relative;
  width: 50px;
}

.path {
  stroke-dasharray: 1,200;
  stroke-dashoffset: 0;
  animation: 
  dash 1.5s ease-in-out infinite,
  color 6s ease-in-out infinite
  ;
  stroke-linecap: round;
}

  @keyframes rotate{
    100%{
        transform: rotate(360deg);
    }
  }

  @keyframes dash{
    0%{
        stroke-dasharray: 1,200;
        stroke-dashoffset: 0;
    }
    50%{
        stroke-dasharray: 89,200;
        stroke-dashoffset: -35;
    }
    100%{
        stroke-dasharray: 89,200;
        stroke-dashoffset: -124;
    }
  }
  
  @keyframes color{
    100%, 0%{
        stroke: #00bcd4;
    }
    40%{
        stroke: #ff9800;
    }
    66%{
        stroke: #4caf50;
    }
    80%, 90%{
        stroke: #2196f3;
    }
}