@font-face {
    font-family: gotham;
    src: url('../fonts/gotham/Gotham-Light.otf');
	font-weight:200;
}  
@font-face {
    font-family: gotham;
    src: url('../fonts/gotham/Gotham-Book.otf'); 
} 
@font-face {
    font-family: gotham;
    src: url('../fonts/gotham/Gotham-Bold.html');
	font-weight:bold;
}

/* body{margin:0px; font-family: gotham !important; background-color: #f5f5f5 !important; } */
body a, .link{cursor:pointer; color:#5182bb}  
body a:hover, .link:hover{text-decoration: underline;}  

/* img {max-width: 100%} */

.menu-bar{ padding: 0.2m 0; width: 100%; background-color: #f7f7f7; background-color: #f5f5f5; z-index: 999; margin-top: 120px;}
.menu-bar .content-wrapper {margin-top: 0}
.menu-bar .logo {width: 10em; height: 4em; background-image:url('../img/logo.png');float:left; background-position: left center;background-repeat: no-repeat; background-size: contain }

.search-box{float: right; margin-top: 1em;}
.search-box select { padding: 0.5em 1em; border-radius: 0.5em}
.search-box.label-style select, .search-box.label-style input {padding:5px; height: auto; -webkit-appearance:none; outline-style:none !important ;  border: 0 ;  border-radius: 0;  box-shadow: none !important; -webkit-box-shadow:none !important; -moz-box-shadow: none !important; -o-box-shadow:none !important; background: none;  }
.label-style select, .label-style input{  -webkit-appearance:none; outline-style:none !important ;  border: 0 ; border-bottom: 1px solid #dedede; border-radius: 0; box-shadow: none !important; -webkit-box-shadow:none !important; -moz-box-shadow: none !important; -o-box-shadow:none !important; background: none;  }

#dynamic_select {-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.search-box {position:relative; display: inline;}
.search-box:after {content:""; width:0; height:0; position:absolute; pointer-events: none;}
.search-box:after {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    top: 36%;
    right: .75em;
    border-top: 8px solid black;
    opacity: 0.5;
}
#dynamic_select::-ms-expand {
    display: none;
} 

/*
.category-search {width: 25%; float: right; border-radius: 0.4em 0 0 0.4em; height: 2.9em;  padding: 0.3em 1.5em 0 0.5em; position: relative; background-color: #dedede}
.category-search i {position: absolute; right: 0.5em; top: 0.4em; color: #333; font-size: 1.2em}
*/

/*.dummy-header {height: 4em}*/

.banner {
	height: auto;
	background-position: top;
	background-repeat: no-repeat;
	background-size: cover
}
#new-banner {display: inline;}
.banner h1 {font-weight: normal; margin: 0; margin-bottom: 0.5em}
.banner .text{width: 28em; max-width:50%; position: relative; left: 50%; top: 20%; font-weight: normal;color: #000!important;padding: 0;}

.bg-static {background-size: 100%; background-position: top left; background-image: url("../img/bg.png"); width: 100%;  }
.content-wrapper{max-width:1200px; margin:auto; margin-top:1em; padding:0 1em; } 
/*.step-wrapper {max-width:600px; margin:auto; }*/

*:focus {  outline: none !important; }
.user-select-none { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.show-mobile{display:none !important}
.hide-mobile{display:inherit}  

/* default table */ 
.div-table{display:table}
.div-table-caption {display: table-caption}
.div-table-col{display:table-cell; vertical-align:top;}
.div-table-col-5{display:table-cell; padding:0.5em; vertical-align:top;}
.div-table-col-3{display:table-cell; padding:0.3em; vertical-align:top;}
.div-table-row{display:table-row;} 

/* TEXT COLOR SET */
.text-white {color:#FFF !important;}
.text-green-avocado  {color:#568203 !important;}
.text-red-cardinal  {color:#C41E3A !important;}
.text-yellow-mikado  {color:#FFC40C !important;}
.text-blue-munsell {color:#0093AF !important;}
.text-purple-purpureus{color:#9A4EAE !important;}
.text-black-jet{color:#343434 !important;}
.text-gray-dim{color:#696969 !important}
.text-gainsboro{color:#F00 !important}
.text-cobalt-blue{color:#0047AB !important;} 


/* BG COLOR SET */
.bg-green-avocado {background-color:#568203  !important;}
.bg-red-cardinal {background-color:#C41E3A  !important;}
.bg-yellow-mikado {background-color:#FFC40C  !important;}
.bg-blue-munsell {background-color:#0093AF  !important ;}
.bg-blue-steel {background-color:#4682b4  !important ;}
.bg-purple-purpureus{background-color:#9A4EAE !important;} 
.bg-gray-dim{background-color:#696969 !important;} 
.bg-silver{background-color:#C0C0C0 !important;} 
 
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

.flex {display: flex; align-items:center}
.flex [type="checkbox"] {margin-top:0 !important} 
.flex > div {margin-right: 0.5em}
.flex > div:last-child{margin-right: 0}
.flex .consume {flex:1}  

/* BOOTSTRAP OVERRIDE */
/* .container {width:100%; padding: 0 !important}  */
.form-control:focus { border-color: inherit !important;  -webkit-box-shadow: none !important;  box-shadow: none !important;}  
.form-horizontal .control-label {text-align: left}
/* BOOTSTRAP OVERRIDE */



.center-content-wrapper{ max-width: 1000px;  padding: 0 2em}

.table-content {padding: 4em 0; background-color: #fff !important}
.content-index {list-style: none; margin: 0; padding: 0;  margin: auto}
.content-index li {width: 33.333%; float: left; display: inline-block}
.content-index li .panel {width:80%; margin: auto; padding: 2em 1em; text-align: center; border-radius: 1em;}
.content-index li .panel:hover {background-color: #dedede; }
.content-index li .icon {width: 4em; height: 4em;  margin: auto; margin-bottom: 1em; background-size: contain; background-repeat: no-repeat; background-position:center;}
.content-index li a {text-decoration: none; color: #333}
.content-index li .chevron {display: none}
.content-index li .icon.login{background-image: url("../img/login.png")}
.content-index li .icon.information{background-image: url("../img/information.png")}
.content-index li .icon.registration{background-image: url("../img/registration.png")}
.content-index li .icon.premi{background-image: url("../img/premi.png")}
.content-index li .icon.update{background-image: url("../img/update.png")}
.content-index li .icon.balance{background-image: url("../img/balance.png")}
.content-index li .icon.claim{background-image: url("../img/claim.png")}
.content-index li .icon.tracking{background-image: url("../img/tracking.png")}
.content-index li .icon.card{background-image: url("../img/card.png")}
.content-index li .icon.forgot-password{background-image: url("../img/forgot-password.png")}
.content-index li .icon.forgot-account{background-image: url("../img/forgot-account.png")}
.content-index li .icon.tracking-pengaduan{background-image: url("../img/tracking-pengaduan.png")}
.content-index li .icon.topup{background-image: url("../img/topup.png")}
.content-index li .icon.ewallet{background-image: url("../img/ewallet.png")}
.content-index li .icon.promo{background-image: url("../img/promo.png")}
.content-index li .icon.dana-siaga{background-image: url("../img/dana-siaga.png")}
.content-index li .icon.perumahan-pekerja{background-image: url("../img/perumahan-pekerja.png")}
.content-index li .icon.jp-berkala{background-image: url("../img/jp-berkala.png")}
.content-index li .icon.beasiswa{background-image: url("../img/beasiswa.png")}
.content-index li .icon.streaming{background-image: url("../img/streaming.png")}
.content-index li .icon.pembayaran-iuran{background-image: url("../img/pembayaran-iuran.png")}


.content-index li .icon.balance {width:5em}

.why-use {background-color: #f2f7fb; padding: 2em 0}
.why-use h2 {text-align: center; color:#333; font-weight: normal}
.why-use .reason-list {margin: 0; padding: 0; list-style: none}
.why-use .reason-list li {margin-bottom: 0.2em; padding: 1em; border-radius: 1em; display: flex;}
.why-use .reason-list li.selected {background-color: #fff;  box-shadow: 5px 5px 5px 2px #ccc; margin-bottom: 1.2em}
.why-use .reason-list li:last-child{margin-bottom: 0}
.why-use .reason-list .icon {width:1.5em; height: 1.5em; margin-right: 1em; background-size: contain; background-repeat: no-repeat; background-position: center; background-image: url("../img/check.png") }
 
.video {background-color: #f2f7fb; padding: 2em 0}
.video h2 {text-align: center; color:#333; font-weight: normal}

.download .text div{margin-bottom: 1.5em; font-size: 1.2em; font-weight: normal}
.download .img-02 {width: 50%; height: 40em; background-size: contain; background-repeat: no-repeat; background-position: center bottom; background-image: url("../img/img-02.png")}

.back-panel {margin: auto; margin-top: 2em; margin-bottom: 4em; text-align: center}
.back-button{background-color: #34c645; margin: auto; text-decoration: none; color: #fff; padding: 1em 2em; border-radius: 0.4em;}
.back-button:hover{text-decoration: none; background-color: #31b74d}

/* .footer .content-wrapper{margin-top: 0; max-width: 1200px; background-color: #f5f5f5; padding-bottom: 1em; padding-top: 1em; border-top:1px solid #666 }
.footer .logo {width: 6em; max-width: 100%} 
.footer .logo175 {width: 3em; max-width: 100%}
.footer a {color:#2ab13c; text-decoration: none}
.footer .copy{font-size: 0.7em; margin-top: 0.5em}
.footer .weblink{font-size: 0.8em; margin-bottom: 0.2em}
.footer .link-panel{margin-top:-0.4em}
.footer .medsos{font-size: 0.9em}
.footer .medsos-icon{width:1em; height: 1em; margin-right: 0.2em; background-size: contain; background-repeat: no-repeat; background-position: center;}
.footer .medsos-icon.fb{ background-image: url("../img/fb-icon.png")}
.footer .medsos-icon.ig{ background-image: url("../img/ig-icon.png")}
.footer .medsos-icon.twitter{ background-image: url("../img/twitter-icon.png")}
.footer .medsos-icon.youtube{ background-image: url("../img/youtube-icon.png")}
.footer .left-panel{float: left}
.footer .right-panel{float: right}

.fa-facebook {color: #2473e1} */
.section-title {margin-left: 1%}

.canvas-normal-panel { position: relative; overflow: hidden;  margin: auto; left: 0.5em; width: 340px; height: 37em; background-image: url("../img/loading.gif"); background-position:left 45% top 30%; background-repeat: no-repeat}
.canvas-half-panel-height { position: relative; overflow: hidden; margin: auto; left: 0.5em; width: 440px; max-width: 100%; height: 37em;} 
.canvas-half-panel-height .frame-normal {background-image: url("../img/frame-normal.png"); background-size: cover; background-repeat: no-repeat; background-size: 100%; height: 550px;   }
.canvas-half-panel-height .vid-normal { left:0.55em;  width: 380px; max-width: 85%}

.frame-normal {position: absolute; left: 0; top:0; width: 100%; height: 100%; background-size: contain; background-repeat: no-repeat; background-position: top center; background-image: url("../img/frame-normal.png") }
.vid-normal{position: absolute; overflow: hidden; left: 1.2em; top:0; width: 268px; height: 550px;}
.vid-normal video {width: 100%}

.canvas-half-panel { position: relative;overflow: hidden;  margin: auto; left: 0.5em; width: 450px; max-width: 100%; height: 20em;  background-image: url("../img/loading.gif"); background-position:left 45% top 30%; background-repeat: no-repeat}
.canvas-half-panel .frame-normal {background-image: url("../img/frame-normal.png"); background-repeat: no-repeat; background-size: 100%; height: 350px;  }
.canvas-half-panel .vid-normal { left:0.4em;  width: 390px;  max-width: 85%}

h1 {color: #1b75bb; }
h2 {font-size: 1.3em; color: #00a2dd; margin-bottom: 0.5em; line-height: 1em}

.text-content {margin-bottom: 2em; }
.text-content > .div-table {width: 90%; margin: auto}

.text-content .title {font-size: 1.3em; font-weight: bold; color: #00a2dd; margin-bottom: 0.5em; padding-bottom: 0.5em}
.text-content .number-col {padding-right: 0.5em; width: 1em}

.reply {font-size: 0.8em; text-align: center; line-height: 3em; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.reply i {margin-left: 0.3em; font-size: 0.8em; transform: rotate(280deg);}

.step {list-style: none; margin: 0; padding: 0}
.step li { color: #00a2dd; margin-bottom: 2em; display: inline-block; float: left; width: 100%;}
.step li.w50 {width:50%}
.step li .content-panel {background-color: #fff; border-radius: 1em; padding:2em 1.5em 1em 1.5em; width: 94%; margin: auto; }
.step li.w50 .content-panel { width: 88%;}
.step li .text-content{font-size: 1em; color: #333}

.mobile-stack .text-content {width: 80%; float: right}
.subtitle {color: #606060; margin-left: 1em; margin-bottom: 1em; font-size: 1.3em; font-weight: bold}
.mnv-youtube-slide {padding: 0; margin: 0}
.mnv-youtube-slide li { text-align: center}
.mnv-youtube-slide li iframe{border-radius: 0.6em; margin: auto; width: 96%; }

.mnv-youtube-slide .slick-current iframe {height: 170px; width: 98%}
.mnv-youtube-slide .slick-slide:not(.slick-current) iframe {margin-top: 10px}

.slick-arrow {z-index: 997; color : #34c645; border:1px solid #34c645;  position: absolute; top: 40%;  cursor: pointer;  border-radius: 50%; padding: 0em; padding-top: 0.3em; width: 25px; height: 20px; text-align: center;}
.slick-arrow.prev-arrow {left: -40px ; }
.slick-arrow.next-arrow {right: -40px } 

.mm-menu {background-color: #05ca72 !important; } 
.mm-navbar {border-bottom: 0 !important}
.mm-navbar__title {background-color: #0c9455; color: #fff !important; font-weight: bold}

#btn-side-menu {display: none; z-index: 99999; position: absolute; right: 0.3em; top: 0.25em; font-size: 1.8em;  color: #fff; background-color:#96c53b; width:50px; height: 50px; text-align: center; line-height: 1.9em; border-radius: 25em }
#side-menu .side-menu li {color: #fff;}
#side-menu .selected {background: rgba(255, 255, 255, 0.2)}
#side-menu .mm-listview > li:not(.mm-divider):after {border: 0}
#side-menu .side-menu li:hover:not(.divider), #side-menu .mm-listview > li.mm-selected > a:not(.mm-next), .mm-menu .mm-listview > li.mm-selected > span {background: rgba(255, 255, 255, 0.2)}
#side-menu .mm-listview > li > a.mm-prev:before, #side-menu .mm-listview > li > a.mm-next:after, #side-menu .mm-header .mm-btn:before, .mm-menu .mm-header .mm-btn:after {border-color: #fff} 
#side-menu .mm-header .mm-title{color: #fff} 
#side-menu .side-menu li a{color: #fff !important}

.text { background-color: transparent!important; color: #000!important; font-size: 16px;padding: 0px!important;}


/*.img-01 {background-image: url('../img/mobile-bg-banner.png'); background-position: left; display: inherit}*/

/* responsive */
@media screen and (max-width: 1000px){
	.banner {height: 100vh; background-image: url("../img/banner-mobile.png"); background-size: cover;}
	#new-banner {display: none;}
	.step li.w50 .content-panel {width:84%}
	.step li .content-panel {width: 92%}
	.mobile-stack.flex {flex-direction:column}
	.mobile-stack.flex > div {width: 100%}
	.mobile-stack .text-content { float: none; width: auto}

	.canvas-normal-panel { left: -1.0em; width: 337px; height: 39em; };

	
}

@media screen and (max-width: 950px){    
	.download .img-02{height: 35em}
}

@media screen and (max-width: 850px){    
	.banner h1 {font-size: 2em !important;}
	.download .img-02{height: 30em}
	.download .text{margin-top: 3em}
}

@media screen and (max-width: 767px){    
    .hide-mobile, .search-box{display:none !important}
	.show-mobile{display:initial !important}  
	
    #btn-side-menu {display: inherit} 
	
	.step li.w50 {width:100%}
	.step li .content-panel {width: 90% !important}
	
	.reason {text-align: center; padding: 3em 0}
	.reason .reason-list{text-align: left; max-width: 30em; margin: auto}
	.reason .img{display: none}
	
	.download .img-02 {display: none}
	.download {text-align: center}
	.download .download-apps {justify-content: center}
	
	/* .footer {text-align: center} */
	/*.footer .left-panel,.footer .right-panel{display: none} */
	/* .footer .center-content-wrapper > div{width: 100%; float: none !important; margin-bottom: 0; }
	
	.footer .copy{margin: 0}
	
	.footer .left-panel{float:none; text-align: left; margin-bottom: 1em} 
	.footer .left-panel.logo, .footer .right-panel.flex,  .footer .right-panel > div, .footer .medsos.flex  {float:none; display:block; margin-bottom: 1em; text-align: left}
	.footer .medsos.flex .medsos-item{ margin-top: 0.5em } 
	.footer .copy {text-align: left}
	
	.footer .logo {width: 8em;}
	.footer .logo175 {width: 6em}  */
	
	.table-content {padding:0}
	.table-content .content-wrapper{margin-top: 0}
}

@media screen and (max-width: 700px){    
/*    .banner{display:none !important} */
	.banner {height: 65vh; background-image: url("../img/banner-mobile.png"); background-size: cover;}
	.banner .text {width: auto; max-width: 100%; padding: 3em 2em!important; left: 0; text-align: center}
	.banner .download-apps {justify-content: center}
	.menu-bar .logo {float: none;background-position: center}
/* 	.img-01 {display: inherit}*/
	.reason {padding-bottom: 0}
	.content-index li {width: 50%}
	
}

@media screen and (max-width: 500px){     
	.content-index li {width: 100%; float: none; margin-bottom: 0}
	.content-index li .chevron {display: inherit; margin-top: 0.5em}
	.content-index li .panel {display:flex; background-color: #f1f1f1; margin-bottom: 1em; padding: 1em; border-radius: 20em; }
	.content-index li .panel .icon {width: 2em; height: 2em; margin:0 0 0 2em}
	.content-index li .panel .text{flex: 1; line-height: 2em; font-weight: bold}
	.content-index li .icon.balance {width:2.4em}
	
	.canvas-half-panel { width:340px; }  
	.text-content > .div-table {width: 100%; margin: auto}
	.table-content {padding-top: 1em; padding-bottom: 1em; background-image: url('../img/mobile-bg-banner.png'); background-position: top left; background-size: auto; background-repeat:no-repeat }
}

@media screen and (max-width: 435px){     
	
/*	.dummy-header {height: 10em}*/
	
	.content-index li .panel .icon {margin-left: 1em}
	.content-index li .panel {width:80%}  
	 
	.menu-bar .logo, .search-box {float: none; width:100%; margin: 1em 0; text-align: center}
	.menu-bar .logo {background-position: center}
	.search-box select {width: 100%; text-align: center}
	.text { background-color: transparent!important; color: #000!important; font-size: 12px;padding: 0px!important;}
	
	.canvas-normal-panel, .canvas-half-panel {width:250px;left: 1.5em}
	.canvas-normal-panel .vid-normal, .canvas-half-panel .vid-normal {left: 0.2em; width:220px;}
	
}

/* iphone */
@media screen and (max-width: 375px){   
	.step li .content-panel {width: 85% !important}
	.canvas-normal-panel, .canvas-half-panel {width:250px;left: 0.5em}
	.canvas-normal-panel .vid-normal, .canvas-half-panel .vid-normal {left: 0.2em; width:220px;}
	
}