H1, H2, H3, .page-title h1 {
  font-family: 'Roboto Serif', serif;font-weight: 100; text-transform: capitalize;}
H4, H5 {font-weight: 100;}
p {font-family: "Open Sans", sans-serif; font-weight: 100;margin: 15px 0;} 

/********************************/
/********** STRUCTURAL **********/
/********************************/
.inner-width {max-width: 1400px; width: 1400px; margin: 0 auto;clear: both;}
.flex {display: flex;align-items: center;height: 100%;}
.flex-wrap {flex-wrap: wrap; justify-content: center;}
.one-third {width: 33.3%}
.two-thirds {width: 66.6%}
.one-half {width:  50%;}
.one-half.first {}

/**********************************/
/********** KEY MESSAGES **********/
/**********************************/
.key-messages {margin: 20px auto;}
.key-message-boxes {
  width: 24%;
  margin: 0.5%; 
  padding: 10px 20px 5px;
  background: rgba(219, 228, 237, 0.4) !important;
}
.key-message-boxes p {
  text-align: center;
  font-weight: 800;
  color: #636F7B}
.key-message-boxes img {width: 100%;padding: 5px 20%;}
.key-messages.inner-width.flex {align-items: stretch;}
@media all and (max-width: 1420px){.key-message-boxes{padding: 0px;}.inner-width {max-width: 1400px;width: revert; margin: 0 auto;clear: both;}}
@media (max-width: 950px){.key-message-boxes p {text-align: center; font-weight: 600; color: #636F7B;}}
@media all and (max-width: 750px) {.key-messages.inner-width.flex{margin: 5px auto;}}
@media (max-width: 600px){.kfg-square {width: 45%; margin: 1%;background-color: #636F7B;}}
@media (max-width: 480px){.kfg-square {width: 90%;}.key-messages.inner-width.flex {flex-wrap: wrap;}.key-message-boxes p {font-size: 12px;font-weight: 400;}.key-message-boxes {width: 49%;margin: 2px auto;}}

/**********************************/
/********* KEY MSG GRID 4x ********/
/**********************************/
#key-message-grid {
  width: 1400px;
  max-width: 98%;
  margin: 20px auto;
  display: flex;
  flex-wrap: wrap;
  color: #666666;
  column-gap: 0.5%;
  row-gap: 8px;
  justify-content: space-between;
}
#key-message-grid  .key-message-box {
    width: 24.5%;  
    padding: 5px;
    background: rgba(219, 228, 237, 0.4) ;
    display: flex;
    flex-direction: column;
}
.key-message-box p {text-align: center;font-weight: 800;color: #636F7B}
#key-message-grid .key-message-box img {max-width: 45%; min-width: 120px; margin: 0 auto;}
#key-message-grid .key-message-box.empty-box { display: none;}
@media (max-width: 501px) {
  #key-message-grid  .key-message-box {
    width: 49.5%;
  }
}
/****************************************/
/**************** FINANCE ***************/
/****************************************/
.zero-finance {max-width: 800px; margin: 80px auto 40px;}
.zero-finance h1 {text-align: center; margin-bottom: 30px;}
.zero-finance .finance-content {display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: center;}
.zero-finance .finance-content > * {padding: 0 15px;}
.finance-image {align-items: center;}
.zero-finance img {width: 100%; max-width: 250px;}
/****************************************/
/*********NEW qCARE BANNER**************/
/**************************************/
#qcareNew{margin: 0 auto; width: 90%; }
#qcareNew img{width: 100%;}
#qcareNew .qcareNew-content{max-width: 475px;position: absolute;background-color: #ffffff;padding: 30px; position: absolute;margin-top: 20%;margin-left: 88px;font-size: 14px;}
#qcareNew button.qcareBUY {background: #636F7B;border: none;color: #ffffff;padding: 8px 18px;}
#qcareNew .qCareQETTLE{color: #636F7B;font-weight: 600;}
#qcareNew .qCareTitle{color: #636F7B;font-size: 16px;}
#qcareNew p.qCareTitle{color: #636F7B;font-size: 16px;}
@media all and (max-width: 1400px) {#qcareNew{width: 90%;}}
@media all and (max-width: 1000px) {#qcareNew  .qcareNew-content{max-width: 405px;margin-top: 16%;}}
@media all and (max-width: 900px) {#qcareNew .qcareNew-content{max-width: 360px;margin-top: 13%;} }
@media all and (max-width: 820px) { 
    #qcareNew {display: flex;justify-content: center;min-height: 400px;} 
    #qcareNew .qcareNew-content {max-width: 60%;margin: 9% auto;}
    #qcareNew img { object-fit: cover;}
}
@media all and (max-width: 480px) {  #qcareNew {min-height: 490px;}  #qcareNew .qcareNew-content {margin: 13% auto;}}
@media all and (max-width: 342px) { #qcareNew {min-height: 520px;} }
/*************************************/
/********** QETTLE PRODUCTS **********/
/*************************************/
.products-grid.flex {width: 100%;margin: 20px auto;align-items: stretch;}
.prod-text{margin-left: -100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;}
.prod-square {width: 32.3%;margin: 0.5%; background-image:linear-gradient(to right, rgb(7 7 7 / 40%),rgb(7 7 7 / 40%)); display: flex; justify-content: normal;background-position: center; background-size: 100%; }
.smaller-text{font-size: 11px;}
.prod-square img {width: 100%;height: 100%;z-index: -1; position: relative;}
.prod-text p  {color: #ffffff;margin:5px; font-size: 22px;}
.prod-text p.smaller-text { font-size: 12px;}
.prod-text  span.price { font-size: 18px;}
.prod-text button {background: #ffffff;border: unset;padding: 8px 18px;color: #636F7B;}
.price { font-size: 14px;}
.flex-bottom { margin-top: 11px;}
.prod-image{width: 100%;}
.flex-bottom a {color: #666; background: #ffffff; padding: 7px 14px;font-size: 12px;font-weight: 500;letter-spacing: 1px}
.prod-square span{color:#ffffff;}
@media (max-width: 1000px){
  .prod-text p {font-size: 20px;}}
@media (max-width: 700px){
  .prod-square {width: 47%;}
  .prod-text p {font-size: 18px;}
}
@media (max-width: 400px){.prod-square { width: 90%;}}
/***********************************/
/*********** NOTIFICATION BAR *****/
/**********************************/
#bar-notification .bar-notification.error, #bar-notification .bar-notification.success {
  background-color: #ffffff;
  padding: 10px 20px;
  background-color: #fff;
  color: #000;
  padding: 10px 20px;
  border: 2px solid #666;
  width: 400px;
  max-width: 90%;
  line-height: 26px;
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 40%;
  font-weight: 800;
}
#bar-notification .bar-notification .content {
  margin: 0 10px 0 0;
  font-size: 18px;
  font-family: 'Roboto';
  padding: 20px;
}
#bar-notification .bar-notification.success .content a {color: #ff6600;text-decoration: none;}
#bar-notification .bar-notification{display:none;position:fixed;top:0;left:0;z-index:1000;width:100%;padding:15px 25px 15px 10px;line-height:16px;color:#ffffff;opacity:.95}
#bar-notification .bar-notification.success{background-color:#ffffff;}
#bar-notification .bar-notification.error{background-color:#ffffff;}
#bar-notification .bar-notification.warning{background-color:#ffffff;}
#bar-notification .bar-notification .content{margin:0 10px 0 0}
/* #bar-notification.bar-notification .content a{text-decoration:underline}  */
#bar-notification .bar-notification .close{position:absolute;top:0;right:0;width:32px;height:32px;margin:7px;
    background:#ffffff url(../images/close.png) center no-repeat;cursor:pointer;background-size:13px}
/***********************************/
/************* BUNDLES *************/
/***********************************/
.upgrade-hero h1 {text-align: center;}
/***********************************/
/*********** NEWSLETTER ************/
/***********************************/
.newsletter-body {
  max-width: 500px;
  margin:  0 auto;
}
.newsletter-body{padding-top: 40px;}
.newsletter-body .topic-block-body {
  font-size: 12px;
  text-align: center;
}
#mc_embed_signup.newsletter-sign-up #mc_embed_signup_scroll .mc-field-group label, .newsletter-body form#subForm label{ 
  position: absolute;
  margin-top: -16px;
  font-family: "Open Sans", sans-serif;
  font-weight: 100;
  color: #505050;
}
#mc_embed_signup.newsletter-sign-up #mc_embed_signup_scroll .mc-field-group {
  padding: 5px;
}
#mc_embed_signup.newsletter-sign-up #mc_embed_signup_scroll .mc-field-group input, .newsletter-body form#subForm input {
  width: 100%;
}
#mc_embed_signup.newsletter-sign-up #mc_embed_signup_scroll .mc-field-group input, .newsletter-body form#subForm input {
  width: 100%;
  margin: 5px 0px;
}
.sc-cSHVUG.kXIIFK {
    margin-top: 20px;
    height: 50px;
}
#mc_embed_signup.newsletter-sign-up #mc-embedded-subscribe, button.newsletter.button {
  width: 50%;
  border: 0px solid #ff6600;
  background: #ff6600;
  height: 40px;
  margin: 30px auto !important;
  border-radius: 0px;
  letter-spacing: 1px;
  line-height: 20px;
  color: white;
  text-transform: uppercase;
  font-weight: 100;
}
input#fieldttdkhuh, .newsletter-body input#fieldName {    height: 36px;
    border: 1px solid #ddd;
    padding: 8px;
    vertical-align: middle;}
.newsletter-field {margin: 25px 0;}
@media only screen and (max-width: 480px){
  #mc_embed_signup.newsletter-sign-up #mc-embedded-subscribe  {
      width: 90%;
      padding: 10px 0px;
  }
}
#mc_embed_signup.newsletter-sign-up .indicates-required {
  font-family: "Open Sans", sans-serif;
  font-weight: 100;
  color: #505050;
  font-size: 14px;
  margin: 20px 0px;
}
input, select, textarea {
  font-size: 14px;
  font-family: 'Open Sans',sans-serif;
  color: #777;
}
#mc_embed_signup .required {
  margin: 0 -8px 0 0;
  font-size: 16px;
  font-weight: 100;
  color: #666;
}
#mc_embed_signup.newsletter-sign-up .indicates-required em{
  display: flex;
  justify-content: end;
}
#mc_embed_signup.newsletter-sign-up #mc_embed_signup_scroll, form#subForm{
  padding-top: 20px;
  max-width: 600px;
}
/******************/
/****SUBSCRIBE****/
/****************/
#subscribe.section{margin-top: 0px;display: flex;flex-direction: column;justify-content: center;  background: rgba(204, 204, 204, 0.2);padding: 100px 0;}
#subscribe button {background: #ffffff;border: unset;font-size: 14px; padding: 12px 31px;color: #636F7B;}
#subscribe img{width: 100%;}
.subscribe-section{
    margin-left: auto;
    margin-right: auto;}
