* {
//font-family: Lucida Grande, Lucida Sans, Arial, sans-serif;
font-family:  Verdana, "Trebuchet MS", sans-serif;
//font-family: Georgia, serif;
}

*, 
*:after, 
*:before {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}



body {
text-align:center;
overflow-x: hidden;
background-color: #ccc;
}

/*Doporucene nastaveni podle webu jecas*/
img, iframe, canvas, video, svg {
  max-width: 100%;
  height: auto;
}

input, textarea, select {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/*Velikost stranky a  ostylovani sekci*/
.tucne {
font-weight: bold;
}
  
/*Navigace*/
 

#menu {
width:90%;
height: 100%;
margin:5px auto;
}

menu {
margin: 0 1em;
padding: 0;
text-align: center;
}
   
#menu menu li {
display: inline-block;
list-style-type: none;
font-weight: bold;
margin:0 0 1.1em 0;
}
 
#menu menu li a{
color: #DDD;
margin-left: -.3em;
text-decoration: none;
padding: .5em .3em .5em .3em;
background-color: brown;

}
  
#menu menu li a:hover {
background-color: #F90;
color: black;
}

#menu menu li #active a {
background-color: #0B0;
}

#menu button {
    background: brown;
    border: 0;
    color: #fff;
    font-size: 30px;
    cursor: pointer;
    display: none;
}  
 
#menu.zobrazit menu {
  display: block;
    }

@media screen and (max-width: 390px) {

    #menu button {
        display: block;
       float: right;
       margin-bottom: .4em;
              }
          
    #menu menu li {
        display: list-item;
    list-style-type: none;
    text-align: right;
                }
      
        #menu menu {
        margin: 0;
        display: none;
        clear: both;
        }
}

/*Konec stylu pro menu*/
header {
text-align: left;
padding:.5em;
}

header a {
display:block;
margin: .2em 0 .6em 0;
}

h1, h2 {
font-size: 1em;
}

#poradi_otazky {
font-size:60%;
}

#main {
padding:.3em;
padding-right:.5em; 
width: auto;
}


#vyber {
  margin: 1em;
  text-align: center;
} 

#vyber a {
  text-decoration: none;
  color: wheat;
  background: #0B0;
  width: 2em;
  border-radius: .5em;
  padding: 1em;
}

@media screen and (max-width: 600px) {
  #vyber a {
    width: 100px;
    display: inline-block;
     padding: 1em .1em;
  margin-top: 1em;
  }

}


#pocet_otazek {
display:none;
}                  

.step {
border: 2px solid silver;
margin:1em 0;
background-color: #FF6;
}

.step h2 {
text-align: left;
}

.otazka {
margin: 0em .1em 0 .1em;
padding: .1em;
font-weight: bold;
}

.odpoved {
margin: .3em .1em;
background-color: #FFF;
border: 1px solid silver;
text-align: left;
padding: .2em;
}

.odpoved a {
text-decoration:none;
border-radius: .3em;
color: white;
font-weight:bold;
background-color: blue;
padding:.2em;
margin: .3em;
}

#zpet {
background-color: green;
border-radius: .3em;
display:inline-block;
}

#zpet a {
white-space:nowrap;
text-decoration:none;
font-weight:bold;
color:white;
padding:.2em;
}
 
.varovani {
border:2px solid red;
}

.dlazdice, .dlazdice1, .dlazdice2 {
border: 1px solid silver;
width:196px;
height:140px;
margin: 0 auto;
padding: .1em;
} 

.dlazdice, .dlazdice3 {
background: #FE9;
}

.dlazdice1, .dlazdice4 {
background: #CCC;
}

.dlazdice2, .dlazdice5 {
background: #C3F;
}

#main .sloupec {
float: left;
}

#main hr {
border: 2px dotted silver;
}

.formular {
display: inline-block;
border: 1px solid silver;
border-radius:5px;
box-shadow: 2px 2px silver;
padding: 3px;
margin: 2px;
background-color: #DDD;
}

#titulek {
text-align: center;
font-weight: bolder;
color:white; 
background-color:brown;
padding: 1em 0 .5em 0;
margin: -.9em auto 0 auto;
width: auto;
}

/*Vlajka v titulku*/
.flag {
position: absolute;
left:.5em;
margin-bottom:2em;
}

#container {
text-align: left;
max-width: 63.5em;
margin: 1em auto;
padding-top: 4.3em;
background-color: white;
border: 2px solid #999;
border-radius: 1em;
}
/*#container {
text-align: left;
max-width: 63.5em;
margin: 1em auto;
padding-top: 6.3em;
} */

 /* 
#container {
text-align: left;
max-width: 63.5em;
margin: 1em auto;
//padding: 6.3em .5em .5em .5em;
background-color: white;
border: 2px solid #999;
border-radius: 1em;
}*/ 

#main .invisible, .invisible {
visibility: hidden;
}

#result-box {
max-width: 40em;
margin-left: auto;
margin-right: auto;
}                             

#result-box .dlazdice, #result-box .dlazdice1, #result-box .dlazdice2{
float: left;
margin: 0 .3em .4em 0;
text-align: center;
padding: .2em .1em;
min-height: 130px;
}

.zvyraznene {
  font-size: larger;
  font-weight: bold;
  margin-bottom: 1em;
}

.vyrazne {
    padding: 0.1em;
    margin-right: 1em;
  background-color: #BBB;
  font-weight: bold;
  border-radius: 5px;

}

