/*
Theme Name: Credit Corp Financial Services
Theme URI: https://www.ccfs.com.au/
Author: Migrated to WordPress (original design by Credit Corp Group)
Description: Classic WordPress theme rebuilt from the original ccfs.com.au static site. Faithful 960px corporate layout for Credit Corp Financial Services, with templates for the home page, standard content pages, the products page, the contact page and the payments page.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ccfs
*/

@charset "utf-8";

/* =====================================================================
   1. ORIGINAL SITE STYLES  (ccfs.com.au — styles.css, paths rewritten)
   ===================================================================== */

/* ========== RESET/GLOBAL ========== */

html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, pre,

dd, dl, dt, a, cite, code, img, tt, legend, fieldset, label {margin: 0; padding: 0; text-align:left;}

img, a img, form, fieldset {border: 0;}

html, body 		{height: 100%;}

/*Opera Fix*/

body:before		{

				content:"";

				height:100%;

				float:left;

				width:0;

				margin-top:-32767px;/

				}

body			{

				font-size:12px;

				font-family:Arial, Helvetica, sans-serif;

				line-height:1.3em;

				color:#586b77;

				background:#fff;

				}

body#main #container	{font-size:14px;}

				

a				{

				color:#90CB22;

				text-decoration:underline;

				}

a:hover 		{

				text-decoration:none;

				color:#37424A;

				}

p				{

				margin:0 0 1.5em 0;

				padding:0;

				}

small			{font-size:0.8em;}

h1				{

				font: 60px Arial, Helvetica, sans-serif;

				color:#37424a;

				}

h2				{

				font: 20px Arial, Helvetica, sans-serif;

				line-height:24px;

				color:#90CB22;

				}

h3				{

				font: bold 16px Arial, Helvetica, sans-serif;

				color:#586b77;

				margin-bottom:1em;

				}

.column_wide h3 a {

	color: #90CB22;

}

.column_wide h3 a:hover {

	color: #586b77;

}

				

h4				{

				font: bold 14px Arial, Helvetica, sans-serif;

				color:#37424a;

				margin-bottom:15px;

				}

h5				{

				font: bold 13px Arial, Helvetica, sans-serif;

				color:#292929;

				margin-bottom:5px;

				}

h6				{

				font: bold 12px Arial, Helvetica, sans-serif;

				color:#292929;

				margin-bottom:5px;

				}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a	{

				color:#292929;

				text-decoration:none;

				}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover	{

				color: #bca474;

				text-decoration:none;

				}

				

ul				{

				margin:0;

				padding:0 0 20px;

				list-style:none;

				}

				

ul li			{

				margin:0;

				padding:0;

				}

ol ol li		{list-style-type: lower-alpha;}

				

pre				{

				font:normal 12px/22px Arial, Helvetica, sans-serif;

				color:#000;

				padding:11px;

				border:1px solid #caccc7;

				background:url(images/pre_px.gif) 0 -11px;

				}

				

.code			{

				display:block;

				font:normal 10px/12px Arial, Helvetica, sans-serif;

				margin-top:10px;

				}

address			{

				padding-bottom:20px;

				font-style:normal;

				}

hr				{

				display:block;

				height:1px !important;

				overflow:hidden;

				clear:both;

				border:none;

				background:#caccc7;

				margin:20px 0;

				}

				

				

td {

	

	vertical-align: top;

}

				

/* ---- Default Form Elements ---- */

input, select, textarea	{

				width:auto;

				padding:4px 5px;

				font-size:12px;

				font-family:Arial, Helvetica, sans-serif;

				color:#333331;

				background:none;

				border:1px solid #333331;

				}

				

input[type=text]{height:16px;}

select			{padding:2px;}

textarea		{overflow:hidden;resize:none;}

				

input[type=text]:hover, textarea:hover	{}

input[type=text]:focus, textarea:focus	{}

input[type=submit],

input.submit	{

				width:auto;

				position:relative;

				padding:5px 12px;

				cursor:pointer;

				outline:none;

				font-size:12px;

				font-weight:bold;

				font-style:italic;

				text-align:center;

				color:#bca474;

				border:none;

				background: transparent;

				}

				

input[type=submit]:hover,

input[type=submit]:focus	{

				color:#292929;

				}

/* ========== GENERAL STRUCTURE ========== */

/* ---- Top Area ---- */

.top_full		{

				width:100%;

				position:relative;

				}

#top			{

				width:960px;

				min-height:90px;

				position:relative;

				margin:0 auto;

				}

/* -- logo -- */

a.logo			{

				padding-top:26px;

				padding-left:13px;

				display:block;

				outline:none;

				}

.logo_pos{

	float: left;	

}

.search_pos{

	float: left;

	padding-left:490px;

	padding-top:35px;	

}

.search_bg{

	background-image:url(images/search_bg.gif);

	width: 167px;

	height: 28px;		

}

.search_bg_grey{

	background-image:url(images/search_greybg.gif);

	width: 758px;

	height: 86px;		

}

.search_bg_grey_padding{

	padding: 27px;	

}

.search_padding{

	padding: 20px;

	width: 758px;	

}

.search_padding_2{

	padding-left: 20px;

	width: 738px;

}

.search_padding_2 ol{

	margin: 0;

	font-size: 14px;

	font-weight:bold;

	color:#90CB22;	

}

.search_padding_2 ol li{

	padding-top: 10px;

}

.search_padding_2 ol  .normaltext{

	font-size: 12px;

	color:#344048;	

	text-decoration: none;

}

.normaltext:hover{

	color:#90CB22;	

	text-decoration: none;

}

.linktext{

	font-size: 12px;

	color:#90CB22;	

	text-decoration: none;

}

.linktext:hover{

	color:#344048;	

	text-decoration: none;

}

.searchinput{

	border:0px solid #fff; 

	color:#000;

}

.searchinput:hover{

	border:0px solid #fff; 

	color:#000;

}

.search_input{

	padding-top: 2px;

	float: left;

	width: 143px;	

}

.search_input_button{

	float: left;	

}

.search_submit{

	padding: 0;

	border: 0;	

}

.pagenumbers_container{

	border: 0px solid red;

	width: 758px;

	float: left;	

}

.clr{

	clear: left;	

}

.pagenumbers{

	font-size: 12px;

	color:#344048;

	float: right;	

}

/* ---- Main Menu ---- */

.nav_full		{

				width:100%;

				background:url(images/menu_px.gif) center top repeat-y;

				}

				

#nav			{

				width:960px;

				margin:0 auto;

				position:relative;

				z-index:50;

				background:#374249;

				}

				

.menu			{

				margin:0;

				padding:0;

				list-style:none;

				}

				

.menu li		{

				margin:0 1px 0 0;

				padding:0;

				float:left;

				font-family:Arial, Helvetica, sans-serif;

				font-size:18px;

				}

				

.menu li a		{

				color:#fff;

				text-decoration:none;

				display:block;

				padding:8px 18px;

				}

				

.menu li a:hover,

.menu li a.active{

				color:#fff;

				text-decoration:none;

				background:#1f272b;

				}

/* ---- Header Slider ---- */

.header_full	{

				width:100%;

				background:url(images/head_bg.png) center bottom no-repeat;

				}

.header_search	{

				width:100%;

				background:url(images/head_bg_search.png) center top no-repeat;

				}				

