body{
	background-color: #cbeaf5;
	font-family: Lato;
	margin: 0;
}
*:focus{
	outline: 0;
}
body p a{
	text-decoration: none;
	color:#12719e;
}
body p a:hover{
  text-decoration: underline;
  color: #000;
}

/***************************************************************************/
/***************************** MOBILE BUILDING *****************************/
/***************************************************************************/
@media (max-width:484px){

	#person1{
		left: 69px !important;
	    bottom: 3px !important;
	}
	#person2{
	    bottom: 21px !important;
	    left: 51px !important;
	}
	#person3{
		left: 72px !important;
    	bottom: 32px !important;
	}
	#person4{
	    bottom: 3px !important;
	    left: 15px !important;
	}
	#person5{
		left: 71px !important;
	    bottom: 32px !important;
	}
	#person6{
	    bottom: 3px !important;
	    left: 15px !important;
	}
	#person7{
		left: 69px !important;
	    bottom: 3px !important;
	}
	#person8{
	    bottom: 2px !important;
	    left: 71px !important;
	}
	#person9{
	    bottom: 3px !important;
	    left: 69px !important;
	}
	#person10{
		bottom: 20px !important;
	    left: 52px !important;
	}



	#warning_sign{
		width: calc(100% - 70px) !important;
		left: 0px !important;
	}



	.total_building{
		width: 120px !important;
		left: -10px !important;
	}
	.built_building{
		width: 121px !important;
		left: -10px !important;
	}
	.shadow_gap{
    	width: 121px !important;
    	left: -10px !important;
    	border-right: 1px solid #1696d2;
	}
	#building_container_50{
		right: -40;
	}
	.empty_windows_50.door img, .empty_windows_100.door img ,.full_windows_50.door img, .full_windows_100.door img {
    	margin-left: 0 !important;
    	left: 0 !important;
	}
     #mobile{
     	display: block !important;
     }
     .mobile_window{
     	display: block !important;
     }     
     .desktop_window{
     	display: none;
     }
     .windows_roof{
     	margin-left: -32 !important;
     }
     #noi, #debt_sizing, #uses, #sources, .button_toggle, .toggle_text, h4, h1, h2, p, #top_instruction, .button_text, #reset-button {
     	margin-left: 20px !important;
     }
     #noi, #debt_sizing, #uses, #sources{
     	width: calc(100% - 40px) !important;
     }
     p, h2, h1, h4, #top_instruction, h3{
     	width: calc(100% - 40px) !important;
     }
     .header_wrapper{
     	width: 100% !important;
     }
     .header_title{
     	width: 123px !important;
     }
     .header_50{
     	margin-right: 20px !important;
     }
/*     #top_instruction{
     	width: calc(100% - 60px) !important;	
     }*/
     .explainer{
     	/*width: calc(100% - 60px) !important;	*/
     	padding: 10px;
     	width: calc(100% - 40px) !important;
     }
     #noi_label{
     	width: 68px !important;
     }
     #help_noi{
		margin-left: -39px !important;
		left: 0px !important;
     }
     #s50_debt_income{
     	display: block !important;
	    position: relative !important;
    	left: 20px !important;
    	top: 5px !important;
    	margin-bottom: -11px !important;
     }
     #s100_debt_income{
     	display: block;
    	position: relative;
    	top: 0px;
	    left: 120px;
    }
    #s50_debt_value{
    	margin-left: 0px !important;
    }
    #debt_marker_100{
    	display: none !important;
    }
    .warning_icon.rent_high{
    	left: 157px !important;
    	width: 0px !important;
    }
    .noi.explainer .warning_icon {
    	right: -23px !important;
    }
	.s50_label, .s50_noi_label, .s100_noi_label, .s50_blank_label, .s100_blank_label {
	    margin-left: -20px !important;
	    font-size: 13px !important;
	    width: 101px !important;
	}
	.s100_label{
	    margin-left: -20px !important;
	    font-size: 13px !important;
	    width: 1px !important;
	}
	#debt_marker_100{
		left: calc(100% - 21px) !important;
	}
	.control_container label{
		font-size: 13px !important;
    	width: 111px !important;
    	margin-right: 37px !important;
	}
	input[type=text] {
		clear: both !important;
		margin-left: 22px !important;
	}
	.control_container.tall{
		height: 129px !important;
	}
	.control_container{
		height: 109px !important;
		width: 100%	 !important;
	}
	.control_container.ami_label{
		height: 0px !important;
	}
	.warning_icon{
		margin-left: 20px !important;
	}
	#ami_label{
		text-indent: 19px !important;
	}
	.multiplier{
    	top: 30px !important;
    	left: -81px !important;
	}
	.gap_apt_label{
	    position: fixed;
	    bottom: 28px;
	    padding: 3px;
	    color: black !important;
	    margin-left: -14px;
	}
	.gap_ami_label{
	    position: fixed;
	    bottom: 13px;
	    padding: 3px;
	    color: black !important;
	    margin-left: -14px;
	}
	.gap_credit_label{
  		position: fixed;
    	bottom: 0px;
	    color: black !important;
    	width: 120px;
    	margin-left: -10px;
	}
	.gap_label{
		float: none !important;
	}
	.gap_container{
    	width: 124px !important;
    	height: 58px !important;
    	left: -11px !important;
	}
	.gap_amount{
		font-size: 16px !important;
	}
	.urban-switch.small{
		left: 124px !important;
	}
	.urban-switch.small.s100{
		left: 208px !important;
	}

	#renter_row_two{
		width: 100% !important;
	}
	#ami_label{
		top: -36px !important;
	    margin-left: 135px !important;
	}
	#percent_of_rent_label{
    	top: 12px !important;
    	left: 13px !important;
	}
	#reset-button{
		display: none !important;
	}
	#path50,#path100,#shrubs50,#shrubs100,#dog,#wheelbarrow{
		display: none !important;
	}





}
.mobile_window{
	display: none;
}
#mobile{
	width: 0;
	height: 0;
	top: 0;
	left: 0;
	position: fixed;
	display: none;
}

