.smoothPX {
  transition: all 0.25s linear;
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Firefox < 16 */
@-moz-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Internet Explorer */
@-ms-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Opera < 12.1 */
@-o-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
:root {
  --pt-color-primary: #124734;
  --pt-color-secondary: #768B84;
  --pt-color-tertiary: #DC613B;
  --pt-color-gold: #E8A74A;
  --pt-color-beige: #F7F0E4;
  --pt-color-orange: #FC790F;
  --pt-color-drop-down: #C4BC9B;
  --pt-color-black: #000000;
  --pt-color-white: #FFFFFF;
  --pt-color-grey: #606060;
  --pt-color-red: #D9000D;
  --pt-color-magenta: #eb1a74;
  --pt-color-green: #74af26;
  --pt-color-blue: #007ac1;
  --pt-color-blue-dark: #2c6ada;
  --pt-color-yellow: #fcd623;
  --pt-color-purple: #9685c5;
  --pt-color-dark-grey: #525252;
  --pt-color-light-grey: #F2F2F2;
  --pt-color-lighter-grey: #F0F0F0;
  --pt-color-facebook: #486099;
  --pt-color-border: #D5D5D5;
  --pt-color-box: #EDEEED;
  --pt-color-block-link-text: var(--pt-color-white);
  --pt-color-block-link-bg: var(--pt-color-primary);
  --pt-color-text-color: #333333;
}

:root {
  --kc-body-font: "Roboto", Helvetica, sans-serif;
  --kc-body-font-weight: 500;
  --kc-body-font-line-height: 1.6em;
  --kc-header-font: circe, "Roboto", sans-serif;
  --kc-header-font-weight: 400;
  --kc-header-font-line-height: 1.3em;
  --kc-menu-font: circe, Helvetica, sans-serif;
  --kc-menu-font-weight: 400;
  --kc-menu-font-line-height: 1.2em;
  --kc-h1Size: 48px;
  --kc-h1Size-clamp: clamp(50px, 10vw, 105px);
  --kc-h2Size: 38px;
  --kc-h2Size-clamp: clamp(45px, 8.5vw, 90px);
  --kc-h3Size: 36px;
  --kc-h3Size-clamp: clamp(40px, 7vw, 75px);
  --kc-h4Size: 28px;
  --kc-h4Size-clamp: clamp(35px, 5.5vw, 60px);
  --kc-h5Size: 24px;
  --kc-h5Size-clamp: clamp(30px, 4vw, 45px);
  --kc-h6Size: 22px;
  --kc-h6Size-clamp: clamp(25px, 3vw, 30px);
  --kc-bodyFontSize: 15px;
  --kc-menuFontSize: 14px;
  --kc-footerFontSize: 12px;
  --kc-smallFontSize: 12px;
  --kc-creditFontSize: 10px;
}

#unilin #banner.unilin {
  overflow: clip;
  display: grid;
  grid-template-areas: "banner";
  grid-template-columns: 1fr;
  align-items: start;
  height: fit-content;
}
#unilin #banner.unilin .container {
  z-index: 2;
  grid-area: banner;
  position: relative;
}
#unilin #banner.unilin .brand {
  position: absolute;
  top: calc(36px + 2.4vw);
  right: 24px;
  width: clamp(100px, 15%, 150px);
  z-index: 3;
  height: auto;
}
#unilin #banner.unilin .text {
  width: 80%;
  max-width: 800px;
  padding: calc(36px + 2.4vw);
  padding-left: 0px;
  position: relative;
  box-sizing: border-box;
  margin: calc((calc(36px + 2.4vw)) * 0.5) 0;
}
#unilin #banner.unilin .text * {
  position: relative;
  box-sizing: border-box;
  color: var(--pt-color-white);
  z-index: 2;
}
#unilin #banner.unilin .text .subtitle h2 {
  font-size: 48px;
  line-height: 52px;
}
#unilin #banner.unilin .text .subtitle p {
  font-size: 18px;
  line-height: 22px;
}
#unilin #banner.unilin .text .blockLink {
  background-color: var(--pt-color-primary);
  color: var(--pt-color-white);
  padding: 12px 14px;
  padding-left: 40px;
  display: inline-block;
  text-decoration: none;
  background-image: url("/assets/img/swatch-icon-simple.svg");
  background-repeat: no-repeat;
  background-position: 8px center;
  background-size: 20px;
}
#unilin #banner.unilin .text::before {
  content: "";
  display: block;
  position: absolute;
  left: auto;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100%;
  background-color: color-mix(in srgb, black 40%, transparent);
  z-index: 1;
}
#unilin #banner.unilin .bannerImg {
  grid-area: banner;
}

