﻿.menuBG { position: fixed; background: rgba(35, 31, 32, 0.2); top: 0; right: 0; bottom: 0; left: 0; display: none; height: 100%; width: 100%; }

#SiteHeader nav.navbar { position: relative; height: 100%; margin-bottom: 0; border: none; background: none; }
#siteheader-navigation-container .navbar-header { float: none; position: static; width: 100%; max-width: 1170px; margin: 0 auto; direction: ltr; }
#siteheader-navigation-container .navbar-brand { padding: 0px; float: none; vertical-align: middle; display: inline-block; height: auto; color: inherit; width: 25%; }
#siteheader-navigation-container .navbar-top { background-color: #231f20; color: #fff; text-align: center; font-size: 65%; padding: 8px 0 7px; /*font-family: 'opensans';*/ }
#siteheader-navigation-container #logo-icon { max-width: 100%; max-height: 100%; width: 185px; }
#buttons-container { position: relative; background: #fff; margin-top: -1px; box-shadow: 0px 4px 7px 0 rgba(35, 31, 32, 0.06); -webkit-box-shadow: 0px 4px 7px 0 rgba(35, 31, 32, 0.06); }
#buttons-container.active { border-top: 1px solid #eee; }
#buttons-container .nav-buttons { position: relative; margin: 0px; padding: 0px; display: none; }
#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; }

