.cms-main-area,.cms-main-content { background: #f2f5f2!important;  position: relative;}
.cms-blog { width: 100%; margin: auto auto 10% auto; display: flex; flex-wrap: wrap; flex-direction: row; justify-content: flex-start; align-content: flex-start; }
.cms-blog li{ width: calc(100%/3 - 20px); margin:30px 10px; flex-wrap: wrap; flex-direction: column; position: relative; background-color: #fff;  border-top-left-radius:15px; border-top-right-radius:15px; transition: all 0.3s linear 0s;  overflow: hidden; box-shadow: 4px 13px 20px 1px rgba(40, 167, 69, 0.1); }
.cms-blog li:hover {box-shadow: 0 1px 35px 0 rgba(0, 0, 0, 0.3); }
.cms-blog li:hover .cms-blog-title{  color: #28a745; }
 
.cms_blog_img {
  position: relative;
  padding-bottom: 100%;
  overflow: hidden;
}
.cms-blog li figure { position: absolute;  width:100%; height:100%;display: flex; align-items: center; justify-content: center;  transition: all 0.5s ease 0s; }
.cms-blog li figure img { width: 100%; max-width: 100%; height: auto; transition: all 0.3s;}
.cms-blog li:hover figure img { transform: scale(1.1);  opacity: 0.6;}
.cms-blog li figure .cms-blog-icon { position: absolute;  top:10px;  right: 10px; background:#686f69;  color: #fff;  font-weight: bold; border-radius: 100%;  height: 55px; width: 55px; display: flex; flex-direction: column; align-items: center; font-size: 12px; text-transform: uppercase;}
.cms-blog-info{ position: relative; display: flex; flex-wrap: wrap; justify-content: flex-start;  padding:10px 20px; height: auto;    }
.cms-blog-category {position: relative; top: -40px; left: 0; max-width:60%; max-height:36px;  padding: 8px 15px; color: #fff;  background:#28a745;  font-size:0.875rem; font-weight: bold; overflow: hidden; word-break:break-all;  text-overflow: ellipsis;  display: -webkit-box; -webkit-line-clamp: 1;  -webkit-box-orient: vertical;  border-bottom-left-radius:15px; border-top-right-radius:15px;   }
.cms-blog-title {  width: 100%;  padding: 0 0 10px;  height:50px; color:#000; font-size:1.15rem; font-weight:700; overflow: hidden; word-break:break-all;  text-overflow: ellipsis;  display: -webkit-box; -webkit-line-clamp: 2;  -webkit-box-orient: vertical; }
#cms-main .cms-blog-info p{ min-height:76px; color: #666; font-size: 0.95rem; line-height: 1.8em;  overflow: hidden; word-break:break-all;  text-overflow: ellipsis;  display: -webkit-box; -webkit-line-clamp: 3;  -webkit-box-orient: vertical;}

@media (max-width: 767.98px) {
.cms-blog li{display: flex; width: calc(100%/2 - 20px); margin: 30px 10px; padding:0px;  min-height:220px;align-content: flex-start; align-items: flex-start;   }
.cms-blog li figure .cms-blog-icon { top:0px;  right: 0px; height: 35px; width: 35px;}
.cms-blog-category {position: relative; top:auto; display: block;  max-width:100%; max-height:26px; padding:0px 5px; font-size:0.75rem; font-weight: 400;  }
.cms-blog-title{ margin-top: 10px;margin-bottom:0px; font-size:0.85rem; }
.cms-blog-info  { position: relative; width: 100%; max-height: 160px; padding:5px;  }
 #cms-main .cms-blog-info p{ min-height:60px;  font-size: 0.75rem; } 
}

.cms-main-post-head { padding: 5% 10% 70px 10%; width: 100%;  display: flex; justify-content: space-between; align-items: flex-start;  }
.cms-main-post-head h1 { font-size: 1.875rem; font-weight:700; color: #2a2a2a; margin: 0;}
.cms-main-post-time{ padding:10px; }
.cms-main-post-time p time{color:#037134; font-size: 0.875rem; font-weight:400;}
.cms-main-post-time p time b{  display: block; font-size:2.5rem; font-weight: 700; font-style: italic; }
.cms-main-post-head .cms-social-icons {display: flex;  justify-content: flex-end;}
.cms-main-post-head .cms-social-icons li,.cms-main-post-head .cms-social-icons li a{ width:20px; height: 20px;}
.cms-main-post-head .cms-social-icons li a{ background-size: 20px 20px; opacity:0.5;  -webkit-transition: all .5s ease-in-out;  -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out;}
.cms-main-post-head .cms-social-icons li a:hover{ opacity:1; -webkit-filter:invert(1); }
.cms-main-post{ display: flex; flex-wrap: wrap; justify-content: center; word-break: break-all; margin-bottom:15%;  }
.cms-main-post h3{margin: 0;text-align: left; font-size: 1.75rem; line-height: 1.2; font-weight:400;color: #000; }
.cms-main-post-photo{ padding:10px; width:30%; }
.cms-main-post-photo img{width: 100%; height: auto;} 
.cms-main-post-pagination{ padding: 45px 0;  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 100%;}
.cms-main-post-pagination h2 {  font-size: 1.125rem; font-weight: 400; max-width: 280px; color: #000000;}
.cms-main-post-pagination .cms-next,.cms-main-post-pagination .cms-prev,.cms-main-post-pagination .cms-back { cursor: pointer; width: 31.333%; position: relative;  display: flex; align-items: center; transition: all 0.4s ease-in-out;  -webkit-transition: all 0.4s ease-in-out;  -moz-transition: all 0.4s ease-in-out;  }
.cms-main-post-pagination .cms-back{justify-content: center;}
.cms-next:hover h2,.cms-prev:hover h2{color:#4c9063!important; }
.cms-next:hover,.cms-prev:hover{color:#28a745!important; -webkit-filter:contrast(2);}
.cms-main-post-pagination .cms-prev { padding-right: 12px;} 
/*.cms-prev:after { content: ''; width: 1px;  height: 50px;  background-color:#343a40; position: absolute; right: 0; top: 6; display: block;}
*/.cms-prev h2 { margin-left: 24px; margin-right: 12px;}
.cms-prev .cms-btn {  margin-left: auto;}
.cms-prev .cms-btn:before {  order: 1;}
.cms-prev .cms-btn:after {  border-width: 5px 5px 5px 0;}
.cms-next { padding-left: 12px; justify-content: flex-end;}
.cms-next h2 { margin-left: 12px;  margin-right: 24px;}
.cms-next .cms-btn { order: 0; margin-right: auto;}
.cms-next h2 { order: 1;}
.cms-next .cms-main-post-time {order: 2;}
.cms-btn { cursor: pointer; width: 35px;  height: 20px; position: relative; display: flex; align-items: center;}
.cms-btn:before { content: ''; width: 30px; height: 1px; background-color: #31315e; display: block;}
.cms-btn:after { content: ''; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 5px; border-color: transparent #31315e; display: block;}
.cms-next .cms-main-post-photo{order:4; }
@media (max-width: 767.98px) {
.cms-main-post-head { padding: 5% 10% 20px 10%;   }   
.cms-main-post .cms-blog-category {position: relative; padding: 2px 5px;top:auto;}
.cms-main-post h1{ font-size: 1.5rem;  }
.cms-main-post-pagination h2 { }
.cms-main-post-head .cms-social-icons {  justify-content:center;}
.cms-main-post-photo{ display: none;}
}