.bev{
    position: relative;
    background-image     : url("../media/climbing.png");
    
    background-size      : cover;
    background-color     : #272822;
    height: 500px;
}

.rovbev{
    position: absolute;
    top: 15%;
    bottom: 15%;
    left: 75%;
    background-color: rgb(207, 201, 201);
    padding: 10px;
    border: 2px solid #000; 
}

.h2elso{
    position: absolute;
    top: 85%;
    bottom: 0%;
    left: 70%;
    right: 0%;
    background-color: rgb(207, 201, 201);
    padding: 10px;
    border: 2px solid #000; 
}

.h2masodik{
    position: absolute;
    top: 0%;
    bottom: 85%;
    left: 70%;
    right: 0%;
    background-color: rgb(207, 201, 201);
    padding: 10px;
    border: 2px solid #000; 
}

.im1 {
  position: relative;
}

.image,
.video {
  width: 60%;
  height: auto;
  border: 2px solid #000; 
}

.textblock {
  position: absolute;
  top: 25%; 
  bottom : 25%;
  left: 50%; 
  background-color: rgb(207, 201, 201);
  padding: 10px;
  border: 2px solid #000; 
}

.video-block {
  position: relative;
}

.video{
    position: relative;
}
.vid1 {
  position: absolute;
  width: 60%;
  height: 500px;
  left: 50%;
  border: 2px solid #000;
}

.vidleiras {
  position: absolute;
  top: 25%; 
  bottom : 25%;
  left: 60%; 
  background-color: rgb(207, 201, 201);
  padding: 10px;
  border: 2px solid #000; 
}
.thumbnail2 {
    position: relative;
    width: 60%;
    /* left: 40%;
    right: 13%; */
    height: auto;
    margin-left: 40%;
    margin-right: auto;
    border: 2px solid #000; 
}


.thumbnail,
.thumbnail3 {
    width: 60%;
    height: auto;
    border: 2px solid #000; 
}
.im2,
.im3,
.im4 {
  
  position: relative;
  height: 25%;
  margin-bottom: 40px;
  display: block;

}



.textblock2 {
  position: absolute;
  top: 25%; 
  bottom : 25%;
  left: 50%; 
  background-color: rgb(207, 201, 201); 
  padding: 10px;
  border: 2px solid #000; 
}

.textblock3 {
  position: absolute;
  top: 25%; 
  bottom: 25%;
  left: 10%; 
  right: 40%;
  background-color: rgb(207, 201, 201); 
  padding: 10px;
  border: 2px solid #000; 
}
.textblock4 {
  position: absolute;
  top: 25%; 
  bottom : 25%;
  left: 50%; 
  background-color: rgb(207, 201, 201); 
  padding: 10px;
  border: 2px solid #000; 
}

.vidleiras,
.textblock,
.textblock2,
.textblock3,
.textblock4 {
  width: 40%;
  overflow-wrap: break-word;
  word-wrap: break-word;
  box-sizing: border-box;
  overflow: auto;
}

@media (max-width: 1300px){
    .h2elso,
    .h2masodik{
    position: static;
    width: 100%;
    margin: 10px 0;
    }
}
@media (max-width: 850px) {
  .h2elso,
  .h2masodik,
  .bev,
  .vidleiras,
  .video,
  .rovbev,
  .h2masodik,
  .textblock,
  .textblock2,
  .textblock3,
  .textblock4,
  .image,
  .thumbnail2,
  .thumbnail,
  .thumbnail3 {
    position: static;
    width: 100%;
    margin: 10px 0;
  }

  
}
@media (max-width: 850px) {
  .bev {
    height: auto;
    padding: 20px;
  }
}
@media (max-width: 850px) {
  .rovbev {
    position: static;
    width: 100%;
    margin-top: 20px;
  }
}

.rovbev {
  overflow-y: auto;
  max-height: 100%;
}

/* .im3,
.im4 {
  height: auto;
  display: block;
} */



table,
td,
th {
    border : 1px solid darkgreen;
    padding: 6px;
}

table {
    border-collapse : collapse;
    background-color: lightgreen;
    caption-side    : top;
    justify-content: center;
    text-align: center;
    padding: 10px;
}


.tablazat {
  display: flex;
  justify-content: center;
  margin: 20px 20px;
}


body {
    font-family: Arial, sans-serif;
}
header {
    background-color: #f8f8f8;
    padding: 10px 0;
    text-align: center;
}
nav#fomenu p {
    margin: 0;
}
nav#fomenu a {
    margin: 0 10px;
    text-decoration: none;
    color: #333;
}
nav#fomenu a:hover {
    text-decoration: underline;
}

nav#topharomboulder p {
    margin: 0;
}
nav#topharomboulder a {
    margin: 0 10px;
    text-decoration: none;
    color: #333;
}
nav#topharomboulder a:hover {
    text-decoration: underline;
}

nav#urlap p {
    margin: 0;
}
nav#urlap a {
    margin: 0 10px;
    text-decoration: none;
    color: #333;
}
nav#urlap a:hover {
    text-decoration: underline;
}
.container {
    width: 80%;
    margin: 0 auto;
}
.image-placeholder {
    width: 100%;
    height: 200px;
    background-color: #ddd;
    text-align: center;
    line-height: 200px;
    margin: 20px 0;
}
section {
    margin: 20px 0;
}
/* .video-placeholder {
    width: 100%;
    height: 300px;
    background-color: #ddd;
    text-align: center;
    line-height: 300px;
    margin: 20px 0;
} */


.form-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  border: 2px solid #ccc;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.form-column {
  flex: 1;
  margin: 10px;
}

.form-column label, .form-column input, .form-column textarea, .form-column p {
  /* display: block; */
  margin-bottom: 10px;
}

input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}

fieldset {
  margin-bottom: 20px;
  padding: 10px;
  border-radius: 5px;
}

@media (max-width: 768px) {
  .form-container {
    flex-direction: column;
  }
}

@media screen and (min-Width: 900px){
    .form-column{
        columns: 2;
    }

    canvas{
        float: right;
    }
}

.radio-group {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}