/* apply a natural box layout model to all elements */
*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }
@font-face {
	font-family: 'proxima_nova_rg';
	src: url('../fonts/proximanova-regular-webfont-webfont.eot');
	src: url('../fonts/proximanova-regular-webfont-webfont.eot?#iefix') format('embedded-opentype'),
	     url('../fonts/proximanova-regular-webfont-webfont.woff') format('woff'),
	     url('../fonts/proximanova-regular-webfont-webfont.ttf') format('truetype'),
	     url('../fonts/proximanova-regular-webfont-webfont.svg#webfont') format('svg');
}
@font-face{ 
	font-family: 'proxima_nova_rgbold';
	src: url('../fonts/proximanova-bold-webfont-webfont.eot');
	src: url('../fonts/proximanova-bold-webfont-webfont.eot?#iefix') format('embedded-opentype'),
	     url('../fonts/proximanova-bold-webfont-webfont.woff') format('woff'),
	     url('../fonts/proximanova-bold-webfont-webfont.ttf') format('truetype'),
	     url('../fonts/proximanova-bold-webfont-webfont.svg#webfont') format('svg');
}
@font-face{ 
	font-family: 'StateFaceRegular';
	src: url('../fonts/stateface-regular-webfont.eot');
	src: url('../fonts/stateface-regular-webfont.eot?#iefix') format('embedded-opentype'),
	     url('../fonts/stateface-regular-webfont.woff') format('woff'),
	     url('../fonts/stateface-regular-webfont.ttf') format('truetype'),
	     url('../fonts/stateface-regular-webfont.svg#webfont') format('svg');
}


 body {
 	margin:0;
 	background-color:#bfd2d6;
	color:#555;
 	min-height:480px;
 }

