:root{
    --bg-blew-900:#00283D;/*#003D5C*/
    --bg-black-900:#1B2631;
    --bg-card-100:#fdfdfd;
    --bg-card-200:#fdfdfd;
    --bg-box-3:yellow;
    --bg-mark-1:blue;/*blue;*/
    --bg-mark-2:yellow;
    --bg-mark-3:red;
    --bg-cardimage-50:#004082;/*#004A96;/*black*/
    --bg-cardbutton-50:#504e70;
    --bg-cardbutton-grijs:grey;
    --text-black-900:#302e4d;
    --text-black-700:#504e70;
    --color-headings: #302e4d;
    /*extra flip card*/
    --level-one: translateZ(3rem);
  --level-two: translateZ(6rem);
  --level-three: translateZ(9rem);  
  --fw-normal: 400;
  --fw-bold: 700;  
  --clr: #b7c9e5;
    --DD-back:white;/*#252525;*/
    
}
*{
    margin:0;scroll-behavior:smooth;
    padding: 0;
    box-sizing: border-box;
    /*font-family: Arial;*/
}
@media print {
  body {
    font-size: 8pt;
  }
    header, .EE, .Terrein, .footer{display:none;}
    article .calc{display:none;}
    article img{display:none;}
    .tree details{display:block;}
   div.accordion__content {
  display: block;
}
    DIV.DD{top:0px;margin-top:0px;}
    button.button{display:none;}
    .newpage{page-break-before:always;}
}
html{font-size:100%;}
body{    
    background-color:var(--bg-cardimage-50);
    /*background-color:var(--bg-blew-900);*/
    /*background: url('../picture/bg.jpeg') ;
    background-size: cover;
    height: 100vh;background-repeat: no-repeat;
    background-position: center;
    overflow-x:hidden;transition: all .5s;*/
    
    /*Nieuwe code Prima idee*/
    font-family:Helvetica;/*font-size:100%;*/
}
/*NIEUW*/
/*@media (900px<width){    
    body{
        background-color:var(--bg-black-900);}
}*/
@media (750px < width < 899px){
    @keyframes rotate{
from{
	transform:rotate(-360deg);	
}
to{
	transform:rotate(0deg);	
}

}
    
}
@media(600px > width) {
    /*body{ background-color:black;}*/
    div.boat{display:none;}
    div.wave{display:none;}
   
}
@media(1180px > width) {
    div.mazda2{display:none;}
    div.mazda3{display:none;}
    div.human{display:none;}
}
@media(width > 1180px) {body{ background-color:#004082;}   }
/*start extra uit style24*/
 main .card img {
  max-width: 100%;
  border-radius:15px 15px 0 0;vertical-align:middle;
        background-repeat:no-repeat;background-size:cover;shape-margin:0.75rem;
}
 main .card9 img {
        /*width: 75%;*/
        /*filter:drop-shadow(.75em .75em 1em);*/
        color:grey;
        display:block;
        margin-left:auto;
        margin-right:auto;
        margin-top:2px;
        border-radius:15px 15px 0 0;
}

main .card9 .circular--square {
        border-radius: 50%;}     
         
 main article #names{
      list-style-type: none;
      }
      main article ul li{
      /*list-style-type: none;*/margin-left:5px;
      } 
main article ol li{
      margin-left:10px;
      }     
/*stop*/

.DD{
    font-size:13px;
    /*border-top:2px solid red;
    border-bottom:2px solid red;*/
    display:flex;margin-bottom:5px;
    justify-content:center;
    color:white;z-index:3;
    /*background-color:var(--DD-back);*/
    /*background:#111;*/
    /*opacity:0.9;*/
    padding:2px;width:auto;
    margin-top:82px;/*65px old*/}
.footer{
    position:notfixed;
    left:0;
    margin-top:5px;
    bottom:0;
    width:100%;
    background-color:red;
    color:white;
    width:auto;
    text-align:center;}
/*
.accordion {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem,100%), 1fr));
  cursor: pointer;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  overflow: hidden;
  font-family: "Quicksand", sans-serif;
  
   /*background: url("../picture/bg.jpeg") no-repeat;
  background-position: bottom;
  background-size: cover;
  height: 100%;padding-right:5px;padding-left:5px;
  transition: all .5s;
}
*/
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(368px,100%), 1fr));
    /*grid-template-columns: repeat(auto-fit, minmax(368px, 1fr));*/
  grid-gap: 10px;
  align-items: stretch;/*background: url("../picture/bg.jpeg") no-repeat;
  background-position: top;
  background-size: cover;*/
}

.grid > article {
  border: 1px solid #ccc;
  box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);background-color:var(--bg-card-100);
}

.grid > article img {
  max-width: 100%;
}

.grid .text {
  padding: 20px;
}
/*extra lay-out van vorige versie*/
/*.collection-item{
      	counter-increment:dirk-teller;
      }*/
