* { box-sizing: border-box; }
html, body { position:relative;font-family: 'Open Sans', sans-serif; overflow:hidden;margin:0;padding:0;height:100%;}

img {max-width:100%;}

#bg {position:absolute;width:100%;height:100%;display:block;z-index:0;}

/* ---- grid ---- */
.grid {
  padding:12px 0 0 15px;
  width:100%;
  height:100%;
  max-width:1600px;
  max-height:800px;
  margin:0 auto;
  z-index:1;
}
/* clearfix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}
/* ---- grid-item ---- */
.grid-sizer,
.grid-item {
  width: 15.9%;
}

.grid-item {
  height: 18.5%;
  float: left;
  background: #f2f2f2;
  border-radius: 5px;
  margin-bottom: 8px;
  overflow:hidden;
}


.grid-item--width100 { width:  98.5%; }
.grid-item--height100 { height: 97.5%; }

.grid-item--width2 { width:  32%; }
.grid-item--width3 { width:  65%; }

.grid-item--height1-5 { height: 29%;}
.grid-item--height2 { height: 38%;overflow:hidden!important; }
.grid-item--height3 { height: 68%; }
.grid-item--height4 { height: 97.5%; }

.logo {background:transparent;text-align:center;}
.logo img {margin-top:5px;max-height:100%;}