:root {
	--color-palette-1: #FAF6EE;
	--color-palette-2: #F5EBDD;
	--color-palette-3: #B4D7DE;
	--color-palette-4: #3F61AA;
	--color-palette-5: #F3BC4D;
	--color-palette-6: #C73E29;
	--color-palette-7: #984D95;
	--color-palette-white: #FAF6EE;
	--text-color: #2C1B15;
	--text-color-accent: #B48459;
}

html {
	scroll-padding-top: 125px;
}

body {
	color: var(--text-color);
	font-size: 20px;
}

.hero-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(2,1,34,0.1);
}

.hero-title {
	position: absolute;
	top: 23.5%;
	left: 9%;
	font-family: elza-text, sans-serif;
	color: var(--color-palette-white);
	font-size: 86px;
	font-weight: 600;
}

.hover-default:hover,
.bg-default {
	background-color: var(--color-palette-1);
}

.bg-secondary {
	background-color: var(--color-palette-2);
}

.bg-tertiary {
	background-color: var(--color-palette-3);
}

.btn {
	border-radius: 50px;
	background-color: var(--color-palette-4);
	color: var(--color-palette-white);
	border: none;
	padding: 1rem 1.5rem;
}

.btn:disabled, .btn:disabled:hover {
	background-color: #dddddd;
	transform: none;
}

.btn:hover {
	background-color: var(--color-palette-4);
	background-image: linear-gradient(rgb(0 0 0/10%) 0 0);
}

.btn-secondary {
	background-color: var(--color-palette-5);
	color: var(--text-color);
}

.btn-secondary:hover {
	background-color: var(--color-palette-5);
	background-image: linear-gradient(rgb(0 0 0/10%) 0 0);
}

.btn-tertiary {
	background-color: var(--color-palette-3);
	color: var(--text-color);
}

.btn-tertiary:hover {
	background-color: var(--color-palette-3);
	background-image: linear-gradient(rgb(0 0 0/10%) 0 0);
}

.border-accent {
	border-color: var(--text-color-accent);
}

.card {
	background-color: var(--color-palette-1);
	box-shadow: 0 4px 30px rgba(44, 27, 21, 0.1);
}

.card-content {
	padding: 1.5rem 1.5rem;
}

.card::after {
	display: block;
	background-color: var(--color-palette-3);
	content: '';
	width: calc(100% - 3rem);
	height: 2px;
	margin: 0 1.5rem 1.5rem;
}

.theme-foodservice {
	background-color: var(--color-palette-6);
	color: #ffffff;
}

.theme-retail {
	background-color: var(--color-palette-4);
	color: #ffffff;
}

.theme-industry {
	background-color: var(--color-palette-7);
	color: #ffffff;
}

.theme-international {
	background-color: var(--color-palette-5);
	color: var(--text-color);
}

.jump-menu {
	top: 100px;
	min-height: 76px;
}

.dr-potato-illustration {
	position: absolute;
	right: -20px;
	top: 50%;
	transform: translateY(-50%);
}

