/*** 
	VERY IMPORTANT screens.css NOTE ABOUT OVERRIDE ORDER
	Selector must match flexbox.css exactly
	i.e. If flexbox.css has header div#navitems, screens.css needs to have header div#navitems as JUST #navitems will not override it

	MOBILE <= 699px
	TABLET = 700px - 1024px
	TABLET & MOBILE <= 1024px
	DESKTOP >= 1025px
***/

/* Mobile */
@media 
	only screen 												and (max-width: 699px), 
	only screen and (-webkit-min-device-pixel-ratio: 2)      	and (max-width: 699px),
	only screen and (   min--moz-device-pixel-ratio: 2)      	and (max-width: 699px),
	only screen and (     -o-min-device-pixel-ratio: 2/1)    	and (max-width: 699px),
	only screen and (        min-device-pixel-ratio: 2)      	and (max-width: 699px),
	only screen and (                min-resolution: 192dpi) 	and (max-width: 699px),
	only screen and (                min-resolution: 2dppx)  	and (max-width: 699px)
{
	#PageBody, #PageBodyContinued, #PageBodyContinued2 { overflow-x: hidden; }

	#PopUpInner { width: 80%; }

		#PopUpInner.inner-90 { width: 90%; }

		#PopUpBody { overflow-x: hidden; }

			.popup-select { padding-right: 60px; }
		
			a.button-mobile-transparent { background-color: transparent; }

			a.button-50 { 
				padding-left: 2em; 
				padding-right: 2em;
			}

			.popup-button-mobile-small-padding { 
				padding-left: 1em; 
				padding-right: 1em; 
			}

			#PopUpForm {
				padding-left: 0;
				padding-right: 0;
			}

			.mobile-popup-input-multi-line { 
				width: 100%;
				margin-left: unset;
			}
			
			.mobile-current-quantity { margin-top: -10px; }

			.mobile-current-quantity-with-max { font-size: 60px; }

			.mobile-max-quantity { margin-top: -15px; }

			.mobile-popup-input-credit-card { width: 100%; }

			.mobile-popup-input-credit-date, .mobile-popup-input-credit-cvc { float: left; }

				.mobile-popup-input-credit-date { margin-right: 10px; }

				.mobile-popup-input-credit-cvc { 
					margin-left: 10px; 
					
				}

			.mobile-popup-input-apt {
				width: 100%;
				margin-right: 0;
			}

			table#YesNoToggle td.right {
				padding-right: 5px;
				text-align: left;
			}
		
			table#YesNoToggle td.left {
				padding-left: 5px;
				text-align: right;
			}
		
			table#YesNoToggle label.popup-toggle-label-left, table#YesNoToggle label.popup-toggle-label-right {
				width: calc(100% - 24px); /* Subtract padding sum + border sum*/
				margin: 0;
			}

			table#YesNoToggle label.popup-toggle-label-full {
				width: calc(100% - 24px);
			}

			div#DonateButtons label.mobile-donate-toggle { width: calc(100% - 24px); }

			#SearchAgainTable { width: calc(100% - 4px); }
		
			#BillingAddress, #ConfirmAddress { text-align: left; }

			#GiftCardBody textarea { margin-top: 10px; }

	.after-signup-message {
		margin-top: 20px;
	}

	.signup-selection select {
		font-size: 11pt;
	}

	.signup-timeline-section .how-it-works-number-wrapper  hr.connection-line, .signup-timeline-section .how-it-works-number-wrapper  hr.connection-line-left, .signup-timeline-section .how-it-works-number-wrapper  hr.connection-line-right {
		display: block;
		top: calc(50% - 13px);
	}
				
	.hero-background-mobile .hero-overlay .hero-headline, .hero-background-mobile .hero-overlay .hero-headline { 
		padding: 10px; 
	}

		#VendorHeroMobile {
			background-position: right;
		}

	.show-swiper-mobile { display: block; }

		.swiper-img-desktop { display: none; }

	.mobile-margin-top-10 { margin-top: 10px; }

	.mobile-negative-10-margin {
		margin: -10px;
	}

	.mobile-negative-10-margin-left-right {
		margin-left: -10px;
		margin-right: -10px;
	}

	#ShopMain .shop-item, .vendor-items, #ManageSubscriptions .shop-item, #PastOrders .shop-item {
		max-width: unset;
		min-width: unset;
	}

		#ShopMain .shop-item-transparent {
			margin-top: 10px;
		}

		#ShopMain .category-title {
			padding-left:0;
		}
		
		#ShopMain .child-category-title {
			padding-left:0;
		}

		.mobile-shop-item-margin-right {
			margin-right: 10px;
		}
		
		#ShopMain .shop-item-description, #ManageSubscriptions .shop-item-description {
			max-width: 140px;
		}
		
		#ShopMain .quantity-toggle, #ManageSubscriptions .quantity-toggle, #FrequencyPopUp .quantity-toggle {
			position: absolute;
			margin-left: auto;
			margin-right: auto;
			left: 0;
			right: 0;
			text-align: center;
			bottom: 5px;
		}

			#ShopMain .mobile-quantity-toggle-right-only, #ManageSubscriptions .mobile-quantity-toggle-right-only {
				margin-left: unset;
				margin-right: unset;
				left: unset;
				text-align: right;
				right: 5px;
				bottom: 10px;
			}

			#ShopMain .quantity-toggle svg.quantity-toggle-desktop-pair-plus, #ShopMain .quantity-toggle svg.quantity-toggle-desktop-pair-minus, #ManageSubscriptions .quantity-toggle svg.quantity-toggle-desktop-pair-plus, #ManageSubscriptions .quantity-toggle svg.quantity-toggle-desktop-pair-minus, #FrequencyPopUp .quantity-toggle svg.quantity-toggle-desktop-pair-plus, #FrequencyPopUp .quantity-toggle svg.quantity-toggle-desktop-pair-minus {
				width: calc(100% - 8px);
			}

			.mobile-minus-left { text-align: right; }
			
			.mobile-plus-right { text-align: left; }

		#ShopMain #HeroNoSupport { display: none; }

		#ShopMain .shop-item-action .shop-frequency {
			margin-top: 10px;
		}
		
			#ShopMain .shop-item-action a.frequency-button {
				display: block;
				text-align: center;
				margin-bottom: 10px;
			}

		#ShopMain .shop-item-action .order-selector-wrapper {
			height: 35px;
		}

			#ShopMain .shop-item-action .order-selector-wrapper .order-selector-button {
				flex-grow: 1;
			}

			#ShopMain .shop-item-action .order-selector-wrapper .order-selector-dropdown {
				padding-left: 10px;
				width: 60px;
			}

			#ShopMain .order-selector-menu {
				margin-top: 7px;
			}

	#DashboardMain form section { margin-right: 0; }

	#Dashboard #PastOrders div.manage-orders-subtitle {
		border: 0;
		padding-bottom: 0;
		margin-bottom: 10px;
		justify-content: space-between;
	}

		#Dashboard #PastOrders section.past-order-button {
			max-width: 150px;
			margin-right: 10px;
		}

			#Dashboard #PastOrders div.mobile-past-order-button {
				width: 100%;
			}

				#Dashboard #PastOrders div.mobile-past-order-button a {
					font-family: 'ff-good-web-pro', Helvetica, Arial, sans-serif;
					font-weight: 600;
					font-size: 16px;
					text-transform: uppercase;
					background-color: #FFFFFF;
					color: #222222;
					border: #E5E5E5 2px solid;
					border-radius: 10px;
					padding: .5em 1.5em;
					-webkit-appearance: none;
						-moz-appearance: none;
						appearance: none;
					text-decoration: none;
					display: block;
					text-align: center;
					width: 100%;
					margin-bottom: 10px;
				}

			#Dashboard #PastOrders section.past-order-button a.manage-order-button {
				font-size: 14px;
				width: 75px;
				margin-bottom: 5px;
			}

			#Dashboard #PastOrders section.manage-orders-swap {
				max-width: unset;
				margin: 2px 0;
			}

				#Dashboard #PastOrders .mobile-customize-name {
					padding: 4px 0;
				}
			
	#DashboardMain .calendar { min-width: 0px; }

	#DashboardMain .calendar-manage { border-left: 0; }

	input.calendar { 
		font-size: 16px; 
		width: calc(100% - 10px);
	}

		input.calendar-left { margin-right: 5px; }

		input.calendar-right { margin-left: 5px; }

	.mobile-cancel-container { padding: 10px; }

	#Team {
		margin-left: 10px;
		margin-right: 10px;
	}

		.team-container {
			max-width: unset;
			min-width: unset;
		}

	#GiftCardBody { padding: 10px; }

	#BountySignUpMobile { margin-top: -20px; }

	#BountySubPage { 
		padding-top: 80px;
		background-color: #415849;
		color: #FFFFFF;
	}

	#FAQPageContainer {
		padding: 0 20px;
	}

		#FAQPageContainer h1 { font-size: 32px; }

		#FAQPageContainer .faq-heading { font-size: 20px; }
}

