.fancybox-custom .fancybox-skin {
	box-shadow: 0 0 50px #222;
	}


body {font-family: Verdana, Helvetica, sans-serif;}
* {
     margin: 0;
     padding: 0;
}

 .pic-wrapper {
     position: absolute;
     width: 100%;
     height: 100%;
     overflow: hidden;
       background-color:#000000;   /* achtergrond achter fotos zwart voor mooiere overgang */
       z-index: -1;
position: fixed;
}

 figurecaption {
     position: absolute;
     top: 50%;
     left: 50%;
     color: #fff;
}
 .pic-1 {
     opacity: 1;
    
}





/* keyframes*/
 @keyframes slideShow {
     0% {
         background-position: 0px 0px;
         opacity: 0;
         transform:scale(1);
         -ms-transform:scale(1);
    }
     5% {
         opacity: 1 
    }
     25% {
         opacity: 1;
    }
     30% {
         opacity: 0;
         transform:scale(1.1);
         -ms-transform:scale(1.1);
    }
     100% {
         background-position: 0px 0px;
         opacity: 0;
         transform:scale(1);
         -ms-transformm:scale(1);
    }
}
 @-o-keyframes slideShow {
     0% {
         background-position: 0px 0px;
         opacity: 0;
         -o-transform:scale(1);
    }
     5% {
         opacity: 1 
    }
     25% {
         opacity: 1;
    }
     30% {
         opacity: 0;
         -o-transform:scale(1.1);
    }
     100% {
         background-position: 0px 0px;
         opacity: 0;
         -o-transformm:scale(1);
    }
}
 @-moz-keyframes slideShow {
     0% {
         background-position: 0px 0px;
         opacity: 0;
         -moz-transform:scale(1);
    }
     5% {
         opacity: 1 
    }
     25% {
         opacity: 1;
    }
     30% {
         opacity: 0;
         -moz-transform:scale(1.1);
    }
     100% {
         background-position: 0px 0px;
         opacity: 0;
         -moz-transformm:scale(1);
    }
}
 @-webkit-keyframes slideShow {
     0% {
         background-position: 0px 0px;
         opacity: 0;
         -webkit-transform:scale(1);
    }
     5% {
         opacity: 1 
    }
     25% {
         opacity: 1;
    }
     30% {
         opacity: 0;
         -webkit-transform:scale(1.1);
    }
     100% {
         background-position: 0px 0px;
         opacity: 0;
         -webkit-transformm:scale(1);
    }
}

.titlebar {
  float: center;
  
  }

  
#myDIV1 {
  font-size: 3vw;
  text-shadow: 3px 2px 6px black;
  color: #ffffff;
  }

  
#BovensteRegel {
  font-size: 3.0vw;
  font-style: italic;
  font-weight: bolder; 
  text-shadow: 3px 2px 18px black;
  color: #AA88f9;
  color: #ffffff;
  }

 #GroteTitelRegel {
  font-size: 5vw;
  font-style: italic;
  font-weight: bolder; 
  text-shadow: 3px 2px 18px black;
  color: #ffffff;
  }

   
  
  
  

.footer {
  font-size: 2.2vw;
		width: 96%;
  	position: center;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 0px;
      border-top-left-radius: 15px;
   border-top-right-radius: 15px;
    }




.arya {
	/*  background: url(t10.jpg) no-repeat center center; */
	width: 96%;
  	position: center;
    overflow: hidden;
    background-color: white;
    border-radius: 0px;
      border-bottom-left-radius: 15px;
   border-bottom-right-radius: 15px;
     }

 .topcirclebox     {
  border: 6px solid white;
  padding: 50px;
  margin: 20px;
  width:90%; 
    left: 10%;
  background-color:  rgba(200, 0, 0, 0.8);
  }    
.topcircle a    {
  border: 6px solid white;
  padding: 40px;
  margin: 20px;
  width:14%; 
  border-radius:50%; 
  background-color:  rgba(0, 255, 0, 0.8);
  }
     

	    
.NavigatieMenu {
  overflow: hidden;
  background-color: white;
	position: -webkit-sticky;
	position: sticky;
	
  top: 0px;
  left: 0%;
  width: 96%;
  border-top-left-radius: 15px;
   border-top-right-radius: 15px;
   border-bottom: 2px solid #9963fa;
 
  background: white;
  text-shadow: 1px 2px 8px white;
}

.NavigatieMenu a {
  float: left;
  display: block;
  color: #7743f0;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 8vw;
  border-radius: 15px;
}

.NavigatieMenu a:hover {
  background: #9963fa;
  color: white;
}

.main {
  padding: 16px;
  margin-top: 30px;
  height: 1500px; /* Used in this example to enable scrolling */
}
.NavigatieMenu a  {
font-size: 3vw;
}
@media screen and (min-width: 800px) {
.NavigatieMenu a  {
font-size: 4.5vw;
}

}
@media screen and (min-width: 1200px) {
.NavigatieMenu a  {
font-size: 1.1vw;
}
}



 body {
font-size: 2vw;
color: black;
}

@media screen and (min-width: 1200px) {
body {
font-size: 1.1vw;
color: black;
}

 #myDIV1 {
   font-size: 1.2vw;
 }

  .footer {
   font-size: 1.2vw;
 }

 
 
 
}


.wrap{
  width: 94vw;
  display:flex;
  /*  background: green; */
  align-items: center;
  
}

.wrap div{
  height: 90%; 
  width: 47vw;
  margin: 10px;
  /* background: yellow; */
  align-items:center;
  
}

@media (max-width: 800px ){
  
  .wrap{
    align-items:center;
    flex-direction: column;
  }
  
  .wrap div{
    margin: 10px;
    width: 90vw;
  }
}