/* --------------------------------------------------

:: Reflowing Design Pattern: Grids & Galleries

:: Grids are floated elements sized to conform to
   a set column layout. Layouts with 2 to 6 columns
   are available on small and medium screens, and further
   8, 10 and 12 column layouts on large screens.


----------------------------------------------------*/



[class*="grid-"]
{
    height: auto;
    display: block;
    margin: 0 -1rem 0;
    padding: 0;
    position: relative;
    list-style-type: none;
}

[class*="grid-"]>li
{
    float: left;
    padding: 0 1rem 2rem;
    display: inline;
    height: auto;
    float: left;
    list-style: inherit;
    margin: 0;
}


[class*="grid-"]>li img
{
    max-width: 100%;
    height: auto;
    display: block;
}


[class*="grid-"].flush
{
    margin: 0;
}

[class*="grid-"].flush>li
{
    padding: 0;
}

[class*="grid-"].tight
{
    margin: 0 -0.25rem 0;
}

[class*="grid-"].tight>li
{
    padding: 0 0.25rem 0.5rem;
}

[class*="grid-"].onerow>li
{
    padding-bottom: 0;
}

[class*="grid-"]:after
{
    content: " ";
	display: table;
    clear: both;
}

.grid-1 > li                      { width: 100%; }
.grid-1 > li:nth-of-type(n)       { clear: none; }
.grid-1 > li:nth-of-type(1n+1)    { clear: both; }

.grid-2 > li                      { width: 50%; }
.grid-2 > li:nth-of-type(n)       { clear: none; }
.grid-2 > li:nth-of-type(2n+1)    { clear: both; }

.grid-3 > li                      { width: 33.33%; }
.grid-3 > li:nth-of-type(n)       { clear: none; }
.grid-3 > li:nth-of-type(3n+1)    { clear: both; }

.grid-4 > li                      { width: 25%; }
.grid-4 > li:nth-of-type(n)       { clear: none; }
.grid-4 > li:nth-of-type(4n+1)    { clear: both; }

.grid-5 > li                      { width: 20%; }
.grid-5 > li:nth-of-type(n)       { clear: none; }
.grid-5 > li:nth-of-type(5n+1)    { clear: both; }

.grid-6 > li                      { width: 16.66%; }
.grid-6 > li:nth-of-type(n)       { clear: none; }
.grid-6 > li:nth-of-type(6n+1)    { clear: both; }

.grid-8 > li                      { width: 12.5%; }
.grid-8 > li:nth-of-type(n)       { clear: none; }
.grid-8 > li:nth-of-type(8n+1)    { clear: both; }

.grid-10 > li                      { width: 16.66%; }
.grid-10 > li:nth-of-type(n)       { clear: none; }
.grid-10 > li:nth-of-type(10n+1)    { clear: both; }

.grid-12 > li                      { width: 8.33%; }
.grid-12 > li:nth-of-type(n)       { clear: none; }
.grid-12 > li:nth-of-type(12n+1)    { clear: both; }    



@media only screen and (min-width: 36em), print
{
    .grid-sml-1 > li                      { width: 100%; }
    .grid-sml-1 > li:nth-of-type(n)       { clear: none; }
    .grid-sml-1 > li:nth-of-type(1n+1)    { clear: both; }

    .grid-sml-2 > li                      { width: 50%; }
    .grid-sml-2 > li:nth-of-type(n)       { clear: none; }
    .grid-sml-2 > li:nth-of-type(2n+1)    { clear: both; }

    .grid-sml-3 > li                      { width: 33.33%; }
    .grid-sml-3 > li:nth-of-type(n)       { clear: none; }
    .grid-sml-3 > li:nth-of-type(3n+1)    { clear: both; }

    .grid-sml-4 > li                      { width: 25%; }
    .grid-sml-4 > li:nth-of-type(n)       { clear: none; }
    .grid-sml-4 > li:nth-of-type(4n+1)    { clear: both; }

    .grid-sml-5 > li                      { width: 20%; }
    .grid-sml-5 > li:nth-of-type(n)       { clear: none; }
    .grid-sml-5 > li:nth-of-type(5n+1)    { clear: both; }

    .grid-sml-6 > li                      { width: 16.66%; }
    .grid-sml-6 > li:nth-of-type(n)       { clear: none; }
    .grid-sml-6 > li:nth-of-type(6n+1)    { clear: both; }

    .grid-sml-8 > li                      { width: 12.5%; }
    .grid-sml-8 > li:nth-of-type(n)       { clear: none; }
    .grid-sml-8 > li:nth-of-type(8n+1)    { clear: both; }
    
    .grid-sml-10 > li                      { width: 10%; }
    .grid-sml-10 > li:nth-of-type(n)       { clear: none; }
    .grid-sml-10 > li:nth-of-type(10n+1)    { clear: both; }
}