/* Tablet & Mobile */
@media 
	only screen 												and (max-width: 1024px), 
	only screen and (-webkit-min-device-pixel-ratio: 2)      	and (max-width: 1024px),
	only screen and (   min--moz-device-pixel-ratio: 2)      	and (max-width: 1024px),
	only screen and (     -o-min-device-pixel-ratio: 2/1)    	and (max-width: 1024px),
	only screen and (        min-device-pixel-ratio: 2)      	and (max-width: 1024px),
	only screen and (                min-resolution: 192dpi) 	and (max-width: 1024px),
	only screen and (                min-resolution: 2dppx)  	and (max-width: 1024px)
{
	
	.hide-mobile-tablet { display: none; }

	.maker-full-page { margin-top: 0px; }

	header {
		z-index: 5003;
	}

	.signup-container-4 { 
		margin: 25px 0;
	}

	#Shop { margin-bottom: 0; }

		#Shop.pdp-shop { padding: 0px 10px; }

		#ShopMain .item-badges { font-size: 16px; }

	#MobileShopNavigation {
		height: 40px;
		background-color: #FFFFFF;
		position: sticky;
		top: 55px;
		z-index: 5001;
		margin: 20px -20px 0 -10px;
		border-bottom: 1px solid #E5E5E5;
	}

		#MobileShopNavigation .mobile-navigation-selector {
			border: 0;
			margin-bottom: 0;
			margin-top: 10px;
			background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229.94%22%20height%3D%226.01%22%20viewBox%3D%220%200%209.94%206.01%22%3E%0A%09%09%09%3Cpath%20id%3D%22Path_26988%22%20data-name%3D%22Path%2026988%22%20d%3D%22M4.97%2C9.94a1.037%2C1.037%2C0%2C0%2C1-.735-.3L.3%2C5.705a1.04%2C1.04%2C0%2C0%2C1%2C0-1.471L4.234.3A1.04%2C1.04%2C0%2C0%2C1%2C5.705%2C1.775L2.511%2C4.97%2C5.705%2C8.164A1.04%2C1.04%2C0%2C0%2C1%2C4.97%2C9.94Z%22%20transform%3D%22translate%280%206.01%29%20rotate%28-90%29%22%20fill%3D%22%23222%22%2F%3E%0A%09%09%3C%2Fsvg%3E");
				-webkit-appearance: none;
				-moz-appearance: none;
				appearance: none;
			background-size: .8em;
			background-position: calc(100% - .1em) center;
			background-repeat: no-repeat;
			background-color: #FFFFFF;
		}

		#MobileShopNavigation .mobile-navigation-left, #MobileShopNavigation .mobile-navigation-right {
			padding: 0 20px 0 20px;
		}

			#MobileShopNavigation .mobile-navigation-right {
				padding-left: 10px;
				padding-right: 30px;
			}

		#MobileShopNavigation .mobile-navigation-seperator {
			margin: 0;
			max-width: 16px;
		}

		header #Mobile-NavContainer {
			gap: 20px;
			height: 50px;
			width: 100%;
			margin-top: 10px;
		}
		
			header #Mobile-NavContainer div { 
				max-width: 23px;
				flex: 1;
			}
			
				header #Mobile-NavContainer #Hamburger { 
					height: 23px; 
					width: 23px;
				}

					header #Mobile-NavContainer #Hamburger svg rect { fill: #FFFFFF; }

				header #Mobile-NavContainer #Mobile-NavLogo {
					max-width: none;
				}

					header #Mobile-NavContainer #Mobile-NavLogo img { height: 34px; }
			
		header #SearchNavigationMobile {
			margin-bottom: 10px;
		}

	header div#MobileLinks {
		color: #2E3527;
		background-color: #FFFFFF;
		padding: 0 20px 10px 20px;
		margin-right: 0;
		position: fixed;
		width: calc(100% - 20px - 20px);	/* Subtract out padding */
		height: 0;	/* This is set via JavaScript */
		bottom: 0;
		left: 0;
		overflow-y: auto;
		overflow-x: hidden;
	}
	
		header div#MobileLinks .mobile-links-container, header div#MobileLinks .mobile-links-container-no-border {
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 20px;

			font-family: "Spezia Narrow Medium", Arial, Helvetica, sans-serif;
			font-size: 20px;
			padding: 10px 0;
			border-bottom: 1px solid #727272;
			margin: 10px 0;

			cursor: pointer;
		}

			header div#MobileLinks .mobile-links-container-no-border {
				border: 0;
				padding: 0;
			}

			header div#MobileLinks .mobile-links-container a, header div#MobileLinks .mobile-links-container-no-border a {
				color: #2E3527;
			}

			header div#MobileLinks .mobile-links-container img, header div#MobileLinks .mobile-links-container-no-border img {
				height: 20px;
				padding-right: 20px;
			}

	#ShopRight {
		display: none;
	}

	#ShopMain #MobileItemDetails .item-order-selector-wrapper {
		margin: 10px 0;
		padding-top: 11px;		/* This matches subscribe padding + border */
		padding-bottom: 11px;	/* This matches subscribe padding + border */
		justify-content: space-between;
	}

		#ShopMain #MobileItemDetails .item-order-selector-wrapper .order-selector-button {
			width: 100%;
		}

		#ShopMain #MobileItemDetails .item-order-selector-wrapper .order-selector-dropdown {
			padding-left: 20px;
		}

		#ShopMain #MobileItemDetails .item-selection a.button {
			margin-top: -6px;
			padding-top: 8px;
			padding-bottom: 8px;
		}

		#ShopMain #MobileItemDetails .item-order-selector-wrapper .dropdown-content {
			width: 350px;
			top: 32px;
		}

	#ShopMain .shop-vendor-item-photo-container .quantity-toggle {
		left: 50%;
		right: unset;
		margin-left: unset;
		margin-right: unset;
		width: 100%;
	}

	#ShoppingCartCollapse, #ShoppingCartCollapse #PreSignupFooter {
		z-index: 5050;
		max-width: calc(100% - 10px - 10px); /* Remove the padding from width */
	}

		#ShoppingCartCollapse .cart-collapse-order-list .cart-collapse-order-list-actions .cart-collapse-order-list-actions-shop input.button {
			padding: 0.25em 1.5em;
		}

		#ShoppingCartCollapse .cart-restore-delivery {
			max-width: 80px;
		}
	
	#MobileShoppingCart {
		position: sticky;
		bottom: 0;
		z-index: 5050;
		background-color: transparent;
	}

		#MobileShoppingCart #DotToggle {
			height: 50px;
			width: 50px;
			margin-bottom: -25px;
			background-color: #DEE3DE;
			border-radius: 50%;
			display: inline-block;
		}

			#MobileShoppingCart #DotToggle svg {
				margin-top: 8px;
				margin-bottom: -8px;
			}

		#MobileShoppingCartBody {
			background-color: #FFFFFF;
			padding: 10px 10px 0 10px;
			text-align: left;
			overflow-y: scroll;
			overflow-x: hidden;
			max-height: 400px;
		}

			#MobileShoppingCart #MobileShoppingCartBody .upcoming-order-details {
				margin-top: 20px;
			}

			#MobileShoppingCart #MobileShoppingCartBody .delivery-date {
				max-width: 250px;
			}

			#MobileShoppingCart #MobileShoppingCartBody .order-totals {
				margin: 10px -10px -10px -10px;
				padding: 10px 20px;
			}

			#MobileShoppingCart #MobileShoppingCartBody .mineral-green-background {
				margin-bottom: 0;
			}
		
		#MobileShoppingCartTitle {
			background-color: #DEE3DE;
			padding: 10px 0 10px 0;
		}

			#MobileShoppingCartTitle svg { 
				width: 20px; 
				vertical-align: middle;
				padding-right: 10px;
			}

		#MobileShoppingCartButton {
			padding: 0 10px 10px 10px;
			background-color: #F5F5F5;
		}

			#MobileShoppingCartButton .mobile-basket-progress {
				
			}

				#MobileShoppingCartButton .mobile-basket-progress .gray-button {
					display: block;
					background-color: #E5E5E5;
					border-radius: 5px;
					padding: 5px;
					font-family: 'ff-good-web-pro', Helvetica, Arial, sans-serif;
					font-size: 14px;
					line-height: 22px;
					text-transform: uppercase;
				}

		#MobileShoppingCart #NonLoggedInCTA { 
			padding: 10px 0 0 0;
		}
			#MobileShoppingCart #NonLoggedInCTA a {
				display: block;
				padding: 10px;
			}

	#DashboardMobileMenu {
		position: sticky;
		bottom: 0;
		background-color: #F5F5F5;
		z-index: 10000;
		margin-top: -40px; /* Since we took footer out, this couteracts the last .dashboard-content margin-bottom: 40px; - This may have adverse effects that are unknown at this time */
	}

		#Dashboard section.mobile-menu-button {
			padding: 20px 0 10px 0;
			border-top: 4px solid #F5F5F5;
		}

		#DashboardMobileMenu section.mobile-menu-selected {
			border-top: 4px solid #415849;
		}

	#Dashboard #PastOrders div.addon-container {
		align-items: stretch;
	}
		
		#Dashboard #PastOrders div.addon-container .addon-photo {
			max-width: 100px;
			margin-right: 10px;
		}
		
			#Dashboard #PastOrders div.addon-container .addon-photo img {
				max-width: 100px;
			}

			#Dashboard #PastOrders div.addon-container td.item-minus svg, #Dashboard #PastOrders div.addon-container table {
				height: 22px;
			}

				#Dashboard #PastOrders div.addon-container td.item-minus svg, #Dashboard #PastOrders div.addon-container td {
					vertical-align: top;
				}
			
					#Dashboard #PastOrders div.addon-container td.item-minus svg, #Dashboard #PastOrders div.addon-container td.item-plus svg {
						width: 38px;
						height: 22px;
					}

					#Dashboard #PastOrders div.addon-container td.item-quantity div {
						width: 22px;
						padding-top: 1px;
						text-align: center;
						vertical-align: middle;
					}

			#Dashboard #PastOrders div.addon-container section.mobile-orders-remove-price {
				max-width: 75px;
				text-align: right;
				position: relative;
			}

				#Dashboard #PastOrders div.addon-container .mobile-orders-remove, #Dashboard #PastOrders div.addon-container .mobile-orders-price { position: absolute; }

					#Dashboard #PastOrders div.addon-container .mobile-orders-remove { 
						top: 0; 
						right: 10px;
						text-align: right;
					}

						#Dashboard #PastOrders div.addon-container .mobile-orders-remove svg {
							width: 15px;
						}

					#Dashboard #PastOrders div.addon-container .mobile-orders-price { 
						bottom: 10px; 
						right: 10px;
						text-align: right;
					}
					
	#DashboardMain .mobile-driver-tip-button { 
		display: block; 
		text-align: center;
	}

	#Dashboard #PastOrders .customize-customize-button a.button-green-transparent-extra-small-rounded {
		display: block;
		text-align: center;
		margin-bottom: 10px;
	}

	#Dashboard #PastOrders section.past-order-button a.manage-order-button-desktop { display: none; }

	#Dashboard #PastOrders section.past-order-button a.manage-order-button-mobile { display: block; }

	#BountySignUpMobile a:hover { color: #415849; }

	#OurValuesHero, #OurValuesHeroMobile {
		margin-bottom: 68.53% /* Make this match for padding-bottom in freshharvest-flexbox.css, not sure why it isn't needed for #About */
	}

		.value-image {
			max-width: 100%;
			margin-right: auto;
			margin-left: auto;
		}

		.about-left, .about-right {
			max-width: 100%;
		}

		.values-full-page-headline {
			margin-bottom: -50px;
		}
}


