html,body{ 
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  display:flex;
  color: #E1EFCB;/*Color Verde Pastel*/
  /*background-color: Pink; /*Color de Fondo*/        
}

/*Futas Divertidas*****************************************************************************/
.botonAguacate {
    display: none;
}
.botonSandia {
    display: none;
}
.botonPera {
    display: none;
}
.botonON {
    display: block;
}
.botonOFF {
    display: none;
}

/*Transision de Color del Fondo****************************************************************/
.miFondo {
    background-color: Pink;
    transition: background-color 1000ms linear;
    -webkit-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    -o-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
  /*a:hover { background-color: #AD310B; }*/
}
/*Imagen Intro*********************************************************************************/
.logoIntro {
  background:tranparent;	
  position: fixed;/*SI*/
  display: flex;/*SI*/  
  left: 0;/*SI*/
  /*bottom: 0vh;/*SI*/
  width: 100%;/*SI*/
  /*height: 100%;/*Activar o desactivar*/
  /*min-width: 20rem;/*Activar o desactivar*/  
  justify-content: center;/*SI*/
  text-align: center;
  flex-wrap: wrap; 
}
.logoIntro div {
  background: transparent;
  color: #FFF;
  font-size: 1.75rem;
  box-sizing: content-box;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  text-transform: uppercase;
  font-weight: bold;
  text-shadow: 2px  0px 0px black,
               0px  2px 0px black,
              -3px  0px 0px black,
               0px -2px 0px black;  
}
.logoIntro img {
  width:100%;
  height:100%;  
}
/*Botón Start**********************************************************************************/
.botonStart {
  background:transparent;	
  position: fixed;/*SI*/
  left: 0;/*SI*/
  bottom: 10vh;/*SI*/
  width: 100%;/*SI*/
  display: flex;/*SI*/
  justify-content: center;/*SI*/
  text-align: center;
  flex-wrap: wrap;
}
.botonStart div {
  margin: 0.5rem;
  min-width: 7rem;
  width:1000px;  
  height: 10rem;/*Altura del Div*/
  box-sizing: content-box; 
}
.botonStart button {	
  background: Gold;	
  width: 300px;
  height: 60px; 
  border:5px solid black;  
  color: White;
  text-align: center;
  font-size: 2rem;
  font-family: 'Sans Comic Sans', sans-serif;                                      
  text-transform: uppercase;
  font-weight: bold;
  text-shadow: 2px  0px 0px black,
               0px  2px 0px black,
              -3px  0px 0px black,
               0px -2px 0px black;   			   
}	
/*Copyright************************************************************************************/
.copyright {
  background:transparent;	
  position: fixed;/*SI*/
  left: 0;/*SI*/
  bottom: 2vh;/*SI*/
  width: 100%;/*SI*/
  display: flex;/*SI*/
  justify-content: center;/*SI*/
  text-align: center;
  flex-wrap: wrap;
  transition: transform 1.0s;    
}
.copyright div {
  margin: 0.5rem;
  min-width: 7rem;
  width:1000px;  
  height: 20px;/*Altura del Div*/
  border:0px solid black;
  border-radius: 30px;
  background: transparent;
  color: #000;
  font-size: 15px;
  box-sizing: content-box;
  /*transition: border-bottom 0.25s;*/
  transition: transform 0.5s;  
  font-family: 'Sans Comic Sans', sans-serif; 
  text-transform: uppercase;
  font-weight: bold;
}
.copyright img {
  width:80%;
  height:80%;  
  border-radius: 25px;	
}
/*Hidden***************************************************************************************/
.hidden {
  transform: translateY(120vh);/* Esta Clase oculta y mueve el Div*/
}
/*ID Imagen del Panel Uno**********************************************************************/
.panelUno {
  position: relative;
  transform: translateX(0px);/*Regresa el DIV desde la derecha*/ 
  transition: transform 0.5s;  
  display: flex;
  justify-content: center;  
  width: 500px;
  height: 500px;
  background: white;
  border-radius:50px;
  left:75px;
  bottom: -15vh; /*Altura del Panel*/  
}
.panelUno img {
  border: 5px solid Black;
  border-radius:50px;
  width:500px;
  height:500px; 
}
.ocultar-1 {
  transform: translateX(-600px);/* Esta Clase oculta y mueve el Div*/
  transition: transform 0.5s;    
}
/*Transision de Color del Panel Uno************************************************************/
.CorrectoA {
    background-color: Green;
    transition: background-color 1200ms linear;
    -webkit-transition: background-color 1200ms linear;
    -ms-transition: background-color 1200ms linear;
    -o-transition: background-color 1200ms linear;
    -ms-transition: background-color 1200ms linear;
  /*a:hover { background-color: #AD310B; }*/
}
.CorrectoB {
    background-color: Pink;
    transition: background-color 1200ms linear;
    -webkit-transition: background-color 1200ms linear;
    -ms-transition: background-color 1200ms linear;
    -o-transition: background-color 1200ms linear;
    -ms-transition: background-color 1200ms linear;
  /*a:hover { background-color: #AD310B; }*/
}
.IncorrectoA {
    background-color: Maroon;
    transition: background-color 900ms linear;
    -webkit-transition: background-color 1200ms linear;
    -ms-transition: background-color 1200ms linear;
    -o-transition: background-color 1200ms linear;
    -ms-transition: background-color 1200ms linear;
  /*a:hover { background-color: #AD310B; }*/
}
.IncorrectoB {
    background-color: Pink;
    transition: background-color 1200ms linear;
    -webkit-transition: background-color 1200ms linear;
    -ms-transition: background-color 1200ms linear;
    -o-transition: background-color 1200ms linear;
    -ms-transition: background-color 1200ms linear;
  /*a:hover { background-color: #AD310B; }*/
}
/*Menu de Inicio*******************************************************************************/
.menuInicio {
  position: fixed;
  left: 0;
  bottom: 18vh; /*Altura del Panel de los Botones*/
  width: 90%; /*Ancho de los Botones*/
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transition: transform 0.5s;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;        
}
#menu h2 {
  color: Black;/*Vamos a Jugar*/
  text-align: center;
  font-size: 2rem;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-weight: 400;        
}
#menu .options1 {
  background:transparent;
  width:400px;	
  text-align: left;
  display: flex;
  /*align-items: flex-end;/* corregir?*/
  justify-content: left;
  flex-wrap: wrap;
}
#menu .options1 button {
  /*flex: 1;*/
  width: 100%;          
}
#menu section {
  /*width: 80vw;*/
}
.hidden2 {
  transform: translateX(1200px);/*Mueve el DIV a la derecha desde el Inicio*/
}
/*#menuFrutas**********************************************************************************/
.elegirFrutas {
  background:transparent;	
  position: fixed;/*SI*/
  left: 0;/*SI*/
  bottom: 5vh;/*SI*/
  width: 100%;/*SI*/
  display: flex;/*SI*/
  justify-content: center;/*SI*/
  text-align: center;
  flex-wrap: wrap;
  transition: transform 1.0s;    
}
.hidden3 {
  transform: translateY(100vh);/* Esta Clase oculta y mueve el Div*/
  transition: transform 0.5s;/*Velocidad de movimiento*/    
}
.regresarImagenFruta {
  transform: translateX(0px);/* Esta Clase oculta y mueve el Div*/
  transition: transform 0.5s;    
}
.elegirFrutas2 {
  position: fixed;/*SI*/
  left: 0;/*SI*/
  bottom: 20vh;/*SI*/
  width: 95%;/*SI*/
  display: flex;/*SI*/
  justify-content: center;/*SI*/
  transition: transform 0.5s;  
  /*align-items: flex-end;  
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column; */       
}
.elegirFrutas div {
  margin: 0.5rem;
  min-width: 7rem;
  width:280px;  
  height: 13rem;/*Altura del Div*/
  border:5px solid black;
  border-radius: 30px;
  background: white;
  color: #FFF;
  font-size: 1.75rem;
  box-sizing: content-box;
  /*transition: border-bottom 0.25s;*/
  transition: transform 0.5s;  
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  text-transform: uppercase;
  font-weight: bold;
  text-shadow: 2px  0px 0px black,
               0px  2px 0px black,
              -3px  0px 0px black,
               0px -2px 0px black;  
}
.elegirFrutas img {
  width:280px;
  height:210px;  
  border-radius: 25px;	
}
.elegirFrutas img:hover {
  /*border-bottom: 100;*/
}
/*Presentación************************************************************************************/
#presentacion {
  color: Black;
  text-align: center;
  font-size: 4rem;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  bottom: 6vh;
}
.miPresentacion {
  position: fixed;
  left: 0;
  bottom: 25vh;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transition: transform 0.5s;
  font-family: "Comic Sans MS", "Comic Sans", cursive;  
}

