@charset "utf-8";
/* CSS Document */

@media (max-width: 1200px) {
    body{font-size:16px;}
    h1{font-weight: 900; font-size: 26px}
    h2{font-weight: 700; font-size: 22px}
    h3{font-weight: 500; font-size: 22px}
    h6{font-size: 16px}

    blockquote{font-size: 16px}

    /*---header
    ================*/
    /*---navigation
    ============================*/
    .navigation{padding:65px 0 0}
    .navigation ul li{font-size:15px; margin-left: 25px;}
    /*sub menu*/
    .navigation ul ul{top: 38px}
    .navigation ul ul li{font-size: 15px;}
    .navigation ul ul li a{padding: 6px 12px;}

    /*donor*/
    .donor-list{padding-left: 300px}
    .donor-list .box{width: 280px;}

    /*home page*/
    /*.home-row-1 .home-rowIn{height: 800px;}
    .home-row-1 .overLap{height: 1200px;}
    .home-row-1 .overLap{right: -30%;}
    .homeBanner{position: absolute; bottom: -12%; right: -10%}
    .home-row-1 .rightCol h1{padding-top: 22%}*/
    .home-row-4 li{font-size: 28px; margin-bottom: 25px}
    .home-row-5 .col-1 a{font-size: 18px}
    .home-row-5 h4{font-size: 17px; line-height: 25px}
    .right-row h4{font-size: 16px;}
    .right-row .col-md-3 h4{font-size: 12px}
    .home-row-7 .col a{font-size: 14px;}
    .home-row-7 .col{padding: 28% 10px}

    /*item list*/
    .itemList .box{height: 220px;}
    .itemList h2{font-size:16px; padding-bottom: 10px}
    .itemList p{font-size: 13px; line-height: 16px;}
    .itemList span.readMore{font-size: 15px}


    .listingRow .date-box p{font-size: 14px;}
    .listingRow .date-box h4{font-size: 18px;}
    .listingRow .date-box h5{font-size: 20px}


    /*---footer
    ================*/
    .mainFooter{font-size: 15px}
    .mainFooter h4{font-size: 15px}
    ul.socialList li{font-size: 35px; margin-right: 10px}
}
/*992 screen size*/
@media (max-width: 992px) {
    body{font-size:14px;}
    p{padding-bottom: 20px;}
    h1, h2, h3, h4, h5{padding: 0 0 20px;}
    h1{font-weight: 900; font-size: 22px}
    h2{font-weight: 700; font-size: 20px}
    h3{font-weight: 500; font-size: 20px}
    h6{font-size: 14px}
    input, select, textarea{font-size: 14px}
    blockquote{font-size: 14px}

    /*repeated classes*/
    .button{min-width: 110px; height: 32px; font-size: 14px}

    /*---header
    ================*/
    .mainHeader{height:88px}
    .mainHeader form{height: 32px;}
    .mainHeader form input[type='submit']{top: 6px;}

    /*logo*/
    h1.logo a{background-size: 220px 73px; width: 220px; height: 73px;}

    /*---navigation
    ============================*/
    .navigation{padding:55px 0 0}
    .navigation ul li{font-size:12px; margin-left: 10px;}
    /*sub menu*/
    .navigation ul ul{top: 30px}
    .navigation ul ul li{font-size: 12px;}

    /*---content
    ==================*/
    .content{padding: 88px 0 400px}
    .contentInner{padding: 30px 0 30px 20px;}
    .contentGraphic{background-size: 300px 585px; min-height: 585px}


    /*donor*/
    .donor-list{padding-left: 200px}
    .donor-list .box{width: 180px; padding: 20px; font-size: 12px}
    .donor-list .box .button{padding: 10px 10px 10px 30px; height: 40px}

    .donor-list{padding-top: 30px;}
    .donor-list ul{margin: 0 -20px; padding: 0; list-style: none}
    .donor-list ul li{padding: 0 20px; float: left; width: 25%}
    .donor-list ul li img{display: block; margin-bottom: 10px}
    .donor-list p{font-size: 14px; color: #6d6e71;}
    .donor-list h6{font-size: 15px; padding-bottom: 8px; margin: 0}

    /*home page*/
    .home-rowIn{position: relative; padding-left: 200px}
    .home-rowIn .sidebar{width:200px; padding: 20px;}
    .home-rowIn .rightCol{padding-left: 20px}

    .sideMenu{padding-bottom: 100px;}
    .sideMenu li{font-size: 14px; margin-top: 5px}
    .home-row-1 .home-rowIn{height: 650px;}
    .homeBanner{position: absolute; bottom: -20%;}
    .home-row-1 .rightCol h1{padding-top: 50px; font-size: 22px}
    .home-row-4 li{font-size: 22px; margin-bottom: 10px}
    .home-row-4 .button{display: block; width: 250px; font-size: 20px; margin-left: -20px}

    .home-row-5 .col-1 a{font-size: 12px}
    .home-row-5 h4{font-size: 14px; line-height: 22px}
    .home-row-5 .rightCol{min-height: 0}
    .right-row h4{font-size: 12px;}
    .right-row .col-md-3 h4{font-size: 12px}
    .home-row-7 .col a{font-size: 14px;}
    .home-row-7 .col{padding: 28% 10px}

    .home-row-7 .col a:after{margin-left: 2px; margin-top: 4px}

    .sidebar h2{font-size: 18px;}
    .home-rowIn .sidebar .button{margin-left: -20px; font-size: 18px; padding: 8px 10px}
    .home-rowIn .sidebar .button:after{margin: 5px 0 0 10px;}
    .home-rowIn .sidebar .searchForm{margin-left: -20px}
    .home-rowIn .sidebar ul.socialList li{font-size: 28px}

    .home-rowIn .sidebar-blank{padding: 0 }

    .home-row-5 .home-rowIn{min-height: 500px;}
    .home-row-3 h1{font-size: 20px; line-height: 25px}

    .sidebar p{line-height: 15px; font-size: 12px; padding-bottom: 10px}

    /*---footer
    ================*/
    .mainFooter{font-size: 13px}
    .mainFooter h4{font-size: 13px}
    ul.socialList li{font-size: 30px; margin-right: 5px}
}


/*768 screen size*/
@media (max-width: 767px) {
    p{padding-bottom: 15px;}
    h1, h2, h3, h4, h5{padding: 0 0 15px;}
    hr{border-color: #a0a2a5; margin-top: 5px; margin-bottom: 20px;}
    /*navigation*/
    .navigation{float:none; padding:42px 0 0}
    .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:#000 !important}
    .homePage .navbar-default .navbar-toggle .icon-bar{background-color:#000 !important}
    .navbar-default .navbar-toggle:hover .icon-bar, .navbar-default .navbar-toggle:focus .icon-bar{background-color:#4f5152 !important}
    .homePage .navbar-default .navbar-toggle:hover .icon-bar, .homePage .navbar-default .navbar-toggle:focus .icon-bar{background-color:#000 !important}
    .navbar-collapse{ margin-top:0px; border: none !important; background: #29aae2; z-index: 99; position: relative; height: 450px}

    .navigation ul{padding:10px 0 10px;}
    .navigation ul li{float:none; position:relative; margin:0 0 12px; font-size:16px; height:auto; display: block}
    .navigation ul li a{ background:none; color: #fff;}
    .navigation ul li:hover a, .navigation ul li.active a{color: #fff}

    /*sub menu*/
    .navigation ul ul{position: relative; top: 0; left: 0; background: none; width: auto; -webkit-box-shadow: inset 0 0 0 rgba(0,0,0,0.17);
        -moz-box-shadow: inset 0 0 0 rgba(0,0,0,0.17);
        box-shadow: inset 0 0 0 rgba(0,0,0,0.17);
        display: block;
        padding-bottom: 5px;
    }
    .navigation ul ul li{display: block; font-size: 16px; border: none; margin: 0; text-transform: capitalize; height: auto}
    .navigation ul ul li a:hover{background: none; color: #fff}

    /*---content
    ==================*/
    .content{padding: 88px 0 400px}
    .contentIn{background:none; min-height: 0;}
    .contentInner{background: #fff; padding: 20px 0 0}

    .donor-list ul{margin: 0 -15px;}
    .donor-list ul li{padding: 0 15px;}
    .donor-list h6{font-size: 13px;}

    /*sidebar*/
    .sidebar{position: relative; min-height: 100px; max-width: 400px; width: auto; margin: 0 auto; margin-top: 20px;; left: 0}

    /*home page*/
    .homePage .mainHeader{opacity: 1;}
    .homePage .content{padding-top: 48px !important;}

    .mobileLayout h2, .home-row-3 h1{font-size: 25px; padding: 20px 0 20px; line-height: 25px}

    .home-row-2{height: auto; padding-bottom: 30px; padding-top: 70px}
    .home-row-2 ul{list-style: none; margin: 0; padding: 0}
    .slideArea-mobile{padding: 0 25px}
    .home-row- .home-row-2 h3{color: #231f20; font-size: 22px; margin: 0; padding: 0 0 3px}
    .home-row-2 h4{padding-bottom: 5px}

    .home-row-3{padding-bottom: 20px}

    .home-row-4 li{font-size: 20px; margin-bottom: 0}
    .home-row-4 .button{max-width: 300px; font-size: 16px; margin-top: 10px;}
    .home-row-4 .button:after{margin-top: 4px;}

    .home-row-5, .home-row-6,  .home-row-7{color: #fff}
    .home-row-5 h2, .home-row-6 h2, .home-row-7 h2{color: #fff}

    .home-row-5 h4{font-size: 15px; line-height: 18px; padding: 10px 0 20px}
    .home-row-5 .col-1{padding-top: 20px}
    .home-row-5 .col-1 a{font-size: 16px;}

    .home-row-6{color: #fff}
    .bordercol{border: none; padding: 0}

    .home-row-7 .rightCol{margin: 0 -15px; padding-top: 15px !important;}
    .home-row-7 .col{padding: 20% 15px; min-height: 0}
    .home-row-7 .col-1{padding-left:15px; width: 25%}
    .home-row-7 .col-4, .home-row-7 .col-3{width: 25%}
    .home-row-7 .col a{font-size: 16px}


    .listingRow li{padding-bottom: 20px; margin-bottom: 20px}
    .listingRow h2{padding-top: 15px; font-size: 16px}

    /*---footer
   ================*/
    .mainFooter{font-size: 12px}
    .mainFooter h4{font-size: 11px}

}

@media (max-width: 668px) {
    body{font-size:13px;}
    p{padding-bottom: 15px;}
    h1, h2, h3, h4, h5{padding: 0 0 15px;}
    h1{font-weight: 900; font-size: 20px}
    h2{font-weight: 700; font-size: 18px}
    h3{font-weight: 500; font-size: 18px}
    h6{font-size: 13px}
    blockquote{font-size: 13px}

    /*repeated classes*/
    .button{min-width: 100px; height: 26px; font-size: 12px; padding: 5px 5px 5px 10px;}
    .button:after{margin: 2px 2px 20px 8px}

    /*---header
    ================*/
    .mainHeader{height:60px;}
    .mainHeader .searchForm{display: none}
    /*logo*/
    h1.logo a{background-size: 135px 45px; width: 135px; height: 45px;}

    /*navigation*/
    .navigation{float:none; padding:26px 0 0}
    .navigation ul li{margin:0 0 10px; font-size:15px;}
    .navigation ul ul li{font-size: 15px;}

    /*---content
    ==================*/
    .content{padding: 60px 0 0}
    .content .button{margin: 0 15px 15px 0;}


    /*donor*/
    .donor-list{padding-left: 100px}
    .donor-list .box{width: 100px; padding: 20px 5px; font-size: 12px; left: -15px}
    .donor-list .box .button{padding: 8px 3px 8px 3px; height: 30px; font-size: 11px; width: 100%}
    .donor-list .box .button:after{margin-left: 5px}

    .donor-list{margin-top: 0;}
    .donor-list ul{margin: 0;}
    .donor-list ul li{padding: 0; float: none; width: 100%; text-align: center; margin-top: 20px}
    .donor-list ul li img{margin: 0 auto; margin-bottom: 5px}

    .donor-list h6{font-size: 15px;}

    /*home page*/
    .mobileLayout h2, .home-row-3 h1{font-size: 20px; padding: 20px 0 15px; line-height: 25px}
    .home-row-7 .rightCol{padding-top: 0}
    .home-row-7 .col{padding: 15px; width: 100%}
    .right-row h4{font-size: 17px}

    .home-row-5 .col-sm-4{display: none}

    .home-row-4 .button{display: none}


    /*item list*/
    .itemList .col-xs-6{width: 100%; float: none}
    .itemList .box{max-width: 320px; margin: 0 auto; margin-bottom: 20px; height: 215px;}

    .itemList .box:hover .overLay{top: 80%;}
    .itemList h2{font-size:17px; padding-bottom: 10px}
    .itemList p{font-size: 13px; line-height: 16px;}
    .itemList span.readMore{font-size: 15px}
    .impactList .box:hover .overLay{background: rgba(255,255,255,0.9); top: 105%}
    .impactList .box:hover h1{display: block}


    .listRow ul{margin: 0 -5px;}
    .listRow li{width: 140px; padding: 0 5px;}
    .modal-body img{margin-right: 10px}
    .modal-body h2{font-size: 17px; padding: 5px 0}
    .modal-body h3{font-size: 13px;}
    .modal-body small{font-size: 12px;}
    .modal-body p{font-size: 13px;}

    /*---footer
    ================*/
    .mainFooter{height:auto; width:100%; position:relative; font-size: 14px; text-align: center}
    .mainFooter .row{margin: 0}
    .mainFooter h4{font-size: 16px}
    .mainFooter .col-1{width: 100%; float: none; padding-left: 0}
    .mainFooter .col-3{width: 100%; float: none; border: none;}

    .mainFooter p{padding-bottom: 15px}

    .mainFooter .col-1{display: none}

    .homePage .content {
        padding-top:13px !important;
    }
}