* {
box-sizing: border-box; }

body {
background: url('../img/pruh.jpg') repeat-x 50% 0% #fff;
font-family: 'Rajdhani','Open sans', sans-serif;
font-weight: 200;
-webkit-text-size-adjust: 100%;
text-align: left;
padding: 0;
margin: 0;
line-height: 2.0em; }

.page {
max-width: 1200px;
position: relative;
padding: 1.5em 1em;
margin: 0 auto; }

header {
border: 1px solid #272b2e;
text-align: center;
background: #272b2e; }

header .page {
padding: 0 1em; }

#logo {
position: relative;
margin: 0 auto;
max-width: 30%;
height: auto; }

header h1 {
font-size: 1.2em;
padding-bottom: 1em;
color: white;
font-weight: 100; }

/* menu */
nav label, [id^=drop] {
display: none; }

[id^=drop]:checked + ul {
display: block; }

.toggle + a, nav div > ul {
display: none; }

nav {
background: #272b2e;
position: relative;
text-align: right;
margin:0;
padding: 0; }

nav .page {
padding: 0.5em 1em; }

nav label {
display: block; }

nav div > label {
font-size: 1.5em;
color: #bdbdbd;
font-weight: bold;
float: right;
display: block;
position: relative;
right: 0;
padding: 0;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }

nav div > ul {
width: 100%;
position: relative;
margin: 0;
top: 0px;
z-index: 600; }

nav ul, nav li {
margin:0;
padding: 0;
list-style: none; }

nav ul ul {
position:static;
display: none; }

nav ul li a, nav ul label  {
color: #bdbdbd;
overflow: hidden;
text-align: center;
text-transform: uppercase;
display: block;
padding: 0.5em 0;
font-size: 0.8em;
text-decoration: none;
border-bottom: 1px solid #404040; }

nav ul li a:hover, nav ul label:hover  {
font-weight: bold; }

nav ul li:last-child a {
border-bottom: none; }


#graphic {
text-align: center;
background-image: url('/layout/img/bbb-uvod-mobil2.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 0%; }

#graphic p {
color: white;
max-width: 90%;
margin: 0 auto;
text-shadow: 0px 0px 3px #272b2e; }

.button {
text-align: center;
text-decoration: none;
color: black;
display: inline-block;
height: 3em;
font-weight: bold;
line-height: 3em;
width: 150px;
margin: 10px 10px 0px 0;
text-transform: uppercase;
font-size: 0.8em; }

.button_white {
background-color: white;
border: 1px solid white; }

.button_white:hover {
background-color: #ccc;
border: 1px solid #ccc; }

.button_red {
color: white;
border: 1px solid #ee4037;
background-color: #ee4037; }

.button_red:hover {
border: 1px solid #ff5047;
background-color: #ff4047; }

#content {
font-size: 1.1em; }

#content h1 {
font-size: 1.5em;
border-bottom: 4px solid #ee4037;
color: #ee4037;
text-transform: uppercase; }

#content h2 {
font-size: 1.25em;
xborder-bottom: 1px solid #404040;
color: #404040;
margin-top: 2em;
text-transform: uppercase; }

label {
display: inline-block;
font-weight: bold;
width: 150px; }

.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0; }

.clear {
clear: both; }

#mapa {
width: 100%;
height: 30vh; }

ul {
list-style-type: square; }

#banner {
background-color: #ee4037; }

#banner .page {
color: white; }

#banner p span {
font-weight: bold;
font-size: 3.0em; }

#banner p {
line-height: 1.5em; }


#statistiky {
padding: 2em 0; }

.sub {
box-sizing: border-box;
float: left;
position: relative;
width: 50%;
overflow: hidden;
background: #efefef;
border: 1px solid white;
color: black; }

.sub:before{
content: "";
display: block;
padding-top: 100%; }

.sub2{
position:  absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
color: white; }

.sub2 div {
display: table;
width: 100%;
height: 100%; }

.sub2 span {
display: table-cell;
text-align: center;
vertical-align: middle;
color: black; }
 
.sub b {
color: #ee4037;
font-weight: 800;
font-size: 3.0em; }

#footer {
text-align: center; }

input, select, textarea {
padding: 6px 6px;
margin-bottom: 3px; 
border: 1px solid #888; }

input {
min-width: 200px; }

input[type="checkbox"] {
width: 25px;
min-width: auto; }

textarea {
min-width: 350px; }

input[type="submit"] {
color: white;
min-width: 130px;
border: 1px solid  #ee4037;
background-color:  #ee4037; }

input[type="submit"]:hover {
cursor: pointer; }

.chybka {
color: red; }

.submenu {
background-color: #555;
text-decoration: none;
color: white;
text-transform: uppercase;
font-size: 0.8em;
padding: 6px 10px; }

table {
border-collapse: collapse;
margin-bottom: 1em;
width: 100%; }

th {
text-align: left;
background-color: #ddd;
font-weight: normal; }

th, td {
border: 1px solid white;
padding: 4px 8px; }

tr:nth-child(odd) {
background-color: #efefef; }

.right {
text-align: right; }

.center {
text-align: center; }

.block {
width: 50%;
text-align: center;
float: left;
padding: 2em 0;
color: #888;}

.block span {
display: block;
margin-bottom: 0.2em;
font-size: 2em;
color: #ee4037;
font-weight: bold; }

.pozn {
font-size: 0.9em;
color: #888; }

.noreq {
font-weight: normal !important; }

.detail_fotka {
width: 15%;
height: auto;
float: right;
margin: 0 0 20px 20px; }


/* DESKTOP */
@media only screen and (min-width: 900px) {

    #logo {
    top: 20px;
    margin-bottom: 10px;
    max-width: 10%; }

    #graphic {
    padding: 5em 0;
    background-position: 10% 5%;
    background-image: url('/layout/img/bbb-uvod.jpg'); }

    #graphic p {
    width: 60%;
    margin: 0 auto;
    font-size: 1.5em; }

    nav {
    top: 0;
    z-index: 500;
    position: sticky; }

    nav div > label {
    display: none; }

    nav div > ul {
    display: block;
    position: relative;
    max-width: none;
    text-align: center; }

    nav div > ul > li {
    width: 14.27% !important;
    padding: 0;
    float: left;
    display: block; }

    nav div > ul > li > a, nav ul label {
    border: none;
    border-bottom: 1px solid #404040;
    text-align: center;
    font-size: 1.1em;
    color: white;
    white-space: nowrap; }

    nav ul li:last-child a {
    border-bottom: 1px solid #404040; }

    nav div > ul > li > a:hover, nav label:hover, .active {
    font-weight: bold;
    border-bottom: 1px solid  white !important; }

    nav ul label:after { content: ''; }

    nav ul li:hover > ul {
    text-align: left;
    display: block; }

    nav ul ul li a {
    padding: 0 1em; }

    nav ul ul {
    display: none;
    position: absolute; }

    #banner .page {
    padding: 3em 0;
    background-image: url('/layout/img/banner.png');
    background-repeat: no-repeat;
    background-size: auto 60%;
    background-position: 5% 50%; }
    
    #banner p {
    margin-left: 30%; }
    
    .sub {
    width: 25%; }    

    .sub:after {
    padding-bottom: 25%; }

    #content {
    min-height: 25em; }

    .block {
    font-size: 1.2em;
    width: 33.33333%; }
}