.featured-recipe-hero {
	position: relative;
	height: 60vh;
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

.featured-recipe-hero::after {
	background-color: rgba(77, 23, 13, 0.2);
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.text-accent {
	color: var(--text-color-accent);
}

.region-map {
	background-color: var(--color-palette-1);
}

.potato-tracker-hero {
	background-image: url("https://cdn.idahopotato.com/assets/frontend/v2024/img/placeholder/truck-nyc.webp");
	background-size: cover;
	background-position: top center;
	background-repeat: no-repeat;
	min-height: 70vh;
}

.julian-dates-table {
	background-color: transparent;
	border-color: #000;
}

table.julian-dates-table:not(.no-header) tr:first-child {
	background-color: transparent;
}

table.julian-dates-table tr:nth-of-type(even) {
	background-color: rgba(255,255,255,0.6);
}

.julian-dates-table th,
.julian-dates-table td {
	text-align: center;
	padding: 8px;
	border: 1px solid var(--text-color);
}



/* Google Custom Search Styles
---------------------------------------------------------------------- */

.gsc-control-cse {
    background: none !important;
    border: none !important;
    padding: 0 !important;

}

.gsc-table-result, .gsc-thumbnail-inside, .gsc-url-top {
	padding-left: 0;
}

.gsc-modal-background-image {
	background-color: black !important;
}

.cse .gsc-resultsHeader, .gsc-resultsHeader {
	border: none;
	margin-bottom: 0 !important;
}

.gsc-orderby .gsc-selected-option-container {
	width: auto !important;
}

.gsc-results-close-btn {
	top: 10px !important;
	right: 10px !important;
}

.gsc-table-cell-snippet-close, .gsc-table-cell-snippet-open {
	padding-left: 10px !important;
	padding-right: 10px !important;
}

.gsc-control-cse .gsc-table-result {
	border: none !important;
	margin-bottom: 0 !important;
}

.gsc-webResult.gsc-result, .gsc-results .gsc-imageResult {
	border-bottom: 1px solid #ddd !important;
}




.align-left, .alignleft {
	float: left;
	margin: 0 15px 15px 0;
}

.align-right, .alignright {
	float: right;
	margin: 0 0 15px 15px;
}

.alignnone, .aligncenter {
	display: block;
	margin: 15px 0;
}

.aligncenter {
	display: block;
	margin: 15px auto;
}

/* ------> 0.1.5: Dynamic Content HTML */

.dyn-content h3,
.featured-section h3,
.sidebar h3 {
	font-family: "minion-pro", serif;
	font-size: 1.5rem;
	font-weight: 600;
	margin-bottom: 1rem;
}

.dyn-content ul, .dyn-content ol, ol {
	list-style-type: initial;
	padding-left: 2rem;
	margin-bottom: 1rem;
}

.dyn-content ol, ol {
	list-style-type: decimal;
}

.dyn-content > ul > li > a {
	color: #008CBA;
}

.dyn-content p,
.dyn-content img,
.sidebar p {
	margin-bottom: 16px;
}

.dyn-content hr {
	margin: 16px 0;
}

.dyn-content a {
	font-weight: 600;
}

.dyn-content a:hover {
	text-decoration: underline;
}

.dyn-content.adjust-readability p {
	width: 100%;
}

.dyn-content p:last-child {
	margin-bottom: 0;
}

.divide-y > :not([hidden]) ~ :not([hidden]) {
	border-color: var(--color-palette-3);
}

.sidebar a {
	display: block;
	padding: 10px;
	border: 2px solid #000000;
}

.sidebar ul {
	margin-bottom: 24px;
}

.sidebar ul a {
	margin-bottom: 5px;
}

.sidebar a:hover {
	background-color: #F4F4F4;
}

.all-things-grid .card {
	margin-bottom: 30px;
}

.accent-after,
.accent-after-secondary
{
	position: relative;
	padding-bottom: 32px;
}

.accent-after::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	background-color: var(--color-palette-3);
	width: 80px;
	height: 4px;
}

.accent-after-secondary::after {
	content: '';
	background-color: var(--color-palette-white);
	position: absolute;
	bottom: 0;
	left: 0;
	width: 80px;
	height: 4px;
}

.accent-stars {
	position: absolute;
}

#pantryItemList {
	opacity: 0;
	visibility: hidden;
	background: #fff;
	position: absolute;
	top: 40px;
	left: 0;
	margin: 0;
	list-style-type: none;
	z-index: 10;
	width: 15rem;
	box-shadow: 0 2px 5px rgba(0,0,0,0.25);
}

#pantryItemList.open {
	opacity: 1;
	visibility: visible;
}

.available-ingredients {
	max-height: 300px;
	overflow-y: scroll;
}

.available-ingredients li {
	padding: .5rem;
	margin-left: 0;
}

.available-ingredients li:hover {
	background-color: #eee;
	cursor: pointer;
}

.selected-ingredients {
	margin-bottom: 0;
}

