.paymentoption {
  margin-bottom: 20px; }

.paymentoption span {
  display: inline-block;
  padding: 5px;
  height: 40px;
  background-image: url(https://image.ibb.co/hYgV77/bankbw.png);
  margin-top: 10px;
  margin-right: 20px; }

.paymentoption span.bankbca {
  background-position: 0 0;
  width: 134px; }

span.bankbri {
  background-position: -580px 0;
  width: 170px; }

span.bankdanamon {
  background-position: -422px 0;
  width: 158px; }

span.bankmandiri {
  background-position: -134px 0;
  width: 138px; }

span.bankbni {
  background-position: -272px 0;
  width: 150px; }

.input-group-addon {background-color: transparent; border: 0px;}
.input-group-addon img {max-width: none;}

#mob-bar, #mob-con, #showM {
 	-webkit-transition: all 0.5s;
 	-moz-transition: all 0.5s;
 	transition: all 0.5s;
}

#showM {position: absolute; top: 0px; height: 100%; width: 100%; background-color: #000000}

#showM.active {
	transform: translate3d(300px, 0, 0);
	-webkit-transform: translate3d(300px, 0, 0); 
	-moz-transform: translate3d(300px, 0, 0);
} 
#showM.active #mob-overlay { display: block; }

#mob-bar {
	position: absolute; left: 0px; top: 0px; z-index: 1; width: 300px; height: 100%; overflow-y: auto; padding:10px 20px 0px; background-color: #032e72;
	transform: translate3d(-100%, 0, 0);
	-webkit-transform: translate3d(-100%, 0, 0); 
	-moz-transform: translate3d(-100%, 0, 0);
}
	#mob-bar ul {margin: 0px; padding:0px; list-style: none;}
	#mob-bar ul a {padding: 5px 10px; font-size: 16px; display: block; color: #ffffff}
	#mob-bar ul a span {width: 30px; text-align: center; font-size: 20px;}

	#mob-bar ul ul a {padding: 5px 10px 5px 30px;}

	#mob-bar h3 {text-align: center; font-size: 16px; text-transform: uppercase; margin-top: 20px;}
	#mob-bar .copyright {text-align: center; padding:15px 0px;}
	#mob-bar .powered {text-align: center; font-size: 11px;}

	#mob-bar .mob-lv2 {display: none}

	.mob-bar-info { background-color: #000000; padding: 10px 15px; margin-bottom: 10px; }

#mob-con {height: 100%; position: relative;}
	#mob-overlay {position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; background: rgba(0,0,0,0.5); z-index: 2; display: none; cursor: pointer;}
	#showM.active #mob-con {overflow:hidden;}

#mob-top {
	height: 65px; position: fixed; z-index: 1; width: 100%;
	background: #000000;
	background: -moz-linear-gradient(top,  #000000 0%, #080a34 100%); 
	background: -webkit-linear-gradient(top,  #000000 0%,#080a34 100%);
	background: linear-gradient(to bottom,  #000000 0%,#080a34 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#080a34',GradientType=0 );
}
	#mob-top .container {padding: 10px 0px}
	#mob-logo {max-height: 45px; margin-left: 10px;}	
		#mob-logo img {max-height: 45px;}
	#mob-topr {position: absolute; top: 15px; right: 10px;}
		.mob-menu {position: relative; padding-left: 60px; font-size: 1.5em}
		.mob-menu:before {position: absolute; top: 2px; right: 0; width: 30px; height: 4px; background: #fff; box-shadow: 0 0px #000, 0 10px #fff, 0 10px #000, 0 20px #fff; content: '';}

	#mob-topr2 {position: absolute; right: 50px; border:1px solid #333333; border-top: 0px; border-bottom: 0px; text-align: center; top: 0px;}
		#mob-topr2 .fa {display: block; font-size: 30px;}
		#mob-topr2 a {color: #ffffff; display: block; padding: 8px 16px;}

#mob-annoucement {padding-top: 70px;}

#mob-content {background-color: #000000; /*padding-bottom: 80px;*/ padding-bottom: 140px;}
.accor {}
.accor-title {
	color: #ffffff; display: block; padding:5px; position: relative;
	background-color: #616975;
	background-image: -moz-linear-gradient(top, rgb(118, 122, 134), rgb(80, 88, 100));
	background-image: -o-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
	background-image: -ms-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
	background-image: linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#727a86', EndColorStr='#505864');
	border-bottom: 1px solid #33373d;
	text-shadow: 0px 1px 0px rgba(0,0,0,.5);
}
.accor-title .fa {width: 25px; text-align: center;}
.accor-title span {position: absolute; right: 10px; background-color: #48515c; border-radius: 10px; padding: 2px 8px; font-size: 12px;}
.accor-title.active {
	background-color: #35afe3;
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(255, 204, 0)),to(rgb(255, 102, 0)));
	background-image: -webkit-linear-gradient(top, rgb(255, 204, 0), rgb(255, 102, 0));
	background-image: -moz-linear-gradient(top, rgb(255, 204, 0), rgb(255, 102, 0));
	background-image: -o-linear-gradient(top, rgb(255, 204, 0), rgb(255, 102, 0));
	background-image: -ms-linear-gradient(top, rgb(255, 204, 0), rgb(255, 102, 0));
	background-image: linear-gradient(top, rgb(255, 204, 0), rgb(255, 102, 0));
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#45c7eb', EndColorStr='#2698db');
	border-bottom: 1px solid #103c56;
	-webkit-box-shadow: inset 0px 1px 0px 0px #000;
	-moz-box-shadow: inset 0px 1px 0px 0px #000;
	box-shadow: inset 0px 1px 0px 0px #000;
	color: #ffffff;
}
	.accor-title.active span {background-color: #2173a1}

.accor-box {display: none;}
	.accor-box a {display: block; background: #fff; border-bottom: 1px solid #efeff0; color: #878d95; position: relative; padding: 3px 35px;}
	.accor-box a span {position: absolute; right: 10px; border-radius: 5px; padding: 2px 8px; font-size: 10px; border: 1px solid #999999}

#mob-footer {position: fixed; bottom: 0px; width: 100%; text-align: center; padding:12px 0px; font-size: 12px; background-color: #000000; border-top: 1px solid #236ada}
#mob-footer .fa {display: block; font-size: 30px;}
#mob-footer a {color: #ffffff}

.floatM {position: fixed; z-index: 99; left: 50%; transform: translateX(-50%); bottom: 72px; width: 66%}
.floatM .b {display: block; margin-bottom: 10px}

.ct {text-transform: uppercase;}
.ctl {float: left; width: 50%; text-align: center; background-color: #236ada;}
.ctl a {color: #ffffff;}
.ctr {float: left; width: 50%; text-align: center; background-color: #222222;}
.ctr a {color: #ffffff;}
.ct a {text-shadow: 0px 0px 4px #444444; padding: 8px 0px; display: block; font-size: 16px;}

.ct2 {text-transform: uppercase;}
.ct2b {float: left; width: 33.33%; text-align: center; background-color: #236ada;}
.ct2b:nth-child(even) {background-color: #0c3d8c}
.ct2b a {text-shadow: 0px 0px 4px #444444; padding: 8px 0px; display: block; font-size: 16px; color: #ffffff;}
.ct2b a .fa {display: block; font-size: 30px;}

div[id^='gb-widget-'] {bottom: 10% !important;left: 43% !important;}

@media only screen and (max-width: 479px) {
	
	/* Mission */

	.miswrap, .mlwrap {
		-webkit-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
	}

	.miswrap.active, .mlwrap.active {visibility: visible; opacity: 1}

	.miswrap {position: fixed; width: 100%; height: 100%; z-index: 9990; visibility: hidden; opacity: 0}
	.miswrap .overlay {position: absolute; width: 100%; height: 100%; z-index: 1; background-color: rgba(0,0,0,0.7);}
	.miswrap .misbox {max-width: 800px; width: 90%; position: absolute; z-index: 2; max-height: 90%; left: 50%; top: 50%; transform: translate(-50%, -50%);}
	.miswrap .misbox .mishead {background-color: #ffe000; position: relative;}
	.miswrap .misbox .mishead h2 {color: #333333; padding: 10px 15px; font-size: 20px; font-weight: bold; margin:0px;}
	.miswrap .misbox .mishead .mistol {position: absolute; right: 30px; top: 50%; transform: translateY(-50%); font-size: 12px; font-weight: bold; color: #ffffff; background-color: #222222; padding:3px 10px; border-radius: 5px;}
	.miswrap .misbox .mishead .misclose {color: #222222; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);}
	.miswrap .misbox .mishead .misclose:hover {opacity: 0.8}

	.miswrap .misbox .misbody {background-color: #000000; border: 1px solid #ffe000; max-height: 450px; overflow-y: auto;}
	.miswrap .misbox .misbody .mislist {line-height: normal; padding: 15px; border-bottom: 1px solid #ffe000; font-size: 0px;}
	.miswrap .misbox .misbody .mislist h3 {margin:0px; font-size: 18px; font-weight: bold; color: #ffe000; padding-bottom: 5px;}
	.miswrap .misbox .misbody .mislist .desc {font-size: 14px;}

	.miswrap .misbox .misbody .mislist .l {width: 75%; padding-right: 10px; display: inline-block;}
	.miswrap .misbox .misbody .mislist .r {width: 25%; padding-left: 10px; display: inline-block; text-align: right; vertical-align: top; border-left: 1px solid #333333;}
	.miswrap .misbox .misbody .mislist .r span {color: #ffffff; font-size: 14px; display: block;}
	.miswrap .misbox .misbody .mislist .r a {color: #ffffff; text-transform: uppercase; font-size: 12px; background-color: #555555; border: 1px solid #888888; border-radius: 5px; padding: 5px 5px; display: inline-block; margin-top: 5px}
	.miswrap .misbox .misbody .mislist .r a.btn-continue {color:#ffffff; background-color: #5cb85c; border-color: #5cb85c}
	.miswrap .misbox .misbody .mislist .r a:hover {border-color: #ffe000; background-color: #ffe000; text-decoration: none; color: #333333}

	.miswrap .misbox .misbody .mislist .r span.btn-void {color: #555555; text-transform: uppercase; font-size: 12px; background-color: #111111; border: 1px solid #222222; border-radius: 5px; padding: 5px 5px; display: inline-block; margin-top: 5px}
	.miswrap .misbox .misbody .mislist .r span.btn-done {color: #333333; text-transform: uppercase; font-size: 12px; background-color: #ffe000; border: 1px solid #ffe000; border-radius: 5px; padding: 5px 5px; display: inline-block; margin-top: 5px}

	.miswrap .misbox .misbody .mislist.done {background-color: #222222;}
	.miswrap .misbox .misbody .mislist.done .r a {border-color: #ffe000; background-color: #ffe000; text-decoration: none; color: #333333; cursor: default;}

	.mlwrap {position: fixed; width: 100%; height: 100%; z-index: 9991; visibility: hidden; opacity: 0}
	.mlwrap .overlay {position: absolute; width: 100%; height: 100%; z-index: 1; background-color: rgba(0,0,0,0.7);}
	.mlwrap .mlbox {max-width: 500px; width: 90%; position: absolute; z-index: 2; max-height: 90%; left: 50%; top: 50%; transform: translate(-50%, -50%);}
	.mlwrap .mlbox .mlhead {background-color: #ffe000; position: relative;}
	.mlwrap .mlbox .mlhead h2 {color: #333333; padding: 10px 15px; font-size: 20px; font-weight: bold; margin:0px;}
	.mlwrap .mlbox .mlhead .mlclose {color: #222222; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);}
	.mlwrap .mlbox .mlhead .mlclose:hover {opacity: 0.8}

	.mlwrap .mlbox .mlbody {background-color: #000000; border: 1px solid #ffe000; padding: 15px;}
	.mlwrap .mlbox .mlbody input {width: 100%; color: #333333; padding: 3px 10px}
	.mlwrap .mlbox .mlbody input::placeholder {color: #333333}
	.mlwrap .mlbox .mlbody .subbtn {color: #aaaaaa; text-transform: uppercase; font-size: 14px; background-color: #222222; border: 1px solid #555555; border-radius: 5px; padding: 5px 15px; display: inline-block; margin-top: 10px;}
	.mlwrap .mlbox .mlbody .subbtn:hover {border-color: #ffe000; background-color: #ffe000; text-decoration: none; color: #333333}

	.mlwrap .mlbox .mlbody .error {font-size: 12px; text-align: center; display: block; padding: 3px 0px; color: #ff0000; font-weight: bold;}
}