/**

 * The frontend styles responsible to display the floating menu.

 */

.f12-floating-menu {

    position: fixed;

    width: auto;

    z-index: 1000000;
    top:100px;

}



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

    }

}