@charset "utf-8"; /* CSS Document */



/*instellingen voor openen in Apple Iphone */

@viewport {zoom: 0.5; width: extend-to-zoom; }
@-ms-viewport {width: extend-to-zoom; zoom: 0.5; }
/* Algemeen 



 no javascript basic */




html, body {font-family: 'Open Sans', sans-serif; font-weight: 300; margin: 0; padding: 0; width: 100%; height: 100%; font-size: 100%; line-height: 200%; text-align: left; color: #333333; -webkit-font-smoothing: antialiased;  scroll-behavior: smooth; outline: none; }
H1, H2, H3, H4, H5, H6 {font-family: 'Ubuntu', sans-serif; font-weight: 100; letter-spacing: 1px; }
img {image-rendering: crisp-edges; border: 0; border-collapse: collapse; image-resolution: from-image;  }
a {font-weight: bold; border: 0; text-decoration: none; color: #555555; }
a:focus {outline: 0; }
a:hover {border: 0; text-decoration: line; color: #000000; }
li {list-style: none; }
ul.punt li{list-style: disc;}
div {display: block; position:relative; margin:auto; padding: 0; margin-top:0; margin-bottom:0; }
.kleur1 {background-color: rgba(220,220,200,1.00); background-color: #ffffff; }
.kleur2 {background-color: rgba(90,90,100,1.00); color: #ffffff; }
.kleur2 a {  color: #bbbbbb; }
.kleur2 a:hover {  color: rgba(220,216,160,1.00); }
.kleur3 {background-color: rgba(245,245,245,1);}
.kleur4 {background-color: rgba(220,216,160,1.00); }
.kleur5 {background-color: rgba(216,195,88,0.5); }
.kleur6 {background-color: rgba(20,152,180,1); color: #ffffff;}
/** mobfirst */

.popu{display:block; background-color:#585858; color:#ffffff; width:100%; max-height:30px;}

.Slide{ width: 94%; padding:3%; padding-top:80px; padding-bottom:80px; scroll-behavior: smooth;}
.subcontainer, .content {width: 100%; max-width: 1400px; }
.button {display:inline-block; min-width: 150px; margin-top: 30px; margin-bottom: 10px; padding: 10px; text-align: center; vertical-align: middle; border-radius: 0px; text-transform: uppercase; font-weight: bold; letter-spacing: 2px; border: 1px solid #FFFFFF; opacity: 0.5; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; transition: opacity 0.5s; color: #ffffff; background-color: rgba(200,200,200,0)}
.button:hover, .button:focus {cursor: pointer; opacity: 1; background-color: rgba(0,0,0,0.2)}
.button a {color: #ffffff; font-family: 'Ubuntu', sans-serif; }
.button a:hover, .button:hover a {font-weight: bold; border: 0; text-decoration: none; color: #ffffff;}
.LDpulse {animation: pulse 1s infinite; }
@keyframes pulse {0% {opacity: 0.5; }
50% {opacity: 0; }
100% {opacity: 0.5; }
}

/*Cookiemelding*/


@keyframes Uitfadenmelding {0% {opacity:0; }
5% {opacity:0; }
10% {opacity:1; }
95% {opacity:1; }
100% {opacity:0; }
}

.Cookiemelding{
  animation-name: Uitfadenmelding; animation-duration: 10s;  opacity: 0; background-color:rgba(255,255,255,0.5); font-size:0.8em; color: #999; text-align:center; padding:10px; width:100%; display:block; position:absolute; top:0; 	z-index:90; }
.sluitbutton{
    border-radius:2px; margin:15px; padding:4px; padding-left:10px; padding-right:12px; line-height: 15px; border:1px #ccc solid;   background-color:#fff;}
.sluitbutton:hover{background-color: rgba(220,216,160,1.00);
  }
#btnControl {
   display:none; }
#btnControl:checked + label  {
       display: none; }

/* The animation code */

 
/*The element to apply the animation to */

 #foutmeldingjava {animation-name: Uitfadenmelding; animation-duration: 20s; top: 0; position: absolute; margin: auto; display: block; width: 100%; height: auto; z-index: 99; background-color: rgba(0,0,0,0.77); color: #ffffff; text-align: center; padding: 5px; opacity: 0; }


@-webkit-keyframes fadeIn { from { opacity:0; }
to { opacity:1;}
}
@-moz-keyframes fadeIn { from { opacity:0; }
to { opacity:1;}
}
@keyframes fadeIn { from { opacity:0; }
to { opacity:1;}
}

.fade-in {
 opacity:0; 
 -webkit-animation:fadeIn ease-in 1; 
 -moz-animation:fadeIn ease-in 1; animation:fadeIn ease-in 1; -webkit-animation-fill-mode:forwards; 
 -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; -webkit-animation-duration:1s; -moz-animation-duration:1s; animation-duration:1s; }
/** non javascript **/

header, .header {top: 0; margin-top:0; width: 100%; z-index: 90; position:fixed; text-align:center }
.logo, .mIco, .logo a{color: #ffffff; color:rgba(90,90,100,1.00); font-weight: 100; display:block; letter-spacing: 4px; -webkit-transition: 1s linear; -moz-transition: 1s linear; -ms-transition: 1s linear; -o-transition: 1s linear; transition: 1s linear;}
.logo{text-align: center; font-size: 20px; width:100%; letter-spacing:1px; }
.logo a{ font-size: 18px;}
.klein h1{ font-size:  20px; -webkit-transition: 1s linear; -moz-transition: 1s linear; -ms-transition: 1s linear; -o-transition: 1s linear; transition: 1s linear;}
.logo h1{ -webkit-transition: 1s linear; -moz-transition: 1s linear; -ms-transition: 1s linear; -o-transition: 1s linear; transition: 1s linear;}
.logorondje{border-radius: 50%;width: 80px; height:80px; background-color:#fff; background-image: url(../logo.jpg); background-position:center 5px; background-repeat:no-repeat; background-size: cover;overflow: hidden;}
.icon{width:50px; height:50px; opacity:0.5}
.icon:hover{ opacity:1}
.mIco {font-size: 15px; height: 50px; }
.mIco:hover{color:rgba(20,152,180,1); -webkit-transition: 0.1s linear; -moz-transition: 0.1s linear; -ms-transition: 0.1s linear; -o-transition: 0.1s linear; transition: 0.1s linear; }
.topmenu {max-width: 500px; height: 50px; top:120px; padding-left:10px; z-index: 91; position:absolute;}
div.topmenu > div { max-height: 0; overflow: hidden; max-width: 500px; min-width: 250px; width:100%; text-align: center; margin-left:-5px; -webkit-transition: 1s linear; -moz-transition: 1s linear; -ms-transition: 1s linear; -o-transition: 1s linear; transition: 1s linear;}
div.topmenu:hover > div, div.topmenu:focus > div {max-height: 400px;max-width: 400px; }
.topmenu .icon{padding:10px;}


#animaties.Anker, #contact.Anker, #privacy.Anker{margin-top:-400px; position:absolute; height:0; width:0}
.animatiediv {position: relative; margin: auto; border-radius: 50%; border: 20px rgba(255,255,255,1.00) solid; width: 100px; height:100px; background-color: #fff; overflow: hidden; }
#beeldani  {width:100px; padding-top:10px;}
.animatie {display:none;}
#privacy .tekst{max-width:1280; width:90%; margin:auto;}
/* portfolio*/
#feed, .pfgrid{ display: flex; align-items: center; flex-direction: row; justify-content: center; flex-wrap: wrap; text-align: center;}
#feed img{opacity:0.75; -webkit-transition: 0.1s linear; -moz-transition: 0.1s linear; -ms-transition: 0.1s linear; -o-transition: 0.1s linear; transition: 0.1s linear; }
#feed img:hover{opacity:1;}
.mobthumb{ display:block; width:100%;}
.pfitem, .pfitemvideo{ width:45%; background-color:#fff; background-position:center; background-repeat:no-repeat; background-size: cover; margin:5px; max-width:350px; max-height:350px;}

.pfthumb img{width:100% ; max-width:350px;  -webkit-transition: 0.1s linear; -moz-transition: 0.1s linear; -ms-transition: 0.1s linear; -o-transition: 0.1s linear; transition: 0.1s linear; }
.pfitem .pfthumb img {opacity:0;}
.pfitem .pfthumb img:hover {opacity:1;}
.pfitemvideo .pfthumb img {opacity:0.5;}
.pfitemvideo .pfthumb img:hover {opacity:1;}
.pfitemvideo{background-size: 1px;}
.pfitemvideo .pfthumb img{display:none}
.pfitemvideo iframe{width:100%; background-color:#ffffff; border:0;}
.content{text-align:center;  width:99%;}
.gallery{}
.jscript, .nomob, .nomobshow{display:none;}
.mob{display: block;}

/*voorbereiding op javascript */


#feed img{width:23%; margin:5px; min-width:80px;}

/* cv*/
.evideo{width:30%; margin:1%; min-width:320px;}
.game {
 max-width:800px;  box-shadow: 0 3px 10px #000; margin:auto;  margin-top: 50px; margin-bottom: 50px; padding: 20px; padding-top: 10px;  border-radius: 10px; position: relative; background-color:#fff;}
iframe {
  width: 100%; border:0;}




@media only screen and (min-width:700px) {
.pfitem img{display:block; width:100%; height:100%; -webkit-transition: 0.5s ease; -moz-transition: 0.5s ease; -ms-transition: 0.5s ease; -o-transition: 0.5s ease; transition: 0.5s ease; }
#foutmeldingjava { height: 30px; z-index: 99; padding: 20px; }
.pfitemvideo, .pfitem {width:31%;}
.laatste {display:none;}
.popu{margin-top:-30px;}
}
@media only screen and (min-width:900px) {
.content{ width:90%; max-width:1400px;}
.pfitemvideo, .pfitem {width:23%;}
.laatste {display:block;}
.nomobshow{display:block;}
}

@media only screen and  (max-height:800px) {
    
.content{ width:90%; max-width:2400px;}
.header {position:relative;}
.pfitemvideo, .pfitem {width:11%;}
    #illustraties {padding-top:0;}
}