/*-=======================================
================ 1350px  =================
=======================================-*/

@media(max-width: 1350px) {
   
}

/*-=======================================
============= END 1350px  ================
=======================================-*/

/*-======================================================-*/

/*-=======================================
================ 1275px  =================
=======================================-*/

@media(max-width: 1275px) {
   .new-products #new-products-greeting h1 {
      font-size: 3.5svh;
   }

   .new-products #new-products-greeting h2 {
      font-size: 2.75svh;
   }

   .new-products #new-products-greeting p {
      font-size: 2.15svh;
   }
}

/*-=======================================
============= END 1275px  ================
=======================================-*/

/*-======================================================-*/

/*-=======================================
================ 1260px  =================
=======================================-*/

@media(max-width: 1260px) {

}

/*-=======================================
============= END 1260px  ================
=======================================-*/

/*-======================================================-*/

/*-=======================================
================ 1235px  =================
=======================================-*/

@media(max-width:1235px){
   .new-products .hero-wrapper {
      padding: 15px;
   }
}

/*-=======================================
============= END 1235px  ================
=======================================-*/

/*-======================================================-*/

/*-=======================================
================ 1025px  =================
=======================================-*/

@media(max-width:1235px){
   #new-products-greeting a.button {
      width: 115px;
   }
}

/*-=======================================
============= END 1255px  ================
=======================================-*/

/*-======================================================-*/

/*-=======================================
================ 1160px  =================
=======================================-*/

@media(max-width:1160px){
   .featured-recipe p {
      font-size: 1.2rem;
   }
}

/*-=======================================
============= END 1160px  ================
=======================================-*/

/*-======================================================-*/

/*-=======================================
================ 1050px  =================
=======================================-*/

@media(max-width:1050px){
   .greetings .greetings-left h1 {
      font-size: 1.5rem;
      line-height: 1.5rem;
   }

   .greetings .greetings-left h2 {
      font-size: 1.15rem;
   }

   .greetings .store1 h2 {
      font-size: 1.75rem;
   }

   .greetings .store1 p {
      font-size: 1.5rem;
   }

   .greetings .store2 p.address {
      font-size: 1.27rem;
   }

   .greetings .store2 h3 {
      font-size: 1.5rem;
   }

   .new-products-boxes {
      max-width: 31%;
   }

   .departments .departments-box h3 {
      font-size: 1.75rem;
   }

   .departments .departments-box p {
      font-size: 1.1rem;
   }
}

/*-=======================================
============= END 1050px  ================
=======================================-*/

/*-======================================================-*/

/*-=======================================
================ 1000px  =================
=======================================-*/

@media(max-width:1000px){
   .btn {
      visibility: hidden;
   }

   footer .mobile-hide {
      display: none;
   }

   footer #footer-savings {
      margin-left: 10px;
   }
}

/*-=======================================
============= END 1000px  ================
=======================================-*/

/*-======================================================-*/

/*-=======================================
================ 991px  ==================
=======================================-*/

@media(max-width:991px){
   /* NAVIGATION */
   .secondary-nav {
      display: none;
   }

   header {
      padding: 20px;
   }

   header .noshow {
      display: initial;
   }

   header .logo img {
      max-width: 250px;
   }

   header label {
      display: initial;
   }

   header .navbar {
      position: absolute;
      top: 100%; left: 0; right: 0;
      background: #fff;
      border-top: 1px solid rgba(0,0,0,.1);
      display: none;
   }

   header .navbar ul li {
      width: 100%;
   }

   header .navbar ul li ul {
      position: relative;
      width: 100%;
   }

   header .navbar ul li ul li {
      background: #eee;
   }

   header .navbar ul li ul li ul {
      width: 100%;
      left: 0;
   }

   #menu-bar:checked ~ .navbar {
      display: initial;
   }
   /* END NAVIGATION */
}

/*-=======================================
============ END 991px  ==================
=======================================-*/

/*-======================================================-*/

/*-=======================================
================ 925px  ==================
=======================================-*/

@media(max-width: 925px) {
   .greetings .greetings-left, .greetings .store1, .greetings .store2 {
      width: 28%;
   }

   .greetings .store1 p.store-hours {
      font-size: 1.4rem;
   }

   .greetings .store2 p.phone {
      color: red;
      font-size: 1.8rem;
   }
}

