﻿
#SiteHeader nav.navbar { position: relative; margin-bottom: 0; border: none; background: none; }
#SiteHeader .club { position: fixed; height: 200px; width: 200px; z-index: 1; top: 0px; left: 104px; }
#siteheader-navigation-container .navbar-header { float: none; position: relative; width: 1440px; text-align: right; z-index: 1; margin: 0 auto; }
#siteheader-navigation-container .navbar-brand { padding: 0px; height: 62px; float: none; display: inline-block; vertical-align: middle; width: calc(100% - 114px); text-align: center; }
    #siteheader-navigation-container .navbar-brand a { display: inline-block; }
#siteheader-navigation-container #logo-icon { display: block; margin-top: 10px; width: 110px; height: 40px; }

#navbar-collapse-main .navbar-nav > li.dropdown > button { float: left; position: absolute; left: 35px; width: 24px; height: 24px; background-color: transparent; border: none; margin-left: 0; outline: none; top: 9px; -webkit-box-shadow: none; box-shadow: none; }
#navbar-collapse-main .navbar-nav > li > a.preventClick + button { width: 100%; }
#navbar-collapse-main .navbar-nav > li.dropdown > button:before, #navbar-collapse-main .navbar-nav > li.dropdown > button:after { content: ''; position: absolute; background-color: #999; border-radius: 10px; }
#navbar-collapse-main .navbar-nav > li.dropdown > button:before { left: 12px; margin-left: -1px; width: 2px; height: 10px; top: 7px; -webkit-transition: -webkit-transform ease 400ms; transition: -webkit-transform ease 400ms; transition: transform ease 400ms; transition: transform ease 400ms, -webkit-transform ease 400ms; }
#navbar-collapse-main .navbar-nav > li.dropdown > button:after { top: 50%; margin-top: -1px; height: 2px; width: 10px; -webkit-transition: -webkit-transform ease 400ms; transition: -webkit-transform ease 400ms; transition: transform ease 400ms; transition: transform ease 400ms, -webkit-transform ease 400ms; left: 7px; }
#navbar-collapse-main .navbar-nav > li.dropdown > button[aria-expanded="true"]:after { -webkit-transform: rotate(45deg); transform: rotate(225deg); }
#navbar-collapse-main .navbar-nav > li.dropdown > button[aria-expanded="true"]:before { -webkit-transform: rotate(45deg); transform: rotate(225deg); }

@media(max-width:1440px) {
    #siteheader-navigation-container .navbar-header { max-width: 1170px }
}

@media(max-width:1140px) and (min-width:1025px) {
    #siteheader-navigation-container .navbar-header { max-width: 95%; }
}

#buttons-container { float: left; position: relative; }
    #buttons-container .nav-buttons { position: relative; margin: 0px; padding: 0px; }
        #buttons-container .nav-buttons .dropdown { height: 77px; width: 96px; text-align: center; background: #5D707E; position: static; }
            #buttons-container .nav-buttons .dropdown > a { padding: 0px; height: 100%; display: table; width: 100%; }
                #buttons-container .nav-buttons .dropdown > a > div { vertical-align: middle; display: table-cell; color: #fff; }
            #buttons-container .nav-buttons .dropdown a div span { display: block; margin-top: 5px; line-height: 1; }
        #buttons-container .nav-buttons #navbar-cart > a { background-color: blue; }
        #buttons-container .nav-buttons #navbar-cart.open > a { background-color: lightsteelblue; }
        #buttons-container .nav-buttons #navbar-user > a { background-color: red; }
        #buttons-container .nav-buttons #navbar-user.open > a { background-color: orange; }
        #buttons-container .nav-buttons #navbar-cart i[data-counter]:after { position: absolute; left: 60%; border-radius: 50%; content: attr(data-counter); background: #5C707B; font-size: 71%; padding: 4px 7px; color: #fff; max-width: 30px; word-break: break-all; }
        #buttons-container .nav-buttons #navbar-user .sign-in { display: block; }
        #buttons-container .nav-buttons #navbar-user .logged-in { display: none; }
            #buttons-container .nav-buttons #navbar-user.logged-in .sign-in { display: none; }
            #buttons-container .nav-buttons #navbar-user.logged-in .logged-in { display: block; }
        #buttons-container .nav-buttons .dropdown-menu { right: 0px; left: 0px; float: left; position: relative !important; top: 0; position: static; background-color: #fff; -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175); box-shadow: 0 6px 12px rgba(0,0,0,.175); }

@media (max-width: 767px) {
    #buttons-container { float: none; }
        #buttons-container .nav-buttons { float: left; }
    #search_form_header_input { width: calc(100% - 50px); }
    #siteheader-navigation-container .navbar-brand { float: right; }
    #siteheader-navigation-container .navbar-brand { height: 45px; }
    #buttons-container .nav-buttons .dropdown { max-height: 49px; width: 62px; text-align: center; background: #5D707E; position: static; }

    #navbar-collapse-main .navbar-nav > li.dropdown > a { float: right; width: 100%; }

    #navbar-collapse-main .navbar-nav > li.dropdown.open > button { /* IE 9 */ /* Chrome, Safari, Opera */ }
    #navbar-collapse-main .navbar-nav > li > a.preventClick + button { }
}

