.sffm-el-menu{
--sffm-el-menu-title-font-size : 1.2em;
} .sffm-el-menu {
position: relative;
display: flex;
flex-direction: column;
gap: 50px;
z-index: 1;
}
.sffm-el-menu-item {
display: block;
line-height: 1;
position: relative;
outline: none;
}
.sffm-el-menu-item-name,
.sffm-el-menu-item-label {
position: relative;
display: inline-block;
}
.sffm-el-menu-item-name {
color: var(--sffm-el-menu-title-color, #EEE);
}
.sffm-el-menu-item-label {
color: var(--sffm-el-menu-subtitle-color, #BBB);
font-size: var(--sffm-el-menu-subtitle-font-size);
}
.sffm-el-menu-item:hover .sffm-el-menu-item-name{
color: var(--sffm-el-menu-title-hover-color, var(--sffm-el-menu-title-color, #EEE));
}
.sffm-el-menu-item:hover .sffm-el-menu-item-label{
color: var(--sffm-el-menu-subtitle-hover-color, var(--sffm-el-menu-subtitle-color, #BBB));
} .sffm-el-menu--style1 .sffm-el-menu-item {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 20px;
justify-content: flex-start;
text-align: left;
}
.sffm-el-menu--style1.sffm-el-menu-align-center .sffm-el-menu-item{
justify-content: center
}
.sffm-el-menu--style1.sffm-el-menu-align-right .sffm-el-menu-item{
justify-content: flex-end
}
.sffm-el-menu--style1 .sffm-el-menu-item-name {
font-weight: bold;
padding: 0 0.35em 0 0;
transition: color 0.5s;
transition-timing-function: cubic-bezier(0.2,1,0.3,1);
}
.sffm-el-menu--style1 .sffm-el-menu-item-name::before {
content: '';
position: absolute;
z-index: -1;
bottom: 0;
left: 0;
width: 100%;
height: calc(100% - var(--sffm-el-menu-title-font-size)/2);
opacity: 0.3;
transform: scale3d(0,1,1);
transform-origin: 0% 50%;
transition: transform 0.5s;
transition-timing-function: cubic-bezier(0.2,1,0.3,1);
background: var(--sffm-el-menu-title-hover-color, var(--sffm-el-menu-title-color, #EEE));
}
.sffm-el-menu--style1 .sffm-el-menu-item-label {
font-size: 1em;
letter-spacing: 2px;
transform: translate3d(0,0,0);
transition: transform 0.5s, color 0.5s;
transition-timing-function: cubic-bezier(0.2,1,0.3,1);
}
.sffm-el-menu--style1 .sffm-el-menu-item-label::before {
content: '';
position: absolute;
z-index: -1;
top: calc(100% + 0.1em);
left: 0.05em;
width: 40px;
height: 1px;
opacity: 0.3;
transform: scale3d(0,1,1);
transform-origin: 100% 50%;
transition: transform 0.5s;
transition-timing-function: cubic-bezier(0.2,1,0.3,1);
background: var(--sffm-el-menu-subtitle-hover-color, var(--sffm-el-menu-subtitle-color, #BBB));
}
.sffm-el-menu--style1 .sffm-el-menu-item:hover .sffm-el-menu-item-name::before,
.sffm-el-menu--style1 .sffm-el-menu-item:focus .sffm-el-menu-item-name::before,
.sffm-el-menu--style1 .sffm-el-menu-item:hover .sffm-el-menu-item-label::before,
.sffm-el-menu--style1 .sffm-el-menu-item:focus .sffm-el-menu-item-label::before {
transform: scale3d(1,1,1);
}
.sffm-el-menu--style1 .sffm-el-menu-item:hover .sffm-el-menu-item-label,
.sffm-el-menu--style1 .sffm-el-menu-item:focus .sffm-el-menu-item-label {
transform: translate3d(0.5em,0,0);
}
.sffm-el-menu--style1 .sffm-el-menu-item:hover .sffm-el-menu-item-label::before,
.sffm-el-menu--style1 .sffm-el-menu-item:focus .sffm-el-menu-item-label::before {
transform-origin: 0% 50%;
transition-timing-function: ease;
} .sffm-el-menu--style2 .sffm-el-menu-item {
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
gap: 10px;
}
.sffm-el-menu--style2.sffm-el-menu-align-center .sffm-el-menu-item{
align-items: center;
text-align: center;
}
.sffm-el-menu--style2.sffm-el-menu-align-right .sffm-el-menu-item{
align-items: flex-end;
text-align: right;
}
.sffm-el-menu--style2 .sffm-el-menu-item-name::before {
content: '';
position: absolute;
top: calc(50% - 2px);
left: 0;
width: 100%;
height: 4px;
pointer-events: none;
background: var(--sffm-el-menu-title-hover-color, var(--sffm-el-menu-title-color, #EEE));
transform: scale3d(0,1,1);
transform-origin: 100% 50%;
transition: transform 0.5s;
transition-timing-function: cubic-bezier(0.8,0,0.2,1);
}
.sffm-el-menu--style2 .sffm-el-menu-item:hover .sffm-el-menu-item-name::before,
.sffm-el-menu--style2 .sffm-el-menu-item:focus .sffm-el-menu-item-name::before {
transform: scale3d(1,1,1);
transform-origin: 0% 50%;
}
.sffm-el-menu--style2 .sffm-el-menu-item-label {
letter-spacing: 0.2em;
text-transform: uppercase;
}
.sffm-el-menu--style2 .sffm-el-menu-item-label span {
display: inline-block;
white-space: pre;
} .sffm-el-menu--style3.sffm-el-menu {
counter-reset: itemCounter;
padding-left: 30px;
}
.sffm-el-menu--style3.sffm-el-menu .sffm-el-menu-item{
display: flex;
flex-direction: column;
gap: 10px;
text-align: left;
}
.sffm-el-menu--style3 .sffm-el-menu-item::before {
content: counter(itemCounter,decimal-leading-zero);
position: absolute;
right: 100%;
top: 0;
margin-right: 10px;
counter-increment: itemCounter;
color: var(--sffm-el-menu-title-color, #EEE);
transform: translateY(-50%);
}
.sffm-el-menu--style3 .sffm-el-menu-item-name {
display: block;
padding: 0.5em 0 0 0;
font-size: 1.3em;
}
.sffm-el-menu--style3 .sffm-el-menu-item-name span{
white-space: pre;
display: inline-block;
}
.sffm-el-menu--style3 .sffm-el-menu-item-name::before,
.sffm-el-menu--style3 .sffm-el-menu-item-name::after {
content: '';
position: absolute;
bottom: 100%;
left: 0;
width: 40px;
height: 4px;
margin-bottom: -2px;
background: var(--sffm-el-menu-title-color, #EEE);
}
.sffm-el-menu--style3 .sffm-el-menu-item-name::after {
transform: scale3d(0,1,1);
transform-origin: 0% 50%;
transition: transform 0.5s;
background: var(--sffm-el-menu-title-hover-color, var(--sffm-el-menu-title-color, #EEE));
}
.sffm-el-menu--style3 .sffm-el-menu-item:hover .sffm-el-menu-item-name::after,
.sffm-el-menu--style3 .sffm-el-menu-item:focus .sffm-el-menu-item-name::after {
transform: scale3d(1,1,1);
}
.sffm-el-menu--style3 .sffm-el-menu-item-name span {
display: inline-block;
} .sffm-el-menu--style4 .sffm-el-menu-item{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
text-align: left;
}
.sffm-el-menu--style4.sffm-el-menu-align-center .sffm-el-menu-item{
align-items: center;
text-align: center;
}
.sffm-el-menu--style4.sffm-el-menu-align-right .sffm-el-menu-item{
align-items: flex-end;
text-align: right;
}
.sffm-el-menu--style4 .sffm-el-menu-item-name {
font-size: 1.3em;
padding: 0.25em;
}
.sffm-el-menu--style4 .sffm-el-menu-item-name::before {
content: '';
position: absolute;
z-index: -1;
opacity: 0.5;
bottom: 0;
left: 0;
width: 100%;
height: calc(var(--sffm-el-menu-title-font-size)/2);
transform: scale3d(1,0,1);
transform-origin: 50% 100%;
transition: transform 0.3s;
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
background: var(--sffm-el-menu-title-hover-color, var(--sffm-el-menu-title-color, #EEE));
}
.sffm-el-menu--style4 .sffm-el-menu-item:hover .sffm-el-menu-item-name::before,
.sffm-el-menu--style4 .sffm-el-menu-item:focus .sffm-el-menu-item-name::before {
transform: scale3d(1,1,1);
transform-origin: 50% 0%;
}
.sffm-el-menu--style4 .sffm-el-menu-item-label {
margin: 0 0 0 0.5em;
}
.sffm-el-menu--style4 .sffm-el-menu-item-label span{
display: inline-block;
white-space: pre;
} .sffm-el-menu--style5 .sffm-el-menu-item{
display: flex;
flex-direction: column;
gap: 10px;
text-align: left;
}
.sffm-el-menu--style5.sffm-el-menu-align-center .sffm-el-menu-item{
align-items: center;
text-align: center;
}
.sffm-el-menu--style5.sffm-el-menu-align-right .sffm-el-menu-item{
align-items: flex-end;
text-align: right;
}
.sffm-el-menu--style5 .sffm-el-menu-item-name {
font-size: 1.3em;
transition: transform 0.3s;
}
.sffm-el-menu--style5 .sffm-el-menu-item:hover .sffm-el-menu-item-name,
.sffm-el-menu--style5 .sffm-el-menu-item:focus .sffm-el-menu-item-name {
transform: translate3d(0.4em,0,0);
}
.sffm-el-menu--style5 .sffm-el-menu-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 10px;
height: 10px;
background: var(--sffm-el-menu-title-hover-color, var(--sffm-el-menu-title-color, #EEE));
transform: scale3d(0,0,1);
transition: transform 0.3s;
}
.sffm-el-menu--style5 .sffm-el-menu-item:hover::before,
.sffm-el-menu--style5 .sffm-el-menu-item:focus::before {
transform: scale3d(1,1,1);
}
.sffm-el-menu--style5 .sffm-el-menu-item-label{
display: block;
}
.sffm-el-menu--style5 .sffm-el-menu-item-label span{
display: inline-block;
white-space: pre;
} .sffm-el-menu--style6 .sffm-el-menu-item {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.sffm-el-menu--style6.sffm-el-menu-align-center .sffm-el-menu-item{
align-items: center;
text-align: center;
}
.sffm-el-menu--style6.sffm-el-menu-align-right .sffm-el-menu-item{
align-items: flex-end;
text-align: right;
}
.sffm-el-menu--style6 .sffm-el-menu-item-name {
font-size: 1.2em;
overflow: hidden;
padding: 0 0.25em;
text-transform: uppercase;
}
.sffm-el-menu--style6 .sffm-el-menu-item-name::before,
.sffm-el-menu--style6 .sffm-el-menu-item-name::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--sffm-el-menu-title-hover-color, var(--sffm-el-menu-title-color, #EEE));
transform: translate3d(-100%,0,0) translate3d(-1px,0,0);
transition: transform 0.7s;
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.sffm-el-menu--style6 .sffm-el-menu-item:hover .sffm-el-menu-item-name::before {
transform: translate3d(100%,0,0) translate3d(1px,0,0);
}
.sffm-el-menu--style6 .sffm-el-menu-item:hover .sffm-el-menu-item-name::after {
transform: translate3d(0,0,0);
}
.sffm-el-menu--style6 .sffm-el-menu-item-name::after {
top: calc(50% - 2px);
height: 4px;
}
.sffm-el-menu--style6 .sffm-el-menu-item-label {
padding: 0.5em;
transition: color 0.7s;
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
} .sffm-el-menu--style7 .sffm-el-menu-item {
padding-left: 1.5em;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 15px;
}
.sffm-el-menu--style7.sffm-el-menu-align-center .sffm-el-menu-item{
justify-content: center;
text-align: center;
}
.sffm-el-menu--style7.sffm-el-menu-align-right .sffm-el-menu-item{
justify-content: flex-end;
text-align: right;
}
.sffm-el-menu--style7 .sffm-el-menu-item-name {
font-size: 1.1em;
text-transform: uppercase;
}
.sffm-el-menu--style7 .sffm-el-menu-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 1em;
height: 1em;
transform: translateY(-50%);
opacity: 0;
background: var(--sffm-el-menu-title-hover-color, var(--sffm-el-menu-title-color, #EEE));
}
.sffm-el-menu--style7 .sffm-el-menu-item:hover::before,
.sffm-el-menu--style7 .sffm-el-menu-item:focus::before {
animation: blinkblink 0.4s cubic-bezier(0.5,0,1,1) infinite alternate;
}
@keyframes blinkblink {
from {
opacity: 0;
}
to {
opacity: 1;
}
} .sffm-el-menu--style8 .sffm-el-menu-item {
display: grid;
justify-content: center;
grid-template-columns: auto;
}
.sffm-el-menu--style8 .sffm-el-menu-item-name {
font-size: 1.8em;
display: flex;
flex-wrap: wrap;
justify-content: center;
white-space: pre;
pointer-events: none;
grid-area: 1 / 1 / 2 / 2;
}
.sffm-el-menu--style8 .sffm-el-menu-item-name span {
display: inline-block;
}
.sffm-el-menu--style8 .sffm-el-menu-item-label {
font-size: 1.25em;
line-height: 1.4;
overflow: hidden;
margin: 0;
text-align: center;
color: transparent;
transition: color 0s 0.3s;
grid-area: 1 / 1 / 2 / 2;
}
.sffm-el-menu--style8 .sffm-el-menu-item-label::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: translate3d(-100%,0,0) translate3d(-1px,0,0);
transition: transform 0.6s;
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
background: var(--sffm-el-menu-title-hover-color, var(--sffm-el-menu-title-color, #EEE));
}
.sffm-el-menu--style8 .sffm-el-menu-item:hover .sffm-el-menu-item-label::before,
.sffm-el-menu--style8 .sffm-el-menu-item:focus .sffm-el-menu-item-label::before {
transform: translate3d(100%,0,0) translate3d(1px,0,0);
} .sffm-mlm-menu .sffm-mlm-wrap {
position: relative;
overflow: hidden;
width: 100%;
transition: height 0.9s ease;
}
.sffm-mlm-menu .sffm-mlm-level {
position: absolute;
top: 0;
left: 0;
visibility: hidden;
overflow: hidden;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
}
.sffm-mlm-menu .sffm-mlm-level--current {
visibility: visible;
}
.sffm-mlm-menu .sffm-mlm-item {
display: block;
width: 100%;
}
.sffm-mlm-menu .sffm-mlm-link {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 10px 0;
color: #EEE;
transition: color 0.3s ease;
}
.sffm-mlm-menu .sffm-mlm-link .sffm-mlm-label{
display: flex;
align-items: center;
gap: 10px;
}
.sffm-mlm-menu .sffm-mlm-link .sffm-mlm-label svg{
width: 1em;
height: auto;
}
.sffm-mlm-menu .sffm-mlm-link .sffm-mlm-label .sffm-mlm-icon{
display: inline-flex;
align-items: center;
}
.sffm-mlm-menu [class^='animate-'],
.sffm-mlm-menu [class*=' animate-'] {
visibility: visible;
}
.sffm-mlm-menu .animate-outToRight .sffm-mlm-item {
-webkit-animation: outToRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1);
animation: outToRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1);
}
@-webkit-keyframes outToRight {
to {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}
@keyframes outToRight {
to {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}
.sffm-mlm-menu .animate-outToLeft .sffm-mlm-item {
-webkit-animation: outToLeft 0.6s both cubic-bezier(0.7, 0, 0.3, 1);
animation: outToLeft 0.6s both cubic-bezier(0.7, 0, 0.3, 1);
}
@-webkit-keyframes outToLeft {
to {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
@keyframes outToLeft {
to {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
.sffm-mlm-menu .animate-inFromLeft .sffm-mlm-item {
-webkit-animation: inFromLeft 0.6s both cubic-bezier(0.7, 0, 0.3, 1);
animation: inFromLeft 0.6s both cubic-bezier(0.7, 0, 0.3, 1);
}
@-webkit-keyframes inFromLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes inFromLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.sffm-mlm-menu .animate-inFromRight .sffm-mlm-item {
-webkit-animation: inFromRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1);
animation: inFromRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1);
}
@-webkit-keyframes inFromRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes inFromRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.sffm-mlm-menu .sffm-mlm-header{
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 10px 0;
font-size: 0.9em;
}
.sffm-mlm-menu .sffm-mlm-breadcrumbs {
font-size: inherit;
position: relative;
}
.sffm-mlm-menu .sffm-mlm-breadcrumbs a {
display: inline-block;
cursor: pointer;
vertical-align: middle;
color: #EEE;
}
.sffm-mlm-menu .sffm-mlm-breadcrumbs a .sffm-mlm-icon{
display: none;
}
.sffm-mlm-menu .sffm-mlm-breadcrumbs a:last-child {
pointer-events: none;
}
.sffm-mlm-menu .sffm-mlm-breadcrumbs a:hover {
color: #DDD;
}
.sffm-mlm-menu .sffm-mlm-breadcrumbs a:not(:last-child)::after {
content: '\F19B0';
font-family: 'Material Design Icons';
display: inline-block;
padding: 0 0.5em;
color: inherit;
}
.sffm-mlm-menu .sffm-mlm-breadcrumbs a:not(:last-child):hover::after {
color: inherit;
}
.sffm-mlm-menu .sffm-mlm-back {
font-size: 1em;
z-index: 100;
cursor: pointer;
color: #2a2b30;
border: none;
background: none;
}
.sffm-mlm-menu .sffm-mlm-back--hidden {
pointer-events: none;
opacity: 0;
} .sffm-template-html{
background-color: #ffffff;
background-size: 10px 10px;
background-image: repeating-linear-gradient(45deg, #e8e8e8 0, #e8e8e8 1px, #ffffff 0, #ffffff 50%);
}
.sffm-template-html #elementor-add-new-section{
margin:0
} .sffm-menu-close-button{
display: flex;
}
.sffm-menu-close-button .sffm-menu-close{
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.sffm-menu-close-icon svg{
width: 1em;
height: auto;
}