﻿#slider { 

  width:750px; 
  height:230px; 
  margin-left:10px; 
  overflow:visible; 
  background-color:#362c30; 
  border:2px solid #362c30;
  -ms-transition:all 150ms ease-in;
/*   transition:all 150ms ease-in;  */
  -moz-transition:all 150ms ease-in; 
  -webkit-transition:all 150ms ease-in; 
  -o-transition:all 150ms ease-in; 
  position:relative; 
  transform:rotate(0deg); 
  -ms-transform:rotate(0deg); 
  -moz-transform:rotate(0deg); 
  -webkit-transform:rotate(0deg); 
  -o-transform:rotate(0deg); 
} 
#mask { 
  overflow:hidden; 
} 
#slider:hover { 
  /* background-color:#fff; 
  border:10px solid #fff;  */
  /* -webkit-animation:rotatey 400ms ease-out;  */
 /*  -moz-animation:rotatey 400ms ease-out;  */
} 
#slider:hover #pause { 
  opacity:1; 
} 
#slider:hover #progress { 
  background-color:rgba(255,255,255,0.0); 
} 
#slider:hover ul, #slider:hover #progress, #slider:hover #overlay { 
  -moz-animation-play-state:paused; 
  -webkit-animation-play-state:paused;
  -ms-animation-play-state:paused;  
} 
#pause { 
  width:750px; 
  height:230px; 
  position:absolute; 
  top:0; 
  opacity:0; 
/*   background-image:url('http://zornet.ru/Ajaxoskrip/Fekstura_tekst/demo/paused.png');  */
  background-position:566px 10px; 
  background-repeat:no-repeat; 
  pointer-events:none; 
   /*  transition:all 150ms ease-in; */
  -moz-transition:all 150ms ease-in; 
  -webkit-transition:all 150ms ease-in; 
  -o-transition:all 150ms ease-in; 
  -ms-transition:all 150ms ease-in;
} 
#progress { 
  width:1px; 
  height:1px; 
  background-color:#ffd000; 
  -moz-animation:progress 18s infinite; 
  -webkit-animation:progress 18s infinite;
  -ms-animation:progress 18s infinite; 
  position:relative; 
  top:-1px; 
  /* transition:all 150ms ease-in; */
  -moz-transition:all 150ms ease-in; 
  -webkit-transition:all 150ms ease-in; 
  -o-transition:all 150ms ease-in;
  -ms-transition:all 150ms ease-in;   
} 
#overlay { 
  width:750px; 
  height:230px; 
  position:absolute; 
  top:0; 
  background-position:center; 
  background-repeat:no-repeat; 
  pointer-events:none;  
  -moz-transition:all 150ms ease-in; 
  -webkit-transition:all 150ms ease-in; 
  -o-transition:all 150ms ease-in; 
  -ms-transition:all 150ms ease-in;  
  opacity:0.5; 
  -moz-animation:overlay-fade 18s infinite; 
  -webkit-animation:overlay-fade 18s infinite;
  -ms-animation:overlay-fade 18s infinite;   
} 
#slider ul { 
  width:3000px; 
  list-style:none; 
  padding:0; 
  margin-top:0; 
  -moz-animation:slide-animation 18s infinite; 
  -webkit-animation:slide-animation 18s infinite; 
  -ms-animation:slide-animation 18s infinite; 
  animation:slide-animation 18s infinite; 
  position:relative; 
  left:0px; 
} 
#slider li { 
  display:inline; 
  width:750px; 
  height:230px; 
  margin:0; 
  padding:0; 
  float:left; 
  position:relative; 
/*   background-image:url(http://iamceege.com/pure-css3-content-slider/images/loader.gif);  */
  background-position:50% 50%; 
  background-repeat:no-repeat; 
} 
#slider li:last-of-type { 
  background-color:#362c30; 
} 
#slider li a { 
  display:block; 
  text-decoration:none; 
} 
#slider li span { 
  display:block; 
  width:560px; 
  padding:15px 20px; 
  position:absolute;  
  bottom:0;  
  left:0; 
  /* background-color:rgba(54,44,48,0.6); 
  border-top:1px solid #362c30;  */
  text-shadow:1px 1px 1px #362c30; 
  pointer-events:none; 
  text-align:left; 
} 
#slider-shadow { 
  width:100%; 
  height:230px; 
/*   background-image:url(http://iamceege.com/pure-css3-content-slider/images/slider-shadow.png);  */
  background-position:center bottom; 
  background-repeat:no-repeat; 