#navbar-cart { display: inline-block; vertical-align: middle; }
#navbar-cart > a { color: inherit; font-family: 'opensans'; display: inline-block; vertical-align: middle; }
.navbar-cart-counter { position: relative; background-image: linear-gradient(to left, #f1d7a0, #e2b86e); width: 60px; height: 50px; }
.navbar-cart-counter svg { width: 19px; margin-right: 40px; position: relative; height: 100%; top: 0; left: 10px; }
.navbar-cart-counter:after { position: absolute; right: 0; content: attr(data-counter); font-size: 80%; width: 25px; word-break: break-all; top: 14px; text-align: left; }

#toggleSerachButton { display: inline-block; height: 18px; vertical-align: middle; padding-right: 10px; }
#toggleSerachButton svg { width: 18px; height: 18px; position: relative; top: -4px; }

#enLang { border-radius: 50%; position: relative; background: #fff; font-family: 'futura-pt'; font-size: 75%; font-weight: 600; margin-right: 7px; width: 26px; height: 26px; display: inline-block; vertical-align: middle; }
#enLang span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#enLang:after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; margin: -2px; border-radius: inherit; background: linear-gradient(to left, #f1d7a0, #e2b86e); }

.switchCurrency { display: inline-block; vertical-align: middle; position: relative; border-left: 2px solid #757373; padding-left: 12px; padding-right: 5px; }
.switchCurrency select { padding: 0; padding-right: 16px; border: 0; -webkit-appearance: none; width: 100%; font-size: 90%; background: transparent; margin-bottom: 0; height: auto; margin: 0; line-height: 1.1; display: block; }
.switchCurrency select:focus { outline: none; }
.switchCurrency .selectArrow { display: none; pointer-events: none; top: 50%; position: absolute; transform: translateY(-50%); -webkit-transform: translateY(-50%); height: 9px; width: 11px; }
.switchCurrency .selectArrow svg { width: 11px; height: 9px; fill: #252525; position: absolute; }

#switchCurrencySelector-button { padding: 0; outline: 0; padding-right: 0px; border: 0; -webkit-appearance: none; width: 100%; font-size: 90%; background: transparent; margin-bottom: 0; height: auto; margin: 0; line-height: 1.1; display: block; }
#switchCurrencySelector-button.ui-button .ui-icon { background-image: url(../../../000Frames/site/images/SelectArrow.svg); background-size: 63%; background-position: center center; float: none; display: inline-block; vertical-align: middle; width: 16px; height: 14px; transition: all 350ms ease-in-out; -webkit-transition: all 350ms ease-in-out; }
#switchCurrencySelector-button.ui-button .ui-selectmenu-text { display: inline; margin-right: 1px; width: 24px; height: 26px; overflow: hidden; text-overflow: ellipsis; font-family: OpenSans; }
.ui-selectmenu-open #switchCurrencySelector-menu.ui-widget.ui-widget-content { height: 82px; background: #fff !important; position: relative; left: -5px; top: 8px; overflow-y: hidden; }
.svgStroke { fill: none; stroke: #221F1F; stroke-miterlimit: 10; }

#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-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); }

.navbar-default .navbar-toggle span.open-nav { font-size: 113%; }
#navbar-top { display: inline-block }
#navbar-header { text-align: center }

#navbar-top { padding: 0px; display: inline-block; width: 50%; margin: 0 -6px; text-align: center; }
#navbar-top .navbar-nav { display: inline-block; margin: 0px; float: none; font-size: 90%; direction: rtl; }
#navbar-top .navbar-nav > li { float: none; display: inline-block; position: static; margin: 0 15px; }
#navbar-top .navbar-nav > li > a:before { content: ""; position: absolute; left: 0; bottom: 34px; opacity: 0; visibility: hidden; width: 100%; height: 2px; background-image: linear-gradient(to left, #f1d7a0, #e2b86e); transition: all 0.3s ease; }
#navbar-top .navbar-nav > li:hover > a:before { opacity: 1; visibility: visible; bottom: 20px; }
#navbar-top .navbar-nav > li > a { border: 0px; padding: 0px; text-transform: uppercase; color: #231f20; letter-spacing: 0.3px; padding: 30px 0; font-weight: 500; background-color: transparent; }
#navbar-top .navbar-nav > li a:hover { text-decoration: none; }
#navbar-top .navbar-nav > li a:focus { text-decoration: none; }

#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; -webkit-box-shadow: none; box-shadow: none; }
#navbar-top .navbar-nav > li > .dropdown-menu > li > a { color: #757373; padding: 0px; line-height: normal; opacity: 0; }
#navbar-top .navbar-nav > li > .dropdown-menu > li > a:hover { color: #231f20; background: transparent; }
#navbar-top .navbar-nav > li.open > .dropdown-menu > li > a { opacity: 1; transition: all 0.3s ease; transition-delay: 0.3s; }

#navbar-top .navbar-nav > li > .dropdown-menu { width: 100%; max-height: 0; border: none; padding: 0; text-align: center; border-top: 1px solid transparent; transition: all 0.3s ease; transition-delay: 0.3s; }
#navbar-top .navbar-nav > li.open > .dropdown-menu { /*padding: 25px 0;*/ padding: 10px 0; max-height: 80px; border-color: #eee; transition-delay: 0s; -webkit-box-shadow: 0px 4px 7px 0 rgba(35, 31, 32, 0.06); box-shadow: 0px 4px 7px 0 rgba(35, 31, 32, 0.06); }
#navbar-top .navbar-nav > li > .dropdown-menu > li { display: inline-block; margin: 0 15px; }
#navbar-right { display: inline-block; width: 25%; direction: rtl; vertical-align: middle; }
/*#navbar-right a.profile-btn {position:relative; top:2px; margin-left:2px; }*/

#navbar-collapse-main { float: right; display: none !important; padding: 0px; font-size: 125%; width: 100%; background-color: black; margin-bottom: 5px; margin-top: 5px; }
#navbar-collapse-main .navbar-nav { padding: 0px; margin: 0px; padding-bottom: 5px; padding-top: 5px; }
#navbar-collapse-main .navbar-nav > li > a { color: #ffffff; padding: 7px; margin-left: 15px; }
#navbar-collapse-main .navbar-nav > li > a:hover { color: #96aad1; }
#navbar-collapse-main .navbar-nav > li.dropdown.open a { background-color: transparent; }
#navbar-collapse-main .navbar-nav > li > .dropdown-menu { right: 0px; left: auto; 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-collapse-main .navbar-nav > li > .dropdown-menu > li > a { color: #333; padding: 3px 15px; line-height: normal; }
#navbar-collapse-main .navbar-nav > li > .dropdown-menu > li > a:hover { color: #999; }


#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; }

#searchMag { }
#searchClose { display: none; }

.navbar-default .mobile-button { vertical-align: middle; text-align: right; width: auto; color: #000; margin-right: -4px; z-index: 999999; position: relative; display: none; }
.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, .navbar-default .navbar-toggle:not(.collapsed) span.close-nav { display: none; }

.navbar-default .navbar-toggle { border-radius: 0%; width: auto; border: 0; vertical-align: middle; margin-right: 0; padding: 0; height: 60px; 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 .icon-bar { background-color: #231f20; width: 40px; height: 3px; transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; }
.bg .navbar-default .navbar-toggle .icon-bar { background-color: #fff; }
.navbar-toggle .icon-bar + .icon-bar { margin-top: 8px; }
.navbar-default .navbar-toggle .icon-bar.down { width: 40px; display: none; }
.navbar-default .navbar-toggle div { display: inline-block; vertical-align: middle; }
.navbar-default .navbar-toggle span.open-nav { display: inline-block; vertical-align: middle; margin-right: 5px; }
.navbar-default .navbar-toggle span.open-nav, .navbar-default .mobile-button span.close-nav { display: none; }

/***FULL SCREEN OPEN MENU CSS*/

/*#navbar-collapse-main                           { overflow:hidden !important;background-image:url('../../../000Frames/site/images/homePage/aboutBg.jpg');margin-bottom:5px;margin-top: 0;transition: all 700ms cubic-bezier(.17,.67,.83,.67);transition: all 300ms ease-out;height: 100vh !important;nt;position: fixed;top: 0;opacity: 0;z-index: -20;visibility: hidden !important;}
#navbar-collapse-main.navbar-collapse.in        { width: 100%;height: 100vh !important;position: fixed;top: 0;margin-top: 0;z-index: 7;opacity: 1;visibility: visible !important;transition: all 650ms ease-out;}*/

@media (max-width: 1200px) {
    #siteheader-navigation-container .navbar-header { padding: 0 15px; }
}

@media(max-width:1024px) {
    #siteheader-navigation-container .navbar-header { padding: 0 30px; }
    #buttons-container { float: none; height: 0; margin-top: -2px; }
    #buttons-container.active { height: auto; border-top: 1px solid #eee; }
    #search_form_header_input { width: calc(100% - 50px); }
    #search_form_header_input_continer { text-align: center; display: inline-block; margin: 0 auto; width: 100%; }
    #search_form_header_submit { left: 40px; }

    #navbar-collapse-main { position: fixed; top: auto; right: -125%; margin-top: 0; height: 100vh !important; width: 85%; visibility: visible; /*max-height: calc(100vh - 105px) !important;*/ max-height: calc(100vh - 70px) !important; background-color: #f2f3f6; display: initial !important; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; transition: all .2s ease; overflow: scroll !important; z-index: 99999; }
    #navbar-collapse-main.in { right: 0; }

    #navbar-right { width: 75%; float: right; padding: 6px 0; }
    #navbar-top { display: none; }
    #navbar-collapse-main .navbar-nav { padding: 5px 15px; opacity: 0; transition-delay: 0s; -webkit-transition: opacity .8s ease-in-out; -moz-transition: opacity .8s ease-in-out; transition: opacity .8s ease-in-out; }
    #navbar-collapse-main .navbar-bottom { opacity: 0; transition-delay: 0s; -webkit-transition: opacity .8s ease-in-out; -moz-transition: opacity .8s ease-in-out; transition: opacity .8s ease-in-out; }
    #navbar-collapse-main.in .navbar-nav, #navbar-collapse-main.in .navbar-bottom { opacity: 1; transition-delay: .3s; }
    #siteheader-navigation-container .navbar-brand { padding: 27px 0; }
    #navbar-collapse-main .navbar-nav > li > a { color: #757373; font-size: 215%; font-weight: 500; display: inline; text-transform: uppercase; letter-spacing: 0.5px; margin: 0; text-align: center; line-height: 1; }
    .navbar-nav > li { display: block; width: 100%; margin-bottom: 60px; }
    #navbar-collapse-main .navbar-nav > li.dropdown.open { margin-bottom: 15px; }
    .navbar-nav > li:last-of-type { margin-bottom: 0; }
    .navbar-default .mobile-button { display: inline-block; margin-right: 0; margin-left: 15px; }
    #navbar-collapse-main .navbar-nav > li.dropdown > button { position: absolute; left: 0; display: inline; height: 38px; line-height: 38px; color: #757373; padding: 0; background-color: transparent; border: none; font-size: 300%; z-index: 99999; }
    .dropdown-menu { position: relative; }
    #navbar-collapse-main .navbar-nav > li > .dropdown-menu { width: 100%; background: transparent; border: none; padding: 0; box-shadow: none; text-align: center; transition: all .3s ease; transition-delay: .3s; }
    #navbar-collapse-main .navbar-nav > li.dropdown.open > .dropdown-menu { max-height: 820px; padding: 7px 0; transition: all .3s ease; transition-delay: 0s; }
    #navbar-collapse-main .navbar-nav > li > .dropdown-menu > li > a { color: #757373; padding: 3px 15px; line-height: normal; font-size: 175%; font-weight: 400; text-align: right; }
    #navbar-collapse-main .navbar-nav > li > .dropdown-menu > li { opacity: 0; transition: opacity .3s ease; }
    #navbar-collapse-main .navbar-nav > li.dropdown.open > .dropdown-menu > li { opacity: 1; transition: opacity .3s ease; transition-delay: .3s; }
    #navbar-collapse-main .navbar-nav { width: 100%; }
    #navbar-collapse-main .navbar-bottom { width: 100%; padding: 15px; padding-top: 22vh; float: left; }

    #navbar-collapse-main .navbar-bottom-links { margin: 0; padding: 0; list-style: none; }
    #navbar-collapse-main .navbar-bottom-links > li { display: inline-block; padding: 10px; }
    #navbar-collapse-main .navbar-bottom-links > li > a { font-size: 140%; }

    #toggleSerachButton svg { width: 22px; height: 22px; position: relative; top: -2px; }
    #toggleSerachButton svg#searchClose { width: 20px; height: 20px; }
    #switchCurrencySelector-button, .ui-menu .ui-menu-item-wrapper { font-size: 120%; }
    .ui-selectmenu-open #switchCurrencySelector-menu.ui-widget.ui-widget-content { height: 65px; }
    .navbar-nav > li { margin-bottom: 0; padding: 30px 0; border-bottom: 1px solid rgba(35, 31, 32, 0.2); }
}

@media(max-width:991px) {
    /*#siteheader-navigation-container .navbar-brand  { position:static; transform:none; width:calc(100% - 205px); float:none; display:inline-block; vertical-align:middle; height:100%; }*/
    /*#buttons-container { float:none; display:inline-block; vertical-align:middle; }*/
    .mobile-button { vertical-align: middle; }
    #navbar-collapse-main { /*top: 105px;*/ /*top: 72px;*/ top: var(--headerHeight); }
}

@media(max-width:767px) {
    #search_form_header_submit { left: 25px; }
    #navbar-collapse-main .navbar-nav > li { float: none; clear: both; }
    #navbar-collapse-main .navbar-nav > li > a { padding: 5px; font-size: 120%; }
    #navbar-collapse-main .navbar-nav > li > .dropdown-menu { border-radius: 0px; background-color: transparent; }
    #navbar-collapse-main .navbar-nav > li > .dropdown-menu > li > a { padding: 5px 15px; line-height: normal; font-size: 120%; }
    #navbar-collapse-main .navbar-nav > li > .dropdown-menu > li > a:hover { color: #333; }
    #buttons-container .nav-buttons { float: left; }
    #navbar-right { width: 60%; padding: 5px 0 0 0; }
    #siteheader-navigation-container .navbar-brand { width: 40%; }
    #siteheader-navigation-container .navbar-header { padding: 0 15px; }
    #siteheader-navigation-container .navbar-brand { padding: 30px 0 0 0; }
    .navbar-default .mobile-button { margin-left: 0; }
    #toggleSerachButton { padding-right: 5px; display: none; }
    #buttons-container .nav-buttons .dropdown { max-height: 49px; width: 62px; text-align: center; background: #5D707E; position: static; }
    #toggleSerachButton svg { width: 20px; height: 20px; top: -3px; }
    #navbar-collapse-main .navbar-nav > li.dropdown > button { height: 32px; line-height: 30px; font-size: 170%; color: #757373; }
    #navbar-collapse-main { top: var(--headerHeight); }

    .navbar-default .navbar-toggle { height: 66px; }
    #navbar-top { display: none; }
    .navbar-cart-counter { width: 50px; height: 41px; }
    .navbar-cart-counter svg { width: 15px; margin-right: 35px; position: relative; left: 11px; }
    .navbar-cart-counter:after { position: absolute; right: 0; content: attr(data-counter); font-size: 80%; width: 21px; word-break: break-all; top: 10px; text-align: left; }
    .switchCurrency { padding-left: 8px; }
    .switchCurrency select { padding-right: 13px; }
    #siteheader-navigation-container .navbar-top { font-size: 55%; }
    .navbar-nav > li { padding: 15px 0; }
    #navbar-collapse-main .navbar-bottom { padding: 15px; padding-top: 24vh; }
    #navbar-collapse-main .navbar-bottom-links > li { display: inline-block; padding: 2px 10px; }
    #navbar-collapse-main .navbar-bottom-links > li > a { font-size: 90%; }
    .navbar-socials a { width: 24px; height: 24px; }
    #navbar-cart { margin-right: 0px; }
    #enLang { display: none; }
}

@media (max-width: 375px) {
    #toggleSerachButton { padding-right: 1vw; }
    .switchCurrency { padding-left: 2vw; }
    .navbar-cart-counter { width: 14vw; height: 11.5vw; }
}

/***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; }


@media(min-width:1025px) {
    .irinaMode #navbar-right { width: 14%; }
    .irinaMode #siteheader-navigation-container .navbar-brand { width: 14%; }
    .irinaMode #navbar-top { width: 72%; }
    .irinaMode #navbar-top .navbar-nav > li > a.irina-nav span { color: #e5be78; }
    .irinaMode #navbar-top .navbar-nav > li > a.irina-nav img { width: 22px; position: relative; top: -1px; }
}


@media(max-width:767px) {
    .irinaMode #navbar-collapse-main .navbar-nav > li > a { padding: 3px; font-size: 100%; }
    .irinaMode #navbar-collapse-main .navbar-nav { padding: 5px 10px; }
    .irinaMode #navbar-collapse-main .navbar-nav > li > a img { max-width: 20px; }
}


.navShopBtn { display: inline-block; vertical-align: middle; position: relative; margin-left: 5px; }
.userBtn button { background: transparent; border: 0; padding: 0; margin-top: 20px; }
.userBtn svg { transform: rotate( 0deg ); -webkit-transform: rotate( 0deg ); width: 22px; height: 22px; }
.headerShopLogged { position: absolute; bottom: -151px; width: 220px; right: -10px; z-index: 3; background: #ffffff; color: #000000; opacity: 0; pointer-events: none; transition: all 350ms ease-in-out; -webkit-transition: all 350ms ease-in-out; box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.07);pointer-events:none;}
.headerShopLogged .userLogin { padding: 0; opacity: 1;  margin: 0; background-color: #fff;pointer-events: none; }
.headerShopLogged.openBox .userLogin { pointer-events:auto;}
.headerShopLogged:after { content: ""; position: absolute; top: -10px; right: 10px; border-width: 0 10px 10px; width: 0; height: 0; border-color: transparent; border-style: solid; z-index: 999; border-bottom-color: #000000; }
.headerShopLogged.openBox { opacity: 1; pointer-events: all; }
.headerShopLogged h4 { padding: 0px 15px; margin: 0; background: #000000; color: #ffffff; text-align: right; line-height: 35px; font-size: 80%; }
.headerShopLogged a { padding: 8px 20px; text-align: right; display: block; color: inherit; font-size: 70%; position: relative; }
.headerShopLogged a:not(:last-child):after { content: ""; border-bottom: 1px solid #ececed; position: absolute; left: 10px; width: calc(100% - 20px); bottom: 0; }
.headerShopLogged .loginBoxLogout { float: left; background: transparent; border: 0; text-decoration: underline; margin: 0; margin-top: 5px; font-size: 100%; font-family: inherit; }
.headerShopLogged a.userAction:last-child:after, #header2 .header-top-left a.userAction:last-child:after { display: none; }
.headerShopLogged a.userAction:last-child, #header2 .header-top-left a.userAction:last-child { }
.loggedInUser {}

@media(max-width:767px) {
    .headerShopLogged.openBox { bottom: -146px; }
    .headerShopLogged .userLogin { max-width: 100%; }
    .navShopBtn { margin-right: 5px; }
}
