.js-text {
  color: green;

}
#card1, #card2, #card3, #card4, #card5, #card6,  #card7, #card8 {
  border : 3px solid #410099;
  margin:10px !important;
  height : auto !important;
  min-height: 400px !important;
  max-height: 100% !important;
  width: 350px !important;
  transition: 0.2s ease-in-out !important;
  -moz-transition: 0.2s ease-in-out !important;
  position: relative;
  box-shadow: lightgrey 1px 1px 15px;
  border-radius: 10px;
  padding: 30px;

}

/* css para los botodes de informacion*/
#card1 img.icon-tarjeta, #card2 img.icon-tarjeta, #card3 img.icon-tarjeta, #card4 img.icon-tarjeta, #card5 img.icon-tarjeta, #card6 img.icon-tarjeta, #card7 img.icon-tarjeta,  #card8 img.icon-tarjeta{
  width: 30px !important;
}

#card1 img, #card2 img, #card3 img, #card4 img,
#card5 img, #card6 img, #card7 img, #card8 img {
  width: 100% !important;
    border-radius: 10px !important;
    cursor: hand !important;
}

#front-card1, #front-card2, #front-card3, #front-card4,
#front-card5, #front-card6, s#front-card7, #front-card8{
  transition: 0.2s ease-in-out !important;
  -moz-transition: 0.2s ease-in-out !important;
}

#back-card1, #back-card2, #back-card3, #back-card4,
#back-card5, #back-card6, #back-card7, #back-card8{
  display: none;
  padding: 30px;
  transition: 0.5s ease-in-out !important;
  -moz-transition: 0.5s ease-in-out !important;
}

h2 {
  text-align: center;
  font-size: 22px !important;
  color:#410099;
  padding: 5px;

}

#card1 #front-card1 .ayudat,
#card2 #front-card2 .ayudat,
#card3 #front-card3 .ayudat,
#card4 #front-card4 .ayudat,
#card5 #front-card5 .ayudat,
#card6 #front-card6 .ayudat,
#card7 #front-card7 .ayudat,
#card8 #front-card8 .ayudat
{
  position: absolute;
  bottom: 0px;
  text-align:right !important;
  padding-right:60px !important;
  width: 100% !important;
}
#card1 #front-card1 .ayudat p,
#card2 #front-card2 .ayudat p,
#card3 #front-card3 .ayudat p,
#card4 #front-card4 .ayudat p,
#card5 #front-card5 .ayudat p,
#card6 #front-card6 .ayudat p,
#card7 #front-card7 .ayudat p,
#card8 #front-card8 .ayudat p
{
  width: 100% !important;
  text-align:right !important;
}

#card1 #front-card1 .ayudat p img,
#card2 #front-card2 .ayudat p img,
#card3 #front-card3 .ayudat p img,
#card4 #front-card4 .ayudat p img,
#card5 #front-card5 .ayudat p img,
#card6 #front-card6 .ayudat p img,
#card7 #front-card7 .ayudat p img,
#card8 #front-card8 .ayudat p img,
 {
  margin-right:40px !important;
}


@media only screen and (max-width: 768px) {

  #card1, #card2, #card3, #card4, #card5, #card6, #card7, #card8 {
    border : 3px solid #410099 !important;
    margin:5px !important;
    height : auto !important;
    min-height: 400px !important;
    max-height: 100% !important;
    width: 100% !important;
    transition: 0.2s ease-in-out !important;
    -moz-transition: 0.2s ease-in-out !important;
  }
  #back-card1, #back-card2, #back-card3, #back-card4,
  #back-card5, #back-card6, #back-card7, #back-card8{
    padding: 10px;
  }
  .container01{
    width: 100% !important;
    margin: 0px !important;
    padding: 0px !important;
    transition: 0.2s ease-in-out !important;
    -moz-transition: 0.2s ease-in-out !important;
    height : auto !important;
  }
  #card1 #front-card1 .ayudat,
  #card2 #front-card2 .ayudat,
  #card3 #front-card3 .ayudat,
  #card4 #front-card4 .ayudat,
  #card5 #front-card5 .ayudat,
  #card6 #front-card6 .ayudat,
  #card7 #front-card7 .ayudat,
  #card8 #front-card8 .ayudat
  {
    position: absolute;
    bottom: 0px;
    text-align:right !important;
    margin-right:20px !important;
    width: 100% !important;
  }
  #card1 #front-card1 .ayudat p,
  #card2 #front-card2 .ayudat p,
  #card3 #front-card3 .ayudat p,
  #card4 #front-card4 .ayudat p,
  #card5 #front-card5 .ayudat p,
  #card6 #front-card6 .ayudat p,
  #card7 #front-card7 .ayudat p,
  #card8 #front-card8 .ayudat p
  {
    width: 100% !important;
    text-align:right !important;
    margin-right:20px !important;
  }

  #card1 #front-card1 .ayudat p img,
  #card2 #front-card2 .ayudat p img,
  #card3 #front-card3 .ayudat p img,
  #card4 #front-card4 .ayudat p img,
  #card5 #front-card5 .ayudat p img,
  #card6 #front-card6 .ayudat p img,
  #card7 #front-card7 .ayudat p img,
  #card8 #front-card8 .ayudat p img,
   {
    margin-right:20px !important;
  }
}