/* ========================================= LIST ======== */
.case-studies-listing{margin:0;}
.case-study-list-item{
/*    max-width:220px; width:220px;
    max-height:210px;height:210px;
*/    margin:1rem .8rem;float:left;
    border:1px solid #f2f2f2;border-radius:6px;box-shadow:1px 1px 6px rgba(0,0,0,.05);
    padding:.5rem;line-height:1.1em;
    background:rgba(17,52,94,1);transition-duration: .4s

    }
.case-study-list-item{background:rgba(40,89,138,1);}
a .case-study-list-item {color:#fff;text-shadow:1px 1px rgba(0,0,0,.5);}

.cs-image{text-align:center;}
.cs-image img{/*max-height:120px;max-width:200px;*/}
.cs-display-type{font-size:.74rem;font-style:italic;height:1rem;letter-spacing:1px;
        opacity:.6;font-weight:100;
        padding-bottom:2px;margin:-6px 0 2px 0;}

/* ========================================= LIST (v2) ======== */
/*
.case-study-list-item{width:31%;margin: 1rem 3% 1rem 0;position:relative;}
.case-study-list-item.col-0{margin-right:0;}
*/
.cs-img-border{border:1px solid rgba(220,220,220,.25);}
.case-study-list-item .cs-image-frame{position:relative;}
.case-study-list-item .cs-image-frame:before{content: "";display: block;padding-top: 50%; /* force proportional height */}
.case-study-list-item .cs-image{width:100%;position:absolute;top:0;left:0;bottom:0;right:0;overflow:hidden;max-height:100%;height:100%;}

.cs-title{font-size:1.1rem; letter-spacing:1px;height:2.1rem;margin-top:.5rem;font-weight:300;text-align:center;overflow: hidden;}

.case-study-list-item:hover .cs-item-img{
    rotation-point:50% 50%;
    -webkit-transform: scale(1.3) rotate(10deg);
    -moz-transform: scale(1.3) rotate(10deg);
    -ms-transform: scale(1.3) rotate(10deg);
    -o-transform: scale(1.3) rotate(10deg);
    transform: scale(1.3) rotate(10deg);
    }
.case-study-list-item .cs-view-label,
.case-study-list-item .cs-item-img{-webkit-transition: all 0.4s 0.05s;-moz-transition: all 0.4s 0.05s;transition: all 0.4s 0.05s;}
.case-study-list-item .cs-view-label{position:absolute;top:20%;z-index:10; color:rgba(255,255,255,0);text-shadow:none;
        width:94%;text-align:center;
        font-size:200%;}
.case-study-list-item:hover .cs-view-label{color:rgba(255,255,255,1);text-shadow:1px 1px 4px rgba(0,0,0,1);}

/* ========================================= MEDIA - varying sizes ======== */
@media only screen and (min-width: 768px) and (max-width: 959px) {
    .cs-title{font-size:1rem;height:2rem;}
}

@media only screen and (min-width: 481px) and (max-width: 767px) {
    .cs-title{font-size:.85rem;height:3.3rem;}
}

@media only screen and (max-width: 480px) {
    .cs-title{font-size:.7rem;height:3.0rem;}
}