/*----------------------------RESPONSIVE STYLES------------------------------- */

/* ---------- MAX 1024PX ---------- */
@media screen and (max-width: 1024px) {	
    .plr {padding-left: 15px; padding-right: 15px; }
    .h-420 { height: 480px; }
    .aboutus-bottom { margin-top: -40px; }
    #subNav .navbar-brand img { width: 300px; }
    #subNav .navbar-nav .nav-link { font-size: 12px; }

    
}

/* ---------- MAX 1000PX ---------- */	
@media screen and (max-width: 1000px) {


    
}	
	
/* ---------- MAX 991PX ---------- */
@media only screen and (max-width: 991px) {
    
    #mainNav { position: relative; background: var(--white); }
    #mainNav .navbar-brand img { width: 300px; }
    #mainNav .navbar-nav .nav-link { color: var(--heading); }
    .slider-text { top: 25%; }
    .slider-text h5 { font-size: 16px; line-height: 26px; margin-bottom: 10px; }
    .slider-text h2 { font-size: 28px; line-height: 38px; margin-bottom: 20px; }
    .slider-text .btn-1 { padding: 7px 20px; font-size: 14px; line-height: 14px; }
    .slider-text .btn-2 { padding: 7px 20px; font-size: 14px; line-height: 14px; }
    .carousel-indicators { display: none; }
    #subNav .navbar-brand img { width: 300px; }
    .aboutus-bottom { margin-top: 0; }
    .aboutus-bottom img {margin-bottom: 30px; }
    .ctoa .btn-1 {margin-bottom: 10px;}
    .plr { padding-left: 60px; padding-right: 60px; }
    .h-420 { height: auto; }
    .text-box-3 { margin-bottom: 30px; }
    .title-style-3 h2 { font-size: 32px; line-height: 42px; }
    
    .single-campaign .sc-img { margin-bottom: 35px; }
    .single-campaign .sc-content h1 { margin-bottom: 30px; }
    .donation { margin-top: 50px;}
    .ctoa-btn { margin-bottom: 10px;}
    .sc-tab { margin-bottom: 60px;}
    .page-title h1 { font-size: 36px; line-height: 48px; }

}

/* ---------- MAX 800PX ---------- */
@media only screen and (max-width: 800px) {
    
    #mainNav { position: relative; background: var(--white); }
    #mainNav .navbar-brand img { width: 300px; }
    #mainNav .navbar-nav .nav-link { color: var(--heading); }
    .slider-text { top: 25%; }
    .slider-text h5 { font-size: 16px; line-height: 26px; margin-bottom: 10px; }
    .slider-text h2 { font-size: 28px; line-height: 38px; margin-bottom: 20px; }
    .slider-text .btn-1 { padding: 7px 20px; font-size: 14px; line-height: 14px; }
    .slider-text .btn-2 { padding: 7px 20px; font-size: 14px; line-height: 14px; }
    .carousel-indicators { display: none; }
    #subNav .navbar-brand img { width: 300px; }
    .aboutus-bottom { margin-top: 0; }
    .aboutus-bottom img {margin-bottom: 30px; }
    .ctoa .btn-1 {margin-bottom: 10px;}
    .plr { padding-left: 60px; padding-right: 60px; }
    .h-420 { height: auto; }
    .text-box-3 { margin-bottom: 30px; }
    .title-style-3 h2 { font-size: 32px; line-height: 42px; }
    
    .single-campaign .sc-img { margin-bottom: 35px; }
    .single-campaign .sc-content h1 { margin-bottom: 30px; }
    .donation { margin-top: 50px;}
    .ctoa-btn { margin-bottom: 10px;}
    .sc-tab { margin-bottom: 60px;}
    .page-title h1 { font-size: 36px; line-height: 48px; }

}

/* ---------- MAX 768PX | 767PX ---------- */
@media only screen and (max-width: 768px) {
    
    #mainNav { position: relative; background: var(--white); }
    #mainNav .navbar-brand img { width: 300px; }
    #mainNav .navbar-nav .nav-link { color: var(--heading); }
    .slider-text { top: 25%; }
    .slider-text h5 { font-size: 16px; line-height: 26px; margin-bottom: 10px; }
    .slider-text h2 { font-size: 28px; line-height: 38px; margin-bottom: 20px; }
    .slider-text .btn-1 { padding: 7px 20px; font-size: 14px; line-height: 14px; }
    .slider-text .btn-2 { padding: 7px 20px; font-size: 14px; line-height: 14px; }
    .carousel-indicators { display: none; }
    #subNav .navbar-brand img { width: 300px; }
    .aboutus-bottom { margin-top: 0; }
    .aboutus-bottom img {margin-bottom: 30px; }
    .ctoa .btn-1 {margin-bottom: 10px;}
    .plr { padding-left: 60px; padding-right: 60px; }
    .h-420 { height: auto; }
    .text-box-3 { margin-bottom: 30px; }
    .title-style-3 h2 { font-size: 32px; line-height: 42px; }
    
    .single-campaign .sc-img { margin-bottom: 35px; }
    .single-campaign .sc-content h1 { margin-bottom: 30px; }
    .donation { margin-top: 50px;}
    .ctoa-btn { margin-bottom: 10px;}
    .sc-tab { margin-bottom: 60px;}
    .page-title h1 { font-size: 36px; line-height: 48px; }

 
}

