/* * * * * * * * * * * * * * * * */
/* * * * * * animacion * * * * * */
/* * * * * * * * * * * * * * * * */
#logoAnimado {
	height: 216px;
	width: 638px;
}

.letra {
	display: inline-block;
	padding: 3px;
	position: relative;
}
.unionVertical {
	width: 100px;
	height: 6px;
	background-color: #009933;
}
.cuarto {
	width: 100px;
	height: 100px;
	background-color: #009933;
}
.cuarto1 {
	border-top-right-radius: 100px;
}
.cuarto2 {
	border-bottom-right-radius: 100px;
}
.cuarto3 {
	border-bottom-left-radius: 100px;
}
.cuarto4 {
	border-top-left-radius: 100px;
}

.primeraU {
	position: absolute;
	top: 106px;
	left: 106px;
}

.animacionActiva .primeraU {
	animation-name: primeraUanimation;
	animation-duration: 0.5s;
	animation-delay: 0s;
}
@keyframes primeraUanimation {
  0%   { left: 0px; transform:rotate(90deg);}
  10%  { top: 114px; left: 10px; transform:rotate(80deg); }
  20%  { top: 120px; left: 22px; transform:rotate(70deg); }
  30%  { top: 124px; left: 34px; transform:rotate(60deg); }
  40%  { top: 126px; left: 44px; transform:rotate(52deg); }
  50%  { top: 127px; left: 53px; transform:rotate(45deg); }
  60%  { top: 126px; left: 68px; transform:rotate(38deg); }
  70%  { top: 124px; left: 77px; transform:rotate(30deg); }
  80%  { top: 120px; left: 89px; transform:rotate(20deg); }
  90%  { top: 114px; left: 98px; transform:rotate(10deg); }
}

.animacionReverse .primeraU {
	animation-name: primeraUreverse;
	animation-duration: 1.5s;
	animation-delay: 0s;
}
@keyframes primeraUreverse {
  0%   { top: 106px; left: 106px; transform:rotate(0deg); opacity: 1; }
  100% { opacity: 0; }
}

.primeraC {
	position: absolute;
	top: 106px;
	left: 106px;
	transform:rotate(-90deg);
}

.animacionActiva .primeraC {
	animation-name: primeraCanimation;
	animation-duration: 0.5s;
	animation-delay: 0s;
	animation-fill-mode: forwards;
}
@keyframes primeraCanimation {
  0%   { left:106px; transform:rotate(-90deg); }
  10%  { top: 114px; left: 125px; transform:rotate(-80deg); }
  20%  { top: 120px; left: 149px; transform:rotate(-70deg); }
  30%  { top: 124px; left: 169px; transform:rotate(-60deg); }
  40%  { top: 126px; left: 183px; transform:rotate(-52deg); }
  50%  { top: 127px; left: 194px; transform:rotate(-45deg); }
  60%  { top: 126px; left: 207px; transform:rotate(-38deg); }
  70%  { top: 124px; left: 212px; transform:rotate(-30deg); }
  80%  { top: 120px; left: 219px; transform:rotate(-20deg); }
  90%  { top: 114px; left: 215px; transform:rotate(-10deg); }
  100% { left: 212px; transform:rotate(0deg); }
}

.animacionReverse .primeraC {
	animation-name: primeraCreverse;
	animation-duration: 1.5s;
	animation-delay: 0s;
}
@keyframes primeraCreverse {
  0%   { left: 212px; transform:rotate(0deg); opacity: 1; }
  75%  { left: 212px; transform:rotate(0deg); opacity: 0; }
  100% { opacity: 0; }
}

.primeraE {
	position: absolute;
	top: 106px;
	left: 318px;
	opacity: 0;
}

