/* 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;
	/* min-height: 286px; */
	min-height:235px;
	width: 100%;
	padding:10px 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:18px 10px 18px 30px;
	/* 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;	
}

.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: 52px;
	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;
	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;
}

.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;
}


/* FORM FLOATING REGULAR */

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

@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;
    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: 6px;
}

#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;
}

/* RADIO BUTTON */

.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%;
	}	
}


/* 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: 980px;
		background-size: 109% !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: 106.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;
	}

	.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: 27px 36px 0px 36px;
		/* min-height: 350px; */
		min-height: 256px;
	}	

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

	.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: 291.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 */
}
/* DESKTOP MEDIA QUERY 1920 */

@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;
	}	
}

/* 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;
	}

}
/* 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*/

/* 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;
	}	

}
/* IPAD PRO 10.5 POTRAIT */


/* 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%;
	}	

}
@media only screen and (min-width: 1024px) and (orientation: landscape) { 
	.wrp-image-support-campaign {
		width: 100%;
		height: 87.5%;
	}	

}

/* 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%; 
  }

	.section-list-primary {
		min-height: 565px;
	}

  a.btn-block-form-donation {
	  border-radius: 13px;
  }

	.limited-desc {
		min-height: 136px;
		max-height: 136px;
	}  

	.section-grey-opinion {
		overflow-x: hidden;
	}

	.img-card-campaign-unbar {
		min-height: 156px;
	}	

	.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 (width: 768px) and (height: 1024px) and (orientation:portrait) {

	.section-list-primary {
		min-height: 470px;
	}

	.limited-desc {
		min-height: 136px;
		max-height: 136px;
	}

	.limited-desc-petisi {
		min-height: 136px;
	}	


}
/* 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;
	-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;
	}	

}
/* 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%;
		width: auto;
		position: absolute;
		top: -1.5px;
		margin-left: auto;
		margin-right: auto;
		left: -94px;
		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;
	}	

}

/* 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;
	}

	.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;
	}		

}

/* MEDIA QUERY 320 END */