
.we-animate{
  opacity: 0;
}
.we-animate .animated{
    opacity: 1;
}

.we-color {
	color: #4caf50;
}
.we-bg {
	background-color: #e4f3e5;
}

/* MODAL */

.centered-modal.in {
	display: flex !important;
}
.centered-modal .modal-dialog {
	margin: auto;
}
.modal-header,
.modal-footer {
	border: none;
}
.modal-footer .btn{
	border-top: 1px solid #e5e5e5;
}
.modal .btn.focus,
.modal .btn:focus,
.modal .btn:hover {
  color: #fff;
  text-decoration: none;
  background: #333;
}
.modal .btn:last-child {
	border-radius: 0 0 5px 5px;
}
.modal .btn-block+.btn-block {
	margin-top: 0;
}
.modal-footer i{
	margin-right: 5px;
}
i.flag:before {
	content: "";
	background: url(../images/flags.jpg) no-repeat;
}
.flag-id i.flag:before {
	background-position: bottom;
}
i.flag:before, i.flag:not(.icon) {
	display: inline-block;
	width: 16px;
	height: 11px;
}

/* HEADER NAVIGATION */

.main-nav.navbar-fixed-top {
	position: fixed;
}
.main-nav {
	background: linear-gradient(180deg, #def0d8 40%, rgba(32, 116, 210, 0) 100%);
}
.top-bar {
	display: flex;
	right: 72px;
	top: 28px;
}
.top-bar>span{
	display: none;
}
.top-bar select#langSelector {
	background: transparent;
  border: none;
  font-size: 12px;
}
.top-bar select#langSelector option {
	font-size: 14px;
}
.lang-wrap span{
	margin-left: 32px;
}
.lang-wrap span i{
	margin: 0 3px 0 0;
}


/* HEADER BANNER */

.inner-banner {
	min-height: 100vmin;
	background: #def0d8;
	background: linear-gradient( #fff 0%, #66bc46 50%, #66bc46 60%, #fff 100%);
}

#hero-carousel .carousel-cell {
	left: 0 !important;
	opacity: 0;
	z-index: -1;
}
#hero-carousel .carousel-cell.is-selected {
	opacity: 1;
	transition: opacity 0.5s ease-in-out;
	z-index: 0
}

.inner-banner h1 {
	font-family: 'Arial', sans-serif;
	font-size: 70px;
	font-weight: 600;
}
.sub-pg-img{
	float: none;
}
.sub-pg-text {
	text-align: center;
	margin: 0;
}
.sub-pg-text h3 {
	color: rgb(255 255 255 / 1);
	margin: 24px 24px 12px;
	font-size: 28px;
	line-height: 32px;
	text-shadow: 1px 1px 3px #00000070;
}

.bnr-btn {
  line-height: 96px;
  text-decoration: none;
	outline: 1px solid rgb(255 255 255 / 10%);
	background: #222;
	filter: drop-shadow(0px 0px 70px rgb(255 255 255 / 50%));
}
.bnr-btn:hover {
	background: #333;
	color: #fff;
	text-decoration: none;
}

/* SECTION */

.we-section {
  padding-top: 24px;
  padding-bottom: 24px;
}
.we-section .col-md-8,
.we-section .col-md-4 {
	margin-bottom: 24px;
}
.we-section .col-md-6 h3,
.we-section .col-md-8 h3,
.we-section .col-md-4 h3{
	margin-bottom: 24px;
	line-height: 1.5;
}
.we-section h2 {
  font-size: 28px;
  line-height: 1.2;
}
.we-section h4{
  margin-bottom: 36px;
}
.we-section h5{
  margin-bottom: 24px;
  font-size: 32px;
  line-height: 42px;
}
.wecare .row{
  margin-top: 15px;
  margin-bottom: 15px;
  /* margin: 36px auto;
  padding: 12px; */
}

/* SECTION - RISE */

