.top-bar {background-color: #262a2b; padding: 5px 0; border-bottom: 3px solid #ddd;}
.top-bar a, .td-footer a, .dark-red a {color: aaa;}
a:hover {text-decoration: underline !important;  cursor: pointer !important;}

.navbar {padding: 20px 1px; background: #f9f9f9 !important;}

html {position: relative;}

.icon {float: left; margin-right: 10px;}
.icon16 {width: 16px;}
.icon20 {width: 20px;}
.icon24 {width: 24px;}

img.logo {width: 250px;}

div.box {float: left; display: flex; justify-content: center; align-items: center; color: white;} 
div.box span {color: #0a8a15;} 

.padding-lr-25 {padding-left:  25px !important; padding-right: 25px !important;}

div.sticky_nav {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    float: left;
  }

  .galleryLink .mainPic {
    width: 65px;
    float: left;
  }

  .td-thumbnail img {
    margin: 0 !important;
  }

  a.kronikaBox {float: left; position: relative;	display: flex;	align-items: center; justify-content: center; padding: 10px 10px; margin: 5px; width: calc(33% - 10px); background-color: #fff; border: 1px solid #0a8a15; text-decoration: none;}
  a.kronikaBox:hover {color: #fff; border: 1px solid #0a8a15; background: #0a8a15;}

  a.galleryLink {border: 1px solid #ddd; float: left; position: relative; width: 100%; margin-bottom: 5px; }
  a.galleryLink img {float: left;}
  a.galleryLink span {text-decoration: none; padding: 15px; padding-top: 22px; float: left;}
  a.galleryLink:hover {background-color: #eee;}

  a.thumbnailLG {width: calc(25% - 10px); float: left; min-height: 150px; overflow: hidden; margin: 5px; position: relative; border: 1px solid #ddd;}
  a.thumbnailLG img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1.2); transition: 0.15s; opacity: 0.8;}
  a.thumbnailLG img:hover {transform: translate(-50%, -50%) scale(1.4);  opacity: 1;}
  

table.table_odpady {
    display: flex; justify-content: center; align-items: center; width: 100%; margin-top: 25px;
}

.margin-top {margin-top: 72px; display: block;}

ul.pagination {margin: 0 !important; flex-wrap: wrap;}
ul.pagination a.page-link.active {background-color: #0a8a15 !important;; color: white !important; }
div.collapse  {flex-grow: 0;}
ul.navbar-nav {float: right;}

.example-video-dimensions {   width: 100%; float: left; height: auto; }
.example-video-dimensions:after { content: ""; display: block; padding-bottom: 82%;  }

div.top-strip {padding: 25px 0;}

div.menu-strip {
    background-color: #0a8a15 !important;
    box-shadow: 0px 5px 5px 0px rgb(50 50 50 / 15%);
}

table.table-zapisy tr {
    float: left; width: 33.33% !important; height: 500px !important;
}

table.table-zapisy tr td {
    float: left; width: 100% !important; height: auto !important;  padding: 10px; text-align: center; border: none;
}

table.table-zapisy tr {
  border-bottom: 1px solid #ddd;
}

.blockLeft623 table.table-zapisy tr {
    min-height: 0; height: auto !important;
}


a.downloadItem {float: left; width: 100%; padding: 10px; text-decoration: none; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;} 
a.downloadItem:hover {background-color: #f9f9f9;} 
a.downloadItem img {float: left; width: 30px; margin-right: 15px;} 
a.downloadItem span {font-size: 10pt; margin-left: 15px;}
.anketa {float: left; width: 100%; margin: 15px 0;}
.anketaOtazka {font-weight: bold; width: 100%; float: left; line-height: 100%; margin-bottom: 10px; }
.anketaOdpoved {float: left; width: 100%; padding: 5px;}
.anketaOdpoved span {font-weight: bold; color: #aaa}
.vysledekBox {float: left; height: 10px; background-color: #0a8a15; display: block; position: relative;}

.anketaOdpoved input[type='radio'] {width: 22px; height: 22px; border-radius: 22px; border: 1px solid #ccc; margin-right: 5px; cursor: pointer;}
.anketaOdpoved input[type='radio']:checked {background: #0a8a15;}

.icon64 {width: 64px;}

.koupalisteStatus {position: relative; display: flex; justify-content: center; align-items: center;;}

li.nav-item {padding: 2px 15px;}
li.nav-item a {font-size: 16pt;  margin: 5px 0; padding: 0px 0px !important; border-bottom: 3px solid #f9f9f9;}
li.nav-item:hover a {border-bottom: 3px solid #ddd;}
li.nav-item.active a {font-weight: bold; border-bottom: 3px solid #0a8a15;}
.line {background-color: #0a8a15; height: 3px; width: 100px;}

iframe {filter: grayscale(100);}

.padding-t-55 {padding: 55px 0;}

a.logo {position: relative; z-index: 49;}
.mobile {display: none;}
.logo2 {width: 280px;}

.social-icon {width: 40px; height: 40px; opacity: 0.7; filter: grayscale(100%);}
.social-icon:hover {opacity: 1; filter: grayscale(0%);}

.td_pricelist {float: left; width: 100%;}

a.nav-link {text-decoration: none !important;}
.td_search_results h3 {text-align: left !important;}

.td_slick_line {margin-top: 10px; float: left; width: 100%;}
.td_slick {float: left; width: 100%;box-shadow: 0px 5px 5px 0px rgb(50 50 50 / 15%); }
.td-footer {background-color: #2a231e; padding: 55px 0;}
.td-total-footer {background-color: #2a231e; padding: 5px 0; color: white;}
.td-total-footer  .container p, .td-total-footer  .container {color: #ccc !important;}
.td-total-footer .container {border-top: 1px solid #555; text-align: center;}
.card {margin: 10px; width: calc(33.33% - 20px); transition: 0.2s;}
.card-text {display: block; float: left; width: 100%;}

a.uredni-deska {background-color: #0a8a15; color: white !important; text-decoration: none; text-align: center; padding: 15px; margin-bottom: 25px;}
a.uredni-deska:hover {text-decoration: none !important;  background-color: #aaa;}
a.uredni-deska img {width: 35px;}

a.margin-top-bottom-5 {margin: 5px !important;; width: calc(25% - 10px) !important; font-weight: bold; background-color: #0a8a15; color: #fff !important; padding: 5px 15px; text-align: left; border-left: 10px solid #d6b300;}
a.margin-top-bottom-5 img {margin-right: 5px; filter: invert(0%);}
a.margin-top-bottom-5:hover {margin: 5px !important;; width: calc(25% - 10px) !important; background-color: #0a8a15; color: #fff !important; padding: 5px 15px;}
a.margin-top-bottom-5:hover img { filter: invert(0%);}

a.img-button {padding: 15px; margin-bottom: 25px; height: 150px; position: relative; width: calc(33.33% - 20px); margin: 10px; background-size: 100%; background-position: center;} 
a.img-button-mapa {background-image: url('/img/mapa.jpg'); background-size: 100%; background-position: center;} 
a.img-button-napiste {background-image: url('/img/napiste.jpg'); background-size: 100%; background-position: center;} 
a.img-button-zpravodaj {background-image: url('/img/zpravodaj.jpg'); background-size: 100%; background-position: center;} 

a.img-button span {position: absolute; bottom: 10px; left: 0px; color: white; background: #0a8a15; padding: 10px; font-size: 16pt; font-weight: bold; text-transform: uppercase; transition: 150ms;}
a.img-button:hover span {padding-left: 20px;} 

a.uredni-deska-reverse {background-color: #333; color: #fff !important; margin: 5px; text-decoration: none; text-align: center; padding: 15px; margin-bottom: 25px;}

.container {max-width: 1280px !important;}
.container-margin {max-width: 1306px !important;}

.col, .col-3 {padding: 0 !important;}
.row {margin: 0 -2px !important;}
.card h3 {background-color: #0a8a15; color: white; font-size: 25pt; width: 100%; float: left; text-align: center !important;}
.card p {width: 100%; float: left; text-align: center !important; }

.card:hover {-webkit-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.25);    -moz-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.25);    box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.25);}
.card:hover .btn-link {-webkit-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.25);    -moz-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.25);    box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.25);}

.margin-top-50 {margin-top: 50px;}

.sub_td_body {padding-top: 0;}

.td_slick button:focus {outline: none;}

a.btn-success:link, a.btn-success:visited {text-align: left; padding: 10px; width: 100%; background-color: white; color: #0a8a15 !important; border: 1px solid #0a8a15; margin: 5px 0;}
a.btn-success:hover {background-color: #0a8a15; color: white !important; text-decoration: none !important;}
.cols-5 div {width: calc(25% - 20px); float: left; margin: 25px 10px;}

.octicon:before {
    width: 10px;
    content: "\f0b6";
    float: left;
    display: block;
    position: relative;
    line-height: 0;
    margin: 0;
    padding: 0;
    height: 24Px;
}

.octicon-yellow {color: #0a8a15;}
.octicon {margin: 0 10px;}
.menu-octicon {font-size: 16pt; color: #0a8a15;}

.btn-link {
    transition: 0.2s;
    background-color: #0a8a15;
    border-color: #0a8a15;
}

.btn-link:hover {
    background-color: #cfbb07 !important;
    border-color: #cfbb07;
    color: white;
    text-decoration: none;
}

.btn-link.focus, .btn-link:focus {
    border-color: white;
    box-shadow: 0 0 0 0.2rem rgba(207, 187, 7,0.5) !important;
}

.zpravodaj .mainPic {float: left; width: 100%;}

.dark-grey {background-color: #f9f9f9;}
.dark-red {background-color: #f9f9f9;}
.green-background {background-color: #555;}

.green-background h2, .green-background div, .green-background p {color: white;}
.green-background h2 {float: left; text-align: center; width: 100%;}

.green-background div.td_body  div {float: left; width: 33.33%;}
.green-background div.td_body  {float: left; margin-bottom: 55px; padding-top: 15px;}


.shadow-basic {
position: relative; 
opacity: 0.3;
z-index: 5;
}

.w-33 {width: 33.33% !important;}

.pathBar {
    float: left;
    width: 100%;
    position: relative;
    padding: 5px 0;
    background-color: #fff;
    color: white;
    box-shadow: 0px 5px 5px 0px rgb(50 50 50 / 15%);
}

.koupalisteStatus {
    float: right;
}

.koupalisteStatus img {
    float: right;
    width: 100px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.pathBar a:link, .pathBar a:visited {
    color: #0a8a15;
    font-size: 12pt;
    padding: 5px 10px;
    float: left;
    transition: 0.1s;
}

.koupalisteStatus span {
    float: right;
    color: #dd0000;
    font-size: 12pt;
    margin-right: 15px;padding-top: 2px;
}

.blockLeft .smallSearchForm {float: right; width: auto !important;}
.blockLeft2,.blockLeft122, .blockLeft621 {width: 100% !important}
.blockRight2, .blockRight122, .blockRight621 {display: none;}

h3, h3 a {float: left; width: 100%; text-align: left; color: #0a8a15 !important; font-weight: bold; font-size: 26pt !important;}
.blockRight h3 {font-size: 18pt;}
.blockLeft {float: left; width: 65%; min-height: 500px;}
.blockRight {float: left; width: 35%; padding-left: 55px; padding-top: 28px;}
.halfSplit {width: calc(50%); background-color: #fff; float: left; }
.aktualityBox {width: 100%; margin-bottom: 55px;} 
.aktualityBox .eventBox {float: left; width: calc(25% - 20px); margin: 10px; background: #fff; border: 1px solid #eee; transition: 200ms; position: relative;}
.aktualityBox .eventBox .bodyContainer {padding: 15px;  float: left; width: 100%;  padding-bottom: 55px;}
.aktualityBox .eventBox:hover {background: #f9f9f9; border: 1px solid #eee;}
.aktualityBox .eventBox .header {padding: 10px 0; width: 100%; float: left; font-weight: bold; font-size: 12pt;}
.aktualityBox .eventBox .body {width: 100%; float: left; font-size: 12pt;}
.dateContainer {position: absolute; top: 0; left: 0; width: 90px; background-color: #0a8a15; padding: 15px;}
.date {font-size: 28pt; font-weight: bold; color: #f9f9f9; float: left; width: 100%;  line-height: 100%;  text-align: center;}
.date span {font-size: 9pt; text-transform: uppercase; font-weight: normal; color: #fff; float: left; width: 100%;  line-height: 150%;  text-align: center;}
.aktualityBox .eventBox .moreButton {color: #0a8a15 ;}
.aktualityBox .eventBox .image {width: 100%; float: left;}
.aktualityBox .eventBox .detail {position: absolute; bottom: 10px; left: 10px;}
.aktualityBox .moreButton {width: 100%; float: left; padding-left: 5px;}

.calendarEvent {float: left; width: calc(33.33% - 20px); margin: 10px; background: #eee; padding: 0px;  border: 0px solid #eee;  transition: 200ms; position: relative; min-height: 120px;}
.calendarEvent.oneColumn {width: calc(100% - 20px);}
.calendarEvent .bodyContainer {float: left; width: 95%;}
.calendarEvent .header {font-size: 14pt; font-weight: bold; color: #000; float: left; width: 100%; line-height: 150%; }
.calendarEvent:hover {background: #f9f9f9; border: 1px solid #eee;}



.imageContainer {float: left; width: 100%; overflow: hidden; position: relative;}
.imageContainer:after {
    content: "";
    display: block;
    padding-bottom: 60%;
}

.imageContainer img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: 200ms;}
.eventBox:hover .imageContainer img {transform: translate(-50%, -50%) scale(1.1);}

.btn {color: white !important; margin-right: 5px; margin-bottom: 5px; border-radius: 0 !important;}
.middleLiner {float: left !important; width: 100%;}
.eventBox_udalosti {width: calc(50%) !important; margin: 20px 0 !important; }
.eventBox_udalosti .newsImage2 {display: none;}


a.newsBox2 {float: left; width: calc(100% + 20px); padding: 10px; margin: 0 -10px; border-bottom: 1px solid #eee;}
a.newsBox2:hover {background-color: #ffffff;}
.newsImage2 {float: left; width: 20%; border: 1px solid #ddd;}
.newsHeader2 {float: left; width: 80%; padding-left: 20px; color: #000000; font-weight: bold;}
.newsDate2 {float: left; width: 80%; padding-left: 20px;}

.td-map-box {position: relative;}
.td-map-cover {position: absolute; z-index: 500; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; opacity: 0.2; cursor: pointer;}

#newsletter_form {float: left; width: 100%; max-width: 700px;}

.td-social-hub {float: left; width: 100%;}
h2.social {margin: 0; line-height: 250%; margin-bottom: 5px; color: #aaa;}

footer {float: left; width: 100%; background-color: #222222;}

footer div.leftBottom {float: left; width: 200px}
footer div.leftBottom img {float: left; }
footer div.leftBottom div {float: left; text-align: left; font-size: 8pt; margin-left: 15px; }

footer div.rightBottom {float: right; width: 200px}
footer div.rightBottom img {float: right; }
footer div.rightBottom div {float: right; text-align: right; font-size: 8pt; margin-right: 15px; }

footer img.bottomIMG {height: 60px;}
footer a img.bottomIMG {opacity: 0.8;}
footer a:hover img.bottomIMG {opacity: 1;}

footer .centeredReal {padding: 40px 10px; text-align: center; color: #fff; font-size: 10pt;}
footer .centeredReal a:link,footer .centered a:visited {color: #96d29b; font-size: 10pt; }

.td-social-hub .stretched-link {background: rgba(0,0,0,0.5); opacity: 0;}
.td-social-hub .stretched-link:hover {opacity: 1;}

.td_searchfield { padding-top: 150px; width: 100%; height: 100%; display: none; background-color: rgba(255,255,255,0.90); position: fixed; top: 0; left: 0; z-index: 0000; top: 0; right: 0; bottom: 0; left: 0;}
.td_searchfield_close {position: fixed; top: 15px; right: 35px; z-index: 10; font-size: 30pt; cursor:pointer; opacity: 0.5;}
.td_searchfield_close:hover {opacity: 1;}
.td_searchfield span {font-size: 14pt; color: #555;}
a.td_search_results {position: relative; float: left; border: 1px solid #eee; margin-bottom: 10px; padding: 25px; width: 100%; z-index: 5;}
a.td_search_results:hover {background-color: #f9f9f9; text-decoration: none;}
.td_search_results_page  {positioN: absolute; top: 15px; right: 15px; background-color: #0a8a15; width: 35px; text-align: center; color: white; }
.zapnoutGrafiku {display: none;}
.box-8 {padding: 5px 8px;}

.td_whitefield {display: none;}

ul.slick-dots { margin: 0; margin-bottom: 25px;}

.table-wrapper {float: left; width: 100%; overflow: hidden; overflow-x:auto;}

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

}
@media only screen and (max-width: 1024px) {
    body {overflow-x: hidden;}
    ul.navbar-nav {width: 100%; background: #fff; margin-top: 25px;} 
    .line {margin-bottom: 25px;}
    div.addressBox2, .logo2 {padding: 0 !important;; margin: 0 !important;; width: 33.33% !important;}
    a.logo {
        padding: 0;
        margin: 0;
        background-color: rgba(255,255,255,0);
        position: relative;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }

    a.logo img {background: none; width: 180px;}
    .top-bar .box:nth-of-type(4) {display: none;}
    .top-bar .box:nth-of-type(5) {display: none;}
    .navbar-toggler {margin-right: 15px;}
    a.uredni-deska {width: calc(50% - 10px) !important;}
    a.margin-top-bottom-5:hover {width: calc(50% - 10px) !important;}
    .aktualityBox .eventBox {width: calc(50% - 20px); }
    .calendarEvent {width: calc(100% - 20px);}
    a.img-button { height: auto;  }
    a.img-button:after { content: ""; display: block; padding-bottom: 30%;  }
    a.img-button span {font-size: 12pt; }
    .cols-5 div {width: calc(50% - 20px);    }
    .slick-prev { left: 40px;  }
    .slick-next {right: -10px; }
    .mobile {display: block;}
    .svatek {display: none;}
    .blockLeft {width: 100%;}
    .blockRight {display: none;}
    .box-8 {padding: 5px 0px;}
    .menu-arrow-down { margin-top: 6px;    }
    .table-wrapper {float: left; width: 100%; overflow: hidden; overflow-x:auto;}
    .table-wrapper table {min-width: 1024px;}
    .table-wrapper table tr:nth-of-type(even) td {background-color: #f3f3f3;}
    .container .container {padding: 15px 0;}
}

@media only screen 
and (min-device-width : 200px) 
and (max-device-width : 700px) 
and (orientation : portrait) {  
    a.uredni-deska {width: calc(100% - 10px) !important;}
    .top-bar {display: none;}
    img.logo {width: 100px; margin-left: 15px;}
    div.addressBox2 {padding: 0 !important;; margin: 25px 0 !important;; width: 100% !important;}
    .logo2 {width: 50% !important; margin-top: 55px !important; float: left;}
    a.uredni-deska {width: calc(100%) !important; margin: 5px 0 !important;}
    a.margin-top-bottom-5:hover {width: calc(100%) !important; margin: 5px 0;}
    .aktualityBox .eventBox {width: calc(100%) !important; margin: 5px 0; }
    .calendarEvent {width: calc(100%) !important; margin: 5px 0;}
    a.img-button { height: auto;  }
    a.img-button:after { content: ""; display: block; padding-bottom: 30%;  }
    a.img-button span {font-size: 12pt; }
    .cols-5 div {width: calc(100%); margin: 10px 0;    }
    .mobile-w-100 {width: 100%;}
    .mobile-flex-wrap {flex-wrap: wrap;}
    h3, h3 a { font-size: 14pt !important;   }

    .td_slick .slickSlider {width: 100%; height: auto; position: relative; overflow: hidden;}
    .td_slick .slickSlider:after { content: ""; display: block; padding-bottom: 50%;  }
    .td_slick .slickSlider img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 100%; width: auto; }
    a.img-button { width: 100% !important; margin: 5px 0;  }
    form.searchForm {width: 100%; margin: 0 !important; margin-top: 15px !important; ; margin-bottom: 5px !important; ;}
    div.top-strip {padding: 0; padding-top: 15px;}
    a.logo {width: 100%; display: flex; justify-content: center;}
    table.table-contacts tbody td {width: 100% !important; }
    div.blockLeft .smallSearchForm {float: left; width: 100% !important; margin-top: 0;}
    div.blockLeft .smallSearchForm input#searchButton {float: left; width: 100% !important; margin-top: 0; max-width: 100%;}

    table.table_odpady tbody td {
        width: 100%; float: left;
    }

    table.table-zapisy tr {
        float: left; width: 33.33% !important; height: auto !important;
    }

    table.table_odpady tbody {
        display: flex; justify-content: center; align-items: center; width: 100%; margin-top: 25px;
    }

}