@font-face {
  font-family: "Roboto Heavy";
  src: url("../fonts/Roboto-Black.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto Bold";
  src: url("../fonts/Roboto-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto Medium";
  src: url("../fonts/Roboto-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Light.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto Slab";
  src: url("../fonts/RobotoSlab-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto Slab Bold";
  src: url("../fonts/RobotoSlab-Bold.ttf") format("truetype");
}
@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");
}
.berkshire-swash-regular {
  font-family: "Berkshire Swash", serif;
  font-weight: 400;
  font-style: normal;
}

.navMenuMobile, .navMenu {
  background: rgba(40, 40, 40, 0.6);
  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;
}
@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: rgb(248, 208, 0);
  padding: 10px 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.navAlert .navAlertText {
  width: 100%;
  color: rgb(30, 30, 30);
}
.navAlert .navAlertText p {
  font-family: "Cooper Hewitt Medium";
  margin: 0;
  font-size: 11px;
}
.navAlert .navAlertClose {
  width: 10%;
  color: rgb(30, 30, 30);
  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 rgb(248, 208, 0);
  box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.19), 1px 2px 6px rgba(0, 0, 0, 0.23);
  /*.homeUnderline:hover {
    border-bottom: 2px solid $dark;
  }*/
}
.navMenu.productsClicked .barWrapper, .navMenuHome.productsClickedHome .barWrapper {
  background: #ffffff;
}
.navMenu.productsClicked .homeLogo, .navMenuHome.productsClickedHome .homeLogo {
  fill: rgb(30, 30, 30);
}
.navMenu.productsClicked .homeUnderline, .navMenuHome.productsClickedHome .homeUnderline {
  color: rgb(30, 30, 30);
}

.navMenu.productsClicked, .navMenuHome.productsClickedHome {
  height: 100vh;
  max-height: 1000px;
  background: linear-gradient(rgb(255, 255, 255), rgba(255, 255, 255, 0.2)), url("../img/white-waves.png") repeat;
}
.navMenu.productsClicked .productMenuGrid, .navMenuHome.productsClickedHome .productMenuGrid {
  display: flex;
  opacity: 1;
}
.navMenu.productsClicked .nav-link, .navMenuHome.productsClickedHome .nav-link {
  color: rgb(30, 30, 30) !important;
  transition: 0.3s;
}
.navMenu.productsClicked .menuTexture, .navMenuHome.productsClickedHome .menuTexture {
  position: absolute;
  width: 50%;
  height: 100%;
  z-index: 100;
  opacity: 0.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%;
  -o-object-fit: initial;
     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: 3rem;
    line-height: 3.4rem;
  }
}
@media (max-width:1500px) {
  .navMenu.productsClicked .menuCategoryHeader .menuCategoryCaption h2, .navMenuHome.productsClickedHome .menuCategoryHeader .menuCategoryCaption h2 {
    font-size: 2.5rem;
    line-height: 2.9rem;
  }
}
@media (max-width:1300px) {
  .navMenu.productsClicked .menuCategoryHeader .menuCategoryCaption h2, .navMenuHome.productsClickedHome .menuCategoryHeader .menuCategoryCaption h2 {
    font-size: 2.5rem;
    line-height: 2.9rem;
  }
}
@media (max-width:1000px) {
  .navMenu.productsClicked .menuCategoryHeader .menuCategoryCaption h2, .navMenuHome.productsClickedHome .menuCategoryHeader .menuCategoryCaption h2 {
    font-size: 2rem;
    line-height: 2.3rem;
  }
}
@media (max-width:767px) {
  .navMenu.productsClicked .menuCategoryHeader .menuCategoryCaption h2, .navMenuHome.productsClickedHome .menuCategoryHeader .menuCategoryCaption h2 {
    font-size: 2rem;
    line-height: 2.3rem;
  }
}
@media (max-width:575px) {
  .navMenu.productsClicked .menuCategoryHeader .menuCategoryCaption h2, .navMenuHome.productsClickedHome .menuCategoryHeader .menuCategoryCaption h2 {
    font-size: 1.75rem;
    line-height: 1.9rem;
  }
}
@media (max-width:420px) {
  .navMenu.productsClicked .menuCategoryHeader .menuCategoryCaption h2, .navMenuHome.productsClickedHome .menuCategoryHeader .menuCategoryCaption h2 {
    font-size: 1.75rem;
    line-height: 1.9rem;
  }
}
.navMenu.productsClicked .menuCategoryHeader .menuCategoryCaption h3, .navMenuHome.productsClickedHome .menuCategoryHeader .menuCategoryCaption h3 {
  font-size: 2rem;
  font-family: "Cooper Hewitt";
  line-height: 2.4rem;
}
@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 rgb(248, 208, 0);
}
.navMenu.productsClicked .defaultCategoryHeader, .navMenuHome.productsClickedHome .defaultCategoryHeader {
  opacity: 1;
  display: flex;
  align-items: center;
  align-self: flex-end !important;
  background: linear-gradient(rgb(30, 30, 30), rgb(30, 30, 30)), 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(rgb(1, 115, 134), rgb(1, 115, 134)), url("../img/white-waves.png") repeat;
}
.navMenu.productsClicked .premiumCategoryHeader, .navMenuHome.productsClickedHome .premiumCategoryHeader {
  background: linear-gradient(rgb(106, 33, 63), rgb(106, 33, 63)), url("../img/white-waves.png") repeat;
}
.navMenu.productsClicked .classicCategoryHeader, .navMenuHome.productsClickedHome .classicCategoryHeader {
  background: linear-gradient(rgb(170, 24, 44), rgb(170, 24, 44)), url("../img/white-waves.png") repeat;
}
.navMenu.productsClicked .gfCategoryHeader, .navMenuHome.productsClickedHome .gfCategoryHeader {
  background: linear-gradient(rgb(22, 29, 89), rgb(22, 29, 89)), url("../img/white-waves.png") repeat;
}
.navMenu.productsClicked .bunsCategoryHeader, .navMenuHome.productsClickedHome .bunsCategoryHeader {
  background: linear-gradient(rgb(170, 24, 44), rgb(170, 24, 44)), url("../img/white-waves.png") repeat;
}
.navMenu.productsClicked .bagelsCategoryHeader, .navMenuHome.productsClickedHome .bagelsCategoryHeader {
  background: linear-gradient(rgb(30, 30, 30), rgb(30, 30, 30)), url("../img/white-waves.png") repeat;
}
.navMenu.productsClicked .muffinsCategoryHeader, .navMenuHome.productsClickedHome .muffinsCategoryHeader {
  background: linear-gradient(rgb(15, 75, 47), rgb(15, 75, 47)), url("../img/white-waves.png") repeat;
}
.navMenu.productsClicked .sweetsCategoryHeader, .navMenuHome.productsClickedHome .sweetsCategoryHeader {
  background: linear-gradient(rgb(215, 0, 110), rgb(215, 0, 110)), url("../img/white-waves.png") repeat;
}

.menuCategoryContainer {
  display: none;
}

.navMenuHomeMobile.mobileMenuClicked, .navMenuMobile.mobileMenuClicked {
  background: rgba(20, 20, 20, 0.95);
  transition: 0.3s;
}
.navMenuHomeMobile.mobileMenuClicked .mobileMenu, .navMenuMobile.mobileMenuClicked .mobileMenu {
  display: flex;
  height: 100vh;
  opacity: 1;
}

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

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

.nav-link {
  color: #ffffff;
}

.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 {
  color: #ffffff;
}
.navMenu ul {
  align-items: center;
  justify-self: end;
  color: #ffffff;
  display: flex;
  padding-right: 12px;
}
@media (max-width:767px) {
  .navMenu ul {
    padding-right: 0;
  }
}

.navbar-brand {
  padding: 0px 10px 0 20px;
  transition: 0.3s;
  align-self: center;
}
.navbar-brand img {
  width: 95px;
  transition: 0.3s;
}

.navMenuMobile {
  position: fixed;
  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: #ffffff;
  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: rgb(30, 30, 30);
  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: 2.5rem;
    line-height: 2.9rem;
  }
}
@media (max-width:1500px) {
  .menuRight .menuCategory {
    font-size: 2rem;
    line-height: 2.3rem;
  }
}
@media (max-width:1300px) {
  .menuRight .menuCategory {
    font-size: 2rem;
    line-height: 2.3rem;
  }
}
@media (max-width:1000px) {
  .menuRight .menuCategory {
    font-size: 1.75rem;
    line-height: 1.9rem;
  }
}
@media (max-width:767px) {
  .menuRight .menuCategory {
    font-size: 1.75rem;
    line-height: 1.9rem;
  }
}
@media (max-width:575px) {
  .menuRight .menuCategory {
    font-size: 1.5rem;
    line-height: 1.7rem;
  }
}
@media (max-width:420px) {
  .menuRight .menuCategory {
    font-size: 1.5rem;
    line-height: 1.7rem;
  }
}
@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: -moz-min-content;
  height: min-content;
}

.mobileMenu {
  display: none;
  flex-direction: column;
  top: 70px;
}
@media (min-width: 768px) {
  .mobileMenu {
    display: none !important;
  }
}
.mobileMenu ul {
  width: 100%;
  font-size: 2rem;
  padding-top: 15%;
}

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

@media (min-width: 992px) {
  .navbar-expand-lg {
    justify-content: space-between;
  }
}
.logo.logoFill {
  transition: fill 0.2s ease-in, width 0.2s ease-in;
  width: 125px;
  fill: rgb(30, 30, 30);
  vertical-align: middle;
  display: block;
}

.navbar {
  transition: background-color 0.5s ease-out, padding 0.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 {
  transition: background-color 0.2s ease-in, padding 0.2s ease-in;
  background-color: rgba(40, 40, 40, 0.7) !important;
  top: -1px;
}
.navMenuHome.barScrolling .menuRight .menuToggleHome, .navMenuHomeMobile.barScrolling .menuRight .menuToggleHome {
  line-height: 1;
}
.navMenuHome.barScrolling .menuRight .menuToggleHome i, .navMenuHomeMobile.barScrolling .menuRight .menuToggleHome i {
  color: #ffffff;
}
.navMenuHome.barScrolling .homeLogo, .navMenuHomeMobile.barScrolling .homeLogo {
  fill: rgb(30, 30, 30) !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;
  /*a span:hover {
    border-bottom: 2px solid $dark;
    transition: .2s;
  }*/
}
@media (max-width:767px) {
  .nav-item {
    padding: 10px;
  }
}
@media (max-height: 570px) {
  .nav-item {
    padding: 3px 0;
  }
}

.menuItem.linkScrolling {
  color: rgb(30, 30, 30) !important;
}

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

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

.nav-link {
  font-size: 14pt;
  color: #ffffff;
  cursor: pointer !important;
  font-family: "Roboto Bold";
  text-decoration: none !important;
  transition: 0.3s;
}
@media (max-width:1000px) {
  .nav-link {
    font-size: 12pt;
  }
}
@media (max-width:767px) {
  .nav-link {
    font-size: 1.5rem;
    text-align: center;
  }
}

.nav-link:hover {
  color: rgb(248, 208, 0);
  transition: 0.3s;
}

.nav-link.homeLinkActive {
  color: rgb(30, 30, 30);
}

/*.homeUnderline.hu:hover{
  border-bottom: 2px solid $white!important;
  transition: .2s;
}

.homeUnderline:hover {
  border-bottom:2px solid $dark;
  transition: .2s;
}

.menuUnderline:hover {
  border-bottom:2px solid $dark;
  transition: .2s;
}

.homeUnderline.whiteText {
  color: $white;
}*/
html {
  height: 100%;
  min-height: 100%;
  width: 100%;
}

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

.belowNav {
  width: 100%;
  display: inline-block;
  position: relative;
  z-index: 100;
  background: #ffffff;
}

.indexContainer {
  overflow: hidden;
  position: relative;
 /* display: inline-block; */
  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: rgb(30, 30, 30) !important;
  background: none !important;
}

.twoColGrid {
  display: flex;
   align-items: flex-start;
}
.twoColGrid div {
  width: 50%;
  display: flex;
  flex-direction: column;
  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%;
  }
}

