.profiel .base, 
.profiel-foto img, 
.werkervaring h2, 
.kennis article > h2, 
.skills article > h2, 
.contact article > h2 { animation: fadeInTop 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; }

.base, .grid .card, article > h2 { animation: fadeIn 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; }
/* article > h2 voor portfolio */

footer .base { animation: none; }

.kennis .base.fade2, 
.grid .card.two, 
article > h2.two,
.opleiding article:nth-of-type(2) .base { animation-delay: 0.4s; }

.kennis .base.fade3, 
.grid .card.three, 
article > h2.three,
.opleiding, article:nth-of-type(3) .base { animation-delay: 0.6s; }

.kennis .base.fade4, 
article > h2.four,
.grid .card.four  { animation-delay: 0.8s; }

@keyframes fadeInTop {
  0% { transform: translateY(0); opacity: 0; }
  100% { transform: translateY(1rem); opacity: 1; }  }

@keyframes fadeIn {
  0% { transform: translateY(4rem); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }  }


/*-----------------------------------------------*/
.periode .werkDatum.left, 
.periode.switch 
.werkFunctie.right, 
.fadeLeft { animation: moveLeft 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; }

.periode .werkFunctie.right, 
.periode.switch .werkDatum.left, 
.fadeRight { animation: moveRight 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; }

@keyframes moveLeft {
  0% { transform: translateX(0.9rem); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; } }

@keyframes moveRight {
  0% { transform: translateX(-0.9rem); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }  }


/*-----------------------------------------------*/
.skills .base { animation: slideRight 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; }
.skills .base.one { animation-delay: 0.4s;  }
.skills .base.two { animation-delay: 0.8s;  }

@keyframes slideRight {
  0% { transform: translateX(-2rem); opacity: 0; }
  100% { transform: translateX(0rem); opacity: 1; }  }