/*             --------OVERLAYS----------           */
.overlay1 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.2);
  width: 100%;
  height: 100vh;
  display: none;
  z-index: 300;
}
.showOverlay1 {
  display: block;
}

.overlay2 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.2);
  width: 100%;
  height: 100vh;
  display: none;
  z-index: 300;
}
.showOverlay2 {
  display: block;
}

.overlay3 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.2);
  width: 100%;
  height: 100vh;
  display: none;
  z-index: 300;
}
.showOverlay3 {
  display: block;
}

/*--overlay weghalen als schermformaat bij gebruik verandert--*/
/*
<!--        overlay2 weg bij Groot formaat      -->
*/
@media screen and (min-width:900px) {
   div.overlay2{
    display: none;
   }
  }
/*         overlay3(Mobiel) weg als ie er (bij scherm draaien) 
           per ongeluk nog is bij Tablet of Groot
*/
@media screen and (min-width:500px) {
div.overlay3{
    display: none;
   }
}



/*
<!--        ---------  HEADER     -------       -->
*/
.kopBG_Kleur {
 background-color:rgba(255,255,255,0); 
}



/*
<!--        ---------    rowKop     -------       -->
*/
.rowKop_160 {
  max-width: 1275px;
  height: 160px;
  margin: auto; 
  text-align: center;
}
.rowKop_160:after {
  content: "";
  display: table;
  clear: both;
}

.rowKop_180 {
  max-width: 1275px;
  height: 180px;
  margin: auto; 
  text-align: center;
}
.rowKop180:after {
  content: "";
  display: table;
  clear: both;
}
.rowKop_180XL {
  max-width: 1275px;
  height: 180px;
  margin: auto; 
  text-align: center;
}
.rowKop180XL:after {
  content: "";
  display: table;
  clear: both;
}

/*
<!--        ---------     columnKop       -------       -->
*/

.columnKopLR {
  float: left;
  width:25%;
  padding: 0px 0px;
} 
.columnKopLR_Tablet {
  float: left;
  width:50%;
  padding: 0px 0px;
  display: none;
} 
.columnKopLR_Mobiel {
  float: left;
  width:100%;
  padding: 0px 0px;
  display: none;
} 
.columnKopM {
  float: left;
  width:50%;
  padding: 0px 0px;
}
.columnKopM_Mobiel{
display: none;
}


/*                           kopLinks                LLLLLLLL  */

.kopLinks1{
position: relative;
height: 50px;
right: 35px;
top: 60px;
}

.kopLinks2{
position: relative;
height: 50px;
right: 50px;
top: 50px;
}

.kopLinks3{
position: relative;
height: 50px;
right: 64px;
top: 116px;
}

/*     -------   Pinokkio  Making Of  -----------     */

.Pijl_Pin_MakOf {
  position: relative;
  top: -12px;
  left: 50px;
}

.Pijl_Pin_MakOf_G {
  position: relative;
  top: -10px;
  left: 50px;
}
.Pijl_Pin_MakOf_Overlay{
position: relative;
  top: -93px;
  left: 0px;
z-index: 110;
}


/*         kopLinks               HamMailVlag         */



.absoluteHam {
  position: absolute;
  width: 100%;
  height: 10px;
  border: 0px solid #73AD21;
  z-index: 400;
}
.ham1 {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  margin: auto;
  }
.ham2 {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  margin: auto;
  }
.ham3 {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  margin: auto;
  }

.MailVlag{
position: relative;
  top: 4px;
  left: 90px;
}
.MailVlag2{
position: relative;
  top: -52px;
  left: 90px;
}
.MailVlag3{
position: relative;
  top: -52px;
  left: 55px;
}
.MailVlag_Overlay{
position: relative;
  top: -50px;
  left: 0px;
z-index: 100;
}