/***************************************************************************/
/********************************* TABLET **********************************/
/***************************************************************************/
@media (max-width:943px){
	#mobile_rollover_text{
		display: block !important;
		opacity: 0;
		pointer-events: none;
		position: fixed;
		top: 120px;
		left: 20px;
		background: #231f20;
	    /*top: 0px;*/
	    font-style: italic;
	    font-size: 14px;
	    width: calc(100% - 74px);
	    color: white;
	    padding: 17px;
	    z-index: 999999999;
	}
     #tablet{
     	display: block !important;
     } 
     #mobile_spacer{
     	height: 200px !important;
     }
     .navTab.desktop{
     	display: none;
     }
     .navTab.mobile{
     	display: block !important;
     	width: 19% !important;
     }
}
.navTab.mobile{
	display: none;
}
#mobile_spacer{
	height: 0px;
}
#tablet{
	width: 0;
	height: 0;
	top: 0;
	left: 0;
	position: fixed;
	display: none;
}

/***************************************************************************/
/***************************** MOBILE IMAGES *******************************/
/***************************************************************************/
@media (max-width:1315px){
     #warning_sign{
/* 	    bottom: -23px !important;
		right: 295px !important;
		pointer-events: none;*/
     }
     #small_desktop{
     	display: block !important;
     }     
}
#mobile_credits{
	display: none;
}
@media (max-width:716px){
	#mobile_credits{
		display: block !important;
		opacity: 0;
		pointer-events: none;
		width: calc(100% - 20px);
		position: absolute;
		left: 10px;
		top: 10px;
		background: white;
		z-index: 999999999999999;
		padding-bottom: 30px;
		-webkit-box-shadow: 4px 4px 16px #888888;
		-moz-box-shadow: 4px 4px 16px #888888;
		box-shadow: 4px 4px 16px #888888;
	}
	#mobile_credits #credits_left_col, #mobile_credits #credits_right_col{
		width: 100%;
		margin-left: 5px;
	}
	#mobile_credits .credits_name span {
     	display: inline; 
	    font-style: italic;
	    font-size: 13px;
	    margin-left: 6px;
	}
	#mobile_credits .credits_name a {
	    cursor: pointer;
	    text-decoration: none;
	    color: #000;
	    font-size: 13px;
	    font-weight: bold;
	}
	#mobile_credits .credits_h2{
		margin-bottom: -9px;
	}
	#mobile_credits #disclaimer {
	    display: inline-block;
	    padding-left: 15px;
	    margin-top: 8px;
	    font-size: 9px;
	    font-style: italic;
	    padding-right: 9px;
    }
	#mobile_credits #credits_title {
	    margin-left: 15px;
	    margin-top: -27px;
		margin-bottom: 6px;
    	font-size: 21px;
	}
	.close_button.mobile_credits{
	    height: 35px;
	    width: 24px;
	    position: relative;
	    right: calc(19px - 100%);
    	top: -6px;
	}
	#leftHill,#trees, #crane, #cloud2, #contractor, #mouth_container, #hand, #credits, #text_credits{
		display: none !important;
	}
	#fader{
		display: none;
	}
	#mobile_fader{
	    position: fixed;
    	bottom: 0px;
    	left: 0px;
    	z-index: 200;
    	pointer-events: none;
	}
}
@media (max-width:484px){
	#leftHill,#trees, #crane, #cloud1, #buildings_rightHill, #buildings_leftHill{
		display: none !important;
	}
}


#small_desktop{
	width: 0;
	height: 0;
	top: 0;
	left: 0;
	position: fixed;
	display: none;
}

/***************************************************************************/
/*************************** TEMP CONTROLS ***************************/
/***************************************************************************/

#pbottom{
	margin-bottom: 100px;
}
#debt_sizing, #sources{
	display: block;
	float: left;
	clear: both;
	margin-bottom: 20px;
}
/*#sources{
	margin-left: 2px;
}*/
#uses{
	clear: both;
	margin-bottom: 20px;
}
/***************************************************************************/
/*************************** NAV HEADER ************************************/
/***************************************************************************/
#subNav{
    position: fixed;
    top: 49px;
    width: 100%;
    height: 40px;
    color: #d1d2d4;
    background: #231f20;
    z-index: 999;
    -webkit-transition: top 0.25s linear;
    -moz-transition: top 0.25s linear;
    -o-transition: top 0.25s linear;
    transition: top 0.25s linear;
}
.navTab{
	float: left;
	display: inline-block;
    width: 20%;
    text-align: center;
    vertical-align: middle;
    height: 29px;
    padding-top: 11px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
}
.navTab.active{
	background-color: #1696d2;
	color: white;
}
.navTab:hover{
	background-color: #12719e;
	color: white;
}
#nav_arrow{
    width: 0;
    height: 0;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    position: fixed;
    top: 80px;
    border-bottom: 9px solid #cee7f2;
    z-index: 1000;
    left: 8%;
    -webkit-transition: top 0.25s linear;
    -moz-transition: top 0.25s linear;
    -o-transition: top 0.25s linear;
    transition: top 0.25s linear;
}
/***************************************************************************/
/*************************** TEXT STYLES ***********************************/
/***************************************************************************/
h1{
	color: #1696d2;
	font-size: 36px;
	font-weight: bold;
	margin-bottom: 0px;
	margin-top: 150px;
}
h1 span{
	color: black;
	font-weight: 500;
}
h2{
	color: black;
	font-size: 28px;
	font-weight: bold;
	margin-bottom: 0px;
}
h3{
	font-size: 22px;
	font-weight: normal;
	margin-bottom: 0px;
	color: black;
}
h4{
    margin-left: 60px;
    top: -39px;
    position: relative;
    font-size: 28px;
    width: 424px;
    font-weight: 300;
}
h3 span{
    font-weight: normal;
    font-style: italic;
}
h2 span.breaker{
	display: block;
}
p{
	width: 424px;
	line-height: 2;
}
#top_instruction{
	width: 424px;
	font-style: italic;
	line-height: 1.5;
    margin-top: -12px;
    margin-bottom: 23px;
    font-size: 14px;	
}
h2, h1, h3{
	width: 424px;
}
/***************************************************************************/
/*********************** SPACING AND LAYOUT ********************************/
/***************************************************************************/
#noi, #debt_sizing, #uses, #sources{
	margin-left: 60px;
	margin-bottom: 80px;
}
h1, h2, p, h3{
	margin-left: 60px;
	margin-bottom: 40px;	
}
section.step{
	margin-bottom: 120px;
}

