// animation rotate spinner
// ====================
@mixin animationRotateSpinner() {
  -webkit-animation: rotate 1.2s infinite linear;
  -ms-animation: rotate 1.2s infinite linear;
  -o-animation: rotate 1.2s infinite linear;
  -moz-animation: rotate 1.2s infinite linear;
  animation: rotate 1.2s infinite linear;
}

@mixin fadeIn() {
  -webkit-animation: fadeIn .3s ease-in-out both;
  -ms-animation: fadeIn .3s ease-in-out both;
  -o-animation: fadeIn .3s ease-in-out both;
  -moz-animation: fadeIn .3s ease-in-out both;
  animation: fadeIn .3s ease-in-out both;
}

@mixin fadeOut() {
  -webkit-animation: fadeOut .3s ease-in-out both;
  -ms-animation: fadeOut .3s ease-in-out both;
  -o-animation: fadeOut .3s ease-in-out both;
  -moz-animation: fadeOut .3s ease-in-out both;
  animation: fadeOut .3s ease-in-out both;
}

@-webkit-keyframes rotate {
  from {
      -moz-transform: rotateZ(0deg);  /* FF3.5/3.6 */
      -o-transform: rotateZ(0deg);  /* Opera 10.5 */
      -webkit-transform: rotateZ(0deg);  /* Saf3.1+ */
      transform: rotateZ(0deg);
  }
  to {
      -moz-transform: rotateZ(360deg);  /* FF3.5/3.6 */
      -o-transform: rotateZ(360deg);  /* Opera 10.5 */
      -webkit-transform: rotateZ(360deg);  /* Saf3.1+ */
      transform: rotateZ(360deg);
  }
}

@-ms-keyframes rotate {
  0% {
      -ms-transform: rotateZ(0deg);
  }
  100% {
      -ms-transform: rotateZ(360deg);
  }
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@-ms-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@-webkit-keyframes fadeOut {
  from {opacity: 0;}
  to {opacity: 1;}
}

@-ms-keyframes fadeOut {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeOut {
  from {opacity: 0;}
  to {opacity: 1;}
}