@font-face {
  font-family: "bureau";
  src: url("../fonts/bureau.eot");
  src: url("../fonts/bureau.eot?#iefix") format("embedded-opentype"), url("../fonts/bureau.woff") format("woff"), url("../fonts/bureau.ttf") format("truetype");
  font-style: italic;
}
@font-face {
  font-family: "caflisch";
  src: url("../fonts/caflisch.eot");
  src: url("../fonts/caflisch.eot?#iefix") format("embedded-opentype"), url("../fonts/caflisch.woff") format("woff"), url("../fonts/caflisch.ttf") format("truetype");
  font-style: italic;
}
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%;
  font-family: Arial, Verdana, Helvetica, sans-serif;
}

body {
  background: #ede7de;
  font-size: 1.3rem;
}

h1 {
  font-size: 2.5rem;
  margin-bottom: 40px;
  font-family: "bureau", Arial, sans-serif;
}

h2 {
  font-weight: bold;
  font-size: 2.4rem;
  margin-bottom: 30px;
}

img {
  border: 0;
  max-width: 100%;
  height: auto !important;
}

p {
  margin: 0;
}

a:link {
  color: #000;
  text-decoration: none;
}

a:visited {
  color: #000;
  text-decoration: none;
}

a:hover {
  color: #0e0b0c;
  text-decoration: underline;
}

a:active {
  color: #000;
  text-decoration: none;
}

section {
  position: relative;
  padding: 30px 30px 30px 0;
  border: 1px #000 solid;
  border-left: none;
  border-radius: 50px;
  margin: 30px 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
@media screen and (max-width: 74.9375em) {
  section {
    margin: 30px 20px;
  }
}

/*** INDEX ***/
#content {
  max-width: 1100px;
  margin: 0 auto;
}

header {
  height: 38.4rem;
  background: url("../img/header-container.jpg");
  background-repeat: repeat-x;
  font-size: 2rem;
  font-family: "bureau", Arial, sans-serif;
}
@media screen and (max-width: 74.9375em) {
  header {
    height: 27.4rem;
    background: url("../img/header-container-1000.jpg");
  }
}
header #content {
  height: 38.4rem;
  max-width: 1400px;
  margin: 0 auto;
  background: url("../img/header.jpg");
  background-repeat: no-repeat;
  background-position: top center;
  position: relative;
}
@media screen and (max-width: 74.9375em) {
  header #content {
    background: url("../img/header-1000.jpg");
    background-repeat: no-repeat;
    background-position: top center;
    max-width: 1000px;
    height: 27.4rem;
  }
}
@media screen and (max-width: 61.9375em) {
  header #content {
    background: #250d09;
    background-repeat: no-repeat;
    background-position: top center;
    max-width: 1000px;
    height: 27.4rem;
  }
}
header #content .logo {
  padding-top: 4rem;
  padding-left: 6rem;
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 74.9375em) {
  header #content .logo {
    padding-top: 3rem;
    padding-left: 13rem;
  }
}
@media screen and (max-width: 61.9375em) {
  header #content .logo {
    display: block;
    text-align: center;
    padding: 2rem 0;
  }
}
@media screen and (max-width: 74.9375em) {
  header #content .logo .logo-img {
    height: 44px;
    width: 172px;
  }
}
header #content .home {
  font-family: Arial, Verdana, Helvetica, sans-serif;
  font-size: 1.3rem;
  text-align: right;
  padding-right: 6.7rem;
  padding-top: 0;
}
@media screen and (max-width: 74.9375em) {
  header #content .home {
    padding-right: 13.7rem;
    margin-top: -1rem;
  }
}
@media screen and (max-width: 61.9375em) {
  header #content .home {
    display: none;
  }
}
header #content .home a {
  color: #fff;
}
header #content > div {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0rem 0 0rem 8rem;
}
header #content > div a {
  color: #85b724;
}
header #content > div a:hover {
  text-decoration: none;
}
header #content .green {
  color: #85b724;
}
header #content .menu {
  font-size: 2.2rem;
  color: #fff;
  padding: 2rem 0 0rem 7rem;
}
@media screen and (max-width: 74.9375em) {
  header #content .menu {
    font-size: 1.6rem;
    padding: 0.6rem 0 0rem 9rem;
  }
}
@media screen and (max-width: 61.9375em) {
  header #content .menu {
    display: block;
    text-align: center;
    padding: 0;
    background: #ebe3d8;
    border-radius: 1rem;
    margin: 0 2%;
  }
}
header #content .phone {
  font-size: 3rem;
}
@media screen and (max-width: 74.9375em) {
  header #content .phone {
    font-size: 2rem;
  }
}
header #content .mail {
  font-size: 2rem;
}
@media screen and (max-width: 74.9375em) {
  header #content .mail {
    font-size: 1.8rem;
  }
}
header #content .questions {
  padding: 4rem 0 0rem 8rem;
  color: #fff;
}
@media screen and (max-width: 74.9375em) {
  header #content .questions {
    font-size: 2rem;
    padding: 2rem 0 0 14rem;
  }
}
@media screen and (max-width: 61.9375em) {
  header #content .questions {
    padding: 1rem 0;
    text-align: center;
  }
}
header #content ul {
  list-style: none;
  padding: 3px 0 0 0;
  margin: 0;
}
@media screen and (max-width: 74.9375em) {
  header #content ul {
    padding: 10px 0 0 40px;
  }
}
@media screen and (max-width: 61.9375em) {
  header #content ul {
    padding: 1rem 0 1rem 0;
  }
}
header #content ul li {
  display: inline-block;
  width: 100px;
  height: 32px;
  text-align: center;
}
@media screen and (max-width: 74.9375em) {
  header #content ul li {
    padding-top: 4px;
  }
}
header #content ul li a {
  color: #231f20;
}
header #content ul li a:hover {
  color: #594f51;
  text-decoration: none;
}
header #content ul li.active {
  background: url("/img/menu.png");
  color: #fff;
}
header #content ul li.active a {
  color: #fff;
}
header #content ul li.active a:hover {
  text-decoration: none;
}

