/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Hanlding Updates
-----------------------------------------------------------------*/

/* CUSTOM SCROLLBAR*/

div#ascrail2000 {
    z-index: 999 !important;
}

#primary-menu > ul > li > a:hover
{
    color: #f6891f !important;
}

.active
{
    color: #f6891f !important;
}
.divider
{
    z-index: 2;
    top: 15px;
    margin: 0;
}

.divider-2{
	top:-10px;
}
.divider:after,
.divider.divider-center:before,
.divider.divider-center.divider-short:before
{
    border-top: 1px solid rgba(255, 158, 0, .30);
}
.color
{
    color: #f6891f !important;
}
.process-steps li.active h5
{
    color: #f6891f  !important;
}

.process-steps li.ui-tabs-active h5{
	 color: sienna  !important;
}
.section
{
    background-color: white;
}
.section .col_one_third
{
    margin-bottom: 0;
}
.section .col_one_third > p
{
    margin-bottom: 0;
}
.about .col_half
{
    margin-bottom: 0;
}
span.number
{
    font-size: 80px;

    color: white !important;
}
.icon-chevron-down
{
    color: #ff9d00;
}
p
{
    text-align: justify;
}
.slider-caption p
{
    text-align: center;
}
.phone-text p
{
    text-align: center;
}
/* Feature Container Set Width */

.ft-container
{
    margin-right: auto;
    margin-left: auto;
    padding: 30px 0;
}
.ft-item .ft-desc
{
    font-size: 14px;
    font-weight: 700;

    padding-top: 20px;

    text-transform: capitalize;

    color: #333;
}
.ft-container .ft-item
{
    margin-bottom: 30px;
}
@media (min-width: 768px)
{
    .ft-container
    {
        width: 750px;
    }
}
@media (min-width: 992px)
{
    .ft-container
    {
        width: 970px;
    }
    .ft-item .ft-desc
    {
        font-size: 15px;
    }
}
@media (min-width: 1200px)
{
    .ft-container
    {
        width: 1170px;
    }
}
.ft-image
{
    display: block;

    width: 100px;
    height: auto;
    margin: 0 auto;
}
.feature-ximpay
{
    padding: 50px 0;
}
@media (max-width: 414px)
{
    .ft-container
    {
        padding: 0;
    }
}

/* iPhone Top Section */

.header-wrap .col-sm-7
{
    z-index: 2;
}
.iphone-wrap
{
    position: absolute;
    top: 50%;
    right: 0;

    transform: translateY(-50%);
}
@media (max-width: 767px)
{
    .iphone-wrap
    {
        z-index: 0;
        right: -15%;

        opacity: .2;
    }
    .iphone-img img
    {
        height: 400px;
    }
}
/* Telco List */

.telco-wrap img
{
    display: block;

    max-width: 160px;
    margin: 0 auto;
}
.telco-wrap .col-md-2 img
{
    transition: all .5s ease;
    opacity: .6;
	border: 1px solid black;
    border-radius: 100px;
    padding: 25px 5px;
    margin-bottom: 25px;
    margin-top: 25px;
}
@media (max-width: 1199px){
	.telco-wrap .col-md-2 img{
        padding: 20px 5px;
    max-width: 130px;
}
}
.telco-wrap .col-md-2 img:hover
{
    opacity: 1;
}

.telco-stat{
	text-align:center;
	display:block;
	background-color: white;
	color:#F0871F;
	border:1px solid #F0871F;
	margin-bottom:30px;
	border-radius:50px;
}

.telco-wrap .col-md-2 .telco-stat{
	transition: all .5s ease;
}

.telco-wrap .col-md-2 .telco-stat:hover{
	background-color: #F0871F;
	color:white;
}


/* Contact Us */

.promo.promo-dark > .container > h3 span
{
    background-color: rgba(250, 137, 9, .65);
}
/* How to Step */

