﻿
#SiteHeader nav.navbar {
    position:       relative;
    margin-bottom:  0;
    border:         none;
    background:     none;
    min-height: 0;
}


#siteheader-navigation-container .navbar-header { float: none; position: relative; width: 100%; height: 100px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
.navbar-header:before, .navbar-header:after { display: none; }
#siteheader-navigation-container .navbar-brand { padding: 0px; width: 165px; height: auto; float: left; }
#siteheader-navigation-container #logo-icon     { max-width:100%; max-height: 100%; }


#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; -moz-box-shadow: 0 6px 12px rgba(0,0,0,.175);-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);box-shadow: 0 6px 12px rgba(0,0,0,.175);}

@media (max-width:1024px){
    #siteheader-navigation-container .navbar-header { height: 85px; }
    #navbar-collapse-main .navbar-nav > li.dropdown > button:after { pointer-events: none; content: ""; position: absolute; top: 0; right: 5px; width: 0; height: 0; border: 0 solid transparent; border-left-width: 5px; border-right-width: 5px; border-top: 9px solid #3c3c3c; }
    #navbar-collapse-main .navbar-nav > li.dropdown > button { display: inline-block; border: none; margin: -15px; }
    #navbar-collapse-main .navbar-nav > li.dropdown.open > button {-ms-transform: rotate(-180deg); /* IE 9 *//* -webkit-transform: rotate(-180deg); */ /* Chrome, Safari, Opera *//* transform: rotate(-180deg); */}
    #navbar-collapse-main .navbar-nav > li.dropdown.open  > button:after {-ms-transform: rotate(-180deg);-webkit-transform: rotate(-180deg);transform: rotate(-180deg);}
    #navbar-collapse-main .navbar-nav > li.dropdown > a { width: auto; }
}

@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-header{margin-top:0px;}



    #siteheader-navigation-container .navbar-brand { width: 140px; }
    #buttons-container .nav-buttons .dropdown       { max-height: 49px; width: 62px; text-align: center; background: #5D707E; position: static; }
    
    
    #siteheader-navigation-container .navbar-header { height: 75px; }

}
@media (min-width:1025px) {
        #navbar-collapse-main .navbar-nav > li.dropdown > button {display:none}

}

#navbar-top     {  padding:0px; display:inline-block; }
#navbar-top .navbar-nav  { display: inline-block; margin: 0px; }
#navbar-top .navbar-nav > li { float: none; display: inline-block; padding-top: 5px; font-size: 130%; margin: 0 15px; vertical-align: middle; }
#navbar-top .navbar-nav > li.dropdown > a { position: relative; padding-left: 15px;}
#navbar-top .navbar-nav > li.dropdown > a:before { content: ""; position: absolute; left: 0; top: 50%; margin-top: -1px; width: 0; height: 0; border: 0 solid transparent; border-left-width: 5px; border-right-width: 5px; border-top: 9px solid #859895; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
#navbar-top .navbar-nav > li a { font-size: 23px; color: #859895; border: 0px; padding: 0px; position: relative; line-height: 1; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; }

#navbar-top .navbar-nav > li > a:after { content: ""; display: block; position: absolute; top: -8px; width: 100%; height: 2px; background-color: #9c268f; opacity: 0; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; }
#navbar-top .navbar-nav > li:hover > a:after, #navbar-top .navbar-nav > li > a:hover:focus { opacity: 1; }
#navbar-top .navbar-nav > li:hover > a { color: #9c268f; }
#navbar-top .navbar-nav > li.dropdown:hover > a:before { border-top: 9px solid #9c268f; }
#navbar-top .navbar-nav > li > a.activeLink:after{width:100%;}
#navbar-collapse-main .navbar-nav > li > a.activeLink{background: linear-gradient(to left, #c52759, #0091b5 99%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
#navbar-top .navbar-nav > li.dropdown.open a     {     background: transparent; }
#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:none;
                                                    border-radius:0px;
                                                    box-shadow: none;
                                                    -webkit-box-shadow: none;
                                                    -moz-box-shadow: none;
                                                    right: 0;
                                                    left: auto;
                                                    font-size: 77%;
                                                    padding: 12px 20px 0 20px;
                                                   
                                                    }
#navbar-top .navbar-nav > li > .dropdown-menu:after { content: ""; position: absolute; bottom: 0; width: 100%; height: 3px; background-color: #9c268f; right: 0; }
#navbar-top .navbar-nav > li > .dropdown-menu li {padding-bottom: 15px;}
#navbar-top .navbar-nav > li > .dropdown-menu > li > a        { color:#333; padding: 0px; font-size: 100%; line-height:normal; transition: all 0.3s ease; webkit-transition: all 0.3s ease;}
#navbar-top .navbar-nav > li > .dropdown-menu > li > a:hover  {color: #b4204f;}
@media(min-width:1025px){
    #navbar-top {display: inline-block;}
    #navbar-header {text-align:center}

}