.tourCopy {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 1.1em;
  font-variation-settings:
    "wdth" 300;
}

h1 {
  font-family: "Cooper Hewitt Heavy";
  text-align: left;
}
@media (min-width:1501px) {
  h1 {
    font-size: 3rem;
    line-height: 3.4rem;
  }
}
@media (max-width:1500px) {
  h1 {
    font-size: 2.5rem;
    line-height: 2.9rem;
  }
}
@media (max-width:1300px) {
  h1 {
    font-size: 2.5rem;
    line-height: 2.9rem;
  }
}
@media (max-width:1000px) {
  h1 {
    font-size: 2rem;
    line-height: 2.3rem;
  }
}
@media (max-width:767px) {
  h1 {
    font-size: 2rem;
    line-height: 2.3rem;
  }
}
@media (max-width:575px) {
  h1 {
    font-size: 1.75rem;
    line-height: 1.9rem;
  }
}
@media (max-width:420px) {
  h1 {
    font-size: 1.75rem;
    line-height: 1.9rem;
  }
}
@media (min-width: 1001px) {
  h1 {
    font-size: 2.5rem;
    line-height: 2.9rem;
  }
}

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

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

h4 {
  font-family: "Cooper Hewitt Medium";
  font-family: "Cooper Hewitt Semibold";
}
@media (min-width:1501px) {
  h4 {
    font-size: 1.75rem;
    line-height: 1.9rem;
  }
}
@media (max-width:1500px) {
  h4 {
    font-size: 1.75rem;
    line-height: 1.9rem;
  }
}
@media (max-width:1300px) {
  h4 {
    font-size: 1.5rem;
    line-height: 1.7rem;
  }
}
@media (max-width:1000px) {
  h4 {
    font-size: 1.5rem;
    line-height: 1.7rem;
  }
}
@media (max-width:767px) {
  h4 {
    font-size: 1.25rem;
    line-height: 1.4rem;
  }
}
@media (max-width:575px) {
  h4 {
    font-size: 1.25rem;
    line-height: 1.4rem;
  }
}
@media (max-width:420px) {
  h4 {
    font-size: 1rem;
    line-height: 1.1rem;
  }
}

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

a {
  text-decoration: none;
  color: rgb(30, 30, 30);
}

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

.boldLink:hover {
  color: rgb(248, 208, 0) !important;
  transition: 0.3s;
}

a:hover {
  text-decoration: none;
}

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

p a:hover, li a:hover {
  color: rgb(248, 208, 0);
  transition: 0.3s;
}

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

.italic {
  font-style: italic;
}

.darkText {
  color: rgb(30, 30, 30) !important;
}

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

.logo.logoActive {
  fill: rgb(30, 30, 30);
}

.hidden {
  display: none;
}

.bigLogo {
  width: 40vw;
  max-width: 400px;
  margin: 0px auto;
  padding-bottom: 4%;
}
@media (max-width:767px) {
  .bigLogo {
    width: 50vw;
  }
}

.logoDark {
  fill: rgb(30, 30, 30) !important;
}

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

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

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

.darkButton {
  background: rgb(30, 30, 30);
}

.darkButton:hover {
  background: rgba(30, 30, 30, 0.7);
  color: #ffffff;
  transition: 0.2s;
  cursor: p;
}

.lightButton {
  background: #ffffff;
}

.yellowButton {
  background: rgb(248, 208, 0);
  border: 2px solid rgb(248, 208, 0);
}

.yellowButton:hover {
  background: rgba(248, 208, 0, 0.5);
  border: 2px solid rgb(248, 208, 0);
  box-sizing: border-box;
  transition: 0.2s;
}

.blueButton {
  background:rgb(0, 57, 119, 0.9);
  border: 2px solid rgb(0, 112, 248);
}

.blueButton:hover {
  background: rgba(0, 62, 248, 0.5);
  border: 2px solid rgba(22, 29, 89, 0.5);
  box-sizing: border-box;
  transition: 0.2s;
}

.lightButton:hover {
  transition: 0.2s;
}
.lightButton:hover .buttonText, .lightButton:hover .darkButtonText {
  color: rgb(30, 30, 30);
  cursor: pointer;
}

.lightButtonText, .blueButtonText, .yellowButtonText, .darkButtonText, .greenButtonText {
  font-size: 1.125rem;
  font-family: "Cooper Hewitt Semibold";
  padding: 12px 20px;
  margin: 0;
  line-height: 1;
}
@media (max-width:767px) {
  .lightButtonText, .blueButtonText, .yellowButtonText, .darkButtonText, .greenButtonText {
    font-size: 1rem;
  }
}
@media (max-width:575px) {
  .lightButtonText, .blueButtonText, .yellowButtonText, .darkButtonText, .greenButtonText {
    font-size: 0.875rem;
  }
}

.darkButtonText {
  color: #ffffff;
}

.lightButtonText, .yellowButtonText {
  color: rgb(30, 30, 30);
}

.blueButtonText {
  color: rgb(216, 223, 235);
}

.blueButtonText:hover {
  text-decoration: none;
  color: rgb(20, 18, 41);
}

.buttonText:hover {
  text-decoration: none;
  color: rgb(248, 208, 0);
  cursor: pointer;
}

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

.buttonBorder {
  border: 2px solid rgb(30, 30, 30);
  box-sizing: content-box;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
}

.buttonBorder:hover {
  background: rgba(30, 30, 30, 0.2);
}
.buttonBorder:hover .darkButtonText {
  color: #ffffff !important;
}

.covidBox {
  background: rgb(248, 208, 0);
  border: 5px solid #ffffff;
  padding: 20px;
  margin-left: 30px;
}
.covidBox p {
  color: rgb(30, 30, 30);
  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: 3rem;
    line-height: 3.4rem;
  }
}
@media (max-width:1500px) {
  .fixedHeader {
    font-size: 2.5rem;
    line-height: 2.9rem;
  }
}
@media (max-width:1300px) {
  .fixedHeader {
    font-size: 2.5rem;
    line-height: 2.9rem;
  }
}
@media (max-width:1000px) {
  .fixedHeader {
    font-size: 2rem;
    line-height: 2.3rem;
  }
}
@media (max-width:767px) {
  .fixedHeader {
    font-size: 2rem;
    line-height: 2.3rem;
  }
}
@media (max-width:575px) {
  .fixedHeader {
    font-size: 1.75rem;
    line-height: 1.9rem;
  }
}
@media (max-width:420px) {
  .fixedHeader {
    font-size: 1.75rem;
    line-height: 1.9rem;
  }
}

.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: 2.5rem;
    line-height: 2.9rem;
  }
}
@media (max-width:1500px) {
  .careersSubhead {
    font-size: 2rem;
    line-height: 2.3rem;
  }
}
@media (max-width:1300px) {
  .careersSubhead {
    font-size: 2rem;
    line-height: 2.3rem;
  }
}
@media (max-width:1000px) {
  .careersSubhead {
    font-size: 1.75rem;
    line-height: 1.9rem;
  }
}
@media (max-width:767px) {
  .careersSubhead {
    font-size: 1.75rem;
    line-height: 1.9rem;
  }
}
@media (max-width:575px) {
  .careersSubhead {
    font-size: 1.5rem;
    line-height: 1.7rem;
  }
}
@media (max-width:420px) {
  .careersSubhead {
    font-size: 1.5rem;
    line-height: 1.7rem;
  }
}

.tagline {
  display: flex;
  z-index: 1;
  flex-direction: column;
  width: 100%;
  position: absolute;
  z-index: 101;
  top: 0;
  bottom: 0;
  justify-content: center;
}
@media (max-width:767px) {
  .tagline {
    padding-top: 5%;
  }
}
.tagline .fas {
  font-size: 3.5rem;
  color: #ffffff;
  display: flex;
  justify-content: center;
  position: fixed;
  right: 0;
  left: 0;
  bottom: 10%;
}

.tagline.taglineFade {
  opacity: 0;
  transition: opacity 0.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;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fade-in {
  opacity: 0; /* make things invisible upon start */ /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  animation: fadeIn ease-in 1; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  animation-fill-mode: forwards;
  animation-duration: 2s;
  animation-delay: 0.25s;
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.tagline.fade-out {
  opacity: 1; /* make things invisible upon start */ /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  animation: fadeOut ease-in 1; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  animation-fill-mode: backwards;
  animation-duration: 0.2s;
}

.containerContent {
  width: 50%;
  align-self: center;
}
@media (max-width: 767px) {
  .containerContentFull {
    width: 100%;
    padding-left:40px;
    padding-right:40px;
    text-align:center;
  }
}

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

.homeContainer {
  padding: 150px 8%;
  display: flex;
  z-index: 500;
  position: relative;
  width: 100%;
}
@media (max-width:767px) {
  .homeContainer {
    padding: 125px 8%;
  }
}
@media (max-width:575px) {
  .homeContainer {
    padding: 100px 8%;
  }
}
@media (max-width:420px) {
  .homeContainer {
    padding: 80px 8%;
  }
}

.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: rgb(248, 208, 0);
  transition: 0.3s;
}

a:hover .logoBox:hover {
  background: rgb(248, 208, 0);
}

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

/*///////////////////////  END 360 COMMITMENT  //////////////////////*/
/* ---- 1906 SECTION ----*/
.section1906 {
  background: url("../img/home1906BG.jpg") no-repeat;
  background-size: cover;
  z-index: 1000;
}

@media (max-width: 1200px) {
  .section1906 {
    background: url("../img/home1906BG2.jpg") no-repeat;
  }
}
@media (max-width: 741px) {
  .section1906 {
    padding-top: 60px;
    padding-bottom: 140px;
    background: url("../img/home1906BG3.jpg") no-repeat;
    background-position-y: 20%;
  }
}
.container1906Content {
  width: 50%;
  align-self: center;
  padding-left: 10px;
}

@media (max-width: 1200px) {
  .container1906Content {
    padding-left: 0;
    padding-top: 0px;
    width: 60%;
  }
}
@media (max-width: 741px) {
  .container1906Content {
    float: left;
    padding-left: 0;
    padding-top: 0px;
    width: 100%;
  }
}
/* ---- END 1906 SECTION ----*/ 
.section1 {
  background: url("../img/homeProductsBackground2.jpg") no-repeat;
  background-position: center;
  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: rgb(30, 30, 30);
}
@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;
  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;
  background-size: cover;
  z-index: 1000;
}
@media (max-width:767px) {
  .section2 {
    background-position-x: 40%;
  }
}

