.cms-main-area{ background:#f2f5f2!important; position: relative; }
 
/* The blog */
.cms-store { position: relative; width: 100%; margin:5% auto; display: flex; flex-wrap:wrap; justify-content: space-between; }
.cms-store li { width: calc(100%/2 - 40px);  height: auto;  margin:50px 20px;  position: relative; display: flex; flex-wrap:wrap;  background-color: #FFF;  box-shadow: 4px 13px 20px 1px rgba(40, 167, 69, 0.1);  border-radius: 20px; }
/* Image on the left side */
.cms-store li .img-box { width: 35%;  height: auto; margin:0px 10px 10px 10px;   overflow: hidden;}
.cms-store li figure img {  width: 100%;  max-width:100%; margin: auto; border-radius: 20px;   }
/* Right side of the blog */
.cms-store li .innner {  width: calc(65% - 30px); position: relative; padding:15px 0px 0px 10px;  }
.cms-store li .news-title {   margin:0px 0px 5px 0px;  font-size: 1.3rem;  color: #50585c; font-weight: 700;transform: scale(1);transition: all 0.3s; }
.cms-store li .news-title a { word-break: break-all; color: #50585c; background-repeat: no-repeat;  will-change: background-size; transition: background-size .3s linear; background-image: linear-gradient(transparent calc(100% - 10px), rgba(254,196,190,.5)  calc(100% - 10px),rgba(254,196,190,.5) calc(100% - 4px),transparent 2px);background-size: 0% 100%;}
.cms-store li .news-title a:hover { background-size: 100% 100%; transform: scale(1.05);}
.cms-store li .author {flex-wrap: wrap; display: flex; flex-direction: row; padding:2px 5px;  width:auto; border-radius: 5px;  background-color: #FFE53B; background-image: linear-gradient( 135deg, #4c9063 20%, #dce034 100%);  overflow: hidden;  word-break: break-all;  text-overflow: ellipsis;   -webkit-box-orient: vertical; }
.cms-store li .author img { margin-left: 10px; height: 30px;  width:30px; border-radius: 50%;  }
.cms-store li .author h4 {  margin:2px 0px; width: 80%; justify-content: flex-start; font-size: 0.875rem;  color: aliceblue;}

.cms-store li .author h4 a { word-break: break-all; color: #fff!important; background-repeat: no-repeat;  will-change: background-size; transition: background-size .3s linear; background-image: linear-gradient(transparent calc(100% - 10px), rgba(254,196,190,.5)  calc(100% - 10px),rgba(254,196,190,.5) calc(100% - 4px),transparent 2px);background-size: 0% 100%;}
.cms-store li .author h4 a:hover { background-size: 100% 100%; transform: scale(1.05);}

.cms-store li .separator { margin-top: 10px;  border: 1px solid #C3C3C3;}
.cms-store li p {margin: 0; padding:0px 10px 10px 10px; vertical-align: top; font-size: .875rem;  line-height:200%; color: #4B4B4B;  text-transform: capitalize; overflow: hidden;  word-break: break-all;  text-overflow: ellipsis;  display:-webkit-box; -webkit-line-clamp:3;  -webkit-box-orient: vertical;  }
.cms-store li .tag { display: flex; flex-wrap: wrap; flex-direction: row; width: 100%; margin:5px auto; transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s; overflow: hidden; text-transform: capitalize;  word-break: keep-all;   z-index: 999; }
.cms-store li .tag a{ width: auto;  color: #fff!important; margin:0px 4px; padding:0px 5px; border-radius:5px;   font-size:0.85rem;  background:#b3ccbc;   }
.cms-store li .tag a:hover{color:#fff; background: #afbabf;  }
@media (max-width:768px) {
.cms-store li { width: calc(100% - 10px);  margin:50px auto;  }
.cms-store li .img-box { width: 100%;  height: auto; margin:10px; display: flex;  justify-content: center;}
.cms-store li figure img {  width: 100%;  max-width:80%; margin:auto; box-shadow:none;  }
.cms-store li .innner {  width: 100%; position: relative; padding: 20px 10px;  }
}