:root {
  --_kurita---k-light-blue-gray: #e9eff2;
  --_kurita---k-dark-grey: #353c41;
  --_kurita---white: white;
  --_kurita---k-light-teal: #53c3c5;
  --_kurita---k-blue: #0069c8;
  --_kurita---k-cyan: #00afec;
  --_kurita---k-dark-blue: #005d8c;
  --_kurita---k-slate: #254356;
  --_kurita---k-dark-teal: #078392;
  --_kurita---k-green: #96c748;
  --_kurita---k-autum-red: #e03d00;
}

.w-layout-hflex {
  flex-direction: row;
  align-items: flex-start;
  display: flex;
}

body {
  background-color: var(--_kurita---k-light-blue-gray);
  color: var(--_kurita---k-dark-grey);
  font-family: Noto Sans, sans-serif;
  font-size: 21px;
  line-height: 1.2em;
}

h1 {
  color: var(--_kurita---white);
  margin-top: 0;
  margin-bottom: 0;
  font-size: 26px;
  font-weight: 600;
  line-height: 1em;
}

.p-wrap {
  background-image: url('../images/Waves.svg');
  background-position: 100% 100%;
  background-repeat: no-repeat;
  background-size: contain;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  padding: 30px;
  display: flex;
}

.p-content-wrap {
  background-color: var(--_kurita---white);
  width: 100%;
  height: 100%;
  position: relative;
  box-shadow: 0 0 20px #0000004d;
}

.copyright {
  color: var(--_kurita---k-light-teal);
  text-align: right;
  font-size: 10px;
  line-height: 1em;
  position: absolute;
  top: auto;
  bottom: 30px;
  left: 30px;
}

.p-content {
  flex-flow: column;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  inset: 0%;
}

.nav-bar {
  background-color: var(--_kurita---k-blue);
  justify-content: flex-start;
  align-items: center;
  padding: 20px 30px;
  display: flex;
  position: relative;
}

.logo {
  width: 200px;
  margin-bottom: 4px;
}

.divider {
  background-color: var(--_kurita---k-cyan);
  width: 1px;
  height: 100%;
  margin-left: 22px;
  margin-right: 22px;
}

.h-intro {
  padding: 10px 30px;
  font-size: 15px;
}

.h-grid {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  flex: 1;
  justify-content: space-between;
  align-items: stretch;
  padding: 0 30px 75px;
}

.h-system-card {
  border: 1px solid var(--_kurita---k-light-blue-gray);
  background-color: var(--_kurita---white);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  flex-flow: column;
  flex: 1;
  text-decoration: none;
  transition: box-shadow .5s ease-in-out;
  display: flex;
}

.h-system-card:hover {
  box-shadow: 0 0 20px #25435680;
}

