@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 #D2D5FF;}
.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: #021C29; background: #E2E4FE; width: 100%; padding: 16px 4px; position: absolute; border-bottom: 1px solid #E2E2E2;
				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: #2283B6;  color: #fff;}

.showcase a p {	background: #E2E4FE; color: #2A9FD0; font-size: 13px; padding: 12px 20px; position:absolute; bottom:-160px;
				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: #2283B6; 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:-64px;}
.showcase a:hover p { bottom:-12px;}
}