@font-face {
	font-family: SFProText-Light;
	src: url('https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-thin-webfont.woff') format('woff');
}
@font-face {
	font-family: SFProText-Regular;
	src: url('https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-thin-webfont.woff') format('woff');
}
a {
    color: #8A2785;
}
a2 {
    color: #fff;
}
.daftar{
	color: #8A2785;
}
.colored {
    color: #8c2887
}
.post-title a:hover {
    color: #8c2887
}
.black-wrapper a:hover {
    color: #8c2887
}
.color-wrapper {
    background: #8c2887
}
ul.circled li:before {
    color: #8c2887;
}
blockquote small {
    color: #8c2887
}
.nav > li > a:hover,
.nav > li.current > a {
    color: #fff;
}
.img-dana {
	margin: 7% 25% 3%;
}
.selamat h2 {
	font-size: 28px;
	color: #8A2785;
	text-align: center;
	letter-spacing: 1.5px;
	line-height: 2;
}
.selamat p {
	font-size: 18px;
	color: #333333;
	letter-spacing: 0.5px;
}
.slamet {
	width: 100%;
	height: 51px!important;
	margin-top: 25px;
	margin-bottom: 25px!important;
	border-radius: 7px!important;
	border: solid 1px #979797;
	background-color: #ffffff;
}
.cbk {
	width: 17px;
	height: 17px;
}
.btn-barcode {
	background-color: #ffffff;
	border-color: #8A2785;
	color: #ccc;
	border-radius: 25px;
	padding: 3px 25px;
	height: 51px;
	margin-bottom: 17%;
	width: 25%;
}
.btn-barcode:hover {
	background-color: #8A2785;
}
.btn-selamat {
	background-color: #ccc;
	border-color: #ffffff;
	border-radius: 5px;
	padding: 3px 25px;
	height: 51px;
	margin-bottom: 17%;
	width: 100%;
}
.btn-selamat:enabled {
	background-color: #F59D15;
	color: #ffffff;
	border-color: #ffffff;
	border-radius: 5px;
	padding: 3px 25px;
	height: 51px;
	margin-bottom: 17%;
	width: 100%;
}
.judul {
	margin: 5% 0;
}
.judul h2 {
	font-size: 31px;
	color: #8A2785;
	font-weight: 600;
	margin-bottom: 25px;
}
.table-poinpro {
	width: 100%;
    margin: 30px 0 10px;
}
.table-poinpro th {
	font-family: SFProText-Regular;
    font-size: 14px;
    background-color: #8A2785;
    color: #fff;
    padding: 10px 0;
	width: 50%;
	text-align: center;
}
.table-poinpro td {
	font-family: SFProText-Regular;
	font-size: 13px;
	color: #4a4a4a;
	border: solid 1px #cccccc;
	padding: 9px 0;
	text-align: center;
}
.text-poin h3 {
	font-family: SFProText-Light;
	font-size: 17px;
	font-weight: 600;
	line-height: 20px;
	color: #333333;
}
.text-poin p {
	font-family: SFProText-Regular;
	font-size: 14px;
	line-height: 20px;
	color: #333333;
}
.text-poin h5 {
	font-family: SFProText-Regular;
	font-size: 14px;
	color: #4a4a4a;
	float: right;
}
.no {
	margin-right: 7px;
}
.ket-poin {
	margin: 25px 0;
}
.ket-poin h3 {
	font-family: SFProText-Regular;
	font-size: 15px;
	font-weight: 600;
    color: #333333;
}
.ket-poin p {
	font-family: SFProText-Regular;
    font-size: 14px;
    color: #333333;
}
.ket-poin > p > span {
	display: table-cell;
}

.menu {
	margin: 4% 0;
}
.syarat {
	margin-right: 20px;
}
.isi {
	margin: 25px 0;
}
.isi > p > span {
	display: table-cell;
}
.isi p {
	font-size: 18px;
	color: #333333;
	letter-spacing: normal;
	line-height: 1.5;
}

