.catalog-block{display:block;margin:0;padding:8px;border-radius:10px;border-top:3px solid #e8e8e8;border-bottom:3px solid #e8e8e8;background:url(/images/obloko.jpg.pagespeed.ce.Q-2QsrlJo9.jpg);text-align:center}#slider{background:#008b8b;border:5px solid #ffd700;box-shadow:1px 1px 5px rgba(0,0,0,.7);height:60px;width:468px;margin:0 auto 0;overflow:visible;position:relative}#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:.7s;transition-timing-function:ease-in;transition-delay:.3s}a:hover{color:#483d8b}#slider2{background:#008b8b;border:5px solid #ffd700;box-shadow:1px 1px 5px rgba(0,0,0,.7);height:60px;width:468px;margin:0 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,.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,.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; }
}