:root {
  /** primary **/
  --ion-color-primary: #000000;
  --ion-color-primary-rgb: 0, 0, 0;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-contrast-rgb: 255, 255, 255;
  --ion-color-primary-shade: #000000;
  --ion-color-primary-tint: #1a1a1a;
  /** darkblue **/
  --ion-color-darkblue: #112233;
  --ion-color-darkblue-rgb: 17, 34, 51;
  --ion-color-darkblue-contrast: #ffffff;
  --ion-color-darkblue-contrast-rgb: 255, 255, 255;
  --ion-color-darkblue-shade: #0f1e2d;
  --ion-color-darkblue-tint: #293847;
  /** black **/
  --ion-color-black: #000000;
  --ion-color-black-rgb: 0, 0, 0;
  --ion-color-black-contrast: #ffffff;
  --ion-color-black-contrast-rgb: 255, 255, 255;
  --ion-color-black-shade: #000000;
  --ion-color-black-tint: #1a1a1a;
  /** white **/
  --ion-color-white: #ffffff;
  --ion-color-white-rgb: 255, 255, 255;
  --ion-color-white-contrast: #000000;
  --ion-color-white-contrast-rgb: 0, 0, 0;
  --ion-color-white-shade: #e0e0e0;
  --ion-color-white-tint: #ffffff;
  /** valuepos **/
  --ion-color-valuepos: #14c896;
  --ion-color-valuepos-rgb: 20, 200, 150;
  --ion-color-valuepos-contrast: #ffffff;
  --ion-color-valuepos-contrast-rgb: 255, 255, 255;
  --ion-color-valuepos-shade: #12b084;
  --ion-color-valuepos-tint: #2ccea1;
  /** secondary **/
  --ion-color-secondary: #3dc2ff;
  --ion-color-secondary-rgb: 61, 194, 255;
  --ion-color-secondary-contrast: #ffffff;
  --ion-color-secondary-contrast-rgb: 255, 255, 255;
  --ion-color-secondary-shade: #36abe0;
  --ion-color-secondary-tint: #50c8ff;
  /** tertiary **/
  --ion-color-tertiary: #5260ff;
  --ion-color-tertiary-rgb: 82, 96, 255;
  --ion-color-tertiary-contrast: #ffffff;
  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
  --ion-color-tertiary-shade: #4854e0;
  --ion-color-tertiary-tint: #6370ff;
  /** success **/
  --ion-color-success: #2dd36f;
  --ion-color-success-rgb: 45, 211, 111;
  --ion-color-success-contrast: #ffffff;
  --ion-color-success-contrast-rgb: 255, 255, 255;
  --ion-color-success-shade: #28ba62;
  --ion-color-success-tint: #42d77d;
  /** warning **/
  --ion-color-warning: #ffc409;
  --ion-color-warning-rgb: 255, 196, 9;
  --ion-color-warning-contrast: #000000;
  --ion-color-warning-contrast-rgb: 0, 0, 0;
  --ion-color-warning-shade: #e0ac08;
  --ion-color-warning-tint: #ffca22;
  /** danger **/
  --ion-color-danger: #eb445a;
  --ion-color-danger-rgb: 235, 68, 90;
  --ion-color-danger-contrast: #ffffff;
  --ion-color-danger-contrast-rgb: 255, 255, 255;
  --ion-color-danger-shade: #cf3c4f;
  --ion-color-danger-tint: #ed576b;
  /** dark **/
  --ion-color-dark: #222428;
  --ion-color-dark-rgb: 34, 36, 40;
  --ion-color-dark-contrast: #ffffff;
  --ion-color-dark-contrast-rgb: 255, 255, 255;
  --ion-color-dark-shade: #1e2023;
  --ion-color-dark-tint: #383a3e;
  /** medium **/
  --ion-color-medium: #92949c;
  --ion-color-medium-rgb: 146, 148, 156;
  --ion-color-medium-contrast: #ffffff;
  --ion-color-medium-contrast-rgb: 255, 255, 255;
  --ion-color-medium-shade: #808289;
  --ion-color-medium-tint: #9d9fa6;
  /** light **/
  --ion-color-light: #f4f5f8;
  --ion-color-light-rgb: 244, 245, 248;
  --ion-color-light-contrast: #000000;
  --ion-color-light-contrast-rgb: 0, 0, 0;
  --ion-color-light-shade: #d7d8da;
  --ion-color-light-tint: #f5f6f9;
  --color-banner: var(--ion-color-primary-rgb);
  --blur-width: 25rem;
  --border-bottom-link: 5px;
  --navbar-height: 80px;
  --padding: 8px;
  --transition-delay: 300ms;
  --padding-from-border: 100px;
  --ig-color1: rgba(254, 218, 117);
  --ig-color2: rgba(250, 126, 30);
  --ig-color3: rgba(214, 41, 118);
  --ig-color4: rgba(150, 47, 191);
  --ig-color5: rgba(79, 91, 213);
  --ig-bg: linear-gradient(to right bottom, var(--ig-color1), var(--ig-color2), var(--ig-color3), var(--ig-color4), var(--ig-color5));
}

