@charset "UTF-8";

@import url("fontstyle.css")screen;
@import url("responsivestyle.css")screen;
/* @import url("w3.css")screen; */
@import url("w3_aangepast.css")screen;

/* Algemene declaraties die op de hele website van toepassing zijn. */


*, html {
         margin: 0;
         padding: 0;
        }

.clear {
        clear: both;
       }

body {
      background:#FFFFFF;                                    /* De achtergrondkleur van de website is vastgesteld op wit.                */
      /* background:#b3e7ff;  */
      overflow: -moz-scrollbars-vertical;                    /* Verticale schuifbalken verschijnen automatisch indien benodigd.          */
      min-height: 100%;                                      /* Door als minimale hoogte 100% te definiëren, wordt gehele scherm gevuld. */
      overflow-y: scroll;                                    /* Valt de webinhoud buiten het beeldscherm, dan scrollt de inhoud mee.     */
      font: 17px Calibri, Helvetica, Arial, sans-serif;      /* Lettergrootte is gedefinieerd als 15px.                                  */
      line-height: 150%;                                     /* Regelafstand
      color:#000000;                                         /* Als standaard tekstkleur is gekozen voor zwart.                          */
     }

div a:link, div a:visited, div a:hover, div a:active {
                                           color: orange;
                                           text-decoration: none;
                                            }


/* Header (afbeelding = Logo-Menu) tbv. fixed positioning
** Zet z-index op HOGE WAARDE, opdat het uitklapmenu prioriteit heeft op de logo-afbeelding (img element)!  */
.Pheader       {
               position: fixed;
               top: 0;
               z-index: 4;
               background-color: white;
               }

/* Speciofieke declaraties per cel, t.b.v. de webinhoud */

/* Banner */
section.cel1 {
              /* margin-top: 3px; */
              margin-top: 0px;
              height: 250;
              padding:0px 0px 0px 0px;
              border-style:none;
              margin-bottom: 0px;
             }

/* Tekst Meldpunt in Banner */
section.cel1 p    {
                   background-color: gray;
                   color: white;
                   height: 30px;
                   width: 260px;
                   padding:5px 10px 5px 10px;
                   font-weight: bold;
                   font-size: 25px;
                   position: absolute;
                   top: 0;
                   left: 40;
                  }

/* Banner Mobiel */
section.cel1_Mobiel {
              /* margin-top: 3px; */
              margin-top: 10px;
              /* height: 250; */
              height: 126px;
              padding:0px 0px 0px 0px;
              border-style:none;
              /* border-radius: 0px;  */
              margin-bottom: 0px;
             }

/* Logo */
section.cel2  {
               position: absolute;
               top: 0;
               left: 20;
               opacity: 1;
               border-radius: 10px;
               margin-top: 0px;
               margin-bottom: 0px;
               margin-right: 0px;
               height: 312px;
               padding:0px 0px 0px 0px;
               background-color:#33cc33;
              }

/* image van logo
** zet de prioriteit van de afbeelding (Img) laag zodat het menu, bij uitklappen, zichtbaar is!  ** */
#overlap      {
              position: relative;
              /* top: 0px;
              left: 0px; */
              z-index: -1;
              }

/* Menu */
section.cel3  {
               margin-top: 05px;
               margin-bottom: 10px;
               margin-left: 0px;
               height: 40px;
               line-height: 40px;
               font-weight: bold;
               background-color:white;
               border-radius: 5px;
              }

/* Deze rule zorgt ervoor dat de hyperlinks die HIER IN HET MENU in de website worden ge-
bruikt een WITTE kleur hebben, en dat er geen onderstreping van de links plaatsvindt */
/*
section.cel3 a:link, a:visited, a:hover, a:active {
                                           color: white;
                                          text-decoration: none;
                                            }
*/



/* NIEUWE STIJL MENU
    AFKOMSTIG UIT VOORBEELD W3C */

/* TEST */

/* nav     {
         z-index: 1;
         height: 60px;
         position: absolute;
         top: 0;
         left: 0;
        } */

/* nav {background-color: black;} */