.section3 {
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5)), url("../img/section3.jpg");
  background-size: cover;
  z-index: 1000;
  color: rgb(248, 208, 0);
}

.section4 {
  background: rgb(30, 30, 30);
  color: #ffffff;
  background-size: cover;
  z-index: 1000;
  color: #ffffff;
  display: flex;
  -moz-column-gap: 25px;
       column-gap: 25px;
}
.section4 h2 {
  color: rgb(248, 208, 0);
}
.section4 .lightButton {
  color: rgb(30, 30, 30);
}

.fbfContent {
  width: 70%;
}

.fbfImage {
  width: 30%;
}
.fbfImage img {
  width: 100%;
  height: 100%;
  max-width: 300px;
}

.regionalBrands {
  position: relative;
  padding: 20px;
  width: 100%;
  background: rgb(30, 30, 30);
  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: 1600px;
  justify-content: center;
}
@media (max-width:1300px) {
  .regionalBrands .brands {
    max-width: 800px;
  }
}
@media (max-width:575px) {
  .regionalBrands .brands {
    max-width: 400px;
  }
}
.regionalBrands .brands a {
  width: 12.5%;
}
@media (max-width:1300px) {
  .regionalBrands .brands a {
    width: 20%;
  }
}
@media (max-width:575px) {
  .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: rgb(30, 30, 30);
}
.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: rgb(248, 208, 0);
}
@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%;
  -o-object-fit: cover;
     object-fit: cover;
}

.fanzCopyContainer {
  display: flex;
  flex-direction: column;
  width: 40%;
  background: rgb(248, 208, 0);
  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: rgb(30, 30, 30);
  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: "Roboto Bold";
}
@media (min-width:1501px) {
  .heroTitle h2 {
    font-size: 2.5rem;
    line-height: 2.9rem;
  }
}
@media (max-width:1500px) {
  .heroTitle h2 {
    font-size: 2rem;
    line-height: 2.3rem;
  }
}
@media (max-width:1300px) {
  .heroTitle h2 {
    font-size: 2rem;
    line-height: 2.3rem;
  }
}
@media (max-width:1000px) {
  .heroTitle h2 {
    font-size: 1.75rem;
    line-height: 1.9rem;
  }
}
@media (max-width:767px) {
  .heroTitle h2 {
    font-size: 1.75rem;
    line-height: 1.9rem;
  }
}
@media (max-width:575px) {
  .heroTitle h2 {
    font-size: 1.5rem;
    line-height: 1.7rem;
  }
}
@media (max-width:420px) {
  .heroTitle h2 {
    font-size: 1.5rem;
    line-height: 1.7rem;
  }
}
@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: 1.75rem;
    line-height: 1.9rem;
  }
}
@media (max-width:1500px) {
  .heroTitle h5 {
    font-size: 1.75rem;
    line-height: 1.9rem;
  }
}
@media (max-width:1300px) {
  .heroTitle h5 {
    font-size: 1.5rem;
    line-height: 1.7rem;
  }
}
@media (max-width:1000px) {
  .heroTitle h5 {
    font-size: 1.5rem;
    line-height: 1.7rem;
  }
}
@media (max-width:767px) {
  .heroTitle h5 {
    font-size: 1.25rem;
    line-height: 1.4rem;
  }
}
@media (max-width:575px) {
  .heroTitle h5 {
    font-size: 1.25rem;
    line-height: 1.4rem;
  }
}
@media (max-width:420px) {
  .heroTitle h5 {
    font-size: 1rem;
    line-height: 1.1rem;
  }
}
@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: flex;
  opacity: 1;
  margin-top: 20px;
  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: rgb(30, 30, 30);
}
.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: rgb(30, 30, 30);
  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: 11pt;
  text-align: center;
  padding: 5px 0 0 0;
  font-family: "Roboto Bold";
  line-height: 1;
  margin: 0;
  opacity: 1;
  color: rgb(30, 30, 30);
}
@media (max-width: 355px) {
  .productCategory h5 {
    font-size: 10pt;
  }
}
.productCategory img {
  width: 75%;
  margin: 0px auto;
  max-width: 125px;
}

.menuHover:hover {
  transition: 0s;
}

@media (min-width: 768px) {
  .productMenuGrid:hover > .menuHover {
    opacity: 0.5;
  }
  .productMenuGrid:hover > .menuHover:hover {
    opacity: 1;
  }
  .productMenuGridMobile:hover > .menuHover {
    opacity: 0.5;
  }
  .productMenuGridMobile:hover > .menuHover:hover {
    opacity: 1;
  }
  .productMenuGridMobile:hover > a .menuHover {
    opacity: 0.5;
  }
  .productMenuGridMobile:hover > a .menuHover:hover {
    opacity: 1;
  }
}
.supplierContainer {
  padding-bottom: 20px;
}

.photoCredit {
  font-size: 0.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: 2.5rem;
    line-height: 2.9rem;
  }
}
@media (max-width:1500px) {
  .categoryHeader h2 {
    font-size: 2rem;
    line-height: 2.3rem;
  }
}
@media (max-width:1300px) {
  .categoryHeader h2 {
    font-size: 2rem;
    line-height: 2.3rem;
  }
}
@media (max-width:1000px) {
  .categoryHeader h2 {
    font-size: 1.75rem;
    line-height: 1.9rem;
  }
}
@media (max-width:767px) {
  .categoryHeader h2 {
    font-size: 1.75rem;
    line-height: 1.9rem;
  }
}
@media (max-width:575px) {
  .categoryHeader h2 {
    font-size: 1.5rem;
    line-height: 1.7rem;
  }
}
@media (max-width:420px) {
  .categoryHeader h2 {
    font-size: 1.5rem;
    line-height: 1.7rem;
  }
}
@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%;
  }
}

.categoryGridDeli {
  padding-bottom: 20px;
  width: 100%;
  max-width: 1300px;
  margin: 0px auto;
  display: flex;
  flex-wrap: wrap;
  background-color: #ffffff;
}

.categoryGridDeli a {
  width: 33.3%;
  max-width: 433px;
  border-left: 1px solid #dddddd;
}

@media (max-width: 767px) {
  .categoryGridDeli a {
    width: 50%;
  }
}
.ketoGrid {
  justify-content: center;
}

.seasonalItem {
  margin: 0;
  justify-content: center;
  font-family: "Cooper Hewitt Semibold";
  font-size: 1rem;
  color: rgb(30, 30, 30);
  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: 0.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: 0.3s;
  cursor: pointer;
}
@media (max-width:767px) {
  .overlayColor {
    display: none;
  }
}

.container:hover img {
  transition: 0.3s; /* Safari + Chrome */ /* Firefox */ /* IE 9 */ /* Opera */
  transform: scale(1.1);
}

.container:hover .overlayColor {
  transition: 0.5s; /* Safari + Chrome */ /* Firefox */ /* IE 9 */ /* Opera */
  transform: translateX(0);
}

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