#header			{

				width:960px;

				height:300px;

				margin:0 auto;

				position:relative;

				z-index:10;

				background:#fff;

				}

#header_search			{

				width:960px;

				height:200px;

				margin:0 auto;

				position:relative;

				z-index:10;

				background:#fff;

				}				

#header_sub		{

				width:960px;

				height:200px;

				margin:0 auto;

				position:relative;

				background:#fff;

				}

#header_sub h1	{

				position:absolute;

				bottom:5px;

				left:20px;

				}

/* ---- Content / Layout ---- */

				

.container_full	{

				width:100%;

				position:relative;

				background:url(images/content_px.gif) center top repeat-y;

				}

				

#container		{

				width:960px;

				min-height:420px;

				height: 100% auto;

				display:table;

				margin:0 auto;

				background-color: #fff;

				}

				

#main #container,

#sp #container	{

				background-image:url(images/cont_bg.gif);

				background-position: bottom;

				background-repeat: repeat-x;

				}

				

/* ---- FOOTER SIDEBAR ---- */

#fsb			{

				width:940px;

				min-height:45px;

				margin:0 auto;

				padding:20px 0 20px 20px;

				}

#main #fsb		{

				width:920px;

				padding:38px 20px;

				}

				

/* ---- FOOTER ---- */

.footer_full	{

				width:100%;

				background:url(images/foot_px.gif) center top repeat-y;

				}

#footer			{

				width:920px;

				min-height:180px;

				margin:0 auto;

				padding:25px 20px;

				font-size:12px;

				line-height:15px;

				color:#586b77;

				background:#eef1f4;

				}

				

#footer a		{

				color:#586b77;

				text-decoration:none;

				}

				

#footer a:hover	{

				color:#90CB22;

				text-decoration:none;

				}

				

#footer .column {

				width:162px;

				margin-right:20px;

				float:left;

				}

				

#footer .column li {

				margin:0 0 5px;

				padding:0 0 0 8px;

				background:url(images/arr2.png) 0 4px no-repeat;

				}

				

#footer .copy	{float:right;}

				

/* ========== PAGES STYLES&LAYOUTS ========== */

.column1		{

				width:344px;

				padding:33px 20px;

				float:left;

				position:relative;

				z-index:50;

				}

.column2		{

				width:267px;

				padding:33px 10px;

				float:left;

				position:relative;

				}

.column3		{

				width:269px;

				padding:33px 10px;

				float:left;

				position:relative;

				}

.column4		{

				width:172px;

				padding:33px 10px;

				float:left;

				position:relative;

				}

.column5		{

				width:374px;

				padding:33px 0 33px 10px;

				float:left;

				position:relative;

				}

.column6		{

				width:546px;

				padding:33px 20px;

				float:left;

				position:relative;

				}

.column_wide	{

				width:920px;

				padding:20px;

				position:relative;

				}

				

/* ---- Home Page ---- */

.box1, .box2, .box3 {

				font-size:34px;

				line-height:34px;

				font-family:Arial, Helvetica, sans-serif;

				}

.box1			{

				width:344px;

				height:76px;

				padding:12px 20px;

				overflow:hidden;

				float:left;

				color:#fff;

				background:url(images/px1.gif) top left repeat-y #90CB22;

				}

.box2			{

				width:267px;

				height:76px;

				padding:12px 10px;

				overflow:hidden;

				float:left;

				color:#90CB22;

				background:url(images/px2.gif) top left repeat-y #586a76;

				}

.box3			{

				width:269px;

				height:76px;

				padding:12px 10px;

				overflow:hidden;

				float:left;

				color:#37424a;

				background:url(images/px3.gif) top left repeat-y #eff2f4;

				}

.contact_footer	{

				float:right;

				font-family:Arial, Helvetica, sans-serif;

				font-size:34px;

				line-height:34px;

				padding:6px 0 0 0;

				}

.green			{color:#90CB22;}

a.online_enqiry	{

				width:165px;

				height:44px;

				display:block;

				text-indent:-9999px;

				color:#37424a;

				background-image:url(images/online_enquiry.png);

				background-position: 0 0;

				background-repeat: no-repeat;

				}

a:hover.online_enqiry	{background-position:0 -47px;}

a.contact_us	{

				width:220px;

				height:44px;

				display:block;

				text-indent:-9999px;

				color:#37424a;

				background-image:url(images/contact_us_btn.png);

				background-position: 0 0;

				background-repeat: no-repeat;

				}

a:hover.contact_us	{background-position:0 -44px;}

a.apply_online	{

				width:152px;

				height:44px;

				margin:10px 0;

				display:block;

				text-indent:-9999px;

				color:#37424a;

				background-image:url(images/apply_online_btn.png);

				background-position: 0 0;

				background-repeat: no-repeat;

				}

a:hover.apply_online	{background-position:0 -44px;}

/* ---- About Page ---- */

#fsb .column1	{

				width:192px;

				margin-right:20px;

				padding:0;

				float:left;

				}

				

.hover_box		{

				width:160px;

				height:180px;

				display:block;

				position:relative;

				float:left;

				padding:14px;

				overflow:hidden;

				border:1px solid #dee0e3;

				}

				

a.hover_box		{

				color:#586b77;

				text-decoration:none;

				}

				

.last_box		{margin-left:-1px;}

				

.hover_box:hover	{border:1px solid #90CB22; z-index:100;}

.hover_box:hover:before,

.hover_box:hover .before	{

				content:' ';

				before:' ';

				width:186px;

				height:206px;

				position:absolute;

				z-index:-1;

				top:0;

				left:0;

				border:1px solid #90CB22;

				}

.hover_box b	{

				display:block;

				font-size:14px;

				color:#90CB22;

				}

#fsb .thumb		{

				width:158px;

				height:118px;

				display:block;

				overflow:hidden;

				border:1px solid #dee0e3;

				margin-bottom:6px;

				}

#fsb .column2	{

				width:auto;

				margin-right:20px;

				padding:0;

				float:left;

				}

#fsb .column22	{

				width:auto;

				margin-right:10px;

				padding:0;

				float:left;

				}

#fsb .column3	{

				width:auto;

				padding:0;

				float:left;

				}

				

/* ---- Payment Page ---- */

a.process_credit_card	{

				width:225px;

				height:44px;

				display:block;

				text-indent:-9999px;

				color:#37424a;

				background-image:url(images/precess_credit_card.png);

				background-position: 0 0;

				background-repeat: no-repeat;

				}

a:hover.process_credit_card	{background-position:0 -46px;}

				

/* ---- Offers Page ---- */

.pointer		{

				width:230px;

				height:260px;

				float:left;

				position:relative;

				margin-right:24px;

				margin-left:-20px;

				bottom:-20px;

				overflow:hidden;

				display:block;

				background:url(images/offer_pointer.jpg) 0 0 no-repeat;

				}

.auto_loan_footer {

    width:311px;

    height:251px;

    float:left;

    position:relative;

    margin-left:-20px;

    bottom:-20px;

    overflow:hidden;

    display:block;

    background:url(images/img_autoloan_redcar.jpg) 0 0 no-repeat;

}

.approved		{

				width:245px;

				height:260px;

				float:left;

				position:relative;

				margin-right:12px;

				margin-left:-20px;

				overflow:hidden;

				display:block;

				background:url(images/stopwatch.jpg) 0 0 no-repeat;

				}

				

