/*
Theme Name: Old Croc QNY
Author: QNY Creative
Author URI: http://qnycreative.com
Version: 1.0
*/

/* fonts */
@import url("https://use.typekit.net/ulz0xke.css");
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');

@font-face {
    font-family: 'Brigends';
    src: url('fonts/BrigendsExpandedRegular.woff2?v=2') format('woff2'), url('fonts/BrigendsExpandedRegular.woff?v=2') format('woff');
    font-weight: normal; font-style: normal; font-display: swap;
}

html, *{ font-size: 26px; font-family: "work-sans", sans-serif; font-weight: 400; font-style: normal;}
body{ color: #000;}
h1, h2 , h3, h4, h5, h1 span, h2 span, h3 span, h4 span, h5 span{ font-family: 'Brigends', "oswald", sans-serif; font-weight: 400;}

/* wp admin styles */
body#tinymce{ margin:0; padding:0; border:none;}

/* wp basic styles */
.entry-content img {margin: 0 0 1.5em 0;}
div.alignleft, img.alignleft {display: inline-block;float: left;margin-right: 1em;margin-bottom: 1em;}
div.alignright, img.alignright {display: inline-block;float: right;margin-left: 1em;margin-top: 1em;}
div.aligncenter, img.aligncenter {clear: both;display: block;margin-left: auto;margin-right: auto;}
html{height: 100%;}
a img {border:none;}
p {	padding-top:0.1em;padding-bottom:0.1em;}
em{font-style: italic;}
.size-auto, .size-full, .size-large, .size-medium, .size-thumbnail {max-width: 100%;height: auto;}
.size-full{ display: block;}
.center{text-align: center;}
#page_content_wrapper p {padding-top:0.5em;padding-bottom:0.5em;}
#page_content_wrapper p:empty{padding: 0 !important;margin: 0 !important;}
#footer p {padding-top:0.5em;padding-bottom:0.5em;}
html, body {min-height: 100%;}
em { font-style: italic; }
::selection {background: #f15c22; color: #000;}
table{border-spacing: 0;}
.sticky{background: #ffffe0;padding: 30px 20px 20px 20px;border: 1px solid #e6db55 !important;box-sizing: border-box;}
.marginright{margin-right: 7px;}
img.alignright {float:right; margin:0 0 1em 1em}
img.alignleft {float:left; margin:0 1em 1em 0}
img.aligncenter {display: block; margin-left: auto; margin-right: auto}
a img.alignright {	float:right; margin:0 0 1em 1em}
a img.alignleft {	float:left; margin:0 1em 1em 0}
a img.aligncenter {display: block; margin-left: auto; margin-right: auto}
.sticky, .bypostauthor { font-weight: bold; }

/* common styles */
html { overflow-x: hidden; }
body{ margin:0; padding:0; min-width:1280px; overflow-x: hidden; position: relative; background: #fff;}
.contentCenter{ width:1280px; margin:0 auto;}
.contentCenter:after{ content: ''; clear: both; float: none; width: 100%; height: 0;}
a{ color:inherit;}
a img{ border:none; display:block;}
.displayTable{ display:table; width:100%; height:100%;}
.tableCell{ display:table-cell; width:100%; height:100%; vertical-align:middle;}
.button, .shopify-buy__btn{ text-decoration: none; color: #000; border:none; background: #ffda00; border-radius: 0px; padding: 5px 31px 9px; display: inline-block; cursor: pointer; transition: 0.3s ease; font-family: "oswald", sans-serif !important; font-size: 0.962rem !important; font-weight: 600; text-transform: uppercase;} 
.button.active,
.button:hover,
.shopify-buy__btn:active,
.shopify-buy__btn:hover{ background: #f15d22; color: #fff;}
.clear{ clear:both;}
.hidden{ display: none !important;}
.row{ margin: 0 -15px;}
.row:after,
footer .left ul:after{ content: ''; width: 100%; clear: both; display: block;}
.column1{ width: calc(100% - 30px); float: left; margin: 0 15px;}
.column2{ width: calc(50% - 30px); float: left; margin: 0 15px;}
.column3{ width: calc(33.3333% - 30px); float: left; margin: 0 15px;}
.column4{ width: calc(25% - 30px); float: left; margin: 0 15px;}
.column5{ width: calc(20% - 30px); float: left; margin: 0 15px;}
.row img{ display: block; margin: 0 auto 30px;}
strong, b{ font-weight:bold;}

.black{color: #000 !important;}

/* preload */
.preloadDiv{ width:0; height:0; overflow:hidden; }
.showIphone,
.showIpad,
.showBigDesktop,
.hideDesktop{ display:none;}
.showDesktop{}

/* header */
header{ backdrop-filter: blur(10px); transition: 0.3s ease; box-sizing: border-box; height: 96px; background:rgba(43,40,40,0.7); padding: 26px 0; position: fixed; left: 0; top: 0; width: 100%; z-index: 100; }
header .contentCenter{ position: relative;}
header *{ color: #fff; font-family: "oswald", sans-serif; font-size: 0.962rem; font-weight: 600;}
body.admin-bar header{ top: 32px;}
header{ top: 0;}
header ul{ margin: 0; padding: 0; list-style-type: none; display: block; text-align: center;}
header ul li{ width: 140px; text-transform: uppercase; display: inline-block; margin: 0 10px; vertical-align: top;}
header ul li.logo, footer .logo{ margin: -26px 10px 0; aspect-ratio: 238/188; background:url(images/logo.svg) no-repeat center center / contain; width: 251px; overflow: hidden; text-indent: -5000px; position: relative;}
header ul li.logo{ transition: 0.3s ease;}
header ul li.logo a{ display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
header a, footer a{ text-decoration: none;}
header a{ transition: 0.3s ease;}
header a:hover, footer a:hover{ color: #ffda00;}

body.scrolled header{ background: rgba(0,0,0,0.8); }
body.scrolled header ul li.logo{ width: 150px;}


/* footer */
footer{ }
footer .top{ background: #232323 url(images/footerBg.png) no-repeat center center / 70% auto; color: #fff; padding: 60px 0;}
footer .left{ width: 150px; float: left; margin: 0 40px 0 0;}
footer .center{ padding: 42px 0 0 0; width: 735px; float: left;}
footer .right{ width: 355px; float: right; text-align: right;}
footer .logo{ display: block; margin: 0 0 30px; width: 150px;}
footer .menu{ list-style-type: none; padding: 0; display: block; text-align: left; margin: 0 10px 10px 0;}
footer .menu *{ font-family: "oswald", sans-serif; font-size: 0.762rem; font-weight: 600;}
footer .menu li{ text-transform: uppercase; display: inline-block; margin: 0 15px 0 0; }
footer .copy{ color: #fff; background: #181818; padding: 30px 0; text-align: center; font-size: 0.6rem;}
footer .copy *{ font-size: 0.6rem;}
footer .socialLinks{ text-align: right; margin: 30px 0 0;}

.socialLinks .instagram, .instagramIcon{ vertical-align: top; transform: translateY(4px); margin: 0 0 0 14px; width: 29px; aspect-ratio: 1/1; background: url(images/insta.svg) no-repeat center center / contain; display: inline-block;}
.socialLinks .facebook, .facebookIcon{ vertical-align: top; transform: translateY(4px);margin: 0 0 0 14px; width: 29px; aspect-ratio: 1/1;  background: url(images/fb.svg) no-repeat center center / contain; display: inline-block;}
.instagramIcon, .facebookIcon{ margin: 0 20px; }

footer .newsletter{ }
footer .newsletter *{ font-family: "oswald", sans-serif; font-size: 0.762rem; font-weight: 600;}
footer .newsletter label{ color: #f6d209; text-transform: uppercase;}
footer .newsletter form{ position: relative; z-index: 4;}
footer .newsletter form input{ vertical-align: text-top; height: 54px; border: 2px solid #fff; box-sizing: border-box; padding: 0 10px; background: transparent; width: 220px; color: #fff;}
footer .newsletter .sendForm{ cursor: pointer; vertical-align: text-top; display: inline-block; padding:0 20px; line-height: 54px; text-transform: uppercase; height: 54px; background: #fff; color: #232323;}
footer .newsletter .sendForm:hover{ color: #fff; background: #cb3900;}
.emailContainer { margin: 17px 0 0;}
.divMessage{ display: none; margin:10px 0 0 0;}

/* section */
section{ position: relative; padding: 180px 0 0 0; }
section:has(.pageHeader),
section:has(.sweepstakesHeader),
section:has(.bannerImageText){ padding: 0;}
body:has(.sweepstakesHeader){ background:#000;}

/* pageHeader */
.pageHeader{ height: 820px; background: #193c2b; color: #f15d22; /*rgba(3, 6, 4, 0.7);*/ position: relative; overflow: hidden;}
.pageHeader *{ font-family: Brigends, "oswald", sans-serif; font-size: 2.231rem; line-height: 1;}
.pageHeader .displayTable{ background: url(images/Halftone.png) no-repeat center center / cover;}
.pageHeader .tableCell{ vertical-align: top;}
.pageHeader h1{ color: #fff; font-size: 2.058rem; margin: 275px 0 27px;}
.pageHeader h1 em{ font-family: inherit; color: #f6d209; font-size: 5.442rem; font-style: normal; line-height: 0.82;}
.pageHeader h1 span{font-size: 3.519rem;}
.pageHeader .contentCenter{ padding: 0 506px 0 0; box-sizing: border-box;}
.pageHeader .image{ overflow: visible;}
.pageHeader .image .theImg{ width:100px; height: 100px; background-repeat: no-repeat; background-size: contain; background-color: transparent; position: relative; left:auto; top: auto; right: auto;}
.pageHeader .image .theImg.img-0{ width: 512px; height: auto; aspect-ratio: 1195/1489; position: absolute; left: calc(50% + 72px); bottom: 0; z-index: 3;}
.pageHeader .image .theImg.img-1{ animation: levitate 5s infinite;  width: 317px; height: auto; aspect-ratio: 752/622; position: absolute; left: calc(50% + -11px); top: 515px; z-index: 4;}
.pageHeader .image .theImg.img-2{ animation: levitate 7s infinite;  width: 256px; height: auto; aspect-ratio: 610/514; position: absolute; left: calc(50% + 348px); top: 76px; z-index: 2;}
.pageHeader .button{ background: #f15d22; color: #fff; padding: 16px 24px;}

@keyframes levitate {
	0%   { transform: translateY(0) ;}
	50%   {  transform: translateY(25px) ;}
	100%   {  transform: translateY(0);}
}

/* textWithImage */
.textWithImage{ margin: 0 auto; }
.textWithImage .flex{ display: flex; flex-direction: row; align-items:stretch;}
.textWithImage.Right .flex{ flex-direction: row-reverse;}
.textWithImage .image{ transition: 0.3s ease; width: 50%; box-sizing: border-box; padding: 0;  position: relative;  }
.textWithImage .image .theImg{ transition: 0.3s ease; width:50vw; height: 100%; position: absolute; right: 0; top: 0; background: #000 no-repeat center center / cover;}
.textWithImage .image .theImg:hover{ transform: scale(1.02); }
.textWithImage.Right .image .theImg{ right: auto; left: 0; top: 0;}
.textWithImage .text{ color: inherit; width: 50%; box-sizing: border-box; padding: 90px 0; position: relative; line-height: 1.25; }
.textWithImage .text .container{ padding: 0 0 0 65px; }
.textWithImage.Right .text .container{ padding: 0 65px 0 0; }
.textWithImage h2{ font-size: 1.712rem; line-height: 0.89; color: #f6d209; margin: 0 auto -9px;}
.textWithImage .text p:last-child{ margin-bottom: 0;}

/* fullwidthText */
.fullwidthText{ margin: 60px auto; }
.fullwidthText h2{ font-size: 1.712rem; color: #f6d209; line-height: 1;}
.fullwidthText h2:first-child{ margin-top: 0;}
.fullwidthText img.alignleft{ float: left; margin: 0 40px 40px 0; width: calc(50% - 40px); display: block;}
.fullwidthText img.alignright{ float: right; margin: 0 0 40px 40px; width: calc(50% - 40px); display: block;}
.fullwidthText.fwt-1.p-148 h2{ color: #000; font-size: 1.3rem;}

/* bgOpen */
.bgOpen{ margin: -1px auto; padding: 1px 0; position: relative; overflow: hidden;}
.bgOpen[data-bg=halftone]:before{ content: ''; width: 100%; height: 100%; position: absolute; background: url(images/Halftone.png) no-repeat center center / cover; z-index: 1;}
.bgOpen[data-bg=halftone] > div{ position: relative; z-index: 2;}
.bgOpen[data-bg=grayTexture]:before{ content: ''; width: 100%; height: 100%; position: absolute; background: url(images/grayBgTexture.jpg) repeat center center; z-index: 1;}
.bgOpen[data-bg=grayTexture] > div{ position: relative; z-index: 2;}

/* imageLinks */
.imageLinks{ margin: -45px auto 45px;}
.imageLinks .contentCenter{ width: 1116px;}
.imageLinks .row{ margin: 0 -25px;}
.imageLinks .box{ width: calc(50% - 50px); margin: 25px; aspect-ratio:1/1; border-radius: 27px; float: left; position: relative; overflow: hidden;}
.imageLinks .box .theImg{ background: #000 no-repeat center center / cover; position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: 0.3s ease;}
.imageLinks .box:hover .theImg{ transform: scale(1.025);}

/* bannerImageText */
.bannerImageText{ margin: 0; position: relative; padding: 300px 0 130px; background: #000 no-repeat center center / cover; color: #fff; }
.bannerImageText .contentCenter{ box-sizing: border-box; padding: 0; text-align: center; }
.bannerImageText *{ font-family: Brigends, "oswald", sans-serif; font-size: 1.519rem; line-height: 1;}
.bannerImageText:before{ content: ''; width: 100%; position: absolute; height: 100%; left: 0; top: 0; background: linear-gradient(to right,rgba(0,0,0,0.78) 40%,rgba(0,0,0,0) 100%);}
.bannerImageText .contentCenter{ position: relative; z-index: 4;}
.bannerImageText h1{ color: #fff; font-size: 2.231rem; line-height: 0.88; margin: 0 0 21px;}
.bannerImageText h2{ color: #f6d209; font-size: 2.231rem; line-height: 0.88; margin: 0 0 21px;}
.bannerImageText .hash{ padding: 31px 0 0 0;}
body.home .bannerImageText{ padding: 130px 0;  }
body.home .bannerImageText .contentCenter{ padding: 0 433px 0 0;  }

/* featuredRecipe */
.featuredRecipe{ margin: -21px auto 90px; position: relative;}
.featuredRecipe *{ font-family: Brigends, "oswald", sans-serif; font-size: 1.192rem; line-height: 1.36;}
.featuredRecipe:after{ content: ''; position: absolute; left: calc(50% - 622px); aspect-ratio: 962/1064; width: 469px; bottom: -149px; background: url(images/hand.png) no-repeat center center / contain;}

.featuredRecipe .box{ display: block; width: 100%; position: relative; height: 535px; border-radius: 27px; overflow: hidden;}
.featuredRecipe .box .theImg{ background: #000 no-repeat center center / cover; aspect-ratio:1/1; position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: 0.3s ease;}
.featuredRecipe .box:hover .theImg{ transform: scale(1.025);}
.featuredRecipe  .theText {  text-transform: uppercase;  position: absolute; right: 41px; bottom: 37px; color: #fff;}
.featuredRecipe  .theText span{ background: #cb3900; padding: 0 13px;} 

.featuredRecipe.multiple{ margin: -21px auto 60px;}
.featuredRecipe.multiple .box{ overflow: visible;  text-decoration: none; border-radius: 0; height: auto; margin: 0 15px; width: calc(33.3333% - 30px); float: left;}
.featuredRecipe.multiple .theText{ right: auto; bottom: auto; position: relative; text-align: center; padding: 20px 0 0 0;}
.featuredRecipe.multiple:after{ display: none;}
.featuredRecipe.multiple .theText span{ display: block; line-height: 1; font-size: 1rem; background: none; color: #000;}
.featuredRecipe.multiple .box .theImg{ border-radius: 27px; position: relative; }

/* blockGroup */
.blockGroup{ margin: -1px auto; padding: 1px 0; position: relative; }
.blockGroup.bg145{ background: url(images/slate-narrow.jpg) no-repeat center top / cover;}

/* instagramImages */
.instagramImages{ margin: 60px auto; text-align: center;}
.instagramImages .row{ margin: 0 -15px;}
.instagramImages .row a{ text-decoration: none; width: calc(25% - 30px); float: left; display: block; margin: 0 15px; position: relative; aspect-ratio: 1/1; text-indent: -5000px; overflow: hidden; transition: 0.3s ease; background: #ccc no-repeat center center / cover;}
.instagramImages .row a:hover{ transform: scale(1.05);}

.fullwidthText.fwt-3.p-145 h2{ font-size: 1.3rem;}

/* sweepstakes */
.sweepstakesHeader{ background: no-repeat center bottom / cover; aspect-ratio:1920/1080; margin: 0 auto; width: 100%; position: relative;}
.sweepstakesHeader h1{ color: #fff; font-size: 2.2rem; line-height: 1;}
.sweepstakesHeader h1 span{ color: #fff000; display: block; font-size: inherit;}
.sweepstakesHeader .tableCell{ vertical-align: top; padding: 162px 0 0 0;}
.sweepstakesHeader .image{ overflow: visible;}
.sweepstakesHeader .image .theImg{ width:100px; height: 100px; background-repeat: no-repeat; background-size: contain; background-color: transparent; position: relative; left:auto; top: auto; right: auto;}
.sweepstakesHeader .image .theImg.img-0{ width: 721px; height: auto; aspect-ratio: 2422/1974; position: absolute; left: calc(50% + -281px); bottom: 60px; z-index: 3;}

.fullwidthText h2.orangeTitle{ color: #d09b0d; position: relative; font-size: 1.55rem;}
.fullwidthText h2.orangeTitle:after{ content: ''; width: 622px; left: 50%; bottom: -16px; background: url(images/orangeTitle.png) no-repeat center center / contain; position: absolute; aspect-ratio: 2082/48; transform: translateX(-50%); }
.fullwidthText.fwt-1.p-315 .size-full { width: 1050px; margin: 0 auto;}
.fullwidthText.fwt-1.p-315{ margin: 0 auto 60px; line-height:1.5; }
.fullwidthText.fwt-1.p-315 .button{ margin:0 auto 37px; background: #f15d22; color: #fff; font-family: Brigends, "oswald", sans-serif !important; font-size: 1.192rem !important;}
.fullwidthText.fwt-2.p-315{ color: #fff; font-size: 1rem;}
.fullwidthText.fwt-2.p-315 .contentCenter{ width: 840px; }
.fullwidthText.fwt-2.p-315 *{ font-size: 1.45rem;}
.fullwidthText.fwt-2.p-315 h2.orangeTitle{ margin: 0 0 63px; }
.fullwidthText.fwt-2.p-315 h2.orangeTitle:after{ width: 452px; left: 0; transform: none;}
.fullwidthText.fwt-2.p-315 .small{ font-size: 1.16rem;}
.fullwidthText.p-8 h2 { font-size: 1.3rem; color: #b4812c;}
	
/* sweepsForm */
.sweepsForm { margin: 60px auto; }
.sweepsForm *{ font-family: "oswald", sans-serif; font-size: 0.9rem;  }
.sweepsForm form{ background: rgba(255,255,255,0.85); border-radius: 27px; padding: 30px; box-sizing: border-box;}
.sweepsForm form label{ color: #254737; text-transform: uppercase; font-weight: 600; margin: 0 0 7px; display: block;}
.sweepsForm form label span{ color: #cf0000;}
.sweepsForm form label.checkbox{ text-transform: none; font-weight: 400;}
.sweepsForm form label input{ width: 26px; aspect-ratio:1/1; margin:0 10px 0 0; display: inline-block;}
.sweepsForm form select,
.sweepsForm form input[type=text],
.sweepsForm form textarea{ color: #666; resize: none; outline: none; line-height: 1; display: block; margin: 0 0 25px; box-sizing: border-box; padding: 0 10px; height: 56px; border: 1px solid #707070; width: 100%; border-radius: 0;}
.sweepsForm form textarea{ height: 150px; padding: 6px 10px;}
.sweepsForm form .button{ width: 150px; background: #f15d22; color: #fff; margin: 30px auto 0; padding: 12px 0; display: block; text-align: center;}
.sweepsForm form .button:hover{ background: #000; }
.sweepsForm .divMessage{ display: none; margin: 20px 0 0 0; font-family: "oswald", sans-serif; font-size: 0.9rem; text-align: center;}
.sweepsForm .divMessage.error{ color: #cf0000; }
.sweepsForm .divMessag e.success{ color:#000;}
.sweepsForm .redBorder{ border-color: #cf0000 !important;}
.sweepsForm .successContainer{ display: none; color: #254737;}
.sweepsForm .successContainer p{ margin: 0;}

/* paginator */
.paginatorQuery{ text-align:center; border-top: 1px solid #ccc; margin: 30px 0 0; padding: 30px 0 0;}
.paginatorQuery a, .paginatorQuery span{ font-family: "oswald", sans-serif; font-weight: 600; border: 1px solid #b4812c; padding: 6px 8px; border-radius: 3px; display: inline-block; text-decoration: none; transition: 0.3s ease; color: #b4812c;}
.paginatorQuery span.dots{ border: none;}
.paginatorQuery span.current, .paginatorQuery a:hover{ color: #fff; background: #b4812c;}

/* productsList */
.productsList{ margin: 60px auto; text-align: center;}
.productsList h2{ text-align: center; font-family: "oswald", sans-serif; font-weight: bold; text-transform: uppercase; color: #b4812c; font-size: 1.4rem; margin:30px 0; }
.productsList .products{ margin: 30px -15px 0;}
.productsList .products .product{ vertical-align: top; text-decoration: none; margin: 0 15px 30px; display: inline-block; width: calc(25% - 30px); transition: 0.3s ease;}
.productsList .category.c5 .products .product{  width: calc(33.3333% - 30px);}
.productsList .products .product:hover{ transform: scale(1.05);}
.productsList .products .product h2{ color: #212121; font-size: 0.9rem;}
.productsList .products:nth-child(4n+1){ clear: both;}
.productsList .products .image{ display: block; width: 90%; margin: 0 auto; aspect-ratio:1/1; position: relative; }
.productsList .products .image .img{ width: 100%; background:no-repeat center center / cover; position: absolute; height: 100%; transition: 0.3s ease;}
.productsList .category{ border-bottom: 1px solid #ccc; padding: 0 0 30px; margin: 0 auto 60px;}
.productsList .category:last-child{ border-bottom: none; padding: 0; margin:0;}

/* recipeDetail */
body.single-recipe .bannerImageText,
body.single-post .bannerImageText{ padding: 160px 0;}
.recipeDetail{ margin:60px auto;}
.recipeDetail h1{ text-transform: uppercase; font-family: "oswald", sans-serif; font-weight: bold; font-size: 1.4rem; color: #b4812c; margin: 0 0 40px;}
.recipeDetail .text{ line-height: 1.2; float:right; width: 65%; padding: 0 0 0 40px; box-sizing: border-box;}
.recipeDetail .text .icons{ padding: 12px 10px 8px; border-radius: 14px; margin: 0 0 30px; border: solid 1px #000;}
.recipeDetail .text .icons span{ font-family: "oswald", sans-serif; font-weight: 600; font-size: 0.7rem;}
.recipeDetail .text h2, .recipeDetail .text h3{ font-family: "oswald", sans-serif; font-weight: bold; text-transform: uppercase; color: #000; font-size: 1.2rem; margin:30px 0; text-align: left; }
.recipeDetail .images{ float: left; width: 35%; text-align: center;}
.recipeDetail .images img{ display: block; width: 100%; margin: 0 0 40px;}
.recipeDetail .textC{ margin: 10px 0 30px;}
.recipeHeader .buttons{ vertical-align: top; margin: 40px auto 0;}
.recipeHeader .buttons .button{ vertical-align: top;}
.shareButtons{ vertical-align: top; text-transform: uppercase; display: inline-block; padding: 15px 0 0; line-height: 1; font-weight: 800;  letter-spacing: 1.6px; text-align: center; color: #000;}
.shareButtons .shareFb{ vertical-align: middle; display: inline-block; width: 18px; height: 18px; background: url(images/shareFb.svg) no-repeat center center / contain; margin: -5px 5px 0;}
.shareButtons .shareTw{ vertical-align: middle; display: inline-block; width: 18px; height: 18px; background: url(images/shareTw.svg) no-repeat center center / contain; margin: -5px 5px 0;}
.shareButtons .shareMail{ vertical-align: middle; display: inline-block; width: 18px; height: 18px; background: url(images/shareMail.svg) no-repeat center center / contain; margin: -5px 5px 0;}
.shareButtons .sharePin{ vertical-align: middle; display: inline-block; width: 18px; height: 18px; background: url(images/pin.svg) no-repeat center center / contain; margin: -5px 5px 0;}
.time{ vertical-align: middle; margin-right: 22px;}
.time:before{ content: ''; display: inline-block; width: 27px; height: 27px; background: url(images/clockIcon.svg) no-repeat center center / contain; margin:0 13px 0 0; vertical-align: middle; transform: translateY(-2px);}
.servings{ vertical-align: middle; margin-right: 22px;}
.servings:before{ content: ''; display: inline-block; width: 27px; height: 27px; background: url(images/servings.svg) no-repeat center center / contain; margin:0 13px 0 0; vertical-align: middle; transform: translateY(-2px);}

/* productDetail */
.recipeDetail.asProduct{}
.recipeDetail.asProduct .text{ width: 55%;}
.recipeDetail.asProduct .images{ width: 45%;}
.recipeDetail.asProduct .nutrition{ margin: 60px auto 0; font-size: 16px;}
.recipeDetail.asProduct .nutrition img{ display: block; max-width: 100%;}
.recipeDetail.asProduct .nutrition *{ color: #000;  font-size: 16px; line-height: 1.6;}
.recipeDetail.asProduct .nutrition h2{ margin-bottom: 15px;}

/* blog Detail */
.recipeDetail.asBlog{}
.recipeDetail.asBlog h1{ margin: 0 0 10px;}
.recipeDetail.asBlog .date{ margin: 0 0 30px;}
.recipeDetail.asBlog .left{ width: 75%; float: left;}
.recipeDetail.asBlog .right{ color: #212121; font-size: 0.9rem; width: 25%; box-sizing: border-box; padding: 0 0 0 40px; float: right;}
.recipeDetail.asBlog .text,
.recipeDetail.asBlog .text .contentCenter{ width: 100%;}
.recipeDetail.asBlog .text{ padding: 0;}
.recipeDetail.asBlog .topBanner{ background: #ccc no-repeat center center / cover; width: 100%; height: 600px;}
.recipeDetail.asBlog .right h3{ text-transform: uppercase; font-family: "oswald", sans-serif; color: #b4812c; font-size: 1.2rem; font-weight: bold;}
.recipeDetail.asBlog .right a:hover{ color: #b4812c;}
.recipeDetail iframe{ border: none; width: 100%; height: auto; aspect-ratio:800/450;}

.recipeDetail.asBlog .textWithImage{ margin: 60px auto;}
.recipeDetail.asBlog .textWithImage .image .theImg{ width: 100%; left: 0;}
.recipeDetail.asBlog .textWithImage .text{ width: 50%;}
.recipeDetail.asBlog .textWithImage .text .container { padding: 0 0 0 30px;}
.recipeDetail.asBlog .textWithImage.Right .text .container { padding: 0 30px 0 0;}

/* productsSlider */
.productsSlider{ margin: 60px auto; color: #fff;}
.productsSlider .contentCenter{ box-sizing: border-box; padding: 0 10px;}
.productsSlider .arrowRight,
.productsSlider .arrowLeft{ transition: 0.3s ease; margin: 92px 0 0 0; width: 50px; border-radius: 50%; aspect-ratio:1/1; background: #f6d209 url(images/leftArrow.svg) no-repeat calc(50% - 3px) center / 40% auto; cursor: pointer; float: left;}
.productsSlider .arrowRight:hover,
.productsSlider .arrowLeft:hover{ background-color: #fff;}
.productsSlider .arrowRight{ transform: scaleX(-1);}
.productsSlider .box{ width: 100%; margin: 0; padding: 0 10px; box-sizing: border-box;}
.productsSlider ul{ position: absolute; left: 0; top: 0; margin: 0; padding: 0; list-style: none; width: 9999px; height: 100%;}
.productsSlider ul li{ text-align: center; float: left; width: 360px; height: 100%;}
.productsSlider ul li .image{ width: 100%; aspect-ratio:1/0.7; margin: 0 0 30px; position: relative;} 
.productsSlider ul li .image .img{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: no-repeat center center / contain;}
.productsSlider ul li a{ text-decoration: none;}
.productsSlider .wrapper{ transition: 0.3s ease; position: relative; width: calc(100% - 140px); margin: 0 20px; float: left; overflow: hidden; height: 100px;}
.productsSlider ul li .text{ padding: 0 10px;}

/* recipesList */
.recipesList{ margin: 60px auto;}
.recipesList .icons span{ font-family: "oswald", sans-serif; font-weight: 600; font-size: 0.7rem;}
.recipesList .row{ margin:0 -30px;}
.recipesList .recipe{ text-decoration: none; float: left; margin: 0 15px 30px; width: calc(33.3333% - 30px);}
.recipesList .recipe a{ text-decoration: none;}
.recipesList .recipe a:hover{ text-decoration: underline;}
.recipesList .recipe:nth-child(3n+1){ clear: both;}
.recipesList .recipe .image{ display: block; border-radius: 0; border: 1px solid #ddd; overflow: hidden; width: 100%; aspect-ratio:1/0.6; background: #ccc ; position: relative; }
.recipesList .recipe .image .img{ width: 100%; background:no-repeat center center / cover; position: absolute; height: 100%; transition: 0.3s ease;}
.recipesList .recipe .text{ text-align: center; padding: 10px 0 0; }
.recipesList .recipe h2{ text-transform: uppercase; font-weight: bold; font-family: "oswald", sans-serif; color: #b4812c; margin: 0 0 10px; font-size: 1rem;}
.recipesList .recipe:hover .image .img{ transform: scale(1.05);}
.recipesList .recipe .date{ margin: 0 0 10px;}

/* blogList */
.recipesList.asBlog .recipe{ width: calc(50% - 30px);}
.recipesList.asBlog .recipe h2{ text-transform: uppercase;}
.recipesList.asBlog .recipe:nth-child(3n+1){ clear: none;}
.recipesList.asBlog .recipe:nth-child(2n+1){ clear: both;}
.date{ color: #666; font-size: 0.8rem;}
.recipesList.asBlog .date{ margin-top: 15px;}

/* product detail nutrition */
.nflc .nutrition-table { margin:0!important; padding:0; list-style:none; border:1px solid rgba(0,0,0,.24); font-size:13px; line-height:1.5385; word-wrap:break-word; color:rgba(0,0,0,.87)}
.nflc .nutrition-table>li { position:relative; overflow:hidden; list-style:none; margin:0!important; padding:0; border-bottom:1px solid rgba(0,0,0,.12)}
.nflc .nutrition-table>li.nt-header { border-bottom-color:rgba(0,0,0,.24)}
.nflc .nutrition-table>li>span { display:block; width:33%; float:left; padding:4px 8px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box}
.nflc .nutrition-table>li>span>b { color:red; font-weight:400}
.nflc .nutrition-table>li>.col-80 { width:80%}
.nflc .nutrition-table>li>.col-70 { width:70%}
.nflc .nutrition-table>li>.col-67 { width:67%}
.nflc .nutrition-table>li>.col-60 { width:60%}
.nflc .nutrition-table>li>.col-50 { width:50%}
.nflc .nutrition-table>li>.col-45 { width:45%}
.nflc .nutrition-table>li>.col-40 { width:40%}
.nflc .nutrition-table>li>.col-33 { width:33% }
.nflc .nutrition-table>li>.col-30 { width:30% }
.nflc .nutrition-table>li>.col-20 { width:20%}
.nflc .nutrition-table>li>.col-22 { width:22%}
.nflc .nutrition-table>li.nt-header>.nt-title { float:none; width:100%; padding:6px 8px}
.nflc .nutrition-table>li.nt-footer { font-size:12px; line-height:18px; padding:8px; color:#757575}
.nflc .nutrition-table>li.nt-two-col>.nt-label { width:67%}
.nflc .nutrition-table>li.nt-two-col>.nt-value { width:33%}
.nflc .nutrition-table>li:last-child { border:none}
.nflc .nutrition-table>li.nt-four-col>span { width:25%}
.nflc .nutrition-table .nt-title { display:block; font-size:24px; line-height:28px; font-weight:700; margin:0}
.nflc .nutrition-table .nt-value,
.nflc .nutrition-table .pdv-label { text-align:right}
.nflc .nutrition-table .font-bold { font-weight:600}
.nflc .nutrition-table .nt-head { font-size:12px; line-height:16px; color:rgba(0,0,0,.62)}
.nflc .nutrition-table .nt-head>span { padding:6px 8px}
.nflc .nutrition-table .nt-sep { border-bottom:1px solid rgba(0,0,0,.24)}
.nflc .nutrition-table .nt-sublevel-1 .nt-label { padding-left:20px}
.nflc .nutrition-table .nt-sublevel-2 .nt-label { padding-left:36px}
.nflc .nutrition-table .nt-sublevel-3 .nt-label { padding-left:52px}
.nflc.flat .nutrition-table { border:0; overflow:hidden}
.nflc.flat .nutrition-table>li,
.nflc.flat .nutrition-table>li:last-child,
.nflc.flat .nutrition-table>li.nt-header,
.nflc.flat .nutrition-table>li.nt-sep { border:0}
.nflc.flat .nutrition-table .nt-head { color:rgba(0,0,0,.87)}
.nflc.flat.striped .nutrition-table>li:nth-child(2n+1) { background:rgba(0,0,0,5%)}
.nflc.flat .nutrition-table>li>.nt-amount { background:#ffe0b2}
.nflc.flat.striped .nutrition-table>li:nth-child(2n)>.nt-amount { background:#fff3e0}
.nflc.flat .nutrition-table>li>.nt-value { background:#bbdefb}
.nflc.flat.striped .nutrition-table>li:nth-child(2n)>.nt-value { background:#e3f2fd}
.nflc.flat .nutrition-table>li>.nt-sdv { background:#c8e6c9}
.nflc.flat.striped .nutrition-table>li:nth-child(2n)>.nt-sdv { background:#e8f5e9}
.nflc.flat .nutrition-table>li.nt-footer { color:#757575; background:#fff}
.nflc.flat .nutrition-table .nt-title { background:#fff59d}
.nflc.flat .nutrition-table .nt-head>.nutrient-label { background:#9e9e9e; color:#fff}
.nflc.flat .nutrition-table .nt-head>.amount-label { background:#f57c00; color:#fff}
.nflc.flat .nutrition-table .nt-head>.sdv-label { background:#43a047; color:#fff}
.nflc.flat .nutrition-table .nt-head>.pdv-label { background:#448aff; color:#fff}
.nflc.std .nutrition-table { padding:0 4px; border-color:#000; color:#000}
.nflc.std .nutrition-table>li { color:inherit; border-bottom:1px dotted #000}
.nflc.std .nutrition-table>.b-0 { border:0}
.nflc.std .nutrition-table>li.nt-header>.nt-title { margin:0; padding:0; font-size:30px; line-height:36px; font-weight:700}
.nflc.std .nutrition-table>li>span { padding:0}
.nflc.std .nutrition-table>li.nt-head>span { padding:2px 0}
.nflc.std .nutrition-table .nt-head { font-size:11px; line-height:16px; color:#000}
.nflc.std .nutrition-table .nt-sublevel-1 .nt-label { padding-left:12px}
.nflc.std .nutrition-table>li.nt-footer { font-size:11px; line-height:16px; padding:2px 0; color:#000}
.nflc.std .nutrition-table .nt-sublevel-2 .nt-label { padding-left:24px}
.nflc.std .nutrition-table .nt-sublevel-3 .nt-label { padding-left:36px}
.nflc.std .nutrition-table li.sep-4 { border-bottom:4px solid}
.nflc.std .nutrition-table li.sep-8 { border-bottom:8px solid}
.nflc.tabular .nutrition-table>li>span:not(:last-child) { border-right:1px solid rgba(0,0,0,.12)}
.nflc.lined .nutrition-table { border-left:0; border-right:0}
.nflc.lined .nutrition-table>li.nt-header>.nt-title,
.nflc.lined .nutrition-table>li>span,
.nflc.lined .nutrition-table>li.nt-footer { padding-left:0; padding-right:0}
.fs-24 { font-size:24px; line-height:1}
.clearfix:after { content:""; clear:both; display:table}
.screen-reader-text,
.sr-only { clip:rect(1px,1px,1px,1px); position:absolute}
.screen-reader-text:focus,
.sr-only:focus { background-color:#f5f5f5; clip:auto; display:block; height:auto; line-height:normal; padding:16px 24px; position:absolute; left:4px; top:4px; text-decoration:none; text-transform:none; width:auto; z-index:100000; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; -webkit-box-shadow:0 1px 3px rgba(0,0,0,.24); -moz-box-shadow:0 1px 3px rgba(0,0,0,.24); box-shadow:0 1px 3px rgba(0,0,0,.24)}
.print-only { display:none!important;}

.mobileMenuItems{ display: none;}

/* destop only */
@media screen and (min-width:1280px){
	.showIphone, .showIpad, .hideDesktop, .mobileMenuItems{ display: none !important;}
	section:has(.sweepstakesHeader){ padding:96px 0 0 0;}
}
/* tablet */
@media screen and (min-width:0px) and (max-width:1279px){
	section:has(.sweepstakesHeader){ padding:90px 0 0 0;}
	.hideIpad,
	header ul.mainMenu,
	.showDesktop{ display:none !important;}
	.showIpad{ display:block !important;}
	
	html, *{ font-size: 17px;}
	body{ min-width: 810px;}
	.contentCenter, .featuredRecipe .contentCenter, .fullwidthText.fwt-2.p-315 .contentCenter{ width: 780px;}
	
	.pageHeader h1 em { font-size: 5rem;}
	.recipeDetail h1, .productsList h2{ font-size: 1.8rem;}
	footer .menu *,
	footer .newsletter *{ font-size: 0.9rem;}
	footer .copy * { font-size: 0.8rem;}
	
	footer .left { float: none; margin: 0 auto 40px;}
	footer .center { padding: 0; width: 100%; float: none; text-align: center; }
	footer .menu { text-align: inherit; margin: 0;}
	footer .right { width: 422px; float: none; text-align: center; margin: 40px auto 0;}
	footer .socialLinks { text-align: center;}
	footer .socialLinks .instagram,
	footer .socialLinks .facebook{ margin: 0 8px;}
	
	header{ height: 90px; padding: 15px 0;}
	header ul li{ display: none;}
	header ul li.logo { display: block; margin: 0 auto; width: 180px;}
	body.scrolled header ul li.logo { width: 110px;}
	
	body.home .bannerImageText .contentCenter { padding: 0 280px 0 0;}
	body.home .bannerImageText { padding: 60px 0;}
		
	.textWithImage .text{ padding: 40px 0;}
	.textWithImage .text .container { padding: 0 0 0 40px;}
	.textWithImage.Right .text .container { padding: 0 40px 0 0;}
	
	.pageHeader { height: 760px;}
	.pageHeader .contentCenter { padding: 0px 310px 0 0;}
	.pageHeader .image .theImg.img-0 { width: 410px; left: calc(50% + 62px);}
	.pageHeader .image .theImg.img-1 { width: 253px;}
	.pageHeader .image .theImg.img-2 { width: 204px; left: calc(50% + 278px); top: 126px;}
	.pageHeader h1 { margin: 228px 0 27px /*298*/;}
	
	.bannerImageText { padding: 210px 0 40px;}
	
	.recipeDetail { margin: 60px auto 30px;}
	.recipeDetail.asBlog .topBanner { height: 515px;}
	.recipeDetail.asBlog .left { width: 100%;}
	.recipeDetail.asBlog .right { width: 100%; border-top: 1px solid #ccc; margin: 60px 0 0 0; padding: 50px 0 0;}
	.recipeDetail.asBlog .right h3{ margin-top: 0;}
	body.single-post .bannerImageText,
	body.single-recipe .bannerImageText{ padding: 90px 0;}
	
	.recipesList .recipe { width: calc(50% - 30px);}
	.recipesList .recipe:nth-child(3n+1){ clear: none;}
	.recipesList .recipe:nth-child(2n+1){ clear: both;}
	
	/* mobileMenu */
	header .menuIcon{ position: absolute; transition: 0.3s ease; width: 49px; height: 35px; text-indent: -5000px; cursor: pointer; right: 0; top: 8px;}
	header .menuIcon .l1{ transition: 0.3s ease; position: absolute; left: 0; top: 0; width: 49px; height: 4px; border-radius: 2px; background: #fffac2; z-index: 3;} 
	header .menuIcon .l2{ transition: 0.3s ease; position: absolute; left: 0; top: 15px; width: 49px; height: 4px; border-radius: 2px; background: #fffac2; z-index: 3;}
	header .menuIcon .l3{ transition: 0.3s ease; position: absolute; left: 0; top: 31px; width: 49px; height: 4px; border-radius: 2px; background: #fffac2; z-index: 3;}
	body.menuOpen .mobileMenuItems{ top: 0;}
	.mobileMenuItems *{ font-size: 2.5rem; }
	.mobileMenuItems{ display: block; transition: 0.4s ease; box-sizing: border-box; width: 100%; height: 100%; position: fixed; left: 0; top: -100%; z-index: 90; text-align: center; backdrop-filter: blur(8px); padding: 24px 0;}
	body.admin-bar .mobileMenuItems{ padding: 56px 0 0;}
	.mobileMenuItems .theBg{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #193c2b; opacity: 0.9; z-index: 1;}
	.mobileMenuItems .displayTable{ z-index: 2; position: relative;}
	.mobileMenuItems ul{ margin: 0; padding: 0; list-style-type: none;}
	.mobileMenuItems ul li{ margin: 15px 0; }
	.mobileMenuItems ul li.logo{ display: none;}
	.mobileMenuItems a{ text-decoration: none; color: #fff; font-family: "oswald", sans-serif; text-transform: uppercase;}
	body.menuOpen header .menuIcon .l1{ background: #fffac2; left: 7px; top: 15px; transform: rotate(-45deg); width: 35px; }
	body.menuOpen header .menuIcon .l2{ opacity:0; }
	body.menuOpen header .menuIcon .l3{ background: #fffac2; left: 8px; transform: rotate(-135deg); top: 15px; width: 35px; }
	
	.instagramIcon, .facebookIcon{ vertical-align: bottom; }
}

/* phone */
@media screen and (min-width:0px) and (max-width:809px){
	section:has(.sweepstakesHeader){ padding:70px 0 0 0;}
	.hideIphone,
	#wpadminbar{ display:none !important;}
	.showIphone{ display:block !important;}
	
	html, *{ font-size: 14px;}
	body{ min-width: 390px;}
	.contentCenter, .featuredRecipe .contentCenter, .fullwidthText.fwt-2.p-315 .contentCenter{ width: 370px;}
	
	footer .menu *, footer .newsletter * { font-size: 1.1rem;}
	
	body.admin-bar{ margin-top: -46px;}
	body.admin-bar header { top: 0;}
	
	
	header { height: 70px; padding: 10px 0;}
	header ul li.logo { width: 130px; margin: 0;}
	body.scrolled header ul li.logo{ width: 90px; }
	
	footer .right { width: 100%;}
	footer .menu li { margin: 0 15px 10px;}
	
	.bannerImageText { padding: 150px 0 40px;}
	.recipeDetail.asProduct .images { width: 100%; float: none; margin: 0 auto 50px;}
	.recipeDetail.asProduct .text { width: 100%; padding: 0;}
	.recipeDetail h1,
	.recipeDetail.asBlog .date.top{ text-align: center;}
	.blockGroup.bg145 .showIphone.facebookIcon,
	.blockGroup.bg145 .showIphone.instagramIcon{ display: inline-block !important;}
	.instagramImages .row a { width: calc(50% - 10px); margin: 5px 5px;}
	.instagramImages .row{ margin: 0 -5px;}
	footer .newsletter form input{ width: 240px;}
	
	.pageHeader .contentCenter { padding: 0;}
	.pageHeader h1 { margin: 130px 0 30px;}
	.pageHeader h1 em { font-size: 4.7rem; }
	.pageHeader h1 span {font-size: 3.2rem;}
	
	.pageHeader .image .theImg.img-0 { width: 280px; left: calc(50% + -138px);}
	.pageHeader .image .theImg.img-1 { width: 143px; left: calc(50% + -161px); top: 595px;}
	.pageHeader .image .theImg.img-2 { width: 144px; left: calc(50% + 18px); top: 336px;}
	.featuredRecipe.multiple .box { width: calc(50% - 30px);}
	.featuredRecipe.multiple .box:first-child { width: calc(100% - 30px); margin-bottom: 30px;}
	.featuredRecipe.multiple .box:first-child .theImg{ aspect-ratio:1/0.6;}
		
	.textWithImage .image{ width: 100%; min-height: 250px;}
	.textWithImage .text{ width: 100%; padding: 0; text-align: center;}
	.textWithImage .text .container,
	.textWithImage.Right .text .container{  padding: 30px 20px;}
	.textWithImage .flex { display: block;}
	.textWithImage .image .theImg, 
	.textWithImage.Right .image .theImg{ width: 100vw; left: calc((370px - 100vw) / 2); right: auto;}
		
	body.home .bannerImageText .contentCenter { padding: 0;}
	.recipeDetail.asBlog .topBanner { height: 245px;}
	
	.recipeDetail .images { width: 100%; margin: 0 0 40px;}
	.recipeDetail .text { width: 100%; padding: 0;}
	
	.productsList .products .product,
	.productsList .category.c5 .products .product { width: calc(50% - 30px);}
	
	.fullwidthText img.alignright { margin: 0 0 40px; width: 100%;}
	.fullwidthText img.alignleft { margin: 0 0 40px; width: 100%;}
	
	.sweepstakesHeader .tableCell { padding: 100px 0 0 0;}
	.sweepstakesHeader .image .theImg.img-0 { width: 400px; left: calc(50% + -168px);}
	.fullwidthText h2.orangeTitle::after {  width: 340px;}
	.fullwidthText.fwt-2.p-315 h2.orangeTitle::after { width: 242px;}
	
	.column2, .column3{ width: calc(100% - 30px);}
	
	.recipeDetail.asBlog .textWithImage .flex{ display: block;}
	.recipeDetail.asBlog .textWithImage .image,
	.recipeDetail.asBlog .textWithImage .text{ width: 100%; float: none;}
	.recipeDetail.asBlog .textWithImage .text .container ,
	.recipeDetail.asBlog .textWithImage.Right .text .container { padding: 60px 0 0 0;}
	
} 
/* sweepstakes ended message (white box, dark text) */
.sweepsForm form p.endedMsg{ font-size: 1.3rem; font-weight: 600; color: #254737; text-align: center; margin: 0; line-height: 1.3; }
/* t-shirt size availability footnote */
.sweepsForm .sizeNote{ display:block; color:#fbf3e6; font-size:0.75rem; line-height:1.4; text-align:center; max-width:760px; margin:18px auto 0; }
.sweepsForm .sweepsEnds{ display:block; color:#fbf3e6; font-size:1rem; line-height:1.4; text-align:center; max-width:760px; margin:24px auto 0; }