.noDesktop {
  display: none !important;
}

@media only screen and (max-width: 1100px) {
  .noDesktop {
    display: block !important;
  }
  .noLaptop {
    display: none !important;
  }
}
@media only screen and (max-width: 900px) {
  .noDesktop, .noLaptop {
    display: block !important;
  }
  .noBigTablet {
    display: none !important;
  }
}
@media only screen and (max-width: 768px) {
  .noDesktop, .noLaptop, .noBigTablet {
    display: block !important;
  }
  .noTablet {
    display: none !important;
  }
}
@media only screen and (max-width: 650px) {
  .noDesktop, .noLaptop, .noBigTablet, .noTablet {
    display: block !important;
  }
  .noBigPhone {
    display: none !important;
  }
}
@media only screen and (max-width: 450px) {
  .noDesktop, .noLaptop, .noBigTablet, .noTablet, .noBigPhone {
    display: block !important;
  }
  .noPhone {
    display: none !important;
  }
}
.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;
  }
}
/*Set Sizes */
body {
  font-size: 62.5%;
}

p, ul, ol, table {
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  font-size: 15px;
  font-size: clamp(14px, 2.2vw, 18px);
  line-height: 1.4em;
  margin-bottom: 1.2em;
  color: #6d7d85;
}

p {
  margin-bottom: 1.1em;
}

a {
  color: #6d7d85;
  text-decoration: none;
  transition: all 0.35s ease;
}

sup {
  font-size: 0.5em !important;
}

strong {
  font-weight: 500;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  margin-bottom: 0.8em;
  font-weight: 700;
  color: #1f3b4d;
  width: 100%;
}
h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong {
  font-weight: 700;
}
h1.light, h1 .light, h2.light, h2 .light, h3.light, h3 .light, h4.light, h4 .light, h5.light, h5 .light, h6.light, h6 .light {
  font-weight: 400;
}
h1.magenta, h2.magenta, h3.magenta, h4.magenta, h5.magenta, h6.magenta {
  color: #eb1a74;
}
h1.green, h2.green, h3.green, h4.green, h5.green, h6.green {
  color: #74af26;
}
h1.blue, h2.blue, h3.blue, h4.blue, h5.blue, h6.blue {
  color: #007ac1;
}
h1.yellow, h2.yellow, h3.yellow, h4.yellow, h5.yellow, h6.yellow {
  color: #fcd623;
}
h1.purple, h2.purple, h3.purple, h4.purple, h5.purple, h6.purple {
  color: #9685c5;
}
h1.plumHeader, h2.plumHeader, h3.plumHeader, h4.plumHeader, h5.plumHeader, h6.plumHeader {
  color: #6d7d85;
}

h1 {
  font-size: 60px;
  font-size: clamp(39.2px, 6.16vw, 50.4px);
  color: #1f3b4d;
  line-height: 1.1em;
  margin-bottom: 0.5em;
}

h2 {
  font-size: 36px;
  font-size: clamp(33.6px, 5.28vw, 43.2px);
}

h3 {
  font-size: 32px;
  font-size: clamp(29.4px, 4.62vw, 37.8px);
}

h4 {
  font-size: 28px;
  font-size: clamp(25.2px, 3.96vw, 32.4px);
}

h5 {
  font-size: 24px;
  font-size: clamp(22.4px, 3.52vw, 28.8px);
}

h6 {
  font-size: 20px;
  font-size: clamp(16.8px, 2.64vw, 21.6px);
}

/*
@forward '_debug.scss';
*/
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

* {
  padding: 0;
  margin: 0;
  position: relative;
  -webkit-text-size-adjust: none;
  box-sizing: border-box;
}

.clearit {
  height: 0px;
  overflow: hidden;
  clear: both;
  width: 100%;
  display: block;
}

html {
  height: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 150px;
}

body {
  width: 100%;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  scroll-padding-top: 120px;
}

.page {
  overflow: hidden;
  z-index: 2;
  width: 100%;
}

.section {
  width: 100%;
  overflow: hidden;
}

