/* ========================================
   SJ TEX MEMBRANE TECHNOLOGY - PAGE SPECIFIC STYLES
   ======================================== */

/* ========================================
   PAGE BACKGROUND
   ======================================== */

.tech-page--sj-tex {
  background-image: url(/assets/images/rectangle-14-2.png);
}

/* ========================================
   FEATURE ICONS
   ======================================== */

/* Feature Icons Base */
.tech-feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Waterproof Icon */
.tech-feature-icon--waterproof {
  width: 135px;
  height: 105px;
  flex-direction: column;
}

.waterproof-icon__drops {
  width: 122px;
  height: 30px;
}

.waterproof-icon__container {
  width: 135px;
  height: 75px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.waterproof-icon__stream {
  position: absolute;
  width: 6px;
  height: 24px;
  top: 51px;
  left: 64px;
}

.waterproof-icon__shield {
  width: 135px;
  height: 65px;
}

/* Breathable Icon */
.tech-feature-icon--breathable {
  width: 141px;
  height: 118px;
  position: relative;
}

.breathable-icon__element {
  position: absolute;
}

.breathable-icon__top-line {
  width: 141px;
  height: 19px;
  top: 41px;
  left: 0;
}

.breathable-icon__vapor {
  width: 15px;
  height: 118px;
  top: 0;
}

.breathable-icon__vapor--1 {
  left: 33px;
}

.breathable-icon__vapor--2 {
  left: 64px;
}

.breathable-icon__vapor--3 {
  left: 94px;
}

.breathable-icon__bottom-line {
  width: 141px;
  height: 26px;
  top: 60px;
  left: 0;
}

.breathable-icon__center-bar {
  width: 86px;
  height: 6px;
  top: 54px;
  left: 27px;
}

/* PFAS-Free Icon */
.tech-feature-icon--pfas {
  width: 128px;
  height: 128px;
  background-image: url(/assets/svg/vector-34.svg);
  background-size: 100% 100%;
}

.pfas-icon__inner {
  position: relative;
  width: 96px;
  height: 93px;
  background-image: url(/assets/svg/vector-35.svg);
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pfas-icon__text {
  position: absolute;
  width: 72px;
}

.pfas-icon__text--top {
  height: 24px;
  top: 20px;
  left: 12px;
}

.pfas-icon__text--bottom {
  height: 25px;
  top: 50px;
  left: 12px;
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

/* Fix overflow issue for tablet range (769px - 1346px) */
@media (max-width: 1346px) {
  .tech-features__grid {
    flex-wrap: wrap;
    justify-content: center;
  }

  .tech-features__item {
    flex: 0 1 calc(50% - 20px);
  }

  .tech-explore__gallery {
    flex-wrap: wrap;
    justify-content: center;
  }

  .tech-explore__image {
    flex: 0 1 calc(50% - 14px);
  }
}