/*========================================================
        DARK LAYOUT
=========================================================*/
@-webkit-keyframes triangle-skew-spin
{
    25%
    {
        -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
                transform: perspective(100px) rotateX(180deg) rotateY(0);
    }
    50%
    {
        -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
                transform: perspective(100px) rotateX(180deg) rotateY(180deg);
    }
    75%
    {
        -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
                transform: perspective(100px) rotateX(0) rotateY(180deg);
    }
    100%
    {
        -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
                transform: perspective(100px) rotateX(0) rotateY(0);
    }
}
@-moz-keyframes triangle-skew-spin
{
    25%
    {
        -moz-transform: perspective(100px) rotateX(180deg) rotateY(0);
             transform: perspective(100px) rotateX(180deg) rotateY(0);
    }
    50%
    {
        -moz-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
             transform: perspective(100px) rotateX(180deg) rotateY(180deg);
    }
    75%
    {
        -moz-transform: perspective(100px) rotateX(0) rotateY(180deg);
             transform: perspective(100px) rotateX(0) rotateY(180deg);
    }
    100%
    {
        -moz-transform: perspective(100px) rotateX(0) rotateY(0);
             transform: perspective(100px) rotateX(0) rotateY(0);
    }
}
@-o-keyframes triangle-skew-spin
{
    25%
    {
        transform: perspective(100px) rotateX(180deg) rotateY(0);
    }
    50%
    {
        transform: perspective(100px) rotateX(180deg) rotateY(180deg);
    }
    75%
    {
        transform: perspective(100px) rotateX(0) rotateY(180deg);
    }
    100%
    {
        transform: perspective(100px) rotateX(0) rotateY(0);
    }
}
@keyframes triangle-skew-spin
{
    25%
    {
        -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
           -moz-transform: perspective(100px) rotateX(180deg) rotateY(0);
                transform: perspective(100px) rotateX(180deg) rotateY(0);
    }
    50%
    {
        -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
           -moz-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
                transform: perspective(100px) rotateX(180deg) rotateY(180deg);
    }
    75%
    {
        -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
           -moz-transform: perspective(100px) rotateX(0) rotateY(180deg);
                transform: perspective(100px) rotateX(0) rotateY(180deg);
    }
    100%
    {
        -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
           -moz-transform: perspective(100px) rotateX(0) rotateY(0);
                transform: perspective(100px) rotateX(0) rotateY(0);
    }
}

.triangle-skew-spin > div
{
    width: 0;
    height: 0;

    -webkit-animation: triangle-skew-spin 3s 0s cubic-bezier(.09, .57, .49, .9) infinite;
       -moz-animation: triangle-skew-spin 3s 0s cubic-bezier(.09, .57, .49, .9) infinite;
         -o-animation: triangle-skew-spin 3s 0s cubic-bezier(.09, .57, .49, .9) infinite;
            animation: triangle-skew-spin 3s 0s cubic-bezier(.09, .57, .49, .9) infinite; 

    border-right: 20px solid transparent;
    border-bottom: 20px solid #b8c2cc;
    border-left: 20px solid transparent;

    -webkit-animation-fill-mode: both;
       -moz-animation-fill-mode: both;
         -o-animation-fill-mode: both;
            animation-fill-mode: both;
}