/* grid layout ---------------------------------------- */
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.grid-list, .grid-list-1, .grid-list-2, .grid-list-3, .grid-list-4, .grid-list-5,.grid-list-fixed, .grid-list-1-fixed, .grid-list-2-fixed, .grid-list-3-fixed, .grid-list-4-fixed, .grid-list-5-fixed {
  overflow: hidden;
  margin-right: -10px;
  margin-left: -10px;
  margin-bottom: 20px;
}
.grid-item, .grid-item-2, .grid-item-3, .grid-item-4, .grid-item-5 {
  padding-right: 10px;
  padding-left: 10px;
  margin-bottom: 10px;
  width: 100%;
  float: left;
}
.grid-item.right, .grid-item-2.right, .grid-item-3.right, .grid-item-4.right, .grid-item-5.right {
  float: right;
}
.grid-item img {
  max-width: 100%;
}

.grid-list-1-fixed .grid-item, .grid-list-fixed .grid-item {
  width: 100%;
}
.grid-list-2-fixed .grid-item {
  width: 50%;
}
.grid-list-2-fixed .grid-item-2 {
  width: 100%;
}
.grid-list-3-fixed .grid-item {
  width: 33.33333333%;
}
.grid-list-3-fixed .grid-item-2 {
  width: 66.66666666%;
}
.grid-list-3-fixed .grid-item-3 {
  width: 100%;
}
.grid-list-4-fixed .grid-item {
  width: 25%;
}
.grid-list-4-fixed .grid-item-2 {
  width: 50%;
}
.grid-list-4-fixed .grid-item-3 {
  width: 75%;
}
.grid-list-4-fixed .grid-item-4 {
  width: 100%;
}
.grid-list-5-fixed .grid-item {
  width: 20%;
}
.grid-list-5-fixed .grid-item-2 {
  width: 40%;
}
.grid-list-5-fixed .grid-item-3 {
  width: 60%;
}
.grid-list-5-fixed .grid-item-4 {
  width: 80%;
}
.grid-list-5-fixed .grid-item-5 {
  width: 100%;
}

@media (min-width: 768px) {
  .grid-list-1 .grid-item, .grid-list .grid-item {
    width: 100%;
  }
  .grid-list-2 .grid-item {
    width: 50%;
  }
  .grid-list-2 .grid-item-2 {
    width: 100%;
  }
  .grid-list-3 .grid-item {
    width: 33.33333333%;
  }
  .grid-list-3 .grid-item-2 {
    width: 66.66666666%;
  }
  .grid-list-3 .grid-item-3 {
    width: 100%;
  }
  .grid-list-4 .grid-item {
    width: 25%;
  }
  .grid-list-4 .grid-item-2 {
    width: 50%;
  }
  .grid-list-4 .grid-item-3 {
    width: 75%;
  }
  .grid-list-4 .grid-item-4 {
    width: 100%;
  }
  .grid-list-5 .grid-item {
    width: 20%;
  }
  .grid-list-5 .grid-item-2 {
    width: 40%;
  }
  .grid-list-5 .grid-item-3 {
    width: 60%;
  }
  .grid-list-5 .grid-item-4 {
    width: 80%;
  }
  .grid-list-5 .grid-item-5 {
    width: 100%;
  }
}

.grid-list:after, .grid-list-1:after, .grid-list-2:after, .grid-list-3:after, .grid-list-4:after, .grid-list-5:after,.grid-list-fixed:after, .grid-list-1-fixed:after, .grid-list-2-fixed:after, .grid-list-3-fixed:after, .grid-list-4-fixed:after, .grid-list-5-fixed:after,
.grid-list:before, .grid-list-1:before, .grid-list-2:before, .grid-list-3:before, .grid-list-4:before, .grid-list-5:before,.grid-list-fixed:before, .grid-list-1-fixed:before, .grid-list-2-fixed:before, .grid-list-3-fixed:before, .grid-list-4-fixed:before, .grid-list-5-fixed:before {
  display: table;
  content: " ";
}
.grid-list:after, .grid-list-1:after, .grid-list-2:after, .grid-list-3:after, .grid-list-4:after, .grid-list-5:after,.grid-list-fixed:after, .grid-list-1-fixed:after, .grid-list-2-fixed:after, .grid-list-3-fixed:after, .grid-list-4-fixed:after, .grid-list-5-fixed:after {
  clear: both;
}