/*
 * @subpackage Module mod_sticky_navigator
 * @copyright 2017 - 2018, Alejandro Loewy, w3smart-tools / regio-sites
 * @license GNU General Public License version 2 or later; see LICENSE.txt
 * @link http://w3-smart-tools.com
 * @link http://regio-sites.de
 */

.w3st-sticky-nav .sticky-navigator-container{
    position: fixed;
    background-color: rgba(0,0,0,.8); /* original opacity */
    color: #cccccc;
    -webkit-transition: left .4s, right .4s, opacity .4s;
    -moz-transition: left .4s, right .4s, opacity .4s;
    -ms-transition: left .4s, right .4s, opacity .4s;
    -o-transition: left .4s, right .4s, opacity .4s;
    transition: left .4s, right .4s, opacity .4s;
    opacity: 1;
    z-index: 100000;
    top: 50%;
    -webkit-transform: translate(0,-50%);
    -moz-transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
    -o-transform: translate(0,-50%);
    transform: translate(0,-50%);
    margin:0;
    padding:20px;
    border: 0 solid rgba(0, 0, 0, 1);
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
}

.w3st-sticky-nav ul{
    margin: 0;
    padding: 12px;
    list-style: none;
}

.w3st-sticky-nav .show-scroller {
    opacity: 1; /* only to display or hide scroller */
}

.w3st-sticky-nav .sticky-navigator-container.text-left{
    left:unset;
    right:20px;
    text-align: right;
}

.w3st-sticky-nav .sticky-navigator-container.text-right{
    left: 20px;
    right: unset;
    text-align:left;
}

.w3st-sticky-nav .sticky-nav-scroll-separator{
    border: none;
    margin: 0;
    height: 48px;
    position: relative;
}

.w3st-sticky-nav .text-left .sticky-nav-scroll-separator{
    border-right: 4px dotted rgba(255, 255, 255, 1);
    right: 0;
}

.w3st-sticky-nav .text-right .sticky-nav-scroll-separator{
    border-left: 4px dotted rgba(255, 255, 255, 1);
    left: 0;
}

.w3st-sticky-nav .link-title {
    color: #cccccc;
    display: inline-block;
    font-size: 14px;
    font-weight: 300;
    line-height: 100%;
    opacity: 1;
    overflow: hidden;
    padding: 3px;
    position: relative;
    right: 0;
    text-overflow: ellipsis;
    transition: opacity 300ms ease 0s;
    vertical-align: middle;
    white-space: nowrap;
    width: auto;
    text-shadow: none;
    text-transform: none;
    text-decoration: none;
    font-style: normal;
}

.w3st-sticky-nav a:hover .link-title,
.w3st-sticky-nav a.active .link-title{
    opacity: 1;
    color: #F99;
    text-shadow: none;
    text-transform: none;
    font-style: normal;
    display: inline-block;
    font-size: 14px;
    line-height: 100%;
    font-weight: 300;
    overflow: hidden;
    padding: 3px;
    position: relative;
    right: 0;
    text-overflow: ellipsis;
    transition: opacity 300ms ease 0s;
    vertical-align: middle;
    text-decoration: none;
    white-space: nowrap;
    width: auto;
}

.w3st-sticky-nav .text-left .link-title {
    right: 0;
}

.w3st-sticky-nav .text-right .link-title {
    left: 0;
}

.w3st-sticky-nav li a {
    line-height: 100%;
}

.w3st-sticky-nav li a .link-title.hide-title {
    display: none;
}

.w3st-sticky-nav li a .link-title.show-hover-title {
    opacity: 0;
}

.w3st-sticky-nav li a:hover .link-title.show-hover-title,
.w3st-sticky-nav li a.active .link-title.show-hover-title {
    opacity: 1;
}

.w3st-sticky-nav .symbols{
    color: #cccccc;
    display: inline-block;
    height: 100%;
    position: relative;
    right: 0;
    vertical-align: middle;
}

.w3st-sticky-nav .text-right .symbols{
    left: 0;
    margin: 0 0 0 -7px;
    text-align: right;
}

.w3st-sticky-nav .text-left .symbols{
    right: 0;
    margin: 0 -7px 0 0;
    text-align: left;
}

.w3st-sticky-nav .symbols i{
    display:inline-block;
    text-align: center;
    vertical-align: middle;
    font-style: normal;
    text-decoration: none;
    text-transform: none;
}

.w3st-sticky-nav .symbols i img{
    display: inline-block;
    font-style: normal;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    vertical-align: middle;
    margin: -1px 4px 1px 2px;
}


/* used for only the css symbols */
.w3st-sticky-nav .text-left .symbols::after {
    font-size: 18px;
    content: "\25C9";
    display: inline-block;
    vertical-align: middle;
    margin:0;
}

