/*
    (c)2018 - visuallizard.com

    Responsive Styles
    Sets responsive style breakpoints templates.
*/

/* !Media Queries ============================== */

/* Up to 1200px (devices and desktop browsers) */
@media only screen and (max-width: 1200px) {
    .container { left: auto; width: 100%; margin: 0; }
    .primary { padding: 0 20px 30px 0; }
    div.banner-set { max-width: 100%; }

    ul.sus-nav { font-size: 12px; }
    ul.sus-nav li a { padding: 15px 10px; }
    div.sus-section h1 { padding: 45px 0 45px 180px; font-size: 30px; }
    main.sustainability .stat-block,
    main.sustainability .overview-block,
    main.sustainability .main-region { width: 100%; margin-left: 0; }
    main.summary-governance .summary-intro { padding: 0 15px; }

    main.sustainability .goals .commitments-table tbody tr {  }
    main.sustainability .goals .commitments-table thead th,
    main.sustainability .goals .commitments-table tbody tr > td p { margin: 0; }
}

/* Up to 1024px (landscape tablets) */
@media only screen and (max-width: 1024px) {

    main.summary-governance .summary-intro .cke > div.c1 ul { flex-wrap: wrap; }
    main.summary-governance .summary-intro .cke > div.c1 ul li { flex-basis: 32%; margin: 0 0 15px 0; }

    div.banner-promise .banner > div.banner-text h2 { font-size: 3.5rem; }

    div.pillar-banner-2025 h2 { top: 48%; font-size: 4rem; margin-left: -3px; }
    div.pillar-banner-2025 p.sdg { top: 68%; font-size: 1rem; }

}

