/*-=======================================
================== SLIDES ================
=======================================-*/

.container {
   width: 100%;
   max-height: 600px; /* my change */
/*   height: 100vh;*/
   margin-top: 10px;
/*   border: 2px solid red;*/
}

.slides {
   width: 100%;
   height: 100%;
/*   border: 3px solid green;*/
}

.slides::before {
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
/*   background: rgba(0,0,0,0.6);*/
   z-index: 9;
/*   border: 1px solid red;*/
}

.slides img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.img_overlay {
   position: absolute;
/*   top: 50%;*/
   top: 50%; /* my change */
   left: 50%;
   transform: translate(-50%, -50%);
   width: 100%;
   text-align: center;
   z-index: 11;
   color: #fff;
   font-weight: 600;
   background: rgba(0,0,0,0.4);  /* my change */
/*   border: 1px solid blue;*/
   padding: 20px 0; /* my change */
}

.img_overlay h2 {
   text-shadow: 4px 4px #000;
}

.img_overlay p.slider-price {
/*   font-size: 4.5rem;*/
   font-size: 3rem; /* my change */
   color: yellow;
   text-shadow: 4px 4px #000;
   letter-spacing: 3px;
}

.img_overlay p.slider-tag {
   font-size: 1.75rem;
/*   letter-spacing: 5px;*/
   letter-spacing: 3px; /* my change */
   text-shadow: 4px 4px #000; /* my change */
}

.img_overlay a {
   text-decoration: none;
   color: #fff;
   backgroun-color: red;
   padding: 0.5rem 1rem;
   display: inline-block;
   margin-top: 1rem;
   border-radius: 4px;
   transition: all 0.3s ease-in-out;
}

.img_overlay a:hover {
   background: #09543a;
}

.btn {
   background: rgba(0,0,0,0.6);
   padding: 2rem;
   color: #fff;
   border-radius: 50%;
}

.btn::after {
   color: #fff;
}

.swiper-button-next {
   margin-right: 50px;
}

.swiper-button-prev {
   margin-left: 50px;
}

/*-=======================================
=============== END SLIDES  ==============
=======================================-*/

/* ======================================================= */

/*-=======================================
=============== NEWS BANNER  =============
=======================================-*/

#news-banner {
   background: #989898;
   color: #fff;
   text-shadow: 5px 5px 5px #454444;
   box-shadow: 0 5px 10px rgba(0,0,0,.1);
   max-width: 1500px;
   padding: 20px 2% 20px 1%;
   margin-top: 10px;
   line-height: 2rem;
   min-height: 185px;
}

#news-banner.display-none {
   display: none;
}

#news-banner p {
   font-size: 1.4rem;
   font-weight: bold;
}

#news-banner img {
   float: left;
   margin-right: 10px;
}

/*-=======================================
============ END NEWS BANNER  ============
=======================================-*/

/* ======================================================= */

/*-=======================================
============= HOME GREETINGS  ============
=======================================-*/

.greetings {
   overflow: hidden;
   margin-top: 10px;
   display: flex;
   justify-content: space-between;
}

.greetings h1 {
   font-size: 1.8rem;
   line-height: 1.75rem;
}

.greetings .greetings-left, .greetings .store1, .greetings .store2 {
   border: 1px solid #090743;
   border-radius: 5px;
   margin-top: 5px;
}

.greetings .greetings-left {
   text-align: center;
   width: 31%;
   padding: 10px;
}

.greetings .greetings-left h2 {
   font-size: 1.5rem;
   line-height: 1.55rem;
   margin-top: 15px;
}

.greetings .greetings-left .left-tagline {
   font-style: italic;
   font-size: 1.3rem;
   color: #09543a;
   font-weight: 600;
}

.greetings .store1 {
   width: 31%;
   padding: 10px;
   text-align: center;
}

.greetings .store2 {
   width: 31%;
   padding: 10px;
   text-align: center;
}

.greetings .store1 p {
   font-size: 1.75rem;
   font-weight: bold;
   margin-top: 10px;
}

.greetings .store1 .greetings-tagline {
   font-size: 1.25rem;
}

.greetings .store2 p {
   font-size: 1.3rem;
   font-weight: bold;
}

