/*
---------------------------------------------
menu
---------------------------------------------
*/

#menu {
  margin-top: 120px;
  background-color: #F1F2F2;
  padding: 120px 0px;
}

#menu .section-heading {
  margin-bottom: 80px;
}

.card {
  margin: 0 auto;
  max-width: 100%;
  min-height: 400px;
  overflow: hidden;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}

.card1 {
  background-image: url(../images/menu-item-01.jpg);
}
.card2 {
  background-image: url(../images/menu-item-02.jpg);
}
.card3 {
  background-image: url(../images/menu-item-03.jpg);
}
.card4 {
  background-image: url(../images/menu-item-04.jpg);
}
.card04 {
  background-image: url(../images/menu-item-16.jpg);
}
.card5 {
  background-image: url(../images/menu-item-05.jpg);
}
.card05 {
  background-image: url(../images/menu-item-15.jpg);
}
.card6 {
  background-image: url(../images/menu-item-06.jpg);
}
.card7 {
  background-image: url(../images/menu-item-07.jpg);
}
.card07 {
  background-image: url(../images/menu-item-17.jpeg);
}
.card8 {
  background-image: url(../images/menu-item-08.jpg);
}
.card9 {
  background-image: url(../images/menu-item-09.jpg);
}
.card10 {
  background-image: url(../images/menu-item-10.webp);
}
.card11 {
  background-image: url(../images/menu-item-11.jpg);
}
.card15 {
  background-image: url(../images/menu-item-15.jpg);
}
.card16 {
  background-image: url(../images/menu-item-16.jpg);
}
.card17 {
  background-image: url(../images/menu-item-17.jpeg);
}
.info {
  position: relative;
  width: 100%;
  background-color: #50BA87;
  border: 1px solid #50BA87;
  transform: translateY(100%)
  translateY(120px)
  translateZ(0);
  transition: transform 0.5s ease-out;
}

.card:hover .info,
.card:hover .info:before {
  transform: translateY(200px) translateZ(0);
}

.title {
  margin: 0;
  padding: 30px 30px 20px 30px;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}

.description {
  padding: 0px 30px;
  color: #fff;
}

#menu .price h6 {
  position: absolute;
  width: 70px;
  height: 70px;
  background-color: #50BA87;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  border-radius: 3px;
  text-align: center;
  line-height: 70px;
}

#menu .card .main-text-button {
  margin-left: 30px;
  margin-top: 20px;
  padding-bottom: 30px;
}

#menu .owl-menu-item {
  position: relative;
}

#menu .owl-nav {
  text-align: center;
  position: absolute;
  width: 100%;
  bottom: -80px;
  transform: translateY(5px);
}

#menu .owl-dots {
  display: none;
}
    
#menu .owl-nav .owl-prev{
  margin-right: 10px;
  outline: none;
}

#menu .owl-nav .owl-prev span,
#menu .owl-nav .owl-next span {
  opacity: 0;
}

#menu .owl-nav .owl-prev:before {
  display: inline-block;
  font-family: 'FontAwesome';
  color: #50BA87;
  font-size: 25px;
  font-weight: 700;
  content: '\f104';
}

#menu .owl-nav .owl-prev {
  opacity: 0.75;
  transition: all .5s;
}

#menu .owl-nav .owl-prev:hover {
  opacity: 1;
}

#menu .owl-nav .owl-next {
  opacity: 0.75;
  transition: all .5s;
}

#menu .owl-nav .owl-next:hover {
  opacity: 1;
}

#menu .owl-nav .owl-next{
  margin-left: 10px;
  outline: none;
}

#menu .owl-nav .owl-next:before {
  display: inline-block;
  font-family: 'FontAwesome';
  color: #50BA87;
  font-size: 25px;
  font-weight: 700;
  content: '\f105';
}






#preloader {
  overflow: hidden;
  background-color: #50BA87;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: fixed;
  z-index: 99999;
  color: #fff;
}

#preloader .jumper {
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: block;
  position: absolute;
  margin: auto;
  width: 50px;
  height: 50px;
}

#preloader .jumper > div {
  background-color: #fff;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  position: absolute;
  opacity: 0;
  width: 50px;
  height: 50px;
  -webkit-animation: jumper 1s 0s linear infinite;
  animation: jumper 1s 0s linear infinite;
}

#preloader .jumper > div:nth-child(2) {
  -webkit-animation-delay: 0.33333s;
  animation-delay: 0.33333s;
}

#preloader .jumper > div:nth-child(3) {
  -webkit-animation-delay: 0.66666s;
  animation-delay: 0.66666s;
}

@-webkit-keyframes jumper {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  5% {
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes jumper {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}