/*Menu Seleccion de Juegos*********************************************************************/   
.miniJuegos {
  position: fixed;
  left: 0;
  bottom: 18vh; /*Altura del Panel de los Botones*/
  width: 90%; /*Ancho de los Botones*/
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transition: transform 0.5s;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;        
}
#juegos h2 {
  color: Black;/*Vamos a Jugar*/
  text-align: center;
  font-size: 2rem;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-weight: 400;        
}
#juegos .options2 {
  background:transparent;
  width:400px;	
  text-align: left;
  display: flex;
  /*align-items: flex-end;/* corregir?*/
  justify-content: left;
  flex-wrap: wrap;
}
#juegos .options2 button {
  /*flex: 1;*/
  width: 100%;          
}
#juegos section {
  /*width: 80vw;*/
}
.imagen2 {
  width: 500px;
  height: 500px;
  background: transparent;
  border: 3px solid Black;
  border-radius:0px;
  position:relative;
  top: 100px;
  left: -200px;
  right: 0;
  bottom: 0;
  margin: auto;
}
.imagen2 img {
  border-radius:50px;
  width:500px;
  height:500px; 
}
/*Trivia Frutas********************************************************************************/
.to-bottom {
  position: fixed;
  left: 0;
  bottom: 18vh; /*Altura del Panel de los Botones*/
  width: 90%; /*Ancho de los Botones*/
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transition: transform 0.5s;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;        
}
#trivia h2 {
  color: Black;/*¿Cúal fruta soy?*/
  text-align: center;
  font-size: 2rem;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-weight: 400;        
}
#trivia .options {
  text-align: center;
  display: flex;
  /*align-items: flex-end;/* corregir?*/
  justify-content: center;
  flex-wrap: wrap;
}
#trivia .options button {
  /*flex: 1;*/
  width: 100%;          
}
#trivia section {
  /*width: 80vw;*/
}
button {
  margin: 0.5rem;
  min-width: 7rem;
  height: 5rem;/*Altura de los botones*/
  border:5px solid black;
  border-radius: 1.2rem 1.2rem 1.4rem 1.4rem;
  background: linear-gradient(LimeGreen, LimeGreen);
  color: #FFF;
  font-size: 1.75rem;
  box-sizing: content-box;
  transition: border-bottom 0.25s;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  text-transform: uppercase;
  font-weight: bold;
  text-shadow: 2px  0px 0px black,
               0px  2px 0px black,
              -3px  0px 0px black,
               0px -2px 0px black;  
}
/*Subtitles************************************************************************************/
#subtitles {
  color: white;
  text-align: center;
  font-size: 2rem;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  bottom: 16vh;
}
.to-subtitles {
  position: fixed;
  left: 0;
  bottom: 25vh;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transition: transform 0.5s;
  font-family: "Comic Sans MS", "Comic Sans", cursive;  
}

