/*
Zuzu Viral Reaction CSS
*/

/*!
 * animate.css -http://daneden.me/animate
 * Version - 3.5.1
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2016 Daniel Eden
 */

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.flipOutX,
.animated.flipOutY,
.animated.bounceIn,
.animated.bounceOut {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}


@-webkit-keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%, 20% {
    -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%, 20% {
    -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

#zuzu_viral_reactions {
  text-align: center;
  margin: 20px 0;
  padding: 15px 0 10px 0;
}

.zvr-reaction-title {
 font-family: 'Open Sans', sans-serif;
 text-align: center;
 display: block;
 padding-bottom: 10px;
 font-size: 26px;
 line-height: 1.35em;
 font-weight: 700;
 color: #1f1f1f;
}

#zuzu_viral_reactions ul {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
  background: #fff;
  display: inline-block;
  padding: 10px;
}

#zuzu_viral_reactions li {
  position: relative;
  display: inline-block;
  margin: 4px;
  padding: 0 16px;
}

#zuzu_viral_reactions li a span {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: #1f1f1f;
  text-align: center;
  display: block;
  margin: 0 0 30px 0;
}

#zuzu_viral_reactions li a {
  outline: 0;
  text-decoration: none;
  border: 0;
  box-shadow: none;
  text-shadow: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

#zuzu_viral_reactions li:hover {
  cursor: pointer;

}
#zuzu_viral_reactions li:hover img {
  -webkit-animation-name: tada;
  animation-name: tada;
}

#zuzu_viral_reactions li.clicked {

}

#zuzu_viral_reactions li:active {
  position: relative;
  top: 2px;
}

#zuzu_viral_reactions em {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  position: absolute;
  bottom: 0;
  margin-left: -35px;
  left: 50%;
  width: 70px;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  line-height: 12px;
  font-style: normal;
  text-align: center;
  padding: 8px;
  text-transform: uppercase;
  background: #FBFBFB;
  color: #1f1f1f;
  border: 1px solid #F0F0F0;
}

#zuzu_viral_reactions li:hover em {

}

#zuzu_viral_reactions li img {
  height: 40px;
  vertical-align: middle;
  font-size: 1em;
  line-height: inherit;
  display: inline;
  margin: 0;
}

#zuzu_viral_reactions_shares {
  max-height: 0;
  text-align: center;
  overflow: hidden;
}

#zuzu_viral_reactions_shares.showshares {
  margin-top: 30px;
  max-height: 500px;
}

#zuzu_viral_reactions_shares a {
  display: inline-block;
  margin: 4px 2px;
  background: #3b5998;
  color: #fff;
  padding: 0 10px 1px;
  line-height: 44px;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  text-decoration: none;
  font-weight: normal;
  text-transform: none;
}


#zuzu_viral_reactions_shares img {
  height: 32px;
  vertical-align: middle;
  margin: 0;
  padding: 0;
  margin-right: 5px;
  display: inline;
}