.masterOakDetails {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  display: block;
  overflow: clip;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-content: flex-start;
  align-items: flex-start;
  margin-top: calc((calc(36px + 2.4vw)) * 0.75);
}
.masterOakDetails * {
  padding: 0;
  margin: 0;
  position: relative;
  box-sizing: border-box;
  -webkit-text-size-adjust: none;
}
.masterOakDetails .container {
  display: grid;
  grid-template-areas: "intro cameos" "highlight cameos";
  grid-template-columns: 6fr 4fr;
  gap: 18px 36px;
  width: calc(100% - 48px);
  max-width: 1400px;
  /*1200px ends*/
  /*1200px ends*/
}
@media only screen and (max-width: 1500px) {
  .masterOakDetails .container {
    max-width: 1200px;
  }
}
@media only screen and (max-width: 1280px) {
  .masterOakDetails .container {
    max-width: 980px;
  }
}
.masterOakDetails.masterOakProduct {
  margin-bottom: 48px;
}
.masterOakDetails.masterOakProduct .container {
  max-width: 1200px;
  display: grid;
  grid-template-areas: "cameos intro" "cameos highlight";
  grid-template-columns: 4fr 6fr;
  /*1200px ends*/
  /*1200px ends*/
}
@media only screen and (max-width: 1500px) {
  .masterOakDetails.masterOakProduct .container {
    max-width: 1200px;
  }
}
@media only screen and (max-width: 1280px) {
  .masterOakDetails.masterOakProduct .container {
    max-width: 980px;
  }
}
.masterOakDetails .intro {
  grid-area: intro;
}
.masterOakDetails .intro h3 {
  font-size: 36px;
  margin-bottom: 18px;
}
.masterOakDetails .intro *:last-child {
  margin-bottom: 0;
}
.masterOakDetails .highlight {
  grid-area: highlight;
  background-color: color-mix(in srgb, black 10%, transparent);
  padding: 24px;
}
.masterOakDetails .highlight h4 {
  margin: 0;
}
.masterOakDetails .highlight p {
  margin-bottom: 18px;
}
.masterOakDetails .highlight p:last-child {
  margin-bottom: 0;
}
.masterOakDetails .cameos {
  grid-area: cameos;
  flex-grow: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  max-width: 400px;
  align-self: flex-start;
}
.masterOakDetails .cameos .cameo {
  display: grid;
  grid-template-areas: "image text";
  grid-template-columns: 1fr 2fr;
  align-items: center;
  gap: 18px;
}
.masterOakDetails .cameos .cameo img {
  aspect-ratio: 1/1;
  width: 100%;
}
.masterOakDetails .cameos .cameo .info h4 {
  margin: 0;
  font-size: 18px;
}
.masterOakDetails .cameos .cameo .info *:last-child {
  margin: 0;
}

.masterOakGroup {
  overflow: clip;
}

