@import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght@1,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gentium+Basic&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Asap+Condensed&display=swap');
@media (max-width: 575.98px) {
.me{max-width:350px;padding-top: 100px;}
.hoofd {margin-bottom: 30px;}

#capje {
display: block;
   margin:50px;
   width:200px; 
}
 .minititulo {
    margin-bottom: 70px;
   
   font-size:3em;}
 .three-d {
  perspective: 200px;
  
   width:200px;

}

.hooom {
  margin-bottom: 0px;
  margin-left: 200px;
  padding:10px;
  height: 35px; 
}
.knoppie{ width: 200px;}
.uitlegc{padding:10px;}
}


@media (max-width: 767.99px) {
.me{
  max-width:400px;
  padding-top: 60px;
}
.three-d {
  perspective: 200px;
  
    width:200px;
   
}
.uitlegc{padding:25px}
}

@media (min-width: 768.00px) {
#capje { 
  margin: 50px; 
width: 180px;}
.minititulo {
    margin-top: 70px;
   margin-right: 150px;
   font-size:2em;
}
.three-d {
  perspective: 200px;
  
    width:200px;
   
}
.me{
  max-width:450px;
  padding-top: 30px;}
.hooom {
 
  padding:10px;
  height: 35px; 
}
.knoppie{ width: 300px;}
.uitlegc{padding:30px;}
}

@media (min-width: 1199.98px) { 
.me{
  max-width:450px;
  padding-top: 80px;}
#capje { 
  margin: 50px; 
width: 250px;}
.minititulo {
    margin-top: 70px;
   margin-right: 150px;
   font-size:3em;
  
}
.hooom {
  
  margin-left: 200px;
  padding:10px;

  height: 35px; 
}.knoppie{ width: 300px;}

.uitlegc{
  padding: 40px;}
}

/* Style the counter cards */


/* menu 3d->*/
ul.block-menu {
	    list-style-type: none;
}
.block-menu li a {
  
  text-decoration: none;
  
}
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}
.three-d {
 
  transition: all .07s linear;
  position: relative;
  cursor: pointer;
  
    margin-left: 0px;
   
}
  /* complete the animation! */
  .three-d:hover .three-d-box, 
  .three-d:focus .three-d-box {
    transform: translateZ(-25px) rotateX(90deg);
  }

.three-d-box {
  transition: all .3s ease-out;
  transform: translatez(-25px);
  transform-style: preserve-3d;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
 
  
}
.front {
  transform: rotatex(0deg) translatez(25px);
}

.back {
  transform: rotatex(-90deg) translatez(25px);
  color: #ffe7c4;
}

.front, .back {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background:#67afb3cc;
  padding: 15px 10px;
  color: white;
  pointer-events: none;
  box-sizing: border-box;
 border-style: solid;
  border-width: 0.5px;
 -webkit-box-shadow: -32px -32px 5px 0px rgba(0,0,0,0.25);
-moz-box-shadow: -32px -32px 5px 0px rgba(0,0,0,0.25);
box-shadow: -32px -32px 5px 0px rgba(0,0,0,0.25);
}

  /*put the "front" and "back" elements into place with CSS transforms, 
  specifically translation and translatez*/



.puf {
  transition: --num 0.25s;
  counter-set: num var(--num);
  font: 800 40px system-ui;
  padding: 2rem;
}
.puf::after {
  content: counter(num, lower-alpha);
}
.puf:hover {
  --num: #{25 * 26 * 26 + 5 * 26 + 19};
}
/* card en cardtext */

.me{
font-family: 'Gentium Basic', serif;
line-height: 125%;
border-radius: 2px;
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);

padding-left: 30px;

}

 .me:hover{
  box-shadow: 0 14px 28px rgba(0,0,0,0.30), 0 10px 10px rgba(0,0,0,0.30);


 }

