/*
    For the sake of readability, hide/show classes are ordered by size/direction:
    1. visibility-size
    2. visibility-size-dn
    3. visibility-size-up
*/

@media only screen
{
    .inline {display: inline;}
    .block {display: block;}
    .iblock {display: inline-block;}
    .absolute { position: absolute;}
    .relative { position: relative;}
    .static { position: static;}
    .hide { display: none; }
    .invisible { visibility: hidden; }
    .float-left { float: left;}
    .float-right { float: right;}
    .text-left { text-align: left;}
    .text-center { text-align: center;}
    .text-right { text-align: right;}
    .m0 { margin: 0;}
    .p0 { padding: 0;}
    .rounded { border-radius: 3px;}
}


/* tiny Screens - default grid size */
@media only screen
{
    .hide-tiny,
    .hide-tiny-up,
    .show-sml,
    .hide-sml-dn,
    .show-sml-up,
    .show-med,
    .hide-med-dn,
    .show-med-up,
    .show-lrg,
    .hide-lrg-dn
    {
        display: none !important;
    }

    .show-tiny,
    .show-tiny-up,
    .hide-sml,
    .show-sml-dn,
    .hide-sml-up,
    .hide-med,
    .show-med-dn,
    .hide-med-up,
    .hide-lrg,
    .show-lrg-dn
    {
        display: inherit !important;
    }

    .inline-tiny
    {
        display: inline !important;
    }

    .iblock-tiny
    {
        display: inline-block !important;
    }

    .block-tiny
    {
        display: block !important;
    }
}

/* Small Screens - 480px and up */
@media only screen and (min-width: 30em)
{
    .show-tiny,
    .hide-tiny-up,
    .hide-sml,
    .hide-sml-up,
    .hide-sml-dn,
    .show-med,
    .hide-med-dn,
    .show-med-up,
    .show-lrg,
    .hide-lrg-dn
    {
        display: none !important;
    }


    .hide-tiny,
    .show-tiny-up,
    .show-sml,
    .show-sml-up,
    .show-sml-dn,
    .hide-med,
    .show-med-dn,
    .hide-med-up,
    .hide-lrg,
    .show-lrg-dn
    {
        display: inherit !important;
    }

    .inline-sml
    {
        display: inline !important;
    }

    .iblock-sml
    {
        display: inline-block !important;
    }


    .block-sml
    {
        display: block !important;
    }
}

/* Medium Screens - 800px and up */
@media only screen and (min-width: 50em)
{
    .show-tiny,
    .hide-tiny-up,
    .show-sml,
    .hide-sml-up,
    .show-sml-dn,
    .hide-med,
    .hide-med-dn,
    .hide-med-up,
    .show-lrg,
    .hide-lrg-dn
    {
        display: none !important;
    }

    .hide-tiny,
    .show-tiny-up,
    .hide-sml,
    .show-sml-up,
    .hide-sml-dn,
    .show-med,
    .show-med-dn,
    .show-med-up,
    .hide-lrg,
    .show-lrg-dn
    {
        display: inherit !important;
    }


    .inline-med

    {
        display: inline !important;
    }


    .iblock-med

    {
        display: inline-block !important;
    }


    .block-med

    {
        display: block !important;
    }

}

/* Large Screens - 1280px and up */
@media only screen and (min-width: 80em)
{

    .show-tiny,
    .hide-tiny-up,
    .show-sml,
    .hide-sml-up,
    .show-sml-dn,
    .show-med,
    .show-med-dn,
    .hide-med-up,
    .hide-lrg,
    .hide-lrg-dn
    {
        display: none !important;
    }

    .hide-tiny,
    .show-tiny-up,
    .hide-sml,
    .show-sml-up,
    .hide-sml-dn,
    .hide-med,
    .hide-med-dn,
    .show-med-up,
    .show-lrg,
    .show-lrg-dn
    {
        display: inherit !important;
    }

    .inline-lrg

    {
        display: inline !important;
    }

    .iblock-lrg
    {
        display: inline-block !important;
    }

    .block-lrg
    {
        display: block !important;
    }

}