/*
<!--               ---------kopMidden-------      MMMMMMMMMM-->
*/
.SjaakRood{
  width: 100%;
  height: 100px;
  position: relative;
  top: 5px;
  left: 0px;
  margin: auto;
  display: block;
border: 0px solid red;
z-index: 100;
 }
.SjaakRood_{
  width: 100%;
  height: 0px;
  position: relative;
  top: 5px;
  left: 0px;
  margin: auto;
  display: block;
border: 0px solid red;
z-index: 120;
 }

/*
<!--                     --kopRechts--- AIT           RRRRRR  -->
*/

.kopRechts1{
position: relative;
height: 50px;
right: 30px;
top: 40px;
}

.kopRechts2{
position: relative;
height: 50px;
right: 10px;
top: 30px;
}

.kopRechts3{
position: relative;
height: 50px;
right: 0px;
top: -20px;
}



/*               -------Felix header---------      */

.Felix_Kop2{
display: none;
}
.absolute_Pijl_Felix {
  position: absolute;
  width: 100%;
  height: 500px;
  background: rgb(255, 209, 102, 0);
  border: 0px solid #73AD21;
  z-index: 200;
}
.Pijl_Felix_1{
position: relative;
right: 250px;
top: -105px;
}
.Pijl_Felix_2{
position: relative;
right: 0px;
top: -40px;
display: none;
}

@media only screen and (max-width: 730px) {
  div.Pijl_Felix_1{
    display: none;
  }
  div.Pijl_Felix_2{
    display: block;
  }
  div.Felix_Kop2{
    display: block;
  }
  div.Felix_Kop1{
    display: none;
  }
}

/*                  -------------------------                */





/*               -------------------------      */
/*               -------------------------      */
/*             --------HAMBURGER MENU----------           */
/*             -----------    1   ------------           */

/* ?? Waar is dit voor?*/
.p-menu1{
   height: 100%;
}
.menu1 {
position: relative;
left: 30px;
  width: 300px;
  background-color: rgba(0,0,80,0.85);
  margin: 0px 0px 0px 0px;
  display: -ms-grid;
  display: grid;
  grid-template-rows: 1fr repeat(4, 0.5fr);
  grid-row-gap: 0px;
  padding: 0;
  list-style: none;
  clear: both;
  /*width: auto;*/
  text-align: center;
  height: 0px;
  overflow: hidden;
  transition: height .2s ease;
  z-index: 400;
  -webkit-transition: all 0.1s ease;
  transition: all 0.1s ease;
}
.menu1 a:first-child {
  margin-top: 0px;
}
.menu1 a:last-child {
  margin-bottom: 90px;
}
.showMenu1 {
height: 400px;
}

/*             -----------    2   ------------           */

.p-menu2{
   height: 100%;
}
.menu2 {
position: relative;
left: 55px;
  width: 310px;
  background-color: rgba(0,0,80,0.85);
  margin: 0px 0px 0px 0px;
  display: -ms-grid;
  display: grid;
  grid-template-rows: 1fr repeat(4, 0.5fr);
  grid-row-gap: 0px;
  padding: 0;
  list-style: none;
  clear: both;
  /*width: auto;*/
  text-align: center;
  height: 0px;
  overflow: hidden;
  transition: height .2s ease;
  z-index: 400;
  -webkit-transition: all 0.1s ease;
  transition: all 0.1s ease;
}
.menu2 a:first-child {
  margin-top: 0px;
}
.menu2 a:last-child {
  margin-bottom: 90px;
}
.showMenu2 {
height: 420px;
}

/*             -----------    3   ------------           */

.p-menu3{
   height: 100%;
}
.menu3 {
position: relative;
left: 60px;
top: -100px;
  width: 100%;
  background-color: rgba(0,0,80,0.85);
  margin: 0px 0px 0px 0px;
  display: -ms-grid;
  display: grid;
  grid-template-rows: 1fr repeat(4, 0.5fr);
  grid-row-gap: 0px;
  padding: 0;
  list-style: none;
  clear: both;
  width: auto;
  text-align: center;
  height: 0px;
  overflow: hidden;
  transition: height .2s ease;
  z-index: 400;
  -webkit-transition: all 0.1s ease;
  transition: all 0.1s ease;
}
.menu3 a:first-child {
  margin-top: 0px;
}
.menu3 a:last-child {
  margin-bottom: 90px;
}
.showMenu3 {
height: 420px;
}

