/* ===================================
SHORTHAND 
==================================== */
@keyframes example {
  0%   {background-color: red;}
  100% {background-color: green;}
}
.shorty {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: ease; /* linear | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n) */
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  /* extra properties */
  animation-fill-mode: none; /* forwards | backwards | both */
  animation-play-state: running; /* paused */
}
.shorty {
  animation: example 5s linear 2s infinite alternate;
}
/* ===================================
SHORTHAND 
==================================== */
@keyframes w3c {
  0%   {background-color: #b39700;}
  20%  {background-color: #ffd700;}
  40%  {background-color: #fff100;}
  60%  {background-color: #eeeeee;}
  80%  {background-color: #aaaaaa;}
  100% {background-color: #b39700;}
}

.w3c {
  background-color: red;
  animation-name: w3c;
  animation-duration: 6s;
  animation-delay: -2s;
  animation-iteration-count: infinite; 
  animation-direction: reverse; /* alternate | alternate-reverse*/
  /* specifies the speed curve of the animation */
  animation-timing-function: ease; /* linear | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n) */
  animation-fill-mode: none; /* forwards | backwards | both */
}
.w3c:hover {
  animation-play-state: paused; 
}

@keyframes w3c-1 {
  0%   {background-color: #aaaaaa;}
  20%  {background-color: #eeeeee;}
  40%  {background-color: #b39700;}
  60%  {background-color: #ffd700;}
  80%  {background-color: #fff100;}
  100% {background-color: #aaaaaa;}
}

.w3c-1 {
  background-color: green;
  animation-name: w3c-1;
  animation-duration: 6s;
  animation-delay: -2s;
  animation-iteration-count: infinite; /* infinite */ 
  /* The animation-direction property specifies whether an animation should be played forwards, backwards or in alternate cycles. The following example uses the value "alternate" to make the animation run forwards first, then backwards */
  animation-direction: reverse; /* alternate | alternate-reverse*/
}
/* ===================================
SHORTHAND 
==================================== */
@keyframes k3c {
  0%   {background-image: url('../../_img/1.jpg');}
  20%  {background-image: url('../../_img/2.jpg');}
  40%  {background-image: url('../../_img/3.jpg');}
  60%  {background-image: url('../../_img/4.jpg');}
  80%  {background-image: url('../../_img/5.jpg');}
  100% {background-image: url('../../_img/1.jpg');}
}
.k3c {
  background-color: red;
  animation-name: k3c;
  animation-duration: 6s;
  animation-delay: ;
  animation-iteration-count: infinite; 
  animation-direction: reverse; /* alternate | alternate-reverse*/
  /* specifies the speed curve of the animation */
  animation-timing-function: ; /* linear | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n) */
  animation-fill-mode: ; /* forwards | backwards | both */
}
.w3c:hover {
  animation-play-state: paused; 
}
.k3c-1, .k3c-2, .k3c-3, .k3c-4, .k3c-5, .k3c-6, .k3c-7, .k3c-8, .k3c-9, .k3c-10, .k3c-11, .k3c-12 {
  transition: background-image 0.5s ease-in-out;
}
@keyframes k3c-1 {
  0%   {background-image: url('../../_img/__cover-panta/00.jpg');}/*location*/
  20%  {background-image: url('../../_img/__cover-panta/01.jpg');}
  40%  {background-image: url('../../_img/__cover-panta/02.jpg');}
  60%  {background-image: url('../../_img/__cover-panta/03.jpg');}
  80%  {background-image: url('../../_img/__cover-panta/04.jpg');}
  100% {background-image: url('../../_img/__cover-panta/00.jpg');}
}
.k3c-1 {
  background-color: red;
  animation-name: k3c-1;
  animation-duration: 12s;
  animation-iteration-count: infinite; 
}
@keyframes k3c-2 {
  0%   {background-image: url('../../_img/__cover-panta/05.jpg');}
  20%  {background-image: url('../../_img/__cover-panta/06.jpg');}
  40%  {background-image: url('../../_img/__cover-panta/07.jpg');}
  60%  {background-image: url('../../_img/__cover-panta/08.jpg');}
  80%  {background-image: url('../../_img/__cover-panta/09.jpg');}
  100% {background-image: url('../../_img/__cover-panta/05.jpg');}
}
.k3c-2 {
  background-color: red;
  animation-name: k3c-2;
  animation-duration: 9s;
  animation-iteration-count: infinite; 
}
@keyframes k3c-3 {
  0%   {background-image: url('../../_img/__cover-panta/10.jpg');}
  20%  {background-image: url('../../_img/__cover-panta/11.jpg');}
  40%  {background-image: url('../../_img/__cover-panta/12.jpg');}
  60%  {background-image: url('../../_img/__cover-panta/13.jpg');}
  80%  {background-image: url('../../_img/__cover-panta/14.jpg');}
  100% {background-image: url('../../_img/__cover-panta/10.jpg');}
}
.k3c-3 {
  background-color: red;
  animation-name: k3c-3;
  animation-duration: 12s;
  animation-iteration-count: infinite; 
}
@keyframes k3c-4 {
  0%   {background-image: url('../../_img/__cover-panta/15.jpg');}/*sposi*/
  20%  {background-image: url('../../_img/__cover-panta/16.jpg');}
  40%  {background-image: url('../../_img/__cover-panta/17.jpg');}
  60%  {background-image: url('../../_img/__cover-panta/18.jpg');}
  80%  {background-image: url('../../_img/__cover-panta/19.jpg');}
  100% {background-image: url('../../_img/__cover-panta/15.jpg');}
}
.k3c-4 {
  background-color: red;
  animation-name: k3c-4;
  animation-duration: 9s;
  animation-iteration-count: infinite; 
}
@keyframes k3c-5 {
  0%   {background-image: url('../../_img/__cover-panta/20.jpg');}
  20%  {background-image: url('../../_img/__cover-panta/21.jpg');}
  40%  {background-image: url('../../_img/__cover-panta/22.jpg');}
  60%  {background-image: url('../../_img/__cover-panta/23.jpg');}
  80%  {background-image: url('../../_img/__cover-panta/24.jpg');}
  100% {background-image: url('../../_img/__cover-panta/20.jpg');}
}
.k3c-5 {
  background-color: red;
  animation-name: k3c-5;
  animation-duration: 12s;
  animation-iteration-count: infinite; 
}
@keyframes k3c-6 {
  0%   {background-image: url('../../_img/__cover-panta/25.jpg');}
  20%  {background-image: url('../../_img/__cover-panta/26.jpg');}
  40%  {background-image: url('../../_img/__cover-panta/27.jpg');}
  60%  {background-image: url('../../_img/__cover-panta/28.jpg');}
  80%  {background-image: url('../../_img/__cover-panta/29.jpg');}
  100% {background-image: url('../../_img/__cover-panta/25.jpg');}
}
.k3c-6 {
  background-color: red;
  animation-name: k3c-6;
  animation-duration: 9s;
  animation-iteration-count: infinite; 
}
@keyframes k3c-7 {
  0%   {background-image: url('../../_img/__cover-panta/30.jpg');}
  20%  {background-image: url('../../_img/__cover-panta/31.jpg');}
  40%  {background-image: url('../../_img/__cover-panta/32.jpg');}
  60%  {background-image: url('../../_img/__cover-panta/33.jpg');}
  80%  {background-image: url('../../_img/__cover-panta/34.jpg');}
  100% {background-image: url('../../_img/__cover-panta/30.jpg');}
}
.k3c-7 {
  background-color: red;
  animation-name: k3c-7;
  animation-duration: 12s;
  animation-iteration-count: infinite; 
}
@keyframes k3c-8 {
  0%   {background-image: url('../../_img/__cover-panta/35.jpg');}
  20%  {background-image: url('../../_img/__cover-panta/36.jpg');}
  40%  {background-image: url('../../_img/__cover-panta/37.jpg');}
  60%  {background-image: url('../../_img/__cover-panta/38.jpg');}
  80%  {background-image: url('../../_img/__cover-panta/39.jpg');}
  100% {background-image: url('../../_img/__cover-panta/35.jpg');}
}
.k3c-8 {
  background-color: red;
  animation-name: k3c-8;
  animation-duration: 9s;
  animation-iteration-count: infinite; 
}
@keyframes k3c-9 {
  0%   {background-image: url('../../_img/__cover-panta/40.jpg');}
  20%  {background-image: url('../../_img/__cover-panta/41.jpg');}
  40%  {background-image: url('../../_img/__cover-panta/42.jpg');}
  60%  {background-image: url('../../_img/__cover-panta/43.jpg');}
  80%  {background-image: url('../../_img/__cover-panta/44.jpg');}
  100% {background-image: url('../../_img/__cover-panta/40.jpg');}
}
.k3c-9 {
  background-color: red;
  animation-name: k3c-9;
  animation-duration: 12s;
  animation-iteration-count: infinite; 
}
@keyframes k3c-10 {
  0%   {background-image: url('../../_img/__cover-panta/45.jpg');}
  20%  {background-image: url('../../_img/__cover-panta/46.jpg');}
  40%  {background-image: url('../../_img/__cover-panta/47.jpg');}
  60%  {background-image: url('../../_img/__cover-panta/48.jpg');}
  80%  {background-image: url('../../_img/__cover-panta/49.jpg');}
  100% {background-image: url('../../_img/__cover-panta/45.jpg');}
}
.k3c-10 {
  background-color: red;
  animation-name: k3c-10;
  animation-duration: 9s;
  animation-iteration-count: infinite; 
}
@keyframes k3c-11 {
  0%   {background-image: url('../../_img/__cover-panta/50.jpg');}
  20%  {background-image: url('../../_img/__cover-panta/51.jpg');}
  40%  {background-image: url('../../_img/__cover-panta/52.jpg');}
  60%  {background-image: url('../../_img/__cover-panta/53.jpg');}
  80%  {background-image: url('../../_img/__cover-panta/54.jpg');}
  100% {background-image: url('../../_img/__cover-panta/50.jpg');}
}
.k3c-11 {
  background-color: red;
  animation-name: k3c-11;
  animation-duration: 12s;
  animation-iteration-count: infinite; 
}
@keyframes k3c-12 {
  0%   {background-image: url('../../_img/__cover-panta/55.jpg');}
  20%  {background-image: url('../../_img/__cover-panta/56.jpg');}
  40%  {background-image: url('../../_img/__cover-panta/57.jpg');}
  60%  {background-image: url('../../_img/__cover-panta/58.jpg');}
  80%  {background-image: url('../../_img/__cover-panta/59.jpg');}
  100% {background-image: url('../../_img/__cover-panta/55.jpg');}
}
.k3c-12 {
  background-color: red;
  animation-name: k3c-12;
  animation-duration: 9s;
  animation-iteration-count: infinite; 
}