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

/********** BACKGROUND COLOURS **********/

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

:root {

  --brand-color: #ff6600; 

  --brand-color-two: #666666; /* Grey background */

  --brand-color-three: #636F7B; /* Blue background */

  --brand-color-four: #DBE4ED; /* Pale Blue background */

  --transparent-brand: rgba(255,102,0, 0.5);

  --body-font-color: #666;

  --second-font-color: #666;

}



.orange-background {background-color: #ff6600}

.grey-background {background-color: #666666}

.blue-background {background-color: #636F7B}

.pale-blue-background {background-color: #DBE4ED}





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

/********** FONTS **********/

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



.orange {color: #ff6600}

.grey {color: #666666}

.blue {color: #636F7B}

.pale-blue {color: #DBE4ED}

.rb-red {color: #cc0000}

.rb-orange {color: #ff6600}

.rb-yellow {color: #ffcc00}

.rb-green {color: #33cc33}

.rb-blue {color: #0066ff}

.rb-indigo {color: #6600cc}



.qettle-logo {font-family: 'Facile Sans'; font-weight: 500;}



H1, H2, H3, .page-title h1, .blogpost-page .page-title h1, .html-blog-page H1.blog-title  {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;} 



.italic {font-style: italic;}



span.small-in {font-size: 16px;}



#product-grid H2, #category-grid H2 {font-family: "Open Sans", sans-serif; font-weight: 100;}        





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

/********* WIDTHS ***********/

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



.contained-width-1400 {width: 1400px; max-width: 98%; margin: 20px auto;}







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

/****** FONT AWESOME ********/

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



.header-links .svg-inline--fa {height: 23px;color: white;}

.header .top-link-area .user:before { 

    display: inline-block;

    position: relative;

    text-rendering: auto;

    -webkit-font-smoothing: antialiased;

    font-family: 'Font Awesome 6 Pro';

    font-weight: 400;

    content: '\f007';

    color: #ffffff;

    font-size: 25px;

    font-weight: 300;

}



.header #topcartlink .ico-cart:before {

    display: inline-block;

    position: relative;

    text-rendering: auto;

    -webkit-font-smoothing: antialiased;

    font-family: 'Font Awesome 6 Pro';

    font-weight: 400;

    content: '\e0af';

    color: #ffffff;

    font-size: 25px;

    font-weight: 300;

 }





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

/********** IMAGES **********/

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



img.full-width {width: 100%;}







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

/********** BUTTONS **********/

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



.button {

    border: 1px solid #ccc;

    padding: 8px 40px;

    display: inline-block;

    color: #666;

    text-transform: uppercase;

}















.button:hover {







    background: rgba(204, 204, 204, 0.2);







    border-color: #999







}















.orange-button {







    border:none;







    background-color: #ff6600;







    color: #fff;







    padding-top:15px;







    padding-bottom: 15px;







}















.orange-button:hover {







    background-color: #e45c01;







}































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







/*********** LIST STYLES ***********/







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















    .page-body ul {list-style: disc; padding-left: 20px;}







    .page-body  ul li {font-family: "Open Sans", sans-serif;font-weight: 100;color: #505050;}















    .title-inlist .required {display: none;}















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







/********** MEDIA QUERIES **********/







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















@media all and (max-width: 1420px){







    .inner-width {







        max-width: 1400px;







        width: revert;







        margin: 0 auto;







        clear: both;







    }







  }















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







/*************** FOOTER *****************/







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















.dbcompliance {







    text-transform: none;







    font-size: 12px;







    background: #000000;







    color: #ffffff;







    padding: 10px;







    text-align: center;







}







#contact-footer p.white.retailers a, .footer-block.retailers a {font-size: 14px !important;color: #fff}



#contact-footer p {font-size: 14px;text-align: left;}



#contact-footer p.white.retailers a i {display: none;}

#contact-footer p.white.retailers a::after {    

    display: inline-block;

    position: relative;

    text-rendering: auto;

    -webkit-font-smoothing: antialiased;

    font-family: 'Font Awesome 6 Pro';

    font-weight: 400;

    content: '\f061';

    font-size: 25px;

    font-weight: 300;

    padding-left: 10px;}











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







/**************** BLOG ******************/







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















.html-blog-page {display: none;}







.news-title, .post-title, .news-body, .post-body {color:#666; }







.blog-list-contents {display: flex; flex-direction: row;}







.blog-categories {display: flex; flex-direction: column;margin:20px 20px 0 0; width:250px;}







.blog-categories-posts h3 {margin-bottom: 20px;}







.page-body.blog-excerpts {width: 100%;}







.page-body .blog-posts {display: flex; justify-content: space-evenly;}







.page-body .blog-posts.list-of-blogs {}







.blog-spacer {width: 20px;}







.block.blog-category-navigation .title {display: none;}







.block.blog-category-navigation li.category a, h1.blog-title.full-blog {font-family: "Roboto Serif", serif;color:#666;text-transform: capitalize; }







.blog-categories-cats {}







.blog-categories-posts {border-top: thin solid #ff6600;padding-top: 30px;}







.blog-categories-posts .post-head a {border: none; padding: 9px 0 5px 10px; font-family: "Roboto Serif", serif; text-transform: capitalize; font-weight: 100; letter-spacing: 0;color:#666;font-weight: 400;    border-bottom: 0.5px solid #999;}







/* All stuff in the list */







.post.blog-in-list {background: #fff; padding: 20px; max-width: 450px;margin-bottom:50px;}







.post.blog-in-list .blog-in-list-header {display: flex;}







.post.blog-in-list .post-head {}







.post.blog-in-list a.post-title {font-family: "Open Sans", sans-serif; font-weight: 100;margin: 15px 0;}







.post.blog-in-list span.post-title {}







span.blog-date {font-style: italic;color:#666 }







.post.blog-in-list .post-footer {display: none}







.post-head a {color: #ff6600;}







.page-body.blog-excerpts {}







.post-footer .post-actions, .blog-details .tags {display: none;}







.page-body .blog-posts.list-of-blogs {background: rgba(219, 228, 237, 0.4);padding: 20px;display: flex;flex-direction: row;flex-wrap: wrap;}







.post.blog-in-list .rich-blog-image img { width: 100%;}







.blog-posts.list-of-blogs.full-blog {display: block;}















.blog-posts.list-of-blogs .post-body p {font-size: 16px; line-height: 25px; margin-bottom: 20px;}















@media all and (max-width: 750px) {







    .blog-list-contents {display: block;}







    .blog-categories {width: 100%; margin: 50px 20px 50px 0;}







}















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







/************* PRICE LIST ***************/







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















.price-list-page .price-list,







.price-list-page .price-list th:first-child {







    /* border-right: 1px solid #ccc; */







    text-align: left;







}















/* .price-list-page h1{ text-transform: capitalize;







color: #666;} */















.price-list-page .price-list td.no-border{







    border-bottom: 1px solid #ffffff;







}







 







.price-list-page .price-list tr.rows:last-child{







    border-bottom: 1px solid #ccc;







}















.price-list-page .price-list th,







.price-list-page .price-list td {







    /* border-bottom: 1px solid #ccc; */







    padding: 0 10px;







    text-align: center;







    color: #666;







    font-size: 16px;;







}















.price-list-page .price-list tr {







    height: 40px;







}















.price-list-page tr.rows.border {







    border-bottom: 1px solid #ccc;







}







.price-list-page tr:last-child {







    border-bottom: 1px solid #ccc;







}







.price-list-page tr:first-child {







    border-bottom: 1px solid #ccc;







}







.price-list-page .price-list .product-name {







    border-right: 1px solid #ccc;







    text-align: left !important;







    padding: 10px 0;







    color: #666;







    font-family: "Open Sans", sans-serif;







    font-weight: 200;







    border-bottom: 1px solid #ccc;















}















.price-list-page .price-list .product-picture {







    display: inline-block;







    vertical-align: middle;







    margin-right: 10px;







}















.price-list-page .price-list .product-picture img {







    display: block;







    width: 100px;







    height: auto;







}















.price-list-page .price-list .product-title {







    display: inline-block;







    padding: 10px 0;







    color: #666;







    font-family: "Open Sans", sans-serif;







    font-weight: 200;







    font-size: 16px;







}















.price-list-page .price-list-disclaimer {







    margin-top: 20px;







    text-align: right;







}















.price-list-page .price-list-disclaimer p:nth-child(2) {







    text-align: center;







    max-width: 800px;







    margin: 50px auto 0;







    font-size: 12px;







    font-weight: normal;







}















@media all and (max-width: 600px) {







    .price-list-page .price-list .product-title {







        display: block;







        text-align: center;







        padding: 0 5px;







    }















    .price-list-page .price-list .product-picture {







        display: block;







    }















    .price-list-page .price-list .product-picture img {







        margin: 0 auto 10px;







    }







}















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







/*********** PAGE NOT FOUND *************/







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







.not-found-page img {







    width: 90%;







}







.not-found-page tbody tr {







    border: none;







}







.not-found-page a {







    font-size: 16px;







    text-decoration: none;







}























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







/************** DIVIDEBUY ***************/







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







.dividebuy-softcredit .soft-search .frame {min-height: 700px !important;}























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







/****** NEW CHECKOUT 2024 BRAND VARIABLES *****/







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















.checkout-step-complete .checkout-step-header-icon {background: var(--transparent-brand) !important;justify-content: center;}















.delivery-title .delivery-name {color: var(--brand-color-two);}







.checkout-step-body button.address-save, button.payment-save, button.place-order {background: var(--brand-color) !important; }







.cart-total td {padding: 5px 0;}















.checkout .columns {font-size: 14px;}















.checkout button.place-order {margin-top:0px;}







.login .form-fields {margin-bottom: 40px;}







.login h1 {text-transform: none;}















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







/************* P R O M O S **************/







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























/* QETTLE COLOUR 















@media all and (max-width: 1000px) {







   .home-page #hero .background, img.background.left-alignment {object-position:88% }







}















@media all and (max-width: 500px) {







   .home-page #hero .background, img.background.left-alignment {object-position: 76%}







}















@media all and (max-width: 400px) {







    .home-page #hero {height: 550px !important}







    .page.home-page #hero .overlay:after {width: 150px; height: 150px; right: -30px; top: -114px;}







}















.home-page #hero .overlay {max-width: 90%; width: 800px;} */















.home-page #hero .overlay img.colour, .bwt #hero img.new.colour {







    width: 138px;







    margin-left: -194px;







    margin-bottom: -7px;







    transform: rotate(-22deg);







}















.bwt #hero img.new.colour {







    width: 80px;







    margin-left: -36px;







    margin-bottom: -12px;







}







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



/************* PASSWORD *************/



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







.page.password-recovery-sent-page, html.html-login-page .login {margin: 50px 10%;}



.page.password-recovery-sent-page, html.html-login-page .login H1 {text-transform: none;}















p a {color: #f60;font-weight: 400;font-size: 16px;}



a.pw-recovery-sent {



    background: #ff6600;



    color: white;



    padding: 15px 20px;



    position: relative;



    top: 30px;



    text-transform: uppercase;



    font-weight: 400;



    font-size: 16px;}



@media (min-width: 1001px) {html.html-login-page .login .login-action-passwordregister{text-align: left;}html.html-login-page .center-1 .login-action-passwordregister .page-title h1, html.html-login-page .center-1 .login-action-passwordregister p {text-align: left;}html.html-login-page form#login-form .login-action-passwordregister {margin: unset;}



}











/*.bwt #hero .overlay {top:-443px !important;}*/







.bwt div#hero {height: 500px;display: flex;justify-content: center;}















img.new.colour.in-black {display: none;}







.home-page #hero .overlay h2.main-name.colour-logo, .bwt h2.main-name.colour-logo.qettle-logo {font-size: 60px;margin-top: -10px;}















.home-page #hero .overlay h2.sub.colour-secondlogo, .bwt h2.sub.colour-secondlogo {







    font-size: 60px; font-family: 'Open Sans'; margin: 0px; padding: 0px; text-transform: capitalize;font-family: 'Open Sans';}







.bwt h2.main-name.colour-logo.qettle-logo, .bwt h2.sub.colour-secondlogo {font-size: 40px;letter-spacing: 0}







.bwt #hero .overlay {margin-left: 80px; max-width: 550px;}







h2.colour.colour {



    font-size: 80px;



    font-family: 'Open Sans';



    text-transform: uppercase;



    font-weight: 800;



}







.bwt h2.colour.colour {font-size: 50px;line-height: 70px;margin:0; padding: 0;}







span.colour.in {



    color: #ffffff;



    margin-top: -20px;



    margin-bottom: -20px;



    font-size: 20px;



}







.bwt span.colour.in {



    margin-bottom: 0px;



    font-size: 20px;



    margin-top: -35px;



    margin-left: 303px;



}







p.colour.preorder {



    color: white;



    font-size: 24px;



    font-weight: 400;



}







.bwt p.colour.preorder {font-size: 20px; margin: 0 0 20px 0}







.bwt .overlay a {

    background: none;

    border: solid #fff 2px;

    color: #fff;

    font-weight: 400;

    opacity: 1;

    display: flex;

    align-items: center;

    justify-content: center;

}







.bwt .overlay a i {display: none;}







.bwt .overlay a:after {



    display: inline-block;



    position: relative;



    text-rendering: auto;



    -webkit-font-smoothing: antialiased;



    font-family: 'Font Awesome 6 Pro';



    font-weight: 400;



    content: '\f061';



    font-size: 25px;



    font-weight: 300;



    padding-left: 10px;



}







@media all and (max-width: 1050px) {



    .original #slider, .original #hero {height: 650px;}



}







@media all and (max-width: 923px) {



    .bwt #hero .overlay {







        /*top: -398px !important;







        padding: 15px 15px 15px 80px;*/







    }















    .bwt #hero .overlay {







    max-width: 550px;







    margin: 0 auto;







    left: unset;







    left: 0;







    right: 0;







    text-align: center;







    align-items: revert;







}















}























@media all and (max-width: 826px) {







    .bwt #hero .overlay {top: unset; margin: 0 auto;}







    .bwt #hero img.new.colour {margin-left: -155px;}







    .bwt h2.sub.colour-secondlogo {color:#fff}







    .bwt span.colour.in {margin-left: 200px}







    .bwt h2, .bwt span.colour.in, .bwt p.colour.preorder {color:#888 !important;}







    .bwt img.new.colour {display: none;}







    .bwt img.new.colour.in-black {display: inline;}







    .bwt div#hero {height: 750px;}







    .bwt div#hero {height: auto;}







    .bwt #hero .overlay {max-width: 85%;padding:20px;}







}















@media all and (max-width: 624px) {.bwt #hero .overlay {background: rgba(0,0,0,0.3);}}







@media all and (max-width: 524px) {.bwt div#hero {height:300px;}.bwt #hero .overlay H1 {display: none;}}















/* Original Page  */







.page.category-page.original img.new.colour {







    width: 85px;







    margin-left: -32px;







    margin-bottom: -66px;







    transform: rotate(-22deg);







}















#qettle-in-colour img.heading-new {







    position: absolute;







    width: 75px;







    margin-top: -37px;







    margin-left: -34px;







    transform: rotate(-22deg);







}















.page.category-page.original span.colour.in {







    margin-top: -49px;







    margin-left: 263px;







}















.page.category-page.original h2.colour.colour {padding:25px 0 10px;}















.page.category-page.original .hero #slider .visible .inner-width .overlay p.colour.preorder {







    font-size: 24px;







}







.hero #slider .visible .inner-width .overlay p.price {margin-top:-20px !important}















/* Original Page */















.hero #slider .visible .inner-width .overlay {padding-left: 0 !important;}















@media all and (max-width: 950px) {







    img#herobackgroundsImage {object-position: 90% !important;}







    img#herobackgroundsImage.less-centre {object-position: 65% !important;}







    .original .hero #slider .visible .inner-width .overlay {







        top:0;







        bottom:0;







        right:0;







        left:0;







        position: relative;







    }















    .original .hero #slider .visible .inner-width .overlay .content {







        max-width: 500px;







        display: flex;







        flex-direction: column;







        justify-content: start;







        align-items: self-start;







        padding-left: 50px;







        padding-top: 50px;







    }







}







@media all and (max-width: 750px) {







    img#herobackgroundsImage {object-position: 100% !important;}







    .page.category-page.original img.new.colour {







        margin-left: -240px;







        margin-bottom: -19px;







    }







    .page.category-page.original span.colour.in {margin-top: -30px;margin-left: 280px;}







    .page.category-page.original h2.colour.colour {padding: 30px 0 0 0;}







    .hero #slider .visible .inner-width .overlay .content {width: 100%}







    .hero #slider .visible .inner-width .overlay {top:40px !important;}







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







    p.monthly-price {margin: 0px;}















    .original .hero #slider .visible .inner-width .overlay .content {







        max-width: 500px;







        display: flex;







        flex-direction: column;







        justify-content: center;







        align-items: center;







        padding-left: unset;







        padding-top: unset;







    }







}







@media all and (max-width: 575px) {







    img#herobackgroundsImage {object-position: 90% !important;}







    img#herobackgroundsImage.less-centre {object-position: unset;}







    .home-page #hero .overlay img.colour, .bwt #hero img.new.colour {width:95px;}







    .home-page #hero .overlay h2.main-name.colour-logo, .bwt h2.main-name.colour-logo.qettle-logo, .home-page #hero .overlay h2.sub.colour-secondlogo, .bwt h2.sub.colour-secondlogo {font-size: 50px;}







    h2.colour.colour {font-size: 65px;}







    p.colour.preorder {font-size: 19px;}







}















@media all and (max-width: 405px) {







    img#herobackgroundsImage {object-position: 87% !important;}







}















/*.page.category-page.original div#hero div#selector:after {







    content: "";







    display: inline-block;







    background-image: url('/Themes/QETTLE-IE/Content/images/Original-COLOURS/New-Arrows.png');







    background-size: contain;







    background-repeat: no-repeat;







    position: absolute;







    right: 15px;







    width: 140px;







    height: 100px;







    top: -68px;







}















@media all and (max-width: 460px) {







    .page.category-page.original div#hero div#selector:after {right: unset; margin-right:-80px;top:-75px;}















}*/















/* QETTLE COLOUR ENDS */































/* ORDER DETAILS AND SHIPPING PAGE */







ul.order-overview-content, ul.info-list {







    list-style: none;







}















.order-details-page .page-title h1 {text-align: center; font-family: "Roboto Serif", serif; text-transform: capitalize; }







.actions button.button-1.re-order-button {border:none; background: #ff6600;color:#fff; padding: 10px 20px;}