/*Animacion1*/
#CAnimacion1 H2
{
text-align: center;
padding: 20px 0;
}

#CAnimacion1 .Conteniendo
{
overflow: hidden;
position: relative;
height: 47vw;
}

#CAnimacion1 IMG
{
z-index: 2;
position: absolute;
bottom: 0;
max-width: 100%;
width: 90%;
}

#CAnimacion1 .bg
{
background: #7CE296;
width: 108%;
height: 100vw;
left: -4%;
position: absolute;
border-radius: 90% 90% 0 0;
z-index: 1;
bottom: 0;
transform: translateY(55%);
}

#CAnimacion1 #A1Miniglu1
{
width: 37%;
z-index: 5;
left: 50%;
transform: translate(-50%, 100%);
}

#CAnimacion1 #A1Miniglu2
{
width: 29%;
z-index: 4;
left: 25%;
transform: translate(-50%, 100%);
}

#CAnimacion1 #A1Miniglu3
{
width: 31%;
z-index: 3;
left: 75%;
transform: translate(-50%, 100%);
}

#CAnimacion1 #A1Miniglu1.dale
{
animation-duration: 2s;
animation-name: slidein;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-delay: 700ms;
}

#CAnimacion1 #A1Miniglu2.dale
{
animation-duration: 1.5s;
animation-name: slidein;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-delay: 400ms;
}

#CAnimacion1 #A1Miniglu3.dale
{
animation-duration: 1s;
animation-name: slidein;
/*animation-timing-function: ease-out;*/
animation-iteration-count: 1;
transform: translate(-50%, 0%);
}

/*Desde aqui modificaciones Banner para Disney Mayo 2022*/
#CAnimacion1.DisneyMay2022 .Conteniendo
{
height: 45.4vw;
}

.DisneyMay2022 #CAnimacion1 IMG
{
max-width: 1500px;
}

#CAnimacion1.DisneyMay2022 #A1Miniglu1
{
width: 100%;
z-index: 5;
left: 50%;
transform: translate(-50%, 100%);
}

/*Desde aqui modificaciones Banner para Navidad 2021*/
.mInicio #CAnimacion1.Navidad2021
{
background: #DF3622;
}

#CAnimacion1.Navidad2021 H2
{
font-size: 1.6rem;
}

#CAnimacion1.Navidad2021 .Conteniendo
{
height: 54.2vw;
}

#CAnimacion1.Navidad2021 .bg
{
background: #F55944;
}

@media (min-width: 500px)
{
#CAnimacion1.Navidad2021 H2
{
font-size: 2.1rem;
}
}

@media (min-width: 768px)
{
#CAnimacion1.Navidad2021 H2
{
font-size: 2.8rem;
}
}

@media (min-width: 1000px)
{
#CAnimacion1.Navidad2021 H2
{
font-size: 3.2rem;
}
}

/*Hasta aqui modificaciones Banner para Navidad 2021*/
@keyframes slidein
{
0%
{
transform: translate(-50%, 100%);
}

95%
{
transform: translate(-50%, 0%);
}

100%
{
transform: translate(-50%, 0%);
}
}

/*Animacion2*/
#CAnimacion2
{
position: relative;
overflow: hidden;
width: 100%;
max-width: 600px;
margin: 0 auto;
}

#CAnimacion2:before
{
content: "";
display: block;
padding-top: 100%;
/* initial ratio of 1:1*/
}

#CAnimacion2 #AltoAncho
{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}

#CAnimacion2 IMG
{
position: absolute;
top: 0;
left: 0;
width: 100%;
}

#CAnimacion2 IMG#A2Bg
{
width: 96%;
margin: 2%;
}

#CAnimacion2 IMG#A2Bg.dale
{
animation-duration: 150s;
animation-name: rotando;
animation-iteration-count: infinite;
}

