@import url(https://fonts.googleapis.com/css?family=Cabin);
body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: 100vh;
  background-color: #f2f2f2; }

.mouse p {
  position: fixed;
  top: 80%;
  margin-top: 50px;
  font-family: "Cabin", sans-serif;
  letter-spacing: 12px;
  text-indent: -28px;
  color: #fff;
  -webkit-animation: colorText 5s ease-out infinite, nudgeText 5s ease-out infinite;
  animation: colorText 5s ease-out infinite, nudgeText 5s ease-out infinite; }

.mouse {
  background: #3863A7 -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent), color-stop(50%, #000), to(#000));
  background: #3863A7 -webkit-linear-gradient(transparent 0%, transparent 50%, #000 50%, #000 100%);
  background: #3863A7 -o-linear-gradient(transparent 0%, transparent 50%, #000 50%, #000 100%);
  background: #3863A7 linear-gradient(transparent 0%, transparent 50%, #000 50%, #000 100%);
  position: absolute;
  top: 150%;
  left: 50%;
  width: 34px;
  height: 65px;
  background-size: 100% 100%;
  border-radius: 12px;
  background-size: 225%;
  -webkit-animation: colorSlide 5s linear infinite, nudgeMouse 5s ease-out infinite;
  animation: colorSlide 5s linear infinite, nudgeMouse 5s ease-out infinite; }
  .mouse:before, .mouse:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto; }
  .mouse:before {
    width: 30px;
    height: 60px;
    background-color:#1d2d4c;
    border-radius: 10px;}
  .mouse:after {
    background-color: #fff;
    width: 3px;
    height: 10px;
    border-radius: 100%;
    -webkit-animation: trackBallSlide 5s linear infinite;
    animation: trackBallSlide 5s linear infinite; }

