[class$="hidden"] {
  display: none;
}

main { overflow: unset; }

a.external {
  word-break: break-all;
}

/* Related Products Tab */
div.product-brochure-download {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #dbdbdc;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  flex-flow: wrap;
}

div.product-brochure-download p {
  flex-basis: 70%;
  margin-bottom: 0;
}
/* End: Related Products Tab */

/* Table in Related Products Tab */
.product-table {
  border-collapse: collapse;
  font-family: 'OpenSans-SemiBold', sans-serif;
  letter-spacing: 0.5px;
}
.product-table th {
  background: #0C0C12;
  color: #FFFFFF;
  padding: 1rem 1.5rem;
  border: 1px solid #0C0C12;
}
.product-table tr {
  border: 1px solid #DBDBDC;
}
.product-table td {
  text-align: center;
  padding: 1rem 1.5rem;
  border: 1px solid #DBDBDC;
}
.product-table td:first-of-type {
  text-align: left;
}
.product-table td.green-yes {
  color: #0D7301;
}
.product-table td.grey-no {
  background: rgba(219, 219, 220, 0.4);
  color: #0C0C12;
}
.product-table .product {
  width: 300px;
}
.product-table .feature {
  width: 200px;
}
.product-table .prod-1 {
  width: 190px;
}
.product-table .prod-2,
.product-table .prod-3 {
  width: 140px;
}
@media only screen and ( max-width: 767px ) {
  .product-table {
    font-size: 10px;
  }
  .product-table td,
  .product-table th {
    padding: 1rem 0.2rem;
  }
  .related-products .col + .col {
    margin-block-start: 2rem;
  }
  .related-products h4 {
    margin-block-end: 0.5rem;
  }
}
/* End: Table in Related Products Tab */

.img-wrapper {
  margin-bottom: 2rem
}

.collapse--item {
  max-height: 0;
  overflow: hidden;
  transition: 0.3s max-height ease-in-out
}

[id*="collapse"]:checked~div .collapse--item {
  max-height: 250rem
}

.product label.angle-down {
  margin-top: 1rem;
  display: inline-block;
  color: #007BC6;
  cursor: pointer;
}

.product label.angle-down:after {
  content: url("/wp-content/themes/kla-wp/assets/images/contact-scroll-down.svg");
  padding-left: 1ch;
  width: 2.8rem;
  height: 2rem;
  display: inline-block;
}

.product input:checked~.flex label.angle-down:after {
  transform: rotate(180deg);
  margin-left: 1rem;
  transform-origin: center;
}

.product .btn {
  margin-top: 1rem;
}

.collapse--item.mobile-hide {
  text-align: center;
  margin-top: 2rem;
}

.filter .btn {
  margin-top: 1rem
}

.product-wrapper {
  position: relative;
}

#overlay {
  content: '';
  z-index: 9;
  background: white;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  transition: 0.3s opacity ease-in-out;
  opacity: 0;
}

#overlay.overlay-active {
  opacity: 1;
  transition: none;
}

.select select {
  min-width: 25rem
}

.tabs .h4 {
  color: #007BC6;
  line-height: 3.2;
}

.tabs .h4:hover {
  color: #02588D;
  border-bottom: 6px solid #02588D;
}

.tabs .active {
  color: #490083 !important;
  border-bottom: 6px solid #D395E8 !important;
  pointer-events: none;
}

.tabs label:not(:last-of-type) {
  margin-right: 1.5rem;
  letter-spacing: -0.1px;
}

.services-table {
  border-collapse: separate;
  border-spacing: 0 2rem;
  margin-top: -2rem;
}

.tab-purple{ color: #41007F; }

.tab-list, .disc {
  margin: revert;
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding: unset;
  list-style: unset;
  list-style-type: disc;
  list-style-position: outside;
}

.tab-list li {
  margin-left: 2rem;
}

.tab-list > * + * {
  margin-top: 1rem;
}

[lang="en"] .en-width {
  min-width: 135px;
}
.btn.magna-jetext {
  min-width: 205px;
}

@media only screen and (min-width: 768px) {
  .tabs {
    margin: 0 -3rem 3rem;
    padding: 0 3rem;
    border-bottom: 1px solid #DBDBDC;
  }
}

@media only screen and (min-width: 1024px) {

  .filter h3,
  .filter .select select,
  .filter p {
    margin-bottom: 0;
  }

  .filter p {
    margin-left: auto;
  }

  .filter h3 {
    margin-right: 2rem;
  }

  .filter .btn {
    margin-left: 1rem;
    margin-top: 0;
  }

  .tabs {
    margin: 0 -4rem 4rem;
    padding: 0 4rem;
  }

  .tabs label:not(:last-of-type) {
    margin-right: 2rem;
    letter-spacing: 0;
  }
}

@media only screen and (min-width: 1480px) {
  .tabs {
    margin: 0 -5rem 5rem;
    padding: 0 5rem;
  }
  .tabs .h4 {
    line-height: 3;
  }
  [lang="en"] .en-width {
    min-width: 160px;
  }
}

/* Redesign - Products Page 11/14/2022 */

/* Product Card */

.product__contact-link {
  align-items: center;
  background: #007BC6;
  border-radius: 50%;
  display: flex;
  height: 4rem;
  justify-content: center;
  position: absolute;
  right: 2rem;
  top: 2rem;
  transition: 0.3s background ease-in-out;
  width: 4rem;
}

.product__contact-link:hover {
  background: #02588D;
}

.card.product h2 {
  margin-inline-end: 6rem;
}

.product-card-wrapper {
  width: 100%;
}

/* Contact Banner */

#contact-banner[data-herobtn="hidden"] {  
  bottom: 0;
  overflow: visible;
  position: sticky;
}

