html {
    background-color: #dcddde;
    color: #023e88;
}
body {
    margin: 0;
    font-family: "Montserrat", sans-serif;
}
#page {
    width: 100%;
    max-width: 1200px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
a {
    color: #023e88;
}
img.icon {
    height: 18px;
}
table {
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.clearBoth {
    clear: both;
}
.hidden {
    display: none;
}
.komentar {
    font-style: italic;
}

#header {
    height: 215px;
    background-image: url("/resources/1200/header/top.png");
    background-repeat: no-repeat;
}
#header p.title {
    font-size: 2.5em;
    text-align: right;
    padding-top: 3em;
    margin: 0;
}

#menu ul {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: flex-end;
    display: -ms-flexbox;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: row;
    -ms-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    list-style: none;
    padding: 0;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    list-style: none;
    margin: 0;
    box-sizing: border-box;
}
#menu ul li {
    margin: 0;
    padding: 12px;
    -ms-flex-item-align: center;
    align-self: center;
    position: relative;
    width: 16.66%;
    height: 48px;
    text-align: center;
    background-color: #134ca3;
    border-image: url("/resources/1200/menu/menu-border.png");
}
#menu ul li.first {
    border-left: unset;
}
#menu ul li.last {
    border-right: unset;
}
#menu ul li:hover {
    background-color: #679dd3
}
#menu ul li a {
    color: white;
    text-decoration: none;
    font-size: 1.3em;
}
#menu ul li.active {
    background-color: #8e97c3;
}
#menu ul li #home-icon {
    background-image: url("/resources/1200/menu/home.png");
    width: 41px;
    height: 30px;
    margin: -4px auto;
}
#menu ul li.active #home-icon {
    background-image: url("/resources/1200/menu/home-active.png");
}

#content {
    background-color: white;
    padding-top: 2em;
}

#content #left-bar {
    float: left;
    width: 294px;
    margin: 0;
    padding: 0 24px 24px;
}
#content #left-bar #left-frame {
    background-image: url("/resources/1200/leftbar/frame.png");
    padding: 24px;
}
#content #left-bar #logo {
    background-image: url("/resources/1200/leftbar/logo-zus.png");
    width: 198px;
    height: 164px;
    margin: 24px;
}
#content #left-bar #left-frame #logo {
    margin: 0;
}

#content #left-bar #left-frame ul {
    padding-left: 0;
    margin: 0;
}
#content #left-bar #left-frame ul li {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: flex-end;
    display: -ms-flexbox;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: row;
    -ms-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    list-style: none;
    padding: 0;
    text-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    list-style: none;
    margin: 0;
    box-sizing: border-box;
    background-color: white;
    margin: 0.5em 0;
    padding: 0.5em;
    font-size: 1.5em;
}
#content #left-bar #left-frame ul li.active {
    font-weight: bold;
}
#content #left-bar #left-frame ul li.first {
    margin-top: 0;
}
#content #left-bar #left-frame ul li.last {
    margin-bottom: 0;
}
#content #left-bar #left-frame ul li a {
    color: #134ca3;
    text-decoration: none;
}

#content #content-inner.full-width {
    padding-left: 2.3%;
}
#content #content-inner.with-left-bar {
    padding-left: 294px;
}

#content div.update {
    padding-top: 1em;
    padding-bottom: 1em;
    border-left: white 1px solid;
}
#content div.update h2 {
    margin-top: 0;
    margin-bottom: 0;
}
#content div.update span.timestamp {
    font-size: 0.8em;
    font-style: oblique;
}

#content-inner {
    padding-right: 2.3%;
}
#content-inner h1 {
    margin-top: 0;
}
#content-inner p {
    text-align: justify;
}
#content-inner a.sdfootnoteanc {
    text-decoration: none;
    vertical-align: super;
    font-size: 0.8em;
    margin-left: 0.5em;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
