@keyframes popup-fade-in {
    from {
        opacity: 0;
        transform: scale(0.5);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
    
}
#products-showoff>div.introduction>div>h1 {
    animation: popup-fade-in .5s ease-in-out;
}

#products-showoff>div.introduction>div>h2 {
    opacity: 0;
    animation: popup-fade-in .5s ease-in-out .5s forwards;
}



@keyframes typing {
    from {
        width: 0
    }

    to {
        width: 100%
    }
}

@keyframes blink-caret {

    from,
    to {
        border-color: transparent
    }

    50% {
        border-color: orange;
    }
}




#free-presentation>h2 {
    overflow: hidden;
    border-right: .15em solid orange;
    white-space: nowrap;
    animation:
        typing 2s steps(40, end),
        blink-caret .75s step-end infinite;
}


@keyframes slide-in-from-left {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
    
}


#free-presentation img{
    opacity: 0;
    animation: slide-in-from-left 1s ease-in-out 1s forwards;

}


@keyframes slide-in-from-right {
    from {
        transform: translateX(400%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
    
}
#free-presentation a.link{
    animation: slide-in-from-right 1s ease-in-out 1.5s forwards;
    opacity: 0;
    display: inline-block;
}