.logoanimwrapper {
    margin: 100px auto; 
  width: 220px;
}


#logo-defs {
	position: absolute; 
}
#logo-svg {
  display: block;
  fill: #ffffff;
  stroke: #ffffff;
  stroke-width: 1.7;
  stroke-miterlimit: 5;
  stroke-linejoin: round;
  width: 100%;
}
#logo-svg-ie {
	display: none;
}
#logo-png-ie {
	display: none;
}

.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: 1.8s, 2s, 1s;
	stroke-dashArray: 2500;
	stroke-dashoffset: 2500;
}

#draw-carla.animate-draw {
	animation-delay: 0s, .4s, .4s;
}
#draw-cristina.animate-draw {
	opacity: .5;
	stroke-width: 1.5;
	stroke-opacity: .8;
	animation-delay: 0.5s, .8s, .8s;
}
#draw-soares.animate-draw {	
	animation-duration: 2.2s, 2s, 1.2s;
	animation-delay: 0.8s, 1.4s, 1.4s;
}


@keyframes DrawLine {
	to { stroke-dashOffset: 0; }
} 
@keyframes FadeStroke {
	to { stroke-opacity: 0; }
}
@keyframes FillIn {
	0% { fill-opacity: 0; }
	100% { fill-opacity: 1; }
}



/* IE CSS */
/* Because IE Sucks. */

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+ CSS */
	/* because they don't like the conditional IE comments in the HTML anymore */
	#logo-svg {
		display: none;
	}
	#logo-svg-ie {
		display: block;
	}
}

.animate-line-ie {
	opacity: 0;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
	animation-iteration: 1;
	fill: transparent;
	stroke: #ffffff;
	stroke-width: 1.7;
	stroke-miterlimit: 5;
	stroke-linejoin: round;
	animation-name: FadeTo100andback;
	animation-duration: 3s;/* 1s x3 for the fadeout */
}
#draw-carla-ie.animate-line-ie {
	animation-delay: 0s;
}
#draw-cristina-ie.animate-line-ie {
	stroke-width: 1.5;
	animation-name: FadeTo50andback;
	animation-delay: .6s;
}
#draw-soares-ie.animate-line-ie {	
	animation-delay: 1.2s;
}

.animate-fade-ie {
	opacity: 0;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
	animation-iteration: 1;
	fill: #ffffff;
	stroke: #ffffff;
	stroke-width: 1.7;
	stroke-miterlimit: 5;
	stroke-linejoin: round;
	animation-name: FadeTo100;
	animation-duration: .8s;
}
#draw-carla-ie.animate-fade-ie {
	animation-delay: .3s;
}
#draw-cristina-ie.animate-fade-ie {
	animation-name: FadeTo50;	
	animation-delay: .9s;
}
#draw-soares-ie.animate-fade-ie {	
	animation-delay: 1.5s;
}

@keyframes FadeTo100andback {
	  0% { opacity: 0; }
	 25% { opacity: 1; }
	100% { opacity: 0; }
}
@keyframes FadeTo50andback {
	  0% { opacity: 0; }
	 25% { opacity: .5; }
	100% { opacity: 0; }
}
@keyframes FadeTo100 {
	to { opacity: 1; }
}
@keyframes FadeTo50 {
	to { opacity: .5; }
}