@import url("https://fonts.googleapis.com/css?family=Roboto:400,900");
@font-face {
  font-family: "Roboto";
  src: url("https://fonts.googleapis.com/css?family=Roboto:400,700"); }

@font-face {
  font-family: "Cooper Hewitt Semibold";
  src: url("../fonts/CooperHewitt-Semibold.woff") format("woff"); }

@font-face {
  font-family: "Cooper Hewitt";
  src: url("../fonts/CooperHewitt-Book.woff") format("woff"); }

@font-face {
  font-family: "Cooper Hewitt Medium";
  src: url("../fonts/CooperHewitt-Medium.woff") format("woff"); }

@font-face {
  font-family: "Cooper Hewitt Heavy";
  src: url("../fonts/CooperHewitt-Heavy.woff") format("woff"); }

@font-face {
  font-family: "Cooper Hewitt Heavy Italic";
  src: url("../fonts/CooperHewitt-HeavyItalic.woff") format("woff"); }

.navMenu, .navMenuMobile {
  background: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  z-index: 1001; }

.navBox {
  position: fixed;
  width: 100%;
  z-index: 5000;
  max-height: 100vh;
  box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.19), 1px 2px 6px rgba(0, 0, 0, 0.23); }
  @media (max-width: 767px) {
    .navBox {
      overflow-y: scroll; } }

.navBoxHome {
  position: fixed;
  width: 100%;
  z-index: 5000;
  max-height: 100vh;
  box-shadow: none; }
  @media (max-width: 767px) {
    .navBoxHome {
      overflow-y: scroll; } }

