/* 
    =========================================================================

    .grid
      
    A simple, flexible grid adapted from:
    http://css-tricks.com/dont-overthink-it-grids/
    
    =========================================================================
*/


/* Needs border box but doing this elsewhere */
/**, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}*/

.grid
{
    /*width: 100%;*/
    /*-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;*/
}
    .grid:after
    {
        content: "";
        display: table;
        clear: both;
    }

[class*='col-']
{
    float: left;
    padding-right: 5px;
}

    [class*='col-']:last-of-type
    {
        padding-right: 0px;
    }

.grid-pad
{
    padding: 5px 0px 5px 5px;
}

    .grid-pad > [class*='col-']:last-of-type
    {
        padding-right: 5px;
    }


.col-pad-medium {
    padding-right: 10px;
}
.col-pad-large {
    padding-right: 20px;
}
.col-pad-extra-large {
    padding-right: 30px;
}
.col-pad-extra-extra-large {
    padding-right: 40px;
}

.col-1-2
{
    width: 50%;
}

.col-2-2
{
    width: 100%;
}

.col-1-3
{
    width: 33.33%;
}

.col-2-3
{
    width: 66.66%;
}

.col-3-3
{
    width: 100%;
}

.col-1-4
{
    width: 25%;
}

.col-2-4
{
    width: 50%;
}

.col-3-4
{
    width: 75%;
}

.col-4-4
{
    width: 100%;
}


.col-1-5
{
    width: 20%;
}
.col-2-5
{
    width: 40%;
}
.col-3-5
{
    width: 60%;
}
.col-4-5
{
    width: 80%;
}
.col-5-5
{
    width: 100%;
}


.col-1-6
{
    width: 16.666%;
}
.col-2-6
{
    width: 33.332%;
}
.col-3-6
{
    width: 49.998%;
}
.col-4-6
{
    width: 66.664%;
}
.col-5-6
{
    width: 83.33%;
}
.col-6-6
{
    width: 100%;
}



@media (max-width: 600px)
{
     [class*='col-'] {
        display: block;
         width: 100%;
    }

    [class*='col-pad-'] {
        padding-right: 0px;
    }
}