.greetings .store2 .phone {
   color: red;
   font-size: 1.9rem;
   font-weight: bold;
   text-align: center;
}

.greetings .store2 .address {
   font-size: 1.25rem;
}

.greetings .store2 h3 {
   font-size: 1.5rem;
}

/*-=======================================
=========== END HOME GREETING  ===========
=======================================-*/

/* ======================================================= */

/*-=======================================
=========== HOME CONTENT BOXES  ==========
=======================================-*/

.home-contentboxes {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   width: 100%;
   margin: 0 auto;
}

.home-boxes {
   width: 31%;
   min-height: 200px;
   border: 1px solid #ddd;
   padding: 20px;
   margin-top: 15px;
   border-radius: 5px;
   box-shadow: 4px 4px 5px gray;
   transition: all 0.3s ease-in-out;
   line-height: 1.3rem;
}

.home-boxes h3 {
   color: #fff;
   text-shadow: 5px 5px 5px #454444;
   padding: 15px 0 15px 0;
   border-radius: 5px;
   margin-bottom: 5px;
   text-align: center;
   font-size: 1.3rem;
}

.home-boxes p {
   font-size: 1.2rem;
   font-weight: 600;
}

.home-boxes .flexcontainment {
   display: flex;
   flex-direction: column;
   justify-content: start;
}

.home-boxes .flexcontainment img {
   margin-bottom: 10px;
}

.home-boxes:hover {
   box-shadow: none;
}

.home-button a {
   text-decoration: none;
   color: #fff;
   padding: 0.5rem 1rem;
   display: inline-block;
   margin-top: 1rem;
   margin-bottom: 1rem;
   border-radius: 4px;
   transition: all 0.3s ease-in-out;
}

.home-button a:hover {
   background: #09543a;
}

/*-=======================================
======== END HOME CONTENT BOXES  =========
=======================================-*/

/* ======================================================= */

/*-=======================================
=============== OUR FAMILY  ==============
=======================================-*/

.our-family #allcontent {
   width: 100%;
}

#topbrand {
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   padding-bottom: 20px;
   margin-bottom: 25px;
   text-align: center;
}

#topbrand img {
   min-width: 40%;
}

#topbrand p {
   color: #373535;
   font-size: 2rem;
   font-weight: bold;
}

.our-family #topbrand h2 {
   font-style: italic;
   font-weight: bold;
   color: #373535;
   width: 95%;
   margin-left: auto;
   margin-right: auto;
   font-size: 1.5rem;
}

.our-family #allcontent {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   flex-wrap: wrap;
}

.our-family #allcontent #igt h2 {
   font-size: 1.7rem;
   line-height: 1.5rem;
   margin-bottom: 5px;
}

.our-family #allcontent #puzzles h2 {
   font-size: 1.75rem;
   margin-bottom: 5px;
}

.our-family #allcontent .boxes h2 {
   font-weight: 700;
   max-width: 95%;
   color: red;
   font-size: 2rem;
   line-height: 1.6rem;
   margin-bottom: 5px;
}

.our-family #allcontent .boxes {
   border: 1px solid #03680a;
   padding: 10px;
   width: 28%;
   border-radius: 8px;
   margin-bottom: 30px;
   box-shadow: 5px 5px 15px #373535;
   text-align: center;
}

.our-family #allcontent .boxes p {
   font-size: 1.15rem;
   font-weight: 575;
   line-height: 1.3rem;
}

.our-family #allcontent .boxes img {
   border-radius: 8px;
   margin-top: 12px;
   width: 85%;
   border: 1px solid red;
}

.our-family #allcontent .boxes a:hover img {
   border: 2px solid red;
   box-shadow: 5px 5px 15px #373535;
}

.our-family #allcontent #intro-text {
   display: flex;
   flex-direction: column;
   align-content: flex-start;
}

.our-family #allcontent #intro-text p {
   font-size: 1.3rem;
   font-weight: 700;
   max-width: 95%;
   margin-top: 10px;
   text-align: left;
}

.our-family #allcontent #intro-text img {
   display: block;
   margin: 0 auto;
   max-width: 80%;
   border: none;
}