/*   margin:10px auto 0;  */
} 
@-ms-keyframes slide-animation { 
0% {opacity:0;} 
2% {opacity:1;} 
20% {left:0px; opacity:1;} 
22.5% {opacity:0.6;} 
25% {left:-750px; opacity:1;} 
45% {left:-750px; opacity:1;} 
47.5% {opacity:0.6;} 
50% {left:-1500px; opacity:1;} 
70% {left:-1500px; opacity:1;} 
72.5% {opacity:0.6;} 
75% {left:-2250px; opacity:1;} 
95% {opacity:1;} 
98% {left:-2250px; opacity:0;} 
100% {left:0px; opacity:0;} 
} 
@-webkit-keyframes slide-animation { 
0% {opacity:0;} 
2% {opacity:1;} 
20% {left:0px; opacity:1;} 
22.5% {opacity:0.6;} 
25% {left:-750px; opacity:1;} 
45% {left:-750px; opacity:1;} 
47.5% {opacity:0.6;} 
50% {left:-1500px; opacity:1;} 
70% {left:-1500px; opacity:1;} 
72.5% {opacity:0.6;} 
75% {left:-2250px; opacity:1;} 
95% {opacity:1;} 
98% {left:-2250px; opacity:0;} 
100% {left:0px; opacity:0;} 
} 
@-moz-keyframes slide-animation { 
0% {opacity:0;} 
2% {opacity:1;} 
20% {left:0px; opacity:1;} 
22.5% {opacity:0.6;} 
25% {left:-750px; opacity:1;} 
45% {left:-750px; opacity:1;} 
47.5% {opacity:0.6;} 
50% {left:-1500px; opacity:1;} 
70% {left:-1500px; opacity:1;} 
72.5% {opacity:0.6;} 
75% {left:-2250px; opacity:1;} 
95% {opacity:1;} 
98% {left:-2250px; opacity:0;} 
100% {left:0px; opacity:0;} 
} 
@-ms-keyframes progress { 
0% {width:0px; opacity:0;} 
2% {width:0px; opacity:1;} 
20% {width:750px; opacity:1;} 
22.5% {width:750px; opacity:0;} 
22.59% {width:0px;} 
25% {width:0px; opacity:1;} 
45% {width:750px; opacity:1;} 
47.5% {width:750px; opacity:0;} 
47.59% {width:0px;} 
50% {width:0px; opacity:1;} 
70% {width:750px; opacity:1;} 
72.5% {width:750px; opacity:0;} 
72.59% {width:0px;} 
75% {width:0px; opacity:1;} 
95% {width:750px; opacity:1;} 
98% {width:750px; opacity:0;} 
100% {width:0px; opacity:0;} 
} 
@-webkit-keyframes progress { 
0% {width:0px; opacity:0;} 
2% {width:0px; opacity:1;} 
20% {width:750px; opacity:1;} 
22.5% {width:750px; opacity:0;} 
22.59% {width:0px;} 
25% {width:0px; opacity:1;} 
45% {width:750px; opacity:1;} 
47.5% {width:750px; opacity:0;} 
47.59% {width:0px;} 
50% {width:0px; opacity:1;} 
70% {width:750px; opacity:1;} 
72.5% {width:750px; opacity:0;} 
72.59% {width:0px;} 
75% {width:0px; opacity:1;} 
95% {width:750px; opacity:1;} 
98% {width:750px; opacity:0;} 
100% {width:0px; opacity:0;} 
} 
@-moz-keyframes progress { 
0% {width:0px; opacity:0;} 
2% {width:0px; opacity:1;} 
20% {width:750px; opacity:1;} 
22.5% {width:750px; opacity:0;} 
22.59% {width:0px;} 
25% {width:0px; opacity:1;} 
45% {width:750px; opacity:1;} 
47.5% {width:750px; opacity:0;} 
47.59% {width:0px;} 
50% {width:0px; opacity:1;} 
70% {width:750px; opacity:1;} 
72.5% {width:750px; opacity:0;} 
72.59% {width:0px;} 
75% {width:0px; opacity:1;} 
95% {width:750px; opacity:1;} 
98% {width:750px; opacity:0;} 
100% {width:0px; opacity:0;} 
} 
@-ms-keyframes rotatey { 
0% {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);} 
25% {transform:rotate(1deg); -ms-transform:rotate(1deg); -moz-transform:rotate(1deg); -webkit-transform:rotate(1deg); -o-transform:rotate(1deg);} 
50% {transform:rotate(-1deg); -ms-transform:rotate(-1deg); -moz-transform:rotate(-1deg); -webkit-transform:rotate(-1deg); -o-transform:rotate(-1deg);} 
100% {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);} 
} 
@-webkit-keyframes rotatey { 
0% {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);} 
25% {transform:rotate(1deg); -ms-transform:rotate(1deg); -moz-transform:rotate(1deg); -webkit-transform:rotate(1deg); -o-transform:rotate(1deg);} 
50% {transform:rotate(-1deg); -ms-transform:rotate(-1deg); -moz-transform:rotate(-1deg); -webkit-transform:rotate(-1deg); -o-transform:rotate(-1deg);} 
100% {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);} 
} 
@-moz-keyframes rotatey { 
0% {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);} 
25% {transform:rotate(1deg); -ms-transform:rotate(1deg); -moz-transform:rotate(1deg); -webkit-transform:rotate(1deg); -o-transform:rotate(1deg);} 
50% {transform:rotate(-1deg); -ms-transform:rotate(-1deg); -moz-transform:rotate(-1deg); -webkit-transform:rotate(-1deg); -o-transform:rotate(-1deg);} 
100% {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);} 
} 
 @-ms-keyframes overlay-fade { 
0% {opacity:0;} 
2% {opacity:0.5;} 
95% {opacity:0.5;} 
98% {opacity:0;} 
100% {opacity:0;} 
} 
@-webkit-keyframes overlay-fade { 
0% {opacity:0;} 
2% {opacity:0.5;} 
95% {opacity:0.5;} 
98% {opacity:0;} 
100% {opacity:0;} 
} 
@-moz-keyframes overlay-fade { 
0% {opacity:0;} 
2% {opacity:0.5;} 
95% {opacity:0.5;} 
98% {opacity:0;} 
100% {opacity:0;} 
} 
#slider ul li span h2 { 
  font-size:24px; 
  line-height:24px; 
  color:#fff; 
  font-weight:normal; 
  font-family:'Communist-Regular'; 
  text-shadow:1px 1px 1px #362c30; 
}