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 {color:rgb(0, 0, 0); font-weight:400; font-size:90%; font-family:Roboto, "Helvetica Neue", 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 {line-height:125%; }
h1 {font-size:300%; padding:1.5vh 0;}
h2 {font-size:150%; padding:0 0 0.75em 0;}
h3 {font-size:200%; line-height:125%; padding:1em 0;}
	h3 strong {font-size:150%; display:block; line-height:125%;}
h4 {font-size:130%; line-height:125%; font-weight:400; padding:1em 0;}
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%; padding:1vh 0;}
		h2 {font-size:150%;}
		h3 {font-size:125%;}
	}
	@media only screen and (max-width:420px){
		h1 {font-size:160%;}
		h2 {font-size:130%;}
		h4 {font-size:100%;}
	}

	
#wrap { width: 600px; height: 390px; padding: 0; overflow: hidden; }
#frame { width: 800px; height: 520px; border: 1px solid black; }
#frame {
	-ms-zoom: 0.75;
	-moz-transform: scale(0.75);
	-moz-transform-origin: 0 0;
	-o-transform: scale(0.75);
	-o-transform-origin: 0 0;
	-webkit-transform: scale(0.75);
	-webkit-transform-origin: 0 0;
}


/* Links */
a {color:rgb(0, 0, 0); }
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] {color: #ffffff;background-color: #0031D3;
    border-color: #0031D3;-webkit-appearance:none; display:inline-block; cursor:pointer; padding:1em; font-size:125%; min-width:300px; margin:1em 0; border:0;  text-align:center !important; text-decoration:none; border-radius:50px; }

	.btn i, .btn span {display:inline-block; vertical-align:middle; margin-right:8px;}
	.btn i {color:#000005; font-size:150%;}
	.btn:hover {
		background-color:#244ED9;
	}

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

.twocolordiv  {
	border: none!important;
	background: linear-gradient(to right, #0031D3 0%, #0031D3 23%, #041B2B 23%, #041B2B 100%)!important;
	
}

.legends p{
	display:inline-block;
	color: black;
	vertical-align: top;
	text-align: center;
	line-height: 10px;
	padding-left: 20px;
	padding-right:10px;
	font-size: 20px;
}
	
	
	@media only screen and (max-width:425px){
		.legends p {padding-right: 20px;}
		.legends {text-align:left;}
	}
	
	@media only screen and (max-width:375px){
		.legends p {padding-right: 10px;}
		.legends {text-align:left;}
	}



/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {

/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}


/* 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:150px;}
	.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 {width:30%;}
		.retail-capital img {width:160px;}
	}
	@media only screen and (max-width:420px) {
		.logo {width:30%;}
		.retail-capital img {width:130px;}
	}
	

table {margin:auto; color:black; border-spacing: 20px;}
td p { padding:0 30px 20px;text-align: left; color: black;}



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

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







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

.feature-icon {display:inline-block; position:relative; z-index:10; margin:0;  }
.feature-icon img {max-width:250px;}
.notification {display:inline-block; position:relative; z-index:10; margin:0;  }
.notification h3 {padding:0 0 1em 0; }
.notification p {padding:0 0 1em 0;}
.notification img {max-width:200px;}
.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; }

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

input, select, textarea {font-size:100%; font-family:Roboto, "Helvetica Neue", Arial, sans-serif; border:0; background:#f8fbfe; border:1px solid #b6d9fb; outline:none; text-align:left; }
input[type="text"], input[type="number"], input[type="email"], input[type="tel"], input[type="password"], textarea {padding:1em; color:rgb(0, 0, 0); width:100%; }
input:focus, textarea:focus { border-color:#e8f2fb; background:#e8f2fb !important;}


input.readonly, input.readonly:focus {background:#f5f7fa !important;; border-color:#f5f7fa;}
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:rgb(0, 0, 0); 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:"Helvetica Neue"; font-weight:900; content:"\f0dd";}
	.select select {-webkit-appearance:none; padding:0 1em; width:100%; height:40px; background:white;}
input:not(:placeholder-shown){background:#f5f7fa;}

/* 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) {
		.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:#e0e5f0; 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:rgb(0, 0, 0); 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: #0031D3; -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: f5a81d; -moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;}
.rangeslider_handle:hover{background: #244ED9;}
.rangeslider__handle:active,.rangeslider--active .rangeslider__handle{background:#0031D3;}
.rangeslider--vertical .rangeslider__handle{left:-12px;touch-action:pan-x;-ms-touch-action:pan-x;}
.rangeslider--horizontal .rangeslider__handle{top:-12px;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; margin:1em 0; background:white; color:rgb(0, 0, 0); }
.output-value output {display:block; outline:none;}
.output-value { border-radius:50px; background:white; border:1px solid #e0e5f0;}
.output-value i {position:absolute; left:1em; top:0; color:#e0e5f0; line-height:54px;}


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


.range-sliders button {background:none; border:none; text-align:center; display:inline-block; color:#e0e5f0; border:1px solid #e0e5f0; 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 {color:#b9c2d6; border-color:#b9c2d6}
.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(3, 1fr); grid-column-gap:4px; }
.results .title { padding:10px 0; position:relative; color:rgb(0, 0, 0);}
.results .value {background:#f5f7fa; height:55px; line-height:55px; }
.results div.value:last-of-type {background:#e8f2fb; }

	@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; padding:4px 0; 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:#0031D3;color:white;border-radius:4px; content:attr(data-tooltip);font-size:13px;line-height:1.3em; text-align:left;}
[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:#0031D3;}
[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:rgb(0, 0, 0);margin:0 3px;font-size:14px;}
span.tooltip i:hover{color:#0031D3}

@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:white; color:black; padding:2em 5vw; font-size:90%;bottom:0; width:100% }