@charset "UTF-8";
/* CSS Document */
/* { } */





                            /*HTML - zobrazení celého html pro telefony*/
html, html * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;    /*border-box znamená, že do výšky a šířky prvků se počítá i padding a border*/
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";    
}                   /*jaké použít výchozí písmo (hledá se v uvedeném pořadí: konkrétní písma a potom jakékoli bezpatkové*/


                            /*BODY - zobrazení BODY pro telefony*/
body {
    margin-left: auto;       /*zarovnání na střed*/
    margin-right: auto;
}

                            /*HEADER - zobrazení pro telefony*/
/*POZN.: pokud se napevno nastaví výška HEADERu, MAIN začíná hned pod tou výškou; pokud se výška nenastaví, MAIN začíná normálně pod HEADERem*/
header {
	width: 100%;
    padding-top: 10px;       /*nastavení okrajů*/
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 6px;
    box-sizing: border-box;  /*???možná zbytečné, když border-box je už v HTML???*/
}



 


a {
	color: black;
	text-decoration: none;
}

a.footer {
	color: white;
		text-decoration:underline;
}





   /* position: absolute;  */       /*!!! když se nastaví zde absolute a u rodiče (.subnav) relative, chová se to dobře,
                                    chová se to dobře, ale přestanou lícovat položky submenu s položkami menu
                                    
                                    pokud se pozice smažou, je potřeba nastavit u tabletu a desktopu pevnou výšku subnav, aby menu neskákalo, a také změnit overflow na hidden*/


/* Style the subnav links */















.galerie_pozadi {
	background-color: darkgray;
	padding: 20px;
	
}






.gallery {
    display: grid;
	
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    padding: 10px;
	
}

.gallery img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
    transition: transform 0.2s;
}

.gallery img:hover {
    transform: scale(1.05);
}




.gallery-item {
	 position: relative;
    display: inline-block;
 /* display: none; /* Skryje všechny obrázky */
	opacity: 0;
	transform: scale(0.95); /* Lehké zmenšení */
  transition: opacity 0.3s ease, transform 0.3s ease; /* Plynulý přechod */
}

.gallery-item.show {
  display: inline-block; /* Zobrazí jen obrázky s třídou 'show' */
	opacity: 1; /* Plně viditelné */
  transform: scale(1); /* Normální velikost */
}


.gallery-filters {
	display: flex;
  	justify-content: center; /* Zarovnání vodorovně */
  	align-items: center;     /* Zarovnání svisle */
}

.gallery-filters button {
    margin-right: 10px;
    padding: 10px 15px;
    background: white;
    color: black;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.gallery-filters button:hover {
    background: lightgrey;
}



.caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    
    color: white;
    text-align: center;
    padding: 5px;
    font-size: 14px;
    
    transition: opacity 0.3s ease;
	border-radius: 5px;
	
    opacity: 1;
    background: rgba(0, 0, 0, 0.4);

	
	
}

.gallery-item:hover .caption {
    opacity: 1;
}




.pswp__custom-caption {
  background: rgba(75, 150, 75, 0.75);
  font-size: 16px;
  color: #fff;
  width: calc(100% - 32px);
  max-width: 400px;
  padding: 2px 8px;
  border-radius: 4px;
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
}
.pswp__custom-caption a {
  color: #fff;
  text-decoration: underline;
}
.hidden-caption-content {
  display: none;
}





.lb-image {
  transition: transform 0.3s ease, width 0.3s ease, height 0.3s ease;
  transform-origin: center; /* Střed jako výchozí bod pro zoom */
}

.lightbox-zoom {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  z-index: 1000;
  font-size: 14px;
  transition: background 0.3s ease;
}

.lightbox-zoom:hover {
  background: rgba(255, 255, 255, 0.8);
  color: #000;
}









.pswp__caption {
    font-size: 16px;
    color: #fff;
    text-align: center;
    padding: 10px 20px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 5px;
    margin-top: 10px;
}









/* Výchozí styl obrázků (skryté a mimo obrazovku) */
.reveal {
    opacity: 0;
    transform: translateY(30px); /* Posun dolů */
    transition: all 2s ease-out; /* Hladká animace */
}

/* Viditelný obrázek */
.reveal.visible {
    opacity: 1;
    transform: translateY(0); /* Návrat na původní pozici */
}


















.hidden {
    display: none;
}


.link {
	cursor: pointer;
}

/* Popup container */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
}