.how-step img
{
    width: 350px;
}
#ptab1 h5,
#ptab2 h5,
#ptab3 h5
{
	text-transform:capitalize;
}
.how-section .how-step #ptab1 .process-steps li
{
    border: none;
}
.how-section .how-selector .process-steps li
{
    float: left;

    width: 33.33% !important;
}
.step-desc
{
    margin: 0 auto;
}
.process-steps li
{
    margin-top: 0;
    padding: 30px 0 0;
}
@media (min-width: 1024px)
{
    .process-steps li
    {
        padding: 30px 0;
    }
}
.how-section .process-steps li:first-child
{
    margin-top: 0;
}
.how-section .how-step .process-steps li
{
    float: left;
    width: 20% !important;
	padding-left:25px;
	padding-right:25px;
}
.how-section .how-step .process-steps li:nth-child(odd)
{
    /*clear: both;*/
}
.process-steps li:before,
.process-steps li:after
{
    top: 60px;
}
@media (max-width: 1023px)
{
    .process-steps li:before,
    .process-steps li:after
    {
        top: 60px;
    }
}
.process-steps
{
    margin: 0;
}
.how-step .process-steps li:before,
.how-step .process-steps li:after
{
    border: none;
}
.partner-wrap
{
    padding: 50px 0;
}
.partner-section{
	/*background-color:#F7F7F7;*/
}
/* Footer */

#copyrights .col_full
{
    margin-bottom: 0;
}
#footer .footer-widgets-wrap
{
    padding: 50px 0;
}
/* RESPONSIVE */

.content-wrap
{
    padding-top: 0;
    padding-bottom: 0;
}
.section
{
    margin: 0;
    padding: 50px 0;
}
.header-wrap
{
    padding: 50px 0;
}
.telco-section
{
    padding: 0;

    /*background-color: rgba(255, 170, 76, .04);*/
}
.feature-section
{
    padding: 50px 0 30px;
	/*background-color: #F7F7F7;*/
}

.feature-section .feature-title{
	margin-bottom:50px;
}

.before-heading
{
    padding-top: 20px;
}
.heading-block
{
    margin-bottom: 20px;
}

.promo.parallax
{
    padding: 50px 0 !important;
}
@media (max-width: 991px)
{
    .contact-big-section
    {
        text-align: center;
    }
}
.about-two-section .parallax
{
    padding: 80px 0;
    background-repeat: no-repeat;
    background-position: center bottom;
}
.about-two-section .col_full
{
    margin-bottom: 0 !important;
}
.about-two-section .col_full p{
	line-height:2 !important;
	font-size:18px;
}
.about-two-section .heading-block:after
{
    margin: 0 auto;
    margin-top: 15px;
}
.about-two-section .parallax
{
    padding: 20px 0;
}
@media (max-width: 1199px)
{
    .about-two-section .parallax
    {
        padding: 30px 0;
    }
}
.about-two-section .col_two_third
{
    margin-bottom: 0 !important;
}
.footer-widgets-wrap .col_one_third,
#copyrights .col_full
{
    margin-bottom: 0 !important;
}
#partner
{
    padding-bottom: 30px;
}
.contact-title
{
    padding: 0 15px;
}
.promo h3
{
    font-weight: 400;
}
.promo.promo-dark > h3 span,
.promo.promo-dark > .container > h3 span
{
    font-weight: bold;
}
.promo.promo-dark > .container > h3 span
{
    background-color: rgba(250, 137, 9, .45);
}
promo.promo-dark > .container > h3 span
{
    background-color: rgba(250, 137, 9, .0005);
}
#google-map
{
    height: 437px;
}
.feature-ximpay .heading-block
{
    margin-bottom: 40px;
}
.promo
{
    background: url(../images/parallax/111.jpg) no-repeat center bottom;
    background-size: cover;
}
@media (max-width: 767px)
{
    .about-two-section .phone
    {
        display: none;
    }
}
.phone
{
    position: absolute;
    top: 50%;
    left: 0;

    transform: translateY(-50%);
}
.phone-text
{
    float: right;
}
/* Responsive Menu */
@media (min-width: 992px)
{
	.lang-switcher img
	{
		position: relative;
		top: -1px;
	}
	#primary-menu ul ul:not(.mega-menu-column)
	{
		top: 70px;
		width: 140px;
	}
	.lang-switcher ul img
	{
		margin-right: 8px;
	}
}
@media (max-width: 991px)
{
	.id-lang img{
		padding-right:10px;
	}
}


/* Fix Potay */

.heading-block h1{
	font-size:26px;
}

.header-wrap{
	padding:80px 0 0 0;
}

