/*******************************/
/********** STRUCTURE **********/
/*******************************/
H1, h2{text-transform: capitalize;}
.master-column-wrapper {margin: 0;}
.section {margin: 50px 0;width: 100%;display: inline-block;}
.blue {background-color: #636F7B;}

/***************************/
/********** FONTS **********/
/***************************/
H1, H2 {text-align: center;padding: 50px 0;}
.blue H1, .blue H2, .blue H3, .blue H4  {color: #ffffff;}

/****************************/
/********** HEROES **********/
/****************************/
.hero {
    position: relative;
    height: auto;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position-Y: 45%;
    background-size: cover;
    background-position-x: right;
}

.hero .overlay { margin: 0 auto; position: absolute; display: -ms-flexbox;  -ms-flex-align: center;}

.hero .overlay .content { max-width: 450px;padding-left: 10%;}

.hero .overlay p {font-size: 15px; color: #fff;}

#slider {height: 650px; position: relative; overflow-x: hidden; background-color: #262628; 
    background-repeat: no-repeat;
    background-size: cover;
    background-position-Y: 45%;
overflow: hidden;}

#slider > div {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position-Y: 45%;
    background-size: cover;
    background-position-x: center;
}

.visible {visibility: visible;}

.hero.original #slider {
    background-image: url(../images/QETTLEOriginal/QETTLEOriginal-unionJack.jpg); 
    box-shadow: inset 0 0 0 1000px rgb(0 0 0 / 20%);}

.hero.mini #slider {
    background-position-x:60%;
    background-image: url(../images/product/QETTLEMini/Main.jpg);
    box-shadow: inset 500px 0px 200px 0px rgba(0,0,0,0.3);}

.hero.sigMini #slider {
    background-position-x:83% ;
    background-image: url(../images/QETTLESignatureMini/QETTLESignatureMini-hero.jpg);
    box-shadow: inset 500px 0px 200px 0px rgba(0,0,0,0.3);}
    
.hero img#heroOffersImage {box-shadow: inset 0 0 0 1000px rgb(0 0 0 / 20%);}

.hero img#heroOffersImage {box-shadow: revert;position: absolute;
    width: 250px;
    height: auto;
    background: none;
    right: 0;
    top: 0;
    background-position-x: 0;}

.visible #herobackgroundsImage {
    animation: fadeIn 1000ms forwards;
    transition-property: background-image;}

.hidden {visibility: hidden;}

@keyframes fadeIn { from {opacity: 0.8; }to {opacity: 1;}}

#selector {position: absolute;  left: 50%; transform: translateX(-50%); bottom: 20px; display: flex; z-index: 5;}

#selector div {
    background-repeat: no-repeat;
    background-size: auto 100%;
    border: 1px solid #fff;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    border-radius: 100px;
    margin: 0 10px;
}

#selector div:hover { cursor: pointer;}

#selector img {display: block; width: 100%; height: 100%;  -o-object-fit: cover; object-fit: cover;}

img#herobackgroundsImage {
    position: absolute;
    width: 110%;
    bottom: 0;
    height: 100%;
    top: 0;
    max-width: 120%;
    object-position: 75%;
    object-fit: cover;
}

.hero #slider .visible .inner-width .overlay {
    top: 50px;
    left: 75px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0;
}

.hero #slider .visible .inner-width .overlay .content {
    max-width: 450px;
    padding-left: 0%;
    display: flex;
    background: unset;
    flex-direction: column;
    justify-content: start;
    align-items: self-start;
    }

.signature-mixers .hero #slider .visible .inner-width .overlay .content {width:500px; max-width: 98%;}

.signature-mixers span.colour.in {margin-top: -10px;font-size: 14px;}

.signature-mixers H2.colour.colour {padding: 10px 0 30px 0;}


.hero #slider .visible .inner-width .overlay h1 {color: #fff;  font-size: 34px;  margin-bottom: unset;  padding-bottom: 20px;}


.hero #slider .visible .inner-width .overlay  {
    max-width: unset;
    width: revert;
    clear: both;
    width: 1400px;
    background: none;
    margin: 0 auto;
    background: unset;
    animation: none!important;
}