.our-family #allcontent #labels.boxes.last, .our-family #allcontent #hero.boxes.last {
   width: 43%;
   border: 1px solid #03680a;
}

.our-family #allcontent #labels img {
   width: 60%;
   margin-top: 15px;
   text-align: center;
}

/*-=======================================
============= END OUR FAMILY  ============
=======================================-*/

/* ======================================================= */

/*-=======================================
============== NEW PRODUCTS =============
=======================================-*/

.new-products .hero-wrapper {
   max-width: 1500px;
   margin-top: 30px;
   display: flex;
   flex-direction: row;
   justify-content: center;
   flex-wrap: wrap;
}

.new-products #new-products-greeting h1 {
   font-size: 2.5rem;
}

.new-products #new-products-greeting h2 {
   font-size: 2rem;
}

.new-products #new-products-greeting p {
   font-size: 1.5rem;
}

/*
.new-products .hero-wrapper div {
   border: 1px solid #ddd;
   max-width: 50%;
   min-height: 200px;
}
*/

.hero-wrapper #new-products-greeting {
   max-width: 45%;
   display: flex;
   flex-direction: column;
   justify-content: center;
}

#new-products-greeting a.button {
   font-size: 1.5rem;
   font-weight: bold;
   text-decoration: none;
   color: #fff;
   background: maroon;
   padding: 0.5rem 1rem;
   display: inline-block;
   margin-top: 1rem;
   border-radius: 4px;
   transition: all 0.3s ease-in-out;
   max-width: 225px;
   text-align: center;
}

#new-products-greeting a.button:hover {
   background: #09543a;
}

.hero-wrapper #new-products-hero-image {
   width: 25%;
}

.hero-wrapper #new-products-hero-image img {
   width: 85%;
}

/*
.hero-wrapper #new-products-hero-image {
   background-image: url("../updates/new-products/hero-image.jpg");
   background-attachment: scroll;
   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover;
}
*/

#new-products-content-boxes {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   flex-wrap: wrap;
   margin-top: 20px;
   border-top: 2px solid #444;
   padding-top: 30px;
}

.new-products-boxes {
   border: 1px solid #ddd;
   width: 22%;
   margin-bottom: 10px;
   padding-top: 5px;
   padding-bottom: 15;
}

.new-products-boxes img {
   width: 40%;
   display: block;
   margin: auto;
}

.new-products-boxes h3 {
   text-align: center;
   line-height: 2rem;
}

/*-=======================================
============ END NEW PRODUCTS ============
=======================================-*/

/* ======================================================= */

/*-=======================================
=============== DEPARTMENTS ==============
=======================================-*/

.departments .hero-wrapper {
   margin-top: 15px;
   text-align: center;
}

.departments #content-boxes {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   flex-wrap: wrap;
   margin-top: 5px;
}

.departments .departments-box {
   margin-top: 20px;
   border: 1px solid #555;
   border-radius: 12px;
}

.departments .departments-box div {
   padding: 15px;
}

.departments #content-boxes img {
   border-radius: 12px;
   width: 95%;
   margin: 15px auto;
   text-align: center;
   display: block;
}

.departments .departments-box {
   width: 31%;
}

.departments .departments-box h3 {
   margin-left: 15px;
   font-size: 1.8rem;
}

.departments .departments-box p {
   font-size: 1.2rem;
   font-weight: 600;
}

/*-=======================================
============= END DEPARTMENTS ============
=======================================-*/

/* ======================================================= */

/*-=======================================
================== CONTACT  ==============
=======================================-*/

.contact h1 {
   text-align: center;
   margin-top: 20px;
}

.contact #contact-intro {
   width: 80%;
   font-size: 1.5rem;
   font-weight: bold;
   margin-bottom: 40px;
   text-align: center;
   margin-top: 0;
   margin-right: auto;
   margin-left: auto;
}

.contact .contact-container {
   width: 100%;
   display: flex;
   justify-content: space-between;
   flex-direction: row;
   flex-wrap: wrap;
}

.contact .contact-boxes, .contact .map {
   width: 47%;
   border: 1px solid #ddd;
   margin-bottom: 15px;
}

.contact .contact-boxes {
   border-radius: 10px;
   background-color: #e3e3e6;
}

