/*
   Animation example, for spinners
*/
.animate-spin {
  -moz-animation: spin 2s infinite linear;
  -o-animation: spin 2s infinite linear;
  -webkit-animation: spin 2s infinite linear;
  animation: spin 2s infinite linear;
  display: inline-block;
}
@-moz-keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -moz-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@-webkit-keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -moz-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@-o-keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -moz-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@-ms-keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -moz-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -moz-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

/* =============================================================================================================================== */
.animate-blink-once {
	animation-name: animate-blink-once;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
}
@keyframes animate-blink-once {
    0%   {background-color: #E5E5E5;}
    50%  {background-color: #B582BF;}
    100% {background-color: #E5E5E5;}
}

/* =============================================================================================================================== */
.animate-blink {
	animation-name: animate-blink;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
}
@keyframes animate-blink {
    0%   {background-color: #F72F2C;}
    50%  {background-color: #815150;}
    100% {background-color: #F72F2C;}
    /*0%   {background-color: red; left:0px; top:0px;}
    25%  {background-color: yellow; left:200px; top:0px;}
    50%  {background-color: blue; left:200px; top:200px;}
    75%  {background-color: green; left:0px; top:200px;}
    100% {background-color: red; left:0px; top:0px;}*/
}

/* =============================================================================================================================== */
.animate-blink-gris {
	animation-name: animate-blink-gris;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}
@keyframes animate-blink-gris {
    0%   {background-color: #FFFFFF;}
    50%  {background-color: #DBDBDB;}
    100% {background-color: #FFFFFF;}
    /*0%   {background-color: red; left:0px; top:0px;}
    25%  {background-color: yellow; left:200px; top:0px;}
    50%  {background-color: blue; left:200px; top:200px;}
    75%  {background-color: green; left:0px; top:200px;}
    100% {background-color: red; left:0px; top:0px;}*/
}

/* =============================================================================================================================== */
.animate-blink-verde {
	animation-name: animate-blink-verde;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}
@keyframes animate-blink-verde {
    0%   {background-color: #91C69F;}
    50%  {background-color: #35774F;}
    100% {background-color: #91C69F;}
}

/* =============================================================================================================================== */
.animate-blink-red {
	animation-name: animate-blink-red;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}
@keyframes animate-blink-red {
    0%   {color: #E0B1B6;}
    50%  {color: #FF0000;}
    100% {color: #E0B1B6;}
}

/* =============================================================================================================================== */
.animate-size {
	animation-name: animate-size;
    animation-duration: 0.7s;
    animation-iteration-count: infinite;
}
@keyframes animate-size {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* =============================================================================================================================== */
.animate-1 {
	animation-name: animate-1;
    animation-duration: 0.7s;
    animation-iteration-count: infinite;
}
@keyframes animate-1 {
    0%   { transform: scale(1); color: #E0B1B6; }
    50%  { transform: scale(1.3); color: #FF0000; }
    100% { transform: scale(1); color: #E0B1B6; }
}

/* =============================================================================================================================== */
.animate-rotate-once {
    -webkit-animation:spin 1s linear;
    -webkit-animation-iteration-count: 1;
    -moz-animation:spin 1s linear;
    -moz-animation-iteration-count: 1;
    animation:spin 1s linear;
    animation-iteration-count: 1;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

/* =============================================================================================================================== */
.animate-180-once {
    -webkit-animation:x-180-once 0.5s linear;
    -webkit-animation-iteration-count: 1;
    -moz-animation:x-180-once 0.5s linear;
    -moz-animation-iteration-count: 1;
    animation:x-180-once 0.5s linear;
    animation-iteration-count: 1;
}
@-moz-keyframes x-180-once { 100% { -moz-transform: rotate(180deg); } }
@-webkit-keyframes x-180-once { 100% { -webkit-transform: rotate(180deg); } }
@keyframes x-180-once { 100% { -webkit-transform: rotate(180deg); transform:rotate(180deg); } }
/* =============================================================================================================================== */

/* =============================================================================================================================== */
.animate-180-once-back {
    -webkit-animation:z-180-once 0.5s linear;
    -webkit-animation-iteration-count: 1;
    -moz-animation:z-180-once 0.5s linear;
    -moz-animation-iteration-count: 1;
    animation:z-180-once 0.5s linear;
    animation-iteration-count: 1;
}
@-moz-keyframes z-180-once { 100% { -moz-transform: rotate(-180deg); } }
@-webkit-keyframes z-180-once { 100% { -webkit-transform: rotate(-180deg); } }
@keyframes z-180-once { 100% { -webkit-transform: rotate(-180deg); transform:rotate(-180deg); } }
/* =============================================================================================================================== */


.grow { transition: all .2s ease-in-out; }
.grow:hover { transform: scale(1.1); }

.cnv_grow { transition: all .4s ease-in-out; }
.css_bc_green { background-color: #339335; }
.css_bc_violeta { background-color: #D9A8ED; }

/* =============================================================================================================================== */
.animate_fade_in {
    -webkit-animation:fade_in 1.5s;
    -moz-animation:fade_in 1.5s;
    animation:fade_in 1.5s;
}
@keyframes fade_in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fade_in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fade_in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fade_in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* =============================================================================================================================== */
.animate_right{position:relative;-webkit-animation:animateright 1.5s;animation:animateright 1.5s}
@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}

.animate_pulso_1 {
    animation-name: kf_pulso_1;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
}
@keyframes kf_pulso_1 {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.1); }
    100% { transform: scale(1); }
}