/* enabling search focus -- YEARS old bug related to the production minifier incorrectly removing the "s" from 0s in transition rules. */
body.search--active #search {
	visibility: visible;
	transition: opacity 0.2s, visibility 0s;
}
#search { 
	line-height:1; 
}
/* Fix 'skip to main' styles */
a.skip-main {
	padding:0;
	top:auto;
}
a.skip-main:focus, 
a.skip-main:active {
	left:auto;
	font-size:inherit !important; /* -_- */
	min-width:10em;
	left:50%;
	background-color:#000;
	overflow: auto;
	white-space:nowrap;
	margin: 0.25em;
	margin-left: -6em;
	padding: 0.25em 1em;
	border-radius: 0.5em;
	z-index: 999; 
}
@media (min-width:48em) {
	a.skip-main:focus, 
	a.skip-main:active {
		left:33%;
		margin-left: -14em;
	}
}
main[tabindex]:focus,
main > div[tabindex]:focus {
	outline:none;
}
.tns-controls button[data-controls]::before, 
.tns-controls button[data-controls]::after {
	background:currentcolor;
	
}
.tns-controls button[data-controls="next"], 
.tns-controls button[data-controls="prev"] {
	padding:0; 
	user-select:none;
}
.tns-controls button[data-controls]:disabled {
	opacity:0.33;
}
.tns-nav button:focus {
	outline: medium solid #000;
}


@media (max-width:47.95em) {
	/* normalizing animated arrow behavior and the pointless touchscreen + tab-navigation feature arrow. */
	header .content_wrapper {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		padding: 0 1em;
		z-index: 200;
	}
	.nav--container {
		left:0;
	}
	.nav--container nav {
		padding:0;
	}
	.nav--main > ul > li {
		display: block;
	}
	.nav--main a {
		margin-right: 3em;
	}
	.nav--main ul a,
	.nav--secondary ul a {
		padding-left: 1.25em
	}
	.nav--main a::after {
		display:block;
		left: 100%;
		margin-left:0.5em;
		transform: translate(0, -50%) scale(0.66) rotatey(0deg) rotate(-45deg);
		transition: transform 0.2s, margin 0.2s; 
	}
	.nav--main a.nav-list-title::after {
		display:none;
	}
	.nav--main a.nav-list-title {
		padding-left: 2.5em;
	}
	.nav--main .subNav {
		background: rgba(255, 0, 0, 0);
		width: 3em;
		float: right;
		position:relative;
		right: auto;
		top: auto;
		height: 2em;
		pointer-events:none;
		margin: -2em 0 0 -3em; 
	}
	.nav--main li.mobile-nav--opened .subNav {
		visibility:hidden;
	}
	.nav--main .subNav:last-child {
		display: none; 
	}
	.nav--main .subNav::after {
		display: none !important;
	}
	.nav--main li.menu-dropdown a.track {
		width:auto;
	}
	.nav--main li.mobile-nav--opened > div {
		overflow: visible; 
	}
	.nav--main li.mobile-nav--opened > a::after {
		margin-left:4em;
		transition: transform 0.2s, margin 0.5s;
	}
	.nav--main li.mobile-nav--opened:nth-child(2) > a::after {
		margin-top:-2em;
	}
	.nav--main li.mobile-nav--opened:nth-child(3) > a::after {
		margin-top:-4em;
	}
	.nav--main li.mobile-nav--opened:nth-child(4) > a::after {
		margin-top:-6em;
	}
	.nav--main li.mobile-nav--opened:nth-child(5) > a::after {
		margin-top:-8em;
	}
	.nav--main > ul > li {
		transition:visibility 0s;
	}
	.nav--main > ul.mobile-nav--child-opened > li:not(.mobile-nav--opened) > a,
	.nav--main > ul.mobile-nav--child-opened > li:not(.mobile-nav--opened) > span {
		transition:visibility 0s 0.33s ;
		visibility:hidden;
	}
	.nav--secondary ul {
		 transition:visibility 0s, left 0.5s,margin 0.35s;
	}
	.nav--main.mobile-nav--child-opened + .nav--secondary ul {
		transition:visibility 0s 0.33s, left 0.5s,margin 0.35s;
		visibility:hidden;
		
	}
	
	/* The critical communications div is in the wrong place, should be before the header. */
	header[style="margin-top: 3em;"] .content_wrapper, /* hack to piggyback on inline style */
	#critical_communications + header .content_wrapper /* how it should work, if the critcomm was in the right place */{
		top:3em; 
	}
	#critical_communications .critical-text {
		max-height:3.75em; 
		overflow-y:auto;
	}
}
.critical-icon img {
	display:inline-block; 
	max-height:2em;
	margin:0.5em 0;
}
.critcomm-enabled main {
	margin-top: 3em;
}


