:root {
  --dim-grey: #4c4d56;
  --gainsboro: #e3e7ec;
  --white-smoke-2: #f3f4f4;
  --blueish: #d5f6ff;
  --dodger-blue: #2d93fe;
  --crimson: #ff5e6a;
  --blue: #2538df;
  --white-81: white;
  --slate-grey: #78818f;
  --white-smoke: #f1f1f1;
  --midnight-blue: #0f2740;
  --steel-blue: #467395;
  --dark-turquoise: #00cee2;
  --white-80: #fffc;
  --gainsboro-2: #dbdfe3;
}

h1 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 38px;
  font-weight: bold;
  line-height: 44px;
}

h2 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
}

p {
  margin-bottom: 10px;
}

a {
  color: var(--dim-grey);
  text-decoration: none;
  transition: all .2s ease-in-out;
}

.sprinkler-container {
  align-items: stretch;
  width: 100%;
  max-width: 1600px;
  height: 100%;
  max-height: 960px;
  display: block;
  position: relative;
}

.sprinkler-container.bg-blue {
  z-index: 0;
  border-radius: 5px;
  min-width: 1440px;
  max-width: 1440px;
  max-height: 800px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}

.drag-wrap {
  z-index: 50;
  flex: none;
  justify-content: center;
  align-items: center;
  padding-top: 95px;
  padding-right: 20px;
  display: flex;
  position: absolute;
  inset: 0% 0% 0% auto;
}

.drag-wrap.hide {
  display: none;
}

.drag-container {
  z-index: 10;
  background-color: var(--gainsboro);
  border-radius: 10rem;
  width: 40px;
  height: 540px;
  position: relative;
  overflow: hidden;
}

.body {
  background-color: var(--white-smoke-2);
  color: var(--blueish);
  font-family: Ul moderat, sans-serif;
}

.sprinkler-wrap {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  display: flex;
}

.drag-bar {
  background-color: var(--dodger-blue);
  border-radius: 10rem;
  width: 100%;
  height: 100%;
  position: relative;
  top: 500px;
}

.scale-right {
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  height: 540px;
  padding-bottom: 30px;
  padding-left: 10px;
  padding-right: 15px;
  display: flex;
  position: relative;
}

.scale-right.metric {
  align-items: flex-start;
  padding-bottom: 30px;
  padding-right: 0;
}

.scale-right.fixed.hide {
  display: none;
}

.scale-right-fixed-btn {
  background-color: var(--dim-grey);
  color: var(--dim-grey);
  text-transform: uppercase;
  border-radius: 30px;
  justify-content: center;
  align-items: center;
  padding-top: 16px;
  padding-bottom: 16px;
  font-family: Syne, sans-serif;
  font-size: 11px;
  font-weight: 500;
  display: flex;
  position: relative;
}

.scale-right-fixed-btn.high {
  background-color: var(--crimson);
  color: var(--crimson);
}

.scale-right-fixed-btn.high:hover {
  background-color: #af022e;
}

.scale-right-fixed-btn.medium {
  background-color: var(--blue);
}

.scale-right-fixed-btn.medium:hover {
  background-color: #0416b2;
}

.scale-right-fixed-btn.low {
  background-color: var(--dodger-blue);
}

.scale-right-fixed-btn.low:hover {
  background-color: #0168d4;
}

.scale-left {
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 60px;
  height: 540px;
  padding-top: 5px;
  padding-bottom: 40px;
  display: flex;
  position: relative;
}

.scale-left.imperial {
  padding-top: 2px;
}

.scale-left-btn {
  z-index: 5;
  color: var(--white-81);
  letter-spacing: .05rem;
  text-transform: uppercase;
  align-items: center;
  width: 60px;
  height: 25px;
  margin-top: 0;
  margin-bottom: 0;
  font-family: DM Mono, sans-serif;
  font-size: 11px;
  font-weight: 500;
  line-height: 15px;
  display: flex;
  position: relative;
}

.scale-left-btn:hover {
  color: var(--slate-grey);
}

