/*
Theme Name: WFF QNY
Author: Edison Dairo Jimenez / QNY Creative
Author URI: http://qnycreative.com
Version: 1.0
*/

/* fonts */
@import url("https://use.typekit.net/agk0mjp.css"); /* new adobe fonts */

/* 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;}
.wp-caption {text-align: center;margin-bottom: 1.5em;}
.wp-caption img {border: 0 none;margin: 0;padding: 0;}
.wp-caption p.wp-caption-text {margin: 0;font-weight: bold;}
.wp-smiley { max-height: 1em;margin:0 !important;}
.gallery dl {margin: 0;border: 0;padding: 0;}
blockquote.left {float: left;margin-left: 0;margin-right: 20px;text-align: right;width: 33%;}
blockquote.right {float: right;margin-left: 20px;margin-right: 0;text-align: left;width: 33%;}
html{height: 100%;}
blockquote:before, blockquote:after, q:before, q:after {content:"";}
blockquote, q {quotes:"" "";}
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;}
.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%;}
img, a img {image-rendering: optimizeQuality;}
em { font-style: italic; }
::selection {background: #92cae3; 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; }
.noUppercase{ text-transform: none !important;}
strong{ font-weight: bold;}

/* font sizes */
html{font-size:20px;}
.statsBar strong{ font-size: 4em;/*80px;*/}
.homeSlider ul li h1,
.headerImage h1,
.fullwidthBanner h2 span,
.fullwidthBanner h1 span,
.newsDetail h1{ font-size: 3rem;/*60px;*/}
h2,
.timeline h2{ font-size: 2.5rem;/*50px;*/}
h3,
.statsBar,
.contactForm h2{ font-size:2rem;/* 40px; */}
.eventBox .date,
.productsList .product .text h2,
.fullwidthText .romance{ font-size: 1.5rem;/*30px;*/}
.newsBox .date,
.contactForm .group h3{ font-size: 1.25rem;/*25px;*/}
body,
.featuredProducts .theText,
.productList .theText,
.eventBox .title,
.newsBox .title,
body.page-id-188 .fwt-0,
.storeLocator .storeList .title{ font-size: 1.2rem;/*24px;*/}
.mobileMenu,
.mobileMenu a.main,
.filterContainer .filters .filterBox span{ font-size: 1.05rem;/*21px;*/}
.button,
.arrowButton,
footer,
.fullwidthText,
.row.leadership h3,
.headerImage .moreInfo,
.newsList .newsLinkBox .text .brand,
.newsList .newsLinkBox .text .date,
.paginationDiv a,
.paginationDiv span.current,
.greenLineText span,
.recommendedNews .newsLinkBox .text .brand,
.recommendedNews .newsLinkBox .text .date,
.timeline h2 span,
.timeline h3,
.recipesList  ul li a .theText,
.featuredRecipes .right ul li a .theText,
.productsList .product .text,
.productsList .product .text .ingredients,
.productsList .product .text .upc,
.productsList .subtitle,
.productsList .product .text .link,
.brandsList .brand .text .link,
.filterContainer .filters .filterBox ul,
.internalMenu .left,
.executiveTeam{ font-size: 1rem; /*20px;*/}
header .sub-menu a,
.executiveTeam .theDetail{ font-size: 0.95rem;/*19px;*/}
header .mainMenu,
footer .right form .button,
.eventBox .location,
.productsList .product .text .brand,
.executiveTeam .text,
.contactForm label,
.loginForm label{ font-size: 0.9rem;/*18px;*/}
footer .right input,
.storeLocator .storeList .storeBox h3{ font-size: 0.85rem;/*17px;*/}
footer .right .divMessage,
.brandsList .brand .text,
.brandsList .brand .text .button,
.contactForm input[type=text],
.contactForm input[type=number],
.contactForm input[type=file],
.contactForm input[type=tel],
.contactForm input[type=email],
.storeLocator .searchBarBox input,
.contactForm select,
.contactForm textarea,
.loginForm input[type=text],
.loginForm input[type=password],
.loginForm input[type=email],
.storeLocator .mapInfoBox h3,
.storeLocator .storeList .wrap,
.recoverLink{ font-size: 0.8rem;/*16px;*/}
.contactForm .repeater .add{ font-size: 0.75rem;/*15px;*/}
.contactForm label.checkbox,
.divMessage,
.infoIcon .popup,
.floatingAnswers,
.loginForm label.checkbox,
.storeLocator .mapInfoBox,
.storeLocator .storeList .storeBox .storeProducts{ font-size: 0.7rem;/*14px; */}
.executiveTeam .text em,
.contactForm em,
.storeLocator .storeList .storeBox span{ font-size: 0.65rem;/*13px;*/}
.gallery-caption,
.contactForm h2 em,
.loginForm em{font-size: 0.6rem;/*12px;*/}

