/*Mobile*/
@media (max-width: 767px) {
    h1 {
        font-size: 25px;
    } 
    
    .navbar-default {
        top: 0;
        text-align: center;
    }
    
    .home-nav {
        padding-top: 30px;
    }
    
    .glyphicon {
        top: 20px;
        left: 20px;
        font-size: 25px;
        color: #fff;
    }
    
    .navbar-toggle {
        float: left;
        padding: 0;
        margin-top: 0px;
        margin-right: 0;
        margin-bottom: 8px;
        background-color: transparent;
        border: none;
        border-radius: 0;
    }
    
    .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
    	background-color: transparent!important;
    	color: #000!important;
    }
    
    .navbar-default .navbar-nav > li.active >a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover {
        background-color: transparent!important;
        color: #000!important;
        border-bottom: 3px solid #000;
        display: inline-block;
        padding-left: 0;
        padding-right: 0;
    }
    
    .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
        background-color: transparent!important;
        color: #fff!important;
    }
    
    .navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
    	color: #000!important;
        background-color: transparent!important;
        border-bottom: 3px solid #fff;
    }
    
    .dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {
    	background-color: #fff!important;
    	color: #000!important;
    }
    
    .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
        color: #000!important;
        text-decoration: none;
        background-color: transparent;
    }
    
    .navbar-nav {
        background-color: #fff;
        box-shadow: 1px 1px 4px grey;
        z-index: 999;
    }
    
    .navbar-collapse.in {
        overflow-y: visible;
    }
    
    .navbar-nav > li {
        float: none;
        display: block;
        padding-left: 0px;
        padding-right: 0px;
    }
    
    .navbar-nav > li.open>a {
        color: #000!important;
    }
    
    .navbar-default .navbar-nav > li > a {
        padding-left: 0px;
        padding-right: 0px;
        padding-bottom: 10px;
        color: #000;
    }

    .header .dropdown-menu>li>a {
        text-align: center;
    }
    
    .logo {
        display: none;
    }
    
     .home-nav .mobi-logo {
        margin-top: 65px;
     }
    
    .mobi-logo {
        display: inline-block;
        float: none;
        width: 45%;
        margin-right: auto;
        margin-left: auto;
        margin-top: 45px;
    }
    
    .mobi-logo img {
        width: 70%;
    }
    
    /*=========================== Home page ===================================*/
    .header.home-page-header {
        padding-top: 10%;
    }
    
    .home-header {
    	height: 400px;
        z-index: 1;
        padding-top: 60px;
    }
    
    .home-header h1 {
        top: 190px;
        font-size: 30px;
    }
    
    .home-header br {
        display: none;
    }
    
    .home-projects {
        padding-top: 0;
    }
    
    .make-a-donation {
    	width: auto;
    	margin-left:15px;
    	margin-right: 15px;
    }
    
    .hover-overlay{
    	opacity: 1!important;
    }
    
    .proj1 .yellow, .proj2 .red, .proj3 .green, .proj4 .blue, .proj5 .purple, .proj6 .darkblue {
    	opacity: 0!important;
    }
    
    .banner-img img {
        width: 30%;
    }
    
    .footer-banner {
    	height: 560px;
    	padding-top: 10%;
    	background-attachment: scroll;
    }
    
    /*@supports (-webkit-overflow-scrolling: touch) {*/
    /*    background-attachment: scroll;*/
    /*}*/
    
    .footer-banner.proj {
    	padding-top: 11%;
    }
    
    .footer-banner h3 {
    	color: #fff;
    	font-size: 30px;
    	font-weight: 300;
    }

    /*============== Events pages ============*/

    .events h2 {
        padding-top: 40px;
        padding-bottom: 0;
    }

    .events .col-md-3 {
        padding: 0px;
        margin: 20px;
        width: auto;
    }

    .events .col-md-3 .image-wrapper {
        margin-top: 80px;
    }

    .events .col-md-3:first-child .image-wrapper {
        margin-top: 0px;
    }

    .mobile-btn {
        text-align: center;
        display: block;
    }

    .media.outer {
        padding: 20px;
    }

    .individual-event-page .media.outer .media-left {
        padding-right: 0;
        margin-bottom: 20px;
    }

    .events .image-wrapper h3 {
        font-size: 20px;
    }

    .static-img-overlay {
        padding-top: 25%;
    }

    .media-body, .media-left, .media-right {
		display: block;
		vertical-align: top;
		width: 100%;
	}

    .static-img-overlay .organisation {
        font-size: 15px!important;
        margin-bottom: 5%!important;
    }

    .events .image-wrapper h3 {
        font-size: 20px;
    }

    .static-img-overlay, .img-overlay {
        padding-top: 25%;
    }

    /*======================== Blog pages ==================================*/
    .blog-body .nav>li>a {
        padding: 10px 0px 10px 0;
        margin-right: 15px!important;
    }

    .blog-body .tab-content .col-md-3 {
        padding: 15px;
    }
    
    /*=========================== Our story ==================================*/
    
    .other-header {
    	height: 200px;
    	padding-top: 0px;
    }
    
    .our-story {
        padding-top: 20px;
        padding-bottom: 20px;
    }
    
    .vision p {
        font-size: 17px;
        text-align: center;
    }
    
    .vision {
        height: 300px;
        padding-top: 0;
    }
    
    .vision br {
        display: none;
    }
    
    /*.mission-values .col-md-6 {*/
    /*    width: 50%;*/
    /*    float: left;*/
    /*    margin-right: auto;*/
    /*    margin-left: auto;*/
    /*}*/
    
    .mission-values {
        padding: 0px;
    }
    
    .mission-values-text {
        padding: 0;
        text-align: center;
    }
    
    .mission-values h2 {
        margin-top: 20px;
    }
    
    .mission-values h2:after {
        width: 60px;
        left: 40%;
    }
    
    .mission-values p, .mission-values li {
        color: #fff;
        line-height: 25px;
    }
    
    .border-right {
        border-right: 0;
    }
    
    .border-right p {
        margin-bottom: 0px;
    }
    
    .directors h2::after {
        width: 70px;
        top: 100%;
        left: 38%;
    }
    
    .directors p {
        margin-bottom: 20px;
    }
    
    /*============================ ftc page ==================================*/
    
    .project-intro img {
        margin-bottom: 20px;
    }
    
    .facebook {
        padding: 0px 20px 20px 20px;
    }
    
    .facebook .col-md-9 {
        padding-right: 0;
    }
    
    .project-intro {
        padding-bottom: 30px;
    }
    
    .footer-banner.proj {
        height: 200px;
    }

    .footer-banner.proj.education {
        padding-top: 10%;
        height: 280px;
    }
    
    .footer-banner.proj.long {
        height: 350px;
    }
    
    /*=========================== Donations page =============================*/
    
    .donate .col-md-4 {
        padding-top: 20px;
    	padding-left: 15px!important;
    }
    
    .donate .col-md-7, .donate .col-md-5 {
        /*width: 50%;*/
        /*float: left;*/
        margin-right: auto;
        margin-left: auto;
    }
    
    .banking-details-div {
        display: none;
    }
    
    .mobi-only-bank-details {
        padding-bottom: 20px;
        display: block;
    }
    
    .mobi-only-bank-details .col-md-6 {
        width: 50%;
        float: left;
        margin-right: auto;
        margin-left: auto;
    }
    

    /*============================= Footer ===================================*/
    
    .footer h2::after {
        left: 40%;
    }
    
    .border {
        margin-left: 40%;
    }
}

