/* tooltip arrows from: http://www.cssarrowplease.com/ */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    border: 0px none;
    margin: 0px;
    padding: 0px;
    vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

body, html {
    color: #000;
    font-family: "Lato", sans-serif;
    font-size: 18px;
    /*line-height: 16px;*/
    margin: 0px;
    padding: 0px;
    text-align: left;
}

text {
    font-family: "Lato", sans-serif;
}

*, *::before, *::after {
     box-sizing: border-box;
}

a {
    color:#1696d2;
    text-decoration: none;
}

a:hover {
    color: #000;
    text-decoration: none;
}

p {
    margin-bottom: 24px;
    line-height: 1.56;
    max-width: 700px;
}

/* needed for IE so images with transparent backgrounds used in buttons don't show up with a grey background */
button {
    background: transparent;
}

section.introduction {
    max-width: 700px;
    margin: 0 auto;
}

section.toolDropdownSelector {
    width: 100%;
    height: 130px;
    background-color: #0a4c6a;
    position: relative;
/*    position: sticky;
    position: -webkit-sticky;
   top: 50px; */
    z-index: 10;
    margin: 50px 0 24px 0;
}

section.toolDropdownSelector.unstick {
    position: absolute;
}

section.toolDropdownSelector.sticky {
    position: fixed;
    top: 0;
    /*z-index: 10;*/
}

section.tool {
    /*opacity: 1;*/
    transition: opacity 300ms;
    -webkit-transition: opacity 300ms;
}

.moreMarginTop {
    margin-top: 200px;
}

.imageDownloadChart {
    width: 1150px;
    padding: 10px;
    position: fixed;  /* use this to hide the div from view, can't use display:none because that'll cause nothing to get rendered */
    z-index: -10;
}

.sectionFade {
    opacity: 0.5;
    transition: opacity 300ms;
    -webkit-transition: opacity 300ms;
}

.logo {
    font-size: 9px;
    text-transform: uppercase;
    color: #000;
    width: 100%;
    text-align: right;
    letter-spacing: 1px;
    margin-top: 10px;
}

span.urban {
    color: #1696d2;
}
/*
section.toolDropdownSelector:after, section.toolDropdownSelector:before {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

section.toolDropdownSelector:after {
    border-color: rgba(10, 76, 106, 0);
    border-top-color: #0a4c6a;
    border-width: 30px;
    margin-left: -30px;
}

section.toolDropdownSelector:before {
    border-color: rgba(255, 255, 255, 0);
    border-top-color: #fff;
    border-width: 31px;
    margin-left: -31px;
}
*/

p.publishedDate,
p.updateDate {
    top: 0;
    font-size: 12px;
    font-style: italic;
    margin-bottom: 15px;
    position: relative;
}

p.publishedDate {
    margin-bottom: 10px;
}

#equityChart {
    width: 1100px;
    margin: 0 auto;
}

section.tool .indicatorDescriptiveText {
    max-width: 700px;
    margin: 0 auto;
}

h1.title {
    font-size: 36px;
    font-weight: normal;
    margin-bottom: 24px;
}

h2,
.chartTitle {
    font-size: 25px;
    line-height: 24px;
    font-weight: normal;
    margin-bottom: 24px;
}

.tool h2 {
    margin-bottom: 35px;
}

#equityChart h2 {
    display: inline-block;
    width: calc(100% - 160px);
}

#downloadChart h2 {
    padding-left: 18px;
}

h2.chartTitle.initialize {
    background-color: #e3e3e3;
    color: #e3e3e3;
}

.barTitle {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 7px;
}

#equityChart .withEquity h4.barTitle {
    padding: 18px 18px 0;
}

a#saveImageLink {
    pointer-events: none;
}

.saveImageBtn {
    border: none;
    width: 153px;
    height: 48px;
    background-color: #1696d2;
    color: #fff;
    font-size: 14px;
    text-transform: uppercase;
    pointer-events: all;
    vertical-align: top;
    cursor: pointer;
}

