@charset "utf-8";
/* Simple fluid media */
img, object, embed, video {
	max-width: 100%;
}
.ie6 img {
	width:100%;
}




/*======================================================
    CORRIDOR INTRO
======================================================*/

    .corridor{
        width: 100%;
        padding: 4.5em 7.5%;
        background-color: var(--white);
        float: left;
        clear: both;
    }

    .cr-inner{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 2.5em;
    }

    .cr-left{ width: 100%;}

    .cr-left h2{
        color: var(--basin-green);
        margin-bottom: 0.6em;
    }

    .cr-right{ width: 100%;}

    .cr-right h4{
        margin-bottom: 1.2em;
        font-size: 1.12em;
        font-weight: 500;
        line-height: 1.6;
        color: var(--basin-green);
    }




/*======================================================
    PLACES  —  the communities of the corridor
======================================================*/

    .places{
        width: 100%;
        padding: 0 7.5% 4.5em 7.5%;
        background-color: var(--white);
        float: left;
        clear: both;
    }

    .pc-inner{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 1px;
        background-color: var(--line);
        border: 1px solid var(--line);
        border-radius: 1.5em;
        overflow: hidden;
    }

    .pc-place{
        flex: 1 1 40%;
        min-width: 0;
        padding: 1.8em 1.4em;
        background-color: var(--white);
        transition: all 0.4s ease;
    }

    .pc-place:hover{ background-color: var(--mist);}

    .pc-place h5{
        margin-bottom: 0.7em;
        color: var(--growth-teal);
    }

    .pc-place h3{
        margin-bottom: 0.4em;
        font-size: 1.15em;
        color: var(--basin-green);
    }

    .pc-place p{
        margin: 0;
        font-size: 0.85em;
        line-height: 1.6;
    }




/*======================================================
    BASIN GALLERY  —  swiper
======================================================*/

    .basin-gallery{
        width: 100%;
        padding: 4.5em 7.5%;
        background-color: var(--basin-green);
        float: left;
        clear: both;
        overflow: hidden;
    }

    .bg-head{
        width: 100%;
        margin-bottom: 2.5em;
    }

    .bg-head h2{
        max-width: 13em;
        color: var(--white);
        margin-bottom: 0.5em;
    }

    .bg-head p{
        max-width: 34em;
        color: rgba(255,255,255,0.65);
    }

    .basin-gallery .swiper-container{
        width: 100%;
        height: auto;
        padding-bottom: 3.5em;
    }

    /*--this swiper build positions the wrapper absolutely; the gallery
        sizes to its slides instead, so it is put back into flow--*/
    .basin-gallery .swiper-wrapper{
        position: relative;
        height: auto;
        align-items: flex-start;
    }

    .swiper-slide.site{
        width: 100%;
        height: auto;
    }

    .siteimg{
        width: 100%;
        height: 15em;
        margin-bottom: 1.2em;
        background-size: cover;
        background-position: center;
        border-radius: 1.4em;
    }

    .sitetext h3{
        margin-bottom: 0.4em;
        font-size: 1.15em;
        color: var(--white);
    }

    .sitetext p{
        margin: 0;
        font-size: 0.88em;
        color: rgba(255,255,255,0.6);
    }

    .basin-gallery .swiper-pagination-bullet{
        background-color: rgba(255,255,255,0.35);
        opacity: 1;
    }

    .basin-gallery .swiper-pagination-bullet-active{ background-color: var(--energy-lime);}




/*======================================================
    ENDOWMENTS  —  what the basin holds
======================================================*/

    .endowments{
        width: 100%;
        padding: 4.5em 7.5%;
        background-color: var(--mist);
        float: left;
        clear: both;
    }

    .ed-head{ margin-bottom: 2.5em;}

    .ed-head h2{
        max-width: 13em;
        color: var(--basin-green);
        margin-bottom: 0.5em;
    }

    .ed-head p{ max-width: 36em;}

    .ed-inner{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 1em;
    }

    .ed-card{
        width: 100%;
        padding: 1.8em 1.6em;
        background-color: var(--white);
        border: 1px solid var(--line);
        border-radius: 1.4em;
    }

    .edc-icon{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.8em;
        height: 2.8em;
        margin-bottom: 1.2em;
        color: var(--white);
        background-color: var(--growth-teal);
        border-radius: 50%;
    }

    .ed-card h3{
        margin-bottom: 0.6em;
        font-size: 1.15em;
        color: var(--basin-green);
    }

    .ed-card p{
        margin: 0;
        font-size: 0.9em;
    }




/*======================================================
    ALIGNMENT  —  the Volta Economic Corridor
======================================================*/

    .alignment{
        position: relative;
        width: 100%;
        float: left;
        clear: both;
    }

    .al-img{
        width: 100%;
        height: 18em;
        background-image: url(../img/basin/river-aerial.jpg);
        background-size: cover;
        background-position: center;
    }

    .al-text{
        width: 100%;
        padding: 4.5em 7.5%;
        background-color: var(--white);
    }

    .al-text h2{
        max-width: 13em;
        color: var(--basin-green);
        margin-bottom: 0.6em;
    }

    .al-text p{ max-width: 36em;}

    .al-text button{ margin-top: 1.6em;}


    /*--stakeholder rows--*/
    .al-stake{
        width: 100%;
        margin-top: 2.5em;
    }

    .als{
        width: 100%;
        padding: 1.5em 0;
        display: flex;
        flex-wrap: wrap;
        gap: 0.4em;
        border-top: 1px solid var(--line);
    }

    .als:last-child{ border-bottom: 1px solid var(--line);}

    .als h4{
        width: 100%;
        font-size: 0.95em;
        font-weight: 600;
        color: var(--basin-green);
    }

    .als p{
        width: 100%;
        margin: 0;
        font-size: 0.88em;
    }




/*======================================================
    TABLET  481px
======================================================*/

@media only screen and (min-width: 481px) {

    .ed-card{ width: calc(50% - 0.5em);}

    .siteimg{ height: 17em;}

    .al-img{ height: 24em;}

}




/*======================================================
    DESKTOP  769px
======================================================*/

@media only screen and (min-width: 769px) {

    .corridor{ padding: 6.5em 7.5% 3.5em 7.5%;}

    .cr-inner{ flex-wrap: nowrap; gap: 6%;}

    .cr-left{ width: 40%;}
    .cr-right{ width: 54%;}


    .places{ padding: 0 7.5% 6.5em 7.5%;}

    .pc-place{ flex: 1 1 20%; padding: 2.2em 1.8em;}


    .basin-gallery{ padding: 6.5em 7.5%;}

    .siteimg{ height: 19em;}


    .endowments{ padding: 6.5em 7.5%;}

    .ed-card{ width: calc(25% - 0.75em);}


    .al-img{ height: 32em;}

    .al-text{
        padding: 6.5em 7.5%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 5%;
    }

    .al-top{ width: 45%;}

    .al-stake{ width: 48%; margin-top: 0;}

    .als{ flex-wrap: nowrap; gap: 1.5em;}

    .als h4{ width: 38%;}
    .als p{ width: 58%;}

}




/*======================================================
    LARGE  1080px
======================================================*/

@media only screen and (min-width: 1080px) {

    .cr-right h4{ font-size: 1.25em;}

    .al-img{ height: 38em;}

}