.two_days		{

				width:220px;

				height:140px;

				position:relative;

				overflow:hidden;

				display:block;

				text-indent:-9999px;

				background:url(images/fast-response.png) 0 0 no-repeat;

				}

.get_back_box	{

				width:290px;

				float:left;

				margin-right:20px;

				}

.get_back_box h2	{

				color:#37424a;

				margin-bottom:20px;

				}

.get_back_box h2.smaller	{

				font-size:18px;

				line-height:22px;

				}

a.get_back		{

				width:225px;

				height:44px;

				display:block;

				text-indent:-9999px;

				color:#37424a;

				background-image:url(images/get_back.png);

				background-position: 0 0;

				background-repeat: no-repeat;

				}

a:hover.get_back	{background-position:0 -46px;}

.auto_loan_box	{

    width:225px;

    float:left;

    margin-right:20px;

}

.auto_loan_box h2	{

    color:#37424a;

    margin-bottom:20px;

}

.auto_loan_box h2.smaller	{

    font-size:18px;

    line-height:22px;

}

a.get_auto_loan		{

    width:225px;

    height:44px;

    display:block;

    text-indent:-9999px;

    color:#37424a;

    background-image:url(images/btn_autoloan_signup_0.png);

    background-position: 0 0;

    background-repeat: no-repeat;

}

a:hover.get_auto_loan	{    background-image:url(images/btn_autoloan_signup_1.png);}

a.id_like_to_apply		{

				width:270px;

				height:44px;

				display:block;

				text-indent:-9999px;

				color:#37424a;

				background-image:url(images/idlike_to_apply.png);

				background-position: 0 0;

				background-repeat: no-repeat;

				}

a:hover.id_like_to_apply	{background-position:0 -44px;}

/* ---- Online Calculator ---- */

.calculator		{

				width:354px;

				margin-bottom:25px;

				}

.calc_title		{

				width:354px;

				height:37px;

				overflow:hidden;

				text-indent:-9999px;

				background:url(images/calc_title.png) 0 0 no-repeat;

				}

.calc_body		{

				padding:8px 12px;

				background:#e2e3e4;

				border-radius:0 0 5px 5px !important;

				-moz-border-radius:0 0 5px 5px !important;

				-khtml-border-bottomleft-radius:5px !important;

				-khtml-border-bottomright-radius:5px !important;

				-webkit-border-radius:0 0 5px 5px !important;

				}

.calc_body p	{

				margin:0 0 8px;

				padding:0 0 8px;

				display:block;

				position:relative;

				*position:static;

				z-index:100;

				border-bottom:1px solid #c9cacc;

				}

.calc_body p.last	{

				margin:0;

				padding:0;

				border-bottom:none;

				}

.calc_body p.last:after,

.calc_body p.last.after	{

				border-bottom:none;

				}

.calc_body p:after,

.calc_body p.after	{

				width:100%;

				content:"";

				position:absolute;

				left:0;

				bottom:-2px;

				border-bottom:1px solid #f1f1f1;

				}

.calc_body .row	{margin:0 0 8px;}

.calc_body label	{

				font-weight:bold;

				padding:4px 0 0;

				float:left;

				}

.calc_body span.right	{

				width:175px;

				float:right;

				}

.calc_body input[type=text],

.calc_body select	{

				width:160px;

				color:#586b77;

				background:#fff;

				}

.calc_body span.dollar	{

				width:175px;

				display:block;

				position:relative;

				}

.calc_body span.dollar:before,

.calc_body span.dollar.before	{

				content:"$";

				font-weight:bold;

				position:absolute;

				left:-1em;

				top:4px;

				}

				

input.calculate		{

				width:172px;

				height:30px;

				cursor:pointer;

				overflow:hidden;

				border:none;

				text-indent:-9999px;

				*text-indent:0;

				*line-height:9999px;

				background:url(images/btn_calc.png) 0 0 no-repeat;

				}

				

input:hover.calculate	{

				background:url(images/btn_calc.png) 0 -30px no-repeat;

				}

				

#week, #month, #fort{background:#fff; padding:4px 5px; width:160px; border:1px solid #586b77; color:#586b77; margin-right:3px;}

.displaymt		{

				display:block;

				height:15px;

				margin-bottom:6px;

				padding:2px 2px 2px 28px;

				font: 12px Arial, Helvetica, sans-serif;

				color:#891f11;

				background:url(images/error.gif) 5px 2px no-repeat #fae2e3;

				border:1px solid #fac2c4;

				}

/* ========== STYLED ELEMENTS ========== */

.clear			{

				display:block;

				clear:both;

				height:0 !important;

				overflow:hidden;

				}

.alignleft		{float:left;}

.alignright		{float:right;}

.aligncenter	{

				width:auto;

				display:block;

				margin:0 auto;

				}

.alignleft 		{

				margin-right:10px;

				margin-bottom:5px;

				}

				

.alignright		{

				margin-left:10px;

				margin-bottom:5px;

				}

.aligncenter	{margin:0 auto 10px;}

a.more			{

				display:inline-block;

				height:17px;

				padding-right:22px;

				font-weight:bold;

				color:#90CB22;

				text-decoration:none;

				background:url(images/arr.png) 100% 0 no-repeat;

				}

a:hover.more	{

				color:#374249;

				text-decoration:none;

				}

				

/* ---- Breadcrumbs ---- */

				

.breadcrumbs	{

				position:absolute;

				top:14px;

				left:20px;

				font-size:11px;

				color:#37424a;

				}

				

.breadcrumbs ul	{

				margin:0;

				padding:0;

				}

				

.breadcrumbs li	{

				position:relative;

				display:block;

				float:left;

				padding-left:10px;

				vertical-align:top;

				}

				

.breadcrumbs li:before,

.breadcrumbs li .before	{

				position:absolute;

				content:'/';

				before: '/';

				color:#586b77;

				top:0;

				left:3px;

				*left:2px;

				}

				

.breadcrumbs li:first-child	{padding-left:0;}

				

.breadcrumbs li:first-child:before,

.breadcrumbs li:first-child .before	{

				display:none;

				}

				

.breadcrumbs a	{

				color:#586b77;

				text-decoration:none;

				}

				

.breadcrumbs a:hover	{

				color:#37424a;

				text-decoration:none;

				}

/* ---- Ordered/Unordered Lists ---- */

				

ul.unordered li	{

				color:#586b77;

				padding:0 0 0 34px;

				background:url(images/bullet.gif) 14px 5px no-repeat;

				}

				

/* ---- Lightbox Contact Form ---- */

				

.lightbox		{

				width:300px;

				height:auto;

				padding:15px 25px;

				border:5px solid #90CB22;

				}

				

.lightbox_get_back	{

				width:300px;

				height:auto;

				padding:15px 25px 15px 285px;

				border:5px solid #90CB22;

				border-left:none;

				background:url(images/first_step_pic.jpg) 0 0 no-repeat;

				}

				

.lightbox_Start_loan	{

				width:300px;

				height:auto;

				padding:15px 25px 15px 285px;

				border:5px solid #90CB22;

				border-left:none;

				background:url(images/loan_ligntbox_bg.jpg) 0 0 no-repeat;

				}

				

.lightbox_start_loan span.required	{

				color:#f33 !important;

				}

				

