.spin {
    -webkit-animation: out 0.1s;
	animation-fill-mode: forwards; }
.spin:hover {
    -webkit-animation: in 0.1s;
	animation-fill-mode: forwards; }

@-webkit-keyframes in {
    from   { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(90deg);} }

@-webkit-keyframes out {
    0%   { -webkit-transform: rotate(90deg); }
    100% { -webkit-transform: rotate(0deg); } }

img.grayscale {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */ }
img.grayscale:hover {
  filter: none;
  -webkit-filter: grayscale(0%); }

.fade-in-down {
  animation: fadeInDown ease 1s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: fadeInDown ease 1s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
  -moz-animation: fadeInDown ease 1s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: fadeInDown ease 1s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: fadeInDown ease 1s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards; /*IE 10+*/ }

@keyframes fadeInDown {
  0% {
    opacity:0;
    transform:  translate(0px,-100px); }
  100% {
    opacity:1;
    transform:  translate(0px,0px); } }
@-moz-keyframes fadeInDown{
  0% {
    opacity:0;
    -moz-transform:  translate(0px,-100px); }
  100% {
    opacity:1;
    -moz-transform:  translate(0px,0px); } }
@-webkit-keyframes fadeInDown {
  0% {
    opacity:0;
    -webkit-transform:  translate(0px,-100px); }
  100% {
    opacity:1;
    -webkit-transform:  translate(0px,0px); } }
@-o-keyframes fadeInDown {
  0% {
    opacity:0;
    -o-transform:  translate(0px,-100px); }
  100% {
    opacity:1;
    -o-transform:  translate(0px,0px); } }
@-ms-keyframes fadeInDown {
  0% {
    opacity:0;
    -ms-transform:  translate(0px,-100px); }
  100% {
    opacity:1;
    -ms-transform:  translate(0px,0px); } }

@keyframes dash { from { stroke-dashoffset: 6221.1796875; opacity: 1; } to { stroke-dashoffset: 0; opacity: 0;} }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; z-index: -1; } }


.fade-in-slide-up {
  height: 1px;
  opacity: 0;
  transition: all .75s ease;
}

.fade-in-slide-up.show {
  opacity: 1;
  height: 150px;
  width: 500px;
}