/* common styles */
html { overflow-x: hidden; }
body{ margin:0; padding:0; min-width:1500px; font-family: Montserrat; color: #000; background: #fff; overflow-x: hidden; position: relative; font-weight: 300; line-height: 1.67;}
input, select, textarea{ color:inherit; }
.contentCenter,
.wooContent .woocommerce{ width:1500px; margin:0 auto;}
a{ color:inherit;}
a img{ border:none; display:inline-block;}
.displayTable{ display:table; width:100%; height:100%;}
.tableCell{ display:table-cell; width:100%; height:100%; vertical-align:middle;}
.button{ text-decoration: none; cursor: pointer; text-transform: uppercase; font-family: Montserrat; font-weight: bold; line-height: 1.2; letter-spacing: 2px; text-align: center; color: #fff; border-radius: 35px; border: solid 2px #0083bf; background: #0083bf; padding: 21px 66px; display:inline-block; transition:0.3s ease;}
.button.noBg{ background: none; color: #0083bf;}
.button.white{ background: none; border-color: #fff; color: #fff;}
.button.noBg:hover,
.button.white:hover,
.button:hover{ background: #0083bf; border-color: #0083bf; color: #fff;}
.arrowButton{ display: inline-block; text-transform: uppercase; text-decoration: none; font-weight: bold; line-height: 1.2; letter-spacing: 2px; color: #73cc34;}
.button.green{ background-color: #73cc34; border-color: #73cc34; }
.button.greenBorder{ background-color: transparent; border-color: #73cc34; }
.button.greenBorder:hover{ background-color: #73cc34;}
.arrowButton:after,
.brandsList .brand .text .link:after{ content: ''; background: url(images/arrowButton.svg) no-repeat center center / contain; display: inline-block; width: 76px; height: 19px; vertical-align: text-top; margin: 2px 0 0 29px;}
.clear{ clear:both;}
.hidden{ display: none !important;}
h1, h2, h3, h4, h5, h6{ ;}
h2{ font-family: "rift";  font-weight: 500; line-height: 1; letter-spacing: 2.5px; text-align: center; color: #1483bf; text-transform: uppercase; position: relative;}
h2:after{ content: ''; width: 100px; height: 5px; position: absolute; left:calc(50% - 50px); bottom: -31px; margin: 0 auto;  background: #73cc34;}
h2.noLine:after{ display: none;}
h3{ font-family: Montserrat; font-weight: 600; line-height: 1.25;}
.row{ margin: 0 -12px;}
.row .column{ margin: 0 12px;}
.row .column.column1{ width: calc(100% - 24px); float: left;}
.row .column.column2{ width: calc(50% - 24px); float: left;}
.row .column.column3{ width: calc(33.3333% - 24px); float: left;}
.row .column.column4{ width: calc(25% - 24px); float: left;}
.row .column.column5{ width: calc(20% - 24px); float: left;}
.row .column.column20{ width: calc(20% - 24px); float: left;}
.row .column.column80{ width: calc(80% - 24px); float: left;}
.row:after{ content: ''; width: 100%; display: block; clear: both;}
.iconArrows1:before{ content: ''; width: 100px; height: 100px; background: url(images/arrows-1.svg) no-repeat center center / contain; display: block; margin: 0 auto 20px;}
.iconArrows2:before{ content: ''; width: 100px; height: 100px; background: url(images/arrows-2.svg) no-repeat center center / contain; display: block; margin: 0 auto 20px;}
.iconArrows3:before{ content: ''; width: 100px; height: 100px; background: url(images/arrows-3.svg) no-repeat center center / contain; display: block; margin: 0 auto 20px;}
.iconArrows4:before{ content: ''; width: 100px; height: 100px; background: url(images/arrows-4.svg) no-repeat center center / contain; display: block; margin: 0 auto 20px;}

/* header */
header{ height: 101px; z-index: 100; background: #fff; position: fixed; left: 0; top: 0; width: 100%;}
body.admin-bar header{ top: 32px;}
header .contentCenter{ z-index: 2; position: relative;}
header a{ text-decoration: none; position: relative;}
header a span{ padding: 0 8px; transition: 0.3s ease;}
header .logo{ text-indent: -5000px; overflow: hidden; margin: 14px 0 0 0; width: 214px; height: 69px; background: url(images/logo.svg) no-repeat center center / contain; float: left;}
header .mobileMenuOpen{}
header .searchIcon{}
header .mainMenu{ float: left; width: calc(100% - 224px - 44px); text-align: center; text-transform: uppercase; margin: 39px auto 0; padding: 0; list-style-type: none; line-height: 1.22; letter-spacing: 1.8px;}
header .mainMenu>li{ margin: 0; display: inline-block;}
header .searchIcon{ margin: 32px 0 0 0; cursor: pointer; float: right; width: 34px; height: 34px; background: url(images/search.svg) no-repeat center center / contain; display: inline-block;}
header .menuIcon{ cursor: pointer; margin: 32px 0 0 0px; float: right; width: 34px; height: 34px; background: url(images/menu.svg) no-repeat center top / 34px auto; display: inline-block;}
header:before{ transition: 0.3s ease; z-index: 1; border-radius: 50%; content: ''; width: 141px; height: 141px; background: #fff; position:absolute; left: calc(50% - 784px); top: -24px;}
header .mainMenu>li{ position: relative;}
header .mainMenu>li>a{ position: relative; padding: 0 0 40px;}
header .mainMenu>li>a:after{ content:''; transition: 0.3s ease; position: absolute; left: 0; bottom: 0; width: 100%; height:7px; background: #005491 /*#0083bf*/; opacity: 0;}
header .mainMenu>li>a:before{ opacity: 0; content: attr(data-text); font-weight: bold; position: absolute; width: 100%; text-align: center; top: 0; transition: 0.3s ease;}
header .mainMenu>li:hover>a:before{ opacity: 1;}
header .mainMenu>li:hover>a span{ opacity: 0;}
header .mainMenu>li:hover>a:after{ opacity: 1;}
header .mainMenu>li.current_page_item>a{ font-weight: bold;}
header .mainMenu>li.current_page_item>a:after{ opacity: 1;}
body.menuOpen header .menuIcon{ background-position: center bottom;}
header .sub-menu{ display: none; text-transform: none; background: #0083bf; color: #fff;  position: absolute; left: calc(50%); transform: translateX(-50%); top:62px; width: 100%; min-width: 250px; text-align:center; margin: 0; padding: 0; list-style-type: none;}
header .sub-menu a{ display: block; letter-spacing: 0.4px; line-height: 1.45; padding: 8px 12px;}
header li:hover .sub-menu{ display: block;}
header .sub-menu .greenLink a { font-weight: bold; background: #73CC34; color: #fff; border-radius: 20px; padding: 6px 18px; display: inline-block; margin: 8px 12px;}
header li:hover .sub-menu li{ transition: 0.3s ease;}
header li:hover .sub-menu li:hover{ background:#005491;}
body.scrolled header,
body.single-post header{ box-shadow: 0 0 10px rgba(0,0,0,0.2);}
body.scrolled header:before{ opacity: 0;}

/* mobileMenu */
.mobileMenu{ background: #005491; color: #fff; position: fixed; left: 0; top: 101px; z-index: 99; width: 100%; transform: translateY(-100%); transition: 0.4s ease; padding: 0 0 35px; letter-spacing: 0.4px; line-height: 1.45;}
body.admin-bar .mobileMenu{ top: 133px;}
body.menuOpen .mobileMenu{ transform: translateY(0);}
.mobileMenu .contentCenter{ width: 1290px;}
.mobileMenu a{ text-decoration: none; }
.mobileMenu ul{ margin: 0; padding: 0; list-style-type: none;}
.mobileMenu a.main{ display: inline-block; font-weight: bold; color: #73CC34; text-transform: uppercase;letter-spacing: 0.4px; margin: 35px 0 0 0;}
.mobileMenu a.menu-item-641{ background: #73CC34; color: #fff; border-radius: 20px; padding: 6px 18px;}
.mobileMenu .column{ float: left; width: 20%;}
.mobileMenu .column.column-1{ width: 280px;}
.mobileMenu .column.column-2{ width: 295px;}
.mobileMenu .column.column-3{ width: 256px;}
.mobileMenu .column.column-4{ width: 168px;}
.mobileMenu .column.column-5{ width: 291px;}

/* footer */
footer{ background: #005491; padding: 70px 0; font-weight: 500; line-height: 1.5; letter-spacing: 1.2px; color: #fff;}
footer .contentCenter{ width: 1460px;}
footer a{ text-decoration: none; transition: 0.3s ease;}
footer a:hover{ }
footer .socialLinks{ margin: -6px 0 0 0; float: left; }
footer .socialLinks .linkedin{ display: inline-block; margin: 0 5px; background: url(images/linkedin.svg) no-repeat center center / contain; width: 40px; height: 40px;}
footer .logo{ text-indent: -5000px; overflow: hidden; display: block; margin: 0 0 29px; width: 279px; height: 89px; background: url(images/logoWhite.svg) no-repeat center center / contain;}
footer .left{ width: 280px; float: left; margin: 0 78px 0 0;}
footer .center{ float: left; width: 570px;}
footer .right{ padding:6px 0 0 0; float: right; width: 530px; text-align: right;}
footer .center ul{ margin: 0; padding: 0; list-style-type: none; text-align: left;}
footer .center ul li{ width: 50%; float: left;}
footer .center ul:after{ content: ''; clear: both; display: block; width: 100%;}
footer .sub-menu li{ width: 100% !important; float: none;}
footer .center ul .menu-item-has-children>a{ font-weight: bold; color: #73cc34; text-transform: uppercase;}
footer .right .button.green{ margin: 0 0 20px;}
footer .right strong{ display: block;}
footer .right input{ font-family: Montserrat; font-weight: 300; display: inline-block; width: 300px; height: 45px; box-sizing: border-box; color: #000; border:none; padding: 0 10px; background: #fff; vertical-align: top; border-radius: 35px 0 0 35px; }
footer .right form{ margin: 10px 0 0;}
footer .right form button,
footer .right form .button{ border-radius: 0 35px 35px 0; padding: 10px 20px; }
footer .right .divMessage{  margin: 15px 0 0 0; display: none; color: #fff;}
footer .termsMenu{ display: inline-block; margin: 0 36px 0 0; padding: 0; list-style-type: none;}
footer .termsMenu li{ margin: 0 0 0 20px; display: inline-block; }
footer .copy{ vertical-align: middle; margin: 91px 0 0 0; float: right; width: 1102px; text-align: right; clear: right;}

/* section */
section{ padding: 101px 0 0 0; position: relative;}

/* fullwidthText */
.fullwidthText{ margin: 50px auto;}
.iconCulture1:before{ content: ''; display: block; background: url(images/culture1.png) no-repeat center center / contain; width: 297px; height: 297px; margin: 0 auto 40px;}
.iconCulture2:before{ content: ''; display: block; background: url(images/culture2.png) no-repeat center center / contain; width: 297px; height: 297px; margin: 0 auto 40px;}
.iconCulture3:before{ content: ''; display: block; background: url(images/culture3.png) no-repeat center center / contain; width: 297px; height: 297px; margin: 0 auto 40px;}
.iconCulture4:before{ content: ''; display: block; background: url(images/culture4.png) no-repeat center center / contain; width: 297px; height: 297px; margin: 0 auto 40px;}
.row.leadership{ margin: 60px -15px 0;}
.row.leadership .column4{ width: calc(25% - 90px); margin: 0 45px;}
.row.leadership h3{ text-transform: uppercase; position: relative; margin: 0 0 70px;}
.row.leadership h3:after{ content: ''; width: 100px; height: 5px; position: absolute; left:calc(50% - 50px); bottom: -31px; margin: 0 auto;  background: #73cc34;}
.fullwidthText.bl-6444.fwt-1{ background: #3d82ba; color: #fff; padding: 60px 0;}
.fullwidthText.bl-6444.fwt-1 h2{ margin: 0 auto 80px; color: inherit;}
ul.greenCheck{ list-style-type: none; padding: 0;}
ul.greenCheck li:before{ content: ''; display: inline-block; width: 19px; height: 18px; background: url(images/check-mark.svg) no-repeat center center / contain; margin: 0 10px 0 0; vertical-align: baseline;}
div.bloquote, bloquote{ position: relative; width: 640px; display: block; margin: 0 auto;}
div.bloquote:before, bloquote:before{ content: ''; width: 66px; height: 51px; background: url(images/quote.svg) no-repeat center center / contain; position: absolute; left: -109px; top: -25px;}
div.bloquote:after, bloquote:after{ content: ''; width: 66px; height: 51px; background: url(images/quote.svg) no-repeat center center / contain; position: absolute; right: -109px; top: -14px; transform: scale(-1,-1);}
.fullwidthText h2{ margin-bottom: 60px;}
.fullwidthText .romance{ color: #1382c2; margin: 102px auto 95px; font-weight: 500;}

/* homeSlider */
.homeSlider{ height: 700px; position: relative; background: #ccc;}
.homeSlider ul{ position: absolute; left: 0; top: 0; margin: 0; padding: 0; list-style-type: none; width:9999px; height: 100%;}
.homeSlider ul li{ float: left; width: 100%; height: 100%; background: no-repeat center center / cover; color: #fff;}
.homeSlider ul li h1{ font-weight: bold; line-height: 1.05; letter-spacing: 1.2px;}
.homeSlider .button{ margin: 11px 0 0 0;}
.homeSlider .displayTable{ background: linear-gradient(to right,rgba(0,0,0,0.48) 0%,rgba(0,0,0,0) 66.6666%);}
.homeSlider .paginator{ width: 100%; text-align: center; position: absolute; left: 0; bottom: 28px; z-index: 4;}
.homeSlider .paginator span{ cursor: pointer; background: #fff; border-radius:50%; width: 15px; height: 15px; display: inline-block; margin: 0 16px;}
.homeSlider .paginator span.active{ background: #73CC34;}

/* header_image  */
.headerImage{ height: 500px; background: #ccc no-repeat center center / cover; position: relative;}
.headerImage .theLogo{ box-shadow: 10px 10px 10px rgba(0,0,0,0.2); width: 467px; aspect-ratio: 1 / 1; background: no-repeat center center / contain; position: absolute; left: 50%; bottom: -50px; border-radius: 45px; overflow: hidden; transform: translateX(-50%);}
.headerImage .displayTable{ text-align: center; background:radial-gradient(rgba(0,0,0,0.47) 0%,rgba(0,0,0,0) 50%);}
.headerImage h1{ font-weight: bold; line-height: 1.05; letter-spacing: 1.2px; color: #fff;}
.headerImage h1 span{ display: block; font-size: 0.8em;}
.headerImage .moreInfo{ padding: 15px 0; position: absolute; width: 100%; left: 0; bottom: 0;  background-color: rgba(0, 0, 0, 0.3); color: #fff; text-align: center; line-height: 1.35;}
body.page-id-746 .headerImage .displayTable,
body.page-id-759 .headerImage .displayTable{ background-color: rgba(0, 0, 0, 0.3);}
body.page-id-773 .headerImage .displayTable{ background-color: rgba(0, 0, 0, 0.1);}
body.single-wff_brand .headerImage .overlay,
body.single-wff_product .headerImage .overlay{ width: 100%; height: 100%; position: absolute; left: 0; top: 0;  opacity: 0.8;}
.headerImage .brandText{ width: 70%; margin: 30px auto 0;}
.mapProduct{ text-align: center; font-weight: 500; color: #000; float:left; width: calc(50% - 20px); margin: 20px 10px;}
.mapProduct .image{ width: 100%; margin: 0 0 10px;}
.mapProduct .image img{ display: block; width: 100%; height: auto;}

/* homeBrands */
.homeBrands{ margin:50px auto;}
.homeBrands .contentCenter{ position: relative;}
.homeBrands .wrapper{ width: 964px; height: 382px; margin:0 auto; position: relative; overflow: hidden;}
.homeBrands ul{  width: 5000px; margin: 0 auto; padding: 0; height:100%; list-style-type: none; position: absolute; left: 0; top: 0;}
.homeBrands ul li{ width: 964px; height: 100%; float: left; position: relative;}
.homeBrands a{ overflow: hidden; text-indent: -5000px; position: relative;}
.homeBrands a .theLogo{ position: absolute; left: 50%; top:50%; transform: translate(-50%,-50%);width:100%; height:100%; background: no-repeat center center / contain;}
.homeBrands .brand0{ width: 382px; height: 382px; position: absolute; left: 0; top: 0;}
.homeBrands .brand1{ width: 183px; height: 183px; position: absolute; left: 403px; top: 0;}
.homeBrands .brand2{ width: 358px; height: 183px; position: absolute; right: 0; top: 0;}
.homeBrands .brand3{ width: 358px; height: 183px; position: absolute; left: 403px; bottom: 0;}
.homeBrands .brand4{ width: 183px; height: 183px; position: absolute; right: 0; bottom: 0;}
.homeBrands .arrowLeft{ cursor: pointer; width: 76px; height: 19px; background: url(images/arrowLeft.svg) no-repeat center center / contain; position: absolute; left:127px; top: calc(50% - 9px);}
.homeBrands .arrowRight{ cursor: pointer; width: 76px; height: 19px; background: url(images/arrowLeft.svg) no-repeat center center / contain; position: absolute; right:127px; top: calc(50% - 9px); transform: scaleX(-1);}

/* fullwidthBanner  */
.fullwidthBanner{ margin:0 auto; height: 475px; background: #ccc no-repeat center center / cover; color: #fff;}
.fullwidthBanner .displayTable{ background: rgba(20, 131, 191,0.69);}
.fullwidthBanner h1,
.fullwidthBanner h2{ color: #fff; margin-top: 0; line-height:1.2;}
.fullwidthBanner h1:after,
.fullwidthBanner h2:after{ display: none;}
.fullwidthBanner h1 span,
.fullwidthBanner h2 span{ text-transform: none; display: inline-block; margin: 33px 0 0; font-family: Montserrat; font-weight: bold; line-height: 1.05; letter-spacing: 1.2px;}
.fullwidthBanner .button{ margin: 9px 14px 0; padding: 21px 30px;}
.fullwidthBanner .button:hover{ background: #fff; color: rgba(20, 131, 191,1); border-color: #fff;}

/* textWithImage */
.textWithImage{ margin: 50px auto;}
.textWithImage .contentCenter{ position: relative; width: 1460px;}
.textWithImage .text{ line-height: 1.28; width: 62.5%; box-sizing: border-box; position: absolute; z-index: 2; padding: 67px 78px 47px; background: #3d82ba; color: #fff; right: 0; top: 50%; transform: translateY(-50%);}
.textWithImage .text h2{ margin: 0 0 35px; color: #fff;}
.textWithImage .text h2:after{ display: none;}
.textWithImage .image{ float: left; position: relative; z-index: 1;}
.textWithImage .image img{ display: block; max-width: 100%;}
.textWithImage.Right .text{ float: right; left: 0; right: auto;}
.textWithImage.Right .image{ float: right;}

body.single-wff_brand .textWithImage .image{ width: 53%;}
body.single-wff_brand .textWithImage .text{ width: 47%; padding: 0 0 0 60px; background: none; color: #000; position: relative; left: auto; top: auto; float: right; transform: none;}
body.single-wff_brand .textWithImage .text h2{ color: #0083bf; text-align: left; margin: 0;}
body.single-wff_brand .textWithImage .text h2:after{ display: block; left: auto; bottom: auto; margin: 45px 0; position: relative;}

body.page-id-186 .twi0 .image{ width:60%;}
body.page-id-186 .twi1 .image{ width:60%;}
body.page-id-186 .twi2 .image{ width:60%;}
body.page-id-186 .twi3 .image{ width:60%;}


/* newsList */
/*body.page-id-631{ background: url('News- P1.png') no-repeat center top; background-position-y:-408px; }*/
.newsList{ margin: 50px auto;}
.newsList .contentCenter{ width: 1460px;}
.newsList .wrapper{ margin: 0 -110px;}
.newsList .newsLinkBox{ text-decoration: none; float: left; margin:0 11px 30px; width: calc(33.3333% - 22px);}
/*.newsList .newsLinkBox.nb-0{ clear: left;}*/
.newsList .newsLinkBox .image{ width: 100%; height: 248px; background: #000; position: relative; border-radius: 10px 10px 0 0; overflow: hidden;}
.newsList .newsLinkBox .image div{ background: no-repeat center center / contain; position: absolute; left:0; top:0; width: 100%; height: 100%; transition: 0.3s ease;}
.newsList .newsLinkBox:hover .image div{ transform: scale(1.05);}
.newsList .newsLinkBox .text{ padding: 23px 21px; background-color: #3d82ba; color: #fff;}
.newsList .newsLinkBox .text .brand{ text-transform: uppercase; width: 310px; font-weight: bold; float: left; }
.newsList .newsLinkBox .text .date{ opacity: 0.5; float: right; width: 110px; text-align: right; font-family: Montserrat; font-weight: bold; letter-spacing: 2px; color: #fff;}
.newsList .newsLinkBox .text .postTitle{ overflow: hidden; height: 82px; clear: both;}
.paginationDiv{ text-align: center; margin: 60px auto 0;}
.paginationDiv a,
.paginationDiv span.current{ text-decoration: none; cursor: pointer; text-transform: uppercase; font-family: Montserrat; font-weight: bold; line-height: 1.2; letter-spacing: 2px; text-align: center; color: #0083bf; border-radius: 35px; border: solid 2px #0083bf; background: none; padding: 21px 20px; display:inline-block; transition:0.3s ease;}
.paginationDiv span.current,
.paginationDiv a:hover{ background: #0083bf; border-color: #0083bf; color: #fff;}
.greenLineText{ margin: 60px auto; text-align: center; position: relative;}
.greenLineText:before{ z-index: 1; content: ''; width: 100%; height: 6px; background: #1483bf; left: 0; top: 50%; transform: translateY(-50%); position: absolute;}
.greenLineText span{ position: relative; z-index: 2; background: #fff; display: inline-block; padding: 0 70px; text-transform: uppercase; font-weight: bold; letter-spacing: 2px; color: #73cc34;}
hr{ border: none; clear: both; z-index: 1; width: 100%; height: 6px; background: #1483bf;  margin: 60px auto;}
.recoverLink{ color: #005491; display: block; text-decoration: none; margin: 20px auto 0;}
.recoverLink:hover{ text-decoration: underline;}

/* newsDetail */
/*body.single-post{ background: url('News_Blog_P1.png') no-repeat center top; background-position-y:-301px; }*/
.newsDetail{ margin: 50px auto;}
.newsDetail .contentCenter{ width: 1460px;}
.newsDetail h1{ font-weight: bold; line-height: 1.05; letter-spacing: 1.2px; color: #0b5491;}
.newsDetail .image{ margin: 0 0 58px;}
.newsDetail .image img{ max-width: 100%;}
.newsDetail .text{ width: 80%;}
.newsDetail .text h2{ text-align: left; margin-bottom: 60px;}
.newsDetail .text h2:after{ left: 0;}
.newsDetail .date{ margin: 54px 0 28px;}
.newsDetail hr{ clear: both; z-index: 1; width: 65%; height: 5px; background: #73cc34;  margin: 60px auto;}

/* recommendedNews */
.recommendedNews{margin: 50px auto;}
.recommendedNews .contentCenter{ width: 1460px;}
.recommendedNews h2:after{ display: none;}
.recommendedNews .newsLinkBox{ text-decoration: none; display: block; position: relative; margin: 0 0 30px;}
.recommendedNews .image{ width: 32.33%; height: 472px; position: relative; margin: 0; background: #000; border-radius: 10px; overflow: hidden;}
.recommendedNews .image div{ background: no-repeat center center / auto 80%; position: absolute; left:0; top:0; width: 100%; height: 100%; transition: 0.3s ease;}
.recommendedNews .image div{ transform: scale(1.05);}
.recommendedNews:hover .image div{ transform: scale(1.05);}
.recommendedNews .newsLinkBox .text{ box-sizing: border-box; text-align: right; width: 72.4%; padding: 63px 61px; background-color: #3d82ba; color: #fff; position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
.recommendedNews .newsLinkBox .text .brand{ text-align: left; text-transform: uppercase; width: 310px; font-weight: bold; float: left; }
.recommendedNews .newsLinkBox .text .date{ opacity: 0.5; float: right; width: 400px; text-align: right; font-family: Montserrat; font-weight: bold; letter-spacing: 2px; color: #fff;}
.recommendedNews .newsLinkBox .text .postTitle{ clear: both; text-align:left; margin: 0 0 60px;}

/* history */
.timeline{ margin: 50px auto; position: relative;}
.timeline .row{ position: relative;}
.timeline .image img{ display: block; max-width: 100%;}
.timeline h2{ margin: 0 0 48px; font-family: "rift"; font-weight: 500; line-height: 0.8; letter-spacing: 2.5px; text-align: center; color: #1483bf;}
.timeline h2:after{ display: none;}
.timeline h2 span,
.timeline h3{ margin: 0 0 -2px; text-transform: uppercase; font-family: Montserrat; font-weight: bold; line-height: 1.35; letter-spacing: 2px; text-align: center; color: #1483bf;}
.timeline h2 span{ margin: 32px 0 0 0; display: block;}
.timeline .left{ float: left; width: 50%; padding: 265px 0 0; position: relative;}
.timeline .left .vLine{ width: 4px; height: 100%; background: #1483bf; position: absolute; right:-2px; top:0;}
.timeline .left .vLine:after{ content: ''; width: 24px; height: 20px; position: absolute; left: calc(50% - 12px); bottom:-10px; background: url(images/lineArrow.svg) no-repeat center center / contain; transform: rotate(180deg);}
.timeline .right{ float: left; width: 50%;}
.timeline .text{ line-height: 1.25; text-align: center;}
.timeline .left .row,
.timeline .right .row{ position: relative;}
.timeline .left .row .hLine,
.timeline .right .row .hLine{ width: 77px; height: 4px; background: #1483bf; position: absolute; left:0; top:calc(50% - 2px);}
.timeline .left .row .hLine{left: auto; right:0;}
.timeline .left .row .hLine:before,
.timeline .right .row .hLine:before { content: ''; width: 24px; height: 20px; position: absolute; left: calc(50% - 12px); top: calc(50% - 10px); background: url(images/lineArrow.svg) no-repeat center center / contain; transform: rotate(90deg);}
.timeline .left .row .hLine:before{transform: rotate(-90deg);}
.timeline .row.r-0{ text-align: center; margin: 0 0 34px;}
.timeline .row.r-1{ padding: 48px 0 0 0; margin: 0 0 84px;}
.timeline .row.r-1 h2{ position: absolute; left: 193px; top: 29px;}
.timeline .row.r-1 .image{ float: left; width: 307px; margin: 0 0 0 77px; padding: 57px 0 0 0;}
.timeline .row.r-1 .hLine{top: calc(50% + 41px);}
.timeline .row.r-3{ padding: 46px 0 0 0; margin: 0 0 127px;}
.timeline .row.r-3 h2{ position: absolute; top: 27px; left: 172px;}
.timeline .row.r-3 .image{ float: left; width: 307px; margin: 0 0 0 77px; padding: 58px 0 0 0;}
.timeline .row.r-3 h3{ margin: 0 0 -15px;}
.timeline .row.r-3 .hLine{top: calc(50% + 64px);}
.timeline .row.r-5{ padding: 100px 0 0 0; margin: 0 0 60px;}
.timeline .row.r-5 h2{ position: absolute; left: 312px; top: 0px;}
.timeline .row.r-5 h2 span{ margin: 15px 0 0 0;}
.timeline .row.r-5 .image{ width: 100%; margin: 0 0 0 77px; padding: 0;}
.timeline .row.r-5 h3{ margin: 0 0 -15px;}
.timeline .row.r-5 .text{ position: absolute; right: 37px; top: 95px; text-align: right; color: #fff; width: 625px;}
.timeline .row.r-5 .hLine{top: calc(50% + 49px);}
.timeline .row.r-7{ text-align: center; margin: 0 0 139px;}
.timeline .row.r-7 h2{ margin: 0 0 0 93px; padding: 0 30px; background: #fff; position: relative;z-index: 2; display: inline-block;}
.timeline .row.r-7 h2 span{ margin: 15px 0 0 0;}
.timeline .row.r-7 .text{ border: 4px solid #1483bf; width: 645px; margin: -17px 0 0 77px; position: relative; z-index: 1;}
.timeline .row.r-7 .hLine{top: calc(50% + 8px);}
.timeline .row.r-9{ padding: 0; margin: 0 0 55px;}
.timeline .row.r-9 h2{ position: absolute; left: 184px; top: -19px;}
.timeline .row.r-9 .image{ float: left; width: 320px; margin: 30px 0 0 73px; padding: 0 0 40px;}
.timeline .row.r-9 h3{ margin: 0 0 -11px;}
.timeline .row.r-9 .hLine{top: calc(50% - 6px);}
.timeline .row.r-11{ margin: 0 0 99px;}
.timeline .row.r-11 h2{ text-align: left; padding: 0 0 0 195px; margin: 0 0 36px;}
.timeline .row.r-11 .text{ color: #fff; background: #3d82ba; position: absolute; z-index: 1; right: 33px; top: 87px; width: 410px; box-sizing: border-box; padding: 29px 15px 8px 76px;}
.timeline .row.r-11 .image{ margin: 0 0 0 77px; position: relative; z-index: 2}
.timeline .row.r-11 .text h3{ color: #fff; margin: 0 0 -9px;}
.timeline .row.r-11 .hLine{top: calc(50% + 36px);}
.timeline .row.r-13{ padding: 0; margin: 0;}
.timeline .row.r-13 h2{ position: absolute; left: 191px; top: -6px;}
.timeline .row.r-13 .image{ float: left; width: 307px; margin: 0 0 0 77px; padding:69px 0 80px 0;}
.timeline .row.r-13 h3{ margin: 0 0 39px;}
.timeline .row.r-13 .hLine{top: calc(50% - 21px);}
.timeline .row.r-2{ padding:0; margin: 0 0 135px;}
.timeline .row.r-2 h2{ position: absolute; right: 170px; top: -19px;}
.timeline .row.r-2 .image{ float: right; width: 307px; margin:56px 77px 0 0;}
.timeline .row.r-2 .hLine{top: calc(50% + 33px);}
.timeline .row.r-4{ padding:0; margin: 0 0 88px;}
.timeline .row.r-4 h2{ padding: 0 78px 0 148px; margin: 0 0 35px}
.timeline .row.r-4 .image{ float: right; width: 70%; margin:0 77px 0 0; position: relative; z-index: 1;}
.timeline .row.r-4 .text{ position: absolute; left: 20px; top: 104px; color: #fff; background: #3d82ba; z-index: 2; width: 51.6%; padding: 24px 15px 7px; box-sizing: border-box;}
.timeline .row.r-4 .text h3{ color: #fff;}
.timeline .row.r-4 .hLine{top: calc(50% + 22px);}
.timeline .row.r-6{ text-align: center; margin: 0 0 82px;}
.timeline .row.r-6 h2{ margin: 0; padding: 0 30px; background: #fff; position: relative;z-index: 2; display: inline-block;}
.timeline .row.r-6 h2 span{ margin: 23px 0 0 0;}
.timeline .row.r-6 .text{ border: 4px solid #1483bf; width: 644px; margin: -21px 0 0 20px; position: relative; z-index: 1;}
.timeline .row.r-6 .hLine{top: calc(50% + 4px);}
.timeline .row.r-8{ padding:0; margin: 0 0 61px;}
.timeline .row.r-8 h2{ position: absolute; left: 135px; top: 12px;}
.timeline .row.r-8 .image{ float: right; width: 307px; margin:0 77px 0 0;}
.timeline .row.r-8 .text{ padding: 94px 0 0 0;}
.timeline .row.r-8 .hLine{top: calc(50% + 11px);}
.timeline .row.r-10{ text-align: center; margin: 0 0 186px;}
.timeline .row.r-10 h2{ margin: 0; padding: 0 30px; background: #fff; position: relative;z-index: 2; display: inline-block;}
.timeline .row.r-10 h2 span{ margin: 23px 0 0 0;}
.timeline .row.r-10 .text{ border: 4px solid #1483bf; width: 644px; margin: -19px 0 0 20px; position: relative; z-index: 1;}
.timeline .row.r-10 .hLine{top: calc(50% + 19px);}
.timeline .row.r-12{ padding:0; margin: 0 0 217px;}
.timeline .row.r-12 h2{ position: absolute; right: 137px; top: -19px;}
.timeline .row.r-12 .image{ float: right; width: 307px; margin:57px 77px 0 0;}
.timeline .row.r-12 .text{ padding: 0;}
.timeline .row.r-12 h3{ margin: 0 0 27px;}
.timeline .row.r-12 .hLine{top: calc(50% + 39px);}
.timeline .row.r-14{ padding:0; margin: 0 0 129px;}
.timeline .row.r-14 .image{ position: absolute; right: 7px; top: -44px; z-index: 2;}
.timeline .row.r-14 .text{ padding: 36px 225px 9px 0; box-sizing: border-box; margin: 0 124px 9px 20px; color: #fff; background: #3d82ba; position: relative; z-index: 1;}
.timeline .row.r-14 h3{ color: #fff; margin: 0 0 37px;}
.timeline .row.r-14 .hLine{top: calc(50% + 2px);}

/* recipesList */
.recipesList{ margin: 50px auto;}
.recipesList ul{ margin:0 -12px; padding: 0; list-style-type: none;}
.recipesList ul:after{ content: ''; display: block; clear: both;}
.recipesList ul li{ height: 518px; width: calc(25% - 24px); margin: 0 12px 24px; float: left; position: r}
.recipesList ul li a{ border-radius: 8px; display: block; width: 100%; height: 100%; overflow: hidden; position: relative;}
.recipesList ul li a .theImg{ overflow: hidden; width: 100%; height: 100%; background: #ccc no-repeat center center / cover; z-index: 1; transition: 0.3s ease;}
.recipesList .button{ padding: 10px 20px; margin: 30px 0 0 0;}
.recipesList  .button:hover{ border-color:#fff; background: #fff; color: #1483bf;}
.recipesList  ul li a .theText{ z-index: 2; border-radius: 8px; background: rgba(0, 131, 191,0.75); font-weight: bold; line-height: 1.2; letter-spacing: 2px; text-align: center; color: #fff; position: absolute; left: 0; bottom: -78px; width: 100%; box-sizing: border-box; padding: 27px 15px; transition: 0.3s ease;}
.recipesList  ul li a:hover .theImg{ transform: scale(1.05);}
.recipesList  ul li a:hover .theText{ bottom: 0;}

/* featuredRecipes */
.featuredRecipes{ margin: 50px auto;}
.featuredRecipes .left{ width: 32.1%; float: left; box-sizing: border-box; padding-left: 20px;}
.featuredRecipes .right{ width:calc(67.9% - 30px); float: right; height: 518px; position: relative;}
.featuredRecipes .right .wrapper{ position: absolute; left: 0; top: 0; width: 5000px; height: 100%; overflow: hidden;}
.featuredRecipes h2{ text-align: left; margin: 14px 0 82px;}
.featuredRecipes h2:after{ left: 0;}
.featuredRecipes .right ul{ position: absolute; left: 0; top:0; margin: 0; padding: 0; list-style-type: none; width: 5000px; height: 100%;}
.featuredRecipes .right ul li{ float: left; width: 375px; height: 100%; margin: 0 23px 0 0;}
.featuredRecipes .right ul li a{ border-radius: 8px; display: block; width: 100%; height: 100%; overflow: hidden; position: relative;}
.featuredRecipes .right ul li a .theImg{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #ccc no-repeat center center / cover; z-index: 1; transition: 0.3s ease;}
.featuredRecipes .left .button{ padding: 21px 35px;}
.featuredRecipes .right .button{ padding: 10px 20px; margin: 30px 0 0 0;}
.featuredRecipes .right .button:hover{ border-color:#fff; background: #fff; color: #1483bf;}
.featuredRecipes .right ul li a .theText{ z-index: 2; border-radius: 8px; background: rgba(0, 131, 191,0.75); font-weight: bold; line-height: 1.2; letter-spacing: 2px; text-align: center; color: #fff; position: absolute; left: 0; bottom: -78px; width: 100%; box-sizing: border-box; padding: 27px 15px; transition: 0.3s ease;}
.featuredRecipes .right ul li a:hover .theImg{ transform: scale(1.05);}
.featuredRecipes .right ul li a:hover .theText{ bottom: 0;}
.homeSlider .arrowLeft,
.homeSlider .arrowRight,
.featuredRecipes .arrowLeft,
.featuredRecipes .arrowRight{ margin: 47px 24px 0 0; float: right; width: 101px; height: 53px; background: url(images/sliderArrowLeft.svg) no-repeat center center / contain; cursor: pointer;}
.homeSlider .arrowRight,
.featuredRecipes .arrowRight{ transform: scaleX(-1);}
.homeSlider .arrowLeft,
.homeSlider .arrowRight{ position: absolute; bottom: 54px; margin: 0; right: 0px;}
.homeSlider .arrowLeft{ right: 123px;}

/* featuredProducts */
.featuredProducts{ margin: 50px auto;}
.featuredProducts ul{ margin: 0; padding: 0; list-style-type: none;}
.featuredProducts ul li{ float: left; width: 33.3333%;}
.featuredProducts ul li a{ display:block; text-decoration: none; position: relative;}
.featuredProducts .theImg{ background: no-repeat center center / contain; width: 80%; height:473px; margin: 0 auto; transition: 0.3s ease; position: relative;}
.featuredProducts a:before{ content: ''; width:360px; height: 360px; background:#73CC34; border-radius: 50%; position: absolute; left: calc(50% - 180px); top: -50px; opacity: 0; transition: 0.3s ease;}
.featuredProducts a:hover .theImg{ transform: scale(1.15) translateY(-20px);}
.featuredProducts a:hover:before{ opacity: 1;}
.featuredProducts .theText{ font-weight: 600; line-height: 1.25; text-align: center; width: 100%;}

/* productList */
.productList{ margin: 50px auto;}
.productList ul{ margin: 0 -20px; padding: 0; list-style-type: none;}
.productList ul li{ float: left; width: calc(25% - 40px); margin: 0 20px 40px;}
.productList ul li a{ display:block; text-decoration: none; position: relative;}
.productList .theImg{ background: no-repeat center center / contain; width: 70%; height:340px; margin: 0 auto 30px; transition: 0.3s ease; position: relative;}
.productList a:hover .theImg{ transform: scale(1.05);}
.productList .theText{ font-weight: 600; line-height: 1.25; text-align: center; width: 100%;}
.productList ul li:nth-child(4n+1){ clear:left;}

/* homeNewsTradeShows */
.homeNewsTradeShows{ margin:50px auto 0; padding: 44px 0 62px;  background: #005491;}
.homeNewsTradeShows .news{ padding: 0 40px 0 0; width: calc(71.3% - 40px); float: left; box-sizing: border-box; border-right: solid 2px #73cc34;}
.homeNewsTradeShows .news h2{ text-align: left; color: #fff; margin: 12px 0 83px}
.homeNewsTradeShows .news h2:after{ left: 0;}
.homeNewsTradeShows .news .button.viewAll{ margin: 86px 114px 0 0; float: right;}
.homeNewsTradeShows .events{ float: right; width: 28.7%;}
.homeNewsTradeShows .events h3{ color: #fff; margin: 0 0 37px}
.homeNewsTradeShows .events .arrowButton{ margin: 135px 0 0 0;}
.eventBox{ margin: 0 0 62px; display: block; text-decoration: none; color: #fff;}
.eventBox .date{ margin: 0 0 51px; font-family: "rift"; font-weight: bold; line-height: 1; letter-spacing: 1.5px; color: #56d967; position: relative;}
.eventBox .date:after{ content: ''; width: 123px; height: 5px; position: absolute; left:0; bottom: -21px; margin: 0 auto;  background: #73cc34;}
.eventBox .title{ margin: 0 0 14px; font-weight: 600; line-height: 1.25;}
.eventBox .location{ font-weight: 300; line-height: 1.39; position: relative; padding: 0 0 0 27px;}
.eventBox .location:before{ content: ''; width: 17px; height: 21px; background: url(images/mapPointer.svg) no-repeat center center / contain; position: absolute; left: 1px; top: 2px;}
.newsBox{  display: block; background: #fff; margin: 0 0 42px; text-decoration: none; width: calc(50% - 10px);}
.newsBox .image{ width: 100%; height: 260px; position: relative; overflow: hidden;}
.newsBox .image .theImg{ width: 100%; height: 100%; background: no-repeat center center / cover; position: absolute; left: 0; top: 0; transition: 0.3s ease;}
.newsBox .text{ box-sizing: border-box; padding: 26px; border-top: solid 6px #0083bf;}
.newsBox .date{ margin: 0 0 20px; font-family: "rift"; font-weight: 500; line-height:1; letter-spacing: 1.25px; color: #1483bf;}
.newsBox .title{ display: block; font-weight: 600; line-height: 1.46; color: #000;}
.newsBox .arrowButton{ float: right; margin: 26px 0 0 0;}
.newsBox.box0{ float: left; margin: 0 20px 0 0;}
.newsBox.box1,
.newsBox.box2{ float: right;}
.newsBox.box1 .image,
.newsBox.box2 .image{ display: none;}
.newsBox:hover .theImg{ transform: scale(1.05);}

/* productsList  */
.printIcon{ vertical-align: bottom; width: 56px; height: 59px; cursor: pointer; display: inline-block; margin:0 17px; background: url(images/printIcon.svg) no-repeat center center / contain;}
.emailPdfIcon{ vertical-align: bottom; width: 56px; height: 59px; cursor: pointer; display: inline-block; margin:0 17px; background: url(images/emailPdfIcon.svg) no-repeat center center / contain;}
.productsList{ margin: 68px auto 63px; }
.productsList .contentCenter{ width: 1460px;}
.productsList .container{ text-align: center; margin: 0 -16px; }
.productsList .hiddenProducts{ display: none;}
.productsList .button.viewAll{ margin: 26px auto 0; padding: 21px 89px;}
.productsList .product{ padding: 48px 0; border-bottom: 6px solid #1483BF;}
.productsList .product:after,
.productsList .product .popupInfo:after,
.productsList .product .popupInfo .column:after{ content: ''; display: block; clear: both; float: none;}
.productsList .product .images{ position: relative; width: 465px; float: left;}
.productsList .product .images img{ display: none;}
.productsList .product .images ul{ margin: 0 auto; padding: 0; list-style-type: none; width: 320px; height: 420px; position: relative;}
.productsList .product .images ul li{ position: absolute; left: 0; top:0; width: 100%; height: 100%; background: no-repeat center center / contain;}
.productsList .product .exclude{ font-size: 1rem; margin: 10px 0 0 0; position: relative; padding: 10px; box-sizing: border-box; text-align: left; background: #368930; width: calc(100% - 465px); float: right; font-weight: 300; line-height: 1.5; color: #fff;}
.productsList .product .exclude input{ vertical-align: middle; width: 20px; height: 20px;}
.productsList .product .text{ position: relative; padding: 27px 26px; text-transform: uppercase; box-sizing: border-box; text-align: left; background: #3d82ba; width: calc(100% - 465px); float: right; font-weight: 300; line-height: 1.5; color: #fff;}
.productsList .product .text h2{ margin: 0; text-align: left; font-family: Montserrat; font-weight: bold; line-height: 1.23; letter-spacing: 3px; color: #fff;}
.productsList .product .text h2:after{ display: none;}
.productsList .product .text .category{ text-transform: none; margin: 0 0 20px;}
.productsList .product .text .brand{ text-transform: capitalize; line-height: 1.67;}
.productsList .product .text .ingredients,
.productsList .product .text .upc{ line-height: 1.2; letter-spacing: 2px;}
.productsList .product .text .ingredients{ margin: 0 auto;}
.productsList .product .text .ingredients p{ margin-top: 0;}
.productsList .product .text .description{ margin: 0 auto 39px;}
.productsList .product .text .link{ cursor: pointer; margin: 30px auto 0; color: rgba(255,255,255,0.5); font-weight: bold; text-align: right; line-height: 1.2; letter-spacing: 2px;}
.productsList .product .text .link:after{ vertical-align: sub; content: ''; background: url(images/linkArrow.svg) no-repeat center center / contain; width: 11px; height: 23px; display: inline-block; margin: 0 0 0 15px;}
body.page-id-6428{ /*background: url('Products- P1 – 3.png') no-repeat center top;*/ background-position-y: 15px;}
.productsList .subtitle{ margin: 0 auto -15px; text-transform: uppercase; font-weight: bold; line-height: 1.2; letter-spacing: 2px; text-align: center; color: #73cc34; position: relative;}
.productsList .subtitle:before{ content: ''; background:#1483BF; position: absolute; left: 0; top: 10px; width: 100%; height: 6px;}
.productsList .subtitle span{ margin: 0 auto; position: relative; z-index: 2; display: block; background: #fff; width: 224px;}
.productsList .filterContainer{ margin-bottom:62px;  }
.productsList .product .images .prev,
.productsList .product .images .next{ position: absolute; left: 28px; top: calc(50% - 12px); background: url(images/linkArrow.svg) no-repeat center center / contain; transform: scaleX(-1);width: 14px; height: 30px; cursor: pointer;}
.productsList .product .images .next{ left: auto; right: 28px; transform: scaleX(1);}
.productsList .product .popupInfo{ text-transform: none; box-sizing: border-box; border-top:14px solid #0b5491; padding: 38px 52px 38px 34px; box-shadow: 0 3px 36px 0 rgba(0, 0, 0, 0.22); display: none; background: #fff; position: absolute; right: 0; top: 0; z-index: 2; width: 115%;}
.productsList .product .popupInfo .close{ width: 23px; height: 22px; cursor: pointer; position: absolute; right: 21px; top: 28px; background: url(images/closeproduct.svg) no-repeat center center / contain;}
.productsList .product .popupInfo .column{ border-radius: 30px; padding: 20px 26px; box-sizing: border-box; background: #5ca9d3;}
.productsList .product .popupInfo .column strong{ text-align: center; display: block;}
.productsList .product .popupInfo dd{ margin: 0; text-align:right;}
.productsList .product .popupInfo dd span{ font-weight: 500; float: left; color: #0b5491; clear: both;}
.productsList .product .popupInfo dd:before{ content: ''; display: block; height: 1px; width: 100%; background: #fff; margin: 10px auto; }
.productsList .product .popupInfo dd:first-child::before{ display: none;}

/* brandsList */
.brandsList{ margin: 50px auto; }
.brandsList .contentCenter{ width: 1460px;}
.brandsList .container{ text-align: center; margin: 0 -16px; }
.brandsList .brand{ text-decoration: none; overflow: hidden; background: #000; height: 341px; width: calc(25% - 32px); float: left; margin: 0 16px 32px; border-radius: 10px; position: relative;}
.brandsList .brand.horizontal{ width: calc(50% - 32px);}
.brandsList .hiddenBrands{ display: none;}
.brandsList .brand .theLogo{ width: 100%; height: 100%; background: no-repeat center center / contain; position: absolute; left: 0; top: 0; z-index: 1;}
.brandsList .brand .theImg{ width: 100%; height: 100%; background: no-repeat center center / cover; position: absolute; left: 0; top: 0; z-index: 2; opacity: 0; transition: 0.3s ease;}
.brandsList .brand .text{ font-weight: 500; border-radius: 8px; color: #fff; text-decoration: none; transform: translateY(105%); transition: 0.3s ease;  background:#0073AF; position: absolute; left: 0; bottom: 0; width: 100%; z-index: 3; padding: 27px 30px; box-sizing:border-box;}
.brandsList .brand .text .button{ padding: 10px 0; display: block; margin: 5px 0; background: #fff; color: #005491; border: none;}
.brandsList .brand .text .button:hover{ background: #005491; color: #fff;}
.brandsList .brand .text p:first-child{ margin-top:0;}
.brandsList .brand .text .link{ text-transform: uppercase; color: #73CC34; font-weight: bold;}
.brandsList .brand:hover .text{ transform: translateY(0);}
.brandsList .brand:hover .theImg{ opacity: 1;}
.brandsList .button.viewAll{ margin: 26px auto 0; padding: 21px 89px;}

/* sellSheetList */
.sellSheetList{ margin: 60px auto;}
.sellSheetList .container{ margin: 0 -15px;}
.sellSheetList .brand{ width: calc(50% - 30px); background: #efefef; margin: 0 15px 30px; float: left; border-radius: 20px; overflow: hidden;}
.sellSheetList .brand .content{ display: table; border-radius: 20px;}
.sellSheetList .brand .theLogo{ width: 150px; height: 150px; border-radius: 10px; overflow: hidden; margin: 0 auto; background: no-repeat center center / contain; }
.sellSheetList .brand .theImg{ display: table-cell; vertical-align: middle; width: 200px; background: no-repeat center center / cover; box-sizing: border-box; padding: 40px 0;}
.sellSheetList .brand .text{ font-size: 0.9rem; display: table-cell; vertical-align: top;}
.sellSheetList .brand .text .content{ padding: 30px;}
.sellSheetList .brand .text p{ margin-top: 0;}
.sellSheetList .brand .text .buttons{ margin:15px 0 0 0;}
.sellSheetList .brand .text .buttons a{ display: inline-block; border: 2px solid #0083bf; color: #0083bf; padding: 8px 20px; border-radius: 10px; text-decoration: none; font-size: 0.75rem; font-weight: bold; margin:0 5px 5px 0; transition:0.3s ease;}
.sellSheetList .brand .text .buttons a:hover{ background: #0083bf; color:#fff;}

/* statsBar */
.statsBar{padding: 44px 0; background: #005491; color: #fff; text-align: center; font-family: Montserrat; font-weight: 500;}
.statsBar .row{ display: table; width: 100%; margin: 0; line-height: 1;}
.statsBar .column{ padding: 25px 0; display: table-cell; float: none !important; margin: 0; vertical-align: middle;  border-right: 6px solid #73CC34; box-sizing: border-box;}
.statsBar .column.column3{ width: 33.3333%}
.statsBar .column:last-child{ border-right:none;}
.statsBar .column p{ margin: 0;}
.statsBar strong{ color: #0083BF; font-family: Montserrat; font-weight: bold;}

/* statsBar */
.callouts{ text-transform: uppercase; font-family: "rift"; padding: 44px 0; background: #005491; color: #fff; text-align: center;}
.callouts .box{  display: inline-block; margin:15px 0; vertical-align: middle; box-sizing: border-box; line-height: 1.2;}
.callouts .box.box1{ padding: 0; width: 100%; font-size: 2rem;}
.callouts .box.box2{ padding: 25px 25px; width: 50%; font-size: 1.8rem;}
.callouts .box.box3{ padding: 25px 25px; width: 33.3333%; font-size: 1.8rem;}
.callouts .box.box3:nth-child(2n+1){ border-left: 6px solid #73CC34; border-right: 6px solid #73CC34;}
.callouts .box.bL{border-left: 6px solid #73CC34;}
.callouts .box.bR{border-right: 6px solid #73CC34;}
.callouts .box:last-child{ border-right:none;}
.callouts .box p{ margin: 0;}
.callouts strong{ color: #0083BF; font-family: Montserrat; font-weight: bold;}

/* filters */
.filterContainer{ z-index:10; position:relative; margin:70px auto 90px; text-align:center; color:#424242; text-transform:uppercase;}
.filterContainer .filters{ margin:0 auto;}
.filterContainer .filters .filterBox{ transition: 0.3s ease; position: relative; width: 285px; border: solid 3px #73CC34; background-color: #ffffff; box-sizing: border-box; margin: 0 5px; display: inline-block; border-radius: 30px;}
.filterContainer .filters .filterBox span{ letter-spacing: 1px; display: inline-block; text-align: center; text-transform: uppercase; font-weight: bold; cursor:pointer; line-height:41px; color:#1483BF; padding:7px 14px; position:relative;}
.filterContainer .filters .filterBox span:after{ content: ''; width: 22px; height: 11px; background: url(images/dropdownArrow.svg) no-repeat center center / contain; display: inline-block; margin: 0 0 0 18px; vertical-align: middle;}
.filterContainer .filters .filterBox ul{ box-sizing:border-box; padding:0; max-height:545px; overflow-y:scroll; z-index:20; display:none; position:absolute; left:0; top:57px; width:100%; background:rgba(255,255,255,0.92); margin:0; list-style-type:none; text-align:left; box-shadow:2.7px 1.3px 27.5px 4.5px rgba(0, 0, 0, 0.15);}
.filterContainer .filters .filterBox ul li{ cursor: pointer; padding: 10px 14px; text-transform:none; text-align:left; color:#424242; }
.filterContainer .filters .filterBox ul li:hover{ background:#137eb8; color:#fff;}
.filterContainer .filters .filterBox.active ul{ display:block;}
.filterContainer .currentFilter{ display:none; text-align:center; margin:0 0 40px;}
.filterContainer .currentFilter .text{ margin-bottom:30px;}
.currentFilter{ display:none; text-align:center; margin:0 0 40px;}
.noResults{ margin: 70px 0; display: none; text-align: center;}
.currentFilter .text{ margin-bottom:30px;}
.filterContainer.withCheckbox .filters .filterBox ul li{ padding-left: 48px; position: relative;}
.filterContainer.withCheckbox .filters .filterBox ul li:before{ position: absolute; left: 14px; top: 16px; content: ''; width: 20px; height: 20px; border: 2px solid #ccc; display: inline-block; box-sizing: border-box;}
.filterContainer.withCheckbox .filters .filterBox ul li.active:before{ background: #73cc34;}

/* bannerImageText */
.bannerImageText{ margin: 50px auto;}
.bannerImageText .contentCenter{ position: relative; height: 590px;}
.bannerImageText .text{ text-align: center;background: #3D82BA; width: 31.54%; margin: 0 0 0 20px; box-sizing: border-box; padding: 76px 30px; color: #fff; z-index: 2; position: relative;}
.bannerImageText .text h2{ line-height: 1.2; color: inherit; margin: 0 0 42px;}
.bannerImageText .text h2:after{ display: none;}
.bannerImageText .image{ height: 100%; z-index: 1; position: absolute; right:0; top: 0; width: 82.9%;  background: #ccc no-repeat center center / cover;}
.bannerImageText .text .button{ border-color: #fff; background: none;}
.bannerImageText .text .button:hover{ background: #fff; color:#3D82BA; }

/* internalMenu */
.internalMenu{ margin: 50px auto;}
.internalMenu:after{ content: ''; width: 100%; height: 1px; clear: both; display: block;}
.internalMenu .left{text-transform: uppercase; float: left; width: 300px;}
.internalMenu .left strong{ margin: 0 0 20px;}
.internalMenu .left strong,
.internalMenu .left a{ display: block; text-decoration: none;}
.internalMenu .left a{ border-top: 1px solid #ccc; padding: 10px 0 0 0; margin: 10px 0 0 0;}
.internalMenu .left a:hover{ font-weight:bold;}
.internalMenu .left strong{ font-family: Montserrat; color: #0083bf;}
.internalMenu .right{ width: calc(100% - 350px); float: right;}
.internalMenu .right .contentCenter{ width: 100%;}
.internalMenu .right .block:first-child{ margin-top: 0;}

/* executiveTeam */
.executiveTeam{ margin: 50px auto 0;}
.executiveTeam .contentCenter{ width: 1312px; position: relative;}
.executiveTeam .clickArea{ cursor: pointer;}
.executiveTeam .image{ overflow: hidden; border-radius: 10px; position: relative; z-index: 1; width: 100%;  height: 534px; background: #ccc;}
.executiveTeam .image .theImg{ transition: 0.3s ease; position: absolute; left: 0; top:0; width: 100%; height: 100%; background: no-repeat center center / cover;}
.executiveTeam .row{ margin: 0 -46px;}
.executiveTeam .column{ margin: 0 46px 77px; position: relative;  border-radius: 10px;}
.executiveTeam .row .column.column3{ width: calc(33.3333% - 92px);}
.executiveTeam .text em{ display: block; line-height: 1.2; /*16px;*/}
.executiveTeam .text{ box-sizing: border-box; padding: 13px 8px 8px; text-align: center; color: #fff; position: absolute; left: 0; bottom: 0; width: 100%; z-index: 2; background: rgba(0, 131, 191,0.75); border-radius: 10px;}
.executiveTeam .text:after{ margin: 6px 0 0 0; content: ''; width: 22px; height: 22px; background: url(images/plusWhite.svg) no-repeat right center / auto 22px; display: inline-block;}
.executiveTeam .column.open .text:after{ background-position: left center;}
.executiveTeam .column:hover .image .theImg{ transform: scale(1.05);}
.executiveTeam .expandedText{ display: none;}
.executiveTeam .theDetail{ line-height: 1.3; padding: 54px 36px 22px; /* 42px */ box-sizing: border-box;width: 844px; box-shadow: 0 3px 36px 0 rgba(0, 0, 0, 0.22); display: none; background: #fff; border-top: 14px solid #0b5491; position: absolute; z-index: 4; left: 0; top: calc(100% + 77px);}
.executiveTeam.peopleCommittee .theDetail{ padding: 54px 36px 36px;}
.executiveTeam .theDetail h2{ margin-top: 0;}
.executiveTeam .theDetail h2:after{ display: none;}
.executiveTeam .theDetail .close{ width: 22px; height: 22px; background: url(images/close.svg) no-repeat center center / contain; position: absolute; right: 17px; top: 23px; cursor: pointer;}
.executiveTeam .theDetail strong{ display: block; margin: 0 0 10px; text-transform: uppercase;}
.executiveTeam.peopleCommittee .theDetail strong{ display: inline; text-transform: none; margin:auto;}
.executiveTeam .iconBox{padding: 13px 0 13px 111px; background: url(images/GuiltyPleasure.png) no-repeat left top; margin: 34px 0 0 0; /* 53px */ float: left; width: 390px;}
.executiveTeam .linkedIn{ background: url(images/Linkedin.svg) no-repeat center center / contain; width: 40px; height: 40px; text-indent: -5000px; overflow: hidden; float: right; margin: 57px 14px 0 0;}
.executiveTeam .column .line{ display:none; transition: 0.3s ease; content: ''; width: 4px; height: 77px; background:#1583bf; position:absolute; left: calc(50% - 2px); bottom: -77px;}
.executiveTeam .column .line:before{ content: ''; width: 24px; height: 20px; position: absolute; left: calc(50% - 12px); top:calc(50% - 10px); background: url(images/lineArrow.svg) no-repeat center center / contain; transform: rotate(180deg);}
.executiveTeam .column.c-2 .theDetail,
.executiveTeam .column.c-5 .theDetail{ left: auto; right: 0;}
.executiveTeam .column.c-3 .theDetail,
.executiveTeam .column.c-4 .theDetail,
.executiveTeam .column.c-5 .theDetail{ bottom: calc(100% + 77px); top: auto;}
.executiveTeam .column.c-3 .line,
.executiveTeam .column.c-4 .line,
.executiveTeam .column.c-5 .line{ bottom:auto; top:-77px; transform: rotate(180deg);}

.g-recaptcha{ width: 304px; margin: 0 auto 30px;}

/* contactForm */
.contactForm{ padding: 60px 0 94px; margin: 180px auto 0; background: #005491;}
.contactForm form{ margin: -184px auto 0; background: #fff; text-align: center; box-shadow: 0 3px 36px 0 rgba(0, 0, 0, 0.22); width: 1005px; border-top: 14px solid #005491; box-sizing: border-box; padding: 38px 67px 45px;}
.contactForm input[type=text],
.contactForm input[type=number],
.contactForm input[type=file],
.contactForm input[type=tel],
.contactForm input[type=email],
.storeLocator .searchBarBox input,
.contactForm select,
.contactForm textarea{ background: #fff; border-radius: 0; box-shadow: none; font-family: Montserrat; color: #333; height: 58px; padding: 0 10px; width: 100%; box-sizing: border-box; border:2px solid rgba(112, 112, 112, 0.5); margin: 0 0 19px;}
.contactForm input[type=number]{ text-align: center;}
.contactForm input[type=file]{ margin-bottom: 30px; width: auto; height: auto; padding: 10px;}
.contactForm textarea{ margin: 0 0 22px; height: 278px; padding: 8px 10px; resize: none;}
.contactForm label{ text-align: left; margin: 0 0 3px; display: block; color: #0B5491; font-weight: 500;}
.contactForm label.center{ text-align-last: center;}
.contactForm label.checkbox{ text-align: center; margin: 0 0 40px;}
.contactForm .row{ margin: 0 -16px;}
/*.contactForm .column2{ float: left; width: calc(50% - 32px); margin: 0 16px 28px;}*/
.contactForm em{ text-align: left;  display: block; letter-spacing: 0.65px; color: #3b3d40; font-weight: 400; font-style: normal;}
.contactForm h2{ margin-bottom: 50px; }
.contactForm .column:first-child h2{ margin-top: 0;}
.contactForm h2 em{ text-align: center; margin: 20px 0 0 0; display: block; font-family: Montserrat; }
.divMessage{ font-weight: bold; text-align: center; display: none; margin: 30px 0 0; font-family: Montserrat; letter-spacing: 0.65px;}
.divMessage.show{ display: block;}
.divMessage.error{ color: #cf0000;}
.redBorder{ border-color:#cf0000 !important;}
.infoIcon{ width: 16px; height: 16px; background: url(images/infoIcon.svg) no-repeat center center / contain; display: inline-block; position: relative; vertical-align: middle;  margin: 0 0 4px;}
.infoIcon .popup{ padding: 0 0 24px; background:rgba(0,0,0,0); transition: 0.3s ease; position: absolute; left: 0; bottom: 0; width:100px; display: none;}
.infoIcon .popup div{ background: #005491; color: #fff; padding: 10px;}
.contactForm .group{ clear: both; display: block; background: #f9f9f9; padding: 20px; margin: 0 0 20px; border-radius: 10px;}
.contactForm .group h3{ font-family: "rift"; font-weight: 500; line-height: 0.8; letter-spacing: 2.5px; text-align: left; color: #1483bf; text-transform: uppercase; position: relative; margin-top: 0;}
.contactForm .repeater .oneRow{ background: #fff; padding: 5px 60px 0 20px; position: relative; margin: 0 0 20px; border-radius: 10px;}
.contactForm .repeater .oneRow .remove{ background: #005491; cursor: pointer; position: absolute; right: 15px; top: 46px; content: ''; width: 30px; height: 30px; border-radius: 50%; }
.contactForm .repeater .oneRow .remove:after{ content: ''; width: 16px; height: 3px; background: #fff; position: absolute; left: 50%; top:50%; transform: translate(-50%,-50%);}
.contactForm .repeater .add{ cursor: pointer; text-transform: uppercase;  font-weight: bold; background:#005491; color: #fff; border-radius: 10px; float:right; padding: 10px 20px; }
.contactForm .repeater:after{ content: ''; display: block; clear: both;}
.floatingAnswers{ z-index: 60; background: #f9f9f9; border: 2px solid rgba(112, 112, 112, 0.5); position: absolute; left: 0; top: 0; display:none; width: 100%; max-height: 300px; overflow-y: scroll; }
.floatingAnswers ul{ list-style-type: none; margin: 0; padding: 0;}
.floatingAnswers ul li{ border-botom: 1px solid rgba(112, 112, 112, 0.5); padding: 5px 10px; cursor: pointer;}
.floatingAnswers ul li:hover{ color:#fff; background: #005491;}
.contactForm select{ -webkit-appearance: none; -moz-appearance: none; appearance: none;}
.contactForm .selectContainer,
.inputContainer{ position: relative;}
.contactForm .repeater .column80 .inputContainer:after,
.contactForm .selectContainer:after{ position: absolute; top: 2px; right: 2px; z-index: 2;  background: #fff url(images/dropdownArrowGray.svg) no-repeat center center / 12px auto; content: ''; width: 32px; height: 54px;}

.samplesForm .group10,
.samplesForm .input13{ display:none;}

/* loginForm */
.loginForm{ padding: 60px 0 94px; margin: 180px auto 0; background: #005491;}
.loginForm form{ margin: -184px auto 0; background: #fff; text-align: center; box-shadow: 0 3px 36px 0 rgba(0, 0, 0, 0.22); width: 485px; border-top: 14px solid #005491; box-sizing: border-box; padding: 38px 67px 45px;}
.loginForm input[type=text],
.loginForm input[type=password],
.loginForm input[type=email]{ font-family: Montserrat; color: #333; height: 58px; padding: 0 10px; width: 100%; box-sizing: border-box; border:2px solid rgba(112, 112, 112, 0.5); margin: 0 0 19px;}
.loginForm label{ text-align: left; margin: 0 0 3px; display: block; color: #0B5491; font-weight: 500;}
.loginForm label.checkbox{ text-align: center;  margin: 0 0 40px;}
.loginForm .row{ margin: 0 -16px;}
.loginForm .column{ float: left; width: calc(100% - 32px); margin: 0 16px 28px;}
.loginForm em{ font-family: SemplicitaPro; letter-spacing: 0.65px; color: #3b3d40; font-style: normal;}

/* storeLocator */
.storeLocator{ margin: 50px auto;}
.storeLocator .searchBarBox{ margin: 60px auto 50px; text-align: center;}
.storeLocator .searchBarBox input{ width: 500px; margin: 0 auto;}
.storeLocator #map{ background: #ccc; height:630px; width:100%; float: right; transition: 0.3s ease;}
.storeLocator .mapInfoBox{ font-family: Montserrat; font-weight: 300; box-shadow:1px 1px 4px #000; padding:12px 19px 14px 22px; background:#fff !important; color:#000; border-radius:3px; }
.storeLocator .mapInfoBox h3 { margin: 0 0 15px;}
.storeLocator .mapInfoBox span { background:url(images/infoboxTip.svg) no-repeat; width:11px; height:6px; display:block; position:absolute; bottom:-6px; left:11px; }
.storeLocator h2:before{ vertical-align: bottom; margin: 0 20px 0 0; content: ''; width: 37px; height: 37px; background: url(images/searchMapIcon.svg) no-repeat center center / contain; display: inline-block;}
body.admin-bar .pac-container{ transform: translate(1px,-34px)}
.storeLocator .storeList{ height: 630px; overflow-y: scroll; float: left; width: 0px; padding: 0; box-sizing: border-box;  transition: 0.3s ease;}
.storeLocator .storeList .wrap{font-weight: 500; line-height: 1.56;}
.storeLocator .storeList .storeBox{ box-sizing: border-box; position: relative; padding: 20px 30px 20px 0; border: solid #73cc34;  border-width: 0 0 1px; width: calc(100% - 20px); }
.storeLocator .storeList .storeBox span{  font-weight: bold; color: #777;}
.storeLocator .storeList .storeBox h3{ margin: 0; color: #73cc34; }
.storeLocator.withSearch .storeList{ width: calc(35% - 60px);}
.storeLocator.withSearch #map { width: 65%; }
.storeLocator .storeList .title{ color: #1583bf; font-weight: 600; line-height: 1.67; margin: 0 0 20px;}
.storeLocator .storeList .storeBox a.directions{ width: 26px; height: 19px; position: absolute; right: 2px; top:20px; background: url(images/directionsIcon.svg) no-repeat center center / contain; overflow: hidden; text-indent: -500px;}
.storeLocator .storeList .storeBox .info{ width: 26px; height: 23px; position: absolute; right: 2px; top:58px; background: url(images/infoIconMap.svg) no-repeat center center / contain; overflow: hidden; text-indent: -500px; cursor: pointer;}
.storeLocator .storeList .storeBox .storeProducts{ display: none; margin: 20px 0 0; color: #707070;}

.floatingBottomBar{ z-index: 10; letter-spacing: 0px; font-size: 0.8rem; width: 100%; background: #efefef; border-top: 1px solid #005491; position: fixed; left: 0; bottom: 0; transform: translateY(100%); transition: 0.3s ease; }
.floatingBottomBar .contentCenter{ padding: 10px 0;}
.floatingBottomBar.visible{ transform: translateY(0);}
.floatingBottomBar .button{padding: 10px 15px; margin: 0 10px 0 0; letter-spacing: 0px; font-size: 0.8rem;}
.loadGreen{ margin: 20px 0 0 0; width: 40px; height: 40px; background: url(images/loadGreen.svg) no-repeat center center / contain; animation:spin 4s linear infinite;}
.textAlertMap{ background: #e17a00; padding: 8px 10px; color: #fff; font-weight: bold; margin: 20px 0 0; border-radius: 12px;}

@keyframes spin { 
    100% { 
        -webkit-transform: rotate(360deg); 
        transform:rotate(360deg); 
    } 
}

/* productBoxes */
.productBoxes{ text-align: center; margin: 0 auto; position: relative;}
.productBoxes .theTitle{ line-height: 1; text-transform: uppercase; color: #1483bf; font-family: "rift"; font-weight: 500; font-size: 2rem; display: block; margin: -80px auto 35px;}
.productBoxes .theTitle span{ background: #fff; padding: 0 20px;}
.productBoxes a{ text-decoration: none;}
.productBoxes .column{ overflow: hidden; position: relative; margin-bottom: 20px; box-sizing: border-box;  border: solid 1px #ccc; border-radius: 10px; padding: 20px 20px 60px;}
.productBoxes .catTitle{ width: calc(100% - 24px); float: left; font-family: "rift"; font-weight: 500; line-height: 1; letter-spacing: 2.5px; color: #1483bf; text-transform: uppercase; margin: 30px 12px; font-size: 2rem; padding: 0 0 20px; box-sizing: border-box; border-bottom: 2px solid #73cc34;}
.productBoxes .image{ display: block; width: 80%; height: 300px; margin: 0 auto 20px; background: no-repeat center center / contain; transition: 0.3s ease;}
.productBoxes .button:hover{ opacity: 1;}
.productBoxes .image:hover{ transform: scale(1.05)}
.productBoxes .text{ text-align: center; font-size: 0.8rem;}
.productBoxes strong{ line-height: 1.2; color: #73cc34; font-size: 1rem; display: block; margin: 0 0 10px;}
.productBoxes .description{ font-size: 0.8rem; line-height: 1.2;}
.productBoxes .description strong{ margin: 0;  color: #005491; font-size: 0.8rem; display: inline-block; }
.productBoxes .button{ font-size: 1rem; padding: 10px 15px; margin: 20px auto 0; opacity: 0.3;}
.productBoxes .row .column:not(:hidden):nth-child(4n+1){ clear: both;}
.productBoxes .bottomArea{ vertical-align: middle; transition: 0.3s ease; box-sizing: border-box; width: 100%; font-size: 0.8rem; cursor: pointer; position: absolute; left: 0; bottom: 0; background: rgba(0, 131, 191,0.1); padding: 10px 20px; color: #666; text-align: center;}
.productBoxes .bottomArea .customCheck{ position: relative; border-radius: 4px; transition: 0.3s ease; display: inline-block; content: ''; width: 16px; height: 16px; margin: 0 10px; vertical-align: sub; background: #e5f2f8; border: 1px solid #e5f2f8;}
.productBoxes .bottomArea.active{ background: rgba(0, 131, 191,1); color: #fff;}
.productBoxes .bottomArea.active .customCheck{ border-color: #fff;}
.productBoxes .bottomArea .customCheck:after{ display: block; filter: grayscale(1); content: ''; background: url(images/markerP.svg) no-repeat center center / contain; position: absolute; width: 20px;
  height: 20px; left: -2px; top: -2px; transition: 0.3s ease;}
.productBoxes .bottomArea.active .customCheck:after{filter: grayscale(0); }
.categoryLinks{ text-align: center; font-size: 1rem; margin: 60px auto; }
.categoryLinks div{ font-weight: bold; border-radius: 10px; padding: 12px 20px; text-transform: uppercase; cursor: pointer; margin: 8px; display: inline-block; background: #666; color: #fff; transition: 0.3s ease;}
.categoryLinks div:hover{ background:#73cc34; }

/* event table */
table.nsm2024{ margin: 0 auto 60px;}
table.nsm2024,
table.nsm2024 td{ font-size: 0.9rem; text-align: center; border: solid 1px #ccc; border-collapse: collapse;}
table.nsm2024 td{ width: 20%;}
table.nsm2024 td{ text-align: left; vertical-align: top; padding: 8px 10px;}
table.nsm2024 .header{ padding:8px 0; text-align: center; width: calc(100% + 20px); transform: translate(-10px,-8px);display: block; background: #005491; color: #fff; font-weight: normal;}
table.nsm2024 .header strong{ display: block;}
table.nsm2024 td{ font-weight: bold; color: #005491;}
table.nsm2024 td ul{ font-weight: normal; margin: 0 0 30px; color: #000; padding: 0 0 0 18px;}
table.nsm2024 td.center{ text-align: center;}
table.nsm2024 td.black{ color: #000;}

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

/* mobile menu hide on desktop */
@media screen and (min-width:1199px){
	footer .right .divMessage{ text-align: right;}
}

/* big desktop */
@media screen and (min-width:1500px){

}

/* small desktop */
@media screen and (min-width:0px) and (max-width:1499px){
	body{ min-width: 1200px;}
	.contentCenter, 
	.wooContent .woocommerce,
	.textWithImage .contentCenter,
	footer .contentCenter,
	.brandsList .contentCenter,
	.executiveTeam .contentCenter,
	.newsList .contentCenter,
	.newsDetail .contentCenter,
	.recommendedNews .contentCenter,
	.mobileMenu .contentCenter,
	.productsList .contentCenter{ width: 1180px;}
	
	html{ font-size: 16px;}
	
	header .mainMenu { margin: 45px auto 0;}
	header a span { padding: 0 4px;}
	header .sub-menu{ top: 56px;}
	header:before{ left: calc(50% - 624px); }
	
	footer .center,
	footer .right{ width: 410px;}
	footer .copy { width: 822px;}
	footer .right form button, 
	footer .right form .button { padding: 12.5px 20px;}
	
	.homeBrands .arrowLeft{ left: 0;}
	.homeBrands .arrowRight{ right: 0;}
	
	.textWithImage .text{ padding: 40px;}
	
	.brandsList .brand { height: 271px;}
	
	.recipesList ul li { height: 378px;}
	.timeline .row.r-1 h2 { left: 165px;}
	.timeline .row.r-1 .image { width: 227px;}
	.timeline .row.r-3 h2 { left: 137px;}
	.timeline .row.r-2 .image { width: 237px;}
	.timeline .row.r-2 h2 { right: 146px;}
	.timeline .row.r-3 .image { width: 217px;}
	.timeline .row.r-5 .image { width: 87%;}
	.timeline .row.r-5 .text { right: 20px; width: 82%;}
	.timeline .row.r-4 .text { top: 85px;}
	.timeline .row.r-4 h2 { padding: 0 77px 0 100px;}
	.timeline .row.r-5 h2 { left: 254px;}
	.timeline .row.r-7 .text { width: 86.6%; box-sizing: border-box; padding: 0 20px;}
	.timeline .row.r-9 .image { width: 257px;}
	.timeline .row.r-9 h2 { left: 164px;}
	.timeline .row.r-6 .text,
	.timeline .row.r-10 .text{ width: 485px; box-sizing: border-box; padding: 0 20px;}	
	.timeline .row.r-8 .image { width: 227px; margin-top: 26px;}
	.timeline .row.r-8 h2 { left: 106px;}
	.timeline .row.r-6 h2 { margin: 0 66px 0 0;}
	.timeline .row.r-7 h2 { margin: 0 0 0 71px;}
	.timeline .row.r-10 h2 { margin: 0 63px 0 0;}
	.timeline .row.r-12 .image { width: 237px;}
	.timeline .row.r-12 h2 { right: 120px;}
	.timeline .row.r-13 .image { width: 210px;}
	.timeline .row.r-13 h2 { left: 148px;}
	.timeline .row.r-14 .text { padding: 36px 248px 9px 10px;}
	.timeline .row.r-14 .image { width: 380px; right: 7px; top: -24px;}
	.timeline .row.r-11 .image { width: 233px; margin: 80px 0 0 77px; border-radius: 10px; overflow: hidden;}
	.timeline .row.r-11 .text { padding: 29px 15px 8px 186px;}
	.timeline .row.r-11 h2 { padding: 0 0 0 163px;}
	
	.executiveTeam .image { height: 460px;}
	.executiveTeam .theDetail { width: 756px;}
	
	.newsList .newsLinkBox .image { height: 199px;}
	.newsList .newsLinkBox .text .postTitle { height: 125px;}
	.newsDetail .text{ width: 100%;}
	.recommendedNews .image { height: 452px;}
	
	.row.leadership .column4 { width: calc(25% - 30px); margin: 0 15px;}
	.iconCulture1:before,
	.iconCulture2:before,
	.iconCulture3:before,
	.iconCulture4:before { width: 80%; height: 230px;}
	
	.filterContainer .filters .filterBox { width: 240px;}
	
	.featuredProducts a::before { width: 320px; height: 320px; left: calc(50% - 160px); top: 0px;}
	
	.productBoxes .image { width: 90%;}
	
	.newsList .newsLinkBox .text .brand{ width: 210px;}
}

/* tablet */
@media screen and (min-width:0px) and (max-width:1199px){
	body{ min-width: 768px;}
	.contentCenter, 
	.wooContent .woocommerce,
	.textWithImage .contentCenter,
	footer .contentCenter,
	.brandsList .contentCenter,
	.executiveTeam .contentCenter,
	.newsList .contentCenter,
	.newsDetail .contentCenter,
	.recommendedNews .contentCenter,
	.mobileMenu .contentCenter,
	.productsList .contentCenter,
	.contactForm form,
	.productsList .filterContainer{ width: 738px;}
	
	.showDesktop, .hideIpad{ display: none !important;}
	.showIpad{ display: block !important;}
	
	.statsBar{ font-size: 1.6em;}
	.statsBar strong { font-size: 2em;}
	
	header:before { left: calc(50% - 404px);}
	header .mainMenu{ display: none;}
	.mobileMenu .column.column-1,
	.mobileMenu .column.column-2,
	.mobileMenu .column.column-3{ width: 33.3333%; }
	.mobileMenu .column.column-4{ width:100%;}
		
	footer .logo { margin: 0 auto 29px;}
	footer .left { width: 100%; margin: 0 auto; text-align: center;}
	footer .center,
	footer .right { width: 100%; text-align: center; margin: 0 auto;}
	footer .center{ margin: 30px auto;}
	footer .center ul li { width: 100%;}
	footer .center ul{ text-align: center;}
	footer .termsMenu { display: block; margin: 0 auto; padding: 0;  text-align: center;}
	footer .termsMenu li { margin: 10px auto; display: block;}
	footer .socialLinks { margin: 0 auto; float: none; text-align: center;}
	footer .copy { margin: 30px auto 0; text-align: center; width: 100%;}
	
	.button{ letter-spacing: 1px;}
	
	.homeBrands .wrapper { width: 566px;}
	.homeBrands ul li { width: 566px;}
	.homeBrands .brand0 { width: 252px; height: 252px; position: absolute; left: 0;	top: 0;}
	.homeBrands .brand1 { width: 147px; height: 183px; position: absolute; left: 262px;	top: 0;}
	.homeBrands .brand2 { width: 147px; height: 183px; position: absolute; right: 0; top: 0;}
	.homeBrands .brand3 { width: 252px; height: 120px; position: absolute; left: 0px; bottom: 0;}
	.homeBrands .brand4 { width: 304px; height: 189px; position: absolute; right: 0; bottom: 0;}
	.homeBrands a .theLogo{ height: 100%;}
	
	.homeNewsTradeShows .news { padding: 0 0 40px; width: 100%; border-right: none;  border-bottom: solid 2px #73cc34; margin: 0 0 40px;}
	.newsBox .image { height: 202px;}
	.homeNewsTradeShows .events { width: 100%;}
	.homeNewsTradeShows .events .eventBox:last-child{ margin-bottom: 0;}
	.featuredRecipes .left { width: 45%;}
	.featuredRecipes .right { width: calc(55% - 30px);}
	.featuredRecipes .arrowRight{ margin-right:0;}
	
	.featuredProducts ul li { width: 50%;}
	
	.brandsList .brand { height: 300px; width: calc(50% - 32px);}
	.brandsList .brand.horizontal { width: calc(100% - 32px);}
	.brandsList .brand .theLogo { width: 45%;}
	.brandsList .brand .text { box-sizing: border-box;  padding: 15px; transform: none; left:auto; right: 0; width: 55%; height: 100%;}
	
	.bannerImageText .text { width: 50%; margin: 0;}
	.bannerImageText .image { width: 60%;}
	
	.recipesList ul li { width: calc(50% - 24px);}
	
	body.page-id-186 .twi0 .image,
	body.page-id-186 .twi1 .image,
	body.page-id-186 .twi2 .image,
	body.page-id-186 .twi3 .image{ width: 100%;}
	.textWithImage.Left .text,
	.textWithImage.Right .text { float: left; padding: 30px; width: 100%; position: relative; transform: none; right: auto; left: auto; top: auto;} 
	
	.timeline .left .row{ padding: 0 76px 0 0;}	
	.timeline .right .row{ padding: 0 0 0 76px;}	
	.timeline .row h2{ padding: 0 !important; margin: 0 0 30px !important; right: auto !important; left: auto !important; text-align: center !important; top:auto !important; position: relative !important;}
	.timeline .row .image { right: auto !important; position: relative !important; top: auto!important; width: 100% !important; margin: 0 0 30px !important; padding: 0 !important;}
	.timeline .row .hLine { top: 150px !important;}
	.timeline .text{ padding: 0 !important; right: auto !important; margin: 0 !important; float: left; left: auto !important; top: auto !important; width: 100% !important; position: relative !important;}
	.timeline .row.r-4 .image,
	.timeline .row.r-11 .image,
	.timeline .row.r-14 .image{ margin-bottom: 0 !important;}
	.timeline .row.r-5 .text{ color: #000;}
	.timeline .row.r-11 .text,
	.timeline .row.r-4 .text,
	.timeline .row.r-14 .text{ margin: 5px auto 0 !important; border-radius: 10px; overflow: hidden; padding: 20px !important;}
	.timeline .row.r-6 .text,
	.timeline .row.r-10 .text,
	.timeline .row.r-7 .text{ padding: 0 20px !important;}
	
	.executiveTeam .row { margin: 0 -10px;}
	.executiveTeam .row .column.column3 { width: calc(33.3333% - 20px); margin: 0 10px 20px;}
	.executiveTeam .image { height: 330px;}
	.executiveTeam .theDetail { width: 738px; top: 350px;}
	.executiveTeam .column.c-1 .theDetail,
	.executiveTeam .column.c-4 .theDetail{left: -252px;}
	.executiveTeam .column.c-3 .theDetail, 
	.executiveTeam .column.c-4 .theDetail, 
	.executiveTeam .column.c-5 .theDetail { bottom: calc(100% + 20px);}
	
	.newsList .newsLinkBox { width: calc(50% - 22px);}
	.newsList .newsLinkBox .text .postTitle{ height: auto;}
	
	.recommendedNews .newsLinkBox .text { width: 60%; padding: 20px;}
	.recommendedNews .image { width: 45%;}
	
	.iconCulture1:before, 
	.iconCulture2:before, 
	.iconCulture3:before, 
	.iconCulture4:before { width: 80%; height: 135px;}
	
	.filterContainer .filters .filterBox{ margin: 0 5px 20px;}
	.printIcon,
	.emailPdfIcon{ vertical-align: middle;}
	
	.productsList .product .images{ width: 360px;}
	.productsList .product .text { width: calc(100% - 360px);}
	.productsList .product .images ul { width: 250px; height: 250px;}
	.productsList .container{ margin: 0;}
	.productsList .product .popupInfo { width: 738px; padding: 20px 30px 20px 20px;}
	.productsList .product .popupInfo .column{ width: calc(100% - 24px); margin: 10px 0;}
	.productsList .product .popupInfo .row{ margin: 0;}
	
	.filterContainer .filters .filterBox { width: 220px;}
	
	
	bloquote,
	div.bloquote{ width: 80%;}
	bloquote:before,
	div.bloquote:before { width: 46px; left: -55px;}
	bloquote:after,
	div.bloquote:after{ width: 46px; right: -55px;}
	
	.storeLocator.withSearch .storeList,
	.storeLocator.withSearch #map{ width: 100%;}
	.storeLocator.withSearch .storeList{ height: auto; margin-top: 30px;}
	.storeLocator .storeList .storeBox{ width: 100%;}
	.storeLocator .storeList{ height: auto;}
	
	body.single-wff_brand .textWithImage .image { width: 100%; margin: 0 0 30px;}
	body.single-wff_brand .textWithImage .text { width: 100%; padding: 0; text-align: center;}
	body.single-wff_brand .textWithImage .text h2 { text-align: center;}
	body.single-wff_brand .textWithImage .text h2::after { margin: 30px auto;}
	.headerImage .theLogo { width: 350px;}
	body.single-wff_brand .headerImage,
	body.single-wff_product .headerImage{ height: 380px;}
	
	.productBoxes .column.column4{ width: calc(50% - 24px)}
	.productBoxes .row .column:not(:hidden):nth-child(4n+1){ clear: none;}
	.productBoxes .row .column:not(:hidden):nth-child(2n+1){ clear: both;}
	
	.productsList .product .exclude{ width: 100%;}
	
	.newsList .newsLinkBox .image {   height: 189px;}
	.newsList .newsLinkBox .text .brand{ width: 100%;}
	.newsList .newsLinkBox .text .date { float: left; width: 100%; text-align: left;}
	.newsList hr{ display: none;}
	
	.sellSheetList .brand{ width: calc(100% - 30px); }
	.sellSheetList .brand .text{ font-size: 1rem;}
	.sellSheetList .brand .text .buttons a{ font-size: 0.9rem; }

}

/* phone */
@media screen and (min-width:0px) and (max-width:767px){
	body{ min-width: 320px;}
	.contentCenter, 
	.wooContent .woocommerce,
	.textWithImage .contentCenter,
	footer .contentCenter,
	.brandsList .contentCenter,
	.executiveTeam .contentCenter,
	.newsList .contentCenter,
	.newsDetail .contentCenter,
	.recommendedNews .contentCenter,
	.mobileMenu .contentCenter,
	.productsList .contentCenter,
	.contactForm form,
	.productsList .filterContainer{ width: 300px;}
	
	.hideIphone,
	html #wpadminbar,
	.homeBrands .arrowLeft,
	.homeBrands .arrowRight,
	.headerImage .moreInfo{ display: none !important;}
	.showIphone{ display: block !important;}
	
	html{ margin-top: 0 !important;}
	
	h2,
	.timeline h2 { font-size: 2.1rem;}
	.homeSlider ul li h1, 
	.headerImage h1{ font-size: 2rem;}
	.fullwidthBanner h1 span,
	.fullwidthBanner h2 span, 	
	.newsDetail h1 { font-size: 1.6rem;}
	.gallery-caption, 
	.contactForm h2 em, 
	.loginForm em { font-size: 0.8rem; line-height: 1.2;}
	body, 
	.featuredProducts .theText, 
	.productList .theText, 
	.eventBox .title, 
	.newsBox .title, 
	body.page-id-188 .fwt-0{ font-size: 1rem;}
	.productsList .product .text .link{ font-size: 0.76rem;}
	
	header{ height: 70px;}
	header .logo { margin: 10px 0 0 0; width: 157px; height: 50px;}
	header .contentCenter,
	.mobileMenu .contentCenter{ width: calc(100% - 30px); margin: 0 auto; height: auto !important;}
	header .menuIcon { margin: 18px 0 0 0px;}
	.mobileMenu{ top: 70px;}
	.mobileMenu .column.column-1, 
	.mobileMenu .column.column-2, 
	.mobileMenu .column.column-3{ width: 50%; text-align: center; box-sizing: border-box; padding: 0 10px;}
	.mobileMenu .column.column-4{ width: 100%; text-align: center;}
	
	footer .right input{ width: 200px;}
	footer .logo { width: 219px; height: 66px;}
		
	section{ padding: 70px 0 0 0;}
	.mobileMenu a.menu-item-641 { padding: 6px 12px; margin: 10px 0 0;}
	
	.homeSlider { height: 500px;}
	.homeSlider .arrowLeft, .homeSlider .arrowRight{ display: none;}
	.homeSlider .displayTable { background: linear-gradient(to right,rgba(0,0,0,0.48) 0%,rgba(0,0,0,0) 96%);}
	.homeSlider ul li{ text-align: center;}
	
	.homeBrands .wrapper{ width: 100%; height: auto;}
	.homeBrands ul li { width: 300px; height: 455px; margin: 0 0 10px;}
	.homeBrands .brand0,
	.homeBrands .brand3{ width: 145px; height: 145px;}
	.homeBrands .brand1 { width: 145px; height: 145px; left: 155px;}
	.homeBrands .brand4 { width: 145px; height: 145px;}
	.homeBrands .brand2 { width: 300px; height: 145px; right: 0; top: 155px;}
	.homeBrands ul { width: 100%; height: auto; position: relative; left: auto; top: auto;}
	
	.newsBox.box0 { margin: 0 0 20px; width: 100%;}
	.newsBox .image { height: 162px;}
	.newsBox { margin: 0 0 20px; width: 100%;}
	.homeNewsTradeShows .news .button.viewAll { margin: 20px auto; float: none; display: block; clear: both;}
	
	.featuredRecipes .left { width: 100%; padding: 0; text-align: center; margin: 0 0 40px;}
	.featuredRecipes h2 { text-align: center;}
	.featuredRecipes h2:after{ left: calc(50% - 50px);}
	.featuredRecipes .right { width: 100%; height: 430px;}
	.featuredRecipes .right ul li { width: 300px;}
	.featuredRecipes .arrowLeft{ margin: 47px 98px 0 0;}
	
	.featuredProducts ul li { width: 100%; margin: 20px 0;}
	.featuredProducts a:before{ opacity: 0.2;}
	.featuredProducts .theImg{ height:250px; }
	.featuredProducts a::before { width: 220px; height: 220px; left: calc(50% - 110px);}
	
	.fullwidthBanner .button { margin: 10px 0; padding: 21px 10px; display: block;}
	
	.headerImage { height: 250px;}
	
	.brandsList .brand {  width: calc(100% - 32px); height: auto;}
	.brandsList .brand .theLogo { width: 100%; height: 200px; position: relative;}
	.brandsList .brand .text { left: auto; right: auto; width: 100%; height: auto; position: relative;}
	
	.statsBar .column.column3 { width: 100%; display: block; border-right: none; border-bottom:6px solid #73CC34}
	.statsBar .column:last-child{ border-bottom: none;}
	
	.bannerImageText .text { width: 100%; padding: 20px;}
	.bannerImageText .text .button { padding: 21px 0; display: block;}
	.bannerImageText .image { width: 100%; height: 182px; position: relative; right: auto; top: auto;}
	.bannerImageText .contentCenter{ height: auto;}
	
	.recipesList ul li { width: calc(100% - 24px);}
	
	.timeline .row{ float: left !important; margin: 20px 0 !important; padding: 0 !important; }
	.timeline .row.r-5 .text{ text-align: center;}
	
	.executiveTeam .row .column.column3 { width: calc(100% - 20px);}
	.executiveTeam .image { height: 420px;}
	.executiveTeam .theDetail { width: 100%; top: auto; position: relative; left: auto !important; margin: 10px 0 0 0;}
	.executiveTeam .column .line{ display: none !important;}
	
	.newsList .newsLinkBox .image { height: 159px;}
	.greenLineText span { padding: 0 30px;}
	.paginationDiv a, 
	.paginationDiv span.current{ padding: 10px 12px;}
	.paginationDiv { margin: 20px auto 0;}
	.recommendedNews .image{ width: 100%; height: 210px; position: relative; left: auto; top: auto; border-radius: 12px 12px 0 0;}
	.recommendedNews .newsLinkBox .text { width: 100%; padding: 20px; position: relative; right: auto; top: auto; transform: none;}	
	.recommendedNews .newsLinkBox .text .postTitle { margin: 0 0 20px;}
	.recommendedNews  .button.greenBorder { padding: 21px 0; display: block;}
	
	.fullwidthText  .size-full{ display: block; width: 90%; margin: 0 auto 30px; float: none;}
	.fullwidthText .button{ padding: 21px 0; display: block;}
	
	.row.leadership .column4 { width: calc(100% - 30px); margin: 0 15px 40px;}
	
	.contactForm form{ padding: 20px;}
	.row .column.column2,
	.row .column.column3{ width: calc(100% - 24px);}
	
	.contactForm input[type="file"] { width: 260px;}
	.contactForm .button{ padding: 21px 0; display: block;}
	
	.loginForm form {  width: 300px; padding: 20px;}
	
	.filterContainer .filters .filterBox { width: 210px;}
	.productsList .product .images { width: 300px;}
	.productsList .product .images .prev{ left:0;}
	.productsList .product .images .next { right: 0;}
	.productsList .product .text { width: 100%; margin: 30px 0 0;}
	.productsList .product .popupInfo{ position: relative; width: 300px; right: 0; top: auto; margin: 20px 0 0 -26px;} 
	.productsList .product .text .link:after { height: 15px;}
	.productsList .product .popupInfo .close { right: 12px; top: 12px;}
	.productsList .product .popupInfo .column { width: 100%;}
	
	.row .column.column80,
	.row .column.column20{ width: calc(100%);}
	.contactForm .repeater .oneRow .remove{ top: 13px;}
	.contactForm .repeater .oneRow { padding: 5px 60px 0 20px;}
	
	.storeLocator .searchBarBox input{ width: 100%;}
	.storeLocator #map{ height: 360px;}
	
	.headerImage .theLogo { width: 220px;}
	body.single-wff_brand .headerImage,
	body.single-wff_product .headerImage{  height: 240px;}
	.fullwidthText .romance { font-size: 1rem; margin: 102px auto 0;}
	
	.productBoxes .column.column4{ width: calc(100% - 24px)}
	.productBoxes .row .column:not(:hidden):nth-child(2n+1){ clear: none;}
		
	table.nsm2024{ width: 100%; display: block; box-sizing: border-box; border: none;}
	table.nsm2024 td{ width: 100%; display: block; box-sizing: border-box; margin: 10px auto;}
	
	
	.callouts .box.box1,
	.callouts .box.box2,
	.callouts .box.box3{ margin: 0; padding: 10px 0; width:100%; font-size: 1.6rem; border:solid #73CC34; border-width: 0 0 3px !important;}
	.callouts .box:last-child{ border-bottom: none;}
	
	.newsList .newsLinkBox { width: calc(100% - 22px);}
	
	.sellSheetList .brand .theImg { display: block; width: 100%;}
	.sellSheetList .brand .text { display: block;}
	.sellSheetList .brand .text .buttons a { display: block; text-align: center;}
	
	.g-recaptcha { transform: scale(0.8) translateX(-26px);}
}