.lightbox_start_loan p	{

				margin:0 0 12px;

				}

				

#contact h2		{

				font-size:34px;

				text-transform:uppercase;

				margin-bottom:20px;

				}

#contact .double-field div label {

    width: 145px;

}

#contact .double-field div {

                float: left;

                width: 145px;

}

#contact .half-input {

    width: 145px;

}

#contact .double-field input[type=text].half-input	{

    width:128px;

}

#contact .double-field select.half-input {

    height:24px;

}

#contact .double-field {

    width: 300px;

    clear: both;

}

#contact input[type=text]	{

				width:288px;

				}

#contact select	{

				width:300px;

				}

				

input.submit	{

				width:110px;

				height:30px;

				float:right;

				overflow:hidden;

				border:none;

				text-indent:-9999px;

				background-image:url(images/submit_btn.png);

				background-position:0 0;

				background-repeat:no-repeat;

				}

				

input:hover.submit	{background-position:0 -30px;}

.pap {

	height: 26px;

}

.pap label, .pap input {

	float: left;

}

.pap label {

	text-indent: 6px;

	line-height: 20px;

}

.lightbox_start_loan p.captcha-desc {

	margin: 0 0 6px;

    width: 295px;

}

/* ---- MoneyStart Loan Form ---- */

.content_submenu	{

				margin:0;

				padding:0;

				list-style:none;

				}

.content_submenu li	{

				margin:0;

				padding:0;

				float:left;

				font-size:16px;

				}

.content_submenu li:first-child	{

				margin:0 15px 0 0;

				padding:0 15px 0 0;

				border-right:1px solid #abb5bb;

				}

.content_submenu li a	{

				color:#586b77;

				text-decoration:none;

				}

.content_submenu li a:hover,

.content_submenu li a.active	{

				color:#90CB22;

				text-decoration:none;

				}

				

.title			{

				font-size:24px;

				line-height:1.5em;

				font-weight:normal;

				margin:24px 0 10px;

				}

				

.title2			{font-size:20px !important;}

.title3			{font-size:16px !important; font-weight: bold; }

.unsuccess		{

				font-size:18px !important;

				font-weight:bold;

				color:#c1272d !important;

				border-bottom:none !important;

				margin:40px 0 !important;

				}

h5.unsuccess:after		{border-bottom:none !important;}

#app_form .app_title	{

				width:870px;

				padding:10px 25px;

				font:16px Arial, Helvetica, sans-serif;

				color:#fff;

				text-transform:uppercase;

				background:url(images/app_form_title_bg.png) 0 0 no-repeat;

				}

				

#app_form .form_total_box {

				font-size:24px;

				line-height:28px;

				width:174px;

				padding:12px;

				background:#fff;

				border:1px solid #dfe0e1;

				border-radius:10px;

				-moz-border-radius:10px;

				-khtml-border-radius:10px;

				-webkit-border-radius:10px;

				

				position:relative;

				}

				

#app_form .form_total_box span {

				font-size:12px;

				line-height:16px;

				display:block;

				margin-top:2px;

				}

#app_form .form_wrapper	{

				width:918px;

				background:#fff;

				border:1px solid #576b77;

				}

#app_form h4	{

				font:14px Arial, Helvetica, sans-serif;

				color:#fff;

				margin:0;

				padding:8px 24px;

				background:#576b77;

				}

#app_form h5	{

				font:bold 12px Arial, Helvetica, sans-serif;

				color:#576b77;

				margin:0.75em 0;

				padding:0 0 3px;

				border-bottom:1px solid #dee0e2;

				position:relative;

				}

#app_form h5:after	{

				width:100%;

				height:1px;

				bottom:-2px;

				left:0;

				border-bottom:1px solid #fff;

				position:absolute;

				content:"";

				}

#app_form .form_body	{

				width:870px;

				margin:12px;

				padding:12px;

				background:#f3f5f7;

				}

#app_form .form_body.alignleft	{

				width:418px;

				margin:12px 0 12px 12px;

				padding:12px 10px 12px 12px;

				background:#f3f5f7;

				}

#app_form .form_body.alignright	{

				width:418px;

				margin:12px 12px 12px 0;

				padding:12px;

				background:#f3f5f7;

				}

#app_form p		{

				color:#576b77;

				margin:0.3em 0;

				padding:0;

				}

#app_form .form_body p.half{width:418px !important;}

				

#app_form span.tip {

				font-size:11px;

				margin-bottom:0.6em;

				padding:6px 5px;

				background:#dfe0e1;

				position:absolute;

				left:88px;

				bottom:30px;

				background:url("images/pointer_bottom.jpg") no-repeat 20% 100%;

				margin-left:-5px;

				}

#wp_required_one{

	background:#DFE0E1;

	padding:2px 5px;

	margin-left:-5px;

	position:relative;

	top:2px;

	display:block;

}

#wp_tip{

	background:#dfe0e1;

	padding:3px 5px;

}			

#app_form span.tip:after,

#app_form span.tip .after {

				width:0;

				height:0;

				overflow:hidden;

				position:absolute;

				content:" ";

				after:" ";

				bottom:-10px;

				left:20px;

				

				/* border:5px solid;

				border-color:#dfe0e1 #f3f5f7 #f3f5f7 #f3f5f7; */

				}

				

#app_form p.required_one {

				font-size:11px;

				margin-bottom:0.6em;

				padding:2px 5px;

				background:#dfe0e1;

				position:relative;

				background:url("images/top_bottom_pointer.jpg") no-repeat 5% 100%;

				height:24px;

				}

				

#app_form p.required_one:before,

#app_form p.required_one .before {

				width:0;

				height:0;

				overflow:hidden;

				position:absolute;

				content:" ";

				before:" ";

				top:-10px;

				left:20px;

				/* border:5px solid;

				border-color:#f3f5f7 #f3f5f7 #dfe0e1 #f3f5f7; */

				}

				

#app_form p.required_one:after,

#app_form p.required_one .after {

				width:0;

				height:0;

				overflow:hidden;

				position:absolute;

				content:" ";

				after:" ";

				bottom:-10px;

				*bottom:-9px;

				left:20px;

				/* border:5px solid;

				border-color:#dfe0e1 #f3f5f7 #f3f5f7 #f3f5f7; */

				}

#app_form p.first_line	{margin-top:40px; position:relative;}

#app_form input	{

				margin:0 2px 0.3em;

				padding:2px;

				color:#576b77;

				background:#fff;

				border:1px solid #576b77;

				*vertical-align:middle;

				}

#app_form input[type=radio],

#app_form input[type=radio]:hover,

#app_form input[type=radio]:focus	{border:none; background:transparent; outline:none; vertical-align:middle;}

#app_form input.small	{width:45px;}

#app_form input.middle	{width:58px;}

#app_form input.middle2	{width:99px;}

#app_form input#yyyy	{width:96px;}

#app_form input.wide	{width:212px;}

#app_form input:hover,

#app_form input:focus	{border:1px solid #bebebe;}

#app_form input[type=radio]	{vertical-align:middle; margin:0px;}

#app_form select	{

				margin:0 2px;

				padding:1px;

				color:#586b77;

				background:#fff;

				border:1px solid #576b77;

				*vertical-align:middle;

				}

#app_form select.small	{width:110px;}

