/*
 * Animated Headine
 **/
 .words-wrapper {
    display: inline-block;
    position: relative;
    text-align: left;
    b {
        display: inline-block;
        position: absolute;
        white-space: nowrap;
        left: 0;
        top: 0;
        &.is-visible {
            position: relative;
            opacity: 1;
        }
    }
}

.headline {
    &.rotate-1 {
        .words-wrapper {
            -webkit-perspective: 300px;
            -moz-perspective: 300px;
            perspective: 300px;
        }
        b {
            opacity: 0;
            -webkit-transform-origin: 50% 100%;
            -moz-transform-origin: 50% 100%;
            -ms-transform-origin: 50% 100%;
            -o-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
            -webkit-transform: rotateX(180deg);
            -moz-transform: rotateX(180deg);
            -ms-transform: rotateX(180deg);
            -o-transform: rotateX(180deg);
            transform: rotateX(180deg);
            &.is-visible {
            opacity: 1;
            -webkit-transform: rotateX(0deg);
            -moz-transform: rotateX(0deg);
            -ms-transform: rotateX(0deg);
            -o-transform: rotateX(0deg);
            transform: rotateX(0deg);
            -webkit-animation: rotate-1-in 1.2s;
            -moz-animation: rotate-1-in 1.2s;
            animation: rotate-1-in 1.2s;
            }
            &.is-hidden {
            -webkit-transform: rotateX(180deg);
            -moz-transform: rotateX(180deg);
            -ms-transform: rotateX(180deg);
            -o-transform: rotateX(180deg);
            transform: rotateX(180deg);
            -webkit-animation: rotate-1-out 1.2s;
            -moz-animation: rotate-1-out 1.2s;
            animation: rotate-1-out 1.2s;
            }
        }
    }
    &.type {
        .words-wrapper {
            vertical-align: top;
            overflow: hidden;
        }
        b {
            visibility: hidden;
            &.is-visible {
            visibility: visible;
            }
        }
        i {
            position: absolute;
            visibility: hidden;
            &.in {
            position: relative;
            visibility: visible;
            }
        }
    }
    &.rotate-2 {
        .words-wrapper {
            -webkit-perspective: 300px;
            -moz-perspective: 300px;
            perspective: 300px;
        }
        i {
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
            -webkit-transform: translateZ(-20px) rotateX(90deg);
            -moz-transform: translateZ(-20px) rotateX(90deg);
            -ms-transform: translateZ(-20px) rotateX(90deg);
            -o-transform: translateZ(-20px) rotateX(90deg);
            transform: translateZ(-20px) rotateX(90deg);
            opacity: 0;
            &.in {
            -webkit-animation: rotate-2-in 0.4s forwards;
            -moz-animation: rotate-2-in 0.4s forwards;
            animation: rotate-2-in 0.4s forwards;
            }
            &.out {
            -webkit-animation: rotate-2-out 0.4s forwards;
            -moz-animation: rotate-2-out 0.4s forwards;
            animation: rotate-2-out 0.4s forwards;
            }
        }
        em {
            -webkit-transform: translateZ(20px);
            -moz-transform: translateZ(20px);
            -ms-transform: translateZ(20px);
            -o-transform: translateZ(20px);
            transform: translateZ(20px);
        }
    }
    &.loading-bar {
        span {
            display: inline-block;
            padding: 0.2em 0;
        }
        .words-wrapper {
            overflow: hidden;
            vertical-align: top;
        }
        b {
            top: 0.2em;
            opacity: 0;
            -webkit-transition: opacity 0.3s;
            -moz-transition: opacity 0.3s;
            transition: opacity 0.3s;
            &.is-visible {
            opacity: 1;
            top: 0;
            }
        }
    }
    &.slide {
        span {
            display: inline-block;
            padding: 0.2em 0;
        }
        .words-wrapper {
            overflow: hidden;
            vertical-align: top;
        }
        b {
            opacity: 0;
            top: 0.2em;
            &.is-visible {
            top: 0;
            opacity: 1;
            -webkit-animation: slide-in 0.6s;
            -moz-animation: slide-in 0.6s;
            animation: slide-in 0.6s;
            }
            &.is-hidden {
            -webkit-animation: slide-out 0.6s;
            -moz-animation: slide-out 0.6s;
            animation: slide-out 0.6s;
            }
        }
    }
    &.clip {
        span {
            display: inline-block;
            padding: 0.2em 0;
        }
        .words-wrapper {
            overflow: hidden;
            vertical-align: top;
        }
        b {
            opacity: 0;
            &.is-visible {
            opacity: 1;
            }
        }
    }
    &.zoom {
        .words-wrapper {
            -webkit-perspective: 300px;
            -moz-perspective: 300px;
            perspective: 300px;
        }
        b {
            opacity: 0;
            &.is-visible {
            opacity: 1;
            -webkit-animation: zoom-in 0.8s;
            -moz-animation: zoom-in 0.8s;
            animation: zoom-in 0.8s;
            }
            &.is-hidden {
            -webkit-animation: zoom-out 0.8s;
            -moz-animation: zoom-out 0.8s;
            animation: zoom-out 0.8s;
            }
        }
    }
    &.rotate-3 {
        .words-wrapper {
            -webkit-perspective: 300px;
            -moz-perspective: 300px;
            perspective: 300px;
        }
        i {
            display: inline-block;
            -webkit-transform: rotateY(180deg);
            -moz-transform: rotateY(180deg);
            -ms-transform: rotateY(180deg);
            -o-transform: rotateY(180deg);
            transform: rotateY(180deg);
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            &.in {
            -webkit-animation: rotate-3-in 0.6s forwards;
            -moz-animation: rotate-3-in 0.6s forwards;
            animation: rotate-3-in 0.6s forwards;
            }
            &.out {
            -webkit-animation: rotate-3-out 0.6s forwards;
            -moz-animation: rotate-3-out 0.6s forwards;
            animation: rotate-3-out 0.6s forwards;
            }
        }
    }
    &.scale {
        i {
            display: inline-block;
            opacity: 0;
            -webkit-transform: scale(0);
            -moz-transform: scale(0);
            -ms-transform: scale(0);
            -o-transform: scale(0);
            transform: scale(0);
            &.in {
                -webkit-animation: scale-up 0.6s forwards;
                -moz-animation: scale-up 0.6s forwards;
                animation: scale-up 0.6s forwards;
            }
            &.out {
                -webkit-animation: scale-down 0.6s forwards;
                -moz-animation: scale-down 0.6s forwards;
                animation: scale-down 0.6s forwards;
            }
        }
    }
    &.push {
        b {
            opacity: 0;
            &.is-visible {
            opacity: 1;
            -webkit-animation: push-in 0.6s;
            -moz-animation: push-in 0.6s;
            animation: push-in 0.6s;
            }
            &.is-hidden {
            -webkit-animation: push-out 0.6s;
            -moz-animation: push-out 0.6s;
            animation: push-out 0.6s;
            }
        }
    }
  }
.headline.rotate-2 i,
.headline.rotate-2 em {
    display: inline-block;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.is-visible {
    .headline {
        &.rotate-2 {
            i {
                opacity: 1;
            }
        }
        &.rotate-3 {
            i {
                -webkit-transform: rotateY(0deg);
                -moz-transform: rotateY(0deg);
                -ms-transform: rotateY(0deg);
                -o-transform: rotateY(0deg);
                transform: rotateY(0deg);
            }
        }
        &.scale {
            i {
                opacity: 1;
            }
        }
    }
}
.words-wrapper b,
.words-wrapper b.is-hidden {
    opacity: 0;
}