@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Nunito:200,400,700&display=swap');
* {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;
    font-family: 'Nunito', "Calibri", "Tahoma", "Verdana", "Helvetica", sans-serif;
    font-weight: 400;
    letter-spacing: 0.02em;
}

body {
    background-color: rgb(33, 41, 41);
}

nav {
    font-size: 1.1em;
    background-color: white;
    padding: 2em 5em 3em 5em;
}

nav h1#nazev {
    font-size: 3.5em;
}

nav h1#podnazev {
    font-size: 2em;
}

@media (max-width:800px) {
    nav {
        padding: 2em 2em 3em 2em;
    }
    nav h1#nazev {
        font-size: 2em;
    }
    nav h1#podnazev {
        font-size: 1.5em;
    }
}

label, #hamburger {
    display: none;
}

nav ul {
    text-align: right;
    margin-bottom: 1em;
}

nav ul li {
    display: inline-block;
    padding: 0;
    padding: 1em 1.5em;
}

nav ul li a {
    padding: 1em 1.5em;
    margin: -1em -1.5em;
    color: black;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: border-bottom-color 2s;
    -webkit-transition: border-bottom-color 2s;
}

nav ul li a:hover {
    border-bottom: 2px solid black;
}

nav ul li#aktivni {
    color: black;
    text-decoration: none;
    border-bottom: 2px solid black;
}


/*menu-hamburger*/

@media screen and (max-width: 850px) {
    /* Show Hamburger */
    nav label {
        display: inline-block;
        font-style: normal;
        font-size: 1.5em;
        width: 100%;
        padding: 0.5em 0 0 0;
        cursor: pointer;
    }
    /* Break down menu items into vertical */
    nav ul li {
        display: block;
        text-align: center;
    }
    nav ul li a {
        display: block;
        padding: 1em 1.5em;
        color: black;
        text-decoration: none;
        border-bottom: 2px solid transparent;
        transition: border-bottom-color 2s;
        -webkit-transition: border-bottom-color 2s;
    }
    nav ul li a:hover {
        border-bottom: 2px solid black;
    }
    /* Toggle show/hide menu on checkbox click */
    nav ul {
        display: none;
    }
    nav input:checked~ul {
        display: block;
    }
}

section {
    /*color: white;*/
    background-color: rgb(214, 238, 236);
    transform: skew(0, -2deg);
    margin: calc(100vw*0.5*-0.03492077) 0 0 0;
    /*posunout nahoru o polovinu (protože se otáčí od středu) tan(stupňů natočení), */
}

section div.pozadi {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 5em 5em 8em 5em;
    height: 100%;
}

@media (max-width: 800px) {
    section div.pozadi {
        padding: 1.5em 2em 3em 2em;
    }
}

section div.pozadi.tmave {
    color: white;
    text-decoration: none;
}

section div.pozadi.tmave a {
    color: rgb(27, 216, 216);
    text-decoration: none;
}

section div.pozadi.tmave table a {
    color: white;
    text-decoration: none;
}

section div.pozadi.tmave a[href]:hover {
    text-decoration: none;
    border-bottom: 1px solid rgb(27, 216, 216);
}

section div.pozadi.svetle {
    color: black;
    text-decoration: none;
}

section div.pozadi.svetle a {
    color: rgb(17, 126, 126);
    text-decoration: none;
}

section div.pozadi.svetle table a {
    color: black;
    text-decoration: none;
}

section div.pozadi.svetle a[href]:hover {
    text-decoration: none;
    border-bottom: 1px solid rgb(33, 41, 41);
}

section>div.pozadi>* {
    transform: skew(0, 2deg);
}

section p {
    margin: 0.5em 0em 0.5em 0em;
}

@media (min-width: 800px) {
    section div.doleva {
        padding-right: 50%;
    }
    section div.doprava {
        padding-left: 50%;
    }
}

section div.pozadi h2 {
    font-size: 3em;
    padding: 0.5em 0 0.25em 0;
    column-span: all;
}

section div.pozadi h3 {
    font-size: 2em;
    padding: 0.75em 0 0.5em 0;
    column-span: all;
}

section div.pozadi h4 {
    font-size: 1.5em;
    padding: 0.75em 0 0.5em 0;
    column-span: all;
}

section div.pozadi h5 {
    font-size: 1.2em;
    padding: 0.75em 0 0.5em 0;
    column-span: all;
}

