[html]
<style>
/* Common */
.award-winner.quote-box {
    width: 400px;
    margin: auto!important;
    margin-top: 5px!important;
}

.award-winner p {
    color: #3c2b2b;
}

.award-winner  h2 {
   text-align: center;
    font-size: 20px;
    text-shadow: 2px 2px 5px;
    color: #8e6956;
    font-family: cambria;
    font-weight: bold;
    letter-spacing: 0.1em;
}

.side-note {
    text-align: right;
    font-size: 0.7em;
}

.award-winner .content h1 {
font-size:40px;
color:#000;
text-shadow:0px 1px 1px #f4f4f4;
text-align:center;
padding:60px 0 30px;
}

/* LAYOUT */
.award-winner .container {
margin:0 auto;
overflow:hidden;
width: 400px;
}

/* CONTENT SLIDER */
#content-slider {
width:100%;
height:190px;
margin:10px auto 0;
}
/* SLIDER */
#slider {
background:#000;
border:5px solid #fffffff0;
box-shadow:1px 1px 5px rgba(0,0,0,0.7);
height:160px;
width:268px;
margin:20px auto 0;
overflow:visible;
position:relative;
}
#mask {
overflow:hidden;
height:160px;
}
#slider ul {
margin:0;
padding:0;
position:relative;
}
#slider li {
width:268px;
height:160px;
position:absolute;
top:-160px;
list-style:none;
}

#slider li.firstanimation {
-moz-animation:cycle 25s linear infinite;
-webkit-animation:cycle 25s linear infinite;   
}
#slider li.secondanimation {
-moz-animation:cycletwo 25s linear infinite;
-webkit-animation:cycletwo 25s linear infinite;   
}
#slider li.thirdanimation {
-moz-animation:cyclethree 25s linear infinite;
-webkit-animation:cyclethree 25s linear infinite;   
}
#slider li.fourthanimation {
-moz-animation:cyclefour 25s linear infinite;
-webkit-animation:cyclefour 25s linear infinite;   
}
#slider li.fifthanimation {
-moz-animation:cyclefive 25s linear infinite;
-webkit-animation:cyclefive 25s linear infinite;   
}

#slider .tooltip {
background:rgba(0,0,0,0.7);
width:300px;
height:50px;
position:relative;
bottom:50px;
left:-320px;
-moz-transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out; 
}
#slider .tooltip h1 {
color:#fff;
font-size:20px;
font-weight:300;
line-height:60px;
padding:0 0 0 20px;
}
#slider li#first:hover .tooltip,
#slider li#second:hover .tooltip,
#slider li#third:hover .tooltip,
#slider li#fourth:hover .tooltip,
#slider li#fifth:hover .tooltip {
left:0px;
}
#slider:hover li,
#slider:hover .progress-bar {
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused;
}

/* PROGRESS BAR */
.progress-bar {
position:relative;
top:-5px;
width:680px;
height:5px;
background:#000;
-moz-animation:fullexpand 25s ease-out infinite;
-webkit-animation:fullexpand 25s ease-out infinite;
}

/* ANIMATION */
@-moz-keyframes cycle {
0%  { top:0px; }
4%  { top:0px; }
16% { top:0px; opacity:1; z-index:0; }
20% { top:160px; opacity:0; z-index:0; }
21% { top:-160px; opacity:0; z-index:-1; }
92% { top:-160px; opacity:0; z-index:0; }
96% { top:-160px; opacity:0; }
100%{ top:0px; opacity:1; }

}
@-moz-keyframes cycletwo {
0%  { top:-160px; opacity:0; }
16% { top:-160px; opacity:0; }
20% { top:0px; opacity:1; }
24% { top:0px; opacity:1; }
36% { top:0px; opacity:1; z-index:0; }
40% { top:160px; opacity:0; z-index:0; }
41% { top:-160px; opacity:0; z-index:-1; }
100%{ top:-160px; opacity:0; z-index:-1; }
}

@-webkit-keyframes cycle {
0%  { top:0px; }
4%  { top:0px; }
16% { top:0px; opacity:1; z-index:0; }
20% { top:160px; opacity:0; z-index:0; }
21% { top:-160px; opacity:0; z-index:-1; }
50% { top:-160px; opacity:0; z-index:-1; }
92% { top:-160px; opacity:0; z-index:0; }
96% { top:-160px; opacity:0; }
100%{ top:0px; opacity:1; }

}
@-webkit-keyframes cycletwo {
0%  { top:-160px; opacity:0; }
16% { top:-160px; opacity:0; }
20% { top:0px; opacity:1; }
24% { top:0px; opacity:1; }
36% { top:0px; opacity:1; z-index:0; }
40% { top:160px; opacity:0; z-index:0; }
41% { top:-160px; opacity:0; z-index:-1; } 
100%{ top:-160px; opacity:0; z-index:-1; }
}

/* ANIMATION BAR */
@-moz-keyframes fullexpand {
    0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
    4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
   16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
   17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
   18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }
}
@-webkit-keyframes fullexpand {
    0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
    4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
   16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
   17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
   18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }
}
</style>

<div class="award-winner quote-box">
<h2>тут какой-то еще </h2>
<div class="container">
   <div id="content-slider">
      <div id="slider">  <!-- Slider container -->
         <div id="mask">  <!-- Mask -->

          <ul>
         <li id="first" class="firstanimation">  <!-- ID for tooltip and class for animation -->
         <a href="#"> <img src="https://78.media.tumblr.com/904886dbe344f3626a8e5704c52e255e/tumblr_osm594KJb91w9vslno8_400.gif" alt="Cougar"/> </a>
         <div class="tooltip"> <h1>Oberyn Martell</h1> </div>
         </li>

         <li id="second" class="secondanimation">
         <a href="#"> <img src="https://78.media.tumblr.com/eca9e886990ea464f5d76a0d3f31c886/tumblr_osm594KJb91w9vslno5_400.gif" alt="Lions"/> </a>
         <div class="tooltip"> <h1>Knows what he wants</h1> </div>
         </li>
        </ul>

         </div>  <!-- End Mask -->
         <div class="progress-bar"></div>  <!-- Progress Bar -->
      </div>  <!-- End Slider Container -->
   </div>
</div>
<p>Здесь может быть поздравительный текст. Или не быть.</p>
</div>
<div class="side-note">При наведении на слайды появляются комментарии</div>[/html]