.we-rise{
	background: #fff;
	background: linear-gradient( #fff, #ebfeff);
	padding: 100px 0 60px;
}
.we-rise h2{
	font-size: 42px;
	font-weight: 600;
	text-transform: uppercase;
	color: #333;
}

/* Floating animation */
@keyframes float {
	0% {
		transform: translatey(0px);
	}
	50% {
		transform: translatey(15px);
	}
	100% {
		transform: translatey(0px);
	}
}
.floating {
	transform: translatey(0px);
	animation: float 6s ease-in-out infinite;
}

/* SECTION - LIFE */

.we-life{
	background: #00c8f0;
	background: linear-gradient(180deg, #ebfeff, #00c8f0);
}
.we-life .container{
	padding: 0 24px;
}
.we-life .col-wrap {
	background: white;
	padding: 2em 2em .2em;
	border-radius: 24px;
	margin-top: 48px;
}
/* .we-life .row {
	margin: 0px;
}
.we-life .img {
	margin: 0px;
} */
.we-life h3 {
	margin-bottom: 24px;
	font-size: 22px;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 36px;
	color: #333;
}
.we-life h4 {
	font-weight: 400;
}

/* SECTION - JOIN */

.we-join {
	color: #3f3f3f;
}
.we-join h3{
	margin-bottom: 1.5rem;
	text-transform: uppercase;
	font-weight: 600;
	color: #3f3f3f;
}

/* SECTION - FORM */

.we-form {
	padding: 4rem 0 0;
  background-color: #e4f3e5;
}

/* FORM BOX */

.box-tip{
	background-color: rgb(76, 175, 80);
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	height: 10px;
}
.form-section {
	background-color: #fff;
	border: 1px solid #dadce0;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
	margin-bottom: 24px;
	padding: 24px 40px;
	margin-top: 0;
	page-break-inside: avoid;
	-webkit-transition: background-color 200ms cubic-bezier(0,0,0.2,1);
	transition: background-color 200ms cubic-bezier(0,0,0.2,1);
}
.form-section-1{
	padding: 12px 24px;
}
.form-section-1 h3{
	font-size: 18px!important;
}
.form-group {
    margin-bottom: 24px;
}
.form-group:last-child {
    margin-bottom: 6px;
}
.form-group label {
	font-size: 14px;
	color: #5b616e;
	margin-bottom: 0;
}
.form-group.required label:after,
.form-section label.required:after {
  content:" *";
  color:red;
}
.form-group input.form-control {
  border-bottom: 1px solid rgba(0,0,0,.12);
}
.checkbox label {
	padding-left: 28px;
	/* line-height: 24px; */
}
.form-group .checkbox input {
	margin-left: -28px;
	width: 18px;
	height: 18px;	
}
p.help-block{
	margin-bottom:4px;
}
.form-group input.btn {
	background-color: rgb(76, 175, 80);
	color: #fff;
  border: none;
	border-radius: 6px;
}

/* FORM FRAME */

.we-form .col-md-4{
	text-align: center;
	margin: 36px auto;
	font-size: 16px;
  font-weight: 400;
}

.we-form blockquote code span {
	background-color: #faebd7;
}
.user-frame {
	border-radius: 8px;
	outline: 1px solid #dadce0;
}

blockquote {
	width: 100%;
	margin-top: 24px;
	border-radius: 8px;
	border: 1px solid #dadce0;
	background-color: #fff;
	text-align: left;
}

blockquote code {
	padding: 0;
	color: #666;
	background-color: #fff;
}
.btn-outline-success {
	color: #28a745;
	background-color: transparent;
	background-image: none;
	border-color: #28a745;
}
.btn-outline-success:hover {
	color: #fff;
	background-color: #28a745;
}

/* SECTION - WATCH */

.watch {
	background-image: url(../images/wecare/video.jpg);
	font-style: italic;
	font-size: 32px;
	color: #fff;
	padding: 150px 0;
	text-align: center;
}
.watch a{
	border: 2px solid #fff;
	line-height: 70px;
	border-radius: 100%;
	width: 70px;
	height: 70px;
	padding: 0;
	font-size: 21px;
	color: #fff;
	display: block;
	margin: 2rem auto;
}
.watch a:hover, .watch a:active, .watch a:focus{
	background-color: #fff;
	color: #424242;
}
.watch .fa-play{
	font-size: 1.1em;
  margin-left: 4px;
}
.bg-img{
	background-size: cover;
	background-repeat: no-repeat;
	background-position-x: 35%;
	position: relative;
}
.bg-img div{
	z-index: 1;
	position: relative;
}
.bg-img:after{
	position: absolute;
	content: '';
	height: 100%;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	left: 0;
	top: 0;
}

/* Fade-move Animation For Details Lightbox - Magnific Popup */
/* at start */
.my-mfp-slide-bottom .zoom-anim-dialog {
	opacity: 0;
	transition: all 0.2s ease-out;
	-webkit-transform: translateY(-1.25rem) perspective(37.5rem) rotateX(10deg);
	-ms-transform: translateY(-1.25rem) perspective(37.5rem) rotateX(10deg);
	transform: translateY(-1.25rem) perspective(37.5rem) rotateX(10deg);
}

/* animate in */
.my-mfp-slide-bottom.mfp-ready .zoom-anim-dialog {
	opacity: 1;
	-webkit-transform: translateY(0) perspective(37.5rem) rotateX(0); 
	-ms-transform: translateY(0) perspective(37.5rem) rotateX(0); 
	transform: translateY(0) perspective(37.5rem) rotateX(0); 
}

/* animate out */
.my-mfp-slide-bottom.mfp-removing .zoom-anim-dialog {
	opacity: 0;
	-webkit-transform: translateY(-0.625rem) perspective(37.5rem) rotateX(10deg); 
	-ms-transform: translateY(-0.625rem) perspective(37.5rem) rotateX(10deg); 
	transform: translateY(-0.625rem) perspective(37.5rem) rotateX(10deg); 
}

/* dark overlay, start state */
.my-mfp-slide-bottom.mfp-bg {
	opacity: 0;
	transition: opacity 0.2s ease-out;
}

/* animate in */
.my-mfp-slide-bottom.mfp-ready.mfp-bg {
	opacity: 0.8;
}
/* animate out */
.my-mfp-slide-bottom.mfp-removing.mfp-bg {
	opacity: 0;
}
/* end of fade-move animation for details lightbox - magnific popup */

/* Fade Animation For Image Lightbox - Magnific Popup */
@-webkit-keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
.fadeIn {
	-webkit-animation: fadeIn 0.6s;
	animation: fadeIn 0.6s;
}
@-webkit-keyframes fadeOut {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}
@keyframes fadeOut {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}
.fadeOut {
	-webkit-animation: fadeOut 0.8s;
	animation: fadeOut 0.8s;
}
/* end of fade animation for image lightbox - magnific popup */

/* SECTION - SUPPORTER */

.supporter-wrap {
  margin-bottom: 24px;
}
.supporter-item {
  width: 100%;
  background: #fff;
}
.supporter-card img{
  display: block;
  max-height: 100%;
  margin: 0 auto;
  max-width: 100%;
	border-radius: 8px;
}

.img, .blog-img, .user-img {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}
:focus-visible { 
	outline: none;
}
.flickity-button-icon {
  fill: #eee;
}
.flickity-button {
  background: transparent;
}
.flickity-button:hover {
  background: #c9e8be;
}
.flickity-button:focus {
  outline: none;
	box-shadow: none;
}
.flickity-prev-next-button{
	z-index: 1;
}

/* SECTION - TESTIMONI */

.testimony-wrap {
	margin: 0 12px;
	display: block;
	position: relative;
	background: rgba(255, 255, 255, 0.1);
	color: rgba(0, 0, 0, 0.8);
}
.testimony-wrap p{
	font-size: 16px;
}
.testimony-wrap .line {
	position: relative;
	border-left: 1px solid #e6e6e6;
	padding-left: 3.6	rem !important;
}
.testimony-wrap .quote {
	position: absolute;
	top: 50%;
	left: -20px;
	width: 40px;
	height: 40px;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	background: rgb(76, 175, 80);
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	border-radius: 50%;
}
.testimony-wrap .text {
	display: block;
	flex-direction: row;
	padding-left: 20px;
}
.testimony-wrap .quote i {
	color: #fff;
}
.testimony-wrap .user-img {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	position: relative;
}
.testimony-wrap .meta {
	font-weight: 500;
	font-size: 18px;
	margin-bottom: 0;
	color: #000;
	padding-left: 3rem;
}
.testimony-wrap .name {
	font-weight: 500;
	font-size: 18px;
	margin-bottom: 0;
	color: #000;
}
.testimony-wrap .position {
	font-size: 13px;
}
.testimony-wrap span {
	color: #bfbfbf;
}

/* SECTION - INFOGRAPHIC */

.infographic{
	padding-top: 6rem;
}
.infographic .info-col {
	padding: 3rem 0;
}
.infographic i {
	color:#5b616e
}
.infographic h1 {
	margin: 12px 0 15px 0;
}
/* .infographic svg {
	width: 4em;
	height: 4em;
	margin-bottom: 1.1rem !important;
	fill:#4caf50;
} */
.infographic img {
width: 6em;
height: 6em;
}


/* SECTION - PROGRESSION */

.progression {
	padding-bottom: 6rem;
}
.progress-wrap {
	margin: 1.5rem;
	padding: 2.4rem;
	background: #fff;
	border: 1px solid #dadce0;
	border-radius: 8px;
}
.progress-header{
	margin-bottom: 4.2rem !important;
	margin-top: 1.2rem;
	text-align: center;
}
.progress-title {
	font-size: 14px;
}
.anim-progress {
	width: 100%;
	height: 24px;
	border-radius: 5px;
	margin: 6px 0 3rem;
	background-color: #e4f3e5;
	/* outline: 1px solid #4caf50; */
	overflow: hidden;
	position: relative;
}
.anim-progress span {
  height: 100%;
  display: block;
  width: 0;
  color: rgb(255, 251, 251);
  line-height: 26px;
  position: absolute;
  padding-right: 5px;
  text-align: end;
	font-size: 14px;
	font-weight: 300;
	letter-spacing: 0.25px;
}
.anim-progress strong {
	font-weight: 500;
}
.progress-fill span {
  background-color: #4caf50;
}


/* SCROLL TO TOP */

.js-gotop {
  position: fixed;
  display: none;
  bottom: 7px;
  right: 7px;
  z-index: 999;
}
.js-gotop a {
  background: #fff;
  display: block;
  height: 28px;
  width: 28px;
  text-align: center;
  line-height: 28px;
  font-size: 14px;
  color: #000;
  opacity: 0.6;
  border-radius: 2px;
}
.js-gotop a:hover,
.js-gotop a:active {
  opacity: 1;
  color: #000;
}

/* FOOTER */

.wecare footer {
  min-height: auto;
	padding: 0;
}
.wecare .copyright {
	background-color: #f7fdf8;
  margin: 0;
}

/* Responsive */

