/*animation logo dans 404*/
.fuego {
    width: 130px ;
    height: 150px !;
    display: block;
    margin: auto;
}
.st0 { fill: #e83337; fill-opacity: .99; }
.st1 { fill: #991e2f; }
.st2 { fill: #f49019; fill-opacity: 1; }
.st3 { fill: #efdc00; }
.st4 { fill: #ed392e; fill-opacity: .84; }
.st5 { fill: #301e0f; }
.st6 { fill: #502e11; }

.feu {
    transform-box: fill-box;
    transform-origin: center bottom;
}

.feu:nth-child(3n+1) { animation: vivre  0.3s ease-in-out infinite alternate; animation-delay: 0s; }
.feu:nth-child(3n+2) { animation: vivre2 1s   ease-in-out infinite alternate; animation-delay: 0.4s; }
.feu:nth-child(3n)   { animation: vivre3 1s   ease-in-out infinite alternate; animation-delay: 0.2s; }

@keyframes vivre {
    0%   { transform: scale(1)    rotate(-3deg) skewX(-4deg); }
    50%  { transform: scale(1.2)  rotate(3deg)  skewX(4deg);  }
    100% { transform: scale(1.1)  rotate(-2deg) skewX(-3deg); }
}

@keyframes vivre2 {
    0%   { transform: scale(1.1)  rotate(4deg)  skewX(3deg);  }
    50%  { transform: scale(0.95) rotate(-3deg) skewX(-4deg); }
    100% { transform: scale(1.15) rotate(2deg)  skewX(3deg);  }
}

@keyframes vivre3 {
    0%   { transform: scale(1.05) rotate(-2deg) skewX(3deg);  }
    50%  { transform: scale(1.2)  rotate(4deg)  skewX(-3deg); }
    100% { transform: scale(1)    rotate(-3deg) skewX(4deg);  }
}


/*animation logo header et footer*/

.st0 { fill: #e83337; fill-opacity: .99; }
.st1 { fill: #991e2f; }
.st2 { fill: #f49019; fill-opacity: 1; }
.st3 { fill: #efdc00; }
.st4 { fill: #ed392e; fill-opacity: .84; }
.st5 { fill: #301e0f; }
.st6 { fill: #502e11; }

#flamme path {
    transform-box: fill-box;
    transform-origin: center bottom;
}

#flamme path:nth-child(3n+1) { animation: vivre  0.3s ease-in-out infinite alternate; animation-delay: 0s; }
#flamme path:nth-child(3n+2) { animation: vivre2 1s   ease-in-out infinite alternate; animation-delay: 0.4s; }
#flamme path:nth-child(3n)   { animation: vivre3 1s   ease-in-out infinite alternate; animation-delay: 0.2s; }

@keyframes vivre {
    0%   { transform: scale(1)    rotate(-3deg) skewX(-4deg); }
    50%  { transform: scale(1.2)  rotate(3deg)  skewX(4deg);  }
    100% { transform: scale(1.1)  rotate(-2deg) skewX(-3deg); }
}

@keyframes vivre2 {
    0%   { transform: scale(1.1)  rotate(4deg)  skewX(3deg);  }
    50%  { transform: scale(0.95) rotate(-3deg) skewX(-4deg); }
    100% { transform: scale(1.15) rotate(2deg)  skewX(3deg);  }
}

@keyframes vivre3 {
    0%   { transform: scale(1.05) rotate(-2deg) skewX(3deg);  }
    50%  { transform: scale(1.2)  rotate(4deg)  skewX(-3deg); }
    100% { transform: scale(1)    rotate(-3deg) skewX(4deg);  }
}