/*
Theme Name: Web Expert Version 3.0
Theme URI: https://www.webdesignx.com.au/
Author: Brad McGinniss
Author URI: https://www.webdesignx.com.au/
Description: The official WordPress theme for Web Expert
Tags: accessibility-ready, one-column, two-columns, custom-menu, featured-images, microformats, sticky-post, threaded-comments, translation-ready
Version: 2025.1
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 8.2
License: GNU General Public License v3 or Later

License: Only for use on webdesignx.com.au/
License URI:
Text Domain: webdesignx
*/

html{scroll-behavior:smooth}body{line-height:1}a{text-decoration-skip-ink:auto}a[href^="tel"]{color:inherit;text-decoration:none}button{outline:0} blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}q{display:inline;font-style:italic}q:before{content:'"';font-style:normal}q:after{content:'"';font-style:normal}textarea,input[type="text"],input[type="button"],input[type="submit"],input[type="reset"],input[type="search"],input[type="password"]{-webkit-appearance:none;appearance:none;border-radius:0}input[type="search"]{-webkit-appearance:textfield}table{border-collapse:collapse;border-spacing:0}th,td{padding:2px}big{font-size:120%}small,sup,sub{font-size:80%}sup{vertical-align:super}sub{vertical-align:sub}dd{margin-left:20px}kbd,tt{font-family:courier;font-size:12px}ins{text-decoration:underline}del,strike,s{text-decoration:line-through}dt{font-weight:bold}address,cite,var{font-style:italic}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,img,picture{display:block}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}

body,div,a,p,li,h1,h2,h3,h4,h5,h6{
  font-family: var(--font-1);
  color:rgba(var(--text-color));
}



.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important;word-break:normal}
.screen-reader-text:focus{background-color:#f7f7f7;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;-webkit-clip-path:none;clip-path:none;color:#007acc;display:block;font-size:14px;font-size:.875rem;font-weight:700;height:auto;right:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}
.skip-link{left:-9999rem;top:2.5rem;z-index:999999999;text-decoration:underline}
.skip-link:focus{display:block;left:6px;top:7px;font-size:14px;font-weight:600;text-decoration:none;line-height:normal;padding:15px 23px 14px;z-index:100000;right:auto}
.visually-hidden:not(:focus):not(:active), .form-allowed-tags:not(:focus):not(:active){position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px);white-space:nowrap}

em{font-style: italic;}

:root{
  --black: 18, 18, 18;
  --blue-deep:0, 20, 41;
  --blue-indust: 1, 47, 75;
  --blue-light: 10, 153, 213;
  --blue-misty:212, 233, 242;
  --white: 255, 255, 255;
  --grey: 195, 195, 195;
  --grey-light: 0 20 41;
  --red: 255, 0, 0;
  
  /*--font-1: 'Avenir LT Pro', sans-serif;*/
  --font-1: 'Figtree', sans-serif;


  --margin-inline: calc(3.25rem + 4.6vw);
  --padding-block: calc(1.5rem + 4vw);

  --chevron: url(images/chevron.svg); 
  --arrow: url(images/arrow.svg); 

  
  --filter-blue-light: brightness(0) saturate(100%) invert(55%) sepia(86%) saturate(4142%) hue-rotate(169deg) brightness(95%) contrast(92%);
  --filter-blue-misty: brightness(0) saturate(100%) invert(97%) sepia(71%) saturate(616%) hue-rotate(169deg) brightness(100%) contrast(91%);
  
  --filter-white: invert(97%) sepia(68%) saturate(14%) hue-rotate(216deg) brightness(103%) contrast(100%);


  --text-color: var(--black);
  --link-color: var(--blue-light);
  --hover-color: var(--blue-light);
  --nav-color:  var(--white);
  --nav-color-hover: var(--blue-light);


  --btn-bg: var(--blue-light);
  --btn-text:var(--white);
  --btn-bg-hover:var(--white);
  --btn-text-hover:var(--blue-deep);
}

*::selection,
::selection {
  background: rgba(var(--blue-light),0.25);
}


.bg-blue-deep *::selection,
.bg-blue-deep p::selection,
.bg-blue-deep li::selection,
.bg-blue-deep *::selection,
.bg-blue-indust p::selection,
.bg-blue-indust li::selection {
  background: rgba(var(--white),0.25);
}

.bg-blue-light::selection,
.bg-blue-light *::selection,
.bg-blue-light p::selection,
.bg-blue-light li::selection{
  background: rgba(var(--black), 0.25);
}



pre{
  text-wrap: wrap;
  background:#FFF;
  color:#000;
}

html, body {
  width: 100%;
  height: 100%;
  position: relative;
  min-width: 100%;
  overflow-x: clip;
}

body{
  overflow-x: hidden;
  font-size: 1.125em;
  line-height: 155.5555%;
  padding:0;
  margin: 0;
}

a{
  text-decoration: none;
  cursor: pointer;
}

p a,
li a{
  position: relative;
  
}


 a:hover:after,
p a:hover:after,
li a:hover:after{
  width: 100%;
}



main{
  /*z-index: 1;*/
}

.relative{
  position: relative;
}

.overflow-hidden{
  overflow: hidden;
}

.overflow-x-hidden{
  /*overflow-inline:clip;*/
  overflow-x: hidden;
}

.flex{
  display: flex;
}


.flex-column{
  display:flex;
  flex-direction: column;
}

.flex-grow{
    flex: 1;
}

.flex-wrap{
  display: flex;
  flex-wrap: wrap;
}

.flex-right{
  display: flex;
  align-items: end;
  flex-direction: column;
}

.flex-center{
  justify-content: center;

}

.justify-content-end,
.flex-end{
  justify-content: end;
}

.justify-space-between{
  justify-content: space-between;
}


.flex-middle{
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
}

.align-self-start{
  align-self: start;
}

.align-self-center{
  align-self: center;
}

.align-self-end{
  align-self: end;
}

.align-content-center{
 align-content: center;
}

.flex-shrink{
  flex-shrink: 1;
}

.align-items-end{
  align-items: end;
}

.align-items-center{
  align-items: center;
}

.align-content-baseline{
  align-content: baseline;
}


.fb-30{
  flex-basis: 30%;
}

.grid-v-min{
  grid-auto-rows: min-content;
}

.grid-col-full{
  grid-column: 1 / -1;
  max-width: 100% !important;
}


.grid .heading-height{
  display: grid;
  grid-template-rows: auto 1fr; 
}

.grid .heading-height h4{
   grid-row: 1;
}

.max-content{
  width: max-content;
}


.text-col-2{
  column-count: 2;
}

.text-col-2 p:first-of-type{
  margin-top:0px;
}

.w-100{
  width: 100%;
}

.fill{
  width: 100%;
  height: 100%;
}

.col-2{
  --col1: 0px;
  display: grid;
  /*grid-template-columns: calc(50% + var(--col1) ) auto;*/
  grid-template-columns: repeat(2, 1fr);
}

.col-3{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-columns: repeat( 3, minmax(calc(33% -  var(--gap, 1rem)), 1fr) );
}

.col-4{
  display: grid;
  /*grid-template-columns: 25% auto auto auto;
  grid-auto-flow: column;
  grid-auto-columns: 0.25fr;*/
  grid-template-columns: repeat(4, 1fr);
  grid-template-columns: repeat( 4, minmax(calc(25% -  var(--gap, 1rem)), 1fr) );
}

.col-5{
  --gap: 1rem;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-columns: repeat( 5, minmax(calc(20% - var(--gap)), 1fr) );
}


.row{
  width: 100%;
}

.row:has(img + img) img{
 max-width: calc(50% - var(--gap) * .5);
}

.row:has(img + img + img) img{
 max-width: calc(33.33333333% - var(--gap) * .66);
}


.w-700{
  max-width: 700px;

}

/* Layout Spacing */


[class^="spacer"],
.spacer{ 
  border:0;
}

.spacer-1{ 
  margin-bottom: calc(1rem + 1vw);
}


[class*="reveal-"]{
  display: none;
}



.gap-slight{
  gap: .5em;
}

.gap-1{
  --vw: 2vw;
  --min-gap: .5rem;
  --gap: clamp(var(--min-gap),var(--vw),1rem);
  gap: clamp(var(--min-gap),var(--vw),1rem);
}

.gap-2{
  --vw: 2vw;
  --gap: clamp(.5rem,var(--vw),2rem);
  gap: clamp(.5rem,var(--vw),2rem);
}

.gap-3 {
  --gap: clamp(1rem,5vw,3rem);
  gap: clamp(1rem,5vw,3rem);
}

.gap-4{
  --gap: clamp(1rem,5vw,4rem);
  gap: clamp(1rem,5vw,4rem);
}

.gap-5 {
  --vw: 5vw;
  --gap: clamp(.5rem,var(--vw),5em);
  gap: clamp(.5rem,var(--vw), 5em);
}


.gap-6 {
  --vw: 6vw;
  --gap: clamp(.5rem, var(--vw), 6em);
  gap: clamp(.5rem, var(--vw), 6em);  
}


.gap-7 {
  --vw: 7vw;
  --gap: clamp(.5rem, var(--vw), 7em);
  gap: clamp(.5rem, var(--vw), 7em);  
}



.gap-8 {
  --vw: 8vw;
  --gap: clamp(.5rem, var(--vw), 8em);
  gap: clamp(.5rem, var(--vw), 8em);  
}

.gap-10{
  --vw: 10vw;
  --gap: clamp(.5rem, var(--vw), 10em);
  gap: clamp(.5rem, var(--vw), 10em);    
}

.gap-12 {
  --gap-vw:6vw;
  --gap-min:2rem;
  --gap: clamp(var(--gap-min),var(--gap-vw), 12rem);
  gap: clamp(var(--gap-min),var(--gap-vw), 12rem);
}


.gap-row-1{
  --row-vw: 1vw;
  row-gap: clamp(.5rem, var(--row-vw), 1rem);
}

.gap-row-2{
  --row-vw: 2vw;
  row-gap: clamp(.5rem, var(--row-vw), 2rem);
}

.gap-row-3{
  --row-vw: 3vw;
  row-gap: clamp(.5rem, var(--row-vw), 3rem);
}

.gap-row-4{
  --row-vw: 4vw;
  row-gap: clamp(.5rem, var(--row-vw), 4rem);
}

.gap-row-5{
  --row-vw: 5vw;
  row-gap: clamp(.5rem, var(--row-vw), 5rem);
}



.gap-col-1{
  --gap: 1vw;
  --col-vw: 1vw;
  column-gap: clamp(.5rem, var(--col-vw), 1rem);
}

.gap-col-2{
  --gap: 2vw;
  --col-vw: 2vw;
  column-gap: clamp(.5rem, var(--col-vw), 2rem);
}

.gap-col-3{
  --gap: 3vw;
  --col-vw: 3vw;
  column-gap: clamp(.5rem, var(--col-vw), 3rem);
}

.gap-col-4{
  --col-vw: 4vw;
  column-gap: clamp(.5rem, var(--col-vw), 4rem);
}

