/*===================================================================================================*/
/*========= Animacion automatica ==========================================================================================*/
/*===================================================================================================*/

.up-titulo {
  animation-name: subida;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-direction: reverse;
}

@keyframes subida {
  from {
    transform: translateY(0px);
    opacity: 1;
  }
  to {
    transform: translateY(50px);
    opacity: 0;
  }
}

.show-cuerpo {
  animation-name: aparecer;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-fill-mode: both;
  opacity: 0;
  animation-delay: 1s;
}

@keyframes aparecer {
  form {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/*===================================================================================================*/
/*========= FIN DE animacion automatica ==========================================================================================*/
/*===================================================================================================*/

/*===================================================================================================*/
/*========= animacion con raton ==========================================================================================*/
/*===================================================================================================*/

.resaltado {
  transition: ease-out 0.3s;
  -webkit-transition: ease-out 0.3s;
  -moz-transition: ease-out 0.3s;
  transition: transform 0.3s ease-in-out;

  transition: ease-out 0.3s;
}

.resaltado:hover {
  transform: scale(1.04);
}

@media (max-width: 768px) {
  .resaltado:hover {
    transform: none;
  }
}

.subida {
  transition: ease-out 0.3s;
  -webkit-transition: ease-out 0.3s;
  -moz-transition: ease-out 0.3s;
  transition: transform 0.3s ease-in-out;
}

.subida:hover {
  transform: translateY(-25px);
  background-image: linear-gradient(
    to bottom,
    #04153b,
    #07204f,
    #092d63,
    #073a79,
    #00478f
  );
}

@media (max-width: 768px) {
  .subida:hover {
    transform: none;
  }
}

/*===================================================================================================*/
/*========= FIN DE animacion con raton ==========================================================================================*/
/*===================================================================================================*/

/*===================================================================================================*/
/*========= aniamcion con scroll ==========================================================================================*/
/*===================================================================================================*/

.in-and-out {
  animation-name: in-and-out;
  animation-timing-function: both;
  animation-timeline: view();
}

@keyframes in-and-out {
  entry 0% {
    opacity: 0;
    transform: translateY(60%);
  }
  entry 100% {
    opacity: 1;
    transform: translateY(0);
  }

  exit 0% {
    opacity: 1;
    transform: translateY(0);
  }
  exit 100% {
    opacity: 0;
    transform: translateY(-60%);
  }
}

/* @media (max-width: 768px){
  .in-and-out{
    animation: none;
  }
} */

.aparece-abajo {
  animation: linear aparece-abajo;
  animation-timeline: view();
}

@keyframes aparece-abajo {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
}

@media (max-width: 767px) {
  .aparece-abajo {
    animation: none;
  }
}

.entrada-izquierda {
  animation: linear entrada-izquierda;
  animation-timeline: view();
}

@keyframes entrada-izquierda {
  0% {
    opacity: 0;
    transform: translateX(-200px);
  }
  25% {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (max-width: 768px) {
  .entrada-izquierda {
    animation: none;
  }
}

.entrada-derecha {
  animation: linear entrada-derecha;
  animation-timeline: view();
}

@keyframes entrada-derecha {
  0% {
    opacity: 0;
    transform: translateX(200px);
  }
  25% {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (max-width: 768px) {
  .entrada-derecha {
    animation: none;
  }
}

/*===================================================================================================*/
/*========= aniamcion con scroll ==========================================================================================*/
/*===================================================================================================*/