.subscribe-section p{color: #ffffff;font-size: 18px;font-weight: 100;}
.center-1 {margin: 0px;}
.signature-modern #faqs .faq-list {margin: 0 auto 100px auto;}


.subscribe-section form#subForm {
    display: flex;
    flex-direction: column;
}

.right-hand-side {max-width:400px;}
.right-hand-side p {color:#666;}

#subscribe img {width: 50%;margin-right:20px;max-width:500px;}
.right-hand-side {
    display: flex;
    flex-direction: column;
}

input#fieldName, input#fieldEmail {
    height: 36px;
    border: 1px solid #ddd;
    padding: 20px 10px;
    vertical-align: middle;
    margin-bottom: 15px;
}

#subscribe button {color: #ffffff; font-weight: 400; text-transform: uppercase; letter-spacing: 1px;background:#ff6600;}


@media (max-width: 1000px){.subscribe-section {width: 100%;padding: 25px 5% 75px;}}
@media (max-width: 690px){
    .subscribe-section {padding-top: 3%;}
    .subscribe-section p{font-size: 16px; padding: 0px 10px;}
    .second-changce-popup {flex-direction: column;align-items: center;width:100%}
    #subscribe img {margin:0;}
}
a.sub-button { color: #666; background: #ffffff; padding: 10px 22px;}

@media(max-width: 550px) {
    .subscribe-section p { font-size: 14px;}
    #subscribe button {padding: 8px 18px;font-size: 12px;}
    #subscribe img {width:100%}}

@media(max-width: 400px) {.subscribe-section p{font-size:12px;} }
.subscribe-section {width: 100%;}
.second-changce-popup {
    display: flex;
    justify-content: center;
}

/**********************************/
/******* ENERGY CALCULATOR ********/
/**********************************/
#energy-cost-calculator{padding: 20px 0 ; max-width: 500px; width: 100%;}
#energy-cost-calculator .calculator-section .calculator{display: flex; margin-bottom: 10px;}
#energy-cost-calculator .calculator-section .calculator button {
    background: #ff6600;
    border: none;
    border-radius: 0px;
    color: #ffffff;
    font-family: 'Open Sans',sans-serif;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    line-height: 20px;
    padding: 8px 20px;
    color: #ffffff;
    font-weight: 100;
    font-size: 16px;
}
#energy-cost-calculator .calculations {display: flex;flex-direction: column;justify-content: space-around;}
#energy-cost-calculator .calculations div {margin: 5px 0px; background: #e7e7e7; 
    flex-direction: row; display: flex; align-items: center; justify-content: space-between;}
