.maincontent .page-header h2body {
  background: #fff;
  margin: 0px;
  padding: 0px ;
  font-family: Arial, sans-serif;
  font-size: 12px;
  color: #999;
}

a {
    color: #72cae4;
    text-decoration: underline;
}

a:hover {
  color: #005580;
}

.container {
  max-width: 945px;
  margin-top: 50px;
}

.header .logo {
    float: left;
}

.header .topright {
    float: right;
}

.header .topright .topsearch {
    float: right;
    margin-left: 50px;
}

.header .topright .topsearch .btn-primary {
    float: left;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0px;
    padding-top: 5px;
}

.header .topright .topsearch .btn-primary .icon-search {
    background: url("../images/search.png") top left no-repeat;
}

.header .topright .topsearch .search-query{
    float: right;
    border: none;
    box-shadow: none;
    color: #999;
}

.header .topright .topicons {
    float: left;
    margin-top: 2px;
}

/* Joomla 6's mod_languages wraps output in <div class="mod-languages">
   instead of the old <div class="language">. */
.header .topright .language,
.header .topright .mod-languages {
    float: right;
    margin-top: 2px;
}

.header .topright .language a,
.header .topright .mod-languages a {
    color: #999;
}

.header .topright .language .lang-active a,
.header .topright .mod-languages .lang-active a {
    color: #333;
}

.header .topright .language ul li + li,
.header .topright .mod-languages ul li + li {
    border-left: 1px #999 solid;
    margin-left: 0px;
    padding-left: 5px;
}

.header .topright .mod-languages ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.header .topright .mod-languages ul li {
    display: inline-block;
}

.mainmenu {
    clear: both;
    margin-top: 20px;
    padding-left: 225px;
    border-bottom: 1px #999 solid;
    height: 70px;
    font-size: 12px;
}

/* Joomla 6's mod_menu renders <ul class="mod-menu mod-list nav ...">
   instead of the old <ul class="menu">. Bootstrap 2's own .nav rules
   (loaded before this file) would otherwise add unwanted list-style/margin. */
.mainmenu ul.mod-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mainmenu ul.mod-menu > li {
    float: left;
    width: 160px;
    border-top: 1px #999 solid;
    height: 25px;
    margin-left: 20px;
}

.mainmenu ul.mod-menu > li:first-child {
    display: none;
}

.mainmenu ul li a{
    color: #999;
    text-decoration: none;
}

.mainmenu ul li a:hover,  .mainmenu ul li.active > a{
    background: none;
    color: #72cae4;
}

/* Hide the JS toggle button Joomla 6 now injects before submenus;
   this template shows submenus on hover (see js/main.js) instead. */
.mainmenu .mod-menu__toggle-sub {
    display: none;
}

.mainmenu .mod-menu > li > .mod-menu__sub {
    display: none;
    background: #fff;
    position: absolute;
    width: 160px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mainmenu .mod-menu > li.deeper {
    background: url("../images/arrowdown.png") 140px 10px no-repeat;
}

.mainmenu .mod-menu > li.deeper > ul > li > a {
    background: url("../images/small-arrow.png") right 4px no-repeat;
    padding-right: 10px;
    padding-left: 5px;
}
.mainmenu .mod-menu > li.deeper > ul > li > a:hover {
    color: #72cae4;
}


.mainmenu .mod-menu > li.deeper ul ul {
    padding-left: 10px;
}

.mainmenu .mod-menu > li.deeper ul ul li {
    display: inline-block;
    padding-right: 5px;
}

.maincontent .page-header {
    border: none;
    margin: 0px;
    padding: 0px;
}

.maincontent .page-header h1, .maincontent .categories-list h1, .maincontent h2 span {
    color: #333;
    font-size: 11px;
    text-transform: uppercase;
    margin: 0px;
    font-weight: bold;
}

.maincontent h2  {
    font-size: 24px;
    line-height: 30px;
    margin: 0px;
    font-weight: normal;
    margin-bottom: 10px;
}

.maincontent .contenthead {
    font-size: 24px;
    line-height: 30px;
    color: #333;
}

.maincontent .odkazy {
    border-top: 1px #999 solid;
    height: 130px;
}

.maincontent .imgspace {
    border-bottom: 1px #ccc solid;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.maincontent .items-leading > div + div {
    border-top: 1px #ccc solid;
}

.maincontent .odkazy .odkazy {
    border: none;
}

.maincontent .odkazy h3 {
    margin: 0px;
    color: #333;
    text-transform: uppercase;
    font-size: 11px;
}

.maincontent .odkazy  ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    margin-left: -15px;
}

