@import "var";
@import "reset";

// float elements

.left {
  float: left;
}

.right {
  float: right;
}

.clear::after {
  clear: both;
  content: " ";
  width: 0;
  height: 0;
  display: block;
}

.hide {
  display: none;
}

// 12 based grids

.grid-1-12 {
  width: 8.33%;
}

.grid-2-12,
.grid-1-6 {
  width: 16.67%;
}

.grid-3-12,
.grid-1-4 {
  width: 25%;
}

.grid-4-12,
.grid-1-3 {
  width: 33%;
}

.grid-5-12 {
  width: 41.67%;
}

.grid-6-12,
.grid-1-2 {
  width: 50%;
}

.grid-7-12 {
  width: 58.33%;
}

.grid-8-12,
.grid-2-3 {
  width: 66.67%;
}

.grid-9-12,
.grid-3-4 {
  width: 75%;
}

.grid-10-12,
.grid-5-6 {
  width: 83.33%;
}

.grid-11-12 {
  width: 91.67%;
}

*[class*="grid-"] {
  box-sizing: content-box;
}

// 5 based

.grid-1-5 {
  width: 20%;
}

.grid-2-5 {
  width: 40%;
}

.grid-3-5 {
  width: 60%;
}

.grid-4-5 {
  width: 80%;
}