.hero #slider .visible .inner-width  { max-width: unset; width: unset;  margin: 0 auto;  clear: both;  background: unset;}
.hero #slider .visible .inner-width .overlay .content p{ font-size: 15px; color: #fff; margin: 0 0 10px 0;}
.hero #slider .visible .inner-width .overlay p.price {margin-bottom: 0px; font-size: 26px; padding-top: 20px;display: flex;flex-direction: column;}
.hero #slider .visible .inner-width .overlay .smaller-text {font-size: 14px;}
.hero #slider .visible .inner-width .overlay .monthly-price {font-size: 13px;}
.hero #slider .visible .inner-width .overlay .links { display: block;margin-top: 20px;}
.hero #slider .visible .inner-width .overlay a {display: inline-block;text-transform: uppercase; border: thin solid #fff; padding: 12px 22px; color: #fff;}
.hero #slider .visible .inner-width .overlay .links a{ background-color: rgba(0,0,0,0.5);}
.hero #slider .visible .inner-width .overlay a:hover {background: rgba(204, 204, 204, 0.2);}
.hero #slider .visible .inner-width .overlay a i {display: none;}

.hero #slider .visible .inner-width .overlay a:after {
    display: inline-block;
    position: relative;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: 'Font Awesome 6 Pro';
    content: '\f061';
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    padding-left: 0px;
}

/* BUY BUTTON */
#nav a.buy-butt:after {
    display: inline-block;
    position: relative;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: 'Font Awesome 6 Pro';
    content: '\f061';
    font-size: 14px;
    font-weight: 600;
    padding-left: 0px;
    margin-left: 3px;
}

/* SALE PRICE STYLING */
.overlay span.price, .qettle-products span.price {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    font-size: 22px;
}

span.oldprice {
    text-decoration: line-through;
    font-size: 16px;
    margin-left: 5px;
}

span.with-discount {
    color: #fff;
    font-weight: 400;
    margin-left: 10px;
}

span.without-discount {
    text-decoration: line-through;
    text-decoration-color: #ff6600;
}

img.desktop {display: inline; height: 100%; position: absolute; object-fit: cover;min-width: 100%;}
video#vid.mob-vid {display: none;}

@media (max-width: 980px){
    img.desktop {display: none;}
    video#vid.mob-vid {
                display: flex;
        min-width: 100%;
        height: 100%;
        position: absolute;
        object-fit: cover;
        overflow: hidden;
    }
}


/******************************/
/****** FLEX HOSE BANNER ******/
/******************************/

.page.category-page.signature-modern #hero::before {
    content: "";
    position: absolute;
    top: 30px;
    right: 50px;
    width: 200px;
    height: 200px;

    background: url(../images/sprayspout/SprayHoseAvailable2.png) no-repeat;
    background-size: contain;
    z-index: 9;
    pointer-events: none;
}



