/* CSS Document */

body {
  background: linear-gradient(
        to right top,
        #26235bcc,
        #812878cc,
        #a22160cc,
        #cc2336cc,
        #e4682acc,
        #f69824cc
      )
      no-repeat top left fixed,
    url('back_web_2.jpg') no-repeat top left fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  font-family: 'Open Sans', sans-serif;
  min-height: 100%;
  /* height: 100vh; */
}

html,
body {
  height: 100%;
  margin: 0;
}
.wrapper {
  min-height: 100%;

  /* Equal to height of footer */
  /* But also accounting for potential margin-bottom of last child */
  margin-bottom: -80px;
}
.footer,
.push {
  height: 35px;
}

#head {
  max-width: calc(100% - 72px);
  padding: 62px 0px 0px 62px;
}

article {
  margin-left: 62px;
  color: white;
  font-size: 20px;
  max-width: 800px;
  overflow-x: hidden;
}

a {
  color: white;
}

h1 {
  font-weight: 300;
  font-size: 58px;
}

.small {
  margin-left: 62px;
  color: white;
  font-size: 12px;
}

@media (max-width: 600px) {
  #head {
    max-width: calc(100% - 18px);
    padding: 12px 0px 0px 12px;
    margin: 32px auto;
  }

  article {
    margin-left: 12px;
    font-size: 16px;
  }

  h1 {
    font-weight: 300;
    font-size: 42px;
  }

  .small {
    margin-left: 12px;
    color: white;
    font-size: 12px;
    position: initial;
  }
}

@media (min-width: 601px) {
  .mobileOnly {
    color: #fff0;
  }
}

.eq {
  font-size: 0;
}

.noButton {
  opacity: 0.5;
  pointer-events: none;

}

