﻿
#SiteHeader nav.navbar { position: relative; margin-bottom: 0; border: none; background: none; min-height: 50px; }
#siteheader-navigation-container .navbar-header { float: none; position: relative; width: 100%; text-align: center; direction: ltr; padding: 22px 30px 18px 30px; }
#siteheader-navigation-container .navbar-brand { padding: 0px; height: 50px; width: 25%; text-align: left; float: none; display: inline-block; vertical-align: middle; }
    #siteheader-navigation-container .navbar-brand a { display: inline-block; }
        #siteheader-navigation-container .navbar-brand a.search-nav { margin-left: 10px; }
#siteheader-navigation-container #logo-icon { max-width: 100%; max-height: 100%; float: left; max-height: 50px; }

#buttons-container { float: none; position: relative; display: inline-block; width: 25%; text-align: right; direction: rtl; }
.social-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); }
.social-buttons .dropdown { height: 77px; width: 96px; text-align: center; background: #5D707E; position: static; }
    .social-buttons .dropdown > a { padding: 0px; height: 100%; display: table; width: 100%; }
        .social-buttons .dropdown > a > div { vertical-align: middle; display: table-cell; color: #fff; }
    .social-buttons .dropdown a div span { display: block; margin-top: 5px; line-height: 1; }
.social-buttons #navbar-cart > a { background-color: blue; }
.social-buttons #navbar-cart.open > a { background-color: lightsteelblue; }
.social-buttons #navbar-user > a { background-color: red; }
.social-buttons #navbar-user.open > a { background-color: orange; }
.social-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; }
.social-buttons #navbar-user .sign-in { display: block; }
.social-buttons #navbar-user .logged-in { display: none; }
    .social-buttons #navbar-user.logged-in .sign-in { display: none; }
    .social-buttons #navbar-user.logged-in .logged-in { display: block; }


.social-buttons { list-style: none; }
    .social-buttons li { fill: #cbcbcb; font-family: 'barlow-condensed-medium'; font-size: 110%; }
        .social-buttons li svg { width: 20px; max-height: 20px; fill: inherit; }

@media(min-width:992px) {
    .social-buttons { position: relative; margin: 0px; padding: 0px; list-style: none; vertical-align: middle; display: inline-block; }
        .social-buttons li { padding-left: 16px; display: inline-block; vertical-align: middle; -webkit-transition: all .3s ease; transition: all .3s ease; }
            .social-buttons li a.yt-btn svg { position: relative; top: -4px; }
            .social-buttons li:hover, .social-buttons li:focus { color: #E71163; fill: #E71163; }
            .social-buttons li:last-child { margin-bottom: 6px; letter-spacing: 1.5px; }
        .social-buttons.mobile { display: none; }
}

@media(max-width:991px) {
    #siteheader-navigation-container .navbar-header { padding: 7px 15px 5px 15px; direction: rtl; display: flex; align-items: center; align-content: unset; flex-wrap: wrap; }
    .social-buttons li svg { height: 20px; width: auto; }
    #mobile-small-buttons { position: absolute; top: 0; width: 100%; direction: rtl; display: none; }
        #mobile-small-buttons ul.small-menu { width: calc(49% - 32px); list-style: none; margin: 0; padding: 0; padding-top: 13px; }
            #mobile-small-buttons ul.small-menu li { display: inline-block; margin: 0 11px; }
                #mobile-small-buttons ul.small-menu li a { font-family: 'anomalia-demibold-aaa'; }
                #mobile-small-buttons ul.small-menu li.lang a { position: relative; top: -4px; font-size: 193%; }
            #mobile-small-buttons ul.small-menu.small1 { float: right; font-family: "futura-pt-condensed"; padding-top: 10px; }
            #mobile-small-buttons ul.small-menu.small2 { float: left; }
            #mobile-small-buttons ul.small-menu svg { width: 23px; fill: #fff; max-height: 23px }
            #mobile-small-buttons ul.small-menu .location-btn svg { }
    #siteheader-navigation-container .navbar-brand { text-align: center; width: 33%; margin: 0 -2px; display: none; }
    .social-buttons { width: 33%; display: inline-block; padding: 0; font-family: "futura-pt-condensed"; font-size: 80%; text-align: left; direction: rtl; }
        .social-buttons li { display: inline-block; margin: 0 5px; /* font-size: 70%; */ vertical-align: middle; }

    #navbar-collapse-main .navbar-nav > li.dropdown > a { display: inline-block; margin: 0; }
    #navbar-collapse-main .navbar-nav > li.dropdown > button { background-color: transparent; border: none; outline: none; z-index: 4; top: 2px; padding: 0; position: relative; }
        #navbar-collapse-main .navbar-nav > li.dropdown > button svg { width: 18px; height: 17px; fill: #fff; transform: rotate(-90deg); -webkit-transition: all .3s ease; transition: all .3s ease; }
    #navbar-collapse-main .navbar-nav > li.dropdown.open > button svg { transform: rotate(90deg); }
    #navbar-collapse-main .navbar-nav > li.dropdown.open > button { /* IE 9 */ /* Chrome, Safari, Opera */ }
    #buttons-container, .right-mobile-menu,
    .left-mobile-menu { flex: 1; padding: 0px 15px; align-items: center; display: flex; }
    #buttons-container { width: 66px; flex: inherit; }
    .right-mobile-menu { text-align: left; font-size: 193%; flex-direction: row-reverse; font-family: 'barlow-condensed-medium'; }

    .left-mobile-menu { text-align: right; }
        .right-mobile-menu > *,
        .left-mobile-menu > * { margin: 0 19px; }
    a.phone-mobile img { max-width: 29px; }
    .waze-nav-mobile svg { width: 30px; height: auto; }
        .waze-nav-mobile svg path { fill: #fff; }
}

@media(max-width:991px) and (min-width:768px) {
    #SiteHeader nav.navbar { min-height: 68px; }
    #mobile-small-buttons ul.small-menu svg { width: 33px; }
    #mobile-small-buttons ul.small-menu { width: auto; }
        #mobile-small-buttons ul.small-menu.small1 { float: right; margin-right: 28vw; }
        #mobile-small-buttons ul.small-menu.small2 { margin-left: 29vw; }
    .social-buttons li svg { width: 27px; max-height: 27px; }
    .social-buttons li { font-size: 130%; }
        .social-buttons li a.en-btn { position: relative; top: -4px; }
    #navbar-collapse-main .navbar-nav > li.dropdown > button svg { width: 24px; height: 24px; }
}

@media (max-width: 767px) {
    #siteheader-navigation-container .navbar-brand { margin: 0 -3px; }
    #siteheader-navigation-container .navbar-header { padding: 0; }
    #mobile-small-buttons ul.small-menu.small1 { padding-top: 8px; }
    #mobile-small-buttons ul.small-menu.small2 a { margin: 0 6px; }
    #buttons-container .social-buttons { float: left; }
    #search_form_header_input { width: calc(100% - 50px); }
    #buttons-container .social-buttons .dropdown { max-height: 49px; width: 62px; text-align: center; background: #5D707E; position: static; }
    .navbar-header > .social-buttons a.en-btn { font-size: 130%; position: relative; top: -3px; }
    #buttons-container { width: 60px; }
    .right-mobile-menu,
    .left-mobile-menu { padding: 3px 10px; font-size: 130%; }
        .right-mobile-menu > *, .left-mobile-menu > * { margin: 0; flex: 1; text-align: center; }
    a.phone-mobile img { max-width: 21px; position: relative; top: -2px; }
    .waze-nav-mobile svg { width: 22px; position: relative; top: 2px; }
}

@media (min-width:992px) {
    #navbar-collapse-main .navbar-nav > li.dropdown > button { background-color: transparent; border: none; padding: 0; height: 20px; border-radius: 0px; }
        #navbar-collapse-main .navbar-nav > li.dropdown > button svg { fill: #fff; -webkit-transition: all .3s ease; transition: all .3s ease; fill: #fff; transform: rotate(-90deg); width: 20px; height: 14px; position: absolute; top: 14px; }
    #navbar-collapse-main .navbar-nav > li.dropdown.open > button svg { transform: rotate(90deg); }
}

#navbar-top { padding: 0px; display: inline-block; }
    #navbar-top .navbar-nav { display: inline-block; margin: 0px; padding: 0; float: none; }
        #navbar-top .navbar-nav > li { float: right; margin: 0 18px; position: relative; }
            #navbar-top .navbar-nav > li.dropdown { padding-left: 22px; }
            #navbar-top .navbar-nav > li a { border: 0px; padding: 0px; color: inherit; position: relative; background-color: transparent; text-decoration: none; }
                #navbar-top .navbar-nav > li a.drop-arrow { position: absolute; left: 0; top: 0px; width: 8px; }
                    #navbar-top .navbar-nav > li a.drop-arrow svg { -webkit-transition: all .3s ease; transition: all .3s ease; fill: #fff; transform: rotate(-90deg); }
                #navbar-top .navbar-nav > li a:hover { }
                #navbar-top .navbar-nav > li a:focus { }
            #navbar-collapse-main .navbar-nav > li > .dropdown-menu > li > a:after, #navbar-collapse-main .navbar-nav > li > a:after, #navbar-top .navbar-nav > li > a:after { content: " "; width: 100%; background: #E71163; position: absolute; height: 2px; right: 0; bottom: 2px; opacity: 0; -webkit-transition: all .3s ease; transition: all .3s ease; }
#navbar-collapse-main .navbar-nav > li > .dropdown-menu > li > a:after, #navbar-collapse-main .navbar-nav > li > a:after { width: 100%; left: 50%; right: auto; transform: translateX(-50%); -webkit-transform: translateX(-50%); bottom: 5px; }
#navbar-collapse-main .navbar-nav > li > .dropdown-menu > li > a:hover:after,
#navbar-collapse-main .navbar-nav > li > a:hover:after { opacity: 1; bottom: 3px; }
#navbar-top .navbar-nav > li > a:hover:after, #navbar-top .navbar-nav > li > a:focus:after { opacity: 1; bottom: -4px; }
#navbar-top .navbar-nav > li.dropdown.open a.drop-arrow svg { transform: rotate(90deg); }
#navbar-top .navbar-nav > li > .dropdown-menu { background: transparent; font-size: 100%; left: 50%; padding: 17px 0 0 0; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; transition: all 1s; }
    #navbar-top .navbar-nav > li > .dropdown-menu ul { padding: 12px 17px; background-color: #262626; text-align: right; font-size: 80%; border-top: 2px solid #E71163; max-height: 0px; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s; overflow: hidden; }
#navbar-top .navbar-nav > li.open > .dropdown-menu ul { padding: 17px; }
#navbar-top .navbar-nav > li.open > .dropdown-menu ul { max-height: 100vh; }
#navbar-top .navbar-nav > li > .dropdown-menu:before { content: " "; width: 15px; position: absolute; height: 6px; left: 50%; top: 11px; opacity: 1; -webkit-transition: all .3s ease; transition: all .3s ease; background-image: url('../../../000Frames/site/images/pink-triangle.png'); transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); opacity: 0; -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; transition: all 1s; }
#navbar-top .navbar-nav > li.open > .dropdown-menu:before { opacity: 1 }
#navbar-top .navbar-nav > li > .dropdown-menu ul li { opacity: 0; -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; transition: all 1s; transition-delay: 0s; margin-bottom: 7px; }
#navbar-top .navbar-nav > li > .dropdown-menu a:after { content: " "; width: 100%; background: #E71163; position: absolute; height: 2px; right: 0; bottom: 2px; opacity: 0; -webkit-transition: all .3s ease; transition: all .3s ease; }
#navbar-top .navbar-nav > li > .dropdown-menu a:hover:after { opacity: 1; bottom: -4px; }
#navbar-top .navbar-nav > li.open > .dropdown-menu ul li { transition-delay: 0.2s; opacity: 1; }
#navbar-top .navbar-nav > li > .dropdown-menu ul { list-style: none; }
#navbar-top .navbar-nav > li > .dropdown-menu > li > a { padding: 0px; line-height: normal; }
    #navbar-top .navbar-nav > li > .dropdown-menu > li > a:hover { color: #333; }

@media(min-width:768px) {
    #navbar-top { display: inline-block; width: 50%; vertical-align: middle; margin: 0 -6px; direction: rtl; }
    #navbar-header { text-align: center }
}

@media(max-width:767px) {
    #navbar-top { display: none; }
}

#siteheader-navigation-container { position: relative; z-index: 1; }
#navbar-collapse-main { padding: 0px; width: 355px; background-color: #000; margin: 0; position: fixed; top: 0; height: 100vh !important; -webkit-transition: all .3s ease; transition: all .3s ease; display: block; visibility: visible; border: none; right: -355px; z-index: 1; }
    #navbar-collapse-main.in, #navbar-collapse-main.collapsing { top: 0; right: 0; }
    #navbar-collapse-main .navbar-nav { padding: 0px; margin: 0px; padding-bottom: 5px; padding-top: 5px; position: absolute; top: 50%; transform: translateY(-50%); width: 100%; float: none; text-align: center; font-size: 100%; }
        #navbar-collapse-main .navbar-nav > li { display: block; float: none; margin-bottom: 30px; }
            #navbar-collapse-main .navbar-nav > li > a { color: #ffffff; padding: 7px 0; margin-left: 4px; line-height: 1; display: inline-block; font-size: 135%; }
            #navbar-collapse-main .navbar-nav > li.dropdown.open a { background-color: transparent; }
            #navbar-collapse-main .navbar-nav > li > .dropdown-menu { position: static; float: none; width: auto; margin-top: 0; background-color: transparent; -webkit-box-shadow: none; box-shadow: none; right: 0px; left: auto; padding: 5px; /* font-size: 100%; */ text-align: right; border: none; border-radius: 0px; text-align: center; padding: 0 5px; -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; transition: all 1s; font-size: 100%; }
                #navbar-collapse-main .navbar-nav > li > .dropdown-menu > li > a { padding: 7px 0px; line-height: normal; color: #fff; display: inline-block; position: relative; font-family: 'almoni-neue'; line-height: 0.85; }
                #navbar-collapse-main .navbar-nav > li > .dropdown-menu > li:last-child > a { }
                #navbar-collapse-main .navbar-nav > li > .dropdown-menu > li > a:hover { color: #999; }



/***FULL SCREEN OPEN MENU CSS*/

@media(max-width:991px) {
    #navbar-collapse-main .social-buttons { width: 100%; text-align: center; }
    #siteheader-navigation-container { background: #121212; border-top: 2px solid #ec1163; }
}

@media(max-width:991px) {
    #navbar-collapse-main { width: 100%; top: 100vh; right: 0; }
}

@media(max-width:767px) {
    #navbar-collapse-main { font-size: 141%; height: calc(100vh - 50px) !important; }
        #navbar-collapse-main .navbar-nav { /* width: 100%; */ /* position: relative; */ /* top: 0; */ /* transform: none; */ /* padding-top: 70px; */ }
            #navbar-collapse-main .navbar-nav > li { float: none; clear: both; margin-bottom: 5px; font-size: 110%; }
                #navbar-collapse-main .navbar-nav > li > a { padding: 5px 0; display: inline-block; margin: 0; font-size: 76%; }
                #navbar-collapse-main .navbar-nav > li > .dropdown-menu { border-radius: 0px; background-color: transparent; padding: 0; font-size: 80%; }
                    #navbar-collapse-main .navbar-nav > li > .dropdown-menu > li > a { padding: 3px 0; }
                        #navbar-collapse-main .navbar-nav > li > .dropdown-menu > li > a:hover { color: #333; }
}

@media(max-width:991px) {
    .mobile-button { vertical-align: middle; }
        .mobile-button .navbar-toggle { margin-right: 5px; float: none; }
    #navbar-top { display: none; }
}

/*------------------------------------*\
    Top Bar Search 
\*------------------------------------*/

#search_form_header { max-width: 1170px; margin: 0 auto; position: relative; opacity: 0; transition: all 0.3s ease; transition-delay: 0s; }
.active #search_form_header { opacity: 1; transition-delay: 0.3s; }
#search_form_header input[type="text"] { background-color: #262626; border: none; height: 56px; width: 100%; display: inline-block; padding: 0 15px; }
#search_form_header_input_continer { margin-left: 15px; vertical-align: middle; position: fixed; top: 90px; right: 0; background-color: #232323; width: 100%; padding: 0; -webkit-transition: all .3s ease; transition: all .3s ease; pointer-events: none; max-height: 0; overflow: hidden; transition-delay: 0.3s; }
    #search_form_header_input_continer.active { opacity: 1; pointer-events: auto; max-height: 80px; padding: 10px 0 13px; transition-delay: 0s; }
#search_form_header_submit { background-color: transparent; border: none; position: absolute; left: 22px; padding: 0; top: 17px; }
    #search_form_header_submit svg { fill: #fff; width: 20px; }


@media(max-width:991px) {
    #search_form_header_input_continer { text-align: center; display: inline-block; margin: 0 auto; width: 100%; top: auto; bottom: 0; background-color: #fff; }
    #search_form_header_input { display: inline-block; }
    #search_form_header_submit { width: 40px; display: inline-block; }
    #search_form_header_input_continer.active { padding: 10px 10px 13px; bottom: 69px; }
}

@media(max-width:767px) {
    #search_form_header_input_continer.active { bottom: 50px; }
}

#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; text-align: center; color: #000; z-index: 1; overflow: hidden; margin: 0; border: 2px solid #fff; vertical-align: middle; margin-left: 26px; }
.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 { width: 49px; height: 49px; border: 0; vertical-align: middle; margin-right: 0; padding: 9px 10px; transition: all 500ms ease; margin-bottom: 0; border-radius: 0px; padding: 0; background-color: transparent; padding-top: 6px; }
    .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: transparent; }
    .navbar-default .navbar-toggle .icon-bar { background-color: #fff; width: 27px; height: 2px; transition: all 250ms ease-in-out; -webkit-transition: all 250ms ease-in-out; }
        .navbar-default .navbar-toggle .icon-bar.up { margin-top: -10px; }
.bg .navbar-default .navbar-toggle .icon-bar { background-color: #fff; }
.navbar-toggle .icon-bar + .icon-bar { margin-top: 7px; }
.navbar-default .navbar-toggle .icon-bar.down { }
.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; }

/***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: -6px; }
.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: -2px; }
.navbar-default .navbar-toggle:not(.collapsed) .icon-bar.down { display: none; }

.search-icon { height: 42px; width: 30px; display: block; padding: 11px; margin: 0; position: relative; cursor: pointer; border-radius: 4px; }
.circle { position: relative; display: block; height: 15px; width: 15px; border-radius: 50%; z-index: 0; border: 2px solid white; -webkit-transition: all 0.6s cubic-bezier(0.25, 1.7, 0.35, 0.8); transition: all 0.6s cubic-bezier(0.25, 1.7, 0.35, 0.8); z-index: 1; background-color: #232323; }

.handle { position: absolute; background-color: white; top: 22px; left: 13px; width: 17px; height: 2px; display: block; -webkit-transform: rotate(45deg); transform: rotate(45deg); float: right; border-radius: 2px; }
    .handle:after { content: ""; background-color: white; width: 17px; height: 2px; display: block; float: right; border-radius: 2px; -webkit-transition: all 0.6s cubic-bezier(0.25, 1.7, 0.35, 0.8); transition: all 0.6s cubic-bezier(0.25, 1.7, 0.35, 0.8); z-index: -1; }
.active .circle { -webkit-transform: scale(0.02); transform: scale(0.02); -webkit-transform-origin: 30% 40%; transform-origin: 30% 40%; background: white; border-color: white; }
.active .handle:after { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(90deg); transform: rotate(90deg); }


@media(max-width:991px) {
    .navbar-default .mobile-button { margin-left: 10px; display: inline-block; text-align: center; color: #000; z-index: 1; position: absolute; top: -57px; border-radius: 50%; overflow: hidden; margin: 0; background-color: #fff; left: 50%; transform: translateX(-50%); border: 3px solid #000; }
    .navbar-default .navbar-toggle { width: 60px; height: 60px; }
        .navbar-default .navbar-toggle .icon-bar { background-color: #000; width: 27px; height: 4px; transition: all 250ms ease-in-out; -webkit-transition: all 250ms ease-in-out; }
    .navbar-toggle .icon-bar + .icon-bar { margin-top: 6px; }
    .navbar-default .navbar-toggle:not(.collapsed) .icon-bar + .icon-bar:not(.up):not(.down) { margin-top: -4px; }
    .circle { height: 20px; width: 20px; }
}

@media (min-width:768px) and (max-width:991px) {
    .navbar-default .navbar-toggle span.open-nav { font-size: 113%; }
}

@media (max-width:767px) {
    .navbar-default .navbar-toggle { padding-top: 9px; }
    .navbar-toggle .icon-bar + .icon-bar { margin-top: 6px; }
    .navbar-default .navbar-toggle:not(.collapsed) .icon-bar.up { margin-top: -6px; }
    .navbar-default .navbar-toggle:not(.collapsed) .icon-bar + .icon-bar:not(.up):not(.down) { }
}


@media(min-width:992px) {
    .search-nav.mobile,
    .lang-mobile,
    .right-mobile-menu,
    .left-mobile-menu { display: none; }
}

@media(max-width:991px) {
    .search-nav { display: inline-block; vertical-align: middle; }
    .search-icon { padding: 4px; }
}

@media(max-width:767px) {
    .search-nav { text-align: center; }
    .search-icon { margin: auto; }
    .circle { margin-top: 9px; height: 15px; width: 15px; }
    .handle { top: 25px; }
}
