/**
 * 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
 */
.f12-floating-menu.top ul li: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 ul li:hover {
}

.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--inner {
      visibility:visible!important;
      max-width: 100%;
      width: 100%;

      ul {
        display: flex;
        flex-flow: row nowrap;
        width: 100%;
        max-width: 100%;

        li {
          transition:none!important;
          flex: 1 1 auto;
          position: relative;
          margin-left: 0 !important;
          margin-top: -32px !important;
          width: auto;
          height: 33px;
          display: flex;

          .name{
            display:none;
          }

          .icon {
            display:flex;
            transform:rotateZ(0deg)!important;
            width: 100%;
            height: 100%;
            justify-content: center;
            align-items: center;

            i {
              width: auto !important;
              height: auto !important;
              font-size: 14px !important;
            }
          }
        }
      }
    }
  }
}