#hlavicka {
    background-image: url('janout/KBukove-0151-Edit.jpg');
    height: 100%; 
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    }
#nadpis_firmy{
  text-align: center;
  padding-top: -200px;
  transition: 1s;
  font-family: 'Oswald', sans-serif;
  color: #EAECF4;
  font-size: 5vw;
}

body, html {
        height: 100%;
        margin: 0;
      }

      * {
        box-sizing: border-box;
        padding: 0;
        margin: 0;
    }

    body {
        font-family: 'Josefin Sans', sans-serif;
        z-index: 1;
    }
    html {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
  }
html body {
  margin: 0;
  background: #EAECF4;
  /*background: linear-gradient(to right, #008fff, #ffffff);*/
}
/*.container{
    max-width: 960px;
    margin: 0 auto;
    background: #008fff;
    
}
.parallax{
    background: url('zaklad.jpg') no-repeat center;
    background-size: cover;
    background-attachment: fixed;
    height: 100%;
}*/

/*navigace*/
* {
  margin: 0;
  padding: 0;
}
#navigace{
position: fixed;
width: 100%;
}
.navbar {
  position: fixed;
  top: -500px;
  width: 100%;
  font-size: 18px;
  background-color: #3D5388;
  border: 1px solid rgba(0, 0, 0, 0.2);
  padding-bottom: 10px;
  transition: 0.5s;
  overflow: hidden;
  z-index: 2;
  overflow-y: unset;
}
#logoM{
  display: none;
}
.main-nav {
  list-style-type: none;
  display: none;
}

.nav-links,
.logo {
  text-decoration: none;
  color: #EAECF4;
}

.main-nav li {
  text-align: center;
  margin: 15px auto;
}

.logo {
  display: inline-block;
  font-size: 22px;
  margin-top: 10px;
  margin-left: 20px;
}

.navbar-toggle {
  position: absolute;
  top: 10px;
  right: 20px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.8);
  font-size: 24px;
}

.active {
  display: block;
}
.tlaco{
  top: 0px;
  z-index: 2;
  transition: 0.5s;
  z-index: 1;
  position: absolute;
}
.xIcon{
  display: none;
}
@media (max-width: 768px) {
.tlaco{
  z-index: 3;
  position: fixed;

}

}
@media screen and (min-width: 768px) {
  .navbar {
      position: fixed;
      width: 100%;
      display: flex;
      justify-content: space-between;
      padding-bottom: 0;
      height: 70px;
      align-items: center;
      overflow: unset;
      overflow-y: unset;
      z-index: 3;
  }
  

  .main-nav {
      display: flex;
      margin-right: 30px;
      flex-direction: row;
      justify-content: flex-end;
  }

  .main-nav li {
      margin: 0;
  }

  .nav-links {
      margin-left: 40px;
  }

  .logo {
      margin-top: 0;
  }

  .navbar-toggle {
      display: none;
  }

  .logo:hover,
  .nav-links:hover {
      color: rgba(255, 255, 255, 1);
  }
}
/*tlacitko*/
.tlaco {
border: none; /* Remove borders */
color: white; /* White text */
top: 2%;
right: 2%;
font-size: 16px; /* Set a font size */
cursor: pointer; /* Mouse pointer on hover */
background-color: Transparent;
background-repeat:no-repeat;
border: none;
cursor:pointer;
overflow: hidden;
outline:none;
}
#odkaz{
  color: white;
  
}

    /*nadpisy*/
    h2{
        color: rgb(0, 0, 0);
        mix-blend-mode: exclusion;
        font-family: 'Noto Serif';
        font-size: 30px; 
        font-weight: 300; 
        line-height: 32px; 
        margin: 3%; 
        font-weight: bold;
        padding-top: 3%;
        text-align: center;
        font-family: 'PT Serif', serif;

    }
    /*fotky s popisky*/
    * {
        box-sizing: border-box;
      }

      .wrapper {
        display: flex;
        width: 100%;
        justify-content: space-around;
      }
      
      .card {
        width: 33%;
        height: 300px;
        object-fit: cover;
        object-position: bottom;
        border-radius: 10%;

        background: white;
        position: relative;
        display: flex;
        transition: 0.4s ease-out;
        box-shadow: 0px 7px 10px rgba(0, 0, 0, 0.5);
        margin: 3%;
      }
      .card:hover {
        transform: translateY(20px);
      }
      .card:hover:before {
        opacity: 1;
      }
      .card:hover .info {
        opacity: 1;
        transform: translateY(0px);
      }
      .card:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 15px;
        background: rgba(0, 0, 0, 0.6);
        z-index: 2;
        transition: 0.5s;
        opacity: 0;
      }
      .card img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 15px;
      }
      .card .info {
        position: relative;
        z-index: 2;
        color: #EAECF4;
        text-shadow: 0 0 3px #000000, 0 0 5px #000000;
        transform: translateY(30px);
        transition: 0.5s;
        margin: 3%;
      }
      .card .info h1 {
        margin: 0px;
      }
      .card .info p {
        letter-spacing: 1px;
        font-size: 15px;
        margin-top: 8px;
      }
      .card .info button {
        padding: 0.6rem;
        outline: none;
        border: none;
        border-radius: 3px;
        background: white;
        color: black;
        font-weight: bold;
        cursor: pointer;
        transition: 0.4s ease;
      }
      .card .info button:hover {
        background: dodgerblue;
        color: white;
      }
      .tlaco2{
          margin: 2%;
      }
