@font-face {
  font-family: "Avenir";
  src: url("fonts/AvenirLTStd Medium.otf") format("opentype");
}
@font-face {
  font-family: "AvenirBB";
  src: url("fonts/AvenirLTStd Heavy.otf") format("opentype");
}
/*
.plantilla-texto p {
  font-family: "Avenir", Source Sans Pro;
}
*/
.titulo-quilmes {
  display: block;
  margin: auto;
  margin-top: 30px;
  margin-bottom: 25px;
  position: relative;
}

/* //////////////////////////////////////// */
/* //////////// CONFIG + 768PX //////////// */
/* //////////////////////////////////////// */
@media(min-width: 768px) {
    /* <##### { GALLERY WRAP } #####> */
    .gallery-wrap {
      display: none; /* flex es el original */
      flex-direction: row;
      width: 100%;
      height: 350px;
    }
    .item {
      flex: 1;
      height: 100%;
      background-position: center;
      background-repeat: no-repeat;
      background-size: 100px;
      transition: flex 0.4s ease;
      position: relative;
    }
    .item:hover{
      flex: 7;
    }
    .item > img {
      width: 75%;
      fill: white;
      margin: auto;
      display: flex;
      height: 90%;
      transition: width 0.4s ease, transform 0.4s ease-out;
    }
    .item.item-escuchar > img {
      width: 30%;
    }
    .item:hover > img {
      width: 270px;
      transform: rotate(360deg);
    }
    .item:hover > p {
      font-size: 27px;
    }
    .item-1 { 
      background-color: #CC5599;
    }
    .item-2 { 
      background-color: #A2D45E;
    }
    .item-3 { 
      background-color: #FF595A;
    }
    .item-4 { 
      background-color: #FDB714;
    }
    .item-5 { 
      background-color: #69488E;
    }
    .item-6 { 
      background-color: #00B189;
    }
    .item-7 { 
      background-color: #73C3D5;
    }
    .item-8 {
      background-color: #005295;
    }
    .item > p {
      position: absolute;
      bottom: 0;
      width: 100%;
      text-align: center;
      font-size: 15px; /* original en 17px queda bien */
      color: white;
      transition: font-size 0.4s ease;
    }
}
/* //////////////////////////////////////// */
/* //////////// CONFIG - 767PX //////////// */
/* //////////////////////////////////////// */
@media(max-width: 767px) {
  /* <##### { GALLERY WRAP } #####> */
  .gallery-wrap {
    margin-top: 40px;
  }
  .gallery-wrap > a {
    border-radius: 20px;
  }
  .item {
    position: relative;
    display: block;
    height: 60px;
  }
  .item > img {
    width: 45px;
    padding-left: 7px;
    height: 60px;
    display: inline-block;
  }
  .item > p {
    display: inline-block;
    color: white;
    margin-bottom: 0;
    font-size: 20px;
    position: absolute;
    bottom: 14px;
    left: 60px;
  }
  .item-1 { 
    background-color: #CC5599;
  }
  .item-2 { 
    background-color: #A2D45E;
  }
  .item-3 { 
    background-color: #FF595A;
  }
  .item-4 { 
    background-color: #FDB714;
  }
  .item-5 { 
    background-color: #69488E;
  }
  .item-6 { 
    background-color: #00B189;
  }
  .item-7 { 
    background-color: #73C3D5;
  }
  .item-8 {
    background-color: #005295;
  }
}