.noButton,
.myButton {
  -moz-box-shadow: inset 0px 1px 0px 0px #a4e271;
  -webkit-box-shadow: inset 0px 1px 0px 0px #a4e271;
  box-shadow: inset 0px 1px 0px 0px #a4e271;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0.05, #89c403),
    color-stop(1, #77a809)
  );
  background: -moz-linear-gradient(top, #89c403 5%, #77a809 100%);
  background: -webkit-linear-gradient(top, #89c403 5%, #77a809 100%);
  background: -o-linear-gradient(top, #89c403 5%, #77a809 100%);
  background: -ms-linear-gradient(top, #89c403 5%, #77a809 100%);
  background: linear-gradient(to bottom, #89c403 5%, #77a809 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#89c403', endColorstr='#77a809',GradientType=0);
  background-color: #89c403;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 20px;
  border: 0px solid #74b807;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  font-family: Arial;
  font-size: 18px;
  padding: 10px 25px;
  text-decoration: none;
  text-shadow: 0px 1px 0px #528009;
}
.myButton:hover {
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0.05, #77a809),
    color-stop(1, #89c403)
  );
  background: -moz-linear-gradient(top, #77a809 5%, #89c403 100%);
  background: -webkit-linear-gradient(top, #77a809 5%, #89c403 100%);
  background: -o-linear-gradient(top, #77a809 5%, #89c403 100%);
  background: -ms-linear-gradient(top, #77a809 5%, #89c403 100%);
  background: linear-gradient(to bottom, #77a809 5%, #89c403 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#77a809', endColorstr='#89c403',GradientType=0);
  background-color: #77a809;
}
.myButton:active {
  position: relative;
  top: 1px;
}

/*.myButtonBlue {*/
/*  -moz-box-shadow: inset 0px 1px 0px 0px #4c96c7;*/
/*  -webkit-box-shadow: inset 0px 1px 0px 0px #4c96c7;*/
/*  box-shadow: inset 0px 1px 0px 0px #4c96c7;*/
/*  background: -webkit-gradient(*/
/*          linear,*/
/*          left top,*/
/*          left bottom,*/
/*          color-stop(0.05, #0377c4),*/
/*          color-stop(1, #0953a8)*/
/*  );*/
/*  background: -moz-linear-gradient(top, #0c66cc 5%, #0953a8 100%);*/
/*  background: -webkit-linear-gradient(top,#0c66cc 5%, #0953a8 100%);*/
/*  background: -o-linear-gradient(top, #0c66cc 5%, #0953a8 100%);*/
/*  background: -ms-linear-gradient(top, #0c66cc 5%, #0953a8 100%);*/
/*  background: linear-gradient(to bottom, #0c66cc 5%, #0953a8 100%);*/
/*  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0377c4', endColorstr='#77a809',GradientType=0);*/
/*  background-color: #0377c4;*/
/*  -moz-border-radius: 8px;*/
/*  -webkit-border-radius: 8px;*/
/*  border-radius: 20px;*/
/*  border: 0px solid #0771b8;*/
/*  display: inline-block;*/
/*  cursor: pointer;*/
/*  color: #ffffff;*/
/*  font-family: Arial;*/
/*  font-size: 18px;*/
/*  padding: 10px 25px;*/
/*  text-decoration: none;*/
/*  text-shadow: 0px 1px 0px #094180;*/
/*}*/
/*.myButtonBlue:hover {*/
/*  background: -webkit-gradient(*/
/*          linear,*/
/*          left top,*/
/*          left bottom,*/
/*          color-stop(0.05, #0953a8),*/
/*          color-stop(1, #0377c4)*/
/*  );*/
/*  background: -moz-linear-gradient(top, #0953a8 5%, #0c5fbe 100%);*/
/*  background: -webkit-linear-gradient(top,  #0953a8 5%, #0c5fbe 100%);*/
/*  background: -o-linear-gradient(top, #0953a8 5%, #0c5fbe 100%);*/
/*  background: -ms-linear-gradient(top #0953a8 5%, #0c5fbe 100%);*/
/*  background: linear-gradient(to bottom, #0953a8 5%, #0c5fbe 100%);*/
/*  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0953a8', endColorstr='#0377c4',GradientType=0);*/
/*  background-color: #0953a8;*/
/*}*/

.myButtonBlue {
  -moz-box-shadow: inset 0px 1px 0px 0px #5a84a0;
  -webkit-box-shadow: inset 0px 1px 0px 0px #5a84a0;
  box-shadow: inset 0px 1px 0px 0px #5a84a0;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0.05, #0377c4),
    color-stop(1, #0953a8)
  );
  background: -moz-linear-gradient(top, #4574a9 5%, #2c5079 100%);
  background: -webkit-linear-gradient(top, #4574a9 5%, #2c5079 100%);
  background: -o-linear-gradient(top, #4574a9 5%, #2c5079 100%);
  background: -ms-linear-gradient(top, #4574a9 5%, #2c5079 100%);
  background: linear-gradient(to bottom, #3e6b9a 5%, #2c5079 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0377c4', endColorstr='#77a809',GradientType=0);
  background-color: #0377c4;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 20px;
  border: 0px solid #5a84a0;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  font-family: Arial;
  font-size: 18px;
  padding: 10px 25px;
  text-decoration: none;
  text-shadow: 0px 1px 0px #094180;
}
.myButtonBlue:hover {
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0.05, #0953a8),
    color-stop(1, #2c4b61)
  );
  box-shadow: inset 0px 1px 0px 0px #3d5a70;
  background: -moz-linear-gradient(top, #1f4d82 5%, #2d5788 100%);
  background: -webkit-linear-gradient(top, #1f4d82 5%, #2d5788 100%);
  background: -o-linear-gradient(top, #1f4d82 5%, #2d5788 100%);
  background: linear-gradient(to bottom, #1f4d82 5%, #2d5788 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0953a8', endColorstr='#0377c4',GradientType=0);
  background-color: #0953a8;
}
.myButtonBlue:active {
  position: relative;
  top: 1px;
}

.buttonIcon {
  margin-left: -4px;
  margin-right: 12px;
}

.transparent {
  display: none;
}
.cookiebar.cookiebar-dark .cookiebar-buttons button,
.cookiebar.cookiebar-dark .cookiebar-moreinfo button {
  margin-top: 0.5em !important;
  border-radius: 25px !important;
  padding: 1px 12px !important;
}


#myForm {
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.required {
  color: red;
}

#myForm input {
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 16px;
  outline: none;
  transition: border-color 0.2s;
  background-color: rgba(255, 255, 255, 0.7);
}

.tooltip {
  position: relative;
  display: inline-block;
  cursor: help;
  font-weight: bold;
  font-size: 14px;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 250px;
  background-color: #333;
  color: #fff;
  text-align: left;
  border-radius: 5px;
  padding: 8px;
  position: absolute;
  z-index: 1;
  bottom: 125%; /* zobrazí se nad ikonou */
  left: 0; /* zarovná vlevo k ikoně */
  margin-left: 10px; /* malý odsazení doprava */
  opacity: 0;
  transition: opacity 0.2s;
  font-weight: normal;
  font-size: 13px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

  .main-container {
    display: flex;
    justify-content: center;
    gap: 40px;
    padding: 20px;
  }

  .info-column {
    flex: 0 0 300px;
    background-color: #fff;
    color: black;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    position: fixed;
    left: 55vw;
    top: 20vh;
    width: 30vw;
    height: fit-content;
  }

  .organizer-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 40vw;
    margin: 15px;
  }

  .organizer-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    width: 35vw;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* subtle shadow for better visual separation */
    opacity: 0;
    transform: translateY(20px);
    animation: fadeIn 0.5s ease-out forwards;
  }

  .organizer-card:nth-child(2) { animation-delay: 0.1s; }
  .organizer-card:nth-child(3) { animation-delay: 0.2s; }
  .organizer-card:nth-child(4) { animation-delay: 0.3s; }
  .organizer-card:nth-child(5) { animation-delay: 0.4s; }

  .photo-column {
    flex: 0 0 auto;
    width: 120px;
    margin-right: 20px;
  }

  .organizer-photo {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 50%;
  }

  .text-column {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .organizer-name {
    font-weight: bold;
    font-size: 1.5em;
    color: #333;
    margin: 0 0 5px 0;
  }

  .organizer-bio {
    font-size: 1em;
    line-height: 1.5;
    color: #666;
    margin: 0;
  }

  .name-highlight {
    background-color: #e0e0e0;
    padding: 5px 10px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 10px;
  }

  /* Keyframes for the animation */
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Media Queries for Cell Phone */
  @media (max-width: 768px) {
    .main-container {
      flex-direction: column;
      gap: 20px;
    }

    .info-column {
      width: 80vw;
      flex: none;
      position: static; /* Unfix the block on mobile */
    }

    .organizer-container {
      gap: 20px;
      padding: 0 20px;
      margin-left: 15vw;
    }

    .organizer-card {
      flex-direction: column; /* Stack photo and text vertically */
      align-items: center;
      width: 70vw;
      margin-left: 10vw;
      padding: 15px;
      text-align: center;
    }

    .photo-column {
      margin-right: 0;
      margin-bottom: 15px;
    }

    .organizer-photo {
      width: 100px;
      height: 100px;
    }

    .organizer-name {
      font-size: 1.2em;
    }

    .organizer-bio {
      font-size: 0.9em;
    }

    .name-highlight {
      margin-bottom: 5px;
    }
  }