.container:hover .gold {
  opacity: 1;
  background-color: rgba(220, 164, 11, 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 .deepPurple {
  opacity: 1;
  background:  rgb(98,60,67, 0.9);
}

.container:hover .tan {
  opacity: 1;
  background:rgb(149,111,46, 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: rgb(30, 30, 30) !important;
}

.bgDark {
  background: rgb(30, 30, 30);
  color: #ffffff !important;
}

.bgDark70 {
  background: rgba(30, 30, 30, 0.7);
  color: #ffffff !important;
}

.bgDark50 {
  background: rgba(30, 30, 30, 0.5);
  color: #ffffff !important;
}

.bgGold {
  background: rgb(220, 164, 11);
  color: #ffffff !important;
}

.bgGold50 {
  background: rgba(220, 164, 11, 0.5);
  color: #ffffff !important;
}

.bgGold70 {
  background: rgba(220, 164, 11, 0.7);
  color: #ffffff !important;
}

.bgGold80 {
  background: rgba(220, 164, 11, 0.8);
  color: #ffffff !important;
}

.bgPink {
  background: rgb(215, 0, 110);
  color: #ffffff !important;
}

.bgPink50 {
  background: rgba(215, 0, 110, 0.5);
  color: #ffffff !important;
}

.bgPink70 {
  background: rgba(215, 0, 110, 0.7);
  color: #ffffff !important;
}

.bgPink80 {
  background: rgba(215, 0, 110, 0.8);
  color: #ffffff !important;
}

.bgRed {
  background: rgb(170, 24, 44);
  color: #ffffff !important;
}

.bgRed80 {
  background: rgba(170, 24, 44, 0.8);
  color: #ffffff !important;
}

.bgRed70 {
  background: rgba(170, 24, 44, 0.7);
  color: #ffffff !important;
}

.bgRed50 {
  background: rgba(170, 24, 44, 0.5);
  color: #ffffff !important;
}

.bgOrange {
  background: rgb(193, 82, 25);
  color: #ffffff !important;
}

.bgCoral {
  background: rgb(255, 77, 0);
  color: #ffffff !important;
}

.bgLime {
  background: rgb(179, 221, 62);
  color: rgb(30, 30, 30) !important;
}

.bgDeepPurple {
  background:  rgb(98,60,67);
  color: #ffffff !important;
}

.bgTan {
  background:rgb(149,111,46);
    color: #ffffff !important;
}

.bgYellow {
  background: rgb(248, 208, 0);
  color: rgb(30, 30, 30) !important;
}

.bgYellow80 {
  background: rgba(248, 208, 0, 0.8);
  color: rgb(30, 30, 30) !important;
}

.bgGreen {
  background: rgb(15, 75, 47);
  color: #ffffff !important;
}

.bgGreen80 {
  background: rgba(15, 75, 47, 0.8);
  color: #ffffff !important;
}

.bgGreen70 {
  background: rgba(15, 75, 47, 0.7);
  color: #ffffff !important;
}

.bgGreen50 {
  background: rgba(15, 75, 47, 0.5);
  color: #ffffff !important;
}

.bgTeal {
  background: rgb(1, 115, 134);
  color: #ffffff !important;
}

.bgTeal50 {
  background: rgba(1, 115, 134, 0.5);
  color: #ffffff !important;
}

.bgTeal80 {
  background: rgba(1, 115, 134, 0.8);
  color: #ffffff !important;
}

.bgBlue {
  background: rgb(22, 29, 89);
  color: #ffffff !important;
}

.bgBlue80 {
  background: rgba(22, 29, 89, 0.8);
  color: #ffffff !important;
}

.bgBlue50 {
  background: rgba(22, 29, 89, 0.5);
  color: #ffffff !important;
}

.bgPurple {
  background: rgb(94, 15, 139);
  color: #ffffff !important;
}

.bgCranberry {
  background: rgb(103, 38, 102);
  color: #ffffff !important;
}

.bgMaroon {
  background: rgb(106, 33, 63);
  color: #ffffff !important;
}

.bgMaroon70 {
  background: rgba(106, 33, 63, 0.7);
  color: #ffffff !important;
}

.bgMaroon50 {
  background: rgba(106, 33, 63, 0.5);
  color: #ffffff !important;
}

.bgBrown {
  background: rgb(117, 57, 28);
  color: #ffffff !important;
}

.bgLightBlue {
  background: rgb(58, 99, 153);
  color: #ffffff !important;
}

.bgDark {
  background: rgb(30, 30, 30);
  color: #ffffff !important;
}
@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%;
  min-height: 100vh;
  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: 5% 25px;
  top: 0px;
  background: #ffffff !important;
  color: rgb(30, 30, 30) !important;
  position: sticky;
}
.productFlexbox .productImageContainer .productImage {
  width: 100%;
  height: 100%;
  max-width: 500px;
  max-height: 600px;
  -o-object-fit: contain;
     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 { /* Safari 4+ */ /* Fx 5+ */ /* Opera 12+ */
    animation: nextProductMobile 1s; /* IE 10+, Fx 29+ */
  }
}
.productFlexbox .productImageContainer .productImage.nextProductDesktop { /* Safari 4+ */ /* Fx 5+ */ /* Opera 12+ */
  animation: nextProductDesktop 1s; /* IE 10+, Fx 29+ */
}
@media (max-width:767px) {
  .productFlexbox .productImageContainer .productImage.previousProductMobile { /* Safari 4+ */ /* Fx 5+ */ /* Opera 12+ */
    animation: previousProductMobile 1s; /* IE 10+, Fx 29+ */
  }
}
.productFlexbox .productImageContainer .productImage.previousProductDesktop { /* Safari 4+ */ /* Fx 5+ */ /* 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: 70px 3% 3% 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: 80px 25px 25px 25px;
}
@media (max-width:767px) {
  .productFlexbox .nutritional {
    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: 0.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: rgb(30, 30, 30);
}

.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: rgb(30, 30, 30);
  font-family: "Cooper Hewitt Semibold";
  text-decoration: none;
  font-size: 1.5rem;
}
@media (max-width:420px) {
  .productDescriptionLinkDark {
    font-size: 1rem;
  }
}

.productDescriptionLinkDark:hover {
  color: rgb(30, 30, 30) !important;
}

.ketoLink {
  color: rgb(248, 208, 0);
}

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

.ketoLink:active {
  color: #ffffff;
  transition: 0.5s;
}

.ketoLink:visited {
  color: #ffffff;
  transition: 0.5s;
}

.ketoLink:link {
  color: #ffffff;
  transition: 0.5s;
}

.gfDescriptionNote {
  font-size: 0.75rem;
  -webkit-text-decoration: italic;
          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;
  }
}

.innerToggleDark, .innerToggle {
  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: rgb(30, 30, 30);
  background: #ffffff;
  mix-blend-mode: lighten;
}

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

.activeDark {
  color: #ffffff;
  background: rgb(30, 30, 30);
}

.inactiveDark {
  color: rgb(30, 30, 30);
  border: 2px solid rgb(30, 30, 30);
  background: none;
}

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

.control a i {
  color: rgb(30, 30, 30);
}

.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;
  padding: 20px 0 0 0;
}
.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 rgb(30, 30, 30);
  margin: 10px 0;
}

.thinDividerDark {
  width: 100%;
  border: 1px solid rgb(30, 30, 30);
  margin: 5px 0;
}

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

.careersSection {
  text-align: center;
  padding: 20px 10px 5px 10px;
}

.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 rgb(248, 208, 0);
  margin: 0px auto;
  z-index: 100;
  position: relative;
}
.carouselEmployeeBio h4 {
  display: flex;
  justify-content: space-around;
  width: -moz-fit-content;
  width: fit-content;
  background: rgb(248, 208, 0);
  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: 0.75rem;
    margin: 0 2px;
    border-radius: 0;
  }
}
.carouselEmployeeBio h4 span {
  font-family: "Cooper Hewitt Heavy";
  padding-right: 10px;
}

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

.carouselGradient {
  background: radial-gradient(circle, rgba(40, 40, 40, 0.5) 0%, rgba(40, 40, 40, 0.4) 23%, rgba(40, 40, 40, 0.3) 55%, rgba(40, 40, 40, 0.3) 80%, rgba(40, 40, 40, 0.2) 97%);
  z-index: 100;
  width: 100%;
  height: 100%;
  position: absolute;
}

.carouselImage {
  -o-object-fit: cover !important;
     object-fit: cover !important;
  -o-object-position: top;
     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;
  background: radial-gradient(circle, rgba(20, 20, 20, 0.4) 0%, rgba(20, 20, 20, 0.4) 23%, rgba(20, 20, 20, 0.3) 55%, rgba(20, 20, 20, 0.1) 79%, rgba(20, 20, 20, 0) 100%);
}

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

.textToApply {
  color: #ffffff;
  display: flex;
  font-family: "Roboto Bold";
  justify-content: flex-end;
  font-weight: bold;
  padding-top: 15px;
  width: 100%;
  opacity: 1;
  transition: 0.3s;
}
.textToApply a {
  color: rgb(248, 208, 0);
  transition: 0.3s;
  text-decoration: underline !important;
}
.textToApply a:hover {
  color: rgb(22, 29, 89);
  transition: 0.3s;
}

.textToApply.fade {
  opacity: 0;
  transition: 0.3s;
  visibility: hidden;
}

@media (max-width:575px) {
  .taDesktop {
    display: none;
  }
}

.taMobile {
  justify-content: center !important;
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  z-index: 1000000000;
}
@media (min-width: 526px) {
  .taMobile {
    display: none;
  }
}

.careerSubmenu {
  position: fixed;
  top: 75px;
  right: 0;
  padding: 15px;
  justify-content: flex-end;
  display: flex;
  flex-wrap: wrap;
  z-index: 4000;
  float: right;
}
@media (max-width:575px) {
  .careerSubmenu {
    background: rgb(248, 208, 0);
    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: rgb(30, 30, 30);
  }
  .careerSubmenu .openJobs, .careerSubmenu .kronosLogin {
    border-radius: 0px;
    padding: 0px;
    text-align: center;
  }
  .careerSubmenu .openJobsThird {
    width: 35%;
  }
  .careerSubmenu .kronosLoginThird {
    width: 35%;
  }
}

.careersFooter {
  width: 100%;
  background: rgb(220, 220, 220);
  color: rgb(30, 30, 30);
  text-align: center;
  padding: 10px 0;
  margin-top: 20px;
}
.careersFooter a {
  font-family: "Cooper Hewitt Semibold";
}
.careersFooter a:hover {
  color: rgb(248, 208, 0);
  transition: 0.3s;
}

.openJobs, .kronosLogin {
  background: rgb(248, 208, 0);
  width: 100%;
  border-radius: 3px;
  color: rgb(30, 30, 30);
  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: rgb(30, 30, 30);
    text-decoration: none !important;
    color: #ffffff;
    transition: 0.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: rgb(248, 208, 0);
}
.careerSocialIcons a:hover {
  color: rgb(30, 30, 30);
  transition: 0.3s;
}

.spotlightTitle {
  background: #ffffff;
  width: 100%;
  padding: 5% 0% 2% 0%;
}
.spotlightTitle h2 {
  color: rgb(30, 30, 30);
  margin: 0px auto;
  font-family: "Cooper Hewitt Heavy";
  text-align: center;
}
@media (min-width:1501px) {
  .spotlightTitle h2 {
    font-size: 2.5rem;
    line-height: 2.9rem;
  }
}
@media (max-width:1500px) {
  .spotlightTitle h2 {
    font-size: 2rem;
    line-height: 2.3rem;
  }
}
@media (max-width:1300px) {
  .spotlightTitle h2 {
    font-size: 2rem;
    line-height: 2.3rem;
  }
}
@media (max-width:1000px) {
  .spotlightTitle h2 {
    font-size: 1.75rem;
    line-height: 1.9rem;
  }
}
@media (max-width:767px) {
  .spotlightTitle h2 {
    font-size: 1.75rem;
    line-height: 1.9rem;
  }
}
@media (max-width:575px) {
  .spotlightTitle h2 {
    font-size: 1.5rem;
    line-height: 1.7rem;
  }
}
@media (max-width:420px) {
  .spotlightTitle h2 {
    font-size: 1.5rem;
    line-height: 1.7rem;
  }
}

.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%;
  }
}

.employeeContainer {
    position: relative;
}

.employeeCard {
  display: flex;
  width: 25%;
  margin: 0px auto;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 0% 2% 2% 2%;
  opacity: 1;
  transition: .5s ease;
  backface-visibility: hidden;
}

.employeeCard:hover {
  opacity: 0.3;
}

.employeeCard img {
  border-bottom: 6px solid rgb(248, 208, 0);
  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 rgb(248, 208, 0);
  }
}
@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 rgb(248, 208, 0);
  }
}
@media (max-width:575px) {
  .employeeBio {
    border-top: 0;
    text-align: left;
    padding: 0 20px;
  }
}
.employeeBio p {
  border-top: 6px solid rgb(248, 208, 0);
  padding-top: 15px;
}
@media (max-width:575px) {
  .employeeBio p {
    padding-top: 3px solid rgb(248, 208, 0);
  }
}

.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: rgb(30, 30, 30);
  text-align: center;
  width: -moz-fit-content;
  width: fit-content;
  justify-self: center;
  padding: 7px 10px;
}

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

.employeeButton {
  background: rgb(248, 208, 0);
  color: rgb(30, 30, 30);
  font-size: 1.25rem;
  font-family: "Cooper Hewitt Semibold";
  width: -moz-max-content;
  width: max-content;
  justify-self: center;
  padding: 7px 12px;
}

.employeeButton:hover {
  background: rgb(30, 30, 30);
  border: 0px;
  color: #ffffff;
  transition: 0.5s;
}

.videoSpotlight {
  display: flex;
  flex-direction: column;
  background: rgb(248, 208, 0);
  width: 100%;
  margin: 0px auto;
  padding: 30px 0;
}

.careersVideo {
  justify-content: center;
  display: flex;
  height: 100%;
}
.careersVideo .yellowVideoAccent {
  background: rgb(248, 208, 0);
  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: 1.75rem;
    line-height: 1.9rem;
  }
}
@media (max-width:1500px) {
  .coreValues .value .valueText h3 {
    font-size: 1.75rem;
    line-height: 1.9rem;
  }
}
@media (max-width:1300px) {
  .coreValues .value .valueText h3 {
    font-size: 1.5rem;
    line-height: 1.7rem;
  }
}
@media (max-width:1000px) {
  .coreValues .value .valueText h3 {
    font-size: 1.5rem;
    line-height: 1.7rem;
  }
}
@media (max-width:767px) {
  .coreValues .value .valueText h3 {
    font-size: 1.25rem;
    line-height: 1.4rem;
  }
}
@media (max-width:575px) {
  .coreValues .value .valueText h3 {
    font-size: 1.25rem;
    line-height: 1.4rem;
  }
}
@media (max-width:420px) {
  .coreValues .value .valueText h3 {
    font-size: 1rem;
    line-height: 1.1rem;
  }
}
.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%;
  background: rgb(30, 30, 30);
}

.footer {
  border-top: 6px solid rgb(248, 208, 0);
  z-index: 1;
  background: rgb(30, 30, 30);
  width: 100%;
  bottom: 0;
  padding: 40px;
  color: #ffffff;
  margin: 0px auto;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
}
@media (max-width:767px) {
  .footer {
    justify-content: center;
    text-align: center;
    padding: 0;
    z-index: 10;
  }
}
.footer h3 {
  margin: 0px auto;
  color: #ffffff;
  padding: 5% 0%;
  text-align: center;
  font-family: "Cooper Hewitt Semibold";
}
.footer .footerMenu {
  width: 100%;
  max-width: 1000px;
  display: flex;
  flex-direction: row;
  text-align: left;
}
@media (max-width:767px) {
  .footer .footerMenu {
    width: 100%;
    flex-direction: column;
    border: 0px;
    padding: 0 20px 20px 20px;
  }
}
.footer .footerColumn {
  justify-content: center;
  padding: 10px;
  width: 100%;
}
.footer .footerColumn li {
  margin: 6px 0;
}
.footer .homeLine {
  border-top: 2px solid #ffffff;
}

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

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

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

.footerSocialIcons {
  bottom: 0;
  font-size: 2rem;
}
.footerSocialIcons i {
  padding: 10px 10px 10px 0;
}
.footerSocialIcons i:hover {
  fill: rgb(248, 208, 0);
  transition: 0.3s;
}

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

.logoFooter {
  width: 25%;
  height: 100%;
  max-width: 300px;
  align-self: center;
  flex-direction: column;
  justify-self: center;
  justify-content: center;
  display: flex;
}
@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: rgb(248, 208, 0);
  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: rgb(248, 208, 0);
}

#mc-embedded-subscribe-form {
  margin: 24px 0;
}

/*Contact Us*/
.contactUsMobile {
  align-content: center;
  width: 100%;
  justify-content: center;
  color: rgb(30, 30, 30);
  width: 100%;
  max-width: 1000px;
  position: relative;
  background: rgb(248, 208, 0);
  padding: 100px 20px 40px 20px;
  justify-content: center;
  border-radius: 5px;
}

.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 rgb(30, 30, 30);
}

.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: 16px !important;
    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: 0.5rem;
}

.contactUsSocialMobile {
  width: 100%;
  padding: 20px 10px;
}
.contactUsSocialMobile .contactSocialLinks {
  display: flex;
  flex-direction: row;
}
.contactUsSocialMobile .contactSocialLinks span {
  width: 50%;
}
.contactUsSocialMobile .contactSocialLinks span p {
  margin-bottom: 0;
}
.contactUsSocialMobile .contactSocialLinks span a:hover {
  color: rgba(30, 30, 30, 0.5) !important;
}

.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: 0.75rem;
  line-height: 0.8rem;
  padding: 0 0 0 12px;
  max-width: 350px;
}
@media (max-width:767px) {
  .submitArea span {
    font-size: 0.6rem;
    padding: 10px 0 0 12px;
  }
}