/* The actual popup (appears on top) */
.popup .popuptext {
  visibility: hidden;
	overflow: visible;
  width: 460px;
  background-color: white;
  color: black;
  text-align: left;
	font-size: 10px;
  border-radius: 4px;
  padding: 8px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: -40%;
  margin-left: 0px;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

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




                            /*TEXTY - zobrazení pro telefony*/

/*tag <p>: výchozí nastavení základního textu*/
p{
    font-size: 14px;        /*velikost fontu*/
    color: #555555;         /*barva fontu*/
}

.tabulator {
            display: inline-block;
            margin-left: 20px;
        }

.p_test {
        text-align: center;
        padding-top: 10px;
        padding-bottom: 20px;
        font-weight: 200;
    }

/*třída pro tag <p>*/
.p_upr{
    width: 320px;            /*užší zobrazení*/
    margin-left: auto;       /*vycentrování*/
    margin-right: auto;      
    padding-top: 10px;       /*nastavení horního a dolního okraje*/
    padding-bottom: 10px;
    color: grey;
}

.p_upr_oliva{
	width: 320px;
	margin-left: auto;       /*vycentrování*/
    margin-right: auto;
	text-align: justify;
    padding-top: 10px;       /*nastavení horního a dolního okraje*/
    padding-bottom: 10px;
    color: grey;
}

.p_upr_2sloupce_oliva {
		width: 320px;
	margin-left: auto;
	margin-right: auto;
        text-align: justify;
        padding-top: 10px;       /*nastavení horního a dolního okraje*/
    padding-bottom: 10px;
    }


/*třída pro tag <p> - určeno pro černé pozadí*/
.p_upr_white{
    width: 320px;            /*užší zobrazení*/
    margin-left: auto;       /*vycentrování*/
    margin-right: auto;
    padding-top: 20px;       /*nastavení horního a dolního okraje; horní okraj je větší než u bílého pozadí*/
    padding-bottom: 10px;    
    color: lightgray;            /*světlá barva fontu*/
}

/*tag <h1>: výchozí nastavení nadpisu úrovně 1*/
h1 {
    font-size: 20px;
    text-align: center;
    text-transform: uppercase;    /*převedení na velká písmena*/
    font-weight: 200;             /*tloušťka fontu*/
	margin-top: 10px;
    margin-bottom: 30px;
    color: #000000;
}

.h1_oliva {
    font-size: 20px;
    text-align: center;
    text-transform: uppercase;    /*převedení na velká písmena*/
    font-weight: 200;             /*tloušťka fontu*/
    margin-bottom: 30px;
    color: white;
}

/*tag <h2>: výchozí nastavení nadpisu úrovně 2*/
h2 {
    font-size: 18px;
    text-align: center;
    text-transform: uppercase;
    font-weight: 200;
    color: #000000;
    padding-top: 20px;
}

.h2_oliva{
	font-size: 18px;
    text-align: center;
    text-transform: uppercase;
    font-weight: 200;
    color: white;
	padding-top: 20px;
}

.h2bily {
    color: white;    
    }    

/*tag <h3>: výchozí nastavení nadpisu úrovně 3*/
h3 {
    font-size: 15px;
    text-align: center;
    text-transform: uppercase;
    font-weight: 200;
    color: grey;
}



/*tag <h4>: výchozí nastavení nadpisu úrovně 4*/
h4 {
    font-size: 14px;
    text-align: center;
    font-weight: 200;
    color: grey;
    font-style: italic;
}

audio {
	float: right;
}

.audioPlayer{
	width: 200px;
	height: 35px;
}

.divAudio {
	opacity: 0.4;
	border: none;
  outline: none;
  background-color: white; 
}

.divAudio:hover {
	opacity: 1;
}



#audioDetstvi, #audioValka{
	display: none;
}




/*třída pro tag <p> - text footeru*/
                                                    /*částečně sloučit s nějakým <p>, zjednodušit!!!*/    
.footer-text {
    color: black;
    font-size: 10px;
    text-align: center;
    padding: 20px 20px;
}

/*třída pro tag <p> - text footeru v indexu (v případě, že je tam video přes celou stránku)*/
                                                    /*lze zjednodušit!*/
.footer-text-index {

    color: white;
    font-size: 12px;
    text-align: center;
    padding: 20px 20px;
	z-index: 100;
}



table {
  width: 90%;
	border-collapse: collapse;
	font-size: 14px;
}

th, tr {
	text-align: left;
}

th {
	height: 60px;
}

td {
	vertical-align: top;
	padding-top: 3px;
	padding-bottom: 3px;
}

/*th, td {
  border-bottom: 2px solid #ddd;
}
*/







/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 250px;
	top: -5px;
  left: 105%;
  background-color: white;
  color: grey;
  text-align: left;
  padding: 8px;
  border-radius: 6px;
 
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}







/* Tooltip container */
.tooltip2 {
  position: relative;
}

