/**
 * Animations
 */

.fromTopIn
{
    transition: transform 1.0s ease, opacity 1.0s ease;

    transform: translate(0,0);
    opacity: 1.0;
}

.fromTopOut
{
    transition: transform 1.0s ease, opacity 1.0s ease;

    transform: translate(0,-10px);
    opacity: 0.0;
}

.fromBottomIn
{
    transition: transform 1.0s ease, opacity 1.0s ease;

    transform: translate(0,0);
    opacity: 1.0;
}

.fromBottomOut
{
    transition: transform 1.0s ease, opacity 1.0s ease;

    transform: translate(0,10px);
    opacity: 1.0;
}

.fromLeftIn
{
    transition: transform 1.0s ease, opacity 1.0s ease;

    transform: translate(0,0);
    opacity: 1.0;
}

.fromLeftOut
{
    transition: transform 1.0s ease, opacity 1.0s ease;

    transform: translate(-10px,0);
    opacity: 0.0;
}

.fromRightIn
{
    transition: transform 1.0s ease, opacity 1.0s ease;

    transform: translate(0,0);
    opacity: 1.0;
}

.fromRightOut
{
    transition: transform 1.0s ease, opacity 1.0s ease;

    transform: translate(30px, 0);
    opacity: 1.0;
}

.scaleUpIn
{
    transition: transform 1.0s ease, opacity 1.0s ease;

    transform: scale(1.1,1.1);
    opacity: 1.0;
}

.scaleUpOut
{
    transition: transform 1.0s ease, opacity 1.0s ease;

    transform: scale(1.3,1.3);
    opacity: 1.0;
}

.scaleDownIn
{
    transition: transform 1.0s ease, opacity 1.0s ease;

    transform: scale(1.0,1.0);
    opacity: 1.0;
}

.scaleDownOut
{
    transition: transform 1.0s ease, opacity 1.0s ease;

    transform: scale(0.7,0.7);
    opacity: 1.0;
}

@keyframes chevronAnimation {
    0% {
        transform: translate(0,0) scale(1.0,1.0);
    }
    50% {
        transform: translate(0,5px) scale(0.8,0.8);
    }
    100% {
        transform: translate(0,0) scale(1.0,1.0);
    }
}

/**
 * Responsiveness
 */


@media screen and (max-width: 800px)
{
    h1 span
    {
        display: block;
    }

    div.block
    {
        height: 85vh;
        padding: 15vh 15vw 0 15vw;
    }
}

@media screen and (max-width: 420px)
{
    body
    {
        font-size: 12px;
        line-height: 18px;
    }
}

@media screen and (max-width: 360px)
{
    h1
    {
        font-size: 3em;
    }
}