/* CSS stylesheet behorend bij dedoofpotgeneraal.nl */

/* Voor vaste maten van blokken */
html           {box-sizing:border-box}
*,*:before,*:after{box-sizing:inherit;}

/* Voor vervagingseffect aan begin */
body           {opacity:1;transition:2.5s;animation:kleuren 0s linear 1 forwards;}
body.fade-out  {opacity:0;transition:none;}
@keyframes kleuren {from {background:#FAFAFA;} to {background:#E8E8E8;}}

/* CSS voor de gefixeerde header */
.header        {position:sticky;left:0;top:0;z-index:100 !important;  /* Hoog genoeg om boven video/content te blijven */}

/* Fix overlap met sticky header: Header altijd bovenop */
/* Zorg dat video-sectie lager zit */
.graybar {
  position: relative;  /* Voorkom dat tabel uit context breekt */
  z-index: 1;  /* Lager dan header */
  background-image:linear-gradient(110deg, #52565D, #52565D 40%, #636669 50%, #636669 60%, #52565D 90%);border-radius:3px;
}

.vimeo {
  z-index: 2 !important;  /* Iframe expliciet lager */
  border-radius:3px;
  position:relative;
  pointer-events: auto;  /* Zorg dat iframe clicks vangt */
}

/* Voor de geneste positioned divs in video (top:-25px etc.) */
div[style*="top:-25px"], div[style*="top:-24px"] {
  z-index: 1 !important;
  pointer-events: none;  /* Selecteer de specifieke positioned divs */
}

.flag-emoji {
  width: 20px;  /* Match emoji-breedte; pas aan als je vlaggen 16px of 24px zijn */
  height: 15px; /* Standaard vlagverhouding ~4:3; test op je site */
  vertical-align: middle; /* Lijnt uit met tekst, net als emojis */
  margin-right: 4px; /* Ruimte naar tekst, zoals bij inline emojis */
  border-radius: 2px; /* Subtiel afgerond voor emoji-look (optioneel) */
  object-fit: cover; /* Houdt verhoudingen intact bij resize */
  display: inline-block; /* Voorkomt baseline-shift */
}

/* Voor correcte interne hyperlinks */
.anchor        {display:block;height:55px;margin-top:-55px;visibility:hidden;}

/* voor de headers */
.languagebar   {background-image:linear-gradient(110deg, #52565D, #52565D 100%);border-radius:3px;}
.blurbbar      {background-image:radial-gradient(circle, #4B4B58, #3B3B44);border-radius:3px;}
.menubar       {background-image:linear-gradient(110deg, #2B2B34, #2B2B34 100%);}
.authorbar     {background-image:linear-gradient(to left, #373B3F 0%, #34383C 40%, #373B3F 100%);box-shadow: 0 10px 16px 0 rgba(0,0,0,0.2);border-radius:3px;}
.synopsisbar   {background-image:linear-gradient(110deg, #494C50, #494C50 45%, #2B2B34 75%, #2B2B34 100%);margin-left:auto;margin-right:auto;}
.whitebar      {background-color:#D0D0D0;}
.boxshadow     {box-shadow:0 10px 16px 0 rgba(0,0,0,0.1), 0px 76px 52px -82px rgba(0,0,0,1);}
.boxshadow2    {box-shadow:0px 25px 30px -30px rgba(0,0,0,0.7);}
.boxshadow3    {box-shadow:0px 25px 30px -30px rgba(0,0,0,0.3);}

/* voor andere kleuren */
.kleur6        {background:#2B2B34;}
.kleur8        {background-image:linear-gradient(110deg, #C00000, #B00000 100%);}
.kleur35       {background-image:radial-gradient(circle, #FBFDFF, #A0A2A4);border-radius:3px;border-top:solid 5px #B00000;border-bottom:solid 5px #B00000;}
.kleur35:hover {background-image:radial-gradient(circle, #F00000, #D50000);}
.kleur36       {background-image:radial-gradient(circle, #D00000, #900000);border-radius:3px;border-top:solid 5px #A00000;border-bottom:solid 5px #A00000;}
.kleur36:hover {background-image:radial-gradient(circle, #F00000, #D50000);}
.red           {color:#B00000}
.white         {color:#FFFFFF}

.kleur39       {background-image:radial-gradient(circle, #4E5254, #424649);vertical-align:middle;border:solid 0.5px #AEB6BF;border-radius:0 3px 3px 0;}
.kleur41       {background-image:radial-gradient(circle, #F0F1F2, #E0E1E2);border-radius:3px;}
.kleur43       {background-image:radial-gradient(circle, #D7DDE0, #C5C9CD);border-radius:3px;}
.kleur44       {background-image:radial-gradient(circle, #CCD1D5, #C5C9CD);border-radius:3px;}

/* Voor de tabellen */
.box          {border-radius:3px;}

/* Voor headers en alinea's */
h1            {color:#000000;filter:url(#f3);font-weight:normal;font-family:"Helvetica","Arial";}
h2            {color:#222222;filter:url(#f3);margin:36px 0 1px 33px;font-weight:normal;font-family:"Helvetica","Arial";font-size:19.5pt;letter-spacing:0.6px;z-index:1;}
p             {margin:0 0 0 0;font-family:"Helvetica","Arial";color:#000000;font-size:11pt;}

a:link, a:visited {color:#000000;text-decoration-color:#000000;}
a:hover           {color:#800000;box-shadow:0 4px 10px 0 rgba(20,0,0,0.2);}
a:active          {color:#800000;}

.languagebar a.link,
.container5 a.link {
  cursor: pointer !important;
}

a.redlink:link, a.redlink:visited {color:#900000;text-decoration:none;}
a.redlink:hover   {color:#900000;}
a.redlink:active  {color:#900000;}

a.redlinkD:link, a.redlinkD:visited {color:#900000;text-decoration:underline;}
a.redlinkD:hover   {color:#900000;}
a.redlinkD:active  {color:#900000;}

a.groklink:link, a.groklink:active, a.groklink:visited {color:#FFFFFF;text-decoration:underline;text-decoration-color:white;text-underline-offset: 0.12em;}
a.groklink:hover   {color:#FF0000;}
a.groklink:active  {color:#FF0000;}

a.whitelink:link, a.whitelink:active, a.whitelink:visited {color:#CCCCCC;}
a.whitelink:hover {color:#FA8072;box-shadow:0 4px 10px 0 rgba(20,0,0,0.2);}
a.noshadow        {box-shadow:none;}
a.citations       {box-shadow:none;text-decoration:none;}
.redbox           {text-decoration:none;box-shadow:none;}

sup            {font-size:80%;top:-0.4em;}
table          {border-spacing:0;border:none;}
td             {padding:0px;vertical-align:top;}
.taal          {display:inline-block;position:relative;left:3px;filter:grayscale(0.2);}
.taalsvg       {display:inline-block;width:18px;position:relative;top:-3px;left:-5px;transform:scale(.95);}
.style1        {font-size:14.5;margin-left:21px;font-family:"Helvetica","Arial";position:relative;top:-0.5;}
.style2        {font-size: 9.1;margin-left:21px;font-family:"Helvetica","Arial";display:none;}
.style3        {position:relative;top:0;line-height:74%;}

.kop1          {display:inline;z-index:1;position:relative;top:  23px;left:22px;font-size:9pt;}
.kop2          {display:inline;z-index:1;position:relative;top:  -3px;          letter-spacing:0.5px;color:#222222;filter:url(#f3);}

.inspring      {margin-left:2.5em;}
.hoofdNLD, .hoofdENG, .hoofdDEU, .hoofdBOS {margin-left:17pt;text-align:justify;line-height:123%;hyphens:auto;font-size:11.35pt;}
.margintopNLD, .margintopENG, .margintopDEU, .margintopBOS {margin-top:7pt;}
.tekst         {margin:5.5pt 18pt 0pt 18pt;text-align:justify;hyphens:auto;line-height:125%;}
.kop           {margin: 18pt  8pt 8pt 18pt;text-align:left;line-height:125%;font-size:15pt;font-weight:normal;filter:url(#f3);}
.star          {color:goldenrod;font-size:13.4pt;margin-left:0.5px;letter-spacing:0.05em;filter:url(#f4);}
.auteurtxt     {color:#FAFAFA;line-height:130%;font-size:10.7pt;margin-left:0px;margin-right:9px;hyphens:auto;margin-top:9px;}
.portretcirkel {border:solid 1px #AAAAAA;width:262;border-radius:0.5%;box-shadow: 3px 6px 10px 0 rgba(0,0,0,0.3);margin:3 0 0 28;}
.auteurstyle   {margin:38 0 24 303}
.thumbs        {width:460px;height:259px;}
.thumbsdiv     {transform:scale(0.71);position:relative;top:-26px;left:-47px;}

.mediastyle, .mediastyle1, .mediastyle2 {margin:12.5px 19pt 12px 18pt;font-size:10pt;line-height:125%;text-align:justify;hyphens:auto;}
.mediastyle1   {font-size:10.8pt;margin-top:0;margin-bottom:0;margin-right:0;}
.mediastyle2   {font-size:11pt;line-height:130%;}
.citatenintro  {margin:4px 30px 0px 29px;font-size:11pt;line-height:130%;text-align:justify;hyphens:auto;}
.vlaggetje     {font-size:11.3pt;position:relative;top:0.8;}
.kleinvlaggetje {font-size:9pt;position:relative;top:0.8;}
.blurbstyle    {margin:23.5pt 18pt 25pt 18pt;font-size:11.4pt;color:#FFFFFF;text-align:center;filter:url(#f1);letter-spacing:0.1px;line-height:130%;}
.creditsstyle, .bronstyle  {font-size:6.5pt;text-align:justify;text-transform:uppercase;hyphens:auto;color:#EEEEEE;}
.lastlinestyle {font-size:10pt;text-transform:uppercase;color:#FFFFFF;letter-spacing:.1px;position:relative;top:1.6px;}
.padd          {padding:2.5px  3px 3.5px 3.5px;}
.padd2         {padding:2.5px 15px 3.5px  15px;}

.meer1         {width:20px;height:20px;position:relative;left:0.5px;top:-0.5px;}
.meer2         {fill:none;stroke:#900000;stroke-width:2.5px;}

/* voor de afbeeldingen */
.avatar, .icon           {width:78px;height:78px;position:relative;transform:scale(0.54);top:-17px;left:-15.2px;}

/* Voor de kleuren bij het selecteren van tekst */
::selection {color:white;background:#52565D;}

/* Voor de quotes, indeling in 4 kolommen en 2 achtergrondkleuren */
.col1       {margin: 11.5pt  0pt 0   0;}
.col2a      {margin: 16.5pt 18pt 0 17pt;color:#000000;font-size:10pt;line-height:118%;text-indent:-0.5px;}
.col2b      {margin:    1pt 18pt 0 17pt;color:#000000;font-size:10pt;line-height:118%;text-indent:19.4}
.col3       {margin: 11.5pt  0pt 0   0;}
.col4       {margin:  1.3pt 18pt 0 17.5pt;color:#800000;font-size:7.5pt;line-height:112%;}
p.col4      {opacity:0;transition:opacity 0.4s ease;}

.colstar    {margin:    3pt 18pt 0 17pt;color:#000000;font-size:10pt;line-height:118%;}

.sectie     {margin-left:auto;margin-right:auto;border-radius:19pt;overflow:hidden;border:#E2E2E2 solid 1px;
             box-shadow:0px -25px 30px -30px rgba(0,0,0,0.35), 0px 25px 30px -30px rgba(0,0,0,0.35),
                        6px   0px 30px -30px rgba(0,0,0,0.35),-6px  0px 30px -30px rgba(0,0,0,0.35);}
.ttd1       {width: 30px;padding:10px 0 10px    0;}
.ttd2       {width:305px;hyphens:auto;}
.table2     {height:220px;width:100%;background:#FFFFFF;}
.table1     {height:220px;width:100%;background-image:linear-gradient(135deg, #E7E7E7, #E7E7E7 50%, #FAFAFA 100%);}
.tableDEU   {height:260px;}
.tablehead  {width:100%;filter:grayscale(0.4);background-image:linear-gradient(to right, #3A4A64, #5A6A84);}
.tableheader {margin:20px 0 7.5px 27px;color:#FFFFFF;font-size:12.6pt;font-weight:normal;text-transform:uppercase;}
.tabletext   {margin:0px 17px 18.5px 27px;color:#FFFFFF;font-size:11.5pt;font-style:italic;}
.tablewidth  {width:55.3pt}

.svgicon1   {width:120;height:120;position:relative;left:-11;top:5;}
.svgrect1   {fill:url(#grad1);filter:url(#f2);z-index:0;cx:61;cy:52;r:38;transform-origin: center;}
.svgrect2   {fill:url(#grad1);filter:url(#f2);z-index:0;cx:148;cy:102;r:85;}
.hidden     {position:relative;top:-7px;left:9px;display:inline-block;}
.svgicon3   {width:100px;height:100px;position:relative;left:-7.5pt;top:-8.5px;}
.svgicon4   {stroke:#AEB6BF;stroke-width:1px;fill:url(#grad1);filter:url(#f2);}
.svgicon5   {stroke:#800000;stroke-width:5px;fill:none;}

.svgiconN   {width:130;height:130;position:relative;left:-11;top:-11;}
.svgrectN   {filter:url(#f2);z-index:1;cx:61;cy:53.5;r:24;fill:#1A2A44;stroke:#111115;stroke-width:0.5px;}
.svgtextN   {fill:#FFFFFF;font-size:35;}

/* Oplossing van Grok voor dode hoek bij hover */
table.table1:hover p.col4, table.table2:hover p.col4 {opacity: 1;}
td.ttd2:hover p.col4 {opacity: 1;}
td.ttd1:hover ~ td.ttd2 p.col4 {opacity: 1;}
.hidden, .icon, .avatar, img.icons, img.sprite {pointer-events: none;}

/* Voor de buttons */
button              {font-family:"Helvetica","Arial";}
.taalbutton, .taalbuttonX {background-image:linear-gradient(110deg, #BBBBBB, #939393 100%);color:#000000;text-align:left;height:24px;
                     cursor:pointer;border-radius:2px;padding:5px 10px;
                     border:solid 0.5pt #666666;margin-right:2.5px;text-decoration:#FAFAFA;font-family:"Helvetica","Arial";}
.taalbuttonX        {background-image:linear-gradient(110deg, #EEEEEE, #DDDDDD 100%);
                     box-shadow:1.5px 0 5px 0 #E9E9E9, -1.5px 0 5px 0 #E9E9E9;pointer-events:none;}
.taalbutton:hover   {background-image:linear-gradient(110deg, #F00000, #F00000 100%);color:#FFFFFF;box-shadow: 0 0 7px 0 #FAFAFA;}
.taalbutton:focus   {outline:none;border:solid 0.5pt #FFFFFF;}
.menubutton         {background-image:linear-gradient(110deg, #52565D, #52565D 100%);color:#FFFFFF;text-align:center;font-size:14.8px;
                     transition:transform 0.2s;text-decoration:none;cursor:pointer;border-radius:2px;border:hidden 3px #680000;
                     margin-right:2px;padding:7.5px 13px;font-family:"Helvetica","Arial";}
.menubutton:focus   {outline:none;border:solid 0.5pt #FFFFFF;}
.menubutton:hover   {background-image:linear-gradient(110deg, #F00000, #F00000 100%);color:#FFFFFF;box-shadow: 0 0 7px 0 #FAFAFA;}
.bestelbutton       {background-image:linear-gradient(110deg, #C00000, #B00000 100%);transition:transform 0.3s;color:#FAFAFA;padding:2px 30px;text-align:center;
                     font-size:16px;border:solid 0.5pt #800000;text-decoration:none;cursor:pointer;border-radius:40px;letter-spacing:.5pt;font-family:"Helvetica","Arial";
                     position:relative;top:0.6px;}
.bestelbutton:hover {background-image:linear-gradient(110deg, #FF0000, #FF0000 100%);color:#FFFFFF;}
.bestelbutton:focus {outline:none;border:solid 0.5pt #FF0000;}
.button1, .button2  {background-image:linear-gradient(110deg, #C00000, #B00000 100%);transition:transform 0.3s;color:#FAFAFA;padding:0px 6px 2px 6px;
                     text-align:center;font-size:14px;text-decoration:none;cursor:pointer;border-radius:40px;border: solid 0.5pt #800000;font-family:"Helvetica","Arial";}
.button1:hover, .button2:hover {background-image:linear-gradient(110deg, #F00000, #F00000 100%);color:#FFFFFF;}
.button1:focus      {outline:none;border:solid 0.5pt #FF0000;}
.button2            {padding:2.5px 19px 2px 19px;font-size:11.7px;}

.tagbutton, .tagbuttonENG, .tagbuttonDEU, .tagbuttonNLD, .tagbuttonBOS {font-size:10.3pt;background:#FAFAFA;color:#3B3B3B;border-radius:1px;
                     padding:4px 6px 4px 5.5px;border:solid 0.5pt #888888;font-family:"Helvetica","Arial";}
.tagbuttonENG  {font-size:10.4pt;}
.tagbuttonDEU  {font-size:9.9pt;}
.tagbuttonNLD  {font-size:10.35pt;}
.tagbuttonBOS  {font-size:9.9pt;}
.tagspan       {position:relative;top:0.3px;color:#222222;}

/* Voor de tags en bijschriften in de foto's en video */
.container     {position:relative;}
.container2    {position:relative;overflow:hidden;}
.container3    {position:relative;top:33.8px;transform:scale(1.02);}
.container5    {position:absolute;}
.container6    {position:relative;left:18.6px}
.container7    {position:relative;top:154px;left:337px;z-index:1;filter:url(#f1);}
.container102  {display:inline-block;position:relative;top:9.05px;left: 26.1px;z-index:1;transform:scale(0.93);pointer-events: auto; /* Parents van .socialmedia: Laat events door */}
.container103  {display:inline-block;position:relative;top: 9.4px;left: 61.6px;z-index:1;transform:scale(0.9);pointer-events: auto; /* Parents van .socialmedia: Laat events door */}
.container104  {display:inline-block;position:relative;top: 9.2px;left: 96.6px;z-index:1;transform:scale(0.9);pointer-events: auto; /* Parents van .socialmedia: Laat events door */}
.container105  {display:inline-block;position:relative;top: 8.9px;left:131.2px;z-index:1;transform:scale(0.9);pointer-events: auto; /* Parents van .socialmedia: Laat events door */}
.container106  {display:inline-block;position:relative;top: 8.8px;left:165.3px;z-index:1;transform:scale(0.9);pointer-events: auto; /* Parents van .socialmedia: Laat events door */}
.circle1       {height:40px;width:40px;}
.Lrect         {stroke:#900000;stroke-width:0.5px;fill:#B00000;opacity:0.2;transition:0.2s;x:11;y:11;width:18;height:18;rx:2;}
.Lline         {stroke:#FFFFFF;stroke-width:2px;stroke-linecap:round;transform-origin:center;transform:rotate(-45deg);x1:13.5;y1:20;x2:25;y2:20;}
.Lpolyline     {stroke:#FFFFFF;stroke-width:2px;stroke-linecap:round;fill:none;transform-origin:center;transform:rotate(-45deg);}
.circleloc2    {position:relative;top:0px;left: 17px;z-index:1;height:40;pointer-events: none;}
.circleloc3    {position:relative;top:0px;left: 52px;z-index:1;height:40;pointer-events: none;}
.circleloc4    {position:relative;top:0px;left: 87px;z-index:1;height:40;pointer-events: none;}
.circleloc5    {position:relative;top:0px;left:122px;z-index:1;height:40;pointer-events: none;}
.circleloc6    {position:relative;top:0px;left:157px;z-index:1;height:40;pointer-events: none;}
.europelocS    {width:380px;position:relative;top:0px;left:391.5px;border-radius:2px;}
.europelocS2   {position:relative;top:-181px;left:391.5px;}

/* Voor de tags en bijschriften in de foto's en video */
/* Herstel pointer-events voor social media: Laat JS en clicks werken */
.container5:has(.container102), .container5:has(.container103), .container5:has(.container104),
.container5:has(.container105), .container5:has(.container106) {
    pointer-events: auto; /* Specifiek voor social .container5 */
}

.socialmedia {
    pointer-events: auto; /* Voor onclick */
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
    padding: 4px; /* Grotere hit-area */
    border-radius: 50%;
    display: inline-block;
    z-index:1;
}

.socialmedia:hover {
    opacity: 0.8;
    transform: scale(1.05);
    background-color: rgba(176, 0, 0, 0.1); /* Extra visuele hint */
}

.socialmedia:active {
    transform: scale(0.95); /* Click-feedback */
}

.svgmedia {
    pointer-events: auto; /* Nodig voor JS mouseover op SVGs */
    width: 18px;
    height: 18px;
    filter:opacity(0.65);fill:#A00000;display:inline-block;position:relative;top:-4.2;left:-4.2;
}

/* Circles blijven non-interactief (decoratief) */
#facebook1, #twitter1, #linkedin1, #whatsapp1, #email1,
.circleloc2, .circleloc3, .circleloc4, .circleloc5, .circleloc6 {
    pointer-events: none;
}

.svgcircle     {fill:none;stroke:#B00000;stroke-width:0.7px;cursor:pointer;transform:scale(0.9);}
.navigation    {width:29px;height:3px;stroke:#FAFAFA;stroke-width:3.5px;stroke-linecap:round;}

.bijschrift3       {color:#900000;filter:url(#f3);cursor:pointer;text-decoration:underline solid #900000;}
.bijschrift5       {color:#FFFFFF;filter:url(#f3);cursor:pointer;text-decoration:underline solid #900000;text-decoration-thickness:2px;}
.eclilight:hover   {box-shadow:0 4px 10px 0 rgba(20,0,0,0.2);}
.eclidark:hover    {box-shadow:0 4px 10px 0 rgba(20,0,0,1.2);color:red;}
.eclinum1         {font-size:92%;letter-spacing:0;}
.eclinum2         {font-size:92%;letter-spacing:0.05;}
.eclinum3         {font-size:100%;letter-spacing:0;}
.eclinum4         {font-size:92%;letter-spacing:0;}
 
.vid1BOS        {font-size:12.5pt;line-height:115%;}
.vid1A          {margin:19.5pt 23px      0 350px;color:#FAFAFA;font-size:  15pt;line-height:125%;filter:url(#f3);hyphens:manual;z-index:1}
.vid2A          {margin: 6.6pt 23px 19.5pt 350px;color:#FAFAFA;font-size:10.4pt;line-height:125%;hyphens:manual;}

/* voor de indeling in 4 blokken op rij */
.column2       {float:left;width:25%;text-align:center;}
.card2A        {border:solid 1px #888888;filter:url(#f5);border-radius:3px;}
.card3         {padding:14pt 0 13.5pt 0;text-align:center}
.card4A        {overflow:hidden;border-radius:0 3px 3px 0;}
.card6         {overflow:hidden;background-image:radial-gradient(circle, #55595C,#424649);border-radius:3px;border:solid 0.5px #525659;width:255px;}
.extraborder   {border:solid 1px #E4E4E4;background:#FFFFFF;border-radius:3px;pointer-events: none;  /* Laat clicks doordringen naar iframe */ background: transparent !important;  /* Verwijder witte bg voor betere integratie */ }

.td1, .td2     {line-height:15.8pt;font-size:10.3pt;color:#000000;opacity:0;position:relative;top:-0.5;}
.td1           {margin:0 12pt 0 0;text-align:right;}
.td2           {margin:0 0 0 12pt;}
.td3           {color:#FAFAFA;}

.polysvg       {height:200px;width:  40px;position:relative;top:0px;left:260px;z-index:1;}
.polysvgdown   {height: 40px;width:1064px;position:relative;top:-33px;z-index:1;}
.polygon1      {fill:#545456;}
.polygon2      {fill:#3D3D4B;}
.polygon3      {fill:#900000;}
.polyline1, .polyline2, .polyline3, .polyline4 {stroke:#E7E7E7;stroke-width:4.5pt;fill:#525659;}
.polyline2     {fill:#3D3D4B;}
.polyline3     {fill:#900000;}
.polyline4     {fill:#A20000;}

.cursor        {cursor:pointer;}
.counterhead   {font-size:21.5pt;line-height:125%;filter:url(#f3);letter-spacing:0.1px;}
.countertext   {font-size:11.0pt;line-height:125%;filter:url(#f3);letter-spacing:0.1px;}
.counternote   {font-size:   9pt;line-height:125%;}

/* Voor de tijdlijn */
.timepos                {position:relative;top:2.5px;left:52px;z-index:1;font-family:"Helvetica","Arial";}
.timeline               {color:#FAFAFA;font-size:10.5pt;height:16px;border-radius:9pt;border:solid 1px #FAFAFA;background:#222228;
                         opacity:0;letter-spacing:0.4px;padding:1.5px 7.5px 2px 7px;}
.stoplicht0             {animation:stop0 14s linear 2.0s infinite running forwards;}
@keyframes stop0 {   0% {opacity:0;}
                    10% {opacity:1;}
                    77% {opacity:1;}
                  93.5% {opacity:0;}}
.stoplicht0T            {animation:stop0T 14s linear 2.0s infinite running forwards;}
@keyframes stop0T {  3% {opacity:0;}
                    18% {opacity:1;}
                  75.5% {opacity:1;}
                    89% {opacity:0;}}

.stoplicht1A            {animation:stop1A 14s linear 2.0s infinite running forwards;}
@keyframes stop1A { 12% {opacity:0;}
                    18% {opacity:1;}
                    77% {opacity:1;}
                   100% {opacity:0;}}
.stoplicht1B            {animation:stop1B 14s linear 2.0s infinite running forwards;}
@keyframes stop1B { 15% {opacity:0;}
                    18% {opacity:1;}
                    77% {opacity:1;}
                   100% {opacity:0;}}

.stoplicht2A            {animation:stop2A 14s linear 2.0s infinite running forwards;}
@keyframes stop2A { 23% {opacity:0;}
                    29% {opacity:1;}
                    77% {opacity:1;}
                   100% {opacity:0;}}
.stoplicht2B            {animation:stop2B 14s linear 2.0s infinite running forwards;}
@keyframes stop2B { 26% {opacity:0;}
                    29% {opacity:1;}
                    77% {opacity:1;}
                   100% {opacity:0;}}
.stoplicht2C            {animation:stop2C 14s linear 2.0s infinite running forwards;}
@keyframes stop2C { 28% {opacity:0;}
                    29% {opacity:1;}
                    77% {opacity:1;}
                   100% {opacity:0;}}

.stoplicht3A            {animation:stop3A 14s linear 2.0s infinite running forwards;}
@keyframes stop3A { 36% {opacity:0;}
                    42% {opacity:1;}
                    77% {opacity:1;}
                   100% {opacity:0;}}
.stoplicht3B            {animation:stop3B 14s linear 2.0s infinite running forwards;}
@keyframes stop3B { 39% {opacity:0;}
                    42% {opacity:1;}
                    77% {opacity:1;}
                   100% {opacity:0;}}
.stoplicht3C            {animation:stop3C 14s linear 2.0s infinite running forwards;}
@keyframes stop3C { 41% {opacity:0;}
                    42% {opacity:1;}
                    77% {opacity:1;}
                   100% {opacity:0;}}
.stoplicht4A            {animation:stop4A 14s linear 2.0s infinite running forwards;}
@keyframes stop4A { 48% {opacity:0;}
                    54% {opacity:1;}
                    77% {opacity:1;}
                   100% {opacity:0;}}
.stoplicht4B            {animation:stop4B 14s linear 2.0s infinite running forwards;}
@keyframes stop4B { 51% {opacity:0;}
                    54% {opacity:1;}
                    77% {opacity:1;}
                   100% {opacity:0;}}
.stoplicht5A            {animation:stop5A 14s linear 2.0s infinite running forwards;}
@keyframes stop5A { 60% {opacity:0;}
                    66% {opacity:1;}
                    77% {opacity:1;}
                   100% {opacity:0;}}
.stoplicht5B            {animation:stop5B 14s linear 2.0s infinite running forwards;}
@keyframes stop5B { 63% {opacity:0;}
                    66% {opacity:1;}
                    77% {opacity:1;}
                   100% {opacity:0;}}
.stroke                 {stroke-width:0.5px;stroke:#000000;opacity:0;}
.linestyle              {stroke:#000000;stroke-width:3;stroke-linecap:round;opacity:0;}
.path                   {stroke:#000000;stroke-width:2;fill:none;stroke-dasharray:116;stroke-dashoffset:116;animation:dash 14s linear 3.5s infinite running forwards;}
@keyframes dash {
    6% {stroke-dashoffset:  98;}
   12% {stroke-dashoffset:  98;}
   18% {stroke-dashoffset:  77;}
   24% {stroke-dashoffset:  77;}
   30% {stroke-dashoffset:  56;}
   36% {stroke-dashoffset:  56;}
   42% {stroke-dashoffset:  35;}
   48% {stroke-dashoffset:  35;}
   54% {stroke-dashoffset:  14;}
   60% {stroke-dashoffset:  14;}
   66% {stroke-dashoffset:   0;}
   88% {stroke-dashoffset:   0;}
   89% {stroke-dashoffset: 116;}}

/* Voor het tonen van de steden op de kaart */
.stroke2                {stroke-width:1px;stroke:#FFFFFF;fill:#2B2B5B;}
.stoplichtX1            {z-index:1;}
.stoplichtY1            {height:15.5;fill:#FFFFFA;opacity:0.7;}
.stoplichtZ1            {fill:#333333;font-size:8.7pt;letter-spacing:0.1px;}

/* voor het oplichten van de boekcover */
.opacityani {animation:flip2 1.4s ease-out 1.0s 1 forwards;}
@keyframes flip2 {
   0% {opacity:0;filter:blur(20px);}
 100% {opacity:1;filter:blur(0px);}}

#publicationsList {transition: max-height 1.5s ease-out;}
#readMoreLink {color: #007BFF;text-decoration: underline;cursor: pointer;}
#readMoreLink:hover {color: #0056b3;}

/* Subtiel knipper-effect: fade opacity van 1.0 naar 0.8 */
.knipper-cirkel {
    animation: knipper 2s ease-in-out infinite; /* Duur: 2s, oneindig herhalend */
}

@keyframes knipper {
    0%, 100% { opacity: 1.0;r:7;fill:royalblue; }    /* Volledig zichtbaar */
    50% { opacity: 0.5;r:6.5;fill:#1A2A44; }         /* Licht vervagen voor 'knipper' */
}
.knipper-cirkel2 {
    animation: knipper2 2s ease-in-out infinite; /* Duur: 2s, oneindig herhalend */
}

@keyframes knipper2 {
    0%, 100% { opacity: 1.0;r:7;fill:black; }    /* Volledig zichtbaar */
    50% { opacity: 0.5;r:3.5;fill:white; }         /* Licht vervagen voor 'knipper' */
}

/* voor de sprite met personen */
.sprite                {background-image:url(media/personen-v10.png);background-repeat:no-repeat;display:block;width:142px;height:142px;border:solid 3px #FFFFFF;border-radius:50%;}
.sprite-alsiadi        {background-position:  -6px -580px;}
.sprite-vanzutphen     {background-position:-148px    0px;}
.sprite-degrave        {background-position:-859px    2px;}
.sprite-dewinter       {background-position:-435px    0px;}
.sprite-droge          {background-position:     0 -145px;}
.sprite-flaticon       {background-position:-146px -145px;}
.sprite-colakovic      {background-position:-290px    0px;}
.sprite-durakovic      {background-position:-562px -583px;}
.sprite-heij           {background-position:-594px -435px;}
.sprite-karabulut      {background-position:-290px -145px;}
.sprite-laroes         {background-position:  -3px -290px;}
.sprite-nuhanovic      {background-position:-867px -580px;}
.sprite-post           {background-position:-726px -290px;}
.sprite-pronk          {background-position:-145px -290px;}
.sprite-sprik          {background-position:-726px -435px;}
.sprite-tendam         {background-position:-726px -145px;}
.sprite-vanbommel      {background-position:-290px -290px;}
.sprite-voorhoeve      {background-position:-300px -585px;}
.sprite-middelkoop     {background-position:-297px -435px;}
.sprite-vanojik        {background-position:-436px -435px;}
.sprite-vanwulfen      {background-position:-580px -145px;}
.sprite-vleugels       {background-position:-581px -290px;}

/* voor de sprite met icons */
.icons {background-image:url(media/icons-v10.png);background-repeat:no-repeat;display:block;width:142px;height:142px;border:solid 3px #FFFFFF;border-radius:50%;}
.icons-31mag              {background-position:   -8px   -7px;}
.icons-avaz               {background-position: -294px   -3px;}
.icons-balkaninsight      {background-position: -297px -576px;}
.icons-bannedbooks        {background-position: -296px -294px;}
.icons-bibliotheek        {background-position: -596px -720px;}
.icons-bljesak            {background-position: -445px -717px;}
.icons-blauwhelm          {background-position:   -5px -148px;}
.icons-bloem              {background-position: -880px -717px;}
.icons-boekx              {background-position: -731px -138px;}
.icons-bosna              {background-position: -442px -153px;}
.icons-burco              {background-position: -880px    0px;}
.icons-casema             {background-position: -878px -294px;}
.icons-deepseek           {background-position:  -14px -863px;}
.icons-grok               {background-position: -583px    2px;}
.icons-hebban             {background-position:    0px -297px;}
.icons-jazeera            {background-position: -144px -298px;}
.icons-jazeerabalkans     {background-position:  -11px -712px;}
.icons-koningin           {background-position: -149px   -3px;}
.icons-leeskost           {background-position: -290px -430px;}
.icons-leidsch            {background-position: -438px -294px;}
.icons-linkedin           {background-position: -580px -298px;}
.icons-nieuwerevu         {background-position:   -4px -440px;}
.icons-nwo                {background-position: -443px -581px;}
.icons-odb                {background-position: -880px -150px;}
.icons-randstad           {background-position: -733px -291px;}
.icons-rechtspraak        {background-position: -145px -439px;}
.icons-rijk               {background-position: -296px -723px;}
.icons-rts                {background-position: -439px   -1px;}
.icons-vaalburg           {background-position: -884px -440px;}
.icons-vandiepen          {background-position: -440px -438px;}
.icons-veteraneninstituut {background-position: -585px -143px;}
.icons-vkontakte          {background-position: -296px -150px;}
.icons-volkskrant         {background-position: -445px -712px;}
.icons-vrijheid           {background-position: -147px -148px;}

/* voor de aanpassing voor grote en kleine schermen */
div.S-scherm  {display:none;} @media only screen and (max-width: 810px)                         {div.S-scherm  {display:inline;}}
div.SM-scherm {display:none;} @media only screen and (max-width: 1079.9px)                      {div.SM-scherm {display:inline;}}
div.M-scherm  {display:none;} @media screen and (max-width: 1079.9px) and (min-width: 810.1px)  {div.M-scherm  {display:inline;}}
div.G-scherm  {display:none;} @media only screen and (min-width: 1080px)                        {div.G-scherm  {display:inline;}}
div.MG-scherm {display:none;} @media only screen and (min-width: 810.1px)                       {div.MG-scherm {display:inline;}}

/* voor het wel of niet tonen van de boektitel */
#myLinks {display:none;}

/* Responsive maken van website */
.breedte415     {width:190px;height:106.87px;}
.breedte415A    {width:329px;height:186.8px;}
.breedte415B    {width:329px;height:186.8px;}
.breedte415C    {width:303px;height:170.0px;}
.breedte415D    {width:303px;height:170.0px;}
.breedte484     {width:480px}
.breedte629     {width:629px}
.breedte730B    {width:748px;position:relative;left:0.7px;}
.breedte747     {width:755px}
.breedte774     {width:774px;}
.breedte794     {width:794px}
.smal2          {display:none;}
.smal4          {display:inline;}
.button1        {font-size:13px;}
.align          {text-align:left;}
.SBS6NLD2       {position:relative;top:8.5px;left:466px;z-index:1;}
.marginright    {margin-right:322px;}
.vimeo          {border-radius:3px;z-index:1;position:relative;}
.dnevniktop1    {position:relative;top:-16px;}
.dnevniktop2    {position:relative;top:8px;}
.Xstyle         {padding:15pt 0 22.5pt 0;}
.Xspace         {font-size:14.5pt;}

/* Als de viewport een minimale breedte heeft van 980 pixels, dan de site optimaliseren voor breed */
@media only screen and (min-width: 1080px) {
.breedte415     {width:250px;height:140px;}
.breedte484     {width:728px}
.breedte629     {width:879px}
.breedte730B    {width:1010px;position:relative;left:-0.7px;}
.breedte747     {width:1004px}
.breedte774     {width:1024px}
.breedte794     {width:1054px}
.menubutton     {padding:7.5px 15px;margin-right:4px;background-image:linear-gradient(110deg, #52565D, #52565D 100%);}
.smal2          {display:inline;}
.smal4          {display:none;}
.auteurtxt      {font-size:11.35pt;text-align:justify;margin-left:22px;}
.button1        {font-size:14px;}
.blurbbar       {border-radius:3px 3px 3px 3px;}
.blurbstyle     {font-size:12.9pt;letter-spacing:0.15px;}
.counterhead    {margin-top:9;}
.countertext    {font-size:14pt;}
.counternote    {font-size:10.2pt;margin-bottom:12px;}
.hoofdBOS       {font-size:11.7pt;line-height:131%;}
.hoofdNLD       {font-size:11.9pt;line-height:129%;}
.hoofdENG       {font-size:11.7pt;line-height:128%;}
.hoofdDEU       {font-size:11.5pt;line-height:128%;}
.margintopNLD   {margin-top:8.1pt;}
.margintopENG   {margin-top:8.7pt;}
.margintopDEU   {margin-top:6pt;}
.margintopBOS   {margin-top:9.4pt;}
.marginright    {margin-right:269px;}
.SBS6NLD2       {top:-12.5px;left:724px;transform:scale(0.79) translate(45.5px,4.5px);}
.metjeNLD1      {top:69px;left:725px;}
.metjeNLD2      {top:70px;left:726px;}
.vid2, .vid2A   {text-align:left;}
.dnevniktop1    {top:-36px;}
.dnevniktop2    {position:relative;top:-14px;}
.Xstyle         {padding:15.5pt 0 24.8pt 0px;filter:url(#f3);}
.bijschriftX    {font-size:9.4pt;}
.Xspace         {font-size:13pt;}
.europelocS     {left:650.5px;}
.europelocS2    {left:650.5px;}
.align          {text-align:right;}
.container6     {position:relative;left:0px}
.container7     {left:458px;top:106px;}
.min            {min-height:137px;}
.vid1           {margin:  18pt 18pt      0  18pt;font-size:  15pt;line-height:125%;}
.vid1BOS        {margin:  18pt 18pt      0  18pt;font-size:  15pt;line-height:125%;}
.vid2           {font-size:11pt;line-height:125%;}
.minmax         {min-height:135px;max-height:135px;}
.col2a, .col2b, .colstar {margin-left:3pt;font-size:10.4pt;}
.col4           {margin-left:3pt;}
.table1, .table2 {height:160px;}
.tableDEU       {height:200;}
.tablewidth     {width:59.5pt}
.portretcirkel  {width:385;margin:3 0 0 32;}
.auteurstyle    {margin:38 0 24 438}
}

/* Als de viewport een maximale breedte heeft van 810 pixels, dan de site optimaliseren voor smal */
@media only screen and (max-width:810px) {
.breedte415     {width:165px;height:92.8px;}
.breedte484     {width:379px}
.breedte629     {width:529px}
.breedte730B    {width:648px;position:relative;left:0.8px;}
.breedte747     {width:658px}
.breedte774     {width:674px}
.breedte794     {width:694px}
.counternote    {font-size:7.5pt;}
.countertext    {font-size:10pt;}
.smal, .smal2   {display:none;}
.smal4          {display:inline;}
.auteurtxt      {font-size:10.2pt}
.star           {letter-spacing:0em;font-size:11.2pt;}
.button1        {font-size:12px;}
.blurbstyle     {font-size:11pt;letter-spacing:0.05px;}
.colstar        {margin-top:1.5pt;}
.tekst          {font-size:11pt;line-height:125%;}
.align          {text-align:left;}
.bestelbutton   {padding:10px 37px;}
.button1, .button2 {padding:5.5px 9px;}
.SBS6NLD2       {top:8.5px;left:366px;}
.metjeNLD1      {top:136px;left:365px;}
.metjeNLD2      {top:137px;left:366px;}
.europelocS     {left:291.5px;}
.europelocS2    {left:291.5px;}
.container7     {left:288px;}
.vid1           {margin:  13pt 18pt      0  18pt;}
.vid1BOS        {margin:  8pt 18pt      0  18pt;font-size:12.5pt;line-height:115%;}
.vid2           {font-size:10pt;line-height:115%;}
.marginright    {margin-right:322px;}
.table1, .table2 {height:275px;}
.tableDEU       {height:300px;}
.container7     {top:173px;left:280px;}
}