/* Fancy Text */
.word-rotator {
    i, em, b {
        font-style: normal;
        font-weight: inherit;
    }
}

.word-rotator-items {
    display: inline-flex !important;
    position: relative;
    text-align: left;
    b {
        display: inline-block;
        position: absolute;
        white-space: nowrap;
        left: 0;
        top: 0;
        &.active {
            position: relative;
        }
    }
}

.word-rotator-items.has-bg b {
    padding: 0.1rem 0.5rem;
}

/* rotate-1 */
.word-rotator.rotate-1 .word-rotator-items {
    -webkit-perspective: 300px;
    perspective: 300px;
}

.word-rotator.rotate-1 b {
    opacity: 0;
    transform-origin: 50% 100%;
    transform: rotateX(180deg);
}

.word-rotator.rotate-1 b.active {
    opacity: 1;
    transform: rotateX(0deg);
    animation: word-rotator-rotate-1-in 1.2s;
}

.word-rotator.rotate-1 b.inactive {
    transform: rotateX(180deg);
    animation: word-rotator-rotate-1-out 1.2s;
}

@keyframes word-rotator-rotate-1-in {
    0% {
        transform: rotateX(180deg);
        opacity: 0;
    }

    35% {
        transform: rotateX(120deg);
        opacity: 0;
    }

    65% {
        opacity: 0;
    }

    100% {
        transform: rotateX(360deg);
        opacity: 1;
    }
}

@keyframes word-rotator-rotate-1-out {
    0% {
        transform: rotateX(0deg);
        opacity: 1;
    }

    35% {
        transform: rotateX(-40deg);
        opacity: 1;
    }

    65% {
        opacity: 0;
    }

    100% {
        transform: rotateX(180deg);
        opacity: 0;
    }
}
/* type */
.word-rotator.type .word-rotator-items {
    vertical-align: top;
    overflow: hidden;
    position: relative;
    padding-#{$right}: 3px;
}

.word-rotator.type .word-rotator-items:after {
    content: ' ';
    position: absolute;
    #{$right}: 0;
    top: 5%;
    height: 90%;
    width: 1px;
    display: block;
    background-color: transparent;
}

.word-rotator.type .word-rotator-items.waiting:after {
    animation: 1s word-rotator-pulse step-end infinite;
}

.word-rotator.type .word-rotator-items.selected {
    background-color: #212529 !important;
}

.word-rotator.type .word-rotator-items.selected:after {
    visibility: hidden;
}

.word-rotator.type .word-rotator-items.selected b {
    color: #FFF !important;
}

.word-rotator.type b {
    visibility: hidden;
}

.word-rotator.type b.active {
    visibility: visible;
}

.word-rotator.type i {
    position: absolute;
    visibility: hidden;
}

.word-rotator.type i.in {
    position: relative;
    visibility: visible;
}

@keyframes word-rotator-pulse {
    from, to {
        background-color: transparent;
    }

    50% {
        background-color: black;
    }
}

@keyframes word-rotator-pulse-light {
    from, to {
        background-color: transparent;
    }

    50% {
        background-color: white;
    }
}
/* rotate-2 */
.word-rotator.rotate-2 .word-rotator-items {
    -webkit-perspective: 300px;
    perspective: 300px;
}

.word-rotator.rotate-2 i, .word-rotator.rotate-2 em {
    display: inline-block;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.word-rotator.rotate-2 b {
    opacity: 0;
}

.word-rotator.rotate-2 i {
    transform-style: preserve-3d;
    transform: translateZ(-20px) rotateX(90deg);
    opacity: 0;
}

.active .word-rotator.rotate-2 i {
    opacity: 1;
}

.word-rotator.rotate-2 i.in {
    animation: word-rotator-rotate-2-in .4s forwards;
}

.word-rotator.rotate-2 i.out {
    animation: word-rotator-rotate-2-out .4s forwards;
}

.word-rotator.rotate-2 em {
    transform: translateZ(20px);
}

.no-csstransitions .word-rotator.rotate-2 i {
    transform: rotateX(0deg);
    opacity: 0;
}

.no-csstransitions .word-rotator.rotate-2 i em {
    transform: scale(1);
}

.no-csstransitions .word-rotator.rotate-2 .active i {
    opacity: 1;
}

@keyframes word-rotator-rotate-2-in {
    0% {
        opacity: 0;
        transform: translateZ(-20px) rotateX(90deg);
    }

    60% {
        opacity: 1;
        transform: translateZ(-20px) rotateX(-10deg);
    }

    100% {
        opacity: 1;
        transform: translateZ(-20px) rotateX(0deg);
    }
}

@keyframes word-rotator-rotate-2-out {
    0% {
        opacity: 1;
        transform: translateZ(-20px) rotateX(0);
    }

    60% {
        opacity: 0;
        transform: translateZ(-20px) rotateX(-100deg);
    }

    100% {
        opacity: 0;
        transform: translateZ(-20px) rotateX(-90deg);
    }
}
/* loading-bar */
.word-rotator.loading-bar span {
    display: inline-block;
    padding: .2em 0;
}

.word-rotator.loading-bar .word-rotator-items {
    overflow: hidden;
    vertical-align: top;
}

.word-rotator.loading-bar .word-rotator-items:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 0;
    background: #212529;
    z-index: 2;
    transition: width .3s -0.1s;
}

