/*
*
*
*/

*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  /* Removes padding behavior on widths */
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  *behavior: url(../_scripts/boxsizing.htc); 
  /*  If you need support for IE7 and lower make 
    sure the boxsizing.htc file is linked properly.
    More info here:  https://github.com/Schepp/box-sizing-polyfill */
}

/* Targets all elements */
[class*='bit-'] {
  float: left;
  padding: 10px;
}

/* Floats last ".bit-" to the right */
[class*='bit-']:last-of-type {
  padding-right: 10px;
  float: left;/*Changed this to float left as single items looked funny floated all the way to the 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-3-span-2 {width: 66.66%;}

/*IMAGE GRIDS*/
ul.frame {
  list-style: none;
  font-size: 0px;
  margin-left: -2.5%;
}
ul.frame li {
  display: inline-block;
  padding: 10px;
  margin: 0 0 2.5% 2.5%;
  background: #fff;
  border: 1px solid #ccc;
  vertical-align: top;
  box-shadow: 0 0 5px #ccc;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
ul.frame li img {
  height: auto;
  margin: 0 0 10px;
}
ul.frame li h3 {
  margin: 0 0 5px;
}
ul.frame li p {
  font-size: 90%;
  line-height: 150%;
}
ul.frame.bit-2 li {
  width: 47.5%;
}
ul.frame.bit-3 li {
  width: 30.83%;
}
ul.frame.bit-4 li {
  width: 22.5%;
}

/* Landscape mobile & down
===============================*/
@media (max-width: 480px) {
  .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-3-span-2 {
    width: 100%;
  }

  .frame .bit-4:nth-child(2) {
    float: right;
  }

  .frame .bit-4:nth-child(3) {
    clear: both;
    float: left;
  }

  .frame .bit-4:nth-child(4) {
    float: right;
  }

  ul.frame {
    margin-left: 0;
  }
  ul.frame li {
    width: 100% !important;
    margin: 0 0 20px;
  }
}

/* Mobile to Tablet Portrait
===============================*/
@media (min-width: 480px) and (max-width: 800px) {
  .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%;
  }
}

/* Landscape Tablet to Desktop
===============================*/
@media (min-width: 800px) and (max-width: 1100px) {
  .bit-2:not(.nested),
  .bit-7:not(.nested), {
    width: 100%;
  }

  .bit-4:not(.nested),
  .bit-8:not(.nested),
  .bit-10:not(.nested),
  .bit-12:not(.nested), {
    width: 50%;
  }
}