.cz_title {
position: relative;
z-index: 1
}
.cz_title_has_bg {
z-index: 2
}
.cz_title.tac .cz_title_content {
margin-right: auto;
margin-left: auto
}
.cz_title_vertical > div, 
.cz_title_vertical_2 > div {
position: absolute;
top: -80px;
left: 0;
z-index: 2;
white-space: nowrap;
transform: rotate(90deg);
transform-origin: bottom left;
animation: none !important
}
.cz_title_vertical_2 > div {
top: -40px;
left: 0;
transform-origin: 0 0;
transform: rotate(-90deg) translateX(-100%)
}
.cz_title_vertical.cz_title_vertical_outside > div {
top: 0;
left: 0;
transform-origin: 0 0;
transform: rotate(90deg) translate(0, 40%)
}
.cz_title_vertical_2.cz_title_vertical_outside > div {
transform: rotate(-90deg) translate(-100%, -140%)
}
.cz_title_content {
display: table;
position: relative;
word-break: break-word;
transition: all .2s ease-in-out
}
.cz_title_pos_block .cz_title_content,
.cz_title_pos_block .cz_title_content > div {
width: 100%;
display: block
}
.cz_title_pos_left .cz_title_content {
float: left
}
.cz_title_pos_center:not(.cz_title_has_icon) .cz_title_content > div {
display: block
}
.cz_title_pos_right .cz_title_content {
float: right
}
.cz_title_content > div {
position: relative;
z-index: 2;
vertical-align: middle
}
.cz_title_content > * {
display: table-cell
}
.cz_title_has_bg .cz_title_content {
padding: 10px 30px
}
.cz_title_has_icon .cz_title_content {
padding: 10px 0
}
.cz_title_content * {
margin: 0
}
.cz_title_content hr {
display: block;
margin: 10px 0
}
.cz_title_content > span {
margin: 0 15px 0 0;
position: relative;
font-size: 20px;
transition: all .2s ease-in-out
}
.cz_title_pos_block .cz_title_content > span {
margin-right: 0 !important;
margin-left: 0 !important
}
.cz_title_content > i {
font-size: 2em;
margin: 0;
text-align: center;
width: 2em;
height: 2em;
line-height: 2em;
display: inline-block;
vertical-align: sub;
box-sizing: content-box;
transition: all .2s ease-in-out
}
.cz_title_content > i:before,
.cz_title_content > i span,
.cz_title_content .cz_title_image {
display: inline-block
}
.cz_title_content .cz_title_image {
overflow: hidden;
max-width: 120px
}
.cz_title_image img {
width: inherit
}
.cz_title_number {
font-style: normal
}
.cz_title_shape {
position: absolute;
left: 0;
top: 0;
font-size: 140px;
font-weight: 900;
width: 100%;
line-height: 1;
pointer-events: none;
transform-origin: 0;
z-index: 1;
word-wrap: initial;
transition: all .2s ease-in-out
}
.shape_square, .shape_circle, 
.shape_rectangle, .shape_rhombus, 
.shape_rhombus_radius {
background: #404040;
width: 150px;
height: 150px
}
.shape_circle {
border-radius: 100%
}
.shape_rhombus, .shape_rhombus_radius {
display: inline-block;
transform: rotate(45deg)
}
.shape_rhombus_radius {
border-radius: 20%
}
.shape_rectangle {
transform: scaleX(2)
}
.cz_title_shape_outline {
background: none;
border: 10px solid
}
.cz_title_line {
width: 100%;
height: 4px;
display: block;
margin: 0 0 20px
}
.cz_title_line span {
font-size: 0;
height: 100%;
display: inline-block;
position: relative;
top: -20px;
background: #a7a7a7;
width: 60px
}
.cz_line_after_title,
.cz_line_before_title {
position: relative
}
.cz_title_content .cz_line_side_solo {
font-size: 0;
height: 4px;
width: 50px;
display: inline-block;
vertical-align: bottom;
margin: 0 20px 0 0;
background: rgba(167, 167, 167, .4)
}
.cz_title.tac .cz_title_shape,
.tac.cz_title_shape {
left: 50%;
transform: translate(-50%,-50%)
}
.cz_title.tac .cz_title_shape.tal,
.cz_title.tac .cz_title_shape.tar {
transform: none
}
.cz_title.tac .shape_rectangle {
transform: scaleX(2) translate(-50%,-50%)
}
.cz_title.tac .shape_rhombus, 
.cz_title.tac .shape_rhombus_radius {
transform: rotate(45deg) translate(-50%,-50%)
}
.cz_title .cz_title_shape.tal {
left: 0
}
.cz_title .cz_title_shape.tar {
left: auto;
right: 0
}
.cz_title_ba_line .cz_title_content {
display: inline-block
}
.shape_image {
width: auto
}
.cz_title_content .cz_line_side_after {
margin: 0 0 0 20px
}
.cz_title .xtra-placeholder {
max-width: 100px
}
.cz_title_pos_center .cz_title_content {
float: none;
margin: 0 auto;
display: table
}
[class*="codevz-fancy-"] {
overflow: hidden
}
[class*="codevz-fancy-"] .cz_wpe_content > * > span {
display: inline-block;
position: relative;
transform: translateY(130%)
}
[class*="codevz-fancy-"] .codevz-start-fancy {
animation: fancyFX .8s ease-out forwards
}
@keyframes fancyFX {
0% {transform: translateY(130%)}
100% {transform: translateY(0)}
}
.elementor-element .cz_title_content .cz_line_side_solo {
vertical-align: middle
}
.elementor-element .cz_title_content .cz_title_image {
box-sizing: content-box
}.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%)}
}.progress_bar {
position: relative;
width: 100%;
height: 6px;
margin: 50px 0 0;
line-height: 26px;
background-color: rgba(167, 167, 167, .2)
}
.progress_bar span {
position: absolute;
height: 100%;
bottom: 0;
left: 0;
border-radius: inherit;
background-color: #111;
overflow: visible !important;
transition: width 1.5s ease-in-out
}
.stripes span:before {
content: '';
height: 100%;
width: 100%;
position: absolute;
background-size: 30px 30px;			
background-image: linear-gradient(to right bottom, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
transform: translateZ(0);
animation: animateStripes 3s linear infinite
}
@keyframes animateStripes {
0% {background-position: 0 0}
100% {background-position: 60px 0}
}
.progress_bar b {
position: absolute;
right: 0;
top: -28px;
display: none;
font-size: 3em;
font-weight: bold
}
.pbar2 b {
font-size: 14px;
background: #111;
color: #fff;
opacity: 1;
padding: 2px 8px;
font-weight: normal;
z-index: 1;
top: calc(50% - 15px);
right: -20px;
border-radius: 2px
}
.pbar3 b {
top: -34px;
font-size: 20px
}
.progress_bar p {
position: absolute;
font-size: 1.4em;
top: -34px;
left: 0
}
.cz_progress_bar_icon {
position: relative;
display: inline-block
}
.cz_progress_bar_icon i {
display: inline;
margin: 0 8px 0 0
}
.cz_progress_bar_icon > div {
position: absolute;
overflow: hidden;
height: 100%;
width: 0;
top: 0;
left: 0;
transition: all .8s ease-in-out
}
.cz_progress_bar_icon > div div {
position: absolute;
width: 500%
}
@media screen and (max-width:768px) {
.progress_bar b {
display: block
}
}