html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

hr.clear {clear: both; height:0; line-height: 0; font-size: 1px; opacity: 0.0; }
.hidden {display: none;}

html, body, main, table  {font-size:19px; line-height: 1.8; font-family:'Lora'; color:#555;}
a {color:#C00; text-decoration: none;}
a:hover {color:#A00; text-decoration: none; border-bottom: #C00 1px solid;}
strong {font-weight: bold; color: #000;}
a strong {color: #C00;}
a strong:hover {color: #A00;}
/* dříve byly externí odkazy zelenou barvou */
a.a-external {}
a.a-external:hover {}
a.a-external:after {content: " ➚";}

main h1, main h2, main h3, main h4, main h5, main h6 {font-family:'Open Sans', sans-serif; line-height: 1.5; text-shadow: 2px 2px 2px #eee;}
main h1 {font-size:28px; font-weight: bold; color: #000;}
main h2 {font-size:25px; font-weight: bold; color: #000;}
main h3 {font-size:23px; font-weight: bold; color: #555;}

main h1, main h2, main h3  {padding-bottom: 15px; padding-top: 30px;}
main h1:first-of-type {padding-top: 0;}
main h1:first-of-type em {font-weight: normal; color: #888}
main h1:first-of-type em a {font-weight: normal; color: #888}
main p, main ul, main ol, main table {margin-bottom: 30px;}
main .fa-li {color: #000;}

section     { margin:0 0 0 calc(10% + 60px); max-width: 670px; clear: both;}
section.max { margin:0 0 0 calc(10% + 60px); max-width: 80%;}
section.max.overflow {display:grid; grid-template-columns: 670px auto;}
section.mt30 {margin-top:30px;}

header {margin:20px 0 40px 0;}
header {font-family:'Open Sans', sans-serif; text-shadow: 2px 2px 2px #eee;}
header section {grid-template-columns: 0fr 10fr 4fr; display: grid; }
header section>a:hover {border:0;}
header section img { margin-left:-90px; border:#fff 2px solid;  margin-top: 10px; width:70px; border-radius: 200px;}
header section img:hover { border:#ddd 2px solid; }
header section nav { background: #fff; padding-top:12px; }
header section nav li {display: inline-block; margin-right: 15px; position: relative; font-weight: bold; font-size:22px;}
header section nav li a.active, header section div a.active {color: #000; border-bottom: #ddd 2px solid;}
header section nav h1 {font-size:15px; margin-bottom:3px;}
header section div { padding: 12px 10px 0px 0; text-align: right;}
header section div li { display: inline-block; font-size:14px; margin-left: 5px;}

header section nav .submenu {
    list-style: none;
    padding: 10px 10px;
    margin: 0;
    position: absolute;
    top: 100%;
    left: 0;
    opacity: 0;
    transform: translateY(-10px);
    visibility: hidden;
    transition: opacity 0.4s ease, transform 0.4s ease;
    background-color: #fff;
    z-index: 999;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    min-width: 350px;
}
header section nav .submenu > li {
    display: block;
    font-size: 19px;
    text-shadow: none;
}
header section nav ul > li:hover .submenu {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

main { clear: both;}
main a {border-bottom: #EAA 1px solid;}
main img {max-width: 100%;}

main ul.super { font-size : 21px; }
main ul.super li { margin-left:27px; padding-left: 6px; }
main ul.super li a { font-weight: bold; }
main ul.super span { color: #000; }

main section.contacting {padding: 50px 0; display:grid; grid-template-columns: 130px auto;}
main section.contacting img {width:100px; border-radius:100px; margin-top: 30px; }
main section.contacting h3 {font-size:30px; font-weight: bold; display: inline-block; }
main section.contacting ol {font-size:26px; font-weight: bold; font-family: 'Open Sans';}

main .button {border:0; background: #C00; font-family: 'Open Sans'; font-weight: bold; color: #fff; padding: 10px 12px; border-radius: 3px; text-decoration: none;display: inline-block; text-transform: uppercase; box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); }
main .button:hover {background: #A00;}

main .price {margin: -15px 0 30px 50px; font-size:17px;}
main .price bdi {font-weight: bold; font-family: 'Open Sans', serif; font-size:22px; color: #000;}
main .price a.button { margin-left: 30px; margin-top: 10px;  }
main .price small {display:block; margin-top: -5px; }

main p.opener {font-size:16px; cursor: pointer;}
main p.opener.li {margin-left:50px; margin-top: -20px; }

main .subnav {font-family: 'Open Sans', sans-serif; margin-bottom: 40px; font-size:16px;}
main .subnav ul li {display:inline-block; margin-right: 20px;}
main .subnav ul li a.active {color:#000; border-bottom:#ddd 2px solid;}
main .subnav ul li a i {font-size:14px; margin-right: 3px;}
main .subnav small { font-size:14px;}
main .subnav small b { font-weight: bold;}

main .deprecated-tu {font-size:14px; font-family: "Open Sans", sans-serif; color:#fff; padding: 20px 25px 2px 25px; background: #C00; margin-bottom: 30px; }
main .deprecated-tu h3 { padding-top: 10px; color: #fff; text-shadow: none; }
main .deprecated-tu p { padding-bottom: 0px; }

main form { margin-bottom: 30px; font-size: 18px; font-family: 'Open Sans', sans-serif; }
main form div.field {padding:0; position: relative; margin-bottom:20px;}
main form div.field > label+span {font-size:15px; display: block; color: #555; margin-top: -5px; margin-bottom: 5px;}
main form div.checkbox label {font-weight: normal;}
main form fieldset { background: #f5f5f5; padding:20px; border-radius: 10px; }
main form input, main form select, main form textarea, main form label {font-size: 17px; font-family: 'Open Sans'; border-radius: 3px;}
main form label {font-weight: bold; color:#000}
main form label i {color: #c00; font-weight: normal;}
main form input[type=text],main form input[type=number],
main form input[type=date], main form input[type=password],
main form input[type=datetime-local],
main form input[type=email],
select, textarea {
    padding: 10px 10px 7px 10px;
    background: #fff;
    width: 100%;
    box-sizing: border-box;
    border: 0;
    border-bottom: 3px solid #fff;
}
main form input[type=text]:focus, main form input[type=password]:focus, select:focus, textarea:focus {border:0; border-bottom:3px solid #ccc; -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow: none; outline: none;}
main form .button {background: #C00; border:0; color:#fff; font-weight: bold; padding:10px 15px; cursor: pointer;}
main form .button:hover {background: #A00;}
main form .button:disabled {background: #f5f5f5; color:#666; cursor: not-allowed; }
main form .layout-33 { display: grid; column-gap: 3em; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);}

main form legend { margin-left:-20px; line-height: 1.3;  border-radius: 10px;
    font-family: 'Courier New', serif; padding:15px 20px 10px 20px; background: #f5f5f5; color:#CC0000; font-weight: bold; font-size:16px; }
main form .paygate {width:50%; margin-top:-115px; float:right;}
main form .validation {color: #c00; font-size:16px; float: right;}
main form p.alternative {float: right; padding-bottom: 0; margin-top: 5px; color: #CCC;}

main .gallery {display: grid;gap: 10px;grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));margin-bottom: 15px;}
main .gallery a { border: 0;}
main .gallery img {width: 100%;border-radius: 3px;transition: filter .3s ease-in-out;}

footer { margin-top: 30px; margin-bottom: 0px; background: #fff; border-top:#f0f0f0 10px solid; padding: 10px 0 15px 0; font-family: 'Open Sans';}
footer p:nth-of-type(2) {display: inline-block; font-size:14px; }
footer p:nth-of-type(2) a {margin-right:10px; color:#666; }
footer p img {height: 20px; margin-top: 10px; margin-right: 10px;}
footer p span {color: #ccc;}

.wrapper {position: relative;width: 100%;height: 0;padding-bottom: 56.25%;margin-bottom: 30px;}
.wrapper iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border-radius: 10px;}
.wrapper.vimeo {padding-bottom:62.5%; margin-top: 0px; }
.wrapper.vimeo iframe {background: #000; }

footer {}


/*****************/
/* Detail článku */

article.post {margin-bottom: 50px;}
article.post h2, article.post h3, article.post h4 {padding:0; margin:40px 0 0 0;}
article.post p {padding:0; margin:15px 0 15px 0; }
article.post ul, article.post ol {padding:0; margin:15px 0 0 0; }

article.post table { border-collapse: collapse; border:#ddd 1px solid; min-width: 100%; width: 75vw; font-family: 'Open Sans', sans-serif; font-size:87%; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
article.post table tr td, article.post table tr th { border:#ddd 1px solid; padding:4px 6px; text-align:left; }
article.post table tr th { background: #f5f5f5; font-weight: bold; }
article.post table tr:nth-of-type(even) { background-color: #f9f9f9;}
article.post table tr:last-of-type {border-bottom: 2px solid #ddd;}

article.post pre {
    font-family: 'Inconsolata', monospace;
    font-size: 15px;
    padding: 10px;
    background: #f5f5f5;
    margin-bottom: 20px;
    overflow-x: auto;
    width:80vw;
}

article.post code {
    font-family: 'Inconsolata', monospace;
    font-size: 18px;
    color: #000;
    padding: 0px 4px;
    font-weight: bold;
    background: #f5f5f5;
    border-radius: 3px;
}

article.post pre code {
    font-weight: inherit;
    padding: 0;
    font-size: inherit;
}

article.post blockquote:before {
    content: "“";
    display: block;
    font-size: 135px;
    float: left;
    line-height: 0.95;
    height: 50px;
    overflow: hidden;
    margin-right: 10px;
    font-family: 'Lora', serif;
    color: #C00;
}

article.post blockquote {
    display: block;
    margin-bottom: 1.5em;
    font-family: 'Lora', serif;
    padding-left: 20px;
    margin-top: 25px;
}

article.post blockquote strong {
    display: block;
    padding-top: 6px;
    font-weight: bold;
    color: #555;
}

article.post ol {
    list-style-type: decimal;
}

article.post ul li, article.post ol li {
    list-style-type: circle;
    margin-left: 36px;
}

article.post li p {padding: 0;}

/*****************/
/* Blazor        */

#blazor-error-ui {display: none;}


/*****************/
/* Media Queries */

@media (max-width: 800px) {
    section, section.max { margin:10px; max-width: initial !important; }
    header {background:none; margin: 0px;}
    header section img {display:none;}
    header section {display:block;}
    header section nav {float:left; margin-bottom: 25px;}
    header section div {float:right; margin-bottom: 25px;}

    /*redukce velikosti pro malé displeje*/
    header, main, footer {font-size:15px;}
    main h1 {font-size:20px;}
    main h2 {font-size:18px;}
    main h3 {font-size:16px;}
    main ul.super {font-size:18px;}
    main section.contacting h3 {font-size:20px;}
    main section.contacting ol { font-size:20px;}
    header section nav li {margin-right: 5px;}
    header section nav h1 { margin-top: -5px; max-width: 130px; height: 29px; overflow: hidden; }
    main h1, main h2, main h3 {padding-top: 15px;}
    main p, main ul, main ol, main table {margin-bottom: 15px;}
    main .button {padding: 6px 8px;}
}

@media (max-width: 1170px) {
    section.max.overflow {display: block;}
    section.max.overflow div {float:none;}
    article.post pre {width:initial;}
}