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


/************************************************************** viewport >1401 **************************************************************/
@media only screen and (min-width: 1400px) {
.wrapper {width:1380px; margin:0 auto;}
.container {width:100%;}
    
.bg-nav {background: transparent}
#donate img {width:500px; height: auto; margin-right:-100px}    
#donate .donateSec {width:400px; margin-left:-100px; }
#donate .donateSec {padding:50px 80px;}


}




/************************************************************** viewport 1301 to 1399 **************************************************************/
@media only screen and (min-width: 1301px) and (max-width:1399px) {
.wrapper {width:1280px; margin:0 auto; }
.container {width:100%;}

.bg-nav {background: transparent}
#donate img {width:500px; height: auto; margin-right:-100px}    
#donate .donateSec {width:400px; margin-left:-100px; }
#donate .donateSec {padding:50px 80px;}

}




/************************************************************** viewport 1201 to 1300 **************************************************************/
@media only screen and (min-width: 1201px) and (max-width:1300px) {
.wrapper {width:1180px; margin:0 auto; }
.container {width:100%;}

.bg-nav {background: transparent}
#donate img {width:500px; height: auto; margin-right:-100px}    
#donate .donateSec {width:400px; margin-left:-100px; }
#donate .donateSec {padding:50px 80px;}

}



/************************************************************** viewport 980 to 1200 **************************************************************/
@media only screen and (min-width: 980px) and (max-width:1200px) {
.wrapper {width:960px; margin:0 auto;}
.container {width:100%}

.bg-nav {background: transparent}
#donate img {width:500px; height: auto; margin-right:-100px}    
#donate .donateSec {width:400px; margin-left:-100px; }
#donate .donateSec {padding:50px 80px;}
    
#carousel-quote .splide__slide {height:200px;}
#carousel-quote .quote {height: 190px;}
    

}



/************************************************************** viewport 980 to 992 - ac **************************************************************/
@media only screen and (min-width: 980px) and (max-width:992px) {

.bg-nav {background-color:#eee!important}
#homeBanner .bgShape {width: 100%; height: auto}
#homeBanner h1.txt-banner {text-align: left; width:690px; margin:0 auto}
    
.imgResizeMD {width:70%;}
.imgResizeSM {width:60%;}
.imgResizeXS {width:50%;}
    
#carousel-quote .splide__slide {height:200px;}
#carousel-quote .quote {height: 190px;}

    
footer .btn {width: 80%!important}
    
}



/************************************************************** viewport 941 to 979 **************************************************************/
@media only screen and (min-width: 941px) and (max-width: 979px) {
.wrapper {width:100%;}
.container {width:100%}
.bg-home {-webkit-background-size: cover!important; -moz-background-size: cover!important; -o-background-size: cover!important; background-size: cover!important;}

#homeBanner .bgShape {width: 100%; height: auto}
#homeBanner h1.txt-banner {text-align: left; width:690px; margin:0 auto}
#donate img {width:450px; height: auto; margin-right:-60px}    
#donate .donateSec {width:400px; margin-left:-60px; }
#donate .donateSec {padding:50px 80px;}
    
.imgResizeMD {width:70%;}
.imgResizeSM {width:60%;}
.imgResizeXS {width:50%;}
    
footer .btn {width: 80%!important}
    
#carousel-quote .splide__slide {height:200px;}
#carousel-quote .quote {height: 190px;}
	
}



/************************************************************** viewport 768 to 940 **************************************************************/
@media only screen and (min-width: 768px) and (max-width: 940px) {
.wrapper {width:100%;}
.container {width:100%}
.bg-home {-webkit-background-size: cover!important; -moz-background-size: cover!important; -o-background-size: cover!important; background-size: cover!important;}
#homeBanner .bgShape {width: 100%; height: auto}
#homeBanner h1.txt-banner {text-align: left; width:690px; margin:0 auto}
#donate img {width:430px; height: auto; margin-right:-70px}    
#donate .donateSec {width:380px; margin-left:-70px; }
#donate .donateSec {padding:50px 80px;}
    
.imgResizeMD {width:70%;}
.imgResizeSM {width:60%;}
.imgResizeXS {width:50%;}
    
footer .btn {width: 80%!important}
    
#carousel-quote .splide__slide {height:200px;}
#carousel-quote .quote {height: 190px;}


}
	
	

/************************************************************** viewport 480 to 767 **************************************************************/
@media only screen and (min-width: 480px) and (max-width: 767px) {
.wrapper {width:100%;}
.xs-padding {margin-top:10px}
.logo {width:140px; height: auto}
.bg-home {-webkit-background-size: cover!important; -moz-background-size: cover!important; -o-background-size: cover!important; background-size: cover!important;}
#homeBanner .bgShape {width: 150%; height: auto}	
#homeBanner h1.txt-banner {text-align: left; width:80%; margin:0 auto}
#donate img {width:360px; height: auto;}    
#donate .donateSec {width:300px; margin:0 auto; margin-top:-100px; padding:80px 50px 50px 50px}

.timeline-with-icons {width:95%; margin:0 auto}
    
#carousel-quote .splide__slide {height:260px;}
#carousel-quote .quote {width:450px; height: 250px;}
}



/************************************************************** viewport 321 to 479 **************************************************************/
@media only screen and (min-width: 321px) and (max-width: 479px) {
.wrapper {width:100%;}
.xs-padding {margin-top:10px}

.logo {width:130px; height: auto}
#homeBanner .bgShape {width: 200%; height: auto}	
#donate img {width:100%; height: auto;}    
#donate .donateSec {width:100%; margin:0 auto; margin-top:-100px; padding:80px 50px 50px 50px}
    
#carousel-quote .splide__slide {height:370px;}
#carousel-quote .quote {width:300px; height: 360px;}
#donation .img-contribute {width:100%}

.timeline-with-icons {width:95%; margin:0 auto}
footer .btn {width:100%}
}


/************************************************************** viewport <320 **************************************************************/

@media only screen and (max-width: 320px) {
.wrapper {width:100%}
.xs-padding {margin-top:10px}
.logo {width:130px; height: auto}
.bg-home {-webkit-background-size: cover!important; -moz-background-size: cover!important; -o-background-size: cover!important; background-size: cover!important;}
#homeBanner .bgShape {width: 200%; height: auto}	
#donate img {width:100%; height: auto;}    
#donate .donateSec {width:100%; margin:0 auto; margin-top:-100px; padding:80px 50px 50px 50px}
	
#carousel-quote .splide__slide {height:370px;}
#carousel-quote .quote {width:300px; height: 360px;}
#donation .img-contribute {width:100%}
    
.timeline-with-icons {width:95%; margin:0 auto}
footer .btn {width:100%}
}