#popis {
  line-height: 130%;
  background: #ddd;
}

.odstavec{
text-align: center;
width: 90%;
margin: .5em;
}

#result_links {
text-align: center;
margin: .2em auto .5em auto;}

.cleaner, #cleaner, .cleaner1 {
clear: both;
}

.cleaner1 {
visibility:hidden;
}

/*Na strance vysledek.php*/
#ulozit {
background-color:#0B0;
margin: .2em .2em 2em .2em;
padding: 1em; 
border-radius: .5em; 
box-shadow:0 0 .5em .5em silver;
}

#qr {
margin: .6em;
float: left;
}

.shoda {
margin: .1em;
font-weight: bold;
padding: .3em;
background-color: #9F0;
}

.neshoda {
margin: .1em;
font-weight: bold;
padding: .3em;
background-color: #F30;
}

/*Mailový formulář*/

#formular{
/*Nadpis nad formularem*/
width: 100%;
text-align: center;
}

#mailovy_formular{
margin: 0 auto;
text-align: left;
max-width: 40em;
}

#mailovy_formular label{
width: 10em;
margin-right: 1em;
}

#mailovy_formular .left{
  position:  relative;
  display:  block;
    float:  left;
}


#mailovy_formular form p{
 margin-bottom: 2em;
  clear:  both;
}

#captcha {
margin: -1em 0 1em 0;
border: 2px solid red;
} 

.banner, .banner1 {
margin: 1em 2em;
}

code {
padding: .1em;
margin-top: .2em;
display: block;
background-color: #7FFFD4;
}

.banner1 img {
/*float: left;*/
margin: 0em .1em 0em 0em;
}



.banner1 div {
clear: both;
}

#copyright {
margin-top: -2em;
}

.kalendar {
border-radius:5%;
width:9em;
height: 40em;
margin-top:0;
margin-left: 1em;
margin-bottom:2em;
padding: .1em; 
float: left;
background-color:#FE9;
}

strong {
padding-left: 1em;
}

#kontakt {
text-align: center;
}

#seznam_jmen {
  margin-bottom: 1em;
 }

.anchor {
margin-bottom: 1em;
}

.plemeno {
width: auto;
display: inline-block;
margin: 0 1em;
padding: .3em;
background-color: #FF6;
}

#topten {
display: inline-block;
margin-bottom: 1em;
}

.top10 {
background-color: #FF6;
text-align: left;
margin: 1em;
padding:1em;
border-radius: 1em;
}

#fotka_a_popis{
margin-bottom: 2em;
}

#foto_velke {
width: 200px;
float:left;
padding: .5em;
}

#fotka_a_popis p {
padding: 0 .3em;
width: 100%;
padding-left: 220px;
}

#standard {
padding: .1em .5em;
margin: 1em 1em 2em 1em;
background-color: #FF6;
}

#main h3 {
font-size: 100%;
text-align: center;
}

#main .sluzby{
text-align: left;
}

#dotaz_na_plemeno {
margin: auto;
padding: 1em;
background: #CDC;
}

#prozkoumat {
margin-top: 1em;
} 

.respons {
display: none;
}

/* *****************`px************************************* */

@media screen and (max-width: 600px) {

#container {
padding-top: .5em;
}

.no_respons {
display: none;
}

.respons {
display: block;
}

#ann {
max-width: 20em;
max-height: 110px;
margin: .1em auto .1em;
padding: .2em .2em 0 .2em;
background-color: #DDD;
position: relative;
top:2.5em;
}

#linka {
display: none;
}

#main {
margin-top:1.3em;
}


.rozbalovac {
margin-top: 1em;
}

#main .pravy {
margin-left:0;
width: 100%;
padding-left: 0;
}

#main label[for="box1"]{
text-align: right;
margin-right:1em;
}

.formular {
border: 1px solid silver;
}

input.rozbalovac {display: none;} /* skrytí inputu */
input[type=checkbox]:checked + .rozbalovaci .obsah {display: block} /* zobrazení obsahu */

.rozbalovaci > .obsah {display: none} /* skrytí obsahu */

/* Styl přepínátka */
.rozbalovaci > label {
  display: block;
  cursor: pointer;
  background: brown;
  color: #FFF;
  padding: .5em;
}
input[type=checkbox]:checked + .rozbalovaci label {background: #0B08;}

.rozbalovaci > label:before {content: "+"; background: #fff; color: #000; padding: 0 .3em; margin-right: 1em; border-radius: 3px;}
input[type=checkbox]:checked + .rozbalovaci label:before {content: "−"}

.rozbalovaci > .obsah {background: #fff; padding: .5em} 

#fotka_a_popis p {
padding: 0 .3em;
width: 100%;
clear: both;
}
/*zviditelnění respons banneru*/
#respons_baner {
display: block;
margin: 1em auto;
margin-bottom:5em;
max-width:472px;
max-height:62px;
-webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
border: 1px solid #ccc;
}
/*Zneviditelnění velkého banneru pro malá rozlišení*/
#baner {
display: none;
}

.gas {

}
 }

/*Styly pro Annonci*/
#ann {
max-width: 20em;
max-height: 110px;
margin: .2em auto .1em;
padding: .2em .2em 0 .2em;
background-color: #DDD;
}

#ann .ann {
position: relative;
display:inline-block;
top: -5em;
margin-left: 4em;
text-align: justify;
}

#ann .ann a {
font-size:120%;
font-weight: bold;
}