/* 1px image background */

header {
   position: center;
   width: 1200px;
   height: auto; /* Adjust as needed */
   overflow: hidden;
}

body {
   background-image: url('images/background.PNG');
   background-repeat: repeat;
   font-family: Arial, sans-serif;
   margin: auto;
   padding: 20px;
   width: 1200px;
   height: auto;
   color: white !important;
   
}
#content {
   padding: 10px;
   width: auto;
   height: auto;
}

/*..............................*/
#lewy {
   float: left;
   width: 70%;
}

#prawy {
   float: left;
   width: 30%;
  
}


/*..............................*/
#menu {
   text-align: left;
   overflow: hidden;
   font-family: calibri, tahoma;
   bottom: 0px;
   right: 10px;
   left: 0px;
   background-color: rgba(0, 0, 0, 0.5);
   padding: 7px;
   border-radius: 5px;
}

ul#menu li {
   border: 1px solid #7d7c7c;
   list-style-type: none;
   float: left;
   background: #e9e9e9;
   margin-left: 3px;
}

   ul#menu li:hover {
      border: 1px solid #760d0d;
      list-style-type: none;
      float: left;
      background: #f0f0f0;
      margin-left: 3px;
   }

   ul#menu li a {
      display: block;
      padding: 4pt;
      text-decoration: none;
      background: #4d3d29;
      font-size: 20px;
      color: white;
      
   }

   ul#menu li li a {
      width: 200px;
   }

   ul#menu li li:hover {
      background: black;
   }

   ul#menu li ul {
      overflow: hidden;
      display: none;
   }

   ul#menu li:hover ul {
      position: absolute;
      background: #aaa;
      padding: 0;
      display: block;
      width: 160px;
   }
.container {
   position: relative;
}
.image2 {
   position: absolute;
   left: +920px;
   top:+1px;width
}
/* slider.............................................g */
.slider {
   position: relative;
   width: 40%;
   height: 40%;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
   animation: 30s cubic-bezier(1, 0.95, 0.565, 1) sliding infinite;
}

.slide {
   position: relative;
   min-width: 100%;
   height: 100%;
}

   .slide img {
      width: 100%;
      height: 100%;
   }

   .slide .caption {
      position: absolute;
      left: 0;
      bottom: 5%;
      font-size: 5rem;
      font-weight: 600;
      color: white;
      text-transform: capitalize;
      backdrop-filter: blur(10px);
      padding: 1rem 5rem;
      border-radius: 0 2rem 2rem 0;
   }

  

@keyframes sliding {
   0% {
      transform: translateX(0%);
   }

   20% {
      transform: translateX(0%);
   }

   25% {
      transform: translateX(-100%);
   }

   45% {
      transform: translateX(-100%);
   }

   50% {
      transform: translateX(-200%);
   }

   70% {
      transform: translateX(-200%);
   }

   75% {
      transform: translateX(-300%);
   }

   95% {
      transform: translateX(-300%);
   }

   100% {
      transform: translateX(-400%);
   }
}