@media all and (max-width: 750px) {.page.category-page.signature-modern #hero::before {top:5px; right:5px; width: 150px;}}
@media all and (max-width: 450px) {.page.category-page.signature-modern #hero::before {height: 150px; width: 150px;}}


/******************************/

/* ADVERT BANNER */
@media all and (max-width: 1580px){.hero #slider .visible .inner-width .overlay {padding-left: 60px;}}
@media (max-width: 1300px){ .hero #slider .visible .inner-width .overlay {padding-left: 30px;}}
@media (max-width: 1100px){ 
    .hero.original #slider { background-position-x: 50%;}
    .hero #slider .visible{ background-position-x: 60%;}}

@media all and (max-width: 1000px){#slider { height: 35  0px;} .section { margin: 50px 0px;padding: 0px 10px;}  #subscribe.section{padding: 0;}}

@media (max-width: 950px){.hero #slider .visible{ background-position-x: 70%;}}

@media (max-width: 900px){  .hero #slider .visible .inner-width .overlay {padding-left: 0px; left: 30px;}}

@media all and (max-width: 750px) {
    .hero #slider .visible .inner-width .overlay h1 { margin-bottom: -20px;}
    .hero #slider .visible .inner-width .overlay{
        max-width: 100%; 
        margin: 0 auto;
        justify-content: center;
        left: 0;
        right: 0;
        bottom: 10%;
        align-items: end;}

    .hero #slider .visible .inner-width .overlay .content p { text-align: center; max-width: 90%;}

    .hero .overlay { max-width: 100%; width: 100%; bottom: 0;right: 0;left: 0; top: 0;}

    .hero #slider .visible .inner-width .overlay .content{justify-content: center; align-items: center;}

    div#herobackgrounds .overlay span.price {justify-content: center;}

    .colour-swatches .colour img {max-width: 55px;}

    .pattern-swatches .pattern img {max-width: 55px;}

    .hero #slider .visible .inner-width{width: 100%; max-width: 100%;background: rgba(0,0,0,0.2); display: flex;justify-content: center; flex-direction: row;}

    .hero #slider .visible .inner-width .overlay h1 {padding-top: 0;}

    img#herobackgroundsImage {object-position: 80%;}

    img#herobackgroundsImage.classic-hero {object-position: 73%;}

        .hero img#heroOffersImage {width:180px;}
}


@media (max-width: 680px){
    html.html-category-page div#herobackgrounds img#herobackgroundsImage {width: 150%;max-width: unset;}
}
@media (max-width: 600px){
    .hero.original #slider { background-position-x: 60%;}
    .hero #slider .visible{background-position-x: 80%;}}


@media (max-width: 460px){
    .hero #slider .visible .inner-width .overlay {padding-left: 0px; left: unset;}
    #selector div {width: 60px; height: 60px;margin: 0 1%; } .section { margin: 30px 0px;} 
    #selector{width: 100%;     justify-content: center;} 
    .hero img#heroOffersImage {width:130px;}
}

/**********************************/
/********** KEY FEATURES **********/
/**********************************/

.key-features {background-color: #DBE4ED;width: 100%; clear: both;}
.kfg-image img {width: 100%;}
.kfg-square {width: 30%;margin: 1%;background-color: #636F7B;}
.kfg-text {padding: 15px;}
.kfg-text H3, .kfg-text p {color: #ffffff;}
.key-features-grid.flex.flex-wrap {align-items: stretch;}
.section.grey{background: rgba(204, 204, 204, 0.2); padding:50px 0px;}


@media (max-width: 600px){
    .kfg-square {width: 45%; margin: 1%;background-color: #636F7B;}
}


/**************************************/
/**********QETTLE IN COLOUR **********/
/*************************************/
.qettle-in-colour img {width: 100%;}

img.right-chevron {width: 7px; margin: 0px 5px;}

.colour-swatches, .pattern-swatches {display: flex;flex: 1 0 auto;justify-content: center;align-items: center;margin-bottom: 30px;}

.colour-swatches .colour, .pattern-swatches .pattern {overflow: hidden;border-radius: 50%;border: 3px solid #FFF;margin: 0 5px;cursor: pointer;}

div#img-vid {margin-left: 10%;}

.colour-swatches .colour img, .pattern-swatches .pattern img {display: block;max-width: 70px;height: auto;width: 100%;}

#img-vid.hidden{display: none;}

#img-change{width: 50%;margin-right: 10px; height: 100%;aspect-ratio: 1 / 1;object-fit: contain;}

#img-vid{display: flex;}

.thumb-pics {display: flex;flex-wrap: wrap;width: 49%;float: right;overflow: auto;}
.thumb-pics .thumb{width: 35%;aspect-ratio: 1 / 1;overflow: hidden;}
.thumb-pics img{width: 98%;opacity: 50%; border: none;object-fit: contain;}

.colour-gallery.dekstop { /*width: 90%;*/margin: 0 auto;}

.pattern-gallery.dekstop { width: 90%;margin: 0 auto;}

@media(max-width: 586px) {.colour-swatches p, .pattern-swatches p{display: none;}}

@media(max-width: 380px){.colour-swatches .colour, .pattern-swatches .pattern{margin: 0 1px;}}

@media (max-width: 699px){
    div#img-vid {max-height: unset; margin-left: unset; margin: 0 auto; flex-direction: column; width: 90%;}
    #img-change {width: 100%;}
    .thumb-pics{width: 100%; justify-content: center; margin-top:10px;}
    .thumb-pics .thumb {width: 33%;aspect-ratio: 1 / 1; overflow: hidden;}
    
} 

#qettle-in-colour .inner-width.sigmod {max-width: 400px;}

div#qettle-in-colour p {text-align: center;}

.heading-for-colours {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.signature-modern .heading-for-colours H1 {text-transform:lowercase;margin: 0; padding:0 7px 0 0;}
#containertextanim {
    font-size: 2em;
    white-space: nowrap;
    display: inline-block;
    position: relative;
    /* letter-spacing: 0.5em;  Removed letter-spacing from here */
  }

.letter {
    opacity: 0;
    display: inline-block;
    animation-fill-mode: forwards;
    position: relative; /* Changed back to relative positioning */
    /* left: 0; Removed left property */
  }

  .fade-out {animation: fadeOut 1s forwards;}

  @keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }  }

  @keyframes fadeInLetter {
    from { opacity: 0; }
    to { opacity: 1; } }

.colour-swatches {
    display: flex; /* Use flexbox to manage the layout */
    flex-wrap: wrap; /* Allow items to wrap to a new row */
    list-style: none; /* Remove default list styling */
    padding: 0;
    margin: 0;
  }

  .colour-swatches .row1 {
    flex: 0 0 17%; /* Each item in row1 takes up 25% of the row (4 items in 1 row) */
    box-sizing: border-box;
  }

  .colour-swatches .row2 {
    flex: 0 0 17%; /* Each item in row2 takes up 25% of the row (4 items in 1 row) */
    box-sizing: border-box;
  }

  @media all and (max-width: 400px)  {#qettle-in-colour .inner-width{max-width: 100%;}}


/**************************************/
/********** WHATS IN THE BOX **********/
/**************************************/

#in-the-box .inner-width.flex{justify-content: flex-start; align-items: flex-start;}

.box-boxes {border: thin solid #666;margin: 0.5%;}
.two-thirds.flex {flex-direction: unset;justify-content: flex-start; align-items: flex-start;padding-top: 9%;}
.boxes-flex {display: flex;flex-direction: column;width: 50%;}
.box-boxes .collapsible-content { display: none; color: #505050; overflow: hidden;padding: 0px 40px 40px 40px; } 
.box-boxes .collapsible-content.active { padding: 0px 40px 40px 40px;} 

.collapsible {
    height:auto;
    cursor:pointer;
    display: flex;
    max-height: 100px;
    justify-content: space-between;
    border: unset;
    cursor: pointer;
    background-color: unset;
    outline: none;
    padding: 20px;
    width: 100%;
    text-align: left;
    align-items: center;
}

.collapsible h3{text-transform: capitalize;}

#in-the-box .svg-inline--fa{height: 1em;padding-bottom: 1.4px;margin-left: -2px;}

.collapsible:hover {background-color: #fff;}

.two-thirds.flex.flex-wrap { align-items: start;}

svg.collapsible-arrow{ filter: invert(28%) sepia(0%) saturate(0%) hue-rotate(138deg) brightness(102%) contrast(89%); margin-left: 5px;} 

a.download-icon:after { 
    display: inline-block;
    position: relative;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: 'Font Awesome 6 Pro';
    font-weight: 400;
    content: '\f019';
    font-size: 15px;
    font-weight: 800;
    margin-left: 2px;
}

.rotate180 {transform : rotate(180deg);}

img.collapsible-img {width: 20%;}

span.img-title { display: flex; align-items: center;width: 80%;}

@media (max-width: 950px){.collapsible {padding: 30px;}}

@media (max-width: 950px){.two-thirds.flex.flex-wrap {align-items: stretch;} #in-the-box .one-third {margin: 0 2%;}}

@media all and (max-width: 883px) {.collapsible{padding: 32px;}.collapsible h3{font-size: 17px;}} 

@media all and (max-width: 835px) {svg.collapsible-arrow {margin-left: 2px;}}

@media all and (max-width: 818px) {.collapsible {padding: 24px;}}

@media all and (max-width: 777px) {#in-the-box .inner-width.flex {flex-direction: column;justify-content: center;align-items: center;} #in-the-box .two-thirds.flex { width: 90%; max-width: unset;}}

@media (max-width: 699px){#in-the-box .one-third { margin: 0 auto; width: 70%;}.two-thirds.flex.flex-wrap{ margin: 0 auto;}} 

@media(max-width: 380px){.buttons.flex.flex-wrap{align-items: stretch; justify-content: stretch;}}

@media (max-width: 600px){#in-the-box .two-thirds.flex {flex-direction: column; width: 100%; align-items: center;}.boxes-flex {width: 80%;}}



/********************************/
/********** TECHNOLOGY **********/
/********************************/

#technololgy .clickable p {margin: 5px 0px;} 
#technololgy.sig-classic .clickable{top: 320px;left: 41%;}
#technololgy.sig-classic .clickable.safety-button {top: 500px;left: 46%;}
#technololgy.sig-classic .clickable.hose {top: 640px;}
#technololgy H2 {text-align: left;}
#technololgy .tech-text {max-width: 450px;}
#technololgy .one-half-content img{max-width: 350px;}
#technololgy .inner-width .one-half.tech-text {flex-direction: column;}
#technololgy .flex-section{display: flex; justify-content: space-between;}
#technololgy .clickable {position: absolute; top: 350px;max-width: 500px;left: 44%; }
#technololgy .clickable-content{max-width: 170px;background-color: #fff;display: none; padding: 0 5px;}
#technololgy p.divider {border-top: thin solid #505050;}
#technololgy .clickable.safety-button {top: 593px;left: 48%;}
#technololgy .clickable.hose {top: 766px;}
#technololgy .one-half-content {display: flex;justify-content: center;align-items: center;margin: 0 auto;}
#technololgy svg.minus, svg.plus {position: absolute;top: 13px;left: -23px; filter: invert(28%) sepia(0%) saturate(0%) hue-rotate(138deg) brightness(102%) contrast(89%);}
#technololgy a.clickable-link {font-family: 'Roboto';font-size: 14px;font-style: uppercase;font-weight: 100;color: #666;}
#technololgy p.clickable-content{font-family: "Open Sans", sans-serif;font-weight: 100;}

@media (min-width: 1300px) {
    #technololgy.sig-classic .clickable {top: 320px;left: 44%;}
    #technololgy.sig-classic .clickable.safety-button {top: 500px; left: 48%;}
}

@media (max-width: 1166px){
    #technololgy.sig-classic .clickable.safety-button p.divider {width: 342px;}
    #technololgy.sig-classic .clickable.safety-button {left: 8%;}
    #technololgy.sig-classic .clickable.hose {left: 12%}
    #technololgy.sig-classic .clickable.clickable.hose svg.minus, #technololgy .clickable.clickable.hose svg.plus {left: 150px;}
}

@media (max-width: 1100px){  .clickable.safety-button {top: 583px;}}

@media (max-width: 1200px){#technololgy .clickable.safety-button {left: 42%;} #technololgy .clickable {left: 40%;}}

@media (max-width: 999px){
    #technololgy.sig-classic  .clickable.spout{ left: 20%;top: 225px;}
    #technololgy p.clickable-content{max-width: 130px;}
    #technololgy .flex-section {flex-direction: column; width: 90%;margin: 0 auto;}
    #technololgy .one-half-content img {width: 80%;}
    #technololgy .one-half-content {width: 90%; margin: 0 auto; display: flex; justify-content: center; padding-bottom: 100px;}
    #technololgy .flex-section {flex-direction: column; width: 90%; margin: 0 auto;}
    #technololgy .inner-width .one-half.tech-text{width: 90%;margin: 0 auto;max-width: 70%; text-align: center;}
    #technololgy .clickable {left: 50%;}
    #technololgy .clickable.spout{left: 20%;top: 426px;}
    #technololgy .clickable.spout .circle svg.minus,#technololgy .clickable.spout .circle  svg.plus {left: 95px;}
    #technololgy .clickable.safety-button {left: 69%;top: 576px;}
    #technololgy .clickable-content {max-width: 100%;}
    #technololgy H2 {text-align: center; padding-top: 80px;}
    #technololgy .clickable.hose {top: 787px;left: 229px;}
    #technololgy svg.minus, svg.plus {left: 150px;}
    #technololgy svg.minus.sb, svg.plus.sb {left: -39px;}
}

@media (max-width: 960px){ #technololgy .clickable.hose {left: 22%;}}

@media (max-width: 850px){  #technololgy .clickable.spout {left: 7%;}  #technololgy .clickable.hose {left: 14%;}}

@media all and (max-width: 802px) { #technololgy p.divider {margin-left: -8px; } #technololgy svg.minus.sb, svg.plus.sb {left:  -31px}}

@media (max-width: 699px){
    #technololgy .clickable.safety-button { left: 72%;}
    #technololgy .clickable.hose {left: 48%;}
    #technololgy .clickable.hose {left: 16%;top: 740px;}} 

@media (max-width: 600px){
    #technololgy .one-half-content img {width: 80%;}
    #technololgy .clickable-content {max-width: 100%;}
    #technololgy .clickable {top: 290px;max-width: 493px;left: 30%;}
    #technololgy .clickable.hose {top: 800px;}
    #technololgy .clickable.safety-button {left: 77%;}
}

@media(max-width: 550px) {
    #technololgy .clickable.spout {top: 390px;} 
    #technololgy .clickable.safety-button {top: 510px;}
    #technololgy .clickable.hose {left: 25px;top: 712px;}
    #technololgy .clickable.spout {left: 25px;}
}

@media(max-width: 500px) {

    /**Classic**/
    #technololgy.sig-classic .clickable.safety-button{left: 25px;}
    #technololgy .flex-section {width: 95%;}
    #technololgy .one-half-content {width: 100%;justify-content: right;}
    #technololgy .one-half-content img {width: 100%;}
    #technololgy .clickable p, .clickable a {font-size: 12px;}
    #technololgya.clickable-link {margin-left: 30px;}
    #technololgy .clickable.safety-button {left: 25px;width: 75%;top: 520px}
    #technololgy .clickable.safety-button p.clickable-content {width: 150px;} 
    #technololgy .clickable p {margin: unset; } 
    #technololgy a.clickable-link {padding-left: 7px;}    
    #technololgy .clickable.spout {top: 412px; width: 30%;}
    #technololgy svg.minus.sb, svg.plus.sb{left: -23px; top: 8px;}
    #technololgy .clickable.spout .circle svg.minus, #technololgy .clickable.spout .circle svg.plus{left: -23px; top: 8px;}
    #technololgy svg.minus, svg.plus {left: -23px; top: 8px;}
}

@media(max-width: 450px) {#technololgy .clickable.hose { top: 44%;}}

@media(max-width: 420px) {
    #technololgy .clickable.spout {width: unset;}
    #technololgy .clickable-content, .clickable-content p {width: 169px;max-width: unset;}
    #technololgy .clickable p.clickable-content.hose {width: unset;}
    #technololgy .clickable.hose {top: 742px;}
    #technololgy .clickable.spout {top: 410px;} 
}

@media(max-width: 400px) {
    #technololgy .clickable.spout {margin-top: 74px;} 
    #technololgy  .clickable.hose { top: 45%;} 
    #technololgy .flex-section{width: 100%;} 
    #technololgy .one-half-content{width: 100%} 
} 

@media(max-width: 370px){#technololgy .clickable.safety-button {top: 550px;} #technololgy .clickable.hose { top: 770px;}}  

@media(max-width: 328px){#technololgy .clickable.hose {top: 735px;}#technololgy .clickable.safety-button {top: 500px;}} 

@media(max-width: 310px){#technololgy .clickable.spout {margin-top: 20px;}#technololgy .clickable.hose {top: 38%;}} 


/************************************/
/********** SPECIFICATIONS **********/
/************************************/

#specifications img {display: none;}
#specifications img.current {max-width: 100%;display: block; margin: 0 auto;max-height: 400px;}
#specifications .spec-text .spec {color: #ffffff;font-weight: 100;}
#specifications .button {border: 1px solid #ccc; width: 49%;margin: 0.5%;color: #ffffff;opacity: 0.4;padding: 20px 0;font-weight: 100;text-align: center; cursor: pointer}
#specifications .button.current {opacity: 1;}
#specifications .spec-content.current{display: block;color: #fff;}
#specifications .spex-text.spec-content{display: block; height: 300px;}
#specifications .spec-content{display: none; height: 300px; text-align: left;}
#specifications .spec-flex .one-half {width: 50%;max-width: unset; text-align: center; float: left; }
#specifications .spec-flex {display: flex; flex-direction: row;align-items: flex-start; }
#specifications .spec-table tr{border: none;border-bottom:thin solid #747a81}
#specifications .boiler-text .tables{display: flex; flex-direction: row;}
#specifications .spec-table td{padding: 3px 0px;}
#specifications .spec-table td.table-title {font-size: 12px;}
#specifications .spec-table td.number-title {text-align: right;}
#specifications span.spec.italic{padding-top: 20px; }
#specifications .spec-table.frLitre { margin-left: 50px;}
#specifications .button:hover {background: rgba(204, 204, 204, 0.2);border-color: #999}
#specifications span.letters {width: 19px;display: inline-block;}
#specifications span.letters img {display: inline; width: 17px; margin-bottom: -4px;}

@media (max-width: 699px){
    #specifications .spec-flex {display: flex; flex-direction: column;align-items: center;}
    #specifications img.current {margin: 0 auto;width: 100%; margin-bottom: 20px;}
    #specifications .spec-flex .one-half {width: 90%;}
} 

@media(max-width: 380px){#specifications .button {font-size: 12px;} #specifications img.current {max-width: 90%;}}

@media (max-width: 900px){.spec-flex .one-half {width: 50%;max-width: unset; text-align: center; float: left;}}

/**************************************/
/**********COMPLIMENTRY TAPS**********/
/************************************/

#complement .complimentTrio {display: flex; width: 100%; justify-content: center;}

#complement .compliment-option {background-position: center; background-size: 100%; margin: 0px 10px;
    width: 30%;background-image:linear-gradient(to right, rgb(7 7 7 / 40%),rgb(7 7 7 / 40%)); display: flex; justify-content: normal;}

#complement .compliment-option img.section-background{width: 100%;height: 100%;z-index: -1; position: relative;}
#complement .compliment-content{margin-left: -100%;padding: 20px; top: 8%;display: flex;flex-direction: column;justify-content: space-between;}
#complement .compliment-content p  {color: #fff;margin:5px; font-size: 16px;}
#complement .compliment-content a { background-color: unset;padding: 8px 18px;text-transform: uppercase; border: thin solid #fff;color: #fff;}
#complement .compliment-content  p.smaller { font-size: 12px;}
#complement .compliment-content  span.price { font-size: 18px;}
#complement .flex-bottom { margin-top: 11px;}
#complement h1 { padding-bottom: 0px;}
#complement p.center { padding-bottom: 50px; font-size: 16px;}
#complement .flex-top img{ max-width: 300px; width: 100%;}

@media (max-width: 750px){#complement .complimentTrio {display: flex; flex-direction: column;}#complement .compliment-option {width: 90%;margin: 10px auto;}}

@media (max-width: 950px){
    .compliment-option .flex-top { width: 90%;}
    .complimentTrio .flex-top img {width: 100%; }
    .complimentTrio .flex-bottom a {font-size: 12px;}
}

@media (max-width: 699px){
    .complimentTrio { flex-wrap: wrap;}
    .compliment-option{ width: 70%; margin: 0 0 20px 0;}
    .complimentTrio .flex-bottom a {font-size: 13px;}
}

/******************/
/*** IN ACTION ***/
/****************/

#in-action .QETTLEvideo {width: 49%;}

#in-action .inActionVideos {display: flex;flex-direction: row;justify-content: space-around;}

#in-action .QETTLEvideo img{width: 100%;}

#in-action button.WatchQETTLEvideo  {background: #fff; border: unset; padding: 8px 18px; color: #636F7B; display: flex; align-items: center;}

#in-action .QETTLEvideo .lightbox { bottom: 85px; cursor: pointer;  position: absolute;  z-index: 1;  margin-left: 40px;}

#in-action .inner-width{padding-bottom: 50px;}

#in-action svg {width: 13px; margin-right: 10px;}

#in-action.section {margin-bottom: 0px;}

@media (max-width: 750px){ #in-action .inActionVideos{flex-direction: column;} #in-action .QETTLEvideo {width: 90%; margin: 0 auto;} #in-action .QETTLEvideo .lightbox { margin-top: 35%;top: unset; bottom: unset;}}

@media(max-width: 550px) {.QETTLEvideo .lightbox  { margin-top: 30%;} .lightbox-modal-inner {top:10%;} .lightbox-modal-body {max-height: none; height: 75vh;}} 

/*********************************/
/************ MIXERS *************/
/********************************/

.mixer-taps .item-box{margin-bottom: 20px;}
p.mixer-descs {width:  85%; max-width: 750px; margin:-40px auto 50px; text-align: center;}
p.mixer-note {width:  85%; max-width: 750px; text-align: center;margin: 20px auto 0;}
.classic-mixers, .modern-mixers {display: flex;flex-direction: column;width: 100%;margin: 50px 0px;}
.mixer-taps {margin: 0 auto; display: flex; width: 90%;  margin: 0 auto; max-width: 1400px; justify-content: center;}
.mixer-taps .tap { padding: 10px; background: #f7f7f7; margin: 0 0.5%;}
.mixer-taps .tap .product-picture img {width: 100%;}
.mixer-taps .product-details H2 {font-size: 16px;}
.mixer-taps .tap h2 {padding: 5px 0px 0px; max-width: 300px; margin: 0 auto;}

.mixer-taps  .add-to-cart{background: #FF6600;padding: 9px 19px;
    color: #FFFFFF;border: none;text-transform: uppercase;
    font-weight: 100;font-size: 14px;margin: 0 10px;}

.page-body .mixer-taps {width: 100%;}
.mixer-taps .item-grid {display: flex;justify-content: center;flex-flow: row wrap;}
.mixer-taps .add-to-cart-product-box .picture img {max-width: 100%;}
.mixer-taps .item-box.mixers{max-width: 95%;width:300px;margin:5px;}
.mixer-taps .item-box .picture{background-color: unset;}
.mixer-taps  .learn-more{color: #fff; text-transform: uppercase;  background: #ff6600;padding: 7px 15px;font-size: 14px;font-weight: 500;letter-spacing: 1px;}
.mixer-taps .tap .details { display: flex; text-align: center;  justify-content: center; margin-bottom: 18px;}
.mixer-taps .tap .product-price{color: #666; font-size: 25px;padding: 7px 14px;font-weight: 100;font-family: 'Roboto';letter-spacing: 1px;}
.mixer-taps input.add-to-cart {display: none;}
.mixer-taps .main-tap-image {aspect-ratio: 1 / 1;overflow: hidden;object-fit: contain;}
.mixer-taps .product-grid-new img.main-image {object-fit: contain;width: 100%;height: 100%;}
.mixer-taps .product-grid-new .thumbnails {position: relative; margin-top:0;}
.mixer-taps .product-grid-new .thumbnails {flex-wrap: wrap; gap: 5px; justify-content: center; }
.mixer-taps  .product-grid-new .thumbnail {display: block; width: 12%; aspect-ratio: 1 / 1; border-radius: 50%; object-fit: cover; border: 1px solid white; cursor: pointer; transition: opacity 0.3s;}
.mixer-taps .product-grid-new .galleries {justify-content: center;gap:20px;}
.mixer-taps .product-grid-new .gallery {width:unset;margin: unset; flex: 0 1 calc(25% - 20px);}
.mixer-taps .product-grid-new .gallery:nth-child(n+4) .thumbnails {display: flex;}
.mixer-taps .product-grid-new .product-title h1.product-head, .mixer-taps .product-title h2.product-head2 {text-align: left;}

@media (max-width: 600px){
    .html-product-details-page #gallery-wrapper {height: auto;}
    .mixer-taps #qettle-taps {padding: 0;}
    .mixer-taps .tap h2{font-size: 20px;}
    .mixer-taps .tap span.product-price{font-size: 20px;} 
    .mixer-taps .product-grid-new .galleries {gap: 10px;}
    .mixer-taps .product-grid-new .gallery {width:unset;margin: unset; flex: 0 1 calc(25% - 10px);}
}

@media (max-width: 770px){.mixer-taps .tap .details {flex-direction: column;padding: 0 20px;} .mixer-taps .add-to-cart {margin: 0px 0px 10px 0px;}}

@media (max-width: 500px){
    .mixer-taps .tap .details { padding: 0px;}
    .mixer-taps {width: 100%;}
    .mixer-taps .tap h2{font-size: 20px;}
    .mixer-taps .tap span.product-price{font-size: 20px;} 
    .mixer-taps .product-grid-new .galleries {gap: 10px;}
    .mixer-taps .product-grid-new .gallery {width:unset;margin: unset; flex: 0 1 calc(50% - 10px);}
}


/*********************************/
/********** NAVIGATION **********/
/*******************************/

#nav-frame,#nav {height: 55px;}

#nav-frame {display: none;}

#nav { background: #DBE4ED; display: flex;justify-content: flex-end;align-items: center; }

#nav a {
    text-transform: uppercase;
    color: #666666;
    margin: 0 8px;
    padding: 0 15px;
    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;}
#nav.scroll { position: fixed;top: 0; left: 0;right: 0;z-index: 100;opacity: 1;}
#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) {#nav-frame {display: none;}}