/***############### General Styling Reset and Setup: reset, grid, typography, general classes and divs.  Mobile-first styling setup. ***/
/***########## Reset the styles, add box-sizing: border-box. ***/
html, body, div, span, p, img, a, br, ul, li, ol, header, nav, footer, table, button, label, input, textarea, select, tr, td, th, h1, h2, h3, h4, h5, h6 {
    margin: 0px;
    border: 0px;
    padding: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: normal;
}

/*For ease of development and maintainability, combine an element's width, padding, margin, and border into a final value, and enable this on all elements. */
/*Also reduce the chance of font-resizing on mobile devices.*/
html { box-sizing: border-box; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
*, *:before, *:after { box-sizing: inherit; }

/***########## Grid Column layout available.  Desktop and mobile settings.  Automatically make columns full width below a certain width. Very-small (vsm) 
columns display at their designated widths at all device sizes, small (sma) above the first breakpoint, large (lar) above the next breakpoint. ***/
.content { width: 100%; padding: 20px 10px 20px 10px; }
.content-row { width: 100%; padding: 20px 0 20px 0; }
.content-row:after { content: ""; display: block; clear: both; }
.content-row.no-content-row-padding { padding: 0; }
.content-row:first-of-type { padding-top: 0; }
.content-row:last-of-type { padding-bottom: 0; }
 
.col-sma-1, .col-sma-2, .col-sma-3, .col-sma-4, .col-sma-5, .col-sma-6, .col-sma-7, .col-sma-8, .col-sma-9, .col-sma-10, .col-sma-11, .col-sma-12,
.col-lar-1, .col-lar-2, .col-lar-3, .col-lar-4, .col-lar-5, .col-lar-6, .col-lar-7, .col-lar-8, .col-lar-9, .col-lar-10, .col-lar-11, .col-lar-12 {
    float: none;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

.col-vsm-1, .col-vsm-2, .col-vsm-3, .col-vsm-4, .col-vsm-5, .col-vsm-6, .col-vsm-7, .col-vsm-8, .col-vsm-9, .col-vsm-10, .col-vsm-11, .col-vsm-12 {
    float: left;
    padding-left: 15px;
    padding-right: 15px;
}

.col-vsm-1 { width: 8.333333%; }
.col-vsm-2 { width: 16.666667%; }
.col-vsm-3 { width: 25%; }
.col-vsm-4 { width: 33.333333%; }
.col-vsm-5 { width: 41.666667%; }
.col-vsm-6 { width: 50%; }
.col-vsm-7 { width: 58.33333%; }
.col-vsm-8 { width: 66.666667%; }
.col-vsm-9 { width: 75%; }
.col-vsm-10 { width: 83.333333%; }
.col-vsm-11 { width: 91.666667%; }
.col-vsm-12 { width: 100%; }  

/* Switch to 12 columns at 700px for small columns and 1200px for large columns. */
@media only screen and (min-width: 700px){    
    .col-sma-1, .col-sma-2, .col-sma-3, .col-sma-4, .col-sma-5, .col-sma-6, .col-sma-7, .col-sma-8, .col-sma-9, .col-sma-10, .col-sma-11, .col-sma-12 {
        float: left;
        padding-left: 15px;
        padding-right: 15px;
    }
    .col-sma-1 { width: 8.333333%; }
    .col-sma-2 { width: 16.666667%; }
    .col-sma-3 { width: 25%; }
    .col-sma-4 { width: 33.333333%; }
    .col-sma-5 { width: 41.666667%; }
    .col-sma-6 { width: 50%; }
    .col-sma-7 { width: 58.33333%; }
    .col-sma-8 { width: 66.666667%; }
    .col-sma-9 { width: 75%; }
    .col-sma-10 { width: 83.333333%; }
    .col-sma-11 { width: 91.666667%; }
    .col-sma-12 { width: 100%; }    
}

@media only screen and (min-width: 1200px){
    .content { padding: 20px 0 20px 0; }
    .content-row { padding: 25px 0 25px 0; }
    .content-row:first-of-type { padding-top: 0; }
    .content-row:last-of-type { padding-bottom: 0; }
       
    .col-lar-1, .col-lar-2, .col-lar-3, .col-lar-4, .col-lar-5, .col-lar-6, .col-lar-7, .col-lar-8, .col-lar-9, .col-lar-10, .col-lar-11, .col-lar-12 {
        float: left;
        padding-left: 15px;
        padding-right: 15px;
    }
    .col-lar-1 { width: 8.333333%; }
    .col-lar-2 { width: 16.666667%; }
    .col-lar-3 { width: 25%; }
    .col-lar-4 { width: 33.333333%; }
    .col-lar-5 { width: 41.666667%; }
    .col-lar-6 { width: 50%; }
    .col-lar-7 { width: 58.33333%; }
    .col-lar-8 { width: 66.666667%; }
    .col-lar-9 { width: 75%; }
    .col-lar-10 { width: 83.333333%; }
    .col-lar-11 { width: 91.666667%; }
    .col-lar-12 { width: 100%; }
}

/***########## General Styling and Typography settings. ***/
body { background-color: #f3f3f3; }
h1 { font-size: 24px; }
h2 { font-size: 20px; }
h3 { font-size: 18px; }
h4 { font-size: 18px; }
ul { list-style-type: none; }
p { padding-bottom: 16px; line-height: 22.4px; }
a { text-decoration: none; }
img { max-width: 100%; font-size: 0px; } /*Don't allow images to go offscreen horizontally */
a:link, a:visited { color: #000000; }
a:hover { color: #0000cc; }
input, textarea, select { outline: 0; transition: 0.2s; }
input:focus, textarea:focus, select:focus { box-shadow: 0px 0px 3px 3px rgba(0, 102, 204, 0.6); transition: 0.2s; }

.body-wrapper { position: relative; width: 100%; min-width: 300px; padding: 0; border: 0; margin-left: auto; margin-right: auto;
                background-color: #ffffff; }

@media only screen and (min-width: 500px){
}

@media only screen and (min-width: 700px){
    h1 { font-size: 32px; }
    h2 { font-size: 26px; }
    h3 { font-size: 20px; }
    h4 { font-size: 18px; }  
}

@media only screen and (min-width: 1200px){      
    h1 { font-size: 36px; }   
    h2 { font-size: 26px; }  
    h3 { font-size: 24px; }  
    h4 { font-size: 18px; }
}

@media only screen and (min-width: 1600px){
}

/***########## General layout settings and general classes. ***/
.justify-content > div { display: flex; flex-wrap: wrap; justify-content: center; }

/* General Resuable Classes */
.sr-only { display: block; width: 0; height: 0; opacity: 0; }
.width-100-percent { width: 100%; }
.clear-both { clear: both; }

/* Use .inner-wrapper for layouts where you want to have backgrounds go out of the site 'border' provided by .body-wrapper '*/
.inner-wrapper { position: relative; padding: 0; margin-left: auto; margin-right: auto; }

@media only screen and (min-width: 700px){
    .float-right-above-a-breakpoint { float: right; }
}

/* Form Validation classes */
.javascript-validation-results-contact-us { display: none; font-weight: bold; }
.javascript-validation-results-contact-us.show { display: block; }
.required-field-needed { box-shadow: 0px 0px 3px 3px rgba(204, 0, 0, 1); }
/***########## End of General Styling Reset and Setup ****/




/***############### Beginning of Website-specific style sheet. ****/

/*
Monochromatic color scheme.
1:     #ac8949   mid light-brown    (172, 137, 73)
2:     #64460e   mid dark brown     (100, 74, 14)
3:     #fbe3b7   light brown        (251, 227, 183)

4:     #785410   mid brown          (141, 99, 19)
4:     #d0b177   mid-light brown    (208, 177, 119)
5:     #fff2d9   very light brown   (255, 242, 217)
*/

html, body, div, span, p, img, a, br, ul, li, ol, header, nav, footer, table, button, label, input, textarea, tr, td, th, h1, h2, h3, h4, h5, h6 {
   font-family: 'Lato', sans-serif; 
}

@media only screen and (max-width: 700px){
    .col-vsm-1, .col-vsm-2, .col-vsm-3, .col-vsm-4, .col-vsm-5, .col-vsm-6, .col-vsm-7, .col-vsm-8, .col-vsm-9, .col-vsm-10, .col-vsm-11, .col-vsm-12 {
        padding-left: 10px;
        padding-right: 10px;
    }
}

h1, h2, h3, h4 { font-weight: bold; }
input, select, textarea { width: 100%; padding: 10px; border: 1px solid #000000; border-radius: 15px; }
select { background-color: rgba(100, 74, 14, 0.12); }
address { font-style: normal; }
a:link, a:visited { color: #64460e; }
a:hover { color: #ac8949; }
a:focus-visible { outline: 2px solid #64460e; outline-offset: 2px; }
button:focus-visible { outline-offset: 2px; }
h1 { font-size: 30px; }
h2 { font-size: 24px; }
h3 { padding: 0 0 15px 0; color: #64460e; text-align: center; }
h4 { padding: 0 0 12px 0; color: #64460e; }
input:focus,
textarea:focus, 
button:focus, 
button:focus-visible, 
select:focus { outline: 0; box-shadow: 0px 0px 3px 3px rgba(172, 137, 73, 0.6); transition: 0.2s; }
input::placeholder, textarea::placeholder, select::placeholder { color: #64460e; opacity: 0.8; }


/* Header styles */
header { min-height: 100px; background: linear-gradient(#fbe3b7, #f3f3f3); }
.main-title { position: absolute; top: 10px; left: 15%; width: 70%; text-align: center; font-size: 22px; }
.main-title .main-title__title { font-size: inherit; font-weight: inherit; color: #ac8949; font-family: 'Pacifico', cursive; }
.header__subtitle { position: relative; top: 15px; text-align: center; color: #64460e; font-family: 'Noto Serif', serif; font-size: 18px; }
.logo { position: relative; width: 40px; height: 40px; top: 10px; left: 10px; }
.logo__link { display: block; }


/* Nav styles */
#mobileNav { display: block; transition: 0.4s ease-in; }
#desktopNav { display: none; }
.nav { background-color: #64460e; }
.nav__list { }
.nav__nav-item { display: block; text-align: center; }
.nav .nav__nav-link { color: #f9f9f9; transition: 0.1s ease-in; }
.nav .nav__nav-link:hover { color: #fbe3b7; transition: 0.1s ease-in; }
.nav .nav__nav-link:focus-visible { outline: 2px solid #ffffff; }

#dropdownButton { position: absolute; top: 15px; right: 10px; width: 30px; height: 30px; background-color: transparent; cursor: pointer; transition: none; }
#dropdownButton:focus { box-shadow: none; }
#dropdownButton:focus-visible { outline: 2px solid #64460e; outline-offset: 3px; transition: none; }
.dropdown-part-1 { border-bottom: 6px solid #ac8949; margin-bottom: 6px; transition: 0.4s ease-in; }
.dropdown-part-2 { border-bottom: 6px solid #ac8949; margin-bottom: 6px; transition: 0.4s ease-in; }
.dropdown-part-3 { border-bottom: 6px solid #ac8949; transition: 0.4s ease-in; }
#mobileNav.show .dropdown-part-1 { transform: translateY(13px) rotate(45deg); transition: 0.4s ease-in; } 
#mobileNav.show .dropdown-part-2 { transform: translateY(1px) rotate(-45deg); transition: 0.4s ease-in; } 
#mobileNav.show .dropdown-part-3 { opacity: 0; transition: 0.4s ease-in; } 

#dropdownContent { padding: 0; background: none; transition: 0.8s all ease-in; }    
#dropdownContent li { display: block; height: 0; padding-bottom: 0px; opacity: 0; transition: 0.8s all ease-in; }
#dropdownContent .nav__nav-link { background-color: #64460e; }
#mobileNav.show { padding: 15px; background-color: #64460e; transition: 0.8s all ease-in; }
#mobileNav.show li { height: 21px; margin-bottom: 20px; opacity: 1; transition: 0.8s all ease-in; }
#mobileNav.show li:last-of-type { margin-bottom: 0; } 


/*Message styles*/
.message { text-align: center; background-color: #ac8949; transition: 0.4s ease-in; }
.message__additional-wrapper { padding: 22px 10px; }
.message__text { font-size: 24px; font-weight: bold; color: #f9f9f9; padding-bottom: 0; cursor: default; }


/*Footer Styles*/
footer { background-color: #fbe3b7; }
.footer__additional-wrapper { padding: 50px 10px; }
.footer__subheader { padding-bottom: 15px; color: #64460e; }

.footer__social, .footer__location, .footer__hours { padding-top: 20px; padding-bottom: 20px; } 

/*Footer Subscribe button*/
.footer__subscribe { padding-bottom: 40px; }
.footer__subscribe-button { display: block; position: relative; width: 280px; height: 84px; margin-left: auto; margin-right: auto; border-radius: 15px; text-align: center; cursor: pointer; transition: 0.4s ease-in; }
.footer__subscribe-button:focus-visible { outline: 2px solid #ffffff; }
.footer__subscribe-button__extra-bg-layer { position: absolute; top: 0; left: 0; width: 280px; height: 84px; border-radius: 15px; 
                                           background: radial-gradient(rgba(172, 137, 73, 1), rgba(100, 74, 14, 1)); transition: 0.4s ease-in; }
.footer__subscribe-button__bg { position: absolute; top: 0; left: 0; width: 280px; padding: 15px 12px; margin-left: auto; margin-right: auto; border-radius: 15px; 
                               background: rgba(100, 74, 14, 1); transition: 0.4s ease-in;  z-index: 9; }
.footer__subscribe-button__bg:hover {  background: rgba(100, 74, 14, 0); transition: 0.4s ease-in; }
.footer__subscribe-button__text { font-size: 22px; color: #fbe3b7; z-index: 10; }


.footer__copyright { padding-bottom: 40px; text-align: center; }
.footer__social { text-align: center; }
.footer__social-logo { display: inline-block; padding: 0 15px; }
.footer__social .footer__social-logo__link { /*color: #64460e; */ transition: 0.4s ease-in; }
.footer__social .footer__social-logo__link:hover { /* color: #ac8949; */ transition: 0.4s ease-in; }
.footer__social .social-icon { display: block; }
.footer__location { text-align: center; }
.footer__hours { text-align: center; }
.footer__hours__day { padding-bottom: 15px; }
.footer__hours__day:last-of-type { padding-bottom: 0; }


/*Modal styles*/
.subscribe-modal {}
.subscribe-modal .input-container__contact-button { }
.subscribe-modal .input-container__contact-button:hover { }

.modal__mask { display: none; }
.modal__mask.show { display: table; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; background-color: rgba(0,0,0,0.5); }
.modal__wrapper { display: table-cell; vertical-align: middle; }
.modal__container { position: fixed; top: 5%; left: 5%; width: 90%; max-height: 90%; padding: 10px; margin: 0 auto; border-radius: 20px; overflow: auto; background-color: #ffffff; box-shadow: 0 2px 8px rgba(0,0,0, 0.6); }
.modal__close-button { position: absolute; top: 10px; right: 10px; padding: 10px; border-radius: 10px; background-color: #64460e; color: #fbe3b7; cursor: pointer; transition: 0.4s ease-in; }
.modal__close-button:hover { background-color: #8b6928; transition: 0.4s ease-in; }
.modal__header { margin-right: 50px; padding-bottom: 10px; }
.modal__mask .input-container { padding: 5px 5px 10px 5px; }
.modal__mask .input-container__label { padding-bottom: 5px; }
.modal__body { }
.subscribe__response-message { font-size: 16px; font-weight: bold; }
.subscribe__response-message p { padding-bottom: 12px; font-size: inherit; font-weight: bold; }


/*General site-specific classes*/
.item-container__background { height: 240px; }
.no-padding-bottom { padding-bottom: 0; } /* Put on the last of a group of paragraphs where no padding bottom is desired. */
.current-page { text-decoration: underline; }
.bulleted-list { padding-left: 25px; list-style-type: disc; }


/*Customized plugin styles*/
/*General Testimonials*/
.testimonial { }
.testimonial:last-of-type { padding-bottom: 0; }
.testimonial__provided-name { color: #64460e; }
.testimonial__comma  { color: #64460e; }
.testimonial__link { color: #64460e; }
.testimonial__label { color: #64460e; }


/*Index page*/
.item-container__background.zero { margin-bottom: 30px; background: url('../images/bakery-shelf-cakes.jpg') 0% 0%/cover no-repeat; }

.index-content__h3 { text-align: center; }

.index-content__baked-items-list { margin-left: 30px; list-style-type: disc; }
.index-content__baked-items-list__list-item { padding-bottom: 10px; }

.index-blog-posts { padding-top: 20px; }

.index-blog-post { padding-bottom: 40px; }
.index-blog-post:last-of-type { }

.index-blog__title { width: auto; padding-bottom: 10px; }
.index-blog__title-link { display: inline-block; font-size: inherit; font-weight: inherit; }
.index-blog__categories { padding-bottom: 10px; font-size: 18px; color: #64460e; }
.index-blog__author-and-name { padding-bottom: 10px; }
.index-blog__image { float: right; height: auto; padding-left: 15px; padding-bottom: 5px; }
.index-blog__image a { display: block; width: 150px; overflow: hidden; margin-left: auto; margin-right: auto; }
.index-blog__image img { display: block; width: auto; height: auto; transition: 0.6s ease-in; } 
.index-blog__image a:hover img { transform: scale(1.12); transition: 0.6s ease-in; }
.index-blog__content { display: block; }

.index-blog__author { display: inline; font-weight: bold; color: #64460e; }
.index-blog__date { display: inline; font-style: italic; color: #64460e; }
.index-blog__author__extra-text { font-weight: normal; color: #64460e; }

.index-product-container { position: relative; margin-bottom: 30px; }
.index-product-container__background-wrapper { overflow: hidden; border-radius: 8px; }
.index-product-container__background { height: 180px; border-radius: 8px; cursor: pointer; }
.index-product-container__link { display: block; height: 180px; border-radius: 8px; }
.index-product-container__background-layer { position: absolute; top: 0; left: 0; width: 100%; height: 180px; border-radius: 8px; opacity: 0;
                                             cursor: pointer; transition: 0.4s ease-in; }
.index-product-container__background-layer:hover { opacity: 1; background-color: rgba(172, 137, 73, 0.4); transition: 0.4s ease-in; }

.index-product-container.zero .index-product-container__background { background: url('../images/products/whole-wheat-bread-small.jpg') 0% 0%/cover no-repeat; }
.index-product-container.one .index-product-container__background  { background: url('../images/products/cherry-pie-small.jpg') 0% 0%/cover no-repeat; }
.index-product-container.two .index-product-container__background { background: url('../images/products/scone-small.jpg') 0% 0%/cover no-repeat; }
.index-product-container.three .index-product-container__background  { background: url('../images/products/chocolate-cake-small.jpg') 0% 0%/cover no-repeat; }


/*About Us*/
.about-us-container__background { height: 240px; background: url('../images/bakery-shelf.jpg') 0% 0%/cover no-repeat; }


/*Location */
.location-container__background { height: 240px; padding-top: 20px; background: url('../images/location.png') 0% 0%/cover no-repeat; }
.location-container__header { }


/*Products*/
.shopping-cart { }
.shopping-cart__image {display: none;  }
.shopping-cart__image.show { display: block; position: absolute; top: 125px; right: 20px; width: 64px; height: 55px; background: url('../images/shopping-cart.png') 0% 0%/cover no-repeat; }
.shopping-cart__link { display: block; width: auto; height: 100%; }
.shopping-cart__number-of-items { padding-top: 10px; text-align: center; font-size: 19px; font-weight: bold; color: #64460e; }

.products-header { padding-bottom: 50px; }
.product-search { padding-bottom: 40px; font-size: 0; }
.product-search__inputs { display: block; font-size: 0; }
.product-search__title { text-align: center; padding-bottom: 5px; }
.product-search-container.input-container { display: block; padding: 10px 10px 10px 10px; }
.product-search .input-container__label { display: block; padding-left: 5px; }
.product-search__select { width: 100%; color: #64460e; }
.product-search__text { }
.product-search .input-container__contact-button { width: 70px; }

.product-quantities { display: none; }
.product-quantities-hidden { display: none; }

.product-container { margin-bottom: 50px; box-shadow: 0 2px 8px rgba(0,0,0, 0.6); border-radius: 20px; }
.product__title { padding: 8px; font-size: 19px; border-radius: 20px 20px 0 0; font-weight: bold; text-align: center; background: linear-gradient(#64460e 20%, #ac8949 100%); color: #ffffff; }
.product__price-and-request { position: relative; padding: 5px 5px; background-color: #eeeeee; }
.product__description { padding: 10px 12px; background-color: #fbe3b7; border-radius: 0 0 20px 20px; }
.product__background-container { overflow: hidden; }
.product__background { height: 100px; transition: transform 0.6s ease-in; cursor: auto; }
.product__background:hover { transform: scale(1.12); transition: transform 0.6s ease-in; }
.product__description p:last-of-type { padding-bottom: 0; }

.product__price { padding-bottom: 10px; text-align: center; color: #785410; }
.product__adjust-quantity { width: 120px; font-size: 0; margin-left: auto; margin-right: auto; }
.product__minus-quantity { display: inline-block; width: 30px; height: 30px; border: 2px solid #64460e; border-radius: 8px; font-size: 20px; font-weight: bold; text-align: center; background-color: #d0b177; color: #64460e; cursor: pointer; user-select: none; }
.product__quantity-input { display: inline-block; margin-left: 5px; margin-right: 5px; }
.product__set-quantity { display: block; width: 50px; padding: 6px 8px; margin-left: auto; margin-right: auto; border: 1px solid #64460e; color: #64460e; }
.product-container .product__set-quantity { -moz-appearance: textfield; }
.product-container input::-webkit-outer-spin-button,.product-container input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.product__increase-quantity { display: inline-block; width: 30px; height: 30px; border: 2px solid #64460e; border-radius: 8px; font-size: 20px; font-weight: bold; text-align: center; background-color: #d0b177; color: #64460e; cursor: pointer; user-select: none; }
.product__request-item { padding: 10px 0; }
.product__request-item__add { width: 107px; padding: 10px; border: 2px solid #64460e; margin-left: auto; margin-right: auto; border-radius: 5px; text-align: center; font-weight: bold; background-color: #008800; color: #f9f9f9; cursor: pointer; transition: 0.4s ease-in; }
.product__quantity-container { display: none; position: absolute; top: 5px; right: 5px; text-align: center; }
.product__quantity-container.show { display: block; }
.product__quantity { font-weight: bold; }

.product__minus-quantity.change-color { animation: changeBackgroundColor 0.6s 1; }
.product__increase-quantity.change-color { animation: changeBackgroundColor 0.6s 1; }
@keyframes changeBackgroundColor {
    0% { background-color: #d0b177; }
    40% { background-color: #ac8949; }
    100% { background-color: #d0b177; }
}
.product__request-item__add:hover { background-color: #22aa22; color: #ffffff; border: 2px solid #64460e; transition: 0.4s ease-in; }

.product-container.hide { display: none; }

.product-container.zero .product__background { background: url('../images/products/whole-wheat-bread.jpg') 0% 0%/cover no-repeat; }
.product-container.one .product__background { background: url('../images/products/white-bread.jpg') 0% 0%/cover no-repeat; }
.product-container.two .product__background { background: url('../images/products/scone.jpg') 0% 0%/cover no-repeat; }
.product-container.three .product__background { background: url('../images/products/chocolate-cake.jpg') 0% 0%/cover no-repeat; }
.product-container.four .product__background { background: url('../images/products/cherry-pie.jpg') 0% 0%/cover no-repeat; }
.product-container.five .product__background { background: url('../images/products/blueberry-pie.jpg') 0% 0%/cover no-repeat; }
.product-container.six .product__background { background: url('../images/products/blueberry-muffin.jpg') 0% 0%/cover no-repeat; }
.product-container.seven .product__background { background: url('../images/products/chocolate-cupcakes.jpg') 0% 0%/cover no-repeat; }
.product-container.eight .product__background { background: url('../images/products/rye-bread.jpg') 0% 0%/cover no-repeat; }

.estimate-section { padding-top: 20px; }

.estimate-table { width: 100%; }
.estimate-table th { display: none; width: 100%; padding: 10px 5px; text-align: center; font-size: 19px; font-weight: bold; }
.estimate-table tbody tr { float: left; width: 100%; padding-bottom: 30px; }
.estimate-table td { display: block; padding: 5px 7px 5px 5px; }
.estimate-table .hide { display: none; }

.estimate-table .estimate-table__item-title { width: 100%; font-weight: bold; }
.estimate-table .estimate-table__item-image { float: left; }
.estimate-table .estimate-table__item-cost { float: left; }
.estimate-table .estimate-table__item-quantity { float: left; } 
.estimate-table .estimate-table__item-subtotal { float: none; min-width: 70px; padding-right: 5px; }
.estimate-table .estimate-table__minus { float: left; }
.estimate-table .estimate-table__add { float: left; }

.estimate-table .estimate-table__minus__item { width: 32px; height: 32px; padding: 4px; margin-left: auto; margin-right: auto; border-radius: 10px; 
                              background-color: #cc0000; color: #ffffff; font-size: 20px; font-weight: bold; text-align: center; cursor: pointer; user-select: none; }
.estimate-table .estimate-table__add__item { width: 32px; height: 32px; padding: 4px; margin-left: auto; margin-right: auto; border-radius: 10px; 
                            background-color: #008800; color: #ffffff; font-size: 20px; font-weight: bold; text-align: center; cursor: pointer; user-select: none; }

.estimate-table__cart-summary { margin-top: 0px; }
.cart-total { padding-bottom: 15px; font-size: 18px; font-weight: bold; text-align: center; }
.reset-cart { width: 112px; padding: 10px; margin-left: auto; margin-right: auto; border-radius: 15px; background-color: #64460e; color: #ffffff; font-size: 18px; font-weight: bold; cursor: pointer; transition: 0.4s ease-in; }
.reset-cart:focus,
.reset-cart:focus-visible { outline: 0; box-shadow: 0px 0px 3px 3px rgba(172, 137, 73, 0.6); transition: 0.4s ease-in; }

.estimate-container { padding-top: 30px; }

.estimate-table__item-image__photo { width: 100px; height: 70px; margin-left: auto; margin-right: auto; }
.estimate-table__item.zero .estimate-table__item-image__photo { background: url('../images/products/whole-wheat-bread.jpg') 0% 0%/cover no-repeat; }
.estimate-table__item.one .estimate-table__item-image__photo { background: url('../images/products/white-bread.jpg') 0% 0%/cover no-repeat; }
.estimate-table__item.two .estimate-table__item-image__photo { background: url('../images/products/scone.jpg') 0% 0%/cover no-repeat; }
.estimate-table__item.three .estimate-table__item-image__photo { background: url('../images/products/chocolate-cake.jpg') 0% 0%/cover no-repeat; }
.estimate-table__item.four .estimate-table__item-image__photo { background: url('../images/products/cherry-pie.jpg') 0% 0%/cover no-repeat; }
.estimate-table__item.five .estimate-table__item-image__photo { background: url('../images/products/blueberry-pie.jpg') 0% 0%/cover no-repeat; }
.estimate-table__item.six .estimate-table__item-image__photo { background: url('../images/products/blueberry-muffin.jpg') 0% 0%/cover no-repeat; }
.estimate-table__item.seven .estimate-table__item-image__photo { background: url('../images/products/chocolate-cupcakes.jpg') 0% 0%/cover no-repeat; }
.estimate-table__item.eight .estimate-table__item-image__photo { background: url('../images/products/rye-bread.jpg') 0% 0%/cover no-repeat; }


/*Recipes*/
.recipies-header { padding-bottom: 20px; }
.recipe-container { margin-bottom: 40px; border-radius: 15px; box-shadow: 0 2px 8px rgba(0,0,0, 0.6);}
.recipe__title, .recipe__image, .recipe__description {  padding: 15px; }
.recipe__title { border-radius: 15px 15px 0 0; background: radial-gradient(#64460e, #64460e, #ac8949); color: #fbe3b7; font-size: 20px; font-weight: bold; text-align: center; }
.recipe__description { border-radius: 0 0 15px 15px; background-color: #eeeeee; }
.recipe__section { padding-bottom: 15px; }
.recipe__background-container { position: relative; }
.recipe__subheading { padding-top: 15px; }

.recipe-container.four { margin-bottom: 0; }

.recipe__background { width: 100%; height: 200px; }
.recipe-container.one .recipe__background { background: url('../images/recipes/chocolate-cupcakes.jpg') 0% 0%/cover no-repeat; }
.recipe-container.two .recipe__background { background: url('../images/recipes/chocolate-brownies.jpg') 0% 0%/cover no-repeat; }
.recipe-container.three .recipe__background { background: url('../images/recipes/cinnamon-roll.jpeg') 0% 0%/cover no-repeat; }
.recipe-container.four .recipe__background { background: url('../images/recipes/angel-food-cake.jpg') 0% 0%/cover no-repeat; }

.recipe__background-text { opacity: 0; position: absolute; top: 40px; padding: 20px; width: 100%; font-size: 28px; font-weight: bold; color: #64460e; }
.recipe__background, .recipe__background-text { transition: 1s; }

/* (Recipe more info) */
.recipeShowMoreInfo-enter-active, .recipeShowMoreInfo-leave-active { transition: opacity 0.8s ease-in; }
.recipeShowMoreInfo-enter, .recipeShowMoreInfo-leave-to { opacity: 0; }
.recipe-more-info__button { width: 104px; padding: 15px 12px; margin-top: 10px; margin-bottom: 10px; font-size: 18px; font-weight: bold; border-radius: 15px; 
                            color: #ffffff; background-color: #64460e; cursor: pointer; }


/*News amd Events*/
.news-events-items { padding-top: 20px; }
.events-container__background { height: 350px; background: url('../images/swede-cake.jpg') 0% 0%/cover no-repeat; }

.event-container { padding: 15px; margin-bottom: 40px; border-radius: 15px; box-shadow: 0 2px 8px rgba(0,0,0, 0.6); }
.event-container__title { padding-bottom: 15px; font-size: 20px; font-weight: bold; text-align: center; color: #64460e; }
.event-container__image { float: right; width: 120px; height: 100px; margin-left: 8px; margin-bottom: 8px; }
.event-container__date { padding-bottom: 8px; font-weight: bold; text-align: center; color: #64460e; }

.event-container.zero .event-container__image { background: url('../images/bakery-shelf-cakes.jpg') 0% 0%/cover no-repeat; }
.event-container.one .event-container__image { background: url('../images/recipes/chocolate-cupcakes.jpg') 0% 0%/cover no-repeat; }
.event-container.two .event-container__image { background: url('../images/products/cherry-pie.jpg') 0% 0%/cover no-repeat; }
.event-container.three .event-container__image { background: url('../images/bakery-buffet.jpg') 0% 0%/cover no-repeat; }


/*Careers*/
.careers-container { padding-top: 30px; }
.careers-container__position { padding: 15px; margin-bottom: 40px; border-radius: 15px; box-shadow: 0 2px 8px rgba(0,0,0, 0.6); }
.careers-container__posititon__title { padding-bottom: 15px; font-size: 20px; font-weight: bold; color: #64460e; text-align: center; }
.careers-container__position__image { float: right; width: 120px; height: 100px; margin-left: 8px; margin-bottom: 8px; }
.careers-container__background { height: 300px; background: url('../images/bakery-shelf.jpg') 0% 0%/cover no-repeat; }

.careers-container__position.zero .careers-container__position__image { background: url('../images/bakery-shelf-cakes.jpg') 0% 0%/cover no-repeat; }
.careers-container__position.one .careers-container__position__image { background: url('../images/dough-roller-close-up.jpg') 0% 0%/cover no-repeat; }


/*Blog*/
.blog-posts-container { padding-bottom: 20px; }
.blog-controls__control .input-container:nth-of-type(1) { padding-left: 0; }
.blog-controls { padding-bottom: 20px; }
.blog-controls__control { display: inline-block; border-radius: 5px; font-weight: bold; }
.blog-controls__button { padding: 15px 12px; border-radius: 15px; font-weight: bold; background-color: #64460e; color: #ffffff; cursor: pointer; }

.blog-posts__message { color: #64460e; font-size: 20px; font-weight: bold; }
.blog-posts { padding-top: 20px; }

.blog-post { padding-bottom: 60px; }
.blog-post:last-of-type { padding-bottom: 0px; }

.blog__title { font-size: 22px; text-align: center; }
.blog__categories { padding-bottom: 10px; font-size: 18px; color: #64460e; }
.blog__author { width: 100%; padding-bottom: 10px; font-weight: bold; color: #64460e; }
.blog__date { width: 100%; padding-bottom: 10px; font-weight: bold; font-style: italic; color: #64460e; }
.blog__image { float: none; width: auto; height: auto; padding-bottom: 10px;}
.blog__image a { display: block; overflow: hidden; }
.blog__image img { display: block; width: 100%; height: auto; max-width: 460px; margin-left: auto; margin-right: auto; } 
.blog__image a:hover img { }
.blog__content { display: block; }


/*Contact*/
.input-container { padding: 10px 10px 20px 10px; }
.input-container__label { display: inline-block; padding-bottom: 10px; color: #64460e; }
.input-container__input { }
.input-container__contact-button { padding: 15px 12px; color: #fbe3b7; background-color: #64460e; border: 1px solid #64460e; 
                                  border-radius: 15px; text-align: center; cursor: pointer; transition: 0.4s ease-in; }
.input-container__contact-button:hover { background-color: #8b6928; transition: 0.4s ease-in; }
.input-container__contact-button:focus,
.input-container__contact-button:focus-visible { outline: 0; box-shadow: 0px 0px 3px 3px rgba(172, 137, 73, 0.6); transition: 0.4s ease-in; }

.contact-us-container__background { height: 240px; background: url('../images/dough-and-roller.jpg') 0% 0%/cover no-repeat; }

.contact-container { padding-top: 30px; }
.contact-container__title { color: #64460e; }
.contact-container__response { padding-top: 15px; padding-bottom: 15px; }
.contact-container__response-message { font-size: 16px; font-weight: bold; }
.contact-container__response-message p { padding-bottom: 12px; font-size: inherit; font-weight: bold; }


/* Clearing variable width columns */
@media only screen and (max-width: 699px) {
    .products .product-outer:nth-child(2n+1){ content: ""; display: block; clear: both; }
}

@media only screen and (min-width: 700px) and (max-width: 1199px){   
    .recipes > div:nth-child(2n+1){ content: ""; display: block; clear: both; }
}
@media only screen and (min-width: 700px) and (max-width: 1199px){
    .products .product-outer:nth-child(3n+1){ content: ""; display: block; clear: both; }
}

@media only screen and (min-width: 1200px){   
    
     .products .product-outer:nth-child(4n+1){ content: ""; display: block; clear: both; }
     
     .recipes > div:nth-child(3n+1){ content: ""; display: block; clear: both; }   
}



@media only screen and (min-width: 500px){   
    .product__background { height: 150px; }

    .recipe__background { height: 360px; } 
}



@media only screen and (min-width: 700px){ 

    /* Header styles */
    header { min-height: 200px; }
    .main-title { position: static; width: auto; padding-top: 20px; font-size: 30px; }
    .header__subtitle { padding-top: 0; font-size: 24px; }
    
    /*Footer Styles*/
    .footer__social, .footer__location, .footer__hours { padding-top: 0px; padding-bottom: 0px; } 
    
    /*Modal styles*/
    .modal__container { width: 500px; left: 5%; right: 5%; padding: 30px; }
    .modal__header { margin-right: 0; }
    .modal__close-button { top: 15px; right: 15px; }
    
    
    /*Index*/
    .item-container__background { height: 300px; }
    
    .item-container__background.zero { margin-bottom: 0; }
    
    .index-blog-posts { padding-bottom: 0px; }
    
    .index-blog-post { padding-bottom: 0px; }
    .index-blog__image { float: none; padding-left: 0; }
    .index-blog__image img { float: none; margin-left: auto; margin-right: auto; } 
    
    .index-product-container { margin-bottom: 0; }
    
    /*About*/
    .about-us-container__background { height: 320px; }
    
    
    /*Products*/   
    .shopping-cart__image.show { right: 30px; }
    .product-search { padding-bottom: 20px; }
    .product-search-container.input-container { display: inline-block; }
    .product-search__inputs { display: inline-block; }
    .product-search__select { width: auto; }
    .product__background { height: 170px; }
    
    .estimate-container { padding-top: 0; }
    
    /*Recipes*/
    .recipies-header { padding-bottom: 10px; }
    .recipe__background { height: 280px; }
    .recipe__title { font-size: 22px; }
    
    .recipe-container.three, .recipe-container.four { margin-bottom: 0; }
    
    
    /*News/Events*/
    .event-container__title, .event-container__date { text-align: left; }
    
    
    /*Careers*/
    .careers-container__posititon__title { text-align: left; }
    
    
    /*Blog*/
    .blog-posts-container { padding-top: 10px; padding-bottom: 0px; }
    
    .blog__title { font-size: 23px; text-align: left; }
    .blog__image { float: right; padding-left: 15px; }
    .blog__image img { float: right; margin-left: 0; margin-right: 0; } 
    
    
    /*Contact*/
    .contact-us-container__background { height: 300px; }
}



@media only screen and (min-width: 1200px){ 
    h1 { font-size: 48px; }
    h2 { font-size: 28px; }
    h3 { text-align: left; }

    .inner-wrapper { width: 1200px; }

    header { min-height: 180px; }
    .header__subtitle { top: 0; }
    #mobileNav { display: none; }
    #desktopNav { display: block; }
    .logo { position: absolute; top: 40px; left: 20px; width: 80px; }

    .nav__list { font-size: 0; }
    .nav__nav-item { display: inline-block; padding: 15px 30px 15px 15px; text-align: left; }

    .main-title { padding-top: 50px; margin-right: 180px; text-align: right; font-size: 48px; }
    .header__subtitle { margin-right: 220px; text-align: right; font-size: 28px; }

    /*Modal styles*/
    .subscribe__response-message { font-size: 18px; }
    
    
    /*Index*/
    .item-container__background { height: 255px; }
    .item-container__background.zero { background: url('../images/bakery-shelf-cakes.jpg') 0% 45%/cover no-repeat; }
    
    .index-blog__image { float: right; height: auto; padding-left: 15px; padding-bottom: 5px; }
    .index-blog__image img { float: right; margin-left: 0; margin-right: 0; } 
    
    
    /*About*/
    
    
    /*Location*/
    .location-container__background { height: 400px; }


    /*Products*/   
    .shopping-cart__image.show { right: 25px; }
    
    .products-header { padding-bottom: 20px; }
    .product-search { padding-bottom: 0px; }
    
    .product-container { margin-bottom: 60px; }
    .product__title { padding: 15px; font-size: 22px; }
    .product__price-and-request { padding: 15px 15px; background-color: #eeeeee; }
    .product__background { height: 200px; }
    .product__description { padding: 15px 20px; }
    
    .product__price { width: 114px; padding: 5px 15px 5px 0; float: left; text-align: left; }
    .product__adjust-quantity { width: 100%; margin-left: 0; margin-right: 0; }
    .product__minus-quantity { display: inline-block; margin-left: 0; margin-right: 5px; margin-bottom: 0; }
    .product__quantity-input { display: inline-block; margin-left: 0; margin-right: 0; margin-bottom: 0;  }
    .product__set-quantity { display: inline-block; margin-left: 0; margin-right: 5px; margin-bottom: 0; }
    .product__increase-quantity { display: inline-block; margin-left: 0; margin-right: 0; margin-bottom: 0; }
    .product__request-item { float: right; padding-bottom: 0; }
    .product__request-item__add { margin-left: 0; margin-right: 0; }
    .product__quantity-container.show { display: inline-block; position: static; padding-left: 10px; padding-top: 22px; text-align: left; } 
    
    .estimate-section { padding-top: 0px; }
    
    .estimate-cart__title { text-align: center; }
    .estimate-table { padding-top: 10px; }
    .estimate-table tr { font-size: 0; }
    .estimate-table tbody tr { float: none; width: 100%; padding-bottom: 0; }
    .estimate-table th, .estimate-table td { display: inline-block; }
    .estimate-table th { width: auto; text-align: left; }
    .estimate-table td { padding: 10px 5px; text-align: left; }
    
    .estimate-table .estimate-table__th-item { width: 150px; }
    .estimate-table .estimate-table__th-photo { width: 110px; }
    .estimate-table .estimate-table__th-cost { width: 85px; }
    
    .estimate-table .estimate-table__th-quantity { width: 90px; }
    .estimate-table .estimate-table__th-subtotal { width: 87px; }
    .estimate-table .estimate-table__th-remove { width: 81px; }
    .estimate-table .estimate-table__th-add { width: 50px; }

    .estimate-container__title { text-align: center; }
    .estimate-table .estimate-table__item-title { width: 150px; padding: 10px 5px; }
    .estimate-table .estimate-table__item-image { float: none; width: 110px;  }
    .estimate-table .estimate-table__item-cost { float: none; width: 85px; padding-left: 10px; padding-right: 25px; }
    .estimate-table .estimate-table__item-quantity { float: none; width: 90px; } 
    .estimate-table .estimate-table__item-subtotal { float: none; width: 87px; min-width: 0; }
    .estimate-table .estimate-table__minus { float: none; width: 81px; }
    .estimate-table .estimate-table__add { float: none; width: 50px; }
    
    .estimate-table .estimate-table__minus__item { width: 36px; height: 36px; padding: 5px; border-radius: 15px; font-size: 21px; }
    .estimate-table .estimate-table__add__item { width: 36px; height: 36px; padding: 5px; border-radius: 15px; font-size: 21px; }
    
    .estimate-table__cart-summary { margin-top: 30px; }
    .cart-total { padding-top: 10px; padding-bottom: 0; text-align: left; }
    .reset-cart {}
    

    /*Recipes*/
    .recipies-header { padding-bottom: 0px; }
    
    
    /* News/Events */
    .event-container__title { font-size: 22px; }
    .event-container__image { width: 200px; height: 150px; }
    .event-container__date { font-size: 17px; }
    
    
    /*Careers*/
    .careers-container__position__image { width: 200px; height: 150px; }
    
    
    /*Blog*/
    .blog-page__content-text { float: left; }
    .blog-controls { float: right;  padding-bottom: 0px; }
    .blog-posts__message { text-align: right; }
    
    .blog-post { padding-bottom: 50px; }
    
     
    /*Contact Us*/
    .contact-us-container__background { height: 400px; }
    .contact-container__response-message { font-size: 18px; }
    
    
    /*Customized plugin styles*/
    /*General Testimonials*/
    .testimonial { padding-bottom: 15px; }
    .testimonial:last-of-type { padding-bottom: 15px; }
    
}



@media only screen and (min-width: 1600px){ 
    
    /* Header styles */
    header { min-height: 200px; }
    .header__subtitle { position: relative; top: 8px; }
    
    /*Index*/
    .item-container__background { height: 320px; }
    .item-container__background.zero { background: url('../images/bakery-shelf-cakes.jpg') 0% 30%/cover no-repeat; }
    
}