.chart {
    width: 100%;
    min-height: 400px;
    /*background-color: #d2d2d2;*/
}

.chartTitle {
    width: 100%;
}

.chartRow {
    width: 100%;
    position: relative;
    /*margin: 20px 0;*/
}
#downloadChart .chartRow {
    padding: 0 18px;
}

.chartRow h4 {
    width: 100%;
    display: inline-block;
}

#equityChart .withEquity.chartRow {
    border: 1px solid #d8d8d8;
    /*padding: 17px 10px;*/
    position: relative;
    margin-bottom: 50px;
}

#equityChart .withEquity.chartRow :after, #equityChart .withEquity.chartRow :before {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

#equityChart .withEquity.chartRow :after {
    border-color: rgba(255, 255, 255, 0);
    border-top-color: #fff;
    border-width: 20px;
    margin-left: -20px;
}

#equityChart .withEquity.chartRow :before {
    border-color: rgba(216, 216, 216, 0);
    border-top-color: #d8d8d8;
    border-width: 22px;
    margin-left: -22px;
}

#downloadChart .withEquity.chartRow {
    border: 1px solid #d8d8d8;
    padding: 18px;
}

.equityBarGroup {
    width: 100%;
    display: inline-block;
}

.barLeft {
    width: 210px;
    display: inline-block;
    float: left;
}

.equityNumber {
    float: left;
    font-size: 32px;
    font-weight: lighter;
}

#exampleEquityChart .equityNumber {
    width: 70px;
}

#equityChart .equityNumber,
#downloadChart .equityNumber {
    text-align: right;
    margin-right: 7px;
    font-size: 42px;
    line-height: 52px;
    width: 170px;
}

#equityChart .withEquity .equityNumber {
    width: 170px;
}

.viewDemoInfo {
    font-size: 14px;
    line-height: 20px;
    color: #0096d2;
    text-decoration: underline;
    cursor: pointer;
    width: 160px;
}

.infoIcon {
    margin-right: 4px;
    vertical-align: text-bottom;
}

.equityBar {
    float: left;
}

#downloadChart .equityBar {
    display: none;
}

.hidden {
    visibility: hidden;
}

.noShow {
    display: none;
}

.fadeIn {
    visibility: visible;
    opacity: 1;
    transition: visibility 0s linear 0s, opacity 300ms;
    -webkit-transition: visibility 0s linear 0s, opacity 300ms;
}

.fadeOut {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s linear 300ms, opacity 300ms;
    -webkit-transition: visibility 0s linear 300ms, opacity 300ms;
}

line.barLabel {
    stroke-width: 2px;
}

text.barLabel {
    text-anchor: middle;
    fill: #000;
    stroke: none;
}

text.barLabel.rightJustified {
    text-anchor: end;
}

text.barLabel.leftJustified {
    text-anchor: start;
}

text.barLabel.line1 {
    font-size: 14px;
}

text.barLabel.line2 {
    font-size: 11px;
}

.withEquity .withEquityBar g.diff text.barLabel {
    font-weight: 900;
}

.noEquityGap div.equityBarGroup {
    display: none;
}

.equitySentence {
    margin-top: 33px;
    margin-left: 18px;
    max-width: 700px;
    font-size: 18px;
    font-weight: normal;
}

/*.equitySentence span.equitySentenceFirstPart {
    font-weight: bold;
}*/

.highlight {
    background: rgba(253, 191, 17, 0.75);
}

.imageDownloadChart .highlight {
    background: none;
}

p.exampleParagraph {
    padding-top: 18px;
    border-top: 1px solid #0a4c6a;
}

#exampleEquityChart .equitySentence {
    font-weight: bold;
    padding-bottom: 18px;
    border-bottom: 1px solid #0a4c6a;
    margin-left: 0;
}

