:root {
  --modra: #000096;
  --svetlemodra: #00ffff;
  --bila : #ffffff;
}

@font-face {
  font-family: 'AvenirNextLTPro';
  src: url("../webfonts/AvenirNextLTPro-Regular.woff2") format("woff2"), url("../webfonts/AvenirNextLTPro-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'AvenirNextLTProBold';
  src: url("../webfonts/AvenirNextLTPro-Bold.woff2") format("woff2"), url("../webfonts/AvenirNextLTPro-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
}


html { scroll-behavior: smooth; }
body { background-color: var(--svetla); font-family: "AvenirNextLTPro", sans-serif; color:var(--modra); }
nav, .blok, .ui-tooltip { font-size:16px; }
a { transition: background-color 0.3s, color 0.2s; text-decoration:underline; }
a:hover { color:#444; text-decoration:none; }
.show-small { display:none; } /* ve w3 to není */
.none { display:none; }
.viktor { clear:both; }

h1, h2, h3, h4 { font-family: "Oswald", sans-serif; }

.modra { color: var(--modra); }
.modry { background: var(--modra); color:var(--bila); }
.vnitroblok { width:75%; margin-left:auto; margin-right:auto; padding:24px 0 30px; }

nav { background-color:var(--modra); color:var(--bila); }
nav .vnitroblok { padding:6px 0; }
nav h1 { font-size:1.4vw; margin:0; padding-top:0.15em; }
nav .logo { width:30%; margin-left:12px; margin-bottom:0.1em; }
nav .menu { font-family: "Oswald", sans-serif; font-size: 1.4vw; padding-left:1.6%; padding-top:1.1%; text-align:right;  }
nav .menu a { display:inline-block; text-decoration:none; padding:0 1%; margin:0 0.27%; transition: background-color 0.3s, color 0.3s;  }
nav .menu a:hover { color:var(--svetlemodra); }
nav .ikona { font-size:6.7vw; }

.jakobutton { display:inline-block; font-family: "Oswald", sans-serif; font-size:22px; font-weight:bold; padding:0.4em 1.6em; margin-top:12px; text-decoration:none; background:var(--svetlemodra); border-radius:8px; color:var(--modra); }
.jakobutton:hover { background-color:var(--bila); }

.pf { width:100%; }
.uvod { position:relative; }
.okynko { position:absolute; top:20%; right:5%; width:35%; background: rgba(0,0,150,0.85); color:var(--bila); padding:1% 2%; border-radius:12px; }
.okynko h2 { font-family: "Oswald", sans-serif; font-size: 24px; margin:0 0 0.7em; padding:0; }
.okynko p { font-size: 16px; margin:0 0 0.7em; padding:0; }

.proc { padding:1em; }
.proc h2 { font-size:36px; font-weight:bold; }
.proc h3 { font-size:24px; font-weight:bold; }
.proc p { margin:0 0 0.2em; padding:0; font-size:18px; line-height:150%; }
.coted { background:url('../img/check.png') 0% 0% no-repeat; background-size: 60px 52px; padding:0 0 0 80px; margin-bottom:2em; }
.pribehy { color:#000; }
.faq { padding-bottom:50px; }
.faq h4 { margin:1.5em 0 0; padding:0; color:var(--svetlemodra); }
.faq p { margin:0.3em 0 0; padding:0; }
.formular table { margin:2em auto; }
.formular table td { padding:0.4em 0.8em; text-align:left; }
.formular table td:first-child { font-family: "Oswald", sans-serif; font-size: 18px; text-align:right; color:#000; vertical-align:top; }
.formular input, .formular select, .formular textarea { border:1px solid #000; border-radius:6px; padding:4px 8px; }
.formular input.vetsi { width:30em; }
.formular input.mensi { width:10em; }
.formular input.maly { width:5em; }
.formular textarea { width:30em; height:6em; }

footer .logo { width:10em; margin-left:0; margin-bottom:1em; }
footer a:hover { color:#eee; }


input.email, button.email { font-size:16px; border-radius:20px; margin-top:12px; }
input.email { background-color:#fff; padding:8px 16px; border:1px solid #444; width:20em; margin-right:1.5em; }
button.email { background-color:var(--zelena); padding:8px 32px; border:1px solid #444; cursor:pointer; transition: background-color 0.2s; }
button.email:hover { background-color:var(--svetla); }

@media (hover: hover) { /* hack na mobily */

}

.e404 { font-size:50px; }

@media screen and (max-width:1205px) {
  .okynko { top:5%; right:5%; width:50%;  }
}

@media screen and (max-width:992px) {
  .vnitroblok { width:90%; }
  .okynko { position:relative; top:0; right:0; width:100%; border-radius:0; text-align:center; }
}

@media screen and (max-width:768px) {
  .formular input.vetsi { width:100%; }
  .formular input.mensi { width:100%; }
  .formular textarea { width:100%; }

}

@media screen and (max-width:600px) {
  .vnitroblok h2 { font-size:32px; }
  .show-small { display:block; }
  nav h1 { font-size:28px; text-align:center; }
  nav .logo { width:30%; }
/*
  nav { padding:3% 0; }
  nav .menu { padding-top:0.5%; }
  nav .menu a { line-height:0%; margin-left:1em; }
*/

}