@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');
h1, h2, h3, h4, h5 {font-family: 'Lato', sans-serif !important;}
body, html, input, select, texarea {font-family: 'Lato', sans-serif !important;}
.content-inner {max-width:800px}

div#deugdenkaart {aspect-ratio:3 / 2;display:flex;align-items:center;justify-content:center;background:#f9e1bf;position:relative;border:1px solid #F96;overflow:hidden;}
div#deugdenkaart span {z-index:2;font-weight:700;font-size:1rem;cursor:pointer;background:#F96;color:#FFF;padding:.75rem 1.5rem;text-transform:uppercase;letter-spacing:2px;text-shadow:0 1px 0 rgba(0,0,0,.1);box-shadow:0 1px .5rem rgba(0,0,0,.05);border-radius:.25rem;transition:.3s;transform:translateY(0);}
div#deugdenkaart span:hover {box-shadow:0 3px 1rem rgba(0,0,0,.1);transform:translateY(-3px);}
div#deugdenkaart img {position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .1s, transform .3s;transform:scale(1.5);}
div#deugdenkaart.active img {opacity:1;transform:scale(1);}
div#deugdenkaart.active span {opacity:0;transform:translateY(2px);}