.list li {
  -webkit-perspective: 400px;
  perspective: 400px;
}

.list .info {
  -webkit-transform: rotate3d(1, 0, 0, 90deg);
  transform: rotate3d(1, 0, 0, 90deg);
  width: 100%;
  height: 100%;
  padding: 15px;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 4px;
  pointer-events: none;
  background-color: rgba(26, 44, 89,.97);
  color: white;
  overflow: hidden;
}

.list .in-top .info {
  -webkit-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  -webkit-animation: in-top 300ms ease 0ms 1 forwards;
  animation: in-top 300ms ease 0ms 1 forwards;
}

.in-right .info {
  -webkit-transform-origin: 100% 0%;
  transform-origin: 100% 0%;
  -webkit-animation: in-right 300ms ease 0ms 1 forwards;
  animation: in-right 300ms ease 0ms 1 forwards;
}

.in-bottom .info {
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-animation: in-bottom 300ms ease 0ms 1 forwards;
  animation: in-bottom 300ms ease 0ms 1 forwards;
}

.in-left .info {
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  -webkit-animation: in-left 300ms ease 0ms 1 forwards;
  animation: in-left 300ms ease 0ms 1 forwards;
}

.out-top .info {
  -webkit-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  -webkit-animation: out-top 300ms ease 0ms 1 forwards;
  animation: out-top 300ms ease 0ms 1 forwards;
}

.out-right .info {
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  -webkit-animation: out-right 300ms ease 0ms 1 forwards;
  animation: out-right 300ms ease 0ms 1 forwards;
}

.out-bottom .info {
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-animation: out-bottom 300ms ease 0ms 1 forwards;
  animation: out-bottom 300ms ease 0ms 1 forwards;
}

.out-left .info {
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  -webkit-animation: out-left 300ms ease 0ms 1 forwards;
  animation: out-left 300ms ease 0ms 1 forwards;
}

@-webkit-keyframes in-top {
  from {
    -webkit-transform: translate(0,-100%);
    transform: translate(0,-100%);
  }
  to {
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
  }
}

@keyframes in-top {
  from {
    -webkit-transform: translate(0,-100%);
    transform: translate(0,-100%);
  }
  to {
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
  }
}
@-webkit-keyframes in-right {
  from {
    -webkit-transform: translate(100%,0);
    transform: translate(100%,0);
  }
  to {
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
  }
}
@keyframes in-right {
  from {
    -webkit-transform: translate(100%,0);
    transform: translate(100%,0);
  }
  to {
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
  }
}
@-webkit-keyframes in-bottom {
  from {
    -webkit-transform: translate(0,100%);
    transform: translate(0,100%);
  }
  to {
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
  }
}
@keyframes in-bottom {
  from {
    -webkit-transform: translate(0,100%);
    transform: translate(0,100%);
  }
  to {
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
  }
}
@-webkit-keyframes in-left {
  from {
    -webkit-transform: translate(-100%,0);
    transform: translate(-100%,0);
  }
  to {
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
  }
}
@keyframes in-left {
  from {
    -webkit-transform: translate(-100%,0);
    transform: translate(-100%,0);
  }
  to {
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
  }
}
@-webkit-keyframes out-top {
  from {
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
  }
  to {
    -webkit-transform: translate(0,-100%);
    transform: translate(0,-100%);
  }
}
@keyframes out-top {
  from {
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
  }
  to {
    -webkit-transform: translate(0,-100%);
    transform: translate(0,-100%);
  }
}
@-webkit-keyframes out-right {
  from {
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
  }
  to {
    -webkit-transform: translate(100%,0);
    transform: translate(100%,0);
  }
}
@keyframes out-right {
  from {
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
  }
  to {
    -webkit-transform: translate(100%,0);
    transform: translate(100%,0);
  }
}
@-webkit-keyframes out-bottom {
  from {
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
  }
  to {
    -webkit-transform: translate(0,100%);
    transform: translate(0,100%);
  }
}
@keyframes out-bottom {
  from {
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
  }
  to {
    -webkit-transform: translate(0,100%);
    transform: translate(0,100%);
  }
}
@-webkit-keyframes out-left {
  from {
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
  }
  to {
    -webkit-transform: translate(-100%,0);
    transform: translate(-100%,0);
  }
}
@keyframes out-left {
  from {
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
  }
  to {
    -webkit-transform: translate(-100%,0);
    transform: translate(-100%,0);
  }
}