/***************************************************************************/
/*************************** SCROLLING *************************************/
/***************************************************************************/

/***************************************************************************/
/******************************** BUILDINGS ********************************/
/***************************************************************************/

.building{
	position: fixed;
	bottom: 53px;
	right: 30;
	font-family: Lato;
	color: white;
	vertical-align: middle;
	text-align: center;
	width: 176px;
	/*border: 2px solid #ccc;*/
	/*float: right;*/
	z-index: 209;
}
.shadow_gap{
	position: absolute;
	max-height: 6px;
	min-height: 6px;
	border: none;
	background-color: rgba(0,0,0,.1);
	width: 178px;
	z-index: 220;
}
.total_building, .built_building{
	position: absolute;
	bottom: 0px;
	background-color: rgba(205,230,241,.7);
}
.total_building{
	width: 176px;
	border: 1px solid #0c94d3;
	z-index: 212;
	padding-top: 5px;

}
.built_building{
	width: 178px;
	background-color: #1696d2;
	z-index: 212;
}
.roof_img{
	position: absolute;
    bottom: 0px;
    left: -21px;
    z-index: 212;
}
#roof_100, #roof_50 {
	position: absolute;
	z-index: 201;
	background-color: #1696d2;
/*    border-top: 67px solid transparent;
    border-bottom: 0px solid #1696d2;
    border-left: 35px solid transparent;
    border-right: 42px solid transparent;*/
    height: 0px;
    width: 220px;
    left: -19px;
}

.i_bar_top, .i_bar_bottom{
	background-color: #000;
	height: 3px;
	width: 19px;
	position: absolute;
	z-index: 216;
}
.i_bar_container{
	margin-left: 9px;
}
.i_bar{
	position: absolute;
	width: 3px;
	margin-left: 6.5px;
	background-color: #000;
	z-index: 216;
}
.gap_container{
	position: absolute;
	width: 144px;
	height: 114px;
	left: 16px;
	color: #fff;
	background-color: rgba(35,31,32,.2);
	z-index: 309;
}
.gap_label{
	font-size: 16px;
	font-weight: normal;
    float: left;
    margin-left: 10px;
    margin-top: 8px;
    text-align: left;
}
.gap_label span{
	font-size: 12px;
    display: block;
    text-transform: uppercase;
    margin-bottom: 4px;
    color: #d1d2d4;
}
.gap_label span i{
	font-style: normal;
}
.gap_amount{
	font-size: 19px;
    font-weight: bold;
    float: left;
    clear: both;
    margin-left: 9px;
    margin-top: 5px;
}
.needed{
	float: left;
	clear: both;
    margin-left: 10px;
    font-size: 12px;
    font-style: italic;
    margin-top: 4px;
}
.balcony{
	position: absolute;
	left: -17px;
}

.windows{
	position: absolute;
	z-index: 215;
}
.windows_bottom{
	bottom: -2;
}
.windows_roof{
	margin-left: -22px;
    margin-bottom: -1px;
}
#person1{
	left: 127px;
    bottom: 3px;
}
#person2{
    bottom: 16px;
    left: 105px;
}
#person3{
	left: 79px;
    bottom: 32px;
}
#person4{
    bottom: 3px;
    left: 32px;
}
#person5{
	left: 129px;
    bottom: 32px;
}
#person6{
    bottom: 3px;
    left: 80px;
}
#person7{
	left: 31px;
    bottom: 2px;
}
#person8{
    bottom: 2px;
    left: 129px;
}
#person9{
    bottom: 2px;
    left: 79px;
}
#person10{
	bottom: 16px;
    left: 60px;
}

.person_50, .person_100{
	opacity: 0;
}

#building_container_50{
	/*background-color: #cbeaf5;*/
	clear: both;
	right: 30px;
}
#building_container_100{
	clear: both;
	right: -350px;
}
.empty_windows_50, .empty_windows_100{
	position: relative;
	/*top: -44px;*/
	overflow: hidden;
}
.full_windows_50, .full_windows_100{
	position: relative;
	/*bottom: 0px;*/
	overflow: hidden;
} 
.full_windows_50 img, .full_windows_100 img{
	position: absolute;
	bottom: 0;
	left: 0;
}
.full_windows_50.door img, .full_windows_100.door img{
	position: absolute;
	bottom: 3;
	left: 26;
}
.empty_windows_50.door img, .empty_windows_100.door img{
	margin-left: 26;
}
/***************************************************************************/
/******************************** BACKGROUND *******************************/
/***************************************************************************/

