div#slider {
  overflow: hidden;
  margin: auto;
  width: 100%;
  max-width: 1200px;
  max-height: 400px;
}
div#slider div {
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  font-size: 0;
  animation: 20s slider infinite;
}
div#slider div img {
  width: 20%;
  float: left;
}
@keyframes slider {
  0% {
    left: 0%;
  }
  20% {
    left: 0%;
  }
  25% {
    left: -100%;
  }
  45% {
    left: -100%;
  }
  50% {
    left: -200%;
  }
  70% {
    left: -200%;
  }
  75% {
    left: -300%;
  }
  95% {
    left: -300%;
  }
}
a.bott{
display: block;
    font-size: 1.1em;
    width: 120px;
    text-decoration: none;
    text-align: center;
    font: bold 14px arial;
    text-transform: uppercase;
    padding: 10px 15px;
    margin: 20px auto;
    color: #ccc;
    background-color: #ff0000;
    background-image: linear-gradient(top, #888 0%, #555 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fb5432), color-stop(1, #d634c787));
    background-image: -moz-linear-gradient(top, #888 0%, #555 100%);
    background-image: -o-linear-gradient(top, #888 0%, #555 100%);
    border: none;
    border-radius: 3px;
    text-shadow: 0px -1px 0px #000;
    box-shadow: 0px 1px 0px #e1468b, 0px 5px 0px #ad0c67, 0px 6px 6px rgb(223 69 142);
    -webkit-transition: ease .15s all;
    -moz-transition: ease .15s all;
    -o-transition: ease .15s all;
    transition: ease .15s all;
    -webkit-animation: none;
    -moz-animation: none;
    -o-animation: none;
    animation: none;
}
a.bott:hover, a.bott:focus{
-webkit-animation: linear 1.2s light infinite;
-moz-animation: linear 1.2s light infinite;
-o-animation: linear 1.2s light infinite;
animation: linear 1.2s light infinite;
}
@-webkit-keyframes light{
0%   { color: #ddd; text-shadow: 0px -1px 0px #000; }
50%   { color: #fff; text-shadow: 0px -1px 0px #444, 0px 0px 5px #ffd, 0px 0px 8px #fff; }
100% { color: #ddd; text-shadow: 0px -1px 0px #000; }
}
@-moz-keyframes light{
0%   { color: #ddd; text-shadow: 0px -1px 0px #000; }
50%   { color: #fff; text-shadow: 0px -1px 0px #444, 0px 0px 5px #ffd, 0px 0px 8px #fff; }
100% { color: #ddd; text-shadow: 0px -1px 0px #000; }
}
@-o-keyframes light{
0%   { color: #ddd; text-shadow: 0px -1px 0px #000; }
50%   { color: #fff; text-shadow: 0px -1px 0px #444, 0px 0px 5px #ffd, 0px 0px 8px #fff; }
100% { color: #ddd; text-shadow: 0px -1px 0px #000; }
}
@keyframes light{
0%   { color: #ddd; text-shadow: 0px -1px 0px #000; }
50%   { color: #fff; text-shadow: 0px -1px 0px #444, 0px 0px 5px #ffd, 0px 0px 8px #fff; }
100% { color: #ddd; text-shadow: 0px -1px 0px #000; }
}
a.bott:active{
color: #fff;
text-shadow: 0px -1px 0px #444,0px 0px 5px #ffd,0px 0px 8px #fff;
box-shadow: 0px 1px 0px #666,0px 2px 0px #444,0px 2px 2px rgba(0, 0, 0, .9);
-webkit-transform: translateY(3px);
-moz-transform: translateY(3px);
-o-transform: translateY(3px);
transform: translateY(3px);
-webkit-animation: none;
-moz-animation: none;
-o-animation: none;
animation: none;
}
a.bott1{
display: block;
    font-size: 1.1em;
    width: 200px;
    text-decoration: none;
    text-align: center;
    font: bold 14px arial;
    text-transform: uppercase;
    padding: 10px 15px;
    margin: 20px auto;
    color: #ccc;
    background-color: #ff0000;
    background-image: linear-gradient(top, #888 0%, #555 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #7d6dec), color-stop(1, #262d75));
    background-image: -moz-linear-gradient(top, #888 0%, #555 100%);
    background-image: -o-linear-gradient(top, #888 0%, #555 100%);
    border: none;
    border-radius: 3px;
    text-shadow: 0px -1px 0px #000;
    box-shadow: 0px 1px 0px #46a2ff, 0px 5px 0px #108, 0px 6px 6px #46a2ff;
    -webkit-transition: ease .15s all;
    -moz-transition: ease .15s all;
    -o-transition: ease .15s all;
    transition: ease .15s all;
    -webkit-animation: none;
    -moz-animation: none;
    -o-animation: none;
    animation: none;
}
a.bott1:hover, a.bott1:focus{
-webkit-animation: linear 1.2s light infinite;
-moz-animation: linear 1.2s light infinite;
-o-animation: linear 1.2s light infinite;
animation: linear 1.2s light infinite;
}
@-webkit-keyframes light{
0%   { color: #ddd; text-shadow: 0px -1px 0px #000; }
50%   { color: #fff; text-shadow: 0px -1px 0px #444, 0px 0px 5px #ffd, 0px 0px 8px #fff; }
100% { color: #ddd; text-shadow: 0px -1px 0px #000; }
}
@-moz-keyframes light{
0%   { color: #ddd; text-shadow: 0px -1px 0px #000; }
50%   { color: #fff; text-shadow: 0px -1px 0px #444, 0px 0px 5px #ffd, 0px 0px 8px #fff; }
100% { color: #ddd; text-shadow: 0px -1px 0px #000; }
}
@-o-keyframes light{
0%   { color: #ddd; text-shadow: 0px -1px 0px #000; }
50%   { color: #fff; text-shadow: 0px -1px 0px #444, 0px 0px 5px #ffd, 0px 0px 8px #fff; }
100% { color: #ddd; text-shadow: 0px -1px 0px #000; }
}
@keyframes light{
0%   { color: #ddd; text-shadow: 0px -1px 0px #000; }
50%   { color: #fff; text-shadow: 0px -1px 0px #444, 0px 0px 5px #ffd, 0px 0px 8px #fff; }
100% { color: #ddd; text-shadow: 0px -1px 0px #000; }
}
a.bott1:active{
color: #fff;
text-shadow: 0px -1px 0px #444,0px 0px 5px #ffd,0px 0px 8px #fff;
box-shadow: 0px 1px 0px #666,0px 2px 0px #444,0px 2px 2px rgba(0, 0, 0, .9);
-webkit-transform: translateY(3px);
-moz-transform: translateY(3px);
-o-transform: translateY(3px);
transform: translateY(3px);
-webkit-animation: none;
-moz-animation: none;
-o-animation: none;
animation: none;
}
.flex-container {
    display: flex;
    /* width: 995px; */
    text-align: center;
    align: center;
    text-decoration: none;}
    /* Текст слева */
.gain-left {
  transition: 1s; /* Время эффекта */
  text-align: left; 
}
.gain-left:hover {
  transform: scale(1.2); /* Увеличиваем масштаб */
}
/* Текст по центру */
.gain-center{
  transition: 1s; /* Время эффекта */
  text-align: center; 
}
.gain-center:hover {
  transform: scale(1.2); /* Увеличиваем масштаб */
}
/* Текст справа */
.gain-right {
  transition: 1s; /* Время эффекта */
  text-align: right; 
}
.gain-right:hover {
  transform: scale(1.2); /* Увеличиваем масштаб */
}
.photo {
    display: inline-block; /* Строчно-блочный элемент */
    position: relative; /* Относительное позиционирование */
   }
   .photo:hover::after {
    content: attr(data-title); /* Выводим текст */
    position: absolute; /* Абсолютное позиционирование */
    left: 20%; top: 30%; /* Положение подсказки */
    z-index: 1; /* Отображаем подсказку поверх других элементов */
    background: rgba(255,255,230,0.9); /* Полупрозрачный цвет фона */
    font-family: Arial, sans-serif; /* Гарнитура шрифта */
    font-size: 11px; /* Размер текста подсказки */
    padding: 5px 10px; /* Поля */
    border: 1px solid #333; /* Параметры рамки */
   }