.form-group {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px 0;
}
.form-group label {
  font-size: 1rem;
  font-family: "Roboto Bold";
  line-height: 1.2rem;
}
.form-group a:hover {
  font-family: "Roboto Bold";
  color: rgb(30, 30, 30);
}

.formNameInput {
  width: 50%;
}

.formFieldInput {
  width: 50%;
}

.formSubject {
  width: 100%;
}

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

.requiredInputMessage {
  font-size: 0.75rem;
}

.defaultFormStyle {
  background: none;
  border: 2px solid rgb(30, 30, 30);
  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;
  user-select: none;
}
.formCheckbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.formCheckbox label {
  font-family: "Roboto Bold";
  font-size: 1.25rem;
  padding-right: 10px;
}
@media (max-width:575px) {
  .formCheckbox label {
    font-size: 1rem;
  }
}

.formSubtext {
  font-size: 14px;
  font-family: "Roboto";
  padding: 0;
  margin: 0;
  color: rgb(30, 30, 30);
}

.sub {
  font-size: 0.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;
  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 rgb(30, 30, 30);
  padding: 10px;
  border-radius: 2px;
}

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

/* When the checkbox is checked, add a yellow background */
.container input:checked ~ .checkmark {
  background-color: rgb(248, 208, 0);
}

/* 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;
  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 p {
    font-size: 1rem;
  }
}
@media (max-width:575px) {
  .contactUsHeader p {
    margin-bottom: 0.5rem;
  }
}
.contactUsHeader .x {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 2rem;
  padding: 20px;
  cursor: pointer;
}
@media (max-width:767px) {
  .contactUsHeader .x {
    display: none;
  }
}

.contactUsHeaderMobile h3 {
  width: 100%;
  font-size: 3rem;
  line-height: 3.4rem;
}

#contactUsForm {
  color: rgb(30, 30, 30);
  border: 3px solid rgb(30, 30, 30);
  width: 90%;
  max-width: 1000px;
  position: relative;
  background: rgb(248, 208, 0);
  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%;
}

.contactUsForm {
  width: 70%;
  display: flex;
  color: rgb(30, 30, 30);
  flex-direction: column;
  align-items: center;
  align-content: center;
  border-right: 2px solid rgb(30, 30, 30);
  padding-right: 10px;
}

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

.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: rgb(248, 208, 0);
  transition: 0.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%;
  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 {
  -webkit-clip-path: polygon(20% 0%, 100% 0, 100% 100%, 0% 100%);
          clip-path: polygon(20% 0%, 100% 0, 100% 100%, 0% 100%);
  color: #ffffff;
  display: flex;
  justify-content: center;
  width: 60%;
}
@media (max-width:767px) {
  .categoryColor {
    width: 100%;
    -webkit-clip-path: none;
            clip-path: none;
    padding-top: 70px;
  }
}

.ketoColor {
  color: #ffffff;
  display: flex;
  justify-content: center;
  width: 100%;
  min-height: 300px;
}
.ketoColor h3, .ketoColor p {
  text-align: center;
  margin-bottom: 0;
}

.ketoLink {
  color: rgb(248, 208, 0);
  font-weight: bold;
}

.organicsHeader {
  background: url("../img/organicsHeaderFull.jpg") no-repeat;
  background-size: cover;
}

.breadsHeader {
  background: url("../img/breadsHeaderFull.jpg") no-repeat;
  background-size: cover;
}

.bunsHeader {
  background: url("../img/bunsHeaderFull.jpg") no-repeat;
  background-size: cover;
}

.glutenFreeHeader {
  background: url("../img/glutenFreeHeaderFull.jpg") no-repeat;
  background-size: cover;
}

.bagelsHeader {
  background: url("../img/bagelsHeaderFull.jpg") no-repeat;
  background-size: cover;
}

.englishMuffinsHeader {
  background: url("../img/englishMuffinsHeaderFull.jpg") no-repeat;
  background-size: cover;
}

.sweetsHeader {
  background: url("../img/sweetsHeaderFull.jpg") no-repeat;
  background-size: cover;
}

.ketoHeader {
  background: url("../img/ketoHeaderFull.jpg") no-repeat;
  background-size: cover;
}

/*.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: left;
  font-family: "Cooper Hewitt Heavy" !important;
}
@media (min-width:1501px) {
  .categoryMenu h3 {
    font-size: 3rem;
    line-height: 3.4rem;
  }
}
@media (max-width:1500px) {
  .categoryMenu h3 {
    font-size: 2.5rem;
    line-height: 2.9rem;
  }
}
@media (max-width:1300px) {
  .categoryMenu h3 {
    font-size: 2.5rem;
    line-height: 2.9rem;
  }
}
@media (max-width:1000px) {
  .categoryMenu h3 {
    font-size: 2rem;
    line-height: 2.3rem;
  }
}
@media (max-width:767px) {
  .categoryMenu h3 {
    font-size: 2rem;
    line-height: 2.3rem;
  }
}
@media (max-width:575px) {
  .categoryMenu h3 {
    font-size: 1.75rem;
    line-height: 1.9rem;
  }
}
@media (max-width:420px) {
  .categoryMenu h3 {
    font-size: 1.75rem;
    line-height: 1.9rem;
  }
}
@media (max-width:767px) {
  .categoryMenu h3 {
    font-family: "Cooper Hewitt Heavy";
    line-height: 1;
    text-align: center;
  }
}
@media (max-width:767px) and (min-width:1501px) {
  .categoryMenu h3 {
    font-size: 3rem;
    line-height: 3.4rem;
  }
}
@media (max-width:767px) and (max-width:1500px) {
  .categoryMenu h3 {
    font-size: 2.5rem;
    line-height: 2.9rem;
  }
}
@media (max-width:767px) and (max-width:1300px) {
  .categoryMenu h3 {
    font-size: 2.5rem;
    line-height: 2.9rem;
  }
}
@media (max-width:767px) and (max-width:1000px) {
  .categoryMenu h3 {
    font-size: 2rem;
    line-height: 2.3rem;
  }
}
@media (max-width:767px) and (max-width:767px) {
  .categoryMenu h3 {
    font-size: 2rem;
    line-height: 2.3rem;
  }
}
@media (max-width:767px) and (max-width:575px) {
  .categoryMenu h3 {
    font-size: 1.75rem;
    line-height: 1.9rem;
  }
}
@media (max-width:767px) and (max-width:420px) {
  .categoryMenu h3 {
    font-size: 1.75rem;
    line-height: 1.9rem;
  }
}
.categoryMenu ul a {
  text-decoration: none;
}
.categoryMenu a:last-child li {
  border-bottom: none !important;
}
.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 .dark {
  color: rgb(30, 30, 30);
  border-bottom: 2px solid rgb(30, 30, 30);
}
.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;
  visibility: hidden;
  top: -70px;
}

.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: 3rem;
    line-height: 3.4rem;
  }
}
@media (max-width:1500px) {
  .recipeHeader h2 {
    font-size: 2.5rem;
    line-height: 2.9rem;
  }
}
@media (max-width:1300px) {
  .recipeHeader h2 {
    font-size: 2.5rem;
    line-height: 2.9rem;
  }
}
@media (max-width:1000px) {
  .recipeHeader h2 {
    font-size: 2rem;
    line-height: 2.3rem;
  }
}
@media (max-width:767px) {
  .recipeHeader h2 {
    font-size: 2rem;
    line-height: 2.3rem;
  }
}
@media (max-width:575px) {
  .recipeHeader h2 {
    font-size: 1.75rem;
    line-height: 1.9rem;
  }
}
@media (max-width:420px) {
  .recipeHeader h2 {
    font-size: 1.75rem;
    line-height: 1.9rem;
  }
}
.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: rgb(30, 30, 30);
  font-family: "Cooper Hewitt Semibold";
  transition: 0.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 {
    -o-object-fit: cover;
       object-fit: cover;
  }
}
.recipeCard .recipePicture img {
  vertical-align: middle;
  width: 100%;
  transition: all 0.5s ease;
}

.recipeCard:hover .timeOverlay {
  opacity: 1;
}
.recipeCard:hover h3 {
  color: rgb(248, 208, 0);
  transition: 0.3s;
}
.recipeCard:hover .recipePicture img { /* Safari + Chrome */ /* Firefox */ /* IE 9 */ /* 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: -moz-min-content;
  height: min-content;
}
@media (max-width:767px) {
  .recipeHero .recipeDescription {
    width: 100%;
    border-radius: 0;
    padding: 100px 20px 40px 20px;
  }
}
.recipeHero .recipeDescription h2 {
  font-family: "Cooper Hewitt Heavy";
  margin-bottom: 0;
}
@media (min-width:1501px) {
  .recipeHero .recipeDescription h2 {
    font-size: 3rem;
    line-height: 3.4rem;
  }
}
@media (max-width:1500px) {
  .recipeHero .recipeDescription h2 {
    font-size: 2.5rem;
    line-height: 2.9rem;
  }
}
@media (max-width:1300px) {
  .recipeHero .recipeDescription h2 {
    font-size: 2.5rem;
    line-height: 2.9rem;
  }
}
@media (max-width:1000px) {
  .recipeHero .recipeDescription h2 {
    font-size: 2rem;
    line-height: 2.3rem;
  }
}
@media (max-width:767px) {
  .recipeHero .recipeDescription h2 {
    font-size: 2rem;
    line-height: 2.3rem;
  }
}
@media (max-width:575px) {
  .recipeHero .recipeDescription h2 {
    font-size: 1.75rem;
    line-height: 1.9rem;
  }
}
@media (max-width:420px) {
  .recipeHero .recipeDescription h2 {
    font-size: 1.75rem;
    line-height: 1.9rem;
  }
}
.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: rgb(248, 208, 0);
  padding: 30px;
}
@media (max-width:767px) {
  .recipeContainer .recipeIngredients {
    width: 100%;
  }
}
.recipeContainer .recipeIngredients ul li {
  border-bottom: 1px solid rgb(30, 30, 30);
  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";
}

.recipeSource {
  font-size: 0.75rem;
  padding-top: 20px;
}
.recipeSource a {
  font-family: "Roboto Bold";
}
.recipeSource a:hover {
  color: rgb(248, 208, 0);
}

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

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

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

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

.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;
  width: 100%;
  position: fixed;
  height: 100%;
}

.locationHeaderFrame {
  width: 100%;
  background: rgb(30, 30, 30);
  padding-top: 70px;
}
.locationHeaderFrame h2 {
  font-size: 1.5rem;
  padding: 10px 20px;
  color: #ffffff;
  margin: 0;
}
@media (max-width:575px) {
  .locationHeaderFrame {
    background: rgb(248, 208, 0);
    padding-top: 90px;
  }
  .locationHeaderFrame h2 {
    color: rgb(30, 30, 30);
    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: rgb(30, 30, 30) !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: 0.75rem;
  font-family: "Cooper Hewitt Semibold";
  padding-top: 5px;
}

.closure {
  color: rgb(170, 24, 44);
  font-size: 1rem !important;
}
.closure a {
  text-decoration: underline !important;
  color: rgb(170, 24, 44) !important;
}

.displayNone {
  display: none !important;
}

.stateNameSidebar {
  font-size: 1.25rem;
  font-family: "Cooper Hewitt Heavy";
  padding: 4px 10px;
  border-bottom: 1px solid rgb(30, 30, 30);
  cursor: pointer;
}
@media (max-width:575px) {
  .stateNameSidebar {
    font-size: 1rem;
    border-right: 1px solid rgb(30, 30, 30);
    border-bottom: none;
  }
}
@media (max-width:420px) {
  .stateNameSidebar {
    font-size: 0.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: -moz-fit-content;
  width: fit-content;
  position: sticky;
  top: 0;
  background: rgb(248, 208, 0);
  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;
  overflow-y: scroll;
  -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 rgb(30, 30, 30);
  margin-bottom: 20px;
}

.locationCard {
  display: flex;
  flex-direction: column;
  padding: 20px 0;
  border-bottom: 1px solid #dddddd;
}
.locationCard .cardLocation {
  color: rgb(30, 30, 30);
  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: rgb(248, 208, 0);
  transition: 0.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: 0.3s;
}

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

.communitySection {
  display: flex;
  margin-bottom: 20px;
  padding: 0;
  border-bottom: 2px solid rgb(30, 30, 30);
}
@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%;
  -o-object-fit: scale-down;
     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: rgb(30, 30, 30);
  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;
}

.plainPageTitle {
  width: 100%;
  display: flex;
  margin: 0px auto;
  flex-direction: column;
  background: rgb(30, 30, 30);
  color: #ffffff;
  padding: 100px 0 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 rgb(30, 30, 30);
  text-align: right;
}
@media (max-width:767px) {
  .footerSidebar {
    display: none;
  }
}
.footerSidebar li:hover {
  color: rgb(248, 208, 0);
  transition: 0.3s;
}

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

#returnToTopMobile {
  display: none;
  transition: 0.3s;
  position: sticky;
  justify-content: center;
  top: 150px;
}
#returnToTopMobile i {
  color: rgb(30, 30, 30);
  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;
}

.footerBody {
  width: 65%;
  padding: 0 20px;
}
.footerBody h4 {
  padding-top: 20px;
}
.footerBody hr {
  border: 2px solid rgb(30, 30, 30);
  margin: 40px auto;
}
@media (max-width:767px) {
  .footerBody {
    width: 100%;
    padding: 0 20px 0 10px;
  }
}

.submit {
  background: rgb(30, 30, 30);
  color: #ffffff;
  margin-top: 1rem;
  padding: 10px 12px 7px 12px;
  width: -moz-fit-content;
  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: 0.5rem;
  }
}

.submit:hover {
  background: #ffffff;
  color: rgb(30, 30, 30);
  box-shadow: 0px 0px 0px 2px inset;
  transition: 0.4s;
}

.footerEmail {
  background: none !important;
  border-bottom: 2px solid rgb(248, 208, 0) !important;
  padding: 2px 0 0 0 !important;
  color: #ffffff !important;
}

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

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

.submitFooter {
  background: rgb(248, 208, 0);
  color: rgb(30, 30, 30);
  margin-top: 0.5rem;
  width: -moz-fit-content;
  width: fit-content;
  border: 0;
  padding: 8px 8px 5px 8px;
  font-size: 1rem;
  font-family: "Cooper Hewitt Semibold";
  line-height: 1;
  border: 2px solid rgb(248, 208, 0);
}

.submitFooter:hover {
  color: #ffffff;
  transition: 0.4s;
  border-bottom: 2px solid #ffffff;
  background: rgb(30, 30, 30);
  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 rgb(30, 30, 30);
  border-right: 1px solid rgb(30, 30, 30);
  border-bottom: 1px solid rgb(30, 30, 30);
}
.ccpaColumns .ccpaCenter {
  width: 60%;
  border-right: 1px solid rgb(30, 30, 30);
  border-bottom: 1px solid rgb(30, 30, 30);
}
.ccpaColumns .ccpaRight {
  width: 20%;
  border-right: 1px solid rgb(30, 30, 30);
  border-bottom: 1px solid rgb(30, 30, 30);
}
.ccpaColumns .ccpaHeader {
  font-family: "Cooper Hewitt Semibold";
  font-size: 1rem;
  border-top: 1px solid rgb(30, 30, 30);
}
.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;
}

.foundationLogoContainer {
  padding: 24px;
  background: rgb(30, 30, 30);
  border-radius: 16px;
}

.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: 0.5s; /* Safari + Chrome */ /* Firefox */ /* IE 9 */ /* Opera */
  transform: scale(1);
}
@media (max-width:767px) {
  .grantImageLinkContainer img {
    width: 100%;
  }
}

