.row {
  display: flex;
  flex-wrap: wrap;
}

.col-md-6, .col-xl-3 {
  flex: 0 0 100%;
  max-width: 100%;
  padding: 5px;
}

 


.progress-bar.progress-bar--green:after{
	display: none !important;
}

.cause-item small{
	font-size: 0.8em !important;
}

.cause_title_info{
	height: 120px;
}

h5.cause-title{
    margin-top: 5px;
		    font-size: 22px !important;
		    	color: var(--e-global-color-primary);

	}
.cause_of{
	font-size: 0.8em;
	color: var(--e-global-color-grey);
}

.cause-item{
        -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1)  !important;
    padding: 10px;
    	border-radius: 10px;
}

.cause-item .progress{
    width: 100%;
    height: 10px;
    background-color: #efefef;
     	border-radius: 5px;
}

.cause-item .progress-bar{
 
    height: 10px;
    background-color: #198754;
     	border-radius: 5px;
}


.cause_status{
    color: #198754;
    font-size: 0.8em;
}

.cause-button{
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: #E55D25;
    color: #fff;
}

.cause-item .image{
	overflow: hidden;
	height: 200px;
	width: 100%;
	border-radius: 10px;
	background-size: cover !important;
}

.show-mobile{
		display: block !important;
	}
	
	.hide-mobile{
		display: none !important;
	}

/* Bootstrap md breakpoint: 768px and up */
@media (min-width: 768px) {
  .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  
    .col-xl-3 {
    flex: 0 0 24%;
    max-width: 24%;
  }
  
     .col-xl-4 {
    flex: 0 0 33%;
    max-width:33%;
}
}