.gap-col-5{
  --col-vw: 5vw;
  column-gap: clamp(.5rem, var(--col-vw), 5rem);
}


.gap-col-10{
  --col-vw: 10vw;
  column-gap: clamp(.5rem, var(--col-vw), 10rem);
}


.pblock-1{
  padding-block: clamp(.5rem,2vw,1rem);
} 

.pblock-2{
  padding-block: clamp(.5rem,3vw,2rem);
} 





.mblock-slight{
  margin-block: 0.5rem !important;
}


.mblock-0{
  margin-block: 0;
} 


.mblock-1{
  --block-vw:1.5vw;
  margin-block: clamp(.5rem,var(--block-vw),1rem);
} 

.mblock-2{
  --block-vw:3vw;
  margin-block: clamp(.5rem,var(--block-vw),2rem);
} 

.mblock-3{
  --block-vw:3vw;
  margin-block: clamp(.5rem,var(--block-vw),3rem);
} 

.mblock-4{
  --block-vw:4vw;
  margin-block: clamp(.5rem,var(--block-vw),4rem);
} 

.p-mb p,
p.p-mb{
  --mb:1rem;
}

.pb-slight{
  padding-bottom: 0.5rem !important;
}


.pb-half{
   padding-bottom: 1.5rem;
}


.pb-half{
  --pb-vw:1vw;
  padding-bottom: calc(.5rem + var(--pb-vw)) !important;
}



.pb-0{
    padding-bottom: 0px !important;
}

.pb-1{
  --pb-vw:1vw;
  padding-bottom: calc(1rem + var(--pb-vw)) !important;
}

.pb-2{
  --pb-vw:1vw;
  padding-bottom: calc(2rem + var(--pb-vw)) !important;
}

.pb-3{
  --pb-vw:1vw;
  padding-bottom: calc(3rem + var(--pb-vw)) !important;
}

.pb-4{
  --pb-vw:2vw;
  padding-bottom: calc(4rem + var(--pb-vw)) !important;
}

.pb-5{
  --pb-vw:2.5vw;
  padding-bottom: calc(5rem + var(--pb-vw)) !important;
}

.pb-6{
  --pb-vw:3vw;
  padding-bottom: calc(6rem + var(--pb-vw)) !important;
}

.pt-slight{
  padding-top: 0.5rem !important;
}


.pt-0{
  padding-top: 0px !important;
}

.pt-half{
  --pt-vw:1vw;
  padding-top: calc(.5rem + var(--pt-vw)) !important;
}

.pt-1{
  --pt-vw:1vw;
  padding-top: calc(1rem + var(--pt-vw)) !important;
}


.pt-2{
  --pt-vw:2vw;
  padding-top: calc(2rem + var(--pt-vw));
}

.pt-3{
  --pt-vw:3vw;
  padding-top: calc(3rem + var(--pt-vw));
}




.pl-slight{
  padding-left:.5rem !important;
}

.pl-0{
  padding-left:0px !important;
}

.pl-1{
  --vw: 1vw;
  padding-left: calc(1rem + var(--vw));
}

.pl-2{
  --vw: 2vw;
  padding-left: calc(2rem + var(--vw));
}


.pl-3 {
  --pl-vw: 3vw;
  --pl-val: 3rem;
  padding-left: calc(var(--pl-val) + var(--pl-vw));
}


.pr-slight{
  padding-right:.5rem !important;

}

.pr-1{
  --vw: 1vw;
  padding-right: calc(1rem + var(--vw));
}

.pr-2{
  --vw: 2vw;
  padding-right: calc(2rem + var(--vw));
}


.pr-3 {
  --pr-vw: 3vw;
  --pr-val: 3rem;
  padding-right: calc(var(--pr-val) + var(--pr-vw));
}


.pi-slight{
  --pi-vw: 1vw;
  padding-inline: calc(.5rem + var(--pi-vw));
}

.pi-1{
  --pi-vw: 1vw;
  padding-inline: calc(1rem + var(--pi-vw)) !important;
}

.pi-2{
  --pi-vw: 2vw;
  padding-inline: calc(2rem +  var(--pi-vw)) !important;
}

.pi-2{
  --pi-vw: 3vw;
  padding-inline: calc(3rem +  var(--pi-vw));
}


.mt-slight{
  margin-top: 0.5rem !important;
}

.mt-0,
.mt-0 > p{
  margin-top:0 !important;
}


.mt-1{
  --mt-vw:0vw;
  margin-top: calc(1rem + var(--mt-vw)) !important;
}

.mt-2{
  --mt-vw:0vw;
  margin-top: calc(2rem + var(--mt-vw)) !important;
}

.mt-3{
  --mt-vw:3vw;
  margin-top: calc(3rem + var(--mt-vw)) !important;
}

.p-bs{
  padding-block-start: var(--padding-block);
}

.p-be{
  padding-block-end: var(--padding-block);
}



.mb-slight{
  margin-bottom: 0.5rem;
}

.mb{
  margin-bottom: 1rem;
}

.mb-half{
   margin-bottom: 1.5rem;
}





.mb-0{
  margin-bottom:0px !important;
}

.mb-1{
  --mb-vw:1vw;
  margin-bottom: calc(1rem + var(--mb-vw));
}

.mb-2{
  --mb-vw:1vw;
  margin-bottom: calc(2rem + var(--mb-vw));
}

.mb-3{
  --mb-vw:3vw;
  margin-bottom: calc(3rem + var(--mb-vw));
}


.ml-0{
  margin-left:0px !important;
}



.ml-0{
  margin-left:0px !important;
}


.mi-slight{
  --mi-vw: 1vw;
  margin-inline: calc(.5rem + var(--mi-vw));
}

.mi-0{
  margin-inline: 0 !important;
}


.mi-1{
  --mi-vw: 1vw;
  margin-inline: calc(1rem + var(--mi-vw));
}

.mi-2{
  --mi-vw: 2vw;
  margin-inline: calc(2rem +  var(--mi-vw));
}

.mi-3{
  --mi-vw: 3vw;
  margin-inline: calc(3rem +  var(--mi-vw));
}

.h-100{
  height: 100%;
}

.h-100dvh{
  min-height: 100dvh;
}




.image-fit img{
  width: 100%;
  max-width: 100%;
  object-fit: cover;
/*  aspect-ratio: 1 / 1;*/
  object-position: center
}

.image-scale,
.image-scale > img{
  --image-mw: 100%;
  height: auto;
  width: 100%;
  max-width: var(--image-mw);
}

.image-hover-fade img:first-child{
  opacity: 1;
  transition: 500ms ease-in-out;
  z-index: 2;
  position: relative;
}

.image-hover-fade img:first-child:hover{
  opacity: 0;
}


.image-hover-fade img:last-child{
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: auto;

}


.image-4-3,
.image-4-3 > img{
  aspect-ratio: 4 / 3;
}

.image-16-9,
.image-16-9 > img{
  aspect-ratio: 16 / 9;
}

.image-5-6,
.image-5-6 > img{
  aspect-ratio: 5 / 6;
}


.image-133-150,
.image-133-150 > img{
  aspect-ratio: 133 / 150;
}


.radius-8,
.radius-8 img{
  border-radius: 8px;
}


.radius-10,
.radius-10 img{
  border-radius: 10px;
}


.radius-12,
.radius-12 img{
  border-radius: 12px;
}

.borders-curved,
.borders-curved img{
  border-radius: 10px;
  border-bottom-right-radius: 60px;
}

.border-bottom{
  border-bottom:1px solid rgb(var(--blue))
}

.mobile-image{
  display:none;
}



.grecaptcha-badge{
  visibility: hidden;
  pointer-events: none;
}


/* Text Formatting */

main *{
  color:rgb(var(--text-color, rgb(var(--black))));
}

main a{
  position: relative;
  color:rgb(var(--text-color,  rgb(var(--black))));
  transition: 250ms ease-in-out;
  text-decoration: none;
}

main p a:hover{
  color:rgb(var(--hover-color,  rgb(var(--black))));
}


.heading-small{
  font-size: clamp(16px, 4vw, 1.25rem);
  line-height: 125%;
  color:rgb(var(--text-color));
  text-transform: uppercase;
}



h1{
  --f-min: 32px;
  --f-vw: 7.5vw;
  
  font-size: 5.125em;
  font-size: clamp(var(--f-min), var(--f-vw), 75px);
  font-weight: 900;
  line-height: 115%;
  font-family: var(--font-1);
  color:rgb(var(--blue-light));

  text-wrap: balance;
}



h2{
  --f-min:2rem;
  --f-vw: 3.5vw;
  font-size: clamp(var(--f-min), var(--f-vw),3.44rem);
  font-family: var(--font1);
  font-weight: 900;
  line-height: 115%;
  margin-bottom: 1.5rem;
  color:rgb(var(--text-color, --navy));

  text-wrap: balance;
}

h3{
  --f-min: 1.2em;
  --f-vw: 3vw;
  --mb-vw:0.5vw;
  --mt:0;
  --mt-vw: 0w;

  font-size: clamp(var(--f-min), var(--f-vw), 1.875rem);
  font-family: var(--font1);
  font-weight: 900;
  line-height: 165%;
  color:rgb(var(--text-color, --navy));

  margin-top: calc(var(--mt) + var(--mt-vw));
  margin-bottom: calc(1rem + var(--mb-vw));

  text-wrap: balance;
}

h4{
  /*font-size:2.5em;*/
  --f-min: 1.5em;
  --f-vw: 3vw;
  font-size: clamp(var(--f-min), var(--f-vw),2.5em);
  font-weight: 600;
  line-height: 130%;
  color:rgb(var(--text-color, --navy));

  text-wrap: balance;
}

h5{
  --f-min:1.35em;
  --f-vw:2vw;
  font-size: clamp(var(--f-min), var(--f-vw),1.5625em);
  font-family: var(--font1);
  line-height: 133%;
  color:rgb(var(--text-color, --navy));
  font-weight: 600;
}

h6{
  --min:1.35em;
  --vw:2vw;
  font-size: clamp(var(--min), var(--vw),1.5625em);
  font-family: var(--font1);
  line-height: 133%;
  color:rgb(var(--text-color, --navy));
  font-weight: 700;
}



.curve-small:after {
  content: "";
  display: block;
  margin-top: .25rem;
  width: clamp(40px,8vw,70px);
  height: 11px;
  background: var(--underline-short) no-repeat 50% 55%;
  background-size: contain;
  
}




#page-content ul{
  margin-top: calc(1rem + .5vw);
  list-style-type: disc;
  padding: 0 0 0 1rem;
}

#page-content ul > li{
  margin-bottom: calc(.75rem + .5vw);
  padding-left: calc(.5rem + .5vw);
}

#page-content p{
  margin-top: 1rem;
}

#news #page-content p {
  margin-top: calc(1rem + 1vw);
  font-size: 1.25em;

}

#page-content h3{ 
  --f-min: 1.75em;
  margin-bottom: calc(.5rem + .5vw);
}