.scale-left-btn.first {
  margin-top: -3px;
}

.scale-imperial-svg {
  z-index: 2;
  max-width: none;
  height: 480px;
  position: absolute;
  inset: auto 10px 50px auto;
}

.text-block-2 {
  line-height: 1;
}

.scale-right-text {
  color: var(--gainsboro);
  text-align: center;
  letter-spacing: .05rem;
  margin-left: 20px;
  margin-right: 20px;
  line-height: 1;
}

.video-container {
  background-color: #212c3c;
  height: 100%;
}

.video-container._0-start {
  display: block;
  position: relative;
}

.video-container._3-stove, .video-container._2-toaster, .video-container._3-heater, .video-container._4-candle-easteregg, .video-container._5-smokealarm-easteregg, .video-container.sprinkler-closeup {
  z-index: 200;
  display: none;
  position: relative;
}

.titlebar {
  z-index: 10;
  width: 65%;
  padding-top: 80px;
  padding-left: 40px;
  display: flex;
  position: absolute;
}

.subtitle {
  color: var(--blueish);
  text-transform: uppercase;
  margin-top: 0;
  font-family: Ul moderat, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  position: relative;
}

.title {
  color: var(--blueish);
  margin-top: 10px;
  font-family: Ul moderat, sans-serif;
  font-size: 48px;
  font-weight: 400;
  line-height: .85;
  position: relative;
}

.button {
  z-index: 10;
  text-align: center;
  background-color: #ff5a5a;
  background-image: url('../images/button-bg-1.png');
  background-position: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 100px;
  justify-content: center;
  align-items: center;
  max-width: 200px;
  margin-left: auto;
  margin-right: auto;
  padding: 10px 40px;
  font-size: .875rem;
  font-weight: 700;
  text-decoration: none;
  display: flex;
  position: absolute;
  overflow: hidden;
}

.button._1stovebtn {
  font-weight: 400;
  top: 45%;
  left: 11%;
}

.button._2toasterbtn {
  font-weight: 400;
  top: 40%;
  left: 24.5%;
}

.button._3heaterbtn {
  font-weight: 400;
  top: 55%;
  left: 48%;
}

.button.close-eggs {
  min-width: 50px;
  min-height: 50px;
  padding-left: 10px;
  padding-right: 10px;
  font-weight: 400;
  inset: 5% 5% auto auto;
}

.button.ul-link {
  background-color: #46739580;
  background-image: none;
  max-width: none;
  padding: 5px 15px;
  font-family: Syne, sans-serif;
  font-size: 13px;
  font-weight: 400;
  inset: 3% auto auto 20%;
}

.button.ul-link-candle {
  background-color: #46739580;
  background-image: none;
  max-width: none;
  padding: 5px 15px;
  font-family: Syne, sans-serif;
  font-size: 13px;
  font-weight: 400;
  inset: auto 22% 20% auto;
}

.button-text-wrapper {
  z-index: 10;
  letter-spacing: .025rem;
  flex-direction: column;
  height: 1.5rem;
  line-height: 1.5;
  display: flex;
  position: relative;
  overflow: hidden;
}

.button-text {
  color: var(--white-smoke);
  background-color: #0000;
  justify-content: center;
  align-items: center;
  height: 1.5rem;
  min-height: 1.5rem;
  padding: 0;
  font-size: 16px;
}

.button-text.close-x {
  padding-top: .3rem;
  padding-bottom: .3rem;
}

.button-text.small {
  padding-top: 7px;
  padding-bottom: 5px;
  font-size: 12px;
  line-height: 1;
}

.button-background {
  background-color: #00cee2;
  border-radius: 100px;
  width: 100%;
  min-width: 1rem;
  height: 175%;
  display: none;
  position: absolute;
  inset: auto;
}

.disable-buttons {
  z-index: 10;
  width: 100%;
  height: 100%;
  display: none;
  position: absolute;
}

.scale-metric-svg {
  z-index: 2;
  max-width: none;
  height: 480px;
  position: absolute;
  inset: auto auto 56px 10px;
}