/* ACHTEROND MENU (BALK EN UITKLAP) VAN ZWART NAAR WIT. EN LETTERS VAN WIT NAAR ZWART */

nav a {
  text-decoration: none;
  color: black;
  font-size: 17px;
  padding-right: 15px;
  padding-left: 15px;
  display:inline-block;
}

/* ** OPMAAK GEDLT VOOR ALLE A-TAGS IN HET MENU; DUS OVERAL KLEUR ORANJE **  */
nav a:link, nav a:visited, nav a:hover, nav a:active {
                                           color: orange;
                                           text-decoration: none;
                                            }

nav ul {
  display: inline;
  margin: 0;
  padding: 0;
}

nav ul li {display: inline-block;}

/* nav ul li:hover {background: #555;}  */
nav ul li:hover {background: #ffffff;}

nav ul li:hover ul {display: block;}

nav ul li ul {
  position: absolute;
  width: 200px;
  display: none;
}

/* ** UITKLAPMENU **  */
nav ul li ul li {
  background: #555;
  /* background: #ffffff;  */
  display: block; 
}

nav ul li ul li a {display:block !important;}

/* uitklapmenu: witte letters op zwarte achtergrond */
nav ul li ul li a:link  {
                            color: #ffffff;
                            text-decoration: none;
                        }


nav ul li ul li:hover {background: #666;
                       color: #ffffff;
                      }
/* nav ul li ul li:hover {background: #ffffff;}  */



/* Versie Collapse tbv. Mobiel */

/* Style the navigation menu */
.topnav {
  overflow: hidden;
  /* background-color: #333;  */
  /* background-color: grey; */
  background-color: white;
  position: relative;
  margin-top: 3px;
}

/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
  display: none;
  background-color: #333;
}

/* Style navigation menu links */
.topnav a {
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
}

/* Style navigation menu Paragraph */
.topnav p {
  color: orange;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
}

/* Style the hamburger menu */
.topnav a.icon {
  background: black;
  display: block;
  position: absolute;
  right: 0;
  /* top: 0; */
  top: 0;
}

/* Add a grey background color on mouse-over */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Style the active link (or home/logo) */
.active {
  background-color: #04AA6D;
  color: white;
}

/* Tweede menu laag */
.CollapLevel1         {
                         /* margin-top: 0px;
                         margin-bottom: 0px;
                         padding: 0px 0px 0px 0px;    */
                         display:inline-block;
                         margin-left: 0px;
                        }
.CollapLevel3           {
                         display:block;
                        }
ul.CollapLevel1 li    {
                     /* margin-left: 0px;  */
                    }

ul.CollapLevel2     {
                     display: none;
                    }

ul.CollapLevel2 li    {
                     margin-left: 30px;
                    }

#ToonLevel2     {
                    display: none;
                    }

.topnav ul li:hover ul {display: block;}





.logo    {
         margin-top: 0px;
         margin-right: 0px;
         /* height: 45px; */
         height: 90px;
         padding:0px 0px 0px 0px;
         /* background-color: #ddd; */
         background-color: white;
         }


/* einde Menu */



/* Content */

.main img {
           border-radius: 10px;
          }

/* *** Home-Page *** */

/* Welkom-tekst */
/* section.cel5 {
               float: left;
               text-align:left;
               overflow: auto;
               padding:10px 25px 10px 25px;
               background-color:#ffff99;
               border: ridge;
               border-radius: 10px;
             } */

section.cel5 {
               float: left;
               display: block;
               text-align:left;
               /* overflow: auto; */
               margin-top: 35px;
               margin-bottom: 20px;
               padding:0px 0px 0px 0px;
               background-color: white;
               /* border: ridge;
               border-radius: 10px; */
             }

section.cel5 p    {
                   padding:5px 0px 0px 0px;
                  }

section.cel5 h4    {
                   padding:10px 0px 0px 0px;
                  }

section.cel5 a:link, section.cel5 a:visited, section.cel5 a:hover, section.cel5 a:active {
                                           color: orange;
                                           text-decoration: none;
                                            }


/* Footer */

section.cel12 {
              text-align:center;
              background-color: gray;
              color: white;
             }

