/* Estilos Destacados */

.textImg-grid {
  display: block;
  padding: 25px;
  background-color: white;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  text-align: left;
}

.textImg-grid article {
  display: inline-block;
  vertical-align: top;
  width: 30%;
}

.textImg-grid article > a > div {
  position: relative;
  margin-bottom: 20px;
  width: 100%;
  max-height: 260px;
  min-height: 260px;
  overflow: hidden;
}

.textImg-grid article > a > div > img {
  width: 100%;
  height: auto;
  min-height: 260px;
}

.textImg-grid article:hover > a > div > div {
  height: 25px;
}

.textImg-grid article:hover > a > p {
  text-decoration: none;
}

.textImg-grid article:hover > a {
  text-decoration: none;
}

.textImg-grid article:hover p {
  opacity: 0.5;
}

.textImg-grid article > p{
  height: 60px;
  overflow: hidden;
  margin-bottom: 40px;
  text-align: left;
  font-family: 'Robot_Light';
  color: #323232;
  font-size: 15px;
  text-align: left;
  transition: opacity 0.5s;
}

.textImg-grid article p {
  transition: opacity 0.5s;
}

.textImg-grid article > a > p {
  font-family: 'oswaldbold';
  color: #323232;
  font-size: 17px;
  margin-bottom: 3px;
  text-align: left;
}


/* Estilos responsive */

@media screen and (max-width:1279px) {
  .textImg-grid article > a > p {
    font-size: 15px;
  }

  .textImg-grid article > p {
    font-size: 12px;
  }

  .textImg-grid article > p {
    margin-bottom: 25px;
  }

  .textImg-grid article {
    margin-right: 3%;
  }

  .textImg-grid {
    padding-right: 0px;
  }

  .textImg-grid article > a > div {
    max-height: 230px;
    min-height: 230px;
  }

  .textImg-grid article > a > div > img {
    min-height: 230px;
  }
}

@media screen and (max-width:1024px){
  .textImg-grid {
    padding-left:   35px;
    padding-right:  0px;
  }
  .textImg-grid article {
    margin-right: 9px;
    width:  31%;
  }
}

@media screen and (max-width:940px){
  .textImg-grid article {
    width: 30%;
    margin-right: 3%;
  }
  .textImg-grid article:hover > a > div > div {
    height: 15px;
    margin-right:   3%;
  }

  .textImg-grid {
    padding-left:   35px;
    padding-right:  10px;
  }
  .textImg-grid article > a > div > img {
    min-height: 180px;
  }

  .textImg-grid article > a > div {
    max-height: 180px;
    min-height: 180px;
  }
}

@media screen and (max-width:640px) {
  .textImg-grid article {
    width: 48%;
    margin-right: 2%;
    padding-right:  0;
  }

  .textImg-grid {
    padding-right: 0px;
    padding-left: 15px;
  }

  .textImg-grid article > a > div {
    margin-bottom:  5px;
  }

  .textImg-grid article > a > div > img {
    min-height: 180px;
  }

  .textImg-grid article > a > div {
    max-height: 180px;
    min-height: 180px;
  }

}

@media screen and (max-width:480px) {
  .textImg-grid article {
    width: 100%;
  }

  .textImg-grid {
    padding-right:  15px;
  }

  .textImg-grid article > a > div > img {
    min-height:   260px;
  }

  .textImg-grid article > a > div {
    height:   260px;
    max-height: 260px;
  }

  .textImg-grid article > a > div {
    margin-bottom:  10px;
  }

  .textImg-grid article > p {
    margin-bottom: 0px;
  }

}

@media screen and (max-width:360px) {
  .textImg-grid {
    padding-right:  10px;
    padding-left:  10px;
  }
  .textImg-grid article > a > div {
    margin-bottom:  5px;
  }

  .textImg-grid article > p {
    margin-bottom: 5px;
    line-height: 14px;
    }

    .textImg-grid article > a > div > img {
      min-height: 150px;
    }

    .textImg-grid article > a > div {
      max-height: 150px;
      min-height: 150px;
    }

  .textImg-grid article > a > p {
    margin-bottom:  -5px;
  }
}
