Новые 100 комментариев на сайте

.clr {clear: both;}
@media only screen and (max-width:992px)
{
     #left-buttons
     {
     display: none;
     }
}
@media only screen and (min-width:992px)
{
     #left-buttons
     {
     display: block;
     bottom: 0;
     left: 0;
     right: 0;
     margin: auto;
     position: fixed;
     width: 260px;
     z-index: 100;
     }
     .waaktut {position: relative;}
     .waaktut div
     {
     background: #141414;
     border-top: 1px solid #4c4c4c;
     display: block;
     height: 65px;
     width: 65px;
     float: left;
     text-align: center;
     }
     #left-buttons div.buy-supplement
     {
     border-top: 0;
     border-top-right-radius: 3px;
     moz-border-radius-topright: 3px;
     webkit-border-top-right-radius: 3px;
     }
     #left-buttons div.support
     {
     border-bottom-right-radius: 3px;
     moz-border-radius-bottomright: 3px;
     webkit-border-bottom-right-radius: 3px;
     }
     #left-buttons div:hover
     {
     background: #ff5100;
     }
     #left-buttons div>a i
     {
     color: #fff;
     font-size: 18px;
     line-height: 60px;
     }
}

.field-tip .tip-content
{
     background: #141414;
     color: #fff;
     moz-transition: opacity 250ms ease-out;
     ms-transition: opacity 250ms ease-out;
     opacity: 0;
     o-transition: opacity 250ms ease-out;
     padding: 10px;
     position: absolute;
     right: 0px;
     left: 0;
     bottom: -200px;
     transition: opacity 250ms ease-out;
     webkit-transition: opacity 250ms ease-out;

}
.waaktut div:hover .tip-content
{
     opacity: 1;
     z-index: 2;
bottom: -2px;
}

        
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div id="left-buttons">
     <div class="waaktut">
     <div class="buy-supplement">
     <a class="field-tip" href="#" target="_blank"><i class="fa fa-shopping-basket" aria-hidden="true"></i><span class="tip-content">Купить шаблон</span></a>
     </div>
     <div class="admin-panel">
     <a class="field-tip" href="#" target="_blank"><i class="fa fa-cogs" aria-hidden="true"></i><span class="tip-content">Админ-панель<br>логин и пароль: demo</span></a>
     </div>
     <div class="documentation">
     <a class="field-tip" href="#" target="_blank"><i class="fa fa-file-text-o" aria-hidden="true"></i><span class="tip-content">Документация</span></a>
     </div>
     <div class="support">
     <a class="field-tip" href="#" target="_blank"><i class="fa fa-users" aria-hidden="true"></i><span class="tip-content">Техническая поддержка</span></a>
     </div>

     <span class="clr"></span>
     </div>
</div>

/*.material_informat {display:table;width:100%;}*/        
.material_informat_left {display:table-cell;vertical-align:top;/*width:530px;*/padding-top:5px;padding-bottom:5px}

<script type="text/javascript">
var switcher = $('.kadoves label:first-child');
var delayTime = 5000; // задержка в миллисекундах
$(document).ready(function(){
        $(switcher).addClass("active");
        setTimeout(autoAddClass, delayTime);
});

function autoAddClass(){
    var next = $(".active").removeClass("active").next();
    if(next.length)
        $(next).addClass('active');
    else
        $(switcher).addClass('active');
        $(".kadoves .active").click(); //автоклик
    setTimeout(autoAddClass, delayTime);
}
</script>

$(function() {
 var interval = setInterval(function(){
  $(".next").click();
 }, 5000); //задержка в миллисекундах
 $(".noguma-pomoki-kadra, .prev").click(function(){
  clearInterval(interval); //остановка
 });
});

$(function() {
 var interval = setInterval(function(){
  $(".pokazatel-snimka.right").click();
 }, 5000); //задержка в миллисекундах
 $(".btm-slides span, .pokazatel-snimka.left").click(function(){
  clearInterval(interval); //остановка
 });
});

<div class="wrap">
  <h1>Best in Chrome</h1>
  <div class="menu">
  <input type="checkbox" name="toggle" id="toggle"/>
  <label for="toggle"><span>Profile</span></label>
  <ul>
  <li><a>Account Settings</a></li>
  <li><a>Statistics</a></li>
  <li><a>Link</a></li>
  <li><a>Record</a></li>
  <li><a>Database</a></li>
  <li><a>Sign Out</a></li>
  </ul>  
  </div>
</div>

.wrap {
  width: 300px;
  margin: 0 auto;
  margin-top: 30px;
}
.menu {
  width: 300px;
  text-transform: uppercase;
  font-size: 14px;
}
input#toggle {
  position: absolute;
  z-index: -9999;
}
input#toggle:checked ~ label {
  background: #42423E;
}
input#toggle:checked ~ ul {
  display: block;
  opacity: 1;
  animation-play-state: running;  
}
ul {
  margin: 0px 0 0 0;
  display: none;
  opacity: 0;
  animation: fade .5s linear;
  animation-play-state: paused;  
}
label, li {
  width: 300px;
  background: #DF826B;
  display: block;
  padding: 15px 20px;
  cursor: pointer;  
}
label {
  box-shadow: 0 6px 10px -6px #4F4F4B;
}
li {
  border-bottom: 3px solid #42423E;
}
li:hover, label:hover {
  background: #42423E;
}

li:last-child {
  border: none;
  box-shadow: 0 6px 10px -6px #4F4F4B;
}
a, span, h1 {
  color: #FFFFFF;
  text-fill-color: transparent;
  background: linear-gradient(transparent, transparent), linear-gradient(to bottom, #ffffff 0%,#efe9e8 100%) no-repeat;
  background: -o-linear-gradient(transparent, transparent);
  -webkit-background-clip: text;  
  cursor: pointer;  
}
h1{
  font-size: 20px;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 10px 40px;
}
@keyframes fade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}