section.cel12 p {
              padding: 30px 30px;
              line-height: 1.5;
              display: inline-block;
              vertical-align: top;
              text-align:left;
                }

section.cel13 {
              text-align:center;
              background-color: gray;
              color: white;
              }

section.cel13 p {
              padding: 30px 30px;
              line-height: 1.5;
              display: inline-block;
              vertical-align: top;
              text-align:left;
                }

section.cel14 {
              text-align:center;
              background-color: gray;
              color: white;
              }

section.cel14 p {
              padding: 30px 30px;
              line-height: 1.5;
              display: inline-block;
              vertical-align: top;
              text-align:left;
                }

.LinkOrange a {
              color: Orange;
              text-decoration: none;
              }

            font-weight: normal;
               }


/* *** Contactformulier HomePage *** */

.Achtergrond            {
                        /* background-color: #ff6600;   */
                        }
section.cel60          {
                       /* position: relative;  */
                       /* float: left; */
                       display: block;
                       margin-top: 0px;
                       margin-bottom: 40px;
                      }
section.cel60 legend  {
                       font-size:2em;
                       margin: 2px;
                       margin-bottom: 10px;
                       color:#0080C0;
                      }
section.cel60 form {
                     border:solid thin black;
                     border-radius: 5px;
                     font:inherit;
                     overflow: hidden;
                     background-color: #ff6600;
                    }
section.cel60 fieldset {
                        border: 0;
                        font-weight: bold;
                        margin: 2px;
                        padding: 2px;
                       }

section.cel60 p  {
                 padding: 10px 2px;
                 }
 
section.cel60 input, textarea {
                                border-radius: 5px;
                                font:inherit;
                                margin: 1.5px;
                               }

section.cel60 textarea {
                                width: 400px;
                               }
                        
section.cel60 .btn {
                     clear: left;
                     display: block;
                     background: linear-gradient(#FF0000, #8080FF);
                     border: 0;
                     color: #fff;
                     cursor: pointer;
                     font-weight: bold;
                     padding: 8px 16px;
                   }

/* Adres */
section.cel65          {
                       /* position: relative;  */
                       float: left;
                       display: block;
                       /* margin-top: 760px; */
                       margin-bottom: 40px;
                      }


/* *** Contactformulier ContactPage *** */

/* Koptekst */
section.cel90 {
               margin-bottom: 10px;
             }   

/* formulier */
/*.Achtergrond            {
                        background-color: #ff6600;
                        } */

section.cel70          {
                       /* position: relative;
                       float: left;  */
                       /* display: block; */
                       margin-top: 20px;
                       margin-bottom: 15px;
                      }
section.cel70 legend  {
                       font-size:2em;
                       margin: 2px;
                       margin-bottom: 10px;
                       color:#0080C0;
                      }
section.cel70 form {
                     border:solid thin black;
                     border-radius: 5px;
                     font:inherit;
                     overflow: hidden;
                     background-color: #ff6600;
                    }
section.cel70 fieldset {
                        border: 0;
                        font-weight: bold;
                        margin: 2px;
                        padding: 2px;
                       }

section.cel70 p  {
                 padding: 10px 2px;
                 }
 
section.cel70 input, textarea {
                                border-radius: 5px;
                                font:inherit;
                                margin: 1.5px;
                               }

section.cel70 textarea {
                                width: 400px;
                               }
                        
section.cel70 .btn {
                     clear: left;
                     display: block;
                     background: linear-gradient(#FF0000, #8080FF);
                     border: 0;
                     color: #fff;
                     cursor: pointer;
                     font-weight: bold;
                     padding: 8px 16px;
                   }

/* Adres */
section.cel75          {
                       /* position: relative;
                       float: left;  */
                       display: block;
                       /* margin-top: 760px; */
                       margin-bottom: 30px;
                      }


/* *** PAGINA 'IN DE MAAK' *** */

section.cel100 {
               height: 320px;
               margin-bottom: 40px;
               text-align:center;
               color: black;
               border-style: solid;
               font-weight: bold;
               background-color: yellow;
               }

section.cel100 h1 {
                  height: 320px;
                  line-height: 320px;
                  }