#portfolio {
  display: block;
}

#portfolio li {
    display: block;
    float: left;
    width: 22%;
    margin: 0 16px;
    margin-bottom: 20px;
}

#portfolio li img { 
border: 0; 
max-width: 100%; 
}

#portfolio li a {
  display: block;
  padding:0;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  -webkit-box-shadow: 1px 2px 2px rgba(0,0,0,0.25);
  -moz-box-shadow: 1px 2px 2px rgba(0,0,0,0.25);
  box-shadow: 1px 2px 2px rgba(0,0,0,0.25);
}



/** media queries **/

@media(max-width:1024px){
#portfolio li {
    width: 21.8%;
}
}

@media(max-width:768px){
#portfolio li {
    width: 45.8%;
}
}

@media only screen and (max-width:760px) and (min-width:300px){
  #portfolio li {
    width: 100%;
	margin:1% 0;
	float: left;
  }
}