/*
Hide and seek... 
Make only wide visible by default, then conditionally hide it in favor of showing the others
*/

.VisibleAlways {
    visibility: visible !important;
}

.VisibleSmall {
    visibility: hidden !important;
}

.VisibleMedium {
    visibility: hidden !important;
}

.VisibleLarge {
    visibility: visible !important;
}



/*  #Mobile (Portrait) (Small) Under 480
================================================== */
@media only screen and (max-width: 479px) /* was 766 */
{
    .VisibleSmall {
        visibility: visible !important;
        display: block !important;
    }

    .VisibleMedium {
        visibility: hidden !important;
        display: none !important;
    }

    .VisibleLarge {
        visibility: hidden !important;
        display: none !important;
    }
}


/* #Mobile (Landscape) (Medium) 480-767
================================================== */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    .VisibleLarge {
        visibility: hidden !important;
        display: none !important;
    }

    .VisibleMedium {
        visibility: visible !important;
        display: block !important;
    }

    .VisibleSmall {
        visibility: hidden !important;
        display: none !important;
    }
}



/* #Tablet (Portrait) (Large) 768 or greater
================================================== */
@media only screen and (min-width: 768px) /* and (max-width: 959px) */
{

    .VisibleSmall {
        visibility: hidden !important;
        display: none !important;
    }

    .VisibleMedium {
        visibility: hidden !important;
        display: none !important;
    }

    .VisibleLarge {
        visibility: visible !important;
        display: block !important;
    }

    /*
    If there is an odd number of items, make the final item
    span the full width instead of occupying half a row.
    */
    .inner-items > .item:last-child:nth-child(odd) {
        flex: 0 0 100%;
        max-width: 100%;
    }
}