/* Sizes */

.width20px {
    width: 20px !important;
}

.height44px {
    height: 44px;
}


/* Sprites */

.sprite-1-of-3 {
    background-size: 300% auto;
    background-position: 0% 0%;
    background-repeat: no-repeat;
}

.sprite-1-of-3-vertical {
    background-size: auto 300%;
    background-position: 0% 0%;
    background-repeat: no-repeat;
}

.sprite-1-of-3-animated {
    animation: 12s animated-staggered-background ease-in-out infinite;
}

.sprite-1-of-3-vertical-animated {
    animation: 12s animated-staggered-background-vertical ease-in-out infinite;
}

.color-primary-layouts-ar {
    animation: 12s color-primary-layouts-ar infinite;
}

.color-secondary-layouts-ar {
    animation: 12s color-secondary-layouts-ar infinite;
}

.color-tertiary-layouts-ar {
    animation: 12s color-tertiary-layouts-ar infinite;
}

.color-quaternary-layouts-ar {
    animation: 12s color-quaternary-layouts-ar infinite;
}

.color-primary-layouts-br {
    animation: 12s color-primary-layouts-br infinite;
}

.color-secondary-layouts-br {
    animation: 12s color-secondary-layouts-br infinite;
}

.color-tertiary-layouts-br {
    animation: 12s color-tertiary-layouts-br infinite;
}

.color-quaternary-layouts-br {
    animation: 12s color-quaternary-layouts-br infinite;
}

.color-primary-layouts-mx {
    animation: 12s color-primary-layouts-mx infinite;
}

.color-secondary-layouts-mx {
    animation: 12s color-secondary-layouts-mx infinite;
}

.color-tertiary-layouts-mx {
    animation: 12s color-tertiary-layouts-mx infinite;
}

.animated-staggered-content-vertical {
    animation: 12s animated-staggered-content-vertical ease-in-out infinite;
}


/* animations */

@keyframes animated-staggered-content-vertical {
    0% {
        transform: translate3d(0, 0, 0);
    }

    26% {
        transform: translate3d(0, 0, 0);
    }

    32% {
        transform: translate3d(0, -33.33%, 0);
    }

    58% {
        transform: translate3d(0, -33.33%, 0);
    }

    64% {
        transform: translate3d(0, -66.66%, 0);
    }

    90% {
        transform: translate3d(0, -66.66%, 0);
    }

    100% {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes color-primary-layouts-ar {
    0% {
        background-color: #ffe100;
    }

    26% {
        background-color: #ffe100;
    }

    32% {
        background-color: #42deb7;
    }

    58% {
        background-color: #42deb7;
    }

    64% {
        background-color: #ec84c4;
    }

    90% {
        background-color: #ec84c4;
    }

    100% {
        background-color: #ffe100;
    }
}

@keyframes color-secondary-layouts-ar {
    0% {
        background-color: #3c99d5;
    }

    26% {
        background-color: #3c99d5;
    }

    32% {
        background-color: #f24a73;
    }

    58% {
        background-color: #f24a73;
    }

    64% {
        background-color: #4dc247;
    }

    90% {
        background-color: #4dc247;
    }

    100% {
        background-color: #3c99d5;
    }
}

@keyframes color-tertiary-layouts-ar {
    0% {
        background-color: #f0c3dd;
    }

    26% {
        background-color: #f0c3dd;
    }

    32% {
        background-color: #ffe619;
    }

    58% {
        background-color: #ffe619;
    }

    64% {
        background-color: #f5edb1;
    }

    90% {
        background-color: #f5edb1;
    }

    100% {
        background-color: #f0c3dd;
    }
}

@keyframes color-quaternary-layouts-ar {
    0% {
        background-color: #7fb93b;
    }

    26% {
        background-color: #7fb93b;
    }

    32% {
        background-color: #87ddb7;
    }

    58% {
        background-color: #87ddb7;
    }

    64% {
        background-color: #f4d3f0;
    }

    90% {
        background-color: #f4d3f0;
    }

    100% {
        background-color: #7fb93b;
    }
}

@keyframes color-primary-layouts-br {
    0% {
        background-color: #1abc9c;
    }

    26% {
        background-color: #1abc9c;
    }

    32% {
        background-color: #e9313d;
    }

    58% {
        background-color: #e9313d;
    }

    64% {
        background-color: #313131;
    }

    90% {
        background-color: #313131;
    }

    100% {
        background-color: #1abc9c;
    }
}

@keyframes color-secondary-layouts-br {
    0% {
        background-color: #e74c3c;
    }

    26% {
        background-color: #e74c3c;
    }

    32% {
        background-color: #181434;
    }

    58% {
        background-color: #181434;
    }

    64% {
        background-color: #f26128;
    }

    90% {
        background-color: #f26128;
    }

    100% {
        background-color: #e74c3c;
    }
}

@keyframes color-tertiary-layouts-br {
    0% {
        background-color: #2d2d2d;
    }

    26% {
        background-color: #2d2d2d;
    }

    32% {
        background-color: #ffab04;
    }

    58% {
        background-color: #ffab04;
    }

    64% {
        background-color: #3b5998;
    }

    90% {
        background-color: #3b5998;
    }

    100% {
        background-color: #2d2d2d;
    }
}

@keyframes color-quaternary-layouts-br {
    0% {
        background-color: #f7f7f7;
        border: 1px solid $gray;
    }

    26% {
        background-color: #f7f7f7;
        border: 1px solid $gray;
    }

    32% {
        background-color: #929292;
        border: 1px solid transparent;
    }

    58% {
        background-color: #929292;
        border: 1px solid transparent;
    }

    64% {
        background-color: #d1aa89;
        border: 1px solid transparent;
    }

    90% {
        background-color: #d1aa89;
        border: 1px solid transparent;
    }

    100% {
        background-color: #f7f7f7;
        border: 1px solid $gray;
    }
}



@keyframes color-primary-layouts-mx {
    0% {
        background-color: #de000a;
    }

    26% {
        background-color: #de000a;
    }

    32% {
        background-color: #000000;
    }

    58% {
        background-color: #000000;
    }

    64% {
        background-color: #333333;
    }

    90% {
        background-color: #333333;
    }

    100% {
        background-color: #de000a;
    }
}

@keyframes color-secondary-layouts-mx {
    0% {
        background-color: #535353;
    }

    26% {
        background-color: #535353;
    }

    32% {
        background-color: #ff0032;
    }

    58% {
        background-color: #ff0032;
    }

    64% {
        background-color: #f27092;
    }

    90% {
        background-color: #f27092;
    }

    100% {
        background-color: #3c99d5;
    }
}

@keyframes color-tertiary-layouts-mx {
    0% {
        background-color: #ffffff;
    }

    26% {
        background-color: #ffffff;
    }

    32% {
        background-color: #ffffff;
    }

    58% {
        background-color: #ffffff;
    }

    64% {
        background-color: #ffffff;
    }

    90% {
        background-color: #ffffff;
    }

    100% {
        background-color: #f0c3dd;
    }
}

@keyframes animated-staggered-background-vertical {
    0% {
        background-position: 0 0;
    }

    26% {
        background-position: 0 0;
    }

    32% {
        background-position: 0 50%;
    }

    58% {
        background-position: 0 50%;
    }

    64% {
        background-position: 0 100%;
    }

    90% {
        background-position: 0 100%;
    }

    100% {
        background-position: 0 0;
    }
}