#page-content > h3{
  margin-top: 0.5rem;
}

#news #page-content > p + h3{
  margin-top:calc(1.5rem + 2.5vw);
}

#news #page-content > h3 + p{
  margin-top:calc(.5rem + 1vw);
}

#page-content h5{
  font-family: var(--font-1);
  margin-top: calc(1.5rem + 2.5vw);
  margin-bottom: calc(1rem + .5vw);
}

#page-content h5:first-child{
  margin-top: 0;
}

.author,
#page-content blockquote{
  background-color: var(--light-green);

  --q-mb: 2vw;
  --q-pb: 2vw;
  --q-pi: 2vw;
  margin-block: calc(1rem + var(--q-mb));
  padding-block: calc(1rem + var(--q-pb));
  padding-inline:calc(1rem + var(--q-pi));
  border-radius: 8px;
}

#page-content blockquote h3{
  color:var(--blue); 
  line-height: 133%;
  font-weight: 600;
  font-family: var(--font-1);
}

#page-content blockquote h3:first-of-type{
  margin-bottom: calc(1rem + .5vw);
}

#page-content blockquote p{
  --f-min: 1.25rem;
  --f-vw: 1.5vw;

  font-family: var(--font-1);
  font-size: clamp(var(--f-min), var(--f-vw), 1.57rem);
  font-weight: 600;
  line-height: 130.8%;
  color:var(--vibrant-green);
}

#news #page-content blockquote p:first-of-type{
  margin-top:0px;
}

#page-content img[class*="wp-image"]{
  margin-top: calc(1rem + 2vw);
  border-radius: 10px;
}


#page-content .gallery{
  display: grid;
  gap:  clamp(2rem, 10vw, calc(1rem + 1.5vw));
  margin-block: calc(1.5rem + 2vw) calc(1rem + 2vw);
}

#page-content .gallery br{
  display: none;
}

#page-content .gallery-columns-2{
  grid-template-columns: repeat(2, 1fr) ;
}

#page-content .gallery-columns-3{
  grid-template-columns: repeat(3, 1fr) ;
}

#page-content .gallery-columns-4{
  grid-template-columns: repeat(4, 1fr) ;
}


#page-content .gallery-item{
  width: 100% !important;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  margin-top:0 !important;
  margin-bottom: 0;
}

#page-content .gallery-item > dt{
  width: 100%;
}


div[id*="gallery"] img{
  border:0 none !important;
  object-fit: cover;
  width: 100%;
  height: auto;
  border-radius: 10px;
}


#page-content .gallery-caption{
  width: 100%;
  align-self: self-start;
  color:#FFF;
  font-family: var(--jost);
  font-size: .85rem;
  line-height: 120%;
  background-color:#000;
  padding: .5rem;
}

#social-share{
  display: flex;
  align-items: center;
}

#social-share h6{
  margin-right: .5rem;
}

#social-share .fa {
  padding: 10px;
  font-size: 30px;
  text-align: center;
  text-decoration: none;
  color: var(--blue);
  transition: 250ms ease-in-out;
}

#social-share .fa:hover {
  color:var(--vibrant-green);
}

#social-share .fa:first-of-type{
  margin-left:.5rem;
}

#posts h3{
  /*--mt-vw: 1vw;
  --mt: .5rem;
  --mb-vw: 1.5vw;
  --f-vw: 2vw;*/
}

#posts .article-thumbnail{
  display: flex;
  background-color:var(--vibrant-green);
}

 #posts .article-thumbnail.no-image{
  outline: 1px solid var(--grey-light);
}

#pagination{
  text-align: center;
}

#pagination .page-numbers{
  position: relative;
  display: inline-block;
  padding:1rem .5rem;
  font-size: 1.25em;
  color:var(--blue);
  text-decoration: none;
  min-width: 40px;
}

#pagination .page-numbers.current{
  color:var(--vibrant-green);
  font-weight: 700;
  text-decoration: none;  
}


#pagination .page-numbers:before{
  content:"";
  position: absolute;
  display: block;
  top: -1px;
  left:0px;
  width: 100%;
  border-top:1.5px solid transparent;
  opacity: 0;
  transition:250ms ease-in-out;
}

#pagination .page-numbers:hover::before{
  /*background-color: var(--light-green);*/
  border-color: var(--grey);  
  opacity: 1;
}

#pagination .page-numbers.current:before{  
  border-top:1.5px solid var(--vibrant-green);
  opacity: 1;
}





#pagination .page-numbers.prev,
#pagination .page-numbers.next{
  display:none;
}

.tagline{
  --min:1em;
  --vw: 1.75vw;
  font-size: clamp(var(--min), var(--vw),1.5625em);
  text-transform: uppercase;
}


.border-top{
  border-top: 1px solid rgba(var(--border-color, var(--white)), 0.5);

}

.border-grey{
  border-color:var(--grey)
}

.border-grey-light{
  border-color:var(--grey-light);
}


.youtube-video iframe{
  aspect-ratio: 16 / 9;
  width: 100%;
}


hr{
  --hr-mt:0rem;
  --hr-mt-vw:0vw;

  --hr-mb:1.5rem;
  --hr-mb-vw:1.5vw;



  border: 0;
  background: none;
  border-top: 1.5px solid;
  margin-block: 0;
  border-color:rgb(var(--border-color, --navy));
  overflow: visible;

}

hr.decoration:after{
  translate: 3px 50%;
  scale: 100% 120%;
}

.decoration:after{
  content:"/";
  position: absolute;
  right:0;
  bottom:0;
  color: rgba(var(--text-color));
  font-weight: 100;
  font-size: 20px;
  translate: 4px 50%;
  scale: 60% 120%;
  rotate: 10deg;

}



hr + h2{
  margin-bottom: 0;
}

p,
li{
  font-size: 1.125em;
  line-height: 155.5555%;
}

p strong{
  font-weight: 700;
}

.font-1,
.font-1 > p
{
  font-family: var(--font1);
}

.font-2,
.font-2 > p{
  font-family: var(--font-1);
}

.fs-13,
.fs-13 > p,
.fs-13 > li > p{
  
  --f-min: 13px;
  --f-vw: 1.5vw;
  font-size: clamp(var(--f-min), var(--f-vw), 13px);
  line-height: 135.0%;
}

.fs-16,
.fs-16 > p,
.fs-16 > ul li,
.fs-16 > li > p{
  
  --f-min: 14px;
  --f-vw: 1.5vw;
  font-size: clamp(var(--f-min), var(--f-vw), .9999999999rem);
  line-height: 160.0%;
}


.fs-18,
.fs-18 > p,
.fs-18 > ul li,
.fs-18 > li > p{
  
  --f-min: 16px;
  --f-vw: 1.5vw;
  font-size: clamp(var(--f-min), var(--f-vw), 1.125rem);
  line-height: 160.0%;
}

.fs-20,
.fs-20 > p,
.fs-20 > li > p{
  /*font-size: 1.625em;*/
  /*font-size: clamp(1.35em, 1.5vw, 1.625em);*/
  --f-min: 1em;
  --f-vw: 1.5vw;
  font-size: clamp(var(--f-min), var(--f-vw), 1.25rem);
  line-height: 160.0%;
}

.fs-22,
.fs-22 > p,
.fs-22 > li > p{
  --f-min: 1em;
  --f-vw: 1.5vw;
  font-size: clamp(var(--f-min), var(--f-vw), 22px);
  line-height: 160.0%;
}


.fs-25,
.fs-25 > p,
.fs-25 > li > p{
  --f-min: 1.25rem;
  --f-vw: 1.5vw;
  font-size: clamp(var(--f-min), var(--f-vw), 1.57rem);
  line-height: 130.8%;
}


.fs-26,
.fs-26 > p,
.fs-26 > li > p
.fs-26 > input{
  --f-min: 16px;
  --f-vw: 1.5vw;
  font-size: clamp(var(--f-min), var(--f-vw), 26px);
  line-height: 130.8%;
}


.fs-30,
.fs-30 > p,
.fs-30 > li > p{
  --f-min: 1.25rem;
  --f-vw: 2.5vw;
  font-size: clamp(var(--f-min), var(--f-vw), 1.875rem);
  line-height: 130.8%;
}

.fs-32,
.fs-32 > p,
.fs-32 > li > p{
  --f-min: 2rem;
  --f-vw: 2.5vw;
  font-size: clamp(var(--f-min), var(--f-vw), 2rem);
  line-height: 130.8%;
}

.fs-35,
.fs-35 > p,
.fs-35 > li > p{
  --f-min: 20px;
  --f-vw: 2.5vw;
  font-size: clamp(var(--f-min), var(--f-vw), 2.1875rem);
  line-height: 130.8%;
}


.fs-40,
.fs-40 > p,
.fs-40 > li > p{
  --f-min: 1.5em;
  --f-vw: 2.5vw;
  font-size: clamp(var(--f-min), var(--f-vw), 40px);
  line-height: 130.8%;
}

.fs-50,
.fs-50 > p,
.fs-50 > li > p{
  --f-vw: 5vw;
  --f-min: 24px;
  font-size: clamp(var(--f-min), var(--f-vw),3.125rem);
  line-height: 130.8%;
}

.fs-55,
.fs-55 > p,
.fs-55 > li > p{
  --f-vw: 5vw;
  --f-min: 25px;
  font-size: clamp(var(--f-min), var(--f-vw),55px);
  line-height: 130.8%;
}

.fs-60,
.fs-60 > p,
.fs-60 > li > p{
  --f-min: 2em;
  --f-vw: 3.5vw;
  font-size: clamp(var(--f-min), var(--f-vw),3.75rem);
  line-height: 130.8%;
}

.fs-70,
.fs-70 > p,
.fs-70 > li > p{
  --f-min: 2em;
  --f-vw: 3.75vw;
  font-size: clamp(var(--f-min), var(--f-vw),70px);
  line-height: 130.8%;
}

.fs-75,
.fs-75 > p,
.fs-75 > li > p{
  --f-min: 35px;
  --f-vw: 5vw;
  font-size: clamp(var(--f-min), var(--f-vw), 75px);
   line-height: 110%;
}

.fs-85,
.fs-85 > p,
.fs-85 > li > p{
  --f-min: 2.75em;
  --f-vw: 5vw;
  font-size: clamp(var(--f-min), var(--f-vw),85px);
   line-height: 130.8%;
}

.fs-100,
.fs-100 > p,
.fs-100 > li > p{
  --f-min: 4em;
  --f-vw: 5vw;
  font-size: clamp(var(--f-min), var(--f-vw),100px);
  line-height: 130.8%;
}

.fs-110,
.fs-110 > p,
.fs-110 > li > p{
  --f-min: 2.5em;
  --f-vw: 7.5vw;
  font-size: clamp(var(--f-min), var(--f-vw),110px);
  line-height: 110%;
}

.fs-180,
.fs-180 > p,
.fs-180 > li > p{
  --f-min: 7em;
  --f-vw: 25vw;
  font-size: clamp(var(--f-min), var(--f-vw),180px);
  line-height: 110%;
}