#ground_container img{
	position: fixed;
}
#leftHill{
	bottom: 0px;
	left: 0px;
	z-index: 201;
}
#rightHillDirt{
	bottom: 0px;
	right: -4px;
	z-index: 202;
}
#rightHill{
	bottom: 0px;
	right: 0px;
	z-index: 203;
	opacity: 0;
}
#road{
	bottom: -3px;
	right: 487px;
	z-index: 204;
}
#sidewalk{
	bottom: 0px;
	right: -9px;
	z-index: 204;
	opacity: 0;
}
#path50{
	bottom: 13px;
	right: 125px;
	z-index: 204;
	opacity: 0;
}
#path100{
	bottom: 13px;
	right: -225px;
	z-index: 204;
	opacity: 0;
}
#shrubs50{
	bottom: 49px;
	right: 94px;
	z-index: 999;
	opacity: 0;
}
#shrubs100{
	bottom: 49px;
	right: -225px;
	z-index: 999;
	opacity: 0;
}
#contractor{
	bottom: -13;
    right: 36%;
    z-index: 299;
}
#hand{
	bottom: 86px;
    right: calc(36% + 93px);
    z-index: 10000000;	
}
#mouth{
    bottom: 156px;
    right: calc(36% + 81px);
    z-index: 300;
    width: 14px;
    height: 0px;
}
#crane{
	top: -20;
    right: -130px;
    z-index: -1;
}

#buildings_rightHill{
	bottom: 30px;
    right: 9%;
    z-index: -2;
}
#buildings_leftHill{
	bottom: -30px;
    left: calc(40% - 40px);
    z-index: -2;
}
#trees{
	bottom: 45px;
    right: 424px;
    z-index: -2;
}
#bike{
    bottom: 61px;
    right: 460px;
    z-index: 203;
    opacity: 0;
}
#dog{
    bottom: 3px;
    right: 222px;
    z-index: 213;
    opacity: 0;
}
#wheelbarrow{
    bottom: 5px;
    right: 434px;
    z-index: 213;
}
#cloud1{
	pointer-events: none;
	z-index: -2;
	opacity: .54;
	top: 90px;
    -webkit-animation: backandforth_A 2000s ease 0s;
    -webkit-animation-iteration-count:infinite;
    animation: backandforth_A 2000s ease 0s;
    animation-iteration-count:infinite;
}
#cloud2{
	pointer-events: none;
	z-index: -2;
	opacity: .57;
    top: 124px;
    -webkit-animation: backandforth_B 1700s ease 0s;
    -webkit-animation-iteration-count:infinite;
    animation: backandforth_B 1700s ease 0s;
    animation-iteration-count:infinite;

}
#cloud3{
	pointer-events: none;
	z-index: -2;
	opacity: .54;
    top: 80px;
    -webkit-animation: backandforth_C 2100s ease 0s;
    -webkit-animation-iteration-count:infinite;
    animation: backandforth_C 2100s ease 0s;
    animation-iteration-count:infinite;
}
#cloud4{
	pointer-events: none;
	z-index: -2;
	opacity: .57;
    top: 216px;
    -webkit-animation: backandforth_D 1200s ease 0s;
    -webkit-animation-iteration-count:infinite;
    animation: backandforth_D 1200s ease 0s;
    animation-iteration-count:infinite;
}
@-webkit-keyframes backandforth_A {0%{left:20%;} 50%{left:100%;} 100%{left:20%;}}
@keyframes backandforth_A {0%{left:20%;} 50%{left:100%;} 100%{left:20%;}}

@-webkit-keyframes backandforth_B {0%{left:42%;} 50%{left:90%;} 75%{left:-10%;} 100%{left:42%;}}
@keyframes backandforth_B {0%{left:42%;} 50%{left:90%;} 75%{left:-10%;} 100%{left:42%;}}

@-webkit-keyframes backandforth_C {0%{left:62%;} 30%{left:99%;} 75%{left:10%;} 100%{left:62%;}}
@keyframes backandforth_C {0%{left:62%;} 30%{left:99%;} 75%{left:10%;} 100%{left:62%;}}

@-webkit-keyframes backandforth_D {0%{left:82%;} 20%{left:110%;} 75%{left:8%;} 100%{left:82%;}}
@keyframes backandforth_D {0%{left:82%;} 20%{left:110%;} 75%{left:8%;} 100%{left:82%;}}


/***************************************************************************/
/*************************** DASHBOARD CONTROLS ***************************/
/***************************************************************************/
#top_instruction{
    margin-left: 60px;
}
#noi_explainer{
	margin-top: 16px;
}
.explainer{
	position: relative;
	font-size: 14px;
    font-style: italic;
    width: 384px;
    padding: 20px;
	background: rgba(255,255,255,.4);
    margin-bottom: 10px;
}
.header_wrapper{
	border-bottom: 1px solid #231f20;
    width: 426px;
    margin-bottom: 25px;
    height: 50px;
}
.header_wrapper div{
	display: inline-block;
}
.header{
	display: inline-block;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 14px;
    margin-top: 20px;
}
.header_title{
	width: 213px;
}
.header_50{
    margin-right: 44px;
}
.header_50 span, .header_100 span{
	font-size: 12px;
}