@keyframes fadein {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes knobbounce {
  0% {
    left: 0;
    width: 30px;
  }
  50% {
    left: 0;
    width: 100%;
  }
  100% {
    left: calc(100% - 30px);
    width: 30px;
  }
}
.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.modal .content {
  cursor: initial;
  animation: fadein 300ms;
  transform: translateY(0);
  opacity: 1;
  transition: var(--transition-delay);
  max-width: 80vw;
  max-height: 80vh;
  margin: auto;
  background-color: rgba(var(--ion-color-light-rgb), 0.6);
  border-radius: 20px;
  padding: calc(3 * var(--padding));
  min-width: 40%;
  min-height: 200px;
  backdrop-filter: blur(10px);
  box-shadow: 0 0 50px rgba(var(--ion-color-light-contrast-rgb), 1);
  position: relative;
}
.modal .content p {
  white-space: pre-line;
  line-height: 35px;
}
.modal button#okbutton {
  float: right;
  background: rgba(var(--ion-color-success-rgb), 1);
  color: rgba(var(--ion-color-success-contrast-rgb), 1);
}
.modal button#closebutton {
  position: absolute;
  top: 0;
  right: 0;
  background: transparent;
  color: rgba(var(--ion-color-dark-rgb), 1);
  margin: 0;
  border-top-right-radius: 20px;
}
.modal button#closebutton:hover {
  box-shadow: unset !important;
  background-color: rgba(var(--ion-color-dark-rgb), 0.1);
}
.modal.dismissing .content {
  transform: translateY(100%);
  opacity: 0;
}

.fullpageoverlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  white-space: pre-line;
  width: 100vw;
  height: 100vh;
  backdrop-filter: blur(10px);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.fullpageoverlay .content {
  padding: 1rem 2rem;
  background: rgba(var(--ion-color-primary-rgb), 1);
  border-radius: 20px;
  font-size: 1.5rem;
  min-width: 50%;
  color: var(--ion-color-primary-contrast);
  font-weight: bold;
}
.fullpageoverlay .content .progress {
  height: 15px;
  width: 50%;
  background: rgba(var(--ion-color-primary-contrast-rgb), 0.4);
  margin: 1rem auto;
  border-radius: 10px;
  position: relative;
  display: flex;
}
.fullpageoverlay .content .progress .knob {
  animation: knobbounce 2s linear 0ms infinite alternate;
  background: rgba(var(--ion-color-primary-contrast-rgb), 1);
  height: 15px;
  position: absolute;
  width: 30px;
  border-radius: 10px;
  left: 0;
}

