/*
http://www.w3schools.com/cssref/css3_pr_animation.asp
CSS Syntax
animation: name duration timing-function delay iteration-count direction fill-mode play-state;

Property Values
animation-name 	Specifies the name of the keyframe you want to bind to the selector
animation-duration 	Specifies how many seconds or milliseconds an animation takes to complete
animation-timing-function 	Specifies the speed curve of the animation

  linear 	The animation has the same speed from start to end 		
  ease 	Default value. The animation has a slow start, then fast, before it ends slowly 		
  ease-in 	The animation has a slow start 	
  ease-out 	The animation has a slow end 	
  ease-in-out 	The animation has both a slow start and a slow end

animation-delay 	Specifies a delay before the animation will start
animation-iteration-count 	Specifies how many times an animation should be played
animation-direction 	Specifies whether or not the animation should play in reverse on alternate cycles
animation-fill-mode 	Specifies what values are applied by the animation outside the time it is executing
animation-play-state 	Specifies whether the animation is running or paused
initial 	Sets this property to its default value. 
inherit 	Inherits this property from its parent element. 
*/
/* Поворот c 0deg на 360deg */
@-webkit-keyframes spin-0-360 {
  from { transform: rotate(0deg); }    
    to { -webkit-transform: rotate(360deg); }
}

@-moz-keyframes spin-0-360 {
  from { transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}

@-ms-keyframes spin-0-360 {
  from { transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}

@-o-keyframes spin-0-360 {
  from { transform: rotate(0deg); }
    to { -o-transform: rotate(360deg); }
}

@keyframes spin-0-360 {
  from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
/* end: Поворот c 0deg на 360deg */
/*  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  */
/* Поворот c 360deg на 0deg */
@-webkit-keyframes spin-360-0 {
  from { transform: rotate(360deg); }    
    to { -webkit-transform: rotate(0deg); }
}

@-moz-keyframes spin-360-0 {
  from { transform: rotate(36deg); }
    to { -moz-transform: rotate(0deg); }
}

@-ms-keyframes spin-360-0 {
  from { transform: rotate(360deg); }
    to { -ms-transform: rotate(0deg); }
}

@-o-keyframes spin-360-0 {
  from { transform: rotate(360deg); }
    to { -o-transform: rotate(0deg); }
}

@keyframes spin-360-0 {
  from { transform: rotate(360deg); }
    to { transform: rotate(0deg); }
}
/* end: Поворот c 360deg на 0deg */

/* swing */
 @-webkit-keyframes swing
 {
    15%
    {
        -webkit-transform: translateX(9px);
        transform: translateX(9px);
    }
    30%
    {
        -webkit-transform: translateX(-9px);
        transform: translateX(-9px);
    } 
    40%
    {
        -webkit-transform: translateX(6px);
        transform: translateX(6px);
    }
    50%
    {
        -webkit-transform: translateX(-6px);
        transform: translateX(-6px);
    }
    65%
    {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    100%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
 }
 @keyframes swing
 {
    15%
    {
        -webkit-transform: translateX(9px);
        transform: translateX(9px);
    }
    30%
    {
        -webkit-transform: translateX(-9px);
        transform: translateX(-9px);
    }
    40%
    {
        -webkit-transform: translateX(6px);
        transform: translateX(6px);
    }
    50%
    {
        -webkit-transform: translateX(-6px);
        transform: translateX(-6px);
    }
    65%
    {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    100%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
 }
/* end:swing*/
/*  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  */
/* blink */
@keyframes blink {
	0% {color: #E31E24; }
	40% {color: white; }	
	50% {color: #4f4f4f; }
}

/* end:blink*/
/*  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  */
.blinking {
-webkit-animation: blink 3s ease-in-out infinite;
-moz-animation: blink 3s ease-in-out infinite;
-ms-animation: blink 3s ease-in-out infinite;
-o-animation: blink 3s ease-in-out infinite;
animation: blink 3s ease-in-out infinite;


}



/* index servise rounds */ #serv-block div.animated,
/* footer WB logo */ #m-footerA4 img.animated {
-webkit-animation: spin-360-0 1s 1 ease;
-moz-animation: spin-360-0 1s 1 ease;
-ms-animation: spin-360-0 1s 1 ease;
-o-animation: spin-360-0 1s 1 ease;
animation: spin-360-0 1s 1 ease;
}
/* index servise rounds */ #serv-block div.animated:hover,
/* footer WB logo */ #m-footerA4 img.animated:hover {
-webkit-animation: spin-0-360 1.5s 1 ease;
-moz-animation: spin-0-360 1.5s 1 ease;
-ms-animation: spin-0-360 1.5s 1 ease;
-o-animation: spin-0-360 1.5s 1 ease;
animation: spin-0-360 1.5s 1 ease;
}
/* top logo */ #m-header-b1 img,
/* oz book */ #oz_book img,
/* index details */ #m-contentHW0 a, #m-contentHW1 a,
/* bottom footer navigation */ #m-footerA1A1 a span, #m-footerA3 a span,
/* top sticky navigation */ #navigationgarant a,
/* top social buttons*/ #m-header-b21,
/* index news div */ #m-contentC1A_news, 

#box-hotlink, #box-hotlink-red, #m-RightJoinButton {
transition:all 0.4s;
-webkit-transition:all 0.4s;
-o-transition:all 0.4s;
-moz-transition:all 0.4s;
}
 .swing:hover
 {
        -webkit-animation: swing 0.6s ease;
        animation: swing 0.6s ease;
        -webkit-animation-iteration-count: 1;
        animation-iteration-count: 1;
 }
  .grow:hover
 {
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
 }