@keyframes rotando
{
from
{
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}

to
{
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}

/*Animacion3*/
#CAnimacion3
{
background: #FFF;
padding-top: 50px;
}

#CAnimacion3 .Conteniendo
{
overflow: hidden;
position: relative;
}

#CAnimacion3 H2
{
text-align: center;
}

#CAnimacion3 H2 SPAN
{
display: block;
color:var(--c6);
margin-bottom: 20px;
}

#CAnimacion3 P
{
text-align: center;
margin: 0 15px;
}

#CAnimacion3 IMG
{
z-index: 2;
position: absolute;
width: 200%;
}

#CAnimacion3 IMG#A3Ola1
{
top: 100%;
}

#CAnimacion3 IMG#A3Ola2
{
top: 100%;
}

#CAnimacion3 IMG#A3Ola3
{
top: 100%;
}

#CAnimacion3 IMG#A3Ola4
{
top: 100%;
}

#CAnimacion3 IMG#A3Ola1.dale
{
top: 0;
animation-duration: 2s;
animation-name: slidein_Ola1;
animation-iteration-count: 1;
animation-timing-function: ease-out;
}

#CAnimacion3 IMG#A3Ola2.dale
{
/*top: 70px;*/
animation-duration: 2s;
animation-name: slidein_Ola2;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-delay: 1000ms;
animation-timing-function: ease-out;
}

#CAnimacion3 IMG#A3Ola3.dale
{
/*top: 150px;*/
animation-duration: 2.5s;
animation-name: slidein_Ola3;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-delay: 1800ms;
animation-timing-function: ease-out;
}

#CAnimacion3 IMG#A3Ola4.dale
{
/*top: 220px;*/
animation-duration: 3s;
animation-name: slidein_Ola4;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-delay: 2300ms;
animation-timing-function: ease-out;
}

#CAnimacion3 .Conteniedo:after
{
content: " ";
display: block;
background: #FFAEBA;
width: 100%;
height: 2000px;
position: absolute;
left: 0;
top: 600px;
/*z-index: 60;*/
}

#CAnimacion3 .Conteniedo
{
display: flex;
flex-direction: column;
max-width: 1200px;
margin: 0 auto;
min-height: 200px;
padding-top: 40px;
}

#CAnimacion3 .Conteniedo A
{
display: inline-block;
overflow: hidden;
position: relative;
text-align: center;
width: 80%;
margin: 0 auto 30px;
}

#CAnimacion3 .Conteniedo A IMG
{
position: relative;
transform: translate(0%, 110%);
border:10px solid var(--c_destacado);
width: calc(100% - 20px);
max-width: 360px;
}

#CAnimacion3 .Conteniedo A IMG.dale
{
animation-duration: 1s;
animation-name: slidein_Img;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}

#CAnimacion3 .Conteniedo A#aVerMas
{
background:var(--c_destacado);
color:var(--c3);
z-index: 660;
text-decoration: none;
border-radius: 30px;
padding: 8px 10px;
width: 120px;
margin: 30px auto 60px;
display: none;
}

@keyframes slidein_Ola1
{
0%
{
top: 100%;
}

100%
{
top: 0;
}
}

@keyframes slidein_Ola2
{
0%
{
top: 100%;
}

100%
{
top: 70px;
}
}

@keyframes slidein_Ola3
{
0%
{
top: 100%;
}

100%
{
top: 150px;
}
}

@keyframes slidein_Ola4
{
0%
{
top: 100%;
}

100%
{
top: 220px;
}
}

@keyframes slidein_Img
{
0%
{
transform: translate(0%, 110%);
}

100%
{
transform: translate(0%, 0%);
}
}

@media (min-width: 640px)
{
#CAnimacion3 IMG
{
width: 100%;
}

#CAnimacion3 .Conteniedo
{
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}

#CAnimacion3 .Conteniedo A
{
width: 43%;
width: calc(50% - 30px);
margin: 30px 15px 30px 15px;
}

#CAnimacion3 .Conteniedo A IMG
{
border-width: 15px;
width: calc(100% - 30px);
}
}

@media (min-width: 1000px)
{
#CAnimacion3 .Conteniedo
{
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}

#CAnimacion3 .Conteniedo A
{
width: calc(33% - 60px);
margin: 40px 30px 60px;
}

#CAnimacion3 .Conteniedo A IMG
{
border-width: 20px;
width: calc(100% - 40px);
}
}

/*Animacion4*/
#CAnimacion4
{
background:var(--c_destacado);
padding: 40px 0;
}

#CAnimacion4 .Conteniendo
{
position: relative;
}

#CAnimacion4 H2
{
text-align: center;
}

/*#CAnimacion4 h2 span:first-child {
  text-align: center;
  color:var(--c_destacado);
  -webkit-text-stroke: 1px black;
}*/
#CAnimacion4 H2 SPAN:last-child
{
display: block;
margin-bottom: 30px;
}

#CAnimacion4 A
{
padding: 8px 12px;
background: #000;
text-decoration: none;
color: #FF0;
border-radius: 15px;
z-index: 2;
display: inline-block;
margin: 10px;
}

@media (min-width: 640px)
{
#CAnimacion4 A
{
font-size: 1.3rem;
padding: 10px 20px;
}
}

@media (min-width: 1000px)
{
#CAnimacion4 A
{
font-size: 1.5rem;
padding: 13px 30px;
border-radius: 25px;
}
}

#CAnimacion4 P
{
text-align: center;
margin: 0 15px 15px;
}

#CAnimacion4 IMG
{
z-index: 2;
position: relative;
width: 100%;
}

#CAnimacion4 #A4Color
{
background: #179627;
width: 90%;
height: 90%;
position: absolute;
transform: translate(5%, 5%);
}

#CAnimacion4 #A4Color.dale
{
animation-duration: 10s;
animation-name: coloreando;
animation-iteration-count: infinite;
}

@keyframes coloreando
{
0%
{
background-color: #179627;
}

10%
{
background-color: #CF46AF;
}

20%
{
background-color: #BF2500;
}

30%
{
background-color: #37C8C1;
}

40%
{
background-color: #8148D1;
}

50%
{
background-color: #D8670C;
}

60%
{
background-color: #4387D0;
}

70%
{
background-color: #FB53BE;
}

80%
{
background-color: #434343;
}

90%
{
background-color: #CCCC00;
}

100%
{
background-color: #179627;
}
}

/*Animacion5*/
#CAnimacion5
{
background: url(../imgs/bg_hastag.svg) 110% 125% / auto 95% no-repeat;
overflow: hidden;
padding: 40px 0;
}

#CAnimacion5 .Conteniendo
{
position: relative;
max-width: 1200px;
margin: 20px auto;
display: flex;
flex-direction: row;
justify-content: space-around;
}

#CAnimacion5 H2
{
text-align: center;
margin-bottom: 20px;
}

#CAnimacion5 H2 SPAN
{
color:var(--c1);
}

#CAnimacion5 P
{
text-align: center;
margin: 0 15px 40px;
}

#CAnimacion5 .Conteniendo DIV
{
margin: 2% 3%;
position: relative;
}

#CAnimacion5 IMG
{
z-index: 2;
position: relative;
width: 100%;
max-width: 100%;
height: auto;
}

#CAnimacion5 IMG#A5Movil1
{
transform: translate(0%, -1%);
}

#CAnimacion5 IMG#A5Movil2
{
transform: translate(0%, 2%);
margin-top: 30px;
}

#CAnimacion5 IMG#A5Movil3
{
transform: translate(0%, 0%);
margin-top: 10px;
}

#CAnimacion5 IMG#A5Movil1.dale
{
animation-duration: 12s;
animation-name: meneomovil;
animation-iteration-count: infinite;
animation-delay: 0ms;
}

#CAnimacion5 IMG#A5Movil2.dale
{
animation-duration: 10s;
animation-name: meneomovil2;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
animation-delay: 400ms;
}

#CAnimacion5 IMG#A5Movil3.dale
{
animation-duration: 10s;
animation-name: meneomovil;
animation-iteration-count: infinite;
animation-fill-mode: backwards;
animation-delay: 800ms;
}

@keyframes meneomovil
{
0%
{
transform: translate(0%, 0%);
}

20%
{
transform: translate(0%, -2%);
}

40%
{
transform: translate(0%, 2%);
}

60%
{
transform: translate(0%, -1%);
}

80%
{
transform: translate(0%, 3%);
}

99%
{
transform: translate(0%, 0.1%);
}

100%
{
transform: translate(0%, 0%);
}
}

@keyframes meneomovil2
{
0%
{
transform: translate(0%, 2%);
}

/*30% {
  transform: translate(0%, 1%);
}*/
40%
{
transform: translate(0%, -2%);
}

60%
{
transform: translate(0%, 1%);
}

80%
{
transform: translate(0%, -1%);
}

/*99% {
  transform: translate(0%, 2.9%);
  visibility: visible;
}*/
100%
{
transform: translate(0%, 2%);
visibility: visible;
}
}

/*Animacion6*/
#CAnimacion6
{
overflow: hidden;
background:var(--c_destacado);
padding: 40px 0;
}

#CAnimacion6 .Conteniendo
{
position: relative;
margin: 20px auto;
}

#CAnimacion6 H2
{
text-align: center;
margin-bottom: 40px;
}

#CAnimacion6 P
{
text-align: center;
margin: -20px 0 40px;
}

#CAnimacion6 .Conteniendo DIV
{
position: absolute;
overflow: hidden;
width: 18.80%;
top: 1%;
left: 50%;
transform: translate(-52%, 0%);
margin: 0 auto;
}

#CAnimacion6 .Conteniendo DIV IMG#A6Miniglu
{
width: 100%;
transform: translate(0%, 100%);
}

#CAnimacion6 IMG
{
z-index: 2;
position: relative;
}

#CAnimacion6 IMG#A6Bg
{
display: block;
width: 100%;
}

#CAnimacion6 IMG#A6Doodle1
{
display: block;
position: absolute;
width: 18.96%;
left: 20.1%;
top: 7.6%;
}

#CAnimacion6 IMG#A6Doodle1i
{
display: block;
position: absolute;
width: 18.96%;
right: 20.7%;
top: 7.6%;
transform: scaleX(-1);
}

#CAnimacion6 IMG#A6Doodle2
{
display: block;
position: absolute;
width: 24.25%;
left: 13.2%;
top: 34%;
}

#CAnimacion6 IMG#A6Doodle2i
{
display: block;
position: absolute;
width: 24.25%;
right: 13.7%;
top: 34%;
transform: scaleX(-1);
}

#CAnimacion6 IMG#A6Doodle3
{
display: block;
position: absolute;
visibility: hidden;
width: 11.59%;
left: 50%;
top: 36.9%;
transform: translate(-51%, 0%);
}

#CAnimacion6 IMG#A6Doodle1.dale
{
animation-duration: 1.5s;
animation-name: meneo;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
animation-delay: 100ms;
}

#CAnimacion6 IMG#A6Doodle1i.dale
{
animation-duration: 1.5s;
animation-name: meneoi;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
animation-delay: 100ms;
}

#CAnimacion6 IMG#A6Doodle2.dale
{
animation-duration: 1.5s;
animation-name: meneo;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
animation-delay: 140ms;
}

#CAnimacion6 IMG#A6Doodle2i.dale
{
animation-duration: 1.5s;
animation-name: meneoi;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
animation-delay: 50ms;
}

#CAnimacion6 IMG#A6Doodle3.dale
{
animation-duration: 0.5s;
animation-name: flop;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-delay: 1500ms;
}

#CAnimacion6 .Conteniendo DIV IMG#A6Miniglu.dale
{
animation-duration: 2s;
animation-name: slideminiglu;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}

#CAnimacion6 A
{
position: absolute;
top: 80%;
left: 50%;
padding: 8px 12px;
background: #000;
text-decoration: none;
color: #FF0;
border-radius: 15px;
transform: translate(-52%, 0%);
z-index: 2;
}

@media (min-width: 640px)
{
#CAnimacion6 A
{
font-size: 1.3rem;
padding: 10px 20px;
}
}

@media (min-width: 1000px)
{
#CAnimacion6 A
{
font-size: 1.5rem;
padding: 13px 30px;
border-radius: 25px;
}
}

@keyframes meneo
{
0%
{
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}

20%
{
-ms-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
-o-transform: rotate(5deg);
transform: rotate(5deg);
}

30%
{
-ms-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
transform: rotate(-5deg);
}

50%
{
-ms-transform: rotate(8deg);
-moz-transform: rotate(8deg);
-webkit-transform: rotate(8deg);
-o-transform: rotate(8deg);
transform: rotate(8deg);
}

70%
{
-ms-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
transform: rotate(-2deg);
}

90%
{
-ms-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
-o-transform: rotate(5deg);
transform: rotate(5deg);
}

100%
{
-ms-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
-webkit-transform: rotate(-1deg);
-o-transform: rotate(-1deg);
transform: rotate(-1deg);
}
}

@keyframes meneoi
{
0%
{
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg) scaleX(-1);
}

30%
{
-ms-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
transform: rotate(-5deg) scaleX(-1);
}

50%
{
-ms-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
-o-transform: rotate(5deg);
transform: rotate(5deg) scaleX(-1);
}

60%
{
-ms-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
-webkit-transform: rotate(-8deg);
-o-transform: rotate(-8deg);
transform: rotate(-8deg) scaleX(-1);
}

80%
{
-ms-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-webkit-transform: rotate(2deg);
-o-transform: rotate(2deg);
transform: rotate(2deg) scaleX(-1);
}

90%
{
-ms-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
transform: rotate(-5deg) scaleX(-1);
}

100%
{
-ms-transform: rotate(1deg);
-moz-transform: rotate(1deg);
-webkit-transform: rotate(1deg);
-o-transform: rotate(1deg);
transform: rotate(1deg) scaleX(-1);
}
}

@keyframes flop
{
0%
{
width: 1%;
visibility: visible;
}

70%
{
width: 14%;
visibility: visible;
}

100%
{
width: 11.59%;
visibility: visible;
}
}

@keyframes slideminiglu
{
0%
{
transform: translate(0%, 100%);
}

95%
{
transform: translate(0%, 0%);
}

100%
{
transform: translate(0%, 0%);
}
}