.selected-ingredients li {
	display: inline-block;
	background: RGBA(151, 68, 21, 1.00);
	margin-left: 0;
	margin-right: .5rem;
	margin-bottom: 1rem;
	padding: 0 0 0 .5rem;
	color: #fff;
}

.selected-ingredients li a, .selected-ingredients li a:hover {
	color: #fff;
}

.selected-ingredients .remove-ingredient {
	background-color: #333;
	display: inline-block;
	padding: 0 .25rem;
	margin-left: .5rem;
	cursor: pointer;
	transition: .2s linear;
}

.selected-ingredients .remove-ingredient:hover {
	background-color: #555;
}

body {
	font-family: elza-text, sans-serif;
}

.h1, .h2 {
	font-family: "minion-pro", serif;
	font-weight: 600;
	line-height: 1.2;
}

.h3 {
	font-family: "minion-pro", serif;
	font-weight: 500;
	font-size: 1.5rem;
	line-height: 1.2;
}

.accordion-trigger [data-accordion-icon] {
	transition: .2s linear;
}

.accordion-trigger.active [data-accordion-icon] {
	transform: rotate(0deg);
}

.accordion-trigger {
	text-align: left;
}

.accordion-panel {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
}

.accordion-panel p {
	padding-top: 1rem;
}

.accordion-panel p:last-child {
	padding-bottom: 1rem;
}

.loading-indicator {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-100%,-100%);
  }
  
  .loading-overlay {
	  /* background-color: rgba(24,24,27,0.98); */
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  z-index: 10;
  }
  
  .loading-indicator .fa {
	  font-size: 6rem;
	  color: rgba(24,24,27,0.98);
  }


  /* ==== Swiper Overrides ==== */

.feature-slider .swiper {
	padding-bottom: 50px;
}

.feature-slider .scroll-nav {
	transform: translateY(45px);
}

.feature-slider .swiper-scrollbar.swiper-scrollbar-horizontal,
.cover-flow .swiper-scrollbar.swiper-scrollbar-horizontal
{
	position: static !important;
}

.swiper-button-next,
.swiper-button-prev {
	width: auto;
}

.swiper-button-next:before,
.swiper-button-prev:after {
	content: '';
	width: 40px;
	height: 40px;
}

.swiper-button-next:after {
	content: '';
	width: 0;
	height: 0;
}

.swiper-button-prev {
	background-image: url("/assets/frontend/v2024/img/scroller-prev.svg");
	background-repeat: no-repeat;
	background-position: 100% 0;

}

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

.swiper-button-next {
	background-image: url("/assets/frontend/v2024/img/scroller-next.svg");
	background-repeat: no-repeat;
}

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

.swiper-scrollbar {
	background-color: rgba(44, 27, 21, 0.25);
}

.swiper-scrollbar-drag {
	background-color: rgba(2, 1, 34, 1);
	border-radius: 0;
}

.bg-red-700 {
	background-color: rgba(211, 0, 3, 1) !important;
}

.bg-slate-100 {
	background-color: rgba(244, 244, 244, 1) !important;
}

.site-search {
	opacity: 0;
	visibility: hidden;
	background-color: #ffffff;
	position: absolute;
	top: 72px;
	right: 24px;
	width: 360px;
	transform: translateY(0);
	transition: transform .25s linear;
	z-index: 20;
}

.site-search.open {
	opacity: 1;
	visibility: visible;
	transform: translateY(-2px);
}

.country-map-box .export-country:not(.selected), .country-map-box .export-country:not(.selected) path {
	fill: #bcaaa4 !important;
}



/*********************************************** */

.top-logo {
	margin-top: -36px;
	margin-bottom: -100%;
}

@media screen and (max-width: 1023px){
	.nav-menu {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		max-width: 250px;
		padding-top: 93px;
		background-color: #ffffff;
		z-index: 15;
		transform: translateX(-100%);
		transition: transform .25s;
	}

	.nav-menu.mobile-active {
		transform: translateX(0);
	}

	.sub-menu {
		max-height: 0;
	}

	.nav-menu.mobile-active .sub-menu.open {
		opacity: 1;
		visibility: visible;
		max-height: 500px;
	}

	.jump-menu {
		top: 94px;
	}
}

