#cerchio {
  stroke: #000000;
  fill: #000000;
  fill-opacity: 0;
  stroke-dasharray: 6050;
  stroke-dashoffset: 6050;
  animation: bordo 0.5s linear 0.5 forwards,  sfondo 0.5s linear 0.5s forwards;
}

#lettera-d {
  fill: #CDCBC6;
  fill-opacity: 0;
  stroke: #CDCBC6;
  stroke-dasharray: 1569.2;
  stroke-dashoffset: 1569.2;
  animation: bordo 1s linear 1s forwards, sfondo 1s linear 2s forwards;
}

#lettera-p {
  fill: #838282;
  fill-opacity: 0;
  stroke: #838282;
  stroke-dasharray: 1569.2;
  stroke-dashoffset: 1569.2;
  animation: bordo 1s linear 1s forwards, sfondo 1s linear 2s forwards;
}

#bg-lettera-p, #bg-lettera-d {
	fill: #3A3837;
  fill-opacity: 0;
   animation: sfondo 1s linear 2s forwards;
}

#lettera-t, #lettera-m  {
	fill: #000000;
	 fill-opacity: 0;
   animation: sfondo 1s linear 2s forwards;
}

@keyframes bordo {
  to { stroke-dashoffset: 0; }
}

@keyframes sfondo {
  from { fill-opacity: 0; }
  to { fill-opacity: 1; }
}

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  /* change if the mask should have another color then white */
  z-index: 9999;
  /* makes sure it stays on top */
  background-image:url('../images/paul_bg.jpg');
  background-position:center bottom;
  background-repeat:no-repeat;
  background-size:50% auto;
}

#status {
  width: 350px;
  height: 350px;
  position: absolute;
  left: 50%;
  /* centers the loading animation horizontally one the screen */
  top: 50%;
  /* centers the loading animation vertically one the screen */
  /* path to your loading animation */
  margin: -175px 0 0 -175px;
  /* is width and height divided by two */
}
body {
  overflow: hidden;
}