.link1 {
  color: #ffffff !important;
  width: 100%;
  margin: 0;
  padding: 10px 0;
  font: 22px 'Courier New';
  text-decoration: none;
  
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;

  background-color: rgba(255,255,255,0);
}
.link1:hover {
/* background-color: rgba(255,255,255,0.3);*/
 color: #ff0000 !important;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

/*  background-color: #15157d    ---blauw           */
/*  background-color: #f3c00d;   ---geel           */


/*                   -------        TITELS   --------     */
/*                   -------        TITELS   --------     */
/*                   -------        TITELS   --------     */
/*                   -------        TITELS   --------     */
/*                   -------        TITELS   --------     */
/*                   -------        TITELS   --------     */


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

.Home{
 	position: relative;
	width: 0px;
  	height: -50px;
	left: -50px;
	top: -85px;
 	margin: auto;
}
.Home_Mobiel{
  position: relative;
  right: 5px;
  top: 70px;
  display: none;
}
/*            -------  Pagina  -----------     */

.Pagina {
 	position: relative;
	width: 0px;
  	height: 0px;
	top: -70px;
 	margin: auto;
}
.Pagina_Mobiel{
  position: relative;
  right: 0px;
  top: 68px;
  display: none;
}

 /*
0000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000
0000000000000000000000000000000000000000000000000000000000000000
*/

/*
<!--                                 Tablet formaat         -->
*/
@media screen and (max-width:900px) {
  
/*-----------------Kop hoogte aanpassen-----------------------*/
div.rowKop_160 {
    height: 225px;
  }
div.rowKop_180 {
    height: 250px;
  }
div.rowKop_180XL {
    height: 250px;
  }

/*-----------------PaginaTitels Omlaag-----------------------*/
/*-----------------PaginaTitels Omlaag-----------------------*/
/*-----------------PaginaTitels Omlaag-----------------------*/  
div.Pagina{
    top: 10px;
  }
/*--------------------Rest----------------*/
  div.overlay1{
    display: none;
  }

  div.columnKopLR {
    display: none;
  }
    div.columnKopLR_Tablet {
    display: block;
  }
  div.columnKopM {
    width:100%;
  }
}



/*
<!--                                     Mobiel           -->
*/
@media screen and (max-width:500px) {

/*-----------------Kop hoogte aanpassen-----------------------*/
div.rowKop_160 {
    height: 315px;
  }
div.rowKop_180 {
    height: 315px;
  }
div.rowKop_180XL {
    height: 360px;
  }

/*-----------------Display Titels-----------------------*/
div.Pagina_Mobiel{
    display: block;
  }

/*------------/////////////////////////----------------*/

  div.overlay2{
    display: none;
  }
  div.overlay1{
    display: none;
  }

div.columnKopLR_Tablet {
    display: none;
  }
  div.columnKopLR_Mobiel {
    display: block;
  }
  div.columnKopM{
    display: none;
  }
  div.columnKopM_Mobiel{
    display: block;
  }
}



/*
<!--Content-->
*/
.Content{
  height: 1000px;
  width: 98%;
max-width: 1275px;
  color: white;
  font-family: "Courier New", Courier, monospace;
  text-align: center;
  margin: auto;
  padding: 5px;
  box-sizing: border-box;
  background: rgb(255,255,255,0.1);
  }




/*
<!--De footer-->
*/
  #footer {
  background-color:rgba(0,0,0,0.55);
  height: 200px;
  color: #ffffff;
  text-align: center;
  font-size: 12px;
  padding: 0px;
}