.control_container{
	height: 79px;
	width: 440px;
	display: block;
}
.control_container label{
	float: left;
    clear: right;
    display: inline-block;
    width: 184px;
    margin-right: 12px;
    font-size: 15px;
}
.label_wide{
	width: 196px !important;
    margin-right: 0px !important;
}
.control_container label span{
    font-size: 12px;
    margin-left: 3px;
}
.control_container .control.range{
	width: 80px;
}
.control_container .control.text{
	width: 50px;
}
.control_container.new_source, .control_container.new_source_button{
	margin: 3px 0 3px 0px;
	height: 0px;
}
.control_container.new_source{
	height: 29px;
	overflow: hidden;
}
.control_container.new_source_button{
	height: 56px;
}
.control_container.ami_label{
	height: 0px;
	/*margin-bottom: -7px;*/
}
.control_container.tax_credit_equity{
	position: relative;
}

#click_to_add_sources{
    text-transform: uppercase;
    color: white;
    background-color: #1696d2;
    font-style: normal;
    cursor: pointer;
    width: 200px;
    padding: 13px;
    margin-top: 10px;
}
#click_to_add_sources:hover, #report_button:hover, .button_text:hover{
	background-color: #231f20;
}
.s50_label, .s100_label, .s50_noi_label, .s100_noi_label, .s50_blank_label, .s100_blank_label{
	display: inline-block;
	margin-left: 20px;
	width: 84px;
    text-align: left;
    font-size: 15px;
}
.multiplier{
    float: left;
    background: transparent;
    color: black;
    top: 8px;
    height: 20px;
    position: relative;
    left: -3px;
    padding-left: 6px;
    padding-right: 4px;
    vertical-align: middle;
    text-align: center;
    opacity: 0 !important;
}
.control_container.invalid .multiplier{
/*	border: 2px solid #db2b27;
 	border-right: none;
    height: 16px;
    background-color: #e3e3e3;
    color: #e3e3e3;*/
    display: none;
}
.s50_label.replacement_reserve_rate{
	width: 86px;
    margin-left: 0px;
    font-size: 12px;
    font-style: italic;
}
.s100_blank_label{
	width: 100%;
}
.other_source.other{
	pointer-events: visible !important;
	display: inline-block;
	margin-left: 20px;
	width: 84px !important;
}
.control_container.debt, .control_container.noi, .control_container.new_source{
	font-style: italic;
}
#debt_label, #noi_label, #debt_label_income, #debt_label_value{
	width: 172px;
	float: left;
}
#noi_label{
	width: 168px;
	float: left;
}
.s50_noi_label, .s100_noi_label, #noi_label, #s50_debt_income, #s50_debt_value, #s100_debt_income, #s100_debt_value, #debt_label_income, #debt_label_value{
	font-style: normal;
	font-weight: bolder
}
input.new_source_label{
	text-indent: 4px;
	width: 205px;
    margin-right: 20px;
    text-align: left !important;
    font-size: 16px !important;
    background-color: transparent !important;
    border-bottom: 1px solid #a2d4ec !important; 
    font-style: italic;
    pointer-events: visible !important;
}
.control_container.noi, .control_container.debt{
	margin-bottom: 5px;
}

#debt_sizing{
	margin-top: -56px;
}

#debt_label{
	text-indent: 97px;
}
.debt_marker{
	height: 14px;
	position: absolute;
}
#debt_marker_50{
    left: 273px;
    top: 13px;
}
#debt_marker_100{
    left: -22px;
    top: 21px;
}
.loan_value{
	margin-top: 4px;
}
.larger{
    color: #9d9d9d;
}
#bracket_debt{
	position: relative;
    margin-left: 105px
}
#sources{
	margin-top: -75px;
}

/***************************************************************************/
/****************************** WARNINGS ***********************************/
/***************************************************************************/
.explainer.warning{
	background-color: rgba(219,43,39,.3);
	position: relative;
}

.control_container.warning{
	color: #db2b27;
	font-weight: bold;
}
.control_container.warning .multiplier{
	color: #db2b27;
}
.control_container.warning .switch{
	background-color: #db2b27 !important;
}
.control_container.warning .switch:hover{
	background-color: #a82020 !important;
}
.control_container.warning .help-button {
    background: url('../images/help-button_warning.png');
}
.control_container.warning .help-button:hover {
    background: url('../images/help-button_warning_hover.png');
}
.control_container.warning input[type=text]{
	color: #db2b27;
	font-weight: bold;
}
.control_container.warning input[type=range]::-webkit-slider-thumb {
    background: #db2b27;
}
.control_container.warning input[type=range]::-moz-range-thumb {
    background: #db2b27;
}
.control_container.warning input[type=range]::-ms-thumb {
    background: #db2b27;
}
.control_container.warning input[type=range]::-moz-range-track {
	background: #d7927a;
}
.control_container.warning input[type=range]::-ms-fill-lower {
    background: #d7927a;
}
.control_container.warning input[type=range]::-ms-fill-upper {
    background: #d7927a;
}
.control_container.warning input[type=range]:focus::-ms-fill-lower {
    background: #d7927a;
}
.control_container.warning input[type=range]:focus::-ms-fill-upper {
    background: #d7927a;
}
.control_container.warning input[type=range]:focus::-webkit-slider-runnable-track {
    background: #d7927a;
}
.control_container.warning input[type=range]::-webkit-slider-runnable-track {
    background: #d7927a;
}


.warning_icon{
	display: inline;
	position: relative;
	top: -2px;
	margin-left: 5px;
	cursor: pointer;
}
.noi.explainer .warning_icon{
	right: -30px;
    top: 31px;
	position: absolute;
}
.warning_icon.tax_credit_equity, .warning_icon.tax_credit_50, .warning_icon.tax_credit_high{
	float: right;
    margin-left: 6px;
    top: 0;
    left: 0;
    display: inline-block;
    position: initial;
}
#s100_tax_credit_equity, #s50_tax_credit_equity{
	position: initial;
}

