/* --- morphist.css --- */
.morphist {
  /* Kontejner animací */
  position: relative;
}

.event-layout {
  display: flex; 
  flex-wrap: wrap;
  border: 2px dashed  #e7d9d6;
  padding: 20px;
  position: relative;
}

/* Umožní slideru i textu zabírat např. 50 % šířky */
.sliderEvent {
  
  /* pro jistotu, aby se obrázky lépe přizpůsobily */
  width: 100%;
}

.event-info {
  width: 100%;
}

.event-info h1 { 
   font-size: 26px;
   text-align: center;
}

.event-date, .event-description {
   text-align: center;
}

.slider-image img {
  width: 100%;
  
}




/* Místo absolute použijeme position: static nebo relative, 
   aby se každý prvek nacházel v běžném toku a kontejner se 
   roztahoval podle aktuálního slidu. */
.morphist > * {
  display: none;        /* skryjeme všechny slidy kromě aktivního */
  position: relative;   /* (případně 'static') */
  top: 0;
  left: 0;
}

/* Aktivní (animovaný) slide */
.morphist > .animated {
  display: block;
}

/* Kontejner slideru */
.sliderEvent {
  position: relative; 
  /* Pokud chcete mít jemný přechod do dalšího obsahu, 
     lze přidat např. margin-bottom: 1em; */
}

/* Obecná třída pro animované efekty */
.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

/* Definice klíčových snímků pro animace */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* Třídy pro nasazení daných animací */
.fadeIn {
  animation-name: fadeIn;
}

.fadeOut {
  animation-name: fadeOut;
}

.slider-image ul {
   padding: 0 0 0 0;
}


.event-detail-page {
  width: 40%;
  margin: 0 auto;
}

.event-date {
  margin: 20px 0px;
  
}

.event-flag {
  position: absolute;
  right: 0px;
  top: 20px;
  background:#571f1c;
  color:#e7d9d6;
  border-radius: 50px 0px 0px 50px;
  padding: 15px 30px;
  z-index: 300;
}

@media (max-width: 1200px)  {
   .event-detail-page {width: 50%; }
}

@media (max-width: 900px)  {
   .event-detail-page {width: 60%; }
}


@media (max-width: 600px) {
   .event-detail-page {width: 95%; }

}