body {
  margin: 0px;
}

@keyframes example {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes reveal {
  100% {
    transform: translate(0,0);
  }
}


div.center {
  display: flex;
  height: 100vh;
  margin: 0px;
  padding: 0px;
  flex-direction: row;
  justify-content: center;  /* Centering y-axis */
  align-items :center; /* Centering x-axis */
}



@keyframes links {

  100% {
    transform: translate(0,0);
    opacity: 1;
  }
}


div.links {
  height: 20vw;
  transform: translate(50%, 0px);
  opacity: 0;
  margin: 0px;
  padding: 0px;
  border-right: 2px solid DarkSlateGray;
  animation: links 0.5s cubic-bezier(0.77, 0, 0.175, 1) 0s forwards;
  z-index: 2;
}

div.logo {
  height: 100%;
  width: 100%;
  padding: 0px;
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
   
}

img.logo {
  transform: translate(100%,0);
  object-fit: contain;
  object-position: 100% 505;
  padding: 10px;
  padding-right: 20px;
  animation: reveal 0.5s cubic-bezier(0.77, 0, 0.175, 1) 0.6s forwards;
}

div.tekst {
  overflow: hidden;
  height: 100%;
  padding: 0px;
}

div.rechts {
  height: 20vw;
  margin: 0px;
  padding: 0px;
  #border: 2px solid red;
  z-index: 1;
}

img.tekst {
  transform: translate(-100%,0);
  object-fit: contain;
  padding-left: 20px;
  height: 100%;
  animation: reveal 0.5s cubic-bezier(0.77, 0, 0.175, 1) 1s forwards;
}