/*
   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-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); }
}

.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; }