.list ul {
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.list li {
  position: relative;
  flex-basis: calc(100% / 5 - 6px);
  padding: 0;
  list-style: none;
  overflow: hidden;
  border-right: 1px solid #ddd;
  margin-bottom: 40px;
  opacity: 0;
}

.list li.animate {
  animation: listGroupShow .8s cubic-bezier(.41, .5, .02, 1.3) forwards;
}

.list li:nth-child(5n) {
  border-right: none;
}
.list li a {
  height: 100%;
  display: inline-block;
  vertical-align: top;
  text-decoration: none;
  border-radius: 4px;
}
.list li a * {
  pointer-events: none;
}
.list li h2 {
  font-size: 18px;
  width: 100%;
  padding: 10px 20px;
  margin: 0;
}

.list li img {
  width: 100%;
  padding: 0 15px;
}
.list li .info img {
  padding: 0 5px;
}
.list li p {
  font-size: 12px;
  font-family: "Nunito", sans-serif;
  margin: 0;
  padding: 1em 0;
}
.list li .info p.small {
  font-size: 11px;
}
.list li .values span {
  display: block;
}
.list li .values span:not(.title)::before {
  content: "• "
}
.list li .values span.title {
  font-size: 14px;
  font-family: "Nunito", sans-serif;
  margin-bottom: 8px;
  color: white;
  text-transform: none;
  text-align: left;
}
.list li .info p {
  font-size: 14px;
  padding: 0 0 14px;
  margin: 0;
}
.list li .info p.values {
  font-size: 12px;
}
.list .alergens img {
  max-height: 30px;
  display: inline-block;
  flex-basis: 50px;
  object-fit: contain;
  margin: 0;
}

.list .alergens.double {
  display: flex;
  flex-wrap: wrap;
}
.list .alergens.double .al-item {
  flex-basis: 50%;
}
.list .alergens .al-item {
  display: flex;
  justify-content: left;
  align-items: center;
  margin-bottom: 10px;
  font-size: 12px;
  font-family: "Nunito", sans-serif;
}
.list li .normal {
  font-family: "Nunito", sans-serif;
  text-align: center;
}
.list li .normal h2 {
  font-weight: 700;
  font-size: 14px;
  font-family: "Raleway", sans-serif;
  display: flex;
  height: 4em;
  justify-content: center;
  align-items: flex-end;
  margin-bottom:15px;

}



@media screen and (max-width: 990px) {
  .list li:nth-child(1n) {
    border-right: 1px solid #ddd;
    flex-basis: calc(100% / 3);
  }
  .list li:nth-child(3n) {
    border-right: 0;
  }
}
@media screen and (max-width: 860px) {
  .list .list-slider .owl-nav .owl-prev {
    left: 15px;}
  .list .list-slider .owl-nav .owl-next {
    right: 15px;
  }
  .list .list-slider .owl-nav {
    font-size: 24px;
  }
}
@media screen and (max-width: 800px) {
  .list .list-items .group {
    padding: 0 15px;
  }
}
@media screen and (max-width: 640px) {
  .list li:nth-child(1n) {
    border-right: 1px solid #ddd;
    flex-basis: calc(100% / 2);
  }
  .list li:nth-child(2n) {
    border-right: 0;
  }

  .list-items .empty p,
  .list-items .selected p {
    padding: 0 15px;
  }

}
@media screen and (max-width: 440px) {
  .list li:nth-child(1n) {
    border-right: 1px solid #ddd;
    flex-basis: calc(100% / 1);
  }
  .list li:nth-child(1n) {
    border-right: 0;
  }


}