@media screen and (max-width: 480px){
	.h1 {
		font-size: 30px;
	}

	.hero-title {
		font-size: 40px;
	}
}

@media screen and (min-width: 1024px){
	.sub-menu {
		position: absolute;
		transform: translateY(2px);
		transition: .15s linear;
		z-index: 100;
	}

	.has-children:hover .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}
}

.cal-red-potato {
	position: absolute;
	top: 72%;
	left: 23%;
	width: 23%;
}

.purple-potato {
	position: absolute;
	top: 67%;
	left: 5%;
	width: 20%;
}

.russet-potato {
	position: absolute;
	right: 35%;
	width: 33%;
	top: 30%;
	z-index: 0;
}

.russet-potato.in-view {
	animation: rollLeftSlow .5s linear infinite;
	animation-play-state: paused;
	animation-delay: calc(var(--scroll) * -.5s);
	animation-iteration-count: 1;
	animation-fill-mode: both;
}

.purple-potato.in-view  {
	animation: rollLeftFast .4s linear infinite;
	animation-play-state: paused;
	animation-delay: calc(var(--scroll) * -1.1s);
	animation-iteration-count: 1;
	animation-fill-mode: both;
}

.red-potato-1 {
	position: absolute;
	top: 54%;
	left: 37%;
	width: 19%;
}

.gold-potato-1 {
	position: absolute;
	top: 57%;
	left: 19%;
	width: 15%;
}

.red-potato-1.in-view {
	animation: rollLeftSlow .75s linear infinite;
	animation-play-state: paused;
	animation-delay: calc(var(--scroll) * -2s);
	animation-iteration-count: 1;
	animation-fill-mode: both;
}

.gold-potato-1.in-view  {
	animation: rollLeftFast .75s linear infinite;
	animation-play-state: paused;
	animation-delay: calc(var(--scroll) * -1.5s);
	animation-iteration-count: 1;
	animation-fill-mode: both;
}

.stats-truck {
	transform: translateX(5000px);
}

.in-view .stats-truck {
	animation: slideInRight 1s forwards;
	animation-play-state: paused;
	animation-delay: calc(var(--scroll) * -1s);
	animation-iteration-count: 1;
}

.stats-lengh-indicator {
	opacity: 0;
	transform: translateY(-10px);
}

.in-view .stats-lengh-indicator {
	animation: fadeInDown .3s ease-in forwards;
	animation-delay: 1s;
}

.markets {
	background-color: #F8F4ED;
}

@keyframes slideInRight {
	0% {
		transform: translateX(5000px);
	}
	60% {
		transform: translateX(0);
	}
	65% {
		transform: translateX(-2000px);
	}
}

@keyframes rollLeftSlow {
		from {
			transform: translateY(0, 0) rotate(0);
		}
		to {
			transform: translate(-150px, 0) rotate(-200deg);
		}
}

@keyframes rollLeftFast {
	from {
		transform: translateY(0, 0) rotate(0);
	}
	to {
		transform: translate(-250px, 0) rotate(-360deg);
	}
}

