/* FSP SS20 Credit Style updated 30/01/20. */

.header.mobile, .header-logos.mobile, img.apr-logo.mobile, img.lifestore-logo.mobile, .header-text-box.mobile {display:none;}

/* GLOBAL v6. */
#outerPageContainer {
	max-width:1200px;
	width: 100%
}
#container {
	position:relative;
	margin: 0 auto;
	font-size:16px;
	border: 4px solid #75556f;
	display: block;
}

.rep-banner a.CTA, .footer a.CTA.account, .footer a.CTA.faq, .footer a.CTA.contact {
	background: #4b9626;
	display: block;
	position:relative;
	margin: 2% auto;
	padding: 14px 40px;
	font: 1.6em/normal GalanoGrotesque-SemiBold,Arial,'Helvetica Neue',Helvetica,sans-serif;
	color: #fff;
	cursor:pointer;
	-webkit-transition:all 400ms ease;
	-o-transition:all 400ms ease;
	transition:all 400ms ease;
	width: 22%;
	text-align: center;
	text-decoration: none;
}

.footer a.CTA.account, .footer a.CTA.faq, .footer a.CTA.contact {
	background: #000;
	margin: 2% auto;
	padding: 14px 40px;
	font: 1.1em/normal GalanoGrotesque-SemiBold,Arial,'Helvetica Neue',Helvetica,sans-serif;
	width: 45%;
}

.footer a.CTA.faq, .footer a.CTA.contact {
	background: #fff;
	color: #000;
	margin: 2% 2%;
	padding: 14px 40px;
	font: 1.1em/normal GalanoGrotesque-SemiBold,Arial,'Helvetica Neue',Helvetica,sans-serif;
	width: 30%;
	display: inline-block;
}

.rep-banner a.CTA:hover, .footer a.CTA.faq:hover, .footer a.CTA.contact:hover {
	background-color:#000;
	color: #fff;
}
.footer a.CTA.account:hover {
	background-color:#fff;
	color: #000;
}



/* 
-----------------------
         HEADER 
-----------------------
*/
.header.desktop {
    width: 100%;
    height: 102px;
    background-color: #75556f;
}

.header-logos.desktop {
    position: relative;
    top: 11%;
    left: 0;
}

img.apr-logo.desktop, img.lifestore-logo.desktop {
    display: block;
    position:absolute;
}

img.apr-logo.desktop {
    top: 11%;
	right: 17%;
	width: 181px;
}

img.lifestore-logo.desktop {
	top: 12%;
    left: 17%;
    width: 213px;
}

