@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:#179991; }
.blue { color:#037ef7; }

.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:#179991; }
.top-bar-section ul li { background:transparent; }
.top-bar-section li:not(.has-form) a:not(.button) { background:#179991; border-radius:3px; 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:2px 1px; }
.top-bar-section span { display:inline-block; line-height:14px; vertical-align:middle; }
.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:#534741; }

@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; }
	.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; }
.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:#179991; }
/*--------------------Content--------------------*/
.content-wrap { margin-top: 40px; }
.content-wrap h4 { font-family: "Helvetica", Helvetica Neue, Roboto, Arial, sans-serif; font-size:20px; font-weight:600; }
.content-wrap h4:before { 
	content:'l'; /*border-left:3px solid #179991;*/ padding-right:14px;
	font-family: "Helvetica", Helvetica Neue, Roboto, Arial, sans-serif; font-weight:bold; color:#179991; 
}
.content-wrap h5 { font-family: "Helvetica", Helvetica Neue, Roboto, Arial, sans-serif; font-weight:600; }
.content-wrap p { font-family: 'Open Sans', sans-serif; font-size:14px; line-height: 18px; }
.logos-show { text-align:center; margin:0; margin-bottom:20px; }
.logos-show li { display:inline-block; }
.logos-show .loan-logo { width:100px; height:100px; border-radius:50%; border:1px solid #534741; margin:2px 10px; }
.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; }
.logo-detail { position: absolute; top: -1px; left: -1px; width: 100px; height: 100px; border-radius: 50%; background:rgba(83,71,65,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 #534741;
	animation: spinAround 9s linear infinite; -webkit-animation: spinAround 9s linear infinite; -moz-animation: spinAround 9s linear infinite;
	display:none; color:#fff; 
}
@-webkit-keyframes spinAround {
	from { -webkit-transform: rotate(0deg) }
	to { -webkit-transform: rotate(360deg); }
}
.whatsapp-btn { width: 40px; margin-right: 4px; }
.whatsapp-wrap { color: #fff; background-color: #2ba6cb; padding: 16px 0px; font-weight: bold; margin: 18px 0px; box-shadow: 3px 3px 4px #5d88a3; }
a.whatsapp-wrap:hover { color: #eaeaea; }
.row.contact-details { margin: 8px -0.9375em; }
.whatsapp-item { text-align: center; margin-top: 5px; margin-bottom: 6px; }
@-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; }
.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;
}
.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,  #35bdb4 0%, #20a49c 50%, #189a92 51%, #35bdb4 100%);
	background: -webkit-linear-gradient(top,  #35bdb4 0%,#20a49c 50%,#189a92 51%,#35bdb4 100%);
	background: linear-gradient(to bottom,  #35bdb4 0%,#20a49c 50%,#189a92 51%,#35bdb4 100%);
	padding:12px 10px; border-bottom: 5px solid #056a6a; 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; }
.sub-content-wrap h4:before { 
	content:'l'; /*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; }
.sub-content-wrap h5 { font-family: "Helvetica", Helvetica Neue, Roboto, Arial, sans-serif; font-weight:600; }
.sub-content-wrap p { font-family: '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; margin-left:3.0rem; }
.sub-content-wrap hr { margin: 2.25rem 0 2.1875rem; }
.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:30px; 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; }
.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: #179991; border: none; margin-top: 30px; padding: 5px 5px;
    font-family: 'Alegreya Sans', sans-serif; font-size: 16px; color: #fff; cursor: pointer; 
}
.form-border .submit:hover, .form-border .submit:focus, .form-border .submit:active { background: #138079; }
.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; }
.remark { font-family: 'Open Sans', sans-serif; font-size:14px; word-wrap:break-word; }
@media only screen and (max-width: 40em) {
	.jawatan-details { padding:10px; }
	.jawatan-content-wrap ul, .remark { font-size:13px; }
}
/*========================================================
						FOOTER
=========================================================*/
.footer-wrap { background:#464646; padding: 30px 30px 80px 30px; }
.footer-wrap h6 { font-family: "Helvetica", Helvetica Neue, Roboto, Arial, sans-serif; font-weight:600; color:#fff; border-bottom:1px solid #fff; padding-bottom:15px; margin-bottom:15px; }
.footer-wrap b, .footer-wrap p { font-family: 'Open Sans', sans-serif; font-size:14px; color:#fff; }
.footer-wrap .contact-detail { font-family: 'Open Sans', sans-serif; font-size:14px; color:#fff; }
.footer-wrap .contact-detail ul { font-size:14px; color:#fff; word-wrap:break-word; }
.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: '\f105'; 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: '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: "-"; }
/*.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; }
}