.word_effect {
  position: relative;
  height: 100%;
}
.word_effect .word-effect-phrase {
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  height: fit-content;
}
.word_effect .word-effect-table {
  display:table;
  height: 100%;
}
.word_effect .word-effect-cell {
  display:table-cell;
  vertical-align: middle;
}
.word_effect span {
  backface-visibility: hidden;
  display: none;
  letter-spacing: 0.2em;
  position: relative;
}

.word_effect span.visible {
  opacity: 1;
}

.word_effect span.invisible {
  opacity: 0;
}

.word_effect span.in,
.word_effect span.out {
  display: inline-block;
}

/*Config window*/
#edit-word-effect .word_effect{
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
#edit-word-effect .center-word-animation{
  height: 300px;
  width: 100%;
  text-align: center;
  border-radius: 5px;
  border: 1px solid lightgray;
}
/**/

@keyframes rotateYOut {
  0% {
    transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    opacity: 1;
  }
  100% {
    transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    opacity: 0;
  }
}



@-webkit-keyframes rotateYOut {
  0% {
    -webkit-transform: rotateY(0deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: rotateY(-180deg);
    opacity: 0;
  }
}

@keyframes rotateYIn {
  0% {
    transform: rotateX(180deg);
    -moz-transform: rotateX(180deg);
    opacity: 0;
  }
  100% {
    transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    opacity: 1;
  }
}

@-webkit-keyframes rotateYIn {
  0% {
    -webkit-transform: rotateX(180deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(0deg);
    opacity: 1;
  }
}

@keyframes rotateXOut {
  0% {
    transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    opacity: 1;
  }
  100% {
    transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);
    opacity: 0;
  }
}

@-webkit-keyframes rotateXOut {
  0% {
    -webkit-transform: rotateX(0deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: rotateX(-180deg);
    opacity: 0;
  }
}

@keyframes rotateXIn {
  0% {
    transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    opacity: 0;
  }
  100% {
    transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    opacity: 1;
  }
}

@-webkit-keyframes rotateXIn {
  0% {
    -webkit-transform: rotateY(180deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateY(0deg);
    opacity: 1;
  }
}

@keyframes rotateZOut {
  0% {
    transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    opacity: 1;
  }
  100% {
    transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);
    opacity: 0;
  }
}

@-webkit-keyframes rotateZOut {
  0% {
    -webkit-transform: rotateX(0deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: rotateX(-180deg);
    opacity: 0;
  }
}

@keyframes rotateZIn {
  0% {
    transform: rotateZ(180deg);
    -moz-transform: rotateZ(180deg);
    opacity: 0;
  }
  100% {
    transform: rotateZ(0deg);
    -moz-transform: rotateZ(0deg);
    opacity: 1;
  }
}

@-webkit-keyframes rotateZIn {
  0% {
    -webkit-transform: rotateZ(180deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateZ(0deg);
    opacity: 1;
  }
}

@keyframes slide-in {
  0% {
    opacity: 0;
    animation-timing-function: ease-in-out;
    -moz-animation-timing-function: ease-in-out;
    transform: translate3d(0, -50px, 0);
    -moz-transform: translate3d(0, -50px, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@-webkit-keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-transform: translate3d(0, -50px, 0);
    transform: translate3d(0, -50px, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes slide-out {
  0% {
    -moz-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  60% {
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  100% {
    -moz-transform: translate3d(0, 50px, 0);
    transform: translate3d(0, 50px, 0);
    opacity: 0;
  }
}

@-webkit-keyframes slide-out {
  0% {
    -webkit-animation-timing-function: ease-in-out;
  }
  60% {
    -webkit-transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 50px, 0);
    opacity: 0;
  }
}

@keyframes slide-zoom-in {
  0% {
    -moz-transform: translateX(-50px) scale(0);
    transform: translateX(-50px) scale(0);
    opacity: 0;
  }

  100% {
    -moz-transform: translateX(0px) scale(1);
    transform: translateX(0px) scale(1);
    opacity: 1;
  }
}

@-webkit-keyframes slide-zoom-in {
  0% {
    -webkit-transform: translateX(-50px) scale(0);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateX(0px) scale(1);
    opacity: 1;
  }
}

@keyframes slide-zoom-out {
  0% {
    -moz-transform: translateX(20px) scale(1);
    -moz-transform: translateZ(20px) scale(1);
    transform: translateX(20px) scale(1);
    transform: translateZ(20px) scale(1);
  }

  100% {
    -moz-transform: translateX(50px) scale(0);
    transform: translateX(50px) scale(0);
    opacity: 0;
  }
}

@-webkit-keyframes slide-zoom-out {
  0% {
    -webkit-transform: translateX(20px) scale(1);
    -webkit-transform: translateZ(20px) scale(1);
  }

  100% {
    -webkit-transform: translateX(50px) scale(0);
    opacity: 0;
  }
}

@keyframes fadeInRotate{
  0%{
    opacity: 0;
    transform: scale(0) rotate(360deg);
    -moz-transform: scale(0) rotate(360deg);
  }
  100%{
    opacity: 1;
    transform: scale(1) rotate(0deg);
    -moz-transform: scale(1) rotate(0deg);
  }
}

@-webkit-keyframes fadeInRotate{
  0%{
    opacity: 0;
    -webkit-transform: scale(0) rotate(360deg);
  }
  100%{
    opacity: 1;
    -webkit-transform: scale(1) rotate(0deg);
  }
}

@keyframes fadeOutRotate{
  0%{
    opacity: 1;
    transform: scale(1) rotate(360deg);
    -moz-transform: scale(1) rotate(360deg);
  }
  100%{
    opacity: 0;
    transform: scale(0) rotate(0deg);
    -moz-transform: scale(0) rotate(0deg);
  }
}

@-webkit-keyframes fadeOutRotate{
  0%{
    opacity: 1;
    -webkit-transform: scale(1) rotate(360deg);
  }
  100%{
    opacity: 0;
    -webkit-transform: scale(0) rotate(0deg);
  }
}

@keyframes slide-in-right-to-left {
  0% {
    text-shadow: 0 0 50px #fff;
    letter-spacing: 80px;
    opacity: 0.2;
    transform: rotateY(-90deg);
    -moz-transform: rotateY(-90deg);
  }
  50% {
    text-shadow: 0 0 1px #fff;
    letter-spacing: 14px;
    opacity: 0.8;
    transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
  }
  85% {
    text-shadow: 0 0 1px #fff;
    opacity: 0.8;
    transform: rotateY(0deg) translateZ(100px);
    -moz-transform: rotateY(0deg) translateZ(100px);
  }
  100% {
    text-shadow: 0 0 10px #fff;
    opacity: 1;
    transform: translateZ(130px);
    -moz-transform: translateZ(130px);
    pointer-events: none;
  }
}

@-webkit-keyframes slide-in-right-to-left {
  0% {
    text-shadow: 0 0 50px #fff;
    letter-spacing: 80px;
    opacity: 0.2;
    -webkit-transform: rotateY(-90deg);
  }
  50% {
    text-shadow: 0 0 1px #fff;
    letter-spacing: 14px;
    opacity: 0.8;
    -webkit-transform: rotateY(0deg);
  }
  85% {
    text-shadow: 0 0 1px #fff;
    opacity: 0.8;
    -webkit-transform: rotateY(0deg) translateZ(100px);
  }
  100% {
    text-shadow: 0 0 10px #fff;
    opacity: 1;
    -webkit-transform: translateZ(130px);
    pointer-events: none;
  }
}

@keyframes rubberBand-in {
  0% {
    -moz-transform: scale3d(0, 0, 0);
    transform: scale3d(0, 0, 0);
  }

  30% {
    -moz-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -moz-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -moz-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -moz-transform: scale3d(.95, 1.05, 1);
    transform: scale3d(.95, 1.05, 1);
  }

  75% {
    -moz-transform: scale3d(1.05, .95, 1);
    transform: scale3d(1.05, .95, 1);
  }

  100% {
    -moz-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@-webkit-keyframes rubberBand-in {
  0% {
    -webkit-transform: scale3d(0, 0, 0);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, .95, 1);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
  }
}

@keyframes slideLeftFast-out {
  20% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
  }

  100% {
    opacity: 0;
    transform: translate3d(-2000px, 0, 0);
    -moz-transform: translate3d(-2000px, 0, 0);
  }
}

@-webkit-keyframes slideLeftFast-out {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
  }
}

@keyframes flip-in {
  0% {
    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    -moz-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
  }

  40% {
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -moz-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
  }

  50% {
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -moz-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
  }

  80% {
    transform: perspective(400px) scale3d(.95, .95, .95);
    -moz-transform: perspective(400px) scale3d(.95, .95, .95);
    animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
  }

  100% {
    transform: perspective(400px);
    animation-timing-function: ease-in;
  }
}

@-webkit-keyframes flip-in {
  0% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
    -webkit-animation-timing-function: ease-in;
  }

  100% {
    -webkit-transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
  }
}

@keyframes hinge {
  0% {
    -moz-transform-origin: top left;
    transform-origin: top left;
    -moz-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%, 60% {
    -moz-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -moz-transform-origin: top left;
    transform-origin: top left;
    -moz-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40%, 80% {
    -moz-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -moz-transform-origin: top left;
    transform-origin: top left;
    -moz-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  100% {
    -moz-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

@-webkit-keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
  }

  20%, 60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
  }

  40%, 80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    opacity: 1;
  }

  100% {
    -webkit-transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

@keyframes zoomOutUp {
  40% {
    opacity: 1;
    -moz-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    -moz-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  100% {
    opacity: 0;
    -moz-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
    -moz-transform-origin: center bottom;
    transform-origin: center bottom;
    -moz-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@-webkit-keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes roll-in{
  0%{
    opacity:0;
    transform: rotate(0deg) translateX(100px);
    -moz-transform: rotate(0deg) translateX(100px);

  }

  100%{
    opacity:1;
    transform: rotate(720deg) translateX(0px);
    -moz-transform: rotate(720deg) translateX(0px);

  }
}

@-webkit-keyframes roll-in{
  0%{
    opacity:0;
    -webkit-transform: rotate(0deg) translateX(100px);

  }

  100%{
    opacity:1;
    -webkit-transform: rotate(720deg) translateX(0px);

  }
}

@keyframes rolling-in{
  0%{
    opacity:0;
    transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    margin-left: 100px;
  }

  100%{
    opacity:1;
    transform: rotate(-720deg);
    -moz-transform: rotate(-720deg);
    margin-left: 0;

  }
}

@-webkit-keyframes rolling-in{
  0%{
    opacity:0;
    -webkit-transform: rotate(0deg);
    margin-left: 100px;
  }

  100%{
    opacity:1;
    -webkit-transform: rotate(-720deg);
    margin-left: 0;

  }
}

.word_effect .in.rolling-in{
  animation: rolling-in 2s;
  -webkit-animation: rolling-in 2s;
  -moz-animation: rolling-in 2s;

}


.word_effect .in.roll-in{
  animation: roll-in 2s;
  -webkit-animation: roll-in 2s;
  -moz-animation: roll-in 2s;
}

.word_effect .out.zoomOutUp{
  animation: zoomOutUp 2s;
  -webkit-animation: zoomOutUp 2s;
  -moz-animation: zoomOutUp 2s;
}

.word_effect .out.hinge{
  animation: hinge 0.5s;
  -webkit-animation: hinge 0.5s;
  -moz-animation: hinge 0.5s;
}

.word_effect .in.flip-in{
  backface-visibility: visible;
  animation: flip-in 2s;
  -webkit-animation: flip-in 2s;
  -moz-animation: flip-in 2s;
}


.word_effect .out.slideLeftFast-out{
  animation: slideLeftFast-out 2s;
  -webkit-animation: slideLeftFast-out 2s;
  -moz-animation: slideLeftFast-out 2s;
}


.word_effect .in.rubberBand-in{
  animation: rubberBand-in 2s;
  -webkit-animation: rubberBand-in 2s;
  -moz-animation: rubberBand-in 2s;
}

.word_effect .in.slide-in-right-to-left{
  animation: slide-in-right-to-left 3s;
  -webkit-animation: slide-in-right-to-left 3s;
  -moz-animation: slide-in-right-to-left 3s;
}


.word_effect .in.fadeInRotate{
  animation: fadeInRotate 2s;
  -webkit-animation: fadeInRotate 2s;
  -moz-animation: fadeInRotate 2s;
}

.word_effect .out.fadeOutRotate{
  animation: fadeOutRotate 2s;
  -webkit-animation: fadeOutRotate 2s;
  -moz-animation: fadeOutRotate 2s;
}

.word_effect .in.slide-zoom-in {
  animation: slide-zoom-in 2s;
  -webkit-animation: slide-zoom-in 2s;
  -moz-animation: slide-zoom-in 2s;
}

.word_effect .out.slide-zoom-out {
  animation: slide-zoom-out 2s;
  -webkit-animation: slide-zoom-out 2s;
  -moz-animation: slide-zoom-out 2s;
}

.word_effect .in.rotateYIn {
  animation: rotateYIn 2s;
  -webkit-animation: rotateYIn 2s;
  -moz-animation: rotateYIn 2s;
}

.word_effect .out.rotateYOut {
  animation: rotateYOut 2s;
  -webkit-animation: rotateYOut 2s;
  -moz-animation: rotateYOut 2s;
}

.word_effect .in.rotateXIn {
  animation: rotateXIn 2s;
  -webkit-animation: rotateXIn 2s;
  -moz-animation: rotateXIn 2s;
}

.word_effect .out.rotateXOut {
  animation: rotateXOut 2s;
  -webkit-animation: rotateXOut 2s;
  -moz-animation: rotateXOut 2s;
}

.word_effect .in.rotateZIn {
  animation: rotateZIn 2s;
  -webkit-animation: rotateZIn 2s;
  -moz-animation: rotateZIn 2s;
}

.word_effect .out.rotateZOut {
  animation: rotateXOut 2s;
  -webkit-animation: rotateXOut 2s;
  -moz-animation: rotateXOut 2s;
}

.word_effect .in.slide-in {
  animation: slide-in 1s;
  -webkit-animation: slide-in 1s;
  -moz-animation: slide-in 1s;
}

.word_effect .out.slide-out {
  animation: slide-out 1s;
  -webkit-animation: slide-out 1s;
  -moz-animation: slide-out 1s;
}