html{
	background-color: #730026;
	background: url("images/Brdhsbckgrnd.jpg") no-repeat scroll center center;
	background-size: cover;
	width: 100%;
	height: 100%;
	min-height: 960px;
}

body {
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	font-size: 10px;
	width: 100%;
	height: 100%;
	min-width: 320px;
	margin: 0 auto;
	-webkit-box-sizing: border-box; /* For legacy WebKit based browsers */
	-moz-box-sizing: border-box; /* For legacy (Firefox <29) Gecko based browsers */
    box-sizing: border-box;
    display: grid;
	grid-template-rows: auto 1fr;
	grid-template-columns: 1fr;
}


p,h1,h2,h3,h4,h5,ul,ol,dl,img,hr,td,tr,line-height,section,header,footer,label,br,img,input,form,video, html, body {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	border: none;
	outline: none;
}

a {
	cursor: pointer;
	outline: none;
	text-decoration: none;
	color: inherit;
}

img {
	 max-width: 100%
}

ul {
	list-style: none;
}

a[href^="tel"] {
  color: inherit;
  text-decoration: none;
}

	/* megahack for giving parent divs height when child elements floated */

.clearfix {
  clear: both;
}

.clearfix:after {
  clear: both; 
  content: "";
  display: table; 
}

	/* megahack for giving parent divs height when child elements floated */
	
	
	/* overlay styles */
#wheel {
position: absolute;
left: calc(50% - 32px);
top: calc(50% - 32px);
z-index: 12;
}
	
#resultsoverlay {
	display: none;
	position:fixed; 
	width: 50%;
	top:0; 
	left:0; 
	right: 0;
	bottom: 0;
	text-align: center;
	z-index: 10;
	background-color: #560009;
	opacity: .8;
}

#loandetails {
	display: none;
	position: absolute;
	top: 10%;
	left: 10%;
	width: 40%;
	max-width: 400px;
	min-width: 130px;
	height: auto; 
	z-index: 11;
	padding: 0 1em;
	margin: 0 auto;
	box-sizing: border-box;
}
		 
#contactoverlay{
	display: none;
	position:fixed; 
	width: 100%;
	top:0; 
	left:0; 
	right: 0;
	bottom: 0;
	text-align: center;
	z-index: 10;
	background-color: #560009;
	opacity: .8;
	}
	
#contactus {
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 80%;
	max-width: 480px;
	min-width: 256px;
	/*height: 740px;*/ 
	height: 680px;
	background: #FFF;
	border-radius: 10px;
	border: 1px solid #C3BDD3;
	box-shadow: 0px 2px 8px #300009;
	padding: 4em 3em;
	border: 1px solid #C3BDD3;
	z-index: 11;
	box-sizing: border-box;
}

.contactblurb {
	font-family: "Creo-Light", arial, sans-serif;
	clear: right;
	color: #DD0016;
	font-size: 1.8em;
	line-height: 125%;
	padding: 1.5em 0 .5em 0;
}

.cancelbutton {
	float: right;
	cursor: pointer;
}

input[type=text].contacttext,  input[type=email].contacttext {
	font-family: "Creo", arial, sans-serif;
	font-size: 2.4em;
	line-height: 100%;
	border: 1px solid #DD0016;
	color: #DD0016;
	text-align: center;
	border-radius: 8px;
	background-color: #FFF;
	width: 95%;
	padding: 10px;
	margin-bottom: 1em;
	text-align: left;
}

.formtext {
	color: #DD0016;
	font-family: "Creo", arial, sans-serif;
	font-size: 2.4em;
	line-height: 120%;
}

.ask {
	color: #DD0016;
	font-family: "Creo", arial, sans-serif;
	font-size: 3.2em;
	line-height: 120%;
	padding: 1.5em 0px 1em 0px;
	text-align: left;
}

textarea {
	background-color: #FFF;
	border: 1px solid #DD0016;
	padding: 10px;
	margin-bottom: 17px;
	width:95%; 
	max-width: 95%;
	border-radius: 8px;
	height: 8.5em;
	max-height: 8.5em;
}

textarea:hover, textarea:focus, input[type=text].contacttext:hover,  input[type=email].contacttext:hover, input[type=text].contacttext:focus,  input[type=email].contacttext:focus {
	filter: saturate(3.0);
	outline: 0;
}

.responsetext {
	color: #AA16F3;
	font-family: "Creo", arial, sans-serif;
	font-size: 2em;
	line-height: 120%;
	padding: 1em 0 0 0;
	float: left;
	width: 75%;
}

.sendbutton {
	float:right;
}
	
	/* overlay styles */

	

