/*
--------------------------------------------------------------------------------------

	OU Grid
	objects.grid.css

--------------------------------------------------------------------------------------
*/

/* clear */

.ou-grid:after {
  content: " ";
  display: block;
  clear: both;
}

/* grid */

.ou-grid {
  margin-bottom: 20px;
}

.ou-grid__1,
.ou-grid__2,
.ou-grid__3,
.ou-grid__4,
.ou-grid__5,
.ou-grid__6,
.ou-grid__7,
.ou-grid__8,
.ou-grid__9,
.ou-grid__10,
.ou-grid__11,
.ou-grid__12 {
  float: left;
  display: block;
  margin-left: 2%;
}

.ou-grid__1 {
  width: 6.5%;
}
.ou-grid__2 {
  width: 15%;
}
.ou-grid__3 {
  width: 23.5%;
}
.ou-grid__4 {
  width: 32%;
}
.ou-grid__5 {
  width: 40.5%;
}
.ou-grid__6 {
  width: 49%;
}
.ou-grid__7 {
  width: 57.5%;
}
.ou-grid__8 {
  width: 66%;
}
.ou-grid__9 {
  width: 74.5%;
}
.ou-grid__10 {
  width: 83%;
}
.ou-grid__11 {
  width: 91.5%;
}
.ou-grid__12 {
  width: 100%;
  margin-left: 0;
}

.ou-grid > div:first-child {
  margin-left: 0;
}

/* offset */

.ou-grid > .ou-grid--offset1:first-child {
  margin-left: 8.5%;
}
.ou-grid > .ou-grid--offset1 {
  margin-left: 10.5%;
}

.ou-grid > .ou-grid--offset2:first-child {
  margin-left: 17%;
}
.ou-grid > .ou-grid--offset2 {
  margin-left: 19%;
}

.ou-grid > .ou-grid--offset3:first-child {
  margin-left: 25.5%;
}
.ou-grid > .ou-grid--offset3 {
  margin-left: 27.5%;
}

.ou-grid > .ou-grid--offset4:first-child {
  margin-left: 34%;
}
.ou-grid > .ou-grid--offset4 {
  margin-left: 36%;
}

.ou-grid > .ou-grid--offset5:first-child {
  margin-left: 42.5%;
}
.ou-grid > .ou-grid--offset5 {
  margin-left: 44.5%;
}

.ou-grid > .ou-grid--offset6:first-child {
  margin-left: 51%;
}
.ou-grid > .ou-grid--offset6 {
  margin-left: 53%;
}

.ou-grid > .ou-grid--offset7:first-child {
  margin-left: 59.5%;
}
.ou-grid > .ou-grid--offset7 {
  margin-left: 61.5%;
}

.ou-grid > .ou-grid--offset8:first-child {
  margin-left: 68%;
}
.ou-grid > .ou-grid--offset8 {
  margin-left: 70%;
}

.ou-grid > .ou-grid--offset9:first-child {
  margin-left: 76.5%;
}
.ou-grid > .ou-grid--offset9 {
  margin-left: 78.5%;
}

.ou-grid > .ou-grid--offset10:first-child {
  margin-left: 85%;
}
.ou-grid > .ou-grid--offset10 {
  margin-left: 87%;
}

.ou-grid > .ou-grid--offset11:first-child {
  margin-left: 93.5%;
}
.ou-grid > .ou-grid--offset11 {
  margin-left: 95.5%;
}

@media only screen and (max-width: 767px),
  only screen and (max-device-width: 767px) {
  .ou-grid--tablet {
    margin-bottom: 0;
  }

  .ou-grid--tablet > div {
    width: 48%;
    margin-left: 4%;
    margin-bottom: 15px;
  }

  .ou-grid--tablet > div:nth-child(2n + 1) {
    clear: left;
  }

  .ou-grid--tablet > div:nth-child(odd) {
    margin-left: 0;
  }
} /* end media query */

@media only screen and (max-width: 400px),
  only screen and (max-device-width: 400px) {
  .ou-grid > div,
  .ou-grid--tablet > div {
    width: 100%;
    float: left;
    margin: 0 0 15px 0;
    margin-left: 0;
  }

  .ou-grid--mobile > div {
    width: 48%;
    float: left;
    margin-right: 4%;
  }

  .ou-grid--mobile > div:nth-child(2n + 1) {
    clear: left;
  }

  .ou-grid--mobile > div:nth-child(even) {
    margin-right: 0;
  }

  /* offset */

  .ou-grid > .ou-grid--offset1:first-child,
  .ou-grid > .ou-grid--offset1,
  .ou-grid > .ou-grid--offset2:first-child,
  .ou-grid > .ou-grid--offset2,
  .ou-grid > .ou-grid--offset3:first-child,
  .ou-grid > .ou-grid--offset3,
  .ou-grid > .ou-grid--offset4:first-child,
  .ou-grid > .ou-grid--offset4,
  .ou-grid > .ou-grid--offset5:first-child,
  .ou-grid > .ou-grid--offset5,
  .ou-grid > .ou-grid--offset6:first-child,
  .ou-grid > .ou-grid--offset6,
  .ou-grid > .ou-grid--offset7:first-child,
  .ou-grid > .ou-grid--offset7,
  .ou-grid > .ou-grid--offset8:first-child,
  .ou-grid > .ou-grid--offset8,
  .ou-grid > .ou-grid--offset9:first-child,
  .ou-grid > .ou-grid--offset9,
  .ou-grid > .ou-grid--offset10:first-child,
  .ou-grid > .ou-grid--offset10,
  .ou-grid .ou-grid--offset11:first-child,
  .ou-grid .ou-grid--offset11 {
    margin-left: 0;
  }
} /* end media query */