/*
*
* 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 {
  width: 100%;
  margin: 0 auto
}

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

/* 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% }
.bit-40 { width: 40%; }
.bit-60 { width: 60%; }
.bit-30 { width: 30%; }
.bit-70 { width: 70%; }

/* 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,
  .bit-40,
  .bit-60,
  .bit-30,
  .bit-70{
    width: 100%;
  }
}

/* Portrait tablet to landscape */
@media (min-width: 30em) and (max-width: 50em) {
  body {background-color: blue;}
/*@media (min-width:700px) and (max-width: 800px) {*/
  .bit-4,
  .bit-8,
  .bit-10,
  .bit-12 {
    width: 50%;
  }

  .bit-1
  {
    width: 100%;
  }

  .bit-5 {
    /*width: 10%;*/
  }

  .bit-6 {
    width: 33.33%;
  }

  .bit-2,
  .bit-3,
  .bit-7,
  .bit-9,
  .bit-11 {
    width: 50%;
  }
  
   .bit-70 {
	   width: 70% 
   }
   
   .bit-60 {
	   width: 60% 
   }
   
   .bit-40 {
	   width: 40% 
   }
   
    .bit-30 {
	   width: 30% 
   }




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

  .bit-3 {
    width: 33.33%;
  }
  .bit-4,
  .bit-8,
  .bit-10,
  .bit-12
   {
    width: 50%
  }

  .bit-6  { width: 16.6666666667% }
  
   .bit-70 {
	   width: 70% 
   }
   
   .bit-60 {
	   width: 60% 
   }
   
   .bit-40 {
	   width: 40% 
   }
   
    .bit-30 {
	   width: 30% 
   }


}