.head-faq {
	text-align: center;
	margin: 105px 0 45px;
}
.sub-faq {
	margin: 45px 0 45px 10px;
}
.sub-faq h4 {
	line-height: 2;
}
.text-faq {
	margin: 2%;
}
.text-faq > p >span {
	display: table-cell;
	vertical-align: top;
}
.no {
	margin-right: 11px;
}

@media screen and (min-width: 768px) {
	.modal-dialog {
		width: 437px;
		padding-top: 17%;
		padding-bottom: 30px;
	}
	.modal-title {
		margin: 0;
		text-align: center;
		line-height: 1.428571429;
		font-size: 28px;
	}
	.modal-body {
		position: relative;
		padding: 40px 55px;
	}
	.form-body h5 {
		font-size: 18px;
		color: #333333;
		font-weight: 600;
		line-height: 1.5;
		text-align: center;
		margin-bottom: 25px;
	}
	.form-body b, strong {
		font-size: 19px;
		color: #333333;
		font-weight: bold;
	}
	.close {
		float: right;
		font-size: 38px;
		font-weight: bold;
		line-height: 1;
		color: #000000;
		text-shadow: 0 1px 0 #ffffff;
		opacity: 0.2;
		filter: alpha(opacity=20);
	}
	.modal-content {
		position: relative;
		background-color: #ffffff;
		border: 1px solid #999999;
		border: 1px solid rgba(0, 0, 0, 0.2);
		border-radius: 25px;
		-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
		box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
		background-clip: padding-box;
		outline: none;
	}
	.btn-save {
		background-color: #8A2785;
		color: #ffffff;
		border-radius: 20px;
		font-size: 14px;
		padding: 3px 20px;
		width: 150px;
	}
	.btn-cancel {
		background-color: #f57c00;
		color: #ffffff;
		border-radius: 20px;
		font-size: 14px;
		padding: 3px 20px;
		width: 150px;
	}
}