/*-=======================================
============== END 925px  ================
=======================================-*/

/*-======================================================-*/

/*-=======================================
================ 915px  ==================
=======================================-*/

@media(max-width: 915px) {
   .featured-recipe .box {
      width: 45%;
   }

   .featured-recipe h1 {
      font-size: 2.1rem;
   }
}

/*-=======================================
============== END 915px  ================
=======================================-*/

/*-======================================================-*/

/*-=======================================
================ 900px  ==================
=======================================-*/

@media(max-width: 900px) {
   /* HOME PAGE SLIDESHOW */
   .swiper-button-next {
      margin-right: 20px;
   }

   .swiper-button-prev {
      margin-left: 20px;
   }

   .img_overlay h2 {
      font-size: 1.5rem;
   }

   .img_overlay p.slider-price {
      font-size: 2.5rem;
   }

   .img_overlay p.slider-tag {
      font-size: 1.5rem;
   }

   .img_overlay a {
      text-decoration: none;
      color: #fff;
      padding: 0.6rem 1rem;
      display: inline-block;
      margin-top: 2rem;
      border-radius: 4px;
      transition: all 0.3s ease-in-out;
   }
   /* END HOME PAGE SLIDESHOW */

   .home-boxes {
      width: 42%;
   }

   .home-boxes h3 {
      font-size: 1.5rem;
   }
}

/*-=======================================
=============== END 900px  ===============
=======================================-*/

/*-======================================================-*/



/*-=======================================
=============== 875px  ===================
=======================================-*/

@media(max-width: 875px) {
   .rewards .box {
      width: 47%;
   }
}

/*-=======================================
=============== END 875px  ===============
=======================================-*/

/*-======================================================-*/

/*-=======================================
=============== 855px  ===================
=======================================-*/

@media(max-width: 855px) {
   .greetings .greetings-left h2 {
      font-size: 1.85svh;
   }

   .greetings .store1 .phone, .greetings .store2 .phone {
      font-size: 3.25svh;
   }

   .flexcontainment img {
      display: block;
      margin-left: auto;
      margin-right: auto;
      width: 65%;
   }
}

/*-=======================================
=============== END 855px  ===============
=======================================-*/

/*-======================================================-*/

/*-=======================================
=============== 840px  ===================
=======================================-*/
   
@media(max-width: 840px) {
  .our-family #allcontent #intro-text p {
      font-size: 1.1rem;
   }
}

/*-=======================================
=============== END 840px  ===============
=======================================-*/

/*-======================================================-*/

/*-=======================================
=============== 768px  ===================
=======================================-*/

@media(max-width: 768px) {

   .swiper-button-next {
      margin-right: 10px;
   }

   .swiper-button-prev {
      margin-left: 10px;
   }

   .img_overlay h2 {
      font-size: 1.25rem;
   }

   .img_overlay p.slider-price {
      font-size: 2rem;
   }

   .img_overlay p.slider-tag {
      font-size: 1.25svh;
   }

   .new-products-boxes {
      max-width: 40%;
   }

   .departments .departments-box {
      width: 48%;
   }
}

/*-=======================================
=============== END 768px  ===============
=======================================-*/

/*-======================================================-*/

/*-=======================================
=============== 749px  ===================
=======================================-*/

@media(max-width: 749px) {
   .greetings .store1 .hidden, .greetings .store2 .hidden {
      display: none;
   }
}

/*-=======================================
=============== END 749px  ===============
=======================================-*/

/*-======================================================-*/

/*-=======================================
=============== 730px  ===================
=======================================-*/

@media(max-width: 730px) {
   .greetings .greetings-left h2 {
      display: none;
   }

   .our-family #allcontent .boxes {
      width: 85%;
      margin: 10px auto;
   }

   .our-family #allcontent .boxes p {
      font-size: 1.2rem;
   }

   .our-family #topbrand img {
      width: 60%;
   }

   .rewards .container img#fuel {
      float: none;
      display: none;
   }
}

/*-=======================================
=============== END 730px  ===============
=======================================-*/

/*-======================================================-*/

/*-=======================================
=============== END 700px  ===============
=======================================-*/

@media(max-width: 700px) {
   .rewards h1 {
      font-size: 2rem;
   }

   .rewards p {
      font-size: 1.4rem;
   }

   .rewards ol {
      font-size: 1.1rem;
   }
}

