#intro
{
    position: relative;

    height: 100vh;
}

#intro .container-mid
{
    position: absolute;
    top: 50%;

    width: 100%;

    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
}

#intro .container-mid h1
{
    line-height: 1.2em;

    margin-top: 0;
    margin-bottom: 1em;
}

#intro .container-mid p.subline
{
    font-size: 2.2rem;
    line-height: 1.6em;

    display: inline-block;

    margin: 0;
    margin-right: .8em;

    vertical-align: middle;
}

#intro .container-mid a
{
    font-size: 2rem;
    line-height: 3.2em;

    position: relative;

    display: inline-block;
    overflow: hidden;

    width: 3.2em;
    margin: 0;
    padding: 0;

    -webkit-transition: .2s ease;
         -o-transition: .2s ease;
            transition: .2s ease;
    text-align: center;
    vertical-align: middle;

    color: #fff;
    border-radius: 100%;
    background: none;
}

#intro .container-mid a:before
{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    content: '';
    -webkit-transition: .15s ease;
         -o-transition: .15s ease;
            transition: .15s ease;
    -webkit-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1);

    border-radius: 100%;
    background: #13bbbd;
}

#intro .container-mid a:hover:before
{
    -webkit-transform: scale(0);
        -ms-transform: scale(0);
            transform: scale(0);
}

#intro .container-mid a:after
{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    content: '';
    -webkit-transition: .15s ease;
         -o-transition: .15s ease;
            transition: .15s ease;
    -webkit-transform: scale(0);
        -ms-transform: scale(0);
            transform: scale(0);

    border-radius: 100%;
    background: #222;
}

#intro .container-mid a:hover:after
{
    -webkit-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1);
}

#intro .container-mid a i
{
    position: relative;
    z-index: 2;
}

#intro .animation-container
{
    -webkit-transition: .5s ease;
         -o-transition: .5s ease;
            transition: .5s ease;
}

#intro .animation-container.animation-fade
{
    opacity: 0;
}

#intro .animation-container.animation-fade.run-animation
{
    opacity: 1;
}

#intro .animation-container.animation-fade-up
{
    -webkit-transform: translateY(10vh);
        -ms-transform: translateY(10vh);
            transform: translateY(10vh);

    opacity: 0;
}

#intro .animation-container.animation-fade-up.run-animation
{
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);

    opacity: 1;
}

#intro .animation-container.animation-fade-down
{
    -webkit-transform: translateY(-10vh);
        -ms-transform: translateY(-10vh);
            transform: translateY(-10vh);

    opacity: 0;
}

#intro .animation-container.animation-fade-down.run-animation
{
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);

    opacity: 1;
}

#intro .animation-container.animation-fade-left
{
    -webkit-transform: translateX(10vh);
        -ms-transform: translateX(10vh);
            transform: translateX(10vh);

    opacity: 0;
}

#intro .animation-container.animation-fade-left.run-animation
{
    -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0);

    opacity: 1;
}

#intro .animation-container.animation-fade-right
{
    -webkit-transform: translateX(-10vh);
        -ms-transform: translateX(-10vh);
            transform: translateX(-10vh);

    opacity: 0;
}

#intro .animation-container.animation-fade-right.run-animation
{
    -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0);

    opacity: 1;
}

@media (max-width:1200px)
{
    #intro
    {
        height: auto;
    }

    #intro .container-mid
    {
        position: relative;
        top: 0;

        margin: 15vh 0;

        -webkit-transform: translate(0);
            -ms-transform: translate(0);
                transform: translate(0);
    }
}