/*//////////////////////////////////////////////////////////////*/
/* output element definitions for the slider */
output { 
  position: absolute;
  /*width: 60px;*/
   width: 120px;  
  height: 35px; 
  text-align: center; 
  font-family: "Creo", arial, sans-serif;
	font-size: 2.8em;
	line-height: 100%;
	color: #DD0016;
  bottom: 175%;
  left: 0;
  margin-left: 0;
}
output:after { 
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  margin-top: -1px;
}
/* -----------------------------------------------------
  (BWM)Greatly pruned-down from
  
  Pure CSS Progress Bars
  GitHub Project: https://github.com/rkchauhan/pure-css-progress-bars/
  By: Ravikumar Chauhan
  Find me on -
  Twitter: https://twitter.com/rkchauhan01
  Facebook: https://www.facebook.com/ravi032chauhan
  GitHub: https://github.com/rkchauhan
  CodePen: http://codepen.io/rkchauhan
-------------------------------------------------------- */
.cssProgress {
  width: 66%;
  max-width: 403px;
  margin: 0;
  position: relative;
  overflow: hidden;
  background-color: #DED6F9;
  height: 10px;
 border: 1px solid #DD0016;
   border-radius: 5px;
   align-self: center;
}

.cssProgress .cssProgress-bar {
  display: block;
  float: left;
  width: 0%;
  height: inherit;
  background: #DD0016;
  -webkit-transition: width 0.8s ease-in-out;
  -moz-transition: width 0.8s ease-in-out;
  -ms-transition: width 0.8s ease-in-out;
	transition: width 0.8s ease-in-out;
  border-radius: 6px;
  margin-left: -1px;
}
/*//////////////////////////////////////////////////////////////*/
/**************** navbar *****************/

nav {
	background-color: #700009;
	opacity: .85;
	height: 16.6666667vh;
	max-height: 140px;
	min-height: 90px;
	filter: saturate(1.25);
}

.navtext {
	/*color: #E3E6FF;*/
	color: #C6C3E6;
	font-family: "Creo", arial, sans-serif;
	font-size: calc(10px + 1vw);
	max-height: 24px;
	line-height: 110%;
}

nav ul {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	height: inherit;
	max-height: 140px;
	padding-top: 10px;
	box-sizing: border-box;
}

nav li {
	display: block;
	text-decoration: none;
	list-style: none;	
	padding-left: 40px;
	white-space: nowrap;		
}

nav ul li a:hover, nav ul li a:active {
	color: #FFF;	
}

.logo {
	width: 10vh;
	max-width: 70px;
	min-width: 30px;
	height: auto;
	margin-top: -.625vh;
}

.nudge {
	margin-top: 4px;
}

nav ul li a.current, nav ul li a.current:hover, nav ul li a.current:active {
	color: #FFF;	
}


/**************** container grids ****************/


.apanel {
	display: grid;
	grid-template-columns: 4% repeat(8, 1fr) 4%;
	grid-column-gap: 2em;/* for older iPads*/
	grid-column-gap: 2%;
	grid-template-rows: auto auto auto 1fr;
	grid-row-gap: 0;
	width: 100%;
	height: 100%;
}

.rightside {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: flex-end;
	padding: 0 3% 4vh 0;
	box-sizing: border-box;
}


/************** content grids *********************/


.one {
	grid-column: 2/-1;
	grid-row: 1/2;
}

.halftop {
	grid-column: 2/6;
	grid-row: 1/2;	
	padding-top: 24%;
}

.fivecoltop {
	grid-column: 2/7;
	grid-row: 1/2;
	padding-top: 19%;
}

.sixcoltop {
	grid-column: 2/8;
	grid-row: 1/2;
	padding-top: 15.5%;
}

.twointro {
	grid-column: 2/6;
	grid-row: 2/3;
}

.two {
	grid-column: 2/-1;
	grid-row: 2/3;
}

.three {
	grid-column: 2/-1;
	grid-row: 3/4;
}

.four {
	grid-column: 1/-1;
	grid-row: 4/5;
}

.halfbckpanel {
	grid-column: 2/6;
	grid-row: 2/3;
	background-color: #FFF;
	opacity: .85;
	border-radius: 10px;
	border: 1px solid #C3BDD3;
	box-shadow: 0px 2px 8px #aaaaaa;
	padding: 7.5em 20px 40px 20px;
	margin: 20px -4% 0 -4%;
}

.fivecolbckpanel {
	grid-column: 2/7;
	grid-row: 2/3;
	background-color: #FFF;
	opacity: .85;
	border-radius: 10px;
	border: 1px solid #C3BDD3;
	box-shadow: 0px 2px 8px #aaaaaa;
	padding: 7.5em 25px 40px 25px;
	margin: 20px -4% 0 -4%;
}

