html, body, div, span, applet, object, iframe, h1, h2, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  outline: none;
  font-size:13px;
}

html { overflow-y: scroll; }
body {
  font-family: 'Arial', Helvetica, Arial, sans-serif;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }

/** page structure **/
#wrapper {
  display: block;
  max-width: 1100px;
  margin: 10px auto;
}

#portfolio {
  display: block;
}

#portfolio li {
  display: block;
  float: left;
  width: 30%;
  max-width: 400px;
  margin-right: 20px;
  margin-bottom: 20px;
}

#portfolio li a {
  display: block;
  border: 1px solid #c9c9c9;
}

.mfp-title {
  font-size: 1.2em;
  color: #ddd !important;
  font-weight: 700;
}

/** clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
 
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }


/** media queries **/
@media screen and (max-width: 780px) {
  #portfolio li {
    width: 45%;
  }
}

@media screen and (max-width: 550px) {
  #portfolio { 
    text-align: center;
  }
  
  #portfolio li {
    float: none;
    display: inline-block;
    width: 80%;
    margin-bottom: 30px;
  }
}