@media (max-width:800px) {
    section div.pozadi h2 {
        font-size: 2em;
    }
    section div.pozadi h3 {
        font-size: 1.75em;
    }
    section div.pozadi h4 {
        font-size: 1.5em;
    }
    section div.pozadi h5 {
        font-size: 1.2em;
    }
}

section div.pozadi div.pruhnahledu {
    margin: 2em -1em 0em -1em;
}

section div.pozadi div.pruhnahledu a {
    display: inline-block;
    padding: 1em;
    margin: 0.2em;
}

section div.pozadi div.pruhnahledu a img {
    display: block;
    width: 250px;
    height: 250px;
}

section div.pozadi div.pruhnahledu a[href]:hover {
    background-color: rgba(255, 255, 255, 0.25);
    border-bottom: 0;
}

section div.pozadi div.paseknahledu {
    margin: 2em -0.2em 0em -0.2em;
}

section div.pozadi div.paseknahledu a {
    display: inline-block;
    margin: 0.2em;
}

section div.pozadi div.paseknahledu a img {
    display: block;
    width: 130px;
    height: 130px;
}

section div.pozadi div.paseknahledu a[href]:hover {
    background-color: rgba(255, 255, 255, 0.25);
    border-bottom: 0;
}

section div.pozadi div.vystredit {
    text-align: center;
}

section div.pozadi div div.tretinka {
    width: calc(100%/3);
    min-width: 250px;
    max-width: 400px;
    display: inline-block;
    text-align: center;
    margin: 0 0 2em 0;
}

@media (max-width: 900px) {
    section div.pozadi div div.tretinka {
        width: calc(100%/2);
    }
}

@media (max-width: 660px) {
    section div.pozadi div div.tretinka {
        width: 100%;
    }
}

section div.pozadi div div.tretinka>a h3 {
    color: white;
    text-decoration: none;
    padding: 0.5em 0 0.5em 0;
    font-size: 1.5em;
    font-weight: 200;
}

section div.pozadi div div.tretinka ul {
    list-style-type: none;
}

section div.pozadi div div.tretinka ul li {
    margin-left: 0;
    padding-left: 0;
}

section div.pozadi div div.tretinka>a {
    background-repeat: no-repeat;
    background-size: inherit;
    background-position: center calc(50% - 1.5em);
    display: inline-block;
    width: 100%;
    padding: 1em 0;
}

section div.pozadi div div.tretinka.twin>a {
    background-image: url(../img/twin.svg);
}

section div.pozadi div div.tretinka.sita>a {
    background-image: url(../img/sita.svg);
}

section div.pozadi div div.tretinka.napln>a {
    background-image: url(../img/napln.svg);
}