em {color:#ff8c05;}

img {
	width:100%;
	max-width:100%;
}
a {color:#2EA4EF;}
/* Generic styles */
.rotate {
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}



.closeDetail {
	display:block;
	width:4em;
	text-align:center;
	padding:.25em;
	margin:.25em;
	float:right;
	background-color:rgba(255,255,255,.25);
}
.expenseInput {position:relative;}
input[type="text"] {
	width:100%;
	margin-bottom:10px;
	font-size:14px;
}

.intro-graph {font-family: proxima_nova_rg, helvetica;text-align: justify;}
.open-wrapper p:first-child:first-letter {
  font-size:3em;
  letter-spacing:2px;
  line-height:1;
  color:#222;
}
p {
	font-size: .85em;
	line-height: 1.75;
	font-family:proxima_nova_rg, helveticaneue, helvetica, arial, sans-serif ;
}
.dropdowns {
	width:100%;
	background-color: #C5E4ED;
	padding:1em;
	margin-bottom:1.5em;
	color:#43ABD0;
}
.reset-dropdowns {
	max-width:40em;
	margin:0 auto;
}
#sidebar .reset-dropdowns {max-width:35em;}
.dropdowns p {margin-top:0;}
.open-wrapper .dropdowns p:first-child:first-letter {font-size:1em; color:#43ABD0;}
.open-wrapper .button {
	background-color:#FAE659;
	width: 100%;
	padding: 1em;
	margin-top: .5em;
	-moz-box-shadow:   0 2px 2px 1px #999;
	-webkit-box-shadow: 0 2px 2px 1px #999;
	box-shadow:         0 2px 2px 1px #999;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	clear:left;
}
.wage-logo {min-width:40em;}
select {margin-bottom:.5em;width:100%;}
h1 {
	margin-top: 0;
	font-family: 'proxima_nova_rgbold', HelveticaNeue-bold, Arial, Gadget, sans-serif;
	font-weight: normal;
	display: inline-block;
	line-height: 1;
}
h4 {
	font-size: 1.85em;
	font-family: georgia, serif;
	font-weight: normal;
	font-style: italic;
	display: inline;
	vertical-align: 35px;
	margin-left:1em;
	margin-right: .1625em;
}
#header {
 	height:30px;
	width: 100%;
	padding-left: 3%;
	background-color:rgba(63,76,85,.45);
 }
 .apm {
 	position:absolute;
	width:10em;
	bottom:auto;
	left:1em;
	top:6.5em;
 }
 .branding {
 	position:relative;
 }
 .branding .social {
 	display:none;
 }
 .subhed {
 	display: block;
	position: relative;
	padding-top:.75em;
	font-family: proxima_nova_rg, helveticaneue,arial, sans-serif;
	font-size: .75em;
	color:#666;
	margin:.25em 1em .25em 2em;
	text-align:center;
 }
 .subhed em {color:#666;}
.about {
	position: absolute;
	right: 12px;
	top: 7px;
	font-family: "proxima_nova_rg", helvetica, arial, sans-serif;
	font-size: .75em;
	color:#fff;
}
.about a {
	color:#38A8ED;
	text-decoration: none;
}
.social {
	list-style:none;
	position:absolute;
	bottom:1em;
	right:2em;
}
.social li {
	width:1.5em;
	display:inline-block;
}
.social.congrats {
	position:relative;
	width:100%;
	text-align:center;
	bottom:auto;
}
.open-wrapper {
	padding:1em;
}
 #living-wage {
 	position:absolute;
 	right:0;
 	left:0;
 	top:0;
 	height:100%;
 	min-height:570px;
 	overflow-x:hidden;
 	max-width:960px;
 	margin:0 auto;
 	background-color:#e6f6fa;
 }
#total {
	position: absolute;
	width: 100%;
	top:110%;
	bottom:0;
	right: 0;
	border-top:none;
	overflow:hidden;
}
.modal {
	position: absolute;
	background-color: #3e3e3e;
	background-color:rgba(40,40,40,.95);
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 5;
	width: 100%;
	text-align:left;
	padding:.25em .5em; 
}
.modalMessage {
	background-color: #333;
	background-color:rgba(0,0,0,.9);
	padding: 1em;
	position: absolute;
	width: 100%;
	left: 0;
	height: 100%;
	top: 0;
}
.modalBlock {
	position:absolute;
	top:0;
	bottom:0;
	right:0;
	width:100%;
	z-index:7;
}
.modal h2 {color:#fff;}
.message {
	margin: 1em auto;
	padding: 0 1em;
}
#chart .message h2 {
	margin: 0 0 1em;
	text-transform: capitalize;
	font-size: 1.25em;
	border-bottom: thin solid #525252;
	color:#fff;
}
 h2 {
 	margin-top:0;
 	font-family:"proxima_nova_rg", helvetica, arial, sans-serif;
 	font-size: .625em;
	text-transform: capitalize;
	font-weight: normal;
 }
 h2 strong {
 	font-weight: normal !important;
	font-family:"proxima_nova_rgbold", arial, sans-serif;
 }
 #salary h2 {
 	padding: .5em 1em .0em;
	margin-top: 20px;
	font-family: "proxima_nova_rg", helvetica, arial, sans-serif;
	font-size: .65em;
	text-transform: capitalize;
	font-weight: normal;
	z-index: 1;
	position: relative;
	color: #fff;
 }

 .logo {
 	width:23px;
	height:23px;
	padding-top:4px;
	display:block;
	background-size:16px;
	background-repeat:no-repeat;
	background-position:0 5px;
	background-image:url("../images/logo-bw.png")
 }
 .job-apps {
 	position: absolute;
 	z-index:10;
	top: 50px;
	width: 71%;
	bottom:0;
	right: 0;
	padding: .25em 1.25em 1.5em;
	color:#fff;
	font-family:"proxima_nova_rg", helvetica, arial, sans-serif;
	margin:0 auto;
	background-color: #3e3e3e;
	background-color:rgba(40,40,40,.95);
 }
 .job-apps select {
 	margin-bottom:.8em;
 }
 .job-apps.selector p {
 	line-height:.85;
	margin-top:1.5em;
 }
 .job-modal {
 	position: absolute;
 	z-index:1;
	top: 50px;
	width: 71.75%;
	bottom:0;
	right: 0;
	padding: .25em 1.25em 1.5em;
	color:#fff;
	font-family:"proxima_nova_rg", helvetica, arial, sans-serif;
	margin:0 auto;
	background-color: #3e3e3e;
	background-color:rgba(40,40,40,.95);
 }
 .jobs {
 	display: block;
	margin-top:15px;
	padding: 1em;
	background-color: #5aabf3;
	color: #fff; 
 }
 #chart {
 	position:absolute;
 	margin:0;
 	top:0;
 	right:0;
 	bottom:-4px;
 	width:71%;
 	list-style:none;
 	padding:0;
 }
