@import url(jquery-1.11.3-ui.css);
@import url(swipe.css);
@import url(mmenu.css);
@import url("https://use.typekit.net/hsm7lvr.css");
:root {
  --success: rgb(53, 124, 57);
  --alert: rgb(244, 203, 79);
  --warning: rgb(244, 134, 79);
  --danger: rgb(140, 38, 38);
  --dark: #2A3933;
  --medium: #59635F;
  --light: #f7f7f7;
  --main: #386351;
  --second: #8aa79c;
  --accent: #B8A8A5;
  --font: "mundial", sans-serif;
  --font-heading: "quasimoda", sans-serif;
  --animate: all 0.35s ease-in-out;
  --shadow: 0 0 1.6rem hsla(0 0% 0% / 0.16);
  --grid-gap: 1.6rem;
}

/* ---------- Table Of Contents ---------- */
/*
	0. Resets
	1. Generic Tags
  2. Fonts
  3. Structure
  4. Editable Content
  5. Desktop Header & Navigation
  6. Mobile Header & Navigation
  7. Footer
  8. Buttons
  9. Banner
  10. Inner Header
  11. Forms
  12. Messages
  13. Flex Column Structure
  14. Grid Column Structure
  15. Card & Box Base Styles 
  16. Base Strip Styles
  17. Animations
  18. Swipebox Styles
  19. Sub Page Menu
  20. Contact
  21. Contact Multi Location
  22. Map
  23. Social Media
  24. Toggler 
  25. Products
  26. Modal Styles
  27. FAQs
  28. Events
  29. Categories
  30. Pop Up
  31. Page Details
*/

/* ---------- 0. Resets ---------- */

/* ----- XHTML, HTML4, HTML5 Reset -----*/
a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
dialog,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
font,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
hr,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
meter,
nav,
object,
ol,
output,
p,
pre,
progress,
q,
rp,
rt,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video,
xmp {
  border: 0;
  margin: 0;
  padding: 0;
  font-size: 100%;
}
html,
body {
  height: 100%;
}
body {
  overflow-x: hidden !important;
  width: 100%;
}
#page{
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  /*
  Override the default (display: inline) for
  browsers that do not recognize HTML5 tags.

  IE8 (and lower) requires a shiv:
  http://ejohn.org/blog/html5-shiv
  */
  display: block;
}
b,
strong {
  /*
  Makes browsers agree.
  IE + Opera = font-weight: bold.
  Gecko + WebKit = font-weight: bolder.
  */
  font-weight: bold;
}
img {
  color: transparent;
  font-size: 0;
  vertical-align: middle;
  /*
  For IE.
  http://css-tricks.com/ie-fix-bicubic-scaling-for-images
  */
  -ms-interpolation-mode: bicubic;
}
li {
  /*
  For IE6 + IE7.
  */
  display: list-item;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
th,
td,
caption {
  font-weight: normal;
  vertical-align: top;
  text-align: left;
}
q {
  quotes: none;
}
q:before,
q:after {
  content: "";
  content: none;
}
sub,
sup,
small {
  font-size: 75%;
}
sub,
sup {
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
svg {
  /*
  For IE9.
  */
  overflow: hidden;
}
pre {
  white-space: pre-wrap;
  white-space: -moz-pre-wrap !important;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
  width: 100%;
}
input[name="middle_name"] {
  position: absolute;
  left: -9999px;
}
mark{
  background: var(--main);
  color: white;
}

/* ---------- 1. Generic Tags ---------- */

html {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  font-size: 62.5%;
}
*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}
::-moz-selection {
  background: hsla(0 0% 0% / 0.75);
  color: white;
}
::selection {
  background: hsla(0 0% 0% / 0.75);
  color: white;
}
body {
  color: var(--medium);
  font-size: 1.6rem;
  line-height: 1.4;
  font-weight: 400;
  font-optical-sizing: auto;
  font-style: normal;
  overflow-x: hidden;
  padding: 0;
  margin: 0;
  text-shadow: none;
  -webkit-text-size-adjust: none;
}
hr {
  clear: both;
  border-top: 2px solid hsla(0 0% 0% / 0.1);
  height: 1px;
  margin: 2.4rem 0;
}
a {
  color: var(--medium);
}
a:hover {
  color: var(--main);
  text-decoration: none;
}
a[href^="x-apple-data-detectors:"] {
  color: inherit;
  text-decoration: inherit;
}
.clear {
  clear: both;
}

/* ---------- 2. Fonts ---------- */

body,
p,
ol li,
ul li,
pre,
input,
textarea,
select {
  font-size: 1.6rem;
  line-height: 1.4;
  font-weight: 400;
  font-family: var(--font);
}
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  color: var(--dark);
  margin: 0 0 2.4rem;
  line-height: 1;
  text-transform: uppercase;
}
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4{
  letter-spacing: -0.025em;
  font-weight: 500;
}
h5, .h5,
h6, .h6 {
  letter-spacing: .1em;
  font-weight: 300;
}
h1, .h1 {
  font-size: clamp(3.2rem, 3.5vw, 4.8rem);
}
h2, .h2 {
  font-size: clamp(2.8rem, 2.9vw, 4rem);
}
h3, .h3 {
  font-size: clamp(2.4rem, 2.4vw, 3.2rem);
}
h4, .h4 {
  font-size: clamp(2rem, 1.8vw, 2.4rem);
}
h5, .h5 {
  font-size: clamp(1.8rem, 1.6vw, 2.2rem);
}
h6, .h6 {
  font-size: clamp(1.6rem, 1.5vw, 1.8rem);
}
p {
  margin: 0 0 1.6rem;
}


/* ---------- 3. Structure ---------- */

.content_container {
  width: 100%;
  padding: 4.8rem 3.2rem;
  background: hsl(0 0% 100%);
}
.content {
  margin: 0 auto;
  max-width: 1264px;
  padding: 0;
}
/* ----- Content Widths ----- */
.xlarge-width {
  max-width: 1920px;
  margin: 0 auto;
}
.large-width {
  max-width: 1366px;
  margin: 0 auto;
}
.medium-width {
  max-width: 1024px;
  margin: 0 auto;
}
.small-width {
  max-width: 768px;
  margin: 0 auto;
}
.xsmall-width {
  max-width: 560px;
  margin: 0 auto;
}
@media (min-width: 960px) {
  .content_container {
    padding: 9.6rem 4.8rem;
  }
}
/* ----- Text Alignment ----- */
.center-text {
  text-align: center;
}
.center-list {
  justify-content: center;
}
/* ----- Strip Colours ----- */
/* ----- Grey Background ----- */
.light {
  background: var(--light);
}
/* ----- Dark / Colour Background ----- */
.dark {
  background: var(--dark);
}
.medium {
  background: var(--medium);
}
.colour {
  background: var(--main);
}
.dark :is(h1,.h1,h2,.h2,h3,.h3,h4,.h4,ul li,ol li,p,pre),
.medium :is(h1,.h1,h2,.h2,h3,.h3,h4,.h4,ul li,ol li,p,pre),
.colour :is(h1,.h1,h2,.h2,h3,.h3,h4,.h4,ul li,ol li,p,pre) {
  color: white;
}
.dark :is(h5,.h5,h6,.h6){
  color: var(--main);
}
.medium :is(h5,.h5,h6,.h6),
.colour :is(h5,.h5,h6,.h6){
  color: white;
}
.colour a,
.medium a,
.dark a {
  color: white;
}
.colour hr,
.medium hr,
.dark hr {
  border-color: hsla(0 0% 100% / 0.15);
}
.medium :is(input.superbutton, a.button, button.superbutton, a.superbutton, .superbutton),
.dark :is(input.superbutton, a.button, button.superbutton, a.superbutton, .superbutton),
.colour :is(input.superbutton, a.button, button.superbutton, a.superbutton, .superbutton) {
  color: white;
}
.colour :is(input.superbutton:hover, a.button:hover, button.superbutton:hover, a.superbutton:hover, .superbutton:hover) {
  color: white;
}
.medium :is(input.superbutton:hover, a.button:hover, button.superbutton:hover, a.superbutton:hover, .superbutton:hover),
.dark :is(input.superbutton:hover, a.button:hover, button.superbutton:hover, a.superbutton:hover, .superbutton:hover) {
  background: var(--main);
  color: white;
}
.colour form label,
.medium form label,
.dark form label {
  color: white;
}
.colour form input,
.colour form select,
.colour form textarea,
.medium form input,
.medium form select,
.medium form textarea,
.dark form input,
.dark form select,
.dark form textarea {
  background: hsla(0 0% 100% / 0.1);
  border-color: white;
  color: white;
}
.light .editable_content table tr th, 
.light .editable_content table thead tr td{
  border-color: var(--light);
}
.light .editable_content table tbody tr td{
  border-color: var(--light);
  background: white;
}
.medium .editable_content table tr th, 
.medium .editable_content table thead tr td{
  border-color: var(--medium);
}
.medium .editable_content table tbody tr td{
  background: hsla(0 0% 100% / .1);
  border-color: var(--medium);
  color: white;
}
.dark .editable_content table tr th, 
.dark .editable_content table thead tr td{
  border-color: var(--dark);
}
.dark .editable_content table tbody tr td{
  background: hsla(0 0% 100% / .1);
  border-color: var(--dark);
  color: white;
}
.colour .editable_content table tr th, 
.colour .editable_content table thead tr td{
  border-color: var(--main);
  background: white;
  color: var(--dark);
}
.colour .editable_content table tbody tr td{
  background: hsla(0 0% 100% / .1);
  border-color: var(--main);
  color: white;
}
/* ----- Reduced Padding ----- */
.reduced-padding {
  padding: 4.8rem 3.2rem;
}
/* ----- Subtitle Spacing -----*/
.subtitle-top :is(h5, .h5, h6, .h6) {
  margin: 0;
}
.subtitle-bottom :is(h1, .h1, h2, .h2, h3, .h3, h4, .h4) {
  margin: 0;
}

/* ---------- 4. Editable Content ---------- */

.editable_content *:last-child {
  margin-bottom: 0;
}
.editable_content ul {
  list-style: disc outside none;
  margin: 0 0 1.6rem 2rem;
}
.editable_content ul li {
  padding: 0;
  margin: 0 0 .8rem;
}
.editable_content ol {
  list-style: decimal outside none;
  margin: 0 0 1.6rem 2rem;
}
.editable_content ol li {
  padding: 0;
  margin: 0 0 .8rem;
}
.editable_content figure{
  display: block;
}
.editable_content figure.float-left{
  float: left;
  margin: .8rem .8rem .8rem 0;
}
.editable_content figure.float-right{
  float: right;
  margin: .8rem 0 .8rem .8rem;
}
.editable_content figure.wrap-center{
  margin: .8rem auto;
}
.editable_content img {
  display: inline-block;
  max-width: 100%;
  max-height: 100%;
  height: auto !important;
}
.editable_content table {
  margin: 1.6rem 0;
  text-align: center;
  width: 100%;
  display: table;
}
.editable_content table tr th,
.editable_content table thead tr td {
  font-weight: bold;
  color: white;
  background: var(--main);
  padding: .8rem;
  border: 2px solid var(--main);
  border-right: 2px solid white;
  border-bottom: 2px solid white;
}
.editable_content table tr td {
  border: 2px solid white;
  background: var(--light);
  padding: .8rem;
  font-size: 1.6rem;
}
@media screen and (max-width: 960px) {
  .editable_content figure {
    margin: .8rem 0;
  }
  .editable_content figure.float-left,
  .editable_content figure.float-right{
    float: none;
  }
  .editable_content figure.wrap-center{
    margin: .8rem auto;
  }
}