#full-width-banner {
  overflow: visible;
}

/* Products Page */

/* Category Filter */
menu {
  margin: 0;
  padding: 0;
}

:where(.category-select,.category-language-select) {
  position: relative;
}
.select-hide {
  display: none;
}
.selectify-clicker,
.selectify .options-list .option { padding: 1.5rem 2.7rem; }
.select:where(.category-select,.category-language-select):after { display: none; }

.selectify ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.selectify menu a,
.selectify menu a:visited {
  color: #0C0C12 ;
}

.selectify menu .option:hover a,
.selectify menu .option:focus a,
.selectify menu a:hover,
.selectify menu a:is(:visited:hover) {
  color: white;
}

/*
 * Selectify Styling
 *
 */
 .selectify {
  position: relative;
  /*margin-top: 0.5rem;*/
}
.selectify-clicker {
  display: block;
  padding: 1.15rem 3ch 1.15rem 1ch;
  border: solid 0.0625rem rgba(72, 77, 80, 0.3);
}
.not-valid .selectify-clicker, .frm_blank_field  .selectify-clicker {
  color: red;
  border-color: red;
}
.selectify .options-list {
  display: none;
  position: absolute;
  top: 5.5rem;
  background: #fff;
  width: 100%;
  border: 0.1rem solid #ccc;
  overflow: hidden;
  /* max-height: 80vh; */
  z-index: 100;
  box-shadow: 0 1rem 3rem rgba(0,0,0,0.2);
  height: 20rem;
}
.selectify .options-list-inner {
  height: inherit;
  overflow-y: auto;
}
.selectify .options-list .option {
  padding: 0.8rem 1rem;
  margin: 0 0 0.1rem 0;
}
.selectify .options-list .option:hover,
.selectify .options-list .option:focus {
  background: #0089C4;
  color: #fff;
}
.selectify-icon {
  display: inline-block;
  width: 1.2rem;
  height: 1.2rem;
  opacity: 0.6;
  margin-left: 0.8rem;
}

.selectify {
  /* font-family: 'OpenSans-SemiBold', sans-serif; */
  font-size: 1.6rem;
  margin-top: 0;
  width: 32rem;
  height: 100%;
  text-align: center;
}

.selectify-clicker {
  background: #FFFFFF;
  color: #0C0C12;
  cursor: pointer;
  height: 4.9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.selectify-clicker::after {
  content: '';
  width: 12px;
  height: 8px;
  display: block;
  background-image: url(/wp-content/themes/kla-wp/assets/images/arrow-down-grey.svg);
  margin-left: 9px;
  margin-top: 2px;
  transition: 0.2s ease-in-out;
}

.selectify .options-list {
  background: #FFFFFF;
  color: #0C0C12;
  height: auto;
  cursor: pointer;
  top: 100%;
  border: 0;
}

.selectify .options-list .option {
  font-family: OpenSans, sans-serif;
  display: flex;
  justify-content: left;
  align-items: center;
  margin-bottom: 0;
}
.selectify-clicker,
.selectify .options-list .option {
  padding: 1.5rem 3rem;
}
.category-language-select .selectify .options-list .option:not(:first-of-type) {
  padding: 0;
}
.category-language-select .selectify .options-list .option a {
  padding: 1.5rem 3rem;
  width: 100%;
  text-align: left;
}
.selectify .options-list .option + .option {
  border-top: 1px solid #A19CAE;
}
.selectify.selectify-open .selectify-clicker::after {
  transform: rotate(180deg);
}
:where(.category-select, .category-language-select) svg {
  position: absolute;
  top: calc(50% - 0.2ch);
  pointer-events: none;
  right: 1.75rem;
}

.card.filter {
  background: transparent;
  box-shadow: none;
  display: flex;
  justify-content: center;
  overflow: visible;
  padding: 0;
  margin: 0 0 5rem;
  gap: clamp(16px, calc(1rem + ((1vw - 3.2px) * 5.5172)), 80px);
}

.card.filter > [class*="col-"] + [class*="col-"] {
  margin: 0;
}

.card.filter .filter-heading {
  align-items: center;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 100%);
  border: 1px solid rgba(72, 77, 80, 0.3);
  display: flex;
  justify-content: center;
  min-width: 32rem;
  min-height: 4.9rem;
}