.animacionActiva .primeraE {
	animation-name: primeraEanimation;
	animation-duration: 0.5s;
	animation-delay: 0.5s;
	animation-fill-mode: forwards;
}
@keyframes primeraEanimation {
  0%   { left: 212px; transform:rotate(-90deg); opacity: 1;}
  10%  { top: 99px; left: 222px; transform:rotate(-80deg); }
  20%  { top: 93px; left: 233px; transform:rotate(-70deg); }
  30%  { top: 88px; left: 246px; transform:rotate(-60deg); }
  40%  { top: 87px; left: 257px; transform:rotate(-52deg); }
  50%  { top: 86px; left: 266px; transform:rotate(-45deg); }
  60%  { top: 87px; left: 277px; transform:rotate(-38deg); }
  70%  { top: 88px; left: 288px; transform:rotate(-30deg); }
  80%  { top: 92px; left: 300px; transform:rotate(-20deg); }
  90%  { top: 98px; left: 312px; transform:rotate(-10deg); }
  100% { opacity: 1; }
}

.animacionReverse .primeraE {
	animation-name: primeraEreverse;
	animation-duration: 1.5s;
	animation-delay: 0s;
}
@keyframes primeraEreverse {
  0%   { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 0; }
}

.segundaC {
	position: absolute;
	top: 106px;
	left: 424px;
	opacity: 0;
}

.animacionActiva .segundaC {
	animation-name: segundaCanimation;
	animation-duration: 0.5s;
	animation-delay: 1s;
	animation-fill-mode: forwards;
}
@keyframes segundaCanimation {
  0%   { left: 318px; transform:rotate(90deg); opacity: 1; }
  10%  { top: 114px; left: 328px; transform:rotate(80deg); }
  20%  { top: 120px; left: 340px; transform:rotate(70deg); }
  30%  { top: 124px; left: 353px; transform:rotate(60deg); }
  40%  { top: 126px; left: 363px; transform:rotate(52deg); }
  50%  { top: 127px; left: 373px; transform:rotate(45deg); }
  60%  { top: 126px; left: 382px; transform:rotate(38deg); }
  70%  { top: 124px; left: 393px; transform:rotate(30deg); }
  80%  { top: 120px; left: 405px; transform:rotate(20deg); }
  90%  { top: 114px; left: 417px; transform:rotate(10deg); }
  100% { opacity: 1; }
}

.animacionReverse .segundaC {
	animation-name: segundaCreverse;
	animation-duration: 1.5s;
	animation-delay: 0s;
}
@keyframes segundaCreverse {
  0%   { opacity: 1; }
  25%  { opacity: 0; }
  100% { opacity: 0; }
}

.segundaU {
	position: absolute;
	top: 106px;
	left: 530px;
	opacity: 0;
}

.animacionActiva .segundaU {
	animation-name: segundaUanimation;
	animation-duration: 0.5s;
	animation-delay: 1.5s;
	animation-fill-mode: forwards;
}
@keyframes segundaUanimation {
  0%   { left: 424px; transform:rotate(90deg); opacity: 1; }
  10%  { top: 114px; left: 434px; transform:rotate(80deg); }
  20%  { top: 120px; left: 446px; transform:rotate(70deg); }
  30%  { top: 124px; left: 458px; transform:rotate(60deg); }
  40%  { top: 126px; left: 468px; transform:rotate(52deg); }
  50%  { top: 127px; left: 477px; transform:rotate(45deg); }
  60%  { top: 126px; left: 492px; transform:rotate(38deg); }
  70%  { top: 124px; left: 501px; transform:rotate(30deg); }
  80%  { top: 120px; left: 513px; transform:rotate(20deg); }
  90%  { top: 114px; left: 522px; transform:rotate(10deg); }
  100% { opacity: 1; }
}

.animacionReverse .segundaU {
	animation-name: segundaUreverse;
	animation-duration: 1.5s;
	animation-delay: 0s;
}
@keyframes segundaUreverse {
  0%   { left: 530px; transform:rotate(0deg); opacity: 1; }
  5%  { transform:rotate(-7deg); }
  10%  { transform:rotate(-14deg); }
  15%  { transform:rotate(-20deg); }
  80%  { transform:rotate(-20deg); }
  85%  { transform:rotate(-14deg); }
  95%  { transform:rotate(-7deg); }
  99%  { opacity: 1; }
  100% { left: 106px; opacity: 0; }
}