/* Tablet */
@media
	only screen 												and (min-width: 700px) and (max-width: 1024px),
	only screen and (-webkit-min-device-pixel-ratio: 2)      	and (min-width: 700px) and (max-width: 1024px),
	only screen and (   min--moz-device-pixel-ratio: 2)      	and (min-width: 700px) and (max-width: 1024px),
	only screen and (     -o-min-device-pixel-ratio: 2/1)    	and (min-width: 700px) and (max-width: 1024px),
	only screen and (        min-device-pixel-ratio: 2)      	and (min-width: 700px) and (max-width: 1024px),
	only screen and (                min-resolution: 192dpi) 	and (min-width: 700px) and (max-width: 1024px),
	only screen and (                min-resolution: 2dppx)  	and (min-width: 700px) and (max-width: 1024px) 
{ 
	#PageBody, #PageBodyContinued, #PageBodyContinued2 { overflow-x: hidden; }
	
	#PopUpInner { width: 60%; }

	#ShopLeftMargin, #ShopRightMargin { display: none; }

	#ShopLeft { margin-left: 20px; }

	#ShopMain .shop-item { 
		/*max-width: 33%;*/
		max-width: 45%;
	}

	#ShopMain .popup-shop-item {
		max-width: 45%;
	}

	#ShopRight { 
		margin-right: 20px; 
		display: none; /* You aren't sure you want this, but you took it out of Mobile and in theory Tablet should also have the Mobile Shopping Cart, but be prepared to remove this later */
	}

	#BountySubPage {
		background-color: #415849;
		color: #FFFFFF;
		margin-top: -25px;
		padding-top: 40px;
	}
}

