@font-face {
  font-family: "Roboto";
  src: url("../../../fonts/roboto/Roboto-Regular.woff2") format("woff2"), url("../../../fonts/roboto/Roboto-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Roboto-Regular";
  src: url("../../../fonts/roboto/Roboto-Regular.woff2") format("woff2"), url("../../../fonts/roboto/Roboto-Regular.woff") format("woff");
}
.button-primary {
  position: relative;
  cursor: pointer;
  background: var(--primary-color);
  color: white;
  border-radius: 2px;
  min-width: 88px;
  height: 36px;
  padding: 0 8px;
  text-align: center;
}

a.button-primary {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}

.market-button {
  display: inline-block;
  padding: 0.3125rem 0.875rem;
  padding-left: 2.8125rem;
  border-radius: 6px;
  background-position: center left 0.75rem;
  background-color: black;
  background-size: 1.5rem 1.5rem;
  background-repeat: no-repeat;
  text-decoration: none;
}

.market-button .market-button-title {
  display: block;
  color: white;
  font-size: var(--fs-medium);
}

.market-button .market-button-subtitle {
  display: block;
  color: lightgrey;
  font-size: var(--fs-extra-small);
}

.apple-button {
  background-position: center left 0.3rem;
  background-size: 2.5rem 2.5rem;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iODAwIiB3aWR0aD0iMTIwMCIgdmlld0JveD0iLTIuMjU4MTc1IC00LjYyMDIyNSAxOS41NzA4NSAyNy43MjEzNSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTcuNjQ0NSA1LjMxYy0uNzMgMC0xLjg2LS44My0zLjA1LS44LTEuNTcuMDItMy4wMS45MS0zLjgyIDIuMzItMS42MyAyLjgzLS40MiA3LjAxIDEuMTcgOS4zMS43OCAxLjEyIDEuNyAyLjM4IDIuOTIgMi4zNCAxLjE3LS4wNSAxLjYxLS43NiAzLjAzLS43NiAxLjQxIDAgMS44MS43NiAzLjA1LjczIDEuMjYtLjAyIDIuMDYtMS4xNCAyLjgzLTIuMjcuODktMS4zIDEuMjYtMi41NiAxLjI4LTIuNjMtLjAzLS4wMS0yLjQ1LS45NC0yLjQ4LTMuNzQtLjAyLTIuMzQgMS45MS0zLjQ2IDItMy41MS0xLjEtMS42MS0yLjc5LTEuNzktMy4zOC0xLjgzLTEuNTQtLjEyLTIuODMuODQtMy41NS44NHptMi42LTIuMzZjLjY1LS43OCAxLjA4LTEuODcuOTYtMi45NS0uOTMuMDQtMi4wNS42Mi0yLjcyIDEuNC0uNi42OS0xLjEyIDEuOC0uOTggMi44NiAxLjAzLjA4IDIuMDktLjUzIDIuNzQtMS4zMSIvPjwvc3ZnPg==);
}

.google-button {
  background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij4KPHBvbHlnb24gc3R5bGU9ImZpbGw6IzVDREFERDsiIHBvaW50cz0iMjkuNTMsMCAyOS41MywyNTEuNTA5IDI5LjUzLDUxMiAyOTkuMDA0LDI1MS41MDkgIi8+Cjxwb2x5Z29uIHN0eWxlPSJmaWxsOiNCREVDQzQ7IiBwb2ludHM9IjM2OS4wNjcsMTgwLjU0NyAyNjIuMTc1LDExOS40NjcgMjkuNTMsMCAyOTkuMDA0LDI1MS41MDkgIi8+Cjxwb2x5Z29uIHN0eWxlPSJmaWxsOiNEQzY4QTE7IiBwb2ludHM9IjI5LjUzLDUxMiAyOS41Myw1MTIgMjYyLjE3NSwzODMuNTUxIDM2OS4wNjcsMzIyLjQ3IDI5OS4wMDQsMjUxLjUwOSAiLz4KPHBhdGggc3R5bGU9ImZpbGw6I0ZGQ0E5NjsiIGQ9Ik0zNjkuMDY3LDE4MC41NDdsLTcwLjA2Myw3MC45NjFsNzAuMDYzLDcwLjk2MWwxMDguNjg4LTYyLjg3N2M2LjI4OC0zLjU5Myw2LjI4OC0xMS42NzcsMC0xNS4yNyAgTDM2OS4wNjcsMTgwLjU0N3oiLz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==);
}