#app_form select.middle	{width:102px;}

#app_form select.wide	{width:218px;}

#app_form .form_body p label	{

				width:auto;

				float:none;

				padding:none;

				}

#app_form .form_body p span.app_form_right	{

				width:222px;

				float:right;

				position:relative;

				}

#app_form .form_body p span.app_form_right.dollar:before	{

				position:absolute;

				left:-0.6em;

				top:3px;

				content:"$";

				z-index:1000;

				}

#app_form .form_body.alignleft p label:first-child,

#app_form .form_body.alignright p label:first-child,

#app_form .form_body p.half label:first-child	{

				width:195px;

				float:left;

				padding:0.3em 0;

				}

				

.submit_area	{

				width:920px;

				height:65px;

				padding:80px 0 0;

				background:url(images/submit_area_bg.png) top center no-repeat;

				}

a.submit_app, a.back_app, input.login_btn	{

				width:208px;

				height:36px;

				display:block;

				margin:0 auto;

				overflow:hidden;

				line-height:9999px;

				text-indent:-9999px;

				background-image:url(images/submit_app_btn.png);

				background-repeat:no-repeat;

				background-position:0 0;

				}

				

a.back_app{

				background-image:url(images/reset.png);

}

input.login_btn{

				background-image:url(images/login_btn.png);

				width:286px;

}

a:hover.submit_app, a:hover.back_app, input.login_btn:hover	{background-position:0 -36px;}

#app_form input.submit_app, #app_form input.back_app, #app_form input.process_app	{

				width:208px;

				height:36px;

				display:block;

				margin:0 auto;

				overflow:hidden;

				line-height:9999px;

				text-indent:-9999px;

				background-image:url(images/submit_app_btn.png);

				background-repeat:no-repeat;

				background-position:0 0;

				border:medium none;

				cursor:pointer;

				}

#app_form input.back_app{

				background-image:url(images/reset.png);

}

#app_form input.process_app{

				background-image:url(images/process_app_btn.png);

}

				

#app_form input:hover.submit_app, #app_form input:hover.back_app, #app_form input:hover.process_app	{background-position:0 -36px;}

a.add_another_btn {

				width:96px;

				height:20px;

				display:block;

				float:right;

				overflow:hidden;

				line-height:9999px;

				text-indent:-9999px;

				background-image:url(images/add_another_btn.png);

				background-repeat:no-repeat;

				background-position:0 0;

				}

a.add_another_income {

				width:96px;

				height:20px;

				display:block;

				float:right;

				overflow:hidden;

				line-height:9999px;

				text-indent:-9999px;

				background-image:url(images/add_another_btn.png);

				background-repeat:no-repeat;

				background-position:0 0;

				z-index:90;

				}			

.form_notification	{margin-left:135px;}

#app_form .error label:first-child	{color:#ff0000;}

#app_form .error_txt	{color:#ff0000;}

#app_form .error_item,

#app_form .error input[type=text],

#app_form .error select	{background:#fbe3e4;}

#app_form .regerror {background:#fbe3e4;}

#app_form .error_box {

				padding:30px 25px;

				border:1px solid #fbc2c4;

				background:#fbe3e4;

				}

#app_form .error_box p {

				font-size:16px;

				font-weight:bold;

				color:#ff0000 !important;}

#sub_navigation{

	position: relative;

    top: 25px;

	left:20px;

	z-index:90;

}

#sub_navigation ul li{

	float:left;

	margin-right:12px;

}

#sub_navigation ul li a{

	text-decoration:none;

	color:#586B77;

	font-weight:900;

	font-family:Arial;

}

#sub_navigation ul li a:hover{

	color:#90CB22 !important;

}

.active_sub_navigation{

	color:#90CB22 !important;

}

#wp_overview{

	

}

#wp_app_form{

	width:920px;

}

.error_box{

	display:none;

}

#adding_fixed_loans{

	min-height:135px;

}

.error label{

	color:#FF0000;

}

.app_form_right{

	width:222px;

}

.remove_another_btn{

	color:#576B77;

}

#remove_income{

	margin-left:197px;

}

.app_form_right label{

	font-size:11px;

}

/* .app_form_right span{

	font-size:11px;

} */

#login_container{

background: none repeat scroll 0 0 #EFF2F4;

height: 100%;

margin: 0 auto;

overflow: hidden;

width: 960px;

}

#login_logo{

background-image:url(images/ccsf-login-logo.png);

height:41px;

width:368px;

margin-bottom:10px;

}

#login_form_wrapper{

width:370px;

border:1px solid #576B77;

height:230px;

margin:0px auto;

}

#sub_container{

margin: 0 auto;

padding-top: 150px;

width: 370px;

}

.login_form_title{

background: none repeat scroll 0 0 #576B77;

color: #FFFFFF;

font-size: 15px;

font-weight: bold;

height: 18px;

padding: 7px 15px;

}

.login_form_sub_wrapper{

margin:10px;

background:#F3F5F7;

height:178px;

width:350px;

}

.login_form{

padding: 20px 0 0 32px;

}

.login_form input[type="text"], .login_form input[type="password"]{

background: none repeat scroll 0 0 #FFFFFF;

border: 1px solid #576B77;

clear: both;

display: block;

height: 22px;

margin: 15px 0px;

width: 273px;

}

.column_wide fieldset{

margin: 5px;

padding: 5px;

}

.column_wide fieldset legend{

padding:0px 5px;

}

.column_wide fieldset fieldset{

border:1px solid;

}

.app_details{

margin-top:10px;

}

.app_details  .main_block{

border:1px solid;

}

/*

    Pick-up page.

*/

#pickup_form_wrapper{

    width:370px;

    border:1px solid #576B77;

    height:230px;

    margin:0px auto;

}

.pickup_form_title{

    background: none repeat scroll 0 0 #576B77;

    color: #FFFFFF;

    font-size: 15px;

    font-weight: bold;

    height: 18px;

    padding: 7px 15px;

}

.pickup_form_sub_wrapper{

    margin:10px;

    background:#F3F5F7;

    height:178px;

    width:350px;

}

.pickup_form{

    padding: 20px 0 0 32px;

}

.pickup_form input[type="text"] {

    background: none repeat scroll 0 0 #FFFFFF;

    border: 1px solid #576B77;

    float: left;

    height: 22px;

    margin: 15px 10px;

    width: 50px;

}

#pickup_logo{

    background-image:url(images/ccsf-login-logo.png);

    height:41px;

    width:368px;

    margin-bottom:10px;

}

.dynbox {

    min-width: 350px;

    padding: 10px;

}

.dynbox fieldset {

    border: 1px solid #999999;

    padding: 10px;

}

.app_detail_footer { padding: 10px; text-align: center; }

#app_form .general-button, .general-button {

    width:208px;

    height:36px;

    display:block;

    overflow:hidden;

    background-image:url(images/btn_bg2.png);

    background-repeat:no-repeat;

    border:0px;

    cursor:pointer;

    color: #ffffff;

    font-size: 17px;

    font-weight: normal;

    font-style:normal;

    margin: 0px auto;

}

#app_form .general-button:hover, .general-button:hover {

    border: 0px;

    background-image:url(images/btn_bg2.png);

    background-repeat:no-repeat;

    background-position: 0px -36px;

    color: #ffffff;

}

