/*
 * Icon animations
 */
[class*=" cf-icon-"].spin,
[class*=" cf-icon-"][spin="true"],
[class^="cf-icon-"].spin,
[class^="cf-icon-"][spin="true"] {
    animation: cf-icon-spin 2s infinite linear; /* IE11 fallback */
    animation: cf-icon-spin 2s var(--iterations, infinite) linear;
}
[class*=" cf-icon-"].spin-hover:hover,
[class*=" cf-icon-"][spin-hover="true"]:hover,
[class^="cf-icon-"].spin-hover:hover,
[class^="cf-icon-"][spin-hover="true"]:hover {
    animation: cf-icon-spin 2s infinite linear; /* IE11 fallback */
    animation: cf-icon-spin 2s var(--iterations, infinite) linear;
}
[class*=" cf-icon-"].pulse,
[class*=" cf-icon-"][pulse="true"],
[class^="cf-icon-"].pulse,
[class^="cf-icon-"][pulse="true"] {
    animation: cf-icon-spin 1s infinite steps(8); /* IE11 fallback */
    animation: cf-icon-spin 1s var(--iterations, infinite) steps(8);
}
[class*=" cf-icon-"].pulse-hover:hover,
[class*=" cf-icon-"][pulse-hover="true"]:hover,
[class^="cf-icon-"].pulse-hover:hover,
[class^="cf-icon-"][pulse-hover="true"]:hover {
    animation: cf-icon-spin 1s infinite steps(8); /* IE11 fallback */
    animation: cf-icon-spin 1s var(--iterations, infinite) steps(8);
}
[class*=" cf-icon-"].bounce,
[class*=" cf-icon-"][bounce="true"],
[class^="cf-icon-"].bounce,
[class^="cf-icon-"][bounce="true"] {
    position: relative;
    animation: cf-icon-bounce 1s infinite linear; /* IE11 fallback */
    animation: cf-icon-bounce 1s var(--iterations, infinite) linear;
}
[class*=" cf-icon-"].bounce-hover:hover,
[class*=" cf-icon-"][bouncehover="true"]:hover,
[class^="cf-icon-"].bounce-hover:hover,
[class^="cf-icon-"][bounce-hover="true"]:hover {
    position: relative;
    animation: cf-icon-bounce 1s infinite linear; /* IE11 fallback */
    animation: cf-icon-bounce 1s var(--iterations, infinite) linear;
}
[class*=" cf-icon-"].fade,
[class*=" cf-icon-"][fade="true"],
[class^="cf-icon-"].fade,
[class^="cf-icon-"][fade="true"] {
    animation: cf-icon-fade 2s infinite linear; /* IE11 fallback */
    animation: cf-icon-fade 2s var(--iterations, infinite) linear;
}
[class*=" cf-icon-"].fade-hover:hover,
[class*=" cf-icon-"][fade-hover="true"]:hover,
[class^="cf-icon-"].fade-hover:hover,
[class^="cf-icon-"][fade-hover="true"]:hover {
    animation: cf-icon-fade 2s infinite linear; /* IE11 fallback */
    animation: cf-icon-fade 2s var(--iterations, infinite) linear;
}
[class*=" cf-icon-"].shake,
[class*=" cf-icon-"][shake="true"],
[class^="cf-icon-"].shake,
[class^="cf-icon-"][shake="true"] {
    animation: cf-icon-shake 0.82s infinite cubic-bezier(0.36, 0.07, 0.19, 0.97) both; /* IE11 fallback */
    animation: cf-icon-shake 0.82s var(--iterations, infinite) cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
[class*=" cf-icon-"].shake-hover:hover,
[class*=" cf-icon-"][shake-hover="true"]:hover,
[class^="cf-icon-"].shake-hover:hover,
[class^="cf-icon-"][shake-hover="true"]:hover {
    animation: cf-icon-shake 0.82s infinite cubic-bezier(0.36, 0.07, 0.19, 0.97) both; /* IE11 fallback */
    animation: cf-icon-shake 0.82s var(--iterations, infinite) cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
[class*=" cf-icon-"].ring,
[class*=" cf-icon-"][ring="true"],
[class^="cf-icon-"].ring,
[class^="cf-icon-"][ring="true"] {
    animation: cf-icon-ring 0.85s infinite ease both; /* IE11 fallback */
    animation: cf-icon-ring 0.85s var(--iterations, infinite) ease both;
    -webkit-transform-origin: 50% 0 initial;
    -ms-transform-origin: 50% 0 initial;
    transform-origin: 50% 0 initial;
}
[class*=" cf-icon-"].ring-hover:hover,
[class*=" cf-icon-"][ring-hover="true"]:hover,
[class^="cf-icon-"].ring-hover:hover,
[class^="cf-icon-"][ring-hover="true"]:hover {
    animation: cf-icon-ring 0.85s infinite ease both; /* IE11 fallback */
    animation: cf-icon-ring 0.85s var(--iterations, infinite) ease both;
    -webkit-transform-origin: 50% 0 initial;
    -ms-transform-origin: 50% 0 initial;
    transform-origin: 50% 0 initial;
}
[class*=" cf-icon-"].reverse,
[class*=" cf-icon-"][reverse="true"],
[class^="cf-icon-"].reverse,
[class^="cf-icon-"][reverse="true"] {
    animation-direction: reverse !important;
}
@keyframes cf-icon-bounce {
    0% {
        top: 0;
    }
    50% {
        top: -0.2em;
    }
    70% {
        top: -0.3em;
    }
    100% {
        top: 0;
    }
}
@keyframes cf-icon-fade {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes cf-icon-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}
@keyframes cf-icon-shake {
    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }
    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }
    30%,
    50%,
    70% {
        transform: translate3d(-4px, 0, 0);
    }
    40%,
    60% {
        transform: translate3d(4px, 0, 0);
    }
}
@keyframes cf-icon-ring {
    0% {
        transform: rotate(-15deg);
    }
    16% {
        transform: rotate(18deg);
    }
    28% {
        transform: rotate(-18deg);
    }
    50% {
        transform: rotate(12deg);
    }
    100% {
        transform: rotate(0deg);
    }
}