:root {
  --columns: 4;
  --gap: clamp(1.1rem, 1rem + 0.5vw, 2.2rem);
  --padding: var(--gap);
  --primary-color: #47b972;
  --card-span: 1;
  --buttons-span: 2;
  --fs-large: clamp(1.25rem, 0.9rem + 0.45vw, 1.625rem);
  --fs-medium: clamp(1rem, 0.7rem + 0.35vw, 1.25rem);
  --fs-small: clamp(0.875rem, 0.8rem + 0.2vw, 1rem);
  --fs-extra-small: clamp(0.75rem, 0.7rem + 0.1vw, 0.875rem);
  --logo-size: clamp(4rem, 3.5rem + 3vw, 6rem);
  --icon-size: clamp(3rem, 3.5rem + 3vw, 5rem);
}

@media (min-width: 600px) {
  :root {
    --columns: 8;
    --card-span: 2;
    --buttons-span: 2;
  }
}
@media (min-width: 905px) {
  :root {
    --columns: 12;
    --padding: calc(50% - 420px);
    --card-span: 3;
    --buttons-span: 3;
  }
}
@media (min-width: 1240px) {
  :root {
    --padding: 200px;
  }
}
@media (min-width: 1440px) {
  :root {
    --padding: calc(50% - 520px);
  }
}
@keyframes before-display1 {
  0% {
    background-image: url("images/splash_1.webp");
    background-position: center center;
    opacity: 1;
  }
  16.67% {
    background-image: url("images/splash_1.webp");
    background-position: center center;
    opacity: 0;
  }
  16.68% {
    background-image: url("images/splash_3.webp");
    background-position: center center;
    opacity: 0;
  }
  33.33% {
    background-image: url("images/splash_3.webp");
    background-position: center center;
    opacity: 1;
  }
  50% {
    background-image: url("images/splash_3.webp");
    background-position: center center;
    opacity: 0;
  }
  50.01% {
    background-image: url("images/splash_2.webp");
    background-position: 0% 75%;
    opacity: 0;
  }
  66.67% {
    background-image: url("images/splash_2.webp");
    background-position: 0% 75%;
    opacity: 1;
  }
  83.33% {
    background-image: url("images/splash_2.webp");
    background-position: 0% 75%;
    opacity: 0;
  }
  83.34% {
    background-image: url("images/splash_1.webp");
    background-position: center center;
    opacity: 0;
  }
  100% {
    background-image: url("images/splash_1.webp");
    background-position: center center;
    opacity: 1;
  }
}
@keyframes after-display1 {
  0% {
    background-image: url("images/splash_2.webp");
    background-position: 0% 75%;
    opacity: 0;
  }
  16.67% {
    background-image: url("images/splash_2.webp");
    background-position: 0% 75%;
    opacity: 1;
  }
  33.33% {
    background-image: url("images/splash_2.webp");
    background-position: 0% 75%;
    opacity: 0;
  }
  33.34% {
    background-image: url("images/splash_1.webp");
    background-position: center center;
    opacity: 0;
  }
  50% {
    background-image: url("images/splash_1.webp");
    background-position: center center;
    opacity: 1;
  }
  66.67% {
    background-image: url("images/splash_1.webp");
    background-position: center center;
    opacity: 0;
  }
  66.68% {
    background-image: url("images/splash_3.webp");
    background-position: center center;
    opacity: 0;
  }
  83.33% {
    background-image: url("images/splash_3.webp");
    background-position: center center;
    opacity: 1;
  }
  100% {
    background-image: url("images/splash_3.webp");
    background-position: center center;
    opacity: 0;
  }
}
.display1-type:before {
  animation: before-display1 18s infinite;
  background-image: url("images/splash_1.webp");
  background-position: center center;
}
.display1-type:after {
  animation: after-display1 18s infinite;
  background-image: url("images/splash_2.webp");
  background-position: 0% 75%;
}

