.a:hover, .b:hover, .c:hover, .d:hover{ transform:scale(1.1, 1.1 );  transition:1s;  
}
.a, .b, .c, .d{ transform:scale(1.0, 1.0 ); transition:1s; cursor:pointer;}

@media (min-width: 768px){
/*================================= odd =========================================*/
.posts ul li:nth-child(n) .a{  position: absolute;
    -webkit-animation: rotmove 60s infinite;
    animation: rotmove 60s infinite;
	
	}
@keyframes rotmove {
   0%   { left:0%;  opacity:0;}
    2% { left:0%;  opacity:0;}
    3% { left:0%;  opacity:1}
	49% { left:0%;  opacity:1;}
	50% { left:0%;  opacity:0;}
	
	52%{ left:25%; opacity:0; }
	53%{ left:25%; opacity:1; }
	99%{ left:25%; opacity:1; }
	100%{ left:25%; opacity:0; }
	 	 
	}
	  

/* Standard syntax */
@keyframes rotmove {
   0%{ left:0%;  opacity:0;}
    2% { left:0%;  opacity:0;}
    3% { left:0%;  opacity:1}
	49% { left:0%;  opacity:1;}
	50% { left:0%;  opacity:0;}
	
52%{ left:25%; opacity:0; }
	53%{ left:25%; opacity:1; }
	99%{ left:25%; opacity:1; }
	100%{ left:25%; opacity:0; }
	 	 
}


.posts ul li .a h5 {
 position: absolute;
    color: #fff;
    bottom: -12px;
    right: 43px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 80px;
    text-align: right;
}
.posts ul li:nth-child(n) .b{     position: absolute;
    -webkit-animation: comove 70s infinite;
    animation: comove 70s infinite;
	
	}
	@-webkit-keyframes comove {
 0%{ left:75%;  opacity:0;}
    2% { left:75%;  opacity:0;}
    3% { left:75%;  opacity:1}
	49% { left:75%;  opacity:1;}
	50% { left:75%;  opacity:0;}
	
	52%{ left:50%;opacity:0; }
	53%{ left:50%; opacity:1; }
	99%{ left:50%; opacity:1; }
	100%{ left:50%; opacity:0; }
	
	 
	}

/* Standard syntax */
@keyframes comove {
 0%   { left:75%;  opacity:0;}
    2% { left:75%;  opacity:0;}
    3% { left:75%;  opacity:1}
	49% { left:75%;  opacity:1;}
	50% { left:75%;  opacity:0;}
	
	52%{ left:50%;opacity:0; }
	53%{ left:50%; opacity:1; }
	99%{ left:50%; opacity:1; }
	100%{ left:50%; opacity:0; }
	
	 
	}


.posts ul li:nth-child(n) .c {
    width: 50px;
    position: absolute;
    -webkit-animation: mymove 70s infinite;
    animation: mymove 70s infinite;
		
}
@-webkit-keyframes mymove {
	 0%   { left:55%;  opacity:0;}
    2% { left:55%;  opacity:0;}
    3% { left:55%;  opacity:1}
	49% { left:55%;  opacity:1;}
	50% { left:55%;  opacity:0;}
	
	52%{ left:85%; opacity:0; }
	53%{ left:85%; opacity:1; }
	99%{ left:85%; opacity:1; }
	100%{ left:85%; opacity:0; }

}

/* Standard syntax */
@keyframes mymove {
 	 0%   { left:55%;  opacity:0;}
    2% { left:55%;  opacity:0;}
    3% { left:55%;  opacity:1}
	49% { left:55%;  opacity:1;}
	50% { left:55%;  opacity:0;}
	
    	
	52%{ left:85%; opacity:0; }
	53%{ left:85%; opacity:1; }
	99%{ left:85%; opacity:1; }
	100%{ left:85%; opacity:0; }
  
} 

 



.posts ul li:nth-child(n) .d {
    width: 50px;
    position: absolute;
    -webkit-animation: hrtmove 60s infinite;
    animation: hrtmove 60s infinite;

	
}
@-webkit-keyframes hrtmove {
 0%   { left:30%;  opacity:0;}
    2% { left:30%;  opacity:0;}
    3% { left:30%;  opacity:1}
	49% { left:30%;  opacity:1;}
	50% { left:30%;  opacity:0;}
	
	52%{ left:5%;opacity:0; }
	53%{ left:5%; opacity:1; }
	99%{ left:5%; opacity:1; }
	100%{ left:5%; opacity:0; }
}

/* Standard syntax */
@keyframes hrtmove {
 0%   { left:30%;  opacity:0;}
    2% { left:30%;  opacity:0;}
    3% { left:30%;  opacity:1}
	49% { left:30%;  opacity:1;}
	50% { left:30%;  opacity:0;}
	
    52%{ left:5%;opacity:0; }
	53%{ left:5%; opacity:1; }
	99%{ left:5%; opacity:1; }
	100%{ left:5%; opacity:0; }
  
}


/*============================================================================*/
/*================================= even=========================================*/
.posts ul li:nth-child(2n+0) .a{  position: absolute;
    -webkit-animation: estorymove 70s infinite;
    animation: estorymove 70s infinite;  
	}
	@-webkit-keyframes estorymove {
 0%   { left:50%;  opacity:0;}
    2% { left:50%;  opacity:0;}
    3% { left:50%;  opacity:1}
	49% { left:50%;  opacity:1;}
	50% { left:50%;  opacity:0;}
	
	52%{ left:0%;opacity:0; }
	53%{ left:0%; opacity:1; }
	99%{ left:0%; opacity:1; }
	100%{ left:0%; opacity:0; }
	
	 
	}

/* Standard syntax */
@keyframes estorymove {
0%   { left:50%;  opacity:0;}
    2% { left:50%;  opacity:0;}
    3% { left:50%;  opacity:1}
	49% { left:50%;  opacity:1;}
	50% { left:50%;  opacity:0;}
	
	52%{ left:0%;opacity:0; }
	53%{ left:0%; opacity:1; }
	99%{ left:0%; opacity:1; }
	100%{ left:0%; opacity:0; }
	
	 
	}

.posts ul li:nth-child(2n+0) .b{     position: absolute;
    -webkit-animation: ecommentmove 60s infinite;
    animation: ecommentmove 60s infinite;
	
	}
	@keyframes ecommentmove {
   0%   { left:25%;  opacity:0;}
    2% { left:25%;  opacity:0;}
    3% { left:25%;  opacity:1}
	49% { left:25%;  opacity:1;}
	50% { left:25%;  opacity:0;}
	
	52%{ left:75%; opacity:0; }
	53%{ left:75%; opacity:1; }
	99%{ left:75%; opacity:1; }
	100%{ left:75%; opacity:0; }
	 	 
	}
	  

/* Standard syntax */
	@keyframes ecommentmove {
  0%   { left:25%;  opacity:0;}
    2% { left:25%;  opacity:0;}
    3% { left:25%;  opacity:1}
	49% { left:25%;  opacity:1;}
	50% { left:25%;  opacity:0;}
	
	52%{ left:75%; opacity:0; }
	53%{ left:75%; opacity:1; }
	99%{ left:75%; opacity:1; }
	100%{ left:75%; opacity:0; }
	 	 
}

.posts ul li:nth-child(2n+0) .c {
    width: 50px;
    position: absolute;
    -webkit-animation: ehrtmove 60s infinite;
    animation: ehrtmove 60s infinite;
	

}
@-webkit-keyframes ehrtmove {
 0%   { left:80%;  opacity:0;}
    2% { left:80%;  opacity:0;}
    3% { left:80%;  opacity:1}
	49% { left:80%;  opacity:1;}
	50% { left:80%;  opacity:0;}
	
	52%{ left:30%;opacity:0; }
	53%{ left:30%; opacity:1; }
	99%{ left:30%; opacity:1; }
	100%{ left:30%; opacity:0; }
}

/* Standard syntax */
@keyframes ehrtmove {
 0%   { left:80%;  opacity:0;}
    2% { left:80%;  opacity:0;}
    3% { left:80%;  opacity:1}
	49% { left:80%;  opacity:1;}
	50% { left:80%;  opacity:0;}
	
	52%{ left:30%;opacity:0; }
	53%{ left:30%; opacity:1; }
	99%{ left:30%; opacity:1; }
	100%{ left:30%; opacity:0; }
  
}




.posts ul li:nth-child(2n+0) .d {
    width: 50px;
    position: absolute;
    -webkit-animation: emymove 70 infinite;
    animation: emymove 70s infinite;

	
}
@-webkit-keyframes emymove {
		  0%   { left:5%;  opacity:0;}
    2% { left:5%;  opacity:0;}
    3% { left:5%;  opacity:1}
	49% { left:5%;  opacity:1;}
	50% { left:5%;  opacity:0;}
	
	52%{ left:55%; opacity:0; }
	53%{ left:55%; opacity:1; }
	99%{ left:55%; opacity:1; }
	100%{ left:55%; opacity:0; }

}

/* Standard syntax */
@keyframes emymove {
		  0%   { left:5%;  opacity:0;}
    2% { left:5%;  opacity:0;}
    3% { left:5%;  opacity:1}
	49% { left:5%;  opacity:1;}
	50% { left:5%;  opacity:0;}
	
	52%{ left:55%; opacity:0; }
	53%{ left:55%; opacity:1; }
	99%{ left:55%; opacity:1; }
	100%{ left:55%; opacity:0; }
  
} 


/*============================================================================*/
/*================================= 3rd=========================================*/
.posts ul li:nth-child(3n+0) .a{  position: absolute;
    -webkit-animation: astorymove 60s infinite;
    animation: astorymove 60s infinite;  
	}
	@-webkit-keyframes astorymove {
 0%   { left:0%;  opacity:0;}
    2% { left:0%;  opacity:0;}
    3% { left:0%;  opacity:1}
	49% { left:0%;  opacity:1;}
	50% { left:0%;  opacity:0;}
	
	52%{ left:75%;opacity:0; }
	53%{ left:75%; opacity:1; }
	99%{ left:75%; opacity:1; }
	100%{ left:75%; opacity:0; }
	
	 
	}

/* Standard syntax */
@keyframes astorymove {
 0%   { left:0%;  opacity:0;}
    2% { left:0%;  opacity:0;}
    3% { left:0%;  opacity:1}
	49% { left:0%;  opacity:1;}
	50% { left:0%;  opacity:0;}
	
	52%{ left:75%;opacity:0; }
	53%{ left:75%; opacity:1; }
	99%{ left:75%; opacity:1; }
	100%{ left:75%; opacity:0; }
	
	 
	}

.posts ul li:nth-child(3n+0) .b{     position: absolute;
    -webkit-animation: acommentmove 70s infinite;
    animation: acommentmove 70s infinite;
	
	}
	@keyframes acommentmove {
   0%   { left:50%;  opacity:0;}
    2% { left:50%;  opacity:0;}
    3% { left:50%;  opacity:1}
	49% { left:50%;  opacity:1;}
	50% { left:50%;  opacity:0;}
	
	52%{ left:25%; opacity:0; }
	53%{ left:25%; opacity:1; }
	99%{ left:25%; opacity:1; }
	100%{ left:25%; opacity:0; }
	 	 
	}
	  

/* Standard syntax */
	@keyframes acommentmove {
   0%   { left:50%;  opacity:0;}
    2% { left:50%;  opacity:0;}
    3% { left:50%;  opacity:1}
	49% { left:50%;  opacity:1;}
	50% { left:50%;  opacity:0;}
	
	52%{ left:25%; opacity:0; }
	53%{ left:25%; opacity:1; }
	99%{ left:25%; opacity:1; }
	100%{ left:25%; opacity:0; }
	 	 
}

.posts ul li:nth-child(3n+0) .c {
    width: 50px;
    position: absolute;
    -webkit-animation: ahrtmove 70s infinite;
    animation: ahrtmove 70s infinite;

}
@-webkit-keyframes ahrtmove {
 0%   { left:30%;  opacity:0;}
    2% { left:30%;  opacity:0;}
    3% { left:30%;  opacity:1}
	49% { left:30%;  opacity:1;}
	50% { left:30%;  opacity:0;}
	
	52%{ left:55%;opacity:0; }
	53%{ left:55%; opacity:1; }
	99%{ left:55%; opacity:1; }
	100%{ left:55%; opacity:0; }
}

/* Standard syntax */
@keyframes ahrtmove {
 0%   { left:30%;  opacity:0;}
    2% { left:30%;  opacity:0;}
    3% { left:30%;  opacity:1}
	49% { left:30%;  opacity:1;}
	50% { left:30%;  opacity:0;}
	
	52%{ left:55%;opacity:0; }
	53%{ left:55%; opacity:1; }
	99%{ left:55%; opacity:1; }
	100%{ left:55%; opacity:0; }
  
}




.posts ul li:nth-child(3n+0) .d {
    width: 60px;
    position: absolute;
    -webkit-animation: amymove 60 infinite;
    animation: amymove 60s infinite;

	
}
@-webkit-keyframes amymove {
		  0%   { left:5%;  opacity:0;}
    2% { left:80%;  opacity:0;}
    3% { left:80%;  opacity:1}
	49% { left:80%;  opacity:1;}
	50% { left:80%;  opacity:0;}
	
	52%{ left:5%; opacity:0; }
	53%{ left:5%; opacity:1; }
	99%{ left:5%; opacity:1; }
	100%{ left:5%; opacity:0; }

}

/* Standard syntax */
@keyframes amymove {
		  0%   { left:5%;  opacity:0;}
    2% { left:80%;  opacity:0;}
    3% { left:80%;  opacity:1}
	49% { left:80%;  opacity:1;}
	50% { left:80%;  opacity:0;}
	
	52%{ left:5%; opacity:0; }
	53%{ left:5%; opacity:1; }
	99%{ left:5%; opacity:1; }
	100%{ left:5%; opacity:0; }
  
} 

}