@keyframes present {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}
@media screen and (min-width: 1000px) {
  #navbar {
    padding: 0 var(--padding-from-border);
  }
}
@media screen and (max-width: 999px) {
  nav#navbar {
    padding: 0 1rem;
  }
  nav#navbar button {
    padding: 25px 20px !important;
  }
  nav#navbar ul {
    position: fixed;
    z-index: 9999;
    background: var(--ion-color-primary);
    top: 0;
    right: -50vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    width: 50vw;
    transition: calc(var(--transition-delay) * 1.5);
  }
  nav#navbar.show ul {
    right: 0;
    z-index: 99;
  }
  nav#navbar.show #backdrop {
    z-index: 98;
    opacity: 1;
    left: 0;
  }
}
#navbar {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 999;
  background-color: rgba(var(--ion-color-primary-rgb), 1);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: var(--navbar-height);
}
#navbar .instagram-follow-required {
  display: none !important;
}
#navbar #backdrop {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: -100vw;
  opacity: 0;
  z-index: -1;
  background-color: rgba(var(--ion-color-dark-rgb), 0.5);
  transition: opacity calc(var(--transition-delay) * 1.5);
}
#navbar #logo {
  color: rgba(var(--ion-color-primary-contrast-rgb), 1);
  padding: var(--padding);
}
#navbar #logo img {
  width: 220px;
}
#navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: var(--navbar-height);
  display: flex;
}
#navbar > ul > li {
  float: right;
  height: var(--navbar-height);
}
#navbar > ul > li a {
  color: rgba(var(--ion-color-primary-contrast-rgb));
  padding: 0 var(--padding);
  text-decoration: none;
  transition: background-color var(--transition-delay);
  height: 100%;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
#navbar > ul > li#selected > a {
  background-color: rgba(var(--ion-color-primary-contrast-rgb), 0.05);
  font-weight: 600;
}
#navbar > ul > li#selected > a::after {
  content: "";
  position: absolute;
  bottom: 0;
  height: var(--border-bottom-link);
  background: rgba(var(--ion-color-primary-contrast-rgb), 1);
  width: 100%;
}
#navbar > ul > li:hover a, #navbar > ul > li:focus-within a {
  background-color: rgba(var(--ion-color-primary-contrast-rgb), 0.02);
}
#navbar > ul > li:hover a::after, #navbar > ul > li:focus-within a::after {
  content: "";
  position: absolute;
  bottom: 0;
  height: var(--border-bottom-link);
  background: rgba(var(--ion-color-primary-contrast-rgb), 0.8);
  width: 100%;
}

@media screen and (min-width: 1000px) {
  footer {
    padding: 8rem var(--padding-from-border);
  }
  footer div#toolbar {
    gap: 3rem;
  }
}
@media screen and (max-width: 999px) {
  footer {
    padding: 3rem 1rem;
  }
  footer div#toolbar {
    flex-direction: column;
  }
  footer div#toolbar ul {
    padding-left: 0;
  }
}
footer {
  background-color: rgba(var(--ion-color-primary-rgb));
  color: rgba(var(--ion-color-primary-contrast-rgb));
}
footer .instagram-follow-required {
  display: none !important;
}
footer div#toolbar {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  font-weight: 500;
}
footer div#toolbar ul {
  list-style-type: none;
}
footer div#toolbar ul:first-of-type {
  padding-left: 0;
}
footer div#toolbar ul li {
  margin: 1rem 0;
}
footer div#toolbar ul li a:visited {
  color: unset;
}
footer div#toolbar div#social {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
}
footer div#toolbar div#social div#social-row {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}
footer div#toolbar div#social div#social-row img {
  height: 30px;
}
footer div#toolbar div#copyright {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1rem;
  gap: 5px;
}
footer div#site-details {
  margin-top: 2rem;
}