.grantImageLink:hover img {
  transition: 0.5s; /* Safari + Chrome */ /* Firefox */ /* IE 9 */ /* Opera */
  transform: scale(1.1);
}

.donateButton {
  background: rgb(248, 208, 0);
  border-radius: 100px;
  color: rgb(30, 30, 30);
  font-family: "Cooper Hewitt Heavy";
  font-size: 1.25rem;
  padding: 10px;
  max-width: 275px;
  margin: 20px auto;
  text-align: center;
}

.donateButton:hover {
  background: rgb(30, 30, 30);
  color: #ffffff;
  transition: 0.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: 350px;
    padding-top: 60px;
  }
}
.sectionHeaderFrame h2 {
  font-size: 5rem;
  line-height: 4.5rem;
  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;
    line-height: 3.5rem;
    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 .sectionThanksFrame {
  height: 600px;
}
.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;
}

.productCategoriesTitle {
  background: radial-gradient(rgba(0, 0, 0, 0.35) 60%, rgba(0, 0, 0, 0.15) 100%), url("../img/productCategoriesHeader.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 240px;
  justify-content: flex-end;
}
.productCategoriesTitle h2 {
  padding-bottom: 15%;
}

.foundationHeaderFrame {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
  justify-content: center;
  align-items: flex-start;
}
.foundationHeaderFrame img {
  width: 30%;
  max-width: 250px;
  min-width: 200px;
}
@media (max-width:1000px) {
  .foundationHeaderFrame {
    flex-direction: column;
    row-gap: 2rem;
    width: 100%;
    margin: 0px auto;
    align-items: center;
    margin: 0;
  }
  .foundationHeaderFrame img {
    width: 200px;
  }
}

.foundationHeroContainer {
  height: 100%;
  max-width: 400px;
}
.foundationHeroContainer img {
  width: 100%;
  border-radius: 0 24px 24px 0;
}
@media (max-width:1000px) {
  .foundationHeroContainer {
    max-width: unset;
  }
  .foundationHeroContainer img {
    border-radius: 24px 24px 0 0;
  }
}

.foundationButtonContainer {
  display: flex;
  align-items: center;
  -moz-column-gap: 8px;
       column-gap: 8px;
  row-gap: 8px;
}
@media (max-width:575px) {
  .foundationButtonContainer {
    flex-direction: column;
    row-gap: 16px;
  }
  .foundationButtonContainer a, .foundationButtonContainer div {
    width: 100%;
    text-align: center;
    margin: 0;
  }
}

.foundationHeader {
  display: flex;
  -moz-column-gap: 0;
       column-gap: 0;
  background: rgb(187, 240, 255);
  flex-direction: row;
  padding: 0;
  border-radius: 24px;
  align-items: center;
  width: 100%;
}
@media (max-width:1000px) {
  .foundationHeader {
    flex-direction: column-reverse;
    width: 100%;
  }
}

@media (min-width: 1001px) {
  .foundationMobile {
    display: none;
  }
}
@media (max-width:1000px) {
  .foundationDesktop {
    display: none;
  }
}
.foundationTitle {
  padding: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 24px 0 0 24px;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
  justify-content: center;
  box-shadow: none !important;
}
@media (max-width:1000px) {
  .foundationTitle {
    width: 100%;
    height: 100%;
    align-items: flex-start;
    border-radius: 24px;
  }
}
.foundationTitle h2 {
  color: rgb(30, 30, 30);
  text-align: left;
  font-size: 3rem;
  width: 100%;
  margin: 0;
}
.foundationTitle .foundationTitleText {
  text-align: left;
  color: rgb(30, 30, 30);
}
.foundationTitle .foundationTitleText h3 {
  width: 100%;
  text-align: left;
  color: rgb(30, 30, 30);
  margin: 0;
}

.foundationCenter {
  margin: 0px auto;
}

.foundation1 {
  background: rgba(248, 208, 0, 0.2);
}
.foundation1 .containerContent {
  padding: 0 32px 0 8%;
}
@media (max-width:767px) {
  .foundation1 {
    flex-direction: column;
  }
  .foundation1 .containerContent {
    width: 100%;
    padding: 32px 32px 0 32px;
  }
}
.foundation1 .caption {
  right: 0;
  border-radius: 24px 0 0 0;
}

.foundation2 {
  background: rgba(22, 29, 89, 0.2);
}
.foundation2 .containerContent {
  padding: 0 8% 0 32px;
}
@media (max-width:767px) {
  .foundation2 {
    flex-direction: column-reverse;
  }
  .foundation2 .containerContent {
    width: 100%;
    padding: 32px 32px 0 32px;
  }
}
.foundation2 .caption {
  left: 0;
  border-radius: 0 24px 0 0;
}
@media (max-width:767px) {
  .foundation2 .caption {
    right: 0;
    left: unset;
    border-radius: 24px 0 0 0;
  }
}

.foundationSection {
  display: flex;
  flex-direction: column;
  row-gap: 32px;
  padding: 120px 40px 40px 40px;
  align-items: center;
}

.foundationBody {
  padding: 40px !important;
}

.foundationContainer {
  width: 100%;
  overflow: hidden;
  border-radius: 24px;
  padding: 0px 0 0 0;
  display: flex;
  z-index: 500;
  position: relative;
}
.foundationContainer .foundationImage {
  width: 50%;
}
@media (max-width:767px) {
  .foundationContainer .foundationImage {
    width: 100%;
  }
}
.foundationContainer .foundationImage img {
  width: 100%;
}
.foundationContainer .caption {
  position: absolute;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  padding: 16px;
  font-weight: bold;
}
@media (max-width:575px) {
  .foundationContainer .caption span {
    display: none;
  }
}
.foundationContainer .caption p {
  margin: 0;
}
.foundationContainer .caption a:hover {
  color: rgba(30, 30, 30, 0.7);
  text-decoration: underline;
}

.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;
}

