/*-- BASES --*/
.cBotoPG
{
  position: absolute;
  left: 15%; top: 65%;
  width: 10%; height: auto;
  animation: aBotoPG 500ms;
  animation-fill-mode: forwards;
}
@keyframes aBotoPG
{
  from {top: 65%;}
  to {top: 5%;}
}

.cBotoPGE
{
  position: absolute;
  left: 15%; top: 65%;
  width: 10%; height: auto;
  animation: aBotoPGE 700ms;
  animation-fill-mode: forwards;
}
@keyframes aBotoPGE
{
  from {top: 65%;}
  to {top: 25%;}
}

.cBotoCNS
{
  position: absolute;
  left: 15%; top: 65%;
  width: 10%; height: auto;
  animation: aBotoCNS 900ms;
  animation-fill-mode: forwards;
}
@keyframes aBotoCNS
{
  from {top: 65%;}
  to {top: 45%;}
}

.cBotoESPECIALS
{
  position: absolute;
  left: 15%; top: 65%;
  width: 10%; height: auto;
  animation: aBotoESPECIALS 1200ms;
  animation-fill-mode: forwards;
}
@keyframes aBotoESPECIALS
{
  from {top: 65%;}
  to {top: 65%;}
}

/*-- BOTONS 
.cBoto_PG
{
  opacity: 0;
  animation: 1s aBoto_PG;
  animation-fill-mode: forwards;
}
@keyframes aBoto_PG
{
  from {opacity: 0;}
  to   {opacity: 1;}
}

.cBoto_PGE
{
  opacity: 0;
  animation: 1.2s aBoto_PGE;
  animation-fill-mode: forwards;
}
@keyframes aBoto_PGE
{
  from {opacity: 0;}
  to   {opacity: 1;}
}

.cBoto_CNS
{
  opacity: 0;
  animation: 1.4s aBoto_CNS;
  animation-fill-mode: forwards;
}
@keyframes aBoto_CNS
{
  from {opacity: 0;}
  to   {opacity: 1;}
}

.cBoto_Especials
{
  opacity: 0;
  animation: 1.6s aBoto_Especials;
  animation-fill-mode: forwards;
}
@keyframes aBoto_Especials
{
  from {opacity: 0;}
  to   {opacity: 1;}
}
--*/
/****** SORTIDA ******/
.cDona
{
  position: absolute;
  left: 1%; top: 50%;
  width: 7%;
  opacity: 0;
  animation: aDona 5s linear infinite;
}
@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 2s;
  animation-fill-mode: forwards;
}
@keyframes aMascara
{
  0%  {opacity: 1; top: 50%;}
  26% {opacity: 1; top: 50%;}
  60% {opacity: 0; top: 50%;}
  51% {opacity: 0; top: 70%;} 
  100%{opacity: 0; top: 70%;}
}
.cMascara:after
{ 
  content: "";
  display: block;
  padding-bottom: 143%;
}