footer {
  height: 13.9rem;
  background: url("../img/footer-container.jpg");
  background-repeat: repeat-x;
  color: #fff;
}
footer a:link {
  color: #9d8b76;
}
footer a:active {
  color: #9d8b76;
}
footer a:visited {
  color: #9d8b76;
}
footer a:hover {
  color: #655848;
  -webkit-text-decoration: navajowhite;
          text-decoration: navajowhite;
}
footer #content {
  height: 13.9rem;
  max-width: 1400px;
  margin: 0 auto;
  background: url("../img/footer.jpg");
  background-repeat: no-repeat;
  background-position: top center;
}
@media screen and (max-width: 47.9375em) {
  footer #content {
    background: url("../img/footer-container.jpg") #250d09;
    background-repeat: repeat-x;
    height: auto;
    text-align: center;
  }
}
footer #content > div {
  max-width: 1100px;
  margin: 0 auto;
  padding-top: 5.6rem;
}
@media screen and (max-width: 47.9375em) {
  footer #content > div {
    padding-top: 2.6rem;
  }
}
footer #content > div .cks {
  font-size: 1rem;
}
footer #content > div ul {
  list-style: none;
  color: #9d8b76;
  text-align: right;
}
@media screen and (max-width: 47.9375em) {
  footer #content > div ul {
    text-align: center;
  }
}
footer #content > div ul li {
  display: inline-block;
}
footer #content .copyright {
  font-size: 1.3rem;
}
@media screen and (max-width: 47.9375em) {
  footer #content .copyright {
    margin-bottom: 1rem;
  }
}
footer #content .counter {
  color: #665e54;
  text-align: right;
}
@media screen and (max-width: 47.9375em) {
  footer #content .counter {
    text-align: center;
    margin-bottom: 1rem;
  }
}