@keyframes fadeInDown {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes rotate {
	from {
		transform: rotate(-2deg);
	}
	to {
		transform: rotate(60deg);
	}
}

@keyframes spillSlow {
	from {
		transform: translateY(0, 0) rotate(0);
	}
	to {
		transform: translate(-450px, 100px) rotate(-300deg);
	}
}

@keyframes spillFast {
	from {
		transform: translateY(0, 0) rotate(0);
	}
	to {
		transform: translate(-50px, 75px) rotate(180deg);
	}
}


/* Modals
---------------------------------------------------------------------- */

.modal-overlay {
	opacity: 0;
	visibility: hidden;
	display: flex;
	background-color: rgba(0,0,0,0.75);
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	transition: .25 linear;
	overflow-y: scroll;
	padding: 50px 0;
}

.overlay-transparent {
	background-color: transparent;
}

.overlay-25 {
	background-color: rgba(0,0,0,0.25);
}

.overlay-50 {
	background-color: rgba(0,0,0,0.50);
}

.modal-overlay.is-visible {
	opacity: 1;
	visibility: visible;
}

.modal {
	position: relative;
	display: flex;
	flex-direction: column;
	background-color: #fff;
	width: 800px;
	max-width: 95%;
	margin: auto;
}

.modal--md {
	width: 600px;
}

.modal--promo {
	margin: auto;
}

.modal--promo .video {
	margin-bottom: 0;
}

.modal-content {
	overflow-y: scroll;
}

.padded-content {
	background-color: #ffffff;
	padding: 1rem;
}

.ajax-loader {
	opacity: 0;
	visibility: hidden;
	position: fixed;
	top: 50%;
	left: 50%;
	color: #fff;
	transform: translateX(-50%) translateY(-50%);
	z-index: 10;
	transition: .2s linear;
}

.ajax-loader.enabled {
	opacity: 1;
	visibility: visible;
}

/* FOODSERVICE CONTACT PAGE STYLES
------------------------------------------------------------------------------ */

#us-map {
	overflow: hidden;
	width: 960px;
	height: 700px;
	max-width: 100%;
	margin-bottom: 30px;
}

.jvectormap-container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    padding-top: 2rem;
}

.retail-map .jvectormap-container.west::before {
	content: '+ CANADA';
	position: absolute;
	left: 50%;
	margin-left: -70px;
	transform: translateX(-50%);
	top: 16px;
	letter-spacing: 2px;
	font-size: 1.2rem;
	color: #B08243;
}

.foodservice-bio, .retail-bio {
	display: none;
}

.foodservice-bio.active, .retail-bio.active {
	display: block;
}

.foodservice-bio img, .retail-bio img {
	border-bottom: 10px solid #f4f4f4;
}

#westernRegion img {
	border-color: #86cb65;
}

#southEastRegion img {
	border-color: #00386c;
}

#northEasternRegion img {
	border-color: #82e0e5;
}

.meeting-archives-list {
	font-size: 1.125rem;
	line-height: 1.75rem;
}

.meeting-archives-list strong {
	display: inline-block;
	margin-top: 24px;
	margin-bottom: 5px;
}

.meeting-archives-list a {
	display: flex;
	background-color: rgba(244, 244, 244, 1);
	padding: 1rem;
	align-items: center;
	justify-content: space-between;
}

.meeting-archives-list a:hover {
	background-color: rgba(240, 240, 240, 1);
}

.meeting-archives-list a:after {
	font-family: "Font Awesome 6 Free";
	content: '\f054';
}

.validation-messages {
	background-color: rgba(254, 226, 226,1);
	transform: translateY(-16px);
	display: inline-block;
	margin-bottom: 20px;
	padding: 5px;
}

.fw-readability,
.accordion-panel p {
	width: 100%;
}

.plm-sidebar .entry-button {
	padding: 0;
	border: none;
}

#plmEntryForm {
	width: 100%;
	border: 0;
	height: 1900px;
}

/* COLLAPSABLE PANELS
-------------------------------------------------------------------- */

.reveal-switch {
	cursor: pointer;
}

.reveal-block {
  display: none;
  border-top: 0;
}

.reveal-block.visible {
  display: block;
}

@media screen and (min-width: 768px){
	.fw-readability,
	.accordion-panel p,
	.dyn-content.adjust-readability p {
		width: 75%;
	}

	.asym-grid-section {
		position: relative;
	}
	
	.asym-left {
		position: absolute;
		top: 0;
		left: 0;
		right: calc(50% - 40px);
		bottom: 0;
		width: calc(50% - 40px);
	}
	
	.asym-right {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: calc(50% - 40px);
	}

	.plm-bg {
		background: linear-gradient(to left, #EB1168 50%, transparent 50%);
	}
}