@media screen and (max-width: 999px) {
  section#banner {
    display: block !important;
  }
  section#banner > div {
    height: calc(76vh - var(--navbar-height)) !important;
  }
  section#banner > div#img {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  section#banner > div#img img {
    max-height: calc(76vh - var(--navbar-height)) !important;
  }
  section#banner div#description {
    position: absolute;
    background: rgba(var(--color-banner), 0.5);
    text-align: center;
    height: calc(76vh - var(--navbar-height)) !important;
    padding: 0 2rem;
  }
  section#banner div#description h1 {
    font-size: 45px;
  }
}
@media screen and (min-width: 1000px) {
  section#banner div#description {
    position: relative;
    padding-left: var(--padding-from-border);
  }
  section#banner div#description::after {
    content: "";
    position: absolute;
    right: calc(-1 * var(--blur-width));
    height: 100%;
    width: var(--blur-width);
    background-image: linear-gradient(to right, rgba(var(--color-banner), 1), rgba(var(--color-banner), 0.5), transparent);
  }
}
section#banner {
  display: grid;
  justify-content: flex-end;
  grid-template-columns: 7fr 3fr;
  background-color: rgba(var(--ion-color-dark-rgb), 0.9);
  overflow: hidden;
}
section#banner > div {
  display: flex;
  height: calc(100vh - var(--navbar-height));
  justify-content: end;
}
section#banner #description {
  flex-direction: column;
  position: relative;
  overflow: visible;
  justify-content: center;
  background-color: rgba(var(--color-banner), 1);
  color: rgba(var(--ion-color-dark-contrast-rgb));
  height: inherit;
}
section#banner #description h1 {
  font-family: "Mulish", sans-serif;
  font-weight: 900;
  margin: 0;
  font-size: 4rem;
}
section#banner #description h1:nth-child(2) {
  color: rgba(var(--ion-color-success-rgb));
}
section#banner #description p {
  font-family: "Quicksand", Arial, sans-serif;
  font-size: 1.3rem;
  text-align: justify;
}

.formfield {
  display: flex;
  flex-direction: column;
  margin: calc(2 * var(--padding)) auto;
  background-color: rgba(var(--ion-color-dark-rgb), 0.03);
  border-radius: 5px;
  outline: 1px solid rgba(var(--ion-color-dark-rgb), 0.2);
}
.formfield label {
  padding: var(--padding);
  font-weight: 600;
  font-size: 18px;
}
.formfield .note {
  padding: calc(var(--padding) / 2);
  font-size: 10px;
  color: var(--ion-color-primary);
  border-top: 1px solid rgba(var(--ion-color-dark-rgb), 0.2);
}
.formfield input,
.formfield textarea {
  font-size: 18px;
  border: unset;
  outline: unset !important;
  margin: 0 var(--padding) var(--padding) var(--padding);
  background-color: transparent;
}
.formfield textarea {
  max-width: calc(100% - 2 * var(--padding));
  min-width: calc(100% - 2 * var(--padding));
  min-height: 50px;
  max-height: 500px;
}
.formfield.required label[for]::after {
  content: "*";
  color: rgba(var(--ion-color-danger-rgb), 1);
  margin-left: calc(var(--padding) / 2);
  font-size: 20px;
}
.formfield select {
  border: unset;
  background-color: transparent;
  outline: unset;
  width: 100%;
  padding: 2rem var(--padding) var(--padding);
  transform: translateY(-2rem);
}
.formfield select option {
  outline: none;
}
.formfield.double-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: calc(2 * var(--padding)) auto;
  background-color: transparent;
  border-radius: 0;
  outline: unset;
}
.formfield.double-column .formfield {
  width: 100%;
  display: flex;
  height: 100%;
  margin-bottom: -2rem;
  margin-top: 0rem;
}

.radio-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 0;
}
.radio-group .radio {
  flex: 1 0;
  margin-block: 0;
  text-align: center;
  padding-block: 0.2em;
  border-radius: 0;
}
.radio-group .radio input {
  display: none;
}
.radio-group .radio:first-child {
  border-radius: 5px 0 0 5px;
}
.radio-group .radio:last-child {
  border-radius: 0 5px 5px 0;
}
.radio-group .radio:has(input:checked) {
  background-color: rgba(var(--ion-color-primary-rgb), 1);
  color: var(--ion-color-primary-contrast);
}

button {
  background-color: rgba(var(--ion-color-primary-rgb), 1);
  color: rgba(var(--ion-color-primary-contrast-rgb), 1);
  padding: 15px 20px;
  border-radius: 5px;
  border: transparent;
  margin: 10px 0;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  transition: var(--transition-delay);
  opacity: 0.9;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--padding);
}
button:disabled {
  opacity: 0.7;
}
button:hover:not(:disabled) {
  opacity: 1;
  box-shadow: 0 0 5px 1px rgba(var(--ion-color-primary-rgb), 1);
  transform: scale(1.05);
}

