.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%;
	text-align: initial;
	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)
}
/* Only apply when data-title is NOT empty */
[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); }
}

/* Dropdown effect */
.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)}}

/* Dropdown inner items intro effect */
[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}