#energy-cost-calculator .stand-by-cost div p,
#energy-cost-calculator .four-cups-cost div p{color: #ff6600;margin: 0;}
#energy-cost-calculator .stand-by-cost div,
#energy-cost-calculator .four-cups-cost div{display: flex;flex-direction: column;}
#energy-cost-calculator  input#unitcost {max-width: 80px;margin-right: 10px; text-align: center; border: solid 1px #666;}
#energy-cost-calculator  input#unitcost::placeholder {text-align: center; color: #ccc;}
#energy-cost-calculator  input#unitcost:focus::placeholder {color: transparent;}
#energy-cost-calculator  svg { width: 14px;fill: #ffffff; margin: 0 0 0 10px;}
#energy-cost-calculator h3 {text-transform: uppercase;font-family: 'Open Sans',sans-serif;font-size: 12px;font-weight: 400; text-align: center;width: 66px;}
#energy-cost-calculator h4 {text-transform: capitalize;font-family: 'Open Sans',sans-serif;font-size: 14px;font-weight: 300;}
#energy-cost-calculator p.asterisk-text {text-align: right; text-transform: uppercase;font-style: italic;font-size: 10px; margin: 0;}
#energy-cost-calculator .top {margin-bottom: 20px;}
#energy-cost-calculator .bolder {font-size: 14px;font-weight: 600;}
#energy-cost-calculator .italic {font-style: italic;}
#energy-cost-calculator .stand-by-cost .cost, #energy-cost-calculator .four-cups-cost .cost {margin: 0px; max-width: 100px; text-align: center;}
#energy-cost-calculator .stand-by-cost,
#energy-cost-calculator .four-cups-cost {padding: 15px;}
#energy-cost-calculator .smaller-text {font-size: 12px;font-style: normal;}
#energy-cost-calculator .cost.border {border-left: thin solid white;}
input[type=number]::-webkit-inner-spin-button {-webkit-appearance: none;}
@media (max-width: 400px) {#energy-cost-calculator .cost.border {border-left: none;}} 
/**********************************/
/********* PRODUCT GRID 6x ********/
/**********************************/
#product-grid{
  width: 1400px;
  max-width: 98%;
  margin: 20px auto;
  display: flex;
  flex-wrap: wrap;
  color: #666666;
  column-gap: 0.5%;
  row-gap: 8px;
}
#product-grid  .tap-product {
    display: flex;
    width: 33%;  
    border:thin solid #666;
    padding: 20px;
}
#product-grid  .tap-product.empty-box { display: none;}
#product-grid  .tap-product .top.last-cat {display: none;}
#product-grid  .tap-product .top.normal-cat {display: revert;}
#product-grid  .tap-product .img img {
    width: 100%;
}
#product-grid  .tap-product .img  {
    width: 100%;
    display: flex;
    padding: 5px 0px;
    align-items: center;}
