section.nav-sticky { line-height: 1em; position: sticky; top: 0px; height: 4em; display: flex; align-items: center; justify-content: flex-end; z-index: 100; background: black; min-height: 3em; padding-top: 0px; font-size: 11px; }
.nav-sticky .logo { height: 2em; padding: 0px; margin: 0px; position: absolute; left: 1em; width: 7em; opacity: 1; image-rendering: revert; }
.nav-sticky .logo::after { font-size: 0.6em; top: 2.5em; left: 6em; }
section.nav-sticky a { color: var(--color-1); font-weight: 300; }
html { scroll-behavior: smooth; }
body { width: 100vw; background-color: rgb(14, 108, 196); color: var(--color-3); font-family: Poppins; text-rendering: auto; font-size: 12px; }
.logo { background: url("../app/img/logo/smartpool.png") center center / contain no-repeat; height: 4em; display: block; text-align: center; width: 300px; position: absolute; opacity: 0; animation: 2s ease 1s 1 normal forwards running intro; }
.start { position: relative; align-items: center; display: flex; flex-wrap: wrap; justify-content: center; overflow: hidden; padding: 0px; }
p { width: 100%; text-align: center; user-select: none; font-weight: 300; }
.box { position: absolute; top: 0px; transform: rotate(80deg); left: 0px; }
.wave { opacity: 0.4; position: absolute; top: 3%; left: 10%; background: rgb(0, 170, 255); width: 1500px; height: 1300px; margin-left: -150px; margin-top: -250px; transform-origin: 50% 48%; border-radius: 43%; animation: 7000ms linear 0s infinite normal none running drift; }
.wave.-three { animation: 7500ms linear 0s infinite normal none running drift; background-color: rgb(119, 218, 255); }
.wave.-two { animation: 3000ms linear 0s infinite normal none running drift; opacity: 0.1; background: black; }
.box::after { content: ""; display: block; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 11; transform: translate3d(0px, 0px, 0px); }
@keyframes drift {
  0% { transform: rotate(0deg); }
  0% { transform: rotate(360deg); }
}
.contain { animation-delay: 4s; z-index: 1000; position: fixed; inset: 0px; display: flex; flex-flow: row nowrap; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; background: linear-gradient(rgb(37, 167, 215), rgb(37, 167, 215)); }
.icon { width: 100px; height: 100px; margin: 0px 5px; }
.icon:nth-child(2) img { animation-delay: 0.2s; }
.icon:nth-child(3) img { animation-delay: 0.3s; }
.icon:nth-child(4) img { animation-delay: 0.4s; }
.icon img { animation: 2s ease 0s infinite normal none running anim; transform: scale(0, 0) rotateZ(180deg); }
@-webkit-keyframes anim {
  0% { transform: scale(0, 0) rotateZ(-90deg); opacity: 0; }
  30% { transform: scale(1, 1) rotateZ(0deg); opacity: 1; }
  50% { transform: scale(1, 1) rotateZ(0deg); opacity: 1; }
  80% { transform: scale(0, 0) rotateZ(90deg); opacity: 0; }
}
@keyframes anim {
  0% { transform: scale(0, 0) rotateZ(-90deg); opacity: 0; }
  30% { transform: scale(1, 1) rotateZ(0deg); opacity: 1; }
  50% { transform: scale(1, 1) rotateZ(0deg); opacity: 1; }
  80% { transform: scale(0, 0) rotateZ(90deg); opacity: 0; }
}
#background-wrap { inset: 0px; position: absolute; z-index: -1; }
@-webkit-keyframes animateBubble {
  0% { margin-top: 1000px; }
  100% { margin-top: -100%; }
}
@keyframes animateBubble {
  0% { margin-top: 1000px; }
  100% { margin-top: -100%; }
}
@-webkit-keyframes sideWays {
  0% { margin-left: 0px; }
  100% { margin-left: 50px; }
}
@keyframes sideWays {
  0% { margin-left: 0px; }
  100% { margin-left: 50px; }
}
@keyframes intro {
  0% { transform: scale(0); }
  50% { transform: scale(1); opacity: 0; }
  80% { }
  100% { transform: scale(1); opacity: 1; }
}
.x1 { animation: 25s linear 0s infinite normal none running animateBubble, 2s ease-in-out 0s infinite alternate none running sideWays; left: -5%; top: 5%; transform: scale(0.6); }
.x2 { animation: 20s linear 0s infinite normal none running animateBubble, 4s ease-in-out 0s infinite alternate none running sideWays; left: 5%; top: 80%; transform: scale(0.4); }
.x3 { animation: 28s linear 0s infinite normal none running animateBubble, 2s ease-in-out 0s infinite alternate none running sideWays; left: 10%; top: 40%; transform: scale(0.7); }
.x4 { animation: 22s linear 0s infinite normal none running animateBubble, 3s ease-in-out 0s infinite alternate none running sideWays; left: 20%; top: 0px; transform: scale(0.3); }
.x5 { animation: 29s linear 0s infinite normal none running animateBubble, 4s ease-in-out 0s infinite alternate none running sideWays; left: 30%; top: 50%; transform: scale(0.5); }
.x6 { animation: 21s linear 0s infinite normal none running animateBubble, 2s ease-in-out 0s infinite alternate none running sideWays; left: 50%; top: 0px; transform: scale(0.8); }
.x7 { animation: 20s linear 0s infinite normal none running animateBubble, 2s ease-in-out 0s infinite alternate none running sideWays; left: 65%; top: 70%; transform: scale(0.4); }
.x8 { animation: 22s linear 0s infinite normal none running animateBubble, 3s ease-in-out 0s infinite alternate none running sideWays; left: 80%; top: 10%; transform: scale(0.3); }
.x9 { animation: 29s linear 0s infinite normal none running animateBubble, 4s ease-in-out 0s infinite alternate none running sideWays; left: 90%; top: 50%; transform: scale(0.6); }
.x10 { animation: 26s linear 0s infinite normal none running animateBubble, 2s ease-in-out 0s infinite alternate none running sideWays; left: 80%; top: 80%; transform: scale(0.3); }
.bubble { border-radius: 50%; box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px, rgb(255, 255, 255) 0px 10px 30px 5px inset; height: 200px; position: absolute; width: 200px; }
.bubble::after { background: radial-gradient(at center center, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 70%); border-radius: 50%; box-shadow: rgba(255, 255, 255, 0.3) 0px 20px 30px inset; content: ""; height: 180px; left: 10px; position: absolute; width: 180px; }
.sections { height: 100vh; align-items: center; justify-content: center; overflow: hidden scroll; width: 100%; }
button, .nav-sticky a { display: inline-flex; margin: 0.5em; }
.buttons { z-index: 10; text-align: center; font-size: 0.9em; width: 100%; }
section {min-height: 100vh;position: relative;background: white;transition: all 0.5s linear 0s;width: 100%;padding: 0px;overflow: hidden;}
.logo::after { content: "Piscina Inteligente"; color: white; position: absolute; bottom: -1.5em; width: 100%; text-align: center; right: 0px; }
::-webkit-scrollbar { height: 1px; width: 0px; overflow: hidden; }
::-webkit-scrollbar-track { background: transparent; overflow: hidden; }
::-webkit-scrollbar-thumb { background: rgb(33, 150, 243); }
::-webkit-scrollbar-thumb:hover { background: rgb(85, 85, 85); }
.content {font-weight: 300;display: flex;align-items: center;justify-content: space-around;font-size: 1.2em;}
strong { text-transform: capitalize; font-weight: 500; }
section.secondary { background: rgb(14, 108, 196); color: white; }
section.primary { color: black; background-image: url(""); background-repeat: no-repeat; background-size: contain; background-position: center top; background-color: white; background-attachment: fixed; }
.title {padding-top: 3em;font-size: 2em;margin-left: 2em;font-weight: 300;position: relative;width: 100%;}
article {position: relative;display: flex;align-items: stretch;justify-content: space-evenly;}
li { line-height: normal; margin: 0px; list-style: none; padding: 0px; }
li:hover { }
footer ul { width: 100%; }
#soporte article {margin: 0px auto;}
a.more { display: block; font-weight: 300; text-decoration: none; color: white; position: absolute; bottom: 1em; }
.more div { font-size: 3em; width: 1em; height: 1em; margin: 0.25em auto 0px; border-radius: 50%; box-shadow: currentcolor 0px 0px 0px 2px; display: flex; align-items: center; justify-content: center; }
.respuesta { display: block; background: white; overflow: hidden; transition: all 0.25s linear 0s; height: 0px; width: 90%; color: black; box-shadow: rgba(0, 0, 0, 0.3) 0px 6px 10px -5px; border-left: 7px solid rgb(31, 46, 69); }
.respuesta { }
.show { height: auto; padding: 5px; }
li p { text-align: left; cursor: pointer; }
form { width: 100%; margin: 0px auto; background: rgba(0, 0, 0, 0.5); padding: 1em; backdrop-filter: blur(2px); box-shadow: black 0px 0px 5px 0px; border: 1px solid rgb(33, 33, 33); border-radius: 0px; }
input, button.button-flat, textarea, select { border: none; font-size: 1em; width: 80%; padding: 1em 0em; text-align: center; outline: none; display: flex; margin: 0.5em auto; box-shadow: var(--border-shadow); align-items: center; justify-content: center; position: relative; font-weight: normal; font-family: inherit; }
textarea { resize: none; height: 5em; }
.s1-2 {width: calc(50% - 2em);display: flex;flex-wrap: wrap;place-content: center;}
.s1-1 { width: calc(100% - 1em); display: inline-block; }
.s1-3 { width: calc(33% - 3em); display: inline-block; }
.s2-3 { width: calc(66% - 3em); display: inline-block; }
.s1-4 { width: calc(25% - 4em); display: inline-block; }
.s2-4 { width: calc(50% - 4em); display: inline-block; }
.s3-4 { width: calc(75% - 4em); display: inline-block; }
.image {background: right center / contain no-repeat;aspect-ratio: 16 / 9;}
.image.snap1 { aspect-ratio: 1 / 1; background-image: url("/img/site/mockup1.png"); background-position: center top; position: sticky; bottom: 100%; }
.nav-sticky button { margin-top: 1em; }
.primary a.more { color: rgb(14, 108, 196); }
.image-soporte { background-image: url("/img/site/soporte.jpg"); }
.image-funciones { background-image: url("/img/site/desc.jpg"); }
.image-descripcion { background-image: url("/img/site/screens1.png"); }
section#contacto {background: linear-gradient(0deg, rgb(0, 0, 0), rgba(0, 0, 0, 0.29)) center center / cover no-repeat fixed, url("/img/site/contacto.png") center center / cover no-repeat fixed;}
input[type="submit"] { background: rgb(14, 108, 196); color: white; }
footer { position: absolute; bottom: 0em; background: black; }
.resultado.ok { margin: 0px auto; text-align: center; background: green; }
.resultado.error { margin: 0px auto; text-align: center; background: red; }
.ubicacion .s1-3 { text-align: center; margin: 0px; display: flex; flex-flow: row wrap; align-items: revert; place-content: space-evenly; padding: 1em 0px; border-right: 1px solid rgb(16, 16, 16); height: 4em; }
.ubicacion h4 { text-align: center; margin: 0px; font-weight: 500; }
.ubicacion p span { font-size: 0.7em; display: block; }
.ubicacion { width: calc(100% - 2em); background: rgb(16, 16, 16); position: absolute; bottom: 0em; display: flex; align-items: center; justify-content: space-around; padding: 2em 0px; }
.ubicacion a { color: white; text-decoration: none; font-size: 0.8em; margin: 0px; padding: 1em; }
a.more.only-landscape { width: 5em; left: calc(50% - 2.5em); }
.ubicacion s1-3:first-child { border: none; }
.s1-3:last-child { border-right: none; }
.ubicacion a::before { content: "•"; margin-right: 1em; }
.image-portrait { aspect-ratio: 3 / 4; }
.image-cristalwater { background-image: url("/img/site/cristal.png"); background-size: contain; }
.image-hand { background-image: url("/img/site/card.png"); background-position: center center; }
.logo-cw { background-image: url("/img/logo/cristalwater/light/cristal/150_white.png"); background-size: 110%; background-color: transparent; background-repeat: no-repeat; background-position: center center; border-radius: 50%; }
#section0 a.more { position: absolute; bottom: 14em; top: inherit; }
footer .s1-3 { height: 5em; display: block; align-items: center; justify-content: center; position: relative; flex-wrap: wrap; }
.brand-container { height: 5em; display: flex; align-items: center; width: 100%; justify-content: flex-start; }
footer .image { aspect-ratio: 1 / 1; width: 50%; max-width: 7em; background-position: center center; }
.image-brand { background-image: url("/img/logo/cristalwater/logo.png"); }
footer .brand-info { font-size: 0.8em; width: calc(60%); margin-left: 1em; }
.brand-address { display: block; width: max-content; }
.brand-info span { font-size: 0.9em; display: block; width: 100%; }
footer h4 { text-align: left; padding-right: 1em; position: absolute; top: -3em; left: 1em; height: 1em; width: 100%; }
a { color: currentcolor; text-decoration: none; }
.brand-title { font-size: 1em; }
footer li { margin: 0.5em 0em; width: calc(50%); white-space: nowrap; }
.image-developer { background-image: url("https://assets.vsdigital.ar/logos/developer.png"); margin-left: 1em; }
.primary footer { background: black; color: white; }
.privacity-terms { display: flex; align-items: center; justify-content: center; background: antiquewhite; padding: 1em; border-left: 5px solid rgb(14, 102, 183); margin-bottom: 1em; font-size: 0.9em; }
.privacity-terms p span { margin: 0px; color: rgb(14, 81, 142); cursor: pointer; white-space: nowrap; }
.footer-copyright .brand-container { justify-content: center; }
.nav-sticky .buttons { width: auto; }
a.more.only-landscape.back {top: 4em;}
.controls-theme { display: flex; right: 0px; width: 5em; justify-content: space-evenly; }
.brand-copyright { text-align: right; }
#funciones li {
    margin-bottom: 2em;
}
@media only screen and (max-width: 1024px) {
  .box { display: none; }
}
@media only screen and (max-width: 768px) {
  .title { text-align: center; margin-left: 0px; line-height: 1.2em; }
  section.nav-sticky { justify-content: start; padding: 0em 0px 0.25em; overflow: visible; }
  .nav-sticky .logo { position: absolute; height: 2em; top: 5px; display: none; }
  .nav-sticky .logo::after { display: none; }
  .nav-sticky .buttons span { display: none; }
  .nav-sticky .buttons { position: absolute; top: 4em; right: 0px; }
  ul { padding: 5px; margin: 0px auto; width: calc(100% - 20px); }
  article { display: block; }
  .s1-1, .s1-2, .s1-3, .s2-3, .s1-4, .s2-4, .s3-4 { width: 100%; display: block; background-position: center top; }
  .only-landscape { display: none !important; }
  .s1-3.footer-copyright { font-size: 0.8em; }
  .s1-3.footer-links { max-height: 2em; }
  .s1-3.footer-links ul li { display: inline-block; width: 40%; text-align: center; }
  .more.only-landscape { display: none; }
  .s1-3.footer-reseller { width: 50%; margin-left: 5px; }
  .controls-theme { position: absolute; }
  form {width: auto;}
  .more.only-landscape { display: none; }
  footer { display: block; background: transparent; position: relative; }
  .s1-3.footer-reseller { width: 80%; margin: 1em auto; background: black; border: 2px solid rgb(17, 17, 17); padding: 1em; align-items: center; }
}
#intro { position: fixed; top: 0px; left: 0px; width: 100vw; height: 100vh; overflow: hidden; z-index: 1000; }
.lds-ellipsis { display: inline-block; position: absolute; width: 80px; height: 80px; bottom: 30%; }
.lds-ellipsis div { position: absolute; top: 33px; width: 13px; height: 13px; border-radius: 50%; background: rgb(255, 255, 255); animation-timing-function: cubic-bezier(0, 1, 1, 0); }
.lds-ellipsis div:nth-child(1) { left: 8px; animation: 0.6s ease 0s infinite normal none running lds-ellipsis1; }
.lds-ellipsis div:nth-child(2) { left: 8px; animation: 0.6s ease 0s infinite normal none running lds-ellipsis2; }
.lds-ellipsis div:nth-child(3) { left: 32px; animation: 0.6s ease 0s infinite normal none running lds-ellipsis2; }
.lds-ellipsis div:nth-child(4) { left: 56px; animation: 0.6s ease 0s infinite normal none running lds-ellipsis3; }
@keyframes lds-ellipsis1 {
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}
@keyframes lds-ellipsis3 {
  0% { transform: scale(1); }
  100% { transform: scale(0); }
}
@keyframes lds-ellipsis2 {
  0% { transform: translate(0px, 0px); }
  100% { transform: translate(24px, 0px); }
}
body.dark { background: rgb(17, 17, 17); color: rgb(122, 114, 114); }
.dark section { background-color: rgb(22, 22, 22); color: rgb(122, 114, 114); }
.dark .nav-sticky { background-color: rgb(16, 16, 16); border-bottom: 1px solid rgb(33, 33, 33); }
.dark section.primary { background-color: rgb(17, 17, 17); color: rgb(122, 114, 114); }
.dark section.secondary {background-color: rgb(10, 37, 50);color: rgb(122, 114, 114);}
.dark .privacity-terms { background-color: rgb(10, 37, 50); }
.dark .privacity-terms p span {color: rgb(0 133 255);}
.dark input, .dark textarea, .dark select { background-color: rgb(22, 22, 22); color: rgb(239, 239, 239); }
.dark footer { color: white; }
.dark button, .dark .button-flat {background: black;color: gray;}
.dark input[type="button"], .dark input[type="submit"], .dark input[type="reset"] { background-color: rgb(25, 56, 126); }
.dark .info.respuesta {background: #111111;color: #2b89b9;}
.dark .more {color: gray;}
.dark span[class^="ion-"] {color: gray;}
body.big-font { font-size: 14px; }
body.tiny-font { font-size: 10px; }