/******************************************************************
Site Name:
Author:

Stylesheet: Grid Stylesheet

I've seperated the grid so you can swap it out easily. It's
called at the top the style.scss stylesheet.

There are a ton of grid solutions out there. You should definitely
experiment with your own. Here are some recommendations:

http://gridsetapp.com - Love this site. Responsive Grids made easy.
http://susy.oddbird.net/ - Grids using Compass. Very elegant.
http://gridpak.com/ - Create your own responsive grid.
https://github.com/dope/lemonade - Neat lightweight grid.


The grid below is a custom built thingy I modeled a bit after
Gridset. It's VERY basic and probably shouldn't be used on
your client projects. The idea is you learn how to roll your
own grids. It's better in the long run and allows you full control
over your project's layout.

******************************************************************/




/*
Mobile Grid Styles
These are the widths for the mobile grid.
There are four types, but you can add or customize
them however you see fit.
*/
@media (max-width: 767px) {

  .m-all {
    float:left;
    width: 100%;
  }

  .m-1of2 {
    float:left;
    width: 50%;
  }

  .m-1of3 {
    float:left;
    width: 33.33%;
  }

  .m-2of3 {
    float:left;
    width: 66.66%;
  }

  .m-1of4 {
    float:left;
    width: 25%;
  }

  .m-3of4 {
    float:left;
    width: 75%;
  }


  .m-1of6 {
    float:left;
    width: 16.66666%;
  }

  .m-5of6 {
    float:left;
    width: 83.33333%;
  }


}


/* Portrait tablet to landscape */
@media (min-width: 768px) and (max-width: 1029px) {

  .t-all {
    float:left;
    width: 100%;
    padding-right: 0;
  }

  .t-1of2 {
    float:left;
    width: 50%;
  }

  .t-1of3 {
    float:left;
    width: 33.33%;
  }

  .t-2of3 {
    float:left;
    width: 66.66%;
  }

  .t-1of4 {
    float:left;
    width: 25%;
  }

  .t-3of4 {
    float:left;
    width: 75%;
  }

  .t-1of5 {
    float:left;
    width: 20%;
  }

  .t-2of5 {
    float:left;
    width: 40%;
  }

  .t-3of5 {
    float:left;
    width: 60%;
  }

  .t-4of5 {
    float:left;
    width: 80%;
  }


  .t-1of10 {
    float:left;
    width: 10%;
  }

  .t-2of10 {
    float:left;
    width: 20%;
  }

  .t-3of10 {
    float:left;
    width: 30%;
  }

  .t-4of10 {
    float:left;
    width: 40%;
  }

  .t-5of10 {
    float:left;
    width: 50%;
  }

  .t-6of10 {
    float:left;
    width: 60%;
  }

  .t-7of10 {
    float:left;
    width: 70%;
  }


  .t-8of10 {
    float:left;
    width: 80%;
  }


  .t-9of10 {
    float:left;
    width: 90%;
  }


  .t-1of11 {
    float:left;
    width: 9.09090909091%;
  }

  .t-1of12 {
    float:left;
    width: 8.333333332%;
  }


  .t-11of12 {
    float:left;
    width: 91.6666666666%;
  }




}

/* Landscape to small desktop */
@media (min-width: 1030px) {


  .d-all  {
    float:left;
    width: 100%;
    padding-right: 0;
  }

  .d-1of2 {
    float:left;
    width: 50%;
  }

  .d-1of3 {
    float:left;
    width: 33.33%;
  }

  .d-2of3 {
    float:left;
    width: 66.66%;
  }

  .d-1of4 {
    float:left;
    width: 25%;
  }

  .d-3of4 {
    float:left;
    width: 75%;
  }

  .d-1of5 {
    float:left;
    width: 20%;
  }

  .d-2of5 {
    float:left;
    width: 40%;
  }

  .d-3of5 {
    float:left;
    width: 60%;
  }

  .d-4of5 {
    float:left;
    width: 80%;
  }

  .d-1of6 {
    float:left;
    width: 16.6666666667%;
  }

  .d-1of7 {
    float:left;
    width: 14%;
  }

  .d-2of7 {
    float:left;
    width: 28%;
  }

  .d-3of7 {
    float:left;
    width: 42%;
  }

  .d-4of7 {
    float:left;
    width: 57%;
  }

  .d-5of7 {
    float:left;
    width: 71%;
  }

  .d-6of7 {
    float:left;
    width: 85%;
  }

  .d-1of8 {
    float:left;
    width: 12.5%;
  }

  .d-1of9 {
    float:left;
    width: 11.1111111111%;
  }


  .d-1of10 {
    float:left;
    width: 10%;
  }

  .d-2of10 {
    float:left;
    width: 20%;
  }

  .d-3of10 {
    float:left;
    width: 30%;
  }

  .d-4of10 {
    float:left;
    width: 40%;
  }

  .d-5of10 {
    float:left;
    width: 50%;
  }

  .d-6of10 {
    float:left;
    width: 60%;
  }

  .d-7of10 {
    float:left;
    width: 70%;
  }


  .d-8of10 {
    float:left;
    width: 80%;
  }


  .d-9of10 {
    float:left;
    width: 90%;
  }


  .d-1of11 {
    float:left;
    width: 9.09090909091%;
  }

  .d-1of12 {
    float:left;
    width: 8.33%;
  }
}



.last-col {
  float: right;
}

.gifvignette {
	width: 100%;
}