.contact .contact-boxes .phone {
   font-size: 2rem;
   color: maroon;
   font-weight: bold;
}

.contact .contact-boxes {
   padding: 20px;
}

.contact .contact-address {
   font-size: 1.75rem;
   font-weight: 600;
}

.contact .email {
   font-size: 1.7rem;
   font-weight: bold;
}

.contact #contact-hours {
   font-size: 1.5rem;
   font-weight: 600;
}

/*-=======================================
================ END CONTACT =============
=======================================-*/

/* ======================================================= */

/*-=======================================
============= FEATURED-RECIPE ============
=======================================-*/

.featured-recipe h1 {
   text-align: center;
   margin-top: 35px;
   font-size: 2.75rem;
   line-height: 1.8rem;
}

.featured-recipe #featured-recipe-landing {
   font-size: 2rem;
   border: 1.5px solid maroon;
   margin-top: 20px;
   max-width: 55%;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 20px;
   text-align: center;
   padding: 5px 0;
   font-weight: bold;
}

.featured-recipe #flex-container {
   with: 100%;
   border: none;
   display: flex;
   flex-direction: row;
   justify-content: center;
}

.featured-recipe .box {
   width: 30%;
   margin-top: 16px;
}

.featured-recipe p {
   font-size: 1.5rem;
   padding-left: 15px;
   padding-top: 5px;
   padding-right: 15px;
   font-weight: 600;
}

.featured-recipe p.home-button {
   margin-top: -15px; 
}

.featured-recipe ol {
   margin-left: 45px;
   margin-top: 10px;
   font-size: 1.5rem;
}

.featured-recipe #flex-container li {
   list-style: numbers;
   font-weight: 600;
}

.featured-recipe #flex-container .box img {
   width: 90%;
   border-radius: 25px;
}

/*-=======================================
=========== END FEATURED RECIPE ==========
=======================================-*/

/* ======================================================= */

/*-=======================================
================= SERVICES ===============
=======================================-*/

.services h1 {
   text-align: center;
   margin-top: 15px;
   max-width: 90%;
   line-height: 2.5rem;
   margin-left: auto;
   margin-right: auto;
}

.services p {
   font-size: 1.75rem;
   text-align: center;
   font-weight: 600;
   max-width: 80%;
   margin: 0 auto;
}

.services #flex-container {
   display: flex;
   flex-direction: row;
   justify-content: center;
}

.services #flex-container .box {
   width: 40%;
}

.services #flex-container ol {
   margin-left: 35px;
   font-size: 1.6rem;
}

.services #flex-container li {
   list-style: disc;
}

/*-=======================================
=============== END SERVICES =============
=======================================-*/

/* ======================================================= */

/*-=======================================
================== ABOUT =================
=======================================-*/

.about #hero {
   margin-top: 20px;
}

.about #hero h1, .about #hero h2 {
   text-align: center;
}

.about #hero h2 {
   font-size: 2rem;
}

.about #content h3 {
   font-size: 1.75rem;
   max-width: 90%;
   margin-left: auto;
   margin-right: auto;
   text-align: center;
   color: maroon;
   margin-bottom: 20px;
}

.about #content p {
   font-size: 1.25rem;
   font-weight: 525;
   max-width: 90%;
   margin-left: 20px;
}

/*-=======================================
================ END ABOUT ===============
=======================================-*/

/* ======================================================= */

/*-=======================================
============= ADDL SERVICES  =============
=======================================-*/

.add-svce .hero-wrapper h1 {
   margin-top: 25px;
   text-align: center;
   margin-bottom: 10px;
}

.add-svce .hero-wrapper h2 {
   font-size: 1.8rem;
   text-align: center;
   max-width: 80%;
   margin: 5px auto;
}

.add-svce .flexcontainment .home-button {
   margin-bottom: -25px;
}

.add-svce .flexcontainment .resize p {
   font-size: 1.45rem;
   line-height: 1.65rem;
}

.add-svce .flexcontainment .resize a {
   font-size: 1.5rem;
   font-weight: bold;
}

/*-=======================================
============ END ADDL SERVICES  ============
=======================================-*/

/* ======================================================= */