.fw-1,
.fw-1 > p{
  font-weight: 100;
}


.fw-2,
.fw-2 > p{
  font-weight: 200;
}


.fw-3,
.fw-3 > p{
  font-weight: 300;
}

.fw-4,
.fw-4 > p{
  font-weight: 400;
}

.fw-5,
.fw-5 > p{
  font-weight: 500;
}

.fw-6,
.fw-6 > p{
  font-weight: 600;
}

.fw-7 > p,
.fw-7{
  font-weight: 900;
}


.lh-100,
.lh-100 > p{
  line-height: 100%;
}

.lh-110,
.lh-110 > p{
  line-height: 110%;
}

.lh-115,
.lh-115 > p{
  line-height: 115%;
}

.lh-120,
.lh-120 > p{
  line-height: 120%;
}

.lh-125,
.lh-125 > p{
  line-height: 125%;
}

.lh-130,
.lh-130 > p{
  line-height: 130%;
}

.lh-135,
.lh-135 > p{
  line-height: 135%;
}


.lh-140,
.lh-140 > p{
  line-height: 140%;
}


.lh-145,
.lh-145 > p{
  line-height: 145%;
}

.lh-150,
.lh-150 > p{
  line-height: 150%;
}

.lh-165,
.lh-165 > p{
  line-height: 165%;
}

.lh-175,
.lh-175 > p{
  line-height: 175%;
}

.ls-1{
  letter-spacing: 1px;
}

.ls-2{
  letter-spacing: 2px;
}


.text-full{
  display: flex;
  flex-wrap: wrap;
}

.text-right{
  text-align:right;
}

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


.text-full *{

  flex-basis: 100%;
}

.text-upper{
  text-transform: uppercase;
}

.text-caps{
  text-transform: uppercase;
}

.text-wrap{
  text-wrap: wrap;
}

.text-balance{
  text-wrap: balance;
}


.text-counter{
  display: inline-block;
  position: relative;
  max-width: fit-content;
  --f-min: 2.25em;
}

.text-no-underline,
.link-no-underline,
.link-no-underline > p a{
  text-decoration: none;
}

.text-normal{
  font-style: normal;
}

/* Lists and Tables */

.list ul{

  padding-left:0px;
  margin-block: .25rem;
}


ul.checklist{
 position: relative;
}

.checklist li{
  display: flex;
  padding-left: 1.35rem;
  position: relative;
}

.checklist li:before{
  content:"";
  display: inline-flex;
  position: absolute;
  background-color:rgb(var(--blue-light));
  background-repeat:no-repeat;
  background-position: center;
  width:30px;
  height: 30px;
  border-radius: 50%;
  translate: -100% 0px;
  top: 0x;
  left:-1px;
}

.checklist li.tick:before{
  background-image: url(images/icon-tick.svg)
}

.checklist li.cross:before{
  background-image: url(images/icon-cross.svg)
}


.breadcrumbs{
  padding-bottom:calc(1rem + 1vw);
}

.breadcrumbs a:hover{
  color:rgba(var(--blue-light) );
}

.breadcrumbs .seperator{
  font-size:80%;
  scale: 100% 130%;
  position: relative;
  display: inline-block;
  translate: 0 -2px;
  padding-inline: 2px;
}


.tabs {
  display: flex;
  flex-direction: column;
  width: 200px;
}


.tabs button{
  all: unset;
  cursor: pointer;
  font-weight: 900;
  display: block;
  font-size:22px;
  line-height: 125%;
  margin-bottom:2rem;
  padding:.125rem;
  transition: 250ms ease-in-out;
}


.tabs_info > div p:first-child{
  margin-top:0;
}


.tabs button:hover{
 background-color: rgba(var(--blue-light), .15);
}


.tabs button.active {
  color: rgb(var(--blue-light));
}

.tabs_info > div {
  display: none;
}

.tabs_info > div.active {
  display: block;
}

.tabs_info ul{
  padding-left: 20px;
}

.tabs_info ul li{
  padding-left: 5px;
  margin-bottom:1rem;
}

.tabs_info li::marker {
  font-size: 1em;
}


sup{
  font-size: 60%;
}




#cat-filters{
  padding-left:0px
}

#cat-filters li{
  display: inline-block;
  /*display: inline list-item;*/

}

#cat-filters li:not(:first-child){
  margin-left:calc(1rem + 2vw);
}

#cat-filters a.selected{
  font-weight: 500;
}

#project-thumbnails .item.filter-visible{
  opacity: 1;
  transition: 500ms ease-in-out;
}

#project-thumbnails .item:not(.filter-visible),
#projects-notfound:not(.filter-visible){
 display:none;
 opacity: 0;
}



/* Feature Image */

body:not(.single-product) #featured:has(img) {
  min-height: 100dvh;
  background-color: rgb(var(--blue-indust));
}

#featured_image{
  background-color: rgb(var(--blue-deep));
}

.image-full,
#featured_image{
  min-height: 200px;
  width: 100%;
  position: relative;
}

.image-full img,
#featured_image img{
  width: 100%;
  height: 100%;
  min-height: 200px;
  object-fit: cover;
}


#featured:has(img) #featured_image_titles{
  position:absolute;
}

#featured:not(:has(img)) #featured_image_titles{
  min-height: 100vh;
}


#featured_image_titles{
  display: flex;
  margin-inline: var(--margin-inline);
  justify-content: center;  
  top: 0;
  left:0;
  right:0;
  width:100%;
  height:100%;

  max-width: fit-content;
}

.tax-products #featured_image_titles{
  max-width: 674px;

}


#featured_image_titles h1{
  text-shadow:0 3px 6px rgba(0,0,0,.15);
  text-shadow:0 1px 1px rgba(0,0,0,.85),0 3px 6px rgba(0,0,0,.25)
}

#featured_image_titles strong{
  color:rgb(var(--blue-light))
}

#featured img.attachment-post-thumbnail{
  pointer-events: none;
  height: 100dvh;
  width: 100dvw;
  object-fit: cover;
  aspect-ratio: 16/9;
}

#featured img.logo{
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  max-width: clamp(220px,50vw,500px);
  height: auto;
}


#featured summary{
  max-width: 800px;
}

.home #featured summary{
  max-width: 900px;
}

.archive #featured summary{
  max-width: 700px;
}
 
/*
#featured:before{
  content: "";
  z-index: 100;
  position: absolute;
  right:0;
  bottom:0;
  width: 212px;
  height: 100px;
  width: clamp(110px,15vw,212px);
  height: clamp(50px,6vw,100px);
  background: url( images/decoration.svg ) no-repeat;
  background-size: contain;

  translate: 0px 50%;
  margin-right: var(--margin-inline);
}

*/



/* Buttons */




#header .menu-item-15 a,
.button {
  display: flex;
  width: fit-content;
  padding-inline:  1.25rem 1.5rem;
  background-color: rgb(var(--btn-bg,--blue-light));
  color:  rgb(var(--btn-text, --white));
  border: none;
  font-weight: 400 !important;
  cursor: pointer;
  clip-path: polygon(
    0% 0%, 
    100% 0%, 
    100% calc(100% - 18px), 
    calc(100% - 18px) 100%, 
    0% 100%
  );
  transition: clip-path 250ms ease-in-out, color 400ms ease-out, background-color 400ms ease-out;
}

.button{
  padding-block: 0.5rem;
  min-width: 160px;
  text-align: center;
  align-content: center;
  justify-content: center;
}

#header  #menu-main > li.menu-item-15 > a:hover,
.button:hover {
  cursor: pointer;
  background-color:rgb(var(--btn-bg-hover, --white));
  clip-path: polygon(
    0% 0%, 
    100% 0%, 
    100% calc(100% - 0px), 
    calc(100% - 0px) 100%, 
    0% 100%
  );
  
  color: rgb(var(--btn-text-hover, --blue-deep));
}


/*
.button{
  
  position: relative;

  display: inline-flex;
  flex-basis: auto;
  align-items: center;
  justify-content: space-between;
  align-self: baseline;

  gap: 15px;
  min-width: calc(100px + 2.5vw);
  padding:.5rem 1rem .5rem 1rem;
  border-radius: 5px;

  color: var(--blue);
  font-family: var(--font-1);
  font-weight: 300;
  text-decoration: none;
  transition: 250ms ease-in-out;
}

.button,
.button input{
  --vw: 3.5vw;
  --min: 1.25rem;;
  font-size:clamp(var(--min), var(--vw),1.25rem);
  cursor: pointer;
}

.button.green{
  background-color: rgb(var(--green));

}

.button:after{
  content:"";
  display: block;
  width: 15px;
  height: 22px;
  background: var(--chevron) no-repeat 50% 55%;
  filter: brightness(0) saturate(100%) invert(71%) sepia(71%) saturate(313%) hue-rotate(40deg) brightness(98%) contrast(89%);
    
}


.button input{
  border: none;
  background: none;
  cursor: pointer;
  border: none;
  background: none;
  cursor: pointer;
  font-weight: 300;
  font-family: var(--font-1);
}

.button:active{
  translate: 1px 1px;
}


.button:hover input{
  color:rgb(var(--tan));
  background-color:none;
}


.button:hover{
  color:rgb(var(--tan));
  background-color:rgba(var(--blue));
}


.button:hover:after{
  cursor: pointer;
}

.button-circular{
  display: flex;
  position: relative;
  width:48px;
  height:48px;
  border: 1px solid rgb(var(--nav-color));
  border-radius: 50%;
  transition: 120ms ease-in-out;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}


.button-circular.button-prev{
  rotate: 180deg;
}


.button-circular:after{
  position: absolute;
  content:"";
  width:46px;
  height:30px;
  background:  var(--arrow) no-repeat 50% 50%;
  translate: -35% 0;
  transition: 250ms ease-in-out;
}

.button-circular:not(.swiper-button-disabled):hover:after{
  translate: -15% 0;
}

.button-circular:not(.swiper-button-disabled):active:after{
  translate: 1px 1px;
}
  
*/

/* Icons */

.icons picture{
  display:flex;
  justify-content: left;
  align-self: start;
  /*padding-block: clamp(1.5rem,5vw,2.5rem) clamp(1rem,5vw,1rem)*/
}

.icons.col-4 picture img{
  height: clamp(43.5px, 8vw, calc(65px + 1vw)) !important;
  width: 100% !important;
  object-fit: contain !important;
  object-position: left;
}


.icons article{
    display: flex;
    flex-wrap: column;
    flex-wrap: wrap;
    align-content: start;

}

.icons article:hover {

    cursor:copy;

  h3{
    color:rgb(var(--blue-light));
  
  }

  img{
    filter: var(--filter-blue-light);
  }

}
 
.icons article figure{
  display: flex;
  flex-flow: row;
  align-content: start;
  margin-bottom: 0;
  /*padding-inline: calc(.5rem + 1vw);*/
  /*padding-bottom: calc(1rem + 1vw);*/
}

