.activity-top {
    background: #FFFFFF;
    box-shadow: 0px 2px 8px 0px #E6E6E6;
}
.activity-top-media {
    width: 100%;
}
.activity-top-media img{
    width: 100%;
    height:215px;
    overflow:hidden;
}
.activity-top-content {
    padding:30px;
}
.activity-top-title {
    font-size:16px;
    line-height:22px;
   font-weight:bold;
}
.activity-top-description {
 line-height:22px;
 margin-top:10px;
 word-break:break-all;
}
.activity-top-date {
    font-size: 12px;
    line-height: 20px;
    margin-top:10px;
    font-weight: bold;
}

.activity-intro {
    margin:30px 15px;
}
.activity-intro-description {
    font-size: 14px;
    font-weight: bold;
    line-height: 32px;
    text-align: center;
    margin-top: 20px;
}


.activity-content {
    padding: 0px 15px;
}

.activities-filter {
    padding:15px 20px;
    height: 30px;
    text-align: right;
    vertical-align: middle;
}

    .activities-filter span {
        font-size: 14px;
        color: #78232f;
        cursor: pointer;
    }

    .activities-filter svg {
        width: 12px;
        height: 12px;
        fill: #78232f;
        cursor: pointer;
    }

    .activities-filter .filter-container {
        width: 85px;
        padding: 20px;
        min-height: 100px;
        background: #FFFFFF;
        box-shadow: 0px 2px 18px 0px rgba(200,200,200,0.5000);
        position: absolute;
        margin-top: 10px;
        right:15px;
        display: none;
        z-index:99;
    }

        .activities-filter .filter-container::before {
            content: "";
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: #FFFFFF;
            transform: rotate(45deg);
            top: -5px;
            right: 10px;
        }

    .activities-filter li {
        height: 30px;
        line-height: 24px;
        text-align: left;
        font-size: 14px;
        font-weight: bold;
        cursor: pointer;
    }

        .activities-filter li span {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            border: 1px solid rgba(200,200,200,0.5000);
            display: inline-block;
            margin-right: 15px;
            position: relative;
            top: 4px;
        }

        .activities-filter li:hover span {
            border: 1px solid #78232f;
        }

    .activities-filter .liactive span {
        border: 1px solid #78232f;
    }

    .activities-filter li span::before {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        display: inline-block;
        margin-right: 15px;
        background-color: #FFFFFF;
        content: " ";
        position: relative;
        top: -4px;
        left: 3px;
    }

    .activities-filter li:hover span::before {
        background-color: #78232f;
    }

    .activities-filter .liactive span::before {
        background-color: #78232f;
    }


    .activities-filter li .active {
        border: 1px solid #78232f;
    }

        .activities-filter li .active::before {
            background-color: #78232f;
        }

.activity-select {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 1.5rem;
}
    .activities-item {
        padding: 30px 15px;
        background-color: #FFFFFF;
        margin-bottom: 40px;
    }

.activities-item-video, .activities-item-media {
    width: 160px;
    height: 160px;
    float: left;
    margin-right: 30px;
}

    .activities-item-video img, .activities-item-media img {
        width: 160px;
        height: 160px;
    }

    .activities-item-video a::after {
        bottom: 60px;
        left: 15px;
        top: auto;
        width: 40px;
        height: 40px;
        position: relative;
        background-color: rgba(0,0,0,.5);
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M1.447.724l16.764 8.382a1 1 0 0 1 0 1.788L1.447 19.276A1 1 0 0 1 0 18.382V1.618A1 1 0 0 1 1.447.724z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position-x: 12px;
        background-position-y: 10px;
        border: 2px solid #FFFFFF;
        border-radius: 50%;
        content: " ";
        z-index: 1;
        display: inline-block;
    }

    .activities-item-video a:hover::after {
        background-color: #78232F;
        border: 2px solid #78232F;
    }

.activities-item-text {
}

.activities-item-title {
    font-size: 22px;
    line-height: 40px;
    letter-spacing: 1px;
}

.activities-item-author {
    font-size: 14px;
    line-height: 32px;
}

.activities-item-date {
    font-size: 14px;
    line-height: 32px;
}

.activities-item-description {
    font-size: 16px;
    line-height: 28px;
    letter-spacing: 1px;
    font-weight: bold;
}