@media only screen and (min-width: 54em), print
{
    .grid-med-1 > li                      { width: 100%; }
    .grid-med-1 > li:nth-of-type(n)       { clear: none; }
    .grid-med-1 > li:nth-of-type(1n+1)    { clear: both; }

    .grid-med-2 > li                      { width: 50%; }
    .grid-med-2 > li:nth-of-type(n)       { clear: none; }
    .grid-med-2 > li:nth-of-type(2n+1)    { clear: both; }

    .grid-med-3 > li                      { width: 33.33%; }
    .grid-med-3 > li:nth-of-type(n)       { clear: none; }
    .grid-med-3 > li:nth-of-type(3n+1)    { clear: both; }

    .grid-med-4 > li                      { width: 25%; }
    .grid-med-4 > li:nth-of-type(n)       { clear: none; }
    .grid-med-4 > li:nth-of-type(4n+1)    { clear: both; }

    .grid-med-5 > li                      { width: 20%; }
    .grid-med-5 > li:nth-of-type(n)       { clear: none; }
    .grid-med-5 > li:nth-of-type(5n+1)    { clear: both; }

    .grid-med-6 > li                      { width: 16.66%; }
    .grid-med-6 > li:nth-of-type(n)       { clear: none; }
    .grid-med-6 > li:nth-of-type(6n+1)    { clear: both; }
    
    .grid-med-8 > li                      { width: 12.5%; }
    .grid-med-8 > li:nth-of-type(n)       { clear: none; }
    .grid-med-8 > li:nth-of-type(8n+1)    { clear: both; }
    
    .grid-med-10 > li                      { width: 10%; }
    .grid-med-10 > li:nth-of-type(n)       { clear: none; }
    .grid-med-10 > li:nth-of-type(10n+1)    { clear: both; }    

}


@media only screen and (min-width: 78em), print
{
    .grid-lrg-1 > li                      { width: 100%; }
    .grid-lrg-1 > li:nth-of-type(n)       { clear: none; }
    .grid-lrg-1 > li:nth-of-type(1n+1)    { clear: both; }

    .grid-lrg-2 > li                      { width: 50%; }
    .grid-lrg-2 > li:nth-of-type(n)       { clear: none; }
    .grid-lrg-2 > li:nth-of-type(2n+1)    { clear: both; }

    .grid-lrg-3 > li                      { width: 33.33%; }
    .grid-lrg-3 > li:nth-of-type(n)       { clear: none; }
    .grid-lrg-3 > li:nth-of-type(3n+1)    { clear: both; }

    .grid-lrg-4 > li                      { width: 25%; }
    .grid-lrg-4 > li:nth-of-type(n)       { clear: none; }
    .grid-lrg-4 > li:nth-of-type(4n+1)    { clear: both; }

    .grid-lrg-5 > li                      { width: 20%; }
    .grid-lrg-5 > li:nth-of-type(n)       { clear: none; }
    .grid-lrg-5 > li:nth-of-type(5n+1)    { clear: both; }

    .grid-lrg-6 > li                      { width: 16.66%; }
    .grid-lrg-6 > li:nth-of-type(n)       { clear: none; }
    .grid-lrg-6 > li:nth-of-type(6n+1)    { clear: both; }

    .grid-lrg-8 > li                      { width: 12.5%; }
    .grid-lrg-8 > li:nth-of-type(n)       { clear: none; }
    .grid-lrg-8 > li:nth-of-type(8n+1)    { clear: both; }

    .grid-lrg-10 > li                      { width: 16.66%; }
    .grid-lrg-10 > li:nth-of-type(n)       { clear: none; }
    .grid-lrg-10 > li:nth-of-type(10n+1)    { clear: both; }

    .grid-lrg-12 > li                      { width: 8.33%; }
    .grid-lrg-12 > li:nth-of-type(n)       { clear: none; }
    .grid-lrg-12 > li:nth-of-type(12n+1)    { clear: both; }

}