.sixcolbckpanel {
	grid-column: 2/8;
	grid-row: 2/3;
	background-color: #FFF;
	opacity: .85;
	border-radius: 10px;
	border: 1px solid #C3BDD3;
	box-shadow: 0px 2px 8px #aaaaaa;
	padding: 7.5em 25px 40px 25px;
	margin: 20px -4% 0 -4%;
}

.fullcolbckpanel {
	grid-column: 2/10;
	grid-row: auto;
	background-color: #FFF;
	opacity: .85;
	border-radius: 10px;
	border: 1px solid #C3BDD3;
	box-shadow: 0px 2px 8px #aaaaaa;
	padding: 5.5em 50px 65px 50px;
	margin: 20px -4% 0 -4%;
}

.lefthalf {
	float: left;
	/*width: 38%;*/
	width: 40%;
	padding-right: 4%;
	box-sizing: border-box;
}

.righthalf {
	float: right;
	/*width: 62%;*/
	width: 60%;
	padding-left: 4%;
	box-sizing: border-box;
}

.gimmeborder {
	border-left: 2px solid #DED6F9;
}

.arrow {
	grid-column: 3/6;
	grid-row: 3/4;
}

.centerme {
	vertical-align: -50%;
	padding-left: .5%;
}

.EqualLogo {
 	width: 50px; 
 	height: auto;
}


/************ text styles *************/

h1 {
	font-family: "quincy_cfbold", arial, sans-serif;
	font-size: 6.3em;
	line-height: 100%;
	color: #DD0016;
	/*padding-top: 4.5%;*/
	padding-top: 5%;
	font-weight: normal;
}

h2 {
	font-family: "quincy_cfbold", arial, sans-serif;
	font-size: 5.3em;
	line-height: 112%;
	color: #DD0016;
	font-weight: normal;
}

.bitsmaller {
	font-size: 4.8em;
}

.tagline {
	font-family: "quincy_cfbold", arial, sans-serif;
	font-size: 3.3em;
	line-height: 110%;
	color: #DD0016;
	padding: 2% 0 4% 0;
	font-weight: normal;
}

.intro {
	font-family: "Creo-Light", arial, sans-serif;
	color: #6A006D;
	font-size: 2.2em;
	line-height: 140%;
	padding-top: 3%;
}

.bodycopy {
	font-family: "Creo-Light", arial, sans-serif;
	color: #6A006D;
	font-size: 2.4em;
	line-height: 125%;
	margin-top: -2em;
	padding: 0 0 2.5em 0;
}

.detailscopy {
	font-family: "Creo-Light", arial, sans-serif;
	color: #E3E6FF;
	font-size: 2.3em;
	line-height: 125%;
	padding: 2em 0 0 0;
}

.moreinfo {
	width: 26px;
	height: auto;
	padding: 0 0 0 .5em;
	margin-top: -.5em;
	vertical-align: middle;
}

.slidecopy {
	font-family: "Creo", arial, sans-serif;
	color: #6A006D;
	font-size: 2.4em;
	/*line-height: 125%;*/
	line-height: 135%;
	/*padding: 1.7em 0 .5em 0;*/
	padding: 1.25em 0 0 0;
}

.emph {
	font-family: "Creo-SemiBold", arial, sans-serif;
}

.lite {
	font-family: "Creo-Light", arial, sans-serif;
}

.letsgo {
	font-family: "quincy_cfbold_italic", arial, sans-serif;
	font-size: 4.4em;
	line-height: 100%;
	color: #DD0016;
	padding: 10% 0 0 0;
	text-align: right;
	font-weight: normal;
	cursor: pointer;
}

.letsgo:hover {
	filter: saturate(3.0);
}

h3 {
	
}

.footertext {
	font-family: "Creo", arial, sans-serif;
	color: #6C0070;
	font-size: 1.2em;
	line-height: 128%;
}

.resultstext {
	font-family: "quincy_cfbold", arial, sans-serif;
	font-size: 2.8em;
	line-height: 120%;
	color: #DD0016;
	padding-bottom: 1em;
	font-weight: normal;
}

.estimate, .etc {
	font-family: "Creo-Light", arial, sans-serif;
	color: #6A006D;
	font-size: 1.8em;
	line-height: 130%;
	padding: 1.5em 0 0 0;
}

.etc {
	font-family: "Creo-Light", arial, sans-serif;
	color: #6A006D;
	font-size: 1.8em;
	line-height: 130%;
	padding: 0 0 .5em 0;
}

.credits a{
	font-family: "Creo-Light", arial, sans-serif;
	font-size: 1.2em;
	line-height: 120%;
	color: #DD0016;
	text-decoration: none;
}

.credits a:hover {
	filter: saturate(3.0);
}



/************ form styles *************/


.minlabel {
	font-family: "Creo", arial, sans-serif;
	font-size: 2.8em;
	line-height: 100%;
	color: #DD0016;
	float: left;
	padding: 0 0 .5em 0;
}

