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%}


@font-face {
    font-family: 'Century Gothic';
    src: url('CenturyGothic.woff2') format('woff2'),
        url('CenturyGothic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Century Gothic';
    src: url('CenturyGothic-Bold.woff2') format('woff2'),
        url('CenturyGothic-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Century Gothic';
    src: url('CenturyGothic-Italic.woff2') format('woff2'),
        url('CenturyGothic-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Century Gothic';
    src: url('CenturyGothic-BoldItalic.woff2') format('woff2'),
        url('CenturyGothic-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}



body {background:#fdfdfc; color:black; font-size:90%; font-family:'Century Gothic',CenturyGothic, 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:125%; font-weight:bold;}
h1 {font-size:300%; font-weight:normal; padding:2vh 0; color:#F7941C;}
h2 {font-size:150%; font-weight:bold; padding:0 0 0.75em 0; color:#F7941C;}
h3 {font-size:130%; padding:0 0 1em;}
h4 {font-size:100%; text-transform:uppercase;}
p{line-height:150%; padding:.6em 0; color:black;}
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:767px){
		h1 {font-size:200%;}
		h2 {font-size:150%;}
		h3 {font-size:125%;}
	}
	@media only screen and (max-width:420px){
		h2 {font-size:130%;}
		h3 {font-size:115%; padding:0 0 0.5em;}
	}





/* Links */
a {color:#F7941C; }
input[type=submit], .btn, button, .btn i {-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; font-size:125%; min-width:300px; margin:1em 0; border:0; font-weight:bold; color:white; text-align:center !important; text-decoration:none; border-radius:50px; background:#F7941C; }
	.btn:hover, input[type=submit]:hover {background:#3c7f84;}
	.btn i, .btn span {display:inline-block; vertical-align:middle; margin-right:8px;}
	.btn i {color:white; font-size:150%;}
	.btn:hover i {color:white;}

	@media only screen and (max-width:420px) {
		.btn, input[type=submit] {padding:1em; letter-spacing:0px;}

		.btn i, .btn span {dmargin-right:4px;}
	}




/* Header */
header {background:white; z-index:100; text-align:left; display:grid;grid-template-columns:50% 50%; justify-items:stretch; position:relative; align-items:center; box-shadow:0 1px 5px rgba(25, 25, 25, 0.2)}
	.logo {padding:1em 3vw;}
		.logo img {width:230px;}
	.retail-capital {padding:1em 3vw; text-align:right;}
		.retail-capital img {width:200px; float:right;}
	header img {display:block;}

	@media only screen and (max-width:767px) {
		.logo img {width:180px;}
		.retail-capital img {width:150px;}
	}
	@media only screen and (max-width:420px) {
		.logo img {width:150px;}
		.retail-capital img {width:120px;}
	}





/* Main Structure */
.main-content {display:block; clear:both; padding:2vh; position:relative; z-index:10; text-align:center;}

	@media only screen and (min-width:768px){
		.page-container {}
		.main-content {max-width:900px; margin:0 auto;}
	}
	@media only screen and (max-width:767px){
		.main-content { padding:1em;}
	}




.intro {max-width:700px; margin:0 auto; padding:0.75em;}



/* Form Elements */
.white-container {background:white; clear:both; padding:2.5em; margin:2vh 0 5vh; position:relative; box-shadow:0 1px 20px rgba(25, 25, 25, 0.2); border-radius:10px;}

.feature-icon {display:inline-block; position:relative; z-index:10; margin:0;  }
.feature-icon img {max-width: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:black; padding:5px 0; font-weight:normal;}

.form-grid .form-item {display:block; padding:0; max-width:100%; margin:0; text-align:left;}

input, select, textarea {font-size:100%; font-family:'Century Gothic',Helvetica,Arial,sans-serif; border:0; background:#deeced; border:1px solid green; outline:none; text-align:left; }
input[type="text"], input[type="number"], input[type="email"], input[type="tel"], input[type="password"], textarea {padding:1em; color:black; width:100%; font-weight:bold;}
input:focus, textarea:focus { border-color:#4d7d83; background:#82abae !important; color:white;}


input:-webkit-autofill, input:-webkit-autofill {
    background-color:pink !important;
}


input.readonly, input.readonly:focus, textarea.readonly:focus {border:1px solid white !important; background:white !important; color:black !important;}
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:#4d4f53; font-weight:400;}
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.25em 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;}
input:not(:placeholder-shown){background:white;}

/* Checkboxes */
.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%;}
span.checkbox {display:inline-block; vertical-align:top; margin-right:2em;}

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

	@media only screen and (min-width:768px) {
		.form-grid {display:grid; grid-template-columns:repeat(2, 1fr); grid-column-gap:1.5em; grid-row-gap:1em;}
		.checkbox {display:block; max-width:90%; margin:0 auto; }
	}
	@media only screen and (max-width:767px) {
		.intro {padding:1em;}
		.white-container {padding:1.5em;}
		.form-grid .form-item {padding:0.5em 0;}
		.response {padding:0.5em;}
		.feature-icon img {max-width:125px;}
	}
	@media only screen and (max-width:420px) {
		.white-container {padding:1em;}
	}





/* Range Slider */
.rangeslider, .rangeslider__fill{display:block; border-radius:15px;}
.rangeslider{background:#eee; position:relative;}
.rangeslider--vertical{width:10px;min-height:150px;max-height:100%; margin:0 auto;}
.rangeslider--horizontal{width:95%;min-height:10px;max-width:95%; margin:0 auto;}
.rangeslider--disabled{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=40);opacity:0.4;}
.rangeslider__fill{background:#3c7f84; position:absolute;}
.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:34px;height:34px;position:absolute; background-image: linear-gradient(to top, #f35f0e, #fc982d); -moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%; box-shadow:0px 1px 5px rgba(0,0,0,0.25);}
.rangeslider__handle:after {content:''; width:12px; height:12px; position:absolute; top:11px; left:11px; z-index:+1; background-image: linear-gradient(to top, #d16b03, #c03a02); -moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;}
.rangeslider__handle:active,.rangeslider--active .rangeslider__handle{background:#F7941C;}
.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;}

.amount-slider, .months-slider {text-align:center; position:relative;}
.dragbar {clear:both; padding:1em 35px;}

.amount-slider output:before {content:"R";}
.output-value {font-size:150%; height:55px; line-height:55px; display:block; position:relative; font-weight:bold; margin:1em 0; background:white; color:#F7941C; }
.output-value output {display:block; outline:none;}
.output-value { border-radius:50px; background:white; border:1px solid #ccc;}
.output-value i {position:absolute; left:1em; top:0; color:#ccc; line-height:54px;}


#monthsOutput:after {content:'months'; margin-left:5px;}


.range-sliders button {background:none; border:none; text-align:center; display:inline-block; opacity:0.25; color:#4d4f53; border:1px solid black; font-size:28px; line-height:28px; width:34px; height:34px; border-radius:30px; text-indent:0; padding:0; cursor:pointer; outline:inherit; overflow:hidden;}
.range-sliders button:hover {opacity:1;}
.range-sliders button.less-amount, .range-sliders button.less-months {position:absolute; left:0px; top:2px;}
.range-sliders button.more-amount, .range-sliders button.more-months {position:absolute; right:0px; top:2px;}

.results {display:grid; margin:1.5em 0; grid-template-columns: repeat(4, 1fr); grid-column-gap:4px; font-weight:bold;}
.results .title {font-weight:bold; padding:10px 0; position:relative; color:#F7941C;}
.results .value {background:white; border:1px solid #F7941C; color:#4d4f53; height:60px; line-height:60px; }
.results div.value:last-of-type {background:#3c7f84; border-color:#3c7f84; color:white;}

	@media only screen and (min-width:768px){
		.range-sliders {display:grid;grid-template-columns:repeat(2, 1fr); grid-column-gap:2em; justify-items:stretch; position:relative;}
		.results .value {font-size:125%; }
		.amount-btns, .months-btns {display:block; }
		.range-sliders button {float:right; }
		.range-sliders button:last-of-type {float:left;}
	}
	@media only screen and (max-width:767px){
		.results .title {font-size:10px;font-weight:bold; letter-spacing:0;}
		.results .value {height:45px; line-height:45px; }
		.output-value {font-size:125%; height:45px; line-height:45px; margin:0.5em 0;}
		.output-value i {line-height:44px;}
	}
	@media only screen and (max-width:420px){
		.results {margin:1em 0; grid-column-gap:1px;}
	}







/* Tooltip Styles */
[data-tooltip], .tooltip{position:relative;cursor:pointer;}
[data-tooltip]:before,
[data-tooltip]:after, .tooltip:before,
.tooltip:after{position:absolute;visibility:hidden;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity:0;-webkit-transition:opacity 0.2s ease-in-out,
visibility 0.2s ease-in-out,
-webkit-transform 0.2s cubic-bezier(0.71,1.7,0.77,1.24);-moz-transition:opacity 0.2s ease-in-out,
visibility 0.2s ease-in-out,
-moz-transform 0.2s cubic-bezier(0.71,1.7,0.77,1.24);transition:opacity 0.2s ease-in-out,
visibility 0.2s ease-in-out,
transform 0.2s cubic-bezier(0.71,1.7,0.77,1.24);-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);transform:translate3d(0,0,0);pointer-events:none;}
[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
.tooltip:hover:before,
.tooltip:hover:after{visibility:visible;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);opacity:1;}

.tooltip:before,
[data-tooltip]:before{z-index:10001;border:6px solid transparent;background:transparent;content:"";}
.tooltip:after,
[data-tooltip]:after{z-index:10000;padding:10px 15px;width:250px;background-color:#3c7f84;color:white;content:attr(data-tooltip);font-size:12px;line-height:1.4em;}
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after,
.tooltip-top:before,
.tooltip-top:after{bottom:100%;left:50%;}
[data-tooltip]:before,
.tooltip:before,
.tooltip-top:before{margin-left:-6px;margin-bottom:-12px;border-top-color:#3c7f84;}
[data-tooltip]:after,
.tooltip:after,
.tooltip-top:after{margin-left:-80px;}
[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip-top:hover:before,
.tooltip-top:hover:after{-webkit-transform:translateY(-12px);-moz-transform:translateY(-12px);transform:translateY(-12px);}
span.tooltip i{color:#3c7f84;margin:0 3px;font-size:14px;}
span.tooltip i:hover{color:#54afb6}

@media only screen and (max-width:480px) {
	.results .tooltip {display:block; margin-top:5px;}
.tooltip:after,
[data-tooltip]:after{width:150px;font-size:12px;}
[data-tooltip]:after,
.tooltip:after,
.tooltip-top:after{margin-left:-90px;}
}





/* Background Image */
footer {background:#ebe3d9; padding:2em 5vw; font-size:90%;}