#slider {
  
   height: 60px;
   width: 468px;
  
}

#fon{position: absolute;}

#mask {
   overflow: hidden;
   height: 90px;
}


/* Список изображений */

#slider ul {
   margin: 0;
   padding: 0;
   position: relative;
}

#slider li {
   width: 468px;  /* Ширина изображения */
   height: 60px; /* Высота изображения */
   position: absolute;
   top: -325px;	/* Исходное положение  (за пределами слайдера) */
   list-style: none;
}


#slider li.firstanimation {
   animation: cycle 15s linear infinite;
}

#slider li.secondanimation {
   animation: cycletwo 15s linear infinite;
}

#slider li.thirdanimation {
   animation: cyclethree 15s linear infinite;
}

#slider li.fourthanimation {
   animation: cyclefour 15s linear infinite;
}

#slider li.fifthanimation {
   animation: cyclefive 15s linear infinite;
}
/* Анимация */

@keyframes cycle {
   0%  { top: 0px; } /* При запуске слайдера, первое изображение уже видимо */
   4%  { top: 0px; } /* Стартовая позиция */
   16% { top: 0px; opacity:1; z-index:0; } /* С 4% до 16 % (3 секунды) изображение видимо */
   20% { top: 325px; opacity: 0; z-index: 0; } /* с 16% до 20% (1 секунды)выход изображения*/
   21% { top: -325px; opacity: 0; z-index: -1; } /* Возвращение на исходную позицию за пределами маски */
   92% { top: -325px; opacity: 0; z-index: 0; }
   96% { top: -325px; opacity: 0; } /* С 96% до 100% (1 секунда) – вход */
   100%{ top: 0px; opacity: 1; }
}

@keyframes cycletwo {
   0%  { top: -325px; opacity: 0; } /* Исходная позиция за пределами маски */
   16% { top: -325px; opacity: 0; }/* Начало движения с 16% */
   20% { top: 0px; opacity: 1; }
   24% { top: 0px; opacity: 1; }  /* С 20% до 24% (в течении 1 секунды) — вход*/
   36% { top: 0px; opacity: 1; z-index: 0; }   /* С 24% до 36 % (3 секунды) изображение видимо */
   40% { top: 325px; opacity: 0; z-index: 0; } /* С 36% до 40% (1 секунда)— выход */
   41% { top: -325px; opacity: 0; z-index: -1; }   /* Возврат на исходную позицию */
   100%{ top: -325px; opacity: 0; z-index: -1; }
}

@keyframes cyclethree {
   0%  { top: -325px; opacity: 0; }
   36% { top: -325px; opacity: 0; }
   40% { top: 0px; opacity: 1; }
   44% { top: 0px; opacity: 1; }
   56% { top: 0px; opacity: 1; }
   60% { top: 325px; opacity: 0; z-index: 0; }
   61% { top: -325px; opacity: 0; z-index: -1; }
   100%{ top: -325px; opacity: 0; z-index: -1; }
}

@keyframes cyclefour {
   0%  { top: -325px; opacity: 0; }
   56% { top: -325px; opacity: 0; }
   60% { top: 0px; opacity: 1; }
   64% { top: 0px; opacity: 1; }
   76% { top: 0px; opacity: 1; z-index: 0; }
   80% { top: 325px; opacity: 0; z-index: 0; }
   81% { top: -325px; opacity: 0; z-index: -1; }
   100%{ top: -325px; opacity: 0; z-index: -1; }
}
@keyframes cyclefive {
   0%  { top: -325px; opacity: 0; }
   76% { top: -325px; opacity: 0; }
   80% { top: 0px; opacity: 1; }
   84% { top: 0px; opacity: 1; }
   96% { top: 0px; opacity: 1; z-index: 0; }
   100%{ top: 325px; opacity: 0; z-index: 0; }
}






a {
   color: #000;
   transition-property: color;
   transition-duration: 0.7s;
   transition-timing-function: ease-in;
   transition-delay: 0.3s;
}

a:hover {
   color: #483D8B;
}







