* { box-sizing: border-box; }

body { font-family: sans-serif;}

/* ---- grid ---- */

.grid {
  position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: -17px; /* Increase/Decrease this value for cross-browser compatibility */
    overflow-y: scroll;
  padding-top:4.7%;
  background: #FFF;
}

/* clearfix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- grid-item ---- */

.grid-item {
  width: 33%;
  height: auto;
  float: left;
  background:#FFF;
  margin:1%;
}

.grid-item--width1 { width: 27%; }
.grid-item--width2 { width: 27%; }
.grid-item--width3 { width: 25%; }
.grid-item--width4 { width: 30%; }
.grid-item--width5 { width: 60%; }
.grid-item--width6 { width: 20%; }
.grid-item--width7 { width: 40%; }
.grid-item--width8 { width: 45%; }
.grid-item--width9 { width: 17%; }
.grid-item--width10 { width: 55%; }
.grid-item--width11 { width: 37%; }
.grid-item--width12 { width: 43%; }
.grid-item--width13 { width: 48%; }
.grid-item--width14 { width: 27%; }
.grid-item--width15 { width: 40%; }
.grid-item--width16 { width: 49%; }
.grid-item--width17 { width: 35%; }
.grid-item--width18 { width: 25.2%; }
.grid-item--width19 { width: 28.8%; }
.grid-item--width20 { width: 56%; }
.grid-item--width21 { width: 98%; }
.grid-item--width22 { width: 47%; }
.grid-item--width23 { width: 50%; }
.grid-item--width24 { width: 23.2%; }
.grid-item--width25 { width: 31.6%; }
.grid-item--width26 { width: 63.2%; }
.grid-item--width27 { width: 32.6%; }
.grid-item--width28 { width: 61.6%; }












.grid-item--height1 { margin-top: 3%; }
.grid-item--top { margin-top: 3%; }
.grid-item--top2 { margin-top: -9%; }
.grid-item--top3 { margin-top: -20%; }
.grid-item--top4 { margin-top: -11.5%; }
.grid-item--top5 { margin-top: -24%; }
.grid-item--top6 { margin-top: -13%; }
.grid-item--top7 { margin-top: -0.5%; }
.grid-item--top8 { margin-top: -10.5%; }
.grid-item--top9 { margin-top: 6%; }
.grid-item--top10 { margin-top: -55%; }
.grid-item--top11 { margin-top: -10%; }
.grid-item--top12 { margin-top: -59.5%; }
.grid-item--top13 { margin-top: -16%; }
.grid-item--top14 { margin-top: 0; }
.grid-item--top15 { margin-top: -52%; }
.grid-item--top16 { margin-top: -34.3%; }







.grid-item--left { margin-left: 4%; }
.grid-item--left2 { margin-left: 5%; }
.grid-item--left3 { margin-left: 16%; }
.grid-item--left4 { margin-left: 10%; }


.grid-item--floatright { 
	float: RIGHT;
 }

.bontail {
	width:100%;
	height:100%;
	display:block;
}

@media all and (max-width: 1000px) and (min-width: 0px) {
	.grid {
  padding-top:80px;
}
.grid-item {
  width: 100%;
  max-width: 100%;
  height: auto;
  float: left;
  background:#FFF;	
  margin:1%;
  padding-right:2%;
  margin-bottom:0;
}

}