﻿
#SiteHeader nav.navbar {
    position:       relative;
    margin-bottom:  0;
    border:         none;
    background:     none;
}


#siteheader-navigation-container .navbar-header { float:none; position:relative; margin-top:-20px; width:100%;text-align:center; }

#siteheader-navigation-container .navbar-brand  { padding:0px; height:65px;float:right }
#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; -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:after { content:" ";  width:24px; height:24px; background-image:url('https://cdn1.iconfinder.com/data/icons/general-9/500/left_arrow-24.png'); float: left; }*/
    #navbar-collapse-main .navbar-nav > li.dropdown > a {float:right;width:100%;}
    #navbar-collapse-main .navbar-nav > li.dropdown > button {float: left; position:absolute;left:0; background-image: url('../../../000Frames/site/images/menu_left_arrow.png'); width: 24px; height: 24px; background-color: transparent; border: none; margin-left: 15px;outline:none;}
    #navbar-collapse-main .navbar-nav > li.dropdown.open > button {-ms-transform: rotate(-90deg); /* IE 9 */ -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */ transform: rotate(-90deg);} 
}
@media (min-width:768px) {
        #navbar-collapse-main .navbar-nav > li.dropdown > button {display:none}

}

#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; }
@media(min-width:768px){
    #navbar-top {display:inline-block}
    #navbar-header {text-align:center}

}
@media(max-width:767px) {
    #navbar-top { display:none; }
}

#navbar-collapse-main                           { float:right; padding:0px; font-size:125%;  width:100%; background-color:black; 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          { 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; } 


/***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:767px) {  
    #navbar-collapse-main           { width: 100%; }
    #navbar-collapse-main .navbar-nav               { width:100%; }
    #navbar-collapse-main .navbar-nav > li          { float:none;clear:both; }
    #navbar-collapse-main .navbar-nav > li > a      { padding:5px; }
    #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; }
}

@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; }
}


#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: 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; background:#ffffff; margin-bottom: 0; }
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus  { background-color:grey; }
.navbar-default .navbar-toggle .icon-bar        { background-color:#000; 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) (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; }