.scale-right-btn {
  z-index: 5;
  color: var(--white-81);
  text-align: right;
  letter-spacing: .05rem;
  justify-content: flex-end;
  align-items: center;
  width: 50px;
  height: 20px;
  margin-top: 0;
  margin-bottom: 0;
  font-family: DM Mono, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  display: flex;
  position: relative;
}

.scale-right-btn:hover {
  color: var(--slate-grey);
}

.scale-right-btn.first {
  height: 20px;
  margin-top: 16px;
}

.scale-right-btn.last {
  height: 20px;
  margin-bottom: 33px;
}

.instructions_text {
  text-transform: uppercase;
  font-family: Syne, sans-serif;
  font-size: 17px;
  line-height: 120%;
}

.blurb {
  opacity: 1;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-right: 50px;
  font-size: 16px;
  line-height: 150%;
  position: absolute;
}

.blurb.intro {
  opacity: 1;
}

.blurb.toaster, .blurb.heater, .blurb.stove {
  opacity: 0;
}

.blurb.zoom {
  opacity: 1;
  max-width: 40%;
}

.instructions {
  z-index: 100;
  width: 24%;
  padding-left: 30px;
  padding-right: 40px;
  display: block;
  position: absolute;
  inset: 25% 0% auto auto;
}

.too-small {
  width: 100%;
  padding: 15px;
  display: none;
}

.video-player {
  width: 100%;
  height: auto;
}

.red {
  color: var(--crimson);
  font-weight: 700;
}

.button-container {
  z-index: 90;
  transform-style: preserve-3d;
  width: 100%;
  height: 100%;
  min-height: 800px;
  display: block;
  position: absolute;
  inset: 0%;
}

.temp-title {
  z-index: 200;
  color: var(--blueish);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 0;
  padding-top: 10px;
  padding-right: 20px;
  font-family: Ul moderat, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  display: none;
  position: absolute;
  inset: 0% 0% auto auto;
}

.button-hidden {
  z-index: 10;
  text-align: center;
  background-color: #ff5a5a0d;
  background-image: url('../images/button-bg-1.png');
  background-position: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  border: 1px solid #00cee233;
  border-radius: 100px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  max-width: 200px;
  margin-left: auto;
  margin-right: auto;
  padding: 7px;
  font-size: .875rem;
  font-weight: 700;
  text-decoration: none;
  display: flex;
  position: absolute;
  overflow: hidden;
}

.button-hidden._4candlebtn {
  cursor: pointer;
  background-image: none;
  font-weight: 400;
  bottom: 22%;
  left: 57.5%;
}

.button-hidden._5smokealarmbtn {
  z-index: 110;
  background-image: none;
  font-weight: 400;
  top: 1%;
  left: 40%;
}

.easteregg {
  width: 60px;
  margin-top: -15px;
  margin-left: -20px;
  position: absolute;
  top: 1%;
  left: 40%;
}

.easteregg.candle {
  margin-top: -20px;
  top: 75%;
  left: 57.45%;
  transform: rotate(106deg);
}

.tooltip-icon {
  cursor: pointer;
  width: 30px;
}

.paragraph-small {
  color: var(--steel-blue);
  margin-bottom: 0;
  font-size: 14px;
  line-height: 18px;
}

.tooltip-content---left {
  z-index: 6;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  top: 23%;
  right: 43%;
}

.tooltip-content---left._03bulb {
  inset: 56% auto auto 47.75%;
}

.tooltip-float-v3 {
  z-index: 1;
  flex: none;
  min-width: 260px;
  max-width: 280px;
  margin-top: auto;
  margin-bottom: auto;
  display: block;
  position: absolute;
}

.tooltip-float-v3.left {
  display: none;
  inset: 0% 113% 0% auto;
}

.tooltip-float-v3.left.wide-2 {
  min-width: 360px;
  max-width: 360px;
  margin-top: -20px;
  margin-right: 10px;
}

