html, body {
  height: 100%; }

html {
  font-size: 14px;
  margin: 0px; }

body {
  font-family: 'Roboto', Helvetica;
  font-weight: 400;
  padding-top: 175px;
  background: url("../img/bg.jpg") repeat;
  background-repeat: repeat; }

@media (max-width: 767px) {
  body {
    padding-top: 75px; } }

a {
  font-weight: bold;
  color: #262626;
  text-decoration: none; }

.form-control {
  font-size: 1.25rem; }

.bold {
  font-weight: 500;
  font-family: 'Roboto', sans-serif; }

.note {
  font-style: italic;
  font-size: .75rem; }

.uppercase {
  text-transform: uppercase; }

a:hover {
  color: #065b8c;
  text-decoration: none;
  -webkit-transition: color 0.2s ease-in-out;
  -o-transition: color 0.2s ease-in-out;
  transition: color 0.2s ease-in-out; }

h5 {
  font-weight: 700;
  font-size: 24px;
  margin: 1rem 0 .5rem 0; }

p {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  font-weight: 300; }

.alert {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 95% 5%;
  grid-template-columns: 95% 5%;
  -ms-grid-rows: 100%;
  grid-template-rows: 100%;
  z-index: 5001 !important;
  position: fixed !important;
  width: 100% !important;
  height: 50px !important;
  top: 0 !important;
  background: #fcfc17 !important;
  color: #262626 !important;
  font-size: 1.25rem !important;
  text-align: center !important;
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23) !important;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23) !important; }

@media (max-width: 767px) {
  .alert {
    font-size: 1rem !important; } }

@media (max-width: 490px) {
  .alert {
    height: 75px !important; } }

.grayHover {
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center; }

.grayHover:hover {
  color: #262626 !important; }

.alertImg {
  display: -ms-grid;
  display: grid;
  width: 100%; }

.alertGrid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 30% 70%;
  grid-template-columns: 30% 70%;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }

.alertGrid .ingTitle {
  padding-left: 10px; }

.alertHams {
  max-width: 100%;
  padding: 0 0 10px 0; }

.alertImg img {
  max-width: 100%; }

.alertSpan {
  font-weight: bold;
  cursor: pointer;
  text-decoration: underline; }

.ingredientList {
  font-size: 13px;
  padding-left: 15px;
  margin-bottom: 0rem; }

.ingredientModal {
  z-index: 23 !important; }

.ingredientSubmodal {
  z-index: 24 !important; }

.topping {
  font-weight: bold;
  list-style-type: none;
  font-size: 16px; }

.row {
  margin: 0px !important; }

.dummyProduct {
  visibility: hidden; }

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

.navbarWrapper {
  position: fixed;
  z-index: 50000;
  top: 0;
  width: 100%; }

