html {
    font-size:5px;
}

body { 
    background:#e1ffec; 
    font-family: 'Oswald', sans-serif;
}

input {
    -webkit-appearance: none;
    border-radius: 0;
}

input:focus, button:focus { outline:none; }
label:hover { cursor:pointer; }
a:hover, a:active, a:focus { text-decoration:none; }

header {
	background: #2eaa60;
	color: #fff;
	display: block;
	height: 4.3rem;
	width: 100%;
    position:relative;
}

header section {
	margin: 0 0 0 54.6rem;
	width: 104rem;
    height:11.5rem;
    position:relative;        
	background: #2eaa60;
    text-align:center;
}

header section:before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 7.5rem 7.2rem 0;
    border-color: transparent #2eaa60 transparent transparent;
    position:absolute;
    left:-7.5rem;
    bottom:0;
}
header section:after { 
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7.2rem 7.5rem 0 0;
    border-color: #2eaa60 transparent transparent transparent;
    position:absolute;
    right:-7.4rem; 
    bottom:0;
}

header section h1 {
	display: inline-block;
    font-size:5.2rem;
	line-height: 11.5rem;
    letter-spacing:1px;
	margin: 0 -4rem;
	padding: 0;
	position: relative;
	text-align: center;
	vertical-align: top;
    z-index:2;
}
header.results section h1 {
    color:#2d7a47;
}

header section h1 .title-callout {
	background: #fff;
	border: 3px solid #e2ae07;
	color: #4bbc86;
	font-size: 5.7rem;
	font-weight: bold;
	padding: 0 2rem;
	text-transform: uppercase;
}

#main.index-main {
	background: url('../img/brick-input-2.png') no-repeat;
	background-position: right 1rem;
    background-size: contain;
    height:146.2rem;
    width:204.8rem;
    padding-top:8.4rem;
}

#main.results-main {
    padding-top:5.6rem;
    height:146.2rem;
    width:204.8rem;
    position:relative;
}
#main.results-main:before {
    content:"";
    position:absolute;
    top:3rem;
    left:0;
    background: url('../img/brick-results-left.png') no-repeat;
    background-size: contain;
    height:146.2rem;
    width:53.4rem;
}
#main.results-main:after {
    content:"";
    position:absolute;
    top:3rem;
    right:0;
    background: url('../img/brick-results-right.png') no-repeat;
    background-size: contain;
    height:146.2rem;
    width:53.4rem;
    z-index:-1;
}

.container {    
    width:161.4rem;
    margin:0 0 0 10rem;
    padding:0;
}

.box {
	background: #59d38a;
    border:4px solid #fff;
    margin-top:6.2rem;
    position:relative;
    height:66rem;
    width:79.5rem;
    border-radius: .2rem;
}

.box p {
	margin: 0;
	padding: 4.5rem 5rem 1.5rem;
	font-size: 3rem;
    color: #338952;
}

.box h3 {    
	color: #2D7A47;
    margin:2.8rem 0 1.8rem;
    line-height:1em;
    font-size:2.6rem;
    font-weight:700;
    text-transform:uppercase;
}

.input-content {    
    padding: 0 7.5rem;
    border-top:1px solid #2CBF67;
    position:relative;
}

.box-tag {
    width:46.8rem;
    height:9.6rem;
    left: -4.2rem;
	position: absolute;
	top: -7rem;
}

.box-tag > div {
    display: block;
	height: 100%;	
	width: 100%;
    background-repeat: no-repeat;
    background-size:cover;
}

#tag-one > div { 
	background-image: url('../img/1-tag.png');	
}
#tag-two > div { 
	background-image: url('../img/2-tag.png');	
}
#tag-three > div { 
	background-image: url('../img/3-tag.png');	
}

.box-tag h2 {
    color:#fff;
    font-size:3.8rem;
    text-transform: uppercase;
    line-height:9rem;
    margin:0;
    margin-left:10.8rem;
}

/* New Home */

#floor-plan-fieldset {
    padding: 3rem 0 2.8rem;
}

#floor-plan-info {    
    vertical-align: top;
    width: 37.5rem;
    display:inline-block;
    float:left;
}

#floor-plan-info > span {
    text-transform: uppercase;
    color: #2d7a47;
    display: inline-block;
    font-size:3.1rem;
}

