.portfolio-items {
    /*float: left;*/
	box-sizing: border-box;
    display: inline-block;
    padding: 1% 1%;
    vertical-align: top;
    width: 33.333333%;
	position: relative;
}
.caption {
   color: #fff;
    position: absolute;
    width: 100%;
	height: 100%;
	background-color:#013865;
	/*background: url("../img/bg-caption.gif") no-repeat scroll 0 0 transparent;*/
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    float: left;
	top: 0px;
	left: 0px;
	right: 0px;
	margin: 0px 0px 0px 0px;
	padding: 0px;
	
	filter:alpha(opacity=90);
    -moz-opacity:0.9;
    -khtml-opacity: 0.9;
    opacity: 0.9;
	white-space: nowrap;

    text-align: center;
    text-transform: capitalize;
    white-space: nowrap;

	-webkit-transition: 0.5s all ease-in-out;
	-moz-transition: 0.5s all ease-in-out;
	-ms-transition: 0.5s all ease-in-out;
	transition: 0.5s all ease-in-out;
}
.caption span.typeService{
    color: #FF6600;
	font-size: 12px;
	margin: 0px 0px 0px 0px;
	padding: 10px 0px 0px 0px;

}
.portfolio-items a{
 /*box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.5);*/
    width: 100%;
    height: 100%;
    box-shadow: 3px 3px 5px 0 rgba(50, 50, 50, 0.88);
    display: inline-block;
    overflow: hidden;
    position: relative;
	
}
.portfolio-items a > img {
    display: block;	
	height: auto;
    max-width: 100%;
    width: auto;
	vertical-align: middle;
}
.portfolio-items .caption::after {
    content: "";
    display: inline-block;
    height: 100%;
    margin: 0 0 0 -5px;
    overflow: hidden;
    vertical-align: middle;
    width: 1px;
}

.caption .captionFrame {
    box-sizing: border-box;
    display: inline-block;
    padding: 10px 22px 10px 20px;
    vertical-align: middle;
    white-space: normal;
    width: 100%;
}

.caption .websites,.caption .development,.caption .app,.caption .logos{
    width: 80px;
	display: inline-block;
    margin: 0 0 17px;
    padding-bottom: 80px;
}
.caption .websites {
    background: url("../portfolio-img/website-design-icon.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
}
.caption .development {
    background: url("../portfolio-img/web-development-icon.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
}
.caption .app{
    background: url("../portfolio-img/app-icon.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
}
.caption .logos{
    background: url("../portfolio-img/logo-icon.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
}
.caption .title {
	font-size: 18px;
	line-height:1.125em;
	color:#fff;
	text-decoration:none;
	font-weight:normal;
	border-bottom:1px solid #fff;
	padding:0 0 4px;
	margin:0 0 5px;
	text-transform:uppercase;
	display:block;
	text-align:center;
}
.caption strong {font-weight: normal;}

/*.portfolio-overlay {
	display: block;
	z-index: 1;
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	opacity: 0;
	*filter: alpha(opacity=0);
	background: rgba(16,126,157,0.85);
	-webkit-transition: 0.5s all ease-in-out;
	-moz-transition: 0.5s all ease-in-out;
	-o-transition: 0.5s all ease-in-out;
	transition: 0.5s all ease-in-out;
}

.portfolio .hover .portfolio-overlay {
	opacity: 1;
	*filter: alpha(opacity=100);
}
.portfolio .hover .portfolio-overlay {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.portfolio .caption:after{
	content:'';
	display:inline-block;
	height:100%;
	width:1px;
	overflow:hidden;
	margin:0 0 0 -5px;
	vertical-align:middle;
}*/

@media (max-width: 767px) {
.portfolio-items{ width: 49%; } .caption .captionFrame { padding: 0px;}.caption .title {font-size: 14px; padding-top: 0px;}
.caption .websites, .caption .development, .caption .app, .caption .logos {margin: 0 0 5px;}
}
@media (max-width: 479px) {
.portfolio-items{ width: 98%;}  .caption .captionFrame { padding: 5px 11px 5px 10px;}
}