/* ---------- 5. Desktop Header & Navigation ---------- */

/* ----- Top Header ----- */
.top-header {
  background: var(--light);
  border-bottom: 1px solid hsl(0 0% 80%);
  padding: .8rem 3.2rem;
}
.top-header .content {
  display: flex;
  justify-content: flex-end;
  gap: var(--grid-gap);
  align-items: center;
}
.top-header .content .language{
  font-size: 1.4rem;
  line-height: 1;
  text-transform: uppercase;
  display: flex;
  gap: .8rem;
  margin-right: auto;
}
.top-header .content .language span{
  display: block;
}
.top-header .content .language span:first-of-type{
  padding-right: .8rem;
  border-right: 2px solid hsla(0 0% 0% / .1);
}
.top-header .content > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--grid-gap);
}
.top-header .content > ul li {
  font-size: 1.4rem;
  line-height: 1;
  text-transform: uppercase;
  color: var(--medium);
}
.top-header .content > ul li a{
  color: var(--medium);
  text-decoration: none;
}
.top-header .content > ul li a:hover{
  color: var(--main);
}
.top-header .content .social_media ul {
  gap: calc(var(--grid-gap) / 2);
}
.top-header .content .social_media ul li {
  margin: 0;
}
.top-header .content .social_media ul li a {
  width: 2.8rem;
  height: 2.8rem;
  background: var(--medium);
  color: var(--light);
}
.top-header .content .social_media ul li a:hover{
  background: var(--main);
}
.top-header .content .social_media ul li a i {
  font-size: 1.2rem;
}
@media screen and (max-width: 960px) {
  .top-header {
    display: none;
  }
}
/* ----- Full Header ----- */
.full_header {
  display: none;
  background: white;
  width: 100%;
  z-index: 999;
  top: 0;
  position: sticky;
  padding: 0 3.2rem;
  box-shadow: var(--shadow);
}
.jqueryslidemenu {
  width: 100%;
  max-width: 1264px;
  padding: 0;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
.jqueryslidemenu a.logo {
  width: 300px;
  display: block;
  margin: 0;
  padding: 0;
}
.jqueryslidemenu a.logo img {
  width: 100%;
  height: auto;
}
.jqueryslidemenu nav{
  width: calc(100% - 348px);
}
.jqueryslidemenu ul {
  width: 100%;
  list-style: none;
  display: flex;
  justify-content: right;
  align-items: center;
}
.jqueryslidemenu ul li {
  position: relative;
  margin: 0;
}
.jqueryslidemenu ul li.mobile-item {
  display: none;
}
.jqueryslidemenu ul li a {
  width: 100%;
  padding: 10px;
  display: block;
  color: var(--dark);
  font-size: 1.6rem;
  line-height: 1;
  font-weight: 600;
  text-decoration: none;
  position: relative;
}
.jqueryslidemenu ul li a:hover,
.jqueryslidemenu ul li:hover a,
.jqueryslidemenu ul li.Selected a,
.jqueryslidemenu ul li:has(ul li.Selected) a,
.jqueryslidemenu ul li.Selected a:hover {
  color: var(--dark);
}
.jqueryslidemenu ul li a::after {
  content: "";
  background: var(--main);
  width: 0;
  height: 3px;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 0);
  transition: var(--animate);
}
.jqueryslidemenu ul li a:hover::after,
.jqueryslidemenu ul li:hover a::after,
.jqueryslidemenu ul li.Selected a::after,
.jqueryslidemenu ul li:has(ul li.Selected) a::after,
.jqueryslidemenu ul li.Selected a:hover::after {
  width: 100%;
}
/* ----- FIRST DROP-DOWN LAYER ----- */
.jqueryslidemenu ul li ul {
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  position: absolute;
  left: 0;
  display: block;
  visibility: hidden;
  width: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: none;
  width: 256px;
  background: var(--main);
  display: none;
}
.jqueryslidemenu ul li ul li {
  display: list-item;
  float: none;
  border: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  margin: 0;
  padding: 0;
}
.jqueryslidemenu ul li ul li a {
  color: white;
  padding: 1.6rem;
  margin: 0;
  background: none;
}
.jqueryslidemenu ul li ul li a::after {
  display: none;
}
.jqueryslidemenu ul li:hover ul {
  visibility: visible;
}
.jqueryslidemenu ul li:hover ul li a {
  color: white;
  padding: 1.6rem;
  margin: 0;
  background: none;
}
.jqueryslidemenu ul li.Selected ul li a:hover,
.jqueryslidemenu ul li ul li a:hover {
  color: white;
  text-decoration: none;
  background: hsla(0 0% 0% / 0.1);
}
/* ----- SUB DROP-DOWN LAYERS AFTER 1ST ----- */
.jqueryslidemenu ul li ul li ul {
  top: 0;
  margin: -1px 0px 0px 2px;
}
@media (min-width: 960px) {
  .full_header {
    display: initial;
  }
}
/* ----- Cart Button ----- */
.jqueryslidemenu a.cart_button{
  position: absolute;
  bottom: -44px;
  right: 0;
  background: var(--main);
  color: white;
  padding: .8rem 1.6rem;
  border-radius: 0 0 .4rem .4rem;
  font-size: 2rem;
  text-decoration: none;
  transition: var(--animate);
}
.jqueryslidemenu a.cart_button:hover{
  background: var(--dark);
}
.jqueryslidemenu a.cart_button span{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-9px, calc(-50% + 3px));
  width: 18px;
  text-align: center;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--main);
  background: white;
  transition: var(--animate);
}
.jqueryslidemenu a.cart_button:hover span{
  color: var(--dark);
}

/* ---------- 6. Mobile Header & Navigation ---------- */

.mobile_header {
  background: white;
  border-bottom: 4px solid var(--main);
  box-shadow: var(--shadow);
  padding: .8rem 0;
  width: 100%;
  z-index: 999;
  position: sticky;
  display: inherit;
  top: 0;
}
@media (min-width: 960px) {
  .mobile_header {
    display: none;
  }
}
.mobile_header .logo_area {
  padding: 0px 3rem;
  width: 100%;
}
.mobile_header .logo_area > a{
  width: 14rem;
  display: block;
  margin: 0 auto;
}
.mobile_header .logo_area img {
  width: 100%;
  height: auto;
}
.mobile_header a.menu-btn,
.mobile_header a.cart_link {
  color: var(--dark);
  left: .8rem;
  position: absolute;
  text-decoration: none;
  top: 50%;
  transform: translate(0 , -50%);
  font-size: 2.4rem;
}
.mobile_header a.cart_link {
  left: auto;
  right: .8rem;
}
#menu .mm-list a {
  color: #fff;
  font-weight: 600;
  padding: 1.6rem;
  font-size: 1.6rem;
  line-height: 1;
  font-weight: 600;
  text-decoration: none;
  display: block;
  text-transform: none;
}
.mm-ismenu {
  background: var(--main);
}
.mm-menu {
  color: hsl(0 0% 100%);
}
.mm-menu .mm-list > li:after {
  border-color: rgba(0, 0, 0, 0.15);
}
.mm-menu .mm-list > li > a.mm-subclose {
  background: rgba(0, 0, 0, 0.1);
  color: rgba(255, 255, 255, 0.3);
}
.mm-menu .mm-list > li > a.mm-subopen:after,
.mm-menu .mm-list > li > a.mm-subclose:before {
  border-color: #fff;
}
.mm-menu .mm-list > li > a.mm-subopen:before {
  border-color: rgba(0, 0, 0, 0.15);
}
.mm-menu .mm-list > li.mm-selected > a:not(.mm-subopen),
.mm-menu .mm-list > li.mm-selected > span {
  background: rgba(0, 0, 0, 0.1);
}
.mm-menu .mm-list li.mm-label {
  background: rgba(255, 255, 255, 0.05);
}
.mm-menu.mm-vertical .mm-list li.mm-opened > a.mm-subopen,
.mm-menu.mm-vertical .mm-list li.mm-opened > ul {
  background: rgba(255, 255, 255, 0.05);
}

/* ---------- 7. Footer ---------- */

footer{
  background: var(--dark);
  margin-top: auto;
  padding: 4.8rem 3.2rem 1.6rem;
}
footer .content{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.6rem 3.2rem;
}
footer a.logo{
  width: 16rem;
  display: block;
}
footer a.logo img{
  width: 100%;
  height: auto;
}
footer .h4{
  color: white;
  font-size: 1.8rem;
  line-height: 1;
  margin: 0 0 .8rem;
}
footer ul{
  list-style: none;
  margin: 0;
  padding: 0;
}
footer ul li,
footer ul li a{
  color: white;
  font-size: 1.4rem;
}
footer ul li a{
  text-decoration: none;
}
footer ul li a:hover{
  color: var(--second);
}
footer .sitemap{
  width: calc(100% - 77.6rem);
  max-width: 36rem;
}
@media screen and (max-width: 1060px){
  footer .sitemap {
    width: calc(100% - 70.6rem);
    max-width: 36rem;
  }
  footer .footer-contact {
    width: 24rem;
  }
}
footer .sitemap ul{
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1.6rem;
}
footer .sitemap ul li{
  width: calc(50% - .8rem);
}
footer .footer-contact{
  width: 26rem;
}
footer .footer-contact ul{
  display: flex;
  flex-direction: column;
  gap: .8rem;
}
footer .footer-social{
  width: 16rem;
}
footer .social_media ul{
  gap: calc(var(--grid-gap) / 2);
  justify-content: flex-start;
}
footer .social_media ul li a{
  width: 2.8rem;
  height: 2.8rem;
}
footer .social_media ul li a{
  background: white;
  color: var(--dark);
}
footer .social_media ul li a:hover{
  background: var(--second);
  color: white;
}
footer .social_media ul li a i{
  font-size: 1.6rem;
}
footer p.signature{
  width: 100%;
  text-align: center;
  color: white;
  font-size: 1.2rem;
  line-height: 1.2;
  padding-top: 1.6rem;
  border-top: 2px solid hsla(0 0% 100% / .1);
  margin: 0;
}
footer p.signature a{
  color: white;
  text-decoration: none;
}
footer p.signature a:hover{
  color: var(--second);
}
@media screen and (max-width: 960px){
  footer .content{
    flex-direction: column;
    align-items: center;
    gap: 3.2rem;
    text-align: center;
  }
  footer .footer-social,
  footer .footer-contact,
  footer .sitemap,
  footer .sitemap ul li{
    width: 100%;
  }
  footer .social_media ul{
    justify-content: center;
  }
}

/* ---------- 8. Buttons ---------- */

