/*
*
* Lemonade v1.1
* Copyright 2013, Joe Richardson
* lemonade.im
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
*/

*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/* Set the width of the grid */
.frame {
  margin: 0 auto;
  max-width: 51.55em;
}

/* Attribute selector */
[class*='bit-'] {
  float: left;
  padding: 0.925em;
}

/* Floats last ".bit-" to the right */
[class*='bit-']:last-of-type {
/*  float: right;*/
}

/* Clearfix */
.frame:after {
  content: "";
  display: table;
  clear: both;
}

/* Main Widths */
.bit-1  { width: 100%; }
.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%; }


/* Push & Pull */
[class*="pull-bit-"], [class*="push-bit-"] {
    position: relative;
}

/*Pull*/
.pull-bit-12  { left: -100%; }
.pull-bit-11  { left: -91.6666666667%; }
.pull-bit-10  { left: -83.33%; }
.pull-bit-9  { left: -75%; }
.pull-bit-8  { left: -66.6666666667%; }
.pull-bit-7  { left: -58.33%; }
.pull-bit-6  { left: -50%; }
.pull-bit-5  { left: -41.6666666667%; }
.pull-bit-4  { left: -33.33%; }
.pull-bit-3 { left: -25%; }
.pull-bit-2 { left: -16.6666666667%; }
.pull-bit-1 { left: -8.33%;}

/*Push*/
.push-bit-12  { left: 100%; }
.push-bit-11 { left: 91.6666666667%; }
.push-bit-10 { left: 83.33%; }
.push-bit-9 { left: 75%; }
.push-bit-8 { left: 66.6666666667%; }
.push-bit-7 { left: 58.33%; }
.push-bit-6 { left: 50%; }
.push-bit-5 { left: 41.6666666667%; }
.push-bit-4 { left: 33.33%; }
.push-bit-3 { left: 25%; }
.push-bit-2 { left: 16.6666666667%; }
.push-bit-1 { left: 8.33%;}


/* Offset */
.offset-bit-12 { margin-left: 100%; }
.offset-bit-11 { margin-left: 91.66666667%; }
.offset-bit-10 { margin-left: 83.33333333%; }
.offset-bit-9 { margin-left: 75%;}
.offset-bit-8 { margin-left: 66.66666667%; }
.offset-bit-7 { margin-left: 58.33333333%; }
.offset-bit-6 { margin-left: 50%; }
.offset-bit-5 { margin-left: 41.66666667%; }
.offset-bit-4 { margin-left: 33.33333333%; }
.offset-bit-3 { margin-left: 25%; }
.offset-bit-2 { margin-left: 16.6666666667%; }
.offset-bit-1 { margin-left: 8.33%; }


/* Landscape mobile & down */
@media (max-width: 30em) {
  .bit-1,
  .bit-2,
  .bit-3,
  .bit-4,
  .bit-5,
  .bit-6,
  .bit-7,
  .bit-8,
  .bit-9,
  .bit-10,
  .bit-11,
  .bit-12 { width: 100%;}

	/* Push & Pull*/
	.pull-bit-12,
	.pull-bit-11,
	.pull-bit-10,
	.pull-bit-9,
	.pull-bit-8,
	.pull-bit-7,
	.pull-bit-6,
	.pull-bit-5,
	.pull-bit-4,
	.pull-bit-3,
	.pull-bit-2,
	.pull-bit-1,
	.push-bit-12, 
	.push-bit-11,
	.push-bit-10,
	.push-bit-9,
	.push-bit-8,
	.push-bit-7,
	.push-bit-6,
	.push-bit-5,
	.push-bit-4,
	.push-bit-3,
	.push-bit-2,
	.push-bit-1	{ left: inherit; }
	
	/* Offset */
	.offset-bit-12,
	.offset-bit-11,
	.offset-bit-10,
	.offset-bit-9,
	.offset-bit-8,
	.offset-bit-7,
	.offset-bit-6,
	.offset-bit-5,
	.offset-bit-4,
	.offset-bit-3,
	.offset-bit-2,
	.offset-bit-1 { margin-left: 0; }
}

/* Portrait tablet to landscape */
@media (min-width: 30em) and (max-width: 50em) {
	.bit-4,
	.bit-6,
	.bit-8,
	.bit-10,
	.bit-12 {
    width: 50%;
  }

  .bit-1,
  .bit-2,
  .bit-3,
  .bit-5,
  .bit-7,
  .bit-9,
  .bit-11 {
    width: 100%
  }

	/*Push & Pull*/
	.pull-bit-12,
	.pull-bit-11,
	.pull-bit-10,
	.pull-bit-9,
	.pull-bit-8,
	.pull-bit-7,
	.pull-bit-6,
	.pull-bit-5,
	.pull-bit-4,
	.pull-bit-3,
	.pull-bit-2,
	.pull-bit-1,
	.push-bit-12, 
	.push-bit-11,
	.push-bit-10,
	.push-bit-9,
	.push-bit-8,
	.push-bit-7,
	.push-bit-6,
	.push-bit-5,
	.push-bit-4,
	.push-bit-3,
	.push-bit-2,
	.push-bit-1	{ left: inherit; }

	/* Offset */
	.offset-bit-12,
	.offset-bit-11,
	.offset-bit-10,
	.offset-bit-9,
	.offset-bit-8,
	.offset-bit-7,
	.offset-bit-6,
	.offset-bit-5,
	.offset-bit-4,
	.offset-bit-3,
	.offset-bit-2,
	.offset-bit-1 { margin-left: 0; }
	}

  
/* Landscape to small desktop */
@media (min-width: 50em) and (max-width: 68.750em) {
  .bit-2,
  .bit-7 {
    width: 100%
  }

  .bit-4,
  .bit-8,
  .bit-10,
  .bit-12 {
    width: 50%
  }
	/*Push & Pull*/
	.pull-bit-12,
	.pull-bit-11,
	.pull-bit-10,
	.pull-bit-9,
	.pull-bit-8,
	.pull-bit-7,
	.pull-bit-6,
	.pull-bit-5,
	.pull-bit-4,
	.pull-bit-3,
	.pull-bit-2,
	.pull-bit-1,
	.push-bit-12, 
	.push-bit-11,
	.push-bit-10,
	.push-bit-9,
	.push-bit-8,
	.push-bit-7,
	.push-bit-6,
	.push-bit-5,
	.push-bit-4,
	.push-bit-3,
	.push-bit-2,
	.push-bit-1	{ left: inherit; }

	/* Offset */
	.offset-bit-12,
	.offset-bit-11,
	.offset-bit-10,
	.offset-bit-9,
	.offset-bit-8,
	.offset-bit-7,
	.offset-bit-6,
	.offset-bit-5,
	.offset-bit-4,
	.offset-bit-3,
	.offset-bit-2,
	.offset-bit-1 { margin-left: 0; }
}