.cz_words-wrapper {
display: inline-block;
position: relative;
text-align: left;
margin:0 10px
}
.cz_words-wrapper b {
display: inline-block;
position: absolute;
white-space: nowrap;
left: 0;
top: 0;
font-weight: inherit
}
.cz_words-wrapper b.is-visible {
position: static
}
.no-js .cz_words-wrapper b {opacity: 0}
.no-js .cz_words-wrapper b.is-visible {opacity: 1}
.cz_headline b {
width: 100%;
text-align: center
}
.cz_headline.rotate-1 .cz_words-wrapper {
perspective: 300px
}
.cz_headline.rotate-1 b {
opacity: 0;
transform-origin: 50% 100%;
transform: rotateX(180deg)
}
.cz_headline.rotate-1 b.is-visible {
opacity: 1;
transform: rotateX(0deg) translateZ(0);
animation: cz_rotate-1-in 1.2s forwards
}
.cz_headline.rotate-1 b.is-hidden {
transform: rotateX(180deg) translateZ(0);
animation: cz_rotate-1-out 1.2s forwards
}
@keyframes cz_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 cz_rotate-1-out {
0% {transform: rotateX(0deg);opacity: 1}
35% {transform: rotateX(-40deg);opacity: 1}
65% {opacity: 0}
100% {transform: rotateX(180deg);opacity: 0}
}
.cz_headline.type .cz_words-wrapper {
vertical-align: top;
overflow: hidden
}
.cz_headline.type .cz_words-wrapper:after {
content: '';
position: absolute;
right: 0;
top: 50%;
bottom: auto;
transform: translateY(-50%);
height: 90%;
width: 1px;
background-color: #aebcb9
}
.rtl .cz_headline.type .cz_words-wrapper:after {
left: 0;
right: auto
}
.cz_headline.type .cz_words-wrapper.waiting:after {
transform: translateZ(0);
animation: cz_pulse 1s infinite
}
.cz_headline.type .cz_words-wrapper.selected {
background-color: #333
}
.cz_headline.type .cz_words-wrapper.selected:after {
visibility: hidden
}
.cz_headline.type .cz_words-wrapper.selected b {
color: #eee
}
.cz_headline.type b {
visibility: hidden;
width: auto
}
.cz_headline.type b.is-visible {
visibility: visible
}
.cz_headline.type i {
position: absolute;
visibility: hidden;
font-style: normal
}
.cz_headline.type i.in {
position: relative;
visibility: visible
}
@keyframes cz_pulse {
0% {transform: translateY(-50%) scale(1);opacity: 1}
40% {transform: translateY(-50%) scale(.9);opacity: 0}
100% {transform: translateY(-50%) scale(0);opacity: 0}
}
.cz_headline.rotate-2 .cz_words-wrapper {
perspective: 300px
}
.cz_headline.rotate-2 i, .cz_headline.rotate-2 em {
display: inline-block;
-webkit-backface-visibility: hidden;
backface-visibility: hidden
}
.cz_headline.rotate-2 b {
opacity: 0
}
.cz_headline.rotate-2 i {
transform-style: preserve-3d;
transform: translateZ(-20px) rotateX(90deg);
opacity: 0;
font-style: normal
}
.is-visible .cz_headline.rotate-2 i {
opacity: 1
}
.cz_headline.rotate-2 i.in {
animation: cz_rotate-2-in .4s forwards
}
.cz_headline.rotate-2 i.out {
animation: cz_rotate-2-out .4s forwards
}
.cz_headline.rotate-2 em {
transform: translateZ(20px);
font-style: normal;
font-weight: normal
}
.no-csstransitions .cz_headline.rotate-2 i {
transform: rotateX(0deg);
opacity: 0
}
.no-csstransitions .cz_headline.rotate-2 i em {
transform: scale(1)
}
.no-csstransitions .cz_headline.rotate-2 .is-visible i {
opacity: 1
}
@keyframes cz_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 cz_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)}
}
.cz_headline.loading-bar span {
display: inline-block;
padding: .2em 0
}
.cz_headline.loading-bar .cz_words-wrapper {
overflow: hidden;
vertical-align: top
}
.cz_headline.loading-bar .cz_words-wrapper:after {
content: '';
position: absolute;
left: 0;
bottom: 10px;
height: 2px;
width: 0;
background: rgba(125,125,125,.5);
z-index: 2;
transition: width .3s -0.1s
}
.cz_headline.loading-bar .cz_words-wrapper.is-loading:after {
width: 100%;
transition: width 3s
}
.cz_headline.loading-bar b {
top: .2em;
opacity: 0;
transition: opacity .3s
}
.cz_headline.loading-bar b.is-visible {
opacity: 1;
top: 0
}
.cz_headline.slide span {
display: inline-block;
padding: .2em 0
}
.cz_headline.slide .cz_words-wrapper {
overflow: hidden;
vertical-align: top
}
.cz_headline.slide b {
opacity: 0;
top: .2em
}
.cz_headline.slide b.is-visible {
top: 0;
opacity: 1;
animation: slide-in .6s forwards
}
.cz_headline.slide b.is-hidden {
animation: slide-out .6s forwards
}
@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%)}
}
.cz_headline.clip span {
display: inline-block;
padding: .2em 0
}
.cz_headline.clip .cz_words-wrapper {
overflow: hidden;
vertical-align: top
}
.cz_headline.clip .cz_words-wrapper:after {
content: '';
position: absolute;
top: 20%;
right: 0;
width: 0;
height: 60%;
background-color: rgba(125,125,125,.7)
}
.cz_headline.clip b {
opacity: 0;
width: auto
}
.cz_headline.clip b.is-visible {
opacity: 1
}
.cz_headline.zoom .cz_words-wrapper {perspective: 300px}
.cz_headline.zoom b {opacity: 0}
.cz_headline.zoom b.is-visible {opacity: 1;animation: zoom-in .8s forwards}
.cz_headline.zoom b.is-hidden {animation: zoom-out .8s forwards}
@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)}
}
.cz_headline.rotate-3 .cz_words-wrapper {
perspective: 300px
}
.cz_headline.rotate-3 b {
opacity: 0
}
.cz_headline.rotate-3 i {
display: inline-block;
transform: rotateY(180deg);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
font-style: normal
}
.is-visible .cz_headline.rotate-3 i {
transform: rotateY(0deg)
}
.cz_headline.rotate-3 i.in {
animation: cz_rotate-3-in .6s forwards
}
.cz_headline.rotate-3 i.out {
animation: cz_rotate-3-out .6s forwards
}
.no-csstransitions .cz_headline.rotate-3 i {
transform: rotateY(0deg);
opacity: 0
}
.no-csstransitions .cz_headline.rotate-3 .is-visible i {
opacity: 1
}
@keyframes cz_rotate-3-in {
0% {transform: rotateY(180deg)}
100% {transform: rotateY(0deg)}
}
@keyframes cz_rotate-3-out {
0% {transform: rotateY(0)}
100% {transform: rotateY(-180deg)}
}
.cz_headline.scale b {
opacity: 0
}
.cz_headline.scale i {
display: inline-block;
opacity: 0;
transform: scale(0);
font-style: normal
}
.is-visible .cz_headline.scale i {
opacity: 1
}
.cz_headline.scale i.in {
animation: scale-up .6s forwards
}
.cz_headline.scale i.out {
animation: scale-down .6s forwards
}
.no-csstransitions .cz_headline.scale i {
transform: scale(1);
opacity: 0
}
.no-csstransitions .cz_headline.scale .is-visible 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}
}
.cz_headline.push b {
opacity: 0
}
.cz_headline.push b.is-visible {
opacity: 1;
animation: push-in .6s forwards
}
.cz_headline.push b.is-hidden {
animation: push-out .6s forwards
}
@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%)}
}