.sitemapV2 { margin:0.5em 0; }
.sitemapV2 ul,
.sitemapV2 li { margin:0.5em 0; }

/* normalizing tooltips */
.menu-button,
.search-button { z-index:99; }
.menu-button i {display:block; visibility:hidden; font-size: 0.8rem; width: auto; padding: 0.2em 0.5em; left:0; margin: 0; max-width: 8em; margin: 0 -24em 0 0; background: #000; font-weight: normal; font-style: normal; position: absolute; border-radius: 0.25em; white-space: normal; color: #fff; pointer-events:none;  bottom: -1.5em; z-index:99; }
.menu-button:hover i,
.menu-button:focus i { visibility: visible; }
.search-button:hover .search-button-span,
.search-button:focus .search-button-span { visibility: visible; }
.search-button-span { font-size: 0.8rem; width: auto; padding: 0.2em 0.5em; left: auto; right:0; margin: 0; bottom: -1.5em; top: auto; border-radius: 0.25em; }
.social_icons a { position:relative; font-family:inherit !important; font-weight:normal; }
.social_icons a span[class] { display:block; opacity:0; visibility:visible; font-size: 0.8rem !important; width: auto; padding: 0.2em 0.5em; left: 50%; transform: translate(-50%,0.2em); margin: 0; bottom: -1.6em; max-width: 8em; margin: 0 -24em 0 0; transition:opacity 0.1s, transform 0.1s;
 background: #000; font-weight: normal; font-style: normal;position: absolute; border-radius: 0.25em; white-space: normal; top: 100%; color: #fff; pointer-events:none; bottom:auto; }
.social_icons a:focus span[class],
.social_icons a:hover span[class] { display:block; opacity:1; transform: translate(-50%,0.5em);  }

/* 
6/6/22 - fixing "float" nav changes
*/
.nav--main { float:none !important; margin:0; outline:none !important; }
.nav--secondary { float:none !important; margin:0; }

@media (min-width: 48em) and (max-width:75em) {
	body button.search-button {
		margin-left: auto;
		margin-top: 2em;
		order: 6; 
	}
	body .nav--container {
		position: static;
		max-height: none;
		width: auto;
		height: auto;
		overflow: visible;
		align-self: flex-end; 
		flex-grow:unset;
	}
	body nav.nav--main {
		height: auto;
		max-height: none;
		position: static;
		overflow: visible;
		height: 2.5em; 
	}
	body nav.nav--secondary {
		position: absolute;
		right: -0.5em;
		top: 0em;
		margin:0;
	}
	body .nav--main > ul > li, body  .nav--secondary > ul > li {
		padding:0 !important;
	}
}

body .nav--main li a, body .nav--secondary li a {
	font-size:inherit !important;
}

/* patching extra recipe link */
.reciperelatedrecipe .recipe-list-item > a:nth-last-child(2) + a {
	display:none;
}

/* removing outline on the video */
.ytplayer-wrapper .ytplayer img {
	outline:none ;
}
/* Video modal fixes */
#yt_mobile_modal .ytplayer_mobile {
	max-height: calc(100vh - 5em);
}
#yt_mobile_modal .close:focus { outline-color:#fff;	outline-offset: -2px; }
#yt_mobile_modal { opacity:0; z-index:-1; background:rgba(0,0,0,1); position:fixed; height:100%; width:100%; text-align:center; top:0; left:0; pointer-events:none;  -webkit-transition:opacity 0.25s ease-in-out, z-index 0.25s ease-in-out;transition:opacity 0.25s ease-in-out, z-index 0.25s ease-in-out; }
#yt_mobile_modal.playing{z-index:999; opacity:1;pointer-events:all; } #yt_mobile_modal::before { content:""; display:inline-block; width:0; height:100%; vertical-align:middle;  }
#yt_mobile_modal .ytplayer_mobile { position: relative; display:inline-block; width:99%; vertical-align:middle; max-width:1024px;  -webkit-transform:translate(0,5em); transform:translate(0,5em); -webkit-transition:-webkit-transform 0.15s ease-in-out;transition:transform 0.15s ease-in-out;}
#yt_mobile_modal.playing .ytplayer_mobile { -webkit-transform:none; transform:none;  }
#yt_mobile_modal .ytplayer_mobile::before { content:""; display:block; width:100%; height:0; padding-top:54%; }
#yt_mobile_modal iframe { position:absolute; width:100%; height:100%; top:0; left:0; } 
#yt_mobile_modal.playing ~ .main_container,
#yt_mobile_modal.playing ~ .root { visibility:hidden; transition:visibility 0s 0.5s; }
#yt_mobile_modal.playing ~ .skip-content-div { visibility:hidden; transition:visibility 0s 0.5s; }


/* NEW FAQ! */
.faq-question button {
	display:block; 
	width:auto; 
	position:relative; 
	padding:1em 1.83em 1em 0.33em; 
	margin:0 -0.33em; 
	font-size:1.5em; 
	box-shadow:none;
	width:calc(100% - 1.5em); 
	border:none; 
	text-align:inherit;
}
.faq-question button::before {
	content: '';
	display: block;
	font-size: 1rem;
	position: absolute;
	top: 50%;
	border-radius: 0;
	border: none;
	border-bottom: 0.2em solid;
	border-right: 0.2em solid;
	width:1em; 
	height:1em;
	right: 0.75em;
	margin-top: -0.75em;
	transform: scaley(1) rotate(45deg);
	transition: transform 0.1s 0.2s, margin 0.1s 0.2s;
}
.faq-answer {
	overflow:hidden;
	transition:max-height 0.25s; 
}
.faq-answer > div {
	overflow:hidden;
}
.faq-answer > div::after {
	overflow:hidden;
	content:'';
	display:block;
	height:2em;
}
.faq-answer::after {
	height:0;
}
.faq-answer a {
	visibility:hidden;
	transition:visibility 0s 0.25s;
}
.faq-question button[aria-expanded=true] + .faq-answer a, 
.faq-question button[aria-expanded=true] ~ .faq-answer a {
	visibility: visible;
	transition:visibility 0.15s;
}

.faq-question button[aria-expanded=false] + .faq-answer {
	max-height:0;
}
.faq-question button[aria-expanded=true]::before {
	margin-top: -0.2em;
	transform: scaley(-1) rotate(45deg);
	transition: transform 0.1s, margin 0.1s;
}
.faq-question button[aria-expanded=true] + .faq-answer {
	max-height:none;
}

.promotions-featured .promo-new-kfr-inner { padding:14% 0; }
@media (min-width: 48em) {
	.promotions-featured .promo-new-kfr-inner { padding:7% 0; height:86%; }
}
.promotions-featured-row a.promotions-featured-column { }
.promotions-featured-row a.promotions-featured-column:focus { outline-offset:-2px;  }

.aem-AuthorLayer-edit .markuptext,
.aem-AuthorLayer-Edit .markuptext,
.aem-AuthorLayer-structure .markuptext { border:2px dotted #ddd; min-height:2em; }

/* slider blink bug fix */
.tns-slider[style*='transition-duration:0s'],
.tns-slider[style*='transition-duration: 0s'] {
    transition-duration:0.001s !important
}
.js-product-thumbnails { display:inline-block !important; }
.js-product-thumbnails > div:first-child:last-child { position:absolute; left:-999em; visibility:hidden; }
.product-thumbnails-container { margin:0; }
.product-thumbnails-container .tns-ovh { padding:0.25em; margin:-0.25em; }
.product-slider-aspect-ratio img { object-fit:contain; }

/* .tns-controls { position: absolute; height: 100%; width: 100%; z-index: 9; pointer-events: none; outline-offset:-2px; } */
/* .tns-controls button { pointer-events: auto; outline-offset:-2px; } */

.close, .close:hover, .close:focus { opacity:1; }

select { text-align:left; }

html {
	scroll-padding-top:6.5em;
}
@media (min-width: 48em) {
	html {
		scroll-padding-top:5.5em;
	}
}


/* common brand css issue */
header .nav--mobile-extras p {
	margin:1rem; 
}

.nav--mobile-extras a[href*="//www.kellanova.com/us/en/privacy-choices.html"]::after,
.nav--mobile-extras a[href*="//www.kellanova.com/us/en/do-not-sell-or-share.html"]::after,
.footer-nav--secondary a[href*="//www.kellanova.com/us/en/privacy-choices.html"]::after,
.footer-nav--secondary a[href*="//www.kellanova.com/us/en/do-not-sell-or-share.html"]::after {
	content:'';
	transform: none;
	opacity: 1;
	top: auto;
	display:inline-block;
	vertical-align:middle;
	margin:0 0 0 0.25em;
	background:url(/content/dam/engage/images/privacyoptions.svg) center / contain no-repeat;
	width:2em; height:1em;
}



/* hiding tiktok links */
header .social_icons a[href*="tiktok"], footer .social_icons a[href*="tiktok"] {
	display:none;
}