.row {
  width: 100%;
  &:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
  }
}

.container {
  max-width: 950px;
  margin: 0 auto;

  &:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
  }

  &.narrow {
    @media (min-width: 760px) {
      max-width: 600px;
    }
  }

  @media (max-width: 760px) {
    max-width: 100% !important;
  }
}

@mixin col {
  float: left;
  padding: 0 20px;

  @media (max-width: 760px) {
    width: 100% !important;
    margin-bottom: 20px !important;
  }

}

.col-1-1 {
  @include col;
  width: 100%;
}

.col-1-2 {
  @include col;
  width: 50%;
}

.col-1-3 {
  @include col;
  width: 33.33%;
}

.col-2-3 {
  @include col;
  width: 66.66%;
}

.col-1-4 {
  @include col;
  width: 25%;
}

.col-3-4 {
  @include col;
  width: 75%;
}

.col-2-5 {
  @include col;
  width: 40%;
}

.col-3-5 {
  @include col;
  width: 60%;
}

.col-5-12 {
  @include col;
  width: 41.67%;
}

.col-5-6 {
  @include col;
  width: 83.33%;
}

.col-1-6 {
  @include col;
  width: 16.67%;
}

@media print {

  .col-1-1 {
    width: 100% !important;
  }

  .col-1-2 {
    width: 50% !important;
  }

  .col-1-4 {
    width: 25% !important;
  }

  .col-1-3 {
    width: 33.33% !important;
  }

  .col-2-3 {
    width: 66.66% !important;
  }

  .col-5-12 {
    width: 41.67% !important;
  }

}