/*!
Theme Name: Prairieland Market
Theme URI: http://prairielandmarket.org/
Author: Captain Coder & Greteman Group
Author URI: http://captcoder.com/
Description: This is a Bootstrap 5 theme base custom built for Prairieland Market
Version: 2.5.0
License: GNU General Public License v2 or later
Text Domain: captcoder

captcoder is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
*/

@import url("inc/normalize.css");
@import url("inc/xl.css");

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# HTML
# Body
# Navigation
# Links & Buttons
# Overall
# Home
# Bottom Includes
# Footer
# Catering
--------------------------------------------------------------*/


/*--------------------------------------------------------------
# Colors
--------------------------------------------------------------*/
:root{
	--red: #8c004c;
	--green: #3a6959;
	--tan: #bea47b;
	--black: #000;
	--white: #fff;
} 

.green, .green h2 {color: var(--green)!important;}
.greenBk {background: var(--green);color: var(--white);}
.tanBk {background: var(--tan);}
.whiteBk {background: var(--white);}

/*--------------------------------------------------------------
# HTML
--------------------------------------------------------------*/
/* Make jump links scroll smoothly down the page */
html {scroll-behavior: smooth;overflow-x: hidden;}

/*--------------------------------------------------------------
# Body
--------------------------------------------------------------*/
/* Get rid of admin bar during development */
#wpadminbar {display: none;}

/* Set the base font family and font size for ems here. Check with designer on desired paragraph font size */
body {font-size:16px;font-family:"Open Sans",Helvetica,Arial,sans-serif;overflow-x: hidden;line-height: 1.6;background: var(--white);color:var(--black);}



/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
nav.navbar {background: var(--white);transition: all 0.2s ease;}
	nav.navbar .navbar-toggler {background: transparent;border-radius: 0;border-color: transparent;align-self: flex-end;}
        .navbar-toggler:focus {box-shadow: none;}
	.navbar-brand img {max-height: 750px;transition: all 0.2s ease;}

	.navbar-toggler-icon {background-image: none!important;background-color: var(--green);height: 3px;width: 25px;margin: 10px 0;position: relative;transition: all 0.35s ease-out;transform-origin: center;}
	.navbar-toggler-icon::before {display: block;background-color: var(--green);height: 3px;content: "";position: relative;top: -7px; transition: all 0.15s ease-out;/*taken down to hide quicker*/transform-origin: center;}
	.navbar-toggler-icon::after {display: block;background-color: var(--green);height: 3px;content: "";position: relative;top: 4px;transition: all 0.35s ease-out;transform-origin: center;}
		.navbar-toggler:not(.collapsed) .navbar-toggler-icon {transform: rotate(45deg);}
			.navbar-toggler:not(.collapsed) .navbar-toggler-icon::before {opacity: 0;}
			.navbar-toggler:not(.collapsed) .navbar-toggler-icon::after {transform: rotate(-90deg) translateX(7px) ;}
    .navbar .navbar-collapse {position: absolute;width: 100%;background: var(--green);left: 0;top: 94px;z-index: 999;text-align: center;padding: 3rem 2rem 3rem;}
        .navbar-collapse .menu-item {border-bottom: 1px solid var(--white);}
            .navbar-collapse .menu-item:nth-last-of-type(1) {border-bottom: 0;}
        .navbar-light .navbar-nav .nav-link {color: var(--white);font: 700 normal 2em 'brandon-grotesque';text-transform: uppercase;}

@media only screen and (min-width:992px) {
	.navbar-brand img {max-height: 65px;}
}
@media only screen and (min-width:1200px) {
    .navbar>.container {flex-wrap: wrap;}
        .navbar-brand {margin-right: auto;}
            
        button.donate {order: 1;margin-top: -1rem;}
        .navbar .navbar-collapse {text-align: left; background: transparent;position: relative;top:0;flex-grow: 1;justify-content: flex-end;order: 2;padding: 0;margin-top: -2rem;}
            .navbar-collapse .menu-item {border-bottom: none;}
                nav.navbar .navbar-nav .nav-link, nav.navbar .navbar-nav .nav-link:visited {font-size: 1em;padding-right: 1rem;padding-left: 1rem;color:var(--green);position: relative;}
                    nav.navbar .navbar-nav .menu-item::nth-last-of-type(1) .nav-link {padding-right: 0;}
                    nav.navbar .navbar-nav .nav-link:hover, nav.navbar .navbar-nav .nav-link:active, nav.navbar .navbar-nav .active .nav-link {color: var(--red);}
                        nav.navbar .navbar-nav .nav-link:hover:after, nav.navbar .navbar-nav .nav-link:active:after, nav.navbar .navbar-nav .active .nav-link:after  {content: "";border-bottom: 2px solid var(--red);width: 85%;position: absolute;bottom: 0.25em;left: 50%;transform: translateX(-50%);}
}
@media only screen and (min-width:1400px) {
    nav.navbar .navbar-nav .nav-link, nav.navbar .navbar-nav .nav-link:visited {font-size: 1.125em;}
    .navbar-brand img {max-height: 100px;}
}
@media only screen and (min-width:1600px) {
	.navbar-brand img {max-height: 128px;}
}
@media only screen and (max-width:768px) {
	    .navbar>.container {
        flex-wrap: nowrap;
    }
    .navbar-brand img {
        max-height: 100px;
    }
}

