/**
 * The frontend styles responsible to display the floating menu.
 */
.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;
  /*width: 100%;
  height: 100%;*/
  display: inline-block;
}

.f12-floating-menu a {
  width: 100%;
  height: 100%;
  text-decoration: none;
}

.f12-floating-menu .icon i {
  text-align: center;
}

/**
 * Ensure the Menus are inline if the position is on the upper (top) or lower (bottom) screen.
 */
.f12-floating-menu ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
  /*   width: 100%;
     height: 100%;*/
}

.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;
}

/**
 * Left and right settings
 */
.f12-floating-menu.left ul,
.f12-floating-menu.right ul {
  flex-flow: column nowrap;
}

/**
 * Left floating menu
 */
.f12-floating-menu.left ul li a {
  display: flex;
  flex-flow: row-reverse nowrap;
}

/**
 * Right floating menu
 */
.f12-floating-menu.right ul li a {
  display: flex;
  flex-flow: row nowrap;
}

/**
 * Top and bottom settings
 */
.f12-floating-menu.top ul,
.f12-floating-menu.bottom ul {
  flex-flow: row nowrap;
}

/**
 * Top floating menu
 */
.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);
}

/**
 * Bottom floating menu
 */
.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);
}

/**
 * Change status on mouse hover
 */
/**
 * Style the floating menus
 * These items are going to be edited by the wordpress backend
 */
.f12-floating-menu ul li {
  background-color: #000;
}

.f12-floating-menu a {
  color: #fff;
}

.f12-floating-menu .name,
.f12-floating-menu .icon {
  padding: 5px;
}

/**
 * Responsive options
 */
@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;
  }
}
/**
 * Corner
 */
.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%;
}

/**
 * Lower Left Corner
 */
.f12-floating-menu.lowerleft {
  left: 0;
  bottom: 0;
}

/**
 * Top Left Corner
 */
.f12-floating-menu.upperleft {
  left: 0;
  top: 0;
}

/**
 * Top Right Corner
 */
.f12-floating-menu.upperright {
  right: 0;
  top: 0;
}

/**
 * Bottom Right Corner
 */
.f12-floating-menu.bottomright {
  right: 0;
  bottom: 0;
}

/**
 Dynamic Values
 */
.f12-floating-menu.bottomright ul {
  left: calc(100% - 58px);
  /* Set via PHP */
}

.f12-floating-menu.bottomright ul li {
  margin-top: -58px;
  /* Calc via PHP */
  margin-left: 0px;
  /* Calc via PHP */
  width: 58px;
  /* Set via PHP */
  height: 58px;
  /* Set via PHP */
}

.f12-floating-menu.bottomright ul li .icon {
  width: 58px;
  /* Set via PHP */
  height: 58px;
  /* Set via PHP */
}

/**
 * Change Display on Mobile
 */
@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;
  }
}

/*# sourceMappingURL=f12_floating_menu.css.map */