.classroomTitle {
  background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url("../img/classroomHeader.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: rgb(30, 30, 30) !important;
}
.sustainabilityTitle hr {
  border: 1px solid rgb(30, 30, 30) !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";
  -webkit-clip-path: circle(150vw at 50% -118vw);
          clip-path: circle(150vw at 50% -118vw);
  color: #ffffff;
  justify-content: center;
  padding: 85px 0;
  text-align: center;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5vw), 0 100%);
          clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5vw), 0 100%);
}
@media (min-width:1501px) {
  .sustainabilitySubtitle {
    font-size: 3rem;
    line-height: 3.4rem;
  }
}
@media (max-width:1500px) {
  .sustainabilitySubtitle {
    font-size: 2.5rem;
    line-height: 2.9rem;
  }
}
@media (max-width:1300px) {
  .sustainabilitySubtitle {
    font-size: 2.5rem;
    line-height: 2.9rem;
  }
}
@media (max-width:1000px) {
  .sustainabilitySubtitle {
    font-size: 2rem;
    line-height: 2.3rem;
  }
}
@media (max-width:767px) {
  .sustainabilitySubtitle {
    font-size: 2rem;
    line-height: 2.3rem;
  }
}
@media (max-width:575px) {
  .sustainabilitySubtitle {
    font-size: 1.75rem;
    line-height: 1.9rem;
  }
}
@media (max-width:420px) {
  .sustainabilitySubtitle {
    font-size: 1.75rem;
    line-height: 1.9rem;
  }
}
@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: rgb(248, 208, 0);
}
.sustainabilitySubtitlePackaging h3 {
  color: rgb(30, 30, 30);
}

.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: rgb(30, 30, 30);
  color: #ffffff;
  border-radius: 100px;
  padding: 15px;
  font-family: "Cooper Hewitt Semibold";
  width: -moz-fit-content;
  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: rgb(15, 75, 47);
}

.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%;
}

.sustainabilityBodyIcon25 {
  width: 25%;
  padding: 10px;
  display: flex;
  align-self: baseline;
  align-items: center;
  flex-direction: column;
}

.sustainabilityBodyIcon25 img {
  width: 50%;
  padding: 0 20px 20px 20px;
  height: 100%;
}

@media (max-width: 767px) {
  .sustainabilityBodyIcon25 {
    width: 50%;
  }
}
@media (max-width: 575px) {
  .sustainabilityBodyIcon25 {
    width: 100%;
  }
}
.sustainabilityBodyIcon25 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: rgb(22, 29, 89);
}

.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 rgb(30, 30, 30);
  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: rgb(30, 30, 30);
  left: 50%;
  top: 100px;
  bottom: 0;
  width: 3px;
  z-index: 2;
}

.timelineSection {
  max-width: 900px;
  margin: 0px auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  background: rgb(30, 30, 30);
}

.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: rgb(248, 208, 0);
  font-size: 3rem;
  font-family: "Cooper Hewitt Heavy";
}
.timelineEvent .timelineCopyRight p {
  color: rgb(30, 30, 30);
  font-size: 1rem;
}
.timelineEvent .timelineCopyLeft {
  padding: 2% 5% 2% 2%;
  width: 90%;
  text-align: right;
  align-self: center;
}
.timelineEvent .timelineCopyLeft h3 {
  color: rgb(248, 208, 0);
  font-size: 3rem;
  font-family: "Cooper Hewitt Heavy";
}
.timelineEvent .timelineCopyLeft p {
  color: rgb(30, 30, 30);
  font-size: 1rem;
}
.timelineEvent .timelineLine {
  align-self: center;
  height: 3px;
  width: 10%;
  background: rgb(30, 30, 30);
}

.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 {
  -o-object-fit: cover;
     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: rgb(30, 30, 30) !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: rgb(30, 30, 30);
}
.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: -moz-min-content !important;
    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: rgb(30, 30, 30) !important;
    border-left: 1px solid rgb(30, 30, 30) !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: -moz-min-content !important;
    height: min-content !important;
    max-height: -moz-min-content !important;
    max-height: min-content !important;
    z-index: -1 !important;
  }
}
/*///////////////////////  WASTE TASTE  ///////////////////////*/
.sustainabilityWaste {
  background: rgba(255, 255, 255, 0.1);
}

.wasteTitle {
  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1)), url("../img/cannon_beach_bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.wasteTitle h1, .wasteTitle h2, .wasteTitle h3 {
  color: #ffffff !important;
  text-shadow: 2px 2px 8px #000000;
}

.wasteTitle hr {
  border: 1px solid #ffffff !important;
}

@media (max-width: 767px) {
  .wasteHeader h1 {
    font-size: 3.8em;
    line-height: 1em;
  }
}
@media (max-width: 767px) {
  .wasteTitle h3 {
    font-size: 2.8em;
    line-height: 1em;
    text-align: center;
  }
}
@media (max-width: 767px) {
  .wasteBand p {
    font-size: 0.5em;
    line-height: 1em;
  }
}
@media (max-width: 767px) {
  .wasteLeftHalf .wasteRightHalf {
    padding: 5px;
  }
}
.sustainabilitySubtitleWaste {
  background: rgba(255, 255, 255, 0.9);
}

.wasteTitle h1 {
  text-align: center;
  padding-top: 40px;
  text-shadow: 2px 2px 8px #000000;
}

.sustainabilityWaste {
  background: url(./img/cannon_beach_bg.png);
  background-repeat: no-repeat;
  background-size: auto;
}

.wasteLeftHalf {
  width: 50%;
  flex-direction: column;
  justify-content: center;
  padding: 0 20px 0 0;
  display: flex;
  align-items: center;
}

@media (max-width: 767px) {
  .wasteLeftHalf {
    width: 70%;
    padding: 10px 0 20px 0;
    margin: 0px auto;
    align-self: center;
    justify-content: center;
  }
}
.wasteLeftHalf img {
  max-width: 500px;
  max-height: 500px;
  margin: 15px 0;
}

.wasteRightHalf {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 0 0 30px;
}

.wasteRightHalf p {
  color: #fff;
  font-family: "Cooper Hewitt Medium";
  font-weight: bolder;
  font-size: 1.8em;
  text-shadow: 2px 2px 8px #000000;
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .wasteRightHalf {
    width: 100%;
    border: 0px;
  }
}
.wasteRightHalf h3 {
  margin-left: 20px;
}

.wasteBand {
  font-size: 1em;
  line-height: 2em;
  padding: 20px;
  background: linear-gradient(to right, rgba(0, 83, 135, 0), rgb(0, 57, 119));
}

@media (max-width: 767px) {
  .wasteBand {
    font-size: 0.7em;
    line-height: 1em;
  }
}
.wasteHalvesContainer {
  width: 100%;
  padding: 25px;
  display: flex;
  justify-content: center;
}

@media (max-width: 767px) {
  .wasteHalvesContainer {
    flex-direction: column;
    padding: 0 0 15px 0;
    align-items: center;
  }
}
.wasteSpace {
  padding: 20px;
  background-color: #f8d000;
  color: #fff;
}

/*///////////////////////  END WASTE TASTE  //////////////////////*/
/*      NEW SECTION MID        */
.sectionMidFrame {
  display: flex;
  z-index: 4;
  position: relative;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  align-content: center;
  align-items: center;
}

.sectionMidFrame h3 {
  font-size: 1.25rem;
  line-height: 1.5rem;
  color: #000;
  text-align: center;
  font-family: "Cooper Hewitt";
  width: 80%;
  max-width: 750px;
  margin: 0px auto;
}

@media (max-width: 767px) {
  .sectionMidFrame h3 {
    font-size: 1rem;
    line-height: 1.25rem;
    width: 80%;
  }
}
.sectionMidFrame hr {
  border: 1px solid #000;
  width: 40%;
  margin: 20px auto;
}

@media (max-width: 767px) {
  .sectionMidFrame hr {
    margin: 10px auto;
  }
}
/*///////////////////////  START 360 COMMITMENT  ///////////////////////*/
.bodyIconContainer360 {
  display: flex;
  width: 100%;
  justify-content: center;
  margin: 0px auto;
  background-repeat: no-repeat;
  flex-wrap: wrap;
  z-index: 4;
}

.Section360 {
  background: #c7f3ff;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin: 0;
  padding: 0;
}

.sustainability360 {
  background-repeat: no-repeat;
  background-size: auto;
  margin: 0;
}

.HalvesContainer360 {
  width: 50%;
  padding: 25px;
  display: flex;
  justify-content: center;
}

@media (max-width: 820px) {
  .HalvesContainer360 {
    flex-direction: column;
    padding: 0 0 15px 0;
    align-items: center;
  }
}
.LeftHalf360 {
  width: 40%;
  background: url("../img/360-graphic.jpg");
  background-size: cover;
  min-height: 600px;
  background-position: center;
  background-repeat: no-repeat;
  flex-direction: column;
  justify-content: center;
  padding: 0;
  display: flex;
  align-items: center;
}

