.type-effect {
    border-right: 2px solid;
    white-space: normal;
    overflow: hidden;
    animation: typing 3s steps(40, end), blink-caret .75s step-end infinite;
}

.type-effect:after {
    content: '|';
    animation: blink 1s infinite;
    color: #fe6928;
}

@keyframes typing {
    from { width: 1% }
    to { width: 100% }
}

@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: black; }
}

@keyframes blink {
    to { opacity: .0 }
}

@keyframes riseAndFall {
    0% { transform: translateY(0); }
    50% { transform: translateY(0); }
    54% { transform: translateY(-10px); }
    58% { transform: translateY(0); }
    100% { transform: translateY(0); }
}

.type-effect span {
    display: inline-block;
    animation: riseAndFall 5s ease-in-out infinite;
}

@keyframes downSlowly {
    0% { transform: translateY(0); }
    50% {
        transform: translateY(0);
        color: #525252;
    }
    70% {
        transform: translateY(+20px);
        color: white;
    }
    80% {
        transform: translateY(0);
    }
    85% {
        color: #525252;
    }
    100% { transform: translateY(0); }
}

p a i.icon-down-circle {
    display: inline-block;
    animation: downSlowly 5s ease-in-out infinite;
}