html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}


.dot {
    opacity: 0;
    animation: typingBlink 1.2s infinite;
}

    .dot:nth-child(1) {
        animation-delay: 0s;
    }

    .dot:nth-child(2) {
        animation-delay: 0.2s;
    }

    .dot:nth-child(3) {
        animation-delay: 0.4s;
    }

@keyframes typingBlink {
    0%, 20% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/*
@keyframes typingDots {
    0% {
        content: ".";
    }

    33% {
        content: "..";
    }

    66% {
        content: "...";
    }

    100% {
        content: ".";
    }
}

.typing-indicator::after {
    content: ".";
    animation: typingDots 1s infinite;
    font-weight: bold;
}*/


@keyframes wave {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}
@keyframes marquee {
    0% {
        transform: translateX(-100%);
    }
    /* Start off-screen to the left */
    50% {
        transform: translateX(100%);
    }
    /* Move to the right */
    100% {
        transform: translateX(-100%);
    }
    /* Move back to the left */
}