/**
 * 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 .f12-floating-menu--inner {
    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 .f12-floating-menu--inner {
    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;
    }
}