@media (max-width: 820px) {
  .LeftHalf360 {
    background: url("../img/360-header.jpg");
    display: block;
    text-align: center;
    background-repeat: no-repeat;
    width: 100%;
    padding: 0;
    margin: 0px auto;
    min-height: 100px;
    min-width: 100%;
    align-self: center;
    justify-content: center;
  }
}
.LeftHalf360 img {
  width: 40%;
  height: auto;
  margin: 0;
  min-height: 600px;
  background-repeat: no-repeat;
}

@media (max-width: 820px) {
  .LeftHalf360 img {
    width: 100%;
    background-repeat: no-repeat;
    height: auto;
    min-height: 100px;
    margin: 0 auto;
    align-items: center;
  }
}
.RightHalf360 {
  width: 60%;
  height: -moz-max-content;
  height: max-content;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;
}

.RightHalf360 p {
  font-weight: bolder;
  font-size: 1.4em;
  margin-bottom: 0;
  margin-top: 0;
  justify-content: center;
  width: 80%;
  padding-left: 100px;
  padding-top: 35px;
  padding-bottom: 35px;
}

@media (max-width: 850px) {
  .RightHalf360 {
    margin: 0 auto;
    padding: 0px;
    font-size: 0.7em;
    width: 100%;
    border: 0px;
  }
  .RightHalf360 p {
    padding: 30px 30px 30px 30px;
    width: 100%;
    text-align: center;
  }
}
.Space360 {
  padding: 20px;
  background-color: #f8d000;
  color: #fff;
}

/*///////////////////////  END 360 COMMITMENT  //////////////////////*/
/* ---- 1906 SECTION ----*/
.section1906 {
  background: url("../img/home1906BG.jpg") no-repeat;
  background-size: cover;
  z-index: 1000;
}

@media (max-width: 1200px) {
  .section1906 {
    background: url("../img/home1906BG2.jpg") no-repeat;
  }
}
@media (max-width: 741px) {
  .section1906 {
    padding-top: 60px;
    padding-bottom: 140px;
    background: url("../img/home1906BG3.jpg") no-repeat;
  }
}
.container1906Content {
  width: 50%;
  align-self: center;
  padding-left: 10px;
}

@media (max-width: 1200px) {
  .container1906Content {
    padding-left: 0;
    padding-top: 0px;
    width: 60%;
  }
}
@media (max-width: 741px) {
  .container1906Content {
    float: left;
    padding-left: 0;
    padding-top: 0px;
    width: 100%;
  }
}
/* ---- END 1906 SECTION ----*//*# sourceMappingURL=style.css.map */

.width85 {
  width:85%;
}

  /* ---- TEACHER APPRECIATION ----*/  
  
  .section-teachers {
    background: linear-gradient(rgba(5, 9, 78, 0.2), rgba(255, 161, 20, 0.5)), url("../img/teachers-BG.jpg") no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    z-index: 1000;
    padding-top:40px;
    padding-bottom:35px;
  }
@media (max-width: 767px) {
 .section-teachers {
        background-position-x: 40%;
        padding-top: 15px;
        padding-bottom: 5px;
      } 
 }    

   /* ---- GRILLED CHEESE SECTION----*/  

 .section-cheese {
  background: url("../img/BGgrilledcheese.jpg") no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  z-index: 1000; }
  @media (max-width: 1200px) {
    .section-cheese {
      background-position-y: 40%; } }
  @media (max-width: 767px) {
    .section-cheese {
      background: url("../img/BGgrilledcheese2.jpg") no-repeat; } }

      /*Privacy Popup Begin*/
#cookieConsent {
  background-color: rgba(20,20,20,0.8);
  min-height: 26px;
  font-size: 14px;
  color: #ccc;
  line-height: 26px;
  padding: 8px 0 8px 30px;
  font-family: "Trebuchet MS",Helvetica,sans-serif;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: none;
  z-index: 9999;
  text-align: center;
}
#cookieConsent a {
 color:rgb(220, 220, 220);
 text-decoration: underline;
}
#closeCookieConsent {
  display: inline-block;
  cursor: pointer;
  height: 20px;
  width: 20px;
  margin: -15px 0 0 0;
  font-weight: bold;
}
#closeCookieConsent:hover {
  color: #FFF;
}
#cookieConsent a.cookieConsentOK {
  background-color:rgba(248, 208, 0, 0.9);
  color: white;
  display: inline-block;
  border-radius: 5px;
  padding: 0 20px;
  cursor: pointer;
  margin: 0 60px 0 10px;
  transition: background-color 650ms;
}
#cookieConsent a.cookieConsentOK:hover {
  background-color: #3e75bd;
}
/*Cookie Consent End*/

/*Cookie Consent End*/

   /* ---- FRANZ GIVES SECTION ----*/
  
   .gives-bg {
    background: url("https://franzbakery.com/img/cloud_BG.jpg") no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    z-index: 1000;
    padding-top:40px;
    padding-bottom:35px;
  }
  @media (max-width: 767px) {
  .gives-bg {
        background-position-x: 40%;
        padding-top: 15px;
        padding-bottom: 5px;
      } 
  }

  @media (max-width: 850px) {
    .mobe { transform: scale(0.5);
      max-height:50%; 
      max-width:50%; }
    }
    
      .card-0 {
        border:0px;
        background-color:transparent;
      }
      
      .card-text {
        font-size: 16px;
        font-weight: 100;
        -webkit-font-smoothing: antialiased;
      }
      
      /* ---- Half Loaf SECTION ----*/
      
         #halfLoaves {
          background: url("https://franzbakery.com/img/BGhalf.jpg") no-repeat;
          padding-top: 3rem !important;
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;
          z-index: 1000; } 
      
      @media all and (max-width:900px) {
          #halfLoaves {
              background: url("https://franzbakery.com/img/BGhalfMobile.jpg") center center cover no-repeat;
              -webkit-background-size: cover;
              -moz-background-size: cover;
              -o-background-size: cover;
              background-size: cover;
              padding-top: 60px; 
              background-size: cover;
              z-index: 1000;
            } 
         }
      /* ---- End SECTION ----*/
      
      /* @media only screen and (max-width: 999px) {
        section[data-section-id="halfsection1"] {
          display: none;
        }
      }
      
      @media only screen and (min-width: 1000px) {
        section[data-section-id="halfsection2"] {
          display: none;
        }
      } */
      
      @media  (max-width: 999px) {
         .album {
          display: none;
         }
      }
      
      @media (min-width: 1000px) {
        .albumMobile {
          -webkit-column-count: 2;
          -moz-column-count: 2;
           column-count: 2;
           flex-basis:0;
          flex-grow:1;
           max-width:100%;
           display: none;
          }
        }
      /* ---- END ----*/
      
      
      /* ---- mini buns SECTION ----*/
      .sectionMiniBuns {
        background: url("https://franzbakery.com/img/miniBunsBG.jpg") no-repeat;
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;
          z-index: 1000; }
       @media (max-width: 1200px) {
            .sectionMiniBuns {
              background: url("https://franzbakery.com/img/miniBunsMedBG.jpg") no-repeat;
              } }        
       @media (max-width: 780px) {
            .sectionMiniBuns {
              -webkit-background-size: cover;
              -moz-background-size: cover;
              -o-background-size: cover;
              background-size: cover;
              padding-top: 60px;
              background-image: url("https://franzbakery.com/img/miniBunsBG.jpg");
              background-position: center top;
              background-size: cover;
               } }
      
      .miniBunsContainer {
                padding: 120px 8% 50px 8%;
                display: flex;
                z-index: 500;
                position: relative;
                width: 100%; }
                @media (max-width: 767px) {
                  .miniBunsContainer {
                    padding: 115px 8% 35px 8%;} }
                @media (max-width: 575px) {
                  .miniBunsContainer {
                    padding: 90px 8% 25px 8%; } }
                @media (max-width: 420px) {
                  .miniBunsContainer {
                    padding: 50px 8% 20px 8%; } }         
      /* ---- End SECTION ----*/

/* ---  No Artificial Colors  --- */

.sectionNoArt h3 {
  font-size: 1rem;
  line-height: 1.5rem;
  color:#0b1e2a;
  text-align: center;
  font-family: "Cooper Hewitt";
  width: 80%;
  max-width: 750px;
  margin: 0px auto;
}

@media (max-width: 767px) {
  .sectionNoArt h3 {
    font-size: 1rem;
    line-height: 1.25rem;
  }
}

.containerCopyNoArt h3 {
  font-size: 1rem;
  line-height: 4.5rem;
  color:#0b1e2a;
}

.containerContentNoArt {
    align-self: center;
}

@media (max-width: 767px) {
  .containerContentNoArt {
    font-size: 1rem;
    line-height: 1.25rem;
    padding: 10px 8%;
  }
}

.sectionNoArt {
        background: url("https://franzbakery.com/img/homeNoArtBG.jpg") no-repeat;
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;
          z-index: 1000; }
   @media (max-width: 1200px) {
            .sectionNoArt {
              background: url("https://franzbakery.com/img/homeNoArtBG.jpg") no-repeat;
              } }        
   @media (max-width: 780px) {
            .sectionNoArt {
              -webkit-background-size: cover;
              -moz-background-size: cover;
              -o-background-size: cover;
              background-size: cover;
              padding-top: 60px;
              background-image: url("https://franzbakery.com/img/homeNoArtBG.jpg");
              background-position: center top;
              background-size: cover;
               } }

.boldWhite {
  color:#fff;
  align-self: center;
  text-shadow: 2px 2px 2px #000000;
}

/* --- Fall 2025 --- */

      .sectionFall2025 {
        background: url("https://franzbakery.com/img/wakeUpBG.jpg") no-repeat;
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;
          z-index: 1000; }
       @media (max-width: 1200px) {
            .sectionFall2025 {
              background: url("https://franzbakery.com/img/wakeUpBG_Mobile.jpg") no-repeat;
              background-size: cover;
              } }        
       @media (max-width: 780px) {
            .sectionFall2025 {
              -webkit-background-size: cover;
              -moz-background-size: cover;
              -o-background-size: cover;
              background-size: cover;
              padding-top: 20px;
              background-image: url("https://franzbakery.com/img/wakeUpBG_Mobile.jpg");
              background-position: center top;
              background-size: cover;
               } }
      
      .sectionFall2025 {
                padding: 50px 8% 50px 8%;
                z-index: 500;
                position: relative;
                width: 100%; }
                @media (max-width: 767px) {
                  .sectionFall2025 {
                    padding: 115px 8% 35px 8%;} }
                @media (max-width: 575px) {
                  .sectionFall2025 {
                    padding: 90px 8% 25px 8%; } }
                @media (max-width: 420px) {
                  .sectionFall2025 {
                    padding: 50px 8% 20px 8%; } }
                         
.text-product {
  font-size: .5em;
  line-height: 1em;
  font-weight: 200;
  display: block;
  text-align:center;
}
  @media (max-width: 1200px) {
   .text-product {
    font-size: 1em;
    } }   

.header-product {
  font-size: 5em;
  color:midnightblue;
}

.subhead-product {
  font-size:2em;
  color:midnightblue;
  line-height:1.2em;
}

.fixed{
    width:200px;
}

.zoom {
  transition: transform .3s; /* Animation */
  margin: 0 auto;
}

.zoom:hover {
  transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

.zoom:not(:hover) {
  transform: scale(.9); 
}

   /* ---- End SECTION ----*/