#panelCategories .colourGroup {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: flex-start;
  width: 80%;
  padding: calc((calc(36px + 2.4vw)) * 0.5) 5%;
  position: relative;
}
#panelCategories .colourGroup * {
  position: relative;
}
#panelCategories .colourGroup .groupColour {
  display: block;
  width: 8.3333333333%;
  display: grid;
  grid-template-areas: "groupColour";
  grid-template-columns: 1fr;
}
#panelCategories .colourGroup .groupColour img {
  grid-area: groupColour;
  width: 250%;
  max-width: none;
  transform: translateX(-50%);
  transition: all 0.35s ease;
}
#panelCategories .colourGroup .groupColour a {
  grid-area: groupColour;
  display: block;
  width: 250%;
  height: 100%;
  max-width: none;
  transform: translateX(-50%);
  z-index: 2;
  clip-path: polygon(25% 9%, 92% 0, 97% 1.5%, 96.5% 82%, 31% 91.5%, 25% 90%);
  overflow: visible;
}
#panelCategories .colourGroup .groupColour h3 {
  position: absolute;
  left: 25%;
  top: 35%;
  transform: translateX(-70%) translateY(-50%);
  width: fit-content;
  display: block;
  pointer-events: none;
  grid-area: groupColour;
  align-self: center;
  transition: all 0.5s ease;
  opacity: 0;
  font-size: 14px;
  filter: drop-shadow(5px 5px 6px rgba(0, 0, 0, 0.5));
  overflow: visible;
}
#panelCategories .colourGroup .groupColour h3 span {
  padding: 12px;
  padding-left: 24px;
  border-radius: 3px;
  display: block;
  width: fit-content;
  background-color: #e5e5e5;
  clip-path: polygon(12px 0%, 100% 0%, 100% 100%, 12px 100%, 0% 50%);
}
#panelCategories .colourGroup .groupColour h3 span small {
  display: block;
  font-size: 9px;
  white-space: nowrap;
}
#panelCategories .colourGroup .groupColour a:hover + h3 {
  z-index: 3;
  transform: translateX(-50%) translateY(-50%);
  opacity: 1;
}
#panelCategories .colourGroup .groupColour a:hover + h3 + img {
  transform: translateX(-55%);
}
#panelProduct.productPage .details .highlight {
  background-color: color-mix(in srgb, black 10%, transparent);
  padding: 24px;
}
#panelProduct.productPage .details .highlight + h3 {
  margin-top: 48px;
}

.masterOakSpecTable {
  display: grid;
  grid-template-columns: max-content;
  background-color: #CCC;
  gap: 1px;
  width: fit-content;
}
.masterOakSpecTable * {
  margin: 0;
  padding: 0;
  font-size: 14px;
}
.masterOakSpecTable .row {
  display: grid;
  grid-column: span 14;
  grid-template-columns: subgrid;
  align-items: center;
  background-color: #CCC;
  gap: 1px;
}
.masterOakSpecTable .headRow {
  border-bottom: solid 2px var(--pt-color-black);
  font-weight: 500;
}
.masterOakSpecTable .headRow p {
  margin-bottom: 6px;
}
.masterOakSpecTable .header,
.masterOakSpecTable .material,
.masterOakSpecTable .thickness,
.masterOakSpecTable .moWidth {
  background-color: var(--pt-color-white);
  min-height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: center;
  align-items: center;
}
.masterOakSpecTable .moWidth {
  justify-content: center;
}
.masterOakSpecTable .header {
  border-right: solid 2px var(--pt-color-black);
  display: grid;
  grid-column: span 2;
  grid-template-columns: subgrid;
  align-items: center;
  z-index: 2;
  position: sticky;
  left: 0;
}
.masterOakSpecTable .material, .masterOakSpecTable .thickness {
  white-space: nowrap;
  padding-right: 8px;
}
.masterOakSpecTable .moWidth {
  justify-content: center;
  width: 100%;
  min-width: 3em;
}
.masterOakSpecTable .material {
  font-weight: 500;
  gap: 0.75em;
}
.masterOakSpecTable .material img {
  width: 3.5em;
  height: 3.5em;
  object-fit: contain;
}

.dot {
  position: relative;
  left: auto;
  top: auto;
  right: auto;
  bottom: auto;
  width: 0.75em;
  min-width: 0.75em;
  height: 0.75em;
  min-height: 0.75em;
  display: block;
  border: solid 1.5px #999;
  border-radius: 1em;
  cursor: pointer;
}
.dot.stockItem {
  background-color: var(--pt-color-black);
}
.dot.clickWall {
  background-color: #CCC;
}
.dot span {
  position: absolute;
  left: 50%;
  bottom: 80%;
  opacity: 0;
  transform: translateX(-50%);
  padding: 8px;
  font-size: 10px;
  border-radius: 3px;
  display: block;
  width: fit-content;
  background-color: #e5e5e5;
  transition: all 0.35s ease;
  white-space: nowrap;
  pointer-events: none;
  z-index: 3;
}
.dot:hover span {
  opacity: 1;
  bottom: 110%;
}

ul.legend {
  list-style-type: none;
  font-size: 12px;
  margin: 0;
  padding: 0;
}
ul.legend li {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: flex-start;
  margin: 0;
  padding: 0;
  margin-bottom: 0.5em;
}
ul.legend li .dot {
  margin: 0.25em 0.5em 0 0;
}

