activity widget

activity.css

#activity-list > div.header.ct-header-color {
    background-color: transparent!important;
    border-bottom-color: #DE1F26;
    padding:0;
}

#activity-list > div.header.ct-header-color h3 {
    background-color: #DE1F26;
    width: 200px;
    padding: 0;
    margin:0;
    display: block;
    padding: 10px;
}
#activity-list {
    overflow: auto;
}
#activity-list .activity {
    display: inline-block;
    width: calc( 25% - 10px);
    margin: 5px;
    vertical-align: bottom;
    min-height: 130px;
    background-color: transparent;
    border: 1px solid #eee;
    position: relative;
    height: 251px;
}
#activity-list .image-container {
    background-color: #444!important;
    display:block;
    float:none;
    margin:auto;
    margin-top: 30px;
}

#activity-list > div.container > ul   div.info-container > div.description {
    font-size: 20px;
    line-height: 25.5px;
    display: block;
    float:none;
    width: 100%;
    text-align: center;
}
#activity-list > div.container > ul > li > div.info-container {
    display:block;
    float:none;
    position:relative;
    max-width: 100%;
    margin-top: 30px;
}
#activity-list > div.container > ul > li > div.info-container > div.title.ct-link-color.ng-binding {
   display:none;

}


#activity-list .points-container {
    float: none;
    display: block;
    text-align: center;
    background-color: gold;
    width: 0;
    margin:auto;
    margin-top: 15px;
    border-radius: 30px;
    padding:5px;
    transition: transform .3s cubic-bezier(.21,1.92,.65,.4);
}

#activity-list > div.container > ul > li > div.points-container > div {
    color:black!important;
}


#activity-list .activity:hover .points-container {
     background-color: white;
    color: white!important;
    transform: scale(1.2,1.2);
}