.download-button a {

    width:172px;

    height:30px;

    background-image:url(images/btn_bg.png);

    background-repeat:no-repeat;

    border:0px;

    cursor:pointer;

    color: #ffffff;

    font-size: 17px;

    font-weight: normal;

    font-style:normal;

    text-decoration: none;

    display: inline-block;

    text-align: center;

    line-height: 32px;

}

.download-button {

    text-decoration: none;

    width:172px;

    height:30px;

}

.download-button a:hover {

    border: 0px;

    color: #ffffff;

    background-image:url(images/btn_bg.png);

    background-repeat:no-repeat;

    background-position: 0px -30px;

}

.column_wide h2 {

	padding-left: 6px;

	font-size: 26px;

	padding-top: 5px;

	

		

}

/* =====================================================================
   2. WORDPRESS INTEGRATION
   Classes WordPress and its editor output that the original site
   never needed. Kept separate so the block above stays a faithful copy.
   ===================================================================== */

/* Admin bar offset */
.admin-bar .top_full { /* logo bar; nothing fixed, so no offset needed */ }

/* Skip link for accessibility */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: 8px 16px;
	background: #374249;
	color: #fff;
	text-decoration: none;
}
.skip-link:focus { left: 10px; top: 10px; }

/* Screen-reader text */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	word-wrap: normal !important;
}

/* the_content() / block editor output inside the body columns */
.column1 ol, .column6 ol, .column_wide ol { margin: 0 0 1.5em 24px; padding: 0; }
.column1 ul, .column6 ul, .column_wide ul { margin: 0 0 1.5em 24px; padding: 0; list-style: disc; }
.column6 ol > li, .column_wide ol > li { margin-bottom: 1em; padding-left: 4px; }
.column6 ul > li, .column_wide ul > li { margin-bottom: .35em; }
.column6 ul.unordered, .column_wide ul.unordered { list-style: none; margin-left: 0; }

.wp-caption { max-width: 100%; }
.wp-caption img { height: auto; }
.wp-caption-text { font-size: 11px; font-style: italic; padding: 4px 0; }
.alignnone { margin: 5px 0; }
img.aligncenter { display: block; margin: 0 auto 10px; }
.entry-content img { max-width: 100%; height: auto; }
.sticky, .gallery-caption, .bypostauthor { /* required by Theme Check */ }

/* WordPress generated nav menu — primary */
.menu .sub-menu {
	position: absolute;
	left: 0;
	top: 100%;
	min-width: 200px;
	background: #374249;
	z-index: 100;
	display: none;
	padding: 0;
}
.menu li { position: relative; }
.menu li:hover > .sub-menu { display: block; }
.menu .sub-menu li { float: none; font-size: 14px; }
.menu .sub-menu li a { padding: 8px 18px; }
.menu .current-menu-item > a,
.menu .current_page_item > a { background: #1f272b; }

/* Footer menu lists generated by wp_nav_menu */
#footer .column ul.menu { padding: 0; }
#footer .column .menu li {
	float: none;
	font-size: 12px;
	margin: 0 0 5px;
	padding: 0 0 0 8px;
	background: url(images/arr2.png) 0 4px no-repeat;
}

