@charset "utf-8";
/* CSS Document */

/*ANIMACIONES*/
@keyframes shake {
  0% {transform: rotate(15deg);}
  25% {transform: rotate(-10deg)}
  50% {transform: rotate(5deg)}
  100% {transform: rotate(0deg)}
}
@keyframes shake2 {
  0% {transform: rotate(5deg)}
  25% {transform: rotate(-2deg)}
  50% {transform: rotate(1deg)}
  100% {transform: rotate(0deg)}
}
.shake{animation: shake 1s ease-in-out alternate forwards; }

@keyframes rotate45 {
  0% {transform: rotate(0deg); top:2px;}
  100% {transform: rotate(45deg);top:8px;}
}
@keyframes rotate-45 { 0% {transform: rotate(0deg);top:14px;} 100% {transform: rotate(-45deg);top:8px;}}
.rotate45{animation: rotate45 .2s ease-in-out alternate forwards; }.rotate-45{animation: rotate-45 .2s ease-in-out alternate forwards; }


@keyframes rotate45r {0% {transform: rotate(45deg);top:8px;} 100% {transform: rotate(0deg); top:2px}}
@keyframes rotate-45r {0% {transform: rotate(-45deg);top:8px;}100% {transform: rotate(0deg);top:14px;}}
.rotate45r{animation: rotate45r .2s ease-in-out alternate forwards; }.rotate-45r{animation: rotate-45r .2s ease-in-out alternate forwards; }

@keyframes contactorotate{0%{transform: rotateX(-80deg);opacity: 0;}100%{transform: rotateX(0deg); opacity: 1;}}
.contactorotate{animation: contactorotate 1s .4s cubic-bezier(.17,.67,.21,.98) alternate forwards;}
@keyframes contactorotatereverse{0%{transform: rotateX(0deg);opacity: 1;}100%{transform: rotateX(-80deg); opacity: 0;}}
.contactorotatereverse{animation: contactorotatereverse .4s cubic-bezier(.17,.67,.21,.98) alternate forwards;}

@keyframes floating{0% {top: 0px; }100% {top: -40px;}}
@keyframes floating-translate{0% {transform: translateY(0) scaleY(.87); }100% {transform: translateY(-20px) scaleY(.87);}}
@keyframes floating-up {0% {top: 0px;}100% {top: -20px;}}
@keyframes floating-down {0% {top: 0px;}100% {top: 50px;}}