.mooor {

  position: relative;
  padding:10px;
   color:#67afb3; 
   float:right;
   bottom: 10px;
   padding-top:75px;
   height:20px;
 text-decoration: none;

}
a:hover {color:#bfbfbf;}
.minititulo{

max-width: 60%;
text-align: right;
 font-family: 'Gentium Basic', serif;
 margin-bottom: 85px;

}
.hoofd {
margin-left:20px;
width: 100%;

}

.hooom {
 float:right;
  margin-right: 30px;
  border-style: ridge;
  color:#67afb3;
  }
   .cardtext {
  display: block;
  padding-top: 25%;
padding-left: 10px;
max-width: 250px;
padding-bottom: 10%;
 }
 .cardtext:hover {
  font-size: 101%;
}
.uitleg{
  min-height: 1000px;
  font-family: 'Gentium Basic', serif;
  font-size: large;
  line-height: 125%;
  border-radius: 2px;
   margin: 25px auto;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.memu{
  text-decoration: none;
  list-style: none;
}
.title {  
  color:grey;

}

.opac{ opacity: 0.3;}
.knoppie {
   -webkit-border-radius: 13px;
   -moz-border-radius: 13px;
   border-radius: 13px;
   height: 20px;
   line-height: 20px;
   color: #FFFFFF;
   font-family: 'Asap Condensed', sans-serif;
  
   font-size: 20px;
   font-weight: 50;
   padding: 5px;
   background-color: #67AFB3;
   -webkit-box-shadow: 1px 1px 20px 0 #000000;
   -moz-box-shadow: 1px 1px 20px 0 #000000;
   box-shadow: 1px 1px 20px 0 #000000;
   text-shadow: 1px 1px 20px #000000;
   border: inset #ABDCDF 20px;
   text-decoration: none;
   display: inline-block;
   cursor: pointer;
   text-align: center;
}

.knoppie:hover {
   background: #67AFB3;
   border: inset #749D9F 20px;
   -webkit-border-radius: 13px;
   -moz-border-radius: 13px;
   border-radius: 13px;
   text-decoration: none;
}



/* input range botones curriculum*/
input[type=range] {
  height: 10px;
 
  margin: 5px 0;
  padding-left: 10px;
  width: 60%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 3px;
  cursor: pointer;
  animation: 0.2s;
  box-shadow: 0px 0px 1px #000000;
  background: #67AFB3;
  border-radius: 2px;
  border: 0px solid #000000;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 1px 1px 1px #000000;
  border: 1px solid #000000;
  height: 19px;
  width: 13px;
  border-radius: 12px;
  background: #FFFFFF;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -8.5px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #67AFB3;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 3px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 1px #000000;
  background: #67AFB3;
  border-radius: 2px;
  border: 0px solid #000000;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 1px 1px 1px #000000;
  border: 1px solid #000000;
  height: 19px;
  width: 13px;
  border-radius: 12px;
  background: #FFFFFF;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 3px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #67AFB3;
  border: 0px solid #000000;
  border-radius: 4px;
  box-shadow: 0px 0px 1px #000000;
}
input[type=range]::-ms-fill-upper {
  background: #67AFB3;
  border: 0px solid #000000;
  border-radius: 4px;
  box-shadow: 0px 0px 1px #000000;
}
input[type=range]::-ms-thumb {
  margin-top: 1px;
  box-shadow: 1px 1px 1px #000000;
  border: 1px solid #000000;
  height: 19px;
  width: 13px;
  border-radius: 12px;
  background: #FFFFFF;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #67AFB3;
}
input[type=range]:focus::-ms-fill-upper {
  background: #67AFB3;
}
.procentje{
  color: red;
  font-size: xx-small;
}

#curriculum{

padding: 50px;
margin-top: 25px;
margin:auto;
}
.me2{
 
  height: 1000px;
  font-family: 'Gentium Basic', serif;
  font-size: large;
  line-height: 125%;
  border-radius: 2px;
  display:block;
  padding:25px;
  margin-top:25px;
  position: relative;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  margin-bottom: 75px;
}
.theicon{
	height: 175px;width:175px;
	 background-repeat: no-repeat;
	 transform: scale(1.7); /* Igual que: scaleX(0.7) scaleY(0.7) */
	   transform: rotate(-90deg);
background-image:  url("scribble.png");}

.onder{
position: absolute;
display:block;
margin-bottom: 75px;
}
.soc {
padding:10px;

 color:#67afb3;
}
.contact{max-width: 400px;
margin: auto;

}
.final{margin-bottom: 100px;}
/* footer*/
.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color:#cdbeb2d6;
  color: white;
  text-align: center;
  font-family: 'Asap Condensed', sans-serif;
  margin-top: 100px;
}
.mini{ font-family: 'Gentium Basic', serif;font-size: xx-small;}
.minimargen{
	margin-bottom:35px;
}