@keyframes before-display2 {
  0% {
    background-image: url("images/splash_2.webp");
    background-position: 0% 75%;
    opacity: 1;
  }
  16.67% {
    background-image: url("images/splash_2.webp");
    background-position: 0% 75%;
    opacity: 0;
  }
  16.68% {
    background-image: url("images/splash_1.webp");
    background-position: center center;
    opacity: 0;
  }
  33.33% {
    background-image: url("images/splash_1.webp");
    background-position: center center;
    opacity: 1;
  }
  50% {
    background-image: url("images/splash_1.webp");
    background-position: center center;
    opacity: 0;
  }
  50.01% {
    background-image: url("images/splash_3.webp");
    background-position: center center;
    opacity: 0;
  }
  66.67% {
    background-image: url("images/splash_3.webp");
    background-position: center center;
    opacity: 1;
  }
  83.33% {
    background-image: url("images/splash_3.webp");
    background-position: center center;
    opacity: 0;
  }
  83.34% {
    background-image: url("images/splash_2.webp");
    background-position: 0% 75%;
    opacity: 0;
  }
  100% {
    background-image: url("images/splash_2.webp");
    background-position: 0% 75%;
    opacity: 1;
  }
}
@keyframes after-display2 {
  0% {
    background-image: url("images/splash_3.webp");
    background-position: center center;
    opacity: 0;
  }
  16.67% {
    background-image: url("images/splash_3.webp");
    background-position: center center;
    opacity: 1;
  }
  33.33% {
    background-image: url("images/splash_3.webp");
    background-position: center center;
    opacity: 0;
  }
  33.34% {
    background-image: url("images/splash_2.webp");
    background-position: 0% 75%;
    opacity: 0;
  }
  50% {
    background-image: url("images/splash_2.webp");
    background-position: 0% 75%;
    opacity: 1;
  }
  66.67% {
    background-image: url("images/splash_2.webp");
    background-position: 0% 75%;
    opacity: 0;
  }
  66.68% {
    background-image: url("images/splash_1.webp");
    background-position: center center;
    opacity: 0;
  }
  83.33% {
    background-image: url("images/splash_1.webp");
    background-position: center center;
    opacity: 1;
  }
  100% {
    background-image: url("images/splash_1.webp");
    background-position: center center;
    opacity: 0;
  }
}
.display2-type:before {
  animation: before-display2 18s infinite;
  background-image: url("images/splash_2.webp");
  background-position: 0% 75%;
}
.display2-type:after {
  animation: after-display2 18s infinite;
  background-image: url("images/splash_3.webp");
  background-position: center center;
}

@keyframes before-display3 {
  0% {
    background-image: url("images/splash_3.webp");
    background-position: center center;
    opacity: 1;
  }
  16.67% {
    background-image: url("images/splash_3.webp");
    background-position: center center;
    opacity: 0;
  }
  16.68% {
    background-image: url("images/splash_2.webp");
    background-position: 0% 75%;
    opacity: 0;
  }
  33.33% {
    background-image: url("images/splash_2.webp");
    background-position: 0% 75%;
    opacity: 1;
  }
  50% {
    background-image: url("images/splash_2.webp");
    background-position: 0% 75%;
    opacity: 0;
  }
  50.01% {
    background-image: url("images/splash_1.webp");
    background-position: center center;
    opacity: 0;
  }
  66.67% {
    background-image: url("images/splash_1.webp");
    background-position: center center;
    opacity: 1;
  }
  83.33% {
    background-image: url("images/splash_1.webp");
    background-position: center center;
    opacity: 0;
  }
  83.34% {
    background-image: url("images/splash_3.webp");
    background-position: center center;
    opacity: 0;
  }
  100% {
    background-image: url("images/splash_3.webp");
    background-position: center center;
    opacity: 1;
  }
}
@keyframes after-display3 {
  0% {
    background-image: url("images/splash_1.webp");
    background-position: center center;
    opacity: 0;
  }
  16.67% {
    background-image: url("images/splash_1.webp");
    background-position: center center;
    opacity: 1;
  }
  33.33% {
    background-image: url("images/splash_1.webp");
    background-position: center center;
    opacity: 0;
  }
  33.34% {
    background-image: url("images/splash_3.webp");
    background-position: center center;
    opacity: 0;
  }
  50% {
    background-image: url("images/splash_3.webp");
    background-position: center center;
    opacity: 1;
  }
  66.67% {
    background-image: url("images/splash_3.webp");
    background-position: center center;
    opacity: 0;
  }
  66.68% {
    background-image: url("images/splash_2.webp");
    background-position: 0% 75%;
    opacity: 0;
  }
  83.33% {
    background-image: url("images/splash_2.webp");
    background-position: 0% 75%;
    opacity: 1;
  }
  100% {
    background-image: url("images/splash_2.webp");
    background-position: 0% 75%;
    opacity: 0;
  }
}
.display3-type:before {
  animation: before-display3 18s infinite;
  background-image: url("images/splash_3.webp");
  background-position: center center;
}
.display3-type:after {
  animation: after-display3 18s infinite;
  background-image: url("images/splash_1.webp");
  background-position: center center;
}