.tool .equitySentence {
    margin: 0 auto 18px auto;
    font-weight: 700;
}

.imageDownloadChart .equitySentence {
    margin: 0 auto;
    font-weight: 700;
}

.tool .equitySentence.noGap,
.imageDownloadChart .equitySentence.noGap {
    margin-top: 0;
    margin-left: 18px;
    /*font-size: 32px;*/
    font-weight: normal;
    max-width: 100%;
}

.imageDownloadChart .equitySentence.noGap {
    margin-left: 0;
}

.adjustTargetBtns {
    display: inline-block;
    float: left;
    width: 23px;
    margin: 2px 4px;
}

.adjustTargetBtns button {
    height: 18px;
    width: 21px;
    border: none;
    padding: 0;
    margin: 4px 0;
    cursor: pointer;
}

button.upArrowBtn {
    background-image: url('../img/up-arrow.svg');
}

button.downArrowBtn {
    background-image: url('../img/down-arrow.svg');
}


@media screen and (min-width: 768px) and (max-width: 1023px) {
    .barLeft {
        width: 160px;
    }

    #equityChart .equityNumber,
    #equityChart .withEquity .equityNumber,
    #downloadChart .equityNumber,
    #downloadChart .withEquity .equityNumber {
        font-size: 32px;
        width: 120px;
    }
}

@media screen and (min-width: 501px) and (max-width: 1100px){
    .chart {
        margin: 0;
    }

    .imageDownloadChart {
        width: 100%;
    }

    #equityChart {
        width: 100%;
        padding: 0 20px;
    }
}

@media screen and (max-width: 767px) {
    section.introduction,
    section.tool {
        padding: 0 20px;
    }

    .equityNumber {
        font-size: 16px;
        text-align: left;
        font-weight: bold;
        margin-bottom: 5px;
    }

    #equityChart .equityNumber,
    #downloadChart .equityNumber {
        font-size: 16px;
        text-align: left;
        line-height: 30px;
    }

    .barTitle {
        font-size: 16px;
    }

    #equityChart .withEquity h4.barTitle,
    #downloadChart .withEquity h4.barTitle {
        padding: 10px 10px 0;
    }

    .barLeft {
        width: 100%;
    }

    .tool .equitySentence {
        padding: 0 10px;
    }

    .tool .equitySentence.noGap {
        margin-left: 0;
    }

    .withEquity .barLeft {
        margin-left: 10px;
        /*box-sizing: border-box;*/
    }

    .adjustTargetBtns {
        float: right;
        width: auto;
        margin: 2px 80px 2px 4px;
    }

    .adjustTargetBtns button {
        margin: 4px 5px;
    }
}

@media screen and (max-width: 500px) {
    #equityChart {
        width: 100%;
        padding: 0;
    }

    .imageDownloadChart {
        width: 100%;
    }
}

@media screen and (max-width: 420px) {
    #equityChart h2,
    #downloadChart h2 {
        width: 100%;
        margin-bottom: 15px;
    }

    .saveImageBtn {
        margin-bottom: 40px;
        height: 36px;
    }
}
/************ STYLES FOR PLOT ON INITIAL PAGE LOAD *********/

.initialize h2.chartTitle,
.initialize .saveImageBtn,
.initialize .barTitle,
.initialize .viewDemoInfo,
.initialize #equityChart .equityNumber,
.initialize .barLabel,
#equityChart.initialize .equityNumber {
    visibility: hidden;
}

.initialize .barTitle,
.initialize .viewDemoInfo,
.initialize .chartTitle,
.initialize .saveImageBtn,
.initialize .adjustTargetBtns {
    display: none;
}

/*.initialize h2.chartTitle,*/
.initialize .barLeft {
    background-color: rgb(227, 227, 227);
}

#equityChart.initialize .withEquity.chartRow,
#equityChart.initialize .withEquity.chartRow :before,
#equityChart.initialize .withEquity.chartRow :after {
    border: none;
    padding: 17px 0;
}