/* Tablet & Desktop */
@media 
	only screen 												and (min-width: 700px), 
	only screen and (-webkit-min-device-pixel-ratio: 2)      	and (min-width: 700px),
	only screen and (   min--moz-device-pixel-ratio: 2)      	and (min-width: 700px),
	only screen and (     -o-min-device-pixel-ratio: 2/1)    	and (min-width: 700px),
	only screen and (        min-device-pixel-ratio: 2)      	and (min-width: 700px),
	only screen and (                min-resolution: 192dpi) 	and (min-width: 700px),
	only screen and (                min-resolution: 2dppx)  	and (min-width: 700px)
{
	.hero-non-section, .quiz-non-section, .signup-non-section { padding: 25px 0; }

	.hero-container { 
		margin: 25px;
		padding-bottom: 46.68%; /* Mobile aspect ratio 1900x887 */ 
	}

		.quiz-content-desktop, .quiz-content-desktop-scroll, .signup-content-desktop, .signup-content-desktop-scroll { display: block; }

		.quiz-content-mobile, .signup-content-mobile { display: none; }

	.show-swiper-desktop-tablet { display: block; }
	
		.swiper { margin: 25px; }

			.swiper-slide div.swiper-image { padding-bottom: 46.68%; }

			.swiper-img-mobile { display: none; }

	.hero-sub-section {
		margin: 0 auto 20px auto;
	}

	#ShopMain #HeroNoSupportMobile { display: none; }

	#BundlePopup div.bundle-container { min-width: 500px; }

	#BundlePopup div.bundle-item-image { max-width: 150px; }

	#BundlePopup div.bundle-item-description { max-width: 305px; }

	.hide-desktop-tablet { display: none; }

	br.mobile-only { display: none; }

	#FAQPageContainer { width: 960px; }
}