section div.pozadi div div.tretinka>a img {
    opacity: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

section div.pozadi div div.tretinka.twin>a:hover {
    filter: invert(42%) sepia(17%) saturate(1882%) hue-rotate(131deg) brightness(90%) contrast(93%);
    border-bottom: 0;
}

section div.pozadi div div.tretinka.sita>a:hover {
    filter: invert(42%) sepia(17%) saturate(1882%) hue-rotate(131deg) brightness(90%) contrast(93%);
    border-bottom: 0;
}

section div.pozadi div div.tretinka.napln>a:hover {
    filter: invert(42%) sepia(17%) saturate(1882%) hue-rotate(131deg) brightness(90%) contrast(93%);
    border-bottom: 0;
}

section b, section strong {
    font-weight: 700;
}

section ul li, section ol li {
    margin-left: 1em;
    padding-left: 0.25em;
}

section ul ul li {
    margin-left: 4em;
}

div.obaltabulky {
    overflow: auto;
}

section table {
    width: 100%;
    border-collapse: collapse;
    border: 0px;
    vertical-align: top;
    text-align: center;
}

section table tr th, section table tr td {
    padding: 0.5em 0.5em;
}

section table tr:nth-child(even) td {
    background-color: rgba(27, 216, 216, 0.1);
}

section table tr td.popisek {
    text-align: left;
    padding-left: 1.25em;
}

section table tr th {
    font-size: 150%;
}

ul.archiv {
    text-align: right;
}

ul.archiv li {
    list-style-type: none;
}

div.boxHodnoceni {
    width: 100%;
    padding: 0;
}

div.hodnoceni {
    background-color: rgb(33, 41, 41);
    width: 30%;
    display: inline-block;
    padding: 1em;
    margin: 0 1em 1em 0;
    vertical-align: middle;
}

@media (max-width:660px) {
    div.hodnoceni {
        width: calc(100% - 2em);
    }
}

div.boxHodnoceni>div.hodnoceni>h4 {
    padding-top: 0;
}

dl dt, dl dd {
    display: inline-block;
    opacity: 50%;
}

p.hodnoceniFler {
    font-size: 75%;
    opacity: 50%;
    margin-top: 1.5em;
}

p.citace {
    font-style: italic;
}

p.citace::before {
    content: "„";
}

p.citace::after {
    content: "“";
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

iframe.mapa {
    border: 0;
    width: 800px;
    height: 600px;
}

/*filtrovani v galerii*/

div.svetle div.tagy .btn {
    outline: none;
    padding: 0.3em 0.75em;
    margin: 0.25em 0.5em 0.25em 0;
    background-color: inherit;
    border: 2px solid rgb(33, 41, 41);
    color: rgb(33, 41, 41);
    cursor: pointer;
    transition-duration: 0.75s;
    transition-property: border;
}

div.svetle div.tagy .btn:hover {
    background-color: inherit;
    border: 2px solid rgb(27, 216, 216);
}

div.svetle div.tagy .btn.active {
    background-color: rgba(27, 216, 216, 1.0);
    border: 2px solid rgb(27, 216, 216);
    color: rgb(33, 41, 41);
    transition-duration: 0.75s;
    transition-property: background-color, border;
}

div.svetle div.tagy .btn.active:hover {
    background-color: rgba(27, 216, 216, 0.3);
    border: 2px solid rgb(33, 41, 41);
    color: rgb(33, 41, 41);
}

div.tmave div.tagy .btn {
    outline: none;
    padding: 0.3em 0.75em;
    margin: 0.25em 0.5em 0.25em 0;
    background-color: inherit;
    border: 2px solid rgb(214, 238, 236);
    color: rgb(214, 238, 236);
    cursor: pointer;
    transition-duration: 0.75s;
    transition-property: background-color, border;
}

div.tmave div.tagy .btn:hover {
    background-color: inherit;
    border: 2px solid rgb(27, 216, 216);
    color: rgb(214, 238, 236);
}

div.tmave div.tagy .btn.active {
    background-color: rgb(27, 216, 216);
    border: 2px solid rgba(27, 216, 216, 1.0);
    color: rgb(33, 41, 41);
    transition-duration: 0.75s;
    transition-property: background-color, border, color;
}

div.tmave div.tagy .btn.active:hover {
    background-color: rgba(27, 216, 216, 0.3);
    border: 2px solid rgb(214, 238, 236);
    color: rgb(214, 238, 236);
}

section div.pozadi div.pruhnahledu>a.odfiltruj {
    display: none;
}


/*konec filtrovani v galerii*/

footer {
    color: white;
    background-color: rgb(33, 41, 41);
    min-height: 3em;
    overflow: hidden;
    transform: skew(0, -2deg);
    margin: calc(100vw*0.5*-0.03492077) 0 0 0;
    /*posunout nahoru o polovinu (protože se otáčí od středu) tan(stupňů natočení), */
    padding: 3em 0 0 0;
}

footer:first-child {
    margin: 3em 0em 0em 0em;
}

footer p, footer h2, footer ul {
    margin: 1.5em 5em 0em 5em;
    transform: skew(0, 2deg);
}

footer ul li {
    margin: 0.5em 0 0.5em 0;
    list-style-type: none;
}

footer ul li img.ikona {
    height: 1em;
    margin: 0 0.5em 0 0;
    vertical-align: sub;
}

footer a {
    color: white;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: border-bottom-color 2s;
    -webkit-transition: border-bottom-color 2s;
    /*padding: 1em 0em;*/
}

footer a:hover {
    border-bottom: 2px solid white;
}

footer img.logo {
    filter: invert(100%);
    opacity: 0.2;
    float: right;
    width: 10%;
    min-width: 100px;
    margin: -4em 5em 0em 3em;
}

@media (max-width:800px) {
    footer {
        padding: 1.5em 0 0 0;
    }
    footer p, footer h2, footer ul {
        margin: 1.5em 2em 0em 2em;
    }
    footer img.logo {
        margin: -4em 2em 1em 2em;
    }
}