#contenedor {
  height: 100vh;
  margin: 0;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
}


{
  box-sizing: border-box;
}

#python-logo {
  max-width: 60vw;
  max-height: 60vh;
 /* padding: 5px;*/
  overflow: visible;
 /* cursor: progress;*/
    
}

#python-logo path {
  position: relative;
  fill: transparent;
  stroke-width: .5px;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;

}


#python-logo path:first-child {
  stroke: #8d1431;
  -webkit-animation: border-move 3s linear forwards, fill-first  1s 1s linear forwards;
          animation: border-move 3s linear forwards, fill-first 1s 1s linear forwards;
}
#python-logo path:nth-child(0n+2) {
  stroke: #b38247;
  -webkit-animation: border-move 2s linear forwards, fill-second 1s 1s linear forwards;
          animation: border-move 2s linear forwards, fill-second 1s 1s linear forwards;
}
#python-logo path:nth-child(0n+3) {
  stroke: #b38247;
  -webkit-animation: border-move 3s linear forwards, fill-third 1s 2s linear forwards;
          animation: border-move 3s linear forwards, fill-third 1s 2s linear forwards;
   
}
/*
#python-logo path:nth-child(0n+4) {
   
    -webkit-animation: border-move2 2s linear forwards, fill-third 1s 2s linear forwards;
    -webkit-animation-delay:2s;
          animation: border-move2 2s linear forwards, fill-fourth 1s 2s linear forwards;
    animation-delay: 2s;
}
#python-logo path:last-child {
 
    
    -webkit-animation: border-move3 2s linear forwards, fill-third 1s 2s linear forwards;
    -webkit-animation-delay:3s;
         animation: border-move3 3s linear forwards, fill-fith 1s 2s linear forwards;
    animation-delay: 3s;
  
}*/




@-webkit-keyframes border-move {

  0% {
    stroke-dasharray: 0 1600;
  }
  100% {
    stroke-dasharray: 1600 1600;
  }
}

@keyframes border-move {

  0% {
    stroke-dasharray: 0 1600;
  }
  100% {
    stroke-dasharray: 1600 1600;
  }
}
/*
@-webkit-keyframes border-move2 {

  0% {
      stroke: #8d1431;
    stroke-dasharray: 0 1600;
  }
  100% {
      stroke: #8d1431;
    stroke-dasharray: 1600 1600;
  }
}

@keyframes border-move2 {

  0% {
      stroke: #F47334;
    stroke-dasharray: 0 1600;
  }
  100% {
      stroke: #F47334;
    stroke-dasharray: 1600 1600;
  }
}

@-webkit-keyframes border-move3 {

  0% {
       stroke: #727376;
    stroke-dasharray: 0 1600;
  }
  100% {
       stroke: #727376;
    stroke-dasharray: 1600 1600;
  }
}

@keyframes border-move3 {

  0% {
       stroke: #727376;
    stroke-dasharray: 0 1600;
  }
  100% {
       stroke: #727376;
    stroke-dasharray: 1600 1600;
  }
}
*/

@-webkit-keyframes fill-first {
  0% {
    fill: transparent;
  }
  100% {
    fill: #8d1431;
  }
}
@keyframes fill-first {
  0% {
    fill: transparent;
  }
  100% {
    fill: #8d1431;
  }
}
@-webkit-keyframes fill-second {
  0% {
    fill: transparent;
  }
  100% {
    fill: #b38247;
  }
}
@keyframes fill-second {
  0% {
    fill: transparent;
  }
  100% {
    fill: #b38247;
  }
}
@-webkit-keyframes fill-third {
  0% {
    fill: transparent;
  }
  100% {
    fill: #b38247;
  }
}
@keyframes fill-third {
  0% {
    fill: transparent;
  }
  100% {
    fill: #b38247;
  }
}
/*
@keyframes fill-fourth {
  0% {
    fill: transparent;
  }
  100% {
    fill: #F47334;
  }
}
@-webkit-keyframes fill-fith {
  0% {
    fill: transparent;
  }
  100% {
    fill: #727376;
  }
}
@keyframes fill-fith {
  0% {
    fill: transparent;
  }
  100% {
    fill: #727376;
  }
}
*/
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  
  100% {
    opacity: 1;
    transform: scale(2);
  }
}

@keyframes fade-in{
  0% {
    opacity: 0;
    transform: scale(0);
  }
  
  100% {
    opacity: 1;
    transform: scale(2);
  }
}