@media screen and (max-width: 767px) {







/*============================================================================*/
/*================================= even=========================================*/
.posts ul li .a{  position: absolute;
    -webkit-animation: pestorymove 60s infinite;
    animation: pestorymove 60s infinite;  
	}
	@-webkit-keyframes pestorymove {
  0%   { left:50%;  opacity:0;bottom:20px;}
    2% { left:50%;  opacity:0;bottom:20px;}
    3% { left:50%;  opacity:1;bottom:20px;}
	49% { left:50%;  opacity:1;bottom:20px;}
	50% { left:50%;  opacity:0;bottom:20px;}
	
	52%{ left:0%; opacity:0;bottom:20px; }
	53%{ left:0%; opacity:1;bottom:20px; }
	99%{ left:0%; opacity:1;bottom:20px; }
	100%{ left:0%; opacity:0;bottom:20px; }
	
	 
	}

/* Standard syntax */
@keyframes pestorymove {
 0%   { left:50%;  opacity:0;bottom:20px;}
    2% { left:50%;  opacity:0;bottom:20px;}
    3% { left:50%;  opacity:1;bottom:20px;}
	49% { left:50%;  opacity:1;bottom:20px;}
	50% { left:50%;  opacity:0;bottom:20px;}
	
	52%{ left:0%; opacity:0;bottom:20px; }
	53%{ left:0%; opacity:1;bottom:20px; }
	99%{ left:0%; opacity:1;bottom:20px; }
	100%{ left:0%; opacity:0;bottom:20px; }
	
	 
	}

.posts ul li .b{     position: absolute;
    -webkit-animation: pecommentmove 70s infinite;
    animation: pecommentmove 70s infinite;
	
	}
	@keyframes pecommentmove {
    0%   { left:0%;  opacity:0;top:0px;}
    2% { left:0%;  opacity:0;top:0px;}
    3% { left:0%;  opacity:1;top:0px;}
	49% { left:0%;  opacity:1;top:0px;}
	50% { left:0%;  opacity:0;top:0px;}
	
	52%{ left:50%; opacity:0;top:0px; }
	53%{ left:50%; opacity:1;top:0px; }
	99%{ left:50%; opacity:1;top:0px; }
	100%{ left:50%; opacity:0;top:0px; }
	 	 
	}
	  

/* Standard syntax */
	@keyframes pecommentmove {
 0%   { left:0%;  opacity:0;top:0px;}
    2% { left:0%;  opacity:0;top:0px;}
    3% { left:0%;  opacity:1;top:0px;}
	49% { left:0%;  opacity:1;top:0px;}
	50% { left:0%;  opacity:0;top:0px;}
	
	52%{ left:50%; opacity:0;top:0px; }
	53%{ left:50%; opacity:1;top:0px; }
	99%{ left:50%; opacity:1;top:0px; }
	100%{ left:50%; opacity:0;top:0px; }
	 	 
}

.posts ul li .c {
    width: 50px;
    position: absolute;
    -webkit-animation: pehrtmove 70s infinite;
    animation: pehrtmove 70s infinite;

}
@-webkit-keyframes pehrtmove {
  0%   { left:60%;  opacity:0;top:0px;}
    2% { left:60%;  opacity:0;top:0px;}
    3% { left:60%;  opacity:1;top:0px;}
	49% { left:60%;  opacity:1;top:0px;}
	50% { left:60%;  opacity:0;top:0px;}
	
	52%{ left:10%; opacity:0;top:0px; }
	53%{ left:10%; opacity:1;top:0px; }
	99%{ left:10%; opacity:1;top:0px; }
	100%{ left:10%; opacity:0;top:0px; }
}

/* Standard syntax */
@keyframes pehrtmove {
 0%   { left:60%;  opacity:0;top:0px;}
    2% { left:60%;  opacity:0;top:0px;}
    3% { left:60%;  opacity:1;top:0px;}
	49% { left:60%;  opacity:1;top:0px;}
	50% { left:60%;  opacity:0;top:0px;}
	
	52%{ left:10%; opacity:0;top:0px; }
	53%{ left:10%; opacity:1;top:0px; }
	99%{ left:10%; opacity:1;top:0px; }
	100%{ left:10%; opacity:0;top:0px; }
  
}




.posts ul li .d {
    width: 60px;
    position: absolute;
    -webkit-animation: pemymove 60 infinite;
    animation: pemymove 60s infinite;

	
}
@-webkit-keyframes pemymove {
    0%   { left:0%;  opacity:0;bottom:20%;}
    2% { left:10%;  opacity:0;bottom:20%;}
    3% { left:10%;  opacity:1;bottom:20%;}
	49% { left:10%;  opacity:1;bottom:20%;}
	50% { left:10%;  opacity:0;bottom:20%;}
	
	52%{ left:60%; opacity:0;bottom:20%; }
	53%{ left:60%; opacity:1;bottom:20% }
	99%{ left:60%; opacity:1;bottom:20% }
	100%{ left:60%; opacity:0;bottom:20% }

}

/* Standard syntax */
@keyframes pemymove {
      0%   { left:0%;  opacity:0;bottom:20%;}
    2% { left:10%;  opacity:0;bottom:20%;}
    3% { left:10%;  opacity:1;bottom:20%;}
	49% { left:10%;  opacity:1;bottom:20%;}
	50% { left:10%;  opacity:0;bottom:20%;}
	
	52%{ left:60%; opacity:0;bottom:20%; }
	53%{ left:60%; opacity:1;bottom:20% }
	99%{ left:60%; opacity:1;bottom:20% }
	100%{ left:60%; opacity:0;bottom:20% }
  
} 

 
}