/* Home hero slider (replaces the old Nivo Slider) */
.ccfs-hero {
	width: 960px;
	height: 300px;
	position: relative;
	overflow: hidden;
	background: #374249;
}
.ccfs-hero .ccfs-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	opacity: 0;
	transition: opacity .5s ease-in-out;
	pointer-events: none;
}
.ccfs-hero .ccfs-slide.is-active {
	opacity: 1;
	pointer-events: auto;
	position: relative;
}
.ccfs-hero .ccfs-slide img { display: block; width: 100%; height: 100%; }
.ccfs-hero-nav {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 5;
}
.ccfs-hero-dot {
	width: 12px;
	height: 12px;
	margin-left: 5px;
	padding: 0;
	border: 2px solid #fff;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	outline: none;
}
.ccfs-hero-dot.is-active { background: #90CB22; border-color: #90CB22; }

/* Pagination (blog/index fallback) */
.pagination { padding: 20px 0; clear: both; }
.pagination a, .pagination span {
	display: inline-block;
	padding: 4px 9px;
	margin-right: 4px;
	border: 1px solid #dee0e3;
	text-decoration: none;
	color: #586b77;
}
.pagination .current { background: #90CB22; color: #fff; border-color: #90CB22; }

/* Comments / posts (only used by index.php fallback) */
.entry-meta { font-size: 11px; color: #8a9aa4; margin-bottom: 10px; }
.entry-title { margin-bottom: .4em; }

/* Generic page intro paragraph helper */
.page-intro { margin-bottom: 1.5em; }

/* =====================================================================
   3. POLISH & MODERNISATION LAYER
   Non-destructive upgrades to the original markup. The fixed-width
   gradient GIFs and the bitmap sprite buttons are rebuilt in CSS so they
   stay crisp on high-resolution screens and never break when an element
   is resized. The visual design — colours, layout, type — is unchanged.
   ===================================================================== */

:root {
	--ccfs-green:        #90cb22; /* brand green                        */
	--ccfs-green-bright: #a8e024; /* lighter end of the box gradient    */
	--ccfs-green-deep:   #6f9e15; /* deeper green for the payment button*/
	--ccfs-green-text:   #5f8a17; /* AA-contrast green for small text   */
	--ccfs-dark:         #374249; /* nav / dark box                     */
	--ccfs-dark-2:       #2f383f;
	--ccfs-ink:          #4e5e6a; /* body copy (slightly darker)        */
	--ccfs-light:        #eef1f4;
}

html { -webkit-text-size-adjust: 100%; }

/* ----- Smooth, subtle interaction feedback ----- */
a,
.menu li a,
a.more,
a.contact_us,
a.process_credit_card,
.ccfs-hero-dot {
	transition: color .15s ease, background-color .15s ease,
	            background .15s ease, opacity .15s ease;
}

/* ----- Accessible keyboard focus (the original set outline:none) ----- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 3px solid var(--ccfs-green);
	outline-offset: 2px;
}

/* ----- Contrast: darker body copy + readable green for text ----- */
body              { color: var(--ccfs-ink); }
a                 { color: var(--ccfs-green-text); }
a:hover           { color: var(--ccfs-dark); }
h2                { color: var(--ccfs-green-text); }
a.more            { color: var(--ccfs-green-text); }
a.more:hover      { color: var(--ccfs-dark); }
.column_wide h3 a { color: var(--ccfs-green-text); }
#footer a         { color: #46535d; }
#footer a:hover   { color: var(--ccfs-green-text); }

/* Neutralise the broken legacy Opera min-height hack (it was invalid CSS). */
body:before { content: none; display: none; }

/* ----- Home intro boxes: GIF gradients -> crisp CSS gradients -----
   px1/px2/px3.gif were bitmap strips cut to the exact desktop column
   widths, so they showed a hard colour seam the moment a box was any
   wider — i.e. on every phone. These gradients reproduce the original
   look and scale cleanly to any width. */
.box1 {
	background: var(--ccfs-green);
	background-image: linear-gradient(to right, #90cb22, #a8e024);
}
.box2 {
	/* nudged a little deeper so the green heading meets AA contrast */
	background: #38434b;
	background-image: linear-gradient(to right, #333d45, #4c5b66);
}
.box3 {
	background: #eff2f4;
	background-image: linear-gradient(to right, #d6dfe4, #eff2f4);
}
/* Lift the white / green headings off the gradient for legibility. */
.box1 { text-shadow: 0 1px 1px rgba(0, 0, 0, .28); }
.box2 { text-shadow: 0 1px 1px rgba(0, 0, 0, .35); }

/* ----- "Contact Us" + "Process Credit Card" buttons -----
   Rebuilt from the bitmap sprites (contact_us_btn.png and
   precess_credit_card.png) as resolution-independent CSS. Identical
   arrow-tab shape and colours — just sharp on retina and safe to
   resize, so they never spill off the edge of a phone screen. */
a.contact_us,
a.process_credit_card {
	--tab: #86c01f;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: auto;
	height: auto;
	min-width: 188px;
	min-height: 44px;
	margin-right: 22px;            /* reserves room for the arrow tab  */
	padding: 12px 30px 12px 24px;
	font: bold 17px/1 Arial, Helvetica, sans-serif;
	color: #fff;
	text-indent: 0;
	text-decoration: none;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
	background: linear-gradient(to bottom, #a4dd2a, #86c01f);
}
a.process_credit_card {
	--tab: #6f9e15;            /* deeper green, matching its sprite */
	background: linear-gradient(to bottom, #8cc426, #6f9e15);
}
a.contact_us::after,
a.process_credit_card::after {
	content: "";
	position: absolute;
	left: 100%;
	top: 0;
	width: 0;
	height: 0;
	border: 22px solid transparent;
	border-right: 0;
	border-left: 22px solid var(--tab);
}
a.contact_us:hover,
a.process_credit_card:hover,
a:hover.contact_us,
a:hover.process_credit_card {
	--tab: #2f383f;
	color: #fff;
	background: linear-gradient(to bottom, #4a5660, #343f47);
}

/* ----- Sub-page banner heading: readable on top of photo banners ----- */
#header_sub h1 {
	text-shadow: 0 1px 8px rgba(255, 255, 255, .85),
	             0 0 2px  rgba(255, 255, 255, .95);
}

/* ----- Footer menu: stop the mobile-nav border rule leaking in -----
   The old responsive rule targeted ".menu li a", which also matched the
   two footer menus and drew stray divider lines through them. */
#footer .column .menu li a { border: 0; }

/* ----- Mobile navigation toggle: hidden unless on a phone ----- */
.ccfs-nav-toggle { display: none; }

/* ---------------------------------------------------------------------
   Content components
   Reusable building blocks for the expanded content pages (What We Offer,
   How It Works, FAQs, etc.). They use the original palette, square
   corners and Arial type, so new pages match the existing site exactly.
   They only appear when the matching class is used, so nothing already
   on the site is affected.
   --------------------------------------------------------------------- */

/* Primary call-to-action button — same look as the green site buttons. */
.column1 a.ccfs-btn,
.column6 a.ccfs-btn,
.column_wide a.ccfs-btn,
.entry-content a.ccfs-btn {
	display: inline-block;
	padding: 11px 22px;
	margin: 4px 0;
	background: linear-gradient(to bottom, var(--ccfs-green-bright), var(--ccfs-green-deep));
	color: #fff;
	font-weight: bold;
	font-size: 14px;
	line-height: 1.2;
	text-decoration: none;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
}
.entry-content a.ccfs-btn:hover,
.column_wide a.ccfs-btn:hover,
.column6 a.ccfs-btn:hover,
.column1 a.ccfs-btn:hover {
	background: linear-gradient(to bottom, #4a5660, #343f47);
	color: #fff;
}
.entry-content a.ccfs-btn.is-ghost {
	background: #fff;
	color: var(--ccfs-green-text);
	border: 1px solid var(--ccfs-green);
	text-shadow: none;
}
.entry-content a.ccfs-btn.is-ghost:hover {
	background: var(--ccfs-light);
	color: var(--ccfs-dark);
	border-color: var(--ccfs-dark);
}

/* Callout panel — for key notes, eligibility summaries and CTAs. */
.entry-content .ccfs-callout {
	margin: 1.6em 0;
	padding: 18px 22px;
	background: var(--ccfs-light);
	border-left: 4px solid var(--ccfs-green);
}
.entry-content .ccfs-callout > :last-child { margin-bottom: 0; }
.entry-content .ccfs-callout h3 { margin-top: 0; }

/* Numbered process steps — used on How It Works. */
.entry-content ol.ccfs-steps {
	margin: 1.5em 0;
	padding: 0;
	list-style: none;
	counter-reset: ccfs-step;
}
.entry-content ol.ccfs-steps > li {
	position: relative;
	margin: 0 0 14px;
	padding: 16px 20px 16px 64px;
	background: #fff;
	border: 1px solid #dfe4e8;
	counter-increment: ccfs-step;
}
.entry-content ol.ccfs-steps > li::before {
	content: counter(ccfs-step);
	position: absolute;
	left: 16px;
	top: 16px;
	width: 32px;
	height: 32px;
	background: linear-gradient(to bottom, var(--ccfs-green-bright), var(--ccfs-green-deep));
	color: #fff;
	font-weight: bold;
	font-size: 16px;
	line-height: 32px;
	text-align: center;
}
.entry-content ol.ccfs-steps > li h3 {
	margin: 0 0 .35em;
	font-size: 16px;
}
.entry-content ol.ccfs-steps > li > :last-child { margin-bottom: 0; }

/* Feature / product cards — used on What We Offer. */
.entry-content .ccfs-cards {
	margin: 1.5em 0;
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
}
.entry-content .ccfs-card {
	flex: 1 1 260px;
	padding: 22px;
	background: #fff;
	border: 1px solid #dfe4e8;
	border-top: 3px solid var(--ccfs-green);
}
.entry-content .ccfs-card h3 { margin-top: 0; }
.entry-content .ccfs-card > :last-child { margin-bottom: 0; }

/* Tick list — for benefit / eligibility lists. */
.entry-content ul.ccfs-ticks {
	margin: 1.4em 0;
	padding: 0;
	list-style: none;
}
.entry-content ul.ccfs-ticks > li {
	position: relative;
	margin: 0 0 .6em;
	padding-left: 28px;
}
.entry-content ul.ccfs-ticks > li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 3px;
	width: 8px;
	height: 13px;
	border: solid var(--ccfs-green-deep);
	border-width: 0 3px 3px 0;
	transform: rotate(45deg);
}

/* FAQ accordion — native <details>, works with JavaScript disabled. */
.entry-content .ccfs-faq {
	margin: 1.5em 0;
	border-top: 1px solid #dfe4e8;
}
.entry-content .ccfs-faq details {
	border-bottom: 1px solid #dfe4e8;
}
.entry-content .ccfs-faq summary {
	position: relative;
	padding: 15px 40px 15px 4px;
	font-weight: bold;
	color: var(--ccfs-dark);
	cursor: pointer;
	list-style: none;
}
.entry-content .ccfs-faq summary::-webkit-details-marker { display: none; }
.entry-content .ccfs-faq summary::after {
	content: "";
	position: absolute;
	right: 10px;
	top: 18px;
	width: 8px;
	height: 8px;
	border: solid var(--ccfs-green-deep);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	transition: transform .15s ease;
}
.entry-content .ccfs-faq details[open] summary::after {
	transform: rotate(-135deg);
	top: 21px;
}
.entry-content .ccfs-faq summary:hover { color: var(--ccfs-green-text); }
.entry-content .ccfs-faq summary:focus-visible {
	outline: 2px solid var(--ccfs-green-deep);
	outline-offset: 2px;
}
.entry-content .ccfs-faq details > :not(summary) {
	margin: 0 4px 14px;
}

/* =====================================================================
   4. RESPONSIVE LAYER
   The desktop design is a fixed 960px layout and is left exactly as the
   original. Everything below lives inside max-width media queries, so it
   only ever applies to tablets and phones.
   ===================================================================== */

/* ---------- Tablet and below (<= 980px) ---------- */
@media (max-width: 980px) {
	#top, #nav, #header, #header_sub, #container, #fsb, #footer {
		width: auto !important;
		max-width: 960px;
		margin-left: auto;
		margin-right: auto;
	}
	#container { display: block; }

	/* Header / hero scale fluidly */
	.header_full { background-image: none; }
	.header_full, #header, #header_sub { height: auto; }
	#header_sub { overflow: hidden; }
	#header_sub img, #header img { width: 100%; height: auto; display: block; }
	.nivoSlider, .ccfs-hero { width: 100% !important; height: auto !important; }
	.ccfs-hero img { width: 100%; height: auto; display: block; }
	#header_sub h1 { font-size: 40px; }

	/* Logo never overflows its bar */
	.custom-logo, .custom-logo-link img, a.logo img {
		max-height: 50px;
		width: auto;
		height: auto;
	}

	/* Stack the home boxes + content columns. border-box keeps padding
	   inside the element so nothing ever overflows the viewport. */
	.box1, .box2, .box3,
	.column1, .column2, .column3, .column4,
	.column5, .column6, .column_wide {
		width: auto !important;
		float: none !important;
		box-sizing: border-box;
	}
	.box1, .box2, .box3 {
		height: auto;
		min-height: 0;
		font-size: 26px;
		line-height: 1.25;
		padding: 18px 24px;
	}
	.column4 { padding-top: 6px; padding-bottom: 6px; }
	.column5 img { max-width: 100%; height: auto; }

	/* Footer columns sit side by side while there is room */
	#footer .column { width: 46%; }
}

/* ---------- Phone (<= 600px) ---------- */
@media (max-width: 600px) {
	/* Comfortable reading sizes on a small screen */
	body { font-size: 15px; }
	#container, body#main #container { font-size: 16px; line-height: 1.55; }
	.column1, .column2, .column3, .column6, .column_wide { font-size: 16px; }
	.column1, .column2, .column3 { padding: 22px 20px; }
	.column6 { padding: 24px 20px; }
	.column_wide { padding: 20px; }

	/* Intro boxes: a sensible heading size for narrow screens */
	.box1, .box2, .box3 { font-size: 22px; padding: 16px 20px; }

	/* Banner */
	#header_sub h1 { font-size: 26px; left: 16px; bottom: 8px; }
	.breadcrumbs   { top: 8px; left: 16px; }

	/* ----- Collapsible navigation -----
	   The toggle and the collapse only switch on when JavaScript has run
	   (the .ccfs-js class). Without JS the full menu simply stays
	   visible, so navigation is never trapped shut. */
	#nav { position: relative; }
	.ccfs-js .ccfs-nav-toggle {
		display: flex;
		align-items: center;
		gap: 11px;
		box-sizing: border-box;
		width: 100%;
		margin: 0;
		padding: 15px 18px;
		border: 0;
		background: transparent;
		color: #fff;
		font: bold 17px/1 Arial, Helvetica, sans-serif;
		cursor: pointer;
	}
	.ccfs-nav-toggle-text { letter-spacing: .02em; }
	.ccfs-nav-toggle-icon {
		position: relative;
		display: block;
		width: 24px;
		height: 2px;
		background: #fff;
		transition: background .15s ease;
	}
	.ccfs-nav-toggle-icon::before,
	.ccfs-nav-toggle-icon::after {
		content: "";
		position: absolute;
		left: 0;
		width: 24px;
		height: 2px;
		background: #fff;
		transition: transform .2s ease;
	}
	.ccfs-nav-toggle-icon::before { top: -7px; }
	.ccfs-nav-toggle-icon::after  { top:  7px; }
	/* bars morph into an X while the menu is open */
	.ccfs-nav-toggle[aria-expanded="true"] .ccfs-nav-toggle-icon { background: transparent; }
	.ccfs-nav-toggle[aria-expanded="true"] .ccfs-nav-toggle-icon::before {
		transform: translateY(7px) rotate(45deg);
	}
	.ccfs-nav-toggle[aria-expanded="true"] .ccfs-nav-toggle-icon::after {
		transform: translateY(-7px) rotate(-45deg);
	}

	/* the menu: collapsed by default, revealed by .is-open */
	.ccfs-js #primary-menu {
		max-height: 0;
		overflow: hidden;
		transition: max-height .28s ease;
	}
	.ccfs-js #primary-menu.is-open { max-height: 520px; }

	.menu li { float: none; width: 100%; font-size: 17px; }
	#primary-menu li a {
		padding: 14px 18px;
		border-top: 1px solid #2b343a;
	}
	#primary-menu .sub-menu { position: static; min-width: 0; }
	#primary-menu .sub-menu li a { padding-left: 36px; background: #2f383f; }

	/* Footer: single column, tidy tap targets, aligned bullets */
	#footer, body#sp #footer { font-size: 14px; line-height: 1.5; }
	#footer .column { width: 100%; float: none; margin: 0 0 4px; }
	#footer .copy   { float: none; margin-top: 14px; }
	#footer .column .menu li {
		margin: 0;
		padding: 11px 0 11px 16px;
		background-position: 0 16px;
		border-bottom: 1px solid #e1e5e9;
	}
	#footer .column .menu li a { display: block; }

	/* Contact button: centred and never clipped by the screen edge */
	#fsb       { padding: 24px 16px; text-align: center; }
	#main #fsb { padding: 28px 16px; }
	a.contact_us { float: none; }

	/* "Find out more" links a touch larger to tap */
	a.more { font-size: 15px; }

	/* Wide product tables collapse to stacked blocks */
	.column_wide table, .column_wide tbody,
	.column_wide tr, .column_wide td {
		display: block;
		width: auto !important;
	}
	.column_wide td img { max-width: 100%; height: auto; }

	/* New content components: comfortable spacing on phones */
	.entry-content .ccfs-cards { gap: 12px; }
	.entry-content .ccfs-card { flex-basis: 100%; padding: 18px; }
	.entry-content .ccfs-callout { padding: 16px 18px; }
	.entry-content ol.ccfs-steps > li { padding: 14px 16px 14px 58px; }
	.entry-content ol.ccfs-steps > li::before { left: 14px; top: 14px; }
	.entry-content a.ccfs-btn { display: block; text-align: center; }
}

/* ---------- Very small phones (<= 380px) ---------- */
@media (max-width: 380px) {
	.box1, .box2, .box3 { font-size: 20px; }
	#header_sub h1 { font-size: 23px; }
}

/* ---------- Respect reduced-motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition-duration: .001ms !important;
		animation-duration: .001ms !important;
	}
}