@font-face {
  font-family: 't2';
  src: url('../ttf/2.ttf');
}

.title1{
  position: absolute;
  top: 20%;
  left: 2%;
  width: 50%;
  font-family: 't2';
  font-size: 67px;
  color: #8B4513;
  text-shadow: 
  -1px -1px 0 #000, 
   1px -1px 0 #000, 
  -1px  1px 0 #000, 
   1px  1px 0 #000; 
  letter-spacing: 3px;
  animation-name: animt;
  animation-duration: 3s;
  background-color: rgba(255, 255, 255, 0.7);
  box-shadow: 10px 10px 50px 10px rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  z-index: 2;
  padding: 1%;
  padding-top: 1%;
  padding-left: 1%;
  padding-right: 1%;
}

@media screen and (max-width: 768px){
  .title1{
    font-size: 16px;
    text-shadow: none;
    top: 10%;
  }
}

@keyframes animt{
  0%{
    left: 100%;
    opacity: 0;
  }

  100%{
    left: 2%;
    opacity: 1;
  }
}

  
.im1 {
  position: absolute;
  height: 100%;
  top: 0;
  right: 0;
  transition: 5s;
  animation-name: anim1;
  animation-duration: 3s;
  }

  @media screen and (max-width: 768px){
    .im1{
        height: 40%;
        animation-name: none; /* Отключаем анимацию для мобильных устройств */
        animation-duration: 0s;
    }
  }


  @keyframes anim1{
    0%{
      right: 100%;
      height: 50%;
      opacity: 0;
    }

    100%{
      right: 1%;
      height: 100%;
      opacity: 1;
    }
  }

.im2 {
    position: absolute;
    height: 100%;
    top: 0;
    right: 0;
    animation-name: anim2;
    animation-duration: 7s ;
  }

  @media screen and (max-width: 768px){
    .im2{
        height: 40%;
        animation-name: none; /* Отключаем анимацию для мобильных устройств */
        animation-duration: 0s;
    }
  }

  @keyframes anim2{
    0%{
        opacity: 0;
        height: 50%;
    }

    50%{
        opacity: 0;
    }

    100%{
        opacity: 1;
        height: 100%;
    }
  }