/*
Template Name:Social Welfare
File: Layout CSS
Author: Templates On Web
Author URI: http://templateonweb.com/
Licence: <a href="http://www.templateonweb.com/terms.php?v=content&contentid=152">Website Template Licence</a>
*/
/*********************center_home****************/
.carousel>.carousel-inner>.item>.circleElement {
    background-color: #1877F2;
    border-radius: 50%;
    position: absolute;
    top: 11%;
    left: 39%;
    width: 400px;
    height: 400px;
    opacity: .5;
}
.center_home .carousel-indicators li { cursor: pointer }
.center_home .carousel-control {
    width: 60px;
    height: 0;
    margin-top:20%;
    font-size: 100px;
    background: none;
    border: none;
    font-weight: 300;
}
.carousel-indicators li {
    background-color: #999;
    background-color: rgba(255,255,255,0.3);
}
.carousel-caption {
    padding: 25px 15px 20px 15px;
	background:#ffffff7a;
	bottom:0;
}
.carousel-caption h3 {
   color:#00008B;
}
.carousel-caption h1 {
   color:#fff;
    font-size:80px; 
}
.carousel-caption p {
    font-weight: 300;
    line-height: 25px;
	color:#fff;
}
.carousel-caption ul li {
display:inline-block;
margin-right:20px;
}

.carousel-fade .carousel-inner .item {
    opacity: 0;
    -webkit-transition-property: opacity;
    -moz-transition-property: opacity;
    -o-transition-property: opacity;
    transition-property: opacity;
}
.carousel-fade .carousel-inner .active { opacity: 1 }
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    left: 0;
    opacity: 0;
    z-index: 1;
}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right { opacity: 1 }
.carousel-fade .carousel-control { z-index: 11 }
@media only screen and (max-width:767px) { 
    .carousel-caption {
        padding: 15px;
     }
    .carousel-caption h4 { font-size: 30px }
    .carousel-caption p {
        margin-top: 10px;
        font-size: 10px;
        margin-bottom: -10px;
    }
    .carousel { margin-bottom: 0 }
    .hero-unit { padding-bottom: 60px }
    .hero-unit p { font-size: 16px }

.carousel-container {
    width: 80% !important;
    padding-left: 10%;
    margin-top: 35px;
}
}
.carousel-caption_1{
height:55%;
width:45%;
left:27%;
bottom:0;
text-align:center;
  }
.center_home img{
margin-top:0;
width:100%;  
  }
/*********************center_home****************/

/*********************progress****************/
#progress{
  background: #f4f4f4;
  padding-top:70px;
  padding-bottom:40px;
  }
.progress_1i{
 background:#fff;
 padding:40px 15px; 
  }
.progress_1i span i{
 background: #00008B;
 color:#fff;
 border-radius:50%;
 width:60px;
 height:60px;
 line-height:60px;
 font-size:30px; 
  }
.progress_1i span{
 display:block;
 margin-top:-75px; 
 margin-bottom:25px;
  }
.progress_2{
margin-top:40px;
background:#fff;  
  }
  
