:root{
    --kleur-achtergrond: hsl(0, 11%, 91%);
    --kleur-nav-achtergrond: hsl(0, 8%, 85%);
    --kleur-letters: hsl(0, 97%, 24%);
    --box-schaduw-kleur: hsl(0, 24%, 80%);
    --letter-menu:"Noto Serif";
    --letter-teksten:"Noto Sans";
    --letter-footer: Assistant;
}

.screen-reader-text:not(:focus):not(:active) {
      clip-path: inset(50%);
      height: 1px;
      overflow: hidden;
      position: absolute;
      white-space: nowrap;
      width: 1px;    
}

*, ::before, ::after {
      box-sizing: border-box;
}
   
body{
      color: var(--kleur-letters);
      font-family: var(--letter-teksten);
      background-color: rgb(160, 152, 152);   
      margin: auto;
      max-inline-size: 1024px;
}

header, main, footer, aside{
      background-color: var(--kleur-achtergrond);
      max-inline-size: 1024px;
      padding: 20px;
}

.pagina_header{
      position: relative;
	max-inline-size: 1024px;
      background-color: var(--kleur-achtergrond);
}


strong{
      font-size: 1.1rem;
}



.header-nav-blok{
      position: absolute;
      block-size: 120px;
      display: grid;
     grid-template-columns: max-content max-content;   

}


svg{
      position: absolute;
      inset-inline-start: 22px;
      width: 50px;
      height: 50px;
} 

#menu-klik{
      display: none;
}


a:any-link{
      text-decoration: none;
      color: var(--kleur-letters);
}

a:any-link:hover{
      text-shadow: .2em .2em .4em rgb(77, 76, 76);
}

ul{
      list-style: none;
      margin: 0;
      padding: 0;
}


.menu1{
      font-family: var(--letter-menu);
      font-size: 1rem;
      margin: 10px;
      padding: 0;
      transform: translateX(-220px);
      transition: transform 500ms ease-in-out;
}

input:checked ~ ul{
      transform: translateX(0);
}

.menu1 > li{
      margin: 5px;
      padding: 5px;
      box-shadow: 2px 2px 4px var(--box-schaduw-kleur);
      background-color: var(--kleur-nav-achtergrond);
}


.dropdown-content{
      display: none; 
}


.huidige{
      border-bottom: solid 2px rgb(182, 181, 181);
}

.logo{
      inline-size: 300px;
      background-image: url(../afbeeldingen/RIW_300.png);
      background-repeat: no-repeat;     
      display: flex;
}


picture > *{
      display: inline-block;
      inline-size: 100%;
      block-size: auto;   
      z-index: 1;
}



@media screen and (min-width: 768px){ 
      .header-nav-blok{
           display: flex;
           justify-content: space-between;
          padding-inline: 20px;
      }
      .logo{
            width: 320px;
            }

      .menu1{
            display: flex;
            font-family: var(--letter-menu);
            font-size: 0.9rem;
            list-style: none;
            transform: translateX(0);
            margin: 0;
            padding: 0;
      }
      #menu-klik{
            display: none;
      }

      .menu1 > li{
            font-size: 1rem;
            margin: 6px;
            padding: 8px;
            z-index: 2;
      }

      .dropdown-btn {
            color: var(--kleur-letters);
            font-family: var(--letter-menu);
            border: none;
            display: flex;
            justify-content: space-between;     
      }
      
      .dropdown-content {
            display: block;
            list-style: none;
            position: absolute;
            top: 3.2em;   
            opacity: 0;     
      }

      .drop:hover .dropdown-content{
                  opacity: 1;      
            }   
      
      .dropdown-content li a {
            font-size: 0.9rem;
            display: block;
            padding: 0.6em 0.5em;
            color: var(--kleur-letters);
            margin: 0.3em 0;
            background-color: var(--kleur-nav-achtergrond);
            box-shadow: 2px 2px 4px var(--box-schaduw-kleur);
      }
}


@media screen and (min-width: 1024px){
      .transitie-tekst{
            font-size: 2em;
            left: 30%;     
      }
}




.naar-contact{
      font-family: var(--letter-footer);
  	position: fixed;
      max-width: 45px;
	inset-block: 20px;
      inset-inline-end: 20%;
      background-color: var(--kleur-nav-achtergrond);
	writing-mode: vertical-rl;
      text-orientation: upright;
      padding-inline: 5px;
      margin: 8px;
      z-index: 1;   
      box-shadow: 2px 2px 4px var(--box-schaduw-kleur);
      opacity: 0.8;
}  



.tekstomloop-rechts{
      inline-size: 200px;
      block-size: auto;
      float: left;
      padding-inline-end: 15px;  
}

.tekstomloop-links{
      inline-size: 200px;
      block-size: auto;
      float: right;
      padding-inline: 10px;
      margin-inline: 10px;
      padding-block-end: 10px;     
}

.tekstomloop-re{
      inline-size: 200px;
      block-size: auto;
      float: left;
      padding-inline-end: 10px;
        
}

article{
      display: flex;
      flex-wrap: wrap;
      gap: 10px;         
}

.art{
      box-shadow: 2px 2px 4px var(--box-schaduw-kleur);
      padding: 10px;
      margin: 10px;
}

.art img{
      max-width: 50%;
}

.art p{
      font-size: 1rem;
}

.cen {
      text-align: center;
      padding: 5px;
      margin: 40px;
      line-height: 2;
      background-color:  var(--box-schaduw-kleur);
}