.h-system-image {
  background-image: url('https://d3e54v103j8qbb.cloudfront.net/img/background-image.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  flex: 1;
  margin: 14px;
}

.h-system-image.ut {
  background-image: url('../images/Unified-Treatment-System-CLEAN.webp');
}

.h-system-image.vp {
  background-image: url('../images/Ver-Pressure-System-CLEAN.webp');
}

.h-system-image.ie {
  background-image: url('../images/Ion-Exchange-CLEAN.webp');
}

.h-system-image.up {
  background-image: url('../images/Hor-Pressure-System-CLEAN.webp');
}

.h-system-image.clr {
  background-image: url('../images/CLR-CLEAN.webp');
}

.h-system-description {
  background-color: var(--_kurita---k-dark-blue);
  color: var(--_kurita---white);
  height: 60%;
  padding: 30px 20px 20px;
  font-size: 13px;
  line-height: 1.3em;
  overflow: auto;
}

.h-system-name {
  margin-bottom: 13px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2em;
}

.nav-buttons {
  display: flex;
  position: absolute;
  inset: 0% 0% 0% auto;
}

.home-button {
  background-color: var(--_kurita---k-slate);
  color: var(--_kurita---white);
  justify-content: center;
  align-items: center;
  height: 100%;
  padding-left: 30px;
  padding-right: 30px;
  font-size: 16px;
  line-height: 1em;
  text-decoration: none;
  transition: opacity .2s, background-color .5s;
  display: flex;
}

.home-button:hover {
  background-color: var(--_kurita---k-light-teal);
  color: var(--_kurita---k-dark-grey);
}

.home-button.w--current:hover {
  background-color: var(--_kurita---k-dark-grey);
}

.dropdown-toggle {
  color: var(--_kurita---white);
  justify-content: flex-start;
  align-items: center;
  height: 100%;
  padding-left: 22px;
  font-size: 16px;
  line-height: 1em;
  display: flex;
}

.dropdown {
  background-color: var(--_kurita---k-dark-teal);
}

.dropdown-list {
  background-color: #ddd;
}

.dropdown-list.w--open {
  background-color: var(--_kurita---k-dark-teal);
  color: var(--_kurita---white);
  font-size: 16px;
  font-weight: 300;
  line-height: 1em;
}

.dropdown-link {
  border-bottom: 1px solid var(--_kurita---k-light-teal);
  color: var(--_kurita---white);
  padding-top: 18px;
  padding-bottom: 18px;
  font-size: 14px;
  transition: background-color .5s;
}

.dropdown-link:hover {
  background-color: var(--_kurita---k-slate);
}

.dropdown-link.w--current {
  background-color: var(--_kurita---k-light-teal);
  color: var(--_kurita---white);
  text-decoration: none;
}

.project-landing {
  background-image: url('https://d3e54v103j8qbb.cloudfront.net/img/background-image.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto 90%;
  flex: 1;
  width: 100%;
  padding: 30px 30px 60px;
  position: relative;
}

.project-landing.ut {
  background-image: url('../images/Unified-Treatment-System-CLEAN.webp');
  background-size: auto 80%;
}

.project-landing.hpf {
  background-image: url('../images/Hor-Pressure-System-CLEAN.webp');
  background-size: auto 70%;
}

.project-landing.vpf {
  background-image: url('../images/Ver-Pressure-System-CLEAN.webp');
  background-size: auto 70%;
}

.project-landing.ie {
  background-image: url('../images/Ion-Exchange-CLEAN.webp');
  background-size: auto 70%;
}

.project-landing.c {
  background-image: url('../images/CLR-CLEAN.webp');
  background-size: auto 70%;
}

.project-landing-button {
  background-color: var(--_kurita---k-blue);
  color: var(--_kurita---white);
  border-radius: 400px;
  justify-content: center;
  align-items: center;
  padding: 15px 30px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1em;
  text-decoration: none;
  transition: background-color .5s;
  display: flex;
  position: absolute;
  inset: 0% auto auto 0%;
}

.project-landing-button:hover {
  background-color: var(--_kurita---k-dark-grey);
}

.project-landing-button.ut1 {
  background-color: var(--_kurita---k-blue);
  top: 21%;
  left: 15%;
}

.project-landing-button.ut2 {
  background-color: var(--_kurita---k-dark-teal);
  top: 52%;
  left: 21%;
}

.project-landing-button.ut3 {
  background-color: var(--_kurita---k-cyan);
  top: 76%;
  left: 33%;
}

.project-landing-button.ut4 {
  background-color: var(--_kurita---k-slate);
  top: 75%;
  left: 74%;
}

.project-landing-button.ut5 {
  background-color: var(--_kurita---k-green);
  top: 21%;
  left: 60%;
}

.project-landing-button.hpf1 {
  background-color: var(--_kurita---k-blue);
  top: 26%;
  left: 15%;
}

.project-landing-button.hpf2 {
  background-color: var(--_kurita---k-dark-teal);
  top: 52%;
  left: 11%;
}

.project-landing-button.hpf3 {
  background-color: var(--_kurita---k-cyan);
  top: 71%;
  left: 25%;
}

.project-landing-button.hpf4 {
  background-color: var(--_kurita---k-slate);
  top: 55%;
  left: 68%;
}

.project-landing-button.hpf5 {
  background-color: var(--_kurita---k-autum-red);
  top: 21%;
  left: 72%;
}

.project-landing-button.hpf6 {
  background-color: var(--_kurita---k-green);
  position: absolute;
  top: 85%;
  left: 52%;
}

.project-landing-button.hpf7 {
  background-color: var(--_kurita---k-dark-teal);
  top: 52%;
  left: 82%;
}

.project-landing-button.hpf8 {
  background-color: var(--_kurita---k-light-teal);
  top: 80%;
  left: 39%;
}

.project-landing-button.vpf2 {
  background-color: var(--_kurita---k-dark-teal);
  top: 52%;
  left: 17%;
}

.project-landing-button.vpf1 {
  background-color: var(--_kurita---k-blue);
  top: 26%;
  left: 15%;
}

.project-landing-button.vpf3 {
  background-color: var(--_kurita---k-cyan);
  top: 77%;
  left: 30%;
}

.project-landing-button.vpf4 {
  background-color: var(--_kurita---k-slate);
  top: 61%;
  left: 66%;
}

.project-landing-button.vpf5 {
  background-color: var(--_kurita---k-dark-teal);
  top: 47%;
  left: 73%;
}

.project-landing-button.vpf6 {
  background-color: var(--_kurita---k-autum-red);
  top: 21%;
  left: 68%;
}

.project-landing-button.ie1 {
  background-color: var(--_kurita---k-blue);
  top: 26%;
  left: 15%;
}

.project-landing-button.ie2 {
  background-color: var(--_kurita---k-dark-teal);
  top: 52%;
  left: 16%;
}

.project-landing-button.ie3 {
  background-color: var(--_kurita---k-light-teal);
  top: 80%;
  left: 39%;
}

.project-landing-button.ie4 {
  background-color: var(--_kurita---k-green);
  top: 52%;
  left: 74%;
}

.project-landing-button.ie5 {
  background-color: var(--_kurita---k-green);
  top: 38%;
  left: 72%;
}

.project-landing-button.c1 {
  background-color: var(--_kurita---k-blue);
  top: 34%;
  left: 24%;
}

.page-name {
  color: var(--_kurita---white);
  margin-top: 0;
  margin-bottom: 0;
  font-size: 21px;
  font-weight: 300;
  line-height: 1em;
}

.video-player {
  background-color: #f8f8f8;
  flex: 1;
  justify-content: center;
  align-items: center;
  display: flex;
}

.html-embed {
  width: 80%;
  position: absolute;
}

.system-link {
  text-decoration: none;
}

.system-name-link {
  font-size: 21px;
  transition: color .5s;
}

.system-name-link:hover {
  color: var(--_kurita---k-light-teal);
}

.k-link {
  transition: opacity .5s;
}

.k-link:hover {
  opacity: .75;
}

.kurita-logo {
  width: 130px;
  position: absolute;
  inset: auto 30px 20px auto;
}

.heading {
  font-size: 21px;
}

.intro-wrap {
  background-image: url('../images/Water-Backdrop.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  display: flex;
  position: relative;
}

.intro-container {
  justify-content: center;
  align-items: center;
  width: 75%;
  display: flex;
}

.intro-tonka {
  width: 370px;
}

.intro-divider {
  background-color: var(--_kurita---white);
  opacity: .32;
  flex: 0 auto;
  width: 1px;
  height: 290px;
  margin-left: 52px;
  margin-right: 52px;
}

.intro-h1 {
  margin-bottom: 30px;
  font-size: 40px;
  line-height: 1.1em;
  display: block;
}

.explore-btn {
  background-color: var(--_kurita---k-light-blue-gray);
  color: var(--_kurita---k-blue);
  border-radius: 20px;
  padding: 38px;
  font-weight: 700;
  text-decoration: none;
  position: relative;
}

.k-intro-logo {
  width: 100px;
  position: absolute;
  inset: auto 40px 40px auto;
}

.click {
  width: 50px;
  position: absolute;
  inset: auto 0% 0% auto;
}

.exit {
  color: var(--_kurita---k-dark-teal);
  font-size: 14px;
  line-height: 1em;
  text-decoration: none;
  position: absolute;
  inset: auto 181px 26px auto;
}