.sffm-align-center {
text-align: center;
}
.sffm-align-right {
text-align: right;
}
img {
height: auto;
max-width: 100%;
vertical-align: middle;
} .sffm-flymenu-trigger-block {
position: fixed;
margin: 0;
padding: 0;
z-index: var(--sffm-trigger-btn-zindex, 9);
}
.sffm-flymenu-trigger-block.sffm-shape-round .sffm-flymenu-trigger {
border-radius: 50%;
}
.sffm-flymenu-trigger-block.sffm-shape-rounded-square .sffm-flymenu-trigger {
border-radius: 0.2em;
}
.sffm-flymenu-trigger-block.sffm-shape-blob .sffm-flymenu-trigger,
.sffm-fullscreen-anim-morphin .sffm-flymenu-trigger-block.sffm-shape-blob .sffm-flymenu-trigger:before {
animation: sffm-border-transform 9s linear infinite;
}
@keyframes sffm-border-transform {
0%,
100% {
border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
}
14% {
border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%;
}
28% {
border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%;
}
42% {
border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%;
}
56% {
border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%;
}
70% {
border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%;
}
84% {
border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%;
}
}
body.admin-bar [class*="sffm-position-top-"].sffm-flymenu-trigger-block {
margin-top: 32px;
}
.sffm-position-top-left.sffm-flymenu-trigger-block {
top: var(--sffm-offset-top, 20px);
left: var(--sffm-offset-left, 20px);
}
.sffm-position-top-middle.sffm-flymenu-trigger-block {
top: var(--sffm-offset-top, 20px);
left: 50%;
transform: translateX(-50%);
}
.sffm-position-top-right.sffm-flymenu-trigger-block {
top: var(--sffm-offset-top, 20px);
right: var(--sffm-offset-right, 20px);
}
.sffm-position-bottom-left.sffm-flymenu-trigger-block {
bottom: var(--sffm-offset-bottom, 20px);
left: var(--sffm-offset-left, 20px);
}
.sffm-position-bottom-middle.sffm-flymenu-trigger-block {
bottom: var(--sffm-offset-bottom, 20px);
left: 50%;
transform: translateX(-50%);
}
.sffm-position-bottom-right.sffm-flymenu-trigger-block {
bottom: var(--sffm-offset-bottom, 20px);
right: var(--sffm-offset-right, 20px);
}
.sffm-position-middle-left.sffm-flymenu-trigger-block {
top: 50%;
left: var(--sffm-offset-left, 20px);
transform: translateY(-50%);
}
.sffm-position-middle-right.sffm-flymenu-trigger-block {
top: 50%;
right: var(--sffm-offset-right, 20px);
transform: translateY(-50%);
}
.sffm-flymenu-trigger-idle-animation {
filter: drop-shadow(var(--sffm-trigger-btn-shadow-x, 0) var(--sffm-trigger-btn-shadow-y, 0) var(--sffm-trigger-btn-shadow-blur, 0) var(--sffm-trigger-btn-shadow-color, transparent));
}
.sffm-flymenu-trigger-idle-animation,
.sffm-flymenu-trigger-hover-animation {
position: relative;
z-index: 9999;
}
.sffm-flymenu-trigger-idle-animation:hover,
.sffm-flymenu-show .sffm-flymenu-trigger-idle-animation,
.sffm-flymenu-trigger-idle-animation:hover:before,
.sffm-flymenu-show .sffm-flymenu-trigger-idle-animation:before {
animation: none;
}
.sffm-flymenu-trigger {
width: var(--sffm-trigger-btn-size, 74px);
height: var(--sffm-trigger-btn-size, 74px);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: var(--sffm-trigger-btn-icon-size, 24px);
background: var(--sffm-trigger-btn-bg-color, #000);
color: var(--sffm-trigger-btn-icon-color, #FFF);
overflow: hidden;
}
.sffm-flymenu-trigger:hover {
background: var(--sffm-trigger-btn-bg-color-hover, var(--sffm-trigger-btn-bg-color, #000));
color: var(--sffm-trigger-btn-icon-color-hover, var(--sffm-trigger-btn-icon-color, #FFF));
}
.sffm-flymenu-trigger-close-icon {
display: none;
}
.sffm-flymenu-show .sffm-flymenu-trigger-open-icon {
display: none;
}
.sffm-flymenu-show .sffm-flymenu-trigger-close-icon {
display: block;
}
.sffm-flymenu-trigger img {
width: var(--sffm-trigger-btn-image-size, 100%);
} .sffm-flymenu-trigger-tooltip {
border-radius: var(--sffm-tooltip-border-radius, 4px);
position: absolute;
opacity: 0;
line-height: 1.2;
padding: var(--sffm-tooltip-spacing-top, 8px) var(--sffm-tooltip-spacing-right, 8px) var(--sffm-tooltip-spacing-bottom, 8px) var(--sffm-tooltip-spacing-left, 8px);
visibility: hidden;
background: var(--sffm-trigger-btn-bg-color-hover, var(--sffm-trigger-btn-bg-color, #000));
color: var(--sffm-trigger-btn-icon-color-hover, var(--sffm-trigger-btn-icon-color, #FFF));
white-space: nowrap;
font-family: var(--sffm-tooltip-font-family, inherit);
font-weight: var(--sffm-tooltip-font-weight, 400);
font-style: var(--sffm-tooltip-font-style, normal);
text-transform: var(--sffm-tooltip-text-transform, none);
text-decoration: var(--sffm-tooltip-text-decoration, none);
font-size: var(--sffm-tooltip-font-size, 14px);
line-height: var(--sffm-tooltip-line-height, 1.2);
letter-spacing: var(--sffm-tooltip-letter-spacing, inherit);
transition: all 0.2s ease;
}
.sffm-position-top-left.sffm-flymenu-trigger-block .sffm-flymenu-trigger-tooltip,
.sffm-position-middle-left.sffm-flymenu-trigger-block .sffm-flymenu-trigger-tooltip,
.sffm-position-bottom-left.sffm-flymenu-trigger-block .sffm-flymenu-trigger-tooltip {
top: 50%;
transform: translateY(-50%);
left: 100%;
margin-left: 0;
}
.sffm-position-top-right.sffm-flymenu-trigger-block .sffm-flymenu-trigger-tooltip,
.sffm-position-middle-right.sffm-flymenu-trigger-block .sffm-flymenu-trigger-tooltip,
.sffm-position-bottom-right.sffm-flymenu-trigger-block .sffm-flymenu-trigger-tooltip {
top: 50%;
transform: translateY(-50%);
right: 100%;
margin-right: 0;
}
.sffm-position-top-middle.sffm-flymenu-trigger-block .sffm-flymenu-trigger-tooltip {
transform: rotate(90deg) translateY(-50%);
transform-origin: 0 0;
left: 50%;
top: 100%;
margin-top: 0;
}
.sffm-position-bottom-middle.sffm-flymenu-trigger-block .sffm-flymenu-trigger-tooltip {
transform: rotate(-90deg) translateY(50%);
transform-origin: 0 100%;
left: 50%;
bottom: 100%;
margin-bottom: 0;
}
.sffm-position-top-left.sffm-flymenu-trigger-block:hover .sffm-flymenu-trigger-tooltip,
.sffm-position-middle-left.sffm-flymenu-trigger-block:hover .sffm-flymenu-trigger-tooltip,
.sffm-position-bottom-left.sffm-flymenu-trigger-block:hover .sffm-flymenu-trigger-tooltip {
margin-left: 15px;
}
.sffm-position-top-right.sffm-flymenu-trigger-block:hover .sffm-flymenu-trigger-tooltip,
.sffm-position-middle-right.sffm-flymenu-trigger-block:hover .sffm-flymenu-trigger-tooltip,
.sffm-position-bottom-right.sffm-flymenu-trigger-block:hover .sffm-flymenu-trigger-tooltip {
margin-right: 15px;
}
.sffm-position-top-middle.sffm-flymenu-trigger-block:hover .sffm-flymenu-trigger-tooltip {
margin-top: 15px;
}
.sffm-position-bottom-middle.sffm-flymenu-trigger-block:hover .sffm-flymenu-trigger-tooltip {
margin-bottom: 15px;
}
.sffm-position-top-left.sffm-flymenu-trigger-block .sffm-flymenu-trigger-tooltip:before,
.sffm-position-middle-left.sffm-flymenu-trigger-block .sffm-flymenu-trigger-tooltip:before,
.sffm-position-bottom-left.sffm-flymenu-trigger-block .sffm-flymenu-trigger-tooltip:before {
content: "";
position: absolute;
top: 50%;
right: 100%;
border-width: 5px;
border-style: solid;
border-color: transparent var(--sffm-trigger-btn-bg-color-hover, var(--sffm-trigger-btn-bg-color, #000)) transparent transparent;
transform: translateY(-50%);
}
.sffm-position-top-right.sffm-flymenu-trigger-block .sffm-flymenu-trigger-tooltip:before,
.sffm-position-middle-right.sffm-flymenu-trigger-block .sffm-flymenu-trigger-tooltip:before,
.sffm-position-bottom-right.sffm-flymenu-trigger-block .sffm-flymenu-trigger-tooltip:before {
content: "";
position: absolute;
top: 50%;
left: 100%;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent var(--sffm-trigger-btn-bg-color-hover, var(--sffm-trigger-btn-bg-color, #000));
transform: translateY(-50%);
}
.sffm-position-top-middle.sffm-flymenu-trigger-block .sffm-flymenu-trigger-tooltip:before {
content: "";
position: absolute;
top: 50%;
right: 100%;
border-width: 5px;
border-style: solid;
border-color: transparent var(--sffm-trigger-btn-bg-color-hover, var(--sffm-trigger-btn-bg-color, #000)) transparent transparent;
transform: translateY(-50%);
}
.sffm-position-bottom-middle.sffm-flymenu-trigger-block .sffm-flymenu-trigger-tooltip:before {
content: "";
position: absolute;
top: 50%;
right: 100%;
border-width: 5px;
border-style: solid;
border-color: transparent var(--sffm-trigger-btn-bg-color-hover, var(--sffm-trigger-btn-bg-color, #000)) transparent transparent;
transform: translateY(-50%);
}
.sffm-flymenu-trigger-block:hover .sffm-flymenu-trigger-tooltip {
opacity: 1;
visibility: visible;
} html.sffm-freeze {
overflow: hidden;
}
.sffm-flymenu-panel {
position: fixed;
top: 0;
bottom: 0;
width: 400px;
background-color: var(--sffm-panel-background-color, #000);
z-index: 999;
transition: left 0.3s ease-in-out, right 0.3s ease-in-out;
box-shadow: 0 0 18px rgba(0, 0, 0, 0.1);
}
.sffm-flymenu-pos-left .sffm-flymenu-panel {
left: -100%
}
.sffm-flymenu-pos-right .sffm-flymenu-panel {
right: -100%;
}
.sffm-flymenu-show.sffm-flymenu-pos-left .sffm-flymenu-panel,
.sffm-flymenu-pos-left.sffm-panel-animation-enabled .sffm-flymenu-panel {
left: 0
}
.sffm-flymenu-show.sffm-flymenu-pos-right .sffm-flymenu-panel,
.sffm-flymenu-pos-right.sffm-panel-animation-enabled .sffm-flymenu-panel {
right: 0;
}
.sffm-panel-animation-enabled .sffm-flymenu-panel {
visibility: hidden;
opacity: 0;
}
.sffm-panel-animation-enabled .animate--animated.sffm-flymenu-panel,
.sffm-panel-animation-enabled.sffm-panel-in-view .sffm-flymenu-panel {
visibility: visible;
opacity: 1;
}
.sffm-flymenu-panel-scroller {
position: relative;
overflow: hidden auto;
height: 100%;
} .sffm-scrollbar-off .sffm-flymenu-panel-scroller::-webkit-scrollbar,
.sffm-scrollbar-off .sffm-submenu-panel-scroller::-webkit-scrollbar {
display: none;
} .sffm-flymenu-panel-scroller::-webkit-scrollbar {
width: var(--sffm-scrollbar-width, 4px);
}
.sffm-flymenu-panel-scroller::-webkit-scrollbar-track {
background: var(--sffm-scrollbar-drag-bar-color, rgba(255, 255, 255, 0.75));
}
.sffm-flymenu-panel-scroller::-webkit-scrollbar-thumb {
background: var(--sffm-scrollbar-drag-rail-color, rgba(0, 0, 0, 0.4));
}
.sffm-flymenu-panel-content {
display: flex;
flex-direction: column;
min-height: 100%;
padding: var(--sffm-panel-spacing-top, 40px) var(--sffm-panel-spacing-right, 40px) var(--sffm-panel-spacing-bottom, 40px) var(--sffm-panel-spacing-left, 40px);
color: #FFF;
} .sffm-flymenu-wrapper {
position: relative;
z-index: var(--sffm-zindex, 999999);
}
.sffm-flymenu-show.sffm-overlay-color-background .sffm-overlay {
content: "";
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: var(--sffm-overlay-color, rgba(0, 0, 0, 0.8));
transition: all 0.3s ease-in-out;
opacity: 0.9;
}
.sffm-flymenu-show.sffm-overlay-blur-background .sffm-overlay {
content: "";
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(5px);
transition: all 0.3s ease-in-out;
} .sffm-header-image .avatar {
border-radius: 50%;
height: 100px;
width: 100px;
}
.sffm-header-image img {
width: var(--sffm-header-image-width, 80%);
}
.sffm-flymenu-header > div,
.sffm-flymenu-panel .sffm-flymenu-header > ul.sffm-panel-social-icons {
margin-bottom: var(--sffm-header-element-spacing, 40px);
}
.sffm-flymenu-header > div:last-child,
.sffm-flymenu-panel .sffm-flymenu-header > ul:last-child {
margin-bottom: 0;
}
.sffm-flymenu-header {
padding: var(--sffm-header-spacing-top, 0) var(--sffm-header-spacing-right, 0) var(--sffm-header-spacing-bottom, 40px) var(--sffm-header-spacing-left, 0);
}
.sffm-header-title {
font-family: var(--sffm-header-title-font-family, inherit);
font-weight: var(--sffm-header-title-font-weight, 400);
font-style: var(--sffm-header-title-font-style, normal);
text-transform: var(--sffm-header-title-text-transform, none);
text-decoration: var(--sffm-header-title-text-decoration, none);
font-size: var(--sffm-header-title-font-size, 30px);
line-height: var(--sffm-header-title-line-height, 1.2);
letter-spacing: var(--sffm-header-title-letter-spacing, inherit);
margin-bottom: 10px;
color: var(--sffm-header-title-color, #FFF);
}
.sffm-header-tagline {
font-family: var(--sffm-header-tagline-font-family, inherit);
font-weight: var(--sffm-header-tagline-font-weight, 400);
font-style: var(--sffm-header-tagline-font-style, normal);
text-transform: var(--sffm-header-tagline-text-transform, none);
text-decoration: var(--sffm-header-tagline-text-decoration, none);
font-size: var(--sffm-header-tagline-font-size, inherit);
line-height: var(--sffm-header-tagline-line-height, inherit);
letter-spacing: var(--sffm-header-tagline-letter-spacing, inherit);
color: var(--sffm-header-tagline-color, #FFF);
}
.sffm-header-custom-content {
font-family: var(--sffm-header-text-font-family, inherit);
font-weight: var(--sffm-header-text-font-weight, 400);
font-style: var(--sffm-header-text-font-style, normal);
text-transform: var(--sffm-header-text-text-transform, none);
text-decoration: var(--sffm-header-text-text-decoration, none);
font-size: var(--sffm-header-text-font-size, inherit);
line-height: var(--sffm-header-text-line-height, inherit);
letter-spacing: var(--sffm-header-text-letter-spacing, inherit);
color: var(--sffm-header-text-color, #FFF);
} .sffm-footer-custom-content {
font-family: var(--sffm-footer-text-font-family, inherit);
font-weight: var(--sffm-footer-text-font-weight, 400);
font-style: var(--sffm-footer-text-font-style, normal);
text-transform: var(--sffm-footer-text-text-transform, none);
text-decoration: var(--sffm-footer-text-text-decoration, none);
font-size: var(--sffm-footer-text-font-size, inherit);
line-height: var(--sffm-footer-text-line-height, inherit);
letter-spacing: var(--sffm-footer-text-letter-spacing, inherit);
color: var(--sffm-footer-text-color, #FFF);
} .sffm-flymenu-panel ul.sffm-panel-social-icons {
list-style: none;
padding: 0;
margin: 0;
}
.sffm-panel-social-icons {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}
.sffm-panel-social-icons li {
position: relative;
margin: 0;
padding: 0;
border: 0;
}
.sffm-panel-social-icons li a {
display: flex;
justify-content: center;
align-items: center;
background: var(--sffm-socialicon-bg-color, #333);
color: var(--sffm-socialicon-icon-color, #FFF);
border: 1px solid var(--sffm-socialicon-border-color, transparent);
}
.sffm-panel-social-icons li a:hover {
background: var(--sffm-socialicon-bg-color-hover, var(--sffm-socialicon-bg-color, #333));
color: var(--sffm-socialicon-icon-color-hover, var(--sffm-socialicon-icon-color, #FFF));
border: 1px solid var(--sffm-socialicon-border-color-hover, var(--sffm-socialicon-border-color, transparent));
}
.sffm-social-icons li a {
height: var(--sffm-social-icon-btn-size, 40px);
width: var(--sffm-social-icon-btn-size, 40px);
font-size: var(--sffm-social-icon-icon-size, 20px);
}
.sffm-panel-social-icons li .sffm-icon-tooltip {
position: absolute;
background: var(--sffm-socialicon-tooltip-bg-color, #333);
padding: 6px 8px;
font-size: 0.7em;
line-height: 1;
color: var(--sffm-socialicon-tooltip-color, #FFF);
bottom: 100%;
left: 50%;
transform: translateX(-50%);
margin-bottom: 10px;
border-radius: 2px;
opacity: 0;
visibility: hidden;
transition: all 0.3s linear;
}
.sffm-panel-social-icons li .sffm-icon-tooltip:before {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border-width: 6px;
border-style: solid;
border-color: var(--sffm-socialicon-tooltip-bg-color, #333) transparent transparent transparent;
}
.sffm-panel-social-icons li:hover .sffm-icon-tooltip {
opacity: 1;
visibility: visible;
}
.sffm-align-left .sffm-panel-social-icons,
.sffm-align-left .sffm-panel-search {
justify-content: flex-start;
}
.sffm-align-center .sffm-panel-social-icons,
.sffm-align-center .sffm-panel-search {
justify-content: center;
}
.sffm-align-right .sffm-panel-social-icons,
.sffm-align-right .sffm-panel-search {
justify-content: flex-end;
}
.sffm-social-icons.sffm-social-icons-shape-round li a {
clip-path: circle(50% at 50% 50%);
}
.sffm-social-icons.sffm-social-icons-shape-triangle li a {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.sffm-social-icons.sffm-social-icons-shape-triangle li a span {
transform: translateY(calc(var(--sffm-social-icon-btn-size, 40px)/10));
}
.sffm-social-icons.sffm-social-icons-shape-rounded-square li a {
border-radius: 0.3em;
}
.sffm-social-icons.sffm-social-icons-shape-rhombus li a {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.sffm-social-icons.sffm-social-icons-shape-pentagon li a {
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}
.sffm-social-icons.sffm-social-icons-shape-pentagon li a span {
transform: translateY(calc(var(--sffm-social-icon-btn-size, 40px)/20));
}
.sffm-social-icons.sffm-social-icons-shape-hexagon li a {
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.sffm-social-icons.sffm-social-icons-shape-star li a {
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.sffm-social-icons.sffm-social-icons-shape-rabbet li a {
clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%);
}
.sffm-social-icons.sffm-social-icons-shape-oval li a {
clip-path: ellipse(50% 35% at 50% 50%);
}
.sffm-social-icons.sffm-social-icons-shape-blob li a {
animation: sffm-border-transform 9s linear infinite;
} .sffm-panel-search {
display: flex;
margin-bottom: 20px;
}
.sffm-panel-search form {
display: flex;
border: 1px solid var(--sffm-search-border-color, #EEE);
width: var(--sffm-search-width, 100%);
background: var(--sffm-search-bg-color, transparent);
border-radius: var(--sffm-search-form-border-radius, 0px);
}
.sffm-panel-search .sffm-search-field {
background: none !important;
padding: 10px;
border: none !important;
box-shadow: none !important;
color: var(--sffm-search-text-color, #FFF);
height: auto;
flex-grow: 1;
min-width: 0;
margin: 0;
padding: var(--sffm-search-spacing-top, 10px) var(--sffm-search-spacing-right, 10px) var(--sffm-search-spacing-bottom, 10px) var(--sffm-search-spacing-left, 10px);
}
.sffm-panel-search .sffm-search-submit {
height: auto;
padding: var(--sffm-search-spacing-top, 10px) 20px var(--sffm-search-spacing-bottom, 10px) 20px;
background: var(--sffm-search-button-color, #000);
color: var(--sffm-search-button-icon-color, #FFF);
border-radius: 0 var(--sffm-search-form-border-radius, 0px) var(--sffm-search-form-border-radius, 0px) 0;
}
.sffm-panel-search .sffm-search-field::placeholder {
color: var(--sffm-search-text-color, #FFF);
opacity: 0.7;
}
.sffm-header-custom-content p:last-child,
.sffm-footer-custom-content p:last-child {
margin-bottom: 0;
}
.sffm-flymenu-footer {
padding: var(--sffm-footer-spacing-top, 40px) var(--sffm-footer-spacing-right, 0) var(--sffm-footer-spacing-bottom, 0) var(--sffm-footer-spacing-left, 0);
}
.sffm-flymenu-panel .sffm-flymenu-footer > div,
.sffm-flymenu-panel .sffm-flymenu-footer > ul {
margin-bottom: var(--sffm-footer-element-spacing, 40px);
}
.sffm-flymenu-panel .sffm-flymenu-footer > div:last-child,
.sffm-flymenu-panel .sffm-flymenu-footer > ul:last-child {
margin-bottom: 0;
} .sffm-flymenu-body {
margin: var(--sffm-menu-spacing-top, 0) var(--sffm-menu-spacing-right, 0) var(--sffm-menu-spacing-bottom, 0) var(--sffm-menu-spacing-left, 0);
}
.sffm-flymenu-body .sffm-menu-container {
width: 100%;
}
.sffm-menu-container ul {
margin: 0;
padding: 0;
list-style: none;
}
.sffm-menu-container ul li {
list-style: none;
}
.sffm-menu-container ul ul {
margin-left: 15px;
}
.sffm-menu-container li.sffm-menu-item {
position: relative;
font-family: var(--sffm-menu-label-font-family, inherit);
font-weight: var(--sffm-menu-label-font-weight, 400);
font-style: var(--sffm-menu-label-font-style, normal);
text-transform: var(--sffm-menu-label-text-transform, none);
text-decoration: var(--sffm-menu-label-text-decoration, none);
font-size: var(--sffm-menu-label-font-size, inherit);
line-height: var(--sffm-menu-label-line-height, inherit);
letter-spacing: var(--sffm-menu-label-letter-spacing, inherit);
}
.sffm-menu-container li.sffm-menu-item a.sffm-menu-item-link,
.sffm-submenu-back a {
position: relative;
display: block;
padding: var(--sffm-menu-item-spacing-top, 10px) var(--sffm-menu-item-spacing-right, 0) var(--sffm-menu-item-spacing-bottom, 10px) var(--sffm-menu-item-spacing-left, 0);
color: var(--sffm-menu-label-color, #EEE);
background: var(--sffm-menu-bg-color, transparent);
border-bottom: 1px solid var(--sffm-menu-border-color, transparent);
text-decoration: inherit;
}
.sffm-menu-container li.sffm-menu-item a.sffm-menu-item-link:hover,
.sffm-submenu-back a:hover {
color: var(--sffm-menu-label-color-hover, var(--sffm-menu-label-color, #EEE));
background: var(--sffm-menu-bg-color-hover, var(--sffm-menu-bg-color, transparent));
border-bottom: 1px solid var(--sffm-menu-border-color-hover, var(--sffm-menu-border-color, transparent));
}
.sffm-menu-container li.sffm-menu-item .sffm-menu-link-items {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.sffm-menu-container li.sffm-menu-item .sffm-menu-item-title {
display: flex;
align-items: center;
gap: 0.7em;
position: relative;
}
.sffm-menu-container li.sffm-menu-item .sffm-menu-item-title .sffm-menu-icon {
display: inline-flex;
align-items: center;
}
.sffm-menu-container li.sffm-menu-item .sffm-menu-item-title img,
.sffm-menu-container li.sffm-menu-item .sffm-menu-item-title svg {
width: 1em;
height: auto;
}
.sffm-menu-container li.sffm-menu-item .sffm-menu-item-description {
display: block;
font-size: 0.9em;
margin-top: 10px;
font-family: var(--sffm-menu-desc-font-family, inherit);
font-weight: var(--sffm-menu-desc-font-weight, 400);
font-style: var(--sffm-menu-desc-font-style, normal);
text-transform: var(--sffm-menu-desc-text-transform, none);
text-decoration: var(--sffm-menu-desc-text-decoration, none);
font-size: var(--sffm-menu-desc-font-size, inherit);
line-height: var(--sffm-menu-desc-line-height, inherit);
letter-spacing: var(--sffm-menu-desc-letter-spacing, inherit);
color: var(--sffm-menu-short-desc-color, var(--sffm-menu-label-color, #FFF));
}
.sffm-menu-container li.sffm-menu-item .sffm-menu-item-notification-label {
display: inline-block;
white-space: nowrap;
font-size: 0.7em;
background: var(--sffm-menu-notification-bg-color, #333);
color: var(--sffm-menu-notification-color, #FFF);
padding: 4px 10px;
border-radius: 20px;
line-height: 1;
transform: translateY(-6px);
}
.sffm-menu-container .sffm-menu-item-panel-content,
.sffm-menu-container .sffm-addditional-content {
font-family: var(--sffm-menu-content-font-family, inherit);
font-weight: var(--sffm-menu-content-font-weight, 400);
font-style: var(--sffm-menu-content-font-style, normal);
text-transform: var(--sffm-menu-content-text-transform, none);
text-decoration: var(--sffm-menu-content-text-decoration, none);
font-size: var(--sffm-menu-content-font-size, inherit);
line-height: var(--sffm-menu-content-line-height, inherit);
letter-spacing: var(--sffm-menu-content-letter-spacing, inherit);
color: var(--sffm-menu-add-content-color, var(--sffm-menu-label-color, #FFF));
margin-top: 15px;
}
.sffm-submenu-toggle .sffm-submenu-close-icon {
display: none;
}
.sffm-menu-item-link-open .sffm-submenu-toggle .sffm-submenu-close-icon {
display: block;
}
.sffm-menu-item-link-open .sffm-submenu-toggle .sffm-submenu-open-icon {
display: none;
}
.sffm-submenu-back {
margin-bottom: 15px;
}
.sffm-submenu-back a {
display: flex;
justify-content: space-between;
align-items: center;
}
.sffm-flymenu-body.sffm-align-center .sffm-menu-container li.sffm-menu-item .sffm-menu-link-items {
justify-content: center;
}
.sffm-submenu-menu-drop .sffm-flymenu-body.sffm-align-center .sffm-menu-container .sffm-submenu {
margin: 0;
}
.sffm-flymenu-body.sffm-align-right .sffm-menu-container li.sffm-menu-item .sffm-menu-link-items {
flex-direction: row-reverse;
}
.sffm-flymenu-body.sffm-align-right .sffm-menu-container li.sffm-menu-item .sffm-menu-item-title {
flex-direction: row-reverse;
}
.sffm-submenu-menu-drop .sffm-flymenu-body.sffm-align-right .sffm-menu-container .sffm-submenu {
margin-left: 0;
margin-right: 15px;
} .sffm-submenu-menu-drop .sffm-submenu {
display: none;
} .sffm-submenu-container {
position: fixed;
top: 0;
bottom: 0;
width: var(--sffm-panel-width, 400px);
background-color: var(--sffm-panel-background-color, #000);
opacity: 0;
visibility: hidden;
transition: all 0.3s ease-in-out;
}
.sffm-flymenu-pos-left .sffm-submenu-container {
transform: translateX(-100px);
}
.sffm-flymenu-pos-right .sffm-submenu-container {
transform: translateX(100px);
}
.sffm-menu-container .sffm-submenu-container.sffm-submenu-open {
opacity: 1;
visibility: visible;
transform: translateX(0);
}
.sffm-menu-container .sffm-submenu-container ul {
margin: 0;
padding: 0;
}
.sffm-flymenu-pos-left .sffm-submenu-container {
left: calc(var(--sffm-panel-width, 400px) + 1px);
}
.sffm-flymenu-pos-left .sffm-submenu-container:after {
left: 0;
}
.sffm-flymenu-pos-right .sffm-submenu-container:after {
right: 0;
}
.sffm-flymenu-pos-right .sffm-submenu-container {
right: calc(var(--sffm-panel-width, 400px) + 1px);
} .sffm-submenu-animate .sffm-menu-container {
width: 100%;
position: relative;
-webkit-perspective: 1000px;
perspective: 1000px;
-webkit-perspective-origin: 50% 200%;
perspective-origin: 50% 200%;
position: relative;
transition: height 0.3s linear;
}
.sffm-submenu-animate .sffm-menu-container ul {
list-style: none;
margin: 0;
padding: 0;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.sffm-submenu-animate .sffm-menu-container li {
position: relative;
margin: 0;
padding: 0;
}
.sffm-submenu-animate .sffm-menu-container li a {
display: block;
position: relative;
padding: 10px 0;
}
.sffm-submenu-animate .sffm-menu-container li.sffm-back a.sffm-menu-item-link {
display: flex;
align-items: center;
justify-content: space-between;
}
.sffm-submenu-animate .sffm-menu-container .sffm-menu {
margin: 0;
position: absolute;
width: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
} .sffm-submenu-animate .sffm-menu-container li .sffm-submenu {
display: none;
} .sffm-submenu-animate .sffm-menu.sffm-subview li,
.sffm-submenu-animate .sffm-menu.sffm-subview li.sffm-subviewopen > a,
.sffm-submenu-animate .sffm-menu.sffm-subview li.sffm-subviewopen > .sffm-addditional-content,
.sffm-submenu-animate .sffm-menu.sffm-subview li.sffm-subview > a,
.sffm-submenu-animate .sffm-menu.sffm-subview li.sffm-subview > .sffm-addditional-content {
display: none;
}
.sffm-submenu-animate .sffm-menu.sffm-subview li.sffm-subview,
.sffm-submenu-animate .sffm-menu.sffm-subview li.sffm-subview .sffm-submenu,
.sffm-submenu-animate .sffm-menu.sffm-subview li.sffm-subviewopen,
.sffm-submenu-animate .sffm-menu.sffm-subview li.sffm-subviewopen > .sffm-submenu,
.sffm-submenu-animate .sffm-menu.sffm-subview li.sffm-subviewopen > .sffm-submenu > li {
display: block;
} .sffm-submenu-animate .sffm-menu-container > .sffm-submenu {
position: absolute;
width: 100%;
left: 0;
margin: 0;
} .sffm-menu.sffm-animate-out-1 {
-webkit-animation: MenuAnimOut1 0.4s;
animation: MenuAnimOut1 0.4s;
}
.sffm-menu.sffm-animate-out-2 {
-webkit-animation: MenuAnimOut2 0.3s ease-in-out;
animation: MenuAnimOut2 0.3s ease-in-out;
}
.sffm-menu.sffm-animate-out-3 {
-webkit-animation: MenuAnimOut3 0.4s ease;
animation: MenuAnimOut3 0.4s ease;
}
.sffm-menu.sffm-animate-out-4 {
-webkit-animation: MenuAnimOut4 0.4s ease;
animation: MenuAnimOut4 0.4s ease;
}
.sffm-menu.sffm-animate-out-5 {
-webkit-animation: MenuAnimOut5 0.4s ease;
animation: MenuAnimOut5 0.4s ease;
}
@-webkit-keyframes MenuAnimOut1 {
0% {}
50% {
-webkit-transform: translateZ(-250px) rotateY(30deg) scale(1);
}
75% {
-webkit-transform: translateZ(-372.5px) rotateY(15deg) scale(0.2);
opacity: .5;
}
100% {
-webkit-transform: translateZ(-500px) rotateY(0deg) scale(0);
opacity: 0;
}
}
@-webkit-keyframes MenuAnimOut2 {
0% {}
100% {
-webkit-transform: translateX(-100%);
opacity: 0;
}
}
@-webkit-keyframes MenuAnimOut3 {
0% {}
100% {
-webkit-transform: translateZ(300px);
opacity: 0;
}
}
@-webkit-keyframes MenuAnimOut4 {
0% {}
100% {
-webkit-transform: translateZ(-300px);
opacity: 0;
}
}
@-webkit-keyframes MenuAnimOut5 {
0% {}
100% {
-webkit-transform: translateY(40%);
opacity: 0;
}
}
@keyframes MenuAnimOut1 {
0% {}
50% {
-webkit-transform: translateZ(-250px) rotateY(30deg);
transform: translateZ(-250px) rotateY(30deg);
}
75% {
-webkit-transform: translateZ(-372.5px) rotateY(15deg);
transform: translateZ(-372.5px) rotateY(15deg);
opacity: .5;
}
100% {
-webkit-transform: translateZ(-500px) rotateY(0deg);
transform: translateZ(-500px) rotateY(0deg);
opacity: 0;
}
}
@keyframes MenuAnimOut2 {
0% {}
100% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
opacity: 0;
}
}
@keyframes MenuAnimOut3 {
0% {}
100% {
-webkit-transform: translateZ(300px);
transform: translateZ(300px);
opacity: 0;
}
}
@keyframes MenuAnimOut4 {
0% {}
100% {
-webkit-transform: translateZ(-300px);
transform: translateZ(-300px);
opacity: 0;
}
}
@keyframes MenuAnimOut5 {
0% {}
100% {
-webkit-transform: translateY(40%);
transform: translateY(40%);
opacity: 0;
}
}
.sffm-menu.sffm-animate-in-1 {
-webkit-animation: MenuAnimIn1 0.3s;
animation: MenuAnimIn1 0.3s;
}
.sffm-menu.sffm-animate-in-2 {
-webkit-animation: MenuAnimIn2 0.3s ease-in-out;
animation: MenuAnimIn2 0.3s ease-in-out;
}
.sffm-menu.sffm-animate-in-3 {
-webkit-animation: MenuAnimIn3 0.4s ease;
animation: MenuAnimIn3 0.4s ease;
}
.sffm-menu.sffm-animate-in-4 {
-webkit-animation: MenuAnimIn4 0.4s ease;
animation: MenuAnimIn4 0.4s ease;
}
.sffm-menu.sffm-animate-in-5 {
-webkit-animation: MenuAnimIn5 0.4s ease;
animation: MenuAnimIn5 0.4s ease;
}
@-webkit-keyframes MenuAnimIn1 {
0% {
-webkit-transform: translateZ(-500px) rotateY(0deg);
opacity: 0;
}
20% {
-webkit-transform: translateZ(-250px) rotateY(30deg);
opacity: 0.5;
}
100% {
-webkit-transform: translateZ(0px) rotateY(0deg);
opacity: 1;
}
}
@-webkit-keyframes MenuAnimIn2 {
0% {
-webkit-transform: translateX(-100%);
opacity: 0;
}
100% {
-webkit-transform: translateX(0px);
opacity: 1;
}
}
@-webkit-keyframes MenuAnimIn3 {
0% {
-webkit-transform: translateZ(300px);
opacity: 0;
}
100% {
-webkit-transform: translateZ(0px);
opacity: 1;
}
}
@-webkit-keyframes MenuAnimIn4 {
0% {
-webkit-transform: translateZ(-300px);
opacity: 0;
}
100% {
-webkit-transform: translateZ(0px);
opacity: 1;
}
}
@-webkit-keyframes MenuAnimIn5 {
0% {
-webkit-transform: translateY(40%);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
opacity: 1;
}
}
@keyframes MenuAnimIn1 {
0% {
-webkit-transform: translateZ(-500px) rotateY(0deg);
transform: translateZ(-500px) rotateY(0deg);
opacity: 0;
}
20% {
-webkit-transform: translateZ(-250px) rotateY(30deg);
transform: translateZ(-250px) rotateY(30deg);
opacity: 0.5;
}
100% {
-webkit-transform: translateZ(0px) rotateY(0deg);
transform: translateZ(0px) rotateY(0deg);
opacity: 1;
}
}
@keyframes MenuAnimIn2 {
0% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
opacity: 0;
}
100% {
-webkit-transform: translateX(0px);
transform: translateX(0px);
opacity: 1;
}
}
@keyframes MenuAnimIn3 {
0% {
-webkit-transform: translateZ(300px);
transform: translateZ(300px);
opacity: 0;
}
100% {
-webkit-transform: translateZ(0px);
transform: translateZ(0px);
opacity: 1;
}
}
@keyframes MenuAnimIn4 {
0% {
-webkit-transform: translateZ(-300px);
transform: translateZ(-300px);
opacity: 0;
}
100% {
-webkit-transform: translateZ(0px);
transform: translateZ(0px);
opacity: 1;
}
}
@keyframes MenuAnimIn5 {
0% {
-webkit-transform: translateY(40%);
transform: translateY(40%);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
.sffm-submenu-animate .sffm-menu-container > .sffm-submenu.sffm-animate-in-1 {
-webkit-animation: SubMenuAnimIn1 0.4s ease;
animation: SubMenuAnimIn1 0.4s ease;
}
.sffm-submenu-animate .sffm-menu-container > .sffm-submenu.sffm-animate-in-2 {
-webkit-animation: SubMenuAnimIn2 0.3s ease-in-out;
animation: SubMenuAnimIn2 0.3s ease-in-out;
}
.sffm-submenu-animate .sffm-menu-container > .sffm-submenu.sffm-animate-in-3 {
-webkit-animation: SubMenuAnimIn3 0.4s ease;
animation: SubMenuAnimIn3 0.4s ease;
}
.sffm-submenu-animate .sffm-menu-container > .sffm-submenu.sffm-animate-in-4 {
-webkit-animation: SubMenuAnimIn4 0.4s ease;
animation: SubMenuAnimIn4 0.4s ease;
}
.sffm-submenu-animate .sffm-menu-container > .sffm-submenu.sffm-animate-in-5 {
-webkit-animation: SubMenuAnimIn5 0.4s ease;
animation: SubMenuAnimIn5 0.4s ease;
}
@-webkit-keyframes SubMenuAnimIn1 {
0% {
-webkit-transform: translateX(50%);
opacity: 0;
}
100% {
-webkit-transform: translateX(0px);
opacity: 1;
}
}
@-webkit-keyframes SubMenuAnimIn2 {
0% {
-webkit-transform: translateX(100%);
opacity: 0;
}
100% {
-webkit-transform: translateX(0px);
opacity: 1;
}
}
@-webkit-keyframes SubMenuAnimIn3 {
0% {
-webkit-transform: translateZ(-300px);
opacity: 0;
}
100% {
-webkit-transform: translateZ(0px);
opacity: 1;
}
}
@-webkit-keyframes SubMenuAnimIn4 {
0% {
-webkit-transform: translateZ(300px);
opacity: 0;
}
100% {
-webkit-transform: translateZ(0px);
opacity: 1;
}
}
@-webkit-keyframes SubMenuAnimIn5 {
0% {
-webkit-transform: translateZ(-200px);
opacity: 0;
}
100% {
-webkit-transform: translateZ(0);
opacity: 1;
}
}
@keyframes SubMenuAnimIn1 {
0% {
-webkit-transform: translateX(50%);
transform: translateX(50%);
opacity: 0;
}
100% {
-webkit-transform: translateX(0px);
transform: translateX(0px);
opacity: 1;
}
}
@keyframes SubMenuAnimIn2 {
0% {
-webkit-transform: translateX(100%);
transform: translateX(100%);
opacity: 0;
}
100% {
-webkit-transform: translateX(0px);
transform: translateX(0px);
opacity: 1;
}
}
@keyframes SubMenuAnimIn3 {
0% {
-webkit-transform: translateZ(-300px);
transform: translateZ(-300px);
opacity: 0;
}
100% {
-webkit-transform: translateZ(0px);
transform: translateZ(0px);
opacity: 1;
}
}
@keyframes SubMenuAnimIn4 {
0% {
-webkit-transform: translateZ(300px);
transform: translateZ(300px);
opacity: 0;
}
100% {
-webkit-transform: translateZ(0px);
transform: translateZ(0px);
opacity: 1;
}
}
@keyframes SubMenuAnimIn5 {
0% {
-webkit-transform: translateZ(-200px);
transform: translateZ(-200px);
opacity: 0;
}
100% {
-webkit-transform: translateZ(0);
transform: translateZ(0);
opacity: 1;
}
}
.sffm-submenu-animate .sffm-menu-container > .sffm-submenu.sffm-animate-out-1 {
-webkit-animation: SubMenuAnimOut1 0.4s ease;
animation: SubMenuAnimOut1 0.4s ease;
}
.sffm-submenu-animate .sffm-menu-container > .sffm-submenu.sffm-animate-out-2 {
-webkit-animation: SubMenuAnimOut2 0.3s ease-in-out;
animation: SubMenuAnimOut2 0.3s ease-in-out;
}
.sffm-submenu-animate .sffm-menu-container > .sffm-submenu.sffm-animate-out-3 {
-webkit-animation: SubMenuAnimOut3 0.4s ease;
animation: SubMenuAnimOut3 0.4s ease;
}
.sffm-submenu-animate .sffm-menu-container > .sffm-submenu.sffm-animate-out-4 {
-webkit-animation: SubMenuAnimOut4 0.4s ease;
animation: SubMenuAnimOut4 0.4s ease;
}
.sffm-submenu-animate .sffm-menu-container > .sffm-submenu.sffm-animate-out-5 {
-webkit-animation: SubMenuAnimOut5 0.4s ease;
animation: SubMenuAnimOut5 0.4s ease;
}
@-webkit-keyframes SubMenuAnimOut1 {
0% {
-webkit-transform: translateX(0%);
opacity: 1;
}
100% {
-webkit-transform: translateX(50%);
opacity: 0;
}
}
@-webkit-keyframes SubMenuAnimOut2 {
0% {
-webkit-transform: translateX(0%);
opacity: 1;
}
100% {
-webkit-transform: translateX(100%);
opacity: 0;
}
}
@-webkit-keyframes SubMenuAnimOut3 {
0% {
-webkit-transform: translateZ(0px);
opacity: 1;
}
100% {
-webkit-transform: translateZ(-300px);
opacity: 0;
}
}
@-webkit-keyframes SubMenuAnimOut4 {
0% {
-webkit-transform: translateZ(0px);
opacity: 1;
}
100% {
-webkit-transform: translateZ(300px);
opacity: 0;
}
}
@-webkit-keyframes SubMenuAnimOut5 {
0% {
-webkit-transform: translateZ(0);
opacity: 1;
}
100% {
-webkit-transform: translateZ(-200px);
opacity: 0;
}
}
@keyframes SubMenuAnimOut1 {
0% {
-webkit-transform: translateX(0%);
transform: translateX(0%);
opacity: 1;
}
100% {
-webkit-transform: translateX(50%);
transform: translateX(50%);
opacity: 0;
}
}
@keyframes SubMenuAnimOut2 {
0% {
-webkit-transform: translateX(0%);
transform: translateX(0%);
opacity: 1;
}
100% {
-webkit-transform: translateX(100%);
transform: translateX(100%);
opacity: 0;
}
}
@keyframes SubMenuAnimOut3 {
0% {
-webkit-transform: translateZ(0px);
transform: translateZ(0px);
opacity: 1;
}
100% {
-webkit-transform: translateZ(-300px);
transform: translateZ(-300px);
opacity: 0;
}
}
@keyframes SubMenuAnimOut4 {
0% {
-webkit-transform: translateZ(0px);
transform: translateZ(0px);
opacity: 1;
}
100% {
-webkit-transform: translateZ(300px);
transform: translateZ(300px);
opacity: 0;
}
}
@keyframes SubMenuAnimOut5 {
0% {
-webkit-transform: translateZ(0);
transform: translateZ(0);
opacity: 1;
}
100% {
-webkit-transform: translateZ(-200px);
transform: translateZ(-200px);
opacity: 0;
}
} .no-js .sffm-submenu-animate .sffm-menu-container .sffm-menu {
position: relative;
opacity: 1;
-webkit-transform: none;
transform: none;
}
.no-js .sffm-submenu-animate .sffm-menu-container li .sffm-submenu {
display: block;
}
.no-js .sffm-submenu-animate .sffm-menu-container li.sffm-back {
display: none;
}
.no-js .sffm-submenu-animate .sffm-menu-container li > a:not(:only-child) {
background: rgba(0, 0, 0, 0.1);
}
.no-js .sffm-submenu-animate .sffm-menu-container li > a:not(:only-child):after {
content: '';
} .sffm-layout-skew-side-menu.sffm-flymenu-pos-right .sffm-flymenu-panel {
padding-left: calc(var(--sffm-skew-menu-angle, 15)/100 * var(--sffm-panel-width));
}
.sffm-layout-skew-side-menu.sffm-flymenu-pos-right .sffm-flymenu-panel.sffm-skew-direction-forward {
clip-path: polygon(var(--sffm-skew-menu-angle-percentage, 15) 0%, 100% 0%, 100% 100%, 0% 100%);
}
.sffm-layout-skew-side-menu.sffm-flymenu-pos-right .sffm-flymenu-panel.sffm-skew-direction-backward {
clip-path: polygon(0 0, 100% 0%, 100% 100%, var(--sffm-skew-menu-angle-percentage, 15) 100%);
}
.sffm-layout-skew-side-menu.sffm-flymenu-pos-left .sffm-flymenu-panel {
padding-right: calc(var(--sffm-skew-menu-angle, 15)/100 * var(--sffm-panel-width));
}
.sffm-layout-skew-side-menu.sffm-flymenu-pos-left .sffm-flymenu-panel.sffm-skew-direction-forward {
clip-path: polygon(0 0, 100% 0, calc(100% - var(--sffm-skew-menu-angle-percentage, 15)) 100%, 0 100%);
}
.sffm-layout-skew-side-menu.sffm-flymenu-pos-left .sffm-flymenu-panel.sffm-skew-direction-backward {
clip-path: polygon(0 0, calc(100% - var(--sffm-skew-menu-angle-percentage, 15)) 0, 100% 100%, 0 100%);
}
.sffm-layout-skew-side-menu.sffm-flymenu-pos-left .sffm-flymenu-panel-scroller {
direction: rtl;
}
.sffm-layout-skew-side-menu.sffm-flymenu-pos-left .sffm-flymenu-panel-scroller .sffm-flymenu-panel-content {
direction: ltr;
} .sffm-flymenu-panel.sffm-full-screen-menu {
width: 100%;
}
.sffm-flymenu-panel .sffm-panel-close {
position: absolute;
text-decoration: none;
top: var(--sffm-close-button-offset-top, 10px);
height: var(--sffm-close-button-size, 50px);
width: var(--sffm-close-button-size, 50px);
background: var(--sffm-close-button-bg-color, #111);
color: var(--sffm-close-button-icon-color, #FFF);
border-radius: var(--sffm-close-button-border-radius, 0px);
font-size: var(--sffm-close-button-size, 50px);
display: flex;
align-items: center;
justify-content: center;
z-index: 9;
}
.sffm-flymenu-panel .sffm-panel-close.sffm-pos-left {
left: var(--sffm-close-button-offset-left, 10px);
}
.sffm-flymenu-panel .sffm-panel-close.sffm-pos-right {
right: var(--sffm-close-button-offset-right, 10px);
}
.sffm-flymenu-panel .sffm-panel-close:hover {
background: var(--sffm-close-button-bg-color-hover, var(--sffm-close-button-bg-color, #111));
color: var(--sffm-close-button-icon-color-hover, var(--sffm-close-button-icon-color, #FFF));
}
.sffm-flymenu-panel .sffm-panel-close i {
font-size: 0.45em;
}
.sffm-flymenu-panel.sffm-full-screen-menu .sffm-flymenu-panel-content {
width: var(--sffm-fullscreen-content-width, 600px);
margin: 0 auto;
}
.sffm-fullscreen-anim-fade-in .sffm-flymenu-panel {
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.sffm-flymenu-show.sffm-fullscreen-anim-fade-in .sffm-flymenu-panel {
opacity: 1;
visibility: visible;
}
.sffm-fullscreen-anim-zoom-in .sffm-flymenu-panel {
opacity: 0;
visibility: hidden;
transform: scale(0.3);
transition: all 0.3s ease-in-out;
}
.sffm-flymenu-show.sffm-fullscreen-anim-zoom-in .sffm-flymenu-panel {
opacity: 1;
visibility: visible;
transform: scale(1);
}
.sffm-fullscreen-anim-slide-down .sffm-flymenu-panel {
transform: translateY(-100%);
transition: all 0.3s ease-in-out;
}
.sffm-flymenu-show.sffm-fullscreen-anim-slide-down .sffm-flymenu-panel {
transform: translateY(0);
}
.sffm-fullscreen-anim-slide-up .sffm-flymenu-panel {
transform: translateY(100%);
transition: all 0.3s ease-in-out;
}
.sffm-flymenu-show.sffm-fullscreen-anim-slide-up .sffm-flymenu-panel {
transform: translateY(0);
}
.sffm-fullscreen-anim-slide-left .sffm-flymenu-panel {
transform: translateX(-100%);
transition: all 0.3s ease-in-out;
}
.sffm-flymenu-show.sffm-fullscreen-anim-slide-left .sffm-flymenu-panel {
transform: translateX(0);
}
.sffm-fullscreen-anim-slide-right .sffm-flymenu-panel {
transform: translateX(100%);
transition: all 0.3s ease-in-out;
}
.sffm-flymenu-show.sffm-fullscreen-anim-slide-right .sffm-flymenu-panel {
transform: translateX(0);
}
.sffm-fullscreen-anim-morphin .sffm-flymenu-panel {
opacity: 0;
visibility: hidden;
transition: all 0.3s linear;
}
.sffm-flymenu-show.sffm-fullscreen-anim-morphin .sffm-flymenu-panel {
opacity: 1;
visibility: visible;
}
.sffm-fullscreen-anim-morphin .sffm-flymenu-trigger i,
.sffm-fullscreen-anim-morphin .sffm-flymenu-trigger img {
position: relative;
}
.sffm-flymenu-show.sffm-fullscreen-anim-morphin .sffm-flymenu-trigger i,
.sffm-flymenu-show.sffm-fullscreen-anim-morphin .sffm-flymenu-trigger img,
.sffm-flymenu-show.sffm-fullscreen-anim-morphin .sffm-flymenu-trigger .sffm-toggle-button {
display: none;
}
.sffm-fullscreen-anim-morphin .sffm-flymenu-trigger:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: var(--sffm-trigger-btn-bg-color, #000);
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
transform-origin: 50%;
transform: scale(0.9);
transition: all 0.3s ease;
}
.sffm-fullscreen-anim-morphin .sffm-flymenu-trigger:hover:before {
background: var(--sffm-trigger-btn-bg-color-hover, var(--sffm-trigger-btn-bg-color, #000));
}
.sffm-flymenu-trigger-block.sffm-shape-round .sffm-flymenu-trigger:before {
border-radius: 50%;
}
.sffm-flymenu-trigger-block.sffm-shape-rounded-square .sffm-flymenu-trigger:before {
border-radius: 0.2em;
}
.sffm-flymenu-show.sffm-fullscreen-anim-morphin .sffm-flymenu-trigger:before {
transform: scale(70);
} [class*=" sffm-fullscreen-anim-wave-animation-"] .sffm-flymenu-panel {
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
background: none !important;
}
[class*=" sffm-fullscreen-anim-wave-animation-"].sffm-bg-image .sffm-flymenu-panel:before,
[class*=" sffm-fullscreen-anim-wave-animation-"].sffm-bg-image .sffm-submenu-container:before {
display: none;
}
.sffm-flymenu-show[class*=" sffm-fullscreen-anim-wave-animation-"] .sffm-flymenu-panel {
opacity: 1;
visibility: visible;
}
[class*=" sffm-fullscreen-anim-wave-animation-"] .sffm-flymenu-header,
[class*=" sffm-fullscreen-anim-wave-animation-"] .sffm-flymenu-footer,
[class*=" sffm-fullscreen-anim-wave-animation-"] .sffm-menu-none .sffm-menu > .sffm-menu-item > .sffm-menu-item-link {
opacity: 0;
transition: all 0.3s ease 0.8s !important;
}
.sffm-flymenu-show[class*=" sffm-fullscreen-anim-wave-animation-"] .sffm-flymenu-header,
.sffm-flymenu-show[class*=" sffm-fullscreen-anim-wave-animation-"] .sffm-flymenu-footer,
.sffm-flymenu-show[class*=" sffm-fullscreen-anim-wave-animation-"] .sffm-menu-none .sffm-menu > .sffm-menu-item > .sffm-menu-item-link {
opacity: 1;
}
.sffm-flymenu-show.sffm-flymenu-animating[class*=" sffm-fullscreen-anim-wave-animation-"] .sffm-menu > .sffm-menu-item:nth-of-type(1) > .sffm-menu-item-link {
transition-delay: 0.8s;
}
.sffm-flymenu-show.sffm-flymenu-animating[class*=" sffm-fullscreen-anim-wave-animation-"] .sffm-menu > .sffm-menu-item:nth-of-type(2) > .sffm-menu-item-link {
transition-delay: 0.85s;
}
.sffm-flymenu-show.sffm-flymenu-animating[class*=" sffm-fullscreen-anim-wave-animation-"] .sffm-menu > .sffm-menu-item:nth-of-type(3) > .sffm-menu-item-link {
transition-delay: 0.9s;
}
.sffm-flymenu-show.sffm-flymenu-animating[class*=" sffm-fullscreen-anim-wave-animation-"] .sffm-menu > .sffm-menu-item:nth-of-type(4) > .sffm-menu-item-link {
transition-delay: 0.95s;
}
.sffm-flymenu-show.sffm-flymenu-animating[class*=" sffm-fullscreen-anim-wave-animation-"] .sffm-menu > .sffm-menu-item:nth-of-type(5) > .sffm-menu-item-link {
transition-delay: 1s;
}
.sffm-flymenu-show.sffm-flymenu-animating[class*=" sffm-fullscreen-anim-wave-animation-"] .sffm-menu > .sffm-menu-item:nth-of-type(6) > .sffm-menu-item-link {
transition-delay: 1.05s;
}
.sffm-flymenu-show.sffm-flymenu-animating[class*=" sffm-fullscreen-anim-wave-animation-"] .sffm-menu > .sffm-menu-item:nth-of-type(7) > .sffm-menu-item-link {
transition-delay: 1.1s;
}
.sffm-flymenu-show.sffm-flymenu-animating[class*=" sffm-fullscreen-anim-wave-animation-"] .sffm-menu > .sffm-menu-item:nth-of-type(8) > .sffm-menu-item-link {
transition-delay: 1.15s;
}
.sffm-flymenu-show.sffm-flymenu-animating[class*=" sffm-fullscreen-anim-wave-animation-"] .sffm-menu > .sffm-menu-item:nth-of-type(9) > .sffm-menu-item-link {
transition-delay: 1.2s;
}
.sffm-flymenu-show.sffm-flymenu-animating[class*=" sffm-fullscreen-anim-wave-animation-"] .sffm-menu > .sffm-menu-item:nth-of-type(10) > .sffm-menu-item-link {
transition-delay: 1.25s;
}
.sffm-flymenu-show.sffm-flymenu-animating[class*=" sffm-fullscreen-anim-wave-animation-"] .sffm-menu > .sffm-menu-item:nth-of-type(11) > .sffm-menu-item-link {
transition-delay: 1.3s;
}
.sffm-flymenu-show.sffm-flymenu-animating[class*=" sffm-fullscreen-anim-wave-animation-"] .sffm-menu > .sffm-menu-item:nth-of-type(12) > .sffm-menu-item-link {
transition-delay: 1.35s;
}
.sffm-flymenu-show.sffm-flymenu-animating[class*=" sffm-fullscreen-anim-wave-animation-"] .sffm-menu > .sffm-menu-item:nth-of-type(13) > .sffm-menu-item-link {
transition-delay: 1.4s;
}
.sffm-flymenu-show.sffm-flymenu-animating[class*=" sffm-fullscreen-anim-wave-animation-"] .sffm-menu > .sffm-menu-item:nth-of-type(14) > .sffm-menu-item-link {
transition-delay: 1.45s;
}
.sffm-flymenu-show.sffm-flymenu-animating[class*=" sffm-fullscreen-anim-wave-animation-"] .sffm-menu > .sffm-menu-item:nth-of-type(15) > .sffm-menu-item-link {
transition-delay: 1.5s;
}
.sffm-flymenu-show.sffm-flymenu-animating[class*=" sffm-fullscreen-anim-wave-animation-"] .sffm-menu > .sffm-menu-item:nth-of-type(16) > .sffm-menu-item-link {
transition-delay: 1.55s;
}
.sffm-flymenu-show.sffm-flymenu-animating[class*=" sffm-fullscreen-anim-wave-animation-"] .sffm-menu > .sffm-menu-item:nth-of-type(17) > .sffm-menu-item-link {
transition-delay: 1.6s;
}
.sffm-flymenu-show.sffm-flymenu-animating[class*=" sffm-fullscreen-anim-wave-animation-"] .sffm-menu > .sffm-menu-item:nth-of-type(18) > .sffm-menu-item-link {
transition-delay: 1.65s;
}
.sffm-flymenu-show.sffm-flymenu-animating[class*=" sffm-fullscreen-anim-wave-animation-"] .sffm-menu > .sffm-menu-item:nth-of-type(19) > .sffm-menu-item-link {
transition-delay: 1.7s;
}
.sffm-flymenu-show.sffm-flymenu-animating[class*=" sffm-fullscreen-anim-wave-animation-"] .sffm-menu > .sffm-menu-item:nth-of-type(20) > .sffm-menu-item-link {
transition-delay: 1.75s;
}
.sffm-full-screen-menu-column-2 .sffm-flymenu-panel-content,
.sffm-full-screen-menu-column-3 .sffm-flymenu-panel-content {
display: grid;
gap: 40px;
}
.sffm-full-screen-menu-column-2 .sffm-flymenu-panel-content {
grid-template-columns: repeat(2, 1fr);
}
.sffm-full-screen-menu-column-3 .sffm-flymenu-panel-content {
grid-template-columns: repeat(3, 1fr);
}
.sffm-flymenu-v-align-middle .sffm-full-screen-menu-column-2 .sffm-flymenu-panel-content,
.sffm-flymenu-v-align-middle .sffm-full-screen-menu-column-3 .sffm-flymenu-panel-content,
.sffm-flymenu-v-align-stretch .sffm-full-screen-menu-column-2 .sffm-flymenu-panel-content,
.sffm-flymenu-v-align-stretch .sffm-full-screen-menu-column-3 .sffm-flymenu-panel-content {
align-items: center;
}
.sffm-flymenu-v-align-bottom .sffm-full-screen-menu-column-2 .sffm-flymenu-panel-content,
.sffm-flymenu-v-align-bottom .sffm-full-screen-menu-column-3 .sffm-flymenu-panel-content {
align-items: flex-end;
}
.sffm-shape-overlays {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 99;
visibility: hidden;
transition-delay: 1s;
}
.sffm-flymenu-show .sffm-shape-overlays {
visibility: visible;
transition-delay: 0s;
}
.sffm-shape-overlays path:nth-of-type(1) {
fill: var(--sffm-wave-color-1, #c4dbea);
}
.sffm-shape-overlays path:nth-of-type(2) {
fill: var(--sffm-wave-color-2, #4c688b);
}
.sffm-shape-overlays path:nth-of-type(3) {
fill: var(--sffm-wave-color-3, #2e496a);
}
.sffm-shape-overlays path:nth-of-type(4) {
fill: var(--sffm-wave-color-4, #17a398);
}
.sffm-full-screen-menu .sffm-menu > .sffm-menu-item {
transition: all 0.2s ease;
} .sffm-flymenu-hide .sffm-menu-slide-bottom .sffm-menu > .sffm-menu-item > .sffm-menu-item-link {
transform: translateY(100px);
opacity: 0;
}
.sffm-flymenu-show .sffm-menu-slide-bottom .sffm-menu > .sffm-menu-item > .sffm-menu-item-link {
transform: translateY(0);
opacity: 1;
} .sffm-flymenu-hide .sffm-menu-slide-top .sffm-menu > .sffm-menu-item > .sffm-menu-item-link {
transform: translateY(-100px);
opacity: 0;
}
.sffm-flymenu-show .sffm-menu-slide-top .sffm-menu > .sffm-menu-item > .sffm-menu-item-link {
transform: translateY(0);
opacity: 1;
} .sffm-flymenu-hide .sffm-menu-slide-right .sffm-menu > .sffm-menu-item > .sffm-menu-item-link {
transform: translateX(100px);
opacity: 0;
}
.sffm-flymenu-show .sffm-menu-slide-right .sffm-menu > .sffm-menu-item > .sffm-menu-item-link {
transform: translateX(0);
opacity: 1;
} .sffm-flymenu-hide .sffm-menu-slide-left .sffm-menu > .sffm-menu-item > .sffm-menu-item-link {
transform: translateX(-100px);
opacity: 0;
}
.sffm-flymenu-show .sffm-menu-slide-left .sffm-menu > .sffm-menu-item > .sffm-menu-item-link {
transform: translateX(0);
opacity: 1;
} .sffm-flymenu-hide .sffm-menu-slide-top-rotate .sffm-menu > .sffm-menu-item > .sffm-menu-item-link {
transform: translateY(100px) rotate(10deg);
opacity: 0;
}
.sffm-flymenu-show .sffm-menu-slide-top-rotate .sffm-menu > .sffm-menu-item > .sffm-menu-item-link {
transform: translateY(0) rotate(0);
opacity: 1;
} .sffm-menu-none .sffm-menu > .sffm-menu-item > .sffm-menu-item-link {
transition-delay: 0s !important;
}
.sffm-flymenu-animating .sffm-menu > .sffm-menu-item > .sffm-menu-item-link {
transition: all 0.3s ease;
}
.sffm-flymenu-show.sffm-flymenu-animating .sffm-menu > .sffm-menu-item:nth-of-type(1) > .sffm-menu-item-link {
transition-delay: 0.3s;
}
.sffm-flymenu-show.sffm-flymenu-animating .sffm-menu > .sffm-menu-item:nth-of-type(2) > .sffm-menu-item-link {
transition-delay: 0.35s;
}
.sffm-flymenu-show.sffm-flymenu-animating .sffm-menu > .sffm-menu-item:nth-of-type(3) > .sffm-menu-item-link {
transition-delay: 0.4s;
}
.sffm-flymenu-show.sffm-flymenu-animating .sffm-menu > .sffm-menu-item:nth-of-type(4) > .sffm-menu-item-link {
transition-delay: 0.45s;
}
.sffm-flymenu-show.sffm-flymenu-animating .sffm-menu > .sffm-menu-item:nth-of-type(5) > .sffm-menu-item-link {
transition-delay: 0.5s;
}
.sffm-flymenu-show.sffm-flymenu-animating .sffm-menu > .sffm-menu-item:nth-of-type(6) > .sffm-menu-item-link {
transition-delay: 0.55s;
}
.sffm-flymenu-show.sffm-flymenu-animating .sffm-menu > .sffm-menu-item:nth-of-type(7) > .sffm-menu-item-link {
transition-delay: 0.6s;
}
.sffm-flymenu-show.sffm-flymenu-animating .sffm-menu > .sffm-menu-item:nth-of-type(8) > .sffm-menu-item-link {
transition-delay: 0.65s;
}
.sffm-flymenu-show.sffm-flymenu-animating .sffm-menu > .sffm-menu-item:nth-of-type(9) > .sffm-menu-item-link {
transition-delay: 0.7s;
}
.sffm-flymenu-show.sffm-flymenu-animating .sffm-menu > .sffm-menu-item:nth-of-type(10) > .sffm-menu-item-link {
transition-delay: 0.75s;
}
.sffm-flymenu-show.sffm-flymenu-animating .sffm-menu > .sffm-menu-item:nth-of-type(11) > .sffm-menu-item-link {
transition-delay: 0.8s;
}
.sffm-flymenu-show.sffm-flymenu-animating .sffm-menu > .sffm-menu-item:nth-of-type(12) > .sffm-menu-item-link {
transition-delay: 0.85s;
}
.sffm-flymenu-show.sffm-flymenu-animating .sffm-menu > .sffm-menu-item:nth-of-type(13) > .sffm-menu-item-link {
transition-delay: 0.9s;
}
.sffm-flymenu-show.sffm-flymenu-animating .sffm-menu > .sffm-menu-item:nth-of-type(14) > .sffm-menu-item-link {
transition-delay: 0.95s;
}
.sffm-flymenu-show.sffm-flymenu-animating .sffm-menu > .sffm-menu-item:nth-of-type(15) > .sffm-menu-item-link {
transition-delay: 1s;
}
.sffm-flymenu-show.sffm-flymenu-animating .sffm-menu > .sffm-menu-item:nth-of-type(16) > .sffm-menu-item-link {
transition-delay: 1.05s;
}
.sffm-flymenu-show.sffm-flymenu-animating .sffm-menu > .sffm-menu-item:nth-of-type(17) > .sffm-menu-item-link {
transition-delay: 1.1s;
}
.sffm-flymenu-show.sffm-flymenu-animating .sffm-menu > .sffm-menu-item:nth-of-type(18) > .sffm-menu-item-link {
transition-delay: 1.15s;
}
.sffm-flymenu-show.sffm-flymenu-animating .sffm-menu > .sffm-menu-item:nth-of-type(19) > .sffm-menu-item-link {
transition-delay: 2.1s;
}
.sffm-flymenu-show.sffm-flymenu-animating .sffm-menu > .sffm-menu-item:nth-of-type(20) > .sffm-menu-item-link {
transition-delay: 2.2s;
} .sffm-scrollbar-off.sffm-flymenu-v-align-middle .sffm-flymenu-panel-content,
.sffm-scrollbar-off.sffm-flymenu-v-align-stretch .sffm-submenu-container .sffm-submenu-panel-scroller,
.sffm-scrollbar-off.sffm-flymenu-v-align-middle .sffm-submenu-container .sffm-submenu-panel-scroller,
.sffm-scrollbar-on.sffm-flymenu-v-align-middle .mCustomScrollBox,
.sffm-scrollbar-on.sffm-flymenu-v-align-stretch .mCustomScrollBox {
justify-content: center;
}
.sffm-scrollbar-off.sffm-flymenu-v-align-top .sffm-flymenu-panel-content,
.sffm-scrollbar-off.sffm-flymenu-v-align-top .sffm-submenu-container .sffm-submenu-panel-scroller,
.sffm-scrollbar-on.sffm-flymenu-v-align-top .mCustomScrollBox {
justify-content: flex-start;
}
.sffm-scrollbar-off.sffm-flymenu-v-align-bottom .sffm-flymenu-panel-content,
.sffm-scrollbar-off.sffm-flymenu-v-align-bottom .sffm-submenu-container .sffm-submenu-panel-scroller,
.sffm-scrollbar-on.sffm-flymenu-v-align-bottom .mCustomScrollBox {
justify-content: flex-end;
}
.sffm-flymenu-v-align-stretch .sffm-flymenu-body {
flex-grow: 1;
display: flex;
align-items: center;
}
.sffm-submenu-container .sffm-submenu-panel-scroller {
display: flex;
flex-direction: column;
position: relative;
overflow: hidden auto;
height: 100%;
} .sffm-submenu-container .sffm-submenu-panel-scroller::-webkit-scrollbar {
width: var(--sffm-scrollbar-width, 4px);
}
.sffm-submenu-container .sffm-submenu-panel-scroller::-webkit-scrollbar-track {
background: var(--sffm-scrollbar-drag-bar-color, rgba(255, 255, 255, 0.75));
}
.sffm-submenu-container .sffm-submenu-panel-scroller::-webkit-scrollbar-thumb {
background: var(--sffm-scrollbar-drag-rail-color, rgba(0, 0, 0, 0.4));
}
.sffm-submenu-container .sffm-submenu-panel {
padding: var(--sffm-panel-spacing-top, 40px) var(--sffm-panel-spacing-right, 40px) var(--sffm-panel-spacing-bottom, 40px) var(--sffm-panel-spacing-left, 40px);
max-height: 100%;
} .sffm-bg-image .sffm-flymenu-panel {
background-image: var(--sffm-panel-background-image);
background-size: var(--sffm-panel-background-size, cover);
background-repeat: var(--sffm-panel-background-repeat, repeat);
background-attachment: scroll;
background-position: var(--sffm-panel-background-position, center center);
}
.sffm-bg-image .sffm-submenu-container {
background-image: var(--sffm-panel-background-image);
background-size: var(--sffm-panel-background-size, cover);
background-repeat: var(--sffm-panel-background-repeat, repeat);
background-attachment: var(--sffm-panel-background-attachment, scroll);
background-position: var(--sffm-panel-background-position, center center);
}
.sffm-bg-image .sffm-flymenu-panel:before,
.sffm-bg-image .sffm-submenu-container:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
opacity: 0.9;
background: var(--sffm-panel-overlay-color, transparent);
} .sffm-video-bg-wrap {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
}
.sffm-video-bg-wrap:after,
.sffm-bg-video .sffm-submenu-container:before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
opacity: 0.9;
background: var(--sffm-panel-video-overlay-color, transparent);
}
.sffm-bg-video .sffm-submenu-container {
background-image: var(--sffm-panel-video-background-image);
background-size: cover;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center;
} .sffm-layout-icon-menu .sffm-flymenu-trigger-wrap {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
.sffm-layout-icon-menu .sffm-flymenu-trigger {
position: relative;
background: none;
height: 70px;
width: 70px;
}
.sffm-layout-icon-menu .sffm-flymenu-trigger-btn {
display: flex;
align-items: center;
justify-content: center;
position: relative;
background: none;
height: 70px;
width: 70px;
font-size: var(--sffm-trigger-btn-icon-size, 24px);
color: var(--sffm-trigger-btn-icon-color, #FFF);
}
.sffm-layout-icon-menu .sffm-flymenu-trigger-btn:hover {
background: none;
color: var(--sffm-trigger-btn-icon-color-hover, var(--sffm-trigger-btn-icon-color, #FFF));
}
.sffm-layout-icon-menu .sffm-flymenu-trigger-btn img {
width: var(--sffm-trigger-btn-image-size, 100%);
}
.sffm-layout-icon-menu .sffm-flymenu-panel-content {
padding: var(--sffm-panel-spacing-top, 40px) 0 var(--sffm-panel-spacing-bottom, 40px) 0;
}
.sffm-flymenu-show.sffm-layout-icon-menu .sffm-flymenu-panel-content {
padding: var(--sffm-panel-spacing-top, 40px) var(--sffm-panel-spacing-right, 40px) var(--sffm-panel-spacing-bottom, 40px) var(--sffm-panel-spacing-left, 40px);
}
.sffm-flymenu-hide.sffm-layout-icon-menu .sffm-flymenu-header {
padding: 0 10px;
}
.sffm-layout-icon-menu .sffm-flymenu-panel {
transition: all 0.1s ease-in-out;
}
.sffm-layout-icon-menu .sffm-submenu-menu-drop .sffm-menu-container ul ul {
margin-left: calc(80px - var(--sffm-panel-spacing-left, 40px));
}
.sffm-layout-icon-menu .sffm-menu-item-link-depth-0 .sffm-menu-item-description {
margin-left: 80px;
}
.sffm-layout-icon-menu .sffm-submenu-menu-drop .sffm-menu-container ul ul ul {
margin-left: 15px;
}
.sffm-flymenu-hide.sffm-layout-icon-menu.sffm-flymenu-pos-left .sffm-flymenu-panel.sffm-submenu-animate {
left: -80px;
}
.sffm-flymenu-hide.sffm-layout-icon-menu.sffm-flymenu-pos-right .sffm-flymenu-panel.sffm-submenu-animate {
right: -80px;
}
.sffm-flymenu-hide.sffm-layout-icon-menu.sffm-flymenu-pos-left .sffm-flymenu-panel,
.sffm-flymenu-hide.sffm-layout-icon-menu.sffm-flymenu-pos-left.sffm-submenu-animate-loaded .sffm-flymenu-panel.sffm-submenu-animate {
left: 0;
}
.sffm-flymenu-hide.sffm-layout-icon-menu.sffm-flymenu-pos-right .sffm-flymenu-panel,
.sffm-flymenu-hide.sffm-layout-icon-menu.sffm-flymenu-pos-right.sffm-submenu-animate-loaded .sffm-flymenu-panel.sffm-submenu-animate {
right: 0;
}
.sffm-layout-icon-menu .sffm-menu-container li.sffm-menu-item .sffm-menu-item-notification-label {
margin-left: 10px;
}
.sffm-flymenu-hide.sffm-layout-icon-menu .sffm-flymenu-panel {
width: 80px !important;
}
.sffm-flymenu-hide.sffm-layout-icon-menu li.sffm-menu-item .sffm-menu-item-link-depth-0,
.sffm-flymenu-hide.sffm-layout-icon-menu .sffm-flymenu-body {
padding-left: 0;
padding-right: 0;
margin-left: 0;
margin-right: 0;
}
.sffm-flymenu-hide.sffm-layout-icon-menu .sffm-menu-item-link .sffm-menu-item-label,
.sffm-flymenu-hide.sffm-layout-icon-menu .sffm-menu-item-link .sffm-menu-item-notification-label,
.sffm-flymenu-hide.sffm-layout-icon-menu .sffm-menu-container li.sffm-menu-item .sffm-menu-item-description,
.sffm-flymenu-hide.sffm-layout-icon-menu .sffm-menu-container li.sffm-menu-item .sffm-addditional-content,
.sffm-flymenu-hide.sffm-layout-icon-menu .sffm-menu-container li.sffm-menu-item .sffm-submenu-toggle {
display: none !important;
}
.sffm-flymenu-show.sffm-layout-icon-menu .sffm-menu-item-link .sffm-menu-item-label,
.sffm-flymenu-show.sffm-layout-icon-menu .sffm-menu-item-link .sffm-menu-item-notification-label,
.sffm-flymenu-show.sffm-layout-icon-menu .sffm-menu-container li.sffm-menu-item .sffm-menu-item-description,
.sffm-flymenu-show.sffm-layout-icon-menu .sffm-menu-container li.sffm-menu-item .sffm-addditional-content,
.sffm-flymenu-show.sffm-layout-icon-menu .sffm-menu-container li.sffm-menu-item .sffm-submenu-toggle {
width: auto;
opacity: 1;
transition: opacity .25s ease 0.1s;
}
.sffm-flymenu-hide.sffm-layout-icon-menu .sffm-flymenu-footer,
.sffm-flymenu-hide.sffm-layout-icon-menu .sffm-panel-social-icons,
.sffm-flymenu-show.sffm-layout-icon-menu ul.sffm-iconmenu-social-icons,
.sffm-flymenu-hide.sffm-layout-icon-menu .sffm-header-title-tagline,
.sffm-flymenu-hide.sffm-layout-icon-menu .sffm-header-custom-content,
.sffm-flymenu-hide.sffm-layout-icon-menu .sffm-panel-search,
.sffm-flymenu-hide.sffm-layout-icon-menu .sffm-submenu.sffm-submenu-open,
.sffm-flymenu-hide.sffm-layout-icon-menu li.sffm-menu-item .sffm-menu-item-description {
display: none !important;
}
.sffm-layout-icon-menu li.sffm-menu-item .sffm-menu-item-link-depth-0 {
transition: none !important;
transform: none !important;
opacity: 1 !important;
margin-left: calc(var(--sffm-panel-spacing-left, 40px) * -1);
}
.sffm-flymenu-hide.sffm-layout-icon-menu .sffm-header-image img {
width: 50px;
}
.sffm-layout-icon-menu li.sffm-menu-item .sffm-menu-item-link-depth-0 .sffm-menu-link-items {
gap: 0;
}
.sffm-layout-icon-menu li.sffm-menu-item .sffm-menu-item-link-depth-0 .sffm-menu-item-title {
gap: 0;
width: 100%;
}
.sffm-layout-icon-menu li.sffm-menu-item .sffm-menu-item-link-depth-0 .sffm-menu-item-label {
white-space: nowrap;
overflow: hidden;
width: calc(100% - 80px);
text-overflow: ellipsis;
}
.sffm-layout-icon-menu li.sffm-menu-item .sffm-menu-item-link-depth-0 .sffm-menu-item-title i {
width: 80px;
min-width: 80px;
display: flex;
justify-content: center;
}
ul.sffm-iconmenu-social-icons {
list-style: none;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
margin: 30px 0 0;
padding: 0;
}
ul.sffm-iconmenu-social-icons li a {
display: flex;
justify-content: center;
align-items: center;
height: 40px;
width: 40px;
font-size: 20px;
background: #333;
color: #FFF;
background: var(--sffm-socialicon-bg-color, #333);
color: var(--sffm-socialicon-icon-color, #FFF);
} .sffm-menu-item-link .sffm-menu-item-title {
transition: all 0.3s ease;
}
.sffm-hover-linear-slide .sffm-flymenu-body.sffm-align-left .sffm-menu-item-link:hover .sffm-menu-item-title,
.sffm-hover-linear-slide .sffm-flymenu-body.sffm-align-center .sffm-menu-item-link:hover .sffm-menu-item-title {
transform: translateX(10px);
}
.sffm-hover-linear-slide .sffm-flymenu-body.sffm-align-right .sffm-menu-item-link:hover .sffm-menu-item-title {
transform: translateX(-10px);
}
.sffm-icon-menu.sffm-hover-linear-slide .sffm-menu-item-link:hover .sffm-menu-item-title {
transform: translateX(10px);
}
.sffm-hover-side-border .sffm-menu-item-link .sffm-menu-item-title:before {
position: absolute;
content: "";
top: 0;
height: 0;
width: 5px;
background: var(--sffm-menu-label-color-hover, var(--sffm-menu-label-color, #FFF));
border-radius: 3px;
transition: all 0.3s ease;
}
.sffm-hover-side-border .sffm-flymenu-body.sffm-align-left .sffm-menu-item-link .sffm-menu-item-title:before,
.sffm-hover-side-border .sffm-flymenu-body.sffm-align-center .sffm-menu-item-link .sffm-menu-item-title:before {
left: -15px;
}
.sffm-hover-side-border .sffm-flymenu-body.sffm-align-right .sffm-menu-item-link .sffm-menu-item-title:before {
right: -15px;
}
.sffm-icon-menu.sffm-hover-side-border .sffm-menu-item-link.sffm-menu-item-link-depth-0 .sffm-menu-item-title:before {
left: 0;
}
.sffm-icon-menu.sffm-hover-side-border .sffm-menu-item-link .sffm-menu-item-title:before {
left: -15px;
}
.sffm-hover-side-border .sffm-menu-item-link:hover .sffm-menu-item-title:before {
height: 100%;
}
.sffm-hover-border-bottom .sffm-menu-item-link .sffm-menu-link-items:before {
position: absolute;
content: "";
bottom: 0;
height: 1px;
width: 0;
background: var(--sffm-menu-label-color-hover, var(--sffm-menu-label-color, #FFF));
transition: all 0.3s ease;
}
.sffm-hover-border-bottom .sffm-flymenu-body.sffm-align-left .sffm-menu-item-link .sffm-menu-link-items:before {
left: 0;
}
.sffm-hover-border-bottom .sffm-flymenu-body.sffm-align-right .sffm-menu-item-link .sffm-menu-link-items:before {
right: 0;
}
.sffm-hover-border-bottom .sffm-menu-item-link:hover .sffm-menu-link-items:before {
width: 100%;
} .sffm-submenu-container div.wpforms-container-full,
.sffm-submenu-container div.wpforms-container-full .wpforms-form * {
visibility: inherit;
}
@media screen and (max-width:768px) {
.sffm-flymenu-pos-right .sffm-submenu-container {
right: 0;
z-index: 9;
}
.sffm-flymenu-pos-left .sffm-submenu-container {
left: 0;
z-index: 9;
}
}