#floor-plan-info #floor-plan-title {
    color: #fff;
    font-size: 4rem;
    font-weight: 700;
    display: inline-block;
    line-height: 1em;
    letter-spacing: 1px;
}
#floor-plan-info #floor-plan-number {
    color: #fff;
    font-size:2.2rem;
    font-weight:300;
    letter-spacing:1px;
    margin-bottom:6rem;
    line-height:1em;
    display:inline-block;
}

#floor-plan-button {
    position:absolute;
    right:0;
    top:3rem;    
    background:#2EAA60;
    width:34.8rem;
    height:40.8rem;
}

#floor-plan-button a {
    display:block;
    height:14.3rem;
    width: 29.7rem;
    background: url("../img/select-floor-plan-button.png") no-repeat;
    background-size:cover;
    border:none;
    z-index:2;
    text-indent:-9999px;
}

#floor-plan-button:before {
    position:absolute;
    content: "";
    bottom:0;
    left:0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 26.5rem 0 0 34.8rem;
    border-color: transparent transparent transparent #59d38a;
}

#floor-plan-button:after {
    position:absolute;
    content: "";
    top:0;
    right:0;
    height: 0;
    border-style: solid;
    border-width: 0 5rem 4.6rem 0;
    border-color: transparent #59d38a transparent transparent;
}

.info-box {
    background: #49c47b;
    border-bottom: 1px solid #59d38a;
    display: inline-block;
    margin: 0 -1px;
    text-transform: uppercase;
    vertical-align: top;
    width: 31.5rem;
    height:11.2rem;
    padding:2.2rem 2.2rem 2.2rem 15rem;
    position:relative;
}

.info-box img {
    width:10.5rem;
    height:6rem;
    position:absolute;
    top:50%;
    margin-top:-3rem;
    left:2.2rem;
}

.box .info-box p {
    color: #fff;
    display: inline-block;
    padding: 0;
    font-size:2.4rem;
    line-height:1em;
    margin-top: .6rem;
}

.box .info-box p span {
    font-size:4rem;   
}

/* New Home Floorplans Modal */

#floor-plans {
    display: none;
    left: 0;
    top:0;
    position: fixed;
    width: 100%;
    height:100%;
    z-index: 100;
    overflow-x:scroll;
}

#floor-plans::-webkit-scrollbar { height:5rem; }
#floor-plans::-webkit-scrollbar-button { background:#e2ae07; }
#floor-plans::-webkit-scrollbar-track { background:#fce888; }
#floor-plans::-webkit-scrollbar-thumb { background:#e2ae07; border-left:2px solid #c69302; border-right:2px solid #c69302; }

#floor-plans > div {
    width:4000px;
}

.floor-plan-selector {
    background: #59d38a;
    border: 4px #fff solid;
    border-radius: 4px;
    display: inline-block;
    height: 106rem;
    margin:22rem 0 0 4.4rem;
    /*padding: 10% 2%;*/
    position: relative;
    width: 61.7rem;
}
.floor-plan-selector.active {
    border:4px #2eaa60 solid; 
    webkit-box-shadow: 0 2px 2px rgba(0,0,0,.35);
    box-shadow: 0 2px 2px rgba(0,0,0,.35);
}

.floor-plan-selector-header {
    background: #eac52a; /* Old browsers */
    background: -moz-linear-gradient(top,  #eac52a 0%, #e2ae07 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eac52a), color-stop(100%,#e2ae07)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #eac52a 0%,#e2ae07 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #eac52a 0%,#e2ae07 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #eac52a 0%,#e2ae07 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #eac52a 0%,#e2ae07 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eac52a', endColorstr='#e2ae07',GradientType=0 ); /* IE6-9 */
    color: #fff;
    display: block;
    font-size: 5rem;
    text-align: center;
    width: 100%;
    height:10.7rem;
    line-height:10.7rem;
    text-transform:uppercase;
}

.floor-plan-selector-info {
    padding-top:4.6rem;   
}

.floor-plan-selector span {
    color: #338952;
    display: block;
    font-size: 3.5rem;
    padding: 0 0 1rem;
    text-align: center;
}

.floor-plan-selector-image {
    display: block;
    margin: 9rem 0 5rem;
    width: 100%;
}

.floor-plan-selector input {
    position:absolute;   
    left:50%;
}

.floor-plan-selector-button {
    display:block;
    height:14.3rem;
    width: 29.7rem;
    background: url("../img/select-floor-plan-button.png") no-repeat;
    background-size:cover;
    border:none;
    position:relative;
    z-index:2;
    margin:0 auto;
}

#modal-cover {
    bottom: 0;
    background: rgba(225, 255, 236, .87);
    display: none;
    height: 100%;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 90;
}

