header{ display: grid; position: fixed; background-color: var(--bkg_dark); top: 0rem; left: 0; width: 100%; grid-template-columns: 3fr 5fr; height: 5dvw; padding: .5dvw 10dvw;  z-index: 2; transition: 1s; box-shadow: 0 1px 1px #000;}
header *{ color: #e9d7ad !important}
/*header.scrolled{top: 0}*/
header>#nav_logo>ul>li>a{display: flex; gap: 1dvw; align-items: center}
header>#nav_logo>ul>li>a>p{margin-top: .15dvw}
header img{max-width: 100%;margin: 0;}
header ul{padding: 0}
header>#nav_logo div{display: flex; border: solid; padding: .4dvw; margin: 0; border-radius: 50%; height: 4dvw; width: 4dvw;}
.padding{padding: .5dvw 10dvw;}
.columns_2, .columns_3, .columns_4{display: grid; grid-gap: 1dvw; grid-template-columns: 1fr 1fr 1fr 1fr;}
.columns_2{grid-template-columns: 1fr 1fr 1fr;}
.columns_2{grid-template-columns: 1fr 1fr;}
button, input[type="button"], .btn{
  display: grid; 
  grid-gap: .25rem; 
  width: fit-content; 
  grid-template-columns: 1.5rem auto; 
  background-color: var(--color_main); 
  color: #fff;
  padding: .15rem 1.5rem 0 .5rem; margin: 1dvw; 
  min-width: 10dvw;
  text-decoration: none; 
  text-align: left;
  justify-items: center; 
  align-items: center;
  border-radius: .15rem;
  border: solid 1px var(--bkg-dark);
   box-shadow: 1px 1px 1px #111;
  cursor: pointer
}
button p, input[type="button"] p, .btn p{text-align: left; width: 100%}
button>img, input[type="button"]>img, .btn>img{ width:1.5rem; height: auto; margin: 0; margin-top: -.2rem}
#nav_open, #lbl_nav_open, #lbl_nav_close{display: none;}
#nav_logo :where(a, li, ul, img, p) {list-style-type: none; font-weight: 500; font-size: 2.35rem; line-height: 100% ;text-decoration: none; color: #0a474e; font-family: "Tomorrow", sans-serif;}
#nav_logo p{margin-top: -.25rem; line-height: 100%; font-size: 2.3dvw}

#nav_main {display: flex; justify-content: end; align-items: center}
#nav_main :where(ul, li, a){list-style-type: none; text-decoration: none; color: #0a474e; font-weight: bold;}
#nav_main>ul{display: flex; flex-direction: row; gap: 1rem;padding: 1rem 0; position: relative}

#nav_main ul *{margin: 0; padding: 0}
#nav_main li{height: auto; padding: 0; margin: 0}
#nav_main ul li ul{display: flex; position: absolute; width: 0;flex-direction: column; transition: .25s; overflow: hidden; background-color: #0a474e; z-index: 2; top: 65%; transform: scale(0);}
#nav_main ul li ul a{display: block; color: #fff; border-bottom: solid 1px #ccc; width: 100%; padding: 1rem; margin: 0; height: 100%}
#nav_main ul li ul a:hover{background-color: var(--border_color_dark);}
#nav_main ul li:hover ul{display: flex; width: fit-content;transform: scale(1);}
#hero {
  display: grid;
  grid-gap: 2dvw;
  align-items: center;
  padding: .5dvw 10dvw;
  padding-top: 3dvw;
  width: 100%;
  height: 100dvh;
  margin: 0 auto;
  
  grid-template-areas:
      "A1 A2 A3"
      "A4 A4 A4";
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr 1fr;
  background-image: url(/img/bkg3a.webp);
  background-position: center;
  background-position-y: 20dvh;
  background-size: 70%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: #ddd;
}
#hero > div:nth-child(1) {
  grid-area: A1;
}
#hero > div:nth-child(2) {
  grid-area: A2;
  display: flex;
  justify-content: center;
  align-items: center;
}
#hero > div:nth-child(3) {
  grid-area: A3;
}

#hero > div:nth-child(4) {
  grid-area: A4;
/*   background-color: #ffffffcc; */
  padding: 1dvw;
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;
  justify-items: center;
}

/* */

#hero >div:nth-child(4) .btn:hover{
   background-color: var(--background_color_hover);
}
#hero > div:nth-child(4) .btn:hover{background-color:  var(--background_color_hover);}
#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: 20dvw; width: 20dvw}
#hero > div:nth-child(2) > a > img{width: 80%; height: auto; }
#hero :where(h1, h2, h3, h4){background-color: var(--bkg_dark); padding: 1rem; text-align: left;color: #e9d7ad; margin: 0;}
#hero form{background-color: var(--bkg_dark); padding: 1dvw}
form>div{margin-top: 1.5rem}
form>div.check{margin-top: -1.8rem; height: ;}
form>.check [id*="regulations_ok"]{position: relative; width: 1.5dvw; margin: 0dvw;}
form>div.check [id*="regulations_ok"] +label{position: relative; background: none; color: #222; top: initial; left: 0; font-size: .8rem; align-self: center;height: auto}
form>div.check [id*="regulations_ok"]:checked +label{color: #fff}
.scores{text-align: center; color: #fff}

.bkg_left, .bkg_right {
  display: block;
  padding: .5dvw 10dvw; margin: 0dvw; 
  background-image: url(/img/bkg2.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  padding: 0;
  position: relative;
  
}
.bkg_right div, .bkg_left div{
  position: relative;
  background-color: #fff;
  padding: 5dvw 10dvw;
  clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
  margin: 0;
  
/*   margin-bottom: -15rem; */
  text-align: left;
  width: 50%;
  height: 100%;
}
.bkg_left div{
  width: 50%;
  left: initial; right: -50%;
  padding: 5dvw 10dvw; 
  clip-path: polygon(0% 100%, 20% 0, 100% 0, 100% 100%) !important;;
  
}
.bkg_right div *{text-align: left; }
.bkg_left div *{  text-align: justify;}

footer{
  grid-template-columns: repeat(4, 1fr);
  padding: 1dvw 10dvw;
  grid-gap: 1dvw;
}
footer a{display: block;width: 100%; padding: .5dvw}
footer a:hover{
  background-color: var(--border_color_dark);
}


  #panienka_z_okienka{display: flex; position: fixed; z-index: 10; right: 1rem; bottom: 2rem; width: 13dvw; height: 2.5rem;
    align-items: center; align-content: center; background-color: rgba(255, 255, 255, .8); padding: .25dvw .5dvw; border-radius: .0rem 28% 28% 0rem ; border: solid 1px #aaa
  }
#panienka_z_okienka>a>div{display: flex; align-items: center; border: solid 4px #e9d7ad ; background-color: var(--bkg_dark); width: 4.3dvw; height: 4.3dvw; border-radius: 50%; padding: .3dvw; margin-left: .5dvw; box-shadow: 0px 0px 3px #222}
  #panienka_z_okienka>a>div>img{width: 100%; height: auto; align-self: center; }
  #panienka_z_okienka a{color: #000; font-size: 1dvw; text-shadow: 0 0 4px #fff; text-decoration: none;font-family: "Tomorrow", sans-serif; font-weight: 400}
#panienka_z_okienka a:first-of-type{}

#bottom_controls{display: none;}