#SiteHeader nav.navbar { position:relative; margin-bottom:0;border:none;background:none; } #siteheader-navigation-container .navbar-header { float:none;position:relative;width:100%;text-align:center;height: 60px;} #SiteHeader.bg #siteheader-navigation-container .navbar-header { background: #b3bfad;height: 90px;transition: all 500ms ease;} #siteheader-navigation-container .navbar-brand {padding: 0px;float: none;display: inline-block;vertical-align: top;width: 40%;text-align: center;margin-right:-4px;margin-top: 9px;} #siteheader-navigation-container #logo-icon { max-width: 6.5vw;display:inline-block;fill: #000;transition: all 500ms ease;} ::-ms-backdrop, #siteheader-navigation-container #logo-icon { height: 4.5vw; } ::-ms-backdrop, .bg #siteheader-navigation-container #logo-icon { height: 3.5vw; } .bg #siteheader-navigation-container #logo-icon {fill: #231f20;transition: all 500ms ease;max-width: 81px;} #SiteHeader #siteheader-navigation-container .navbar-brand { transition: opacity 350ms ease-in;-webkit-transition: opacity 500ms ease-in;} #SiteHeader.bg #siteheader-navigation-container .navbar-brand { opacity: 1;} #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:1280px) and (min-width:992px){ #SiteHeader.bg #siteheader-navigation-container .navbar-header { height: 75px;} .bg #siteheader-navigation-container #logo-icon { width: auto; max-height: 55px; } } @media (min-width:768px) and (max-width:991px){ #siteheader-navigation-container #logo-icon { max-width: 8.5vh; } #siteheader-navigation-container .navbar-header { height:66px; } .navbar-default .navbar-toggle { height:66px; } } @media (max-width: 767px) { #buttons-container { float:none; } #buttons-container .nav-buttons { float:left;} #search_form_header_input { width: calc(100% - 50px); } #SiteHeader.bg #siteheader-navigation-container .navbar-header {height: 56px;z-index: 8;} #siteheader-navigation-container .navbar-brand { height: 45px;margin-top: 5px;margin-right:0; } #SiteHeader #siteheader-navigation-container .navbar-brand { opacity:1;} #SiteHeader #siteheader-navigation-container .navbar-brand img { width: 47px;} #siteheader-navigation-container #logo-icon { max-width: 9.5vh;} .bg #siteheader-navigation-container #logo-icon {max-width: 50px;} #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 > 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);} .menuOpen #siteheader-navigation-container{height: 100vh;background-image: url(../../../000Frames/site/images/homePage/aboutBg.jpg);} #siteheader-navigation-container .navbar-brand { width: 28%; } } @media (max-width:767px) and (orientation:landscape){ #siteheader-navigation-container #logo-icon { max-width:9vw; } .bg #siteheader-navigation-container #logo-icon { max-width:8vw; } } @media (min-width:768px) { #navbar-collapse-main .navbar-nav > li.dropdown > button {display:none} } .navbar-default .mobile-button {display: inline-block;vertical-align: middle;text-align:right;width: 30%;color:#000;margin-right: 0px;z-index:8;position:relative;float: right;direction:rtl; } .bg .navbar-default .mobile-button { color:#231f20;} .bg .navbar-default .navbar-toggle { padding: 0; height: 90px;} .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-color: transparent;/* background: blue; *//* border-left: 1px solid blue; *//* transform: skewX(172deg); */background-size: cover; direction:ltr;margin-bottom:0; } .navbar-default .navbar-toggle:focus { background-color:transparent} .navbar-default .navbar-toggle:focus > div:after{content:"";position: absolute;width: 43%;height: 75%;border: 1px solid #000;top: 15%;right: 12%;} .navbar-default .navbar-toggle.collapsed:focus > div:after {right: 12%;width: 46%;} .bg .navbar-default .navbar-toggle:focus > div:after{right: 14%;width: 42%;height: 65%;top: 20%;} .navbar-default .navbar-toggle:hover { color:#231f20;background-image: url(../../../000Frames/site/images/header/slash_02.svg);background-color: transparent;} .navbar-default .navbar-toggle:focus .icon-bar, .navbar-default .navbar-toggle .icon-bar { background-color:#000; width:48px; height:4px;transition: all 250ms ease-in-out;-webkit-transition: all 250ms ease-in-out; } .navbar-default .navbar-toggle:hover .icon-bar { background-color:#231f20; } .bg .navbar-default .navbar-toggle .icon-bar { background-color:#231f20; } .navbar-toggle .icon-bar+.icon-bar { margin-top:6px; } .navbar-default .navbar-toggle .icon-bar.down { width: 38px; } .navbar-default .navbar-toggle:hover .icon-bar.down { width: 48px; } .navbar-default .navbar-toggle:hover .icon-bar.up {width: 38px;} .navbar-default .navbar-toggle div { display: inline-block;vertical-align: middle; direction:rtl;} .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 {background-color: #000;-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);margin-top: 0px;width: 48px;} .navbar-default .navbar-toggle:hover:not(.collapsed) .icon-bar.up{background-color: #231f20;} .navbar-default .navbar-toggle:not(.collapsed) .icon-bar+.icon-bar:not(.up):not(.down) {background-color: #000;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:hover:not(.collapsed) .icon-bar+.icon-bar:not(.up):not(.down){background-color: #231f20;} .navbar-default .navbar-toggle:not(.collapsed) .icon-bar.down { display:none; } @media (max-width:1280px) and (min-width:992px){ .bg .navbar-default .navbar-toggle{ height: 75px; } } @media (min-width:768px) (max-width:991px){ .navbar-default .navbar-toggle span.open-nav {font-size: 113%;} } @media (min-width:768px){ .bg .navbar-default .navbar-toggle { width: 150px; } } @media (max-width:767px){ .navbar-default .navbar-toggle { height: 56px;} .bg .navbar-default .navbar-toggle {height: 56px;} .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-image:none; color:#000; } .navbar-default .navbar-toggle:hover .icon-bar, .navbar-default .navbar-toggle:not(.collapsed) .icon-bar.up, .navbar-default .navbar-toggle:not(.collapsed) .icon-bar+.icon-bar:not(.up):not(.down), .navbar-default .navbar-toggle:focus .icon-bar{background-color: #000;} .navbar-default .navbar-toggle:not(.collapsed) .icon-bar.up { width:48px;} .bg .navbar-default .navbar-toggle .icon-bar { background-color:#231f20; } .bg .navbar-default .navbar-toggle { color:#fff; } .navbar-default .navbar-toggle span.open-nav { display:none} .navbar-default .navbar-toggle:not(.collapsed) span.close-nav{display:none;} .navbar-default .navbar-toggle div { float: right;padding-right: 2vw;} .navbar-default .navbar-toggle:hover:not(.collapsed) .icon-bar.up { background-color: #000; } .navbar-default .navbar-toggle:hover:not(.collapsed) .icon-bar+.icon-bar:not(.up):not(.down){ background-color: #000; } .navbar-default .navbar-toggle:focus > div:after, .bg .navbar-default .navbar-toggle:focus > div:after{display:none;} } @media (max-width:375px){ } #navbar-top { padding:0px; display:inline-block; margin-right:-4px;} #navbar-top .navbar-nav { display: inline-block; margin: 0px; } #navbar-top .navbar-nav > li { display: inline-table;float: none;vertical-align: middle;width: 37px;height: 37px;background-color: #fff;border-radius: 50%;margin-left: 7px;} #navbar-top .navbar-nav > li a { border:0px;padding:0px;display: table-cell;vertical-align: middle;color: #4d4d4f;} #navbar-top .navbar-nav > li a.facebook { background: url(../../../000Frames/site/images/header/facebook-inner.png);background-size: 100%;background-repeat: no-repeat;} #navbar-top .navbar-nav > li a.instagram { background: url(../../../000Frames/site/images/header/instagram-inner.png);background-size: 100%;background-repeat: no-repeat;} .bg #navbar-top .navbar-nav > li a.facebook { background-image: url(../../../000Frames/site/images/header/facebook.png);} .bg #navbar-top .navbar-nav > li a.instagram{ background-image: url(../../../000Frames/site/images/header/instagram.png);} #navbar-top .navbar-nav > li a:hover { color: #4d4d4f; text-decoration:none; } #navbar-top .navbar-nav > li a:focus { color: #4d4d4f; 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; 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; } #navbar-top .navbar-nav {position: relative;padding: 13px 10px 10px 10px;transition: all 500ms ease;height: 100%;} .bg #navbar-top .navbar-nav {padding: 27px 20px 0px 20px;} #navbar-top .gift-card { position: absolute;top: 0px;left: 136px;z-index:80;opacity: 0;transition: all 650ms ease-out;} #navbar-top .gift-card.showItem { opacity: 1;} #navbar-top .gift-card:before { content: "";border-left: 10px solid #97A78D;display: block;z-index: 7;height: 100%;position: absolute;left: -5px;transform: skew(175deg);-webkit-transform: skew(185deg);top: 0; } #navbar-top .gift-card:after { content: "";border-left: 10px solid #97A78D;display: block;z-index: 7;height: 100%;position: absolute;right: -5px;transform: skew(-175deg);-webkit-transform: skew(-175deg);top: 0; } #navbar-top .gift-card button { background-color: #96a78d;width: 105px;height: 60px;font-size: 100%;border: 0px; } #navbar-top .gift-card button a { color: #fff; } #navbar-top .navbar-nav > li a.wazeIcon { background: url(../../../000Frames/site/images/header/waze-green.png);max-width:27px; background-size: 100%;background-repeat: no-repeat; } #navbar-top .navbar-nav > li:last-child { margin-left: 0; } .bg #navbar-top .navbar-nav > li a.wazeIcon { background-image: url(../../../000Frames/site/images/header/waze-w.png); } @media (max-width:1280px) and (min-width:992px){ .bg #navbar-top .navbar-nav{padding: 19px 20px 0px 20px;} } @media(min-width:768px) { #navbar-top {display:inline-block;vertical-align: middle;width: 30%;z-index: 8;position:relative;margin-top: 0;height: 60px;transition: all 500ms ease;margin-left: 0;float: left;} .bg #navbar-top {height: 90px;} #navbar-header { text-align:center} #navbar-top .navbar-nav li:last-child { display: none; } } @media (max-width:1280px) and (min-width:992px){ .bg #navbar-top{ height: 75px; } } @media(max-width:767px) { #navbar-top {margin-right:-5px; } #navbar-top { display:inline-block;vertical-align: middle;width: 31%;z-index: 8;position:relative;margin-top: 0;height: 56px;transition: all 500ms ease;float: left;} .bg #navbar-top .navbar-nav {padding-top: 8px;padding-left: 4vw;} #navbar-top .gift-card { display:none; } #navbar-top .gift-card.showItem { display:none; } .bg #navbar-top .navbar-nav { padding: 17px 0px 0px 10px; } #navbar-top .navbar-nav { padding:13px 0px 10px 10px; } } @media(max-width:375px) { .bg #navbar-top .navbar-nav{padding-top: 16px;} } #navbar-collapse-main {float:right;padding:0px;font-size:125%;width: 100%;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;} #navbar-collapse-main .main-menu {margin-top: 25vh;} #navbar-collapse-main .main-menu.right-list {padding-left: 15vw;} #navbar-collapse-main .main-menu.left-list {padding-left: 6vw;} #navbar-collapse-main .main-menu ul { list-style:none;transition: all 2500ms cubic-bezier(.17,.67,.83,.67);margin-top: 40px;} #navbar-collapse-main.in .main-menu ul { margin-top: 0;transition: all 100ms cubic-bezier(.17,.67,.83,.67); } #navbar-collapse-main .main-menu ul li { opacity: 0;transition: all 400ms cubic-bezier(.17,.67,.83,.67);margin-right: 30px;padding-top: 20px;margin-top: 0;} #navbar-collapse-main .main-menu ul li a { color:#231f20; text-decoration:none;transition: all 300ms ease-out;} #navbar-collapse-main .main-menu ul li a:hover { color:#98a88f; text-decoration:none; } #navbar-collapse-main .main-menu ul li.showItem { opacity: 1;transition: all 600ms ease-in; transform: translateY(-20px);} #navbar-collapse-main .main-menu ul li.gift-card-menu { display:none;} #navbar-collapse-main .seperator { position: absolute;top: 25vh;width: 50px;height: 70vh;left: 50%;transform: translateX(-50%);transform:translateX(-50%);-webkit-transform: translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%);} #navbar-collapse-main .seperator div:nth-child(1), #navbar-collapse-main .seperator div:nth-child(3) { height: 43.8%; width: 6px; background-color: #4d4d4f; margin: 0 auto; } #navbar-collapse-main .seperator div:nth-child(2) { width: 100%;color: #4d4d4f;background-size: contain;margin: 24% auto;} #navbar-collapse-main .seperator div:nth-child(2) svg { fill: #4d4d4f;} #navbar-collapse-main .main-menu ul li.TastingMenu.showItem a { color: #5f1026; } @media (max-width:1920px) { #navbar-collapse-main .main-menu ul li {font-size: 48px;margin-right: 10px;} #navbar-collapse-main .seperator div:nth-child(1), #navbar-collapse-main .seperator div:nth-child(3) {height: 33.8%;} #navbar-collapse-main .seperator {top: 19vh;} ::-ms-backdrop, #navbar-collapse-main .seperator { top: 15vh; } #navbar-collapse-main .main-menu {margin-top: 19vh;} } @media (min-width:1600px){ #navbar-collapse-main .main-menu ul li{ font-size: 65px;} #navbar-collapse-main .seperator {height: 40vh; } } @media (max-width:1440px){ #navbar-collapse-main .main-menu.right-list {padding-left: 10vw;} #navbar-collapse-main .main-menu {margin-top: 24vh;} } @media (max-width:1170px) { #navbar-collapse-main .main-menu ul li { font-size: 40px;margin-right: 10px; } #navbar-collapse-main .main-menu.right-list { padding-right: 0vw; } #navbar-collapse-main .main-menu.left-list { padding-right: 8vw; } } @media (min-width:768px) and (max-width:991px) { #navbar-collapse-main .main-menu {margin-top: 19vh;} #navbar-collapse-main .main-menu.right-list { padding-right: 0vw;} #navbar-collapse-main .main-menu.left-list { padding-right: 0vw;} #navbar-collapse-main .main-menu ul li {text-align: center;font-size: 37px;padding-top: 5.0vh;} #navbar-collapse-main .seperator {height: 110vw;top: 17vh;} #navbar-collapse-main.navbar-collapse.in {} #navbar-collapse-main .seperator div:nth-child(1), #navbar-collapse-main .seperator div:nth-child(3){ height: 32%;} #navbar-top .gift-card button{font-size: 113%;} #navbar-collapse-main .main-menu.right-list {padding-left: 0;} } @media(max-width:767px) { #navbar-collapse-main { width: 100%; top:140px;} #navbar-top .navbar-nav {margin-left: 0px;padding-top: 12px;padding-left: 2vw;float: left;} #navbar-top .navbar-nav > li {width: 29px;height: 29px;margin-left: 0;} #navbar-top .gift-card button { height: 66px;} #navbar-collapse-main .main-menu.right-list {padding: 0vw;margin-top: 0;width: 100%;} #navbar-collapse-main .main-menu.left-list { padding: 0vw;margin-top: 0px;} #navbar-collapse-main .main-menu.left-list ul li:nth-last-child(1) { border-bottom: 0px;padding-bottom: 60px; } #navbar-collapse-main .main-menu ul li { text-align:center;font-size: 19px;padding: 13px;border-bottom: 2px solid #4d4d4f;margin: 0px;} #navbar-collapse-main .main-menu ul li.showItem { transform: translateY(0px);} #navbar-collapse-main .main-menu ul li.gift-card-menu { display: block;} #navbar-collapse-main .seperator { display:none;} #navbar-collapse-main.in .main-menu ul { margin:0px;padding: 0 13px;} #navbar-collapse-main.navbar-collapse.in {overflow: auto !important;background-image: none;top: 63px;border: 0px; padding-bottom:80px;} #navbar-collapse-main.in .main-menu.right-list ul {padding: 0;} #navbar-collapse-main.in .main-menu.left-list ul {padding: 0;} } @media(max-width:991px) { .mobile-button { vertical-align:middle; } .mobile-button .navbar-toggle {float:none;} } @media(max-width:767px){ .mobile-button .navbar-toggle{margin-right: 0;padding: 0;width:65px;} } @media(max-width:375px){ .mobile-button .navbar-toggle{width: 69px;} #navbar-top .navbar-nav {margin-left: 0;padding-top: 16px;} #navbar-top .navbar-nav > li {width: 27px;height: 27px;margin-left: 0px;position:relative;z-index:8; } } #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;} .enLink { display: inline-block;vertical-align: middle;margin-right: 20px;font-size: 90%;background: #ffffff;border-radius: 50%;width: 37px;height: 37px;position: relative; } .enLink span { position: absolute;color: #515153;top: 50%;left: 50%;transform: translate(-50%,-50%);-webkit-transform:translate(-50%,-50%); } .navbar-default .navbar-toggle:not(.collapsed) + a.enLink { background: #B3BFAD; } @media(max-width:767px){ .enLink { margin-right: 5px;width: 27px;height: 27px;font-size:82%; } .navbar-default .mobile-button { width:33%; } .navbar-default .mobile-button { direction:rtl; } } @media(max-width:360px){ .enLink { margin-right: 0px; } }