.card-title{font-size: 1.6vw;}
.card{
 width:22% !important;
 display: block !important;
 float: left;
 margin:3%;
}
#cont_tarjetas{margin-left: 14%; }
.card-body{
  padding: .3rem !important;
}
 .card:before, .card:after
 {
   z-index: -1;
   position: absolute;
   content: "";
   bottom: 15px;
   left: 10%;
   width: 50%; 
   top: 80%;
   max-width:300%;
   background: #777;
   -webkit-box-shadow: 0 15px 10px #777;
   -moz-box-shadow: 0 15px 10px #777;
   box-shadow: 0 15px 10px #777;
   -webkit-transform: rotate(-3deg);
   -moz-transform: rotate(-3deg);
   -o-transform: rotate(-3deg);
   -ms-transform: rotate(-3deg);
   transform: rotate(-3deg);
 }
 .card:after
 {
   -webkit-transform: rotate(3deg);
   -moz-transform: rotate(3deg);
   -o-transform: rotate(3deg);
   -ms-transform: rotate(3deg);
   transform: rotate(3deg);
   right: 10px;
   left: auto;
 }
 #invisible{width: 100%; height:410px;  background: none;}

#cont_tarjetas>.card>.card-body>.card-title>a{color: #621132;}

 @media only screen and (max-width: 600px) {
   .card{width: 25% !important; padding: none !important; padding:-45;}
    .div_card {
      width:26% !important;
      height:50px !important;
      margin: 1.1% !important;
      background-color: rgb(247, 243, 243);
      box-shadow: 8px 2px 22px rgb(184, 184, 184) !important;
      
  } #invisible{height: 200px; background: none;}
  .img_trans{margin-top: -25px !important;}
  #cont_tarjetas>.card>.card-body>.card-title>a{font-size:7px;}
#trasn_li{margin-top: 30px;}#trasn_li2{margin-top: 30px;}
   .lo_li{margin-bottom:-90px !important;}
   .div_sis{margin-left: 10% !important;} .div_sis2{margin-left: 25% !important;}
   #portada{margin-top:40px !important;} video{width: 80% !important;}
   }

/* tabletas */
@media (min-width: 300px) {
    #invisible{background:none;}
  }
  
  /* escritorio normales */
  @media (min-width: 500px) {
    #invisible{background:none; height: 240px;}
    .div_card {
        width:25% !important;
        height:2% !important ;
        margin: 4.1%;
        background-color: rgb(247, 243, 243);
        box-shadow: 0 0 20px rgb(136, 136, 135);
    }
  }
  
  /* pantallas grandes */
  @media (min-width: 1200px) {
    
    #invisible{height: 440px; background: none; }
  }
 
   /*__________________________________________________________________________________*/
   .div_card {
    width:22% ;
    height:22% ;
    margin: 4.1%;
    background-color: rgb(247, 243, 243);
    box-shadow: 0 0 20px rgb(136, 136, 135);
}