#product-grid .text {
    display: flex;
    width: 90%;
    justify-content: space-between;
    flex-direction: column;
    /*padding: 20px 0px 0px 20px;*/
}
#product-grid .text .top span {
    font-size: 20px;
}
#product-grid .text .top p {
    font-size: 16px;
    line-height: 0%;
}
.top {
    padding-top: 5%;
}
.text .top, .text .bottom {
    padding-left: 5%;
}
#product-grid .text .price{
  font-size: 18px;
}
#product-grid .text .top .signature-title p {
    margin-top: -4px;
    margin-left: 35px;
}
#product-grid .text .bottom p {
  font-size: 12px;
}
@media (max-width: 996px) {
  #product-grid .tap-product {
    width: 49.5%;
  }
}
@media (min-width: 551px) and (max-width: 650px) {
  #product-grid .text {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
  }
}
@media (max-width: 550px) {
  #product-grid .tap-product {
    width: 100%; }
  #product-grid .text .bottom p {
    font-size: 14px;
  }
}
@media (max-width: 300px) {
  #product-grid .text {
    width: 90%;
  }
}
/**********************************/
/************ FAQ STYLES **********/
/**********************************/
.faq-list {
    padding: 0;
    margin: 100px auto;
    max-width: 996px;
}
.faq-list>li:first-child {
    border-top: 1px solid #ccc;
}
.faq-list>li {
    border-bottom: 1px solid #ccc;
    width: 100%;
    padding: 0;
    margin: 0;
    text-align: left;
    list-style-type: none !important;
}
.faq-question {
    padding: 20px 20px 20px 0;
    font-weight: 100;
    display: -webkit-box;
    display: flex;
    display: -ms-flexbox;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.faq-question .text {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
}
.faq-answer>*:last-child {
    margin-bottom: 20px;
}
.faq-answer img {
    display: block;
    max-width: 100%;
    height: auto;
}
/* create plus-icon */
.plus-icon {
    position: relative;
    width: 20px;
    height: 20px;
    -webkit-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
}
.plus-icon .vertical {
    background: #333;
    width: 2px;
    height: 20px;
    position: absolute;
    top: 0;
    left: 9px;
}
.plus-icon .horizontal {
    background: #333;
    height: 2px;
    width: 20px;
    position: absolute;
    top: 9px;
    left: 0;
}
.plus-icon .vertical,
.plus-icon .horizontal {
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.faq-list .lightbox {
    position: relative;
    margin-top: 30px;
}
.faq-list .lightbox::before {
    content: "";
    background-image: url(../images/youtubeplay-grey.svg);
    background-size: cover;
    background-repeat: no-repeat;
    display: inline-block;
    position: absolute;
    z-index: 10;
    width: 75px;
    height: 53px;
    top: calc(50% - 24px);
    left: calc(0% + 90px);
    -webkit-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
}
.faq-list .lightbox:hover::before {
    background-image: url(../images/youtubeplay-orange.svg);
    -webkit-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
}
.faq-list .lightbox img {
    display: block;
    max-height: 100%;
    max-width: 100%;
    width: 100%;
    height: auto;
    max-width: 250px;
}
/* animate rotation */
.faq-question.open .plus-icon {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
        transform: rotate(45deg);
}
.faq-answer {
    display: none;
    font-weight: 100;
}
.small-title {
    font-weight: normal;
}
@media all and (max-width: 996px) {
    .faq-question {
        padding-left: 15px;
    }
    .faq-answer {
        padding: 0 15px;
    }
}
@media all and (min-width: 600px) {
    .faq-question:hover .plus-icon>div {
        background: #ff6600;
    }
    .faq-question:hover {
        color: #ff6600;
        cursor: pointer;
    }
}
/******************************************/
/***************** MORE TEA ***************/
/******************************************/
.more-tea-please {
  background: rgba(204, 204, 204, 0.2);
  width: 100%;
}
.more-elements {
  display: flex;
  justify-content: center;
  width: 800px;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 90%;
  padding-bottom: 50px;
}
.more-individual-elements {justify-items: center;text-align: center;width: 33.3%;}
.more-tea-please h4 {
  font-size: 18px;
  font-family: 'Roboto Serif', serif;
  text-align: center;
  margin-bottom: 12px;
}
.more-individual-elements a p {margin: 0; padding: 0;}
.more-elements .element-image {
  height: 150px;
  display:flex;
  align-items: center;
  justify-content: center;
}
.more-tea-please img {max-width: 200px;}
.more-tea-please img.showrooms {height: 100px;}
.more-tea-please img.demo {height: 90px;}
.more-tea-please img.youtube {width: 110px;}
@media all and (max-width: 600px) {
  .more-elements {flex-direction: column;}
  .more-individual-elements {width: 100%;}
}
/******************************************/
/******************************************/
/************ CHILLER OFFER 2022 **********/
/******************************************/
.chiller-offer {
    height: 200px;
    display: flex;
    justify-content: center;
    background-color: #3d8ec8;
    background-size: contain;
    margin-top: -100px;
}
.chiller-offer a.chiller-link img.desktop  {
    /*position: absolute;*/
    margin-top: -70px;
    width: auto;
}
.chiller-offer img.polaroid{ display: none;}
.chiller-offer a.chiller-link img.mobile{display: none;}
@media all and (max-width: 720px) {
    .chiller-offer a.chiller-link img.desktop{ display: none;}
    .chiller-offer a.chiller-link img.mobile{ display:inline-block; width: 100%;}
    .chiller-offer img.polaroid{ display: block; position: absolute; width: 30%;margin-top: -22%; z-index: 1;}
    .chiller-offer {
        height: auto;
        display: flex;
        justify-content: center;
        background-color: #3d8ec8;
        background-size: contain;
        margin-top: -54px;
        margin-bottom: 52px;
    }
}
@media all and (max-width: 570px) {.chiller-offer img.polaroid{ width: 35%; margin-top: -30%;}}
@media all and (max-width: 450px) {.chiller-offer img.polaroid{ width: 42%; margin-top: -35%;}}
/********* END OF CHILER OFFER 2022 *****/
/**************************************/
/********** RETAILER LOCATOR MAP ******/
/**************************************/
.all-shops-page .store-locator-map-holder {height: 500px;}
.all-shops-page .shops-item .tags-label, .all-shops-page .shop-page .tags-label {display: none;}
.all-shops-page .page-body ul {padding: 0;list-style: none;}
.all-shops-page .shops-item .show-directions, 
.all-shops-page .shops-item .tag-item, 
.all-shops-page .shop-page .tag-item, 
.all-shops-page .getUserGeoLocation,
.page.shop-page .back-to-all-shops a,
.page.shop-page .tag-item {color: var(--brand-color);}
.all-shops-page .shops-item .show-directions {background:url(../images/icon-location.png) no-repeat left center}
.all-shops-page .getUserGeoLocation {background:url(../images/icon-current-location.png) no-repeat left center}
.page.all-shops-page H1, .page.shop-page H1 {font-family: 'Roboto Serif', serif; font-weight: 100;  text-transform: capitalize;}
.shops-item .tags, .shop-page .tags {display: none;}
.all-shops-page H5 {font-family: 'Roboto Serif', serif;margin-top: 10px; margin-bottom: 5px;}
.all-shops-page p {margin: 0;}
/**************************************/
/************ PRODUCT GRID ************/
/**************************************/
.product-grid-new .galleries {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.product-grid-new .gallery {
  position: relative;
width: 24%;
height: auto;
padding-bottom: 80px;
margin: 0 auto;
text-align: center;
justify-content: center;
display: flex;
flex-direction: column;
}
.product-grid-new .main-image {
  width: 100%;
  height: auto;
  object-fit: cover;
}
.product-grid-new img.main-image {height: auto;}
.product-grid-new .thumbnails {
  display: flex;
  gap: 5px;
  margin: 0 auto;
  margin-top: 150px;
  padding-bottom: 10px;
  justify-content: center;
  position:absolute;
}
.product-grid-new .thumbnail {
  width: 12%;
  height: auto;
  cursor: pointer;
  transition: opacity 0.3s;
  border: white 1px solid;
  border-radius: 20px;
}
.product-grid-new .gallery:nth-child(n+4) .thumbnails {display: none;}
.product-grid-new .thumbnail:hover {
  opacity: 1;
}
.product-grid-new .product-title-section {
  text-align: center;
  margin-top: 10px;
  display:flex;
  justify-content: space-between;
  color:#636f7b;
  font-family: "Open Sans", sans-serif;
}
.product-grid-new .product-title-section .product-title {text-align: left;}
.product-grid-new .product-title h1, .product-title h2 {
  margin: 5px 0;
}
.product-grid-new .product-title h1.product-head {font-weight:400;font-size:20px;padding: 0px;}
.product-grid-new .product-title h1.product-head, .product-title h2.product-head2 {font-family: "Open Sans", sans-serif;margin:0;padding: 0px;}
.product-grid-new .product-title h2.product-head2 {font-size:14px;}
.product-grid-new .product-price {
  font-size: 1.2em;
  font-size: 1.2em;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.product-grid-new span.price-from {
  font-size: 12px;
  text-transform: capitalize;
}
.product-grid-new .learn-more-button {
  text-align: center;
  margin-top: 10px;
}
.product-grid-new .learn-more-button a {
  display: flex;
  padding: 15px 15px;
  color: white;
  text-decoration: none;
  background: #636f7b;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}
.product-grid-new .learn-more-button a i {display: none;}
.product-grid-new .learn-more-button a:after{
  display: inline-block;
    position: relative;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: 'Font Awesome 6 Pro';
    content: '\f061';
    font-size: 25px;
    font-weight: 300;
    color: #fff;
}
.product-grid-new .learn-more-button a:hover {background-color: #434a51;}
.product-grid-new .product-title h1.product-head, .product-title h2.product-head2 {color: #636f7b;}
@media all and (max-width: 1270px) {.product-grid-new .thumbnails{margin-bottom: 35px;}}
@media all and (max-width: 1200px) {
  .product-grid-new .products-grid span.price {font-size: 18px;}
  .product-grid-new .product-title h1.product-head {font-size: 16px;}
  .product-grid-new .product-title h2.product-head2 {font-size: 12px;}
  .product-grid-new .gallery {width:32%}
  .product-grid-new .thumbnails{margin-bottom: -15px;}
}
@media all and (max-width: 1000px) {.product-grid-new .thumbnails{margin-bottom: 10px;}}
@media all and (max-width: 900px) {.product-grid-new .thumbnails{margin-bottom: 25px;}}
@media all and (max-width: 850px) {.product-grid-new .thumbnails{margin-bottom: 20%;}}
@media all and (max-width: 750px) {.product-grid-new .thumbnails{margin-bottom: 30%;}}
@media all and (max-width: 700px) {.product-grid-new .thumbnails{margin: 0; padding: 0;margin-top: 35%;}.product-grid-new .products-grid span.price {font-size: 16px;}.product-grid-new .gallery{width:49%;}}
@media all and (max-width: 500px) {
  .product-grid-new .thumbnails{margin-top: 15%;}
  .product-grid-new .product-title-section{flex-direction: column; align-items: center;}
  .product-grid-new .product-price {align-items:center;margin-top:5px;}
  .product-grid-new .product-title-section .product-title {text-align: center;}
  .product-grid-new span.price-from {font-size: 10px;margin-bottom:-5px;}
}
@media all and (max-width: 460px) {.product-grid-new .thumbnails{margin-top: 0%;}}
@media all and (max-width: 380px) {.product-grid-new .thumbnails{margin-top: -5%;}}
/**************************************/
/*********** BEAT THE INCREASE ********/
/**************************************/
/*
.master-wrapper-page .issue-notice-christmas {
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}
.issue-notice-christmas span.btp {
    margin-right: 20px;
    font-weight: 800;
}
.issue-notice-christmas span.btp-date {
    font-weight: 100;
    text-transform: none;
    font-size: 14px;
    margin-left: 20px;
}
@media all and (max-width: 570px) {
    .issue-notice-christmas {flex-direction: column;}
    .issue-notice-christmas span.btp, .issue-notice-christmas span.btp-date {margin:0;}
}
div#herobackgrounds::after {
    content: "";
    background-image: url(../images/QETTLE-BeatThePrice.png);
    background-size: cover;
    background-repeat: no-repeat;
    display: inline-block;
    position: absolute;
    top: 40px;
    right: 40px;
    width:252px;
    height: 250px;
}
@media all and (max-width: 750px) {
    .hero #slider .visible .inner-width .overlay .content p {width: 320px;}
    div#herobackgrounds::after {
        top: 10px;
        right: 10px;
        width: 150px;
        height: 149px;
    }
}
@media all and (max-width: 560px) {
    .hero #slider .visible .inner-width .overlay .content {margin-top:90px;}
    div#herobackgrounds::after {width:140px; height:139px; }
}
*/
/**************************************/
/*********** BLACK FRIDAY 2024 ********/
/**************************************
.home-page #hero .overlay.black-friday {background: none;}
.home-page #hero .overlay.black-friday a.homepage-button {background: none;border: none;}
.home-page #hero .overlay.black-friday a.homepage-button.mobile {display: none;}
.home-page #hero .overlay.black-friday
{
    padding: 0;
    margin: 0;
    left: 25%;
    top:55%;
}
.home-page #hero .overlay.black-friday a.homepage-button {max-width: unset;}
.home-page #hero .overlay.black-friday img {width: unset;}
.home-page #hero video.mob-size {display: none;}
div#herobackgrounds::after, .page.category-page.bwt #hero::after {
    content: "";
    background-image: url(../images/10pcOff.png);
    background-size: cover;
    background-repeat: no-repeat;
    display: inline-block;
    position: absolute;
    top: 0px;
    right: 0px;
    width:400px;
    height: 400px;
}
.product-picture #selected-picture::before {
    content: "";
    position: absolute;
    top: -3%;
    left: 60%;
    width: 45%;
    height: 45%;
    background:url(../images/BlackFriday24-badge.png) center center no-repeat;
    background-size: cover;
    opacity: 0.9; 
} 
@media all and (max-width: 930px) {.page.category-page.bwt #hero::after {width: 300px; height: 300px;}}
@media all and (max-width: 820px) {.page.category-page.bwt #hero::after {width: 200px; height: 200px;}}
@media all and (max-width: 750px) {
    .hero #slider .visible .inner-width .overlay .content p {width: 320px;}
    div#herobackgrounds::after {
        width: 290px;
        height: 289px;
        top: -15px;
        right: -15px;
    }
}
@media all and (max-width: 750px) {.product-picture-wrapper .product-picture #selected-picture::before {left:unset;right:0;}}
@media all and (max-width: 560px) {
    .hero #slider .visible .inner-width .overlay .content {margin-top:90px;}
    .original .hero #slider .visible .inner-width .overlay .content {margin-top:-90px;}
    div#herobackgrounds::after, .page.category-page.bwt #hero::after {width:140px; height:139px; }
    .page.category-page.bwt #hero::after {width:170px; height:170px; top: 168px; z-index:9; }
    .bwt .overlay p {background: rgba(0, 0, 0, 0.3);}
    .product-picture #selected-picture::before {left:54%;}
}
@media all and (max-width: 995px) {
    .home-page #hero video {object-position: right;}
    video.full-size, .home-page #hero .overlay.black-friday a.homepage-button.large{display: none;}
    .home-page #hero video.mob-size, .home-page #hero .overlay.black-friday a.homepage-button.mobile {display: inline-block;text-align:center;}
    .home-page #hero .overlay.black-friday {
        margin: 0 auto;
        transform: unset;
        right: 0;
        left: 0;
        top: 0%;
        bottom: 0%;
        align-content: center;
    }
    .home-page #hero .overlay.black-friday img {width: 100%;}
    .home-page #hero .overlay.black-friday a.homepage-button {width: unset;}
}
@media all and (max-width: 541px) {
    .master-column-wrapper .page.home-page #hero {height: 450px !important;}
}
.page.category-page .upgrade-hero {
    background: #000000;
}
.page.category-page .upgrade-hero::after {
content: "";
    background-image: url(../images/BlackFriday-sparkleStrip.png);
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    position: absolute;
    top: 176px;
    max-width: 75%;
    width:500px;
    height: 65px;
}
.page.category-page .upgrade-hero H1, .page.category-page .upgrade-hero .hero-para p {
    color: #ffffff;
}
/**************************************/
/**************************************/
/********* START OF PATTERNS 2024 *****/
/**************************************/
/* HOMEPAGE HERO */
/*
.home-page #hero .overlay {top: 70% !important;max-width: 90%;}
.overlay .patterns-title {width: 600px; max-width: 100%; margin: 0 auto;  margin-bottom: -45px;}
.overlay .new-title {width: 100px;    transform: rotate(-18deg); margin-left: -30px; margin-bottom: -25px;}
*/
/* MODERN PAGE */
/*
.signature-modern .hero {height: 1100px}
.signature-modern H1 {padding: 50px 0 0 0;margin-bottom: 0; font-family: sans-serif;font-weight: 800;}
.signature-modern .overlay span.price, .qettle-products span.price {display: revert;font-size:revert;}
.signature-modern span.with-discount {color: #ff6600;}
.signature-modern span.withouit-discount {text-decoration: line-through; text-decoration-color: #ff6600;}
.signature-modern .inner-width.flex {justify-content: center;}
.signature-modern .content {max-width: 800px;text-align: center;}
.signature-modern #slider {background-color: revert;}
img.sig-modern-pattern-hero {max-width: 650px;}
.signature-modern .hero .overlay {top: 0; width: 100%;}
.signature-modern .hero .overlay .content {max-width: revert;padding: revert; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.signature-modern .hero .overlay p {color:#666666;}
.signature-modern span.links {border: thin solid #666666; display: block;width: 350px;margin: 45px auto;line-height: 45px;font-size: 18px;}
img.sig-modern-pattern-hero {max-width: 90%; width: 650px; margin: 0 auto;}
.pattern-text-section {max-width: 800px; width: 90%;}
@media all and (max-width: 850px) {img#herobackgroundsImage {height: 90%;}}
@media all and (max-width: 650px) {img#herobackgroundsImage {height: 70%;} .signature-modern .hero {height: 1000px;}}
@media all and (max-width: 450px) {img#herobackgroundsImage {height: 60%;} .signature-modern .hero {height: 900px;}.signature-modern span.links {width: 100%;.signature-modern span.links}}
@media all and (max-width: 400px) {
  img#herobackgroundsImage {height: 52%;}
  .overlay .new-title {width: 75px; margin-left:-15px;margin-bottom: -15px;}
}
@media all and (max-width: 376px) {.signature-modern H1 {font-size: 32px;}}
*/
/********* END OF PATTERNS 2024 *****/


/*********************************/
/********** STATIC BAR **********/
/*******************************/

.retailer-demo-contact-bar #nav-frame,#nav {height: 55px;}

.retailer-demo-contact-bar #nav-frame{display: none;}

.retailer-demo-contact-bar #nav { background: #636F7B; display: flex;justify-content: space-between;align-items: center; color:#fff}

.retailer-demo-contact-bar #nav a {
    text-transform: uppercase;
    color: #fff;
    margin: 0 8px;
    padding: 0 5px;
    height: 100%;
    font-size: 14px;
    font-weight: 100;
}

#nav a.buy-butt {
    border: 0.5px solid #ff6600;
    background: rgba(255,255,255,0.8);
    height: 80%;
    border-radius: 2px;
    display: flex;
    font-size: 18px;
    font-weight: 100;
    font-stretch: expanded;
    justify-content: center;
    align-items: center;
    line-height: 41px;
    padding: 0px 50px;
    letter-spacing: 1px;
    color: #ff6600;
}

#nav a.buy-butt svg { margin-left: 9px; height: 15px;}
#nav a:hover {color: #FF6600;}
.retailer-demo-contact-bar #nav.scroll { position: fixed;top: 0; left: 0;right: 0;z-index: 100;opacity: 1;justify-content: space-between;}
#nav-frame.scroll {position: fixed;top: 0; left: 0;right: 0;z-index: 100;display: block;}

@media all and (max-width: 1000px) {#nav a {font-size: 14px;padding: 0 10px;}}

@media all and (max-width: 900px) {#nav a {font-size: 12px;padding: 0;}}

@media all and (max-width: 660px) {
  .retailer-demo-contact-bar  #nav-frame, .retailer-demo-contact-bar #nav {flex-direction:column}
  .retailer-demo-contact-bar #nav.scroll{flex-direction:column;align-items:center;justify-content:center;height: 100px;}
  .contact-details.left{padding-bottom:10px;}
}