html,body{
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  font-family:Arial;
  color:#555;
}
body{
  overflow:auto;
  background-color:#2e9dd4;
  min-height:320px;
  min-width:320px;
  position:relative;
}
div.clear{
clear:both;
}
.right{
  float:right
}
div#body{
  width:100%;
  height:100%;
  overflow:auto;
}
div#wrapper{
  width:360px;
  height:360px;
  margin:-180px auto;
  position:relative;
  top:50%;
  box-sizing:border-box;
}
div.circle{
  width:360px;
  height:360px;
  position:absolute;
  border-radius:180px;
  background-color:white;
  z-index:-1;
}
div.flags{
  position:absolute;
  top:25px;
  text-align:center;
  width:100%;
  color:inherit;
  cursor:default;
}
div.flags img{
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}
div.flags img:hover,
div.flags a.active>img{
  -webkit-filter:none; 
  filter:none;
}
div.flags a{
  display:inline-block;
  margin:0 3px;
  padding:0;
  border:0;
  color:inherit;
  text-decoration:none;
}
div.flags a:hover{
  text-decoration:none;
  border:0;
}
div.flags a>img{
  height:18px;
  width:auto;
}
div.info{
  padding-top:110px;
  text-align:center;
}
h1.name{
  font-weight:bold;
  display:block;
  margin:0;
  font-size:2em;
}
p.email{
  margin:0 0 10px;
}
div.subtitle{
  margin:0 0 30px;
  color:#AAA;
  font-size:1.4em;
}
a{
  text-decoration:none;
  color:#0e8fce;
  display:block;
  margin-bottom:10px;
}
a:hover{
  text-decoration:underline;
}
div.info a{
  size:20px;
  display:block;
}
img.logo{
  width:auto;
  max-width:100%;
  max-height:100%;
  margin:0 auto;
  display:block;
}
span.close{
  position:absolute;
  top:0px;
  right:0px;
  size:20px;
  display:block;
  padding:10px;
  color:#AAA;
  width:15px;
  height:15px;
  cursor:pointer;
  font-weight:bold;
}
span.close:hover{
  color:#777;
}
h2{
  margin:0 0 20px;
}
ul{
  padding-left:20px;
  margin:0;
}
ul>li{
 margin-bottom:5px;
}
span.soft{
  color:#aaa;
  font-style:italic;
}
div.col{
  display:block;
  float:left;
}
div.col-6{
width:64%;
padding:1%;
}
div.col-3{
  width:31%;
  padding:1%;
}
span.BTW,
span.kvk{
  text-align:center;
  width:100%;
  display:block;
  font-size:0.8em;
  color:#777;
  position:absolute;
  bottom:15px;
  font-style:italic;
}
span.BTW{
  bottom:30px;
}
div#dimmer{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color:rgba(0,0,0,0.3);
  opacity:0;
  display:none;
}
div#dimmer.reveal{
  opacity:1;
  display:block;
  animation: fadeInFromNone 0.3s ease-out;
}
.skills{
  margin:30px 0 5px;;
  font-size:12px;
  color:#AAA;
  font-style:italic;
}
.btn{
  background-color:#999;
  border:1px solid #777;
  border-radius:5px;
  padding:5px 10px;
  line-height:18px;
  color:white;
}
@keyframes fadeInFromNone{
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
  }
  100% {
    display: block;
    opacity: 1;
  }
}
div#modal{
  background-color:white;
  width:60%;
  height:50%;
  left:20%;
  position:absolute;
  top:-100%;
  border-radius:15px;
  padding:15px;;
  overflow:hidden;;
  box-sizing:border-box;
  background-color:#eee;
}
div#modal.open{
  top:10%;
  animation: openModal 2.1s linear;
  max-height:80%;
  width:80%;
  height:80%;
  left:10%;
}
div.modal-body{
  opacity:0;
  border-top:1px solid #ddd;
  border-bottom:1px solid #ddd;
  display:block;
  overflow:auto;
  position:absolute;
  top:150px;
  left:0;
  right:0;
  bottom:50px;
  padding:5px 15px;
  box-sizing:border-box;
  background-color:white;
}
div#modal.open>div.modal-body{
  opacity:1;
  animation: modalBody 2.1s linear;
}
div.modal-header{
  position:absolute;
  top:0;
  left:0;
  right:0;
  padding:15px;
  height:256px;
}
div.modal-footer{
  position:absolute;
  height:50px;
  bottom:0;
  left:0;
  right:0;
  padding:10px 15px;
  overflow:hidden;
  box-sizing:border-box;
  opacity:0;
}
div#modal.open>div.modal-footer{
  opacity:1;
  animation: modalFooter 2.1s ease-in-out;
}
div#modal.open>div.modal-header{
  animation: modalHeader 2.1s ease-in-out;
  height:120px;
}
@keyframes openModal{
  0%{
    top:-50%;
    width:20%;
    left:40%;
    height:50%;
  }
  14%{
    top:-50%;
    width:20%;
    left:40%;
  }
  29%{
    top:10%;
    left:10%;
    width:80%;
  }
  71%{
    height:50%;
  }
  85%{
    height:80%;
  }
}
@keyframes modalBody{
  0%{
    display:none;
    opacity:0;
    top:230px;
  }
  71%{
    display:block;
    opacity:0;
    top:230px;
  }
  85%{
    opacity:1;
    top:150px;
  }
}
@keyframes modalHeader{
  0%{
    height:200px;
  }
  48%{
    height:200px;
  }
  57%{
    height:300px;
  }
  66%{
    height:200px;
  }
  71%{
    height:200px;
  }
  85%{
    height:120px;
  }
}
@keyframes modalFooter{
  0%{
    opacity:0;
    display:none;
  }
  85%{
    display:block;
    opacity:0;
  }
  100%{
    opacity:1;
  }
}



@media (max-width: 800px) {
  div.col-3,
  div.col-6{
    box-sizing:border-box;
    width:100%;
  }
  div#wrapper{
    width:300px;
    height:300px;
    margin:-150px auto;
  }
  div.info{
    padding-top:90px;
  }
  div.circle{
    width:300px;
    height:300px;
    border-radius:150px;
  }
  div#modal{
    border-radius:10px;
    padding:0;
  }
  div#modal.open{
    top:3%;
    max-height:94%;
    width:94%;
    height:94%;
    left:3%;
  }
  div.modal-header{
    height:155px;
    padding:5px 10px;
  }
  span.close{
    padding:5px 10px;
  }
  div.modal-body{
    bottom:40px;
    top:110px;
    padding:5px 10px;
  }
  div.modal-footer{
    height:40px;
    padding:5px 10px;
  }
  div#modal.open>div.modal-header{
    animation: modalHeader 2.1s ease-in-out;
    height:100px;
  }
  @keyframes openModal{
    0%{
      top:-50%;
      width:20%;
      left:40%;
      height:50%;
    }
    14%{
      top:-50%;
      width:20%;
      left:40%;
    }
    29%{
      top:3%;
      left:3%;
      width:94%;
    }
    71%{
      height:50%;
    }
    85%{
      height:94%;
    }
  }
  @keyframes modalBody{
    0%{
      display:none;
      opacity:0;
      top:130px;
    }
    71%{
      display:block;
      opacity:0;
      top:130px;
    }
    85%{
      opacity:1;
      top:110px;
    }
  }
  @keyframes modalHeader{
    0%{
      height:120px;
    }
    48%{
      height:120px;
    }
    57%{
      height:175px;
    }
    66%{
      height:120px;
    }
    71%{
      height:120px;
    }
    85%{
      height:100px;
    }
  }
}