/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 768px)
{
    /* Styles */
    #pageHeader, #mobileNavigation > ul, #mobileNavigation > ul > li > div, #body, #socialAndSearch > div, #footLinks, #mobileNavigation
    {
        width: 90% !important;
        text-align: center !important;
        height: auto;
    }

    #pageHeader
    {
        margin: 0 auto;
        min-height: 116px !important;
    }

    #pageHeader .columnbreak
    {
        margin: 0;
    }

    #pageHeader > .column
    {
        float: none;
        width: 100%;
    }

    #body
    {
        text-align: left !important;
    }

    img, iframe
    {
        max-width: 100%;
    }

    #pageHeader .column.first, #pageHeader .column.last, #pageHeader nav
    {
        display: none;
    }

    #pageHeader img#logoAlt
    {
        display: inline;
    }

    #pageHeader img:not(#logoAlt)
    {
        display: none;
    }
    #siteNavigation
    {
        display: none;
    }

    #mobileNavigation
    {
    display:inline-block;
    width: 100% !important;
    }

    #mobileNavigation > ul > li > a
    {
        display: inline-block !important;
    }

    #mobileNavigation > ul > li > ul, #mobileNavigation ul > li:hover > div > .sideBar, #mobileNavigation > ul > li > ul > li:hover > div
    {
        display: none;
    }

    #mobileNavigation > ul > li img:last-child, #mobileNavigation > ul > li:hover img:first-child
    {
        display: none;
    }

    #mobileNavigation > ul > li:hover img:last-child
    {
        display: inline;
    }

    #mobileNavigation > ul > li:hover > ul
    {
        background-color: #fff;
        border-bottom: 8px solid #e0e0e0;
        border-top: 8px solid #3b8f9a;
        border-right: 8px solid #e0e0e0;
        border-left: 8px solid #e0e0e0;
        font-size: 0.9em;
        padding: 1em;
        position: absolute;
        text-align: left;
        width: auto;
        z-index: 999;
        display: block;
    }

    .desktop{
        display: none;
    }

    .mobile 
    {
        display: block;
    }
    
    nav.sideBar:first-child
    {
        display:none;
    }
    
    .sideBar
    {
        border:1px solid #e0e0e0 !important;
        clear:both !important;
        width:100% !important;
    }
    
    .filterOption > div
    {
        float: left;
    }
    
    .filterCategory
    {
        float:left;
        clear:both !important;
        width:100%;
    }

    #mobileNavigation > ul > li:hover > ul > li
    {
        display: block;
    }

    #mobileNavigation > ul > li > ul > li > a
    {
        border: 0 none;
    }

    #mobileNavigation > ul > li > ul > li:hover > a {
        background-color: inherit;
        border-right: 0 none;
        color: #151F6D;
    }

    #mobileNavigation > ul > li > div
    {
        width: auto !important;
    }

    #featuredBanner
    {
        display: none;
    }

    #smartPhoneBanner
    {
        display: block;
         margin: 0 -16px 2em -16px;
    }
    #smartPhoneBanner, #carousel
    {
        padding-bottom: 1em;
    }
    #carousel
    {
        margin-bottom: 2.25em;
    }
    #featuredCategories /*, #recentNews, #importantDates*/ /*, #recentNews, #importantDates*/
    {
        margin: -6%;
        padding: 10% 0;
    }

    #featuredCategories .column > section > *:not(h1)
    {
        display: none;
    }

    #featuredCategories .column /*, #recentNews, #importantDates*/ /*, #recentNews, #importantDates*/
    {
        clear: both;
        width: 100% !important;
        border-bottom: 2px solid #e0e0e0;
        box-shadow: 0 0 5px 1px #e0e0e0;
    }

    #featuredCategories h1
    {
        padding: 0;
    }

    form.siteSearch input[type=search]
    {
        max-width: 10em;
        margin: 1em auto;
    }

    #recentNews, #importantDates
    {
        padding: 0 1.25em;
        float: none;
        width: auto;
        max-width: inherit;
    }

    section.topBorder > div
    {
        border: 0 none;
        margin: none;
        position: static;
    }

    .newsText
    {
        display: none;
    }

    #pageFooter .column
    {
        clear: both;
        width: 100% !important;
    }

    #footLinks .column:not(.last)
    {
        display: none;
    }

    #socialAndSearch .siteSearch
    {
        text-align: center;
    }

      div.calendarNav, table, p
        {
            clear: both;
        }
        div.calendarNav > *
        {
            float: left;
            width: 33%;
            height: 2em;
            text-align: center;
            font-size: 75%;
        }
        div.calendarNav > div
        {
            margin-top: .25em;
            margin-bottom: 1em;
        }
        div.calendarNav > h2
        {
            font-size: 100%;
            margin: 0;
            padding: 0;
        }
}

@media only screen and (min-width : 481px)
{
#smartPhoneBanner
    {
        display: none;
    }
    #featuredBanner {display:block;}
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px)
{
    /* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)
{
    /* Styles */

    #pageHeader, #siteNavigation > ul, #siteNavigation > ul > li > div, #body, #socialAndSearch > div
    {
        width: 60em;
    }

    #carousel img, #featuredBanner img
    {
        max-width: 100%;
    }

    #footLinks
    {
        width: 75em;
    }

    #siteNavigation > ul > li > a
    {
        padding: 0.75em 0.5em;
    }

    #siteNavigation > ul > li > div
    {
        max-height: 25em;
        overflow: scroll;
    }

    form.siteSearch input[type=search]
    {
        max-width: 10em;
        margin: 1em auto;
    }

     .desktop{
        display: block;
    }

    .mobile 
    {
        display: none;
    }
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)
{
    /* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)
{
    /* Styles */

    #pageHeader, #siteNavigation > ul, #siteNavigation > ul > li > div, #body, #socialAndSearch > div
    {
        width: 45em;
    }

    #pageHeader > .column:not(:first-child) > *
    {
        position: relative;
        top: 15%;
    }

    #pageHeader > .column.last > *
    {
        top: 25%;
    }

    #siteNavigation > ul > li
    {
        font-size: 0.85em;
    }

    #featuredCategories section > h1, #carousel h1
    {
        font-size: 1.5em;
    }

    #footLinks
    {
        width: 60em;
    }

    #footLinks img
    {
        max-width: 100%;
    }
}

/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px)
{
    /* Styles */
}

/* Large screens ----------- */
@media only screen and (min-width : 1824px)
{
    /* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5)
{
    /* Styles */
}