@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap');
html   {width:100%; font:16px/1.5 'Roboto', Arial, sans-serif; scroll-behavior:smooth}
body   {width:100%; margin:0; color:black; background:white; text-align:left}
body * {box-sizing:border-box}

h1 {font-family:"Times New Roman", serif}
h2 {font-size:1.8rem; font-weight:normal}
h3 {font-size:1.2rem; font-weight:bold}
h4 {font-size:1rem; font-weight:bold}
a       {text-decoration:none; color:inherit}
a:hover {text-decoration:underline}
table   {border-collapse:collapse}
button  {display:inline-flex; align-items:center; justify-content:center; border:0; outline:none; background:transparent; cursor:pointer; transition:all 0.2s}
.btn-close         {position:absolute; width:48px; height:48px; top:5px; right:5px; padding:0; color:white; border-radius:24px; z-index:900}
.btn-close::before {content:"\2715"; font-size:26px; line-height:1} 
.btn-close:hover   {color:white !important; background:#222D80} 
.btn-top           {position:fixed; width:48px; height:48px; bottom:-80px; right:10px; color:#1f5b8b; border:2px solid #1f5b8b; border-radius:50%; z-index:800}    
.btn-top.active    {bottom:10px}    
.btn-top::before   {content:"\f077"; font-family:'Font Awesome 6 Free'; font-weight:900}
.btn-top:hover     {color:white; background:#1f5b8b}

/* prvky */
.ico-02>li         {display:grid; grid-template:1fr/auto 1fr; align-items:center; margin:5px 0; gap:1rem}
.ico-02>li>.fa     {grid-area:1/1; display:inline-flex; justify-content:center; align-items:center; width:32px; height:32px; border:2px solid; border-radius:32px}
.border-left       {border-left:3px solid #1f5b8b; padding-left:15px; margin:0; list-style:none}
.border-left>li    {margin:10px 0}
.ident:not(:empty) {padding:1rem 3rem}
.nobr              {white-space:nowrap}
@media screen and (max-width:799px) {
    h2                 {font-size:1.4rem}
    .border-left       {padding-left:1rem}
    .ident:not(:empty) {padding:10px}
    }

.center      {width:100%; max-width:1460px; margin:auto}
main         {padding-bottom:20px}
main.bcg-1   {padding-bottom:calc((100vw / 3)); background:url('/wpimages/foto/pohovka.jpg') no-repeat center bottom; background-size:contain}
main.bcg-2   {padding-bottom:calc((100vw / 2.4)); background:url('/wpimages/foto/vlak.jpg') no-repeat center bottom; background-size:contain}
main>.center {display:grid; grid-template:1fr/330px 1fr; gap:10px; padding:0 10px}
@media screen and (max-width:1023px) { main>.center {display:block; padding:0}}
@media screen and (max-width:799px)  { main         {padding-top:60px}}
@media screen and (max-width:599px)  { main.bcg-1   {background-image:none; padding-bottom:20px}}

header         {position:sticky; top:0; width:100%; background:#222D80; color:silver; overflow:hidden; z-index:1000} 
header>.center {display:grid; grid-template:"logo lbl" 60px "logo menu" 40px/100px 1fr; padding:10px; align-items:center} 
header h1      {grid-area:lbl; margin:0; font-size:3rem; line-height:1.2; color:white; overflow:hidden}
header .logo       {grid-area:logo; place-self:center}
header .logo>svg   {display:block; height:80px}
header .btn-wrap   {grid-area:btn; width:48px; height:48px; color:white; display:none}
header nav         {grid-area:menu; display:inline-grid; grid-auto-flow:column; gap:20px; justify-self:start; color:silver}
header nav>a       {display:inline-block; padding-top:9px; padding-bottom:2px}
header nav>a:hover {color:white; text-decoration:none}
header .btn-wrap::before       {content:"\2630"; font-size:28px}
header.active .btn-wrap:before {content:"\2715"}
body.index header nav>a:nth-child(1)     {color:white; text-decoration:underline; text-underline-offset:8px} 
body.dopravni header nav>a:nth-child(2)  {color:white; text-decoration:underline; text-underline-offset:8px} 
body.supervize header nav>a:nth-child(3) {color:white; text-decoration:underline; text-underline-offset:8px} 
body.informace header nav>a:nth-child(4) {color:white; text-decoration:underline; text-underline-offset:8px} 
body.cenik header nav>a:nth-child(5)     {color:white; text-decoration:underline; text-underline-offset:8px}
@media screen and (max-width:799px) {
    header           {position:fixed; max-height:60px; transition:max-height 0.5s}
    header>.center   {grid-template:"logo lbl btn" 50px ". menu menu" auto/50px 1fr 50px; padding:5px} 
    header .logo>svg {height:40px}
    header .btn-wrap {display:inline-flex}
    header nav       {display:grid; grid-auto-flow:row; gap:5px; padding:20px 0}
    header.active    {max-height:500px}
    }
@media screen and (max-width:1070px) { header h1 {font-size:2.5rem}}
@media screen and (max-width:890px)  { header h1 {font-size:2.0rem}}
@media screen and (max-width:790px)  { header h1 {font-size:1.5rem}}
@media screen and (max-width:580px)  { header h1 {font-size:1.2rem}}

.sidebar                   {display:grid; position:sticky; gap:10px; top:120px; padding-top:10px; align-self:start}
.sidebar>.slide-box        {padding:1rem; max-height:500px; background:#e8eaf2; border-radius:0px 0px 20px 0px; overflow:hidden; transition:max-height 0.3s ease-in-out}
.sidebar .slide-box.closed {max-height:44px}
.sidebar .slide-box h2     {font-size:1.6rem; margin:0}
.sidebar .slide-box>:first-child               {display:grid; grid-template:44px/1fr auto; color:#1f5b8b; margin-top:-1rem; font-size:1.4rem; align-items:center; cursor:pointer}
.sidebar .slide-box>:first-child::after        {content:"\2212"; font-size:28px; line-height:1; align-self:center}
.sidebar .slide-box.closed>:first-child::after {content:"+"}
.sidebar button             {width:100%; height:36px; color:black; font:inherit; text-align:left; border-radius:2px 18px 18px 2px; transition:padding 0.5s}
.sidebar button.active      {background:#222D80; color:white; font-weight:bold}
.sidebar button:hover       {font-weight:bold}
.sidebar :not(.active)>i.fa {color:#1f5b8b}
.sidebar nav>button         {justify-content:flex-start; padding:0 4px}
.sidebar .kontakt>*         {display:grid; grid-template:36px/36px 1fr; align-items:center; padding:0 4px}
.sidebar .kontakt i         {font-size:20px}
.sidebar .certifikat        {display:grid; grid-template:1fr/1fr 1fr; gap:2px}
.sidebar .certifikat>a>img  {width:100%}
@media screen and (max-width:1023px) {
    .sidebar                   {position:absolute; grid-template:auto/310px; padding:5px; gap:5px}
    .sidebar .slide-box.closed {max-height:500px}
    .sidebar .slide-box        {max-height:44px}
    main :has(.cv-container) .sidebar    {display:none}
    body:is(.informace, .cenik) .sidebar {display:none}
    }
@media screen and (max-width:799px) {
    .sidebar {grid-template:auto/320px; top:60px}
    }
@media screen and (max-width:570px) {
    .sidebar            {position:static; grid-template:auto/1fr; top:initial; padding-bottom:0}
    .index .sidebar     {background:#4b6536}
    .dopravni .sidebar  {background:#141b4c}
    .supervize .sidebar {background:#DAA520}
    }

.banner            {display:grid; grid-template:"f1 f2" min-content/1fr auto; gap:1rem 0; padding:30px 0; color:white; height:calc((100vw - 380px) * 0.55); max-height:605px}
.banner .line      {height:8px}
.banner .vert-line {grid-area:f2; width:2px; height:80%; place-self:center start; background:white; z-index:2}
.banner>.fra-1     {grid-area:f1; justify-self:end; max-width:500px; display:flex; align-items:center; text-align:right; font-size:1.6rem; padding:1rem 2rem; border-radius:84px 0 0 84px}
.banner>.fra-2     {grid-area:f2; height:166px; font-size:1.3rem; line-height:1.6; padding:10px 20px}
.banner>.fra-2>div {display:grid; grid-template:1fr/1fr auto; font-size:1rem; line-height:1.4}

.index .banner           {background:url('/wpimages/foto/house.jpg') no-repeat center bottom 10%; background-size:100%}
.index .banner>.fra      {background:#4b6536}
.index .banner>.fra-1    {font-size:1.6rem}
.dopravni .banner        {background:url('/wpimages/foto/dopravka.jpg') no-repeat center bottom 10%; background-size:100%}
.dopravni .banner>.fra   {background:#141b4c}
.dopravni .banner>.fra-1 {font-size:1.2rem}
.supervize .banner       {background:url('/wpimages/foto/strom.jpg') no-repeat center bottom 10%; background-size:100%}
.supervize .banner>.fra  {background:#DAA520}
@media screen and (max-width:1080px) {
    .banner            {grid-template:"f1 f1" auto ". f2" auto ". ." 1fr/1fr auto; height:calc((100vw + 20px) * 0.55); max-height:900px}
    .banner>.vert-line {display:none}
    .banner>.fra-1     {padding:1rem}
    .banner .fra-2     {border-radius:10px; margin:1rem}
    }
@media screen and (max-width:840px) {
    .banner        {grid-template:". f2" auto ". ." 1fr "f1 f1" auto/1fr auto; padding:1rem 0; height:calc((100vw + 20px) * 0.67)}
    }
@media screen and (max-width:570px) {
    .banner        {grid-template:"f1 f1" auto ". ." 1fr ". f2" auto/1fr auto; gap:30px; padding:0; height:calc((100vw + 20px) * 0.8)}
    .banner>.fra-1 {font-size:1.1rem !important; border-radius:0 0 20px 0; justify-content:flex-start; text-align:left; justify-self:stretch; max-width:initial}
    }

.sub-banner       {display:grid; padding:1rem; border-radius:0 0 40px 0; color:white}
.sub-banner .line {grid-area:line; height:90%; background:white}
.sub-banner>h2    {grid-area:lbl; margin:0; color:white; align-self:center}
.sub-banner>div   {align-self:center}
.sub-banner i     {color:silver}
.index .sub-banner     {background:#4b6536; grid-template:"lbl line ." auto "lbl line ." auto/auto 2px 1fr; gap:8px 1rem}
.dopravni .sub-banner  {background:#141b4c; grid-template:"lbl line aaa" auto/auto 2px 1fr; gap:8px 1rem}
.supervize .sub-banner {background:#DAA520; grid-template:auto/1fr; font-size:1.2rem}
@media screen and (max-width:570px) {
    .sub-banner       {display:block}
    .sub-banner .line {height:2px; margin:1rem; opacity:0.3}
    }

.right                  {border-radius:0 0 40px 0; background:white; overflow:hidden; align-self:start}
.right.frame-main       {transition:opacity 0.2s}
.right.frame-main:empty {background:url('/wpimages/wait.gif') no-repeat center center; background-size:72px; background-color:white; align-self:stretch}
.right>:not(.sub-banner) :is(h2, i, strong) {color:#1f5b8b}
.right .mapa        {position:relative}
.right .mapa>iframe {display:block; width:100%; height:calc(100vh - 120px); border:0; margin:0}
.right .logos       {display:grid; grid-template:1fr 1fr/1fr 1fr 1fr; place-content:center; background:white}
.right .logos>img   {place-self:center; padding:20px; max-width:240px; max-height:120px}
.right .letak       {display:block; width:100%; margin-top:40px}
.index .right .img-cards       {display:flex; justify-content:center; padding:0 4rem}
.index .right .img-cards>a     {transition:0.2s; flex-basis:0; flex-grow:1}
.index .right .img-cards>a>img {width:100%; box-shadow:3px 3px 12px 2px rgba(0, 0, 0, 0.3)}
.index .right .img-cards>a:not(:first-child) {margin-left:-6rem}
.index .right .img-cards>a:not(:last-child):hover, .index .img-cards>a:not(:last-child):focus-within         {transform:translateY(-1rem)}
.index .right .img-cards>a:not(:last-child):hover~a, .index .img-cards>a:not(:last-child):focus-within~.card {transform:translateX(6rem)}
.dopravni .right table td       {padding-right:1rem}
.cenik .right                   {padding-bottom:2rem}
.cenik .right .table            {display:grid; grid-template:auto/1fr auto; margin-top:2px; gap:2px 0}
.cenik .right .table>div        {padding:8px; background:#e8eaf2}
.cenik .right .table .fa-square {font-size:0.5rem; margin:auto 1rem auto 2rem; color:#1f5b8b}
@media screen and (max-width:570px) { .right .logos {grid-template:1fr 1fr 1fr/1fr 1fr}}


footer            {background:#141b4c; color:silver}
footer .footer-in {display:grid; grid-template:"aaa aaa bbb" auto ". . bbb" auto ". . ccc" auto/1fr 1fr 1fr; max-width:1600px; margin:auto; padding:60px; gap:8px 50px}
footer .footer-in .item-1 {grid-area:aaa}
footer .footer-in .item-2 {grid-area:bbb}
footer .footer-in .item-3 {grid-area:ccc}
footer h2            {color:grey; border-bottom:1px solid dimgray; margin:0}
footer ul>li         {margin-left:-20px}
footer ul>li::marker {color:dimgray}
footer a             {color:inherit !important}
footer i.fa          {display:inline-block; width:36px; color:dimGray}
footer *[onclick="mapa()"] {cursor:pointer}
footer .end-line           {display:grid; grid-template:1fr/auto 1fr; text-align:center; background:#222D80; padding:1rem; font-size:0.9rem}
footer .btn-admin          {color:dimgray}
@media screen and (max-width:1023px) { footer .footer-in {grid-template:"aaa aaa" auto ". ." auto ". ." auto "bbb ccc" auto/1fr 1fr; padding:20px}}
@media screen and (max-width:699px)  { footer .footer-in {grid-template:"aaa" auto "." auto "." auto "." auto "." auto "bbb" auto"ccc" auto/1fr; padding:10px}}

/* STYL ŽIVOTOPISŮ */
.cv-container       {position:relative}
.cv-container>img   {display:block; width:100%} 
.cv-container>.cv-head         {display:grid; grid-template:"name name" auto "aaa bbb" auto/1fr 1fr; gap:20px; background:#e8eaf2}
.cv-container>.cv-head h2      {margin:0}
.cv-container>.cv-head h3      {font-size:1.1rem; text-transform:uppercase}
.cv-container>.cv-head>.item-1 {grid-area:name} 
.cv-container>.cv-head i.fa    {width:36px; color:#1f5b8b}
.cv-container>.cv-head :is(h3, ul, table)  {margin:5px 0}
.cv-container>.cv-head table td:last-child {padding-left:1rem; text-align:right; white-space:nowrap}
@media screen and (max-width:599px) { .cv-container>.cv-head {display:grid; grid-template:"name" auto "." auto "." auto/1fr; gap:1rem}}

.cv-container>.cv-body h3              {margin:15px 0; text-transform:uppercase}
.cv-container>.cv-body h4              {padding-bottom:5px; text-transform:uppercase; border-bottom:1px solid GainsBoro}
.cv-container>.cv-body h5              {color:#777; font-size:14px}
.cv-container>.cv-body h5::before      {margin-right:8px}
.cv-container>.cv-body h5>time::before {content:"\a0"}
.cv-container>.cv-body :is(h4, h5, p)  {margin:5px 0}

.cv-article             {position:relative; padding-left:50px}
.cv-article::before     {content:""; position:absolute; top:0; bottom:0; left:17px; width:2px; background:GainsBoro}
.cv-article>div         {position:relative; margin:1.5rem 0}
.cv-article>div::before {position:absolute; top:50%; left:-50px; bottom:50%; margin:auto; color:GainsBoro; background:white; text-align:center; border-radius:50%}
.cv-article.cv-work>div::before   {content:"\f0b1"; font:900 18px/32px 'Font Awesome 6 Free'; width:32px; height:32px; border:2px solid}
.cv-article.cv-work h5:before     {content:"\f024"; font:900 16px/1 'Font Awesome 6 Free'}
.cv-article.cv-edu>div::before    {content:"\f501"; font:900 18px/32px 'Font Awesome 6 Free'; width:32px; height:32px; border:2px solid}
.cv-article.cv-edu h5:before      {content:"\f19c"; font:900 16px/1 'Font Awesome 6 Free'}
.cv-article.cv-skills             {padding-top:1em; padding-bottom:1em}
.cv-article.cv-skills>div         {margin:2px 0}
.cv-article.cv-skills>div::before {content:"\f192"; font:400 22px/22px 'Font Awesome 6 Free'; width:36px; height:22px}
.cv-article.cv-skills h5:before   {content:"\f024"; font:900 16px/1 'Font Awesome 6 Free'}
.cv-article.cv-skills p           {background:WhiteSmoke; margin:2px 0; padding:6px; font-size:0.96rem}

.cv-article time {font-weight:normal; font-style:italic}
.cv-end {width:36px; margin-top:-4px; margin-bottom:20px; border-top:4px solid GainsBoro}

/* EDITOR */
.editeur main>.center       {display:grid; grid-template:". aaa" 1fr/320px 1fr}
.editeur main>.center.login {display:grid; grid-template:1fr/320px; height:70vh; justify-content:center}
.editeur main>.center>form  {padding:20px 0}
.editeur label              {display:block; margin-top:10px; font-size:0.88rem; color:#1f5b8b; font-weight:bold}
.editeur input              {width:100%; padding:8px; font-size:1rem; border:1px solid #1f5b8b; border-radius:4px}
.editeur textarea           {width:100%; height:70vh; margin:20px 0}
.editeur .message           {height:2rem; text-align:center; color:red}
.editeur button             {width:100%; height:44px; font-size:1rem; color:#222D80; border-radius:22px; border:1px solid}
.editeur button.inv         {color:white; background:#222D80}
.editeur button:hover       {color:white; background:#222D80}
.editeur button.inv:hover   {color:#222D80; background:transparent}