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


.cFons
{
	position: fixed;
	width: 100%; height: 100vh;
	left: 0px; top: 0px;
	background-color: #000000;
  animation: aFons 2s;
  animation-fill-mode: forwards;
}
@keyframes aFons
{  
  0%   {background-color: #000000;}
  100% {background-color: #337353;}
}

.cBoto01 
{
  position: absolute;
  left: 15%; top: 5%;
  width: 15%; border-radius: 10%;
  background: rgb(254, 223, 107);
}
.cBoto01:after 
{
  content: "";
  display: block;
  padding-bottom: 100%;
}

.cBoto04 
{
  position: absolute;
  background: rgb(254, 223, 107);
  left: 15%; top: 35%;
  width: 15%; border-radius: 10%;
  animation: 1s aBoto04;
  animation-fill-mode: forwards;
}
@keyframes aBoto04
{
  from 
  {
    background: rgb(254, 223, 107);
    left: 15%; top: 5%;
    width: 15%; border-radius: 10%;
  }
  to
  {  
    background: rgb(220, 225, 220); 
    left: 15%; top: 5%;
    width: 55%; border-radius: 2.7%;
  }
}
.cBoto04:after 
{
  content: "";
  display: block;
  padding-bottom: 100%;
}

.cBoto03 
{
  position: absolute;
  left: 55%; top: 5%;
  width: 15%; border-radius: 10%;
  background: rgb(254, 223, 107);
}
.cBoto03:after 
{
  content: "";
  display: block;
  padding-bottom: 100%;
}

.cBoto02 
{
  position: absolute;
  left: 15%; top: 35%;
  width: 15%; border-radius: 10%;
  background: rgb(254, 223, 107);
}
.cBoto02:after 
{
  content: "";
  display: block;
  padding-bottom: 100%;
}

.cBoto05 
{
  position: absolute;
  left: 35%; top: 35%;
  width: 15%; border-radius: 10%;
  background: rgb(254, 223, 107);
}
.cBoto05:after 
{
  content: "";
  display: block;
  padding-bottom: 100%;
}

.cBoto06 
{
  position: absolute;
  left: 55%; top: 35%;
  width: 15%; border-radius: 10%;
  background: rgb(254, 223, 107);
}
.cBoto06:after 
{
  content: "";
  display: block;
  padding-bottom: 100%;
}

.cBoto07 
{
  position: absolute;
  left: 15%; top: 65%;
  width: 15%; border-radius: 10%;
  background: rgb(254, 223, 107);
}
.cBoto07:after 
{
  content: "";
  display: block;
  padding-bottom: 100%;
}

.cBoto08
{
  position: absolute;
  left: 35%; top: 65%;
  width: 15%; border-radius: 10%;
  background: rgb(254, 223, 107);
}
.cBoto08:after 
{
  content: "";
  display: block;
  padding-bottom: 100%;
}

.cBoto09 
{
  position: absolute;
  left: 55%; top: 65%;
  width: 15%; border-radius: 10%;
  background: rgb(254, 223, 107);
}
.cBoto09:after 
{
  content: "";
  display: block;
  padding-bottom: 100%;
}