.w3st-sticky-nav .text-left a:hover .symbols::after,
.w3st-sticky-nav .text-left a.active .symbols::after {
    content: "\25C9";
    color: #F99;
}

.w3st-sticky-nav .text-right a.active .symbols::before,
.w3st-sticky-nav .text-right a:hover .symbols::before {
    content: "\25CE";
    color: #F99;
}

.w3st-sticky-nav i.show-hover{
    color: #F99;
}

.w3st-sticky-nav .text-right .symbols i img {
    margin: -1px 3px 1px 8px;
}

.w3st-sticky-nav .text-right .symbols::before {
    font-size: 18px;
    content: "\25C9";
    display: inline-block;
    vertical-align: middle;
    margin: 0;
}

.w3st-sticky-nav a .displaynone-title,
.w3st-sticky-nav a.active .displaynone-title,
.w3st-sticky-nav a:hover .displaynone-title {
    display:none!important;
}

.w3st-sticky-nav .symbols i.show-hover{
    display:none;
}

.w3st-sticky-nav a.active i.show-hover,
.w3st-sticky-nav a:hover i.show-hover{
    display:inline-block;
}

.w3st-sticky-nav a.active i.show-normal,
.w3st-sticky-nav a:hover i.show-normal{
    display:none!important;
}

/* end start show/hide symbols logic */


/* hide/show by click */

.w3st-sticky-nav .hide-botton{
    /*background: #ffffff url("../images/symbols/hide-menu.png") no-repeat scroll center center / 100% 100%;*/
    cursor: pointer;
    height: 28px;
    width: 28px;
    border-radius: 100%;
    margin:0;
    padding: 0;
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.w3st-sticky-nav .show-botton {
    /*background: #ffffff url("../images/symbols/show-menu.png") no-repeat scroll center center / 100% 100%;*/
    display: none;
    cursor: pointer;
    height: 28px;
    width: 28px;
    border-radius: 100%;
    margin:0;
    padding: 0;
    position: fixed;
    right: 0;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 100000;
}

/* selectors for the hide and show buttons */
/*.w3st-sticky-nav .show-botton.type-uni i,*/
/*.w3st-sticky-nav .hide-botton.type-uni i,*/
/*.w3st-sticky-nav .hide-botton.type-google i,*/
/*.w3st-sticky-nav .show-botton.type-google i,*/
/*.w3st-sticky-nav .show-botton.type-awesome i,*/
/*.w3st-sticky-nav .hide-botton.type-awesome i{*/
.w3st-sticky-nav .show-botton i,
.w3st-sticky-nav .hide-botton i{
    Display: inline-block;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    line-height: 100%;
    font-size: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    font-style: normal;
    text-decoration: none;
    text-transform: none;
    margin:auto;
    padding:0;
    text-align: center;
}


/*.w3st-sticky-nav .show-botton.type-uni i,*/
/*.w3st-sticky-nav .show-botton.type-google i,*/
/*.w3st-sticky-nav .show-botton.type-awesome i{*/
.w3st-sticky-nav .show-botton i{
    color: #CCC;
}

/*.w3st-sticky-nav .hide-botton.type-uni i,*/
/*.w3st-sticky-nav .hide-botton.type-google i,*/
/*.w3st-sticky-nav .hide-botton.type-awesome i,*/
.w3st-sticky-nav .hide-botton i{
    color: #CCC;
}


.w3st-sticky-nav .hide-botton i::before,
.w3st-sticky-nav .show-botton i::before{
    display: inline-block;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    position: absolute;
    text-align: center;
    line-height: 100%;
}

.w3st-sticky-nav.w3st-right .hide-botton {
    left: 100%;
}

.w3st-sticky-nav.w3st-right .show-by-click-btn {
    left: 20px;
}


.w3st-sticky-nav .hidemode-leftmoveleft,
.w3st-sticky-nav .hidemode-leftmoveright,
.w3st-sticky-nav .hidemode-rightmoveleft,
.w3st-sticky-nav .hidemode-rightmoveright {
    -webkit-transition: left .5s, right .5s, opacity .5s;
    -moz-transition: left .5s, right .5s, opacity .5s;
    -ms-transition: left .5s, right .5s, opacity .5s;
    -o-transition: left .5s, right .5s, opacity .5s;
    transition: left .5s, right .5s, opacity .5s;
    opacity: 0!important;
}

.w3st-sticky-nav .hidemode-leftmoveleft {
    left: -101%!important;
}

.w3st-sticky-nav .hidemode-leftmoveright {
    left: 101%!important;
}
.w3st-sticky-nav .hidemode-rightmoveleft {
    right: 101%!important;
}

.w3st-sticky-nav .hidemode-rightmoveright {
    right: -101%!important;
}

.w3st-sticky-nav .hidemode-hide {
    display: none!important;
}