@media (max-width:1250px){
    #navbar-top .navbar-nav > li {font-size: 115%;    margin: 0 15px;}
}

@media(max-width:1024px) {
    #navbar-top { display:none; }
}

#navbar-collapse-main                           {padding:0px;font-size:125%;width:100%;margin-bottom:5px;margin-top:5px;}
#navbar-collapse-main .navbar-nav               { float:right; padding:0px; margin:0px; padding-bottom:5px; padding-top:5px;}
#navbar-collapse-main .navbar-nav > li          { float:right; }
#navbar-collapse-main .navbar-nav > li > a          {padding:7px;margin-left:15px;color:  inherit;}
#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: none;border-radius:0px;box-shadow: none;-webkit-box-shadow: none;-moz-box-shadow: none;}
#navbar-collapse-main .navbar-nav > li > .dropdown-menu > li > a        {padding: 3px 15px;line-height:normal;}
#navbar-collapse-main .navbar-nav > li > .dropdown-menu > li > a:hover  { color:#999; } 

@media(max-width:1024px){
        #navbar-collapse-main{width: 100%;position: fixed;z-index: 3;background: #fff;margin-top: 0;right: 0;/* visibility: hidden !important; */}
        #navbar-collapse-main.collapse:not(.in) {visibility: hidden !important;}
}

@media (max-width:767px){
    #navbar-collapse-main{top:75px;}
}


/***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 (min-width:1025px){
    #navbar-collapse-main{display:none !important;;}
}

@media(max-width:1024px) and (min-width:992px){
    #navbar-collapse-main {width: 400px;}
    
}
@media(max-width:1025px){
    #navbar-collapse-main .navbar-nav > li {clear:  both;width: 100%;padding:0 25px;}
    #navbar-collapse-main .navbar-nav               { width:100%; background:#fff;position: relative;}
        #navbar-collapse-main .navbar-nav > li { float: none; clear: both; border-bottom: 1px solid #f4f4f4; text-align: center; }
            #navbar-collapse-main .navbar-nav > li > a { padding: 17px 0; display: inline-block; color: #3c3c3c; }
    #navbar-collapse-main .navbar-nav > li:nth-last-child(1){border: none;}
    #navbar-collapse-main .navbar-nav > li > .dropdown-menu {border-radius:0px;background-color:transparent;width:100%;text-align: right;border:0;padding: 10px 0 0 0;}
        #navbar-collapse-main .navbar-nav > li > .dropdown-menu > li > a { text-align: center; color: inherit; padding: 3px 0px; line-height: normal; font-size: 85%; }
    #navbar-collapse-main .navbar-nav > li > .dropdown-menu > li > a:hover  { color:#333; }

    #SiteHeader:before { opacity: 0; content: ""; width: 100%; height: 100%; position: fixed; background: linear-gradient(90deg, rgb(156, 39,143, 0.4) 0%, rgb(228, 61, 48, 0.4) 100%); z-index: 0; right: 0; -webkit-transition: opacity .5s ease; transition: opacity .5s ease; pointer-events: none; }
    #SiteHeader.drop-open:before { opacity: 1; pointer-events: all; }
    .dropdown-menu { position: relative; }
    #SiteHeader nav.navbar{background:#fff;}
    #SiteHeaderContainer{padding:0px;}
    #SiteHeader nav.navbar{padding:0 15px;}
}

@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; }
    .mobile-button .navbar-toggle   { margin-right:5px; float:none; }
}

@media(max-width:767px){
    #navbar-collapse-main .navbar-nav > li > .dropdown-menu{padding-top:0px;}
}

#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: none;vertical-align: middle;text-align:right;width: 30%;color:#000;margin-right:-4px;z-index:8;position:relative;}
.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: 120px;border:0;vertical-align:middle;margin-right: 0;padding: 9px 10px;height: 60px;transition: all 500ms ease;-webkit-transition: all 500ms ease; background:#ffffff; margin-bottom: 0; }
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus  {background-color: #fff;}
    .navbar-default .navbar-toggle .icon-bar { background-color: #3c3c3c; width: 38px; height: 4px; transition: all 250ms ease-in-out; -webkit-transition: all 250ms ease-in-out; }
.bg .navbar-default .navbar-toggle .icon-bar    { background-color:#fff;}
.navbar-toggle .icon-bar+.icon-bar              { margin-top:6px; }
.navbar-default .navbar-toggle .icon-bar.down   { width: 38px; }
.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; }

@media (min-width:768px) and (max-width:991px){
    .navbar-default .navbar-toggle span.open-nav {font-size: 113%;}
}

@media (max-width:1024px){
    .navbar-default .navbar-toggle  {height: 52px;width: auto;}
    .navbar-default .mobile-button  { display: inline-block;}
}
/***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; }

.btn-default:hover, .btn-default:focus, .btn-default.focus, .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default { background-color: transparent;}