.js-text {
  color: green;

}
#card1, #card2, #card3, #card4, #card5, #card6,  #card7 {
  border : 3px solid #D82080;
  margin:5px !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;
  transition: 0.2s ease-in-out !important;
  -moz-transition: 0.2s ease-in-out !important;
}

/* 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{
  width: 30px !important;
}

#card1 img, #card2 img, #card3 img, #card4 img, #card5 img, #card6 img, #card7 img {
  width: 100% !important;
    /*border-radius: 10px !important;*/
    cursor: hand !important;
    z-index: 10000 !important;
    border-top-left-radius: 7px !important;
    border-top-right-radius: 7px !important;
}

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

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

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

h2 {
  text-align: center;
  font-size: 22px !important;
  color:#D82080;
  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
{
  position: absolute;
  bottom: 0px;
  text-align:right !important;
  padding-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
{
  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,
 {
  margin-right:40px !important;
}


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

  #card1, #card2, #card3, #card4, #card5, #card6, #card7 {
    border : 3px solid #D82080 !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{
    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
  {
    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
  {
    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,
   {
    margin-right:20px !important;
  }
}