/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jul 04 2019 | 17:13:23 */
.accordion {
  width: 100%;
    max-width: 100%;
    height: 500px;
    overflow: hidden;
    margin: 0px auto;
}

.accordion ul {
  width: 100%;
    display: table;
    table-layout: fixed;
    margin: 0;
    padding: 0;
}

.accordion ul li {
    display: table-cell;
    vertical-align: bottom;
    position: relative;
    width: 16.666%;
    height: 500px;
    background-repeat: no-repeat;
    background-position: center center;
    transition: all 500ms ease;
}

.accordion ul li div {
  display: block;
  overflow: hidden;
  width: 100%;
}

.accordion ul li div a {
    display: inline-block;
    height: 500px;
    width: 100%;
    position: relative;
    z-index: 3;
    vertical-align: bottom;
    box-sizing: border-box;
    color: #fff;
    text-decoration: none;
    font-family: Open Sans, sans-serif;
    transition: all 200ms ease;
      background: rgba(0, 0, 0, 0.2);
  pointer-events:none;
}

.accordion ul li div a * {
    opacity: 0;
    margin: 0;
    width: 100%;
    text-overflow: ellipsis;
    position: relative;
    z-index: 5;
    overflow: hidden;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
    -webkit-transition: all 400ms ease;
    transition: all 400ms ease;
}

.accordion ul li div a h2 {
  font-family: Montserrat, sans-serif;
    font-size: 18px;
    text-transform: uppercase;
    margin-bottom: 0;
    top: 173px;
    opacity: 1;
    text-align: center;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 1);
    left: 20px;
    color: #fff;
  font-weight:900;
}

.accordion ul li div a p {
  text-align: center;
   top: 160px;
    font-size: 16px;
    left: 20px;
    max-width: 80%;
    margin: 20px auto 0 auto;
      line-height: 1.2;
}

.accordion ul li:nth-child(1) { background-image: url("http://elnoble.com.ar/wp-content/uploads/2019/06/tostable-productos.png"); }

.accordion ul li:nth-child(2) { background-image: url("http://elnoble.com.ar/wp-content/uploads/2019/06/empanadas-productos.png"); }

.accordion ul li:nth-child(3) { background-image: url("http://elnoble.com.ar/wp-content/uploads/2019/06/tartas-productos.png"); }

.accordion ul li:nth-child(4) { background-image: url("http://elnoble.com.ar/wp-content/uploads/2019/06/panini-productos.png"); }

.accordion ul li:nth-child(5) { background-image: url("http://elnoble.com.ar/wp-content/uploads/2019/06/pan-de-queso-productos.png"); }

.accordion ul li:nth-child(6) { background-image: url("http://elnoble.com.ar/wp-content/uploads/2019/06/pizza-productos.png"); }

.accordion ul li:nth-child(7) { background-image: url("http://elnoble.com.ar/wp-content/uploads/2019/06/pizzeta-rellena-productos.png"); }

.accordion ul li:nth-child(8) { background-image: url("http://elnoble.com.ar/wp-content/uploads/2019/06/bocaditos-de-pollo-productos.png"); }

.accordion ul:hover li { width: 8%; }

.accordion ul:hover li:hover { width: 30%; }

.accordion ul:hover li:hover a { background: rgba(0, 0, 0, 0.4); }

.accordion ul:hover li:hover a * {
  opacity: 1;
  -webkit-transform: translateX(0);
  transform: translateX(0);
      left: 0;
}

.center-vert{
  position:absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
 }

@media (max-width:1500px){
.accordion ul:hover li:hover { width: 60%; }
  .accordion ul li div a h2 {
    font-size: 17px;
  }

}

 @media screen and (max-width: 767px) {
   .center-vert{
  position:relative;
  top: 0%;
  -webkit-transform: translateY(-0%);
  -ms-transform: translateY(-0%);
  transform: translateY(-0%);
     padding-top:30px;
 }
   .accordion ul li:nth-child(1) div a{
       padding-top: 60px;   
   }
   .accordion ul li:nth-child(2) div a{
       padding-top: 18px;   
   }
   .accordion ul li:nth-child(3) div a{
       padding-top: 52px;   
   }
   .accordion ul li:nth-child(4) div a{
       padding-top: 75px;   
   }
   .accordion ul li:nth-child(5) div a{
       padding-top: 92px;   
   }
   .accordion ul li:nth-child(6) div a{
       padding-top: 63px;   
   }
   .accordion ul li:nth-child(7) div a{
       padding-top: 70px;   
   }
   .accordion ul li:nth-child(8) div a{
       padding-top: 70px;   
   }
   .accordion ul li div a * {
    -webkit-transform: translateX(0px);
     transform: translateX(0px);
   }
.accordion ul li div a h2{
   left:0;
   top: 16px;
}
.accordion ul li div a p{
     left:0;
     opacity: 1;
    top: 0;
    font-size: 12px;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 1);
  max-width: 95%;
}
.accordion { height:auto; }
   
.accordion ul li { height: 250px; }
   
.accordion ul li div a{ height: 250px; }

.accordion ul li,
.accordion ul li:hover,
.accordion ul:hover li,
.accordion ul:hover li:hover {
  position: relative;
  display: table;
  table-layout: fixed;
  width: 100%;
  -webkit-transition: none;
  transition: none;
}
}