/* *******************************************
     bottom, html5, responsive 
**********************************************/


* {
	margin: 0;
}
html, body {
	height: 100%;
}
.wrapper {
	min-height: 100%;
	margin: 0 auto -2.2em; /* the bottom margin is the negative value of the footer's height */
	
	xbackground-image: URL('img/bg3.png');
	background-color: #ffffff;
	background-position: top left;
	
	
}

.push {
	height: 2.2em; /* '.push' must be the same height as 'footer' */
}
footer {
	height: 2.2em; /* '.push' must be the same height as 'footer' */
	background-color: #4f4f4f;
}
footer div { font-size: 70%; width: 80%; margin: 0 auto; padding: 1em 0; font-family: 'PT Sans', sans-serif; }






/*************************************************************
  general definitions
*************************************************************/



#content
{
  font-family: 'PT Sans', sans-serif;
  font-weight: 400;
  font-size: 100%;
}
@media only screen and (min-width: 800px) {
  #content { font-size: 100%; }
}




/*************************************************************
  Sticky Header a Responsive nav
*************************************************************/


#zacatek
{
  position: relative;
  width: 100%;
}

header
{
  xposition: absolute;
  top: 0;
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
  z-index: 1201;
  xborder: 1px solid #ff0000;
  width: 100%;
  xheight: 80px;
}
header.sticky
{
  position: fixed;
}


/* zakladni umisteni loga (margin-left) */
#header-inner
{
  margin-left: 0;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  padding: 0;
  background-color: #ffffff;
}
header.sticky #header-inner
{
  background-color: #ffffff;
}

/* box na logo */
#header-content
{
  line-height: 0;
  position: relative;
  padding: 0;
  xbackground-color: #ffffff;
  xborder: 1px solid #7f7f7f;
  font-size: 100%;
  z-index: 200;
  height: 10em;
}
header.sticky #header-content { height: 7em; }

header #logobox { float: left; width: 25vw; xbackground-color: #ffafdf; text-align: center; transition: all 0.6s ease; }
header.sticky #logobox { float: left; width: 25vw; xbackground-color: #ffafdf; text-align: center; transition: all 0.6s ease; }

header IMG.logo { height: 10em; z-index: 200; transition: all 0.6s ease; margin: 0 1em;  }
header.sticky IMG.logo { height: 7em; z-index: 200; margin: 0 1em; }

header #header-grafika { float: left; width: 74%; xbackground-color: #ff00ff; height: 7em; line-height: 125%; margin-top: 1.5em; transition: all 0.6s ease;
  background-image: URL('img/napis-deradez.png');
  background-size: 95% auto;
  background-repeat: no-repeat;
  background-position: left center; 
}
header.sticky #header-grafika { float: left; width: 74%; xbackground-color: #ff00ff; height: 7em; line-height: 125%; margin-top: 0em; transition: all 0.6s ease; }


/*  pozadi a tel nahore pred srolovanim */
header #prehead { text-align: right; background-color: #ffffff; position: absolute; top: 0; width: 100%; height: 1.5em; transition: all 0.6s ease;  overflow: hidden; }
header.sticky #prehead { height: 0em; transition: all 0.6s ease; }

header #preheadbg { background-color: #ff2525; position: absolute; top: 1.5em; height: 7em; width: 100%; z-index: 100; transition: all 0.6s ease; }
header.sticky #preheadbg { background-color: #ff2525; position: absolute; top: 0em; height: 7em; width: 100%; z-index: 100; transition: all 0.6s ease;  }

#topbaner { position: absolute; top: 0; }


/* ala tablet - menu zhroutime pod logo */
@media only screen and (max-width: 760px) {
    header #logobox, header.sticky #logobox { width: 100%; background-color: #ff2525; }
    header #header-grafika, header.sticky #header-grafika  { width: 100%; background-color: #ff2525; height: 6em; line-height: 125%; margin-top: 0em; transition: all 0.6s ease;
	  background-image: URL('img/napis-deradez.png');
	  background-size: 80% auto;
	  background-repeat: no-repeat;
	  background-position: center center; 
    }
}



/*************************************************************
  obecne definice typografie
*************************************************************/

p { margin-top: 0.6em; }
ul { font-size: 90%; list-style-type: square; margin: 0; padding: 0 0 0 1.5em; }





