/* scaling shell width ===================================================================== */
/* NOTE: do NOT put this is the parent style sheet!!!!! the media queries below need to be changed according to the requirements of the child theme */

@media screen and (min-width: 1024px) {
    .short-title {
        display: none;
    }

    .wide-title {
        display: block;
    }
}

/*  @media screen and (min-width: 1024px) {*/

@media screen and (max-width: 1023px) {
    .panel,
    .title-container,
    footer#footer-shell-2 {
        /*padding-left: 3% !important;
        padding-right: 3% !important;*/
    }
    .subpage_return {
        padding-left: 2rem;
    }
    table {
        display: block;
        position: relative;
        width: 100%;
    }

    .table {
        display: block
    }

    thead {
        display: block;
        float: left;
    }
    .table-header th {
        padding: 0 0.25rem 0 0;
    }

    thead tr {
        display: block;
    }

    .table-year {
        font-size: 1rem;
        color: white;
        left: 1.5rem;
        top: -1.5rem;

    }

    tbody {
        display: block;
        width: auto !important;
        position: relative;
        overflow-x: auto;
        white-space: nowrap;
        border: none;
        font-size: 0;
    }

    tbody tr {
        display: inline-block;
        vertical-align: top;
        padding: 0 0;
        margin: 0;
    }

    th, td {
        display: block;
        margin: 0;
        vertical-align: top;
        line-height: 1rem;
        height: 3rem;
        padding: 0.25rem 0.25rem;
    }

    .short-title {
        display: block;
        padding: 4px;
    }

    .wide-title {
        display: none;
    }

    .separator {
        border-width: 1px 0 0 0;
        border-color: #dadada;
    }

    th.separator, .separator:nth-of-type(2) {
        border-width: 0 0 0 0;
    }
    .financials_subpage h4,
    #summary_investments h4,
    #investment_assets h4,
    .panel.financial_panel h4 {
        line-height: 1;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
    #summary_investments .chart {
        padding-left: 2rem;
        padding-right: 1rem;
    }
    #investments_hover {
        transform: translate(2rem, 1rem)
    }
    #hover_trust, #hover_foundation {
        font-size: 0.8rem;
        width: 6rem;
        height: 1.5rem;
    }
}

/*@media screen and (max-width: 1023px) {*/

@media screen and (max-width: 960px) {
    .shell,
    .panel,
    footer#footer-shell-2 {
        width: 100% !important;
    }

    .panel,
    .title-container,
    footer#footer-shell-2 {
        padding-left: 3% !important;
        padding-right: 3% !important;
    }

    .panel .title-container {
        padding-left: 0% !important;
        padding-right: 0% !important;
    }

    #leaders_messages .col_3,
    #leaders_messages .col_5,
    #leaders .col_3,
    #leaders .col_5 {
        width: 23.75%;
    }

    #leaders_messages .col_4,
    #leaders .col_4 {
        width: 47.5%;
    }

    .leader_letter h3 {
        font-size: 1.5rem;
    }

    .leader_letter h6,
    .leader_letter p {
        font-size: 0.8rem;
    }
    #grantmaking {
        padding: 3rem 15%;
    }
}

/* /@media screen and (max-width: 960px) { */

@media screen and (max-width: 860px) {
}

/* /@media screen and (max-width:  860px) { */

@media screen and (min-width: 681px) {
    #grantmaking_image,
    #board_of_directors_image {
        display: none;
    }
    #grants_grantmaking_chart_mobile,
    #grants_place_chart_mobile {
        display: none;
    }
}

