body { display:flex; flex-direction: column; align-items: center; font-family: "Helvetice-Neue", sans-serif; color: #555; overflow: hidden; background: #eee; }

div {
  display: flex;
}

#Logo {
  width: 100%;
  height: 60%;
  display:flex; 
  fill: #aa7f3d;
  fill: url("#MyGradient");
  stroke: #EEBE7B;
  stroke-miterlimit: 3;
  stroke-width: 0.5;
}

.Animate-Draw {
  fill-opacity: 0;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-iteration: 1;
  
  animation-name: DrawLine, FadeStroke, FillIn;
  animation-duration: 4s, 3s, 2s;
  animation-delay: 0s, 2.5s, 3.5s;
}

#Draw-Mark {
  stroke-dashArray: 1100;
  stroke-dashoffset: 1100; 
  stroke: #bbb;
  stroke-width: 0.5;
}

#Draw-Frame { 
  animation-delay: 1s, 3.5s, 3.5s;
  animation-duration: 3.5s, 1s, 1s; 
  stroke-dashArray: 1500;
  stroke-dashoffset: 1500;
  stroke: #bbb;
  stroke-width: 0.5;
}

#Draw-Text { 
  animation-delay: 2s, 3.5s, 3.5s; 
  animation-duration: 2s, 1s, 1s; 
  stroke-dashArray: 300;
  stroke-dashoffset: 300;
  stroke: #bbb;
  //animation-duration: 4s;
  stroke-width: 0.5;
}

.clip-frame {
  clip-path:url(#a);
}

@keyframes DrawLine {
  to { stroke-dashOffset: 0; }
}

@keyframes FadeStroke {
  to { stroke-opacity: 0; }
}

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

div a, div a:visited {
 z-index: 10;
 text-decoration: none;
 color: #555;
}