@media (min-width:768px) {
}

#navbar-top { padding: 0px; padding-top: 20px; display: inline-block; }
    #navbar-top .navbar-nav { display: inline-block; margin: 0px; }
        #navbar-top .navbar-nav > li { float: right; color: blue; }
            #navbar-top .navbar-nav > li a { color: blue; border: 0px; padding: 0px; }
                #navbar-top .navbar-nav > li a:hover { color: red; text-decoration: none; }
                #navbar-top .navbar-nav > li a:focus { color: red; text-decoration: none; }
            #navbar-top .navbar-nav > li:not(:last-child) > a:after { content: " "; display: inline-block; width: 1px; background: #5D707c; position: relative; height: 8px; margin: 0px 7px; }
            #navbar-top .navbar-nav > li.dropdown.open a { }
            #navbar-top .navbar-nav > li > .dropdown-menu { text-align: right; padding: 5px; font-size: 100%; background-color: #ffffff; text-align: right; border: 1px solid rgba(0,0,0,0.15); border-radius: 0px; box-shadow: 0 6px 12px rgba(0,0,0,.175); -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175); }
                #navbar-top .navbar-nav > li > .dropdown-menu > li > a { color: #333; padding: 0px; line-height: normal; }
                    #navbar-top .navbar-nav > li > .dropdown-menu > li > a:hover { color: #333; }
#closeMenu { width: 72px; height: 173px; position: absolute; left: 0; border: none; color: #fff; outline: none; background-color: transparent; padding: 0; }

@media(min-width:768px) {
    #navbar-top { display: inline-block }
    #navbar-header { text-align: center }
}

@media(max-width:767px) {
    #navbar-top { display: none; }
    #closeMenu { left: 5px; width: 60px; }
}

