/* @import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");
 body {
	 font-family: Roboto, sans-serif;
	 margin: 0;
	 height: 100vh;
	 display: grid;
	 align-items: center;
	 justify-items: center;
	 background-image: linear-gradient(to top, #96fbc4 0%, #f9f586 100%);
} */
 .card-product {
	 background: #fff;
	 box-shadow: 0 0 10px;
	 max-width: 370px;
	 display: inline-block;
	/*  flex-direction: row; */
	 border-radius: 25px;
	 position: relative;
	 margin:0.5rem;
	 height:200px;
}
 .card-product h2 {
	 margin: 0;
	 padding: 0 1rem;
	 font-size: 13px;
}
 .card-product .title {
	 padding: 1rem;
	 text-align: right;
	 color: green;
	 font-weight: bold;
	 font-size: 12px;
}
 .card-product .desc {
	 text-align: justify;
	  padding: 0.5rem 0;
	  order: 100;
	  line-height: 1.5;
	  font-size: 0.9rem;
}
 .card-product .actions {
	 display: grid;
	 grid-template-columns: repeat(3, 1fr);
	 align-items: center;
	 padding: 0.5rem 1rem;
}
 .card-product svg {
	 width: 85px;
	 height: 85px;
	 margin: 0 auto;
}
 .img-avatar {
	 width: 90px;
	 height: 90px;
	 position: absolute;
	 border-radius: 50%;
	 border: 6px solid white;
	 background-image: linear-gradient(-60deg, #16a085 0%, #f4d03f 100%);
	 top: 15px;
	 left: 85px;
}
 .card-product-text {
	 display: grid;
	 grid-template-columns: 1fr 2fr;
	  height: 100%;
}
 .title-total {
	 padding: 1em 1em 1.5em 1em;
}
 path {
	 fill: white;
}
 .img-portada {
	 width: 100%;
}
 .portada {
	 width: 100%;
	 height: 100%;
	 border-top-left-radius: 20px;
	 border-bottom-left-radius: 20px;
	/*  background-image:  url("../../images/productCategory/Coronavirus-diagram.jpg"); */
	 background: linear-gradient(to right,#649b42 0, #507c34 68%,#83af67 68%,#92b97a 100%);
	 background-position: bottom right;
	 background-size: cover;
}
 
.card-product-image-view-box{
	text-align: center;
	padding: 0.30rem;
}
.image-view-box img{
	border-radius: 50%;
}















.grid__biomeds {
    display: inline-block;
    width: 100%;
}
/*  @media (max-width: 60em) {
	 .grid__biomeds {
		 grid-gap: 3rem;
	}
} */
 .grid__item {
	background-color: #fff;
    border-radius: 0.4rem;
    overflow: hidden;
    box-shadow: 0 10px 10px -5px;
    cursor: pointer;
    transition: 0.2s;
    display: inline-block;
    width: 26rem;
    height:37rem;
    margin: 1rem 1rem 0;
}
 .grid__item:hover {
	 transform: translateY(-0.5%);
	 box-shadow: 0 4rem 8rem rgba(0, 0, 0, .2);
}
.grid__item__1 {
	background-color: #fff;
    border-radius: 0.4rem;
    overflow: hidden;
    box-shadow: 0 10px 10px -5px;
    cursor: pointer;
    transition: 0.2s;
    display: inline-block;
    width: 26rem;
    height:45rem;
    margin: 1rem 1rem 0;
}
 .grid__item__1:hover {
	 transform: translateY(-0.5%);
	 box-shadow: 0 4rem 8rem rgba(0, 0, 0, .2);
}
 .card__img {
	 display: block;
	 width: 100%;
	 height: 18rem;
	 object-fit: cover;
	 border-radius: 15px 15px 0px 0px;
}
 .card__content {
	 padding: 1rem 1rem;
}
 .card__header {
	 font-size: 1.3rem;
	 font-weight: 500;
	 color: #0d0d0d;
	 margin-bottom: 1.5rem; color: #ffffff;
}
 .card__text {
	line-height: 1.7;
	margin-bottom: 0.5rem;
	text-align: justify;
	padding: 0 1rem 1rem;
	order: 100;
	color: #ffffff; font-size: 1rem;
}

.card__title{
	border-radius: 50rem !important;
  height: 60px;
  width: 60px;
  background-color: #f93 !important;
  text-align: center;padding: 5px; margin-left: 40%; padding-top: 6px;
}

 .card__btn {
	 display: block;
	 width: 100%;
	 padding: 1.5rem;
	 font-size: 2rem;
	 text-align: center;
	 color: #3363ff;
	 background-color: #e6ecff;
	 border: none;
	 border-radius: 0.4rem;
	 transition: 0.2s;
	 cursor: pointer;
}
 .card__btn span {
	 margin-left: 1rem;
	 transition: 0.2s;
}
 .card__btn:hover, .card__btn:active {
	 background-color: #dce4ff;
}
 .card__btn:hover span, .card__btn:active span {
	 margin-left: 1.5rem;
}