@font-face {
  font-family: 'Zvon';
  font-weight: 400;
  font-style: normal;
  src: url("../fonts/zvon-regular.woff2") format('woff2');
}

@font-face {
  font-family: 'Zvon';
  font-weight: 700;
  font-style: normal;
  src: url("../fonts/zvon-bold.woff2") format('woff2');
}

/*!---------- Custom Styles Here ----------*/
.logo{ max-height: 150px; }

h1, h2, h3, h4, h5, h6 {
  font-size: 120%;
  line-height: 1.3;
}

.detail {
  padding-right: 2em;
  display: block;
  opacity: 0.6;
}

.popis {
  opacity: 0.6;
}

.veg, .veg2, .alergen, .price, .price2 {
  vertical-align: middle;
  font-size: 70%;
  padding: 2px 8px 3px;
  border-radius: 15px;
  opacity: 1;
}

.veg {
  border: 1px solid #26B351;
  color: #26B351;
}

.veg2 {
  border: 1px solid red;
  color: red;
}

.alergen {
  border: 1px solid #8080FF;
  color: #8080FF;
}

.price {
  border: 1px solid #444;
  color: #222;
}

.price2 {
  border: 1px solid #444;
  background: #444;
  color: #fff;
}

.alergen:hover {
  background: #8080FF;
  color: white;
  opacity: 1;
}

.menuday {
  margin-left: 20px;
}

.menuday li, #alergen li {
  display: list-item !important;
  list-style-type: circle;
  margin-left: 20px;
  margin-top: 0px;
}

.fixed-menu{
  display: none;
  position: fixed;
  width: 100%;
  z-index: 99;
  top: 0;
  background: #faf9f6;
}

.fixed-menu.active{
  display: block;
  animation: fadeIn .3s ease forwards;
  display: none;
}

.inverse-bg {
  padding: 4em 1em;
  background: white;
}

.radius-bg {
  border-radius: 20px!important;
}

.background-image-holder {
  border-radius: 10px;
}


@keyframes fadeIn{
  0%{ opacity: 0; transform: translateY(-50px); }
  100%{ opacity: 1; transform: translateY(0); }
}

@media all and (max-width: 767px){
nav{ opacity: 0 !improtant; }
.radius-bg {border-radius: 0px;}
}

.underline {
  border-bottom: 3px solid #ddd;
}

p#aler {
  margin-top: 2em!important;
  padding-top: 2em!important;
}

.logo{
  animation: animationFrames ease 2s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: animationFrames ease 2s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
  -moz-animation: animationFrames ease 2s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: animationFrames ease 2s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: animationFrames ease 2s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
}

@keyframes animationFrames{
  0% {
    opacity:0;
    transform:  translate(0px,25px)  ;
  }
  100% {
    opacity:1;
    transform:  translate(0px,0px)  ;
  }
}

@-moz-keyframes animationFrames{
  0% {
    opacity:0;
    -moz-transform:  translate(0px,25px)  ;
  }
  100% {
    opacity:1;
    -moz-transform:  translate(0px,0px)  ;
  }
}

@-webkit-keyframes animationFrames {
  0% {
    opacity:0;
    -webkit-transform:  translate(0px,25px)  ;
  }
  100% {
    opacity:1;
    -webkit-transform:  translate(0px,0px)  ;
  }
}

@-o-keyframes animationFrames {
  0% {
    opacity:0;
    -o-transform:  translate(0px,25px)  ;
  }
  100% {
    opacity:1;
    -o-transform:  translate(0px,0px)  ;
  }
}

@-ms-keyframes animationFrames {
  0% {
    opacity:0;
    -ms-transform:  translate(0px,25px)  ;
  }
  100% {
    opacity:1;
    -ms-transform:  translate(0px,0px)  ;
  }
}

.meal {
  display: flex;
}

.meal-title {
  flex: 7;
  margin-top: 0.3em;
}

.meal-meta {
  flex: 3;
  text-align: right;
  margin-top: 0.3em;
}

.meal-head {
  font-weight: bold;
  margin-top: 1.5em;
}

#alergen-popup {
  display: none;
}

.popup-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* semi-transparent black overlay */
  z-index: 9999; /* Ensure the overlay is on top of everything */

}

.popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 40px 40px 0px 40px;
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  z-index: 10000; /* Ensure the popup is on top of the overlay */
}

.job {
  max-width: 700px;
}

@media all and (max-width: 767px) {
  .popup {
    position: relative;
    font-size: 70%;
    padding: 20px 20px 10px 20px;
    box-shadow: 0 0 0 white;
  }
  
  .popup-overlay {
    background: white;
  }
  
  .meal {
    display: grid;
    text-align: center;
  }
  
  .meal-title {
    margin-top: 1em;
  }
  
  .meal-meta {
    text-align: center;
    margin-top: 0em;
  
  }
  
  .meal-head {
    margin-top: 3em;
  }

  .menicko {
    text-align: center!important;
  }
  
  .text-tabs .active span {
    border-bottom: 1px solid;
    padding-bottom: 2px;
  }
  #map {
    padding-bottom: 0;
  }
}

.formanka {
  background-color: #191919!important;
  color: #cac6c0;
}

@media all and (min-width: 767px) {
.formanka .image-row > div {
  border-right: 8px solid transparent;
}
}

.formanka h6 {
  color: #eee;
}

.formanka a {
  color: #fff;
}

.formanka a:hover {
  color: #F33;
}

.formanka .btn {
  color: #faf6f0;
  background: #2e2a25;
  border: 2px solid #aaa6a0!important;
}

.formanka .btn:hover {
  color: #fff;
  background: #444;
  border: 2px solid #fff;
}

.formanka .overlay:before {
  opacity: 0.1;
}

.formanka footer {
  background-color: #111!important;
}