/* Responsive CSS for devices with a width between 768px and 1024px  */
/* This overrides styles in site.css                                */

@media (min-width: 768px) and (max-width: 1024px) {
	
	body#htmBody {
    	font-size: 17px;
	}
	
    #ControlPanelTab {
        display: none !important;
    }

    #feedbackTab {
        display: none !important;
    }

    header {
        position: fixed;
        z-index: 100;
		top: 0px;
		padding: 23px calc(2vw + 12px) 23px calc(2vw + 12px);
    }

        header nav {
            justify-content: flex-start !important;
        }

        header .menu {
            display: none;
        }

    table {
        max-width: 90vw;
    }

    #preHeader {
        display: none !important;
    }

    #preContent {
		margin: 75px 0 0 !important;
		padding: 20px calc(2vw + 12px) 20px calc(2vw + 12px);
    }
	
    #preContent > h1 {
        margin-top: 50px !important;
    }
	
    aside#credentials {
        display: none !important;
    }

    aside#sideNavigation {
        display: none !important;
    }

    #mainContent aside#rightNav {
        display: none !important;
    }

    #mainNavigation .mobileMenu, .mobile.toggle {
        display: flex !important;
    }

    header nav.mobile {
        align-items: flex-start;
        background: #111111;
        box-shadow: 0 0 10px 0;
        display: flex;
        flex-flow: column nowrap;
        max-width: 530px;
        padding: 50px;
        position: fixed;
        right: 0;
        top: 0;
    }

    #mainNavigation .menu {
        display: none;
    }

    #mainContent {
        padding-bottom: 40px;
    }

        #mainContent #breadcrumbs {
            display: none;
            margin: 30px 0 50px !important;
        }

    #breadcrumbs {
        padding: 0;
    }
	
    spotlight {
        padding-top: 120px;
    }
	
	spotlight h1 {
		font-size: 60px;
    	line-height: 84px;
    	margin: 40px 0;
	}
	
	spotlight h2 {
		font-size: 24px;
		padding-right: 0px;
	}

    .description {
        font-size: 16px;
        line-height: 26px;
    }

    .buckets.wide > div {
        margin-bottom: 60px;
    }

    section ul.colorLegend li {
        margin: 0 10px !important;
        justify-content: center;
    }

        section ul.colorLegend li:last-of-type {
            margin: 0 0 40px;
        }

    section ul.colorLegend.colorLegend {
        margin: 40px auto !important;
    }

    section ul {
        margin: 0 !important;
        padding: 0 !important;
    }

    section.stats label {
        font-size: 50px !important;
        line-height: 42px !important;
    }

    section ul.subHeaders {
        margin: 40px 0 !important;
    }

    section.details.stats > ul {
        width: auto !important;
        flex-flow: row wrap !important;
    }

    section.details.stats li {
        margin: 0 0 20px;
        width: auto !important;
    }

    section.details.stats {
        flex-flow: column nowrap !important;
    }

        section.details.stats > div {
            padding: 0 0 80px 0 !important;
        }

    section li.chartData {
        margin: 0 0 20px;
    }

    nav.tabs {
        width: auto !important;
    }

    #demographicChart .name {
        padding-right: 0 !important;
    }

    #demographicChart .legend .name {
        display: block !important;
        position: relative !important;
        width: 100% !important;
    }

    #demographicMap #agencyMapLegend .detail, #demographicChart #quickStats .number {
        display: block !important;
        position: relative !important;
    }

    #demographicMap #agencyMapOverlay {
        top: 19em;
    }

    .agencySizeToggle {
        width: 340px !important;
    }

        .agencySizeToggle a {
            font-size: 11px !important;
        }

    .downloadLinks {
        display: none !important;
    }

    .tableTools {
        flex-flow: column nowrap !important;
        margin: 40px 0 !important;
    }

        .tableTools nav {
            flex-flow: column nowrap;
            display: flex;
        }

            .tableTools nav label {
                margin: 0 0 10px;
            }

            .tableTools nav select {
                width: auto;
                margin: 0 0 20px 0;
            }

            .tableTools nav.mobile {
                display: none;
            }

    .columnFilters {
        display: block !important;
    }

    table.charts th {
        padding-right: 0 !important;
        justify-content: center;
        text-align: center;
    }

    table.charts td {
        display: flex;
        flex-flow: column nowrap;
        padding: 9px 0 !important;
    }

        table.charts td abbr {
            margin: 0 auto !important;
            text-align: center;
        }

    th {
        white-space: pre-wrap;
    }

    th, td {
        padding-right: 20px !important;
    }

        th:last-of-type, th:last-of-type {
            padding-right: 0 !important;
        }

        td:last-of-type.scoreGraph {
            padding-right: 0 !important;
        }

        td:last-of-type div.scoreWrapper {
            width: auto !important;
        }

    /*table.charts td div.score {
        background: none !important;
        border: none !important;
        text-align: center;
    }*/

    .score.redScore {
        /*color: #e08c8c !important;*/
        text-align: center;
    }

    .score.greenScore {
        /*color: #32a68b !important;*/
        text-align: center;
    }

    #AgencyProfileFooter li {
        margin: 0;
    }

    .returnToTop {
        display: none;
    }

    #loginForm h2 {
        margin: 40px 0 0;
    }

    form#loginForm .messages {
        margin: 0 !important;
    }


    /* For Agency Indicators Page  */
    @media (min-width: 768px) and (max-width: 1280px) {

        #mainContent {
            max-width: 100vw;
			padding: 50px calc(2vw + 12px);
        }

            #mainContent #contentBody {
                max-width: 100%;
            }
		
		section {
			padding: 70px 0;
		}

        div.section-container {
            margin-bottom: 70px !important;
        }
		
		section h2 {
            font-size: 30px !important;
            line-height: 40px !important;
        }

        section.box {
            float: none;
            width: 100% !important;
            max-width: 97vw !important;
            padding: 0px 0px 15px 0px !important;
        }

            section.box:nth-of-type(odd) > div.box-margin, section.box > div.box-margin {
                margin: 0px 0px 0px 0px !important;
            }

            section.box > div.box-margin {
                padding: 20px !important;
            }

        section ul.workforce-demographics {
            flex-wrap: wrap !important;
            flex-direction: row !important;
        }

        ul.workforce-demographics > li > p {
            margin-bottom: 20px;
        }

        div.section-container {
            overflow: hidden !important;
        }
		
		.all-popup .container {
			width: calc(90% - 84px) !important;
			height: calc(100% - 150px) !important;
			top: 40px !important;
			left: 40px !important;
			padding: 50px 40px 20px 40px !important;
		}
			
		section div.charts ul li {
			width: 72%;
		}
    }
}