#animationContainer{
  width: 30em;
  height: 47em;
  margin-right: auto;
  display: block;
  position: relative;
  float: left;
  margin-top: 2em;
  margin-left: 7em;
}
#maiFlat {
  max-width: 80%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /*margin: auto;*/
  opacity: 0;
  animation-name: show;
  animation-delay: 10s;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-timing-function: linear;
}

svg{
  max-width: 80%;
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0;
  right: 0.5px;
  bottom: 0;
  /*margin: auto;*/
}
/*#H{
  stroke-dasharray: 285;
  opacity: 1;
  animation: animateH 4s cubic-bezier(.1,.95,.91,.06);
}*/
#middle{
  stroke-dasharray: 206;
  opacity: 1;
  animation: animateHmiddle 3s cubic-bezier(0,0,.58,1);
}
#left{
  stroke-dasharray: 285;
  opacity: 1;
  animation: animateHleft 2s cubic-bezier(.1,.95,.65,.34);
}
#right{
  stroke-dasharray: 285;
  opacity: 1;
  animation: animateHright 4s cubic-bezier(0,0,.25,1);
}
#Catoutline{
  stroke-dasharray: 410;
  opacity: 1;
  animation: animateCat 4s cubic-bezier(.17,.67,.83,.67);
}
#EyeLeft, #EyeRight{
  stroke-dasharray: 74;
  opacity: 1;
  animation: animateEyes 6s cubic-bezier(.17,.67,.83,.67);
}
#PupilleLeft, #PupilleRight{
  stroke-dasharray: 47;
  opacity: 1;
  animation: animatePupille 6s cubic-bezier(.42,0,.58,1);
}
#Nose, #Mouth{
  stroke-dasharray: 23;
  opacity: 1;
  animation: animateNoseMouth 6s cubic-bezier(.42,0,.58,1);
}

#Graphiste{
  stroke-dasharray: 83;
  opacity: 1;
  animation: animateGraphiste 10s cubic-bezier(.42,0,1,1);
}
#Multimédia{
  stroke-dasharray: 110;
  opacity: 1;
  animation: animateMultimedia 10s cubic-bezier(.42,0,1,1);
}

/*#MAI{
  stroke-dasharray: 515;
  opacity: 1;
  animation: animateMai 4s cubic-bezier(.17,.67,.83,.67);
}*/
#ponytail{
  stroke-dasharray: 404;
  opacity: 1;
  animation: animatePonytail 7s cubic-bezier(0,0,.98,1);
}

#hairback{
  stroke-dasharray: 492;
  opacity: 1;
  animation: animateHairback 4.5s cubic-bezier(.42,0,.58,1);
}

#head{
  stroke-dasharray: 358;
  opacity: 1;
  animation: animateHead 3s cubic-bezier(0,0,1,1);
}

#ear{
  stroke-dasharray: 80;
  opacity: 1;
  animation: animateEar 4s cubic-bezier(.17,.67,.83,.67);
}
#fringe{
  stroke-dasharray: 516;
  opacity: 1;
  animation: animateFringe 7.5s cubic-bezier(.34,.04,.7,1);
}

#smile{
  stroke-dasharray: 42;
  opacity: 1;
  animation: animateSmile 7.5s cubic-bezier(0,0,1,1);
}

#NAME{
  stroke-width : 0.5;
  stroke-dasharray: 188;
  opacity: 1;
  animation: animateName 10s cubic-bezier(.42,0,.58,1);
}

circle{
  stroke-dasharray: 200;
  opacity: 1;
  animation: animateCircles 7s cubic-bezier(0,.01,.66,.01);
}

#M3, #A3, #I3{
  stroke-dasharray: 235;
  opacity: 1;
  animation: animateMaiTEXT 7s cubic-bezier(0,.01,.66,.01);
}

@keyframes animateCat{
  0%{
    opacity: 0;
    stroke-dashoffset: 410;
  }
  30%{
    opacity: 1;
    stroke-dashoffset: 410;
  }
}
@keyframes animateNoseMouth{
  0%{
    opacity: 0;
    stroke-dashoffset: 23;
  }
  70%{
    opacity: 1;
    stroke-dashoffset: 23;
  }
}
@keyframes animatePupille{
  0%{
    opacity: 0;
    stroke-dashoffset: 47;
  }
  70%{
    opacity: 1;
    stroke-dashoffset: 47;
  }
}
@keyframes animateEyes{
  0%{
    opacity: 0;
    stroke-dashoffset: 74;
  }
  70%{
    opacity: 1;
    stroke-dashoffset: 74;
  }
}
@keyframes animateGraphiste{
  0%{
    opacity: 0;
    stroke-dashoffset: 83;
  }
  75%{
    opacity: 1;
    stroke-dashoffset: 83;
  }
}
@keyframes animateMultimedia{
  0%{
    opacity: 0;
    stroke-dashoffset: 110;
  }
  75%{
    opacity: 1;
    stroke-dashoffset: 110;
  }
}

@keyframes animatePonytail{
  0%{
    opacity: 0;
    stroke-dashoffset: 404;
  }
  70%{
    opacity: 1;
    stroke-dashoffset: 404;
  }
}
@keyframes animateHairback{
  0%{
    opacity: 0;
    stroke-dashoffset: 492;
  }
  40%{
    opacity: 1;
    stroke-dashoffset: 492;
  }
}
@keyframes animateHead{
  0%{
    opacity: 0;
    stroke-dashoffset: 358;
  }
  20%{
    opacity: 1;
    stroke-dashoffset: 358;
  }
}
@keyframes animateEar{
  0%{
    opacity: 0;
    stroke-dashoffset: 80;
  }
  75%{
    opacity: 1;
    stroke-dashoffset: 80;
  }
}
@keyframes animateFringe{
  0%{
    opacity: 0;
    stroke-dashoffset: 516;
  }
  60%{
    opacity: 1;
    stroke-dashoffset: 516;
  }
}
@keyframes animateSmile{
  0%{
    opacity: 0;
    stroke-dashoffset: 42;
  }
  60%{
    opacity: 1;
    stroke-dashoffset: 42;
  }
}

@keyframes animateHmiddle{
  0%{
    opacity: 0;
    stroke-dashoffset: 206;
  }
  30%{
    opacity: 1;
    stroke-dashoffset: 206;
  }
}
@keyframes animateHleft{
  0%{
    opacity: 0;
    stroke-dashoffset: 285;
  }
  20%{
    opacity: 1;
    stroke-dashoffset: 285;
  }
}
@keyframes animateHright{
  0%{
    opacity: 0;
    stroke-dashoffset: 285;
  }
  30%{
    opacity: 1;
    stroke-dashoffset: 285;
  }
}

@keyframes animateName{
  0%{
    opacity: 0;
    stroke-dashoffset: 188;
  }
  70%{
    opacity: 1;
    stroke-dashoffset: 188;
  }
}

@keyframes animateCircles{
  0%{
    opacity: 0;
    stroke-dashoffset: 200;
  }
  30%{
    opacity: 1;
    stroke-dashoffset: 200;
  }
}

@keyframes animateMaiTEXT{
  0%{
    opacity: 0;
    stroke-dashoffset: 235;
  }
  30%{
    opacity: 1;
    stroke-dashoffset: 235;
  }
}

@keyframes show {
  to {
    opacity: 1;
  }
}