@import url(https://fonts.googleapis.com/css?family=Roboto:400,900,700,500,300,100);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800);
body { background:url(../images/bg.jpg); }
.green { color:#51d06d; }
.blue { color:#5d88a3; }

.container { background:#fff; /*border-top:6px solid #5d88a3*/; padding: 4% 0%;; box-shadow:0px 0px 10px rgba(0,0,0,0.2); }
.header-wrap { padding: 0% 0% 2% 2%; }
.logo-wrap { font-family: 'Roboto', san-serif; font-weight:500; font-size:22px; color:#444444; padding:0; padding-left: 3%; }
.header-contact { font-family: "Helvetica", Helvetica Neue, Roboto, Arial, sans-serif; font-size:14px; text-align:right; /*border: 1px solid black*/; padding: 0% 3%; /*background-color: #5d88a3;*/ box-shadow: 0px 0px 30px rgba(174,174,174,0.8); background-color: #f9f9f9; }
.header-contact p { margin: 10px; }
.header-number { font-weight:600; font-size:18px; }

/*--------------------Search--------------------*/
.search-wrap { padding:0; }
.search input[type="search"] { border:none; border-radius:10px; height:42px; box-shadow:inset 0 0 6px rgba(0,0,0,0.1); margin-bottom:6px; }
#search_mini_form { position:relative; }
.search .button { background:transparent; position:absolute; top:-6px; right:-15px; color:#179991; }
.search .button:hover { background:transparent; color:#22746f; }
.search .button:active { display:none; }
.search .search-result::-webkit-search-cancel-button { display:none; }
/*--------------------Navi--------------------*/
.top-bar { background:#5d88a3; }
.top-bar-section ul li { background:transparent; }
.top-bar-section li:not(.has-form) a:not(.button) { background:#5d88a3; border-radius:1px; text-align:center; }
.top-bar-section ul li:hover:not(.has-form) > a  { background:#179991; }
.top-bar-section ul li > a { font-family: "Helvetica", Helvetica Neue, Roboto, Arial, sans-serif; font-size:14px; text-transform:uppercase; }
[class*="block-grid-"] > li {padding: 0; border: 1px solid #465c69;}
.top-bar-section span { display:inline-block; line-height:14px; vertical-align:middle; font-weight: 600; }
.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:#61aed1; }
section.top-bar-section {}
.row { margin: 0 auto; max-width: 80em; width: 100%;}

@media only screen and (min-width: 940px) {
	.top-bar, .top-bar-section ul li { background:none; }
	.name { display:none; }
}
@media only screen and (max-width: 50em) {
	.container { padding: 25px 10px 0 10px; }
	.logo-wrap, .header-contact { text-align:center; box-shadow: none;}
	.logo-wrap { font-size:20px; }
	.header-number { font-size:16px; }
}
@media only screen and (max-width: 30em) {
	.top-bar { height:35px; line-height:35px; }
	.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; }
}


/*========================================================
						HOME
=========================================================*/
.slider { margin:0; padding:0 }
.slick-dots { bottom:-20px; left:50%; margin-left:-20px; width:auto; }
.slick-dots li { width:6px; }
/*.marquee-wrap { background:#179991; padding:2px 0; }*/
.marquee { font-family: "Helvetica", Helvetica Neue, Roboto, Arial, sans-serif; font-size:12px; font-weight:600; color:#fff; line-height:30px; background:#5d88a3; }
/*--------------------Content--------------------*/
.content-wrap { margin-top: 40px; padding: 1% 2%; }
.content-wrap h4 { font-family: "Helvetica", Helvetica Neue, Roboto, Arial, sans-serif; font-size:20px; font-weight:600; text-align: center; padding-bottom: 2%; border-bottom: 2px dotted #e5e5e5; margin-bottom: 3%;}
.content-wrap h4:before { 
	content:''; /*border-left:3px solid #179991;*/ padding-right:14px;
	font-family: "Helvetica", Helvetica Neue, Roboto, Arial, sans-serif; font-weight:bold; color:#2c4770; 
}
.content-wrap h5 { font-family: "Helvetica", Helvetica Neue, Roboto, Arial, sans-serif; font-weight:600; margin: 50px 0px; }
.content-wrap p { font-family: 'Verdana',Open Sans, sans-serif; font-size:14px; line-height: 18px; }
.column.content-item { border: 1px solid rgba(0,0,0,0.1); padding: 3% 5%; }
.logos-show { text-align:center; margin: 50px 0px; padding: 3% 3%; box-shadow: 0px 0px 30px rgba(0,0,0,0.1); }
.logos-show li { display:inline-block; }
.logos-show .loan-logo { width:100px; height:100px; border-radius:50%; border:2px solid #152d54; margin: 1% 3%; }
.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%; }
.loan-logo { position:relative; }
.loan-logo:hover .border-spin, .loan-logo:hover .logo-detail { display:inherit; }
.loan-logo:hover { transform: scale(1.15,1.15); }
.logo-detail { position: absolute; top: -1px; left: -1px; width: 100px; height: 100px; border-radius: 50%; background:rgba(77,101,141,0.9);; display:none; line-height: 100px; }
.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; }
.border-spin {    
    position: absolute; top: -6px; left: -6px; width: 110px; height: 110px; border-radius: 50%; box-shadow: 0 0 0 2px #4d658d;
	animation: spinAround 9s linear infinite; -webkit-animation: spinAround 9s linear infinite; -moz-animation: spinAround 9s linear infinite;
	display:none; color:#fff; 
}
.whatsapp-btn { width: 40px; margin-right: 4px; }
.whatsapp-wrap { color: #fff; background-color: #2ba6cb; padding: 16px 20px; font-weight: bold; margin: 18px 0px; box-shadow: 3px 3px 4px #5d88a3; }
a.whatsapp-wrap:hover { color: #eaeaea; }
.contact-details ul { list-style-type: none;}
.row.contact-details { margin: 8px -0.9375em; }
.whatsapp-item { text-align: center; margin-top: 5px; margin-bottom: 6px; }
.contact-details b { margin-left: 10px; }

.info-marquee { padding: 0px;}
.topbarnav{ padding: 0px;}
@-webkit-keyframes spinAround {
	from { -webkit-transform: rotate(0deg) }
	to { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes spinAround {
	from { -moz-transform: rotate(0deg) }
	to { -moz-transform: rotate(360deg); }
}
@keyframes spinAround {
	from { transform: rotate(0deg) }
	to { transform: rotate(360deg); }
}
.content-wrap ol { font-family: 'Open Sans', sans-serif; font-size:14px; line-height: 18px; margin-left:3.0rem; }
.content-wrap hr { margin: 2.25rem 0 2.1875rem; box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.2); height: 10px;}
.blockquote { 
	font-family: 'Open Sans', sans-serif; font-size:18px; font-weight:bold; color:#222; font-style:italic; text-align:center; 
	position:relative; padding: 0 20px; margin-bottom:15px; margin-top: 40px; padding: 3%; box-shadow: 0px 0px 30px rgba(0,0,0,0.1);}
.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/#35bdb4+0,20a49c+50,189a92+51,35bdb4+100 */
	background: #35bdb4; /* Old browsers */
	background: -moz-linear-gradient(top,  #4d658d 0%, #2c4770 50%,#2c4770 51%,#152d54 100%);
	background: -webkit-linear-gradient(top,  #4d658d 0%, #2c4770 50%,#2c4770 51%,#152d54 100%);
	background: linear-gradient(to bottom, #4d658d 0%, #2c4770 50%,#2c4770 51%,#152d54 100%);
	padding:12px 10px; border-bottom: 5px solid #051938; border-radius:5px; margin-top:25px; margin-bottom:25px;
	font-family: 'Open Sans', sans-serif; font-weight:900; font-size:18px; color:#fff; text-transform:uppercase; text-shadow: 1px 0px 1px rgba(0,0,0,0.5);
}




@media only screen and (min-width: 768px) and (max-width: 940px){
.whatsapp-wrap { padding: 16px 0px;  margin: 0px;  }
}

@media only screen and (max-width: 40em) {
	.logos-show .loan-logo { width:70px; height:70px; }
	.logo-detail { top:-1px; left:-1px; width: 70px; height: 70px; line-height:70px; }
	.logo-detail p { font-size:12px; }
	.border-spin { top:-6px; left:-6px; width: 80px; height: 80px; }
	.marquee-wrap { padding:0; }
	.marquee { font-size:10px; }
	.content-wrap { margin-top:30px; }
	.content-wrap h4 { font-size:18px; }
	.content-wrap h5, .blockquote, .semak-button { font-size:16px; }
	.content-wrap p, .content-wrap ol { font-size:13px; }	
}
/*========================================================
						SUB
=========================================================*/
.details-content-wrap { margin-top:12px; }
.sub-content-wrap { /*border:1px solid #d7d7d7;*/ padding:0 30px 30px 30px; }
.sub-content-wrap h4 { font-family: "Helvetica", Helvetica Neue, Roboto, Arial, sans-serif; font-size:20px; font-weight:600; text-align: center; margin-bottom: 3%;}
.sub-content-wrap h4:before { 
	content:''; /*border-left:3px solid #179991;*/ padding-right:14px;
	font-family: "Helvetica", Helvetica Neue, Roboto, Arial, sans-serif; font-weight:bold; color:#179991; 
}
.sub-content-wrap h4.main-title { border-bottom:1px solid #d7d7d7; padding:10px 0; margin:10px 0; text-align: center;}
.sub-content-wrap h5 { font-family: "Helvetica", Helvetica Neue, Roboto, Arial, sans-serif; font-weight:600; }
.sub-content-wrap p { font-family: 'Verdana',Open Sans, sans-serif; font-size:14px; line-height: 18px; }
.sub-content-wrap ol, .sub-content-wrap ul { font-family: 'Open Sans', sans-serif; font-size:14px; line-height: 18px; padding: 3%; box-shadow: 0px 0px 30px rgba(174,174,174,0.2);}
.sub-content-wrap hr { margin: 6.25rem 0 2.1875rem; height: 10px; box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.1); }
.sub-content-wrap .sub-logo { text-align:center; padding:30px 0; }
.sub-content-wrap .pinjam-l a { color:#222; text-decoration:underline; }
.sub-content-wrap .pinjam-l a:hover { color:#179991; }
@media only screen and (max-width: 40em) {
	.sub-content-wrap h4 { font-size:18px; }
	.sub-content-wrap h5 { font-size:16px; }
	.sub-content-wrap p, .sub-content-wrap ol, .sub-content-wrap ul { font-size:13px; }	
}
/*========================================================
						SEMAK
=========================================================*/
.content-wrap .form-title { font-size:15px; }
.form-border { border:1px solid #d7d7d7; padding: 40px 90px;; margin-bottom:50px; }
.form-border .require-asterisk { color:#fc1e54; }
.form-border label.error { color:#fc1e54; font-weight:normal; }
.form-border label, .form-border select { font-family: 'Open Sans', sans-serif; margin:0 0 13px 0; }
.form-border label { font-family: 'Open Sans', sans-serif; font-weight:bold; font-size:15px; }
.form-border select { background-color:#ebebeb; border:none; height:40px; padding-left:15px; }
.form-border input[type="text"], .form-border textarea { background-color:#ebebeb; border:none; box-shadow:none; height:40px; padding-left:15px; margin-bottom: 4%; }
.form-border input[type="file"] { margin:0; outline:0; }
.form-border .remarkfile { font-size:12px; color:#a7a7a7; padding:0; }
.form-border .submit { 
	width: 100%; background: #5d88a3; border: none; margin-top: 30px; padding: 15px 15px;
    font-family: 'Alegreya Sans', sans-serif; font-size: 16px; color: #fff; cursor: pointer; border-radius: 30px;
}
.form-border .submit:hover, .form-border .submit:focus, .form-border .submit:active { background: #6a9ab8; }
.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 { font-size:14px; }
	input[type="checkbox"] + label, input[type="radio"] + label { margin-right:0; }
}
/*========================================================
						JAWATAN
=========================================================*/
.jawatan-content-wrap ul { font-family: 'Open Sans', sans-serif; font-size:14px; }
.jawatan-content-wrap .career-apply-title { text-align:center; text-transform:uppercase; }
.jawatan-details { /*border:1px solid #d7d7d7;*/ padding:18px; margin-bottom:50px; margin-top:10px; box-shadow: 0px 0px 15px rgba(223,223,223,0.6);}
.remark { font-family: 'Open Sans', sans-serif; font-size:14px; word-wrap:break-word; }
.remark a { font-weight: bold; color: #5d88a3; }
@media only screen and (max-width: 40em) {
	.jawatan-details { padding:10px; }
	.jawatan-content-wrap ul, .remark { font-size:13px; }
}

/*========================================================
						FOOTER
=========================================================*/
.footer-wrap { background:#666467; padding: 30px 30px 30px 30px; }
.footer-wrap h6 { font-family: "Helvetica", Helvetica Neue, Roboto, Arial, sans-serif; font-weight:600; color:#fff; border-bottom: 2px solid #f6f6f6;; padding-bottom:15px; margin-bottom:15px; }
.footer-wrap b, .footer-wrap p { font-family: 'Verdana',Open Sans, sans-serif; font-size:14px; color:#fff; }
.footer-wrap .contact-detail { font-family: 'Verdana',Open Sans, sans-serif; font-size:14px; color:#fff; }
.footer-wrap .contact-detail ul { font-size:14px; color:#fff; word-wrap:break-word; }
.footer-wrap .medium-4.small-12.column:nth-child(2) { background-color: #484549;}
.footer-wrap .medium-4.small-12.column { padding: 2% 4%;;}
.istimewa ul { font-family: 'Open Sans', sans-serif; font-weight:500; font-size:14px; color:#fff; line-height: 17px; margin:0; }
.istimewa ul li { list-style:none; }
.istimewa ul li:before { font-family: FontAwesome; content: '\f101'; padding-right: 10px; }
ul.accordion { margin:0; }
.accordion .accordion-navigation > a, .accordion dd > a { 
	background:none; padding:0px;
	font-family: 'Open Sans', sans-serif; font-weight:700; font-size:14px; color:#fff; 
}
.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: 'Verdana',Open Sans, sans-serif; font-size:12px; color:#fff; line-height: 16px; }
.accordion li.accordion-navigation { padding: 9px 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: 1250px) {
	.whatsapp-btn { width: 30px;}
	.whatsapp-wrap { padding: 14px 3px;}
}
@media only screen and (min-width: 800px) and (max-width: 1100px) {
	.whatsapp-item { text-align: right; }
}


/*.accordion .accordion-navigation > .content { height: 0; display: block; opacity: 0; padding: 0 0.9375rem; transition: padding 0.5s ease, opacity 0.15s ease; }
.accordion .accordion-navigation > .content.active { height: 100%; opacity: 1; padding: 0.9375rem; transition: all 0.25s ease; }*/
@media only screen and (max-width: 40em) {
	.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; }
}

/* .fa:before { content: "\f124"; margin-right: 10%; }    */
    
@media only screen and (min-width: 40.0625em){
	h1 {
		font-size: 1.0rem;
	}
}