#offer h1 {
  position: absolute;
  top: -15px;
  left: 0;
  background: #ede7de;
  width: 350px;
  font-weight: normal;
}
#offer .categories {
  position: relative;
}
@media screen and (max-width: 74.9375em) {
  #offer .categories {
    display: flex;
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 47.9375em) {
  #offer .categories {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: center;
  }
}
#offer .categories .metka {
  position: absolute;
  right: -10px;
  top: -32px;
  z-index: 100;
}
@media screen and (max-width: 47.9375em) {
  #offer .categories .metka {
    display: none;
  }
}
#offer .categories .break {
  width: 100%;
}
#offer .categories .category {
  margin-right: 2rem;
  margin-bottom: 4rem;
  float: left;
}
@media screen and (max-width: 61.9375em) {
  #offer .categories .category {
    /*    min-width: auto !important;
        width: auto !important;*/
  }
}
#offer .categories .category a {
  text-decoration: none;
}
#offer .categories .category a:hover img {
  opacity: 0.7;
}
#offer .categories .category .category-title {
  color: #71981f;
  font-family: "caflisch", Arial, sans-serif;
  font-size: 2.4rem;
}
#offer .categories .category .category-body {
  font-size: 1.3rem;
  text-wrap: normal;
}

#products h1 {
  position: absolute;
  top: -15px;
  left: 0;
  background: #ede7de;
  width: 200px;
  font-weight: normal;
}
#products ul {
  list-style: none;
}
#products ul li {
  display: inline-block;
  height: 40px;
  text-align: center;
  background: #ece5dd;
  border-radius: 0.5rem;
  border: 1px #ece5dd solid;
  position: relative;
  line-height: 38px;
  margin-bottom: 1rem;
  min-width: 120px;
}
#products ul li a {
  width: 100%;
  display: inline-block;
  padding: 0 2rem;
  position: relative;
}
#products ul li a:hover {
  text-decoration: none;
}
#products ul li a:before {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  right: 1px;
  bottom: 1px;
  border: 1px solid #fff;
  border-radius: 0.5rem;
}
#products ul li:hover {
  background: #f3eeea;
}
#products ul li.active {
  background: #85b724;
  border-radius: 0.5rem;
  border: 1px #7aac15 solid;
  position: relative;
  color: #fff;
}
#products ul li.active a {
  color: #fff;
}
#products .products {
  margin-top: 2rem;
}
#products .product {
  text-align: center;
  margin-bottom: 2rem;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
}
#products .product:hover a {
  text-decoration: none;
}
#products .product img {
  border: 1px #ccc solid;
}
#products .product img:hover {
  border: 1px #999999 solid;
}
#about h1 {
  position: absolute;
  top: -15px;
  left: 0;
  background: #ede7de;
  width: 150px;
  font-weight: normal;
}

#contact h1 {
  position: absolute;
  top: -15px;
  left: 0;
  background: #ede7de;
  width: 150px;
  font-weight: normal;
}
#contact .body {
  max-width: 32rem;
}
#contact #map_canvas {
  margin-top: 3rem;
  width: 100%;
  height: 38rem;
}