@media screen and (max-width: 680px) {   /* mobile switchover */

    .bgimg2_img {
        display: none;
    }
    #grants_grantmaking_chart_mobile,
    #grants_place_chart_mobile  {
        display: block;
        margin-top: 2rem;
    }
    #grants_grantmaking_chart,
    #grants_place_chart {
        display: none;
    }
    .mobile_chart_bar {
        height: 4.375rem;
    }
    .mobile_bar {
        height: 2rem;
        display: inline-block;
    }
    .mobile_value {
        display: inline-block;
        font-size: 1.375rem;
        font-family: "Oswald", sans-serif;
        transform: translateY(-0.35rem);
    }
    .mobile_legend {
        font-family: "FFMetaWebBold", sans-serif;
    }
    .bgimg2_content {
        position: relative !important;
        top: 0% !important;
        transform: translate(0%, 0%);
        z-index: 110;
    }

    .bgimg2_img-overlay-gradient {
        background-size: cover;
    }

    .wp-video {
        display: none;
    }

    #title-reverse-static {
        width: 90%;
        height: auto;
        display: block;
        margin: 0 5%;
    }

    #animation_container_1, #dom_overlay_container_1 {
        display: none;
    }

    h4#home-page-communities, #explore_button {
        opacity: 1;
        transition-duration: 0;
    }
    #leadership {
        height: auto;
        padding: 3rem 0;
    }
    #leadership > p,
    #grantmaking > p {
        padding: 0;
    }
    #leaders {
        display: none;
    }
    #leaders_messages {
        position: relative;
        transform: none;
        margin: 0;
        padding: 0;
    }
    #leaders_messages > .panel {
        width: 100%;
        margin: 0 !important;
        padding: 0 1.25rem !important;
    }
    #leaders_messages .col_3,
    #leaders_messages .col_4,
    #leaders_messages .col_5 {
        margin: 1rem 0;
        padding: 0;
        float: none;
        width: 100%;
    }
    #leaders_messages .col_4 {
        background-image: url(/userfiles/combined_lajune_ramon-632x406.png);
        background-size: cover;
        background-position: top center;
        height: 30vh;
    }
    .leader_letter h3 {
        font-size: 1.875rem;
    }

    .leader_letter h6,
    .leader_letter p {
        font-size: 1rem;
    }
    #grantmaking {
        min-height: inherit;
        padding: 1.5rem 1.25rem;
    }
    #grantmaking_animation {
        width: 100%;
        padding: 0;
        margin: 0;
        height: auto !important;
    }
    #canvas {
        display: none;
    }
    #dom_overlay_container {
        display: none;
    }
    #grantmaking_header,
    #grantmaking_footer {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    #grantmaking_header h5,
    #grantmaking_header p,
    #grantmaking_footer p {
        display: none;
    }
    #animation_container {
        display: none;
    }
    #grantmaking_image {
        display: block;
        height: auto;
    }
    #grantmaking_image img:first-of-type {
        position: relative;
        width: 100%;
        height: auto;
    }
    #grantmaking_image img {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: auto;
    }
    #grantmaking_image img + p,
    #grantmaking_image  map {
        display: none;
    }

    #financials {
        padding: 2rem 1.25rem;
    }
    #financials > p {
        display: none;
    }
    #financials .panel {
        padding: 0;
        margin: 0;
    }
    #financials_sections .col_3,
    #financials_sections .col_4,
    #financials_sections .col_5 {
        float: none;
        width: 100%;
    }
    #treasurers_section,
    #investments_section {
        margin-bottom: 1rem;
    }

    #financials_sections .wrapper {
        transform: none !important;
        height: 100%;
        padding-top: 50%;
    }
    #board_of_directors_image {
        display: block;
    }
    #about {
        width: 100%;
        margin: 0;
        padding: 2rem 1.25rem 3rem 1.25rem;
    }
    #about_bg_image {
        background-image: none;
        height: auto;
        position: relative;
    }
    a[name='about'] {
        display: none;
    }
    #about_kellogg {
        margin: 2rem 0;
        width: 100% !important;
        padding: 2.5rem 1rem !important;
    }
    #about_buttons {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    #about_buttons .ar_bn_link {
        display: block;
        margin: 0 auto 0.8rem auto;
    }
    .subpage_wrapper {
        overflow-x: hidden;
    }
    .subpage_content,
    .grantmaking_priorities_links {
        margin: auto 0 !important;
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }
    .grantmaking_priorities_links .col_11,
    .grantmaking_priorities_links .col_12 {
        float: none;
        width: 100%;
        margin: 0;
    }
    .financials_subpage .panel {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }
    .financials_subpage .subpage_content,
    #grantmaking_subpage .subpage_content {
        padding-bottom: 0.75rem;
    }

    .financials_subpage table {
        overflow-x: scroll;
    }
    #financial_position,
    #activities,
    #summary_investments,
    #investment_assets,
    .panel.financial_panel.chartdraw {
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 2rem;
    }
    #audited_statements.ar_bn_link {
        height: auto;
    }

    /* ------	donought charts	------	*/
    .chart_wrapper.donut,
    .chart_wrapper.donut.small {
        width: 80vw;
        height: 80vw;
        margin: 1rem 8vw;
    }
    /*.chart_wrapper.donut.small {
        max-height: 25vh;
    }
    .chart_wrapper.donut.small {
        top: 0;
        left: 30%;
        width: 40%;
    }*/
    .chart_wrapper ~ .donut_legend {
        position: relative;
        width: 100%;
        margin-top: 0;
    }

    .donut_legend .legend_item {
        width: 100%;
        padding: 1rem 0;
    }
    .donut_legend .legend_item span.legend_color {
        width: 1em
    }
    .donut_legend .legend_item span.legend_value {
        width: 3rem;
    }
    .donut_legend .legend_item span.legend_title {
        white-space: normal;
        height: auto;
    }
    .table.blue, .table.blue td {
        font-size: 0.8rem;
    }

    thead {
        max-width: 33%;
    }
    .table-year {
        transform: rotate(-90deg);
        font-size: 0.8rem;
        left: -0.2rem;
        top: 0.3rem;
    }

    .grants_grantmaking {
        padding-top: 2rem;
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }
    #grantmaking_area_place {
        padding-top: 2rem;
    }
    #summary_investments .chart{
        padding-left: 3rem !important;
        padding-right: 2rem !important;
    }
    .vertical-chart .chart {
        padding-left: 3rem !important;
        padding-right: 0rem !important;
    }
    .vertical-chart .yaxis,
    .vertical-chart .chart_bars {
        left: 0 !important;
        margin-left: 0 !important;
        width: 100% !important;
    }
    .vertical-chart .chart_bar {
        padding: 0 0.15rem !important;
    }
    .vertical-chart .chart .yaxis-label h6 {
        transform: translateX(-3rem) translateY(0.8rem) !important;
    }
    .vertical-chart .column_title {
        font-size: 0.8rem !important;;
    }
    #investments_chart h6,
    .vertical-chart .chart h6 {
        font-size: 0.8rem !important;
        transform: translateX(-3rem) translateY(0.8rem) !important
    }
    .vertical-chart .bar_year {
        transform: translateX(-0.5rem) translateY(0.5rem) rotate(-45deg) !important;
    }
    #investments_chart .bar_year {
        transform: translate(50%) translateY(-2.5rem) rotate(-45deg) !important;
    }
    #investments_chart .chart_bar {
        padding: 0 0.15rem !important;
    }
    #commitments_year_hover, #payments_year_hover, #payout_year_hover  {
        transform: translate(-75%, -4rem);
    }
    #commitments_year_hover::after, #payments_year_hover::after, #payout_year_hover::after {
        transform: translate(1rem,0);
    }
    #grantmaking_area_place .donut_key {
        font-size: 0.8rem;
        width: 30%;
    }
    #donuts_key_asterisk {
        font-size: 0.8rem;
    }
}  /* /@media screen and (max-width: 680px) { */



