#mixed-items .mix { display: none; }
#portfolio { padding: 50px 0; }
#portfolio .block .recent-work-mixMenu { padding-bottom: 40px; text-align: center; }
#portfolio .block .recent-work-mixMenu ul li { display: inline-block; padding: 0; }
#portfolio .block .recent-work-mixMenu ul li button { background: #fff; border: #383737 solid 1px; font-size: 15px; color: #383737; margin: 0 5px; transition: 0.2s; text-transform: uppercase; padding: 10px 15px; }
#portfolio .block .recent-work-mixMenu ul li button:hover { background: #ffd700; border: #ffd700 solid 1px; }
#portfolio .block .recent-work-mixMenu ul li button:focus { background: #ffd700; border: #ffd700 solid 1px; outline: 0; }
#portfolio .block .recent-work-mixMenu ul li .active { background: #ffd700; border: #ffd700 solid 1px; }
#portfolio .block .recent-work-pic ul li { margin-bottom: 30px; position: relative; }
#portfolio .block .recent-work-pic ul li:hover .overlay-black { opacity: 1; }
#portfolio .block .recent-work-pic ul li:hover .overlay { opacity: 1; }
#portfolio .block .recent-work-pic ul li:hover .overlay .fa { top: 45%; opacity: 1; }
#portfolio .block .recent-work-pic ul li:hover .overlay h3 { bottom: 55%; opacity: 1; }
#portfolio .block .recent-work-pic ul li .overlay-black { position: absolute; top: 0; left:0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); transition: 0.3s; text-align: center; opacity: 0; }
#portfolio .block .recent-work-pic ul li .overlay { position: absolute; top: 20px; left: 20px; bottom: 20px; right: 20px; border: #fff solid 1px; background: transparent; transition: 0.5s; text-align: center; opacity: 0; }
#portfolio .block .recent-work-pic ul li .overlay .fa{ top: 30%; opacity: 0; left: 50%; transition: 0.3s; transition-delay: 0s; position: absolute; transform: translate(-50%, 50%); padding-top: 5px; width: 40px; height: 40px; font-size: 24px; border-radius: 50%; border: #ffd700 solid 2px; color: #ffd700; }
#portfolio .block .recent-work-pic ul li .overlay h3 { bottom: 30%; left: 50%; opacity: 0; text-transform: uppercase; font-size: 18px; color: #fff; font-weight: 400; width: 100%; transition: 0.3s; position: absolute; transition-delay: 0.1s; transform: translateX(-50%); }
#portfolio .block .recent-work-pic ul li .overlay .overlay-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

#portfolio .block .recent-work-pic ul li{ margin: 0; padding: 0; height: 298px; }
#portfolio .block .recent-work-pic ul li:nth-child(1){ background: #1abc9c; }
#portfolio .block .recent-work-pic ul li:nth-child(2){ background: #2ecc71; }
#portfolio .block .recent-work-pic ul li:nth-child(3){ background: #3498db; }
#portfolio .block .recent-work-pic ul li:nth-child(4){ background: #9b59b6; }
#portfolio .block .recent-work-pic ul li:nth-child(5){ background: #f1c40f; }
#portfolio .block .recent-work-pic ul li:nth-child(6){ background: #e67e22; }
#portfolio .block .recent-work-pic ul li:nth-child(7){ background: #e74c3c; }
#portfolio .block .recent-work-pic ul li:nth-child(8){ background: #95a5a6; }
#portfolio .block .recent-work-pic ul li img{ width: 100%; }

/* animation keyfrem */
@-webkit-keyframes wiggle {
  from {
    top: 10px;
  }
  to {
    top: 20px;
  }
}
@-moz-keyframes wiggle {
  from {
    top: 10px;
  }
  to {
    top: 20px;
  }
}
@-o-keyframes wiggle {
  from {
    top: 10px;
  }
  to {
    top: 20px;
  }
}
@keyframes wiggle {
  from {
    top: 10px;
  }
  to {
    top: 20px;
  }
}