input.superbutton,
a.button,
button.superbutton,
a.superbutton,
.superbutton {
  background: none;
  color: var(--dark);
  line-height: 1;
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-weight: 600;
  padding: 0 4.6rem;
  text-decoration: none;
  border-radius: 2rem;
  border: none;
  outline: none;
  font-size: 1.6rem;
  height: 4rem;
  cursor: pointer;
  margin: 3.2rem 0 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--animate);
  position: relative;
  z-index: 1;
}
input.superbutton:hover,
a.button:hover,
button.superbutton:hover,
a.superbutton:hover,
.superbutton:hover {
  color: white;
}
input.superbutton::before,
a.button::before,
button.superbutton::before,
a.superbutton::before,
.superbutton::before{
  content: '';
  width: 4rem;
  height: 4rem;
  border-radius: 2rem;
  background: var(--second);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transition: var(--animate);
}
input.superbutton:hover::before,
a.button:hover::before,
button.superbutton:hover::before,
a.superbutton:hover::before,
.superbutton:hover::before{
  width: 100%;
}
input.superbutton::after,
a.button::after,
button.superbutton::after,
a.superbutton::after,
.superbutton::after{
  content: '';
  background-image: url(/assets/images/layout/icon-arrow-right.svg);
  position: absolute;
  height: 1.6rem;
  width: 4rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: invert(1);
  left: 0;
  top: calc(50% - .8rem);
  transition: var(--animate);
}
input.superbutton:hover::after,
a.button:hover::after,
button.superbutton:hover::after,
a.superbutton:hover::after,
.superbutton:hover::after{
  opacity: 0;
  transform: rotate(180deg);
}
a.text-link{
  color: var(--dark);
  line-height: 1;
  text-transform: uppercase;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  font-size: 1.6rem;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  transition: var(--animate);
}
a.text-link:hover{
  color: var(--main);
}
a.text-link::before{
  content: '';
  display: block;
  width: 2.4rem;
  height: .2rem;
  background: var(--dark);
  transition: var(--animate);
}
a.text-link:hover::before{
  width: 4rem;
  background: var(--main);
}

/* ---------- 9. Banner Styles ---------- */

/* ----- Banner Structure ----- */
.banner-container-constrained {
  position: relative;
  height: calc(100svh - 126px);
}
ul.ms-banner-constrained {
  display: inline-flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
ul.ms-banner-constrained li {
  list-style: none;
  width: 100%;
  flex-shrink: 0;
  position: relative;
  opacity: 0;
}
.ms-banner-constrained li:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  background: var(--dark);
  opacity: .5;
}
.ms-banner-constrained li .img-wrapper{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
.ms-banner-constrained li .img-wrapper img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
/* ----- Banner Content ----- */
.ms-banner-constrained li .banner-details {
  position: absolute;
  width: 100%;
  max-width: 1328px;
  padding-inline: 3.2rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.ms-banner-constrained li.banner-left .banner-details{
  text-align: left;
  justify-content: flex-start;
}
.ms-banner-constrained li.banner-right .banner-details{
  text-align: right;
  justify-content: flex-end;
}
.ms-banner-constrained li .banner-details .banner-content{
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ms-banner-constrained li.banner-left .banner-details .banner-content{
  align-items: flex-start;
}
.ms-banner-constrained li.banner-right .banner-details .banner-content{
  align-items: flex-end;
}
.ms-banner-constrained li .banner-details .h5{
  color: white;
  margin: 0;
  width: 100%;
}
.banner-container-constrained .banner-details .h1{
  color: white;
  width: 100%;
}
.banner-container-constrained .banner-details p{
  color: white;
  margin-bottom: 3.2rem;
  max-width: 39rem;
  width: 100%;
}
.banner-container-constrained .banner-details a.superbutton {
  margin: 0;
  color: white;
}
.banner-container-constrained .banner-details a.superbutton:hover {
  color: white;
}
@media screen and (max-width: 960px) {
  .banner-container-constrained{
    height: auto;
    background: var(--dark);
  }
  .ms-banner-constrained li::after{
    display: none;
  }
  .ms-banner-constrained li .img-wrapper{
    position: initial;
    aspect-ratio: 1366 / 768;
    width: 100%;
    height: auto;
  }
  .ms-banner-constrained li .banner-details,
  .ms-banner-constrained li.banner-left .banner-details,
  .ms-banner-constrained li.banner-right .banner-details{
    position: initial;
    transform: none;
    padding: 4.8rem 3.2rem;
    justify-content: center;
    text-align: center;
  }
  .ms-banner-constrained li .banner-details .banner-content,
  .ms-banner-constrained li.banner-left .banner-details .banner-content,
  .ms-banner-constrained li.banner-right .banner-details .banner-content{
    width: 100%;
    align-items: center;
  }
}
/* ----- Banner Navigation ----- */
.banner-container-constrained .banner-next,
.banner-container-constrained .banner-previous,
.banner-container-constrained .banner-pause {
  opacity: 1;
  position: absolute;
  bottom: 4.4rem;
  right: 1.2rem;
  display: flex !important;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 4rem;
  height: 4rem;
  background: var(--main);
  text-decoration: none;
  transition: var(--animate);
  z-index: 2;
}
.banner-container-constrained .banner-next:hover,
.banner-container-constrained .banner-previous:hover,
.banner-container-constrained .banner-pause:hover {
  background: var(--dark);
  transition: var(--animate);
}
.banner-container-constrained .banner-previous {
  right: 1.2rem;
  bottom: 9.2rem;
}
.banner-container-constrained .banner-pause {
  right: 10rem;
  color: white;
}
.banner-container-constrained .banner-pause:hover i {
  color: white;
}
.banner-container-constrained:hover .banner-next,
.banner-container-constrained:hover .banner-previous,
.banner-container-constrained:hover .banner-pause {
  opacity: 1;
  cursor: pointer;
}
.banner-container-constrained .banner-next svg,
.banner-container-constrained .banner-previous svg {
  width: auto;
  height: 2.1rem;
  fill: white;
}
.banner-container-constrained .banner-next svg {
  transform: rotate(180deg);
}
.banner-container-constrained .banner-next:hover svg,
.banner-container-constrained .banner-previous:hover svg {
  fill: white;
}
@media screen and (max-width: 960px) {
  .banner-container-constrained .banner-next,
  .banner-container-constrained .banner-previous,
  .banner-container-constrained .banner-pause {
    display: none !important;
  }
}
/* ----- Banner pagination ----- */
.banner_pagination {
  display: flex;
  justify-content: center;
  width: 100%;
  position: absolute;
  bottom: 1rem;
  color: hsla(0 0% 100% / 0.3);
  z-index: 1;
}
.banner_pagination > div {
  margin: 0 .3rem;
  cursor: pointer;
}
.banner_pagination > div:hover {
  color: hsla(0 0% 100% / 0.6);
}
.banner_pagination > .active {
  color: white;
}
@media screen and (max-width: 960px){
  .banner_pagination{
    display: none;
  }
}

/* -------- 10. Inner Header ---------- */

.inner_header {
  width: 100%;
  height: 33svh;
  min-height: 32rem;
  background: url(/assets/images/layout/inner_header.jpg) center center no-repeat;
  background-size: cover;
}

/* ---------- 11. Forms ---------- */

.form_holder form {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--grid-gap);
}
.form_holder .third_width {
  width: calc(33.3333% - (2 * var(--grid-gap) / 3));
  margin: 0;
}
.form_holder .half_width {
  width: calc(50% - (var(--grid-gap) / 2));
  margin: 0;
}
.form_holder .full_width {
  width: 100%;
  margin: 0;
}
@media screen and (max-width: 960px) {
  .form_holder .third_width,
  .form_holder .half_width {
    width: 100%;
  }
}
.form_holder textarea,
.form_holder select,
.form_holder input {
  font-weight: 400;
  width: 100%;
  padding: .5rem .8rem;
  height: auto;
  font-size: 1.6rem;
  line-height: 1.4;
  margin: 0;
  background-color: var(--light);
  border: none;
  border-bottom: 3px solid var(--main);
  color: var(--medium);
  outline: none;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}
.form_holder input.checkbox {
  float: left;
  width: auto;
  height: auto;
  margin: .8rem 0;
  padding: 0;
  background: none;
  border: 1px solid #f0f0f0;
  box-shadow: none;
  color: var(--medium);
  outline: none;
}
.form_holder .uploader {
  width: 100%;
  height: 3.2rem;
  padding: 0;
  margin: 0;
  background-color: white;
  border: none;
  color: var(--medium);
  outline: none;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover, 
select:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover, 
textarea:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--medium) !important;
  background: var(--light)!important;
  color: var(--medium) !important;
  -webkit-box-shadow: 0 0 0px 40rem var(--light) inset !important;
}
.form_holder input:focus,
.form_holder select:focus,
.form_holder textarea:focus {
  background-color: var(--light);
  color: var(--medium);
  outline: none;
}
.form_holder span.label,
.form_holder label {
  display: block;
  font-size: 14px;
  color: var(--medium);
}
.form_holder .require {
  color: var(--main);
}
.form_holder .message {
  margin: 0 0 1.6rem 0;
}
form button.superbutton{
  width: 16rem;
  text-align: center;
  margin: 0 0 0 calc(100% - 16rem);
}
.form_holder .form_error {
  background: var(--danger);
  color: white;
  padding: 1.6rem;
  margin: 0 0 1.6rem;
}
form .form-terms{
  font-size: 1.2rem;
  line-height: 1.1;
  margin: 0;
  width: 100%;
  text-align: right;
}
.form_holder form input.superbutton,
.form_holder form .superbutton {
  background: none;
  color: white;
  line-height: 1;
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-weight: 600;
  padding: 0 4.6rem;
  text-decoration: none;
  border-radius: 2rem;
  border: none;
  outline: none;
  font-size: 1.6rem;
  height: 4rem;
  cursor: pointer;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--animate);
  position: relative;
  z-index: 1;
}
.form_holder form input.superbutton:hover,
.form_holder form .superbutton:hover {
  background: none;
}
/* ----- Custom Radio Button ----- */
.radio-wrapper {
  position: relative;
  padding-left: 3.2rem;
  margin-bottom: 0;
  cursor: pointer;
  font-size: 1.6rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  height: 2.4rem;
  display: flex;
  align-items: center;
}
.radio-wrapper input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
.radio-wrapper span.radio-label{
  display: flex;
  height: 2.4rem;
  align-items: center;
}
.radiomark {
  position: absolute;
  top: 0;
  left: 0;
  height: 2.4rem;
  width: 2.4rem;
  background-color: var(--light);
  border: 1px solid #ccc;
  border-radius: 50%;
}
.radio-wrapper:hover input ~ .radiomark {
  background-color: #ccc;
}
.radio-wrapper input:checked ~ .radiomark {
  background-color: var(--main);
  border-color: var(--main);
}
/* ----- Placeholder  ------ */
::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: var(--dark);
  opacity: 0.5;
}
::-moz-placeholder {
  /* Firefox 19+ */
  color: var(--dark);
  opacity: 0.5;
}
:-ms-input-placeholder {
  /* IE 10+ */
  color: var(--dark);
  opacity: 0.5;
}
:-moz-placeholder {
  /* Firefox 18- */
  color: var(--dark);
  opacity: 0.5;
}
/* ----- Validation ----- */
/* Validating Entries */
.form_holder input:not([type="submit"]):focus:valid,
.form_holder textarea:focus:valid,
.form_holder select:focus:valid {
  box-shadow: 0px 0px 5px var(--main);
}
/* Invalidating Entries */
.form_holder input:not([type="submit"]):focus:invalid,
.form_holder textarea:focus:invalid,
.form_holder select:focus:invalid {
  box-shadow: 0px 0px 5px red;
}
/* ----- Date Picker ----- */
.ui-datepicker .ui-datepicker-header {
  border: none;
  border-radius: 0;
  background-image: none;
  background: var(--main);
}
#ui-datepicker-div {
  padding: 0;
  border: 3px solid var(--main);
  border-radius: 0 0 .8rem .8rem;
}
.ui-datepicker .ui-datepicker-title {
  color: white;
}
.ui-datepicker .ui-datepicker-next,
.ui-datepicker .ui-datepicker-prev {
  background-color: transparent !important;
  background-image: none;
  border: none;
}
.ui-datepicker .ui-datepicker-next span,
.ui-datepicker .ui-datepicker-prev span{
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  background: transparent;
  width: 2rem;
  height: 2rem;
  transform: rotate(45deg);
  border-radius: 50%;
  border: none;
  cursor: pointer;
}
.ui-datepicker .ui-datepicker-prev span{
  transform: rotate(-135deg);
}
.ui-datepicker .ui-datepicker-next:hover span,
.ui-datepicker .ui-datepicker-prev:not(.ui-state-disabled):hover span {
  background: white;
}
.ui-datepicker .ui-datepicker-next span::after,
.ui-datepicker .ui-datepicker-prev span::after{
  content: '';
  width: 8px;
  height: 8px;
  border-top: 2px solid white;
  border-right: 2px solid white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-5px, -3px);
}

