@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;500;600;700;800;900&display=swap');
*,body{margin:0;padding: 0;}
body{background-color: #1B1924;    line-height: 1.1;font-family: 'Kanit', sans-serif;color:white;}
.uvod{background:url(background.png);padding-top:200px;padding-bottom: 0px;background-size: cover;color: #DCD9C6;}
h1{font-weight: 400;font-size: 40px;margin-left: -30px;position: relative;z-index: 9998;}
.uvod .page-wrap{display: grid;grid-template-columns: 40% 60%;    align-items: center;}
.page-wrap{max-width:1350px;width: auto;margin: 0 auto;}
section img{width: 100%;}
.page-wrap section{margin-bottom: -100px;}
.sec2{text-align: center;color: white;padding-top: 100px;padding-bottom: 100px;clip-path: polygon(0 5%, 100% 0%, 100% 95%, 0% 100%);background-color: #74593D;margin-top: 200px;margin-bottom: 50px;}
p{font-size: 24px;}
.sed3 section {padding: 1em;}
.sed3 {padding-bottom: 250px;padding-top: 150px;}
.sed3 .page-wrap{display: grid;grid-template-columns: 45% 55%;align-items: center;max-width: 1150px;}
.kontakt{clip-path: polygon(0 5%, 100% 0%, 100% 100%, 0% 100%);background-color: #74593D;padding-top: 150px;padding-bottom:30px;text-align: center;font-weight: 700;font-weight: 400;}

p.big{font-size: 140px;opacity: 0.1;font-weight: 700;}
p.contact{position: relative;z-index: 10;margin-top: -50px;}
p.biggest{font-size: 32px;font-weight: 700;padding-top: 1em;padding-bottom: 200px;}
.kontakt p.page-wrap {font-size: 15px;border-top: 2px solid white;}
.maps img {width: 100%;padding-bottom: 150px;}
.sec4.page-wrap{max-width: 800px;padding-bottom: 150px;}

@keyframes showing {
    0%    { opacity: 0;transform: translateY(150px); }
    100%  { opacity: 1;transform: translateY(0); }
  }
.reveal-load{ position: relative;
    -webkit-animation: showing 1s ease; /* Safari 4+ */
  -moz-animation:    showing 1s ease; /* Fx 5+ */
  -o-animation:      showing 1s ease; /* Opera 12+ */
  animation:         showing 1s ease; /* IE 10+, Fx 29+ */}


.reveal{
    position: relative;
    transform: translateY(150px);
    opacity: 0;
    transition: 1s all ease;
  }
  
  .reveal.active{
    transform: translateY(0);
    opacity: 1;
  }

  nav{position:fixed;z-index: 9999;top: 30px;left: 2em;}
  nav a{padding-right:1em;}
  nav img{filter: grayscale(1);}
  nav img.active{filter: grayscale(0);}
  nav a img:hover{filter: grayscale(0);}
  a{color: white;}

  @media screen and (max-width: 1350px)  {
      .page-wrap, .uvod .page-wrap{max-width:1150px;}
      .sed3 .page-wrap {max-width: 900px;}
  }

  @media screen and (max-width: 1150px)  {
    .page-wrap, .uvod .page-wrap{max-width:900px;}
    .sed3 .page-wrap {max-width: 750px;}
    p{font-size: 20px;}
    h1{font-size: 32px;}
    p.biggest{font-size: 25px;}
    p.big{font-size: 90px;}
}

@media screen and (max-width: 800px)  {
  .page-wrap, .uvod .page-wrap{grid-template-columns: 100%;padding: 1em;}
  .sed3 .page-wrap {grid-template-columns: 100%;padding: 1em;}
  p{font-size: 20px;}
  h1{font-size: 32px;margin-bottom: -30px;}
  p.biggest{font-size: 25px;}
  p.big{font-size: 90px;}
  .page-wrap section{margin-bottom:auto;}
  h1{margin-left: 0;font-size: 28px;}
  .sec2{margin-top: 50px;}
  .sed3{padding-top: 70px;padding-bottom: 50px;}
  .sec4.page-wrap{padding-bottom: 50px;}
  .maps img{padding-bottom:50px;}
  p.biggest{padding-bottom: 70px;}
  p.big{font-size: 50px;}
  p.contact{    margin-top: -20px;}
}