.start_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.animetion {
    fill: none;
    stroke-dasharray: 3000;
    stroke-dashoffset: 3000;
    animation: DASH 3s ease-in 1s forwards;
    -webkit-animation: DASH 3s ease-in 1s forwards;
}
.email {
  position: absolute;
  top: 60%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

@keyframes DASH {
    0% {
        stroke-dashoffset: 3000;
        fill: rgba(0, 0, 0, 0);
    }
    50% {
        stroke-dashoffset: 2000;
        fill: rgba(0, 0, 0, 0.6);
    }
    70% {
        stroke-dashoffset: 1000;
        fill: rgba(0, 0, 0, 0.8);
    }
    100% {
        stroke-dashoffset: 0;
        fill: rgba(0, 0, 0, 1);
    }
}

@-webkit-keyframes DASH {
    0% {
        stroke-dashoffset: 3000;
        fill: rgba(0, 0, 0, 0);
    }
    50% {
        stroke-dashoffset: 2000;
        fill: rgba(0, 0, 0, 0.6);
    }
    70% {
        stroke-dashoffset: 1000;
        fill: rgba(0, 0, 0, 0.8);
    }
    100% {
        stroke-dashoffset: 0;
        fill: rgba(0, 0, 0, 1);
    }
}