/****Home Page: About mapua milestones thumbnail*********/

.justify-milestones-wrapper{
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding:0px 30px 0px 30px;
}

.milestones-thumbnail-wrapper{
    width: 47% !important;
    text-align: center;
    border-radius: 5px;
    padding: 35px 10px 10px 10px;
    height:90px;
    margin:20px 10px 10px 10px;
}

/****Home Page: About mapua milestones thumbnail*********/















/****Home Page: Academics Thumbnail with Overlay*********/

.text-on-hover{
    display: none;
    transition: 0.8s ease;
    opacity: 1;
    width: 85% !important;
}

.thumbnail-with-overlay-wrapper{

    position: relative;

    width: 100%;

    height: 400px;

    border-radius: 5px;

    padding:0px;

    overflow: hidden;

}

.top-overlay-thumbnail-wrapper{

    transition: 0.5s ease;

    opacity: 1;

    width: 100% !important;

    min-height: 100px !important;

    position: absolute !important;

    bottom: 0;

    left:0;

    padding:10px;

    background: #000000;

    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(46, 46, 46, 0.86) 78%);

}

.thumbnail-with-overlay-wrapper:hover .top-overlay-thumbnail-wrapper {

  opacity: 1;

  background: #DA291C;

  background: linear-gradient(180deg,rgba(218, 41, 28, 0) 0%, rgba(218, 41, 28, 1) 78%);

}

.thumbnail-with-overlay-wrapper:hover .text-on-hover {
  display: block;
}

.thumbnail-with-overlay-wrapper:hover .thumb-overlay-medium-btn {

    opacity: 1;

    transition: 0.3s ease;

    background-color: #ffffff;

    color: #DA291C;

}

/****Home Page: Academics Thumbnail with Overlay*********/















/****Home Page: News Thumbnail with Overlay*********/

.news-thumbnail-with-overlay-wrapper{

    position: relative;

    height: 300px;

    border-radius: 5px;

    padding:0px;

    overflow: hidden;

}

.news-top-overlay-thumbnail-wrapper{

    transition: 0.5s ease;

    opacity: 1;

    width: 100% !important;

    min-height: 100px !important;

    position: absolute !important;

    bottom: 0;

    left:0;

    padding:10px;

    background: #000000;

    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 78%);

}

.news-thumbnail-with-overlay-wrapper:hover .news-top-overlay-thumbnail-wrapper {

  opacity: 1;

  background: #DA291C;

  background: linear-gradient(180deg,rgba(218, 41, 28, 0) 0%, rgba(218, 41, 28, 1) 78%);

}

.news-thumbnail-with-overlay-wrapper:hover .thumb-overlay-medium-btn {

    opacity: 1;

    transition: 0.3s ease;

    background-color: #ffffff;

    color: #DA291C;

}

/****Home Page: News Thumbnail with Overlay*********/