@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,500,500i,600,700,800,900&subset=latin-ext");
html, body {
  margin:0;
  padding:0;
}
body {
  font-family:'Raleway', sans-serif;
  color:#333;
  font-size:16px;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  line-height:1.5;
}
top { display:block; }
#headerkontakt {
  background:#2e6c97;
  padding:5px 15px;
  display:flex;
  flex-wrap:wrap;
  color:white;
}
#headerkontakt aa { margin-right:30px; }
header {
  display:flex;
  padding:20px;
  justify-content:space-between;
  box-sizing:border-box;
  background:#1c5884;
  width:100%;
  flex-grow:0;
  flex-shrink:0;
  align-items:center;
  position:relative;
}
header #left-empty { width:130px; }
header #logo img {
  height:70px;
  order:1;
}
header #menu {
  order:2;
  display:flex;
  margin:0 auto 0 auto;
}
header #menu a, header #menu aa {
  display:block;
  margin:0 30px 0 30px;
  color:white;
  font-size:15px;
  text-align:center;
}
header #menu a img, header #menu aa img { height:40px; }
header #menu a h3, header #menu aa h3 {
  margin:0;
  padding:0;
  font-size:18px;
  text-transform:uppercase;
  font-weight:400;
  color:white;
  line-height:15px;
  margin-top:0px;
}
header #kosik {
  order:5;
  width:100px;
  display:block;
}
header #kosik a {
  display:block;
  text-align:center;
  color:#fff;
  transition:all 0.3s;
}
header #kosik a img {
  height:45px;
  margin-bottom:10px;
}
header #kosik a small { display:block; }
header #kosik a:hover {
  text-decoration:none;
  background:rgba(255,255,255,0.25);
}
header #user, header #sortiment {
  order:4;
  width:100px;
  display:block;
  text-align:center;
  color:#fff;
  transition:all 0.3s;
}
header #user img, header #sortiment img {
  height:45px;
  margin-bottom:10px;
}
header #user small, header #sortiment small { display:block; }
header #user:hover, header #sortiment:hover {
  text-decoration:none;
  background:rgba(255,255,255,0.25);
}
header #sortiment { order:3; }
header #kategorie {
  display:none;
  background:#1c5884;
  color:white;
  z-index:20;
  padding:20px 30px 10px 30px;
  position:absolute;
  right:0px;
  top:110px;
}
header #kategorie a {
  display:block;
  text-align:left;
  margin-bottom:10px;
  color:white;
}
main {
  width:1024px;
  margin:40px auto auto auto;
}
main h1 { color:black; }
bottom {
  display:block;
  background-image:url(footerbk.jpg);
  background-size:cover;
  background-position:50% 50%;
}
footer {
  display:flex;
  background:rgba(246,244,241,0.8);
  padding:30px;
  justify-content:space-around;
  margin-top:auto;
}
footer article {
  width:300px;
  margin:20px;
}
footer article.f2 {
  order:1;
  text-align:left;
  font-size:11px;
  line-height:1.3em;
}
footer article.f2 img {
  height:80px;
  margin-bottom:15px;
}
footer article h3 {
  font-size:15px;
  color:#333;
  font-weight:700;
  margin-top:0;
  line-height:1.2em;
}
footer article a {
  display:block;
  color:#333;
}
footer article.f1 {
  order:2;
  text-align:left;
}
footer article.f3 { order:3; }
footer article.f4 { order:4; }
#copyright {
  padding:4px;
  background:rgba(246,244,241,0.8);
  color:#333;
  text-align:right;
  font-size:11px;
}
#copyright a { color:inherit; }
@media screen and (max-width: 768px) {
  header {
    padding:20px;
    flex-wrap:wrap;
  }
  header #left-empty { display:none; }
  header #logo img {
    width:50vw;
    height:auto;
  }
  header #logo { order:1; }
  header #user, header #sortiment {
    order:3;
    width:auto;
    flex-shrink:0;
  }
  header #user img, header #sortiment img { height:25px; }
  header #user small, header #sortiment small { display:none; }
  header #sortiment { order:2; }
  header #kosik {
    order:4;
    width:auto;
    flex-shrink:0;
  }
  header #kosik a img { height:25px; }
  header #menu {
    display:none;
    order:5;
    padding-top:10px;
    flex-wrap:wrap;
  }
  header #menu a, header #menu aa {
    font-size:12px;
    margin:0 6px 0px 0px;
  }
  header #menu a img, header #menu aa img { height:20px; }
  header #menu a h3, header #menu aa h3 { font-size:12px; }
  footer {
    display:flex;
    flex-direction:column;
  }
  footer article { width:auto; }
  footer article.f2 { order:1; }
  footer article.f1 {
    order:2;
    text-align:left;
  }
  footer article.f3 {
    order:3;
    text-align:left;
  }
  main {
    width:auto;
    padding:10px;
  }
}
body.home top { position:relative; }
body.home banner { display:block; }
body.home .slider article {
  z-index:1;
  position:relative;
}
body.home .slider article:after {
  position:absolute;
  left:0;
  top:0;
  right:0;
  bottom:0;
  background:linear-gradient(80deg,rgba(59,42,152,0.5) 0%,rgba(0,163,211,0.5) 100%);
  display:block;
  content:'';
  z-index:2;
}
body.home .slider article .slidecontent {
  z-index:3;
  position:absolute;
  left:0;
  top:0;
  right:0;
  bottom:0;
  display:flex;
  justify-content:center;
  align-items:center;
}
body.home .slider article .slidecontent in {
  max-width:60vw;
  display:block;
}
body.home .slider article .slidecontent h1, body.home .slider article .slidecontent h2 { font-weight:800; }
.slider, .slider article { height:40vw; }
#home-text {
  background:#1c5884;
  padding:30px;
  color:white;
  font-size:15px;
  line-height:1.33em;
}
#home-text article {
  max-width:800px;
  margin:0 auto;
}
@media screen and (min-width: 768px) {
  body.home block, body.home .slider, body.home .slider article { height:80vh; }
  body.home header {
    position:absolute;
    left:0;
    top:0;
    right:0;
    z-index:10;
    background:rgba(28,88,132,0.6);
  }
  body.home .slidecontent {
    line-height:1.5em;
    font-size:20px;
    font-weight:500;
    padding-bottom:300px;
    padding-left:350px;
  }
  body.home .slidecontent h1 {
    font-size:60px;
    line-height:80px;
  }
  body.home .slidecontent h2 {
    font-size:40px;
    line-height:60px;
  }
  #intro-text {
    background:rgba(28,88,132,0.6);
    position:absolute;
    z-index:5;
    left:0;
    bottom:0px;
    right:0;
    padding:30px;
    color:white;
    font-size:15px;
    line-height:1.33em;
    box-sizing:border-box;
  }
  #intro-kategorie {
    z-index:5;
    left:0px;
    top:130px;
    position:absolute;
  }
  #intro-kategorie a {
    display:block;
    background:rgba(0,0,0,0.16);
    padding:2px 20px 2px 30px;
    width:320px;
    color:white;
    text-transform:uppercase;
    font-size:14px;
    font-weight:500;
    margin-bottom:4px;
    transition:all 0.3s;
    border-top-right-radius:10px;
    border-bottom-right-radius:10px;
  }
  #intro-kategorie a:hover {
    text-decoration:none;
    background:black;
    padding-left:40px;
  }
  footer .f4 { display:none; }
}
@media screen and (max-width: 768px) {
  body.home block, body.home .slider, body.home .slider article { height:100vw; }
  body.home #intro-text, body.home #home-text {
    background:#1c5884;
    color:white;
    padding:20px;
    font-size:11px;
    line-height:1.3em;
  }
  body.home #intro-kategorie {
    background:#16466a;
    padding:20px 0 20px 0;
  }
  body.home #intro-kategorie a {
    display:block;
    padding:2px 20px 2px 20px;
    color:white;
    font-weight:700;
    text-transform:uppercase;
    font-size:14px;
  }
}
#home-banner { margin:40px 0 40px 0; }
section.kontakt {
  display:flex;
  margin-bottom:20px;
  justify-content:space-between;
}
section.kontakt article { width:48%; }
section.kontakt iframe {
  width:48%;
  height:350px;
  border:none;
}
@media screen and (max-width: 768px) {
  section.kontakt { display:block; }
  section.kontakt article, section.kontakt iframe { width:100%; }
}
.slick-prev:before, .slick-next:before {
  color:#00a3d3 !important;
  opacity:1;
}
#search { display:flex; }
#search input {
  margin:0 10px 0 0;
  background:none;
  border:2px solid white;
  border-radius:20px;
  color:white;
  box-shadow:none;
}
#search button {
  font-size:25px;
  color:white;
  background:none;
  border:none;
}