#progress .progress{
    width: 150px;
    height: 150px;
    line-height: 150px;
    background: none;
    margin: 0 auto;
    box-shadow: none;
    position: relative;
}
#progress .progress:after{
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 12px solid #f4f4f4;
    position: absolute;
    top: 0;
    left: 0;
}
#progress .progress > span{
    width: 50%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    z-index: 1;
}
#progress .progress .progress-left{
    left: 0;
}
#progress .progress .progress-bar{
    width: 100%;
    height: 100%;
    background: none;
    border-width: 12px;
    border-style: solid;
    position: absolute;
    top: 0;
}
#progress .progress .progress-left .progress-bar{
    left: 100%;
    border-top-right-radius: 80px;
    border-bottom-right-radius: 80px;
    border-left: 0;
    -webkit-transform-origin: center left;
    transform-origin: center left;
}
#progress .progress .progress-right{
    right: 0;
}
#progress .progress .progress-right .progress-bar{
    left: -100%;
    border-top-left-radius: 80px;
    border-bottom-left-radius: 80px;
    border-right: 0;
    -webkit-transform-origin: center right;
    transform-origin: center right;
    animation: loading-1 1.8s linear forwards;
}
#progress .progress .progress-value{
    width: 90%;
    height: 90%;
    border-radius: 50%;
    background: #44484b;
    font-size: 24px;
    color: #fff;
    line-height: 135px;
    text-align: center;
    position: absolute;
    top: 5%;
    left: 5%;
}
.progress.blue .progress-bar{
    border-color: #049dff;
}
.progress.blue .progress-left .progress-bar{
    animation: loading-2 1.5s linear forwards 1.8s;
}
.progress.yellow .progress-bar{
    border-color: #00008B;
}
.progress.yellow .progress-left .progress-bar{
    animation: loading-3 1s linear forwards 1.8s;
}
.progress.pink .progress-bar{
    border-color: #ed687c;
}
.progress.pink .progress-left .progress-bar{
    animation: loading-4 0.4s linear forwards 1.8s;
}
.progress.green .progress-bar{
    border-color: #1abc9c;
}
.progress.green .progress-left .progress-bar{
    animation: loading-5 1.2s linear forwards 1.8s;
}
@keyframes loading-1{
    0%{
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100%{
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
}
@keyframes loading-2{
    0%{
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100%{
        -webkit-transform: rotate(144deg);
        transform: rotate(144deg);
    }
}
@keyframes loading-3{
    0%{
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100%{
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }
}
@keyframes loading-4{
    0%{
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100%{
        -webkit-transform: rotate(36deg);
        transform: rotate(36deg);
    }
}
@keyframes loading-5{
    0%{
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100%{
        -webkit-transform: rotate(126deg);
        transform: rotate(126deg);
    }
}
@media only screen and (max-width: 990px){
   #progress  .progress{ margin-bottom: 20px; }
}
.progress_2i1{
 padding-top:30px; 
  }
.progress_2i2{
 padding-top:100px; 
  }
/*********************progress_home****************/

/*********************cause****************/
#cause{
 padding-top:40px;
 padding-bottom:30px; 
  }
.cause_1_r .btn-success{
  color:#999;
  background:none;
  border:none;
  padding:0;
  margin-left:3px;
  margin-right:3px;
  font-size:20px;
  }
.cause_2i{
position:relative;  
  }
.cause_2ii1{
position:absolute;
top:0;
width:100%;
height:100%;
background:#00008B;
text-align:center;
padding-top:95px;
display:none;  
  }
.cause_2ii1 span{
font-size:50px; 
color:#fff;
  }
.cause_2i:hover .cause_2ii1{
 display:block;
 }
.cause_2i2 .progress{
height:8px;
border-radius:0;
margin-top:10px; 
  }
.cause_2{
margin-top:20px;  
  }
/*********************cause_home****************/

/*********************event_home****************/
#event_home{
  background: #f4f4f4;
  padding-top:40px;
  padding-bottom:40px;
  }
.event_h1li1l{
 text-align:center;
 background:#fff;
 padding:0px 10px 20px 10px;
 }
.event_h1li1l hr{
  border-width:3px;
  border-color:#00008B;
  width:50%;
  margin-top:0;
  }
.event_h1li1l h3 span{
  display:block;
  color:#999;
  font-size:16px;
  }
.event_h1li{
 margin-bottom:30px; 
  }
.event_h1li1r h6{
 color:#999; 
  }
.event_h1li1r h6 i{
margin-right:5px;
  }
.event_h1li1{
 border-bottom:1px solid #ddd;
 margin-bottom:15px;
 padding-bottom:15px; 
  }
.event_h1r1{
  margin-bottom:30px;
  }
.event_h1r2 ul li{
 display:inline-block;
 margin-right:3px;
  }
.event_h1r2 ul .active a {
   background: #fff;
   border-top:3px solid #00008B;
}
.event_h1r2 ul li a {
    padding: 15px 30px;
    display: block;
	background:#fafafa;
}
.event_h1r2 ul li a:hover {
   background: #fff;
   border-top:3px solid ##00008B;
}
.home_i{
 background:#fff;
 padding:40px 20px;
 margin-left:15px;
 margin-right:15px; 
  }
/*********************event_home_end****************/

/*********************donate_home****************/
#donate_home {
    background-image: url(../img/14.jpg);
    background-attachment: fixed;
}

.donate_hm {
    padding-top: 150px;
    padding-bottom: 150px;
    background: #00000091;
}
/*********************donate_home_end****************/

/*********************news_home****************/
#news_home{
 padding-top:40px;
 padding-bottom:40px;
 background:#f4f4f4; 
  }
.news_home_2l{
position:relative;  
  }
.news_home_2li1{
 position:absolute;
 background: #00008B;
 top:0;
 width:100%;
 height:100%;
 display:none;
 }
.news_home_2l:hover .news_home_2li1{
 display:block; 
  }
.news_home_2r h6 a span{
 color:#999; 
  }
.news_home_2r h6 a span i{
margin-left:5px;
  }
.news_home_2r{
background:#fff;
padding:40px 15px;
min-height:244px  
  }
.news_home_1{
 margin-bottom:30px; 
  }
/*********************news_home_end****************/

/*********************custom****************/
#custom{
 padding-top:40px;
 padding-bottom:40px; 
  }
.custom_1i1 {
background:#f4f4f4; 
padding:10px 15px 15px 15px;
  }
.custom_1i2 {
background:#f4f4f4; 
padding:10px 15px 15px 15px;
border-top:1px solid #ddd; 
  }
.custom_1i2 h6 span{
font-size:22px; 
 }
/*********************custom_end****************/

@media screen and (max-width : 767px){
.center_home img{
min-height:400px; 
 }
.carousel-caption_1{
width:100%;
left:0; 
height:auto; 
  }
.carousel-caption h1{
font-size:45px;  
  }
.carousel-caption p{
font-size:18px;  
  }
.progress_1i {
margin-bottom:45px; 
 }
#progress{
text-align:center; 
 }
.cause_1 {
 text-align:center; 
 }
.cause_1 .controls{
float:none!important;
margin-top:15px; 
 } 
.cause_2{
text-align:center; 
 }
.cause_2i2 h5{
 text-align:left;
 }
#event_home{
 text-align:center; 
 }