/* Up to 768px (portrait tablets) */
@media only screen and (max-width: 800px) {
    header.site-header { display: none; }
    span.mobile-menu-toggle {
        display: block;
        position: absolute;
        top: 15px;
        right: 15px;
        width: 30px;
        line-height: 0;
        padding: 3px 0 0 0;
        border-top: 9px double #000;
        border-bottom: 9px double #000;
    }
    .main-nav ul.social { display: none; }
    .site-title { width: 50%; margin: 0 25% 15px 25%; }
    .site-title > a { width: 100%; }
    form.search-form { clear: both; float: none; width: 30%; padding: 0; margin: 0 auto; }
    form.search-form .search-input { width: 80%; }
    form.search-form button { padding: 2px 0 0 0; }
    form.search-form button svg { width: 20px; height: 20px; }

    .main-nav { position: relative; }
    .main-nav div.nav-block {
        display: none;
        clear: both;
        float: left;
        width: 100%;
    }
    .main-nav.show div.nav-block { display: block; }
    .main-nav .nav-1 { display: block; width: 100%; border-bottom: 1px solid #000; }
    .main-nav .nav-1 > li { border-top: 1px solid #000; }
    .main-nav .nav-1 > li > a { text-align: left; padding: 10px 15px; }
    .main-nav li > .sub-list { display: none; position: relative; visibility: visible; opacity: 1; width: 100%; box-shadow: none; }
    .main-nav .nav-2 > li { border-top: 1px dotted #000; }
    .main-nav .nav-2 > li > a { padding: 10px 15px 10px 30px; }

    main .container .promise:before { position: relative; width: 100%; height: 250px; box-shadow: none; transform: none; }
    .media-investors div.link-box { width: 100%; }
    .media-investors div.link-box:first-of-type { margin: 0 0 15px 0; }
    main .container .history:before { position: relative; width: 100%; height: 250px; }

    div.sus-section h1 { padding: 45px 0 45px 180px; font-size: 26px; }

    main.name-store .container .introduction .main-region > h2:first-of-type { font-size: 40px; letter-spacing: normal; }

    .sidebar { display: none; }
    .primary { float: left; width: 100%; padding: 15px; margin: 0; }
    div.banner-set { width: 100%; }
    .primary div.community-profile div.colour { width: 33%; margin: 0 0 15px 0; }
    .primary div.community-profile div.colour.vision { width: 34%; }
    .section h2 { padding: 10px 40px 10px 10px; }
    div.staff-set div.staff img { width: 100%; padding: 0 0 10px 0; }
    div.staff-set div.staff div.staff-copy { width: 100%; }
    .operation-locations { padding: 0; }
    .operation-locations > ul {  }
    .operation-locations > ul li,
    .operation-locations > ul li:nth-of-type(5n+1) { margin: 0 5px 10px 5px; }
    .operation-services { padding: 0 15px; }
    .operation-services p img { float: none; margin: 0 0 15px 0; }
    div.news-set .featured article,
    div.news-set .featured article:nth-of-type(2n+1) { width: 100%; min-height: 180px; }
    div.table-display { display: block; position: relative; float: left; width: 100%; border: 1px solid #ccc; overflow: auto; }

    main .container.property-block { float: left; padding: 15px; }
    main .container.property-block ul.properties { display: flex; }
    main .container.property-block ul.properties li { flex-grow: 1; }
    main .container.property-block ul.properties li a { display: block; }

    main .container .introduction { padding: 60px 15px; }
    main .container .promise { padding: 40px 15px; }
    main .container .media-investors { padding: 60px 15px; }
    main .container .history { padding: 40px 15px; }
    main.name-store .container .introduction { left: auto; width: 100%; padding: 15px; margin: 0 0 30px 0; }

    div.staff-set div.staff img { width: 40%; float: right; }
    div.staff-set div.staff div.staff-copy { width: 60%; float: left; padding: 0 30px 0 0; }

    div.banner-promise .banner > div.banner-text { transform: translateY(3px); }
    div.banner-promise .banner > div.banner-text h2 { font-size: 2.5rem; line-height: 1; }
    main .container .promise-intro { padding: 60px; }
    main .container .commitment { padding: 60px; }
    main .container .pillar { padding: 30px; }
    main .container .pillar .cke > .c2,
    main .container .pillar .cke > .c2.c-first { width: 100%; }
    main .container .pillar .cke > .c2 p img { display: block; margin: 0 auto; }

    .community .cke > .c2 { order: 0; }
    .community .cke > .c2.c-first { order: 1; }

    main.pillar-2025 ul.sus-nav { display: none; }
    div.pillar-banner-2025 { width: 100%; overflow-x: hidden; }
    div.pillar-banner-2025 > img { max-width: 800px; }
    div.pillar-banner-2025 h2 { top: 48%; left: 1rem; font-size: 4rem; margin-left: -3px; }
    div.pillar-banner-2025 p.sdg { top: 70%; left: 1rem; font-size: 1rem; }
    div.pillar-banner-2025 div.sdg-set { left: 1rem; bottom: 1rem; max-width: 350px; column-gap: 1%; }
    div.pillar-banner-2025 p.caption { right: 1rem; bottom: 1rem; font-size: 0.875rem; }
    main.pillar-2025 section.pillar-copy { padding: 0 1rem; }


    footer div.logo { width: 50%; margin: 0 25%; }
    footer ul.footer-nav { display: block; width: 100%; margin: 20px 0; }
    footer ul.footer-nav li { width: 100%; border: none; }
    footer ul.footer-nav li a { padding: 10px 0; }
    footer ul.social { width: 50%; margin: 15px 25%; }
    footer ul.social li a { margin: 0 auto; }
}

/* Up to 670px (portrait tablets) */
@media only screen and (max-width: 670px) {
    .cke > .c2 { width: 100%; margin: 0; }

    main .container.wide { padding: 30px; }

    form.search-form { float: none; width: 60%; padding: 0; margin: 0 auto; }
    .primary div.community-profile div.colour,
    .primary div.community-profile div.colour.mission,
    .primary div.community-profile div.colour.vision { width: 100%; margin: 0 0 15px 0; }
    .primary div.community-profile div.colour img { position: relative; }
    div.staff-set div.staff img { width: 100%; float: none; }
    div.staff-set div.staff div.staff-copy { width: 100%; float: none; padding: 0; }

    div.success-set div.success,
    div.join-set div.join,
    div.testimonial-set div.testimonial { flex-wrap: wrap; }
    div.success-set div.success > img,
    div.join-set div.join > img,
    div.testimonial-set div.testimonial > img { width: 100%; margin-bottom: 1.25rem; }
    div.success-set div.success > div.description,
    div.join-set div.join > div.description,
    div.testimonial-set div.testimonial > div.description { width: 100%; padding-left: 0; }

    ul.sus-nav { display: block; font-size: 12px; }
    ul.sus-nav li { border: none; }
    ul.sus-nav li a { padding: 15px 10px; }
    div.sus-section h1 { font-size: 22px; padding: 45px 0 45px 165px; }
    main.sustainability .stat-block,
    main.sustainability .overview-block,
    main.sustainability .main-region { width: 100%; margin-left: 0; }

    main.sustainability .stat-block,
    main.sustainability .overview-block,
    main.sustainability .main-region { padding: 15px; }
    main.sustainability .stat-block .stats { width: 100%; }
    main.sustainability .stat-block .stats-image { display: none; }
    main.sustainability .overview-block .overview-image { width: 100%; margin: 0 0 10px 0; }
    main.sustainability .overview-block .overview { width: 100%; }

    main.summary-governance .summary-intro { padding: 0 15px; }
    main.summary-governance .summary-intro .cke > div.c1 ul { flex-wrap: wrap; }
    main.summary-governance .summary-intro .cke > div.c1 ul li { flex-basis: 50%; margin: 0 0 15px 0; }

    main.sustainability .goals .commitments-table thead { display: none; }
    main.sustainability .goals .commitments-table tbody tr { display: block; }
    main.sustainability .goals .commitments-table tbody tr > td { display: block; width: 100%; border: none; border-top: 1px solid #fff; }
    main.sustainability .goals .commitments-table tbody tr > td:first-child,
    main.sustainability.summary-governance .goals .commitments-table tbody tr > td:first-child { width: 100%; border: none; }
    main.sustainability .goals .commitments-table tbody tr > td:last-child,
    main.sustainability.summary-governance .goals .commitments-table tbody tr > td:last-child { width: 100%; }
    main.sustainability .goals .commitments-table tbody tr > td p { margin: 0; }
    main.sustainability .goals .commitments-table tbody tr > td:first-child:before { content: "Governance Metric: "; font-weight: bold; }
    main.sustainability .goals .commitments-table tbody tr > td:nth-child(2n):before { content: "Document: "; font-weight: bold; }
    main.sustainability .goals .commitments-table tbody tr > td:last-child p:before { content: "Page: "; font-weight: bold; }

    main.sustainability .goals .commitments-table.actions tbody tr > td:first-child:before { content: "Goal: "; display: block; margin: 0 0 10px 0; font-weight: bold; }
    main.sustainability .goals .commitments-table.actions tbody tr > td:nth-child(2n):before { content: "Action: "; display: block; margin: 0 0 10px 0; font-weight: bold; }
    main.sustainability .goals .commitments-table.actions tbody tr > td:last-child:before { content: "Score: "; display: block; margin: 0 0 10px 0; font-weight: bold; }

    main .container.property-block { display: none; }

    div.banner-promise .banner > div.banner-text {  }
    div.banner-promise .banner > div.banner-text h2 { font-size: 2rem; line-height: 1; }
    main .container .promise-intro,
    main .container .commitment,
    main .container .pillar { padding: 2rem 1rem; }
    main .container .pillar.wellbeing { padding-top: 2rem; }
    .promise-intro blockquote { padding: 2rem; }

    div.sustainability-intro div.c1 > div.report-cover { flex-basis: 100%; max-width: 100%; }
    div.sustainability-intro div.c1 > div.report-intro { flex-basis: 100%; max-width: 100%; }
    div.report-set div.report-category { flex-basis: 100%; max-width: 100%; }
    main.pillar div.pillar-banner { overflow-x: hidden; }
    main.pillar div.pillar-banner img { max-width: 200%; }
    main.pillar div.pillar-banner h2 { font-size: 2.5rem; }
    main.pillar section.pillar-copy { max-width: 100%; padding: 0 1rem; }
    div.commitments table.commitments-table thead th { padding: 1rem 0.625rem; font-size: 1rem; }
    div.commitments table.commitments-table tbody td { padding: 0.625rem; font-size: 0.875rem; }

    main.pillar-2025 ul.sus-nav { display: none; }
    div.pillar-banner-2025 { width: 100%; overflow-x: hidden; }
    div.pillar-banner-2025 > img { max-width: 800px; margin-left: -50%; }
    div.pillar-banner-2025 h2 { top: 45%; left: 1rem; font-size: 3rem; margin-left: -3px; }
    div.pillar-banner-2025 p.sdg { top: 60%; left: 1rem; font-size: 1rem; }
    div.pillar-banner-2025 div.sdg-set { left: 0; bottom: 3rem; max-width: 100%; padding: 0 1rem; column-gap: 2%; }
    div.pillar-banner-2025 p.caption { right: 1rem; bottom: 1rem; font-size: 0.875rem; }
    main.pillar-2025 section.pillar-copy { padding: 0 1rem; }

    main.landing .container { padding: 0 1rem; }
    /* main.landing section#heading h1 { bottom: 110px; max-width: 100%; font-size: 32px; }
    main.landing section#heading h2 { max-width: 100%; font-size: 28px; } */
    main.landing section#registration div.form-block { padding: 1rem; }

}

@media only screen and (max-width: 520px) {
    div.section-nav div.section-nav-item { flex-basis: 100%; max-width: 100%; }

    main.landing section#heading h1 { bottom: 110px; max-width: 100%; font-size: 32px; }
    main.landing section#heading h2 { max-width: 100%; font-size: 28px; }
}