.telco-wrap{
	padding-bottom:40px;
}

@media (min-width: 768px){
.lead {
    font-size: 19px;
}
}

.heading-block:after{
	width: 100px;
    border-top: 4px solid #444;
	    margin-top: 25px;
}

.feature-img{
	margin-bottom:20px;
}

.feature-ximpay .heading-block h3{
	font-size:30px;
}

.feature-ximpay .heading-block .feature-slogan{
	font-size:20px;
	font-weight: 300;
    color: #777;
}

.feature-box h3{
	font-weight:bolder;
}

.feature-box .fbox-icon{
	width:auto;
}

.feature-box.fbox-plain .fbox-icon img{
	height:auto;
}

.feature-ximpay .heading-block{
	margin-bottom:80px;
}


@media (min-width: 1024px){
.feature-ximpay
{
    padding: 50px 0;
	border:1px solid black;
	margin-left:auto;
	margin-right: auto;
	margin-top:80px;
	margin-bottom:40px;
	width:970px;
}

.fbox-container{
	width:95%;
}

.ftitle-wrap{
	position:relative;
	top:-85px;
}
.ftitle-wrap h3{
	border:1px solid black;
	display:inline-flex;
	padding:10px 25px;
	background-color:white;
}
.feature-ximpay .heading-block{
	margin-bottom:0;
}
}

@media (min-width: 1024px){
.feature-ximpay
{
    padding: 50px 0;
	border:1px solid black;
	margin-left:auto;
	margin-right: auto;
	margin-top:80px;
	margin-bottom:40px;
	width:970px;
}

.fbox-container{
	width:95%;
}
}

@media (min-width: 1200px){
	.feature-ximpay{
		width:1170px;
		margin-left:auto;
		margin-right: auto;
}
}



.feature-box{
	position:relative;
}

.process-steps li:before, .process-steps li:after{
    border-top: 1px solid #EDEDED;
	padding:0 10px;
}

.process-steps li.ui-tabs-active a{
	    border-color:transparent !important;
		
	background-color: #FF9D03 !important;
}

.process-steps li .i-bordered{
	 border-color:transparent !important;
	background-color:#CDCDCD!important;
}

.process-steps{
	margin-bottom:20px;
}

.i-circled, .i-bordered{
	font-size:30px;
}

.process-5 img{
	max-height:450px;
	width:auto;
	position:relative;
}

.contact-full-section{
	padding:80px 0;
}


.step-number {
	width: 50px;
    height: 50px;
    background-color: #E9AB52;
    display: inline-grid;
    vertical-align: middle;
    border-radius: 40px;
    color: white;
    font-size: 20px;
    position: absolute;
    z-index: 2;
    padding: 8px;
	left: -5%;
    top: -5%;
}

.number-pc {
	left:0;
}

.process-steps li h5{
	font-size:15px;
	font-weight:600;
}

@media (max-width: 1199px){
	.step-number {
	left: -15%;
    top: -5%;
}
.number-pc {
	left:0;
}
}

@media (max-width: 991px){
	.step-number {
	left: -10%;
    top: -5%;
}
.number-pc {
	left:0;
}
	.process-5 .pc-img{
		max-height:200px;
	}
	.process-5 img{
	max-height:350px;
	width:auto;
	position:relative;
}
}

@media (max-width: 767px){
	.step-number {
	left: 5%;
    top: -5%;
}
	.process-5 img{
	max-height:300px;
	width:auto;
	position:relative;
}
}

@media (max-width: 479px){
	.how-section .how-step .process-steps li{
		width:100% !important;
	}
}

.footer-number span{
	color:#F6891F;
}

.sns-item{
	display: table;
    margin-left: auto;
    margin-right: auto;
    float: none;
}

.sns-item .sns-text{
	line-height:35px;
}

#copyrights{
	padding:10px 0;
}

#copyrights span{
	border-bottom:1px solid white;
	color:#FAA61A;
}

.social-icon{
	border:none;
	font-size:18px;
}

.si-instagram:hover, .si-colored.si-instagram{
	background: #d6249f;
  	background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
}

.contact-full-section .heading-block:after{
	border:none;
}