/*#warning_sign{
	position: fixed;
	bottom: 200px;
	right: 600px;
	width: 0;
	height: 0;
	border: 150px solid transparent;
	border-bottom-color: red;
}

#warning_sign:after {
	content: '';
	position: absolute;
	left: -150px;
	top: 150px;
	width: 0;
	height: 0;
	border: 150px solid transparent;
	border-top-color: red;
}
*/

#warning_sign {
    position: fixed;
    bottom: 137px;
    right: calc(36% - 325px);
    /* height: 220px; */
    width: 275px;
    /* line-height: 200px; */
    /* text-align: center; */
    padding: 25px;
    margin: 10px 10px;
    z-index: 100000;
    opacity: 0;
    background: white;
	-webkit-box-shadow: 4px 4px 10px 0px rgba(0,0,0,0.1);
	-moz-box-shadow: 4px 4px 10px 0px rgba(0,0,0,0.1);
	box-shadow: 4px 4px 10px 0px rgba(0,0,0,0.1);
	cursor: pointer;

}
#warning_text{
	border-left: 5px solid #db2b27;
    padding-left: 10px;
}


.control_container.disabled{
	color: #9d9d9d;
}
.control_container.disabled input[type=text]{
	color: #9d9d9d;
}
.control_container.disabled input{
	pointer-events: none;	
}
.control_container.disabled input[type=range]::-webkit-slider-thumb {
    background: #9d9d9d;
}
.control_container.disabled input[type=range]::-moz-range-thumb {
    background: #9d9d9d;
}
.control_container.disabled input[type=range]::-ms-thumb {
    background: #9d9d9d;
}
.control_container.disabled .s50_label,.control_container.disabled .s100_label, .control_container.warning .s50_label,.control_container.warning .s100_label{
	position: relative;
	bottom: 7px;
}

/***************************************************************************/
/****************************** HELP TEXT **********************************/
/***************************************************************************/

.help-button {
    background: url('../images/help-button.png');
    width: 16px;
    height: 16px;
    top: 3px;
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
    cursor: pointer;
    z-index: 99;
	display: inline-block;
    margin-left: 4px;
    margin-right: 2px;
}
.help-button:hover {
    background: url('../images/help-button_hover.png');
    width: 16px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
}
.help-text{
	position: relative;
	display: table;
	background: #231f20;
    /*top: 0px;*/
    font-style: italic;
    font-size: 14px;
    left: 30px;
    width: 190px;
    color: white;
    padding: 17px;
}
.help-text:after{
	right: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(35, 31, 32, 0);
	border-right-color: #231f20;
	border-width: 14px;
	margin-top: -14px;
}
#help_debt{
    left: 45px;
    /* margin-left: 100px; */
    float: right;
    top: -3px;
}
#help_noi{
    left: -9px;
    margin-left: -127px;
    float: left;
    margin-top: -2px;
 }
/***************************************************************************/
/************************** ROLLOVER TEXT **********************************/
/***************************************************************************/
.rollover{
	display: inline;
    text-decoration: none;
    height: 20px;
    padding-left: 2px;
    padding-right: 2px;
    border-bottom: 3px solid #e7d18f;
/*    box-shadow: inset 0 -5px 0 #e7d18f;
*/    cursor: pointer;
}
.rollover:hover{
	background-color: #e7d18f;
}
#rollover_text{
	position: fixed;
	top: 200px;
	left: 200px;
	background: #231f20;
    /*top: 0px;*/
    font-style: italic;
    font-size: 14px;
    left: 30px;
    width: 190px;
    color: white;
    padding: 17px;
    display: none;
}
#mobile_rollover_text{
	display: none;
}

#rollover_text:after{
	right: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(35, 31, 32, 0);
	border-right-color: #231f20;
	border-width: 14px;
	margin-top: -14px;
}
/***************************************************************************/
/***************************** TWO LINE INPUT ******************************/
/***************************************************************************/


/***************************************************************************/
/************************ CROSS BROWSER RANGE INPUT ************************/
/***************************************************************************/
/*modified from http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html*/

input[type=range] {
	float: left;
	clear: both;
	position: relative;
	top: 6px;
    /*removes default webkit styles*/
    -webkit-appearance: none;
    
    /*fix for FF unable to apply focus style bug */
    border: 1px solid #cbeaf5;
    height: 18px;
    background-color: transparent;
    
    /*required for proper track sizing in FF*/
    /*width: 300px;*/
}
input[type=range]::-webkit-slider-runnable-track {
    /*width: 300px;*/
    height: 5px;
    background: #9d9d9d;
    border: none;
    border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #1696d2;
    margin-top: -4px;
    cursor: pointer;
}
input[type=range]:focus {
    outline: 0;
}
input::-moz-focus-inner{
	outline: 0;
}
input[type=range]::-moz-focus-outer {
    border: 0;
}
input[type=range]:focus::-webkit-slider-runnable-track {
    background: #353535;
    outline: none;
}

input[type=range]::-moz-range-track {
    /*width: 300px;*/
    height: 5px;
    background: #9d9d9d;
    border: none;
    border-radius: 3px;
}
input[type=range]::-moz-range-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #1696d2;
    cursor: pointer;
}

/*hide the outline behind the border*/
input[type=range]:-moz-focusring{
    outline: 1px solid #cbeaf5;
    outline-offset: -1px;
}

input[type=range]::-ms-track {
    /*width: 300px;*/
    height: 5px;
    
    /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
    background: transparent;
    
    /*leave room for the larger thumb to overflow with a transparent border */
    border-color: transparent;
    border-width: 6px 0;

    /*remove default tick marks*/
    color: transparent;
}
input[type=range]::-ms-fill-lower {
    background: #9d9d9d;
    border-radius: 10px;
}
input[type=range]::-ms-fill-upper {
    background: #9d9d9d;
    border-radius: 10px;
}
input[type=range]::-ms-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #1696d2;
    cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
    background: #353535;
}
input[type=range]:focus::-ms-fill-upper {
    background: #353535;
}