/* Used Home */

#used-homes fieldset {
    box-shadow:0 3px 0px rgba(62, 109, 81, .1);
}

#used-homes input[type=radio] {
    position: absolute;
    margin: 0;
    margin-top:2px;
    width: 5rem;
    height: 5rem;    
}

#used-homes input[type=radio] + label {
    display: inline-block;
    float:left;
    position: relative;
    z-index:1;
    margin-bottom:0;
    vertical-align: middle;
    text-align:center;
    cursor: pointer;
    height:10rem;
    width:12.5rem;
    line-height: 10rem;
    background:#fff;
    color:#bec4c8;
    font-size:3.8rem;
    font-weight:300;
    border-bottom:3px solid #a6e9c2;
    border-right:1px solid #d5f7e3;
}
#used-homes input[type=radio] + label:last-child {
    border-right:0px;
}

#used-homes input[type=radio]:checked + label {
    background:#d5f7e3;
    color:#59d29d;
    height:11rem;
    margin-top:-1rem;
    border-bottom:3px solid #65ea9b;
    z-index:2;
}

#used-homes input[type=radio]:checked + label:after {
    content:"";
    position:absolute;
    top:1rem;
    right:-2.2rem;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 9.5rem 0 0 2.2rem;
    border-color: transparent transparent transparent #f7f9fb;
}
#used-homes input[type=radio]:checked + label:last-child:after {
 border:none;   
}

#sale-price-wrapper {  
    position:relative;
}

#sale-price-wrapper > div {
    position:absolute;
    top:0;
    left:0;
    background:#2EAA60;
    width:70.4rem;
    height:12.5rem;
}

#sale-price-wrapper > div:before {
    position:absolute;
    content: "";
    bottom:0;
    left:0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 3.6rem 0 0 4.8rem;
    border-color: transparent transparent transparent #59d38a;
}

#sale-price-wrapper > div:after {
    position:absolute;
    content: "";
    top:0;
    right:0;
    height: 0;
    border-style: solid;
    border-width: 0 7.5rem 6.4rem 0;
    border-color: transparent #59d38a transparent transparent;
}

#sale-price-wrapper input[type=number] {
    position:relative;
    z-index:2;
    width:100%;
    height:9rem;
    border:2px solid #a6e9c2;
    text-indent:1em;
}

/* Your Financials */

#your-financials.box { 
    width:106.6rem; 
    height:55.5rem;
    margin-top:7.4rem;
}

.slider-container {
    margin-top:4rem;
}

.slider-container .col-xs-4 {
    max-width:32rem;
}

.slider-container:not(:last-child) .col-xs-4:after {
    content:"";
    display:block;
    width:100%;
    border-bottom:1px solid #2CBF67;
    position: relative;
    bottom: -1rem;
}

.slider-container h3 {
    margin-top:0;
}

.slider-container .form-control, .slider-container .form-control + span {
    background:none;
    border:none;
    color:#fff;
    font-size:4.5rem;
    font-weight:700;
    text-align:left !important;
    -webkit-box-shadow: none;
    box-shadow: none;
    padding:0;
    margin-top:-2.4rem;
    height:auto;
    width:inherit;
    display:inline-block;
}
    .slider-container .form-control + span {
        display:inline-block;
        position: relative;
        left: -3.6rem;
    }
.slider-container:first-child .form-control + span {
    left:-6rem;
}

.slider-input-wrapper { 
    position:relative;
}

.slider-input-wrapper > div:first-child {
    position:absolute;
    top:3.7rem;
    left:0;
    background:#2EAA60;
    width:65.4rem;
    height:9.8rem;
}

.slider-input-wrapper > div:first-child:before {
    position:absolute;
    content: "";
    bottom:0;
    left:0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8.4rem 0 0 12.4rem;
    border-color: transparent transparent transparent #59d38a;
}

.slider-container .slider-input-wrapper > div:first-child:after {
    position:absolute;
    content: "";
    top:-3.7rem;
    right:0;
    background:#2EAA60;
    width:10rem;
    height:3.7rem;
}