.tooltip-float-v3.right {
  min-width: 300px;
  max-width: 320px;
  display: none;
  inset: 0% auto 0% 140%;
}

.tooltip-float-v3.right.wide {
  min-width: 360px;
  max-width: 380px;
  margin-top: -30px;
}

.tooltip-float-v3.right.wide.bottom {
  margin-top: -100px;
}

.tooltip-v3 {
  background-color: #fff;
  flex-direction: column;
  align-items: flex-start;
  width: auto;
  padding: 20px;
  box-shadow: 4px 4px 14px #080f340a, 1px 1px 1px #170f490a, 0 0 1px #170f4908;
}

.tooltip-v3.top {
  border: 2px solid var(--dark-turquoise);
  border-radius: 5px;
}

.closeup-title {
  color: var(--steel-blue);
  margin-top: 10px;
  margin-bottom: 10px;
  font-family: Syne, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 16px;
}

.closeup-title.red {
  color: var(--crimson);
}

.tooltip-content---right {
  z-index: 6;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 20%;
  left: 60%;
}

.tooltip-content---right._01sealing {
  top: 41%;
  left: 50.75%;
}

.tooltip-content---right._2frame {
  top: 50.85%;
  left: 55%;
}

.tooltip-content---right._4deflector {
  top: 68.15%;
  left: 55.75%;
}

.tooltip-container {
  z-index: 90;
  width: 100%;
  height: 100%;
  min-height: 800px;
  position: absolute;
  inset: 0%;
}

.title-smaller {
  color: var(--blueish);
  margin-top: 10px;
  font-family: Ul moderat, sans-serif;
  font-size: 36px;
  font-weight: 400;
  line-height: .85;
  position: relative;
}

.button-little {
  z-index: 10;
  text-align: center;
  background-color: #ff5a5a;
  background-image: url('../images/button-bg-1.png');
  background-position: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 100px;
  justify-content: center;
  align-items: center;
  max-width: 200px;
  margin-left: auto;
  margin-right: auto;
  padding: 10px 40px;
  font-size: .875rem;
  font-weight: 700;
  text-decoration: none;
  display: flex;
  position: absolute;
  overflow: hidden;
}

.button-little.sprinklerzoom {
  background-color: var(--gainsboro);
  background-image: none;
  padding-left: 10px;
  padding-right: 10px;
  font-weight: 400;
  top: 3%;
  left: 57%;
}

.button-little.sprinklerzoom:hover {
  background-color: var(--dark-turquoise);
}

@media screen and (min-width: 1440px) {
  .video-container._3-stove, .video-container._2-toaster, .video-container._4-candle-easteregg, .video-container._5-smokealarm-easteregg, .video-container.sprinkler-closeup {
    display: none;
  }
}

@media screen and (max-width: 991px) {
  .sprinkler-container.bg-blue {
    min-width: 900px;
    max-width: 900px;
    max-height: 510px;
  }

  .drag-wrap {
    padding-right: 0;
    transform: scale(.8);
  }

  .video-container._3-stove, .video-container._2-toaster, .video-container._3-heater, .video-container._4-candle-easteregg, .video-container._5-smokealarm-easteregg {
    display: none;
  }

  .titlebar {
    width: 75%;
    padding-top: 20px;
  }

  .subtitle {
    font-size: 14px;
  }

  .title {
    font-size: 36px;
  }

  .button {
    transform: scale(.5);
  }

  .instructions_text {
    font-size: 15px;
    line-height: 120%;
  }

  .blurb {
    margin-right: 0;
    font-size: 12px;
    line-height: 20px;
  }

  .blurb.intro {
    padding-right: 10px;
    font-size: 12px;
  }

  .instructions {
    flex-direction: column;
    max-width: 60%;
    padding-left: 20px;
    top: 20%;
  }

  .button-container {
    transform: scale3d(1none, 1none, 1none);
    min-height: 510px;
  }

  .temp-title {
    font-size: 18px;
    display: none;
  }

  .tooltip-icon {
    width: 20px;
  }

  .paragraph-small {
    font-size: 10px;
    line-height: 1.2;
  }

  .tooltip-float-v3.left {
    inset: 158% 0% auto auto;
  }

  .tooltip-float-v3.right {
    display: none;
    inset: 158% auto auto 0%;
  }

  .tooltip-v3.top {
    padding: 10px;
  }

  .closeup-title {
    font-size: 14px;
  }

  .tooltip-container {
    min-height: 510px;
  }

  .title-smaller {
    font-size: 24px;
  }

  .button-little {
    transform: scale(.5);
  }
}

