body {
  /* anulamos todos los efectos touch por defecto, la aplicación maneja los que necesita */
  touch-action: none;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  display: block;
  overflow: hidden;
}
.mylicbutton{
  position: absolute;
  width:80%;
  opacity:0.5;
  color: black;
  font-size: 10px;
  text-shadow: 1px 1px white;
  
  align-content: center;
  }
/*animación para la espera, se muestra el birrete girando */
.imgrotate {
  animation: 2s linear rotate infinite;
  position: absolute;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}


/*********************************************** Animaciones para los slideshows en las hojas ***********************************************/
/* Fading animation */
.fadein {
  position: absolute;
  -webkit-animation-name: fadein;
  -webkit-animation-duration: var(--element-duration);
  animation-name: fadein;
  animation-duration: var(--element-duration);
}

@-webkit-keyframes fadein {
  from {
    opacity: .4
  }

  to {
    opacity: 1
  }
}

@keyframes fadein {
  from {
    opacity: .4
  }

  to {
    opacity: 1
  }
}

/* animación con fade in y out*/
.fadeinfadeout {
  animation-duration: var(--element-duration);
  animation-delay: 0s;
  animation-direction: normal;
  animation-name: fade-in-out;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-fill-mode: none;
}

@keyframes fade-in-out {
  0% {
    opacity: 0.2;
  }

  15% {
    opacity: 1;
  }

  85% {
    opacity: 1;
  }

  100% {
    opacity: 0.2;
  }
}


/*animación creciendo hasta el tamaño final y fade out para desaparecer*/
.scaleupcenter {
  animation-duration: var(--element-duration);
  animation-delay: 0s;
  animation-direction: normal;
  animation-name: scale-up-center;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-fill-mode: none;
}

@keyframes scale-up-center {
  0% {
    transform: scale(0.5);
    opacity: 1;
  }

  30% {
    transform: scale(1);
    opacity: 1;
  }

  90% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 0;
  }
}

/*animación decreciendo hasta mitad de tamaño y fade in para entrar*/
.scaledowncenter {
  animation-duration: var(--element-duration);
  animation-delay: 0s;
  animation-direction: normal;
  animation-name: scale-up-center;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-fill-mode: none;
}

@keyframes scale-up-center {
  0% {
    transform: scale(1);
    opacity: 0.2;
  }

  10% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(0.5);
    opacity: 1;
  }
}

/*animación para slide, gira y se contrae además de fading entre nuevas imágenes*/
.rotatescaledownfadeout {
  animation-duration: var(--element-duration);
  animation-delay: 0s;
  animation-direction: normal;
  animation-name: rotate-scale-down-fadeout;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-fill-mode: none;
}

@keyframes rotate-scale-down-fadeout {
  0% {
    transform: scale(1) rotateZ(0);
    opacity: 1;
  }

  40% {
    transform: scale(0.75) rotateZ(180deg);
    opacity: 1;
  }

  80% {
    transform: scale(1) rotateZ(360deg);
    opacity: 1;
  }

  100% {
    transform: scale(1) rotateZ(360deg);
    opacity: 0;
  }
}


/* animación girando sobre eje horizontal hasta 0 grados y cargando la siguiente imagen */
.fliphorizontalbottom {
  animation-duration: var(--element-duration);
  animation-delay: 0s;
  animation-direction: normal;
  animation-name: flip-horizontal-bottom;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-fill-mode: none;
}

@keyframes flip-horizontal-bottom {
  0% {
    transform: rotateX(90deg);
  }

  45% {
    transform: rotateX(0);
  }

  55% {
    transform: rotateX(0);
  }

  100% {
    transform: rotateX(90deg);
  }

}


/* animación girando sobre eje vertical esconder la imagen en el centro y cargando la siguiente imagen en un fade */
.flipverrightfwd {
  animation-duration: var(--element-duration);
  animation-delay: 0s;
  animation-direction: normal;
  animation-name: flip-2-ver-right-fwd;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-fill-mode: none;
}

@keyframes flip-2-ver-right-fwd {
  0% {
    transform: translateX(0) translateZ(0) rotateY(-90deg);
    opacity: 0.2;
  }

  15% {
    opacity: 1;
  }

  35% {
    transform: translateX(0) translateZ(0) rotateY(0);
    opacity: 1;
  }
  65% {
    transform: translateX(0) translateZ(0) rotateY(0);
    opacity: 1;
  }
  85% {
    opacity: 1;
  }

  100% {
    transform: translateX(0) translateZ(0) rotateY(90deg);
    opacity: 0.2;
  }

}

}