.mobileNavbar {
  background: white;
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  height: 65px;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 0px 10px 0px 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

.bigNavbar {
  z-index: 50000;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  display: flex;
  opacity: 1;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease; }

.bigNavbar.scroll {
  flex-direction: row;
  background: #ffffff;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  box-shadow: 2px 2px 8px #696969; }
  .bigNavbar.scroll .nav {
    padding: 10px; }
    @media (max-width: 850px) {
      .bigNavbar.scroll .nav {
        font-size: 1.1rem; } }
    @media (max-width: 800px) {
      .bigNavbar.scroll .nav {
        font-size: 1rem; } }

.bigNavbar.white {
  background: #ffffff; }

.smallNavbar {
  height: 75px;
  flex-wrap: wrap;
  width: 100%;
  display: flex;
  flex-direction: row;
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  justify-content: space-between;
  z-index: 5000;
  background: #ffffff;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease; }

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

.alertPadding {
  padding: 60px 20px 0px 20px; }

  .headerImage {
    width: 100%;
    height: 60vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
  
  .headerImageHome {
    background: url(../img/hero2.png) no-repeat right center;
    background-size: cover; }
    @media (max-width: 575px) {
      .headerImageHome {
        background-position-x: 70%; } }

 .headerNewItem {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex; }
 .headerNewItem {
        background: url(../img/Naked_ORG_Bagels02-HERO.jpg) no-repeat right center;
        background-size: cover; }

        @media (max-width: 575px) {
    .headerNewItem {
            background-position-x: 70%;
            background-size: cover; } }


.headerImageRecipes {
  background: url(../img/heroRecipes.png) no-repeat center right;
  background-size: contain; }

@-webkit-keyframes greyscale-fade-in {
  0% {
    -webkit-filter: grayscale(100%);
    -webkit-filter: opacity(0%); }
  100% {
    -webkit-filter: grayscale(0%);
    -webkit-filter: opacity(100%); } }

@keyframes greyscale-fade-in {
  0% {
    -webkit-filter: grayscale(100%);
    -webkit-filter: opacity(0%); }
  100% {
    -webkit-filter: grayscale(0%);
    -webkit-filter: opacity(100%); } }

.headerImage {
  -webkit-animation: greyscale-fade-in 3s ease-in forwards;
  animation: greyscale-fade-in 3s ease-in forwards; }

@-webkit-keyframes fade-in {
  0% {
    -webkit-filter: opacity(0%); }
  100% {
    -webkit-filter: opacity(100%); } }

@keyframes fade-in {
  0% {
    -webkit-filter: opacity(0%); }
  100% {
    -webkit-filter: opacity(100%); } }

.headerImage {
  -webkit-animation: greyscale-fade-in 3s ease-in forwards;
  animation: greyscale-fade-in 3s ease-in forwards; }

.topLogo {
  padding: 50px 25px 25px 25px;
  text-align: center;
  display: flex;
  height: 100%; }

.brandNew {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 0px auto;
  margin-top: 20px; }
  .brandNew img {
    width: 750px;
    max-width: 100%; }

@media (max-width: 767px) {
  .topLogo {
    padding: 0px !important; } }

.topLogo.topLogoScroll {
  align-self: center;
  padding: 15px 25px; }

.headerLogo {
  width: 250px;
  margin: 0 auto;
  height: 100%; }

.headerLogo.scrollLogo {
  margin: 0;
  width: 150px; }

@media (max-width: 500px) {
  .headerLogo {
    width: 75px; } }

.nav {
  font-weight: 500;
  align-items: center;
  font-size: 1.25rem;
  padding: 20px;
  font-family: 'Roboto', sans-serif;
  justify-content: center; }

@media (max-width: 850px) {
  .nav-link {
    padding: 0 .75em; }
  .headerLogoScroll {
    width: 100px; } }

.nav-item {
  padding: 0 18px;
  line-height: 1; }

@media (max-width: 1000px) {
  .nav-item {
    padding: 0 12px; } }

.spacer {
  border-top: 1px solid #a0a0a0;
  width: 70%;
  margin: 0 auto; }

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

.divider {
  color: #999999 !important; }

.nav-link {
  font-family: 'Roboto', Helvetica;
  text-decoration: none;
  color: #282828;
  width: 100%;
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center;
  padding: 0 !important; }

.anchor {
  display: block;
  position: relative;
  top: -70px;
  visibility: hidden; }

.anchorProducts {
  display: block;
  position: relative;
  top: -75px;
  visibility: hidden; }

@media (max-width: 767px) {
  .anchor {
    top: -65px; } }

.nav-link:hover {
  color: #fdcc57 !important;
  -webkit-transition: color 0.2s ease-in-out;
  -o-transition: color 0.2s ease-in-out;
  transition: color 0.2s ease-in-out; }

.mobileLogo {
  width: 150px;
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center;
  padding: 10px 0px 10px 0px; }

.mobileNavbar {
  padding: .5rem .5rem .5rem 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: fixed;
  top: 0;
  height: 75px;
  width: 100%;
  background: #ffffff;
  z-index: 2000; }

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

.tg {
  width: 100%; }
  .tg h5 {
    width: 50%;
    color: #262626; }
    .tg h5 a {
      color: #262626;
      font-family: 'Roboto', sans-serif;
      font-weight: 900; }
    .tg h5 a:hover {
      opacity: .7;
      transition: .3s; }

.tagline {
  margin: 0;
  font-size: 4.7rem;
  line-height: 4.4rem;
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  color: #262626;
  -webkit-animation: fade-in 3s ease-in forwards;
  animation: fade-in 3s ease-in forwards;
  text-align: left;
  display: inline-block; }

@media (min-width: 767px) and (min-height: 500px) {
  .tagline {
    font-size: 5.5rem;
    line-height: 5.2rem; } }

@media (min-width: 994px) and (min-height: 700px) {
  .tagline {
    font-size: 6.5rem;
    line-height: 6.2rem; } }

@media (min-width: 1159px) and (min-height: 750px) {
  .tagline {
    font-size: 5rem;
    line-height: 4.6rem;
    border: 0px; } }

    .tagline-secondary {
      margin: 0;
      font-size: 4.7rem;
      line-height: 4.4rem;
       font-family: 'Roboto', sans-serif;
       font-weight: 900;
       color: #262626;
       -webkit-animation: fade-in 3s ease-in forwards;
       animation: fade-in 3s ease-in forwards;
       text-align: left;
       display: inline-block; }
 
       @media (min-width: 767px) and (min-height: 500px) {
         .tagline-secondary {
           font-size: 4.5rem;
           line-height: 4.5rem; } }
       
       @media (min-width: 994px) and (min-height: 700px) {
         .tagline-secondary {
           font-size: 4rem;
           line-height: 4rem; } }
       
       @media (min-width: 1159px) and (min-height: 750px) {
         .tagline-secondary {
           font-size: 3.5rem;
           line-height: 3.5rem;
           border: 0px; } }

.contact {
  cursor: pointer;
  font-weight: bold; }

.btn {
  background: #282828;
  color: white; }

.btn:hover {
  background: #068c23;
  color: #282828;
  -webkit-transition: background 0.5s ease-in-out;
  -o-transition: background 0.5s ease-in-out;
  transition: background 0.5s ease-in-out;
  -webkit-transition: color 0.3s ease-in-out;
  -o-transition: color 0.3s ease-in-out;
  transition: color 0.3s ease-in-out; }

@media (max-width: 767px) {
  .tagline {
    font-size: 5rem;
    text-align: left;
    line-height: 4.6rem; } }

@media (max-width: 571px) {
  .tagline {
    font-size: 4rem;
    line-height: 3.8rem; } }

@media (max-width: 400px) {
  .tagline {
    font-size: 3rem;
    line-height: 3rem; } }

    @media (max-width: 767px) {
      .tagline-secondary {
        font-size: 5rem;
        text-align: left;
        line-height: 4.6rem; } }
    
    @media (max-width: 571px) {
      .tagline-secondary {
        font-size: 4rem;
        line-height: 3.8rem; } }
    
    @media (max-width: 400px) {
      .tagline-secondary {
        font-size: 3rem;
        line-height: 3rem; } }

.red {
  background: #970048; }

.blue {
  background: #005cb9; }

.products {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0 auto !important;
  padding-bottom: 15px; }

.productsSubheader {
  margin: 50px 5% 20px 5%;
  border-radius: 20px;
  padding: 4px 30px;
  background: #262626;
  color: white; }

.productDescription {
  border-bottom: 2px solid #262626;
  padding: 0 0 10px 0;
  margin: 0 0 20px 0; }
  .productDescription p {
    font-size: 18px;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    margin: 0;
    line-height: 21px; }

.organicPreheader {
  display: flex;
  align-items: center; }
  .organicPreheader .preheaderLine {
    height: 2px;
    background-color: #1e1e1e;
    min-width: 100px; }
  .organicPreheader h4 {
    font-size: 3rem;
    padding-right: 20px;
    line-height: 1;
    margin: 0;
    font-family: r; }
    @media (max-width: 767px) {
      .organicPreheader h4 {
        font-size: 2.5rem; } }

.subheaderMobile {
  display: none; }
  @media (max-width: 575px) {
    .subheaderMobile {
      display: flex; }
      .subheaderMobile h2 {
        font-size: 4rem !important;
        line-height: 3.5rem !important; } }
  @media (max-width: 420px) {
    .subheaderMobile h2 {
      font-size: 3rem !important;
      line-height: 2.7rem !important; } }

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

.productsSubheader {
  margin: 0;
  padding: 0;
  mix-blend-mode: multiply;
  background: none; }
  @media (max-width: 767px) {
    .productsSubheader {
      width: 100%; } }
  .productsSubheader h2 {
    font-size: 5rem;
    line-height: 4.6rem;
    font-family: cubano-sharp;
    text-transform: capitalize; }
    @media (max-width: 767px) {
      .productsSubheader h2 {
        font-size: 4rem;
        line-height: 3.6rem; } }
    @media (max-width: 575px) {
      .productsSubheader h2 {
        font-size: 3rem;
        line-height: 2.6rem; } }

.organicBreadsSubheader {
  color: #068c23; }

.doughSubheader {
  color: #009ade; }

.classicsSubheader {
  color: #001f72; }

.rollsSubheader {
  color: #e2530c;
  justify-content: center; }
  @media (max-width: 575px) {
    .rollsSubheader h2 {
      text-align: center; } }

.productsSubheader h3 {
  padding: 20px 12px 12px 12px;
  font-size: 2rem;
  text-align: center;
  font-family: cubano-sharp;
  text-transform: capitalize; }

@media (max-width: 500px) {
  .productsSubheader h3 {
    font-size: 1.75rem; } }

.breadCategory {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: center; }

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

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

.breadCategory.orgBread {
  justify-content: space-evenly; }

.dinnerRolls {
  background-size: cover;
  background-repeat: no-repeat;
  justify-content: flex-end;
  padding-top: 25px; }

.organicBread {
  background-size: cover;
  background-repeat: no-repeat;
  justify-content: flex-end;
  padding-top: 75px; }

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

.organicHeader {
  width: 100%;
  display: flex; }
  @media (max-width: 575px) {
    .organicHeader {
      flex-direction: column; } }
  .organicHeader .organicHeaderLeft, .organicHeader .doughHeaderLeft {
    align-items: center;
    width: 40%; }
  .organicHeader .bunsHeaderLeft {
    padding-left: 5% !important; }
  .organicHeader .doughHeaderLeft {
    width: 35%;
    align-items: center; }
  .organicHeader .rollsHeaderLeft {
    width: 50%; }
  @media (max-width: 575px) {
    .organicHeader .rollsHeaderLeft {
      flex-direction: column-reverse;
      display: flex;
      width: 100%; }
      .organicHeader .rollsHeaderLeft .orgBread {
        width: 50%;
        margin: 0px auto; } }
  .organicHeader .organicHeaderLeft, .organicHeader .doughHeaderLeft {
    display: flex; }
    @media (max-width: 575px) {
      .organicHeader .organicHeaderLeft, .organicHeader .doughHeaderLeft {
        flex-direction: row;
        width: 100%; } }
    .organicHeader .organicHeaderLeft img, .organicHeader .doughHeaderLeft img {
      width: 100%; }
      @media (max-width: 575px) {
        .organicHeader .organicHeaderLeft img, .organicHeader .doughHeaderLeft img {
          width: 50%; } }
  .organicHeader .organicHeaderRight {
    width: 60%;
    padding: 25px 25px 0 20px; }
    @media (max-width: 575px) {
      .organicHeader .organicHeaderRight {
        width: 100%;
        padding: 25px; } }
  .organicHeader .doughHeaderRight {
    width: 65%;
    justify-content: center;
    display: flex;
    flex-direction: column;
    padding: 25px 10% 0 20px; }
    @media (max-width: 575px) {
      .organicHeader .doughHeaderRight {
        width: 100%;
        padding: 0 25px; } }
  .organicHeader .rollsHeaderRight {
    width: 50%;
    padding: 25px 10% 0 20px;
    display: flex;
    flex-direction: column;
    justify-content: center; }
    @media (max-width: 575px) {
      .organicHeader .rollsHeaderRight {
        width: 100%;
        padding: 0 25px; } }

.cookiePlateDesktop {
  display: flex; }

/*@media (min-width:768px) {
  .cookiePlateMobile {
    display:none;
  }
}*/
.organicText {
  display: flex;
  flex-direction: column;
  padding: 20px 0; }
  .organicText .organicTextHeader {
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
    font-size: 2rem; }
  .organicText .organicTextCopy {
    font-size: 1.25rem; }

.product {
  width: 100%;
  padding: 2% 4%;
  max-width: 450px; }

.product20 {
  width: 20%;
  height: initial; }
  @media (max-width: 767px) {
    .product20 {
      width: 33.3%; } }
  @media (max-width: 420px) {
    .product20 {
      width: 50%; } }

.product33 {
  width: 33.3%;
  height: initial; }
  @media (max-width: 420px) {
    .product33 {
      width: 50%; } }

.product25 {
  width: 25%;
  height: initial; }
  @media (max-width: 767px) {
    .product25 {
      width: 50%; } }

.product50 {
  width: 50%;
  height: initial; }

.product40 {
  width: 40%;
  height: initial; }
  @media (max-width: 767px) {
    .product40 {
      width: 33.3%; } }
  @media (max-width: 420px) {
    .product40 {
      width: 50%; } }

.breadRow {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 5%;
  flex-direction: column;
  justify-content: space-between;
  height: ;
  padding: 2%;
  width: 100%;
  align-items: center;
  flex-wrap: nowrap; }

.ingredientContain {
  height: 100%; }

.varietyHeader {
  align-self: center;
  padding: 0% 2% 5% 2%;
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: flex-end;
  height: 100%; }

.variety {
  font-weight: bold;
  font-size: 1.75rem;
  line-height: 1.7rem;;
  color: #262626;
  font-family: cubano-sharp, sans-serif;
  padding: 5% 0;
  text-align: center; }
  @media (max-width: 767px) {
    .variety {
      font-size: 1.5rem; } }

.socialMobile {
  margin-top: 35px;
  padding-right: 10px;
  position: absolute;
  top: 0;
  right: 0;
  font-size: 30px;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }
  .socialMobile a {
    color: #ffffff !important;
    padding: 0 10px;
    display: inline-block;
    line-height: 1; }

.social {
  position: absolute;
  right: 15%;
  color: #262626;
  font-size: 24px;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

.socialIcon {
  display: inline-block;
  padding: 12px !important; }

.button {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 18px;
  cursor: pointer;
  display: inline-block;
  border-radius: 100px;
  padding: 7px 20px 4px 20px;
  font-weight: bold; }
  @media (max-width: 767px) {
    .button {
      font-size: 1rem; } }

.buttonClassic {
  background: #cccccc;
  color: #262626; }

.button:hover {
  background: #262626;
  color: white;
  -webkit-transition: background 0.3s ease-in-out;
  -o-transition: background 0.3s ease-in-out;
  transition: background 0.3s ease-in-out; }

.buttonMain {
  background: #fdcc57;
  color: #262626; }

.buttonOrg {
  background: #068c23;
  color: #ffffff; }

.buttonDough {
  background: #009ade;
  color: #ffffff; }

.buttonOrg:hover, .buttonRolls:hover, .buttonClassics:hover, .buttonDough:hover {
  background: #262626;
  color: white;
  -webkit-transition: background 0.3s ease-in-out;
  -o-transition: background 0.3s ease-in-out;
  transition: background 0.3s ease-in-out; }

.buttonRolls {
  background: #e2530c;
  color: #ffffff; }

.buttonText {
  font-weight: 900;
  cursor: pointer;
  font-family: 'Roboto', Helvetica; }

.buttonText:hover {
  text-decoration: none;
  color: #068c23;
  -webkit-transition: color 0.3s ease-in-out;
  -o-transition: color 0.3s ease-in-out;
  transition: color 0.3s ease-in-out; }

.redText {
  color: #970048 !important; }

@media (min-width: 576px) {
  .modal-dialog {
    max-width: 600px !important; } }

#modalBakers {
  width: 100%; }

.modal-dialogue {
  margin: 10% auto; }

.modal-header {
  font-weight: 400;
  padding: 20px 30px;
  height: 100%;
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center;
  border: 0px;
  max-height: 150px; }

.modal-content {
  border: 0;
  z-index: 22;
  border-radius: 0px;
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); }

.modal-header2 {
  display: flex;
  align-items: center;
  font-weight: bold;
  color: #ffffff;
  width: 100%;
  padding: 0% 5%;
  height: 100%;
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center;
  border: 0px; }

.modal-header2 h2 {
  font-family: 'Roboto', sans-serif;
  padding: 2% 5%;
  font-weight: 900; }

.ingredientHeader {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0%;
  background: #262626;
  color: #ffffff;
  height: 60px; }

.logoHeader {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0%;
  background: #262626;
  color: #ffffff;
  height: 100px; }

.disclaimerHeader {
  padding: 5%; }

.modal-header h2 {
  font-weight: 900;
  margin: 0px !important;
  font-family: 'Roboto', sans-serif; }

.kwikLok {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0 0 20px 0; }

.kwikLokLogo {
  width: 200px;
  margin: 0px auto; }

.x {
  position: absolute;
  top: 0;
  right: 0;
  padding: 2% 4%;
  z-index: 3000; }

.xLogo {
  position: absolute;
  top: 0;
  right: 0;
  padding: 4%;
  z-index: 3000; }

.closeLogo {
  text-shadow: none;
  opacity: 1;
  color: #ffffff;
  padding: 2% 3%;
  font-size: 2.5rem;
  border: 0px;
  background: #262626; }

.closeLogo:hover {
  color: #fdcc57;
  -webkit-transition: color 0.1s ease-in-out;
  -o-transition: color 0.1s ease-in-out;
  transition: color 0.1s ease-in-out; }

.close {
  text-shadow: none;
  opacity: 1;
  color: #ffffff;
  padding: 2% 3%;
  font-size: 2.5rem;
  border: none; }

.closeBlack {
  text-shadow: none;
  opacity: 1;
  color: #262626;
  padding: 2% 3%;
  font-size: 2.5rem;
  border: none;
  background: #ffffff; }

.close:hover {
  color: #fdcc57;
  -webkit-transition: color 0.1s ease-in-out;
  -o-transition: color 0.1s ease-in-out;
  transition: color 0.1s ease-in-out; }

.closeBlack:hover {
  color: #fdcc57;
  -webkit-transition: color 0.1s ease-in-out;
  -o-transition: color 0.1s ease-in-out;
  transition: color 0.1s ease-in-out; }

.closeBorder {
  background: #262626;
  padding: 27% 48%;
  border-radius: 5px; }

.fa-times {
  color: #ffffff;
  background: #262626;
  size: 30px; }

.subheadLocations {
  display: flex;
  width: 80%;
  max-width: 1200px;
  padding: 25px;
  justify-content: center;
  align-items: center;
  margin: 0 auto; }
  @media (max-width: 767px) {
    .subheadLocations {
      width: 100%;
      flex-direction: column;
      text-align: left;
      margin: 0;
      padding: 0 0 20px 0;
      justify-content: flex-start;
      align-items: flex-start; } }
  .subheadLocations h2 {
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
    text-align: right;
    font-size: 3.5rem;
    padding-right: 15px; }
    @media (max-width: 767px) {
      .subheadLocations h2 {
        font-size: 2.5rem;
        text-align: left;
        margin: 0;
        padding: 20px 0;
        justify-content: flex-start; } }

.subhead {
  width: 100%;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  align-items: center;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  max-width: 1200px;
  font-family: 'Roboto', sans-serif;
  font-weight: 900; }

@media (max-width: 767px) {
  .subhead {
    display: initial; }
  .subhead {
    text-align: left;
    width: 100%; }
  .mission {
    width: 100%; }
    .mission-black {
      width: 100%; } }

.modal {
  top: 15%;
  z-index: 20; }

.topCard {
  z-index: 21; }

@media (max-width: 575px) {
  .modal {
    top: 9%; } }

.modalImage {
  width: 25%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 5px 0px;
  max-height: 145px;
  margin: 0 auto; }

.modalImageGC {
  width: 40%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 5px 0px;
  max-height: 145px;
  margin: 0 auto; }

.leaven {
  z-index: 1000; }

.modalIngredient {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  display: block;
  padding-bottom: 3%; }

.modalLogo {
  width: 100%;
  margin: 0 auto;
  display: block;
  padding-bottom: 3%;
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center; }

.formCenter {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }

.form {
  width: 100%;
  margin: 0 auto; }

.modalText {
  font-size: 1.5rem;
  padding: 0% 5% 0% 0%;
 }

.modalText2 {
  font-size: 1.5rem;
  padding: 0% 0% 0% 5%;
  border-left: 2px solid #262626; }

@media (max-width: 575px) {
  .modalText {
    border: 0px;
    padding: 0% 0% 0% 3%;
    border-left: 2px solid #262626;
    margin: 10px 0%; }
  .modalText2 {
    border: 0px;
    padding: 0% 0% 0% 3%;
    border-left: 2px solid #262626;
    margin: 10px 0%; }
  .didYouKnow {
    border-top: 0px !important;
    padding: 0% 0% 0% 3% !important;
    border-left: 2px solid #262626;
    margin: 10px 0%; }
  .row p {
    margin-bottom: 0px; } }

.didYouKnow {
  font-size: 1.5rem;
  width: 100%;
  border-top: 2px solid #262626;
  padding: 15px 0% 0% 0%; }

.modalText3 {
  font-size: 1.5rem;
  background: #fff5e6;
  padding-top: 3%;
  width: 100%;
  border-top: 2px solid #ffffff; }

.modalText4 {
  font-size: 1.5rem;
  background: #ffecca;
  padding: 5% 5%;
  width: 100%; }

.subh {
  padding: 3% 10%;
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center;
  width: 100%;
  margin-top: 2% !important; }

@media (max-width: 767px) {
  .subh {
    padding: 3% 8%; } }

.history {
  color: rgba(255, 255, 255, 0.8);
  font-size: 2rem;
  padding: 20% 5% 0% 5%; }

@media (max-width: 767px) {
  .history {
    font-size: 1.5rem;
    padding-top: 10% !important; } }

@media (max-width: 450px) {
  .history {
    font-size: 1rem;
    padding-top: 4% !important; } }

.card-block {
  padding: 20px 30px;
  z-index: 21; }

@media (max-width: 575px) {
  .card-block {
    padding: 10px 15px; }
  .modal-header {
    padding: 10px 15px; } }

.modal-backdrop {
  z-index: 19; }

.card-block-ingredient {
  color: #262626;
  padding: 5%;
  cursor: pointer; }

.card-img-top {
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  cursor: pointer;
  border-radius: 50%;
  border: 0;
  box-sizing: border-box; }

.card-img-product {
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  cursor: pointer;
  border: 0px; }

@media (max-width: 767px) {
  .card-img-top {
    -o-object-fit: cover;
    object-fit: cover;
    width: 50%;
    cursor: pointer;
    display: block;
    margin: 0 auto;
    border-radius: 50%; } }

.header {
  font-family: cubano-sharp, sans-serif;
  font-weight: 900;
  font-size: 2rem;
  text-align: center;
  background: #262626;
  color: #FFFFFF;
  width: 100%; }

.breadCenter {
  padding-top: 10px;
  display: inline-block; }

.bread {
  position: relative;
  z-index: 16;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 15px;
  max-width: 1200px;
  margin: 0 auto !important;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }
  .bread .col-4, .bread .col-md-3 {
    padding: 10px 15px;
    box-sizing: border-box; }
    @media (max-width: 767px) {
      .bread .col-4, .bread .col-md-3 {
        padding: 5px 10px; } }

.title {
  background: none;
  color: #262626;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 6% 20% 4% 20%;
  width: 100%;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }

.titleBlack {
  background: #262626;
  color: #ffffff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 6% 10% 4% 10%;
  width: 100%;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }

@media (max-width: 767px) {
  .titleBlack, .title {
    padding: 8% 8% 4% 8%; } }

.arrow img {
  width: 100%; }

.titleWhite {
  color: #262626;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 8% 15% 4% 15%;
  width: 100%;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }

@media (max-width: 767px) {
  .titleWhite {
    padding: 8% 8% 4% 8%; } }

.titleGray {
  background: #dddddd;
  color: #262626;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 2% 10% 0% 10%; }

.subhead h2 {
  font-size: 4rem;
  font-weight: 900;
  width: 100%;
  margin-bottom: 0;
  padding-bottom: 0px;
  flex: 1 0 auto; }

@media (min-width: 900px) {
  .subhead h2 {
    width: auto;
    padding: 0;
    margin-right: 3%;
    line-height: 3.5rem;
    text-align: right;
    font-size: 4rem;
    width: 50%; } }

@media (min-width: 512px) and (max-width: 767px) {
  .subhead h2 {
    font-size: 4rem;
    font-weight: 900;
    width: 100%;
    line-height: 4rem; } }

@media (max-width: 511px) {
  .subhead h2 {
    font-size: 3rem;
    font-weight: 900;
    width: 100%;
    line-height: 2.8rem; } }

strong {
  font-family: 'Roboto', sans-serif;
  font-weight: 900; }

.titleBlackAboutUs {
  background: #262626;
  color: #ffffff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0% 15%;
  width: 100%;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }

@media (max-width: 767px) {
  .titleBlackAboutUs {
    padding: 0% 8%; } }

@media (min-width: 900px) {
  .mission {
    width: auto;
    padding-left: 5%;
    border-left: 2px solid #ffffff;
    font-weight: 300; }
  .subhead {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row; } }

.mission {
  flex: 0 1 auto; }
  .mission p {
    font-size: 1.75rem;
    line-height: 2.5rem;
    margin: 0px;
    font-weight: 300; }

.mission p a {
  text-decoration: none;
  color: #ffffff; }

@media (max-width: 512px) {
  .mission p {
    margin-bottom: 1rem;
    font-size: 1.25rem;
    line-height: 2.25rem; } }

/*  m ission black line  

@media (min-width: 900px) {
  .mission-black {
    width: auto;
    padding-left: 15px;
    padding-right: 15px;
    border-left: 2px solid #000000;
    font-weight: 300; }  */


 @media (min-width: 900px) {
  .subhead {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row; } }

.mission-black {
  flex: 0 1 auto; }
  .mission-black p {
    font-size: 1.75rem;
    line-height: 2.5rem;
    margin: 0px;
    font-weight: 300; }

.mission-black p a {
  text-decoration: none;
  color: #000000; }

@media (max-width: 512px) {
  .mission-black p {
    margin-bottom: 1rem;
    font-size: 1.25rem;
    line-height: 2.25rem; } }

.bgGray {
  background: #dddddd; }

.bgBlack {
  background: #262626;
  padding: 0% 0% 5% 0%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }

.content {
  padding-top: 3%;
  color: #1e1e1e;
  font-size: 1.5rem;
  line-height: 1.6rem;
  max-width: 1200px; }

.content h5 {
  font-family: 'Roboto', sans-serif;
  font-weight: 500; }

@media (max-width: 767px) {
  .content {
    width: 100%; } }

.contentWhite {
  padding: 0% 10%;
  background: #ffffff;
  color: #262626;
  font-size: 1.5rem;
  line-height: 1.6rem; }

.video {
  width: 100%;
  height: 100%; }

.card-text {
  font-family: cubano-sharp, sans-serif;
  text-align: center;
  font-size: 1.25rem;
  line-height: 1.8rem;
  padding-top: 10px; }

@media (max-width: 500px) {
  .card-text {
    font-size: 1rem;
    line-height: 1.4rem; } }

.card {
  border-radius: 0;
  background: none;
  border: 0px;
  width: 50%;
  padding: 10px; }
  .card span {
    height: 100%; }

.ingTitle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

.line {
  width: 30%;
  height: 1px;
  border: 1px solid #262626;
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center;
  opacity: .5; }

.headerLine {
  width: 25%;
  height: 1px;
  border: 1px solid #ffffff;
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center;
  opacity: .5; }

.headerLineWhite {
  width: 25%;
  height: 1px;
  border: 1px solid #262626;
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center;
  opacity: .5; }

.term {
  font-weight: bold;
  font-size: 1.5rem;
  margin-bottom: .25rem; }

.term2 {
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  width: 100%; }

.textOverlay {
  position: relative;
  width: 100%;
  cursor: pointer;
  font-size: 1rem;
  text-transform: uppercase;
  font-family: cubano-sharp, sans-serif;
  font-size: 2rem; }

.image {
  display: block;
  width: 100%;
  height: auto; }

.farmerImage {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 50%; }

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  -webkit-transition: .5s ease;
  -o-transition: .5s ease;
  transition: .5s ease;
  background-color: #262626;
  cursor: pointer;
  border-radius: 50%; }

.overlay2 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  -webkit-transition: .5s ease;
  -o-transition: .5s ease;
  transition: .5s ease;
  background-color: #ffffff;
  cursor: pointer;
  border-radius: 50%; }

.textOverlay:hover .overlay {
  opacity: .9; }

.textOverlay:hover .overlay2 {
  opacity: .9; }

.textLogo {
  opacity: 1 !important; }

.text {
  color: white;
  font-size: 28px;
  line-height: 34px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center; }
  @media (max-width: 1300px) {
    .text {
      font-size: 20px;
      line-height: 26px; } }

.textLogo {
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center; }

/*--------*/
#toggle {
  width: 28px;
  height: 30px;
  margin: 10px;
  cursor: pointer;
  float: right;
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center; }

#toggle div {
  width: 100%;
  height: 5px;
  background: #282828;
  margin: 4px auto;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }

/*#toggle.on .one {
  transform: rotate(45deg) translate(5px, 5px);
}

#toggle.on .two {
  opacity: 0;
}

#toggle.on .three {
  transform: rotate(-45deg) translate(7px, -8px);
}
*/
#menu {
  display: none;
  text-align: left;
  position: fixed;
  z-index: 98;
  right: 0%; }

.dropbtn {
  border: none;
  cursor: pointer; }

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block; }

/* Dropdown Content (Hidden by Default) */
button {
  background: none !important; }

.dropdown-content {
  display: none;
  position: relative;
  justify-content: center;
  background-color: #ffffff;
  border-bottom: 3px solid #262626;
  z-index: 5000;
  height: 100%;
  align-items: flex-end;
  flex-wrap: wrap; }
  .dropdown-content div {
    color: black;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 16px;
    text-decoration: none;
    width: 25%;
    text-align: center;
    justify-content: flex-end;
    height: 250px;
    justify-content: center; }
  .dropdown-content div a {
    width: 100%;
    height: 100%; }
    .dropdown-content div a h5 {
      font-size: 1rem;
      font-family: 'Roboto', sans-serif;
      font-weight: 900;
      text-align: center; }
    .dropdown-content div a img {
      height: 80%;
      object-fit: contain; }
  .dropdown-content div a:hover {
    color: #fdcc57; }

/* Links inside the dropdown */
/* Show the dropdown menu on hover */
.dropdown-content.clicked {
  display: flex; }
  @media (max-width: 767px) {
    .dropdown-content.clicked {
      display: none; } }

/* Change the background color of the dropdown button when the dropdown content is shown */
.plain {
  text-decoration: none !important; }

.plainBlack {
  text-decoration: none !important;
  color: #ffffff; }

.nutritionals {
  margin: 0 auto;
  height: auto;
  max-width: 100%;
 }

.mobileDropdown {
  background: #262626;
  width: 100vw;
  height: 100vh;
  text-decoration: none !important;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  padding: 10px; }

.mobileProductContainer {
  list-style-type: none;
  padding: 0 5px;
  border-left: 2px solid #fdcc57;
  text-align: left;
  margin-bottom: 15px; }
  .mobileProductContainer .mobileProductCategory {
    text-align: left;
    padding: 15px 0px 0px 8px; }
    .mobileProductContainer .mobileProductCategory a {
      text-decoration: none !important; }
    .mobileProductContainer .mobileProductCategory h5 {
      font-size: 1.25rem;
      line-height: 1.5rem;
      padding: 0;
      margin: 0;
      font-family: 'Roboto', sans-serif;
      text-decoration: none;
      font-weight: 300; }

.dropdownItem {
  color: #ffffff;
  margin: 25px 0;
  padding-left: 10px;
  text-decoration: none !important;
  list-style-type: none;
  font-size: 2rem;
  line-height: 2.5rem;
  font-family: 'Roboto', sans-serif;
  font-weight: 900; }

.dropdownItem a {
  color: #ffffff;
  text-decoration: underline;
  text-decoration-color: #fdcc57; }

.dropdownItem a:hover {
  color: #fdcc57;
  cursor: pointer;
  text-decoration: none !important;
  -webkit-transition: color 0.2s ease-in-out;
  -o-transition: color 0.2s ease-in-out;
  transition: color 0.2s ease-in-out; }

.aboutUs {
  font-size: 1.5rem;
  color: #1e1e1e;
  width: 70%;
  height: auto;
  padding: 4%;
  margin: 0px auto; }

#footer, #footerhome {
  width: 100%;
  padding: 3% 5%;
  background: #262626; }

.footer {
  background: #262626;
  color: #dddddd;
  text-decoration: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-evenly;
  margin: 0px auto;
  max-width: 1000px; }
  @media (max-width: 575px) {
    .footer {
      padding: 20px 10px;
      flex-wrap: wrap;
      justify-content: center; } }

.footerCol {
  display: flex;
  flex-direction: column;
  padding: 0 20px; }
  @media (max-width: 575px) {
    .footerCol {
      text-align: center;
      width: 100%; } }

.footerLinks {
  text-decoration: none;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  text-transform: uppercase;
  list-style-type: none;
  padding-left: 0px; }

.footerLinks li a, .footerLinks li span {
  font-size: 14px;
  line-height: 24px;
  color: #ffffff;
  font-weight: 300;
  cursor: pointer; }

.footerLinks li a:hover {
  color: #fdcc57 !important;
  text-decoration: none;
  -webkit-transition: color 0.2s ease-in-out;
  -o-transition: color 0.2s ease-in-out;
  transition: color 0.2s ease-in-out; }

.footerHeader {
  font-size: 20px;
  font-weight: 900;
  font-family: 'Roboto', sans-serif; }

.footerLogo {
  max-width: 30%;
  flex: 0 0 30%;
  display: flex;
  flex-direction: column; }
  @media (max-width: 575px) {
    .footerLogo {
      max-width: 100%;
      flex: 0 0 100%;
      flex-direction: column-reverse;
      align-items: center; } }

.footerLogo img {
  width: 100%;
  height: 100%;
  max-width: 200px; }
  @media (max-width: 575px) {
    .footerLogo img {
      margin: 0px auto; } }

@media (max-width: 575px) {
  #mc_embed_signup_scroll {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 0 20px 0; } }

#mc_embed_signup input.email {
  width: 100% !important;
  margin: 0 0 20px 0 !important; }

#mc_embed_signup {
  background: none !important;
  padding: 0;
  margin: 0; }

#mc-embedded-subscribe-form {
  background: none !important;
  padding: 20px 0 0 0 !important;
  margin: 0; }
  @media (max-width: 575px) {
    #mc-embedded-subscribe-form {
      width: 100%;
      text-align: center; } }

.subscribeTitle {
  color: #ffffff;
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  background: none;
  line-height: 18px;
  margin-bottom: 0; }

#mc_embed_signup input.button {
  background: #ffffff !important;
  color: #262626 !important;
  border: 2px solid #ffffff !important;
  border-radius: 3px !important;
  transition: 0.3s !important; }

#mc_embed_signup input.button:hover {
  background: none !important;
  color: #ffffff !important;
  transition: 0.3s !important; }

.copyright {
  font-size: 1.3rem;
  color: #ffffff;
  background: #262626;
  width: 100%;
  height: auto;
  text-align: center; }

.cr {
  text-decoration: none;
  background: #262626;
  color: #ffffff;
  text-align: center;
  font-size: 1rem;
  display: inline-block;
  cursor: pointer; }

.bt {
  text-decoration: none;
  color: #ffffff;
  width: 100%;
  text-align: center; }

.bt:hover {
  color: #9d162e;
  -webkit-transition: color 0.2s ease-in-out;
  -o-transition: color 0.2s ease-in-out;
  transition: color 0.2s ease-in-out; }

.bakerPic {
  width: 80%;
  height: 80%;
  padding: 2%; }

@media (min-width: 900px) {
  .bakerText {
    border-left: 2px solid #262626; } }

.name {
  font-size: 24px;
  font-weight: 900; }

.card-img {
  width: 100%;
  border-radius: 0px; }

.card-img-overlay {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0, 0, 0, 0)), color-stop(50%, rgba(0, 0, 0, 0.05)), color-stop(70%, rgba(0, 0, 0, 0.8)), to(#000000));
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.05) 50%, rgba(0, 0, 0, 0.8) 70%, #000000 100%);
  background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.05) 50%, rgba(0, 0, 0, 0.8) 70%, #000000 100%);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.05) 50%, rgba(0, 0, 0, 0.8) 70%, #000000 100%); }

.card-img-overlay p {
  -ms-flex-item-align: end;
  align-self: flex-end;
  padding: 0% 5%;
  font-size: 16px; }

.mobilePadding {
  padding: 2% 5%; }

.bgImageFix {
  padding: 0px !important; }

.botm {
  text-align: center;
  padding-top: 5px;
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  font-size: 16px; }

.ingredient {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  color: #262626;
  cursor: pointer;
  text-transform: uppercase; }

.ingredient:hover {
  color: #fdcc57;
  text-decoration: none;
  -webkit-transition: color 0.2s ease-in-out;
  -o-transition: color 0.2s ease-in-out;
  transition: color 0.2s ease-in-out; }

.bakerLink {
  font-weight: 900;
  color: #262626;
  cursor: pointer; }

.bakerLinkHome {
  font-weight: 900;
  color: #ffffff;
  cursor: pointer; }

.bakerLink:hover, .bakerLinkHome:hover {
  color: #fdcc57;
  text-decoration: none;
  -webkit-transition: color 0.2s ease-in-out;
  -o-transition: color 0.2s ease-in-out;
  transition: color 0.2s ease-in-out; }

.source {
  font-size: 10px;
  font-style: italic;
  padding: 0% 3%;
  width: 100%;
  display: block; }

@media (min-width: 576px) {
  .source {
    padding: 0px; } }

.sourceRow {
  width: 100%; }

.pointer {
  cursor: pointer; }

.pointer:hover {
  color: #fdcc57;
  text-decoration: none;
  -webkit-transition: color 0.2s ease-in-out;
  -o-transition: color 0.2s ease-in-out;
  transition: color 0.2s ease-in-out; }

.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

.carousel {
  height: 100%;
  width: 100%; }

.carousel span {
  width: 100%;
  height: 100%; }

.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23262626' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important; }

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23262626' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important; }

.carousel-inner {
  width: 100%;
  cursor: pointer; }

.carousel-item {
  width: 100%; 
  text-align: center; }

.carousel-item img {
  width: 100%;
  height: 100%;
  max-width: 205px;
  margin: 0px auto; }

.flourTypes {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 50% 50%;
  grid-template-columns: 50% 50%;
  cursor: pointer; }

.flourTypes img {
  width: 100%; }

.flourTypes h4 {
  font-weight: bold;
  font-size: 1rem;
  text-align: center; }

@media (min-width: 400px) {
  .flourTypes h4 {
    font-size: 1.25rem; } }

@media (min-width: 600px) {
  .flourTypes h4 {
    font-size: 1.5rem; } }

.locationsContainer {
  width: 100%;
  padding: 25px;
  display: flex;
  flex-direction: column; }

.locationText {
  padding-left: 15px;
  border-left: 1px solid #262626; }
  .locationText p {
    margin: 0; }
  @media (max-width: 767px) {
    .locationText {
      border: 0;
      padding-left: 0; } }

.locations {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  width: 100%;
  max-width: 1400px;
  overflow: hidden;
  margin: 0px auto;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }

/*slider*/
.commentBoxHeader {
  font-size: 2.5rem;
  font-weight: bold;
  text-align: center;
  width: 100%;
  margin: 0px auto;
  padding: 20px 0 0 0; }

.commentOuterBox {
  width: 100%;
  height: 300px;
  padding: 20px 0 0 0; }

.commentInnerBox {
  height: 300px;
  width: 80%;
  max-width: 650px;
  margin: 20px auto 0;
  overflow: hidden;
  position: relative; }

.commentContent {
  overflow: hidden;
  height: 300px;
  padding: 25px; }

.picCommentGrid {
  display: grid;
  grid-template-columns: 30% 70%; }

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .picCommentGrid {
    display: flex !important;
    flex-direction: column;
    flex-wrap: wrap;
    width: 100%;
    white-space: normal; }
  .picCommentPicture {
    width: 250px !important;
    height: 250px !important; }
  .picCommentPicture img {
    width: 250px !important;
    height: 250px !important; }
  .comment {
    width: 100%;
    height: 100%; }
  .commentInnerBox {
    overflow: visible !important;
    border: none;
    width: 80%;
    max-width: 650px; }
  .commentContent {
    overflow: visible !important;
    padding: 25px 0; } }

.picCommentPicture {
  width: 100%;
  max-width: 300px;
  height: -webkit-max-content !important;
  height: -moz-max-content !important;
  height: max-content !important; }

.picComment {
  padding-left: 10px;
  height: 100%;
  width: 100%; }

.picCommentPicture img {
  border-radius: 50%;
  width: 100%;
  height: 100%; }

.comment {
  font-size: 1.25rem;
  font-style: italic;
  color: #1e1e1e; }
  @media (max-width: 575px) {
    .comment {
      font-size: 1rem; } }

.commentSource {
  font-size: 1.25rem;
  font-weight: bold;
  padding: 5px 0 0 0;
  color: #1e1e1e; }

@media (max-width: 575px) {
  .aos-animate {
    padding-bottom: 20px; } }

.footerDisclaimer {
  font-size: 12px;
  padding: 5px 0 0 0;
  margin: 0; }

/* Coupon Landing Page */
.formHeader {
  width: 100%;
  background: #1e1e1e;
  display: flex;
  flex-direction: column;
  padding: 25px 0;
  justify-content: center;
  align-items: center; }

.formLogo {
  margin: 0px auto;
  max-width: 350px;
  width: 100%;
  height: 100%; }

.arrowDown {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 30px solid #1e1e1e;
  margin: 0px auto; }

.formHeaderText {
  color: #ffffff;
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  padding: 40px 10px 20px 10px;
  font-size: 2rem !important;
  text-align: center; }

form {
  max-width: 550px;
  margin: 0px auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin: 10% auto; }

.halfInput, .thirdInput, .quarterInput, .threeQuarterInput, .stateDropdown {
  display: flex;
  flex-direction: column;
  padding: 10px;
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  align-self: flex-start;
  font-weight: bold; }

@media (max-width: 400px) {
  .halfInput, .thirdInput, .quarterInput, .threeQuarterInput, .stateDropdown {
    width: 100% !important; }
  form {
    flex-direction: column;
    margin: 0px auto;
    width: 70%; } }

.defaultFormStyle {
  background: none;
  height: 28px;
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  border: 1px solid #dddddd; }

.defaultFormStyle option {
  font-size: 10px; }

.halfInput {
  width: 50%; }

.thirdInput {
  width: 33.3%; }

.quarterInput {
  width: 25%; }

.submit {
  background: #1e1e1e;
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  padding: 5px 2px;
  color: #ffffff;
  box-sizing: border-box;
  border: 2px solid #ffffff;
  font-weight: bold; }

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

.socialForm {
  display: flex;
  align-items: center;
  padding-left: 20px;
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  line-height: 1; }

.socialForm h3 {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  font-weight: 500; }

.socialIconsForm {
  font-size: 2rem;
  padding: 10px; }

.socialIconForm {
  padding: 5px;
  color: #1e1e1e; }

.socialIconForm:hover {
  color: #aaaaaa; }

.threeQuarterInput {
  width: 75%; }

.stateDropdown label {
  margin: 0;
  padding: 0; }

.formThankYou {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 2rem;
  width: 70%;
  margin: 0px auto;
  text-align: center;
  color: #1e1e1e;
  padding: 10% 0;
  font-weight: bold; }

.formBody {
  margin-top: 0px !important;
  padding-top: 0px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-height: 100vh; }

.privacyPolicyContainer {
  width: 100%;
  padding: 40px 10% 0 10%;
  max-width: 900px;
  margin: 0px auto; }
  .privacyPolicyContainer h2 {
    font-family: 'Roboto', sans-serif;
    font-weight: 900; }

.doughSaverContainer {
  width: 100%;
  margin: 0px auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  min-height: 100vh; }
  .doughSaverContainer img {
    width: 100%;
    max-width: 700px;
    margin: 0px auto;
    padding: 100px 0 25px 0; }
  .doughSaverContainer .doughSaverButton {
    border-radius: 100px;
    background: #009ade;
    color: #ffffff;
    padding: 10px 20px;
    margin-top: 10px;
    font-family: 'Roboto';
    font-size: 24px;
    font-weight: 700; }
  .doughSaverContainer a {
    cursor: pointer; }
  .doughSaverContainer .doughSaverLink {
    padding: 10px 0 0 0;
    text-decoration: underline;
    transition: .3s;
    font-weight: bold; }
  .doughSaverContainer .doughSaverLink:hover {
    color: #009ade;
    transition: .3s; }

   .pl-25 {padding-left:25px;} 
   .pr-25 {padding-right:25px;} 

   .display-4 {
    font-size: 1.9rem;
    }

    .tagline-secondary {
      text-align: right; }

    @media (max-width: 800px) {
      .tagline-secondary {
        text-align: right; } }      

  @media (max-width: 800px) {
    .mr-20 {
      margin-right:0; } }

      .mission-black {
        text-align: right;
      }

   .container {
    margin-right:0;
      }

   .row {   
     --bs-gutter-x: 0rem;
    }

    .organicHeader .organicHeaderLeft, .organicHeader .doughHeaderLeft {
      display: block;
      width: 35%;
    }
      @media (max-width: 800px) {
        .organicHeader .organicHeaderLeft, .organicHeader .doughHeaderLeft {
          display: none; } }

.callouts {
  display: block;
  height:100px; 
  max-height:100%; 
  max-width:100%; 
  text-align:right; 
}     
@media (max-width: 1000px) {     
  .callouts {
    height:80px; 
    margin: 0px !important;
  }  }

  @media (max-width: 800px) {     
    .callouts {
      height:60px; 
      margin: 0px !important;
    }  }

    /* reset default styles for the anchor tag for each states */

.aSecdiv, .aSecdiv:visited, .aSecdiv:link, .aSecdiv:active, .aSecdiv:hover, .aSecdiv:focus {
  text-decoration:none;
  outline: 0;
 }   

 .x {
  text-align: right;
  padding-top: 0;
 }

 @media (max-width: 950px) {     
  .preview {
    height:50%;
  }  }