/* Tooltip text */
.tooltip2 .tooltiptext2 {
  visibility: hidden;
  width: 250px;
	top: -5px;
  left: 55%;
  background-color: white;
  color: grey;
  text-align: left;
  padding: 8px;
  border-radius: 6px;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip2:hover .tooltiptext2 {
  visibility: visible;
}


.tooltips {
    position: relative;
    cursor: pointer;
}

.tooltips .tooltipstext {
    visibility: hidden;
    width: 250px; /* Nastavte šířku podle potřeby */
    background-color: white; /* Barva pozadí tooltipu */
    color: grey; /* Barva textu */
    text-align: left; /* Zarovnání textu */
    border-radius: 5px; /* Zaoblené rohy */
    padding: 10px; /* Vnitřní odsazení */
    position: absolute;
    z-index: 1;
    bottom: 100%; /* Umístění nad textem */
    left: 50%;
    transform: translateX(-50%);
    opacity: 0; /* Skryté ve výchozím stavu */
    transition: opacity 0.2s; /* Plynulý přechod */
}

.tooltips:hover .tooltipstext {
    visibility: visible;
    opacity: 1; /* Zobrazí tooltip */
}










                                /*OBRÁZKY - zobrazení pro telefony*/

/*defaultní velikost obrázků <img>, zarování na střed*/
img {
    width: 100%;
    height: auto;
    vertical-align: middle;
    margin-left: auto;
    margin-right: auto;
	touch-action: manipulation;
}



#Mapa {
	position: absolute;
	top: 0;
	display: block;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	z-index: 0;
}

#uai {
	position: absolute;
	top: 0;
	display: block;
	max-width: 1200px;
	z-index: 20;
}

#prednasky {
	position: absolute;
	top: 0;
	display: block;
	max-width: 1200px;
	z-index: 10;
}

#mezinKonf {
	position: absolute;
	top: 0;
	display: block;
	max-width: 1200px;
	z-index: 30;
}

#eirene {
	position: absolute;
	top: 0;
	display: block;
	max-width: 1200px;
	z-index: 50;
}

#prazdny {
	position: absolute;
	top: 0;
	display: none;
	max-width: 1200px;
	z-index: 99;
}

#svetoveKongresy {
	position: absolute;
	top: 0;
	display: block;
	max-width: 1200px;
	z-index: 60;
}




#casovaOsa{
	position: absolute;
	top: 0;
	display: block;
	max-width: 1200px;
	z-index: 10;
}

#osobni {
	position: absolute;
	top: 0;
	max-width: 1200px;
	z-index: 20;
}

#profesni {
	position: relative;
	top: 0;
	max-width: 1200px;
	z-index: 30;
}

#osaPrazdny {
	position: relative;
	top: 0;
	display: block;
	max-width: 1200px;
	z-index: 30;
}




/*třída pro tag <img> - logo*/
.style-logo {
    height: 80px;
	width: 80px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    padding-bottom: 10px;
	position: relative;
	z-index: 100;
    }

.style-logo_index {
    height: 120px;
    display: block;
    padding-bottom: 0px;
	position: relative;
	z-index: 50;
	padding-top: 0px;
    }


.align {
	position: relative;
	align-content: center;
	margin-left: auto;
	margin-right: auto;
	width: 50%;
}





/*lem obrázku pro obrázek na bílém pozadí*/
.img_border_whiteBackground {
    border: 1px solid grey;
}

/*lem obrázku pro obrázek na černém pozadí*/
.img_border_blackBackground {
    border: 1px solid #555;
}


.album, .albumDva, .albumTri {
	height: 300px;
	width: auto;
	overflow-y: scroll;
	margin-left: auto;
	margin-right: auto;
	background-color: #cbbba0;
	border-style: solid;
	border-width: 1px;
	border-color: black;
	padding: 0px;
}



/*třída pro tag <img> - obrázek*/
                                                            /*možná nutno přejmenovat!!*/
                                                            /*není to zbytečné? nebylo by lepší upravit <img>???*/
.kresba_obr {
    width: 340px;
    display: block;
    margin-left: auto;                                        /*zbytečné??*/
    margin-right: auto;                                       /*zbytečné??*/
}

.kresba_obr_50_oliva{
	width: 100%;
	float: center;
	padding: 20px;
}

.kresba_obr_oliva_telefon{
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding: 20px;
}

.kresba_obr_oliva_telefon_80{
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	padding: 20px;
}

.kresba_obr_oliva_telefon_60{
	width: 60%;
	margin-left: auto;
	margin-right: auto;
	padding: 20px;
}

img.stin {
filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 0.4));
	
}

.kresba_obr_dlazdice {
    width: 100%;
}


														/*							detaily knihy								*/
/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}



/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
	font-size: 12px;
  float: center;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 6px 6px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
	min-height: 200px;
	overflow: scroll;
}


h3.detailKnihy {
	padding: 10px;
}

.tabcontent {
  animation: fadeEffect 1s; /* Fading effect takes 1 second */
}

/* Go from zero to full opacity */
@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}


/*třída pro tag <img> - obrázek na úvodní stránce*/
                                                            /*možná zbytečně mnoho parametrů!!*/