@media screen and (min-width: 1000px) {
  *.mobile {
    display: none !important;
  }
}
@media screen and (max-width: 999px) {
  *.web {
    display: none !important;
  }
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
}

a {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

* {
  font-family: "Raleway";
}

button.menu-button {
  display: flex;
  justify-content: center;
  align-items: center;
}
button.menu-button .menu-icon {
  width: 30px;
  height: 3px;
  background-color: var(--ion-color-primary-contrast);
  border-radius: 5px;
  position: relative;
}
button.menu-button .menu-icon::before {
  content: "";
  width: 30px;
  height: 3px;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 5px;
  transform: translateY(-7px);
  background-color: var(--ion-color-primary-contrast);
}
button.menu-button .menu-icon::after {
  content: "";
  width: 30px;
  height: 3px;
  position: absolute;
  bottom: 0;
  left: 0;
  border-radius: 5px;
  transform: translateY(7px);
  background-color: var(--ion-color-primary-contrast);
}

@media screen and (max-width: 999px) {
  main section#inscricao {
    margin: 1rem;
    flex-direction: column-reverse;
  }
  main section#inscricao section#img-promo img {
    width: calc(100vw - 2rem);
    margin: 1rem;
  }
  main section#comoinscrever {
    padding-top: 3rem !important;
  }
  main section#comoinscrever div[id] {
    flex-direction: column;
    align-items: center;
  }
  main section#comoinscrever div[id] > * {
    width: clamp(150px, 80vw - 2rem, 500px) !important;
  }
}
@media screen and (min-width: 1000px) {
  main section#banner,
  main section#comoinscrever {
    height: calc(100vh - var(--navbar-height));
  }
  main section#inscricao {
    margin: 0 calc(var(--padding-from-border) / 2);
  }
  main section#inscricao h1.mobile {
    display: none;
  }
  main section#inscricao section#img-promo img {
    height: 600px;
  }
  main section#comoinscrever {
    max-height: calc(100vh - var(--navbar-height));
  }
}
main section#comoinscrever {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
main section#comoinscrever h1 {
  text-align: center;
  margin: 1rem auto;
  font-size: 40px;
}
main section#comoinscrever div#passos {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 2rem;
}
main section#comoinscrever div#passos div.passo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 1.5rem;
  margin: 1rem;
  border-radius: 20px;
  transition: var(--transition-delay);
  background-color: rgba(var(--ion-color-primary-contrast-rgb), 0.8);
  color: rgba(var(--ion-color-primary-rgb), 0.8);
  width: clamp(150px, 33% - 2rem, 380px);
  font-size: 1.5rem;
  cursor: pointer;
}
main section#comoinscrever div#passos div.passo.instagram-follow-required {
  display: none;
}
main section#comoinscrever div#passos div.passo:hover {
  box-shadow: 0 0 10px 2px rgba(var(--ion-color-primary-rgb), 0.1);
  transform: scale(1.05);
}
main section#comoinscrever div#passos div.passo .icon {
  font-size: 5rem;
  margin: 1rem;
  color: rgba(var(--ion-color-primary-rgb), 1);
}
main section#comoinscrever div#passos div.passo span.title {
  font-weight: bold;
  color: rgba(var(--ion-color-primary-rgb), 1);
}
main section#comoinscrever div#passos div.passo p {
  line-height: 30px;
  font-size: 75%;
}
main section#comoinscrever div#passos div.passo img {
  width: 5rem;
}
main section#comoinscrever div#passos div.passo .instagram-access {
  display: flex;
  gap: 20px;
}
main section#inscricao {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3rem;
  padding-inline: 1em;
  max-width: calc(100% - 2em);
  overflow-x: hidden;
}
main section#inscricao.instagram-follow-required {
  display: none;
}
main section#inscricao section#img-promo img {
  aspect-ratio: 1/1;
  box-shadow: 0px 0px 20px rgba(var(--ion-color-primary-rgb), 0.4);
  border-radius: 10px;
}
main section#inscricao div.privacy-confirm a {
  border-bottom: 1px dotted var(--ion-color-dark);
}
main.instagram-followed .hide-after-instagram-followed {
  display: none;
}