@import url('https://fonts.googleapis.com/css?family=Dosis:400,800&subset=latin-ext');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

*
 {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Dosis', trebuchet ms;
  transition: all .5s ease;
 }
html, body
 {
  width: 100%;
  height: 100%;
  background: #eee;
  scroll-behavior: smooth;
 }
body
 {
  text-align: center;
 }
a
 {
  cursor: pointer;
  text-decoration: none;
  color: #f44;
 }
a:hover
 {
  color: #aaa;
  text-decoration: underline;
 }
#oznameni
 {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 102;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  background: #000c;
 }
#oznameni .tabulka
 {
  padding: 40px;
  color: #fff;
 }
#oznameni .tabulka .povidani
 {
  width: 100%;
 }
#oznameni .ok
 {
  background-color: #00ab16;
  background-image: linear-gradient(315deg, #00ab16 0%, #005f00 100%);
 }
#oznameni .bad
 {
  background-color: #ff0000;
  background-image: linear-gradient(315deg, #ff0000 0%, #800505 100%);

 }
#overlay
 {
  display: none;
  opacity: 0;
  position: fixed;
  overflow: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  padding: 10px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  background-color: #000c;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
 }
#close
 {
  position: fixed;
  z-index: 102;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  background: #c00 url('soub/close.png');
  background-size: 40% 40%;
  background-repeat: no-repeat;
  background-position: center center;
  border-radius: 100%;
 }
#close:hover
 {
  background-color: #f00;
  box-shadow: 0 5px 10px -2px #f44;
 }
.detailKurzu
 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: start;
  gap: 15px 15px;
  position: relative;
  z-index: 101;
  background: #877d;
  color: #fff;
  padding: 60px;
 }
.detailKurzu h3
 {
  width: 100%;
 }
.detailKurzu .cenovka
 {
  font-weight: bold;
  margin-top: 20px;
  border-top: 1px solid #fff4;
  padding-top: 20px;
 }
.detailKurzu .cenovka b
 {
  font-family: "Montserrat", serif;
  color: #0bd;
 }
.detailKurzu .formular
 {
  width: 50%;
 }
.detailKurzu input, .detailKurzu textarea
 {
  border-bottom: 2px solid transparent;
 }
.detailKurzu input:hover, .detailKurzu textarea:hover
 {
  border-bottom: 2px solid #fff;
  box-shadow: 0 10px 20px -10px #fff8;
 }
.povidani
 {
  width: 40%;
  text-align: left;
  border-top: 1px solid #fff4;
  border-bottom: 1px solid #fff4;
  padding: 20px 0;
  font-size: 20px;
 }
@media only screen and (max-width: 600px)
 {
  .povidani, .detailKurzu .formular
   {
    width: 100%;
   }
 }
header
 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
 }
nav
 {
  background: #000a;
  background-size: 100% 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
 }
nav:hover
 {
  background: #000d;
 }
nav a
 {
  display: block;
  padding: 15px;
  margin-left: 7px;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  border-radius: 10px;
  border-bottom: 6px solid transparent;
 }
nav a:hover
 {
  color: #fff;
  background: #fff1;
  border-bottom: 6px solid #fff4;
  text-decoration: none;
  text-shadow: 0 0 3px #fff;
 }
nav .socnety
 {
  position: fixed;
  top: 10px;
  right: 10px;
 }
nav .kolecko
 {
  display: inline-block;
  width: 30px;
  height: 30px;
 }
nav .kolecko:hover
 {
  border: 1px solid #0bd;
  background-color: #0bd4;
  background-size: cover;
 }
@media only screen and (max-width: 560px)
 {
  nav .socnety
   {
    display: none;
   }
 }
@media only screen and (max-width: 700px)
 {
  .logo
   {
    width: 100%;
    height: 53px;
   }
 }
h1, h2, h3, h4
 {
  font-family: "Montserrat", serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
  font-size: 60px;
  margin-top: 30px;
  margin-bottom: 30px;
  text-transform: uppercase;
 }
@media only screen and (max-width: 600px)
 {
  h1, h2, h3, h4
   {
    font-size: 30px;
   }
 }
section
 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  color: #fff;
  padding: 40px;
 }
.wrap
 {
 max-width: 1000px;
 }
#uvod
 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  color: #fff;
  padding: 40px;
  min-height: 100%;
  background-image: url('soub/potapeci.jpg');
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  box-shadow: 0 20px 30px -20px #000;
  font-size: 25px;
 }
.napisWrap
 {
  display: inline-block;
  text-align: left;
 }
#uvod h2
 {
  text-shadow: 1px 1px 5px #000;
  margin-left: 40px;
 }
#uvod h3
 {
  font-weight: 100;
  margin-bottom: -47px;
  font-size: 25px;
 }
@media only screen and (max-width: 600px)
 {
  #uvod h3
   {
    margin-bottom: -37px;
    font-size: 20px;
   }
 }
#uvod .citat
 {
  text-shadow: 1px 1px 5px #000;
  max-width: 1000px;
 }
#onas, #dalsiText
 {
  background: #f44;
  padding: 40px 40px 80px 40px;
 }
#onas
 {
  background-color: #f44;
  background-image: url('soub/bjalda.png');
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: auto 80%;
 }
#onas h2, #dalsiText h2
 {
  margin-left: 40px;
 }
#onas h3, #dalsiText h3
 {
  font-weight: 100;
  margin-bottom: -47px;
  font-size: 25px;
 }
@media only screen and (max-width: 600px)
 {
  #onas h3, #dalsiText h3
   {
    margin-bottom: -37px;
    font-size: 20px;
   }
 }