.maxlabel {
	font-family: "Creo", arial, sans-serif;
	font-size: 2.8em;
	line-height: 100%;
	color: #DD0016;
	float: right;
	padding: 0 0 .5em 0;
}

.resultminlabel {
	font-family: "Creo", arial, sans-serif;
	font-size: 2.5em;
	line-height: 100%;
	color: #DD0016;
	float: left;
	padding: 0 0 .25em 0;
}

.resultmaxlabel {
	font-family: "Creo", arial, sans-serif;
	font-size: 2.5em;
	line-height: 100%;
	color: #DD0016;
	float: right;
	padding: 0 0 .25em 0;
}

.resultoutput {
	font-size: 2.5em;
}

.bigarrow, .emailarrow {
	 width: 62px; 
	 height: auto;
}

.submitarrow {
	float: right;
	width: 58px;
	height: auto;
	padding: 1em 0 0 0;
	cursor: pointer;
}

.submitarrow:hover {
	/*transform: translateX(1em);*/
	filter: saturate(3.0);
	cursor: pointer;
}

.bigarrow:hover,  .emailarrow:hover {
	/*transform: translateX(.25em);*/
	filter: saturate(3.0);
	cursor: pointer;
}

.ziparrow {
	padding: 0 0 0 2em;
	cursor: pointer;
}

.ziparrow:hover {
	/*transform: translateX(1em);*/
	filter: saturate(3.0);
	cursor: pointer;
}

.backup {
	 width: 44px; 
	 height: auto;
	cursor: pointer;
}

.backup:hover {
	/*transform: translateX(-1em);*/
	filter: saturate(3.0);
	cursor: pointer;
}

.makechanges {
 	width: 100%;
 	color: #DD0016;
 	vertical-align: middle;
 	padding: 0;
 }
 
input[type=text] {
	font-family: "Creo", arial, sans-serif;
	font-size: 4em;
	line-height: 100%;
	border: 1px solid #DD0016;
	color: #DD0016;
	text-align: center;
	border-radius: 8px;
	background-color: #DED6F9;
	width: 45%;
	padding: 20px 10px 15px 10px;	
}

input[type=email] {
	font-family: "Creo", arial, sans-serif;
	font-size: 2.4em;
	line-height: 100%;
	border: 1px solid #DD0016;
	color: #DD0016;
	text-align: center;
	border-radius: 8px;
	background-color: #DED6F9;
	width: 66%;
	padding: 10px 10px 10px 10px;	
}

/* Change the autofill yellow to any color ;) */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:active, input:-webkit-autofill:focus {
	background-color: #FFF !important;
	-webkit-box-shadow: 0 0 0 1000px #FFF inset !important;
	transition: background-color 3000s ease-in-out 0s;
	padding-left: 10px;
	color: #DD0016 !important;
}

.button1 {
	background-color: #DED6F9;
	border: 1px solid #D60019;
	color: #DD0016;
	padding: 12px 10px 8px 10px;
	width: 44%;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-family: "Creo", arial, sans-serif;
  font-size: 4em;
  border-radius: 8px;
  margin: 0 2% 0 2px;
}

.button2 {
	background-color: #DED6F9;
	border: 1px solid  #D60019;
	color: #DD0016;
	width: 44%;
	padding: 12px 10px 8px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-family: "Creo", arial, sans-serif;
  font-size: 4em;
  border-radius: 8px;
}

.button3 {
	background-color: #DED6F9;
	border: 1px solid #D60019;
	color: #DD0016;
	width: 16.5%;
	padding: 15px 5px 10px 5px;
  text-align: center;
  line-height: 100%;
  text-decoration: none;
  display: inline-block;
  font-family: "Creo", arial, sans-serif;
  font-size: 2.8em;
  border-radius: 8px;
  margin: 0 1.5% 0 0;
}

.button3:last-child, .button4:last-child {
	margin-right: 0;
}

.button4 {
	background-color: #DED6F9;
	border: 1px solid #D60019;
	color: #DD0016;
	width: 28%;
	padding: 15px 15px 10px 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-family: "Creo", arial, sans-serif;
  font-size: 2.8em;
  border-radius: 8px;
  margin: 0 2% 0 2px;
}

.button1:hover, .button2:hover, .button3:hover, .button4:hover {
	color: #AA16F3;
	border: 1px solid #AA16F3;
}
.buttonPicked {
	color: #800DB7;
	border: 1px solid #800DB7;
} 
.manybutts {
	display: flex;
	justify-content: center;
}

.progressbar {
	padding-top: 4em;
 	display: flex;
 	align-items: flex-end;
}

.centerbar {
	align-self: center;
}

.zipcenter {
	display: flex;
	align-items: center;
}

.slidecontainer {
	position: relative;
	width: 100%;
}

