/* LOCAL EMBED FONTS FAMILY */
@font-face {
	font-family: "Rubik-Regular";
	src: url(../fonts/Rubik-Regular.ttf) format('truetype');
}

@font-face {
	font-family: "Rubik-Italic";
	src: url(../fonts/Rubik-Italic.ttf) format('truetype');
}

@font-face {
	font-family: "Rubik-SemiBold";
	src: url(../fonts/Rubik-SemiBold.ttf) format('truetype');
}

@font-face {
	font-family: "Rubik-SemiBoldItalic";
	src: url(../fonts/Rubik-SemiBoldItalic.ttf) format('truetype');
}

@font-face {
	font-family: "Rubik-Medium";
	src: url(../fonts/Rubik-Medium.ttf) format('truetype');
}

@font-face {
	font-family: "Rubik-MediumItalic";
	src: url(../fonts/Rubik-MediumItalic.ttf) format('truetype');
}

@font-face {
	font-family: "Rubik-Bold";
	src: url(../fonts/Rubik-Bold.ttf) format('truetype');
}

@font-face {
	font-family: "Rubik-BoldItalic";
	src: url(../fonts/Rubik-BoldItalic.ttf) format('truetype');
}

@font-face {
	font-family: "Mulish-Regular";
	src: url(../fonts/Mulish-Regular.ttf) format('truetype');
}

@font-face {
	font-family: "Mulish-Italic";
	src: url(../fonts/Mulish-Italic.ttf) format('truetype');
}

@font-face {
	font-family: "Mulish-SemiBold";
	src: url(../fonts/Mulish-SemiBold.ttf) format('truetype');
}

@font-face {
	font-family: "Mulish-SemiBoldItalic";
	src: url(../fonts/Mulish-SemiBoldItalic.ttf) format('truetype');
}

@font-face {
	font-family: "Mulish-Bold";
	src: url(../fonts/Mulish-SemiBold.ttf) format('truetype');
}

@font-face {
	font-family: "Mulish-BoldItalic";
	src: url(../fonts/Mulish-SemiBoldItalic.ttf) format('truetype');
}

@font-face {
	font-family: "Mulish-ExtraBold";
	src: url(../fonts/Mulish-ExtraBold.ttf) format('truetype');
}

@font-face {
	font-family: "Mulish-ExtraBoldItalic";
	src: url(../fonts/Mulish-ExtraBoldItalic.ttf) format('truetype');
}

@font-face {
	font-family: "Mulish-Black";
	src: url(../fonts/Mulish-Black.ttf) format('truetype');
}

/* LOCAL EMBED FONTS FAMILY */


body {
	font-family: "Mulish-Regular", sans-serif;
	color: #71716c;
	font-size: 16px;
	line-height: 20px;
	background: #fff;
	overflow-x: hidden !important;
}

/* COSTUMIZED CONTAINER 1366*/
.customized-container {
	max-width: 1250px;
}

/* COSTUMIZED CONTAINER 1366*/

/* customized-container */

.customized-container {
	max-width: 1250px;
}

/* customized-container */

/* HEADER DESKTOP VERSION */
.header {
	min-height: 66px;
	max-height: 75px;
	/* width: 100%; */
	width: 100vw;
	box-shadow: 0 1px 14px rgba(0, 0, 0, 0.02);
	-ms-box-shadow: 0 1px 14px rgba(0, 0, 0, 0.02);
	position: fixed;
	top: 0px;
	z-index: 9;
	/* background: #e32028; */
	background-color: rgba(227, 32, 40, 0.64);
	background: rgba(227, 32, 40, 0.64);

	/* background: -moz-linear-gradient(top,  rgba(216,26,31,0.65) 0%, rgba(216,26,31,0.65) 30%, rgba(216,26,31,0) 100%); 
	background: -webkit-linear-gradient(top,  rgba(216,26,31,0.65) 0%,rgba(216,26,31,0.65) 30%,rgba(216,26,31,0) 100%); 
	background: linear-gradient(to bottom,  rgba(216,26,31,0.65) 0%,rgba(216,26,31,0.65) 30%,rgba(216,26,31,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6d81a1f', endColorstr='#00d81a1f',GradientType=0 ); */
	top: 0px;
	left: 0px;
	padding: 6px 0px;
	color: #fff;
	overflow: unset;
}

.header> ::before {
	content: " ";
	position: absolute;
	background: -moz-linear-gradient(top, rgba(216, 26, 31, 0.69) 0%, rgba(216, 26, 31, 0.69) 30%, rgba(216, 26, 31, 0) 100%);
	background: -webkit-linear-gradient(top, rgba(216, 26, 31, 0.69) 0%, rgba(216, 26, 31, 0.69) 30%, rgba(216, 26, 31, 0) 100%);
	background: linear-gradient(to bottom, rgba(216, 26, 31, 0.69) 0%, rgba(216, 26, 31, 0.69) 30%, rgba(216, 26, 31, 0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a6d81a1f', endColorstr='#00d81a1f', GradientType=0);
	min-height: 106px;
	max-height: 108px;
	width: 100vw;
	left: 0px;
	top: 0px;
	display: block;
	z-index: -1;
	opacity: .2;
}

.header-solid {
	background: #e32028;
}

.header-toggle-solid {
	background: #e32028;
}

.logo-brand {
	width: 152px;
	min-height: 56.02px;
	float: left;
	margin-right: 36px;
	margin-top: 1px;
}

.logo-brand img {
	max-width: 100%;
	width: 100%;
}

.d-lang-desktop {
	min-height: 56.02px;
}

/* NAVBAR DESKTOP START ONLY */



#navbar-yappika {
	max-width: 90%;
	display: flex;
	flex: 0 0 90%;
	-ms-flex: 0 0 90%;
	margin-top: -2.5px;
}

.col-nav-left {
	flex: 0 0 auto;
	-ms-flex: 0 0 auto;
	width: 33.3333333333%;
}

.col-nav-right {
	flex: 0 0 auto;
	-ms-flex: 0 0 auto;
	width: 66.6666666667%;
}

.wrp-btn-top {
	min-width: 156px;
	max-width: 156px;
}

.desc-donate-button {
	display: none;
}

.navbar-yappika-end {
	justify-content: end;
}

#navbar-yappika ul li a {
	color: #fff;
	font-size: 16px;
	line-height: 35px;
	font-family: 'Rubik-Medium', sans-serif;
	letter-spacing: 0.55px;
	overflow: hidden;
}

#navbar-yappika ul li a.menu-item {
	cursor: pointer;
}

#navbar-yappika ul li a span.activated-menu {
	height: auto;
	width: 100vw !important;
}

#navbar-yappika ul li a span.activated-menu::after {
	content: " ";
	height: 3.5px;
	width: 98%;
	background: #5a79bc;
	position: absolute;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	bottom: -7px;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}

.caret-down {
	width: 12px;
	height: 10px;
	position: relative;
	justify-content: end;
	margin-left: 6px;
}

.caret-down::after {
	content: " ";
	width: 12px;
	position: absolute;
	height: auto;
	min-height: 9px;
	background: url(../images/caret-arrow-down-white.svg);
	background-size: auto;
	background-size: 100%;
	text-align: center;
	display: block;
	top: 3px;
	left: 2px;
}

#dropdownLangdesk {
	position: relative;
	padding-right: 30px;
	margin-top: 1px;
	background: transparent none;
	color: #fff;
	font-size: 17px;
	line-height: 37px;
	font-family: "Mulish-Bold", sans-serif;
	letter-spacing: 0.4px;
	margin-left: 10px;
	margin-right: 8px;
}

#dropdownLangdesk:focus {
	outline: none !important;
	box-shadow: none !important;
}

#dropdownLangdesk::after {
	content: " ";
	width: 22px;
	height: 22px;
	background: url(../images/global-white.svg);
	background-size: auto;
	background-size: 100%;
	border: 0px;
	top: 15px;
	position: absolute;
	right: 0px;
}

.dropdown-menu-ds {
	width: 82px !important;
	min-width: 64px;
	padding: 0px 10px;
	text-align: center;
	top: -2px;
	z-index: 3;
}

.dropdown-menu-ds:hover {
	background-color: #f8f9fa;
}

.dropdown-menu-ds a {
	padding: 6px 6px !important;
	font-size: 16px;
	font-weight: 600;
	color: #363636;
}

.dropdown-menu-ds a:hover,
.dropdown-menu-ds a:focus {
	background: transparent none;
	color: #363636;
}

#navbar-yappika ul li a:hover {
	text-decoration: none;
	outline: none !important;
}

#navbar-yappika ul li a:focus {
	text-decoration: none;
	outline: none !important;
	color: #fff !important;
}

#navbar-yappika ul li .dropdown-menu a {
	color: #363636;
	font-size: 14px;
	line-height: 22px;
	font-family: 'Rubik-Medium', sans-serif;
	letter-spacing: 0.35px;
	font-weight: 200;
	padding-top: 8.5px;
	padding-bottom: 9px;
	white-space: unset !important;
}

#navbar-yappika .navbar-nav li:hover>ul.dropdown-menu {
	display: block;
	border-image-source: linear-gradient(0deg, rgba(221, 221, 221, 1) 54%, rgba(255, 255, 255, 0) 100%);
	border-image-slice: 1;
	border-bottom-left-radius: 1px;
	border-bottom-right-radius: 1px;
	height: auto;
	max-width: 325px;
	min-width: 280px;
	width: auto;
	margin-top: -5px;
}

#navbar-yappika .navbar-nav li:hover>ul.dropdown-menu li {
	width: 100%;
	height: auto;
	display: block;
	overflow: hidden;
}

#navbar-yappika .navbar-nav li:hover>ul.dropdown-menu li a {
	white-space: unset;
}

#navbar-yappika .navbar-nav li:hover>ul.dropdown-menu li a:focus {
	background: #e32028 !important;
	color: #fff;
}

.slideIn {
	-webkit-animation-name: slideIn;
	animation-name: slideIn;
}

.animate {
	animation-duration: 0.3s;
	-webkit-animation-duration: 0.3s;
	animation-fill-mode: both;
	-webkit-animation-fill-mode: both;
}

.navbar-nav li:hover>ul.first-level {
	border-top: 12px solid transparent;
}

@keyframes slideIn {
	0% {
		transform: translateY(1rem);
		opacity: 0;
	}

	100% {
		transform: translateY(0rem);
		opacity: 1;
	}

	0% {
		transform: translateY(1rem);
		opacity: 0;
	}
}

@-webkit-keyframes slideIn {
	0% {
		-webkit-transform: transform;
		-webkit-opacity: 0;
	}

	100% {
		-webkit-transform: translateY(0);
		-webkit-opacity: 1;
	}

	0% {
		-webkit-transform: translateY(1rem);
		-webkit-opacity: 0;
	}
}

.slideIn {
	-webkit-animation-name: slideIn;
	animation-name: slideIn;
}

a.btn-form-donation {
	color: #fff;
	background: #5a79bc;
	text-align: center;
	width: 100%;
	display: block;
	padding: 15px 10px;
	letter-spacing: 0.4px;
	font-family: "Rubik-SemiBold", sans-serif;
	border-radius: 8.5px;
	position: relative;
	margin-top: -1px;
}

a.btn-form-donation img {
	margin-right: 10px;
	position: relative;
	margin-top: -3.2px;
}

a.btn-form-donation:hover {
	color: #fff;
	text-decoration: none;
	background: #5a79bc;
}

a.btn-form-donation:focus {
	color: #fff;
	text-decoration: none;
	background: #5a79bc;
	box-shadow: none !important;
}

.csr-only {
	height: auto;
}

/* NAVBAR DESKTOP END ONLY */
/* HEADER DESKTOP VERSION */

.section-list-primary {
	width: 100%;
	height: auto;
	min-height: 643px;
	background-color: #fff;
	background-size: 101% !important;
	padding: 80px 0px 24px 0px;
	background-repeat: no-repeat !important;
	margin-top: 0px;
	position: relative;
	overflow: hidden;
}

.section-list-primary::before {
	width: 100vw;
	height: 320px;
	content: " ";
	position: absolute;
	z-index: 1;
	left: 0px;
	bottom: 0px;
	/* RED GRADIENT
	background: -moz-linear-gradient(top,  rgba(216,26,31,0) 0%, rgba(203,6,12,1) 100%);
	background: -webkit-linear-gradient(top,  rgba(216,26,31,0) 0%,rgba(203,6,12,1) 100%);
	background: linear-gradient(to bottom,  rgba(216,26,31,0) 0%,rgba(203,6,12,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00d81a1f', endColorstr='#cb060c',GradientType=0 ); 
	RED GRADIENT	 */
	/* BLACK GRADIENT */
	background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
	background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#a6000000', GradientType=0);
	/* BLACK GRADIENT*/
}

.section-list-primary::after {
	width: 100vw;
	height: 220px;
	content: " ";
	position: absolute;
	z-index: 1;
	left: 0px;
	bottom: 0px;
	/* RED GRADIENT
	background: -moz-linear-gradient(top,  rgba(216,26,31,0) 0%, rgba(203,6,12,1) 100%);
	background: -webkit-linear-gradient(top,  rgba(216,26,31,0) 0%,rgba(203,6,12,1) 100%);
	background: linear-gradient(to bottom,  rgba(216,26,31,0) 0%,rgba(203,6,12,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00d81a1f', endColorstr='#cb060c',GradientType=0 ); 
	RED GRADIENT	 */
	/* BLACK GRADIENT */
	background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
	background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#a6000000', GradientType=0);
	/* BLACK GRADIENT*/
}

.wrp-image-support-campaign {
	width: 100%;
	height: auto;
	height: 100%;
	position: absolute;
	background-image: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%);
}

.primary-image-campaign {
	max-width: 105%;
	width: auto;
	position: absolute;
	top: 0px;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
}

.section-header-step {
	min-height: 67.0167px;
	max-height: 67.0167px;
	width: 100%;
	box-shadow: 0 1px 14px rgba(0, 0, 0, 0.02);
	-ms-box-shadow: 0 1px 14px rgba(0, 0, 0, 0.02);
	top: 0px;
	z-index: 9;
	background: #e32028;
	top: 0px;
	left: 0px;
	color: #fff;
	z-index: 14;
	position: sticky;
}

.wrp-flex-logo {
	display: flex;
	flex: wrap;
	justify-content: center;
	-ms-justify-content: center;
	height: 67.0167px;
	align-items: center;
	-ms-align-items: center;
}

.justify-logo-center {
	flex: 0 0 152px;
	-ms-flex: 0 0 152px;
	max-width: 152px;
	min-height: 56.02px;
}

.section-for-bg-cover-campaign {
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0px;
	overflow: hidden;
}

img.for-bg-cover-campaign {
	/* max-width: 112%;
	width: 112%; */
	max-width: 132%;
	width: 132%;
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	left: -8%;
	right: 0;
	text-align: center;
}

/* .col-zd-5 {
    -ms-flex: 0 0 35%;
    flex: 0 0 35%;
    max-width: 35%;
}

.col-zd-7 {
    -ms-flex: 0 0 65%;
    flex: 0 0 65%;
    max-width: 65%;
} */

.col-zd-7 {
	-ms-flex: 0 0 100%;
	flex: 0 0 100%;
	max-width: 100%;
}

.col-zd-5 {
	-ms-flex: 0 0 100%;
	flex: 0 0 100%;
	max-width: 100%;
	position: relative;
	z-index: 3;
}


.col-zd-62 {
	-ms-flex: 0 0 62%;
	flex: 0 0 62%;
	max-width: 62%;
	padding-right: 36px;
	padding-left: 48px;
}

.col-zd-38 {
	-ms-flex: 0 0 38%;
	flex: 0 0 38%;
	max-width: 38%;
	padding-left: 56px;
	padding-right: 48px;
}

.col-sp-62 {
	-ms-flex: 0 0 62%;
	flex: 0 0 62%;
	max-width: 62%;
	padding-right: 76px;
	padding-left: 48px;
}

.col-sp-38 {
	-ms-flex: 0 0 38%;
	flex: 0 0 38%;
	max-width: 38%;
	padding-left: 20px;
	padding-right: 48px;
	position: relative;
}

.other-cta-support {
	width: 100%;
	height: auto;
	min-height: 1px;
	padding: 10px 0px 0px 0px;
	margin-top: 4px;
	text-align: center;
	font-family: "Mulish-Regular", sans-serif;
	font-size: 15px;
	line-height: 16px;
	letter-spacing: 0.25px;
	color: #16182c;
}

.donatur-campaign {
	width: 100%;
	height: auto;
	padding: 0px 0px 15px 0px;
}

.wrp-donatur-item {
	width: 100%;
	height: auto;
	padding: 6px 15px 6pc 0px;
	height: 836px;
	margin-bottom: 46px;
}

.wrp-prayer-item {
	width: 100%;
	height: auto;
	padding: 8px 15px 6px 0px;
	/* height: 850px; */
	height: 256px;
	margin-bottom: 10px;
}

.ss-container .ss-scroll {
	opacity: 0.05;
}

.yDonatur .ss-wrapper {
	overflow: hidden;
	height: 112%;
}

.ss-container:hover .ss-scroll {
	opacity: 1;
}

.ss-scroll {
	position: relative;
	background: rgba(227, 32, 40, 1);
	width: 9px;
	height: 48% !important;
	border-radius: 4px;
	top: 10px;
	z-index: 2;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.25s linear;
}

.list-wrp-donatur {
	height: 100vh;
}

.ss-content {
	width: calc(100% + 17px);
}


.left-head-donation {
	position: relative;
	padding: 12px 0px 2px 74px;
	font-family: "Mulish-Regular", sans-serif;
}

.circle-donatur {
	width: 45px;
	height: 45px;
	border-radius: 22.5px;
	background: #f9c6ca;
	overflow: hidden;
	position: absolute;
	left: 12px;
	top: 10px;
	text-align: center;
}

.circle-donatur img {
	max-width: 100%;
	width: auto;
}

.left-head-donation h5 {
	font-family: "Mulish-Bold", sans-serif;
	font-size: 16px;
	line-height: 20px;
	margin-bottom: 4px;
	letter-spacing: 0.35px;
	color: #393939;
}

.left-head-donation p {
	font-family: "Mulish-SemiBold", sans-serif;
	font-size: 13px;
	line-height: 18px;
	color: #7c7c7c;
	margin-bottom: 5px;
}

.left-head-donation p span {
	font-family: "Mulish-Bold", sans-serif;
	font-size: 17px;
	line-height: 21px;
	color: #d81a1f;
}

.right-head-donation {
	font-family: "Mulish-SemiBold", sans-serif;
	font-size: 17px;
	line-height: 21px;
	color: #7c7c7c;
	padding: 12px 0px 2px 0px;
}

.right-head-donation p {
	line-height: 20px;
	margin-bottom: 5px;
}

.donatur-card {
	width: 100%;
	height: auto;
	margin-bottom: 18px;
	/* border: 1px solid #f5f5f5; */
	border: 1px solid #efefef;
	border-radius: 9.5px;
	overflow: hidden;
	min-height: 180px;
}

.for-mobile-sorting {
	min-height: 92px;
}

.donation-box {
	min-height: 9px;
}

.wrap-desc-campaign {
	min-height: 126px;
}

.wrap-desc-campaign {
	font-family: "Mulish-Regular", sans-serif;
	font-size: 17.5px;
	line-height: 25px;
	letter-spacing: 0.25px;
	color: #71716c;
	padding-right: 24px;
	padding-bottom: 6px;
	width: 100%;
	clear: both;
}

.wrap-desc-campaign a {
	color: #e32028;
	text-decoration: none;
}

.wrap-desc-campaign a:hover {
	color: #e32028;
	text-decoration: underline;
}

.wrap-desc-campaign a:focus {
	color: #e32028;
	outline: none;
}

.wrap-desc-campaign h1 {
	font-size: 30px;
	line-height: 36.5px;
	font-family: 'Rubik-Medium', sans-serif;
	margin-bottom: 26px;
	color: #393939;
}

.wrap-desc-campaign h2 {
	font-size: 26px;
	line-height: 34.5px;
	font-family: 'Rubik-Medium', sans-serif;
	margin-bottom: 24px;
	color: #393939;
}

.wrap-desc-campaign h3 {
	font-size: 24px;
	line-height: 31.5px;
	font-family: 'Rubik-Medium', sans-serif;
	margin-bottom: 22px;
	color: #393939;
}

.wrap-desc-campaign h4 {
	font-size: 22px;
	line-height: 28.5px;
	font-family: 'Rubik-Medium', sans-serif;
	margin-bottom: 22px;
	color: #393939;
}

.wrap-desc-campaign h5 {
	font-size: 18px;
	line-height: 23.5px;
	font-family: 'Rubik-Medium', sans-serif;
	margin-bottom: 20px;
	color: #393939;
}

.wrap-desc-campaign h6 {
	font-size: 16px;
	line-height: 21.5px;
	font-family: 'Rubik-Medium', sans-serif;
	margin-bottom: 20px;
	color: #393939;
}

.wrap-desc-campaign b {
	font-family: "Rubik-Medium", sans-serif;
	font-weight: unset;
}

.wrap-desc-campaign p b {
	color: #393939;
	font-family: "Rubik-Medium", sans-serif;
	font-weight: unset;
}

.wrap-desc-campaign ul {
	list-style-type: disc;
	padding-left: 20px;
}

.wrap-desc-campaign ul li {
	padding-left: 8px;
	line-height: 22.5px;
	margin-bottom: 6.5px;
}

.wrap-desc-campaign li p {
	line-height: 22.5px;
	margin-bottom: inherit;
}

.wrap-desc-campaign ol {
	list-style-type: decimal;
	padding-left: 20px;
}

.wrap-desc-campaign ol li {
	padding-left: 8px;
	line-height: 22.5px;
	margin-bottom: 6.5px;
}

.wrap-desc-campaign li p {
	line-height: 22.5px;
	margin-bottom: inherit;
}

.head-card-donatur {
	width: 100%;
	height: auto;
	overflow: hidden;
	padding: 10px 15px;
	background: #fff;
}

.quote-or-pray {
	width: 100%;
	height: auto;
	padding: 24px 30px;
	font-family: "Mulish-Regular", sans-serif;
	font-size: 15px;
	line-height: 24px;
	letter-spacing: 0.2px;
	color: #71716c;
	min-height: 200px;
	min-height: 76px;
}


/* BIRTHDAY */

.birthday-saved {
	width: 100%;
	height: auto;
	font-family: "Mulish-Regular", sans-serif;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 0.1px;
	color: #71716c;
}

.img-birthday-saved {
	width: 100%;
	height: auto;
	font-family: "Mulish-Regular", sans-serif;
	font-size: 14px;
	line-height: 20px;
	text-align: center;
	padding: 15px 110px;
}

.img-birthday-saved img {
	max-width: 100%;
	width: auto;
}

.title-succes-step {
	width: 100%;
	height: auto;
	font-family: "Mulish-Regular", sans-serif;
	font-size: 13px;
	line-height: 20px;
	color: #71716c;
	text-align: center;
}

.title-succes-step h3 {
	font-family: "Rubik-Regular", sans-serif;
	color: #5a79bc;
	font-size: 24px;
	line-height: 30px;
	margin-bottom: 5px;
}

.title-fail-step {
	width: 100%;
	height: auto;
	font-family: "Mulish-Regular", sans-serif;
	font-size: 13px;
	line-height: 20px;
	color: #71716c;
	text-align: center;
}

.desc-message-fail {
	width: 100%;
	height: auto;
	font-family: "Mulish-Regular", sans-serif;
	font-size: 14px;
	line-height: 23px;
	color: #71716c;
	text-align: center;
	padding: 10px 25px;
}

.desc-message-fail h5 {
	font-family: "Rubik-Medium", sans-serif;
	color: #202020;
	font-size: 16px;
	line-height: 22px;
	margin-bottom: 30px;
}

.donor-service-official {
	width: 100%;
	height: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	-ms-justify-content: center;
}

.flexing-button-donor {
	display: flex;
	flex: 0 0 86%;
	-ms-flex: 0 0 86%;
}

.donor-service-official a {
	display: block;
	width: 100%;
	font-size: 15.5px;
	line-height: 24px;
	padding: 13.5px 4px;
	text-align: center;
}

.donor-service-official a.donor-call {
	font-family: "Rubik-Regular", sans-serif;
	color: #a7a7a5;
	border: 1px solid #dfdfdf;
	border-radius: 8px;
	margin-bottom: 12.5px;
	text-align: center;
}

.donor-call svg {
	width: 18.5px;
	height: 18.5px;
	fill: #a7a7a5;
	margin-right: 6.5px;
}

.donor-mail svg {
	width: 20px;
	height: 20px;
	fill: #a7a7a5;
	margin-right: 8.5px;
}

.donor-service-official a.donor-mail {
	font-family: "Rubik-Regular", sans-serif;
	color: #a7a7a5;
	border: 1px solid #dfdfdf;
	border-radius: 8px;
}

.title-fail-step h3 {
	font-family: "Rubik-Regular", sans-serif;
	color: #e32028;
	font-size: 24px;
	line-height: 30px;
	margin-bottom: 5px;
}

.desc-message-succes {
	width: 100%;
	height: auto;
	font-family: "Mulish-Regular", sans-serif;
	font-size: 14px;
	line-height: 23px;
	color: #71716c;
	text-align: center;
	padding: 10px 25px;
}

.desc-message-succes h5 {
	font-family: "Rubik-Medium", sans-serif;
	color: #202020;
	font-size: 16px;
	line-height: 20px;
	margin-bottom: 12px;
}

.help-center {
	width: 100%;
	height: auto;
	font-family: "Mulish-Regular", sans-serif;
	font-size: 14px;
	line-height: 23px;
	color: #71716c;
	text-align: center;
	padding: 10px 25px;
}

.help-center p {
	font-family: "Mulish-Regular", sans-serif;
	font-size: 14px;
	line-height: 23px;
	color: #71716c;
	text-align: center;
	margin-bottom: 12px;
}

.help-center p:first-child {
	margin-top: 24px;
	margin-bottom: 10px;
}

.social-media-share {
	width: 100%;
	height: auto;
	font-family: "Mulish-Regular", sans-serif;
	font-size: 14px;
	line-height: 23px;
	color: #71716c;
	text-align: center;
	padding: 10px 25px;
}

.social-media-share h4 {
	font-family: "Rubik-Medium", sans-serif;
	color: #202020;
	font-size: 18px;
	line-height: 20px;
	margin-bottom: 12px;
}

.social-share-link {
	width: 100%;
	height: auto;
	font-family: "Mulish-Regular", sans-serif;
}

.social-share-link ul {
	outline: none;
	width: 100%;
	height: auto;
	list-style: none;
}

.social-share-link ul li {
	outline: none;
	width: 36px;
	height: auto;
	min-height: 36px;
	text-align: center;
	border-radius: 19px;
	list-style: none;
	display: inline-block;
	margin-left: 5px;
	margin-right: 5px;
}

.form-switch .form-check-input:checked {
	background-color: #5a79bc;
	border-color: #5a79bc;
}

.st-custom-button {
	cursor: pointer;
}

.social-share-link ul li a {
	width: 24px;
	height: auto;
	min-height: 24px;
}

.social-share-link ul li a svg {
	max-width: 100%;
}


.birthday {
	width: 100%;
	height: auto;
}

.agreement-form {
	height: auto;
	font-family: "Mulish-Regular", sans-serif;
	font-size: 13px;
	line-height: 19px;
	letter-spacing: 0.1px;
	color: #71716c;
}


.check {
	display: block;
	position: relative;
	padding-left: 32px;
	margin-top: -24px;
	padding-right: 15px;
	cursor: pointer;
	font-size: 18px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	font-family: 'Mulish-Regular', sans-serif;
	font-size: 13px;
	line-height: 19px;
	letter-spacing: 0.4px;
	color: #71716c;
}

/* Hide the browser's default checkbox */
.check input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
}

.checkbox p {
	margin-bottom: 6px;
}

/* Create a custom checkbox */
.checkmark {
	position: absolute;
	top: 3px;
	left: 0;
	height: 20px;
	width: 20px;
	background-color: #fff;
	border-color: #5a79bc;
	border-style: solid;
	border-width: 2px;
	border-radius: 2px;
}


.check input:checked~.checkmark {
	background-color: #fff;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}

/* Show the checkmark when checked */
.check input:checked~.checkmark:after {
	display: block;
}

/* Style the checkmark/indicator */
.check .checkmark:after {
	left: 5px;
	top: 3px;
	width: 5px;
	height: 10px;
	border: solid;
	border-color: #5a79bc;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}




/* BIRTHDAY END */

/* new donatur-card-only  */
.donatur-card-only {
	width: 100%;
	height: auto;
	margin-bottom: 18px;
	padding-bottom: 13px;
	border: 1px solid #efefef;
	border-radius: 9.5px;
	overflow: hidden;
	min-height: 65px;
}

.circle-donatur-60 {
	width: 45px;
	height: 45px;
	border-radius: 27.5px;
	background: #f9c6ca;
	overflow: hidden;
	position: absolute;
	left: 12px;
	top: 18px;
	text-align: center;
}

.circle-donatur-60 img {
	max-width: 100%;
	width: auto;
}

.donatur-name-value {
	position: relative;
	padding-left: 64px;
	min-height: 60px;
}

.name-and-value {
	width: 100%;
	height: auto;
	padding: 14px 10px 0px 10px;
	font-family: "Mulish-Regular", sans-serif;
	font-size: 13px;
	line-height: 18px;
	letter-spacing: 0.2px;
	color: #71716c;
}

.name-and-value p {
	margin-bottom: 4px;
	margin-top: 4px;
}

.name-and-value p span {
	font-family: "Mulish-ExtraBold", sans-serif;
	letter-spacing: 0.30px;
	color: #393939;
}

.name-and-value h5 {
	font-family: "Mulish-Bold", sans-serif;
	font-size: 16px;
	line-height: 20px;
	margin-bottom: 4px;
	margin-top: 0px;
	letter-spacing: 0.35px;
	color: #393939;
}

/* new donatur-card-only  */

.quote-or-pray h6 {
	font-family: "Mulish-Bold", sans-serif;
	font-size: 17px;
	line-height: 22px;
	margin-bottom: 4px;
	letter-spacing: 0.35px;
	color: #606060;
	margin-bottom: 15px;
	padding-right: 24px;
	position: relative;
}

.dropdown-menu-mm {
	width: 74px !important;
	min-width: 64px;
	padding: 0px 6px;
}

.dropdown-menu-mm a {
	background: #fff;
	color: #363636;
	font-size: 16px;
	line-height: 20px;
	font-family: "Mulish-Bold", sans-serif;
	letter-spacing: 0.35px;
	text-align: center;
	padding: 5px 4px;
}

.label-pray {
	height: auto;
}

.label-pray h6 {
	font-family: "Mulish-Bold", sans-serif;
	font-size: 17px;
	line-height: 22px;
	margin-bottom: 4px;
	letter-spacing: 0.35px;
	color: #292929;
	margin-bottom: 15px;
	padding-right: 24px;
	position: relative;
}

.date-donation {
	height: auto;
	text-align: right;
}

.date-donation p {
	font-family: "Mulish-Bold", sans-serif;
	font-size: 16px;
	line-height: 24px;
	margin-bottom: 4px;
	letter-spacing: 0.25px;
	color: #606060;
	margin-bottom: 15px;
	padding-right: 8px;
	position: relative;
}

.quote-or-pray p {
	margin-bottom: 8px;
}

.load-donatur {
	width: 100%;
	height: auto;
	text-align: center;
	padding: 5px 0px 32px 0px;
	clear: both;
	display: block;
}

.load-donatur a.btn-load-donatur {
	background: #fff;
	color: #d81a1f;
	border: 2px solid #d81a1f;
	border-radius: 9.5px;
	padding: 16px 36px;
	min-width: 176px;
	font-family: "Mulish-SemiBold", sans-serif;
	margin-top: 6px;
	display: block;
	text-decoration: none;
}

.load-donatur a.btn-load-donatur:hover {
	box-shadow: 0 10px 29px 0 rgba(124, 5, 5, 0.09);
	box-shadow: 0 0px 29px 0 rgba(124, 5, 5, 0.09);
	-ms-box-shadow: 0 0px 29px 0 rgba(124, 5, 5, 0.09);
}

.home-landing-page {
	width: 100%;
	height: auto;
}

.error-message {
	font-family: "Rubik-Regular", sans-serif;
	font-size: 14px;
	line-height: 20px;
	color: #d81a1f;
}

.error-message p {
	margin-bottom: 14px;
	margin-top: -6px;
	position: relative;
}

.home-landing-page .wrap-form-donation {
	position: relative;
	top: 0px;
	box-shadow: 0 1px 14px rgba(0, 0, 0, 0.11);
	border-radius: 15px;
}

.nav-of-donation li {
	overflow: hidden;
	width: 50%;
	background: #fff;
	color: #606060;
	border: 2px solid #fff !important;
	border-radius: 13px;
}

.nav-of-donation li a {
	text-align: center;
	border: 0;
	color: #606060;
	font-family: "Mulish-Bold", sans-serif;
	font-size: 15px;
	line-height: 18px;
	padding: 18px 10px;
}

.nav-of-donation li a:hover {
	color: #606060;
}

.nav-of-donation .nav-link.active {
	background: #d81a1f;
	color: #fff;
}

.secure-guarante {
	font-family: "Mulish-Regular", sans-serif;
	font-size: 14px;
	line-height: 18px;
	letter-spacing: 0.25px;
	color: #fff;
	padding-top: 15px;
	padding-bottom: 10px;
}

.secure-guarante p {
	font-family: "Mulish-Regular", sans-serif;
	font-size: 12px;
	line-height: 18px;
	letter-spacing: 0.2px;
	position: relative;
	padding: 4px 0px 6px 28px;
}

.secure-guarante p span {
	margin-bottom: 10px;
	position: absolute;
	left: 0px;
	top: 1px;
}

.wrp-primary-campaign {
	width: 96%;
	height: auto;
	font-family: "Mulish-Regular", sans-serif;
	font-size: 17.5px;
	line-height: 22px;
	padding-right: 125px;
}

.wrp-primary-campaign h2 {
	font-family: "Rubik-SemiBold", sans-serif;
	font-size: 36.5px;
	line-height: 38px;
	color: #fff;
	letter-spacing: 0.35px;
	margin-bottom: 18px;
	position: relative;
	margin-top: -86px;
}

.section-list-secondary {
	width: 100%;
	min-height: 536px;
	height: auto;
	background-size: 100% !important;
	padding: 90px 0px 24px 0px;
	background-repeat: no-repeat !important;
	margin-top: -2px;
}

.wrp-primary-campaign p {
	font-family: "Mulish-Regular", sans-serif;
	font-size: 17.5px;
	line-height: 22px;
	margin-bottom: 8px;
	color: #fff;
}

.wrp-primary-campaign p a {
	color: #d81a1f;
	text-decoration: none;
	outline: none;
}

.wrp-primary-campaign p a:hover {
	color: #d81a1f;
	text-decoration: underline;
}

.title-primary-campaign {
	width: 100%;
	height: auto;
	padding-right: 48px;
	font-family: "Mulish-Regular", sans-serif;
	font-size: 17.5px;
	line-height: 22px;
}

.title-primary-campaign h3 {
	font-family: "Rubik-SemiBold", sans-serif;
	font-size: 32px;
	line-height: 38px;
	letter-spacing: 0.3px;
	color: #d81a1f;
	margin-top: 24px;
	margin-bottom: 30px;
}

.btn-red-donation {
	background: #d81a1f;
	color: #fff;
	padding: 16px 48px;
	font-family: "Rubik-SemiBold", sans-serif;
	font-size: 14.5px;
	line-height: 20px;
	letter-spacing: 0.45px;
	min-width: 225px;
}

.btn-red-donation:hover {
	color: #f5f5f5;
	box-shadow: 6px -1px 29px rgba(0, 0, 0, 0.15);
	background: #e32028;
}

.m-floting-donation {
	display: none;
}

.section-detail-banner {
	width: 100%;
	height: auto;
	min-height: 620px;
	background: #fff;
	background-size: 100% !important;
	padding: 90px 0px 24px 0px;
	background-repeat: no-repeat !important;
	margin-top: -32px;
	position: relative;
}

.wrp-form-donation {
	background: #fff;
	/* border: 1px solid #dedede; */
	border: 1px solid #fff;
	/* min-height: 286px; */
	min-height: 235px;
	width: 100%;
	padding: 6px 30px 0px 30px;
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
}

.wrap-form-donation {
	width: 100%;
	height: auto;
}

.title-section-campaign {
	height: auto;
}

.title-section-campaign h3 {
	color: #393939;
	font-size: 20px;
	font-family: 'Rubik-SemiBold', sans-serif;
	line-height: 25px;
	margin-bottom: 2px;
}

.wrap-campaign-title {
	width: 100%;
	height: auto;
	padding-right: 24px;
}

.donation-items-mobile {
	display: none;
}

.wrap-campaign-title h2 {
	color: #363636;
	font-size: 26px;
	line-height: 34.5px;
	font-family: 'Rubik-SemiBold', sans-serif;
	margin-bottom: 24px;
}

.wrap-desc-campaign {
	font-family: "Mulish-Regular", sans-serif;
	font-size: 17.5px;
	line-height: 27px;
	letter-spacing: 0.10px;
	color: #71716c;
	padding-right: 24px;
	padding-bottom: 6px;
	width: 100%;
	clear: both;
}

.wrap-desc-campaign p {
	margin-bottom: 25px;
}

.story-image-thumbnail {
	width: 100%;
	height: auto;
	margin-top: 30px;
	margin-bottom: 30px;
}

.first-top-of-form {
	font-family: "Rubik-Medium", sans-serif;
	font-size: 15px;
	line-height: 22px;
	color: #393939;
	position: relative;
	padding: 24px 10px 1px 34px;
	/* border: 1px solid #dedede; */
	background: #fff;
	border-top-right-radius: 15px;
	border-top-left-radius: 15px;
	position: relative;
	border-left: 1px solid #dedede;
	border-right: 1px solid #dedede;
	border-top: 1px solid #dedede;
}

.first-top-of-form p {
	margin-bottom: 0px;
}

.top-of-form {
	font-family: "Rubik-Medium", sans-serif;
	font-size: 15px;
	line-height: 22px;
	color: #606060;
	position: relative;
	padding: 15px 15px 15px 56px;
	border: 1px solid #dedede;
	border-bottom: 0px;
	background: #fff;
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
	position: relative;
}

.top-of-form p {
	margin-bottom: 2px;
}

.top-of-form p span {
	font-family: "Rubik-Bold", sans-serif;
	font-size: 16px;
	line-height: 20px;
	color: #d81a1f;
}


/* MODAL DIALOG FORM DESKTOP START */

#modalFormDonation .modal-dialog-form {
	height: auto;
	border-top-right-radius: 25.5px !important;
	border-top-left-radius: 25.5px !important;
	border-bottom-right-radius: 25.5px !important;
	border-bottom-left-radius: 25.5px !important;
	-ms-border-top-right-radius: 25.5px !important;
	-ms-border-top-left-radius: 25.5px !important;
	-ms-border-bottom-right-radius: 25.5px !important;
	-ms-border-bottom-left-radius: 25.5px !important;
	overflow: hidden !important;
}

#modalFormDonation .modal-dialog-form .modal-content {
	overflow: hidden !important;
	border-top-right-radius: 25.5px !important;
	border-top-left-radius: 25.5px !important;
}

#mobileFormDonation .modal-dialog-form {
	height: auto;
	border-top-right-radius: 25.5px !important;
	border-top-left-radius: 25.5px !important;
	border-bottom-right-radius: 25.5px !important;
	border-bottom-left-radius: 25.5px !important;
	-ms-border-top-right-radius: 25.5px !important;
	-ms-border-top-left-radius: 25.5px !important;
	-ms-border-bottom-right-radius: 25.5px !important;
	-ms-border-bottom-left-radius: 25.5px !important;
	overflow: hidden !important;
}

#mobileFormDonation .modal-dialog-form .modal-content {
	overflow: hidden !important;
	border-top-right-radius: 25.5px !important;
	border-top-left-radius: 25.5px !important;
}


.modal-header-donation {
	position: relative;
	border-bottom: 0px;
	background: transparent none;
	padding-top: 1px;
	padding-bottom: 1px;
	padding: 1px 30px;
	min-height: 64px;
	border-bottom: 1px solid #f9f9f8;
	font-family: "Rubik-Medium", sans-serif;
	border-top-right-radius: 25.5px !important;
	border-top-left-radius: 25.5px !important;
}

.modal-header-donation .close {
	background: #fff;
	text-align: center;
	width: 40px;
	border-radius: 25px;
	height: 40px;
	overflow: hidden;
	z-index: 2;
	opacity: 1;
	line-height: 6px;
	box-shadow: 0 1px 14px rgba(0, 0, 0, 0.11);
	right: 24px;
	position: absolute;
	top: 12px;
}

.modal-header-donation a img {
	width: 14px;
	cursor: pointer;
	margin-left: 0px;
	margin-top: 12px;
}

.modal-header-donation h2 {
	font-family: "Rubik-Medium", sans-serif;
	color: #363636;
	font-size: 17px;
	line-height: 21px;
	margin-top: 5px;
	width: 90%;
}

.modal-body-form-donate {
	padding: 15px 30px;
	min-height: 520px;
	height: auto;
	font-family: "Mulish-Regular", sans-serif;
}

.modal-header-petisi {
	position: relative;
	border-bottom: 0px;
	background: transparent none;
	padding-top: 1px;
	padding-bottom: 1px;
	padding: 1px 30px;
	min-height: 64px;
	border-bottom: 1px solid #f9f9f8;
	font-family: "Rubik-Medium", sans-serif;
	border-top-right-radius: 25.5px !important;
	border-top-left-radius: 25.5px !important;
	display: flex;
	flex-wrap: wrap;
}

.modal-header-petisi h2 {
	font-family: "Rubik-Medium", sans-serif;
	color: #363636;
	font-size: 16px;
	line-height: 20px;
	margin-top: 5px;
	margin-bottom: 13px;
	max-width: 91%;
	text-align: center;
	flex: 0 0 91%;
	-ms-flex: 0 0 91%;
}

.modal-header-petisi h3 {
	font-family: "Rubik-Medium", sans-serif;
	color: #363636;
	font-size: 18px;
	line-height: 19px;
	margin-top: 15px;
	margin-bottom: 2px;
	max-width: 91%;
	text-align: center;
	flex: 0 0 91%;
	-ms-flex: 0 0 91%;
}

.wrap-support-title {
	display: none;
}

.modal-header-petisi .close {
	background: #fff;
	text-align: center;
	width: 40px;
	border-radius: 25px;
	height: 40px;
	overflow: hidden;
	z-index: 2;
	opacity: 1;
	line-height: 6px;
	box-shadow: 0 1px 14px rgba(0, 0, 0, 0.11);
	right: 22px;
	position: absolute;
	top: 18px;
}

.instruction-va {
	width: 100%;
	height: auto;
	font-family: "Mulish-Regular", sans-serif;
	font-size: 14px;
	line-height: 23px;
	color: #71716c;
	text-align: left;
}

.instruction-va ol {
	padding-left: 15px;
}

.instruction-va ol li {
	padding-left: 13px;
}

.instruction-va ol li p {
	margin-bottom: 8px;
}

.instruction-va ol li p a {
	font-family: "Mulish-SemiBold", sans-serif;
	color: #5a79bc;
	text-decoration: none;
}

.instruction-va ol li p a:hover {
	text-decoration: underline;
}

.modal-header-petisi a img {
	width: 14px;
	cursor: pointer;
	margin-left: 0px;
	margin-top: 12px;
}

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

.m-col-100 {
	flex: 0 0 100%;
	-ms-flex: 0 0 100%;
	max-width: 100%;
}

.donation-form-action {
	height: auto;
}

.donation-form-action .recuring input[type="radio"] {
	opacity: 0;
	position: fixed;
	width: 0;
	font-weight: 500;
	position: absolute;
}

.m-area-amount input[type="radio"] {
	opacity: 0;
	position: fixed;
	width: 0;
	font-weight: 500;
	position: absolute;
}

.donation-form-action .m-recuring label {
	display: inline-block;
	background-color: #fff;
	padding: 17px 5px;
	font-family: "Mulish-SemiBold", sans-serif;
	font-size: 14px;
	font-weight: 500;
	border: 1px solid #dedede;
	border-radius: 9px;
	width: 100%;
	color: #444;
	text-align: center;
	cursor: pointer;
	margin-bottom: 15px;
}

.donation-form-action .m-recuring input[type="radio"]:checked+label {
	background: #d81a1f;
	border: 1px solid #d81a1f;
	color: #fff;
	font-family: "Mulish-Bold", sans-serif !important;
}




.label-choose-others {
	width: 100%;
	height: auto;
	font-family: "Rubik-Medium", sans-serif;
	color: #393939;
	position: relative;
	text-align: center;
	min-height: 36px;
	padding: 1px 0px 10px;
	overflow: hidden;
	margin-bottom: 6px;
}

.label-choose-others::before {
	position: absolute;
	width: 100%;
	height: 1px;
	background: #dfdfdf;
	top: 12.5px;
	left: 0px;
	z-index: 2;
	content: " ";
}

.label-choose-others p {
	position: relative;
	z-index: 3;
	width: unset;
	background: #fff;
	display: unset;
	padding-left: 10px;
	padding-right: 10px;
}

.m-input-nominal {
	font-size: 15px;
	color: #606060;
	font-family: "Mulish-SemiBold", sans-serif;
	margin-bottom: 20px;
}

.m-input-nominal>input {
	background: #f2f3f4;
	font-size: 15px;
	color: #606060;
	font-family: "Mulish-SemiBold", sans-serif;
	border-color: #f2f3f4;
	text-align: center;
	height: 56px !important;
	padding: 14px 15px !important;
	border-radius: 9px;
}

.choose-label-anonimous {
	width: 100%;
	height: auto;
	min-height: 36px;
	margin-top: 6.4px;
	position: relative;
	padding-left: 52px;
}

.choose-label-anonimous p b {
	font-family: "Mulish-ExtraBold", sans-serif;
	color: #363636;
	font-weight: unset;
	letter-spacing: 0.25px;
}

.switchs-option {
	position: absolute;
	left: 0px;
	top: -1.5px;
}

.switchs-option .form-check-input[type="checkbox"] {
	font-size: inherit !important;
	line-height: inherit !important;
}

.overflow-unset {
	overflow: unset;
}

.wrp-choosed-nominal {
	position: relative;
	margin-bottom: 10px;
}

.wrp-choosed-nominal span {
	margin-top: 5px;
}

.chosed-nominal {
	height: auto;
	z-index: 3;
	position: relative;
}

.wrp-choosed-nominal::before {
	height: 86px;
	width: 100vw;
	background: #f2f3f4;
	content: " ";
	position: absolute;
	left: -36px;
	top: -6px;
	z-index: 2;
}

.chosed-nominal>label {
	position: absolute;
	top: 10px;
}

.chosed-nominal>.form-control {
	border: 0px;
	border-color: transparent none;
	padding-left: 2px !important;
}

.chosed-nominal>.form-control:focus {
	border: 1px solid #AEAEAE;
	border-color: #AEAEAE !important;
	box-shadow: none !important;
}

.chosed-nominal>.form-control:not(:placeholder-shown)~label,
.form-floating>.form-select~label {
	opacity: .95;
	transform: scale(.90) translateY(-.9rem) translateX(-.6rem);
}

.chosed-nominal>.form-control {
	height: calc(4.5rem + 6px);
	padding: 1rem .75rem;
	color: #e32028;
	font-size: 26px;
	font-family: "Rubik-Medium", sans-serif;
	background: transparent none;
}

.choose-anonimous {
	color: #71716c;
	font-size: 15px;
	line-height: 20px;
	font-family: "Mulish-Regular", sans-serif;
}

.choose-label-anonimous p {
	/* margin: 5px 0px 10px 0px; */
	margin: 3px 0px 6px 0px;
	line-height: 19px;
}


/* FORM FLOATING REGULAR */

.form-floating-regular {
	margin-bottom: 20px;
}

.form-floating-regular input[type=number] {
	-moz-appearance: textfield;

}

.form-floating-regular input::-webkit-outer-spin-button,
.form-floating-regular input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.form-floating-birthday {
	margin-bottom: 20px;
}

.form-floating-birthday>.form-control,
.form-floating-birthday>.form-select {
	height: calc(3.5rem + 2px);
	padding: 10px 18px;
}

.form-floating-birthday>label {
	position: absolute;
	top: 0;
	left: 6px;
	height: 100%;
	padding: 1rem .75rem;
	pointer-events: none;
	border: 1px solid transparent;
	transform-origin: 0 0;
	transition: opacity .1s ease-in-out, transform .1s ease-in-out;
}

.form-floating-month>.form-control,
.form-floating-month>.form-select {
	height: calc(3.5rem + 2px);
	padding: 10px 18px;
}

.form-floating-month>label {
	position: absolute;
	top: 16.5px;
	left: 20px;
	height: 100%;
	padding: 1rem .75rem;
	pointer-events: none;
	border: 1px solid transparent;
	transform-origin: 0 0;
	transition: opacity .1s ease-in-out, transform .1s ease-in-out;
}

/* 
.form-floating-month: > .form-control:focus ~ label, .form-floating-month > .form-control:not(:placeholder-shown) ~ label, .form-floating-month:focus > .form-select ~ label {
    opacity: .65;
    transform: scale(.85) translateY(-.5rem) translateX(.15rem);
} */

.birthday-form-action {
	width: 100%;
	height: auto;
	margin-top: 30px;
}

.floating-label {
	position: relative;
	margin-bottom: 20px;
}

.floating-label-month {
	position: relative;
}

.floating-select-month {
	height: calc(3.5rem + 2px);
	padding: 10px 18px 0px 14px;
	background: #fff;
	border: 1px solid #ced4da;
	border-radius: 3px;
	width: 100%;
	background: #fff;
	background-color: rgb(255, 255, 255);
	background-image: none;
	border: 1px solid #ced4da;
	border-radius: 3px;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 1.1rem center;
	background-size: 16px 12px;
	border: 1px solid #ced4da;
	border-radius: .25rem;
	transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.floating-select-month:focus {
	border-color: #AEAEAE !important;
	box-shadow: none !important;
	text-shadow: none !important;
}

.floating-label-years {
	position: relative;
}

.floating-select-years {
	height: calc(3.5rem + 2px);
	padding: 10px 18px 0px 14px;
	background: #fff;
	border: 1px solid #ced4da;
	border-radius: 3px;
	width: 100%;
	background: #fff;
	background-color: rgb(255, 255, 255);
	background-image: none;
	border: 1px solid #ced4da;
	border-radius: 3px;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 1.1rem center;
	background-size: 16px 12px;
	border: 1px solid #ced4da;
	border-radius: .25rem;
	transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.floating-select-years:focus {
	border-color: #AEAEAE !important;
	box-shadow: none !important;
	text-shadow: none !important;
}


.check-agreement {
	/* margin-top: 36px;
	margin-bottom: 40px; */
	margin-top: 20px;
	margin-bottom: 24px;
}

.check-agreement-call {
	margin-top: 30px;
	margin-bottom: 20px;
}

.check-agreement-call .check p {
	font-family: 'Mulish-Regular', sans-serif;
	font-size: 15px;
	line-height: 28px;
	letter-spacing: 0.4px;
	color: #71716c;
}

.check-agreement-call .check p strong {
	font-family: "Mulish-SemiBold", sans-serif;
	color: #5a79bc;
}

.floating-label-month label {
	color: #71716c;
	font-size: 16px;
	line-height: 20px;
	font-weight: normal;
	position: absolute;
	pointer-events: none;
	left: 18px;
	top: 29px;
	transition: 0.2s ease all;
	-moz-transition: 0.2s ease all;
	-webkit-transition: 0.2s ease all;
	font-family: "Mulish-Regular", sans-serif;
}

.floating-select-month:focus~label {
	top: 5px;
	pointer-events: none;
}

.floating-label-month>.form-select~label {
	transform: scale(.9) translateY(-.8rem) translateX(-0.1rem);
}


.floating-select:focus~label,
.floating-select:not([value=""]):valid~label {
	font-size: 13.5px;
	pointer-events: none;
}

.floating-select-month:focus~label,
.floating-select-month:not([value=""]):valid~label {
	top: 18px;
	color: #999;
	position: absolute;
	pointer-events: none !important;
}

.floating-label-years label {
	color: #71716c;
	font-size: 16px;
	line-height: 20px;
	font-weight: normal;
	position: absolute;
	pointer-events: none;
	left: 18px;
	top: 29px;
	transition: 0.2s ease all;
	-moz-transition: 0.2s ease all;
	-webkit-transition: 0.2s ease all;
	font-family: "Mulish-Regular", sans-serif;
}

.floating-select-years:focus~label {
	top: 5px;
	pointer-events: none;
}

.floating-label-years>.form-select~label {
	transform: scale(.9) translateY(-.8rem) translateX(-0.1rem);
}


.floating-select:focus~label,
.floating-select:not([value=""]):valid~label {
	font-size: 13.5px;
	pointer-events: none;
}

.floating-select-years:focus~label,
.floating-select-years:not([value=""]):valid~label {
	top: 18px;
	color: #999;
	position: absolute;
	pointer-events: none !important;
}

/* FORM FLOATING REGULAR */



/* BARU SECTION FLOATING BUTTON DESK */
.section-floating-button {
	width: 100%;
	height: auto;
	min-height: 64px;
	padding: 6px 0px;
	background: #fff;
	border: 1px solid #efefef;
	border-top-left-radius: 16px;
	border-top-right-radius: 16px;
	z-index: 5;
	position: fixed;
	left: 0px;
	bottom: 0px;
	box-shadow: 0 7px 21px 4px rgba(0, 0, 0, 0.20);
	-ms-box-shadow: 0 7px 21px 4px rgba(0, 0, 0, 0.20);
	display: none;
}

.container-floating-act {
	margin: 0 auto;
	float: none;
	min-width: 680px;
	max-width: 680px;
}

.form-copy-link input.form-control {
	font-size: 1rem;
	font-weight: 400;
	line-height: 2.0;
	background: #fff !important;
	padding-left: 18px;
	border-radius: 8.6px;
	color: #363636;
	font-family: "Poppins-Regular", sans-serif;
	border: 1px solid #ced4da;
}

.flex-rows {
	display: flex;
	flex-wrap: wrap;
	max-width: 100%;
	flex: 0 0 100%;
	-ms-flex: 0 0 100%;
	justify-content: center;
	-ms-justify-content: center;
	align-items: center;
	-ms-align-items: center;
}

.left-acttion-btn-share {
	width: 36%;
	height: auto;
}

.right-floating-btn-donate {
	width: 64%;
	height: auto;
	display: flex;
	justify-content: end;
	-ms-justify-content: end;
}

.wrp-of-btn-floating {
	width: 100%;
	padding-left: 15px;
}

.left-acttion-btn-share a {
	background: #fff;
	max-width: 100%;
	display: flex;
	flex: wrap;
	justify-content: center;
	-ms-justify-content: center;
	align-items: center;
	-ms-align-items: center;
	border: 1px solid #5a79bc;
	font-family: "Rubik-SemiBold", sans-serif;
	padding: 10.8px 10px;
	color: #5a79bc;
	border-radius: 13px;
}

.left-acttion-btn-share a:hover {
	border: 1px solid #5a79bc;
	color: #5a79bc;
	box-shadow: 0 0px 29px 0 rgba(8, 47, 131, 0.10);
	-ms-box-shadow: 0 0px 29px 0 rgba(8, 47, 131, 0.10);
}

.left-acttion-btn-share a:focus {
	border: 1px solid #5a79bc;
	color: #5a79bc;
	outline: none;
}

.left-acttion-btn-share a:hover {
	text-decoration: none;
}

.left-acttion-btn-share a:focus {
	text-decoration: none;
	outline: none;
	box-shadow: none;
}

.icon-share-btn {
	height: auto;
	width: 24px;
	padding: 8px 8px 4px 0px;
}

.icon-share-btn img {
	max-width: 100%;
}

.btn-share-action {
	text-decoration: none;
	outline: none;
	color: #5a79bc;
	letter-spacing: 0.4px;
	font-family: "Rubik-SemiBold", sans-serif;
	border-radius: 9.5px;
}

.share-item {
	height: auto;
	position: fixed;
	top: 0px;
	left: 0px;
	/* visibility: visible; */
	visibility: hidden;
	opacity: 1;
	background: rgba(36, 36, 36, 0.5);
	-webkit-transition: opacity 0.2s;
	-moz-transition: opacity 0.2s;
	-o-transition: opacity 0.2s;
	transition: opacity 0.2s;
	width: 100%;
	height: 100vh;
	z-index: 12;
}

.share-item.active {
	position: fixed;
	visibility: visible;
}

.wrp-list-share-item {
	width: 100%;
	max-width: 720px;
	display: flex;
	flex-wrap: wrap;
	height: auto;
	min-height: 140px;
	background: #fefefe;
	border: 1px solid #ededed;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	padding: 10px 15px 20px 15px;
	position: absolute;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	z-index: 9;
	box-shadow: 0 1px 14px rgba(0, 0, 0, 0.076);
	-ms-box-shadow: 0 1px 14px rgba(0, 0, 0, 0.076);
	bottom: -106px;
}

.wrp-list-share-item.activated {
	transform: translateY(-106px);
	-webkit-transition: 1s ease-in-out;
	-moz-transition: 1s ease-in-out;
	-o-transition: 1s ease-in-out;
	transition: .4s ease-in-out;
}

.top-dialog-header {
	width: 100%;
	height: auto;
	color: #393939;
	position: relative;
	padding: 5px 36px 10px 36px;
}

.top-dialog-header .close {
	background: #fff;
	text-align: center;
	width: 36px;
	border-radius: 25px;
	height: 36px;
	overflow: hidden;
	z-index: 2;
	opacity: 1;
	line-height: 6px;
	box-shadow: 0 1px 14px rgba(0, 0, 0, 0.11);
	right: 40.5px;
	position: absolute;
	top: 12px;
}

.btn-copy-link {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	-ms-align-items: center;
	color: #fff;
	background: #5a79bc;
	text-align: center;
	font-size: 13px;
	font-family: "Rubik-SemiBold", sans-serif;
	letter-spacing: 0.35px;
	border-color: #5a79bc;
}

.btn-copy-link:hover {
	color: #fff;
	text-decoration: none;
	background: #5a79bc;
	box-shadow: none !important;
	border-color: #5a79bc;
}

.btn-copy-link:focus {
	color: #fff;
	text-decoration: none;
	background: #5a79bc;
	box-shadow: none !important;
	border-color: #5a79bc;
}

.left-icon-copy {
	height: auto;
	padding-right: 6px;
}

.right-text-copy {
	height: auto;
}

.right-text-copy p {
	margin-bottom: 0px;
}

.top-dialog-header a img {
	width: 14px;
	cursor: pointer;
	margin-left: 0px;
	margin-top: 12px;
}

.top-dialog-header h4 {
	color: #393939;
	font-size: 16.6px;
	font-family: 'Rubik-SemiBold', sans-serif;
	line-height: 25px;
	margin-bottom: 2px;
	margin-top: 15px;
	margin-bottom: 24px;
}

.row-column-share {
	width: 100%;
	height: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	-ms-justify-content: center;
}

.col-item-share {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	-ms-justify-content: center;
	width: 25%;
	min-height: 32px;
	border-radius: 6px;
	font-family: "Mulish-Regular", sans-serif;
	font-size: 13px;
	line-height: 18px;
	letter-spacing: 0.2px;
	color: #71716c;
}

.col-item-share a {
	color: #71716c;
	text-decoration: none;
	outline: none;
	padding: 8px 10px 10px 10px;
	display: block;
	max-width: 86px;
	border: 1px solid #ced4da;
	border-radius: 12.5px;
	cursor: pointer;
}

.col-item-share a:hover {
	background: #fff;
	color: #393939;
	box-shadow: 0 1px 14px rgba(0, 0, 0, 0.052);
	-ms-box-shadow: 0 1px 14px rgba(0, 0, 0, 0.052);
}

.img-icon-socmed-share {
	width: 100%;
	display: flex;
	justify-content: center;
	-ms-justify-content: center;
	padding: 6px 15px;
}

.text-icon-socmed-share {
	width: 100%;
	display: flex;
	justify-content: center;
	-ms-justify-content: center;
	font-family: "Mulish-Regular", sans-serif;
	font-size: 13px;
	line-height: 21px;
}

.text-icon-socmed-share {
	width: 100%;
	display: flex;
	justify-content: center;
	-ms-justify-content: center;
}

.text-icon-socmed-share p {
	margin-bottom: 0px;
}

.row-column-copy-link {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	height: auto;
	min-height: 46px;
	padding: 32px 40px 15px 40px;
}

.trigger-share {
	height: auto;
}

/* BARU SECTION FLOATING BUTTON DESK END */

.animate-bottom {
	position: relative;
	animation: animatebottom .25s;
}

.text-share-btn p {
	margin-bottom: 0px;
}

@keyframes animatebottom {
	from {
		bottom: -78px;
		opacity: 0;
	}

	to {
		bottom: 0;
		opacity: 1;
	}
}

/* MODAL DIALOG FORM DESKTOP END */

/* CHOOSE PAYMENT METHODE */
.wrp-choose-payment {
	height: auto;
	overflow: hidden;
	padding: 10px 18px 10px 18px;
	margin: -10px 0px 15px 0px;
	border: 1px solid #dedede;
	border-radius: 12px;
	min-height: 225px;
}

.wrp-choose-payment h3 {
	font-family: "Rubik-SemiBold", sans-serif;
	font-size: 18px;
	line-height: 24px;
}

#payment label {
	height: auto;
	background: #f9f9f9;
	border: 2px solid #f9f9f9;
	margin-bottom: 7px;
	min-height: 86px;
	width: 100%;
	display: flex;
	align-items: center;
	border-radius: 5px;
	font-family: "Rubik-Regular", sans-serif;
	color: #363636;
	font-size: 15.5px;
	line-height: 20px;
	letter-spacing: 0.10px;
}

#payment label .center-logo-payment {
	width: 115px;
	height: auto;
	overflow: hidden;
	text-align: center;
	margin-right: 1px;
	padding-left: 15px;
}

.type-methode {
	width: 100%;
	height: auto;
	display: block;
	margin-top: 15px;
	margin-bottom: 6px;
	color: #393939;
}

#payment label img.logo-payment {
	max-width: 100%;
}

#payment input[type="radio"] {
	opacity: 0;
	position: fixed;
	width: 0;
	font-weight: 500;
	position: absolute;
}

#payment input[type="radio"]+label:hover {
	background: #fff;
	/* border: 2px solid #e32028; */
	border: 2px solid #2085c8;
	box-shadow: 4px -1px 21px rgba(0, 0, 0, 0.09);
	color: #363636;
	cursor: pointer;
}

#payment input[type="radio"]:checked+label {
	/* background: url(../images/choosed-payment.svg), #fff; */
	background: #fff;
	background-repeat: no-repeat;
	border: 2px solid #2085c8;
	color: #272727;
	box-shadow: 4px -1px 21px rgba(0, 0, 0, 0.15);

}

#payment input[type="radio"]:checked+label:hover {
	/* background: url(../images/choosed-payment.svg), #fff; */
	background: #fff;
	background-repeat: no-repeat;
	border: 2px solid #2085c8;
	color: #272727;
	cursor: pointer;
}

/* CHOOSE PAYMENT METHODE */


/* TITLE PRIMARY MOBILE */
.primary-campaign-title-desc {
	padding: 0px 0px 48px 0px;
	width: 100%;
	height: auto;
	overflow: hidden;
}

.home-mobile-campaign-title {
	width: 100%;
	height: auto;
	padding: 10px 0px;
	font-family: "Mulish-Regular", sans-serif;
	font-size: 17px;
	line-height: 24px;
	color: #71716c;
}

.mobile-form-campaign-primary {
	width: 100%;
	height: auto;
	padding: 10px 0px;
	margin-bottom: 36px;
}

.home-mobile-campaign-title {
	width: 100%;
	height: auto;
	padding: 10px 0px;
	font-family: "Mulish-Regular", sans-serif;
	font-size: 17px;
	line-height: 24px;
	color: #71716c;
}

.home-mobile-campaign-title h1 {
	font-family: "Rubik-SemiBold", sans-serif;
	margin-top: 24px;
	font-size: 25px;
	line-height: 32.5px;
	color: #202020;
	letter-spacing: 0.15px;
	margin-bottom: 10px;
	position: relative;
	margin-top: 5px;
}

#mobileDonatetab {
	height: auto;
	margin-bottom: 8px;
	border-bottom: 0px;
}

#mobileDonatetab li {
	overflow: hidden;
	width: 50%;
	background: #fff;
	color: #606060;
	border: 2px solid #fff !important;
	border-radius: 12.5px;
}

#mobileDonatetab li a {
	font-family: "Mulish-SemiBold", sans-serif;
	color: #393939;
	font-size: 14.5px;
	text-align: center;
	padding: 16px 8px;
}

#mobileDonatetab .nav-link.active {
	background: #d81a1f;
	color: #fff;
}

/* TITLE PRIMARY MOBILE */


/* RADIO BUTTON */

.gutter-8.row,
.gutter-8.container,
.gutter-8.container-fluid {
	margin-left: -8px;
	margin-right: -8px;
}

.gutter-8>[class^="col-"] {
	padding-left: 8px;
	padding-right: 8px;
}

.row-gallery.row,
.row-gallery.container,
.row-gallery.container-fluid {
	margin-left: -4px;
	margin-right: -4px;
}

.row-gallery>[class^="col-"] {
	padding-left: 4px;
	padding-right: 4px;
}

.label-form-donate p {
	margin-bottom: 15px;
}

#recuring {
	padding: 13.5px 0px 0px 0px;
}

#one_trasaction {
	padding: 15px 0px;
}

#recuring .form-group {
	margin-bottom: 12px;
}

#one_trasaction .form-group {
	margin-bottom: 15px;
}

#form-donate #recuring input[type="radio"] {
	opacity: 0;
	position: fixed;
	width: 0;
	font-weight: 500;
}

.floating-form {
	width: 100%;
	height: auto;
	position: -webkit-sticky;
	position: sticky;
	top: 80px;
}

#yappikaFormDonation {
	box-shadow: 0 4px 9px rgba(0, 0, 0, 0.11);
	border-radius: 12.5px;
	overflow: hidden;
	background: #fff;
	margin-bottom: 6px;
	position: relative;
	z-index: 8;
}




#yappikaFormDonationContent {
	height: auto;
}

#yappikaFormDonationContent #one_trasaction input[type="radio"],
#yappikaFormDonationContent #recuring input[type="radio"] {
	opacity: 0;
	position: fixed;
	width: 0;
	font-weight: 500;
}

#yappikaFormDonationContent #one_trasaction input[type="radio"]:checked+label,
#yappikaFormDonationContent #recuring input[type="radio"]:checked+label {
	background: #d81a1f;
	border: 1px solid #d81a1f;
	color: #fff;
	font-family: "Mulish-Bold", sans-serif !important;
}

.area-amount {
	padding: 0px;
}

#yappikaFormDonationContent #one_trasaction label,
#yappikaFormDonationContent #recuring label {
	display: inline-block;
	background-color: #fff;
	/* padding: 16px 5px; */
	padding: 12px 4px;
	font-family: "Mulish-SemiBold", sans-serif;
	font-size: 14px;
	font-weight: 500;
	border: 1px solid #dedede;
	border-radius: 4px;
	width: 100%;
	color: #444;
	text-align: center;
	margin-bottom: 0px;
	cursor: pointer;
	margin-bottom: 4px;
}

#yappikaFormDonationContent #one_trasaction .form-check.form-switch label,
#yappikaFormDonationContent #recuring .form-check.form-switch label {
	border: 1px solid #fff;
	padding: 5px 1px;
}

#yappikaFormDonationContent #one_trasaction input[type="radio"],
#yappikaFormDonationContent #recuring input[type="radio"] {
	opacity: 0;
	position: fixed;
	width: 0;
	font-weight: 500;
	position: absolute;
}

#yappikaFormDonationContent #one_trasaction input[type="radio"]:checked+label,
#yappikaFormDonationContent #recuring input[type="radio"]:checked+label {
	background: #d81a1f;
	border: 1px solid #d81a1f;
	color: #fff;
	font-family: "Mulish-Bold", sans-serif !important;
}

#yappikaFormDonationContent #one_trasaction input[type="radio"]:checked+label:hover,
#yappikaFormDonationContent #recuring input[type="radio"]:checked+label:hover {
	background: #d81a1f;
	border: 1px solid #d81a1f;
	color: #fff;
}

#yappikaFormDonationContent #one_trasaction input[type="radio"]+label:hover {
	background: #f9f9f9;
}

#yappikaFormDonationContent #recuring input[type="radio"]+label:hover {
	background: #f9f9f9;
}

#yappikaFormDonationConten #one_trasaction label,
#yappikaFormDonationConten #recuring label {
	display: inline-block;
	background-color: #fff;
	padding: 8px 5px;
	font-family: "Mulish-SemiBold", sans-serif;
	font-size: 14px;
	font-weight: 500;
	border: 1px solid #999999;
	border-radius: 4px;
	width: 100%;
	color: #444;
	text-align: center;
	margin-bottom: 0px;
}

.form-group-nominal input:not(:placeholder-shown)~label {
	padding-top: 3px;
	padding-bottom: 3px;
	font-size: 12px;
	color: #777;
	top: -13px !important;
	background: #fff !important;
	padding-right: 4px;
	padding-left: 6px !important;
	z-index: 1 !important;
	padding-top: 5px !important;
	padding-bottom: 5px !important;
	padding-right: 6px !important;
	width: auto !important;
	margin-bottom: 0px;
	height: 22px !important;
	left: 3.6px;
	letter-spacing: 0.4px;
	border: 0px !important;
	font-size: 12.5px !important;
	font-family: "Mulish-Regular", sans-serif !important;
}

.form-group-nominal>label {
	position: absolute;
	top: -3px;
	left: 0;
	display: block;
	width: 100%;
	margin-bottom: 0;
	line-height: 1.5;
	color: #798086;
	color: #b6b6b8;
	pointer-events: none;
	cursor: text;
	border-radius: .25rem;
	transition: all .1s ease-in-out;
	font-family: "Mulish-Regular", sans-serif !important;
	border: 0px !important;
	background: transparent none !important;
}

.form-group-nominal>input,
.form-group-nominal>label {
	height: 54px !important;
	padding: 14px 15px !important;
	font-size: 15px;
	color: #606060;
	font-family: "Mulish-Bold", sans-serif;
	text-align: left !important;
	/* margin-bottom: 21px; */
	margin-bottom: 16px;
}

/* RADIO BUTTON */




	/* RADIO BUTTON MONTH/YEARLY */



	.option-monthly-annual {
		margin-top: 24px;
		margin: 0 auto;
		/* min-width: 432px;
		max-width: 432px; */
		width: 100%;
		min-height: 82px;
		border: 1px solid var(--grey-two);
		border-radius: 6.4px;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		-ms-align-items: center;
		-moz-align-items: center;
		-webkit-align-items: center;
		padding: 0px 0px;
	}
	.option-monthly-annual-mobile {
		margin-top: 24px;
		margin: 0 auto;
		/* min-width: 432px;
		max-width: 432px; */
		width: 100%;
		min-height: 82px;
		border: 1px solid var(--grey-two);
		border-radius: 6.4px;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		-ms-align-items: center;
		-moz-align-items: center;
		-webkit-align-items: center;
		padding: 0px 0px;
	}
	.form-group-calculator {
		width: 50%;
		position: relative;
	}

	.card-income {
		width: 100%;
		height: auto;
		min-height: 164px;
		padding: 20px 40px 20px 40px;
		margin-top: 16px;
		margin-bottom: 16px;
		background: #fff;
		border: 1px solid #e9eefb !important;
		border-radius: 6.4px;
		box-shadow: 0 10px 29px 0 rgba(0, 0, 0, 0.033);
		-ms-box-shadow: 0 12px 32px 0 rgba(0, 0, 0, 0.033);
		-moz-box-shadow: 0 12px 32px 0 rgba(0, 0, 0, 0.033);
		-webkit-box-shadow: 0 12px 32px 0 rgba(0, 0, 0, 0.033);
		z-index: 2;
		position: relative;
		margin: 48px 0px 20px 0px;
		min-height: 564px;
	}

	.form-group-statics {
		position: relative;
		padding-top: 17px;
	}

	.form-group-statics label {
		font: normal 600 16.24px/30.64px var(--font-jakarta-sans);
		color: var(--black-100);
		margin-bottom: 8px;
	}

	.form-group-statics .currency-label {
		left: 10px;
		top: 66px;
	}

	.form-group-statics .currency-label::before {
		display: none;
	}

	.form-group-statics .input-fit {
		padding-left: 60px;
		margin-bottom: 8px;
	}

	.caption-state-label {
		width: 100%;
		height: auto;
		position: relative;
		margin-top: -36px;
		min-height: 134px;
	}

	.title-state-label {
		width: 100%;
		height: auto;
		position: relative;
		margin-bottom: 24px;
		font: normal 400 15.24px/26.64px;
		color: #363636;
		letter-spacing: 0.35px;
	}

	.title-state-label h3 {
		font: normal 700 18.24px/27.64px;
		padding-right: 10px;
		color: var(--black-100);
		margin-bottom: 18px;
		width: auto;
		display: unset;
		background: #fff;
		padding: 8px 10px;
		margin-left: -10px;
		letter-spacing: 0.35px;
	}

	.content-state-label {
		font: normal 400 15.24px/26.64px;
		color: #363636;
		letter-spacing: 0.35px;
	}

	.content-state-label p {
		margin-bottom: 12px;
	}




	.option-monthly-annual input[type="radio"] {
		opacity: 0;
		position: fixed;
		width: 0;
		font-weight: 500;
		position: absolute;
	}

	.option-monthly-annual label {
		display: inline-block;
		background-color: #fff;
		padding: 16px 5px;
		font: normal 400 12.24px/26.64px;
		border: 1px solid #fff;
		border-radius: 4px;
		width: 100%;
		color: transparent!important;
		text-align: center;
		margin-top: 6px;
		cursor: pointer;
		margin-bottom: 6px;
		text-transform: uppercase;
		position: relative;
		margin-left: 1px;
		margin-right: 1px;
	}

	.option-monthly-annual input[type="radio"]:checked+label {
		background: #fff!important;
		border: 1px solid #5a79bc!important;
		color: #fff!important;
		font: normal 400 13.24px/26.64px;
	}

	.option-monthly-annual input[type="radio"]:checked+label::before {
		content: " ";
		background: transparent url(../images/checklist-circle.svg) top center no-repeat;
		width: 30px;
		height: 30px;
		position: absolute;
		right: unset;
		top: 10.24px;
		left: 20px;
		border-top-right-radius: 3.4px;
		border-top-left-radius: 0px;
		border-bottom-right-radius: 0px;
		border-bottom-left-radius: 3.4px;
		background-size: 91%!important;
	}


	.option-monthly-annual input[type="radio"]+label:hover {
		background: #f9f9f9;
		color: #f9f9f9;
	}

	.option-monthly-annual input[type="radio"]:checked+label:hover {
		background: #f9f9f9;
		border: 1px solid #f9f9f9;
		color: #fff;
	}

	.option-monthly-annual .form-group-calculator:first-child input[type="radio"]:checked+label::before {
		/* left: 20%; */
		left: 4.8%;
	}

	.option-monthly-annual .form-group-calculator:first-child input[type="radio"]+label:hover {
		background: #f9f9f9;
		color: #f9f9f9;
	}

	.option-monthly-annual .form-group-calculator:first-child input[type="radio"]+label:hover::before {
		content: " ";
		background: #f9f9f9 url(../images/checklist-circle-grey.svg) top center no-repeat;
		color: #f9f9f9;
		width: 30px;
		height: 30px;
		position: absolute;
		right: unset;
		top: 10.24px;
		/* left: 20%; */
		left: 4.8%;
		border-top-right-radius: 3.4px;
		border-top-left-radius: 0px;
		border-bottom-right-radius: 0px;
		border-bottom-left-radius: 3.4px;
		background-size: 91%!important;
	}

	.option-monthly-annual .form-group-calculator:first-child label::after {
		content: "Perbulan";
		content: var(--var-mounthly);
		text-transform: uppercase;
		position: absolute;
		/* left: 39%; */
		left: 24%;
		top: 12px;
		z-index: 3;
		color: #363636;
		font-size: 11.64px;
		font-family: "Mulish-ExtraBold", sans-serif;
	}

	.option-monthly-annual .form-group-calculator:first-child label::after {
		content: "Perbulan";
		content: var(--var-mounthly);
		text-transform: uppercase;
		position: absolute;
		/* left: 39%; */
		left: 24%;
		top: 12px;
		z-index: 3;
		color: #363636;
		font-size: 11.64px;
		font-family: "Mulish-ExtraBold", sans-serif;
	}

	.option-monthly-annual-mobile .form-group-calculator:first-child label::after {
		content: "Perbulan";
		content: var(--var-mounthly-mobile);
		text-transform: uppercase;
		position: absolute;
		/* left: 39%; */
		left: 24%;
		top: 12px;
		z-index: 3;
		color: #363636;
		font-size: 11.64px;
		font-family: "Mulish-ExtraBold", sans-serif;
	}

	.option-monthly-annual .form-group-calculator:first-child input[type="radio"]:checked+label::after {
		color: #363636!important;
	}

	.option-monthly-annual .form-group-calculator:first-child input[type="radio"]:checked+label:hover::before {
		background: transparent url(../images/checklist-circle.svg) top center no-repeat !important;
		left: 4.8%;
		background-size: 91%;
	}

	.option-monthly-annual .form-group-calculator:last-child input[type="radio"]:checked+label::before {
		left: 4.8%;
		color: var(--blue-two) !important;
		font-size: 11.64px;
	}

	.option-monthly-annual .form-group-calculator:last-child label::after {
		content: "Pertahun";
		content: var(--var-yearly);
		font-family: "Mulish-ExtraBold", sans-serif;
		color: #363636;
		text-transform: uppercase;
		position: absolute;
		left: 26.64%;
		top: 12px;
		z-index: 3;
		color: #363636;
		font-size: 11.64px;
	}

	.option-monthly-annual-mobile .form-group-calculator:last-child label::after {
		content: "Satu kali";
		content: var(--var-yearly-mobile);
		font-family: "Mulish-ExtraBold", sans-serif;
		color: #363636;
		text-transform: uppercase;
		position: absolute;
		left: 26.64%;
		top: 12px;
		z-index: 3;
		color: #363636;
		font-size: 11.64px;
	}

	.option-monthly-annual .form-group-calculator:last-child input[type="radio"]:checked+label::after {
		color: #363636!important;
	}

	.option-monthly-annual .form-group-calculator:last-child input[type="radio"]:checked+label:hover::before {
		background: transparent url(../images/checklist-circle.svg) top center no-repeat!important;
		/* left: 20%; */
		left: 4.8%;
		background-size: 91%!important;
	}

	.option-monthly-annual .form-group-calculator:last-child input[type="radio"]+label:hover {
		background: #f9f9f9;
		color: #f9f9f9;
	}

	.option-monthly-annual .form-group-calculator:last-child input[type="radio"]+label:hover::before {
		content: " ";
		background: #f9f9f9 url(../images/checklist-circle-grey.svg) top center no-repeat;
		color: #f9f9f9;
		width: 30px;
		height: 30px;
		position: absolute;
		right: unset;
		top: 10.24px;
		/* left: 20%; */
		left: 4.8%;
		border-top-right-radius: 3.4px;
		border-top-left-radius: 0px;
		border-bottom-right-radius: 0px;
		border-bottom-left-radius: 3.4px;
		background-size: 91%!important;
	}

	/* RADIO BUTTON MONTH/YEARLY */



.title-form-campaign-yappika {
	width: 100%;
	height: auto;
	min-height: 86px;
}

.wrp-short-desc-campaign p a {
	color: #fff;
	text-decoration: none;
	outline: none;
	display: block;
}

.wrp-short-desc-campaign p a:hover {
	color: #fff;
	text-decoration: none;
	outline: none;
	display: block;
}

.wrp-short-desc-campaign p a:focus {
	color: #fff;
	text-decoration: none;
	outline: none;
	display: block;
}

.title-form-campaign-yappika h1 {
	font-family: "Rubik-SemiBold", sans-serif;
	margin-top: 24px;
	font-size: 25px;
	line-height: 32.5px;
	color: #fff;
	letter-spacing: 0.15px;
	margin-bottom: 16px;
	position: relative;
	margin-top: 15px;
	display: inline-block;
	margin-bottom: 2px;
	padding: 0px 0px 0px 0px !important;
	/* width: fit-content; */
	/* background: #d81a1f;   */
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

.title-form-campaign-yappika h1 a {
	color: #fff;
	text-decoration: none;
	outline: none;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	background: #d81a1f;
	padding: 8px;
	line-height: 48.5px;
}

.title-form-campaign-yappika h1 a:hover {
	color: #fff;
	text-decoration: none;
	outline: none;
}

.title-form-campaign-yappika h1 a:focus {
	color: #fff;
	text-decoration: none;
	outline: none;
}

.since {
	color: #fff;
	text-decoration: none;
	font-family: "Times New Roman", serif;
	font-size: 13.5px;
	line-height: 18px;
	padding-right: 48px;
	margin-top: 10px;
	text-align: justify;
}


@media not all and (min-resolution:.001dpcm) {
	@supports (-webkit-appearance:none) {
		.title-form-campaign-yappika h1 a {
			color: #fff;
			text-decoration: none;
			outline: none;
		}

		.title-form-campaign-yappika h1 a:hover {
			color: #fff;
			text-decoration: none;
			outline: none;
		}

		.title-form-campaign-yappika h1 a:focus {
			color: #fff;
			text-decoration: none;
			outline: none;
		}

		.wrp-short-desc-campaign p a {
			color: #fff;
			text-decoration: none;
			outline: none;
			display: block;
		}

		.wrp-short-desc-campaign p a:hover {
			color: #fff;
			text-decoration: none;
			outline: none;
			display: block;
		}

		.wrp-short-desc-campaign p a:focus {
			color: #fff;
			text-decoration: none;
			outline: none;
			display: block;
		}

	}
}



@media screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0) {
	.title-form-campaign-yappika h1 a {
		color: #fff;
		text-decoration: none;
		outline: none;
	}

	.title-form-campaign-yappika h1 a:hover {
		color: #fff;
		text-decoration: none;
		outline: none;
	}

	.title-form-campaign-yappika h1 a:focus {
		color: #fff;
		text-decoration: none;
		outline: none;
	}

	.wrp-short-desc-campaign h1 a {
		color: #fff;
		text-decoration: none;
		outline: none;
	}

	.wrp-short-desc-campaign h1 a:hover {
		color: #fff;
		text-decoration: none;
		outline: none;
	}

	.wrp-short-desc-campaign h1 a:focus {
		color: #fff;
		text-decoration: none;
		outline: none;
	}

	.wrp-short-desc-campaign p a {
		color: #fff;
		text-decoration: none;
		outline: none;
		display: block;
	}

	.wrp-short-desc-campaign p a:hover {
		color: #fff;
		text-decoration: none;
		outline: none;
		display: block;
	}

	.wrp-short-desc-campaign p a:focus {
		color: #fff;
		text-decoration: none;
		outline: none;
		display: block;
	}
}

@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) {
	@media {
		.title-form-campaign-yappika h1 a {
			color: #fff;
			text-decoration: none;
			outline: none;
		}

		.title-form-campaign-yappika h1 a:hover {
			color: #fff;
			text-decoration: none;
			outline: none;
		}

		.title-form-campaign-yappika h1 a:focus {
			color: #fff;
			text-decoration: none;
			outline: none;
		}

		.wrp-short-desc-campaign h1 a {
			color: #fff;
			text-decoration: none;
			outline: none;
		}

		.wrp-short-desc-campaign h1 a:hover {
			color: #fff;
			text-decoration: none;
			outline: none;
		}

		.wrp-short-desc-campaign h1 a:focus {
			color: #fff;
			text-decoration: none;
			outline: none;
		}

		.wrp-short-desc-campaign p a {
			color: #fff;
			text-decoration: none;
			outline: none;
			display: block;
		}

		.wrp-short-desc-campaign p a:hover {
			color: #fff;
			text-decoration: none;
			outline: none;
			display: block;
		}

		.wrp-short-desc-campaign p a:focus {
			color: #fff;
			text-decoration: none;
			outline: none;
			display: block;
		}
	}
}

_::-webkit-full-page-media,
_:future,
:root .safari_only {

	.title-form-campaign-yappika h1 a {
		color: #fff;
		text-decoration: none;
		outline: none;
	}

	.title-form-campaign-yappika h1 a:hover {
		color: #fff;
		text-decoration: none;
		outline: none;
	}

	.title-form-campaign-yappika h1 a:focus {
		color: #fff;
		text-decoration: none;
		outline: none;
	}

	.wrp-short-desc-campaign p a {
		color: #fff;
		text-decoration: none;
		outline: none;
		display: block;
	}

	.wrp-short-desc-campaign p a:hover {
		color: #fff;
		text-decoration: none;
		outline: none;
		display: block;
	}

	.wrp-short-desc-campaign p a:focus {
		color: #fff;
		text-decoration: none;
		outline: none;
		display: block;
	}

}



.secure-guarante {
	font-family: "Mulish-Regular", sans-serif;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.25px;
	color: #16182c;
	padding-top: 15px;
}

/* SECTION WHITE DESKRIPTION START */

.section-white-desc {
	width: 100%;
	height: auto;
	padding: 56px 0px;
	min-height: 220px;
}

/* CHANGE REVISI LAGI POSISI FORM DARI DIO untuk1920 */

#yappikaFormDonationContent {
	display: flex;
	flex-wrap: wrap;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 48px;
}

.title-form-campaign-yappika {
	-ms-flex: 0 0 65%;
	flex: 0 0 65%;
	max-width: 65%;
	order: 1;
	padding-left: 4px;
	padding-right: 150px;
	display: table;
	/* height: 335px; */
	/* height:556px; */
	height: 396px;
	position: relative;
}

#monthly-donate-tabs {
	-ms-flex: 0 0 35%;
	flex: 0 0 35%;
	max-width: 35%;
	order: 2;
	margin-top: 12px;
}

#single-donate-tabs {
	-ms-flex: 0 0 35%;
	flex: 0 0 35%;
	max-width: 35%;
	order: 2;
	margin-top: 12px;
}

.title-form-campaign-yappika {
	font-family: "Mulish-Regular", sans-serif;
	font-size: 17px;
	line-height: 24px;
	color: #f8f8f8;
}

/* SUPPORT PAGE */
.support-landing-page {
	position: sticky;
	position: -webkit-sticky;
	width: 100%;
	height: auto;
	top: 91px;
}

.support-landing-page .wrap-form-donation {
	position: relative;
	top: 0px;
	box-shadow: 0 10px 29px 0 rgba(0, 0, 0, 0.046);
	-ms-box-shadow: 0 12px 32px 0 rgba(0, 0, 0, 0.046);
	border-radius: 15px;
	margin-bottom: 24px;
}

.first-top-of-form-support {
	font-family: "Rubik-Medium", sans-serif;
	font-size: 15px;
	line-height: 22px;
	color: #fff;
	position: relative;
	padding: 10px 20px 1px 20px;
	border: 1px solid #dedede;
	background: #d81a1f;
	background: -moz-linear-gradient(45deg, #d81a1f 0%, #e32028 100%);
	background: -webkit-linear-gradient(45deg, #d81a1f 0%, #e32028 100%);
	background: linear-gradient(45deg, #d81a1f 0%, #e32028 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d81a1f', endColorstr='#e32028', GradientType=1);
	border-top-right-radius: 15px;
	border-top-left-radius: 15px;
	position: relative;
	border-left: 1px solid #dedede;
	border-right: 1px solid #dedede;
	border-top: 1px solid #dedede;
	border-bottom: 0 transparent;
	text-align: center;
}

.first-top-of-form-support p {
	margin-bottom: 9px;
}

.first-top-of-form-support h5 {
	font-family: "Rubik-Medium", sans-serif;
	font-size: 20px;
	line-height: 23px;
	margin-bottom: 3px;
	color: #fff;
}

.wrp-support-form-donation {
	background: #fff;
	/* border: 1px solid #dedede; */
	border: 1.5px solid #f1f1f8;
	min-height: 286px;
	width: 100%;
	padding: 10px 30px 30px 30px;
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
}

#yappikaSupportDonationContent {
	display: flex;
	flex-wrap: wrap;
	padding-left: 20px;
	padding-right: 20px;
	/* padding-top: 48px;
	padding-bottom: 48px; */
	padding-top: 40px;
	padding-bottom: 0px;
	min-height: 580px;
}

.title-support-campaign-yappika {
	height: auto;
	font-family: "Mulish-Regular", sans-serif;
	font-size: 17px;
	line-height: 24px;
	color: #f8f8f8;
	-ms-flex: 0 0 65%;
	flex: 0 0 65%;
	max-width: 65%;
	order: 1;
	padding-left: 4px;
	padding-right: 150px;
	position: relative;
}

.wrp-for-petisi {
	height: auto;
	font-family: "Mulish-Regular", sans-serif;
	-ms-flex: 0 0 35%;
	flex: 0 0 35%;
	max-width: 35%;
	order: 1;
	padding-left: 0;
	padding-right: 0;
	margin-top: 15px;
}

.spacing-content-petisi {
	height: 360px;
	width: 100%;
	display: none;
}

.title-support-campaign-yappika h1 {
	font-family: "Rubik-SemiBold", sans-serif;
	margin-top: 24px;
	font-size: 30px;
	line-height: 37.5px;
	color: #fff;
	letter-spacing: 0.15px;
	margin-bottom: 16px;
	position: relative;
	/* margin-top: 229px;	 */
	margin-top: 110px;
}

/* SUPPORT PAGE */

/* .title-form-campaign-yappika h1 {
    vertical-align: middle;
    display: table-cell;
} */

.wrp-short-desc-campaign {
	/* vertical-align: middle; */
	vertical-align: bottom;
	display: table-cell;
}

.wrp-tab-recuring {
	display: flex;
	flex: 0 0 100%;
	-ms-flex: 0 0 100%;
	max-width: 100%;
	flex-wrap: wrap;
	justify-content: flex-end;
	-ms-justify-content: flex-end;
}

#yappikaFormDonation {
	flex: 0 0 35%;
	-ms-flex: 0 0 35%;
	max-width: 35%;
}

/* CHANGE REVISI LAGI POSISI FORM DARI DIO untuk1920 */


/* THANKYOU PAGES */

.section-thankyou-page {
	width: 100%;
	height: auto;
	min-height: 480px;
	padding: 56px 0px 32px 0px;
	border: 1px solid #dedede;
}

.help-center {
	text-align: center;
	font-family: "Mulish-Bold", sans-serif;
	color: #e32028;
	font-size: 18px;
	line-height: 23px;
	padding-top: 24px;
}

.help-center a {
	font-family: "Mulish-Bold", sans-serif;
	color: #e32028;
}

.help-center a:hover {
	font-family: "Mulish-Bold", sans-serif;
	color: #e32028;
	text-decoration: underline;
}

.wrp-frame-thanks {
	width: auto;
	max-width: 720px;
	min-height: 600px;
	border: 1px solid #dedede;
	border-radius: 12.5px;
	margin: 0 auto;
	margin-top: 36px;
	margin-bottom: 36px;
	padding-bottom: 24px;
	float: none;
	overflow: hidden;
	position: relative;
}

.frame-thanks-hero-images::before {
	background: #f6f2f2;
	position: absolute;
	content: " ";
	width: 100vw;
	height: 300px;
	top: 0px;
	left: 0px;
}

.frame-thanks-hero-images {
	background: #f6f2f2;
	width: 137%;
	height: auto;
	min-height: 420px;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	top: 18.5%;
	/* position the top  edge of the element at the middle of the parent */
	left: 51%;
	/* position the left edge of the element at the middle of the parent */
	transform: translate(-50%, -51%);
	text-align: center;
	border-bottom-left-radius: 986px;
	border-bottom-right-radius: 986px;
	position: absolute;
	z-index: 3;
}

.thankyou-title {
	font-family: "Mulish-Bold", sans-serif;
	color: 363636;
	width: 100%;
	height: auto;
	min-height: 386px;
	position: relative;
	z-index: 3;
	text-align: center;
	font-size: 18px;
	line-height: 23px;
}

.thankyou-title h2 {
	font-family: "Rubik-Medium", sans-serif;
	color: #303030;
	font-size: 28px;
	line-height: 32px;
	text-align: center;
	margin-top: 46px;
	margin-bottom: 18px;
}

.thankyou-title h3 {
	font-family: "Rubik-Medium", sans-serif;
	color: #e32028;
	font-size: 28px;
	line-height: 32px;
	text-align: center;
	margin-top: 8px;
	margin-bottom: 18px;
}

.thanks-desc-other {
	font-family: "Mulish-Regular", sans-serif;
	font-size: 18px;
	line-height: 25px;
	letter-spacing: 0.15px;
	color: #71716c;
	position: relative;
	z-index: 4;
	width: 92%;
	padding: 10px 20px 10px 20px;
	left: auto;
	right: auto;
	margin: 0 auto;
	float: none;
}


.sorry-title {
	font-family: "Mulish-Bold", sans-serif;
	color: 363636;
	width: 56%;
	height: auto;
	margin: 0 auto;
	min-height: 324px;
	position: relative;
	z-index: 3;
	text-align: center;
	font-size: 18px;
	line-height: 23px;
}

.sorry-title img.try-illustration {
	width: 246px;
	margin: 0 auto;
	margin-top: 24px;
}

.sorry-title h2 {
	font-family: "Rubik-Medium", sans-serif;
	color: #303030;
	font-size: 28px;
	line-height: 32px;
	text-align: center;
	margin-top: 8px;
	margin-bottom: 18px;
}

.thanks-desc-other p {
	margin-bottom: 12px;
}

.thanks-desc-other p b {
	font-family: "Rubik-Medium", sans-serif;
	font-size: 18px;
	line-height: 25px;
	letter-spacing: 0.15px;
	color: #303030;
}

.thanks-desc-other h1 {
	font-family: "Rubik-Medium", sans-serif;
	color: #303030;
	font-size: 22px;
	line-height: 28.5px;
	margin-bottom: 15px;
	margin-top: 14px;
}

.thanks-desc-other h3 {
	font-family: "Rubik-Medium", sans-serif;
	color: #303030;
	font-size: 20px;
	line-height: 25.5px;
	margin-bottom: 20px;
}

.thanks-desc-other a {
	color: #e32028;
}

.thanks-desc-other a:hover {
	color: #e32028;
	text-decoration: underline;
}

.other-action {
	position: relative;
	z-index: 4;
	width: 92%;
	padding: 10px 20px 10px 20px;
	left: auto;
	right: auto;
	margin: 0 auto;
	float: none;
}

.btn-outline-rounded {
	width: 100%;
	background: #fff;
	color: #d81a1f;
	border: 2px solid #d81a1f;
	border-radius: 12.5px;
	padding: 16px 36px;
	min-width: 176px;
	font-family: "Mulish-SemiBold", sans-serif;
	margin: 0 auto;
	float: none;
	margin-top: 6px;
	margin-bottom: 20px;
	display: block;
	text-decoration: none;
	text-align: center;
}

.thanyou-child {
	width: 240px;
	height: auto;
	position: absolute;
	top: unset;
	margin: auto;
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
}

.thanyou-child img {
	max-width: 100%;
	width: auto;
}

.btn-tryagain-rounded {
	width: 64%;
	background: #5a79bc;
	color: #fff !important;
	border: 2px solid #5a79bc;
	border-radius: 12.5px;
	padding: 16px 36px;
	min-width: 176px;
	font-family: "Mulish-SemiBold", sans-serif;
	margin: 0 auto;
	float: none;
	margin-top: 6px;
	margin-bottom: 10px;
	display: block;
	text-decoration: none;
	text-align: center;
}

.btn-tryagain-rounded:hover {
	width: 64%;
	background: #5072bb;
	color: #fff !important;
	box-shadow: 0 10px 29px 0 rgba(33, 79, 178, 0.08);
	box-shadow: 0 0px 29px 0 rgba(33, 79, 178, 0.08);
	-ms-box-shadow: 0 0px 29px 0 rgba(33, 79, 178, 0.08);
	text-decoration: none !important;
}

.btn-outline-rounded:hover {
	color: #d81a1f;
	text-decoration: none;
	box-shadow: 0 10px 29px 0 rgba(124, 5, 5, 0.09);
	box-shadow: 0 0px 29px 0 rgba(124, 5, 5, 0.09);
	-ms-box-shadow: 0 0px 29px 0 rgba(124, 5, 5, 0.09);
}

.btn-outline-rounded:focus {
	color: #d81a1f;
	outline: none;
}

/* THANKYOU PAGES */

/* DETAIL PROGRESS BAR */

.ui-widget {
	font-size: 0.52em;
	margin-bottom: 15px;
}

.ui-widget-content {
	border: transparent none;
}

.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
	border-radius: 9.5px;
}

.donation-box .bar .ui-widget-header {
	background: #d81a1f;
}

.wrp-value-donation {
	width: 100%;
	height: auto;
	overflow: hidden;
	padding-bottom: 20px;
}

.goal {
	visibility: hidden;
	position: absolute;
	right: 0px;
}

.raised {
	float: left;
	text-align: left;
	width: 49%;
	overflow: hidden;
}

.raised h3 {
	font-family: "Mulish-Bold", sans-serif;
	font-size: 25px;
	line-height: 27px;
	margin-bottom: 6px;
	color: #d81a1f;
	letter-spacing: 0.45px;
	font-weight: 600;
}

.donation-box .bar p {
	margin: 10px 0 0 0;
	margin-bottom: 0px;
	font-style: normal;
	width: 49%;
	display: inline-block;
	color: #363636;
}

.donation-items {
	width: 48%;
	float: right;
	text-align: right;
}

.donation-items p {
	font-family: "Mulish-Bold", sans-serif;
	color: #363636;
	font-size: 20px;
	line-height: 22px;
}


/* SECTION WHITE DESKRIPTION END */


/* HOMEPAGE */

.gutter--20.row,
.gutter--20.container,
.gutter--20.container-fluid {
	margin-left: -20px;
	margin-right: -20px;
}

.gutter--20>[class^="col-"] {
	padding-left: 20px;
	padding-right: 20px;
}

.card-campaign-unbar {
	width: 100%;
	min-height: 100px;
	margin-bottom: 15px;
	margin-top: 15px;
	border-radius: 19.5px;
	border: 1px solid #f1f1f1;
	overflow: hidden;
	box-shadow: 0 10px 29px 0 rgba(0, 0, 0, 0.045);
	-ms-box-shadow: 0 12px 32px 0 rgba(0, 0, 0, 0.045);
}

.img-card-campaign-unbar {
	width: 100%;
	height: auto;
	min-height: 235px;
	/* max-height: 343px; */
	/* max-height: 320px; */
	/* min-height: 228px;
	max-height: 228px;	 */
	/* min-height: 200px;
	max-height: 200px; */
	min-height: 164px;
	max-height: 182px;
	position: relative;
	overflow: hidden;
	background: #f9f9f8;
}

.card-campaign-unbar:hover {
	box-shadow: 0 10px 29px 0 rgba(0, 0, 0, 0.075);
	-ms-box-shadow: 0 12px 32px 0 rgba(0, 0, 0, 0.075);
}

.card-campaign-unbar:hover .img-card-campaign-unbar a img {
	transform: scale(1.1, 1.1);
}

.img-card-campaign-unbar a img {
	height: auto;
	max-height: 100%;
	transform: scale(1, 1);
	transition-property: all;
	transition-duration: 0.5s;
	margin-bottom: 0px;
}


.desc-card-campaign-unbar {
	font-family: "Mulish-Regular", sans-serif;
	font-size: 16px;
	line-height: 24.5px;
	padding: 27px 36.5px 32.5px 36.5px;
	color: #71716c;
	/* min-height: 115px;	 */
	/* min-height: 246px; */
	/* min-height: 290px; */
	/* min-height: 299.5px; */
	/* min-height: 350px; */
	/* align-items: center; */
	min-height: 306px;
}

.desc-card-campaign-unbar a h2 {
	font-family: "Rubik-Medium", sans-serif;
	color: #202020;
	/* font-size: 24px;
	line-height: 31px; */
	font-size: 23px;
	line-height: 29.5px;
	margin-bottom: 15px;
}

.desc-card-campaign-unbar a:hover h2 {
	font-family: "Rubik-Medium", sans-serif;
	color: #202020;
	text-decoration: underline;
}

.desc-card-campaign-unbar a p {
	font-family: "Mulish-Regular", sans-serif;
	font-size: 16px;
	line-height: 23px;
	color: #71716c;
	margin-bottom: 1px;
}

.load-campaign-unbar {
	width: 100%;
	height: auto;
	flex: 100%;
	-ms-flex: 0 0 100%;
	flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	display: flex;
	justify-content: center;
	margin-top: 32px;
	margin-bottom: 8px;
}

.load-campaign-unbar a.btn-load-campaign-unbar {
	background: #fff;
	color: #d81a1f;
	border: 2px solid #d81a1f;
	border-radius: 14.5px;
	padding: 16px 36px;
	min-width: 176px;
	max-height: 256px;
	font-family: "Mulish-SemiBold", sans-serif;
	margin-top: 6px;
	text-decoration: none;
}

.btn-load-campaign-unbar:hover {
	box-shadow: 0 10px 29px 0 rgba(177, 140, 140, 0.09);
	box-shadow: 0 0px 29px 0 rgba(124, 5, 5, 0.09);
	-ms-box-shadow: 0 0px 29px 0 rgba(124, 5, 5, 0.09);
}

.btn-load-campaign-unbar:focus {
	box-shadow: none;
	outline: none;
}

.wrp-title-section-other-campaign {
	width: 100%;
	height: auto;
	font-family: "Mulish-Regular", sans-serif;
	font-size: 16px;
	color: #71716c;
}

.wrp-title-section-other-campaign h3 {
	font-family: "Rubik-Medium", sans-serif;
	color: #202020;
	font-size: 22.5px;
	line-height: 30px;
	margin-bottom: 32px;
	text-align: center;
	position: relative;
}

.wrp-title-section-other-campaign h3::after {
	content: " ";
	position: absolute;
	width: 76px;
	height: 4px;
	border-radius: 2px;
	background: #fb8a8d;
	bottom: -7px;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
}

.wrp-title-section-other-campaign h3 span {
	color: #e32028;
}

.wrp-title-section-opinion {
	width: 100%;
	height: auto;
	font-family: "Mulish-Regular", sans-serif;
	font-size: 16px;
	color: #71716c;
}

.wrp-title-section-opinion h3 {
	font-family: "Rubik-Medium", sans-serif;
	color: #202020;
	font-size: 22.5px;
	line-height: 30px;
	margin-bottom: 20px;
	text-align: center;
	position: relative;
}

.wrp-title-section-opinion h3::after {
	content: " ";
	position: absolute;
	width: 76px;
	height: 4px;
	border-radius: 2px;
	background: #fb8a8d;
	bottom: -4px;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
}


.wrp-title-section-opinion h3 span {
	color: #e32028;
}

.circle-fundraiser {
	width: 100%;
	height: auto;
	padding: 10px 0px 0px 0px;
}

.title-label-fundraiser {
	width: 100%;
	height: auto;
	font-family: "Mulish-Regular", sans-serif;
	font-size: 12px;
	line-height: 17px;
	color: #71716c;
}

.title-label-fundraiser h4 {
	font-family: "Mulish-Regular", sans-serif;
	font-size: 12px;
	line-height: 14.5px;
	color: #71716c;
	margin-bottom: 2px;
}

.ava-fundraiser {
	width: 45px;
	height: 45px;
	border-radius: 27.5px;
	background: #f9c6ca;
	overflow: hidden;
	text-align: center;
	margin-right: 8px;
}

.wrp-list-fundraiser {
	display: flex;
	flex: 0 0 100%;
	-ms-flex: 0 0 100%;
	min-height: 56px;
	/* border:1px solid #cf0000; */
	align-items: center;
	-ms-align-items: center;
	flex-wrap: wrap;
}

.link-more-fundraiser {
	width: auto;
	min-height: 46px;
	font-family: "Mulish-Regular", sans-serif;
	font-size: 12px;
	line-height: 17px;
	color: #71716c;
}

a.link-more-fundraiser {
	font-size: 12px;
	line-height: 40px;
	color: #5a79bc;
	padding: 2px 5px;
}

a.link-more-fundraiser img {
	margin-top: -2px;
}

.section-grey-opinion {
	background: #f8f8f9;
	width: 100%;
	height: auto;
	padding: 58px 0px 46px 0px;
	min-height: 220px;
	margin-left: 0px;
	margin-right: 0px;
	overflow: hidden;
}

.opinion {
	width: 100%;
	height: auto;
	position: relative;
	overflow: unset;
	padding-top: 5px;
	padding-bottom: 16px;
	z-index: 5;
}

.opinion .slick-list {
	position: relative;
	overflow: visible;
	min-height: 220px;
	pointer-events: visible;
}

.opinion ul.slick-dots {
	bottom: -18px;
}

.opinion .slick-dots li.slick-active button::before {
	opacity: .75;
	color: #d81a1f;
}

.opinion .slick-dots li button::before {
	font-family: 'slick';
	font-size: 30px;
}

.opinion .slick-next {
	z-index: 3;
	background: rgba(255, 255, 255, 0.64);
	width: 32px;
	height: 32px;
	border-radius: 16px;
	box-shadow: 0 10px 29px 0 rgba(0, 0, 0, 0.075);
	-ms-box-shadow: 0 12px 32px 0 rgba(0, 0, 0, 0.075);
	border: 1px solid #dedede;
}

.opinion .slick-prev {
	z-index: 3;
	background: rgba(255, 255, 255, 0.64);
	width: 32px;
	height: 32px;
	border-radius: 16px;
	box-shadow: 0 10px 29px 0 rgba(0, 0, 0, 0.075);
	-ms-box-shadow: 0 12px 32px 0 rgba(0, 0, 0, 0.075);
	border: 1px solid #dedede;
}

.opinion .slick-next::before {
	font-size: 21px;
	line-height: 1;
	opacity: 1 !important;
	color: #ef3a42;
	content: "  ";
	width: 26px;
	height: 30px;
	background: #ef3a42;
	font-family: unset;
	text-align: center !important;
	background: url(../images/arrow-right.svg);
	background-position-x: 0%;
	background-position-y: 0%;
	background-repeat: repeat;
	background-repeat: no-repeat;
	background-position-x: 8.5px;
	background-position-y: 7px;
	display: block;
	background-size: 56%;
	opacity: 0.2;
}

.opinion .slick-prev::before {
	font-size: 20px;
	line-height: 1;
	opacity: 1 !important;
	color: #ef3a42;
	content: "  ";
	width: 26px !important;
	height: 30px !important;
	background: #ef3a42;
	font-family: unset;
	text-align: center !important;
	background: url(../images/arrow-left.svg);
	background-position-x: 0%;
	background-position-y: 0%;
	background-repeat: repeat;
	background-repeat: no-repeat;
	background-position-x: 7px;
	background-position-y: 7px;
	display: block;
	background-size: 56%;
	opacity: 0.2;
}

.card-opinion {
	width: 390px;
	height: auto;
	min-height: 256px;
	background: #fefefe;
	padding: 20px 20px 20px 20px;
	border-radius: 19.5px;
	box-shadow: 5px 10px 30px 0 rgba(0, 0, 0, 0.046);
	-ms-box-shadow: 5px 10px 30px 0 rgba(0, 0, 0, 0.046);
	font-family: "Mulish-Regular", sans-serif;
	color: #71716c;
	font-size: 17px;
	line-height: 25.5px;
	letter-spacing: 0.15px;
	text-align: left;
	margin: 20px 15px 15px 15px;
	border: 1px solid #f1f1f1;
}

.head-card-opinion {
	position: relative;
	padding: 12px 0px 2px 74px;
	font-family: "Mulish-Regular", sans-serif;
	font-size: 13px;
	line-height: 17px;
}

.head-card-opinion p {
	margin-bottom: 6px;
}

.head-card-opinion h5 {
	font-family: "Rubik-Medium", sans-serif;
	color: #202020;
	font-size: 17px;
	line-height: 17px;
	margin-bottom: 8px;
}

.body-card-opinion {
	width: 100%;
	height: auto;
	font-family: "Mulish-Regular", sans-serif;
	color: #8d8d8e;
	font-size: 16px;
	line-height: 23.5px;
	padding: 10px 5px 2px 12px;
}

.body-card-opinion p {
	margin-bottom: 5px;
}

/* HOMEPAGE */

/* HOMEPAGE 2 */

.card-campaign-bar {
	width: 100%;
	min-height: 100px;
	margin-bottom: 15px;
	margin-top: 15px;
	border-radius: 19.5px;
	border: 1px solid #f1f1f1;
	overflow: hidden;
	box-shadow: 0 10px 29px 0 rgba(0, 0, 0, 0.045);
	-ms-box-shadow: 0 12px 32px 0 rgba(0, 0, 0, 0.045);
}

.card-campaign-bar:hover {
	box-shadow: 0 10px 29px 0 rgba(0, 0, 0, 0.075);
	-ms-box-shadow: 0 12px 32px 0 rgba(0, 0, 0, 0.075);
	cursor: pointer;
}

.img-card-campaign-bar {
	width: 100%;
	height: auto;
	/* min-height: 186px; */
	/* min-height: 132px;
	max-height: 132px; */
	min-height: 212px;
	max-height: 212px;
	position: relative;
	overflow: hidden;
	background: #f9f9f8;
}

.img-card-campaign-bar a img {
	height: auto;
	max-height: 100%;
	transform: scale(1, 1);
	transition-property: all;
	transition-duration: 0.5s;
	margin-bottom: 0px;
}

.card-campaign-bar:hover .img-card-campaign-bar a img {
	transform: scale(1.1, 1.1);
}

.desc-card-campaign-bar {
	font-family: "Mulish-Regular", sans-serif;
	font-size: 15px;
	line-height: 24px;
	padding: 8px 25px 0px 25px;
	color: #71716c;
	min-height: 110px;
	display: flex;
	align-items: center;
}

.desc-card-campaign-bar a h2 {
	font-family: "Rubik-Medium", sans-serif;
	color: #202020;
	font-size: 22.5px;
	line-height: 30px;
	margin-bottom: 5px;
}

.desc-card-campaign-bar a:hover h2 {
	color: #202020;
	text-decoration: underline;
}

.wrp-cta-campaign-home {
	display: flex;
	flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	align-items: center;
	-ms-align-items: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	width: 100%;
	min-height: 60px;
	padding: 10px 25px 2px 25px;
}

.home-campaign-bar {
	font-family: "Rubik-Medium", sans-serif;
	color: #71716c;
	font-size: 15px;
	line-height: 20px;
	flex: 0 0 62%;
	-ms-flex: 0 0 62%;
	max-width: 62%;
}

.home-campaign-bar p {
	margin-bottom: 4px;
}

.home-campaign-cta {
	flex: 0 0 125px;
	-ms-flex: 0 0 124px;
	min-width: 125px;
	max-width: 125px;
}

.btn-sm-cta {
	background: #5a79bc;
	color: #fff;
	border: 2px solid #5a79bc;
	border-radius: 14.5px;
	padding: 10px 6px;
	width: 100%;
	height: auto;
	font-family: "Mulish-SemiBold", sans-serif;
	text-decoration: none;
}

.btn-sm-cta img {
	margin-right: 10px;
	position: relative;
	margin-top: -3.4px;
}

.btn-sm-cta:hover {
	color: #fff;
	box-shadow: 0 0px 29px 0 rgba(8, 47, 131, 0.10);
	-ms-box-shadow: 0 0px 29px 0 rgba(8, 47, 131, 0.10);
}

.btn-sm-cta:focus {
	color: #fff;
	box-shadow: none;
	outline: none;
}

.wrp-sm-progressbar {
	flex: 0 0 100%;
	-ms-flex: 0 0 100%;
	max-width: 100%;
}

.smprogressbar {
	z-index: 2;
	position: relative;
	flex: 0 0 100%;
	-ms-flex: 0 0 100%;
	max-width: 100%;
	width: 100%;
	margin: 24px 0px 36px 0px;
}

.smprogressbar .ui-widget-header {
	background: #d81a1f;
	border: 1px solid #d81a1f;
}

.smprogressbar.ui-widget {
	font-size: 0.24em;
}

.smprogressbar.ui-corner-all {
	border-radius: 3.5px;
}

.smraised {
	font-family: "Mulish-Regular", sans-serif;
	font-size: 12px;
	line-height: 17px;
	color: #71716c;
}

.smraised h3 {
	font-family: "Mulish-Bold", sans-serif;
	font-size: 20px;
	line-height: 23px;
	margin-bottom: 5px;
	color: #71716c;
	letter-spacing: 0.45px;
	font-weight: 600;
}

.smraised p span {
	color: #d81a1f;
}

.smgoal {
	visibility: hidden;
	position: absolute;
	right: 0px;
}

.wrp-sm-value-donation {
	width: 100%;
	height: auto;
	overflow: hidden;
	padding-bottom: 5px;
}

/* HOMEPAGE 2 */

/* FOOTER DESKTOP VERSION START */

.footer {
	/* background: #d81a1f; */
	background: #1c1c1c;
	color: #fff;
	padding: 36px 0px 0px 0px;
}

.wrp-footer-top {
	width: 100%;
	height: auto;
	overflow: hidden;
	/* border-bottom: 1px solid #e04e52; */
	border-bottom: 1px solid #464646;
	padding-bottom: 32px;
}

.wrp-footer-middle {
	width: 100%;
	min-height: 96px;
	height: auto;
	overflow: hidden;
	border-bottom: 1px solid #464646;
	padding-bottom: 32px;
}


.wrp-footer-bottom {
	font-family: "Mulish-Regular", sans-serif;
	font-size: 15px;
	line-height: 18px;
	width: 100%;
	height: auto;
	overflow: hidden;
	padding-top: 32px;
	padding-bottom: 12px;
	letter-spacing: 0.3px;
}

.title-column-footer {
	width: 100%;
	height: auto;
	overflow: hidden;
	padding-top: 32px;
}

.title-column-footer h4 {
	font-family: 'Rubik-SemiBold', sans-serif;
	font-size: 20px;
	line-height: 26px;
	margin-bottom: 15px;
	margin-top: 10px;
	letter-spacing: 0.65px;
}

.list-link-footer {
	width: 100%;
	height: auto;
	padding-bottom: 15px;
	font-family: "Mulish-Regular", sans-serif;
}

.list-link-footer ul {
	list-style: none;
	padding-left: 0px;
}

.list-link-footer ul li {
	list-style: none;
}

.list-link-footer ul li a {
	color: #fff;
	text-decoration: none;
	font-family: "Mulish-Regular", sans-serif;
	font-size: 17px;
	line-height: 23px;
	padding: 8px 0px;
	display: block;
}

.list-link-footer ul li a:hover {
	text-decoration: underline;
	outline: none;
}

.list-link-footer ul li a:focus {
	text-decoration: underline;
	outline: none;
}

.bottom-socmed {
	height: auto;
	float: left;
	margin-left: -6px;
	position: relative;
}

.bottom-socmed ul {
	padding-left: 0px;
	margin-bottom: 5px;
}

.bottom-socmed ul li {
	list-style: none;
	display: inline;
}

.bottom-socmed ul li a img {
	width: 24px;
	margin: 15px 5px 6px 5px;
}

.footer-main {
	width: 100%;
	height: auto;
	padding: 24px 0px 10px 0px;
}

.footer-main p {
	margin-bottom: 16px;
}

.iconic-footer-main {
	width: 100%;
	height: auto;
	padding: 10px 0px 6px 42px;
	position: relative;
	clear: both;
}

.iconic-footer-main a {
	color: #fff;
}

.iconic-footer-main a:hover {
	color: #fff;
}

.iconic-footer-main a:hover p {
	color: #fff;
	text-decoration: underline;
}

.iconic-footer-main a:hover p span {
	text-decoration: none !important;
}


.iconic-footer-main p {
	margin-bottom: 8px;
}

.iconic-footer-main p span {
	width: 100%;
	display: block;
	font-size: 13px;
	opacity: 0.86;
}

.iconic-footer-main p img {
	width: 20px;
	height: auto;
	position: absolute;
	left: 2px;
	top: 22.5px;
}


/* FOOTER DESKTOP VERSION START */
/* FOOTER SECTION START */
a.icon-facebook,
a.icon-twitter,
a.icon-youtube,
a.icon-linkedin,
a.icon-instagram {
	color: inherit;
}

div.footer-line-nav h3,
div.footer-line-nav p,
div.footer-line-nav ul li a {
	color: #FFFFFF;
}

.wrp-footer-page {
	width: 100%;
	height: auto;
	overflow: hidden;
	min-height: 265px;
}

.footer-line-nav {
	width: 100%;
	height: auto;
}

div.logo-footer-company a.logo-footer-small img {
	height: 210px;
	max-width: 210px;
	height: auto;
	overflow: hidden;
}

.red-yappika {
	background-color: #E02131;
}

/* .textshowless{
	display: none;
}

.textshowmore{
	display: none;
} */

/* ALL CAMPAIGN */
.section-all-campaign {
	width: 100%;
	height: auto;
	padding: 56px 0px;
	margin-top: 48px;
}

.wrp-search-bar {
	width: 100%;
	height: auto;
}

.labeling-searchbar {
	width: 100%;
	height: auto;
	font-family: "Mulish-Regular", sans-serif;
	color: #71716c;
}

.labeling-searchbar h3 {
	font-family: 'Rubik-Medium', sans-serif;
	font-size: 20px;
	line-height: 26px;
	margin-bottom: 15px;
	margin-top: 10px;
	letter-spacing: 0.65px;
	color: #202020;
}

.select2-container {
	width: 100% !important;
	display: block;
}

.select2-container--default .select2-selection--single {
	min-height: 56px;
	height: 56px !important;
	min-width: 110px !important;
	border: 1px solid #AEAEAE !important;
	border: 1px solid #ced4da;
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
	border-top-left-radius: 9.5px;
	border-bottom-left-radius: 9.5px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	color: #797979;
	line-height: 53px;
	font-size: 15.5px;
	padding-left: 14px;
	padding-right: 30px;
	font-family: "Rubik-Regular", sans-serif;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 15px;
	right: 8px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background-color: #5a79bc;
	color: white;
}

.select2-results__option {
	padding: 9.5px 9px;
}

.wrp-search-campaign {
	width: 100%;
	height: auto;
	min-height: 52px;
}

.search-page input.form-control {
	font-size: 1rem;
	font-weight: 400;
	line-height: 2.0;
	height: 56px;
	border: 1.5px solid #AEAEAE;
	margin-bottom: 24px;
	font-family: "Rubik-Regular", sans-serif;
}

.search-page input.form-control:focus {
	box-shadow: none;
}

.btn-submit-search {
	background: #e32028;
	color: #fff;
	padding: 13.6px 32px;
	border-color: #e32028;
	font-family: "Rubik-Medium", sans-serif;
	font-size: 18px;
	letter-spacing: 0.5px;
	border-top-right-radius: 9.5px;
	border-bottom-right-radius: 9.5px;
}

.btn-submit-search:hover {
	background: #d81a1f;
	color: #fff;
}

.btn-submit-search:focus {
	background: #d81a1f;
	color: #fff;
	box-shadow: none;
	outline: none;
}

.pagi-nation {
	position: relative;
	margin-bottom: -11px;
	list-style: none;
	margin: 0 auto;
	margin-top: 0px;
	font-family: "Mulish-Regular", sans-serif;
	color: #828282;
	flex-wrap: wrap;
	padding-left: 0px;
	margin-bottom: 6px;
}

.pagi-nation li {
	float: left;
	margin-right: 3px;
	margin-left: 3px;
	margin-bottom: 10px;
}

.pagi-nation li a {
	width: 32px;
	height: 32px;
	line-height: 30px;
	text-align: center;
	border: 1px solid transparent;
	font-size: 14px;
	color: #494949;
	display: table;
	border-radius: 50%;
	margin-right: 4px;
	text-decoration: none;
	outline: none;
}

.pagi-nation li.active a {
	border: 1px solid #5a79bc;
	background: #5a79bc;
	color: #fff !important;
}

.pagi-nation li.active a:hover {
	border: 1px solid #e32028;
	background: #e32028;
	color: #fff !important;
}

.margin-top-40 {
	margin-top: 48px !important;
}

.pagi-nation li a {
	color: #464646 !important;
}

.pagi-nation li a:hover {
	color: #e32028 !important;
}

.pagi-nation li a:hover {
	border: 1px solid #e32028;
	font-size: 14px;
	color: #e32028;
	display: table;
	border-radius: 50%;
	outline: none;
}

.pagi-nation li.next a {
	border: 1px solid #494949;
	padding-right: 18px;
	padding-left: 18px;
	color: #494949 !important;
	border-radius: 18px;
}

.pagi-nation li.next a:hover {
	border: 1px solid #e32028;
	color: #e32028 !important;
	text-decoration: none;
	outline: none;
}

.pagi-nation li.prev a {
	border: 1px solid #494949;
	padding-right: 18px;
	padding-left: 18px;
	border-radius: 18px;
	color: #494949;
}

.pagi-nation li.prev a:hover {
	border: 1px solid #e32028;
	color: #e32028 !important;
	text-decoration: none;
	outline: none;
}

/* ALL CAMPAIGN END */

.wrap-desc-campaign {
	height: auto;
	position: relative;
	padding-bottom: 48px;
	margin-bottom: 48px;
}

.limited-desc {
	max-height: 1024px;
	-webkit-box-shadow: inset 0px -40px 15px -15px #ffffff;
	box-shadow: inset 0px -40px 15px -15px #ffffff;
	overflow: hidden;
	padding-bottom: 36px;
	position: relative;
}

.limited-desc-petisi {
	max-height: unset;
	margin-bottom: 40px;
}

.white-box-shadow {
	-webkit-box-shadow: inset 0px -40px 15px -15px #fff;
	box-shadow: inset 0px -64px 15px -15px #fff;
	height: 100px;
	width: 100%;
	display: block;
	position: absolute;
	bottom: -3px;
	z-index: 2;
}

.limited-desc {
	margin-bottom: 40.5px;
}

.readmore-description {
	cursor: pointer;
	margin-bottom: 15px;
	position: absolute;
	bottom: -15px;
	z-index: 3;
	font-size: 12.5px;
	font-family: "Mulish-SemiBold", sans-serif;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
}

.textshowmore {
	background: rgba(216, 26, 31, 0.15);
	font-size: 14px;
	letter-spacing: 0.4px;
	color: #d81a1f;
	font-family: "Mulish-SemiBold", sans-serif;
	padding: 6px 26px;
	border-radius: 21px !important;
	overflow: hidden;
	max-width: 196px;
	text-align: center;
	margin: 0 auto;
	display: block;
}

.textshowless {
	background: rgba(216, 26, 31, 0.15);
	font-size: 14px;
	letter-spacing: 0.4px;
	color: #d81a1f;
	font-family: "Mulish-SemiBold", sans-serif;
	padding: 5px 26px;
	border-radius: 21px !important;
	overflow: hidden;
	max-width: 196px;
	text-align: center;
	margin: 0 auto;
	display: none;
}


/* Campaign Updates start */

.campaign-updates {
	width: 100%;
	height: auto;
	margin-top: 15px;
	padding: 20px 0px 30px 0px;
	position: relative;

}

/* .campaign-updates::before{
	content: " ";
	height: 100%;
	width: 6px;
	background: #dedede;
	top: 96px;
	left: 0px;
	position: absolute;
} */

.wrp-liner-time {
	position: relative;
	width: 100%;
	height: auto;
	padding-left: 36px;
	margin-left: 12px;
	border-left: 4px solid #dedede;
}

.wrp-liner-time::before {
	position: absolute;
	top: 0px;
	left: -4px;
	width: 12px;
	height: 64px;
	background: #fff;
	content: " ";
	z-index: 3;
}

.wrp-liner-time::after {
	content: " ";
	position: absolute;
	left: -18px;
	bottom: -5px;
	background: #ddd;
	width: 30px;
	height: 30px;
	border-radius: 15.5px;
	opacity: 1;
	z-index: 3;
}

.card-campaign-updates {
	width: 100%;
	height: auto;
	border-radius: 22px;
	min-height: 76px;
	background: #f8f9fa;
	border: 1px solid #dfdfdf;
	margin: 24px 0px 20px 0px;

}

.card-campaign-updates-pointer {
	position: relative;
}

.card-campaign-updates-pointer::before {
	content: " ";
	position: absolute;
	left: -54px;
	top: 56px;
	background: #ee8c90;
	width: 30px;
	height: 30px;
	border-radius: 15.5px;
	opacity: 1;
	z-index: 3;
}

.card-campaign-updates-pointer::after {
	content: " ";
	position: absolute;
	left: -48px;
	top: 62px;
	background: #e32028;
	width: 18px;
	height: 18px;
	border-radius: 9.5px;
	z-index: 3;
}

.contet-card-campaign-text {
	font-family: "Mulish-Regular", sans-serif;
	font-size: 17.5px;
	line-height: 25px;
	letter-spacing: 0.25px;
	color: #71716c;
	padding: 30px 34px 24px 34px;
	margin-top: 15px;
	margin-bottom: 20px;
}

.contet-card-campaign-text h1 {
	font-size: 25px;
	line-height: 32px;
	font-family: 'Rubik-Medium', sans-serif;
	margin-bottom: 21px;
	color: #393939;
}

.contet-card-campaign-text h2 {
	font-size: 24px;
	line-height: 31.5px;
	font-family: 'Rubik-Medium', sans-serif;
	margin-bottom: 20px;
	color: #393939;
}

.contet-card-campaign-text h3 {
	font-size: 22.5px;
	line-height: 30.5px;
	font-family: 'Rubik-Medium', sans-serif;
	margin-bottom: 20px;
	color: #393939;
}

.contet-card-campaign-text h4 {
	font-size: 20px;
	line-height: 27px;
	font-family: 'Rubik-Medium', sans-serif;
	margin-bottom: 18px;
	color: #393939;
}

.contet-card-campaign-text h5 {
	font-size: 18px;
	line-height: 24px;
	font-family: 'Rubik-Medium', sans-serif;
	margin-bottom: 15px;
	color: #393939;
}

.contet-card-campaign-text h6 {
	font-size: 16px;
	line-height: 20px;
	font-family: 'Rubik-Medium', sans-serif;
	margin-bottom: 14px;
	color: #393939;
}

.contet-card-campaign-text ul {
	padding-left: 16px;
}

.contet-card-campaign-text ul li {
	list-style: disc;
	line-height: 26px;
}

.contet-card-campaign-text ul li p {
	line-height: 16px;
	margin-bottom: 10px;
}



.updates-campaign-title {
	width: 100%;
	height: auto;
}

.campaign-update-time {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 32px;
}

.admin-writer {
	flex: 0 0 56px;
	-ms-flex: 0 0 56px;
	max-width: 56px;
	width: 56px;
	height: 56px;
	border-radius: 27.5px;
	background: #f9c6ca;
	overflow: hidden;
}

.admin-name {
	padding-left: 18px;
	flex: 0 0 85%;
	-ms-flex: 0 0 85%;
	max-width: 85%;
	font-family: "Mulish-Regular", sans-serif;
	font-size: 17px;
	line-height: 23px;
	letter-spacing: 0.2px;
	color: #71716c;
}

.admin-name h5 {
	font-family: "Rubik-Medium", sans-serif;
	font-size: 18px;
	line-height: 21px;
	margin-bottom: 2px;
	letter-spacing: 0.35px;
	color: #393939;
}

.contet-card-campaign-text img {
	max-width: 100%;
	height: auto;
	border-radius: 4px;
}

.admin-name p {
	margin-bottom: 4px;
}

.section-grey-news {
	background: #f8f9fa;
	width: 100%;
	min-height: 265px;
	height: auto;
	padding: 64px 0px;
	margin-top: 24px;
}

.title-updates-story {
	width: 100%;
	height: auto;
	overflow: hidden;
	font-family: "Rubik-SemiBold", sans-serif;
}

.title-updates-story h1 {
	color: #363636;
	font-size: 32px;
	line-height: 36.5px;
	font-family: 'Rubik-SemiBold', sans-serif;
	margin-bottom: 32px;
	margin-top: 12px;
}

.wrp-primary-img-story {
	width: 100%;
	height: auto;
}

.wrp-primary-img-story img {
	border-radius: 4px !important;
}

/* Campaign Updates end */

/* Campaign Updates Content start */

.card-campaign-updates-content {
	width: 100%;
	height: auto;
	border-radius: 22px;
	min-height: 76px;
	background: #fff;
	/* border:1px solid #dfdfdf; */
	margin: 24px 0px 20px 0px;
}

.card-campaign-updates-content-full-gallery {
	width: 100%;
	height: auto;
}

.card-campaign-updates-content-full-gallery img {
	border-radius: 4px;
}

.card-campaign-updates-content .contet-card-campaign-text p {
	margin-bottom: 40px;
}

.card-campaign-updates-content .contet-card-campaign-text ul li p {
	line-height: 16px;
	margin-bottom: 10px;
}


.contet-card-campaign-text ol {
	padding-left: 16px;
}

.contet-card-campaign-text ol li {
	list-style: decimal;
	line-height: 26px;
	padding-left: 6px;
}

.card-campaign-updates-content .contet-card-campaign-text ol li p {
	line-height: 16px;
	margin-bottom: 10px;
}

.wrp-image-before {
	position: relative;
	width: 100%;
	height: auto;
	overflow: hidden !important;
	border-radius: 4px;
	margin-bottom: 8px;
}


.wrp-image-before span {
	position: absolute;
	bottom: 24px;
	left: 20px;
	font-family: "Rubik-Medium", sans-serif;
	font-size: 20px;
	line-height: 24px;
	margin-bottom: 2px;
	letter-spacing: 0.45px;
	color: #fff;
	z-index: 3;
}

.wrp-image-before::before {
	width: 100%;
	height: 89px;
	display: block;
	content: " ";
	position: absolute;
	z-index: 2;
	bottom: 0px;
	left: 0px;
	background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
	/* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
	/* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
	/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#a6000000', GradientType=0);
	/* IE6-9 */
}

.wrp-image-before img {
	max-width: 100%;
	height: auto;
	filter: grayscale(70%);
	border-radius: 4px !important;
	margin-bottom: 0px;
}

.wrp-image-after {
	position: relative;
	width: 100%;
	height: auto;
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: 8px;
}

.wrp-image-after span {
	position: absolute;
	bottom: 24px;
	left: 20px;
	font-family: "Rubik-Medium", sans-serif;
	font-size: 20px;
	line-height: 24px;
	margin-bottom: 2px;
	letter-spacing: 0.45px;
	color: #fff;
	z-index: 3;
}

.wrp-image-after::before {
	width: 100%;
	height: 89px;
	display: block;
	content: " ";
	position: absolute;
	z-index: 3;
	bottom: 0px;
	left: 0px;
	background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
	/* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
	/* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
	/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#a6000000', GradientType=0);
	/* IE6-9 */
}

.wrp-image-after img {
	max-width: 100%;
	height: auto;
	border-radius: 4px !important;
	margin-bottom: 0px;
}

/* Campaign Updates Content start */


/* SECTION DONATION STEP 2 */

.form-step-container {
	position: relative;
	z-index: 13;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	top: -27.5px;
	height: 100%;
}


.width-maximum-form {
	width: 100%;
	height: auto;
	padding-left: 36px;
	padding-right: 36px;
}

.wrp-section-donation-step {
	overflow: hidden;
	padding: 0px 30px 36px 30px;
	width: 100%;
	height: 100%;
	border: 1px solid #dedede;
	border-radius: 25.5px;
	background: #fff;
	/* background: rgba(255,255,255,0.90);
	backdrop-filter: blur(996px); */
}

.section-donation-step::before {
	content: " ";
	position: fixed;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.24);
	left: 0px;
	top: 0px;
	z-index: 12;
	/* display: none; */
}

.section-donation-step {
	width: 100%;
	height: auto;
	padding: 56px 0px;
	min-height: 480px;
	font-family: "Mulish-Regular", sans-serif;
	margin-top: 0px;
	margin-bottom: 32px;
	position: relative;
}

.header-step-process {
	height: auto;
	width: 100%;
	padding: 10px 0px 6.5px 1px;
}

.header-step-process h2 {
	font-family: "Rubik-Medium", sans-serif;
	color: #363636;
	font-size: 17px;
	line-height: 21px;
	margin-top: 5px;
	width: 90%;
}

.arrow-back {
	padding: 5px 12px 5px 2px;
	margin-right: 6px;
}

.arrow-back img {
	width: 18px;
	height: auto;
}


/* ARROW BACK NAVIGATION STEP */

.link--arrowed .arrow-icon {
	position: absolute;
	top: -1px;
	left: 0px;
	-webkit-transition: -webkit-transform 0.3s ease;
	transition: -webkit-transform 0.3s ease;
	transition: transform 0.3s ease;
	transition: transform 0.3s ease, -webkit-transform 0.3s ease;
	vertical-align: middle;
	transform: rotate(180deg);
}

.arrow-back-navigation {
	padding: 12px 0px 6px 0px;
}

.link {
	color: #363636;
	cursor: pointer;
	text-decoration: none;
}

.link--arrowed {
	display: inline-block;
	height: 40px;
	position: relative;
	padding-left: 46px;
	color: #363636 !important;
	font-family: "Rubik-Medium", sans-serif;
	letter-spacing: 0.25px;
	font-size: 17px;
	line-height: 24.5px;
}

.link--arrowed .arrow-icon {
	position: absolute;
	top: -2.5px;
	left: 1px;
	-webkit-transition: -webkit-transform 0.3s ease;
	transition: -webkit-transform 0.3s ease;
	transition: transform 0.3s ease;
	transition: transform 0.3s ease, -webkit-transform 0.3s ease;
	vertical-align: middle;
	transform: rotate(180deg);
}

.link--arrowed .arrow-icon--circle {
	-webkit-transition: stroke-dashoffset .3s ease;
	transition: stroke-dashoffset .3s ease;
	stroke-dasharray: 95;
	stroke-dashoffset: 95;
}

.link--arrowed:hover .arrow-icon {
	-webkit-transform: translate3d(5px, 0, 0);
	transform: translate3d(5px, 0, 0);
	transform: rotate(180deg);

}

.link--arrowed:hover .arrow-icon--circle {
	stroke-dashoffset: 0;

}

.link--arrowed:hover {
	color: #363636 !important;
	text-decoration: none;
}

.link--arrowed:focus {
	color: #363636 !important;
	outline: none;
}

/* ARROW BACK NAVIGATION STEP */


/* SECTION DONATION STEP 2 */


/* SECTION DONATION STEP 3 */

.line-separator-step {
	width: 100%;
	height: 2.5px;
	position: relative;
	overflow: unset;
}

.line-separator-step::before {
	content: " ";
	width: 100vw;
	position: absolute;
	width: 100vw;
	height: 1px;
	background: #dfdfdf;
	left: -86px;
	top: -8px;
}

.wrp-payment-link {
	width: 100%;
	height: auto;
	min-height: 164px;
}

/* CHOOSE PAYMENT LINK HREF */

.outline-link-payment {
	width: 100%;
	height: auto;
	max-height: 86px;
	margin-bottom: 8px;
	border-radius: 9.5px;
}


.outline-link-bank-payment {
	width: 100%;
	height: auto;
	min-height: 86px;
	overflow: hidden !important;
	margin-bottom: 8px;
}

.outline-link-payment a {
	width: 100%;
	display: block;
	width: 100%;
	height: 100vh;
}

.choose-payment-link {
	pointer-events: auto;
	height: auto;
	background: #f9f9f9;
	border: 2px solid #f9f9f9;
	border-radius: 9.5px;
	margin-bottom: 7px;
	min-height: 86px;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	font-family: "Mulish-SemiBold", sans-serif !important;
}

.choose-payment-link:hover {
	background: #fff;
	border: 2px solid #2085c8;
	box-shadow: 4px -1px 21px rgba(0, 0, 0, 0.09);
	color: #363636;
	cursor: pointer;
}

.choose-payment-link-bank {
	pointer-events: auto;
	height: auto;
	background: #f9f9f9;
	border: 2px solid #f9f9f9;
	border-radius: 9.5px;
	margin-bottom: 7px;
	min-height: 86px;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	border-radius: 5px;
	font-family: "Mulish-SemiBold", sans-serif !important;
	padding-bottom: 8px;
	padding-top: 4px;
}

.choose-payment-link-bank:hover {
	background: #fff;
	border: 2px solid #2085c8;
	box-shadow: 4px -1px 21px rgba(0, 0, 0, 0.09);
	color: #363636;
	cursor: pointer;
}

.choose-payment-link span {
	font-family: "Rubik-Regular", sans-serif;
	color: #363636;
	font-size: 16.5px;
	line-height: 20px;
	letter-spacing: 0.35px;
}

.brand-logo-payment {
	width: 115px;
	height: auto;
	overflow: hidden;
	text-align: center;
	margin-right: 1px;
	padding-left: 15px;
}

.brand-logo-payment img.logo-payment-methode {
	max-width: 100%;
}

.choose-payment-link-bank .brand-logo-payment {
	width: 24.2%;
	max-width: 24.2%;
	flex: 0 0 24.2%;
	-ms-flex: 0 0 24.2%;
	padding-left: 0px;
}


/* CHOOSE PAYMENT LINK HREF */

/* SECTION DONATION STEP 3 */
#formdonation {
	width: 100%;
	height: 14px;
	position: absolute;
	margin-top: -82px;
}

/* FLOATING LABEL FORM */
.form-group-line {
	margin-bottom: 30px !important;
}

.form-group-line label {
	color: #696969;
	font-size: 14px;
	font-family: 'Mulish-Regular', sans-serif;
}

.form-label-group {
	position: relative;
}

.form-label-group>input,
.form-label-group>label {
	height: 45px;
	padding: 14px 15px;
	font-size: 15px;
	color: #606060;
	font-family: "Mulish-Bold", sans-serif;
}

.form-label-group>label {
	position: absolute;
	top: 3px;
	left: 0;
	display: block;
	width: 100%;
	margin-bottom: 0;
	line-height: 1.5;
	/*color: #798086;*/
	color: #b6b6b8;
	pointer-events: none;
	cursor: text;
	border-radius: .25rem;
	transition: all .1s ease-in-out;
}

.form-label-group input::-webkit-input-placeholder {
	color: transparent;
}

.form-label-group input:-ms-input-placeholder {
	color: transparent;
}

.form-label-group input::-ms-input-placeholder {
	color: transparent;
}

.form-label-group input::-moz-placeholder {
	color: transparent;
}

.form-label-group input::placeholder {
	color: transparent;
}

.form-label-group input:not(:placeholder-shown) {
	padding-top: 9px;
	padding-bottom: 9px;
}

.form-label-group input:not(:placeholder-shown)~label {
	padding-top: 3px;
	padding-bottom: 3px;
	font-size: 12px;
	color: #777;
	top: -12px;
	background: #fff;
	padding-right: 4px;
	padding-left: 10px;
	z-index: 1 !important;
	width: auto;
	margin-bottom: 0px;
	height: 25px;
	left: 4px;
	letter-spacing: 0.4px;
}

.form-label-group textarea::-webkit-textarea-placeholder {
	color: transparent;
}

.form-label-group textarea:-ms-textarea-placeholder {
	color: transparent;
}

.form-label-group textarea::-ms-textarea-placeholder {
	color: transparent;
}

.form-label-group textarea::-moz-placeholder {
	color: transparent;
}

.form-label-group textarea::placeholder {
	color: transparent;
}

.form-label-group textarea:not(:placeholder-shown) {
	padding-top: 9px;
	padding-bottom: 9px;
}

.form-label-group textarea:not(:placeholder-shown)~label {
	padding-top: 3px;
	padding-bottom: 3px;
	font-size: 11px;
	color: #777;
	top: -12px;
	background: #fff;
	padding-right: 4px;
	padding-left: 10px;
	z-index: 1 !important;
	width: auto;
	margin-bottom: 0px;
	height: 25px;
	left: 4px;
}

.form-label-static {
	height: 45px;
	padding: 14px 15px;
	font-size: 14.5px;
}

.form-select-static {
	height: 45px;
	padding: 10px 15px;
	font-size: 14.5px;
}

.reset-box-shadow:focus {
	border-color: #AEAEAE !important;
	box-shadow: none !important;
	text-shadow: none !important;
}

.was-validated .form-control:invalid {
	background-image: none !important;
}

.form-control-plaintext {
	height: auto;
	padding-left: 0px !important;
	font-size: 17px !important;
}

.form-control-plaintext:focus {
	height: auto;
	border-color: #fff !important;
}

.form-label-group-plain-text {
	position: relative;
	padding: 15px 10px 5px 1px;
}

.form-label-group-plain-text input:not(:placeholder-shown)~label {
	padding-top: 3px;
	padding-bottom: 3px;
	font-size: 13px;
	color: #777;
	top: -10px;
	background: transparent;
	padding-right: 4px;
	padding-left: 10px;
	z-index: 1 !important;
	width: auto;
	margin-bottom: 0px;
	height: 25px;
	left: -8px;
}

.form-label-group-plain-text>label {
	position: absolute;
	top: -10px;
	left: 0;
	display: block;
	width: 100%;
	margin-bottom: 0;
	line-height: 1.5;
	color: #798086;
	color: #b6b6b8;
	pointer-events: none;
	cursor: text;
	border-radius: .25rem;
	transition: all .1s ease-in-out;
}


.form-label-group-disable {
	position: relative;
	padding: 15px 10px 5px 1px;
}

.form-label-group-disable>input,
.form-label-group-disable>label {
	height: 45px;
	padding: 14px 15px;
	font-size: 14.5px;
}


.form-label-group-disable input:not(:placeholder-shown)~label {
	padding-top: 3px;
	padding-bottom: 3px;
	font-size: 13px;
	color: #777;
	top: -10px;
	background: transparent;
	padding-right: 4px;
	padding-left: 10px;
	z-index: 1 !important;
	width: auto;
	margin-bottom: 0px;
	height: 25px;
	left: -8px;
}

.form-label-group-disable>label {
	position: absolute;
	top: -10px;
	left: 0;
	display: block;
	width: 100%;
	margin-bottom: 0;
	line-height: 1.5;
	color: #b6b6b8;
	pointer-events: none;
	cursor: text;
	border-radius: .25rem;
	transition: all .1s ease-in-out;
}

.form-label-group .form-control:disabled input:not(:placeholder-shown)~label {
	background-color: #cf0000 !important;
}

/* FLOATING LABEL FORM */

a.btn-block-form-donation {
	color: #fff;
	background: #5a79bc;
	text-align: center;
	width: 100%;
	display: block;
	padding: 17px 10px;
	letter-spacing: 0.4px;
	font-family: "Rubik-SemiBold", sans-serif;
	border-radius: 9.5px;
}

a.btn-block-form-donation:hover {
	text-decoration: none;
	outline: none;
	box-shadow: 0 10px 29px 0 rgba(8, 47, 131, 0.10);
	box-shadow: 0 0px 29px 0 rgba(8, 47, 131, 0.10);
	-ms-box-shadow: 0 0px 29px 0 rgba(8, 47, 131, 0.10);
}

a.btn-block-form-donation:focus {
	text-decoration: none;
	outline: none;
	box-shadow: 0 10px 29px 0 rgba(8, 47, 131, 0.10);
	box-shadow: 0 0px 29px 0 rgba(8, 47, 131, 0.10);
	-ms-box-shadow: 0 0px 29px 0 rgba(8, 47, 131, 0.10);
}

a.btn-block-form-donation img {
	margin-right: 6px;
	position: relative;
	margin-top: -3.2px;
}

a.btn-block-form-donation:hover {
	color: #fff;
	background: #5a79bc;
	text-decoration: none;
}

a.btn-block-form-donation:focus {
	color: #fff;
	background: #5a79bc;
	text-decoration: none;
}

.modal-backdrop.show {
	opacity: .64;
}

/* FOOTER SECTION END */


/* BUTTON FORM DONATION */

button.btn-block-form-donation {
	color: #fff;
	background: #5a79bc;
	text-align: center;
	width: 100%;
	display: block;
	padding: 18px 10px;
	letter-spacing: 0.4px;
	font-family: "Rubik-SemiBold", sans-serif;
	border-radius: 9.5px;
}

button.btn-block-form-donation:hover {
	text-decoration: none;
	outline: none;
	box-shadow: 0 10px 29px 0 rgba(8, 47, 131, 0.10);
	box-shadow: 0 0px 29px 0 rgba(8, 47, 131, 0.10);
	-ms-box-shadow: 0 0px 29px 0 rgba(8, 47, 131, 0.10);
	color: #fff;
}

button.btn-block-form-donation:focus {
	text-decoration: none;
	outline: none;
	box-shadow: 0 10px 29px 0 rgba(8, 47, 131, 0.10);
	box-shadow: 0 0px 29px 0 rgba(8, 47, 131, 0.10);
	-ms-box-shadow: 0 0px 29px 0 rgba(8, 47, 131, 0.10);
}

button.btn-block-form-donation img {
	margin-right: 6px;
	position: relative;
	margin-top: -3.2px;
}

a.btn-block-form-donation:hover {
	color: #fff;
	background: #5a79bc;
	text-decoration: none;
}

a.btn-block-form-donation:focus {
	color: #fff;
	background: #5a79bc;
	text-decoration: none;
}


.btn-outline-block-form-donation {
	color: #5a79bc;
	background: #fff;
	text-align: center;
	width: 100%;
	display: block;
	padding: 16px 10px;
	letter-spacing: 0.4px;
	font-family: "Rubik-SemiBold", sans-serif;
	border-radius: 9.5px;
	border: 2px solid #5a79bc;
}

.btn-outline-block-form-donation img {
	margin-right: 6.5px;
	position: relative;
	margin-top: -3.2px;
}

.btn-outline-block-form-donation:hover {
	color: #5a79bc;
	text-decoration: none;
	outline: none;
	box-shadow: 0 10px 29px 0 rgba(8, 47, 131, 0.10);
	box-shadow: 0 0px 29px 0 rgba(8, 47, 131, 0.10);
	-ms-box-shadow: 0 0px 29px 0 rgba(8, 47, 131, 0.10);
}

.btn-outline-block-form-donation:focus {
	color: #5a79bc;
	text-decoration: none;
	outline: none;
	box-shadow: none;
}

.readmore-petisi {
	display: none;
}

.limited-desc-petisi .white-box-shadow {
	display: none;
}


/* BUTTON FORM DONATION */


/* (1366x768) WXGA Display */
@media screen and (max-width: 1366px) {
	img.for-bg-cover-campaign {
		max-width: 112%;
		width: 112%;
		left: -4.5%;
	}
}


/* OPTION RADIO MONTLHY ONE TIME GLOBAL */


.option-monthly-annual {
	margin-top: 24px;
	margin: 0 auto;
	/* min-width: 432px;
	max-width: 432px; */
	width: 100%;
	min-height: 82px;
	border: 1px solid var(--grey-two);
	border-radius: 6.4px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	-ms-align-items: center;
	-moz-align-items: center;
	-webkit-align-items: center;
	padding: 0px 0px;
}
.option-monthly-annual-mobile {
	margin-top: 24px;
	margin: 0 auto;
	/* min-width: 432px;
	max-width: 432px; */
	width: 100%;
	min-height: 82px;
	border: 1px solid var(--grey-two);
	border-radius: 6.4px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	-ms-align-items: center;
	-moz-align-items: center;
	-webkit-align-items: center;
	padding: 0px 0px;
	margin-bottom: 8px;
}

.option-monthly-annual-mobile input[type="radio"]:checked + label {
	background: #ededed !important;
	border: 1px solid #5a79bc !important;
	color: #fff;
	font-family: "Mulish-Bold", sans-serif !important;
  }

.form-group-calculator {
	width: 50%;
	position: relative;
}

.card-income {
	width: 100%;
	height: auto;
	min-height: 164px;
	padding: 20px 40px 20px 40px;
	margin-top: 16px;
	margin-bottom: 16px;
	background: #fff;
	border: 1px solid #e9eefb !important;
	border-radius: 6.4px;
	box-shadow: 0 10px 29px 0 rgba(0, 0, 0, 0.033);
	-ms-box-shadow: 0 12px 32px 0 rgba(0, 0, 0, 0.033);
	-moz-box-shadow: 0 12px 32px 0 rgba(0, 0, 0, 0.033);
	-webkit-box-shadow: 0 12px 32px 0 rgba(0, 0, 0, 0.033);
	z-index: 2;
	position: relative;
	margin: 48px 0px 20px 0px;
	min-height: 564px;
}

.form-group-statics {
	position: relative;
	padding-top: 17px;
}

.form-group-statics label {
	font: normal 600 16.24px/30.64px var(--font-jakarta-sans);
	color: var(--black-100);
	margin-bottom: 8px;
}

.form-group-statics .currency-label {
	left: 10px;
	top: 66px;
}

.form-group-statics .currency-label::before {
	display: none;
}

.form-group-statics .input-fit {
	padding-left: 60px;
	margin-bottom: 8px;
}

.caption-state-label {
	width: 100%;
	height: auto;
	position: relative;
	margin-top: -36px;
	min-height: 134px;
}

.title-state-label {
	width: 100%;
	height: auto;
	position: relative;
	margin-bottom: 24px;
	font: normal 400 15.24px/26.64px;
	color: #363636;
	letter-spacing: 0.35px;
}

.title-state-label h3 {
	font: normal 700 18.24px/27.64px;
	padding-right: 10px;
	color: var(--black-100);
	margin-bottom: 18px;
	width: auto;
	display: unset;
	background: #fff;
	padding: 8px 10px;
	margin-left: -10px;
	letter-spacing: 0.35px;
}

.content-state-label {
	font: normal 400 15.24px/26.64px;
	color: #363636;
	letter-spacing: 0.35px;
}

.content-state-label p {
	margin-bottom: 12px;
}

.option-monthly-annual input[type="radio"] {
	opacity: 0;
	position: fixed;
	width: 0;
	font-weight: 500;
	position: absolute;
}

.option-monthly-annual label {
	display: inline-block;
	background-color: #fff;
	padding: 16px 5px;
	font: normal 400 12.24px/26.64px;
	border: 1px solid #fff;
	border-radius: 4px;
	width: 100%;
	color: transparent!important;
	text-align: center;
	margin-top: 6px;
	cursor: pointer;
	margin-bottom: 6px;
	text-transform: uppercase;
	position: relative;
	margin-left: 1px;
	margin-right: 1px;
}

.option-monthly-annual input[type="radio"]:checked+label {
	background: #fff!important;
	border: 1px solid #5a79bc!important;
	color: #fff!important;
	font: normal 400 13.24px/26.64px;
}

.option-monthly-annual input[type="radio"]:checked+label::before {
	content: " ";
	background: transparent url(../images/checklist-circle.svg) top center no-repeat;
	width: 30px;
	height: 30px;
	position: absolute;
	right: unset;
	top: 14.24px;
    left: 15.24%;
	border-top-right-radius: 3.4px;
	border-top-left-radius: 0px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 3.4px;
	background-size: 91%!important;
}

.option-monthly-annual-mobile input[type="radio"]:checked+label::before {
	content: " ";
	background: transparent url(../images/checklist-circle.svg) top center no-repeat;
	width: 30px;
	height: 30px;
	position: absolute;
	right: unset;
	top: 14.24px;
    left: 15.24%;
	border-top-right-radius: 3.4px;
	border-top-left-radius: 0px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 3.4px;
	background-size: 86%!important;
}

.option-monthly-annual-mobile .form-group-calculator:last-child input[type="radio"]:checked + label:hover::before {
	background: transparent url(../images/checklist-circle.svg) top center no-repeat !important;
	background-size: 86%!important;
	top: 14.24px;
	left: 15.24%;
	background-size: 86% !important;
  }
.option-monthly-annual-mobile .form-group-calculator:first-child input[type="radio"]:checked + label:hover::before {
	background: transparent url(../images/checklist-circle.svg) top center no-repeat !important;
	background-size: 86%!important;
	top: 14.24px;
	left: 15.24%;
	background-size: 86% !important;
}
.donation-form-action .m-recuring .option-monthly-annual-mobile label {
	/* color: yellow; */
	color: transparent;
}

.donation-form-action .m-recuring .option-monthly-annual-mobile input[type="radio"]:checked + label {
	/* color: yellow; */
	color: transparent;
}

.option-monthly-annual input[type="radio"]+label:hover {
	background: #f9f9f9;
	color: #f9f9f9;
}

.option-monthly-annual input[type="radio"]:checked+label:hover {
	background: #f9f9f9;
	border: 1px solid #f9f9f9;
	color: #fff;
}

.option-monthly-annual .form-group-calculator:first-child input[type="radio"]:checked+label::before {
	/* left: 20%; */
	left: 4.8%;
}

.option-monthly-annual .form-group-calculator:first-child input[type="radio"]+label:hover {
	background: #f9f9f9;
	color: #f9f9f9;
}

.option-monthly-annual .form-group-calculator:first-child input[type="radio"]+label:hover::before {
	content: " ";
	background: #f9f9f9 url(../images/checklist-circle-grey.svg) top center no-repeat;
	color: #f9f9f9;
	width: 30px;
	height: 30px;
	position: absolute;
	right: unset;
	top: 10.24px;
	/* left: 20%; */
	left: 4.8%;
	border-top-right-radius: 3.4px;
	border-top-left-radius: 0px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 3.4px;
	background-size: 91%!important;
}

.option-monthly-annual .form-group-calculator:first-child label::after {
	content: "Perbulan";
	content: var(--var-mounthly);
	text-transform: uppercase;
	position: absolute;
	/* left: 39%; */
	left: 24%;
	top: 12px;
	z-index: 3;
	color: #363636;
	font-size: 11.64px;
	font-family: "Mulish-ExtraBold", sans-serif;
}

.option-monthly-annual .form-group-calculator:first-child label::after {
	content: "Perbulan";
	content: var(--var-mounthly);
	text-transform: uppercase;
	position: absolute;
	/* left: 39%; */
	left: 24%;
	top: 12px;
	z-index: 3;
	color: #363636;
	font-size: 11.64px;
	font-family: "Mulish-ExtraBold", sans-serif;
}


.option-monthly-annual-mobile .form-group.form-group-calculator input[type="radio"] {
	opacity: 0;
	position: fixed;
	width: 0;
	font-weight: 500;
	position: absolute;
  }

.option-monthly-annual-mobile .form-group-calculator:first-child label::after {
	content: "Perbulan";
	content: var(--var-mounthly-mobile);
	text-transform: uppercase;
	position: absolute;
	/* left: 39%; */
	left: 34.64%;
    top: 18px;
	z-index: 3;
	color: #363636;
	font-size: 11.64px;
	font-family: "Mulish-ExtraBold", sans-serif;
}

.option-monthly-annual .form-group-calculator:first-child input[type="radio"]:checked+label::after {
	color: #363636!important;
}

.option-monthly-annual .form-group-calculator:first-child input[type="radio"]:checked+label:hover::before {
	background: transparent url(../images/checklist-circle.svg) top center no-repeat !important;
	left: 4.8%;
	background-size: 91%;
}

.option-monthly-annual .form-group-calculator:last-child input[type="radio"]:checked+label::before {
	left: 4.8%;
	color: var(--blue-two) !important;
	font-size: 11.64px;
}

.option-monthly-annual .form-group-calculator:last-child label::after {
	content: "Pertahun";
	content: var(--var-yearly);
	font-family: "Mulish-ExtraBold", sans-serif;
	color: #363636;
	text-transform: uppercase;
	position: absolute;
	left: 26.64%;
	top: 12px;
	z-index: 3;
	color: #363636;
	font-size: 11.64px;
}
.option-monthly-annual-mobile .form-group-calculator:first-child label{
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
}

.option-monthly-annual-mobile .form-group-calculator:last-child label{
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
}

.option-monthly-annual-mobile .form-group-calculator:last-child label::after {
	content: "Satu kali";
	content: var(--var-yearly-mobile);
	font-family: "Mulish-ExtraBold", sans-serif;
	color: #363636;
	text-transform: uppercase;
	position: absolute;
	left: 34.64%;
    top: 18px;
	z-index: 3;
	color: #363636;
	font-size: 11.64px;
}

.option-monthly-annual-mobile .form-group-calculator:first-child input[type="radio"] + label:hover::before {
	content: " ";
	background: transparent url(../images/checklist-circle-grey.svg) top center no-repeat;
	background-size: 89% !important;
	color: #f9f9f9;
	width: 30px;
	height: 30px;
	position: absolute;
	right: unset;
	top: 14.24px;
    left: 15.24%;;
	border-top-right-radius: 3.4px;
	border-top-left-radius: 0px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 3.4px;
	background-size: 91% !important;
}

.option-monthly-annual-mobile .form-group-calculator:last-child input[type="radio"] + label:hover::before {
	content: " ";
	background: transparent url(../images/checklist-circle-grey.svg) top center no-repeat;
	background-size: 89% !important;
	color: #f9f9f9;
	width: 30px;
	height: 30px;
	position: absolute;
	right: unset;
	top: 14.24px;
    left: 15.24%;;
	border-top-right-radius: 3.4px;
	border-top-left-radius: 0px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 3.4px;
	background-size: 91% !important;
  }


.option-monthly-annual .form-group-calculator:last-child input[type="radio"]:checked+label::after {
	color: #363636!important;
}

.option-monthly-annual .form-group-calculator:last-child input[type="radio"]:checked+label:hover::before {
	background: transparent url(../images/checklist-circle.svg) top center no-repeat!important;
	/* left: 20%; */
	left: 4.8%;
	background-size: 91%!important;
}

.option-monthly-annual .form-group-calculator:last-child input[type="radio"]+label:hover {
	background: #f9f9f9;
	color: #f9f9f9;
}

.option-monthly-annual .form-group-calculator:last-child input[type="radio"]+label:hover::before {
	content: " ";
	background: #f9f9f9 url(../images/checklist-circle-grey.svg) top center no-repeat;
	color: #f9f9f9;
	width: 30px;
	height: 30px;
	position: absolute;
	right: unset;
	top: 10.24px;
	/* left: 20%; */
	left: 4.8%;
	border-top-right-radius: 3.4px;
	border-top-left-radius: 0px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 3.4px;
	background-size: 91%!important;
}

/* OPTION RADIO MONTLHY ONE TIME GLOBAL */



/* DESKTOP MEDIA QUERY 1920 START */
@media screen and (min-width: 1920px) and (max-width: 1920px) {

	/* COSTUMIZED CONTAINER 1920*/
	.header ::before {
		opacity: .32;
		min-height: 124px;
		max-height: 125px;
	}

	.customized-container {
		max-width: 1580px;
	}

	.form-step-container {
		max-width: 1580px;
	}

	.title-form-campaign-yappika h1 {
		margin-top: 74px;
		margin-bottom: 24px;
	}

	#navbar-yappika {
		max-width: 76%;
		display: flex;
		flex: 0 0 76%;
		-ms-flex: 0 0 76%;
	}

	#navbar-yappika ul li a {
		color: #fff;
		font-size: 17px;
		line-height: 35px;
		font-family: 'Rubik-Medium', sans-serif;
		letter-spacing: 0.65px;
		overflow: hidden;
	}

	a.btn-form-donation {
		/* padding: 9px 10px;
	margin-left: 2px;
	padding: 9px 10px;
	margin-top: 5px;	 */
		margin-left: 2px;
		padding: 14px 12px;
		margin-top: 1px;
	}

	.section-list-primary {
		min-height: 1024px;
		background-size: 119% !important;
		overflow-x: hidden;
	}

	.section-list-petisi {
		min-height: 955px;
		background-size: 109% !important;
	}

	.primary-image-campaign {
		/* max-width: 132%;
		top: 39px; */
		max-width: 136%;
		width: 111.5%;
		top: 0px;
	}

	/* .col-zd-7{
		-ms-flex: 0 0 69%;
		flex: 0 0 69%;
		max-width: 69%;
	}

	.col-zd-5{
		-ms-flex: 0 0 31%;
		flex: 0 0 31%;
		max-width: 31%;
	}	   */




	/* CHANGE REVISI LAGI POSISI FORM DARI DIO untuk1920 */

	.width-maximum-form {
		width: 100%;
		height: auto;
		padding-left: 98px;
		padding-right: 98px;
	}

	.col-zd-7 {
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}

	.col-zd-5 {
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}

	#yappikaFormDonationContent {
		display: flex;
		flex-wrap: wrap;
		padding-left: 20px;
		padding-right: 20px;
		/* padding-top: 196px; */
		padding-top: 74px;
	}

	.title-form-campaign-yappika {
		-ms-flex: 0 0 64%;
		flex: 0 0 64%;
		max-width: 64%;
		order: 1;
		padding-left: 4px;
		padding-right: 136px;
		display: table;
		/* height: 420px; */
		/* height:620px; */
		height: 432px;
		position: relative;
	}

	#monthly-donate-tabs {
		-ms-flex: 0 0 36%;
		flex: 0 0 36%;
		max-width: 36%;
		order: 2;
		/* margin-top: 12px; */
		padding-left: 40px;
	}

	#single-donate-tabs {
		-ms-flex: 0 0 36%;
		flex: 0 0 36%;
		max-width: 36%;
		order: 2;
		margin-top: 12px;
		padding-left: 40px;
	}


	.title-form-campaign-yappika h1 {
		vertical-align: middle;
		display: table-cell;
		font-size: 32.5px;
		line-height: 45px;
	}

	.wrp-form-donation {
		padding: 10px 36px 0px 36px;
		/* min-height: 350px; */
		min-height: 256px;
	}

	#recuring .form-group {
		/* margin-bottom: 20px; */
		margin-bottom: 16px;
	}

	.wrp-of-btn {
		margin-top: 6px;
	}

	.wrp-tab-recuring {
		display: flex;
		flex: 0 0 100%;
		-ms-flex: 0 0 100%;
		max-width: 100%;
		flex-wrap: wrap;
		justify-content: flex-end;
		-ms-justify-content: flex-end;
		padding-left: 100px;
	}

	#yappikaFormDonation {
		flex: 0 0 36%;
		-ms-flex: 0 0 36%;
		max-width: 36%;
		margin-top: 32px;
	}

	.limited-desc {
		max-height: 1015px;
	}

	/* CHANGE REVISI LAGI POSISI FORM DARI DIO untuk1920 */


	.m-floting-donation {
		display: none;
	}

	#modalFormDonation {
		margin-top: 96px;
	}

	.home-campaign-bar {
		flex: 0 0 68.5%;
		-ms-flex: 0 0 68.5%;
		max-width: 68.5%;
	}

	.desc-card-campaign-bar {
		/* padding: 27px 32px 2px 32px;	 */
		padding: 8px 32px 0px 32px;
		color: #71716c;
		min-height: 111px;
	}

	.wrp-cta-campaign-home {
		padding-left: 32px;
		padding-right: 32px;
	}

	.col-zd-62 {
		padding-right: 52px;
		padding-left: 48px;
	}

	.col-zd-38 {
		padding-left: 76px;
		padding-right: 48px;
	}

	.desc-card-campaign-unbar a h2 {
		font-size: 31px;
		line-height: 38.5px;
		margin-top: 5px;
	}

	.desc-card-campaign-unbar a p {
		font-size: 18.5px;
		line-height: 27px;
		margin-bottom: 14px;
	}

	.header {
		min-height: 75px;
		max-height: 80px;
		padding: 10px 0px;
	}

	.card-opinion {
		width: 415px;
		height: auto;
		min-height: 256px;
		padding: 20px 30px 20px 30px;
		margin: 20px 18px 15px 18px;
		border-radius: 20px;
	}

	.form-step-container {
		top: 5px;
	}

	.section-header-step {
		min-height: 77px;
		max-height: 77px;
	}

	.wrp-flex-logo {
		display: flex;
		flex: wrap;
		justify-content: center;
		-ms-justify-content: center;
		height: 77px;
		align-items: center;
		-ms-align-items: center;
	}

	.title-support-campaign-yappika {
		padding-right: 190px;
	}

	.title-support-campaign-yappika h1 {
		/* margin-top: 470px; */
		margin-top: 290px;
		font-size: 32.5px;
		line-height: 45px;
		padding-right: 24px;
	}

	.readmore-petisi {
		display: none;
	}

	.limited-desc-petisi .white-box-shadow {
		display: none;
	}

	.wrp-for-petisi {
		margin-top: 156px;
		padding-right: 25px;
	}

	.wrap-desc-campaign {
		padding-left: 24px;
	}

	.spacing-content-petisi {
		height: 396px;
	}

	.support-landing-page {
		top: 110px;
	}

	.wrp-image-support-campaign {
		background-image: linear-gradient(to top, #ffffff 0%, #eef1f5 100%);
	}

	.img-card-campaign-unbar {
		min-height: 200px;
		max-height: 232px;
	}

	.desc-card-campaign-unbar {
		/* min-height: 160px; */
		min-height: 261.5px;
		max-height: 264.5px;
	}

	.section-list-primary::before {
		width: 100vw;
		height: 480px;
		content: " ";
		position: absolute;
		z-index: 1;
		left: 0px;
		bottom: 3px;
		background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
		/* FF3.6-15 */
		background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
		/* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
		/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#a6000000', GradientType=0);
		/* IE6-9 */
	}

	.section-list-primary::after {
		width: 100vw;
		height: 296px;
		content: " ";
		position: absolute;
		z-index: 1;
		left: 0px;
		bottom: 2px;
	}

	.wrp-short-desc-campaign h1 a {
		line-height: 59px;
	}

	/* COSTUMIZED CONTAINER 1920 END */

	.option-monthly-annual .form-group-calculator:first-child label::after {
		font-size: 11.24px;
		top: 14.55px;
	}
	.option-monthly-annual .form-group-calculator:last-child label::after {
		font-size: 11.24px;
		top: 14.55px;
	}		

	.option-monthly-annual input[type="radio"]:checked+label::before {
		background-size: 89% !important;
		top: 10.24px;
	}

	.option-monthly-annual .form-group-calculator:first-child input[type="radio"]+label:hover::before {
		background-size: 89% !important;
		top: 10.24px;
	}
	.option-monthly-annual .form-group-calculator:last-child input[type="radio"]+label:hover::before {
		background-size: 89% !important;
		top: 10.24px;
	}
	.option-monthly-annual .form-group-calculator:first-child input[type="radio"]:checked+label:hover::before {
		background-size: 89% !important;
	}
	.option-monthly-annual .form-group-calculator:last-child input[type="radio"]:checked+label:hover::before {
		background-size: 89% !important;
	}
	#yappikaFormDonationContent #one_trasaction label, #yappikaFormDonationContent #recuring label {
		padding: 15.5px 4px;
	}
}

/* DESKTOP MEDIA QUERY 1920 */

/* MEDIA 1850-1919 START*/
@media only screen and (min-width: 1850px) and (max-width: 1919px) and (orientation: landscape) {

	.section-list-primary {
		min-height: 1024px;
		background-size: 119% !important;
		overflow-x: hidden;
	}

	.primary-image-campaign {
		max-width: 132%;
		top: 0px;
		max-width: 136%;
		width: 115.64%;
		margin-left: auto;
		margin-right: auto;
		left: 0;
		right: 0;
	  }

	.option-monthly-annual .form-group-calculator:first-child label::after {
		font-size: 11px;
	}
	.option-monthly-annual .form-group-calculator:last-child label::after {
		font-size: 11px;
	}

	.option-monthly-annual input[type="radio"]:checked+label::before {
		background-size: 78% !important;
	}

	.option-monthly-annual .form-group-calculator:first-child input[type="radio"]+label:hover::before {
		background-size: 78% !important;
	}
	.option-monthly-annual .form-group-calculator:last-child input[type="radio"]+label:hover::before {
		background-size: 78% !important;
	}
	.option-monthly-annual .form-group-calculator:first-child input[type="radio"]:checked+label:hover::before {
		background-size: 78% !important;
	}
	.option-monthly-annual .form-group-calculator:last-child input[type="radio"]:checked+label:hover::before {
		background-size: 78% !important;
	}
}
/* MEDIA 1850-1919 END*/

/* MEDIA 1583-1600 START*/
@media only screen and (min-width: 1583px) and (max-width: 1600px) and (orientation: landscape) {

}

/* MEDIA 1536-1582 START */
@media only screen and (min-width: 1536px) and (max-width: 1582px) and (orientation: landscape) {
	.desc-card-campaign-unbar {
		/* min-height: 160px; */
		min-height: 241.5px;
		max-height: 244.5px;
	}
	#yappikaFormDonationContent {
		padding-top: 15px;
	}
	.section-list-primary {
		min-height: 732px;
	}
	.choose-label-anonimous {
		padding-left: 40px;
	}
	.option-monthly-annual .form-group-calculator:first-child label::after {
		font-size: 10.64px;
	}
	.option-monthly-annual .form-group-calculator:last-child label::after {
		font-size: 10.64px;
	}

	.option-monthly-annual input[type="radio"]:checked + label::before {
		background-size: 74.32% !important;
	}

	.option-monthly-annual input[type="radio"]:checked + label::before {
		background-size: 74.32% !important;
	}

	.option-monthly-annual .form-group-calculator:first-child input[type="radio"] + label:hover::before {
		background-size: 74.32% !important;
	}

	.option-monthly-annual .form-group-calculator:last-child input[type="radio"] + label:hover::before {
		background-size: 74.32% !important;
	}

	.option-monthly-annual .form-group-calculator:first-child input[type="radio"]:checked + label:hover::before {
		background-size: 74.32% !important;
	}
	.option-monthly-annual .form-group-calculator:last-child input[type="radio"]:checked + label:hover::before {
		background-size: 74.32% !important;
	}

}


@media only screen and (min-width: 1518px) and (max-width: 1535px) and (orientation: landscape) {

}

/* MEDIA 1455-1518 START */
@media only screen and (min-width: 1455px) and (max-width: 1518px) and (orientation: landscape) {
	.desc-card-campaign-unbar {
		/* min-height: 160px; */
		min-height: 241.5px;
		max-height: 244.5px;
	}
	#yappikaFormDonationContent {
		padding-top: 36px;
	}
	.section-list-primary {
		min-height: 732px;
	}
	.choose-label-anonimous {
		padding-left: 40px;
	}
	.option-monthly-annual .form-group-calculator:first-child label::after {
		font-size: 10.64px;
	}
	.option-monthly-annual .form-group-calculator:last-child label::after {
		font-size: 10.64px;
	}

	.option-monthly-annual input[type="radio"]:checked + label::before {
		background-size: 76.32% !important;
	}

	.option-monthly-annual input[type="radio"]:checked + label::before {
		background-size: 76.32% !important;
	}

	.option-monthly-annual .form-group-calculator:first-child input[type="radio"] + label:hover::before {
		background-size: 76.32% !important;
	}

	.option-monthly-annual .form-group-calculator:last-child input[type="radio"] + label:hover::before {
		background-size: 76.32% !important;
	}

	.option-monthly-annual .form-group-calculator:first-child input[type="radio"]:checked + label:hover::before {
		background-size: 76.32% !important;
	}
	.option-monthly-annual .form-group-calculator:last-child input[type="radio"]:checked + label:hover::before {
		background-size: 76.32% !important;
	}	
}


@media only screen and (min-width: 1024px) and (max-height: 1366px) and (-webkit-min-device-pixel-ratio: 1.5) {
	.wrp-image-support-campaign {
		height: auto;
		position: unset;
	}

	.primary-image-campaign {
		max-width: 124.4%;
		left: -64px;
		top: 0px;
	}

	.section-list-petisi {
		position: relative;
		overflow: hidden;
		min-height: 700px;
	}

	.option-monthly-annual .form-group-calculator:first-child label::after {
		font-size: 10.24px;
	}

}



/* IPAD PRO POTRAIT  */
@media only screen and (min-width: 1024px) and (max-height: 1366px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1.5) {
	.wrp-image-support-campaign {
		height: auto;
		position: unset;
	}

	.section-list-petisi {
		position: relative;
		overflow: hidden;
		min-height: 675px;
	}

	.wrp-image-support-campaign {
		overflow-x: unset;
	}

	.primary-image-campaign {
		max-width: 148%;
		width: auto;
		position: absolute;
		top: 0px;
		left: -96px;
	}

}


	/* MEDIA 1440 START */
	@media only screen and (min-width: 1440px) and (max-device-width: 1440px) and (orientation: landscape) {
		.desc-card-campaign-unbar {
			/* min-height: 160px; */
			min-height: 241.5px;
			max-height: 244.5px;
		}

		#yappikaFormDonationContent {
			padding-top: 36px;
		}
			
		.section-list-primary {
			padding: 80px 0px 36px 0px;
			min-height: 734px;
		}
		.choose-label-anonimous {
			padding-left: 42px;
		}
		.option-monthly-annual .form-group-calculator:first-child label::after {
			font-size: 10.15px;
			top: 13.24px;
		}
		.option-monthly-annual .form-group-calculator:last-child label::after {
			font-size: 10.15px;
			top: 13.24px;
		}		
	
		.option-monthly-annual input[type="radio"]:checked+label::before {
			background-size: 76% !important;
			top: 12px;
		}
	
		.option-monthly-annual .form-group-calculator:first-child input[type="radio"]+label:hover::before {
			background-size: 76% !important;
			top: 12px;
		}
		.option-monthly-annual .form-group-calculator:last-child input[type="radio"]+label:hover::before {
			background-size: 76% !important;
			top: 12px;
		}
		.option-monthly-annual .form-group-calculator:first-child input[type="radio"]:checked+label:hover::before {
			background-size: 76% !important;
		}
		.option-monthly-annual .form-group-calculator:last-child input[type="radio"]:checked+label:hover::before {
			background-size: 76% !important;
		}		
	}

/* MEDIA 1366 START */
@media only screen and (min-width: 1366px) and (max-width: 1366px) and (orientation: landscape) {
	#yappikaFormDonationContent {
		padding-top: 32px;
	}
	.desc-card-campaign-unbar {
		/* min-height: 160px; */
		min-height: 241.5px;
		max-height: 244.5px;
	}
	.choose-label-anonimous {
		padding-left: 40px;
	}
	.option-monthly-annual .form-group-calculator:first-child label::after {
		font-size: 10.15px;
		top: 13px;
	}
	.option-monthly-annual .form-group-calculator:last-child label::after {
		font-size: 10.15px;
		top: 13px;
	}		

	.option-monthly-annual input[type="radio"]:checked+label::before {
		background-size: 76% !important;
		top: 12px;
	}

	.option-monthly-annual .form-group-calculator:first-child input[type="radio"]+label:hover::before {
		background-size: 76% !important;
		top: 12px;
	}
	.option-monthly-annual .form-group-calculator:last-child input[type="radio"]+label:hover::before {
		background-size: 76% !important;
		top: 12px;
	}
	.option-monthly-annual .form-group-calculator:first-child input[type="radio"]:checked+label:hover::before {
		background-size: 76% !important;
	}
	.option-monthly-annual .form-group-calculator:last-child input[type="radio"]:checked+label:hover::before {
		background-size: 76% !important;
	}
}

/* MEDIA 1366 END */


/* MEDIA 1280 START */
@media only screen and (min-width: 1280px) and (max-device-width: 1280px) and (orientation: landscape) {

	.desc-card-campaign-unbar {
		/* min-height: 160px; */
		min-height: 261.5px;
		max-height: 264.5px;
	}

	#yappikaFormDonationContent {
		padding-top: 32px;
	}
	.section-list-primary {
		padding: 80px 0px 32px 0px;
	}
	.primary-image-campaign {
		top: 39px;
		max-width: 134%;
		width: 118.5%;
		top: 0px;
	}

	.choose-label-anonimous {
		padding-left: 39px;
	}

	.option-monthly-annual .form-group-calculator:first-child label::after {
		font-size: 10.15px;
		top: 13.24px;
	}
	.option-monthly-annual .form-group-calculator:last-child label::after {
		font-size: 10.15px;
		top: 13.24px;
	}		

	.option-monthly-annual input[type="radio"]:checked+label::before {
		background-size: 76% !important;
		top: 12px;
	}

	.option-monthly-annual .form-group-calculator:first-child input[type="radio"]+label:hover::before {
		background-size: 76% !important;
		top: 12px;
	}
	.option-monthly-annual .form-group-calculator:last-child input[type="radio"]+label:hover::before {
		background-size: 76% !important;
		top: 12px;
	}
	.option-monthly-annual .form-group-calculator:first-child input[type="radio"]:checked+label:hover::before {
		background-size: 76% !important;
	}
	.option-monthly-annual .form-group-calculator:last-child input[type="radio"]:checked+label:hover::before {
		background-size: 76% !important;
	}
}
/* MEDIA 1280 END */
/* IPAD PRO POTRAIT  */
/* MEDIA QUERY 1200 START */
@media screen and (max-width:1200px) {

	.since {
		padding-right: 0px;
	}

	.bottom-socmed {
		float: right;
	}

	.m-floting-donation {
		display: none;
	}

	#navbar-yappika {
		max-width: 100%;
		padding-right: 15px;
	}

	.col-nav-left {
		flex: 0 0 auto;
		-ms-flex: 0 0 auto;
		width: 20%;
	}

	.col-nav-right {
		flex: 0 0 auto;
		-ms-flex: 0 0 auto;
		width: 80%;
	}


	.for-bg-cover-campaign {
		max-width: 156%;
		width: 156%;
		margin: 0 auto;
	}


	.col-zd-5 {
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}

	#yappikaFormDonationContent {
		display: flex;
		flex-wrap: wrap;
		padding-left: 20px;
		padding-right: 20px;
		padding-top: 0px;
	}

	.title-form-campaign-yappika {
		flex: 0 0 59%;
		-ms-flex: 0 0 59%;
		max-width: 59%;
		order: 1;
		padding-left: 5px;
		padding-right: 64px;
		display: table;
		/* height: 335px; */
		height: 418px;
		position: relative;
	}

	.first-top-of-form {
		font-family: "Rubik-Medium", sans-serif;
		font-size: 13.5px;
	}

	.title-form-campaign-yappika h1 {
		vertical-align: middle;
		display: table-cell;
		line-height: 25px;
		font-size: 20px;
	}

	.wrp-short-desc-campaign h1 a {
		padding: 7px;
		line-height: 43.5px;
	}

	#monthly-donate-tabs {
		flex: 0 0 39%;
		-ms-flex: 0 0 0 39%;
		max-width: 39%;
		order: 1;
		margin-top: 56px;
	}

	#single-donate-tabs {
		flex: 0 0 39%;
		-ms-flex: 0 0 0 39%;
		max-width: 39%;
		order: 1;
		margin-top: 56px;
	}

	.wrp-tab-recuring {
		display: flex;
		flex: 0 0 100%;
		-ms-flex: 0 0 100%;
		max-width: 100%;
		flex-wrap: wrap;
		padding-right: 19px;
	}

	#yappikaFormDonation {
		flex: 0 0 40%;
		-ms-flex: 0 0 40%;
		max-width: 40%;
	}

	.first-top-of-form {
		padding: 18px 5px 18px 20px;
	}

	.wrp-form-donation {
		padding: 12px 20px 5px 20px;
	}

	.section-list-primary {
		width: 100%;
		height: auto;
		min-height: 560px;
		background: #fefefe;
		background-size: 117% !important;
		background-position-y: 64px !important;
	}

	.col-zd-62 {
		padding-left: 24px;
		padding-right: 24px;
	}

	.col-zd-38 {
		padding-left: 24px;
		padding-right: 24px;
	}

	.first-top-of-form {
		background: rgba(255, 255, 255, 1);
	}

	.wrp-form-donation {
		background: rgba(255, 255, 255, 1);
		border: 1px solid #f8f8f8;
	}

	.quote-or-pray {
		padding: 22px 20px 20px 20px;
	}

	.left-head-donation {
		padding: 6px 0px 2px 58px;
	}

	.circle-donatur {
		left: 5px;
		width: 38px;
		height: 38px;
	}

	.left-head-donation h5 {
		font-size: 19px;
		line-height: 22px;
		height: auto;
	}

	.left-time-donate {
		width: 100%;
		height: auto;
		color: #606060;
		font-size: 13px;
		line-height: 16px;
		color: #606060;
		font-family: "Mulish-Bold", sans-serif;
	}

	.left-time-donate p {
		font-family: "Mulish-SemiBold", sans-serif;
		font-size: 13px;
		line-height: 19px;
		color: #7c7c7c;
	}

	.left-head-donation p {
		font-size: 13px;
		margin-bottom: 4px;
	}

	.left-head-donation p span {
		font-size: 15px;
	}

	.date-donation p {
		font-family: "Mulish-Bold", sans-serif;
		font-size: 13.5px;
		line-height: 26px;
	}

	#with-tab #monthly-donate-tabs {
		margin-top: 10px;
	}

	#with-tab #single-donate-tabs {
		margin-top: 10px;
	}

	#with-tab #yappikaFormDonationContent .title-form-campaign-yappika {
		margin-top: -2px;
	}

	.primary-image-campaign {
		/* max-width: 102%; */
		/* max-width: 120%; */
		max-width: 124.5%;
		width: auto;
		position: absolute;
		/* top: 60px; */
		top: 0px;
		margin-left: -98px;
		margin-right: auto;
		left: 0;
		right: 0;
	}

	.limited-desc {
		min-height: 136px;
		/* max-height: unset; */
		max-height: 996px;
	}

	.limited-desc-petisi {
		min-height: 139px;
		max-height: unset;
	}

	.img-card-campaign-unbar {
		min-height: 138px;
		max-height: 143px;
	}

	.desc-card-campaign-unbar {
		padding: 27px 20px 36px 20px;
		/* min-height: 345px; */
		min-height: 305px;
	}

	.head-card-opinion {
		position: relative;
		padding: 12px 0px 2px 58px;
	}

	.customized-container {
		max-width: 1005px;
	}

	.home-campaign-cta {
		flex: 0 0 110px;
		-ms-flex: 0 0 110px;
		min-width: 110px;
		max-width: 110px;
	}

	.home-campaign-bar {
		font-size: 13px;
		line-height: 20px;
		flex: 0 0 56%;
		-ms-flex: 0 0 56%;
		max-width: 56%;
	}

	.smraised h3 {
		font-family: "Mulish-Bold", sans-serif;
		font-size: 16px;
		line-height: 21px;
	}

	.btn-sm-cta {
		font-size: 12.5px;
		padding: 10px 6px 10px 5px;
	}

	.btn-sm-cta img {
		margin-right: 5px;
		position: relative;
		margin-top: -3.4px;
	}

	.desc-card-campaign-bar {
		/* padding: 20px 23px 2px 23px;
		min-height: 145px; */
		padding: 8px 23px 0px 23px;
		color: #71716c;
		min-height: 110px;
	}

	.desc-card-campaign-bar a h2 {
		font-size: 21.5px;
		line-height: 27px;
	}

	img.for-bg-cover-campaign {
		max-width: 164%;
		width: 164%;
		position: absolute;
		margin-left: auto;
		margin-right: auto;
		left: -24%;
		right: 0;
		text-align: center;
	}

	.card-campaign-unbar {
		width: 100%;
		/* min-height: 550px; */
		min-height: 522px;
	}

	.title-form-campaign-yappika {
		font-size: 16px;
		line-height: 23px;
	}

	.title-form-campaign-yappika p {
		margin-top: 9px;
	}

	.width-maximum-form {
		width: 100%;
		height: auto;
		padding-left: 15px;
		padding-right: 15px;
	}

	.check-agreement-call .check {
		padding-right: 0px;
	}

	.form-step-container {
		top: 2px;
	}

	.col-sp-62 {
		-ms-flex: 0 0 60%;
		flex: 0 0 60%;
		max-width: 60%;
		padding-right: 56px;
		padding-left: 48px;
	}

	.col-sp-38 {
		-ms-flex: 0 0 40%;
		flex: 0 0 40%;
		max-width: 40%;
		padding-left: 0px;
		padding-right: 48px;
		position: relative;
	}

	#yappikaSupportDonationContent {
		/* min-height: 410px; */
		min-height: 675px;
	}

	.title-support-campaign-yappika {
		-ms-flex: 0 0 60%;
		flex: 0 0 60%;
		max-width: 60%;
		padding-left: 0px;
		padding-right: 24px;
	}

	.wrp-for-petisi {
		-ms-flex: 0 0 40%;
		flex: 0 0 40%;
		max-width: 40%;
	}

	.spacing-content-petisi {
		height: 250px;
	}

	.support-landing-page {
		top: 98px;
	}

	.title-support-campaign-yappika h1 {
		font-size: 29px
	}

	.wrp-image-support-campaign {
		background: #fff;
		overflow-x: hidden;
		width: 100vw;
	}

	.desc-card-campaign-unbar a h2 {
		font-size: 24px;
		line-height: 31px;
		font-size: 19.5px;
		line-height: 25.5px;
		margin-bottom: 12.5px;
	}

}

/* MEDIA QUERY 1200 START */

/* MEDIA KINDLE FIRE*/
@media only screen and (min-width: 1200px) and (max-device-width: 1600px) and (-webkit-device-pixel-ratio: 2.0) {

	img.for-bg-cover-campaign {
		max-width: 136%;
		width: 136%;
		left: -11.5%;
	}

}

/* MEDIA KINDLE FIRE END*/

/* MEDIA 1194 DEVICES START */
@media only screen and (min-device-width: 1194px) and (max-device-width: 1194px) and (orientation: landscape) {

	.wrp-image-support-campaign {
		width: 100%;
		height: 87.5%;
	}

	.card-campaign-unbar {
		width: 100%;
		min-height: 251px;
		min-height: 252px;
	}
	.title-form-campaign-yappika {
		flex: 0 0 57.5%;
		-ms-flex: 0 0 57.5%;
		-moz--ms-flex: 0 0 57.5%;
		-webkit--ms-flex: 0 0 57.5%;
		max-width: 57.5%;
	}

	#monthly-donate-tabs {
		flex: 0 0 42.32%;
		-ms-flex: 0 0 0 42.32%;
		-moz--flex: 0 0 0 42.32%;
		-webkit--flex: 0 0 0 42.32%;
		max-width: 42.32%;
		order: 1;
		margin-top: 56px;
	  }
	.desc-card-campaign-unbar {
		/* min-height: 160px; */
		min-height: 236.5px;
		max-height: 237.5px;
	}

	#yappikaFormDonationContent {
		padding-top: 24px;
	}
	.section-list-primary {
		padding: 80px 0px 32px 0px;
	}
	.primary-image-campaign {
		top: 39px;
		max-width: 134%;
		width: 124.6%;
		top: 0px;
	}

	.choose-label-anonimous {
		padding-left: 39px;
	}

	.option-monthly-annual .form-group-calculator:first-child label::after {
		font-size: 10.05px;
		left: 26%;
	}
	.option-monthly-annual .form-group-calculator:last-child label::after {
		font-size: 10.05px;
	}		

	.option-monthly-annual input[type="radio"]:checked+label::before {
		background-size: 76% !important;
		top: 11.24px;
	}

	.option-monthly-annual .form-group-calculator:first-child input[type="radio"]+label:hover::before {
		background-size: 76% !important;
		top: 11.24px;
	}
	.option-monthly-annual .form-group-calculator:last-child input[type="radio"]+label:hover::before {
		background-size: 76% !important;
		top: 11.24px;
	}
	.option-monthly-annual .form-group-calculator:first-child input[type="radio"]:checked+label:hover::before {
		background-size: 76% !important;
	}
	.option-monthly-annual .form-group-calculator:last-child input[type="radio"]:checked+label:hover::before {
		background-size: 76% !important;
	}

}
/* MEDIA 1194 DEVICES END */

/* MEDIA 1180 DEVICES START */
@media only screen and (min-device-width: 1180px) and (max-device-width: 1180px) and (orientation: landscape) {

	.wrp-image-support-campaign {
		width: 100%;
		height: 87.5%;
	}

	.card-campaign-unbar {
		width: 100%;
		min-height: 251px;
		min-height: 252px;
	}
	.title-form-campaign-yappika {
		flex: 0 0 57.5%;
		-ms-flex: 0 0 57.5%;
		-moz--ms-flex: 0 0 57.5%;
		-webkit--ms-flex: 0 0 57.5%;
		max-width: 57.5%;
	}

	#monthly-donate-tabs {
		flex: 0 0 42.32%;
		-ms-flex: 0 0 0 42.32%;
		-moz--flex: 0 0 0 42.32%;
		-webkit--flex: 0 0 0 42.32%;
		max-width: 42.32%;
		order: 1;
		margin-top: 56px;
	  }
	.desc-card-campaign-unbar {
		/* min-height: 160px; */
		min-height: 236.5px;
		max-height: 237.5px;
	}

	#yappikaFormDonationContent {
		padding-top: 24px;
	}
	.section-list-primary {
		padding: 80px 0px 32px 0px;
	}
	.primary-image-campaign {
		top: 39px;
		max-width: 134%;
		width: 124.6%;
		top: 0px;
	}

	.choose-label-anonimous {
		padding-left: 39px;
	}

	.option-monthly-annual .form-group-calculator:first-child label::after {
		font-size: 10.15px;
		left: 25.5%;
	}
	.option-monthly-annual .form-group-calculator:last-child label::after {
		font-size: 10.15px;
	}		

	.option-monthly-annual input[type="radio"]:checked+label::before {
		background-size: 76% !important;
		top: 15.24px;
	}

	.option-monthly-annual .form-group-calculator:first-child input[type="radio"]+label:hover::before {
		background-size: 76% !important;
		top: 15.24px;
	}
	.option-monthly-annual .form-group-calculator:last-child input[type="radio"]+label:hover::before {
		background-size: 76% !important;
		top: 15.24px;
	}
	.option-monthly-annual .form-group-calculator:first-child input[type="radio"]:checked+label:hover::before {
		background-size: 76% !important;
	}
	.option-monthly-annual .form-group-calculator:last-child input[type="radio"]:checked+label:hover::before {
		background-size: 76% !important;
	}

}
/* MEDIA 1180 DEVICES END */

/* IPAD PRO 10.5 POTRAIT */

@media only screen and (min-device-width: 834px) and (orientation: portrait) {


	.col-nav-right {
		flex: 0 0 auto;
		-ms-flex: 0 0 auto;
		width: 77.5%;
	}

	.col-nav-left {
		flex: 0 0 auto;
		-ms-flex: 0 0 auto;
		width: 21.5%;
	}

	#navbar-yappika {
		max-width: 100%;
		padding-right: 10px;
		display: flex;
		flex: 0 0 100%;

	}

	#navbar-yappika ul {
		flex-direction: row;
	}

	#navbar-yappika ul li a {
		color: #fff;
		font-size: 14px;
	}

	.wrp-btn-top {
		min-width: 126px;
		max-width: 126px;
	}

	.collapse-navbar-yappika .navbar-yappika-end .navbar-toggler {
		display: none;
	}

	#monthly-donate-tabs {
		/* flex: 0 0 48%;
		-ms-flex: 0 0 0 48%;
		max-width: 48%; */
		flex: 0 0 39%;
		-ms-flex: 0 0 0 39%;
		max-width: 39%;
		order: 1;
		margin-top: 56px;
	}

	.title-form-campaign-yappika {
		flex: 0 0 52%;
		-ms-flex: 0 0 52%;
		max-width: 52%;
		order: 2;
		padding-left: 24px;
		padding-right: 20px;
	}

	.first-top-of-form {
		padding: 18px 5px 18px 20px;
	}

	.wrp-form-donation {
		padding: 20px 20px 5px 20px;
	}

	.primary-image-campaign {
		/* max-width: 132%; */
		max-width: 148%;
		width: auto;
		position: absolute;
		top: 0px;
		margin-left: auto;
		margin-right: auto;
		left: -94px;
		right: 0;
	}

	#monthly-donate-tabs {
		flex: 0 0 48%;
		flex: 0 0 48%;
		-ms-flex: 0 0 0 39%;
		max-width: 48%;
		order: 1;
		margin-top: 56px;
	}

	.section-list-primary {
		padding: 52px 0px 24px 0px;
	}

	.m-floting-donation {
		display: none;
		visibility: hidden;
	}

	#yappikaFormDonation {
		flex: 0 0 48%;
		-ms-flex: 0 0 48%;
	}

	#single-donate-tabs {
		flex: 0 0 48%;
		flex: 0 0 48%;
		-ms-flex: 0 0 0 39%;
		max-width: 48%;
		order: 1;
		margin-top: 56px;
	}

	.wrap-desc-campaign {
		height: auto;
		position: relative;
		padding-bottom: 48px;
		margin-bottom: 48px;
	}

	.limited-desc {
		max-height: 136px;
		-webkit-box-shadow: inset 0px -40px 15px -15px #ffffff;
		box-shadow: inset 0px -40px 15px -15px #ffffff;
		overflow: hidden;
		padding-bottom: 36px;
		position: relative;
	}

	.limited-desc-petisi {
		/*max-height: 136px;
 		-webkit-box-shadow: inset 0px -40px 15px -15px #ffffff;
		box-shadow: inset 0px -40px 15px -15px #ffffff;	
		overflow: hidden; */
		padding-bottom: 36px;
		position: relative;
	}

	.readmore-description {
		cursor: pointer;
		margin-bottom: 15px;
		position: absolute;
		bottom: -15px;
		z-index: 3;
		font-size: 12.5px;
		font-family: "Mulish-SemiBold", sans-serif;
		left: 0;
		right: 0;
		margin-left: auto;
		margin-right: auto;
	}

	.textshowmore {
		background: rgba(216, 26, 31, 0.15);
		font-size: 14px;
		letter-spacing: 0.4px;
		color: #d81a1f;
		font-family: "Mulish-SemiBold", sans-serif;
		padding: 6px 26px;
		border-radius: 21px !important;
		overflow: hidden;
		max-width: 196px;
		text-align: center;
		margin: 0 auto;
		display: block;
	}

	.textshowless {
		background: rgba(216, 26, 31, 0.15);
		font-size: 14px;
		letter-spacing: 0.4px;
		color: #d81a1f;
		font-family: "Mulish-SemiBold", sans-serif;
		padding: 5px 26px;
		border-radius: 21px !important;
		overflow: hidden;
		max-width: 196px;
		text-align: center;
		margin: 0 auto;
		display: none;
	}

	.white-box-shadow {
		-webkit-box-shadow: inset 0px -40px 15px -15px #fff;
		box-shadow: inset 0px -64px 15px -15px #fff;
		height: 100px;
		width: 100%;
		display: block;
		position: absolute;
		bottom: -3px;
		z-index: 2;
	}



	.story-image-thumbnail {
		width: 100%;
		height: auto;
		margin-top: 30px;
		margin-bottom: 30px;
	}


	#yappikaFormDonationContent {
		display: none;
	}
	.section-white-desc {
		position: relative;
	}
	.section-white-desc::before {
		position: absolute;
		content: " ";
		width: 100vw;
		height: 25px;
		background: #fff;
		top: -20px;
		left: 0px;
		border-top-left-radius: 22px;
		border-top-right-radius: 22px;
		z-index: 3;
	  }

	.home-mobile-campaign-title h1 {
		font-family: "Rubik-SemiBold", sans-serif;
		margin-top: 24px;
		font-size: 25px;
		line-height: 32.5px;
		color: #202020;
		letter-spacing: 0.15px;
		margin-bottom: 10px;
		position: relative;
		margin-top: 5px;
	}
	.home-mobile-campaign-title h1 a {
		color: #202020;
		text-decoration: none;
		outline: none;
	}
	.home-mobile-campaign-title h1 a {
		color: #202020;
		text-decoration: none;
		outline: none;
	}
	.see-for-campaign-detail {
		width: 100%;
		height: auto;
		flex: 100%;
		-ms-flex: 0 0 100%;
		flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		display: flex;
		justify-content: center;
		margin-top: 24px;
		margin-bottom: 8px;
	  }
	.see-for-campaign-detail a.btn-load-campaign-detailed {
		margin-bottom: 10px;
		background: #fff;
		color: #71716c;
		border: 2px solid #71716c;
		border-radius: 14.5px;
		padding: 15px 36px;
		min-width: 256px;
		width: 100%;
		text-align: center;
		max-height: 256px;
		font-family: "Mulish-SemiBold", sans-serif;
		margin-top: 2px;
		text-decoration: none;
	  }
	/* OPTION RADIO MONTLHY ONE TIME 834 START*/
	
	.option-monthly-annual {
		margin-top: 24px;
		margin: 0 auto;
		/* min-width: 432px;
		max-width: 432px; */
		width: 100%;
		min-height: 82px;
		border: 1px solid var(--grey-two);
		border-radius: 6.4px;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		-ms-align-items: center;
		-moz-align-items: center;
		-webkit-align-items: center;
		padding: 0px 0px;
	}
	.option-monthly-annual-mobile {
		margin-top: 24px;
		margin: 0 auto;
		/* min-width: 432px;
		max-width: 432px; */
		width: 100%;
		min-height: 82px;
		border: 1px solid var(--grey-two);
		border-radius: 6.4px;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		-ms-align-items: center;
		-moz-align-items: center;
		-webkit-align-items: center;
		padding: 0px 0px;
		margin-bottom: 8px;
	}
	
	.option-monthly-annual-mobile input[type="radio"]:checked + label {
		background: #ededed !important;
		border: 1px solid #5a79bc !important;
		color: #fff;
		font-family: "Mulish-Bold", sans-serif !important;
	  }
	
	.form-group-calculator {
		width: 50%;
		position: relative;
	}
	
	.card-income {
		width: 100%;
		height: auto;
		min-height: 164px;
		padding: 20px 40px 20px 40px;
		margin-top: 16px;
		margin-bottom: 16px;
		background: #fff;
		border: 1px solid #e9eefb !important;
		border-radius: 6.4px;
		box-shadow: 0 10px 29px 0 rgba(0, 0, 0, 0.033);
		-ms-box-shadow: 0 12px 32px 0 rgba(0, 0, 0, 0.033);
		-moz-box-shadow: 0 12px 32px 0 rgba(0, 0, 0, 0.033);
		-webkit-box-shadow: 0 12px 32px 0 rgba(0, 0, 0, 0.033);
		z-index: 2;
		position: relative;
		margin: 48px 0px 20px 0px;
		min-height: 564px;
	}
	
	.form-group-statics {
		position: relative;
		padding-top: 17px;
	}
	
	.form-group-statics label {
		font: normal 600 16.24px/30.64px var(--font-jakarta-sans);
		color: var(--black-100);
		margin-bottom: 8px;
	}
	
	.form-group-statics .currency-label {
		left: 10px;
		top: 66px;
	}
	
	.form-group-statics .currency-label::before {
		display: none;
	}
	
	.form-group-statics .input-fit {
		padding-left: 60px;
		margin-bottom: 8px;
	}
	
	.caption-state-label {
		width: 100%;
		height: auto;
		position: relative;
		margin-top: -36px;
		min-height: 134px;
	}
	
	.title-state-label {
		width: 100%;
		height: auto;
		position: relative;
		margin-bottom: 24px;
		font: normal 400 15.24px/26.64px;
		color: #363636;
		letter-spacing: 0.35px;
	}
	
	.title-state-label h3 {
		font: normal 700 18.24px/27.64px;
		padding-right: 10px;
		color: var(--black-100);
		margin-bottom: 18px;
		width: auto;
		display: unset;
		background: #fff;
		padding: 8px 10px;
		margin-left: -10px;
		letter-spacing: 0.35px;
	}
	
	.content-state-label {
		font: normal 400 15.24px/26.64px;
		color: #363636;
		letter-spacing: 0.35px;
	}
	
	.content-state-label p {
		margin-bottom: 12px;
	}
	
	.option-monthly-annual input[type="radio"] {
		opacity: 0;
		position: fixed;
		width: 0;
		font-weight: 500;
		position: absolute;
	}
	
	.option-monthly-annual label {
		display: inline-block;
		background-color: #fff;
		padding: 16px 5px;
		font: normal 400 12.24px/26.64px;
		border: 1px solid #fff;
		border-radius: 4px;
		width: 100%;
		color: transparent!important;
		text-align: center;
		margin-top: 6px;
		cursor: pointer;
		margin-bottom: 6px;
		text-transform: uppercase;
		position: relative;
		margin-left: 1px;
		margin-right: 1px;
	}
	
	.option-monthly-annual input[type="radio"]:checked+label {
		background: #fff!important;
		border: 1px solid #5a79bc!important;
		color: #fff!important;
		font: normal 400 13.24px/26.64px;
	}
	
	.option-monthly-annual input[type="radio"]:checked+label::before {
		content: " ";
		background: transparent url(../images/checklist-circle.svg) top center no-repeat;
		width: 30px;
		height: 30px;
		position: absolute;
		right: unset;
		top: 14.24px;
		left: 20%;
		border-top-right-radius: 3.4px;
		border-top-left-radius: 0px;
		border-bottom-right-radius: 0px;
		border-bottom-left-radius: 3.4px;
		background-size: 91%!important;
	}
	
	
	.option-monthly-annual-mobile input[type="radio"]:checked+label::before {
		content: " ";
		background: transparent url(../images/checklist-circle.svg) top center no-repeat;
		width: 30px;
		height: 30px;
		position: absolute;
		right: unset;
		top: 14.24px;
		left: 20%;
		border-top-right-radius: 3.4px;
		border-top-left-radius: 0px;
		border-bottom-right-radius: 0px;
		border-bottom-left-radius: 3.4px;
		background-size: 91%!important;
	}
	
	.option-monthly-annual-mobile .form-group-calculator:last-child input[type="radio"]:checked + label:hover::before {
		background: transparent url(../images/checklist-circle.svg) top center no-repeat !important;
		background-size: 91%!important;
		top: 14.24px;
		left: 20%;
		background-size: 91% !important;
	  }
	.option-monthly-annual-mobile .form-group-calculator:first-child input[type="radio"]:checked + label:hover::before {
		background: transparent url(../images/checklist-circle.svg) top center no-repeat !important;
		background-size: 91%!important;
		top: 14.24px;
		left: 20%;
		background-size: 91% !important;
	}
	.donation-form-action .m-recuring .option-monthly-annual-mobile label {
		/* color: yellow; */
		color: transparent;
	}
	
	.donation-form-action .m-recuring .option-monthly-annual-mobile input[type="radio"]:checked + label {
		/* color: yellow; */
		color: transparent;
	}
	
	.option-monthly-annual input[type="radio"]+label:hover {
		background: #f9f9f9;
		color: #f9f9f9;
	}
	
	.option-monthly-annual input[type="radio"]:checked+label:hover {
		background: #f9f9f9;
		border: 1px solid #f9f9f9;
		color: #fff;
	}
	
	.option-monthly-annual .form-group-calculator:first-child input[type="radio"]:checked+label::before {
		/* left: 20%; */
		left: 4.8%;
	}
	
	.option-monthly-annual .form-group-calculator:first-child input[type="radio"]+label:hover {
		background: #f9f9f9;
		color: #f9f9f9;
	}
	
	.option-monthly-annual .form-group-calculator:first-child input[type="radio"]+label:hover::before {
		content: " ";
		background: #f9f9f9 url(../images/checklist-circle-grey.svg) top center no-repeat;
		color: #f9f9f9;
		width: 30px;
		height: 30px;
		position: absolute;
		right: unset;
		top: 10.24px;
		/* left: 20%; */
		left: 4.8%;
		border-top-right-radius: 3.4px;
		border-top-left-radius: 0px;
		border-bottom-right-radius: 0px;
		border-bottom-left-radius: 3.4px;
		background-size: 91%!important;
	}
	
	.option-monthly-annual .form-group-calculator:first-child label::after {
		content: "Perbulan";
		content: var(--var-mounthly);
		text-transform: uppercase;
		position: absolute;
		/* left: 39%; */
		left: 24%;
		top: 12px;
		z-index: 3;
		color: #363636;
		font-size: 11.64px;
		font-family: "Mulish-ExtraBold", sans-serif;
	}
	
	.option-monthly-annual .form-group-calculator:first-child label::after {
		content: "Perbulan";
		content: var(--var-mounthly);
		text-transform: uppercase;
		position: absolute;
		/* left: 39%; */
		left: 24%;
		top: 12px;
		z-index: 3;
		color: #363636;
		font-size: 11.64px;
		font-family: "Mulish-ExtraBold", sans-serif;
	}
	
	
	.option-monthly-annual-mobile .form-group.form-group-calculator input[type="radio"] {
		opacity: 0;
		position: fixed;
		width: 0;
		font-weight: 500;
		position: absolute;
	  }
	
	.option-monthly-annual-mobile .form-group-calculator:first-child label::after {
		content: "Perbulan";
		content: var(--var-mounthly-mobile);
		text-transform: uppercase;
		position: absolute;
		/* left: 39%; */
		left: 34.64%;
		top: 18px;
		z-index: 3;
		color: #363636;
		font-size: 11.64px;
		font-family: "Mulish-ExtraBold", sans-serif;
	}
	
	.option-monthly-annual .form-group-calculator:first-child input[type="radio"]:checked+label::after {
		color: #363636!important;
	}
	
	.option-monthly-annual .form-group-calculator:first-child input[type="radio"]:checked+label:hover::before {
		background: transparent url(../images/checklist-circle.svg) top center no-repeat !important;
		left: 4.8%;
		background-size: 91%;
	}
	
	.option-monthly-annual .form-group-calculator:last-child input[type="radio"]:checked+label::before {
		left: 4.8%;
		color: var(--blue-two) !important;
		font-size: 11.64px;
	}
	
	.option-monthly-annual .form-group-calculator:last-child label::after {
		content: "Pertahun";
		content: var(--var-yearly);
		font-family: "Mulish-ExtraBold", sans-serif;
		color: #363636;
		text-transform: uppercase;
		position: absolute;
		left: 26.64%;
		top: 12px;
		z-index: 3;
		color: #363636;
		font-size: 11.64px;
	}
	.option-monthly-annual-mobile .form-group-calculator:first-child label{
		border-top-right-radius: 0px;
		border-bottom-right-radius: 0px;
	}
	
	.option-monthly-annual-mobile .form-group-calculator:last-child label{
		border-top-left-radius: 0px;
		border-bottom-left-radius: 0px;
	}
	
	.option-monthly-annual-mobile .form-group-calculator:last-child label::after {
		content: "Satu kali";
		content: var(--var-yearly-mobile);
		font-family: "Mulish-ExtraBold", sans-serif;
		color: #363636;
		text-transform: uppercase;
		position: absolute;
		left: 34.64%;
		top: 18px;
		z-index: 3;
		color: #363636;
		font-size: 11.64px;
	}
	
	.option-monthly-annual-mobile .form-group-calculator:first-child input[type="radio"] + label:hover::before {
		content: " ";
		background: transparent url(../images/checklist-circle-grey.svg) top center no-repeat;
		background-size: 89% !important;
		color: #f9f9f9;
		width: 30px;
		height: 30px;
		position: absolute;
		right: unset;
		top: 14.24px;
		left: 20%;
		border-top-right-radius: 3.4px;
		border-top-left-radius: 0px;
		border-bottom-right-radius: 0px;
		border-bottom-left-radius: 3.4px;
		background-size: 91% !important;
	}
	
	.option-monthly-annual-mobile .form-group-calculator:last-child input[type="radio"] + label:hover::before {
		content: " ";
		background: transparent url(../images/checklist-circle-grey.svg) top center no-repeat;
		background-size: 89% !important;
		color: #f9f9f9;
		width: 30px;
		height: 30px;
		position: absolute;
		right: unset;
		top: 14.24px;
		left: 20%;
		border-top-right-radius: 3.4px;
		border-top-left-radius: 0px;
		border-bottom-right-radius: 0px;
		border-bottom-left-radius: 3.4px;
		background-size: 91% !important;
	  }
	
	
	.option-monthly-annual .form-group-calculator:last-child input[type="radio"]:checked+label::after {
		color: #363636!important;
	}
	
	.option-monthly-annual .form-group-calculator:last-child input[type="radio"]:checked+label:hover::before {
		background: transparent url(../images/checklist-circle.svg) top center no-repeat!important;
		/* left: 20%; */
		left: 4.8%;
		background-size: 91%!important;
	}
	
	.option-monthly-annual .form-group-calculator:last-child input[type="radio"]+label:hover {
		background: #f9f9f9;
		color: #f9f9f9;
	}
	
	.option-monthly-annual .form-group-calculator:last-child input[type="radio"]+label:hover::before {
		content: " ";
		background: #f9f9f9 url(../images/checklist-circle-grey.svg) top center no-repeat;
		color: #f9f9f9;
		width: 30px;
		height: 30px;
		position: absolute;
		right: unset;
		top: 10.24px;
		/* left: 20%; */
		left: 4.8%;
		border-top-right-radius: 3.4px;
		border-top-left-radius: 0px;
		border-bottom-right-radius: 0px;
		border-bottom-left-radius: 3.4px;
		background-size: 91%!important;
	}
	
	/* OPTION RADIO MONTLHY ONE TIME 834 end */




}

/* IPAD PRO 10.5 834 POTRAIT END */


/* 820 DEVICES START */
@media only screen and (min-device-width: 820px) and (max-device-width: 820px) and (orientation: portrait) {
#yappikaFormDonationContent {
	display: none;
}
.section-white-desc {
	position: relative;
}
.section-white-desc::before {
	position: absolute;
	content: " ";
	width: 100vw;
	height: 25px;
	background: #fff;
	top: -20px;
	left: 0px;
	border-top-left-radius: 22px;
	border-top-right-radius: 22px;
	z-index: 3;
  }
.home-mobile-campaign-title h1 {
	font-family: "Rubik-SemiBold", sans-serif;
	margin-top: 24px;
	font-size: 25px;
	line-height: 32.5px;
	color: #202020;
	letter-spacing: 0.15px;
	margin-bottom: 10px;
	position: relative;
	margin-top: 5px;
}
.home-mobile-campaign-title h1 a {
	color: #202020;
	text-decoration: none;
	outline: none;
}
.see-for-campaign-detail {
    width: 100%;
    height: auto;
    flex: 100%;
    -ms-flex: 0 0 100%;
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    display: flex;
    justify-content: center;
    margin-top: 24px;
    margin-bottom: 8px;
  }
.see-for-campaign-detail a.btn-load-campaign-detailed {
    margin-bottom: 10px;
    background: #fff;
    color: #71716c;
    border: 2px solid #71716c;
    border-radius: 14.5px;
    padding: 15px 36px;
    min-width: 256px;
    width: 100%;
    text-align: center;
    max-height: 256px;
    font-family: "Mulish-SemiBold", sans-serif;
    margin-top: 2px;
    text-decoration: none;
  }
/* OPTION RADIO MONTLHY ONE TIME 820 START*/

.option-monthly-annual {
	margin-top: 24px;
	margin: 0 auto;
	/* min-width: 432px;
	max-width: 432px; */
	width: 100%;
	min-height: 82px;
	border: 1px solid var(--grey-two);
	border-radius: 6.4px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	-ms-align-items: center;
	-moz-align-items: center;
	-webkit-align-items: center;
	padding: 0px 0px;
}
.option-monthly-annual-mobile {
	margin-top: 24px;
	margin: 0 auto;
	/* min-width: 432px;
	max-width: 432px; */
	width: 100%;
	min-height: 82px;
	border: 1px solid var(--grey-two);
	border-radius: 6.4px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	-ms-align-items: center;
	-moz-align-items: center;
	-webkit-align-items: center;
	padding: 0px 0px;
	margin-bottom: 8px;
}

.option-monthly-annual-mobile input[type="radio"]:checked + label {
	background: #ededed !important;
	border: 1px solid #5a79bc !important;
	color: #fff;
	font-family: "Mulish-Bold", sans-serif !important;
  }

.form-group-calculator {
	width: 50%;
	position: relative;
}

.card-income {
	width: 100%;
	height: auto;
	min-height: 164px;
	padding: 20px 40px 20px 40px;
	margin-top: 16px;
	margin-bottom: 16px;
	background: #fff;
	border: 1px solid #e9eefb !important;
	border-radius: 6.4px;
	box-shadow: 0 10px 29px 0 rgba(0, 0, 0, 0.033);
	-ms-box-shadow: 0 12px 32px 0 rgba(0, 0, 0, 0.033);
	-moz-box-shadow: 0 12px 32px 0 rgba(0, 0, 0, 0.033);
	-webkit-box-shadow: 0 12px 32px 0 rgba(0, 0, 0, 0.033);
	z-index: 2;
	position: relative;
	margin: 48px 0px 20px 0px;
	min-height: 564px;
}

.form-group-statics {
	position: relative;
	padding-top: 17px;
}

.form-group-statics label {
	font: normal 600 16.24px/30.64px var(--font-jakarta-sans);
	color: var(--black-100);
	margin-bottom: 8px;
}

.form-group-statics .currency-label {
	left: 10px;
	top: 66px;
}

.form-group-statics .currency-label::before {
	display: none;
}

.form-group-statics .input-fit {
	padding-left: 60px;
	margin-bottom: 8px;
}

.caption-state-label {
	width: 100%;
	height: auto;
	position: relative;
	margin-top: -36px;
	min-height: 134px;
}

.title-state-label {
	width: 100%;
	height: auto;
	position: relative;
	margin-bottom: 24px;
	font: normal 400 15.24px/26.64px;
	color: #363636;
	letter-spacing: 0.35px;
}

.title-state-label h3 {
	font: normal 700 18.24px/27.64px;
	padding-right: 10px;
	color: var(--black-100);
	margin-bottom: 18px;
	width: auto;
	display: unset;
	background: #fff;
	padding: 8px 10px;
	margin-left: -10px;
	letter-spacing: 0.35px;
}

.content-state-label {
	font: normal 400 15.24px/26.64px;
	color: #363636;
	letter-spacing: 0.35px;
}

.content-state-label p {
	margin-bottom: 12px;
}

.option-monthly-annual input[type="radio"] {
	opacity: 0;
	position: fixed;
	width: 0;
	font-weight: 500;
	position: absolute;
}

.option-monthly-annual label {
	display: inline-block;
	background-color: #fff;
	padding: 16px 5px;
	font: normal 400 12.24px/26.64px;
	border: 1px solid #fff;
	border-radius: 4px;
	width: 100%;
	color: transparent!important;
	text-align: center;
	margin-top: 6px;
	cursor: pointer;
	margin-bottom: 6px;
	text-transform: uppercase;
	position: relative;
	margin-left: 1px;
	margin-right: 1px;
}

.option-monthly-annual input[type="radio"]:checked+label {
	background: #fff!important;
	border: 1px solid #5a79bc!important;
	color: #fff!important;
	font: normal 400 13.24px/26.64px;
}

.option-monthly-annual input[type="radio"]:checked+label::before {
	content: " ";
	background: transparent url(../images/checklist-circle.svg) top center no-repeat;
	width: 30px;
	height: 30px;
	position: absolute;
	right: unset;
	top: 14.24px;
    left: 20%;
	border-top-right-radius: 3.4px;
	border-top-left-radius: 0px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 3.4px;
	background-size: 91%!important;
}


.option-monthly-annual-mobile input[type="radio"]:checked+label::before {
	content: " ";
	background: transparent url(../images/checklist-circle.svg) top center no-repeat;
	width: 30px;
	height: 30px;
	position: absolute;
	right: unset;
	top: 14.24px;
    left: 20%;
	border-top-right-radius: 3.4px;
	border-top-left-radius: 0px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 3.4px;
	background-size: 91%!important;
}

.option-monthly-annual-mobile .form-group-calculator:last-child input[type="radio"]:checked + label:hover::before {
	background: transparent url(../images/checklist-circle.svg) top center no-repeat !important;
	background-size: 91%!important;
	top: 14.24px;
	left: 20%;
	background-size: 91% !important;
  }
.option-monthly-annual-mobile .form-group-calculator:first-child input[type="radio"]:checked + label:hover::before {
	background: transparent url(../images/checklist-circle.svg) top center no-repeat !important;
	background-size: 91%!important;
	top: 14.24px;
	left: 20%;
	background-size: 91% !important;
}
.donation-form-action .m-recuring .option-monthly-annual-mobile label {
	/* color: yellow; */
	color: transparent;
}

.donation-form-action .m-recuring .option-monthly-annual-mobile input[type="radio"]:checked + label {
	/* color: yellow; */
	color: transparent;
}

.option-monthly-annual input[type="radio"]+label:hover {
	background: #f9f9f9;
	color: #f9f9f9;
}

.option-monthly-annual input[type="radio"]:checked+label:hover {
	background: #f9f9f9;
	border: 1px solid #f9f9f9;
	color: #fff;
}

.option-monthly-annual .form-group-calculator:first-child input[type="radio"]:checked+label::before {
	/* left: 20%; */
	left: 4.8%;
}

.option-monthly-annual .form-group-calculator:first-child input[type="radio"]+label:hover {
	background: #f9f9f9;
	color: #f9f9f9;
}

.option-monthly-annual .form-group-calculator:first-child input[type="radio"]+label:hover::before {
	content: " ";
	background: #f9f9f9 url(../images/checklist-circle-grey.svg) top center no-repeat;
	color: #f9f9f9;
	width: 30px;
	height: 30px;
	position: absolute;
	right: unset;
	top: 10.24px;
	/* left: 20%; */
	left: 4.8%;
	border-top-right-radius: 3.4px;
	border-top-left-radius: 0px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 3.4px;
	background-size: 91%!important;
}

.option-monthly-annual .form-group-calculator:first-child label::after {
	content: "Perbulan";
	content: var(--var-mounthly);
	text-transform: uppercase;
	position: absolute;
	/* left: 39%; */
	left: 24%;
	top: 12px;
	z-index: 3;
	color: #363636;
	font-size: 11.64px;
	font-family: "Mulish-ExtraBold", sans-serif;
}

.option-monthly-annual .form-group-calculator:first-child label::after {
	content: "Perbulan";
	content: var(--var-mounthly);
	text-transform: uppercase;
	position: absolute;
	/* left: 39%; */
	left: 24%;
	top: 12px;
	z-index: 3;
	color: #363636;
	font-size: 11.64px;
	font-family: "Mulish-ExtraBold", sans-serif;
}


.option-monthly-annual-mobile .form-group.form-group-calculator input[type="radio"] {
	opacity: 0;
	position: fixed;
	width: 0;
	font-weight: 500;
	position: absolute;
  }

.option-monthly-annual-mobile .form-group-calculator:first-child label::after {
	content: "Perbulan";
	content: var(--var-mounthly-mobile);
	text-transform: uppercase;
	position: absolute;
	/* left: 39%; */
	left: 34.64%;
    top: 18px;
	z-index: 3;
	color: #363636;
	font-size: 11.64px;
	font-family: "Mulish-ExtraBold", sans-serif;
}

.option-monthly-annual .form-group-calculator:first-child input[type="radio"]:checked+label::after {
	color: #363636!important;
}

.option-monthly-annual .form-group-calculator:first-child input[type="radio"]:checked+label:hover::before {
	background: transparent url(../images/checklist-circle.svg) top center no-repeat !important;
	left: 4.8%;
	background-size: 91%;
}

.option-monthly-annual .form-group-calculator:last-child input[type="radio"]:checked+label::before {
	left: 4.8%;
	color: var(--blue-two) !important;
	font-size: 11.64px;
}

.option-monthly-annual .form-group-calculator:last-child label::after {
	content: "Pertahun";
	content: var(--var-yearly);
	font-family: "Mulish-ExtraBold", sans-serif;
	color: #363636;
	text-transform: uppercase;
	position: absolute;
	left: 26.64%;
	top: 12px;
	z-index: 3;
	color: #363636;
	font-size: 11.64px;
}
.option-monthly-annual-mobile .form-group-calculator:first-child label{
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
}

.option-monthly-annual-mobile .form-group-calculator:last-child label{
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
}

.option-monthly-annual-mobile .form-group-calculator:last-child label::after {
	content: "Satu kali";
	content: var(--var-yearly-mobile);
	font-family: "Mulish-ExtraBold", sans-serif;
	color: #363636;
	text-transform: uppercase;
	position: absolute;
	left: 34.64%;
    top: 18px;
	z-index: 3;
	color: #363636;
	font-size: 11.64px;
}

.option-monthly-annual-mobile .form-group-calculator:first-child input[type="radio"] + label:hover::before {
	content: " ";
	background: transparent url(../images/checklist-circle-grey.svg) top center no-repeat;
	background-size: 89% !important;
	color: #f9f9f9;
	width: 30px;
	height: 30px;
	position: absolute;
	right: unset;
	top: 14.24px;
    left: 20%;
	border-top-right-radius: 3.4px;
	border-top-left-radius: 0px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 3.4px;
	background-size: 91% !important;
}

.option-monthly-annual-mobile .form-group-calculator:last-child input[type="radio"] + label:hover::before {
	content: " ";
	background: transparent url(../images/checklist-circle-grey.svg) top center no-repeat;
	background-size: 89% !important;
	color: #f9f9f9;
	width: 30px;
	height: 30px;
	position: absolute;
	right: unset;
	top: 14.24px;
    left: 20%;
	border-top-right-radius: 3.4px;
	border-top-left-radius: 0px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 3.4px;
	background-size: 91% !important;
  }


.option-monthly-annual .form-group-calculator:last-child input[type="radio"]:checked+label::after {
	color: #363636!important;
}

.option-monthly-annual .form-group-calculator:last-child input[type="radio"]:checked+label:hover::before {
	background: transparent url(../images/checklist-circle.svg) top center no-repeat!important;
	/* left: 20%; */
	left: 4.8%;
	background-size: 91%!important;
}

.option-monthly-annual .form-group-calculator:last-child input[type="radio"]+label:hover {
	background: #f9f9f9;
	color: #f9f9f9;
}

.option-monthly-annual .form-group-calculator:last-child input[type="radio"]+label:hover::before {
	content: " ";
	background: #f9f9f9 url(../images/checklist-circle-grey.svg) top center no-repeat;
	color: #f9f9f9;
	width: 30px;
	height: 30px;
	position: absolute;
	right: unset;
	top: 10.24px;
	/* left: 20%; */
	left: 4.8%;
	border-top-right-radius: 3.4px;
	border-top-left-radius: 0px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 3.4px;
	background-size: 91%!important;
}

/* OPTION RADIO MONTLHY ONE TIME 820 end */
}
/* 820 DEVICES START */

/* Apple iPad 10.2 (2019) 810 Portrait start Media Queries */
@media only screen and (min-width: 810px) and (max-device-width: 810px) and (orientation: portrait) {
	.container-floating-act {
		max-width: 97.5%;
	}

	#yappikaFormDonationContent {
		display: none;
	}
	.section-white-desc {
		position: relative;
	}
	.section-white-desc::before {
		position: absolute;
		content: " ";
		width: 100vw;
		height: 25px;
		background: #fff;
		top: -20px;
		left: 0px;
		border-top-left-radius: 22px;
		border-top-right-radius: 22px;
		z-index: 3;
	  }

	  .img-card-campaign-unbar {
		min-height: 350px;
	  }

	.home-mobile-campaign-title h1 a {
		color: #202020;
		text-decoration: none;
		outline: none;
	}
	
	.see-for-campaign-detail {
		width: 100%;
		height: auto;
		flex: 100%;
		-ms-flex: 0 0 100%;
		flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		display: flex;
		justify-content: center;
		margin-top: 24px;
		margin-bottom: 8px;
	  }
	  .see-for-campaign-detail a.btn-load-campaign-detailed {
		margin-bottom: 10px;
		background: #fff;
		color: #71716c;
		border: 2px solid #71716c;
		border-radius: 14.5px;
		padding: 15px 36px;
		min-width: 256px;
		width: 100%;
		text-align: center;
		max-height: 256px;
		font-family: "Mulish-SemiBold", sans-serif;
		margin-top: 2px;
		text-decoration: none;
	  }


/* OPTION RADIO MONTLHY ONE TIME 810 START*/

.option-monthly-annual {
	margin-top: 24px;
	margin: 0 auto;
	/* min-width: 432px;
	max-width: 432px; */
	width: 100%;
	min-height: 82px;
	border: 1px solid var(--grey-two);
	border-radius: 6.4px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	-ms-align-items: center;
	-moz-align-items: center;
	-webkit-align-items: center;
	padding: 0px 0px;
}
.option-monthly-annual-mobile {
	margin-top: 24px;
	margin: 0 auto;
	/* min-width: 432px;
	max-width: 432px; */
	width: 100%;
	min-height: 82px;
	border: 1px solid var(--grey-two);
	border-radius: 6.4px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	-ms-align-items: center;
	-moz-align-items: center;
	-webkit-align-items: center;
	padding: 0px 0px;
	margin-bottom: 8px;
}

.option-monthly-annual-mobile input[type="radio"]:checked + label {
	background: #ededed !important;
	border: 1px solid #5a79bc !important;
	color: #fff;
	font-family: "Mulish-Bold", sans-serif !important;
  }

.form-group-calculator {
	width: 50%;
	position: relative;
}

.card-income {
	width: 100%;
	height: auto;
	min-height: 164px;
	padding: 20px 40px 20px 40px;
	margin-top: 16px;
	margin-bottom: 16px;
	background: #fff;
	border: 1px solid #e9eefb !important;
	border-radius: 6.4px;
	box-shadow: 0 10px 29px 0 rgba(0, 0, 0, 0.033);
	-ms-box-shadow: 0 12px 32px 0 rgba(0, 0, 0, 0.033);
	-moz-box-shadow: 0 12px 32px 0 rgba(0, 0, 0, 0.033);
	-webkit-box-shadow: 0 12px 32px 0 rgba(0, 0, 0, 0.033);
	z-index: 2;
	position: relative;
	margin: 48px 0px 20px 0px;
	min-height: 564px;
}

.form-group-statics {
	position: relative;
	padding-top: 17px;
}

.form-group-statics label {
	font: normal 600 16.24px/30.64px var(--font-jakarta-sans);
	color: var(--black-100);
	margin-bottom: 8px;
}

.form-group-statics .currency-label {
	left: 10px;
	top: 66px;
}

.form-group-statics .currency-label::before {
	display: none;
}

.form-group-statics .input-fit {
	padding-left: 60px;
	margin-bottom: 8px;
}

.caption-state-label {
	width: 100%;
	height: auto;
	position: relative;
	margin-top: -36px;
	min-height: 134px;
}

.title-state-label {
	width: 100%;
	height: auto;
	position: relative;
	margin-bottom: 24px;
	font: normal 400 15.24px/26.64px;
	color: #363636;
	letter-spacing: 0.35px;
}

.title-state-label h3 {
	font: normal 700 18.24px/27.64px;
	padding-right: 10px;
	color: var(--black-100);
	margin-bottom: 18px;
	width: auto;
	display: unset;
	background: #fff;
	padding: 8px 10px;
	margin-left: -10px;
	letter-spacing: 0.35px;
}

.content-state-label {
	font: normal 400 15.24px/26.64px;
	color: #363636;
	letter-spacing: 0.35px;
}

.content-state-label p {
	margin-bottom: 12px;
}

.option-monthly-annual input[type="radio"] {
	opacity: 0;
	position: fixed;
	width: 0;
	font-weight: 500;
	position: absolute;
}

.option-monthly-annual label {
	display: inline-block;
	background-color: #fff;
	padding: 16px 5px;
	font: normal 400 12.24px/26.64px;
	border: 1px solid #fff;
	border-radius: 4px;
	width: 100%;
	color: transparent!important;
	text-align: center;
	margin-top: 6px;
	cursor: pointer;
	margin-bottom: 6px;
	text-transform: uppercase;
	position: relative;
	margin-left: 1px;
	margin-right: 1px;
}

.option-monthly-annual input[type="radio"]:checked+label {
	background: #fff!important;
	border: 1px solid #5a79bc!important;
	color: #fff!important;
	font: normal 400 13.24px/26.64px;
}

.option-monthly-annual input[type="radio"]:checked+label::before {
	content: " ";
	background: transparent url(../images/checklist-circle.svg) top center no-repeat;
	width: 30px;
	height: 30px;
	position: absolute;
	right: unset;
	top: 14.24px;
    left: 20%;
	border-top-right-radius: 3.4px;
	border-top-left-radius: 0px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 3.4px;
	background-size: 91%!important;
}


.option-monthly-annual-mobile input[type="radio"]:checked+label::before {
	content: " ";
	background: transparent url(../images/checklist-circle.svg) top center no-repeat;
	width: 30px;
	height: 30px;
	position: absolute;
	right: unset;
	top: 14.24px;
    left: 20%;
	border-top-right-radius: 3.4px;
	border-top-left-radius: 0px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 3.4px;
	background-size: 91%!important;
}

.option-monthly-annual-mobile .form-group-calculator:last-child input[type="radio"]:checked + label:hover::before {
	background: transparent url(../images/checklist-circle.svg) top center no-repeat !important;
	background-size: 91%!important;
	top: 14.24px;
	left: 20%;
	background-size: 91% !important;
  }
.option-monthly-annual-mobile .form-group-calculator:first-child input[type="radio"]:checked + label:hover::before {
	background: transparent url(../images/checklist-circle.svg) top center no-repeat !important;
	background-size: 91%!important;
	top: 14.24px;
	left: 20%;
	background-size: 91% !important;
}
.donation-form-action .m-recuring .option-monthly-annual-mobile label {
	/* color: yellow; */
	color: transparent;
}

.donation-form-action .m-recuring .option-monthly-annual-mobile input[type="radio"]:checked + label {
	/* color: yellow; */
	color: transparent;
}

.option-monthly-annual input[type="radio"]+label:hover {
	background: #f9f9f9;
	color: #f9f9f9;
}

.option-monthly-annual input[type="radio"]:checked+label:hover {
	background: #f9f9f9;
	border: 1px solid #f9f9f9;
	color: #fff;
}

.option-monthly-annual .form-group-calculator:first-child input[type="radio"]:checked+label::before {
	/* left: 20%; */
	left: 4.8%;
}

.option-monthly-annual .form-group-calculator:first-child input[type="radio"]+label:hover {
	background: #f9f9f9;
	color: #f9f9f9;
}

.option-monthly-annual .form-group-calculator:first-child input[type="radio"]+label:hover::before {
	content: " ";
	background: #f9f9f9 url(../images/checklist-circle-grey.svg) top center no-repeat;
	color: #f9f9f9;
	width: 30px;
	height: 30px;
	position: absolute;
	right: unset;
	top: 10.24px;
	/* left: 20%; */
	left: 4.8%;
	border-top-right-radius: 3.4px;
	border-top-left-radius: 0px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 3.4px;
	background-size: 91%!important;
}

.option-monthly-annual .form-group-calculator:first-child label::after {
	content: "Perbulan";
	content: var(--var-mounthly);
	text-transform: uppercase;
	position: absolute;
	/* left: 39%; */
	left: 24%;
	top: 12px;
	z-index: 3;
	color: #363636;
	font-size: 11.64px;
	font-family: "Mulish-ExtraBold", sans-serif;
}

.option-monthly-annual .form-group-calculator:first-child label::after {
	content: "Perbulan";
	content: var(--var-mounthly);
	text-transform: uppercase;
	position: absolute;
	/* left: 39%; */
	left: 24%;
	top: 12px;
	z-index: 3;
	color: #363636;
	font-size: 11.64px;
	font-family: "Mulish-ExtraBold", sans-serif;
}


.option-monthly-annual-mobile .form-group.form-group-calculator input[type="radio"] {
	opacity: 0;
	position: fixed;
	width: 0;
	font-weight: 500;
	position: absolute;
  }

.option-monthly-annual-mobile .form-group-calculator:first-child label::after {
	content: "Perbulan";
	content: var(--var-mounthly-mobile);
	text-transform: uppercase;
	position: absolute;
	/* left: 39%; */
	left: 34.64%;
    top: 18px;
	z-index: 3;
	color: #363636;
	font-size: 11.64px;
	font-family: "Mulish-ExtraBold", sans-serif;
}

.option-monthly-annual .form-group-calculator:first-child input[type="radio"]:checked+label::after {
	color: #363636!important;
}

.option-monthly-annual .form-group-calculator:first-child input[type="radio"]:checked+label:hover::before {
	background: transparent url(../images/checklist-circle.svg) top center no-repeat !important;
	left: 4.8%;
	background-size: 91%;
}

.option-monthly-annual .form-group-calculator:last-child input[type="radio"]:checked+label::before {
	left: 4.8%;
	color: var(--blue-two) !important;
	font-size: 11.64px;
}

.option-monthly-annual .form-group-calculator:last-child label::after {
	content: "Pertahun";
	content: var(--var-yearly);
	font-family: "Mulish-ExtraBold", sans-serif;
	color: #363636;
	text-transform: uppercase;
	position: absolute;
	left: 26.64%;
	top: 12px;
	z-index: 3;
	color: #363636;
	font-size: 11.64px;
}
.option-monthly-annual-mobile .form-group-calculator:first-child label{
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
}

.option-monthly-annual-mobile .form-group-calculator:last-child label{
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
}

.option-monthly-annual-mobile .form-group-calculator:last-child label::after {
	content: "Satu kali";
	content: var(--var-yearly-mobile);
	font-family: "Mulish-ExtraBold", sans-serif;
	color: #363636;
	text-transform: uppercase;
	position: absolute;
	left: 34.64%;
    top: 18px;
	z-index: 3;
	color: #363636;
	font-size: 11.64px;
}

.option-monthly-annual-mobile .form-group-calculator:first-child input[type="radio"] + label:hover::before {
	content: " ";
	background: transparent url(../images/checklist-circle-grey.svg) top center no-repeat;
	background-size: 89% !important;
	color: #f9f9f9;
	width: 30px;
	height: 30px;
	position: absolute;
	right: unset;
	top: 14.24px;
    left: 20%;
	border-top-right-radius: 3.4px;
	border-top-left-radius: 0px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 3.4px;
	background-size: 91% !important;
}

.option-monthly-annual-mobile .form-group-calculator:last-child input[type="radio"] + label:hover::before {
	content: " ";
	background: transparent url(../images/checklist-circle-grey.svg) top center no-repeat;
	background-size: 89% !important;
	color: #f9f9f9;
	width: 30px;
	height: 30px;
	position: absolute;
	right: unset;
	top: 14.24px;
    left: 20%;
	border-top-right-radius: 3.4px;
	border-top-left-radius: 0px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 3.4px;
	background-size: 91% !important;
  }


.option-monthly-annual .form-group-calculator:last-child input[type="radio"]:checked+label::after {
	color: #363636!important;
}

.option-monthly-annual .form-group-calculator:last-child input[type="radio"]:checked+label:hover::before {
	background: transparent url(../images/checklist-circle.svg) top center no-repeat!important;
	/* left: 20%; */
	left: 4.8%;
	background-size: 91%!important;
}

.option-monthly-annual .form-group-calculator:last-child input[type="radio"]+label:hover {
	background: #f9f9f9;
	color: #f9f9f9;
}

.option-monthly-annual .form-group-calculator:last-child input[type="radio"]+label:hover::before {
	content: " ";
	background: #f9f9f9 url(../images/checklist-circle-grey.svg) top center no-repeat;
	color: #f9f9f9;
	width: 30px;
	height: 30px;
	position: absolute;
	right: unset;
	top: 10.24px;
	/* left: 20%; */
	left: 4.8%;
	border-top-right-radius: 3.4px;
	border-top-left-radius: 0px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 3.4px;
	background-size: 91%!important;
}

/* OPTION RADIO MONTLHY ONE TIME 810 end */


}

/* Apple iPad 10.2 (2019) 810 Portrait end Media Queries */

/* Apple iPad 10.2 (2019) 1080 Landscape start Media Queries */
@media only screen and (min-width: 1080px) and (max-device-width: 1080px) and (orientation: landscape) {
	.container-floating-act {
		max-width: 1005px;
	}
	.card-campaign-unbar {
		width: 100%;
		min-height: 251px;
		min-height: 252px;
	}
	.title-form-campaign-yappika {
		flex: 0 0 57.5%;
		-ms-flex: 0 0 57.5%;
		-moz--ms-flex: 0 0 57.5%;
		-webkit--ms-flex: 0 0 57.5%;
		max-width: 57.5%;
	}

	#monthly-donate-tabs {
		flex: 0 0 42%;
		-ms-flex: 0 0 0 42%;
		max-width: 42%;
		order: 1;
		margin-top: 56px;
	  }
	.desc-card-campaign-unbar {
		/* min-height: 160px; */
		min-height: 261.5px;
		max-height: 264.5px;
	}

	#yappikaFormDonationContent {
		padding-top: 24px;
	}
	.section-list-primary {
		padding: 80px 0px 32px 0px;
	}
	.primary-image-campaign {
		top: 39px;
		max-width: 134%;
		width: 132.5%;
		top: 0px;
	}

	.choose-label-anonimous {
		padding-left: 39px;
	}

	.option-monthly-annual .form-group-calculator:first-child label::after {
		font-size: 10.15px;
		left: 26%;
	}
	.option-monthly-annual .form-group-calculator:last-child label::after {
		font-size: 10.15px;
	}		

	.option-monthly-annual input[type="radio"]:checked+label::before {
		background-size: 74% !important;
		top: 15.24px;
	}

	.option-monthly-annual .form-group-calculator:first-child input[type="radio"]+label:hover::before {
		background-size: 74% !important;
		top: 15.24px;
	}
	.option-monthly-annual .form-group-calculator:last-child input[type="radio"]+label:hover::before {
		background-size: 74% !important;
		top: 15.24px;
	}
	.option-monthly-annual .form-group-calculator:first-child input[type="radio"]:checked+label:hover::before {
		background-size: 74% !important;
	}
	.option-monthly-annual .form-group-calculator:last-child input[type="radio"]:checked+label:hover::before {
		background-size: 74% !important;
	}

}

/* Apple iPad 10.2 (2019) 1080 Landscape end Media Queries */

/* IPAD PRO 12.9 POTRAIT */

@media only screen and (min-device-width: 1024px) and (orientation: portrait) {
	.textshowmore {
		display: none;
	}

	.textshowless {
		display: none;
	}

	.limited-desc {
		min-height: 136px;
		max-height: unset;
	}

	.white-box-shadow {
		display: none;
	}

	.wrp-tab-recuring {
		margin-top: 36px;
	}

	#monthly-donate-tabs {
		flex: 0 0 42%;
		-ms-flex: 0 0 0 42%;
		max-width: 42%;
		order: 1;
		margin-top: 56px;
	}

	#yappikaFormDonation {
		flex: 0 0 42%;
		-ms-flex: 0 0 42%;
		max-width: 42%;
	}


	.wrp-tab-recuring {
		display: flex;
		flex: 0 0 100%;
		-ms-flex: 0 0 100%;
		max-width: 100%;
		flex-wrap: wrap;
		justify-content: flex-end;
		-ms-justify-content: flex-end;
	}

	#monthly-donate-tabs {
		flex: 0 0 41.5%;
		-ms-flex: 0 0 41.5%;
		max-width: 41.5%;
		order: 2;
		margin-top: 12px;
	}

	#single-donate-tabs {
		flex: 0 0 41.5%;
		-ms-flex: 0 0 41.5%;
		max-width: 41.5%;
		order: 2;
		margin-top: 12px;
	}

	.title-form-campaign-yappika {
		font-family: "Mulish-Regular", sans-serif;
		font-size: 17px;
		line-height: 24px;
		color: #f8f8f8;
		flex: 0 0 57%;
		-ms-flex: 0 0 57%;
		max-width: 57%;
	}

}

/* IPAD PRO 12.9 POTRAIT */

/* IPAD AIR 2 */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
	.title-support-campaign-yappika h1 {
		margin-top: 108px;
	}

	.primary-image-campaign {
		max-width: 139.5%;
		width: auto;
		top: 0px;
		margin-left: -124px;
	}

	.check-agreement {
		margin-top: 30px;
		margin-bottom: 20px;
	}

	.wrp-image-support-campaign {
		width: 100%;
		height: 87.5%;
	}
	.wrp-of-btn{
		flex: 0 0 100%;
		-ms-flex: 0 0 100%;
		-moz--ms-flex: 0 0 100%;
		-webkit--ms-flex: 0 0 100%;
		max-width: 100%;
	}
}

@media only screen and (min-device-width: 1024px) and (max-device-width: 1024px) and (orientation: landscape) {
	.wrp-image-support-campaign {
		width: 100%;
		height: 87.5%;
	}

	.card-campaign-unbar {
		width: 100%;
		min-height: 251px;
		min-height: 252px;
	}
	.title-form-campaign-yappika {
		flex: 0 0 57.5%;
		-ms-flex: 0 0 57.5%;
		-moz--ms-flex: 0 0 57.5%;
		-webkit--ms-flex: 0 0 57.5%;
		max-width: 57.5%;
	}

	#monthly-donate-tabs {
		flex: 0 0 42%;
		-ms-flex: 0 0 0 42%;
		max-width: 42%;
		order: 1;
		margin-top: 56px;
	  }
	.desc-card-campaign-unbar {
		/* min-height: 160px; */
		min-height: 261.5px;
		max-height: 264.5px;
	}

	#yappikaFormDonationContent {
		padding-top: 24px;
	}
	.section-list-primary {
		padding: 80px 0px 32px 0px;
	}
	.primary-image-campaign {
		top: 39px;
		/* max-width: 134%;
		width: 121.5%; */
		max-width: 152%;
		width: 143.5%;		
		top: 0px;
	}

	.choose-label-anonimous {
		padding-left: 39px;
	}

	.option-monthly-annual .form-group-calculator:first-child label::after {
		font-size: 10px;
		left: 26%;
		top: 13px;
	}
	.option-monthly-annual .form-group-calculator:last-child label::after {
		font-size: 10px;
		top: 13px;
	}		

	.option-monthly-annual input[type="radio"]:checked+label::before {
		background-size: 76% !important;
		top: 12px;
	}

	.option-monthly-annual .form-group-calculator:first-child input[type="radio"]+label:hover::before {
		background-size: 76% !important;
		top: 12px;
	}
	.option-monthly-annual .form-group-calculator:last-child input[type="radio"]+label:hover::before {
		background-size: 76% !important;
		top: 12px;
	}
	.option-monthly-annual .form-group-calculator:first-child input[type="radio"]:checked+label:hover::before {
		background-size: 76% !important;
	}
	.option-monthly-annual .form-group-calculator:last-child input[type="radio"]:checked+label:hover::before {
		background-size: 76% !important;
	}


}

/* IPAD AIR 2 */



/* MEDIA QUERY 992 START */
@media screen and (max-width:992px) {

	.col-zd-62 {
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
		padding-right: 10px;
	}

	.col-zd-38 {
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
		padding-right: 10px;
	}

	.ui-widget {
		font-size: 0.32em;
	}

	.m-floting-donation {
		background: #fff;
		height: 70px;
		position: fixed;
		bottom: 0px;
		display: flex;
		flex-wrap: wrap;
		padding: 6px 24px;
		text-align: center;
		align-items: center;
		justify-content: center;
		z-index: 5;
		width: 100vw;
		box-shadow: 0px -9px 29px 0 rgba(0, 0, 0, 0.056);
		-ms-box-shadow: 0 -9px 32px 0 rgba(0, 0, 0, 0.056);
	}

	.wrp-of-btn {
		/* flex: 0 0 96%;
		-ms-flex: 0 0 96%;
		max-width: 96%; */
		flex: 0 0 100%;
		-ms-flex: 0 0 100%;
		-moz--ms-flex: 0 0 100%;
		-webkit--ms-flex: 0 0 100%;
		max-width: 100%;		
	}

	.section-list-primary {
		min-height: 565px;
	}

	a.btn-block-form-donation {
		border-radius: 13px;
	}

	.limited-desc {
		min-height: 136px;
		max-height: 186px;
	}

	.section-grey-opinion {
		overflow-x: hidden;
	}

	.img-card-campaign-unbar {
		/* min-height: 156px; */
		min-height: 314px;
	}

	.desc-card-campaign-unbar {
		padding: 27px 30px 36px 30px;
	}

	.desc-card-campaign-unbar a h2 {
		font-size: 22px;
		line-height: 30px;
	}

	.gutter--20.row,
	.gutter--20.container,
	.gutter--20.container-fluid {
		margin-left: -17px;
		margin-right: -17px;
	}

	.gutter--20>[class^="col-"] {
		padding-left: 17px;
		padding-right: 17px;
	}

	.card-campaign-unbar {
		margin-bottom: 60px;
		margin-top: 32px;
	}

	.section-for-bg-cover-campaign {
		display: none;
	}

	.section-donation-step::before {
		content: " ";
		position: fixed;
		width: 100vw;
		height: 100vh;
		background: rgba(255, 255, 255, 1);
		left: 0px;
		top: 0px;
		z-index: 12;
		display: none;
	}

	.card-campaign-unbar {
		width: 100%;
		/* min-height: 480px; */
		min-height: 310px;
	}

	.yDonatur .ss-wrapper {
		overflow: unset;
	}

	.yPrayer .ss-wrapper {
		overflow: unset;
	}

	.width-maximum-form {
		width: 100%;
		height: auto;
		padding-left: 0px;
		padding-right: 0px;
	}

	.col-sp-62 {
		-ms-flex: 0 0 80%;
		flex: 0 0 80%;
		max-width: 80%;
		padding-right: 48px;
		padding-left: 0px;
	}

	.col-sp-38 {
		-ms-flex: 0 0 80%;
		flex: 0 0 80%;
		max-width: 80%;
		padding-left: 0px;
		padding-right: 48px;
		position: relative;
	}

	.wrp-image-support-campaign {
		position: unset;
	}

	.title-support-campaign-yappika {
		height: auto;
	}

}

/* MEDIA QUERY 992 END */


/* IPAD ONLY  POTRAIT */

@media only screen and (min-device-width: 1024px) and (max-device-width: 1024px) and (orientation: portrait) {

	.section-list-primary {
		min-height: 470px;
	}

	.limited-desc {
		min-height: 136px;
		max-height: 136px;
	}

	.limited-desc-petisi {
		min-height: 136px;
	}

	.container-floating-act {
		margin: 0 auto;
		float: none;
		min-width: 705px;
		max-width: 705px;
	}

	.wrp-image-support-campaign {
		width: 100%;
		height: 87.5%;
	}

	.card-campaign-unbar {
		width: 100%;
		min-height: 251px;
		min-height: 252px;
	}
	.title-form-campaign-yappika {
		flex: 0 0 57.5%;
		-ms-flex: 0 0 57.5%;
		-moz--ms-flex: 0 0 57.5%;
		-webkit--ms-flex: 0 0 57.5%;
		max-width: 57.5%;
	}

	#monthly-donate-tabs {
		flex: 0 0 42%;
		-ms-flex: 0 0 0 42%;
		max-width: 42%;
		
		margin-top: 56px;
	  }
	.desc-card-campaign-unbar {
		/* min-height: 160px; */
		min-height: 261.5px;
		max-height: 264.5px;
	}

	#yappikaFormDonationContent {
		padding-top: 24px;
	}
	.section-list-primary {
		padding: 80px 0px 32px 0px;
	}
	.primary-image-campaign {
		top: 39px;
		/* max-width: 134%;
		width: 121.5%; */
		max-width: 152%;
		width: 143.5%;		
		top: 0px;
	}

	.choose-label-anonimous {
		padding-left: 39px;
	}

	.option-monthly-annual .form-group-calculator:first-child label::after {
		font-size: 10px;
		left: 26%;
	}
	.option-monthly-annual .form-group-calculator:last-child label::after {
		font-size: 10px;
	}		

	.option-monthly-annual input[type="radio"]:checked+label::before {
		background-size: 76% !important;
		top: 15.24px;
	}

	.option-monthly-annual .form-group-calculator:first-child input[type="radio"]+label:hover::before {
		background-size: 76% !important;
		top: 15.24px;
	}
	.option-monthly-annual .form-group-calculator:last-child input[type="radio"]+label:hover::before {
		background-size: 76% !important;
		top: 15.24px;
	}
	.option-monthly-annual .form-group-calculator:first-child input[type="radio"]:checked+label:hover::before {
		background-size: 76% !important;
	}
	.option-monthly-annual .form-group-calculator:last-child input[type="radio"]:checked+label:hover::before {
		background-size: 76% !important;
	}


}

/* IPAD ONLY  POTRAIT */

/* MEDIA QUERY 768 START */
@media screen and (max-width : 768px) {

	body {
		overflow-x: hidden !important;
	}

	.header {
		/* min-height: 60px;
		max-height: 60px; */
		min-height: 62px;
		max-height: 64px;
	}

	.collapse-navbar-yappika {
		display: none;
	}

	/* .logo-brand {
		width: 140px;
		position: absolute;
		z-index: 19;
		top: 0px;
		position: fixed;
	} */
	.col-nav-left {
		position: relative;
		overflow: unset;
	}

	.col-nav-left .logo-brand a img {
		left: 8px;
		top: 10px;
	}

	.section-detail-banner {
		margin-top: -5px;
	}

	#yappikaFormDonationContent {
		display: none;
	}

	.section-list-primary {
		/* min-height: 550px; */
		min-height: 496px;
		background-position-y: -1px !important;
		background-size: 140% !important;
	}

	.section-list-petisi {
		min-height: 474px;
		background-position-y: -1px !important;
		background-size: 140% !important;
		padding: 80px 0px 24px 0px;
		background-repeat: no-repeat !important;
		margin-top: 0px;
		position: relative;
		overflow: hidden;
	}

	.wrp-for-petisi {
		display: none;
	}

	.spacing-content-petisi {
		height: 34px;
		position: relative;
		margin-top: -24px;
		display: block;
	}

	.spacing-content-petisi:before {
		position: absolute;
		content: " ";
		width: 100.5vw;
		height: 115.5px;
		background: #fff;
		top: -32px;
		left: -51px;
		border-top-left-radius: 22px;
		border-top-right-radius: 22px;
		z-index: 3;
	}

	.title-support-campaign-yappika {
		max-width: 100%;
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		padding-left: 32px;
		padding-right: 32px;
	}

	.footer {
		margin-bottom: 72px;
	}

	.wrp-prayer-item {
		/* height: 740px; */
		height: auto;
		min-height: 110px;
		margin-bottom: 10px;
	}

	.section-white-desc {
		position: relative;
		padding-top: 15px;
		padding-bottom: 15px;
	}

	.wrap-campaign-title {
		padding-right: 0px;
	}

	.col-zd-7 {
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
		padding-right: 15px;
	}

	.col-zd-5 {
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
		margin-top: 105px;
	}

	.donation-box {
		display: flex;
		position: relative;
		overflow: unset;
	}

	.section-white-desc::before {
		position: absolute;
		content: " ";
		width: 100vw;
		height: 25px;
		background: #fff;
		top: -20px;
		left: 0px;
		border-top-left-radius: 22px;
		border-top-right-radius: 22px;
		z-index: 3;
	}

	.ui-widget-content {
		border: transparent none;
	}

	.for-mobile-sorting {
		display: flex;
		flex-wrap: wrap;
		flex: 0 0 100%;
		-ms-flex: 0 0 100%;
		max-width: 100%;
	}

	#progressbar {
		order: 2 !important;
		-ms-flex: 0 0 100% !important;
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}

	.wrp-value-donation {
		order: 1 !important;
		-ms-flex: 0 0 100% !important;
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}

	.col-zd-62 {
		display: flex;
		flex-wrap: wrap;
		padding-left: 48px;
		padding-right: 48px;
	}

	.col-zd-38 {
		padding-left: 48px;
		padding-right: 48px;
	}

	.wrp-footer-top {
		padding-left: 14px;
		padding-right: 14px;
	}

	.wrp-footer-middle {
		padding-left: 14px;
		padding-right: 14px;
	}

	.wrap-campaign-title {
		order: 1;
		flex: 0 0 100%;
		-ms-flex: 0 0 100%;
		max-width: 100%;
		position: relative;
		margin-top: 16px;
		z-index: 4;
	}

	.donation-box {
		order: 2;
		flex: 0 0 100%;
		-ms-flex: 0 0 100%;
		max-width: 100%;
	}

	.story-image-thumbnail img:last-child {
		margin-top: 18px;
	}

	.wrap-desc-campaign {
		order: 3;
		flex: 0 0 100%;
		-ms-flex: 0 0 100%;
		max-width: 100%;
	}

	.donation-box {
		display: flex;
		width: 100%;
		flex-wrap: wrap;
	}

	.bar {
		width: 100%;
		max-width: 100%;
		display: flex;
		flex-wrap: wrap;
	}

	.wrp-value-donation {
		flex: 0 0 100%;
		-ms-flex: 100%;
		max-width: 100%;
		order: 1;
	}

	.donation-items {
		display: none;
	}

	.donation-items-mobile {
		font-family: "Mulish-Regular", sans-serif;
		color: #71716c;
		font-size: 16px;
		line-height: 20px;
		display: block;
	}

	.donation-items-mobile p {
		font-family: "Mulish-Bold", sans-serif;
		color: #363636;
		font-size: 18px;
		line-height: 20px;
	}

	.donation-items-mobile p span {
		font-family: "Mulish-Regular", sans-serif;
		color: #71716c;
		font-size: 16px;
		line-height: 20px;
	}

	.wrp-value-donation {
		padding-bottom: 6px;
	}

	.raised {
		width: 100%;
		display: flex;
		flex: 0 0 100%;
		-ms-flex: 0 0 100%;
		align-items: center;
		flex-wrap: wrap;
	}

	.raised h3 {
		/* width: auto;
		display: unset; */
		max-width: 100%;
		flex: 0 0 100%;
		-ms-flex: 0 0 100%;
		font-size: 18px;
		float: left;
		font-size: 19px;
		margin-right: 5px;
		margin-bottom: 1px;
	}

	.raised span {
		font-size: 12.5px;
		line-height: 13px;
		max-width: 100%;
		flex: 0 0 100%;
		-ms-flex: 0 0 100%;
		margin-bottom: 10px;
	}

	.wrap-campaign-title h2 {
		color: #363636;
		font-size: 21px;
		line-height: 27px;
		margin-bottom: 20px;
	}

	.bottom-socmed {
		float: right;
	}

	.load-donatur {
		line-height: 24px;
	}

	.load-donatur a.btn-load-donatur {
		border: 0px;
		background: rgba(216, 26, 31, 0.15);
		font-size: 14px;
		letter-spacing: 0.35px;
		color: #d81a1f;
		font-family: "Mulish-SemiBold", sans-serif;
		padding: 6px 16px;
		border-radius: 21px !important;
		overflow: hidden;
		max-width: 256px;
		text-align: center;
		margin: 0 auto;
		display: block;
	}

	.head-card-donatur {
		background: #fff;
		border-bottom: 1px solid #d9d9d9;
	}

	.date-donation {
		text-align: right;
	}

	#modalFormDonation .modal-dialog-form {
		margin-left: auto;
		margin-right: auto;
		margin-top: 14%;
	}

	.wrp-choose-payment {
		height: auto;
		overflow: hidden;
		padding: 0px 0px 10px 0px;
		border: 0px;
	}

	#payment label {
		height: auto;
		background: #f9f9f9;
		border: 2px solid #f9f9f9;
		margin-bottom: 11px;
		min-height: 80px;
	}

	#payment input[type="radio"]:checked+label {
		background-size: 20px;
		background-position-x: 8px;
		background-position-y: 20px;
	}


	/* READMORE DESCRIPTION TEXT MOBILE */

	.wrap-desc-campaign {
		height: auto;
		position: relative;
		padding-bottom: 48px;
		margin-bottom: 48px;
	}

	.limited-desc {
		/* max-height: 136px; */
		max-height: 198px;
		-webkit-box-shadow: inset 0px -40px 15px -15px #ffffff;
		box-shadow: inset 0px -40px 15px -15px #ffffff;
		overflow: hidden;
		padding-bottom: 36px;
		position: relative;
	}

	.limited-desc-petisi {
		-webkit-box-shadow: inset 0px -40px 15px -15px #ffffff;
		box-shadow: inset 0px -40px 15px -15px #ffffff;
		overflow: hidden;
		padding-bottom: 36px;
		position: relative;
		padding-right: 0;
		z-index: 4;
		margin-top: -30px;
	}

	.wrap-desc-campaign {
		height: auto;
		position: relative;
		padding-bottom: 10px;
		margin-bottom: 0px;
	}

	.readmore-description {
		cursor: pointer;
		margin-bottom: 15px;
		position: absolute;
		bottom: -15px;
		z-index: 3;
		font-size: 12.5px;
		font-family: "Mulish-SemiBold", sans-serif;
		left: 0;
		right: 0;
		margin-left: auto;
		margin-right: auto;
	}

	.readmore-petisi {
		cursor: pointer;
		margin-bottom: 15px;
		position: absolute;
		bottom: -15px;
		z-index: 3;
		font-size: 12.5px;
		font-family: "Mulish-SemiBold", sans-serif;
		left: 0;
		right: 0;
		margin-left: auto;
		margin-right: auto;
	}

	.textshowmore {
		background: rgba(216, 26, 31, 0.15);
		font-size: 14px;
		letter-spacing: 0.4px;
		color: #d81a1f;
		font-family: "Mulish-SemiBold", sans-serif;
		padding: 6px 26px;
		border-radius: 21px !important;
		overflow: hidden;
		max-width: 196px;
		text-align: center;
		margin: 0 auto;
		display: block;
	}

	.textshowless {
		background: rgba(216, 26, 31, 0.15);
		font-size: 14px;
		letter-spacing: 0.4px;
		color: #d81a1f;
		font-family: "Mulish-SemiBold", sans-serif;
		padding: 5px 26px;
		border-radius: 21px !important;
		overflow: hidden;
		max-width: 196px;
		text-align: center;
		margin: 0 auto;
		display: none;
	}

	.white-box-shadow {
		-webkit-box-shadow: inset 0px -40px 15px -15px #fff;
		box-shadow: inset 0px -64px 15px -15px #fff;
		height: 100px;
		width: 100%;
		display: block;
		position: absolute;
		bottom: -3px;
		z-index: 2;
	}

	/* READMORE DESCRIPTION TEXT MOBILE END*/

	/* MOBILE NAV BURGER NAV AND LANGUAGE */

	.section-mobile-nav {
		/* position: sticky;
	-ms-position: sticky; */
		position: fixed;
		-ms-possition: fixed;
		top: 0px;
		left: 0px;
		z-index: 11;
		background: transparent none;
		min-height: 56px;

	}

	.header-top-mobile {
		width: 100vw;
		border-bottom: 0px;
		padding: 4px 0px 3px 0px;
		display: flex;
	}

	.logo-nav-mobile {
		width: 92px;
		padding: 7px 6px 4px 10px;
		-ms-flex: 0 0 92px;
		flex: 0 0 92px;
		max-width: 92px;
	}

	.right-setting-mobile {
		/* -ms-flex: 0 0 66.5%;
    flex: 0 0 66.5%;
    max-width: 66.5%; */
		/* -ms-flex: 0 0 76%;
	flex: 0 0 76%;
	max-width: 76%; */
		/* -ms-flex: 0 0 86%;
    flex: 0 0 86%;
    max-width: 86%;	 */
		-ms-flex: 0 0 94%;
		flex: 0 0 94%;
		max-width: 94%;
		padding-right: 30px;
	}

	.btn-lang-mobile {
		background: transparent none;
		color: #fff;
		font-size: 17px;
		line-height: 28px;
		font-family: "Mulish-Bold", sans-serif;
		letter-spacing: 0.4px;
	}

	.hamburger-box {
		width: 32px;
		position: relative;
	}

	.hamburger-inner,
	.hamburger-inner::after,
	.hamburger-inner::before {
		width: 32px;
		background-color: #fff;
	}

	.hamburger.is-active .hamburger-inner,
	.hamburger.is-active .hamburger-inner::after,
	.hamburger.is-active .hamburger-inner::before {
		background-color: #fff;
	}

	.d-lang {
		-ms-align-items: flex-end !important;
		align-items: flex-end !important;
		display: flex;
		flex-wrap: wrap;
		-ms-flex-direction: column;
		flex-direction: column;
		z-index: 9;
		margin-right: 36px;
	}

	#dropdownMenuLang {
		position: relative;
		padding-right: 30px;
		margin-top: 4px;
	}

	#dropdownMenuLang:focus {
		box-shadow: none;
		color: #fff;
	}

	#dropdownMenuLang::after {
		content: " ";
		width: 22px;
		height: 22px;
		background: url(../images/global-white.svg);
		background-size: auto;
		background-size: 100%;
		border: 0px;
		top: 10px;
		position: absolute;
		right: 0px;
	}

	.space-navbar-mobile {
		width: 100%;
		height: 110px;
		display: block;
	}

	/* MOBILE NAV BURGER NAV AND LANGUAGE */

	#mobileDonatetab {
		height: auto;
		margin-bottom: 8px;
		border-bottom: 0px;
	}

	#mobileDonatetab li {
		overflow: hidden;
		width: 50%;
		background: #fff;
		color: #606060;
		border: 2px solid #fff !important;
		border-radius: 12.5px;
	}

	#mobileDonatetab li a {
		font-family: "Mulish-SemiBold", sans-serif;
		color: #393939;
		font-size: 14.5px;
		text-align: center;
		padding: 16px 8px;
	}

	#mobileDonatetab .nav-link.active {
		background: #d81a1f;
		color: #fff;
	}

	#mobileFormDonation .modal-dialog-form {
		margin-left: auto;
		margin-right: auto;
		margin-top: 32%;
	}

	.section-thankyou-page {
		min-height: 480px;
		padding: 0px 15px 32px 15px;
	}

	.thanks-desc-other {
		width: 94%;
		padding: 10px 10px 10px 10px;
	}

	.sorry-title {
		font-family: "Mulish-Bold", sans-serif;
		color: 363636;
		width: 86%;
	}

	.btn-tryagain-rounded {
		width: 86%;
	}

	.primary-image-campaign {
		max-width: 159.8%;
		width: auto;
		position: absolute;
		top: -29px;
		margin-left: auto;
		margin-right: auto;
		/* left: -64px; */
		left: -186px;
		right: 0;
		z-index: 2;
	}

	.desc-donate-button {
		display: none !important;
	}

	/*  NEW MOBILE SIMPLE */
	.dropdown-menu-list {
		position: fixed;
		top: 0px;
		left: 0px;
		visibility: hidden;
		opacity: 1;
		background: rgba(255, 255, 255, 0.8);
		-webkit-transition: opacity 0.2s;
		-moz-transition: opacity 0.2s;
		-o-transition: opacity 0.2s;
		transition: opacity 0.2s;
		width: 100%;
		height: 100vh;
		z-index: 8;
	}

	.dropdown-menu-list.active {
		width: 100%;
		background: #fff;
		margin-top: 62.5px;
		text-align: left;
		padding: 0px 0px 30px 0px;
		opacity: 1;
		z-index: 8;
		-webkit-box-shadow: 0px 7px 14px -6px #123a38;
		-moz-box-shadow: 0px 7px 14px -6px #123a38;
		box-shadow: 0px 7px 14px -6px #123a38;
		position: fixed;
		visibility: visible;
	}


	body.unscrolled {
		overflow-y: hidden;
	}

	.all-menu-mobile {
		padding-top: 120px;
		padding: 15px 0px 10px 0px;
		height: 90vh;
		overflow-y: scroll;
	}

	.space-mobile {
		width: 100%;
		display: block;
		height: 32px;
	}

	a.subhead-menu {
		font-size: 18px;
		line-height: 23px;
		font-family: 'Rubik-Medium', sans-serif;
		color: #363636;
		padding: 6px 12px;
		display: block;
		width: 100%;
		letter-spacing: 0.55px;
		text-align: left;
		margin: 0px;
	}

	a.subhead-menu:hover {
		color: #363636;
		text-decoration: none !important;
		outline: none !important;
	}

	.according-menu {
		height: auto;
		overflow: hidden;
		text-align: left;
		padding-top: 8px;
		padding-left: 15px;
		padding-right: 18px;
	}

	a.subhead-menu:focus {
		color: #363636;
		text-decoration: none !important;
		outline: none !important;
	}

	.according-menu ul {
		padding-left: 0px;
	}

	.according-menu ul li {
		list-style: none;
	}

	.according-menu ul li a {
		list-style: none;
		text-align: left;
		text-decoration: none;
		outline: none;
		color: #606060;
		font-size: 16px;
		font-family: 'Mulish-SemiBold', sans-serif;
		padding: 6.5px 0px;
		display: block;
	}

	.according-menu ul li:first-child {
		margin-top: 5px;
	}

	.according-menu ul li:first-child a {
		padding-top: 1px;
	}

	.according-menu ul li:last-child a {
		padding-top: 1px;
	}

	/*  NEW MOBILE SIMPLE */

	.name-and-value h5 {
		font-size: 18px;
		line-height: 21px;
		margin-bottom: 1px;
	}

	.name-and-value p {
		margin-bottom: 6px;
	}

	.name-and-value p span {
		width: 100%;
		display: block;
	}

	.contet-card-campaign-text {
		padding: 30px 26px 24px 26px;
	}

	.campaign-updates {
		margin-top: 0px;
	}

	#dropdownLangdesk {
		display: none;
	}

	.modal-header-donation h2 {
		margin-top: 14px;
		margin-bottom: 12px;
	}

	.section-donation-step {
		width: 100%;
		height: auto;
		padding: 24px 0px 48px 0px;
		min-height: 480px;
		font-family: "Mulish-Regular", sans-serif;
		margin-top: 10px;
	}

	.line-separator-step::before {
		left: -32px;
		width: 105vw !important;
	}

	.wrp-section-donation-step {
		overflow: hidden;
		padding: 0px 10px 48px 10px;
	}

	.brand-logo-payment {
		padding-left: 0px;
	}

	#payment label .center-logo-payment {
		padding-left: 0px;
	}

	.wrp-image-before {
		margin-bottom: 15px;
	}

	.wrp-image-after {
		margin-bottom: 15px;
	}

	.title-updates-story h1 {
		color: #363636;
		font-size: 24px;
		line-height: 28.5px;
	}

	.wrp-liner-time {
		position: relative;
		width: 100%;
		height: auto;
		padding-left: 24px;
		padding-right: 6px;
		margin-left: 4px;
	}

	.card-campaign-updates-pointer::before {
		left: -36px;
		top: 56px;
		width: 18px;
		height: 18px;
	}

	.card-campaign-updates-pointer::after {
		left: -32px;
		top: 60px;
		background: #e32028;
		width: 10px;
		height: 10px;
	}

	.card-campaign-updates-content .contet-card-campaign-text {
		padding-left: 0px;
		padding-right: 0px;
	}

	.wrp-liner-time::after {
		left: -8px;
		bottom: -2px;
		background: #ddd;
		width: 14px;
		height: 14px;
	}

	.section-grey-news {
		padding: 14px 0px 24px 0px;
		margin-top: 0px;
	}


	.gutter--1.row,
	.gutter--1.container,
	.gutter--1.container-fluid {
		margin-left: -1px;
		margin-right: -1px;
	}

	.gutter--1>[class^="col-"] {
		padding-left: 1px;
		padding-right: 1px;
	}

	.form-step-container {
		padding-left: 0px;
		padding-right: 0px;
		overflow: hidden;
	}

	.wrp-choosed-nominal::before {
		left: -10px;
	}

	.section-donation-step {
		height: 100%;
	}

	.card-opinion {
		width: 300px;
		min-height: 276px;
	}

	.desc-card-campaign-bar {
		padding: 27px 23px 2px 23px;
		min-height: 48px;
	}

	.btn-sm-cta {
		background: #5a79bc;
		text-align: center;
		width: 100%;
		display: block;
		padding: 15px 10px;
		letter-spacing: 0.4px;
		font-family: "Rubik-SemiBold", sans-serif;
		border-radius: 9.5px;
		font-size: 16px;
		line-height: 20px;
	}

	.primary-campaign-title-desc {
		padding: 0px 0px 32px 0px;
		width: 100%;
		height: auto;
		overflow: hidden;
	}

	.wrp-campaign-title-desc-mobile {
		width: 100%;
		height: auto;
	}

	.home-mobile-campaign-title {
		width: 100%;
		height: auto;
		padding: 10px 0px;
		font-family: "Mulish-Regular", sans-serif;
		font-size: 17px;
		line-height: 24px;
		color: #71716c;
	}

	.mobile-form-campaign-primary {
		width: 100%;
		height: auto;
		padding: 10px 0px;
		margin-bottom: 36px;
	}

	.home-mobile-campaign-title p {
		margin-bottom: 24px;
	}

	.home-mobile-campaign-title h1 {
		font-family: "Rubik-SemiBold", sans-serif;
		margin-top: 24px;
		/* font-size: 25px;
	line-height: 32.5px; */
		font-size: 24px;
		line-height: 31px;
		color: #202020;
		letter-spacing: 0.15px;
		margin-bottom: 16px;
		position: relative;
		margin-top: 12px;
	}

	.home-mobile-campaign-title h1 a {
		color: #202020;
		text-decoration: none;
		outline: none;
	}

	.home-mobile-campaign-title h1 a:hover {
		color: #202020;
		text-decoration: none;
		outline: none;
	}

	.home-mobile-campaign-title h1 a:focus {
		color: #202020;
		text-decoration: none;
		outline: none;
	}

	.home-mobile-campaign-title p a {
		color: #71716c;
		text-decoration: none;
		outline: none;
	}

	.home-mobile-campaign-title p a:hover {
		color: #71716c;
		text-decoration: none;
		outline: none;
	}

	.home-mobile-campaign-title p a:focus {
		color: #71716c;
		text-decoration: none;
		outline: none;
	}

	.load-campaign-unbar a.btn-load-campaign-unbar {
		margin-bottom: 48px;
	}

	.see-for-campaign-detail {
		width: 100%;
		height: auto;
		flex: 100%;
		-ms-flex: 0 0 100%;
		flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		display: flex;
		justify-content: center;
		margin-top: 24px;
		margin-bottom: 8px;
	}

	.see-for-campaign-detail a.btn-load-campaign-detailed {
		margin-bottom: 10px;
		background: #fff;
		color: #71716c;
		border: 2px solid #71716c;
		border-radius: 14.5px;
		padding: 15px 36px;
		min-width: 256px;
		width: 100%;
		text-align: center;
		max-height: 256px;
		font-family: "Mulish-SemiBold", sans-serif;
		margin-top: 2px;
		text-decoration: none;
	}

	.see-for-campaign-detail a.btn-load-campaign-detailed:hover {
		color: #71716c;
		border: 2px solid #71716c;
		text-decoration: none;
		outline: none;
	}

	.see-for-campaign-detail a.btn-load-campaign-detailed:focus {
		color: #71716c;
		border: 2px solid #71716c;
		text-decoration: none;
		outline: none;
	}

	.head-card-opinion h5 {
		font-family: "Rubik-Medium", sans-serif;
		color: #202020;
		font-size: 17px;
	}

	.body-card-opinion {
		padding: 10px 5px 2px 6px;
	}

	.card-campaign-unbar {
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.card-campaign-unbar:last-child {
		margin-bottom: 32px;
	}

	.img-card-campaign-unbar {
		width: 100%;
		height: auto;
		/* min-height: 156px; */
		min-height: 256px;
	}

	.slick-prev {
		left: -3px;
	}

	.slick-next {
		right: 4.5px;
	}

	.home-campaign-bar {
		flex: 0 0 100%;
		-ms-flex: 0 0 100%;
		max-width: 100%;
	}

	.home-campaign-cta {
		flex: 0 0 100%;
		-ms-flex: 0 0 100%;
		min-width: 100%;
		max-width: 100%;
		order: 3;
		margin-top: 0px;
		margin-bottom: 24px;
	}

	.desc-card-campaign-bar {
		font-family: "Mulish-Regular", sans-serif;
		font-size: 15px;
		line-height: 24px;
		padding: 27px 20px 2px 20px;
	}

	.section-donation-step {
		padding: 24px 0px 6px 0px;
	}

	.search-page {
		flex-direction: column;
	}

	.select2-container--default .select2-selection--single {
		min-height: 50px;
		height: 50px !important;
		min-width: 110px !important;
		border: 1px solid #AEAEAE !important;
		border: 1px solid #ced4da;
		border-top-right-radius: 9.5px;
		border-bottom-right-radius: 9.5px;
		border-top-left-radius: 9.5px;
		border-bottom-left-radius: 9.5px;
	}

	.select2-container--default .select2-selection--single .select2-selection__rendered {
		color: #797979;
		line-height: 48px;
		font-size: 15px;
	}

	.select2-container--default .select2-selection--single .select2-selection__arrow {
		top: 12px;
		right: 9px;
	}

	.search-page input.form-control {
		font-size: 1rem;
		font-weight: 400;
		line-height: 2.0;
		height: 51px;
		width: 100%;
		border-radius: 9.5px !important;
	}

	.btn-submit-search {
		border-radius: 9.5px;
		width: 100%;
		margin-bottom: 32px;
	}

	.section-all-campaign {
		width: 100%;
		height: auto;
		padding: 24px 0px 36px 0px;
		margin-top: 0px;
	}

	.wrp-search-bar {
		margin-top: 82px;
	}

	.m-overflow-hidden {
		overflow: hidden;
		position: relative;
		z-index: 4;
		margin-top: -15.5px;
	}

	.col-sp-62 {
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
		padding-left: 20px;
		padding-right: 20px;
	}

	.col-sp-38 {
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
		padding-left: 20px;
		padding-right: 20px;
		position: relative;
	}

	#yappikaSupportDonationContent {
		min-height: 10px;
		padding: 5px;
	}

	.title-support-campaign-yappika {
		height: auto;
	}

	.support-landing-page .wrap-form-donation {
		box-shadow: none;
	}

	.wrp-support-form-donation {
		padding: 10px 0px 34px 0px;
		border: 0px;
	}

	.wrap-support-title h1 {
		font-family: 'Rubik-SemiBold', sans-serif;
		color: #363636;
		font-size: 22px;
		line-height: 31.5px;
		margin-bottom: 18px;
	}

	.other-cta-support {
		padding: 10px 0px 18px 0px;
	}

	.wrap-support-title {
		display: block;
	}

	#withsupport {
		margin-top: 486px;
	}

	.title-support-campaign-yappika h1 {
		margin-top: 110px;
		display: none;
	}

	.title-support-campaign-yappika p {
		display: none;
	}

	.wrap-support-title h1 {
		margin-top: 6px;
		display: block;
		font-size: 29px;
		line-height: 35.5px;
	}

	.wrap-desc-campaign p {
		display: block;
	}

	.section-list-primary::before {
		height: 120px;
	}

	.since {
		padding-right: 14px;
	}

	.since p {
		margin-top: 48px;
		margin-bottom: 0px;
	}

	.desc-card-campaign-unbar {
		min-height: 112px;
	}

	#progressbar.progress {
		height: 2em;
	}

	.bottom-socmed {
		float: left;
		position: relative;
		margin-top: -25px;
	}

	.footer {
		padding: 12px 0px 0px 0px;
	}


/* OPTION RADIO MONTLHY ONE TIME 768 */


.option-monthly-annual {
	margin-top: 24px;
	margin: 0 auto;
	/* min-width: 432px;
	max-width: 432px; */
	width: 100%;
	min-height: 82px;
	border: 1px solid var(--grey-two);
	border-radius: 6.4px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	-ms-align-items: center;
	-moz-align-items: center;
	-webkit-align-items: center;
	padding: 0px 0px;
}
.option-monthly-annual-mobile {
	margin-top: 24px;
	margin: 0 auto;
	/* min-width: 432px;
	max-width: 432px; */
	width: 100%;
	min-height: 82px;
	border: 1px solid var(--grey-two);
	border-radius: 6.4px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	-ms-align-items: center;
	-moz-align-items: center;
	-webkit-align-items: center;
	padding: 0px 0px;
	margin-bottom: 8px;
}

.option-monthly-annual-mobile input[type="radio"]:checked + label {
	background: #ededed !important;
	border: 1px solid #5a79bc !important;
	color: #fff;
	font-family: "Mulish-Bold", sans-serif !important;
  }

.form-group-calculator {
	width: 50%;
	position: relative;
}

.card-income {
	width: 100%;
	height: auto;
	min-height: 164px;
	padding: 20px 40px 20px 40px;
	margin-top: 16px;
	margin-bottom: 16px;
	background: #fff;
	border: 1px solid #e9eefb !important;
	border-radius: 6.4px;
	box-shadow: 0 10px 29px 0 rgba(0, 0, 0, 0.033);
	-ms-box-shadow: 0 12px 32px 0 rgba(0, 0, 0, 0.033);
	-moz-box-shadow: 0 12px 32px 0 rgba(0, 0, 0, 0.033);
	-webkit-box-shadow: 0 12px 32px 0 rgba(0, 0, 0, 0.033);
	z-index: 2;
	position: relative;
	margin: 48px 0px 20px 0px;
	min-height: 564px;
}

.form-group-statics {
	position: relative;
	padding-top: 17px;
}

.form-group-statics label {
	font: normal 600 16.24px/30.64px var(--font-jakarta-sans);
	color: var(--black-100);
	margin-bottom: 8px;
}

.form-group-statics .currency-label {
	left: 10px;
	top: 66px;
}

.form-group-statics .currency-label::before {
	display: none;
}

.form-group-statics .input-fit {
	padding-left: 60px;
	margin-bottom: 8px;
}

.caption-state-label {
	width: 100%;
	height: auto;
	position: relative;
	margin-top: -36px;
	min-height: 134px;
}

.title-state-label {
	width: 100%;
	height: auto;
	position: relative;
	margin-bottom: 24px;
	font: normal 400 15.24px/26.64px;
	color: #363636;
	letter-spacing: 0.35px;
}

.title-state-label h3 {
	font: normal 700 18.24px/27.64px;
	padding-right: 10px;
	color: var(--black-100);
	margin-bottom: 18px;
	width: auto;
	display: unset;
	background: #fff;
	padding: 8px 10px;
	margin-left: -10px;
	letter-spacing: 0.35px;
}

.content-state-label {
	font: normal 400 15.24px/26.64px;
	color: #363636;
	letter-spacing: 0.35px;
}

.content-state-label p {
	margin-bottom: 12px;
}

.option-monthly-annual input[type="radio"] {
	opacity: 0;
	position: fixed;
	width: 0;
	font-weight: 500;
	position: absolute;
}

.option-monthly-annual label {
	display: inline-block;
	background-color: #fff;
	padding: 16px 5px;
	font: normal 400 12.24px/26.64px;
	border: 1px solid #fff;
	border-radius: 4px;
	width: 100%;
	color: transparent!important;
	text-align: center;
	margin-top: 6px;
	cursor: pointer;
	margin-bottom: 6px;
	text-transform: uppercase;
	position: relative;
	margin-left: 1px;
	margin-right: 1px;
}

.option-monthly-annual input[type="radio"]:checked+label {
	background: #fff!important;
	border: 1px solid #5a79bc!important;
	color: #fff!important;
	font: normal 400 13.24px/26.64px;
}

.option-monthly-annual input[type="radio"]:checked+label::before {
	content: " ";
	background: transparent url(../images/checklist-circle.svg) top center no-repeat;
	width: 30px;
	height: 30px;
	position: absolute;
	right: unset;
	top: 14.24px;
    left: 15.24%;
	border-top-right-radius: 3.4px;
	border-top-left-radius: 0px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 3.4px;
	background-size: 86%!important;
}

.option-monthly-annual-mobile input[type="radio"]:checked+label::before {
	content: " ";
	background: transparent url(../images/checklist-circle.svg) top center no-repeat;
	width: 30px;
	height: 30px;
	position: absolute;
	right: unset;
	top: 14.24px;
    left: 15.24%;
	border-top-right-radius: 3.4px;
	border-top-left-radius: 0px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 3.4px;
	background-size: 86%!important;
}

.option-monthly-annual-mobile .form-group-calculator:last-child input[type="radio"]:checked + label:hover::before {
	background: transparent url(../images/checklist-circle.svg) top center no-repeat !important;
	background-size: 86%!important;
	top: 14.24px;
	left: 15.24%;
	background-size: 86% !important;
  }
.option-monthly-annual-mobile .form-group-calculator:first-child input[type="radio"]:checked + label:hover::before {
	background: transparent url(../images/checklist-circle.svg) top center no-repeat !important;
	background-size: 86%!important;
	top: 14.24px;
	left: 15.24%;
	background-size: 86% !important;
}
.donation-form-action .m-recuring .option-monthly-annual-mobile label {
	/* color: yellow; */
	color: transparent;
}

.donation-form-action .m-recuring .option-monthly-annual-mobile input[type="radio"]:checked + label {
	/* color: yellow; */
	color: transparent;
}

.option-monthly-annual input[type="radio"]+label:hover {
	background: #f9f9f9;
	color: #f9f9f9;
}

.option-monthly-annual input[type="radio"]:checked+label:hover {
	background: #f9f9f9;
	border: 1px solid #f9f9f9;
	color: #fff;
}

.option-monthly-annual .form-group-calculator:first-child input[type="radio"]:checked+label::before {
	/* left: 20%; */
	left: 4.8%;
}

.option-monthly-annual .form-group-calculator:first-child input[type="radio"]+label:hover {
	background: #f9f9f9;
	color: #f9f9f9;
}

.option-monthly-annual .form-group-calculator:first-child input[type="radio"]+label:hover::before {
	content: " ";
	background: #f9f9f9 url(../images/checklist-circle-grey.svg) top center no-repeat;
	color: #f9f9f9;
	width: 30px;
	height: 30px;
	position: absolute;
	right: unset;
	top: 10.24px;
	/* left: 20%; */
	left: 4.8%;
	border-top-right-radius: 3.4px;
	border-top-left-radius: 0px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 3.4px;
	background-size: 86%!important;
}

.option-monthly-annual .form-group-calculator:first-child label::after {
	content: "Perbulan";
	content: var(--var-mounthly);
	text-transform: uppercase;
	position: absolute;
	/* left: 39%; */
	left: 24%;
	top: 12px;
	z-index: 3;
	color: #363636;
	font-size: 11.64px;
	font-family: "Mulish-ExtraBold", sans-serif;
}

.option-monthly-annual .form-group-calculator:first-child label::after {
	content: "Perbulan";
	content: var(--var-mounthly);
	text-transform: uppercase;
	position: absolute;
	/* left: 39%; */
	left: 24%;
	top: 12px;
	z-index: 3;
	color: #363636;
	font-size: 11.64px;
	font-family: "Mulish-ExtraBold", sans-serif;
}


.option-monthly-annual-mobile .form-group.form-group-calculator input[type="radio"] {
	opacity: 0;
	position: fixed;
	width: 0;
	font-weight: 500;
	position: absolute;
  }

.option-monthly-annual-mobile .form-group-calculator:first-child label::after {
	content: "Perbulan";
	content: var(--var-mounthly-mobile);
	text-transform: uppercase;
	position: absolute;
	/* left: 39%; */
	left: 34.64%;
    top: 18px;
	z-index: 3;
	color: #363636;
	font-size: 11.64px;
	font-family: "Mulish-ExtraBold", sans-serif;
}

.option-monthly-annual .form-group-calculator:first-child input[type="radio"]:checked+label::after {
	color: #363636!important;
}

.option-monthly-annual .form-group-calculator:first-child input[type="radio"]:checked+label:hover::before {
	background: transparent url(../images/checklist-circle.svg) top center no-repeat !important;
	left: 4.8%;
	background-size: 86%;
}

.option-monthly-annual .form-group-calculator:last-child input[type="radio"]:checked+label::before {
	left: 4.8%;
	color: var(--blue-two) !important;
	font-size: 11.64px;
}

.option-monthly-annual .form-group-calculator:last-child label::after {
	content: "Pertahun";
	content: var(--var-yearly);
	font-family: "Mulish-ExtraBold", sans-serif;
	color: #363636;
	text-transform: uppercase;
	position: absolute;
	left: 26.64%;
	top: 12px;
	z-index: 3;
	color: #363636;
	font-size: 11.64px;
}
.option-monthly-annual-mobile .form-group-calculator:first-child label{
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
}

.option-monthly-annual-mobile .form-group-calculator:last-child label{
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
}

.option-monthly-annual-mobile .form-group-calculator:last-child label::after {
	content: "Satu kali";
	content: var(--var-yearly-mobile);
	font-family: "Mulish-ExtraBold", sans-serif;
	color: #363636;
	text-transform: uppercase;
	position: absolute;
	left: 34.64%;
    top: 18px;
	z-index: 3;
	color: #363636;
	font-size: 11.64px;
}

.option-monthly-annual-mobile .form-group-calculator:first-child input[type="radio"] + label:hover::before {
	content: " ";
	background: transparent url(../images/checklist-circle-grey.svg) top center no-repeat;
	background-size: 89% !important;
	color: #f9f9f9;
	width: 30px;
	height: 30px;
	position: absolute;
	right: unset;
	top: 14.24px;
    left: 15.24%;;
	border-top-right-radius: 3.4px;
	border-top-left-radius: 0px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 3.4px;
	background-size: 86% !important;
}

.option-monthly-annual-mobile .form-group-calculator:last-child input[type="radio"] + label:hover::before {
	content: " ";
	background: transparent url(../images/checklist-circle-grey.svg) top center no-repeat;
	background-size: 89% !important;
	color: #f9f9f9;
	width: 30px;
	height: 30px;
	position: absolute;
	right: unset;
	top: 14.24px;
    left: 15.24%;;
	border-top-right-radius: 3.4px;
	border-top-left-radius: 0px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 3.4px;
	background-size: 86% !important;
  }


.option-monthly-annual .form-group-calculator:last-child input[type="radio"]:checked+label::after {
	color: #363636!important;
}

.option-monthly-annual .form-group-calculator:last-child input[type="radio"]:checked+label:hover::before {
	background: transparent url(../images/checklist-circle.svg) top center no-repeat!important;
	/* left: 20%; */
	left: 4.8%;
	background-size: 86%!important;
}

.option-monthly-annual .form-group-calculator:last-child input[type="radio"]+label:hover {
	background: #f9f9f9;
	color: #f9f9f9;
}

.option-monthly-annual .form-group-calculator:last-child input[type="radio"]+label:hover::before {
	content: " ";
	background: #f9f9f9 url(../images/checklist-circle-grey.svg) top center no-repeat;
	color: #f9f9f9;
	width: 30px;
	height: 30px;
	position: absolute;
	right: unset;
	top: 10.24px;
	/* left: 20%; */
	left: 4.8%;
	border-top-right-radius: 3.4px;
	border-top-left-radius: 0px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 3.4px;
	background-size: 86%!important;
}

/* OPTION RADIO MONTLHY ONE TIME 768 */

}

/* MEDIA QUERY 768 END */


/* MEDIA QUERY 480 START */

@media screen and (max-width : 480px) {

	#modalFormDonation .modal-dialog-form {
		margin-left: 0px;
		margin-right: 0px;
		margin-top: 54%;
	}

	#mobileDonatetab {
		height: auto;
		margin-bottom: 8px;
		border-bottom: 0px;
	}

	#mobileDonatetab li {
		overflow: hidden;
		width: 50%;
		background: #fff;
		color: #606060;
		border: 2px solid #fff !important;
		border-radius: 12.5px;
	}

	#mobileDonatetab li a {
		font-family: "Mulish-SemiBold", sans-serif;
		color: #393939;
		font-size: 14.5px;
		text-align: center;
		padding: 16px 8px;
	}

	#mobileDonatetab .nav-link.active {
		background: #d81a1f;
		color: #fff;
	}

	#mobileFormDonation .modal-dialog-form {
		margin-left: 0px;
		margin-right: 0px;
		margin-top: 56%;
		margin-bottom: -0.5px;
	}

	#mobileFormDonation .modal-dialog-form {
		height: auto;
		border-bottom-right-radius: 0px !important;
		border-bottom-left-radius: 0px !important;
	}

	.section-list-primary {
		/* min-height: 305px; */
		/* min-height: 300px; */
		/* min-height: 220px; */
		min-height: 256px;
		background-size: 147.5% !important;
		overflow-x: hidden;
	}

	.col-zd-62 {
		padding-left: 19px;
		padding-right: 19px;
	}

	.col-zd-38 {
		padding-left: 19px;
		padding-right: 19px;
	}

	.wrp-footer-top {
		padding-left: 8px;
		padding-right: 8px;
	}

	.wrp-footer-middle {
		padding-left: 8px;
		padding-right: 8px;
		padding-bottom: 20px;
	}

	.wrap-campaign-title h2 {
		font-size: 18px;
		line-height: 24px;
		margin-bottom: 12px;
		margin-top: 15px;
	}

	.wrap-desc-campaign {
		padding-right: 0px;
	}

	.wrap-desc-campaign {
		font-family: "Mulish-Regular", sans-serif;
		font-size: 16px;
		line-height: 24px;
	}

	.head-card-donatur {
		width: 100%;
		height: auto;
		overflow: hidden;
		padding: 8px 6px;
	}

	.quote-or-pray {
		width: 100%;
		height: auto;
		padding: 20px 15px;
	}

	.left-head-donation {
		position: relative;
		padding: 12px 0px 2px 62px;
	}

	.circle-donatur {
		width: 42px;
		height: 42px;
		border-radius: 21.5px;
		background: #f9c6ca;
		left: 7px;
	}

	.left-head-donation h5 {
		font-size: 18px;
		line-height: 22px;
		margin-bottom: 3px;
	}

	.left-head-donation p {
		font-size: 15px;
		line-height: 18px;
	}

	.label-pray h6 {
		font-size: 17px;
		line-height: 19px;
		letter-spacing: 0.35px;
		color: #393939;
		margin-bottom: 2px;
	}

	.quote-or-pray {
		font-size: 16px;
		line-height: 22.5px;
	}

	.date-donation {
		text-align: right;
	}

	.date-donation p {
		font-size: 14.5px;
		line-height: 18px;
	}

	.left-head-donation p span {
		font-size: 15px;
		line-height: 18px;
	}

	.list-link-footer ul li a {
		font-size: 16px;
		line-height: 22px;
	}

	.date-donation p {
		font-size: 13.5px;
		line-height: 23.5px;
		color: #71716c;
		margin-bottom: 6px;
	}

	.title-column-footer {
		padding-top: 20px;
	}

	.list-link-footer {
		padding-bottom: 0px;
	}

	.list-link-footer ul {
		margin-bottom: 1px;
	}

	.title-column-footer h4 {
		font-size: 19px;
		line-height: 20px;
	}


	.footer {
		/* background: #d81a1f; */
		background: #1c1c1c;
		color: #fff;
		padding: 24px 0px 0px 0px;
		margin-bottom: 72px;
	}

	.wrp-footer-bottom {
		padding-top: 24px;
		padding-bottom: 12px;
	}

	.ui-widget {
		font-size: 0.25em;
	}

	.bottom-socmed {
		float: left;
	}

	.modal-header-donation h2 {
		font-size: 15px;
		line-height: 19px;
		width: 92%;
	}

	.modal-header-donation .close {
		right: 7px;
		width: 35px;
		border-radius: 20px;
		height: 35px;
	}

	.modal-header-donation a img {
		width: 12px;
	}

	.modal-header-donation {
		/* padding: 1px 20px; */
		padding: 10px 20px 5px 20px;
	}

	.modal-body-form-donate {
		padding: 15px 20px;
		min-height: 320px;
	}

	#payment input[type="radio"]:checked+label {
		background-size: 20px;
		background-position-x: 8px;
		background-position-y: 20px;
	}

	.d-lang {
		/* margin-right: 35px; */
		margin-right: -12px;
	}

	.thanks-desc-other {
		width: 96%;
		padding: 10px 10px 10px 10px;
	}

	.btn-tryagain-rounded {
		width: 86%;
	}

	.frame-thanks-hero-images {
		background: #f6f2f2;
		width: 137%;
		height: auto;
		min-height: 476px;
		margin-left: auto;
		margin-right: auto;
		left: 0;
		right: 0;
		top: 19.5%;
		left: 51%;
		transform: translate(-50%, -51%);
		text-align: center;
		border-bottom-left-radius: 415px;
		border-bottom-right-radius: 415px;
		position: absolute;
		z-index: 3;
	}

	.sorry-title h2 {
		font-family: "Rubik-Medium", sans-serif;
		color: #303030;
		font-size: 25px;
		line-height: 30px;
		margin-top: 5px;
		margin-bottom: 6px;
	}

	.primary-image-campaign {
		/* max-width: 160.5%; */
		/* max-width: 166.8%; */
		/* max-width: 137.9%; */
		max-width: 140%;
		width: auto;
		position: absolute;
		top: -1.5px;
		margin-left: auto;
		margin-right: auto;
		left: -36px;
		right: 0;
		z-index: 2;
	}

	.title-section-campaign h3 {
		color: #393939;
		font-size: 16.6px;
	}

	.name-and-value p {
		margin-bottom: 4px;
		margin-top: 4px;
		font-size: 15px;
	}

	.white-box-shadow {
		height: 66px;
		bottom: -1px;
	}

	.left-head-donation p {
		font-size: 13px;
		margin-bottom: 5px;
	}

	.left-time-donate p {
		font-size: 13px;
	}


	.white-box-shadow {
		height: 66px;
		bottom: -1px;
	}

	.limited-desc {
		margin-bottom: 40.5px;
	}

	.donatur-campaign {
		padding: 0px 0px 8px 0px;
	}

	.right-setting-mobile {
		-ms-flex: 0 0 74%;
		flex: 0 0 74%;
		max-width: 74%;
		padding-right: 28px;
	}

	.donatur-name-value {
		position: relative;
		padding-left: 60px;
	}

	a.subhead-menu {
		font-size: 17px;
		line-height: 23px;
	}

	.contet-card-campaign-text {
		padding: 20px 20px 16px 20px;
	}

	.contet-card-campaign-text h2 {
		font-size: 17px;
		line-height: 21.5px;
		font-family: 'Rubik-Medium', sans-serif;
		margin-bottom: 15px;
	}

	.admin-name h5 {
		font-family: "Rubik-Medium", sans-serif;
		font-size: 14px;
		line-height: 17px;
	}


	.admin-name {
		padding-left: 14px;
		flex: 0 0 79%;
		-ms-flex: 0 0 79%;
		max-width: 79%;
		font-family: "Mulish-Regular", sans-serif;
		font-size: 12px;
		line-height: 13px;
		letter-spacing: 0.2px;
		color: #71716c;
	}

	.admin-writer {
		flex: 0 0 45px;
		-ms-flex: 0 0 45px;
		max-width: 45px;
		width: 45px;
		height: 45px;
		border-radius: 27.5px;
	}

	.story-image-thumbnail {
		margin-top: 0px;
	}

	.wrap-desc-campaign p {
		margin-bottom: 20px;
	}

	.wrap-desc-campaign h1 {
		font-size: 28px;
		line-height: 33.5px;
	}

	.choose-payment-link .brand-logo-payment {
		width: 98px;
		padding-left: 0px;
	}

	.wrp-section-donation-step {
		border: 0px;
	}

	.choose-payment-link .brand-logo-payment {
		width: 80px;
		padding-left: 8px;
		padding-right: 12px;
	}

	.choose-payment-link span {
		font-family: "Rubik-Regular", sans-serif;
		color: #363636;
		font-size: 15.5px;
		line-height: 20px;
		letter-spacing: 0.10px;
	}

	.chosed-nominal>.form-control:not(:placeholder-shown)~label,
	.form-floating>.form-select~label {
		opacity: .95;
		transform: scale(.90) translateY(-.9rem) translateX(-.20rem);
	}

	.chosed-nominal>.form-control {
		border: 0px;
		border-color: transparent none;
		padding-left: 9px !important;
	}

	.wrp-of-btn {
		flex: 0 0 96%;
		-ms-flex: 0 0 96%;
		max-width: 100%;
	}

	.choose-label-anonimous {
		padding-left: 42px;
	}

	.choose-anonimous {
		color: #71716c;
		font-size: 14px;
	}

	.wrp-choosed-nominal {
		font-size: 14px;
	}

	.section-donation-step {
		width: 100%;
		height: auto;
		padding: 6px 0px 6px 0px;
		min-height: 480px;
		font-family: "Mulish-Regular", sans-serif;
		margin-top: 0px;
	}

	.line-separator-step {
		display: none;
	}

	.wrp-payment-link {
		margin-top: -25px;
		position: relative;
	}

	.choose-payment-link {
		min-height: 80px;
	}

	.outline-link-payment {
		margin-bottom: 3px;
	}

	.link--arrowed {
		padding-left: 40px;
	}

	.link--arrowed .arrow-icon {
		left: -5.5px;
		top: -3px;
	}

	.section-thankyou-page {
		min-height: 400px;
		padding: 0px 0px 32px 0px;
	}

	.other-action {
		position: relative;
		z-index: 4;
		width: 92%;
		padding: 10px 0px 10px 0px;
	}

	.thanks-desc-other h1 {
		font-size: 20px;
		line-height: 26px;
	}

	.brand-logo-payment {
		width: 80px;
		padding-left: 8px;
		padding-right: 12px;
	}

	#payment label .center-logo-payment {
		width: 80px;
		padding-left: 8px;
		padding-right: 12px;
	}

	.title-updates-story h1 {
		color: #363636;
		font-size: 21.5px;
		line-height: 25px;
	}

	.title-updates-story span {
		font-size: 13px;
		font-family: "Rubik-Regular", sans-serif;
		line-height: 17px;
	}

	.section-grey-news {
		padding: 10px 0px 24px 0px;
		margin-top: 0px;
	}

	.contet-card-campaign-text h3 {
		font-size: 17px;
		line-height: 21.5px;
		font-family: 'Rubik-Medium', sans-serif;
		margin-bottom: 15px;
	}

	.wrp-liner-time {
		position: relative;
		width: 100%;
		height: auto;
		padding-left: 12px;
		padding-right: 6px;
		margin-left: 4px;
	}

	.wrp-liner-time::after {
		left: -8px;
		bottom: -2px;
		background: #ddd;
		width: 14px;
		height: 14px;
	}

	.card-campaign-updates-pointer::before {
		left: -24px;
		top: 56px;
		width: 18px;
		height: 18px;
	}

	.card-campaign-updates-pointer::after {
		left: -20px;
		top: 60px;
		background: #e32028;
		width: 10px;
		height: 10px;
	}

	.card-campaign-updates-content .contet-card-campaign-text p {
		font-family: "Mulish-Regular", sans-serif;
		font-size: 16px;
		line-height: 24px;
	}

	.contet-card-campaign-text {
		font-family: "Mulish-Regular", sans-serif;
		font-size: 16px;
		line-height: 24px;
	}

	.card-opinion {
		width: 300px;
		margin: 20px 6px 15px 6px;
	}

	.head-card-opinion {
		position: relative;
		padding: 12px 0px 2px 64px;
		font-size: 12px;
	}

	.img-card-campaign-unbar {
		width: 100%;
		height: auto;
		min-height: 150px;
	}

	.desc-card-campaign-unbar a h2 {
		font-size: 21.5px;
		line-height: 30px;
		margin-bottom: 14px;
	}

	.desc-card-campaign-bar a h2 {
		font-size: 20.5px;
		line-height: 26px;
		margin-bottom: 5px;
	}

	.section-donation-step {
		padding: 0px 0px 6px 0px;
	}

	.header-step-process {
		height: auto;
		width: 100%;
		padding: 2px 0px 8px 1px;
	}

	.birthday-form-action {
		padding: 15px 10px 5px 10px;
	}

	.floating-select-month {
		background-position: right .70rem center;
	}

	.form-floating>label {
		font-size: 14px;
		top: 1.5px;
	}

	.floating-label-month label {
		color: #71716c;
		font-size: 14px;
	}

	.img-birthday-saved {
		padding: 24px 76px 15px 76px;
	}

	.check-agreement-call .check p {
		font-family: 'Mulish-Regular', sans-serif;
		font-size: 13.8px;
		line-height: 27px;
		letter-spacing: 0.4px;
		color: #71716c;
	}

	.check-agreement-call .check {
		padding-right: 0px;
	}

	.check-agreement-call .check p {
		font-family: 'Mulish-Regular', sans-serif;
		font-size: 13.8px;
		line-height: 20px;
		position: relative;
		margin-top: -15px;
	}

	.check-agreement-call .checkmark {
		position: absolute;
		top: 6px;
	}

	.home-mobile-campaign-title h1 {
		position: relative;
		margin-top: -6px;
	}

	a.btn-block-form-donation {
		padding: 15px 15px;
	}

	.title-support-campaign-yappika {
		padding-left: 4px;
		padding-right: 4px;
	}

	.title-support-campaign-yappika h1 {
		margin-top: 1.5px;
		position: relative;
		font-size: 24px;
		line-height: 29.5px;
	}

	.spacing-content-petisi::before {
		top: -21px;
		left: -23px;
	}

	.title-support-campaign-yappika h1 {
		display: none;
	}

	.wrap-support-title h1 {
		display: block;
	}

	#withsupport {
		margin-top: 186px;
	}

	.modal-header-petisi .close {
		right: 15.5px;
	}

	.small-btn-action {
		padding: 17px 7.5px;
		font-size: 14.5px;
	}

	a.small-btn-action img {
		margin-right: 4.5px;
		position: relative;
		margin-top: -3.2px;
	}

	.check {
		padding-right: 0px;
	}

	.wrp-search-bar {
		margin-top: 82px;
	}

	.card-campaign-unbar {
		width: 100%;
		min-height: 280px;
	}

	.section-white-desc {
		position: relative;
		padding-top: 6.5px;
	}

	.section-white-desc::before {
		/* height: 10px;
		top: -31.5px; */
		height: 38px;
		top: -35px;
	}

	.home-mobile-campaign-title {
		padding-top: 2px;
	}

	.wrap-campaign-title {
		position: relative;
		margin-top: -20px;
		z-index: 4;
	}

	.see-for-campaign-detail a.btn-load-campaign-detailed {
		font-size: 13px;
		padding: 14px 36px;
	}

	.section-list-primary::before {
		height: 96px;
	}

	.bottom-socmed {
		float: left;
		position: relative;
		margin-top: 5px;
	}

	.since p {
		margin-top: 10px;
		margin-bottom: 5px;
	}

	.instruction-va ol {
		padding-left: 20px;
	}

	.limited-desc {
		max-height: 186px;
	}

	/* BARU SECTION FLOATING BUTTON 480 */
	.container-floating-act {
		margin: 0 auto;
		float: none;
		min-width: 100%;
		max-width: 100%;
	}

	.right-floating-btn-donate {
		width: 64%;
		height: auto;
	}

	.left-acttion-btn-share {
		width: 36%;
		height: auto;
	}

	.wrp-list-share-item {
		width: 100%;
		max-width: 100%;
		padding: 10px 5px 20px 5px;
	}

	.col-item-share a {
		max-width: 80px;
	}

	.text-icon-socmed-share {
		font-family: "Mulish-Regular", sans-serif;
		font-size: 11.5px;
		line-height: 20px;
	}

	.top-dialog-header {
		padding: 5px 0px 5px 5px;
	}

	.row-column-copy-link {
		padding: 32px 5px 64px 5px;
	}

	.top-dialog-header h4 {
		margin-top: 10px;
		margin-bottom: 20px;
	}

	.left-acttion-btn-share a {
		padding: 9px 10px;
	}

	.top-dialog-header .close {
		right: 4.5px;
	}

	/* BARU SECTION FLOATING BUTTON 480 END */
	
	/* BUAT BUTTON SHARE MOBILE 480 */
	a.btn-block-form-donation {
		padding: 15px 12.5px;
		font-size: .87rem;
		letter-spacing: 0.15px;
	}

	.btn-share-action {
		font-size: .87rem;
		letter-spacing: 0.15px;
	}

	.wrp-of-btn-floating {
		width: 100%;
		padding-left: 11px;
	}

	/* BUAT BUTTON SHARE MOBILE 480 END */

/* OPTION RADIO MONTLHY ONE TIME 480 */
.option-monthly-annual {
	margin-top: 24px;
	margin: 0 auto;
	/* min-width: 432px;
	max-width: 432px; */
	width: 100%;
	min-height: 82px;
	border: 1px solid var(--grey-two);
	border-radius: 6.4px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	-ms-align-items: center;
	-moz-align-items: center;
	-webkit-align-items: center;
	padding: 0px 0px;
}
.option-monthly-annual-mobile {
	margin-top: 24px;
	margin: 0 auto;
	/* min-width: 432px;
	max-width: 432px; */
	width: 100%;
	min-height: 82px;
	border: 1px solid var(--grey-two);
	border-radius: 6.4px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	-ms-align-items: center;
	-moz-align-items: center;
	-webkit-align-items: center;
	padding: 0px 0px;
	margin-bottom: 8px;
}

.option-monthly-annual-mobile input[type="radio"]:checked + label {
	background: #ededed !important;
	border: 1px solid #5a79bc !important;
	color: #fff;
	font-family: "Mulish-Bold", sans-serif !important;
  }

.form-group-calculator {
	width: 50%;
	position: relative;
}

.card-income {
	width: 100%;
	height: auto;
	min-height: 164px;
	padding: 20px 40px 20px 40px;
	margin-top: 16px;
	margin-bottom: 16px;
	background: #fff;
	border: 1px solid #e9eefb !important;
	border-radius: 6.4px;
	box-shadow: 0 10px 29px 0 rgba(0, 0, 0, 0.033);
	-ms-box-shadow: 0 12px 32px 0 rgba(0, 0, 0, 0.033);
	-moz-box-shadow: 0 12px 32px 0 rgba(0, 0, 0, 0.033);
	-webkit-box-shadow: 0 12px 32px 0 rgba(0, 0, 0, 0.033);
	z-index: 2;
	position: relative;
	margin: 48px 0px 20px 0px;
	min-height: 564px;
}

.form-group-statics {
	position: relative;
	padding-top: 17px;
}

.form-group-statics label {
	font: normal 600 16.24px/30.64px var(--font-jakarta-sans);
	color: var(--black-100);
	margin-bottom: 8px;
}

.form-group-statics .currency-label {
	left: 10px;
	top: 66px;
}

.form-group-statics .currency-label::before {
	display: none;
}

.form-group-statics .input-fit {
	padding-left: 60px;
	margin-bottom: 8px;
}

.caption-state-label {
	width: 100%;
	height: auto;
	position: relative;
	margin-top: -36px;
	min-height: 134px;
}

.title-state-label {
	width: 100%;
	height: auto;
	position: relative;
	margin-bottom: 24px;
	font: normal 400 15.24px/26.64px;
	color: #363636;
	letter-spacing: 0.35px;
}

.title-state-label h3 {
	font: normal 700 18.24px/27.64px;
	padding-right: 10px;
	color: var(--black-100);
	margin-bottom: 18px;
	width: auto;
	display: unset;
	background: #fff;
	padding: 8px 10px;
	margin-left: -10px;
	letter-spacing: 0.35px;
}

.content-state-label {
	font: normal 400 15.24px/26.64px;
	color: #363636;
	letter-spacing: 0.35px;
}

.content-state-label p {
	margin-bottom: 12px;
}


.option-monthly-annual input[type="radio"] {
	opacity: 0;
	position: fixed;
	width: 0;
	font-weight: 500;
	position: absolute;
}

.option-monthly-annual label {
	display: inline-block;
	background-color: #fff;
	padding: 16px 5px;
	font: normal 400 12.24px/26.64px;
	border: 1px solid #fff;
	border-radius: 4px;
	width: 100%;
	color: transparent!important;
	text-align: center;
	margin-top: 6px;
	cursor: pointer;
	margin-bottom: 6px;
	text-transform: uppercase;
	position: relative;
	margin-left: 1px;
	margin-right: 1px;
}

.option-monthly-annual input[type="radio"]:checked+label {
	background: #fff!important;
	border: 1px solid #5a79bc!important;
	color: #fff!important;
	font: normal 400 13.24px/26.64px;
}

.option-monthly-annual input[type="radio"]:checked+label::before {
	content: " ";
	background: transparent url(../images/checklist-circle.svg) top center no-repeat;
	width: 30px;
	height: 30px;
	position: absolute;
	right: unset;
	top: 14.24px;
    left: 20%;
	border-top-right-radius: 3.4px;
	border-top-left-radius: 0px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 3.4px;
	background-size: 91%!important;
}


.option-monthly-annual-mobile input[type="radio"]:checked+label::before {
	content: " ";
	background: transparent url(../images/checklist-circle.svg) top center no-repeat;
	width: 30px;
	height: 30px;
	position: absolute;
	right: unset;
	top: 18.24px;
    left: 11px;
	border-top-right-radius: 3.4px;
	border-top-left-radius: 0px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 3.4px;
	background-size: 64%!important;
}

.option-monthly-annual-mobile .form-group-calculator:last-child input[type="radio"]:checked + label:hover::before {
	background: transparent url(../images/checklist-circle.svg) top center no-repeat !important;
	background-size: 64%!important;
	top: 18.24px;
	left: 11px;
	background-size: 64%!important;
  }
.option-monthly-annual-mobile .form-group-calculator:first-child input[type="radio"]:checked + label:hover::before {
	background: transparent url(../images/checklist-circle.svg) top center no-repeat !important;
	background-size: 64%!important;
	top: 18.24px;
	left: 11px;
	background-size: 64%!important;
}
.donation-form-action .m-recuring .option-monthly-annual-mobile label {
	/* color: yellow; */
	color: transparent;
}

.donation-form-action .m-recuring .option-monthly-annual-mobile input[type="radio"]:checked + label {
	/* color: yellow; */
	color: transparent;
}

.option-monthly-annual input[type="radio"]+label:hover {
	background: #f9f9f9;
	color: #f9f9f9;
}

.option-monthly-annual input[type="radio"]:checked+label:hover {
	background: #f9f9f9;
	border: 1px solid #f9f9f9;
	color: #fff;
}

.option-monthly-annual .form-group-calculator:first-child input[type="radio"]:checked+label::before {
	/* left: 20%; */
	left: 4.8%;
}

.option-monthly-annual .form-group-calculator:first-child input[type="radio"]+label:hover {
	background: #f9f9f9;
	color: #f9f9f9;
}

.option-monthly-annual .form-group-calculator:first-child input[type="radio"]+label:hover::before {
	content: " ";
	background: #f9f9f9 url(../images/checklist-circle-grey.svg) top center no-repeat;
	color: #f9f9f9;
	width: 30px;
	height: 30px;
	position: absolute;
	right: unset;
	top: 10.24px;
	/* left: 20%; */
	left: 4.8%;
	border-top-right-radius: 3.4px;
	border-top-left-radius: 0px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 3.4px;
	background-size: 64%!important;
}

.option-monthly-annual .form-group-calculator:first-child label::after {
	content: "Perbulan";
	content: var(--var-mounthly);
	text-transform: uppercase;
	position: absolute;
	/* left: 39%; */
	left: 24%;
	top: 12px;
	z-index: 3;
	color: #363636;
	font-size: 11.64px;
	font-family: "Mulish-ExtraBold", sans-serif;
}

.option-monthly-annual .form-group-calculator:first-child label::after {
	content: "Perbulan";
	content: var(--var-mounthly);
	text-transform: uppercase;
	position: absolute;
	/* left: 39%; */
	left: 24%;
	top: 12px;
	z-index: 3;
	color: #363636;
	font-size: 11.64px;
	font-family: "Mulish-ExtraBold", sans-serif;
}


.option-monthly-annual-mobile .form-group.form-group-calculator input[type="radio"] {
	opacity: 0;
	position: fixed;
	width: 0;
	font-weight: 500;
	position: absolute;
  }

.option-monthly-annual-mobile .form-group-calculator:first-child label::after {
	content: "Perbulan";
	content: var(--var-mounthly-mobile);
	text-transform: uppercase;
	position: absolute;
	/* left: 39%; */
	left: 48px;
    top: 18px;
	z-index: 3;
	color: #363636;
	font-size: 10px;
	font-family: "Mulish-ExtraBold", sans-serif;
}

.option-monthly-annual .form-group-calculator:first-child input[type="radio"]:checked+label::after {
	color: #363636!important;
}

.option-monthly-annual .form-group-calculator:first-child input[type="radio"]:checked+label:hover::before {
	background: transparent url(../images/checklist-circle.svg) top center no-repeat !important;
	left: 4.8%;
	background-size: 91%;
}

.option-monthly-annual .form-group-calculator:last-child input[type="radio"]:checked+label::before {
	left: 4.8%;
	color: var(--blue-two) !important;
	font-size: 11.64px;
}

.option-monthly-annual .form-group-calculator:last-child label::after {
	content: "Pertahun";
	content: var(--var-yearly);
	font-family: "Mulish-ExtraBold", sans-serif;
	color: #363636;
	text-transform: uppercase;
	position: absolute;
	left: 26.64%;
	top: 12px;
	z-index: 3;
	color: #363636;
	font-size: 11.64px;
}
.option-monthly-annual-mobile .form-group-calculator:first-child label{
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
}

.option-monthly-annual-mobile .form-group-calculator:last-child label{
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
}

.option-monthly-annual-mobile .form-group-calculator:last-child label::after {
	content: "Satu kali";
	content: var(--var-yearly-mobile);
	font-family: "Mulish-ExtraBold", sans-serif;
	color: #363636;
	text-transform: uppercase;
	position: absolute;
	left: 48px;
    top: 18px;
	z-index: 3;
	color: #363636;
	font-size: 10px;
}

.option-monthly-annual-mobile .form-group-calculator:first-child input[type="radio"] + label:hover::before {
	content: " ";
	background: transparent url(../images/checklist-circle-grey.svg) top center no-repeat;
	color: #f9f9f9;
	width: 30px;
	height: 30px;
	position: absolute;
	right: unset;
	top: 17.24px;
	left: 11px;
	border-top-right-radius: 3.4px;
	border-top-left-radius: 0px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 3.4px;
	background-size: 64%!important;
}

.option-monthly-annual-mobile .form-group-calculator:last-child input[type="radio"] + label:hover::before {
	content: " ";
	background: transparent url(../images/checklist-circle-grey.svg) top center no-repeat;
	color: #f9f9f9;
	width: 30px;
	height: 30px;
	position: absolute;
	right: unset;
	top: 17.24px;
	left: 11px;
	border-top-right-radius: 3.4px;
	border-top-left-radius: 0px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 3.4px;
	background-size: 64%!important;
  }


.option-monthly-annual .form-group-calculator:last-child input[type="radio"]:checked+label::after {
	color: #363636!important;
}

.option-monthly-annual .form-group-calculator:last-child input[type="radio"]:checked+label:hover::before {
	background: transparent url(../images/checklist-circle.svg) top center no-repeat!important;
	/* left: 20%; */
	left: 4.8%;
	background-size: 91%!important;
}

.option-monthly-annual .form-group-calculator:last-child input[type="radio"]+label:hover {
	background: #f9f9f9;
	color: #f9f9f9;
}

.option-monthly-annual .form-group-calculator:last-child input[type="radio"]+label:hover::before {
	content: " ";
	background: #f9f9f9 url(../images/checklist-circle-grey.svg) top center no-repeat;
	color: #f9f9f9;
	width: 30px;
	height: 30px;
	position: absolute;
	right: unset;
	top: 10.24px;
	/* left: 20%; */
	left: 4.8%;
	border-top-right-radius: 3.4px;
	border-top-left-radius: 0px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 3.4px;
	background-size: 91%!important;
}

/* OPTION RADIO MONTLHY ONE TIME 480 END */


}

/* MEDIA QUERY 480 END */

/* MEDIA QUERY 320 START */

@media screen and (max-width : 320px) {

	.ui-widget {
		font-size: 0.25em;
	}

	.footer {
		margin-bottom: 62px;
	}

	.wrp-footer-bottom {
		font-size: 13px;
		line-height: 18px;
	}

	.section-list-primary {
		/* min-height: 271px; */
		/* min-height: 243px; */
		min-height: 223.5px;
		background-size: 150% !important;
		overflow-x: hidden;
	}

	.col-zd-62 {
		padding-left: 18px;
		padding-right: 18px;
	}

	.col-zd-38 {
		padding-left: 18px;
		padding-right: 18px;
	}

	.m-floting-donation {
		height: 64px;
		padding: 6px 10px;
	}

	.wrp-footer-top {
		padding-left: 6px;
		padding-right: 6px;
	}

	.wrp-footer-middle {
		padding-left: 6px;
		padding-right: 6px;
	}

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

	.raised h3 {
		max-width: 100%;
		flex: 0 0 100%;
		-ms-flex: 0 0 100%;
		font-size: 18px;
	}

	.raised span {
		font-size: 12.5px;
		line-height: 13px;
		max-width: 100%;
		flex: 0 0 100%;
		-ms-flex: 0 0 100%;
		margin-bottom: 10px;
	}

	.head-card-donatur {
		width: 100%;
		height: auto;
		overflow: hidden;
		padding: 8px 5px;
	}

	.quote-or-pray {
		width: 100%;
		height: auto;
		padding: 20px 12px;
	}

	.left-head-donation {
		position: relative;
		padding: 12px 0px 2px 62px;
	}

	.circle-donatur {
		width: 42px;
		height: 42px;
		border-radius: 21.5px;
		background: #f9c6ca;
		left: 3px;
	}

	.left-head-donation h5 {
		font-size: 15px;
		line-height: 19px;
		margin-bottom: 3px;
	}

	.left-head-donation p {
		font-size: 14px;
		line-height: 17px;
	}

	.label-pray h6 {
		font-size: 16px;
		line-height: 19px;
		letter-spacing: 0.35px;
		color: #393939;
		margin-bottom: 2px;
	}

	.quote-or-pray {
		font-size: 16px;
		line-height: 22.5px;
	}

	.date-donation {
		text-align: left;
	}

	.date-donation p {
		font-size: 13.5px;
		line-height: 17px;
	}

	.left-head-donation p span {
		font-size: 14px;
		line-height: 17px;
	}

	.modal-header-donation h2 {
		font-size: 14px;
		line-height: 18.5px;
	}

	#payment input[type="radio"]:checked+label {
		background-size: 20px;
		background-position-x: 8px;
		background-position-y: 20px;
	}

	.col-ss-12 {
		flex: 0 0 100% !important;
		-ms-flex: 0 0 100% !important;
		width: 100% !important;
		max-width: 100% !important;
		padding-right: 0px;
	}

	.quote-or-pray p {
		padding-right: 0px;
		margin-bottom: 12px;
	}

	.d-lang {
		/* margin-right: 40px; */
		margin-right: -8px;
	}

	.right-setting-mobile {
		-ms-flex: 0 0 63.2%;
		flex: 0 0 63.2%;
		max-width: 63.2%;
		padding-right: 0px;
	}

	#mobileDonatetab li a {
		font-family: "Mulish-SemiBold", sans-serif;
		color: #393939;
		font-size: 13px;
		text-align: center;
		padding: 16px 6px;
	}

	.title-section-campaign h3 {
		color: #393939;
		font-size: 15px;
	}

	.name-and-value h5 {
		font-size: 15px;
		line-height: 19px;
		margin-bottom: 0px;
	}

	.name-and-value p {
		margin-bottom: 4px;
		margin-top: 4px;
		font-size: 15px;
	}

	.white-box-shadow {
		height: 66px;
		bottom: -1px;
	}

	.left-head-donation p {
		font-size: 12.5px;
		margin-bottom: 5px;
	}

	.left-time-donate p {
		font-size: 12.5px;
	}

	.limited-desc {
		margin-bottom: 50.5px;
	}

	.primary-image-campaign {
		left: -86px;
	}

	.according-menu ul li a {
		font-size: 15px;
	}

	.contet-card-campaign-text {
		padding: 24px 18px 20px 18px;
	}

	.contet-card-campaign-text h2 {
		font-size: 16px;
		line-height: 20.5px;
		font-family: 'Rubik-Medium', sans-serif;
		margin-bottom: 15px;
	}

	.admin-name h5 {
		font-family: "Rubik-Medium", sans-serif;
		font-size: 13px;
		line-height: 16px;
	}

	.admin-name {
		padding-left: 12px;
		flex: 0 0 80%;
		-ms-flex: 0 0 80%;
		max-width: 80%;
		font-family: "Mulish-Regular", sans-serif;
		font-size: 11px;
		line-height: 13px;
		letter-spacing: 0.2px;
		color: #71716c;
	}

	.choose-payment-link .brand-logo-payment {
		width: 74px;
		padding-left: 8px;
		padding-right: 10px;
	}

	.choose-payment-link span {
		font-family: "Rubik-Regular", sans-serif;
		color: #363636;
		font-size: 14.5px;
		line-height: 20px;
		letter-spacing: 0.10px;
	}

	.wrp-section-donation-step {
		overflow: hidden;
		padding: 0px 0px 48px 0px;
	}

	.admin-writer {
		flex: 0 0 40px;
		-ms-flex: 0 0 40px;
		max-width: 40px;
		width: 40px;
		height: 40px;
		border-radius: 27.5px;
	}

	.choose-payment-link-bank .brand-logo-payment {
		padding-left: 10px;
		padding-right: 10px;
		max-width: 32.333%;
		flex: 0 0 32.333%;
		-ms-flex: 0 0 32.333%;
	}

	.choose-payment-link-bank .brand-logo-payment img {
		width: 100% auto !important;
		max-width: 100% !important;
	}

	#payment label .center-logo-payment {
		width: 74px;
	}

	#payment label {
		font-size: 14.3px;
		letter-spacing: 0px;
	}

	.contet-card-campaign-text h3 {
		font-size: 16px;
		line-height: 20.5px;
		font-family: 'Rubik-Medium', sans-serif;
		margin-bottom: 15px;
	}

	.floating-select-month {
		background-position: right .64rem center;
	}

	.img-birthday-saved {
		padding: 24px 76px 15px 76px;
	}

	.width-maximum-form {
		width: 100%;
		height: auto;
		padding-left: 10px;
		padding-right: 10px;
	}

	.check-agreement-call .check p {
		font-family: 'Mulish-Regular', sans-serif;
		font-size: 13.8px;
		line-height: 20px;
		position: relative;
		margin-top: -15px;
	}

	.home-mobile-campaign-title {
		padding: 0px 0px 10px 0px;
	}

	.home-mobile-campaign-title h1 {
		/* margin-top: -9px;
		position: relative; */
		z-index: 4;
		font-size: 21px;
		line-height: 27.5px;
	}

	.body-card-opinion {
		padding: 10px 0px 2px 0px;
	}

	.check-agreement-call .checkmark {
		position: absolute;
		top: 6px;
	}

	.desc-card-campaign-unbar {
		padding: 25px 20px 30px 20px;
	}

	.desc-card-campaign-unbar a h2 {
		font-size: 20px;
		line-height: 27px;
	}

	.img-card-campaign-unbar {
		height: auto;
		min-height: 146px;
	}

	.desc-message-succes {
		padding: 10px 20px;
		font-family: "Mulish-Regular", sans-serif;
		color: #71716c;
	}

	.col-nav-left .logo-brand {
		width: 146px;
	}

	.col-nav-left .logo-brand a img {
		left: 8px;
		top: 10px;
	}

	.img-card-campaign-bar {
		min-height: 164px;
		background: #f9f9f8;
	}

	.wrap-support-title h1 {
		font-family: 'Rubik-SemiBold', sans-serif;
		color: #363636;
		font-size: 19px;
		line-height: 28.5px;
		margin-bottom: 15px;
	}

	.col-sp-62 {
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
		padding-left: 15px;
		padding-right: 15px;
	}

	.col-sp-38 {
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
		padding-left: 15px;
		padding-right: 15px;
		position: relative;
	}

	#withsupport {
		margin-top: 165px;
	}

	.modal-header-petisi .close {
		right: 13px;
	}

	.spacing-content-petisi::before {
		top: -35px;
		left: -23px;
	}

	.m-overflow-hidden {
		position: relative;
		z-index: 4;
		margin-top: -18px;
	}
	
	/* BUAT BUTTON SHARE MOBILE 320 */
	a.btn-block-form-donation {
		padding: 15px 12.5px;
		font-size: .87rem;
		letter-spacing: 0.15px;
	}

	.btn-share-action {
		font-size: .87rem;
		letter-spacing: 0.15px;
	}

	.wrp-of-btn-floating {
		width: 100%;
		padding-left: 11px;
	}

	/* BUAT BUTTON SHARE MOBILE 320 END */

/* OPTION RADIO MONTLHY ONE TIME 320 START */

.option-monthly-annual-mobile .form-group-calculator:first-child label::after {
	text-align: left;
	font-size: 9.64px;
	left: 40px;
}

.option-monthly-annual-mobile .form-group-calculator:last-child label::after {
	text-align: left;
	font-size: 9.64px;
	left: 43px;
}

.option-monthly-annual-mobile input[type="radio"]:checked + label::before {
	top: 18.24px;
    left: 7.5px;
}

/* OPTION RADIO MONTLHY ONE TIME 320 END */

}

/* MEDIA QUERY 320 END */