@media screen and (max-width: 767px) {
  .sprinkler-container.bg-blue {
    min-width: 750px;
    max-width: 750px;
    height: 100vh;
    max-height: 420px;
  }

  .drag-wrap {
    padding-top: 20px;
    right: -5%;
    transform: scale(.5);
  }

  .scale-right.fixed {
    display: flex;
  }

  .video-container._3-stove, .video-container._2-toaster, .video-container._3-heater, .video-container._4-candle-easteregg, .video-container._5-smokealarm-easteregg {
    display: none;
  }

  .titlebar {
    padding-top: 40px;
  }

  .subtitle {
    font-size: 13px;
    display: block;
  }

  .title {
    font-size: 28px;
  }

  .titles.hide {
    transform: scale(.75);
  }

  .button {
    transform: scale(.5);
  }

  .blurb {
    display: none;
  }

  .instructions {
    max-width: 50%;
    padding-left: 20px;
    top: 25%;
  }

  .too-small {
    width: 100%;
  }

  .button-container {
    max-width: 95vw;
    max-height: 95vh;
  }

  .temp-title {
    font-size: 15px;
  }

  .tooltip-icon {
    width: 20px;
  }

  .paragraph-small {
    font-size: 10px;
    line-height: 14px;
  }

  .tooltip-float-v3.left.wide-2 {
    z-index: 6;
    min-width: 300px;
    max-width: 300px;
    margin-top: -41px;
    display: none;
    top: 0%;
    right: 100%;
  }

  .tooltip-float-v3.right {
    inset: 0% 0% auto 100%;
  }

  .tooltip-float-v3.right.wide {
    min-width: 300px;
    max-width: 300px;
    display: none;
    left: 100%;
    right: auto;
  }

  .tooltip-float-v3.right.wide.bottom {
    margin-top: -77px;
  }

  .tooltip-v3 {
    padding: 10px;
  }

  .closeup-title {
    margin-top: 4px;
    margin-bottom: 4px;
    font-size: 16px;
  }

  .tooltip-container {
    min-height: 420px;
  }

  .title-smaller {
    font-size: 30px;
  }

  .button-little {
    transform: scale(.5);
  }
}

@media screen and (max-width: 479px) {
  .sprinkler-wrap {
    z-index: 1;
    display: none;
    position: relative;
  }

  .button {
    font-size: .675rem;
  }

  .button-text {
    padding-top: .25rem;
  }

  .instructions_text {
    color: var(--midnight-blue);
  }

  .too-small {
    z-index: 0;
    display: block;
    position: absolute;
    inset: 33% 0% auto;
  }

  .button-hidden {
    font-size: .675rem;
  }

  .tooltip-float-v3 {
    min-width: 300px;
  }

  .tooltip-float-v3.left {
    inset: 158% auto auto 0%;
  }

  .tooltip-v3 {
    min-width: 300px;
    max-width: 300px;
  }

  .button-little {
    font-size: .675rem;
  }
}


@font-face {
  font-family: 'Ul moderat';
  src: url('../fonts/UL-Moderat-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Ul moderat';
  src: url('../fonts/UL-Moderat-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Syne';
  src: url('../fonts/Syne-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Syne';
  src: url('../fonts/Syne-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Syne';
  src: url('../fonts/Syne-ExtraBold.ttf') format('truetype'), url('../fonts/Syne-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Syne';
  src: url('../fonts/Syne-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}