.resultslidecontainer {
	position: relative;
	width: 100%;
	padding-top: 1em;
}

.slider {
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  height: 14px;
  border-radius: 7px;  
  background: #DED6F9;
  border: 1px solid #D60019;
  opacity: 1.0;
  outline: none;
  -webkit-transition: .2s;
  -moz-transition: .2s;
  transition: opacity .2s;
}

input[type=range]::-moz-range-track {
	width: 100%;
  height: 14px;
  border-radius: 7px;  
  background: #DED6F9;
  border: 1px solid #D60019;
  opacity: 1.0;
  outline: none;
  -webkit-transition: .2s;
  -moz-transition: .2s;
  transition: opacity .2s;
} /*for older Firefox browsers*/

input[type=range]::-moz-focus-outer {
    border: 0;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  border-radius: 50%; 
  background: #D60019;
  border: none;
  cursor: pointer;
}

input[type=range]::-moz-range-thumb {
	-moz-appearance: none;
	appearance: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #D60019;
  border: none;
  cursor: pointer;
}

.slider::-ms-thumb {
	appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #D60019;
  border: none;
  cursor: pointer;
}

/****************** MEDIA QUERIES *******************/

@media only screen and (min-width:1400px) {
.navtext { 
	font-size: 24px; 
}
}

@media only screen and (max-width:1280px) {
h2 {
	font-size: 5.2em;
}
.button1, .button2 {
	font-size: 3.9em;
}
.button3 {
	font-size: 2.5em;
}
.bitsmaller { 
	font-size: 4.6em; 
}
input[type=text] {
	font-size: 3.8em;
	width: 55%;	
}
.slidecopy {
	font-size: 2.3em;
}
}

@media only screen and (max-width:1220px) {
.fullcolbckpanel {
	padding: 4.5em 25px 50px 25px;
}
}

@media only screen and (max-width:1180px) {
 h1 {
 	font-size: 6em;
 }
.tagline {
 	font-size: 3.2em;
}
.intro {
	font-size: 2.1em;
}
.letsgo {
	font-size: 4.2em;
}
.bigarrow, .emailarrow {
	 width: 60px; 
	 height: auto;
}
.bodycopy {
	font-size: 2.3em;
}
.detailscopy {
	font-size: 2.2em;
}
.slidecopy {
	font-size: 2.2em;
}
}

@media only screen and (max-width:1140px) {
h2 {
	font-size: 5.1em;
}
.button1, .button2 {
	width: 42%;
	font-size: 3.8em;
}
.button3 {
	font-size: 2.4em;
}
.button4 {
	font-size: 2.7em;
}
}

@media only screen and (max-width:1080px) {
 h1 {
 	font-size: 5.8em;
 }
.tagline {
 	font-size: 3.1em;
}
.intro {
	font-size: 2em;
}
.letsgo {
	font-size: 3.8em;
}
.bigarrow, .emailarrow {
	 width: 56px; 
	 height: auto;
}
.fivecoltop, .fivecolbckpanel {
	grid-column: 2/8;
	padding-top: 12%;
}
.halftop, .halfbckpanel {
	grid-column: 2/7;
	padding-top: 15%;
}
.sixcoltop, .sixcolbckpanel {
	grid-column: 2/9;
	padding-top: 10.5%;
}
.slidecopy {
	font-size: 2.1em;
}
.resultstext {
	font-size: 2.7em;
}
#loandetails {
	max-width: 320px;
}
}

@media only screen and (max-width:1024px) {
.bitsmaller { 
	font-size: 4.5em; 
}
}

@media only screen and (max-width:1000px) {
h2 {
	font-size: 5em;
}
.button1, .button2 {
	font-size: 3.6em;
}
}

@media only screen and (max-width:980px) {
 h1 {
 	font-size: 5.4em;
 }
.tagline {
	font-size: 3em;
}
.intro {
	font-size: 1.9em;
}
.letsgo {
	font-size: 3.6em;
}
.bigarrow, .emailarrow {
	 width: 50px; 
	 height: auto;
}
.bodycopy {
	font-size: 2.2em;
}
.detailscopy {
	font-size: 2.1em;
}
}

@media only screen and (max-width:920px) {
 h1 {
 	font-size: 5.2em;
 }
.letsgo {
	font-size: 3.4em;
}
.bigarrow, .emailarrow {
	 width: 48px; 
	 height: auto;
}
h2 {
	font-size: 4.8em;
}
.button1, .button2 {
	font-size: 3.4em;
}
.button4 {
	font-size: 2.6em;
}
.slidecopy {
	font-size: 2em;
}
}

@media only screen and (max-width:900px) {
.halftop, .halfbckpanel {
	grid-column: 2/8;
}
.sixcoltop, .sixcolbckpanel {
	grid-column: 2/10;
}
.estimate, .etc {
	font-size: 1.7em;
}
}