.event_h1li1r {
 margin-top:15px;
 }
.event_h1r2 ul li{
margin-bottom:8px; 
 }
#news_home{
 text-align:center; 
 }
.news_home_2r h6{
 text-align:left; 
 }
.news_home_2r .tc{
 text-align:center; 
 }
#custom{
  text-align:center;
 }
.custom_1i2  h6{
 text-align:left;  
  }
.custom_1  .col-sm-3{
 margin-top:10px; 
  }
}

@media (min-width:768px) and (max-width:991px) {
.center_home img{
min-height:600px;  
  }
.center_home h3{
font-size:24px;  
  }
.center_home p{
font-size:14px;  
  }
.center_home h1{
font-size:50px;  
  }
.carousel-caption_1{
 height:60%; 
  }
.progress_2i1 {
padding-bottom:20px;
 }
.event_h1r2 ul li{
margin-bottom:8px; 
 }
.news_home_2li img{
 min-height:244px;
 }
.news_home_2r{
 padding:10px; 
  }
.custom_1i1 h4{
 font-size:18px;
 }
.custom_1i1 h5{
 font-size:14px;
 }
.custom_1i2 h6 span{
 font-size:18px;
 }
.cause_2ii1{
 padding-top:30%;
 }
 }
@media (min-width:992px) and (max-width:1200px) {
.center_home img{
min-height:600px;  
  }
.center_home h1{
font-size:50px;  
  }
.progress_2i1 {
padding-bottom:20px;
 }
.news_home_2li img{
 min-height:244px;
 }
.news_home_2r{
 padding:25px 10px; 
  }
 }
@media (min-width:1201px) and (max-width:1345px) {
.carousel-caption_1{
 height:60%; 
  }
 }