/*--------------------------------------------------------------
# Buttons & Links
--------------------------------------------------------------*/
a, a:visited {color:var(--green);font-weight: bold;text-decoration: underline;}
	a:hover, a:active {color:var(--red);text-decoration: none;}
button, .btn, .gform_wrapper .gform_footer input[type=submit], .btn:visited, .gform_wrapper .gform_footer input[type=submit]:visited, button.single_add_to_cart_button.button.alt, .mec-events-meta-group-booking #mec-book-form-btn-step-1, .mec-events-meta-group-booking #mec-book-form-btn-step-2 {border-radius: 5px;border: 0;background: var(--green);color: var(--white);padding:8px 15px;transition: all 0.2s;font: 700 normal 1.125em 'brandon-grotesque';text-transform: uppercase;letter-spacing: 1px;line-height: 1 !important;}
    button > a, button > a:visited {color: var(--white);text-decoration: none;}
	button:hover, .btn:hover, .catering-tab-button.active, .btn:active, .gform_wrapper .gform_footer input[type=submit]:hover, .gform_wrapper .gform_footer input[type=submit]:active, a.more-link:hover, a.more-link:active, button.single_add_to_cart_button.button.alt:hover {color:var(--white);background:var(--red);}
    .greenBk .btn, .greenBk .btn:visited, footer.footer .gform_wrapper .gform_footer input[type=submit],footer.footer .gform_wrapper .gform_footer input[type=submit]:visited {background: var(--white);color: var(--green);}
        .greenBk .btn:hover, .greenBk .btn:active, footer.footer .gform_wrapper .gform_footer input[type=submit]:hover,footer.footer .gform_wrapper .gform_footer input[type=submit]:active {background: var(--tan);color: var(--white);}


/*--------------------------------------------------------------
# Headings
--------------------------------------------------------------*/
h1,h2,h3,h4,h5,h6 {font-weight: 700;font-family: 'brandon-grotesque', sans-serif;text-transform: uppercase;}
    h1, h2, h3 {color: var(--green);}
    h1 {font-size:2.5em;line-height: 1.04;text-align: center;color: var(--green);margin-top: 0;margin-bottom: 0.75rem;}
    h2 {font-size:2.125em;line-height: 1.06;}
        .giant h2, #vision h2 {font-size: 3.125em;}
    h3 {font-size:1.75em;line-height: 1.07;}
    h4 {text-transform: none;font-size: 1.4em;}

@media only screen and (min-width:1200px) {
    h1 {font-size:3.125em;}
    .giant h2, #vision h2 {font-size:5em;}
}


/*--------------------------------------------------------------
# Overall
--------------------------------------------------------------*/
  .mob-pyt-0{
    padding-top: 0 !important;
   
   } 
.brdr-bot {border-bottom: 2px solid;}
.uppercase {text-transform: uppercase}

.gform_heading {display: none;}
    .gfield--type-text, .gfield--type-email, .gfield--type-phone {display: flex;align-items: flex-end;border-bottom: 1px solid;}
        .gfield--type-textarea {border-bottom: 1px solid;}
        .gfield--type-text .ginput_container, .gfield--type-email .ginput_container, .gfield--type-phone .ginput_container {width: 80%;}
            .gfield--type-text input, .gfield--type-email input, .gfield--type-phone input, .ginput_container_textarea textarea {background: transparent;border: 0;width: 100%;margin-left: 1rem;}
                .ginput_container_textarea textarea {margin-left: 0;}
            .gform_wrapper.gravity-theme .gfield_required {color: var(--red);}