@media screen and (max-width: 767px) {
    .initialize .barLeft {
        display: none;
    }
}
/************ STYLES FOR RACIAL DEMO CHARTS **************/
.demoChart {
    width: 320px;
    height: 125px;
    position: absolute;
    left: 170px;
    transform: translateY(-55%);
    border: 1px solid #1696d2;
    background-color: #fff;
    padding: 10px;
    border-collapse: separate;
    box-shadow: 0px 2px 0px rgba(22,150,210, 0.25);
}

.demoChart:after, .demoChart:before {
    right: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.demoChart:after {
    border-color: rgba(255, 255, 255, 0);
    border-right-color: #ffffff;
    border-width: 10px;
    margin-top: -10px;
}

.demoChart:before {
    border-color: rgba(22, 150, 210, 0);
    border-right-color: #1696d2;
    border-width: 12px;
    margin-top: -12px;
}

.demoChart .closeButton {
    border: 0;
    cursor: pointer;
    height: 20px;
    width: 20px;
    background-image: url('../img/button_close.png');
    background-size: contain;
    color: #1696d2;
    font-size: 14px;
    position: absolute;
    top: 5px;
    right: 5px;
}

h5 {
    font-size: 11px;
    font-weight: bold;
    clear: both;
    margin-bottom: 10px;
}

.raceBar {
    fill: #1696d2;
}

.axis line,
.axis path {
    display: none;
}

.raceLabel,
.axis text {
    font-size: 11px;
}

@media screen and (max-width: 767px) {
    .demoChart {
        left: 17px;
    }
}

/************ STYLES FOR SELECTORS **************/

.indicatorSelectorMenus {
    /*position: absolute;*/
    width: 1221px;
    /*top: 50%;*/
    /*left: 50%;*/
    /*transform: translate(-50%, -60%);*/
    margin: 0 auto;
    padding-top: 20px;
}

.selectorGroup {
    display: inline-block;
    float: left;
    width: 325px;
    height: 75px;
    /*background-color: #1696d2;*/
    margin: 3px 10px 0 10px;
    overflow: auto;
}

.selectorGroup.hidden {
    display: none;
}

.selectorLabel {
    float: left;
    width: 100%;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 8px;
}

.selectorItem {
    cursor: pointer;
}

.comparisonToggle .selectorLabel {
    margin-bottom: 6px;
}

.selectorBox {
    float: left;
    width: 271px;
    height: 45px;
    background-color: #fff;
    line-height: 45px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 18px;
    padding-left: 10px;
    border: none;
}

.selectorButton {
    float: left;
    padding: 0;
    width: 50px;
    height: 45px;
    border: none;
    background-image: url('../img/select-button.svg');
    background-color: #1696d2;
    cursor: pointer;
}


.dividerImage {
    display: inline-block;
    float: left;
}

.dividerImage img {
    height: 65px;
    margin-top: 7px;
}

.comparisonToggle {
    width: 120px;
    display: inline-block;
    float: left;
    margin: 10px 15px;
    overflow: auto;
}

.toggleLabel {
    font-size: 12px;
    color: #fff;
}

.toggleLabel:first-child {
    margin-right: 22px;
}

.toggleLabel.selected {
    color: #fdbf11;
}

.switch {
    background-color: #d8d8d8;
    width: 79px;
    height: 22px;
    border-radius: 11px;
    margin-left: 12px;
    margin-top: 3px;
    cursor: pointer;
    position: relative;
}

.sliderButton {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 22px;
    width: 22px;
    -webkit-transition: .4s;
    transition: .4s;
}

.sliderButton:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 0px;
    bottom: 0px;
    background-color: #1696d2;
    border-radius: 50%;
}

.sliderButton.off {
    -webkit-transform: translateX(58px);
    -ms-transform: translateX(58px);
    transform: translateX(58px);
    -webkit-transition: .4s;
    transition: .4s;
}