@media (min-width: 414px) and (max-width: 767px) {
	.modal-dialog {
		width: 389px;
		padding-top: 32%;
		padding-bottom: 30px;
	}
	.modal-title {
		margin: 0;
		text-align: center;
		line-height: 1.428571429;
		font-size: 25px;
	}
	.modal-body {
		position: relative;
		padding: 40px 55px;
	}
	.form-body h5 {
		font-size: 15px;
		color: #333333;
		font-weight: 500;
		line-height: 20px;
		margin-bottom: 25px;
	}
	.form-body b, strong {
		font-size: 17px;
		color: #333333;
		font-weight: bold;
	}
	.slamet {
		width: 100%;
		height: 43px!important;
		font-size: 12px!important;
		border-color: transparent;
		margin-top: 17px;
		margin-bottom: 5px!important;
		border-radius: 7px!important;
		border: solid 1px #979797;
		background-color: #ffffff;
	}
	.alert-info {
		background-color: #d9edf7;
		border-color: #bce8f1;
		color: #3a87ad;
		margin-bottom: 150px;
	}
	.alert-danger {
		background-color: #f2dede;
		border-color: #ebccd1;
		color: #b94a48;
		margin-bottom: 170px;
	}
	.close {
		float: right;
		font-size: 38px;
		font-weight: bold;
		line-height: 1;
		color: #000000;
		text-shadow: 0 1px 0 #ffffff;
		opacity: 0.2;
		filter: alpha(opacity=20);
	}
	.modal-content {
		position: relative;
		background-color: #ffffff;
		border: 1px solid #999999;
		border: 1px solid rgba(0, 0, 0, 0.2);
		border-radius: 25px;
		-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
		box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
		background-clip: padding-box;
		outline: none;
	}
	.btn-save {
		background-color: #8A2785;
		color: #ffffff;
		border-radius: 20px;
		font-size: 12px;
		padding: 3px 17px;
		width: 123px;
	}
	.btn-cancel {
		background-color: #f57c00;
		color: #ffffff;
		border-radius: 20px;
		font-size: 12px;
		padding: 3px 17px;
		width: 123px;
	}
	.cbk {
		width: 15px;
		height: 13px;
	}
	.img-dana {
		margin: 7% 13% 3%;
	}
	.selamat h2 {
		font-size: 26px;
	}
	.selamat p {
		font-size: 12px;
		line-height: 20px;
	}
	.judul h2 {
		font-size: 24px;
		line-height: 1.2;
	}
	.isi p {
		font-size: 15px;
	}
}
@media (min-width: 321px) and (max-width: 413px) {
	.modal-dialog {
		width: 369px;
		padding-top: 33%;
		padding-bottom: 30px;
	}
	.modal-title {
		margin: 0;
		text-align: center;
		line-height: 1.428571429;
		font-size: 28px;
	}
	.modal-body {
		position: relative;
		padding: 40px 55px;
	}
	.form-body h5 {
		font-size: 13px;
		color: #333333;
		font-weight: 500;
		line-height: 20px;
		margin-bottom: 25px;
	}
	.form-body b, strong {
		font-size: 15px;
		color: #333333;
		font-weight: bold;
	}
	.slamet {
		width: 100%;
		height: 41px!important;
		font-size: 12px!important;
		margin-top: 17px;
		border-color: transparent;
		margin-bottom: 5px!important;
		border-radius: 7px!important;
		border: solid 1px #979797;
		background-color: #ffffff;
	}
	.alert-info {
		background-color: #d9edf7;
		border-color: #bce8f1;
		color: #3a87ad;
		margin-bottom: 150px;
	}
	.alert-danger {
		background-color: #f2dede;
		border-color: #ebccd1;
		color: #b94a48;
		margin-bottom: 170px;
	}
	.close {
		float: right;
		font-size: 38px;
		font-weight: bold;
		line-height: 1;
		color: #000000;
		text-shadow: 0 1px 0 #ffffff;
		opacity: 0.2;
		filter: alpha(opacity=20);
	}
	.modal-content {
		position: relative;
		background-color: #ffffff;
		border: 1px solid #999999;
		border: 1px solid rgba(0, 0, 0, 0.2);
		border-radius: 25px;
		-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
		box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
		background-clip: padding-box;
		outline: none;
	}
	.btn-save {
		background-color: #8A2785;
		color: #ffffff;
		border-radius: 20px;
		font-size: 12px;
		padding: 3px 17px;
		width: 113px;
	}
	.btn-cancel {
		background-color: #F59D15;
		color: #ffffff;
		border-radius: 20px;
		font-size: 12px;
		padding: 3px 17px;
		width: 113px;
	}
	.cbk {
		width: 15px;
		height: 13px;
	}
	.img-dana {
		margin: 7% 11% 3%;
	}
	.selamat h2 {
		font-size: 25px;
	}
	.selamat p {
		font-size: 11px;
		line-height: 20px;
	}
	.judul h2 {
		font-size: 21px;
		line-height: 1.2;
	}
	.isi p {
		font-size: 14px;
	}
}
@media (max-width: 320px) {
	.modal-dialog {
		width: 321px;
		padding-top: 35%;
		padding-bottom: 30px;
	}
	.modal-title {
		margin: 0;
		text-align: center;
		line-height: 1.428571429;
		font-size: 27px;
	}
	.modal-body {
		position: relative;
		padding: 40px 55px;
	}
	.form-body h5 {
		font-size: 11px;
		color: #333333;
		font-weight: 500;
		line-height: 20px;
		margin-bottom: 25px;
	}
	.form-body b, strong {
		font-size: 13px;
		color: #333333;
		font-weight: bold;
	}
	.slamet {
		width: 100%;
		height: 39px!important;
		font-size: 12px!important;
		border-color: transparent;
		margin-top: 15px;
		margin-bottom: 5px!important;
		border-radius: 7px!important;
		border: solid 1px #979797;
		background-color: #ffffff;
	}
	.alert-info {
		background-color: #d9edf7;
		border-color: #bce8f1;
		color: #3a87ad;
		margin-bottom: 130px;
	}
	.alert-danger {
		background-color: #f2dede;
		border-color: #ebccd1;
		color: #b94a48;
		margin-bottom: 150px;
	}
	.close {
		float: right;
		font-size: 38px;
		font-weight: bold;
		line-height: 1;
		color: #000000;
		text-shadow: 0 1px 0 #ffffff;
		opacity: 0.2;
		filter: alpha(opacity=20);
	}
	.modal-content {
		position: relative;
		background-color: #ffffff;
		border: 1px solid #999999;
		border: 1px solid rgba(0, 0, 0, 0.2);
		border-radius: 25px;
		-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
		box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
		background-clip: padding-box;
		outline: none;
	}
	.btn-save {
		background-color: #8A2785;
		color: #ffffff;
		border-radius: 20px;
		font-size: 11px;
		padding: 3px 15px;
		width: 93px;
	}
	.btn-cancel {
		background-color: #F59D15;
		color: #ffffff;
		border-radius: 20px;
		font-size: 12px;
		padding: 3px 15px;
		width: 93px;
	}
	.cbk {
		width: 14px;
		height: 12px;
	}
	.img-dana {
		margin: 7% 9% 3%;
	}
	.selamat h2 {
		font-size: 21px;
	}
	.selamat p {
		font-size: 10px;
		line-height: 18px;
	}
	.judul h2 {
		font-size: 18px;
		line-height: 1.2;
	}
	.isi p {
		font-size: 10px;
	}
}
.navbar .dropdown-menu {
    border-top: 2px solid #fff !important;
}
.navbar .nav .open > a,
.navbar .nav .open > a:hover,
.navbar .nav .open > a:focus {
    color: #fff;
}
.navbar .dropdown-menu:not(.yamm-dropdown-menu) > li > a:hover,
.navbar .dropdown-menu:not(.yamm-dropdown-menu) > li > a:focus,
.navbar .dropdown-submenu:hover > a,
.navbar .dropdown-submenu:focus > a,
.navbar .dropdown-menu:not(.yamm-dropdown-menu) > .active > a,
.navbar .dropdown-menu:not(.yamm-dropdown-menu) > .active > a:hover,
.navbar .dropdown-menu:not(.yamm-dropdown-menu) > .active > a:focus {
    color: #fff;
}
.yamm .yamm-content a:hover {
    color: #fff
}
.btn,
.parallax .btn-submit,
.btn-submit {
    background: #fff;
}
.btn:hover,
.btn:focus,
.btn:active,
.btn.active,
.parallax .btn-submit:hover {
    background: #cccccc;
}
.btn-border-dark:hover {
    border: 2px solid #8c2887;
    color: #8c2887 !important;
}
.btn-border-light:hover {
    border: 2px solid #6f0069;
    color: #6f0069 !important;
}
.services .tab:hover .icon i.icn,
.services .tab.active .icon i.icn {
    color: #8c2887
}
.services .tab:hover .pin,
.services .tab.active .pin {
    background-color: #8c2887
}
.services .tab:hover h4,
.services .tab.active h4 {
    color: #8c2887
}
.tabs-top .tab a:hover,
.tabs-top .tab.active a {
    color: #8c2887;
    border-color: #8c2887;
}
#testimonials .author {
    color: #f59d15;
}
.col-testimonials .author {
    color: #8c2887;
}
.panel-title > a:hover {
    color: #8c2887
}
.col-services .icon i.icn {
    color: #8c2887;
}
.col-services-2 .col:hover .icon-border i {
    background-color: #8c2887;
}
.image-caption h3 a:hover {
    color: #8c2887
}
.black-wrapper .image-caption h3 a:hover {
    color: #8c2887
}
.more {
    margin: 0;
    color: #8c2887;
}
.meta a:hover {
    color: #8c2887
}
.pagination ul > li > a:hover,
.pagination ul > li > a:focus,
.pagination ul > .active > a,
.pagination ul > .active > span {
    color: #8c2887;
    border: 2px solid #8c2887;
}
.navigation a:hover {
    color: #8c2887;
    border: 2px solid #8c2887;
}
#comments .info h2 a:hover {
    color: #8c2887
}
#comments a.reply-link:hover {
    color: #8c2887
}
.step h5 {
    color: #8c2887
}
.icon-border i {
    color: #8c2887;
    border: 2px solid #8c2887;
}
.step:hover .icon-border i {
    background-color: #8c2887;
}
.progress-list li em {
    color: #8c2887;
}
.progress.plain .bar {
    background: #8c2887;
}
.sidebox a:hover {
    color: #8c2887
}
.border-list li a:hover {
    color: #8c2887
}
.border-list li:hover:after {
    color: #8c2887
}
.parallax a:hover {
    color: #8c2887
}
.pricing .plan h4 span {
    color: #8c2887
}
.tooltip-inner {
    color: #fff;
    background-color: #8c2887;
    padding: 5px 12px;
}
.tooltip.top .tooltip-arrow,
.tooltip.top-left .tooltip-arrow,
.tooltip.top-right .tooltip-arrow {
    border-top-color: #8c2887
}
.tooltip.right .tooltip-arrow {
    border-right-color: #8c2887
}
.tooltip.left .tooltip-arrow {
    border-left-color: #8c2887
}
.tooltip.bottom .tooltip-arrow,
.tooltip.bottom-left .tooltip-arrow,
.tooltip.bottom-right .tooltip-arrow {
    border-bottom-color: #8c2887
}
@media (max-width: 991px) { 
	.navbar-nav > li > a {
	    color: #fff
	}
}
@media (max-width: 767px) { 
	.services .tab a:hover,
	.services .tab.active a {
	    border-color: #8c2887
	}
	.services .tab:hover h4,
	.services .tab.active h4 {
	    color: #8c2887
	}
}
.icon-overlay a .icn-more {
    background-color: rgba(155, 89, 182, 0.92);
}
.col-centered {
    float: none;
    margin: 0 auto;
}

