/* my name in title svg */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:800);

.text {
  fill: none;
  stroke-width: 3.5;
  stroke-linejoin: round;
  stroke-dasharray: 100 400;
  stroke-dashoffset: 0;
  -webkit-animation: stroke 10s infinite linear;
  animation: stroke 10s infinite linear;
}

.text:nth-child(5n+1) {
  stroke: #2A7B9B;
  -webkit-animation-delay: -2s;
  animation-delay: -2s;
}

.text:nth-child(5n+2) {
  stroke: #57C785;
  -webkit-animation-delay: -4s;
  animation-delay: -4s;
}

.text:nth-child(5n+3) {
  stroke: #EDDD53;
  -webkit-animation-delay: -6s;
  animation-delay: -6s;
}

.text:nth-child(5n+4) {
  stroke: #56D9CD;
  -webkit-animation-delay: -8s;
  animation-delay: -8s;
}

.text:nth-child(5n+5) {
  stroke: #3AA1BF;
  -webkit-animation-delay: -10s;
  animation-delay: -10s;
}

@-webkit-keyframes stroke {
  100% {
    stroke-dashoffset: -500;
  }
}

@keyframes stroke {
  100% {
    stroke-dashoffset: -500;
  }
}



.title-card__myname-in-big-screen {
  margin-bottom: -30px;
  margin-top: 30px;
  font: 5em/1 Open Sans, Impact;
  text-transform: uppercase;
}

.title-card__myname-in-small-screen {
  display: none;
  font-size: 80px;
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-weight: 200;
  margin-right: 40px;
  margin-left: 40px;
  margin-top: 0;
  margin-bottom: 0;
  box-shadow: 15px 40px 0px #306c97;
}