/* Necessary for click lag fixed by react-tap-event-plugin */
body {-webkit-tap-highlight-color: rgba(0, 0, 0, 0)}

/* ANIMATION: INTRO */
@keyframes fadein-0-100 {
  0% { opacity:0; }
  100% { opacity: 1; }
}
.lpa-introtext,
.lpa-lifepurposeapp,
.lpa-lebensweg,
.lpa-introButton {
  animation-name: fadein-0-100;
  animation-duration: 2s;
  animation-fill-mode: none;
}
@keyframes fadein-0-10-100 {
  0% { opacity:0; }
  10% { opacity:0; }
  100% { opacity: 1; }
}
.lpa-iphone {
  animation-name: fadein-0-10-100;
  animation-duration: 2s;
  animation-fill-mode: none;
}

/* ANIMATION: WELCOME TEXT */
@keyframes fadein-scale-0-20-100 {
  0% { opacity:0; transform: scale(0.5); }
  20% { opacity:0; transform: scale(0.5); }
  100% { opacity:1; transform: scale(1); }
}
.lpa-welcome {
  animation-name: fadein-scale-0-20-100;
  animation-delay: 0s;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
}
@keyframes fadein-0-70-100 {
  0% { opacity: 0; }
  70% { opacity: 0; }
  100% { opacity: 1; }
}
.lpa-welcometext {
  animation: fadein-0-70-100;
  animation-duration: 2s;
  animation-fill-mode: none;
}

.lpa-responsive{-webkit-overflow-scrolling:touch;}*:focus{outline:none;}

/* INPUT PLACEHOLDERS */
input{ box-sizing: border-box; border-style: solid; -webkit-appearance: none; outline: none; }
::-webkit-input-placeholder { font-family: Lato, sans-serif; }
::-moz-placeholder { font-family: Lato, sans-serif; }
:-ms-input-placeholder { font-family: Lato, sans-serif; }
input:-moz-placeholder { font-family: Lato, sans-serif; }

/* ITALIC LINKS */
.lpa-link em { font-weight: 700; }

/* BUTTON */
@keyframes colorchange {
  0%   { background-position:0% 0% }
  50%  { background-position:90% 100% }
  100% { background-position:0% 0% }
}
.capps-button.primary {
  background: linear-gradient(315deg, #0090f9, #0056da);
  background-size: 200% 200%;
  animation: colorchange 8s ease infinite;
}