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

:: 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;
}

[class*="grid-"]>li
{
    float: left;
    padding: 0 1rem 2rem;
    display: inline;
    height: auto;
    float: left;
    list-style: none;
    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-"]:after
{
    content: " ";
	display: table;
    clear: both;
}

@media only screen
{
    .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 only screen and (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; }

}


@media only screen and (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; }

}


@media only screen and (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; }
}

.oneline
{
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-overflow: ellipsis-word;
    overflow: hidden;
}

li.oneline
{
    display: list-item;
}

.cf:after
{
    content: " ";
	display: table;
    clear: both;
}