input#customTarget {
    width: 321px;
    height: 45px;
    font-size: 18px;
    font-family: 'Lato';
    padding-left: 10px;
}

.selectorTooltip {
    width: 340px;
    height: 100px;
    background-color: #fff;
    border: 1px solid #1696d2;
    font-size: 14px;
    padding: 5px 20px 15px 15px;
    position: absolute;
    transform: translateY(95%);
    z-index: 90;
    border-collapse: separate;
    box-shadow: 0px 2px 0px rgba(22, 150, 210, 0.25);
}

.comparisonToggle .selectorTooltip {
    transform: translate(-35%, 35%);
}

.selectorTooltip:after, .selectorTooltip:before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.selectorTooltip:after {
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #fff;
    border-width: 20px;
    margin-left: -20px;
}

.selectorTooltip:before {
    border-color: rgba(22, 150, 210, 0);
    border-bottom-color: #1696d2;
    border-width: 22px;
    margin-left: -22px;
}

.selectorTooltip .closeButton {
    position: absolute;
    z-index: 1;
    top: 8px;
    right: 8px;
    border: 0;
    height: 16px;
    width: 16px;
    background-image: url('../img/button_close.png');
    background-size: contain;
    cursor: pointer;
}

.selectorTooltip p {
    clear: both;
    margin-top: 20px;
}

@media screen and (max-width: 767px) {
    .comparisonToggle .selectorTooltip {
        transform: translate(0, 20%);
    }

    .selectorTooltip:after, .selectorTooltip:before {
        left: 15%;
    }
}

@media screen and (max-width: 350px) {
    .selectorTooltip {
        width: 90vw;
    }
}

.selectorGroup.inactive .selectorLabel,
.selectorGroup.inactive .selectorBox,
.comparisonToggle.inactive .toggleLabel {
    color: #9d9fa2;
    pointer-events: none;
}

.selectorGroup.inactive .selectorButton {
    background:
        linear-gradient(
            rgba(216, 216, 216, 0.8),
            rgba(216, 216, 216, 0.8)
        ),
        url('../img/select-button.svg');
    cursor: auto;
    pointer-events: none;
}

.comparisonToggle.inactive .sliderButton:before {
    opacity: 0.5;
}

.comparisonToggle.inactive .switch {
    cursor: auto;
    pointer-events: none;
    opacity: 0.5;
}

@media screen and (min-width: 768px) and (max-width: 1209px) {
    .indicatorSelectorMenus {
        width: 100%;
    }

    .selectorGroup {
        width: 22%;
    }

    .selectorBox {
        width: calc(100% - 50px);
    }

    input#customTarget {
        width: 100%;
    }
}

@media screen and (min-width: 500px) and (max-width: 767px) {
    section.toolDropdownSelector {
        height: 400px;
        position: static;
        padding: 20px;
    }

    .indicatorSelectorMenus {
        width: 100%;
        position: static;
        top: 0;
        left: 0;
        transform: none;
        padding-top: 0;
    }

    .selectorGroup {
        width: 100%;
        margin: 10px 0;
    }

    .selectorBox {
        width: 410px;
    }

    .dividerImage {
        display: none;
    }

    .comparisonToggle {
        width: 100%;
        margin: 20px 0;
        display: block;
    }

    input#customTarget {
        width: 460px;
        max-width: none;
    }
}

@media screen and (max-width: 499px) {
    section.toolDropdownSelector {
        height: 372px;
        position: static;
        padding: 5px 20px;
    }

    .indicatorSelectorMenus {
        width: 100%;
        position: static;
        top: 0;
        left: 0;
        transform: none;
        padding: 0;
    }

    .selectorGroup {
        width: 100%;
        margin: 10px 0;
    }

    .selectorBox {
        width: calc(100% - 50px);
    }

    .dividerImage {
        display: none;
    }

    .comparisonToggle {
        margin: 0;
        display: block;
        margin-bottom: 15px;
    }

    input#customTarget {
        width: 100%;
    }
}