/*h3{
      position:relative;z-index:1;display:inline-block;
      }
      h3::after{
        content:"";
        position:absolute;
        left:0.2rem;
        width:calc(100% + 1px);height:30px;top:-0.28rem;
        background:var(--bg-blew-900);opacity:0.6;
        z-index:-1;
        
        transform:scaleX(0.06);
        transform-origin:left;
        transition:transform 250ms ease-in;
      }*/
      h3 { 
    display: block;
    font-size: 14px;/*text-transform: uppercase;*/
    padding: 3px 20px 2px;/*display: flex1;*/
    font-weight: bold;border-bottom:1px solid #669BD1;
    border-right:1px solid #669BD1;box-shadow: 1px 1px #888888;
    color:white;background: var(--bg-blew-900);
}

 

     h3::before{
        /*color:yellow;*/
      	content:counter(dirk-teller) " . ";
      }
/*extra update picture*/
.cardA{
      width:150px;
        height:120px;border-radius:20px;overflow:hidden;
        /*border:8px solid green;*/
    position:relative;
      }
      .cardA-img{width:100%;height:100%;object-fit:cover;
      border-radius:15px;
      }
      .card-body{
      width:100%;height:100%;top:0;right:-100%;position:absolute;background:#1f3d4738;
        backdrop-filter:blur(5px);border-radius:15px;color:#fff;padding:5px;
        display:flex;flex-direction:column;justify-content:center;
        transition:2s;
      }
      .cardA:hover .card-body{right:0;cursor:pointer;}
      .card-title{
      text-transform:uppercase;font-size:24px;font-weight:500;
      }
      .card-info{
      font-size:14px;line-height:20px;font-weight:400;
      }
/*stop update picture*/
.card{
      border-radius:15px;/border:1px solid rgba(255,255,255,0.18);   
      } 
    main .card .text {
  padding: 1rem;
}
       main .card .button {
    background-color:var(--bg-cardbutton-grijs);
    border: 0px solid red;
    color: white;margin-bottom:5px;
    padding: 10px;cursor:pointer;
    width: auto;     
      }
      main .card .button:hover {
   background: Blue;box-shadow: 5px 15px 30px rgba(0, 0, 0, 0.6);   
      }
      
      #cyclus{
        /*color:black;*/
        /*font-weight: bold;*/
        background:cadetblue;
        width: 90%;
        border-radius:5px;
        padding:2px;
        margin-top:2px;
      }
       main .imageD .circular--square {
        border-radius: 50%;background:green;margin:5px;}
			.imageD{
      display:flex;
        width:69px;
        height:69px;
        justify-content:center;       
      }
 .collection-header{
    background:green;
    width:auto;
    color:white;
    text-align:center;
    border-radius:5px;
    margin:5px;
    padding:2px;
    box-sizing:content-box;}

.collection-item {
    /*border-bottom: 1px solid grey;*/
    padding:5px;}
 /* bereken medstart */
.calc{
      display:flex;margin-top:8px;
      }
      span{
      color:red;font-weight:bold;
      }
mark1{
    /*background-color:var(--bg-mark-1);
    border-radius:2px;
    margin:2px;
    padding-left:4px;
    padding-right:4px;*/
    color:blue;
}
 mark2{
    background-color:var(--bg-mark-2);
    border-radius:2px;
    margin:2px;
    padding-left:4px;
    padding-right:4px;
    color:black;
}
 mark3{
    color:var(--bg-mark-3);    
}
mark4{
    color:blue;    
}
/* bereken medstop */
      
      .box10{width:24%;height:auto;background:Green;Color:White;margin-top:2px;padding:2px;
          box-sizing:border-box;border-radius:0px 10px 10px 0px;text-align:center;}
    main .card10 img {
  width: 30%;filter:display:block;margin-left:auto;margin-right:auto;margin-top:2px;
}
.box3{margin-left:5px;padding:5px;  border-left:2px solid grey;}
.box3:hover{background:#E5E8E8;}
/*start extra grid pictures*/
.pictures {
  margin: 0 auto;
  display: grid;
  grid-template-columns:repeat(auto-fit, minmax(100px,1fr));    
  grid-gap: 0.3em;
}
.pictures1 {
  margin: 0 auto;
  display: grid;
  grid-template-columns:repeat(auto-fit, minmax(150px,1fr));    
  grid-gap: 0;
}

.pictures1 figcaption{    
    /*border:1px solid black;*/margin: 1px;
  line-height: 1.3;
}
      ol.d{
      list-style-type:upper-alpha;
      }
.pictures img {
  object-fit: cover;
  width: auto;
  height:100%;
  height: 70px;
  transition: transform 0.2s ease;
}

figure2{border:1px solid black;border-radius:15px;}
      
figure{border:1px solid black;text-align:center;border-radius:15px;}
      .pictures h4{text-align:center;}
.pictures a {
  margin-bottom: 4px;
  text-decoration: none;
  color: black;
}
.pictures1 ul{
   text-align:left; 
    
}
strong {
  font-weight: 700;
}

.pictures a:hover figure {
  transform: scale(1.05) rotate(0deg);
  box-shadow: 5px 15px 30px rgba(0, 0, 0, 0.6);
}
.pictures1 h4 {
  font-size: 14px;
  line-height: 1;
  text-align: left;
  font-weight: 700;
  margin-right: 3px;
}
.pictures h4 {
  font-size: 14px;
  line-height: 1;
  text-align: center;
  font-weight: 700;
  margin-right: 3px;
}

figcaption {
  margin: 2px;
  line-height: 1.3;
}    
/*stop extra grid pictures*/