#chart li {
	color:#fff;
	-webkit-box-shadow: inset 0px 20px 52px -16px rgba(0,0,0,0.125);
	-moz-box-shadow: inset 0px 20px 52px -16px rgba(0,0,0,0.125);
	box-shadow: inset 0px 20px 52px -16px rgba(0,0,0,0.125);
	overflow:hidden;
	width:100%;
	border-top:1px solid #5d7f76;
	background-color:#7AA89C;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
	-webkit-transition: background-color .5s ease-out;
    -moz-transition: background-color .5s ease-out;
    -o-transition: background-color .5s ease-out;
    transition: background-color .5s ease-out;
    padding:0;
    cursor: pointer;
    display:table;
}
#chart li:hover {background-color:#37ccd5;}
/* Animations */
@-webkit-keyframes expensive {
  0%, 100% {
    background-color: #7AA89C;
  }
  50% {
    background-color: #37ccd5;
  }
}
@-moz-keyframes expensive {
  0%, 100% {
    background-color: #7AA89C;
  }
  50% {
    background-color: #37ccd5;
  }
}
@-o-keyframes expensive {
  0%, 100% {
    background-color: #7AA89C;
  }
  50% {
    background-color: #37ccd5;
  }
} 
@keyframes expensive {
  0%, 100% {
    background-color: #7AA89C;
  }
  50% {
    background-color: #37ccd5;
  }
}
.run-animation {
	-webkit-animation: expensive 1000ms ;
	-moz-animation: expensive 1000ms ;
	-o-animation: expensive 1000ms ;
	animation: expensive 1000ms ;
}

.medical {

}
.other {
	-webkit-animation-delay:.25s;
	-moz-animation-delay:.25s;
	-o-animation-delay:.25s;
	animation-delay:.25s;
}
.food {
	-webkit-animation-delay:.5s;
	-moz-animation-delay:.5s;
	-o-animation-delay:.5s;
	animation-delay:.5s;
}
.transportation {
	-webkit-animation-delay:.75s;
	-moz-animation-delay:.75s;
	-o-animation-delay:.75s;
	animation-delay:.75s;
}
.childCare {
	-webkit-animation-delay:1s;
	-moz-animation-delay:1s;
	-o-animation-delay:1s;
	animation-delay:1s;
}
.housing {
	-webkit-animation-delay:1.25s;
	-moz-animation-delay:1.25s;
	-o-animation-delay:1.25s;
	animation-delay:1.25s;
}

#chart h2 {
	line-height: 1;
	color: #30473a;
	margin: 4px 0 0 8px;
	text-transform: uppercase;
	font-size: .7em;
	display: table-cell;
	vertical-align: middle;
}
#chart h2 strong {color:#fff;}
.income-bar {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
}

.short {
	font-size: .65em;
	font-family: proxima_nova_rgbold, arial, sans-serif;
	text-align: center;
	color: #ff0000;
	margin-top: -.5em;
}
#expenses {
	text-align: center;
	color:#333;
	position:absolute;
	width:27.25%;
	left:0;
	bottom:0;
	top:0;
	background-color:#cf5054;
}