#slider2 {
  background: #008B8B;
   border: 5px solid #FFD700;
   box-shadow: 1px 1px 5px rgba(0,0,0,0.7);
   height: 60px;
   width: 468px;
   margin: 0px auto 0;
   overflow: visible;
   position: relative;
}

#mask2 {
   overflow: hidden;
   height: 90px;
}


/* Список изображений */





#slider2 ul {
   margin: 0;
   padding: 0;
   position: relative;
}

#slider2 li {
   width: 468px;  /* Ширина изображения */
   height: 60px; /* Высота изображения */
   position: absolute;
   top: -325px;	/* Исходное положение  (за пределами слайдера) */
   list-style: none;
}








#slider2 li.firstanimation2 {
   animation: cycle 15s linear infinite;
}

#slider2 li.secondanimation2 {
   animation: cycletwo 15s linear infinite;
}

#slider2 li.thirdanimation2 {
   animation: cyclethree 15s linear infinite;
}

#slider2 li.fourthanimation2 {
   animation: cyclefour 15s linear infinite;
}

#slider2 li.fifthanimation2 {
   animation: cyclefive 15s linear infinite;

	
}
/* Анимация */

@keyframes cycle2 {
   0%  { left: 0px; } /* При запуске слайдера, первое изображение уже видимо */
   4%  { left: 0px; } /* Стартовая позиция */
   16% { left: 0px; opacity:1; z-index:0; } /* С 4% до 16 % (3 секунды) изображение видимо */
   20% { left: 310px; opacity: 0; z-index: 0; } /* с 16% до 20% (1 секунды)выход изображения*/
   21% { left: -310px; opacity: 0; z-index: -1; } /* Возвращение на исходную позицию за пределами маски */
   92% { left: -310px; opacity: 0; z-index: 0; }
   96% { left: -2310px; opacity: 0; } /* С 96% до 100% (1 секунда) – вход */
   100%{left : 0px; opacity: 1; }
}

@keyframes cycletwo2 {
   0%  { left: -310px; opacity: 0; } /* Исходная позиция за пределами маски */
   16% { left: -2310px; opacity: 0; }/* Начало движения с 16% */
   20% { left: 0px; opacity: 1; }
   24% { left: 0px; opacity: 1; }  /* С 20% до 24% (в течении 1 секунды) — вход*/
   36% { left: 0px; opacity: 1; z-index: 0; }   /* С 24% до 36 % (3 секунды) изображение видимо */
   40% { left: 310px; opacity: 0; z-index: 0; } /* С 36% до 40% (1 секунда)— выход */
   41% { left: -310px; opacity: 0; z-index: -1; }   /* Возврат на исходную позицию */
   100%{ left: -310px; opacity: 0; z-index: -1; }
}

@keyframes cyclethree2 {
   0%  { left: -310px; opacity: 0; }
   36% { left: -2310px; opacity: 0; }
   40% { left: 0px; opacity: 1; }
   44% { left: 0px; opacity: 1; }
   56% { left: 0px; opacity: 1; }
   60% { left: 310px; opacity: 0; z-index: 0; }
   61% { left: -310px; opacity: 0; z-index: -1; }
   100%{ left: -310px; opacity: 0; z-index: -1; }
}

@keyframes cyclefour2 {
   0%  { left: -310px; opacity: 0; }
   56% { left: -2310px; opacity: 0; }
   60% { left: 0px; opacity: 1; }
   64% { left: 0px; opacity: 1; }
   76% { left: 0px; opacity: 1; z-index: 0; }
   80% { left: 310px; opacity: 0; z-index: 0; }
   81% { left: -310px; opacity: 0; z-index: -1; }
   100%{ left: -310px; opacity: 0; z-index: -1; }
}
@keyframes cyclefive2 {
   0%  { left: -310px; opacity: 0; }
   76% { left: -2310px; opacity: 0; }
   80% { left: 0px; opacity: 1; }
   84% { left: 0px; opacity: 1; }
   96% { left: 0px; opacity: 1; z-index: 0; }
   100%{ left: 310px; opacity: 0; z-index: 0; }
}