.word-rotator.loading-bar .word-rotator-items.is-loading:after {
    width: 100%;
    transition: width 3s;
}

.word-rotator.loading-bar .word-rotator-items.bg-light:after {
    background-color: #212529 !important;
}

.word-rotator.loading-bar .word-rotator-items[class*="bg-"]:not(.bg-light):after {
    background-color: #FFF !important;
}

.word-rotator.loading-bar b {
    top: .2em;
    opacity: 0;
    transition: opacity .3s;
}

.word-rotator.loading-bar b.active {
    opacity: 1;
    top: 0;
}

/* slide */
.word-rotator.slide span {
    display: inline-block;
    vertical-align: middle;
    padding: .2em 0;
}

.word-rotator.slide .word-rotator-items {
    overflow: hidden;
    font-weight: 700;
    /*vertical-align: top;*/
}

.word-rotator.slide b {
    opacity: 0;
    top: .2em;
}

.word-rotator.slide b.active {
    top: 0;
    opacity: 1;
    animation: slide-in .6s;
}

.word-rotator.slide b.inactive {
    animation: slide-out .6s;
}

@keyframes slide-in {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }

    60% {
        opacity: 1;
        transform: translateY(20%);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slide-out {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    60% {
        opacity: 0;
        transform: translateY(120%);
    }

    100% {
        opacity: 0;
        transform: translateY(100%);
    }
}
/* clip */
.word-rotator.clip span {
    display: inline-block;
    padding: .2em 0;
}

.word-rotator.clip .word-rotator-items {
    overflow: hidden;
    vertical-align: top;
}

.word-rotator.clip .word-rotator-items:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 2px;
    height: 100%;
    background-color: #212529;
}

.word-rotator.clip b {
    opacity: 0;
}

.word-rotator.clip b.active {
    opacity: 1;
}

/* zoom */
.word-rotator.zoom .word-rotator-items {
    -webkit-perspective: 300px;
    perspective: 300px;
}

.word-rotator.zoom b {
    opacity: 0;
}

.word-rotator.zoom b.active {
    opacity: 1;
    animation: zoom-in .8s;
}

.word-rotator.zoom b.inactive {
    animation: zoom-out .8s;
}

@keyframes zoom-in {
    0% {
        opacity: 0;
        transform: translateZ(100px);
    }

    100% {
        opacity: 1;
        transform: translateZ(0);
    }
}

@keyframes zoom-out {
    0% {
        opacity: 1;
        transform: translateZ(0);
    }

    100% {
        opacity: 0;
        transform: translateZ(-100px);
    }
}

.word-rotator.rotate-3 .word-rotator-items {
    -webkit-perspective: 300px;
    perspective: 300px;
}

.word-rotator.rotate-3 b {
    opacity: 0;
}

.word-rotator.rotate-3 i {
    display: inline-block;
    transform: rotateY(180deg);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.active .word-rotator.rotate-3 i {
    transform: rotateY(0deg);
}

.word-rotator.rotate-3 i.in {
    animation: word-rotator-rotate-3-in .6s forwards;
}

.word-rotator.rotate-3 i.out {
    animation: word-rotator-rotate-3-out .6s forwards;
}

.no-csstransitions .word-rotator.rotate-3 i {
    transform: rotateY(0deg);
    opacity: 0;
}

.word-rotate-prefix {
    margin-#{$right}: .375rem;
}
.word-rotate-suffix {
    margin-#{$left}: .375rem;
}

.no-csstransitions .word-rotator.rotate-3 .active i {
    opacity: 1;
}

@keyframes word-rotator-rotate-3-in {
    0% {
        transform: rotateY(180deg);
    }

    100% {
        transform: rotateY(0deg);
    }
}

@keyframes word-rotator-rotate-3-out {
    0% {
        transform: rotateY(0);
    }

    100% {
        transform: rotateY(-180deg);
    }
}
/* scale */
.word-rotator.scale b {
    opacity: 0;
}

.word-rotator.scale i {
    display: inline-block;
    opacity: 0;
    transform: scale(0);
}

.active .word-rotator.scale i {
    opacity: 1;
}

.word-rotator.scale i.in {
    animation: scale-up .6s forwards;
}

.word-rotator.scale i.out {
    animation: scale-down .6s forwards;
}

.no-csstransitions .word-rotator.scale i {
    transform: scale(1);
    opacity: 0;
}

.no-csstransitions .word-rotator.scale .active i {
    opacity: 1;
}

@keyframes scale-up {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    60% {
        transform: scale(1.2);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes scale-down {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    60% {
        transform: scale(0);
        opacity: 0;
    }
}
/* push */
.word-rotator.push b {
    opacity: 0;
}

.word-rotator.push b.active {
    opacity: 1;
    animation: push-in .6s;
}

.word-rotator.push b.inactive {
    animation: push-out .6s;
}

@keyframes push-in {
    0% {
        opacity: 0;
        transform: translateX(-100%);
    }

    60% {
        opacity: 1;
        transform: translateX(10%);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes push-out {
    0% {
        opacity: 1;
        transform: translateX(0);
    }

    60% {
        opacity: 0;
        transform: translateX(110%);
    }

    100% {
        opacity: 0;
        transform: translateX(100%);
    }
}