.contenedorTilde {
	display: block;
	width: 140px;
	height: 140px;
	position: absolute;
	top: 30px;
	left: 70px;
}
.tilde {
	border-radius: 50%;
	background-image: conic-gradient(
		transparent 15deg,
		#009933 15deg 60deg, 
		transparent 0);
	height: 100%;
	width: 100%;
}

.animacionActiva .contenedorTilde {
	animation-name: contenedorTildeAnimation;
	animation-duration: 2.5s;
	animation-fill-mode: forwards;
	animation-delay: 0s;
}
@keyframes contenedorTildeAnimation {
	0%   { left: 70px; }
	2%   { top: 31px; left: 70px: transform:rotate(10deg); }   /*  80 primeraC */
	4%   { top: 32px; left: 70px: transform:rotate(20deg); }   /*  70 primeraC */
	6%   { top: 33px; left: 71px: transform:rotate(30deg); }   /*  60 primeraC */
	8%   { top: 35px; left: 71px: transform:rotate(40deg); }   /*  52 primeraC */
	10%  { top: 37px; left: 72px: transform:rotate(50deg); }   /*  45 primeraU */
	12%  { top: 39px; left: 73px: transform:rotate(60deg); }   /*  38 primeraU */
	13%  { top: 39px; left: 73px: transform:rotate(66deg); }   
	14%  { top: 40px; left: 76px; transform:rotate(62deg); }   /* -30 primeraC */
	16%  { top: 41px; left: 79px; transform:rotate(55deg); }   /* -20 primeraC */
	18%  { top: 42px; left: 82px; transform:rotate(37deg); }   /* -10 primeraC */
	20%  { top: 36px; left: 85px; transform:rotate(30deg); }   /*   0 primeraC */
	22%  { top: 33px; left: 92px; transform:rotate(20deg); }   /* -80 primeraE */
	24%  { top: 29px; left: 115px; transform:rotate(14deg); }  /* -70 primeraE */
	26%  { top: 26px; left: 141px; transform:rotate(9deg); }   /* -60 primeraE */
	28%  { top: 22px; left: 162px; transform:rotate(11deg); }  /* -52 primeraE */
	30%  { top: 17px; left: 178px; transform:rotate(13deg); }  /* -45 primeraE */
	32%  { top: 15px; left: 192px; transform:rotate(16deg); }  /* -38 primeraE */
	34%  { top: 12px; left: 215px; transform:rotate(21deg); }  /* -30 primeraE */
	36%  { top: 14px; left: 238px; transform:rotate(26deg); }  /* -20 primeraE */
	38%  { top: 17px; left: 263px; transform:rotate(33deg); }  /* -10 primeraE */
	40%  { top: 20px; left: 278px; transform:rotate(43deg); }  /*   0 primeraE */
	42%  { top: 17px; left: 294px; transform:rotate(50deg); }  /*  80 segundaC */
	44%  { top: 17px; left: 307px; transform:rotate(56deg); }  /*  70 segundaC */
	46%  { top: 18px; left: 321px; transform:rotate(62deg); }  /*  60 segundaC */
	48%  { top: 23px; left: 335px; transform:rotate(69deg); }  /*  52 segundaC */
	50%  { top: 38px; left: 355px; transform:rotate(75deg); }  /*  45 segundaC */
	52%  { top: 45px; left: 365px; transform:rotate(68deg); }  /*  38 segundaC */
	54%  { top: 45px; left: 375px; transform:rotate(60deg); }  /*  30 segundaC */
	56%  { top: 45px; left: 385px; transform:rotate(50deg); }  /*  20 segundaC */
	58%  { top: 42px; left: 395px; transform:rotate(40deg); }  /*  10 segundaC */
	60%  { top: 36px; left: 405px; transform:rotate(30deg); }  /*   0 segundaC */
	62%  { top: 36px; left: 415px; transform:rotate(30deg); }  /*  80 segundaU */
	64%  { top: 34px; left: 425px; transform:rotate(35deg); }  /*  70 segundaU */
	66%  { top: 31px; left: 435px; transform:rotate(45deg); }  /*  60 segundaU */
	68%  { top: 28px; left: 440px; transform:rotate(55deg); }  /*  52 segundaU */
	70%  { top: 28px; left: 445px; transform:rotate(65deg); }  /*  45 segundaU */
	72%  { top: 28px; left: 452px; transform:rotate(67deg); }  /*  38 segundaU */
	74%  { top: 28px; left: 458px; transform:rotate(63deg); }  /*  30 segundaU */
	76%  { top: 28px; left: 465px; transform:rotate(57deg); }  /*  20 segundaU */
	78%  { top: 29px; left: 472px; transform:rotate(47deg); }  /*  10 segundaU */
	80%  { top: 30px; left: 478px; transform:rotate(35deg); }  /*   0 segundaU */
	82%  { left: 484px; transform: rotate(20deg); }
	84%  { left: 489px; transform: rotate(14deg); }
	86%  { left: 493px; transform: rotate(7deg); }
	88%  { left: 495px; transform: rotate(0deg); }
	89%  { opacity: 1; }
	96%  { opacity: 0.1; }
	99%  { opacity: 1; }
	100% { left: 495px; }
}