/* Desktop */
@media 
	only screen 												and (min-width: 1025px), 
	only screen and (-webkit-min-device-pixel-ratio: 2)      	and (min-width: 1025px),
	only screen and (   min--moz-device-pixel-ratio: 2)      	and (min-width: 1025px),
	only screen and (     -o-min-device-pixel-ratio: 2/1)    	and (min-width: 1025px),
	only screen and (        min-device-pixel-ratio: 2)      	and (min-width: 1025px),
	only screen and (                min-resolution: 192dpi) 	and (min-width: 1025px),
	only screen and (                min-resolution: 2dppx)  	and (min-width: 1025px)
{

	.flex-container {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		align-content: flex-start;
	}

		/* I don't know why, but this has to be in both this and flexboxx.css to work correctly - if you change this, change flexbox.css */
		.flex-backwards {
			flex-direction: row-reverse;
		}

		/* I don't know why, but this has to be in both this and flexboxx.css to work correctly - if you change this, change flexbox.css */
		.flex-items-stretch {
			align-items: stretch;
		}

		/* I don't know why, but this has to be in both this and flexboxx.css to work correctly - if you change this, change flexbox.css */
		.flex-items-center {
			align-items: center;
		}

		/* I don't know why, but this has to be in both this and screens.css to work correctly - if you change this, change screens.css */
		.flex-items-baseline {
			align-items: baseline;
		}

	header {
		/*height: 82px;*/	/* NOT SURE WHY THIS WAS SET, BUT I DON'T THINK IT IS NEEDED NOW, WE'LL KEEP HERE THOUGH FOR NOW */
		height: inherit;
	}

		header div#HeaderBody { display: flex; }
		header div#Mobile-NavItems { display: none }
		header div#ItemCategoryNavigation { display: flex; }

			header svg.icon, footer svg.icon {
				margin: 0 0 0 20px;
			}

	footer { 
		
	}

		footer div#FooterWrapper { 
			display: flex; 
		}

			footer div#FooterWrapper section div {
				margin: 30px 0;
			}

				footer div#FooterWrapper section div.follow-us {
					padding-top: 0;
				}

	.master-page-left, .master-page-center, .master-page-right { flex: 1; }

		.master-page-left { 
			text-align: left;
			margin-left: 20px;
		}

			.master-page-left div.main-link {
				margin-right: 20px;
			}

		.master-page-center { 
			text-align: center;
			max-width: 225px;
		}

		.master-page-right { 
			text-align: right;
			margin-right: 20px;
			justify-content: flex-end;
		}

	#PageBody, #PageBodyContinued, #PageBodyContinued2 {
		padding: 25px;
	}

		#PageBodyContinued, #PageBodyContinued2 {
			padding-top: 0;
			padding-bottom: 0;
		}

		#PageBody.dev-environment {
			padding-top: 65px;
		}

	#PageBodyContinued div.full-screen {
		width: calc(100% + 50px);
		margin-left: -25px;	/* Make sure this matches the #PageBodyContinued padding above*/
		margin-right: -25px;	/* Make sure this matches the #PageBodyContinued padding above*/
	}

		#PageBodyContinued div.full-screen div.max-1440 {
			padding: 25px;
		}

			#PageBodyContinued div.full-screen div.max-1440 section {
				padding: 0px;
			}

			#PageBodyContinued div.full-screen section.full-screen-fill-image {
				max-width: 300px;
				margin-top: -25px;
				margin-bottom: -25px;		
			}
		
				#PageBodyContinued div.full-screen .full-screen-fill-image img {
					width: 100%;
				}

				#PageBodyContinued div.full-screen section.full-screen-fill-image {
					margin-right: 20px;
				}
				
				#PageBodyContinued div.full-screen div.flex-backwards section.full-screen-fill-image {
					margin-left: 20px;
				}

				

	a.button-mobile-padding {
		padding-left: 3em;
		padding-right: 3em;
	}

	a.button-mobile-small {
		font-size: 16px;
	}

	.standard-padding, .standard-padding-mobile-no-padding { padding: 20px; }

		.standard-padding-mobile-no-padding { margin: initial; }

	.tight-padding { padding: 10px; }

	.show-mobile { display: none; }
	
	.hide-mobile { display: block; } /* We aren't sure why this is inherit, so we are chaging back to block, we'll see if that screws anything up, if so, make sure to check "Reviews" on homepage and setup seperate .hide-mobile-section */

	.inline-mobile-hide { display: inline; }

	.inline-mobile-block { display: inline; }

	.mobile-break { flex-basis: unset; }

	.small { font-size: .66rem; }

	.size24 { font-size: 24px; }

	.size28 { font-size: 28px; }

	.size36 { font-size: 36px; }

	.size48 { font-size: 48px; }

	.how-it-works-section {
		margin-top: 0;
		padding-top: 0;
	}

		.how-it-works-number-wrapper  hr.connection-line, .how-it-works-number-wrapper  hr.connection-line-left, .how-it-works-number-wrapper  hr.connection-line-right {
			display: block;
		}
	
		.how-it-works-title { margin: 40px 10px 0px 10px; }

	.weekly-produce-baskets-section {
		margin-left: -25px;
			padding-left: 25px;
		margin-right: -25px;
			padding-right: 25px;
	}

	.front-page-review-section { margin: 0 10px; }

	.featured-farm-section { 
		background-color: #E5E5E5;
		padding: 50px 10px;
		margin-left: -25px;
			padding-left: 25px;
		margin-right: -25px;
			padding-right: 25px;
	 }

	.front-page-beyond-produce { width: unset; }

	#FrontMessage {
		margin-bottom: 50px;
	}
	
	.front-page-bottom-message {
		margin-left: -25px;
			padding-left: 25px;
		margin-right: -25px;
			padding-right: 25px;
	}

		.front-page-bottom-message-section { text-align: left; }

	#PopUpInner {
		min-width: 400px;
		width: initial;
	}

	.quiz-non-section, .signup-non-section { margin-top: -75px; }

		.signup-non-section { background-color: #FFFFFF; }

		.quiz-container, .signup-container {
			position: relative;
			margin: 50px auto;
			width: 960px;
		}
			.signup-container { width: 540px; }

				.signup-container-1 { min-height: 540px; }
				.signup-container-2 { min-height: 960px; }
				.signup-container-3 { min-height: 620px; }
				.signup-container-4 { min-height: 460px; }

		.quiz-spacer-mobile, .signup-spacer-mobile { display: none; }

		.quiz-selection label.popup-toggle-label, .signup-selection label.popup-toggle-label { 
			margin-left: 10px;
		}

		.quiz-slider {
			width: 75%;
			height: 25px;
		}

			.quiz-slider::-webkit-slider-thumb {
				width: 50px;	
				height: 50px;
			}

			.quiz-slider::-moz-range-thumb {
				width: 50px;
				height: 50px;
			}

		.quiz-selection table, .signup-selection table {
			width: 75%; 
			margin: 0 auto;
		}

			signup-selection table, .signup-selection input, .signup-selection select, .signup-selection textarea, .signup-selection .signup-dropdown-question {
				width: 360px;
				font-size: 16px;
				font-weight: normal;
			}

				.signup-selection table.signup-table input {
					width: 162px;
				}

				.signup-selection textarea {
					height: 90px;
				}

		.quiz-image img, .signup-image img { max-width: 342px; }

		a.signup-wide-button {
			width: 320px;
			padding-top: .75em;		/* This is relative to the main version */
			padding-bottom: .75em;	/* This is relative to the main version */
			margin-left: auto;
			margin-right: auto;
		}

	#ShopWrapper #ShopContainer {
		padding: 0;
	}
	
		.shop-flex-container {
			justify-content: flex-start;
		}

		#ShopMain #AddOnHeroContainer {
			width: auto;
			margin-top: -44px;
			min-width: 0;
			display: grid;	/* THIS IS VERY IMPORTANT OTHERWISE THE swiper WILL BE SUPER WIDE: LIKE 1.6 MILLION PIXELS WIDE SUPER WIDE */
		}
		
			#ShopMain #AddOnHero {
				height: 400px;
				margin-top: -40px;
				text-align: left;
				padding: 0 80px; 
			}

		#ShopMain #HeroNoSupport { margin-top: -44px; }

		#ShopMain .no-hero-shop-items { margin-top: -64px; }	/* This should be the -44px we do for HERO + 20px more for spacer */

		#ShopMain .shop-item, #ShopMain .shop-item-transparent {
			/*margin-right: 20px;
			max-width: 200px;
			min-width: 200px;*/
			min-width: 250px;
			margin: 10px;
		}	
		
			#ShopMain .popup-shop-item {
				min-width: unset;
				margin: unset;
				margin-bottom: 10px;
			}

			#ShopMain .quantity-toggle svg.quantity-toggle-desktop-pair-plus, #ShopMain .quantity-toggle svg.quantity-toggle-desktop-pair-minus, #ManageSubscriptions .quantity-toggle svg.quantity-toggle-desktop-pair-plus, #ManageSubscriptions .quantity-toggle svg.quantity-toggle-desktop-pair-minus {
				width: 100%;/* !important;*/
				/*padding: 0px 10px 0px 5px;*/
			}

			#ShopMain .mobile-plus-right-only {
				padding-bottom: 5px;
			}

			#ShopMain #ItemVendorItems .shop-item, .vendor-items {
				margin-right: 20px;
				max-width: 195px;
				min-width: 195px;
			}

			#ShopMain #ItemVendorItems .shop-vendor-item {
				margin-right: 20px;
				max-width: none;
				min-width: auto;
			}

			#ShopMain .shop-item-photo .lazy-plp {
				min-height: 240px;
			}

		/*#ShopMain #ItemVendorItems {
			max-height: 520px;
			overflow: hidden;
		}*/

		#ShopMain select.item-order-date-selector, #ShopMain div.custom-select, #ShopMain .variant-selection select, .item-order-selector-wrapper { 
			max-width: 330px;
			margin-bottom: 0;
		}

			.item-order-selector-wrapper {
				max-width: 298px; /*330px - 16px - 16px;*/
				height: 22.5px;
				font-size: 16px;
				padding: 8px 16px;
				margin-top: 20px;
			}

				.item-order-selector-wrapper .order-selector-button {
					flex-grow: 1;
				}

				.item-order-selector-wrapper .order-selector-dropdown {
					padding-left: 25px;
				}

				.item-order-selector-wrapper .dropdown-content {
					width: 330px;	/* See above */
					top: 32px;
					right: -16px;
				}

				.item-order-selector-wrapper .order-selector-bridge {
					background-color: transparent;
					height: 15px;
					margin-top: -15px;
				}

			.vendor-item-order-date {
				margin-top: 4px;
			}

		#MobileItemsDetail { display: none; }

		#Filters { 
			display: none;	/* For Farmhouse we use checkboxes on the left for desktop and buttons at the top for tablet/mobile */
			top: 164px; 
			padding-left: 0;
			padding-right: 0;
		}

			#Filters .filters-title {
				padding-left: 0;
			}

		#CustomizeTitle {
			font-size: 12px;
			top: 134px;
			margin-top: -34px; /* This needs to match the delivery notifcation height */
			padding-top: 34px;	
			margin-bottom: 0;	
		}

			#CustomizeTitle section.content {
				font-size: 36px;
			}

			#CustomizeProgressBar {
				margin-left: 20px;
				padding-right: 10px;
				width: 400px;
			}

	#Dashboard {
		margin: 0 100px 200px 160px;
	}

		#Dashboard #DashboardPageTitle {
			padding: 0px 0px 20px 0px;	
			position: sticky;
			top: 92px;
		}

		#Dashboard #DashboardNavigation {
			position: sticky;
			top: 136px;
			min-width: 250px;
		}

		#DashboardMain .dashboard-content {
			padding: 50px;
		}

			#DashboardMain .dashboard-content .dashboard-content-header {
				font-size: 36px;
			}

			#DashboardMain form input, #DashboardMain form select {
				max-width: 325px;
			}

		#Dashboard #PastOrders section.past-order-button a.manage-order-button-mobile { display: none; }

		#ManageSubscriptions .shop-item {
			margin-right: 20px;
			max-width: 162px;
			min-width: 162px;
		}

			#ManageSubscriptions .shop-item .quantity-toggle {
				margin-left: 10px;
			}

				#ManageSubscriptions .shop-item .quantity-toggle svg {
					width: 100%;
				}

	#Team {
		justify-content: center; 
		max-width: 1200px; /* This is purposely bigger than most */
		margin-left: auto;
		margin-right: auto;
	}

		.team-container {
			margin-right: 20px;
			max-width: 200px;
			min-width: 200px;
		}

	#Vendor {
		justify-content: center; 
		max-width: 1024px;
		margin-left: auto;
		margin-right: auto;
	}
		
		.vendor-container, .other-vendor-container {
			margin-right: 20px;
			max-width: 300px;
			min-width: 300px;
		}

			.other-vendor-container {
				max-width: 280px;
				min-width: 280px;
			}

		#VendorBody {
			max-width: 960px;
			margin: 0 auto;
		}

			#VendorBody img { 
				max-width: 640px;
			}

		.other-vendor-button a.button {
			display: inline;
		}

	#OurValuesHero { padding-bottom: 38%; /* Aspect ratio ????x1900*/ }
	
	#AboutHero { padding-bottom: 14.05%; /* Aspect ratio 267x1900*/ }

		.about-overlay { padding-top: 0; }

		.about-body {
			justify-content: center;
			align-items: center;
		}

		.about-gray-container {
			margin-left: -25px;
				padding-left: 25px;
			margin-right: -25px;
				padding-right: 25px;
			background-color: #E5E5E5;
		} 
		
		.value-image {
			max-height: 450px;
			max-width: 400px;
			object-fit: cover;
			object-position: top;
		}

	#PrivacyPolicy { 
		max-width: 960px; 
		margin: 80px auto 0 auto;
	}

		#PrivacyPolicy iframe { 
			margin-top: -60px;
		}

		#PrivacyHero { padding-bottom: 14.05%; /* Aspect ratio 267x1900*/ }

		.privacy-overlay { padding-top: 0; }

	.contact-overlay {
		top: unset;
		bottom: 40px;
		transform: translate(-50%, 0);
		padding-top: 0;
	}

	.referral-overlay {
		bottom: unset;
		top: 40px;
		transform: translate(-50%, 0);
		padding-bottom: 0;
	}

		.referral-works-section {
			margin-top: 0;
			padding-top: 0;
		}
		
			.referral-works-number-wrapper {
				margin-bottom: 40px;
			}
		
			.referral-works-number-wrapper  hr.connection-line, .referral-works-number-wrapper  hr.connection-line-left, .referral-works-number-wrapper  hr.connection-line-right {
				display: block;
				border: solid #FFFFFF 2px;	
			}

			.referral-works-circle-outer {
				stroke: #FFFFFF;
			}

			.referral-works-circle-middle {
				fill: transparent;
			}

			.referral-works-title { margin: 40px 10px 0px 10px; }

	#GiftCardBody input#Card, #GiftCardBody input#ExpirationMo, #GiftCardBody input#ExpirationYr, #GiftCardBody input#CVC {
		margin-right: 10px;
	}
	
		#GiftCardBody input#Card { width: 225px; }
		
		#GiftCardBody input#ExpirationMo { width: 66px; }

		#GiftCardBody input#ExpirationYr { width: 66px; }

		#GiftCardBody input#CVC { width: 75px; }

	.hero-background-desktop { display: block; }

	.hero-background-mobile { display: none; }

}