/* Responsive CSS for devices with a max width of 320px             */
/* This overrides styles in site.css                                */

@media (max-width: 767px) {
    #ControlPanelTab {
        display: none !important;
    }

    #feedbackTab {
        display: none !important;
    }

    section#resultsByYear {
        display: none !important;
    }

    header {
        flex-flow: row nowrap !important;
        position: fixed;
        z-index: 100;
        top: 0px;
		padding: 23px calc(2vw + 12px) 23px calc(2vw + 12px);
    }

        header > a img {
            width: 80%;
        }

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

        header .menu {
            display: none;
        }

    table {
        max-width: 90vw;
    }

    #preHeader {
        display: none !important;
    }

    #preContent {
        margin: 65px 0 0 !important;
		padding: 20px calc(2vw + 12px) 20px calc(2vw + 12px);
    }

    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: 100%;
        padding: 30px;
        position: fixed;
        right: 0;
        top: 0;
    }

    #mainNavigation .menu {
        display: none;
    }

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

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

    #breadcrumbs {
        padding: 0;
        flex-flow: row wrap !important;
        flex: 0 1 auto !important;
    }

        #breadcrumbs .switchAgency {
            margin: 0 !important;
        }

    spotlight {
        padding-top: 100px;
    }
	
	spotlight h1 {
			font-size: 40px !important;
			margin: 40px 0;
		}
	
	spotlight h2 {
			font-size: 24px;
		}
	
    .description {
        font-size: 16px !important;
        line-height: 26px !important;
		max-width: 100% !important;
    }
	
	spotlight p.description {
		font-size: 15px !important;
    	max-width: 78vw;
	}

    .buckets {
        flex-flow: column;
    }

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

    section {
        padding: 50px 0;
    }
	
	section:first-child, section.details:first-child {
		padding-top: 0px;
		
	}

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

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

        section ul.colorLegend.colorLegend {
            flex-flow: column !important;
            width: auto !important;
            margin: 0 0 0px !important;
        }

        section h2 {
            font-size: 22px !important;
            line-height: 30px !important;
        }
	
		section.buckets h2 {
			margin-bottom: 11px !important;
		}

        section ul {
            flex-flow: column nowrap !important;
            margin: 0 !important;
            padding: 0 !important;
        }

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

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

        section.details.stats > ul {
            width: auto !important;
        }

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

        section.details.stats {
            flex-flow: column nowrap !important;
            padding-top: 60px !important;
        }

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

        section .help {
            display: none;
        }

    nav.tabs {
        flex-flow: column nowrap;
        width: auto !important;
    }

        nav.tabs a {
            flex-flow: column nowrap;
            margin: 0 !important;
            width: auto !important;
        }

    .agencySizeToggle {
        width: auto !important;
    }

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

    .downloadLinks {
        display: none !important;
    }

    .tableTools {
        flex-flow: column nowrap !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;
            }

    .columnFilters {
        display: block !important;
    }

    .charts.two > li {
        width: initial;
    }

    thead.sticky {
        display: none !important;
    }

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

        th.score, td.scoreGraph {
            padding-right: 0 !important;
            width: 100px;
        }

            td.scoreGraph div.scoreWrapper {
                width: 100% !important;
            }

    table.charts {
        display: none;
    }

        table.charts.mobile {
            display: block;
        }

            table.charts.mobile:not(:first-of-type) {
                margin: 40px 0;
            }

            table.charts.mobile th, table.charts.mobile td {
                margin: 0 10px;
            }

    #AgencyProfileFooter li {
        width: initial !important;
        margin: 0;
    }

    .returnToTop {
        display: none;
    }

    footer nav {
        flex-flow: column nowrap;
    }

        footer nav a {
            margin: 10px 0 !important;
        }

    #preContent > h1 {
        font-size: 30px;
		line-height: 36px;
        margin-top: 30px !important;
    }

    form#loginForm .form {
        height: auto !important;
    }

    #mainContent form {
        max-width: 90vw !important;
    }

        #mainContent form input, #mainContent form select {
            max-width: 100%;
        }

    #loginForm h2 {
        margin: 40px 0 0;
    }
	
	h1 {
		font-size: 30px;
		line-height: 36px;
	}
	
    /* For Agency Indicators Page  */

    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: column !important;
    }

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

    ul.workforce-demographics > li {
        padding-right: 0px;
		padding-bottom: 30px;
    }

    div.chart-container {
        float: none;
        width: 100% !important;
        max-width: 97vw !important;
        padding: 0px 0px 40px 0px !important;
    }

    div.section-container {
        overflow: hidden !important;
    }

    li:last-child {
        float: none;
    }

    .desktopChart {
        display: none;
    }

    .mobileChart {
        display: block;
    }

    .pieChart {
        float: none;
    }

    .agencyIndicatorsBarChart {
        width: 80%;
    }


    li.box-width {
        width: 100%;
    }

    h2 {
        padding: 0 0 0 0;
    }
	
	.all-popup .container {
		width: calc(100vw - 80px) !important;
		height: calc(100% - 130px) !important;
		top: 30px !important;
		left: 20px !important;
		padding: 50px 20px 20px 20px !important;
	}
	
	div.bottom-spacing {
		margin-bottom: 50px !important;
	}
	
	div.popup-intro {
		display: block !important;
	}
	
	div.popup-intro > div:first-of-type {
		margin-right: 0% !important;
		margin-bottom: 25px;
	}
	
	div.popup-intro > div {
		width: 100% !important;
	}

   .bottom-spacing-medium {
        margin-bottom: 40px;
    }

   .halfWidth {
       width: 100% !important;
	   margin-right: 0;
	   padding-bottom: 40px;
   }
   .chart-data div.detail {
		padding-top: 10px !important;
	}

}