@charset "utf-8";
/* CSS Document */
@media (max-width: 998px) {
    p{line-height: 18px;}
    /*---navigation
    ============================*/
    .navigation ul li{margin: 0 5px; font-size: 12px;}
    .navigation li:nth-child(1){margin-left: 90px}
    .navigation li:nth-child(3){margin-left: 100px}

    .contentIn{padding: 30px;}


    /*home banner*/
    .homeBanner li{padding-top: 40px; min-height: 670px;}
    .home-slide .container{min-height: 670px;}
    .homeBanner h2{font-size:60px;}
    .homeBanner .learnMore{font-size: 20px;}
    .homeBanner .signUpBox{padding:8px 15px;}
    .homeBanner .signUpBox label{font-size: 12px; padding-top: 5px;}
    .homeBanner .startCampaignButton{font-size: 14px;}

    .homeItemList img{margin-bottom: 15px;}
    .homeItemList h2 a{font-size: 14px;}

    /*what we do page*/
    .whatWeDo .firstRow h2{font-size: 25px;}
    .whatWeDo .firstRow h3{font-size: 13px; line-height: 18px;}
    .whatWeDo .firstRow a{font-size: 14px;}

    .whatWeDo .itemList .item{margin-top: 30px;}
    .whatWeDo .itemList h2{font-size: 30px; line-height: 28px}
    .whatWeDo .itemList p{padding: 8px; line-height: normal;}

    /*who we are page*/
    .whoWeAreBanner{height: 600px; padding-bottom: 100px;}
    .whoWeAreBanner h2{padding: 30px 30px 0; font-size: 55px;}

    .whoWeAre .firstRow h2, .commonTop h2{font-size: 20px;}
    .whoWeAre .firstRow h4, .commonTop h4{font-size: 13px;}
    .whoWeAre .firstRow a, .commonTop a{font-size: 14px;}

    h2.title{font-size: 40px; padding-bottom: 20px;}
    .weBelieve{margin-top: 30px}
    .weBelieve p{line-height: 14px; padding: 4% 0 8%; font-size: 10px;}
    .weBelieve .secondP{padding-bottom: 3%}

    .whoWeAre .itemList{margin-top: 20px;}
    .whoWeAre .item img{margin-bottom: 15px;}
    .whoWeAre .item h3{font-size: 18px;}

    .wePromise .img{margin: 0 -30px;}
    .waterCouncil{margin-top: 30px;}
    .waterCouncil h2{font-size: 40px;}

    /*whyWeDo page*/
    .whyWeDo{padding: 30px 0 0; margin-top: 0}
    .whyWeDo .rightCol{padding: 0 15px;}
    .whyWeDo .headPart{padding: 0}
    .whyWeDo .topPart h2{font-size: 35px;}
    .whyWeDo  h3{font-size: 15px; line-height: 22px;}
    .whyWeDo .topPart h4{font-size: 15px; padding: 12px 0 0 15px}
    .whyWeDo .topPart i{font-size: 40px;}
    .whyWeDo .rightCol .col-sm-5{padding-top: 0}
    .whyWeDo .rightCol .row{padding-top: 20px}

    .whyWeDo .bottomPart{padding-top: 30px; margin-top: 30px}
    .whyWeDo .bottomPartIn{padding: 0 40px}

    .bImg{margin: 0 -30px -30px;}

    .whatWeDo label{font-size: 22px!important;}
    .whatWeDo .signUpBox form{width: 65%}

    .faqSearch{margin: 0 -30px 20px}

    ul.donateList{margin: 0 -10px;}
    .donateList li{padding: 0 10px;}

    .innerBanner{margin: -30px -30px 30px; padding: 60px 30px 0; height: 250px;}
    .innerBanner h1 {
        font: 46px/50px "Arial Black";}
    .whyWeDo .bottomPart{background-size: 700px;}

    /*---footer
    ==============*/
    .mainFooterIn{padding: 30px 50px;}
    .donateButton{font-size: 14px;}
    ul.addressList{padding-top: 20px}
    ul.addressList li:before{adding: 0 3px}

    .mainFooter li{font-size: 9px; color: #d2ebff; margin-bottom: 1px}
}

@media (max-width: 768px) {
    h2{font-size: 24px;}
    h3{font-size: 18px}
    .mainHeader{position: fixed; height: auto; background: #013255; padding: 15px 0}
    h1.logo{position: relative; left: 0; top: 0;  margin: 0 }
    h1.logo a{background: url("../images/logo-mobile-1.png") no-repeat; height: 80px; width: 120px; background-size: 100%}

    ul.socialList{top: 0; right: 0; left: inherit}

    /*navigation*/
    .navigation{float:none; padding:0; margin-top: -60px}
    .navbar-header{padding-top:0}
    .navbar-toggle{margin-top:0; margin-bottom:0; padding: 9px 0}
    .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus{background:none}
    .navbar-default .navbar-toggle{ border:none}
    .navbar-default .navbar-toggle .icon-bar{background-color:#fff !important}
    .homePage .navbar-default .navbar-toggle .icon-bar{background-color:#fff !important}
    .navbar-default .navbar-toggle:hover .icon-bar, .navbar-default .navbar-toggle:focus .icon-bar{background-color:#fff !important}
    .navbar-collapse{ margin-top:15px; border: none !important; background: #013255; z-index: 99; position: fixed; top: auto; width: 100%; height: 100%; left: 0}

    .navigation ul{padding:20px 0 0; text-align: center}
    .navigation li:nth-child(1){margin-left: 0}
    .navigation li:nth-child(3){margin-left: 0}
    .navigation ul li{float:none; position:relative; margin:0 0 15px; font-size:15px; height:auto; display: block}
    .navigation ul li a{ background:none; color: #fff;}
    .navigation ul li:hover a, .navigation ul li.active a{color: #fff}
    .navigation ul li.donate a{width: 120px; margin: 0 auto}

    /*---content
    ==================*/
    .content{padding: 82px 0 0}
    .contentIn{padding: 15px; min-height: 0; margin-top: -20px}

    /*home banner*/
    .homeBanner li{padding: 20px 0 180px;}
    .homeBanner li{min-height: 500px;}
    .home-slide .container{min-height: 500px;}
    .homeBanner h2{font-size:50px;}
    .homeBanner .learnMore{font-size: 20px;}
    .homeBanner .startCampaignButton{max-width: 200px; margin: 20px auto 0}
    .homeBanner .bottomPart{padding: 20px 0 0;}
    .homeBanner .startCampaignButton{height: 55px}

    .homeItemList .col-sm-4{max-width: 400px; margin: 0 auto 10px; text-align: center}
    .homeItemList .col-sm-4 img{margin: 0 auto 10px}

    .home-slide p{font: 40px/50px "Arial Black", "Helvetica Neue", sans-serif;}

    /*what we do*/
    .whatWeDo .firstRow, .whatWeDo .itemList, .whatWeDo .bottomPart{max-width: 450px; margin: 0 auto 20px; text-align: center}
    .whatWeDo .itemList .item img{width: 100%}
    .whatWeDo .bottomPart p{padding-bottom: 25px;}
    .whatWeDo .itemList h2{font-size: 35px; line-height: 35px}

    .mapArea{margin: 30px 0}
    .mapArea .mapSelector{background-size: 15px 22px; width: 15px; height: 22px; top: 28%}
    .mapArea .maxico{left: 12%}
    .mapArea .cameroon{left: 45%; top: 44%}
    .mapArea .southSudan{left: 51%; top: 46%}
    .mapArea .kashmir{left: 65.5%; top: 31%}

    /*who we are page*/
    .whoWeAre .firstRow{max-width: 450px; margin: 0 auto; text-align: center}
    .whoWeAre .firstRow h2, .whoWeAre .firstRow h4, .commonTop h2{margin-bottom: 10px;}
    .whoWeAre .firstRow .col-sm-4{margin-bottom: 25px;}

    .whoWeAreBanner{height: auto; min-height: 300px; padding-bottom: 50px}
    .whoWeAreBanner h2{padding: 30px 15px 0; font-size: 28px; line-height: normal}

    .whoWeAre .firstRow h2, .commonTop h2{font-size: 18px;}
    .whoWeAre .firstRow h4, .commonTop h4{font-size: 14px;}
    .whoWeAre .firstRow a, .commonTop a{font-size: 16px;}

    h2.title{font-size: 30px; padding-bottom: 20px;}
    .weBelieve{max-width: 450px; margin: 10px auto; text-align: center}
    .weBelieve p{line-height: 18px; padding: 0 0 20px; font-size: 12px;}
    .weBelieve .secondP{padding-bottom: 20px}
    .weBelieve .barLogo{display: none}

    .whoWeAre .itemList{max-width: 450px; margin: 20px auto; text-align: center}
    .whoWeAre .item{height: auto; margin-top: 10px}
    .whoWeAre .item img{margin: 0 auto 15px;}
    .whoWeAre .item h3{font-size: 18px;}

    .wePromise .img{margin: 0 -15px;}
    .waterCouncil{margin-top: 20px;}
    .waterCouncil h2{font-size: 30px;}

    /*whyWeDo page*/
    .whyWeDo{margin-top: 0; text-align: center}
    .whyWeDo .topPart{padding: 0 15px;}
    .whyWeDo .rightCol{padding-right: 0; padding-left: 0}
    .whyWeDo .topPart h2{font-size: 25px;}
    .whyWeDo  h3{font-size: 14px; line-height: 22px;}
    .whyWeDo .topPart h4{font-size: 15px; padding: 12px 0 0 15px; float: none; display: inline-block; position: relative; top: -10px}
    .whyWeDo .topPart i{font-size: 40px; float: none; display: inline-block}
    .whyWeDo .rightCol .col-sm-5{padding-top: 0}
    .whyWeDo .rightCol .row{padding-top: 20px}

    .whyWeDo .bottomPart{padding-top: 30px; margin-top: 30px}
    .whyWeDo .bottomPartIn{padding: 0 40px}

    .equalHeight{height: auto!important;}

    .bImg{margin: 0 -15px -15px;}

    .faqSearch{margin: 0 -15px 20px}

    .topGap{padding-top: 20px!important;}

    .faqList.searchList ul{padding: 0}

    .donateBottom{background-position: 320px 100px}
    .donateBottom .leftCol{padding: 20px;}

    .innerBanner{margin: -15px -15px 20px; padding: 40px 15px 0; height: 180px;}
    .innerBanner h1 {
        font: 32px/40px "Arial Black";}

    .faqBlock, .designCredits{padding-top: 30px;}
    .designCredits{padding-bottom: 30px;}
    .useSite{padding-bottom: 20px;}
    .queConBlock h2, .designCredits h2, .faqBlock h2, .designCredits h2, .useSite h2{margin-bottom: 25px;}

    .homeBanner .bottomPart{bottom: 30px;}

    .whyWeDo .headPart{padding-left: 0px;}

    /*---footer
    ==============*/
    .mainFooter{background: #013255; min-height: 0}
    .mainFooterIn{padding: 15px 15px 0; text-align: center}
    ul.addressList{padding-top: 15px}
    ul.addressList li{float: none; display: inline-block}
    .mainFooter .col-sm-2, .mainFooter .col-sm-4{max-width: 500px; margin: 0 auto 25px;}
    .mainFooter li{font-size: 11px;}


    .modal {
        text-align: center;
        padding: 0!important;
    }

    .modal:before {
        display: none!important;
    }

    .modal-dialog {
        display: block;
        text-align: left;
        vertical-align: top;
    }

    .whatWeDo label {
        font-size: 17px!important;
        width: 35%;
    }

}

@media (max-width: 650px) {
    .donateList li{width: 100%; float: none; max-width: 171px; margin: 0 auto 5px; text-align: center}
    .donateBottom .col-xs-6{float: none; width: 100%;}
    .donateBottom .leftCol{border: 1px solid #000; border-radius: 15px; margin-bottom: 20px;}
    .donateBottom .pull-right{float: none!important; padding: 0 0 15px}
    ul.donateList{padding: 0}

    .homeBanner .startCampaignButton{padding-top: 20px;}
    .homeBanner li{min-height: 400px;}
    .home-slide .container{min-height: 400px;}

    .galleryPopUp img{height: 500px;}
}

@media (max-width: 550px) {
    .mapArea .mapSelector{background-size: 8px 12px; width: 8px; height: 12px; top: 30%}
    .mapArea .maxico{left: 13%}
    .mapArea .cameroon{top: 45%}
    .mapArea .southSudan{top: 47%}
    .mapArea .kashmir{left: 65%; top: 33%}

    .signUpBox{height: auto; padding-bottom: 15px}
    .signUpBox label{float: none!important; width: 100%; text-align: center}
    .signUpBox form{float: none; width: 100%!important;}

    .innerBanner h1 {
        font: 28px/38px "Arial Black";}

    .homeItemList .col-sm-4 img{width: 100%}

    .homeBanner .bx-wrapper:hover .bx-prev{left: 20px!important;}
    .homeBanner .bx-wrapper:hover .bx-next{right: 20px!important;}
    .homeBanner li{min-height: 350px;}
    .home-slide .container{min-height: 350px;}

    .galleryPopUp img{height: 450px;}
}
@media (max-width: 450px) {
    .signUpBox label{font-size: 13px;}

    .homeBanner h2{font-size:30px;}
    .homeBanner .learnMore{font-size: 18px;}

    .mapArea .mapSelector{background-size: 6px 9px; width: 6px; height: 9px; top: 33%}
    .mapArea .maxico{left: 14%}
    .mapArea .cameroon{top: 46%}
    .mapArea .southSudan{top: 48%}
    .mapArea .kashmir{left: 64%; top: 35%;}

    .whoWeAreBanner{padding: 0 0 20px}
    .whoWeAreBanner h2{padding: 20px 15px; font-size: 25px; margin: 0}
    h2.title{font-size: 22px; padding-bottom: 15px;}
    .waterCouncil h2{font-size: 22px;}
    .homeBanner li{min-height: 250px;}
    .home-slide .container{min-height: 250px;}
    .galleryPopUp img{height: 300px;}
}