@media only screen and (max-width: 767px) {
    .bright, .bleft, .btop, .bbottom { border: none; }
    .mborder { position: relative; }
    .mborder:after { content: ""; background: var(--one); width: 60%; height: 2px; position: absolute; bottom: 0; left: 20%; right: 20%; }
    
    .single-campaign .sc-img { margin-bottom: 35px; }
    .single-campaign .sc-content h1 { margin-bottom: 30px; }
    .donation { margin-top: 50px;}
    .ctoa-btn { margin-bottom: 10px;}
    .sc-tab { margin-bottom: 60px;}
    .page-title h1 { font-size: 36px; line-height: 48px; }
}

/* ---------- MAX 640PX ---------- */
@media screen and (max-width: 640px) {
    
    #mainNav { position: relative; background: var(--white); }
    #mainNav .navbar-brand img { width: 250px; }
    #mainNav .navbar-nav .nav-link { color: var(--heading); }
    .slider-text { top: 25%; }
    .slider-text h5 { font-size: 16px; line-height: 26px; margin-bottom: 10px; }
    .slider-text h2 { font-size: 28px; line-height: 38px; margin-bottom: 20px; }
    .slider-text .btn-1 { padding: 7px 20px; font-size: 14px; line-height: 14px; }
    .slider-text .btn-2 { padding: 7px 20px; font-size: 14px; line-height: 14px; }
    .carousel-indicators { display: none; }
    .bright, .bleft, .btop, .bbottom { border: none; }
    .mborder { position: relative; }
    .mborder:after { content: ""; background: var(--one); width: 60%; height: 2px; position: absolute; bottom: 0; left: 20%; right: 20%; }
    #subNav .navbar-brand img { width: 250px; }
    .aboutus-bottom { margin-top: 0; }
    .aboutus-bottom img {margin-bottom: 30px; }
    .ctoa .btn-1 {margin-bottom: 10px;}
    .plr { padding-left: 60px; padding-right: 60px; }
    .h-420 { height: auto; }
    .text-box-3 { margin-bottom: 30px; }
    .title-style-3 h2 { font-size: 32px; line-height: 42px; }
    .vform { padding: 20px; }
    .btn-3 { padding: 7px 70px;}
    
    .single-campaign .sc-img { margin-bottom: 35px; }
    .single-campaign .sc-content h1 { margin-bottom: 30px; }
    .donation { margin-top: 50px;}
    .ctoa-btn { margin-bottom: 10px;}
    .sc-tab { margin-bottom: 60px;}
        .donate-now { padding: 20px;}
    .page-title h1 { font-size: 36px; line-height: 48px; }
} 

/* ---------- MAX 480PX ---------- */
@media screen and (max-width: 480px) {
    
    #mainNav { position: relative; background: var(--white); }
    #mainNav .navbar-brand img { width: 160px; }
    #mainNav .navbar-nav .nav-link { color: var(--heading); }
    .slider-text { top: 15%; }
    .slider-text h5 { font-size: 12px; line-height: 22px; margin-bottom: 5px; }
    .slider-text h2 { font-size: 22px; line-height: 32px; margin-bottom: 10px; }
    .slider-text .btn-1 { padding: 5px 15px; font-size: 10px; line-height: 12px; }
    .slider-text .btn-2 { padding: 5px 15px; font-size: 10px; line-height: 12px; }
    .carousel-indicators { display: none; }
    .bright, .bleft, .btop, .bbottom { border: none; }
    .mborder { position: relative; }
    .mborder:after { content: ""; background: var(--one); width: 60%; height: 2px; position: absolute; bottom: 0; left: 20%; right: 20%; }
    #subNav .navbar-brand img { width: 160px; }
    .aboutus-bottom { margin-top: 0; }
    .aboutus-bottom img {margin-bottom: 30px; }
    .ctoa .btn-1 {margin-bottom: 10px;}
    .plr { padding-left: 20px; padding-right: 20px; }
    .h-420 { height: auto; }
    .text-box-3 { margin-bottom: 30px; }
    .title-style-3 h2 { font-size: 32px; line-height: 42px; }
    .vform { padding: 20px; }
    .btn-3 { padding: 7px 70px;}
    
    .single-campaign .sc-img { margin-bottom: 35px; }
    .single-campaign .sc-content h1 { margin-bottom: 30px; }
    .user-meta li { padding-left: 2px; padding-right: 2px; }
    .sc-user .user-img { margin-right: 10px; }
    .donation { margin-top: 50px;}
    .ctoa-btn { margin-bottom: 10px;}
    .sc-tab { margin-bottom: 60px;}
    .donate-now { padding: 20px;}
    .page-title h1 { font-size: 36px; line-height: 48px; }

}