/*vymazani karet*/
.seznam{
  display: none;
}
@media (max-width: 830px) {
  .odsazeniKaret{
      display:none;
  }
  .seznam{
    display: inline;
    font-family:'Gill Sans', 'Gill Sans MT', 'Calibri', 'Trebuchet MS', sans-serif;
  }
}

.container .list .num {
  padding: 0.5rem 2rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  transition: 0.25s;
  
}
.container .list .num:nth-child(0):before {
  content: '0';
  font-size: 4rem;
  font-weight: bold;
  color: #30333A;
  width: 2rem;
  opacity: 0.15;
  transition: 0.25s;
}
.container .list .num:nth-child(1):before {
  content: '1';
  font-size: 4rem;
  font-weight: bold;
  color: #000;
  width: 2rem;
  opacity: 0.15;
  transition: 0.25s;
}
.container .list .num:nth-child(2):before {
  content: '2';
  font-size: 4rem;
  font-weight: bold;
  color: #000;
  width: 2rem;
  opacity: 0.15;
  transition: 0.25s;
}
.container .list .num:nth-child(3):before {
  content: '3';
  font-size: 4rem;
  font-weight: bold;
  color: #000;
  width: 2rem;
  opacity: 0.15;
  transition: 0.25s;
}
.container .list .num:nth-child(4):before {
  content: '4';
  font-size: 4rem;
  font-weight: bold;
  color: #000;
  width: 2rem;
  opacity: 0.15;
  transition: 0.25s;
}
.container .list .num:nth-child(5):before {
  content: '5';
  font-size: 4rem;
  font-weight: bold;
  color: #000;
  width: 2rem;
  opacity: 0.15;
  transition: 0.25s;
}
.container .list .num:nth-child(6):before {
  content: '6';
  font-size: 4rem;
  font-weight: bold;
  color: rgb(0, 0, 0);
  width: 2rem;
  opacity: 0.15;
  transition: 0.25s;
}
.container .list .num:nth-child(7):before {
  content: '7';
  font-size: 4rem;
  font-weight: bold;
  color: #000;
  width: 2rem;
  opacity: 0.15;
  transition: 0.25s;
}
.container .list .num:nth-child(8):before {
  content: '8';
  font-size: 4rem;
  font-weight: bold;
  color: #000;
  width: 2rem;
  opacity: 0.15;
  transition: 0.25s;
}
.container .list .num:nth-child(9):before {
  content: '9';
  font-size: 4rem;
  font-weight: bold;
  color: #000;
  width: 2rem;
  opacity: 0.15;
  transition: 0.25s;
}
.container .list .num h3 {
  position: relative;
  left: -1.5rem;
  color: #3d3d3d;
  font-size: 0.85rem;
  transition: 0.25s;
}
.container .list .num:hover {
  background-color: #ffffff;
  cursor: pointer;
}
.container .list .num:hover:before {
  opacity: 0.2;
}
.container .list .num:hover h3 {
  left: 1rem;
}