.icons summary{
  flex: 1;
  scale:  100% 0;
  transform-origin: top center;
  transition: 250ms ease-in-out;
}

.icons summary p{
  font-size:18px;
}


.icons article:hover summary{
  scale: 100%  100%;
}

.icons .link{
  display: flex;
  width: 100%;
  justify-content: end;
  align-items: end;
}



/* Logos */

.logos picture{

}

.logos picture img{
  /*max-height: calc(120px + 1vw);*/
  max-height: clamp(100px, 7vw, calc(100px + 2vw));
  width: auto;
}


/*  Accordions  */

.accordion button{
  appearance: none;
  position: relative;
  padding-right: 54px !important;
  border: none;
  padding: 0;
  padding-right: 0px;
  background-color: transparent;
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-content: center;
  text-align: left;
  cursor: pointer;
  transition: 5ms color ease-in-out;
}

.accordion button .button-circular{
  position: absolute;
  top: 0;
  right: 0px;
  transition: .2s all ease-in-out;
}

.accordion .button-circular::after{
  width: 18px;
  margin: unset;
  rotate: 90deg;
}

.accordion button.opened .button-circular{
  rotate: -90deg !important;
}

/*.accordion button::before,*/ 
.accordion button::after {
  /*content: "";*/
  display: block;
  position: absolute;
  top: 50%;
  right: 0px;
  background-color: var(--blue);
  width: 22px;
  height: 2.5px;
  scale: 1.2;
  transition: .2s all ease-in-out;
}
  
.accordion button:not(.opened)::before {
  transform: rotate(90deg);
}


/* Colour Schemes*/

.text-white{
  color: rgb(var(--white)) !important;
}

.text-blue-deep{
  color: rgb(var(--blue-deep)) !important;
}

.text-blue-indust{
  color: rgb(var(--blue-indust)) !important;
}


.text-blue-light{
  color: rgb(var(--blue-light)) !important;
  --text-color: rgb(var(--blue-light)) !important;
}



.bg-blue-deep{
  background-color: rgb( var(--blue-deep) );

  padding-bottom: var(--section-pb, 1rem);

  --text-color: var(--white);
  --nav-color: var(--white);
  --hover-color: var(--white);
}



.bg-blue-indust{
  background-color: rgb( var(--blue-indust) );
  color:  rgb( var(--white) );

  padding-bottom: var(--section-pb, 1rem);

  --text-color: var(--white);
  --nav-color: var(--white);
  --hover-color: var(--white);
}


.bg-blue-light{
  background-color: rgb( var(--blue-light) );

  padding-bottom: var(--section-pb, 1rem);

  --text-color: var(--white);
  --nav-color: var(--white);
  --hover-color: var(--white);

  --btn-bg: var(--white);
  --btn-text:var(--blue-light);
  --btn-bg-hover:var(--blue-deep);
  --btn-text-hover:var(--white);

}


.bg-blue .border-top{
  border-color:var(--grey-light);
}



/* General*/

#wrapper  {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 100%;
}

hr,
.wrapper,
.container{
  position: relative;
  padding:0px;
  margin-inline: var(--margin-inline);
}

.wrapper-1240,
.container-1240{
  max-width: 1240px;
  margin-inline: auto;
}

section{
  position: relative;
}

section[style*=background-image]:before{
  content:"";
  position: absolute;
  left:0;
  top:0;
  width: 100%;
  height: 100%;
  background-color: rgba(var(--blue-deep), .9);
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

section.wrapper,
section.container,
section > .wrapper,
section > .container{
  padding-block: var(--padding-block);
  z-index:  1;
 /* width: 100%;*/
 width: calc(100% - (2 * var(--margin-inline)));
}

section:not(.bg-blue-indust, .bg-blue-indust > .wrapper, #featured_image, #photo){
 /* padding-block-start: 0;*/
}

/*
  #intro.wrapper,
  #intro.container{
    padding-block-start:calc(var(--padding-block) + 40px);
  }
*/

#intro_video{
  display: block;
  width: 100vw;
}

#featured_image + #intro.wrapper,
#featured_image + #intro.container{
  padding-block-start:calc(var(--padding-block) + 0px);
}


#intro h1{
  margin-top:0;
}


[class~="col"] picture img,
.col-3 picture img,
.col-4 picture img{
  /*border-radius: 10px;*/
  max-width: 100%;
  object-fit: cover;
/*  aspect-ratio: 1 / 1;*/

  width: auto;
  object-position: center;
}
/*
.col-3 picture img{
  max-height: 536px;
}
*/
.col-4 picture img{
  max-height: 430px;
}


/*  Header */

#header{
  width: 100%;
/*  height: 100dvh;*/
  padding-block:0px;
  position: relative;
  z-index: 10;
  --nav-color:  var(--blue-indust);
}

#header.bg-blue-indust{
  --nav-color:  var(--white);
}

#branding{
  width: 100%;
/*  height: 100dvh;*/
  padding-block: 25px;
  padding-inline: var(--margin-inline);
  position: relative;
  z-index: 20;
  --nav-color:  var(--blue-indust);

}


#header.bg-blue-indust #branding,
#header:has(.overlay) #branding
/*,#branding.overlay*/{
  position: absolute;
  --nav-color:  var(--white);
 
}



body #featured.overlay:has(img):before{
  transition: 250ms ease-in-out;
  background: rgba(var(--blue-deep),.8);
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}


#header .wrapper,
#header .container{
  display: flex;
  gap: 10px;
}



#site-logo{
    z-index: 1;
    transition: 200ms ease;
}



#header #site-logo img{    
  width: 196px;
  font-size: .5em;
  line-height: 110%;
  color: rgb(var(--nav-color));
}


#footer-logo img{
  width:244px;
}

#mobile-site-logo{
  z-index: 10;
}

#mobile-site-logo img{
  width: 140px;
  height: auto;
  display: none;
}

#header #site-nav{
  align-self: start;
  flex-grow: 0;
}


#header.overlay,
#header:hover{
  --nav-color:  var(--white);
}

#header nav#menu{
  
  align-self: stretch;
  flex-grow: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
 /* padding-top: 1.5rem;*/
  margin-left: auto;
  background: none;
}

#header nav#menu .menu-main-container{
  height:100%;
  width: 100%;
  max-width: 680px;
  display: flex;
  justify-content: end;
}


#menu-main{

  display: flex;
  justify-content: space-between;
  height: 100%;
  width: 100%;
  max-width: 900px;
  padding-left: 0;
  margin-block: 0;
}


#header .navToggle{
  z-index: 100;
  display: none;
  background:none;
  width:40px;
}


#menu-main .current-menu-item a, 
#menu-main .sub-menu li.current-menu-item a,
#menu-main .current-menu-parent a {
  /*font-weight: 900;*/
}

#menu-main .sub-menu{
  list-style: none;
}


 #menu-main > li > a{
  
  padding-block: 0.4rem;;
  color: rgba(var(--nav-color));
  font-family: var(--font-1);
  font-size: 18px;
  text-decoration: none;
  font-weight: 900;
  line-height: 145%;
  transition: 250ms ease-in-out;
}

#menu-main > li > a:hover{
   color: rgba(var(--nav-color-hover));
}



.navToggle .bar {
  display: block;
  background-color: rgb(var(--nav-color));
  width: 100%;
  height: 2px;
  border-radius: 5px;
  margin: 9px auto;
  transition: background-color .25s ease-in, transform .25s ease-in, width .25s ease-in, box-shadow .125s ease-in-out;  
  box-shadow: 0px 0px 4px 0px rgba(var(--black),.5);
}

.navToggle:hover .bar{

  box-shadow: 1px 1px 1px 0px rgba(var(--black),.25), 1px 1px 8px 0px rgba(var(--black),.5);
}



/*    SOCIAL ICONS    */

.social-icons{
  display: flex;
  align-items: center;
  padding-block: .5rem;
}



.social-icons a:not(:first-child){
  margin-left: 1.25rem;
}

.social-icons a{
  padding: .6rem;
  border-radius: 50%;
  background:rgb(var(--blue-light));
}

.social-icons a img{
  height: 17px;
  width: auto;
 transition: 250ms ease-in-out;
}
 

.social-icons a img:hover{
  scale: 1.2;
}



/*       CONTACT      */

#contact .social-icons{
  padding-top:.75rem;
}

#contact .social-icons img{
  filter: var(--filter-navy);
  height: 100%;
  max-height: 20px;

}


#contact .social-icons a:not(:first-child) {
  margin-left: .75rem;
}


/*  PRODUCTS */

.products a,
.product-categories a{

 position: relative;
 background-color: rgb(var(--white)); 

 /*border-top:1px solid rgba(var(--white), .5);*/
 border-bottom:1px solid rgba(var(--white), .5); 
}


.product-categories a{
  min-height: 40vw;
}

.product-thumbnails a{
 /* min-height:600px;*/
}

.product-thumbnails a:nth-child(odd){
  border-right:1px solid rgba(var(--white), .25);
}

.product-categories a:nth-child(2){
  border-left:1px solid rgba(var(--white), .25);
  border-right:1px solid rgba(var(--white), .25);

}



.products article,
.product-categories article{
  position: absolute;
  z-index: 10;
   transition: 250ms ease-in-out;

  /*background-color: rgba(var(--blue-deep), .9);*/
}

.products a picture,
.product-categories a picture{
  width: 100%;
  height: 100%;

}

.product-categories a picture{
    min-height: 40.333vw;
  overflow: hidden;
}


.product-categories a img{
  height: 100%;
  width: 100%;
}

.product-thumbnails a img{
  height: auto;
  width: 100%;
}


.product-categories a img{
    object-fit: cover;
  scale: 1.25;
  object-position: 15% center;
  transition: 350ms ease-in-out;
}

.products a:after,
.product-categories a:after{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
   opacity: 0;
  z-index: 9;
  background-color: rgba(var(--blue-deep), .9);
  mix-blend-mode: multiply;
  transition: 350ms ease-in-out;
}

.product-thumbnails{
  grid-template-columns: 50% 50%;
}

.product-thumbnails > * {
  grid-column: span 1; /* ensures it uses one column track */
}

.product-thumbnails article{
  max-width: 900px;
}

.product-thumbnails p{
   --text-color:var(--white) !important;
}

.product-thumbnails a:not(:has(img)):not(:hover) p{
  --text-color:var(--blue-indust) !important;
}

.product-thumbnails a:not(:has(img)):hover p{
  --text-color:var(--white) !important;
}



/*      ABOUT US: Team     */

.profiles article {
  max-width: 400px;
  border-bottom:1px solid rgba(var(--text-color));
}


.profiles.gap-1{
  --vw: 0vw;
  --min-gap: 1rem;
}

.profiles picture {
/*  padding-bottom: clamp(1rem,5vw,1.5rem);*/
  background-color: rgb(var(--grey)) ;
}

.profiles picture img{
  max-width: 100%;
  object-fit: cover;
  aspect-ratio: 1 / 1;
  max-height: 380px;
  width: 100%;
  object-position: center;
  
}