/* HEADER TEXT */
.header-text-box.desktop {
    text-align: center;
    width: 100%;
}
.header-text-box h2 {
   font: 1.6em/normal GalanoGrotesque-Medium,Arial,'Helvetica Neue',Helvetica,sans-serif;
   color: #000;
   margin: 1.5% 0 0;
}
.header-text-box h2 span {
   font: .75em/2 GalanoGrotesque-Regular,Arial,'Helvetica Neue',Helvetica,sans-serif;
}
.main h4 {
   font: 1.3em/1 GalanoGrotesque-Medium,Arial,'Helvetica Neue',Helvetica,sans-serif;
   color: #000;
   padding-top: 15px;
   text-align: center;
   margin: 0;
}
p.small-print {
    font: .75em/3 GalanoGrotesque-Regular,Arial,'Helvetica Neue',Helvetica,sans-serif;
}
.box-1 h4 {color: #fdb813}
.box-2 h4 {color: #87993e}
.box-3 h4 {color: #6cc8bf}
.box-4 h4 {color: #c05a85}

/* REASONS / REP BANNER */
.reasons-banner h3, .rep-banner h3 {
   font: 1.3em/normal GalanoGrotesque-SemiBold,Arial,'Helvetica Neue',Helvetica,sans-serif;
   color: #000;
   padding: 1% 0;
   text-align: center;
   margin: 0;
   background-color: #e6e6e6;
}
.main p, .rep-banner p {
   font: 1em/1.3 GalanoGrotesque-Regular,Arial,'Helvetica Neue',Helvetica,sans-serif;
   color: #000;
   text-align: center;
   margin: 15px 0;
}
.rep-banner p {
   margin: 0 auto;
   width: 64%;
}


.rep-banner h3 {
   font: 1.5em/normal GalanoGrotesque-SemiBold,Arial,'Helvetica Neue',Helvetica,sans-serif;
   color: #000;
   padding: 1% 0;
   text-align: center;
   margin: 0;
   background-color: #e6e6e6; 
}

#container > p {
	font: 0.7em/1.3 GalanoGrotesque-Regular,Arial,'Helvetica Neue',Helvetica,sans-serif;
	color: #54565b;
	text-align: justify;
	margin: 15px;
	letter-spacing: 0.04em;
}
#container > p > a {
	color: #000;
	font-family: GalanoGrotesque-Medium,Arial,'Helvetica Neue',Helvetica,sans-serif !important;

}


/* 
-----------------------
         MAIN 
-----------------------
*/
.main {
    display: block;
    margin: 1%;
    box-sizing: border-box;
}

.boxes {
}

.box-1, .box-2, .box-3, .box-4  {
	 border: 1px solid #e9e9e9;
	 text-align: center;
	 padding: 3.5% 5% 5.5%;
	 width: 39.1%;
	 display: inline-block;
	 position: relative;
	 height: 200px;
}

.box-1, .box-2 {
	margin-bottom: 1.2%;
}
.box-1, .box-3 {
	margin-right: 1%;
	vertical-align: top;
}
.icon {
	width: 46px;
}


/* 
-----------------------
         FOOTER 
-----------------------
*/
.footer {
	display: block;
	margin: 1% 0 0;
	box-sizing: border-box;
}
.footer-boxes {
}

.footer-box-1, .footer-box-2  {
	 text-align: center;
	 padding: 7% 1% 3%;
	 width: 47.1%;
	 display: inline-block;
	 position: relative;
	 height: 150px;
	 background-color: #e6e6e6;
	 border: 1px solid #e9e9e9;
	 vertical-align: top;
}


.footer-box-1 {
    margin-right: 1%;
}
.footer h5 {
   font: 1.5em/1 GalanoGrotesque-Medium,Arial,'Helvetica Neue',Helvetica,sans-serif;
   color: #000;
   padding-bottom: 15px;
   text-align: center;
   margin: 0;
}


/* Background SVG's This will push SVG's through to Fatwire */
.svgs {
	background: 
		url("/repo/JDW/desktop/pages/freeFormat/SS18/Credit/Week-10/02-images/APR_wo_v2.svg"),
		url("/repo/JDW/desktop/pages/freeFormat/SS18/Credit/Week-10/02-images/APR_wo_v3b.svg"),
		url("/repo/JDW/desktop/pages/freeFormat/SS18/Credit/Week-10/02-images/personal_wo.svg"),
		url("/repo/JDW/desktop/pages/freeFormat/SS18/Credit/Week-10/02-images/lifestore_wo.svg"),
		url("/repo/JDW/desktop/pages/freeFormat/SS18/Credit/Week-10/02-images/payday.svg"),
		url("/repo/JDW/desktop/pages/freeFormat/SS18/Credit/Week-10/02-images/pay_your_way.svg"),
		url("/repo/JDW/desktop/pages/freeFormat/SS18/Credit/Week-10/02-images/control_cash.svg"),
		url("/repo/JDW/desktop/pages/freeFormat/SS18/Credit/Week-10/02-images/checkout.svg"),
		url("/repo/FSP/desktop/pages/freeformat/SS20/Credit/Week-05/02-images/APR_wo_39.9.svg")
}



@media only screen and (max-width: 1098px) {
.box-1, .box-2, .box-3, .box-4 {width: 39%;}
.footer-box-1, .footer-box-2 {width: 47%;}
}


@media only screen and (max-width: 1022px) {
.box-1, .box-2, .box-3, .box-4 {padding: 3.5% 4.9% 5.5%;}
.footer-box-1, .footer-box-2  {padding: 7% 0.99% 3%;}
.footer a.CTA.account {width: 45%;}
.footer a.CTA.faq, .footer a.CTA.contact {/* width: 26%; */}
}

@media only screen and (max-width: 1024px) {
.footer a.CTA.account {width: 49%;}
.footer a.CTA.faq, .footer a.CTA.contact {width: 28%;}
}



@media only screen and (max-width: 970px) {
.footer-box-1, .footer-box-2  {padding: 4% 1% 4%;width: 98%;display: block;vertical-align: top;height: auto;}
.footer-box-1, .footer-box-2 {margin-bottom: 1%;}
.footer a.CTA.account {width: 30%;}
.footer a.CTA.faq, .footer a.CTA.contact {margin: 2% 1%;width: 35%;display: inline-block;}
}



@media only screen and (max-width: 830px) {
	 #container { font-size:14px; }
}

@media only screen and (max-width: 812px) {
.footer-box-1, .footer-box-2  {width: 97.58%;}
}


@media only screen and (max-width: 667px) {
.header.desktop, .header-logos.desktop, img.apr-logo.desktop, img.lifestore-logo.desktop, .header-text-box.desktop {display:none;}
.header.mobile, .header-logos.mobile, img.apr-logo.mobile, img.lifestore-logo.mobile, .header-text-box.mobile {display:block;}
#container { font-size:12px; }

/* 
-----------------------
         HEADER 
-----------------------
*/
.header.mobile {width: 100%; background-color: #75556f; margin: 0;}
.header-logos.mobile {position: relative;}
img.apr-logo.mobile {top: 0;right: 0;width: 129px;position: relative;display: inline-block;float: right;padding: 3% 6% 0 0;}
img.lifestore-logo.mobile {width: 213px;display: block;margin: 0 auto;position: relative;padding-bottom: 3vw;clear: both;}

/* HEADER TEXT */
.header-text-box.mobile {/* text-align: center; *//* width: 100%; */}
.header-text-box.mobile h1 {margin: 0;font: 1.4em/normal GalanoGrotesque-Medium,Arial,'Helvetica Neue',Helvetica,sans-serif;color: #fff;text-align: left;padding: 6% 3%;display: inline-block;float: left;width: 64%;}
.header-text-box.mobile h2 {margin: 0;font: 1.4em/normal GalanoGrotesque-Regular,Arial,'Helvetica Neue',Helvetica,sans-serif;padding: 4% 5%;text-align: center;}
.header-text-box h2 span {font: .75em/1 GalanoGrotesque-Regular,Arial,'Helvetica Neue',Helvetica,sans-serif;}
p.small-print {font: .75em/1.2 GalanoGrotesque-Regular,Arial,'Helvetica Neue',Helvetica,sans-serif;text-align: center;margin-bottom: 10px;}
.reasons-banner h3, .rep-banner h3 {padding: 3% 0;font: 1.5em/normal GalanoGrotesque-SemiBold,Arial,'Helvetica Neue',Helvetica,sans-serif;}

/* 
-----------------------
         MAIN 
-----------------------
*/
#container {padding-bottom: 0px;}
.box-1, .box-2, .box-3, .box-4  {border-bottom: 5px solid #e9e9e9;padding: 5% 5% 7%;width: 89.1%;border-left: none;border-right: none;border-top: none;height: auto;}
.box-4  {border: none;}
.main p {margin: 15px 0 0;font-size: 1.2em;}

/* 
-----------------------
         FOOTER 
-----------------------
*/
.rep-banner p {margin: 0 auto 6%;width: 76%;}
.rep-banner a.CTA {width: 78%;margin: 2% auto 4%;}
.footer a.CTA.account, .footer a.CTA.faq, .footer a.CTA.contact  {width: 70%;}
.footer {margin: 0%;}
.footer-box-1 {margin: 0 0 0;}
.footer-box-2 {margin: 4% 0 0%;}
.footer-box-1, .footer-box-2 {width: 97.5%;height: auto;}
}


@media only screen and (max-width: 545px){
.header-text-box.mobile h1 {
    font: 1.2em/normal GalanoGrotesque-Medium,Arial,'Helvetica Neue',Helvetica,sans-serif;
    width: 50%;
}
}


@media only screen and (max-width: 320px){
#container { font-size:12px; }
img.apr-logo.mobile {width: 98px;}.rep-banner a.CTA {width: 74.5%;}
.header-text-box.mobile h1 {
    font: 1em/normal GalanoGrotesque-Medium,Arial,'Helvetica Neue',Helvetica,sans-serif;
}

}