@media only screen and (max-width:880px) {
.letsgo {
	font-size: 3.2em;
}
.slider::-webkit-slider-thumb {
  width: 26px;
  height: 26px;
}
.slider::-moz-range-thumb {
  width: 26px;
  height: 26px;
}
.slider::-ms-thumb {
	width: 13px;
	height: 13px;
}
.minlabel, .maxlabel, output {
	font-size: 2.7em;
}
.resultminlabel, .resultmaxlabel, .resultoutput {
	font-size: 2.2em;
}
#loandetails {
	left: 7%;
	max-width: 300px;
}
}

@media only screen and (max-width:820px) {
 h1 {
 	font-size: 5em;
 }
.intro {
	font-size: 1.8em;
}
.letsgo {
	font-size: 3.1em;
}
.bigarrow, .emailarrow {
	 width: 46px; 
	 height: auto;
}
}

@media only screen and (max-width:800px) {
 h1 {
 	font-size: 4.8em;
 }
.tagline {
	font-size: 2.9em;
}
.letsgo {
	text-align: left;
}
.fivecoltop, .fivecolbckpanel {
	grid-column: 2/9;
}
.submitarrow {
	width: 55px;
}
.backup {
	width: 42px;
}
.minlabel, .maxlabel, output {
	font-size: 2.6em;
}
.button4 {
	font-size: 2.4em;
}
.resultstext {
	font-size: 2.6em;
	padding-bottom: .5em;
}
input[type=email] {
	width: 50%;
	padding: 12px 10px 10px 10px;
}
.estimate, .etc {
	font-size: 1.6em;
}
.lefthalf {
	width: 100%;
	padding:0 4% 0 0;
}
.righthalf {
	float: left;
	width: 100%;
	padding: 0 0 0 4%;
}
}

@media only screen and (max-width:770px) {
 h1 {
 	font-size: 4.5em;
 }
 .tagline {
	font-size: 2.8em;
}
.button4 {
	font-size: 2.3em;
}
.fullcolbckpanel {
	padding: 3.5em 25px 4em 25px;
}
.minlabel, .maxlabel, output {
	font-size: 2.5em;
}
.slidecopy {
	font-size: 1.9em;
	/*padding-top: 1.2em;*/
	padding-top: 1em;
}
.EqualLogo {
 	width: 48px; 
 	height: auto;
}
responsetext {
	font-size: 1.9em;
}
.righthalf {
	padding: 3em 0 0 0;
}
.gimmeborder {
	border-left: 0px;
}
#loandetails {
	left: 5%;
	max-width: 300px;
}
#contactus {
	height: 640px;
}
}

@media only screen and (max-width:720px) {
 h1 {
 	font-size: 4.3em;
 }
.tagline {
	font-size: 2.6em;
}
.intro {
	font-size: 1.7em;
}
h2 {
	font-size: 4.6em;
}
.button1, .button2 {
	font-size: 3.2em;
}
.bodycopy {
	font-size: 2.1em;
}
.detailscopy {
	font-size: 2em;
}
.button4 {
	font-size: 2.2em;
	padding: 15px 5px 10px 5px;
}
input[type=text] {
	font-size: 3.6em;
	width: 66%;	
}
input[type=email] {
	font-size: 2.2em;	
}
.resultstext {
	font-size: 2.5em;
}
#loandetails {
	left: 5%;
}
.progressbar {
	padding-top: 3em;
}
.lefthalf {
	padding:0;
}
}

@media only screen and (max-width:690px) {
 h1 {
 	font-size: 4em;
 	/*padding-top: 5.5%;*/
 	padding-top: 6%;
 }
.tagline {
	font-size: 2.5em;
}
.twointro {
	grid-column: 2/7;
}
.letsgo {
	font-size: 3em;
}
.bigarrow, .emailarrow {
	 width: 45px; 
	 height: auto;
}
h2 {
	font-size: 4.4em;
}
.button1, .button2 {
	font-size: 3.1em;
}
.button3 {
	font-size: 2.3em;
}
.bitsmaller { 
	font-size: 4.4em; 
}
.fullcolbckpanel {
	padding: 3em 25px 3.5em 25px;
}
.resultstext {
	font-size: 2.4em;
}
}

@media only screen and (max-width:640px) {
.tagline {
	font-size: 2.4em;
}
.logo {
	width: 6vh;
}
.halftop, .halfbckpanel {
	grid-column: 2/9;
}
.EqualLogo {
 	width: 46px; 
 	height: auto;
}
.bodycopy {
	font-size: 2em;
}
.detailscopy {
	font-size: 1.9em;
}
.button3 {
	font-size: 2.2em;
}
.slider {
	height: 12px;
}
.slider::-webkit-slider-thumb {
  width: 24px;
  height: 24px;
}
.slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
}
.slider::-ms-thumb {
	width: 12px;
	height: 12px;
}
.righthalf {
	padding-top: 2.5em;
}
.resultstext {
	font-size: 2.3em;
}
.arrow {
	grid-column: 2/6;
}
.cssProgress {
  height: 8px;
   border-radius: 4px;
}
.cssProgress .cssProgress-bar {
  border-radius: 5px;
}
}

