.letter {
    position: relative;
    max-width: 60%;
    margin: 0 auto;
}

.letter-svg {
    margin: 0 auto;
    display: block;
}

.letter-svg-3 path {
    stroke: #FFCD00;
    fill-opacity: 1;
    stroke-width: 1;
}

.letter-svg-4 path {
    stroke: #000;
    fill: #FFCD00;
    fill-opacity: 1;
    stroke-width: 1;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    -moz-animation: DASH3 10s linear 0s backwards;
    -webkit-animation: DASH3 10s linear 0s backwards;
    animation: DASH3 10s linear 0s backwards;
    animation-iteration-count: infinite;
    /*animation-direction: alternate-reverse;*/
}



@keyframes DASH3 {
    0% {
        stroke-dashoffset: 600;
    }


    100% {
        stroke-dashoffset: 0;
    }
}

@-webkit-keyframes DASH3 {
    0% {
        stroke-dashoffset: 600;
    }


    100% {
        stroke-dashoffset: 0;
    }
}

@-webkit-keyframes DASH3 {
    0% {
        stroke-dashoffset: 600;
    }



    100% {
        stroke-dashoffset: 0;
    }
}