@media only screen and (max-width: 880px) {
  .masterOakSpecTable .header {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start;
  }
  .masterOakSpecTable .header .thickness {
    margin-left: 4.2em;
    margin-top: -1em;
  }
} /*880px ends*/
@media only screen and (max-width: 650px) {
  .masterOakSpecTable * {
    font-size: 12px;
  }
} /*$bigPhone ends*/
.masterOakVideo {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  display: block;
  overflow: clip;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-content: flex-start;
  align-items: flex-start;
  margin-top: calc((calc(36px + 2.4vw)) * 0.75);
  padding: 36px 0;
}
.masterOakVideo * {
  padding: 0;
  margin: 0;
  position: relative;
  box-sizing: border-box;
  -webkit-text-size-adjust: none;
}
.masterOakVideo .container {
  display: grid;
  grid-template-areas: "video intro";
  grid-template-columns: 6fr 4fr;
  gap: 18px 36px;
  width: calc(100% - 48px);
  max-width: 1400px;
  z-index: 2;
}
.masterOakVideo .video {
  grid-area: video;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: flex-start;
}
.masterOakVideo .video video {
  max-width: 100%;
}
.masterOakVideo .intro {
  grid-area: intro;
  padding: 36px;
  background-color: var(--pt-color-white);
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-content: flex-start;
  align-items: flex-start;
}
.masterOakVideo .intro h3 {
  font-size: 32px;
  margin-bottom: 18px;
}
.masterOakVideo .intro .blockLink {
  background-color: var(--pt-color-primary);
  color: var(--pt-color-white);
  padding: 12px 14px;
  display: inline-block;
  text-decoration: none;
  margin-top: 18px;
}
.masterOakVideo .bgImg {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: cover;
  z-index: 1;
}

@media only screen and (max-width: 1200px) {
  .masterOakDetails .container {
    grid-template-areas: "intro intro" "highlight cameos";
  }
  .masterOakDetails.masterOakProduct .container {
    grid-template-areas: "intro intro" "cameos highlight";
  }
} /*1200px ends*/
@media only screen and (max-width: 900px) {
  .masterOakDetails .container {
    grid-template-columns: 1fr;
  }
  .masterOakVideo .container {
    grid-template-areas: "video" "intro";
    grid-template-columns: 1fr;
  }
  #panelCategories .colourGroup {
    padding: calc((calc(36px + 2.4vw)) * 0.5) 10%;
  }
  #panelCategories .colourGroup .groupColour {
    width: 16.6666666667%;
  }
} /*900px ends*/
@media only screen and (max-width: 700px) {
  .masterOakDetails .container {
    grid-template-areas: "intro" "highlight" "cameos";
    grid-template-columns: 1fr;
  }
  .masterOakDetails.masterOakProduct .container {
    grid-template-areas: "intro" "highlight" "cameos";
    grid-template-columns: 1fr;
  }
  #unilin #banner.unilin .brand {
    top: calc(36px + 2.4vw);
    right: 24px;
    width: 80px;
  }
  #unilin #banner.unilin .text .subtitle h2 {
    font-size: 36px;
    line-height: 38px;
    letter-spacing: 0.005em;
  }
  #unilin #banner.unilin .text .subtitle p {
    font-size: 16px;
    line-height: 20px;
  }
} /*700px ends*/
@media only screen and (max-width: 600px) {
  .masterOakDetails .container {
    grid-template-columns: 1fr;
  }
  .masterOakVideo .container {
    grid-template-areas: "video" "intro";
    grid-template-columns: 1fr;
  }
  #panelCategories .colourGroup {
    padding: calc((calc(36px + 2.4vw)) * 0.5) 15%;
  }
  #panelCategories .colourGroup .groupColour {
    width: 25%;
  }
} /*900px ends*/
#unilin .fibraluxCameos {
  margin: 36px 0;
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: flex-start;
}
#unilin .fibraluxCameos img {
  display: block;
  aspect-ratio: 1/1;
  object-fit: cover;
  width: calc(33% - 18px);
  margin-right: 18px;
}

@media only screen and (max-width: 650px) {
  #unilin .fibraluxCameos {
    flex-direction: column;
  }
  #unilin .fibraluxCameos img {
    display: block;
    aspect-ratio: 1/1;
    object-fit: cover;
    width: 100%;
    margin-right: 0px;
    margin-bottom: 18px;
  }
} /*$bigPhone ends*/