/************ STYLES FOR MODALS **************/

.selectorMenuModal {
    /*display: block;*/
    position: fixed;
    top: 0;
    left: 0;
    /*transform: translate(-50%, -50%);*/
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: #fff;
    z-index: 1000;
    padding: 47px 150px 0 190px;
    opacity: 1;
    visibility: visible;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
}

.selectorMenuModal.closed {
    /*display: none;*/
    visibility: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    opacity: 0;
    transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
}

.selectorMenuModal .closeButton {
    position: absolute;
    z-index: 1;
    right: 15%;
    border: 0;
    height: 32px;
    width: 32px;
    background-image: url('../img/button_close.png');
    background-size: contain;
    cursor: pointer;
}

.geographyModal {
    padding-left: 170px;
}

.selectorMenuModal p {
    max-width: 100%;
}

h2.modalTitle {
    font-size: 36px;
    font-weight: normal;
    line-height: 36px;
}

h3.modalGroupTitle {
    font-size: 25px;
    font-weight: normal;
    margin-top: 18px;
    margin-bottom: 10px;
    clear: both;
}

p.clusterNote {
    font-size: 14px;
    margin-bottom: 8px;
    line-height: 1.3;
}

.selectorMenuModal ul {
    padding-left: 0;
    margin-top: 0;
}

.modalGroup.twoColumns {
    columns: 2;
}

.modalGroup.threeColumns {
    columns: 3;
}

@media screen and (max-width: 500px) {
    .selectorMenuModal {
        padding: 60px 20px 20px;
    }

    .selectorMenuModal .closeButton {
        right: 20px;
        top: 20px;
    }

    .modalGroup.twoColumns,
    .modalGroup.threeColumns {
        columns: 1;
    }
}

@media screen and (min-width: 501px) and (max-width: 1024px) {
    .selectorMenuModal {
        padding: 20px;
    }

    .selectorMenuModal .closeButton {
        right: 20px;
    }

    .modalGroup.threeColumns {
        columns: 2;
    }
}

.dcEquityIndicators.menuItem {
    list-style: none;
    font-size: 15px;
    line-height: 20px;
    max-width: 380px;
    margin-bottom: 12px;
    padding: 4px 10px;
    cursor: pointer;
    background-color: #fff;
}

.twoColumns .menuItem,
.threeColumns .menuItem {
    display: inline-block;
    width: 100%;
}

.dcEquityIndicators.menuItem span.menuItemLink {
    color: #1696d2;
    cursor: pointer;
    pointer-events: none;
}

.dcEquityIndicators.menuItem span.clusterNumber {
    color: #333;
}

.dcEquityIndicators.menuItem.hovered {
    background-color: #007897;
    color: #fff;
}

.dcEquityIndicators.menuItem.hovered span.clusterNumber,
.dcEquityIndicators.menuItem.hovered span.menuItemLink {
    color: #fff;
}

.dcEquityIndicators.menuItem.selected {
    background-color: #fdbf11;
}

.dcEquityIndicators.menuItem.selected span.menuItemLink{
    color: #000;
    cursor: auto;
}

.dcEquityIndicators.menuItem.disabled span.menuItemLink {
    color: #9d9fa2;
    cursor: auto;
    pointer-events: none;
}


/************ MAP STYLES ***************/

.map {
    width: 350px;
    height: 350px;
    float: left;
    margin-bottom: 46px;
    display: block;
}

.geography {
    stroke: #000;
    fill: #fff;
    cursor: pointer;
}

.geography.selected {
    fill: #fdbf11;
}

.geography.disabled {
    fill: #9d9fa2;
    cursor: auto;
    pointer-events: none;
}

.geography.hovered {
    fill: #007897;
}

@media screen and (max-width: 1023px) {
    .map {
        display: none;
    }
}

