/* peppelsinfo.css */

body { font:medium Trebuchet MS; padding:0; margin:0; }
div.tekst,
div.tekst2,
div.tekst3,
div.tekst4,
div.tekst5 { margin:0 auto; width:980px; position:relative; }

div.wrapper {min-width:980px; max-width:1200px;}


div.tekst2 hr,
div.tekst3 hr,
div.tekst4 hr,
div.tekst5 hr { border:0; margin:0; clear:both; margin-bottom:30px;}

div.foto1 img, div.foto2 img, div.foto3 img, div.foto4 img { width:100%; margin: 0; } 
/* ========== */
/* = header = */
/* ========== */
div.header { height:130px; padding:10px 20px; background-color: #bdd825; position: relative;}
div.header img.logo { display:block }
body.iframe div.header { display:none }

ul.language { margin:0; padding:0; list-style-type:none; position:absolute; width:400px; right:0px; top:50px }
ul.language a     { display:block; float:right; text-decoration:none; font-size:1px; text-indent:-200px; overflow:hidden; width:25px; height:25px; padding:0 10px; background-repeat:no-repeat; background-size:25px; background-position:bottom; }
ul.language a.selected, ul.language a:hover { background-position:top; }
ul.language a.nl  { background-image:url(../gfx/nl.png)  }
ul.language a.eng { background-image:url(../gfx/eng.png) }
ul.language a.esp { background-image:url(../gfx/esp.png) }
ul.language a.cat { background-image:url(../gfx/cat.png) }
ul.language a.owik { visibility:hidden; color:black; background:#F2F7D4; border-radius:18px; padding:10px 20px 10px 20px; text-indent:0; width:auto; height:auto; font-size:14px; margin:0 25px 0 0 }
body.nl ul.language a.owik { visibility:visible }

/* ======== */
/* = menu = */
/* ======== */

ul.menu1 { position:absolute; top:114px; right:0; margin:0; padding:0; list-style-type:none; }
ul.menu1 li { display:block; float:left; position:relative; height:36px; z-index:20; }
ul.menu1 a { display:block; float:left; color:#000; border-right:1px solid #000; padding:0 20px; text-decoration:none; font-size:15px; }
ul.menu1 li:last-child a { border:0 } 
ul.menu1 a:hover, ul.menu1 a.selected { color:#fff; text-decoration:none; }


ul.menu1 li ul {  border:1px solid #ddd; border-right:1px solid #ddd; border-bottom:1px solid #ddd; border-left:1px solid #ddd; display:block; width:200px; padding:10px; position:absolute; top:36px; background:rgba(255,255,255,0.85); z-index:100; border-radius:5px; visibility:hidden; opacity:0; transition:visibility 0s, opacity 0.2s linear; }
ul.menu1 li ul li { height:auto; position:static; float:none; }
ul.menu1 li ul li a { padding:10px 0; display:block; float:none;  border-right:none;}
ul.menu1 li:hover ul { visibility:visible; opacity:1; }
ul.menu1 li ul a:hover, ul.menu1 li ul a.selected { color:#737373; text-decoration:none; }

/*FOTOTEKST*/

div.fototekst { margin:-300px 0 0px 0; padding:30px 0px 20px 120px; height:250px; width:500px; }
div.fototekst p {color:#fff; font-size:115%;line-height:1.8em }
div.fototekst h1 {color:#fff; font-size:180%; font-weight:bold; line-height:1.2em; margin: 0 0 10px 0;}

div.fototekstblack { margin:-300px 0 50px 0; padding:30px 0px 20px 120px; height:200px; width:500px; }
div.fototekstblack  p {color:#000; font-size:115%;line-height:1.8em }
div.fototekstblack  h1 {color:#000; font-size:180%; font-weight:bold; line-height:1.2em; margin: 0 0 10px 0;}

div.fototekstbackground {z-index: 1; position: absolute; margin:-300px 0 50px 0; padding:30px 20px 10px 120px; height:170px; width:500px; background: rgba(0, 0, 0, 0.5)}
div.fototekstbackground  p {color:#fff; font-size:110%;line-height:1.8em }
div.fototekstbackground  h1 {color:#fff; font-size:180%; font-weight:bold; line-height:1.2em; margin: 0 0 10px 0;}


/* ========= */
/* = photo = */
/* ========= */
div.bgfoto { height:350px; background-position:center; background-size:cover }
div.bgfoto div.wrapper { padding-top:70px }

div.bgfoto2 { background-size:cover; background-position:center; margin: 30px 0; clear:both;}
*/

/* ==================== */
/* = algemeen (tekst) = */
/* ==================== */
h1,h2,h3,h4,h5 {color:black; line-height:1.2em; font-weight:normal; }
h1 {font-size:260%; margin: 15px 0 10px; }
h2 {font-size:200%; margin:5px 0 10px 0}
h3 {font-size:160%; font-weight:bold;  margin:10px 0}
h4 {text-transform:uppercase; font-size:100%; color:#2d8cff; font-weight:normal; margin:0}
h5 {font-size:150%; margin: 0 0 5px; }
h6 {font-size:130%; font-weight:normal; margin: 10px 0 10px 0}
p {line-height:1.8em; margin:0; padding:0; font-size:16px; color:#222 }
a {color:#005bb8; text-decoration:none; }

/* = strong { display:inline; color:white; background:#aaa; padding:1px 6px; font-size:95%; border-radius:3px; margin:1px 5px 0 0; font-weight:normal; }
strong a { color:#fff; }
strong:hover { color:#6983ad;}= */

#hallo .bgfoto {
  --height: 270px;
  --speed: 40s;
  --tile-width: 3641px;

  height: var(--height);
  background-repeat: repeat-x;
  background-position: 0 50%;
  background-size: var(--tile-width) 100%;
  animation: marquee-slide var(--speed) linear infinite;
  will-change: background-position;
}

@keyframes marquee-slide {
  from { background-position-x: 0; }
  to   { background-position-x: calc(-1 * var(--tile-width)); }
}

@media (prefers-reduced-motion: reduce) {
  #hallo .bgfoto { animation: none; }
}

/* = indexpagina introductie = */
div.intro {text-align:center; margin-top:20px; margin-bottom:20px; padding-bottom:40px; border-bottom:1px solid #ccc}
div.intro h1 {font-size:250%; font-weight:normal; color:#000; margin-top:15px; margin-bottom:10px}
div.intro p { font-size:18px%; line-height:1.8em}


/* = indexpagina tijdelijke boodschap= */
/*
div.alert {text-align:center; margin:40px 100px 40px 100px; }
div.alert h2 {font-size:150%; line-height:1.7em; font-weight:normal; font-style: italic; color:#0d3f8e;}
div.alert p { font-size:150%; line-height:1.7em; color:#0d3f8e;}
*/

/* = vervolgpagina introductie = */
div.introvervolg { display:block; width:920px; text-align:center; margin:60px 0 60px 0; padding: 0 30px;}
div.introvervolg h1 {font-size:300%; font-weight:bold; color:#000; margin-top:15px; margin-bottom:10px}
div.introvervolg p { font-size:115%; line-height:1.8em}
div.introvervolg div.plaatje img {height:auto; display:block; width:300px; float:left; margin-right:20px }

div.introvervolg2 { display:block; text-align:center; margin:60px 0 30px 0; padding: 0 30px;}
div.introvervolg2 h1 {font-size:300%; font-weight:bold; color:#000; margin-top:15px; margin-bottom:10px}
div.introvervolg2 p { font-size:115%; line-height:1.8em}
div.introvervolg2 div.plaatje img {height:auto; display:block; width:300px; float:left; margin-right:20px }

div.introvervolg3 { display:block; width:920px; text-align:center; margin:auto; padding: 0 30px;}
div.introvervolg3 { margin-bottom:50px;}
div.introvervolg3 h1 {font-size:60px; font-weight:bold; color:#000; margin-top:15px; margin-bottom:10px}
div.introvervolg3 h2 {font-size:54px; font-weight:bold; color:#000; margin-top:15px; margin-bottom:10px}
div.introvervolg3 h3 {font-size:45px; font-weight:bold; color:#000; margin-top:15px; margin-bottom:10px}
div.introvervolg3 p {font-size:1.20em; line-height:1.8em}

hr { display:block; width:980px; float:left; border:0; border-bottom:1px solid #ccc; margin:30px 0 30px }

/* ==================== */
/* = blokken inlogpagina = */
/* ==================== */

div.blok, div.blok2 {display:block; float:left; width:980px; margin:30px 0px 30px 0px; }
div.blok3  {display:block; float:left; width:980px; margin:30px 0px 30px 0px; background:#eee;
 padding:40px 40px 40px 40px; border-radius:15px; box-sizing: border-box;}
div.blok3g  {display:block; float:left; width:980px; margin:30px 0px 30px 0px; background: linear-gradient(90deg,rgba(198, 223, 53, 1) 0%, rgba(248, 243, 140, 1) 100%);
 padding:40px 40px 40px 40px; border-radius:15px; box-sizing: border-box;}
div.blok3r  {display:block; float:left; width:980px; margin:30px 0px 30px 0px; background: linear-gradient(45deg,rgba(194, 56, 255, 1) 1%, rgba(131, 185, 243, 1) 100%);
  padding:40px 40px 40px 40px; border-radius:15px; box-sizing: border-box; color:#fff;}
div.blok p, div.blok2 p, div.blok3 p, div.blok3g p, div.blok3r p {margin:0; font-size:18px; }
div.blok3r p {color:#fff;}
div.blok h1, div.blok2 h1, div.blok3 h1 {font-weight:bold;font-size:320%; margin-top:30px;}
div.blok h2, div.blok2 h2, div.blok3 h2, div.blok3g h2, div.blok3r h2 {font-weight:bold; line-height:1.3em; font-size:225%; margin:10px 0 20px 0;}
div.blok h4, div.blok2 h4, div.blok3 h4 {font-weight:bold; font-size:270%; margin:0; text-transform:none; color:#222; }
div.blok h6, div.blok2 h6 {font-size:130%; font-weight:normal; line-height:1.6em; margin: 10px 0 10px 0}

div.blok div.inhoud {display:block; width:640px; float:right; }
div.blok2 div.inhoud {display:block; width:480px; float:right; }
div.blok3 div.inhoud {display:block; width:460px; float:right; }

div.blok div.fl p img {height:auto; display:block; width:300px; float:left; margin-right:20px }
div.blok div.fr p img {height:auto; display:block; width:300px; float:right; margin-left:20px }
div.blok2 div.fl p img {height:auto; display:block; width:480px; float:left; margin-right:20px }
div.blok2 div.fr p img {height:auto; display:block; width:480px; float:right; margin-left:20px }

div.blok3 div.fl p img, div.blok3g div.fl p img, div.blok3r div.fl p img  {height:auto; display:block; width:440px; float:left; margin-right:50px }
div.blok3 div.fr p img, div.blok3g div.fr p img, div.blok3r div.fr p img {height:auto; display:block; width:380px; float:right; margin-left:50px }




/* ============= */
/* = formulier = */
/* ============= */
form.formulier { margin:20px 0 }
form.formulier label { font-size:100%; color:#444; display:block; margin:10px 0 5px }
form.formulier input.text,
form.formulier textarea { display:block; font:12px Trebuchet MS; padding:3px; background:#eee; width:595px; min-height:25px; margin:0 0 7px; border:1px solid #eee}
form.formulier input.captcha { width:100px; height:20px; float:left; padding:1px; margin:0 4px 0 0 }
form.formulier div#error { color:red; font-size:120% }

/*
body.iframe div.voetregel { display:none }
body.iframe div.zopim { display:none }

div.voetregel { clear:left; padding-top: 20px; border-top:1px solid #ccc; margin-bottom: 40px }
div.voetregel h1 {font-size:100%; }
div.voetregel h1 a {color:#555; text-decoration:none }
div.voetregel h2 {font-size:130%; }
*/

/* ========= */
/* = popup = */
/* ========= */
div.popup { position:absolute; width:600px; padding:20px; max-height:900px; background:white; border: 1px solid #eaeaea; border-radius:5px; box-shadow:2px 3px 4px 6px rgba(0,0,0,0.1); overflow:hidden; 
 
}
/*div.modal { position:absolute; left:0; top:0; width:100%; background:rgba(0,0,0,0.3) }*/
div.popup a.close { position:absolute; right:8px; top:5px; font-size:14px; font-weight:bold; }