

.portfolio-grid {
list-style: none;
padding: 0;
margin: 0 auto;
text-align: center;
width: 100%;
}

.portfolio-grid li {
display: inline-block;
margin: 5px 15px 5px 15px;
vertical-align: top;
width:200px;
}
.portfolio-grid li span{width: 100%; height:32px; line-height:32px;}

.portfolio-grid li > a,
.portfolio-grid li > a img {
width: 100%; height:149px;
border: none;
outline: none;
display: block;
position: relative;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
}

.portfolio-grid li > a img:hover {
border-radius: 50%;
z-index: 9999;
}


/******************************************
Animate.CSS By Dan Eden
******************************************/

.animated{-webkit-animation-duration:1s;-moz-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;}
@-webkit-keyframes flipInX {
0% {
-webkit-transform: perspective(400px) rotateX(90deg);
opacity: 0;
}

40% {
-webkit-transform: perspective(400px) rotateX(-10deg);
}

70% {
-webkit-transform: perspective(400px) rotateX(10deg);
}

100% {
-webkit-transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
@-moz-keyframes flipInX {
0% {
-moz-transform: perspective(400px) rotateX(90deg);
opacity: 0;
}

40% {
-moz-transform: perspective(400px) rotateX(-10deg);
}

70% {
-moz-transform: perspective(400px) rotateX(10deg);
}

100% {
-moz-transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
@-o-keyframes flipInX {
0% {
-o-transform: perspective(400px) rotateX(90deg);
opacity: 0;
}

40% {
-o-transform: perspective(400px) rotateX(-10deg);
}

70% {
-o-transform: perspective(400px) rotateX(10deg);
}

100% {
-o-transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
@keyframes flipInX {
0% {
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}

40% {
transform: perspective(400px) rotateX(-10deg);
}

70% {
transform: perspective(400px) rotateX(10deg);
}

100% {
transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}

.flipInX {
-webkit-backface-visibility: visible !important;
-webkit-animation-name: flipInX;
-moz-backface-visibility: visible !important;
-moz-animation-name: flipInX;
-o-backface-visibility: visible !important;
-o-animation-name: flipInX;
backface-visibility: visible !important;
animation-name: flipInX;
}	