/****************************************Efectos***********************************************/

/*Efecto Flip**********************************************************************************/
.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
.voltear .flip-box-inner {
  transform: rotateY(180deg);
}
.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius:50px;        
}
.flip-box-front {
  background-color: transparent;
  color: black;
}
.flip-box-back {
  background-color: transparent;
  color: white;
  transform: rotateY(180deg);
}
/*Efecto Nieve*********************************************************************************/
#snowContainer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
}
/*Efecto Fireworks*****************************************************************************/
#fireworksContainer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
}
.button {
  background: #4da6ff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  margin: 10px;
  transition: transform 0.2s;
}
.button.enable {
  background: #4CAF50;
}
.button.disable {
  background: #f44336;
}
.button:hover {
  transform: scale(1.05);
}
.button:active {
  transform: scale(0.95);
}
.effects-container {
  margin-top: 20px;
}}
/*Efecto Goma**********************************************************************************/
.liga {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-iteration-count: 3;   
  }
@-webkit-keyframes rubberBand {
  0% {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
  30% {
  -webkit-transform: scale3d(1.25, 0.75, 1);
  transform: scale3d(1.25, 0.75, 1);
  }
  40% {
  -webkit-transform: scale3d(0.75, 1.25, 1);
  transform: scale3d(0.75, 1.25, 1);
  }
  50% {
  -webkit-transform: scale3d(1.15, 0.85, 1);
  transform: scale3d(1.15, 0.85, 1);
  }
  65% {
  -webkit-transform: scale3d(.95, 1.05, 1);
  transform: scale3d(.95, 1.05, 1);
  }
  75% {
  -webkit-transform: scale3d(1.05, .95, 1);
  transform: scale3d(1.05, .95, 1);
  }
  100% {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
  }
@keyframes rubberBand {
  0% {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
  30% {
  -webkit-transform: scale3d(1.25, 0.75, 1);
  transform: scale3d(1.25, 0.75, 1);
  }
  40% {
  -webkit-transform: scale3d(0.75, 1.25, 1);
  transform: scale3d(0.75, 1.25, 1);
  }
  50% {
  -webkit-transform: scale3d(1.15, 0.85, 1);
  transform: scale3d(1.15, 0.85, 1);
  }
  65% {
  -webkit-transform: scale3d(.95, 1.05, 1);
  transform: scale3d(.95, 1.05, 1);
  }
  75% {
  -webkit-transform: scale3d(1.05, .95, 1);
  transform: scale3d(1.05, .95, 1);
  }
  100% {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
  } 
  }
  
/*Efecto vibración*****************************************************************************/
.vibrar {
  animation: shake 0.5s;
  animation-iteration-count: 6;
}
@keyframes shake {
  0% { transform: translate(4px, 4px) rotate(2deg); }
  10% { transform: translate(-4px, -8px) rotate(-4deg); }
  20% { transform: translate(-12px, 2px) rotate(4deg); }
  30% { transform: translate(12px, 8px) rotate(2deg); }
  40% { transform: translate(4px, -4px) rotate(4deg); }
  50% { transform: translate(-2px, 4px) rotate(-4deg); }
  60% { transform: translate(-12px, 4px) rotate(2deg); }
  70% { transform: translate(12px, 4px) rotate(-4deg); }
  80% { transform: translate(-4px, -4px) rotate(4deg); }
  90% { transform: translate(4px, 8px) rotate(2deg); }
  100% { transform: translate(4px, -8px) rotate(-4deg); }
}
/*zoomInDown***********************************************************************************/
.zoomInDown {
  -webkit-animation-name: zoomInDown;
  animation-name: zoomInDown;
  -webkit-animation-duration: 2.0s;
  animation-duration: 2.0s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes zoomInDown {
  0% {
  opacity: 0;
  -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
  transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
  -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }
  60% {
  opacity: 1;
  -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
  transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
  -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
  }
  @keyframes zoomInDown {
  0% {
  opacity: 0;
  -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
  transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
  -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }
  60% {
  opacity: 1;
  -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
  transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
  -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
  }
/*tada*****************************************************************************************/  
.tada {
  -webkit-animation-name: tada;
  animation-name: tada;
  -webkit-animation-duration: 1.2s;
  animation-duration: 1.2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-iteration-count: infinite;  
  }
  @-webkit-keyframes tada {
  0% {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
  10%, 20% {
  -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }
  30%, 50%, 70%, 90% {
  -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%, 60%, 80% {
  -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  100% {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
  }
  @keyframes tada {
  0% {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
  10%, 20% {
  -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }
  30%, 50%, 70%, 90% {
  -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%, 60%, 80% {
  -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  100% {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
  } 
/*zoomOutLeft**********************************************************************************/  
.zoomOutLeft {
  -webkit-animation-name: zoomOutLeft;
  animation-name: zoomOutLeft;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes zoomOutLeft {
  40% {
  opacity: 1;
  -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
  transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
  }
  100% {
  opacity: 0;
  -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
  transform: scale(.1) translate3d(-2000px, 0, 0);
  -webkit-transform-origin: left center;
  transform-origin: left center;
  }
  }
/*Bounce***************************************************************************************/
.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  -ms-transform-origin: center bottom;
  transform-origin: center bottom;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-iteration-count: infinite;    
  }
  @-webkit-keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  }
  40%, 43% {
  -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  -webkit-transform: translate3d(0, -30px, 0);
  transform: translate3d(0, -30px, 0);
  }
  70% {
  -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  -webkit-transform: translate3d(0, -15px, 0);
  transform: translate3d(0, -15px, 0);
  }
  90% {
  -webkit-transform: translate3d(0,-4px,0);
  transform: translate3d(0,-4px,0);
  }
  }
  @keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  }
  40%, 43% {
  -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  -webkit-transform: translate3d(0, -30px, 0);
  transform: translate3d(0, -30px, 0);
  }
  70% {
  -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  -webkit-transform: translate3d(0, -15px, 0);
  transform: translate3d(0, -15px, 0);
  }
  90% { -webkit-transform: translate3d(0,-4px,0); transform: translate3d(0,-4px,0);
  }
  } 
  
  /**************************/
  
         .jumping {
  -webkit-animation-name: jumping;
  animation-name: jumping;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-iteration-count: 3;    
  }
  @-webkit-keyframes jumping {
  0% {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
  30% {
  -webkit-transform: scale3d(1.25, 0.75, 1);
  transform: scale3d(1.25, 0.75, 1);
  }
  40% {
  -webkit-transform: scale3d(0.75, 1.25, 1);
  transform: scale3d(0.75, 1.25, 1);
  }
  50% {
  -webkit-transform: scale3d(1.15, 0.85, 1);
  transform: scale3d(1.15, 0.85, 1);
  }
  65% {
  -webkit-transform: scale3d(.95, 1.05, 1);
  transform: scale3d(.95, 1.05, 1);
  }
  75% {
  -webkit-transform: scale3d(1.05, .95, 1);
  transform: scale3d(1.05, .95, 1);
  }
  100% {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
  }
  @keyframes jumping {
  0% {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
  30% {
  -webkit-transform: scale3d(1.25, 0.75, 1);
  transform: scale3d(1.25, 0.75, 1);
  }
  40% {
  -webkit-transform: scale3d(0.75, 1.25, 1);
  transform: scale3d(0.75, 1.25, 1);
  }
  50% {
  -webkit-transform: scale3d(1.15, 0.85, 1);
  transform: scale3d(1.15, 0.85, 1);
  }
  65% {
  -webkit-transform: scale3d(.95, 1.05, 1);
  transform: scale3d(.95, 1.05, 1);
  }
  75% {
  -webkit-transform: scale3d(1.05, .95, 1);
  transform: scale3d(1.05, .95, 1);
  }
  100% {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
  } 
  
  /********************************************************/

/*Efecto vibración*/

.vibrato {
  animation: shake 0.5s;
  animation-iteration-count: 3;
}

@keyframes shake {
  0% { transform: translate(4px, 4px) rotate(2deg); }
  10% { transform: translate(-4px, -8px) rotate(-4deg); }
  20% { transform: translate(-12px, 2px) rotate(4deg); }
  30% { transform: translate(12px, 8px) rotate(2deg); }
  40% { transform: translate(4px, -4px) rotate(4deg); }
  50% { transform: translate(-2px, 4px) rotate(-4deg); }
  60% { transform: translate(-12px, 4px) rotate(2deg); }
  70% { transform: translate(12px, 4px) rotate(-4deg); }
  80% { transform: translate(-4px, -4px) rotate(4deg); }
  90% { transform: translate(4px, 8px) rotate(2deg); }
  100% { transform: translate(4px, -8px) rotate(-4deg); }
}

/*Efecto vibración*/

/********************************************************/