.top {
    height: 260px;
    width: 340px;
    display: block;
    margin-left: auto;                                    /*zbyt*/
    margin-right: auto;                                    /*zbyt*/
    background-image: url("images/kresba_tancici_dum.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    color: #FFFFFF;                                           /*zbyt*/
    text-align: center;                                          /*zbyt*/
    padding-top: 20px;
    padding-bottom: 20px;
}

/*třída pro tag <img> - obrázek na konkrétní stránce*/
                                                            /*možná zbytečně mnoho parametrů!!*/
                                                            /*možná by šlo sloučit s .top!!!*/



/*třída pro tag <img> - lišta mezi příspěvky*/
.lista {
    width: 330px;
    height: 20px;
    background-image: url("images/lista.svg");
    background-repeat: no-repeat;
    background-position: center;
    margin-left: auto;                                /*zbytečné?*/
    margin-right: auto;                               /*zbytečné?*/
}


.element{
	display: none;
}

.imgDva {
	display: none;
}



#malba_img2, #img2, #img4, #img6, #img8, #cb_img2, #cb_img4, #pc_tricka_img2, #pc_tricka_img4, #pc_tricka_img6, #pc_tricka_img8, #pc_tricka_img10, #pc_tricka_img12, #pc_tricka_img14, #pc_tricka_img16, #pc_tricka_img18, #pc_tricka_img20, #pc_tricka_img22, #pc_tricka_img24, #pc_tricka_img26, #pc_tricka_img28, #pc_tricka_img30, #pc_tricka_img32, #pc_tricka_img34, #pc_tricka_img36, #postery_img2, #postery_img4, #postery_img6, #postery_img8 {
    display: none;
}

#malba_img1, #malba_img2, #img1, #img2, #img3, #img4, #img5, #img6, #img7, #img8, #cb_img1, #cb_img2, #cb_img3, #cb_img4, #pc_tricka_img1,
#pc_tricka_img2, #pc_tricka_img3, #pc_tricka_img4, #pc_tricka_img5, #pc_tricka_img6, #pc_tricka_img7, #pc_tricka_img8,
#pc_tricka_img9, #pc_tricka_img10, #pc_tricka_img11, #pc_tricka_img12, #pc_tricka_img13, #pc_tricka_img14, #pc_tricka_img15, #pc_tricka_img16, #pc_tricka_img17, #pc_tricka_img18, #pc_tricka_img19, #pc_tricka_img20, #pc_tricka_img21, #pc_tricka_img22, #pc_tricka_img23, #pc_tricka_img24, #pc_tricka_img25, #pc_tricka_img26, #pc_tricka_img27, #pc_tricka_img28, #pc_tricka_img29, #pc_tricka_img30, #pc_tricka_img31, #pc_tricka_img32, #pc_tricka_img33, #pc_tricka_img34, #pc_tricka_img35, #postery_img1, #postery_img2, #postery_img3, #postery_img4, #postery_img5, #postery_img6, #postery_img7, #postery_img8 {
    cursor: pointer;
}

#motyli, #hj, #altan, #icll, #sw, #Oliva, #vyukaJazyku, #iusAureum, #cicero {
    display: none;
}

#ceskeStredohori, #louny {
    display: none;
}

#pc_tricka_1, #pc_tricka_2, #pc_tricka_3, #pc_tricka_4, #pc_tricka_5, #pc_tricka_6, #pc_tricka_7, #pc_tricka_8, #pc_tricka_9, #pc_tricka_10, #pc_tricka_11, #pc_tricka_12, #pc_tricka_13, #pc_tricka_14, #pc_tricka_15, #pc_tricka_16, #pc_tricka_17, #pc_tricka_18 {
    display: none;
}


.kontejner {
    display: none;
}

.kont {
	position: relative;
}

#colKont {
	position: relative;
	width: 90%;
	float: center;
}




/*vteřinový fade-in pro třídu fadeIn*/

