#mygallery1 {
    flex-basis: 605px;
    background-image: url('../image/1.png');
    width: 615px; /* Ширина первого блока */
    height: 281px; /* Высота первого блока */
    color: #05363A; 
}



/* Добавленный стиль для эффекта fadeIn */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}


.mySlides {display: none}

/* Контейнер слайд-шоу */
.slideshow-container {
  background-color: rgba(5,54,58,1);
  background-size: cover;
  max-width: 100%;
  position: relative;
  margin: auto;
  overflow: hidden;
  transform-origin: top left;
}

/* Вперед и назад кнопки */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Расположите кнопку "вперед" справа */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* При наведении курсора мыши добавьте черный цвет фона с небольшим прозрачным слоем */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}



/* ////////////////////////////////////////////////////////////// */













.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.block_txt {
  font-family: Verdana, sans-serif; 
  color: #f2f2f2;
  font-size: 20px;
  animation: slideInRight 1s;
  padding-left: 370px;
}








.fade-in-image_slide {
  position: absolute;
  padding-right: 480px;
  z-index: 1; 
}

.fade-in-image_slide img {
  opacity: 0; /* Initially invisible */
  animation: fadeIn 1.5s ease-in-out; /* Animation name, duration, timing function */
  animation-fill-mode: forwards; /* Keep final opacity after animation */
}


@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}





.image_ot {
  position: absolute;
  padding-right: 420px;
  z-index: 1; 
  animation: fadeIn 1.5s ease-in-out; 
}



.image_or {
  position: absolute;
  padding-right: 440px;
  z-index: 1; 
  animation: fadeIn 1.5s ease-in-out; 
}


@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}



.logo {
  position: absolute;
  padding-right: 480px;
  z-index: 1; 
}

.logo img {
  animation: fadeIn 1.5s ease-in-out; 
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}










.block_tb {
  position: absolute;
  bottom: 120px;
  left: -61px; /* Сдвигаем блок влево на 20 пикселей */
  animation: slideInRight 1s;
}





.block_tb2 {
  position: absolute;
  bottom: -55px;
  animation: slideInRight 1.3s;
}



.block_tb3 {
  position: absolute;
  bottom: -230px;
  left: -64px; /* Сдвигаем блок влево на 20 пикселей */
  animation: slideInRight 1.6s;
}





.block_tb4 {
  position: absolute;
  bottom: 60px;
  left: -24px; /* Сдвигаем блок влево на 20 пикселей */
  animation: slideInRight 1s;
}





.block_tb5 {
  position: absolute;
  bottom: -160px;
  left: -21px; /* Сдвигаем блок влево на 20 пикселей */
  animation: slideInRight 1.3s;
}








@keyframes slideInRight {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}























/* Медиа-запросы для адаптации под различные устройства */
@media screen and (max-width: 768px) {
  .block_txt {
    padding-left: 50px; /* Изменяем отступ для меньших экранов */
  }

  .fade-in-image_slide {
    padding-right: 50px; /* Изменяем отступ для меньших экранов */
    display: none;
  }

  .image_ot {
    display: none;
  }

  .image_or {
    display: none;
  }

  .logo {
    display: none;
  }

  .block_tb{
    left: -150px;
  }
  .block_tb1{
    left: -150px;
  }
  .block_tb2{
    left: -150px;
  }
  .block_tb3{
    left: -150px;
  }
  .block_tb4{
    left: -150px;
  }
  .block_tb5{
    left: -150px;
  }
}

@media screen and (max-width: 480px) {
  .block_txt {
    padding-left: 20px; /* Изменяем отступ для очень маленьких экранов */
  }

  .fade-in-image_slide {
    padding-right: 20px; /* Изменяем отступ для очень маленьких экранов */
    display: none;
  }

  .image_ot {
    display: none;
  }

  .image_or {
    display: none;
  }


  .logo {
    display: none;
  }
}






#allrecords a {
    color: #fff;
    text-decoration: none;
}


/*///////////////////////////////////////////////////////////// */























/* Точки/пули/индикаторы */
/* Стиль для индикаторов точек */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
  position: relative;
  z-index: 2; /* Устанавливаем z-index поверх других элементов */
}

/* Стиль для контейнера точек */
.text-center {
  text-align: center;
  position: absolute;
  margin-top: -50px;
  width: 100%;
  z-index: 1; /* Устанавливаем z-index ниже других элементов */
}


.active, .dot:hover {
  background-color: #717171;
}



/* На небольших экранах уменьшите размер текста */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}

.bg-fixed {
    top: auto;
    left: auto;
    background-attachment: fixed;
    background-position: center top;
    background-size: cover;
    width: auto;
    min-width: 100%;
    min-height: 100%;
}



.back_slide {
  animation: fadeIn 1s, zoomIn 22s;

}



@keyframes zoomIn {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.2);
  }
}




@keyframes fadeInZoom{
  0% {
    opacity: 0;
    transform: scale(1);
  }
  10% {
    opacity: 1;
    transform: scale(1);
  }
  20%, 100% {
    opacity: 1;
    transform: scale(1.2);
  }
}

.mySlides {
  background-color: rgba(5,54,58,1);
}







.animation-container {
  display: flex;
  overflow: hidden;
  color: #f2f2f2;
  font-size: 15px;
  padding: 118px 252px;
  position: absolute;
  bottom: 600px;
  width: 100%;


  opacity: 0; /* Начальная непрозрачность */
  animation: fadeIn 1s forwards; /* Анимация fadeIn */


}

.animated {
  animation-duration: 1s; /* Продолжительность анимации */
  animation-fill-mode: both;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.slideInRight {
  animation-name: slideInRight;
}