.cz_popup_modal .cz_overlay {
z-index: 1
}
.cz_show_popup .cz_overlay {
display: block
}
.cz_popup_modal, 
.compose-mode .vc_element.vc_cz_popup {
display: none;
z-index: 99999999;
position: fixed !important;
width: 100%;
height: 100%;
left: 0;
top: 0
}
.cz_popup_in {
position: fixed;
top: 50%;
left: 50%;
width: 500px;
min-width: 300px;
min-height: 30px;
max-height: 88%;
padding: 40px;
z-index: 2;
color: #111;
overflow: auto;
background: #fff;
transform-origin: center;
animation: CubicInPopup .4s cubic-bezier(.180, .890, .330, 1.270) forwards
}
@keyframes CubicInPopup {
from {transform: translate(-50%, -50%) scale(0.95)}
to {transform: translate(-50%, -50%) scale(1)}
}
.vc_element.vc_cz_popup {
overflow: visible !important
}
.cz_close_popup {
position: absolute;
top: 70px;
right: 70px;
margin: 0;
color: #fff;
font-size: 24px;
cursor: pointer;
z-index: 9;
width: 2em;
height: 2em;
line-height: 2em !important;
text-align: center;
border-radius: 50px;
mix-blend-mode: difference;
transform-origin: center center;
transition: all .3s ease-in-out
}
.cz_close_popup:hover {
transform: rotate(180deg)
}
.rtl .cz_close_popup {
left: 70px;
right: auto
}
.xtra-popup {
cursor: pointer
}
@media screen and (max-width:480px) {
.cz_popup_in {
max-height: 85%!important;
max-width: 90%!important;
min-width: 0;
animation: none;
box-sizing: border-box;
left: 5%;
transform: translate(0, -50%)
}
.cz_close_popup {
position: absolute;
top: 20px;
right: 20px;
font-size: 16px
}
}.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%)}
}