body { min-width: 320px; }

.sf-menu, .sf-menu * { list-style: outside none none; padding: 0; /*font-family: 'Raleway', verdana, 'Trebuchet MS', Helvetica, Arial, sans-serif; font-weight: 400;*/ }
.sf-menu li { position: relative; z-index: 700; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.sf-menu ul { display: none; left: 0; position: absolute; top: 100%; }
.sf-menu > li { float: left; }
.desktop .sf-menu li:hover > ul, .desktop  .sf-menu li.sfHover > ul { display: block; }

.sf-menu a { display: block; position: relative; }
.sf-menu ul ul { left: 100%; top: 0; }
.sf-menu > li { border-left: 1px solid #fff; border-right: 1px solid #fff; text-align: center; white-space: nowrap; letter-spacing: -.02em; }

	.sf-menu li#nav-recipes, .sf-menu li#nav-giving {/*width: 15%;*/ width: 12.66666%;}
	.sf-menu li#nav-frozen, .sf-menu li#nav-drinks, .sf-menu li#nav-about, .sf-menu li#nav-new, .sf-menu li#nav-nation { /*width: 13.33333%;*/ width: 12.66666%; }
	.sf-menu li#nav-community, .sf-menu li#nav-product-discovery {/* width: 17%;*/ width: 24%; }
    .sf-menu li#nav-buy {width: 17%; }
	
.sf-menu li:first-child { border-left: medium none; }
.sf-menu li:last-child { border-right: medium none; }
/*.desktop*/ .sf-menu li:hover { background: #fdb728; }
.sf-menu li:hover { transition: background 0.2s ease 0s; }
.sf-menu a { color: #900028; font-size: 0.75em; font-weight: 400; padding: 1em 0; text-decoration: none; }
/*.desktop*/ .sf-menu > a:hover { background-color: #fdb728; text-decoration: underline; transition: background 0.2s ease 0s; }
.sf-menu ul { background: none repeat scroll 0 0 #fdb728; box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3); line-height: 1em; margin: 0; min-width: 12em; padding: 0.5em 0; }
.sf-menu ul li { background: none repeat scroll 0 0 #fdb728; padding: .125em 1.5em; text-align: left; border-top: 1px solid #fdb728; border-bottom: 1px solid #fdb728;}
	.sf-menu ul li:hover { background: none repeat scroll 0 0 #fecd69; border-top: 1px solid #dfb45c; border-bottom: 1px solid #feda90;}

.sf-menu ul li a { background-color: none; border: medium none; color: #000; font-size: 1.0625em; font-weight: 400; margin: 0; padding: 0.5em 0; }
.sf-menu ul li a:hover { background-color: none; color: #900028; text-decoration: underline; }
	li#nav-community ul { margin-left: -5em; }
.sf-menu li#nav-about ul {left:auto; right: 0;}
.mobile #nav-wrapper .sf-menu li a.active { background: #fdb728; }
.mobile .sf-menu ul { /*opacity: 0; visibility: hidden; height: 0;*/ }
.mobile .sf-menu ul.open { opacity: 1; visibility: visible; height: auto; display: block; }

#nav-wrapper .collapse-button {top: 0; right: 0; width: 100%; height: 100%; background: #007f61 url(/images/menu-btn.png) no-repeat center center; -webkit-transform: none; -moz-transform: none; transform: none; border-radius: 0; border-left: solid 2px rgba(255,255,255,0.1);}
#nav-wrapper .menu-collapser.open .collapse-button {background: #f9dc94 url(/images/ico-close.png) no-repeat center center;}
#nav-wrapper .collapse-button .icon-bar {display: none;}
.sf-menu .sub-toggle {position: absolute; top: 0; right: 0; width: 36px; height: 42px; background: url(/images/ico-arrow-right.png) no-repeat center center; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s;}
.sf-menu .sub-toggle.expanded {-webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); transform: rotate(90deg);}
.sf-menu .sub-toggle > i {font-style: normal; font-size: 0;}
.sf-menu ul li a > i {display: none;}

@media all and (min-width: 480px) {
	.sf-menu .sub-toggle {display: none;}
}

.masthead-container { z-index:  99999; position: relative; }
.masthead-container .logo { /*bottom: auto; top: 0px;*/ z-index: 99;  }
.location { color: #fcf4e1; display: block; font-size: 12px; font-weight: 600; line-height: 1.33; position: relative; width: 255px; z-index: 999; }
	.lt-ie9 .location { font-size: 10px; }
.location:hover > a { box-shadow: none; }

.location > a { background: none repeat scroll 0 0 #007f61; border-radius: 0 0 7px 7px; box-shadow: 0 3px 2px rgba(0, 0, 0, 0.4); display: block; overflow: hidden; padding: 20px; position: relative; z-index: 1; }
.location > a:hover { text-decoration: none; }
.location-ico, .location-content { float: left; }
.location-content { padding: 2px 0 2px 12px; width: 168px; }
.location-text, .location-area { display: block; color: #fff; }
.location-text { color: #fcf4e1; font-size: .9375em; }
.location-area { font-size: 15px; line-height: 1.25; text-transform: uppercase; }
	.lt-ie9 .location-area { font-size: 13px }
.location-arrow { background: url('/images/dropdown-location-arrow.png') no-repeat 0 0; display: block; height: 8px; position: absolute;  width: 14px; }
.location .dropdown-body { background: #007f61; font-weight: 500; left: 0; margin-top: -7px; padding: 17px 25px 20px 28px; right: 0; }

.list-locations { font-weight: 400; line-height: 1.25; list-style: outside none none; margin-right: -7px; padding: 19px 0 20px; }
.list-locations li { overflow: hidden; }
.list-locations li + li { margin-top: 15px; }
.list-locations li > div { width: 50%; }
.list-locations .alignleft { float: left; }
.list-locations .alignright { color: #fff; float: right;  padding-top: 2px; text-align: right; }
.list-locations a { font-weight: 700; color: #fff; text-decoration: underline; }
.list-locations a:hover { color: #f9dc94; text-decoration: none; }

.mobile-menu { border-left: 2px solid #1b8f6d; display: none; padding-bottom: 11px; padding-top: 16px; position: absolute; right: 0; text-align: center; top: 0; width: 66px; z-index: 4; }
.mobile-menu a:hover { text-decoration: none; }
.mobile-menu span { display: block; }
.mobile-menu-border { border-bottom: 4px solid #fff; border-top: 11px double #fff; height: 3px; margin: 0 auto; width: 26px; }
.mobile-menu-caption { color: #fff; font-family: "Roboto",sans-serif; font-size: 9px; padding-top: 1px; text-transform: uppercase; }

.form-location { margin: 0 -1px 0 -3px; }
.form-location input { /*background: none repeat scroll 0 0 transparent;*/ border: 0 none; border-radius: 0; display: block; /*font-family: "Raleway",sans-serif;*/ line-height: 1; }
.form-location input + input { margin-top: 8px; }
.form-location .field { background: none repeat scroll 0 0 #a7d3a7; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.31) inset; color: #fff; font-size: 14px; font-weight: 500; height: 39px; padding: 14px 11px 11px; width: 100%; }
.form-location .field { box-sizing: border-box; }
.form-location .field::-webkit-input-placeholder { color: #fff; font-size: 12px; font-style: italic; }

.form-location .field:-moz-placeholder { color: #fff; font-size: 12px; font-style: italic; }

.form-location .field::-moz-placeholder  { color: #fff; font-size: 12px; font-style: italic; }

.form-location .field:-ms-input-placeholder { color: #fff; font-size: 12px; font-style: italic; }

/*
	.form-location .form-btn { color: #004736; cursor: pointer; font-size: 16px; font-weight: 600; height: 38px; width: 100%; }
	.form-location .form-btn { background: linear-gradient(to bottom, #f9f1de 0%, #f9ebc7 24%, #fad779 78%, #fad164 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); }
	.form-location .form-btn:hover { background: linear-gradient(to bottom, #fad164 0%, #fad779 22%, #f9ebc7 76%, #f9f1de 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); }
*/

/* Location */
.location { position: relative; right: 0; left: 0; width: auto; }
.location > a { padding-top: 12px; padding-bottom: 8px; border-radius: 0; box-shadow: none; }
.location-arrow { top: 37px; right: auto; left: 50%; margin-left: -7px; }
.location .dropdown-body { margin-top: 0; }
.mobile .location-mobile-open .dropdown-body { display: block; }
.form-location .field { text-align: center; }
.location-arrow { right: 35%; left: auto; }
.dropdown-body, .dropdown-arrow { display: none; }
.close-menu { display: none; }

	/* 480px/16px = 30em */
	 @media all and (min-width: 480px) {
	.location > a { padding-top: 5px; padding-bottom: 3px;}
	.sf-menu a {padding: 1.25em 0; font-size:.75em;}
	.sf-menu ul li a {font-size:.75em;}
	}
	/* 580px/16px = 36.25em */
	 @media all and (min-width: 580px) {
	.sf-menu a {font-size:1.0em;}
	.sf-menu ul li a {font-size:1.0em;}
	}
	/* 700px/16px = 43.75em */
	 @media all and (min-width: 700px) {
	li#nav-community ul {margin-left: -4em;}
	.sf-menu a {padding: 1.4em 0; font-size:1.125em;}
	}
	 @media all and (min-width: 750px) {
    .sf-menu li#nav-about ul {right:auto; left: 0;}
    }
	/* 800px/16px = 50em */
	 @media all and (min-width: 800px) {
	li#nav-community ul {margin-left: 0em;}
	}

.desktop .dropdown-body, .dropdown-arrow { left: 50%; position: absolute; top: 100%; display: none !important;  }
.desktop .dropdown-body { width: 100%; left: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.desktop .dropdown:hover .dropdown-body,
.desktop .dropdown:hover .dropdown-arrow { display: block !important; }
.desktop .location-arrow { right: 27px; top: auto; bottom: 10px; }
.mobile .location-arrow { right: 27px; top: auto; bottom: 15px; }

.nav-button { display: none; font-size: 0; }

@media (max-width: 479px) { 
	/* Mobile Navigation */
    .wrapper { overflow: hidden; }
	#nav-wrapper { border-top: 0; position: absolute; right: 0; top: 0; display: block; z-index: 9999; width: 60px; padding: 0; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; }
	#nav-wrapper.open { right: 0; position: absolute; top: 0; bottom: 0;}
	#nav-wrapper .menu-collapser {background: none; height: 60px;}
	body .wrapper { width: 100%; /**/-webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; position: relative; left: 0; }
	body.body-left { overflow-x: hidden; }
	body.body-left .wrapper { 
		/*left: -240px;*/ width: 100%;
		-webkit-transform: translateX(-240px); -moz-transform: translateX(-240px); -ms-transform: translateX(-240px); -o-transform: translateX(-240px); transform: translateX(-240px); 
		 padding-right: 240px; 
		}
	.masthead-container { z-index: 99; }
	#main-nav { background: transparent; border-bottom: 0; border-top: 0; }
	
	#nav-wrapper .sf-menu > li { white-space: initial; }
	#nav-wrapper .sf-menu li a { text-decoration: none; color: #ad0831; display: block; font-size: 18px; font-weight: 600; height: 40px; padding: 0; line-height: 40px; padding-left: 19px; }
	#nav-wrapper .sf-menu > li a { transition: background-color 0.5s ease 0s; }
	#nav-wrapper .sf-menu > ul > li:hover a { background: transparent; box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.18) inset; }

	#top-nav { width: 280px; margin-left: -220px; }
	.sf-menu ul { display: none; position: relative; height: auto; background: none repeat scroll 0 0 #fdb728; box-shadow: 0 3px 2px rgba(0, 0, 0, 0.4); display: block; left: 0; top: auto; margin-bottom: -1px; text-align: left; }
    .sidebar-menu > li:hover ul { background: transparent; box-shadow: none; display: block; position: relative; width: auto; top: auto; }
   	#nav-wrapper .sf-menu li ul li { border: 0; padding-bottom: 6px; }
   	#nav-wrapper .sf-menu li ul li a { color: #000; font-size: 17px; line-height: 1.59; height: auto; /*font-weight: normal; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;*/ border: 0;  }
	#nav-wrapper .sf-menu li a.active { background: #fdb728; }
	#nav-wrapper .sf-menu li a.dd { position: relative; }
	#nav-wrapper .sf-menu li a.dd:after { content: ''; position: absolute; right: 18px; top: 50%; margin-top: -7px; background: url('/images/ico-arrow-right.png') no-repeat 0 0; width: 9px; height: 15px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; }
	#nav-wrapper .sf-menu li a.dd.active:after { -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); }
	.sf-menu li#nav-shop, .sf-menu li#nav-fun, .sf-menu li#nav-products, .sf-menu li#nav-recipes, .sf-menu li#nav-blog,  .sf-menu li#nav-stuff, .sf-menu li#nav-community { width: 100% !important; -webkit-box-sizing: border-box;  -moz-box-sizing: border-box; box-sizing: border-box; float: none !important; display: block !important; text-align: left !important; border-left: 0 !important; width: 100% !important; display: block; float: none; border: 0; text-align: left; border-bottom: 1px solid #e7ca80; border-top: 1px solid #f8e1aa; left: 0; position: relative; top: 0; }
	.sf-menu ul,
   	.sf-menu ul li ul { padding: 0; width: 100%; }
   	li#nav-community ul { margin: 0; padding: 0; width: 100%; }
	.sf-menu ul.open { display: block; }
	.close-menu { position: relative; cursor: pointer; display: block; color: #d9b867; height: 60px; line-height: 60px; padding-left: 19px; border-bottom: 1px solid #e7ca80; }
	.close-menu:hover { background: #fdb728; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; color: #ad0831; }
	.close-menu .text { font-weight: bold; font-size: 18px; font-weight: 600; }
	.close-menu .ico-close { background: url('/images/ico-close.png') no-repeat 0 0; width: 23px; height: 23px; position: absolute; right: 20px; top: 18px; }
	.nav-button { display: block; background: #007f61 url('/images/menu-btn.png') no-repeat 0 0; position: absolute; right: 0; top: 0; width: 68px; height: 58px; z-index: 9999999; cursor: pointer; }
	.mobile #nav-wrapper .sf-menu li { width: 100% !important; display: block; float: none; border: 0; text-align: left; border-bottom: 1px solid #e7ca80; border-top: 1px solid #f8e1aa; left: 0; position: relative; top: 0; }
	.mobile #nav-wrapper .sf-menu li ul li { padding: 6px 0; border-top: 1px solid #fdb728; border-bottom: 1px solid #fdb728; }
		.mobile #nav-wrapper .sf-menu li ul li:hover { border-top: 1px solid #dfb45c; border-bottom: 1px solid #feda90; }
	.location-arrow { right: 27px !important; top: auto; bottom: 15px; }

	#top-nav.top-nav-open { -webkit-animation: repaint .1s; animation: repaint .1s; }
	.masthead-container { width: auto;  position: relative !important; }
	body { overflow-x: hidden; }
	body .location-arrow { right: 92px !important; position: absolute; }
	.mobile .location-arrow { right: 92px !important; position: absolute; }
	#masthead { position: static; }
	.location a { text-decoration: none; }
}

/* iOS 6 fix */
@-webkit-keyframes repaint {
	from { width: 99.999%; }
	to { width: 100%; }
}
@keyframes repaint {
	from { width: 99.999%; }
	to { width: 100%; }
}