/****** ACCIO ******/
.cBaseAccio
{
  position: absolute;
  background: rgb(254, 223, 107);
  left: 35%; top: 5%;
  width: 15%; border-radius: 10%;
  animation: aBaseAccio 1s;
  animation-fill-mode: forwards;
}
@keyframes aBaseAccio
{
  from 
  {
    left: 35%; top: 5%; 
    width: 15%; 
    background: rgb(254, 223, 107);
    content: "";
    display: block;
    padding-bottom: 15%;
  }
  to
  {
    left: 15%; top: 5%; 
    width: 60%; 
    background: rgb(157, 103, 36);
    content: "";
    display: block;
    padding-bottom: 45%;
  }
}

.cTextAccio
{
  position: absolute;
  left: 20%; top: 23%;
  width: 50%;
  animation: aTextAccio 1.5s;
  animation-fill-mode: forwards; 
}
@keyframes aTextAccio
{
  0%  {opacity: 0;}
  50% {opacity: 0;}
  100%{opacity: 1;}
}

/****** SORTIDA ******/
.cDona
{
  position: absolute;
  left: 1%; top: 50%;
  width: 7%;
  opacity: 0;
  animation: aDona 5s linear infinite;
  animation-delay: 2s;
}
@keyframes aDona
{

  0%   {opacity: 1;}
  100% {opacity: 1;}
}

.cHome
{
  position: absolute;
  left: 1%; top: 50%;
  width: 7%;
  opacity: 0;
  animation: aHome 8s linear infinite;
  animation-delay: 4s;
}
@keyframes aHome
{
  0%   {opacity: 0;}
  10%  {opacity: 1;}  
  40%  {opacity: 1;}  
  50%  {opacity: 0;}
  100% {opacity: 0;}
}

.cMascara
{
  position: absolute;
  background: rgb(0, 0, 0);
  left: 1%; top: 50%;
  width: 7%;
  animation: aMascara 6s;
  animation-fill-mode: forwards;
}
@keyframes aMascara
{
  0%  {opacity: 1; top: 50%;}
  36% {opacity: 1; top: 50%;}
  50% {opacity: 0; top: 50%;}
  51% {opacity: 0; top: 70%;} 
  100%{opacity: 0; top: 70%;}
}
.cMascara:after
{ 
  content: "";
  display: block;
  padding-bottom: 143%;
}