@import url('http://fonts.googleapis.com/css?family=Gabriela');

html, body, div, span, applet, object, iframe, h1, h2, h3, 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 {
  
}
html {  }
body {
  
}





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

h1 {
 
}

/** page structure **/
#wrapper {
  
}

#portfolio {
  display: block;
  border: none;
    padding: 0;
}

#portfolio li {
      display: block;
    float: left;
    border: #e2e2e2 1px solid;
    /* border-radius: 5px; */
    margin-right: 20px;
    margin-bottom: 20px;
    padding: 9px;
}

#portfolio li a {
  display: block;
 
  background: #fff;
 
 
}

.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;
  }
}