@media screen and (min-width: 768px){      
      article{
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: auto;
            gap: 5px;
      }

      .art{
            box-shadow: 2px 2px 4px var(--box-schaduw-kleur);
            padding: 10px;
            margin: 10px;
      }

}


.img-kaarten{
      block-size: auto;
      display: block;
      inline-size: 100%;
      object-fit: cover;
      padding-top: 10px;
}

.centreren, .centreren2{
      flex: 1;
}


.centreren4{
      text-align: center;
      margin-top: 0;
      padding-top: 0;
      margin-left: 10px;
      font-size: 1.2em;
      padding: 10px;
      margin: 0;
      max-width: 100%;
      background-image: linear-gradient(90deg, var(--kleur-nav-achtergrond) , var(--kleur-achtergrond), white, var(--kleur-achtergrond),  var(--kleur-nav-achtergrond));
}

.centreren5{
      text-align: center;
      margin-top: 0;
      padding-top: 0;
      margin-left: 10px;
      font-size: 1.8em;
      font-weight: 600;
      padding: 10px;
      margin: 0;
      max-width: 100%;
      background-image: linear-gradient(90deg,  var(--kleur-nav-achtergrond), var(--kleur-achtergrond), white, var(--kleur-achtergrond),  var(--kleur-nav-achtergrond));
}

.left{
      text-align: left;
}



.naar-boven{
      font-family: atma;
      font-size: 1.5rem;
      box-shadow: 2px 2px 4px var(--box-schaduw-kleur);
      margin: auto;
      padding: 10px;
      inline-size: max-content;
}

.naar-boven a{
      text-align: center;
      text-decoration: none;
}

.inspiratie{
      background-image: linear-gradient(90deg,  var(--kleur-nav-achtergrond), var(--kleur-achtergrond));
      padding: 25px;
      margin-block: 20px;
      
       box-shadow: 2px 2px 4px var(--box-schaduw-kleur);
}
.insp{
      font-size: 1.4rem;
}

.lijn{
      block-size: 2px;
      background-image: linear-gradient(90deg, var(--kleur-letters),var(--kleur-nav-achtergrond), var(--kleur-letters));
      margin-block: 10px;
      margin-inline: 40px;
  }


.nav-footer{
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto;
      gap: 5px;
      font-size: smaller;
      font-family: var(--letter-footer);
      margin-inline: 20px;
}

.footer{
      display: flow-root;
}


@media screen and (min-width: 768px){
      .nav-footer{
            grid-template-columns: 1fr 1fr 1fr 1fr;
      }
}


.geen{
      margin-inline: 20px;
      font-family: 'Courier New', Courier, monospace;
}


.accent{
      margin-inline: 10px;
       font-family: atma;
       font-size: 1.8rem;
       text-align: center;
      padding: 10px;
     
}

.gehele-breedte{
      font-family: 'Courier New', Courier, monospace;
      font-size: 1.7rem;
      margin: 20px;
}

.navigatie_producten{
      display: flex;
      flex-flow: row wrap;
}


.kiezen{
      font-family: atma;
      padding: 10px;
      margin: 10px;
      background-color: var(--kleur-nav-achtergrond);
      box-shadow: 2px 2px 4px var(--box-schaduw-kleur);
}


.container_producten{
      display: grid;
      grid-template-columns: 1fr;
      grid-column: auto;
      padding: 0;
      margin: 0;     
}
  
.producten{
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: max-content max-content max-content;
      inline-size: 90%;
      padding-block: 0.5rem;
      margin: 10px;
      padding: 10px;
      text-align: center;
      box-shadow: 2px 2px 4px var(--box-schaduw-kleur);
      margin-block: 10px;     
}

.centreren3{
      display: grid;
      margin: auto;
}


@media screen and (min-width: 768px){
      .container_producten{
            grid-template-columns: 1fr 1fr;   
      }
}     

@media screen and (min-width: 1024px){
      .container_producten{
            grid-template-columns: 1fr 1fr 1fr; 
      }
}


.inspiratie a{
      font-size: 1.3rem;
}

.linken_leveranciers_afb img{
      max-block-size: 95px;
      padding: 10px;
      margin: 20px;
}


.linken_leveranciers_afb img:hover{
      box-shadow: 2px 2px 4px var(--box-schaduw-kleur);
}


form
    {
      box-shadow: 2px 2px 4px var(--box-schaduw-kleur);
      padding: 15px;
      width: 500px;
      font-family: Arial, Helvetica, sans-serif;
}


label
    {
    float: left;
    width: 150px;
    text-align: right;
    margin-right: 15px;
}

input
    {
    border-width: 1px;
    border-style: solid;
    border-color: #cccccc;
    margin-bottom: 10px;
}	

select
    {
    width: 200px;
    font-size: x-small;
    border-color: #cccccc;
    border-style: solid;
    border-width: 1px;
    margin-bottom: 10px;
}


.box{
      display: flow-root;  
      margin-inline: 20px; 
}


table{
      font-family: var(--letter-menu);
      empty-cells: hide;
      margin: auto;
      padding-block-end: 30px;
}


th{
      border: 1px solid var(--kleur-letters);
      padding: 5px;
      margin: 5px; 
}

tr{
      border: 1px solid var(--kleur-letters);
      padding: 5px;
      margin: 5px;
}

td{
      border: 1px solid var(--kleur-letters);
      padding: 5px;
      margin: 5px;
}

.meer-info{
      padding: 10px;
      margin:10px;
      background-color: var(--kleur-nav-achtergrond);
      box-shadow: 2px 2px 4px var(--box-schaduw-kleur);
}