body{
  background-color: lightgray;
}

h1{
  font-weight: bold;
  text-align: center;
}

h2{
  font-weight: 500;
}


h6{
  font-weight: bold;
  font-size: 45px;
}

/*Elválasztó vonal*/
hr {
    height: 1px;
    background-color: #000000;
  }  
/*Elválasztó vonal vége*/


/*Slide*/
.carousel-item{
    height: 500px;
    background: #000000;
    color: white;
    position: relative;
    background-position: center;
    background-size: cover;
}

.container{
    position: absolute;
    bottom:0;
    left:0;
    right:0;
    padding-bottom:50px;
}

.overlay-image{
    position: absolute;
    bottom:0;
    left:0;
    right:0;
    top:0;
    background-position: center;
    background-size: cover;
    opacity: 0.5;
}
/*Slide vége*/


/**/
.leiras {
  background-color: #cccccc;
  border: 5px solid #666666;
  border-radius: 5px;
  text-align: center;
  margin: 25px;
  padding: 20px;
  flex: 1 1 300px; /*A 300px érték miatt fogja bedobni 300px után a két oszlopot egymás alá*/
}

.leiras:hover {
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
transform: translateY(-5px);
}
/*Leírás vége*/


/*Képsor*/
div.gallery {
  border: 1px solid #ccc;
}

div.gallery:hover {
  box-shadow: 0 30px 15px rgba(0, 0, 0, 0.2);
  transform: translateY(-5px);  
}

div.gallery img {
  width: 100%;
  height: 200px;
  border-radius: 20px;
}

div.desc {
  padding: 15px;
  text-align: center;
}

* {
  box-sizing: border-box;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.kepsor{
  margin-top: 20px;
}
/*Képsor vége*/

.image-container {
  max-width: 100%; /* Az oldal szélességéhez igazodik */
  overflow: hidden; /* Ha a szülő kisebb, a kép ne lógjon ki */
}

.responsive-image {
  width: 100%; /* A kép teljes szélességet felvesz */
  height: 250px; /* Megőrzi az arányokat */
  display: block; /* Eltünteti a kép melletti marginokat */
}

@media (max-width: 576px){
  .responsive-image{
    height: 200px;
  }
}

@media (max-width: 400px){
  .responsive-image{
    height: auto;
  }
}

/*Lábléc*/
.lablec {
    margin-top: 20px;
    background-color: rgb(130, 130, 130);
    padding: 20px;
    text-align: center;
  }
  
  @media screen and (max-width: 600px) {
    .lablec {
      font-size: 14px;
    }
}
/*Lábléc vége*/