@font-face {
  font-family: dejaVu;
  src: url(./include/DejaVuSans-ExtraLight.woff);
}

@font-face {
  font-family: dejaVuBold;
  src: url(./include/DejaVuSans.woff);
}

::placeholder {
  color: rgb(180,180,180);
}

html {
  touch-action: manipulation;
}  

body {
  margin: 0 auto;
  padding: 0;
  width: 100%;
  
  font-family: dejaVu;
  color: #fff;
  
  min-height: 100vh;
  font-weight: 600;
  
  background-image: url(./img/uvodni.jpg);
  background-position: 50% 0;
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
}

body:before {
  content: "";
  display: block;
  width: 100vw;
  height: 100vh;
  position: fixed;
  background-color: rgba(1,1,1,0.5);
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   body:before {
     background: none;
   }
}

a {
  color: #ccc;
  cursor: pointer;
}
  
a:hover {
  text-decoration: underline;
}

h1, h2, h3 {
  margin: auto 0;
  text-transform: uppercase;
  padding: 0;
}

h1, .podpis span {
  padding: 2vh 0;
  text-transform: none;
}

h1 {
  font-size: 3vh;
}

header h1, .vyber_stranky h1 {
  font-size: 4vh;
}

h2, body, input, div.vyber, select, textarea {
  font-size: 1.8vh;
}

h3, footer > div:last-of-type {
  font-size: 1.5vh;
}

li {
  line-height: 200% !important;
}

strong {
  font-family: dejaVuBold;
}

input, div.vyber, select, textarea {
  padding: 2vh;
  margin: 2vh auto;
  font-family: dejaVu;
  background-color: #fff;
  border: 1px solid;
  font-weight: 600;
  width: 100%;
  text-align: center !important;
  border-radius: 3.5vh;
  line-height: 5vh;
  color: #000;
}

input[type="button"], input[type="submit"] {
  background-color: #000;
  cursor: pointer;
  text-transform: uppercase; 
  color: #fff;
}

div.vyber {
  padding: 0;
}

header, footer {
  width: 100%;
  margin: 0 auto;
  padding: 1vh 0;
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  flex-wrap: wrap;
}

header {
  position: sticky;
  top: 0; 
  cursor: pointer; 
  -webkit-box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.5);
  -moz-box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.5);
  box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.5);
}

footer {
  position: absolute;
  padding: 1vh 0 12vh 0;
  color: #ccc;
}

header > div, footer > div, main, #uvodni, #uvodni > img {
  max-width: 1200px;
  width: 100%;
  position: relative;
}

#uvodni {
  margin: 0 auto;
  line-height: 0;
}

#uvodni > img {
  margin-bottom: -5%;
  margin-top: -5%;
}

header > div, footer > div, #social {
  display: flex;
  padding: 0 1vh;
}

header > div {
  display: inherit;
}

#social {
  position: fixed;
  margin-top: 1vh;
  top: 0;
  left: auto;
  flex-direction: row;
  padding: 0;
  z-index: 11;
}

#social img {
  border: 1px solid #fff;
  border-radius: 50%;
  height: 7vh !important;
  margin-left: 1vh !important;
}

footer > div {
  justify-content: left;
  line-height: 200%;
}

footer img {
  margin: auto 1vh !important;
}

header img, menu img, footer img, #social img, .vyber_stranky img {
  height: 5vh;
  cursor: pointer;
  margin: auto 0;
  position: relative;
}

header img, .vyber_stranky img {
  height: 7vh;
  margin-left: 1vh;
}

header h1, menu h2, .zavrit h2, .vyber_stranky h1 {
  color: #fff;
  margin: auto 0;
  padding: 0;
  text-align: left;
  text-transform: uppercase;
}

header h1, .vyber_stranky h1 {
  text-transform: none;
  margin: auto 2vh;
}

header h2, .vyber_stranky h2 {
  color: #ccc;
}

menu h2, menu a, .zavrit h2 {
  color: #fff;
  font-weight: normal;
  cursor: pointer;
  line-height: 5vh;
}

menu, .zavrit {
  position: fixed;
  background-color: #000;
  border-radius: 3.5vh;
  border: 1px solid #fff;
  top: 0;
  margin: 1vh;
  padding: 1vh;
  z-index: 1000;
  text-transform: uppercase;
  line-height: 5vh;
  text-align: left;
}

menu {
  background-image: url(./img/menu.png);
  background-position: 2vh 2vh;
  background-size: 3vh;
  background-repeat: no-repeat;
}

menu h2 {
  padding-left: 5vh;
}

