/* ANIMATIONS */

@-webkit-keyframes typing {
    from {
        width: 0;
    }
    to {
        border: none;
    }
}

@keyframes typing {
    from {
        width: 0;
    }
    to {
        border: none;
    }
}

@-webkit-keyframes typingS {
    from {
        width: 0;
        visibility: visible;
    }
    to {
        visibility: visible;
    }
}

@keyframes typingS {
    from {
        width: 0;
        visibility: visible;
    }
    to {
        visibility: visible;
    }
}

@-webkit-keyframes blink {
    50% {
        border-color: transparent;
    }
}

@keyframes blink {
    50% {
        border-color: transparent;
    }
}

@-webkit-keyframes toHeader {
    0% {
        transform: translate(calc(50vw - 50%), calc(42vh)) scale(3);
    }

    60% {
        transform: translate(calc(50vw - 50%), calc(42vh)) scale(3);
    }

    100% {
        transform: translate(41px, 0) scale(1);
    }
}

@keyframes toHeader {
    0% {
        transform: translate(calc(50vw - 50%), calc(42vh)) scale(3);
    }

    60% {
        transform: translate(calc(50vw - 50%), calc(42vh)) scale(3);
    }

    100% {
        transform: translate(41px, 0) scale(1);
    }
}

@-webkit-keyframes bubble-anim {
    0% {
      -webkit-transform: scale(1);
      transform: scale(1); }
  
    20% {
      -webkit-transform: scaleY(0.95) scaleX(1.05);
      transform: scaleY(0.95) scaleX(1.05); }
  
    48% {
      -webkit-transform: scaleY(1.1) scaleX(0.9);
      transform: scaleY(1.1) scaleX(0.9); }
  
    68% {
      -webkit-transform: scaleY(0.98) scaleX(1.02);
      transform: scaleY(0.98) scaleX(1.02); }
  
    80% {
      -webkit-transform: scaleY(1.02) scaleX(0.98);
      transform: scaleY(1.02) scaleX(0.98); }
  
    97%, 100% {
      -webkit-transform: scale(1);
      transform: scale(1); } 
}
  
 @keyframes bubble-anim {
    0% {
      -webkit-transform: scale(1);
      transform: scale(1); }
  
    20% {
      -webkit-transform: scaleY(0.95) scaleX(1.05);
      transform: scaleY(0.95) scaleX(1.05); }
  
    48% {
      -webkit-transform: scaleY(1.1) scaleX(0.9);
      transform: scaleY(1.1) scaleX(0.9); }
  
    68% {
      -webkit-transform: scaleY(0.98) scaleX(1.02);
      transform: scaleY(0.98) scaleX(1.02); }
  
    80% {
      -webkit-transform: scaleY(1.02) scaleX(0.98);
      transform: scaleY(1.02) scaleX(0.98); }
  
    97%, 100% {
      -webkit-transform: scale(1);
      transform: scale(1); } 
}