* {margin: 0; padding: 0;}

#palette {font-family: "Raleway", sans-serif;}

body {font-size: 100%; background: #fff; font-family: 'Raleway', sans-serif; color: #011a31; text-align: center; }
hr {clear: both; visibility: hidden; height: 0; border: none;}
hr.carka {visibility: visible; margin: 1em auto; width: 100%; max-width: 80px; color: #f60; border: 1px dotted #96b1ca;}

/*---------menu---------*/
 div.menu {width: 100%;  margin: auto; z-index: 100; background: #f6f6f6; }
.menu button {
    background: #f6f6f6;
    border: none;
    color: #00427f;
    font-size: 3em;
    cursor: pointer;
    display: block;
    width: 2em;
    height: 1.5em;
    margin: auto;
   
    
}

 .menu menu {display: none;}

.menu.zobrazit menu {display: block;}
div.menu menu {margin-top: 0.1em;}


div.menu li {list-style: none;}
div.menu a {display: block; background: #f6f6f6; color: #00427f; font-size: 1.3em; width: 100%; max-width: 700px; padding: 0.65em 0; border-bottom: 1px solid #ccc; text-decoration: none; margin: auto; }
div.menu  a#last {border-bottom: none;}
div.menu a:hover {background: #005fae; color: #fff; }
body#home div.menu a#domu {background: #005fae; color: #fff; }



div#hlavicka {width: 100%; max-width: 1600px; margin: auto; background: url(img/planek.gif) no-repeat; background-size: cover;  background-position: center; padding: 2em 0; position: relative; }
div#mutace {position: absolute; width: 72px; top: 20px; left: 50%; margin-left: -36px; } 
div#mutace img {float: left; width: 30px; height: 20px; margin: 0 3px; } 
div#mutace a img {border: none;}
div#logo img {width: 90%; max-width: 250px; margin: 2em auto 0 auto;}
div#logo h1 {color: #00427f; font-style: italic; font-weight: 300; margin: 0.25em auto 1em auto;}  
div#hlavicka a.tlac {display: block; background: #e3004a; padding: 1em; max-width: 150px; margin: 1em auto; color: #fff; text-decoration: none; font-size: 1em;  text-transform: uppercase;}

div#trojka  {width: 100%; max-width: 500px; margin: auto;}
div.tretinka {width: 100%; max-width: 500px; margin: 1em auto; background: #f6f6f6; padding-bottom: 1em; }
div.tretinka div {width: 100%; max-width: 500px; margin: auto; background: no-repeat; background-size: cover; min-height: 200px; background-position: center;   } 
div.tretinka div h2 {display: inline-block; color: #fff; margin: 2em auto 0 auto; text-transform: uppercase; font-size: 1.6em; text-shadow: 2px 2px 10px #333;  } 
div.tretinka div img {display: block; width: 100%; max-width: 47px; margin: 1em auto;  }
div.tretinka p {padding: 1em; font-size: 0.9em; line-height: 1.6em; margin: 1em auto;  } 


div.obsah {width: 100%; max-width: 1600px; margin: 1em auto;}
div.obsah h3,
h1#mr {font-size: 1.6em; color: #00427f; text-transform: uppercase; margin: 1em auto;}
div.obsah p {width: 90%; max-width: 800px; padding: 1em 0; margin: auto; line-height: 1.6em; font-weight: 300;}

iframe { width: 100%; max-width: 1920px; margin: 2em auto; }
div#mapa {position: relative; width: 100%; max-width: 1920px; margin: auto;  }
div#mapa div {position: absolute;  background: url(img/bgmap.png); top: 15%; right: 5%; padding: 1em 2em 2em 2em; box-shadow: 0 0 50px #c8dff5;}
div#mapa div h4,
div#mapa div h5 {font-size: 1.4em; text-transform: uppercase; margin: 1em auto;}
div#mapa div h4 {font-weight: 800; margin-bottom: 0;}

/*------kolotoč--------*/
div.obsah h4 {margin-top: 2em; color: #005fae; text-transform: uppercase; font-weight: 600;}
div#kolotoc {width: 100%; max-width: 1600px; margin: 2em auto;} 


/*----------------formulář-----------*/
form {width: 90%; margin: auto; }
input {font-size: 1.1em; font-weight: 100; }
input#submit,
.form-style-8 input[type="button"], 
.form-style-8 input[type="submit"]
 {display: inline-block; cursor: pointer; background: #e3004a; padding: 0.75em 1em; max-width: 180px; margin: 1em auto; color: #fff; text-decoration: none; font-size: 1em;  text-transform: uppercase; border: 1px solid #fff;}
textarea {font-size: 1.1em; font-weight: 100; }
form p {text-align: left; font-size: 1.1em; padding: 1em 0;}
p#spamanswer {margin: 2em 0; line-height: 1.4em;} 
p#spamanswer span {font-weight: 600; }
form p {padding: 0; margin: 0.5em 0;}
form p.legenda {font-weight: 600; }
form table {text-align: left;}







div#podcopy {width: 100%; max-width: 100%; margin: auto; background: #252122; padding: 2em 0; }
div#mapa div p {font-size: 1em; line-height: 1.4em;}
div#copy p {color: #efefef; line-height: 1.3em; margin: 0.5em auto; font-size: 0.9em;}
div#copy p a {text-decoration: none; color: #efefef; padding-bottom: 0.1em; border-bottom: 1px dotted #efefef;}


@media screen and (min-width: 700px) {
.menu button {
    display: none;
}
.menu menu {display: block; margin: auto; }
div.menu li {display: inline-block;  }
div.menu a {display: inline-block; font-size: 1em;   margin: 1em; border: none; text-decoration: none; text-transform: uppercase; }
div.menu  a#last { border: none;}
div.menu a:hover,
div.menu  a#last:hover {background: #005fae; color: #fff;  }
}

@media screen and (min-width: 1080px) {
div#trojka  {max-width: 1080px;}
div.tretinka {float: left; width: 31.33%;  margin: 1%; }
div.tretinka p {padding: 1em 1em 0 1em; min-height: 200px;  } 
}