.langsMenu { float: right; margin-top: 30px;}
.ui-selectmenu-text { margin-right: 35px; }
.ui-selectmenu-button.ui-button, .ui-selectmenu-button.ui-button:focus { border: none; border-radius: 0; background: transparent; color: #fff; text-align: right; padding: 0; font-size: 75%; margin: 0; width: 100px; }
.ui-button .ui-icon, .ui-button:hover .ui-icon { position: relative; bottom: -20px; right: 35px; }
.ui-selectmenu-menu.ui-selectmenu-open { display: block; }
.langsMenu span.ui-selectmenu-icon.ui-icon.ui-icon-triangle-1-s { background-image: url(lang-arrow.svg); background-position: center; }

.ui-menu .ui-menu-item-wrapper { padding: 0; padding-right: 0; font-size: 76%; line-height: 1; }
.ui-menu .ui-menu-item { margin-right: 55px; margin-top: 5px; }
.ui-state-active,
.ui-widget-content .ui-state-active { background: transparent; border: none; color: inherit; }
ul li.ui-widget-content { background: none; text-align: right; color: #fff; }
.ui-widget.ui-widget-content { border: none; background: transparent; color: #fff; text-align: right; /* max-height: 0; */ /* overflow: hidden; */ transition: all 4000ms ease-out; -webkit-transition: all 4000ms ease-out; height: 200px; }
.ui-selectmenu-open .ui-widget.ui-widget-content { /* max-height: 300px; */ }

#navbar-collapse-main { padding: 0px; font-size: 105%; background-color: transparent; margin: 0; position: fixed; width: 372px; right: -372px; top: 0; z-index: 1; height: 100vh !important; transition: all 400ms ease-out; -webkit-transition: all 400ms ease-out; letter-spacing: 0.63px; /* background-image: linear-gradient(to top, #595959, #4c4b4b); */ }
    #navbar-collapse-main:before { position: absolute; right: 0; left: 35px; top: 0; bottom: 0; background-image: linear-gradient(to top, #595959, #4c4b4b); display: block; opacity: 1; }
    #navbar-collapse-main.in { right: 0; }
    #navbar-collapse-main .navbar-nav { float: right; padding: 0px; margin: 0px; padding-bottom: 0; padding-top: 5px; text-align: right; margin-top: 140px; margin-left: 35px; margin-bottom: 60px; color: #fff; }
        #navbar-collapse-main .navbar-nav > li { float: right; width: 100%; }
        #navbar-collapse-main .navbar-nav li a { margin-bottom: 14px; }
        #navbar-collapse-main .navbar-nav > li > a { color: inherit; padding: 11px 35px; }
            #navbar-collapse-main .navbar-nav > li > a:hover { }
        #navbar-collapse-main .navbar-nav > li.dropdown.open > a { background: #3E3D3D; }
        #navbar-collapse-main .navbar-nav > li > .dropdown-menu { padding: 5px; font-size: 100%; background-color: transparent; text-align: right; border: none; border-radius: 0px; box-shadow: none; -webkit-box-shadow: none; position: unset; width: 100%; padding: 0 0px; position:static;}
            #navbar-collapse-main .navbar-nav > li > .dropdown-menu > li > a { color: #999; padding: 8px 50px; line-height: normal; }
                #navbar-collapse-main .navbar-nav > li > .dropdown-menu > li > a:hover { color: #999; }

.socials a { display: inline-block; margin-left: 10px; }

.socials { display: block; float: right; width: 264px; border-top: 2px solid #fff; position: relative; margin-right: 35px; text-align: right; padding-top: 20px; direction: rtl; max-width: calc(100% - 105px); width: 100%; }

    .socials a svg { width: 25px; height: 25px; fill: #fff; }

/***FULL SCREEN OPEN MENU CSS*/


@media(max-width:767px) {
    #navbar-collapse-main { width: 100%; direction: rtl; overflow-y: scroll; background-image: none; overflow-x: visible !important; }
        #navbar-collapse-main:before { opacity: 1; }
        #navbar-collapse-main .navbar-nav { width: 100%; max-width: calc(100% - 35px); margin-top: 60px; }
            #navbar-collapse-main .navbar-nav > li { float: none; clear: both; }
                #navbar-collapse-main .navbar-nav > li > a { }
                #navbar-collapse-main .navbar-nav > li > .dropdown-menu { border-radius: 0px; background-color: transparent; }
                    #navbar-collapse-main .navbar-nav > li > .dropdown-menu > li > a { color: #999; /* padding: 3px 15px; */ line-height: normal; }
                        #navbar-collapse-main .navbar-nav > li > .dropdown-menu > li > a:hover { color: #333; }
    .socials { max-width: calc(100% - 105px); }
    .navbar-collapseInner { position: absolute; top: 0; left: 0; height: 100vh; width: 100%; overflow-y: scroll; padding-bottom: 30px; }
}

@media(max-width:991px) {
    .mobile-button { vertical-align: middle; }
        .mobile-button .navbar-toggle { margin-right: 5px; float: none; }
    #SiteHeader .club { display: none; }
}

#siteheader-navigation-container .navbar-search { float: left; margin-top: 12px; border: 1px solid; border-radius: 4px; font-size: 118%; opacity: 0.8; }
    #siteheader-navigation-container .navbar-search input { height: 31px; border: none; background: none; color: white; }
    #siteheader-navigation-container .navbar-search .searchicon { background-color: #F68B1F; height: 34px; padding-top: 7px; width: 36px; text-align: center; border-radius: 4px; }

.navbar-default .mobile-button { display: inline-block; vertical-align: middle; text-align: right; width: 57px; color: #000; margin-right: 0; z-index: 8; position: relative; float: right; }
.bg .navbar-default .mobile-button { color: #fff; }
.bg .navbar-default .navbar-toggle { padding: 0; height: 90px; width: 150px; }
.navbar-toggle { display: inline-block; float: none; margin-top: 0; }
.nav-open span.open-nav { display: none }
.navbar-toggle .mobile-button span.open-nav { display: none }
.navbar-toggle .collapsed .mobile-button span.open-nav { display: inline-block; vertical-align: middle; }
.navbar-default .mobile-button span.close-nav { display: none; }
.navbar-default .navbar-toggle:not(.collapsed) span.open-nav { display: none; }
.navbar-default .navbar-toggle:not(.collapsed) span.close-nav { display: inline-block; }
.navbar-default .navbar-toggle { border-radius: 0%; width: 57px; border: 0; vertical-align: middle; margin-right: 0; padding: 0; height: 57px; transition: all 500ms ease; background: transparent; margin-bottom: 0; }
    .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: transparent; }

    .navbar-default .navbar-toggle .ham { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 400ms; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; width: 57px; }
    .navbar-default .navbar-toggle .ham2 .line { fill: none; transition: stroke-dasharray 400ms, stroke-dashoffset 400ms; stroke: #000; stroke-width: 8px; }
    .navbar-default .navbar-toggle.active .ham2 .line { stroke-linecap: round; }
    .navbar-default .navbar-toggle .ham2 .top { stroke-dasharray: 40 121; }
    .navbar-default .navbar-toggle .ham2 .bottom { stroke-dasharray: 40 121; }
    .navbar-default .navbar-toggle.active .ham2 .top { stroke-dashoffset: -102px; }
    .navbar-default .navbar-toggle.active .ham2 .bottom { stroke-dashoffset: -102px; }

@media(max-width:1024px) {
    .navbar-default .mobile-button { float: left; }
    #siteheader-navigation-container .navbar-brand { float: left; width: calc(100vw - 57px); }
    #siteheader-navigation-container #logo-icon { margin-left: 57px; }
}

@media (min-width:768px) (max-width:991px) {
    .navbar-default .navbar-toggle span.open-nav { font-size: 113%; }
}

@media (max-width:767px) {
    .navbar-default .navbar-toggle { height: 66px; }
}
/***ANIMATION***/
.navbar-default .navbar-toggle:not(.collapsed) .icon-bar.up { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); margin-top: 0px; }
.navbar-default .navbar-toggle:not(.collapsed) .icon-bar + .icon-bar:not(.up):not(.down) { transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); margin-top: -3px; }
.navbar-default .navbar-toggle:not(.collapsed) .icon-bar.down { display: none; }