.profiles summary{
  position: relative;
}


.profiles h4{
  text-wrap: balance;
  margin-right: 2rem;
  /*margin-bottom: 1rem;*/
}

.profiles .fs-25{
  margin-bottom: 1.5rem;
}

.profile-bio{
  display: none;
}

/*  BIO COLLAPSE  */

.profiles button{
  position: absolute;
  padding-right: 1.75rem !important;
  border: none;
  padding: 0;
  background-color: transparent;
  display: flex;
  width: 20px;
  height: 36px;
  justify-content: space-between;
  align-content: center;
  text-align: left;
  cursor: pointer ;
  top:0px;
  right: 0px;

}


.profiles button:before,
.profiles button:after{
  content:"";
  display: block;
  position: absolute;
  top: 50%;
  right:0px;
  background-color:rgb(var(--text-color));
  width:22px;
  height: 1px;
  transition: .2s all ease-in-out;
}


.profiles button:not(.opened):before{
  transform: rotate(90deg);
}

.profiles button:hover:before,
.profiles button:hover:after{
  width:28px;
  translate: 4px 0;
}

.profiles-collapse{
  display:block;
} 
.profiles .collapsed:not(.show) {
  display: none; 
}

.profiles button img{
  transform: scale(1.2);
}

.profiles button img{
  filter:brightness(0) invert(100);
}




@media (width >= 1024px){

  /* Desktop Main Navigation */

 #branding/*,
 #header */{
  background: rgba(var(--blue-deep), 0);
  transition: 350ms ease-in-out;
 }

 
/*.tax-products #header #branding:not(:hover,.submenu-active),*/
.single-product #header:has(.overlay) #branding:not(:hover,.submenu-active){
  --nav-color:  var(--blue-indust);
}


  /*  #branding,*/
   #branding:has(#main-menu .active),
  .submenu-active,
  #branding:hover,
  #branding:focus-within,
  #branding:has(#main-menu .active),
  .submenu-active,
  #header:hover,
  #header:focus-within{
    background: rgba(var(--blue-deep),1) !important;    
    --nav-color:  var(--white);
  }


  #sub-menu-background{
    content: "";
    position: absolute;
    top:148px;
 
    left: 0px;
    right: 0;
    width: 100vw;
    height: 100vh;
    translate: 0% -100%;
    z-index: 1;
    background: rgba(var(--blue-deep));
    border-top: solid 1px rgba(var(--grey), .15);
    transform-origin: top;
    transition: 350ms ease-in-out;
    scale: 100% 0;
  }
    
  /*
  #sub-menu-background:after{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0px;
    right: 0;
    height: 15px;
    translate: 0 100%;
    background: linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,0) 100%);
  }
    */

  /*#branding + #sub-menu-background,*/
  #branding:has(#menu-main .menu-item-has-children.active) + #sub-menu-background/*,
  #branding:hover:has(#menu-main li.menu-item-has-children:hover) + #sub-menu-background*/{
    display: block;
    scale: 100% 100%;
    translate: 0;
  }


  
  
  #menu-main li{
    height: 100%;
    text-align: center;
    display: flex;
    align-content: center;
    align-items: start;    
  }

  
  #menu-main > li > a{


  }

  #mobile-back{
    display: none;
  }


  #menu-main > .menu-item-has-children > .sub-menu{
    width: min(1180px,100%);
    position: absolute;
    left: 0;
    bottom: -35px;
    
    /*background-color: rgb(var(--blue-deep));*/

    transform-origin: top;
    display: flex;
    padding-left: 0px;
    padding-left: var(--margin-inline);
    gap:calc(1rem + 3vw);

    
    opacity: 0;    
    translate:100% 0%;

    scale: 100% 0;

    /*pointer-events: none;*/

    transition:  125ms 250ms  ease-in-out opacity;
  
  }

  #menu-main > .menu-item-has-children:not(.active) > .sub-menu{
      
    /*  transition: 
    125ms  ease-out translate,
      125ms  ease-out scale,
      125ms 500ms  ease-in-out opacity;  
  */
  }
  

  /*#menu-main > .menu-item-has-children > .sub-menu:hover,*/
  #menu-main > .menu-item-has-children.active > .sub-menu,
  #menu-main > .menu-item-has-children > .sub-menu:focus
  /*#menu-main .menu-item-has-children:hover .sub-menu,
  #menu-main .menu-item-has-children:focus-within > .sub-menu,
  #menu-main .menu-item-has-children .sub-menu:hover*/{
    display: flex;
    opacity: 1;
    scale: 100% 100%;
    translate:0 100%;
    pointer-events:unset;
    transition: /* 125ms ease-in translate,125ms  ease-in-out opacity*/ ;

  }

  #menu-main .sub-menu .sub-menu{
    padding-left:0px;
  }



  #menu-main .sub-menu > li{
    padding-block: calc(.5rem + .25vw);
    text-align: left;
     position: relative;
  }

  #menu-main > .menu-item-has-children > .sub-menu > li{
    display: inline;

    width: max(210px, 35%);

  }

  
  #menu-main > .menu-item-has-children > .sub-menu > li:first-child{
    width: max(250px, 36%);
  }

    #menu-main > .menu-item-has-children > .sub-menu > li:nth-child(2){
    width: max(210px, 25%);
  }



  #menu-main .sub-menu li a{
  
    text-decoration: none;
    font-size:18px;
    color: rgb(var(--nav-color));
    font-weight: 300;
    transition: 250ms ease-in-out;
    width: 100%;
    text-align: left;
    /*padding: .65rem 0;*/
    line-height: 100%;
  }

  #menu-main .sub-menu li a:hover{

    color:rgb(var(--nav-color-hover));

  }

  #menu-main > .menu-item-has-children > .sub-menu > li > a{
    font-weight: 900;
  }

  #menu-main li.menu-item-has-children > a{
    position: relative;
  }

 
  
/*  PRODUCTS */

  .products a,
  .product-categories a{
    align-items: center;
  }

  .products a:has(img) article,
  .product-categories a:has(img) article{
      opacity: 0;
  }

  .products a:hover img,
  .product-categories a:hover img{
      opacity: .5;
  }

  .products a:hover article,
  .products a:hover:after,
  .product-categories a:hover article,
  .product-categories a:hover:after{
    opacity: 1;
  }


}




@media (width < 1024px){

  /* Mobile Main Navigation */


#mobile-site-logo img {
  display: block;
}

#site-logo img{
  max-width: 103px;
}




#header nav#menu .menu-main-container{
    position: relative;
    overflow-x: hidden;
}

#menu-main {
  display: flex;
  /*gap: calc(2vh + 15px) 0 !important;*/
  flex-wrap: wrap;
  flex-direction: column;
  padding-inline: 0px;
  --nav-color:var(--white);
  transition: all 0.3s ease;

}

#menu-main.submenu-active{
  translate: -99% 0;
}

  
#header nav#menu{

  background-color:rgb(var(--blue-deep));
  z-index: 100;
  display: flex;
  width: 100%;
  height: 100%;
  max-width: 400px;
  opacity: 0;
  position: fixed;

  flex-wrap: wrap;
  justify-content: left;
  right: 0;
  top: 0;
  padding: 2.5rem 0 0 0;
  padding-inline: calc(1rem + 2vw);

  align-items: start;
  translate: 100% 0;
  transition: all 250ms ease-in-out;
}


/*#header #menu,*/
#header #menu.active{
    translate:0 0;
    opacity: 1;
    box-shadow: 0px 0 10px 0 rgba(var(--white),0.25);
  }

  #header #menu:before{
    content:"";
    width:100%;
    height:100vh;
    position:absolute;
    right: 0;
    top: 0;
    background: rgba(var(--navy));
  }

  #header .navToggle{
    position: fixed;
    display: block;
    top:2rem;
    right: 2rem;
    cursor: pointer;
    border: 0;
  }

  #header .navToggle:hover{
    
  }

  #header .mobile-menu.active + .navToggle .bar{
    background-color: rgb(var(--white));
    height: 2px;
  }

  
  #header .mobile-menu.active + .navToggle .top {
    transform: translateY(11px) rotateZ(45deg);
  }

  #header .mobile-menu.active + .navToggle .bottom {
    transform: translateY(-11px) rotateZ(-45deg);
  }

  #header .mobile-menu.active + .navToggle .middle {
    width: 0;
  }

  #header .menu-main-container{
    z-index: 100;
    order:1;
    flex-basis: 100%;
  }

  #menu-main{
      justify-content: start;
  }




  #menu-main > li {
    display: flex;
  
  }

  #header .menu-item-15{
    padding-top: 0.75rem;
  }

  #menu-main > li > a{
    display: block;
    width: 100%;
    width: fit-content;
    /*padding-inline: calc(3rem + 2vw) calc(2rem) ;*/
    font-size: 25px;
    color:rgb(var(--white));
    text-align: left;
  }

  #header  #menu-main > li.menu-item-15 > a{
    padding-inline: 1.25rem 2rem;
    font-weight: 900 !important;
  }
  
  #mobile-back{
    z-index: 2;
    display: flex;
    width: 100%;
    padding-block: 2.5rem 2rem;
    font-size: 16px;
    font-weight: 300;
    background: none;
    border: 0;
    color: rgb(var(--nav-color));
    cursor: pointer;
    opacity: 0;
    transition: 250ms ease-in-out;
  }
        
#menu:has(.submenu-active) #mobile-back{
  opacity: 1;
}


  #menu-main .menu-item-has-children > a{
    position: relative;
  }

  #menu-main .menu-item-has-children > a:before{
    content:"";
    position:absolute;
    top:calc(50% + 5px);
    left:0px;
    width: calc(3rem + 2vw);
    height: 30px;
    
    background:var(--chevron) no-repeat;
    
    rotate: 90deg;
    transition: 250ms ease-in-out;
  }

  #menu-main .menu-item-has-children:has(.sub-menu[style*='display: block']) > a:before/*,
  #menu-main .menu-item-has-children.active > a:before*/{
  
    scale: -100% 100%;
    translate: 0 -150%;
  }

  #menu-main li,
  #menu-main .sub-menu{
    /*position: relative;  */
    flex-direction: column;
    width: 100%;
  }

  
  #menu-main > li > .sub-menu{
    padding-left:1rem;
  }



  #menu-main .sub-menu{
    max-width: 99%;
    padding-block: 0rem .25rem;
    padding-left: 0rem;
    padding-right: 0rem;
    gap:calc(1rem + 1vw);
  }

  #menu-main .sub-menu li a{
    display: inline-flex;
    align-items: center;
    font-size: 20px;
    font-weight: 400 !important;
    color: rgb(var(--nav-color));
    text-decoration: none;
    padding-block: .5rem;
    padding-right: 0rem;
    line-height: 125%;
  
  }

  #menu-main > li > .sub-menu > li > a:after{
    /*content: "\203A"; 
    margin-left: 0.5em;
    font-size: 0.9em; */
    content: "";
    display: inline-block;
    width: 0.4em;
    height: 0.4em;
    border-right: 1.35px solid rgb(var(--nav-color));
    border-top: 1.35px solid rgb(var(--nav-color));
    transform: rotate(45deg);
    margin-left: 0.5em;

  }


  #menu-main .sub-menu .sub-menu {
    /*display: none;*/
    display: none;

    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    translate: 100% 0;
  }



