/* Over ons: paginaspecifieke stijl uit de <head> van de live pagina (Lightspeed-pagina-inhoud), 07-10 — rapport Dtch #8 */
:root{
  	--image-bg-bolor:#e8e7de;
    --margin-section:20xp;
    --content-header:20px;
    --content-margin:40px;
    --content-h2weight:400;
  }
  section#overonscontent {
    margin-top: 20px;
}
  #overonscontent{display:Flex; margin-top:var(--margin-section);align-items:flex-start;}
  #overonscontent picture{max-width:20%; margin-right:var(--content-margin);padding:1em 1em 8em;background-color:var(--image-bg-bolor)}
  #overonscontent picture img{max-width:100%;background-color:var(--image-bg-bolor)}
  #overonscontent h2{font-weight:var(--content-h2weight);    font-size: 2em;} 
  .overonscontentheader{display:flex;justify-content:space-between;align-items:center}
  .overonscontentheader i.expenadicon {position:relative;margin-right:var(--content-margin)}
  .overonscontentheader i.expenadicon::before,.overonscontentheader i.expenadicon::after {
    content:"";
    position:absolute;height:1px;width:20px;top:50%;left:50%;
    background-color:currentColor;
    transform:translate(-50%,-50%);
  }
  .overonscontentheader i.expenadicon::after {
     transform:translate(-50%,-50%) rotate(90deg);
  }
  .open .overonscontentheader i.expenadicon::after{opacity:0;}
  .expendablecontent {border-bottom:1px solid}
  .expendablecontent p {max-height:0;overflow:hidden; transition:all .3s ease-in-out;}
  .expendablecontent.open p {max-height:7em;}
  #overonsvideo {margin-top:var(--content-margin)}
  #overonsvideo video{max-width:100%;}
  @media (max-width:991px){
    #overonscontent picture{}
    .expendablecontent.open p {max-height:9em;}
  }
  @media (max-width:768px){
    #overonscontent{flex-direction:column-reverse;}
    #overonscontent picture {
    max-width: 100%;
    padding: 1em;
      margin:0;
    margin-top: var( --content-header);
}
    #overonscontent picture img{max-width:31%;}
    .expendablecontent.open p {max-height:14em;}
  #overonsvideo {margin-top:var(--content-header)}
  }
    @media (max-width:400px){
    .expendablecontent.open p {max-height:17em;}
  }