.zavrit {
  left: auto;
  right: 0;
  z-index: 10000;
}

menu a {
  padding: 1vh 1vh 1vh 5vh;
  display: block;
  text-decoration: none;
}

menu a:not(:first-of-type) {
  border-top: 1px solid #fff;
}

menu div {
  margin-top: 3vh;
}

#hledani {
  min-width: 50vw;
  display: inline-flex;
}

#hledani input:first-of-type {
  border: 1px solid #fff;
  text-align: left !important;
}

#hledani input:last-of-type {
  border-left: 0;
  width: 9.5vh;
  margin-left: -6vh;
  background-image: url(./img/lupa.png);
  background-position: 50%;
  background-size: 3.5vh;
  background-repeat: no-repeat;
}

menu a:hover {
  text-decoration: none;
  background-color: #fff;
  color: #000; 
}

main {
  margin: 0 auto;
  padding: 4vh 0 10vh 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: stretch;
  min-height: 60vh;
}  

main * {
  line-height: 150%;
}

#main_vyber {
  padding: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.prvni, .druhy {
  width: 47% !important;
}

#clanek h3 {
  margin: 1vh 0 2vh 0;
}

#clanek p:not(.centrovat) {
  text-align: justify;
}

.centrovat {
  font-style: italic;
}

.zavrit h2 {
  border-bottom: none !important;
}

#nacistDalsi {
  margin: 4vh auto;
  width: 70%;
}

.vybrano {
  color: #fff;
  background-color: #000 !important;
}

.neaktivni {
  background: repeating-linear-gradient(
    45deg,
    rgba(21,21,21,0.8),
    rgba(21,21,21,0.8) 10px,
    rgba(30,30,30,0.8) 10px,
    rgba(30,30,30,0.8) 20px
  );
  color: #ccc !important; 
}

.neaktivni .uvodniFotka {
  -webkit-filter: grayscale(0.75);
  filter: grayscale(0.75);
}

#hlaska {
  position: fixed;
  top: 1vh;
  left: 5%;
  overflow: auto;
  display: none;
  width: 90%;
  z-index: 100000;
  background-color: rgba(255,255,255, 0.9);
  line-height: 200%;
  font-size: 4vw;
  text-align: center;
  padding: 4vh 0;
  box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.75);
  border-radius: 3.5vh;
  border: 2px solid;
}

#hlaska span {
  max-width: 90%;
}

.chyba {color: #f00;}
.uspech {color: rgb(0, 102, 0);}

.nahled {
  cursor: pointer;
  flex-basis: 47%;
  position: relative;
  display: inline-block;
}

.nahled .uvodniFotka {
  background-position:center center;
  background-repeat:no-repeat;
  background-size:cover;
  border-radius: 2vh 2vh 0 0; 
}

.nahled .uvodniFotka:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.nahled .nadpisy {
  text-align: center;
  position: absolute;
  top: 0;
  border-radius: 2vh 2vh 0 0; 
  background-color: rgba(1,1,1,0.6);
  color: #fff;
  width: 100%;
}

.nahled p {
  margin: 0;
}

.nahled .nadpisy h1, .nahled p {
  padding: 2vh;
}

.nahled .nadpisy h2 {
  padding: 0 0 2vh 0;
}

.vyber_stranky {
  display: inline-flex;
}

.vyber_stranky > div {
  padding: 1vh;
}

.vyber_stranky h1, .vyber_stranky h2 {
  padding: 0 !important;
  margin: 0 !important;
  text-align: left;
}

@media only screen and (max-width: 1240px) {
  main {
    border: none;
  }     
}

@media only screen and (max-width: 620px) {
  
  body, h2, menu a, input, select, textarea {
    font-size: 4vw;
  }
   
  h1, .podpis span {
    font-size: 6vw;
  }
  
  h3, footer > div:last-of-type {
    font-size: 3vw;
  }

  .zavrit h2 {
    display: none;
  }
  
  menu > div {
    width: calc(100vw - 14vh);
  }
 
  header img, footer img, #logo-mob, #social img, .vyber_stranky img {
    height: 7vh;
  }
  
  #uvodni > img {
    margin: 0 !important;
  }
  
  #main_vyber {
    padding: 2vh auto;
  }
  
  .nahled {
    flex-basis: 96%;
  }
  
  .nahled .uvodniFotka:after {
    padding-bottom: 100%;
  }
  
  header > div {
    display: grid;
    grid-template-columns: max-content auto;
    grid-gap: 1vh;
  }
  
  header img {
    grid-row: span 2;
  }
  
  header h1 {
    margin: 0;
  }
}