@font-face {
  font-family: "NotoSans";
  src: url(../assets/fonts/Noto_Sans/NotoSans-VariableFont_wdth\,wght.ttf);
}
:root {
  --bg-color: #fff;
  --heading-color: #133d53;
  --text-color: #435d63;
  --dark-bg-color: #008dd6;
  --link-color: #008dd6;
  --link-hover-color: #48b0f7;
  --accent-color: #f86666;
  --footer-bg-color: #133035;
  --footer-text-color: #eef;
  --content-max-width: 1200px;
  --common-number: 30px;
  --shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  font-family: "NotoSans";
  font-size: 1.6vw;
  color: var(--text-color);
}
@media (max-width: 1000px) {
  :root {
    font-size: 12pt;
  }
}
@media (min-width: 1400px) {
  :root {
    font-size: 16pt;
  }
}
@media (min-width: 1920px) {
  :root {
    font-size: min(1.2vw, 20pt);
  }
}

body {
  margin: 0;
  overflow-x: hidden;
}
body > * {
  max-width: 100%;
}

.buttonlike {
  transition: border-color 100ms ease-in-out, background-color 50ms ease-in-out, color 100ms ease-in-out;
}

.content {
  max-width: var(--content-max-width);
  margin: auto;
}

h1, h2, h3 {
  margin: var(--common-number) 0;
  color: var(--heading-color);
}
.inverse h1, .inverse h2, .inverse h3 {
  color: var(--bg-color);
}

h1, h2 {
  font-size: 2.5rem;
}

h3 {
  font-size: 1.3rem;
}

a {
  text-decoration: none;
  color: var(--link-color);
}
a:hover {
  color: var(--link-hover-color);
}
a.discreet {
  color: inherit;
}
a.buttonlike {
  font-weight: 800;
}

p {
  text-align: left;
}