/************ SUBNAV ***************/

.subnav {
    width: 100%;
    position: fixed;
    top: 51px;
    height: 40px;
    background-color: #f6f6f6;
    border-bottom: 1px solid #eee;
}

.subnav ul {
    text-align: center;
    margin: 0px;
}

.subnav ul li {
    display: inline-block;
    text-align: center;
    padding: 0px;
    margin-top: 0px;
    padding-left: 24px;
    padding-top: 10px;
}




/***************** mobile chapter (replacing the subnav for smaller screens) ******************/

#mobilenavcontainer {
    display: none;
}

.show-menu {
	display: none;
    margin-top:50px;
}

/*Style for menu links*/
ul#menu li a {
    display: block;
    min-width: 140px;
    text-align: center;
    color: #fff;
    text-decoration: none;
    background-color: #000;
    height: 36px;
    padding-top: 8px;
}

/*Hover state for top level links*/
ul#menu li:hover a {
  color: #0096d2;
}

/*Style for dropdown links*/
ul#menu li:hover ul a {
	background: #333;
    color:#fff;
    border-right-color: #222;
    border-right:1px solid;
    border-color: #222;
    border-top:5px solid;
    border-top-color:#222;
}





/*********** STRUCTURE ***********/

.wrapper {
    /*width: 960px;*/
    margin:0 auto;
    padding-top: 80px;
    border-top: 1px solid #eee;
}

.content {
    width: 100%;
    margin: 0 auto;
    padding: 0px 30px;

}

.content ul {
    list-style: outside none none;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    padding-bottom: 10px;
}

.content ul li {
    display: inline-block;
    text-align: center;
    text-transform: uppercase;
    padding-left: 1%;
}

.text {
    width: 500px;
    margin: 35px 75px;
}

.left {
    float: left;
}

.right {
    float: right;
}


/********header (below urban menu)**********/


/*.headerimage {
    width: 100%;
    height: 350px;
    position: relative;
    top: 50px;
}

#heroimage{
    background-image: url("../img/infant.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom left;
}*/






/*********read the research**********/

#inset {
    float: right;
    width: 200px;
    border-left: 1px solid #999;
    padding-left: 20px;
    margin-left: 20px;
    margin-bottom: 10px;
    padding-bottom: 5px;
}

#research { /*this styles the title for the read the research section*/
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 5px;
}

.research {
    text-align: left;
    line-height: 1.2;
    font-size: 14px;
    margin-top: 10px;
}

#inset .readButton {
    margin-top: 0px;
    margin-bottom: 30px;
}

.readButton a {
    color: #fff;
    background-color: #0096d2;
    padding: 12px;
    text-align: center;
    text-transform: uppercase;
    font-size: 15px;
}

.readButton a:hover {
    background-color: #000;
}

#inset ul {
    margin-left: 0px;
    margin-bottom: 0px;
    text-indent: 0px;
}

#inset li {
    list-style: none;
    padding-left: 0px;
    margin-bottom: 0px;
}


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






/*image that goes 65% width of wrapper. */
.overhalf {
    width: 60%;
    margin-top: 3px;
    margin-bottom: 10px;
    margin-right: 75px;
}

.full {
    width: 100%;
    margin-top: 25px;
    margin-bottom: 10px;
}

.caption {
    margin-bottom: 30px;
    font-size: 14px;
    font-style: italic;
    color: #666;
}

.half {
    width: 49.5%;
    margin-top: 3px;
    margin-bottom: 10px;
}

iframe{
    margin-bottom: 20px;
}

/*footer*/

footer {
    /*position: fixed;*/
    background-color: #f1f2f2;
    width: 100%;
    margin-top: 185px;
    padding-top: 50px;
    padding-bottom: 25px;
    /*bottom: 0;*/
    overflow: hidden;
    height: auto;
    /*z-index: 10000;*/
}

