@font-face {
    font-family: "Nioicon";
    src: url("/fonts/Nioicon.eot");
    src: url("/fonts/Nioicon.eot#iefix") format("embedded-opentype"),url("/fonts/Nioicon.ttf") format("truetype"),url("/fonts/Nioicon.woff") format("woff"),url("/fonts/Nioicon.svg#Nioicon") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: block
}

body {font-family: 'NexaExtraLight';}

.menu-mobile {display:none;}

.tech-mobile {display: none; border: none; background: linear-gradient(to bottom, #0399dd, #048ccb); border-radius: 50px; color: #fff; padding: 10px 20px; font-size: 17px; margin: 25px 0; text-decoration: none;}

.breadcrumb {padding: 20px 0 0 0; text-decoration:none; color:#0094d8; font-size: 14px; font-family: "NexaExtraLight", sans-serif; font-weight: normal; display:inline-block; margin:0px 5px;}
.breadcrumb.current {color:#0094d8; opacity:1 !important; font-family: 'NexaExtraLight';}
.breadcrumb a {text-decoration:none; color:#a1a1a1;}

.wrapper-wide {max-width: 95%; margin: 0 auto;}
.wrapper {max-width: 85%; margin:0 auto; width:100%;}

.grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-gap: 30px;}

.text-right {text-align: right !important;}
.text-left {text-align: right !important;}
.text-center {text-align: right !important;}

.header-top {box-sizing: border-box; background: #0094d8; color: #fff; text-align: center; font-weight: 300; font-family: 'NexaExtraLight', sans-serif; transition: 0.5s;}
.header-top p {padding: 15px 0px; display: inline-block;}
.header-top p a {color: #fff; border-bottom: 1px solid #fff; text-decoration: none;}
.header-top .swiper-slide {background: inherit;}
.header-top .swiper {margin: 0;}
.header-top .swiper .swiper-slide {opacity: 0!important;}
.header-top .swiper .swiper-slide.swiper-slide-active {opacity: 1!important}

.top-nav {background:#e5f0f5; font-size: 12px; font-family: 'NexaExtraLight'; color: #a1a1a1; padding:15px 0;}
.top-nav ul {list-style: none; margin:0; padding: 0; display:flex; justify-content: flex-end;}
.top-nav ul li {display: inline-block;}
.top-nav ul a {color:#444; text-decoration: none; display: block; margin-left: 10px;}
.top-nav ul a:hover {color:#048ccb;}
.account-icon {width: 20px;  height: 20px;   transition: 0.5s; filter: brightness(1); position: relative; top:-6px;}

.top-nav p a {color:inherit; text-decoration:none;}

.text-right ul li strong a {font-weight: normal; font-family: 'NexaTextHeavy';color:#0399dd;}

.fabs-menu li a {font-size: 16px; font-family:'NexaTextHeavy'; color:#fff;}
.fabs-menu li a:hover {color:#fff;}
.fabs-menu .text-right, .fabs-menu  {text-align:center !important; background:#048ccb;}
.fabs-menu.top-nav ul {justify-content: center;}
.fabs-menu.top-nav ul li {margin: 0 10px;}

/* header:hover {background: #464646;} */

header {background:#fff; padding: 0; position: relative; transition: background 0.6s ease;}
header.dark-version {background:#fff;}
header.dark-version li a {color:#444;}
header .logo {width: 240px; display:flex; align-items: center;}
header .logo a {width: 100%;}
header .logo > a > img {opacity: 1!important;}
header nav ul {list-style: none; margin: 0; padding: 0;}
header nav ul li {display: inline-block;}
header nav ul li a {color:#fff; text-decoration: none; display: block; margin-left: 5px; font-size: 17px; font-family: "NexaTextBook";}
header nav ul li ul li a:hover {color:#048ccb;}
header .nav-wrapper {display: flex; justify-content: flex-end; align-items: center;}
header .grid {grid-template-columns: 450px 1fr;}
header .wrapper {max-width: 95%;}

.menu > ul > li a.active ~ ul {display:block!important;}

nav .menudepth0.last_child a {border: none; background: linear-gradient(to bottom, #0399dd, #048ccb); border-radius: 50px; color: #fff; padding: 10px 20px; font-size: 16px; margin: 25px 0 25px 20px;}

.banner.home {background:#000;}
.banner.home:after {content: ''; width: 758px; height: 60vh; display: block; bottom: 0; position: absolute; right: -460px; z-index: 10; background: #fff7; background-repeat: no-repeat; backdrop-filter: blur(10px); -webkit-mask-image: url(/img/icon-overlay.svg); mask-image: url(/img/icon-overlay.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; mask-size: contain;}
.banner.home h1 {font-family: 'NexaTextHeavy';}
.banner.home img {opacity: 0.6;}
.banner {position: relative; height:96vh; overflow: hidden;}
.banner.home .banner-overlay > .wrapper {display: flex; height: 85%; align-items: flex-end;}
.banner-overlay {position:absolute;width:100%; height: 100%; top:0;}

.banner.home img {
  opacity: 0.6;
  height: 100%;
  object-fit: cover;
}

.banner.home video {opacity:0.7; mix-blend-mode: multiply; filter: grayscale(1);}

.banner.standard video {top: 50%; left: 50%; transform: translate(-50%,-50%); position: relative; width:100%;}

.icon-overlay {width:30%; height: 100%; position:absolute; z-index:99; bottom:0; right:-15%;}
.icon-overlay svg {opacity:0.8;}

.banner article {padding: 4vw 0; color:#fff;}
.banner p {text-transform: uppercase; letter-spacing: 2px; font-size: 20px;}
.banner h1 {font-size: 2.5vw; margin-top: 15px; max-width: 600px; line-height: 1.2;}

.banner.standard {height:60vh; background:#000; position:relative}
.banner.standard:after {content: ''; width: 758px; height: 60vh; display: block; top: 0; position: absolute; right: -460px; z-index: 10; background: #fff7; background-repeat: no-repeat; backdrop-filter: blur(10px); -webkit-mask-image: url(/img/icon-overlay.svg); mask-image: url(/img/icon-overlay.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; mask-size: contain;}
.banner.standard .wrapper {display: flex;  align-items: flex-end; height: 100%;}
.banner.standard img {object-fit: cover; position: absolute; width: 100%; height: 100%; opacity: 0.7;}

.overlay-slide {position:absolute;width:100%; height: 100%; top:0; display: flex; align-items: flex-end; justify-content: flex-start;}
.overlay-slide:after {content:''; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%); height:100%; width: 100%; z-index:80; left:0; position:absolute;}
.overlay-slide article {padding-bottom: 3vw; position: relative; z-index:99}
.overlay-slide p {color:#fff; margin-top: 10px; font-size: 24px; max-width: 500px; line-height: 1.4;}



.m-t-50 {margin-top: 50px;}

blockquote {background-color: #dff0f7; border-radius: 2px; padding: 20px 30px 5px 30px; display: block; position: relative; font-size: 17px; margin: 40px 0 40px 0}

.block {padding: 6vw 0 8vw; position: relative;}
.max-80 {max-width: 80%;}
.block h5, .overlay-slide h5 {text-transform: uppercase; letter-spacing: 2px; font-size: 11px; line-height:1.5; color: #a1a1a1;}

.block h1 {font-size: 2.7vw; line-height: 1.4; max-width: 85%; margin-bottom: 2.5vw;}
.block h2 {font-size: 2.7vw; line-height: 1.4; max-width: 85%; margin-bottom: 2.5vw;}
.block h3 {font-size: 24px; margin-top: 15px; max-width: 600px; line-height: 34px; max-width: 75%;}
.block h4 {font-size: 40px; margin-top: 15px; max-width: 600px; line-height: 34px;}
.block p {font-size: 17px; line-height: 1.6; margin: 0 0 25px 0}
.block p a {text-decoration: none; border-bottom: 1px solid #0094d8; color: #000; font-weight: 600;}
.block p strong {font-weight: normal; font-family: 'NexaTextHeavy';}

.block.two .right-col h3, .block.two .right-col p + h1 {font-family: 'NexaTextHeavy'; margin: 25px 0; font-size: 18px; text-transform:uppercase; letter-spacing:1px;}

.block ul {list-style: none; margin: 20px 0;}
.block ul li {font-size: 17px; line-height: 1.6; margin: 0 0 5px 0; position: relative; padding-left: 20px}
.tab-features-v2 li:before, .tab-features-v2 li:after {display:none !important}
.block ul li::before  {
    content: "";
    position: absolute;
    background: #0094d8;
    left: 0;
    top: 13px;
    height: 2px;
    width: 8px;
  }

  .block ul li::after {
    content: "";
    position: absolute;
    background: #0094d8;
    left: 3px;
    top: 10px;
    height: 8px;
    width: 2px;
  }

.block ul li sup, .block p sup {font-size: 11px; position:relative; bottom: 5px;}
.block ul li strong {font-family: 'NexaTextHeavy';}


.block.two.with-images ul li a {color:inherit; text-decoration:none; border-bottom: 1px solid #0094d8}


.block.two h1, .block.two h2 {max-width: 100%; font-size: 33px;}
.block.two .button {margin-top: 30px; display: inline-block;}

.with-images img {border-radius: 3px; margin: 3vw 0; position: relative;}

.with-images img {margin: 3vw 0; position: relative;}
.left-col {}

.left-col h3 {margin-bottom: 25px;}
.left-col h3 a {text-decoration: none; border-bottom: 1px solid #0094d8; color: #000; font-weight: 600;}

.button {border-bottom: 1px solid #222; font-weight: normal !important; color: #222; text-decoration: none; padding: 10px 45px 10px 0; font-size: 24px; position: relative; line-height: 1.2;}
.button::after { font-family: "Nioicon"; content: "\e92a"; font-style: normal; font-weight: normal; font-size: 20px; position: absolute; bottom:14px; right: 0px; display: block; transition: 0.5s;}
.button:hover {color:#0094d8 !important; cursor:pointer}

.button-2 {border: none;
    background: linear-gradient(to bottom, #0399dd, #048ccb);
    border-radius: 50px;
    color: #fff !important;
    padding: 10px 20px;
    font-size: 17px; margin-top: 15px; display: inline-block}

.block.no-padding-top {padding-top:0}
.block.no-padding-bottom {padding-bottom:0}
.block.half-padding-btm {padding-bottom:5vw}
.block .grid {grid-template-columns: 450px 1fr;}
.block .grid-2 {display: grid; grid-template-columns: 1fr 1fr; grid-gap: 4vw;}
.block .grid-2.images {align-items: center; padding: 6vw 0 0;}
.block .grid-2.images h2 {font-size: 1.6vw;}
.block .grid-2.images article:first-child {padding: 0 5vw 0 0;}
.block .grid-2.images article:last-child {padding: 0 0 0 5vw;}
.block .grid-2.images article p:last-child {margin-bottom: 0px;}
.block.four .grid {grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); grid-gap: 8vw;}
.block.four article {display: flex; flex-wrap: wrap; align-items: center; max-width: 85%;}
.block.four h2 {line-height: 1.2;}
.block.four p {font-size: 23px; opacity: 0.8;}
.block.four .button {margin-top: 20px; display: inline-block;}

.block.three h3 {font-size: 3vw; margin-bottom: 3vw;}

.block.two.entrance {padding: 6vw 0 0;}
.block.two.entrance h2 {font-size: 1.6vw; max-width: 750px; margin-bottom: 1vw;}
.block.two.entrance article:last-child {padding-left: 5vw;}

.tab-features-v2 ul {list-style: none; max-width: 500px;}
.tab-features-v2 ul li {border-bottom: 1px solid #ccc; padding: 15px 0;}
.tab-features-v2 p {font-size: 24px; margin:0; color: #a1a1a1; position: relative;}


.tab-features-v2__control[aria-selected=true] p:after { font-family: "Nioicon"; content: "\e92a"; font-style: normal; font-weight: normal; font-size: 22px; position: absolute; top: 2px; right: 0px; display: block; transition: 0.5s;}

.dark {background:#464646;}
.blue {background: #0094d8;}
.dark.block article, .blue.block article {color: #fff;}
.dark.block a, .blue.block a {color: #fff; border-color: #fff;}

.icon-bg {background-image: url(/img/icon-overlay.png); background-repeat:no-repeat; background-position:right; background-size:20vw}

.no-padding-top: {padding-top:0}

.feature-item {position:relative; background:#000; height: 450px; cursor:pointer;}
.feature-item a {display: block; cursor:pointer}
.feature-item h2 {margin-bottom: 10px; line-height: 1; font-size: 30px;}s
.feature-item p {margin:0}
.feature-item article {position:absolute; bottom: 30px; left:30px; z-index:99; color:#fff; text-decoration:none}
.feature-item figure img {margin:0; opacity:0.8; object-fit:cover; position:absolute; width:100%; height:100%}
.feature-item:hover {opacity:0.5}

.gallery{ display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 20px;}
.gal-container{ width: 100%; height: 0; padding-bottom: 100%; position: relative;}
.gal-container figure { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;}
.gal-container img {height:100%; object-fit:cover:}

.series-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(600px, 1fr)); grid-gap: 30px; margin-bottom: 50px}
.series-grid .feature-item:only-child {max-width: 49%;}

.products-grid {display: grid; grid-template-columns: repeat(4, minmax(350px, 1fr)); grid-gap: 30px;}


.product-item {border:1px solid #eee; position:relative; background: url(/uploads/images/banners/gradient-banner.jpg);  background-position: center; max-width: 350px; width:100%}
.product-item img {margin:0}
.product-item figure {background:transparent;}
.product-item article {padding: 25px 30px 0 30px; background:transparent; color:#fff; border-top: 1px solid #8889}
.product-item strong {text-transform:uppercase; font-size: 14px;}
.product-item p {line-height:16px !important; margin-top: 10px !important}
.product-item .open {width: 30px; height: 30px; position:absolute; right:25px; bottom:30px; display: block}
.product-item a {text-decoration:none; color: inherit;}
.product-item h5 {font-size: 13px;}

.project > .wrapper {max-width: 1000px; margin:0 auto}
.project.block h2 {font-size: 30px; margin-top: 20px;}
.project.block h2 a {text-decoration:none; color:#999; border-bottom: 1px solid #0399dd}
.project.block h3 {text-transform:uppercase; font-family: 'NexaTextHeavy'; font-size: 18px; letter-spacing:1px; margin: 20px 0}

.blog-item img {width:auto; height:auto;}

.toitu-logo {width: 100px; position:absolute; right: 3vw; top:3vw; height:100px; display: block;}
.toitu-logo img {height:100px;}

.slider {margin-bottom: 50px;}
.slider h3 {color:#fff; font-size: 24px; font-weight: bold; margin-top: 15px;}
.slider .overlay-slide {}
.slider.home-slider a {max-height: 100%;}
.slider a {display:block; max-height: 450px; overflow:hidden; background:#222; height: 100%}

.mySwiper2 .swiper-slide {width: 85% !important; margin:0 auto}
.swiper-pagination {margin-bottom: 30px}
.swiper-pagination-bullet {background:#fff !important; opacity:1 !important; width:8px !important; height: 8px !important}
.swiper-pagination-bullet-active {width:12px !important; height: 12px !important; position: relative; top: 2px;}

.mySwiper2 .swiper-slide-prev, .mySwiper2 .swiper-slide-next {overflow: hidden;}
.mySwiper2 .swiper-slide-prev img, .mySwiper2 .swiper-slide-next img, .mySwiper2 .swiper-slide-prev div, .mySwiper2 .swiper-slide-next div {filter: blur(100px); }

.brochures.grid {display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 30px;
  justify-content: start; /* This aligns items to the left */}

.brochure-item {background:#eee; }
.brochure-item {font-size: 15px; margin:0px; font-family: 'NexaTextHeavy'; text-transform:uppercase; letter-spacing: 1px; color:#0094d8; text-decoration: none;}
.brochure-item img {margin-bottom: 0px; mix-blend-mode:multiply}

.location-list {
   display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, max-content));
  grid-gap: 30px;
  justify-content: start; /* This aligns items to the left */
}

.fabricator-item {margin-bottom: 0px; background:#eee; padding: 30px; max-width: 290px;}
.location-list .fabricator-item .title {cursor: pointer; margin: 0; display: block; padding: 10px 0 10px 0; line-height: 24px; position: relative; font-size: 16px;  outline: none;}
.item-heading {margin: 30px 0; border-top: 1px solid #dff0f7; border-bottom: 1px solid #dff0f7;}
.item-heading h4 {font-size: 15px; margin:0px; font-family: 'NexaTextHeavy'; text-transform:uppercase; letter-spacing: 1px; padding: 10px 0; color:#0094d8}
.fabricator-item p {margin:0; padding:0; font-size: 14px;}

.logos-wrapper {background:#F0F0F0; padding: 15px 0; display:flex; justify-content: center}
.logos-wrapper > div {margin: 0 15px; mix-blend-mode:multiply}
.logos-wrapper img {width: auto; height:70px;}

.social-links em { font-family: "Nioicon"; font-size: 18px; opacity:0.4}
.social-links em.ni-linkedin {font-size: 19px}

.fancybox-slide {height: 90%; left: 50%; top: 50%; transform: translate(-50%,-50%); max-width: 75%; width: 100%;}
.fancybox-content {width:100%}


.fancybox-content .custom-navigation {display: flex; justify-content: space-between; margin-top: 10px;}
.fancybox-content .custom-navigation button {border-radius: 0px; padding: 10px 20px; border: none; outline: none; font-family: inherit; transition: 0.5s; background: #464646; color: #fff; cursor: pointer; font-weight: normal; font-family: 'NexaTextHeavy'; text-transform: uppercase;}
.fancybox-content .custom-navigation button:hover {background: #000; color: #fff;}
.fancybox-content {padding: 40px;}


.fancybox-content figure, .colours .image-container figure {position:relative; border: 1px solid #eee; overflow: auto;}



.fancybox-content figure img, .colours .image-container figure img {}
.fancybox-content figure.lrg {height: 400px; padding: 40px;}
.fancybox-content article h5 {text-transform: uppercase; letter-spacing: 2px; font-size: 13px; color: #a1a1a1; margin-bottom: 20px;}
.fancybox-content article p strong {font-weight: normal; font-family: 'NexaTextHeavy'; text-transform: uppercase; font-size: 24px; line-height: 1;}
.fancybox-content article p {line-height: 23px ; margin-bottom: 20px; font-size: 15px;}
.fancybox-content .swatches {display: flex; flex-wrap:wrap; grid-gap: 10px; margin: 20px 0;}
.fancybox-content .swatches a {border-radius: 50vw; background: #eee; height: 30px; width: 30px; position: relative; overflow: hidden;border: 1px solid #cdcdcd;}
.fancybox-content .swatches a img {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;}
.fancybox-content .button-grey, .fancybox-content .button-dark {border-radius: 0px; padding: 10px 20px; border: none; outline: none; font-family: inherit; transition: 0.5s; background: #eee; color: #000; cursor: pointer; display: inline-block; margin-right: 20px; text-decoration: none;}
.fancybox-content .button-dark, .fancybox-content .button-grey:hover {background: #000; color: #fff;}
.fancybox-content .button-dark:hover {background: #eee; color: #000;}

.colours .image-container {position:relative;}

.colours-popup .overlay-colour {max-height: 400px}


.image-container.fancybox-content {
    max-width: 600px; /* Set your desired max width */
    margin: 0 auto;   /* Center the popup horizontally */
}


.fancybox-content article p .link {text-decoration:none; border-bottom: 1px solid #0399dd; color:inherit; font-family: 'NexaTextHeavy'}

.fancybox-content b {font-weight: normal; font-family: 'NexaTextHeavy';}

.fancybox-content .overflow > div .sticky {display: block;}
.fancybox-content .overflow > div .form-slide {display: none;}

.fancybox-content .overflow.active > div .sticky {display: none;}
.fancybox-content .overflow.active > div .form-slide {display: block;}

.overlay-colour {mix-blend-mode:multiply; display:block; overflow:hidden}

.form-slide {position: relative;}

.Mar {background: url('/uploads/dulux/Interpon%20Black%20Matt%20Low%20Mar.gif');}
.Bronco {background: url('/uploads/dulux/Duralloy%20Matt%20Bronco.gif');}
.Bronze {background: url('/uploads/dulux/Duralloy%20Window%20Bronze%20Kinetic.gif');}
.Cloth {background: url('/uploads/dulux/Duralloy%20Matt%20Canvas%20Cloth.gif');}
.Blue {background: url('/uploads/dulux/Duralloy%20Matt%20New%20Denim%20Blue.gif');}
.Grey {background: url('/uploads/dulux/Duralloy%20Matt%20Ghost%20Grey.gif');}
.Charcoal {background: url('/uploads/dulux/Duralloy%20Matt%20Charcoal.gif');}
.Green {background: url('/uploads/dulux/Duralloy%20LSG%20Matt%20Permanent%20Green.gif');}
.Friars {background: url('/uploads/dulux/Duralloy%20Matt%20Grey%20Friars.gif');}
.Iron {background: url('/uploads/dulux/Duralloy%20Matt%20Iron%20Sand.gif');}
.Karaka {background: url('/uploads/dulux/Duralloy%20LSG%20Matt%20Karaka.gif');}
.Lignite {background: url('/uploads/dulux/Duralloy%20Matt%20Lignite.gif');}
.Mist {background: url('/uploads/dulux/Duralloy%20Matt%20Mist%20Green.gif');}
.Off {background: url('/uploads/dulux/Duralloy%20Matt%20Off%20White.gif');}
.Red {background: url('/uploads/dulux/Duralloy%20Matt%20Pioneer%20Red.gif');}
.Sand {background: url('/uploads/dulux/Duralloy%20Matt%20Desert%20Sand.gif');}
.Sandstone {background: url('/uploads/dulux/Duralloy%20Matt%20Sandstone%20Grey.gif');}
.Pearl {background: url('/uploads/dulux/Duralloy%20Metropolis%20Matt%20Silver%20Pearl%20Kinetic.gif');}
.Star {background: url('/uploads/dulux/Duralloy%20Silver%20Star%20Kinetic.gif');}
.Titania {background: url('/uploads/dulux/Duralloy%20Matt%20Titania.gif');}
.White {background: url('/uploads/dulux/Duralloy%20Arctic%20White.gif');}
.Appliance-White {background: url('/uploads/dulux/Appliance White Duralloy Matt.gif');}
.Gull-Grey {background: url('/uploads/dulux/Gull Grey Duralloy Matt.gif');}
.Scoria {background: url('/uploads/dulux/Scoria Duralloy Matt.gif');}
.Slate-Blue {background: url('/uploads/dulux/Slate Blue Duralloy Matt.gif');}
.Gravel {background: url('/uploads/dulux/Gravel Duralloy Matt.gif');}
.Flax-Pod {background: url('/uploads/dulux/Flax Pod Duralloy Matt.gif');}
.Black {background: url('/uploads/dulux/Black Duralloy Matt.gif');}
.White-Pearl {background: url('/uploads/dulux/Warm White Pearl Kinetic Matt.gif');}
.Silver-Pearl {background: url('/uploads/dulux/Metro Silver Pearl Kinetic Matt.gif');}
.Palladium-Silver {background: url('/uploads/dulux/Palladium Silver Kinetic Matt.gif');}
.Coal-Dust {background: url('/uploads/dulux/Metro Coal Dust Kinetic Matt.gif');}
.Electric-Cow {background: url('/uploads/dulux/Metro Electric Cow Kinetic Matt.gif');}
.Mid-Bronze {background: url('/uploads/dulux/Anotec Mid Bronze Duralloy Matt.gif');}
.Appliance-White-Flat {background: url('/uploads/dulux/Appliance White Flat.gif');}
.Titania {background: url('/uploads/dulux/Titania Flat.gif');}
.Arctic-White-Flat {background: url('/uploads/dulux/Arctic White Flat.gif');}
.Silver-Pearl-Flat {background: url('/uploads/dulux/Metro Silver Pearl Flat.gif');}
.Sandstone-Grey {background: url('/uploads/dulux/Sandstone Grey Flat.gif');}
.Charcoal {background: url('/uploads/dulux/Charcoal Flat.gif');}
.Flax-Pod-Flat {background: url('/uploads/dulux/Flax Pod Flat.gif');}
.Black-Flat {background: url('/uploads/dulux/Black Flat.gif');}
.Ironsand-Flat {background: url('/uploads/dulux/Ironsand Flat.gif');}


.layer, .colours .image-container .layer {position: absolute; top: 0; mix-blend-mode: multiply;}
.mask, .colours .image-container .mask {position: absolute; top: 0;}




/* Colours Range */


.window-icon {position: absolute !important; bottom: 10px; right: 10px; width: 35px; height: 35px; z-index:999;  border: 1px solid #0094d8; display:block; border-radius: 50% !important; background:#fff;}
.window-icon img {margin-top: 3px !important; display:block; }

.range-grid {border-bottom: 2px solid #0399dd; padding: 0 0 2vw 0}

.range-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-gap: 20px;}

.block.two .colours h2 {font-size: 17px; margin-bottom: 0px;}
.block.two .colours p {font-size: 14px; margin-bottom: 10px; border-bottom: 1px solid #eee; padding-bottom: 10px;}
.block.two .colours figure {width:100%; max-height: 150px; overflow:hidden; margin-bottom: 10px; border-radius: 3px; position:relative}

.block.two .colours .image-container figure {max-height:190px}

.your-home-wrapper .colours h5 {margin-bottom: 10px; font-size: 9px; letter-spacing:1px;  font-family: 'nexa-light', sans-serif;}

.with-images .colours img {margin: 0 0 20px 0}

.left-col small {line-height: 1.4; font-size: 14px; display: block; max-width: 80%; margin-top: 10px;}

.with-images .fixed-logo {max-width: 150px; margin: 0}

.thumbSlider figure {margin-top: 15px;}

.fancybox-content figure img.white {}
.fancybox-content figure img.navy {display: none;}
.fancybox-content figure img.dark-grey {display: none;}
.fancybox-content figure img.sage {display: none;}

.mainSwiper {margin-bottom: 10px;}

.accordion-wrapper {box-sizing: border-box; padding-left: 0px; background:#fafafa; padding: 0px 20px;}
.accordion-wrapper h4 {font-size: 19px; margin: 0; max-width: 99%}
.accordion-wrapper.team h4 {font-size: 25px;}



.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

.accordion-item h4 {
    cursor: pointer; position: relative;
}


.accordion-wrapper.team .panel {padding: 30px 0;}
.accordion-wrapper.team .panel p {font-size: 18px;}


.accordion-item {display: block; color: #000; cursor: pointer; width: 100%; text-align: left; border: none; outline: none; transition: 0.4s; position: relative; font-size: 18px; padding: 20px 0px; border-bottom: 1px solid #000; box-sizing: border-box; user-select: none;}




#closestStoreMessage strong {font-family: 'NexaTextHeavy';display: block; margin-top: 10px; margin-bottom: 20px; color:#0094d8}




.table-grid {margin-top: 20px;}


.accordion-item:first-child {margin-top: 0px; border-top: 0px}

.resources-show .panel {display:block !important}

.panel {padding: 0px; overflow: hidden; transition: 0.4s;}
.panel p {transition: 0.4s; text-align: right;}
.panel p:first-child, .panel a:first-child {text-align: left; grid-column: span 3;}
.panel a:first-child {max-width: 90%}
.panel p, .panel a {font-size: 14px;}

.panel .location-list {margin-bottom: 30px;}


.panel-new {padding: 0px; overflow: hidden; transition: 0.4s;}
.panel-new p {transition: 0.4s; text-align: right;}
.panel-new p:first-child, .panel-new a:first-child {text-align: left; grid-column: span 3;}
.panel-new a:first-child {max-width: 90%}
.panel-new p, .panel-new a {font-size: 14px;}

.your-home-wrapper {margin-top: 3vw;}
.your-home-wrapper h5 {margin-bottom: 30px;}

.table-inner, .table-header {display: grid; grid-template-columns: repeat(7, 1fr);}
.table-header > p strong {padding-bottom: 5px; border-bottom: 1px solid #0094d8; display: block; text-transform: uppercase; font-size: 12px; min-height: 20px;}
.table-header p {margin-bottom: 5px;}
.table-inner {border-bottom: 1px solid #0094d8; padding: 20px 0; align-items: center;}
.table-inner:last-child {border-bottom: 0px;}
.table-inner > p {margin-bottom: 0px; line-height: 1;}
.table-inner a {color: #000; transition: 0.5s; line-height: 1.3; text-align: right; text-decoration:none; font-family:'NexaTextHeavy'}
.table-inner a:hover {color: #0094d8;}

.file-type {text-transform:uppercase}

.table-inner p:nth-child(2), .table-header p:nth-child(2) {grid-column: span 2; text-align: left;}

.thumbSlider figure {height: 79px;}
.thumbSlider .overlay-colour, .thumbSlider .mask, .thumbSlider .layer {height: 100%!important; object-fit: cover;}

.grid-map {display: grid; grid-template-columns: 450px 1fr; grid-gap: 30px; justify-content: space-between; align-items: flex-start;}
.grid-map.alt {display: grid; grid-template-columns: 25% 75% ; justify-content: space-between; align-items: center; margin-bottom: 100px;}
.grid-map p {font-size: 16px}
.grid-map p strong {font-weight: 400; font-size: 23px;}

.grid-map.alt .map {width: 100%; height: 60vh; background: #2d2d2d; border-radius: 40px; overflow: hidden;}
#map {width: 100%; background: #2d2d2d; height: 600px; position: relative; overflow: hidden;}
#map strong {font-weight:bold;}
#map a {text-decoration: none;color: #000;}

.search-fabricators {margin-bottom: 50px;}
.search-fabricators .form-field {position: relative;}
.search-fabricators .form-field input{width: 100%; box-sizing: border-box; padding: 20px 15px 15px; outline: none; border: 1px solid #000; font-size: 17px; font-family: 'Nexa', sans-serif; font-weight: 400; background: #fff; color: #000;}
.search-fabricators .form-field input::placeholder {opacity: 0.7; color: #000;}
.search-fabricators .form-field button {width: 25px; height: 16px; position: absolute; top: 50%; transform: translateY(-50%); right: 10px; background: none; border: 0; padding: 0px;}

.fabricator-list {height: 600px; overflow-y: scroll; background: #eee; padding: 25px; box-sizing: border-box;}
.fabricator-list > p {margin-bottom: 5px;}
.fabricator-list p strong {font-size: 16px;}

.fabricator {margin-bottom: 25px; background: #fefefe; padding: 25px; box-sizing: border-box;}
.fabricator .title {margin-bottom: 10px; line-height: 1.3;}

.google-link { font-weight: 400; position: relative; display: inline-block; padding-bottom: 3px; color: #000; text-decoration: none;}
.google-link::after { content: ''; display: block; position: absolute; bottom: 0px; left: 0px; width: 0%; background: #000; height: 1px; transition: 0.3s;}

.ni-external-alt:before {font-family: "Nioicon"; color: #000; content: ""; font-style: normal; font-size: 20px; position: absolute; top: 50%; transform: translateY(-50%); right: -25px;}

.fabricator-region {border: 1px solid #222; padding: 10px; display:block; width: 100%; background:none;margin-bottom: 15px;}
.select-wrapper::after {z-index: -1!important;}

footer {padding: 4vw 0 0 0}
footer figure {width: 230px; margin-bottom: 3vw;}
footer h4 {text-transform: uppercase; letter-spacing: 2px; font-size: 14px; color: #a1a1a1; margin-bottom: 20px;}
footer ul, .links {list-style: none; margin:0; padding:0}
footer .links {text-align: right;}
footer .links li {display: inline-block; margin-left: 10px;}
footer .links a {color:#777777; font-size: 12px; text-decoration: none; }
footer .grid.browse {grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));}
footer .browse ul {margin-bottom: 20px;}
footer .browse li strong a {font-weight: normal; font-family: 'NexaTextHeavy';color: #0399dd;}
footer .browse li a {display: block; padding: 5px 0; color:#777777; line-height:1.5}
footer .button {border:none; background: linear-gradient(to bottom, #0399dd, #048ccb); border-radius: 50px; color: #fff; padding:10px 20px; font-size: 17px;}
footer .button:hover {color:#fff !important}
footer h2 {font-size: 2vw; line-height: 1.5; margin-bottom: 35px; max-width: 85%;}
footer .button:after {display:none}
footer p {font-size: 17px; line-height: 1.5; margin: 20px 0; color:#777777}
footer a {text-decoration: none; color: inherit;}
footer a:hover {color:#048ccb !important}
.btm-nav {padding: 20px 0; border-top:1px solid #eee; margin-top: 3vw;}


.panel p { font-family: 'NexaExtraLight', sans-serif; }

/* Style for the main accordion */
#accordion {
    width: 100%;

    margin: 20px auto;
    font-family: 'nexa-light', sans-serif;
}

/* Style for accordion headers */
#accordion h3, #accordion h4, #accordion h5, #accordion h6 {
    padding: 10px 20px;
    margin: 0;
    cursor: pointer; border:none; border-radius:0px;
    background-color: #f7f7f7;
    max-width: 100%; font-family: 'NexaExtraLight'; font-size: 18px; text-transform:none; letter-spacing:0px; color:#222; position:relative
}

#accordion h3:after {}


#accordion .ui-accordion-header {border-bottom: 1px solid #222}
#accordion .ui-state-active {font-family: 'NexaTextHeavy'; color:#222}

.ui-accordion-content {padding: 20px 10px;}

/* Hover effect for headers */
#accordion h3:hover, #accordion h4:hover, #accordion h5:hover, #accordion h6:hover {
    background-color: #e9e9e9;
}

/* Active or current item styling */
.ui-accordion-header-active {
    background-color: #ddd;
    color: #444;
}

/* Content area when expanded */
.ui-accordion-content-active {
    border-top: none;
}

/* Adjustments for nested accordions to differentiate levels */
#nested-accordion-400, #nested-accordion-cavity {
    background-color: #f0f0f0;
    margin: 10px 0 10px 20px; /* Indent nested accordions */
}

#nested-accordion-cavity {
    background-color: #e0e0e0;
}



/* Styles for before and after pseudo-elements applied to h3 and h4 */


#accordion h3::before, .accordion-item h4:before {
    content: '';
    width: 2px;
    height: 20px;
    background: #000;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 25px; /* Adjust position based on h4 padding */
    transition: transform 0.5s;
    border-radius: 50px;
}

#accordion h3.ui-state-active::before {
    transform: translateY(-50%) rotate(90deg);
}

#accordion h3::after, .accordion-item h4:after {
    content: '';
    width: 2px;
    height: 20px;
    background: #000;
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    right: 25px; /* Adjust position based on h4 padding */
    transition: transform 0.5s, opacity 0.5s;
    border-radius: 50px;
}

#accordion h3.ui-state-active::after {
    opacity: 0;
    transform: translateY(-50%) rotate(270deg);
}