@-webkit-keyframes Gravitate {
    0% {
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg)
    }
    to {
        -webkit-transform: rotate(450deg);
        -moz-transform: rotate(450deg);
        -ms-transform: rotate(450deg);
        -o-transform: rotate(450deg);
        transform: rotate(450deg)
    }
}
@-moz-keyframes Gravitate {
    0% {
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg)
    }
    to {
        -webkit-transform: rotate(450deg);
        -moz-transform: rotate(450deg);
        -ms-transform: rotate(450deg);
        -o-transform: rotate(450deg);
        transform: rotate(450deg)
    }
}
@-ms-keyframes Gravitate {
    0% {
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg)
    }
    to {
        -webkit-transform: rotate(450deg);
        -moz-transform: rotate(450deg);
        -ms-transform: rotate(450deg);
        -o-transform: rotate(450deg);
        transform: rotate(450deg)
    }
}
@-o-keyframes Gravitate {
    0% {
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg)
    }
    to {
        -webkit-transform: rotate(450deg);
        -moz-transform: rotate(450deg);
        -ms-transform: rotate(450deg);
        -o-transform: rotate(450deg);
        transform: rotate(450deg)
    }
}
@keyframes Gravitate {
    0% {
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg)
    }
    to {
        -webkit-transform: rotate(450deg);
        -moz-transform: rotate(450deg);
        -ms-transform: rotate(450deg);
        -o-transform: rotate(450deg);
        transform: rotate(450deg)
    }
}

@-webkit-keyframes Pulse {
    0%,30%,90%,to {
        opacity: 0
    }
    50% {
        opacity: 1
    }
}
@-moz-keyframes Pulse {
    0%,30%,90%,to {
        opacity: 0
    }
    50% {
        opacity: 1
    }
}
@-ms-keyframes Pulse {
    0%,30%,90%,to {
        opacity: 0
    }
    50% {
        opacity: 1
    }
}
@-o-keyframes Pulse {
    0%,30%,90%,to {
        opacity: 0
    }
    50% {
        opacity: 1
    }
}
@keyframes Pulse {
    0%,30%,90%,to {
        opacity: 0
    }
    50% {
        opacity: 1
    }
}

@-webkit-keyframes SpinHalf {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(720deg);
        -moz-transform: rotate(720deg);
        -ms-transform: rotate(720deg);
        -o-transform: rotate(720deg);
        transform: rotate(720deg);
    }
}
@-moz-keyframes SpinHalf {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(720deg);
        -moz-transform: rotate(720deg);
        -ms-transform: rotate(720deg);
        -o-transform: rotate(720deg);
        transform: rotate(720deg);
    }
}
@-ms-keyframes SpinHalf {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(720deg);
        -moz-transform: rotate(720deg);
        -ms-transform: rotate(720deg);
        -o-transform: rotate(720deg);
        transform: rotate(720deg);
    }
}
@-o-keyframes SpinHalf {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(720deg);
        -moz-transform: rotate(720deg);
        -ms-transform: rotate(720deg);
        -o-transform: rotate(720deg);
        transform: rotate(720deg);
    }
}
@keyframes SpinHalf {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(720deg);
        -moz-transform: rotate(720deg);
        -ms-transform: rotate(720deg);
        -o-transform: rotate(720deg);
        transform: rotate(720deg);
    }
}


/*** Generic loaders ***/
.component-loader .loader__full .anim-gravitate {
    -webkit-animation: Gravitate 1200ms cubic-bezier(.8,0,.2,1) infinite;
    -moz-animation: Gravitate 1200ms cubic-bezier(.8,0,.2,1) infinite;
    -ms-animation: Gravitate 1200ms cubic-bezier(.8,0,.2,1) infinite;
    -o-animation: Gravitate 1200ms cubic-bezier(.8,0,.2,1) infinite;
    animation: Gravitate 1200ms cubic-bezier(.8,0,.2,1) infinite
}
.component-loader .loader__full .anim-pulse {
    -webkit-animation: Pulse 1200ms cubic-bezier(.6,0,.6,.6) infinite;
    -moz-animation: Pulse 1200ms cubic-bezier(.6,0,.6,.6) infinite;
    -ms-animation: Pulse 1200ms cubic-bezier(.6,0,.6,.6) infinite;
    -o-animation: Pulse 1200ms cubic-bezier(.6,0,.6,.6) infinite;
    animation: Pulse 1200ms cubic-bezier(.6,0,.6,.6) infinite
}

.component-loader .loader__full {
    position: relative;
    margin: auto;
    width: 48px;
    height: 48px;
}
.component-loader .loader__full .loader-border {
    width: 100%;
    height: 100%;

    border-radius: 100%;
}
.component-loader .loader__full .loader-inner {
    position: absolute;
    top: 50%;
    left: 0;
    right: 50%;

    -webkit-transform-origin: right top;
    -moz-transform-origin: right top;
    -ms-transform-origin: right top;
    -o-transform-origin: right top;
    transform-origin: right top;
}
.component-loader .loader__full .loader-inner-circle {
    border-radius: 100%;
    width: 12px;
    height: 12px;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

/*** Mini loaders ***/
.component-loader .loader__minimal .anim-spin-half {
    -webkit-animation: SpinHalf 4s infinite linear;
    -moz-animation: SpinHalf 4s infinite linear;
    -ms-animation: SpinHalf 4s infinite linear;
    -o-animation: SpinHalf 4s infinite linear;
    animation: SpinHalf 4s infinite linear;
}

.component-loader .loader__minimal {
    position: relative;
    margin: auto;
    width: 20px;
    height: 20px;
}
.component-loader .loader__minimal .loader-half {
    width: 100%;
    height: 100%;

    border-radius: 50%;
    border: 1px solid transparent;
}



/** Determining which loader animation to show **/
.component-loader .loader-animate > * {
    /* Hide all; Only specific/expected combinations will unhide the right elements */
    display: none;
}

/* .loader__minimal with .anim__onLight */
.cta-actionable.anim__onLight .component-loader .loader-animate.loader__minimal .loader-half,
.component-loader .loader-animate.loader__minimal.anim__onLight .loader-half {
    display: block;
}
/* .loader__minimal with .anim__onDark */
.cta-actionable.anim__onDark .component-loader .loader-animate.loader__minimal .loader-half,
.component-loader .loader-animate.loader__minimal.anim__onDark .loader-half {
    display: block;
}

/* .loader__full with .anim__onLight */
.component-loader .loader-animate.loader__full.anim__onLight .loader-border,
.component-loader .loader-animate.loader__full.anim__onLight .loader-inner {
    display: block;
}
/* Currently no implementation of `.loader__full.anim__onDark` */



/*** Generic loaders ***/
.anim__onLight .component-loader .loader__full .loader-border,
.component-loader .loader__full.anim__onLight .loader-border {
    border-color: #010101;
}
.anim__onLight .component-loader .loader__full .loader-inner-circle,
.component-loader .loader__full.anim__onLight .loader-inner-circle {
    background-color: #010101;
}


/*** Mini loaders ***/
.anim__onLight .component-loader .loader__minimal .anim-spin-half,
.component-loader .loader__minimal.anim__onLight .anim-spin-half {
    border-top-color: #010101;
    border-right-color: #010101;
}

.anim__onDark .component-loader .loader__minimal .anim-spin-half,
.component-loader .loader__minimalanim__onDark .anim-spin-half {
    border-top-color: #FFFFFF;
    border-right-color: #FFFFFF;
}