header{display: block; position:fixed; width: 100%; height: 12dvw; overflow: hidden; background-color: #cccccc00; z-index: 2; top: -14dvw; left: 0; transition: .5s; background-color: var(--bkg_dark)}
header img{max-height: 8dvw; margin: 1dvw}
header.scrolled{top: 0;}
#nav_logo :where(a, ul, li, p, img){
  position: relative; list-style-type: none; padding: 0; 
}
#nav_logo div{display: flex; border: solid 2px #e9d7ad; width: 10dvw; height: 10dvw; margin: 1dvw; border-radius: 50%}
#nav_logo div>img{width: 100%}

#nav_open, #lbl_nav_open, #lbl_nav_close{display: flex; position: absolute; padding: 3dvw; top: 1dvw; right: 1dvw; width: 10dvw; height: 10dvw; border: solid 2px #e9d7ad; border-radius: 50%; display: flex; padding: 0;  transition: all .5s;}
#nav_open{display: none}
#nav_open img, 
#lbl_nav_open img{align-self: center; width: auto; height: auto; margin: .5dvw; align-self: center;}



#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;
}
#nav_main{display: block; position: fixed; top: 12dvw; left: -100dvw; width: 100dvw; background-color: var(--bkg_dark); padding: 0; transition: all .5s;}
#nav_open:checked ~#nav_main{left: 0}
#nav_main :where(a, li, ul){display: block; color: #e9d7ad; text-decoration: none; list-style-type: none;position: relative;}
#nav_main>ul{margin: 0; padding: 0}
#nav_main a{padding: 5dvw; border-bottom: solid 1px #666; position: relative;}

#nav_open ~ #lbl_nav_close{width: 0; height: 0; top: 5dvw; right: 5dvw;  border: none}
#nav_open:checked ~ #lbl_nav_open{width: 0; height: 0; top: 5dvw; right: 5dvw; border: none}
#nav_open:checked ~ #lbl_nav_close{width: 10dvw; height: 10dvw; top: 1dvw; right: 1dvw;  border: solid 2px #e9d7ad}
#hero > div:nth-child(2) { grid-area: A1; display: flex; justify-content: center; align-items: center; }
#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: var(--bkg_dark); border: solid 7px #e9d7ad; border-radius: 50%; height: 50dvw; width: 50dvw; margin-bottom: 10dvw}
#hero > div:nth-child(2) > a > img{width: 80%;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}
.padding, .content{padding: 1dvw}
#hero .btn{margin: 1.5rem auto; min-width: 46dvw}
#hero .btn p{text-align: center}

#panienka_z_okienka{display: none;}

#bottom_controls{display: flex; flex-direction: column;position: fixed; bottom: 1dvh; right: 1dvh;}
  #bottom_controls a{display: flex; border: solid 3px #e9d7ad; border-radius: 50%; padding: 0dvh; width: 5dvh; height: 5dvh; background-color: var(--color_main); margin: 1dvh 0; justify-content: center; align-items: center; box-shadow: 1px 1px 2px #000}
  #bottom_controls img{filter: invert(0%) sepia(0%) saturate(100%) hue-rotate(5deg) brightness(2000%) contrast(200%); width: 80%;}