/*fotky*/
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}
#gallery {
  display: grid;
  height: calc(100vh - 10px);
  grid-template: repeat(6, 1fr)/repeat(6, 1fr);
  grid-gap: 0.5em;
  margin: 5px;
  position: relative;
  flex-wrap: wrap;
}
@media (max-width: 800px) {
  #gallery {
    display: none;
    flex-wrap: wrap;
  }
  #gallery > div {
    width: 47%;
    margin: 1%;
    
  }
}
@media (max-width: 800px) and (max-width: 350px) {
  #gallery > div {
    width: 100%;
  }
}
#gallery > div:nth-child(6n+1) {
  grid-column: span 2;
  grid-row: span 2;
}
#gallery > div:nth-child(2) {
  grid-column: span 3;
  grid-row: span 3;
}
#gallery > div:nth-child(4) {
  grid-column: span 1;
  grid-row: span 2;
}
#gallery > div > a {
  opacity: 0;
  position: absolute;
  font: bold 4em "Helvetica";
  text-shadow: 0 -1px 5px #fff, -1px 0px 5px #fff, 0 1px 5px #fff, 1px 0px 5px #fff;
  padding: 2rem;
  width: 100%;
  height: 80%;
  transition: all ease 1s;
}
#gallery > div > img {
  width: 100%;
  min-height: 100%;
  transition: all ease 1s;
}
#gallery > div:hover img {
  filter: blur(2px);
}
#gallery > div:hover a {
  opacity: 1;
  
}
#gallery > div {
  overflow: hidden;
  position: relative;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 20px 0 rgba(0, 0, 0, 0.19);
}
#gallery div,
#gallery a {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}
.grid__overlay button {
        padding: 0.6rem;
        outline: none;
        border: none;
        border-radius: 3px;
        background: white;
        color: black;
        font-weight: bold;
        cursor: pointer;
        transition: 0.4s ease;
}
.grid__overlay button:hover {
  background: #3D5388;
  color: white;
}
/*fotky2*/
*{
  margin: 0;
  padding: 0;
}
#gallery2{
  display: none;
}

#gallery2 img{
  width: 47%;
  
}
.collumn{
  text-align:center;
  margin:auto;
}
img{
  border-radius: 5px;

}
@media (max-width: 800px) {
  
  #gallery2{
    display: grid;
  }
  
}
/*scrolovani*/
.smooth {
  z-index: 1;
  width: 100%;
  height: 100%;
}
html{
  scroll-behavior: smooth;
}
/*kontakty*/
.odsazeni{
  /*padding-top: 50%;*/
}
#kontejner{
  display: flex;
  justify-content: center;
  position: relative;
}
#kontakty{
  
  width: 70%;
  color: #14171E;
  height: 400px;
  font-family: 'Crimson Text', serif;
}
#kontejner i{
  padding-top: 2%;
}
.right{
  width:55%;
    height: 100%;
    float: left;
  
}

.left{
    float: left;
    width: 45%;
    height: 100%;
}
.right iframe{
  width: 100%;
  left: 0px;
  height: 100%;
}

.kontakty{
  
}
@media (max-width: 800px) {
  #kontakty{
    height: 700px;
    width: 100%;
  }
  .left{
    float: unset;
    width: 100%;
    height: 50%;
    
  }
  .right{
    float: unset;
    width: 100%;
    height: 50%;
  }
  #firma, #phone, #email, .adresa{
    width: 47%;
    height: 47%;
    margin: 1%;
    float: left;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
  #firma i{
    visibility: hidden;
  }
  #adresa > *{
    margin: 0 auto;
  }
  #odsazeni{
    margin-top: 1px;
  }
}
@media (max-width: 550px){
  .nadpisy_kontakty{
    font-size: 20px;
  }
}

@media (max-width: 530px){
  p{
    font-size: 15px;
  }
}
@media (max-width: 450px){
  p{
    font-size: 13px;
  }
  #logoV{
    display: none;
  }
  #logoM{
    display: unset;
  }
}
@media (max-width: 600px){
  #kontakty{
    width: 100%;
  }
}

/*zkouska*/