header [class^="menu-menu"]{  display: flex; position: absolute; top: 15dvw; left: -120dvw; width: 100dvw; height: auto ;position: fixed; background-color: #ddd; transition: all .25s }
header [class^="menu-menu"] a{display: flex; border-bottom: solid 1px #aaa; width: 100dvw; padding: 5dvw; text-decoration: none; color: #222}
header>a{display: grid; grid-template-columns: 1fr 8fr; grid-gap: 2dvw; align-items: center; font-family: Chakra Petch; font-weight: bold; text-decoration: none; color: #222; font-size: 8dvw; padding: 0; }
header>a>p{margin: 0; padding: 0; top: -0dvw; position: relative; font-weight: bold; font-size: 3dvw}
header a img{width: 8dvw; height: 8dvw}
h1, h2, h3, h4, h5, h6{
  font-family: Chakra Petch;
  font-size: 5dvw;
  margin-top: 2.5dvw; margin-bottom: 2dvw;
  line-height: 6dvw;
  font-weight: 600;
}
h2{font-size: 3dvw;
  margin-top: 3dvw; margin-bottom: 1dvw;
  line-height: 4dvw;
}
h3{font-size: 2dvw;
  margin-top: 2dvw; margin-bottom: .5dvw;
  line-height: 3dvw;}
h4{}

#nav_open:checked ~  [class^="menu-menu"]{left: 0}
#lbl_nav_open, #lbl_nav_close{display: flex; position: fixed; align-content: center; justify-content: center; align-items: center;font-size: 9dvw;right: 1dvw; top: 1dvw; height: 13dvw; width: 13dvw; transition: all .5s; cursor: pointer}
#nav_open ~#lbl_nav_open{height: 13dvw; width: 13dvw; top: 1dvw; right: 1dvw;}
#nav_open ~#lbl_nav_close{top: 6.5dvw; right: 6.5dvw;width: 0; height: 0; overflow: hidden;}
#nav_open:checked ~#lbl_nav_open{top: 6.5dvw; right: 6.5dvw; width: 0; height: 0; overflow: hidden;}
#nav_open:checked ~#lbl_nav_close{height: 13dvw; width: 13dvw; top: 1dvw; right: 1dvw;}

#hero{
  display: flex;
  align-items: center;
  justify-content:  center;
  height: 100dvw;
  position: relative;
  z-index: 0;
  filter: drop-shadow(-1px 1px 1px #444); 
  padding: var(--screen_padding);
}
.slogan{
  display: block; 
  position: relative;
  z-index: 1;
  border: none;
  background-color: #fff;
  
}
#hero img{width: 100%; height: auto}
#hero img:last-of-type{position: absolute; width: 70%}
#hero .slogan.side_left{clip-path: polygon(30% 0%, 100% 0, 100% 100%, 10% 100%); width: 100dvw; z-index: 2;text-align: right; padding: 0dvw 5dvw 0dvw 30dvw ; bottom: 0; right: 0; position: absolute; box-shadow: 2px 2px 8px #000; }
#hero .slogan h1{font-size: 5dvw; line-height: 6dvw; margin: 4dvw 0}

.home_about h2 {
  text-align: center;
}
.post_thumbnails h2, .home_about p{font-size: 2.5dvw; line-height: 4dvw; margin-bottom: 6dvw}



#cw{
  right: 5dvw; bottom: 5dvw;
}
#cw label{border: solid 1px #640000; background-color: #640000; width: 12dvw; height: 12dvw; display: flex; padding: 3.5dvw;border-radius: 50%}
#cw_phone{display: none;}
#cw_phone +a{font-size: 5dvw; margin: 2dvw; padding-left: 5dvw; padding-right: 1dvw; margin: 0; margin-left: -5dvw ;line-height: 12dvw; z-index: -1; }
#cw_phone:checked +a{width: 44dvw; height: 12dvw}
#cw_phone:checked ~ label{height: 5mm; width: 5mm; padding: 0mm}


#cookie-consent-banner{padding: 1dvw 2dvw}
#cookie-consent-banner :where(h3,p, label, strong, select, option, button, div){font-size: 3dvw; line-height:  4dvw; }
#cookie-consent-banner h3{font-size: 5dvw; line-height: 6dvw}
#cookie-consent-banner>.cookie-consent-options, 
#cookie-consent-banner>.cookie-consent-buttons{display: flex; flex-direction: column; gap: 3dvw; margin-top: 4dvw}
#cookie-consent-banner>.cookie-consent-buttons button{width: 60%; margin: auto; padding: 1dvw; border-radius: 1mm}
#cookie-consent-banner>.cookie-consent-options{flex-direction: row;flex-wrap: wrap;}
#cookie-consent-banner>.cookie-consent-options>label{width: 40dvw}