.f12-floating-menu {
position: fixed;
width: auto;
z-index: 1000000;
}
.f12-floating-menu .name {
align-self: center;
}
.f12-floating-menu .f12-floating-menu--inner {
visibility: hidden; display: inline-block;
}
.f12-floating-menu a {
width: 100%;
height: 100%;
text-decoration: none;
}
.f12-floating-menu .icon i {
text-align: center;
} .f12-floating-menu ul {
display: flex;
padding: 0;
margin: 0;
list-style: none; }
.f12-floating-menu ul li {
padding: 0;
margin: 0;
left: 0;
top: 0;
right: 0;
bottom: 0;
list-style: none;
position: relative;
transition: all linear 200ms;
} .f12-floating-menu.left ul,
.f12-floating-menu.right ul {
flex-flow: column nowrap;
} .f12-floating-menu.left ul li a {
display: flex;
flex-flow: row-reverse nowrap;
} .f12-floating-menu.right ul li a {
display: flex;
flex-flow: row nowrap;
} .f12-floating-menu.top ul,
.f12-floating-menu.bottom ul {
flex-flow: row nowrap;
} .f12-floating-menu.top ul li a {
display: flex;
flex-flow: row-reverse nowrap;
}
.f12-floating-menu.top ul {
flex-flow: column nowrap;
}
.f12-floating-menu.top {
transform: rotateZ(90deg);
}
.f12-floating-menu.top .icon {
transform: rotateZ(-90deg);
} .f12-floating-menu.bottom ul li a {
display: flex;
flex-flow: row nowrap;
}
.f12-floating-menu.bottom ul {
flex-flow: column nowrap;
}
.f12-floating-menu.bottom {
transform: rotate(90deg);
}
.f12-floating-menu.bottom .icon {
transform: rotateZ(-90deg);
}  .f12-floating-menu ul li {
background-color: #000;
}
.f12-floating-menu a {
color: #fff;
}
.f12-floating-menu .name,
.f12-floating-menu .icon {
padding: 5px;
} @media (min-width: 1280px) {
.f12-floating-menu.hide-desktop {
display: none;
}
}
@media (max-width: 1279px) and (min-width: 800px) {
.f12-floating-menu.hide-tablet {
display: none;
}
}
@media (max-width: 799px) {
.f12-floating-menu.hide-mobile {
display: none;
}
} .f12-floating-menu.bottomright ul,
.f12-floating-menu.lowerleft ul,
.f12-floating-menu.upperleft ul,
.f12-floating-menu.upperright ul {
position: absolute;
padding: 0;
margin: 0;
top: 100%;
}
.f12-floating-menu.bottomright ul li,
.f12-floating-menu.lowerleft ul li,
.f12-floating-menu.upperleft ul li,
.f12-floating-menu.upperright ul li {
position: absolute;
box-shadow: inset 0px 0px 0px 1px #111;
}
.f12-floating-menu.lowerleft ul li .icon,
.f12-floating-menu.upperleft ul li .icon,
.f12-floating-menu.upperright ul li .icon,
.f12-floating-menu.bottomright ul li .icon {
box-sizing: border-box;
display: flex;
}
.f12-floating-menu.lowerleft ul li .i,
.f12-floating-menu.upperleft ul li .i,
.f12-floating-menu.upperright ul li .i,
.f12-floating-menu.bottomright ul li .i {
max-width: 100%;
max-height: 100%;
} .f12-floating-menu.lowerleft {
left: 0;
bottom: 0;
} .f12-floating-menu.upperleft {
left: 0;
top: 0;
} .f12-floating-menu.upperright {
right: 0;
top: 0;
} .f12-floating-menu.bottomright {
right: 0;
bottom: 0;
} .f12-floating-menu.bottomright ul {
left: calc(100% - 58px); }
.f12-floating-menu.bottomright ul li {
margin-top: -58px; margin-left: 0px; width: 58px; height: 58px; }
.f12-floating-menu.bottomright ul li .icon {
width: 58px; height: 58px; } @media all and (max-width: 799px) {
.f12-floating-menu.display-mobile {
max-width: 100%;
width: 100%;
top: auto !important;
transform: rotateZ(0deg) !important;
bottom: 0 !important;
left: 0 !important;
opacity: 1 !important;
transition: none !important;
}
.f12-floating-menu.display-mobile .f12-floating-menu--inner {
visibility: visible !important;
max-width: 100%;
width: 100%;
}
.f12-floating-menu.display-mobile .f12-floating-menu--inner ul {
display: flex;
flex-flow: row nowrap;
width: 100%;
max-width: 100%;
}
.f12-floating-menu.display-mobile .f12-floating-menu--inner ul li {
transition: none !important;
flex: 1 1 auto;
position: relative;
margin-left: 0 !important;
margin-top: -32px !important;
width: auto;
height: 33px;
display: flex;
}
.f12-floating-menu.display-mobile .f12-floating-menu--inner ul li .name {
display: none;
}
.f12-floating-menu.display-mobile .f12-floating-menu--inner ul li .icon {
display: flex;
transform: rotateZ(0deg) !important;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
}
.f12-floating-menu.display-mobile .f12-floating-menu--inner ul li .icon i {
width: auto !important;
height: auto !important;
font-size: 14px !important;
}
}