/* Hover block
========================================================== */

/* Example html for animaton [animaton-tm-1 to animaton-tm-9]

<div class="animaton-tm-1">
	<div class="item">
		... main
	</div>
	<div class="mask">
		... hover
		<a href="#" class="link"></a>
	</div>
</div>

*/

/* animaton 1 */

.animaton-tm-1 { position: relative; }

.animaton-tm-1 .mask {
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: translateY(400px);
  -moz-transform: translateY(400px);
  -o-transform: translateY(400px);
  -ms-transform: translateY(400px);
}

.animaton-tm-1 .img,
.animaton-tm-1 .mask {
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.animaton-tm-1:hover .mask {
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -o-transform: translateY(0);
  -ms-transform: translateY(0);
}

.animaton-tm-1:hover .img,
.animaton-tm-1:hover .mask {
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

/* animaton 2 */

.animaton-tm-2 {
  position: relative;
  -webkit-transition: all 0.4s ease-in-out 0.2s;
  -moz-transition: all 0.4s ease-in-out 0.2s;
  -o-transition: all 0.4s ease-in-out 0.2s;
  -ms-transition: all 0.4s ease-in-out 0.2s;
  transition: all 0.4s ease-in-out 0.2s;
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
}

.animaton-tm-2 .mask {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
  -webkit-transform: scale(0) rotate(-180deg);
  -moz-transform: scale(0) rotate(-180deg);
  -o-transform: scale(0) rotate(-180deg);
  -ms-transform: scale(0) rotate(-180deg);
  transform: scale(0) rotate(-180deg);
  -webkit-transition: all 0.4s ease-in;
  -moz-transition: all 0.4s ease-in;
  -o-transition: all 0.4s ease-in;
  -ms-transition: all 0.4s ease-in;
  transition: all 0.4s ease-in;
}

.animaton-tm-2:hover .mask {
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
  -webkit-transform: scale(1) rotate(0deg);
  -moz-transform: scale(1) rotate(0deg);
  -o-transform: scale(1) rotate(0deg);
  -ms-transform: scale(1) rotate(0deg);
  transform: scale(1) rotate(0deg);
  -webkit-transition-delay: 0.2s;
  -moz-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  -ms-transition-delay: 0.2s;
  transition-delay: 0.2s;
}


/* animaton 3 */
.animaton-tm-3 { position: relative; }
.animaton-tm-3 .mask {
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}

.animaton-tm-3:hover .mask {
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
}

/* animaton 4 */
.animaton-tm-4 { position: relative; }
.animaton-tm-4 .mask {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
  -webkit-transform: translate(265px, 145px) rotate(45deg);
  -moz-transform: translate(265px, 145px) rotate(45deg);
  -o-transform: translate(265px, 145px) rotate(45deg);
  -ms-transform: translate(265px, 145px) rotate(45deg);
  transform: translate(265px, 145px) rotate(45deg);
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.animaton-tm-4:hover .mask {
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
  -webkit-transform: translate(-80px, -125px) rotate(45deg);
  -moz-transform: translate(-80px, -125px) rotate(45deg);
  -o-transform: translate(-80px, -125px) rotate(45deg);
  -ms-transform: translate(-80px, -125px) rotate(45deg);
  transform: translate(-0px, -0px) rotate(0deg);
}

/* animaton 5 */
.animaton-tm-5 { position: relative; }

.animaton-tm-5 .mask {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
  -webkit-transform: translate(460px, -100px) rotate(180deg);
  -moz-transform: translate(460px, -100px) rotate(180deg);
  -o-transform: translate(460px, -100px) rotate(180deg);
  -ms-transform: translate(460px, -100px) rotate(180deg);
  transform: translate(460px, -100px) rotate(180deg);
  -webkit-transition: all 0.2s 0.4s ease-in-out;
  -moz-transition: all 0.2s 0.4s ease-in-out;
  -o-transition: all 0.2s 0.4s ease-in-out;
  -ms-transition: all 0.2s 0.4s ease-in-out;
  transition: all 0.2s 0.4s ease-in-out;
}

.animaton-tm-5:hover .mask {
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
  -webkit-transition-delay: 0s;
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  -ms-transition-delay: 0s;
  transition-delay: 0s;
  -webkit-transform: translate(0px, 0px);
  -moz-transform: translate(0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate(0px, 0px);
}

/* animaton 6 */
.animaton-tm-6 { position: relative; }
.animaton-tm-6 .mask {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: translateX(-400px);
  -moz-transform: translateX(-400px);
  -o-transform: translateX(-400px);
  -ms-transform: translateX(-400px);
  transform: translateX(-400px);
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  transition: all 0.2s 0.4s ease-in-out;
}
.animaton-tm-6:hover .mask {
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
  -webkit-transform: translateX(0px);
  -moz-transform: translateX(0px);
  -o-transform: translateX(0px);
  -ms-transform: translateX(0px);
  transform: translateX(0px);
}

/* animaton 7 */
.animaton-tm-7 { position: relative; }
.animaton-tm-7 .mask {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
  -webkit-transition: all 0.3s ease-in 0.4s;
  -moz-transition: all 0.3s ease-in 0.4s;
  -o-transition: all 0.3s ease-in 0.4s;
  -ms-transition: all 0.3s ease-in 0.4s;
  transition: all 0.3s ease-in 0.4s;
}
.animaton-tm-7:hover .mask {
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
  -webkit-transition-delay: 0s;
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  -ms-transition-delay: 0s;
  transition-delay: 0s;
}

/* animaton 8 */
.animaton-tm-8 { position: relative; }
.animaton-tm-8 .mask {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: rotate(0deg) scale(1);
  -moz-transform: rotate(0deg) scale(1);
  -o-transform: rotate(0deg) scale(1);
  -ms-transform: rotate(0deg) scale(1);
  transform: rotate(0deg) scale(1);
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.animaton-tm-8 .mask .center-link {
  -webkit-transform: translateY(-400px) !important;
  -moz-transform: translateY(-400px) !important;
  -o-transform: translateY(-400px) !important;
  -ms-transform: translateY(-400px) !important;
  transform: translateY(-400px) !important;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.animaton-tm-8:hover .mask {
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
  -webkit-transform: translateY(0px) rotate(0deg);
  -moz-transform: translateY(0px) rotate(0deg);
  -o-transform: translateY(0px) rotate(0deg);
  -ms-transform: translateY(0px) rotate(0deg);
  transform: translateY(0px) rotate(0deg);
  -webkit-transition-delay: 0.4s;
  -moz-transition-delay: 0.4s;
  -o-transition-delay: 0.4s;
  -ms-transition-delay: 0.4s;
  transition-delay: 0.4s;
}
.animaton-tm-8:hover .mask .center-link {
  -webkit-transform: translateX(-50%, -50%) !important;
  -moz-transform: translateX(-50%, -50%) !important;
  -o-transform: translateX(-50%, -50%) !important;
  -ms-transform: translateX(-50%, -50%) !important;
  transform: translate(-50%, -50%) !important;
  -webkit-transition-delay: 0.7s;
  -moz-transition-delay: 0.7s;
  -o-transition-delay: 0.7s;
  -ms-transition-delay: 0.7s;
  transition-delay: 0.7s;
}

/* animaton 9 */
.animaton-tm-9 { position: relative; }
.animaton-tm-9 .mask {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
  -webkit-transition: all 0.3s ease-out 0.5s;
  -moz-transition: all 0.3s ease-out 0.5s;
  -o-transition: all 0.3s ease-out 0.5s;
  -ms-transition: all 0.3s ease-out 0.5s;
  transition: all 0.3s ease-out 0.5s;
}

.animaton-tm-9:hover .mask {
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
  -webkit-transition-delay: 0s;
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  -ms-transition-delay: 0s;
  transition-delay: 0s;
  -webkit-animation: bounceY 0.9s linear;
  -moz-animation: bounceY 0.9s linear;
  -ms-animation: bounceY 0.9s linear;
  animation: bounceY 0.9s linear;
}

@keyframes bounceY {
  0% { transform: translateY(-205px);}
  40% { transform: translateY(-100px);}
  65% { transform: translateY(-52px);}
  82% { transform: translateY(-25px);}
  92% { transform: translateY(-12px);}
  55%, 75%, 87%, 97%, 100% { transform: translateY(0px);}
}
@-moz-keyframes bounceY {
  0% { -moz-transform: translateY(-205px);}
  40% { -moz-transform: translateY(-100px);}
  65% { -moz-transform: translateY(-52px);}
  82% { -moz-transform: translateY(-25px);}
  92% { -moz-transform: translateY(-12px);}
  55%, 75%, 87%, 97%, 100% { -moz-transform: translateY(0px);}
}
@-webkit-keyframes bounceY {
  0% { -webkit-transform: translateY(-205px);}
  40% { -webkit-transform: translateY(-100px);}
  65% { -webkit-transform: translateY(-52px);}
  82% { -webkit-transform: translateY(-25px);}
  92% { -webkit-transform: translateY(-12px);}
  55%, 75%, 87%, 97%, 100% { -webkit-transform: translateY(0px);}
}


/* hover circle
========================================================== */
@-webkit-keyframes circle {
  0% {-webkit-transform: rotateY(0deg);
    -webkit-animation-timing-function: ease-in;
  }
  50% {-webkit-transform: rotateY(180deg);
    -webkit-animation-timing-function: ease-out;
  }
  100% {-webkit-transform: rotateY(0deg);
    -webkit-animation-timing-function: ease-in;
  }
}

@-moz-keyframes circle {
  0% {-moz-transform: rotateY(0deg);
  }
  50% {-moz-transform: rotateY(180deg);
    -moz-animation-timing-function: ease-out;
  }
  100% {-moz-transform: rotateY(0deg);
    -moz-animation-timing-function: ease-in;
  }
}

@-ms-keyframes circle {
  0% {-ms-transform: rotateY(0deg);
    -ms-animation-timing-function: ease-in;
  }
  50% {-ms-transform: rotateY(180deg);
    -ms-animation-timing-function: ease-out;
  }
  100% {-ms-transform: rotateY(0deg);
    -ms-animation-timing-function: ease-in;
  }
}

@-o-keyframes circle {
  0% {-o-transform: rotateY(0deg);
    -o-animation-timing-function: ease-in;
  }
  50% {-o-transform: rotateY(180deg);
    -o-animation-timing-function: ease-out;
  }
  100% {-o-transform: rotateY(0deg);
    -o-animation-timing-function: ease-in;
  }
}

@keyframes circle {
  0% {transform: rotateY(0deg);
    animation-timing-function: ease-in;
  }
  50% {transform: rotateY(180deg);
    animation-timing-function: ease-out;
  }
  100% {transform: rotateY(360deg);
    animation-timing-function: ease-in;
  }
}


/* ring
========================================================== */
.ring {
  -webkit-animation: ring 2s ease infinite;
  animation: ring 2s ease infinite;
  transform-origin-x: 50%;
  transform-origin-y: 0;
  transform-origin-z: initial;
}
@-webkit-keyframes ring {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  10% {
    -webkit-transform: scale(0.9) rotate(-8deg);
    transform: scale(0.9) rotate(-8deg);
  }
  20% {
    -webkit-transform: scale(0.9) rotate(8deg);
    transform: scale(0.9) rotate(8deg);
  }
  30% {
    -webkit-transform: scale(0.9) rotate(-8deg);
    transform: scale(0.9) rotate(-8deg);
  }
  40% {
    -webkit-transform: scale(0.9) rotate(8deg);
    transform: scale(0.9) rotate(8deg);
  }
  50% {
    -webkit-transform: scale(0.9) rotate(-8deg);
    transform: scale(0.9) rotate(-8deg);
  }
  60% {
    -webkit-transform: scale(0.9) rotate(-8deg);
    transform: scale(0.9) rotate(-8deg);
  }
  70% {
    -webkit-transform: scale(0.9) rotate(0deg);
    transform: scale(0.9) rotate(0deg);
  }
  80% {
    -webkit-transform: scale(1.3) rotate(-15deg);
    transform: scale(1.3) rotate(-15deg);
  }
  82% {
    -webkit-transform: scale(1.3) rotate(15deg);
    transform: scale(1.3) rotate(15deg);
  }
  84% {
    -webkit-transform: scale(1.3) rotate(-18deg);
    transform: scale(1.3) rotate(-18deg);
  }
  86% {
    -webkit-transform: scale(1.3) rotate(18deg);
    transform: scale(1.3) rotate(18deg);
  }
  88% {
    -webkit-transform: scale(1.3) rotate(-22deg);
    transform: scale(1.3) rotate(-22deg);
  }
  90% {
    -webkit-transform: scale(1.3) rotate(22deg);
    transform: scale(1.3) rotate(22deg);
  }
  92% {
    -webkit-transform: scale(1.3) rotate(-18deg);
    transform: scale(1.3) rotate(-18deg);
  }
  94% {
    -webkit-transform: scale(1.3) rotate(18deg);
    transform: scale(1.3) rotate(18deg);
  }
  96% {
    -webkit-transform: scale(1.3) rotate(-12deg);
    transform: scale(1.3) rotate(-12deg);
  }
  98% {
    -webkit-transform: scale(1.3) rotate(12deg);
    transform: scale(1.3) rotate(12deg);
  }
  100% {
    -webkit-transform: scale(1.3) rotate(0deg);
    transform: scale(1.3) rotate(0deg);
  }
}
@keyframes ring {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  10% {
    -webkit-transform: scale(0.9) rotate(-8deg);
    transform: scale(0.9) rotate(-8deg);
  }
  20% {
    -webkit-transform: scale(0.9) rotate(8deg);
    transform: scale(0.9) rotate(8deg);
  }
  30% {
    -webkit-transform: scale(0.9) rotate(-8deg);
    transform: scale(0.9) rotate(-8deg);
  }
  40% {
    -webkit-transform: scale(0.9) rotate(8deg);
    transform: scale(0.9) rotate(8deg);
  }
  50% {
    -webkit-transform: scale(0.9) rotate(-8deg);
    transform: scale(0.9) rotate(-8deg);
  }
  60% {
    -webkit-transform: scale(0.9) rotate(-8deg);
    transform: scale(0.9) rotate(-8deg);
  }
  70% {
    -webkit-transform: scale(0.9) rotate(0deg);
    transform: scale(0.9) rotate(0deg);
  }
  80% {
    -webkit-transform: scale(1.3) rotate(-15deg);
    transform: scale(1.3) rotate(-15deg);
  }
  82% {
    -webkit-transform: scale(1.3) rotate(15deg);
    transform: scale(1.3) rotate(15deg);
  }
  84% {
    -webkit-transform: scale(1.3) rotate(-18deg);
    transform: scale(1.3) rotate(-18deg);
  }
  86% {
    -webkit-transform: scale(1.3) rotate(18deg);
    transform: scale(1.3) rotate(18deg);
  }
  88% {
    -webkit-transform: scale(1.3) rotate(-22deg);
    transform: scale(1.3) rotate(-22deg);
  }
  90% {
    -webkit-transform: scale(1.3) rotate(22deg);
    transform: scale(1.3) rotate(22deg);
  }
  92% {
    -webkit-transform: scale(1.3) rotate(-18deg);
    transform: scale(1.3) rotate(-18deg);
  }
  94% {
    -webkit-transform: scale(1.3) rotate(18deg);
    transform: scale(1.3) rotate(18deg);
  }
  96% {
    -webkit-transform: scale(1.3) rotate(-12deg);
    transform: scale(1.3) rotate(-12deg);
  }
  98% {
    -webkit-transform: scale(1.3) rotate(12deg);
    transform: scale(1.3) rotate(12deg);
  }
  100% {
    -webkit-transform: scale(1.3) rotate(0deg);
    transform: scale(1.3) rotate(0deg);
  }
}


.toolbar .toolbar-update .update-comments.active i  {
  -webkit-animation-name: spin;
  -webkit-animation-duration: 600ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: spin;
  -moz-animation-duration: 600ms;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: spin;
  -ms-animation-duration: 600ms;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;

  animation-name: spin;
  animation-duration: 600ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
/* Анимация */
@-ms-keyframes spin {
  from { -ms-transform: rotate(0deg); }
  to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
  from { -moz-transform: rotate(0deg); }
  to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
  from { -webkit-transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
  from {
    transform:rotate(0deg);
  }
  to {
    transform:rotate(360deg);
  }
}