#slider3 {
   background: #00CED1;
   border: 5px solid #E0FFFF;
   box-shadow: 1px 1px 5px rgba(0,0,0,0.7);
   height: 60px;
   width: 468px;
   margin: 5px auto 5px;
   overflow: visible;
   position: relative;
}

#mask3 {
   overflow: hidden;
   height: 60px;
}


/* Список изображений */

#slider3 ul {
   margin: 0;
   padding: 0;
   position: relative;
}

#slider3 li {
   width: 468px;  /* Ширина изображения */
   height: 60px; /* Высота изображения */
   position: absolute;
   right: -325px;	/* Исходное положение  (за пределами слайдера) */
   list-style: none;
}


#slider3 li.firstanimation3 {
   animation: cycle3 150s linear infinite;
   
}

#slider3 li.secondanimation3 {
   animation: cycletwo3 150s linear infinite;
   
}

#slider3 li.thirdanimation3 {
   animation: cyclethree3 150s linear infinite;
   
}

#slider3 li.fourthanimation3 {
   animation: cyclefour3 150s linear infinite;
   
}

#slider3 li.fifthanimation3 {
   animation: cyclefive3 150s linear infinite;
   
}
/* Анимация */

@keyframes cycle3 {
   0%  { right: 0px; } /* При запуске слайдера, первое изображение уже видимо */
   4%  { right: 0px; } /* Стартовая позиция */
   16% { right: 0px; opacity:1; z-index:0; } /* С 4% до 16 % (3 секунды) изображение видимо */
   20% { right: 325px; opacity: 0; z-index: 0; } /* с 16% до 20% (1 секунды)выход изображения*/
   21% { right: -325px; opacity: 0; z-index: -1; } /* Возвращение на исходную позицию за пределами маски */
   92% { right: -325px; opacity: 0; z-index: 0; }
   96% { right: -2325px; opacity: 0; } /* С 96% до 100% (1 секунда) – вход */
   100%{right : 0px; opacity: 1; }
}

@keyframes cycletwo3 {
   0%  { right: -325px; opacity: 0; } /* Исходная позиция за пределами маски */
   16% { right: -2325px; opacity: 0; }/* Начало движения с 16% */
   20% { right: 0px; opacity: 1; }
   24% { right: 0px; opacity: 1; }  /* С 20% до 24% (в течении 1 секунды) — вход*/
   36% { right: 0px; opacity: 1; z-index: 0; }   /* С 24% до 36 % (3 секунды) изображение видимо */
   40% { right: 325px; opacity: 0; z-index: 0; } /* С 36% до 40% (1 секунда)— выход */
   41% { right: -325px; opacity: 0; z-index: -1; }   /* Возврат на исходную позицию */
   100%{ right: -325px; opacity: 0; z-index: -1; }
}

@keyframes cyclethree3 {
   0%  { right: -325px; opacity: 0; }
   36% { right: -2325px; opacity: 0; }
   40% { right: 0px; opacity: 1; }
   44% { right: 0px; opacity: 1; }
   56% { right: 0px; opacity: 1; }
   60% { right: 325px; opacity: 0; z-index: 0; }
   61% { right: -325px; opacity: 0; z-index: -1; }
   100%{ right: -325px; opacity: 0; z-index: -1; }
}

@keyframes cyclefour3 {
   0%  { right: -325px; opacity: 0; }
   56% { right: -2325px; opacity: 0; }
   60% { right: 0px; opacity: 1; }
   64% { right: 0px; opacity: 1; }
   76% { right: 0px; opacity: 1; z-index: 0; }
   80% { right: 325px; opacity: 0; z-index: 0; }
   81% { right: -325px; opacity: 0; z-index: -1; }
   100%{ right: -325px; opacity: 0; z-index: -1; }
}
@keyframes cyclefive3 {
   0%  { right: -325px; opacity: 0; }
   76% { right: -2325px; opacity: 0; }
   80% { right: 0px; opacity: 1; }
   84% { right: 0px; opacity: 1; }
   96% { right: 0px; opacity: 1; z-index: 0; }
   100%{ right: 325px; opacity: 0; z-index: 0; }
}