nav {
  display: flex;
  gap: 10px;
  padding: 20px;
  align-items: center;
}
nav #top-logo {
  flex: 1 1 100%;
}
nav > .pages {
  display: flex;
}
nav > .pages a {
  padding: 10px 15px;
  margin: 1px 0;
}
nav > .pages a:hover {
  margin-bottom: 0;
  color: var(--accent-color);
  border-bottom: 1px solid var(--accent-color);
}
nav > .buttonlike {
  background-color: var(--dark-bg-color);
  color: var(--bg-color);
  padding: 16px 26px;
  border-radius: 10px;
}
nav > .buttonlike:hover {
  background-color: var(--link-hover-color);
}
@media (max-width: 500px) {
  nav {
    box-shadow: var(--shadow);
    padding: 10px 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  nav > .buttonlike {
    margin-left: auto;
  }
  nav > .pages {
    flex: 0 0 100%;
    order: 1;
    gap: 20px;
    grid-column: span 2;
    justify-content: flex-end;
    margin: -5px -20px -10px -20px;
    padding: 10px 20px;
    background-color: var(--dark-bg-color);
  }
  nav > .pages > a {
    margin: 0;
    padding: 0;
    border-bottom-width: 0 !important;
    color: var(--bg-color) !important;
  }
}

form {
  margin: auto;
  display: grid;
  grid-template-columns: minmax(30%, auto) 1fr;
  max-width: var(--content-max-width);
  gap: 1.2rem;
  align-items: center;
}
@media (max-width: 500px) {
  form {
    grid-template-columns: 1fr;
  }
}
form input, form textarea {
  max-width: 600px;
}
form textarea {
  height: 100px;
}
form .full-row {
  grid-column: 1/3;
}
@media (max-width: 500px) {
  form .full-row {
    grid-column: 1;
  }
}
form .buttonlike {
  margin: 30px auto 30px auto !important;
}
form .buttonlike:hover {
  margin: 28px auto 28px auto !important;
}
form > label {
  text-align: end;
}
@media (max-width: 500px) {
  form > label {
    text-align: start;
    margin-bottom: -0.6rem;
  }
}

fieldset {
  border: none;
  display: grid;
  grid-template-columns: auto;
  gap: 0.6rem;
  padding: 0;
}
fieldset > label {
  text-align: start;
}
fieldset > label > input {
  margin: 0;
  margin-right: 0.6rem;
}

input, textarea {
  padding: 0.6rem;
  border: 2px solid var(--link-color);
  border-radius: 5px;
  font-size: 1rem;
}

.center {
  text-align: center;
}

main > section {
  padding: var(--common-number);
  text-align: center;
}
main > section .buttonlike {
  margin: 100px 2px 70px 2px;
  padding: 15px 20px;
  border-radius: 1000px;
  display: inline-block;
  text-transform: uppercase;
  border: none;
}
main > section .buttonlike:hover {
  border: 2px solid;
  margin: 98px 0 68px 0;
}
main > section:not(.inverse), main > section.inverse .buttonlike, main > section:not(.inverse) .buttonlike:hover {
  background-color: var(--bg-color);
  border-color: var(--dark-bg-color);
}
main > section.inverse, main > section:not(.inverse) .buttonlike, main > section.inverse .buttonlike:hover {
  background-color: var(--dark-bg-color);
  color: var(--bg-color);
  border-color: var(--bg-color);
}
main > section.inverse .buttonlike {
  box-shadow: var(--shadow);
}
main > section:not(.inverse) .buttonlike:hover, main > section.inverse .buttonlike:not(:hover) {
  color: var(--link-color);
}
main > section .cards {
  display: flex;
  flex-direction: row;
  gap: var(--common-number);
  padding-top: var(--common-number);
}
@media (max-width: 900px) {
  main > section .cards {
    flex-direction: column;
  }
}
main > section .cards .card {
  flex: 1 1 0;
  width: 1fr;
  text-align: center;
  padding: var(--common-number);
  border-radius: 20px;
  box-shadow: var(--shadow);
  background-color: var(--bg-color);
  color: var(--text-color);
}
main > section .cards .card img {
  margin: 10px 0;
  max-width: clamp(40px, 5vw, 20%);
}
main > section .cards .card h3 {
  margin: 0;
  color: var(--heading-color);
}
main > section .cards .card p {
  text-align: center;
}
main #top {
  background: url("../assets/img/puita-1.svg") no-repeat 100% 100%/60vw, url("../assets/img/cloud2.svg") no-repeat calc(100% - 45vw) calc(100% - 30vw)/20vw, url("../assets/img/cloud2.svg") no-repeat calc(100% - 20vw) calc(100% - 50vw)/14vw, url("../assets/img/nidos-cloud1.svg") no-repeat calc(100% - 2vw) calc(100% - 40vw)/11vw, url("../assets/img/nidos-cloud1.svg") no-repeat -5vw calc(100% - 20vw)/13vw;
  min-height: 40vw;
  position: relative;
}
@media (max-width: 900px) {
  main #top {
    background: url("../assets/img/puita-1.svg") no-repeat 100% 100%/100vw, url("../assets/img/cloud2.svg") no-repeat -2vw calc(100% - 50vw)/30vw, url("../assets/img/nidos-cloud1.svg") no-repeat calc(100% - 3vw) calc(100% - 65vw)/20vw;
    padding-bottom: 50vw;
  }
}
main #top .content {
  text-align: left;
  margin-left: 10vw;
  padding-right: 60vw;
  padding-bottom: 10vw;
}
main #top .content .buttonlike {
  margin-top: 50px;
  margin-bottom: 100px;
}
main #top .content .buttonlike:hover {
  margin-left: -2px;
  margin-top: 48px;
  margin-bottom: 98px;
}
@media (max-width: 900px) {
  main #top .content {
    padding: 0;
    margin: 0;
    text-align: center;
  }
  main #top .content .buttonlike {
    margin-top: 30px;
    margin-bottom: 120px;
  }
}
main #top #slope {
  position: absolute;
  background-color: var(--dark-bg-color);
  clip-path: polygon(0% 0%, 0% 110%, 110% 110%);
  height: 10vw;
  bottom: 0;
  left: 0;
  right: 0;
}
main .subpagetop {
  --subpagetop-bg-h: clamp(300px, 30vw, 800px);
  background: url("../assets/img/reflect2.svg") no-repeat 100% 100%/auto var(--subpagetop-bg-h), url("../assets/img/water.svg") repeat-x 100% 100%/auto var(--subpagetop-bg-h);
  padding-bottom: calc(var(--subpagetop-bg-h) - 190px);
}
main #bottom {
  padding-bottom: 20vw;
  background: url("../assets/img/cloud2.svg") no-repeat -2vw calc(100% - 5vw)/10vw, url("../assets/img/cloud2.svg") no-repeat calc(100% + 4vw) calc(100% - 8vw)/14vw, url("../assets/img/mountain1.svg") no-repeat 0% 100%/30vw, url("../assets/img/mountain2.svg") no-repeat 100% 100%/30vw, url("../assets/img/nidos-cloud1.svg") no-repeat calc(100% - 24vw) calc(100% - 16vw)/11vw, url("../assets/img/nidos-cloud1.svg") no-repeat 16vw calc(100% - 20vw)/13vw;
}
main #bottom p {
  text-align: center;
}
main #bottom #leaf {
  width: 7vw;
  min-width: 70px;
}

footer {
  background-color: var(--footer-bg-color);
  color: var(--footer-text-color);
}
footer > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 500px) {
  footer > div {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
  }
}
footer > div > section {
  padding: var(--common-number);
}
@media (max-width: 500px) {
  footer > div > section {
    padding: 10px;
  }
}
footer > div > section:first-child {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
footer > div > section:first-child #bottom-logo {
  width: 48px;
  flex: 0;
  padding: 5px 0;
}
footer > div > section:last-child {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 20px;
}
@media (max-width: 500px) {
  footer > div > section:last-child {
    flex-direction: row;
  }
}

svg > * {
  fill: blue;
  color: blue;
  stroke: blue;
}

/*# sourceMappingURL=global.css.map */