@-webkit-keyframes fadein {
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes fadein {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
.fadeIn { 
  opacity: 1;
  -moz-animation   : fadein 1s linear;
  -webkit-animation: fadein 1s linear;
  animation        : fadein 1s linear;
}




/*vteřinový fade-out pro třídu fadeOut*/        /*zatím nikde nepoužito - vhodné např. pro zmizení tlačítka po kliknutí*/

@-webkit-keyframes fadeout {
    0% {opacity:1;}
    100% {opacity:0;}
}
@keyframes fadeout {
    0% {opacity: 1;}
    100% {opacity: 0;}
}
.fadeOut {
  opacity: 0;
  -moz-animation   : fadeout 1s linear;
  -webkit-animation: fadeout 1s linear;
  animation        : fadeout 1s linear;
}



                                            /*TLAČÍTKA - zobrazení pro telefony*/

.buttonek{
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
    padding: 10px;
    border-radius: 4px;
    border: none;
    outline: none;
}

/*skrolovací tlačítko; nikoli třída, ale pomocí # označení konkrétního tlačítka*/
#myBtn {
  display: none;            /*defaultní zobrazení: žádné (tzn. nezobrazuje se)*/
  position: fixed;          /*umístění na stránce se nemění, tzn. ani při skrolování*/
  bottom: 5px;              /*umístění v pravém dolním rohu*/
  right: 5px;
  z-index: 99;              /*viditelnost s nejvyšší prioritou (tzn. nemůže se stát, že by ho překrylo něco jiného)*/
  font-size: 14px;
  border: none;
  outline: none;
  background-color: gray;
  color: white;
  cursor: pointer;          /*jak bude vypadat kurzor myši při najetí na tlačítko*/
  padding: 10px;
  border-radius: 4px;       /*zakulacení rohů*/
}

/*barva skrolovacího tlačítka #myBtn při najetí myší*/
#myBtn:hover, #myBtnAudioDetstvi:hover, #myBtnAudioValka:hover {
  background-color: #555;
}

#myBtnAudioDetstvi {
  display: none;            /*defaultní zobrazení: žádné (tzn. nezobrazuje se)*/
  position: fixed;          /*umístění na stránce se nemění, tzn. ani při skrolování*/
  top: 60px;              /*umístění v pravém dolním rohu*/
  right: 10px;
  z-index: 90;              /*viditelnost s nejvyšší prioritou (tzn. nemůže se stát, že by ho překrylo něco jiného)*/
  font-size: 14px;
  border: none;
  outline: none;
  background-color: gray;
  color: white;
  cursor: pointer;          /*jak bude vypadat kurzor myši při najetí na tlačítko*/
  padding: 10px;
  border-radius: 4px;       /*zakulacení rohů*/
}

#myBtnAudioValka {
  display: none;            /*defaultní zobrazení: žádné (tzn. nezobrazuje se)*/
  position: fixed;          /*umístění na stránce se nemění, tzn. ani při skrolování*/
  top: 60px;              /*umístění v pravém dolním rohu*/
  right: 10px;
  z-index: 90;              /*viditelnost s nejvyšší prioritou (tzn. nemůže se stát, že by ho překrylo něco jiného)*/
  font-size: 14px;
  border: none;
  outline: none;
  background-color: gray;
  color: white;
  cursor: pointer;          /*jak bude vypadat kurzor myši při najetí na tlačítko*/
  padding: 10px;
  border-radius: 4px;       /*zakulacení rohů*/
}

.butonky {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

#btnKongresy, #btnKonference, #btnPrednasky, #btnEirene, #btnUAI, #btnOsobni, #btnProfesni, #btnPrazdnaMapa {
  display: inline-block;            /*defaultní zobrazení: žádné (tzn. nezobrazuje se)*/
  z-index: 99;              /*viditelnost s nejvyšší prioritou (tzn. nemůže se stát, že by ho překrylo něco jiného)*/
  font-size: 14px;
  border: none;
  outline: none;
  background-color: lightgray;
  color: white;
  cursor: pointer;          /*jak bude vypadat kurzor myši při najetí na tlačítko*/
  padding: 10px;
  border-radius: 4px;       /*zakulacení rohů*/
}

#btnKongresy {
  background-color: #F5CC00;
}

#btnKonference {
  background-color: black;
}

#btnUAI {
  background-color: #582A0E;
}

#btnPrednasky {
  background-color: #fefefe;
	color: black;
}

#btnEirene {
  background-color: #981005;	
}

#btnPrazdnaMapa {
	color: black;
}


#prazdny, #osaPrazdny {
	display: none;
}



                                            /*VIDEO - zobrazení pro telefony*/





	





.iframe {
    width: 350px;
    height: 250px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    
}


                                            /*třídy COL a ROW - zobrazení pro telefony*/