#slider4 {
   background: #00CED1;
   border: 5px solid #E0FFFF;
   box-shadow: 1px 1px 5px rgba(0,0,0,0.7);
   height: 60px;
   width: 468px;
   margin: 5px auto 5px;
   overflow: visible;
   position: relative;
}

#mask4 {
   overflow: hidden;
   height: 60px;
}


/* Список изображений */

#slider4 ul {
   margin: 0;
   padding: 0;
   position: relative;
}

#slider4 li {
   width: 468px;  /* Ширина изображения */
   height: 60px; /* Высота изображения */
   position: absolute;
   left: -240px;	/* Исходное положение  (за пределами слайдера) */
   list-style: none;
}


#slider4 li.firstanimation4 {
   animation: cycle4 170s linear infinite;

}

#slider4 li.secondanimation4 {
   animation: cycletwo4 170s linear infinite;
  
}

#slider4 li.thirdanimation4 {
   animation: cyclethree4 170s linear infinite;
 
}

#slider4 li.fourthanimation4 {
   animation: cyclefour4 170s linear infinite;
 
}

#slider4 li.fifthanimation4 {
   animation: cyclefive4 170s linear infinite;
   
}

/* Анимация */

@keyframes cycle4 {
   0%  { left: 0px; } /* При запуске слайдера, первое изображение уже видимо */
   4%  { left: 0px; } /* Стартовая позиция */
   16% { left: 0px; opacity:1; z-index:0; } /* С 4% до 16 % (3 секунды) изображение видимо */
   20% { left: 310px; opacity: 0; z-index: 0; } /* с 16% до 20% (1 секунды)выход изображения*/
   21% { left: -310px; opacity: 0; z-index: -1; } /* Возвращение на исходную позицию за пределами маски */
   92% { left: -310px; opacity: 0; z-index: 0; }
   96% { left: -2310px; opacity: 0; } /* С 96% до 100% (1 секунда) – вход */
   100%{left : 0px; opacity: 1; }
}

@keyframes cycletwo4 {
   0%  { left: -310px; opacity: 0; } /* Исходная позиция за пределами маски */
   16% { left: -2310px; opacity: 0; }/* Начало движения с 16% */
   20% { left: 0px; opacity: 1; }
   24% { left: 0px; opacity: 1; }  /* С 20% до 24% (в течении 1 секунды) — вход*/
   36% { left: 0px; opacity: 1; z-index: 0; }   /* С 24% до 36 % (3 секунды) изображение видимо */
   40% { left: 310px; opacity: 0; z-index: 0; } /* С 36% до 40% (1 секунда)— выход */
   41% { left: -310px; opacity: 0; z-index: -1; }   /* Возврат на исходную позицию */
   100%{ left: -310px; opacity: 0; z-index: -1; }
}

@keyframes cyclethree4 {
   0%  { left: -310px; opacity: 0; }
   36% { left: -2310px; opacity: 0; }
   40% { left: 0px; opacity: 1; }
   44% { left: 0px; opacity: 1; }
   56% { left: 0px; opacity: 1; }
   60% { left: 310px; opacity: 0; z-index: 0; }
   61% { left: -310px; opacity: 0; z-index: -1; }
   100%{ left: -310px; opacity: 0; z-index: -1; }
}

@keyframes cyclefour4 {
   0%  { left: -310px; opacity: 0; }
   56% { left: -2310px; opacity: 0; }
   60% { left: 0px; opacity: 1; }
   64% { left: 0px; opacity: 1; }
   76% { left: 0px; opacity: 1; z-index: 0; }
   80% { left: 310px; opacity: 0; z-index: 0; }
   81% { left: -310px; opacity: 0; z-index: -1; }
   100%{ left: -310px; opacity: 0; z-index: -1; }
}
@keyframes cyclefive4 {
   0%  { left: -310px; opacity: 0; }
   76% { left: -2310px; opacity: 0; }
   80% { left: 0px; opacity: 1; }
   84% { left: 0px; opacity: 1; }
   96% { left: 0px; opacity: 1; z-index: 0; }
   100%{ left: 310px; opacity: 0; z-index: 0; }
}