.columns
 {
  max-width: 900px;
  column-count: 3;
  column-gap: 40px;
  column-rule: 1px dotted #fffa;
  font-size: 18px;
  text-align: justify;
 }
@media only screen and (max-width: 900px)
 {
  #onas
   {
    background-image: none;
   }
  .columns
   {
    column-count: 2;
   }
 }
@media only screen and (max-width: 650px)
 {
  .columns
   {
    column-count: 1;
   }
 }
.columns b
 {
  display: block;
  padding: 10px;
  text-align: center;
  font-size: 20px;
  font-style: oblique;
 }
.dva
 {
  max-width: 700px;
  column-count: 2;
 }
@media only screen and (max-width: 500px)
 {
  .dva
   {
    column-count: 1;
   }
 }
#nabidka
 {
  min-height: 100%;
  background-image: url('soub/potapeci2.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  padding: 0;
  padding-top: 40px;
  padding-bottom: 40px
 }
#nabidka .wrap
 {
  max-width: 100%;
 }
#nabidka h2
 {
  margin-left: 40px;
  text-shadow: 1px 1px 5px #000;
 }
#nabidka h3
 {
  font-weight: 100;
  margin-bottom: -47px;
  font-size: 25px;
 }
@media only screen and (max-width: 600px)
 {
  #nabidka h3
   {
    margin-bottom: -37px;
    font-size: 20px;
   }
 }
.items
 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 15px 15px;
 }
.item
 {
  width: 20%;
  border-bottom: 3px solid transparent;
  border-radius: 10px;
 }
@media only screen and (max-width: 900px)
 {
  .item
   {
    width: 46%;
   }
 }
@media only screen and (max-width: 500px)
 {
  .item
   {
    width: 95%;
   }
 }
.item:hover
 {
  cursor: pointer;
 }
.item .thumb
 {
  width: 200x;
  height: 160px;
  border-radius: 10px 10px 0 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  padding: 20px;
  text-shadow: 1px 0 2px #000, -1px 0 2px #000, 0 1px 2px #000, 0 -1px 2px #000;
  font-family: "Montserrat", serif;
  font-weight: 800;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -1px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  font-size: 20px;
 }
.item .cenovka b
 {
  font-family: "Montserrat", serif;
  font-weight: 800;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -1px;
  font-size: 20px;
 }
.item .popis
 {
  display: none;
 }
.item .cenovka
 {
  background: #145e;
  border-top: 1px solid #fffa;
  border-radius: 0 0 10px 10px;
  padding: 10px;
 }
.item .cenovka b
 {
  font-size: 30px;
  color: #0bd;
 }
.item:hover .cenovka
 {
  background: #122e;
  box-shadow: 0 5px 20px -10px #0bd;
 }
#nabidka2
 {
  background: url('soub/potapeci3.jpg');
  background-size: cover;
  background-position: top center;
 }
#nabidka2 .wrap
 {
  max-width: 100%;
 }
#nabidka2 h2
 {
  margin-left: 40px;
  text-shadow: 1px 1px 5px #000;
 }
#nabidka2 h3, #sluzby h3
 {
  font-weight: 100;
  margin-bottom: -47px;
  font-size: 25px;
 }
@media only screen and (max-width: 600px)
 {
  #nabidka2 h3, #sluzby h3
   {
    margin-bottom: -37px;
    font-size: 20px;
   }
 }
#sluzby
 {
  background: #5ab;
  padding: 0;
  padding-top: 40px;
  border-top: 6px solid #f44;
 }
.polozky
 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 0;
  width: 100%;
 }
.polozka
 {
  width: 33.3%;
  border: 1px solid #fff4;
  padding: 30px;
 }
@media only screen and (max-width: 600px)
 {
  .polozka
   {
    width: 50%;
   }
 }
.polozka:hover
 {
  background: #fff2;
 }
.polozka h4
 {
  font-size: 20px;
 }
#kontakt
 {
  background: url('soub/kontakt.jpg') center center;
  background-size: cover;
  padding: 40px 40px 80px 40px;
 }
#kontakt .wrap
 {
  max-width: 100%;
 }
.kontaktWrap
 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: start;
  gap: 15px 15px;
 }
#kontakt h2
 {
  margin-left: 40px;
  text-shadow: 1px 1px 5px #000;
 }
#kontakt h3
 {
  font-weight: 100;
  margin-bottom: -47px;
  font-size: 25px;
 }
@media only screen and (max-width: 600px)
 {
  #kontakt h3
   {
    margin-bottom: -37px;
    font-size: 20px;
   }
 }
input, button, textarea
 {
  padding: 10px;
  background: #fff1;
  color: #fff;
  border: 0;
  border-bottom: 4px solid transparent;
  border-radius: 10px;
  font-size: 18px;
  width: 100%;
  margin-bottom: 10px;
 }
input:focus, button:focus, textarea:focus
 {
  outline: 0;
  box-shadow: none;
 }
input:hover, textarea:hover, button:hover
 {
  border-bottom: 4px solid #0bd;
  box-shadow: 0 10px 20px -10px #0bd;
 }
button
 {
  background: #0bda;
 }
.tiraz
 {
  width: 400px;
  text-align: left;
  font-size: 20px;
 }
.tiraz .logo
 {
  width: 200px;
  margin-left: -10px;
 }
.tiraz b
 {
  font-family: "Montserrat", serif;
  font-weight: 900;
 }
.formular
 {
  width: 600px;
  text-align: left;
 }
.socnety
 {
  width: 200px;
 }
.kolecko
 {
  display: block;
  width: 80px;
  height: 80px;
  margin-bottom: 10px;
  border-radius: 100%;
  border: 1px solid #fff2;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center center;
 }
.kolecko:hover 
 {
  background-color: #fff2;
 }