/* třídy col a row upravují chování řádků/sloupců */
.col {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.col_dlazdice-dva-telefon {
    width: 50%;
    float: left;
    padding: 5px 5px;
}

.col_dlazdice-tri-telefon {
    width: 33.33%;
    float: left;
    padding: 10px 10px;
}

.col_dlazdice-ctyri-telefon {
    width: 25%;
    float: left;
    padding: 5px 5px;
}

.col-md-one-fifth {
    width: 20%;
    padding: 0px;
}	



.col_black {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    background-color: black;
}

                                       

.row {
    margin-left: auto;
    margin-right: auto;
}

.table0 {
	width: 90%;
	margin: auto;
	overflow: visible;
}

.row_table {
	width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.sloupecPrednasky {
	overflow: scroll;
}

.row_black {
    background-color: black;
    padding-bottom: 10px;
    padding-top: 20px;
}


/*tohle upravuje chování třídy .row, která spolu s .col upravuje chování řádků/sloupců*/
/*nerozumím tomu*/
.row:before, .row:after {
    content: "";
    display: table;
}

.row:after {
    clear: both;
}




										  /*pro dotykové displeje (pro displeje bez možnosti hover nebo s hrubým vstupním zařízením (např. prst)*/


@media (hover: none), (pointer: coarse) {
  	.img-magnifier-glass {
    display: none;
  }
}





                                    /*zobrazení pro TABLETY*/


/*Tablet view*/
@media (min-width : 768px ){
   	
	
	
	
	.topnav, .topnavIndex {
		display: none;
	}
	.topnavbutton {
		display: none;
	}
	
.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0px;
	left: 0px;
}
	
	
.olivaIndex {
		position: absolute;
		display: block;
		top: 0px;
		z-index: 10;
	}	
    
.style-logo {
    height: 140px;
	width: 140px;
	padding-bottom: 10px;
    }	

.style-logo_index {
  	height: 120px;
	padding-top: 10px;
    }	
	
	
	a {
	color: grey;
	text-decoration: none;
}
	
  
	
.footer-text-index {
    color: white;
    font-size: 14px;
}
	

	
	
.footer-text {
    color: black;
    font-size: 14px;
    text-align: center;
    padding: 20px 20px;
}
	
	

.footer-img {
    display: flex;
    gap: 70px; /* Mezera mezi obrázky */
    flex-wrap: wrap; /* Obrázky přetečou na další řádek, pokud se nevejdou */
    justify-content: center; /* Zarovnání galerie na střed */
    align-items: stretch; /* Vertikální zarovnání obrázků */
    
    padding: 10px; /* Volitelný odstup od okrajů */
    box-sizing: border-box; /* Zahrnout padding do šířky galerie */
	max-width: 100%;
	height: 80px;
}
	
.footer-img a {
	
	height: 80px;
	
    display: block; /* Umožní snadnou manipulaci s odkazem jako blokem */
    text-decoration: none; /* Odstraní podtržení (pro odkazy) */
	justify-content: center;
}

.footer-img img {
    
	height: 80px;
    
}	
	
	
	
table {
	font-size: 14px;
}
	
    
    
    img {
    width: 100%;
    }
    
    .img_border {
    border: 2px solid #555;  
}
   
	
.kresba_obr_30 {
    width: 30%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}	
	
	
    p {
        font-size: 16px;
    }
    
    
    .p_upr {
        width: 690px;
        text-align: left;
        padding-bottom: 20px;
        padding-top: 20px;
    }
	
	.p_upr_oliva {
		width: 690px;
        text-align: justify;
        padding-bottom: 20px;
        padding-top: 20px;
    }
	
	.p_upr_2sloupce_oliva {
		width: 100%;
        text-align: justify;
		float: left;
        padding: 15px;
    }
	
	
    
    .p_upr_white {
        width: 690px;
        text-align: left;
        padding-bottom: 20px;
        padding-top: 20px;
        color: white;
    }
    

/*tag <h1>: výchozí nastavení nadpisu úrovně 1*/
h1 {
    width: 100%;
    font-size: 34px;
    text-transform: uppercase;    /*převedení na velká písmena*/
    font-weight: 200;             /*tloušťka fontu*/
    color: #000000;
	margin-top: 60px;
}    
	
.h1_oliva {
    width: 100%;
    font-size: 34px;
    text-transform: uppercase;    /*převedení na velká písmena*/
    font-weight: 200;             /*tloušťka fontu*/
}  	
    /*tag <h2>: výchozí nastavení nadpisu úrovně 2*/
h2 {
    font-size: 20px;
    text-transform: uppercase;
    font-weight: 200;
    padding-top: 30px;
    padding-bottom: 10px;
    color: #000000;
}
	
.h2_oliva {
    font-size: 20px;
    text-transform: uppercase;
    font-weight: 200;
	padding-top: 0px;
    padding-bottom: 10px;
    color: white;
}
    

    
h3 {
    font-size: 16px;
}    
	
h3.detailKnihy {
	padding: 20px;
}	
	
.tab button {
	font-size: 14px;
	padding: 14px 16px;
}	
    
/*tag <h4>: výchozí nastavení nadpisu úrovně 4*/
h4 {
    font-size: 16px;
    text-align: center;
    font-weight: 200;
    color: grey;
    font-style: italic;
}    
    
    /*skrolovací tlačítko*/
#myBtn {
    bottom: 10px;
    right: 10px;
    font-size: 16px;
    padding: 15px;
}
	
	.audio1 {
	display: block;
	position: fixed;
	right: 20px;
	top: 70px;
	z-index: 90;
	background-color: white;
	padding: 10px;
	border-radius: 4px;
	width: 220px;
	overflow: visible;
	animation: pohybAudio1;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}




	
#myBtnAudioDetstvi, #myBtnAudioValka {
    top: 10px;
    right: 10px;
    font-size: 16px;
    padding: 15px;
}    
   


    
.iframe {
    width: 750px;
    height: 500px;
}
    