@media screen and (max-width: 550px) {

    .form1,
    .form1 > fieldset,
    .form1 > div > span > fieldset {
        display: block;
        height: auto;
    }

    .form1 > div,
    .form1 > fieldset > div,
    .form1 > div > span > fieldset > div,
    .form1 > div > label,
    .form1 > fieldset > div > label,
    .form1 > div > span > fieldset > div > label,
    .form1 > div > span,
    .form1 > fieldset > div > span,
    .form1 > div > span > fieldset > div > span {
        display: block;
        height: auto;
        xborder: solid 1px #000000;
    }

    .form1 > div > label,
    .form1 > fieldset > div > label,
    .form1 > div > span > fieldset > div > label {
        text-align: left;
    }

    input,
    select,
    textarea {
        max-width: 100%;
    }

    .subpage .col_1 {
        width: 100%;
    }

    .subpage .col_2 {
        display: none;
    }
    .table.blue, .table.blue td {
        font-size: 0.7rem;
    }

}

/* /@media screen and (max-width: 550px) { */

@media screen and (max-width: 400px) {
    .financial_panel .donut_legend .legend_item span {
        font-size: 0.8rem;
    }
    .table.blue, .table.blue td {
        font-size: 0.6rem;
    }
}

/* /@media screen and (max-width: 400px) { */
/* /scaling shell width ===================================================================== */