img {
  width: 100%;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

.wrapper {
  width: calc(100% - 96px);
  display: block;
  margin: 0 auto;
  max-width: 1200px;
  clear: both;
}

.wrapper:after {
  content: "";
  display: table;
  clear: both;
}

.flexer {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: flex-start;
}

.flexer {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: flex-start;
}

.bg {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
.bg > a {
  display: block;
  float: left;
  width: 100%;
}
.bg span {
  float: left;
  width: 100%;
  display: block;
}

.widthInd {
  display: none;
}

p, ul, ol, table, blockquote {
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  font-size: 15px;
  font-size: clamp(14px, 2.2vw, 18px);
  line-height: 1.4em;
  padding: 0;
}

@media only screen and (max-width: 900px) {
  .wrapper {
    width: calc(100% - 72px);
  }
}
@media only screen and (max-width: 768px) {
  .wrapper {
    width: calc(100% - 48px);
  }
}
@media only screen and (max-width: 350px) {
  .wrapper {
    width: calc(100% - 32px);
  }
}
.logo {
  width: 100%;
  display: block;
  padding: 0;
}
.logo span {
  background-image: url("/assets/img/easy-fit-fencing-logo.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
  display: block;
  float: left;
  padding-top: 26%;
}
.logo.whiteLogo span {
  background-image: url("/assets/img/easy-fit-fencing-logo-white.svg");
}
.logo:after {
  content: "";
  display: table;
  clear: both;
  opacity: 0;
}
.logo p {
  opacity: 0;
  position: absolute;
  left: auto;
  top: auto;
  right: auto;
  bottom: auto;
  font-size: 1px;
}

.imageHolder {
  width: 100%;
}
.imageHolder.leftTop img {
  object-position: top left;
}
.imageHolder.centerTop img {
  object-position: top center;
}
.imageHolder.rightTop img {
  object-position: top right;
}
.imageHolder.leftCentre img {
  object-position: center left;
}
.imageHolder.centreCentre img {
  object-position: center center;
}
.imageHolder.rightCentre img {
  object-position: center right;
}
.imageHolder.leftBottom img {
  object-position: bottom left;
}
.imageHolder.centreBottom img {
  object-position: bottom center;
}
.imageHolder.rightBottom img {
  object-position: bottom right;
}
.imageHolder img, .imageHolder picture {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.imageHolder.containIMG img {
  object-fit: contain;
}
.imageHolder.naturalIMG img, .imageHolder.naturalIMG picture, .imageHolder.naturalIMG a {
  position: relative;
  left: auto;
  top: auto;
  right: auto;
  bottom: auto;
  width: 100%;
  height: auto;
}
.imageHolder.naturalIMG span {
  display: none;
}
.imageHolder .frame, .imageHolder a {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  z-index: 2;
}
.imageHolder .missingImage {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: center;
  background-color: rgb(250.1142857143, 250.3857142857, 250.1142857143);
}
.imageHolder span {
  display: block;
  width: 100%;
  padding-top: 100%;
  z-index: 1;
  max-height: 350px;
  pointer-events: none;
}
.imageHolder.compat-object-fit {
  background-position: center bottom;
  background-size: contain;
  background-repeat: no-repeat;
}
.imageHolder.compat-object-fit img {
  opacity: 0;
}

.image.natural,
.natural .image {
  padding: 0;
}
.image.natural .imageHolder,
.natural .image .imageHolder {
  position: relative;
  left: auto;
  top: auto;
  right: auto;
  bottom: auto;
  height: auto;
}
.image.natural .imageHolder img, .image.natural .imageHolder picture, .image.natural .imageHolder a,
.natural .image .imageHolder img,
.natural .image .imageHolder picture,
.natural .image .imageHolder a {
  position: relative;
  left: auto;
  top: auto;
  right: auto;
  bottom: auto;
  height: auto;
}
.image.natural .imageHolder span,
.natural .image .imageHolder span {
  display: none;
}

.image.inline,
.inline .image {
  display: inline-block;
  float: right;
  margin-left: calc(12px + 1.5vw);
  margin-bottom: 12px;
}

.bgImage {
  z-index: 1;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bgImage.leftTop img {
  object-position: top left;
}
.bgImage.centerTop img {
  object-position: top center;
}
.bgImage.rightTop img {
  object-position: top right;
}
.bgImage.leftCentre img {
  object-position: center left;
}
.bgImage.centreCentre img {
  object-position: center center;
}
.bgImage.rightCentre img {
  object-position: center right;
}
.bgImage.leftBottom img {
  object-position: bottom left;
}
.bgImage.centreBottom img {
  object-position: bottom center;
}
.bgImage.rightBottom img {
  object-position: bottom right;
}

.opacity10 {
  opacity: 0.1;
}

.opacity20 {
  opacity: 0.2;
}

.opacity30 {
  opacity: 0.3;
}

.opacity40 {
  opacity: 0.4;
}

.opacity50 {
  opacity: 0.5;
}

.opacity60 {
  opacity: 0.6;
}

.opacity70 {
  opacity: 0.7;
}

.opacity80 {
  opacity: 0.8;
}

.opacity90 {
  opacity: 0.9;
}

.blendedNormal {
  mix-blend-mode: normal;
}

.blendedScreen {
  mix-blend-mode: screen;
}

.blendedOverlay {
  mix-blend-mode: overlay;
}

.blendedLighten {
  mix-blend-mode: lighten;
}

.blendedColorDodge {
  mix-blend-mode: colordodge;
}

.blendedColorBurn {
  mix-blend-mode: colorburn;
}

.blendedHardLight {
  mix-blend-mode: hardlight;
}

.blendedSoftLight {
  mix-blend-mode: softlight;
}

.blendedDifference {
  mix-blend-mode: difference;
}

.blendedExclusion {
  mix-blend-mode: exclusion;
}

.blendedSaturation {
  mix-blend-mode: saturation;
}

.blendedColor {
  mix-blend-mode: color;
}

.blendedLuminosity {
  mix-blend-mode: luminosity;
}

.bigList {
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  margin-bottom: 0.8em;
  font-weight: 700;
  font-size: 20px;
  font-size: clamp(16.8px, 2.64vw, 21.6px);
}

a.blockLink, .blockLink, input[type=submit], button, .button, blockLink {
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  font-weight: 500;
  letter-spacing: 0.1em;
  font-size: 15px;
  font-size: clamp(14px, 2.2vw, 18px);
  font-size: clamp(11px, 1.25vw, 13px);
  cursor: pointer;
  padding: 0.75em 1.25em;
  display: inline-block;
  text-decoration: none;
  color: #FFFFFF;
  background-color: #1f3b4d;
  padding: 12px 16px;
  letter-spacing: 0.07em;
  white-space: nowrap;
  margin-top: 1.2em;
  line-height: 1.2em;
  border: solid 1px transparent;
  transition: all 0.35s ease;
}
a.blockLink:hover, .blockLink:hover, input[type=submit]:hover, button:hover, .button:hover, blockLink:hover {
  background-color: #185176;
}

a.downloadLink {
  padding: 0.5em 1em;
  background-color: #1f3b4d;
  color: #FFFFFF;
  border-radius: 2em;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  font-size: 15px;
  font-size: clamp(14px, 2.2vw, 18px);
  line-height: 1.4em;
  font-weight: 700;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-content: center;
  align-items: center;
}
a.downloadLink::after {
  content: "";
  display: block;
  width: 1em;
  height: 1em;
  margin-left: 0.5em;
  background-image: url("/assets/img/triangle-down-white.svg");
  background-repeat: no-repeat;
  background-position: center center;
}

input[type=submit], button, .button {
  border-radius: 0;
  padding: 1.25em 1.5em;
  border: solid 1px #FFFFFF;
}

.smallPrint {
  font-size: 11px;
  font-size: clamp(12.6px, 1.98vw, 16.2px);
}

.socials {
  width: auto;
  list-style-type: none;
}
.socials li {
  width: 28px;
  height: 28px;
  display: inline-block;
  margin: 0;
  padding: 0;
  z-index: 1;
  transition: all 0.35s ease;
  background-color: #1f3b4d;
}
.socials:hover li span {
  opacity: 1;
}
.socials a {
  width: 100%;
  margin: 0;
  padding: 0;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  transition: all 0.35s ease;
}
.socials a span {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  background-position: center center;
  background-size: 55% 55%;
  background-repeat: no-repeat;
}
.socials a span p {
  opacity: 0;
  font-size: 1px;
}
.socials a span.connect {
  background-image: url(../img/socials/connect.svg);
}
.socials a span.fb {
  background-image: url(../img/socials/facebook.svg);
}
.socials a span.tw {
  background-image: url(../img/socials/twitter.svg);
}
.socials a span.li {
  background-image: url(../img/socials/linkedin.svg);
}
.socials a span.wp {
  background-image: url(../img/socials/wordpress.svg);
}
.socials a span.pt {
  background-image: url(../img/socials/pinterest.svg);
}
.socials a span.ig {
  background-image: url(../img/socials/instagram.svg);
}

.videoHolder {
  background-color: #f5f5f5;
  position: relative;
}
.videoHolder .proportioner {
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.videoHolder iframe, .videoHolder .videoHolder object, .videoHolder .videoHolder embed, .videoHolder video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.text {
  max-width: 1050px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.textImage .wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: center;
}
.textImage .text {
  padding: calc(12px + 1.5vw) calc(24px + 3vw) calc(12px + 1.5vw) 0;
  width: 50%;
  text-align: left;
}
.textImage .image {
  width: 50%;
}
.textImage.imageLeft .text {
  padding: calc(12px + 1.5vw) 0 calc(12px + 1.5vw) calc(24px + 3vw);
  order: 2;
}
.textImage.imageLeft .image {
  order: 1;
}

.noBreak {
  white-space: nowrap;
}

.text.textAlignCentre * {
  text-align: center;
}

@media only screen and (max-width: 768px) {
  .textImage .text, .textImage.imageLeft .text {
    padding: 0 0 calc(24px + 3vw) 0;
    width: 100%;
    text-align: left;
    order: 1;
  }
  .textImage .image, .textImage.imageLeft .image {
    width: 100%;
    order: 2;
  }
} /*$tablet ends*/
.block {
  margin-top: calc(24px + 3vw);
}

.block.noGap {
  margin-top: 0;
}

.block.halfGap {
  margin-top: calc(6px + 0.75vw);
}

.mainBanner {
  overflow: hidden;
}
.mainBanner .icons {
  width: 25%;
  max-width: 200px;
  min-width: 130px;
  margin-right: calc(24px + 3vw);
  margin-left: auto;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-content: center;
  align-items: center;
  padding: calc(24px + 3vw) 0;
  gap: calc(12px + 1.5vw);
  z-index: 5;
}

.intro {
  margin-top: calc(24px + 3vw);
}

.introBanner {
  z-index: 2;
  overflow: visible;
}
.introBanner .flexer {
  align-items: stretch;
}
.introBanner h2 {
  font-size: 28px;
  font-size: clamp(25.2px, 3.96vw, 32.4px);
  color: #6d7d85;
}
.introBanner .keyPoints {
  justify-content: space-around;
}
.introBanner .keyPoints .point .imageHolder {
  max-width: 100%;
}
.introBanner .text {
  width: 66.6%;
  padding: calc(24px + 3vw);
  padding-left: 0;
}
.introBanner .image {
  width: 33.4%;
}
.introBanner .image .imageHolder {
  position: absolute;
  left: 0;
  top: auto;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
.introBanner .image .imageHolder img {
  object-position: 0 0;
}

@media only screen and (max-width: 700px) {
  .introBanner .text {
    width: 100%;
    padding: calc(24px + 3vw) 0;
  }
  .introBanner .image {
    display: none;
  }
} /*$smallTablet ends*/
.imageBanner {
  padding: calc(48px + 6vw) 0;
}
.imageBanner .flexer {
  justify-content: flex-start;
}
.imageBanner .text {
  width: 50%;
  padding: calc(24px + 3vw);
  padding-left: 0;
  padding-right: calc(24px + 3vw);
  background-color: rgba(255, 255, 255, 0.9);
  z-index: 2;
  text-align: left;
  margin-left: 0;
}
.imageBanner .text .logo {
  width: 75%;
  max-width: 350px;
  margin-bottom: calc(12px + 1.5vw);
}
.imageBanner .text:before {
  content: "";
  display: block;
  position: absolute;
  left: auto;
  top: 0;
  right: 100%;
  bottom: 0;
  width: 100vw;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.9);
}
.imageBanner .imageHolder {
  opacity: 1;
  z-index: 1;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 110%;
  height: 100%;
}
.imageBanner .imageHolder img {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

@media only screen and (max-width: 500px) {
  .imageBanner {
    padding: 0;
    display: flex;
    flex-direction: column;
  }
  .imageBanner .wrapper {
    order: 1;
  }
  .imageBanner .text {
    width: 100%;
    padding: 0;
    padding-right: 0;
    margin-left: 0;
  }
  .imageBanner .imageHolder {
    position: relative;
    left: auto;
    top: auto;
    right: 0;
    bottom: auto;
    order: 0;
    height: auto;
    margin-bottom: calc(24px + 3vw);
    width: 130%;
    margin-left: -30%;
  }
  .imageBanner .imageHolder span {
    padding-top: 60%;
  }
} /*500px ends*/
.keyPoints {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: flex-start;
  align-items: stretch;
  width: 100%;
}
.keyPoints .point {
  width: 33.33%;
  padding: 12px;
  text-align: center;
}
.keyPoints .point .imageHolder {
  width: 70%;
  max-width: 140px;
  margin-left: auto;
  margin-right: auto;
}
.keyPoints .point .imageHolder img {
  object-fit: contain;
}
.keyPoints .point .imageHolder + * {
  margin-top: calc(12px + 1.5vw);
}
.keyPoints.vertLined .point {
  border-left: solid 1px #1f3b4d;
  padding: 0 calc(12px + 1.5vw);
  margin-bottom: calc(12px + 1.5vw);
}
.keyPoints.vertLined .point:first-child {
  border: 0;
}

@media only screen and (max-width: 768px) {
  .keyPoints.vertLined {
    flex-wrap: wrap;
    flex-direction: column;
  }
  .keyPoints.vertLined .point {
    width: 100%;
    border-left: 0;
    border-top: solid 1px #1f3b4d;
    padding-top: calc(12px + 1.5vw);
    margin-bottom: calc(12px + 1.5vw);
    padding-left: 0px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: center;
    align-items: flex-start;
  }
  .keyPoints.vertLined .point .info {
    text-align: left;
    width: 64%;
  }
  .keyPoints.vertLined .point .imageHolder {
    width: 33%;
    padding-right: calc(24px + 3vw);
  }
  .keyPoints.vertLined .point:first-child {
    border: 0;
    padding-top: 0px;
  }
} /*$tablet ends*/
@media only screen and (max-width: 450px) {
  .keyPoints.vertLined {
    flex-wrap: wrap;
    flex-direction: column;
  }
  .keyPoints.vertLined .point {
    padding: 0;
    padding-top: calc(12px + 1.5vw);
    flex-direction: column;
  }
  .keyPoints.vertLined .point .info {
    text-align: center;
    width: 100%;
  }
  .keyPoints.vertLined .point .imageHolder {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    padding-right: 0;
  }
} /*$phone ends*/
.specPoints {
  display: grid;
  grid-template-areas: "image text";
  grid-template-columns: 1fr 1fr;
  overflow: clip;
}
.specPoints .text {
  background-color: #6d7d85;
  padding: calc(24px + 3vw);
  padding-left: calc(12px + 1.5vw);
  order: 2;
  margin-top: calc(12px + 1.5vw);
  grid-area: text;
  text-align: left;
}
.specPoints .text::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100%;
  background-color: #6d7d85;
}
.specPoints .text ul {
  list-style-type: none;
}
.specPoints .text ul li {
  margin-bottom: 1.2em;
}
.specPoints .text img {
  width: 50%;
  max-width: 200px;
}
.specPoints .imageHolder {
  z-index: 5;
}
.specPoints * {
  color: #FFFFFF;
}

@media only screen and (max-width: 768px) {
  .specPoints {
    grid-template-columns: 1fr 2fr;
  }
} /*$tablet ends*/
.specification .flexer {
  align-content: center;
  align-items: stretch;
  justify-content: space-between;
}
.specification .spec {
  width: calc(50% - calc(6px + 0.75vw));
  text-align: left;
  padding: calc(24px + 3vw);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #6d7d85;
  order: 1;
}
.specification .spec h1, .specification .spec h2, .specification .spec h3, .specification .spec h4, .specification .spec h5, .specification .spec h6, .specification .spec p, .specification .spec ul, .specification .spec ol, .specification .spec table {
  color: #FFFFFF;
}
.specification .spec > *:last-child {
  margin-bottom: 0;
}
.specification .spec .logo {
  width: 75%;
  max-width: 350px;
  margin-bottom: calc(12px + 1.5vw);
}
.specification .spec .table {
  margin-bottom: calc(12px + 1.5vw);
}
.specification .spec .table p {
  padding-top: 12px;
  padding-bottom: 12px;
  margin: 0;
}
.specification .spec .table p + p {
  border-top: solid 1px rgba(255, 255, 255, 0.5);
}
.specification .spec .imageHolder {
  width: 75%;
  max-width: 240px;
  min-width: 170px;
}
.specification .flexer > .imageHolder {
  width: calc(50% - calc(6px + 0.75vw));
  order: 0;
}

@media only screen and (max-width: 700px) {
  .specification .flexer {
    flex-wrap: wrap;
  }
  .specification .spec, .specification .flexer > .imageHolder {
    width: 100%;
  }
} /*$smallTablet ends*/
.steps {
  margin-top: calc(24px + 3vw);
}
.steps .stepGrid {
  display: grid;
  grid-template-areas: "allSteps allSteps allSteps" "step01Ins step02Ins step03Ins" "downloadIns downloadIns downloadIns";
  grid-template-columns: repeat(1fr, 3);
}
.steps .stepGrid .allSteps {
  grid-area: allSteps;
  z-index: 5;
}
.steps .stepGrid .indSteps {
  display: none;
  z-index: 5;
}
.steps .stepGrid .stepIns {
  display: block;
  margin-top: calc(12px + 1.5vw);
}
.steps .stepGrid .stepIns h3 {
  font-size: 24px;
  font-size: clamp(22.4px, 3.52vw, 28.8px);
  margin-bottom: 0;
}
.steps .stepGrid .stepIns::before {
  content: "";
  display: none;
  position: absolute;
  left: -50vw;
  top: clamp(-100px, -12vw, 50px);
  width: 200vw;
  height: 300px;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.075) 0%, rgba(0, 0, 0, 0) 100%);
}
.steps .stepGrid .step01Ins {
  grid-area: step01Ins;
  padding-left: 10%;
}
.steps .stepGrid .step01Ins::before {
  display: block;
}
.steps .stepGrid .step02Ins {
  grid-area: step02Ins;
  padding-left: 6%;
  padding-right: 6%;
}
.steps .stepGrid .step03Ins {
  grid-area: step03Ins;
  padding-right: 10%;
}
.steps .stepGrid .downloadIns {
  grid-area: downloadIns;
  display: grid;
  width: fit-content;
  margin: auto;
  margin-left: 3.5%;
  margin-top: calc(12px + 1.5vw);
  gap: 1.4em;
  align-items: center;
  grid-template-areas: "icon text button";
  grid-template-columns: clamp(50px, 18%, 70px) 1fr;
}
.steps .stepGrid .downloadIns .icon {
  grid-area: icon;
}
.steps .stepGrid .downloadIns .text {
  text-align: left;
}
.steps .stepGrid .downloadIns .text h6 {
  margin-bottom: 4px;
}
.steps .stepGrid .downloadIns .text p {
  margin-bottom: 0;
}

@media only screen and (max-width: 700px) {
  .steps {
    background-image: none;
  }
  .steps .stepGrid {
    max-width: 80%;
    grid-template-areas: "step01" "step01Ins" "step02" "step02Ins" "step03" "step03Ins" "downloadIns";
    grid-template-columns: 1fr;
  }
  .steps .stepGrid .allSteps {
    display: none;
  }
  .steps .stepGrid .indSteps {
    display: block;
    margin-top: calc(12px + 1.5vw);
  }
  .steps .stepGrid .indSteps.step01 {
    margin-top: 0;
  }
  .steps .stepGrid .step01Ins,
  .steps .stepGrid .step02Ins,
  .steps .stepGrid .step03Ins {
    padding-left: 10%;
    padding-right: 10%;
  }
  .steps .stepGrid .step01Ins::before,
  .steps .stepGrid .step02Ins::before,
  .steps .stepGrid .step03Ins::before {
    display: block;
  }
  .steps .stepGrid .downloadIns {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    grid-template-areas: "icon text" "icon button";
    grid-template-rows: 1fr auto;
    align-items: start;
  }
  .steps .stepGrid .downloadIns a {
    width: fit-content;
  }
} /*$smallTablet ends*/
.panelStyles .styles {
  display: grid;
  grid-template-columns: 5fr 9fr;
  margin-top: calc(12px + 1.5vw);
  gap: 2em;
}
.panelStyles .styles .text {
  margin-top: 2em;
  text-align: left;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: calc(12px + 1.5vw);
}
.panelStyles .styles .text .style {
  display: grid;
  grid-column: span 4;
  grid-template-columns: subgrid;
  padding-right: 20px;
  align-content: center;
  align-self: center;
}
.panelStyles .styles .text .style span {
  grid-column: span 3;
}
.panelStyles .styles .text .style img {
  max-height: 210px;
  width: auto;
}
.panelStyles .styles .text .style + .style {
  border-top: solid 1px #cccccc;
  padding-top: calc(12px + 1.5vw);
}
.panelStyles .styles .styleCompImage::before, .panelStyles .styles .styleCompImage::after {
  display: block;
  position: absolute;
  top: 0;
  width: 40%;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  margin-bottom: 0.8em;
  font-weight: 700;
  font-size: 20px;
  font-size: clamp(16.8px, 2.64vw, 21.6px);
  text-align: center;
}
.panelStyles .styles .styleCompImage::before {
  content: "Traditional";
  left: 10%;
}
.panelStyles .styles .styleCompImage::after {
  content: "Venetian";
  right: 9%;
}

@media only screen and (max-width: 1100px) {
  .panelStyles .styles {
    display: grid;
    grid-template-columns: 6fr 6fr;
    margin-top: calc(12px + 1.5vw);
    gap: 2em;
  }
} /*$laptop ends*/
@media only screen and (max-width: 900px) {
  .panelStyles .styles {
    grid-template-areas: "styleComp" "text";
    grid-template-columns: 1fr;
  }
  .panelStyles .styles .text {
    width: 80%;
    margin: auto;
    grid-area: text;
  }
  .panelStyles .styles .text .style {
    align-items: center;
  }
} /*$laptop ends*/
.components .wrapper {
  background-color: color-mix(in srgb, #6d7d85 10%, transparent);
  padding: calc(6px + 2vw);
}
.components .flexer {
  gap: calc(6px + 2vw);
}
.components h4 {
  padding-bottom: 0.75em;
  margin-bottom: 0.75em;
  border-bottom: solid 1px rgba(0, 0, 0, 0.2);
}
.components .sizeGuide p {
  margin: 0;
}
.components .sizes {
  display: grid;
  grid-template-columns: 1fr 1px 1fr 1px 1fr 1px 1fr;
  gap: calc(12px + 1.5vw);
  align-items: end;
  justify-content: center;
  text-align: center;
  margin-top: 2.5em;
  margin-bottom: 2em;
}
.components .sizes h6 {
  margin-top: 8px;
}
.components .sizes h5 {
  margin: 0;
}
.components .sizes strong {
  color: #1f3b4d;
}
.components .sizes p {
  margin-bottom: 4px;
}
.components .sizes .divider {
  width: 1px;
  background-color: rgba(0, 0, 0, 0.2);
  height: 100%;
}
.components .sizes small {
  font-size: 11px;
  font-size: clamp(12.6px, 1.98vw, 16.2px);
}
.components .componentList {
  flex-grow: 1;
}
.components .componentList h4 {
  white-space: nowrap;
}
.components .componentList .itemList {
  display: grid;
  grid-template-columns: 2.5em 1fr;
  align-content: center;
  align-items: center;
  gap: 0.75em 1.25em;
}
.components .componentList .itemList h6 {
  font-size: 1.6em;
  margin: 0;
}

@media only screen and (max-width: 768px) {
  .components .flexer {
    gap: calc(6px + 2vw);
    flex-wrap: wrap;
  }
  .components .sizeGuide,
  .components .componentList {
    width: 100%;
  }
} /*$tablet ends*/
@media only screen and (max-width: 650px) {
  .components .sizes {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
  }
  .components .sizes .divider.middle {
    display: none;
  }
} /*$bigPhone ends*/
.whereToBuy {
  padding: calc(24px + 3vw) 0;
  background-color: color-mix(in srgb, #6d7d85 10%, transparent);
}
.whereToBuy .logos {
  margin-top: calc(6px + 2vw);
  mix-blend-mode: multiply;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  align-items: center;
  gap: 2em;
}
.whereToBuy .logos .supplierLogo {
  width: 200px;
  text-align: center;
  padding: 12px;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-content: center;
  align-items: center;
}
.whereToBuy .logos .supplierLogo img {
  max-height: 100px;
  max-width: 200px;
  object-fit: contain;
  aspect-ratio: 1/1;
  object-fit: contain;
  object-position: center center;
}
.whereToBuy .logos .supplierLogo span {
  font-size: 13px;
  color: #007ac1;
}

@media only screen and (max-width: 900px) {
  .whereToBuy .links {
    columns: 2 auto;
  }
} /*$bigTablet ends*/
@media only screen and (max-width: 650px) {
  .whereToBuy .links {
    columns: 1 auto;
    column-gap: 2em;
  }
} /*$bigPhone ends*/
.homeLogo {
  background-color: #FFFFFF;
  padding: calc(24px + 3vw + 4em) 0 calc(24px + 3vw) 0;
  z-index: 4;
}
.homeLogo .logo {
  width: 65%;
  max-width: 750px;
  min-width: 260px;
  margin: auto;
  transform: translateX(4%);
}

.stockistLink {
  position: fixed;
  left: 0;
  top: 0;
  right: auto;
  bottom: auto;
  width: 100%;
  z-index: 5;
  pointer-events: none;
}
.stockistLink .findStockist {
  margin-top: 0;
  padding-bottom: 1.25em;
  font-size: 15px;
  font-size: clamp(14px, 2.2vw, 18px);
  clip-path: polygon(0% 0%, 0% 80%, 50% 100%, 100% 80%, 100% 0%);
  pointer-events: all;
}
.stockistLink .findStockist:hover {
  padding-top: 1.25em;
}
.stockistLink nav {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-content: flex-end;
  align-items: center;
  padding: 0 0 calc(12px + 1.5vw) 0;
}
.stockistLink nav ul {
  margin-bottom: 0;
  list-style-type: none;
}

.header {
  position: fixed;
  top: 0px;
  z-index: 3;
  background-color: #FFFFFF;
  overflow: visible;
  filter: drop-shadow(0 0 0.75rem rgba(0, 0, 0, 0.5));
}
.header.stickyHead {
  position: sticky;
}
.header > .wrapper {
  padding-top: calc(12px + 1.5vw);
}
.header .logo {
  width: 40%;
  max-width: 350px;
  margin: auto;
  margin-bottom: calc(12px + 1.5vw);
  transform: translateX(4%);
}

.heading {
  margin-bottom: calc(12px + 1.5vw);
}
.heading .text {
  text-align: center;
}
.heading .text h2 {
  font-size: 24px;
  font-size: clamp(22.4px, 3.52vw, 28.8px);
}

@media only screen and (max-width: 768px) {
  .header .logo {
    margin-left: 0;
  }
} /*$tablet ends*/
@media only screen and (max-width: 650px) {
  .stockistLink nav .findStockist span {
    display: none;
  }
} /*$bigPhone ends*/
.footer {
  border-top: solid 1px #1f3b4d;
  overflow: visible;
  padding-bottom: calc(12px + 1.5vw);
  margin-top: calc(24px + 3vw);
}
.footer .wrapper {
  padding-top: calc(12px + 1.5vw);
}
.footer .logo {
  width: 33%;
  max-width: 200px;
  padding: 18px;
  background-color: #FFFFFF;
  position: absolute;
  left: 0;
  top: 0;
  right: auto;
  bottom: auto;
  transform: translateY(-53%) translateX(-18px);
}
.footer .row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: flex-start;
  padding-bottom: calc(6px + 0.75vw);
}
.footer .address,
.footer .opening,
.footer .socials,
.footer .smallLinks {
  font-style: normal;
  padding-right: calc(24px + 3vw);
}
.footer .address ul,
.footer .opening ul,
.footer .socials ul,
.footer .smallLinks ul {
  list-style-type: none;
}
.footer .socials {
  padding-right: 0;
  margin-right: 0;
  margin-left: auto;
}
.footer .socials ul {
  width: auto;
  list-style-type: none;
}
.footer .socials ul li {
  width: 28px;
  height: 28px;
  display: inline-block;
  margin: 0;
  margin-left: 14px;
  padding: 0;
  z-index: 1;
  transition: all 0.35s ease;
}
.footer .socials ul:hover li span {
  opacity: 1;
}
.footer .socials ul a {
  width: 100%;
  margin: 0;
  padding: 0;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #FFFFFF;
  transition: all 0.35s ease;
}
.footer .socials ul a span {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  background-position: center center;
  background-size: 55% 55%;
  background-repeat: no-repeat;
}
.footer .socials ul a span p {
  opacity: 0;
  font-size: 1px;
}
.footer .socials ul a span.connect {
  background-image: url(../img/socials/connect.svg);
}
.footer .socials ul a span.fb {
  background-image: url(../img/socials/facebook.svg);
}
.footer .socials ul a span.tw {
  background-image: url(../img/socials/twitter.svg);
}
.footer .socials ul a span.wp {
  background-image: url(../img/socials/wordpress.svg);
}
.footer .socials ul a span.pt {
  background-image: url(../img/socials/pinterest.svg);
}
.footer .socials ul a span.ig {
  background-image: url(../img/socials/instagram.svg);
}
.footer .smallLinks a {
  font-size: 11px;
  font-size: clamp(12.6px, 1.98vw, 16.2px);
  margin-top: calc(6px + 0.75vw);
  display: block;
}
.footer a.kingCredit {
  font-size: 10px;
  font-size: clamp(11.2px, 1.76vw, 14.4px);
  margin-right: 0;
  margin-left: auto;
  margin-top: calc(6px + 0.75vw);
  display: block;
}

.disclaimer p {
  font-size: 11px;
  font-size: clamp(12.6px, 1.98vw, 16.2px);
  margin-top: calc(6px + 0.75vw);
  display: block;
}