.lista {
    height: 40px;
    width: 700px;
    
}
	
.album {
	width: 700px;
	height: 310px;
	overflow-y: hidden;
}	
	
.albumDva {
	width: 700px;
	height: 360px;
	overflow-y: hidden;
}	
	
.albumTri {
	width: 700px;
	height: 370px;
	overflow-y: hidden;
}		
	
    
.col-md-one-half {
    width: 50%;
	float: left;
}
	
.col-md-one-third {
    width: 33.33%;
	float: left;
}

.col-md-one-third-oliva {
    width: 30%;
	float: left;
}
	
.col-md-two-thirds {
    width: 66.67%;
	float: left;
}	

.col-md-one-quarter {
    width: 25%;
	float: left;
}
	
.col-md-one-fifth {
    width: 20%;
    padding: 10px;
}	
    
.col-md-one-sixth {
    width: 16.6%;
    padding: 15px;
}

.col-md-one-eight {
	width: 12.5%;
	padding: 10px;
	float: left;
}	
    
    
.col-md-one-half_black {
    width: 50%;
    background-color: black;
}
    
.col-md-one-half_grey {
    width: 50%;
    background-color: grey;
}
    
.col {
    float: center;
    padding: 7px 14px;
}
    
.col_black {
    float: left;
    padding: 7px 14px;    
    background-color: black;
}

.rowPadding {
	max-width: 720px;	
	margin-left: auto;
	margin-right: auto;
	}	
.rowPaddingObr {
	max-width: 740px;
	margin-left: auto;
	margin-right: auto;
	}		
	
.row_black {
    background-color: black;
    padding-bottom: 20px;
    padding-top: 10px;
}
    
     
.kresba_obr {
    width: 100%;
}
    
.kresba_obr_dlazdice {
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
	transition: transform .3s;
}    
    
.kresba_obr_dlazdice:hover {
  transform: scale(1.1);
}	
	
.obr_zoom {
	transition: transform .5s;	
	}	
.obr_zoom:hover {
  transform: scale(1.4);
}		
	
	
.kresba_obr_20 {
    width: 20%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}	
 
.kresba_obr_30 {
    width: 30%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}		
	
	
	
.kresba_obr_40 {
    width: 40%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
    
.kresba_obr_50 {
    width: 50%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}    

.kresba_obr_33_oliva {
    width: 33.33%;
    display: block;
	float: left;
    padding: 20px;
	z-index: 1;
}		
	
.kresba_obr_50_oliva {
    width: 50%;
    display: block;
	float: left;
    padding: 40px;
	z-index: 1;
}	
    
.kresba_obr_60 {
    width: 60%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
    
.kresba_obr_80 {
    width: 80%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    }
.kresba_obr_80_oliva {
    width: 80%;
    display: block;
    float: left;
	padding: 20px
    }	
    
.top {
    width: 768px;
    height: 400px; 
    padding: 20px 20px 20px 20px;
    }
    
.ffuk_zije_text {
    font-size: 16px;
    width: 768px;
}
    
.ffuk_zije_obr {
    width: 768px;
    height: 400px;
}
    
}




/*Desktop view*/
@media (min-width: 1024px){
    

.caption {	
		background: rgba(0, 0, 0, 0.7);
		opacity: 0;
	}	
	
	
/* Popup container */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* The actual popup (appears on top) */
.popup .popuptext {
  visibility: hidden;
	overflow: visible;
  width: 700px;
  background-color: white;
  color: black;
  text-align: left;
	font-size: 14px;
  border-radius: 4px;
  padding: 8px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -160px;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s
}	
	
	
table {
	font-size: 16px;
}	
	
	
	
	
    header {
    
    height: 150px; /*pokud se napevno nastaví výška headeru, 
        body začíná hned pod tou výškou; pokud se výška nenastaví, body začíná normálně pod headerem*/
    
}
 
	
	
    body {
        max-width: 1200px;
    }
    
    .p_upr {
        width: 1000px;
    }
	
	.i_text{
		width: 60%;
		display: block;
		margin-left: 20px;
	}
    
    .p_upr_white {
        width: 1000px;
    }
    
	.rowPadding {
	max-width: 1010px;		
	}
	
	.rowPaddingObr {
	max-width: 1020px;		
	}
	
img.stin {
filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 0.4));
}  
	
    
    
    
    .iframe {
        width: 1000px;
        height: 800px;
}
    
    
    .style-logo {
        height: 150px;
		width: 150px;
        float: left;
    }
	
	  .style-logo_index {
        height: 140px;
		  position: absolute;
		  margin-left: 0;
		  margin-right: 0;
		  padding-top: 30px;
    }
	
    
    
    
     
    .lista {
    height: 70px;
    width: 1010px;
    
}
	
