/* Responsive CSS Document */

/* 
    Created on : 08/11/2016. 
    Theme Name : CHARITY.
    Description: CHARITY || Responsive html5 template.
    Version    : 1.0.
    Author     : @Template_mr.
   
*/



@media (min-width: 992px) {
	.container {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}
@media (max-width: 1366px) {
    .scroll-top {bottom: 30px; right:30px;}
}
@media (max-width: 1199px) {
  .our-causes .single-cause-wrapper .img-holder img,
  .our-causes .single-cause-wrapper .text.float-left {width: 100%;}
  .our-causes .single-cause-wrapper .img-holder {float:none;}
  .our-causes .single-cause-wrapper .text.fix a.p-color-bg {margin-top: 25px;}
  .our-blog .left-side,.our-blog .right-side {width: 100%; padding-left: 0;}
  .our-blog .img img {width: 100%;}
  .our-blog .post-small .post {width: 78%; padding-bottom: 62px;}
  .our-blog .post-small .img {width: 22%;}
}
/*(max-width: 1199px)*/

@media (max-width: 991px) {
    
    .nav-top-btn-group ul{
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 5px 0px;
    }
    
    .home-charitybanner{display:none ;}
.rev-slider-wrapper{display:none !important;}
.main-menu .navbar-toggle {
    float: right;
    margin-top: -50px;
    border-radius: 0px;
}
.single-input {
    position: relative;
    z-index: 99999;
}
footer .single-content{text-align:left;}
.mobile-banner{
    background:url('/assects/images/home/slide-1.webp')no-repeat center center;
    height:400px;
    background-size:cover;
    display:block;
    padding:145px 0;
}
.mobile-banner span{color:#fff;font-size:16px;display:inline-block;}
.mobile-banner h2{color:#fff;font-size:20px;margin-bottom:15px;}
.navbar{min-height:inherit !important;background-color:#f2f2f2;}
  .main-menu .search-form .close-search {right: 15px;}
  header.main-header .left-side,header.main-header .right-side {width: 100%;text-align: center;}
  header.main-header .right-side {margin-top: 30px;}
  header.main-header .right-side li {float:right;}
  header.main-header .right-side li.volunter {float:left;}
  .main-menu button.search-button {margin: 0;top:34px;right: 15px;}
  .main-menu nav {
          width: 100%;
      /*margin:20px 0 0 0; width: 100%; */
      /*clear:both;*/}
  .main-menu .nav>li {margin: 0;}
  /*.main-menu.fixed .logo,.main-menu.fixed button.search-button {display: none;}*/
  .main-menu.fixed nav {margin: 0;}
  .short-banner .top-text {padding: 33px 20px 45px 20px;text-align: center;}
  .short-banner .top-text .float-left {width: 100%;float:none;}
  .short-banner .top-text a {float:none;}
  .tow-column-text .float-left {padding: 28px 15px 45px 15px;}
  .emergency-cause .left-side,.emergency-cause .right-side {width: 100%;margin-top: 60px;}
  .emergency-cause .right-side .text-wrapper:before {display: none;}
  .page-middle-banner p,.our-staff .single-staff .img img,.up-coming-events .become-help .img-box img {width: 100%;}
  .why-choose-us .choose-us>div {margin-bottom: 40px;}
  .why-choose-us p {margin-right: 0;}
  .our-staff .single-staff {margin-bottom: 30px;}
  .client-slider-section .item-wrapper {width: 85%;}
  .up-coming-events .become-help {margin-top: 40px;}
  .up-coming-events .become-help.home-3-fix {margin: 0 0 40px 0;}
  footer .section-middle {width: 100%;margin-top: 50px;}
  footer .left-side, footer .right-side {width: 50%;}
  footer .left-side ul li a,footer .right-side ul li a {line-height: 20px;}
  .why-choose-us .choose-us .left-space-fix {margin-bottom: 0;padding-left: 0;margin-top: 40px;}
  .up-coming-events .right-space-fix {padding-right: 0;}
  .theme-left-half-section {width: 100%;padding-right: 0;margin-bottom: 40px;}
  .sidebar {width: 50%; float:left;}
  .sidebar .donate-slider img {width: 100%;}
  .our-gallery.gallery-v4 .gallery-menu-wrapper ul.mixitUp-menu li {margin: 5px 3px 5px 3px !important;}
  #main-banner-slider .tp-caption h1 {font-size: 60px;}
  footer .section-middle {
    margin-left: 0px; 
    margin-top: 0px !important; 
  }
 .why-choose-us .choose-us .single-box, .why-choose-us.section-fix .single-box{width:100%;}
}
/*(max-width: 991px)*/

@media (min-width: 992px) and (max-width: 1199px) {
  header.main-header .right-side li.volunter a {margin-right: 0;}
  .main-menu .nav>li>a {padding: 0 10px;}
  .short-banner .top-text {padding: 33px 20px 45px 20px;}
  .tow-column-text .float-left {padding: 28px 55px 45px 55px;}
  .emergency-cause .right-side {margin-top: 97px;}
  .page-middle-banner p {width: 88%;}
  .why-choose-us p {margin-right: 20px;}
  .our-gallery .right-side {width: 80%; padding-left: 50px;}
  .our-gallery .left-side {width: 20%;}
  .client-slider-section .item-wrapper {width: 73%;}
  .up-coming-events .become-help .button-wrapper a {margin: 0;}
  .up-coming-events .become-help .img-box .opacity {padding-top: 35px;}
  .why-choose-us .choose-us .left-space-fix {padding-left: 10px;}
  .sidebar .sidebar-content  #donate-carousel {padding: 0 10px;}
  .sidebar .help-wedgit .opacity,.sidebar .cause-category {padding-left: 20px;}
  .gallery-page.gallery-v2 .item {min-height: 276px;}
  .our-gallery.gallery-v4 .item {min-height: 247px;}
  .sidebar .sidebar-recent-post {padding-left: 20px;}
  .our-blog.blog-v3 .post-small .img {width: 40%;}
  .our-blog.blog-v3 .post-small .post {width: 60%;padding-bottom: 34px;}
  .blog-details-page .blog-date .post-info li i {width: 40px;height: 40px;line-height: 36px;}
}
/*(min-width: 992px) and (max-width: 1199px)*/

@media (min-width: 768px) and (max-width: 991px) {
  .main-menu .nav>li>a {line-height: 95px;}
  .main-menu .nav>li {display: inline-block; float:none;}
  .main-menu .nav {text-align: center;}
  .main-menu .navbar-nav>li.dropdown-holder .sub-menu li a {text-align: left;}
  .main-menu .navbar-nav>li.dropdown-holder .sub-menu {width: 197px;}
  .our-causes .single-cause-wrapper .text {padding-left: 15px;padding-right: 15px;}
  .our-gallery .left-side {width: 30%;}
  .our-gallery .right-side {width: 70%;padding-left: 30px;}
  .up-coming-events .become-help .img-box .opacity {padding-top: 120px;}
  .our-blog .post-small .img {min-height: 176px;}
  .inner-banner .opacity {padding-top: 270px;}
  .gallery-page.gallery-v2 .item {min-height: 290px;}
  .our-gallery.gallery-v4 .item {min-height: 179px;}
  .error-page .wrapper {width: 90%;}
  .our-blog.blog-v3 .post-small .img {width: 40%;}
  .our-blog.blog-v3 .post-small .post {width: 60%;padding-bottom: 72px;}
  
}
/*(min-width: 768px) and (max-width: 991px)*/

@media (max-width: 767px) {
.left-side ul li{display:none !important;}
  .main-menu.fixed {max-height: 100%;overflow-y:auto;}
  .main-menu .container {padding: 0;}
  .main-menu .logo {margin-top: 20px; margin-left: 15px;}
  .main-menu button.search-button {top:15px; right: 15px;}
  .main-menu nav ul li.dropdown-holder .fa {display: block;}
  .main-menu .navbar-nav>li.dropdown-holder .sub-menu {
    -webkit-transition: none;
       -moz-transition: none;
        -ms-transition: none;
         -o-transition: none;
            transition: none;
    opacity: 1;
    visibility: visible;;
    position: static;
    box-shadow: none;
    width: 100%;
    display: none;
  }
/*  .tp-caption {*/
/*    white-space: inherit !important;*/
/*    left: 0;*/
/*    width: 100% !important;*/
/*     max-width: 100% !important; */
/*    min-width: 100% !important;*/
/*    max-height: 100% !important;*/
/*    min-height: 100% !important;*/
/*}*/

#main-banner-slider .tp-caption h2{
    padding:0 50px;
    font-size:20px !important;
    white-space:inherit !important;
} 
  header.main-header .right-side li.volunter a {
    line-height: 100%;
    padding: 15px 5px !important;
    font-size: 10px !important;
}
.main-menu .nav>li>a{padding:0 15px 0 !important;}
  .main-menu .nav>li>a,.main-menu.fixed .nav>li>a {line-height: 42px;font-size: 14px;}
  .main-menu .navbar-nav>li.dropdown-holder .sub-menu li a {line-height: 37px;}
  .main-menu .nav>li>a:before {width: 0;height: 100%;}
  .main-menu .nav>li:hover>a:before, .main-menu .nav>li.current-active>a:before,
  .main-menu .nav>li>a:focus:before, .main-menu .nav>li>a:hover:before {width: 100%;}
  header.main-header .left-side li,header.main-header .left-side li:nth-child(2) {margin-bottom: 15px;}
  .emergency-cause .right-side .col-xs-12 {margin-bottom: 25px;}
  .our-gallery .left-side {width: 100%;}
  .our-gallery .gallery-menu-wrapper ul {text-align: center;}
  .our-gallery .gallery-menu-wrapper ul li {display: inline-block;}
  .our-gallery .gallery-menu-wrapper ul li a {line-height: 42px;padding: 0 13px; margin: 10px 4px; font-size: 14px;}
  .our-gallery .right-side {width: 100%;padding-left: 0;padding-top: 50px;}
  .client-slider-section .item-wrapper img {position: static; margin: 0 auto 15px auto;}
  .client-slider-section .item-wrapper {width: 95%;padding-right: 15px; padding-left: 15px;}
  .our-blog .post-small .img,.our-blog .post-small .post,.subscribe-now form input,.our-blog.blog-v3 .post-small .post {width: 100%;}
  .subscribe-now form button {display: block;margin: 20px auto 0 auto;}
  .get-in-touch .contact-address .single-content {text-align: center;}
  .get-in-touch form h5 {margin-top: 70px;}
  #donate .modal-content {width: 95%; margin: 30px auto;}
  #donate .donate-amount .donate-price {width: 25%; margin: 0;border:1px solid #fff;}
  #donate .modal-content form input.donate-amount-handelar {width: 100%;margin-top: 20px;}
  .gallery-page.gallery-v2 .item-large,.gallery-page.gallery-v2 .item-small,.gallery-page .item img {width: 100%;}
  .our-gallery .gallery-menu-wrapper ul.mixitUp-menu {text-align: center;}
  .our-gallery .gallery-menu-wrapper ul.mixitUp-menu li {display: inline-block;margin: 0 4px 10px 4px;padding: 0 15px;line-height: 42px;}
  .our-gallery.gallery-v4 .item {width: 100% !important; min-height: auto;}
  .staff-profile .left-side,.staff-profile .right-side {width: 100%;}
  .staff-profile .left-side img {margin: 0 auto;}
  .staff-profile .right-side {padding: 40px 0 0 0;}
  .error-page .wrapper {width: 100%;}
  .blog-details-page .blog-date .post-info {padding-left: 0;margin-top: 20px; float:none;}
  .blog-details-page .blog-date .post-info li {margin-top: 10px;}
  .blog-details-page .blog-date .box {float:none;}
  .blog-details-page .blog-content .next-blog-item .wrapper {margin-left: -15px;margin-right: -15px;}
  .blog-details-page .blog-content .next-blog-item .wrapper .single-item {padding-left: 15px;padding-right: 15px;}
  #main-banner-slider .tp-caption h1 {font-size: 40px;}
  #main-banner-slider .tp-caption h5 {font-size: 20px;}
}
/*(max-width: 767px)*/

@media (max-width: 650px) {
  .get-in-touch #success,
  .get-in-touch #error {
    width: 84%;
    height: auto;
    top: calc(50% - 50px);
    left: 8%;
    padding: 30px 10px;
    margin:0;
  }
  .sidebar {width: 100%;}
}

@media (max-width: 600px) {
  .event-details-page .event-schedule .map-location {width: 100%;margin-bottom: 40px;}
  .event-details-page .event-schedule .event-time {width: 100%;padding-left: 0;}
  .blog-details-page .blog-content .author-text .text {width: 100%;margin: 0;}
  .blog-details-page .blog-content .author-text .img {width: 100%;margin-bottom: 20px;}
  .blog-details-page .blog-content .author-text .img img {margin: 0 auto;}
  .blog-details-page .blog-content .next-blog-item .wrapper .single-item {width: 100%;margin: 0 auto 30px auto;}
  .blog-details-page .blog-content .next-blog-item .wrapper .single-item img {width: 100%;}
}

@media (max-width: 550px) {
  .tow-column-text .float-left {width: 100%;}
  footer .left-side, footer .right-side,footer .left-side.float-right,
  footer .right-side.float-left {width: 100%;text-align: center;margin-top: 40px;}
  footer .left-side ul li a,footer .right-side ul li a {margin: 0 6px;}
  .cause-details-page .cause-main-content .text {width: 95%; padding-left: 20px;padding-right: 20px;margin-top: -20px;}
  #main-banner-slider .tp-caption h1 {font-size: 30px;}
  #main-banner-slider .tp-caption h5 {font-size: 16px;}
  #main-banner-slider .tp-caption span {font-size: 18px;}
}

@media (max-width: 500px) {
  #donate .modal-content form button.submit,#donate .modal-content form a.paypal {float:none; margin: 10px auto;display: block;}
}

@media (max-width: 480px) {
  .up-coming-events .become-help .button-wrapper a {display: block;margin: 10px auto;}
  .gallery-v3 .item-default,.gallery-v3 .item-small,.gallery-v3 .item-large {width: 100%;}
  .tp-bullets {display: none !important;}
}

@media (max-width: 450px) {
  .emergency-cause .right-side a {display: block;margin: 10px auto;}
  .our-gallery .right-side .col-xs-6,.our-staff .col-xs-6 {width: 100%;}
  .up-coming-events .become-help .img-box .opacity {position: relative; padding-bottom: 50px;}
  .event-details-page .event-date a {float:none;margin:20px 0 0 0;}
  .event-details-page .event-date .box {float:none;}
  .scroll-top {bottom: 10px;right:5px;}
}

@media (max-width: 420px) {
  header.main-header .right-side li.volunter {float:none; display: block;}
  header.main-header .right-side li {float: none;}
  header.main-header .right-side li.icon a {margin: 15px 6px 0 6px;}
  header.main-header .right-side li.volunter a {margin-right: 0;}
  .our-causes .single-cause-wrapper .text .target-ammount span,.cause-details-page .cause-main-content .text .target-ammount span {float:none; text-align: center;}
  .our-causes .single-cause-wrapper .text .target-ammount span.float-right,.cause-details-page .cause-main-content .text .target-ammount span.float-right {margin-top: 20px;}
  .up-coming-events .coming-events .col-xs-6 {width: 100%;}
  #donate .modal-content form {padding: 40px 15px;}
  #donate .modal-content .donate-heading h6 {font-size: 18px;padding: 10px;}
  .cause-details-page .cause-main-content .post-info li {margin: 0 0 10px 0; display: block;}
  .faq-page h5:before {display: none;}
  .sidebar .sidebar-recent-post {padding-left: 20px;}
}

@media (max-width: 380px) {
  .error-page h5 {font-size: 60px;}
  .error-page h4 {font-size: 157px;}
  #main-banner-slider .tp-caption {display: none;}
}


@media only screen and (min-width: 320px) and (max-width: 479px) {
	
	.read-more a {
        width: 144px;
        line-height: 40px;
        text-align: center;
        border: 1px solid #cd2122;
        margin: 0 0 15px;
        color: #333333;
        display: block;
    }
    header.main-header .right-side li {
      display: none;
    }
	 header.main-header .right-side li.volunter {
      float: none;
      display: inline-block;
  }
  header.main-header .right-side {
      margin-top: 0;
  }
    .main-menu .logo {
        margin: 0px auto 0 !important;
        width: 26%;
        padding: 5px 15px 0;
        float: none;
        display: inline-block; 
  }
  .emergency-cause .left-side .codeconSkillbar .PercentText {
    margin-left: -117px;
  }
  .emergency-cause .right-side, .emergency-cause .left-side {
     
      margin: 0 !important;
      padding: 15px 0;
  }
  .emergency-cause .right-side .text-wrapper {
    margin-bottom: 0px;
  }
  .emergency-cause {
      margin: 0;
  }
  .our-causes .row {
    margin-top: 0;
    padding: 30px 0;
}
  .page-middle-banner {
      margin: 0;
      padding: 0;
  }
  .choose-us h5 {
    padding: 0 0 15px 0;
  }
  .client-slider-section .opacity {
    padding: 50px 0;
  }
  .emergency-cause h4 {
    padding: 30px 0 0;
  }

  .our-causes .single-cause-wrapper .text.fix a.p-color-bg {
      margin-top: 0;
  }
    .our-causes .single-cause-wrapper {
      margin-bottom: 0;
  }
  .page-middle-banner a {
    margin:  0 0 15px;
  }
  .volunteer_form_inner {
    padding: 15px 0 15px 15px;
  }
}
@media only screen and (min-width: 480px) and (max-width: 639px) {
  header.main-header .right-side {
    margin-top: 0px;
  }
   .main-menu .logo {
      margin: 0px auto 0 !important;
      width: 57%;
      padding: 15px;
      float: none;
      display: block;
  }
  
 
}
@media only screen and (min-width: 640px) and (max-width: 767px) {


}
@media only screen and (min-width: 768px) and (max-width: 979px) {
  
  .main-menu .logo {
      margin-top: 0px;
      width: 20%;
      padding: 10px 0;
  }
  .main-menu nav {
      margin: 0;
      width: 74%;
  }
}
@media only screen and (min-width: 980px) and (max-width: 1023px) {
  
 
}
@media only screen and (min-width: 1024px) and (max-width: 1279px) {

}