.card.filter .filter-heading h4 { margin: 0; }

.card.product{
  z-index: 0;
}
.card.product::after {
  content: '';
  display: block;
  left: 0;
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
  background: url('/wp-content/uploads/product-card-background.png'), #FFFFFF;
  background-position: top right;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: -1;
}

.card.product[data-bg='grey']::after { background: no-repeat url('/wp-content/uploads/product-bg-grey.png'), #FFFFFF; }
.card.product[data-bg='red']::after { background: no-repeat url('/wp-content/uploads/product-bg-red.png'), #FFFFFF; }
.card.product[data-bg='orange']::after { background: no-repeat url('/wp-content/uploads/product-bg-orange.png'), #FFFFFF; }
.card.product[data-bg='blue']::after { background: no-repeat url('/wp-content/uploads/product-bg-blue.png'), #FFFFFF; }
.card.product[data-bg='purple']::after { background: no-repeat url('/wp-content/uploads/product-bg-purple.png'), #FFFFFF; }

.card.product article[role='tab'] img {
  display: block;
  width: 100%;
}

.card.product::before {
  background: linear-gradient(90deg, #3C007F 0%, #007BC6 100%);
  content: '';
  display: block;
  height: 1rem;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.card.product a * { pointer-events: none; }

.full-width-product-banner {
  background-position: center;
  height: auto;
  padding: 0 2rem;
}

.full-width-product-banner .inner {
  padding: 8rem 0;
}

.full-width-product-banner h1,
.full-width-product-banner p {
  color: #FFFFFF;
}

/* Contact Us Dropdown */
.contact-us-dropdown {
  position: relative;
  width: 240px;
  z-index: 1;
}
.contact-us-dropdown .contact-us-dropdown-button {
  align-items: center;
  display: flex;
  font-family: 'OpenSans-SemiBold', sans-serif;
  gap: 1rem;
  height: 5.2rem;
  justify-content: center;
  width: 100%;
}
.contact-us-dropdown .contact-us-dropdown-button::after {
  content: url(/wp-content/themes/kla-wp/assets/images/icons/arrow-down-white.svg);
  display: block;
  transition: 0.2s ease-in-out;
  width: 1.3rem;
}
.contact-us-dropdown .contact-us-dropdown-sub {
  background: #007BC6;
  position: absolute;
  width: 100%;
}
.contact-us-dropdown .contact-us-dropdown-sub li a {
  color: #FFFFFF;
  display: flex;
  justify-content: center;
  padding: 1.5rem 4rem;
  width: 100%;
}
.contact-us-dropdown .contact-us-dropdown-sub li a:hover {
  background: #02588D;
}
.contact-us-dropdown .contact-us-dropdown-sub li {
  border-top: 1px solid #4c99cf;
}

/* Banner Contact Us */
#banner-contact-us .contact-us-dropdown-button {
  background: #41007F;
}
#banner-contact-us .contact-us-dropdown-button:hover {
  background: #900FB7;
}
#banner-contact-us .contact-us-dropdown-sub {
  bottom: 5.2rem;
  background: #41007F;
}
#banner-contact-us .contact-us-dropdown-sub li {
  border-top: none;
  border-bottom: 1px solid #D395E8;
}
#banner-contact-us .contact-us-dropdown-sub li a:hover {
  background: #900FB7;
}

/* Tabs */
article[role='tab'] h4 {
  color: #0C0C12;
}
article[role='tab'] p {
  /* margin-bottom: 4rem; */
}
.angle-down {
  font-family: 'OpenSans-SemiBold', sans-serif;
}

/* State Changes */
.contact-us-dropdown[data-dropdown="closed"] .contact-us-dropdown-sub:not(:focus):not(:active) {
  clip: rect(0 0 0 0); 
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
}
.contact-us-dropdown[data-dropdown="open"] .contact-us-dropdown-button::after {
  transform: rotate(180deg);
}

/* Media Queries */
@media only screen and ( min-width: 768px ) and ( max-width: 1023px) {
  #contact-banner[data-position="fixed"] {
    max-width: calc(100% - 4rem);
  }
}

@media only screen and ( min-width: 768px ) {
  h2, .h2 {
    margin-bottom: 2rem;
  }
  h2 + h4 {
    margin-bottom: 3rem;
  }
  .full-width-product-banner {
    margin-block-start: 2rem;
  }
  .product__contact-link {
    top: 3rem;
    right: 3rem;
  }
}

@media only screen and ( min-width: 1024px) and (max-width: 1480px) {
  .selectify {
    width: 22rem;
  }
  .selectify .option {
    text-align: left;
  }
  .card.filter .filter-heading {
    min-width: 22rem;
  }
}

@media only screen and ( min-width: 1024px ) {
  .full-width-product-banner {
    margin-block-start: 5rem;
  }
  
  .product__contact-link {
    top: 4rem;
    right: 4rem;
  }
}

@media only screen and ( min-width: 1480px ) {
  .product__contact-link {
    top: 5rem;
    right: 5rem;
  }
}