.css-typing p {
  white-space: nowrap;
  overflow: hidden;
}
.css-typing .name {
  width: 7.3em;
  opacity: 0;
  -webkit-animation: type1 0.3s steps(20, end), blink 0.8s step-end infinite alternate;
  animation: type1 0.3s steps(20, end), blink 0.8s step-end infinite alternate;
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.css-typing .email {
  width: 14.3em;
  opacity: 0;
  -webkit-animation: type2 0.6s steps(20, end), blink .5s step-end infinite alternate;
  animation: type2 0.6s steps(20, end), blink .5s step-end infinite alternate;
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.css-typing .cmpny {
  width: 7.3em;
  opacity: 0;
  -webkit-animation: type3 0.2s steps(20, end), blink .5s step-end infinite alternate;
  animation: type3 0.2s steps(20, end), blink .5s step-end infinite alternate;
  -webkit-animation-delay: 1.6s;
  animation-delay: 1.6s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.css-typing .host {
  width: 7.3em;
  opacity: 0;
  -webkit-animation: type4 0.3s steps(20, end), blink .5s step-end infinite alternate;
  animation: type4 0.3s steps(20, end), blink .5s step-end infinite alternate;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
@keyframes type1 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes type1 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes type2 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes type2 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes type3 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes type3 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes type4 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes type4 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
}
@-webkit-keyframes blink {
  50% {
    border-color: tranparent;
	}
}




/*document sign effects*/