.animacionReverse .contenedorTilde {
	animation-name: contenedorTildeReverse;
	animation-duration: 1.5s;
	animation-delay: 0s;
}
@keyframes contenedorTildeReverse {
	0% { left: 495px; }
	5%  { transform: rotate(7deg); }
	10%  { transform: rotate(14deg); }
	15%  { transform: rotate(20deg); }
	85%  { transform: rotate(20deg); }
	90%  { transform: rotate(14deg); }
	95%  { transform: rotate(7deg); }
	100% { left: 70px; }
}

.tilde.guinhoActivo {
	animation-name: guinhoAnimation;
	animation-duration: 0.2s;
	animation-direction: alternate;
	animation-iteration-count: 2;
	animation-delay: 0s;
}
@keyframes guinhoAnimation {
    5%  { background-image: conic-gradient(transparent 16deg, #009933 15deg 59deg, transparent 0); }
    10%  { background-image: conic-gradient(transparent 18deg, #009933 15deg 59deg, transparent 0); }
    15%  { background-image: conic-gradient(transparent 19deg, #009933 15deg 58deg, transparent 0); }
    20%  { background-image: conic-gradient(transparent 21deg, #009933 15deg 57deg, transparent 0); }
    25%  { background-image: conic-gradient(transparent 22deg, #009933 15deg 57deg, transparent 0); }
    30%  { background-image: conic-gradient(transparent 24deg, #009933 15deg 56deg, transparent 0); }
    35%  { background-image: conic-gradient(transparent 25deg, #009933 15deg 55deg, transparent 0); }
    40%  { background-image: conic-gradient(transparent 27deg, #009933 15deg 55deg, transparent 0); }
    45%  { background-image: conic-gradient(transparent 28deg, #009933 15deg 54deg, transparent 0); }
    50%  { background-image: conic-gradient(transparent 30deg, #009933 15deg 53deg, transparent 0); }
    55%  { background-image: conic-gradient(transparent 31deg, #009933 15deg 53deg, transparent 0); }
    60%  { background-image: conic-gradient(transparent 33deg, #009933 15deg 52deg, transparent 0); }
    65%  { background-image: conic-gradient(transparent 34deg, #009933 15deg 51deg, transparent 0); }
    70%  { background-image: conic-gradient(transparent 35deg, #009933 15deg 51deg, transparent 0); }
    75%  { background-image: conic-gradient(transparent 37deg, #009933 15deg 50deg, transparent 0); }
    80%  { background-image: conic-gradient(transparent 38deg, #009933 15deg 49deg, transparent 0); }
    85%  { background-image: conic-gradient(transparent 40deg, #009933 15deg 49deg, transparent 0); }
    90%  { background-image: conic-gradient(transparent 41deg, #009933 15deg 48deg, transparent 0); }
    95%  { background-image: conic-gradient(transparent 43deg, #009933 15deg 47deg, transparent 0); }
    100%  { background-image: conic-gradient(transparent 44deg, #009933 15deg 47deg, transparent 0); }
}