html {
  font-size: 16px;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  display: grid;
  font-family: "Roboto";
}
body .content {
  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);
  grid-template-rows: min-content minmax(320px, 1fr) min-content min-content min-content;
  grid-column-gap: var(--gap);
  padding: 0 var(--padding);
  position: relative;
}
body .content .header {
  padding: var(--gap) 0;
  grid-row: 1;
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: inherit;
  grid-column-gap: inherit;
  isolation: isolate;
}
body .content .header .logo {
  grid-column: 1;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
body .content .header .logo img {
  display: block;
  max-height: var(--logo-size);
}
body .content .header .login {
  grid-column: -1;
  width: 100%;
  display: flex;
  align-items: center;
}
body .content .header::after {
  content: "";
  position: absolute;
  border-bottom: 1px solid var(--primary-color);
  grid-row: 1/2;
  inset: 0;
  z-index: -1;
}
body .content .document {
  padding: var(--gap) 0;
  grid-row: 2;
  grid-column: 1/-1;
  color: rgba(0, 0, 0, 0.87);
}
body .content .document h3 {
  color: rgba(0, 0, 0, 0.6);
}
body .content .carousel {
  padding: var(--gap);
  grid-row: 2;
  grid-column: 1/-1;
  isolation: isolate;
}
body .content .carousel:before {
  content: "";
  position: absolute;
  grid-row: 2/3;
  inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  animation-delay: 3s;
  z-index: -1;
}
body .content .carousel:after {
  content: "";
  position: absolute;
  grid-row: 2/3;
  inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  animation-delay: 3s;
  z-index: -2;
}
body .content .download-app {
  padding: var(--gap) 0;
  grid-row: 3;
  grid-column: 1/-1;
  display: grid;
  grid-template-rows: repeat(2, min-content);
  grid-column-gap: inherit;
  grid-row-gap: var(--gap);
  grid-template-columns: inherit;
  isolation: isolate;
  align-items: center;
}
body .content .download-app .headline {
  grid-row: 1;
  color: white;
  grid-column: 1/-1;
  text-align: center;
  font-size: var(--fs-large);
}
body .content .download-app .market-buttons-container {
  grid-column: 1/-1;
  grid-row: 2;
  display: flex;
  justify-content: center;
  gap: var(--gap);
}
@media (min-width: 905px) {
  body .content .download-app {
    grid-template-columns: inherit;
    grid-template-rows: none;
  }
  body .content .download-app .headline {
    grid-column: 1/span 6;
    grid-row: 1;
    text-align: left;
  }
  body .content .download-app .market-buttons-container {
    grid-column: 7/-1;
    grid-row: 1;
    justify-content: flex-end;
  }
}
body .content .download-app:after {
  content: "";
  position: absolute;
  background-color: var(--primary-color);
  z-index: -1;
  grid-row: 3/4;
  inset: 0;
  z-index: -1;
}
body .content .cards {
  padding: var(--gap) 0;
  grid-row: 4;
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, min-content);
  grid-column-gap: inherit;
  grid-row-gap: var(--gap);
}
body .content .cards .card:nth-child(1),
body .content .cards .card:nth-child(2) {
  grid-row: 1;
}
body .content .cards .card:nth-child(3),
body .content .cards .card:nth-child(4) {
  grid-row: 2;
}
body .content .cards .card {
  grid-column: span 1;
  grid-row: 1;
  display: grid;
  grid-template-rows: repeat(2, min-content);
  grid-template-columns: 1fr;
  grid-row-gap: var(--gap);
  justify-content: center;
  align-items: flex-start;
  padding: 8px 0;
}
body .content .cards .card .card-image {
  grid-row: 1;
  grid-column: 1;
  display: flex;
  justify-content: center;
}
body .content .cards .card .card-image img {
  max-height: var(--icon-size);
  display: block;
}
body .content .cards .card .card-description {
  grid-row: 2;
  grid-column: 1;
  font-size: var(--fs-medium);
  color: var(--primary-color);
  display: block;
  text-align: center;
}
@media (min-width: 600px) {
  body .content .cards {
    grid-template-columns: inherit;
    grid-template-rows: none;
    grid-row-gap: 0;
  }
  body .content .cards .card:nth-child(n) {
    grid-column: span var(--card-span);
    grid-row: 1;
  }
}
body .content .footer {
  padding: var(--gap) 0;
  grid-row: 5;
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: inherit;
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: var(--gap);
  grid-row-gap: var(--gap);
  isolation: isolate;
  color: var(--primary-color);
  align-items: center;
}
body .content .footer:after {
  content: "";
  position: absolute;
  border-top: 1px solid var(--primary-color);
  grid-row: 5/6;
  inset: 0;
  z-index: -1;
}
body .content .footer .copyrigth {
  display: flex;
  flex-direction: column;
  grid-column: 1/-1;
  grid-row: 1;
  font-size: var(--fs-small);
  text-align: center;
}
body .content .footer .privacy-policy {
  text-align: center;
  grid-column: 1/-1;
  grid-row: 2;
  font-size: var(--fs-small);
}
body .content .footer .privacy-policy a {
  color: var(--primary-color);
  text-decoration: none;
}
@media (min-width: 600px) {
  body .content .footer {
    grid-template-columns: inherit;
    grid-template-rows: none;
    grid-row-gap: 0;
  }
  body .content .footer .copyrigth {
    grid-column: 1/span 6;
    grid-row: 1;
    text-align: left;
  }
  body .content .footer .privacy-policy {
    grid-column: -1;
    grid-row: 1;
  }
}