#expenses h2 {
	margin-top: 20px;
	font-family: "proxima_nova_rg", helvetica, arial, sans-serif;
	font-size: .65em;
	text-transform: capitalize;
	font-weight: normal;
	z-index: 1;
	position: relative;
	color: #fff;
}

#salary {
	width: 27.25%!important;
	text-align: center;
	background-color:#333;
	color:#fff;
	bottom:0;
	left:0;
	position:absolute;
}

.dismiss 
{
	position: absolute;
	top:-18px;
	left:80px;
	width: 140px;
	padding: 0 0 0 1em;
	background: #56D9D4;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
	-webkit-box-shadow: 0px 0px 8px 2px  rgba(0,0,0,0.4);
	-moz-box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.4);
	box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.4);
}

.dismiss:after {
	content: '';
	position: absolute;
	border-style: solid;
	border-width: 15px 15px 15px 0;
	border-color: transparent #56D9D4;
	display: block;
	width: 0;
	z-index: 1;
	left: -15px;
	top: 18px;
}
select {
	margin-bottom: 1em;
	width: 100%;
	border: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding:1em 2.125em 1em .5em;
	font-family:proxima_nova_rgbold;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0;
	font-size:.75em;
	color:#666;
	background: url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAQAAADa613fAAAA10lEQVR4Ae3WUXHDQAADUUEwBEMIhEIIhINwEMrAEAyhEALBEArBEFoSSnZuZp8Q7J8iSZIkSZIkSZIkSZIkfdjIH7aZogmGjFSdUMaZuhef0bHlIjLWT7myJXxKP6Nsz81ndDxyAxkLptzZ8zFfb8x4AKcFyFgk5RnEJF8V8MCADDDlCO4HeFXAbQEyqJQrBUAKcEcKtwXIIFIqr4pPKd6RvieV0TeAVwWmjCzhADKAB3akgE85s5wXn/Gu23KlAEpp3RE+5beVwafMfGdmiyRJkiRJknD/AjZo0P9cNNAAAAAASUVORK5CYII=) no-repeat right #fff;
	background-position-y:7px;
	background-position-x:99%;
	background-size:20px;
	text-indent: 0.01px;
   text-overflow: "";
}
/* DETAILS */
body, .detail, #chart, #total, #sidebar {
	-webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    transition: all 1s ease-out;
}
.detail p, .modal p {font-size:1em;}
.complete {display:none;}

.other-detail-wrapper {
	position:absolute;
	width: 75%;
	left: 0;
}
.other-detail .other-detail-wrapper {
	height:98%!important;
	top:1%!important;
	z-index:1000;
}
.other-detail .other-options {
	visibility: visible;
}
.button {
	cursor: pointer;
	text-align: center;
	font-family: "proxima_nova_rgbold", Futura, "Trebuchet MS", Arial, sans-serif;
	background-color: #fae659;
	color: #333;
	font-size: .85em;
	padding: 1em;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
}
.go-button {
	display: block;
	color: #fff;
	background-color: #2EA4EF;
	width: 100%;
	font-family: "proxima_nova_rg", helvetica, arial, sans-serif;
	min-height: 2.5em;
	text-align: center;
	font-size: 1.125em;
}

