.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;
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}