﻿
/*
<div.eachActivity_style05 >
    <a.imgList >
        <img.pic > <img.pic >  // with width and height in px
    </a >
    <div.right >
        <a.caption />
        <p.description />
    </div >
</div>
*/

.eachActivity_style05 {
    box-sizing: border-box;
    border-top: none 0;
    border-left: none 0;
    border-right: none 0;
    border-bottom: solid 1px #cccccc;
    padding: 1rem;
    overflow: hidden;
    display : flex;
    flex-direction : row;
    justify-content : flex-start;
    align-items : flex-start;
}

    .eachActivity_style05 .imgList {
        display: flex;
        flex-grow: 0;
        flex-shrink: 1;
        order: 2;
        margin-left: 1rem;
    }

        .eachActivity_style05 .imgList .pic {
            margin: 0 0 0 1rem;
            /*max-width: 100%;*/
            min-width: 150px;
            height: auto;
        }

    .eachActivity_style05 .right {
        order: 1;
        flex-grow: 1;
        flex-shrink: 1;
    }

    .eachActivity_style05 .caption {
        font-weight: bolder;
    }

.eachActivity_style05 .description
{

}

@media (max-width: 480px) {
    .eachActivity_style05 {
        display: block;
    }
    .eachActivity_style05 .imgList {
        margin-left: 0;
    }

        .eachActivity_style05 .imgList .pic {
            margin: 0 1rem 0 0;
        }
}

@media (min-width: 481px) and (max-width: 767px) {
}

@media (min-width: 768px) and (max-width: 979px) {
}

@media (min-width: 980px) and (max-width:1199px) {
}

@media (min-width: 1200px) and (max-width:1919px) {
}

@media (min-width: 1920px) {
}