.maincontent .odkazy  ul li {
    float: left;
    width: 225px;
    border-top: 1px #999 solid;
    height: 28px;
    margin-left: 15px;
    padding-top: 7px;
}

.maincontent .odkazy  ul li a {
    color: #999;
    background: url("../images/small-arrow.png") right 3px no-repeat;
    padding-right: 13px;
    text-transform: uppercase;
    line-height: 17px;
    text-shadow: 0px 0px 2px rgba(232, 232, 232, 1);
}

.maincontent .partneri {
    border-top: 1px #999 solid;
    clear: both;
}

.maincontent .partneri .partneri {
    border: none;
}

.maincontent .partneri h3 {
    margin: 0px;
    color: #333;
    text-transform: uppercase;
    font-size: 11px;
}

.maincontent .contentable {
    border-spacing: 15px;
    border-collapse:separate;
    margin-left: -15px;
    width: 973px;
}

.maincontent .contentable td {
    border-top: 1px #999 solid;

}

.maincontent .contentable h3 {
    font-size: 11px;
    font-weight: normal;
    text-transform: uppercase;
    line-height: 12px;
}

.maincontent .contentable h3 a {
    color: #999;
    background: url("../images/small-arrow.png") right 3px no-repeat;
    padding-right: 10px;
}

.maincontent .alba h3 {
    text-transform: none;
}

.maincontent .categories-list {
    margin-left: -16px;
}

.maincontent .categories-list h1 {
    padding-left: 16px;
}

.maincontent .categories-list > div {
    float: left;
    border-top: 1px #999 solid;
    margin-left: 16px;
    padding-top: 7px;
}

.maincontent .categories-list .category-desc {
    margin-top: 10px;
}

.maincontent  > div span a {
    color: #999;
    background: url("../images/small-arrow.png") right 3px no-repeat;
    padding-right: 10px;
    font-size: 11px;
    line-height: 12px;
    text-transform: uppercase;
}

.maincontent .intro_image {
    float: left;
}

.maincontent .intro_image img {
    width: 224px;
}

.maincontent .photo .items-leading > div {
    width: 225px;
    height: 182px;
    float: left;
    border-top: 1px #ccc solid;
    margin-right: 10px;
    margin-bottom: 10px;
}

.maincontent .photo .clearfix {
  display: none;
}

.maincontent .photo .items-leading h2 {
    color: #999;
    background: url("../images/small-arrow.png") right 3px no-repeat;
    padding-right: 10px;
    font-size: 11px;
    line-height: 12px;
    text-transform: uppercase;
    margin-top: 10px;
}

.maincontent .photo .introimage img {
  max-height: 150px;
}

.maincontent .photo .page-header a {
  color: #999;
  text-decoration: none;
}

.footer {
    border-top: 1px #999 solid;
    padding-top: 20px;
    color: #999;
}

.footer .footerback {
    float: right;
}

.footer .footerback p {
    cursor: pointer;
    background: url("../images/toparrow.png") left 8px no-repeat;
    padding-left: 15px;
}

.footer .footertext {
    float: left;
    width: 196px;
}

.footer .footericons {
    margin-left: 70px;
    float: left;
}

#nnt_comment_a1 {
  width: 186px;
}

/* ==========================================================================
   Responsive layout
   These rules sit at the end of the file on purpose: the desktop layout above
   is built on fixed pixel widths and floats, so the mobile overrides need to
   come last to win on equal specificity.
   ========================================================================== */

img,
video,
iframe {
    max-width: 100%;
}

img {
    height: auto;
}

/* --- Hamburger button: hidden on desktop, shown at <= 767px ------------- */

.menu-toggle {
    display: none;
    float: left;
    align-items: center;
    margin: 0;
    padding: 8px 0;
    border: 0;
    background: none;
    color: #999;
    font-size: 12px;
    text-transform: uppercase;
    cursor: pointer;
}

.menu-toggle__box {
    display: inline-block;
    width: 22px;
    margin-right: 8px;
}

.menu-toggle__bar {
    display: block;
    height: 2px;
    background: #999;
}

.menu-toggle__bar + .menu-toggle__bar {
    margin-top: 4px;
}

.menu-toggle:hover,
.menu-toggle[aria-expanded="true"] {
    color: #72cae4;
}

.menu-toggle:hover .menu-toggle__bar,
.menu-toggle[aria-expanded="true"] .menu-toggle__bar {
    background: #72cae4;
}

/* --- Narrow desktop / tablet -------------------------------------------- */