.button.button-border.button-light{
	border-color: #ED841F;
    color: #EEEEEE;
}
.promo.promo-flat a.button:hover{
	background-color: #ED841F;
	color:#EEEEEE;
}

#faqs .divider{
	top:0;
}

.contact-page .contact-full-section{
	padding:30px 0;
}

.footer-gradient { 
	height:0.7px;
  width: 100%;
  left:0;
  right: 0;
  top: 0;
  bottom: 0;
background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
background-size: 1800% 1800%;

-webkit-animation: rainbow 18s ease infinite;
-z-animation: rainbow 18s ease infinite;
-o-animation: rainbow 18s ease infinite;
  animation: rainbow 18s ease infinite;}

@-webkit-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@-moz-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@-o-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@keyframes rainbow { 
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}

.widget p:not(.lead){
	font-size:16px;
	color:white;
}

.w3-row .tablink{
	display:inline-block;
	font-size:16px;
	padding:5px 27px;
	border:1px solid #E9AB53;
	margin-left:20px;
	margin-right:20px;
	margin-bottom:40px;
	border-radius:40px;
}

.w3-border-red{
	background-color:#E9AB53;
	border-color:#E9AB53 !important;
	color:white;
}

.fbox-pic{
	height:175px;
	width:100%;
	display:block;
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center center;
	margin-top:20px;
}
@media (max-width: 414px){
	.fbox-pic{
	height:130px;
	}
}
@media (max-width: 320px){
	.fbox-pic{
	height:100px;
	}
}
@media (min-width: 576px) and (max-width: 767px){
	.fbox-pic{
	height:180px;
	}
}
@media (min-width: 768px) and (max-width: 768px){
	.fbox-pic{
	height:120px;
	}
}
@media (max-width: 576px){
	.ft-email{
		display:block;
		padding-top:15px;
	}
	.footer-number .ft-dot{
		display:none;
	}
}

@media (min-width: 577px){
	.ft-email{
		display:inline-block;
	}
}

@media (max-width: 767px){
#footer .footer-widgets-wrap{
	padding-bottom:25px;
}
}

/* HOW SECTION FIX */

@media (min-width: 1200px){
.how-section .container-fluid, .feature-section .container-fluid, .about-two-section .container-fluid, .partner-section .container-fluid, .telco-section .container-fluid{
		width:1170px;
		margin-left:auto;
		margin-right: auto;
}
}

.i-rounded, .i-circled, .i-bordered{
	width: 70px !important;
    height: 70px !important;
	line-height: 70px !important;
	z-index:2;
	font-size:35px;
}

.process-steps li:before, .process-steps li:after{
	top: 70px;
}

@media (max-width: 991px){
.how-section .how-step .process-steps li
{
	padding-left:17px;
	padding-right:17px;
}
}

@media (max-width: 768px){
.how-section .how-step .process-steps li
{
	padding-left:15px;
	padding-right:15px;
}

	.step-number {
	left: -10%;
    top: -5%;
    width: 45px;
    height: 45px;
    line-height: 45px;
    padding: 0;
}
}

@media (max-width: 767px){
.how-section .how-step .process-steps li
{
    float: left;
    width: 33.333333333333333% !important;
	padding-left:25px;
	padding-right:25px;
}

.how-section .how-step .process-steps li:nth-child(4){
	clear:both;
}

.step-number {
	left: 0;
    top: -5%;
}
.process-steps li:before, .process-steps li:after{
	display:block;
}
}

@media (max-width: 576px){
.how-section .how-step .process-steps li
{
    float: left;
    width: 33.333333333333333% !important;
	padding-left:30px;
	padding-right:30px;
}

	.step-number {
	left: -10%;
    top: -5%;
}
}

@media (max-width: 500px){
.how-section .how-step .process-steps li
{
	padding-left:20px;
	padding-right:20px;
}

	.step-number {
	left: -10%;
    top: -5%;
}
}

@media (max-width: 414px){
.i-rounded, .i-circled, .i-bordered{
	width: 55px !important;
    height: 55px !important;
	line-height: 55px !important;
	font-size:30px;
}

.process-steps li:before, .process-steps li:after{
	top: 60px;
}

.how-section .how-step .process-steps li:nth-child(4){
	clear:none;
}

.how-section .how-step .process-steps li:nth-child(odd){
	clear:both;
}

.how-section .how-step .process-steps li
{
    float: left;
    width: 50% !important;
	padding-left:35px;
	padding-right:35px;
}

	.step-number {
	left: -10%;
    top: -5%;
}
}

