/* CSS Document */


/* Build process

% cd /Users/kjiang/WebConsulting/ColeChurch/HaFu/HPAC/www-publicweb/camp-dev/fts
% grunt build

Then copy to HUIT cloud folder and upload

For video ratio, modify sass/_helperscontent-elements/_cards.scss
*/


.list-cards .card--media-left .card__media {
    width: 200px;
}

.list-cards .card--media-left {
    padding-left: 200px;
    min-height: 200px;
    margin-bottom: 20px;
}

.card-callout__content {
    background: rgba(0,0,0,0.3);
}

@media screen and (max-width: 749px){
    .list-cards .card--media-left .card__media {
        position: absolute;
    }
}

@media screen and (max-width: 659px){
    .list-cards  .card--media-left {
        padding-left: 120px;
        min-height: 120px;
    }

    .list-cards .card--media-left .card__media {
        width: 120px;
    }
}

@media screen and (max-width: 449px){
    .list-cards  .card--media-left {
        padding-left: 80px;
        min-height: 80px;
    }

    .list-cards .card--media-left .card__media {
        width: 80px;
    }
}


/*
 Accordion
 */
.accordion {
    background-color: #F3F3F1;
    cursor: pointer;
    padding: 18px;
    transition: 0.25s;
    margin: 5px 0;
    color: #a51c30;
    /*font-family: 'Merriweather Sans Bold', Arial, sans-serif;*/
}

.accordion.active, .accordion:hover {
    background-color: #F4EDCA;
    color: black
}

.panel {
    padding: 0 18px;
    font-size: 0.9em;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

/*
 Utility classes
 */
.max-100 {
    max-width: 100%;
}