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

:: 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;
page-break-inside: avoid;    
}


[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.5rem 0;
}

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


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


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

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

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

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

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

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



@media    (min-width: 24em)
{
    .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    (min-width: 50em)
{
    .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    (min-width: 80em)
{
    .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; }

}



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

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

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

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

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

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

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

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

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

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

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

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