.modcoloredbox.layout1 {
  margin-bottom: 20px ; 
}
.mod-splms-course {
 border-radius: 10px !important;
 box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
 transition: all 0.3s cubic-bezier(.25,.8,.25,1);
 overflow: hidden;
 border: 0;
 margin-bottom: 15px;
 position: relative;
}
.mod-splms-course:hover{
 box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.modcoloredbox.layout1 .mod-splms-course:before {
 content: '';
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%; 
 background-image:linear-gradient(180deg,transparent 50%,#000) !important;
 -webkit-transition: .4s;
 -o-transition: .4s;
 transition: .4s; 
 z-index: 1;
} 
.modcoloredbox.layout1 .mod-splms-course img {
 text-align: center;
 margin: 0 auto 0;
 width: 100%;
 float: right;
 height: 160px;
 overflow: hidden;
 transition: all 1.5s cubic-bezier(0,0,.2,1);
}
.modcoloredbox.layout1 .mod-splms-course:hover img {
 transform: scale3d(1.1,1.1,1.1);
}
.modcoloredbox.layout1 .mod-splms-course .btn-primary {
 padding: 11px 5px !important;
 color: #FFF !important;
 border: none !important;
 position: absolute;
 z-index: 1;
 bottom: 0;
 right: 0;
 left: 0;
 display: inline-block;
 margin: 0 auto;
 width: 100%;
 font-size: 13px;
 background: none;
 box-shadow: none !important;
 display: flex;
 justify-content: center;
 align-items: end;
 height: 100%;
} 
.modcoloredbox.layout1 .mod-splms-course h2.splms-course-title {
 font-size: 15px !important;
 height: auto !important;
 overflow: auto !important;
 line-height: 24px !important;
 margin: 0 !important;
 position: absolute;
 text-align: center;
 width: 100%;
 top: 20px;
 padding: 10px;
 color: #fff;
}

.modcoloredbox.layout2 {
  width: 100%;
  float: right;
}
.modcoloredbox .col-lg-2 {
  padding:0 10px !important;
  margin: 0 0 10px;
  position: relative;
}
.modcoloredbox .row {
  margin: 0 -10px !important;
  justify-content: center;
}
.modcoloredbox.layout2 .item {
  box-shadow: 0px 0px 19px rgba(0,0,0,0.12);
  border-radius: 10px;
  margin: 0 0 20px;
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  position: relative;
  overflow: hidden;
}
.modcoloredbox.layout2 .item:hover{
  box-shadow: 0 9px 20px rgba(0,0,0,0.15),0 4px 10px rgba(0,0,0,0.22);
}
.modcoloredbox.layout2 img {
  text-align: center;
  margin: 0 auto 0; 
  border-radius: 10px 10px 0 0;
  -webkit-transition: all 1.5s cubic-bezier(0,0,.2,1);
  transition: all 1.5s cubic-bezier(0,0,.2,1);
}
.modcoloredbox.layout2 .item h2 {
  overflow: auto;
  height: auto;
  line-height: 22px !important;
  margin:0;
  font-size: 13px !important;
  text-align: center;
  padding: 10px;
}
.modcoloredbox.layout2 .item a{
  color: #333;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  font-size: 0 ;
}
.modcoloredbox.layout2 .item:hover h2{
  color: #e50001;
}
.modcoloredbox.layout2 .item:hover img{
  -webkit-transform: scale3d(1.1,1.1,1.1);
  transform: scale3d(1.1,1.1,1.1);
}

@media (max-width: 995px) {  
    
  .modcoloredbox.layout1 .col-lg-2 { 
    width: 48.6%;
  }
}
@media (max-width: 768px) {  
  
  .modcoloredbox.layout1 .mod-splms-course img {
    height: 150px !important;
}
}