.slider-container:first-child .slider-input-wrapper > div:first-child:after {
    position:absolute;
    content: "";
    top:0;
    right:0;
    height: 0;
    border-style: solid;
    border-width: 0 9rem 7rem 0;
    border-color: transparent #59d38a transparent transparent;
}

.slider-container:last-child .slider-input-wrapper > div:first-child { 
    height:9.4rem;
}

.slider-value-min, .slider-value-max {
    position:absolute;
    bottom:-3.6rem;
    left:0;
    font-size:2.2rem;
    color:#e1ffec;
    font-weight:300;
    text-transform:uppercase;
    letter-spacing: 1px;
}

.slider-value-max {
    left:auto;
    right:0;
}

#down-payment-toggle-wrapper {
    position:relative;
}

#down-payment-toggle {
    position:absolute;
    top:3.4rem;
    left:6.4rem;
    box-shadow:1px 1px 0px 1px #338952;
}

#down-payment-toggle a {
    display:block;
    height:5rem;
    width:6.6rem;
    line-height:4.6rem;
    text-align:center;
    background:#49c47b;
    color:#a6e9c2;
    font-weight:300;
    font-size:3.8rem;
    float:left;
}

#down-payment-toggle a.active {
    background: #2eaa60;
}

#down-payment-toggle.dollars-active {
 left:10rem;   
}


/* Submit Button */

#inputs-submit {
    position:absolute;
    right:-82.2rem;
    top:-4px;
}

input[type=submit] {
    background: url('../img/results-button.png') no-repeat;
    height:55.5rem;
    width:78.8rem;
    background-size:contain;
    border:none;
    text-indent:-9999px;
}

/* Results */

#back-button {
    position:absolute;
    left:0;
    height:18rem;
    width:34rem;
    z-index:1;
}

#back-button:before { 
    content:"";
    background: #2eaa60;  
    width:25rem;
    height:100%;
    position:absolute;
    right:0;
}

#back-button:after { 
    content:"";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 16rem 18rem 0;
    border-color: transparent #2eaa60 transparent transparent;
    position:absolute;
    left:-7rem;
}


#back-button button{
    background: url('../img/back-button.png') no-repeat;
    width:29.4rem;
    height:14.5rem;
    background-size:contain;
    border:none;
    text-indent:-9999px;
    margin:2rem 0 0 3rem;
    position:relative;
    z-index:2;
}

#back-button .triangle {
    position:absolute;
    right:-7.4rem;
    top:4.4rem;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7.2rem 7.5rem 0 0;
    border-color: #2eaa60 transparent transparent transparent;
}

.cost-less-wrapper {
    width:54.6rem;
    float:left;
    position:relative;
    margin-top:35rem;
    color: #c69302;
    text-transform: uppercase;
}
.cost-less-wrapper:before {
    position:absolute;
    left:50%;
    top:-2rem;
    margin-left:-8.9rem;
    content:"";
    width:17.8rem;
    height:23.4rem;    
    background: url('../img/down-arrow.png') no-repeat;
    background-size:contain;
}

.cost-less-wrapper span {
    position:relative;
    z-index:1;
}

#cost-less-large {
    font-size: 6rem;
}

.monthly-bills-wrapper {
    width:95.4rem;
    padding:0 2.4rem;
    float:left;
}

.monthly-bills-wrapper h2 {
    font-size:5.7rem;
    color:#4bbc86;
    text-transform:uppercase;
    font-weight:700;
    margin: 4rem 0 1rem;
}    

#vs-box {
    background: url('../img/vs.png') center top no-repeat;
    height:15.6rem;
    background-size:contain;
    width:88rem;
    margin: 0 auto;
}

#vs-box h3 {
    color:#2d7a47;
    font-size:2.4rem;
    letter-spacing:1px;
    text-transform:uppercase;
    margin:3rem 0 1.7rem;
}

#vs-box span {
    font-size:5rem;
    font-weight:700;
    letter-spacing:1px;
    color:#fff;
    line-height:1em;
}

.graph-wrapper {    
    height:88rem;
    position:relative;
    margin-top:2rem;
}

.graph-wrapper .graph {
    width:40rem;
    height:100%;
    float:left;
    border:4px solid #fff;
    position:relative;
    overflow:hidden;
}

.graph-wrapper .graph p {
    color:#e4ffe7;
    text-transform:uppercase;
    font-size:3rem;
}

