.codevz-menus-opacity .sf-menu:hover > .cz > a,
.codevz-menus-opacity .sf-menu ul:hover > .cz > a {
opacity: .5
}
.codevz-menus-opacity .sf-menu > .cz:hover > a,
.codevz-menus-opacity .sf-menu ul > .cz:hover > a {
opacity: 1
}
[class*="cz_menus_hover_effect_"] .sf-menu > .cz > a > span {
position: relative;
display: inline-block;
transform-style: preserve-3d;
backface-visibility: hidden;
transform: rotateX(0);
transform-origin: center center -0.55em;
transition: transform .6s cubic-bezier(0.9, 0.05, 0.1, 1), 
opacity .6s cubic-bezier(0.9, 0.05, 0.1, 1)
}
[class*="cz_menus_hover_effect_"] .sf-menu > .cz > a:after {
all: inherit;
content: attr(data-title);
position: absolute;
top: 0;
left: 0;
right: auto;
margin: 0;
opacity: 0;
border: 0;
white-space: nowrap;
visibility: visible;
backface-visibility: hidden;
width: 100%;
box-sizing: border-box;
transform-origin: center center -0.55em;
transition: transform .6s cubic-bezier(0.9, 0.05, 0.1, 1), 
opacity .6s cubic-bezier(0.9, 0.05, 0.1, 1)
} [class*="cz_menus_hover_effect_"] .sf-menu > .cz:hover > a[data-title=""] > span {
opacity: 1 !important;
transform: none !important
}
[class*="cz_menus_hover_effect_"] .active_offcanvas > .cz > a:after {
border: 0 !important;
background: none !important
}
.cz_menus_hover_effect_1 .sf-menu > .cz > a:after {
transform: rotateX(-120deg)
}
.cz_menus_hover_effect_1 .sf-menu > .cz:hover > a > span {
transform: rotateX(120deg);
opacity: 0;
}
.cz_menus_hover_effect_2 .sf-menu > .cz > a:after {
transform: rotateX(120deg)
}
.cz_menus_hover_effect_2 .sf-menu > .cz:hover > a > span {
transform: rotateX(-120deg);
opacity: 0;
}
.cz_menus_hover_effect_1 .sf-menu > .cz:hover > a:after,
.cz_menus_hover_effect_2 .sf-menu > .cz:hover > a:after {
transform: rotateX(0);
opacity: 1
}
.cz_menus_hover_effect_3 .sf-menu > .cz > a:after {
transform: rotateY(-180deg)
}
.cz_menus_hover_effect_3 .sf-menu > .cz:hover > a > span {
transform: rotateY(180deg);
opacity: 0;
}
.cz_menus_hover_effect_4 .sf-menu > .cz > a:after {
transform: rotateY(180deg)
}
.cz_menus_hover_effect_4 .sf-menu > .cz:hover > a > span {
transform: rotateY(-180deg);
opacity: 0;
}
.cz_menus_hover_effect_3 .sf-menu > .cz:hover > a:after,
.cz_menus_hover_effect_4 .sf-menu > .cz:hover > a:after {
transform: rotateY(0);
opacity: 1
}
.cz_menus_hover_effect_5 .sf-menu > .cz > a:after {
transform: rotateZ(-45deg)
}
.cz_menus_hover_effect_5 .sf-menu > .cz:hover > a > span {
transform: rotateZ(45deg);
opacity: 0;
}
.cz_menus_hover_effect_5 .sf-menu > .cz:hover > a:after {
transform: rotateZ(0);
opacity: 1;
}
.cz_menus_hover_effect_6 .sf-menu > .cz > a:after {
transform: rotateX(-90deg) rotateY(-10deg)
}
.cz_menus_hover_effect_6 .sf-menu > .cz:hover > a > span {
transform: rotateX(90deg) rotateY(10deg);
opacity: 0
}
.cz_menus_hover_effect_6 .sf-menu > .cz:hover > a:after {
transform: rotateX(0) rotateY(0);
opacity: 1
}
.cz_menus_hover_effect_7 .sf-menu > .cz > a:after {
transform: scale(0)
}
.cz_menus_hover_effect_7 .sf-menu > .cz:hover > a > span {
transform: scale(2);
opacity: 0
}
.cz_menus_hover_effect_7 .sf-menu > .cz:hover > a:after {
transform: scale(1);
opacity: 1
}
.cz_menus_hover_effect_8 .sf-menu > .cz > a:after {
transform: scale(2)
}
.cz_menus_hover_effect_8 .sf-menu > .cz:hover > a > span {
transform: scale(0);
opacity: 0
}
.cz_menus_hover_effect_8 .sf-menu > .cz:hover > a:after {
transform: scale(1);
opacity: 1
}
.cz_menus_hover_effect_9 .sf-menu > .cz:hover > a {
color: white;
text-shadow:
0 0 5px #ff4b2b,
1px 0 5px #ff4b2b,
2px 0 5px #ff4b2b,
3px 0 5px #ff4b2b,
4px 0 5px #ff4b2b;
animation: Codevz_Flicker 0.5s steps(5) infinite alternate;
}
@keyframes Codevz_Flicker {
0% { text-shadow: 0 0 5px #ff4b2b; }
20% { text-shadow: 1px 0 5px #ff4b2b; }
40% { text-shadow: 2px 0 5px #ff4b2b; }
60% { text-shadow: 3px 0 5px #ff4b2b; }
80% { text-shadow: 4px 0 5px #ff4b2b; }
100% { text-shadow: 0 0 5px #ff4b2b; }
}
.cz_menus_hover_effect_10 .sf-menu > .cz:hover > a {
color: #fff;
animation: tvFlicker 0.2s infinite alternate;
}
@keyframes tvFlicker {
0% { opacity: 0.8; filter: blur(0px); }
50% { opacity: 1; filter: blur(1px); }
100% { opacity: 0.7; filter: blur(2px); }
} .cz_menus_dropdown_effect_1 .sf-menu .sub-menu {animation: MenuMoveUp .4s cubic-bezier(0.9, 0.05, 0.1, 1)}
@keyframes MenuMoveUp {0% {opacity:0;transform: translateY(20px)}100% {opacity:1;transform: translateY(0)}}
.cz_menus_dropdown_effect_2 .sf-menu .sub-menu {animation: MenuMoveDown .4s cubic-bezier(0.9, 0.05, 0.1, 1)}
@keyframes MenuMoveDown {0% {opacity:0;transform: translateY(-20px)}100% {opacity:1;transform: translateY(0)}}
.cz_menus_dropdown_effect_3 .sf-menu .sub-menu {animation: MenuMoveLeft .4s cubic-bezier(0.9, 0.05, 0.1, 1)}
@keyframes MenuMoveLeft {0% {opacity:0;transform: translateX(15px)}100% {opacity:1;transform: translateY(0)}}
.cz_menus_dropdown_effect_4 .sf-menu .sub-menu {animation: MenuMoveRight .4s cubic-bezier(0.9, 0.05, 0.1, 1)}
@keyframes MenuMoveRight {0% {opacity:0;transform: translateX(-15px)}100% {opacity:1;transform: translateY(0)}}
.cz_menus_dropdown_effect_5 .sf-menu .sub-menu {animation: MenuZoomIn .4s cubic-bezier(0.9, 0.05, 0.1, 1)}
@keyframes MenuZoomIn {0% {opacity:0;transform: scale(.8)}100% {opacity:1;transform: scale(1)}}
.cz_menus_dropdown_effect_6 .sf-menu .sub-menu {animation: MenuZoomOut .4s cubic-bezier(0.9, 0.05, 0.1, 1)}
@keyframes MenuZoomOut {0% {opacity:0;transform: scale(1.2)}100% {opacity:1;transform: scale(1)}}
.cz_menus_dropdown_effect_7 .sf-menu .sub-menu {animation: MenuRotateA .5s cubic-bezier(0.9, 0.05, 0.1, 1)}
@keyframes MenuRotateA {0% {opacity:0;transform: rotate(8deg)}100% {opacity:1;transform: rotate(0)}}
.cz_menus_dropdown_effect_8 .sf-menu .sub-menu {animation: MenuRotateB .5s cubic-bezier(0.9, 0.05, 0.1, 1)}
@keyframes MenuRotateB {0% {opacity:0;transform: rotate(-8deg)}100% {opacity:1;transform: rotate(0)}}
.cz_menus_dropdown_effect_9 .sf-menu .cz {transform-style: preserve-3d;perspective: 100px;z-index: 1}
.cz_menus_dropdown_effect_9 .sf-menu .sub-menu {transform-origin: top;animation: MenuRotateC .5s cubic-bezier(0.9, 0.05, 0.1, 1)}
@keyframes MenuRotateC {0% {opacity:0;transform: rotateX(-15deg)}100% {opacity:1;transform: rotateX(0)}}
.cz_menus_dropdown_effect_10 .sf-menu .cz {transform-style: preserve-3d;perspective: 100px;z-index: 1}
.cz_menus_dropdown_effect_10 .sf-menu .sub-menu {transform-origin: right;animation: MenuRotateR .5s cubic-bezier(0.9, 0.05, 0.1, 1)}
@keyframes MenuRotateR {0% {opacity:0;transform: rotateY(-15deg)}100% {opacity:1;transform: rotateY(0)}}
.cz_menus_dropdown_effect_11 .sf-menu .cz {transform-style: preserve-3d;perspective: 100px;z-index: 1}
.cz_menus_dropdown_effect_11 .sf-menu .sub-menu {transform-origin: left;animation: MenuRotateD .5s cubic-bezier(0.9, 0.05, 0.1, 1)}
@keyframes MenuRotateD {0% {opacity:0;transform: rotateY(15deg)}100% {opacity:1;transform: rotateY(0)}}
.cz_menus_dropdown_effect_14 .sf-menu .sub-menu {animation: MenuBlur .6s cubic-bezier(0.9, 0.05, 0.1, 1)}
@keyframes MenuBlur {0% {opacity:0;filter: blur(10px)}100% {opacity:1;filter: blur(0px)}}
.cz_menus_dropdown_effect_15 .sf-menu .sub-menu {animation: MenuCollapse .5s cubic-bezier(0.9, 0.05, 0.1, 1)}
@keyframes MenuCollapse {0% {clip-path: inset(-20% -20% 100% -20%);}100% {clip-path: inset(-20% -20% -20% -20%);}}
.cz_menus_dropdown_effect_16 .sf-menu .sub-menu {animation: MenuCircleExpand 1s ease}
@keyframes MenuCircleExpand {0% {clip-path: circle(0% at 50% 0%);}100% {clip-path: circle(150% at 50% 0%);}}
.cz_menus_dropdown_effect_17 .sf-menu .sub-menu {animation: ClipCollapseTop 0.5s ease}
@keyframes ClipCollapseTop {0% {clip-path: inset(100% 0 0 0)}100% {clip-path: inset(0 0 0 0)}}
.cz_menus_dropdown_effect_18 .sf-menu .sub-menu {animation: ClipCirclePop 1s ease}
@keyframes ClipCirclePop {0% {clip-path: circle(0% at 50% 50%)}100% {clip-path: circle(150% at 50% 50%)}}
.cz_menus_dropdown_effect_19 .sf-menu .sub-menu {animation: ClipRevealLeft 0.5s ease}
@keyframes ClipRevealLeft {0% {clip-path: inset(0 100% 0 0)}100% {clip-path: inset(0 0 0 0)}}
.cz_menus_dropdown_effect_20 .sf-menu .sub-menu {animation: ClipRevealRight 0.5s ease}
@keyframes ClipRevealRight {0% {clip-path: inset(0 0 0 100%)}100% {clip-path: inset(0 0 0 0)}} [class*="cz_menus_intro_effect_"] .sfHover ul > li, 
[class*="cz_menus_intro_effect_"] .active_offcanvas > li {
opacity: 0
}
.cz_menus_intro_effect_1 .sfHover ul > li,
.cz_menus_intro_effect_1 .active_offcanvas > li {
animation: Codevz_Blur_In .5s cubic-bezier(0.9, 0.05, 0.1, 1) forwards
}
@keyframes Codevz_Blur_In {
0% {opacity: 0;filter: blur(10px)}
100% {opacity: 1;filter: blur(0px)}
}
.cz_menus_intro_effect_2 .sfHover ul > li,
.cz_menus_intro_effect_2 .active_offcanvas > li {
animation: Codevz_Fade_In_Left .4s cubic-bezier(0.9, 0.05, 0.1, 1) forwards
}
@keyframes Codevz_Fade_In_Left {
0% {opacity: 0;transform: skewX(20deg) translateX(30px)}
100% {opacity: 1;transform: skewX(0) translateX(0)}
}
.cz_menus_intro_effect_3 .sfHover ul > li,
.cz_menus_intro_effect_3 .active_offcanvas > li {
animation: Codevz_Fade_In_Right .4s cubic-bezier(0.9, 0.05, 0.1, 1) forwards
}
@keyframes Codevz_Fade_In_Right {
0% {opacity: 0;transform: skewX(-20deg) translateX(-30px)}
100% {opacity: 1;transform: skewX(0) translateX(0)}
}
.cz_menus_intro_effect_4 .sfHover ul > li,
.cz_menus_intro_effect_4 .active_offcanvas > li {
animation: Codevz_Fade_In_Up .4s cubic-bezier(0.9, 0.05, 0.1, 1) forwards
}
@keyframes Codevz_Fade_In_Up {
0% {opacity: 0;transform: translateY(30px)}
100% {opacity: 1;transform: translateY(0)}
}
.cz_menus_intro_effect_5 .sfHover ul > li,
.cz_menus_intro_effect_5 .active_offcanvas > li {
animation: Codevz_Fade_In_Down .4s cubic-bezier(0.9, 0.05, 0.1, 1) forwards
}
@keyframes Codevz_Fade_In_Down {
0% {opacity: 0;transform: translateY(-30px)}
100% {opacity: 1;transform: translateY(0)}
}
.cz_menus_intro_effect_6 .sfHover ul > li,
.cz_menus_intro_effect_6 .active_offcanvas > li {
animation: Codevz_Zoom_In .5s cubic-bezier(0.9, 0.05, 0.1, 1) forwards
}
@keyframes Codevz_Zoom_In {
0% {opacity: 0;transform: scale(.85)}
100% {opacity: 1;transform: scale(1)}
}
.cz_menus_intro_effect_7 .sfHover ul > li,
.cz_menus_intro_effect_7 .active_offcanvas > li {
animation: Codevz_Zoom_Out .5s cubic-bezier(0.9, 0.05, 0.1, 1) forwards
}
@keyframes Codevz_Zoom_Out {
0% {opacity: 0;transform: scale(1.15)}
100% {opacity: 1;transform: scale(1)}
}
.cz_menus_intro_effect_8 .sfHover ul > li,
.cz_menus_intro_effect_8 .active_offcanvas > li {
animation: Codevz_Zoom_Rotate .4s cubic-bezier(0.9, 0.05, 0.1, 1) forwards;
}
@keyframes Codevz_Zoom_Rotate {
0% {opacity: 0;transform: scale(0.8) rotate(-15deg)}
100% {opacity: 1;transform: scale(1) rotate(0deg)}
}
.cz_menus_intro_effect_9 .sfHover ul > li,
.cz_menus_intro_effect_9 .active_offcanvas > li {
animation: Codevz_Blur_Rotate .6s cubic-bezier(0.9, 0.05, 0.1, 1) forwards;
}
@keyframes Codevz_Blur_Rotate {
0% {opacity: 0;filter: blur(10px);transform: rotate(-20deg)}
100% {opacity: 1;filter: blur(0px);transform: rotate(0deg)}
}
.sfHover ul > li:nth-child(1) {animation-delay: 50ms}
.sfHover ul > li:nth-child(2) {animation-delay: 100ms}
.sfHover ul > li:nth-child(3) {animation-delay: 150ms}
.sfHover ul > li:nth-child(4) {animation-delay: 200ms}
.sfHover ul > li:nth-child(5) {animation-delay: 250ms}
.sfHover ul > li:nth-child(6) {animation-delay: 300ms}
.sfHover ul > li:nth-child(7) {animation-delay: 350ms}
.sfHover ul > li:nth-child(8) {animation-delay: 400ms}
.sfHover ul > li:nth-child(9) {animation-delay: 450ms}
.sfHover ul > li:nth-child(10) {animation-delay: 500ms}
.sfHover ul > li:nth-child(11) {animation-delay: 550ms}
.sfHover ul > li:nth-child(12) {animation-delay: 600ms}
.sfHover ul > li:nth-child(13) {animation-delay: 650ms}
.sfHover ul > li:nth-child(14) {animation-delay: 700ms}
.sfHover ul > li:nth-child(15) {animation-delay: 750ms}
.sfHover ul > li:nth-child(16) {animation-delay: 800ms}
.sfHover ul > li:nth-child(17) {animation-delay: 850ms}
.sfHover ul > li:nth-child(18) {animation-delay: 900ms}
.sfHover ul > li:nth-child(19) {animation-delay: 950ms}
.sfHover ul > li:nth-child(20) {animation-delay: 1000ms}
.active_offcanvas > li:nth-child(1) {animation-delay: 550ms}
.active_offcanvas > li:nth-child(2) {animation-delay: 600ms}
.active_offcanvas > li:nth-child(3) {animation-delay: 650ms}
.active_offcanvas > li:nth-child(4) {animation-delay: 700ms}
.active_offcanvas > li:nth-child(5) {animation-delay: 750ms}
.active_offcanvas > li:nth-child(6) {animation-delay: 800ms}
.active_offcanvas > li:nth-child(7) {animation-delay: 850ms}
.active_offcanvas > li:nth-child(8) {animation-delay: 900ms}
.active_offcanvas > li:nth-child(9) {animation-delay: 950ms}
.active_offcanvas > li:nth-child(10) {animation-delay: 1000ms}
.active_offcanvas > li:nth-child(11) {animation-delay: 1050ms}
.active_offcanvas > li:nth-child(12) {animation-delay: 1100ms}
.active_offcanvas > li:nth-child(13) {animation-delay: 1150ms}
.active_offcanvas > li:nth-child(14) {animation-delay: 1200ms}
.active_offcanvas > li:nth-child(15) {animation-delay: 1250ms}
.active_offcanvas > li:nth-child(16) {animation-delay: 1300ms}
.active_offcanvas > li:nth-child(17) {animation-delay: 1350ms}
.active_offcanvas > li:nth-child(18) {animation-delay: 1400ms}
.active_offcanvas > li:nth-child(19) {animation-delay: 1450ms}
.active_offcanvas > li:nth-child(20) {animation-delay: 1500ms}.header_5,
.onSticky,
[class*='header_onthe_cover'] .page_header.onSticky {
position: fixed;
z-index: 999;
top: 0;
transform: translateY(-120%);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition: transform 400ms ease-in-out, padding 400ms ease-in-out !important
}
.onSticky,
[class*='header_onthe_cover'] .page_header.onSticky {
transform: none
}
.header_5 {
transform: translateY(-120%)
}
.smart_sticky_on,
[class*='header_onthe_cover'] .page_header.smart_sticky_on {
transform: translateY(-160%);
margin-top: 0;
top: 0
}
.show_on_sticky, .onSticky .hide_on_sticky {
visibility: hidden;
overflow: hidden;
opacity: 0;
width: 0;
height: 1px;
transition: all .4s ease-in-out
}
.onSticky .show_on_sticky, .hide_on_sticky {
visibility: visible;
width: auto;
height: auto;
opacity: 1
}
.onSticky .row {
transition: width .5s ease-in-out
}
.cz_sticky_h12 > div, 
.cz_sticky_h13 > div, 
.cz_sticky_h23 > div, 
.cz_sticky_h123 > div {
transition: none !important
}
.onSticky .sf-menu > .cz > a {
z-index: inherit
}
.onSticky .sf-menu {
z-index: 1
}.pageloader {
background: #000;
position: fixed;
top: 0;
left: 0;
z-index: 9999999;
height: 100%;
width: 100%;
display: block;
opacity: 1;
visibility: visible;
transition: all .3s ease-in-out
}
.pageloader > * {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: all .3s ease-in-out
}
.pageloader_percentage {
font-size: 100px;
color: #a7a7a7;
font-weight: 100
}
.pageloader_done {
opacity: 0;
visibility: hidden
}
.pageloader_left, .pageloader_right,
.pageloader_down, .pageloader_up,
.pageloader_circle, .pageloader_pa,
.pageloader_pb, .pageloader_pc,
.pageloader_pd, .pageloader_pe,
.pageloader_center_h, .pageloader_center_v {
opacity: 1;
visibility: visible;
clip-path: inset(0% 0% 0% 0%);
-webkit-clip-path: inset(0% 0% 0% 0%);
animation-duration: 650ms;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(.77, 0, .175, 1)
}
.pageloader_down.pageloader_click {
animation-name: loadingDown
}
@keyframes loadingDown {
0% {
clip-path: inset(0% 0% 100% 0%);
-webkit-clip-path: inset(0% 0% 100% 0%)
}
100% {
clip-path: inset(0% 0% 0% 0%);
-webkit-clip-path: inset(0% 0% 0% 0%)
}
}
.pageloader_down.pageloader_done {
animation-name: loadingDownDone
}
@keyframes loadingDownDone {
0% {
clip-path: inset(0% 0% 0% 0%);
-webkit-clip-path: inset(0% 0% 0% 0%)
}
100% {
clip-path: inset(100% 0% 0% 0%);
-webkit-clip-path: inset(100% 0% 0% 0%)
}
}
.pageloader_up.pageloader_click {
animation-name: loadingUp
}
@keyframes loadingUp {
0% {
clip-path: inset(100% 0% 0% 0%);
-webkit-clip-path: inset(100% 0% 0% 0%)
}
100% {
clip-path: inset(0% 0% 0% 0%);
-webkit-clip-path: inset(0% 0% 0% 0%)
}
}
.pageloader_up.pageloader_done {
animation-name: loadingUpDone
}
@keyframes loadingUpDone {
0% {
clip-path: inset(0% 0% 0% 0%);
-webkit-clip-path: inset(0% 0% 0% 0%)
}
100% {
clip-path: inset(0% 0% 100% 0%);
-webkit-clip-path: inset(0% 0% 100% 0%)
}
}
.pageloader_left.pageloader_click {
animation-name: loadingLeft
}
@keyframes loadingLeft {
0% {
clip-path: inset(0% 100% 0% 0%);
-webkit-clip-path: inset(0% 100% 0% 0%)
}
100% {
clip-path: inset(0% 0% 0% 0%);
-webkit-clip-path: inset(0% 0% 0% 0%)
}
}
.pageloader_left.pageloader_done {
animation-name: loadingLeftDone
}
@keyframes loadingLeftDone {
0% {
clip-path: inset(0% 0% 0% 0%);
-webkit-clip-path: inset(0% 0% 0% 0%)
}
100% {
clip-path: inset(0% 0% 0% 100%);
-webkit-clip-path: inset(0% 0% 0% 100%)
}
}
.pageloader_right.pageloader_click {
animation-name: loadingRight
}
@keyframes loadingRight {
0% {
clip-path:inset(0% 0% 0% 100%);
-webkit-clip-path:inset(0% 0% 0% 100%)
}
100% {
clip-path: inset(0% 0% 0% 0%);
-webkit-clip-path: inset(0% 0% 0% 0%)
}
}
.pageloader_right.pageloader_done {
animation-name: loadingRightDone
}
@keyframes loadingRightDone {
0% {
clip-path: inset(0% 0% 0% 0%);
-webkit-clip-path: inset(0% 0% 0% 0%)
}
100% {
clip-path: inset(0% 100% 0% 0%);
-webkit-clip-path: inset(0% 100% 0% 0%)
}
}
.pageloader_circle.pageloader_click {
animation-name: loadingCircle
}
@keyframes loadingCircle {
0% {
clip-path: circle(0%);
-webkit-clip-path: circle(0%)
}
100% {
clip-path: circle(100%);
-webkit-clip-path: circle(100%)
}
}
.pageloader_circle.pageloader_done {
animation-name: loadingCircleDone
}
@keyframes loadingCircleDone {
0% {
clip-path: circle(100%);
-webkit-clip-path: circle(100%)
}
100% {
clip-path:circle(0%);
-webkit-clip-path:circle(0%)
}
}
.pageloader_center_h, .pageloader_center_v {animation-duration: 800ms;animation-timing-function: cubic-bezier(.25,.1,.25,1)}
.pageloader_center_h.pageloader_done, .pageloader_center_v.pageloader_done {animation-duration: 1.5s}
.pageloader_center_h.pageloader_click {
animation-name: loadingCenter
}
@keyframes loadingCenter {
0% {
clip-path:inset(0 100% 0 100%);
-webkit-clip-path:inset(0 100% 0 100%)
}
100% {
clip-path: inset(0% 0% 0% 0%);
-webkit-clip-path: inset(0% 0% 0% 0%)
}
}
.pageloader_center_h.pageloader_done {
animation-name: loadingCenterDone
}
@keyframes loadingCenterDone {
0% {
clip-path: inset(0% 0% 0% 0%);
-webkit-clip-path: inset(0% 0% 0% 0%)
}
100% {
clip-path:inset(0 100% 0 100%);
-webkit-clip-path:inset(0 100% 0 100%)
}
}
.pageloader_center_v.pageloader_click {animation-name: loadingCenterV}
@keyframes loadingCenterV {
0% {
clip-path:inset(100% 0 100% 0);
-webkit-clip-path:inset(100% 0 100% 0)
}
100% {
clip-path: inset(0% 0% 0% 0%);
-webkit-clip-path: inset(0% 0% 0% 0%)
}
}
.pageloader_center_v.pageloader_done {animation-name: loadingCenterVDone}
@keyframes loadingCenterVDone {
0% {
clip-path: inset(0% 0% 0% 0%);
-webkit-clip-path: inset(0% 0% 0% 0%)
}
100% {
clip-path:inset(100% 0 100% 0);
-webkit-clip-path:inset(100% 0 100% 0)
}
}
.pageloader_pa.pageloader_click {animation-name: loadingPA}
@keyframes loadingPA {
0% {
clip-path:polygon(0 0, 100% 100%, 100% 100%, 0 0);
-webkit-clip-path:polygon(0 0, 100% 100%, 100% 100%, 0 0)
}
100% {
clip-path:polygon(0 0, 100% 0, 100% 100%, 0% 100%);
-webkit-clip-path:polygon(0 0, 100% 0, 100% 100%, 0% 100%)
}
}
.pageloader_pa.pageloader_done {animation-name: loadingPADone}
@keyframes loadingPADone {
0% {
clip-path:polygon(0 0, 100% 0, 100% 100%, 0% 100%);
-webkit-clip-path:polygon(0 0, 100% 0, 100% 100%, 0% 100%)
}
100% {
clip-path:polygon(0 0, 100% 100%, 100% 100%, 0 0);
-webkit-clip-path:polygon(0 0, 100% 100%, 100% 100%, 0 0)
}
}
.pageloader_pb.pageloader_click {animation-name: loadingPB}
@keyframes loadingPB {
0% {
clip-path:polygon(0 0, 100% 0, 0% 0%, 0% 100%);
-webkit-clip-path:polygon(0 0, 100% 0, 0% 0%, 0% 100%)
}
100% {
clip-path:polygon(0 0, 100% 0, 100% 100%, 0% 100%);
-webkit-clip-path:polygon(0 0, 100% 0, 100% 100%, 0% 100%)
}
}
.pageloader_pb.pageloader_done {animation-name: loadingPBDone}
@keyframes loadingPBDone {
0% {
clip-path:polygon(0 0, 100% 0, 100% 100%, 0% 100%);
-webkit-clip-path:polygon(0 0, 100% 0, 100% 100%, 0% 100%)
}
100% {
clip-path:polygon(100% 100%, 100% 0, 100% 100%, 0% 100%);
-webkit-clip-path:polygon(100% 100%, 100% 0, 100% 100%, 0% 100%)
}
}
.pageloader_pc.pageloader_click {animation-name: loadingPC}
@keyframes loadingPC {
0% {
clip-path:polygon(0 0, 100% 0, 51% 0, 49% 0);
-webkit-clip-path:polygon(0 0, 100% 0, 51% 0, 49% 0)
}
100% {
clip-path:polygon(0 0, 100% 0, 100% 100%, 0% 100%);
-webkit-clip-path:polygon(0 0, 100% 0, 100% 100%, 0% 100%)
}
}
.pageloader_pc.pageloader_done {animation-name: loadingPCDone}
@keyframes loadingPCDone {
0% {
clip-path:polygon(0 0, 100% 0, 100% 100%, 0% 100%);
-webkit-clip-path:polygon(0 0, 100% 0, 100% 100%, 0% 100%)
}
100% {
clip-path:polygon(49% 100%, 51% 100%, 100% 100%, 0% 100%);
-webkit-clip-path:polygon(49% 100%, 51% 100%, 100% 100%, 0% 100%)
}
}
.pageloader_pd.pageloader_click {animation-name: loadingPD}
@keyframes loadingPD {
0% {
clip-path:polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
-webkit-clip-path:polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%)
}
100% {
clip-path:polygon(0 0, 100% 0, 100% 100%, 0% 100%);
-webkit-clip-path:polygon(0 0, 100% 0, 100% 100%, 0% 100%)
}
}
.pageloader_pd.pageloader_done {animation-name: loadingPDDone}
@keyframes loadingPDDone {
0% {
clip-path:polygon(0 0, 100% 0, 100% 100%, 0% 100%);
-webkit-clip-path:polygon(0 0, 100% 0, 100% 100%, 0% 100%)
}
100% {
clip-path:polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
-webkit-clip-path:polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%)
}
}
.pageloader_pe.pageloader_click {animation-name: loadingPE}
@keyframes loadingPE {
0% {
clip-path:polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
-webkit-clip-path:polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%)
}
50% {
clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
-webkit-clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)
}
100% {
clip-path:polygon(50% 0%, 100% 0, 100% 100%, 50% 100%, 0 100%, 0 0);
-webkit-clip-path:polygon(50% 0%, 100% 0, 100% 100%, 50% 100%, 0 100%, 0 0)
}
}
.pageloader_pe.pageloader_done {animation-name: loadingPEDone}
@keyframes loadingPEDone {
0% {
clip-path:polygon(50% 0%, 100% 0, 100% 100%, 50% 100%, 0 100%, 0 0);
-webkit-clip-path:polygon(50% 0%, 100% 0, 100% 100%, 50% 100%, 0 100%, 0 0)
}
50% {
clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
-webkit-clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)
}
100% {
clip-path:polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
-webkit-clip-path:polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%)
}
}
.pageloader_done_all {
opacity: 0;
visibility: hidden
}