#contact-form {
  font-family: Arial, Verdana, Helvetica, sans-serif;
  font-size: 1.2rem;
  overflow: hidden;
}
@media screen and (max-width: 640px) {
  #contact-form {
    margin-bottom: 2rem;
  }
}
#contact-form .contact-form-sent {
  color: red;
  padding: 1rem 0;
}
#contact-form label {
  text-align: center;
  font-weight: bold;
  margin-top: 1rem;
}
#contact-form label.error {
  display: none;
  color: red;
}
#contact-form .checkbox {
  font-size: 0.9rem;
  display: flex;
}
#contact-form .captcha {
  display: flex;
  justify-content: flex-end;
  margin: 1rem 0;
}
#contact-form .form-control, #contact-form .form-group {
  margin-bottom: 0.3rem;
}
#contact-form .form-control input, #contact-form .form-group input {
  background: #fff;
  margin-bottom: 0rem;
  padding-left: 0.4rem;
  border: 1px #ccc solid;
  height: 30px;
  font-size: 1.2rem;
}
#contact-form .form-control input:focus, #contact-form .form-group input:focus {
  background: #f0f0f0;
  outline: none;
  box-shadow: none;
}
#contact-form .form-control input[type=checkbox], #contact-form .form-group input[type=checkbox] {
  margin-right: 1rem;
}
#contact-form .form-control input::-webkit-input-placeholder, #contact-form .form-group input::-webkit-input-placeholder {
  color: #999999;
  text-align: left;
  font-size: 1.2rem;
}
#contact-form .form-control input::-moz-placeholder, #contact-form .form-group input::-moz-placeholder {
  color: #999999;
  text-align: left;
  font-size: 1.2rem;
}
#contact-form .form-control input:-ms-input-placeholder, #contact-form .form-group input:-ms-input-placeholder {
  color: #999999;
  text-align: left;
  font-size: 1.2rem;
}
#contact-form .form-control input::-ms-input-placeholder, #contact-form .form-group input::-ms-input-placeholder {
  color: #999999;
  text-align: left;
  font-size: 1.2rem;
}
#contact-form .form-control input::placeholder, #contact-form .form-group input::placeholder {
  color: #999999;
  text-align: left;
  font-size: 1.2rem;
}
#contact-form .form-control textarea, #contact-form .form-group textarea {
  background: #fff;
  margin-bottom: 15px;
  color: #000;
  padding-left: 0.4rem;
  padding-top: 0.4rem;
  border: 1px #ccc solid;
}
#contact-form .form-control textarea:focus, #contact-form .form-group textarea:focus {
  background: #f0f0f0;
  outline: none;
  box-shadow: none;
  font-size: 1.2rem;
  color: #000;
}
#contact-form .form-control textarea::-webkit-input-placeholder, #contact-form .form-group textarea::-webkit-input-placeholder {
  color: #999999;
  text-align: left;
  font-size: 1.2rem;
}
#contact-form .form-control textarea::-moz-placeholder, #contact-form .form-group textarea::-moz-placeholder {
  color: #999999;
  text-align: left;
  font-size: 1.2rem;
}
#contact-form .form-control textarea:-ms-input-placeholder, #contact-form .form-group textarea:-ms-input-placeholder {
  color: #999999;
  text-align: left;
  font-size: 1.2rem;
}
#contact-form .form-control textarea::-ms-input-placeholder, #contact-form .form-group textarea::-ms-input-placeholder {
  color: #999999;
  text-align: left;
  font-size: 1.2rem;
}
#contact-form .form-control textarea::placeholder, #contact-form .form-group textarea::placeholder {
  color: #999999;
  text-align: left;
  font-size: 1.2rem;
}
#contact-form .form-control button, #contact-form .form-group button {
  background: #85b724;
  border-radius: 0.5rem;
  padding: 0.4rem 3rem 0.4rem 3rem;
  border: 0px;
  box-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.3);
  color: #fff;
  font-size: 1.9rem;
  position: relative;
}
#contact-form .form-control button:hover, #contact-form .form-group button:hover {
  background: #476213;
  text-decoration: none;
}
#contact-form .form-control button:before, #contact-form .form-group button:before {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  right: 1px;
  bottom: 1px;
  border: 1px solid #fff;
  border-radius: 0.5rem;
}

#cks-info h1 {
  position: absolute;
  top: -15px;
  left: 0;
  background: #ede7de;
  width: 150px;
  font-weight: normal;
}
#cks-info .text {
  padding: 0 5rem 2rem 7rem;
}
@media screen and (max-width: 800px) {
  #cks-info .text {
    padding: 0 2rem 2rem 2rem;
  }
}

label.error {
  color: red;
  padding-top: 2px;
}

.sent-message {
  color: red;
  padding-top: 2px;
  margin-bottom: 20px;
}

.error-container {
  padding: 5rem;
}

.alert ul {
  padding-left: 1rem;
}