@charset "utf-8";
/* CSS Document */

#box-container { margin:24px auto 12px auto; width:100%;}

.showcase { list-style: none; padding: 0px; height: 224px;}
.showcase li { float: left; width: 249px; height: 224px; overflow: hidden; margin: 0 12px 21px 0; border: 1px solid #DECDB3;}
.showcase a { display: block; width: 249px; height: 224px; overflow: hidden; position: relative; text-decoration: none;}

.showcase a img { margin-top:45px; }
.showcase a:hover img { opacity: 0.4;}

.showcase a h3 { font-size: 13px; color: #color: #583B1A;; background: #ECDFCB; width: 100%; padding: 16px 4px; position: absolute; border-bottom: 1px solid #E7D7C1;
				left:0px; top:0px; cursor: pointer; text-align:center;
				-webkit-transition: all 0.2s ease-out;
				-moz-transition: all 0.2s ease-out;
				-o-transition: all 0.2s ease-out;
				transition: all 0.2s ease-out;}
.showcase a:hover h3 { bottom:66px; background: #79552B;  color: #fff;}

.showcase a p {	background: #CDB99C; color: #79552B; font-size: 13px; padding: 12px 20px; position:absolute; bottom:-200px;
				line-height: 20px; display: block; width: 224px; cursor: pointer; 
				-webkit-transition: all 0.2s ease-out;
				-moz-transition: all 0.2s ease-out;
				-o-transition: all 0.2s ease-out;
				transition: all 0.2s ease-out;}
.showcase a:hover p { bottom: 0px; background: #79552B; bottom:-15px; color: #fff;}


@media all and (max-width: 555px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 999px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 999px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 999px), only screen and (min-device-pixel-ratio: 2) and (max-width: 999px), only screen and (min-resolution: 192dpi) and (max-width: 999px), only screen and (min-resolution: 2dppx) and (max-width: 999px) {
.showcase li { width: 100%; }
.showcase a {width: 100%; }
.showcase a:hover h3 { bottom:50px; }
.showcase a p {	width: 94%; bottom:-200px;}
.showcase a:hover p { bottom:-12px;}
}