@media (max-width: 375px){
.i-rounded, .i-circled, .i-bordered{
	width: 50px !important;
    height: 50px !important;
	line-height: 50px !important;
	font-size:26px;
}

.process-steps li:before, .process-steps li:after{
	top: 58px;
}

.how-section .how-step .process-steps li{
	padding-left:25px;
	padding-right:25px;
}

.how-section .how-step .process-steps li:nth-child(odd){
	clear:both;
}

.step-number {
	left: -10%;
    top: -5%;
}
.process-steps li h5{
	font-size:14px;
}
}

/* FIX FEATURE BOX */

.feature-box{
	padding:0;
}

.feature-box .fbox-icon{
	display:inline-block;
	position:relative;
	margin-bottom:15px;
}

/* FIX TELCO 5 TELCO AJA*/


@media (min-width: 768px){
.telco-wrap .col-md-2{
	width:20%;
}
}
/* Small Fix */

.feature-section .heading-block > span:not(.before-heading), .how-section .heading-block > span:not(.before-heading), .partner-section .heading-block > span:not(.before-heading){
	color:#F1871F;
	font-size:25px;
	font-weight:700;
}

.how-section{
	margin-top:-50px;
}

@media (max-width: 1023px){
	.feature-ximpay{
		padding-top:0;	
	}
	.feature-section{
		padding-top:0;
	}
}

@media (max-width: 414px){
	.header-wrap{
		padding-top:45px;
	}
}

@media (max-width: 767px){
.iphone-wrap {
    opacity: 0;
}
}

/* Fix how to step PC ( 2 atas 3 bawah ) */

.how-section .how-step #ptab2  .process-steps li:nth-child(-n+2){
	width:50% !important;
	padding-left:45px;
	padding-right:45px;
}

.how-section .how-step #ptab2  .process-steps li:nth-child(n+3){
	width:33.3333333333333% !important;
	clear:none;
	padding-left:45px;
	padding-right:45px;
}

#ptab2  .process-5 li img{
	max-height:350px;
}

#ptab2  .process-5 li img.pc-img{
	max-height:250px;
}

@media (max-width: 767px){
	#ptab2 .step-number{
		left:-10%;
}
.how-section .how-step #ptab2  .process-steps li:nth-child(-n+2){
	padding-left:20px;
	padding-right:20px;
}

#ptab2 .step-number.number-pc{
	left:10%;
}
}

@media (max-width: 576px){
	#ptab2 .step-number{
		left:-10%;
}
.how-section .how-step #ptab2  .process-steps li:nth-child(-n+2){
	padding-left:10px;
	padding-right:10px;
}
.how-section .how-step #ptab2  .process-steps li:nth-child(3){
	clear:both;
}
.how-section .how-step #ptab2  .process-steps li:nth-child(n+3){
	padding-left:25px;
	padding-right:25px;
}
#ptab2  .process-5 li img{
	max-height:250px;
}
#ptab2 .step-number.number-pc{
	left:5%;
}
}

@media (max-width: 414px){
	.how-section .how-step #ptab2 .process-steps li:nth-child(-n+2){
		padding-left:0;
		padding-right:0;
	}
	#ptab2 .step-number.number-pc{
		left:0;
		top:-10%;
	}
	.how-section .how-step #ptab2 .process-steps li:nth-child(n+3){
		padding-left:35px;
		padding-right:35px;
		width:50% !important;
	}
	.how-section .how-step #ptab2 .process-steps li:last-child{
		clear:both;
	}
	
}

/* fbox icon sebaris */

.feature-box .fbox-icon{
	display:inline-flex;
	width:100%;
}

.feature-box h3{
	display:inline-flex;
	padding-left:25px;
	padding-top:20px;
}

.feature-box.fbox-plain .fbox-icon img{
	width:60px;
	height:60px;
}

@media (max-width: 1199px){
.feature-box h3{
	font-size:15px;	
}
}

@media (max-width: 414px){
	.feature-box h3{
		padding-top:0px;
		transform: translateY(20%);
	}
	
}