/***************************************************************************/
/********************************* TEXT INPUT ******************************/
/***************************************************************************/
input[type=text]{
	opacity: 0;
	font-style: italic;
	pointer-events: none;
    margin-top: 8px;
    margin-left: -4px;
	float: left;
	clear: right;
	font-family: Lato;
    border: none;
    height: 20px;
    text-align: center;
    vertical-align: middle;
    font-size: 13px;
    background-color: transparent;
    text-align: left;
}
.new_source_label, .control.sources.other_source{
	opacity: 1 !important;
}
input.text.invalid{
	border: 2px solid #db2b27;
	/*border-left: none;*/
	width: 68px !important;
	text-align: center !important;
	background: #e3e3e3;
}
/***************************************************************************/
/****************************** RENT DASHBOARD *****************************/
/***************************************************************************/

#text_average_monthly_rent, #text_percent_of_rent{
	display: none;
}
#rent_label_income{
	clear: left;
    float: left;
    font-size: 15px;
    font-style: italic;
    margin-top: 15px;
    margin-left: 20px;
}
#range_average_monthly_rent{
	top: -18px;
    left: 151px;
}
#ami_label{
	font-style: italic;
    text-indent: 91px;
    font-size: 13px;
    margin-top: 0px;
    top: -43px;
    position: relative;
    pointer-events: none;
	margin-left: 148px;
}
#renter_row_two{
	height: 39px;
    width: 440px;
    display: block;
}
#rent_label_percent{
	clear: left;
    float: left;
    font-size: 15px;
    font-style: italic;
    margin-top: -10px;
    margin-left: 20px;
}
#range_percent_of_rent{
	top: -19px;
    width: 80px;
    left: 151px;
}
#text_percent_of_rent{
    top: -26px;
    position: relative;
    left: 155px;
}
#percent_of_rent_label{
	font-size: 13px;
    font-style: italic;
    position: relative;
    top: -10px;
    left: 98px;
}
.warning_icon.rent_high{
	position: relative;
	display: block;
    top: -27px;
    left: 261px;
    cursor: pointer;
}
#renter_row_two.warning{
	color: #db2b27;
	font-weight: bold;
}
#renter_row_two.warning input[type=range]::-webkit-slider-thumb {
    background: #db2b27;
}
#renter_row_two.warning input[type=range]::-moz-range-thumb {
    background: #db2b27;
}
#renter_row_two.warning input[type=range]::-ms-thumb {
    background: #db2b27;
}

#renter_row_two.warning input[type=range]::-moz-range-track {
	background: #d7927a;
}
#renter_row_two.warning input[type=range]::-ms-fill-lower {
    background: #d7927a;
}
#renter_row_two.warning input[type=range]::-ms-fill-upper {
    background: #d7927a;
}
#renter_row_two.warning input[type=range]:focus::-ms-fill-lower {
    background: #d7927a;
}
#renter_row_two.warning input[type=range]:focus::-ms-fill-upper {
    background: #d7927a;
}
#renter_row_two.warning input[type=range]:focus::-webkit-slider-runnable-track {
    background: #d7927a;
}
#renter_row_two.warning input[type=range]::-webkit-slider-runnable-track {
    background: #d7927a;
}



/***************************************************************************/
/********************************* CREDITS *********************************/
/***************************************************************************/
#credits, #text_credits{
	position: fixed;
    bottom: 56px;
    right: calc(36% + 34px);
    width: 72px;
    height: 53px;
    background-color: white;
    z-index: 1000000;
    transform: rotate(77deg);
}
#text_credits{
	opacity: 0;
}
#credits_title{
	margin-left:35px;
	margin-top:-10px;
	margin-bottom:20px;
    font-size: 22px;
}
.credits_h2{
	margin-left: 10px;
	font-weight: bold;
}
.credits_h3{
    margin-left: 10px;
    font-size: 12px;
	margin-top:15px;
	margin-bottom:5px;
    text-transform: uppercase;
    font-weight: bold;
    color: #1696d2;
}

.credits_name{
	margin-left: 10px;
    margin-bottom: 5px;
}
.credits_name a{
	cursor: pointer;
	text-decoration: none;
	color: #000;
}
.credits_name a:hover{
	color: #1696d2;
}
.credits_name span{
	display: block;
    font-style: italic;
    font-size: 13px;
}
#credits_left_col, #credits_right_col{
	float: left;
}
#credits_left_col, #credits_right_col{
	width:44%;
	margin-left:25px;
}
#report_button{
	text-transform: uppercase;
    color: white;
    background-color: #1696d2;
    font-style: normal;
    cursor: pointer;
    padding: 13px;
	width:150px;
	text-align:center;
	margin-top:15px;
	margin-left:10px;
	font-size:14px;
}
#report_button a{
	text-decoration: none !important;
	color: white !important;	
}
#git{
	font-size: 11.5px;
	text-transform: uppercase;
    position: relative;
    left: 35px;
    top: 20px;
}
#git a{
    color: #1696d2;
    text-decoration: none;
}
#git a:hover{
	color: #12719e;
}
#git_mobile{
	font-size: 11px;
	text-transform: uppercase;
    position: relative;
    left: 15px;
    top: 20px;
}
#git_mobile a{
    color: #1696d2;
    text-decoration: none;
}
#git_mobile a:hover{
	color: #12719e;
}
.button_text{
    text-transform: uppercase;
    color: white;
    background-color: #1696d2;
    font-style: normal;
    cursor: pointer;
    width: 200px;
    padding: 13px;
    margin-top: -16px;
    margin-bottom: 22px;
    margin-left: 60px;
}
#reset-button{
	-webkit-border-radius: 10;
	-moz-border-radius: 10;
	border-radius: 10px;
	-webkit-box-shadow: 0px 3px 0px #414042;
	-moz-box-shadow: 0px 3px 0px #414042;
	box-shadow: 0px 3px 0px #414042;
	background: #58595b;
	padding: 10px 15px 8px 15px;
	text-decoration: none;
	cursor: pointer;
	width: 155px;
	text-transform: uppercase;
	color: #ffffff;
	margin-left: 60px;
	position: fixed;
	bottom: -100px;
	z-index: 33333333;
}
#reset-button:hover{
  background: #1696d2;
  text-decoration: none;
}
#disclaimer{
	display: inline-block;
    padding-left: 35px;
    margin-top: 8px;
    font-size: 13px;
    font-style: italic;
    padding-right: 9px;
}

