@charset "utf-8";
/*
////
//// General Header
////
--------------------------------------------------------------*/
#fullWrp { margin: 0 auto; min-height: 100%; background: #fff; }
/* Main Header
--------------------------------------------------------------*/
@media all and (min-width: 887px) {
.navSml { display: none !important; }
.nav-hamburger, .mobile-cart { display: none!important; }
#mainHdr { background: #fff; text-align: center; position: fixed; left: 0; top: 0; width: 100%; z-index: 220; padding: 0 0; box-shadow: 0 -5rem 2.5rem 5rem rgba(0,0,0,0.2); }
.scrolling #mainHdr #mainPrimHdr { padding-top: 0.6rem; padding-bottom: 0.6rem; }
#mainHdr header { position: relative; }
#mainHdr .headerCtr { margin: 0 auto; padding: 0 2rem; max-width: 1150px; position: relative; }
#mainHdr #mainPrimHdr { padding-top: 0.6rem; padding-bottom: 0.6rem; -webkit-transition-property: all; -webkit-transition-duration: 350ms; -webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -moz-transition-property: all; -moz-transition-duration: 350ms; -moz-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-property: all; transition-duration: 350ms; transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); }
#mainHdr:after { content: ' '; background: rgba(0,0,0,0.9); display: block; left: 0; top: -136%; height: 100%; position: absolute; width: 100%; z-index: -1; -webkit-transition-property: all; -webkit-transition-duration: 350ms; -webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -moz-transition-property: all; -moz-transition-duration: 350ms; -moz-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-property: all; transition-duration: 350ms; transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); }
.scrolling #mainHdr #mainLogo .site-logo img { position: relative; }
#mainLogo { margin: 0; display: inline; vertical-align: top; float: left; }
#mainLogo .site-logo { width: 20rem; display: -moz-inline-stack; display: inline-block; zoom: 1; *display:inline;
vertical-align: top; text-align: center; line-height: 64px; height: 64px; background: url(../images/main_logo.svg) no-repeat center center; background-size: 20rem auto; text-indent: -4000px; -webkit-backface-visibility: hidden; }
#mainLogo .site-logo img { display: inline; vertical-align: top; width: 200px; padding-top: 13px; }
#mainNav { display: block; margin-left: 200px; }
#mainNav .site-nav { display: flex; justify-content: space-around; padding: 19px 55px 7px 14px; text-transform: lowercase; max-width: 802px; margin: 0 auto; }
#mainNav .site-nav li { display: inline; font-size: 14px; line-height: 30px; padding: 0px 8px; letter-spacing: 0.07em; text-transform: uppercase; letter-spacing: 0; white-space:nowrap; }
#mainNav .site-nav li:last-child { padding-right: 0; }
#mainNav .site-nav li.nav2 { display: inline; padding: 0; margin: 0; display: flex; flex-grow:1; }
#mainNav .site-nav li.nav2 ul { display: inline; display: flex; justify-content: space-evenly; flex-grow: 1; }
#mainNav .site-nav li.nav2 li:last-child { padding: 0 8px;}
#mainNav .site-nav li.cart { padding-right: 0; position: absolute; right: 0; top: 21px; }
#mainNav .site-nav li.search { padding: 0 10px; }
#mainNav .site-nav li a { color: #5e4637; position: relative; display: -moz-inline-stack; display: inline-block; zoom: 1; *display:inline; }
#mainNav .site-nav li a:after { content: ' '; left: 50%; width: 0; position: absolute; bottom: -1px; height: 2px; background: #5e4637; display: block; -webkit-transition-property: all; -webkit-transition-duration: 350ms; -webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -moz-transition-property: all; -moz-transition-duration: 350ms; -moz-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-property: all; transition-duration: 350ms; transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); }
.devDesktop #mainNav .site-nav li a:hover:after { left: 0; width: 100%; bottom: -1px; }
#mainNav .site-nav li a span.sml { display: none; }
#mainNav .site-nav li a .tmb, #mainNav .site-nav li a .desc { display: none;}
#mainNav .site-nav li.site-nav--active a:after { background: #ffee3b; width: 100%; left: 0; }
#mainNav .site-nav li a.viewCart { vertical-align: top; position: relative; z-index: 2; top: -4px; }
#mainNav .site-nav li a.viewCart .icon { width: 30px; height: 30px; }
#mainNav .site-nav li a.viewCart .count { color: #fff; position: absolute; left: 20px; top: -8px; text-align: center; font-size: 13px; line-height: 23px; height: 23px; min-width: 11px; font-weight: bold; letter-spacing: -0.03em; background: #fcb330; padding: 0 6px; }
#mainNav .site-nav li a.viewCart:after { display: none!important; }
#mainNav .site-nav li div.secLvl { position: fixed; left: 0; width: 100%; top: 125px; background: #fff; box-shadow: inset 0 5rem 2.5rem -5rem rgba(0,0,0,0.2), calc(-49.15vw + 5rem) 7rem 2.5rem -5rem rgba(0,0,0,0.12), calc(49.15vw - 5rem) 7rem 2.5rem -5rem rgba(0,0,0,0.12); font-weight: 400; display:block!important; max-height:0; overflow:hidden; -webkit-transition-property: all; -webkit-transition-duration: 350ms; -webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -moz-transition-property: all; -moz-transition-duration: 350ms; -moz-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-property: all; transition-duration: 350ms; transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); }
#mainNav .site-nav li:hover div.secLvl { max-height: 366px; }
#mainNav .site-nav li div.secLvl a:after { height: 1px; bottom: 3px!important; }
#mainNav .site-nav li div.secLvl .thiLvl { margin: 0 auto; padding: 0 0; max-width: 1150px; }
#mainNav .site-nav li div.secLvl .thiLvl>ul { padding: 22px 0 22px 0; position:relative; }
#mainNav .site-nav li div.secLvl li { padding: 0; font-size: 13px; line-height: 33px; }
#mainNav .site-nav li div.secLvl .cat { float: left; width: 25%; padding: 0 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border-left: solid 1px #e5e5e5; }
#mainNav .site-nav li div.secLvl .cat:first-child { border-left: 0; }
#mainNav .site-nav li div.secLvl .cat li { display:block; text-align:left; padding: 0;}
#mainNav .site-nav li div.secLvl .cat li:last-child { margin-bottom: -3px;}
#mainNav .site-nav li div.secLvl .cat>span.fst { display:block; text-align:left; margin-bottom: -9px; position: relative; top: -9px; }
#mainNav .site-nav li div.secLvl .cat>span.fst a:first-child { color: #f2b54e; text-transform:uppercase; font-size: 17px; }
#mainNav .site-nav li div.secLvl .cat>span.fst a:first-child:after { background-color: #f2b54e; height: 2px; bottom: -1px!important; }
#mainNav .site-nav li div.secLvl .cat .all { float: right; color: #929292; font-weight: normal; }
#mainNav .site-nav li div.secLvl .cat .all:after { background: #929292; }
/*#mainNav .site-nav li div.secLvl:after { content: ' '; position:absolute; left: 0; width: 100%; height: 2.5rem; bottom: -2.5rem;
box-shadow: inset 0 5rem 2.5rem -5rem rgba(0,0,0,0.2); }*/
#mainHdr #mainContent { padding-top: 0; }
#mainNav .searchWrp { position: relative; padding-right: 30px; display: -moz-inline-stack; display: inline-block; zoom: 1; *display:inline;
top: 1px; margin-top: -3px; }
#mainNav .searchWrp .formWrp { width: 36px; margin-right: -35px; position: relative; z-index: 10; border: 0; background: none; -webkit-transition: 300ms ease-out all; transition: 300ms ease-out all; }
#mainNav .searchWrp .formWrp input { width: 100%; color : #fff; background: rgba(0,0,0,0.01); font-size: 16px; border: 0; height: 36px; padding-right: 36px; font-weight: 400; padding-left: 10px; }
#mainNav .searchWrpOpen .formWrp { width: 172px; /*box-shadow: inset 0 0 0 1px #fff;*/ background: #363132; }
#mainNav .searchWrp .btn { position: absolute; z-index: 0; background: none; right: 0; top: 0; width: 30px; text-align: center; line-height: 34px; }
#mainNav .searchWrp .btn .icon { width: 23px; height: 23px; }
#mainNav .searchWrpOpen .btn { z-index: 20; }
#mainHdr + #MainContent { padding-top: 188px; -webkit-transition-property: padding; -webkit-transition-duration: 350ms; -webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -moz-transition-property: padding; -moz-transition-duration: 350ms; -moz-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-property: padding; transition-duration: 350ms; transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); }
.scrolling #mainHdr + #MainContent { padding-top: 60px; }
}
@media all and (min-width: 1020px) {
#mainNav .site-nav li { padding: 0 19px; }
#mainNav .site-nav li.nav2 li:last-child { padding: 0 19px;}
#mainNav .site-nav li div.secLvl .cat { float: left; width: 25%; padding: 0 20px; }
#mainNav .site-nav li div.secLvl .thiLvl { padding: 0 2rem; }
#mainNav .site-nav li div.secLvl .thiLvl>ul { padding: 22px 0 22px 140px; position:relative; }
#mainNav .site-nav li div.secLvl .thiLvl>ul:before { content: ' ' ; display:block; position:absolute; left: 0; top: 0; height: 100%; width: 140px; background:url(../images/main_nav_bg.jpg) center top no-repeat ; background-size: cover; }
}
@media all and (min-width: 1180px) {
#mainNav .site-nav li div.secLvl .thiLvl>ul { padding: 22px 0 22px 200px; }
#mainNav .site-nav li div.secLvl .thiLvl>ul:before { height: 100%; width: 200px; }
#mainNav .site-nav li div.secLvl .cat { padding: 0 30px; }
}
/* Checkout menu
-----------------------------*/
@media all and (min-width: 887px) {
/*.checkoutHdr #mainSubHdr { line-height: 34px; }*/
.checkoutHdr #mainLogo .site-logo { width : 140px; height: 40px; background-size: 140px auto; }
.checkoutHdr #mainSubHdr .rgt { text-transform: uppercase; }
.checkoutHdr #mainNav .site-nav { padding: 9px 67px 0px 14px; height: 35px; text-align: right; display: block; max-width: none; }
.checkoutHdr #mainNav .site-nav li { line-height: 28px; top: 13px; padding-right: 0; }
.checkoutHdr #mainNav .site-nav li .lock { top: 2px; position: relative; margin-right: 4px; }
.checkoutHdr #mainHdr + article { margin-top: 106px; }
.checkoutHdr #hdrCartCont { top: 54px; }
}
/* Main Header Mobile
--------------------------------------------------------------*/
@media all and (max-width: 886px) {
.navLg { display: none!important; }
#mainHdr #mainSubHdr .headerCtr { padding: 0 2rem; }
/*burger icon + animation*/
.nav-hamburger { background: transparent none repeat scroll 0 0; border: 0 none; cursor: pointer; display: block; height: 25px; margin-bottom: auto; margin-top: auto; outline: medium none; padding: 0; position: relative; transition: all 0.3s ease-in-out 0s; width: 28px; }
.nav-hamburger::before, .nav-hamburger::after, .nav-hamburger span { background-color: #5e4637; transition: all 0.3s ease-in-out 0s; }
.nav-hamburger::before, .nav-hamburger::after, .nav-hamburger span { background-color: #5e4637; }
.nav-hamburger::before, .nav-hamburger::after { content: ""; height: 2px; left: 0; position: absolute; top: 50%; transform-origin: 50% 50% 0; width: 100%; }
.nav-hamburger span { height: 2px; left: 0; overflow: hidden; position: absolute; text-indent: 200%; top: 50%; width: 100%; cursor: pointer; }
.nav-hamburger::before { transform: translate3d(0px, -9px, 0px); }
.nav-hamburger::after { transform: translate3d(0px, 9px, 0px); }
.menuOpen .nav-hamburger span { background-color: #5e4637; opacity: 0; }
.menuOpen .nav-hamburger::before { background-color: #5e4637; transform: rotate3d(0, 0, 1, 45deg); }
.menuOpen .nav-hamburger::after { background-color: #5e4637; transform: rotate3d(0, 0, 1, -45deg); }
.nav-hamburger { position: absolute; left: 2rem; top: 13px; z-index: 1001; cursor: pointer; margin-top: 0; }
#mainLogo { margin: 0; }
#mainNav .site-nav { display: block; top: 0; bottom: calc(104px - 100vh); left: 0; right: 0; overflow-y: auto; position: absolute; padding: 0; }
#mainNav .site-nav ul, #site-menu .site-nav li { margin: 0; padding: 0; }
#mainNav .site-nav ul ul { padding: 0; margin: 0; position: static; overflow: hidden; }
#mainNav .site-nav li { padding: 0; display: block; text-align: left; background: #fff; }
#mainNav .site-nav li.fst { padding-top: 10px; }
#mainNav .site-nav li.lst { padding-bottom: 10px; }
#mainNav .site-nav li a { background: #ffffff; display: block; padding: 10px 2rem 10px 2rem; color: #fff; font-size: 20px; line-height: 22px; -webkit-transition: 300ms ease-out all; transition: 300ms ease-out all; text-align: center; border-bottom: solid 1px #e5e5e5; text-align: left; letter-spacing: 0.05em; text-transform: capitalize; }
#mainNav .site-nav li a.multi { position:relative; }
#mainNav .site-nav li a.multi:after { position:absolute; right: 11px; top: 50%; margin-top: -0.6em; line-height: 1.2em; content:"\f067"; font-family:'FontAwesome'; }
#mainNav .site-nav li a.multiOpen:after { content:"\f068"; }
#mainNav .site-nav li a.active, #mainNav .site-nav li a:active { background: #fbf5f2; outline: none; }
#mainNav .site-nav li a .count { display: none; }
#mainNav .site-nav li a .ElmShowSmall { display: inline!important; }
#mainNav .site-nav ul a { border-bottom: 0; padding-left: 30px; }
#mainNav .site-nav li .icon-cart { vertical-align: top; height: 16px; }
#mainNav .site-nav li div.secLvl { display: none; }
#mainNav .site-nav li div.secLvl .cat .all { display: none; }
#mainNav .site-nav li div.secLvl ul ul { display: none; }
/*search*/
.searchWrp { position: relative; padding: 11px 20px 11px 20px; border-bottom: solid 1px #e5e5e5; }
.searchWrp .btn { position: absolute; right: 20px; top: 11px; z-index: 5; background: none; color: #000; display: block; width: 28px; height: 28px; text-align: center; }
.searchWrp input[type=search] { border: solid 1px #000; width: 100%; font-size: 16px; padding: 0 8px!important; height: 28px; }
.searchWrp .icon path { fill: #000!important; }
/* open menu
-----------------------------*/
#mainNav { background: #fff; display: block!important; max-width: 330px; top: 16rem; top: 54px; box-shadow: -1000vh 900vh 0 1000vh #fff, -1000vh 900vh 20px 1000vh rgba(0,0,0, 0.4); position: absolute; left: 0; width: 100%; left: -370px; -webkit-transition: 300ms ease-out all; transition: 300ms ease-out all; z-index: 900; will-change: transform; -webkit-backface-visibility: hidden; }
.menuOpen #mainNav { -webkit-transform: translateX(370px); transform: translateX(370px); transform: translate3d(370px, 0, 0); -webkit-transform: translate3d(370px, 0, 0); }
.menuOpen #mainNav ul li a { color: #5e4637; }
/*second level*/
#mainNav .site-nav li.nav2 ul { top: 0; bottom: 0; position: absolute; width: 100%; max-width: 330px; left: -370px; -webkit-transition: 300ms ease-out all; transition: 300ms ease-out all; z-index: 900; will-change: transform; background: #f3f3f3; box-shadow: -1000vh 1000vh 0 1000vh #f3f3f3; -webkit-backface-visibility: hidden; }
#mainNav .site-nav li.nav2Open ul { -webkit-transform: translateX(370px); transform: translateX(370px); transform: translate3d(370px, 0, 0); -webkit-transform: translate3d(370px, 0, 0); }
#mainNav .site-nav li a.nav2Switch .fa { float: right; font-size: 1.4em; line-height: 17px; }
#mainNav .site-nav li a.title { font-size: 24px; cursor: default; background: none!important; }
#mainNav .site-nav li.bck { position: absolute; right: 2rem; top: 10px; padding: 0; }
#mainNav .site-nav li.bck a { text-transform: capitalize; padding: 0; line-height: 1.3em; font-size: 16px; }
#mainNav .site-nav li.bck a.nav2Back .fa { font-size: 1.3em; vertical-align: top; }
#mainNav .site-nav li.promo { text-align: center; padding: 10px 2rem; color: #fff; font-size: 14px; line-height: 17px; background: #fcb330;}
#mainNav .site-nav li.alt { background: #f3f3f3; border-bottom: solid 1px rgba(0,0,0,0.1) ;}
#mainNav .site-nav li.alt a { background: #f3f3f3; font-weight: normal; font-size: 14px; padding-top: 8px; padding-bottom: 8px; }
#mainNav .site-nav li a .desc { font-weight: normal; font-size: 13.7px; line-height: 1.15em; display: block; font-family: "Arnhem Pro", "Helvetica Neue", Arial, "Nimbus Sans L", FreeSans; padding-top: 0.4em; text-transform: none; max-width: 290px; }
#mainNav .site-nav li a .tmbBar, #mainNav .site-nav li a .tmbSqr, #mainNav .site-nav li a .tmbMlt, #mainNav .site-nav li a .tmbCup, #mainNav .site-nav li a .tmbCoc { float: left; display: block; width: 59px; height: 59px; background-size: cover!important; margin-left: -20px; margin-right: 5px; }
#mainNav .site-nav li a .tmbBar { background-image: url("../images/main_menu_bars.jpg"); }
#mainNav .site-nav li a .tmbSqr { background-image: url("../images/main_menu_squares.jpg"); }
#mainNav .site-nav li a .tmbMlt { background-image: url("../images/main_menu_melts.jpg"); }
#mainNav .site-nav li a .tmbCup { background-image: url("../images/main_menu_cups.jpg"); }
#mainNav .site-nav li a .tmbCoc { background-image: url("../images/main_menu_cocoa.jpg"); }
/* cart, logo, bg
-----------------------------*/
#mainHdr { background: #fff; height: auto; position: fixed; top: 0; left: 0; width: 100%; z-index: 200; box-shadow: 0 -5rem 2.5rem 5rem rgba(0,0,0,0.2); }
#mainHdr header { position: relative; }
#MainContent { padding-top: 55px; }
#mainLogo .site-logo { margin: 0 auto; width: 133px; background: url(../images/main_logo.svg) no-repeat center center; background-size: 133px auto; text-indent: -4000px; height: 54px; display: block; -webkit-backface-visibility: hidden; }
#mainLogo .site-logo img { width: 133px; margin: 0 auto; display: block; position: relative; top: 17px; }
#mainHdr a.mobile-cart { position: absolute; right: 2rem; margin-right : -3px; top: 9px; font-size: 34px; line-height: 34px; display: -moz-inline-stack; display: inline-block; zoom: 1; *display:inline;
color: #5e4637; margin-top: 0; }
#mainHdr a.mobile-cart .icon { width: 34px; height: 34px; }
#mainHdr a.mobile-cart .count { position: absolute; left: 19px; top: -3px; text-align: center; font-size: 13px; line-height: 21px; height: 20px; min-width: 16px; font-weight: bold; color: #fff; background: #fcb330; padding: 0 2px; }
#mainSubHdr .rgt .ElmHideSmallIn { display: none!important; }
/*tweaks*/
#mainPrimHdr { background: #fff; }
#mainNav { background: #f3f3f3; box-shadow: -1000vh 1000vh 0 1000vh #f3f3f3, -1000vh 1002vh 20px 1000vh rgba(0,0,0, 0.4); z-index: -1; top: 54px; z-index:44; }
#mainNav:before, #mainNav .site-nav li.nav2 ul:before { content: ' '; display: block; height: 1.25rem; width: 100%; box-shadow: inset 0 1.8rem 1rem -1.8rem rgba(0,0,0,0.2); position: absolute; z-index: 10; }
#mainNav .site-nav li a, .menuOpen #mainNav ul li a { background: #fff; color: #000; border: none; }
#mainQuickNav { display: none; }
}
@media screen and (max-width: 640px) {
#mainNav { top: 54px; }
#mainNav, #mainNav .site-nav { bottom: calc(5.9rem + 54px - 100vh); }
}
@media screen and (min-width: 520px) and (max-width: 886px) {
#mainNav, #mainNav .site-nav li.nav2 ul { max-width: 365px; }
}
/*end menu*/
/* Sub Header
--------------------------------------------------------------*/
#mainSubHdr .lft { width: 370px; margin: 0 auto; position: relative; }
#mainSubHdr .lftMem { float: left; }
#mainSubHdr .lft:before, #mainSubHdr .lft:after {content: ' '; display: block; position: absolute; right: 0rem; top: 0; bottom: 0px; box-shadow: inset -15px 0px 15px -10px #fcb330; width: 25px; z-index: 15; }
#mainSubHdr .lft:before { right:auto; left: 0; box-shadow: inset 15px 0px 15px -10px #fcb330; }
#mainSubHdr .lftMem:before { display: none; }
#mainSubHdr .lft .itm { text-align: center; font-weight: 500; text-transform: uppercase; }
#mainSubHdr .lftMem .itm { text-align: left; }
#mainSubHdr .lft .itm a { color: #503620; text-decoration: none!important; }
#mainSubHdr .rgt { float: right; font-weight: 500; }
#mainSubHdr .rgt li { display: inline; }
#mainSubHdr .rgt a { position: relative; margin-left: 20px; color: #503620; }
#mainSubHdr .rgt a:after { content: ' '; left: 50%; width: 0; position: absolute; bottom: -3px; height: 1px; background: #5e4637; display: block; -webkit-transition-property: all; -webkit-transition-duration: 350ms; -webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -moz-transition-property: all; -moz-transition-duration: 350ms; -moz-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-property: all; transition-duration: 350ms; transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); }
#mainSubHdr .rgt a.cWht:after { background-color: #fff; }
.devDesktop #mainSubHdr .rgt a:hover:after { left: 0; width: 100%; bottom: -3px; }
#mainSubHdr .rgt a.fa-search { font-size: 1.6em; top: 0.12em; margin-left: 20px; }
#mainHdrSeach { position: absolute; right: 0; top: 50px; padding: 12px; z-index: 10; line-height: 0; box-shadow: 2px 2px 5px 0 rgba(0,0,0,0.3); display: none; background: #efaa2e; }
#mainSubHdr .searchActive { display: block; }
#mainHdrSeach:after { content: ' '; position: absolute; left: 0; top: -4px; height: 4px; width: 100%; display: block; background: #fcb330; }
#mainHdrSeach input[type=search] { font-size: 16px; padding-right: 34px; height: 36px; width: 315px; }
#mainHdrSeach button { background: none; outline: none; border: 0; height: 36px; display: block; line-height: 36px; position: absolute; top: 12px; right: 12px; font-size: 21px; width: 40px; text-align: center; }
#mainQuickNav { display: none; }
@media screen and (max-width: 640px) {
#mainSubHdr .lft { font-size:2.2rem; line-height: 1em; display: block; width: 100%; text-align: center; padding: 1.85rem 0; }
#mainSubHdr .lftMem { float: none; }
#mainSubHdr .lftMem:before { display: block; }
#mainSubHdr .lft .itm { text-align: center; }
#mainSubHdr .lft .owl-dots { display: none; }
#mainSubHdr .rgt { font-size: 1.9rem; line-height : 1em; padding-top: 2rem; width: 53%; text-align: right; }
#mainSubHdr .rgt a { position: relative; margin-left: 0 }
#mainSubHdr .rgt a.fa-search { line-height: 0.4em; margin-left: 8px; }
#mainHdrSeach { top: 16.6rem; top: calc(5.8rem + 54px); left: 0; box-shadow: 0 5px 5px 0 rgba(0,0,0,0.3); }
#mainHdrSeach:after { display : none; }
#mainHdrSeach input[type=search] { width: 100%; }
#mainQuickNav { /*background: #4b362a ; */ background: #f3f3f3; display:block; }
#mainQuickNav ul { display: -webkit-box;display:flex; justify-content: space-around; margin: 0 auto; max-width: 380px; padding: 0 1.5rem; }
#mainQuickNav ul li { text-align: center; font-size: 14px; line-height: 39px; }
#mainQuickNav ul li a { color: #4b362a; text-transform: uppercase; font-weight: 500; }
#mainSubHdr .rgt { display: none; }
}
@media screen and ( min-width: 410px ) and (max-width: 640px) {
#mainSubHdr .lft { font-size: 14px; line-height: 1em; padding: 12.5px 0; }
#mainSubHdr .rgt { font-size: 13px; line-height: 1em; padding: 13px 0; }
.nav-hamburger, #mainHdr a.mobile-cart { margin-top: 1px; }
#mainHdrSeach { top: 93px; }
}
@media screen and (max-width: 365px) {
#mainLogo .site-logo { width: 24rem; background-size: 24rem auto; }
}
@media screen and (max-width: 360px) {
#mainQuickNav ul li { font-size: 13px; }
}
@media screen and (min-width: 641px) {
#mainSubHdr { font-size: 14px; line-height: 50px; white-space: nowrap; }
#mainSubHdr .rgt li { display: inline; }
.nav-hamburger, #mainHdr a.mobile-cart { margin-top: 0; }
}
/* Header Cart Pop
--------------------------------------------------------------*/
#hdrCartCont { width: 302px; position: absolute; padding-top: 1.1rem; top: 56px; right: 20px; z-index: 1168; text-align: left; }
#hdrCartCont { display: none; opacity: 0; filter: alpha(opacity=0); -ms-filter: "alpha(opacity=0)"; -khtml-opacity: 0; -moz-opacity: 0; }
#mainHdr .hdrCartContOpen { display: block; opacity: 1; filter: alpha(opacity=100); -ms-filter: "alpha(opacity=100)"; -khtml-opacity: 1; -moz-opacity: 1; }
#hdrCartCont .hdrCrtBtns { background: #f9f7f5; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; padding: 20px 24px; }
#hdrCartCont .hdrCrtBtns .btn { width: 117px; padding-left: 0; padding-right: 0; display: block; text-align: center; vertical-align: top; }
#hdrCartCont .hdrCrtBtns a { float: left; }
#hdrCartCont .hdrCrtBtns a:last-child { float: right; }
#hdrCartCont .hdrCartInner { -moz-box-shadow: 0 4px 8px rgba(0,0,0,.45); -webkit-box-shadow: 0 4px 8px rgba(0,0,0,.45); box-shadow: 0 4px 8px rgba(0,0,0,.45); -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; }
#hdrCartCont .item { background: #fff; padding: 0 0 0 2px; border-top-width: 1px; }
#hdrCartCont .item .tmb { float: left; width: 88px; height: 88px; overflow: hidden; }
#hdrCartCont .item .tmb img { width: 100%; }
#hdrCartCont .item .desc { float: left; padding-left: 0; width: 183px; padding-top: 7px; }
#hdrCartCont .item .desc .title { font-size: 15px; line-height: 17px; font-weight: 700; padding: 3px 0 0 0; }
#hdrCartCont .item .desc .title span { font-weight: 400; }
#hdrCartCont .item .desc .price, #hdrCartCont .item .desc .size, #hdrCartCont .item .desc .success { font-size: 14px; padding: 0; }
#hdrCartCont .item .desc .success {display: none; }
#hdrCartCont .topArw { position: absolute; display: block; top: 1px; width: 0; height: 0; border-left: 1.2rem solid transparent; border-right: 1.2rem solid transparent; border-bottom: 1.1rem solid rgba(0,0,0,0.08); right: 4px; }
#hdrCartCont .topArw:before { content: ' '; position: absolute; display: block; top: 0.1rem; width: 0; height: 0; border-left: 1.2rem solid transparent; border-right: 1.2rem solid transparent; border-bottom: 1.1rem solid #fff; right: -1.2rem; }
#hdrCartCont .ovr { cursor: pointer; position: absolute; top: -6.8rem; display: block; right: -0.8rem; width: 7.7rem; height: 8.2rem; z-index: 1000; }
@media screen and (min-width: 410px ) and (max-width: 640px) {
#hdrCartCont { padding-top: 11px; top: 56px; right: 20px; }
}
@media screen and (max-width: 560px) {
#hdrCartCont .topArw { top: 4px; }
}
@media screen and (max-width: 409px) {
#hdrCartCont .item { display: none; }
#hdrCartCont .item:last-child { display: block; }
/*block cart*/
#hdrCartCont { width: 100%; right: 0px; top: 54px; }
#hdrCartCont .topArw { right: 3.2rem; top: 1.6px; }
#hdrCartCont .ovr { display: none; }
#hdrCartCont .item { padding: 2.4rem; }
#hdrCartCont .item .tmb { width: 8rem; height: 8rem; }
#hdrCartCont .item .desc { width: 45rem; padding-top: 0.2rem; padding-left: 1.2rem; }
#hdrCartCont .item .desc .title { padding-bottom: 0.3rem; padding-top: 0.3rem; font-size: 2.1rem; line-height: 2.4rem; }
#hdrCartCont .item .desc .price, #hdrCartCont .item .desc .size, #hdrCartCont .item .desc .success { font-size: 2.1rem; line-height: 2.4rem; display: block; }
#hdrCartCont .item .desc .price, #hdrCartCont .item .desc .size, #hdrCartCont { display: none;}
#hdrCartCont .hdrCrtBtns { padding: 2rem 2.4rem; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; display: none; }
#hdrCartCont .hdrCrtBtns .btn { width: 21.4rem; }
}
@media screen and (min-width: 887px) {
#hdrCartCont { top: 76px; right: 0; }
#hdrCartCont .topArw { right: 4px; }
#hdrCartCont .ovr { right: -4px; width: 112px; }
}
/* Header after spacing
--------------------------------------------------------------*/
#mainHdr + article, #mainHdr + section, #mainHdr + div { margin-top: 125px; }
@media all and (max-width: 886px) {
#mainHdr + article, #mainHdr + section, #mainHdr + div { margin-top: 103px; }
}
@media all and (max-width: 640px) {
#mainHdr + article, #mainHdr + section, #mainHdr + div { margin-top: 132px; }
#mainHdr + #cartCont { margin-top: 92px;}
}
@media all and (max-width: 409px) {
#mainHdr + article, #mainHdr + section, #mainHdr + div { margin-top: calc(6rem + 91px ); }
}
/*
////
//// MAIN
////
--------------------------------------------------------------*/
/* Intro
--------------------------------------------------------------*/
#mainIntro { padding-bottom: 90px; background: #f6f4f2; }
#mainIntro .introBg { background: #f6f4f2 url(../images/main_intro_perfection.png) no-repeat center center; height: 622px; position: relative; background-size: auto 40.5rem; background-position: calc(50% - 23rem) calc(50% + 4rem); }
#mainIntro .introCont { max-width: 530px; padding: 16.4rem 0; }
#mainIntro .introCont1Ln { padding: 15.3rem 0; }
#mainIntro .introCont4Ln { padding: 10rem 0; }
#mainIntro .title { font-size: 6rem; line-height: 1.16em; padding: 0; margin: 0 0 -0.3em 0; position: relative; z-index: 2; }
#mainIntro .subTxt { padding: 1em 0; font-size: 1.9rem; line-height: 1.5em; }
#mainIntro .over { position: absolute; width: 100%; height: 100%; display: block; left: 0; top: 0; z-index: 2; }
.touchEnabled #mainIntro .over { display: none; }
#mainIntro .FrmCtr { position: relative; }
#mainIntro .bars { left: 520px; top: 58px; width: 50%; width: calc(100% - 507px); position: absolute; top: 50%; transform: translateY(-50%); }
#mainIntro .melts { left: 464px; width: calc(100% - 451px);}
#mainIntro .bars img { float: left; width: 50%; max-width: 33.6rem; transform: perspective(2px); }
#mainIntro .bars img.single { width: 100%; max-width: 68.3rem; float: none; margin: 0 auto; }
#mainIntro .melts img.single { width: 100%; max-width: 73.9rem; float: none; margin: 0 auto; }
#mainIntro .introNav { display: none; padding-top: 3rem; position: relative; z-index: 20; }
#mainIntro .itm .introNav { display: block; }
#mainIntro .introNav li { display: inline; padding: 0; margin-left: -0.8rem; }
#mainIntro .introNav li a { -webkit-background-clip: padding-box; background-clip: padding-box; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; display: -moz-inline-stack; display: inline-block; zoom: 1; *display:inline;
width: 1.6rem; height: 1.6rem; background: #5e4637; margin: 0.8rem; }
#mainIntro .introNav li.cur a { background: #fcb330; }
@media all and (max-width: 1600px) {
#mainIntro .introBg { background-size: 177% auto; background-position: 67% calc(50% + 4rem); }
}
@media all and (max-width: 990px) {
#mainIntro .introBg { height: auto; }
#mainIntro .itm { text-align: center; }
#mainIntro .introCont { max-width: none; padding: 6rem 0 0rem 0; }
#mainIntro .title { padding-bottom: 2rem; }
#mainIntro .subTxt { font-size: 3rem; padding-top: 0.6em; }
#mainIntro .bars { position: static; width: 100%; transform: none; max-width: none; }
#mainIntro .introNav { display: block; width: 100%; text-align: center; padding-top: 2rem; }
#mainIntro .itm .introNav { display: none; }
}
@media all and (max-width: 640px) {
#mainIntro { padding-bottom: 11.8rem; }
#mainIntro .subTxt { max-width: 59rem; margin: 0 auto; }
#mainIntro .bars img:first-child, #mainIntro .bars img { display: block; float: left; width: 50%; margin: 0; position: static; }
#mainIntro .bars img.single { width: auto!important; max-width: 45rem; max-height: 53.8rem!important; float: none; margin: 0 auto; }
#mainIntro .genBtn1 { margin-top : 2rem; width: 34rem; }
}
/* Holiday Intro
--------------------------------------------------------------*/
#mainIntro .holidayBg { background: url(../images/main_holiday_intro_bg_sm.jpg) no-repeat top center !important; background-size: cover!important; }
#mainIntro .holidayBg:after { content: ' '; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.20)}
#mainVrA #mainIntro .holidayBg .introCont { color: #fc3048;}
#mainIntro .holidayBg .title { text-shadow: 0 0 22px rgba(255,255,255,0.2); }
@media all and (min-width: 991px) {
#mainIntro .holidayBg { background-image: url(../images/main_holiday_intro_bg_lg.jpg) !important; }
}
@media all and (min-width: 1220px) {
#mainIntro .holidayBg { background-image: url(../images/main_holiday_intro_bg_xl.jpg) !important; }
}
@media all and (min-width: 1920px) {
#mainIntro .holidayBg { background-image: url(../images/main_holiday_intro_bg_xxl.jpg) !important; }
}
/* Holiday Valentines Intro
--------------------------------------------------------------*/
#mainIntro .holidayValBg { background: url(../images/main_holiday_val_intro_bg_sm.jpg) no-repeat top center !important; background-size: cover!important; }
#mainIntro .holidayValBg:after { content: ' '; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.20)}
#mainVrA #mainIntro .holidayValBg .introCont { /*color: #ff5560;*/}
#mainIntro .holidayValBg .title { text-shadow: 0 0 22px rgba(255,255,255,0.2); }
@media all and (min-width: 991px) {
#mainIntro .holidayValBg { background-image: url(../images/main_holiday_val_intro_bg_lg.jpg) !important; }
}
@media all and (min-width: 1220px) {
#mainIntro .holidayValBg { background-image: url(../images/main_holiday_val_intro_bg_xl.jpg) !important; }
}
@media all and (min-width: 1920px) {
#mainIntro .holidayValBg { background-image: url(../images/main_holiday_val_intro_bg_xxl.jpg) !important; }
}
/* Holiday Summer Intro
--------------------------------------------------------------*/
#mainIntro .holidaySumBg { background-image: url(../images/main_holiday_sum_intro_bg_sm.jpg)!important; background-size: cover!important; }
#mainIntro .holidaySumBg:after { content: ' '; position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
#mainVrA #mainIntro .holidaySumBg .introCont { /*color: #ff5560;*/}
#mainIntro .holidaySumBg .title { text-shadow: 0 0 22px rgba(255,255,255,0.2); }
@media all and (min-width: 991px) {
#mainIntro .holidaySumBg { background-image: url(../images/main_holiday_sum_intro_bg_lg.jpg) !important; }
}
@media all and (min-width: 1220px) {
#mainIntro .holidaySumBg { background-image: url(../images/main_holiday_sum_intro_bg_xl.jpg) !important; }
}
@media all and (min-width: 1920px) {
#mainIntro .holidaySumBg { background-image: url(../images/main_holiday_sum_intro_bg_xxl.jpg) !important; }
}
#mainVrA #mainIntro .holidaySumBg .introNav li.cur a { background: #39b5c3; }
/* Fall Summer Intro
--------------------------------------------------------------*/
#mainIntro .holidayFallBg { background-image: url(../images/main_holiday_fall_intro_bg_sm.jpg)!important; background-size: cover!important; }
#mainIntro .holidayFallBg:after { content: ' '; position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
#mainVrA #mainIntro .holidayFallBg .introCont { color: #76281e;}
#mainIntro .holidayFallBg .title { text-shadow: 0 0 22px rgba(255,255,255,0.2); }
@media all and (min-width: 991px) {
#mainIntro .holidayFallBg { background-image: url(../images/main_holiday_fall_intro_bg_lg.jpg) !important; }
}
@media all and (min-width: 1220px) {
#mainIntro .holidayFallBg { background-image: url(../images/main_holiday_fall_intro_bg_xl.jpg) !important; }
}
@media all and (min-width: 1920px) {
#mainIntro .holidayFallBg { background-image: url(../images/main_holiday_fall_intro_bg_xxl.jpg) !important; }
}
#mainVrA #mainIntro .holidayFallBg .introNav li.cur a { background: #76281e; }
/* Cinnamon Intro
--------------------------------------------------------------*/
#mainIntro .altIntro { position: relative; }
#mainVrA #mainIntro .altIntro { height: 800px; display: flex; center; align-items: center; }
#mainIntro .altIntro .title { font-size: 9rem; text-transform: none; letter-spacing: -0.02em; margin: 0; padding-bottom: 0.35em;}
#mainIntro .altIntro .title span { display: block; font-size: 0.58em; line-height: 1.15em;}
#mainIntro .altIntro .genBtn1 { line-height :3em; padding: 0 2em; }
#mainIntro .altIntro .bars img.single { width: 100%; max-width: 72.2rem; }
#mainIntro .altIntro .introCont { max-width: 635px; padding: 16.4rem 0; text-align: center; display: flex; justify-content: center; align-items: center; flex-direction: column; }
#mainIntro .altIntro .introNav { position: absolute; width: 50%; left: 25%; bottom: 4rem; display: flex; align-items: center; justify-content: center; }
#mainIntro .altIntro .bars { position: absolute; width: 50%; transform: none; max-width: none; right: 0; left: 50%; top: 0; bottom: 0; overflow: hidden; width: calc(100% - 468px); display: flex; justify-content: center; align-items: center; }
#mainIntro .altIntro .bars img { width: 200%; }
#mainIntro .holidayCinnBg { background-image: url(../images/main_holiday_hot_cinnamon_bg_sm.jpg)!important; background-size: cover!important; }
#mainIntro .holidayCinnBg:after { content: ' '; position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
#mainVrA #mainIntro .holidayFallBg .introCont { color: #76281e;}
#mainIntro .holidayCinnBg .title { text-shadow: 0 0 22px rgba(255,255,255,0.2); }
@media all and (max-width: 1110px) {
#mainIntro .altIntro .title { font-size: 7rem; }
#mainIntro .altIntro .genBtn1 { font-size: 21px; }
}
@media all and (max-width: 990px) {
#mainVrA #mainIntro .altIntro { height: 95vw; display: flex; center; align-items: center; }
#mainIntro .altIntro .introCont { width: 58%; padding: 19.4rem 0; max-width: 44rem; }
#mainIntro .altIntro .title { font-size: 7vw; }
#mainIntro .altIntro .genBtn1 { font-size: 2.8vw; }
#mainIntro .altIntro .bars { width: 58%; left: 42%; display: block; }
#mainIntro .altIntro .bars img.single { width: auto; height: 100%!important; max-height: 100%!important; max-width: none; }
}
@media all and (max-width: 640px) {
#mainIntro .altIntro .genBtn1 { width: auto; margin-top: 0;}
}
@media all and (min-width: 1111px) {
#mainIntro .altIntro .genBtn1 { font-size: 23px; padding: 0 2em; line-height: 3em; }
}
@media all and (min-width: 991px) {
#mainIntro .holidayCinnBg { background-image: url(../images/main_holiday_hot_cinnamon_bg_lg.jpg) !important; }
}
@media all and (min-width: 1220px) {
#mainIntro .holidayCinnBg { background-image: url(../images/main_holiday_hot_cinnamon_bg_xl.jpg) !important; }
}
@media all and (min-width: 1920px) {
#mainIntro .holidayCinnBg { background-image: url(../images/main_holiday_hot_cinnamon_bg_xxl.jpg) !important; }
}
#mainVrA #mainIntro .holidayCinnBg .introNav li.cur a { background: #eba12b; }
/* Static Intro, now fade slider
--------------------------------------------------------------*/
#mainIntroSlideV3 { position: relative; }
#mainIntroSlideV3 .introNav { position: absolute; width: 50%; left: 25%; bottom: 4rem; display: flex; align-items: center; justify-content: center; bottom: 2rem; z-index: 2; }
#mainIntroSlideV3 .introNav li { display: inline; padding: 0; margin-left: -0.8rem; }
#mainIntroSlideV3 .introNav li a { -webkit-background-clip: padding-box; background-clip: padding-box; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; display: -moz-inline-stack; display: inline-block; zoom: 1; *display:inline;
width: 1.6rem; height: 1.6rem; background: #fff; margin: 0.8rem; }
#mainIntroSlideV3 .introNav li.cur a { background: #fcb330; }
@media all and (max-width: 640px) {
#mainIntroSlideV3 .introNav { bottom: 1.5rem; }
}
#mainIntroStatic .introBg { background: #8dcff2 url(../images/main_intro_st_bg_sm.jpg) no-repeat center center!important; background-size: cover!important; color: #fff; /* padding: 2.4rem 0 55.6vw 0;*/ padding: 3rem 0; height: 57.38rem; }
#mainIntroStatic .introBg .zeroSugar { display: block; font-size: 1.8rem; line-height: 1.1em; text-transform: uppercase; padding: 0; }
#mainIntroStatic .introBg .zeroSugar span { display: block; padding: 0.4em 0; }
#mainIntroStatic .introBg .title { display: block; font-size: 5.2rem; line-height: 1em; color: #503620; padding: 1.6rem 0 2.6rem 0; text-transform: uppercase; }
#mainIntroStatic .introBg .btnWrp { padding-bottom: 2.6rem;}
#mainIntroStatic .introBg .btnWrp .genBtn1 { line-height: 3em; font-size: 2.2rem; padding: 0 2em; }
#mainIntroStatic + #mainCertBar, #mainIntroSlideV3 + #mainCertBar { margin-top: 0; }
@media all and (min-width: 641px) and (max-width: 800px) {
#mainIntroStatic .introBg { /*padding-top: calc(20vw - 110px); */ padding: 4.77rem 0 ; height: 669px; }
#mainIntroStatic .introBg .zeroSugar { font-size: 19px; }
#mainIntroStatic .introBg .title { font-size: 62px; padding: 2.2rem 0 3.4rem 0; }
#mainIntroStatic .introBg .btnWrp { padding-bottom: 3rem;}
}
@media all and (min-width: 800px) {
#mainIntroStatic .introBg { background-image: url(../images/main_intro_st_bg_lg.jpg)!important; background-size: cover!important; padding: 4rem 0; height: 669px; }
#mainIntroStatic .introBg .title { font-size: 72px; pading-bottom: 2rem; }
#mainIntroStatic .introBg .zeroSugar { font-size: 20px; }
#mainIntroStatic .introBg .btnWrp { padding-bottom: 3rem; }
#mainIntroStatic .introBg .btnWrp .genBtn1 { font-size: 23px; padding: 0 2em; }
}
@media all and (min-width: 1921px) {
#mainIntroStatic .introBg { background-size: 1920px auto!important; }
}
/* Static Valentines Intro
--------------------------------------------------------------*/
#mainIntroStatic .holidayValBg { background-color: #fa96b4!important; background-image:url(../images/main_intro_st_bg_holiday_val_sm.jpg)!important; }
@media all and (min-width: 800px) {
#mainIntroStatic .holidayValBg { background-image: url(../images/main_intro_st_bg_holiday_val_lg.jpg)!important; }
}
@media all and (min-width: 1921px) {
#mainIntroStatic .holidayValBg { background-size: 1920px auto!important; }
}
/* Non Static Cinnamon
--------------------------------------------------------------*/
#mainIntroCinBar .introBg { background: #2a0403 url(../images/main_holiday_hot_cinnamon_bg_sm_v2.jpg) no-repeat center center!important; background-size: cover!important; color: #fff; }
#mainIntroCinBar .introBg .bars { display: none; }
#mainIntroCinBar .introCont { display: flex; justify-content: center; align-items: center; flex-direction: column; height: 57.38rem; width: 58%; }
#mainIntroCinBar .over { position: absolute; left: 0; top:0; width: 100%; height :100%; display: block; }
#mainIntroCinBar .title { font-size: 5.64rem; text-align: center; margin: 0.6em 0 0 0; padding-bottom: 0.35em; text-transform: none; letter-spacing: -0.02em; }
#mainIntroCinBar .title span { display: block; font-size: 0.58em; line-height: 1.15em;}
#mainIntroCinBar .introBg .genBtn1 { line-height: 3em; font-size: 1.74rem; padding: 0 2em; }
@media all and (min-width: 641px) and (max-width: 800px) {
#mainIntroCinBar .introCont { height: 660px; }
}
@media all and (min-width: 800px) {
#mainIntroCinBar .introBg { background-image: url(../images/main_holiday_hot_cinnamon_bg_xxl.jpg)!important; background-size: cover!important; background-position: left center!important; }
#mainIntroCinBar .introBg .FrmCtr { position: relative; }
#mainIntroCinBar .over { display: none; }
#mainIntroCinBar .introCont { height: 669px; }
#mainIntroCinBar .title { font-size: 7vw; margin: 0; }
#mainIntroCinBar .introBg .bars { display: flex; height: 100%; justify-content: flex-start; align-items: center; position: absolute; right: 0; top: 0; height: 669px; max-width: 56vw; overflow: hidden; }
#mainIntroCinBar .introBg .bars img { min-width: 722px ; height: auto!important; }
#mainIntroCinBar .introBg .genBtn1 { font-size: 1.9vw; padding: 0 2em; }
}
@media all and (min-width: 1220px) {
#mainIntroCinBar .title { font-size: 9rem;}
#mainIntroCinBar .introBg .genBtn1 { font-size: 23px; }
#mainIntroCinBar .introBg .bars { margin-right: -8%; }
}
.animated { -webkit-animation-duration : 250ms !important; animation-duration : 250ms !important; -webkit-animation-fill-mode : both !important; animation-fill-mode : both !important; }
.fadeOut { -webkit-animation-name : fadeOut; animation-name : fadeOut; }
@-webkit-keyframes fadeOut { 0% { opacity: 1;} 100% { opacity: 0;} }
@keyframes fadeOut { 0% { opacity: 1;} 100% { opacity: 0;} }
.fadeIn { -webkit-animation-name : fadeIn; animation-name : fadeIn; }
@-webkit-keyframes fadeIn { 0% { opacity: 0;} 100% { opacity: 1;} }
@keyframes fadeIn { 0% { opacity: 0;} 100% { opacity: 1;} }
/* Cert bar
--------------------------------------------------------------*/
#mainCertBar { overflow: hidden; margin-top: -11.4rem; padding-top: 11.4rem; padding-bottom: 5.5rem; clear: both; }
#mainCertBar ul { display: block; margin: 0 -4rem; }
#mainCertBar li { display: block; width: 20%; text-align: center; float: left; padding-bottom: 0; padding-top: 0; }
#mainCertBar li .ElmCirc { width: 72.456%; margin: -36.228% auto 0 auto; display: block; text-align: center; line-height: 72.456%; font-size: 4rem; overflow: hidden; background: #fff; padding-top: 72.456%; height: 0px; }
#mainCertBar li .ElmCirc img { margin: 0 auto; width: 65%; margin-top: -82%; }
#mainCertBar li .title { font-size: 25px; line-height: 1.13333em; display: block; padding-top: 0; margin-top: -1.4em; text-transform:uppercase; }
@media all and (max-width: 1150px) {
#mainCertBar li .title { font-size: 2.2vw; }
}
@media all and (max-width: 980px) {
#mainCertBar ul { margin: 0 -2rem; }
}
@media all and (max-width: 640px) {
#mainCertBar { margin-top: -11rem; padding-top: 5.4rem; padding-bottom: 4.5rem; }
#mainCertBar ul { margin: 0 -1rem; }
#mainCertBar li .ElmCirc { width: 100%; }
#mainCertBar li .ElmCirc img { width: 85%; margin-top: -92%; }
#mainCertBar li .title { font-size: 1.65rem; }
}
/* Two prods
--------------------------------------------------------------*/
#mainTwoProd { overflow: hidden; color: #fff; }
#mainTwoProd .itm { float: left; width: 50%; }
#mainTwoProd .itmSeasalt { box-shadow: -4000px -4080px 0 4080px #65d4f5; background: #65d4f5; position: relative; }
#mainTwoProd .itmStrawberry { box-shadow: 4000px 4080px 0 4080px #eb363c; background: #eb363c; }
#mainTwoProd .itm .tmb { float: left; width: 66.25%; margin-right: -21.5%; }
#mainTwoProd .itm .tmb img { transform: perspective(2px); }
#mainTwoProd .itm .desc { position: relative; z-index: 5; margin-left: 44.75%; text-align: center; margin-top: 44%; }
#mainTwoProd .itm .title { font-size: 4.8rem; line-height: 1.18em; margin-top: -22px; }
@media all and (max-width: 1600px) {
#mainTwoProd .itm .title { font-size: 3vw; }
}
@media all and (max-width: 800px) {
#mainTwoProd .itm { float: left; width: 100%; }
#mainTwoProd .itm .title { font-size: 5.5vw; }
}
@media all and (max-width: 640px) {
#mainTwoProd .itm .title { margin-top: -20px; }
}
/* Bestsellers
--------------------------------------------------------------*/
.mainBestSelling .FrmCtr2 { padding-top: 7.6rem; }
.mainBestSelling .title { font-size: 4.4rem; line-height: 1.3125em; display: block; padding-bottom: 2rem; }
/* Everyday
--------------------------------------------------------------*/
#mainEveryday { padding: 7.6rem 0; overflow: hidden; }
#mainEveryday .title { font-size: 4.8rem; line-height: 1.3125em; display: block; }
#mainEveryday .subTxt { padding: 1em 0 0 0; line-height : 1.5em; font-size: 2.4rem; }
#mainEveryday .quotesWrp { margin: 0 -47px; padding-top: 5rem; }
#mainEveryday .quotesWrp .itm { width: 33.33%; float: left; }
#mainEveryday .quotesWrp .itm .wrp { margin: 0 auto; max-width: 260px; padding: 0 10px; }
#mainEveryday .quotesWrp .tmb { margin-bottom: 3.6rem; }
#mainEveryday .quotesWrp .itm .caption { text-align: left; font-size: 17px; padding: 0; letter-spacing: -0.025em; line-height: 1.4em; font-style: italic; }
#mainEveryday .quotesWrp .itm .caption p { padding: 0; display: block; clear: left; min-height: 9.8em; }
#mainEveryday .quotesWrp .itm .caption .auth { display: block; font-weight: bold; text-align: center; padding-top: 0.3em; }
#mainEveryday .quotesWrp .itm .caption .auth span { font-weight: normal; }
#mainEveryday .quotesWrp .itm .rateStars { float: left; line-height: 30px; margin-right: 8px; cursor: pointer; }
#mainEveryday .quotesWrp .itm .rateStars li { float: left; width: 30px; }
#mainEveryday .quotesWrp .itm .rateStars li img { -webkit-transform: rotate(180deg) scale(-1, 1); transform: rotate(180deg) scale(-1, 1); max-height: 30px; }
#mainEveryday .quotesWrp .itm .smCom { float: left; display: block; line-height: 30px; }
@media all and (max-width: 1140px) {
#mainEveryday .quotesWrp { margin: 0; }
}
@media all and (max-width: 690px) {
#mainEveryday { padding: 7.6rem 0 5rem; }
#mainEveryday .title { font-size: 4.5rem; }
#mainEveryday .subTxt { font-size: 2.8rem; line-height: 1.625em; }
#mainEveryday .quotesWrp .itm { width: 100%; padding-bottom: 3rem; }
#mainEveryday .quotesWrp .itm:last-child { padding-bottom: 0; }
#mainEveryday .quotesWrp .itm .wrp { max-width:none; display: flex; align-items: center;}
#mainEveryday .quotesWrp .tmb { margin-bottom: 0; margin-right: 2.4rem; float: left; width:18rem; min-width: 18rem; }
#mainEveryday .quotesWrp .tmb img { width: 100%; }
#mainEveryday .quotesWrp .itm .smCom { display: none; }
#mainEveryday .quotesWrp .itm .caption p { min-height: 0; }
}
@media all and (max-width: 580px) {
#mainEveryday .quotesWrp .tmb { width: 23rem; min-width: 23rem; }
#mainEveryday .quotesWrp .itm .caption { font-size: 2.5rem; line-height: 1.3em; }
}
@media all and (max-width: 410px) {
#mainEveryday .quotesWrp .itm .rateStars li { width: 5rem; }
#prodReviews .reviewTitle em, #prodReviews .reviewCount em { display: none; }
}
/* Instagram
--------------------------------------------------------------*/
#mainInsta { padding: 7.6rem 0 0 0 }
#mainInsta .title { font-size: 4.4rem; line-height: 1.3125em; display: block; }
#mainInsta ul { padding-top: 3.8rem; margin: 0; }
#mainInsta ul li { float: left; width: 25%; position: relative; padding: 0; }
#mainInsta ul li:nth-child(1n+9) { display: none; }
#mainInsta ul li a { position: relative; padding-top: 100%; display: block; overflow: hidden; transform: perspective(2px); background-size: cover!important; background-position: center center!important; image-rendering: -webkit-optimize-contrast; }
#mainInsta ul li a img { position: absolute; left: 0; top: 0; width: 100%; height: auto; transform: perspective(2px); }
@media all and (max-width: 960px) {
#mainInsta { padding: 5.6rem 0 0 0 }
#mainInsta ul { padding-top: 4.1rem; }
#mainInsta ul li { width: 25%; }
}
@media all and (max-width: 690px) {
#mainInsta .title { font-size: 3.9rem; }
}
@media all and (max-width: 690px) {
#mainInsta ul li { width: 33.33%; }
#mainInsta ul li:nth-child(1n+7) { display: none; }
}
@media all and (min-width: 1600px) {
#mainInsta ul li { width: 20%; display: block!important; }
}
/* Three Prods
--------------------------------------------------------------*/
#mainThreeProd { overflow: hidden; }
#mainThreeProd .FrmCtr2 { margin-bottom: -2px; }
#mainThreeProd .itm { width: 33.33%; float: left; padding-bottom: 7.2rem; text-align: center; }
#mainThreeProd .itm .tmb { display: block; position:relative; }
#mainThreeProd .itm .tmb .title { position: absolute; display: block; left: 0; padding-top: 8%; line-height: 1.2em; font-size: 2.7rem; width: 100%; color: #fff; z-index: 20; margin-top: -0.4em; text-shadow: 0 1px 5px rgba(0,0,0,0.1); }
#mainThreeProd .itm img { margin: 0 auto; -webkit-transform: perspective(2px); margin-bottom: -7.6%; }
#mainThreeProd .itmDark { background: #564033; }
#mainThreeProd .itmMint { box-shadow: -4000px -4000px 0 4000px #8ee5ff; background: #8ee5ff; position: relative; }
#mainThreeProd .itmRaspberry { box-shadow: 4000px 4000px 0 4000px #aa176f; background: #aa176f; }
#mainThreeProd .itmStrawberry { background: #f4596b; }
#mainThreeProd .itmMilk { box-shadow: 4000px 4000px 0 4000px #ffef6a; background: #ffef6a; }
#mainThreeProd .itmBars { box-shadow: -4000px -4000px 0 4000px #8ee5ff; background: #8ee5ff; position: relative; }
#mainThreeProd .itmSquares { background: #8dffab; }
#mainThreeProd .itmCups { box-shadow: 4000px 4000px 0 4000px #ffc6ff; background: #ffc6ff; }
@media all and (min-width: 961px) and (max-width: 1350px) {
#mainThreeProd .itm .tmb .title { font-size: 1.85vw}
}
@media all and (max-width: 960px) {
#mainThreeProd .itm { width: 50%; padding-bottom: 8.5%; }
#mainThreeProd .itm:last-child { width: 100%; }
#mainThreeProd .itm:last-child .tmb { width: 50%; margin: 0 auto; }
#mainThreeProd .itmDark { box-shadow: 4000px 4000px 0 4000px #564033; }
#mainThreeProd .itmRaspberry { box-shadow: 3820px 4080px 0 4080px #aa176f; background: #aa176f; }
#mainThreeProd .itmStrawberry { box-shadow: 4000px 4000px 0 4000px #f4596b; }
#mainThreeProd .itmMilk { box-shadow: 3820px 4080px 0 4080px #ffef6a; background: #ffef6a; }
#mainThreeProd .itmSquares { box-shadow: 3820px 4080px 0 4080px #8dffaa; }
#mainThreeProd .itmCups { box-shadow: 3820px 4080px 0 4080px #ffc6ff; }
}
@media all and (max-width: 800px) {
#mainThreeProd .itm { width: 100%; padding-bottom: 7.2rem; }
#mainThreeProd .itm:last-child .tmb { width: 100%; }
#mainThreeProd .genBtn1 { /*width: 39rem;*/ }
#mainThreeProd .itmMint { box-shadow: -4000px -4080px 0 4080px #8ee5ff; }
#mainThreeProd .itmDark { box-shadow: 3820px 4080px 0 4080px #564033; }
#mainThreeProd .itmRaspberry { box-shadow: 3820px 4080px 0 4080px #aa176f; }
#mainThreeProd .itmStrawberry { box-shadow: 3820px 4080px 0 4080px #f4596b; }
#mainThreeProd .itmMilk { box-shadow: 3820px 4080px 0 4080px #ffef6a; }
#mainThreeProd .itmBars { box-shadow: -4000px -4080px 0 4080px #8ee5ff; ; }
#mainThreeProd .itmSquares { box-shadow: 3820px 4080px 0 4080px #8dffaa; }
#mainThreeProd .itmCups { box-shadow: 3820px 4080px 0 4080px #ffc6ff; }
}
@media all and (max-width: 640px) {
#mainThreeProd .itm .tmb .title { font-size: 3.5rem; }
}
@media all and (max-width: 540px) {
#mainThreeProd .itm { padding-bottom: 15.5%; }
}
/* Four Prods
--------------------------------------------------------------*/
#mainFourProd { background: #ffb35a;}
#mainFourProd .lft { float: left; width: 350px; padding: 6.5rem 0 6.5rem 5.9%; color :#fff; }
#mainFourProd .lft .ln1 { font-size: 9.6rem; display: block; line-height: 0.8em; }
#mainFourProd .lft .ln2 { font-size: 6.4rem; display: block; line-height: 1em; padding: 0.1em 0; letter-spacing: -0.025em; }
#mainFourProd .lft .ln3 { font-size: 2.2rem; display: block; line-height: 1.2em; padding: 0.5em 0 1em 0; }
#mainFourProd .rgt { margin-left: calc(350px + 5.9%); height: 530px; background: url(../images/main_fourprods_bg_xl.jpg) no-repeat center center; background-size: contain; }
#mainFourProd .btmBtn { display: none; text-align: center; padding-bottom: 6rem; }
@media all and (max-width: 1250px) {
#mainFourProd .lft { padding: 6.5rem 0 6.5rem 1rem; }
#mainFourProd .rgt { margin-left: 325px; }
}
@media all and (max-width: 1120px) {
#mainFourProd .rgt { background: url(../images/main_fourprods_bg_md.jpg) no-repeat center center; background-size: contain; }
}
@media all and (max-width: 728px) {
#mainFourProd { padding: 0.6rem 0}
#mainFourProd .lft { padding: 7rem 0 0 0 ; margin: 0; float: none; width: 100%; text-align: center; }
#mainFourProd .lft:after { content: ' '; display: block ; width: 100%; height: 0; margin: 2rem 0 -2rem 0; padding-top: 82.8333%; background: url(../images/main_fourprods_bg_sm1.jpg) no-repeat center center; background-size: 100% auto; }
#mainFourProd .lft .genBtn1 { display: none; width: 34rem; }
#mainFourProd .lft .ln1 { font-size: 10rem; }
#mainFourProd .lft .ln2 { font-size: 5.5rem; padding: 0.2em 0 0.1em 0; }
#mainFourProd .lft .ln2 br { display: none; }
#mainFourProd .lft .ln3 { font-size: 4.4rem; padding: 0.03em 0 0 0; }
#mainFourProd .rgt { margin: 0; background: url(../images/main_fourprods_bg_sm2.jpg) no-repeat center center; background-size: 100% auto; height: 0px; padding-top: 82.8333%; margin-bottom: 2rem; }
#mainFourProd .btmBtn { display: block; }
}
@media all and (max-width: 640px) {
#mainFourProd .genBtn1 { width: 34rem; }
}
/* Shop Everything
--------------------------------------------------------------*/
#mainShop { font-size: 8.2rem; line-height: 1em; text-align: center; padding: 10rem 0; }
#mainShop a img { display: inline; vertical-align: top; width: 1em; height: 1em!important; }
@media all and (max-width: 1140px) {
#mainShop { font-size: 7.2vw; }
}
/* Why
--------------------------------------------------------------*/
#mainWhy { padding: 9.6rem 0 }
#mainWhy .heart img { width: 10.4rem; margin-bottom: 3rem; }
#mainWhy .title { font-size: 6rem; line-height: 1.16em; display: block; }
#mainWhy .subTxt { padding: 0.6em 0 4.6rem 0; line-height : 1.6em; font-size: 2.4rem; }
@media all and (max-width: 690px) {
#mainWhy .title { font-size: 4.5rem; }
}
/* Blog listings
--------------------------------------------------------------*/
#mainBlog { overflow: hidden; }
#mainBlog .itm { float: left; width: 33.33%; text-align: center; margin-bottom: -2px; }
#mainBlog .itm a { display: block; position: relative; background: #000; }
#mainBlog .itm a img { width: 100%; opacity: .80; filter: alpha(opacity=80); -ms-filter: "alpha(opacity=80)"; -khtml-opacity: .8; -moz-opacity: .8; position: relative; z-index: 2 }
#mainBlog .itm a .desc { display: block; width: 100%; position: absolute; top: 50%; top: calc( 50% - 3.6rem ); margin-top: -21px; left: 0; right: 0; z-index: 5; }
#mainBlog .itm a .bt { display: block; line-height: 26px; font-size: 10px; display: block; left: 0; width: 100%; margin-bottom: 13px; }
#mainBlog .itm a .bt span { border: solid 2px #fff; padding: 0 13px; }
#mainBlog .itm a .title { font-size: 2.8rem; line-height: 1.28em; padding: 0; max-width: 14em; margin: 0 auto; }
@media all and (min-width: 900px) and (max-width: 1300px) {
#mainBlog .itm a .desc { top: calc( 50% - 3rem ); }
#mainBlog .itm a .title { font-size: 24px; }
}
@media all and (min-width: 900px) and (max-width: 1080px) {
#mainBlog .itm a .desc { top: calc( 50% - 2.5rem ); }
#mainBlog .itm a .title { font-size: 20px; }
}
@media all and (min-width: 600px) and (max-width: 899px) {
#mainBlog .itm { width: 50%; }
#mainBlog .itm:last-child { display: none; }
}
@media all and (min-width: 600px) and (max-width: 820px) {
#mainBlog .itm a .desc { top: calc( 50% - 2.5rem ); }
#mainBlog .itm a .title { font-size: 2rem; }
}
@media all and (max-width: 600px) {
#mainBlog .itm { width: 100%; margin: 0; }
}
/* Main bottom pop-in
--------------------------------------------------------------*/
#mainBtmPPin .prodListing { padding: 3px 12px 3px 3px; float: left; white-space: nowrap; cursor: pointer; }
#mainBtmPPin { float: left; border: 1px solid rgba(255,255,255,0); background-color: rgba(255,255,255,1); -moz-box-shadow: 0 0 5px rgba(2, 39, 63,.3); -webkit-box-shadow: 0 0 5px rgba(2, 39, 63,.3); box-shadow: 0 0 5px rgba(2, 39, 63,.3); position: fixed; left: 20px; z-index: 98; bottom: 20px; -webkit-background-clip: padding-box; background-clip: padding-box; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
#mainBtmPPin .prodListing .tmb { float: left; margin: 0; height: 81px!important; line-height: 88px; width: 88px; white-space: nowrap; text-align: center; }
#mainBtmPPin .prodListing .tmb img { max-width: 100%; max-height: 88px; width: auto!important; height: auto!important; vertical-align: middle; display: inline; }
#mainBtmPPin .desc .msg { font-size: 14px; line-height: 18px; padding: 0; margin: 0; }
#mainBtmPPin .prodListing .desc { padding-top: 8px; float: left; padding-bottom: 8px; padding-left: 6px; }
#mainBtmPPin .prodListing .desc p { display: block; }
#mainBtmPPin .prodListing .desc .prodTitle { font-size: 16px; font-weight: 700; line-height: 20px; padding: 0; margin: 0; font-family: 'Montserrat'; }
#mainBtmPPin .prodListing .desc .min { font-size: 13px; line-height: 16px; color: #787878; padding: 0 0 1px 0; margin: 0; }
@media screen and (max-width: 480px) {
#mainBtmPPin .prodListing .desc .prodTitle { font-size: 2.2rem; }
}
@media screen and (max-width: 355px) {
#mainBtmPPin { left: 9px; right: 9px; margin-bottom : -11px; float: none; }
#mainBtmPPin .desc .msg { font-size: 12px; }
#mainBtmPPin .prodListing .desc .min { font-size: 11px; }
}
/* Footer Newsletter
--------------------------------------------------------------*/
#mainftrNewsletter { padding: 125px 0 0 0; }
#mainftrNewsletter .FrmCtr { position: relative; }
#mainftrNewsletter .logo { float: left; width: 170px; margin-top: -6px; background-size: 100% auto; }
#mainftrNewsletter .title { font-size: 1.6rem; line-height: 1.33em; margin-bottom: 0; text-transform: uppercase; padding: 0 35% 0 170px; }
#mainftrNewsletter .title span { max-width: 360px; text-align: left; }
#mainftrNewsletter #mainFtrEmail { right: 2rem; top: 0; width: 35%; position: absolute; }
#mainftrNewsletter #email_signup { display: block; position: relative; }
#mainftrNewsletter .input-group { position: relative; }
#mainftrNewsletter input[type=email] { border: solid 3px #f6f4f2; background: #f6f4f2; color: #5e4637; padding-right: 144px; width: 100%; height: 44px; -webkit-background-clip: padding-box; background-clip: padding-box; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
/*Input Text Placeholder colors*/
#mainftrNewsletter input[type=email]::-webkit-input-placeholder {
color:rgba(94,70,55,1);
font-style:normal;
}
#mainftrNewsletter input[type=email]:-moz-placeholder {
color:rgba(94,70,55,1);
font-style:normal;
opacity:1;
-moz-opacity:1;
}
#mainftrNewsletter input[type=email]::-moz-placeholder {
color:rgba(94,70,55,1);
font-style:normal;
opacity:1;
}
#mainftrNewsletter input[type=email]:-ms-input-placeholder {
color:rgba(94,70,55,1)!important;
font-style:normal;
}
#mainftrNewsletter input[type=email]:focus::-webkit-input-placeholder {
color: rgba(94,70,55,0.58);
font-style:normal;
}
#mainftrNewsletter input[type=email]:focus:-moz-placeholder {
color:rgba(94,70,55,0.58));
font-style:normal;
opacity:1;
-moz-opacity:1;
}
#mainftrNewsletter input[type=email]:focus::-moz-placeholder {
color:rgba(94,70,55,0.58);
font-style:normal;
opacity:1;
}
#mainftrNewsletter input[type=email]:focus:-ms-input-placeholder {
color:rgba(94,70,55,0.58)!important;
font-style:normal;
}
#mainftrNewsletter .input-group-btn { position: absolute; right: 0; top: 0; width: 145px; text-align: center; }
#mainftrNewsletter .input-group-btn .genBtn1 { display: block; width: 100%; -webkit-appearance: none; background: none; border: none; outline: 0; z-index: 4; line-height: 44px; }
#mainftrNewsletter .input-group-btn .genBtn1:after { -webkit-border-top-left-radius: 0; -webkit-border-bottom-left-radius: 0; -moz-border-radius-topleft: 0; -moz-border-radius-bottomleft: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; background: #eb3561;}
#fc-response .error_message { color: #cc0000; font-size: 14px; position: relative; top: 4px; }
#fc-response .success_message { color: #5e4637!important; }
#mainFtrResponse { display: block; height: 40px; text-align: center; position: relative; top: -2rem; }
@media all and (max-width: 960px) {
#mainftrNewsletter { padding-top: 6rem; }
#mainftrNewsletter .logo { float: none; margin: 0 auto; width: 20rem; padding-bottom: 40px; }
#mainftrNewsletter .title { margin: 0 auto; padding: 0; font-size: 2.2rem; padding-bottom: 1rem; }
#mainftrNewsletter .title span { text-align: center; max-width: 19em; }
#mainftrNewsletter #mainFtrEmail { position: static; width: 100%; max-width: 500px; margin: 0 auto; }
#fc-response .error_message { text-align: center; top: 1rem; }
}
@media all and (max-width: 500px) {
#mainftrNewsletter .logo { padding-bottom: 4.2rem; display: none; }
#mainftrNewsletter form { padding: 0 2rem; }
#mainftrNewsletter .title { font-size: 3.2rem; line-height: 1.2em; }
#mainftrNewsletter input[type=email] { padding-right: 109px; }
#mainftrNewsletter .input-group-btn { width: 100px; }
#mainftrNewsletter .input-group-btn .genBtn1 { padding-left: 0; padding-right: 0; }
}
@media all and (max-width: 479px) {
#fc-response .error_message { font-size: 11px; }
}
@media all and (max-width: 359px) {
#mainftrNewsletter input[type=email] { height: 35px; }
#mainftrNewsletter .genBtn1 { line-height: 35px!important; font-size: 15px; }
}
/* Footer Mid section
--------------------------------------------------------------*/
#mainftrMid { padding: 5.6rem 0 9.6rem 0; }
#mainftrMid .rgt { float: right; width: 75.8%; }
#mainftrMid .title { font-size: 18px; line-height: 1.7em; font-weight: bold; }
#mainftrMid li { display: block; font-size: 13px; line-height: 2.46em; }
#mainftrMid li a { position: relative; color: #5e4637; }
#mainftrMid li a:after { content: ' '; left: 50%; width: 0; position: absolute; bottom: -3px; height: 1px; background: #5e4637; display: block; -webkit-transition-property: all; -webkit-transition-duration: 350ms; -webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -moz-transition-property: all; -moz-transition-duration: 350ms; -moz-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-property: all; transition-duration: 350ms; transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); }
.devDesktop #mainftrMid li a:hover:after { left: 0; width: 100%; bottom: -3px; }
#mainftrMid .col1 { float: left; width: 24% }
#mainftrMid .col2 { float: left; width: 39%; }
#mainftrMid .col3 { float: left; width: 41.6%; }
#mainftrMid .col4 { float: right; width: auto; }
#mainftrMid .col4 ul { padding-top: 15px; }
#mainftrMid .col4 .social li { margin-left: 0.8rem; display: inline; }
#mainftrMid .col4 .social li:first-child { margin-left: 0; }
#mainftrMid .col4 .social li a { background: #fcb330; width: 32px; height: 32px; background-repeat: no-repeat; background-size: 20px auto; background-position: center center!important; }
#mainftrMid .col4 .social li a:hover { background-color: #503620; }
#mainftrMid .col4 .social li a:after { display: none!important; }
#mainftrMid .col4 .social li .twi { background-image: url(../images/main_ftr_ico_twi_br.svg); }
#mainftrMid .col4 .social li .fbk { background-image: url(../images/main_ftr_ico_fbk_br.svg); }
#mainftrMid .col4 .social li .ins { background-image: url(../images/main_ftr_ico_ins_br.svg); }
#mainftrMid .col4 .social li .pin { background-image: url(../images/main_ftr_ico_pin_br.svg); background-size: 15px auto; }
@media all and (max-width: 1150px) {
#mainftrMid .col2 { float: left; width: 37%; width: calc(50% - 86px); }
#mainftrMid .col3 { float: left; width: 180px; }
#mainftrMid .col4 { float: right; width: auto; }
}
@media all and (max-width: 960px) {
#mainftrMid { padding: 5.6rem 0; }
}
@media all and (max-width: 880px) {
#mainftrMid .rgt { float: none; width : auto; }
#mainftrMid .col1, #mainftrMid .col2, #mainftrMid .col3 { width: 33%; padding-bottom: 30px; }
#mainftrMid .col1 { width: 45%; }
#mainftrMid .col2 { width: auto; margin-left: -90px; }
#mainftrMid .col3 { width: auto; float: right; }
#mainftrMid .col4 { clear: both; margin: 0 auto; float: none; text-align: center; }
}
@media all and (max-width: 0.780px) {
#mainftrMid .rgt { float: none; width : auto; }
#mainftrMid .col1 { float: none; width: 100%; padding-bottom: 30px; }
#mainftrMid .col1 img { max-width: 17rem; margin: 0 auto; }
}
@media all and (max-width: 600px) {
#mainftrMid { text-align: left; }
#mainftrMid .title { padding-bottom: 0.2em; display: block; }
#mainftrMid li { line-height: 1.8em; }
#mainftrMid .col1 { float: right; width: 46%; padding-bottom: 3rem; }
#mainftrMid .col2 { float: right; width: 54%; padding-bottom: 3rem; margin: 0; }
#mainftrMid .col3 { float: left; width: 54%; padding-bottom: 3rem; }
#mainftrMid .col4 { float: left; width: 46%; clear: none; text-align: left; }
}
@media all and (max-width: 340px) {
#mainftrMid .col4 .social li a { width:30px; height: 30px; background-size: 18px auto; }
}
/* Footer copyright section
--------------------------------------------------------------*/
#mainFtrCopy { position: relative; padding: 20px 0; font-size: 14px; text-align: center; background: #efaa2e!important; color:#503620 ; }
#mainFtrCopy ul { display: inline; }
#mainFtrCopy li { display: inline; }
#mainFtrCopy a { display: -moz-inline-stack; display: inline-block; zoom: 1; *display:inline;
position: relative; color: #503620; }
#mainFtrCopy a:after { content: ' '; left: 50%; width: 0; position: absolute; bottom: -3px; height: 1px; background: #503620; display: block; -webkit-transition-property: all; -webkit-transition-duration: 350ms; -webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -moz-transition-property: all; -moz-transition-duration: 350ms; -moz-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-property: all; transition-duration: 350ms; transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); }
.devDesktop #mainFtrCopy a:hover:after { left: 0; width: 100%; bottom: -3px; }
@media all and (max-width: 640px) {
#mainFtrCopy ul { padding: 0; display: block; float: none; text-align: center; }
#mainFtrCopy ul.tosLinks { float: none; }
#mainFtrCopy ul.tosLinks li:first-child .sep { display: none; }
/*#mainFtrCopy ul .sep { display: none; }
#mainFtrCopy ul li { display: block; }*/
}
@media all and (max-width: 359px) {
#mainFtrCopy { font-size: 13px; }
}
/*
////
//// Collections
////
--------------------------------------------------------------*/
/* Intro
--------------------------------------------------------------*/
#innerIntro, #innerIntro2 { background: #f6f4f2; padding: calc(10.25vw - 10.7rem) 0; }
#innerIntro.introBg-ambassadors { padding-bottom: calc(10.25vw - 10.7rem + 37px ); }
#innerIntro .title, #innerIntro2 .title { font-size: 6rem; line-height: 1.16em; padding: 0; margin: 0 0 1rem 0; letter-spacing: 0.05em; text-transform: uppercase; }
#innerIntro p, #innerIntro2 p { display: block; padding: 0; font-size: 2.4rem; line-height: 1.4em; }
#innerIntro p a, #innerIntro2 p a { text-decoration: underline; color: #fff; }
#innerIntro p a:hover, #innerIntro2 p a:hover { text-decoration: none; }
#innerIntro p a.genBtn1 , #innerIntro2 p a.genBtn1 { text-decoration: none!important; }
@media all and (min-width: 1458px) {
#innerIntro.introBg-ambassadors { padding-bottom: 8.2rem; }
}
@media all and (min-width: 1840px) {
#innerIntro, #innerIntro2, #innerIntro.introBg-ambassadors { padding: 8.2rem 0; }
}
@media all and (max-width: 1350px) {
#innerIntro, #innerIntro2 { padding: 3.2rem 0; }
#innerIntro.introBg-ambassadors { padding-bottom: calc(3.2rem + 37px ); }
}
@media all and (max-width: 640px) {
#innerIntro, #innerIntro2 { padding: 6rem 0; }
}
/* Bars Intro
--------------------------------------------------------------*/
#collectWrp .introBg-collection { padding: 0; background: #fff; overflow: hidden; text-align: center; color: #fff; }
#collectWrp #barsIntroLft { margin-bottom: -1px; float: left; width: 50%; padding: 6.39vw 0; background: #006eb6 url(../images/bars_intro_bg1.png) no-repeat center bottom; background-size: auto 96%; }
#collectWrp #barsIntroRgt { margin-bottom: -1px; float: left; width: 50%; padding: 6.39vw 0; background: #c80680 url(../images/bars_intro_bg2.png) no-repeat center top; background-size: auto 96%; }
#collectWrp .introBgSquares-collection #barsIntroLft {background-color: #c10040; background-image: url(../images/squares_intro_bg1.png); }
#collectWrp .introBgSquares-collection #barsIntroRgt { background-color: #6a1269; background-image: url(../images/squares_intro_bg2.png); }
#collectWrp .introBgMelts-collection #barsIntroLft {background-color: #626590; background-image: url(../images/melts_intro_bg1.png); }
#collectWrp .introBgMelts-collection #barsIntroRgt { background-color: #cd6300; background-image: url(../images/melts_intro_bg2.png); }
#collectWrp .introBgCups-collection #barsIntroLft {background-color:/*#7c4d25*/ #097fc7; background-image: url(../images/cups_intro_bg1.png); }
#collectWrp .introBgCups-collection #barsIntroRgt { background-color: #965906; background-image: url(../images/cups_intro_bg2.png); }
#collectWrp .introBgCocoa-collection #barsIntroLft {background-color: #00a6d8; background-image: url(../images/cocoa_intro_bg1.png); }
#collectWrp .introBgCocoa-collection #barsIntroRgt { background-color: #cebb90; background-image: url(../images/cocoa_intro_bg2.png); }
#collectWrp .introBgFreeTrial #barsIntroLft {background-color: #61452f; background-image: url(../images/free_trial_intro_bg1.png); }
#collectWrp .introBgFreeTrial #barsIntroRgt { background-color: #ff9c00; background-image: url(../images/free_trial_intro_bg2.png); }
#collectWrp #innerIntro .barsIntroLn1 { font-size: 1.3vw; letter-spacing: 0.05em; }
#collectWrp #innerIntro .barsIntroLn2 { font-size: 2.5vw; padding: 0; margin: 0; }
@media all and (min-width: 1840px) {
#collectWrp #innerIntro .barsIntroLn1 { font-size: 2.4rem; }
#collectWrp #innerIntro .barsIntroLn2 { font-size: 4.8rem; }
#collectWrp #barsIntroLft { padding: 11.55rem 0 ; background-size: auto 100%; }
#collectWrp #barsIntroRgt { padding: 11.55rem 0; background-size: auto 100%; }
}
@media all and (max-width: 1280px) {
#collectWrp #barsIntroLft { padding: 6.2vw 0; background-size: auto 87%; }
#collectWrp #barsIntroRgt { padding: 6.2vw 0; background-size: auto 87%; }
#collectWrp #innerIntro .barsIntroLn1 { font-size: 1.8vw; }
#collectWrp #innerIntro .barsIntroLn2 { font-size: 3vw; }
}
@media all and (max-width: 880px) {
#collectWrp #barsIntroLft, #collectWrp #barsIntroRgt { padding: 12.4vw 0; background-size: auto 98%; width: 100%; }
#collectWrp #barsIntroRgt { display: block; }
#collectWrp #innerIntro .barsIntroLn1 { /*font-size: 2.5rem;*/ font-size: 2.85rem; font-weight: 600; letter-spacing: 0.025em; }
#collectWrp #innerIntro .barsIntroLn2 { font-size: 4.2rem; }
}
@media all and (max-width: 640px) {
#innerIntro .title { /*font-size: 4.6rem;*/ font-size: 3.55rem; line-height: 1.16em; letter-spacing: 0.025em; }
}
/* Store locator intro
--------------------------------------------------------------*/
#findUsCont .introBg-storeLocator { padding: 0; background: #fff; overflow: hidden; text-align: center; color: #fff; position: relative; }
#findUsCont #locatorLft { margin-bottom: -1px; float: left; width: 50%; padding: 6.973vw 0;position: absolute; left: 0; top: 0; bottom: 0; background: #74ddf6 url(../images/locator_intro_bg1.png) no-repeat center bottom!important; background-size: auto 96%!important; }
#findUsCont #locatorRgt { margin-bottom: -1px; float: right; width: 50%; padding: 6.973vw 0; background: #ffc3d6 url(../images/locator_intro_bg2.png) no-repeat center top; background-size: auto 96%; }
#findUsCont #innerIntro .IntroLn1 { font-size: 1.3vw; letter-spacing: 0.05em; }
#findUsCont #innerIntro .IntroLn2 { font-size: 2.5vw; padding: 0; margin: 0; }
@media all and (min-width: 1840px) {
#findUsCont #innerIntro .IntroLn1 { font-size: 2.4rem; }
#findUsCont #innerIntro .IntroLn2 { font-size: 4.8rem; }
#findUsCont #locatorLft { padding: 12.75rem 0 ; background-size: auto 100%!important; }
#findUsCont #locatorRgt { padding:12.75rem 0; background-size: auto 100%!important; }
}
@media all and (max-width: 1280px) {
#findUsCont #locatorLft { padding: 6.748vw 0; background-size: auto 87%!important; }
#findUsCont #locatorRgt { padding: 6.748vw 0; background-size: auto 87%!important; }
#findUsCont #innerIntro .IntroLn1 { font-size: 1.8vw; }
#findUsCont #innerIntro .IntroLn2 { font-size: 3vw; }
}
@media all and (max-width: 880px) {
#findUsCont #locatorLft { display: none; }
#findUsCont #locatorRgt { width: 100%; padding: 8.1vw 0; }
#findUsCont #innerIntro .IntroLn1 { font-size: 2.9rem; }
#findUsCont #innerIntro .IntroLn2 { font-size: 4.8rem; }
}
/*Aboutus intro
--------------------------------------------------------------*/
#aboutCont .introBg-storeLocator { padding: 0; background: #fff; overflow: hidden; text-align: center; color: #fff; position: relative; }
#aboutCont #aboutIntroLft { margin-bottom: -1px; float: left; width: 50%; padding: 6.39vw 0; position: absolute; left: 0; top: 0; bottom: 0; background: #7c4d25 url(../images/about_intro_bg1.png) no-repeat center bottom!important; background-size: auto 96%!important; }
#aboutCont #aboutIntroRgt { margin-bottom: -1px; float: right; width: 50%; padding: 6.982vw 0; background: #d59312 url(../images/about_intro_bg2.png) no-repeat center top; background-size: auto 96%; }
#aboutCont #innerIntro .IntroLn1 { font-size: 1.3vw; letter-spacing: 0.05em; }
#aboutCont #innerIntro .IntroLn2 { font-size: 2.5vw; padding: 0; margin: 0; }
@media all and (min-width: 1840px) {
#aboutCont #innerIntro .IntroLn1 { font-size: 2.4rem; }
#aboutCont #innerIntro .IntroLn2 { font-size: 4.8rem; }
#aboutCont #aboutIntroLft { padding: 11.55rem 0 ; background-size: auto 100%!important; }
#aboutCont #aboutIntroRgt { padding: 12.75rem 0; background-size: auto 100%!important; }
}
@media all and (max-width: 1280px) {
#aboutCont #aboutIntrorLft { padding: 6.2vw 0; background-size: auto 87%!important; }
#aboutCont #aboutIntroRgt { padding: 6.754vw 0; background-size: auto 87%!important; }
#aboutCont #innerIntro .IntroLn1 { font-size: 1.8vw; }
#aboutCont #innerIntro .IntroLn2 { font-size: 3vw; }
}
@media all and (max-width: 880px) {
#aboutCont #aboutIntroLft { display: none; }
#aboutCont #aboutIntroRgt { width: 100%; padding: 12.6vw 0; }
#aboutCont #innerIntro .IntroLn1 { font-size: 2.9rem; }
#aboutCont #innerIntro .IntroLn2 { font-size: 4.8rem; }
}
/* Collection Nav tabs
--------------------------------------------------------------*/
#collectNav .bg { background: #fff; padding: 4.8rem 0 3rem 0; text-align: center; line-height: 3.4rem; font-size: 2.8rem; letter-spacing: 0.05em; }
#collectNav .bg ul { display: inline; }
#collectNav .bg li { display: inline; padding: 0 0 0 1rem; }
#collectNav .bg li a { color: #5e4637; margin-right: 1rem; }
#collectNav .bg li:last-child a { margin-right: 0; }
#collectNav .bg li a.cur { color: #fcb330; }
.collectionTabWrp { overflow: hidden; position: relative; }
.collectionTabWrp .tab { left: 0; top: 0; width: 100%; }
.mainBestSelling div.collectionTabWrp { padding-bottom: 0!important; }
@media all and (max-width: 720px) {
#collectNav .bg { font-size: 2.5rem; padding-bottom: 2rem; }
#collectNav .bg li { padding: 0 0 0 0.2rem; }
#collectNav .bg li a { margin-right: 0.2rem; }
#collectNav .bg li:last-child a { margin-right: 0; }
}
/* Collection List
--------------------------------------------------------------*/
#collectLst { background: #fff; }
#collectLst .collectionTabWrp { padding-bottom: 3.6rem; }
#collectLst .collectionNoTabWrp { padding-top: 2.6rem; }
#collectLst ul { overflow: hidden; }
#collectLst li { float: left; width: 25%; position: relative; }
#collectLst .mainBestSellingLst2 li { width: 33.33%; }
#collectLst .mainBestSellingLst2 li:nth-child(4) { display: none; }
#collectLst .mainBestSellingLst2 div { width: 70%; margin: 0 auto; }
#collectWrp .activeCoco li { width: 50%; }
#collectWrp .activeCoco { max-width: 800px; margin: 0 auto; }
/*#collectWrp .collectionMeltsWrp { max-width: 1066px; margin: 0 auto; }
#collectWrp .collectionMeltsWrp li { width: 50%; }*/
#collectLst li .soon { display: block; right: 13.6%; top: 2%; position: absolute; background: #60d4f7; font-size: 1.5rem; color: #fff; line-height: 1.6rem; width: 8rem; height: 3.2rem; z-index: 10; padding: 2.48rem 0 2.32rem 0; }
#collectWrp .collectionMeltsWrp li .soon { right: 4%; top: 0%; }
#collectLst li .new { display: block; right: 13.6%; top: 2%; position: absolute; background: #fcb330; font-size: 1.5rem; color: #fff; line-height: 1.6rem; width: 8rem; height: 1.6rem; z-index: 10; padding: 3.28rem 0 3.12rem 0; }
#collectWrp .collectionMeltsWrp li .new { right: 4%; top: 0%; }
#collectLst li .seasonal {background: #fc3048; }
#collectLst li:nth-child(4n+1) { clear: left; }
#collectLst li a.tmb { display: block; padding-top: 158%; position: relative; margin: 0 0 -8% 0; }
#collectLst li a.tmbBar { padding-top: 158%; }
#collectLst li a.tmbSquare { padding-top: 129%; }
#collectLst li a.tmbCups { padding-top: 129%; }
#collectLst li a.tmbCocoa { padding-top: 129%; }
#collectLst li a.tmbMelts { padding-top: 61.6%; }
#collectLst li a img { transform: perspective(2px); margin: 0 auto 0 auto; position: absolute; left: 0; top: 0; }
#collectLst li .title { font-size: 2.1rem; line-height: 1.3em; position: relative; z-index: 20; top : -1rem; margin-bottom: 0; padding-bottom: 0!important; letter-spacing: -0.01em; }
/*#collectLst .collectionMeltsWrp li .title { font-size: 2.6rem;}*/
#collectLst li .desc { font-size: 1.5rem; line-height: 1.5em; position: relative; z-index: 20; font-weight: 400; }
#collectLst .rateWrp { margin-top: -0.8rem; height: 4.8rem; }
#collectLst .rateStars { line-height: 3rem; margin-right: 0.6rem; font-size: 0; display: -moz-inline-stack; display: inline-block; zoom: 1; *display:inline; vertical-align: top; float: none!important; }
#collectLst .rateStars li { width: 2.6rem!important; display: -moz-inline-stack!important; display: inline-block!important; zoom: 1; *display:inline!important; vertical-align: top; clear: none!important; margin-right: -0.4rem; float: none!important; }
#collectLst .rateStars li img { -webkit-transform: rotate(180deg) scale(-1, 1); transform: rotate(180deg) scale(-1, 1); max-height: 2.6rem!important; display: inline!important; }
#collectLst .reviewCnt, #collectLst .reviewCnt span { font-size: 1.3rem; line-height: 3.1rem; vertical-align: top; color: #888888; }
@media all and (max-width: 1250px) {
#collectLst li { float: left; width: 33%; }
#collectWrp .activeCoco li { width: 50%; }
/*#collectWrp .collectionMeltsWrp li { width: 50%; }*/
#collectLst .mainBestSellingLst2 li { width: 50%; }
#collectLst .mainBestSellingLst1 li:nth-child(4) { display: none; }
#collectLst .mainBestSellingLst2 li:nth-child(3) { display: none; }
#collectLst li:nth-child(4n+1) { clear: none; }
#collectLst li:nth-child(3n+1) { clear: left; }
}
@media all and (max-width: 980px) {
#collectLst li { float: left; width: 50%; }
#collectLst .mainBestSellingLst2 div { width: 100%}
#collectLst .mainBestSellingLst2 li a.tmb { margin-bottom: -8% ;}
#collectLst .collectionMeltsWrp li a.tmbMelts{ margin-bottom: -5% ;}
/*#collectLst .collectionMeltsWrp li .title { font-size: 2.1rem;}*/
#collectLst .mainBestSellingLst1 li:nth-child(4) { display: block; }
#collectLst .mainBestSellingLst2 li:nth-child(3), #collectLst .mainBestSellingLst2 li:nth-child(4) { display: block; }
#collectLst li:nth-child(2n+1) { clear: left; }
#collectLst li:nth-child(3n+1) { clear: none; }
}
@media all and (min-width: 850px) and (max-width: 980px) {
#collectLst li a.tmb { display: block; padding-top: 0; position: relative; margin: 0 0 -8% 0; }
#collectLst .mainBestSellingLst2 li a.tmb { margin-bottom: -8% ;}
#collectLst li a img { transform: perspective(2px); margin: 0 auto 0 auto; position: relative; left: 0; top: 0; }
}
@media all and (max-width: 640px) {
#collectLst li { overflow: hidden; }
#collectLst li a.tmb { padding-top: 184.5%; }
#collectLst li a.tmbSquare { padding-top: 150%; }
#collectLst li a.tmbCups { padding-top: 136.5%; }
#collectLst li a.tmbCocoa { padding-top: 158%; }
#collectLst li a.tmbMelts { padding-top: 61.6%; }
#collectLst li:nth-child(odd) a img { z-index: 4; }
#collectLst li a img { left: -10%; width: 120%; max-width: 120%; }
#collectLst li a.tmbCups img { left: -3.5%; width: 107%; max-width: 107%; }
#collectLst li a.tmbMelts img { left: 0%; width: 100%; max-width: 100%;}
#collectLst li a.tmbCocoa img { left: -13.5%; width: 125%; max-width: 125%; }
#collectLst li .desc { font-size: 2rem; letter-spacing: -0.02em; }
#collectLst .rateStars { line-height: 3rem; }
#collectLst .rateStars li { width: 2.8rem!important; margin-right: -0.4rem; }
#collectLst .rateStars li img { max-height: 2.8rem!important; }
#collectLst .reviewCnt, #collectLst .reviewCnt span { font-size: 1.5rem; line-height: 3.3rem; }
}
/*
////
//// Search Results
////
--------------------------------------------------------------*/
/* Nav Tabs
--------------------------------------------------------------*/
#collectNav .bg span.sort { font-weight: normal; }
#collectNav .bg span.sort span { display: inline; }
#collectNav[data-results=Noresults] .bg span, #collectNav[data-results=Noresults] .bg ul { display: none!important; }
@media all and (max-width: 950px) {
#collectNav .bg span.sort { display: block; letter-spacing: 0.025em; }
#collectNav .bg span.sort span { display: block; }
}
@media (max-width: 720px) {
#collectNav .bg span.sort { font-size: 3.2rem; line-height: 1.5em;}
}
/* No Results Listing
--------------------------------------------------------------*/
#collectLst li[data-collection=Nomatch] { width: 100%!important; padding: 4.6rem 0 7.6rem 0;}
#collectLst li[data-collection=Nomatch] h5 { font-size: 2rem;}
#collectLst li[data-collection=Nomatch] a { font-size: 0.9em; }
@media all and (max-width: 640px) {
#collectLst li[data-collection=Nomatch] h5 { font-size: 2.8rem;}
}
/*
////
//// Product Page
////
--------------------------------------------------------------*/
/* Breadcrumbs
--------------------------------------------------------------*/
#breadCrumbsNav { position: relative; z-index: 10; }
#breadCrumbsNav .bg { background: #fff; margin-top: -2rem; padding: 14px 0; text-align: center; line-height: 1.2em; font-size: 14px; letter-spacing: 0.05em; }
#breadCrumbsNav .bgNoClip { margin-top: 0; margin-bottom: -2rem; }
#breadCrumbsNav .bg ul { display: inline; }
#breadCrumbsNav .bg li { display: inline; padding: 0 0 0 1rem; }
#breadCrumbsNav .bg li a { color: #5e4637; margin-right: 1rem; }
@media all and (max-width: 840px) {
#breadCrumbsNav { display: none; }
}
/* Slide
--------------------------------------------------------------*/
#prodSlide { float: left; position: relative; width: 540px; }
#prodSlide img { transform: perspective(2px); }
#prodSlide .soon { display: block; right: 14.5%; top: 13.3%; position: absolute; background: #60d4f7; font-size: 2rem; color: #fff; line-height: 1em; width:5em; height: 2em; z-index: 10; padding: 1.6em 0 1.4em 0; text-align: center; font-family: 'Pluto', "Helvetica Neue", Arial, "Nimbus Sans L", FreeSans; font-weight: 500; margin-top: -2.4em; margin-right: -0.2em; }
#prodSlide .soonMelts { right: 8.4%; top: 35%; margin-right: -1em; }
#prodSlide .soonBars { right: 29.9%; margin-right: -1em; }
#prodSlide .seasonal { background: #fc3048; }
#prodSlide .new { display: block; right: 14.5%; top: 13.3%; position: absolute; background: #fcb330; font-size: 2.4rem; color: #fff; line-height: 0.96em; width: 4.16em; height: 1em; z-index: 10; padding: 1.66em 0 1.5em 0; text-align: center; font-family: 'Pluto', "Helvetica Neue", Arial, "Nimbus Sans L", FreeSans; font-weight: 500; margin-top: -2em; margin-right: -0.16em; }
#prodSlide .newMelts { right: 8.4%; top: 35%; margin-right: -0.84em; }
#prodSlide .newBars { right: 29.9%; margin-right: -0.84em; }
#slideLst { position: relative; margin-bottom: -7%; margin-top: -4%; }
#slideLst .prev, #slideLst .next { position: absolute; top: 50%; margin-top: -22.5px; padding: 0; z-index: 10; left: -22.5px; }
#slideLst .next { left: auto; right: -22.5px; }
#slideLst .prev svg, #slideLst .next svg { width: 23px; height: 35px; }
#slideLst .prev .svg-icon, #slideLst .next .svg-icon { fill: #5e4637; }
.arrow{ --active:#503620;--border:rgba(94,70,55,.25); color: var(--active:#503620);}
.arrow{ display:block;position:relative;width:44px;height:44px; }
.arrow.prev{transform:scaleX(-1);}
.arrow i{display:block;position:absolute;margin:-10px 0 0 -10px;width:20px;height:20px;left:50%;top:50%; z-index: 3; }
.arrow i:before,.arrow i:after{content:"";width:10px;height:2px;border-radius:1px;position:absolute;left:50%;top:50%;background:var(--active);margin:-1px 0 0 -5px;display:block;transform-origin:9px 50%; }
.arrow i:before{transform:rotate(-40deg);}
.arrow i:after{transform:rotate(40deg);}
.arrow:before,.arrow:after{content:"";display:block;position:absolute;left:1px;right:1px;top:1px;bottom:1px;border-radius:50%;border:2px solid var(--border); background: #fff;}
.arrow svg{width:44px!important;height:44px!important;display:block;position:relative;color:var(--active);stroke-width:2px;stroke-dashoffset:126;stroke-dasharray:126 126 0;transform:rotate(0deg); z-index: 4; }
.arrow.animate svg{-webkit-animation:stroke 0.5s ease forwards .15s;animation:stroke 0.5s ease forwards .15s;}
.arrow.animate i{-webkit-animation:arrow 0.8s ease forwards;animation:arrow 0.8s ease forwards;}
.arrow.animate i:before{-webkit-animation:arrowUp 0.8s ease forwards;animation:arrowUp 0.8s ease forwards;}
.arrow.animate i:after{-webkit-animation:arrowDown 0.8s ease forwards;animation:arrowDown 0.8s ease forwards;}
@-webkit-keyframes stroke {
52% {
transform: rotate(-180deg);
stroke-dashoffset: 0;
}
52.1% {
transform: rotate(-360deg);
stroke-dashoffset: 0;
}
100% {
transform: rotate(-180deg);
stroke-dashoffset: 126;
}
}
@keyframes stroke {
52% {
transform: rotate(-180deg);
stroke-dashoffset: 0;
}
52.1% {
transform: rotate(-360deg);
stroke-dashoffset: 0;
}
100% {
transform: rotate(-180deg);
stroke-dashoffset: 126;
}
}
@-webkit-keyframes arrow {
0%, 100% {
transform: translateX(0);
opacity: 1;
}
23% {
transform: translateX(17px);
opacity: 1;
}
24%, 80% {
transform: translateX(-22px);
opacity: 0;
}
81% {
opacity: 1;
transform: translateX(-22px);
}
}
@keyframes arrow {
0%, 100% {
transform: translateX(0);
opacity: 1;
}
23% {
transform: translateX(17px);
opacity: 1;
}
24%, 80% {
transform: translateX(-22px);
opacity: 0;
}
81% {
opacity: 1;
transform: translateX(-22px);
}
}
@-webkit-keyframes arrowUp {
0%, 100% {
transform: rotate(-40deg) scaleX(1);
}
20%, 80% {
transform: rotate(0deg) scaleX(0.1);
}
}
@keyframes arrowUp {
0%, 100% {
transform: rotate(-40deg) scaleX(1);
}
20%, 80% {
transform: rotate(0deg) scaleX(0.1);
}
}
@-webkit-keyframes arrowDown {
0%, 100% {
transform: rotate(40deg) scaleX(1);
}
20%, 80% {
transform: rotate(0deg) scaleX(0.1);
}
}
@keyframes arrowDown {
0%, 100% {
transform: rotate(40deg) scaleX(1);
}
20%, 80% {
transform: rotate(0deg) scaleX(0.1);
}
}
#slideLst .slider-main { position: relative; top: 0; left: 0; width: 100%; padding-top: 137.77%; }
#slideLst .slider-main .slick-list { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
#slideLst .slider-main .tmbVid div.tmbVidWrp { position: relative; padding-top: 137.77%; }
#slideLst .slider-main .tmbVid div.tmbVidWrp div { width: 100%; height: 100%; position: absolute; left: 0; top: 0; display: flex; justify-content: center; align-items: center; }
#slideLst .slider-main .tmbVid div.tmbVidWrp .video { display: block; width: 100%!important; height: auto!important; }
#slideLst .slider-main .tmbVid div.tmbVidWrp a { display: block; position: relative; color: #fff; }
#slideLst .slider-main .tmbVid div.tmbVidWrp a span { position: absolute; display: block; left: 50%; top: 50%; line-height: 1.2em; width: 1.2em; margin-top: -0.6em; margin-left: -0.6em; font-size: 11rem; text-align: center; }
/*#slideLst .slider-main .slick-list span.svgWrp { display: block; width: 100%; position: relative; padding-top: 137.77%; }
#slideLst .slider-main .slick-list span svg, #slideLst .slider-main .slick-list span embed { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; backface-visibility: hidden; }*/
#slideLst .slider-main .slick-slide { cursor: grab; }
#slideNavWrp { position: relative; z-index: 10; }
#slideNav { text-align: center; max-width: 380px; margin: 0 auto; font-size: 0; }
#slideNav div { width: 20%; max-width: 76px; margin: 0 2.4%; border: solid 2px #e8e9e9; background: #fff; }
#slideNav div.cur { border: solid 2px #5e4637; }
#slideNav div a { display: block; padding: 100% 0 0 0; position: relative; }
#slideNav div img { max-width: 100%; max-height: 100%; position: absolute; left: 50%; top: 50%; -webkit-transform: translateY(-50%) translateX(-50%); transform: perspective(2px) translateY(-50%) translateX(-50%); image-rendering: -webkit-optimize-contrast; image-rendering: pixelate; }
#slideNav2 { max-width: 188px; margin:0 auto; }
#slideNav2 .itm { padding: 0 9px; }
#slideNav2 .slick-slider div.icon-spinner { width:100%; border: solid 2px #e8e9e9; background: #fff; }
#slideNav2 .slick-slider div.slick-active .icon-spinner { border: solid 2px #5e4637; }
#slideNav2 .slick-slider div.icon-spinner .tmb { cursor: pointer; display: block; padding: 100% 0 0 0; position: relative; }
#slideNav2 .slick-slider div.icon-spinner img { max-width: 100%; max-height: 100%; position: absolute; left: 50%; top: 50%; -webkit-transform: translateY(-50%) translateX(-50%); transform: perspective(2px) translateY(-50%) translateX(-50%); image-rendering: -webkit-optimize-contrast; image-rendering: pixelate; }
#prodSlide .sugarFree { font-size: 16px; line-height: 1.625em; letter-spacing: 0.05em; padding: 2.6rem 0 0 0; margin-top: 11%; text-align: center; }
#prodSlide .sugarFree p { padding: 0; }
@media all and (max-width: 1060px) {
#prodSlide { width: 40%; width: calc(100% - 474px); }
#prodSlide .soon{ font-size: calc(3.6vw - 1.8rem); top: 13.8%;}
#prodSlide .soonMelts { top: 35%; }
#prodSlide .new { font-size: calc(3.6vw - 1.4rem); top: 13.8%;}
#prodSlide .newMelts { top: 35%; }
}
@media all and (max-width: 900px) {
#prodSlide { width: calc(100% - 454px); }
}
@media all and (max-width: 840px) {
#prodSlide { float: none; width: 100%; margin: 0 auto; max-width: 54rem; overflow: hidden; }
#prodSlide .soon { right: 12.5%; top: 15%; font-size: 2rem; }
#prodSlide .soonMelts { right: 7.6%; top: 35%; }
#prodSlide .soonBars { right: 29.9%; }
#prodSlide .new { right: 12.5%; top: 15%; font-size: 2.4rem; }
#prodSlide .newMelts { right: 7.6%; top: 35%; }
#prodSlide .newBars { right: 29.9%; }
#prodSlide .sugarFree { font-size: 2.7rem; line-height: 1.5em; padding: 2.6rem 2rem 0 2rem; }
#slideLst .prev { left: 2rem; }
#slideLst .next { right: 2rem; }
#slideLst .prev .svg-icon, #slideLst .next .svg-icon { fill: #fff; }
}
@media all and (max-width: 540px) {
#prodSlide { width: auto; margin: 0 -2rem; max-width: none; }
#prodSlide .new { font-size: 3rem; }
}
/* Product top Side Description
--------------------------------------------------------------*/
#prodTopDtls { float: right; width: 475px; padding-top: 65px; }
#prodTopDtls .prodTopDtlsInner { float: left; max-width: 412px; }
#prodTopCont { position:relative; padding-bottom: 30rem; }
#prodCont .rateStars { float: left; line-height: 30px; margin-right: 8px; cursor: pointer; }
#prodCont .rateStars li { float: left; width: 30px; margin: 0 -0.03em; }
#prodCont .rateStars li img, #prodCont .rateStars li svg { -webkit-transform: rotate(180deg) scale(-1, 1); transform: rotate(180deg) scale(-1, 1); max-height: 30px; display: block; max-width: 100%; height: auto!important; }
#prodTopDtls .reviewCnt, #prodTopDtls .reviewCnt span { font-size: 14px; line-height: 33px; vertical-align: top; cursor: pointer; }
#prodTopDtls .prodTitle1 { font-size: 6rem; line-height: 1.1em; padding: 0.8rem 0 0.6rem 0; margin: 0; text-indent: -0.05em; }
#prodTopDtls .prodTitle2 { font-size: 2.4rem; line-height: 1.2em; margin: 0; padding: 0.45em 0 0 0; }
#prodTopDtls .titleWrp { border-bottom: solid 3px #f6f4f2; padding: 0 0 3.5rem 0; }
#prodCont #mainCertBar { margin-top: 0;}
#prodAdd { padding: 3.7rem 0 2rem 0; border-bottom: solid 3px #f6f4f2; display: flex; flex-direction: column; }
#prodAdd p { padding-bottom: 1.7rem; }
#prodAdd .sel { font-size: 16px; line-height: 1.25em; padding-left: 1em; cursor: pointer; }
#prodAdd .sel2 { font-size: 15px; }
#prodAdd .sel:first-child { padding-left: 0; }
#prodAdd .sel .rad { display: block; float: left; border: solid 3px #5e4637; font-size: 1em; height: 2.5em; width: 2.5em; }
#prodAdd .sel .rad span { background: none; width: 1.4em; height: 1.4em; top: 0.55em; left: 0.35em; }
#prodAdd .sel strong { display: block; float: left; }
#prodAdd .sel strong.oneLn { line-height: 2.5em; }
#prodAdd .sel strong em { display: block; font-style: normal; font-weight: 400; }
#prodAdd select { width: 300px; border: solid 3px #5e4637; }
#prodAdd .addMore { margin-bottom: 2rem; color: #db1a35; font-size: 13px; line-height: 20px; position: relative; padding-left: 36px; }
#prodAdd .addMore .addmoreIco { background: url(../images/product_sm_addmore_ico.png) no-repeat left top; display: block; float: left; width: 32px; height: 32px; margin-right: 9px; position: absolute; top: 50%; left: 0px; background-size: cover; margin-top: -16px; }
#prodAdd .addMore a { color: #db1a35; }
#prodAdd .addMore a span { font-style: normal; text-align: center; width: 20px; height: 20px; font-weight: bold; box-shadow: inset 0 0 0 2px #db1a35; margin-left: 0.2em; }
#prodAdd .addBtn { margin-bottom: 2.6rem; order: 2; }
#prodAdd .addBtn .genBtn1 { width: 100%; }
#prodAdd .priceWrp { font-size: 16px; line-height: 1.25em; order: 1; margin-bottom: 0; }
#prodAdd .priceWrp #youSave { margin-bottom: 1.2rem; }
#prodAdd .oldPrice { text-decoration: line-through; margin-right: 1rem; color: #adadad; position: relative; }
#prodAdd .oldPrice:after { content: ' '; display: block; height: 2px; top: 50%; position: absolute; left: 2px; right: 2px; margin-top: -1px; }
#prodAdd #youSave { margin-top: -1.6rem; text-transform: uppercase; font-family: 'Pluto', "Helvetica Neue", Arial, "Nimbus Sans L", FreeSans; font-weight: 500; letter-spacing: 0; font-size: 0.81em; }
#prodTopDtls .sugarFree { font-size: 16px; line-height: 1.625em; letter-spacing: 0.05em; padding: 2.6rem 0 0 0; display: none; }
#prodTopDtls .sugarFree p { padding: 0; }
#prodTopDtls .sugarFree p .textShrinkBarGinger { font-size: 0.97em;}
#prodTopDtls .sugarFree p .textShrinkBarPumpkin { font-size: 0.975em; letter-spacing: 0.03em;}
#prodAdd .addBtn .genBtn1 { max-width: 300px; }
#prodTopDtls .caption { font-size: 16px; line-height: 1.3em; letter-spacing: 0.01em; padding: 0.8em 1em; background: #f3f3f3; -webkit-background-clip: padding-box; background-clip: padding-box; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin-top: 3rem; }
#prodTopDtls .caption .rateStars { cursor: default; }
#prodTopDtls .caption .smCom { font-size: 17px; line-height: 33px; vertical-align: top; }
#prodTopDtls .caption p { font-style: italic; padding-bottom: 0.4em!important; }
#prodTopDtls .caption p.verified { font-style: normal; font-size: 0.78em; }
#prodTopDtls .caption .auth { display: block; text-align: right; }
@media all and (min-width: 641px) {
#prodAdd select { height: 4.5rem; }
}
@media all and (max-width: 1130px) {
#prodTopDtls { width: 412px; }
}
@media all and (max-width: 840px) {
#prodTopCont { padding-bottom: 0; padding-top: 14.3rem; }
#prodCont .titleWrp { padding-top: 1.6rem; margin-bottom: 1rem; position: absolute; z-index: 80; top: 0; left: 0; right: 0; border-bottom:0;}
#prodCont .prodTitle2 { float: left; font-size: 3rem; padding-top: 0.4rem; }
#prodCont .titleWrp .rateWrp { float: right; }
#prodCont .titleWrp .rateStars { line-height: 3.4rem; font-size: 3rem; float: right; margin-right: 0; padding-top: 0.3rem; }
#prodCont .titleWrp .rateStars li { float: left; width: 3.4rem; margin: 0 -0.3rem; }
#prodCont .titleWrp .rateWrp .reviewCnt { font-size: 2.5rem; line-height: 3.7rem;font-weight: 400; display: block; text-transform: capitalize; }
#prodCont .titleWrp .rateWrp .reviewCnt span { display: block; font-size: 2.76rem; line-height: 3.7rem; display: inline; }
#prodSlide { top: -6rem; margin-bottom: -6rem; }
#prodTopDtls { float: none; width: auto; margin: 0 -2rem; padding-top: 0; }
#prodTopDtls .prodTopDtlsInner { float: none; max-width: none; }
#prodTopDtls .titleWrp, #prodAdd, #prodTopDtls .sugarFree { padding-left: 2rem; padding-right: 2rem; font-size: 2.8rem; }
.sugarFree { font-size: 2.7rem; line-height: 1.5em; }
#prodCont #mainCertBar { margin-top: 0; padding-bottom: 0; padding-top: 6.4rem; }
#prodAdd > div { max-width: 335px; margin-left: auto; margin-right: auto; width: 100%; box-sizing: border-box; }
#prodAdd select { width: 100% }
#prodAdd .sel { float: right; padding-left: 0; }
#prodAdd .sel:first-child { width: 50%; float: left; }
#prodAdd .addBtn .genBtn1 { max-width: 100%; }
#prodAdd .addMore { padding-left: 4rem; font-size: 12.2px; vertical-align: top; line-height: 1.2em; padding-top: 0.2rem; margin-top: 0.6rem; }
#prodAdd .addMore .addmoreIco { background: url(../images/product_sm_addmore_ico.png) no-repeat left top; display: block; float: left; width: 3.2rem; height: 3.2rem; margin-right: 1rem; background-size: cover!important; vertical-align: top; margin-top: -1.6rem; }
.sugarFreeMobile p { padding-bottom: 0; padding-top: 3rem; }
#mainCertWrp { display: flex; flex-direction: column; }
#prodTopDtls .sugarFree { order: 2; font-size: 2.7rem; line-height: 1.5em; padding-bottom: 0; display: block; }
#prodTopDtls .sugarFree p .textShrinkBarGinger { font-size: 1em; }
#prodTopCont #mainCertBar { position: static; order: 1; }
#prodTopDtls .titleWrp { display: block; }
#prodTopDtls .titleWrp .rateWrp { order: 2; }
#prodTopDtls .titleWrp .prodTitle2 { order: 1; }
#prodTopDtls .caption .smCom { font-size: 1.06em; line-height: 2.3em; }
#prodTopDtls .caption { font-size: 2.33rem; margin: 2.6rem 2rem 0 2rem; order: 2; }
#prodCont .caption .rateStars { line-height: 1.25em; font-size: 1.875em; }
#prodCont .caption .rateStars li { float: left; width: 1em; margin: 0 -0.06em; }
#prodCont .caption .rateStars li img { max-height: 1em;}
#prodTopDtls .caption p { clear: both; }
}
@media all and (max-width: 640px) {
#prodTopDtls .prodTitle1 { font-size: 7rem; }
#prodTopDtls .prodTitle2 { font-size: 2.8rem; padding-top: 0.5rem; }
#prodTopDtls { padding-top: 3.5rem; }
.sugarFree { font-size: 2.7rem; line-height: 1.5em; }
#prodAdd .priceWrp #youSave { margin-bottom: 2rem; }
#prodAdd p { padding-bottom: 2.6rem; }
#prodAdd select { width: 100%; border-width: 2px!important; }
#prodAdd .sel { float: left; }
#prodAdd .sel:first-child { width: auto; float: left; white-space: nowrap; padding-right: 4rem; }
#prodAdd .sel .rad { border-width: 2px!important; }
#prodAdd .sel .rad span { top: 0.63em; left: 0.4em; }
#prodAdd .addMore { margin-bottom: 2.6rem; font-size: calc(13px - 0.1rem); }
#prodAdd .addMore a { font-size: 2.3rem; }
#prodAdd #youSave { margin-top: -2rem; }
}
@media all and (min-width: 841px) {
#prodTopCont #mainCertBar { position: absolute; left: 0; bottom: 0; right: 0; }
}
/* Product Trial top Side Description
--------------------------------------------------------------*/
.prodTrialTry { font-size: 18px; color: rgba(0,0,0,0.87); line-height: 1.4em; border-bottom: solid 3px #f6f4f2; position: relative; z-index: 90; }
.prodTrialTry p { padding: 1.6rem 0; }
#prodTopDtls .titleWrp { padding-bottom: 1.6rem; }
.prodTrialTopDtls #prodAdd { padding-top: 3.2rem; }
.prodTrialTopDtls #prodAdd .title { font-size: 1.8rem; display: block; padding-bottom: 1.6rem; letter-spacing: 0px; }
.prodTrialTopDtls #prodAdd .title em { font-weight: 400; font-style: normal; }
.prodTrialTopDtls #prodAdd .qtyWrp { padding-bottom: 1.6rem; border-bottom: solid 3px #f6f4f2; }
.prodTrialTopDtls #prodAdd .sel { margin-bottom: 1.6rem; padding: 0; line-height: 2.5em; width: auto; }
.prodTrialTopDtls #prodAdd td:first-child .sel { padding-right: 1.6rem; }
#prodTrialDisc { font-size: 13px; line-height: 1.4em; letter-spacing: 0.01em; border-bottom: solid 3px #f6f4f2; margin-bottom: 3.2rem; }
#prodTrialDisc p { padding-bottom: 1.6rem; margin-top: 1.6rem; display: block; position: relative; }
#prodTrialDisc p.prodTrialDiscCheck { padding-left: 2.8rem; }/*if adding checkbox*/
.prodTrialDiscCheck .inputBox { position: absolute; left: 0px; top: 0; }
.prodTrialDiscCheck .inputBox input { width: 1.2em; height: 1.2em; font-size: 1.2em; }
@media all and (max-width: 840px) {
.prodTrialTry { border-bottom: 0; }
.prodTrialTry p { padding: 1rem 0 1.6rem 0; margin-top: -1rem; }
#prodTopCont .ElmShowMedSmall { display: block!important; }
#prodTopCont .ElmHideSmallMed { display: none!important; }
.prodTrialTopDtls #prodAdd .sel2 { font-size: 11.5px; }
}
@media all and (max-width: 640px) {
.prodTrialTopDtls #prodAdd .title { font-size: 15px; }
.prodTrialTopDtls #prodAdd .sel { font-size: 12.5px; }
.prodTrialTopDtls #prodAdd .sel2 { font-size: 12px; }
#prodTrialDisc { font-size: 2.3rem; }
#prodTrialDisc p.prodTrialDiscCheck { padding-left: 2em; }
.prodTrialDiscCheck .inputBox input { width: 1.2em; height: 1.2em; font-size: 1.2em; }
}
@media all and (max-width: 438px) {
.prodTrialTopDtls #prodAdd .title { font-size: 2.2rem; }
.prodTrialTopDtls #prodAdd .sel { font-size: 1.89rem; }
.prodTrialTopDtls #prodAdd .sel2 { font-size: 1.78rem; }
}
@media all and (max-width: 414px) {
.prodTrialTopDtls #prodAdd .sel2 { font-size: 1.89rem; }
}
@media all and (max-width: 365px) {
.prodTrialTopDtls #prodAdd .sel2 { font-size: 2rem; }
}
@media all and (min-width: 841px) {
#prodTopDtls .titleWrp { display: flex!important; }
#prodTopDtls .titleWrp { display: flex; flex-direction: column; }
#prodTopDtls .titleWrp .rateWrp { order: 2; }
#prodTopDtls .titleWrp .prodTitle2 { order: 1; }
.prodTrialTopDtls #prodAdd .title em { font-size: 0.85em; }
}
/* Product Details 3col (imported, mobile first)
--------------------------------------------------------------*/
#prodDtlsBtm { overflow: hidden; }
#prodDtlsBtm .prodAbout { padding: 1rem 0 1rem 0; }
#prodDtlsBtm .userText h3 { margin-bottom: 1.1em; }
#prodDtlsBtm .userText ul { padding-bottom: 1.1em; }
#prodDtlsBtm .userText ul li { padding-bottom: 0; }
#prodDtlsBtm .tabWrp { padding: 3.2rem 2rem; margin: 0 -2rem; display: block; font-size: 3.6rem; border-style: solid!important; border-width: 0; border-color: #f6f4f2; }
#prodDtlsBtm .tabWrp .toggle { position: absolute; right: 0; top: -0.2rem; display: block; font-size: 4.4rem; line-height: 4.4rem; text-align: center; width: 4.4rem; font-weight: 400; }
#prodDtlsBtm .tabWrp .toggle span { position: absolute; right: 0; top: 0; display: block; }
#prodDtlsBtm .tabWrp .toggle span.icon-mega-11 { display: none; }
#prodDtlsBtm .tabWrp .toggle span svg { width: 3.2rem; }
#prodCont #prodDtlsWrp span.reviewTitle { display: none; }
#prodDtlsBtm .cur .toggle span { display: none; }
#prodDtlsBtm .cur .toggle span.icon-mega-11 { display: block; }
#prodDtlsBtm .tabIt { position: relative; line-height: 1.1em; display: block; font-weight: 700; }
.prodIngre, #prodDtlsBtm .tabWrp { border-bottom-width: 2px; }
.prodIngre { border-top-width: 2px!important; }
.prodIngreAlt { border-top-width: 0px!important; }
#prodDtlsBtm .tab { overflow: hidden; width: 100%; left: 0px; top: 0px; }
#prodDtlsBtm .tab .tabCont { border-top: 0; padding: 2.4rem 0; background: #fff; }
#prodDtlsBtm .tab p:last-child, #prodDtlsBtm .tab ul:last-child { padding-bottom: 0; }
#prodDtlsBtm .tab p { padding-bottom: 1.1em; }
#prodSuppTab .tabCont .supplFacts { margin-top: 0; }
#prodSuppTab .tabCont .supplFacts li { display: block; padding: 0 0 0 0; white-space: nowrap; float: left; width: 100%; }
#prodSuppTab .tabCont .supplFacts li .lft { float: left; }
#prodSuppTab .tabCont .supplFacts li .rgt { float: right; }
#prodSuppTab .supplFacts li .rgt .zero { font-family: Verdana, "Times New Roman", Times, serif; padding-right: 0.5px; font-size: 0.80em; }
@media screen and (max-width: 900px) {
#prodDtlsWrp .userText h3.altTitle { font-size: 3.6rem; margin-bottom: 2.4rem; }
}
@media screen and (min-width: 901px) {
#prodCont span.reviewTitle { display: block; }
#prodCont h3.reviewTitle, #prodCont span.reviewTitle { font-size: 21px!important; line-height: 60px; }
#prodCont #prodDtlsWrp span.reviewTitle { margin-bottom: 17px; font-weight: 700; border-bottom: solid 3px #fcb330; display: block; }
.reviewTitle span.c2 { font-size: 12px; line-height: 16px; }
#prodDtlsBtm .tabIt, #prodDtlsBtm .altTitle { display: none; }
#prodDtlsWrp { margin: 0 -2.5%; padding: 20px 0 0 0; }
#prodDtlsBtm .prodAbout, .prodIngre, #prodDtlsBtm .tabWrp { width: 28.405315%; padding: 0 2.464009%; float: left; margin: 0; border-width: 0!important; }
#prodDtlsBtm .tab { display : block!important; padding: 0; }
#prodDtlsBtm .tab .tabCont { padding: 0!important; }
}
/* Product suggestions
--------------------------------------------------------------*/
.prodTitle3 { font-size: 2.4rem; line-height: 1.5em; padding: 6.6rem 0 1rem 0; display: block; }
#prodSuggestions #collectLst li { float: left; width: 33%; }
@media all and (max-width: 980px) {
.prodTitle3 { font-size: 2.4rem; padding: 3.6rem 0 1.8rem 0; }
#prodSuggestions #collectLst li { float: left; width: 50%; }
#prodSuggestions #collectLst li:nth-child(3n) { display: none; }
}
@media all and (max-width: 690px) {
.prodTitle3 { font-size: 3.2rem; }
}
/* Product everyone thumbs
--------------------------------------------------------------*/
#prodEvery .subTxt { padding: 0; line-height: 1.5em; font-size: 2.4rem; text-align: center; }
#prodEvery ul { padding: 3rem 0; margin: 0 -10px; }
#prodEvery ul li { float: left; width: calc(25% - 20px); margin: 0 10px; position: relative; padding: 0; overflow: hidden; }
#prodEvery ul li:after { content: ' '; padding-top: 100%; display: block; }
#prodEvery ul li .tmb { position: absolute; left: -1px; top: -1px; right: -1px; bottom: -1px; display: block; overflow: hidden; transform: perspective(2px); background-size: cover!important; background-position: center center!important; image-rendering: -webkit-optimize-contrast; }
#prodEvery ul li a img { position: absolute; left: 0; top: 0; width: 100%; height: auto; transform: perspective(2px); }
@media all and (max-width: 840px) {
#prodEvery .subTxt { margin-top: 3rem; }
}
@media all and (max-width: 690px) {
#prodEvery .subTxt { font-size: 3.2rem; line-height: 1.625em; margin-top: 3rem; }
#prodEvery ul { margin: 0 -5px -10px -5px; }
#prodEvery ul li {width: calc(50% - 10px); margin: 0 5px 10px 5px; }
}
/* Product reviews
--------------------------------------------------------------*/
#prodReviews { padding: 8rem 0 0 0; }
#prodReviews .reviewsContWrp { padding-bottom: 3.6rem; }
#prodReviews .reviewTitle { padding: 0 0 2.6rem 0; border-bottom: solid 3px #fdc663; line-height: 44px; font-size: 21px; }
#prodReviews .reviewTitle span { padding: 0 4.5rem; vertical-align: top; }
#prodReviews .reviewTitle a { vertical-align: top; }
#prodReviews .reviewTitle em, #prodReviews .reviewCount em { font-style: normal; }
#prodReviews .reviewEntry { border-bottom: solid 3px #f6f4f2; font-size: 18px; padding: 1.8em 15px 0.6em 15px; line-height: 1.6em; }
#prodReviews .reviewEntry .reviewAuth, #prodReviews .reviewEntry .reviewDate, #prodReviews .reviewEntry .rateStars { line-height: 35px; float: left; }
#prodReviews .reviewEntry .reviewAuth { margin-bottom: 0.2em; font-weight: bold; }
#prodReviews .reviewEntry .reviewAuth span { font-weight : 400; }
#prodReviews .reviewEntry .rateStars { padding-left: 20px; }
#prodReviews .reviewEntry .reviewTxt { clear: both; }
#prodReviews .reviewCount { line-height: 44px; font-size: 21px; padding: 0 4.5rem 0 0; float: left; }
#prodReviews .reviewPaging { display: block; padding: 3.6rem 0 0 0; }
#prodReviews .reviewPaging li { display: block; font-size: 18px; float: left; }
#prodReviews .reviewPaging li a { padding: 0 0.4rem; color: #a7a9ac; }
#prodReviews .reviewPaging li.cur a { cursor: default; color: #5e4637; }
@media all and (max-width: 860px) {
#prodReviews .reviewTitle span { display: none; }
#prodReviews .reviewTitle a { float: right; }
#prodReviews .reviewAuth { padding-bottom: 0rem; }
#prodReviews .reviewEntry .rateStars { float: left; padding-left: 0; clear: left; margin-left: -2px; padding-bottom: 2rem; margin-top: -0.8rem; }
#reviewBtns { float: right; }
#prodReviews .reviewPaging { text-align: center; }
#prodReviews .reviewPaging li { display: inline; float: none; }
}
@media all and (max-width: 640px) {
#prodReviews .reviewEntry { font-size: 2.4rem; }
#prodReviews .reviewEntry .reviewAuth { line-height: 1em; margin: 0; }
#prodReviews .reviewTitle, #prodReviews .reviewCount { font-size: 16px; line-height: 35px; padding-right: 0; }
#prodReviews .reviewPaging li a { padding: 0 1rem; }
}
@media all and (max-width: 410px) {
#prodReviews .reviewEntry .reviewAuth, #prodReviews .reviewEntry .reviewDate, #prodReviews .reviewEntry .rateStars { line-height: 1.4em; }
#prodCont .rateStars li { width: 5rem; }
#prodReviews .reviewTitle em, #prodReviews .reviewCount em { display: none; }
}
/*
////
//// Us vs them (c&p) mobile first
////
--------------------------------------------------------------*/
#usvsthemWrp #mainCertBar { margin-top: 2rem; padding-top: 0; padding-bottom: 1rem; }
#usvsthemWrp #mainCertBar li .ElmCirc { margin-top: 0; }
#usvsthemInner { padding-top: 5.4rem; }
#usvsthemInner .chartWrp { padding-bottom: 5.6rem; text-align: center; }
#usvsthemInner .chart { font-size: 1.5rem; line-height: 2.4rem; max-width: 522px; margin: 0 auto; }
#usvsthemInner .chartWrp .col1, #usvsthemInner .chartWrp .col3 { float: left; width: 40.687%; }
#usvsthemInner .chartWrp .col2 { float: left; width: 18.626%; }
#usvsthemInner .chartWrp .topRow .col1, #usvsthemInner .chartWrp .topRow .col2, #usvsthemInner .chartWrp .topRow .col3 { border-top: solid 3px #fff; }
#usvsthemInner .chartWrp .topRow .col2 { border-top: solid 3px #fcb330; }
#usvsthemInner .chartWrp .topRow .col2 .comp { padding: 4.1rem 0 0 0; display: block; font-size: 3.6rem; }
#usvsthemInner .chartWrp .topRow .topBg { display: block; line-height: 5.9rem; font-size: 0; }
#usvsthemInner .chartWrp .topRow .col1 .topBg { margin-right: 1px; text-align: center; }
#usvsthemInner .chartWrp .topRow .topBg img { width: 14.8rem; margin: 0 auto; height: 5.4rem!important; padding: 2.8rem 0; }
#usvsthemInner .chartWrp .topRow .prod { padding-top: 1.3rem; }
#usvsthemInner .chartWrp .midRow { clear: both; border-top: solid 3px #fcb330; }
#usvsthemInner .chartWrp .midRow p { padding-top: 1.2em; }
#usvsthemInner .chartWrp .row { clear: both; border-top: solid 3px #f6f4f2; font-family: 'Pluto', "Helvetica Neue", Arial, "Nimbus Sans L", "FreeSans; font-weight: normal;"; }
#usvsthemInner .chartWrp .row p { padding: 0.4rem 0 0 0; line-height: 7.2rem; }
#usvsthemInner .chartWrp .row .col1, #usvsthemInner .chartWrp .row .col3 { font-size: 4.4rem; font-weight: 900; line-height: 7.2rem; }
#usvsthemInner .chartWrp .row .col1 { font-weight: 300; }
#usvsthemInner .chartWrp .row .col2 { font-size: 1.6rem; font-weight: 700; }
#usvsthemInner .chartWrp .based { display: block; margin: 0 auto; text-align: center; font-size: 13px; line-height: 1.23em; color: rgba(62,39,35,0.8); max-width: 380px; padding: 1.3rem 0; }
@media screen and (max-width: 480px) {
#usvsthemInner { padding-top: 3.6rem; }
#usvsthemInner .chartWrp { padding-bottom: 3.6rem; }
#usvsthemInner .chart { font-size: 2.05rem; letter-spacing: -0.02em; line-height: 2.1rem; }
#usvsthemInner .chartWrp .topRow .topBg img { width: 20.8rem; height: 6.4rem!important; }
#usvsthemInner .chartWrp .topRow .col2 .comp { font-size: 3.6rem; letter-spacing: 0.01em; padding-top: 5.2rem; font-weight: 500; }
#usvsthemInner .chartWrp .col1, #usvsthemInner .chartWrp .col3 { width: 40.687%; }
#usvsthemInner .chartWrp .col2 { width: 18.626%; }
#usvsthemInner .chartWrp .row .col2 { font-size: 2.1rem; }
#usvsthemInner .chartWrp .based { font-size: 1.9rem; line-height: 1.23em; }
}
@media (min-width: 640px) {
#usvsthemWrp #mainCertBar { margin-top: 0; padding-top: 0; }
}
@media (min-width: 721px) {
#usvsthemInner { margin: 0; background: #fff; }
}
@media screen and (min-width: 1240px) {
#usvsthemInner .chartWrp { float: left; width: 50%; margin: 0; }
#usvsthemInner .chartWrp .chart, #usvsthemProc .ctr { padding: 0 30px; }
}
/* Process
--------------------------------------------------------------*/
#usvsthemProc { background: #f5f4f2; margin: 4rem 0 0 0; }
#usvsthemProc .tmb { margin: 0 -2rem; padding-bottom: 1.2em; }
#usvsthemProc .desc { padding-bottom: 1.4em; }
@media screen and (min-width: 640px) {
#usvsthemProc { padding: 7rem 0; }
#usvsthemProc .tmb { float: left; margin: 0.4em 1.2em 0 0; width: 278px; padding-bottom: 0.6em; }
}
@media screen and (min-width: 1110px) {
#usvsthemProc .tmb { width: 440px; margin: 0.4em 2em 0 0; }
}
/* Process
--------------------------------------------------------------*/
#usvsthemProcV2 { background: #fff; margin: 0 0 0 0; text-align: center; }
#usvsthemProcV2 .tmb { margin: 0 -2rem; }
#usvsthemProcV2 .tmb:after { content: ''; padding: 57% 0 0 0; display: block; background:url(../images/usvsthem_processV2.jpg) no-repeat center center; background-size: cover; }
#usvsthemProcV2 .title { font-size: 4.8rem; line-height: 1.16em; margin-bottom: 0.2em; text-align: left; }
#usvsthemProcV2 .title2 { font-size: 2.4rem; line-height: 1.16em; text-align: center; margin-bottom: 1em; }
#usvsthemProcV2 .desc { font-size: 2.2rem; line-height: 1.66em; letter-spacing: 0.03em; padding-bottom: 1.4em; }
@media screen and (min-width: 640px) {
#usvsthemProcV2 .title { line-height: 1.3125em; }
#usvsthemProcV2 .desc { font-size: 1.8rem; line-height: 2em; }
}
@media screen and (min-width: 1110px) {
#usvsthemProcV2 { padding: 4rem 0 7rem 0; text-align:left;}
#usvsthemProcV2 .ctr { position:relative; }
#usvsthemProcV2 .tmb { width: 370px; float: left; margin: 0.4em 1.2em 0 0; padding-bottom: 0.6em; position:absolute; left: 0; top: 0; bottom: 0; background:url(../images/usvsthem_processV2.jpg) no-repeat center center; background-size: cover; }
#usvsthemProcV2 .tmb:after { display: none; }
#usvsthemProcV2 .desc { padding-left: 400px; padding-bottom: 0; }
}
/*
////
//// Wholesale
////
--------------------------------------------------------------*/
/* Our Chocolate
--------------------------------------------------------------*/
#wholesaleOurChoc { background: #fff /*url(../images/wholesale_perfection.png) no-repeat center center*/; background-size: auto 40.5rem; background-position: calc(50% - 23rem) calc(50% + 4rem); }
#wholesaleOurChoc .bg1 { background: url(../images/wholesale_ourchoc_full.png) no-repeat center center; padding: 11rem 0 11rem 0; }
@media all and (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
#wholesaleOurChoc .bg1 { background: url(../images/wholesale_ourchoc_full_2x.png) no-repeat center center; background-size: auto 675px; }
}
@media all and (max-width: 1600px) {
#wholesaleOurChoc { background-size: 177% auto; background-position: 67% calc(50% + 4rem); }
}
#wholesaleOurChoc .title { font-size: 4.8rem; line-height: 1.16em; margin-bottom: 1.7rem; }
#wholesaleOurChoc ul { padding-bottom: 0.6rem; }
#wholesaleOurChoc ul li { display: block; line-height: 1.5em; font-size: 2.4rem; }
/*@media all and (max-width: 960px) {
#wholesaleOurChoc .bg1 { background: url(../images/wholesale_ourchoc_rgt.png) no-repeat right center; background-size: 41% auto; background-size: calc( 100% - 480px) auto; padding: 7rem 0 7rem 0; }
}
@media all and (max-width: 790px) {
#wholesaleOurChoc .bg1 { background: url(../images/wholesale_ourchoc_lft.png) no-repeat right center; }
}
@media all and (max-width: 680px) {
#wholesaleOurChoc .bg1 { background: none; text-align: center; }
}*/
@media all and (max-width: 1324px) {
#wholesaleOurChoc .bg1 { background: url(../images/wholesale_ourchoc_rgt_3tmb.png) no-repeat right center; background-size: auto; }
}
@media all and (max-width: 1180px) {
#wholesaleOurChoc .bg1 { background: url(../images/wholesale_ourchoc_rgt_2tmb.png) no-repeat right center; background-size: auto; }
}
@media all and (max-width: 980px) {
#wholesaleOurChoc .bg1 { background: url(../images/wholesale_ourchoc_rgt_1tmb.png) no-repeat right center; background-size: auto; background-position: calc(50% + 259px) center; }
}
@media all and (max-width: 730px) {
#wholesaleOurChoc .bg1 { background: url(../images/wholesale_ourchoc_rgt_3tmb_sm.png) no-repeat center bottom; background-size: 60rem; padding-bottom: 40rem; margin-bottom: 7rem; padding-top: 8rem; }
#wholesaleOurChoc { background-position: 67% 61rem; }
}
/* Features
--------------------------------------------------------------*/
#wholesaleFeat { background: #f6f4f2; padding-top: 9.8rem; }
#wholesaleFeat .title { font-size: 4.8rem; line-height: 1.15em; margin-bottom: 1.2em; text-align: center; margin-bottom: -3rem; }
#wholesaleFeat ul { padding: 9.8rem 0 4.8rem 0; }
#wholesaleFeat ul li { float: left; width: 33.33%; text-align: center; margin: 0 0 6rem 0; }
#wholesaleFeat ul li span { display: block; margin: 0 auto; width: 14rem; height: 14rem; background: #fff; overflow: hidden; }
#wholesaleFeat ul li span img { width: 14rem; height: 14rem; }
#wholesaleFeat ul li .title { font-size: 2.1rem; line-height: 1.55em; padding-top: 0.7em; }
@media all and (max-width: 1020px) {
#wholesaleFeat ul li { width: 50%; }
}
@media screen and (max-width: 730px) {
#wholesaleFeat .title { margin-bottom: 0.8em; }
}
@media all and (max-width: 760px) {
#wholesaleFeat ul { padding: 5rem 0 1.2rem 0; }
#wholesaleFeat ul li { margin: 0 0 3rem 0; }
#wholesaleFeat ul li .title { font-size: 1.8rem; }
}
/* Features
--------------------------------------------------------------*/
#wholesaleJoin { padding-top: 9.8rem; padding-bottom: 9.8rem; position: relative; }
#wholesaleJnFrm { position: absolute; top: -128px; display: block; width: 1px; height : 0px; left: 0; }
#wholesaleJoin .FrmCtr { max-width: 862px; }
#wholesaleJoin .title { font-size: 4.8rem; line-height: 1.15em; margin-bottom: 1.2em; text-align: center; }
#wholesaleJoin p { padding: 0 1.8rem 1.8rem 1.8rem; }
#wholesaleJoin p label { color: #3E2723; font-weight: 700; }
#wholesaleJoin p label span, #wholesaleJoin p label em { font-weight: normal; font-style: normal; }
#wholesaleJoin .wholesaleJoinForm { margin: 0 -1.8rem; width: auto; }
#wholesaleJoin .wholesaleJoinForm .btnWrp { clear: left; text-align: center; padding-top: 1.8rem; }
@media screen and (max-width: 730px) {
#wholesaleJoin { padding-top: 5rem; }
#wholesaleJoin .title { margin-bottom: 0.8em; }
#wholesaleJoin .wholesaleJoinForm { margin: 0; }
#wholesaleJoin p { width: 100%; padding-left: 0; padding-right: 0; padding-bottom: 1.8rem; }
}
/*
////
//// Recipes list (keeping original image sizes)
////
--------------------------------------------------------------*/
#recipesLst { background: #fff; padding: 6rem 0 0 0; }
#recipesLst ul { overflow: hidden; margin: 0 -2rem; }
#recipesLst li { float: left; width: 33.33%; }
#recipesLst li:nth-child(3n+1) { clear: left; }
#recipesLst li a.tmb { display: block; margin: 0 2rem 2rem 2rem; overflow: hidden; background: #000; }
#recipesLst li a img { transform: perspective(2px); }
#recipesLst ul li img { width: 100%!important; height: auto!important; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-perspective: 0; -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); }
.desktop #recipesLst ul li a:hover img { -webkit-transform: scale(1.08); -moz-transform: scale(1.08); -ms-transform: scale(1.08); -o-transform: scale(1.08); transform: scale(1.08); opacity: .85; filter: alpha(opacity=85); -ms-filter: "alpha(opacity=85)"; -khtml-opacity: .85; -moz-opacity: .85; }
#recipesLst li .title { font-size: 1.8rem; line-height: 1.3em; position: relative; z-index: 20; margin: 0 2rem; margin-bottom: 3rem; }
#recipesLst li .title a { color: #5e4637; }
#recipesLst li .desc { font-size: 1.8rem; line-height: 1.5em; position: relative; z-index: 20; }
@media all and (max-width: 1250px) {
#recipesLst li { float: left; width: 33%; }
#recipesLst li:nth-child(4n+1) { clear: none; }
#recipesLst li:nth-child(3n+1) { clear: left; }
}
@media all and (max-width: 980px) {
#recipesLst li { float: left; width: 50%; }
#recipesLst li:nth-child(2n+1) { clear: left; }
#recipesLst li:nth-child(3n+1) { clear: none; }
}
@media all and (max-width: 680px) {
#recipesLst li .title { font-size: 1.5rem; }
}
/* Pagination
--------------------------------------------------------------*/
.pagination { clear: both; padding: 3rem 0; }
.pagination ul { display: block; text-align: center; }
.pagination ul li { display: inline; font-size: 2.2rem; padding: 0 0.3em; }
.pagination a { color: #5e4637; }
/*
////
//// Recipes page/why us (old layout)
////
--------------------------------------------------------------*/
/* Why us mobile
--------------------------------------------------------------*/
#whyInner { padding: 5rem 0 1.5rem 0; }
#whyInner .userText { max-width: 900px; margin: 0 auto; }
#whyInner .userText #whyVimeo { width: 100%; margin: 0 auto 3rem auto!important; position: relative; background: #000; overflow: hidden; display: block; padding-top: 56.25%!important; }
#whyVimeo img { width: 100%!important; height: 140%!important; }
#whyVimeo iframe { position: absolute; left: -2px; top: -2px; width: 100.9%; height: 100.9%; }
.userText img { max-width: 100%!important; width: 100%; }
#whyCont #prodSuggestions { padding-bottom: 2rem; margin-top: -4rem; }
#whyCont #recipesLst { padding-bottom: 2rem; padding-top: 0rem; }
/* Why us tablet & up
--------------------------------------------------------------*/
@media screen and (min-width: 641px) {
#whyInner { padding: 50px 0 0 0; }
#whyVimeo { margin: 0 auto 60px auto!important; top: 20px; }
#whyIntro1 .introTitle1 { font-size: 64px; padding: 0 0 8px 0; font-weight: 500; line-height: 1em; }
#whyIntro1 .txt1 { font-size: 24px; font-weight: 300; }
.topImg img { margin: 10px 0; }
#whyCont #prodSuggestions { margin-top: 0; padding-bottom: 3.6rem; }
}
@media screen and (min-width: 780px) {
#whyInner .userText .rgt { float: left; width: auto!important; width: 30%!important; padding-right: 5rem!important; }
#whyInner .userText .lft { margin-left: 36%!important; margin-left: calc(30% + 5rem)!important; width: auto!important; max-width: none; }
}
/* Socials
--------------------------------------------------------------*/
#whyInner .share { max-width: 900px; margin: 0 auto; padding-top: 1rem!important; padding-bottom: 1rem!important; line-height: 4.6rem; }
#whyInner .topImg+.share { margin-top: -1.4em!important; margin-bottom: 0!important; }
#whyInner .share .genBtn1 { display: block; margin-left: 1rem; float: right; padding: 0; margin-bottom: 2rem; text-decoration: none!important; color : #fff!important; line-height: 4.6rem; width: 4.6rem; }
#whyInner .share .genBtn1 svg { height: 3.6rem; }
#whyInner .share .genBtn1 span { vertical-align: baseline; position: relative; top: 0.09em; }
#whyInner .share .genBtn1 .sOn { top: 0; }
@media screen and (min-width: 641px) {
#whyInner .share { padding-bottom: 0!important; margin-bottom: -2rem!important; line-height: 3.6rem; }
#whyInner .topImg+.share { margin-bottom: 0!important; }
#whyInner .share .genBtn1 { float: right; padding: 0; line-height: 3.6rem; width: 3.6rem; }
#whyInner .share .genBtn1 svg { height: 2.8rem; }
#whyInner .share .btnC10 { margin-right: 0; }
#whyInner .share .genBtn1 .sOn { display: none; }
}
/*
////
//// Faq Pages and Co. (mobile first)
////
--------------------------------------------------------------*/
#faqInner { padding: 6rem 0; }
#faqMenu { padding: 0.5em 0 0 0; position: relative; border-width: 1px; background: #fafafa; }
#faqMenu .title { display: block; font-size: 2.8rem; color: #000!important; padding: 0 2rem 0.35em 2rem; line-height: 4.5rem; }
#faqMenu .title .rgt { float: right; display: block; width: 2.5rem; text-align: center; line-height: 5rem; height: 5rem; overflow: hidden; }
.title .fa-minus { display: none; }
.open a.title .fa-plus { display: none; }
.open a.title .fa-minus { display: inline; }
.faqInner { padding: 0 0 5rem 0; }
#faqCont .faqContAj { overflow: hidden; }
#faqMenu ul { display: block; max-height: 0; overflow: hidden; padding: 0; background: #fdfdfd; }
div.open ul { max-height: 30rem!important; }
#faqMenu ul li { display: block; padding-right: 6rem; }
#faqMenu ul li { border-top-width: 1px; padding: 0; }
#faqMenu ul li:before { display: none!important; }
#faqMenu ul li a { display: block; font-size: 2.4rem; text-align: center; color: #5e4637!important; padding: 1.5rem 0.7rem 1.5rem 0.7rem; line-height: 1.2em; font-weight: 400; text-decoration: underline; }
.devDesktop #faqMenu ul li a:hover { color: #fcb330!important; }
#faqCont h2 { margin-top: 0; }
#faqCont h2.faqTitle2 { margin-top:1.6em ; }
#tempDivWrp { position: relative; height: 0px; overflow: hidden; }
#tempDiv { position: absolute; width: 100%; height: auto; }
#tempIntroDivWrp { position: relative; height: 0px; overflow: hidden; }
#tempIntroDiv { position: absolute; width: 100%; height: auto; }
#faqContWrp .btnWrp { width: 100%; clear: both; overflow: hidden; padding-top: 1rem!important }
@media screen and (max-width: 981px) {
#faqCont h2 { margin: 1.6em 0 0.8em 0; }
}
@media screen and (min-width: 982px) {
.faqInner { padding: 0 0 7rem 0; }
#faqMenu { float: left; width: 275px; position: relative; border: 0; background: none; }
#faqMenu .easeOutHeight { position: absolute; left: 0px; top: 0px; }
#faqMenu ul li:first-child { border-top-width: 0; }
#faqMenu .title { display: none; }
#faqMenu ul { max-height: none; background: none; }
#faqMenu ul li { border: 0; padding: 0 0 2.2rem 0; }
#faqMenu ul li a { font-size: 1.6rem; padding: 0; text-align: left; }
#faqMenu ul li a.cur .fa { display: inline; line-height: 1em; }
#faqCont { /*margin-left: 275px; padding-left: 7rem; border-left-width: 1px; */}
#faqCont h2 { padding-top: 0; position: relative; top: -0.13em; padding-bottom: 1em; margin-bottom: 1em; border-bottom-width: 1px; }
#faqContWrp .btnWrp { width: 314px!important; clear: both; }
}
@media screen and (min-width: 1079px) {
#faqContWrp .ctr { padding: 7rem 5rem 0 5rem; border-bottom: 0; }
.faqInner { padding: 0 0 7rem 0; }
}
/* faq
-----------------*/
.question { display: block; }
.question h4 { font-size: 3rem; line-height: 1.2em; padding: 3.2rem 0 3.2rem 3.2rem; cursor: pointer; margin-bottom: 0!important; position:relative; }
.question h4:after { display: block; content: '+'; position:absolute; left: 0; top: 3.2rem; color: #5e4637; font-size: 1.7em;}
.question h4.open:after { content: '-'; }
.answer { display: none; overflow: hidden; }
#faqCont .answer div { padding-left: 3.2rem!important; box-sizing:border-box; }
@media screen and (min-width: 982px) {
.questionWrp { margin-top: -3.4rem; background: #fff; }
.questionWrp .question:first-child { border-top: 0; }
.question h4 { font-size: 1.8rem; padding: 1.6rem 0 0.6rem 3.2rem; }
.question h4:after { top: 1.6rem;}
}
#contacForm { padding-bottom: 4rem; padding-right: 0.4px; }
#contacForm p { display: block; padding: 0 0 1rem 0; }
#contacForm p label { display: block; font-size: 3.2rem; line-height: 2.3em; display: block; font-weight: 600; }
#contacForm p input { width: 100%; }
#contacForm .btn1 { margin-top: 2rem; }
@media screen and (max-width: 640px) {
#contacForm .btn1 { display: block; padding: 0; }
}
@media screen and (min-width: 410px) {
#contacForm p label { font-size: 2.8rem; }
}
@media screen and (min-width: 641px) {
#contacForm p label { font-size: 1.6rem; }
#contacForm p.HfLmd { padding-right: 1.2rem; }
#contacForm p.HfRmd { padding-left: 1.2rem; }
}
@media screen and (min-width: 1100px) {
#contacForm { max-width: 678px; }
#contacForm p { float: left; width: 50%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
#contacForm p.full { width: 100%; }
}
/*
////
//// Login (uses some 2.0)
////
--------------------------------------------------------------*/
#cartCont { padding: 6rem 0 0 0; }
#cartCont+#mainFtr { border-top: solid 1px #efefef; }
#cartLogin { padding-bottom: 5.6rem; padding-top: 2rem; }
#loginCont p { padding: 0 0 1.8rem 0; }
#loginCont p label, #loginCont p.rem, #loginCont p.forgot { font-size: 2.7rem; line-height: 2.3em; display: block; font-weight: 700; }
#loginCont p.rem, #loginCont p.forgot { font-weight: 400; color: #000; }
#loginCont p.rem { line-height: 4.3rem; padding: 0.9em 0 1.5em 0; }
#loginCont p input { width: 100%; }
#loginCont p.forgot a { font-size: 0.9em; text-decoration: underline; color: #5e4637; }
#cartGuest { margin-bottom: 5.6rem; }
#cartCont .passRetrieve p.rem { padding-top: 0; }
#cartCont .sepB { border-top-width: 1px; }
@media screen and (max-width: 640px) {
#cartCont .passRetrieve .btn1 { width: 100%; padding: 0; }
#loginCont .title1 { font-size: 3.8rem; }
#loginCont p label { display: none;}
#loginCont .genBtn1 { width: 100%; padding: 0; }
}
@media screen and (min-width: 410px) {
#loginCont p label, #loginCont p.rem, #loginCont p.forgot { font-size: 2.8rem; }
#loginCont p.rem, #loginCont p.forgot { font-size: 2.5rem; letter-spacing: 0em;}
}
@media screen and (min-width: 641px) {
#cartLogin { padding-top: 0; }
#cartCont #cartLogin p.topMsg { padding-bottom: 1em; }
#cartLogin { padding-bottom: 0; border-left: solid 1px #efefef; width: 50%; float: left; margin-bottom: 5.6rem; padding-left: 4.37%; }
#cartCont .passRetrieve .btn1 .new { display: none; }
#loginCont p { padding: 0 0 1rem 0; }
#loginCont p.rem { line-height: 2.4rem; }
#loginCont p label, #loginCont p.rem, #loginCont p.forgot { font-size: 1.6rem; }
#loginCont p.forgot { top: 0.5em; position: relative; }
#loginCont p.forgot a:hover { color: #fcb330; text-decoration: none; }
#cartGuest { float: left; width: 50%; padding-right: 4.37%; }
}
@media screen and (min-width: 870px) {
#cartCont .passRetrieve .btn1 .new { display: inline; }
}
@media screen and (min-width: 1079px) {
#cartCont .sepB { display: block; }
#cartCont .ctrB { border-bottom: none; }
}
/*
////
//// Cart (uses some 2.0)
////
--------------------------------------------------------------*/
/* Intro
--------------------------------------------------------------*/
#cartFreeShip { background: #f8fef8; padding: 2.5rem 3rem; font-size: 2.8rem; line-height: 1.143em; text-align: center; color: #30c653; margin-top: -6rem; margin-bottom: 6rem; }
#cartFreeShip p { padding: 0px; }
#cartIntro { background: #f6f4f2; padding: 3rem 0; }
#cartIntro .title { font-size: 4rem; line-height: 1.2em; padding: 0; margin: 0; letter-spacing: 0.05em; }
#cartIntroTitle { margin: -4rem 0 -2rem 0; position: relative; }
#cartIntroTitle .title { margin-bottom: 0; }
#cartIntroTitle .incart { font-size: 2.8rem; padding: 0; line-height: 1em; }
#cartIntroTitle .cartIntroTotal { position: absolute; right: 2rem; top: 0.2rem; text-align: right; font-size: 2.8rem; line-height: 1.1em; }
#cartIntroTitle .cartIntroTotal span { display: block; right: 2rem; }
#cartContiTop { padding: 0 0 1rem 0; margin: 0; }
#cartContiTop .title2 { margin-bottom: 0; font-size: 4.4rem; }
#cartContiTop .incart { font-size: 2.8rem; padding: 0; }
#cartHdr { background: #fafafa; font-size: 1.6rem; line-height: 2.5em; font-weight: 700; }
#cartHdr p { float: left; padding: 0; }
#cartHdr .col1 { width: 60%; text-indent: 1.3rem; }
#cartHdr .col2 { width: 18.8%; text-indent: 2.4rem; }
#cartHdr .col3 { width: 19%; text-align: center; }
#cartItems { margin: 4rem -2rem 0px -2rem; padding: 0 0 0 0; border-top-width: 1px; }
#cartItems .cartItem { padding: 3rem 2rem 2rem 2rem; border-bottom-width: 1px; clear: both; position: relative; }
#cartItems .cartItem .tmbWrp { width: 30.5%; float: left; }
#cartItems .cartItem .tmbWrp .tmb { padding-bottom: 2rem; display: block; }
#cartItems .cartItem .tmbWrp .tmb img { width: 100%!important; height: auto!important; margin: -1.6rem 0; }
#cartItems .cartItem .tmbWrp select { width: 100%; font-weight: 400; }
#cartItems .cartItem .desc { float: left; width: 69.5%; font-weight: 400; margin-top: -0.6rem; }
#cartItems .cartItem .desc .remove { position: absolute; right: 3rem; top: 17.5rem; width: 6.2rem; height: 6.2rem; padding: 0; line-height: 2.6rem; font-size: 2.6rem; }
#cartItems .cartItem .desc .remove span.fa-remove { width: 2.4rem; height: 2.4rem; padding: 1.9rem; line-height: 2.4rem; font-size: 2.4rem; display: block; }
#cartItems .cartItem .desc p { padding: 0px; display: block; line-height: 1.14em; padding-left: 2.5rem; }
#cartItems .cartItem .desc .title { font-weight: bold; font-size: 2.8rem; }
#cartItems .cartItem .desc .sm { font-size: 2.4rem; font-style: normal!important; }
#cartItems .cartItem .desc .smBd { padding-top: 0.4rem; }
#cartItems .cartItem .desc .prod .sm { line-height: 1.16em; font-size: 2.8rem; }
#cartItems .cartItem .desc .lg { font-size: 3rem; font-weight: 800; padding-bottom: 0.6rem; }
#cartSubMob { font-size: 3.6rem; line-height: 1em; font-weight: 700; padding: 4.5rem 0 4.5rem 0; }
#cartSubMob .lft { float: left; display: block; }
#cartSubMob .rgt { float: right; display: block; }
.cartFreeHow { background: #f6f4f2; font-size: 2.3rem; line-height: 1.4em; padding: 2rem; margin: 3.6rem 0 0 0; }
.cartFreeHow p { padding-bottom: 0; }
#cartToShop { display: block; text-align: center; margin: 2.8rem auto 2.2rem auto; width: 100%; padding: 2rem 0; font-size: 3rem; line-height: 1em; }
#cartDeskLft .continue { padding-top: 2rem; }
@media screen and (min-width: 641px) {
#cartContInner { padding-bottom: 6rem; }
#cartIntroTitle { margin: 0 0 2rem 0; }
#cartContiTop { padding: 0 0 2rem 0; }
#cartContiTop .title2 { margin-bottom: 0; font-size: 2.4rem; }
#cartContiTop .incart { font-size: 2rem; padding: 0; }
#cartHdr { background: #f6f4f2; font-size: 1.6rem; line-height: 2.5em; font-weight: 700; }
#cartHdr p { float: left; padding: 0; }
#cartHdr .col1 { width: 60%; text-indent: 1.3rem; }
#cartHdr .col2 { width: 18.8%; text-indent: 2.4rem; }
#cartHdr .col3 { width: 19%; text-align: center; }
#cartItems { margin: 0px; padding: 0 0 0 0; border-top-width: 0; }
#cartItems .cartItem { padding: 3rem 0; }
#cartItems .cartItem .tmbWrp { width: 13.945%; }
#cartItems .cartItem .tmbWrp .tmb { padding-bottom: 0; }
#cartItems .cartItem .desc { width: 69.055%; }
#cartItems .cartItem .desc .prod { width: 66.84%; float: left; padding: 1px 0 0 0; position: relative; }
#cartItems .cartItem .desc .prod .vc { top: 0; left: 0; position: absolute; height: 100%; width: 100%; }
#cartItems .cartItem .desc .prod .vc1 { width: 100%; display: table; height: 100%; position: relative; overflow: hidden; }
#cartItems .cartItem .desc .prod .vc2 {
*position: absolute; top: 50%; display: table-cell; vertical-align: middle; }
#cartItems .cartItem .desc .prod .vc3 {
*position: relative; top: -50%; top: calc(-50% + 2px); width: 100%; }
#cartItems .cartItem .price { width: 30.16%; float: left; padding-top: 10px; padding-left: 25px; }
#cartItems .cartItem .price * { padding-left: 0!important; }
#cartItems .cartItem .desc p { padding: 0px; display: block; line-height: 1.2em; padding-left: 2.5rem; }
#cartItems .cartItem .desc .title { font-size: 1.6rem; line-height: 1.28em; padding-top: 11px; max-width: 230px; }
#cartItems .cartItem .desc .sm { font-size: 1.4rem; line-height: 1.56em; }
#cartItems .cartItem .desc .prod .sm { font-size: 1.6rem; line-height: 1.28em; padding-top: 0.2em; }
#cartItems .cartItem .desc .lg { font-size: 1.6rem; line-height: 2.2rem; padding-bottom: 0.3rem; font-family: 'Pluto', "Helvetica Neue", Arial, "Nimbus Sans L", FreeSans; font-weight: 500; }
#cartItems .cartItem .desc .price .c3 { color: #000; }
#cartItems .cartItem .desc .price .sm { font-size: 1.5rem; line-height: 1.7rem; display: block; }
#cartItems .cartItem .tmbWrp .sel { position: absolute; right: 0px; top: 3.4rem; width: 17.267%; }
#cartItems .cartItem .desc .remove { right: 0; bottom: auto; top: 8.1rem; text-align: right; width: auto; height: auto; line-height: 1.2em; font-size: 1.4rem; }
#cartItems .cartItem .desc .remove span { text-decoration: none; }
#cartItems .cartItem .tmbWrp select { height: 2.43em; }
.cartFreeHow { background: #f6f4f2; line-height: 1.2em; font-size: 1.4rem; padding: 2rem; margin: 2rem 0 0 0; }
.cartFreeHow p { padding: 0; }
#cartContiBtm { padding: 4rem 0 4rem 0; }
#cartContiBtm .back { font-size: 16px; }
}
@media screen and (min-width: 800px) {
#cartHdr .col1 { width: 20.65%; margin-right: 32.85%; text-indent: 1.3rem; text-align: center; }
#cartHdr .col2 { width: 23.8%; text-indent: 1rem; }
#cartHdr .col3 { width: 19%; text-align: center; }
#cartItems .cartItem .desc { width: 69.055%; }
#cartItems .cartItem .desc .prod { width: 57.34%; }
#cartItems .cartItem .price { width: 32.16%; }
#cartContiBtm { padding: 4rem 0 0 0; }
}
@media screen and (min-width: 982px) {
#cartDeskLft { float: left; width: 65.82%; }
}
/* Larger image layout
--------------------------------------------------------------*/
@media screen and (min-width: 800px) {
.guestCartV2 #cartItems .cartItem .tmbWrp { width: 19.025%; }
.guestCartV2 #cartItems .cartItem .desc { width: 58.775%; }
.guestCartV2 #cartItems .cartItem .desc .title { font-family: 'Pluto', "Helvetica Neue", Arial, "Nimbus Sans L", FreeSans; }
.guestCartV2 #cartItems .cartItem .desc .prod { padding-top: 1px; width: 55.34%; }
.guestCartV2 #cartItems .cartItem .price { width: 44.16%; }
}
/* Summary
-----------------*/
#cartSummary .cartSumBg { background: #f6f4f2; border: solid 2px #dddddd; font-size: 16px; line-height: 1.2em; }
#cartSummary .row { padding: 0.7rem 2.6rem; float: left; width: 100%; }
#cartSummary .row:first-child { padding-top: 2.5rem; }
#cartSummary .lft { float: left; }
#cartSummary .lft em { display: block; font-style: normal; font-size: 14px; line-height: 1.6em; }
#cartSummary .rgt { float: right; }
@media screen and (min-width: 982px) {
#cartSummary { float: right; width: 29.8%; }
}
#cartSummary .subtotal { background: #e6e6e6; padding: 1.4rem 2.6rem; margin: 0.7rem 0 0 0; }
#cartSummary .msg { padding: 1.7rem 2.5rem 2.5rem 2.5rem; font-size: 1.3rem; line-height: 1.53em; text-align: center; clear: both; }
#cartSummary .btnRow { clear: both; padding: 2.5rem 2.5rem 0 2.5rem; }
#cartSummary .btnRow .genBtn1 { width: 100%; }
/*
////
//// mainA
////
--------------------------------------------------------------*/
#mainVrA #mainIntro { background: #fff; }
#mainVrA #mainIntro .introBg { background: #74def6; -webkit-transition-property: all; -webkit-transition-duration: 450ms; -webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -moz-transition-property: all; -moz-transition-duration: 450ms; -moz-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-property: all; transition-duration: 450ms; transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); }
#mainVrA #mainIntro .introNav li a { background: #fff; }
#mainVrA #mainIntro .introNav li.cur a { background: #5e4637; }
#mainVrA #mainIntro .introCont { color: #fff; }
#mainVrA #mainEveryday { padding-top: 0; }
#mainVrA #collectLst li .desc { display: none; }
#mainVrA #collectLst .collectionShowDec li .desc { display: block; }
/* Holiday intro
--------------------------------------------------------------*/
#mainVrA #mainIntro .holidayBg .introNav li a { background: #92bba2; }
#mainVrA #mainIntro .holidayBg .introNav li.cur a { background: #0d6a32; }
/* Holiday Valentines intro
--------------------------------------------------------------*/
/*
#mainVrA #mainIntro .holidayValBg .introNav li a { background: #ffa8af; }
#mainVrA #mainIntro .holidayValBg .introNav li.cur a { background: #fa727c; }*/
#mainVrA #mainIntro .holidayValBg .introNav li a { background: rgba(255,255,255,0.55); }
#mainVrA #mainIntro .holidayValBg .introNav li.cur a { background: #fff; }
/*
////
//// New global footer change
////
--------------------------------------------------------------*/
#mainftrNewsletter { padding-bottom: 3.6rem; padding-top: 3.6rem; box-shadow: 0 5rem 2.5rem 5rem rgba(0,0,0,0.2); position: relative; z-index: 10; }
#mainftrMid { padding-top: 5.8rem; padding-bottom: 5.6rem; color: #503620; position: relative; z-index: 12; }
#mainftrMid li a { color: #503620; }
#mainftrMid li a:after { background: #503620; }
#mainftrMid .col4 .social li a { box-shadow: inset 0 0 0px 1px #503620; }
#mainftrMid .col4 .social li a:hover { background-color: #503620; color: #fff!important; }
#mainftrMid .col4 .social li a.twi:hover { background-image: url(../images/main_ftr_ico_twi_yl.svg); }
#mainftrMid .col4 .social li a.fbk:hover { background-image: url(../images/main_ftr_ico_fbk_yl.svg); }
#mainftrMid .col4 .social li a.ins:hover { background-image: url(../images/main_ftr_ico_ins_yl.svg); }
#mainftrMid .col4 .social li a.pin:hover { background-image: url(../images/main_ftr_ico_pin_yl.svg); }
/*
////
//// New Product page changes (milk-chocolate-creamy)
////
--------------------------------------------------------------*/
#prodCont .prodReviewsV2 { padding-bottom: 4rem; }
#prodCont .prodReviewsV2 .reviewEntry { font-size: 2.4rem; padding-left: 0; padding-right: 0; }
#prodCont .prodReviewsV2 .reviewEntry .reviewAuth .frm { font-family: "Arnhem Pro", "Helvetica Neue", Arial, "Nimbus Sans L", FreeSans; }
#prodCont .prodReviewsV2 .reviewEntry .reviewAuth .frm .reviewDate { float: none; }
#prodCont .prodReviewsV2 .reviewEntry .rateStars { clear: both; padding-left: 0; padding-bottom: 1rem; margin-top: -0.2rem; cursor: default; }
#prodCont .prodReviewsV2 .reviewTitle a { float: right; }
#prodCont .prodReviewsV2 .reviewSub { font-size: 16px; line-height: 35px; padding: 1.8rem 0 0 0; }
#prodCont .prodReviewsV2 .reviewSub .rgt { float: right; color: #5e4637; }
#prodCont .prodReviewsV2 .reviewCount { line-height: 2em; font-size: 2.1rem; font-weight: normal; padding-right: 1rem; }
#prodCont .prodReviewsV2 .reviewPaging { padding-top: 1.6rem; clear: left; text-align: left; padding-bottom: 1rem; }
#prodCont .prodReviewsV2 .reviewPaging li { font-size: 2.1rem; }
#prodCont .prodReviewsV2 .reviewPaging li a { display: -moz-inline-stack; display: inline-block; zoom: 1; *display:inline;
float: none; width: 2em; line-height: 2em; padding: 0; text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-background-clip: padding-box; background-clip: padding-box; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; font-weight: normal; }
#prodCont .prodReviewsV2 .reviewPaging li.cur a { box-shadow: inset 0 0 0 1px #d7d7d7; color:;
}
#prodCont .prodReviewsV2 .reviewPaging li.inactive a { background: #eee; color: #b5b5b5; cursor: default; }
#prodCont .prodReviewsV2 .reviewPaging li.prev a, #prodCont .prodReviewsV2 .reviewPaging li.next a { box-shadow: inset 0 0 0 1px #d7d7d7; margin: 0 0.4rem; }
@media screen and (min-width: 641px) {
#prodCont .prodReviewsV2 .reviewEntry { font-size: 1.6rem; }
#prodCont .prodReviewsV2 .reviewEntry .rateStars { margin-top: 0; }
}
@media (min-width: 861px) {
#prodCont .prodReviewsV2 .reviewTitle span { font-weight: 400; }
#prodCont .prodReviewsV2 .reviewCount { line-height: 2em; font-size: 1.6rem; padding-right: 1rem; }
#prodCont .prodReviewsV2 .reviewPaging { float: left; padding-top: 0; clear: none; }
#prodCont .prodReviewsV2 .reviewPaging li { font-size: 16px; }
#prodCont .prodReviewsV2 .reviewPaging li a { width: 2em; line-height: 2em; }
}
/* Product 1 description with 1 cert bar
-----------------*/
/*
////
//// Product request
////
--------------------------------------------------------------*/
#prodReqCont { padding: 5rem 0 5rem 0; }
#downloadPdf { display: block; margin-top: 0.5em; margin-bottom: 0.5em; }
#prodReqForm p { position: relative; }
#prodReqForm p .msg { text-align: right; display: block; right: 0; position: absolute; bottom: -4px; font-size: 13px; line-height: 1rem; }
#prodReqSel .chk { display: block; width: 100%; width: 14.4rem; height: 14.4rem; margin: 0 auto; box-shadow: 0 0 7px 0px #5e46372c; }
#prodReqSel .chk span { position: absolute; right: 1rem; top: 1rem }
#prodReqSel .checked { border-color: #5e4637; }
#prodReqSel .lstWrp { margin: 0; background: #f6f4f2; padding: 2rem 1.4rem 0 1.4rem; margin-bottom: 2rem; }
#prodReqSel .itm { padding-top: 0px; padding-bottom: 2.6rem; width: 20%; float: left; }
#prodReqSel .itm label { text-align: center; font-size: 1.4rem; display: block; padding: 0.8rem 0 0 0; }
@media screen and (max-width: 941px) {
#prodReqSel .itm { width: 25%; }
}
@media screen and (max-width: 781px) {
#prodReqSel .itm { width: 33.33%; }
#prodReqSel .lstWrp { padding: 4rem 1.8rem 1.4rem 1.8rem; }
#prodReqSel .itm label { font-size: 1.6rem; padding: 1.2rem 0 0 0; }
#prodReqCont .genBtn1 { display: block; width: 100%; }
}
@media screen and (max-width: 409px) {
#prodReqForm p .msg { font-size: 11px; }
}
@media screen and (min-width: 641px) {
#prodReqForm .HfLmd { padding-right: 1.2rem; }
#prodReqForm .HfRmd { padding-left: 1.2rem; }
}
/*
////
//// Store Locator
////
--------------------------------------------------------------*/
#introZip { margin: 34px auto 16px auto; max-width: 560px; }
#introZip div { position: relative; }
#introZip .addressWrp { margin-right: 188px; padding-right: 102px; display: block; position: relative; }
#introZip input[type=text] { height: 44px; background : #fff; width: 100%; }
#introZip .addressWrp select { position: absolute; right: 0; top: 0; width: 95px; background-color: #fff; }
#introZip .genBtn1 { position: absolute; right: 0; top: 0; padding-left: 0; padding-right: 0; width: 180px; }
/*#introZip .genBtn1:after { border-top-left-radius: 0px!important; border-bottom-left-radius: 0px!important;}*/
#findUsInner { background: #f6f4f2; }
#findUsMapCont { padding: 0 0; }
#findUsMap { position: relative; background: #281c1c; margin-bottom: 4rem; }
#findUsSide { position: absolute; left: 0; top: 0; bottom: 0; width: 370px; }
#findUsSide .findNear { margin: 30px 40px 0 40px; font-size: 20px; line-height: 1.4em; letter-spacing: 0.18em; color: #fff; display: block; border-bottom: solid 1px #5e4637; height: 76px; }
#findUsSide .storeList { position: absolute; top: 106px; left: 0; right: 0; bottom: 0; overflow-y: auto; }
#findUsSide .findNear .location { display: block; font-size: 0.70em; line-height: 1.15em; }
#findUsSide .findNear .location .resultsCount { display: block; font-size: 0.85em; padding-top: 0.2em; }
#findUsSide .scroll { padding: 0 40px; color: #fff; }
#findUsSide .scroll a { color #fff; }
#findUsSide .scroll div.row { border-top: solid 1px #5e4637; padding: 20px 0; }
#findUsSide .scroll div.row:first-child { border: 0; }
#findUsSide .scroll div.row p.links { padding-top: 2px; }
#map_canvas { height: 765px; margin-left: 370px; }
#map_canvas .gm-style-mtc { display: none!important; }
#findUsHeadings { text-align: center; margin: 0 auto; padding: 0 20px; max-width: 980px; }
#findUsHeadings .title1, #findUsLocations .title1 { font-size: 60px; line-height: 1.2em; font-weight: 400; margin-bottom: 0.7em; padding-top: 1em; text-align: center; }
#findUsHeadings .subheading, #findUsLocations .subheading { font-size: 20px; line-height: 2em; padding: 0px 6px; letter-spacing: 0.18em; color: #fff; display: block; padding: 0 20px; color: #000; padding-bottom: 2em; }
#findUsLocations .subheading { text-align: center; padding-bottom: 0; }
#findUsHeadings .subheading a { color: #f12919; }
#findUsLocations { max-width: 980px; padding: 0 25px; margin: 0 auto; }
#findUsLocations ul { padding-bottom: 4rem; margin: 0 auto; }
#findUsLocations ul#findUsBrick { max-width: 790px; padding-bottom: 2.5rem; }
#findUsLocations ul#findUsOnline { max-width: 720px; }
#findUsLocations li { display: block; float: left; width: 50%; text-align: center; padding-bottom: 8rem; background: #fff; }
#findUsLocations li .tmb { display: block; margin: 0 auto; }
#findUsLocations li .tmb img { margin: 0 auto; }
#findUsLocations li p { max-width: 360px; margin: 0 auto; display: block; font-size: 21px; padding: 20px 10px; line-height: 1.4em; }
#findUsLocations li:nth-child(odd) { clear: left; }
#findUsLocations li .genBtn1 { box-shadow: 0 0.5rem 3rem rgba(0,0,0,0.3); }
#findUsMapCont .request { text-align: center; }
#findUsMapCont .request a { text-transform: uppercase; text-align: center; margin: 0 auto; line-height: 1.1em; padding-top: 0.85em; padding-bottom: 0.8em; }
@media all and (max-width: 639px) {
#findUsCont .introBg-storeLocator { background-image: url(../images/store_locator_intro_bg_sm.jpg); background-size: cover; }
#find-us #innerMedIntroSection #introCont .introTxt { padding-bottom: 0; }
#introZip { padding-bottom: 0; margin-top: 13px; }
#introZip div { margin: 0 10px; }
#introZip .addressWrp { margin-right: 0; padding-right: 9.1rem; padding-right: calc(16.1rem + 11px); }
#introZip input[type=text] { padding-right: 0; }
#introZip .addressWrp select { height: 44px; width: 16rem; }
#introZip .genBtn1 { width: auto; padding: 0px 22px 0 22px; height: 44px; clear: both; position: relative; margin-top: 12px; }
#findUsHeadings .title1, #findUsLocations .title1 { font-size: 6.8rem; }
#findUsHeadings .subheading, #findUsLocations .subheading { font-size: 2.2rem; }
#findUsLocations #findUsBrick .tmb img { max-width: 184px; }
#findUsLocations #findUsBrick .usc img { max-width: 180px; margin-bottom: -15px; }
#findUsLocations #findUsOnline .tmb img { max-width: 180px; }
#findUsLocations li p { font-size: 19px; }
}
@media all and (max-width: 600px) {
#findUsLocations li { width: auto; float: none; max-width: 360px; margin: 0 auto; padding-bottom: 8rem; }
}
@media all and (max-width: 500px) {
#findUsLocations li p { font-size: 3rem; }
}
/* map marker details
--------------------------------------------------------------*/
#findUsMap .city { font-size: 15px; line-height: 1.2em; position: relative; display: block; letter-spacing: 0.08em; margin-bottom: 0; padding-bottom: 0.4em; }
#findUsMap .gmapWrapper { font-size: 15px; line-height: 1.2em; }
#findUsMap .gmapWrapper p { padding: 0; }
#findUsMap .gmapWrapper p.distance { padding-bottom: 0.3em; }
#findUsMap .gmapWrapper p.ElmShowSmall { padding-top: 2rem; }
#findUsMap .gmapWrapper p.ElmShowSmall .genBtn1 { margin-bottom: 2rem; margin-right: 10px; margin-right: 14px; }
#findUsMap .gmapWrapper p.ElmShowSmall .genBtn1:last-child { margin-bottom: 10px; }
@media all and (min-width: 640px) {
#findUsMap .gmapWrapper a { color: #fcb330; position: relative; }
#findUsMap .gmapWrapper .dtls a:after { content: ' '; left: 50%; width: 0; position: absolute; bottom: 0px; height: 1px; background: #f12919; display: block; -webkit-transition-property: all; -webkit-transition-duration: 350ms; -webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -moz-transition-property: all; -moz-transition-duration: 350ms; -moz-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-property: all; transition-duration: 350ms; transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); }
.no-touchevents #findUsMap .gmapWrapper a:hover:after { left: 0; width: 100%; }
}
@media all and (max-width: 639px) {
#find-us-limited-time #innerMedIntroSection #introCont .introTxt { padding-bottom: 2%; }
}
@media all and (max-width: 560px) {
#map_canvas { display: none; }
#findUsSide { width: auto; position: relative; }
#findUsSide .storeList { position: static; }
#findUsSide .scroll { padding: 0 25px; }
#findUsSide .findNear { margin: 0 25px; padding: 25px 0; height: auto; font-size: 3.4rem; }
#findUsMap .city { font-size: 3.4rem; padding-bottom: 0.6em; }
#findUsMap .gmapWrapper { font-size: 3.2rem; }
#findUsSide .viewOnMap { display: none; }
#findUsSide .links br { display: none; }
}
/*
////
//// Why V2
////
--------------------------------------------------------------*/
#whyIntroLft { max-width: 680px; text-align: left; float: left; }
#whyCont .introBg-whySkinnnyV2 { background-image: url(../images/why_intro_bg_lg.jpg); background-repeat: no-repeat; background-position: center center; background-size: 1298 auto; padding: 11.8rem 0!important; }
#whyCont .introBg-whySkinnnyV2 .title { font-size: 6rem; line-height: 1.16em; margin-bottom: -0.3em; letter-spacing: 0; }
#whyCont .introBg-whySkinnnyV2 p { padding: 1.5em 0 1em 0; font-size: 24px; line-height: 1.5em; max-width: 594px; }
#whyCont .introBg-whySkinnnyV2 .imgSpcr { display: none; }
#whyCont #mainCertBar { margin-top: 0; padding-top: 0; }
#whyCont #mainCertBar li .ElmCirc { margin-top: 0; }
@media all and (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
#whyCont .introBg-whySkinnnyV2 { background-image: url(../images/why_intro_bg_lg_2x.jpg); background-repeat: no-repeat; background-position: center center; background-size: 1298px auto; }
}
@media all and (min-width: 640px) and (max-width: 1180px) {
#whyCont .introBg-whySkinnnyV2 { background-size: 96vw auto; padding: 7vw 0!important; }
#whyCont .introBg-whySkinnnyV2 .title { font-size: 4.8vw; }
#whyCont .introBg-whySkinnnyV2 p { font-size: 2.05vw; max-width: 594px; }
}
@media all and (max-width: 639px) {
#whyIntroLft { max-width: none; text-align: center; float: none; }
#whyCont #mainCertBar { padding-bottom: 1rem; margin-top: 2rem; }
#whyCont .introBg-whySkinnnyV2 { background-image: none; padding: 6rem 0!important; }
#whyCont .introBg-whySkinnnyV2 .title { font-size: 4.8rem; line-height: 1.16em; }
#whyCont .introBg-whySkinnnyV2 br { display: none; }
#whyCont .introBg-whySkinnnyV2 p { font-size: 3.2rem; max-width: none; }
#whyCont .introBg-whySkinnnyV2 .imgSpcr { display: block; height: 75.3rem; background: url(../images/why_intro_bg_sm.jpg) no-repeat center center; background-size: cover; margin-top: 3rem; }
}
/* Why promise
--------------------------------------------------------------*/
#whyPromise .txt { float: right; width: 48%; }
#whyPromise .img { float: right; width: 36%; margin-right: 8%; padding-bottom: 3rem; }
#whyPromise .title { font-size: 4.8rem; line-height: 1.3125em; padding-top: 2rem; }
#whyPromise p { line-height: 1.5em; font-size: 2.4rem; letter-spacing: 0.03em; }
@media all and (min-width: 640px) and (max-width: 1190px) {
#whyPromise .title { font-size: 4.8vw; }
#whyPromise p { font-size: 2.54vw; }
#whyPromise .txt { float: right; width: 48%; }
#whyPromise .img { float: right; width: 52%; margin: 0; }
}
@media all and (max-width: 639px) {
#whyPromise { text-align:center; }
#whyPromise .title { font-size: 4.8rem; line-height: 1.16em; }
#whyPromise p { font-size: 3.2rem; max-width: none; }
#whyPromise .txt { float: none; width: auto; }
#whyPromise .img { float: none; width: auto; padding-bottom: 3rem; }
#whyPromise .img img { margin: 0 auto; width: 38rem; }
}
/* Why sweet
--------------------------------------------------------------*/
#whySweet { background: #d1a64f; padding: 6.8rem 0 0 0; overflow: hidden; position: relative; }
#whySweet .contain { position: relative; }
#whySweet .title { font-size: 4.8rem; line-height: 1.3125em; padding-top: 6rem; }
#whySweet p { font-size: 1.8rem; line-height: 2em; letter-spacing: 0.03em; }
#whySweet p span.FNTplutoMed { display: block; font-size: 2.4rem; }
#whySweet .txt { width: 535px; float: left; }
#whySweet .img { float: right; margin-bottom: -5.8rem }
#whySweet .img img { margin: 0 -30px; max-width: 650px!important; }
@media all and (min-width: 640px) and (max-width: 1190px) {
#whySweet { padding: 5% 0 4% 0; }
#whySweet .title { font-size: 4.8vw; padding-top: 2rem; }
#whySweet p { font-size: 1.5vw; }
#whySweet p span.FNTplutoMed { font-size: 1.98vw; }
#whySweet .txt { width: 53%; position: relative; z-index: 5; }
#whySweet .img { width: 47%; }
#whySweet .img img { margin: 0; max-width: 100%!important; }
}
@media all and (max-width: 639px) {
#whySweet { padding: 0rem 0 1.6rem 0; text-align:center; }
#whySweet .title { font-size: 4.8rem; line-height: 1.16em; }
#whySweet p { font-size: 2.2rem; line-height: 1.66em; }
#whySweet p span.FNTplutoMed { font-size: 2.4rem; }
#whySweet .txt { float: none; width: auto; }
#whySweet .img { float: none; width: auto; padding: 3rem 0 3rem 0; overflow: hidden; }
#whySweet .img img { margin: 0 auto -1rem auto; width: 38rem; }
}
/*
////
//// Ambassadors
////
--------------------------------------------------------------*/
/* Ready
--------------------------------------------------------------*/
#ambassReady { margin-top: -37px; overflow: hidden;}
.introBg-ambassadors p { padding-bottom: 10px!important; }
#ambassReady .bg { background: #f6f4f2; color: #5e4637; position: relative; }
#ambassReady .lftCont { width: 50%; padding: 6rem 5.5rem; float: left; }
#ambassReady .rgtCont { width: 50%; background: url(../images/ambassador_ready_tmb.jpg) no-repeat center center; float: right; background-size: cover; height: 100%; right: 0px; top: 0px; position: absolute; }
#ambassReady .title { line-height: 1.2em; font-size: 3.35rem; letter-spacing: 0.05em; margin-bottom: 0.7em; }
#ambassReady p { font-size: 1.8rem; line-height: 1.4em; letter-spacing: 0.03em; padding: 0; }
@media all and (max-width: 1196px) {
#ambassReady .title { line-height: 1.4em; font-size: 2.8rem; }
}
@media all and (max-width: 1040px) {
#ambassReady .lftCont { width: 65%; padding: 2rem 3rem; }
#ambassReady .rgtCont { width: 35%; }
}
@media all and (max-width: 940px) {
#ambassReady .title { margin-bottom: 0.2em; }
#ambassReady p { font-size: 1.7rem; line-height: 1.8em; }
}
@media all and (max-width: 750px) {
#ambassReady .lftCont { width: 100%; text-align: center; }
#ambassReady .rgtCont { display: block; width: 100%; position: relative; padding-top: 75.9%; }
}
@media all and (max-width: 640px) {
#ambassReady { margin: 0; }
.introBg-ambassadors p { padding-bottom: 0!important; }
#ambassReady .bg { margin: 0 -2rem; }
#ambassReady .lftCont { padding: 7.5rem 2rem; }
#ambassReady .title { font-size: 3.6rem; line-height: 1.4em; margin-bottom: 0.7em; }
#ambassReady p { font-size: 2.3rem; line-height: 1.4em; }
}
/* Live
--------------------------------------------------------------*/
#ambassLiveBetter { padding-top: 15px; overflow: hidden; }
#ambassLiveBetter h3.title { font-size: 4.8rem; line-height: 1.15em; margin: 1.2em 0; text-align: center; }
#ambassLiveBetter .row { margin: 0 -31px; }
#ambassLiveBetter .itm { float: left; width: 33.33%; }
#ambassLiveBetter .itm div { padding: 0 31px; }
#ambassLiveBetter .itm .title { font-size: 2.1rem; line-height: 1.55em; padding: 1.4em 0 0.8em 0; margin: 0; }
#ambassLiveBetter .itm p { font-size: 16px; line-height: 1.625em; letter-spacing: 0.05em; padding: 0; }
#ambassLiveBetter .itm .tmb { display: block; background-size:cover!important; background-position: center center!important; background-repeat:no-repeat!important; }
#ambassLiveBetter .itm .tmb:after { content:''; display: block; padding-top: 125%; /*69%*/ height: 0; }
@media all and (max-width: 1126px) {
#ambassLiveBetter .row { margin: 0 -15px; }
#ambassLiveBetter .itm div { padding: 0 15px; }
}
@media all and (min-width: 641px) and (max-width: 880px) {
#ambassLiveBetter .row { margin: 0 ; }
#ambassLiveBetter .itm div { padding: 0 ; }
#ambassLiveBetter .itm { float: left; width: 100%; padding-bottom: 2rem;}
#ambassLiveBetter .itm .tmb { float: left; display: block; width: 39%;
}
#ambassLiveBetter .itm .title { padding: 0 0 0.4em 20px; margin-left: 39%; }
#ambassLiveBetter .itm p { margin-left: 39%; padding: 0 0 0 20px; }
}
@media all and (max-width: 768px) {
#ambassLiveBetter .itm p { font-size: 2vw; }
}
@media all and (max-width: 640px) {
#ambassLiveBetter .row { margin: 0 ; }
#ambassLiveBetter .itm div { padding: 0 ; }
#ambassLiveBetter .itm { float: none; width: 100%; padding-bottom: 4rem; text-align:center; }
#ambassLiveBetter .itm .tmb img { width: 100%;}
#ambassLiveBetter .itm .title { font-size: 3.4rem; line-height: 1.2em; padding: 0.7em 0 0.4em 0; }
#ambassLiveBetter .itm p {font-size: 2.4rem; line-height: 1.625em;}
}
/*
////
//// Our Vision
////
--------------------------------------------------------------*/
#visionIntroLft { max-width: 680px; text-align: left; float: left; }
#visionCont #whyInner { padding-bottom: 3rem; }
@media all and (max-width: 640px) {
#visionIntroLft { max-width: none; float: none; }
#visionCont #mainCertBar { padding-bottom: 1rem; margin-top: 2rem; }
#visionCont #whyInner { padding-bottom: 2rem;}
}
/* Process
--------------------------------------------------------------*/
#ourVision { background: #fff; margin: 4rem 0 4rem 0; text-align: center; }
#ourVision .tmb { margin: 0 -2rem; padding-bottom: 3.6rem; }
#ourVision .tmb:after { content: ''; padding: 57% 0 0 0; display: block; background:url(../images/our_vision.jpg) no-repeat center 68%; background-size: cover; }
#ourVision .title { font-size: 4.8rem; line-height: 1.16em; }
#ourVision .desc { font-size: 2.2rem; line-height: 1.66em; letter-spacing: 0.03em; padding-bottom: 1.4em;
}
#ourVision .desc p:last-child { padding-bottom: 0; }
@media screen and (min-width: 640px) {
#ourVision .title { line-height: 1.3125em; }
#ourVision .desc { font-size: 1.8rem; }
}
@media screen and (min-width: 1110px) {
#ourVision { padding: 0 0 7rem 0; margin-bottom: 0; text-align:left;}
#ourVision .ctr { position:relative; }
#ourVision .tmb { width: 440px; float: left; margin: 0.4em 1.2em 0 0; padding-bottom: 0.6em; position:absolute; left: 0; top: 0; bottom: 0; background:url(../images/our_vision.jpg) no-repeat center center; background-size: cover; }
#ourVision .tmb:after { display: none; }
#ourVision .desc { padding-left: 470px; padding-bottom: 0; }
}
/*
////
//// Our Team
////
--------------------------------------------------------------*/
#ourTeam .letter { text-align: center; background: url(../images/team_letter_bg_rpt.png) center repeat-y; background-size: 100% 1px; max-width: 700px; margin: 4rem auto; line-height: 1.75em; font-size: 2.2rem; letter-spacing: 0.03em;}
#ourTeam .letterBgTop { text-align: center; background: url(../images/team_letter_bg_top.png) top no-repeat; background-size: 100% auto; }
#ourTeam .letterBgBtm { text-align: center; background: url(../images/team_letter_bg_btm.png) bottom no-repeat; background-size: 100% auto; padding: 6rem 6rem; }
@media screen and (min-width: 640px) {
#ourTeam .letter { font-size: 1.75rem; }
}
/*
////
//// Vote
////
--------------------------------------------------------------*/
#prodVoteCont { padding: 8.2rem 0; margin-bottom: 110px; }
#prodVoteCont .voteTitle { font-size: 24px; }
#prodVoteCont .topTxt { text-align: center; padding-bottom: 3rem!important; }
#prodVoteCont .topTxt p { padding: 0; line-height: 1.8em; }
#prodVoteCont .topTxt p+p { padding-top: 0.9em; }
#prodVoteCont .formRow { display: flex; justify-content: space-between; }
#prodVoteCont .formRow p { width: calc(33.33% - 1.2rem); float: none; }
#prodVoteCont .midTxt { text-align: center; padding: 2rem 0 3rem 0!important; }
#prodVoteCont .midTxt p { padding: 0; line-height: 1.8em; float: none; }
#voteTbl { border: solid 1px #dfdfdf; margin-top: 3rem; }
#voteTbl .voteTitle { font-size: 24px; padding: 3rem 2rem; margin: 0; text-align: center; }
#voteTbl #voteTblTitle p { display: block; float: none!important; text-align: center; padding: 0 2rem 3rem 2rem; margin-top: -2rem; width: auto; }
#voteTbl .voteItmLst { display: flex; flex-wrap: wrap; }
#voteTbl .itm { border-top: solid 1px #dfdfdf; width: 50%; box-sizing: border-box; padding: 2.55rem; position: relative; }
#voteTbl .itm input { position: absolute; left: 0; top: 0; cursor: pointer; opacity: 0; display: block; width: 100%; height: 100%; z-index: 10; }
#voteTbl .itm:nth-child(odd) { border-right: solid 1px #dfdfdf; }
#voteTbl .itm small { display: none!important; }
#voteTbl .prod { display: block; text-align: center; font-size: 18px; margin: 0; padding-top: 10px; }
#voteTbl .votes { display: block; text-align: center; font-size: 18px; color: #1967ce; }
#voteTbl .fancyCheck { border: solid 2px #5e4637; background: #f6f4f2; display: block; margin: 0 auto; width: 4.4rem; height: 4.4rem; margin-top: 14px; }
#voteTbl .fancyCheck span { background: url("../images/vote/vote_check_ico.svg") no-repeat center center; background-size: 50% auto; display: block; opacity: 0; width: 100%; height: 100%; }
#voteTbl input:checked+.fancyCheck, #voteTbl input:checked+small+.fancyCheck { background: #5e4637; }
#voteTbl input:checked+.fancyCheck span, #voteTbl input:checked+small+.fancyCheck span { opacity: 1; }
#voteBtmWrp { position: fixed; bottom: 0; left: 0; width: 100%; padding: 3.2rem; display: flex; justify-content: center; background: #5e4637; color :#fff; align-items: center; z-index: 20; }
#voteBtmWrp .countWrp { font-size: 3.6rem; padding-right: 1em; text-align: right; min-width: 2.05em; }
@media screen and (max-width: 767px) {
#prodVoteCont .formRow { display: block; margin: 0 auto; max-width: 400px;}
#prodVoteCont .formRow p { width: 100%; }
}
@media screen and (max-width: 640px) {
#voteTbl .prod, #voteTbl .votes { font-size: 18px; }
#prodVoteCont .voteTitle, #voteTbl .voteTitle { font-size: 3.2rem; }
#prodVoteCont {margin-bottom: calc(45px + 6.4rem); }
}
@media screen and (max-width: 522px) {
#voteTbl .prod, #voteTbl .votes { font-size: 3.4vw; }
}