html, body {
  margin:0;
  padding:0;
}
body {
  color:#000;
  background-color:#fff;
  font-size:16px;
  font-family:'Open Sans';
}
header {
  background-image:linear-gradient(black,#333);
  display:block;
  text-align:center;
}
header #logo {
  display:block;
  padding:30px 0 30px 0;
}
header #menu {
  display:flex;
  padding-bottom:30px;
  justify-content:center;
}
header #menu a {
  color:#808080;
  text-transform:uppercase;
  font-family:'Merriweather';
  margin:0 15px 0 15px;
  transition:all 0.3s;
}
header #menu a:hover {
  text-decoration:none;
  color:red;
}
header #hamburger {
  display:none;
  padding-bottom:20px;
  color:#808080;
  font-size:40px;
}
footer {
  padding:30px;
  color:#fff;
  background-color:#333;
  display:grid;
  grid-template-columns:repeat(3,366px);
  justify-content:center;
  grid-gap:30px;
}
footer .fc { text-align:right; }
footer .f3 nav a {
  display:block;
  margin-bottom:12px;
}
footer a { color:inherit; }
footer a:hover { color:red; }
footer .f2 {
  display:flex;
  align-items:center;
  mix-blend-mode:luminosity;
  filter:brightness(6);
}
@media screen and (min-width: 768px) {
  footer .fc {
    grid-column-start:1;
    grid-column-end:span 3;
  }
  footer .f3 nav a { text-align:right; }
}
@media screen and (max-width: 768px) {
  header #hamburger { display:block; }
  header #menu { display:none; }
  header #menu a {
    display:block;
    margin-bottom:15px;
  }
  footer { grid-template-columns:1fr; }
  footer .f2 { grid-row-start:1; }
}
#kontakty {
  padding:30px;
  color:#000;
  background-image:linear-gradient(#f2f2f2,white);
  display:grid;
  grid-template-columns:repeat(2,560px);
  justify-content:center;
  grid-gap:40px;
  line-height:1.6em;
}
#kontakty a {
  color:#d1021c;
  display:block;
  font-size:1.4rem;
}
#kontakty h2 {
  font-weight:400;
  color:#4d4d4d;
  font-family:Merriweather, serif;
}
@media screen and (max-width: 768px) {
  #kontakty { grid-template-columns:1fr; }
}
.kontakt-form { padding-top:30px; }
.kontakt-form input, .kontakt-form textarea {
  font-size:16px;
  box-sizing:border-box;
  box-shadow:none;
  border:none;
  width:100%;
  height:auto;
  line-height:20px;
  padding:10px;
  background-color:#f2f2f2;
  margin-bottom:10px;
}
.kontakt-form textarea { height:100px; }
.kontakt-form button {
  color:#d1021c;
  border:2px solid #d1021c;
  padding:10px 20px;
  width:fit-content;
  display:block;
  margin:20px auto 0 auto;
  text-transform:uppercase;
  background:none;
  border-radius:30px;
}
.kontakt-form .mailform-success {
  padding:15px;
  background:green;
  color:white;
}
.cta {
  color:inherit;
  font-size:inherit;
  border:2px solid currentColor;
  padding:10px 20px;
  width:fit-content;
  display:block;
  margin:20px auto 0 auto;
  text-transform:uppercase;
  background:none;
  border-radius:30px;
  transition:all 0.3s;
}
.cta:hover {
  transform:scale(1.2);
  color:currentColor;
  text-decoration:none;
}
#banner {
  background-image:linear-gradient(0deg,rgba(0,0,0,0.65),rgba(0,0,0,0.65)), url(44574906-0.jpeg);
  background-position:50% 85.43%;
  background-size:cover;
  display:grid;
  padding:30px;
  grid-template-columns:repeat(2,560px);
  justify-content:center;
  grid-gap:40px;
  line-height:1.6em;
}
#banner .banner-img {
  display:flex;
  align-items:center;
  justify-content:center;
}
#banner .banner-img img { width:90%; }
#banner .banner-txt {
  background-color:rgba(234,13,3,0.8);
  color:white;
  padding:30px;
}
#banner .banner-txt .cta {
  font-family:'Roboto Condensed';
  font-weight:bold;
  letter-spacing:5px;
}
#banner .banner-txt h2, #banner .banner-txt h1 {
  font-size:inherit;
  text-transform:uppercase;
  letter-spacing:3px;
  font-weight:700;
  margin:0 0 30px 0;
  font-size:1.25rem;
  line-height:1.2;
  font-family:Merriweather, serif;
  color:white;
}
#banner .banner-txt h1 {
  font-size:3.75rem;
  font-weight:normal;
}
@media screen and (max-width: 768px) {
  #banner .banner-txt h1 { font-size:2.5rem; }
  #banner { padding:0 0 30px 0; }
  header {
    padding-left:20px;
    padding-right:20px;
  }
}
#aktuality h2, #ponuka h2 {
  font-weight:400;
  font-size:3rem;
  color:#404040;
  font-family:Merriweather, serif;
  line-height:1.2em;
  margin-bottom:30px;
}
#aktuality {
  background-image:linear-gradient(#f2f2f2,white);
  padding:30px;
  justify-content:center;
  display:grid;
  grid-template-columns:1160px;
}
#ponuka {
  padding:30px;
  background-image:linear-gradient(#720606,#b01313);
  display:grid;
  grid-template-columns:repeat( 4, 300px );
  grid-gap:15px;
  justify-content:center;
}
#ponuka h2 {
  color:white;
  grid-column:1/-1;
  text-align:center;
}
#ponuka article {
  padding:30px;
  display:flex;
  flex-direction:column;
  align-items:center;
  background-color:#404040;
  color:white;
}
#ponuka article img {
  display:block;
  width:80px;
  height:80px;
  object-fit:cover;
  padding:10px;
  box-sizing:border-box;
  overflow:hidden;
  border-radius:50px;
  border:2px solid white;
  margin-bottom:20px;
  text-indent:-10000px;
}
#ponuka article h3 {
  font-family:Merriweather, serif;
  font-size:28px;
  line-height:1.3em;
  margin-bottom:20px;
  color:white;
  text-align:center;
}
#ponuka article detail {
  font-style:italit;
  line-height:1.3em;
  margin-bottom:auto;
  text-align:center;
}
main {
  box-sizing:border-box;
  padding:30px;
  width:1180px;
  margin:0 auto 0 auto;
  max-width:100vw;
  line-height:1.4em;
}
.c-head {
  display:grid;
  grid-template-columns:50% 50%;
  min-height:35vw;
  margin-bottom:50px;
  box-shadow:0px 0px 50px 1px rgba(0,0,0,0.2);
}
.c-head .c-title {
  background-size:cover;
  background-position:50% 50%;
  padding:30px;
}
.c-head .c-title h1 {
  font-size:55px;
  color:white;
  line-height:1.4em;
  font-family:Merriweather, serif;
  font-weight:900;
  text-shadow:0px 0px 2px black, 0px 0px 5px black, 0px 0px 10px black, 0px 0px 25px black;
}
.c-head .c-info {
  background:#f2f2f2;
  padding:30px;
}
.c-head .c-info h4, .c-head .c-info h5, .c-head .c-info h6 {
  font-family:Merriweather, serif;
  line-height:1.5em;
  color:#d1021c;
}
@media screen and (max-width: 768px) {
  #kontakty, #banner, #aktuality, #ponuka, .c-head { grid-template-columns:1fr; }
  #aktuality h2 { font-size:2.2rem; }
}
@media screen and (min-width: 768px) {
  .c-text {
    column-count:2;
    column-gap:30px;
    text-align:justify;
    margin-bottom:30px;
    color:#404040;
    font-size:14px;
    line-height:1.5em;
  }
}