html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0; font-size:100%; font:inherit; margin:0; padding:0}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
body{line-height:1}
ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
table{border-collapse:collapse; border-spacing:0}
*{box-sizing:border-box}
img{max-width:100%}

body {background:white; color:#002855; font-size:85%; font-family:'Open Sans',Helvetica,Arial,sans-serif; font-display:swap; font-stretch:normal; text-rendering:optimizeLegibility!important; -webkit-font-smoothing:antialiased!important; -webkit-text-size-adjust:none}




/* Fonts */
h1, h2, h3, h4 {line-height:140%; padding:0.5em 0; font-weight:700}
h1 {font-size:200%; font-weight:400; }
h2 {font-size:150%;}
h3 {font-size:125%; }
h4 {font-size:100%; text-transform:uppercase;}
p{line-height:150%; padding:.6em 0; color:#414042;}
strong{font-weight:700}
em {font-style:italic;}
small, p small{font-size:90%; padding:0 0 0.5em 0; line-height:140%; font-weight:400; display:block; color:#999;}

	@media only screen and (max-width:540px){
		h1 {font-size:175%; font-weight:600; }
		h2 br {display:none;}
	}
	@media only screen and (max-width:400px){
		h1 {font-size:150%;}
	}




/* Links */
a {color:#002855; }
input[type=submit], .btn, button {-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-ms-transition:all 0.3s ease;-o-transition:all 0.3s ease;transition:all 0.3s ease}
.btn, input[type=submit] {-webkit-appearance:none; display:inline-block; cursor:pointer; padding:1em 1.5em; font-size:100%; min-width:150px; margin:1em 0; border:0; font-weight:700; color:white; text-align:center !important; text-decoration:none; border-radius:50px; background-image: linear-gradient(to bottom, #1150b5, #0f459f, #0d3b89, #0a3174, #08275f); box-shadow:0px 1px 4px rgba(0,0,0,0.2);}
	.btn:hover, input[type=submit]:hover {background-image: linear-gradient(to top, #0e459e, #0d4093, #0c3a88, #0b357d, #0a3072);}
	.btn i, .btn span {display:inline-block; vertical-align:middle;}
	.btn i {color:#C4D600;}
.btn i {font-size:150%;}

	@media only screen and (min-width:420px){
		.btn, input[type=submit] {padding:1em 2em; font-size:125%;}
		.btn i {color:#C4D600;}
	}





/* Header */
header {background:#002855; color:white; float:left; width:100%; z-index:100;}
	header h1 {padding:0 50px; line-height:70px;}
	header a.back {color:white; position:absolute; left:0px; top:0px; font-size:25px; line-height:70px; width:70px; text-align:center;}

	@media only screen and (min-width:768px){
		header h1, header a.back {line-height:10vh;}
	}
	@media only screen and (max-width:420px){
		header h1 {padding:0 40px; line-height:60px;}
		header a.back {line-height:60px; width:60px; font-size:24px;}
	}



/* Main Structure */
.page-container {text-align:center; background:white; position:relative; min-height:100vh;}
.main-content {display:block; clear:both; padding:4vh;}
.light-bg {background:#F1F1F2;}

	@media only screen and (min-width:767px){
		.page-container {}
		.main-content {max-width:1000px; margin:0 auto; padding-bottom:90px;}
	}
	@media only screen and (max-width:420px){
		.main-content { padding:1em; padding-bottom:75px;}
		.light-bg .main-content {padding:1em;}
	}





/* Form Elements */
.white-container {background:white; padding:1em 1.5em; border-radius:5px; box-shadow:0px 0px 5px rgba(0,0,0,0.1);}
.green-container {background:#C4D600; padding:1em 1.5em 0; border-radius:5px; box-shadow:0px 0px 5px rgba(0,0,0,0.1);}
	.green-container .white-container {max-width:500px; margin:0 auto; min-height:35vh; padding:1em 2em 2em; border-radius:5px 5px 0 0;}

.feature-icon {display:block; padding:5vh 0; }
	.feature-icon img {height:25vh;max-height:250px;}
.form-item {display:block; padding:0.6em 0; max-width:400px; margin:0 auto;}
.form-item .btn, .form-item input[type=submit] {margin:0;}
.field-title {line-height:125%; color:#414042; padding:5px 0; font-weight:600;}

input:read-only, select:required, textarea:required {font-size:100%; font-family:'Open Sans',Helvetica,Arial,sans-serif; border:0; background:#C4D600; outline:none; text-align:left; border-radius:25px; }
 input:required, select:read-only, textarea:read-only {
	font-size:100%; font-family:'Open Sans',Helvetica,Arial,sans-serif;  outline:none; text-align:left; border-radius:25px;
}
input[type="text"], input[type="number"], input[type="email"], input[type="tel"], input[type="password"], textarea {padding:0.9em 1.5em; color:#002855; width:100%; font-weight:600;text-align: center}
input:required:focus, textarea:focus {background:#002855; color:white;}

input[type=checkbox] {width:auto !important; margin:0;}
input[type="checkbox"] {font-size:150%;}
input#datepicker {width:125px !important; margin-right:4px;}
input[type=submit] {display:block; width:100%;  -webkit-appearance:none}
select {min-width:50%; width:100%;}
::placeholder {color:#002855; font-weight:400; text-align:center; }
span.optional {display:inline-block; color:#999; font-size:85%;}
fieldset {display:block; padding:0 0 1em;}
.otp input {width:40px; display:inline-block;}
input.error, select.error, textarea.error {border-color:red; background:#fef3f3;}
fieldset .response.error {padding:0; border:none; background:none; text-align:left; margin:0.5em 0;}
.select {display:block; position:relative;}
.select.autowidth {display:inline-block;min-width:100px;}
	.select:before {position:absolute; color:#999; right:1em; top:0.8em; font-family:"Font Awesome 5 Free"; font-weight:900; content:"\f0dd";}
	.select select {-webkit-appearance:none; padding:0 1em; width:100%; height:40px; background:white;}

/* Checkboxes */
.checkbox {display:block; max-width:600px; margin:0 auto; }
.checkbox input {display:inline-block; vertical-align:top; margin-right:5px;}
.checkbox p {display:inline-block; vertical-align:top; width:90%; width:calc(100% - 40px); text-align:left; padding:0; font-size:90%; font-weight:600;}
span.checkbox {display:inline-block; vertical-align:top; margin-right:2em;}

.response {display:block; text-align:center; margin:1em 0; padding:1em; line-height:150% ;-moz-border-radius:2px;-webkit-border-radius:4px;border-radius:4px;}
	.response i {margin-right:0.5em;}
	.response.error {color:red; border:1px solid red; background:#fef3f3;}
	.response.success {color:#18c00b;  border:1px solid #18c00b; background:#f4fdf3;}

	@media only screen and (min-width:768px) {
		.green-container .white-container h2 {font-size:200%; }
	}
	@media only screen and (max-width:767px) {
		.response {padding:0.5em;}
	}
	@media only screen and (max-width:420px){
		.form-contain {padding:1em;}

	}




/* Range Slider */
.rangeslider, .rangeslider__fill{display:block; border-radius:15px;}
.rangeslider{background:#eee; position:relative; border:1px solid #ddd;}
.rangeslider--vertical{width:10px;min-height:150px;max-height:100%; margin:0 auto;}
.rangeslider--horizontal{width:93%;min-height:10px;max-width:93%; margin:0 auto;}
.rangeslider--disabled{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=40);opacity:0.4;}
.rangeslider__fill{background:#002855; position:absolute; background-image: linear-gradient(to bottom, #1150b5, #0f459f, #0d3b89, #0a3174, #08275f);}
.rangeslider--vertical .rangeslider__fill{bottom:0;width:100%;}
.rangeslider--horizontal .rangeslider__fill{left:0;height:100%;}
.rangeslider__handle{background:white; cursor:pointer;display:inline-block;width:30px;height:30px;position:absolute; background-image: linear-gradient(to top, #adcb11, #b9d31f, #c6da2a, #d2e234, #dfea3d); -moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%; box-shadow:0px 1px 4px rgba(0,0,0,0.2);}
.rangeslider__handle:after {content:''; width:10px; height:10px; position:absolute; top:10px; left:10px; z-index:+1; background-image: linear-gradient(to bottom, #82b007, #99be18, #b0cd25, #c7db31, #dfea3d); -moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;}
.rangeslider__handle:active,.rangeslider--active .rangeslider__handle{background:#c6da2a;}
.rangeslider--vertical .rangeslider__handle{left:-11px;touch-action:pan-x;-ms-touch-action:pan-x;}
.rangeslider--horizontal .rangeslider__handle{top:-11px;touch-action:pan-y;-ms-touch-action:pan-y;}

.range-sliders {display:grid;grid-template-columns:50% 50%; grid-column-gap:2px; justify-items:stretch; position:relative;}
.amount-slider, .months-slider {text-align:center; position:relative;}
.amount-slider output:before {content:"R";}
.output-values {font-size:150%; height:50px; line-height:50px; display:block; font-weight:700; margin:0 0 2em;}
.output-values output {display:block; outline:none;}
.amount-slider .output-values {background:#C4D600; color:white; border-radius:50px 0 0 50px;}
.months-slider .output-values {background:#F1F1F2; border-radius:0 50px 50px 0;}

.range-sliders button {background:none; font:inherit; color:inherit; border:none; text-align:center; display:block; color:#d6d7da; font-size:50px; width:60px; height:60px; cursor:pointer; outline:inherit;}
.range-sliders button:hover {background:#F1F1F2; color:#002855;}

.results {display:grid; font-weight:700; line-height:110%; margin:2em 0 1em; grid-template-columns: repeat(4, 1fr); grid-column-gap:2px;}
.results .title {font-size:12px; text-transform:uppercase; padding:10px 0; position:relative;}
	.results .title span {color:#C4D600; width:100%; position:absolute; top:-4px; left:0px; text-align:center;}
.results .value {background:#F1F1F2; color:#414042; padding:15px 0; }
.results div.value.first {border-radius:50px 0 0 50px;}
.results div.value:last-of-type {border-radius:0 50px 50px 0; color:#C4D600; background:#002855;}

.tap {position:absolute; top:60px; font-size:90%; left:0px; width:100%; display:block; color:#999; text-align:center;}

	@media only screen and (min-width:768px){
		.results .value {font-size:125%; padding:3vh 0;}
		.forMobile {display:none;}
		.amount-btns, .months-btns {display:block; }
		.range-sliders button {float:right; }
		.range-sliders button:last-of-type {float:left;}
		.forDesktop {clear:both; padding:1em 0;}
		.output-values {height:8vh; line-height:8vh;}
		.tap {top:9vh;}
	}
	@media only screen and (max-width:767px){
		.results .title {font-size:10px; font-weight:600; }
		.forDesktop {display:none;}
		.amount-btns, .months-btns {position:absolute; left:0px; bottom:calc(50% - 100px); width:60px;}
		.months-btns {left:auto; right:0px;}
		.range-sliders button {display:block;font-size:50px; width:60px; height:60px;}

	}





/* Need More (Slide Up) */
.need-more {position:fixed; z-index:10; width:100%;  bottom:0px; background:#C4D600; padding:0 1em; border-radius:15px 15px 0 0;  background-image: linear-gradient(to top, #adcb11, #b9d31f, #c6da2a, #d2e234, #dfea3d); box-shadow:0px 0px 5px rgba(0,0,0,0.1);}
.need-more.open {background:#C4D600;}
.need-more-btn {background:none; font:inherit; color:inherit; font-weight:700; font-size:100%; line-height:125%; border:none; padding:20px 0; cursor:pointer; outline:inherit;}
.need-more-btn:before{position:absolute; left:2em; content:'\f077'; font-family:"Font Awesome 5 Free"; font-weight:900}
.need-more.open .need-more-btn:before {content:"\f078";}
.need-more br {display:none;}
.need-more.open br {display:block;}
.need-more .form {background:white; border-radius:15px 15px 0 0; box-shadow:0px -2px 4px rgba(0,0,0,0.1); padding:1em 1em 2em; display:none; }
.need-more input[type="email"] {background:#F1F1F2; color:#002855;}
.need-more .checkbox {display:block; max-width:400px; margin:0 auto; }

	@media only screen and (min-width:768px){
		.need-more { width:90%; max-width:940px; left:calc(50% - 470px);}
		.need-more-btn {font-size:150%;}
	}
	@media only screen and (max-width:767px){
		.need-more { width:90%; left:5%; }
		.need-more-btn {padding:1.25em;}
		.need-more-btn:before {left:1.5em;}
	}
	@media only screen and (max-width:350px){
		.need-more-btn {padding:1em 1.5em;}
		.need-more-btn:before {left:1em;}
	}




.retail-capital {text-align:center; padding:2em 1em 1em;}
.retail-capital img {width:125px; display:inline-block; vertical-align:middle;}
.retail-capital span {display:inline-block; vertical-align:middle; padding:0 1em 0 0; font-size:85%; text-transform:uppercase; color:#888; letter-spacing:1px;}

@media only screen and (max-width:480px){
	.retail-capital img {width:100px;}
}