/*-=======================================
=============== END 700px  ===============
=======================================-*/

/*-======================================================-*/

/*-=======================================
=============== END 670px  ===============
=======================================-*/

@media(max-width: 670px) {
   p.slider-tag {
      display: none;
   }

   .img_overlay a {
      margin-top: 0;
   }

   .new-products .hero-wrapper {
      flex-direction: column;
      align-items: center;
   }

   .hero-wrapper #new-products-greeting {
      max-width: 80%;
   }

   .hero-wrapper #new-products-hero-image {
      max-width: 65%;
      margin-top: 15px;
   }

   .hero-wrapper #new-products-greeting h1 {
      font-size: 5svh;
   }

   .hero-wrapper #new-products-greeting h2 {
      font-size: 4svh;
   }

   .hero-wrapper #new-products-greeting p {
      font-size: 3svh;
   }

   .departments .departments-box h3 {
      font-size: 1.50rem;
   }

   .departments .departments-box p {
      font-size: 1.1rem;
   }
}

/*-=======================================
=============== END 670px  ===============
=======================================-*/

/*-======================================================-*/

/*-=======================================
=============== 650px  ===============
=======================================-*/

@media(max-width: 650px) {
   .greetings {
      flex-direction: column;
      align-items: center;
   }

   .greetings .greetings-left, .greetings .store1, .greetings .store2 {
      width: 94%;
   }
}

/*-=======================================
=============== END 650px  ===============
=======================================-*/

/*-======================================================-*/

/*-=======================================
=============== 625px  ===============
=======================================-*/

@media(max-width: 625px) {
   #news-banner p {
      font-size: 1.1rem;
   }
}

/*-=======================================
=============== END 625px  ===============
=======================================-*/

/*-======================================================-*/

/*-=======================================
================ 580px ===================
=======================================-*/

@media(max-width: 580px) {
   .new-products-boxes {
      max-width: 75%;
   }

   .services h1 {
      font-size: 2.25rem;
   }

   .services h2 {
      font-size: 1.7rem;
   }

   .services #flex-container ol {
      font-size: 1.4rem;
   }

   .services #flex-container .box {
      width: 47%;
   }
}

/*-=======================================
=============== END 580px  ===============
=======================================-*/

/*-======================================================-*/

/*-=======================================
================ 575px ===================
=======================================-*/

@media(max-width: 575px) {
   .rewards #flex-container {
      flex-direction: column-reverse;
      align-items: center;
   }

   .rewards .box.right {
      width: 50%;
   }

   .rewards .box.left {
      width: 97%;
   }

   .rewards ol {
      font-size: 1.3rem;
   }
}

/*-=======================================
=============== END 575px  ===============
=======================================-*/

/*-======================================================-*/

/*-=======================================
================= 560px ==================
=======================================-*/

@media(max-width: 560px) {
   .hero-wrapper #new-products-greeting h1 {
      font-size: 5.25svh;
   }

   .hero-wrapper #new-products-greeting h2 {
      font-size: 4.25svh;
   }

   .hero-wrapper #new-products-greeting p {
      font-size: 4.8svh;
   }

   .departments .departments-box {
      width: 96%;
   }

   .departments #content-boxes {
      justify-content: space-around;
   }
}

/*-=======================================
=============== END 560px  ===============
=======================================-*/

/*-======================================================-*/

/*-=======================================
================= 550px ==================
=======================================-*/

@media(max-width: 550px) {
   .featured-recipe #flex-container {
      flex-direction: column-reverse;
      align-items: center;
   }

   .featured-recipe #flex-container .box.right {
      width: 50%;
   }

   .featured-recipe #flex-container .box.left {
      width: 97%;
   }
}

/*-=======================================
=============== END 550px  ===============
=======================================-*/

/*-======================================================-*/

/*-=======================================
=============== END 526px  ===============
=======================================-*/

@media(max-width: 560px) {
   .home-boxes {
      width: 98%;
   }

/*-=======================================
=============== END 526px  ===============
=======================================-*/

/*-======================================================-*/

/*-=======================================
=============== END 450px  ===============
=======================================-*/

@media(max-width: 450px) {
   
}

/*-=======================================
=============== END 450px  ===============
=======================================-*/

/*-======================================================-*/

