@import url(https://fonts.googleapis.com/css?family=Raleway:400,300,500,600,700,800);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800);
body { background:url(../images/bg.jpg); font-family: 'Raleway', Helvetica, Open Sans, san-serif; font-weight:400; color:#444444; }
.nilpadding { padding:0; }
.blue { color:#2092d9; }
.red { color:#9e0039; }


.wrap { padding:0; }
.container { padding:0; }
.header-contact { 
	background-color:#1c6593; padding:0.5em 0.5em;
	font-family: "Helvetica", Helvetica Neue, Roboto, Arial, sans-serif; font-size:14px; color:#fff; text-align:center;
}
.header-number { font-weight:bold; font-size:18px; }
.logo-text { margin:1.5em auto; font-size:30px; font-weight:bold; text-align:center; }
/*--------------------Navi--------------------*/
.top-bar { background:#1c6593; height:2.5em; line-height:2.5em; outline:0; }
.top-bar-section { text-align:center; }
.top-bar-section ul { display:inline-block; vertical-align:middle; }
.top-bar-section ul li { background:none; display:table-cell; float:inherit; position:relative; padding: 0px 10px 0px 5px; }
.top-bar-section ul li:not(:last-child):after { 
	content:'|'; position:absolute; right:0; top:50%; margin-top:-11px; 
	font-size:14px; font-weight:bold; color:#fff;  
}
.top-bar-section ul li > a { 
	transition: all 0.5s ease;
	font-family: 'Raleway', Helvetica, Open Sans, san-serif; font-size:14px; font-weight:600; 
}
.top-bar-section li:not(.has-form) a:not(.button) { background:none; padding: 0.3em 0.6em; line-height:1; }
.top-bar-section li.active:not(.has-form) a:not(.button) { padding: 0.3em 0.6em; line-height:1; }
.top-bar-section ul li:hover:not(.has-form) > a { background:none; }/*hover*/
.top-bar-section li.active:not(.has-form) a:not(.button):hover, .top-bar-section li.active:not(.has-form) a:not(.button), .top-bar-section li:not(.has-form) a:not(.button):hover { background:#9e0039; transition: all 0.5s ease; }/*hover*/

@media only screen and (min-width: 940px) {
	.name { display:none; }
}
@media only screen and (max-width: 938px) {
	.header-contact { padding:0.5em 5em; }
	.header-number { font-size:14px; }
	.container { padding: 0px 10px 0px 10px; }
	.top-bar.expanded { background:#1c6593; }
	.top-bar .toggle-topbar.menu-icon a { height:31px; }
	.top-bar-section { text-align:left; padding:20px; }
	.top-bar-section ul li { display:block; padding:0; }
	.top-bar-section ul li:not(:last-child):after { content:''; }
	.top-bar-section li:not(.has-form) a:not(.button), .top-bar-section li.active:not(.has-form) a:not(.button) { padding:0.8em 0.6em; }
}
@media only screen and (max-width: 30em) {
	.logo-text { font-size:23px; }
	.top-bar { height:32px; }
	.top-bar .name { height:35px; }
	.top-bar .toggle-topbar.menu-icon a span::after { width: 13px; box-shadow: 0 0 0 1px #FFFFFF, 0 5px 0 1px #FFFFFF, 0 10px 0 1px #FFFFFF; margin-top:-6px; }
	.top-bar-section ul li > a { font-size:12px; padding:10px 0; }
	
}
@media only screen and (max-width: 20em) { .logo-text { font-size:19px; } }
/*========================================================
						HOME
=========================================================*/
.slider { margin:0; }
.slick-dots { bottom:-20px; left:50%; margin-left:-20px; width:auto; }
.slick-dots li { width:6px; }
/*--------------------Content--------------------*/
.content-wrap { margin-top: 30px; }
.content-wrap .detail { padding:20px; font-family: "Helvetica", Helvetica Neue, Roboto, Arial, sans-serif; }
.content-wrap h4 { 
	background:#f4debd; padding: 0.6em 1.6em;
	font-family: 'Raleway', Helvetica, Open Sans, san-serif; font-size:20px; font-weight:bold; color:#444444; 
}
.content-wrap h5 { font-family: 'Raleway', Helvetica, Open Sans, san-serif; font-size:18px; font-weight:600; }
.content-wrap p { font-size:16px; line-height:22px; }
.content-wrap ol, .content-wrap ul { font-family: "Helvetica", Helvetica Neue, Roboto, Arial, sans-serif; font-size:16px; line-height:22px; margin-left:3.0rem; }
.content-wrap hr { margin: 2.25rem 0 2.1875rem; }

.logo-wrap { text-align:center; margin:15px auto 30px auto; }
ul.logos-show { margin:auto; }
ul.logos-show li { margin-left:-1px; margin-top:-1px; padding:0; }
ul.logos-show li:first-child .loan-logo, ul.logos-show li:first-child .logo-detail { border-top-left-radius:20px; border-bottom-left-radius:20px; }
ul.logos-show li:last-child .loan-logo, ul.logos-show li:last-child .logo-detail { border-top-right-radius:20px; border-bottom-right-radius:20px; }
ul.logos-show .loan-logo { width:100%; height:120px; position:relative; border:1px solid #1C6593; }

.loan-logo:hover .logo-detail { display:inherit; }
.logo-detail { margin-left:1px; position: absolute; top: -1px; left: -1px; width: 100%; height: 120px; background:rgba(28,101,147,0.8); display:none; line-height: 120px; }
.logo-detail p { font-family: 'Open Sans', sans-serif; font-size:14px; font-weight:bold; color:#fff; display:inline-block; line-height:14px; vertical-align:middle; margin:0; }

.logo-mbsb { background:url(../images/logo-mbsb.png) no-repeat center; background-size:60%; }
.logo-petronesa { background:url(../images/logo-petronesa.png) no-repeat center; background-size:60%; }
.logo-koperasi { background:url(../images/logo-koperasi.png) no-repeat center; background-size:60%; }
.logo-rce { background:url(../images/logo-rce.png) no-repeat center; background-size:60%; }
.logo-ukhwah { background:url(../images/logo-ukhwah.png) no-repeat center; background-size:60%; }


.blockquote { 
	font-family: "Helvetica", Helvetica Neue, Roboto, Arial, sans-serif; font-size:18px; font-weight:bold; color:#202020; font-style:italic; text-align:center; 
	position:relative; padding: 0 20px; margin-bottom:15px; margin-top: 10px;
}
.blockquote:before { content: "“"; font-size: 18px; padding-right:10px; }
.blockquote:after { content: "”"; font-size: 18px; padding-left:10px; }
.content-center { margin-top:50px; margin-bottom:50px; text-align:center; }
.semak-button {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#349bb8+0,2189a2+50,187a96+51,349bb8+100 */
	background: #349bb8; 
	background: -moz-linear-gradient(top,  #349bb8 0%, #2189a2 50%, #187a96 51%, #349bb8 100%); 
	background: -webkit-linear-gradient(top,  #349bb8 0%,#2189a2 50%,#187a96 51%,#349bb8 100%); 
	background: linear-gradient(to bottom,  #349bb8 0%,#2189a2 50%,#187a96 51%,#349bb8 100%); 
	padding:12px 10px; border-bottom: 5px solid #05546c; border-radius:5px; margin-top:25px; margin-bottom:25px;
	font-family: 'Raleway', Helvetica, Open Sans, san-serif; font-weight:bold; font-size:25px; color:#fff; text-shadow: 1px 0px 1px rgba(0,0,0,0.5);
}
.semak-button:hover { background:#2F869E; border-bottom: 5px solid #2F869E; }

@media only screen and (max-width: 40em) {
	.content-wrap { margin-top:15px; }
	.content-wrap h4 { font-size:17px; padding: 0.3em 1.1em; }
	.content-wrap h5, .blockquote, .semak-button { font-size:16px; }
	.content-wrap p, .content-wrap ol, .content-wrap ul { font-size:14px; }	
	ul.logos-show .loan-logo { height:70px; background-size:40%; }
	ul.logos-show li:first-child .loan-logo, ul.logos-show li:first-child .logo-detail, 
	ul.logos-show li:last-child .loan-logo, ul.logos-show li:last-child .logo-detail { border-radius:0; }
	.logo-detail { top:-1px; left:-1px; height: 70px; line-height:70px; }
	.logo-detail p { font-size:12px; }
}

.whatsapp-wrap {
    color: #fff;
    background-color: #2ba6cb;
    padding: 16px 23px;
    font-weight: bold;
    margin: 18px 0px;
    box-shadow: 3px 3px 4px #5d88a3;
}


/*========================================================
						SUB
=========================================================*/
.sub-content-wrap { text-align:center; }
.sub-content-wrap h4, .sub-content-wrap p, .sub-content-wrap ul, .sub-content-wrap ol { text-align:left; }
.sub-content-wrap hr { margin: 2.25rem 0 2.1875rem; }
.sub-content-wrap .sub-logo { text-align:center; margin: 10px auto; }
.sub-content-wrap .pinjam-l { text-align:center; margin:0; }
.sub-content-wrap .pinjam-l li { display:inline-block; padding:10px 20px; }
.sub-content-wrap .pinjam-l a { color:#222; text-decoration:underline; }
.sub-content-wrap .pinjam-l a:hover { color:#9e0039; }
@media only screen and (max-width: 40em) {
	.sub-content-wrap p, .sub-content-wrap ol, .sub-content-wrap ul { font-size:15px; }	
	.sub-content-wrap ol, .sub-content-wrap ul { margin-left: 2.0rem; }
	.sub-content-wrap .pinjam-l li { display:block; padding:5px; }
}
/*========================================================
						SEMAK
=========================================================*/
.content-wrap .form-title { font-family: 'Raleway', Helvetica, Open Sans, san-serif; font-size:16px; }
.form-border { margin-bottom:50px; padding:0; }
.form-border .form-bg { background:#fff; padding:30px; margin-bottom:20px; }
.form-border .require-asterisk { position:absolute; top:7px; left:0; font-size:20px; color:#fc1e54; }
.form-border label.error { color:#fc1e54; font-weight:normal; }
.form-border label, .form-border select { margin:0 0 13px 0; }
.form-border label { 
	position:relative; padding:0.5625rem 0 0.5625rem 10px; 
	font-family: 'Raleway', Helvetica, Open Sans, san-serif; font-weight:bold; font-size:15px; 
}
.form-border select { 
	background-color:#fff; border:1px dotted #898989; height:40px; padding-left:15px; outline:0;
	font-family: "Helvetica", Helvetica Neue, Roboto, Arial, sans-serif; font-size:15px; 
}
.form-border input[type="text"], .form-border textarea { 
	background-color:#fff; border:1px dotted #898989; box-shadow:none; height:40px; padding-left:15px;
	font-family: "Helvetica", Helvetica Neue, Roboto, Arial, sans-serif; font-size:15px;  
}
.form-border input[type="file"] { margin:0; outline:0; }
.form-border .remarkfile { font-size:12px; color:#676767; padding:0; }
.form-border .submit-wrap { padding:0; }
.form-border .submit { 
	width: 100%; background:#1c6593; border:none; border-radius:25px; margin-top: 30px; padding: 10px 5px; cursor:pointer; outline:0; 
    font-family: 'Raleway', Helvetica, Open Sans, san-serif; font-weight:bold; font-size: 16px; color: #fff; 
}
.form-border .submit:hover, .form-border .submit:focus, .form-border .submit:active { background: #1B5173; }/*hover*/
.semak_error { border:1px solid #F00; margin-bottom:30px; padding:10px 20px; color:#f00; }
.semak_success { padding:0; }
@media only screen and (max-width: 40em) {
	.form-border { padding: 20px; }
	.form-border label, .form-border select { margin:0 0 3px 0; }
	.form-border label, .form-border select, .form-border input[type="text"], .form-border textarea, .form-border .submit { font-size:14px; }
	input[type="checkbox"] + label, input[type="radio"] + label { margin-right:0; }
}
/*========================================================
						JAWATAN
=========================================================*/
.content-wrap h5.career-apply-title { font-family: 'Raleway', Helvetica, Open Sans, san-serif; font-size:24px; color:#1c6593; text-align:center; }
.jawatan-details { border:1px solid #d7d7d7; padding:18px; margin-bottom:50px; margin-top:10px; }
.remark { position:relative; font-family: 'Raleway', Helvetica, Open Sans, san-serif; font-size:14px; word-wrap:break-word; }
.remark .require-asterisk { position:relative; font-size:25px; }
.remark a { color:#9e0039; }
@media only screen and (max-width: 40em) {
	.jawatan-details { padding:10px; }
	.jawatan-details ul { margin:0 0 10px 10px; }
	.remark { font-size:13px; }
}
/*========================================================
						FOOTER
=========================================================*/
.footer-wrap { background:#e1e1e1; padding: 30px 30px 80px 30px; }
.footer-wrap h6 { font-family: 'Raleway', Helvetica, Open Sans, san-serif; font-weight:bold; color:#202020; border-bottom:1px solid #d7d7d7; padding-bottom:15px; margin-bottom:15px; }
.footer-wrap b, .footer-wrap p { font-family: "Helvetica", Helvetica Neue, Roboto, Arial, sans-serif; font-size:14px; color:#202020; }
.istimewa ul { font-family: "Helvetica", Helvetica Neue, Roboto, Arial, sans-serif; font-size:14px; color:#202020; line-height: 17px; margin:0; }
.istimewa ul li { list-style:none; }
.istimewa ul li:before { content: '|'; padding-right: 10px; color:#2092d9; }
.footer-wrap .contact-detail { font-family: "Helvetica", Helvetica Neue, Roboto, Arial, sans-serif; font-size: 14px; color: #202020; word-wrap: break-word; }
.footer-wrap .contact-detail ul { font-size:14px; color:#202020; word-wrap:break-word; }
.footer-wrap .contact-detail ul li { list-style:circle; line-height: 18px; }
ul.accordion { margin:0; }
.accordion .accordion-navigation > a, .accordion dd > a { 
	background:none; padding:9px 15px; border:1px solid #898989;
	font-family: "Helvetica", Helvetica Neue, Roboto, Arial, sans-serif; font-weight:bold; font-size:14px; color:#202020; 
}
.accordion .accordion-navigation > .content.active, .accordion dd > .content.active, .accordion .accordion-navigation > a:hover, .accordion dd > a:hover, .accordion .accordion-navigation.active > a, .accordion dd.active > a { background:none; }
.accordion ul { list-style: inherit; }
.accordion li { font-family: "Helvetica", Helvetica Neue, Roboto, Arial, sans-serif; font-weight:normal; font-size:12px; color:#202020; line-height: 16px; }
.accordion li.accordion-navigation { padding: 3px 0px;  }
.accordion li.accordion-navigation:first-child { padding-top:0; }
.accordion-navigation > a:after { content: "+"; padding-left: 5px; float: right; font-size: 18px; }
.accordion-navigation.active > a:after { content: "-"; }
@media only screen and (max-width: 40em) {
	.footer-wrap { padding: 30px 20px 80px 20px; }
	.footer-wrap h6 { font-size:15px; padding-top:10px; }
	.footer-wrap b, .footer-wrap p, .istimewa ul, .accordion .accordion-navigation > a, .accordion dd > a { font-size:13px; }
	.footer-wrap .footer-border:not(:last-child) { border-bottom:2px solid #1C6593; padding-bottom: 20px; }
}


    
    