@media only screen and (max-width:600px) {
.twointro {
	grid-column: 2/8;
}
.letsgo {
	font-size: 2.8em;
}
.bigarrow, .emailarrow {
	 width: 44px; 
	 height: auto;
}
.arrow {
	grid-column: 2/8;
}
.submitarrow {
	width: 50px;
}
.backup {
	width: 40px;
}
.minlabel, .maxlabel, output {
	font-size: 2.4em;
}
.resultminlabel, .resultmaxlabel, .resultoutput {
	font-size: 2.1em;
}
.EqualLogo {
 	width: 44px; 
 	height: auto;
}
.footertext {
	font-size: 1.1em;
}
.slidecopy {
	font-size: 1.8em;
}
.ask {
	font-size: 3em;
}
input[type=text].contacttext, input[type=email].contacttext, .formtext {
	font-size: 2.2em;
}
.responsetext {
	font-size: 1.8em;
}
.detailscopy {
	font-size: 1.8em;
}
}

@media only screen and (max-width:560px) {
.bigarrow, .emailarrow {
	 width: 43px; 
	 height: auto;
}
h2 {
	font-size: 4em;
}
.bitsmaller { 
	font-size: 4em; 
}
.button1, .button2 {
	font-size: 3em;
}
.fivecoltop, .fivecolbckpanel {
	grid-column: 2/10;
}
.bodycopy {
	font-size: 1.8em;
}
.detailscopy {
	font-size: 1.7em;
}
input[type=email] {
	width: 66%;
	font-size: 2em;	
}
}

@media only screen and (max-width:520px) {
h1 {
 	line-height: 110%;
 }
.twointro {
	grid-column: 2/9;
}
.bigarrow, .emailarrow {
	 width: 42px; 
	 height: auto;
}
nav li {	
	padding-left: 25px;
	justify-content: space-between;		
}
.EqualLogo {
 	width: 42px; 
 	height: auto;
}
.halftop, .halfbckpanel {
	grid-column: 2/10;
}
.slidecopy {
	font-size: 1.7em;
}
.estimate, .etc {
	font-size: 1.5em;
}
.ask {
	font-size: 3em;
}
input[type=text].contacttext, input[type=email].contacttext, .formtext, .responsetext {
	font-size: 2em;
}
#contactus {
	/*height: 700px;*/
	height: 600px;
}
.nudge {
	margin-top: 3px;
}
.moreinfo {
	width: 24px;
}
.responsetext {
	font-size: 1.6em;
}
}

@media only screen and (max-width:480px) {
nav {
	height: 15vh;
}
.tagline {
	padding-top: 3.5%;
	line-height: 120%;
}
.one {
 	grid-column: 2/10;
 }
.intro {
	font-size: 1.6em;
}
.bigarrow, .emailarrow {
	 width: 40px; 
	 height: auto;
}
.button1, .button2 {
	font-size: 2.8em;
}
.button3 {
	font-size: 2.1em;
}
.submitarrow {
	width: 45px;
}
.backup {
	width: 38px;
}
.minlabel, .maxlabel, output {
	font-size: 2.2em;
}
.resultminlabel, .resultmaxlabel, .resultoutput {
	font-size: 2em;
}
.bodycopy {
	margin-top: -1em;
}
.detailscopy {
	font-size: 1.6em;
}
#loandetails {
	width: 55%;
	left: 2.5%;
}
#resultsoverlay {
	width: 66%;
}
}

@media only screen and (max-width:450px) {
.resultstext {
	font-size: 2.2em;
}
.slidecopy {
	font-size: 1.6em;
}
}

@media only screen and (max-height:440px) {
nav ul {
	padding-top: 25px;
}
}

@media only screen and (max-width:440px) {
.EqualLogo {
 	width: 40px; 
 	height: auto;
}
.submitarrow {
	width: 42px;
}
.backup {
	width: 36px;
}
.minlabel, .maxlabel, output {
	font-size: 2.1em;
}
.resultminlabel, .resultmaxlabel, .resultoutput {
	font-size: 1.8em;
}
.bodycopy {
	font-size: 1.7em;
}
.ask {
	font-size: 2.8em;
}
input[type=text].contacttext, input[type=email].contacttext, .formtext {
	font-size: 1.8em;
}
input[type=email] {
	padding: 10px 5px 8px 5px;
}
.contactblurb {
	font-size: 1.6em;
}
#contactus {
	/*height: 650px;*/
	height: 530px;
}
.moreinfo {
	width: 22px;
	padding-top: .5em;
}
.credits a {
	font-size: 1em;
}
}