.carousel-control { 
    width: 8%;
    width: 0px;
}
.carousel-control.left,
.carousel-control.right { 
    margin-right: 40px;
    margin-left: 32px; 
    background-image: none;
    opacity: 1;
}
.carousel-control > a > span {
    color: white;
	  font-size: 29px !important;
}

.carousel-col { 
    position: relative; 
    min-height: 1px; 
    padding: 5px; 
    float: left;
 }

 .active > div { display:none; }
 .active > div:first-child { display:block; }

/*xs*/
@media (max-width: 767px) {
  .carousel-inner .active.left { left: -50%; }
  .carousel-inner .active.right { left: 50%; }
	.carousel-inner .next        { left:  50%; }
	.carousel-inner .prev		     { left: -50%; }
  .carousel-col                { width: 50%; }
	.active > div:first-child + div { display:block; }
}

/*sm*/
@media (min-width: 768px) and (max-width: 991px) {
  .carousel-inner .active.left { left: -50%; }
  .carousel-inner .active.right { left: 50%; }
	.carousel-inner .next        { left:  50%; }
	.carousel-inner .prev		     { left: -50%; }
  .carousel-col                { width: 50%; }
	.active > div:first-child + div { display:block; }
}

/*md*/
@media (min-width: 992px) and (max-width: 1199px) {
  .carousel-inner .active.left { left: -33%; }
  .carousel-inner .active.right { left: 33%; }
	.carousel-inner .next        { left:  33%; }
	.carousel-inner .prev		     { left: -33%; }
  .carousel-col                { width: 33%; }
	.active > div:first-child + div { display:block; }
  .active > div:first-child + div + div { display:block; }
}

/*lg*/
@media (min-width: 1200px) {
  .carousel-inner .active.left { left: -25%; }
  .carousel-inner .active.right{ left:  25%; }
	.carousel-inner .next        { left:  25%; }
	.carousel-inner .prev		     { left: -25%; }
  .carousel-col                { width: 33%; }
	.active > div:first-child + div { display:block; }
  .active > div:first-child + div + div { display:block; }
	.active > div:first-child + div + div + div { display:block; }
}

.block {
	width: 406px;
	height: 230px;
}
.test {
	background-color: #ccc;
}