/* @override http://newmediacampaigns.com/css/compiled.css */

/* Eric Meyer Reset */
ul#portfolio-filter {
/*margin: -20px 0;*/
padding: 0;
/*height: 64px;*/
}
ul#portfolio-filter li {
display: inline-block;
}
ul#portfolio-filter a {
display: inline-block;padding: 0px 22px;margin: 0px 7px 0px 0px;
    list-style: none;
    cursor: pointer;
    float: none;
	color:#585857;
	background-color:#fff !important;
	height:36px;
	line-height:36px;
	font-family:'robotocondensed-bold';font-size: 18px;
	border-radius:4px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border:1px solid #585857; text-decoration:none;

}
ul#portfolio-filter a:hover, ul#portfolio-filter a.current {
background-color: #37a3dc !important;
color:#fff !important;
border:1px solid #37a3dc;
transition-duration: .6s; transition-timing-function: ease;
}
ul#portfolio-filter a.current {
background-color: #37a3dc !important;
}
ul#portfolio-list {
margin: 36px 0 0 0;
padding: 0;
list-style: none;
}
ul#portfolio-list li {
    float: left;
    margin: 0 2% 40px 0;
    overflow: hidden;
    position: relative;
    width: 22.5%;
	transition-property: transform, opacity;
	transition-duration: 0.8s;
}
ul#portfolio-list li img{
    width: 100%;
}
ul#portfolio-list li a {
display: block;
/*width: 163px;
height: 120px;*/
overflow: hidden;
/*border: 1px solid #CDCDCD;
background: #eee;*/
}
ul#portfolio-list li a:hover .mosai-overlay {opacity:1;}
ul#portfolio-list li a:hover img, ul#portfolio-list li a:hover .gal-text{opacity:0.7;transition-duration: .3s; transition-timing-function: ease; }
ul#portfolio-list li a:hover .hover-img{
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}