/* === Vinotéka Klánovice theme tokens === */
:root {
  --vk-conv: #C64A2A;
  --vk-conv-hover: #E07A5F;
  --vk-c1: #1F2933;
  --vk-c2: #F7F5F2;
  --vk-c3: #7A8F5A;
  --vk-c4: #D6C9A8;
  --vk-white: #FFFFFF;
}

/* Typography */
body {
  font-family: 'Open Sans', sans-serif;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Exo 2', sans-serif;
}

/*FOOTER*/
#footer {
  background-color: var(--vk-c1);
}
#footer>.container {
  background-color: transparent;
}
.custom-footer {
  border: none;
}
#footer .site-name {
  display: none;
}
@media (min-width: 1200px) {
  .custom-footer {
    justify-content: center;
    padding-left: 0px;
    display: flex;
  }
}
@media (min-width: 995px) {
  .custom-footer>div {
    width: 20%;
  }
}
@media (max-width: 994px) {
  .custom-footer>div {
    width: 100%;
  }
}
.footer-rows+.footer-bottom {
  color: #FFFFFF;
}
#signature a {
  color: #FFFFFF;
}
#signature a:hover {
  color: var(--vk-conv);
}

@media (min-width: 768px) {
  .copyright {
    width: 100%;
    text-align: center;
  }
  #signature {
    text-align: center;
  }
}
#signature a img {
  width: 18px;
}
#signature img {
  margin-right: 0px;
}
.custom-footer>div.extended {
  text-align: center;
  color: #FFFFFF !important;
}
.custom-footer>div.extended:before {
  content: ""; /* This is necessary for the pseudo element to work. */ 
  display: block; /* This will put the pseudo element on its own line. */
  margin: 0 auto; /* This will center the border. */
  width: 50%; /* Change this to whatever width you want. */
  padding-bottom: 30px; /* This creates some space between the element and the border. */
  border-style: solid;
  border-top-width: 1px;
  border-bottom-width: 0px;
  border-left-width: 0px;
  border-right-width: 0px;
  border-color: var(--vk-conv);
}
.custom-footer>div.extended:after {
  content: ""; /* This is necessary for the pseudo element to work. */ 
  display: block; /* This will put the pseudo element on its own line. */
  margin: 0 auto; /* This will center the border. */
  width: 50%; /* Change this to whatever width you want. */
  padding-top: 30px; /* This creates some space between the element and the border. */
  border-style: solid;
  border-top-width: 0px;
  border-bottom-width: 1px;
  border-left-width: 0px;
  border-right-width: 0px;
  border-color: var(--vk-conv);
}
.custom-footer>div.extended a {
  color: #FFFFFF !important;
}
#footer h4 {
  color: #FFFFFF;
}
/*úprava search action*/
.compact-form .validator-msg-holder input {
  background-color: transparent;
  border-radius: 4px;
  border-color: #FFFFFF;
  border-width: 2px;
}
.compact-form .validator-msg-holder input:focus {
  background-color: #FFFFFF;
  border-radius: 4px;
  border-color: #FFFFFF;
  border-width: 2px;
}
.compact-form .validator-msg-holder input::placeholder {
  color: #FFFFFF;
}
.compact-form .validator-msg-holder input:focus::placeholder {
  color: var(--vk-c3);
}
#footer .banner {
  margin-bottom: 20px;
}
@media (max-width: 994px) {
  .banner {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center;
    min-height: auto !important;
  }
  #signature {
    margin-top: 10px;
    margin-bottom: 0px;
  }
}