#menu-main .sub-menu .sub-menu.visible{
  display: block;
}

#menu-main .sub-menu .sub-menu::before {
    content: var(--submenu-label);
    display: block;
    font-weight: 900;
    margin-bottom: 0.5em;
  }



  /*  PRODUCTS */

  .products a,
  .product-categories a{
    align-items: end;
  
  }

  .products a div{
    --f-vw: 3vw;
    --f-min: 24px;
  }

  .product-categories a div{
      --f-vw: 3vw;
      --f-min: 28px;
  }

  .product-thumbnails article {
    left: 0;
    right: 0;
    margin-bottom: .5vw;
    margin-inline: auto;
  }

  .product-thumbnails a div{
    --f-vw: 2vw;
    text-align: center;
  }



  .product-thumbnails .desc,
  .product-thumbnails .button{
    display: none;
    
  }


  .product-categories article{
    margin-bottom: .5rem;
  }



}





/*      FOOTER     */


#footer{
  position: relative;
  overflow: hidden;
  
  color:#FFF;
  padding-block: calc(2.5rem + 2vw);
}



#footer .wrapper,
#footer .container{
  z-index: 1;
  
  margin-inline: var(--margin-inline);

}

#footer li,
#footer p{
  font-family: var(--font-1);
  color:rgb(var(--white));
}




#footer a{
  margin-block: 0;
  color:rgb(var(--white));
  font-family: var(--font-1);
  text-decoration: none;
  transition: 250ms ease-in-out;
}

#footer a:hover{

}



#footer-layout {
  display: flex;
  gap: calc(15px + .25vw);
}




#footer-layout > div{
  display: flex;
  flex-direction: column;
/*  border:1px solid green;*/
}

#footer-logo{
  max-width: 50%;
}

#footer-nav{
  /*  max-width: min(200px, 20%);
    max-width: max(12%, calc(100px + 3vw));*/
    flex-grow: 1;
}

#footer-menu{
  display: flex;
  width: fit-content;
  margin-inline: auto;
/*  border: 1px solid red;*/
}

#footer-menu .sub-menu{

    padding-left: 0;
}



#footer-contact{
  max-width: 25%;
  max-width: max-content
}


#footer-nav > div{

}



#footer-menu .menu{
  display: flex;
  flex-direction: column;
  /*justify-content: space-around;*/
  height: 100%;
  padding-left: 0;
  margin-block: 0px;
  list-style: none;
}

#footer-menu ul.menu > li{
  font-size: 18px;  
  font-weight: 900;
}

#footer-menu ul{
  list-style: none;
}

#footer-menu .sub-menu,
#footer-menu ul.menu li:not(:first-child){
  margin-top: .5rem;
}

#footer-menu .sub-menu li{
  font-size: 18px;  
  font-weight: 400;
}




/*

#footer-contact > p:first-child{
  margin-bottom: 1.25rem;
}

*/

#footer-menu li a:hover,
#footer-contact .text-blue-light a{
  color: rgb(var(--blue-light));
}

#footer-contact a:hover{
  color: rgb(var(--blue-misty));
  text-decoration: none;
}



#footer-legal a:not(:first-child){
  margin-left:.5rem;
}

#footer-legal a:hover{
color: rgb(var(--blue-light));
}


#footer-layout #footer-disclaimer{
  display: flex;
  flex-direction: column;
  /*flex: min-content;*/
}

#footer-social{
  padding-top: 1rem;
  display: flex;
  max-width: fit-content;
}

#footer-social a:not(:first-child){
  margin-left:1.25rem;
}

#footer-social a img{
  height: 22px;
  width: auto;

}




#designer p,
#designer a{
  margin-block: 0px;
}


.title{
  max-width: 1554px;
}




/* Swipers */




#swiper-projects{

  overflow:visible !important;

}

#swiper-projects .swiper-slide {

  max-width: 300px;

}

#swiper-projects .swiper-slide a{
  width: 100%;
  height: 100%;
  display: block;
}


.swiper picture {
/*  padding-bottom: clamp(1rem,5vw,1.5rem);*/
  background-color: rgb(var(--grey)) ;
}


#swiper-testimonials .swiper-wrapper .swiper-slide{
  transition: 250ms ease-in-out;

}

#swiper-testimonials{
  z-index: 10;
  width: 100%;
  max-width: 800px;
  overflow: unset !important;

}

#swiper-testimonials .swiper-slide {

 
  display: flex;

  blockquote,
  cite{

     max-width: 760px;
     margin-inline: auto !important

  }

}


#swiper-testimonials .swiper-navigation {
  z-index: 1000;

}

#swiper-testimonials {

  .swiper-button-prev,
  .swiper-button-next{
     color :rgb(var(--white));
     font-weight: 900;
     transition: 250ms ease-in-out;

     &:hover{
        color:rgb(var(--blue-light));
     }

  }
  
  .swiper-button-prev{
    translate: -10vw;
  }

  .swiper-button-next{
    translate: 10vw;
  }
 
}




#swiper-testimonials .swiper-slide {
}


#swiper-testimonials .swiper-wrapper .swiper-slide.swiper-slide-prev:first-child,
#swiper-testimonials .swiper-wrapper .swiper-slide:not(.swiper-slide-active){
  
  opacity: 0;
}

.swipers{

  width:  calc(100% + var(--margin-inline));
  /*padding-right: calc(.5rem + 2vw) !important;*/
}

.swiper-full{
  overflow: unset !important;
}

.swiper-button-disabled{
  opacity:0.25;
}



.swiper-navigation .button{
  height: 40px;
}

.swiper-btn-prev {
  rotate: 180deg;
}


.swiper-horizontal > .swiper-pagination-bullets, 
.swiper-pagination-bullets.swiper-pagination-horizontal{
  width: calc(100% - 100px) !important;
  margin-inline: auto;
  right: 0;
}

.swiper-pagination-bullet{
  --swiper-pagination-bullet-inactive-opacity: 1;
  --swiper-pagination-bullet-inactive-color: transparent;
  border:1px solid rgb(var(--text=color));
}

.swiper-pagination-bullet-active{
  --swiper-pagination-color: rgb(var(--text-color));
}
.swiper-button-disabled{
  opacity:0.25;
}




/* HOMEPAGE */



/*  ABOUT US: Our Story  */




/*      ABOUT US: Team     */
 
.col-4 article,
.profiles article {
  max-width: 400px;
 /* align-content: baseline;*/
  position: relative;
}


.profiles.gap-1{
  --vw: 0vw;
  --min-gap: 1.5rem;
}



.profiles summary{
  position: relative;
}


.profiles .fs-25{
  margin-bottom: 1.5rem;
}




/* Contact Form */


body.home form input[type="text"],
body.home form input[type="email"],

body.page-template-page-donation form input[type="text"],
body.page-template-page-donation form input[type="email"],

form input[type="text"],
form input[type="email"],
form input[type="tel"],
form textarea{
  appearance: none;
  all: unset;
  width: 100%;
  color: var(--text-color);
  font-size: 1.125em;
  font-family: var(--font-1);
  border: none;
  border-bottom:1px solid rgb(var(--text-color));
  padding-block:calc(.5rem + 1vw) 1.5rem;
} 


form input[type="text"]::placeholder,
form input[type="email"]::placeholder,
form input[type="tel"]::placeholder,
form textarea::placeholder{
  color:rgba(var(--text-color), .5);
  opacity: 1;
}

form input[type="text"]:focus-visible,
form input[type="email"]:focus-visible,
form input[type="tel"]:focus-visible,
form textarea:focus-visible{
  border-bottom-color:rgba(var(--text-color),.075);
  transition: 250ms ease-in-out;
}

form input[type="text"]:focus,
form input[type="email"]:focus,
form input[type="tel"]:focus,
form textarea:focus
{
  background-color:rgba(var(--text-color), .05);
  padding-left:.25rem;
}

.page-template-page-contact textarea{
  max-height: 100px;
}


form input[type="submit"]{
  appearance: none;
  all: unset;
  color: var(--text-color);
  /*font-size: 1.38889em;*/
  font-family: var(--font-1);
  border: none;  
  margin-top:1.5rem;
  cursor: pointer;
  transition: 250ms ease-in-out;
  padding: .25rem .25rem .25rem 0rem;
  user-select: none;


} 

form input[type="submit"]:hover{
  background-color:rgba(var(--text-color), .2);
  padding: .25rem;
}

form input[type="submit"]:active{
  translate:2px 2px;
}


.page-template-page-contact .wpcf7-form .wpcf7-response-output:nth-last-child(-n+4),
.page-template-page-contact .wpcf7-form .wpcf7-form-control-wrap:nth-last-child(-n+5)
{ 

    grid-column: 1 / 3; 
}



.wpcf7-not-valid-tip{
  margin-top:.5rem;
  /*color:rgb(var(--orange));*/
}

.page-template-page-contact .wpcf7-spinner{
 /* flex-basis: 50%;*/
  z-index: 10;
  opacity: 1 !important;
  width: 30px !important;
  height: 30px !important;
  margin: 0 !important;
  position: absolute !important;
  right: 12px !important;
}

.page-template-page-contact form{
  position: relative;
}

.wpcf7 form .wpcf7-response-output{
  margin: 0;
  bottom: 0;

  color: rgb(var(--text-color));
  border: 0;
  padding: 1rem 1rem;
  grid-column: 1 / 3; 
}


.wpcf7 form.invalid  .wpcf7-response-output{
  /*background: rgb(var(--orange));*/
}

.wpcf7 form[data-status="sent"] .wpcf7-response-output{
  background: rgb(var(--white));
/*  position: absolute;*/
  height: 100%;
  margin: 0 auto;
  padding-inline: clamp(1rem,5vw,calc(1rem + 5vw));

  padding-inline: 0 max(50px ,25%) !important;

  top: 0;
  left: 0;
  right: 0;
  display: table-cell;
  text-align: left;
  vertical-align: middle;
  align-content: center;
  color:rgb(var(--text-color));
  --f-min: 1.5rem;
  --f-vw: 5vw;
  font-size: clamp(var(--f-min), var(--f-vw), 1.57rem);
  line-height: 130.8%;
}

.wpcf7-form.sent .wpcf7-form-control-wrap {
  display: none;
}
  
  


.wpcf7 form[data-status="sent"] .wpcf7-response-output::before{
  /*content:"";
  position: absolute;
  display: flex;
  left:0;
  top:0;
  width: 100%;
  height: 100%;
  background-color:red;*/
}


@media (width < 1800px){

  br.br-1800,
  .br-1800 br{
    display: none;
  }
}


