.sffm-floatmenu-wrapper .sffm-floatmenu {
position: fixed;
margin: 0;
padding: 0;
z-index: var(--sffm-menu-z-index, 999);
}
body.admin-bar [class*="sffm-position-top-"] .sffm-floatmenu {
margin-top: 32px;
}
.sffm-position-top-left .sffm-floatmenu {
top: var(--sffm-menu-offset-top, 0);
left: var(--sffm-menu-offset-left, 0);
}
.sffm-position-top-middle .sffm-floatmenu {
top: var(--sffm-menu-offset-top, 0);
left: 50%;
transform: translateX(-50%);
}
.sffm-position-top-right .sffm-floatmenu {
top: var(--sffm-menu-offset-top, 0);
right: var(--sffm-menu-offset-right, 0);
}
.sffm-position-bottom-left .sffm-floatmenu {
bottom: var(--sffm-menu-offset-bottom, 0);
left: var(--sffm-menu-offset-left, 0);
}
.sffm-position-bottom-middle .sffm-floatmenu {
bottom: var(--sffm-menu-offset-bottom, 0);
left: 50%;
transform: translateX(-50%);
}
.sffm-position-bottom-right .sffm-floatmenu {
bottom: var(--sffm-menu-offset-bottom, 0);
right: var(--sffm-menu-offset-right, 0);
}
.sffm-position-middle-left .sffm-floatmenu {
top: 50%;
left: var(--sffm-menu-offset-left, 0);
transform: translateY(-50%);
}
.sffm-position-middle-right .sffm-floatmenu {
top: 50%;
right: var(--sffm-menu-offset-right, 0);
transform: translateY(-50%);
}
.sffm-orientation-horizontal .sffm-menu {
flex-direction: row;
}
.sffm-orientation-vertical .sffm-menu {
flex-direction: column;
}
.sffm-orientation-horizontal.sffm-position-top-right .sffm-menu,
.sffm-orientation-horizontal.sffm-position-bottom-right .sffm-menu {
flex-direction: row-reverse;
}
.sffm-orientation-vertical.sffm-position-bottom-left .sffm-menu,
.sffm-orientation-vertical.sffm-position-bottom-right .sffm-menu {
flex-direction: column-reverse;
}
.sffm-floatmenu-wrapper ul.sffm-menu {
margin: 0;
padding: 0;
list-style: none;
display: flex;
align-items: center;
justify-content: center;
justify-items: center;
gap: var(--sffm-button-gap, 5px);
}
.sffm-floatmenu-wrapper ul.sffm-menu li > a {
display: flex;
align-items: center;
justify-content: center;
background: var(--sffm-button-bg, #000);
color: var(--sffm-button-color, #FFF);
height: var(--sffm-buttton-size, 50px);
width: var(--sffm-buttton-size, 50px);
font-size: var(--sffm-buttton-font-size, 20px);
text-decoration: none;
transition: all 0.3s ease;
border: none !important;
}
.sffm-floatmenu-wrapper ul.sffm-menu li > a > img {
max-width: 100%;
width: var(--sffm-buttton-font-size, 20px);
height: auto;
}
.sffm-floatmenu-wrapper ul.sffm-menu li:hover > a {
background: var(--sffm-button-bg-hover, var(--sffm-button-bg, #000));
color: var(--sffm-button-color-hover, var(--sffm-button-color, #FFF));
}
.sffm-shape-round ul.sffm-menu li > a,
.sffm-shape-round .sffm-floatmenu-trigger,
.sffm-shape-round .animate--ripple:before {
clip-path: circle(50% at 50% 50%);
}
.sffm-shape-triangle ul.sffm-menu li > a,
.sffm-shape-triangle .sffm-floatmenu-trigger,
.sffm-shape-triangle .animate--ripple:before {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.sffm-shape-triangle ul.sffm-menu li > a i,
.sffm-shape-triangle .sffm-floatmenu-trigger i,
.sffm-shape-triangle .sffm-floatmenu-trigger .sffm-toggle-button {
transform: translateY(calc(var(--sffm-buttton-size, 50px)/8));
}
.sffm-shape-rounded-square ul.sffm-menu li > a,
.sffm-shape-rounded-square .sffm-floatmenu-trigger,
.sffm-shape-rounded-square .animate--ripple:before {
border-radius: 0.3em;
}
.sffm-shape-rhombus ul.sffm-menu li > a,
.sffm-shape-rhombus .sffm-floatmenu-trigger,
.sffm-shape-rhombus .animate--ripple:before {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.sffm-shape-pentagon ul.sffm-menu li > a,
.sffm-shape-pentagon .sffm-floatmenu-trigger,
.sffm-shape-pentagon .animate--ripple:before {
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}
.sffm-shape-pentagon ul.sffm-menu li > a i,
.sffm-shape-pentagon .sffm-floatmenu-trigger i,
.sffm-shape-pentagon .sffm-floatmenu-trigger .sffm-toggle-button {
transform: translateY(calc(var(--sffm-buttton-size, 50px)/20));
}
.sffm-shape-hexagon ul.sffm-menu li > a,
.sffm-shape-hexagon .sffm-floatmenu-trigger,
.sffm-shape-hexagon .animate--ripple:before {
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.sffm-shape-star ul.sffm-menu li > a,
.sffm-shape-star .sffm-floatmenu-trigger,
.sffm-shape-star .animate--ripple:before {
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.sffm-shape-rabbet ul.sffm-menu li > a,
.sffm-shape-rabbet .sffm-floatmenu-trigger,
.sffm-shape-rabbet .animate--ripple:before {
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-shape-oval ul.sffm-menu li > a {
clip-path: ellipse(50% 35% at 50% 50%);
}
.sffm-shape-oval.sffm-orientation-vertical ul.sffm-menu li > a,
.sffm-shape-oval .sffm-floatmenu-trigger,
.sffm-shape-oval .animate--ripple:before {
clip-path: ellipse(35% 50% at 50% 50%);
}
.sffm-shape-blob ul.sffm-menu li > a,
.sffm-shape-blob .sffm-floatmenu-trigger {
animation: sffm-border-transform 9s linear infinite;
}
.sffm-shape-blob .animate--ripple:before {
border-radius: 50%;
}
@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%;
}
}
.sffm-floatmenu-wrapper[class*="sffm-step-"] .sffm-floatmenu-show ul.sffm-menu li.sffm-menu-no-1 {
transition-delay: 0.05s;
}
.sffm-floatmenu-wrapper[class*="sffm-step-"] .sffm-floatmenu-show ul.sffm-menu li.sffm-menu-no-2 {
transition-delay: 0.1s;
}
.sffm-floatmenu-wrapper[class*="sffm-step-"] .sffm-floatmenu-show ul.sffm-menu li.sffm-menu-no-3 {
transition-delay: 0.15s;
}
.sffm-floatmenu-wrapper[class*="sffm-step-"] .sffm-floatmenu-show ul.sffm-menu li.sffm-menu-no-4 {
transition-delay: 0.2s;
}
.sffm-floatmenu-wrapper[class*="sffm-step-"] .sffm-floatmenu-show ul.sffm-menu li.sffm-menu-no-5 {
transition-delay: 0.25s;
}
.sffm-floatmenu-wrapper[class*="sffm-step-"] .sffm-floatmenu-show ul.sffm-menu li.sffm-menu-no-6 {
transition-delay: 0.3s;
}
.sffm-floatmenu-wrapper[class*="sffm-step-"] .sffm-floatmenu-show ul.sffm-menu li.sffm-menu-no-7 {
transition-delay: 0.35s;
}
.sffm-floatmenu-wrapper[class*="sffm-step-"] .sffm-floatmenu-show ul.sffm-menu li.sffm-menu-no-8 {
transition-delay: 0.4s;
}
.sffm-floatmenu-wrapper[class*="sffm-step-"] .sffm-floatmenu-show ul.sffm-menu li.sffm-menu-no-9 {
transition-delay: 0.45s;
}
.sffm-floatmenu-wrapper[class*="sffm-step-"] .sffm-floatmenu-show ul.sffm-menu li.sffm-menu-no-10 {
transition-delay: 0.5s;
}
.sffm-floatmenu-wrapper[class*="sffm-step-"] .sffm-floatmenu-show ul.sffm-menu li.sffm-menu-no-11 {
transition-delay: 0.55s;
}
.sffm-floatmenu-wrapper[class*="sffm-step-"] .sffm-floatmenu-show ul.sffm-menu li.sffm-menu-no-12 {
transition-delay: 0.6s;
}
.sffm-floatmenu-wrapper[class*="sffm-step-"] .sffm-floatmenu-show ul.sffm-menu li.sffm-menu-no-13 {
transition-delay: 0.65s;
}
.sffm-floatmenu-wrapper[class*="sffm-step-"] .sffm-floatmenu-show ul.sffm-menu li.sffm-menu-no-14 {
transition-delay: 0.7s;
}
.sffm-floatmenu-wrapper[class*="sffm-step-"] .sffm-floatmenu-show ul.sffm-menu li.sffm-menu-no-15 {
transition-delay: 0.75s;
}
.sffm-floatmenu-wrapper[class*="sffm-step-"] .sffm-floatmenu-show ul.sffm-menu li.sffm-menu-no-16 {
transition-delay: 0.8s;
}
.sffm-floatmenu-wrapper[class*="sffm-step-"] ul.sffm-menu li:nth-last-child(1) {
transition-delay: 0.05s;
}
.sffm-floatmenu-wrapper[class*="sffm-step-"] ul.sffm-menu li:nth-last-child(2) {
transition-delay: 0.1s;
}
.sffm-floatmenu-wrapper[class*="sffm-step-"] ul.sffm-menu li:nth-last-child(3) {
transition-delay: 0.15s;
}
.sffm-floatmenu-wrapper[class*="sffm-step-"] ul.sffm-menu li:nth-last-child(4) {
transition-delay: 0.2s;
}
.sffm-floatmenu-wrapper[class*="sffm-step-"] ul.sffm-menu li:nth-last-child(5) {
transition-delay: 0.25s;
}
.sffm-floatmenu-wrapper[class*="sffm-step-"] ul.sffm-menu li:nth-last-child(6) {
transition-delay: 0.3s;
}
.sffm-floatmenu-wrapper[class*="sffm-step-"] ul.sffm-menu li:nth-last-child(7) {
transition-delay: 0.35s;
}
.sffm-floatmenu-wrapper[class*="sffm-step-"] ul.sffm-menu li:nth-last-child(8) {
transition-delay: 0.4s;
}
.sffm-floatmenu-wrapper[class*="sffm-step-"] ul.sffm-menu li:nth-last-child(9) {
transition-delay: 0.45s;
}
.sffm-floatmenu-wrapper[class*="sffm-step-"] ul.sffm-menu li:nth-last-child(10) {
transition-delay: 0.5s;
}
.sffm-floatmenu-wrapper[class*="sffm-step-"] ul.sffm-menu li:nth-last-child(11) {
transition-delay: 0.55s;
}
.sffm-floatmenu-wrapper[class*="sffm-step-"] ul.sffm-menu li:nth-last-child(12) {
transition-delay: 0.6s;
}
.sffm-floatmenu-wrapper[class*="sffm-step-"] ul.sffm-menu li:nth-last-child(13) {
transition-delay: 0.65s;
}
.sffm-floatmenu-wrapper[class*="sffm-step-"] ul.sffm-menu li:nth-last-child(14) {
transition-delay: 0.7s;
}
.sffm-floatmenu-wrapper[class*="sffm-step-"] ul.sffm-menu li:nth-last-child(15) {
transition-delay: 0.75s;
}
.sffm-floatmenu-wrapper[class*="sffm-step-"] ul.sffm-menu li:nth-last-child(16) {
transition-delay: 0.8s;
}
.sffm-floatmenu-wrapper ul.sffm-menu li {
transform: translateX(calc(var(--sffm-translate-x, 0) * 1)) translateY(calc(var(--sffm-translate-y, 0) * 1)) scale(var(--sffm-scale, 1)) rotate(var(--sffm-rotate, 0));
opacity: var(--sffm-opacity, 1);
transition: all 0.3s ease;
position: relative;
filter: drop-shadow(var(--sffm-button-shadow-x, 0) var(--sffm-button-shadow-y, 0) var(--sffm-button-shadow-blur, 0) var(--sffm-button-shadow-color, transparent));
}
.sffm-floatmenu-wrapper .sffm-floatmenu-show ul.sffm-menu li {
transform: translateX(0) translateY(0) scale(var(--sffm-scale-hover, 1)) rotate(var(--sffm-rotate-hover, 0));
opacity: var(--sffm-opacity-hover, 1);
}
.sffm-floatmenu-wrapper.sffm-step-fade,
.sffm-floatmenu-wrapper.sffm-no-step-fade,
.sffm-floatmenu-wrapper.sffm-step-fade-scale,
.sffm-floatmenu-wrapper.sffm-no-step-fade-scale,
.sffm-floatmenu-wrapper.sffm-step-fade-rotate,
.sffm-floatmenu-wrapper.sffm-no-step-fade-rotate,
.sffm-floatmenu-wrapper.sffm-step-fade-rotate-scale,
.sffm-floatmenu-wrapper.sffm-no-step-fade-rotate-scale {
--sffm-opacity: 0;
--sffm-opacity-hover: 1;
}
.sffm-floatmenu-wrapper.sffm-step-scale,
.sffm-floatmenu-wrapper.sffm-no-step-scale,
.sffm-floatmenu-wrapper.sffm-step-fade-scale,
.sffm-floatmenu-wrapper.sffm-no-step-fade-scale,
.sffm-floatmenu-wrapper.sffm-step-rotate-scale,
.sffm-floatmenu-wrapper.sffm-no-step-rotate-scale,
.sffm-floatmenu-wrapper.sffm-step-fade-rotate-scale,
.sffm-floatmenu-wrapper.sffm-no-step-fade-rotate-scale {
--sffm-scale: 0;
--sffm-scale-hover: 1;
}
.sffm-floatmenu-wrapper.sffm-step-fade-rotate,
.sffm-floatmenu-wrapper.sffm-no-step-fade-rotate,
.sffm-floatmenu-wrapper.sffm-step-rotate-scale,
.sffm-floatmenu-wrapper.sffm-no-step-rotate-scale,
.sffm-floatmenu-wrapper.sffm-step-fade-rotate-scale,
.sffm-floatmenu-wrapper.sffm-no-step-fade-rotate-scale {
--sffm-rotate: 0;
--sffm-rotate-hover: 3600deg;
} .sffm-floatmenu-trigger-tooltip {
border-radius: var(--sffm-trigger-btn-tooltip-border-radius, 4px);
position: absolute;
opacity: 0;
padding: var(--sffm-trigger-btn-tooltip-spacing-top, 8px) var(--sffm-trigger-btn-tooltip-spacing-right, 8px) var(--sffm-trigger-btn-tooltip-spacing-bottom, 8px) var(--sffm-trigger-btn-tooltip-spacing-left, 8px);
visibility: hidden;
background: var(--sffm-trigger-btn-hover-bg-color, var(--sffm-trigger-btn-bg-color, var(--sffm-button-bg-hover, var(--sffm-button-bg, #000))));
color: var(--sffm-trigger-btn-hover-icon-color, var(--sffm-trigger-btn-icon-color, var(--sffm-button-color-hover, var(--sffm-button-color, #FFF))));
white-space: nowrap;
font-family: var(--sffm-trigger-btn-tooltip-font-family, inherit);
font-weight: var(--sffm-trigger-btn-tooltip-font-weight, 400);
font-style: var(--sffm-trigger-btn-tooltip-font-style, normal);
text-transform: var(--sffm-trigger-btn-tooltip-text-transform, none);
text-decoration: var(--sffm-trigger-btn-tooltip-text-decoration, none);
font-size: var(--sffm-trigger-btn-tooltip-font-size, 14px);
line-height: var(--sffm-trigger-btn-tooltip-line-height, 1.2);
letter-spacing: var(--sffm-trigger-btn-tooltip-letter-spacing, inherit);
transition: all 0.2s ease;
}
.sffm-floatmenu.sffm-floatmenu-show .sffm-floatmenu-trigger-tooltip {
display: none !important;
}
.sffm-position-top-left.sffm-floatmenu-wrapper .sffm-floatmenu-trigger-tooltip,
.sffm-position-middle-left.sffm-floatmenu-wrapper .sffm-floatmenu-trigger-tooltip,
.sffm-position-bottom-left.sffm-floatmenu-wrapper .sffm-floatmenu-trigger-tooltip {
top: 50%;
transform: translateY(-50%);
left: 100%;
margin-left: 0;
}
.sffm-position-top-right.sffm-floatmenu-wrapper .sffm-floatmenu-trigger-tooltip,
.sffm-position-middle-right.sffm-floatmenu-wrapper .sffm-floatmenu-trigger-tooltip,
.sffm-position-bottom-right.sffm-floatmenu-wrapper .sffm-floatmenu-trigger-tooltip {
top: 50%;
transform: translateY(-50%);
right: 100%;
margin-right: 0;
}
.sffm-position-top-middle.sffm-floatmenu-wrapper .sffm-floatmenu-trigger-tooltip {
transform: rotate(90deg) translateY(-50%);
transform-origin: 0 0;
left: 50%;
top: 100%;
margin-top: 0;
}
.sffm-position-bottom-middle.sffm-floatmenu-wrapper .sffm-floatmenu-trigger-tooltip {
transform: rotate(-90deg) translateY(50%);
transform-origin: 0 100%;
left: 50%;
bottom: 100%;
margin-bottom: 0;
}
.sffm-position-top-left.sffm-floatmenu-wrapper:hover .sffm-floatmenu-trigger-tooltip,
.sffm-position-middle-left.sffm-floatmenu-wrapper:hover .sffm-floatmenu-trigger-tooltip,
.sffm-position-bottom-left.sffm-floatmenu-wrapper:hover .sffm-floatmenu-trigger-tooltip {
margin-left: 15px;
}
.sffm-position-top-right.sffm-floatmenu-wrapper:hover .sffm-floatmenu-trigger-tooltip,
.sffm-position-middle-right.sffm-floatmenu-wrapper:hover .sffm-floatmenu-trigger-tooltip,
.sffm-position-bottom-right.sffm-floatmenu-wrapper:hover .sffm-floatmenu-trigger-tooltip {
margin-right: 15px;
}
.sffm-position-top-middle.sffm-floatmenu-wrapper:hover .sffm-floatmenu-trigger-tooltip {
margin-top: 15px;
}
.sffm-position-bottom-middle.sffm-floatmenu-wrapper:hover .sffm-floatmenu-trigger-tooltip {
margin-bottom: 15px;
}
.sffm-position-top-left.sffm-floatmenu-wrapper .sffm-floatmenu-trigger-tooltip:before,
.sffm-position-middle-left.sffm-floatmenu-wrapper .sffm-floatmenu-trigger-tooltip:before,
.sffm-position-bottom-left.sffm-floatmenu-wrapper .sffm-floatmenu-trigger-tooltip:before {
content: "";
position: absolute;
top: 50%;
right: 100%;
border-width: 5px;
border-style: solid;
border-color: transparent var(--sffm-trigger-btn-hover-bg-color, var(--sffm-trigger-btn-bg-color, var(--sffm-button-bg-hover, var(--sffm-button-bg, #000)))) transparent transparent;
transform: translateY(-50%);
}
.sffm-position-top-right.sffm-floatmenu-wrapper .sffm-floatmenu-trigger-tooltip:before,
.sffm-position-middle-right.sffm-floatmenu-wrapper .sffm-floatmenu-trigger-tooltip:before,
.sffm-position-bottom-right.sffm-floatmenu-wrapper .sffm-floatmenu-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-hover-bg-color, var(--sffm-trigger-btn-bg-color, var(--sffm-button-bg-hover, var(--sffm-button-bg, #000))));
transform: translateY(-50%);
}
.sffm-position-top-middle.sffm-floatmenu-wrapper .sffm-floatmenu-trigger-tooltip:before {
content: "";
position: absolute;
top: 50%;
right: 100%;
border-width: 5px;
border-style: solid;
border-color: transparent var(--sffm-trigger-btn-hover-bg-color, var(--sffm-trigger-btn-bg-color, var(--sffm-button-bg-hover, var(--sffm-button-bg, #000)))) transparent transparent;
transform: translateY(-50%);
}
.sffm-position-bottom-middle.sffm-floatmenu-wrapper .sffm-floatmenu-trigger-tooltip:before {
content: "";
position: absolute;
top: 50%;
right: 100%;
border-width: 5px;
border-style: solid;
border-color: transparent var(--sffm-trigger-btn-hover-bg-color, var(--sffm-trigger-btn-bg-color, var(--sffm-button-bg-hover, var(--sffm-button-bg, #000)))) transparent transparent;
transform: translateY(-50%);
}
.sffm-floatmenu-wrapper:hover .sffm-floatmenu-trigger-tooltip {
opacity: 1;
visibility: visible;
}
ul.sffm-menu li .sffm-tooltip {
border-radius: 4px;
position: absolute;
opacity: 0;
line-height: 1.2;
visibility: hidden;
background: var(--sffm-tooltip-bg-color, var(--sffm-button-bg-hover, var(--sffm-button-bg, #000)));
transition: all 0.2s ease;
}
ul.sffm-menu li .sffm-tooltip:before {
transition: all 0.2s ease;
}
ul.sffm-menu li:hover .sffm-tooltip {
opacity: 1;
visibility: visible;
}
ul.sffm-menu li .sffm-tooltip:hover {
--sffm-tooltip-bg-color: var(--sffm-tooltip-hover-bg-color);
}
ul.sffm-menu li .sffm-tooltip a {
display: block;
white-space: nowrap;
padding: 8px 20px;
color: var(--sffm-tooltip-text-color, var(--sffm-button-color-hover, var(--sffm-button-color, #FFF)));
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, inherit);
line-height: var(--sffm-tooltip-line-height, inherit);
letter-spacing: var(--sffm-tooltip-letter-spacing, inherit);
}
ul.sffm-menu li .sffm-tooltip:hover a {
--sffm-tooltip-text-color: var(--sffm-tooltip-hover-text-color);
}
.sffm-position-top-left.sffm-orientation-vertical ul.sffm-menu li .sffm-tooltip,
.sffm-position-middle-left.sffm-orientation-vertical ul.sffm-menu li .sffm-tooltip,
.sffm-position-bottom-left.sffm-orientation-vertical ul.sffm-menu li .sffm-tooltip {
left: 100%;
margin-left: var(--sffm-tooltip-indent, -20px);
top: 50%;
transform: translateY(-50%);
}
.sffm-position-top-right.sffm-orientation-vertical ul.sffm-menu li .sffm-tooltip,
.sffm-position-middle-right.sffm-orientation-vertical ul.sffm-menu li .sffm-tooltip,
.sffm-position-bottom-right.sffm-orientation-vertical ul.sffm-menu li .sffm-tooltip {
right: 100%;
margin-right: var(--sffm-tooltip-indent, -20px);
top: 50%;
transform: translateY(-50%);
}
.sffm-position-top-left.sffm-orientation-horizontal ul.sffm-menu li .sffm-tooltip,
.sffm-position-top-middle.sffm-orientation-horizontal ul.sffm-menu li .sffm-tooltip,
.sffm-position-top-right.sffm-orientation-horizontal ul.sffm-menu li .sffm-tooltip {
transform: rotate(90deg) translateY(-50%);
transform-origin: 0 0;
left: 50%;
top: 100%;
margin-top: var(--sffm-tooltip-indent, -20px);
}
.sffm-position-bottom-left.sffm-orientation-horizontal ul.sffm-menu li .sffm-tooltip,
.sffm-position-bottom-middle.sffm-orientation-horizontal ul.sffm-menu li .sffm-tooltip,
.sffm-position-bottom-right.sffm-orientation-horizontal ul.sffm-menu li .sffm-tooltip {
transform: rotate(-90deg) translateY(50%);
transform-origin: 0 100%;
left: 50%;
bottom: 100%;
margin-bottom: var(--sffm-tooltip-indent, -20px);
}
.sffm-position-top-left.sffm-orientation-vertical ul.sffm-menu li:hover .sffm-tooltip,
.sffm-position-middle-left.sffm-orientation-vertical ul.sffm-menu li:hover .sffm-tooltip,
.sffm-position-bottom-left.sffm-orientation-vertical ul.sffm-menu li:hover .sffm-tooltip {
margin-left: var(--sffm-tooltip-indent-hover, 10px);
}
.sffm-position-top-right.sffm-orientation-vertical ul.sffm-menu li:hover .sffm-tooltip,
.sffm-position-middle-right.sffm-orientation-vertical ul.sffm-menu li:hover .sffm-tooltip,
.sffm-position-bottom-right.sffm-orientation-vertical ul.sffm-menu li:hover .sffm-tooltip {
margin-right: var(--sffm-tooltip-indent-hover, 10px);
}
.sffm-position-top-left.sffm-orientation-horizontal ul.sffm-menu li:hover .sffm-tooltip,
.sffm-position-top-middle.sffm-orientation-horizontal ul.sffm-menu li:hover .sffm-tooltip,
.sffm-position-top-right.sffm-orientation-horizontal ul.sffm-menu li:hover .sffm-tooltip {
margin-top: var(--sffm-tooltip-indent-hover, 10px);
}
.sffm-position-bottom-left.sffm-orientation-horizontal ul.sffm-menu li:hover .sffm-tooltip,
.sffm-position-bottom-middle.sffm-orientation-horizontal ul.sffm-menu li:hover .sffm-tooltip,
.sffm-position-bottom-right.sffm-orientation-horizontal ul.sffm-menu li:hover .sffm-tooltip {
margin-bottom: var(--sffm-tooltip-indent-hover, 10px);
}
.sffm-position-bottom-left.sffm-orientation-horizontal ul.sffm-menu li .sffm-tooltip:before,
.sffm-position-bottom-middle.sffm-orientation-horizontal ul.sffm-menu li .sffm-tooltip:before,
.sffm-position-bottom-right.sffm-orientation-horizontal ul.sffm-menu li .sffm-tooltip:before,
.sffm-position-top-left.sffm-orientation-horizontal ul.sffm-menu li .sffm-tooltip:before,
.sffm-position-top-middle.sffm-orientation-horizontal ul.sffm-menu li .sffm-tooltip:before,
.sffm-position-top-right.sffm-orientation-horizontal ul.sffm-menu li .sffm-tooltip:before,
.sffm-position-top-left.sffm-orientation-vertical ul.sffm-menu li .sffm-tooltip:before,
.sffm-position-middle-left.sffm-orientation-vertical ul.sffm-menu li .sffm-tooltip:before,
.sffm-position-bottom-left.sffm-orientation-vertical ul.sffm-menu li .sffm-tooltip:before {
content: "";
position: absolute;
top: 50%;
right: 100%;
border-width: 5px;
border-style: solid;
border-color: transparent var(--sffm-tooltip-bg-color, var(--sffm-button-bg-hover, var(--sffm-button-bg, #000))) transparent transparent;
transform: translateY(-50%);
}
.sffm-position-top-right.sffm-orientation-vertical ul.sffm-menu li .sffm-tooltip:before,
.sffm-position-middle-right.sffm-orientation-vertical ul.sffm-menu li .sffm-tooltip:before,
.sffm-position-bottom-right.sffm-orientation-vertical ul.sffm-menu li .sffm-tooltip:before {
content: "";
position: absolute;
top: 50%;
left: 100%;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent var(--sffm-tooltip-bg-color, var(--sffm-button-bg-hover, var(--sffm-button-bg, #000)));
transform: translateY(-50%);
} .sffm-floatmenu-template-2.sffm-floatmenu-wrapper ul.sffm-menu li:hover > a {
height: calc(var(--sffm-buttton-size, 50px)*1.2);
width: calc(var(--sffm-buttton-size, 50px)*1.2);
} .sffm-floatmenu-template-3 ul.sffm-menu li .sffm-tooltip:before {
display: none;
}
.sffm-floatmenu-template-3 ul.sffm-menu li .sffm-tooltip {
height: 80%;
display: flex;
align-items: center;
}
.sffm-floatmenu-template-3 ul.sffm-menu li .sffm-tooltip a {
padding: 10px 20px;
}
.sffm-floatmenu-template-3 {
--sffm-tooltip-indent: 30px;
--sffm-tooltip-indent-hover: 5px;
} .sffm-floatmenu-template-4 {
--sffm-tooltip-bg-color: #7b0dae;
--sffm-tooltip-hover-bg-color: var(--sffm-tooltip-bg-color);
--sffm-tooltip-text-color: #FFF;
--sffm-tooltip-hover-text-color: var(--sffm-tooltip-text-color);
}
.sffm-floatmenu-template-4 ul.sffm-menu li .sffm-tooltip {
height: 100%;
display: flex;
align-items: center;
border-radius: 0;
}
.sffm-floatmenu-template-4 ul.sffm-menu li .sffm-tooltip a {
padding: 10px 20px;
}
.sffm-floatmenu-template-4 ul.sffm-menu li > a {
transition: none;
}
.sffm-floatmenu-template-4.sffm-left-side.sffm-shape-round.sffm-orientation-vertical ul.sffm-menu li .sffm-tooltip,
.sffm-floatmenu-template-4.sffm-top-side.sffm-shape-round.sffm-orientation-horizontal ul.sffm-menu li .sffm-tooltip,
.sffm-floatmenu-template-4.sffm-bottom-side.sffm-shape-round.sffm-orientation-horizontal ul.sffm-menu li .sffm-tooltip {
border-radius: 0 var(--sffm-buttton-size, 50px) var(--sffm-buttton-size, 50px) 0;
}
.sffm-floatmenu-template-4.sffm-right-side.sffm-shape-round.sffm-orientation-vertical ul.sffm-menu li .sffm-tooltip {
border-radius: var(--sffm-buttton-size, 50px) 0 0 var(--sffm-buttton-size, 50px);
}
.sffm-floatmenu-template-4.sffm-left-side.sffm-orientation-vertical.sffm-shape-rounded-square ul.sffm-menu li:hover > a {
border-radius: 0.3em 0 0 0.3em;
}
.sffm-floatmenu-template-4.sffm-right-side.sffm-orientation-vertical.sffm-shape-rounded-square ul.sffm-menu li:hover > a {
border-radius: 0 0.3em 0.3em 0;
}
.sffm-floatmenu-template-4.sffm-top-side.sffm-orientation-horizontal.sffm-shape-rounded-square ul.sffm-menu li:hover > a {
border-radius: 0.3em 0.3em 0 0;
}
.sffm-floatmenu-template-4.sffm-bottom-side.sffm-orientation-horizontal.sffm-shape-rounded-square ul.sffm-menu li:hover > a {
border-radius: 0 0 0.3em 0.3em;
}
.sffm-floatmenu-template-4.sffm-left-side.sffm-orientation-vertical.sffm-shape-round ul.sffm-menu li:hover {
background: var(--sffm-button-bg-hover, var(--sffm-button-bg, #000));
background: linear-gradient(90deg, transparent 50%, var(--sffm-button-bg-hover, var(--sffm-button-bg, #000)) 50%);
}
.sffm-floatmenu-template-4.sffm-right-side.sffm-orientation-vertical.sffm-shape-round ul.sffm-menu li:hover {
background: var(--sffm-button-bg-hover, var(--sffm-button-bg, #000));
background: linear-gradient(-90deg, transparent 50%, var(--sffm-button-bg-hover, var(--sffm-button-bg, #000)) 50%);
}
.sffm-floatmenu-template-4.sffm-top-side.sffm-orientation-horizontal.sffm-shape-round ul.sffm-menu li:hover {
background: var(--sffm-button-bg-hover, var(--sffm-button-bg, #000));
background: linear-gradient(180deg, transparent 50%, var(--sffm-button-bg-hover, var(--sffm-button-bg, #000)) 50%);
}
.sffm-floatmenu-template-4.sffm-bottom-side.sffm-orientation-horizontal.sffm-shape-round ul.sffm-menu li:hover {
background: var(--sffm-button-bg-hover, var(--sffm-button-bg, #000));
background: linear-gradient(0, transparent 50%, var(--sffm-button-bg-hover, var(--sffm-button-bg, #000)) 50%);
}
.sffm-floatmenu-template-4.sffm-shape-star ul.sffm-menu li:hover > a {
clip-path: none;
}
.sffm-floatmenu-template-4 {
--sffm-tooltip-indent: 10px;
--sffm-tooltip-indent-hover: 0;
} .sffm-floatmenu-template-5 {
--sffm-tooltip-indent: 30px;
--sffm-tooltip-indent-hover: 0;
}
.sffm-floatmenu-template-5 ul.sffm-menu li .sffm-tooltip:before {
display: none;
}
.sffm-floatmenu-template-5 ul.sffm-menu li .sffm-tooltip {
height: 100%;
display: flex;
align-items: center;
border-radius: 0;
}
.sffm-floatmenu-template-5 ul.sffm-menu li .sffm-tooltip a {
padding: 10px 20px;
}
.sffm-floatmenu-template-5 ul.sffm-menu li > a {
transition: none;
}
.sffm-floatmenu-template-5.sffm-left-side.sffm-shape-round.sffm-orientation-vertical ul.sffm-menu li .sffm-tooltip,
.sffm-floatmenu-template-5.sffm-top-side.sffm-shape-round.sffm-orientation-horizontal ul.sffm-menu li .sffm-tooltip,
.sffm-floatmenu-template-5.sffm-bottom-side.sffm-shape-round.sffm-orientation-horizontal ul.sffm-menu li .sffm-tooltip {
border-radius: 0 var(--sffm-buttton-size, 50px) var(--sffm-buttton-size, 50px) 0;
}
.sffm-floatmenu-template-5.sffm-right-side.sffm-shape-round.sffm-orientation-vertical ul.sffm-menu li .sffm-tooltip {
border-radius: var(--sffm-buttton-size, 50px) 0 0 var(--sffm-buttton-size, 50px);
}
.sffm-floatmenu-template-5.sffm-left-side.sffm-orientation-vertical.sffm-shape-rounded-square ul.sffm-menu li:hover > a {
border-radius: 0.3em 0 0 0.3em;
}
.sffm-floatmenu-template-5.sffm-right-side.sffm-orientation-vertical.sffm-shape-rounded-square ul.sffm-menu li:hover > a {
border-radius: 0 0.3em 0.3em 0;
}
.sffm-floatmenu-template-5.sffm-top-side.sffm-orientation-horizontal.sffm-shape-rounded-square ul.sffm-menu li:hover > a {
border-radius: 0.3em 0.3em 0 0;
}
.sffm-floatmenu-template-5.sffm-bottom-side.sffm-orientation-horizontal.sffm-shape-rounded-square ul.sffm-menu li:hover > a {
border-radius: 0 0 0.3em 0.3em;
}
.sffm-floatmenu-template-5.sffm-left-side.sffm-orientation-vertical.sffm-shape-round ul.sffm-menu li:hover,
.sffm-floatmenu-template-5.sffm-left-side.sffm-orientation-vertical.sffm-shape-rhombus ul.sffm-menu li:hover,
.sffm-floatmenu-template-5.sffm-left-side.sffm-orientation-vertical.sffm-shape-oval ul.sffm-menu li:hover,
.sffm-floatmenu-template-5.sffm-left-side.sffm-orientation-vertical.sffm-shape-hexagon ul.sffm-menu li:hover,
.sffm-floatmenu-template-5.sffm-left-side.sffm-orientation-vertical.sffm-shape-rabbet ul.sffm-menu li:hover,
.sffm-floatmenu-template-5.sffm-left-side.sffm-orientation-vertical.sffm-shape-blob ul.sffm-menu li:hover {
background: var(--sffm-button-bg-hover, var(--sffm-button-bg, #000));
background: linear-gradient(90deg, transparent 50%, var(--sffm-button-bg-hover, var(--sffm-button-bg, #000)) 50%);
}
.sffm-floatmenu-template-5.sffm-right-side.sffm-orientation-vertical.sffm-shape-round ul.sffm-menu li:hover,
.sffm-floatmenu-template-5.sffm-right-side.sffm-orientation-vertical.sffm-shape-rhombus ul.sffm-menu li:hover,
.sffm-floatmenu-template-5.sffm-right-side.sffm-orientation-vertical.sffm-shape-oval ul.sffm-menu li:hover,
.sffm-floatmenu-template-5.sffm-right-side.sffm-orientation-vertical.sffm-shape-hexagon ul.sffm-menu li:hover,
.sffm-floatmenu-template-5.sffm-right-side.sffm-orientation-vertical.sffm-shape-rabbet ul.sffm-menu li:hover,
.sffm-floatmenu-template-5.sffm-right-side.sffm-orientation-vertical.sffm-shape-blob ul.sffm-menu li:hover {
background: var(--sffm-button-bg-hover, var(--sffm-button-bg, #000));
background: linear-gradient(-90deg, transparent 50%, var(--sffm-button-bg-hover, var(--sffm-button-bg, #000)) 50%);
}
.sffm-floatmenu-template-5.sffm-top-side.sffm-orientation-horizontal.sffm-shape-round ul.sffm-menu li:hover,
.sffm-floatmenu-template-5.sffm-top-side.sffm-orientation-horizontal.sffm-shape-rhombus ul.sffm-menu li:hover,
.sffm-floatmenu-template-5.sffm-top-side.sffm-orientation-horizontal.sffm-shape-oval ul.sffm-menu li:hover,
.sffm-floatmenu-template-5.sffm-top-side.sffm-orientation-horizontal.sffm-shape-hexagon ul.sffm-menu li:hover,
.sffm-floatmenu-template-5.sffm-top-side.sffm-orientation-horizontal.sffm-shape-rabbet ul.sffm-menu li:hover,
.sffm-floatmenu-template-5.sffm-top-side.sffm-orientation-horizontal.sffm-shape-blob ul.sffm-menu li:hover {
background: var(--sffm-button-bg-hover, var(--sffm-button-bg, #000));
background: linear-gradient(180deg, transparent 50%, var(--sffm-button-bg-hover, var(--sffm-button-bg, #000)) 50%);
}
.sffm-floatmenu-template-5.sffm-bottom-side.sffm-orientation-horizontal.sffm-shape-round ul.sffm-menu li:hover,
.sffm-floatmenu-template-5.sffm-bottom-side.sffm-orientation-horizontal.sffm-shape-rhombus ul.sffm-menu li:hover,
.sffm-floatmenu-template-5.sffm-bottom-side.sffm-orientation-horizontal.sffm-shape-oval ul.sffm-menu li:hover,
.sffm-floatmenu-template-5.sffm-bottom-side.sffm-orientation-horizontal.sffm-shape-hexagon ul.sffm-menu li:hover,
.sffm-floatmenu-template-5.sffm-bottom-side.sffm-orientation-horizontal.sffm-shape-rabbet ul.sffm-menu li:hover,
.sffm-floatmenu-template-5.sffm-bottom-side.sffm-orientation-horizontal.sffm-shape-blob ul.sffm-menu li:hover {
background: var(--sffm-button-bg-hover, var(--sffm-button-bg, #000));
background: linear-gradient(0, transparent 50%, var(--sffm-button-bg-hover, var(--sffm-button-bg, #000)) 50%);
}
.sffm-floatmenu-template-5.sffm-shape-triangle ul.sffm-menu li:hover > a,
.sffm-floatmenu-template-5.sffm-shape-star ul.sffm-menu li:hover > a,
.sffm-floatmenu-template-5.sffm-shape-pentagon ul.sffm-menu li:hover > a {
clip-path: none;
} .sffm-floatmenu-template-6 {
--sffm-tooltip-indent: 20px;
--sffm-tooltip-indent-hover: 0;
}
.sffm-floatmenu-template-6.sffm-floatmenu-wrapper .sffm-menu {
padding: calc(var(--sffm-buttton-size, 50px)/6);
background: var(--sffm-buttons-bg-color, #FF0000);
}
.sffm-floatmenu-template-6.sffm-shape-rounded-square.sffm-floatmenu-wrapper .sffm-menu {
border-radius: 0.3em;
}
.sffm-floatmenu-template-6.sffm-shape-round.sffm-floatmenu-wrapper .sffm-menu {
border-radius: var(--sffm-buttton-size, 50px);
}
.sffm-floatmenu-template-6 ul.sffm-menu li .sffm-tooltip:before {
display: none;
}
.sffm-floatmenu-template-6 ul.sffm-menu li .sffm-tooltip {
height: 100%;
display: flex;
align-items: center;
}
.sffm-floatmenu-template-6 ul.sffm-menu li .sffm-tooltip {
border-radius: 0;
}
.sffm-floatmenu-template-6 ul.sffm-menu li > a {
transition: none;
}
.sffm-floatmenu-template-6.sffm-left-side.sffm-shape-round.sffm-orientation-vertical ul.sffm-menu li .sffm-tooltip,
.sffm-floatmenu-template-6.sffm-top-side.sffm-shape-round.sffm-orientation-horizontal ul.sffm-menu li .sffm-tooltip,
.sffm-floatmenu-template-6.sffm-bottom-side.sffm-shape-round.sffm-orientation-horizontal ul.sffm-menu li .sffm-tooltip {
border-radius: 0 var(--sffm-buttton-size, 50px) var(--sffm-buttton-size, 50px) 0;
}
.sffm-floatmenu-template-6.sffm-right-side.sffm-shape-round.sffm-orientation-vertical ul.sffm-menu li .sffm-tooltip {
border-radius: var(--sffm-buttton-size, 50px) 0 0 var(--sffm-buttton-size, 50px);
}
.sffm-floatmenu-template-6.sffm-left-side.sffm-orientation-vertical.sffm-shape-rounded-square ul.sffm-menu li:hover > a {
border-radius: 0.3em 0 0 0.3em;
}
.sffm-floatmenu-template-6.sffm-right-side.sffm-orientation-vertical.sffm-shape-rounded-square ul.sffm-menu li:hover > a {
border-radius: 0 0.3em 0.3em 0;
}
.sffm-floatmenu-template-6.sffm-top-side.sffm-orientation-horizontal.sffm-shape-rounded-square ul.sffm-menu li:hover > a {
border-radius: 0.3em 0.3em 0 0;
}
.sffm-floatmenu-template-6.sffm-bottom-side.sffm-orientation-horizontal.sffm-shape-rounded-square ul.sffm-menu li:hover > a {
border-radius: 0 0 0.3em 0.3em;
}
.sffm-floatmenu-template-6.sffm-left-side.sffm-orientation-vertical.sffm-shape-round ul.sffm-menu li:hover,
.sffm-floatmenu-template-6.sffm-left-side.sffm-orientation-vertical.sffm-shape-rhombus ul.sffm-menu li:hover,
.sffm-floatmenu-template-6.sffm-left-side.sffm-orientation-vertical.sffm-shape-oval ul.sffm-menu li:hover,
.sffm-floatmenu-template-6.sffm-left-side.sffm-orientation-vertical.sffm-shape-hexagon ul.sffm-menu li:hover,
.sffm-floatmenu-template-6.sffm-left-side.sffm-orientation-vertical.sffm-shape-rabbet ul.sffm-menu li:hover,
.sffm-floatmenu-template-6.sffm-left-side.sffm-orientation-vertical.sffm-shape-blob ul.sffm-menu li:hover {
background: var(--sffm-button-bg-hover, var(--sffm-button-bg, #000));
background: linear-gradient(90deg, transparent 50%, var(--sffm-button-bg-hover, var(--sffm-button-bg, #000)) 50%);
}
.sffm-floatmenu-template-6.sffm-right-side.sffm-orientation-vertical.sffm-shape-round ul.sffm-menu li:hover,
.sffm-floatmenu-template-6.sffm-right-side.sffm-orientation-vertical.sffm-shape-rhombus ul.sffm-menu li:hover,
.sffm-floatmenu-template-6.sffm-right-side.sffm-orientation-vertical.sffm-shape-oval ul.sffm-menu li:hover,
.sffm-floatmenu-template-6.sffm-right-side.sffm-orientation-vertical.sffm-shape-hexagon ul.sffm-menu li:hover,
.sffm-floatmenu-template-6.sffm-right-side.sffm-orientation-vertical.sffm-shape-rabbet ul.sffm-menu li:hover,
.sffm-floatmenu-template-6.sffm-right-side.sffm-orientation-vertical.sffm-shape-blob ul.sffm-menu li:hover {
background: var(--sffm-button-bg-hover, var(--sffm-button-bg, #000));
background: linear-gradient(-90deg, transparent 50%, var(--sffm-button-bg-hover, var(--sffm-button-bg, #000)) 50%);
}
.sffm-floatmenu-template-6.sffm-top-side.sffm-orientation-horizontal.sffm-shape-round ul.sffm-menu li:hover,
.sffm-floatmenu-template-6.sffm-top-side.sffm-orientation-horizontal.sffm-shape-rhombus ul.sffm-menu li:hover,
.sffm-floatmenu-template-6.sffm-top-side.sffm-orientation-horizontal.sffm-shape-oval ul.sffm-menu li:hover,
.sffm-floatmenu-template-6.sffm-top-side.sffm-orientation-horizontal.sffm-shape-hexagon ul.sffm-menu li:hover,
.sffm-floatmenu-template-6.sffm-top-side.sffm-orientation-horizontal.sffm-shape-rabbet ul.sffm-menu li:hover,
.sffm-floatmenu-template-6.sffm-top-side.sffm-orientation-horizontal.sffm-shape-blob ul.sffm-menu li:hover {
background: var(--sffm-button-bg-hover, var(--sffm-button-bg, #000));
background: linear-gradient(180deg, transparent 50%, var(--sffm-button-bg-hover, var(--sffm-button-bg, #000)) 50%);
}
.sffm-floatmenu-template-6.sffm-bottom-side.sffm-orientation-horizontal.sffm-shape-round ul.sffm-menu li:hover,
.sffm-floatmenu-template-6.sffm-bottom-side.sffm-orientation-horizontal.sffm-shape-rhombus ul.sffm-menu li:hover,
.sffm-floatmenu-template-6.sffm-bottom-side.sffm-orientation-horizontal.sffm-shape-oval ul.sffm-menu li:hover,
.sffm-floatmenu-template-6.sffm-bottom-side.sffm-orientation-horizontal.sffm-shape-hexagon ul.sffm-menu li:hover,
.sffm-floatmenu-template-6.sffm-bottom-side.sffm-orientation-horizontal.sffm-shape-rabbet ul.sffm-menu li:hover,
.sffm-floatmenu-template-6.sffm-bottom-side.sffm-orientation-horizontal.sffm-shape-blob ul.sffm-menu li:hover {
background: var(--sffm-button-bg-hover, var(--sffm-button-bg, #000));
background: linear-gradient(0, transparent 50%, var(--sffm-button-bg-hover, var(--sffm-button-bg, #000)) 50%);
}
.sffm-floatmenu-template-6.sffm-shape-triangle ul.sffm-menu li:hover > a,
.sffm-floatmenu-template-6.sffm-shape-star ul.sffm-menu li:hover > a,
.sffm-floatmenu-template-6.sffm-shape-pentagon ul.sffm-menu li:hover > a {
clip-path: none;
} .sffm-floatmenu-trigger-idle-animation {
filter: drop-shadow(var(--sffm-button-shadow-x, 0) var(--sffm-button-shadow-y, 0) var(--sffm-button-shadow-blur, 0) var(--sffm-button-shadow-color, transparent));
}
.sffm-floatmenu-trigger-idle-animation,
.sffm-floatmenu-trigger-hover-animation {
position: relative;
z-index: 9999;
}
.sffm-floatmenu-trigger-idle-animation:hover,
.sffm-floatmenu-wrapper .sffm-floatmenu-show .sffm-floatmenu-trigger-idle-animation,
.sffm-floatmenu-trigger-idle-animation:hover:before,
.sffm-floatmenu-wrapper .sffm-floatmenu-show .sffm-floatmenu-trigger-idle-animation:before {
animation: none;
}
.sffm-floatmenu-trigger-idle-animation:hover:before,
.sffm-floatmenu-wrapper .sffm-floatmenu-show .sffm-floatmenu-trigger-idle-animation:before {
opacity: 0;
}
.sffm-floatmenu-trigger {
position: relative;
width: var(--sffm-trigger-btn-size, var(--sffm-buttton-size, 50px));
height: var(--sffm-trigger-btn-size, var(--sffm-buttton-size, 50px));
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: var(--sffm-trigger-btn-icon-size, var(--sffm-buttton-font-size, 20px));
background: var(--sffm-trigger-btn-bg-color, var(--sffm-button-bg, #000));
color: var(--sffm-trigger-btn-icon-color, var(--sffm-button-color, #FFF));
transition: all 0.3s ease;
}
.sffm-floatmenu-trigger img {
max-width: 100%;
width: var(--sffm-trigger-btn-icon-size, var(--sffm-buttton-font-size, 20px));
height: auto;
}
.sffm-floatmenu-wrapper ul.sffm-menu li.sffm-menu-no-0 a {
width: var(--sffm-trigger-btn-size, var(--sffm-buttton-size, 50px));
height: var(--sffm-trigger-btn-size, var(--sffm-buttton-size, 50px));
}
.sffm-floatmenu-trigger:hover {
background: var(--sffm-trigger-btn-hover-bg-color, var(--sffm-trigger-btn-bg-color, var(--sffm-button-bg-hover, var(--sffm-button-bg, #000))));
color: var(--sffm-trigger-btn-hover-icon-color, var(--sffm-trigger-btn-icon-color, var(--sffm-button-color-hover, var(--sffm-button-color, #FFF))))
}
.sffm-floatmenu-toggle-close-icon {
display: none;
}
.sffm-floatmenu-show .sffm-floatmenu-toggle-open-icon {
display: none;
}
.sffm-floatmenu-show .sffm-floatmenu-toggle-close-icon {
display: block;
} .sffm-floatmenu-wrapper.sffm-floatmenu-template-7 ul.sffm-menu li .sffm-tooltip {
position: static;
opacity: 1;
visibility: visible;
right: auto;
margin-right: 0;
top: auto;
transform: none;
display: flex;
align-items: center;
border-radius: 0;
margin: 0 !important;
height: var(--sffm-buttton-size, 50px);
}
.sffm-floatmenu-template-7 ul.sffm-menu li .sffm-tooltip:before {
display: none;
}
.sffm-floatmenu-template-7 ul.sffm-menu li {
display: flex;
align-items: stretch;
transition: transform 0.3s ease-in-out;
background: var(--sffm-button-bg, #000);
}
.sffm-floatmenu-template-7.sffm-shape-round.sffm-left-side ul.sffm-menu li {
border-radius: 0 50% 50% 0;
}
.sffm-floatmenu-template-7.sffm-shape-round.sffm-right-side ul.sffm-menu li {
border-radius: 50% 0 0 50%;
}
.sffm-floatmenu-template-7.sffm-shape-rounded-square.sffm-left-side ul.sffm-menu li {
border-radius: 0 0.3em 0.3em 0;
}
.sffm-floatmenu-template-7.sffm-shape-rounded-square.sffm-right-side ul.sffm-menu li {
border-radius: 0.3em 0 0 0.3em;
}
.sffm-floatmenu-template-7 ul.sffm-menu li .sffm-tooltip {
border-radius: 0;
}
.sffm-floatmenu-template-7 ul.sffm-menu li > a {
transition: none;
}
.sffm-floatmenu-wrapper.sffm-floatmenu-template-7.sffm-position-top-right .sffm-floatmenu,
.sffm-floatmenu-wrapper.sffm-floatmenu-template-7.sffm-position-bottom-right .sffm-floatmenu {
transform: translateX(calc(100% - var(--sffm-buttton-size, 50px)));
}
.sffm-floatmenu-wrapper.sffm-floatmenu-template-7.sffm-position-middle-right .sffm-floatmenu {
transform: translateX(calc(100% - var(--sffm-buttton-size, 50px))) translateY(-50%);
}
.sffm-floatmenu-wrapper.sffm-floatmenu-template-7.sffm-right-side ul.sffm-menu {
align-items: flex-start;
}
.sffm-floatmenu-template-7.sffm-shape-round.sffm-right-side ul.sffm-menu li > a {
clip-path: none;
border-radius: 50% 0 0 50%;
}
.sffm-floatmenu-template-7.sffm-shape-rounded-square.sffm-right-side ul.sffm-menu li > a {
border-radius: 0.3em 0 0 0.3em;
}
.sffm-floatmenu-wrapper.sffm-floatmenu-template-7.sffm-position-top-left .sffm-floatmenu,
.sffm-floatmenu-wrapper.sffm-floatmenu-template-7.sffm-position-bottom-left .sffm-floatmenu {
transform: translateX(calc(-1 * 100% + var(--sffm-buttton-size, 50px)));
}
.sffm-floatmenu-wrapper.sffm-floatmenu-template-7.sffm-position-middle-left .sffm-floatmenu {
transform: translateX(calc(-1 * 100% + var(--sffm-buttton-size, 50px))) translateY(-50%);
}
.sffm-floatmenu-wrapper.sffm-floatmenu-template-7.sffm-left-side ul.sffm-menu {
align-items: flex-end;
}
.sffm-floatmenu-wrapper.sffm-floatmenu-template-7.sffm-right-side ul.sffm-menu li:hover {
transform: translateX(calc(-1 * var(--sffm-span-width)));
}
.sffm-floatmenu-template-7.sffm-left-side ul.sffm-menu li span {
order: -1;
}
.sffm-floatmenu-wrapper.sffm-floatmenu-template-7.sffm-left-side ul.sffm-menu li:hover {
transform: translateX(calc(var(--sffm-span-width)));
}
.sffm-floatmenu-template-7.sffm-shape-round.sffm-left-side ul.sffm-menu li > a {
clip-path: none;
border-radius: 0 50% 50% 0;
}
.sffm-floatmenu-template-7.sffm-shape-rounded-square.sffm-left-side ul.sffm-menu li > a {
border-radius: 0 0.3em 0.3em 0;
}
.sffm-floatmenu-template-7 ul.sffm-menu li .sffm-tooltip a {
padding: 8px 10px;
} .sffm-floatmenu-template-8 .sffm-floatmenu-inner-wrap {
position: relative;
}
.sffm-floatmenu-template-8 ul.sffm-menu {
visibility: hidden;
position: absolute;
}
.sffm-floatmenu-template-8 .sffm-floatmenu-show ul.sffm-menu {
visibility: visible;
}
.sffm-floatmenu-template-8.sffm-floatmenu-wrapper.sffm-left-side {
--sffm-translate-x: -100%;
--sffm-translate-y: 0%;
}
.sffm-floatmenu-template-8.sffm-floatmenu-wrapper.sffm-right-side {
--sffm-translate-x: 100%;
--sffm-translate-y: 0%;
}
.sffm-floatmenu-template-8.sffm-position-top-left ul.sffm-menu,
.sffm-floatmenu-template-8.sffm-position-top-right ul.sffm-menu {
top: 0;
}
.sffm-floatmenu-template-8.sffm-position-bottom-left ul.sffm-menu,
.sffm-floatmenu-template-8.sffm-position-bottom-right ul.sffm-menu {
bottom: 0;
}
.sffm-floatmenu-template-8.sffm-position-top-left ul.sffm-menu,
.sffm-floatmenu-template-8.sffm-position-bottom-left ul.sffm-menu {
left: 110%;
}
.sffm-floatmenu-template-8.sffm-position-top-right ul.sffm-menu,
.sffm-floatmenu-template-8.sffm-position-bottom-right ul.sffm-menu {
right: 110%;
}
.sffm-floatmenu-template-8.sffm-position-middle-left ul.sffm-menu {
left: 110%;
top: 50%;
transform: translateY(-50%);
}
.sffm-floatmenu-template-8.sffm-position-middle-right ul.sffm-menu {
right: 110%;
top: 50%;
transform: translateY(-50%);
}
.sffm-buttons-animation-complete {
height: 0 !important;
width: 0 !important;
overflow: hidden;
} .sffm-floatmenu-template-9 .sffm-floatmenu-inner-wrap {
display: flex;
align-items: center;
justify-content: center;
gap: var(--sffm-button-gap, 5px);
}
.sffm-floatmenu-template-9 ul.sffm-menu {
visibility: hidden;
}
.sffm-floatmenu-template-9 .sffm-floatmenu-show ul.sffm-menu {
visibility: visible;
}
.sffm-floatmenu-template-9.sffm-orientation-horizontal .sffm-floatmenu-inner-wrap {
flex-direction: row;
}
.sffm-floatmenu-template-9.sffm-orientation-vertical .sffm-floatmenu-inner-wrap {
flex-direction: column;
}
.sffm-floatmenu-template-9.sffm-orientation-horizontal.sffm-position-bottom-right .sffm-floatmenu-inner-wrap,
.sffm-floatmenu-template-9.sffm-orientation-horizontal.sffm-position-top-right .sffm-floatmenu-inner-wrap {
flex-direction: row-reverse;
}
.sffm-floatmenu-template-9.sffm-orientation-vertical.sffm-position-bottom-right .sffm-floatmenu-inner-wrap,
.sffm-floatmenu-template-9.sffm-orientation-vertical.sffm-position-bottom-left .sffm-floatmenu-inner-wrap {
flex-direction: column-reverse;
}
.sffm-floatmenu-template-9.sffm-position-middle-left ul.sffm-menu,
.sffm-floatmenu-template-9.sffm-position-middle-right ul.sffm-menu,
.sffm-floatmenu-template-9.sffm-position-top-middle ul.sffm-menu,
.sffm-floatmenu-template-9.sffm-position-bottom-middle ul.sffm-menu {
position: absolute;
display: grid;
}
.sffm-floatmenu-template-9.sffm-position-top-middle ul.sffm-menu li,
.sffm-floatmenu-template-9.sffm-position-bottom-middle ul.sffm-menu li {
padding: 0 calc(var(--sffm-button-gap, 5px)/2);
}
.sffm-floatmenu-template-9.sffm-position-middle-left ul.sffm-menu li,
.sffm-floatmenu-template-9.sffm-position-middle-right ul.sffm-menu li {
padding: calc(var(--sffm-button-gap, 5px)/2) 0;
}
.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-floatmenu[data-number="3"] ul.sffm-menu li:last-child,
.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-floatmenu[data-number="5"] ul.sffm-menu li:last-child,
.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-floatmenu[data-number="7"] ul.sffm-menu li:last-child,
.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-floatmenu[data-number="9"] ul.sffm-menu li:last-child,
.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-floatmenu[data-number="11"] ul.sffm-menu li:last-child,
.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-floatmenu[data-number="13"] ul.sffm-menu li:last-child,
.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-floatmenu[data-number="15"] ul.sffm-menu li:last-child,
.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-floatmenu[data-number="17"] ul.sffm-menu li:last-child,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-floatmenu[data-number="3"] ul.sffm-menu li:last-child,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-floatmenu[data-number="5"] ul.sffm-menu li:last-child,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-floatmenu[data-number="7"] ul.sffm-menu li:last-child,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-floatmenu[data-number="9"] ul.sffm-menu li:last-child,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-floatmenu[data-number="11"] ul.sffm-menu li:last-child,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-floatmenu[data-number="13"] ul.sffm-menu li:last-child,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-floatmenu[data-number="15"] ul.sffm-menu li:last-child,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-floatmenu[data-number="17"] ul.sffm-menu li:last-child,
.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-floatmenu[data-number="3"] ul.sffm-menu li:last-child,
.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-floatmenu[data-number="5"] ul.sffm-menu li:last-child,
.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-floatmenu[data-number="7"] ul.sffm-menu li:last-child,
.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-floatmenu[data-number="9"] ul.sffm-menu li:last-child,
.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-floatmenu[data-number="11"] ul.sffm-menu li:last-child,
.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-floatmenu[data-number="13"] ul.sffm-menu li:last-child,
.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-floatmenu[data-number="15"] ul.sffm-menu li:last-child,
.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-floatmenu[data-number="17"] ul.sffm-menu li:last-child,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-floatmenu[data-number="3"] ul.sffm-menu li:last-child,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-floatmenu[data-number="5"] ul.sffm-menu li:last-child,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-floatmenu[data-number="7"] ul.sffm-menu li:last-child,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-floatmenu[data-number="9"] ul.sffm-menu li:last-child,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-floatmenu[data-number="11"] ul.sffm-menu li:last-child,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-floatmenu[data-number="13"] ul.sffm-menu li:last-child,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-floatmenu[data-number="15"] ul.sffm-menu li:last-child,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-floatmenu[data-number="17"] ul.sffm-menu li:last-child {
display: none;
}
.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-menu-no-0,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-menu-no-0 {
grid-area: 1 / 9 / 2 / 10;
}
.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-menu-no-1,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-menu-no-1 {
grid-area: 1 / 8 / 2 / 9;
}
.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-menu-no-2,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-menu-no-2 {
grid-area: 1 / 10 / 2 / 11;
}
.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-menu-no-3,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-menu-no-3 {
grid-area: 1 / 7 / 2 / 8;
}
.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-menu-no-4,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-menu-no-4 {
grid-area: 1 / 11 / 2 / 12;
}
.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-menu-no-5,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-menu-no-5 {
grid-area: 1 / 6 / 2 / 7;
}
.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-menu-no-6,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-menu-no-6 {
grid-area: 1 / 12 / 2 / 13;
}
.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-menu-no-7,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-menu-no-7 {
grid-area: 1 / 5 / 2 / 6;
}
.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-menu-no-8,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-menu-no-8 {
grid-area: 1 / 13 / 2 / 14;
}
.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-menu-no-9,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-menu-no-9 {
grid-area: 1 / 4 / 2 / 5;
}
.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-menu-no-10,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-menu-no-10 {
grid-area: 1 / 14 / 2 / 15;
}
.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-menu-no-11,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-menu-no-11 {
grid-area: 1 / 3 / 2 / 4;
}
.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-menu-no-12,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-menu-no-12 {
grid-area: 1 / 15 / 2 / 16;
}
.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-menu-no-13,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-menu-no-13 {
grid-area: 1 / 2 / 2 / 3;
}
.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-menu-no-14,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-menu-no-14 {
grid-area: 1 / 16 / 2 / 17;
}
.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-menu-no-15,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-menu-no-15 {
grid-area: 1 / 1 / 2 / 2;
}
.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-menu-no-16,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-menu-no-16 {
grid-area: 1 / 17 / 2 / 18;
}
.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-menu-no-0,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-menu-no-0 {
grid-area: 9 / 1 / 10 / 2;
}
.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-menu-no-1,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-menu-no-1 {
grid-area: 8 / 1 / 9 / 2;
}
.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-menu-no-2,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-menu-no-2 {
grid-area: 10 / 1 / 11 / 2;
}
.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-menu-no-3,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-menu-no-3 {
grid-area: 7 / 1 / 8 / 2;
}
.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-menu-no-4,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-menu-no-4 {
grid-area: 11 / 1 / 12 / 2;
}
.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-menu-no-5,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-menu-no-5 {
grid-area: 6 / 1 / 7 / 2;
}
.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-menu-no-6,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-menu-no-6 {
grid-area: 12 / 1 / 13 / 2;
}
.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-menu-no-7,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-menu-no-7 {
grid-area: 5 / 1 / 6 / 2;
}
.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-menu-no-8,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-menu-no-8 {
grid-area: 13 / 1 / 14 / 2;
}
.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-menu-no-9,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-menu-no-9 {
grid-area: 4 / 1 / 5 / 2;
}
.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-menu-no-10,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-menu-no-10 {
grid-area: 14 / 1 / 15 / 2;
}
.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-menu-no-11,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-menu-no-11 {
grid-area: 3 / 1 / 4 / 2;
}
.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-menu-no-12,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-menu-no-12 {
grid-area: 15 / 1 / 16 / 2;
}
.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-menu-no-13,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-menu-no-13 {
grid-area: 2 / 1 / 3 / 2;
}
.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-menu-no-14,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-menu-no-14 {
grid-area: 16 / 1 / 17 / 2;
}
.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-menu-no-15,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-menu-no-15 {
grid-area: 1 / 1 / 2 / 2;
}
.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-menu-no-16,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-menu-no-16 {
grid-area: 17 / 1 / 18 / 2;
}
.sffm-floatmenu-template-9.sffm-position-top-middle ul.sffm-menu,
.sffm-floatmenu-template-9.sffm-position-bottom-middle ul.sffm-menu,
.sffm-floatmenu-template-9.sffm-position-middle-left ul.sffm-menu,
.sffm-floatmenu-template-9.sffm-position-middle-right ul.sffm-menu {
gap: 0;
}
.sffm-floatmenu-template-9 .sffm-menu-items {
--sffm-translate-y: 0px;
--sffm-translate-x: 0px;
}
.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-menu-no-1,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-menu-no-1 {
--sffm-translate-y: calc(1*100% + 1*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-menu-no-2,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-menu-no-2 {
--sffm-translate-y: calc(-1*100% - 1*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-menu-no-3,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-menu-no-3 {
--sffm-translate-y: calc(2*100% + 2*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-menu-no-4,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-menu-no-4 {
--sffm-translate-y: calc(-2*100% - 2*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-menu-no-5,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-menu-no-5 {
--sffm-translate-y: calc(3*100% + 3*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-menu-no-6,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-menu-no-6 {
--sffm-translate-y: calc(-3*100% - 3*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-menu-no-7,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-menu-no-7 {
--sffm-translate-y: calc(4*100% + 4*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-menu-no-8,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-menu-no-8 {
--sffm-translate-y: calc(-4*100% - 4*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-menu-no-9,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-menu-no-9 {
--sffm-translate-y: calc(5*100% + 5*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-menu-no-10,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-menu-no-10 {
--sffm-translate-y: calc(-5*100% - 5*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-menu-no-11,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-menu-no-11 {
--sffm-translate-y: calc(6*100% + 6*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-menu-no-12,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-menu-no-12 {
--sffm-translate-y: calc(-6*100% - 6*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-menu-no-13,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-menu-no-13 {
--sffm-translate-y: calc(7*100% + 7*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-menu-no-14,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-menu-no-14 {
--sffm-translate-y: calc(-7*100% - 7*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-menu-no-15,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-menu-no-15 {
--sffm-translate-y: calc(8*100% + 8*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-menu-no-16,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-menu-no-16 {
--sffm-translate-y: calc(-8*100% - 8*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-menu-no-17,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-menu-no-17 {
--sffm-translate-y: calc(9*100% + 9*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-menu-no-18,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-menu-no-18 {
--sffm-translate-y: calc(-9*100% - 9*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-menu-no-1,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-menu-no-1 {
--sffm-translate-x: calc(1*100% + 1*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-menu-no-2,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-menu-no-2 {
--sffm-translate-x: calc(-1*100% - 1*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-menu-no-3,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-menu-no-3 {
--sffm-translate-x: calc(2*100% + 2*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-menu-no-4,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-menu-no-4 {
--sffm-translate-x: calc(-2*100% - 2*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-menu-no-5,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-menu-no-5 {
--sffm-translate-x: calc(3*100% + 3*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-menu-no-6,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-menu-no-6 {
--sffm-translate-x: calc(-3*100% - 3*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-menu-no-7,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-menu-no-7 {
--sffm-translate-x: calc(4*100% + 4*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-menu-no-8,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-menu-no-8 {
--sffm-translate-x: calc(-4*100% - 4*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-menu-no-9,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-menu-no-9 {
--sffm-translate-x: calc(5*100% + 5*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-menu-no-10,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-menu-no-10 {
--sffm-translate-x: calc(-5*100% - 5*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-menu-no-11,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-menu-no-11 {
--sffm-translate-x: calc(6*100% + 6*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-menu-no-12,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-menu-no-12 {
--sffm-translate-x: calc(-6*100% - 6*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-menu-no-13,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-menu-no-13 {
--sffm-translate-x: calc(7*100% + 7*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-menu-no-14,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-menu-no-14 {
--sffm-translate-x: calc(-7*100% - 7*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-menu-no-15,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-menu-no-15 {
--sffm-translate-x: calc(8*100% + 8*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-menu-no-16,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-menu-no-16 {
--sffm-translate-x: calc(-8*100% - 8*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-menu-no-17,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-menu-no-17 {
--sffm-translate-x: calc(9*100% + 9*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-menu-no-18,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-menu-no-18 {
--sffm-translate-x: calc(-9*100% - 9*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-top-left .sffm-menu-no-1,
.sffm-floatmenu-template-9.sffm-position-top-right .sffm-menu-no-1 {
--sffm-translate-y: calc(-1*100% - 1*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-top-left .sffm-menu-no-2,
.sffm-floatmenu-template-9.sffm-position-top-right .sffm-menu-no-2 {
--sffm-translate-y: calc(-2*100% - 2*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-top-left .sffm-menu-no-3,
.sffm-floatmenu-template-9.sffm-position-top-right .sffm-menu-no-3 {
--sffm-translate-y: calc(-3*100% - 3*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-top-left .sffm-menu-no-4,
.sffm-floatmenu-template-9.sffm-position-top-right .sffm-menu-no-4 {
--sffm-translate-y: calc(-4*100% - 4*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-top-left .sffm-menu-no-5,
.sffm-floatmenu-template-9.sffm-position-top-right .sffm-menu-no-5 {
--sffm-translate-y: calc(-5*100% - 5*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-top-left .sffm-menu-no-6,
.sffm-floatmenu-template-9.sffm-position-top-right .sffm-menu-no-6 {
--sffm-translate-y: calc(-6*100% - 6*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-top-left .sffm-menu-no-7,
.sffm-floatmenu-template-9.sffm-position-top-right .sffm-menu-no-7 {
--sffm-translate-y: calc(-7*100% - 7*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-top-left .sffm-menu-no-8,
.sffm-floatmenu-template-9.sffm-position-top-right .sffm-menu-no-8 {
--sffm-translate-y: calc(-8*100% - 8*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-top-left .sffm-menu-no-9,
.sffm-floatmenu-template-9.sffm-position-top-right .sffm-menu-no-9 {
--sffm-translate-y: calc(-9*100% - 9*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-top-left .sffm-menu-no-10,
.sffm-floatmenu-template-9.sffm-position-top-right .sffm-menu-no-10 {
--sffm-translate-y: calc(-10*100% - 10*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-top-left .sffm-menu-no-11,
.sffm-floatmenu-template-9.sffm-position-top-right .sffm-menu-no-11 {
--sffm-translate-y: calc(-11*100% - 11*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-top-left .sffm-menu-no-12,
.sffm-floatmenu-template-9.sffm-position-top-right .sffm-menu-no-12 {
--sffm-translate-y: calc(-12*100% - 12*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-top-left .sffm-menu-no-13,
.sffm-floatmenu-template-9.sffm-position-top-right .sffm-menu-no-13 {
--sffm-translate-y: calc(-13*100% - 13*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-top-left .sffm-menu-no-14,
.sffm-floatmenu-template-9.sffm-position-top-right .sffm-menu-no-14 {
--sffm-translate-y: calc(-14*100% - 14*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-top-left .sffm-menu-no-15,
.sffm-floatmenu-template-9.sffm-position-top-right .sffm-menu-no-15 {
--sffm-translate-y: calc(-15*100% - 15*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-top-left .sffm-menu-no-16,
.sffm-floatmenu-template-9.sffm-position-top-right .sffm-menu-no-16 {
--sffm-translate-y: calc(-16*100% - 16*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-top-left .sffm-menu-no-17,
.sffm-floatmenu-template-9.sffm-position-top-right .sffm-menu-no-17 {
--sffm-translate-y: calc(-17*100% - 17*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-top-left .sffm-menu-no-18,
.sffm-floatmenu-template-9.sffm-position-top-right .sffm-menu-no-18 {
--sffm-translate-y: calc(-18*100% - 18*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-bottom-left .sffm-menu-no-1,
.sffm-floatmenu-template-9.sffm-position-bottom-right .sffm-menu-no-1 {
--sffm-translate-y: calc(1*100% + 1*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-bottom-left .sffm-menu-no-2,
.sffm-floatmenu-template-9.sffm-position-bottom-right .sffm-menu-no-2 {
--sffm-translate-y: calc(2*100% + 2*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-bottom-left .sffm-menu-no-3,
.sffm-floatmenu-template-9.sffm-position-bottom-right .sffm-menu-no-3 {
--sffm-translate-y: calc(3*100% + 3*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-bottom-left .sffm-menu-no-4,
.sffm-floatmenu-template-9.sffm-position-bottom-right .sffm-menu-no-4 {
--sffm-translate-y: calc(4*100% + 4*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-bottom-left .sffm-menu-no-5,
.sffm-floatmenu-template-9.sffm-position-bottom-right .sffm-menu-no-5 {
--sffm-translate-y: calc(5*100% + 5*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-bottom-left .sffm-menu-no-6,
.sffm-floatmenu-template-9.sffm-position-bottom-right .sffm-menu-no-6 {
--sffm-translate-y: calc(6*100% + 6*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-bottom-left .sffm-menu-no-7,
.sffm-floatmenu-template-9.sffm-position-bottom-right .sffm-menu-no-7 {
--sffm-translate-y: calc(7*100% + 7*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-bottom-left .sffm-menu-no-8,
.sffm-floatmenu-template-9.sffm-position-bottom-right .sffm-menu-no-8 {
--sffm-translate-y: calc(8*100% + 8*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-bottom-left .sffm-menu-no-9,
.sffm-floatmenu-template-9.sffm-position-bottom-right .sffm-menu-no-9 {
--sffm-translate-y: calc(9*100% + 9*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-bottom-left .sffm-menu-no-10,
.sffm-floatmenu-template-9.sffm-position-bottom-right .sffm-menu-no-10 {
--sffm-translate-y: calc(10*100% + 10*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-bottom-left .sffm-menu-no-11,
.sffm-floatmenu-template-9.sffm-position-bottom-right .sffm-menu-no-11 {
--sffm-translate-y: calc(11*100% + 11*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-bottom-left .sffm-menu-no-12,
.sffm-floatmenu-template-9.sffm-position-bottom-right .sffm-menu-no-12 {
--sffm-translate-y: calc(12*100% + 12*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-bottom-left .sffm-menu-no-13,
.sffm-floatmenu-template-9.sffm-position-bottom-right .sffm-menu-no-13 {
--sffm-translate-y: calc(13*100% + 13*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-bottom-left .sffm-menu-no-14,
.sffm-floatmenu-template-9.sffm-position-bottom-right .sffm-menu-no-14 {
--sffm-translate-y: calc(14*100% + 14*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-bottom-left .sffm-menu-no-15,
.sffm-floatmenu-template-9.sffm-position-bottom-right .sffm-menu-no-15 {
--sffm-translate-y: calc(15*100% + 15*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-bottom-left .sffm-menu-no-16,
.sffm-floatmenu-template-9.sffm-position-bottom-right .sffm-menu-no-16 {
--sffm-translate-y: calc(16*100% + 16*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-bottom-left .sffm-menu-no-17,
.sffm-floatmenu-template-9.sffm-position-bottom-right .sffm-menu-no-17 {
--sffm-translate-y: calc(17*100% + 17*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-9.sffm-position-bottom-left .sffm-menu-no-18,
.sffm-floatmenu-template-9.sffm-position-bottom-right .sffm-menu-no-18 {
--sffm-translate-y: calc(18*100% + 18*var(--sffm-button-gap, 5px));
} .sffm-floatmenu-template-10 ul.sffm-menu {
position: absolute;
display: grid;
visibility: hidden;
}
.sffm-floatmenu-template-10 .sffm-floatmenu-show ul.sffm-menu {
visibility: visible;
}
.sffm-floatmenu-template-10.sffm-position-top-left ul.sffm-menu {
top: 0;
left: 0;
}
.sffm-floatmenu-template-10.sffm-position-top-right ul.sffm-menu {
top: 0;
right: 0;
}
.sffm-floatmenu-template-10.sffm-position-bottom-left ul.sffm-menu {
bottom: 0;
left: 0;
}
.sffm-floatmenu-template-10.sffm-position-bottom-right ul.sffm-menu {
bottom: 0;
right: 0;
}
.sffm-floatmenu-template-10.sffm-position-top-left .sffm-menu-no-0 {
grid-area: 1 / 1 / 2 / 2;
}
.sffm-floatmenu-template-10.sffm-position-top-left .sffm-menu-no-1 {
grid-area: 2 / 1 / 3 / 2;
}
.sffm-floatmenu-template-10.sffm-position-top-left .sffm-menu-no-2 {
grid-area: 1 / 2 / 2 / 3;
}
.sffm-floatmenu-template-10.sffm-position-top-left .sffm-menu-no-3 {
grid-area: 3 / 1 / 4 / 2;
}
.sffm-floatmenu-template-10.sffm-position-top-left .sffm-menu-no-4 {
grid-area: 1 / 3 / 2 / 4;
}
.sffm-floatmenu-template-10.sffm-position-top-left .sffm-menu-no-5 {
grid-area: 4 / 1 / 5 / 2;
}
.sffm-floatmenu-template-10.sffm-position-top-left .sffm-menu-no-6 {
grid-area: 1 / 4 / 2 / 5;
}
.sffm-floatmenu-template-10.sffm-position-top-left .sffm-menu-no-7 {
grid-area: 5 / 1 / 6 / 2;
}
.sffm-floatmenu-template-10.sffm-position-top-left .sffm-menu-no-8 {
grid-area: 1 / 5 / 2 / 6;
}
.sffm-floatmenu-template-10.sffm-position-top-left .sffm-menu-no-9 {
grid-area: 6 / 1 / 7 / 2;
}
.sffm-floatmenu-template-10.sffm-position-top-left .sffm-menu-no-10 {
grid-area: 1 / 6 / 2 / 7;
}
.sffm-floatmenu-template-10.sffm-position-top-left .sffm-menu-no-11 {
grid-area: 7 / 1 / 8 / 2;
}
.sffm-floatmenu-template-10.sffm-position-top-left .sffm-menu-no-12 {
grid-area: 1 / 7 / 2 / 8;
}
.sffm-floatmenu-template-10.sffm-position-top-left .sffm-menu-no-13 {
grid-area: 8 / 1 / 9 / 2;
}
.sffm-floatmenu-template-10.sffm-position-top-left .sffm-menu-no-14 {
grid-area: 1 / 8 / 2 / 9;
}
.sffm-floatmenu-template-10.sffm-position-top-left .sffm-menu-no-15 {
grid-area: 9 / 1 / 10 / 2;
}
.sffm-floatmenu-template-10.sffm-position-top-left .sffm-menu-no-16 {
grid-area: 1 / 9 / 2 / 10;
}
.sffm-floatmenu-template-10.sffm-position-top-left .sffm-menu-no-17 {
grid-area: 10 / 1 / 11 / 2;
}
.sffm-floatmenu-template-10.sffm-position-top-left .sffm-menu-no-18 {
grid-area: 1 / 10 / 2 / 11;
}
.sffm-floatmenu-template-10.sffm-position-bottom-left .sffm-menu-no-0 {
grid-area: 10 / 1 / 11 / 2;
}
.sffm-floatmenu-template-10.sffm-position-bottom-left .sffm-menu-no-1 {
grid-area: 9 / 1 / 10 / 2;
}
.sffm-floatmenu-template-10.sffm-position-bottom-left .sffm-menu-no-2 {
grid-area: 10 / 2 / 11 / 3;
}
.sffm-floatmenu-template-10.sffm-position-bottom-left .sffm-menu-no-3 {
grid-area: 8 / 1 / 9 / 2;
}
.sffm-floatmenu-template-10.sffm-position-bottom-left .sffm-menu-no-4 {
grid-area: 10 / 3 / 11 / 4;
}
.sffm-floatmenu-template-10.sffm-position-bottom-left .sffm-menu-no-5 {
grid-area: 7 / 1 / 8 / 2;
}
.sffm-floatmenu-template-10.sffm-position-bottom-left .sffm-menu-no-6 {
grid-area: 10 / 4 / 11 / 5;
}
.sffm-floatmenu-template-10.sffm-position-bottom-left .sffm-menu-no-7 {
grid-area: 6 / 1 / 7 / 2;
}
.sffm-floatmenu-template-10.sffm-position-bottom-left .sffm-menu-no-8 {
grid-area: 10 / 5 / 11 / 6;
}
.sffm-floatmenu-template-10.sffm-position-bottom-left .sffm-menu-no-9 {
grid-area: 5 / 1 / 6 / 2;
}
.sffm-floatmenu-template-10.sffm-position-bottom-left .sffm-menu-no-10 {
grid-area: 10 / 6 / 11 / 7;
}
.sffm-floatmenu-template-10.sffm-position-bottom-left .sffm-menu-no-11 {
grid-area: 4 / 1 / 5 / 2;
}
.sffm-floatmenu-template-10.sffm-position-bottom-left .sffm-menu-no-12 {
grid-area: 10 / 7 / 11 / 8;
}
.sffm-floatmenu-template-10.sffm-position-bottom-left .sffm-menu-no-13 {
grid-area: 3 / 1 / 4 / 2;
}
.sffm-floatmenu-template-10.sffm-position-bottom-left .sffm-menu-no-14 {
grid-area: 10 / 8 / 11 / 9;
}
.sffm-floatmenu-template-10.sffm-position-bottom-left .sffm-menu-no-15 {
grid-area: 2 / 1 / 3 / 2;
}
.sffm-floatmenu-template-10.sffm-position-bottom-left .sffm-menu-no-16 {
grid-area: 10 / 9 / 11 / 10;
}
.sffm-floatmenu-template-10.sffm-position-bottom-left .sffm-menu-no-17 {
grid-area: 1 / 1 / 2 / 2;
}
.sffm-floatmenu-template-10.sffm-position-bottom-left .sffm-menu-no-18 {
grid-area: 10 / 10 / 11 / 11;
}
.sffm-floatmenu-template-10.sffm-position-bottom-right .sffm-menu-no-0 {
grid-area: 10 / 10 / 11 / 11;
}
.sffm-floatmenu-template-10.sffm-position-bottom-right .sffm-menu-no-1 {
grid-area: 9 / 10 / 10 / 11;
}
.sffm-floatmenu-template-10.sffm-position-bottom-right .sffm-menu-no-2 {
grid-area: 10 / 9 / 11 / 10;
}
.sffm-floatmenu-template-10.sffm-position-bottom-right .sffm-menu-no-3 {
grid-area: 8 / 10 / 9 / 11;
}
.sffm-floatmenu-template-10.sffm-position-bottom-right .sffm-menu-no-4 {
grid-area: 10 / 8 / 11 / 9;
}
.sffm-floatmenu-template-10.sffm-position-bottom-right .sffm-menu-no-5 {
grid-area: 7 / 10 / 8 / 11;
}
.sffm-floatmenu-template-10.sffm-position-bottom-right .sffm-menu-no-6 {
grid-area: 10 / 7 / 11 / 8;
}
.sffm-floatmenu-template-10.sffm-position-bottom-right .sffm-menu-no-7 {
grid-area: 6 / 10 / 7 / 11;
}
.sffm-floatmenu-template-10.sffm-position-bottom-right .sffm-menu-no-8 {
grid-area: 10 / 6 / 11 / 7;
}
.sffm-floatmenu-template-10.sffm-position-bottom-right .sffm-menu-no-9 {
grid-area: 5 / 10 / 6 / 11;
}
.sffm-floatmenu-template-10.sffm-position-bottom-right .sffm-menu-no-10 {
grid-area: 10 / 5 / 11 / 6;
}
.sffm-floatmenu-template-10.sffm-position-bottom-right .sffm-menu-no-11 {
grid-area: 4 / 10 / 5 / 11;
}
.sffm-floatmenu-template-10.sffm-position-bottom-right .sffm-menu-no-12 {
grid-area: 10 / 4 / 11 / 5;
}
.sffm-floatmenu-template-10.sffm-position-bottom-right .sffm-menu-no-13 {
grid-area: 3 / 10 / 4 / 11;
}
.sffm-floatmenu-template-10.sffm-position-bottom-right .sffm-menu-no-14 {
grid-area: 10 / 3 / 11 / 4;
}
.sffm-floatmenu-template-10.sffm-position-bottom-right .sffm-menu-no-15 {
grid-area: 2 / 10 / 3 / 11;
}
.sffm-floatmenu-template-10.sffm-position-bottom-right .sffm-menu-no-16 {
grid-area: 10 / 2 / 11 / 3;
}
.sffm-floatmenu-template-10.sffm-position-bottom-right .sffm-menu-no-17 {
grid-area: 1 / 10 / 2 / 11;
}
.sffm-floatmenu-template-10.sffm-position-bottom-right .sffm-menu-no-18 {
grid-area: 10 / 1 / 11 / 2;
}
.sffm-floatmenu-template-10.sffm-position-top-right .sffm-menu-no-0 {
grid-area: 1 / 10 / 2 / 11;
}
.sffm-floatmenu-template-10.sffm-position-top-right .sffm-menu-no-1 {
grid-area: 2 / 10 / 3 / 11;
}
.sffm-floatmenu-template-10.sffm-position-top-right .sffm-menu-no-2 {
grid-area: 1 / 9 / 2 / 10;
}
.sffm-floatmenu-template-10.sffm-position-top-right .sffm-menu-no-3 {
grid-area: 3 / 10 / 4 / 11;
}
.sffm-floatmenu-template-10.sffm-position-top-right .sffm-menu-no-4 {
grid-area: 1 / 8 / 2 / 9;
}
.sffm-floatmenu-template-10.sffm-position-top-right .sffm-menu-no-5 {
grid-area: 4 / 10 / 5 / 11;
}
.sffm-floatmenu-template-10.sffm-position-top-right .sffm-menu-no-6 {
grid-area: 1 / 7 / 2 / 8;
}
.sffm-floatmenu-template-10.sffm-position-top-right .sffm-menu-no-7 {
grid-area: 5 / 10 / 6 / 11;
}
.sffm-floatmenu-template-10.sffm-position-top-right .sffm-menu-no-8 {
grid-area: 1 / 6 / 2 / 7;
}
.sffm-floatmenu-template-10.sffm-position-top-right .sffm-menu-no-9 {
grid-area: 6 / 10 / 7 / 11;
}
.sffm-floatmenu-template-10.sffm-position-top-right .sffm-menu-no-10 {
grid-area: 1 / 5 / 2 / 6;
}
.sffm-floatmenu-template-10.sffm-position-top-right .sffm-menu-no-11 {
grid-area: 7 / 10 / 8 / 11;
}
.sffm-floatmenu-template-10.sffm-position-top-right .sffm-menu-no-12 {
grid-area: 1 / 4 / 2 / 5;
}
.sffm-floatmenu-template-10.sffm-position-top-right .sffm-menu-no-13 {
grid-area: 8 / 10 / 9 / 11;
}
.sffm-floatmenu-template-10.sffm-position-top-right .sffm-menu-no-14 {
grid-area: 1 / 3 / 2 / 4;
}
.sffm-floatmenu-template-10.sffm-position-top-right .sffm-menu-no-15 {
grid-area: 9 / 10 / 10 / 11;
}
.sffm-floatmenu-template-10.sffm-position-top-right .sffm-menu-no-16 {
grid-area: 1 / 2 / 2 / 3;
}
.sffm-floatmenu-template-10.sffm-position-top-right .sffm-menu-no-17 {
grid-area: 10 / 10 / 11 / 11;
}
.sffm-floatmenu-template-10.sffm-position-top-right .sffm-menu-no-18 {
grid-area: 1 / 1 / 2 / 2;
}
.sffm-floatmenu-template-10 .sffm-menu-items {
--sffm-translate-y: 0px;
--sffm-translate-x: 0px;
}
.sffm-floatmenu-template-10.sffm-position-bottom-left .sffm-menu-no-1,
.sffm-floatmenu-template-10.sffm-position-bottom-right .sffm-menu-no-1 {
--sffm-translate-y: calc(1*100% + 1*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-10.sffm-position-bottom-left .sffm-menu-no-3,
.sffm-floatmenu-template-10.sffm-position-bottom-right .sffm-menu-no-3 {
--sffm-translate-y: calc(2*100% + 2*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-10.sffm-position-bottom-left .sffm-menu-no-5,
.sffm-floatmenu-template-10.sffm-position-bottom-right .sffm-menu-no-5 {
--sffm-translate-y: calc(3*100% + 3*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-10.sffm-position-bottom-left .sffm-menu-no-7,
.sffm-floatmenu-template-10.sffm-position-bottom-right .sffm-menu-no-7 {
--sffm-translate-y: calc(4*100% + 4*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-10.sffm-position-bottom-left .sffm-menu-no-9,
.sffm-floatmenu-template-10.sffm-position-bottom-right .sffm-menu-no-9 {
--sffm-translate-y: calc(5*100% + 5*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-10.sffm-position-bottom-left .sffm-menu-no-11,
.sffm-floatmenu-template-10.sffm-position-bottom-right .sffm-menu-no-11 {
--sffm-translate-y: calc(6*100% + 6*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-10.sffm-position-bottom-left .sffm-menu-no-13,
.sffm-floatmenu-template-10.sffm-position-bottom-right .sffm-menu-no-13 {
--sffm-translate-y: calc(7*100% + 7*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-10.sffm-position-bottom-left .sffm-menu-no-15,
.sffm-floatmenu-template-10.sffm-position-bottom-right .sffm-menu-no-15 {
--sffm-translate-y: calc(8*100% + 8*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-10.sffm-position-bottom-left .sffm-menu-no-17,
.sffm-floatmenu-template-10.sffm-position-bottom-right .sffm-menu-no-17 {
--sffm-translate-y: calc(9*100% + 9*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-10.sffm-position-top-left .sffm-menu-no-1,
.sffm-floatmenu-template-10.sffm-position-top-right .sffm-menu-no-1 {
--sffm-translate-y: calc(-1*100% - 1*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-10.sffm-position-top-left .sffm-menu-no-3,
.sffm-floatmenu-template-10.sffm-position-top-right .sffm-menu-no-3 {
--sffm-translate-y: calc(-2*100% - 2*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-10.sffm-position-top-left .sffm-menu-no-5,
.sffm-floatmenu-template-10.sffm-position-top-right .sffm-menu-no-5 {
--sffm-translate-y: calc(-3*100% - 3*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-10.sffm-position-top-left .sffm-menu-no-7,
.sffm-floatmenu-template-10.sffm-position-top-right .sffm-menu-no-7 {
--sffm-translate-y: calc(-4*100% - 4*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-10.sffm-position-top-left .sffm-menu-no-9,
.sffm-floatmenu-template-10.sffm-position-top-right .sffm-menu-no-9 {
--sffm-translate-y: calc(-5*100% - 5*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-10.sffm-position-top-left .sffm-menu-no-11,
.sffm-floatmenu-template-10.sffm-position-top-right .sffm-menu-no-11 {
--sffm-translate-y: calc(-6*100% - 6*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-10.sffm-position-top-left .sffm-menu-no-13,
.sffm-floatmenu-template-10.sffm-position-top-right .sffm-menu-no-13 {
--sffm-translate-y: calc(-7*100% - 7*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-10.sffm-position-top-left .sffm-menu-no-15,
.sffm-floatmenu-template-10.sffm-position-top-right .sffm-menu-no-15 {
--sffm-translate-y: calc(-8*100% - 8*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-10.sffm-position-top-left .sffm-menu-no-17,
.sffm-floatmenu-template-10.sffm-position-top-right .sffm-menu-no-17 {
--sffm-translate-y: calc(-9*100% - 9*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-10.sffm-position-top-left .sffm-menu-no-2,
.sffm-floatmenu-template-10.sffm-position-bottom-left .sffm-menu-no-2 {
--sffm-translate-x: calc(-1*100% - 1*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-10.sffm-position-top-left .sffm-menu-no-4,
.sffm-floatmenu-template-10.sffm-position-bottom-left .sffm-menu-no-4 {
--sffm-translate-x: calc(-2*100% - 2*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-10.sffm-position-top-left .sffm-menu-no-6,
.sffm-floatmenu-template-10.sffm-position-bottom-left .sffm-menu-no-6 {
--sffm-translate-x: calc(-3*100% - 3*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-10.sffm-position-top-left .sffm-menu-no-8,
.sffm-floatmenu-template-10.sffm-position-bottom-left .sffm-menu-no-8 {
--sffm-translate-x: calc(-4*100% - 4*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-10.sffm-position-top-left .sffm-menu-no-10,
.sffm-floatmenu-template-10.sffm-position-bottom-left .sffm-menu-no-10 {
--sffm-translate-x: calc(-5*100% - 5*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-10.sffm-position-top-left .sffm-menu-no-12,
.sffm-floatmenu-template-10.sffm-position-bottom-left .sffm-menu-no-12 {
--sffm-translate-x: calc(-6*100% - 6*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-10.sffm-position-top-left .sffm-menu-no-14,
.sffm-floatmenu-template-10.sffm-position-bottom-left .sffm-menu-no-14 {
--sffm-translate-x: calc(-7*100% - 7*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-10.sffm-position-top-left .sffm-menu-no-16,
.sffm-floatmenu-template-10.sffm-position-bottom-left .sffm-menu-no-16 {
--sffm-translate-x: calc(-8*100% - 8*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-10.sffm-position-top-left .sffm-menu-no-18,
.sffm-floatmenu-template-10.sffm-position-bottom-left .sffm-menu-no-18 {
--sffm-translate-x: calc(-9*100% - 9*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-10.sffm-position-top-right .sffm-menu-no-2,
.sffm-floatmenu-template-10.sffm-position-bottom-right .sffm-menu-no-2 {
--sffm-translate-x: calc(1*100% + 1*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-10.sffm-position-top-right .sffm-menu-no-4,
.sffm-floatmenu-template-10.sffm-position-bottom-right .sffm-menu-no-4 {
--sffm-translate-x: calc(2*100% + 2*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-10.sffm-position-top-right .sffm-menu-no-6,
.sffm-floatmenu-template-10.sffm-position-bottom-right .sffm-menu-no-6 {
--sffm-translate-x: calc(3*100% + 3*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-10.sffm-position-top-right .sffm-menu-no-8,
.sffm-floatmenu-template-10.sffm-position-bottom-right .sffm-menu-no-8 {
--sffm-translate-x: calc(4*100% + 4*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-10.sffm-position-top-right .sffm-menu-no-10,
.sffm-floatmenu-template-10.sffm-position-bottom-right .sffm-menu-no-10 {
--sffm-translate-x: calc(5*100% + 5*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-10.sffm-position-top-right .sffm-menu-no-12,
.sffm-floatmenu-template-10.sffm-position-bottom-right .sffm-menu-no-12 {
--sffm-translate-x: calc(6*100% + 6*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-10.sffm-position-top-right .sffm-menu-no-14,
.sffm-floatmenu-template-10.sffm-position-bottom-right .sffm-menu-no-14 {
--sffm-translate-x: calc(7*100% + 7*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-10.sffm-position-top-right .sffm-menu-no-16,
.sffm-floatmenu-template-10.sffm-position-bottom-right .sffm-menu-no-16 {
--sffm-translate-x: calc(8*100% + 8*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-10.sffm-position-top-right .sffm-menu-no-18,
.sffm-floatmenu-template-10.sffm-position-bottom-right .sffm-menu-no-18 {
--sffm-translate-x: calc(9*100% + 9*var(--sffm-button-gap, 5px));
}
.sffm-floatmenu-template-10[class*="sffm-step-"] ul.sffm-menu li.sffm-menu-no-1,
.sffm-floatmenu-template-10[class*="sffm-step-"] ul.sffm-menu li.sffm-menu-no-2 {
transition-delay: 0.1s;
}
.sffm-floatmenu-template-10[class*="sffm-step-"] ul.sffm-menu li.sffm-menu-no-3,
.sffm-floatmenu-template-10[class*="sffm-step-"] ul.sffm-menu li.sffm-menu-no-4 {
transition-delay: 0.2s;
}
.sffm-floatmenu-template-10[class*="sffm-step-"] ul.sffm-menu li.sffm-menu-no-5,
.sffm-floatmenu-template-10[class*="sffm-step-"] ul.sffm-menu li.sffm-menu-no-6 {
transition-delay: 0.3s;
}
.sffm-floatmenu-template-10[class*="sffm-step-"] ul.sffm-menu li.sffm-menu-no-7,
.sffm-floatmenu-template-10[class*="sffm-step-"] ul.sffm-menu li.sffm-menu-no-8 {
transition-delay: 0.4s;
}
.sffm-floatmenu-template-10[class*="sffm-step-"] ul.sffm-menu li.sffm-menu-no-9,
.sffm-floatmenu-template-10[class*="sffm-step-"] ul.sffm-menu li.sffm-menu-no-10 {
transition-delay: 0.5s;
}
.sffm-floatmenu-template-10[class*="sffm-step-"] ul.sffm-menu li.sffm-menu-no-11,
.sffm-floatmenu-template-10[class*="sffm-step-"] ul.sffm-menu li.sffm-menu-no-12 {
transition-delay: 0.6s;
}
.sffm-floatmenu-template-10[class*="sffm-step-"] ul.sffm-menu li.sffm-menu-no-13,
.sffm-floatmenu-template-10[class*="sffm-step-"] ul.sffm-menu li.sffm-menu-no-14 {
transition-delay: 0.7s;
}
.sffm-floatmenu-template-10[class*="sffm-step-"] ul.sffm-menu li.sffm-menu-no-15,
.sffm-floatmenu-template-10[class*="sffm-step-"] ul.sffm-menu li.sffm-menu-no-16 {
transition-delay: 0.8s;
}
.sffm-floatmenu-template-10[class*="sffm-step-"] ul.sffm-menu li.sffm-menu-no-17,
.sffm-floatmenu-template-10[class*="sffm-step-"] ul.sffm-menu li.sffm-menu-no-18 {
transition-delay: 0.9s;
}
.sffm-floatmenu-template-10.sffm-shape-oval ul.sffm-menu li:nth-child(odd) a {
clip-path: ellipse(35% 50% at 50% 50%)
}
.sffm-floatmenu-template-10.sffm-position-top-left ul.sffm-menu li:nth-child(even) .sffm-tooltip,
.sffm-floatmenu-template-10.sffm-position-bottom-left ul.sffm-menu li:nth-child(even) .sffm-tooltip {
left: 100%;
margin-left: var(--sffm-tooltip-indent, -20px);
top: 50%;
transform: translateY(-50%);
}
.sffm-floatmenu-template-10.sffm-position-top-left ul.sffm-menu li:nth-child(odd) .sffm-tooltip,
.sffm-floatmenu-template-10.sffm-position-top-right ul.sffm-menu li:nth-child(odd) .sffm-tooltip {
transform: rotate(90deg) translateY(-50%);
transform-origin: 0 0;
left: 50%;
top: 100%;
margin-top: var(--sffm-tooltip-indent, -20px);
}
.sffm-floatmenu-template-10.sffm-position-top-right ul.sffm-menu li:nth-child(even) .sffm-tooltip,
.sffm-floatmenu-template-10.sffm-position-bottom-right ul.sffm-menu li:nth-child(even) .sffm-tooltip {
right: 100%;
margin-right: var(--sffm-tooltip-indent, -20px);
top: 50%;
transform: translateY(-50%);
}
.sffm-floatmenu-template-10.sffm-position-bottom-left ul.sffm-menu li:nth-child(odd) .sffm-tooltip,
.sffm-floatmenu-template-10.sffm-position-bottom-right ul.sffm-menu li:nth-child(odd) .sffm-tooltip {
transform: rotate(-90deg) translateY(50%);
transform-origin: 0 100%;
left: 50%;
bottom: 100%;
margin-bottom: var(--sffm-tooltip-indent, -20px);
}
.sffm-floatmenu-template-10.sffm-position-top-left ul.sffm-menu li:nth-child(even):hover .sffm-tooltip,
.sffm-floatmenu-template-10.sffm-position-bottom-left ul.sffm-menu li:nth-child(even):hover .sffm-tooltip {
margin-left: var(--sffm-tooltip-indent-hover, 10px);
}
.sffm-floatmenu-template-10.sffm-position-top-right ul.sffm-menu li:nth-child(even):hover .sffm-tooltip,
.sffm-floatmenu-template-10.sffm-position-bottom-right ul.sffm-menu li:nth-child(even):hover .sffm-tooltip {
margin-right: var(--sffm-tooltip-indent-hover, 10px);
}
.sffm-floatmenu-template-10.sffm-position-top-left ul.sffm-menu li:nth-child(odd):hover .sffm-tooltip,
.sffm-floatmenu-template-10.sffm-position-top-right ul.sffm-menu li:nth-child(odd):hover .sffm-tooltip {
margin-top: var(--sffm-tooltip-indent-hover, 10px);
}
.sffm-floatmenu-template-10.sffm-position-bottom-left ul.sffm-menu li:nth-child(odd):hover .sffm-tooltip,
.sffm-floatmenu-template-10.sffm-position-bottom-right ul.sffm-menu li:nth-child(odd):hover .sffm-tooltip {
margin-bottom: var(--sffm-tooltip-indent-hover, 10px);
}
.sffm-floatmenu-template-10.sffm-position-bottom-left li .sffm-tooltip:before,
.sffm-floatmenu-template-10.sffm-position-bottom-right ul.sffm-menu li .sffm-tooltip:before,
.sffm-floatmenu-template-10.sffm-position-top-right ul.sffm-menu li:nth-child(odd) .sffm-tooltip:before,
.sffm-floatmenu-template-10.sffm-position-top-left ul.sffm-menu li .sffm-tooltip:before {
content: "";
position: absolute;
top: 50%;
right: 100%;
border-width: 5px;
border-style: solid;
border-color: transparent var(--sffm-tooltip-bg-color, var(--sffm-button-bg-hover, var(--sffm-button-bg, #000))) transparent transparent;
transform: translateY(-50%);
}
.sffm-floatmenu-template-10.sffm-position-top-right ul.sffm-menu li:nth-child(even) .sffm-tooltip:before,
.sffm-floatmenu-template-10.sffm-position-bottom-right ul.sffm-menu li:nth-child(even) .sffm-tooltip:before {
content: "";
position: absolute;
top: 50%;
left: 100%;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent var(--sffm-tooltip-bg-color, var(--sffm-button-bg-hover, var(--sffm-button-bg, #000)));
transform: translateY(-50%);
} .sffm-floatmenu-template-11 ul.sffm-menu,
.sffm-floatmenu-template-11 .sffm-circular-placeholder {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
height: var(--sffm-buttton-size, 50px);
width: var(--sffm-buttton-size, 50px);
}
.sffm-floatmenu-template-11 ul.sffm-menu li {
position: absolute;
}
.sffm-floatmenu-template-11 .sffm-floatmenu-hide ul.sffm-menu li {
left: 50% !important;
top: 50% !important;
margin-left: calc(var(--sffm-buttton-size, 50px)/2 * -1);
margin-top: calc(var(--sffm-buttton-size, 50px)/2 * -1);
}
.sffm-circular-yes ul.sffm-menu li .sffm-tooltip {
left: 50%;
top: 50%;
transform-origin: 0 0;
}
.sffm-circular-yes ul.sffm-menu li .sffm-tooltip:before {
content: "";
position: absolute;
top: 50%;
right: 100%;
border-width: 5px;
border-style: solid;
border-color: transparent var(--sffm-tooltip-bg-color, var(--sffm-button-bg-hover, var(--sffm-button-bg, #000))) transparent transparent;
transform: translateY(-50%);
}
.sffm-floatmenu-template-11.sffm-right-side ul.sffm-menu li .sffm-tooltip a,
.sffm-floatmenu-template-12.sffm-right-side ul.sffm-menu li .sffm-tooltip a,
.sffm-floatmenu-template-12.sffm-position-top-middle ul.sffm-menu li.sffm-inverse .sffm-tooltip a,
.sffm-floatmenu-template-12.sffm-position-bottom-middle ul.sffm-menu li:not(.sffm-inverse) .sffm-tooltip a,
.sffm-floatmenu-template-14.sffm-right-side ul.sffm-menu li .sffm-tooltip a,
.sffm-floatmenu-template-13 ul.sffm-menu li.sffm-inverse .sffm-tooltip a,
.sffm-floatmenu-template-15 ul.sffm-menu li.sffm-inverse .sffm-tooltip a {
display: inline-block;
transform: rotate(180deg);
} .sffm-floatmenu-template-12 {
--sffm-menu-offset-left: 20px;
--sffm-menu-offset-right: 20px;
--sffm-menu-offset-top: 20px;
--sffm-menu-offset-bottom: 20px;
}
.sffm-floatmenu-template-12 .sffm-floatmenu-inner-wrap {
position: relative;
}
.sffm-floatmenu-template-12 ul.sffm-menu,
.sffm-floatmenu-template-12 .sffm-circular-placeholder {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
height: var(--sffm-buttton-size, 50px);
width: var(--sffm-buttton-size, 50px);
}
.sffm-floatmenu-template-12 ul.sffm-menu li {
position: absolute;
}
.sffm-floatmenu-template-12 .sffm-floatmenu-hide ul.sffm-menu li {
left: 50% !important;
top: 50% !important;
margin-left: calc(var(--sffm-buttton-size, 50px)/2 * -1);
margin-top: calc(var(--sffm-buttton-size, 50px)/2 * -1);
}
.sffm-floatmenu-template-12 {
--sffm-tooltip-indent: 0;
--sffm-tooltip-indent-hover: 0;
}  .sffm-floatmenu-template-13 .sffm-floatmenu-inner-wrap {
position: relative;
}
.sffm-floatmenu-template-13 ul.sffm-menu,
.sffm-floatmenu-template-13 .sffm-circular-placeholder {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
height: var(--sffm-buttton-size, 50px);
width: var(--sffm-buttton-size, 50px);
}
.sffm-floatmenu-template-13 ul.sffm-menu li {
position: absolute;
}
.sffm-floatmenu-template-13 .sffm-floatmenu-hide ul.sffm-menu li {
left: 50% !important;
top: 50% !important;
margin-left: calc(var(--sffm-buttton-size, 50px)/2 * -1);
margin-top: calc(var(--sffm-buttton-size, 50px)/2 * -1);
} .sffm-style-2.sffm-circular-yes ul.sffm-menu:before,
.sffm-style-3.sffm-circular-yes ul.sffm-menu:before,
.sffm-style-4.sffm-circular-yes ul.sffm-menu:before {
content: "";
position: absolute;
border-radius: 50%;
transition: all 0.3s ease;
}
.sffm-style-3.sffm-circular-yes ul.sffm-menu:before,
.sffm-style-4.sffm-circular-yes ul.sffm-menu:before {
background: var(--sffm-circle-bg-color, rgba(0, 0, 0, 0.8));
}
.sffm-style-2.sffm-circular-yes ul.sffm-menu:before {
border: 5px solid var(--sffm-circle-bg-color, #000);
}
.sffm-style-2.sffm-circular-yes .sffm-floatmenu-hide ul.sffm-menu:before,
.sffm-style-3.sffm-circular-yes .sffm-floatmenu-hide ul.sffm-menu:before,
.sffm-style-4.sffm-circular-yes .sffm-floatmenu-hide ul.sffm-menu:before {
transform: scale(0);
opacity: 0;
}
.sffm-style-2.sffm-circular-yes .sffm-floatmenu-show ul.sffm-menu:before,
.sffm-style-3.sffm-circular-yes .sffm-floatmenu-show ul.sffm-menu:before,
.sffm-style-4.sffm-circular-yes .sffm-floatmenu-show ul.sffm-menu:before {
transform: scale(1);
opacity: 1;
}
.sffm-floatmenu-wrapper[class*="sffm-no-step-"] .sffm-floatmenu-hide ul.sffm-menu:before {
transition-delay: 0.05s;
}
.sffm-floatmenu-wrapper[class*="sffm-step-"] .sffm-floatmenu-hide[data-number="1"] ul.sffm-menu:before {
transition-delay: 0.05s;
}
.sffm-floatmenu-wrapper[class*="sffm-step-"] .sffm-floatmenu-hide[data-number="2"] ul.sffm-menu:before {
transition-delay: 0.1s;
}
.sffm-floatmenu-wrapper[class*="sffm-step-"] .sffm-floatmenu-hide[data-number="3"] ul.sffm-menu:before {
transition-delay: 0.15s;
}
.sffm-floatmenu-wrapper[class*="sffm-step-"] .sffm-floatmenu-hide[data-number="4"] ul.sffm-menu:before {
transition-delay: 0.2s;
}
.sffm-floatmenu-wrapper[class*="sffm-step-"] .sffm-floatmenu-hide[data-number="5"] ul.sffm-menu:before {
transition-delay: 0.25s;
}
.sffm-floatmenu-wrapper[class*="sffm-step-"] .sffm-floatmenu-hide[data-number="6"] ul.sffm-menu:before {
transition-delay: 0.3s;
}
.sffm-floatmenu-wrapper[class*="sffm-step-"] .sffm-floatmenu-hide[data-number="7"] ul.sffm-menu:before {
transition-delay: 0.35s;
}
.sffm-floatmenu-wrapper[class*="sffm-step-"] .sffm-floatmenu-hide[data-number="8"] ul.sffm-menu:before {
transition-delay: 0.4s;
}
.sffm-floatmenu-wrapper[class*="sffm-step-"] .sffm-floatmenu-hide[data-number="9"] ul.sffm-menu:before {
transition-delay: 0.45s;
}
.sffm-floatmenu-wrapper[class*="sffm-step-"] .sffm-floatmenu-hide[data-number="10"] ul.sffm-menu:before {
transition-delay: 0.5s;
}
.sffm-floatmenu-wrapper[class*="sffm-step-"] .sffm-floatmenu-hide[data-number="11"] ul.sffm-menu:before {
transition-delay: 0.55s;
}
.sffm-floatmenu-wrapper[class*="sffm-step-"] .sffm-floatmenu-hide[data-number="12"] ul.sffm-menu:before {
transition-delay: 0.6s;
}
.sffm-floatmenu-wrapper[class*="sffm-step-"] .sffm-floatmenu-hide[data-number="13"] ul.sffm-menu:before {
transition-delay: 0.65s;
}
.sffm-floatmenu-wrapper[class*="sffm-step-"] .sffm-floatmenu-hide[data-number="14"] ul.sffm-menu:before {
transition-delay: 0.7s;
}
.sffm-floatmenu-wrapper[class*="sffm-step-"] .sffm-floatmenu-hide[data-number="15"] ul.sffm-menu:before {
transition-delay: 0.75s;
}
.sffm-floatmenu-wrapper[class*="sffm-step-"] .sffm-floatmenu-hide[data-number="16"] ul.sffm-menu:before {
transition-delay: 0.8s;
}
.sffm-menu-no-0 {
opacity: 0;
visibility: hidden;
}
ul.sffm-nav-menu li::marker {
content: "";
} .sffm-floatmenu-template-14 ul.sffm-nav-menu {
display: flex;
flex-direction: column;
padding: 0;
margin: 0;
list-style: none;
gap: var(--sffm-nav-item-gap, 10px);
}
.sffm-floatmenu-template-14 ul.sffm-nav-menu a {
position: relative;
display: block;
margin: 0;
padding: 0;
border: 0;
background: none;
width: var(--sffm-nav-item-size, 25px);
height: var(--sffm-nav-item-size, 25px);
}
.sffm-floatmenu-template-14 ul.sffm-nav-menu li a .sffm-tooltip {
position: absolute;
line-height: 1;
height: 100%;
padding: 0;
white-space: nowrap;
display: flex;
align-items: center;
color: var(--sffm-tooltip-text-color, #000);
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, inherit);
line-height: var(--sffm-tooltip-line-height, inherit);
letter-spacing: var(--sffm-tooltip-letter-spacing, inherit);
visibility: hidden;
}
.sffm-floatmenu-template-14 ul.sffm-nav-menu li a.sffm-scrollsection-active .sffm-tooltip,
.sffm-floatmenu-template-14 ul.sffm-nav-menu li:hover a .sffm-tooltip {
visibility: visible;
}
.sffm-floatmenu-template-14 ul.sffm-nav-menu li a .sffm-tooltip:hover {
color: var(--sffm-tooltip-hover-text-color, var(--sffm-tooltip-text-color, #000));
}
.sffm-floatmenu-template-14.sffm-position-middle-left ul.sffm-nav-menu li a .sffm-tooltip {
left: 100%;
margin: 0 0 0 15px;
}
.sffm-floatmenu-template-14.sffm-position-middle-right ul.sffm-nav-menu li a .sffm-tooltip {
right: 100%;
margin: 0 15px 0 0;
}
.sffm-floatmenu-template-14.sffm-position-middle-left {
--sffm-menu-offset-left: 20px;
}
.sffm-floatmenu-template-14.sffm-position-middle-right {
--sffm-menu-offset-right: 20px;
} .sffm-floatmenu-template-14.sffm-animation-1 ul.sffm-nav-menu li a:after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: calc(100% - 4px);
height: calc(100% - 4px);
border: 2px solid transparent;
background: var(--sffm-nav-item-bg, #DDD);
}
.sffm-floatmenu-template-14.sffm-animation-1 ul.sffm-nav-menu li a.sffm-scrollsection-active:after {
z-index: 10;
border-color: var(--sffm-nav-item-border-active, #000);
background: var(--sffm-nav-item-bg-active, transparent);
transform: scale(1.5);
transition: transform 0.3s, background-color 0.3s, border-color 0.3s;
}
.sffm-floatmenu-template-14.sffm-animation-1 ul.sffm-nav-menu li a:not(.sffm-scrollsection-active):hover:after {
background: var(--sffm-nav-item-bg-hover, #000);
}
.sffm-floatmenu-template-14.sffm-position-middle-left.sffm-animation-1 ul.sffm-nav-menu li a .sffm-tooltip {
opacity: 0;
transform: translate3d(-20px, 0, 0);
transition: transform 0.3s, opacity 0.3s;
}
.sffm-floatmenu-template-14.sffm-position-middle-right.sffm-animation-1 ul.sffm-nav-menu li a .sffm-tooltip {
opacity: 0;
transform: translate3d(20px, 0, 0);
transition: transform 0.3s, opacity 0.3s;
}
.sffm-floatmenu-template-14.sffm-animation-1 ul.sffm-nav-menu li a:not(.sffm-scrollsection-active):hover .sffm-tooltip {
opacity: 0.6;
transform: translate3d(0, 0, 0);
}
.sffm-floatmenu-template-14.sffm-animation-1 ul.sffm-nav-menu li a.sffm-scrollsection-active .sffm-tooltip {
opacity: 1;
transform: translate3d(0, 0, 0);
} .sffm-floatmenu-template-14.sffm-animation-2 ul.sffm-nav-menu li a:before,
.sffm-floatmenu-template-14.sffm-animation-2 ul.sffm-nav-menu li a:after {
content: '';
position: absolute;
border-radius: 50%;
}
.sffm-floatmenu-template-14.sffm-animation-2 ul.sffm-nav-menu li a:before {
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--sffm-nav-item-bg, #DDD);
transition: transform 0.5s;
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.sffm-floatmenu-template-14.sffm-animation-2 ul.sffm-nav-menu li a:not(.sffm-scrollsection-active):hover:before {
transform: scale(1.2);
background: var(--sffm-nav-item-bg-hover, #000);
}
.sffm-floatmenu-template-14.sffm-animation-2 ul.sffm-nav-menu li a.sffm-scrollsection-active:before {
transform: scale(0.35);
}
.sffm-floatmenu-template-14.sffm-animation-2 ul.sffm-nav-menu li a:after {
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
box-shadow: inset 0 0 0 3px var(--sffm-nav-item-border-active, #000);
transform: scale(0.35);
transition: transform 0.5s, box-shadow 0.5s, opacity 0.5s;
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.sffm-floatmenu-template-14.sffm-animation-2 ul.sffm-nav-menu li a.sffm-scrollsection-active:after {
opacity: 1;
transform: scale(1);
}
.sffm-floatmenu-template-14.sffm-animation-2 ul.sffm-nav-menu li a .sffm-tooltip {
opacity: 0;
transform: scale(0);
transform-origin: 50% 50%;
transition: opacity 0.5s, transform 0.5s;
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.sffm-floatmenu-template-14.sffm-animation-2 ul.sffm-nav-menu li a:not(.sffm-scrollsection-active):hover .sffm-tooltip {
opacity: 0.6;
transform: scale(1);
transition-delay: 0.1s;
}
.sffm-floatmenu-template-14.sffm-animation-2 ul.sffm-nav-menu li a.sffm-scrollsection-active .sffm-tooltip {
opacity: 1;
transform: scale(1);
transition-delay: 0.1s;
} .sffm-floatmenu-template-14.sffm-animation-3 ul.sffm-nav-menu li a:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: inset 0 0 0 8px var(--sffm-nav-item-bg, #DDD);
border-radius: 50%;
transition: transform 0.3s, box-shadow 0.3s;
}
.sffm-floatmenu-template-14.sffm-animation-3 ul.sffm-nav-menu li a:not(.sffm-scrollsection-active):hover:before {
box-shadow: inset 0 0 0 10px var(--sffm-nav-item-bg-hover, #000);
}
.sffm-floatmenu-template-14.sffm-animation-3 ul.sffm-nav-menu li a.sffm-scrollsection-active:before {
transform: scale(1.2);
box-shadow: inset 0 0 0 2px var(--sffm-nav-item-border-active, #000);
}
.sffm-floatmenu-template-14.sffm-animation-3 ul.sffm-nav-menu li a .sffm-tooltip {
opacity: 0;
transform-origin: 0 50%;
transform: scale(0.5);
transition: opacity 0.5s, transform 0.5s;
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.sffm-floatmenu-template-14.sffm-animation-3 ul.sffm-nav-menu li a:not(.sffm-scrollsection-active):hover .sffm-tooltip {
opacity: 0.6;
transform: scale(1);
}
.sffm-floatmenu-template-14.sffm-animation-3 ul.sffm-nav-menu li a.sffm-scrollsection-active .sffm-tooltip {
opacity: 1;
transform: scale(1);
} .sffm-floatmenu-template-14.sffm-animation-4 ul.sffm-nav-menu li a:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background: var(--sffm-nav-item-bg, #DDD);
transition: background 0.5s;
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.sffm-floatmenu-template-14.sffm-animation-4 ul.sffm-nav-menu li a.sffm-scrollsection-active:before {
background: var(--sffm-nav-item-bg-active, #000);
}
.sffm-floatmenu-template-14.sffm-animation-4 ul.sffm-nav-menu li a:not(.sffm-scrollsection-active):hover:before {
background: var(--sffm-nav-item-bg-hover, #000);
}
.sffm-floatmenu-template-14.sffm-animation-4 ul.sffm-nav-menu li .sffm-svg-icon {
position: absolute;
left: -10px;
bottom: -15px;
height: 20px;
width: 30px;
fill: var(--sffm-tooltip-text-color, #000);
}
.sffm-floatmenu-template-14.sffm-right-side.sffm-animation-4 ul.sffm-nav-menu li .sffm-svg-icon {
right: -10px;
left: auto;
transform: scaleX(-1);
}
.sffm-floatmenu-template-14.sffm-animation-4 ul.sffm-nav-menu li a .sffm-tooltip {
height: auto;
line-height: 1;
bottom: 100%;
opacity: 0;
transform: scale3d(0, 0, 1);
transform-origin: 0 100%;
transition: transform 0.5s, opacity 0.5s;
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.sffm-floatmenu-template-14.sffm-animation-4 ul.sffm-nav-menu li a.sffm-scrollsection-active .sffm-tooltip {
opacity: 1;
transform: scale(1);
}
.sffm-floatmenu-template-14.sffm-animation-4 ul.sffm-nav-menu li .sffm-tooltip:hover .sffm-svg-icon {
fill: var(--sffm-tooltip-hover-text-color, var(--sffm-tooltip-text-color, #000));
}
.sffm-floatmenu-template-14.sffm-animation-4 ul.sffm-nav-menu li a:not(.sffm-scrollsection-active):hover .sffm-tooltip {
opacity: 0.6;
transform: scale(1);
} .sffm-floatmenu-template-14.sffm-animation-5 ul.sffm-nav-menu {
gap: var(--sffm-nav-item-gap, 20px);
}
.sffm-floatmenu-template-14.sffm-animation-5 ul.sffm-nav-menu li a:before,
.sffm-floatmenu-template-14.sffm-animation-5 ul.sffm-nav-menu li a:after {
content: '';
position: absolute;
}
.sffm-floatmenu-template-14.sffm-animation-5 ul.sffm-nav-menu li:not(:last-child) a:before {
top: 100%;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: var(--sffm-nav-item-gap, 20px);
background: var(--sffm-nav-item-border, #DDD);
}
.sffm-floatmenu-template-14.sffm-animation-5 ul.sffm-nav-menu li a:after {
top: 0%;
left: 0;
width: 100%;
height: 100%;
border: 2px solid var(--sffm-nav-item-border, #DDD);
border-radius: 50%;
transition: transform 0.3s, border-color 0.3s, background 0.3s;
}
.sffm-floatmenu-template-14.sffm-animation-5 ul.sffm-nav-menu li a.sffm-scrollsection-active:after {
border-color: var(--sffm-nav-item-bg-active, #000);
background: var(--sffm-nav-item-bg-active, #000);
transform: scale(1.4);
}
.sffm-floatmenu-template-14.sffm-animation-5 ul.sffm-nav-menu li a:not(.sffm-scrollsection-active):hover:after {
border-color: var(--sffm-nav-item-border-hover, #000);
}
.sffm-floatmenu-template-14.sffm-animation-5 ul.sffm-nav-menu li a .sffm-tooltip {
opacity: 0.3;
transition: opacity 0.3s, color 0.3s;
}
.sffm-floatmenu-template-14.sffm-animation-5 ul.sffm-nav-menu li a:not(.sffm-scrollsection-active):hover .sffm-tooltip {
opacity: 0.5;
}
.sffm-floatmenu-template-14.sffm-animation-5 ul.sffm-nav-menu li a.sffm-scrollsection-active .sffm-tooltip {
opacity: 1;
} .sffm-floatmenu-template-14.sffm-animation-6 ul.sffm-nav-menu li a:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: var(--sffm-nav-item-bg-active, #000);
top: 0;
left: 0;
border-radius: 50%;
transform: scale3d(0, 0, 1);
transition: transform 0.2s;
animation-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.sffm-floatmenu-template-14.sffm-animation-6 ul.sffm-nav-menu li a.sffm-scrollsection-active:before {
transform: scale3d(1, 1, 1);
transition-delay: 0.35s;
}
.sffm-floatmenu-template-14.sffm-animation-6 ul.sffm-nav-menu .sffm-svg-icon {
display: block;
position: relative;
z-index: 10;
width: 100%;
height: 100%;
fill: none;
stroke: var(--sffm-nav-item-border, #DDD);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 39 39;
stroke-dashoffset: 0;
-webkit-transition: stroke-dashoffset 0.4s, opacity 0.3s;
transition: stroke-dashoffset 0.4s, opacity 0.3s;
-webkit-animation-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
animation-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.sffm-floatmenu-template-14.sffm-animation-6 ul.sffm-nav-menu li a:not(.sffm-scrollsection-active):hover .sffm-svg-icon {
stroke: var(--sffm-nav-item-border-hover, #000);
}
.sffm-floatmenu-template-14.sffm-animation-6 ul.sffm-nav-menu li a.sffm-scrollsection-active .sffm-svg-icon {
opacity: 0; stroke-dashoffset: 39;
-webkit-transition-duration: 0.4s, 0.2s;
transition-duration: 0.4s, 0.2s;
-webkit-transition-delay: 0s, 0.2s;
transition-delay: 0s, 0.2s;
}
.sffm-floatmenu-template-14.sffm-animation-6 ul.sffm-nav-menu li a .sffm-tooltip {
top: 50%;
transform: translateY(0);
opacity: 0;
transition: transform 0.3s, opacity 0.3s;
}
.sffm-floatmenu-template-14.sffm-animation-6 ul.sffm-nav-menu li a:not(.sffm-scrollsection-active):hover .sffm-tooltip {
opacity: 0.6;
transform: translateY(-50%);
}
.sffm-floatmenu-template-14.sffm-animation-6 ul.sffm-nav-menu li a.sffm-scrollsection-active .sffm-tooltip {
transform: translateY(-50%);
opacity: 1;
} .sffm-floatmenu-template-14.sffm-animation-7 ul.sffm-nav-menu li a:before {
content: "";
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
border-radius: 50%;
background: var(--sffm-nav-item-bg, #DDD);
transition: transform 0.5s;
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.sffm-floatmenu-template-14.sffm-animation-7 ul.sffm-nav-menu li a:not(.sffm-scrollsection-active):hover:before,
.sffm-floatmenu-template-14.sffm-animation-7 ul.sffm-nav-menu li a.sffm-scrollsection-active:before {
transform: scale(1);
}
.sffm-floatmenu-template-14.sffm-animation-7 ul.sffm-nav-menu li a:not(.sffm-scrollsection-active):hover:before {
background: var(--sffm-nav-item-bg-hover, #000);
}
.sffm-floatmenu-template-14.sffm-animation-7 ul.sffm-nav-menu li a:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--sffm-nav-item-bg-active, #000);
border-radius: 50%;
transform: scale(0);
transition: transform 0.5s;
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.sffm-floatmenu-template-14.sffm-animation-7 ul.sffm-nav-menu li a.sffm-scrollsection-active:after {
transform: scale(1);
}
.sffm-floatmenu-template-14.sffm-animation-7 ul.sffm-nav-menu li a .sffm-tooltip {
opacity: 0;
transition: transform 0.5s, opacity 0.3s;
}
.sffm-floatmenu-template-14.sffm-position-middle-left.sffm-animation-7 ul.sffm-nav-menu li a .sffm-tooltip {
transform: translate3d(-20px, 0, 0);
}
.sffm-floatmenu-template-14.sffm-position-middle-right.sffm-animation-7 ul.sffm-nav-menu li a .sffm-tooltip {
transform: translate3d(20px, 0, 0);
}
.sffm-floatmenu-template-14.sffm-animation-7 ul.sffm-nav-menu li a:not(.sffm-scrollsection-active):hover .sffm-tooltip {
opacity: 0.6;
transform: translate3d(0, 0, 0);
}
.sffm-floatmenu-template-14.sffm-animation-7 ul.sffm-nav-menu li a.sffm-scrollsection-active .sffm-tooltip {
opacity: 1;
transform: translate3d(0, 0, 0);
} .sffm-floatmenu-template-14.sffm-animation-8 ul.sffm-nav-menu li a {
width: 35px;
height: 35px;
}
.sffm-floatmenu-template-14.sffm-animation-8 ul.sffm-nav-menu li a:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: var(--sffm-nav-item-size, 25px);
height: var(--sffm-nav-item-size, 25px);
margin-top: calc(var(--sffm-nav-item-size, 25px)/2 * -1);
margin-left: calc(var(--sffm-nav-item-size, 25px)/2 * -1);
border-radius: 50%;
background: var(--sffm-nav-item-bg, #DDD);
transition: transform 0.3s, opacity 0.3s;
animation-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.sffm-floatmenu-template-14.sffm-animation-8 ul.sffm-nav-menu li a:not(.sffm-scrollsection-active):hover:before {
background: var(--sffm-nav-item-bg-hover, #000);
}
.sffm-floatmenu-template-14.sffm-animation-8 ul.sffm-nav-menu li a.sffm-scrollsection-active:before {
opacity: 0;
transform: translate3d(0, 1.5em, 0) scale3d(0, 0, 1);
}
.sffm-floatmenu-template-14.sffm-animation-8 ul.sffm-nav-menu .sffm-svg-icon {
z-index: 100;
display: block;
width: 100%;
height: 100%;
margin: 0 auto;
opacity: 0;
transform: scale3d(0, 0, 1);
transform-origin: 50% 100%;
transition: transform 0.3s, opacity 0.3s;
animation-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
fill: var(--sffm-nav-item-bg-active, #000);
}
.sffm-floatmenu-template-14.sffm-animation-8 ul.sffm-nav-menu li a.sffm-scrollsection-active .sffm-svg-icon {
opacity: 1;
transform: scale3d(1, 1, 1);
}
.sffm-floatmenu-template-14.sffm-animation-8 ul.sffm-nav-menu li a .sffm-tooltip {
top: 50%;
transform: translateY(0);
opacity: 0;
transition: transform 0.3s, opacity 0.3s;
animation-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.sffm-floatmenu-template-14.sffm-animation-8 ul.sffm-nav-menu li a:not(.sffm-scrollsection-active):hover .sffm-tooltip {
opacity: 0.6;
transition-delay: 0.2s;
transform: translateY(-50%);
}
.sffm-floatmenu-template-14.sffm-animation-8 ul.sffm-nav-menu li a.sffm-scrollsection-active .sffm-tooltip {
opacity: 1;
transition-delay: 0.2s;
transform: translateY(-50%);
} .sffm-floatmenu-template-14.sffm-animation-9 ul.sffm-nav-menu {
gap: var(--sffm-nav-item-gap, 20px);
}
.sffm-floatmenu-template-14.sffm-animation-9 ul.sffm-nav-menu li a {
display: flex;
align-items: center;
gap: var(--sffm-nav-item-gap, 15px);
height: 6px;
width: 40px;
}
.sffm-floatmenu-template-14.sffm-animation-9 ul.sffm-nav-menu li a:before {
position: absolute;
top: 0;
content: '';
width: 100%;
height: 100%;
border-radius: 2px;
background: var(--sffm-nav-item-bg, #DDD);
transform-origin: 0 0;
transition: width 0.5s, background-color 0.5s;
transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}
.sffm-floatmenu-template-14.sffm-position-middle-left.sffm-animation-9 ul.sffm-nav-menu li a:before {
left: 0;
}
.sffm-floatmenu-template-14.sffm-position-middle-right.sffm-animation-9 ul.sffm-nav-menu li a:before {
right: 0;
}
.sffm-floatmenu-template-14.sffm-animation-9 ul.sffm-nav-menu li a:not(.sffm-scrollsection-active):hover:before {
background: var(--sffm-nav-item-bg-hover, #000);
transition: background-color 0.3s;
}
.sffm-floatmenu-template-14.sffm-animation-9 ul.sffm-nav-menu li a.sffm-scrollsection-active:before {
background: var(--sffm-nav-item-bg-active, #000);
width: 15px;
}
.sffm-floatmenu-template-14.sffm-animation-9 ul.sffm-nav-menu li a .sffm-tooltip {
opacity: 0;
transition: opacity 0.5s, transform 0.5s;
transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}
.sffm-floatmenu-template-14.sffm-position-middle-left.sffm-animation-9 ul.sffm-nav-menu li a .sffm-tooltip {
transform: translate3d(20px, 0, 0);
}
.sffm-floatmenu-template-14.sffm-position-middle-right.sffm-animation-9 ul.sffm-nav-menu li a .sffm-tooltip {
transform: translate3d(-20px, 0, 0);
}
.sffm-floatmenu-template-14.sffm-animation-9 ul.sffm-nav-menu li a:not(.sffm-scrollsection-active):hover .sffm-tooltip {
transition-delay: 0.1s;
opacity: 0.6;
transform: translate3d(0, 0, 0);
}
.sffm-floatmenu-template-14.sffm-animation-9 ul.sffm-nav-menu li a.sffm-scrollsection-active .sffm-tooltip {
transition-delay: 0.1s;
opacity: 1;
}
.sffm-floatmenu-template-14.sffm-position-middle-left.sffm-animation-9 ul.sffm-nav-menu li a.sffm-scrollsection-active .sffm-tooltip {
transform: translate3d(-30px, 0, 0);
}
.sffm-floatmenu-template-14.sffm-position-middle-right.sffm-animation-9 ul.sffm-nav-menu li a.sffm-scrollsection-active .sffm-tooltip {
transform: translate3d(30px, 0, 0);
} .sffm-floatmenu-template-14.sffm-animation-10 ul.sffm-nav-menu {
gap: var(--sffm-nav-item-gap, 30px);
}
.sffm-floatmenu-template-14.sffm-animation-10 ul.sffm-nav-menu a {
height: 10px;
width: 30px;
}
.sffm-floatmenu-template-14.sffm-animation-10 ul.sffm-nav-menu li a:before {
content: '';
position: absolute;
top: 4px;
height: 2px;
width: 30px;
background: var(--sffm-nav-item-bg, #DDD);
transition: width 0.3s;
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.sffm-floatmenu-template-14.sffm-position-middle-left.sffm-animation-10 ul.sffm-nav-menu li a:before {
left: 0;
}
.sffm-floatmenu-template-14.sffm-position-middle-right.sffm-animation-10 ul.sffm-nav-menu li a:before {
right: 0;
}
.sffm-floatmenu-template-14.sffm-animation-10 ul.sffm-nav-menu li a:not(.sffm-scrollsection-active):hover:before {
background: var(--sffm-nav-item-bg-hover, #000);
}
.sffm-floatmenu-template-14.sffm-animation-10 ul.sffm-nav-menu li a.sffm-scrollsection-active:before {
background: var(--sffm-nav-item-bg-active, #000);
width: var(--sffm-span-width);
}
.sffm-floatmenu-template-14.sffm-animation-10 ul.sffm-nav-menu li a .sffm-tooltip {
bottom: 0;
opacity: 0;
margin: 0 0 5px;
height: auto;
line-height: 1;
transform: translateY(100%);
transition: transform 0.5s;
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.sffm-floatmenu-template-14.sffm-position-middle-left.sffm-animation-10 ul.sffm-nav-menu li a .sffm-tooltip {
left: 40px;
}
.sffm-floatmenu-template-14.sffm-position-middle-right.sffm-animation-10 ul.sffm-nav-menu li a .sffm-tooltip {
right: 40px;
}
.sffm-floatmenu-template-14.sffm-animation-10 ul.sffm-nav-menu li a:not(.sffm-scrollsection-active):hover .sffm-tooltip {
opacity: 0.6;
bottom: 100%;
transform: translateY(0);
}
.sffm-floatmenu-template-14.sffm-animation-10 ul.sffm-nav-menu li a.sffm-scrollsection-active .sffm-tooltip {
opacity: 1;
bottom: 100%;
transform: translateY(0);
} .sffm-floatmenu-template-14.sffm-position-middle-right ul.sffm-nav-menu {
align-items: flex-end;
}
.sffm-floatmenu-template-14.sffm-animation-11 ul.sffm-nav-menu li a {
display: flex;
align-items: center;
height: auto;
width: var(--sffm-span-width);
}
.sffm-floatmenu-template-14.sffm-position-middle-right.sffm-animation-11 ul.sffm-nav-menu li a {
justify-content: flex-end;
}
.sffm-floatmenu-template-14.sffm-animation-11 ul.sffm-nav-menu li a:before {
content: '';
position: absolute;
top: 50%;
width: 30px;
height: 4px;
margin-top: -2px;
border-radius: 2px;
background: var(--sffm-nav-item-bg, #DDD);
transition: opacity 0.3s;
}
.sffm-floatmenu-template-14.sffm-animation-11 ul.sffm-nav-menu li a.sffm-scrollsection-active:before {
background: var(--sffm-nav-item-bg-active, #000);
}
.sffm-floatmenu-template-14.sffm-position-middle-left.sffm-animation-11 ul.sffm-nav-menu li a:before {
left: 0;
transform-origin: 0% 50%;
}
.sffm-floatmenu-template-14.sffm-position-middle-right.sffm-animation-11 ul.sffm-nav-menu li a:before {
right: 0;
transform-origin: 100% 50%;
}
.sffm-floatmenu-template-14.sffm-animation-11 ul.sffm-nav-menu li a:not(.sffm-scrollsection-active):hover:before {
opacity: 1;
background: var(--sffm-nav-item-bg-hover, #000);
}
.sffm-floatmenu-template-14.sffm-animation-11 ul.sffm-nav-menu li a.sffm-scrollsection-active:before {
opacity: 1;
}
.sffm-floatmenu-template-14.sffm-position-middle-left.sffm-animation-11 ul.sffm-nav-menu li a.sffm-scrollsection-active:before {
animation: moveScaleLeft 0.3s ease forwards;
}
.sffm-floatmenu-template-14.sffm-position-middle-right.sffm-animation-11 ul.sffm-nav-menu li a.sffm-scrollsection-active:before {
animation: moveScaleRight 0.3s ease forwards;
}
@-webkit-keyframes moveScaleLeft {
50% {
right: auto;
left: 0;
width: 30px;
transform-origin: 0% 50%;
}
51% {
right: auto;
left: 0;
width: var(--sffm-span-width);
transform-origin: 100% 50%;
}
100% {
right: 0;
left: auto;
width: 30px;
transform-origin: 100% 50%;
}
}
@keyframes moveScaleLeft {
50% {
right: auto;
left: 0;
width: 30px;
}
51% {
right: auto;
left: 0;
width: var(--sffm-span-width);
}
100% {
right: 0;
left: auto;
width: 30px;
}
}
@-webkit-keyframes moveScaleRight {
50% {
right: 0;
left: auto;
width: 30px;
}
51% {
right: auto;
left: 0;
width: var(--sffm-span-width);
}
100% {
right: auto;
left: 0;
width: 30px;
}
}
@keyframes moveScaleRight {
50% {
right: 0;
left: auto;
width: 30px;
}
51% {
right: auto;
left: 0;
width: var(--sffm-span-width);
}
100% {
right: auto;
left: 0;
width: 30px;
}
}
.sffm-floatmenu-template-14.sffm-animation-11 ul.sffm-nav-menu li a .sffm-tooltip {
position: static;
padding: 0;
margin: 0;
opacity: 0;
}
.sffm-floatmenu-template-14.sffm-position-middle-left.sffm-animation-11 ul.sffm-nav-menu li a .sffm-tooltip {
transform: translate3d(-100px, 0, 0);
}
.sffm-floatmenu-template-14.sffm-position-middle-right.sffm-animation-11 ul.sffm-nav-menu li a .sffm-tooltip {
transform: translate3d(100px, 0, 0);
}
.sffm-floatmenu-template-14.sffm-animation-11 ul.sffm-nav-menu li a.sffm-scrollsection-active .sffm-tooltip {
animation: moveToRight 0.3s 0.2s forwards;
}
@-webkit-keyframes moveToRight {
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
animation-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
}
@keyframes moveToRight {
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
animation-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
} .sffm-floatmenu-template-14.sffm-animation-12 ul.sffm-nav-menu .sffm-svg-icon {
width: 100%;
height: 100%;
transform: rotate3d(0, 0, 1, -90deg);
transition: transform 0.5s;
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
fill: var(--sffm-nav-item-border, #DDD);
}
.sffm-floatmenu-template-14.sffm-animation-12 ul.sffm-nav-menu li a:not(.sffm-scrollsection-active):hover .sffm-svg-icon {
fill: var(--sffm-nav-item-border-hover, #000);
}
.sffm-floatmenu-template-14.sffm-animation-12 ul.sffm-nav-menu li a.sffm-scrollsection-active .sffm-svg-icon {
fill: var(--sffm-nav-item-border-active, #000);
}
.sffm-floatmenu-template-14.sffm-position-middle-left.sffm-animation-12 ul.sffm-nav-menu li a.sffm-scrollsection-active .sffm-svg-icon {
transform: rotate3d(0, 0, 1, 0);
}
.sffm-floatmenu-template-14.sffm-position-middle-right.sffm-animation-12 ul.sffm-nav-menu li a.sffm-scrollsection-active .sffm-svg-icon {
transform: rotate3d(0, 0, 1, -180deg);
}
.sffm-floatmenu-template-14.sffm-animation-12 ul.sffm-nav-menu li a .sffm-tooltip {
top: 50%;
opacity: 0;
transform: translate3d(0, 0, 0);
transition: transform 0.5s, opacity 0.5s;
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.sffm-floatmenu-template-14.sffm-animation-12 ul.sffm-nav-menu li a:not(.sffm-scrollsection-active):hover .sffm-tooltip {
opacity: 0.6;
transform: translate3d(0, -50%, 0);
}
.sffm-floatmenu-template-14.sffm-animation-12 ul.sffm-nav-menu li a.sffm-scrollsection-active .sffm-tooltip {
opacity: 1;
transform: translate3d(0, -50%, 0);
} .sffm-floatmenu-template-14.sffm-animation-13 ul.sffm-nav-menu li a {
height: 30px;
-webkit-perspective: 500px;
perspective: 500px;
}
.sffm-floatmenu-template-14.sffm-position-middle-left.sffm-animation-13 ul.sffm-nav-menu li a {
margin-left: var(--sffm-nav-item-size, 25px);
}
.sffm-floatmenu-template-14.sffm-position-middle-right.sffm-animation-13 ul.sffm-nav-menu li a {
margin-right: var(--sffm-nav-item-size, 25px);
}
.sffm-floatmenu-template-14.sffm-animation-13 ul.sffm-nav-menu li a:before,
.sffm-floatmenu-template-14.sffm-animation-13 ul.sffm-nav-menu li a:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: var(--sffm-nav-item-size, 25px);
height: 100%;
border: 2px solid var(--sffm-nav-item-border, #DDD);
background: var(--sffm-nav-item-bg, #EEE);
}
.sffm-floatmenu-template-14.sffm-animation-13 ul.sffm-nav-menu li a:before {
transition: background-color 0s 0.2s;
}
.sffm-floatmenu-template-14.sffm-animation-13 ul.sffm-nav-menu li a.sffm-scrollsection-active:before {
background: var(--sffm-nav-item-bg-active, #FFF);
transition: none;
}
.sffm-floatmenu-template-14.sffm-animation-13 ul.sffm-nav-menu li a:after {
box-shadow: 0px 0 9px -4px rgba(0, 0, 0, 0);
transition: transform 0.5s, background-color 0s 0.15s, box-shadow 0.5s;
}
.sffm-floatmenu-template-14.sffm-position-middle-left.sffm-animation-13 ul.sffm-nav-menu li a:after {
transform-origin: 1px 50%;
}
.sffm-floatmenu-template-14.sffm-position-middle-right.sffm-animation-13 ul.sffm-nav-menu li a:after {
transform-origin: calc(100% - 1px) 50%;
}
.sffm-floatmenu-template-14.sffm-animation-13 ul.sffm-nav-menu li a:not(.sffm-scrollsection-active):hover:after {
box-shadow: 6px 0 9px -4px rgba(0, 0, 0, 0.2);
transform: rotate3d(0, 1, 0, -15deg);
}
.sffm-floatmenu-template-14.sffm-animation-13 ul.sffm-nav-menu li a.sffm-scrollsection-active:after {
background-color: var(--sffm-nav-item-bg-active, #FFF);
box-shadow: 6px 0 9px -4px rgba(0, 0, 0, 0.2);
}
.sffm-floatmenu-template-14.sffm-position-middle-left.sffm-animation-13 ul.sffm-nav-menu li a.sffm-scrollsection-active:after {
transform: rotate3d(0, 1, 0, -145deg);
}
.sffm-floatmenu-template-14.sffm-position-middle-right.sffm-animation-13 ul.sffm-nav-menu li a.sffm-scrollsection-active:after {
transform: rotate3d(0, 1, 0, 145deg);
}
.sffm-floatmenu-template-14.sffm-animation-13 ul.sffm-nav-menu li a .sffm-tooltip {
opacity: 0;
transform: scale(0);
transition: opacity 0.5s, transform 0.5s;
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.sffm-floatmenu-template-14.sffm-animation-13 ul.sffm-nav-menu li a:not(.sffm-scrollsection-active):hover .sffm-tooltip {
opacity: 0.6;
transform: scale(1);
}
.sffm-floatmenu-template-14.sffm-animation-13 ul.sffm-nav-menu li a.sffm-scrollsection-active .sffm-tooltip {
opacity: 1;
transform: scale(1);
} .sffm-toggle-button {
position: relative;
display: block;
width: var(--sffm-hamburger-width, 25px);
height: var(--sffm-hamburger-thickness, 2px);
margin: 0 auto;
border: none;
cursor: pointer;
background: var(--sffm-trigger-btn-icon-color, var(--sffm-button-color, #FFF));
color: inherit;
font-size: 0;
}
.sffm-toggle-button:before,
.sffm-toggle-button:after {
position: absolute;
top: 0;
left: 50%;
display: block;
width: 100%;
height: var(--sffm-hamburger-thickness, 2px);
background: var(--sffm-trigger-btn-icon-color, var(--sffm-button-color, #FFF));
content: "";
}
.sffm-toggle-animating.sffm-toggle-button {
transition: all 0.35s;
}
.sffm-toggle-animating.sffm-toggle-button:before,
.sffm-toggle-animating.sffm-toggle-button:after {
transition: transform 0.35s;
}
.sffm-floatmenu-trigger:hover .sffm-toggle-button,
.sffm-floatmenu-trigger:hover .sffm-toggle-button:before,
.sffm-floatmenu-trigger:hover .sffm-toggle-button:after {
background: var(--sffm-trigger-btn-hover-icon-color, var(--sffm-trigger-btn-icon-color, var(--sffm-button-color-hover, var(--sffm-button-color, #FFF))));
}
.sffm-flymenu-trigger:hover .sffm-toggle-button,
.sffm-flymenu-trigger:hover .sffm-toggle-button:before,
.sffm-flymenu-trigger:hover .sffm-toggle-button:after {
background: var(--sffm-trigger-btn-icon-color-hover, var(--sffm-trigger-btn-icon-color, #FFF));
}
.sffm-toggle-button:before {
transform: translate(-50%, calc(-1 * var(--sffm-hamburger-spacing, 8px)));
}
.sffm-toggle-button:after {
transform: translate(-50%, var(--sffm-hamburger-spacing, 8px));
}
.sffm-toggle-button.style1:before,
.sffm-toggle-button.style1:after {
transform-origin: 50% 50%;
}
.sffm-floatmenu-show .sffm-toggle-button.style1,
.sffm-flymenu-show .sffm-toggle-button.style1 {
background: transparent;
}
.sffm-floatmenu-show .sffm-toggle-button.style1:before,
.sffm-flymenu-show .sffm-toggle-button.style1:before {
transform: translate(-50%, 0) rotate(45deg);
}
.sffm-floatmenu-show .sffm-toggle-button.style1:after,
.sffm-flymenu-show .sffm-toggle-button.style1:after {
transform: translate(-50%, 0) rotate(-45deg);
}
.sffm-toggle-animating.sffm-toggle-button.style2 {
transition: background 0.35s;
}
.sffm-toggle-button.style2:before,
.sffm-toggle-button.style2:after {
transform-origin: 50% 50%;
}
.sffm-floatmenu-show .sffm-toggle-button.style2,
.sffm-flymenu-show .sffm-toggle-button.style2 {
background: transparent;
transition: none;
}
.sffm-floatmenu-show .sffm-toggle-button.style2:before,
.sffm-flymenu-show .sffm-toggle-button.style2:before {
animation: menuBefore 0.5s forwards;
}
.sffm-floatmenu-show .sffm-toggle-button.style2:after,
.sffm-flymenu-show .sffm-toggle-button.style2:after {
animation: menuAfter 0.5s forwards;
}
@keyframes menuBefore {
0% {
transform: translate(-50%, calc(-1 * var(--sffm-hamburger-spacing, 8px)));
}
40% {
transform: translate(-50%, 0);
}
60% {
transform: translate(-50%, 0);
}
100% {
transform: translate(-50%, 0) rotate(45deg);
}
}
@keyframes menuAfter {
0% {
transform: translate(-50%, calc(var(--sffm-hamburger-spacing, 8px)));
}
40% {
transform: translate(-50%, 0);
}
60% {
transform: translate(-50%, 0);
}
100% {
transform: translate(-50%, 0) rotate(-45deg);
}
}
.sffm-toggle-button.style3,
.sffm-toggle-button.style4,
.sffm-toggle-button.style5,
.sffm-toggle-button.style6,
.sffm-toggle-button.style7,
.sffm-toggle-button.style8 {
height: calc(2 * var(--sffm-hamburger-spacing, 8px) + var(--sffm-hamburger-thickness, 2px));
background: transparent !important;
border-top: var(--sffm-hamburger-thickness, 2px) solid;
border-bottom: var(--sffm-hamburger-thickness, 2px) solid;
}
.sffm-toggle-button.style3:before,
.sffm-toggle-button.style3:after,
.sffm-toggle-button.style4:before,
.sffm-toggle-button.style4:after,
.sffm-toggle-button.style5:before,
.sffm-toggle-button.style5:after,
.sffm-toggle-button.style6:before,
.sffm-toggle-button.style6:after,
.sffm-toggle-button.style7:before,
.sffm-toggle-button.style7:after,
.sffm-toggle-button.style8:before,
.sffm-toggle-button.style8:after,
.sffm-toggle-button.style8:before,
.sffm-toggle-button.style8:after {
top: 50%;
transform: translate(-50%, -50%);
}
.sffm-floatmenu-show .sffm-toggle-button.style3,
.sffm-flymenu-show .sffm-toggle-button.style3 {
border-color: transparent;
}
.sffm-floatmenu-show .sffm-toggle-button.style3:before,
.sffm-flymenu-show .sffm-toggle-button.style3:before {
transform: translate(-50%, -50%) rotate(45deg);
}
.sffm-floatmenu-show .sffm-toggle-button.style3:after,
.sffm-flymenu-show .sffm-toggle-button.style3:after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.sffm-floatmenu-show .sffm-toggle-button.style4,
.sffm-flymenu-show .sffm-toggle-button.style4 {
border-color: transparent;
}
.sffm-floatmenu-show .sffm-toggle-button.style4:before,
.sffm-flymenu-show .sffm-toggle-button.style4:before {
transform: translate(-50%, -50%) rotate(-45deg);
}
.sffm-floatmenu-show .sffm-toggle-button.style4:after,
.sffm-flymenu-show .sffm-toggle-button.style4:after {
transform: translate(-50%, -50%) rotate(-135deg);
}
.sffm-floatmenu-show .sffm-toggle-button.style5,
.sffm-flymenu-show .sffm-toggle-button.style5 {
border-color: transparent;
}
.sffm-floatmenu-show .sffm-toggle-button.style5:before,
.sffm-flymenu-show .sffm-toggle-button.style5:before {
transform: translate(-50%, -50%) rotate(135deg);
}
.sffm-floatmenu-show .sffm-toggle-button.style5:after,
.sffm-flymenu-show .sffm-toggle-button.style5:after {
transform: translate(-50%, -50%) rotate(-135deg);
}
.sffm-toggle-button.style6 {
transition: height 0.35s 0.35s, border-color 0.35s 0.35s;
}
.sffm-toggle-button.style6:before,
.sffm-toggle-button.style6:after {
transform-origin: 50% 50%;
}
.sffm-floatmenu-show .sffm-toggle-button.style6,
.sffm-flymenu-show .sffm-toggle-button.style6 {
height: 0;
border-color: transparent;
transition: all 0.35s 0s;
}
.sffm-floatmenu-show .sffm-toggle-button.style6:before,
.sffm-flymenu-show .sffm-toggle-button.style6:before {
transform: translate(-50%, -50%) rotate(45deg);
transition-delay: 0.5s;
}
.sffm-floatmenu-show .sffm-toggle-button.style6:after,
.sffm-flymenu-show .sffm-toggle-button.style6:after {
transform: translate(-50%, -50%) rotate(-45deg);
transition-delay: 0.5s;
}
.sffm-toggle-button.style7 {
transition: height 0.35s 0.35s, border-color 0.35s 0.35s;
}
.sffm-toggle-button.style7:before,
.sffm-toggle-button.style7:after {
transform-origin: 50% 50%;
}
.sffm-floatmenu-show .sffm-toggle-button.style7,
.sffm-flymenu-show .sffm-toggle-button.style7 {
height: 0;
border-color: transparent;
transition: all 0.35s 0s;
}
.sffm-floatmenu-show .sffm-toggle-button.style7:before,
.sffm-flymenu-show .sffm-toggle-button.style7:before {
transform: translate(-50%, -50%) rotate(-45deg);
transition-delay: 0.5s;
}
.sffm-floatmenu-show .sffm-toggle-button.style7:after,
.sffm-flymenu-show .sffm-toggle-button.style7:after {
transform: translate(-50%, -50%) rotate(-135deg);
transition-delay: 0.5s;
}
.sffm-toggle-button.style8 {
transition: height 0.35s 0.35s, border-color 0.35s 0.35s, transform 0.35s 0s;
}
.sffm-toggle-button.style8:before,
.sffm-toggle-button.style8:after {
transform-origin: 50% 50%;
}
.sffm-floatmenu-show .sffm-toggle-button.style8,
.sffm-flymenu-show .sffm-toggle-button.style8 {
height: 0;
border-color: transparent;
transform: rotate(135deg);
transition: all 0.35s 0s, transform 0.35s 1s;
}
.sffm-floatmenu-show .sffm-toggle-button.style8:before,
.sffm-flymenu-show .sffm-toggle-button.style8:before {
transform: translate(-50%, -50%) rotate(90deg);
transition-delay: 0.5s;
}
.sffm-toggle-button.style9:before,
.sffm-toggle-button.style9:after {
transform-origin: 0% 0%;
}
.sffm-floatmenu-show .sffm-toggle-button.style9:before,
.sffm-flymenu-show .sffm-toggle-button.style9:before {
transform: translate(-50%, 0) rotate(-45deg) scaleX(0.6);
}
.sffm-floatmenu-show .sffm-toggle-button.style9:after,
.sffm-flymenu-show .sffm-toggle-button.style9:after {
transform: translate(-50%, 0) rotate(45deg) scaleX(0.6);
}
.sffm-toggle-button.style10:before,
.sffm-toggle-button.style10:after {
transform-origin: 100% 0%;
}
.sffm-floatmenu-show .sffm-toggle-button.style10:before,
.sffm-flymenu-show .sffm-toggle-button.style10:before {
transform: translate(-50%, 0) rotate(45deg) scaleX(0.6);
}
.sffm-floatmenu-show .sffm-toggle-button.style10:after,
.sffm-flymenu-show .sffm-toggle-button.style10:after {
transform: translate(-50%, 0) rotate(-45deg) scaleX(0.6);
}
.sffm-toggle-button.style11:before,
.sffm-toggle-button.style11:after {
transform-origin: 0% 0%;
}
.sffm-floatmenu-show .sffm-toggle-button.style11,
.sffm-flymenu-show .sffm-toggle-button.style11 {
transform: rotate(-90deg);
}
.sffm-floatmenu-show .sffm-toggle-button.style11:before,
.sffm-flymenu-show .sffm-toggle-button.style11:before {
transform: translate(-50%, 0) rotate(-45deg) scaleX(0.6);
}
.sffm-floatmenu-show .sffm-toggle-button.style11:after,
.sffm-flymenu-show .sffm-toggle-button.style11:after {
transform: translate(-50%, 0) rotate(45deg) scaleX(0.6);
}
.sffm-toggle-button.style12:before,
.sffm-toggle-button.style12:after {
transform-origin: 0% 0%;
}
.sffm-floatmenu-show .sffm-toggle-button.style12,
.sffm-flymenu-show .sffm-toggle-button.style12 {
transform: rotate(90deg);
}
.sffm-floatmenu-show .sffm-toggle-button.style12:before,
.sffm-flymenu-show .sffm-toggle-button.style12:before {
transform: translate(-50%, 0) rotate(-45deg) scaleX(0.6);
}
.sffm-floatmenu-show .sffm-toggle-button.style12:after,
.sffm-flymenu-show .sffm-toggle-button.style12:after {
transform: translate(-50%, 0) rotate(45deg) scaleX(0.6);
}
.sffm-toggle-button.style13:before,
.sffm-toggle-button.style13:after {
transform-origin: 0% 0%;
}
.sffm-floatmenu-show .sffm-toggle-button.style13,
.sffm-flymenu-show .sffm-toggle-button.style13 {
background: transparent;
}
.sffm-floatmenu-show .sffm-toggle-button.style13:before,
.sffm-flymenu-show .sffm-toggle-button.style13:before {
transform: translate(-30%, 0) rotate(-45deg) scaleX(0.6);
}
.sffm-floatmenu-show .sffm-toggle-button.style13:after,
.sffm-flymenu-show .sffm-toggle-button.style13:after {
transform: translate(-30%, 0) rotate(45deg) scaleX(0.6);
}
.sffm-toggle-button.style14:before,
.sffm-toggle-button.style14:after {
transform-origin: 100% 0%;
}
.sffm-floatmenu-show .sffm-toggle-button.style14,
.sffm-flymenu-show .sffm-toggle-button.style14 {
background: transparent;
}
.sffm-floatmenu-show .sffm-toggle-button.style14:before,
.sffm-flymenu-show .sffm-toggle-button.style14:before {
transform: translate(-80%, 0) rotate(45deg) scaleX(0.6);
}
.sffm-floatmenu-show .sffm-toggle-button.style14:after,
.sffm-flymenu-show .sffm-toggle-button.style14:after {
transform: translate(-80%, 0) rotate(-45deg) scaleX(0.6);
}
.sffm-toggle-button.style15:before,
.sffm-toggle-button.style15:after {
transform-origin: 100% 0%;
}
.sffm-floatmenu-show .sffm-toggle-button.style15,
.sffm-flymenu-show .sffm-toggle-button.style15 {
transform: rotate(90deg);
background: transparent;
}
.sffm-floatmenu-show .sffm-toggle-button.style15:before,
.sffm-flymenu-show .sffm-toggle-button.style15:before {
transform: translate(-80%, 0) rotate(45deg) scaleX(0.6);
}
.sffm-floatmenu-show .sffm-toggle-button.style15:after,
.sffm-flymenu-show .sffm-toggle-button.style15:after {
transform: translate(-80%, 0) rotate(-45deg) scaleX(0.6);
}
.sffm-toggle-button.style16:before,
.sffm-toggle-button.style16:after {
transform-origin: 100% 0%;
}
.sffm-floatmenu-show .sffm-toggle-button.style16,
.sffm-flymenu-show .sffm-toggle-button.style16 {
transform: rotate(-90deg);
background: transparent;
}
.sffm-floatmenu-show .sffm-toggle-button.style16:before,
.sffm-flymenu-show .sffm-toggle-button.style16:before {
transform: translate(-80%, 0) rotate(45deg) scaleX(0.6);
}
.sffm-floatmenu-show .sffm-toggle-button.style16:after,
.sffm-flymenu-show .sffm-toggle-button.style16:after {
transform: translate(-80%, 0) rotate(-45deg) scaleX(0.6);
}
.animate--ripple:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
animation: sffm-ripple 1.5s ease-out infinite;
background: var(--sffm-trigger-btn-bg-color, var(--sffm-button-bg, #000));
}
.animate--ripple:hover:before {
display: none;
}
@keyframes sffm-ripple {
from {
opacity: 1;
transform: scale(0);
}
to {
opacity: 0;
transform: scale(1.8);
}
}
@media screen and (min-width:1024px) {
.sffm-hide-desktop {
display: none;
}
}
@media screen and (min-width:768px) and (max-width:1023px) {
.sffm-hide-tablet {
display: none;
}
}
@media screen and (max-width:767px) {
.sffm-hide-mobile {
display: none;
}
}