.fragment.Events {
    background-color: #f5f5f5;
}



    .fragment.Events .item {
        position: relative;
        min-height: 250px;
        overflow: hidden;
        padding: 30px 5% 30px 5%;
        border-bottom: solid 1px #e6e6e6;
    }

    .fragment.Events img {
        width: 100%;
        height: auto;
        display: block;
    }

    .fragment.Events p, .fragment.Events a {
        display: block;
        font-family: 'Ubuntu', sans-serif;
        margin: 0;
        clear: both;
        color: #3a4149;
    }

    .fragment.Events .text {
    }

        .fragment.Events .text > .title {
            font-size: 30px;
            margin-top: 38px;
            margin-bottom: -3px;
        }



        .fragment.Events .text > .description {
            margin-top: 24px;
            font-size: 20px;
        }

        .fragment.Events .text > .action {
            font-family: 'Ubuntu Condensed', sans-serif;
            font-size: 14px;
            line-height: 14px;
            height: 14px;
            color: #0096d5;
            text-decoration: none;
            padding-left: 15px;
            background: url('/images/readmorearrow.png') no-repeat left center;
            margin-top: 15px;
        }



@media screen and (min-width: 710px) {
    .fragment.Events .item {
        min-height: 250px;
        padding: 30px 3.4% 30px 8.8%;
    }

    .fragment.Events .text {
        float: left;
        width: 46.9%;
    }

    .fragment.Events .imageholder {
        width: 45.4%;
        float: right;
    }

    .fragment.Events .text > .action {
        margin: 0;
        position: absolute;
        bottom: 30px;
    }
}




@media screen and (max-width: 640px) {
    .fragment.Events .text > .description {
        font-size: 16px;
    }
}