@-webkit-keyframes colorSlide {
  0% {
    background-position: 0% 100%; }
  20% {
    background-position: 0% 0%; }
  21% {
    background-color: #3863A7; }
  29.99% {
    background-color: #000;
    background-position: 0% 0%; }
  30% {
    background-color: #3863A7;
    background-position: 0% 100%; }
  50% {
    background-position: 0% 0%; }
  51% {
    background-color: #3863A7; }
  59% {
    background-color: #000;
    background-position: 0% 0%; }
  60% {
    background-color: #3863A7;
    background-position: 0% 100%; }
  80% {
    background-position: 0% 0%; }
  81% {
    background-color: #3863A7; }
  90%, 100% {
    background-color: #000; } }

@keyframes colorSlide {
  0% {
    background-position: 0% 100%; }
  20% {
    background-position: 0% 0%; }
  21% {
    background-color: #3863A7; }
  29.99% {
    background-color: #000;
    background-position: 0% 0%; }
  30% {
    background-color: #3863A7;
    background-position: 0% 100%; }
  50% {
    background-position: 0% 0%; }
  51% {
    background-color: #3863A7; }
  59% {
    background-color: #000;
    background-position: 0% 0%; }
  60% {
    background-color: #3863A7;
    background-position: 0% 100%; }
  80% {
    background-position: 0% 0%; }
  81% {
    background-color: #3863A7; }
  90%, 100% {
    background-color: #000; } }

@-webkit-keyframes trackBallSlide {
  0% {
    opacity: 1;
    -webkit-transform: scale(1) translateY(-20px);
    transform: scale(1) translateY(-20px); }
  6% {
    opacity: 1;
    -webkit-transform: scale(0.9) translateY(5px);
    transform: scale(0.9) translateY(5px); }
  14% {
    opacity: 0;
    -webkit-transform: scale(0.4) translateY(40px);
    transform: scale(0.4) translateY(40px); }
  15%, 19% {
    opacity: 0;
    -webkit-transform: scale(0.4) translateY(-20px);
    transform: scale(0.4) translateY(-20px); }
  28%, 29.99% {
    opacity: 1;
    -webkit-transform: scale(1) translateY(-20px);
    transform: scale(1) translateY(-20px); }
  30% {
    opacity: 1;
    -webkit-transform: scale(1) translateY(-20px);
    transform: scale(1) translateY(-20px); }
  36% {
    opacity: 1;
    -webkit-transform: scale(0.9) translateY(5px);
    transform: scale(0.9) translateY(5px); }
  44% {
    opacity: 0;
    -webkit-transform: scale(0.4) translateY(40px);
    transform: scale(0.4) translateY(40px); }
  45%, 49% {
    opacity: 0;
    -webkit-transform: scale(0.4) translateY(-20px);
    transform: scale(0.4) translateY(-20px); }
  58%, 59.99% {
    opacity: 1;
    -webkit-transform: scale(1) translateY(-20px);
    transform: scale(1) translateY(-20px); }
  60% {
    opacity: 1;
    -webkit-transform: scale(1) translateY(-20px);
    transform: scale(1) translateY(-20px); }
  66% {
    opacity: 1;
    -webkit-transform: scale(0.9) translateY(5px);
    transform: scale(0.9) translateY(5px); }
  74% {
    opacity: 0;
    -webkit-transform: scale(0.4) translateY(40px);
    transform: scale(0.4) translateY(40px); }
  75%, 79% {
    opacity: 0;
    -webkit-transform: scale(0.4) translateY(-20px);
    transform: scale(0.4) translateY(-20px); }
  88%, 100% {
    opacity: 1;
    -webkit-transform: scale(1) translateY(-20px);
    transform: scale(1) translateY(-20px); } }

@keyframes trackBallSlide {
  0% {
    opacity: 1;
    -webkit-transform: scale(1) translateY(-20px);
    transform: scale(1) translateY(-20px); }
  6% {
    opacity: 1;
    -webkit-transform: scale(0.9) translateY(5px);
    transform: scale(0.9) translateY(5px); }
  14% {
    opacity: 0;
    -webkit-transform: scale(0.4) translateY(40px);
    transform: scale(0.4) translateY(40px); }
  15%, 19% {
    opacity: 0;
    -webkit-transform: scale(0.4) translateY(-20px);
    transform: scale(0.4) translateY(-20px); }
  28%, 29.99% {
    opacity: 1;
    -webkit-transform: scale(1) translateY(-20px);
    transform: scale(1) translateY(-20px); }
  30% {
    opacity: 1;
    -webkit-transform: scale(1) translateY(-20px);
    transform: scale(1) translateY(-20px); }
  36% {
    opacity: 1;
    -webkit-transform: scale(0.9) translateY(5px);
    transform: scale(0.9) translateY(5px); }
  44% {
    opacity: 0;
    -webkit-transform: scale(0.4) translateY(40px);
    transform: scale(0.4) translateY(40px); }
  45%, 49% {
    opacity: 0;
    -webkit-transform: scale(0.4) translateY(-20px);
    transform: scale(0.4) translateY(-20px); }
  58%, 59.99% {
    opacity: 1;
    -webkit-transform: scale(1) translateY(-20px);
    transform: scale(1) translateY(-20px); }
  60% {
    opacity: 1;
    -webkit-transform: scale(1) translateY(-20px);
    transform: scale(1) translateY(-20px); }
  66% {
    opacity: 1;
    -webkit-transform: scale(0.9) translateY(5px);
    transform: scale(0.9) translateY(5px); }
  74% {
    opacity: 0;
    -webkit-transform: scale(0.4) translateY(40px);
    transform: scale(0.4) translateY(40px); }
  75%, 79% {
    opacity: 0;
    -webkit-transform: scale(0.4) translateY(-20px);
    transform: scale(0.4) translateY(-20px); }
  88%, 100% {
    opacity: 1;
    -webkit-transform: scale(1) translateY(-20px);
    transform: scale(1) translateY(-20px); } }

@-webkit-keyframes nudgeMouse {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  20% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px); }
  30% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  50% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px); }
  60% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  80% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px); }
  90% {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@keyframes nudgeMouse {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  20% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px); }
  30% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  50% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px); }
  60% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  80% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px); }
  90% {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@-webkit-keyframes nudgeText {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  20% {
    -webkit-transform: translateY(2px);
    transform: translateY(2px); }
  30% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  50% {
    -webkit-transform: translateY(2px);
    transform: translateY(2px); }
  60% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  80% {
    -webkit-transform: translateY(2px);
    transform: translateY(2px); }
  90% {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@keyframes nudgeText {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  20% {
    -webkit-transform: translateY(2px);
    transform: translateY(2px); }
  30% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  50% {
    -webkit-transform: translateY(2px);
    transform: translateY(2px); }
  60% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  80% {
    -webkit-transform: translateY(2px);
    transform: translateY(2px); }
  90% {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@-webkit-keyframes colorText {
  21% {
    color: #3863A7; }
  30% {
    color: #000; }
  51% {
    color: #3863A7; }
  60% {
    color: #000; }
  81% {
    color: #3863A7; }
  90% {
    color: #000; } }

@keyframes colorText {
  21% {
    color: #3863A7; }
  30% {
    color: #000; }
  51% {
    color: #3863A7; }
  60% {
    color: #000; }
  81% {
    color: #3863A7; }
  90% {
    color: #000; } }