@import url("http://fonts.cdnfonts.com/css/typo-grotesk-rounded");
* {
  font-family: "Typo Grotesk Rounded", sans-serif;
  transition: width 1s ease-in-out, left 1.5s ease-in-out;
}

.wrap-content {
  width: 99%;
  margin-top: 10%;
}

.wrapper-walking {
  display: flex;
  justify-content: center;
  align-items: center;
}

.human img {
  image-rendering: pixelated;
  width: 250px;
  height: auto;
  -webkit-animation: rotate-center 1s ease-in-out infinite alternate;
  animation: rotate-center 1s ease-in-out infinite alternate;
}

@-webkit-keyframes rotate-center {
  0% {
    -webkit-transform: rotate(-30deg);
    transform: rotate(-30deg);
  }
  100% {
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
  }
}
@keyframes rotate-center {
  0% {
    -webkit-transform: rotate(-30deg);
    transform: rotate(-30deg);
  }
  100% {
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
  }
}
.dog img {
  image-rendering: pixelated;
  margin-top: 50%;
  margin-left: 40%;
  width: 200px;
  height: auto;
  -webkit-animation: slide-top 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite alternate both;
  animation: slide-top 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite alternate both;
}

@-webkit-keyframes slide-top {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
}
@keyframes slide-top {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
}
.bg-item {
  position: absolute;
  top: 45%;
  width: 100px;
  height: auto;
  z-index: 10;
  -webkit-animation: scroll 5s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite both;
  animation: scroll 5s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite both, move 10s infinite;
}

@-webkit-keyframes scroll {
  0% {
    -webkit-transform: rotate(-20deg);
    transform: rotate(-20deg);
  }
  100% {
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
  }
}
@-webkit-keyframes move {
  from {
    left: 90%;
  }
  to {
    left: -60%;
  }
}
@keyframes scroll {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
#botonpull {
  height: 60px;
  color: #fff;
  cursor: pointer;
  font-size: 20px;
  width: 220px;
  display: block;
  text-transform: uppercase;
  border: 0 solid;
  -webkit-transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
  border-radius: 10px;
  background: linear-gradient(127deg, #f14b4b, #f14b74, #f04bff, #8f49df, #4956df, #499cdf, #49dfd8);
  background-size: 400% 400%;
  animation: gradient 20s ease infinite alternate;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
#botonpull:hover {
  animation: shake 0.5s infinite;
}

@keyframes shake {
  0% {
    transform: translate(1px, 1px) rotate(0deg);
  }
  10% {
    transform: translate(-1px, -2px) rotate(-1deg);
  }
  20% {
    transform: translate(-2px, 0px) rotate(1deg);
  }
  30% {
    transform: translate(3px, 1px) rotate(0deg);
  }
  40% {
    transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    transform: translate(3px, 1px) rotate(-1deg);
  }
  80% {
    transform: translate(-1px, -1px) rotate(1deg);
  }
  90% {
    transform: translate(1px, 2px) rotate(0deg);
  }
  100% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
}
#wrapper-button {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 80px;
  align-items: center;
}

#contador {
  margin-top: 10px;
  width: 90px;
  font-size: 20px;
  text-align: center;
}

#btn-coleccion {
  height: 60px;
  cursor: pointer;
  border-radius: 10px;
  border: 0 solid;
  background-color: #353535;
}

#btn-coleccion:hover {
  background-color: black;
}

#instrucciones {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-left: 10%;
  margin-right: 10%;
}

@media screen and (max-width: 1270px) {
  .bg-item {
    top: 40%;
  }
}
@media screen and (max-width: 1170px) {
  .bg-item {
    top: 42%;
  }
}
@media screen and (max-width: 1000px) {
  .bg-item {
    top: 38%;
  }
}
@media screen and (max-width: 930px) {
  .bg-item {
    top: 35%;
  }
}
@media screen and (max-width: 850px) {
  .bg-item {
    top: 32%;
  }
}
@media screen and (max-width: 690px) {
  .human img {
    width: 200px;
  }

  .dog img {
    width: 160px;
  }

  .bg-item {
    top: 29%;
    width: 95px;
    animation: move 5s infinite;
  }

  #wrapper-button {
    flex-direction: column;
  }

  #btn-coleccion {
    width: 55px;
  }

  #btn-coleccion svg {
    width: 45px;
  }
}
@media screen and (max-width: 600px) {
  .human img {
    width: 180px;
  }

  .dog img {
    width: 140px;
  }

  .bg-item {
    top: 30%;
    width: 90px;
    animation: move 5s infinite;
  }

  #wrapper-button {
    flex-direction: column;
  }

  #btn-coleccion {
    width: 55px;
  }

  #btn-coleccion svg {
    width: 45px;
  }
}
@media screen and (max-width: 570px) {
  .human img {
    width: 160px;
  }

  .dog img {
    width: 120px;
  }

  .bg-item {
    top: 26%;
    width: 80px;
    animation: move 5s infinite;
  }

  #wrapper-button {
    flex-direction: column;
  }

  #btn-coleccion {
    width: 55px;
  }

  #btn-coleccion svg {
    width: 45px;
  }
}
@media screen and (max-width: 500px) {
  .human img {
    width: 140px;
  }

  .dog img {
    width: 100px;
  }

  .bg-item {
    top: 22%;
    width: 70px;
    animation: move 5s infinite;
  }

  #wrapper-button {
    flex-direction: column;
  }

  #btn-coleccion {
    width: 55px;
  }

  #btn-coleccion svg {
    width: 45px;
  }
}
@media screen and (max-width: 430px) {
  .human img {
    width: 120px;
  }

  .dog img {
    width: 80px;
    margin-top: 110px;
  }

  .bg-item {
    top: 18%;
    width: 60px;
    animation: move 5s infinite;
  }

  #wrapper-button {
    flex-direction: column;
  }

  #btn-coleccion {
    width: 55px;
  }

  #btn-coleccion svg {
    width: 45px;
  }
}
@media screen and (max-width: 361px) {
  .bg-item {
    top: 18%;
    width: 59px;
  }
}
@media screen and (max-width: 321px) {
  .human img {
    width: 90px;
  }

  .dog img {
    width: 60px;
  }

  .bg-item {
    top: 16%;
    width: 50px;
    animation: move 5s infinite;
  }

  #wrapper-button {
    flex-direction: column;
  }

  #btn-coleccion {
    width: 55px;
  }

  #btn-coleccion svg {
    width: 45px;
  }
}
@media screen and (max-width: 240px) {
  .human img {
    width: 75px;
  }

  .dog img {
    width: 65px;
  }

  .bg-item {
    top: 10%;
    width: 43px;
    animation: move 5s infinite;
  }

  #wrapper-button {
    margin-top: 60px;
  }

  #botonpull {
    font-size: 15px;
    height: 40px;
    width: 160px;
  }

  #contador {
    font-size: 15px;
  }

  #btn-coleccion {
    width: 45px;
  }

  #btn-coleccion svg {
    width: 35px;
  }
}
@media screen and (max-width: 185px) {
  .human img {
    width: 50px;
  }

  .dog img {
    width: 40px;
  }

  .bg-item {
    top: 7%;
    width: 30px;
  }

  #botonpull {
    font-size: 12px;
    height: 35px;
    width: 120px;
    animation: move 5s infinite;
  }

  #btn-coleccion {
    width: 40px;
  }

  #btn-coleccion svg {
    width: 30px;
  }
}

/*# sourceMappingURL=indexOut.css.map */