/* ---------- MAX 360PX ---------- */
@media screen and (max-width: 360px) {
    
    #mainNav { position: relative; background: var(--white); }
    #mainNav .navbar-brand img { width: 160px; }
    #mainNav .navbar-nav .nav-link { color: var(--heading); }
    .slider-text { top: 15%; }
    .slider-text h5 { font-size: 12px; line-height: 22px; margin-bottom: 5px; }
    .slider-text h2 { font-size: 22px; line-height: 32px; margin-bottom: 10px; }
    .slider-text .btn-1 { padding: 5px 15px; font-size: 10px; line-height: 12px; }
    .slider-text .btn-2 { padding: 5px 15px; font-size: 10px; line-height: 12px; }
    .carousel-indicators { display: none; }
    .bright, .bleft, .btop, .bbottom { border: none; }
    .mborder { position: relative; }
    .mborder:after { content: ""; background: var(--one); width: 60%; height: 2px; position: absolute; bottom: 0; left: 20%; right: 20%; }
    #subNav .navbar-brand img { width: 160px; }
    .aboutus-bottom { margin-top: 0; }
    .aboutus-bottom img {margin-bottom: 30px; }
    .ctoa .btn-1 {margin-bottom: 10px;}
    .plr { padding-left: 20px; padding-right: 20px; }
    .h-420 { height: auto; }
    .text-box-3 { margin-bottom: 30px; }
    .title-style-3 h2 { font-size: 32px; line-height: 42px; }
    .vform { padding: 20px; }
    .btn-3 { padding: 7px 70px;}
    
    .single-campaign .sc-img { margin-bottom: 35px; }
    .single-campaign .sc-content h1 { margin-bottom: 30px; }
    .user-meta li { padding-left: 2px; padding-right: 2px; }
    .sc-user .user-img { margin-right: 10px; }
    .donation { margin-top: 50px;}
    .ctoa-btn { margin-bottom: 10px;}
    .sc-tab { margin-bottom: 60px;}
    .donate-now { padding: 20px;}
    .page-title h1 { font-size: 36px; line-height: 48px; }
}

/* ---------- MAX 320PX ---------- */
@media only screen and (max-width: 320px) {
    
    #mainNav { position: relative; background: var(--white); }
    #mainNav .navbar-brand img { width: 160px; }
    #mainNav .navbar-nav .nav-link { color: var(--heading); }
    .slider-text { top: 15%; }
    .slider-text h5 { font-size: 12px; line-height: 22px; margin-bottom: 5px; }
    .slider-text h2 { font-size: 22px; line-height: 32px; margin-bottom: 10px; }
    .slider-text .btn-1 { padding: 5px 15px; font-size: 10px; line-height: 12px; }
    .slider-text .btn-2 { padding: 5px 15px; font-size: 10px; line-height: 12px; }
    .carousel-indicators { display: none; }
    .bright, .bleft, .btop, .bbottom { border: none; }
    .mborder { position: relative; }
    .mborder:after { content: ""; background: var(--one); width: 60%; height: 2px; position: absolute; bottom: 0; left: 20%; right: 20%; }
    #subNav .navbar-brand img { width: 160px; }
    .aboutus-bottom { margin-top: 0; }
    .aboutus-bottom img {margin-bottom: 30px; }
    .ctoa .btn-1 {margin-bottom: 10px;}
    .plr { padding-left: 20px; padding-right: 20px; }
    .h-420 { height: auto; }
    .text-box-3 { margin-bottom: 30px; }
    .title-style-3 h2 { font-size: 32px; line-height: 42px; }
    .vform { padding: 20px; }
    .btn-3 { padding: 7px 70px;}
    
    .single-campaign .sc-img { margin-bottom: 35px; }
    .single-campaign .sc-content h1 { margin-bottom: 30px; }
    .user-meta li { padding-left: 2px; padding-right: 2px; }
    .sc-user .user-img { margin-right: 10px; }
    .donation { margin-top: 50px;}
    .ctoa-btn { margin-bottom: 10px;}
    .sc-tab { margin-bottom: 60px;}
    .donate-now { padding: 20px;}
    .page-title h1 { font-size: 36px; line-height: 48px; }

}