/*======================================
  this is your main grid stylesheet
======================================*/
*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

#fancybox-content,
#fancybox-content:after,
#fancybox-content:before {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/*======================================
  using the selector class I have floated
  all elements to the left and used
  a pseudo to float the last element
  to the right
======================================*/
[class*='bit-'] {
  float: left;
  padding: 10px;
}
[class*='bit-']:last-of-type {
  padding-right: 10px;
  float: right;
}

/*======================================
  clearfix courtesy of @chriscoyier
======================================*/
.frame:after {
  content: "";
  display: table;
  clear: both;
}

/*======================================
  main grid widths
======================================*/
.bit-1 {
  width: 100%;
}
.bit-golden-big {
  width: 62%;
}
.bit-golden-small {
  width: 38%;
}


.bit-1_25 {
  width: 25%;
}

.bit-1_75 {
  width: 75%;
}
.bit-1_7 {
  width: 70%;
}


.bit-1_6 {
  width: 60%;
}
.bit-1_65 {
  width: 65%;
}
.bit-1_4 {
  width: 40%;
}
.bit-1_35 {
  width: 35%;
}
.bit-2 {
  width: 50%;
}
.bit-3 {
  width: 33.33%;
}
.bit-4 {
  width: 25%;
}
.bit-5 {
  width: 20%;
}
.bit-6 {
  width: 16.6666666667%;
}
.bit-7 {
  width: 14.2857142857%;
}
.bit-8 {
  width: 12.5%;
}
.bit-9 {
  width: 11.1111111111%;
}
.bit-10 {
  width: 10%;
}
.bit-11 {
  width: 9.09090909091%;
}
.bit-12 {
  width: 8.33%;
}