.ui-datepicker .ui-datepicker-next:hover span::after,
.ui-datepicker .ui-datepicker-prev:not(.ui-state-disabled):hover span::after{
  border-color: var(--main);
} 
.ui-datepicker table{
  margin: 0;
}
.ui-datepicker tbody tr td{
  border: 0;
  padding: 0;
  border-right: 2px solid white;
  border-bottom: 2px solid white;
}
.ui-datepicker tbody tr td:last-child{
  border-right: none;
}
.ui-datepicker tbody tr:last-child td{
  border-bottom: none;
}
.ui-datepicker th {
  padding: 5px 0;
  background: var(--light);
  border-right: 2px solid #eaeaea;
  border-bottom: 2px solid #eaeaea;
}
.ui-datepicker th:last-child{
  border-right: none
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button, html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active{
  border: none;
}
table.ui-datepicker-calendar span {
  border: none !important;
  font-family: var(--font);
  text-transform: uppercase;
}
.ui-state-highlight,
.ui-widget-content {
  font-family: var(--font);
}
.ui-datepicker .ui-datepicker-title {
  text-transform: capitalize;
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
  background-image: none;
  color: white;
  background-color: #d5d1d1;
}
.ui-state-default:hover,
.ui-widget-content .ui-state-default:hover,
.ui-widget-header .ui-state-default:hover{
  color: var(--medium);
  background: var(--light);
}
.ui-state-disabled span, .ui-widget-content .ui-state-disabled span, .ui-widget-header .ui-state-disabled span{
  color: var(--medium);
}
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
  border-color: var(--main);
  background-image: none;
  background-color: hsl(0 0% 100%);
}
td.ui-datepicker-current-day a {
  background: var(--main) !important;
  color: hsl(0 0% 100%) !important;
}
td.ui-datepicker-current-day a:hover {
  background: var(--dark) !important;
  color: hsl(0 0% 100%) !important;
}
td.ui-datepicker-days-cell-over.ui-datepicker-current-day.ui-datepicker-today
  a.ui-state-default.ui-state-highlight.ui-state-active {
  color: hsl(0 0% 20%) !important;
}
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
  border: none;
  background: var(--main);
  color: white;
}
/* ----- Custom Select Dropdowns ----- */
/*the container must be positioned relative:*/
.custom-select {
  position: relative;
  font-family: Arial;
}
.custom-select select {
  display: none; /*hide original SELECT element:*/
}
.select-selected {
  background-color: DodgerBlue;
}
/*style the arrow inside the select element:*/
.select-selected:after {
  position: absolute;
  content: "";
  top: 14px;
  right: 10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #fff transparent transparent transparent;
}
/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
  border-color: transparent transparent #fff transparent;
  top: 7px;
}
/*style the items (options), including the selected item:*/
.select-items div,
.select-selected {
  color: #ffffff;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
  user-select: none;
}
.select-selected {
  user-select: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: all 0.35s ease-in-out;
  background: var(--light);
  border: none;
  color: var(--medium);
  border-radius: 0;
  margin: 0;
  padding: 6px 8px 4px 8px;
  font-size: 1.6rem;
  line-height: 1.4;
  border-bottom: 3px solid var(--main);
}
.select-selected.select-arrow-active {
  border-radius: 5px 5px 0 0;
}
.select-selected::after {
  background: none;
  width: 1.2rem;
  height: 1.2rem;
  top: 8px;
  right: 8px;
  transition: all 0.35s ease-in-out;
  border: none;
  transform: rotate(135deg);
  display: flex;
  background-size: auto 15px;
  border-top: 2px solid var(--medium);
  border-right: 2px solid var(--medium);
}
.select-selected.select-arrow-active::after {
  transform: rotate(-45deg);
  border-color: var(--medium);
  top: 14px;
}
/*style items (options):*/
.select-items {
  position: absolute;
  background-color: var(--main);
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
  border-radius: 0 0 4px 4px;
}
/*hide the items when the select box is closed:*/
.select-hide {
  display: none;
}
.select-items div:hover,
.same-as-selected {
  background-color: rgba(0, 0, 0, 0.1);
}
/* ----- Custom File Uploader ----- */
.resume{
  text-align:center;
  padding: 3.2rem 1.6rem;
  background: var(--light);
  border-bottom: 3px solid var(--main);
}
.resume input[type="file"]{
  display: none;
}
.resume label{
  cursor:pointer;
  color: hsla(0 0% 0% / .35)
}

/* ---------- 12. Messages ---------- */

div.message_wrapper {
  margin: 0 0 1.6rem;
}
.content h2.hide_message {
  display: none;
}
.content h2.message_positive {
  width: 100%;
  color: white !important;
  background: var(--success) !important;
  padding: 1.6rem;
}
.content h2.message_negative {
  width: 100%;
  color: white !important;
  background: var(--danger) !important;
  padding: 1.6rem;
}
.message_wrapper a.message_link {
  color: white !important;
  text-decoration: underline;
}
.message_wrapper a.message_link:hover {
  text-decoration: none;
}

/* ---------- 13. Flex Columns Structure ---------- */