@media (width < 1600px){

  br.br-1600,
  .br-1600 br{
    display: none;
  }

  #footer .wrapper,
  #footer .container{
    margin-inline: var(--margin-inline);
  }



}

@media (width < 1560px){
  

}

@media (width < 1440px){

  :root{
    --margin-inline: calc(2rem + 2vw);
  }

  br.br-1440,
  .br-1440 br{
    display: none;
  }
 
  #footer .wrapper,
  #footer .container{
    margin-inline: var( --margin-inline);
  }

  h2{
    --f-min: 1.5em;
    --f-vw: 6vw;
  }


  
/*
  #site-logo img{

    max-width: clamp(150px + 5vw,200px + 5vw,20vw);
    max-width: clamp(5vw,200px + 5vw,20vw);
  }*/
  
  #header-social {
    margin-left: 2vw;
  }

  #menu-main{
    gap:1vw;
  }

  #footer-notice br{
    display: none;
  }

  #footer-contact{
    padding-right:1rem;
  }



}


@media (width < 1280px){

  .mobile-1280{
    flex-wrap: wrap;
    grid-template-columns: 100%;
  }

  .margin-inline-1280{
    margin-inline:  var(--margin-inline);
  }

  .gap-3vw-1280{
    gap:3vw;
  }

  
    #footer-layout{
    flex-wrap: wrap;
  }


  #footer-layout  #footer-logo{
    flex-basis: 100%;
    max-width: 100%;
    padding-right: 0;
    padding-bottom: 0;
  }

  #footer-menu{
    margin-inline: 0;
  }

  #footer-contact{
    max-width: max-content;
  }
  


  #footer-menu .menu-main-container {
    height: unset;
  }

.icons summary p{
  font-size:15px;
}



}

@media (width < 1200px){


}


@media (width < 1160px){

/*  #site-logo img{
    max-width: clamp(5vw,150px + 5vw,20vw);
    max-width: clamp(100px + 6vw, 5vw, 20vw);
  }
*/

  .mobile-1160{
    grid-template-columns: 100% !important;
  }



}




@media (width < 1024px){



  #branding:hover:has(#menu-main li.menu-item-has-children:hover) + #sub-menu-background,
  #sub-menu-background{
    display: none !important;
  }

  .fs-40{
    --f-vw: 5vw;
  }


  .mobile-1024{
    flex-wrap: wrap;
    grid-template-columns: 100% !important;
  }

  .col-4.mobile-1024{
    grid-template-columns: repeat( 2, minmax(calc(25% - var(--gap, 1rem)), 1fr) ) !important;

  }



  .page-template-page-contact .wpcf7-form.mobile-1024 .wpcf7-response-output:nth-last-child(-n+4), 
  .page-template-page-contact .wpcf7-form.mobile-1024 .wpcf7-form-control-wrap:nth-last-child(-n+4){
    grid-column: unset;
  }

  .mobile-1024.mobile-wrap{
    flex-basis: 100%;
  }

  .mobile-1024.mobile-reverse{
    display: flex;
    flex-direction: column-reverse;
  }

  .mobile-1024 .youtube-video iframe{
    height: auto;
  }

  .mobile-1024:not(.icons) picture{
    width: 100%;
  }

  .mobile-1024 .image-fit img{
    aspect-ratio: 16/ 9;
    object-position: center;
  }


  .icons.mobile-1024{
    grid-template-columns: repeat( 2, minmax(calc(25% - var(--gap, 1rem)), 1fr) )
  }

  .icons.mobile-1024 article figure{
    width: 100%;
  }

  .icons.mobile-1024 summary{
    scale: 100% 100%;
  }

  h4 {
    --f-vw: 5vw;
  }

  .col-2-1024,
  .col-4{
    grid-template-columns: repeat(2, 1fr);
  }


  .col-3.mobile-1024{
    grid-template-columns: repeat( 2, minmax(calc(33% - var(--gap, 1rem)), 1fr) );
  }


  .gap-2 {
    gap: clamp(.5rem,4vw,2rem);
  }


  .gap-2 {
    gap: clamp(1rem,4vw,2rem);
  }


 
    
  #swiper-testimonials  .swiper-button-prev{
  --swiper-navigation-top-offset: 100%;
    translate: 2vw;
  }

  #swiper-testimonials   .swiper-button-next{
  --swiper-navigation-top-offset: 100%;
    translate: -2vw;
  }

    

}


@media only screen and (orientation: portrait)  and (width < 1024px), (max-aspect-ratio: 3/2)  {
  
  
  

}

@media (width < 960px){

  .col-1-960 {
    display: grid;
    grid-template-columns: auto;
  }

  .col-3.mobile-960,
  .logos.col-3 {
        grid-template-columns: repeat(2, 1fr);
  }

  .mobile-960{
    flex-wrap: wrap;
    grid-template-columns: 100% !important;
    grid-column-gap: 0 !important;
  }

  .page-template-page-contact .wpcf7-form.mobile-960 .wpcf7-response-output:nth-last-child(-n+4), 
  .page-template-page-contact .wpcf7-form.mobile-960 .wpcf7-form-control-wrap:nth-last-child(-n+4){
    grid-column: unset;
  }

  #contact{
    padding-top:2rem;
    padding-left:0;

  }

}

@media (width < 960px){
  #featured_image .titles{
    margin-bottom: clamp(1rem,6vw,6rem);
    height: calc(100% - 154px);
    top:auto;
    bottom:0;
  }
}

@media (width < 840px){
  br.br-840,
  .br-840 br{
    display: none;
  }
}

@media (width < 800px){

  

}


@media (width < 767px){
  :root {
    --margin-inline: calc(1.25rem + 2vw);
    --padding-block: calc(1.5rem + 4vw);
  }

  section > .wrapper,
  section > .container {
    width: 100%;
    width: calc(100% - (2 * var(--margin-inline)));
    padding-block: var(--padding-block);
  }

  .col-2{
    display: grid;
    grid-template-columns: auto;
  }

  
  .col-3:not(.products, .product-categories) {
        grid-template-columns: repeat(2, 1fr);
  }

  
  .mobile-767{
    flex-wrap: wrap;
    grid-template-columns: 100%;
  }

  

  .reveal-767{
    display: block;
  }


  .wpcf7 form .wpcf7-response-output,
  .mobile-767.wpcf7-form .wpcf7-form-control-wrap:nth-last-of-type(-n+2) {
    grid-column: unset;
  }

  .mobile-767.mobile-wrap{
    flex-basis: 100%;
  }

  .mobile-767.mobile-reverse{
    display: flex;
    flex-direction: column-reverse;
  }



  .col-2-767{
    grid-template-columns: repeat( 2, minmax(50%, 1fr) );
  }

  .col-2-767 article:last-child{
    grid-column: 1 / span 2;
    margin-bottom: 0;
  }



  .image-scale-767,
  .image-scale-767 > img{
    --image-mw: 100%;
    height: auto;
    width: 100%;
    max-width: var(--image-mw);
  }

  .align-self-start-767{
    align-self: start;
  }

  .align-self-center-767{
    align-self: center;
  }

  .title_overlay{
    padding-block: var(--padding-block);
  }


  .tabs{
    display: flex;
    width: 100%;
    flex-direction: row;
    gap: calc(.5rem + 1vw);
  }

  .tabs .col{
    display: block;
  }

  .tabs button{
    margin-bottom: 1rem;
  }

  
  .product-thumbnails article{
    margin-bottom: .5rem;
  }



  .wpcf7 form[data-status="sent"] .wpcf7-response-output{
    align-content: end;
  }


  #designer p{
    text-align: left;
    margin-top: .5rem;
  }

}

 

@media (width < 640px){

  .mobile-640{
    flex-wrap: wrap;
    grid-template-columns: 100%;
    --column-left:100%;
  }

  #capabilities #stats{
    width: 100%;
  }

}


@media (width < 600px){

  html{
    margin-top: 0px !important;
  }

  #wpadminbar{
    position: relative;
  }
  
  .mobile-600{
    flex-wrap: wrap;
    grid-template-columns: 100%;
  }
  

  br.br-600,
  .br-600 br{
    display: none;
  }

  .mobile-600{
    flex-wrap: wrap;
    grid-template-columns: 100% !important;
    grid-column-gap: 0 !important;
  }

  .wpcf7-form.mobile-600 .wpcf7-response-output:nth-last-child(-n+4), 
  .wpcf7-form.mobile-600 .wpcf7-form-control-wrap:nth-last-child(-n+5){
    grid-column: unset !important;
  }





  #footer-logo img{
    max-width: 130px;
  }

  #footer-nav{
    max-width:100%;
  }

  #footer-menu{
    width: 100%;
  }

  #footer-menu ul.menu > li,
  #footer-menu .sub-menu li {
    font-size: 15px;
  }

  #footer-contact{
        
    flex-basis: 100% !important;
  }


  .col-3.mobile-600{
    grid-template-columns: auto;
  }

  .col-4.mobile-1024 {
    grid-template-columns: repeat( 1, minmax(calc(25% - var(--gap, 1rem)), 1fr) ) !important;
  }


  #featured_image h1.mb-1{
    --mb-vw: 2vw + 5px;
  }
  


  #swiper-testimonials  .swiper-button-prev{
      translate: 2vw 35px;
    }

  #swiper-testimonials  .swiper-button-next{
    translate: -2vw 35px;
  }


    
  .col-3.products,
  .col-3.product-categories{
      grid-template-columns: 100%;
  }



  
  #swiper-testimonials .swiper-wrapper{
    /*flex-wrap: wrap;*/
  }


  #swiper-testimonials .swiper-wrapper .swiper-slide{
    width: 100% !important;
  }

  #swiper-testimonials .swiper-wrapper .swiper-slide:not(:last-child){
   /* padding-bottom: 1rem;*/
  }

  hr.decoration{
    margin-top: 1rem;
    margin-bottom: .5rem;
  }

  #cat-filters{
    text-align: center;
  }


}


@media (width < 480px){

  :root{
    --margin-line: calc(1rem + 2vw);
  }

  h2 {
    --f-vw: 6vw;
  }

  h4 {
    --f-vw: 10vw;
  }

  .mobile-480{
    flex-wrap: wrap;
    grid-template-columns: 100%;
  }

  .col-3.mobile-480,
  .col-4{
    grid-template-columns: 100%;
  }

  .text-col-2 {
    column-count: 1;
  }

  #header #menu{
    max-width: 100%;
  }


  .button input{
    margin-bottom: -2px;
  }



  .tabs button{
    font-size: 18px;
  }

  .wpcf7 form[data-status="sent"] .wpcf7-response-output{
    padding-inline: 1vw;
  }

  a[href^="mailto:"]{
    word-break: break-word;
  }

  .icons.mobile-480{
    grid-template-columns: 100%;
  }

  .icons.mobile-480 article figure{
    width: 100%;
  }

}

@media (width < 360px){

  #social-share{
    flex-wrap: wrap;
  }


  h1,h2,h3{
    
  /*  word-break: break-word;*/
    hyphens: auto;
  }

}