.navMenuHome.homeMenuActive {
  background: #ffffff; }

.navAlert {
  width: 100%;
  background: #f8d000;
  padding: 10px 25px;
  display: flex;
  justify-content: space-between;
  align-items: center; }
  .navAlert .navAlertText {
    width: 100%;
    color: #1e1e1e; }
    .navAlert .navAlertText p {
      font-family: "Cooper Hewitt Medium";
      margin: 0;
      font-size: 11px; }
  .navAlert .navAlertClose {
    width: 10%;
    color: #1e1e1e;
    text-align: right; }

.navMenuHome {
  z-index: 1001;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  background: none;
  color: #ffffff; }
  .navMenuHome ul {
    align-items: center;
    justify-self: end;
    color: #ffffff;
    display: flex; }

.navMenu.productsClicked, .navMenuHome.productsClickedHome {
  transition: 0s;
  border-bottom: 6px solid #f8d000;
  box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.19), 1px 2px 6px rgba(0, 0, 0, 0.23); }
  .navMenu.productsClicked .barWrapper, .navMenuHome.productsClickedHome .barWrapper {
    background: #ffffff; }
  .navMenu.productsClicked .homeLogo, .navMenuHome.productsClickedHome .homeLogo {
    fill: #1e1e1e; }
  .navMenu.productsClicked .homeUnderline, .navMenuHome.productsClickedHome .homeUnderline {
    color: #1e1e1e; }
  .navMenu.productsClicked .homeUnderline:hover, .navMenuHome.productsClickedHome .homeUnderline:hover {
    border-bottom: 2px solid #1e1e1e; }

.navMenu.productsClicked, .navMenuHome.productsClickedHome {
  height: 100vh;
  max-height: 1000px;
  background: linear-gradient(white, rgba(255, 255, 255, 0.2)), url("../img/white-waves.png") repeat; }
  .navMenu.productsClicked .productMenuGrid, .navMenuHome.productsClickedHome .productMenuGrid {
    display: flex;
    opacity: 1; }
  .navMenu.productsClicked .menuTexture, .navMenuHome.productsClickedHome .menuTexture {
    position: absolute;
    width: 50%;
    height: 100%;
    z-index: 100;
    opacity: .3;
    mix-blend-mode: overlay; }
    .navMenu.productsClicked .menuTexture img, .navMenuHome.productsClickedHome .menuTexture img {
      height: 100%; }
  .navMenu.productsClicked .menuTextureLeft, .navMenuHome.productsClickedHome .menuTextureLeft {
    transform: scaleX(-1);
    left: 0; }
    .navMenu.productsClicked .menuTextureLeft img, .navMenuHome.productsClickedHome .menuTextureLeft img {
      position: absolute;
      right: 0; }
  .navMenu.productsClicked .menuTextureRight, .navMenuHome.productsClickedHome .menuTextureRight {
    right: 0; }
    .navMenu.productsClicked .menuTextureRight img, .navMenuHome.productsClickedHome .menuTextureRight img {
      position: absolute;
      right: 0; }
  .navMenu.productsClicked .menuCategoryHeader, .navMenuHome.productsClickedHome .menuCategoryHeader {
    display: flex;
    opacity: 0;
    width: 100%;
    object-fit: initial;
    position: absolute;
    justify-content: center;
    background-blend-mode: multiply;
    height: 100%; }
    .navMenu.productsClicked .menuCategoryHeader .menuCategoryProduct, .navMenuHome.productsClickedHome .menuCategoryHeader .menuCategoryProduct {
      position: relative;
      z-index: 101;
      height: 80%;
      padding: 0 2%;
      align-self: center;
      opacity: 0;
      transform: translate(-100px); }
    .navMenu.productsClicked .menuCategoryHeader .sweetsShrink, .navMenuHome.productsClickedHome .menuCategoryHeader .sweetsShrink {
      height: 70% !important; }
    .navMenu.productsClicked .menuCategoryHeader .menuCategoryProduct.fadeLeft, .navMenuHome.productsClickedHome .menuCategoryHeader .menuCategoryProduct.fadeLeft {
      transition: 1s;
      opacity: 1;
      transform: translate(0px); }
    .navMenu.productsClicked .menuCategoryHeader .menuCategoryCaption, .navMenuHome.productsClickedHome .menuCategoryHeader .menuCategoryCaption {
      max-width: 500px;
      z-index: 10;
      padding: 0 2%;
      color: #ffffff;
      text-align: left;
      align-self: center;
      top: 50%;
      font-size: 2rem;
      opacity: 0;
      transform: translate(100px); }
      .navMenu.productsClicked .menuCategoryHeader .menuCategoryCaption h2, .navMenuHome.productsClickedHome .menuCategoryHeader .menuCategoryCaption h2 {
        font-family: "Cooper Hewitt Heavy";
        font-family: "Cooper Hewitt Heavy"; }
        @media (min-width: 1501px) {
          .navMenu.productsClicked .menuCategoryHeader .menuCategoryCaption h2, .navMenuHome.productsClickedHome .menuCategoryHeader .menuCategoryCaption h2 {
            font-size: 5rem;
            line-height: 5.5rem; } }
        @media (max-width: 1500px) {
          .navMenu.productsClicked .menuCategoryHeader .menuCategoryCaption h2, .navMenuHome.productsClickedHome .menuCategoryHeader .menuCategoryCaption h2 {
            font-size: 4rem;
            line-height: 4.7rem; } }
        @media (max-width: 1300px) {
          .navMenu.productsClicked .menuCategoryHeader .menuCategoryCaption h2, .navMenuHome.productsClickedHome .menuCategoryHeader .menuCategoryCaption h2 {
            font-size: 3rem;
            line-height: 3.5rem; } }
        @media (max-width: 1000px) {
          .navMenu.productsClicked .menuCategoryHeader .menuCategoryCaption h2, .navMenuHome.productsClickedHome .menuCategoryHeader .menuCategoryCaption h2 {
            font-size: 3rem;
            line-height: 3.5rem; } }
        @media (max-width: 767px) {
          .navMenu.productsClicked .menuCategoryHeader .menuCategoryCaption h2, .navMenuHome.productsClickedHome .menuCategoryHeader .menuCategoryCaption h2 {
            font-size: 2.5rem;
            line-height: 2.8rem; } }
        @media (max-width: 575px) {
          .navMenu.productsClicked .menuCategoryHeader .menuCategoryCaption h2, .navMenuHome.productsClickedHome .menuCategoryHeader .menuCategoryCaption h2 {
            font-size: 2rem;
            line-height: 2.3rem; } }
        @media (max-width: 420px) {
          .navMenu.productsClicked .menuCategoryHeader .menuCategoryCaption h2, .navMenuHome.productsClickedHome .menuCategoryHeader .menuCategoryCaption h2 {
            font-size: 2rem;
            line-height: 2.3rem; } }
      .navMenu.productsClicked .menuCategoryHeader .menuCategoryCaption h3, .navMenuHome.productsClickedHome .menuCategoryHeader .menuCategoryCaption h3 {
        font-size: 1.25rem;
        font-family: "Cooper Hewitt";
        line-height: 1.7rem; }
      @media (max-width: 1000px) {
        .navMenu.productsClicked .menuCategoryHeader .menuCategoryCaption, .navMenuHome.productsClickedHome .menuCategoryHeader .menuCategoryCaption {
          max-width: 400px; }
          .navMenu.productsClicked .menuCategoryHeader .menuCategoryCaption h2, .navMenuHome.productsClickedHome .menuCategoryHeader .menuCategoryCaption h2 {
            font-size: 2rem !important; } }
    .navMenu.productsClicked .menuCategoryHeader .menuCategoryCaption.fadeRight, .navMenuHome.productsClickedHome .menuCategoryHeader .menuCategoryCaption.fadeRight {
      opacity: 1;
      transition: 1s;
      transform: translate(0px); }
  .navMenu.productsClicked .menuCategoryContainer, .navMenuHome.productsClickedHome .menuCategoryContainer {
    display: flex;
    flex-grow: 1;
    overflow: hidden;
    position: relative;
    border-top: 6px solid #f8d000; }
  .navMenu.productsClicked .defaultCategoryHeader, .navMenuHome.productsClickedHome .defaultCategoryHeader {
    opacity: 1;
    display: flex;
    align-items: center;
    align-self: flex-end !important;
    background: linear-gradient(#1e1e1e, #1e1e1e), url("../img/white-waves.png") repeat; }
    .navMenu.productsClicked .defaultCategoryHeader img, .navMenuHome.productsClickedHome .defaultCategoryHeader img {
      width: 50%;
      height: 50%;
      max-width: 500px; }
  .navMenu.productsClicked .organicsCategoryHeader, .navMenuHome.productsClickedHome .organicsCategoryHeader {
    background: linear-gradient(#5e0f8b, #5e0f8b), url("../img/white-waves.png") repeat; }
  .navMenu.productsClicked .premiumCategoryHeader, .navMenuHome.productsClickedHome .premiumCategoryHeader {
    background: linear-gradient(#6a213f, #6a213f), url("../img/white-waves.png") repeat; }
  .navMenu.productsClicked .classicCategoryHeader, .navMenuHome.productsClickedHome .classicCategoryHeader {
    background: linear-gradient(#aa182c, #aa182c), url("../img/white-waves.png") repeat; }
  .navMenu.productsClicked .gfCategoryHeader, .navMenuHome.productsClickedHome .gfCategoryHeader {
    background: linear-gradient(#161d59, #161d59), url("../img/white-waves.png") repeat; }
  .navMenu.productsClicked .bunsCategoryHeader, .navMenuHome.productsClickedHome .bunsCategoryHeader {
    background: linear-gradient(#aa182c, #aa182c), url("../img/white-waves.png") repeat; }
  .navMenu.productsClicked .bagelsCategoryHeader, .navMenuHome.productsClickedHome .bagelsCategoryHeader {
    background: linear-gradient(#aa182c, #aa182c), url("../img/white-waves.png") repeat; }
  .navMenu.productsClicked .muffinsCategoryHeader, .navMenuHome.productsClickedHome .muffinsCategoryHeader {
    background: linear-gradient(#161d59, #161d59), url("../img/white-waves.png") repeat; }
  .navMenu.productsClicked .sweetsCategoryHeader, .navMenuHome.productsClickedHome .sweetsCategoryHeader {
    background: linear-gradient(#d7006e, #d7006e), url("../img/white-waves.png") repeat; }

.menuCategoryContainer {
  display: none; }

.navMenuHomeMobile.mobileMenuClicked {
  border-bottom: 6px solid #f8d000;
  box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.19), 1px 2px 6px rgba(0, 0, 0, 0.23); }
  .navMenuHomeMobile.mobileMenuClicked .barWrapper {
    background: #ffffff; }
  .navMenuHomeMobile.mobileMenuClicked .homeLogo {
    fill: #1e1e1e; }
  .navMenuHomeMobile.mobileMenuClicked .mobileMenu {
    display: flex;
    opacity: 1; }
  .navMenuHomeMobile.mobileMenuClicked .menuToggleHome i {
    color: #1e1e1e !important; }

.productMenuGridMobile.mobileProductsClicked {
  display: flex;
  opacity: 1; }

.productMenuGridHomeMobile.mobileProductsClickedHome {
  display: flex;
  opacity: 1; }

.navMenuHomeMobile {
  z-index: 1001;
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%; }
  .navMenuHomeMobile .navbar-brand .logo {
    align-self: center; }
  .navMenuHomeMobile .menuRight {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding-right: 3%; }
    .navMenuHomeMobile .menuRight .menuToggleHome {
      align-self: center;
      justify-self: end; }
      .navMenuHomeMobile .menuRight .menuToggleHome i {
        color: #ffffff;
        font-size: 2rem; }

.navMenu {
  border-bottom: 6px solid #f8d000;
  color: #1e1e1e; }
  .navMenu ul {
    align-items: center;
    justify-self: end;
    color: #1e1e1e;
    display: flex; }

.navMenuMobile {
  border-bottom: 6px solid #f8d000;
  flex-direction: column;
  top: -1px; }
  .navMenuMobile .navbar-brand .logo {
    align-self: center; }
  .navMenuMobile .menuRight a {
    align-self: center; }
  .navMenuMobile .menuRight a:hover {
    text-decoration: none; }
  .navMenuMobile .menuRight .menuToggleHome i {
    color: #1e1e1e;
    align-self: center; }

@media (max-width: 767px) {
  .navMenuHome {
    display: none; } }

@media (min-width: 768px) {
  .navMenuHomeMobile {
    display: none; } }

.barWrapper {
  align-items: center;
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 70px;
  align-self: center;
  z-index: 1001; }

.menuRight {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 20px; }
  .menuRight .menuToggle {
    align-self: center;
    justify-self: flex-end; }
    .menuRight .menuToggle i {
      color: #1e1e1e;
      font-size: 2rem; }
    .menuRight .menuToggle .nav-link {
      line-height: 1; }
  .menuRight .menuToggleHome {
    align-self: center;
    justify-self: flex-end; }
    .menuRight .menuToggleHome i {
      color: #ffffff;
      font-size: 2rem; }
    .menuRight .menuToggleHome .nav-link {
      line-height: 1; }
  .menuRight .menuCategory {
    font-family: "Cooper Hewitt Heavy";
    padding-top: 5px;
    align-self: center;
    text-transform: uppercase; }
    @media (min-width: 1501px) {
      .menuRight .menuCategory {
        font-size: 3rem;
        line-height: 3.5rem; } }
    @media (max-width: 1500px) {
      .menuRight .menuCategory {
        font-size: 3rem;
        line-height: 3.5rem; } }
    @media (max-width: 1300px) {
      .menuRight .menuCategory {
        font-size: 2.5rem;
        line-height: 2.8rem; } }
    @media (max-width: 1000px) {
      .menuRight .menuCategory {
        font-size: 2.5rem;
        line-height: 2.8rem; } }
    @media (max-width: 767px) {
      .menuRight .menuCategory {
        font-size: 2rem;
        line-height: 2.3rem; } }
    @media (max-width: 575px) {
      .menuRight .menuCategory {
        font-size: 1.5rem;
        line-height: 1.8rem; } }
    @media (max-width: 420px) {
      .menuRight .menuCategory {
        font-size: 1.5rem;
        line-height: 1.8rem; } }
    @media (max-width: 375px) {
      .menuRight .menuCategory {
        font-size: 1.25rem; } }

@media (max-width: 767px) {
  .navMenu {
    display: none; } }

@media (min-width: 768px) {
  .navMenuMobile {
    display: none; } }

#mobileMenuPage, #mobileMenuPageHome {
  line-height: 1;
  font-size: 1.25rem;
  height: min-content; }

.mobileMenu {
  display: none;
  flex-direction: column;
  top: 70px;
  background: linear-gradient(white, rgba(255, 255, 255, 0.4)), url("../img/white-waves.png") repeat; }
  @media (min-width: 768px) {
    .mobileMenu {
      display: none !important; } }
  .mobileMenu ul {
    width: 100%;
    font-size: 2rem; }

.menuLeft {
  margin: 0 !important;
  width: 100%; }

@media (min-width: 992px) {
  .navbar-expand-lg {
    justify-content: space-between; } }

.logo.logoFill {
  -webkit-transition: fill .2s ease-in, width .2s ease-in;
  -moz-transition: fill .2s ease-in, width .2s ease-in;
  -o-transition: fill .2s ease-in, width .2s ease-in;
  transition: fill .2s ease-in, width .2s ease-in;
  width: 125px;
  fill: #1e1e1e;
  vertical-align: middle;
  display: block; }

.navbar {
  -webkit-transition: background-color .5s ease-out, padding .2s ease-out;
  -moz-transition: background-color .5s ease-out, padding .2s ease-out;
  -o-transition: background-color .5s ease-out, padding .2s ease-out;
  transition: background-color .5s ease-out, padding .2s ease-out;
  display: flex;
  background-color: rgba(255, 255, 255, 0) !important;
  padding: 3% 1%; }
  .navbar .navigation {
    justify-content: flex-end;
    font-size: 1.5rem; }
    .navbar .navigation .navbar-nav {
      width: 70%; }

.navMenuHome.barScrolling, .navMenuHomeMobile.barScrolling {
  -webkit-transition: background-color .2s ease-in, padding .2s ease-in;
  -moz-transition: background-color .2s ease-in, padding .2s ease-in;
  -o-transition: background-color .2s ease-in, padding .2s ease-in;
  transition: background-color .2s ease-in, padding .2s ease-in;
  background-color: white !important;
  border-bottom: 6px solid #f8d000;
  top: -1px; }
  .navMenuHome.barScrolling .menuRight .menuToggleHome, .navMenuHomeMobile.barScrolling .menuRight .menuToggleHome {
    line-height: 1; }
    .navMenuHome.barScrolling .menuRight .menuToggleHome i, .navMenuHomeMobile.barScrolling .menuRight .menuToggleHome i {
      color: #1e1e1e; }
  .navMenuHome.barScrolling .homeLogo, .navMenuHomeMobile.barScrolling .homeLogo {
    fill: #1e1e1e !important; }

.navbarBack {
  background-color: #ffffff !important;
  padding: 1%;
  box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.19), 1px 2px 6px rgba(0, 0, 0, 0.23); }

.nav-item {
  flex-grow: 10; }
  .nav-item a span:hover {
    border-bottom: 2px solid #1e1e1e;
    transition: .2s; }
  @media (max-width: 767px) {
    .nav-item {
      border-top: 1px solid #dddddd;
      padding: 0; } }
  @media (max-height: 570px) {
    .nav-item {
      padding: 3px 0; } }

.menuItem.linkScrolling {
  color: #1e1e1e !important; }

.productsTriangle, .contactTriangle {
  margin-left: 5px;
  transition: .2s;
  display: inline-block; }

.productsTriangle.productsClicked, .contactTriangle.productsClicked {
  transform: rotate(180deg);
  transition: .2s; }

.nav-link {
  font-size: 1.1rem;
  color: #ffffff;
  cursor: pointer !important;
  font-family: "Cooper Hewitt Medium";
  font-weight: 700;
  text-decoration: none !important; }
  @media (max-width: 767px) {
    .nav-link {
      font-size: 1.5rem;
      font-family: "Cooper Hewitt Heavy";
      text-align: center; } }

.nav-link.homeLinkActive {
  color: #1e1e1e; }

.homeUnderline.hu:hover {
  border-bottom: 2px solid #ffffff !important;
  transition: .2s; }

.homeUnderline:hover {
  border-bottom: 2px solid #1e1e1e;
  transition: .2s; }

.menuUnderline:hover {
  border-bottom: 2px solid #1e1e1e;
  transition: .2s; }

.homeUnderline.whiteText {
  color: #ffffff; }

html {
  height: 100%;
  min-height: 100%;
  width: 100%; }

body {
  font-family: 'Cooper Hewitt';
  width: 100%;
  height: 100%;
  min-height: 100%; }

.belowNav {
  padding-top: 76px;
  width: 100%;
  display: inline-block;
  margin-bottom: 374px;
  position: relative;
  z-index: 100;
  background: #ffffff; }
  @media (max-width: 767px) {
    .belowNav {
      margin-bottom: 400px; } }
  @media (max-width: 575px) {
    .belowNav {
      margin-bottom: 0; } }

.indexContainer {
  overflow: hidden;
  display: inline-block;
  margin-bottom: 366px;
  position: relative;
  background: #ffffff;
  width: 100%;
  z-index: 100; }
  @media (max-width: 767px) {
    .indexContainer {
      margin-bottom: 410px; } }
  @media (max-width: 575px) {
    .indexContainer {
      margin-bottom: 0; } }

.youtubeVideo {
  width: 100%; }

.p0 {
  padding: 0% !important; }

.paddingYSmall {
  padding: 10px 0 20px 0; }

.noDecoration {
  text-decoration: none !important; }

.noDecoration:hover {
  text-decoration: none !important; }

.tdNone:hover {
  text-decoration: none; }

.fullWidth {
  width: 100%; }

.center {
  align-self: center;
  padding: 0 5px; }

.bold {
  font-weight: bold; }

.dark {
  color: #1e1e1e !important;
  background: none !important; }

.twoColGrid {
  display: flex; }
  .twoColGrid div {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-right: 20px; }
  @media (max-width: 767px) {
    .twoColGrid {
      flex-direction: column; }
      .twoColGrid div {
        width: 100%; } }

.threeColGrid {
  display: flex; }
  .threeColGrid div {
    width: 33.3%;
    padding-right: 10px; }
  @media (max-width: 767px) {
    .threeColGrid {
      flex-direction: column; }
      .threeColGrid div {
        width: 100%; } }

h1 {
  font-family: "Cooper Hewitt Heavy";
  text-align: left; }
  @media (min-width: 1501px) {
    h1 {
      font-size: 5rem;
      line-height: 5.5rem; } }
  @media (max-width: 1500px) {
    h1 {
      font-size: 4rem;
      line-height: 4.7rem; } }
  @media (max-width: 1300px) {
    h1 {
      font-size: 3rem;
      line-height: 3.5rem; } }
  @media (max-width: 1000px) {
    h1 {
      font-size: 3rem;
      line-height: 3.5rem; } }
  @media (max-width: 767px) {
    h1 {
      font-size: 2.5rem;
      line-height: 2.8rem; } }
  @media (max-width: 575px) {
    h1 {
      font-size: 2rem;
      line-height: 2.3rem; } }
  @media (max-width: 420px) {
    h1 {
      font-size: 2rem;
      line-height: 2.3rem; } }
  @media (min-width: 1001px) {
    h1 {
      font-size: 5rem;
      line-height: 5.5rem; } }

h2 {
  font-family: "Cooper Hewitt Heavy";
  font-family: "Cooper Hewitt Heavy"; }
  @media (min-width: 1501px) {
    h2 {
      font-size: 3rem;
      line-height: 3.5rem; } }
  @media (max-width: 1500px) {
    h2 {
      font-size: 3rem;
      line-height: 3.5rem; } }
  @media (max-width: 1300px) {
    h2 {
      font-size: 2.5rem;
      line-height: 2.8rem; } }
  @media (max-width: 1000px) {
    h2 {
      font-size: 2.5rem;
      line-height: 2.8rem; } }
  @media (max-width: 767px) {
    h2 {
      font-size: 2rem;
      line-height: 2.3rem; } }
  @media (max-width: 575px) {
    h2 {
      font-size: 1.5rem;
      line-height: 1.8rem; } }
  @media (max-width: 420px) {
    h2 {
      font-size: 1.5rem;
      line-height: 1.8rem; } }

h3 {
  font-family: "Cooper Hewitt Heavy"; }
  @media (min-width: 1501px) {
    h3 {
      font-size: 3rem;
      line-height: 3.5rem; } }
  @media (max-width: 1500px) {
    h3 {
      font-size: 3rem;
      line-height: 3.5rem; } }
  @media (max-width: 1300px) {
    h3 {
      font-size: 2.5rem;
      line-height: 2.8rem; } }
  @media (max-width: 1000px) {
    h3 {
      font-size: 2.5rem;
      line-height: 2.8rem; } }
  @media (max-width: 767px) {
    h3 {
      font-size: 2rem;
      line-height: 2.3rem; } }
  @media (max-width: 575px) {
    h3 {
      font-size: 1.5rem;
      line-height: 1.8rem; } }
  @media (max-width: 420px) {
    h3 {
      font-size: 1.5rem;
      line-height: 1.8rem; } }

h4 {
  font-family: "Cooper Hewitt Medium";
  font-family: "Cooper Hewitt Semibold"; }
  @media (min-width: 1501px) {
    h4 {
      font-size: 2.5rem;
      line-height: 2.8rem; } }
  @media (max-width: 1500px) {
    h4 {
      font-size: 2rem;
      line-height: 2.3rem; } }
  @media (max-width: 1300px) {
    h4 {
      font-size: 1.5rem;
      line-height: 1.8rem; } }
  @media (max-width: 1000px) {
    h4 {
      font-size: 1.5rem;
      line-height: 1.8rem; } }
  @media (max-width: 767px) {
    h4 {
      font-size: 1rem;
      line-height: 1.2rem; } }
  @media (max-width: 575px) {
    h4 {
      font-size: 1rem;
      line-height: 1.2rem; } }
  @media (max-width: 420px) {
    h4 {
      font-size: 1rem;
      line-height: 1.2rem; } }

h5 {
  font-family: "Cooper Hewitt";
  font-family: "Cooper Hewitt Semibold"; }
  @media (min-width: 1501px) {
    h5 {
      font-size: 1.5rem;
      line-height: 1.8rem; } }
  @media (max-width: 1500px) {
    h5 {
      font-size: 1.5rem;
      line-height: 1.8rem; } }
  @media (max-width: 1300px) {
    h5 {
      font-size: 1.25rem;
      line-height: 1.5rem; } }
  @media (max-width: 1000px) {
    h5 {
      font-size: 1.25rem;
      line-height: 1.5rem; } }
  @media (max-width: 767px) {
    h5 {
      font-size: 1rem;
      line-height: 1.2rem; } }
  @media (max-width: 575px) {
    h5 {
      font-size: 1rem;
      line-height: 1.2rem; } }
  @media (max-width: 420px) {
    h5 {
      font-size: .75rem;
      line-height: 1rem; } }

a {
  text-decoration: none;
  color: #1e1e1e; }

.boldLink {
  font-family: "Cooper Hewitt Semibold";
  text-decoration: none; }

.boldLink:hover {
  color: #f8d000 !important;
  transition: .3s; }

a:hover {
  text-decoration: none; }

p a, li a {
  text-decoration: underline; }

p a:hover, li a:hover {
  color: #f8d000;
  transition: .3s; }

ul {
  margin: 0;
  padding-left: 0;
  list-style-type: none; }

.italic {
  font-style: italic; }

.darkText {
  color: #1e1e1e !important; }

.logo {
  width: 125px;
  align-self: center;
  vertical-align: middle; }

.logo.logoActive {
  fill: #1e1e1e; }

.hidden {
  display: none; }

.bigLogo {
  width: 50vw;
  max-width: 500px;
  margin: 0px auto;
  padding-bottom: 4%; }
  .bigLogo img {
    filter: drop-shadow(0px 10px 20px rgba(0, 0, 0, 0.23)); }
  @media (max-width: 767px) {
    .bigLogo {
      width: 50vw; } }

.logoDark {
  fill: #1e1e1e !important; }

@media (min-width: 768px) {
  .mobileFooterLinkHome {
    display: none !important; } }

.desktopFooterLinkHome {
  cursor: pointer; }
  @media (max-width: 767px) {
    .desktopFooterLinkHome {
      display: none !important; } }

.darkButton, .lightButton, .yellowButton {
  padding: 0px;
  border-radius: 30px;
  display: inline-block;
  margin: 5% 0%;
  z-index: 1000; }

.darkButton {
  background: #1e1e1e; }

.lightButton {
  background: #ffffff; }

.yellowButton {
  background: #f8d000; }

.yellowButton:hover {
  background: #ffffff;
  transition: .2s; }

.darkButton:hover, .lightButton:hover {
  background: #f8d000;
  transition: .2s; }
  .darkButton:hover .buttonText, .darkButton:hover .darkButtonText, .lightButton:hover .buttonText, .lightButton:hover .darkButtonText {
    color: #1e1e1e;
    cursor: pointer; }

.darkButtonText, .lightButtonText, .yellowButtonText {
  font-size: 1.5rem;
  font-family: "Cooper Hewitt Heavy";
  padding: 15px 20px 10px 20px;
  margin: 0;
  line-height: 1; }
  @media (max-width: 575px) {
    .darkButtonText, .lightButtonText, .yellowButtonText {
      font-size: 1rem; } }

.darkButtonText {
  color: #ffffff; }

.lightButtonText, .yellowButtonText {
  color: #1e1e1e; }

.buttonText:hover {
  text-decoration: none;
  color: #f8d000;
  cursor: pointer; }

.darkButtonText:hover, .yellowButtonText:hover {
  cursor: pointer; }

.covidBox {
  background: #f8d000;
  border: 5px solid #ffffff;
  padding: 20px;
  margin-left: 30px; }
  .covidBox p {
    color: #1e1e1e;
    padding-left: 0 !important; }
    .covidBox p a:hover {
      color: #ffffff !important; }

.line {
  border-bottom: 5px solid #262626; }

.fixedHeader {
  font-family: "Cooper Hewitt Heavy";
  text-align: center !important;
  color: #ffffff;
  padding: 0%; }
  @media (min-width: 1501px) {
    .fixedHeader {
      font-size: 5rem;
      line-height: 5.5rem; } }
  @media (max-width: 1500px) {
    .fixedHeader {
      font-size: 4rem;
      line-height: 4.7rem; } }
  @media (max-width: 1300px) {
    .fixedHeader {
      font-size: 3rem;
      line-height: 3.5rem; } }
  @media (max-width: 1000px) {
    .fixedHeader {
      font-size: 3rem;
      line-height: 3.5rem; } }
  @media (max-width: 767px) {
    .fixedHeader {
      font-size: 2.5rem;
      line-height: 2.8rem; } }
  @media (max-width: 575px) {
    .fixedHeader {
      font-size: 2rem;
      line-height: 2.3rem; } }
  @media (max-width: 420px) {
    .fixedHeader {
      font-size: 2rem;
      line-height: 2.3rem; } }

.shadow {
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); }

.careersSubhead {
  text-align: center !important;
  color: #ffffff;
  padding: 0% 15% 3% 15%;
  width: 100%;
  font-family: "Cooper Hewitt Heavy"; }
  @media (min-width: 1501px) {
    .careersSubhead {
      font-size: 3rem;
      line-height: 3.5rem; } }
  @media (max-width: 1500px) {
    .careersSubhead {
      font-size: 3rem;
      line-height: 3.5rem; } }
  @media (max-width: 1300px) {
    .careersSubhead {
      font-size: 2.5rem;
      line-height: 2.8rem; } }
  @media (max-width: 1000px) {
    .careersSubhead {
      font-size: 2.5rem;
      line-height: 2.8rem; } }
  @media (max-width: 767px) {
    .careersSubhead {
      font-size: 2rem;
      line-height: 2.3rem; } }
  @media (max-width: 575px) {
    .careersSubhead {
      font-size: 1.5rem;
      line-height: 1.8rem; } }
  @media (max-width: 420px) {
    .careersSubhead {
      font-size: 1.5rem;
      line-height: 1.8rem; } }

.tagline {
  display: flex;
  z-index: 1;
  flex-direction: column;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  justify-content: center; }
  @media (max-width: 767px) {
    .tagline {
      padding-top: 5%; } }

.tagline.taglineFade {
  opacity: 0;
  -webkit-transition: opacity .2s ease-in;
  -moz-transition: opacity .2s ease-in;
  -o-transition: opacity .2s ease-in;
  transition: opacity .2s ease-in; }

@keyframes imageAnimation {
  0% {
    opacity: 0;
    animation-timing-function: ease-in; }
  8% {
    opacity: 1;
    transform: scale(1.05);
    animation-timing-function: ease-out; }
  17% {
    opacity: 1;
    transform: scale(1.1); }
  25% {
    opacity: 0;
    transform: scale(1.1); }
  100% {
    opacity: 0; } }

@-webkit-keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@-moz-keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

.fade-in {
  opacity: 0;
  /* make things invisible upon start */
  -webkit-animation: fadeIn ease-in 1;
  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  -moz-animation: fadeIn ease-in 1;
  animation: fadeIn ease-in 1;
  -webkit-animation-fill-mode: forwards;
  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-duration: 2s;
  -moz-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-delay: 0.25s;
  -moz-animation-delay: 0.25s;
  animation-delay: 0.25s; }

@-webkit-keyframes fadeOut {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

@-moz-keyframes fadeOut {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

@keyframes fadeOut {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

.tagline.fade-out {
  opacity: 1;
  /* make things invisible upon start */
  -webkit-animation: fadeOut ease-in 1;
  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  -moz-animation: fadeOut ease-in 1;
  animation: fadeOut ease-in 1;
  -webkit-animation-fill-mode: backwards;
  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  -moz-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
  -webkit-animation-duration: .2s;
  -moz-animation-duration: .2s;
  animation-duration: .2s; }

.containerContent {
  width: 50%;
  align-self: center; }
  @media (max-width: 575px) {
    .containerContent {
      width: 60%; } }

.containerCopy {
  font-family: "Cooper Hewitt";
  padding-top: 10px;
  margin-bottom: 0px; }
  @media (min-width: 1501px) {
    .containerCopy {
      font-size: 1.5rem;
      line-height: 1.8rem; } }
  @media (max-width: 1500px) {
    .containerCopy {
      font-size: 1.5rem;
      line-height: 1.8rem; } }
  @media (max-width: 1300px) {
    .containerCopy {
      font-size: 1.25rem;
      line-height: 1.5rem; } }
  @media (max-width: 1000px) {
    .containerCopy {
      font-size: 1.25rem;
      line-height: 1.5rem; } }
  @media (max-width: 767px) {
    .containerCopy {
      font-size: 1rem;
      line-height: 1.2rem; } }
  @media (max-width: 575px) {
    .containerCopy {
      font-size: 1rem;
      line-height: 1.2rem; } }
  @media (max-width: 420px) {
    .containerCopy {
      font-size: .75rem;
      line-height: 1rem; } }

.homeContainer {
  padding: 12% 8%;
  display: flex;
  z-index: 500;
  position: relative;
  width: 100%; }

.logoBox {
  height: 100%;
  z-index: 499; }
  .logoBox img {
    width: 100%;
    height: 100%;
    padding: 30% 15%; }

.logoBoxMontana {
  cursor: default !important;
  height: 100%;
  z-index: 499; }
  .logoBoxMontana img {
    width: 100%;
    height: 100%;
    padding: 30% 15%; }

.logoBox:hover {
  background: #f8d000;
  transition: .3s; }

a:hover .logoBox:hover {
  background: #f8d000; }

.brandsFlex {
  padding: 10px;
  width: 100%;
  background: #1e1e1e;
  display: flex;
  flex-wrap: wrap;
  align-self: center; }
  .brandsFlex a {
    width: 16.6%; }
    @media (max-width: 767px) {
      .brandsFlex a {
        width: 33.3%; } }

.section1 {
  padding: 10% 8%;
  background: url("../img/homeProductsBackground.jpg") no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  z-index: 1000; }
  .section1 .right {
    justify-content: center; }
    .section1 .right img {
      max-width: 200px;
      width: 100%;
      height: 100%; }
  .section1 h2, .section1 h5 {
    color: #ffffff; }
  @media (max-width: 767px) {
    .section1 {
      background-position-x: 50% !important; } }

#leftArrow.deadEnd, #rightArrow.deadEnd {
  color: #dddddd;
  cursor: default; }

.franzSupportsTeachers {
  background: url("../img/section0.jpg") no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  padding: 7% 8%;
  z-index: 1000;
  display: flex;
  justify-content: center;
  background-position: center;
  text-align: center; }
  .franzSupportsTeachers .containerContent {
    width: 82% !important; }

.sogLogo {
  width: 80%;
  height: 80%;
  max-width: 400px;
  margin: 0px auto; }

.section2 {
  background: url("../img/homeRecipesBackground.jpg") no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  z-index: 1000; }
  @media (max-width: 767px) {
    .section2 {
      background-position-x: 50%; } }

.section3 {
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5)), url("../img/section3.jpg");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  z-index: 1000;
  color: #f8d000; }

.regionalBrands {
  position: relative;
  padding: 20px;
  width: 100%;
  background: #1e1e1e;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  z-index: 100;
  text-align: center;
  color: #ffffff; }
  .regionalBrands .brandsHeader {
    padding: 30px 30px 0 30px;
    width: 100%;
    justify-content: center;
    margin: 0px auto;
    width: 100%;
    max-width: 1200px; }
  .regionalBrands .brands {
    display: flex;
    flex-wrap: wrap;
    padding: 15px 0 0 0;
    margin: 0px auto;
    width: 100%;
    max-width: 1200px; }
    .regionalBrands .brands a {
      width: 16.6%; }
      @media (max-width: 767px) {
        .regionalBrands .brands a {
          width: 33.3%; } }

.instagramFeed {
  position: relative;
  background: #ffffff;
  z-index: 1000;
  width: 100%;
  max-width: 1200px;
  margin: 0px auto;
  padding: 6%;
  display: flex;
  flex-direction: row; }
  @media (max-width: 767px) {
    .instagramFeed {
      flex-direction: column-reverse;
      flex-wrap: wrap; } }
  .instagramFeed .instagramGrid {
    width: 50%;
    display: flex;
    flex-direction: column; }
    @media (max-width: 767px) {
      .instagramFeed .instagramGrid {
        width: 100%;
        padding: 10px 0 0 0;
        flex-direction: column-reverse; } }
    .instagramFeed .instagramGrid .instagramIconsContainer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 0 0 0; }
      @media (max-width: 767px) {
        .instagramFeed .instagramGrid .instagramIconsContainer {
          padding: 0 0 20px 0; } }
      .instagramFeed .instagramGrid .instagramIconsContainer .instagramIconLine {
        height: 2px;
        width: 100%;
        background: #1e1e1e; }
      .instagramFeed .instagramGrid .instagramIconsContainer .instagramIcons {
        display: flex;
        flex-direction: row;
        padding: 0 10px; }
        @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
          .instagramFeed .instagramGrid .instagramIconsContainer .instagramIcons {
            width: 100%; } }
        .instagramFeed .instagramGrid .instagramIconsContainer .instagramIcons .instagramIconFacebook, .instagramFeed .instagramGrid .instagramIconsContainer .instagramIcons .instagramIconInstagram {
          width: 50px;
          height: 50px;
          margin: 0 5px; }
  .instagramFeed .socialInput {
    width: 50%; }
    @media (max-width: 575px) {
      .instagramFeed .socialInput {
        width: 100%; } }
  .instagramFeed .instagramText {
    width: 50%;
    padding-left: 30px; }
    @media (max-width: 767px) {
      .instagramFeed .instagramText {
        width: 100%;
        padding: 0;
        display: flex;
        flex-direction: column; } }
  @media (max-width: 420px) {
    .instagramFeed .stats-overlay {
      font-size: 14px; } }

.light {
  color: #ffffff !important; }

.right {
  display: flex;
  justify-content: flex-end;
  float: right; }

.instaText img {
  width: 60px;
  padding-right: 10px;
  cursor: pointer; }

.snapwidget-widget {
  z-index: 499; }

.icon {
  font-size: 3rem; }

.link {
  text-decoration: none;
  color: #262626; }

.link:hover {
  color: #ffffff; }

.franzFanz {
  width: 100%;
  height: 100%;
  background: #f8d000; }
  @media (max-width: 767px) {
    .franzFanz {
      display: none !important; } }

.franzFanzTitle {
  text-align: center; }
  @media (max-width: 767px) {
    .franzFanzTitle {
      display: none; } }

.fanzImages {
  width: 30%;
  display: flex; }
  .fanzImages img {
    width: 100%;
    object-fit: cover; }

.fanzCopyContainer {
  display: flex;
  flex-direction: column;
  width: 40%;
  background: #f8d000;
  padding: 50px 50px 10px 50px;
  align-items: center;
  -webkit-clip-path: polygon(50% 8%, 100% 0, 100% 100%, 0 100%, 0 0);
  clip-path: polygon(50% 8%, 100% 0, 100% 100%, 0 100%, 0 0); }

.commentOuterBox {
  display: flex;
  width: 100%;
  background: #ffffff;
  justify-content: center;
  max-height: 300px; }

.commentInnerBox {
  margin: 0 !important; }

.commentContent {
  height: 100% !important;
  background: none !important; }

.commentCopy {
  font-size: 1rem; }

.heroTitle {
  background: #262626;
  color: #ffffff;
  padding: 0% 10%;
  justify-content: start; }

.heroTitle h2 {
  align-self: end;
  font-family: "Peace Sans"; }
  @media (min-width: 1501px) {
    .heroTitle h2 {
      font-size: 4rem;
      line-height: 4.7rem; } }
  @media (max-width: 1500px) {
    .heroTitle h2 {
      font-size: 3rem;
      line-height: 3.5rem; } }
  @media (max-width: 1300px) {
    .heroTitle h2 {
      font-size: 2.5rem;
      line-height: 2.8rem; } }
  @media (max-width: 1000px) {
    .heroTitle h2 {
      font-size: 2.5rem;
      line-height: 2.8rem; } }
  @media (max-width: 767px) {
    .heroTitle h2 {
      font-size: 2rem;
      line-height: 2.3rem; } }
  @media (max-width: 575px) {
    .heroTitle h2 {
      font-size: 2rem;
      line-height: 2.3rem; } }
  @media (max-width: 420px) {
    .heroTitle h2 {
      font-size: 2rem;
      line-height: 2.3rem; } }
  @media (max-width: 575px) {
    .heroTitle h2 {
      display: none; } }

.heroTitle h5 {
  align-self: start;
  font-family: "Cooper Hewitt Medium"; }
  @media (min-width: 1501px) {
    .heroTitle h5 {
      font-size: 2.5rem;
      line-height: 2.8rem; } }
  @media (max-width: 1500px) {
    .heroTitle h5 {
      font-size: 2rem;
      line-height: 2.3rem; } }
  @media (max-width: 1300px) {
    .heroTitle h5 {
      font-size: 1.5rem;
      line-height: 1.8rem; } }
  @media (max-width: 1000px) {
    .heroTitle h5 {
      font-size: 1.5rem;
      line-height: 1.8rem; } }
  @media (max-width: 767px) {
    .heroTitle h5 {
      font-size: 1rem;
      line-height: 1.2rem; } }
  @media (max-width: 575px) {
    .heroTitle h5 {
      font-size: 1rem;
      line-height: 1.2rem; } }
  @media (max-width: 420px) {
    .heroTitle h5 {
      font-size: 1rem;
      line-height: 1.2rem; } }
  @media (max-width: 575px) {
    .heroTitle h5 {
      font-size: 1rem;
      line-height: 1.25rem;
      padding: 3% 0% 0% 0%; } }

.imgBorder {
  border: solid 10px #262626;
  align-self: center;
  max-width: 100%; }
  @media (max-width: 575px) {
    .imgBorder {
      border: none; } }

.productsHover {
  display: inline-block !important;
  cursor: pointer !important;
  align-items: center; }

.productMenuGridMobile, .productMenuGridHomeMobile {
  display: none;
  opacity: 0;
  flex-wrap: wrap;
  height: 100%;
  z-index: 2000;
  width: 100%; }
  .productMenuGridMobile a, .productMenuGridHomeMobile a {
    display: flex;
    justify-content: center;
    width: 33.3%;
    text-decoration: none;
    color: #1e1e1e; }
  .productMenuGridMobile a:hover, .productMenuGridHomeMobile a:hover {
    text-decoration: none; }

.productMenuGrid {
  display: none;
  opacity: 0;
  min-height: 200px;
  max-height: 465px;
  flex-wrap: wrap;
  z-index: 2000;
  width: 100%; }
  .productMenuGrid a {
    display: flex;
    justify-content: center;
    text-decoration: none;
    color: #1e1e1e;
    margin: 0px auto;
    width: 25%;
    max-height: 100%; }
    @media (min-width: 946px) {
      .productMenuGrid a {
        width: 12.5%; } }
  .productMenuGrid a:hover {
    text-decoration: none; }
  @media (max-width: 767px) {
    .productMenuGrid {
      display: none !important; } }

.productCategory {
  display: flex;
  flex-direction: column;
  justify-items: center;
  justify-content: flex-end;
  padding: 15px 0;
  height: 100%;
  width: 100%;
  max-width: 125px;
  align-items: center; }
  .productCategory h5 {
    font-size: 1rem;
    text-align: center;
    padding: 5px 0 0 0;
    font-family: "Cooper Hewitt Semibold";
    line-height: 1;
    margin: 0;
    opacity: .7; }
    @media (max-width: 355px) {
      .productCategory h5 {
        font-size: .8rem; } }
  .productCategory img {
    width: 75%;
    margin: 0px auto;
    max-width: 125px; }

.menuHover:hover {
  transition: 0s; }

@media (min-width: 768px) {
  .productMenuGrid:hover > .menuHover {
    opacity: .5; }
  .productMenuGrid:hover > .menuHover:hover {
    opacity: 1; }
  .productMenuGridMobile:hover > .menuHover {
    opacity: .5; }
  .productMenuGridMobile:hover > .menuHover:hover {
    opacity: 1; }
  .productMenuGridMobile:hover > a .menuHover {
    opacity: .5; }
  .productMenuGridMobile:hover > a .menuHover:hover {
    opacity: 1; } }

.supplierContainer {
  padding-bottom: 20px; }

.photoCredit {
  font-size: .5rem;
  font-style: italic; }

.categoryHeader {
  padding: 20px 10px 5px 10px;
  justify-content: center;
  position: sticky;
  top: 75px;
  z-index: 100000;
  background: #ffffff;
  font-family: "Cooper Hewitt Heavy" !important;
  text-align: center;
  margin-bottom: 0px; }
  .categoryHeader h2 {
    font-family: "Cooper Hewitt Heavy"; }
    @media (min-width: 1501px) {
      .categoryHeader h2 {
        font-size: 3rem;
        line-height: 3.5rem; } }
    @media (max-width: 1500px) {
      .categoryHeader h2 {
        font-size: 3rem;
        line-height: 3.5rem; } }
    @media (max-width: 1300px) {
      .categoryHeader h2 {
        font-size: 2.5rem;
        line-height: 2.8rem; } }
    @media (max-width: 1000px) {
      .categoryHeader h2 {
        font-size: 2.5rem;
        line-height: 2.8rem; } }
    @media (max-width: 767px) {
      .categoryHeader h2 {
        font-size: 2rem;
        line-height: 2.3rem; } }
    @media (max-width: 575px) {
      .categoryHeader h2 {
        font-size: 1.5rem;
        line-height: 1.8rem; } }
    @media (max-width: 420px) {
      .categoryHeader h2 {
        font-size: 1.5rem;
        line-height: 1.8rem; } }
  @media (max-width: 767px) {
    .categoryHeader {
      top: 75px; }
      .categoryHeader h2 {
        font-size: 1.5rem; } }

.categoryGrid {
  padding-bottom: 20px;
  max-width: 1300px;
  margin: 0px auto;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  background: #ffffff;
  position: relative;
  z-index: 10000; }
  .categoryGrid a {
    border-left: 1px solid #eeeeee;
    border-right: 1px solid #eeeeee;
    margin: 10px 0;
    width: 25%;
    max-width: 350px; }
    @media (max-width: 767px) {
      .categoryGrid a {
        width: 33.3%; } }
    @media (max-width: 420px) {
      .categoryGrid a {
        width: 50%; } }

.seasonalItem {
  margin: 0;
  justify-content: center;
  font-family: "Cooper Hewitt Semibold";
  font-size: 1rem;
  color: #1e1e1e;
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  line-height: 1; }
  @media (max-width: 767px) {
    .seasonalItem {
      display: none; } }

.categoryGridSweets {
  padding-bottom: 20px;
  width: 100%;
  max-width: 1300px;
  margin: 0px auto;
  display: flex;
  flex-wrap: wrap;
  background-color: #ffffff; }
  .categoryGridSweets a {
    width: 33.3%;
    max-width: 433px;
    border-left: 1px solid #dddddd; }
    @media (max-width: 767px) {
      .categoryGridSweets a {
        width: 50%; } }

.outOfSeason {
  opacity: .5; }

.categoryItem {
  overflow: hidden;
  position: relative;
  cursor: pointer;
  padding: 10px !important;
  display: flex !important;
  justify-content: center;
  background-color: #ffffff;
  flex-direction: column; }
  @media (max-width: 767px) {
    .categoryItem {
      flex-direction: column-reverse !important; } }
  .categoryItem img {
    max-width: 100%; }
    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
      .categoryItem img {
        height: 100%; } }
  .categoryItem h5 {
    display: none; }
    @media (max-width: 767px) {
      .categoryItem h5 {
        display: block;
        font-size: 1rem;
        text-align: center; } }

.sweets {
  padding: 25% 5% !important; }

.overlayText {
  font-family: "Cooper Hewitt Heavy";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  color: #ffffff;
  cursor: pointer; }
  @media (max-width: 499px) {
    .overlayText {
      font-size: 1.25rem !important;
      line-height: 1.5rem; } }
  @media (min-width: 500px) and (max-width: 599px) {
    .overlayText {
      font-size: 1.5rem !important;
      line-height: 1.8rem; } }
  @media (min-width: 600px) and (max-width: 1050px) {
    .overlayText {
      font-size: 2rem !important;
      line-height: 2.25rem; } }
  @media (min-width: 1051px) and (max-width: 1200px) {
    .overlayText {
      font-size: 2.5rem !important;
      line-height: 3rem; } }
  @media (min-width: 1201px) {
    .overlayText {
      font-size: 3rem !important;
      line-height: 3.4rem; } }

.overlayColor {
  transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
  /* Safari + Chrome */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  transition: .3s;
  cursor: pointer; }
  @media (max-width: 767px) {
    .overlayColor {
      display: none; } }

.container:hover img {
  transition: .3s;
  -webkit-transform: scale(1.1);
  /* Safari + Chrome */
  -moz-transform: scale(1.1);
  /* Firefox */
  -ms-transform: scale(1.1);
  /* IE 9 */
  -o-transform: scale(1.1);
  /* Opera */
  transform: scale(1.1); }

.container:hover .overlayColor {
  transition: .5s;
  -webkit-transform: translateX(0);
  /* Safari + Chrome */
  -moz-transform: scaleY(1);
  /* Firefox */
  -ms-transform: scaleY(1);
  /* IE 9 */
  -o-transform: scaleY(1);
  /* Opera */
  transform: translateX(0); }

.container:hover .pink {
  opacity: 1;
  background-color: rgba(215, 0, 110, 0.9); }

.container:hover .red {
  opacity: 1;
  background-color: rgba(170, 24, 44, 0.9); }

.container:hover .yellow {
  opacity: 1;
  background: rgba(248, 208, 0, 0.9); }

.container:hover .orange {
  opacity: 1;
  background: rgba(193, 82, 25, 0.9); }

.container:hover .coral {
  opacity: 1;
  background: rgba(255, 77, 0, 0.9); }

.container:hover .lime {
  opacity: 1;
  background: rgba(179, 221, 62, 0.9); }

.container:hover .green {
  opacity: 1;
  background: rgba(15, 75, 47, 0.9); }

.container:hover .teal {
  opacity: 1;
  background: rgba(1, 115, 134, 0.9); }

.container:hover .lightBlue {
  opacity: 1;
  background: rgba(58, 99, 153, 0.9); }

.container:hover .blue {
  opacity: 1;
  background: rgba(22, 29, 89, 0.9); }

.container:hover .purple {
  opacity: 1;
  background: rgba(94, 15, 139, 0.9); }

.container:hover .cranberry {
  opacity: 1;
  background: rgba(103, 38, 102, 0.9); }

.container:hover .maroon {
  opacity: 1;
  background: rgba(106, 33, 63, 0.9); }

.container:hover .brown {
  opacity: 1;
  background: rgba(117, 57, 28, 0.9); }

.container:hover .gray {
  opacity: 1;
  background: rgba(30, 30, 30, 0.9); }

.bgWhite {
  background: #ffffff;
  color: #1e1e1e !important; }

.bgDark {
  background: #1e1e1e;
  color: #ffffff !important; }

.bgPink {
  background: #d7006e;
  color: #ffffff !important; }

.bgRed {
  background: #aa182c;
  color: #ffffff !important; }

.bgOrange {
  background: #c15219;
  color: #ffffff !important; }

.bgCoral {
  background: #ff4d00;
  color: #ffffff !important; }

.bgLime {
  background: #b3dd3e;
  color: #1e1e1e !important; }

.bgYellow {
  background: #f8d000;
  color: #1e1e1e !important; }

.bgGreen {
  background: #0f4b2f;
  color: #ffffff !important; }

.bgTeal {
  background: #017386;
  color: #ffffff !important; }

.bgBlue {
  background: #161d59;
  color: #ffffff !important; }

.bgPurple {
  background: #5e0f8b;
  color: #ffffff !important; }

.bgCranberry {
  background: #672666;
  color: #ffffff !important; }

.bgMaroon {
  background: #6a213f;
  color: #ffffff !important; }

.bgBrown {
  background: #75391c;
  color: #ffffff !important; }

.bgLightBlue {
  background: #3a6399;
  color: #ffffff !important; }

.bgDark {
  background: #1e1e1e;
  color: #ffffff !important; }

@-webkit-keyframes productShow {
  0% {
    transform: translateX(0); }
  48% {
    transform: translateX(-150%); }
  49% {
    opacity: 0;
    transform: translateX(150%); }
  50% {
    transform: translateX(150%); }
  51% {
    opacity: 1; }
  52% {
    transform: translateX(0%); } }

@-moz-keyframes productShow {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-o-keyframes productShow {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes nextProductMobile {
  0% {
    transform: translateX(0); }
  48% {
    transform: translateX(100vw); }
  49% {
    opacity: 0; }
  50% {
    transform: translateX(-150vw); }
  51% {
    opacity: 1; }
  100% {
    transform: translateX(0); } }

@keyframes nextProductDesktop {
  0% {
    transform: translateX(0); }
  47% {
    transform: translateX(50vw); }
  49% {
    opacity: 0; }
  50% {
    transform: translateX(-50vw); }
  51% {
    opacity: 1; }
  100% {
    transform: translateX(0); } }

@keyframes previousProductMobile {
  0% {
    transform: translateX(0); }
  48% {
    transform: translateX(-100vw); }
  49% {
    opacity: 0; }
  50% {
    transform: translateX(150vw); }
  51% {
    opacity: 1; }
  100% {
    transform: translateX(0); } }

@keyframes previousProductDesktop {
  0% {
    transform: translateX(0); }
  47% {
    transform: translateX(-50vw); }
  49% {
    opacity: 0; }
  50% {
    transform: translateX(50vw); }
  51% {
    opacity: 1; }
  100% {
    transform: translateX(0); } }

.productFlexbox {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%; }
  .productFlexbox .productImageContainer {
    justify-content: center;
    width: 50%;
    max-width: 767px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    padding: 10% 15px;
    top: 76px;
    background: #ffffff !important;
    color: #1e1e1e !important;
    position: sticky; }
    .productFlexbox .productImageContainer .productImage {
      width: 100%;
      height: 100%;
      max-width: 500px;
      max-height: 600px;
      object-fit: contain;
      justify-self: center; }
      @media (max-width: 767px) {
        .productFlexbox .productImageContainer .productImage {
          width: 50%;
          height: 80%; } }
    @media (max-width: 767px) {
      .productFlexbox .productImageContainer .productImage.nextProductMobile {
        -webkit-animation: nextProductMobile 1s;
        /* Safari 4+ */
        -moz-animation: nextProductMobile 1s;
        /* Fx 5+ */
        -o-animation: nextProductMobile 1s;
        /* Opera 12+ */
        animation: nextProductMobile 1s;
        /* IE 10+, Fx 29+ */ } }
    .productFlexbox .productImageContainer .productImage.nextProductDesktop {
      -webkit-animation: nextProductDesktop 1s;
      /* Safari 4+ */
      -moz-animation: nextProductDesktop 1s;
      /* Fx 5+ */
      -o-animation: nextProductDesktop 1s;
      /* Opera 12+ */
      animation: nextProductDesktop 1s;
      /* IE 10+, Fx 29+ */ }
    @media (max-width: 767px) {
      .productFlexbox .productImageContainer .productImage.previousProductMobile {
        -webkit-animation: previousProductMobile 1s;
        /* Safari 4+ */
        -moz-animation: previousProductMobile 1s;
        /* Fx 5+ */
        -o-animation: previousProductMobile 1s;
        /* Opera 12+ */
        animation: previousProductMobile 1s;
        /* IE 10+, Fx 29+ */ } }
    .productFlexbox .productImageContainer .productImage.previousProductDesktop {
      -webkit-animation: previousProductDesktop 1s;
      /* Safari 4+ */
      -moz-animation: previousProductDesktop 1;
      /* Fx 5+ */
      -o-animation: previousProductDesktop 1s;
      /* Opera 12+ */
      animation: previousProductDesktop 1s;
      /* IE 10+, Fx 29+ */ }
    @media (max-width: 767px) {
      .productFlexbox .productImageContainer .productImageSweets {
        width: 100% !important; } }
    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
      .productFlexbox .productImageContainer {
        height: auto;
        justify-content: flex-start; } }
    @media (max-width: 767px) {
      .productFlexbox .productImageContainer {
        width: 100%;
        position: relative;
        margin: 0px auto;
        padding: 3%;
        height: 40%;
        top: 0; } }
  .productFlexbox #valOldNutritional img {
    width: 100%;
    max-width: 250px;
    height: 100%; }
  .productFlexbox #valNewNutritional {
    width: 100%; }
  .productFlexbox .nutritional {
    width: 50%;
    flex-grow: 1;
    z-index: 100000;
    position: relative;
    max-height: 100%;
    min-height: 100vh;
    padding: 25px; }
    .productFlexbox .nutritional .nutritionalTitle {
      padding: 20px 0;
      margin: 0 !important;
      max-width: 767px; }
      @media (max-width: 767px) {
        .productFlexbox .nutritional .nutritionalTitle {
          text-align: center;
          padding: 0 0 20px 0; } }
    .productFlexbox .nutritional .ingredients {
      flex-direction: column;
      padding: 5% 0;
      display: none;
      font-size: 1rem;
      text-transform: uppercase; }
    @media (max-width: 767px) {
      .productFlexbox .nutritional {
        width: 100%;
        min-height: unset; } }
  @media (max-width: 767px) {
    .productFlexbox {
      flex-direction: column; } }

.cals {
  font-size: 1.5rem;
  font-family: "Cooper Hewitt Semibold"; }

.calsNumber {
  font-size: 2rem;
  justify-self: right;
  float: right;
  font-family: "Cooper Hewitt Semibold"; }

.nutritionalDisclaimer {
  font-style: italic;
  font-size: .9rem;
  padding: 25px 0 0 0;
  max-width: 767px; }

.nutritionFacts {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 5% 0;
  max-width: 767px;
  cursor: ns-resize; }
  .nutritionFacts ul li {
    font-size: 1rem;
    line-height: 1.75rem; }

.ingredients {
  flex-direction: column;
  max-width: 767px;
  overflow-y: scroll; }

#valProductIngredientsPrint {
  display: none; }

.nutritionFactsToggle, .nutritionFactsToggleDark, .bakeryToggleDark {
  border-radius: 50px 0 0 50px; }

.bakeryToggleDark {
  background: #1e1e1e; }

.ingredientsToggle, .ingredientsToggleDark, .outletToggleDark {
  border-radius: 0 50px 50px 0; }

.amountRight {
  text-align: right;
  float: right; }

.bold {
  font-family: "Cooper Hewitt Semibold" !important; }

.productDescription {
  max-width: 767px; }
  @media (max-width: 767px) {
    .productDescription p {
      text-align: center; } }

.productDescriptionLink {
  color: #ffffff;
  font-family: "Cooper Hewitt Semibold";
  text-decoration: none;
  font-size: 1.5rem; }
  @media (max-width: 420px) {
    .productDescriptionLink {
      font-size: 1rem; } }

.productDescriptionLinkDark {
  color: #1e1e1e;
  font-family: "Cooper Hewitt Semibold";
  text-decoration: none;
  font-size: 1.5rem; }
  @media (max-width: 420px) {
    .productDescriptionLinkDark {
      font-size: 1rem; } }

.productDescriptionLinkDark:hover {
  color: #1e1e1e !important; }

.ketoLink {
  color: #f8d000; }

.ketoLink:hover {
  color: #ffffff;
  transition: .5s; }

.gfDescriptionNote {
  font-size: .75rem;
  text-decoration: italic; }

.toggle {
  border-radius: 15px;
  height: 2.5rem;
  display: flex;
  flex-direction: row;
  cursor: pointer;
  z-index: 100;
  max-width: 350px; }
  @media (max-width: 767px) {
    .toggle {
      margin: 0px auto 25px auto;
      justify-content: center; } }

.blendDarken, .blendLighten {
  display: flex;
  cursor: pointer; }

.blendDarken {
  mix-blend-mode: darken; }

.blendLighten {
  mix-blend-mode: lighten; }

.togglePrint {
  display: flex;
  flex-direction: row;
  width: 100%; }
  @media (max-width: 767px) {
    .togglePrint {
      justify-content: center; } }

.printButton {
  display: flex;
  padding-left: 10px; }
  .printButton i {
    font-size: 2rem;
    align-self: center; }
  @media (max-width: 767px) {
    .printButton {
      display: none; } }

.innerToggle, .innerToggleDark {
  height: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  font-weight: bold;
  font-size: 1rem;
  align-items: center;
  font-family: "Cooper Hewitt Heavy";
  padding: 10px;
  color: #ffffff; }

.active {
  color: #1e1e1e;
  background: #ffffff;
  mix-blend-mode: lighten; }

.inactive {
  color: #ffffff;
  border: 2px solid #ffffff;
  mix-blend-mode: lighten; }

.activeDark {
  color: #ffffff;
  background: #1e1e1e; }

.inactiveDark {
  color: #1e1e1e;
  border: 2px solid #1e1e1e;
  background: none; }

.alignMiddle {
  align-self: center;
  justify-content: center;
  text-align: center;
  font-weight: bold; }

.control a i {
  color: #1e1e1e; }

.callOuts {
  margin: 4% 0 2% 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  justify-self: center;
  align-items: center;
  padding-top: 20px; }
  .callOuts img {
    max-width: 70px;
    max-height: 50px;
    justify-self: center;
    margin: 0 20px; }

.productControls {
  display: flex;
  justify-content: center;
  flex-direction: row;
  width: 100%;
  min-height: 50px; }
  .productControls .control {
    margin: 0 30px;
    height: 50px;
    cursor: pointer; }
  @media (max-width: 767px) {
    .productControls {
      height: 100%; } }
  .productControls .fas {
    font-size: 2.5rem; }

.thickDivider {
  width: 100%;
  height: 4px;
  background: #ffffff;
  margin: 20px 0; }

.thinDivider {
  width: 100%;
  height: 2px;
  background: #ffffff;
  margin: 8px 0; }

.thickDividerDark {
  width: 100%;
  border: 4px solid #1e1e1e;
  margin: 10px 0; }

.thinDividerDark {
  width: 100%;
  border: 1px solid #1e1e1e;
  margin: 5px 0; }

.belowHeader {
  z-index: 100;
  background: #ffffff;
  position: relative; }

.carouselEmployeeBio {
  width: 100%;
  display: flex;
  position: absolute;
  bottom: 5%;
  justify-content: space-around; }
  .carouselEmployeeBio .carouselEmployeeTag {
    max-width: 500px; }
  .carouselEmployeeBio .carouselEmployeeArrow {
    width: 0px;
    height: 0px;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-bottom: 20px solid #f8d000;
    margin: 0px auto;
    z-index: 100;
    position: relative; }
  .carouselEmployeeBio h4 {
    display: flex;
    justify-content: space-around;
    width: fit-content;
    background: #f8d000;
    padding: 10px 15px;
    text-align: center;
    border-radius: 50px;
    font-size: 1.25rem;
    box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.19), 1px 2px 6px rgba(0, 0, 0, 0.23);
    font-family: "Cooper Hewitt Semibold"; }
    @media (max-width: 767px) {
      .carouselEmployeeBio h4 {
        flex-wrap: wrap;
        font-size: 1rem; } }
    @media (max-width: 420px) {
      .carouselEmployeeBio h4 {
        font-size: .75rem;
        margin: 0 2px;
        border-radius: 0; } }
    .carouselEmployeeBio h4 span {
      font-family: "Cooper Hewitt Heavy";
      padding-right: 10px; }

.carousel-item {
  height: 75vh; }
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .carousel-item {
      max-height: 75vh;
      height: 100%; } }

.carouselGradient {
  background: linear-gradient(180deg, rgba(21, 13, 13, 0.7), rgba(0, 0, 0, 0));
  z-index: 100;
  width: 100%;
  height: 30%;
  position: absolute; }

.carouselImage {
  object-fit: cover !important;
  object-position: top;
  display: block;
  height: 100% !important;
  width: 100% !important; }

.carousel-control-next, .carousel-control-prev {
  z-index: 500; }

.headerOverlay {
  z-index: 1;
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0px auto;
  display: flex;
  flex-direction: column;
  justify-content: center; }

.careersBarText {
  font-size: 1.5rem;
  font-family: "Cooper Hewitt Semibold";
  font-weight: bold;
  width: 100%; }
  .careersBarText span {
    padding: 0 8%; }

.careerSubmenu {
  position: fixed;
  top: 75px;
  right: 0;
  padding: 15px;
  justify-content: flex-end;
  display: flex;
  z-index: 4000;
  float: right; }
  @media (max-width: 575px) {
    .careerSubmenu {
      background: #f8d000;
      bottom: 0;
      top: auto;
      padding: 0;
      width: 100%;
      height: 50px; }
      .careerSubmenu .center {
        height: 100%;
        display: flex;
        border-right: 2px solid #ffffff; }
      .careerSubmenu .careerSocialIcons {
        width: 30%;
        text-align: center;
        justify-content: space-evenly; }
        .careerSubmenu .careerSocialIcons a {
          color: #1e1e1e; }
      .careerSubmenu .openJobs, .careerSubmenu .kronosLogin {
        border-radius: 0px;
        padding: 0px;
        text-align: center; }
      .careerSubmenu .openJobsThird {
        width: 35%; }
      .careerSubmenu .kronosLoginThird {
        width: 35%; } }

.careersFooter {
  width: 100%;
  background: gainsboro;
  color: #1e1e1e;
  text-align: center;
  padding: 10px 0;
  margin-top: 20px; }
  .careersFooter a {
    font-family: "Cooper Hewitt Semibold"; }
  .careersFooter a:hover {
    color: #f8d000;
    transition: .3s; }

.openJobs, .kronosLogin {
  background: #f8d000;
  width: 100%;
  border-radius: 3px;
  color: #1e1e1e;
  font-size: 12px;
  align-self: center;
  font-family: "Cooper Hewitt Semibold";
  padding: 14px 10px 10px 10px;
  line-height: 12px;
  white-space: nowrap; }
  @media (max-width: 575px) {
    .openJobs, .kronosLogin {
      font-size: 14px; } }

@media (min-width: 550px) {
  .kronosLogin:hover {
    background: #1e1e1e;
    text-decoratxion: none !important;
    color: #ffffff;
    transition: .3s; } }

.careerSocialIcons {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 5px;
  font-size: 2.25rem;
  line-height: 0 !important; }
  .careerSocialIcons a {
    padding: 0 5px;
    color: #f8d000; }
  .careerSocialIcons a:hover {
    color: #1e1e1e;
    transition: .3s; }

.spotlightTitle {
  background: #ffffff;
  width: 100%;
  padding: 5% 0% 2% 0%; }
  .spotlightTitle h2 {
    color: #1e1e1e;
    margin: 0px auto;
    font-family: "Cooper Hewitt Heavy";
    text-align: center; }
    @media (min-width: 1501px) {
      .spotlightTitle h2 {
        font-size: 3rem;
        line-height: 3.5rem; } }
    @media (max-width: 1500px) {
      .spotlightTitle h2 {
        font-size: 3rem;
        line-height: 3.5rem; } }
    @media (max-width: 1300px) {
      .spotlightTitle h2 {
        font-size: 2.5rem;
        line-height: 2.8rem; } }
    @media (max-width: 1000px) {
      .spotlightTitle h2 {
        font-size: 2.5rem;
        line-height: 2.8rem; } }
    @media (max-width: 767px) {
      .spotlightTitle h2 {
        font-size: 2rem;
        line-height: 2.3rem; } }
    @media (max-width: 575px) {
      .spotlightTitle h2 {
        font-size: 1.5rem;
        line-height: 1.8rem; } }
    @media (max-width: 420px) {
      .spotlightTitle h2 {
        font-size: 1.5rem;
        line-height: 1.8rem; } }

.employeeSpotlight {
  z-index: 500;
  max-width: 1400px;
  margin: 0px auto;
  display: flex;
  flex-direction: row;
  width: 100%;
  background: #ffffff;
  flex-direction: row;
  padding: 2%;
  flex-wrap: wrap; }
  @media (max-width: 575px) {
    .employeeSpotlight {
      flex-direction: column;
      padding: 4%; } }

.employeeCard {
  display: flex;
  width: 25%;
  margin: 0px auto;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 0% 2% 2% 2%; }
  .employeeCard img {
    border-bottom: 6px solid #f8d000;
    width: 100%;
    justify-self: center; }
    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
      .employeeCard img {
        flex-shrink: 0; } }
    @media (max-width: 1000px) {
      .employeeCard img {
        margin: 0px auto;
        border-bottom: 0; } }
    @media (max-width: 1000px) {
      .employeeCard img {
        width: 33.3%;
        border-bottom: 6px solid #f8d000; } }
  @media (max-width: 1000px) {
    .employeeCard {
      width: 100%;
      flex-direction: row;
      align-items: flex-start;
      padding: 20px 0; } }

.employeeBio {
  padding-top: 20px;
  text-align: center; }
  .employeeBio h4 {
    margin-bottom: 0px;
    font-size: 1.5rem;
    line-height: 1;
    font-family: "Cooper Hewitt Heavy"; }
  .employeeBio h5 {
    font-size: 1rem; }
  @media (max-width: 1000px) {
    .employeeBio {
      border-top: 6px solid #f8d000; } }
  @media (max-width: 575px) {
    .employeeBio {
      border-top: 0;
      text-align: left;
      padding: 0 20px; } }
  .employeeBio p {
    border-top: 6px solid #f8d000;
    padding-top: 15px; }
    @media (max-width: 575px) {
      .employeeBio p {
        padding-top: 3px solid #f8d000; } }

.top {
  display: fixed;
  top: 90%;
  left: 50%; }

.careersNavLeft {
  display: flex;
  align-items: center; }

.careersNavRight {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 2rem; }

.employeeHeader {
  font-family: "Cooper Hewitt Semibold";
  font-size: 1.25rem;
  background: #ffffff;
  color: #1e1e1e;
  text-align: center;
  width: fit-content;
  justify-self: center;
  padding: 7px 10px; }

.employeeHeader:hover {
  text-decoration: none !important; }

.employeeButton {
  background: #f8d000;
  color: #1e1e1e;
  font-size: 1.25rem;
  font-family: "Cooper Hewitt Semibold";
  width: max-content;
  justify-self: center;
  padding: 7px 12px; }

.employeeButton:hover {
  background: #1e1e1e;
  border: 0px;
  color: #ffffff;
  transition: .5s; }

.videoSpotlight {
  display: flex;
  flex-direction: column;
  background: #f8d000;
  width: 100%;
  margin: 0px auto;
  padding: 30px 0; }

.careersVideo {
  justify-content: center;
  display: flex;
  height: 100%; }
  .careersVideo .yellowVideoAccent {
    background: #f8d000;
    height: 250px;
    position: absolute;
    align-self: center;
    width: 100%;
    z-index: 1; }
  .careersVideo video {
    width: 60%;
    z-index: 2;
    height: 100%;
    display: block;
    margin: 0px auto; }
    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
      .careersVideo video {
        width: 100%;
        padding: 0 18%; } }
    @media (max-width: 767px) {
      .careersVideo video {
        width: 100%; } }

.videoHeader {
  padding: 0% 5%;
  justify-content: center;
  text-align: center; }

.videoName {
  font-size: 2rem;
  font-family: "Cooper Hewitt Semibold"; }

.whiteBack {
  width: 100%;
  height: 100%;
  background: #ffffff; }

.coreValues {
  display: flex;
  flex-direction: row;
  padding: 0 20px;
  justify-content: center;
  background: #ffffff;
  flex-wrap: wrap;
  max-width: 1400px;
  margin: 0px auto; }
  .coreValues .value {
    width: 17%;
    display: flex;
    padding: 0 15px;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    margin: 0 10px 10px 10px;
    border-radius: 5px; }
    @media (max-width: 1000px) {
      .coreValues .value {
        width: 30%; } }
    @media (max-width: 420px) {
      .coreValues .value {
        width: 80%; } }
    .coreValues .value .valueText {
      align-self: center;
      width: 100%; }
      .coreValues .value .valueText h3 {
        font-family: "Cooper Hewitt Medium";
        text-align: center;
        font-family: "Cooper Hewitt Heavy"; }
        @media (min-width: 1501px) {
          .coreValues .value .valueText h3 {
            font-size: 2.5rem;
            line-height: 2.8rem; } }
        @media (max-width: 1500px) {
          .coreValues .value .valueText h3 {
            font-size: 2rem;
            line-height: 2.3rem; } }
        @media (max-width: 1300px) {
          .coreValues .value .valueText h3 {
            font-size: 1.5rem;
            line-height: 1.8rem; } }
        @media (max-width: 1000px) {
          .coreValues .value .valueText h3 {
            font-size: 1.5rem;
            line-height: 1.8rem; } }
        @media (max-width: 767px) {
          .coreValues .value .valueText h3 {
            font-size: 1rem;
            line-height: 1.2rem; } }
        @media (max-width: 575px) {
          .coreValues .value .valueText h3 {
            font-size: 1rem;
            line-height: 1.2rem; } }
        @media (max-width: 420px) {
          .coreValues .value .valueText h3 {
            font-size: 1rem;
            line-height: 1.2rem; } }
    .coreValues .value img {
      width: 100px;
      justify-self: center;
      align-self: center; }

.commitmentContainer {
  display: flex;
  flex-direction: row;
  width: 100%;
  max-width: 1000px;
  margin: 0px auto;
  padding: 10px 20px; }
  @media (max-width: 767px) {
    .commitmentContainer {
      flex-direction: column; } }
  .commitmentContainer .commitmentIcon {
    align-self: center;
    padding-right: 20px;
    width: 15%; }
    @media (max-width: 767px) {
      .commitmentContainer .commitmentIcon {
        margin: 0px auto;
        padding: 0;
        width: 50px; } }
    @media (max-width: 767px) {
      .commitmentContainer .commitmentIcon img {
        justify-self: center;
        width: 50px;
        padding: 0; } }
  .commitmentContainer .commitment {
    width: 85%;
    align-self: center; }
    @media (max-width: 767px) {
      .commitmentContainer .commitment {
        text-align: center;
        margin-bottom: 20px; } }
    .commitmentContainer .commitment .commitmentHeader {
      font-size: 1.5rem;
      font-family: "Cooper Hewitt Heavy";
      display: block;
      padding-bottom: 5px; }

#footer {
  width: 100%;
  height: auto;
  background: #1e1e1e;
  position: fixed;
  bottom: 0; }
  @media (max-width: 575px) {
    #footer {
      position: relative; } }

.footer {
  border-top: 6px solid #f8d000;
  position: absolute;
  z-index: 1;
  background: #1e1e1e;
  width: 100%;
  bottom: 0;
  height: 375px;
  padding: 0% 5%;
  color: #ffffff;
  margin: 0px auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center; }
  @media (max-width: 575px) {
    .footer {
      position: relative; } }
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .footer {
      position: relative;
      top: 0; } }
  @media (max-width: 767px) {
    .footer {
      height: 400px;
      flex-direction: column;
      justify-content: center;
      text-align: center;
      padding: 0;
      position: sticky;
      z-index: 10; } }
  @media all and (max-width: 767px) and (-ms-high-contrast: none), (max-width: 767px) and (-ms-high-contrast: active) {
    .footer {
      position: relative;
      top: 0; } }
  @media (max-width: 575px) {
    .footer {
      height: 100%; } }
  .footer h3 {
    margin: 0px auto;
    color: #ffffff;
    padding: 5% 0%;
    text-align: center;
    font-family: 'Cooper Hewitt Semibold'; }
  .footer .footerMenu {
    border-left: 2px solid #ffffff;
    padding-left: 30px;
    min-width: 75%;
    max-width: 100%;
    display: flex;
    flex-direction: row;
    text-align: left; }
    @media (max-width: 767px) {
      .footer .footerMenu {
        width: 100%;
        border: 0px;
        text-align: center;
        padding: 0 20px 20px 20px; } }
    @media (max-width: 575px) {
      .footer .footerMenu {
        flex-direction: column;
        width: 100%;
        justify-content: center;
        align-items: center;
        padding-bottom: 0px; } }
  .footer .footerColumn {
    justify-content: center;
    padding: 10px;
    width: 33.3%; }
    @media (max-width: 1000px) {
      .footer .footerColumn {
        width: 29%; } }
    @media (max-width: 575px) {
      .footer .footerColumn {
        width: 100%; } }
  @media (max-width: 1000px) {
    .footer .big {
      width: 42%; } }
  @media (max-width: 575px) {
    .footer .big {
      width: 100%; } }
  .footer .homeLine {
    border-top: 2px solid #ffffff; }

@media (max-width: 767px) {
  .desktopFooterLink {
    display: none !important; } }

@media (min-width: 768px) {
  .mobileFooterLink {
    display: none !important; } }

.footerBase {
  z-index: 1;
  display: flex;
  height: 50px;
  position: fixed;
  bottom: 0;
  flex-direction: row;
  width: 100%;
  justify-content: center;
  align-items: center; }
  .footerBase div {
    padding: 0 10px; }
  @media (max-width: 420px) {
    .footerBase {
      position: relative;
      flex-direction: column-reverse;
      padding-bottom: 20px;
      height: 75px; } }

.footerSocialIcons {
  bottom: 0;
  font-size: 2rem; }
  .footerSocialIcons i {
    padding: 10px 10px 10px 0; }
  .footerSocialIcons i:hover {
    fill: #f8d000;
    transition: .3s; }

.copyright {
  padding: 10px 0;
  font-family: "Cooper Hewitt";
  font-size: .75rem;
  color: #ffffff;
  text-align: center; }

.logoFooter {
  width: 25%;
  height: 100%;
  max-width: 400px;
  align-self: center;
  flex-direction: column;
  justify-self: center;
  justify-content: center;
  display: flex;
  margin-right: 50px; }
  @media (max-width: 767px) {
    .logoFooter {
      width: 20%;
      border-right: none;
      padding: 20px 0;
      margin: 0;
      height: auto; } }
  @media (max-width: 575px) {
    .logoFooter {
      border: none;
      width: 150px;
      max-width: 150px;
      padding-bottom: 25px 0;
      margin: 0;
      display: block; } }
  .logoFooter img {
    width: 100%;
    height: 100%;
    align-self: center; }

.footerSectionHeader {
  font-family: "Cooper Hewitt Heavy";
  font-size: 1.25rem;
  color: #f8d000;
  line-height: 1.5rem;
  margin: 0; }

.footerPadding {
  margin: 10px 0 0 0; }

.footerLink {
  text-decoration: none;
  color: #ffffff;
  cursor: pointer; }

.footerLink:hover {
  text-decoration: none;
  color: #f8d000; }

/*Contact Us*/
.contactUsMobile {
  display: none;
  align-content: center;
  height: 100%;
  width: 100%;
  justify-content: center;
  flex-direction: column;
  padding: 5px 0 10px 0; }

.contactUsMobile.contactUsClicked {
  display: flex; }

.contactHide.contactUsClicked {
  display: none; }

.contactUsLarge {
  display: none;
  align-content: center;
  width: 100%;
  justify-content: center; }
  @media (max-width: 767px) {
    .contactUsLarge {
      display: none; } }

.contactUsDirect {
  align-content: center;
  justify-content: center;
  display: flex;
  background: rgba(30, 30, 30, 0.5);
  position: absolute;
  align-items: center;
  width: 100vw;
  height: 100vh;
  z-index: -1; }
  @media (max-width: 767px) {
    .contactUsDirect {
      display: none; } }

.contactUsDirect.directClick {
  display: none; }

.contactUsLinks {
  display: flex;
  justify-content: center;
  margin: 0px auto;
  width: 100%; }
  .contactUsLinks a {
    padding: 20px;
    font-size: 1.5rem; }
    .contactUsLinks a div {
      border-bottom: 2px solid #1e1e1e; }

.contactUsLarge.contactClicked {
  display: flex;
  background: rgba(30, 30, 30, 0.5);
  position: absolute;
  align-items: center;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
  top: 0; }

.socialButtons {
  display: flex;
  width: auto;
  padding: 0 0 10px 0;
  border-radius: 5px;
  cursor: pointer; }
  .socialButtons div {
    padding: 5px;
    width: 100%;
    max-width: 55px; }
    .socialButtons div img {
      width: 40px; }
  @media (max-width: 767px) {
    .socialButtons {
      flex-direction: row;
      width: 100%;
      margin: 0px auto;
      justify-content: center; } }
  @media (max-width: 575px) {
    .socialButtons {
      border: none;
      padding: 0 10px 10px 10px;
      border-radius: 2px; } }

.belowNav .ingredients {
  display: none; }

.contactUsName {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%; }
  @media (max-width: 767px) {
    .contactUsName {
      max-width: none;
      width: 100%; } }

.contactUsMessage {
  width: 100%; }

@media (max-height: 700px) {
  #contactUsForm {
    padding: 20px !important; }
  .form-control {
    font-size: 12px;
    padding: 5px; }
  .form-group {
    font-size: 14px; }
  .contactUsForm p {
    font-size: 14px !important;
    padding-left: 10px; }
  .contactUsHeader h3 {
    font-size: 1.5rem; } }

.contactUsSocial {
  width: 30%;
  display: flex;
  padding-left: 10px;
  flex-direction: column;
  align-self: center; }
  .contactUsSocial p {
    margin-bottom: .5rem; }

.newsletterCheck {
  margin: 0px 5px 3px 20px;
  font-size: 1.25rem;
  width: 20px;
  height: 20px; }

.submitArea {
  display: flex;
  align-items: flex-end; }
  .submitArea span {
    margin-top: 1rem;
    font-size: .75rem;
    line-height: .8rem;
    padding: 0 0 0 12px;
    max-width: 350px; }
    @media (max-width: 767px) {
      .submitArea span {
        font-size: .6rem;
        padding: 10px 0 0 12px; } }

.form-group {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px 10px 0px 10px; }
  .form-group a:hover {
    font-family: "Cooper Hewitt Semibold";
    color: #1e1e1e; }
  @media (max-width: 575px) {
    .form-group {
      padding: 5px 10px; } }

.formNameInput {
  width: 50%; }

.formFieldInput {
  width: 50%; }

.formSubject {
  width: 100%; }

.formContainer {
  display: flex;
  flex-direction: row; }
  .formContainer p {
    padding: 0; }

.requiredInputMessage {
  font-size: .75rem; }

.defaultFormStyle {
  background: none;
  border: 2px solid #1e1e1e;
  padding: 5px;
  border-radius: 5px; }

.formEmailInput {
  width: 50%;
  align-self: flex-end; }

.formMessageInput {
  height: 100%; }

.twoRowForm {
  display: flex;
  flex-direction: column;
  width: 100%; }

.formCheckbox {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }
  .formCheckbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0; }
  .formCheckbox label {
    font-family: "Cooper Hewitt Semibold";
    font-size: 1.25rem;
    padding-right: 10px; }

.sub {
  font-size: .75rem;
  font-family: "Cooper Hewitt";
  margin: 0px;
  padding: 0px;
  line-height: 1rem;
  display: block; }

.container {
  font-family: "Cooper Hewitt Semibold";
  font-size: 1.5rem;
  display: block;
  position: relative;
  padding-left: 35px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0; }

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #fff;
  border: 2px solid #1e1e1e;
  padding: 10px;
  border-radius: 2px; }

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: gainsboro; }

/* When the checkbox is checked, add a yellow background */
.container input:checked ~ .checkmark {
  background-color: #f8d000; }

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none; }

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block; }

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg); }

.contactUsHeader {
  padding: 0 0 0 10px;
  width: 100%; }
  @media (max-width: 575px) {
    .contactUsHeader {
      padding: 0 10px; } }
  .contactUsHeader h3 {
    width: 50%;
    max-width: 250px;
    font-family: "Cooper Hewitt Heavy";
    text-align: left; }
    @media (max-width: 767px) {
      .contactUsHeader h3 {
        display: none; } }
  @media (max-width: 767px) {
    .contactUsHeader p {
      font-size: 1rem; } }
  @media (max-width: 575px) {
    .contactUsHeader p {
      margin-bottom: .5rem; } }
  .contactUsHeader .x {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 2rem;
    padding: 20px;
    cursor: pointer; }
    @media (max-width: 767px) {
      .contactUsHeader .x {
        display: none; } }

#contactUsForm {
  color: #1e1e1e;
  border: 3px solid #1e1e1e;
  width: 90%;
  max-width: 1000px;
  position: relative;
  background: #f8d000;
  z-index: 100000000;
  padding: 40px 20px;
  box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.19), 1px 2px 6px rgba(0, 0, 0, 0.23);
  justify-content: center;
  border-radius: 5px; }

#contactUsFormMobile {
  width: 100%; }
  #contactUsFormMobile form {
    display: flex;
    flex-direction: column; }

.contactUsForm {
  width: 70%;
  display: flex;
  color: #1e1e1e;
  flex-direction: column;
  align-items: center;
  align-content: center;
  border-right: 2px solid #1e1e1e;
  padding-right: 10px; }

.logoRecipePrint {
  display: none; }

.printRecipe {
  position: absolute;
  bottom: 20px;
  align-self: flex-end;
  display: flex;
  font-size: 1rem;
  font-family: "Cooper Hewitt Semibold";
  padding: 15px;
  width: 100%;
  justify-content: center;
  cursor: pointer; }
  @media (max-width: 767px) {
    .printRecipe {
      flex-direction: column;
      text-align: center;
      font-size: 12px;
      position: relative;
      padding: 0 0 5px 0; } }
  .printRecipe .printLink {
    color: #ffffff; }
  .printRecipe div a:hover {
    color: #f8d000;
    transition: .2s; }

.printIcon {
  display: flex; }
  .printIcon i {
    padding-right: 20px; }
  @media (max-width: 767px) {
    .printIcon {
      display: none; } }

.spacer {
  padding: 0 20px;
  color: #ffffff; }
  @media (max-width: 767px) {
    .spacer {
      display: none; } }

.categoryHero {
  z-index: 10000;
  position: relative;
  height: 500px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 0px auto 20px auto; }
  @media (max-width: 767px) {
    .categoryHero {
      flex-direction: column;
      height: 100%; } }

.categoryImage {
  display: flex;
  justify-content: center;
  height: 100%;
  width: 50%;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-size: cover; }
  @media (max-width: 767px) {
    .categoryImage {
      width: 100%; } }

.categoryHeroProductImage {
  height: 100%;
  width: auto;
  padding: 0;
  margin: 0px auto;
  z-index: 251;
  filter: drop-shadow(17px 10px 13px rgba(0, 0, 0, 0.4)); }
  @media (max-width: 767px) {
    .categoryHeroProductImage {
      max-height: 300px; } }

.categoryColor {
  color: #ffffff;
  display: flex;
  justify-content: center;
  width: 50%; }
  @media (max-width: 767px) {
    .categoryColor {
      width: 100%; } }

.organicsCategoryImage {
  background: url("../img/organicsHeader.jpg") no-repeat;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-size: cover; }

.breadsCategoryImage {
  background: url("../img/breadsHeader.jpg") no-repeat;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-size: cover; }

.gfCategoryImage {
  background: url("../img/gfHeader.jpg") no-repeat;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-size: cover; }

.bagelsCategoryImage {
  background: url("../img/bagelsHeader.jpg") no-repeat;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-size: cover; }

.englishMuffinsCategoryImage {
  background: url("../img/englishMuffinsHeader.jpg") no-repeat;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-size: cover; }

.bunsCategoryImage {
  background: url("../img/bunsHeader.jpg") no-repeat;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-size: cover; }

.sweetsCategoryImage {
  background: url("../img/sweetsHeader.jpg") no-repeat;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-size: cover; }

.categoryMenu {
  z-index: 252;
  align-self: center;
  min-width: 250px; }
  .categoryMenu h3 {
    font-family: "Cooper Hewitt Heavy";
    text-align: center;
    font-family: "Cooper Hewitt Heavy" !important; }
    @media (min-width: 1501px) {
      .categoryMenu h3 {
        font-size: 5rem;
        line-height: 5.5rem; } }
    @media (max-width: 1500px) {
      .categoryMenu h3 {
        font-size: 4rem;
        line-height: 4.7rem; } }
    @media (max-width: 1300px) {
      .categoryMenu h3 {
        font-size: 3rem;
        line-height: 3.5rem; } }
    @media (max-width: 1000px) {
      .categoryMenu h3 {
        font-size: 3rem;
        line-height: 3.5rem; } }
    @media (max-width: 767px) {
      .categoryMenu h3 {
        font-size: 2.5rem;
        line-height: 2.8rem; } }
    @media (max-width: 575px) {
      .categoryMenu h3 {
        font-size: 2rem;
        line-height: 2.3rem; } }
    @media (max-width: 420px) {
      .categoryMenu h3 {
        font-size: 2rem;
        line-height: 2.3rem; } }
    @media (max-width: 767px) {
      .categoryMenu h3 {
        font-family: "Cooper Hewitt Heavy";
        line-height: 1; } }
  @media (max-width: 767px) and (min-width: 1501px) {
    .categoryMenu h3 {
      font-size: 5rem;
      line-height: 5.5rem; } }
  @media (max-width: 767px) and (max-width: 1500px) {
    .categoryMenu h3 {
      font-size: 4rem;
      line-height: 4.7rem; } }
  @media (max-width: 767px) and (max-width: 1300px) {
    .categoryMenu h3 {
      font-size: 3rem;
      line-height: 3.5rem; } }
  @media (max-width: 767px) and (max-width: 1000px) {
    .categoryMenu h3 {
      font-size: 3rem;
      line-height: 3.5rem; } }
  @media (max-width: 767px) and (max-width: 767px) {
    .categoryMenu h3 {
      font-size: 2.5rem;
      line-height: 2.8rem; } }
  @media (max-width: 767px) and (max-width: 575px) {
    .categoryMenu h3 {
      font-size: 2rem;
      line-height: 2.3rem; } }
  @media (max-width: 767px) and (max-width: 420px) {
    .categoryMenu h3 {
      font-size: 2rem;
      line-height: 2.3rem; } }
  .categoryMenu ul a {
    text-decoration: none; }
  .categoryMenu li {
    color: #ffffff;
    border-bottom: 2px solid #ffffff;
    font-family: "Cooper Hewitt";
    padding: 15px 0;
    font-size: 1.5rem;
    margin: 0;
    display: flex;
    justify-content: space-between; }
    .categoryMenu li span {
      align-self: center;
      padding-right: 10px; }
    .categoryMenu li i {
      justify-self: right;
      align-self: center;
      font-size: 1.5rem; }
  .categoryMenu li:hover {
    text-decoration: none; }
  @media (max-width: 767px) {
    .categoryMenu {
      padding: 30px 0; } }

.sweetsHeroProductImage {
  position: absolute;
  height: 190px;
  top: 260px;
  left: 80px;
  right: 0;
  z-index: 251;
  filter: drop-shadow(17px 10px 13px rgba(0, 0, 0, 0.4)); }
  @media (max-width: 767px) {
    .sweetsHeroProductImage {
      height: 150px;
      top: 180px;
      margin-left: 0;
      margin-right: 0;
      left: 0;
      right: 0; } }

.hiddenAnchor {
  display: block;
  position: relative;
  top: -80px;
  visibility: hidden; }

.recipeHeader {
  background: url("../img/recipeHeader.jpg") no-repeat center bottom;
  background-size: cover;
  height: 50vh;
  display: flex;
  flex-direction: column;
  padding: 5%;
  margin-bottom: 20px;
  justify-content: center; }
  .recipeHeader h2 {
    font-family: "Cooper Hewitt Heavy"; }
    @media (min-width: 1501px) {
      .recipeHeader h2 {
        font-size: 5rem;
        line-height: 5.5rem; } }
    @media (max-width: 1500px) {
      .recipeHeader h2 {
        font-size: 4rem;
        line-height: 4.7rem; } }
    @media (max-width: 1300px) {
      .recipeHeader h2 {
        font-size: 3rem;
        line-height: 3.5rem; } }
    @media (max-width: 1000px) {
      .recipeHeader h2 {
        font-size: 3rem;
        line-height: 3.5rem; } }
    @media (max-width: 767px) {
      .recipeHeader h2 {
        font-size: 2.5rem;
        line-height: 2.8rem; } }
    @media (max-width: 575px) {
      .recipeHeader h2 {
        font-size: 2rem;
        line-height: 2.3rem; } }
    @media (max-width: 420px) {
      .recipeHeader h2 {
        font-size: 2rem;
        line-height: 2.3rem; } }
  .recipeHeader h2, .recipeHeader h5 {
    padding-left: 5%;
    margin: 0;
    width: 50%; }

.recipeTime {
  display: flex;
  padding: 0 0 20px 0;
  max-width: 1000px;
  width: 100%;
  align-items: center;
  margin: 0px auto; }
  .recipeTime .recipeLine {
    width: 30%;
    height: 2px;
    background: #ffffff; }
    @media (max-width: 767px) {
      .recipeTime .recipeLine {
        display: none; } }
  .recipeTime #valRecipeTime {
    color: #ffffff;
    width: 40%;
    font-size: 14px;
    font-family: "Cooper Hewitt Semibold"; }
    @media (max-width: 767px) {
      .recipeTime #valRecipeTime {
        width: 100%; } }

.recipes {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0px auto;
  padding-bottom: 2%;
  width: 100%;
  max-width: 1300px;
  padding: 10px; }
  .recipes a {
    height: 100%;
    width: 25%;
    max-width: 350px; }
    @media (max-width: 767px) {
      .recipes a {
        width: 33.3%; } }
    @media (max-width: 575px) {
      .recipes a {
        width: 50%; } }
    @media (max-width: 420px) {
      .recipes a {
        width: 100%; } }

.recipeCard {
  cursor: pointer;
  padding: 10px;
  margin: 0;
  height: 100%;
  background: #ffffff; }
  .recipeCard .recipePicture {
    overflow: hidden;
    position: relative; }
    .recipeCard .recipePicture .timeOverlay {
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 100%;
      position: absolute;
      width: 100%;
      margin: 0px auto;
      opacity: 0;
      font-size: 1rem;
      color: #1e1e1e;
      font-family: "Cooper Hewitt Semibold";
      transition: .5s;
      z-index: 1000;
      background: rgba(248, 208, 0, 0.9); }
    @media (max-width: 767px) {
      .recipeCard .recipePicture {
        display: flex;
        height: 200px;
        overflow: hidden; }
        .recipeCard .recipePicture img {
          object-fit: cover; } }
    .recipeCard .recipePicture img {
      vertical-align: middle;
      width: 100%;
      -webkit-transition: all .5s ease;
      -moz-transition: all .5s ease;
      -ms-transition: all .5s ease;
      -o-transition: all .5s ease;
      transition: all .5s ease; }

.recipeCard:hover .timeOverlay {
  opacity: 1; }

.recipeCard:hover h3 {
  color: #f8d000;
  transition: .3s; }

.recipeCard:hover .recipePicture img {
  -webkit-transform: scale(1.1);
  /* Safari + Chrome */
  -moz-transform: scale(1.1);
  /* Firefox */
  -ms-transform: scale(1.1);
  /* IE 9 */
  -o-transform: scale(1.1);
  /* Opera */
  transform: scale(1.1); }

.recipeCopy {
  padding: 10px 0 0 0; }
  .recipeCopy h3 {
    font-family: "Cooper Hewitt Semibold";
    font-size: 1rem;
    line-height: 1.25rem; }

.recipeHero {
  display: flex;
  height: 60vh;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 1000; }
  @media (max-width: 767px) {
    .recipeHero {
      height: auto; } }
  .recipeHero .recipeDescription {
    display: flex;
    flex-direction: column;
    color: #ffffff;
    border-radius: 10px;
    padding: 20px;
    width: 75%;
    margin: 0px auto;
    text-align: center;
    vertical-align: middle;
    align-self: center;
    height: min-content; }
    @media (max-width: 767px) {
      .recipeHero .recipeDescription {
        width: 100%;
        border-radius: 0;
        padding: 40px 20px; } }
    .recipeHero .recipeDescription h2 {
      font-family: "Cooper Hewitt Heavy";
      margin-bottom: 0; }
      @media (min-width: 1501px) {
        .recipeHero .recipeDescription h2 {
          font-size: 5rem;
          line-height: 5.5rem; } }
      @media (max-width: 1500px) {
        .recipeHero .recipeDescription h2 {
          font-size: 4rem;
          line-height: 4.7rem; } }
      @media (max-width: 1300px) {
        .recipeHero .recipeDescription h2 {
          font-size: 3rem;
          line-height: 3.5rem; } }
      @media (max-width: 1000px) {
        .recipeHero .recipeDescription h2 {
          font-size: 3rem;
          line-height: 3.5rem; } }
      @media (max-width: 767px) {
        .recipeHero .recipeDescription h2 {
          font-size: 2.5rem;
          line-height: 2.8rem; } }
      @media (max-width: 575px) {
        .recipeHero .recipeDescription h2 {
          font-size: 2rem;
          line-height: 2.3rem; } }
      @media (max-width: 420px) {
        .recipeHero .recipeDescription h2 {
          font-size: 2rem;
          line-height: 2.3rem; } }
    .recipeHero .recipeDescription p {
      width: 90%;
      font-size: 1.25rem;
      margin: 0px auto; }
      @media (max-width: 767px) {
        .recipeHero .recipeDescription p {
          width: 100%;
          font-size: 1rem; } }

.recipeContainer {
  margin: 0px auto;
  display: flex;
  flex-direction: row;
  position: relative;
  z-index: 100; }
  @media (max-width: 767px) {
    .recipeContainer {
      flex-direction: column; } }
  .recipeContainer .recipeIngredients {
    width: 40%;
    background: #f8d000;
    padding: 30px; }
    @media (max-width: 767px) {
      .recipeContainer .recipeIngredients {
        width: 100%; } }
    .recipeContainer .recipeIngredients ul li {
      border-bottom: 1px solid #1e1e1e;
      font-family: "Cooper Hewitt Semibold";
      padding: 7px 0%; }
    .recipeContainer .recipeIngredients h3 {
      font-family: "Cooper Hewitt Heavy"; }
  .recipeContainer .recipeSteps {
    width: 60%;
    background: #ffffff;
    padding: 30px; }
    .recipeContainer .recipeSteps h3 {
      font-family: "Cooper Hewitt Heavy"; }
    .recipeContainer .recipeSteps ul {
      padding-inline-start: 0px;
      margin-block-start: 0px; }
      .recipeContainer .recipeSteps ul li {
        padding: 7px 0%;
        display: flex; }
        .recipeContainer .recipeSteps ul li .recipeStep {
          width: 15%; }
          @media (max-width: 767px) {
            .recipeContainer .recipeSteps ul li .recipeStep {
              width: 21%; } }
        .recipeContainer .recipeSteps ul li .recipeInstruction {
          width: 85%;
          padding-left: 5px; }
          @media (max-width: 767px) {
            .recipeContainer .recipeSteps ul li .recipeInstruction {
              width: 79%; } }
    @media (max-width: 767px) {
      .recipeContainer .recipeSteps {
        width: 100%; } }

.recipeStep {
  font-family: "Cooper Hewitt Heavy"; }

.tartine {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../img/recipes/tartineHeader.jpg");
  background-size: cover;
  background-position: center; }

.pulledPork {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../img/recipes/pulledPorkHeader.jpg");
  background-size: cover;
  background-position: center; }

.chickenSalad {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../img/recipes/chickenSaladHeader.jpg");
  background-size: cover;
  background-position: center; }

.ricottaToast {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../img/recipes/ricottaToastHeader.jpg");
  background-size: cover;
  background-position: center; }

.stuffing {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../img/recipes/stuffingHeader.jpg");
  background-size: cover;
  background-position: center; }

.huevosRancheros {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../img/recipes/huevosRancherosHeader.jpg");
  background-size: cover;
  background-position: center; }

.cinnamonRolls {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../img/recipes/cinnamonRollsHeader.jpg");
  background-size: cover;
  background-position: center; }

.frenchToastCasserole {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../img/recipes/frenchToastCasseroleHeader.jpg");
  background-size: cover;
  background-position: center; }

.chickpeaSalad {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../img/recipes/chickpeaSaladHeader.jpg");
  background-size: cover;
  background-position: center; }

.chickenPesto {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../img/recipes/chickenPestoHeader.jpg");
  background-size: cover;
  background-position: center; }

.locationBelowNav {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
  position: fixed;
  height: 100%; }

.locationHeaderFrame {
  width: 100%;
  background: #1e1e1e; }
  .locationHeaderFrame h2 {
    font-size: 1.5rem;
    padding: 10px 20px;
    color: #ffffff;
    margin: 0; }
  @media (max-width: 575px) {
    .locationHeaderFrame {
      background: #f8d000;
      padding-top: 25px; }
      .locationHeaderFrame h2 {
        color: #1e1e1e;
        text-align: center;
        font-size: 2.3rem; } }

.locationOffset {
  position: relative;
  visibility: hidden;
  display: block;
  top: -15px; }

.locationTitleOverlay {
  position: absolute;
  display: flex;
  flex-direction: column;
  z-index: 100;
  width: 100%;
  height: 100%;
  background: rgba(30, 30, 30, 0.7);
  justify-content: center; }
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .locationTitleOverlay {
      left: 0;
      right: 0;
      align-items: center; } }

.fa-plus, .fa-minus {
  padding-left: 20px; }

.locationName {
  text-align: left !important;
  font-size: 1.25rem !important;
  color: #1e1e1e !important;
  font-family: "Cooper Hewitt Heavy" !important;
  margin: 0 !important; }

.stateName {
  padding-top: 20px;
  font-size: 2rem;
  cursor: pointer; }
  @media (max-width: 767px) {
    .stateName {
      font-size: 1.5rem; } }
  @media (max-width: 575px) {
    .stateName {
      font-size: 2rem; } }

@media (max-width: 575px) {
  .bakeryStates, .outletStates {
    flex-direction: row !important;
    flex-wrap: wrap;
    width: 70%;
    justify-content: center;
    margin: 0px auto; } }

@media (max-width: 420px) {
  .bakeryStates, .outletStates {
    width: 95%; } }

.bakeryStates, .bakeries {
  display: flex;
  flex-direction: column; }

.outletStates, .outlets {
  display: none;
  flex-direction: column; }

.outletNotes {
  font-size: .75rem;
  font-family: "Cooper Hewitt Semibold";
  padding-top: 5px; }

.stateNameSidebar {
  font-size: 1.25rem;
  font-family: "Cooper Hewitt Heavy";
  padding: 4px 10px;
  border-bottom: 1px solid #1e1e1e;
  cursor: pointer; }
  @media (max-width: 575px) {
    .stateNameSidebar {
      font-size: 1rem;
      border-right: 1px solid #1e1e1e;
      border-bottom: none; } }
  @media (max-width: 420px) {
    .stateNameSidebar {
      font-size: .9rem; } }

.bakeryMarker {
  display: flex;
  flex-direction: row; }

.bakeryImage {
  max-width: 300px; }
  .bakeryImage img {
    width: 100%;
    height: 100%;
    padding-right: 20px; }

.bakeryList, .outletList {
  padding-top: 15px; }

.locationContainer {
  display: flex;
  flex-flow: row;
  height: 100%;
  position: relative;
  flex: 1;
  overflow-y: hidden; }
  .locationContainer h3 {
    text-transform: uppercase;
    font-family: "Cooper Hewitt Heavy";
    margin-bottom: 0;
    line-height: 1; }
    @media (min-width: 768px) and (max-width: 850px) {
      .locationContainer h3 {
        font-size: 1.5rem !important; } }

.locDirectory {
  width: 50%;
  display: flex;
  flex-direction: row;
  max-width: 500px;
  background: #ffffff; }
  @media (max-width: 767px) {
    .locDirectory {
      width: 100%;
      max-width: none; } }
  @media (max-width: 575px) {
    .locDirectory {
      flex-direction: column; } }
  .locDirectory .locDirectoryLeft {
    width: fit-content;
    position: sticky;
    top: 0;
    background: #f8d000;
    z-index: 100; }
    @media (max-width: 575px) {
      .locDirectory .locDirectoryLeft {
        width: 100%;
        box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.19), 1px 2px 6px rgba(0, 0, 0, 0.23); } }
  .locDirectory .locDirectoryRight {
    width: 100%;
    padding: 20px;
    overflow-y: scroll;
    background: #ffffff;
    -webkit-overflow-scrolling: touch; }

.map {
  position: sticky !important;
  top: 0;
  flex: 3;
  overflow: hidden;
  width: 60%; }

.toggleContainer {
  margin: 0px 20px;
  padding: 20px 0 20px 0;
  mix-blend-mode: darken; }
  @media (max-width: 767px) {
    .toggleContainer {
      padding-bottom: 0; } }
  @media (max-width: 575px) {
    .toggleContainer {
      margin: 0px auto; } }

.locationBox {
  flex-direction: column;
  width: 100%;
  border-bottom: 2px solid #1e1e1e;
  margin-bottom: 20px; }

.locationCard {
  display: flex;
  flex-direction: column;
  padding: 20px 0;
  border-bottom: 1px solid #dddddd; }
  .locationCard .cardLocation {
    color: #1e1e1e;
    cursor: pointer;
    align-content: center;
    text-transform: capitalize; }
    .locationCard .cardLocation h4 {
      font-size: 1.25rem;
      font-family: "Cooper Hewitt Semibold";
      align-self: center;
      margin-bottom: 5px;
      cursor: pointer !important; }
    .locationCard .cardLocation h4:hover {
      color: #f8d000;
      transition: .2s;
      cursor: pointer !important; }
  .locationCard .cardAddress {
    cursor: pointer; }
    .locationCard .cardAddress p {
      margin-bottom: 0; }
  .locationCard .cardLink {
    padding: 2% 5% 5% 5%; }
    .locationCard .cardLink a {
      text-decoration: none; }
  .locationCard .cardAddress:hover, .locationCard .cardPhone:hover {
    font-family: "Cooper Hewitt Semibold";
    transition: .3s; }

.hours {
  padding-top: 5px;
  font-family: "Cooper Hewitt Semibold"; }

.communitySection {
  display: flex;
  margin-bottom: 20px;
  padding: 0;
  border-bottom: 2px solid #1e1e1e; }
  @media (max-width: 767px) {
    .communitySection {
      flex-direction: column-reverse; } }
  .communitySection div {
    padding: 0 0 20px 0; }
    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
      .communitySection div {
        width: 75%; } }
    .communitySection div p {
      margin-bottom: 0; }
  .communitySection img {
    max-width: 150px;
    width: 25%;
    height: 100%;
    object-fit: scale-down;
    padding: 0 20px;
    align-self: center; }
    @media (max-width: 767px) {
      .communitySection img {
        align-self: flex-start;
        width: 100%;
        max-width: 150px;
        height: auto; } }

.communitySponsors {
  padding: 30px 0; }

.communityBreadToLive {
  flex-direction: column; }
  .communityBreadToLive div {
    width: 75%; }
    @media (max-width: 767px) {
      .communityBreadToLive div {
        width: 100%; } }

.truck {
  display: flex;
  height: 100%;
  flex-wrap: wrap; }
  .truck img {
    max-width: 250px !important;
    width: 33.3%; }
    @media (max-width: 420px) {
      .truck img {
        width: 51%; } }

.communityLocations {
  display: flex;
  flex-direction: column; }
  @media (max-width: 575px) {
    .communityLocations {
      grid-template-columns: 100%; } }
  .communityLocations li {
    padding: 5% 0;
    border-bottom: 1px solid #888888; }
    .communityLocations li img {
      max-width: 300px;
      max-height: 200px;
      margin: 15px; }
      @media (max-width: 767px) {
        .communityLocations li img {
          max-width: 140px;
          max-height: 100px;
          margin: 15px 15px 15px 0; } }
    .communityLocations li .communityLogos {
      display: block; }

.supplierImage {
  float: left;
  max-width: 350px;
  padding: 0 20px 20px 0px;
  width: 100%; }

.supplierLogo {
  max-width: 100px;
  margin: 0px auto; }

.tourImg {
  width: 100%;
  max-width: 1000px;
  margin-bottom: 20px; }
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .tourImg {
      flex: 0 0 200px; } }

.subBrandTitle {
  width: 100%;
  display: flex;
  margin: 0px auto;
  flex-direction: column;
  background: #1e1e1e;
  color: #ffffff;
  padding: 40px 0; }
  .subBrandTitle h2, .subBrandTitle h5, .subBrandTitle p {
    width: 50%;
    text-align: center;
    margin: 0px auto;
    font-weight: bold; }
    @media (max-width: 767px) {
      .subBrandTitle h2, .subBrandTitle h5, .subBrandTitle p {
        width: 70%; } }
  .subBrandTitle h2 {
    font-size: 3rem;
    text-transform: uppercase;
    line-height: 1;
    text-align: center; }
  .subBrandTitle a {
    color: #ffffff; }

.grantRight {
  float: right; }
  .grantRight img {
    padding: 5px;
    max-width: 400px;
    max-height: 250px; }

.foundationBody {
  padding: 40px !important; }

.foundationTitle {
  width: 100%;
  color: #ffffff;
  background: #1e1e1e;
  padding: 40px;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: row; }
  .foundationTitle p {
    margin: 0;
    padding-left: 30px;
    max-width: 500px; }
    @media (max-width: 575px) {
      .foundationTitle p {
        padding-left: 0; } }
  .foundationTitle .foundationHeader {
    height: min-content;
    display: flex;
    flex-direction: row; }
    .foundationTitle .foundationHeader img {
      width: 200px;
      height: 200px; }
    @media (max-width: 575px) {
      .foundationTitle .foundationHeader {
        flex-direction: column-reverse; }
        .foundationTitle .foundationHeader img {
          max-width: 250px;
          margin: 0px auto;
          border: 0px; } }
  @media (max-width: 575px) {
    .foundationTitle {
      flex-direction: column; } }

.plainPageTitle {
  width: 100%;
  display: flex;
  margin: 0px auto;
  flex-direction: column;
  background: #1e1e1e;
  color: #ffffff;
  padding: 40px 0; }
  .plainPageTitle h2, .plainPageTitle h5, .plainPageTitle p {
    width: 50%;
    margin: 0px auto;
    font-weight: bold; }
    @media (max-width: 767px) {
      .plainPageTitle h2, .plainPageTitle h5, .plainPageTitle p {
        width: 70%; } }
  .plainPageTitle h2 {
    font-size: 3rem;
    text-transform: uppercase;
    line-height: 1; }
    @media (max-width: 420px) {
      .plainPageTitle h2 {
        font-size: 2rem; } }
  .plainPageTitle a {
    color: #ffffff; }

#sidebar {
  width: 25%; }
  @media (max-width: 767px) {
    #sidebar {
      width: 15%; } }

.footerSidebar {
  position: sticky;
  width: 100%;
  top: 150px;
  margin: 0px auto;
  font-size: 1rem;
  padding: 5px 15px 0 15px;
  border-right: 1px solid #1e1e1e;
  text-align: right; }
  @media (max-width: 767px) {
    .footerSidebar {
      display: none; } }
  .footerSidebar li:hover {
    color: #f8d000;
    transition: .3s; }

#returnToTop {
  display: none;
  padding-top: 30px;
  font-family: "Cooper Hewitt Heavy";
  cursor: pointer;
  scroll-behavior: smooth; }

#returnToTopMobile {
  display: none;
  transition: .3s;
  position: sticky;
  justify-content: center;
  top: 150px; }
  #returnToTopMobile i {
    color: #1e1e1e;
    font-size: 3rem; }
    @media (max-width: 420px) {
      #returnToTopMobile i {
        font-size: 2rem; } }
  @media (min-width: 768px) {
    #returnToTopMobile {
      display: none !important; } }

.plainPageBody {
  display: flex;
  position: relative;
  background: #ffffff;
  z-index: 100;
  flex-direction: row;
  margin: 0px auto;
  padding: 40px 0; }
  .plainPageBody h5 {
    font-size: 1rem;
    line-height: 1.25rem; }

.foundationCenter {
  margin: 0px auto; }

.footerBody {
  width: 65%;
  padding: 0 20px; }
  .footerBody h4 {
    padding-top: 20px; }
  .footerBody hr {
    border: 2px solid #1e1e1e;
    margin: 40px auto; }
  @media (max-width: 767px) {
    .footerBody {
      width: 85%;
      padding: 0 20px 0 10px; } }

.submit {
  background: #1e1e1e;
  color: #ffffff;
  margin-top: 1rem;
  padding: 10px 12px 7px 12px;
  width: fit-content;
  border: 0;
  font-size: 1.25rem;
  font-family: "Cooper Hewitt Semibold";
  line-height: 1;
  border-radius: 2px; }
  @media (max-width: 575px) {
    .submit {
      margin-top: .5rem; } }

.submit:hover {
  background: #ffffff;
  color: #1e1e1e;
  box-shadow: 0px 0px 0px 2px inset;
  transition: .4s; }

.footerEmail {
  background: none !important;
  border-bottom: 2px solid #f8d000 !important;
  padding: 2px 0 0 0 !important;
  color: #ffffff !important; }

form .bold {
  margin-bottom: .5rem; }

.footerEmail:hover {
  border: 2px solid #ffffff !important; }

.submitFooter {
  background: #f8d000;
  color: #1e1e1e;
  margin-top: .5rem;
  width: fit-content;
  border: 0;
  padding: 8px 8px 5px 8px;
  font-size: 1rem;
  font-family: "Cooper Hewitt Semibold";
  line-height: 1;
  border: 2px solid #f8d000; }

.submitFooter:hover {
  color: #ffffff;
  transition: .4s;
  border-bottom: 2px solid #ffffff;
  background: #1e1e1e;
  border: 2px solid #ffffff;
  box-sizing: border-box; }

.radioButtons {
  display: flex; }

.faqsGlossary {
  text-decoration: underline;
  font-size: 14px;
  display: flex;
  padding: 0 0 25px 0; }
  .faqsGlossary ul {
    justify-content: center; }
    .faqsGlossary ul a li {
      padding: 5px 0; }

.faqs {
  display: flex;
  padding: 0 0 25px 0; }

.ccpaColumns {
  width: 100%;
  display: flex; }
  .ccpaColumns .ccpaLeft {
    width: 20%;
    border-left: 1px solid #1e1e1e;
    border-right: 1px solid #1e1e1e;
    border-bottom: 1px solid #1e1e1e; }
  .ccpaColumns .ccpaCenter {
    width: 60%;
    border-right: 1px solid #1e1e1e;
    border-bottom: 1px solid #1e1e1e; }
  .ccpaColumns .ccpaRight {
    width: 20%;
    border-right: 1px solid #1e1e1e;
    border-bottom: 1px solid #1e1e1e; }
  .ccpaColumns .ccpaHeader {
    font-family: "Cooper Hewitt Semibold";
    font-size: 1rem;
    border-top: 1px solid #1e1e1e; }
  .ccpaColumns .ccpaLeft, .ccpaColumns .ccpaCenter, .ccpaColumns .ccpaRight {
    padding: 5px; }

.simpleList {
  list-style-type: disc;
  margin: 20px !important; }

.foundationLogo {
  width: 100%;
  height: 200px;
  margin-bottom: 50px;
  display: flex;
  justify-content: center; }
  .foundationLogo img {
    height: 100%;
    width: auto;
    margin: 0px auto; }

.foundationLearnMoreButtons {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  flex-wrap: wrap; }
  @media (max-width: 575px) {
    .foundationLearnMoreButtons {
      flex-direction: column; } }
  .foundationLearnMoreButtons a {
    display: block;
    padding-bottom: 20px;
    width: 100%; }

.foundationLearnMore {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 25px 0; }
  .foundationLearnMore .grantImageLinkButtons {
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden; }
  @media (max-width: 575px) {
    .foundationLearnMore {
      width: 100%;
      padding: 0 0 25px 0;
      border-right: none;
      border-bottom: 2px solid #dddddd; }
      .foundationLearnMore h4 {
        font-size: 1.5rem !important;
        line-height: 1.8rem !important; } }

.grantImageLink {
  width: 100%;
  padding-right: 10px;
  max-width: 400px; }

.grantImageLinkContainer {
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: .5s;
  -webkit-transform: scale(1);
  /* Safari + Chrome */
  -moz-transform: scale(1);
  /* Firefox */
  -ms-transform: scale(1);
  /* IE 9 */
  -o-transform: scale(1);
  /* Opera */
  transform: scale(1); }
  @media (max-width: 767px) {
    .grantImageLinkContainer img {
      width: 100%; } }

.grantImageLink:hover img {
  transition: .5s;
  -webkit-transform: scale(1.1);
  /* Safari + Chrome */
  -moz-transform: scale(1.1);
  /* Firefox */
  -ms-transform: scale(1.1);
  /* IE 9 */
  -o-transform: scale(1.1);
  /* Opera */
  transform: scale(1.1); }

.donateButton {
  background: #f8d000;
  border-radius: 100px;
  color: #1e1e1e;
  font-family: "Cooper Hewitt Heavy";
  font-size: 1.25rem;
  padding: 10px;
  max-width: 275px;
  margin: 20px auto;
  text-align: center; }

.donateButton:hover {
  background: #1e1e1e;
  color: #ffffff;
  transition: .3s; }

.sectionHeaderFrame {
  height: 500px;
  display: flex;
  box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.19), 1px 2px 6px rgba(0, 0, 0, 0.23);
  z-index: 4;
  position: relative;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  align-content: center;
  align-items: center; }
  @media (max-width: 767px) {
    .sectionHeaderFrame {
      height: 300px; } }
  .sectionHeaderFrame h2 {
    font-size: 6rem;
    font-family: "Cooper Hewitt Heavy" !important;
    color: #ffffff;
    text-align: center;
    max-width: 750px;
    width: 70%;
    margin: 0px auto; }
    @media (max-width: 767px) {
      .sectionHeaderFrame h2 {
        font-size: 3rem;
        width: 90%; } }
  .sectionHeaderFrame h3 {
    font-size: 1.25rem;
    line-height: 1.5rem;
    color: #ffffff;
    text-align: center;
    font-family: "Cooper Hewitt";
    width: 70%;
    max-width: 750px;
    margin: 0px auto; }
    @media (max-width: 767px) {
      .sectionHeaderFrame h3 {
        font-size: 1rem;
        line-height: 1.25rem;
        width: 80%; } }
  .sectionHeaderFrame hr {
    border: 1px solid #ffffff;
    width: 40%;
    margin: 40px auto; }
    @media (max-width: 767px) {
      .sectionHeaderFrame hr {
        margin: 20px auto; } }

.recipesTitle {
  background: radial-gradient(rgba(0, 0, 0, 0.55) 60%, rgba(0, 0, 0, 0.35) 100%), url("../img/recipeHeader.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat; }

.storyTitle {
  background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url("../img/oldphoto.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat; }

.sustainabilityTitle {
  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3)), url("../img/sustainabilityHeader.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat; }
  .sustainabilityTitle h2, .sustainabilityTitle h3 {
    color: #1e1e1e !important; }
  .sustainabilityTitle hr {
    border: 1px solid #1e1e1e !important; }

.sustainabilityBody {
  font-family: "Cooper Hewitt";
  display: flex;
  width: 100%;
  margin: 0px auto;
  justify-content: center;
  flex-direction: column; }

.sustainabilitySubtitle {
  width: 100%;
  font-family: "Cooper Hewitt Heavy";
  font-family: "Cooper Hewitt Heavy";
  clip-path: circle(150vw at 50% -118vw);
  color: #ffffff;
  justify-content: center;
  padding: 85px 0;
  text-align: center;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5vw), 0 100%); }
  @media (min-width: 1501px) {
    .sustainabilitySubtitle {
      font-size: 5rem;
      line-height: 5.5rem; } }
  @media (max-width: 1500px) {
    .sustainabilitySubtitle {
      font-size: 4rem;
      line-height: 4.7rem; } }
  @media (max-width: 1300px) {
    .sustainabilitySubtitle {
      font-size: 3rem;
      line-height: 3.5rem; } }
  @media (max-width: 1000px) {
    .sustainabilitySubtitle {
      font-size: 3rem;
      line-height: 3.5rem; } }
  @media (max-width: 767px) {
    .sustainabilitySubtitle {
      font-size: 2.5rem;
      line-height: 2.8rem; } }
  @media (max-width: 575px) {
    .sustainabilitySubtitle {
      font-size: 2rem;
      line-height: 2.3rem; } }
  @media (max-width: 420px) {
    .sustainabilitySubtitle {
      font-size: 2rem;
      line-height: 2.3rem; } }
  @media (max-width: 767px) {
    .sustainabilitySubtitle {
      padding: 50px 0; } }
  .sustainabilitySubtitle h3 {
    padding: 0 20px; }
    @media (min-width: 800px) {
      .sustainabilitySubtitle h3 {
        font-size: 4rem;
        line-height: 4rem; } }

.sustainabilityPackaging {
  background: rgba(248, 208, 0, 0.5); }

.sustainabilitySection {
  display: flex;
  flex-direction: column; }

.sustainabilitySubtitlePackaging {
  background: #f8d000; }
  .sustainabilitySubtitlePackaging h3 {
    color: #1e1e1e; }

.packagingHalvesContainer {
  width: 100%;
  padding: 25px;
  display: flex;
  justify-content: center; }
  @media (max-width: 767px) {
    .packagingHalvesContainer {
      flex-direction: column;
      align-items: center; } }

.sustainabilityLeftHalf {
  display: flex;
  flex-direction: column;
  width: 60%; }
  .sustainabilityLeftHalf img {
    padding: 20px; }
  .sustainabilityLeftHalf h5 {
    font-family: "Cooper Hewitt Heavy";
    font-size: 2rem;
    line-height: 2rem;
    padding: 25px 0 10px 0; }
  .sustainabilityLeftHalf p {
    font-size: 1.25rem;
    align-self: center; }
  @media (max-width: 767px) {
    .sustainabilityLeftHalf {
      width: 80%;
      text-align: center; } }

.tenPercentReduction {
  display: flex;
  width: 100%; }
  .tenPercentReduction p {
    font-size: 1.5rem; }
  .tenPercentReduction img {
    max-width: 300px;
    align-self: center;
    height: 100%; }
  @media (max-width: 767px) {
    .tenPercentReduction {
      flex-direction: column; } }

.heavyFont {
  font-family: "Cooper Hewitt Semibold" !important; }

.sustainabilityBubble {
  background: #1e1e1e;
  color: #ffffff;
  border-radius: 100px;
  padding: 15px;
  font-family: "Cooper Hewitt Semibold";
  width: fit-content;
  display: table;
  margin: 10px 0; }
  @media (max-width: 767px) {
    .sustainabilityBubble {
      margin: 10px auto;
      justify-self: center; } }

.subtext {
  font-style: italic;
  font-size: 0.6rem !important; }

.sustainabilityRightHalf {
  width: 30%;
  display: flex;
  flex-direction: column; }
  .sustainabilityRightHalf img {
    max-height: 400px;
    margin: 0px auto;
    align-self: center; }
  @media (max-width: 767px) {
    .sustainabilityRightHalf {
      display: none; } }

.sustainabilityReduction {
  background: rgba(15, 75, 47, 0.5); }

.sustainabilitySubtitleReduction {
  background: #0f4b2f; }

.sustainabilityBodyIconContainer {
  display: flex;
  width: 80%;
  justify-content: center;
  margin: 0px auto;
  flex-wrap: wrap; }

.sustainabilityBodyIcon {
  width: 33.3%;
  padding: 10px;
  display: flex;
  align-self: baseline;
  align-items: center;
  flex-direction: column; }
  .sustainabilityBodyIcon img {
    width: 50%;
    padding: 0 20px 20px 20px;
    height: 100%; }
  @media (max-width: 767px) {
    .sustainabilityBodyIcon {
      width: 50%; } }
  @media (max-width: 575px) {
    .sustainabilityBodyIcon {
      width: 100%; } }
  .sustainabilityBodyIcon p {
    font-size: 1.25rem;
    font-family: "Cooper Hewitt Medium";
    text-align: center;
    width: 100%; }

.moreEnergyFacts {
  display: block;
  background: rgba(15, 75, 47, 0.9);
  color: #ffffff;
  border-radius: 100px;
  margin: 15px; }
  .moreEnergyFacts p {
    margin: 0;
    line-height: 1.2rem;
    padding: 10px 20px;
    text-align: center; }

.ecoBest {
  width: 100%;
  padding: 20px 15%; }
  .ecoBest p, .ecoBest ul {
    list-style-type: disc; }

.ecoBestFacts {
  padding: 20px; }

.ecoBestLogo {
  display: flex;
  width: 100%;
  justify-content: center; }
  .ecoBestLogo img {
    width: 150px; }
  .ecoBestLogo .ecoBestLogoHeader {
    padding: 20px;
    width: 70%;
    padding-bottom: 0;
    margin-bottom: 0;
    font-family: "Cooper Hewitt Medium"; }

.ecoBestLogos {
  display: flex;
  width: 100%;
  justify-content: space-between;
  padding: 0 0 15px 0; }
  .ecoBestLogos img {
    align-self: center;
    max-height: 125px;
    width: 50%; }

.sustainabilitySubtitleEnergy {
  background: #161d59; }

.sustainabilityEnergy {
  background: rgba(22, 29, 89, 0.5); }

.sustainabilitySubtitleQuik {
  background: rgba(30, 30, 30, 0.9); }

.sustainabilitySubtitleShowa {
  background: rgba(30, 30, 30, 0.9); }

.sustainabilityQuik {
  background: rgba(30, 30, 30, 0.1); }

.kwikLokLeftHalf {
  width: 50%;
  flex-direction: column;
  justify-content: center;
  padding: 0 20px 0 0;
  display: flex;
  align-items: center; }
  @media (max-width: 767px) {
    .kwikLokLeftHalf {
      width: 70%;
      padding: 10px 0 20px 0;
      margin: 0px auto;
      align-self: center;
      justify-content: center; } }
  .kwikLokLeftHalf img {
    max-width: 250px;
    max-height: 250px;
    margin: 15px 0; }

.kwikLokRightHalf {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 2px solid #1e1e1e;
  padding: 0 0 0 30px; }
  .kwikLokRightHalf p {
    font-family: "Cooper Hewitt Medium";
    margin-bottom: 0; }
  @media (max-width: 767px) {
    .kwikLokRightHalf {
      width: 100%;
      border: 0px; } }

.timelineFrame {
  background: #ffffff;
  width: 100%;
  margin: 0px auto;
  display: flex;
  flex-direction: column; }

.timelineVerticalLine {
  position: absolute;
  background: #1e1e1e;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 3px;
  z-index: 2; }

.timelineSection {
  max-width: 900px;
  margin: 0px auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  background: #1e1e1e; }

.timelineEvent {
  width: 50%;
  display: flex;
  flex-direction: row;
  background: #ffffff; }
  .timelineEvent .timelineCopyRight {
    padding: 2% 2% 2% 5%;
    width: 90%;
    align-self: center; }
    .timelineEvent .timelineCopyRight h3 {
      color: #f8d000;
      font-size: 3rem;
      font-family: "Cooper Hewitt Heavy"; }
    .timelineEvent .timelineCopyRight p {
      color: #1e1e1e;
      font-size: 1rem; }
  .timelineEvent .timelineCopyLeft {
    padding: 2% 5% 2% 2%;
    width: 90%;
    text-align: right;
    align-self: center; }
    .timelineEvent .timelineCopyLeft h3 {
      color: #f8d000;
      font-size: 3rem;
      font-family: "Cooper Hewitt Heavy"; }
    .timelineEvent .timelineCopyLeft p {
      color: #1e1e1e;
      font-size: 1rem; }
  .timelineEvent .timelineLine {
    align-self: center;
    height: 3px;
    width: 10%;
    background: #1e1e1e; }

.timelineGraphicContainer {
  background: #ffffff;
  padding: 20px 0;
  width: 50%; }
  .timelineGraphicContainer .timelineGraphic {
    background: #ffffff;
    width: 100%;
    height: 350px;
    margin: 0px auto;
    display: flex;
    align-items: center; }
    .timelineGraphicContainer .timelineGraphic img {
      object-fit: cover;
      width: 100%;
      height: 100%; }
      @media (max-width: 575px) {
        .timelineGraphicContainer .timelineGraphic img {
          max-height: 200px; } }
      @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
        .timelineGraphicContainer .timelineGraphic img {
          max-width: 100%;
          max-height: 100%;
          width: auto;
          height: auto;
          flex-shrink: 0; } }
    .timelineGraphicContainer .timelineGraphic .timelineBug {
      padding: 0 20px;
      max-width: 150px;
      margin: 0px auto; }

.tLeft .timelineEvent .timelineLine {
  justify-self: right; }

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .tRight .timelineGraphicContainer div {
    justify-content: flex-end; } }

.tRight .timelineEvent .timelineLine {
  justify-self: left; }

.productPrintWindow {
  color: #1e1e1e !important;
  display: flex;
  flex-direction: row; }
  .productPrintWindow .productPrintLeftHalf {
    width: 50%;
    display: flex;
    flex-direction: column;
    padding: 25px; }
    .productPrintWindow .productPrintLeftHalf img {
      width: 100%;
      height: auto;
      max-width: 3in;
      margin: 0px auto; }
  .productPrintWindow .productPrintRightHalf {
    width: 50%;
    display: flex;
    flex-direction: column;
    padding: 25px; }
    .productPrintWindow .productPrintRightHalf .productPrintTitle h1 {
      font-size: 5rem;
      line-height: 5.5rem; }

.productPrintDisclaimer {
  font-style: italic;
  font-size: 10px; }

.productPrintLogo {
  width: 100%;
  display: block;
  justify-content: center;
  background: #1e1e1e; }
  .productPrintLogo img {
    display: block;
    padding: 20px;
    width: 150px;
    margin: 0px auto; }

@media print {
  .navBox, .togglePrint, .productControls, .footer, .printRecipe, #valRecipeDescription, .footerBase {
    display: none; }
  .recipeHero {
    height: unset; }
  .logoRecipePrint {
    display: flex;
    margin: 0px auto;
    padding: 0 0 25px 0;
    width: 250px; }
    .logoRecipePrint img {
      width: 100%;
      height: auto; }
  .recipeContainer {
    height: min-content !important; }
  .productImageContainer {
    justify-content: flex-start !important;
    padding: 0px !important;
    height: 100% !important;
    width: 40% !important;
    top: 0 !important;
    background: none !important; }
    .productImageContainer img {
      background: none !important; }
  .belowNav {
    background: none !important;
    z-index: 10;
    background: #ffffff; }
  .productFlexbox {
    margin-bottom: 25px; }
  .nutritionFacts ul li {
    font-size: 0.75rem !important;
    line-height: 1.25rem !important; }
  .nutritional {
    color: #1e1e1e !important;
    border-left: 1px solid #1e1e1e !important;
    width: 60% !important;
    height: 100vh !important;
    min-height: unset !important;
    padding: 0px 25px 0px 40px !important;
    font-family: "Roboto", sans-serif !important;
    background: none !important; }
  .printFooter {
    display: flex;
    position: fixed;
    bottom: 0; }
  .thinDivider, .thinDividerDark {
    margin: 5px 0; }
  .nutritionalTitle, #valRecipeName {
    font-size: 4rem !important;
    line-height: 4.3rem !important;
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
    padding-top: 0;
    margin-top: 0; }
  #valProductIngredientsPrint {
    display: flex !important;
    flex-direction: column;
    padding: 30px 20px 0 0 !important;
    font-family: "Roboto", sans-serif !important; }
  #valProductIngredientsPrint::before {
    content: 'INGREDIENTS: ';
    font-family: "Roboto", sans-serif !important;
    font-weight: 900; }
  #valIngredients li {
    font-family: "Roboto", sans-serif !important;
    font-weight: 700; }
  .recipeInstruction {
    font-family: "Roboto", sans-serif !important; }
  .recipeSteps h3, .recipeIngredients h3 {
    font-family: "Roboto", sans-serif !important;
    font-weight: 900 !important; }
  .bold, .recipeStep {
    font-family: "Roboto", sans-serif !important;
    font-weight: 700 !important; }
  html, body {
    font-family: 'Roboto', sans-serif;
    background: none !important;
    height: min-content !important;
    max-height: min-content !important;
    z-index: -1 !important; } }