.flex {
  display: flex;
  flex-wrap: wrap;
  gap: var(--grid-gap);
}
.flex-six > * {
  width: calc(16.6666% - calc(5 * var(--grid-gap) / 6));
}
.flex-five > * {
  width: calc(20% - calc(4 * var(--grid-gap) / 5));
}
.flex-four > * {
  width: calc(25% - calc(3 * var(--grid-gap) / 4));
}
.flex-three > * {
  width: calc(33.3333% - calc(2 * var(--grid-gap) / 3));
}
.flex-two > * {
  width: calc(50% - calc(var(--grid-gap) / 2));
}
.flex-one > *{
  width: 100%;
}
@media screen and (max-width: 1024px) {
  .flex-six > * {
    width: calc(25% - calc(3 * var(--grid-gap) / 4));
  }
  .flex-five > * {
    width: calc(33.3333% - calc(2 * var(--grid-gap) / 3));
  }
  .flex-four > *,
  .flex-three > * {
    width: calc(50% - calc(var(--grid-gap) / 2));
  }
  .flex-two > * {
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .flex-four > *,
  .flex-three > * {
    width: 100%;
  }
  .flex-five > * {
    width: calc(50% - calc(var(--grid-gap) / 2));
  }
  .flex-six > * {    
    width: calc(33.3333% - calc(2 * var(--grid-gap) / 3));
  }
}
@media screen and (max-width: 560px) {
  .flex-five > * {
    width: 100%;
  }
  .flex-six > * {
    width: calc(50% - calc(var(--grid-gap) / 2));
  }
}
/* ----- Flex Staggered Animations ----- */
.flex-two > *.animate,
.flex-three > *.animate,
.flex-four > *.animate,
.flex-five > *.animate,
.flex-six > *.animate {
  opacity: 0;
  transform: translateY(10rem);
  transition: 0.5s ease-in-out;
}
.flex-two > *.animate.show,
.flex-three > *.animate.show,
.flex-four > *.animate.show,
.flex-five > *.animate.show,
.flex-six > *.animate.show {
  opacity: 1;
  transform: translateY(0);
}
.flex-two > *.animate:nth-of-type(2n + 1),
.flex-three > *.animate:nth-child(3n + 1),
.flex-four > *.animate:nth-child(4n + 1),
.flex-five > *.animate:nth-child(5n + 1),
.flex-six > *.animate:nth-child(6n + 1) {
  transition-delay: 0s;
}
.flex-two > *.animate:nth-of-type(2n),
.flex-three > *.animate:nth-child(3n + 2),
.flex-four > *.animate:nth-child(4n + 2),
.flex-five > *.animate:nth-child(5n + 2),
.flex-six > *.animate:nth-child(6n + 2) {
  transition-delay: 0.15s;
}
.flex-three > *.animate:nth-child(3n),
.flex-four > *.animate:nth-child(4n + 3),
.flex-five > *.animate:nth-child(5n + 3),
.flex-six > *.animate:nth-child(6n + 3) {
  transition-delay: 0.3s;
}
.flex-four > *.animate:nth-child(4n),
.flex-five > *.animate:nth-child(5n + 4),
.flex-six > *.animate:nth-child(6n + 4) {
  transition-delay: 0.45s;
}
.flex-five > *.animate:nth-child(5n),
.flex-six > *.animate:nth-child(6n + 5) {
  transition-delay: 0.6s;
}
.flex-six > *.animate:nth-child(6) {
  transition-delay: 0.75s;
}
@media screen and (max-width: 1024px) {
  .flex-two > *.animate:nth-of-type(2n),
  .flex-three > *.animate:nth-child(3n + 2),
  .flex-four > *.animate:nth-child(4n + 2),
  .flex-five > *.animate:nth-child(5n + 2),
  .flex-three > *.animate:nth-child(3n),
  .flex-four > *.animate:nth-child(4n + 3),
  .flex-five > *.animate:nth-child(5n + 3),
  .flex-four > *.animate:nth-child(4n),
  .flex-five > *.animate:nth-child(5n + 4),
  .flex-five > *.animate:nth-child(5n),
  .flex-six > *.animate:nth-child(6n + 1),
  .flex-six > *.animate:nth-child(6n + 2),
  .flex-six > *.animate:nth-child(6n + 3),
  .flex-six > *.animate:nth-child(6n + 4),
  .flex-six > *.animate:nth-child(6n + 5),
  .flex-six > *.animate:nth-child(6) {
    transition-delay: 0s;
  }
}

/* ---------- 14. Grid Column Structure ---------- */

.grid{
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(12, 1fr);
}
.col-1{
  grid-column: span 1;
}
.col-2{
  grid-column: span 2;
}
.col-3{
  grid-column: span 3;
}
.col-4{
  grid-column: span 4;
}
.col-5{
  grid-column: span 5;
}
.col-6{
  grid-column: span 6;
}
.col-7{
  grid-column: span 7;
}
.col-8{
  grid-column: span 8;
}
.col-9{
  grid-column: span 9;
}
.col-10{
  grid-column: span 10;
}
.col-11{
  grid-column: span 11;
}
.col-12{
  grid-column: span 12;
}
@media screen and (max-width: 960px){
  .col-1,
  .col-2{
    grid-column: span 3;
  }
  .col-3{
    grid-column: span 4;
  }
  .col-4{
    grid-column: span 6;
  }
  .col-5,
  .col-6,
  .col-7,
  .col-8,
  .col-9,
  .col-10,
  .col-11{
    grid-column: span 12;
  }
}
@media screen and (max-width: 768px){
  .col-1,
  .col-2,
  .col-3{
    grid-column: span 6;
  }
  .col-4{
    grid-column: span 12;
  }
}
@media screen and (max-width: 580px){
  .col-1,
  .col-2,
  .col-3{
    grid-column: span 12;
  }
}

/* ---------- 15. Card & Box Base Styles ---------- */

/* ----- Standard Card ----- */
.card img {
  width: 100%;
  height: auto;
  margin: 0 0 0.8rem;
}
.card h3 {
  font-size: 2.4rem;
  line-height: 1;
}
.card h3 a{
  text-decoration: none;
  color: var(--dark);
}
.card h3 a:hover {
  color: var(--main);
}
.card h3,
.card p {
  margin: 0 0 1.6rem;
}
.card .h6.date{
  font-size: 1.4rem;
  margin: 0 0 .8rem;
}
.card a.superbutton {
  margin: 0;
}
.card ul.category-list{
  display: flex;
  gap: .8rem;
  flex-wrap: wrap;
  margin: 0 0 1.6rem;
  list-style: none;
}
.card ul.category-list li{
  font-size: 1.4rem;
}
/* ----- Standard Box ----- */
.box {
  text-decoration: none;
  position: relative;
  line-height: 0;
}
.box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.box h3 {
  margin: 0;
  font-size: 2.2rem;
  line-height: 1;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0 auto auto 0;
  display: flex;
  align-items: flex-end;
  padding: 1.6rem;
  color: white;
  background: hsl(156 15% 19% / .35);
  transition: var(--animate);
}
.box:hover h3 {
  background: hsl(156 15% 19% / .8);
}
/* ----- Shadow List ----- */
.shadow-list > * {
  box-shadow: var(--shadow);
  border-radius: 1.6rem;
  background: #fff;
  overflow: hidden;
}
.shadow-list img {
  margin: 0;
}
.shadow-list .content-holder {
  padding: 1.6rem;
}

/* ---------- 16. Base Strip Styles ---------- */

/* ----- Floating Image ----- */
.img-float .content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.img-float.img-right .content {
  flex-direction: row-reverse;
}
.img-float .content .img-holder {
  width: calc(33.3333% - 4.8rem);
  aspect-ratio: 4 / 6;
}
.img-float .content .img-holder img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.img-float .content .editable_content {
  width: calc(66.6666% - 4.8rem);
}
@media screen and (max-width: 1024px) {
  .img-float .content,
  .img-float.img-right .content {
    flex-direction: column;
    gap: 3.2rem;
    align-items: center;
  }
  .img-float .content .img-holder {
    max-width: 30rem;
    width: 100%;
  }
  .img-float .content .editable_content {
    width: 100%;
  }
}
/* ----- Faded Image ----- */
.img-fade {
  position: relative;
}
.img-fade .img-holder {
  width: calc(45% - 4.8rem);
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
.img-fade .img-holder img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.img-fade::after {
  content: "";
  width: calc(45% - 4.8rem);
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(to right, transparent, white 100%);
  z-index: 1;
}
.light.img-fade::after {
  background: linear-gradient(to right, transparent, var(--light) 100%);
}
.medium.img-fade::after {
  background: linear-gradient(to right, transparent, var(--medium) 100%);
}
.dark.img-fade::after {
  background: linear-gradient(to right, transparent, var(--dark) 100%);
}
.colour.img-fade::after {
  background: linear-gradient(to right, transparent, var(--main) 100%);
}
.img-fade.img-right .img-holder,
.img-fade.img-right::after {
  left: auto;
  right: 0;
}
.img-fade.img-right::after {
  background: linear-gradient(to left, transparent, white 100%);
}
.light.img-fade.img-right::after {
  background: linear-gradient(to left, transparent, var(--light) 100%);
}
.medium.img-fade.img-right::after {
  background: linear-gradient(to left, transparent, var(--medium) 100%);
}
.dark.img-fade.img-right::after {
  background: linear-gradient(to left, transparent, var(--dark) 100%);
}
.colour.img-fade.img-right::after {
  background: linear-gradient(to left, transparent, var(--main) 100%);
}
.img-fade .content {
  display: flex;
  justify-content: flex-end;
  position: relative;
  z-index: 2;
}
.img-fade.img-right .content {
  justify-content: flex-start;
}
.img-fade .content .editable_content {
  width: calc(55% - 4.8rem);
}
@media screen and (max-width: 1024px) {
  .img-fade {
    padding-top: 35rem;
  }
  .img-fade .img-holder,
  .img-fade::after {
    height: 30rem;
    width: 100%;
  }
  .img-fade::after,
  .img-fade.img-right::after {
    background: linear-gradient(to bottom, transparent, #fff 100%);
  }
  .light.img-fade::after,
  .light.img-fade.img-right::after {
    background: linear-gradient(to bottom, transparent, var(--light) 100%);
  }
  .medium.img-fade::after,
  .medium.img-fade.img-right::after {
    background: linear-gradient(to bottom, transparent, var(--medium) 100%);
  }
  .dark.img-fade::after,
  .dark.img-fade.img-right::after {
    background: linear-gradient(to bottom, transparent, var(--dark) 100%);
  }
  .colour.img-fade::after,
  .colour.img-fade.img-right::after {
    background: linear-gradient(to bottom, transparent, var(--main) 100%);
  }
  .img-fade .content .editable_content {
    width: 100%;
  }
}
/* ----- Background Image ----- */
.img-background {
  position: relative;
  z-index: 1;
}
.img-background::after {
  content: "";
  width: 100%;
  height: 100%;
  background: #fff;
  opacity: 0.75;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
.img-background .img-holder{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}
.img-background .img-holder img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.light.img-background::after {
  background: var(--light);
}
.medium.img-background::after {
  background: var(--medium);
}
.dark.img-background::after {
  background: var(--dark);
}
.colour.img-background::after {
  background: var(--main);
}
.img-background .content {
  position: relative;
  z-index: 1;
}
/* ----- Strip List ----- */
.strip-list-holder {
  padding: 0;
}
.strip-list {
  padding: 9.6rem 3rem;
  position: relative;
  background: white;
}
.strip-list:nth-of-type(2n) {
  background: var(--light);
}
.strip-list .img-holder {
  width: 33.3333%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.strip-list .img-holder img{
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.strip-list:nth-last-of-type(2n) .img-holder {
  left: auto;
  right: 0;
}
.strip-list .content {
  display: flex;
  justify-content: flex-end;
}
.strip-list:nth-last-of-type(2n) .content {
  justify-content: flex-start;
}
.strip-list .content .editable_content {
  width: calc(66.6666% - 5rem);
}
@media screen and (max-width: 1024px) {
  .strip-list {
    padding: 30rem 3rem 5rem;
  }
  .strip-list .img-holder {
    width: 100%;
    height: 25rem;
  }
  .strip-list .content .editable_content {
    width: 100%;
  }
}

/* ---------- 17. Animations ---------- */

.fadeFromLeft {
  opacity: 0;
  transform: translateX(-10rem);
  transition: 0.5s ease-in-out;
}
.fadeFromRight {
  opacity: 0;
  transform: translateX(10rem);
  transition: 0.5s ease-in-out;
}
.fadeFromTop {
  opacity: 0;
  transform: translateY(-10rem);
  transition: 0.5s ease-in-out;
}
.fadeFromBottom {
  opacity: 0;
  transform: translateY(10rem);
  transition: 0.5s ease-in-out;
}
.fadeFromLeft.show,
.fadeFromRight.show,
.fadeFromTop.show,
.fadeFromBottom.show {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- 18. Swipebox Styles ---------- */

.swipebox_full a img {
  width: 100%;
  transition: var(--animate);
}
.swipebox_full a img:hover {
  opacity: 0.5;
}

/* ---------- 19. Sub Page Menu ----------  */

ul.pages li {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.pages li a {
  background: var(--main);
  color: hsl(0 0% 100%);
  text-decoration: none;
  display: block;
  padding: 10px;
  text-align: center;
  font-weight: 700;
}
ul.pages li a:hover {
  background: var(--dark);
}

/* ---------- 20. Contact ---------- */

ul.contact-list{
  list-style: none;
}
ul.contact-list li a{
  text-decoration: none;
}
ul.contact-list li a:hover{
  color: var(--main);
}

/* ---------- 21. Contact Multi Location ----------*/

.multi-loc{
  margin: 0 0 3.2rem;
}
.multi-loc iframe{
  aspect-ratio: 6 / 3.5;
  width: 100%;
  height: auto;
}
.multi-loc h2{
  font-size: 2.2rem;
  padding: 0 0 .8rem;
  margin: 0 0 .8rem;
  border-bottom: 2px solid hsla(0 0% 0% / .1);
}
.multi-loc ul{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .8rem var(--grid-gap);
}
.multi-loc ul li{
  width: calc(50% - calc(var(--grid-gap) / 2));
}
.multi-loc ul li.full-width{
  width: 100%;
}
.multi-loc strong{
  display: block;
  color: var(--dark);
}
.multi-loc address{
  font-style: normal;
}
.multi-loc a{
  text-decoration: none;
}
@media screen and (max-width: 768px) {
  .multi-loc ul li{
    width: 100%;
  }
}

/* ---------- 22. Map ---------- */

.map-holder {
  height: 42rem;
  overflow: hidden;
}
.map-holder iframe {
  height: 100%;
  width: 100%;
}

/* ---------- 23. Social Media ---------- */

.social_media ul {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
  gap: var(--grid-gap);
}
.social_media ul li {
  margin: 0;
  list-style: none;
}
.social_media ul li a {
  width: 4rem;
  height: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  text-align: center;
  color: white;
  background: var(--main);
  border-radius: 50%;
  transition: var(--animate);
}
.social_media ul li a:hover {
  background: var(--dark);
}
.social_media ul li a i {
  font-size: 2.2rem;
  line-height: 1;
}

/* ---------- 24. Toggler ---------- */

h4.toggle,
h4.toggle.active.open {
  color: hsl(0 0% 20%);
  background: url(/assets/images/layout/toggle.png) no-repeat 10px 11px;
  padding: 8px 0 8px 35px;
  margin: 10;
  cursor: pointer;
}
h4.toggle.active,
h4.toggle.open {
  background-position: 10px -39px;
}
h4.toggle:hover,
h4.toggle.active.open:hover {
  background-position: 10px -39px;
}
div.toggler {
  border-top: none;
  margin: 0;
  overflow: hidden;
  padding: 0 0 0 24px;
}
div.toggler hr {
  border-top: 1px solid #f0f0f0;
}
div.toggler p {
  margin: 0 0 1.2rem;
  padding: 0;
}
.faq-wrapper .toggler ul,
.faq-wrapper .toggler ol{
  margin: 0 0 1.2rem 2rem;
}
div.toggler > *:last-child{
  margin-bottom: 0;
}

/* ---------- 25. Products ---------- */

/* ----- Search ----- */
form.search_form{
  display: flex;
  margin: 0 0 3.2rem;
}
form.search_form input.search_input{
  width: calc(100% - 16px);
  border-radius: .4rem 0 0 .4rem;
  border: 1px solid hsla(0 0% 0% / .15);
  border-radius: none;
  background: hsla(0 0% 0% / .05);
  padding: .5rem .8rem;
}
form.search_form input.superbutton{
  width: 16rem;
  border-radius: 0 .4rem .4rem 0;
  margin: 0;
}
/* ----- Product List ----- */
.product-list .card .product-number{
  font-size: 1rem;
  line-height: 1;
  margin: 0 0 .4rem;
}
.product-list .card h3{
  margin: 0;
}
.product-list .card p{
  margin: 1.6rem 0;
}
.price-wrapper{
  font-size: 1.4rem;
}
.price-wrapper span .strike{
  text-decoration: line-through;
  color: hsl(0, 0%, 70%);
}
form.add_to_cart{
  display: flex;
  flex-direction: column;
  gap: .8rem;
}
form.add_to_cart .cart_price_option label,
form.add_to_cart .cart_quantity label{
  display: block;
  font-size: 1.2rem;
}
form.add_to_cart .cart_price_option select,
form.add_to_cart .cart_quantity input{
  border-radius: 0;
  border: none;
  background: var(--light);
  border-bottom: 3px solid var(--main);
  width: 100%;
  padding: .5rem .8rem;
  margin: 0 0 .8rem;
}
form.add_to_cart  a.add_to_cart{
  width: 100%;
  padding-inline: .8rem;
}
/* ----- Product Page ----- */
.product-page .content{
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem 4.8rem;
}
.product_highlight {
  width: 100%;
  max-width: 300px;
  margin-bottom: 1.6rem;
  background: white;
  box-shadow: var(--shadow);
  border-radius: 1.6rem;
  overflow: hidden;
}
.product_highlight .alert {
  color: var(--medium);
  margin: 0;
}
.product_highlight .strike {
  text-decoration: line-through;
}
.product_highlight .sale {
  color: var(--medium);
}
.product_highlight .holder {
  position: relative;
  display: flex;
  justify-content: space-between;
}
.product_highlight .holder > a {
  width: calc(80% - 5px);
  text-decoration: none;
  text-align: center;
}
.product_highlight .holder .img_select {
  width: 20%;
  display: flex;
  justify-content: left;
  flex-direction: column;
}
.product_highlight .holder #img_title {
  font-style: normal;
  font-weight: 500;
}
.product_highlight .holder .img_select figure {
  width: 100%;
  margin: 0px 5px 5px 0px;
  cursor: pointer;
}
.product_highlight .holder .img_select > figure.active {
  box-shadow: 0px 0px 4px 0px #333;
}
.product_highlight .holder .img_select figure img {
  width: 100%;
}
.product_highlight form.add_to_cart{
  padding: 1.6rem;
}
.product_highlight form.add_to_cart a.superbutton{
  margin: 0;
  padding-inline: .8rem;
}
.product-page .content .editable_content{
  width: calc(100% - 34.8rem);
}
.product-page .content .editable_content .product_number{
  font-size: 1.4rem;
  line-height: 1;
  margin: 0 0 .4rem;
}
@media screen and (max-width: 960px){
  .product-page .content .editable_content{
    width: 100%;
  }
}

/* ---------- 26. Modal Styles ---------- */

summary.btn {
  cursor: pointer;
  display: inline-block;
  background-color: var(--main);
  padding: 5px 20px;
  border-radius: 10px;
  margin: 10px 0;
}
.details-with-modal summary::-webkit-details-marker {
  display: none;
}
details-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99999;
  max-height: 80vh;
  overflow: scroll;
  max-width: 90vw;
  width: 448px;
  background-color: hsl(0 0% 100%);
}
.details-with-modal[open] > summary:before {
  content: " ";
  background: hsla(0 0% 0% / 0.3);
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 1;
}
.modal-header {
  padding: 20px;
  background-color: var(--main);
  border-bottom: 1px solid hsl(0, 0%, 94%);
}
.modal-body {
  padding: 20px;
}
.modal-footer {
  border-top: 1px solid hsl(0, 0%, 94%);
  padding: 20px;
  text-align: center;
}
.modal-footer button {
  width: 95%;
  display: inline-block;
  background-color: var(--main);
  font-size: 1rem;
  padding: 10px;
  cursor: pointer;
  transition: 0.3s ease;
}
.modal-footer button:hover {
  background-color: var(--medium);
  color: var(--medium);
  transition: 0.3s ease;
}

/* ---------- 27. FAQs ---------- */
.faq-wrapper{
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.faq-wrapper .toggle_faq{
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: 2.4rem;
  margin: 0;
  cursor: pointer;
}
.faq-wrapper .toggle_faq .icon{
  width: 3.2rem;
  height: 3.2rem;
  display: block;
  position: relative;
  transform: translate(0, -1px);
  transition: var(--animate);
}
.faq-wrapper .toggle_faq.active .icon{
  transform: rotate(135deg);
}
.faq-wrapper .toggle_faq .icon i{
  width: 1.6rem;
  height: .2rem;
  background: var(--main);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50% , -50%) rotate(90deg);
}
.faq-wrapper h3.toggle_faq .icon i:nth-child(2){
  transform: translate(-50% , -50%) rotate(0deg);
}
.faq-wrapper .toggler{
  padding: .8rem 1.6rem 1.6rem 4rem;
}

/* ---------- 28. Events ---------- */

.events-list{
  margin-top: 3.2rem;
}
.events-list .card ul{
  list-style: none;
  border-block: 2px solid hsla(0 0% 0% / .1);
  padding: .4rem 0;
  margin: 0 0 .8rem;
}
.events-list .card ul li{
  font-size: 1.4rem;
}
.event-page h1{
  margin: 0;
}
.event-page .item-wrapper{
  margin-top: 3.2rem;
}
ul.event-details{
  list-style: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  border-block: 2px solid hsla(0 0% 0% / .1);
  margin: 2.4rem 0;
  padding: .4rem 0;
}
ul.event-details li{
  border-right: 2px solid hsla(0 0% 0% / .1);
  padding: .4rem .8rem;
}
ul.event-details li:last-child{
  border-right: none;
}
ul.event-details li i{
  color: var(--main);
  margin: 0 .4rem 0 0;
}
ul.event-details li.register-btn a.superbutton{
  margin-top: 0;
}
@media screen and (min-width: 959px){
  ul.event-details li.register-btn{
    display: none;
  }
}
.reg-active{
  display: flex;
  gap: 3.2rem;
  position: relative;
  align-items: flex-start;
  flex-wrap: wrap;
}
.reg-content{
  width: calc(100% - 33.2rem);
  padding-right: 3.2rem;
  border-right: 2px solid hsla(0 0% 0% / .1);
}
.reg-form{
  width: 30rem;
  position: sticky;
  top: 100px;
}
@media screen and (max-width: 960px){
  .reg-content{
    width: 100%;
    padding: 0 0 3.2rem;
    border-right: none;
    border-bottom: 2px solid hsla(0 0% 0% / .1);
  }
  .reg-form{
    position: initial;
    width: 100%;
  }
  ul.event-details{
    flex-direction: column;
    padding: 0;
  }
  ul.event-details li{
    width: 100%;
    padding: .8rem;
    border-right: none;
    border-bottom: 2px solid hsla(0 0% 0% / .1);
  }
  ul.event-details li:last-child{
    border-bottom: none;
  }
}

/* ---------- 29. Categories ---------- */

.categories-page .content{
  display: flex;
  flex-direction: row-reverse;
}
.categories-page .flex{
  width: calc(100% - 32rem);
}
.categories-page aside.categories{
  width: 32rem;
  padding: 0 2.4rem 0 0;
  margin: 0 2.4rem 0 0;
  border-right: 2px solid hsla(0 0% 0% / .1);
}
.categories-page aside.categories h2{
  font-size: 2.4rem;
  margin: 0 0 .8rem;
  padding: 0 0 .8rem;
  border-bottom: 2px solid hsla(0 0% 0% / .1);
}
.categories-page aside.categories ul{
  list-style: none;
  display: flex;
  gap: .8rem;
  flex-direction: column;
}
.categories-page aside.categories ul li{
  padding-bottom: .8rem;
  border-bottom: 1px solid hsla(0 0% 0% / .1);
  cursor: pointer;
}
.categories-page aside.categories ul li:last-child{
  border: none;
}
.categories-page aside.categories ul li.active{
  color: var(--dark);
  font-weight: 600;
}
@media screen and (max-width: 1180px){
  .categories-page .flex-three > *{
    width: calc(50% - .8rem);
  }
}
@media screen and (max-width: 960px) {
  .categories-page .content{
    flex-direction: column-reverse;
  }
  .categories-page aside.categories{
    width: 100%;
    padding: 0;
    border-right: none;
    border-bottom: 2px solid hsla(0 0% 0% / .1);
    margin: 0 0 2.4rem;
  }
  .categories-page .flex{
    width: 100%;
  }
}
@media screen and (max-width: 640px){
  .categories-page .flex-three > *{
    width: 100%;
  }
}

/* ---------- 30. Pop Up ---------- */

.cta-popup{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100svh;
  background: hsla(0 0% 0% / .5);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cta-popup .pop-up{
  background: white;
  padding: 3.2rem;
  border-radius: 1.6rem 0 1.6rem 1.6rem;
  box-shadow: var(--shadow);
  width: 48rem;
  position: relative;
  text-align: center;
}
.cta-popup .pop-up .close-popup{
  width: 2.4rem;
  height: 2.4rem;
  position: absolute;
  top: -12px;
  right: -12px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--main);
  border-radius: 50%;
  transition: var(--animate);
  cursor: pointer;
}
.cta-popup .pop-up .close-popup:hover{
  background: var(--dark);
}
.cta-popup .pop-up h3{
  font-size: 3.2rem;
  margin: 0 0 1.6rem;
}
.cta-popup .pop-up .superbutton{
  margin: 1.6rem 0 0;
}

/* ---------- 30. Pop Up ---------- */

.page-details.h6{
  font-size: 1.6rem;
  line-height: 1;
  margin: 0 0 1.6rem;
  color: var(--medium);
}
.page-details.h6 a{
  color: var(--medium);
  text-decoration: none;
}
.page-details.h6 a:hover{
  color: var(--main);
}

/* ---------- 31. Logo Slider ---------- */

#logo-link-slider {
  overflow: hidden;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#logo-link-slider .logo-link-slider-wrapper {
  display: block;
  width: 100%;
  position: relative;
}

#logo-link-slider .logo-link-slider-wrapper ul {
  position: relative;
  left: 0px;
  display: flex;
  justify-content: space-around;
  list-style: none;
}

#logo-link-slider .logo-link-slider-wrapper ul li {
  display: inline-block;
  position: relative;
  margin: 0px auto;
  width: 200px;
  height: 200px;
  line-height: 200px;
  text-align: center;
}

#logo-link-slider .logo-link-slider-wrapper ul li a img {
  vertical-align: middle;
  max-width: 100%;
  max-height: 100%;
  -webkit-transition: 0 linear left;
  -moz-transition: 0 linear left;
  transition: 0 linear left;
  opacity: 0.65;
  width: 100%;
}

.logo_link_static {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.logo_link_static a img {
  width: 200px;
}
/* -- Move This -- */
.message_negative{
  background: var(--danger);
  padding: 1.6rem;
  border-radius: 1.6rem;
  color: white;
}
.message_wrapper p{
  margin: 0;
}
.rx-editor ul,
.rx-editor ol{
  margin-left: 2rem;
}
/* ---------- Custom Styles ---------- */
header.full_header{
  background: none;
  box-shadow: var(--shadow);
  padding: 0;
}
header.full_header .top-header-wrapper{
  padding-inline: 3.2rem;
  background: white;
  width: 100%;
}
header.full_header .top-header-wrapper .jqueryslidemenu a.logo{
  width: 20rem;
}
header.full_header .top-header-wrapper .jqueryslidemenu nav{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6.4rem;
}
header.full_header .top-header-wrapper .jqueryslidemenu ul{
  gap: 6.4rem
}
header.full_header .top-header-wrapper .jqueryslidemenu ul li a{
  padding: 32px 0;
  font-family: var(--font-heading);
  letter-spacing: -0.025em;
  text-transform: uppercase;
}
header.full_header .top-header-wrapper .jqueryslidemenu ul li a::after{
  bottom: 2.4rem
}
header.full_header .bottom-header-wrapper{
  padding-inline: 3.2rem;
  background: var(--main);
  width: 100%;
}
header.full_header .bottom-header-wrapper nav{
  max-width: 1264px;
  margin: 0 auto;
  width: 100%;
}
header.full_header .bottom-header-wrapper nav ul{
  list-style: none;
  display: flex;
  justify-content: space-between;
}
header.full_header .bottom-header-wrapper nav ul li a{
  font-family: var(--font-heading);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
  font-weight: 600;
  text-decoration: none;
  position: relative;
  display: block;
  color: white;
  font-size: 1.4rem;
  padding: 16px 12px;
  z-index: 1;
  transition: var(--animate);
}
header.full_header .bottom-header-wrapper nav ul li.Selected a,
header.full_header .bottom-header-wrapper nav ul li a:hover{
  color: var(--dark);
}
header.full_header .bottom-header-wrapper nav ul li a::after{
  content: '';
  width: 100%;
  height: 0;
  bottom: 0;
  left: 0;
  background: white;
  position: absolute;
  z-index: -1;
  transition: var(--animate);
}
header.full_header .bottom-header-wrapper nav ul li.Selected a::after,
header.full_header .bottom-header-wrapper nav ul li a:hover::after{
  height: 100%;
}
a.header-btn{
  min-width: 20rem;
  background: #8aa79c;
  color: white;
  line-height: 1;
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-weight: 600;
  padding: 0 1rem;
  text-decoration: none;
  border-radius: 2rem;
  border: none;
  outline: none;
  font-size: 1.6rem;
  letter-spacing: -0.025em;
  height: 4rem;
  cursor: pointer;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--animate);
  position: relative;
  z-index: 1;
  overflow: hidden;
}
a.header-btn::before{
  content: '';
  left: -100%;
  top: 0;
  background: var(--dark);
  width: 100%;
  height: 100%;
  border-radius: 2rem;
  position: absolute;
  z-index: -1;
  transition: var(--animate);
}
a.header-btn:hover::before{
  left: 0;
}
a.get-quote-tab{
  position: fixed;
  z-index: 999;
  width: 20rem;
  background: #8aa79c;
  color: white;
  line-height: 1;
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-weight: 600;
  padding: 0 1rem;
  text-decoration: none;
  border-radius: 0.8rem 0.8rem 0 0;
  border: none;
  outline: none;
  font-size: 1.6rem;
  letter-spacing: -0.025em;
  height: 4.4rem;
  cursor: pointer;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--animate);
  overflow: hidden;
  transform: rotate(-90deg);
  right: -78px;
  top: 50%;
  box-shadow: var(--shadow);
}
a.get-quote-tab:hover{
  background: var(--dark);
}
.banner-container-constrained ul.ms-banner-constrained li.ms-overlay::after,
.banner-container-constrained ul.ms-banner-constrained li.ms-overlay.banner-left::after,
.banner-container-constrained ul.ms-banner-constrained li.ms-overlay.banner-right::after{
  display: none;
}
.banner-container-constrained ul.ms-banner-constrained li.ms-overlay .img-wrapper,
.banner-container-constrained ul.ms-banner-constrained li.ms-overlay.banner-left .img-wrapper,
.banner-container-constrained ul.ms-banner-constrained li.ms-overlay.banner-right .img-wrapper{
  width: 76.5%;
  height: calc(100% - 6.4rem);
  margin-left: calc(23.5% - 3.2rem);
  margin-top: 3.2rem;
  border-radius: 1.6rem;
  overflow: hidden;
}
.banner-container-constrained ul.ms-banner-constrained li.ms-overlay .banner-details,
.banner-container-constrained ul.ms-banner-constrained li.ms-overlay.banner-left .banner-details,
.banner-container-constrained ul.ms-banner-constrained li.ms-overlay.banner-right .banner-details{
  left: 0;
  top: 50%;
  transform: translate(0, -50%);
  width: calc(50% - 10.2rem);
  padding: 0 0 0 3.2rem;
  background: var(--main);
  justify-content: flex-end;
}
.banner-container-constrained ul.ms-banner-constrained li.ms-overlay .banner-details .banner-content,
.banner-container-constrained ul.ms-banner-constrained li.ms-overlay.banner-left .banner-details .banner-content,
.banner-container-constrained ul.ms-banner-constrained li.ms-overlay.banner-right .banner-details .banner-content{
  width: 100%;
  max-width: 53rem;
  padding: 2.4rem 4rem;
}
.banner-container-constrained ul.ms-banner-constrained li.ms-overlay .banner-details .banner-content p,
.banner-container-constrained ul.ms-banner-constrained li.ms-overlay.banner-left .banner-details .banner-content p,
.banner-container-constrained ul.ms-banner-constrained li.ms-overlay.banner-right .banner-details .banner-content p{
  margin-left: 0;
}
section.content_container.intro-strip{
  position: relative;
  padding-block: 8rem;
}
section.content_container.intro-strip .img-wrapper{
  position: absolute;
  width: 41%;
  left: 3.2rem;
  height: calc(100% - 3.2rem);
  border-radius: 1.6rem 1.6rem 0 0;
  bottom: 0;
  overflow: hidden;
}
section.content_container.intro-strip .img-wrapper img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
section.content_container.intro-strip .content{
  display: flex;
  justify-content: flex-end;
}
section.content_container.intro-strip .content .editable_content{
  width: 50.5%;
}
.est-box{
  text-align: center;
  position: absolute;
  bottom: -4.8rem;
  left: calc(41% - 10rem);
  padding: 3.2rem 2.4rem 2.4rem;
  backdrop-filter: blur(7px);
  background: hsla(0 0% 100% / .5);
  box-shadow: var(--shadow);
}
.est-box::before{
  content: '';
  background-image: url(/assets/images/layout/icon-maple-leaf.svg);
  background-size: 2.4rem auto;
  background-repeat: no-repeat;
  background-position: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background-color: var(--second);
  position: absolute;
  top: -2rem;
  left: calc(50% - 2rem);
}
.est-box .h6{
  color: var(--dark);  
  margin: 0;
  line-height: 1;
}
.est-box .h1{
  color: var(--dark);
  margin: -5px 0;
  line-height: 1;
  font-size: 6.8rem;
}
.feat-prod{
  padding-block: 14rem 8rem;
}
.feat-prod .content-wrapper{
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.feat-prod .content-wrapper a.superbutton{
  margin-top: auto;
}
.feat-prod .flex-four > *{
  aspect-ratio: 10 / 13.5;
  height: auto;
}
.feat-rev{
  background: linear-gradient(to bottom, white 0px, white 48px, var(--light) 48px, var(--light) 100%);
  position: relative;
  padding-block: 10.4rem;
}
.feat-rev .img-wrapper{
  width: 50%;
  height: calc(100% - 4.8rem);
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 0 1.6rem 1.6rem 0;
  overflow: hidden;
  z-index: 0;
}
.feat-rev .img-wrapper img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.feat-rev .content{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4.8rem;
  position: relative;
  z-index: 2;
}
.feat-rev .content .editable_content{
  width: 40%;
}
.feat-rev .content .rev-wrapper{
  width: 62.5%;
}
.feat-rev .content a.superbutton{
  margin: 0;
}
.contact-strip .content{
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}
.contact-strip.inner-contact .content{
  flex-direction: row;
}
.contact-strip .content .editable_content{
  width: 42.25%;
}
.contact-strip .content ul.contact-list{
  width: 49.25%;
}
.contact-strip .content ul.contact-list li{
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 0;
  padding: 3.2rem 1.6rem;
  border-radius: .8rem;
  background: white;
  box-shadow: var(--shadow);
}
.contact-strip .content ul.contact-list li img{
  height: 5.5rem;
  width: auto;
  margin: 0 0 .8rem
}
.contact-strip .content ul.contact-list li strong{
  font-size: 1.8rem;
  line-height: 1;
  text-transform: uppercase;
  color: var(--dark);
  letter-spacing: .1em;
  font-weight: 300;
}
.contact-strip .content ul.contact-list li address{
  font-style: normal;
}
.inner-intro{
  padding-block: 0;
}
.inner-intro .content{
  padding: 2.4rem;
  border-radius: 1.6rem;
  box-shadow: var(--shadow);
  background: white;
  transform: translate(0 , -10rem);
}
.inner-sec-list{
  padding-block: 0 10rem;
}
.quote-cta{
  padding: 0 3.2rem;
  background: url(/assets/images/layout/image-cta.jpg) center center no-repeat;
  background-size: cover;
}
.quote-cta.finance-cta{
  background: url(/assets/images/layout/image-finance.jpg) center center no-repeat;
  background-size: cover;
}
.quote-cta .editable_content{
  max-width: 48rem;
  padding: 10rem 3.2rem;
  background: var(--main);
}
.team-strip{
 padding-top: 0; 
}
.news-strip .content .editable_content,
.team-strip .content .editable_content{
  max-width: 66.6666%;
  margin: 0 0 4rem;
}
.team-strip .content .flex .box{
  background: white;
  box-shadow: var(--shadow);
  border-radius: 1.6rem;
  overflow: hidden;
}
.team-strip .content .flex .box img{
  height: auto;
  border-bottom: 2px solid var(--main);
}
.team-strip .content .flex .box .content-wrapper{
  padding: 1.6rem;
  text-align: center;
}
.team-strip .content .flex .box .content-wrapper h3{
  position: initial;
  background: none;
  color: var(--dark);
  padding: 0;
  display: block;
  height: auto;
  margin: 0;
}
.team-strip .content .flex .box .content-wrapper h6{
  font-size: 1.6rem;
  margin: 0 0 .8rem;
}
.team-strip .content .flex .box .content-wrapper a{
  width: 3.2rem;
  height: 3.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  text-decoration: none;
  border: 2px solid var(--main);
  color: var(--dark);
  font-size: 1.4rem;
  border-radius: 50%;
}
.team-strip .content .flex .box .content-wrapper a:hover{
  background: var(--main);
  color: white;
}
.news-strip .content-holder{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin: 0 0 4rem;
}
.news-list .card{
  display: flex;
  gap: 0;
  position: relative;
  align-items: center;
}
.news-list .card .img-wrapper{
  width: 40%;
  height: auto;
  aspect-ratio: 4.5 / 5.5;
}
.news-list .card .img-wrapper img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.news-list .card .date-wrapper{
  position: absolute;
  top: 1.6rem;
  left: 40%;
  transform: translate(-50% , 0);
  background: var(--second);
  color: white;
  padding: 8px;
  text-align: center;
}
.news-list .card .date-wrapper .day{
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  font-weight: 500;
  font-size: 3.2rem;
}
.news-list .card .date-wrapper .month{
  letter-spacing: .1em;
  font-weight: 300;
  line-height: 1;
  text-transform: uppercase;
  font-size: 1.4rem;
}
.news-list .card .content-wrapper{
  width: 60%;
  padding: 1.6rem 0 1.6rem 4rem;
}
.careers-strip{
  padding-top: 0;
}
.careers-strip .flex .card{
  padding: 1.6rem;
  background: white;
  border-left: 3px solid var(--main);
}
.colour .social_media ul li a{
  background: white;
  color: var(--main)
}
.colour .social_media ul li a:hover{
  background: var(--second);
  color: white;
}
.colour form .form-terms{
  color: white;
}
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover, 
select:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover, 
textarea:-webkit-autofill:focus {
  -webkit-text-fill-color: white !important;
  background: #4c7363!important;
  color: white !important;
  -webkit-box-shadow: 0 0 0px 40rem #4c7363 inset !important;
}
.form_holder input:focus,
.form_holder select:focus,
.form_holder textarea:focus {
  background-color: #4c7363;
  color: white;
  outline: none;
}
.rev-list{
  padding-top: 0;
  overflow: hidden;
}
.supp-logos .flex{
  align-items: flex-start;
}
.supp-logos .flex a{
  aspect-ratio: unset;
  background: white;
  padding: 1.6rem;
  box-shadow: var(--shadow);
  overflow: hidden;
  border-radius: 1.6rem;
}
.supp-logos .flex a img{
  height: auto;
}
nav.mm-menu > ul:first-child > li:last-child > a{
  background: white !important;
  color: var(--main) !important;
}
.flex .quote-box{
  display: flex;
  flex-direction: column;
  align-items: flex-start;

}
.flex .quote-box a.superbutton{
  margin-top: auto;
}

.inner-prod-list .content .flex {
  justify-content: center;
}
.inner-prod-list .content .flex a.box.box-width-1,
.inner-prod-list .content .flex a.box.box-width-2,
.inner-prod-list .content .flex a.box.box-width-3{
  flex-grow: 1;
  max-width: 410px;
  max-height: 555px;
}
@media screen and (max-width: 960px) {
  .inner-prod-list .content .flex a.box.box-width-1,
  .inner-prod-list .content .flex a.box.box-width-2,
  .inner-prod-list .content .flex a.box.box-width-3{
    flex-grow: 1;
    max-width: 100%;
    max-height: 100%;
  }
}
.blog-img{
  max-width: 32rem;
  width: 100%;
  height: auto;
  float: right;
  margin: 0 1.6rem 1.6rem 0;
}
/* ---------- Mobile Responsiveness ---------- */
@media screen and (max-width: 1180px){
  .jqueryslidemenu nav {
    width: calc(100% - 259px);
  }
  .jqueryslidemenu ul{
    justify-content: flex-end;
  }
  .contact-strip .content ul.contact-list li{
    font-size: 1.4rem;
  }
}
@media screen and (max-width: 1100px){
  header.full_header .top-header-wrapper .jqueryslidemenu nav,
  header.full_header .top-header-wrapper .jqueryslidemenu ul{
    gap: 3.2rem;
  }
}
@media screen and (max-width: 960px){
  .banner-container-constrained{
    background: white;
    padding-bottom: 1.6rem;
  }
  .banner-container-constrained ul.ms-banner-constrained li.ms-overlay .img-wrapper, .banner-container-constrained ul.ms-banner-constrained li.ms-overlay.banner-left .img-wrapper, .banner-container-constrained ul.ms-banner-constrained li.ms-overlay.banner-right .img-wrapper{
    width: calc(100% - 3.2rem);
    height: auto;
    margin-left: 1.6rem;
    margin-top: 1.6rem;
    border-radius: 1.6rem;
  }
  a.get-quote-tab{
    transform: rotate(0deg);
    right: auto;
    left: 0;
    top: auto;
    bottom: 0;
    width: 100%;
  }
  .banner-container-constrained ul.ms-banner-constrained li.ms-overlay .banner-details, .banner-container-constrained ul.ms-banner-constrained li.ms-overlay.banner-left .banner-details, .banner-container-constrained ul.ms-banner-constrained li.ms-overlay.banner-right .banner-details{
    transform: none;
    width: calc(100% - 6.4rem);
    padding: 2.4rem 1.6rem;
    margin: -1.6rem auto 0;
    position: relative;
    z-index: 2;
    top: auto;
    left: auto;
    justify-content: center;
  }
  section.content_container.intro-strip{
    padding: 400px 3.2rem 5rem;
  }
  section.content_container.intro-strip .img-wrapper{
    width: calc(100% - 3.2rem);
    height: 30rem;
    top: 1.6rem;
    bottom: auto;
    left: 1.6rem;
    border-radius: 1.6rem;
  }
  .est-box{
    top: 25rem;
    left: 6.4rem;
    bottom: unset;
  }
  section.content_container.intro-strip .content .editable_content{
    width: 100%;
  }
  .feat-prod{
    padding: 4.8rem 3.2rem;
  }
  .feat-prod .flex-four .editable_content{
    aspect-ratio: unset;
    margin-bottom: 3.2rem;
  }
  .feat-rev{
    background: var(--light);
    padding: 4.8rem 3.2rem 34rem 3.2rem;
  }
  .feat-rev .img-wrapper{
    width: calc(100% - 3.2rem);
    height: 28rem;
    top: auto;
    bottom: 1.6rem;
    left: 1.6rem;
    border-radius: 1.6rem;
  }
  .feat-rev .content{
    gap: 3.2rem;
  }
  .contact-strip .content ul.contact-list,
  .contact-strip .content .editable_content,
  .feat-rev .content .rev-wrapper,
  .feat-rev .content .editable_content{
    width: 100%;
  }
  .feat-rev .content a.button{
    margin: 0;
  }
  .contact-strip.inner-contact .content,
  .contact-strip .content{
    flex-direction: column;
    gap: 4rem;
  }
  footer{
    padding-bottom: 6rem;
  }
  .inner-intro{
    padding-inline: 1.6rem;
  }
  .inner-intro .content{
    padding: 2.4rem 1.6rem;
    transform: translate(0, -5rem);
  }
  .rev-list{
    padding-inline: 0;
  }
  .banner-container-constrained ul.ms-banner-constrained li.ms-overlay .banner-details .banner-content, .banner-container-constrained ul.ms-banner-constrained li.ms-overlay.banner-left .banner-details .banner-content, .banner-container-constrained ul.ms-banner-constrained li.ms-overlay.banner-right .banner-details .banner-content{
    padding: 0;
  }
  .blog-img{
    float: none;
    margin: 1.6rem 0;
  }
}
@media screen and (max-width: 768px) {
  .quote-cta{
    padding: 0;
  }
  .quote-cta .editable_content{
    width: 100%;
    background: hsla(155 28% 30% / .85);
  }
  .news-strip .content .editable_content, .team-strip .content .editable_content{
    max-width: 100%;
  }
  .news-strip .content-holder{
    flex-direction: column;
  }
  .news-strip .content-holder a.superbutton{
    margin: 0;
  }
  .news-list .card{
    flex-direction: column;
    align-items: flex-start;
  }
  .news-list .card .content-wrapper{
    width: 100%;
    padding: 1.6rem 0;
  }
  .news-list .card .img-wrapper{
    width: 100%;
  }
  .news-list .card .date-wrapper{
    left: 1rem;
  }
  .flex .quote-box{
    aspect-ratio: unset;
  }
  .flex .quote-box a.superbutton{
    margin-top: 2rem;
  }
  .career-page .editable_content h1,
  .career-page .editable_content h2,
  .career-page .editable_content h3{
    word-break: break-word;
  }
}
@media screen and (max-width: 410px){
  .banner-container-constrained .banner-details .h1{
    font-size: 2.8rem;
  }
}
.material-filter{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  margin: 0 0 3.2rem;
  gap: 1.6rem;
}
.material-filter label{
  font-size: 1.4rem;
  line-height: 1;
}
.material-filter select{
  font-size: 1.4rem;
  line-height: 1;
  color: var(--medium);
  padding: .4rem 1.6rem .5rem .4rem;
  border-radius: .8rem;
  max-width: 24rem;
  width: 100%;
  border: 1px solid #ddd9d9;
  background: white;
}
.supp-logos .content .flex.wind-mat-list{
  align-items: unset;
}
.supp-logos .content .flex.wind-mat-list a{
  padding: 0;
  text-decoration: none;
  text-align: center;
  color: var(--dark);
  transition: var(--animate);
}
.supp-logos .content .flex.wind-mat-list a:hover{
  color: white;
  background: var(--main);
}
.supp-logos .content .flex.wind-mat-list a span{
  display: block;
  padding: .8rem 1.6rem 1rem;
}
@media screen and (max-width: 1024px){
  .supp-logos .content .flex.wind-mat-list a{
    width: calc(33.3333% - calc(var(--grid-gap) * 2 / 3));
  }
  .strip-list.no-photo-strip{
        padding: 5rem 3rem;
    }
}
@media screen and (max-width: 800px){
  .supp-logos .content .flex.wind-mat-list a{
    width: calc(50% - calc(var(--grid-gap) / 2));
  }
}
@media screen and (max-width: 560px){
  .supp-logos .content .flex.wind-mat-list a{
    width: 100%;
  }
  .material-filter{
    flex-direction: column;
    gap: .8rem;
    align-items: flex-start;
  }
  .material-filter select{
    max-width: 100%;
  }
}