.graph-wrapper .graph > p {
    position:absolute;
    bottom:0;
    width:100%;
    text-align:center;
    z-index: 15;
    opacity: 0;
}

.graph-wrapper .graph > div {
    position:relative;
}

.graph-wrapper .graph > div > span {
    display:inline-block;
    color:#fff;
    margin-top:2.4rem;
    letter-spacing:1px;
    font-weight:300;
}

#used-home-graph {
    margin-left:10.6rem;
}

.maintenance {
    background:#59d29d;
    height: 33%;
    position: relative;
}

div.maintenance
{
    opacity: 0;
    z-index: 1;
}

.energy {
    background:#2eaa60;
    height: 33%;
    position: relative;
}

div.energy
{
    opacity: 0;
    z-index: 5;
}

.mortgage {
    background:#35844d;
    height: 33%;
    position: relative;
}

div.mortgage
{
    opacity: 0;
    z-index: 10;
}

.helper-box {
    position:absolute;
    background:#74e2a0;
    width:40rem;
    padding:2rem;
    height:23.2rem;
    opacity: 0;
}

.graph-wrapper .helper-box p {
    color: #2eaa60;
    margin:0;
}

.graph-wrapper .helper-box p:first-child {
    font-size:2.2rem;
    letter-spacing:1px;
}

.graph-wrapper .helper-box .value {
    color: #fff;
    font-size: 7rem;
    letter-spacing:1px;
    line-height: 1.35em;
    text-shadow:2px 2px 0 rgba(22, 135, 67, .45);
}

.helper-box:before {
    content:"";
    position:absolute;
    left:-3.8rem;
    top:0;
    background: url('../img/helper-box-arrow-right.png');
    background-size:contain;
    height:23.2rem;
    width:3.9rem;
}

#new-home-graph .helper-box:before {
    background: url('../img/helper-box-arrow-left.png');
    background-size:contain;
    left:auto;
    right:-3.9rem;
}   

#new-home-helper {
    left: -46.6rem;
}

#new-home-helper p:nth-of-type(3), #used-home-maintenance-helper p:nth-of-type(3), #used-home-energy-helper p:nth-of-type(3) {
    color: #168743;
}


#used-home-maintenance-helper, #used-home-energy-helper {
    right: -46.6rem;
}
/*#used-home-maintenance-helper p {
    color: #2eaa60;
}
#used-home-maintenance-helper p:nth-of-type(3) {
    color: #168743;
}
#used-home-maintenance-helper .value {
    color: #fff;
    font-size: 6rem;
}*/

.graph-legend {
    position:absolute;
    right:-29.6rem;
    bottom:0;
    width:21rem;
    border:1px solid #e1ffec;
    box-shadow:0 0px 0px 3px rgba(62, 109, 81, .1);
}

.graph-legend ul {
    padding:0;
    margin:0;
}

.graph-legend li {
    list-style:none;
    color:#fff;
    font-size:2.2rem;
    text-transform:uppercase;
    letter-spacing:1px;
    padding:.25em 0;
}

#send-button button {
    background: url('../img/send-results-button.png') no-repeat;
    width:90.6rem;
    height:17rem;
    background-size:contain;
    border:none;
    text-indent:-9999px;
    margin-top:3rem;
}

/* Modal and Email */

.modal-backdrop {
    background: rgba(225, 255, 236, 1);
}

.modal-backdrop.in { opacity:.87; }

.modal-content {
    background: #59d38a;
    border: 4px #fff solid;
    border-radius: 2px;
    color: #fff;
    font-size: 6rem;
    webkit-box-shadow: 0 2px 2px rgba(0,0,0,.35);
    box-shadow: 0 2px 2px rgba(0,0,0,.35);
}

.modal-header, .modal-footer {
    border: none;
    min-height: 8rem;
    padding:0;
}

.modal-header .close {
    display:block;
    width: 4.4rem;
    height:4.8rem;
    margin:3rem;
    background: url('../img/close-x.png') no-repeat;
    background-size:contain;
}

.modal-body {
    padding:12rem 0 10.5rem;
}

#email {
    border: 2px #2cbf67 solid;
    border-radius: 2px;
    color: #6b6b6b;
    display: block;
    margin: auto;
    padding: 1rem 3rem;
    margin-top:15rem;
    width: 99.4rem;
}
#email-submit {
    display: block;
    margin: auto;
    width: 35.7rem;
    height:17.2rem;
    margin-bottom:6.8rem;
}