header{display: block; position:fixed; width: 100%; height: 10dvw; overflow: hidden; background-color: #cccccc00; z-index: 2; top: -10dvw; left: 0; transition: .5s}
header img{max-height: 8dvw; margin: 1dvw}
header.scrolled{top: 0;}
#hero {
  display: grid;
  width: 100%;
  margin: 0;
/*   margin-top: 10dvw; */
  padding-top: 10dvw;
  grid-template-areas:
      "A1"
      "A2"
      "A3"
      "A4";
  background-image: url(/img/bkg.webp);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  grid-gap: 0;
}
#hero > div:nth-child(2) { grid-area: A1; display: flex; justify-content: center; align-items: center; }
#hero > div:nth-child(2)>a{display: flex; justify-content: center; align-items: center; background-color: #fff; width: 50dvw; height: 50dvw; border-radius: 50%;; margin: 1rem}
#hero > div:nth-child(2)>a>img{width: 50%; height: auto;}
#hero > div:nth-child(1) { grid-area: A2; }
#hero > div:nth-child(3) { grid-area: A3; }
#hero > div:nth-child(4) { grid-area: A4; }
#hero > div:nth-child(1),
#hero > div:nth-child(3),
#hero > div:nth-child(4){background: none; padding: .5rem}

#hero > div:nth-child(2) > a{display: flex; align-items: center; justify-content: center; background-color: #ffffffdd; border: solid 3px red; border-radius: 50%; height: 40dvw; width: 40dvw}
#hero > div:nth-child(2) > a > img{width: 50%; height: auto; }
#hero :where(h1, h2, h3, h4){background-color: #ffffff88; padding: 1rem; color: #222; margin: 0; font-weight: bold}
#hero form{background-color: #ffffff66; padding: 1dvw; margin-top: -1rem}

form>div{position: relative;height: 15dvw; margin: 0;}
form>div :where(input, label, textarea), button{ top:0; left: 0; position: absolute; width: 100%; font-size: 5dvw; padding: 1dvw; height: 100%}
form>div.check{margin-top: -2rem; height: 4rem;}
form>.check label{font-size: .7rem}
form>.check>#home_frm_regulations_ok{width: 1.5rem; align-self: center}
form>.check [id*="regulations_ok"] +label{align-self: center; height: auto}

.scores{display: grid; text-align: center; grid-gap: 10dvw}
.scores img{margin: auto}