@media (max-height: 880px){
    footer{
        margin-top: 50px;
    }
}

footer .content{
    max-width: 1100px;
}

footer h4 {
    font-size: 34px;
    font-weight: 900;
    margin-bottom: 10px;
    line-height: 1.3;
    text-transform: uppercase;
    font-weight: 700;
}

#left {
    float: left;
    width: 45%;
    padding-left: 0px;
    padding-right: 0px;
}

#right {
    float: right;
    width: 45%;
    padding-right: 0px;
    padding-left: 0px;
    font-size: 14px;
    line-height: 1.3;
}

.footerButton {
  float: left;
  height: 40px;
  width: 135px;
  border: 1px solid #333;
  cursor: pointer;
  font: 13px Lato;
  font-weight: bold;
  text-align: center;
  padding: 10px;
  text-decoration: none !important;
  color: #333 !important;
}

.footerButton:hover {
  background: #fdbf11;
  color: #fff !important;
}

.footerButton.researchButton {
  margin-left: 15px;
}

.footerTopP {
  clear: both;
  padding-top: 14px;
}

footer p {
    font-size: 14px;
}

footer h2 {
    text-transform: uppercase;
    font-weight: 700;
}

footer h3, footer h4 {
    font-weight: 700;
}

.credits {
    font-size: 14px;
    margin-top: 1em;
    margin-bottom: 16px;
}

.job {
    font-size: 16px;
    margin-bottom: 4px;
    margin-top: 12px;
}

.urbanstatement {
    font-style: italic;
    color: #666666;
    font-size: 13px;
    margin-bottom: 1em;
}

.about-data {
  line-height: 1.6;
  margin-bottom: 15px;
}

@media (max-width: 1000px) {

    .subnav a{
        font-size:14px;
    }
}


/*browser windows smaller than 850px*/
@media (max-width: 1180px) {
    .wrapper {
        width:100%;
        padding-top:100px;
    }

    .content {
        width:auto;
        padding:0px 30px
    }

    .container {
        width:auto;
        padding:0px 30px;
        margin-bottom: 40px;
    }

    .subnav {
        display: none;
    }

    #mobilenavcontainer {
        width: 100%;
        position: fixed;
        top: 0px;
        height: 45px;
        display: block;
        z-index: 11;
    }

    .show-menu{
        display: block;
        width: 100%;
        position: fixed;
        text-decoration: none;
        color: #fff;
        background: #0096d2;
        text-align: center;
        padding: 10px 0;
    }

    /*Hide checkbox*/
    input[type=checkbox]:unchecked ~ #menu{
        display: none;
        visibility:hidden;
    }

    /*Show menu when invisible checkbox is checked*/
    input[type=checkbox]:checked ~ #menu{
        display: block;
        position: absolute;
        top: 85px;
        width: 100%;
        height: 150px;
        z-index: 10;
    }

    ul#menu {
        float:none;
        display: none;
        text-align: center;
        list-style:none;
        margin:0px;
    }

    #menu li {
        margin-bottom:0px;
        list-style:none;
        padding-left:0px;
    }

    .headerimage {
        top:44px;
    }

    #left {
        width:100%;
    }

    #right {
        width:100%;
        margin-top:30px;
    }
}

.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/*browser windows smaller than 850px*/
@media (max-width: 399px) {
    .wrapper {
        padding-top:80px;
    }

    .headerimage{
        height:160px;
    }

    .overhalf{
        width:100%;
    }
}

@media (max-width: 600px) and (min-width:400px) {
    .wrapper {
        padding-top:80px;
    }

    .headerimage {
        height:250px;
    }

    .overhalf{
        width:100%;
    }
}

.full-col {
    width: 100%;
}

.container {
    margin-bottom: 80px;
    padding: 0px 30px;
}

#corr-date {
  font-style: italic;
  font-size: 16px;
}

#corr-corr{
  font-style: italic;
  font-size: 16px;
}