/*Tablet & small screens:*/
@media (min-width: 768px) and (max-width: 991px) {
    .navbar-nav>li {
        padding-left: 15px;
        padding-right: 15px;
    }

    h2 {
        font-size: 25px;
    }
    
    .navbar-default {
        top: 40px;
    }
    
    .navbar-default.home-nav {
        top: 0px;
    }
    
    .home-header {
        height: 400px;
    }
    
    .home-header h1 {
        top:280px;
    }
    
    .home-nav{
        padding-top: 30px;
    }
    
    .home-intro h2 br {
        display: none;
    }
    
    .proj1 .yellow, .proj2 .red, .proj3 .green, .proj4 .blue, .proj5 .purple, .proj6 .darkblue {
    	opacity: 0!important;
    }
    
    .hover-overlay{
    	opacity: 1!important;
    }
    
    .home-projects .col-md-4 {
        width: 50%;
        float: left;
    }
    
    .make-a-donation {
        height: 350px;
        max-width: 340px;
        margin-left: 20px;
        margin-right: 0px;
    }
    
    .banner-img img {
        width: 20%;
    }
    
    .footer-banner {
        height: 500px;
    }
    
    /*====================== Other pages =======================================*/
    
    .other-header {
        height: 300px;
        text-align: center;
        padding-top: 0px;
    }
    
    .vision br {
        display: none;
    }
    
    .vision {
        height: 400px;
    }
    
    .mission-values h2::after, .directors h2::after, .footer h2::after {
        width: 80px;
        left: 45%;
    }
    
    .border-right {
        border-right: 0;
    }
    
    .directors p {
        margin-bottom: 20px;
    }
    
    .donate .col-md-4 {
        padding-left: 10px;
        margin-top: 20px;
    }
    
    .donate .col-md-7, .donate .col-md-5 {
        width: 50%;
        float: left;
        margin-right: auto;
        margin-left: auto;
    }

    /*==================== Events pages =====================================*/

    .events .col-md-3 {
        padding: 0px;
        margin: 5px;
        width: 48.6%;
        float: left;
    }

    .media.outer .media-left {
        display: inline-block;
        float: left;
        padding-right: 20px;
        width: 50%;
    }

    .media.inner .media-left {
        width:auto;
    }

    .organisation {
        font-size: 15px;
        margin-bottom: 5%;
    }

    /*======================= Blog pages ======================================*/
    .blog-body .nav>li>a {
        padding: 30px 0 10px 0;
        margin-right: 35px!important;
        text-align: center;
    }
    
    /*===================== Project pages =====================================*/
    
    .project-intro img {
        width: 40%;                    
        margin-bottom: 20px;
    }
    
    .facebook .col-md-9 {
        width: 70%;
        float: left;
        margin-right: auto;
        margin-left: auto;
    }
    
    .facebook .col-md-3 {
        width: 30%;
        float: left;
        margin-right: auto;
        margin-left: auto;
    }
    
    .facebook h3 {
        margin-left: 20px;
    }
    
    .facebook .btn-primary {
        float: none;
    }
    
    .footer-banner.proj {
        height: 300px;
    }
    
    .footer-banner.proj.long {
        padding-top: 5%!important;
        height: 250px;
    }

    .footer-banner.proj.education {
        padding-top: 10%;
        height: 350px;
    }
    
    /*============================== Footer ====================================*/
    
    .border {
        width: 70px;
        margin-left: 45%;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .navbar-default img {
        width: 15%;
        margin-bottom: 20px;
    }

    .navbar-default {
        top: 40px;
    }

    .make-a-donation {
        background-color: #252526;
        padding: 20px 30px;
        width: 300px;
        max-width: 350px;
        height: 295px;
        max-height: 360px;
        margin-left: 15px;
    }
    
    .footer-banner {
        height: 450px;
    }
    
    .footer-banner.proj.long {
        padding-top: 10%;
    }
    
    .donate .col-md-4 {
        padding-left: 40px;
    }
    
    .make-a-donation h4 {
    	margin-bottom: 15px;
    	font-size: 30px;
    }
    
    .make-a-donation h4:after {
        left: 30%;
    }
    
    .make-a-donation .btn-primary {
        margin-top: 10px;
    }
    
    .mission-values {
        padding: 60px 20px;
    }

    .other-header {
        height: 300px;
        padding-top: 0px;
    }

    .events .col-md-3 {
        padding: 0px;
        margin: 5px;
        width: 32%;
    }

    .events .image-wrapper {
        min-height: 200px;
        height: 250px;
        max-height: 260px;
    }

    .static-img-overlay, .img-overlay {
        padding-top: 25%;
    }

    .events .image-wrapper h3 {
        font-size: 20px;
    }
}

/*Laptop:*/
@media (min-width: 1199px) and (max-width: 1600px) {
    .mission-values {
        padding: 60px 20px;
    }

    .footer-banner {
        height: 450px;
        padding-top: 10%;
    }

    .home-header h1 {
        margin-top: 5%;
    }

    .img-overlay {
        padding-top: 30%;
    }
}