.case_study {display: block; height: auto}
.case_study {background-size: 100%;}

.div_btm {position: relative;height: 170px;} 

.case_study .div_btm {height:auto ;max-height: 100%;}

/*** IMPORTANT ***/
.body_container .showcasebox, .body_container .caseboxcontainer,
.body_container .case_study .div_btm {height: 99%; max-height:163px}
/*** IMPORTANT ***/

.case_study img{float: left; height: auto; width: 100%; max-width:280px; min-width: 200px;min-height: 127px;  max-height:160px} 
.case_study img, .div_btm img {max-height: 100%; height:160px}


.case_study_btm {background-image: url("http://static.valpocreative.com/assets/images/case-studies/case_studies_shadow.png");
    background-repeat: no-repeat;
    background-position: 50% 100%;
 bottom: 10px; position: absolute;
padding-bottom:10px;
} 

.case_study_btm {
background: url(http://static.valpocreative.com/assets/images/case-studies/case_studies_shadow.png) no-repeat left bottom;width: 100%;height: 39px;
bottom: 0px;left: 0px;padding:0 10px 10px 10px;  margin-top:-1%} 

.case_study {height: 264px;width: 98%; margin:1%; max-width: 300px;}
.case_study {max-height: 264px;}

.case_study .div_btm {height:auto ;max-height: 100%;}
.case_study .div_btm {height:100% ;min-height: 140px;max-height: 180px;}

.body_container .case_study p {display: block; margin: 10px auto; color: #ED1C24;} /*text-align:center*/


/************ MOBILE ****************/

.div_btm img {max-width:100%; height:auto; min-height:127px} 

/*============= min-width:481px ==============*/
@media all and (min-width:481px) {

.div_top,
.div_btm {width: 98%;margin:1%; float: left;}

.case_study .div_btm {height:160px ;min-height: 140px;max-height: 100% ;}
.div_btm img {min-height: 121px;}



 
 

}/*============= min-width:481px ==============*/


/*============= min-width:481px to 960px ==============*/
@media all and (min-width:481px) and (max-width: 960px) {

.case_study .div_btm {height:148px; min-height: 130px;max-height:100% ;}

.case_study .div_btm {height: auto; max-height:148px}

/******* IMPORTANT ********/
.caseboxcontainer {max-width: 100%;height: 100%; min-height: 130px;max-height: 148px; position: relative;}
.showcase_box_hover {bottom: 0px; position: absolute;}


.body_container .showcasebox, .body_container .caseboxcontainer, .body_container .case_study .div_btm {
height: auto;
min-height: 130px;
max-height: 160px;
position: relative;
}

.case_study_btm {display:none}


.case_study_btm {display:none}

/******* IMPORTANT *********/


}/*============= min-width:481px to 960px ==============*/



/*============= width:580px to 830px ==============*/
@media all and (min-width:580px) and (max-width: 830px) {

.div_top, .div_btm, .case_study_btm {float: left; width:96%; margin:1%}
.DELETEcase_study_btm {margin-left: 1%; margin-right: 1%; width:96%;}

}/*============= min-width:580px ==============*/


/******* IMPORTANT *********/
@media all and (min-width:481px) and (max-width: 580px),
screen and (min-width:721px) and (max-width: 830px) { 

.div_top,
.div_btm, .case_study_btm {max-width:200px}


}/******* IMPORTANT *********/



/*========= WIDTHS: 481PX to 920px =========*/
@media (min-width:481px) and (max-width:920px) {

.div_title,
.div_title .column_cont {width:96%; min-height:24px; margin-bottom:3px; margin-bottom:3px}
.div_title::after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.div_title a {margin-top:2px; margin-bottom:1px}

.case_study {height: 264px;width: 98%; margin:1%; max-width: 300px;}

.div_top,
.div_btm { max-width: 226px;float: left;margin: 1%;padding: 10px;text-align: center;width: 98%;}
.div_btm {height:auto ;min-height: 110px;max-height: 180px;}

.showcasebox img,
.div_btm img, .case_study img {float: left; max-width: 98%; } /*height:auto*/
.case_study_btm {background-size: 100%;}


.case_study_btm {max-width: 226px}

}/*========= WIDTHS: 481PX to 920px =========*/





/*========= WIDTHS: 921PX to 999px =========*/
@media only screen and (min-width:921px) and (max-width: 999px) { 

.case_study {height: 264px;width: 98%; margin:1%; max-width: 300px;}

.div_top,
.div_btm { max-width: 281px; width: 98%;}

.showcasebox img,
.div_btm img, .case_study img {float: left; height:auto; max-width: 98%; } 
.case_study_btm {background-size: 100%; width: 98%}

}/*========= WIDTHS: 921PX to 999px =========*/




@media all and (min-width:481px) and (max-width:830px){

.div_top, .div_btm, .case_study_btm  {width: 96%;}

}

@media all and (min-width:481px) and (max-width:580px){

.div_top, .div_btm, .case_study_btm  {max-width: 206px;}

}




/*******************#############################=================== BOX HOVER ===========##############************/

.showcasebox, .caseboxcontainer {height: 100%;}

/******* IMPORTANT *********/
.caseboxcontainer {max-width: 100%;height: 100%; min-height: 130px;max-height: 160px; position: relative;}
.showcase_box_hover {bottom: 0px; position: absolute;}
/******* IMPORTANT *********/

.showcasebox img{position:absolute;top:0;left:0;border:0; }
                      
/*==Hover==*/
.showcase_box_hover {margin: 0;padding: 0;}
.showcase_box_hover {margin-right: 0; margin-left:0; width:100%} 
.showcase_box_hover{color:#fff;float:left;position:relative; background:rgb(51,152,182);background:#f38121;height:90px; width: 100%; max-width:276px; padding-top:12px;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);filter:alpha(opacity=70);-moz-opacity:0.7;opacity:0.7;}                      

.showcasebox {background-image: none; background-repeat: repeat; background-attachment: scroll; background-position: 0 0; width: 100%; max-width: 276px;max-height: 160px;min-height: 130px; height: auto; position: relative; margin: 8px 1px 0 1px} /* overflow: hidden * /
.showcasebox {background-size: 100%}

.showcasebox:active{border-top-width:4px;border-bottom-width:4px}
.caseboxcontainer .showcase_box_hover{top:156px;left:0;text-shadow:none !important}
.showcase_box_hover .caption{font-size:14px;position:absolute;bottom:30px}
.showcase_box_hover .descr{display: none}

.box_title, .box_title a {padding: 3px 0 3px 0; font-size: 15px;font-family: 'Oswald', sans-serif;font-weight: normal;color: #fff; font-color: #ffffff;line-height: 1.3em;display: block; margin-right: auto; margin-left:auto; text-align:center}

.showcase_box_hover .title{color:#fff;font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:12px;display:block;text-shadow:none}
::-moz-selection{color:#fff;color:rgb(255,255,255);background:#f38121}                            
::selection{color:#fff;color:rgb(255,255,255);color:rgb(255,255,255);background:#f38121}