/* chart colors */
.housing {
	background-color:#1B9D59;
}
.food {
	background-color: #28AD6C;
}
.childCare {
	background-color: #74C4B5;
}
.transportation {
	background-color: #AEE774;
}
.other {background-color:#9FCA49}
.medical {background-color:#60A439}
.footer {
	position: absolute;
	bottom: 0;
	width:26.725%;
	left:0;
}
.footer h3 {
	position:relative;
	margin: 0 0 0 1px;
	line-height: 37px;
	width: 100%;
	background-color:#ccc;
	font-family: proxima_nova_rgbold;
	font-weight: normal;
	font-size: .75em;
	color: #666;
	padding:.5em 0 .5em 3.75em;
}
.footer h3:hover {background-color:#7fd6f0;cursor:pointer;}
.footer h4 {
	display: block;
	font-size: .825em;
	font-family: "proxima_nova_rg";
	font-style: normal;
	color: #ddd;
	margin:.25em;
	text-align: right;
	padding-bottom:.35em;
}
h4.adults {border-bottom:thin solid #999;}

/* Off Canvas Navigation */
.info {cursor:pointer;}
#sidebar .info, #foot-content .info {
	font-family:arial;
	position:absolute;
	font-size:1.25em;
	right:10px;
	top:5px;
}
#sidebar h3 {font-family:proxima_nova_rgbold,HelveticaNeue-bold, arial, sans-serif;font-weight:normal;}
#sidebar h4 {margin-left:0;}
#sidebar .sources {font-size:.825em;}
#sidebar .social {
	list-style:none;
	position:absolute;
	top:1.5em;
	right: 1em;
}
#sidebar {
	background-color:#3e3e3e;
	color:#fff;
	padding:2em 1em;
	z-index: 10000;
	position:absolute;
	bottom:0;
	top:0;
	box-sizing: border-box;
	overflow:hidden;
	width:85%;
	-webkit-transition: left 500ms ease-out;
    -moz-transition: left 500ms ease-out;
    -o-transition: left 500ms ease-out;
    transition: left 500ms ease-out;
    -webkit-box-shadow: 0px 0px 8px 2px  rgba(0,0,0,0.4);
	-moz-box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.4);
	box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.4);
	font-family:proxima_nova_rg, helveticaneue, arial, sans-serif;
}
#foot-content {
	background-color:#3e3e3e;
	color:#fff;
	z-index: 10000;
	position:absolute;
	bottom:0;
	top:30px;
	box-sizing: border-box;
	overflow:hidden;
	width:100%;
	-webkit-transition: top 500ms ease-out;
    -moz-transition: top 500ms ease-out;
    -o-transition: top 500ms ease-out;
    transition: top 500ms ease-out;
  
}
#foot-content h1, #foot-content p, #foot-content select, #foot-content .button {max-width: 80%;margin: .75em auto;display: block;}
@media only screen and (min-width: 586px) {
	
	 .branding .social {
	 	display:block;
	 	bottom:2em;
		right:.95em;
	 }
	.logo {
	 	width:90px;
		height:23px;
		display:block;
		background-size:90px;
		background-image:url("../images/logo-text-bw.png");
		background-position:0 5px;
		background-repeat:no-repeat;
	 }


	#chart h2 {font-size:.85em;}
	.open-wrapper {margin:0;}
	#total{width:97%;}
	#salary h2, .short, #expenses h2 {font-size:.85em;}
	.job-apps {width:70%;}
	.footer {width:26.25%;left:3%;}
	.job-modal {width:70%;}

	#chart h2 {font-size:.85em;}

	#living-wage {
	 	position:absolute;
	 	right:0;
	 	left:0;
	 	bottom:0;
	 	top:0;
	 	overflow-x:hidden;
	 	max-width:1000px;
	 	margin:0 auto;
	 	background-color:#e6f6fa;
	 }

	 .open-wrapper {
		padding:2.25em 3em;
	}


	.open-wrapper .button {
		background-color:#FAE659;
		width: 100%;
		padding: 1em;
		margin-top: .5em;
		-moz-box-shadow:   0 2px 2px 1px #999;
		-webkit-box-shadow: 0 2px 2px 1px #999;
		box-shadow:         0 2px 2px 1px #999;
		-webkit-border-radius: 2px;
		-moz-border-radius: 2px;
		border-radius: 2px;
		clear:both;
	}

	.about {
		position: absolute;
		right: 12px;
		top: 7px;
		font-family: "proxima_nova_rg", helvetica, arial, sans-serif;
		font-size: .75em;
		color:#fff;
	}
}

