#homeanimframe #circle {
  width: 256px;
  height: 256px;
  background: #29357e;
  background: #172984;
  border-radius: 128px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -128px 0 0 -128px;
  opacity: 0;
  transition: .3s;
}
#homeanimframe #circle.shown {
  opacity: 1;
}
#homeanimframe #circle.slided {
  transition: .7s;
  margin-left: -300px;
}
#homeanimframe #pieces {
  transform-origin: 0% 0%;
  transform: scale(0.5);
  -webkit-transform-origin: 0% 0%;
  -webkit-transform: scale(0.5);
}
#homeanimframe #pieces div {
  opacity: 0;
}
#homeanimframe #circle #pieces div.shown {
  opacity: 1;
  transition: .3s;
}
#homeanimframe #logo {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -128px 0 0 -3px;
  opacity: 0;
  background-size: contain;
  background-repeat: no-repeat;
  width: 333px;
  height: 258px;
  transition: .7s;
}
#homeanimframe #logo.shown {
  opacity: 1;
}