.ciG
{
  width: 20%; 
  left: 30%; top: 30%;
  transform: rotate3d(0,1,0,90deg);
  animation: 4s aiG;
  animation-delay: 0s;
  animation-fill-mode: forwards;
}
@keyframes aiG
{
  0%{width: 20%; left: 30%; top: 30%; transform: rotate3d(0,1,0,90deg);}
  25%{width: 20%; left: 30%; top: 30%; transform: rotate3d(0,1,0,0deg);}
  50%{width: 20%; left: 25.7%; top: 30%; transform: rotate3d(0,1,0,0deg);}
 /* 75%{width: 20%; left: 25.7%; top: 30%; transform: rotate3d(0,1,0,0deg);}*/
  70%{width: 10%; left: 21.6%; top: 20%; transform: rotate3d(0,1,0,0deg);}
  100%{width: 10%; left: 21.6%; top: 20%; transform: rotate3d(0,1,0,0deg);}
}

.ciT
{
  width: 20%; 
  left: 41%; top: 54%;
  transform: rotate3d(0,1,0,90deg);
  animation: 4s aiT;
  animation-delay: 0s;
  animation-fill-mode: forwards;
}
@keyframes aiT
{                   
  0%{width: 20%; left: 41%; top: 54%; transform: rotate3d(0,1,0,90deg);}
  25%{width: 20%; left: 41%; top: 54%; transform: rotate3d(0,1,0,0deg);}
  50%{width: 20%; left: 46%; top: 30.7%; transform: rotate3d(0,1,0,0deg);}
 /* 75%{width: 20%; left: 46%; top: 30.7%; transform: rotate3d(0,1,0,0deg);}*/
  70%{width: 10%; left: 32.5%; top: 20.7%; transform: rotate3d(0,1,0,0deg);}
  100%{width: 10%; left: 32.5%; top: 20.7%; transform: rotate3d(0,1,0,0deg);}
}

.cie
{
  opacity: 0;
  width: 5%; 
  left: 45.7%; top: 40.6%;
  animation: 4s aie;
  animation-delay: 0s;
  animation-fill-mode: forwards;
}
@keyframes aie
{
  0%{width: 5%; opacity: 0; left: 45.7%; top: 40.6%;}
  40%{width: 5%; opacity: 0; left: 45.7%; top: 40.6%;}
 /*  50%{width: 5%; opacity: 1; left: 45.7%; top: 40.6%;}*/
  50%{width: 5%; opacity: 1; left: 45.7%; top: 40.6%;}
  75%{width: 2.5%; opacity: 1; left: 32%; top: 27%;}
  100%{width: 2.5%; opacity: 1; left: 32%; top: 27%;}
}

.ciee
{
  opacity: 0;
  width: 5%; 
  left: 57.5%; top: 33%;
  animation: 4s aiee;
  animation-delay: 0s;
  animation-fill-mode: forwards;
}
@keyframes aiee
{                   
 0%{width: 5%; opacity: 0; left: 57.5%; top: 33%;}
  40%{width: 5%; opacity: 0; left: 57.5%; top: 33%;}
  50%{width: 5%; opacity: 1; left: 57.5%; top: 33%;}
  75%{width: 5%; opacity: 1; left: 57.5%; top: 33%;}
  75%{width: 2.5%; opacity: 1; left: 38.5%; top: 23%;}
  100%{width: 2.5%; opacity: 1; left: 38.5%; top: 23%;}
}

.ciGestio
{
  opacity: 0;
  animation: 1s aiGestio;
  animation-delay: 3s;
  animation-fill-mode: forwards;
}
@keyframes aiGestio
{
  0%{opacity: 0}
  100%{opacity: 1}
}

.ciFons
{
  height: 0;
  animation: 1s aiFons;
  animation-delay: 5s;
  animation-fill-mode: forwards;
}
@keyframes aiFons
{
  0%{height: 0%}
  100%{height: 100%}
}