.button-block.btn-inline {float: left;margin: 0 1rem 1rem 0;}
.buttons-inline a {margin-right: 1rem;}

.align-top .row {align-items: flex-start!important;}

.accordion-item {border: 0;}
    .accordion-header .accordion-button {background: transparent;border-top: 1px solid var(--green);color: var(--green);box-shadow: none;}
    .accordion-item:nth-last-of-type(1) {border-bottom: 1px solid var(--green);border-radius: 0;}
        .accordion-button::after {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-plus' viewBox='0 0 16 16'%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/%3E%3C/svg%3E");transition: all 0.5s;}
        .accordion-button:not(.collapsed)::after {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-dash' viewBox='0 0 16 16'%3E%3Cpath d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z'/%3E%3C/svg%3E");}
        .accordion-button::after {transition: all 0.5s;}

@media only screen and (max-width:767px) {
    .buttons-inline .btn {margin-bottom: 1rem;}
 
}

@media only screen and (min-width:992px) {
    .ginput_container_textarea textarea {height: 40px!important;}
}


/*--------------------------------------------------------------
# Home
--------------------------------------------------------------*/
.homeBanner {padding: 4rem;position: relative;}
    .homeBanner:before {content: "";display: block;height: 100%;width: 100%;position: absolute;background-repeat: no-repeat;top: 0;left: 0;background-size: contain;}
    .homeBanner p {margin-bottom: 0;font: 700 normal 3em 'brandon-grotesque';text-transform: uppercase;line-height: 1.05;position: relative;z-index: 99;}

.funnels a {text-decoration: none;color: inherit;font-weight: 500;}
    .funnels a h2 {color: var(--red);}
    .funnels .box.brdr-bot {border-bottom-color: var(--red);}
        .funnels .col-md-4:nth-last-of-type(1) .box.brdr-bot {border-bottom: 0;}
        .funnels .icon img {max-height: 55px;}

@media only screen and (min-width:768px) {
    .homeBanner {padding: 3rem;display: flex;}
        .homeBanner p {align-self: center;}
}
@media only screen and (min-width:992px) {
    #homeIntro .row > * {width:66%;margin-left: 16.5%;}
    
    .funnels .box.brdr-bot {border-bottom: 0;position: relative;}
        .funnels .box.brdr-bot:after {border-right: 2px solid var(--red);content: "";height: 70%;width: 5%;position: absolute;top: 15%;right: -5%;}
            .funnels .col-lg-4:nth-last-of-type(1) .box.brdr-bot:after {border-right: 0;}
    
    .contact img {max-width: 115%;margin-left: -15%;}
    .contact .gfield--type-email .ginput_container {width:74%;}
}
@media only screen and (min-width:1200px) {
    #homeIntro .row > * {width:50%;margin-left: 25%;}
}
@media only screen and (min-width:1300px) {
    .homeBanner p {font-size: 4.68em;}
}
@media only screen and (min-width:1400px) {
    .homeBanner {padding: 4rem;}
    
    .contact img {max-width: 100%;margin-left: 0;}

}
@media only screen and (min-width:1600px) {
    .homeBanner {padding: 5rem;}
    
    #homeIntro .row > * {width: 45%;margin-left: 27.5%;}
    
    .funnels .container, .funnels .col-lg-4 {padding-left: 5%; padding-right: 5%;}
        .funnels .box.brdr-bot:after {right: -25%;}
}

/*--------------------------------------------------------------
# About
--------------------------------------------------------------*/
#mission {position: relative;}
    #mission:before, #mission:after {content: "";width: 15%;height: 100%;opacity: 0.1;position: absolute;top:3rem;}
        #mission:before {background:url("img/l-bracket.svg") center center no-repeat;left:0;background-size: 125%;}
        #mission:after {background:url("img/r-bracket.svg") center center no-repeat;right:0;background-size: 125%;}
    #mission .copy-block {font: bold normal 1.5em 'brandon-grotesque';}
        #mission .copy-block strong {color: var(--tan);}

.value .num {color: var(--white);font: bold 8em 'brandon-grotesque';line-height: 0.75;}

@media only screen and (min-width:768px) {
    #mission:before, #mission:after {background-size: contain;height: 70%;}
}
@media only screen and (min-width:992px) {
    .values {position: relative;}
        .values:before {content: "";height: 100%;width:30%;background:url("img/beet-icon.svg") left center no-repeat;background-size:contain;position: absolute;left: 0;top:0;z-index: 9;}
        .values .container {z-index: 99;position: relative;}
    
    #snap img {max-width: 140%;}
}
@media only screen and (min-width:1200px) {
    #mission {padding-top:5rem!important;padding-bottom: 5rem!important;}
    #mission:before, #mission:after {top: 5rem;width: 10%;}
        #mission:before {left: 7%;}
        #mission:after {right: 7%;}
    #mission .copy-block {font-size: 3em;}
    
    .value .num {font-size: 10.125em;text-align: right;}
    
    #snap img {max-width: 110%;}
    #snap .content-column, #help .content-column {padding-left: 0 !important;padding-right: 0 !important;}
}
@media only screen and (min-width:1400px) {
    #snap img {max-width: 100%;width: 100%;}
}
@media only screen and (min-width:1800px) {
    #mission:before {left: 10%;}
    #mission:after {right: 10%;}
}


/*--------------------------------------------------------------
# Prepared Foods
--------------------------------------------------------------*/
.food.soldOut .foodImg {position: relative;}
    .food.soldOut .foodImg:before {content: "Sold Out";font: bold normal 2em 'brandon-grotesque';background: var(--red);color: var(--white);width: 100%;position: absolute;text-align: center;transform: translateX(-50%);left: 50%;top:0;z-index: 9;text-transform: uppercase;}


/*--------------------------------------------------------------
# Local Producers
--------------------------------------------------------------*/
.partners ul.partners-list, .partners ul.row {list-style: none;padding-left: 0;}
    .partner h3 {margin-bottom: 0;}

@media only screen and (min-width:768px) {
    .partners ul.partners-list {column-count: 2;column-gap: 10%;break-inside: avoid;-webkit-break-inside: avoid;}
        .partners ul.partners-list li {break-inside: avoid;margin:2rem 0;}
            .partners ul.partners-list li:nth-of-type(1) {margin-top: 0;}
}
@media only screen and (min-width:992px) {
    #farmers img, #products img {max-width: 140%;margin-left: -40%;}
    .partners ul.partners-list {column-count: 3;}
}
@media only screen and (min-width:1200px) {
    #farmers img, #products img {max-width: 120%;margin-left: -20%;}
}
@media only screen and (min-width:1400px) {
    #farmers img, #products img {max-width: 100%;margin-left: 0;}
}


/*--------------------------------------------------------------
# Support Local
--------------------------------------------------------------*/
@media only screen and (max-width:767px) {
    #letter .copy-block, #letter .my-3 {margin-top: 0!important;margin-bottom: 0!important;}
}
@media only screen and (min-width:768px) {
    .letter2 {margin-top: 7rem!important;}
}
@media only screen and (min-width:992px) {
    #help img, #localContact img {max-width: 120%;}
        #localContact img {margin-left: -20%;}
    
    .letter2 {margin-top: 5.5rem !important;}
}
@media only screen and (min-width:1200px) {
    .letter2 {margin-top: 3.2rem !important;}
}
@media only screen and (min-width:1400px) {
    #help img, #localContact img {max-width: 100%;}
        #localContact img {margin-left: 0;}
}

/*--------------------------------------------------------------
# Events
--------------------------------------------------------------*/
@media only screen and (min-width:992px) {
    #scholarships img {max-width: 140%;margin-left: -40%;}
}
@media only screen and (min-width:1200px) {
    #scholarships img {max-width: 120%;margin-left: -20%;}
}
@media only screen and (min-width:1400px) {
    #scholarships img {max-width: 100%;margin-left: 0;}
}
.single-mec-events #comments, .widget.widget_block {
    display: none;
}

/*--------------------------------------------------------------
# CSA
--------------------------------------------------------------*/
table.csa-food thead {background: var(--green);color: var(--white);text-transform: uppercase;font-family: 'brandon-grotesque';}
table.csa-food tbody tr {border-bottom: 1px solid var(--green);}
    table.csa-food tbody tr td {padding: 1rem 0.54rem;}

@media only screen and (min-width:1200px) {
    #faqs .headline-block, #faqs .copy-block {width: 63%;margin-left: 18.5%;}
}
@media only screen and (min-width:1400px) {
    #faqs .headline-block, #faqs .copy-block {width: 70%;margin-left: 15%;}
}


/*--------------------------------------------------------------
# Jobs
--------------------------------------------------------------*/
#application .gfield--type-text, #application .gfield--type-email, #application .gfield--type-phone {display: block;border-bottom: 0;}
    #application .gfield--type-text .ginput_container, #application .gfield--type-email .ginput_container, #application .gfield--type-phone .ginput_container {width:100%;}
        #application input[type=text], #application input[type=email], #application input[type=tel] {border: 1px solid;border-radius: 5px;background: transparent;margin-left: 0;width: 100%;}

/*--------------------------------------------------------------
# Funnel Template
--------------------------------------------------------------*/
.page-template-funnel-page header .logo, .page-template-thanks-page header .logo, .page-template-landing-page header .logo {position: absolute;top: 2rem;left: 50%;transform: translateX(-50%) translateY(-50%);}
	.page-template-funnel-page header .logo img, .page-template-thanks-page header .logo img, .page-template-landing-page header .logo img {max-height: 30px;}


/*--------------------------------------------------------------
# Blog
--------------------------------------------------------------*/
input#searchsubmit {font-family: "Font Awesome 5 Pro";background: var(--blue);padding: 5px 7px;border: 0;}
input#s {width: 80%;padding: 3px;}
h2.widget-title {margin-top: 1em;}


/*--------------------------------------------------------------
# Bottom Includes
--------------------------------------------------------------*/




/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
footer.footer {background: var(--green);color:var(--white);}
	footer.footer a {color: var(--white);text-decoration: none;}
		footer.footer a:hover, footer.footer a:active, footer.footer a:focus {color: var(--tan);}
        footer.footer .gform_wrapper.gravity-theme .gfield_required {color: var(--white);}

    footer.footer h5 {font-family: 'Open Sans';text-transform: none;font-size: 1em;}

    p.phone, .address {margin-bottom: 0;font: 700 normal 1.4em 'brandon-grotesque';}
    .social {margin-top: 0.5rem;display: flex;align-items: baseline;}
        .social i {font-size: 40px;margin: 0.5rem 0.5rem 0 0.5rem;}
            .social a:nth-of-type(1) i {margin-left: 0;}

    .hours {font-size: 0.9em;}

	.foot-nav ul {list-style: none;-webkit-padding-start: 0;padding-left: 0;column-count: 2;}
        .foot-nav ul li .nav-link {padding: 0.25rem 0;font: 700 1em 'brandon-grotesque';text-transform: uppercase;}

    p.copyright {margin-bottom: 0;}

@media only screen and (min-width:992px) {
    .hours {font-size: 1em;}
   
    .main-foot .brdr-bot {border-bottom: 0;padding-bottom: 0!important;}
        .main-foot .brdr-bot > * {border-bottom: 2px solid var(--white);padding-bottom: 3rem;}
}
@media only screen and (min-width:1200px) {
    .foot-nav ul {column-gap: 25%;}
}

/*--------------------------------------------------------------
# Catering Page
--------------------------------------------------------------*/

.catering-tab-buttons {
    display: flex;
    gap: 10px;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}
.catering-tab-btn {
    border: 2px solid var(--green);
    background: var(--white);
    color: var(--green);
    cursor: pointer;
    transition: all 0.3s;
    text-transform: uppercase;
    border-radius: 5px;
}
.catering-tab-btn.active {
    background: var(--green);
    color: var(--white);
    border-color: var(--green);
}
.catering-tab-btn:hover {
    background: var(--red);
    color: var(--white);
    border-color: var(--red);
}
.catering-tab-content {
    display: none;
}
.catering-tab-content.active {
    display: block;
}
.catering-products {
    margin-top: 2rem;
}
.catering-item {
    margin-bottom: 3rem;
}
.catering-item h3 {
    margin: 1.2rem auto 0.5em;
}

.catering-item .price {
    color: var(--red);
    margin: 0.5rem 0;
}
.catering-item a:hover{
    text-decoration: underline !important;
}
.woocommerce div.product form.cart div.quantity {
    padding: 4px;
}
.amount, .price{
    color: var(--red);
}
table.variations tbody tr td, table.variations tbody tr th {
    padding-bottom: 1em !important;
}
table.variations tbody tr td select {
    border-radius: 5px !important;
    padding: 5px;
        border: 2px solid var(--red);
        font-weight: 700;
    font-family: 'brandon-grotesque', sans-serif;
    text-transform: uppercase;
}
.woocommerce .quantity .qty{
    border-radius: 5px !important;
        border: 2px solid var(--red);
        font-weight: 700;
    font-family: 'brandon-grotesque', sans-serif;
}