/********* Close button **********/
.close_button.credits {
	position: relative;
 	top: -9px;
    right: -461px;
    cursor: pointer;
    height: 34px;
    width: 34px;
}
.close_button.warning {
	position: absolute;
    top: -9px;
    right: -20px;
    cursor: pointer;
    height: 34px;
    width: 34px;
}
.close_button.rollover_button{
	float: right;
    width: 24px;
    height: 24px;
    margin-top: -26px;
    margin-right: -26px;
}
.close_button > circle {
	stroke: #231f20;
    fill: #231f20;
}
.close_button > path {
    stroke: #d1d2d4;
}
.close_button.rollover_button > circle {
	stroke: #e7d18f;
    fill: #e7d18f;
}
.close_button.rollover_button > path {
    stroke: #231f20;
}

.close_button:hover > circle {
	stroke: #1696d2;
    fill: #1696d2;
}
.close_button:hover > path {
    stroke: white;
}



/***************************************************************************/
/********************************* SWITCH **********************************/
/***************************************************************************/
.urban-switch.small {
    position: absolute;
    top: 22px;
    left: 212px;
    font-size: 13px;
    font-family: Lato, sans-serif;
    height: 26px;
    border: none;
    color: #ffffff;
    display: inline-block;
    line-height: 12px;
    text-align: left;
    border-radius: 10px;
    padding-right: 10px;
}
.urban-switch.small.s100 {
    left: 319px;
}
.top_switch{
	margin-bottom: 50px !important;
}
.control_container.disabled .switch{
	background-color: #9d9d9d !important;
	pointer-events: none;
}
.switch.off:hover{ 
	background-color: #333 !important;
}
.switch.on:hover{ 
	background-color: #12719e !important;
}
.switch.small {
    background-image: url(../images/off-on.png);
    background-color: #696969;
    background-repeat: no-repeat;
    width: 55px;
    height: 18px;
    display: inline-block;
    background-size: cover;
    cursor: pointer;
    margin-right: 9px;
    top: 4px;
    left: 4px;
    position: relative;
    border-radius: 10px;

    -webkit-transition:background-position .1s ease-in;  
    -moz-transition:background-position .1s ease-in;  
    -o-transition:background-position .1s ease-in;  
    transition:background-position .1s ease-in; 
}
.switch.small.s100{
	background-color: #1696d2;
}

.switch.small.off {
    background-position: -47.2px 0px;
}

.switch.small.on {
    background-position: -10px 0px;
}




.urban-switch.large {
    /*position: absolute;*/
    /*top: 22px;*/
    /*left: 212px;*/
    font-size: 13px;
    font-family: Lato, sans-serif;
    height: 26px;
    border: none;
    color: #ffffff;
    display: inline-block;
    line-height: 12px;
    text-align: left;
    border-radius: 10px;
    padding-right: 10px;

    margin-bottom: 18px;
}

#vacancy{
	background-image: url(../images/off-on_vacancy.png);
}
#interest{
	background-image: url(../images/off-on_interest.png);
}
.switch.large {
    background-image: url(../images/off-on.png);
    background-color: #696969;
    background-repeat: no-repeat;
    /*width: 55px;*/
    /*height: 18px;*/
    /*border-radius: 10px;*/


    width: 83px;
    height: 26px;
    border-radius: 20px;
    margin-left: 60px;






    display: inline-block;
    background-size: cover;
    cursor: pointer;
    margin-right: 9px;
/*    top: 4px;
    left: 4px;
*/
    position: relative;

    -webkit-transition:background-position .1s ease-in;  
    -moz-transition:background-position .1s ease-in;  
    -o-transition:background-position .1s ease-in;  
    transition:background-position .1s ease-in; 

}

.switch.large.off {
    background-position: -68px 0px;
    background-color: #696969;
}

.switch.large.on {
    background-position: -10px 0px;
    background-color: #1696d2;
}

.toggle_text{
	font-weight: 900;
    margin-left: 60px;
    margin-top: -14px;
    margin-bottom: 9px;
    font-size: 18px;
}

/***************************************************************************/
/********************************* PRINT ***********************************/
/***************************************************************************/
#print_credits{
	display: none;
}
#print_nhc{
	display: none;
}
#print_urban{
	display: none;
}
#print_partnership{
	display: none;
}
#print_logos{
	display: none;
}
#print_output{
	display: none;
}
#print_output_label{
	display: none;
}

/***************************************************************************/
/********************************** FADER **********************************/
/***************************************************************************/
#fader{
	position: fixed;
    bottom: -130px;
    left: 0px;
    z-index: 200;
    pointer-events: none;

}
#rect1 {
 fill: url(#Gradient1); 
}