a {text-decoration: none;}
    .pul {box-sizing: border-box; padding: 0 1%; width: 49.5%; vertical-align: top;}
    .cely {box-sizing: border-box;  width: 100%; padding: 20px;  vertical-align: top; background-color: white; margin-bottom: 5px;}
    .ctvrt {width: 24%; padding-right: 0.5%;}
    .trictvrt {width: 74%; padding-right: 1.5%;}
    .max {width: 100%;} .cover {object-fit: cover; height: 250px;}

    .left {float: left;} img.left {margin: 0 1% 1% 0;} .cleft {clear: left;}
    .right {float: right;} img.right {margin: 0 0 1% 1%;} .cright {clear: right;}
    .clear {clear: both;} .inblock {display: inline-block;}

    .double {columns: 2; -webkit-columns: 2; -moz-columns: 2;}
    .triple {columns: 3; -webkit-columns: 3; -moz-columns: 3;}

    h1, h2, h3, h4 {font-weight: normal; color: black; margin: 15px 0 5px;}
    h1 {text-transform: uppercase; font-size: 32px; font-weight: bold;}
    h2 {font-size: 24px;}
    h3 {font-size: 22px;}
    h4 {font-size: 20px;}

    p {font-size: 16px;}
    p span {color: #c64f00; }
    p a {color: #c64f00; border-bottom: 1px dashed #c64f00;}
    p a:hover {border-bottom: 1px solid black; color: black;}
   .cta {background: #f66704 none repeat scroll 0 0; border-radius: 3px; color: white;
    display: inline-block; margin: 0 0 1px; padding: 0 10px 0 5px;}
   .cta .icon {padding: 2px 0; margin-right: 0.1em;}
    .sub {font-size: 21px; text-transform: uppercase; position: relative; top: -11px; color: #F66704; font-weight: bold;}


body * {font-family: century gothic,sans-serif;}
nav li a:hover {color: white;}
header {background: rgba(0, 0, 0, 0) url("/grafika/bgvyklizeni.jpg") repeat scroll 0 30% / cover ; min-height: 250px; width: 100%; padding: 0;}
footer {background: url("bgvyklizeni.jpg"); height: 250px; width: 100%; position: relative;}
footer::after {
    background: rgba(246, 103, 4, 0.8) none repeat scroll 0 0;
    content: "";
    height: 250px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%}
#top {background-color: rgba(255, 255, 255, 0.8); width: 100%; height: 100px}
#top img {margin-top: 15px;}
#promo {background: url("bgvyklizeni.jpg"); width: 100%; height: 168px; position: absolute; left: 0;}
#rotator {width: 100%; height: 300px; position: relative;}
article {min-height: 600px; background-color: #eeedf7;}

#promo * {position: relative; z-index: 5;}
#promo::after {background: rgba(246, 103, 4, 0.8) none repeat scroll 0 0; content: ""; height: 168px; left: 0;  position: absolute; top: 0; width: 100%;}
#promo p { color: white;}
#promo p a {color: black !important; border-bottom: 1px dashed black;}
#promo .cta {background: #333;}

#info span {font-size: 20px; font-weight: bold;}
#info span a {color: black;}
#info span svg {position: relative; top: 5px;}
#info {margin-top: 6px;}


#top, #rotator, article, footer, #promo, nav {padding: 0 200px;}
header *, #promo, footer {box-sizing: border-box;}



body {margin: 0;}

nav ul li a {margin: 15px;}
nav li {display: inline-block;}
.red {background-color: white; min-height: 500px;}
.yellow {background-color: white;  min-height: 650px;}
.obsah {height: 500px;}
.float {float: right;}

nav {position: absolute; width: 100%; z-index: 1;}
nav ul {margin: 0; padding: 0; background-color: rgba(246, 103, 4, 0.8); height: 46px;}
nav ul li {float: left;  margin: 9px 8px;}
nav ul li a {color: black; height: 35px; text-transform: uppercase; font-weight: bold; text-shadow: 0 0 1px gray; font-size: 20px; letter-spacing: -0.2px;}

#akce {background-color: rgba(0, 0, 0, 0.8); color: white; height: 180px; left: 200px; padding: 10px;
    position: absolute; top: 170px; width: 550px; z-index: 2;}

#akce span {display: block; font-family: century gothic; font-size: 22px;
    font-weight: bold; margin-left: 10px; margin-top: 10px; padding-bottom: 10px;
    padding-left: 40px; padding-top: 3px; position: relative; text-transform: uppercase; z-index: 10; }

#akce > span::before {background: #f66704; border: 2px solid #f66704; border-radius: 50px; color: black;
    content: "✔️"; font-size: 23px !important; font-weight: bold; height: 30px; left: 0; position: absolute; text-align: center;
    top: 0; width: 30px;}


table {color: white; padding-left: 34px}
#promo h2 {color: white; padding-left: 15px;}
#formular {width: 50%; margin-left: 25px;}
.kontakt {background-color: white;}
.double {font-weight: bold;}
footer a {color: white; text-decoration: none;}
footer ul {padding-top: 40px; margin: 0; list-style-type: none; position: relative; z-index: 5; display: inline-block; margin-top: 10px;}
.white {background-color: white; padding: 20px;}
.push {padding-top: 140px; min-height: 0px;}
footer span {color: white; float: right; z-index: 5; position: relative; padding-top: 40px; padding-right: 45px; font-weight: bold;}

.odeslat {background-color: rgb(246, 103, 4); cursor: pointer; }
.odeslat:hover {background-color: orange; color: white;}
input {margin-left: 10px; margin-top: 5px; border-radius: 5px; height: 30px; width: 240px; border: 0; padding-left: 10px;}
textarea {margin-left: 10px; margin-top: 5px; border-radius: 5px; border: 0; padding-left: 10px; font-size: 14px; padding-top: 10px;}
.orangeblock {background-color: rgb(255, 221, 198); padding-top: 15px; margin-top: 15px;}
address {margin-bottom: 30px;}

@font-face {
      font-family: "fontello";
      src: url('/font/fontello.eot?22423175');
      src: url('/font/fontello.eot?22423175#iefix') format('embedded-opentype'),
           url('/font/fontello.woff?22423175') format('woff'),
           url('/font/fontello.ttf?22423175') format('truetype'),
           url('/font/fontello.svg?22423175#fontello') format('svg');
      font-weight: normal;
      font-style: normal;
    }

.grayblock h2,p {padding-left: 25px;}

.grayblock  {height: 450px;}

    .icon
    {font-family: "fontello"; font-style: normal; font-weight: normal; speak: none;
     display: inline-block; text-decoration: inherit; width: 1.2em; margin-right: .2em;
      text-align: center; font-variant: normal; text-transform: none; line-height: 1.2em;
      -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
      padding: 2px;}

nav button {display: none;}

.poptavka {background: #c9f2c9; padding: 10px; }
.poptavka label {width: 250px; display: inline-block;}
.poptavka label {vertical-align: top;}
.poptavka select {border: 0 none; border-radius: 5px; height: 30px; -webkit-appearance: none; -moz-appearance: none;
    margin-left: 10px; margin-top: 5px; padding-left: 10px; padding-right: 10px;width: 240px; background: white url("/grafika/select.png") no-repeat scroll right 5px; cursor: pointer;}
.poptavka textarea {width: 240px;}
.poptavka label span {color: red;}
.poptavka .odeslat {background: green; color: white; margin: 30px 20px 10px;}
.poptavka .odeslat:hover {background: darkgreen; color: white; }

.reddy {color: red; font-weight: bold; background: pink;}
.greeny {color: green; font-weight: bold; background: lightgreen;}

#poptavka {
    background: rgba(255, 255, 255, 0.8) none repeat scroll 0 0;
    font-weight: bold;
    padding: 5px 20px;
    position: absolute;
    right: 200px;
    text-transform: uppercase;
    top: 150px; z-index: 20; color: black;
}

h1 span {
    font-size: 20px;
}

.npoptavka {
    position: absolute;
    top: 300px;
    z-index: 5;
    right: 11%;
    background: rgba(255,255,255,0.6);
    text-decoration: none;
    padding: 5px 10px;
    color: black;
    font-weight: bold;
}

    .nextimg {display: inline-block;}
    .nextimg li span {color: #f66704;}
    .nextimg li a {font-weight: bold; color: #f66704; border-bottom: 1px dashed #f66704;}
    .nextimg li a:hover {border-bottom: 1px solid #f66704;}

#mapa2 {
    width: 330px;
    margin: 50px auto;
    height: 330px;
}
#mapa2 svg {
    width: 100%;
    transform: rotate(3.0deg);
    position: relative;
    top: 0;
    left: 0;
    overflow: initial;

}

.rep {color: white; font-weight: bold; font-size: 22px; display: block;  margin-bottom: 15px; text-transform: uppercase; text-align: center;}

path {
    fill-opacity: 0.6;
    stroke: #fff;
    fill: #E55A0E;
}

a path {fill-opacity: 0.7;}
a path:hover {fill-opacity: 0.9;}

.okres {
    text-align: center;
    display: none;
}

.nadpis {
    transform: rotate(-3.0deg);
    color: #E55A0E; font-weight: bold;
    padding: 5px 0;
    top: 10px;
    position: absolute;
    font-size: 20px;
    text-transform: uppercase;
    width: 100%;
    z-index: 5;
    left: 10px;
}
.popis {
    transform: rotate(-3.0deg);
    font-size: 18px;
    position: absolute;
    padding: 10px;
    top: 36px; left: 10px; color: gainsboro;
}

#ostrava_a:hover ~ .node .ostrava {display: block;}
#opava_a:hover ~ .node .opava {display: block;}
#karvina_a:hover ~ .node .karvina {display: block;}
#pardubice_a:hover ~ .node .pardubice {display: block;}
#hradec-kralove_a:hover ~ .node .hradec-kralove {display: block;}
#ceska-lipa_a:hover ~ .node .ceska-lipa {display: block;}
#jablonec_a:hover ~ .node .jablonec {display: block;}
#most_a:hover ~ .node .most {display: block;}
#teplice_a:hover ~ .node .teplice {display: block;}
#usti_a:hover ~ .node .usti {display: block;}
#decin_a:hover ~ .node .decin {display: block;}
#praha_a:hover ~ .node .praha {display: block;}
#pribram_a:hover ~ .node .pribram {display: block;}
#benesov_a:hover ~ .node .benesov {display: block;}
#kutna-hora_a:hover ~ .node .kutna-hora {display: block;}
#beroun_a:hover ~ .node .beroun {display: block;}
#kladno_a:hover ~ .node .kladno {display: block;}
#nymburk_a:hover ~ .node .nymburk {display: block;}
#mlada-boleslav_a:hover ~ .node .mlada-boleslav {display: block;}
#melnik_a:hover ~ .node .melnik {display: block;}
#vychod:hover ~ .node .vychod {display: block;}
#zapad:hover ~ .node .zapad {display: block;}
#chomutov_a:hover ~ .node .chomutov {display: block;}
#kolin_a:hover ~ .node .kolin {display: block;}
#rakovnik_a:hover ~ .node .rakovnik {display: block;}


.plno {background: red; min-height: 30px;}    

    @media (max-width: 1740px) {nav ul li a {font-size: 18px; margin: 15px 10px;} .npoptavka{right: 200px;}}
    @media (max-width: 1570px) {nav ul li a {font-size: 17px; margin: 15px 8px;}}
    @media (max-width: 1560px) {.cover{height: 350px;} .double-row {columns: 1; -webkit-columns: 1; -moz-columns: 1;}}
    @media (max-width: 1490px) {nav ul li a {font-size: 16px; margin: 6px;} nav ul {height: 40px;}}
    @media (max-width: 1415px) {nav ul li a {font-size: 16px; margin: 4px;} nav ul {height: 40px;}}

    @media (max-width: 1360px) {#top, #rotator, article, footer, #promo, nav {padding: 0 100px;} #poptavka {right: 100px;} #akce {left:100px;} .npoptavka{right: 100px;}}
    @media (max-width: 1340px) {.block1340 {display: block; width: 100%;}}
    @media (max-width: 1260px) {}
    @media (max-width: 1240px) {nav ul li a {font-size: 15px; } .cover {height: 250px; width: 100%; margin: 20px 0 !important;} .cover.down {object-position: 50% 30%;} .cover.up {object-position: 50% 70%;} .double-row {columns: 2; -webkit-columns: 2; -moz-columns: 2;} .pul {width: 100%;}}
    @media (max-width: 1140px) {#top, #rotator, article, footer, #promo, nav {padding: 0 40px;} #akce {left:50px;} #poptavka {right: 50px;} .npoptavka {right: 40px;}}
    @media (max-width: 1020px) {nav ul li a {font-size: 14px; margin: 3px;}}

    @media (max-width: 1020px) {nav ul > li:last-child {bottom: -260px; position: absolute; right: 30px; background: rgba(246, 103, 4, 0.8); padding: 8px 15px;}}


    @media (min-width: 1500px) {#promo p {width: 70%;}}