@media only screen and (min-width: 768px) {
	.dropdowns {
		width:44%;
		float: right;
		padding: 1em;
		margin-left:3%;
		margin-top:.85em;
		background-color: #C5E4ED;
	}
	.apm {
	 	bottom:1.25em;
	 	top:auto;
	 }
	.subhed {
	 	position:absolute;
		right: .25em;
		color: #e6f6fa;
		bottom: 1.25em;
		border-top: thin solid #81ADB4;
	 }
	 .subhed em {color:#e6f6fa;}

	.intro-graph {width:51%;float:left; font-family:proxima_nova_rg, helveticaneue, arial, sans-serif;}
}

/* STATEFACE */
.stateface:before {
    font-family: StateFaceRegular;
	font-size: 2.5em;
	position: absolute;
	left: .5em;
	color: #222;
}

.stateface-replace {
    text-indent: -999em;
    display: inline-block;
    position: relative;
    min-width: 1em;
}

.stateface-replace:before {
    position: absolute;
    left: 0;
    top: 0;
    text-indent: 0;
}

.stateface-AK:before {
    content: "A";
}

.stateface-AL:before {
    content: "B";
}

.stateface-AR:before {
    content: "C";
}

.stateface-AZ:before {
    content: "D";
}

.stateface-CA:before {
    content: "E";
}

.stateface-CO:before {
    content: "F";
}

.stateface-CT:before {
    content: "G";
}

.stateface-DC:before {
    content: "y";
}

.stateface-DE:before {
    content: "H";
}

.stateface-FL:before {
    content: "I";
}

.stateface-GA:before {
    content: "J";
}

.stateface-HI:before {
    content: "K";
}

.stateface-IA:before {
    content: "L";
}

.stateface-ID:before {
    content: "M";
}

.stateface-IL:before {
    content: "N";
}

.stateface-IN:before {
    content: "O";
}

.stateface-KS:before {
    content: "P";
}

.stateface-KY:before {
    content: "Q";
}

.stateface-LA:before {
    content: "R";
}

.stateface-MA:before {
    content: "S";
}

.stateface-MD:before {
    content: "T";
}

.stateface-ME:before {
    content: "U";
}

.stateface-MI:before {
    content: "V";
}

.stateface-MN:before {
    content: "W";
}

.stateface-MO:before {
    content: "X";
}

.stateface-MS:before {
    content: "Y";
}

.stateface-MT:before {
    content: "Z";
}

.stateface-NC:before {
    content: "a";
}

.stateface-ND:before {
    content: "b";
}

.stateface-NE:before {
    content: "c";
}

.stateface-NH:before {
    content: "d";
}

.stateface-NJ:before {
    content: "e";
}

.stateface-NM:before {
    content: "f";
}

.stateface-NV:before {
    content: "g";
}

.stateface-NY:before {
    content: "h";
}

.stateface-OH:before {
    content: "i";
}

.stateface-OK:before {
    content: "j";
}

.stateface-OR:before {
    content: "k";
}

.stateface-PA:before {
    content: "l";
}

.stateface-PR:before {
    content: "3";
}

.stateface-RI:before {
    content: "m";
}

.stateface-SC:before {
    content: "n";
}

.stateface-SD:before {
    content: "o";
}

.stateface-TN:before {
    content: "p";
}

.stateface-TX:before {
    content: "q";
}

.stateface-US:before {
    content: "z";
}

.stateface-UT:before {
    content: "r";
}

.stateface-VA:before {
    content: "s";
}

.stateface-VT:before {
    content: "t";
}

.stateface-WA:before {
    content: "u";
}

.stateface-WI:before {
    content: "v";
}

.stateface-WV:before {
    content: "w";
}

.stateface-WY:before {
    content: "x";
}