/* portfolio filter */
#portfolio-filter li{
  line-height: 18px;
  margin:0 3px 12px 0;
  float: left;
  padding: 10px;
  cursor:pointer;
  border-radius:3px;
  transition: background 0.1s ease-in-out;
}

#portfolio-filter li:hover{
	background:#E8E8E8 !important;
}

.gold, .silver, .bronze{
	display:none;
}

/* main portfolio container */
.portfolio-box{
  width: 303px;
  max-width:100%;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
  background-size:cover;
  float:left;
  margin: 0 10px 10px 0;
  cursor:pointer;
  position:relative;
  -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

/* show company name */
.portfolio-inner{
  color:#fff;
  background:#000; /* fallback */
  background:rgba(0,0,0,0.7);
  padding:100px 0px;
  text-align:center;
  box-sizing:border-box;
  filter: alpha(opacity=0); /* fallback */
  opacity:0;
  transition: all 0.3s ease-in-out;
}

.portfolio-box:hover .portfolio-inner{
  filter: alpha(opacity=100); /* fallback */
  opacity:1;
}

/* additional project information */
.portfolio-info{
  display:none;
  position: absolute;
  top: 230px;
  z-index: 90;
  width:500px;
  max-width:100vw;
  box-sizing:border-box;
  background:#222;
  padding:20px;
  color:#fff;
}

.portfolio-info .col-half{
  width:50%;
  float:left;
  font-size: 12px;
  margin-top: 0;
  padding:0 10px 0 10px;
  box-sizing:border-box;
  color:#999;
}

.portfolio-info img{
    width:100%;
}

.portfolio-info a.link-button{
  display:block;
  padding: 8px 10px;
  background: #454545;
  background: -moz-linear-gradient( top, #303030 0%, #262626);
  background: -webkit-gradient( linear, left top, left bottom, from(#303030), to(#262626));
  border-radius: 1px;
  border: 1px solid #141414;
  color: #9f9f9f;
  text-align: center;
  text-decoration:none;
  text-shadow: 0 -1px 0 rgba(0,0,0,.5);
}

.portfolio-info:before{
  content:"";
  position:absolute;
  top:-10px;
  left:20px;
  display:block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #222 transparent;
}

/* clearfix */
.portfolio-info:after{
  content:"";
  display:block;
  clear:both;
}

/* responsive styles */
@media only screen and (max-width: 730px){ 
	.portfolio-info, .portfolio-info, .col-half{
	  width:100% !important;
	}
}