@media (max-width: 900px) {
    .container {
        margin-top: 25px;
    }

    /* The 225px inset only exists to clear the floated logo, and there is no
       room for it here. Height has to go too, or wrapped rows get clipped.
       Note: no overflow:hidden, it would cut off the absolute dropdowns. */
    .mainmenu {
        padding-left: 0;
        height: auto;
        padding-bottom: 10px;
    }

    .maincontent .contentable {
        width: 100%;
        margin-left: 0;
    }
}

/* --- Phone -------------------------------------------------------------- */

@media (max-width: 767px) {
    .container {
        margin-top: 20px;
    }

    /* Header: logo on its own centred row, the two topright modules share
       the row below it. */
    .header .logo,
    .header .topright,
    .header .topright .topsearch,
    .header .topright .topicons,
    .header .topright .language,
    .header .topright .mod-languages {
        float: none;
    }

    .header .logo {
        text-align: center;
    }

    .header .topright {
        margin-top: 10px;
        text-align: center;
    }

    /* Social icons and the language switcher sit side by side. */
    .header .topright .topicons,
    .header .topright .language,
    .header .topright .mod-languages {
        display: inline-block;
        vertical-align: middle;
        margin-right: 0;
    }

    .header .topright .topicons {
        margin-right: 15px;
    }

    /* mod_custom wraps the icons in a <p>, whose default bottom margin would
       push it off the language switcher's baseline. */
    .header .topright .topicons p {
        margin: 0;
    }

    .menu-toggle {
        display: inline-flex;
    }

    .mainmenu {
        margin-top: 15px;
        font-size: 14px;
    }

    .mainmenu__nav {
        display: none;
        clear: both;
    }

    .mainmenu__nav.is-open {
        display: block;
    }

    .mainmenu ul.mod-menu > li {
        float: none;
        width: auto;
        height: auto;
        margin-left: 0;
        padding: 10px 0;
        border-top: 0;
    }

    .mainmenu ul.mod-menu > li + li {
        border-top: 1px #ddd solid;
    }

    .mainmenu ul li a {
        display: inline-block;
        padding: 2px 0;
    }

    /* Hover dropdowns do not exist on touch. Instead we reveal the toggle
       button mod_menu already renders; Joomla's own menu.js puts .show-menu
       on the submenu when it is pressed. */
    .mainmenu .mod-menu__toggle-sub {
        display: inline-flex;
        margin-left: 8px;
    }

    .mainmenu .mod-menu > li.deeper {
        background: none;
    }

    .mainmenu .mod-menu > li > .mod-menu__sub {
        position: static;
        width: auto;
        padding: 5px 0 0 15px;
    }

    .mainmenu .mod-menu > li > .mod-menu__sub.show-menu {
        display: block;
    }

    .mainmenu .mod-menu > li.deeper > ul > li > a {
        background: none;
        padding-left: 0;
    }

    .mainmenu .mod-menu > li.deeper ul ul {
        padding-left: 15px;
    }

    .mainmenu .mod-menu > li.deeper ul ul li {
        display: block;
        padding-right: 0;
    }

    /* --- Content ------------------------------------------------------- */

    .maincontent .odkazy {
        height: auto;
    }

    .maincontent .odkazy ul {
        margin-left: 0;
    }

    .maincontent .odkazy ul li {
        float: none;
        width: auto;
        height: auto;
        margin-left: 0;
    }

    .maincontent .categories-list {
        margin-left: 0;
    }

    .maincontent .categories-list h1 {
        padding-left: 0;
    }

    .maincontent .categories-list > div {
        float: none;
        margin-left: 0;
    }

    .maincontent .intro_image {
        float: none;
    }

    .maincontent .intro_image img {
        width: auto;
    }

    /* Photo grid: two across on a phone. */
    .maincontent .photo .items-leading > div {
        box-sizing: border-box;
        width: 48%;
        height: auto;
        margin-right: 4%;
    }

    .maincontent .photo .items-leading > div:nth-child(2n) {
        margin-right: 0;
    }

    .maincontent .photo .introimage img {
        max-height: none;
    }

    /* Layout tables inside article content stack rather than overflow. */
    .maincontent .contentable,
    .maincontent .contentable tbody,
    .maincontent .contentable tr,
    .maincontent .contentable td {
        display: block;
        width: auto;
    }

    .maincontent .contentable {
        margin-left: 0;
        border-spacing: 0;
    }

    /* --- Footer -------------------------------------------------------- */

    .footer .footertext,
    .footer .footericons,
    .footer .footerback {
        float: none;
        width: auto;
        margin-left: 0;
    }

    #nnt_comment_a1 {
        width: auto;
    }
}

@media (max-width: 479px) {
    .maincontent .photo .items-leading > div {
        width: 100%;
        margin-right: 0;
    }
}

.visually-hidden {
    display: none;
}