#content-inner div.decoration {
    float: right;
    background-size: contain;
    margin-left: 2em;
    margin-bottom: 2em;
    animation: fadeIn 1s;
}
#content-inner div.decoration.delfin {
    width: 392px;
    height: 236px;
    background-image:url('/resources/1200/content/delfin.png');
}
#content-inner div.decoration.figurky {
    width: 392px;
    height: 350px;
    background-image:url('/resources/1200/content/figurky.png');
}
#content-inner div.decoration.kocka {
    width: 392px;
    height: 666px;
    background-image:url('/resources/1200/content/kocka.png');
}
#content-inner div.decoration.lenochod {
    width: 392px;
    height: 196px;
    background-image:url('/resources/1200/content/lenochod.png');
    margin: 4em 8em 2em 2em;
}
#content-inner div.decoration.lyra {
    width: 392px;
    height: 665px;
    background-image:url('/resources/1200/content/lyra.png');
}
#content-inner div.decoration.motyl {
    width: 392px;
    height: 238px;
    background-image:url('/resources/1200/content/motyl.png');
}
#content-inner div.decoration.oblicej {
    width: 274px;
    height: 421px;
    background-image:url('/resources/1200/content/oblicej.png');
}
#content-inner div.decoration.opona {
    width: 392px;
    height: 269px;
    background-image:url('/resources/1200/content/opona.png');
}
#content-inner div.decoration.pes {
    width: 28em;
    height: 25.1em;
    background-image:url('/resources/1200/content/pes.png');
}
#content-inner div.decoration.prijimacky {
    width: 405px;
    height: 573px;
    background-image:url('/resources/3200/content/prijimacky.png');
}
#content-inner div.decoration.ryby {
    width: 392px;
    height: 555px;
    background-image:url('/resources/1200/content/ryby.png');
}
/*
#content-inner div.decoration.skola {
    width: 392px;
    height: 588px;
    background-image:url('/resources/1200/content/skola.jpg');
}
#content-inner div.decoration.skola {
    width: 392px;
    height: 376px;
    background-image:url('/resources/3200/content/skola-dots.png');
}
*/
#content-inner div.decoration.skola {
    width: 394px;
    height: 363px;
    background-image:url('/resources/1200/content/skola-modra.png');
}
#content-inner div.decoration.sloni {
    width: 392px;
    height: 263px;
    background-image:url('/resources/1200/content/sloni.png');
}
#content-inner div.decoration.snek {
    width: 392px;
    height: 242px;
    background-image:url('/resources/1200/content/snek.png');
}
#content-inner div.decoration.vaza {
    width: 196px;
    height: 367px;
    background-image:url('/resources/1200/content/vaza.png');
}

#content #content-inner div.card {
    width: 572px;
    min-height: 155px;
    margin: 2em 0;
    float: left;
    padding: 0 0 0 42px;
}
#content #content-inner div.card div.photo {
    display: block;
    float: left;
    position: relative;
    z-index: 1;
}
#content #content-inner div.card div.photo,
#content #content-inner div.card div.photo img {
    width: 100px;
    height: 150px;
}
#content #content-inner div.card div.card_frame {
    display: block;
    float: left;
    background-image: url("/resources/1200/leftbar/frame.png");
    padding: 24px 24px 24px 80px;
    width: 380px;
    /*min-height: 140px;*/
    position: relative;
    top: 15px;
    left: -80px;
}
#content #content-inner div.card div.card_frame div.card_content {
    background-color: white;
    padding: 1em;
    min-height: 92px;
}
#content #content-inner div.card div.card_frame div.card_content p.title {
    font-style: oblique;
}
#content #content-inner div.card div.card_frame div.card_content p.card_details {
    text-align: left;
}
#content #content-inner div.card div.card_frame div.card_content h4,
#content #content-inner div.card div.card_frame div.card_content p {
    margin: 0.1em 0;
}