.album {
	width: 1010px;
	height: 400px;
	background-color: #cbbba0;
	border-style: solid;
	border-width: 1px;
	border-color: black;
	padding: 0px;
}	
	
.albumDva {
	width: 1010px;
	height: 480px;
}		
	
.albumTri {
	width: 1010px;
	height: 515px;
}		
    
    .top {
        width: 1024px;
        height: 700px;
        margin: auto;
        background-image: url("images/kresba_tancici_dum.png");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        padding: 20px 20px 20px 20px;
        color: #FFFFFF;
        text-align:center;  
    }    
    
    
    
    
    /*délka přechodu mezi jedním stavem a druhým stavem u třídy kresba_obr*/
   /* .kresba_obr {
    transition: transform .5s;
     }
    /*co se stane, když se na obrázek třídy kresba_obr najede myší:
    zvětší se na 140 % z původní velikosti
    .kresba_obr:hover {
  -ms-transform: scale(1.4); /* IE 9 
  -webkit-transform: scale(1.4); /* Safari 3-8 
  transform: scale(1.4); */
}



.img-magnifier-container {
  position: relative;
	
}

.img-magnifier-glass {
	display: block;
  position: absolute;
  border: 3px solid #000;
  border-radius: 50%;
  cursor: none;
  /*Set the size of the magnifier glass:*/
  width: 150px;
  height: 150px;
}











/*Smartphone view*/
@media (max-width: 767px){
    
	
	
	.celek {
		width: 95vw;
	}
	

.img-magnifier-glass {
	display: none;
	pointer-events: auto;
    touch-action: auto;
}	
	
	
	
.row_telefon {
    margin-left: auto;
    margin-right: auto;
}
    
.row_telefon:before, .row_telefon:after {
    content: "";
    display: table;
}

.row_telefon:after {
    clear:both;
}
    
.row_table {
	width: 700px;
	overflow: visible;
	overflow-x: scroll;
    margin-left: auto;
    margin-right: auto;
	padding: 20px;
}	
	



/* Style the navigation menu */
	
	.topnavbutton {
		display: block;
		position: fixed;
		height: 50px;
		width: 50px;
		top: 10px;
		right: 10px;
		z-index: 100;
		cursor: pointer;
	}	
	
.topnav {
  overflow: visible;
  position: fixed;
	right: 10px;
	top: 60px;
	z-index: 100;		/*toto je zásadní, aby se menu v "MLÁDÍ" zobrazovalo nad tlačítkem audio*/
}
.topnavIndex {
  overflow: visible;
  position: fixed;
	right: 10px;
	top: 60px;
	z-index: 100;		/*toto je zásadní, aby se menu v "MLÁDÍ" zobrazovalo nad tlačítkem audio*/
}	
	


/* Hide the links inside the navigation menu (except for logo/home) */
#linkyIndex {
  display: none;
	position: relative;
	z-index: 100;
	background-color: black;
}
	
#linky {
  display: none;
	position: relative;
	z-index: 100;
	background-color: white;
}	

/* Style navigation menu links */
.topnav a {
  color: black;
  padding: 10px 10px;
  text-decoration: none;
  font-size: 14px;
  display: block;
	position: relative;
	z-index: 100;
}
	
.topnavIndex a {
  color: white;
  padding: 10px 10px;
  text-decoration: none;
  font-size: 14px;
  display: block;
	position: relative;
	z-index: 100;
}
	
/* Style the hamburger menu */
.topnav a.icon {
	height: 50px;
	width: 50px;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
	z-index: 100;	
}
	
.topnavIndex a.icon {
	height: 50px;
	width: 50px;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
	z-index: 100;	
}	

/* Add a grey background color on mouse-over */
.topnav a:hover {
  background-color: black;
  color: white;
}

/* Add a grey background color on mouse-over */
.topnavIndex a:hover {
  background-color: white;
  color: black;
}	

	
	.video-foreground {
		display: none;
	}	

.audio1 {
	display: block;
	position: fixed;
	right: 20px;
	top: 120px;
	z-index: 90;
	background-color: white;
	padding: 10px;
	border-radius: 4px;
	width: 220px;
	height: 300px;
	overflow: scroll;
	animation: pohybAudio1;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}
	
	.olivaIndex {
		position: relative;
		display: block;
		
		z-index: 10;
	}
	

	.kresba_footer {
		width: 80px;
		margin-left: auto;
		margin-right: auto;
	}	
	
	.footer-img {
		width: 50%;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}
	
	
	.footer-img a {
		display: inline-block;
    	margin: 5px;
	}
	
	
	
}	






@-webkit-keyframes pohybAudio1 {
    0% {opacity:0;}
    100% {opacity:1;}
	from {right: -50px;}
  	to {right: 0px;}
}