* {
outline: 0
}
html {
font-size: 16px
}
body {
min-height: 100vh;
padding: 0;
margin: 0;
font-family: var(--font-primary), var(--font-generic);
color: var(--color-primary);
overflow-x: hidden
}
a {
color: var(--color-primary);
text-decoration: none;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out
}
a:hover {
text-decoration: underline;
}
p {
line-height: 150%
}
input, label, select, textarea {
font-size: 1rem;
font-family: var(--font-primary), var(--font-generic)
}
.bold, strong, b, .bespoke_intro {
font-weight: 400 !important;
font-family: var(--font-primary-bold), var(--font-generic) !important
}
.is-wrapper {
opacity: 1!important;
}
#page_info {
position: fixed;
top: 0px;
left: 0px;
z-index: 99999999999999;
background-color: var(--color-accent);
color: #fff;
padding: 10px 20px;
display: inline-block;
}
.popup, .status {
position: fixed;
top: 45%;
left: 50%;
z-index: 99;
color: var(--color-primary);
border: 2px solid var(--color-background);
text-align: center;
width: 300px;
padding: 20px;
font-size: 1rem;
margin-left: -175px;
-moz-box-shadow: 0 0 5px var(--color-shadowbox);
-webkit-box-shadow: 0 0 5px var(--color-shadowbox);
box-shadow: 0 0 5px var(--color-shadowbox);
background-color: #fff
}
.popup {
width: 400px;
margin-left: -225px;
background-image: url(/images/icon-guarantee.png);
background-position: center 15px;
background-repeat: no-repeat;
background-size: 40px;
padding-top: 65px
}
.popup a.btn {
font-size: 1rem;
font-weight: 400
}
.popup .flex {
justify-content: center;
align-content: center;
align-items: center
}
.popup a.continue {
color: var(--color-secondary-dark);
}
.status h4, .status h6, .status span {
font-family: var(--font-primary-bold), var(--font-generic);
display: block;
text-transform: uppercase;
padding: 5px 0;
background-repeat: no-repeat;
background-position: center top;
background-size: auto 25px
}
.status h6 {
font-size: 1.385rem;
padding-top: 30px;
background-repeat: no-repeat;
background-position: center top;
background-size: auto 20px
}
.tmp_msg {
background-color: var(--color-accent);
color: #fff;
text-align: center;
padding: 10px 10%;
width: 80%;
font-size: .8231rem;
border-bottom: 2px solid #fff
}
h6.error {
background-image: url(/images/icon-close.png)
}
h6.success {
background-image: url(/images/icon-success.png)
}
#header_wrap {
display: none
}
#mobile_nav {
background-color: #fff;
display: block;
-moz-box-shadow: 0 0 5px var(--color-shadowbox);
-webkit-box-shadow: 0 0 5pxvar(--color-shadowbox);
box-shadow: 0 0 5px var(--color-shadowbox);
position: sticky;
top: 0;
z-index: 10;
}
.nav_links {
padding-left: 5%;
padding-right: 2%;
border-bottom: 1px solid var(--color-border)
}
.nav_links .c_40 {
width: 47.5%;
padding-top: 15px;
padding-bottom: 10px
}
.nav_links .c_40 img {
height: 40px;
width: auto !important;
max-width: none !important
}
.nav_links span {
text-transform: uppercase;
font-size: .7231rem;
display: block;
color: #333
}
.nav_links .c_20 {
text-align: center;
width: 17.5%;
padding-top: 15px;
padding-bottom: 10px;
position: relative;
z-index: 1
}
.nav_links .c_20 img {
width: 30px;
height: auto
}
.inner_menu .menu_view_all_link {
color: var(--color-accent);
text-decoration: underline
}
.inner_menu .menu_view_all_link:after {
border-left-color: var(--color-accent);
}
.cart_number {
position: absolute;
left: 50%;
width: 20px;
height: 20px;
top: 10px;
margin-left: -15px;
z-index: 5;
border-radius: 50px;
background-color: var(--color-accent);
color: #fff;
display: flex;
align-content: center;
align-items: center;
justify-content: center;
padding: 5px;
font-size: .723rem;
font-weight: 700
}
.nav_links .c_20 {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border-left: 1px solid var(--color-border)
}
.mini_phone {
padding: 10px 5%;
background-color: var(--color-primary);
color: #ddd;
text-transform: uppercase;
font-weight: 400;
font-family: var(--font-secondary-bold), var(--font-generic);
line-height: 100%;
text-align: center;
display: flex;
align-content: center;
justify-content: center;
align-items: center
}
.mini_phone span, .mini_phone a {
color: #fff !important
}
.mini_phone span {
margin-left: 8px
}
.mini_phone img {
height: 20px;
filter: invert(100);
margin-right: 10px
}
#mobile_nav #search_bar {
display: block;
position: relative;
z-index: 1
}
#search {
padding: 10px 5%;
display: none
}
#search input {
border-radius: 5px;
border: none;
padding: 10px;
background-color: var(--color-background);
width: calc(100% - 20px);
background-image: url(/images/icon-search-new.png);
background-position: 98% center;
background-size: auto 65%;
background-repeat: no-repeat;
border: 1px solid #ddd
}
.autocomplete-suggestions {
text-align: left;
font-size: .7231rem;
margin-left: 0
}
/* MOBILE NAV TOP */
/* MOBILE NAV SLIDER */
#tags_glide {
max-height: 50px !important;
}
#tags_glide .glide__track {
max-height: inherit;
}
#tags_glide .tags {
max-height: inherit;
}
#tags_glide ul.tags {
display: block !important;
}
#tags_glide li {
max-height: 50px !important;
align-content: center;
}
#tags_glide li a {
display: flex;
justify-content: center;
}
.mobile_header {
display: block;
text-align: center;
padding: 5px 0 8px 0;
font-family: RobotoCondensed, var(--font-generic);
font-size: 1.5rem;
letter-spacing: -1px;
position: relative;
z-index: 1
}
.mobile_sticky {
display: none
}
#search_bar {
left: 2.5%;
width: 95%;
top: 5px;
padding-top: 0 !important;
height: 75%
}
.mobile_sticky #search_bar {
top: 10px
}
#search_bar img {
position: absolute;
right: 5px;
top: 50%;
margin-top: -10px;
z-index: 4;
z-index: 3
}
#search_bar input {
width: -moz-calc(92% - 20px);
width: -webkit-calc(92% - 20px);
width: calc(92% - 20px);
border: none;
padding: 3px 5% 3px 10px;
background-image: none;
background-repeat: no-repeat;
background-position: 98% center;
background-size: auto 60%;
margin: 0 0 0 2.5%;
font-size: 1.154rem;
text-align: center;
border-radius: 0;
position: absolute;
top: 8px;
left: 0;
z-index: 1
}
.mobile_sticky #search_bar input {
margin-top: 12px
}
/* checkout */
/* Map overlay styles */
#map-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.2); /* Dimmed background */
display: none; /* Hidden initially */
align-items: center;
justify-content: center;
z-index: 99999999999999;
flex-direction: column; /* Stack elements vertically */
}
#map {
position: relative;
width: 40%;
height: 30%;
background: white;
}
/* Close button style */
.close-btn {
background: #333;
color: #fff;
padding: 0px;
border: none;
cursor: pointer;
margin-bottom: 10px;
z-index: 100000000000000;
width: 60px;
height: 60px;
background-image: url(https://images.door-commerce.co.uk/climadoor/icon-close.png);
background-repeat: no-repeat;
background-size: 60% 60%;
background-position: center;
border-radius: 5000px;
}
.bubble {
position: relative;
background: var(--color-secondary-dark); /* Light background color */
border: 1px solid var(--color-border); /* Border color */
border-radius: 5px; /* Rounded corners */
padding: 25px; /* Inner spacing */
color: #fff;
line-height: 1.5;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Optional: shadow for depth */
margin-bottom: 30px;
margin-top: 20px;
font-size: 0.923rem;
}
.bubble::after {
content: '';
position: absolute;
bottom: -10px; /* Position the triangle below the bubble */
left: 20px; /* Adjust the position of the triangle */
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid var(--color-secondary-dark); /* Match the bubble background color */
}
.bubble p {
padding: 0px;
margin: 0px;
}
/* checkout */
.flex {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-lines: multiple;
-moz-box-lines: multiple;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap
}
.negative {
margin-right: -10px;
margin-left: -10px
}
.negative .inner {
margin: 0 10px
}
.c_8 {
width: 8%;
}
.c_10 {
width: 10%
}
.c_14 {
width: 14.2%;
}
.c_16 {
width: 16.666666666%
}
.c_20 {
width: 20%
}
.c_25 {
width: 25%
}
.c_30 {
width: 30%
}
.c_33 {
width: 33.333333%
}
.c_35 {
width: 35%
}
.c_40 {
width: 40%
}
.c_45 {
width: 45%
}
.c_50 {
width: 50%
}
.c_55 {
width: 55%
}
.c_60 {
width: 60%
}
.c_65 {
width: 65%
}
.c_66 {
width: 66.6666666%
}
.c_70 {
width: 70%
}
.c_75 {
width: 75%
}
.c_76 {
width: 76%;
}
.c_80 {
width: 80%
}
.c_85 {
width: 85%
}
.c_90 {
width: 90%
}
.c_100 {
width: 100%
}
h1, h2, h3, h4, h5, h6, p.price, p.sub, p.product_title {
padding: 0;
margin: 0;
font-weight: 400;
font-family: var(--font-secondary-bold), var(--font-generic);
line-height: 100%
}
h1 {
font-size: 2rem
}
.sidebar input[type=submit], a.btn, form[name=billing] input[name=submit], form[name=doorset_query] input[type=submit], a.btn.reverse:hover, form[name=aftersales] input[name=submit] {
display: inline-block;
border: 1px solid #fff;
padding: 10px 20px;
font-size: 0.9231rem;
font-family: var(--font-primary-bold), var(--font-generic);
color: #fff;
border-radius: 5px;
}
a.btn:hover, a.btn.reverse {
color: var(--color-primary);
text-decoration: none;
background-color: #fff
}
a.btn.reverse {
display: inline-block;
border: 1px solid var(--color-primary);
padding: 10px 20px;
font-size: 0.9231rem;
font-family: var(--font-primary-bold), var(--font-generic);
}
a.btn.reverse:hover {
background-color: var(--color-primary);
}
img.Sirv.image-fill, img.Sirv.image-fit {
width: 100% !important;
height: 100% !important
}
img.Sirv.image-fit {
object-fit: contain !important
}
img.Sirv.image-fill {
object-fit: cover !important
}
.detail input[name=submit], .sidebar input[type=submit], a.red_btn, form[name=billing] input[name=submit], form[name=contact] input[name=submit], .bespoke_opts input[name=submit], form[name=doorset_query] input[type=submit], form[name=aftersales] input[name=submit] {
background-color: var(--color-accent)
}
#billing_fields, #delivery_fields {
display:none;
}
.selected_address {
margin-top:8px;
font-weight: 400;
font-family: var(--font-secondary-bold), var(--font-generic);
color: #c00;
background-color: #fff;
border: 1px solid #ccc;
background-image: url(https://images.door-commerce.co.uk/general/icon-address.png);
background-repeat: no-repeat;
background-size: auto 60%;
background-position: 15px center;
padding: 10px 10px 10px 60px;
width: calc(100% - 72px);
display: block;
}
.manual_address_link {
display:inline-block;
margin-top:6px;
padding: 10px 30px;
background-color: #c00;
border-radius: 5px;
color: #fff;
}
.address-suggestions {
background-color: #fff;
padding: 0px;
border: 1px solid #ccc;
border-width: 1px 1px 1px 1px;
margin-bottom: 10px;
max-height: 250px;
overflow: auto;
width: calc(100% - 24px);
}
.address-suggestions button {
background-color: #fff;
border: none;
border-bottom: 1px solid #ccc;
padding: 5px 10px;
width: calc(100% - 20px);
display: block;
text-align: left;
}
.address-suggestions button:hover {
cursor: pointer;
background-color: #f0f0f0;
}
/* checkout */
form[name=billing] input[type=text] {
padding: 10px 10px;
border: 1px solid var(--color-border);
width: calc(100% - 22px);
margin-bottom: 10px;
}
.shipping_table {
border: 1px solid #ddd;
border-radius: 0px;
}
.shipping_table .header {
background-color: #f0f0f0;
padding: 15px 20px;
font-family: var(--font-primary-bold), var(--font-generic);
font-size: 1.077rem;
margin: 0;
}
.break {
height: 1px;
background-color: #ddd;
}
/* #delivery_details {
display: none;
} */
.shipping_table .c_10 {
text-align: center;
padding: 15px 0px;
}
.shipping_table .c_80 {
padding: 15px 0px;
}
.shipping_table h5 {
font-family: var(--font-primary-bold), var(--font-generic);
font-size: 1rem;
}
.shipping_table ul {
padding: 0px;
margin: 5px 0px 0px 30px;
}
#shipping_info, #shipping_details {
display: none;
}
#shipping_info {
border-top: 1px solid #ddd;
padding: 10px 20px;
}
#checkout_forms label {
font-family: var(--font-generic) !important;
padding: 10px 0 5px 0;
display: block;
}
/* checkout */
.new_price {
color: var(--color-accent) !important;
font-size: 1.154rem !important;
text-decoration: none !important;
padding-left: 0px !important
}
.was_price {
padding-left: 0px !important;
text-decoration: line-through !important;
color: #000 !important;
font-size: 0.9231rem !important
}
.c_45 a.red_btn {
margin-top: 30px;
margin-bottom: 0
}
.detail input[name=submit]:hover, .sidebar input[type=submit]:hover, a.red_btn:hover, form[name=billing] input[name=submit]:hover, form[name=contact] input[name=submit]:hover, .cart_table form[name=code] input[name=submit]:hover, form[name=aftersales] input[name=submit]:hover {
background-color: var(--color-primary);
color: #fff
}
#header_wrap {
background-color: #fff;
position: relative;
z-index: 1
}
.content, .footer, .header, .inner_dropdown, .introduction, .menu, .navigation {
max-width: 1160px;
margin: 0 auto;
position: relative;
z-index: 1
}
.intro_wrapper {
background-color: var(--color-background);
border-top: 20px solid #fff;
border-bottom: 30px solid #fff
}
.intro_wrapper.heritage {
border-bottom: none;
background-color: #838896;
color: #fff;
}
.intro_wrapper.heritage .c_90 {
padding-top: 50px;
padding-bottom: 40px;
}
.intro_wrapper.heritage h3 a {
color: #fff;
font-size: 1.692rem;
}
.intro_wrapper.no_b {
border-bottom: 0px;
}
.intro_wrapper.bg_red {
background-color: var(--color-accent);
color: #fff;
}
.c_45.one {
background-size: auto 100% !important;
background-position: right center !important
}
.intro_wrapper .c_50:first-child, .intro .c_30 {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%)
}
.intro .flex {
align-content: stretch;
align-items: stretch;
min-height: 15vh
}
.intro .flex .flex {
align-content: center;
align-items: center;
min-height: 1px;
}
.intro .flex .c_70 {
display: flex;
align-content: center;
align-items: center
}
.intro_wrapper .c_50:last-child .inner {
padding: 75px 40px
}
.introduction a {
text-decoration: underline
}
.intro a {
font-weight: 400;
font-family: var(--font-primary-bold), var(--font-generic)
}
.intro, .max {
max-width: 1160px;
margin: 0 auto
}
.intro .c_90 {
padding: 30px 0
}
.intro .c_30 img {
display: none
}
.intro .c_20 img {
width: 85% !important;
margin-top: 15px;
}
.header {
padding: 10px 0 15px 0
}
.header form[name=search] {
width: 80%;
margin: 0px auto 2px auto;
}
.header form[name=search] p {
text-transform: uppercase;
font-weight: 400;
font-family: var(--font-primary-bold), var(--font-generic);
padding-bottom: 5px;
margin-bottom: 2px;
}
.header form[name=search] input {
border-radius: 0px;
padding: 10px;
width: calc(100% - 20px);
border: 1px solid var(--color-border);
}
.footer .bottom_align, .header .flex .c_50, .header .flex .c_20 {
-ms-align-self: flex-end;
-webkit-align-self: flex-end;
align-self: flex-end
}
.central {
text-align: center
}
img.menu_icon {
display: none
}
#mobile_menu {
position: fixed;
top: 0;
left: 0;
height: 100vh;
overflow: auto;
-webkit-overflow-scrolling: touch;
z-index: 99999;
background-color: #fff;
width: 100vw;
display: none
}
.inner_menu {
padding: 0 30px 30px 30px;
position: relative;
z-index: 1;
-webkit-overflow-scrolling: touch
}
.menu_close img.close {
position: absolute;
right: 30px;
top: 20px;
z-index: 2
}
.menu_close {
width: 100%;
display: none
}
.menu_close img.menu_logo {
max-width: 20%;
margin-left: 80px;
margin-top: 20px;
display: none
}
.inner_menu ul {
padding: 20px 0;
margin: 0;
list-style: none
}
.inner_menu ul li a {
font-size: 1.538rem;
font-family: var(--font-secondary-bold), var(--font-generic);
letter-spacing: -1px;
display: inline-block;
position: relative;
z-index: 1;
padding: 5px 0
}
.inner_menu ul li a:after {
content: ' ';
height: 0;
position: absolute;
width: 0;
border: 6px solid transparent;
border-left-color: var(--color-primary);
top: 15px;
right: -25px;
z-index: 1
}
.inner_menu ul li a.active:after {
border-left-color: none;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid var(--color-primary);
top: 18px
}
.inner_menu ul ul {
margin: 10px 0;
padding: 10px 0;
border-top: 2px solid #7d9db9;
border-width: 2px 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-lines: multiple;
-moz-box-lines: multiple;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap
}
.inner_menu ul ul:last-of-type {
border-bottom: 2px solid #7d9db9;
}
.inner_menu ul ul li {
width: 33.333333%
}
.inner_menu ul ul li:last-of-type {
width: 100%
}
.inner_menu ul ul li a {
font-family: var(--font-secondary-bold), var(--font-generic);
letter-spacing: -1px;
display: inline-block;
position: relative;
z-index: 1;
padding: 5px 0 5px 15px;
margin-right: 40px
}
.inner_menu a:hover {
text-decoration: none
}
li a.offers_tab {
color: var(--color-accent)
}
.inner_menu ul ul li a:after {
top: 10px
}
.inner_menu ul li a.offers_tab:after {
border-left-color: var(--color-accent)
}
.blue_bg {
background-color: #e7f0fb !important
}
.navy_bg {
background-color: var(--color-primary);
color: #fff
}
.navy_bg p.sub span {
background-color: var(--color-primary);
}
.navy_bg a {
color: var(--color-secondary);
font-family: var(--font-primary-bold), var(--font-generic);
}
.navy_bg a:hover {
color: #fff;
}
p.title {
font-size: 2.538rem;
position: relative;
z-index: 1;
display: block;
font-family: var(--font-secondary-bold), var(--font-generic)
}
p.title:before {
content: "";
height: 2px;
background-color: #fff;
width: 100%;
margin-top: -1px;
top: 50%;
left: 0;
z-index: 1;
position: absolute
}
.dropdown p.title:before {
display: none
}
p.title span {
display: inline-block;
padding-right: 10px;
background-color: var(--color-primary);
position: relative;
z-index: 3
}
.enquiry p.title span {
color: #fff;
}
#cart {
text-align: right
}
#cart p {
padding: 0;
margin: 0;
font-weight: 500
}
#cart p.no_items {
padding-right: 0px
}
#cart .top_cart {
padding-right: 40px;
display: block
}
#cart p a:hover {
color: var(--color-primary);
text-decoration: none
}
#cart a.telephone, a.email {
color: var(--color-accent);
font-size: 2.813rem;
font-family: var(--font-secondary-bold), var(--font-generic);
letter-spacing: -1px;
line-height: 100%
}
a.email {
color: var(--color-primary);
font-size: 1.625rem;
letter-spacing: 0
}
.mobile_sticky p, .top_cart {
background-image: url(/images/icon-cart.png);
background-repeat: no-repeat;
background-position: right 82%;
background-size: 26px auto;
position: relative;
z-index: 1;
display: block
}
.mobile_sticky p {
padding: 0 0 30px 0;
margin: 5px 10px 0 0;
background-position: center bottom;
background-size: 24px auto
}
.mobile_sticky p span, .top_cart span {
color: var(--color-accent)
}
.mobile_sticky p .num, .top_cart .num {
position: absolute;
right: 1px;
top: -8px;
color: #fff;
z-index: 2;
background-color: var(--color-accent);
width: 24px;
height: 24px;
border-radius: 30px;
display: block;
text-align: center
}
.mobile_sticky p .num {
font-size: .9231rem;
line-height: 110%;
top: -11px;
padding-top: 2px;
height: 18px;
right: 21px
}
.autocomplete-suggestions {
border: none;
background: #fff;
cursor: default;
overflow: auto;
text-align: left;
font-size: 1rem;
margin-left: 0px;
border-bottom: 5px solid #b3c2d6;
-moz-box-shadow: 0 0 5px var(--color-shadowbox);
-webkit-box-shadow: 0 0 5px var(--color-shadowbox);
box-shadow: 0 0 5px var(--color-shadowbox)
}
.autocomplete-suggestion {
padding: 5px 10px;
white-space: nowrap;
overflow: hidden;
color: #666;
text-align: left;
font-size: 0.8231rem;
}
.autocomplete-selected {
background: var(--color-secondary);
color: #666
}
.dropdown h2 a, .featured_products .tag a, .menu span {
background-repeat: no-repeat
}
.autocomplete-suggestions strong {
font-family: var(--font-primary-bold), var(--font-generic);
color: var(--color-primary)
}
.autocomplete-selected strong {
color: var(--color-primary)
}
#footer_wrap, #menu_wrap, footer {
background-color: var(--color-primary)
}
#mini_tp {
position: fixed;
bottom: 20px;
left: 20px;
z-index: 5000;
font-size: 0.8631rem;
width: 130px;
padding: 10px;
background-color: #fff;
border-radius: 5px;
text-align: center;
line-height: 145%;
box-shadow: 0px 3px 6px 0px #999;
}
#mini_tp .star {
display: block;
margin-bottom: 4px;
}
#mini_tp .star i {
color: gold;
}
#mini_tp p {
font-weight: 300;
}
#menu_wrap a.drop_btn {
color: #fff
}
#nav_wrap, .mobile_header, .mobile_sticky {
background-color: var(--color-secondary);
text-align: center
}
.mobile_sticky {
position: fixed !important;
top: 0;
left: 0;
z-index: 99998 !important;
width: 100%;
display: none
}
.mobile_sticky img.alt_menu_icon {
height: 28px !important;
margin-top: 0;
margin-left: 2px;
display: inline-block;
opacity: .7
}
.mobile_sticky .flex {
justify-content: center;
align-content: center;
align-items: center
}
.mobile_sticky .flex div {
justify-content: center;
align-content: center;
align-items: center;
text-align: center
}
.navigation {
position: relative;
z-index: 1;
font-size: .875rem
}
.mobile_header {
display: none
}
img.search_trigger {
max-height: 20px
}
#search_bar img:hover, img.search_trigger:hover {
cursor: pointer;
opacity: .7
}
#search_bar {
position: absolute;
left: 0;
top: 5%;
height: 90%;
width: 100%;
z-index: 3;
background-color: #fff;
text-align: left;
display: none
}
#search_bar img {
position: absolute;
right: 5px;
top: 50%;
margin-top: -10px;
z-index: 4;
width: 20px;
opacity: .7
}
#search_bar input {
text-align: right;
width: calc(88.5% - 20px);
border: none;
padding: 3px 8.5% 3px 10px;
background-image: url(/images/icon-search.png);
background-repeat: no-repeat;
background-position: 95.8% 40%;
background-size: auto 56.5%;
margin: 3px 0 3px 2.5%;
font-size: 1.375rem;
position: relative;
z-index: 1
}
.singles .img_wrap {
text-align: center;
display: block
}
.singles .img_wrap img {
margin: 0 auto
}
.single .info {
font-size: .7231rem;
text-transform: uppercase;
color: #7d9db9
}
.wide_icons {
margin-top: 20px;
}
.rtb_icons {
margin-bottom: 0px;
border-bottom: 0px solid #ddd;
}
.rtb_icons .inner {
padding: 0px !important;
border: none !important;
}
.rtb_icons img {
margin: 0px;
display: block;
max-width: 75%;
margin-bottom: 0px;
}
.rtb_icons .c_20 {
width: 25%;
}
.inner.white .rtb_icons .c_20 {
width: 50%;
}
.single_icons .rtb_icons .c_20 {
width: 50% !important;
padding-bottom: 10px;
}
.single_icons {
background-color: #f0f0f0;
margin-right: 25px;
padding: 10px 30px 15px 30px;
margin-top: 30px;
border-bottom: 5px solid var(--color-primary);
}
.rtb_icons p {
font-size: 0.9231rem;
padding: 0px;
margin: 0px;
}
.rtb_icons .c_33 {
border: none !important;
padding-bottom: 15px;
padding-top: 5px;
width: 20%;
}
.rtb_icons .c_66 {
display: flex;
align-content: center;
align-items: center;
padding-bottom: 15px;
padding-top: 5px;
width: 80%;
}
.single_icons h6 {
font-size: 1.625rem;
margin-top: 20px;
}
.wide_icons .rtb_icons .c_20 {
width: 16.666666%;
}
.wide_icons .c_33, .wide_icons .c_66 {
width: 100%;
text-align: center;
padding-bottom: 0px;
}
.wide_icons img {
width: 30% !important;
margin: 0px auto 10px auto !important;
}
.wide_icons .c_66 {
justify-content: center;
}
.wide_icons p {
/*font-size: 0.8231rem;*/
}
.wide_icons .inner {
background-color: #f0f0f0;
padding: 20px !important;
}
.smv-selector img {
border: 1px solid #f0f0f0;
}
.product_media_gallery video {
width: 100%;
height: 100%;
max-width: 100%;
object-fit: contain;
background: #000;
}
img.handle_promo {
height: auto !important
}
.handle_promo.upseller {
border: 1px solid #ddd;
padding: 15px;
}
.handle_promo .c_40 {
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.detail .handle_promo input[name="submit"] {
padding: 10px 10px;
font-size: 1rem;
display: block;
}
.handle_promo .big_wrap input[type="text"] {
padding: 8px 0;
font-size: 1rem;
}
.black {
margin-bottom: 40px;
}
.promo_generic {
text-align: center;
display: block;
padding: 15px 20px;
border-radius: 7px;
background-color: var(--color-accent);
text-transform: uppercase;
font-family: var(--font-secondary-bold), var(--font-generic);
line-height: 100%;
font-size: 1.385rem;
color: #fff;
position: relative;
z-index: 1;
margin-bottom: 20px;
}
.promo_generic:before {
content: "";
position: absolute;
left: 10px;
top: 10px;
width: calc(100% - 22px);
height: calc(100% - 22px);
border: 1px solid #fff;
display: block;
z-index: 1;
border-radius: 7px;
}
.promo_generic p {
padding: 0px;
margin: 0px;
}
.promo_msg {
padding: 30px 20px 30px 20px;
background-color: var(--color-primary);
color: #fff;
margin-bottom: 15px;
margin-top:15px;
position: relative;
z-index: 1
}
.promo_msg.central {
text-align: center;
background-color: var(--color-accent);
}
.promo_msg:before, .promo_msg:after {
content: "";
top: 15px;
left: 20px;
height: 2px;
width: calc(100% - 40px);
background-color: #e7f0fb;
z-index: 9;
position: absolute
}
.promo_msg:after {
top: auto;
bottom: 15px
}
.promo_msg .c_40, .promo_msg .c_60 {
width: 100%
}
.promo_msg .c_40 p {
padding: 0;
margin: 0;
font-family: var(--font-secondary-bold), var(--font-generic);
line-height: 100%;
text-transform: uppercase;
font-size: 1.692rem
}
.promo_msg .c_60 p {
padding: 0;
margin: 0;
}
.promo_msg .flex, .promo_msg .inner {
margin: 0px !important
}
.promo_msg span {
color: #e7f0fb
}
.promo {
margin-top: 20px
}
.promo .inner {
border: 1px solid var(--color-border);
margin-bottom: 10px;
-moz-box-shadow: 0 0 5px #ddd;
-webkit-box-shadow: 0 0 5px#ddd;
box-shadow: 0 0 5px #ddd
}
.promo .flex {
margin-top: 20px !important
}
.promo .flex .flex {
margin-top: 0px !important;
background-color: var(--color-background);
align-content: center;
align-items: center
}
.promo .box.block {
padding: 15px
}
.promo .box.block p {
padding: 0;
margin: 0
}
.promo .box.block p a {
display: inline-block;
background-color: var(--color-accent);
color: #fff;
padding: 7px 30px 7px 40px;
font-weight: 700;
background-repeat: no-repeat;
background-image: url(/images/icon-checker.png);
background-position: 10px center;
background-size: 20px 20px
}
.promo .box.block p a:hover, .promo .box.block p a.active {
background-color: var(--color-primary);
text-decoration: none
}
.promo .box.block p a.active {
background-image: url(/images/icon-checker-tick.png)
}
.promo .box.block h3 {
font-size: 1.231rem;
line-height: 125%
}
.promo .flex .flex img {
display: block
}
.promo ul {
padding: 15px 0 10px 15px;
margin: 0
}
.promo_banner {
margin-bottom: 30px !important;
justify-content: center;
}
.promo_banner img, img.handle_promo {
width: 100%;
height: auto !important;
}
.promo_banner a {
margin-bottom: 10px;
display: block;
}
#product_wrap .c_25 .promo_banner img {
max-width: calc(100% - 20px) !important;
}
#product_wrap .c_25 .promo_banner {
margin-top: 0px;
}
#product_wrap .trade .c_33 {
width: 25%;
}
#product_wrap .trade .c_33 .inner {
margin-bottom: 20px;
}
.promo select {
border: 1px solid #36444d;
width: 100%;
margin-top: 10px;
border-radius: 0px;
background-color: #fff;
font-size: 1rem;
padding: 7px 10px;
}
.mobile_promos {
margin-bottom: 30px !important;
}
.non_desktop img.promo_img {
max-width: calc(100% - 20px) !important;
margin-bottom: 15px;
margin-top: 0px !important
}
.navigation ul {
max-width: 100%;
margin: 0 auto;
padding: 0;
list-style: none;
position: relative;
z-index: 1;
-moz-align-items: center;
-ms-align-items: center;
align-items: center
}
.navigation ul li {
flex: 1
}
#nav_wrap a {
display: block;
padding: 15px 10%;
color: #666
}
#nav_wrap a:hover {
background-color: #a7caf5;
color: #333;
text-decoration: none
}
.tag_wrap {
-webkit-box-shadow: 5px 5px 9px 5px rgba(35, 35, 35, 0.12), 0px 5px 9px 5px rgba(35, 35, 35, 0.12);
box-shadow: 5px 5px 9px 5px rgba(35, 35, 35, 0.12), 0px 5px 9px 5px rgba(35, 35, 35, 0.12);
position: relative;
z-index: 3;
}
.upsell_wrap {
position: relative;
z-index: 1;
background-color: var(--color-primary);
}
.lifestyler {
position: absolute;
right: 0px;
width: 40%;
height: 100%;
background-size: cover;
background-position: center;
z-index: 1;
}
.upsell_inner {
color: #fff;
padding: 60px 100px 60px 0px;
background-color: var(--color-primary);
width: 70%;
position: relative;
z-index: 5;
clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);
}
.upsell_inner h3 {
font-size: 1.835rem;
line-height: 125%;
}
.upsell_inner ul {
padding: 15px 0px;
margin: 0px;
list-style: none;
}
.upsell_inner a.btn {
margin-right: 10px;
}
.upsell_inner li {
margin-bottom: 10px;
position: relative;
z-index: 1;
padding-left: 20px;
}
.upsell_inner li span {
position: absolute;
left: 0px;
top: 3px;
z-index: 9;
}
ul.tags {
text-align: center;
background-color: #fff;
padding: 0;
margin: 0 auto;
list-style: none;
font-family: var(--font-primary-bold), var(--font-generic);
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
}
.tags div:first-of-type, ul.tags li:first-of-type {
background-image: url(https://images.door-commerce.co.uk/general/icon-truck-express.png)
}
.tags div:nth-child(2), ul.tags li:nth-child(2) {
background-image: url(https://images.door-commerce.co.uk/general/icon-tick-express.png)
}
.tags div:nth-child(3), ul.tags li:nth-child(3) {
background-image: url(https://images.door-commerce.co.uk/general/icon-ticket-express.png)
}
.tags div:nth-child(4), ul.tags li:nth-child(4) {
background-image: url(https://images.door-commerce.co.uk/general/icon-door-express.png)
}
.tags div:nth-child(5), ul.tags li:nth-child(5) {
background-image: url(https://images.door-commerce.co.uk/general/icon-cogs-express.png)
}
#tags_glide {
background-color: #fff;
font-size: .875rem;
max-height: 50px;
}
#tags_glide div {
max-width: 1160px;
margin: 0 auto;
}
.reason-to-buy {
background-color: var(--color-secondary);
position: relative;
z-index: 1;
}
.reason-to-buy li {
background-image: none !important;
font-family: RobotoCondensed, Helvetica;
}
.reason-to-buy li a {
align-items: center;
}
.reason-to-buy img {
padding-right: 10px;
height: 30px;
}
ul.tags li {
padding: 15px 40px;
font-family: RobotoCondensed, Helvetica;
background-repeat: no-repeat;
background-position: left center;
background-size: auto 60%;
}
ul.tags li a {
display: flex;
flex-direction: row;
align-items: center;
}
ul.tags li a img {
margin-right: 10px;
height: 30px;
}
ul.tags li a p {
line-height: 100%;
}
ul.tags li:hover img {
-webkit-filter: grayscale(100%);
filter: gray
}
ul.content_links {
padding: 20px 0px;
margin: 0px;
list-style: none;
}
ul.content_links a {
display: block;
border-bottom: 1px solid #ddd;
padding: 6px 0px 6px 0px;
margin-bottom: 0px;
font-weight: 700;
}
ul.content_links a:hover {
text-decoration: none;
background-color: var(--color-background);
padding-left: 10px;
}
.tablet_only {
display: none
}
.tag_wrap {
position: relative;
z-index: 1
}
.mobile_bar, .company_wrap {
display: none
}
.slider {
position: relative;
z-index: 1;
overflow: hidden;
height: 650px
}
.main_slider {
color: #dfdfdf;
height: 400px;
overflow: hidden;
background-color: var(--color-primary);
}
.main_slider .glide__slide {
width: 100%;
height: 400px;
position: relative;
z-index: 1;
}
.main_slider .glide__slides {
padding: 0px;
margin: 0px;
list-style: none;
}
.slider_inner {
margin-left: 40%;
height: 400px;
display: flex;
align-content: center;
align-items: center;
}
.slider_inner h2 a, .slider_inner h1 {
color: #fff;
font-size: 1.892rem;
}
.slider_inner p a {
color: #fff;
font-weight: 400 !important;
font-family: var(--font-primary-bold), var(--font-generic) !important
}
.slider_inner p.bold {
font-size: 1.154rem;
color: #fff;
}
.main_slider .slider_bg {
position: absolute;
top: 0px;
left: 0px;
width: 36%;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%);
}
.slider .c_45 p span {
display: block
}
.glide__track {
width: 100%;
}
.glide__arrows {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: none
}
.similar_product_glide {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
padding-bottom: 20px
}
.similar_product_glide .glide__arrows {
display: block;
position: absolute;
bottom: -15px;
width: 160px;
}
.similar_product_glide .glide__arrow {
padding: 10px;
border: none;
border-radius: 100px;
margin: 0 5px;
width: 40px;
height: 40px;
}
.similar_product_glide .glide__arrow {
background-color: var(--color-background);
}
.similar_product_glide .glide__arrow:hover {
background-color: var(--color-primary);
}
.similar_product_glide .glide__arrow svg {
fill: #000;
}
.similar_product_glide .glide__arrow:hover svg {
fill: white;
}
#banner {
color: #fff;
overflow: hidden;
min-height: 600px;
background-color: var(--color-primary);
}
#banner.advice {
height: auto;
min-height: 35vh
}
.banner_desc {
padding: 50px 80px;
height: calc(100% - 100px)
}
.banner_desc.red_bg {
background-color: var(--color-accent)
}
#banner .banner_desc.red_bg h1 {
font-size: 6rem !important
}
.banner_desc a.red_btn {
margin-top: 40px
}
.dual_banner img {
margin-bottom: 20px;
}
#banner h1, #banner h2 {
font-size: 2.813rem !important;
display: block;
width: 50%
}
#banner.reverse {
color: var(--color-primary);
background-color: var(--color-secondary)
}
#banner.reverse .banner_desc p {
font-size: 1rem;
font-weight: 400
}
#banner.reverse a {
font-family: var(--font-primary-bold), var(--font-generic)
}
.inner_dropdown .flex .flex {
background-color: var(--color-background);
border: 1px solid #ddd;
margin-bottom: 10px
}
.inner_dropdown .flex .flex.negative, .inner_dropdown .flex .flex.sub_links {
background-color: #fff;
border: 0 solid #ddd;
margin-bottom: 10px
}
.inner_dropdown .flex .flex .c_20 {
background-color: #fff;
padding: 10px 0
}
.inner_dropdown .c_80 .inner {
margin: 0 10px 0 10px;
padding-top: 10px
}
.inner_dropdown .c_80 p a {
font-size: 1.154rem
}
.inner_dropdown .c_80 p {
padding: 0;
margin: 0
}
.inner_dropdown .c_33 {
margin-bottom: 15px
}
.inner_dropdown {
padding-bottom: 60px!important;
}
.banner_desc .flex div:last-of-type {
align-self: flex-end
}
.banner_desc .flex div:last-of-type {
margin-top: 50px
}
.banner_desc p {
font-family: var(--font-primary-bold), var(--font-generic);
font-size: 1.625rem
}
.banner_desc p a {
text-decoration: underline
}
.banner_desc p.small {
font-weight: 400;
font-size: 1.154rem;
display: block;
max-width: 60%
}
p.small a {
color: #fff
}
.banner_desc .flex {
padding: 0;
margin: 0;
list-style: none
}
.banner_desc .flex li {
width: 33.3333%
}
.banner_desc .flex li a {
color: #ddd;
padding: 5px 10px 5px 0;
display: block
}
.banner_desc .flex li a:hover {
color: #fff;
text-decoration: none
}
#banner h4 {
font-size: 2.25rem
}
#banner .c_55, #banner .feat_img, #banner .c_45 {
background-repeat: no-repeat;
background-size: cover;
background-position: center
}
#banner h1 a, #banner h2 a {
color: #fff
}
img.sale_icon {
position: absolute;
top: 0;
right: 0;
z-index: 999;
display: block;
width: 50px
}
.sale_nub {
position: absolute;
top: 10px;
left: 10px;
z-index: 99;
display: inline-block;
padding: 5px 15px !important;
background-color: var(--color-accent);
color: #fff !important;
text-transform: uppercase;
font-weight: 400 !important;
text-decoration: none !important;
font-size: .9231rem !important
}
.sale_nub.circle {
width: 40px;
height: 40px;
border-radius: 500px;
padding: 5px !important;
display: flex;
justify-content: center;
align-content: center;
align-items: center;
text-align: center !important;
}
.sale_nub.best_seller {
background-color: var(--color-secondary-light);
}
#sale_wrap {
background-color: #e70037;
color: #fff;
text-transform: uppercase;
text-align: center;
display: block
}
.sale {
max-width: 1160px;
padding: 10px 10px;
font-size: 1.231rem;
margin: 0 auto;
text-align: center
}
.sale span {
font-family: var(--font-primary-bold), var(--font-generic);
font-size: 1.231rem;
display: inline;
margin-right: 10px
}
.sale a {
font-family: var(--font-primary-bold), var(--font-generic);
color: #fff
}
.sale a:hover {
text-decoration: underline
}
#content_wrap {
padding: 10px 20px;
background-color: #fff
}
#content_wrap.descriptive {
padding: 30px 20px
}
.content {
padding: 30px 0
}
.inner_content {
padding-top: 10px
}
h2.sub {
color: #5f8ac1;
text-transform: uppercase;
font-weight: 500;
font-size: 1.077rem;
padding-top: 8px
}
.intro h2.sub {
margin-top: 10px;
}
.intro img {
display: block;
width: 100% !important;
}
h2.sub a {
color: #5f8ac1
}
h2.title {
display: block;
padding: 10px 0;
border: 1px solid #eee;
border-width: 1px 0;
font-size: 1.153rem;
font-weight: 500;
line-height: 150%;
margin-top: 10px;
margin-bottom: 10px
}
.figure_wrap {
display: block;
position: relative;
z-index: 1;
overflow: hidden;
width: 95%;
}
.figure_wrap.single {
height: 480px
}
.tp_wrapper {
text-align: center;
}
.tp_wrapper, .trustpilot-widget.side {
text-align: center;
margin-top: 25px;
display: inline-block;
padding: 15px 25px 15px 20px;
background-color: #fff;
border: 3px solid var(--color-background)
}
.tp_wrapper.dark {
background-color: var(--color-primary);
}
.tp_wrapper.carousel {
border-width: 3px 0px;
margin-bottom: 30px;
}
.tp_wrapper.block, .trustpilot-widget.side {
display: block
}
.tp_wrapper.block.ltd {
width: calc(95% - 51px);
}
.tp_wrapper img {
max-width: 30%;
display: inline-block;
margin-bottom: 10px;
}
#thumbs {
margin-top: 20px
}
.short {
padding-bottom: 10px
}
p.sub {
text-align: center;
font-size: 2.25rem;
background-image: url(/images/bg-dot.png);
background-repeat: repeat-x;
background-position: left 70%;
margin-bottom: 25px
}
p.sub span {
display: inline-block;
padding: 0 20px;
background-color: #fff
}
.full_width {
margin-top: 20px;
}
.full_width .c_75 {
width: 100%;
}
#product_wrap .img_wrap img, #product_wrap a.img_wrap img, .featured a img, .offerings .img_wrap img, .offerings a.img_wrap img {
display: block;
width: 100%
}
.title_wrap {
margin-top: 20px;
padding-right: 20%;
position: relative;
}
.title_wrap img {
width: 75px !important;
height: auto;
position: absolute;
right: 0px;
top: -20px;
z-index: -1;
border: 1px solid #ddd;
border-radius: 500px;
padding: 10px;
}
.title_wrap h1 {
font-size: 1.835rem;
line-height: 125%;
}
.product_review {
margin-top: 10px;
}
.products a.img_wrap {
border-bottom: 2px solid #7d9db9;
display: block;
overflow: hidden;
margin-bottom: 20px
}
.products .c_50 a.img_wrap {
margin-bottom: 0
}
.products a.img_wrap img {
display: block;
margin: 0
}
.product .c_40 {
text-align: right;
}
.c_33.product {
margin-bottom: 30px;
}
#product_wrap .img_wrap, #product_wrap a.img_wrap, .featured .img_wrap, .featured a.img_wrap, .offerings .img_wrap, .offerings a.img_wrap {
margin-bottom: 10px;
overflow: hidden;
display: block;
border-bottom: 2px solid #7d9db9
}
#product_wrap a.img_wrap, .featured a.img_wrap, .inner_dropdown a.img_wrap {
display: block;
padding-top: 75%;
position: relative;
height: 0
}
.featured a img {
border-bottom: 2px solid #7d9db9;
margin-bottom: 10px
}
inner_dropdown .singles a.img_wrap {
padding-top: 85%
}
#product_wrap a.img_wrap {
padding-top: 75%
}
.product.styles.c_16 a.btn {
padding: 10px 10px;
display: block;
font-size: 1rem;
text-align: center
}
.product h2 {
margin-bottom: 10px
}
#product_wrap a.img_wrap img, .featured a.img_wrap img, .inner_dropdown a.img_wrap img {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1
}
.best_sellers .inner {
margin-bottom: 30px
}
.best_sellers h2 {
margin-top: 10px
}
.featured .c_33 .flex div {
width: 100%
}
.featured h2 {
font-size: 1.25rem;
padding-top: 10px
}
.featured h3 a {
color: #7c9cb9;
text-transform: uppercase;
display: block;
margin-top: 8px
}
.featured p {
padding: 0;
margin: 10px 0 0 0
}
.featured a.btn {
margin-top: 10px
}
.featured h3 {
margin: 15px 0 !important
}
.negative {
margin: 0 -10px
}
.featured .inner {
margin: 0 10px
}
section {
background-color: #fff;
padding: 30px 0
}
#breadcrumbs a, .desc a, section a {
color: #5f8ac1
}
.desc a {
font-family: var(--font-primary-bold), var(--font-generic);
text-decoration: underline
}
.desc li {
margin-bottom: 10px
}
.desc h4, .desc h2 {
font-size: 1.385rem !important;
margin-top: 20px;
margin-bottom: 20px
}
.desc h2:first-of-type {
font-size: 2.25rem !important
}
.desc a.btn {
color: #fff !important;
text-decoration: none
}
.info_box {
margin-top: 0;
padding: 40px 30px 40px 0;
color: #fff
}
.info_box h4 {
font-size: 1.385rem !important
}
.info_box p a {
color: #C4DBE3;
font-family: var(--font-primary-bold), var(--font-generic)
}
.info_box p a.btn {
color: #fff;
text-decoration: none
}
.section a:hover {
text-decoration: none
}
.info_box p a:hover {
color: #fff;
text-decoration: none
}
ul.ranges {
list-style: none;
padding: 0;
margin: 40px 0 40px 0;
width: 75%
}
ul.ranges li {
width: 50%
}
ul.ranges a {
color: #fff;
display: block
}
.faq_wrap h3 img, ul.ranges a img {
display: inline-block;
vertical-align: bottom;
margin-bottom: 0;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out
}
.faq_wrap {
padding-top: 3px
}
.faq_wrap h3 img {
margin-bottom: 0
}
.faq_wrap h3.active img {
transform: rotate(90deg)
}
ul.ranges a:hover img {
margin-left: 10px
}
.rtb {
background-color: var(--color-secondary);
text-align: center;
padding: 60px 0
}
.rtb h6 {
font-size: 2.25rem;
margin-bottom: 75px
}
.rtb .tags {
margin-top: 30px
}
.rtb .flex div {
width: 25%;
padding-top: 70px;
background-repeat: no-repeat;
background-position: center top;
background-size: auto 50px
}
.rtb .flex div:nth-child(3) {
background-size: auto 40px;
background-position: center 5px
}
.cart_rtb .flex div:nth-child(3) {
background-position: left center;
background-size: 25px auto
}
.rtb .flex a {
color: var(--color-primary);
font-family: var(--font-secondary-bold), var(--font-generic);
font-size: 1.25rem;
text-decoration: none;
letter-spacing: -1px
}
.rtb .flex a:hover {
text-decoration: underline
}
.rtb .flex p {
padding: 0 10%
}
.footer, footer {
padding: 40px 0;
color: #fff
}
footer {
padding: 75px 0px;
}
footer a {
color: #fff;
}
footer ul {
padding: 0px;
margin: 0px;
list-style: none;
}
footer ul li {
margin-bottom: 11px;
}
footer .negative {
margin-left: -20px;
margin-right: -20px;
}
footer .negative .inner {
margin-left: 20px;
margin-right: 20px;
}
footer .copy {
margin-top: 30px;
padding-top: 30px;
border-top: 1px solid #777;
font-size: 0.9231rem;
}
.copy p {
padding: 0px;
margin: 0px;
}
.copy a {
font-weight: 400 !important;
font-family: var(--font-primary-bold), var(--font-generic) !important
}
.cards {
background-color: #f0f0f0;
padding: 25px 0px;
}
.cards img {
max-width: 80% !important;
}
.cards .flex {
align-content: center;
align-items: center;
}
.cards .c_50:nth-child(2) {
text-align: right;
}
.footer a {
color: #fff
}
.footer p {
padding: 0 0 10px 0;
margin: 0;
font-size: .875rem
}
footer p.telephone a {
font-size: 2.25rem;
color: #fff;
font-family: var(--font-secondary-bold), var(--font-generic)
}
.footer h6 {
font-size: 1.25rem;
margin-bottom: 13px;
margin-top: 40px
}
.footer ul {
padding: 0;
margin: 0;
list-style: none
}
.footer ul li {
line-height: 150%;
margin-bottom: 7px;
font-size: .875rem
}
.footer .c_25 {
padding-bottom: 10px
}
.footer p.centre {
margin-top: 40px;
text-align: center;
display: block;
padding: 0 20px
}
.fsc_wrap {
display: block;
}
.fsc_wrap img {
padding: 5px;
background-color: #fff;
border-radius: 10px;
margin-bottom: 10px;
}
.social_icons {
text-align: left;
}
.social_icons img {
filter: invert(100);
margin: 5px 10px 0px 0px;
}
.compare {
display: block;
text-align: left;
color: #fff;
padding: 35px 15px 35px calc(35% + 10px);
margin-bottom: 15px;
margin-top: 15px;
background: rgb(113, 123, 134);
background: radial-gradient(circle, rgba(113, 123, 134, 1) 0%, rgba(82, 87, 105, 1) 75%);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
position: relative;
z-index: 1;
}
.compare:before {
content: "";
position: absolute;
left: 0px;
top: 0px;
height: 100%;
z-index: 9;
background-image: url(https://images.door-commerce.co.uk/internal-bifold-doors/RGOUOMEX-21-457.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
clip-path: polygon(0 0, 85% 0, 100% 100%, 0% 100%);
width: 30%
}
.compare:hover {
background: radial-gradient(circle, rgba(113, 123, 134, 1) 0%, rgba(82, 87, 105, 1) 95%);
}
.compare p {
padding-top: 0px;
margin-top: 0px;
}
.compare strong {
font-size: 1.231rem;
}
.compare:hover {
text-decoration: none;
}
.compare span {
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
font-size: 1rem;
display: inline-block;
padding: 15px 30px;
background-color: #fff;
color: var(--color-primary);
margin-top: 10px;
font-family: var(--font-primary-bold), var(--font-generic);
}
.compare:hover span {
background-color: var(--color-background);
}
.jquery-modal {
z-index: 999999999999999 !important;
}
.jquery-modal .modal {
width: 85%; /* Set width to 75% */
max-width: 85%; /* Optional: limit max width */
padding: 20px;
border-radius: 8px;
background: white;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
position: relative; /* Enable positioning for close button */
z-index: 999999999999999 !important;
}
.table-container {
overflow-x: auto;
white-space: nowrap;
}
.table-container table {
border-collapse: collapse;
width: 100%;
font-size: 0.9231rem;
}
.table-container th, .table-container td {
border: 1px solid #ddd;
padding: 10px;
text-align: left;
width: 25%;
word-wrap: break-word;
white-space: normal;
}
.table-container strong {
font-weight: 700;
}
.table-container th {
background-color: var(--color-primary);
color: white;
position: -webkit-sticky;
position: sticky;
left: 0;
z-index: 1;
}
.table-container td:first-child, .table-container th:first-child {
position: -webkit-sticky;
position: sticky;
left: 0;
background-color: white;
z-index: 2;
}
.table-container {
position: relative;
z-index: 1;
height: 100%;
overflow: auto;
margin-top: 20px;
}
.table-container img {
display: inline-block;
}
.desktop_hide {
display: none
}
p.logos {
display: block;
padding: 10px 0;
background-color: #fff;
margin: 0;
text-align: center
}
.mobile_logos {
display: none
}
#breadcrumbs {
padding: 20px 0 0 0;
background-color: #fff;
font-size: .9231rem
}
#breadcrumbs ul {
list-style: none;
padding: 0;
margin: 0 auto;
max-width: 1160px
}
#breadcrumbs ul li {
display: inline-block
}
#breadcrumbs ul li a {
display: block;
margin-right: 15px
}
#breadcrumbs span {
position: relative;
z-index: 1;
display: inline-block;
margin-right: 5px
}
#breadcrumbs span:after {
content: ' ';
height: 0;
position: absolute;
width: 0;
border: 5px solid transparent;
border-left-color: var(--color-primary);
top: 6px;
right: 0;
z-index: 1
}
.offerings {
padding: 20px 0 10px 0
}
.offerings .inner {
margin: 0 10px
}
.offerings h2 {
font-size: 1.538rem;
line-height: 130%
}
.offerings p {
display: block;
padding-right: 20px
}
.block_ranges p {
padding-right: 0px;
}
.offerings h3 {
font-size: 1.231rem;
line-height: 130%;
display: block;
padding: 10px 0px 0px 0px;
}
.offerings ul {
padding: 0px;
margin: 10px 0px 10px 15px;
font-size: 0.8231rem;
}
.opts {
text-align: right;
margin-bottom: 15px;
position: relative;
z-index: 1
}
.opts select {
display: inline-block;
border-radius: 0;
border: 1px solid #7d9db9;
padding: 5px 10px;
margin-left: 10px
}
.sidebar {
padding-right: 20px;
margin-top: 0
}
.sidebar img.close {
display: none
}
.sidebar input[type=checkbox] {
display: none
}
p.sub_nav, p.more_title {
padding: 15px 20px;
margin: 0;
background-image: url(/images/icon-filter.png);
background-repeat: no-repeat;
background-position: 90% center;
background-size: auto 35%;
background-color: var(--color-background-dark);
color: #fff;
font-family: var(--font-secondary-bold), var(--font-generic);
font-size: 1.625rem
}
p.more_title {
margin: 0px 20px 10px 0px;
background-image: url(/images/icon-more-ranges.png);
}
.selector {
margin-top: 20px;
padding: 0 20px
}
.selector p {
padding: 5px 0;
margin: 0;
font-family: var(--font-secondary-bold), var(--font-generic);
font-size: 1.25rem;
display: block;
position: relative;
z-index: 1
}
.selector p:after {
content: "";
position: absolute;
right: 5px;
top: 4px;
z-index: 4;
width: 26px;
height: 26px;
background-image: url(/images/icon-arrow-right.png);
background-repeat: no-repeat;
background-position: right center;
background-size: 26px 26px;
display: block;
overflow: hidden;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out
}
.selector p.no_icon:after {
background: 0 0
}
.selector p:hover {
cursor: pointer
}
.selector p.active:after, .selector p:hover:after, .selector.active p:after {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg)
}
.selector ul {
padding: 0;
margin: 10px 0;
list-style: none;
display: none
}
.selector ul.closed {
display: none
}
.selector.active ul {
display: block
}
.selector.active ul.closed {
display: none
}
.selector ul .single_option, .selector ul a {
display: block;
padding: 5px 10px;
margin-bottom: 5px;
border-radius: 4px;
font-size: .8231rem;
background-color: var(--color-background);
background-position: 95% center
}
.selector ul a span {
font-size: .6923rem;
color: #aaa;
font-style: italic
}
.selector ul .single_option, .selector ul a.active, .selector ul a:hover {
background-color: #7d9db9;
color: #fff;
text-decoration: none;
background-image: url(/images/icon-cross.png);
background-repeat: no-repeat;
background-position: 95% center;
background-size: auto 75%
}
.selector ul a:hover {
background-image: url(/images/icon-plus.png)
}
.selector ul a.active:hover {
background-image: url(/images/icon-cross.png)
}
.selector ul .single_option {
color: var(--color-shadowbox)
}
#product_wrap .c_100 .inner {
margin: 0 10px 30px 10px
}
#product_wrap h2, #product_wrap h3, .groups h2, p.product_title {
line-height: 130%;
font-size: 1.077rem
}
p.product_title {
margin-bottom: 10px
}
#product_wrap h3, .groups h3 {
margin-top: 10px;
font-size: 1rem
}
#product_wrap h3 a, .groups h3 a {
color: #7d9db9;
text-transform: uppercase
}
a.brand_logo {
display: flex;
justify-content: center;
align-items: center;
align-content: center;
border: 1px solid #ddd;
margin: 20px 0
}
a.brand_logo img {
max-width: 60%
}
.product_Wrap .c_33 .c_40 {
display: flex;
align-items: center;
align-content: center;
}
#product_wrap .c_33 span:not(.brand) div:not(.yotpo-widget-instance) {
color: #5f8ac1;
display: inline-block;
padding: 0 10px;
font-size: 1.077rem;
text-decoration: underline
}
#product_wrap .c_33 span.rated {
font-size: 0.9231rem;
text-decoration: none;
padding: 0px;
text-transform: uppercase;
display: flex;
align-items: center;
align-content: center;
justify-content: flex-end;
}
#product_wrap .c_33 span.rated span {
font-size: 1.154rem;
text-decoration: none;
padding: 0px;
}
#product_wrap .c_33 span.small {
font-size: .8231rem;
text-transform: uppercase;
text-decoration: none;
padding: 0
}
#product_wrap .c_33 span.width, .ext_bespoke .width {
font-size: .7231rem;
text-decoration: none;
padding: 2px 0 2px 25px;
background-image: url(https://images.door-commerce.co.uk/general/icon-width.png);
background-repeat: no-repeat;
background-size: 20px auto;
background-position: left center
}
#product_wrap .c_33 span.width:hover {
text-decoration: none
}
#product_wrap .c_33 h2 a span {
padding: 0;
text-decoration: none;
font-size: .9231rem;
text-transform: uppercase;
font-weight: 500
}
#product_wrap .c_33 span:hover {
text-decoration: underline;
cursor: pointer
}
#product_wrap .c_33.product .flex, #product_wrap .c_33.product .flex .c_40, #product_wrap .c_33.product .flex .c_60 {
align-content: stretch;
align-items: center;
justify-content: center;
height: 100%
}
#product_wrap .product .inner {
position: relative;
z-index: 1
}
#product_wrap {
margin-bottom: 25px
}
.c_75 .product .inner {
border-bottom: 1px solid #ddd;
margin-bottom: 10px;
padding-bottom: 20px
}
.c_100 .product .inner {
border-bottom: 1px solid #ddd;
margin-bottom: 10px;
padding-bottom: 20px
}
.price_action {
background-color: var(--color-background)
}
#product_wrap .product .inner .price_action .inner {
margin: 0;
border: none;
padding: 0 0;
text-align: center;
font-size: .9231rem
}
#product_wrap .product .inner .price_action a.btn {
display: block;
text-align: center;
font-size: 1rem
}
.price_action .c_45 a.red_btn {
margin-top: 0
}
.c_75 .wrapper img, .related_items .wrapper img {
display: block;
margin-bottom: 15px;
border-bottom: 2px solid #7d9db9
}
.c_75 .wrapper img.icon {
display: inline-block;
border: none;
margin: 0
}
.c_100 .wrapper img, .related_items .wrapper img {
display: block;
margin-bottom: 15px;
border-bottom: 2px solid #7d9db9
}
.c_100 .wrapper img.icon {
display: inline-block;
border: none;
margin: 0
}
.product_buttons {
align-content: center;
align-items: center;
margin-top: 15px
}
.wrapper {
position: relative;
z-index: 1
}
.groups {
margin-top: 20px
}
.groups .inner {
margin-bottom: 50px
}
.landing .inner .inner {
margin-bottom: 0
}
.groups p.detail, .product p.detail, .styles p.detail, .ext_bespoke p.detail {
font-size: .7231rem;
padding: 0;
margin: 0 0 10px 0;
text-transform: uppercase
}
.group_header {
background-color: var(--color-primary);
color: #fff;
margin-bottom: 25px
}
.group_header a {
color: #fff;
font-weight: 700
}
.group_header .inner {
padding: 40px 50px
}
.landing .flex .c_50 {
background-color: #eee
}
.landing .c_50 .inner .inner {
padding: 20px 10px 10px 10px
}
.landing .c_50 .inner .inner a.btn {
font-size: 1rem
}
.group_header .c_33, .group_header .c_50 {
background-position: center;
background-size: cover
}
.detail.wide h6 {
font-size: 1rem;
margin-top: 20px
}
.detail .heading {
font-weight: 400 !important;
font-family: var(--font-primary-bold), var(--font-generic) !important;
text-transform: uppercase;
padding-bottom: 10px !important;
}
.upsell {
margin-top: 30px;
border: 5px solid #eee;
padding: 20px
}
.upsell h4 {
font-size: 1.538rem !important
}
.upsell img {
width: 90% !important
}
.upsell a {
background-color: var(--color-accent)
}
.upsell a:hover {
background-color: var(--color-primary) !important;
color: #fff !important
}
.upsell .flex {
align-content: center;
align-items: center
}
.upsell_wrap .box {
padding: 10px
}
.upsell_wrap img {
width: 100%;
display: block
}
.upsell_wrap .flex {
margin-top: 30px
}
.upsell_wrap .flex .inner {
background-color: var(--color-background);
margin-bottom: 20px
}
.upsell_wrap .flex .inner .flex {
margin: 0
}
.upsell_wrap h4 {
font-size: 1.231rem !important;
margin-top: 20px
}
.upsell_wrap .flex p {
padding: 0 0 10px 0;
margin: 0;
font-size: .9231rem
}
.upsell_wrap h2 {
font-size: 1.835rem !important;
margin-bottom: 10px
}
.subtitle {
display: block;
text-transform: uppercase;
font-size: 1.538rem;
text-align: center;
margin-bottom: 20px;
margin-top: 20px;
position: relative;
z-index: 1
}
.subtitle:before {
content: "";
position: absolute;
top: 50%;
height: 1px;
background-color: var(--color-border);
left: 0;
z-index: 1;
width: 100%
}
.subtitle span {
display: inline-block;
padding: 0 20px;
background-color: #fff;
position: relative;
z-index: 2
}
.sizing {
position: absolute;
top: 0;
left: 0;
height: 100%;
z-index: 999;
width: 100%;
background-color: var(--color-background);
display: none
}
.inner_sizing {
overflow: auto;
-webkit-overflow-scrolling: touch;
height: 100%
}
.sizing:after {
content: ' ';
height: 0;
position: absolute;
width: 0;
border: 10px solid transparent;
border-top-color: var(--color-background);
bottom: -18px;
right: 22%;
z-index: 1
}
.sizing ul {
padding: 15px 0 0 0;
margin: 0;
list-style: none
}
.sizing ul a {
display: block;
padding: 4px 20px
}
.sizing ul a:hover {
background-color: #7d9db9;
color: #fff;
text-decoration: none
}
ul.further {
padding: 20px 0px 20px 0px;
margin: 0px 20px 20px 0px;
list-style: none;
background-color: #f0f0f0;
}
ul.further a {
display: block;
padding: 5px 40px 5px 10px;
background-color: #fff;
color: #333;
font-size: 0.9231rem;
border: none;
border-radius:5px;
margin: 5px 20px;
background-image: url(https://images.door-commerce.co.uk/general/icon-arrow-right-black.png);
background-repeat: no-repeat;
background-position: 95% center;
background-size: auto 12px;
}
ul.further a:hover {
color: #fff;
text-decoration: none;
background-color: var(--color-background-dark);
background-image: url(https://images.door-commerce.co.uk/general/express/icon-arrow-forward.png);
}
ul.further li {
margin-bottom: 0px;
position: relative;
z-index: 1;
}
ul.further span {
position: absolute;
left: 0px;
top: 5px;
z-index: 1;
display: none;
}
.price_slider, .price_slider .bar {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px
}
.price_slider {
cursor: hand;
cursor: pointer;
border-radius: 10px;
position: relative;
width: calc(100% - 5px);
height: 10px;
background: #b2c2d6;
margin-top: 10px;
margin-bottom: 10px
}
.price_slider .left_button.gripHighlighted, .price_slider .right_button.gripHighlighted {
background: var(--color-accent)
}
.price_slider .left_button, .price_slider .right_button {
position: absolute;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
width: 11px;
height: 11px;
background: #fff;
border: 1px solid var(--color-accent);
top: -2px
}
.price_slider .bar {
border-radius: 10px;
position: absolute;
background: var(--color-accent);
width: calc(100% - 5px);
height: 10px;
top: 0
}
.price_slider .highlightPanel {
-ms-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
position: absolute;
background: #e87722;
height: 10px;
top: 0
}
.price_box {
vertical-align: middle;
padding: 5px 5%;
border: 1px solid #b2c2d6;
width: 85%;
text-align: center;
font-weight: 500
}
.price_from {
margin-right: 5%
}
.price_to {
margin-left: 5%
}
.price_wrapper .flex {
text-align: center;
align-content: center;
align-items: center;
justify-content: center;
width: calc(100% - 10px)
}
.info_msg {
color: #fff;
display: block;
border-radius: 50px;
background-color: var(--color-accent);
background-image: url(https://www.expressdoorsdirect.co.uk/images/icon-info.png);
background-repeat: no-repeat;
background-size: 30px 30px;
padding: 10px 60px !important;
background-position: 10px center;
margin-top: 30px;
font-size: 0.9231rem;
}
.info_msg a {
color: #fff;
font-weight: 700;
}
.content h4 {
font-size: 2.25rem;
line-height: 130%
}
.article p:first-of-type, .desc p:first-of-type {
font-family: var(--font-primary-bold), var(--font-generic);
font-size: 1.25rem
}
.article .enhanced p:first-of-type {
font-family: OpenSansRegular, var(--font-generic), Arial !important;
font-size: 1rem;
}
.article a {
font-family: var(--font-primary-bold), var(--font-generic)
}
.advice {
overflow: hidden
}
.advice ul {
padding: 0;
margin: 20px 0;
list-style: none
}
.advice a {
color: #fff;
display: block;
padding: 4px 0 4px 30px;
background-image: url(/images/icon-question.png);
background-repeat: no-repeat;
background-size: auto 50%;
background-position: left center;
text-decoration: underline
}
#searchables {
position: fixed;
top: 0;
left: 0;
z-index: 9999999;
background-color: #fff;
width: 100%;
height: 100vh;
display: none;
overflow: auto;
-webkit-overflow-scrolling: touch
}
#searchables .sidebar {
padding-right: 0
}
.opts .filter_btn {
display: none
}
#banner.inner_banner {
background-color: #fff;
color: var(--color-primary)
}
#banner.inner_banner a {
color: var(--color-primary) !important
}
#banner.inner_banner h4 {
color: var(--color-primary)
}
#banner.inner_banner .flex {
align-items: flex-start !important;
height: auto !important
}
#banner.inner_banner .flex a {
padding: 5px 0 !important
}
.style_intro {
padding: 15px 0 0 0;
max-width: 530px
}
.article {
padding-right: 30px;
padding-top: 20px
}
.c_25 .advice {
background-color: var(--color-primary)
}
.c_25 .advice li a {
background-size: 15px auto;
background-position: left 8px
}
img.article_img {
max-width: 100%;
display: block;
margin-bottom: 20px
}
.prod_desc {
margin-top: 20px
}
.detail h5, .prod_desc h6, .bespoke h6 {
font-size: 1.625rem
}
.bespoke h6 {
padding-top: 20px;
}
.bespoke .c_60 h6 {
border-top: 1px solid #ddd;
margin-top: 20px;
}
.bespoke .c_60 h6:nth-child(1) {
margin-top: 0px;
border: none;
}
.prod_desc h6 {
margin-bottom: 10px
}
.prod_desc .desc {
padding-right: 40px
}
.prod_desc .desc p:first-of-type {
font-weight: 400;
font-size: 1rem
}
.spec {
margin-top: 20px;
margin-bottom: 20px;
}
.spec div {
padding: 5px 0
}
.spec .c_35 {
width: 37.5%;
}
.spec .c_65 {
width: 62.5%;
}
.detail {
margin-top: 20px
}
.customer_review {
position: absolute;
bottom: 0px;
z-index: 99;
left: 0px;
width: 100%;
display: block;
color: #333;
font-weight: 500;
font-size: 0.9231rem;
}
.customer_review span {
background-color: #fff;
display: inline-block;
padding: 8px 10px;
border-radius: 5px 5px 0px 0px;
}
.customer_review span img {
height: 20px !important;
width: auto !important;
display: inline-block !important;
margin-right: 6px;
margin-bottom: -2px;
}
#image {
margin: 0px 20px 0px 0px;
}
#product_image {
margin-right: 15%;
margin-top: 30px;
border-bottom: 2px solid #7d9db9;
position: relative;
z-index: 1;
width: 95%;
display: block;
padding-top: 75%;
height: 0;
overflow: visible
}
.c_95 {
width: 95%
}
.featured_lifestyle {
background-color: var(--color-primary);
position: relative;
z-index: 1;
display: block;
overflow: hidden
}
.featured_lifestyle .c_50 {
background-repeat: no-repeat;
background-position: center;
background-size: cover
}
.featured_lifestyle a {
color: #fff
}
.featured_lifestyle .inner {
padding: 0
}
.featured_lifestyle img, img.lifestyle {
display: block;
width: 100%
}
.featured_lifestyle .max {
padding: 0
}
.featured_lifestyle img.lifestyle {
display: block;
width: 100%
}
.single_zoom {
margin-right: 15%;
margin-top: 0px;
/* border-bottom: 2px solid #7d9db9; */
position: relative;
z-index: 1;
width: 95%;
display: block;
height: 50vh;
max-height: 600px
}
img.fsc {
float: right;
margin: 0px 0px 15px 15px;
width: 20% !important;
max-width: auto !important;
}
.img_bespoke {
height: 803px;
border-bottom: 1px solid var(--color-border);
margin: 20px 0px 0px 0px;
text-align: center;
background-color: var(--color-background);
display: block;
overflow: hidden;
padding-top: 40px;
}
.ext_img_bespoke {
height: auto;
padding: 10px;
}
.img_bespoke img {
border: 15px solid var(--color-background);
border-width: 15px 15px 0px 15px;
width: auto !important;
max-width: 100% !important;
margin: 0px auto;
}
.ext_img_bespoke img {
border: none !important;
display: block;
}
.ext_bespoke .c_33 {
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.ext_bespoke {
-moz-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
}
.ext_bespoke .inner {
padding: 40px;
border: 2px solid #ddd;
border-width: 1px 1px 1px 0px;
}
.ext_bespoke h2 a {
font-size: 1.692rem;
}
.ext_bespoke h3 {
font-size: 1.077rem !important;
text-transform: uppercase;
color: #5f8ac1;
}
.bespoke_opts {
padding: 0px 0px 20px 30px;
}
.bespoke_opts h2 {
margin-bottom: 45px;
display: block;
}
.bespoke_opts .qty_wrap {
margin-top: 20px;
}
ul.disclaimers li {
margin-bottom: 10px;
}
.enquire {
padding: 30px;
color: #fff;
background-color: var(--color-primary);
background-image: url(https://images.door-commerce.co.uk/general/icon-enquiry.png);
background-repeat: no-repeat;
background-position: 90% 20px;
background-size: 60px auto;
}
h6.nub {
padding: 20px 30px;
color: #fff;
background-color: var(--color-primary);
font-size: 1.231rem;
margin-top: 10px;
display: block;
line-height: 125%;
}
.code, .sku_price, p.product_code {
display: none;
}
.opt_wrap {
margin-top: 20px;
}
.opt_wrap p {
display: block;
padding: 9px 20px;
text-transform: uppercase;
margin: 0px;
border: 1px solid var(--color-border);
border-width: 1px 1px 0px 1px;
background-color: var(--color-background);
font-size: 0.9231rem;
font-family: var(--font-primary-bold), var(--font-generic) !important;
position: relative;
z-index: 1;
}
.options p {
border: 1px solid var(--color-border);
border-width: 0px 1px 1px 1px;
padding: 6px 20px;
text-align: center;
font-family: OpenSansRegular, var(--font-generic), Arial;
}
.opt_wrap p span {
position: absolute;
right: 0px;
top: 0px;
height: 100%;
z-index: 2;
background-color: var(--color-primary);
color: #fff;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
width: 30px;
}
.opt_wrap select {
width: 100%;
border: 1px solid var(--color-border);
padding: 8px 20px;
font-size: 0.9231rem;
background-color: #fff;
margin: 0px 0px;
}
.options {
border-top: 1px solid var(--color-border);
padding-top: 5px;
}
.options img {
display: block;
width: calc(100% - 12px);
border: 1px solid #ddd;
padding: 5px;
}
.options img:hover, .options img.active {
border: 1px solid var(--color-primary);
}
.options img:hover:hover {
cursor: pointer;
}
.options .inner {
margin: 5px;
}
.options .negative {
margin-left: -5px !important;
margin-right: -5px !important;
}
.sub_option {
padding-bottom: 20px;
}
.sub_option h5 {
display: block;
padding: 10px 40px 10px 20px;
border: 1px solid var(--color-border);
border-width: 1px 0px;
font-size: 0.9231rem;
text-transform: uppercase;
background-color: var(--color-primary);
color: #fff;
background-repeat: no-repeat;
background-image: url(https://images.door-commerce.co.uk/general/icon-down-arrow-white.png);
background-position: 97.5% center;
background-size: auto 25%;
font-family: OpenSansRegular, var(--font-primary-bold), var(--font-generic) !important;
line-height: 125%;
}
.sub_option h5:hover {
background-color: var(--color-accent);
cursor: pointer;
}
.bespoke .note, .options span {
font-style: italic;
text-align: center;
display: block;
padding: 17px 20px;
font-size: 0.8231rem;
border-bottom: 1px solid var(--color-border);
}
.bespoke .c_60 p a {
font-family: var(--font-primary-bold), var(--font-generic) !important;
color: #5f8ac1;
}
.faq .question {
position: relative;
z-index: 1;
padding-left: 50px;
}
.faq .question:before {
content: "";
position: absolute;
top: 50px;
left: 15px;
width: 1px;
background-color: var(--color-border);
height: calc(100% - 50px);
z-index: 99;
}
.faq .question img {
position: absolute;
left: 0px;
top: -5px;
width: 30px;
z-index: 99;
filter: invert(100);
}
.faq .question img {
filter: invert(0);
}
.faq h3 {
display: block;
margin-top: 40px;
}
.note p {
padding: 0px 0px 0px 0px;
margin: 0px;
}
.note img {
width: auto !important;
filter: invert(100);
}
.bespoke .grey_bg, img.bespoke_lifestyle {
margin-left: 30px;
}
.bespoke .grey_bg ul {
padding-bottom: 25px;
}
img.bespoke_lifestyle {
width: calc(100% - 30px) !important;
display: block;
}
#product_image img {
display: block;
margin: 0 !important;
position: absolute;
top: 0;
left: 0;
z-index: 1
}
.flex #product_image {
margin-right: 0
}
.wide #product_image {
margin-top: 10px
}
.thumbs {
margin-top: 10px !important
}
.thumbs img {
max-width: 90%
}
.thumbs img:hover {
opacity: .8;
cursor: pointer
}
img.main_img {
max-width: 100%;
display: block
}
.detail h5 {
display: block;
z-index: 1;
position: relative
}
.units {
position: absolute;
right: 6%;
top: 0;
font-size: 1rem;
font-family: OpenSansRegular, var(--font-generic), Arial;
z-index: 2;
font-weight: 400;
display: none
}
.units span.active, .units span:hover {
text-decoration: underline
}
.disclaimer, .stat, .tiny {
font-size: .7231rem;
font-style: italic;
font-weight: 300;
color: #999
}
.detail .flex {
margin-top: 20px
}
.detail .flex div {
padding: 4px 0;
position: relative;
z-index: 1;
font-size: .8731rem
}
.detail .flex div.c_100 {
padding-top: 0
}
.detail .flex img {
margin-left: 5px
}
.detail input {
width: calc(75% - 20px);
text-align: center;
padding: 1px 10px
}
.detail .flex .flex {
margin-top: 0
}
.detail .flex div div {
padding: 0 0
}
.detail .flex div div a {
display: inline-block;
position: relative;
z-index: 1
}
.detail .flex .flex img {
margin-left: 0
}
.detail input[name=submit], .bespoke_opts input[name=submit] {
padding: 10px 20px;
font-size: 1.358rem;
font-family: var(--font-primary-bold), var(--font-generic);
color: #fff;
width: auto;
border: none;
display: inline-block
}
.detail .single input[name="submit"] {
font-size: 1.077rem;
}
form[name=buy] .red {
color: var(--color-accent);
display: inline-block;
margin-left: 10px;
text-decoration: line-through
}
.right {
text-align: right !important
}
.right a.btn {
margin-right: 0;
margin-top: 50px
}
.wide h2 {
margin-top: 30px
}
p.price {
font-size: 1.692rem;
margin-top: 20px
}
.was {
display: inline-block;
font-size: 1.385rem;
margin-left: 15px;
color: var(--color-accent)
}
.was.bigger {
margin-left: 0px;
font-size: 2rem;
margin-right: 15px;
}
.smaller {
font-size: 1.231rem;
}
p.large.red {
color: var(--color-accent);
font-size: 1.538rem;
font-family: var(--font-secondary-bold), var(--font-generic)
}
ul.additionals {
padding: 20px 0;
margin: 0;
list-style: none
}
ul.additionals a {
color: #7d9db9
}
ul.additionals li {
margin-bottom: 6px
}
.similar .c_33 {
width: 25%
}
.similar .inner {
margin: 10px
}
.top_margin {
margin-top: 40px
}
.wide .c_100 #product_image {
max-width: 90%
}
span.zoom {
display: inline-block;
position: relative;
z-index: 5
}
span.zoom:after {
content: '';
display: block;
width: 33px;
height: 33px;
position: absolute;
top: 0;
right: 0;
background: url(/images/icon-magnify-2.png);
background-size: 100% 100%;
z-index: 9999999
}
.styles span.zoom:after {
background: url(/images/icon-magnify-3.png);
background-size: 25px 25px;
background-repeat: no-repeat;
background-position: center;
top: 50%;
right: 50%;
margin-right: -16.5px;
margin-top: -16.5px
}
span.zoom img {
display: block
}
.zoomImg {
z-index: 999999999 !important
}
span.zoom img::selection {
background-color: transparent
}
.logos {
margin-bottom: 20px;
justify-content: center;
}
.logos img {
height: auto !important;
padding: 5px;
border: 1px solid var(--color-border);
border-radius: 500px;
width: 80%;
margin: 0px auto 20px auto;
display: block;
}
.logos img:hover {
border: 1px solid #5f8ac1;
}
.logos a:hover {
text-decoration: none;
color: #5f8ac1;
}
.logos .info h2 a {
font-size: 1.231rem;
display: block;
text-align: center;
color: var(--color-primary);
}
.error h2 {
font-size: 2rem;
margin: 15px 0
}
.call_tag a, .call_tag span, .error a, .error span, .faq h2 span, p.email_big a {
color: var(--color-accent)
}
.error span {
text-transform: uppercase;
font-family: var(--font-primary-bold), var(--font-generic)
}
img.promo_img {
display: block;
width: calc(100% - 20px);
margin-top: 30px
}
img.promo_img.wide_promo {
width: 100%
}
.descriptive a {
font-family: var(--font-primary-bold), var(--font-generic);
color: #5f8ac1;
text-decoration: underline
}
.descriptive ul, .faq ul {
padding: 15px 0;
margin: 0;
list-style: none
}
.faq ul {
padding: 30px 0
}
.descriptive li, .faq li {
margin-bottom: 8px;
width: 100% !important
}
.descriptive li a, .faq li a {
font-weight: 400;
color: var(--color-primary);
text-decoration: none
}
.descriptive .inner {
padding-left: 30px
}
.descriptive p {
padding-right: 30px
}
.sold {
margin-top: 25px;
border: 3px solid var(--color-primary);
margin-bottom: 30px;
overflow: hidden
}
.sold p.large {
font-size: 1.077rem
}
.sold .c_80 {
background-color: var(--color-primary);
color: #fff
}
.sold .inner {
padding: 20px
}
.sold a {
color: #fff
}
.buy_actions a, .buy_actions input {
display: block;
width: 35px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
align-content: center;
border: 1px solid #ddd;
padding: 0;
text-align: center;
font-size: 1rem
}
.buy_actions a {
background-color: #ddd
}
a.small {
font-size: 0.8231rem;
display: block;
width: auto !important;
text-transform: uppercase;
color: #aaa;
}
.splide__container {
box-sizing: border-box;
position: relative
}
.splide__list {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
display: -ms-flexbox;
display: flex;
height: 100%;
margin: 0 !important;
padding: 0 !important;
transform-style: preserve-3d
}
.splide.is-initialized:not(.is-active) .splide__list {
display: block
}
.splide__pagination {
-ms-flex-align: center;
align-items: center;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: center;
justify-content: center;
margin: 0;
pointer-events: none
}
.splide__pagination li {
display: inline-block;
line-height: 1;
list-style-type: none;
margin: 0;
pointer-events: auto
}
.splide__progress__bar {
width: 0
}
.splide {
outline: none;
position: relative;
visibility: hidden
}
.splide.is-initialized, .splide.is-rendered {
visibility: visible
}
.splide__slide {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
box-sizing: border-box;
-ms-flex-negative: 0;
flex-shrink: 0;
list-style-type: none !important;
margin: 0;
outline: none;
position: relative
}
.splide__slide img {
vertical-align: bottom
}
.splide__slider {
position: relative
}
.splide__spinner {
animation: splide-loading 1s linear infinite;
border: 2px solid #999;
border-left-color: transparent;
border-radius: 50%;
bottom: 0;
contain: strict;
display: inline-block;
height: 20px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
width: 20px
}
.splide__track {
overflow: hidden;
position: relative;
z-index: 0
}
@keyframes splide-loading {
0% {
transform: rotate(0)
}
to {
transform: rotate(1turn)
}
}
.my-slider-progress {
background: var(--color-background);
width: 100%;
}
.my-slider-progress-bar {
background: var(--color-primary);
height: 1px;
transition: width 400ms ease;
width: 0
}
.related_items .c_33 {
width: 100% !important
}
.share button {
width: 40px;
border: none;
padding: 10px 8px 10px 8px;
overflow: hidden;
position: absolute;
right: 0px;
top: 0px;
z-index: 10;
height: 100%;
}
.share img {
display: block;
width: 100%;
}
.share span {
background-color: var(--color-primary);
color: #fff;
font-weight: 700;
width: 220px;
text-align: center;
padding: 12px 0px;
display: flex;
align-items: center;
justify-content: center;
background-image: url(https://images.door-commerce.co.uk/general/icon-share.png);
background-repeat: no-repeat;
background-size: auto 20px;
background-position: 10px center;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
/* Let's enforce some hardware acceleration */
-webkit-transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
border-radius: 4px;
}
.share span:hover {
cursor: pointer;
background-color: #676E85;
}
.share input {
border: none;
padding: 10px 10px 8px 10px;
width: calc(100% - 60px);
text-align: center;
font-style: italic;
font-size: 0.823rem;
}
.share {
border: 1px solid #004559;
border-radius: 5px;
width: 220px;
margin-top: 20px;
position: relative;
z-index: 1;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
/* Let's enforce some hardware acceleration */
-webkit-transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
padding: 0px;
}
.share.active {
width: 95%;
}
.tooltip {
position: absolute;
width: 60px;
padding: 5px 10px;
font-size: 14px;
text-align: center;
color: #fff;
;
background: rgb(0, 0, 0);
border: 4px solid rgb(0, 0, 0);
border-radius: 5px;
text-shadow: rgba(0, 0, 0, 0.1) 1px 1px 1px;
box-shadow: rgba(0, 0, 0, 0.1) 1px 1px 2px 0px;
right: 0px;
top: -45px;
display: none;
}
.share .flex {
width: 0;
overflow: hidden;
position: absolute;
top: 0px;
left: 220px;
z-index: 99;
display: flex;
align-items: center;
height: 100%;
}
.share.active .flex {
width: calc(100% - 220px);
}
.tooltip:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-width: 10px;
border-style: solid;
border-color: #000 transparent transparent transparent;
top: 30px;
left: 30px;
}
.share button {
border-radius: 0px 5px 5px 0px;
}
/* .express_delivery {
background-color: #f0f0f0;
padding:30px;
width: calc(95% - 60px);
}
.express_delivery h5 {
font-weight: 400;
font-family: var(--font-secondary-bold), var(--font-generic);
line-height: 100%;
font-size: 1.154rem;
}
.express_delivery .inner {
padding: 10px!important;
}
.express_delivery ul {
padding:0px 0px 0px 15px;
}
.express_delivery li {
margin-bottom: 8px;
}
.express_delivery select {
margin-top: 15px;
background-color: #fff;
display: block;
border:1px solid var(--color-border);
width: calc(100% - 2px);
padding:10px
} */
.full_width .c_33 {
width: 25%;
}
.footer_info {
width: 100%;
display: inline-grid;
grid-template-columns: 2fr 2fr;
}
.menu-title-section {
font-size: 1.3rem;
margin-left: 5px;
padding: 10px 0 5px 0;
width: 100%;
}
/* REVIEW PAGE */
.trustpilot-testimonials {
display: block
}
/* REVIEW PAGE */
/* PRODUCT PAGE */
section.grey_bg, .grey_bg p.sub span {
background-color: #f0f0f0;
}
.grey_bg .wide_icons {
margin-top: 0px;
}
.grey_bg .rtb_icons {
justify-content: center;
}
.grey_bg .wide_icons .inner {
background-color: #fff;
padding: 20px 10px !important;
}
.fsc_thumbnail {
position: absolute;
top: 0px;
left: 0px;
z-index: 2;
}
.c_30, .mini_reviews {
position: relative;
z-index: 5;
}
.mini_reviews {
margin-top: 25px!important;
}
.sale_thumbnail {
font-size: 0.9rem;
position: absolute;
top: 0px;
right: 0px;
z-index: 2;
background-color: var(--color-accent);
padding: 7px 15px;
border-radius: 25px;
color: white;
text-transform: uppercase;
}
.range_status {
display: flex;
flex-direction: row;
margin-top: 20px;
height: 40px;
align-content: center;
align-items: center;
}
.range_status .c_40 p {
padding: 0px;
margin: 0px;
font-family: var(--font-primary-bold), Helvetica;
font-size: 1.5rem;
color: var(--color-secondary-dark);
}
.range_status .c_40 {
width: 50% !important;
border: none !important;
}
.range_status .c_60 {
width: 50% !important;
text-align: right;
}
.range_status .c_60 p {
position: relative;
width: fit-content;
border: 1px solid var(--color-border);
border-radius: 20px;
/*background-color: var(--color-background);*/
float: right;
padding: 5px 10px;
font-size: 0.8231rem;
}
.range_status .red {
color: var(--color-accent);
}
.range_status .was {
font-size: var(--font-size-body);
text-decoration: line-through;
margin-left: 0;
color: var(--color-secondary-dark);
}
.product_form .opt_wrap {
margin-top: 5px;
}
.product_select select {
border: 1px solid var(--color-border);
background-color: #f0f0f0;
padding: 15px 15px;
}
.product_form .flex {
margin-top: 5px;
}
.product_form .big_wrap input[type=text] {
width: 98%;
padding-bottom: 10px;
border: 1px solid var(--color-border);
}
.product_form input[name=submit] {
width: 100%;
}
.handle_block {
display: flex;
flex-direction: row;
align-items: center;
}
.handle_block div:last-child {
background-color: var(--color-background);
align-self: stretch;
align-content: center;
}
.handle_block .price {
text-align: left;
padding-left: 15px !important;
}
.product_delivery {
border-top: solid 1px var(--color-border);
border-bottom: solid 1px var(--color-border);
margin-top: 30px;
padding: 15px 0px;
display: block;
}
.product_delivery ul {
padding: 0px;
margin: 0px;
list-style: none;
}
.product_delivery ul li {
display: flex;
align-content: center;
align-items: center;
margin: 2px 0px;
}
.product_delivery div {
display: flex;
flex-direction: row;
height: 36px;
}
.product_delivery li img {
margin-right: 15px;
}
.product_delivery li a {
text-decoration: underline;
padding-left: 5px;
}
#sirv-image-loaded {
position: relative;
z-index: 1;
}
.query_contact {
padding: 20px 0px;
}
.query_contact p:nth-child(1) {
color: var(--color-secondary-dark);
font-size: 1.231rem;
font-family: var(--font-primary-bold);
padding: 0px;
margin: 0px;
}
.query_contact .flex a {
display: flex;
align-content: center;
align-items: center;
text-align: center;
font-size: 1.2rem;
background-color: var(--color-secondary-dark);
color: #fff;
padding: 10px 20px;
width: calc(100% - 40px);
border-radius: 0px;
font-family: var(--font-primary-bold);
}
.query_contact .flex a img {
filter: invert(100);
margin-bottom: -3px;
margin-right: 12px;
}
.product_content {
flex-wrap: wrap-reverse !important;
}
.detail .c_50 {
position: relative;
z-index: 1;
}
.help-advice-accordion {
background-color: white;
}
.help-advice-accordion #banner {
background-color: var(--color-primary);
}
.help-advice-accordion summary {
margin: 20px 0 15px 0;
cursor: auto;
cursor: pointer;
}
.help-advice-accordion summary a {
display: inline-block;
font-size: 1.538rem !important;
font-family: var(--font-primary-bold);
}
.help-advice-accordion summary a::after {
position: absolute;
content: " â–¼";
padding-left :5px;
padding-top :5px;
font-size: 1rem;
}
.help-advice-accordion[open] summary a::after, .help-advice-accordion summary a.active::after {
content: ' â–º';
}
.help-advice-accordion summary p {
margin: 0;
}
.help-advice-content {
padding: 10px;
border: 1px solid #ccc;
border-top: none;
}
details > summary:first-of-type {
list-style-type: none;
}
.further_advice {
display: none;
}
/* Container for tooltip */
.spec-tooltip {
position: relative;
display: inline-block;
cursor: pointer;
}
.spec-tooltip img {
height: 17px !important;
width: 17px !important;
margin-left: 5px;
margin-bottom: -2px;
}
/* Tooltip text */
.spec-tooltip .spec-tooltiptext {
visibility: hidden;
width: 180px;
background-color: #333;
color: #fff;
text-align: center;
padding: 8px;
border-radius: 5px;
font-size: 0.9375rem;
/* Positioning */
position: absolute;
top: 0; /* Top of tooltip aligns with top of button */
left: 140%; /* Just to the right of the button */
/* Fade in */
opacity: 0;
transition: opacity 0.3s;
z-index: 99;
}
/* Tooltip arrow */
.spec-tooltip .spec-tooltiptext::after {
content: "";
position: absolute;
top: 8%; /* Arrow vertically centered relative to button */
left: -9px;
transform: translateY(-10%); /* Center the arrow */
border-width: 5px;
border-style: solid;
border-color: transparent #333 transparent transparent;
}
/* Show tooltip on hover */
.spec-tooltip:hover .spec-tooltiptext {
visibility: visible;
opacity: 1;
}
.review_stars {
display: block;
min-height: 31px;
}
.yotpo-star-review .star-container {
height: 20px !important;
width: 20px !important;
}
.yotpo-star-review .yotpo-sr-bottom-line-text {
font-size: 18px !important;
}
.yotpo-single-summary-highlight-container .yotpo-summary-highlight-reviewer {
background-color: transparent;
color: var(--color-primary);
padding: 0;
}
.yotpo-summary-footer {
padding: 0;
}
.main_promos {
margin-bottom: 20px;
}
.main_promos img {
width: 100%;
height: auto;
}
.split_promo {
display: flex;
flex-direction: row;
gap: 10px 10px;
justify-content: center;
}
.split_promo a {
width: 48%;
}
.split_promo img {
width: 100%;
height: auto;
}
/* PRODUCT PAGE */
@media screen and (max-width:600px) {
table.table-responsive-full {
border: 0
}
table.table-responsive-full caption {
font-size: 1.3em
}
table.table-responsive-full thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px
}
table.table-responsive-full tr {
border-bottom: 3px solid #ddd;
display: block;
margin-bottom: .625em
}
table.table-responsive-full td {
border-bottom: 1px solid #ddd;
display: block;
font-size: .8em;
text-align: right
}
table.table-responsive-full td::before {
content: attr(data-label);
float: left;
font-weight: 700;
text-transform: uppercase
}
table.table-responsive-full td:last-child {
border-bottom: 0
}
}
.tagging {
text-align: center
}
.tagging a {
display: inline-block;
padding: 10px 10px;
margin: 5px;
background-color: var(--color-background);
text-transform: uppercase;
font-size: .7231rem;
border-radius: 5px
}
.tagging a:hover {
color: #fff;
background-color: var(--color-primary);
text-decoration: none
}
.tag_wrapper {
padding-top: 50px;
padding-bottom: 50px;
}
.tag_wrapper, .tag_wrapper .subtitle span {
background-color: #f0f0f0;
}
.tag_wrapper a {
display:flex;
align-content: center;
align-items: center;
justify-content: center;
font-size: .8231rem;
margin: 5px 0px;
border: 1px solid #ddd;
background-color: #fff;
}
.faq h2 {
font-size: 2.25rem
}
.faq_wrap {
margin: 20px 60px 30px 0
}
.faq_wrap h3 {
font-weight: 500;
line-height: 150%
}
.faq_block {
padding: 10px;
border: 1px solid #eee;
margin-bottom: 10px
}
.faq_wrap h3:hover {
cursor: pointer
}
.answer {
display: none;
padding: 0 25px 15px 25px
}
td p {
padding: 2px 0;
margin: 0
}
.call_tag {
margin-top: 20px;
font-size: 1.538rem;
font-family: var(--font-secondary-bold), var(--font-generic);
line-height: 100%
}
.review_box, .sizer {
width: 50%;
float: left
}
.inner_review {
margin: 0 20px 40px 0;
background-color: var(--color-secondary);
padding: 10px;
position: relative;
z-index: 1
}
.inner_review:after {
content: "\25bc";
position: absolute;
bottom: -20px;
right: 20px;
z-index: 2;
font-size: 2rem;
color: var(--color-secondary)
}
form[name=contact] {
padding: 20px 50px 20px 0
}
form[name=contact] input, form[name=contact] textarea {
width: 90%;
padding: 5px 2.5%;
margin-bottom: 10px;
border: 1px solid var(--color-border)
}
form[name=contact] textarea {
width: calc(95.5% - 3px);
min-height: 100px;
padding: 5px 1.25%
}
form[name=contact] input[name=submit] {
color: #fff;
width: auto;
border: none;
padding: 10px 30px
}
.enquiry form[name=contact] {
padding: 0px;
}
form[name=contact] input, form[name=contact] textarea {
width: calc(100% - 20px);
padding: 10px;
}
.bespoke .flex {
margin: 25px 0px;
}
.bespoke .flex .c_30 {
background-size: cover;
background-position: center;
}
.bespoke .flex .c_70 .inner {
padding: 30px;
}
.bespoke .flex .c_70 {
background-color: var(--color-background);
}
.enquiry p.title {
font-size: 2rem;
}
.enquiry p, .enquiry a {
color: #fff;
}
.enquiry a {
font-family: var(--font-primary-bold), var(--font-generic) !important
}
form[name=doorset_query] .err_div {
box-sizing: border-box;
padding: 10px;
height: 100%;
width: 100%;
transform: scale(0);
transition: 0.25s ease-in-out;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
form[name=doorset_query] .err_div.active {
transform: scale(1);
}
form[name=doorset_query] .err_div .inner {
z-index: 99;
color: var(--color-primary);
border: 2px solid var(--color-background);
width: 200px;
padding: 20px;
font-size: 1rem;
-moz-box-shadow: 0 0 5px var(--color-shadowbox);
-webkit-box-shadow: 0 0 5px var(--color-shadowbox);
box-shadow: 0 0 5px var(--color-shadowbox);
background-color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
row-gap: 10px;
}
form[name=doorset_query] .err_div .inner .header {
margin: 0;
padding: 0;
color: black;
width: 100%;
font-size: 1.75rem;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
form[name=doorset_query] .err_div .inner .header .close:hover {
color: #333;
cursor: pointer;
}
form[name=doorset_query] .err_div .inner p {
margin: 0;
}
form[name=doorset_query] .err_div .inner div .close {
padding: 0;
color: black;
font-size: 1.75rem;
display: flex;
justify-content: center;
align-items: center;
}
form[name=doorset_query] .inputs {
margin-top: 20px;
display: grid;
row-gap: 10px;
column-gap: 10px;
justify-content: center;
align-items: center;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: 35px 35px 35px 35px 80px auto 35px;
}
form[name=doorset_query] .inputs input, form[name=doorset_query] .inputs textarea {
height: 100%;
padding: 5px;
box-sizing: border-box;
min-width: 0;
}
form[name=doorset_query] .inputs .span {
grid-column: span 2;
}
/*form[name=doorset_query] .inputs input[type=submit] {
background-color: var(--color-background);
padding: 8px 8px 8px 8px;
border-radius: 4px;
border: none;
webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}*/
form[name=doorset_query] .inputs input[type=submit]:hover {
text-decoration: none;
background-color: #6b6e78;
color: #fff;
cursor: pointer;
}
form[name=doorset_query] input[type=submit] {
padding: 10px 20px;
height: auto;
display: block;
}
a.remove {
font-size: 0.8231rem;
text-transform: uppercase;
color: var(--color-accent);
display: inline-block;
margin-left: 10px;
}
.trade_msg {
display: block;
padding: 20px 20px 20px 0px;
font-size: 0.923rem;
}
.italic {
font-style: italic;
}
.sidebar input[type=submit] {
border: none;
margin-top: 20px
}
.cart_table .c_30 {
background-color: var(--color-secondary)
}
.cart_table .inner_cart {
margin-top: 30px;
margin-right: 0px
}
.cart_table .inner {
padding: 30px 20px
}
.mini_cart {
padding: 30px 20px;
background-color: #fff
}
.mini_cart p {
padding: 5px 0;
margin: 0
}
form[name=billing] {
padding-top: 30px
}
.cart_table .c_30 h2, .cart_table .flex h3 {
font-size: 1.625rem
}
.cart_table .flex h3 {
font-size: 1.375rem
}
.cart_rtb {
padding-top: 20px;
padding-bottom: 50px
}
.cart_table .large {
font-size: 1.692rem !important
}
.cart_table p.large.call {
font-size: 2.25rem !important
}
.cart_table .summary p {
border-bottom: 1px solid #6a89aa;
display: block !important;
padding: 15px 0 !important;
margin: 0 !important
}
.cart_table .summary div {
margin-bottom: 0 !important
}
.cart_table label {
display: none
}
.cart_table .c_50 input[type=text], .cart_table textarea {
width: 90%;
width: calc(90% - 20px);
margin-top: 10px;
padding: 6px 10px;
border: 1px solid var(--color-border)
}
.cart_table textarea {
width: 93%
}
.flag {
padding: 20px;
color: #fff;
background-color: var(--color-accent);
display: block;
text-align: center;
}
.cart_tab {
padding: 20px 0px;
}
.cart_tab .flex {
padding-top: 8px;
}
.cart_tab .flex .c_40 {
text-align: right;
}
.help {
background-color: var(--color-secondary);
padding: 30px 20px;
}
.mini_cart .cart_tab {
padding-top: 15px
}
.divider {
border-top: 1px solid #6a89aa;
height: 1px;
overflow: hidden
}
.cart_tab img {
max-width: 90%;
display: block
}
.cart_tab span {
display: inline-block;
border: 1px solid #b2c2d6;
width: 30px;
text-align: center;
vertical-align: top;
height: 20px;
padding: 3px 0 5px 0;
margin-right: 5px
}
.cart_tab a {
display: inline-block;
width: 35px
}
.cart_tab .tiny {
color:var(--color-accent);
}
.c_40 .cart_tab a {
width: auto
}
.cart_table .tags div {
width: 100%;
text-align: left;
background-repeat: no-repeat;
background-position: left center !important;
background-size: 20px auto !important;
padding: 10px 0 10px 50px
}
.cart_table .tags {
margin: 0
}
.cart_table .tags div a {
font-size: 1rem
}
.cart_table h4, .help h4 {
margin-top: 20px;
font-size: 1.625rem !important
}
.cart_table p.large, .help p.large {
font-size: 2.385rem;
font-family: var(--font-secondary-bold), var(--font-generic);
line-height: 100%;
padding: 10px 0 0 0;
margin: 0
}
.cart_table .red, .help .red {
color: var(--color-accent) !important
}
#payment_container {
display: block;
padding: 15px 20px 10px 20px;
border: 1px solid var(--color-border);
border-radius: 5px;
margin-bottom: 40px;
-moz-box-shadow: 0 0 5px var(--color-shadowbox);
-webkit-box-shadow: 0 0 5px var(--color-shadowbox);
box-shadow: 0 0 5px var(--color-shadowbox);
position: relative;
z-index: 1;
overflow: hidden;
background-color: var(--color-background);
}
#payment_container.super_container {
background-color: #fff;
padding: 0px;
box-shadow: none;
border: none;
}
super-checkout {
border: 1px solid var(--color-border);
padding: 20px;
border-radius: 5px 5px 0px 0px;
width: calc(100% - 42px);
display: block;
margin-top: 10px;
}
super-banner {
display: block;
overflow: hidden;
border-radius: 5px !important
}
#loading {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 99999;
background-color: #f1f2f3;
background-image: url("https://images.door-commerce.co.uk/general/loading.svg");
background-repeat: no-repeat;
background-position: center;
background-size: 10% auto;
opacity: 0.8;
display: none;
}
#payment_container img {
width: 75%;
}
.form-row .flex {
align-items: center;
align-content: center;
}
#card-element {
border: 1px solid var(--color-border);
padding: 10px;
border-radius: 5px 5px 0px 0px;
width: calc(100% - 22px);
background-color: #fff;
}
#payment_container button {
background-color: var(--color-accent);
color: #fff;
padding: 12px 20px;
font-family: var(--font-primary-bold), var(--font-generic);
line-height: 100%;
border-radius: 0px 0px 5px 5px;
border: none;
display: block;
width: 100%;
font-size: 1.154rem;
}
#payment_container button:hover {
background-color: var(--color-primary);
}
#payment_container label {
display: block;
font-size: 0.9231rem;
}
#payment_container .c_30 {
background: none;
}
#card-errors {
padding: 5px 0px;
height: 20px;
}
#payment_container .c_30 {
text-align: right;
}
#payment_container button.klarna {
padding: 8px 0px 4px 0px;
background-color: #ffb1d2;
border-radius: 5px;
border: 5px solid #ffb1d2;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
/* Let's enforce some hardware acceleration */
-webkit-transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
}
#payment_container button.klarna:hover {
border: 5px solid #d88cac;
}
#payment_container button img {
height: 35px;
width: auto !important;
margin: 0px !important;
}
p.or {
display: block;
position: relative;
z-index: 1;
text-align: center;
text-transform: uppercase;
}
p.or:before {
content: "";
background-color: var(--color-border);
position: absolute;
left: 0px;
top: 50%;
z-index: 1;
width: 100%;
height: 1px;
}
p.or span {
display: inline-block;
background-color: #fff;
padding: 0px 15px;
position: relative;
z-index: 2;
}
.by_stripe {
background: rgb(174, 232, 94);
background: linear-gradient(112deg, rgba(174, 232, 94, 1) 21%, rgba(121, 196, 172, 1) 56%);
padding: 10px 30px;
border-radius: 5px;
text-align: center;
margin-top: 30px;
display: block;
}
.by_stripe img {
max-width: 50%;
display: block;
margin: 0px auto;
}
.error_msg {
display: inline-block;
padding: 20px;
color: #fff;
background-color: var(--color-accent);
position: absolute;
z-index: 1;
width: 180px;
margin-top: -70px;
font-size: 1rem;
left: 40px;
top: 0;
min-height: 100px
}
.error_msg img {
position: absolute;
left: -30px;
top: 50%;
margin-top: -14px;
z-index: 3
}
.error_msg::after {
position: absolute;
display: inline-block;
border-right: 10px solid var(--color-accent);
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
left: -10px;
top: 50%;
margin-top: -15px;
content: ''
}
.centre_align {
text-align: center
}
.right_align {
text-align: right
}
.summary a.btn {
margin-top: 15px
}
.no_bottom {
padding-bottom: 0 !important
}
/* #delivery_details {
display: none
} */
.styles .inner {
margin: 0 10px 40px 10px
}
.styles .info {
background-color: var(--color-background);
padding: 15px 5px;
margin-top: 5px
}
.styles.c_20 .info, .styles.c_25 .info {
color: #fff;
background-color: var(--color-primary)
}
.styles.c_20 .info h2 a, .styles.c_25 .info h2 a {
color: #fff
}
.styles.c_14 .inner, .styles.c_20 .inner, .styles.c_25 .inner {
border: 1px solid #ddd;
padding-top: 10px;
-moz-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .3);
-webkit-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .3);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .3)
}
.styles.c_20 .inner, .styles.c_25 .inner {
padding-top: 0
}
.styles.c_20 .inner img, .styles.c_25 .inner img {
display: block
}
.styles .info p.bold {
padding: 10px 0 0 0;
margin: 0;
display: block;
text-align: center
}
.styles a.btn {
border: none
}
.styles.c_20 .info, .c_25 .info {
text-align: center;
padding: 15px 15px
}
.styles.c_20 .info p:not(.bold), .c_25 .info p:not(.bold) {
font-size: .9321rem
}
.styles.c_20 .info p, .c_25 .info p {
padding: 0 0 10px 0;
margin: 0;
display: block
}
.styles.c_20 .info p.bold, .styles.c_25 .info p.bold {
padding: 0 0 5px 0;
color: #ddd
}
.styles.c_20 .info h2, .c_25 .info h2 {
font-size: 1.385rem !important
}
#product_wrap .flex.negative.boxes {
flex-wrap: wrap;
justify-content: center;
row-gap: 20px;
}
.c_20.product.styles .inner {
height: 100%;
display: flex;
flex-direction: column;
}
.c_20.product.styles .inner .wrapper {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.offer_boxes .c_20.product.styles .inner .wrapper {
flex: auto;
display: block !important;
}
.c_20.product.styles .inner .wrapper a {
width: 100%;
}
.c_20.product.styles .inner .wrapper .info {
flex: 1;
padding: 15px 15px 0 15px;
width: 100%;
box-sizing: border-box;
}
.offer_boxes .c_20.product.styles .inner .wrapper .info {
flex: auto;
display: block;
padding: 15px;
}
.offer_boxes .c_20.product.styles .inner .wrapper .info h2 {
display: block;
font-size: 1.231rem !important;
}
.offer_boxes .inner {
display: block !important;
height: auto !important;
}
.c_20.product.styles .inner .wrapper p {
padding: 0;
}
#product_wrap.landing .c_33 {
width: 25%
}
#product_wrap .c_14 h2 {
font-size: 1.077rem;
display: block;
text-align: center
}
.cart_table input[name=postcode], .cart_table input[name=code] {
padding: 6px 10px;
border: 1px solid var(--color-border);
}
.cart_table input[name=postcode] {
width: calc(55% - 10px);
}
.cart_table form[name=code] {
width: 58%;
}
.cart_table input[name=code] {
width: calc(100% - 22px);
}
.cart_table form[name=code] input[name=submit], button.btn {
background-color: var(--color-accent);
color: #fff;
border: none;
display: block;
width: 100%;
font-size: 1.077rem;
font-family: var(--font-primary-bold), var(--font-generic);
padding: 6px 0px;
}
button.btn {
padding: 10px 20px;
margin: 10px 0px 20px 0px;
border-radius: 5px;
border: 1px solid var(--color-accent);
}
button.btn:hover {
color: #fff;
border: 1px solid var(--color-accent);
background-color: var(--color-accent);
}
form[name=payment-form] .inner {
padding: 0px !important;
}
.result {
display: inline-block;
padding: 0;
position: relative;
z-index: 1
}
.bottom_pad {
padding-bottom: 50px
}
.thin_promo {
background: rgb(150, 0, 0);
background: linear-gradient(180deg, rgba(150, 0, 0, 1) 26%, rgba(204, 0, 0, 1) 100%);
color: #fff;
text-align: center;
padding: 15px 0px;
font-size: 1.538rem;
}
.thin_promo .small {
font-size: 1rem;
}
.thin_promo p {
padding: 0px;
margin: 0px;
line-height: 110%;
}
.pagination {
display: block;
padding: 0;
border: 1px solid #b3c2d6;
border-width: 1px 0;
text-align: right;
margin-bottom: 20px;
font-size: 1.125rem;
font-family: RobotoCondensed, var(--font-generic);
line-height: 100%
}
.pagination a {
color: #73a3df
}
.pagination a, .pagination span {
display: inline-block;
margin-left: 1px;
margin-right: 1px;
padding: 10px
}
.pagination span {
color: #b3c2d6
}
.pagination .active, .pagination a.all, .pagination a.directional, .pagination a:hover {
color: #51555e;
background-color: #eee;
padding: 10px;
display: inline-block
}
.pagination .directional {
margin-left: 0;
margin-right: 0
}
.pagination .active, .pagination a.directional:hover {
text-decoration: none;
background-color: #51555e;
color: #fff
}
.pagination a.all {
margin-left: 0
}
.pagination .prev {
margin-right: 0
}
.contact_icons {
display: none
}
.qty_wrap {
justify-content: flex-end !important;
flex-wrap: nowrap !important
}
.qty_wrap a {
margin-left: 5px
}
.big_wrap a {
margin-left: 0;
margin-right: 1px;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
text-align: center;
width: calc(100% - 2px);
height: 100%;
background-color: #b2c2d6;
border-right: 2px solid #fff
}
.big_wrap a img {
margin: 0 !important
}
.big_wrap input[type=text] {
width: 100%;
padding: 6px 0;
font-size: 1.538rem;
text-align: center
}
.single .big_wrap input[type=text] {
font-size: 1.154rem;
width: calc(100% - 4px)
}
.out_of_stock {
font-size: .79231rem;
font-style: italic
}
.range_wrap {
margin-top: 30px;
margin-bottom: 30px
}
.range_wrap .flex {
background-color: #eee
}
.range_wrap .c_50 {
background-repeat: no-repeat;
background-size: cover;
background-position: center
}
.range_wrap .c_33 .inner .inner, .range_wrap .c_50 .inner .inner, .range_wrap .c_20 .inner .inner {
padding: 20px
}
.range_wrap .c_20 .inner .inner {
padding: 20px 20px;
margin: 0px;
text-align: center;
}
.range_wrap p {
font-size: .9231rem
}
.range_wrap a.btn {
font-size: .9231rem;
padding: 8px 20px !important
}
.range_wrap .inner {
margin-bottom: 20px
}
.range_wrap .c_33 img {
display: block;
width: 100%;
height: auto
}
.mtm img {
display: block;
margin: 0px;
}
.mtm h2 a {
display: block;
padding: 15px 10px;
background-color: var(--color-background);
text-align: center;
font-size: 1.231rem;
}
.mtm h2 a:hover {
background-color: var(--color-primary);
text-decoration: none;
color: #fff;
}
.brands .flex {
justify-content: center;
align-items: flex-start
}
.brands .flex div {
flex: 1
}
.brands .flex a {
width: 100%;
display: block;
border: 1px solid var(--color-background);
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out
}
.brands .flex p a {
width: auto;
height: auto;
border: none
}
.brands .flex a:hover {
border: 1px solid #6a89aa
}
.brands .flex p a:hover {
border: none
}
.brands .flex div {
padding: 10px 0;
text-align: center
}
.brands .flex div a {
color: #777;
text-transform: uppercase;
font-size: .8231rem
}
.brands .flex div a:hover {
color: #6a89aa;
text-decoration: none
}
.brands.flex div {
width: 25%
}
.brands.flex {
justify-content: center
}
.brands.flex img {
width: 100%;
margin: 0 auto
}
.brands p {
text-align: center;
}
.brand_filter {
margin-bottom: 15px;
}
.brand_filter img {
border-bottom: 2px solid #7d9db9;
display: block;
margin-bottom: 15px
}
.brand_filter h2 {
font-size: 1.154rem;
display: block;
}
.brand_filter .inner {
margin-bottom: 5px;
margin-top: 5px
}
.brand_filter a {
display: block;
text-align: center;
}
.grouping {
margin-top: 30px;
padding-bottom: 15px
}
.grouping .c_33 {
background-repeat: no-repeat;
background-position: center;
background-size: cover
}
.grouping .inner {
padding-left: 30px
}
.grouping .c_25 .inner {
padding-left: 0
}
.grouping .inner .inner {
padding-left: 0
}
.grouping .c_25 .inner ul, .grouping .inner .inner ul {
padding: 0 0 0 15px;
margin: 10px 0;
font-size: .8231rem
}
.grouping .c_25 .inner img, .grouping .inner .inner img {
margin-top: 15px
}
.grouping .c_25 .inner h3 {
font-size: 1.385rem
}
hr {
border: 0;
height: 0;
border-top: 1px solid rgba(0, 0, 0, .3);
border-bottom: 1px solid rgba(255, 255, 255, .3);
}
.landing_page hr {
width: calc(100% - 100px);
margin: 50px auto;
}
.subs {
margin-top: 40px;
margin-bottom: 40px
}
.subs .flex {
margin-bottom: 15px;
background-color: var(--color-background)
}
.subs img {
display: block;
width: 100%;
border-bottom: 2px solid #5f8ac1
}
.range_desc {
padding: 40px 30px;
background-color: var(--color-background)
}
.size_wrap {
color: #fff;
display: block;
background-color: var(--color-primary);
}
.size_wrap a span {
text-transform: uppercase;
font-family: RobotoCondensed, var(--font-generic);
line-height: 100%;
font-size: 1.792rem;
color: #fff;
font-weight: 700
}
.size_wrap a span:hover {
color: var(--color-secondary)
}
.size_wrap p {
padding: 5px 0 10px 0;
margin: 0;
display: block;
max-width: 85%;
color: #ddd
}
.size_wrap .max {
background-repeat: no-repeat;
background-size: auto 70%;
background-position: center right;
background-image: url(https://images.door-commerce.co.uk/general/icon-measure.png);
padding: 20px 0
}
ul.downloads {
list-style: none;
margin: 20px 0px 40px 0px;
padding: 0px;
}
ul.downloads li a {
display: block;
background-color: var(--color-background);
padding: 8px 70px 8px 20px;
border-radius: 4px;
position: relative;
z-index: 1;
overflow: hidden;
}
ul.downloads li a:hover {
text-decoration: none;
background-color: #6b6e78;
color: #fff;
}
ul.downloads a:before {
content: "";
position: absolute;
right: 0px;
top: 0px;
z-index: 1;
width: 60px;
height: 100%;
background-color: var(--color-primary);
clip-path: polygon(20% 0%, 100% 0, 100% 100%, 0% 100%);
background-image: url(https://images.door-commerce.co.uk/general/icon-download-cloud.png);
background-position: center;
background-size: 25px 25px;
background-repeat: no-repeat;
}
/* Internal Door sets brand buttons */
.c_90 .doorset_brand_btns {
display: flex;
justify-content: flex-start;
align-items: center;
column-gap: 25px;
flex-wrap: wrap;
row-gap: 25px;
}
.c_90 .doorset_brand_btns a {
color: var(--color-primary);
border: 1px solid var(--color-primary);
}
#product_wrap .flex .c_20.product.styles .inner .wrapper .info {
text-align: center;
color: #fff;
background-color: var(--color-primary);
}
#product_wrap .flex .c_20.product.styles .inner .wrapper .info h2 a {
color: #fff;
}
/* Internal Door Sets - advice/ beskoke form */
#content_wrap .landing_page .videos div {
flex: 1 1 317px;
position: relative;
}
#content_wrap .landing_page .videos div video {
height: 100%;
width: 100%;
}
#content_wrap .landing_page .item {
display: flex;
flex-wrap: wrap;
column-gap: 25px;
row-gap: 25px;
justify-content: center;
align-items: flex-start;
}
#content_wrap .landing_page .item .item {
flex: 1 1 480px;
display: flex;
flex-direction: column;
align-items: flex-start;
row-gap: 0;
}
#content_wrap .landing_page .item .item p.sub {
width: 100%;
}
#content_wrap .landing_page .item ul.downloads {
width: 100%;
}
#content_wrap .landing_page .item ul.downloads a {
color: black !important;
}
.case_study {
background-color: var(--color-secondary);
margin-top: 30px;
}
.case_study .c_33 {
background-size: cover;
background-position: center;
clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
}
.case_study .quote {
padding: 50px;
}
.cases .inner {
position: relative;
z-index: 1;
background-color: var(--color-primary);
overflow: hidden;
}
.cases {
margin-top: 50px
}
.cases .c_100 {
margin-bottom: 10px;
}
.case_img {
position: absolute;
left: 0px;
top: 0px;
width: 50%;
height: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
z-index: 1;
}
.case_img img {
opacity: 0 !important;
}
.cases .case_intro {
margin-left: 50%;
padding: 60px 40px;
color: #fff;
}
.cases .strapline {
font-size: 1.154rem;
color: #ddd;
display: block;
padding: 20px 15% 20px 0px;
}
.cases h2 a {
color: #fff;
font-size: 1.538rem;
}
.desc hr {
border: 0;
height: 1px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
margin: 40px 0px;
display: block;
}
.product_title {
display: block;
position: relative;
z-index: 999;
}
form[name=aftersales] label {
display: block;
padding-bottom: 10px;
position: relative;
z-index: 1;
font-size: 0.9231rem;
}
form[name=aftersales] label small {
position: absolute;
right: 0px;
top: 0px;
z-index: 2;
}
.required_asterisk {
font-weight: 700;
color: #c00;
z-index: 99;
}
form[name=aftersales] h2 {
display: block;
margin-bottom: 10px;
}
form[name=aftersales] input[type=text] {
display: block;
width: calc(100% - 22px);
border: 1px solid #ccc;
padding: 8px 10px;
margin-bottom: 20px;
}
form[name=aftersales] ul.flex {
list-style: none;
margin: 0px;
padding: 0px;
}
form[name=aftersales] ul.flex li {
width: 50%;
margin-bottom: 10px;
}
form[name=aftersales] textarea {
display: block;
width: calc(100% - 22px);
border: 1px solid #ccc;
padding: 8px 10px;
margin-bottom: 20px;
min-height: 150px;
}
p.notification, .batch {
font-weight: 700;
color: #c00;
display: none;
}
#supporting_photo_preview {
margin-bottom: 30px;
}
.file_wrapper {
border: 1px solid #ccc;
background-color: #f0f0f0;
border-radius: 5px;
display: block;
padding: 10px;
}
button.add_item, button.remove_item {
display: inline-block;
padding:10px 20px;
background-color: #fff;
color: #fff;
border: none;
border-radius: 5px;
}
button.remove_item {
background-color: #c00;
}
button.add_item {
background-color: var(--color-primary);
}
p.remove {
display: block;
text-align: right;
}
/* Popup container */
.popup-container {
position: absolute;
top: calc(100% + 14px);
left: 0;
width: 100%;
box-sizing: border-box;
background-color: #f9f9f9;
border: 1px solid var(--color-border);
z-index: 1000;
display: none;
box-shadow: 2px 6px 18px 0 rgba(0, 0, 0, .25);
border-radius: 8px;
}
/* Arrow pointing up */
.popup-container::after {
content: "";
position: absolute;
top: -14px;
left: 1px;
z-index: -1;
width: 0;
height: 0;
border-color: #f9f9f9 transparent;
border-style: solid;
border-width: 0 18px 25px;
-webkit-filter: drop-shadow(0 -4px 6px rgba(0, 0, 0, .25));
filter: drop-shadow(0 -4px 6px rgba(0, 0, 0, .25))
}
.popup-content:before {
content: "";
position: absolute;
right: 10px;
top: 10px;
z-index: 1;
width: calc(100% - 20px);
height: calc(100% - 20px);
background-image: url(https://images.door-commerce.co.uk/general/icon-big-pig.png);
background-repeat: no-repeat;
background-position: top right;
background-size: auto 100%;
opacity: 0.04;
}
.popup-content {
display: block;
background-color: #f9f9f9;
position: relative;
z-index: 99;
padding: 15px;
border-radius: 8px;
}
.popup-text {
position: relative;
z-index: 2;
}
.popup-container h4, .popup-container strong {
font-weight: 700;
text-transform: uppercase;
}
.popup-container h4 {
font-size: 1.154rem;
}
.loader {
width: 48px;
height: 48px;
border-radius: 50%;
display: inline-block;
position: relative;
border: 3px solid;
border-color: #a2843c #a2843c transparent transparent;
box-sizing: border-box;
animation: rotation 1s linear infinite;
margin-bottom: 10px;
margin-top: 20px;
}
.loader::after, .loader::before {
content: '';
box-sizing: border-box;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
border: 3px solid;
border-color: transparent transparent #333333 #333;
width: 40px;
height: 40px;
border-radius: 50%;
box-sizing: border-box;
animation: rotationBack 0.5s linear infinite;
transform-origin: center center;
}
.loader::before {
width: 32px;
height: 32px;
border-color: #a2843c #a2843c transparent transparent;
animation: rotation 1.5s linear infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes rotationBack {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
.footer_logos {
display: flex;
flex-direction: row;
justify-content: space-around;
}
/* .footer_info {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: flex-start;
} */
.footer_info li {
padding: 10px 20px;
flex-grow: 1;
min-width: 10%;
text-align: center;
}
.display_event a img{
width: 100%;
overflow-x: auto;
height: auto;
}
@media only screen and (max-width :1024px) {
form[name=doorset_query] .inputs {
grid-template-columns: 100%;
grid-template-rows: 35px 35px 35px 35px 35px 35px 80px auto 35px;
}
form[name="doorset_query"] .inputs .span {
grid-column: span 1;
}
#product_wrap .flex .c_20.product.styles {
flex: 0 0 30%;
}
.menu_close {
position: fixed;
top: 0;
left: 0;
z-index: 9999999999;
width: 100%;
padding-top: 5px
}
/* .desktop_hide {
display: block
} */
.negative {
margin-right: 0 !important;
margin-left: 0 !important
}
.header {
padding-top: 20px;
margin-left: 40px;
margin-right: 40px
}
.header .flex .c_50 {
-ms-align-self: flex-start;
-webkit-align-self: flex-start;
align-self: flex-start
}
img.menu_icon {
display: block;
max-width: 40px;
opacity: .7;
position: absolute;
left: 0;
top: 50%;
z-index: 4;
margin-top: -20px
}
.header img.logo {
max-width: 42%;
margin-left: 80px;
margin-top: 4px
}
#menu_wrap, #nav_wrap, .mobile_hide {
display: none
}
.top_cart {
position: absolute;
right: 0;
top: 34px;
z-index: 4;
padding-top: 20px;
width: 50px
}
.header p {
padding: 0
}
p.telephone {
font-size: 2.125rem !important;
/* margin-right: 15px !important */
}
.mobile_sticky p .num {
right: 29px
}
a.email {
font-size: 1.385rem;
margin-right: 55px
}
#cart {
text-align: right !important
}
ul.tags {
background-color: var(--color-secondary);
position: relative;
z-index: 1
}
ul.tags li {
font-size: .875rem
}
ul.tags li:nth-child(3) {
padding-left: 40px
}
ul.tags li:last-of-type {
position: absolute;
right: 10px;
top: 0;
z-index: 2
}
.tablet_only {
display: block
}
#banner {
-webkit-align-items: stretch;
-moz-align-items: stretch;
align-items: stretch
}
.slider #banner.flex {
height: 260px !important
}
#banner h1, #banner h2 {
font-size: 1.625rem !important;
width: 100%
}
#banner .c_45, #banner .c_55 {
width: 50%
}
.banner_desc p {
font-size: 1rem
}
.banner_desc h4 {
font-size: 1.625rem !important
}
ul.ranges {
width: 100%;
margin-bottom: 0 !important;
margin-top: 20px !important;
height: auto !important
}
ul.ranges a {
display: block;
padding: 4px 0 !important;
font-size: 1rem !important
}
a.btn {
padding: 8px 15px;
font-size: 1rem !important
}
.banner_desc a.red_btn {
margin-top: 0
}
section {
padding: 20px
}
.rtb .flex div {
width: 50%
}
.c_30 .rtb .flex div {
width: 100%
}
.footer {
padding: 40px 35px
}
.c_30 .logos {
display: block;
text-align: center
}
.c_30 .logos div {
width: auto;
display: inline-block !important
}
.mobile_logos {
text-align: center;
display: block;
margin-top: 20px
}
.featured .c_33 .flex {
align-items: stretch
}
.featured .c_33 .flex div {
align-items: center
}
.inner_menu ul ul li a {
padding: 10px 0 10px 15px
}
.c_25.non_desktop {
display: none
}
#product_wrap {
padding-top: 20px
}
#product_wrap .c_75 {
width: 100%
}
#breadcrumbs {
padding-left: 20px
}
.offerings .inner {
margin: 0 10px
}
.c_75 .negative {
margin-left: -10px !important;
margin-right: -10px !important
}
.c_100 .negative {
margin-left: -10px !important;
margin-right: -10px !important
}
p.show {
display: block
}
.opts .filter_btn {
position: absolute;
left: 0;
top: 0;
z-index: 1;
padding: 5px 20px 5px 30px;
margin: 0;
background-image: url(/images/icon-filter.png);
background-repeat: no-repeat;
background-position: 15% center;
background-size: auto 40%;
background-color: var(--color-primary);
color: #fff;
font-family: var(--font-secondary-bold), var(--font-generic);
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
display: block
}
.no_filter .filter_btn {
display: none !important
}
.opts .filter_btn:hover {
background-color: #7d9db9;
cursor: pointer
}
p.sub_nav {
display: none
}
.sidebar {
padding-top: 50px
}
.sidebar img.close {
display: block;
position: fixed;
right: 25px;
top: 15px;
width: 20px;
z-index: 3
}
.flex.blue_bg {
display: none
}
h1 {
font-size: 2rem
}
.detail {
margin-top: 0
}
.prod_desc {
margin-top: 0
}
.t_25 {
width: 25% !important
}
.t_50 {
width: 50%
}
.qty_wrap .c_40.t_50 {
width: 25% !important
}
.t_100 {
width: 100%
}
.prod_desc .desc {
padding-right: 0
}
.similar .c_33 {
width: 33.3333%
}
.similar .c_33:last-of-type {
display: none
}
#breadcrumbs {
font-size: .9231rem
}
#breadcrumbs ul li a {
margin-right: 10px
}
#breadcrumbs span {
margin-right: 0
}
.single h5:first-of-type {
margin-top: -22px
}
.c_60 #product_image {
width: 90%
}
.detail input[type=text] {
padding: 2px 10px;
display: inline-block;
margin-top: 0;
width: calc(100% - 20px)
}
.big_wrap input[type=text] {
padding: 7px 10px
}
.detail input, .detail input[name=submit] {
margin-right: 0;
-webkit-appearance: none;
border-radius: 0
}
form[name=buy] .c_25, form[name=buy] .t_50 {
text-align: right
}
.qty_wrap {
width: 40%
}
form[name=buy] .qty_wrap {
width: 100%
}
.desc {
padding-bottom: 40px
}
.similar {
margin-left: -10px !important;
margin-right: -10px !important
}
.c_30 section {
padding: 20px 0
}
.rtb h6 {
font-size: 1.625rem
}
.inner_menu a.top_level {
font-size: 1.375rem !important
}
.inner_menu .dropper a {
font-size: 1rem !important
}
.inner_menu.blue_bg {
background-color: #e7f0fb !important
}
#product_wrap .c_33 span:not(.brand) {
font-size: .875rem
}
#product_wrap h2 {
font-size: 1.154rem !important
}
#product_wrap h3 {
font-size: 1rem !important
}
.full_width .c_33 {
width: 33.33333%
}
.full_width .c_33 a.btn {
font-size: .9375rem !important
}
.detail input {
padding: 0 10px
}
.detail .flex img {
margin-right: 5px !important
}
.qty_wrap .c_25 {
width: 30% !important
}
.detail .c_35 {
width: 50% !important
}
.t_50 input[type=text] {
width: 20px !important
}
.single h5:first-of-type {
margin-top: 25px;
font-size: 1.231rem
}
.cart_table .c_30, .cart_table .c_70 {
width: 100%
}
.cart_table .c_30 {
text-align: center
}
.cart_table .c_30 .rtb, .cart_table .c_30 h2 {
display: none
}
p.large .red, p.large .red a, p.large a {
color: var(--color-accent) !important
}
.cart_table .c_50 input, .cart_table textarea {
width: calc(100% - 40px)
}
.mobile_sticky .flex {
-webkit-align-items: center !important;
-moz-align-items: center !important;
align-items: center !important;
margin: 10px 0 !important
}
.footer_logos div {
padding: 0 10px;
}
.footer_logo div a {
width: calc(100% - 5vw);
}
.footer_logos div .telephone a {
font-size: 70%;
}
.product_form .big_wrap input[type=text] {
width: 65% !important;
border: 1px solid var(--color-border);
}
}
@media only screen and (max-width:700px) {
/* Tooltip text */
.spec-tooltip .spec-tooltiptext {
position: absolute;
top: 120%; /* Top of tooltip aligns with top of button */
left: -50px; /* Just to the right of the button */
}
/* Tooltip arrow */
.spec-tooltip .spec-tooltiptext::after {
content: "";
border-color: transparent;
}
#product_wrap .flex .c_20.product.styles {
flex: 0 0 100%;
}
#content_wrap .landing_page img {
max-width: none !important;
margin: 10px 0 !important;
}
#location {
position: fixed;
top: 0;
left: 0;
z-index: 99999999999
}
.header img.logo {
max-width: 54%
}
img.menu_icon {
display: block;
max-width: 40px;
opacity: .7;
position: absolute;
left: 0;
top: 50%;
z-index: 4;
margin-top: -20px
}
.inner_menu {
padding: 0 15px 0 15px
}
.top_cart {
top: 27px
}
.header {
margin-left: 20px;
margin-right: 20px
}
.header .c_50 {
width: 100%;
text-align: center
}
.header img.logo {
margin-left: 0
}
a.email, p.telephone {
display: none
}
.footer p.telephone {
display: block;
margin-right: auto !important
}
#banner .c_45, #banner .c_50, #banner .c_55, .c_80, .cart_table .c_30, .cart_table .c_70 {
width: 100%
}
#banner, .glide__slide, .glide__wrapper, .slider {
min-height: auto;
height: auto !important
}
.glide__slide .c_45 {
height: auto !important
}
.banner_desc, section {
padding: 20px 20px
}
section {
text-align: center
}
.featured .c_33 {
width: 100%
}
.featured .inner {
margin: 0 -20px 30px -20px
}
.featured .inner .flex div:not(:first-of-type) {
padding: 0 20px
}
.rtb .flex div {
width: 100%;
margin-bottom: 20px
}
footer {
text-align: center;
}
footer .c_20, footer .c_25, footer .c_30, footer .c_40 {
width: 100% !important;
}
footer .negative, footer .negative .inner {
margin: 0px;
}
footer .max {
padding-left: 5%;
padding-right: 5%;
}
footer .social_icons {
padding-top: 15px;
padding-bottom: 20px;
text-align: center;
}
footer .social_icons img {
margin-left: 10px;
margin-right: 10px;
}
.tp_wrap {
display: block;
padding: 20px 0px;
margin: 20px 0px;
}
.cards .c_50 {
width: 100%;
text-align: center !important;
}
.cards img {
max-width: 70% !important;
margin-top: 15px;
}
.fsc_wrap {
padding-top: 25px;
}
footer {
text-align: center;
}
footer .c_20, footer .c_25, footer .c_30, footer .c_40 {
width: 100% !important;
}
footer .negative, footer .negative .inner {
margin: 0px;
}
footer .max {
padding-left: 5%;
padding-right: 5%;
}
footer .social_icons {
padding-top: 15px;
padding-bottom: 20px;
text-align: center;
}
footer .social_icons img {
margin-left: 10px;
margin-right: 10px;
}
.tp_wrap {
display: block;
padding: 20px 0px;
margin: 20px 0px;
}
.cards .c_50 {
width: 100%;
text-align: center !important;
}
.cards img {
max-width: 70% !important;
margin-top: 15px;
}
.fsc_wrap {
padding-top: 25px;
}
.footer {
text-align: center
}
.footer .c_25, .footer .c_33, .footer .c_66, .footer .c_75 {
width: 100% !important
}
ul.tags {
display: none
}
.inner_menu ul ul li {
width: 100%
}
.menu_close img.close {
right: 15px;
top: 29px;
width: 25px
}
.menu_close img.menu_logo {
max-width: 40%;
margin-left: 60px;
margin-top: 13px
}
.mobile_logos img {
height: 24px
}
.tablet_only {
display: none
}
.slider .banner_desc .flex div:last-of-type {
margin-top: 0
}
ul.ranges a {
padding: 8px 0
}
img.mobile_search_trigger {
width: 20px
}
img.email_icon {
height: 18px
}
#product_wrap .c_75 .c_33, .offerings .c_33 {
width: 100% !important;
max-width: none
}
#product_wrap .c_100 .c_33, .offerings .c_33 {
width: 100% !important;
max-width: none
}
.offerings .inner {
margin-bottom: 20px
}
#product_wrap .c_75 .c_33 .img_wrap, #product_wrap .c_75 .c_33 a.img_wrap {
margin-left: -20px;
margin-right: -20px
}
#product_wrap .c_100 .c_33 .img_wrap, #product_wrap .c_100 .c_33 a.img_wrap {
margin-left: -20px;
margin-right: -20px
}
#product_wrap .c_33 .c_40 span {
background-color: #7d9db9;
display: block;
color: #fff;
text-align: center;
padding: 10px 10px;
font-family: var(--font-primary-bold), var(--font-generic)
}
.desc {
text-align: center
}
.opts.active {
-moz-box-shadow: 0 0 5px var(--color-shadowbox);
-webkit-box-shadow: 0 0 5pxvar(--color-shadowbox);
box-shadow: 0 0 5px var(--color-shadowbox);
position: fixed;
top: 75px;
left: 0;
z-index: 99999;
width: 90%;
background-color: #fff;
padding: 10px 5% !important
}
.opts.active .filter_btn {
left: 5%;
top: 10px
}
.opts select {
padding: 5px 10px !important
}
.mobile_hide, .opts .order {
display: none
}
#breadcrumbs {
display: none
}
#product_image {
margin-right: 0
}
.compare {
width: calc(100% - 0px);
padding: 30px 0px 0px 0px;
}
.compare:before {
display: none;
}
.compare span {
display: none;
}
.compare span.action {
padding: 15px 10px;
background-color: #c00;
color: #fff;
display: block;
text-align: center;
}
.compare p {
display: block;
padding: 0px 20px 10px 20px;
text-align: center
}
.wide .c_60 #product_image {
max-width: none;
width: -moz-calc(100% + 40px);
width: -webkit-calc(100% + 40px);
width: calc(100% + 40px);
margin-left: -20px;
margin-right: -20px
}
.m_100 {
width: 100%
}
.detail input[type=text] {
border: 1px solid var(--color-border)
}
.c_30.qty_wrap {
width: 50%
}
.m_30 {
width: 30% !important
}
.m_50 {
width: 50% !important
}
.m_70 {
width: 70% !important
}
.m_100 {
width: 100%
}
.cart_table .inner_cart {
margin-right: 0
}
.cart_tab span {
width: 63px;
margin-bottom: 5px
}
.non_mobile {
display: none !important
}
.cart_table .c_60 {
text-align: right;
width: 100%;
padding-bottom: 20px
}
.cart_table .c_30 {
margin-left: -20px;
margin-right: -20px;
width: -moz-calc(100% + 60px) !important;
width: -webkit-calc(100% + 60px) !important;
width: calc(100% + 60px) !important
}
.cart_table .c_30 section {
padding: 20px 0
}
.cart_table .c_50, form[name=contact] .c_50 {
width: 100%
}
.cart_table .c_50 input, .cart_table textarea {
width: -moz-calc(100% - 20px);
width: -webkit-calc(100% - 20px);
width: calc(100% - 20px)
}
.cart_table .m_100 input {
width: 15% !important
}
.cart_table .c_50.m_30, .cart_table .c_50.m_70 {
text-align: right
}
.cart_table .c_50.m_70 p {
padding: 5px 20px 5px 0 !important;
display: block
}
.cart_table .c_50.m_30 p {
padding: 5px 0 5px 0 !important;
display: block
}
.cart_table .c_50.m_30 p, .cart_table .c_50.m_70 p {
border: none !important
}
.cart_table .flex h3, .cart_table p.large {
font-size: 1rem !important
}
form[name=billing] input[name=submit] {
-webkit-appearance: none
}
.popup {
width: calc(90% - 40px);
margin-left: -45%
}
.detail .c_40, .detail .c_60, .faq .c_33, .faq .c_66, .groups .c_25, .review_box, .single_zoom, .sizer {
width: 100%
}
.single_zoom {
margin-bottom: 20px
}
.faq_wrap {
margin-right: 0
}
.inner_review {
margin-right: 0
}
.descriptive .inner {
padding-left: 0;
padding-top: 30px;
text-align: center
}
.descriptive h2, .faq h2 {
font-size: 1.375rem;
display: block;
text-align: center
}
#banner.reverse .banner_desc, .descriptive ul.ranges li, .faq ul.ranges li {
text-align: center
}
.faq_wrap {
text-align: center
}
h1 {
font-size: 1.375rem !important
}
.inner_content h1 {
display: block
}
.descriptive p {
padding-right: 0
}
#banner h4 {
font-size: 1.375rem !important
}
.m_left .faq_wrap, .m_left h1 {
text-align: left !important
}
form[name=contact] {
padding-right: 0
}
form[name=contact] input, form[name=contact] textarea {
width: 95%;
padding: 5px 2.5%
}
#search_bar input {
top: 0
}
.autocomplete-suggestions {
font-size: 1rem;
margin-left: 0
}
.autocomplete-suggestion {
padding: 5px 5%;
text-align: left;
font-size: 0.9rem;
}
.cart_summary, .cart_summary h1 {
text-align: left
}
.slider #banner.flex {
height: auto !important
}
#content_wrap.no_pad, .content.no_pad {
padding-top: 10px !important
}
.slider .c_45 p span {
display: inline-block
}
.inner_menu ul ul li a::after {
top: 10px
}
.inner_menu ul ul li a {
padding: 5px 0 5px 15px
}
.sidebar img.close {
right: 15px;
top: 29px;
width: 25px
}
.price_slider .right_button {
left: 0 !important
}
p.sub {
font-size: 1.375rem !important
}
.advice a {
background: 0 0;
padding: 4px 0 4px 0
}
.styles.c_25 {
width: 100% !important
}
.m_100 {
width: 100% !important
}
.single h5:first-of-type {
font-size: 1rem
}
.units {
font-size: .8231rem
}
.detail .flex img {
margin: 0 !important
}
form[name=buy] .qty_wrap {
text-align: center !important
}
.qty_wrap .c_25 {
text-align: right !important
}
.spec .c_35 {
width: 40%
}
.spec .c_65 {
width: 60%
}
.prod_desc .desc {
text-align: left
}
.cart_table h4, .cart_table p.large.call {
font-size: 1.25rem !important
}
.no_pad {
padding-top: 0 !important
}
.rtb h6 {
font-size: 1.375rem;
margin-bottom: 50px
}
.mobile_sticky p .num {
right: 2px
}
.mobile_sticky img.alt_menu_icon {
margin-top: 8px
}
.units {
right: 0
}
.right_align .c_25 {
text-align: right
}
.right_align.qty_wrap .c_25 {
width: 33.333333% !important;
text-align: right !important
}
.error_msg {
display: inline-block;
padding: 10px 20px;
color: #fff;
background-color: var(--color-accent);
position: absolute;
z-index: 1;
width: 185px;
margin-top: 0;
font-size: .846rem;
left: auto;
right: 0;
top: 30px;
min-height: 10px;
text-align: center
}
.error_msg img {
position: absolute;
right: 50%;
left: auto;
top: 0;
margin-top: -14px;
z-index: 3;
display: none
}
.error_msg::after {
position: absolute;
display: inline-block;
border-bottom: 10px solid var(--color-accent);
border-left: 10px solid transparent;
border-right: 10px solid transparent;
right: 50%;
left: auto;
top: 0;
margin-top: -20px;
content: '';
margin-right: -10px
}
#banner .feat_img.c_50 {
height: 30vh
}
form[name=contact] input[name=submit] {
-webkit-appearance: none
}
.contact_sidebar {
text-align: center
}
.contact_icons {
display: block
}
.contact_icons img {
display: inline-block;
margin: 0 10px
}
.article {
padding-right: 0
}
.article p:first-of-type {
font-size: 1rem
}
.right a.btn {
margin-right: 0;
margin-top: 25px
}
#banner .banner_desc.red_bg h1 {
font-size: 3rem !important
}
.banner_desc p.small {
font-size: .8231rem;
max-width: 100%
}
.figure_wrap {
width: 100%;
margin-top: 20px
}
.m_30 {
width: 30% !important
}
.m_40 {
width: 40% !important
}
.left_align {
text-align: center !important
}
.range_wrap .c_50 {
width: 100%
}
.range_wrap .flex .c_50:first-child {
min-height: 50vh
}
.range_wrap.negative .inner {
margin-left: 0;
margin-right: 0;
margin-bottom: 20px
}
.c_75 .wrapper img {
max-width: 100% !important
}
.footer .c_50 {
width: 100%
}
.upsell .c_33, .upsell .c_66 {
width: 100%
}
.brand_filter .c_33 {
width: 50%
}
.inner_cart .c_40.wide .c_50 {
width: 50%
}
.inner_cart .c_40.wide {
width: 100%
}
.grouping .c_33, .grouping .c_66, .subs .c_33 {
width: 100%
}
.grouping .inner {
padding: 20px 0;
margin: 0
}
.grouping .c_66 .c_33 img {
display: none
}
.grouping .c_66 .c_33 .inner {
padding: 15px;
background-color: var(--color-background);
margin-bottom: 10px
}
.grouping .c_66 .c_33 .inner ul {
display: flex
}
.grouping .c_66 .c_33 .inner ul li {
width: 50%
}
.subs .range_desc {
margin-bottom: 20px
}
.subs .inner {
margin: 0
}
.group_header, .flex.reverse {
flex-direction: column-reverse
}
.group_header .c_66 {
width: 100%
}
.group_header .c_33 {
width: 100%;
height: 35vh
}
.group_header .inner {
padding: 25px 5%
}
.c_33, .grouping .c_25, .landing .c_50, .subs .c_66 {
width: 100%
}
.landing.negative .inner {
margin-left: 0 !important;
margin-right: 0 !important
}
.slider {
position: relative;
z-index: 1;
height: auto;
overflow: hidden
}
.slider .c_45 p span {
display: block
}
p.show {
margin-top: 10px !important
}
.banner_desc .flex li, .c_16 {
width: 50%
}
.article img {
max-width: 100% !important;
width: auto !important;
height: auto !important
}
img.article_img {
width: 100% !important;
margin-top: 30px
}
.c_14 {
width: 50% !important
}
.negative.boxes {
margin-left: -10px !important;
margin-right: -10px !important
}
.negative.boxes .c_14 .inner, .negative.boxes .c_25 .inner {
margin-left: 10px !important;
margin-right: 10px !important
}
.range_wrap.ltd .c_33 .c_100 {
width: 50% !important
}
.range_wrap.ltd .c_33 .c_100 p {
display: none
}
.range_wrap.ltd .c_33 .c_100 h3 {
margin-bottom: 20px
}
.offerings .inner {
margin-left: 0;
margin-right: 0
}
.brands .flex div {
flex: auto
}
.brands .flex a {
display: inline-block
}
.intro_wrapper .c_50:nth-child(1) {
height: auto;
clip-path: none;
border-left: none
}
.intro_wrapper .c_50, .intro_wrapper .c_55 {
width: 100%
}
.intro_wrapper .c_50:last-child .inner {
padding: 30px 5%
}
.intro_wrapper {
border-top: none
}
.tagging a {
display: block
}
#banner img, .featured img, .header img, .mobile_header img, .brands img, .logos img, .footer img.logo, .styles img, .groups img {
height: auto !important
}
.mobile_header.mobile_sticky img.alt_menu_icon {
height: 28px !important
}
#banner img {
width: 100% !important
}
#container {
display: block;
overflow: hidden
}
.desc img {
height: auto !important;
width: auto !important;
max-width: 100%
}
.desc h4:first-of-type, .desc h2:first-of-type {
font-size: 1.538rem !important
}
.article p:first-of-type, .desc p:first-of-type {
font-size: 1.077rem !important
}
.products a.img_wrap img {
width: 100%;
max-width: 100%
}
#sale_wrap span {
font-size: 1rem;
margin: 0;
display: none
}
#sale_wrap {
font-size: 1rem
}
#sale_wrap .c_33, #sale_wrap .c_100 {
flex: auto
}
#sale_wrap .c_100 {
width: 100% !important
}
.sale {
font-size: 1rem
}
#sale_wrap a {
margin-top: 8px;
border-radius: 10px
}
.product img {
width: 100% !important;
height: auto !important
}
.intro_wrapper .c_70, .intro_wrapper .c_30 {
width: 100%
}
.intro_wrapper .c_30 {
clip-path: none;
border-left: none
}
.intro_wrapper .negative {
margin-left: 0;
margin-right: 0
}
.intro_wrapper .inner {
margin: 0
}
.intro_wrapper .c_70 .inner {
padding-left: 5%;
padding-right: 5%
}
img.promo_img {
/*display: none*/
}
.inner_content .c_50 {
width: 100%
}
.intro .c_30 img {
display: block;
width: 100%
}
.sale .c_33 {
display: none
}
.sale .c_33 a {
background: none;
color: #fff;
font-size: .8231rem;
font-weight: 300;
text-transform: uppercase;
border-radius: 5px;
border: 1px solid #fff
}
.product.styles .wrapper img {
width: 100% !important;
max-width: 100% !important
}
#content_wrap {
padding: 10px 5%;
display: block;
overflow: hidden
}
.intro .c_90 {
width: 100%
}
.intro_wrapper {
border-bottom: none
}
.featured_lifestyle .c_50 {
width: 100%
}
.featured_lifestyle .c_50:nth-child(2) {
display: none
}
.info_box {
padding: 30px 5%
}
.intro_wrapper img {
height: auto !important
}
.intro_wrapper .c_30 {
display: none !important
}
.intro .c_20 {
width: 50% !important;
}
#product_wrap.landing .c_33 {
width: 100%;
}
form[name="payment-form"] .negative {
margin: 0px -10px !important;
}
.promo_banner .c_50, .bespoke .c_60, .bespoke .c_40 {
width: 100% !important;
}
.promo_banner {
margin: 0px 0px 20px 0px !important;
}
.promo_banner .inner {
margin: 5px 0px !important;
}
.bespoke_opts {
padding: 30px 0px;
}
.options .c_33 {
width: 50% !important;
}
.options .negative {
margin-left: -5px !important;
margin-right: -5px !important;
}
.bespoke_opts .big_wrap input[type="text"] {
padding: 6px 0px !important;
}
.img_bespoke, .img_bespoke img {
height: 55vh;
}
.ext_img_bespoke, .ext_img_bespoke img {
height: auto !important;
}
.bespoke select, .bespoke input {
border-radius: 0px !important;
}
.bespoke .options .c_50 {
width: 50%;
}
.faq .c_50 {
width: 100%;
}
.bespoke .grey_bg, img.bespoke_lifestyle {
margin-left: 0px;
}
.ext_bespoke .c_66, .ext_bespoke .c_33 {
width: 100%;
}
.ext_bespoke .c_33 {
height: 300px;
}
.offer_boxes .c_20 {
width: 50%;
}
.offer_boxes .c_20 .inner {
margin: 10px !important;
}
.inner_content p img {
height: auto !important;
}
.negative .inner {
margin: 0px;
}
.featured .c_33 {
background-color: var(--color-background);
margin-bottom: 20px;
}
.featured a.btn {
margin-bottom: 20px;
}
.range_wrap .c_20 {
width: 100%;
}
.range_wrap .c_20 img {
display: none;
}
.case_img {
position: relative;
width: 100%;
height: auto;
}
.case_img img {
opacity: 1 !important;
}
.cases .case_intro {
margin-left: 0%;
padding: 30px;
}
.cases .strapline {
padding: 20px 0% 20px 0px;
}
.intro_wrapper.no_b .intro {
padding-left: 5%;
padding-right: 5%;
}
.home_promos .c_50 {
width: 100%;
}
.single_icons {
background-color: #f0f0f0;
margin-right: 0px;
padding: 10px 20px 15px 20px;
margin-top: 20px;
border-bottom: 5px solid var(--color-primary);
}
.rtb_icons p {
font-size: 0.8231rem;
}
.single_icons h6 {
font-size: 1.231rem;
}
.rtb_icons .c_33 {
width: 25% !important;
}
.rtb_icons .c_66 {
width: 75% !important;
}
.wide_icons {
margin-top: 20px;
background-color: #f0f0f0;
padding: 15px !important;
}
.wide_icons .inner {
padding: 0px !important;
}
.wide_icons .rtb_icons .c_20 {
width: 50% !important;
flex: auto;
}
.wide_icons img {
width: 80% !important;
margin: 0px !important;
}
.wide_icons .c_66 {
justify-content: flex-start;
text-align: left !important;
padding: 5px 0px !important;
}
.wide_icons .rtb_icons .c_33 {
width: 30% !important;
text-align: left !important;
padding: 5px 0px !important;
}
.wide_icons .rtb_icons .c_66 {
/*width: 70% !important;*/
}
.desc img.fsc {
width: 25% !important;
}
.mobile_promos .c_50 {
width: 100%;
}
.mobile_promos img {
height: auto !important;
width: 100% !important;
}
.c_70, .c_95 {
width: 100%;
}
form .c_40, form .c_20 {
width: 50%;
}
form .negative {
margin-left: -10px !important;
margin-right: -10px !important;
}
form .negative .inner {
margin-left: 10px !important;
margin-right: 10px !important;
}
.shipping_table .price_cell {
width: 90%;
margin-left: 10%;
padding-top: 0px;
}
.shipping_table .c_10, .shipping_table .c_80 {
text-align: left;
}
.shipping_table .c_80 {
width: 90%;
}
.shipping_table .inner {
padding-left: 20px;
padding-right: 20px;
margin-left: 0px;
margin-right: 0px;
}
.brands .flex div {
flex: auto;
width: calc(33.3333% - 30px);
margin: 0px 15px;
}
#shipping_details .inner {
padding-left: 0px;
padding-right: 0px;
}
.fsc_wrap {
margin: 0px auto;
}
.modal .c_75 {
width: 100%;
}
img.promo {
height: auto !important;
}
.main_slider {
height: 650px;
display: block;
overflow: hidden;
}
.main_slider .glide__slide {
height: 650px;
}
.slider_inner {
margin-left: 0%;
padding: 20px 5%;
height: 650px;
align-items: flex-start;
align-content: flex-start;
}
.main_slider .slider_bg {
position: relative;
width: 100%;
height: 250px;
clip-path: polygon(0% 0, 100% 0, 100% 100%, 0% 100%);
}
.slider_inner h2 a, .slider_inner h1 {
font-size: 1.692rem !important;
line-height: 125% !important;
}
.main_slider p {
font-size: 0.9231rem;
}
.dropper {
display: none;
}
.negative {
margin-left: 0px !important;
margin-right: 0px !important;
}
#footer_wrap, #content_wrap, section {
display: block;
overflow: hidden !important;
}
.c_60 .c_85 {
width: 100%;
}
.inner_content .c_66, .inner_content .c_66 .c_90 {
width: 100%;
}
.upsell_inner {
color: #fff;
padding: 50px 5%;
background-color: var(--color-primary);
width: 90%;
position: relative;
z-index: 5;
clip-path: none;
}
.lifestyler {
display: none;
}
.upsell_inner a.btn {
display: block;
text-align: center;
margin-bottom: 10px;
}
.upsell_inner a.btn:hover {
display: block;
}
.footer_logos {
flex-direction: column;
width: 100%;
align-content: center;
}
.footer_logo div a {
width: 100%;
}
.footer_logos div .telephone a {
font-size: 100%;
}
.footer_logos .trustpilot-widget iframe {
margin: auto;
}
.footer_info {
align-content: center;
justify-content: center;
}
.footer_info li {
min-width: 40%;
}
.product_form .big_wrap input[type=text] {
width: 75% !important;
border: 1px solid var(--color-border);
}
.mini_reviews .c_70 {
width: 70%;
}
.mini_reviews .c_30 {
width: 30%;
}
.title_wrap img {
width: 15% !important;
height: auto !important;
top: -5px !important;
}
#image {
margin-right: 0px !important;
}
.range_status .c_40 p {
font-size: 1.538rem;
}
.range_status .c_40 {
width: 70% !important;
}
.range_status .c_60 {
width: 30%;
}
.c_8 {
width: 12%;
}
.c_76 {
width: 64%;
}
.single .big_wrap input[type="text"] {
width: calc(100% - 2px);
padding-left: 0px !important;
padding-right: 0px !important;
}
select {
-webkit-appearance: none; /* removes iOS native dropdown style */
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 16px;
}
.wide_icons .rtb_icons .c_20 {
width: 50%!important;
margin-top: 10px;
margin-bottom: 10px;
text-align: center!important;
}
.wide_icons .rtb_icons .c_20 .c_33 {
width: 100%!important;
text-align: center!important;
}
.wide_icons .c_66 {
text-align: center!important;
justify-content: center;
width: 100%!important;
}
.wide_icons .c_66 p {
width: 100%;
text-align: center;
}
.wide_icons img {
width: 50% !important;
margin: 0px auto!important;
}
.block_ranges .c_25 {
width: 100%;
margin-bottom: 30px;
}
.block_ranges img {
width: 100%!important;
}
.block_ranges ul {
margin-left: 20px;
font-size: 1rem;
}
.block_ranges .flex .c_40 {
display: flex;
align-content: center;
align-items: center;
}
.block_ranges .c_40 p {
padding: 0px;
margin: 0px;
font-weight: 700;
}
.c_75 {
width: 100%;
}
#product_wrap .flex.negative, #product_wrap .flex.negative .inner {
margin: 0px!important;
}
picture {
margin-bottom: 20px;
}
.range_info {
padding: 10px 20px 20px 20px;
background-color: #f0f0f0;
}
form[name=aftersales] ul.flex li, form[name=aftersales] .c_25, form[name=aftersales] .c_33 {
width: 100%!important;
}
form[name=aftersales] label small {
position: relative;
display: block;
}
.split_promo {
flex-direction: column;
}
.split_promo a {
width: 100%;
}
.size_wrap .max {
background-size: auto 30%!important;
background-position: 95% 87%!important;
padding-left: 5%;
padding-right: 5%;
}
}
@media screen and (min-width:768px) {
.reason-to-buy img {
margin-top: 0;
}
#tags_glide ul {
background-color: white;
}
#tags_glide li a {
display: flex;
flex-direction: row;
justify-content: center !important;
}
.footer_info {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.checkout-input {
width: 70%;
}
.title_wrap {
margin-top: 0px;
}
}
@media screen and (min-width: 1024px) {
#mobile_nav {
display: none
}
/* HEADER TOP MENU */
#header_wrap {
display: block
}
/* HEADER DESKTOP MENU DROPDOWN */
#dropdown_wrap {
position: relative;
z-index: 99999;
max-width: 1210px;
margin: 0 auto;
height: 0;
overflow: visible
}
.dropdown {
position: absolute;
background-color: #fff;
width: calc(100% - 0px);
left: 0;
z-index: 1;
text-align: left !important;
overflow: hidden;
height: 0;
opacity: 0;
-webkit-transition: height 0ms 400ms, opacity 400ms 0ms;
-moz-transition: height 0ms 400ms, opacity 400ms 0ms;
transition: height 0ms 400ms, opacity 400ms 0ms;
animation-play-state: paused;
-webkit-animation-play-state: paused
}
.dropdown_wrapper:hover .dropdown {
height: auto;
opacity: 1;
-webkit-transition: height 0ms 0ms, opacity 300ms 0ms;
-moz-transition: height 0ms 0ms, opacity 300ms 0ms;
transition: height 0ms 0ms, opacity 300ms 0ms;
-webkit-transition-delay: .6s;
-moz-transition-delay: .6s;
transition-delay: .6s;
overflow: visible;
animation-play-state: running;
-webkit-animation-play-state: running
}
.menu ul {
padding: 0;
margin: 0;
list-style: none
}
.menu ul li {
flex: 1
}
#menu_wrap {
position: relative;
z-index: 999999;
}
.menu {
position: relative;
z-index: 999999
}
.menu .dropdown_wrapper {
text-align: center;
flex: 0.9;
overflow: hidden;
max-height: max-content;
}
.dropdown_wrapper a.drop_btn, .dropdown_wrapper a.special {
display: block;
padding: 15px 5%;
font-size: .875rem
}
.menu .dropdown_wrapper:nth-child(1) {
flex: 1.1
}
.menu .dropdown_wrapper:nth-child(2) {
flex: 1.1
}
.menu .dropdown_wrapper:nth-child(5) {
flex: 1.1
}
.menu .dropdown_wrapper:nth-child(3), .menu .dropdown_wrapper:nth-child(10), .menu .dropdown_wrapper:nth-child(11) {
flex: 0.7
}
.menu .dropdown_wrapper:nth-child(12) {
flex: 1.05
}
.menu a.drop_btn:hover {
background-color: #000;
text-decoration: none
}
.menu a.special {
background-color: var(--color-accent);
color: #fff
}
.menu a.special:hover {
background-color: var(--color-accent);
text-decoration: none
}
#dropdown_wrap {
background-color: #fff
}
.sub_links {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex
}
.sub_links a {
font-size: .8231rem;
display: inline-block;
color: #7d9db9;
text-transform: uppercase;
width: 100%;
margin-bottom: 10px
}
.inner_dropdown {
padding: 20px 30px;
border-bottom: 5px solid #b3c2d6;
-moz-box-shadow: 0 0 5px var(--color-shadowbox);
-webkit-box-shadow: 0 0 5px var(--color-shadowbox);
box-shadow: 0 0 5px var(--color-shadowbox)
}
.inner_dropdown p a, .inner_dropdown p.title {
font-size: 1.231rem;
font-family: var(--font-secondary-bold), var(--font-generic);
line-height: 100%
}
.inner_dropdown .menu_last_child {
margin-top: 10px;
}
.inner_dropdown .c_33 ul a,
.inner_dropdown .internal_doors_menu_column ul a {
display: block;
margin-bottom: 10px;
background-image: url(/images/icon-fwd.png);
background-repeat: no-repeat;
background-position: left center;
background-size: 15px auto;
padding: 0px 10px 0 20px;
}
.inner_dropdown .internal_doors_menu_column ul a {
font-size: .875rem;
}
.inner_dropdown p {
padding: 10px 0 10px 0;
margin: 0
}
.inner_dropdown p.quick_intro {
font-size: .9231rem
}
.home_promos {
margin-bottom: 20px !important;
}
.main_promos {
margin-bottom: 20px !important;
}
.inner_dropdown a.red_btn, a.small_btn {
font-size: 1rem !important;
padding: 8px 10px
}
a.small_btn {
display: block;
text-align: center
}
.inner_dropdown h2 {
position: relative;
z-index: 1;
display: inline-block;
margin-bottom: 15px;
}
.inner_dropdown h2 a, .inner_dropdown .menu_view_all a {
color: var(--color-accent);
display: inline-block;
text-decoration: underline;
font-size: 1.25rem
}
.inner_dropdown h2:after {
content: ' ';
height: 0;
position: absolute;
width: 0;
border: 7px solid transparent;
border-left-color: var(--color-accent);
top: 6px;
right: -20px;
z-index: 1
}
.menu_view_all .dropdown-bespoke-link {
color: var(--color-primary) !important;
font-size: var(--font-size-body) !important;
font-weight: 900;
padding: 15px 0 5px 0;
}
.menu_view_all {
display: flex;
flex-direction: column;
justify-content: center;
padding: auto;
text-align: right;
}
.menu_view_all img {
max-width: 100%;
max-height: 100%;
}
.menu_view_last_child {
position: absolute;
bottom: 10px;
right: 30px;
}
#list-space {
height: 35px;
}
#checkout-section {
width: 60% !important;
}
.title_wrap {
position: relative;
display: flex;
flex-direction: row;
justify-content: space-between;
}
#mini_tp {
font-size: 0.7231rem;
width: 110px;
bottom: 15px;
left: 15px;
}
.main_promos img {
height: auto!important;
}
}
/* Order shipments and tracking */
.shipment_wrap {
border: 1px solid #40434c;
margin: 15px 0;
border-radius: 10px;
overflow: hidden;
display: block;
}
.order_page .shipment_wrap h4 {
font-size: 20px;
line-height: 1.3;
background-color: #40434c;
color: #fff;
padding: 15px 15px;
margin: 0px;
}
.shipment_inner {
padding: 15px;
}
.shipment_inner p {
padding:0px 0px 10px 0px;
margin: 0px 0px 0px 0px;
display: block;
border-bottom: 1px solid #ddd;
}
.shipment_wrap .basket_wrap {
width:100%;
margin-top:10px;
margin-bottom:15px;
}
.order_page .shipment_progress {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
gap: 16px;
list-style: none;
margin: 0;
padding: 0 0 15px;
border-bottom: 1px solid #ddd;
}
.order_page .shipment_step {
display: flex;
align-items: center;
gap: 10px;
color: #66777b;
font-size: 14px;
line-height: 1.4;
}
.order_page .shipment_step_label {
font-size: 14px;
}
.order_page .shipment_inner .shipment_delivery_info,
.order_page .shipment_inner .shipment_progress_detail {
padding: 15px 0;
margin: 0;
}
.order_page .shipment_delivery_row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 15px 0;
border-bottom: 1px solid #ddd;
}
.order_page .shipment_delivery_row .shipment_delivery_info {
flex: 1;
min-width: 0;
padding: 0;
border: 0;
}
.order_page .shipment_tracking_actions {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 10px;
flex-shrink: 0;
}
.order_page a.shipment_tracking_button {
display: inline-block;
padding: 8px 12px;
background: #27823a;
color: #fff;
border-radius: 5px;
font-weight: bold;
text-decoration: none;
text-align: center;
}
.order_page a.shipment_tracking_button:hover,
.order_page a.shipment_tracking_button:focus-visible {
background: #40434c;
text-decoration: none;
}
@media (max-width: 768px) {
.order_page .shipment_delivery_row {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.order_page .shipment_tracking_actions {
align-items: stretch;
}
}
.order_page .shipment_step_marker {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 28px;
height: 28px;
border: 1px solid #66777b;
border-radius: 50%;
}
.order_page .shipment_step_complete,
.order_page .shipment_step_current {
color: #40434c;
}
.order_page .shipment_step_current {
font-weight: bold;
}
.order_page .shipment_step_complete .shipment_step_marker,
.order_page .shipment_step_current .shipment_step_marker {
background: #40434c;
border-color: #40434c;
color: #fff;
}
@media (max-width: 768px) {
.order_page .shipment_progress {
grid-template-columns: 1fr;
gap: 12px;
}
.order_page .shipment_step_break {
display: none;
}
}
.order_page {
overflow-wrap: anywhere;
}
.order_page .content_wrap, .order_page .order_sidebar {
min-width: 0;
}
.order_page .shipment_item {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) 4rem minmax(7rem, 0.75fr);
width: 100%;
border-bottom: 1px solid #ddd;
}
.order_page .shipment_item > div {
min-width: 0;
padding: 10px 15px;
}
.order_page .shipment_image img {
height: auto;
}
.order_page .shipment_image p {
padding: 0;
border: none;
}
.order_page .shipment_label {
display: none;
}
.order_page .shipment_stock_available {
color: #27823a;
}
@media (max-width:768px) {
.order_page .content_wrap, .order_page .order_sidebar, .order_page .content_wrap .c_95 {
width: 100%;
}
.order_page .order_sidebar {
margin-top: 30px;
}
.order_page .addresses {
row-gap: 24px;
}
.order_page .shipment_item {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
padding: 16px 0;
}
.order_page .shipment_item > div {
padding: 0;
}
.order_page .shipment_item:not(.shipment_item_bespoke) .shipment_image {
display: none;
}
.order_page .shipment_details, .order_page .shipment_item_bespoke .shipment_image {
grid-column: 1 / -1;
}
.order_page .shipment_quantity {
grid-column: 1 / 3;
}
.order_page .shipment_total {
grid-column: 3 / -1;
text-align: right;
}
.order_page .shipment_label, .order_page .qty_wrap {
display: inline;
}
}
.order_page .addresses { margin: 20px 0; }
.order_page .shipment_image img { max-width: 100%; }
.order_page .red { color: #c00; }
@media (max-width:768px) {
.order_page > .c_66, .order_page > .c_33 { width:100%; }
.order_page .addresses > .c_50 { width:100%; }
}