#content.obcasnik #content-inner div.pic-right {
    float: right;
    margin: 0 0 1em 2em;
}
#content.obcasnik #content-inner div.pic-left {
    float: left;
    margin: 0 2em 1em 0;
}
#content.obcasnik #content-inner div.pic-15 {
    width: 15%;
}
#content.obcasnik #content-inner div.pic-20 {
    width: 20%;
}
#content.obcasnik #content-inner div.pic-33 {
    width: 33%;
}
#content.obcasnik #content-inner div.pic-50 {
    width: 50%;
}
#content.obcasnik #content-inner div.pic-right img, #content.obcasnik #content-inner div.pic-left img {
    width: 100%;
    margin: 0;
}
#content.obcasnik #content-inner div.pic-right p.comment, #content.obcasnik #content-inner div.pic-left p.comment {
    text-align: center;
    font-size: 0.8em;
    font-style: italic;
    margin-bottom: 0;
}

#content.udalosti #content-inner div.event-month div.event-list div.event {
    margin-bottom: 0.2em;
}
#content.udalosti #content-inner div.event-month div.event-list div.event-date {
    float: left;
    width: 6em;
    text-align: right;
    margin-right: 2em;
}
#content.udalosti #content-inner div.event-month div.event-list div.event-title {
    display: table-cell;
}

#content.udalosti #content-inner div.event-with-gallery {
    float: left;
    width: 40%;
    padding-right: 2em;
    /*max-width: 480px;*/
}
#content.udalosti #content-inner p.event-date {
    font-style: oblique;
}
#content.udalosti #content-inner div.event-poster {
    text-align: center;
    padding-top: 2em;
}
#content.udalosti #content-inner div.event-poster img {
    width: 40%;
}
#content.udalosti #content-inner div.event-with-gallery div.event-poster img {
    width: 100%;
}
#content.udalosti #content-inner div.event-gallery {
    width: 60%;
    float: right;
    padding-bottom: 2em;
}
#content.udalosti #content-inner div.event-gallery a {
    float: left;
    overflow: hidden;
    height: 200px;
    max-width: 33.33%;
}
#content.udalosti #content-inner div.event-gallery a img {
    width: 228px;
    height: 200px;
    display: block;
    object-fit: cover;
    transition: transform .35s ease;
}


#content.schedules #content-inner div.schedule {
    float: left;
    margin: 2em;
}
#content.schedules #content-inner div.schedule th {
    background-color: lightblue;
}

#right-menu {
    float: right;
    width: 260px;
    background-image: url("./img/background/right-menu.png");
    margin: 2em 0em 1em 1em;
}
#right-menu ul {
    padding-left: 0;
}
#right-menu ul li {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: flex-end;
    display: -ms-flexbox;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: row;
    -ms-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    list-style: none;
    padding: 0;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    list-style: none;
    margin: 0;
    box-sizing: border-box;
    background-color: white;
    margin: 0.5em 1.5em;
    padding: 0.5em;
}
#right-menu ul li a {
    color: #134ca3;
    text-decoration: none;
    font-size: 1.7em;
}

#footer {
    background-repeat: repeat-x;
    height: 122px;
    margin-bottom: 5em;
}
#footer.home {
    background-image: url("/resources/1200/footer/pruh-home.jpg");
}
#footer.kontakty {
    background-image: url("/resources/1200/footer/pruh-kontakty.jpg");
}
#footer.obory {
    background-image: url("/resources/1200/footer/pruh-obory.jpg");
}
#footer.obcasnik {
    background-image: url("/resources/1200/footer/pruh-obcasnik.jpg");
}
#footer.skola {
    background-image: url("/resources/1200/footer/pruh-skola.jpg");
}
#footer.udalosti {
    background-image: url("/resources/1200/footer/pruh-udalosti.jpg");
}
#footer div {
    margin-top: 92px;
    font-size: 21px;
}
#footer div a {
    color: #023e88;
}
#footer div.email {
    float: left;
    width: 33%;
    text-align: right;
}
#footer div.address {
    float: left;
    width: 33%;
    text-align: center;
}
#footer div.phone {
    float: right;
    width: 33%;
    text-align: left;
}