@media only screen and (max-width:414px) {
h1 {
	/*padding-top:8.5%;*/
	padding-top:9%;
}
.intro {
	font-size: 1.5em;
}
.twointro {
	grid-column: 2/10;
}
.EqualLogo {
 	width: 38px; 
 	height: auto;
}
.footertext {
	font-size: 1em;
}
h2 {
	font-size: 3.8em;
}
.bitsmaller { 
	font-size: 3.8em; 
}
.button1, .button2 {
	font-size: 2.6em;
}
.button4 {
	font-size: 2.1em;
}
.bodycopy {
	font-size: 1.6em;
}
.detailscopy {
	font-size: 1.5em;
}
input[type=text] {
	font-size: 3.4em;
	width: 66%;	
}
input[type=email] {
	font-size: 1.8em;	
}
.slider {
	height: 10px;
}
.slider::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
}
.slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
}
.slider::-ms-thumb {
	width: 11px;
	height: 11px;
}
.resultstext {
	font-size: 2.1em;
}
.slidecopy {
	font-size: 1.5em;
}
.estimate, .etc {
	font-size: 1.4em;
}
.ask {
	font-size: 2.6em;
}
input[type=text].contacttext, input[type=email].contacttext, .formtext, .responsetext {
	font-size: 1.7em;
}
.contactblurb {
	font-size: 1.5em;
}
nav li {	
	padding-left: 20px;	
}
.logo {
	width: 4.5vh;
}
.responsetext {
	font-size: 1.4em;
}
}

@media only screen and (max-width:360px) {
.tagline {
	padding: 4% 0 6% 0;
}
.letsgo {
	font-size: 2.4em;
}
.bigarrow, .emailarrow {
	 width: 38px; 
	 height: auto;
}
.EqualLogo {
 	width: 36px; 
 	height: auto;
}
h2 {
	font-size: 3.6em;
}
.bitsmaller { 
	font-size: 3.6em; 
}
.button1, .button2 {
	font-size: 2.4em;
}
.button3 {
	font-size: 2em;
}
.button4 {
	font-size: 1.9em;
}
.submitarrow {
	width: 38px;
}
.backup {
	width: 35px;
}
.minlabel, .maxlabel, output {
	font-size: 2em;
}
.resultminlabel, .resultmaxlabel, .resultoutput {
	font-size: 1.7em;
}
.bodycopy {
	font-size: 1.5em;
}
.detailscopy {
	font-size: 1.4em;
	line-height: 128%;
}
.slider::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
}
.slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
}
.slider::-ms-thumb {
	width: 10px;
	height: 10px;
}
.resultstext {
	font-size: 2em;
}
input[type=text].contacttext, input[type=email].contacttext, .formtext {
	font-size: 1.6em;
}
#contactus {
	padding: 3em 2em;
	/*height: 580px;*/
	height: 480px;
}
.ask {
	font-size: 2.4em;
}
.contactblurb {
	font-size: 1.4em;
}
nav li {	
	padding-left: 12px;	
}
.logo {
	width: 4vh;
}
.nudge {
	margin-top: 2px;
}
.righthalf {
	padding-top: 1.5em;
}
.fullcolbckpanel {
	padding: 3em 20px 3.5em 20px;
}
.cssProgress {
  height: 6px;
   border-radius: 3px;
}
.cssProgress .cssProgress-bar {
  border-radius: 4px;
}
}

@media only screen and (max-width:320px) {
nav li {	
	padding-left: 20px;		
}
h2 {
	font-size: 3.4em;
}
.bitsmaller { 
	font-size: 3.4em; 
}
.submitarrow {
	width: 36px;
}
.backup {
	width: 34px;
}
.minlabel, .maxlabel, output {
	font-size: 1.7em;
}
.resultminlabel, .resultmaxlabel, .resultoutput {
	font-size: 1.6em;
}
.button3 {
	font-size: 1.8em;
}
.button4 {
	font-size: 1.8em;
}
input[type=text] {
	font-size: 3.2em;
	width: 66%;	
}
.slider {
	height: 9px;
}
.slider::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
}
.slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
}
.slider::-ms-thumb {
	width: 9px;
	height: 9px;
}
.resultstext {
	font-size: 1.9em;
}
nav li {	
	padding-left: 12px;	
}
.logo {
	width: 3.5vh;
}
.nudge {
	margin-top: 1px;
}
.responsetext {
	font-size: 1.2em;
}
}

@media only screen and (max-height:320px) {
nav ul {
	padding-top: 35px;
}
}