/*************************************************************
  hraci prostor
*************************************************************/

.space
{
  width: 92%;
  margin: 2vw auto;
}
.left50 { float: left; width: 50%; }
.right50 { float: right; width: 50%; }
.left30 { float: left; width: 30%; }
.right70 { float: right; width: 70%; }


.txt
{
  font-family: 'PT Sans', sans-serif;
  font-weight: 400;
  font-size: 125%;
}
H2.kapitola
{
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 200%;
  text-shadow: 2px 2px 2px rgba(0,0,0,.4);
}

/*************************************************************
  tablety telefony
*************************************************************/

@media only screen and (max-width: 760px) {
  .space { width: 98%; margin: 0 auto; }
  .left30 { width: 99%; margin-top: 0.7em; }
  .right70 { width: 99%; }
  .left50 { width: 99%; margin-top: 0.7em; }
  .right50 { width: 99%; }
}



/*************************************************************
  jendotlivosti
*************************************************************/

.konframe
{
  font-size: 165%;
  width: 98%;
  text-shadow: 2px 2px 2px rgba(0,0,0,.3);
  font-family: 'PT Sans', sans-serif;
  xbox-shadow: 5px 2px 11px #cfcfcf;
  padding: 0.3em 0;
  xbackground-color: #f7f7f7;
}
.konleft
{
  float: left;
  width: 25%;
  text-align: right;
  color: #3f3f3f;
  margin: 0;
  padding-right: 5%;
  font-weight: 400;
}
.konright
{
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  float: left;
  width: 70%;
  text-align: left;
  color: #bf1f1f;
  margin: 0;
}
.konright A { color: #bf1f1f; text-decoration: none; }
.konright A:hover { color: #000000; text-decoration: none; }

@media only screen and (max-width: 760px) {
  .konleft { width: 25%; padding-right: 5%; }
  .konright { width: 70%; }
  .konframe { font-size: 125%; }
}
















/*************************************************************
  WA vybavicka
*************************************************************/

.foto100
{
  border: 0px; width: 100%;
  margin: 0px;
  padding: 0px;
  line-heigth: 0px;
  display: block;
}
.fotocktv
{
  border: 0px; width: 8%;
  margin: 0px 5%;
  padding: 0px;
  line-heigth: 0px;
  display: block;
}
.sha-top
{
  background-image: URL('img/shadow-top.png');
  background-position: bottom left;
  background-repeat: repeat-x;
  background-size: auto 100%;
  height: 1em;
  margin: 0.5em 0 0 0;
  padding: 0px;
}

.sha-bottom
{
  background-image: URL('img/shadow-bottom.png');
  background-position: bottom left;
  background-repeat: repeat-x;
  background-size: auto 100%;
  height: 1em;
  margin: 0 0 0.5em 0;
  padding: 0px;
}

.clear { clear: both; }








/****************************************************
 chocolat, cycle2
****************************************************/

.slider-img { width: 100%; display: block; margin: 0; padding: 0; }
.slider-p { width: 100%; display: block; margin: 0; padding: 0; }
.slider-text {
	font-size: 2.3vw;
	position: absolute;
	bottom:0;
	background-color: rgba(255,255,255,0.8);
	x-opacity: 0.8;
	padding: 0.5em 0.7em;
	border-radius: 0.1em;
	font-weight: bold;
	
}
.slider-text1 { 	margin: 0 0 1em 1.3em; }
.slider-text2 { 	margin: 0 0 0.6em 2em; }
.slider-text3 { 	margin: 0 0 2em 2em; }
.slider-text4 { 	margin: 0 0 2em 2em; }
.slider-text5 { 	margin: 0 0 3em 5em; }
.slider-text6 { 	margin: 0 0 3em 5em; }

A .slider-text { color: #000000; text-decoration: none; }
A:hover .slider-text { color: #000000; text-decoration: none; }



.motiv-img { width: 100%;  display: block; margin: 0; padding: 0; }
.motiv-p { xheight: 37vh; width: 100%; display: block; margin: 0; padding: 0; 	overflow: hidden; background-color: #efefff; }

/* default text */
.motiv-text {
	position: absolute;
	bottom:0;
	padding: 0.5em 0.7em;
	overflow: hidden;
	font-size: 1.5vw;
	font-family: Tahoma;
        background-image: URL('img/white80.png');
        width: 100%;
}
.motiv-text-ita {
  x-font-style: italic;
  font-size: 1.2vw;
}

/* default responsive */
@media screen and (max-width: 820px) {
  .xmotiv-img { display: none; }
  .xmotiv-p { height: 10em; }
  .motiv-text { font-size: 3vw; }
  .motiv-text-ita { font-size: 2.2vw; }
}

/* dynamicke css z mid_slid */


/* pod 320 uplne pryc */
.testi { display: block; }
@media screen and (max-width: 320px) {
  .testi { display: none; }
} 




.chocolat-image IMG { border: 1px solid #afafaf; width: 18%; }

/* u tabletu musime trochu zvetsit pismo */
@media screen and (max-width: 820px) {
   .slider-text { font-size: 1.9vw; }
}

@media screen and (max-width: 320px) {
  .chocolat-image IMG { border: 1px solid #afafaf; width: 16%; }
  .cycle-pager { visibility: hidden; }
  .slider-text { display: none; }	/* to uz je marny, zrusit */ 
}




/*************************************************************
  jQuery goUp a jine hracky
*************************************************************/
#nahoru { display: block; text-align: center; }
.nahoru
{
  border: 1px solid #7f7f7f;
  padding: 0px;
  background: transparent url("img/up.png") no-repeat scroll center center / 10vw;
  outline: 0px none;
  width: 8em;
  height: 8em;
  margin: 0.7em auto;
}







/*************************************************************
  jQuery rozbalovaci seznam
*************************************************************/

/* oprava space70 */
#seznam div { padding: 0; }


#seznam { padding-top: 0px; padding-left: 0.9em; text-align: left; xborder: 1px solid #ffff00; margin: 1vw auto; }



#seznam h3
{
  color:#000000;
  border-bottom: 1px solid #7f7f7f;
  padding: 0.2em 0 0.3em 0;
  font-size: 90%;
}
#seznam h3#nadpis-1 { border-top: 1px solid #7f7f7f; }

#seznam h3 span {display: block; padding-right: 2em;}
#seznam h3.sipka { background:transparent url(img/sipka.png) no-repeat right center; background-size: 1.2em;}
#seznam h3.sipka:hover { cursor: pointer;cursor: hand; }
#seznam h3.active { background:transparent url(img/zavrit.png) no-repeat right center; background-size: 1.0em; }
#seznam h3.last { border-bottom:0px; }

#seznam div.popis { background-color: #dfdfdf; overflow: hidden; height:0px; line-height: 1.4em; font-size: 60%; }
#seznam div.popis p { color:#fff; }
#seznam div.popis div { padding: 0.5em 1em; }
#seznam div.popis li { color:#fff; margin-bottom: 0.2em; margin-left: 0em; padding-left: 0.1em; line-height: 1.2em;}
#seznam div.popis ul, #seznam div.popis ol { padding-left: 6vw; margin-top: 0.3em; }
#seznam p { margin-bottom: 1em; margin-left: 3vw; }
#seznam div.popis:hover { cursor: pointer; cursor: hand; }


@media screen and (max-width: 320px) {
  #seznam h3 {  padding: 0.1em 0 0.1em 0; font-size: 80%;  }
}



/*************************************************************
  google maps patch
*************************************************************/
#gmapy { width: 90%; margin: 1vw auto; }
#gmapy div { padding: 0; font-size: 100%; }


.center90 { width: 90%; margin: 2em auto; font-size: 1.3vw; color: #3f3f3f; }

.leftit { float: left; xborder: 1px solid #ff0000; font-size: 90%!important; }
.leftit TABLE { }
.leftit TABLE TH { text-align: right; padding: 0em 0.3em 0em 0.1em; }
.leftit TABLE TD { text-align: left; padding: 0em 0.1em 0em 0.3em; }





/*************************************************************
  misc
*************************************************************/
.extraspace { margin: 0.3em; }
h3 { margin-top: 0.5em; margin-bottom: 0.1em; }




#ctyrka { width: 100%; margin-top: 1vw; 
x-border: 1px solid #7f7f7f; }
#cty_ram
{ 
float: left; width: 25%; margin: 0; 
x-background-color: #dfdfff; 
}
#cty_inner { font-size: 2vw; margin: 1vw; 
x-border: 1px solid #7f7f7f;
height: 12vw; background-color: #1f6fdf; }



/* u tabletu musime trochu zvetsit pismo */
@media screen and (max-width: 820px) {
   #cty_ram { width: 50%; }
}

@media screen and (max-width: 481px) {
   #cty_ram { width: 100%; }
}












#tabtema1 { font-size: 100%; margin: 0.5em 1em; }
#tabtema1 TH { text-align: left; background-color: #dfdfdf; padding: 0.2em 0.4em; }
#tabtema1 TD { text-align: left; background-color: #dfdfdf; padding: 0.2em 0.4em; }

.fototemah2 { width: 98%!important; margin: 1em 0em; }
.fototemah2sec { width: 98%!important; margin: 1em 0em; }
/* u tabletu vypnout */
@media screen and (max-width: 820px) {
   .fototemah2sec { display: none; }
}



#clanek { padding: 0; }
#vice { padding: 0; margin-top: 0.5em; font-size: 90%; color: #af0000; cursor: hand; }

#martinclanek { padding: 0; }
#martinvice { padding: 0; margin-top: 0.5em; font-size: 90%; color: #af0000; cursor: hand; }


#tablo_space
{
  width: 98%;
  margin: 0 auto;
  padding: 0;
  font-size: 1.3vw;
}

.tablo_kandidat
{
  clear: both;
}
.tablo_qua1 {  width: 28%; float: left; height: 6em; }
.tablo_qua2 {  width: 24%; float: left; height: 6em; }
.tablo_qua3 {  width: 24%; float: left; height: 6em; }
.tablo_qua4 {  width: 24%; float: left; height: 6em; }

.tablo_hlava
{
  float: left;
  height: 5.8em;
  margin-right: 0.2em;
  box-shadow: 5px 0px 5px #afafaf;
}

.tablo_jmeno { font-size: 100%; font-weight: bold; xmargin-top: 0.2em; }
.tablo_vek { font-size: 80%; color: #6f6f6f; }
.tablo_ctvrt { font-size: 80%; color: #6f6f6f; }
.tablo_povolani { font-size: 80%; color: #2f2f2f; font-weight: bold; }
.tablo_strana { font-size: 80%; color: #6f6f6f; }
.tablo_otazka { font-size: 80%; color: #6f6f6f; }
.tablo_odpoved { font-size: 90%; color: #000000; }


.tablo_inner1
{
  background-color: #cfcfcf;  margin: 0 0.2em 0.2em 0.2em; height: 5.8em; overflow: hidden;
}

.tablo_inner2
{
  background-color: #efdfdf;  margin: 0 0.2em 0.2em 0;  height: 5.8em; overflow: hidden;
}

.tablo_inner3
{
  background-color: #cfcfef;  margin: 0 0.2em 0.2em 0;  height: 5.8em; overflow: hidden;
}

.tablo_inner4
{
  background-color: #dfdfdf;  margin: 0 0.2em 0.2em 0;  height: 5.8em; overflow: hidden;
}

.tablo_prostor { padding: 0.2em 0.3em; overflow: hidden; }

.slogan
{
  background-color: #0372bc;
  margin: 1.2em 1em;
  padding: 0.7em 1.0em!important;
  box-shadow: 5px 5px 5px #afafaf;
  font-size: 145%!important;
  border-right: 0.6em solid #ed2033;
}

.tablo_h1 { text-align: center; border-bottom: 0.1em solid #afafaf; margin-top: 1em; margin-bottom: 0.7em; margin-left: 2em; margin-right: 2em; }



.runvid { background-color: #df1f1f; color: #ffffff; font-family: Arial; font-weight: bold; position: absolute; bottom: 0; font-size: 80%; padding: 2px 7px; cursor: pointer; }
.centerit {
  border: 1px solid #7f7f7f;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}
.video-close
{
  width: 2em;
  height: 2em;
  background-image: url('img/close3.png');
  background-size: 2em;
  position: absolute;
  top: -1em;
  right: -1em;
  z-index: 3100;
  cursor: pointer;
}


#video-1 { display: none; }
#video-2 { display: none; }
#video-3 { display: none; }
#video-4 { display: none; }
#video-5 { display: none; }
#video-6 { display: none; }
#video-7 { display: none; }
#video-8 { display: none; }
#video-9 { display: none; }
#video-10 { display: none; }
#video-11 { display: none; }
#video-12 { display: none; }
#video-13 { display: none; }
#video-14 { display: none; }
#video-15 { display: none; }
#video-16 { display: none; }
#video-17 { display: none; }
#video-18 { display: none; }
#video-19 { display: none; }
#video-20 { display: none; }
#video-21 { display: none; }
#video-22 { display: none; }
#video-23 { display: none; }

#video-1.show { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 3000; background-color: rgba(0,0,0,0.9); min-height: 100%; }
#video-2.show { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 3000; background-color: rgba(0,0,0,0.9); min-height: 100%; }
#video-3.show { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 3000; background-color: rgba(0,0,0,0.9); min-height: 100%; }
#video-4.show { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 3000; background-color: rgba(0,0,0,0.9); min-height: 100%; }
#video-5.show { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 3000; background-color: rgba(0,0,0,0.9); min-height: 100%; }
#video-6.show { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 3000; background-color: rgba(0,0,0,0.9); min-height: 100%; }
#video-7.show { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 3000; background-color: rgba(0,0,0,0.9); min-height: 100%; }
#video-8.show { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 3000; background-color: rgba(0,0,0,0.9); min-height: 100%; }
#video-9.show { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 3000; background-color: rgba(0,0,0,0.9); min-height: 100%; }
#video-10.show { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 3000; background-color: rgba(0,0,0,0.9); min-height: 100%; }
#video-11.show { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 3000; background-color: rgba(0,0,0,0.9); min-height: 100%; }
#video-12.show { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 3000; background-color: rgba(0,0,0,0.9); min-height: 100%; }
#video-13.show { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 3000; background-color: rgba(0,0,0,0.9); min-height: 100%; }
#video-14.show { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 3000; background-color: rgba(0,0,0,0.9); min-height: 100%; }
#video-15.show { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 3000; background-color: rgba(0,0,0,0.9); min-height: 100%; }
#video-16.show { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 3000; background-color: rgba(0,0,0,0.9); min-height: 100%; }
#video-17.show { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 3000; background-color: rgba(0,0,0,0.9); min-height: 100%; }
#video-18.show { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 3000; background-color: rgba(0,0,0,0.9); min-height: 100%; }
#video-19.show { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 3000; background-color: rgba(0,0,0,0.9); min-height: 100%; }
#video-20.show { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 3000; background-color: rgba(0,0,0,0.9); min-height: 100%; }
#video-21.show { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 3000; background-color: rgba(0,0,0,0.9); min-height: 100%; }
#video-22.show { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 3000; background-color: rgba(0,0,0,0.9); min-height: 100%; }
#video-23.show { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 3000; background-color: rgba(0,0,0,0.9); min-height: 100%; }

.video-close-1 { }
.video-close-2 { }
.video-close-3 { }
.video-close-4 { }
.video-close-5 { }
.video-close-6 { }
.video-close-7 { }
.video-close-8 { }
.video-close-9 { }
.video-close-10 { }
.video-close-11 { }
.video-close-12 { }
.video-close-13 { }
.video-close-14 { }
.video-close-15 { }
.video-close-16 { }
.video-close-17 { }
.video-close-18 { }
.video-close-19 { }
.video-close-20 { }
.video-close-21 { }
.video-close-22 { }
.video-close-23 { }



.video-tema-close-2 { }

#video-tema-2 { display: none; }

#video-tema-2.show { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 3000; background-color: rgba(0,0,0,0.9); min-height: 100%; }

.runvid-tema-2 { cursor: pointer; }

.vstupenka { font-size: 105%; background-color: #efefef; padding: 0.5em!important; margin: 1em 0em;  }
.vstupenka TABLE { }
.vstupenka TABLE TH { text-align: right; padding: 0em 0.3em 0em 0.1em; }
.vstupenka TABLE TD { text-align: left; padding: 0em 0.1em 0em 0.3em; }

.rezervace { font-size: 105%; background-color: #6a1d0d; color: #ffffff; padding: 0.5em!important; margin: 0em; float: left; }
.rezervace A { color: #ffffff; text-decoration: none; }
.rezervace A:hover { color: #ffffff; text-decoration: underline; }