.trick ul{
      list-style:none;
        line-height:1.3em;
      }
      ul summary{
  display : block;
  cursor  : pointer;
}
/*zet deze class bij ul om die verder naar rechts te laten springen*/
.nested{padding-left:4px;}


/*stop code ul re*/
ul summary::marker,
ul summary::-webkit-details-marker{
  display : none;
}     
.trick ul li{
      position:relative;
        /*outline:1px solid green;*/
      }
      .trick ul li::before{
      position:absolute;
        left:-10px;top:-7px;
        border-left:2px solid green; 
        border-bottom:2px solid green;
        content:"";width:8px;height:1em;
      }
      .trick ul li::after{
      position:absolute;
        left:-10px;bottom:0px;
        border-left:2px solid green;        
        content:"";width:8px;height:100%;
      }
      .trick ul li:last-child::after{
      display:none;
      }
      ul.tree > li:after,ul.tree > li:before{
      display:none;
      }
      ul summary::before{
      	position:absolute;
        left:-1.1em;
        top:.15em;
        content:"+";color:white;
        background:green;
        display:block;font-weight:bold;
        width:18px;
        height:18px;
        border-radius:50em;
        z-index:999;text-align:center;line-height:18px;
      }
      ul details[open] > summary::before{
      content:"-";background-color:#4b7bec;
      }


.trick img {
  object-fit: cover;
  width: auto;
  height:100%;
  height: 120px;
  transition: transform 0.2s ease;margin:2px;
}
.collection-headerX{
    /*background:grey;*/
    width:50%;
    color:blue;
    text-align:center;
    border-radius:5px;
    margin:5px;border:1px solid black;
    padding:2px;
    box-sizing:content-box;}
.collection-headerX:hover{
    background:grey;color:white;box-shadow: 5px 15px 30px rgba(0, 0, 0, 0.6);
}