html, body {max-width: 1500px; margin: 0 auto; } 
    .upper {position: fixed; top: 0px; width: 100%; display: flex; z-index: 10; height: 45px; background-color: #0B99BC; flex-direction: column; justify-content: space-evenly; align-items: center; font-family: "Roboto", sans-serif; -webkit-box-shadow: 0px 10px 22px 2px rgba(0,0,0,0.48); -moz-box-shadow: 0px 10px 22px 2px rgba(0,0,0,0.48); box-shadow: 0px 10px 22px 2px rgba(0,0,0,0.48); transition: transform 1.25s ease-in-out;}
    .unpin {transform: translateY(-75px);}
    #newsletter {background-color: #FCDF15; border: 1px solid #dde8e8; border-radius: 4px; padding: 1px 10px;}
    #newsletter a { color: white; font-size: 12px; color: #3c3c3c; text-decoration: none;}
    .cta-top p {margin: 0; font-size: 4vw; padding: 2px 5px 0 5px; letter-spacing: 2px; font-family: 'Roboto', sans-serif; font-weight: 500; color: white;}
    #form-top {display: none; height: 0; width: 0;}
    /* header { background: #F2F2F3;} */
    .topblog {background-color: #0B99BC; height: 45px; top: 0px; width: 100%; display: flex; flex-direction: row; justify-content: space-around; align-items: center; position: fixed;z-index: 9;-webkit-box-shadow: 0px 10px 22px 2px rgba(0,0,0,0.48);	-moz-box-shadow: 0px 10px 22px 2px rgba(0,0,0,0.48); box-shadow: 0px 10px 22px 2px rgba(0,0,0,0.48);transition: transform 1.5s ease-in-out;}
    .title-area {width: 50%; height: auto; margin: auto 0;}
    .title-area img {width: 150px; height: auto; vertical-align: bottom;}
    .mobile-icon {flex: 0 1 10%; margin: auto 20px;}
    .icon-bar {width: 20px; height: 3px; background-color: white; margin: 3px 0;}
    .mob-menu { position: fixed; top: 12vw; right: 0; width: auto; height: 40vw; flex-direction: column; justify-content: space-evenly; background-color: #0B99BC; padding: 2px 4px;}
    .mob-menu li:before {content: '';}
    .mob-menu a {color: white; text-decoration: none; font-family: 'Ubuntu', sans-serif; font-weight: 400; font-size: 5vw; padding: 2vw;}
    .top-nav {display: none;}
    #background-image{position:relative; width: 100%; height: auto; padding: 0; margin-top: 80px;}
    .wrapper, footer {display: flex; flex-direction: column;}
    .sidebar__inner {display: none;}
    .hr-top {border: 1px #0b99bc solid; margin: 20px 0 ; width: 20%;}
    article {margin: 20px;}
    article a {text-decoration: none;}
    article a hover {text-decoration: underline;}
    h1, h2, h3, h4 {font-family: 'Roboto', sans-serif; padding: 1vw 15px 1vw;}
    h1 {text-align: center; font-weight: 500; font-size: 18px; line-height: 150%; padding: 15px; margin: 0; color: #076077; letter-spacing : 5px;}
    .first-heading {font-size: 21px; font-weight: 700; letter-spacing: 1px; line-height: 30px;}
    h2 {font-family: 'Ubuntu', sans-serif; padding: 25px 0px 10px; font-size: 20px; font-weight: 400; margin: 0; color: #076077;text-transform: uppercase;}
    h3 {padding: 15px 10px 5px; font-size: 18px; font-weight: normal; margin: 0;color: #076077}
    h4 {padding: 5px 20px 5px 35px; font-size: 15px; font-weight: normal; margin: 0;}
    #authorship {display: flex; flex-direction: column;text-align: center; margin: 0 30px 25px;} 
    #authorship p {font-size: 14px; line-height: 1.5; color: gray; margin: 0 10px; padding:0;}
    #reading-time {background-image: url(/images/meta-clock-icon.png); background-position: calc(50% - 50px) 50%; background-repeat: no-repeat;padding-left: 18px}
    .intro, .intro p, .intro ul {font-size: 16px; line-height: 150%;}
    .intro {margin-bottom: 20px;}
    #warning {border: 3px solid #0B99BC; border-radius: 5px; background-color: #FCDF15;  margin: 40px 30px 20px; padding: 15px 20px;}
    p {font-family: 'Work', sans-serif; line-height: 24px; font-size: 14px; margin-bottom: 20px; color: #333; }
    ul, article ul a {font-family: 'Work', sans-serif; color: #386C80;text-decoration: none; font-size: 14px; line-height: 130%; list-style-position: inside; margin-block-start: 0; padding-inline-start: 25px; font-style: normal;}
    article a {color: #E0A10E;}
    ul {color: #333; margin-bottom: 20px; display: block;}
    ul li {margin-bottom: 7px; font-style: italic; line-height: 20px;}
    ul li a {padding-left: 5px; font-size: 16px;}
    article a:hover {text-decoration: underline; color: #22404D;}
    .illustrations {margin: 20px auto; font-family: 'Roboto', sans-serif; display: block;}
    .img-reduced {margin: 0  auto 20px; position: relative; display: block;}
    .source {font-style: italic; font-size: 0.8em; color:#222;margin-block: 0 ; margin: 5px auto 20px; line-height: 1.2em; }
    .formula {width: 90%; margin: 0 auto 20px; display: block;}
    h5 {margin: 0 20px; font-size: 0.9em; color: #444;}
    .svg-container {position: relative; height: auto; padding: 10px 0;}
    #svg1, #svg4 {height: auto; margin: 20px auto;}
    #chart {width: 100%; position: relative; margin: 20px auto 0;}    
    #courbe-container {width:95%; height: auto; display: flex; flex-direction: column; margin: 5px;}
    #correlations-legend {color: #076077;font-size: 12px; font-style: italic; line-height: 120%; margin:0 auto 5px; text-align: center;}
    #correlations {display: flex; flex-direction: column;}
    #selectors {display: flex; flex-direction: raw; flex-wrap: wrap; justify-content: space-evenly;}
    #selectors button {font-size: 14px; font-family: 'Roboto', sans-serif; font-weight: 400; background-color:#FCDF13; margin: 10px 1.5vw; padding: 4px 6px; width: auto; outline: none; border: none;}
    #selectors button:focus {background-color:#0B99BC; outline: none; box-shadow: 0px 0px 2px #0B99BC; color: white; font-weight: 500;transition: all .5s linear 0s}
    #selectors button:hover {background-color:#0B99BC;}
    .smallmap-container {display: block; display: flex; flex-direction: column; justify-content: space-around;margin-top: 40px;;}
    .smallmap-title {text-align: center;}
    .caption {font-size: 25px; font-weight: bold;}
    #tl {border: none; z-index:10;}
    #tl div {background-color: #fffaf0;border: 1px solid lightgrey;-webkit-box-shadow: 0px 2px 10px 0px rgba(133,129,133,1);-moz-box-shadow: 0px 2px 10px 0px rgba(133,129,133,1);box-shadow: 0px 2px 10px 0px rgba(133,129,133,1);border-radius: 5px;padding: 0;}
    #tl h4 {color: #c2104d; padding: 3px; margin: 0; font-size: 9px; font-style: italic; }
    #tl span {color:#0799BC;font-weight: bold;font-size: 9px;}
    #tl h3{font-size: 10px;font-weight: 500;color: #5C3C12;margin: 0;padding: 3px 2px 0 5px;}
    #tl p {font-size: 9px; margin: 0;line-height: 130%;padding: 0 5px 5px; margin: 0;}
    #author-box {display: flex; flex-direction: column; border-top: solid 2px lightgray; padding: 20px;font-size: 16px;}
    #avatar {width: 20%; height: auto; align-self: flex-start; margin: 20px 0;}
    #author-box h4 {font-size: 1em; padding: 0; margin: 20px 0;color: #1c6a7e; font-weight: 500;}
    #author-box p {font-size: 0.90em; padding: 0; line-height: 1.6;}
    #cuicui {width: 10%; height: auto; float: right;}

    .group-share {display: flex; flex-direction: row; justify-content: space-between; width: 50%; padding-bottom: 20px;}
    .group-share div {width:30%; height: auto; max-width: 80px;}
    .hover {display: none; visibility: hidden;}
    .hr-bottom {border: 1px #3c3c3c solid; margin: 20px auto 0 ; width: 50%; opacity: 0.8;}
    aside {flex: 1 1 10%;}
    aside h2 {margin-top: 10px; padding-left: 5vw;}
    .group-share { position: relative; margin: auto;width: 90%; display: flex; justify-content: space-evenly; align-items: center;}
    .group-share div {width: 20%;}
    .share-post {text-align: center;}
    .attribution {font-size: 8px; color: #333; float: right;}
@media all and (min-width: 320px) {
    .icon-bar {width: 30px; margin: 4px 0; height: 3.2px;}}
@media all and (min-width: 400px) {
    .title-area img {width: 250px; height: auto; vertical-align: bottom;}
    .upper {height: 60px; justify-content: space-evenly;}
    .topblog {height: 60px;}
    .cta-top p {font-size: 4vw; line-height: 5vw;}
    .topblog {height: 55px;}
    h1 {font-size: 21px;}
    .first-heading {font-size: 25px;}
    .intro, .intro p, .intro ul {font-size: 18px;}
    h2 {padding: 25px 25px 10px;}
    h3, h4 {padding: 5px 25px 5px; font-size: 18px;}
    h5 {margin: 0 30px;}
    p {font-size: 16px; line-height: 26px;}
    ul li {font-size: 16px; line-height: 24px;}
    #correlations-legend {font-size: 15px; font-style: italic; line-height: 150%; margin:0 auto 5px;}
    .svg-container {padding-top: 15px;}}
@media all and (min-width: 500px) {
    .upper {height: 50px; flex-direction: row; justify-content: space-around;}
    .topblog {height: 50px;}
    article {margin: 30px;}
    .cta-top p {font-size: 20px; padding: 0;}
    #newsletter a {font-size: 20px; line-height: 31px;}
    .mobile-icon {flex: 0 1 10%;}
    .icon-bar {width: 40px; margin: 5px 0; height: 4px;}
    .topblog {height: 60px; justify-content: space-around;}
    h1 {font-size: 19px; line-height: 35px;}
    .first-heading {line-height: inherit; font-size: 25px;}
    h2 {padding: 30px 30px 10px;}
    h3 {padding: 5px 30px 5px;}
    .social-share {width: 80px; height: auto}}
@media all and (min-width: 550px) {
    .title-area {width: 40%;}
    article {margin: 40px;}
    h1 {font-size: 21px; line-height: 38px;padding: 20px 40px;}
    .first-heading {font-size: 28px;}
    #authorship {margin-bottom: 45px;}
    h2 {padding: 30px 0px 10px; font-size: 25px;}
    h3 {padding: 15px 0 5px 30px; font-size: 21px;}
    h4 {padding: 5px 50px 5px 70px; font-size: 19px;}
    h5 {margin: 0 40px;}
    p {font-size: 18px; line-height: 30px;}
    ul li {margin-left: 30px; font-size: 18px; line-height: 28px;}
    li {left: -25px;}
    ul, ul li a {font-size: 18px;}
    #selectors button {font-size: 16px; padding: 3px 4px;border: 3px #0B99BC solid; padding: 5px; border-radius: 10px; box-shadow: -3px 5px 0 lightgrey; width: 140px;}
    #correlations-legend {font-size: 18px;}
    #svg1, #svg4 {margin-bottom: 20px;}    }
@media all and (min-width: 768px) {
    .upper {justify-content: space-evenly; height: 45px;}
    .topblog {justify-content: space-between;height: 45px;}
    .top-nav a {color: white; font-family: 'Ubuntu', sans-serif; font-size: 19px; font-weight: 300; text-decoration: none; top: 5px; margin: 0 10px;}
    .top-nav {display: flex; width: 50%; flex-direction: row; justify-content: space-around; color: white; text-decoration: none; margin-right: 20px;}
    .title-area {width: 30%; margin-left: 20px;}
    .mobile-icon {display: none; width: 0;}
    article {margin: 60px auto; padding: 0 60px; display: block; max-width: 700px;}
    h1 {font-size: 26px; line-height: 50px;}
    .first-heading {font-size: 35px;}
    #authorship {flex-direction: row; justify-content: center;}
    #auth1 p::after, #auth2 p::after {content: "•"; height: 30px; width: auto;color: rgb(212, 214, 215);padding: 0px 7px;}
    #auth3 p {padding-left: 20px;}  
    #authorship p {margin:0;}
    #reading-time {padding-left: 30px; background-position-x: 0;}
    p {font-size: 18px; line-height: 30px; margin: 0 0 30px;}
    ul li {font-size: 18px; line-height: 28px;}
    h2 {padding: 0; margin: 70px 0 30px; font-size: 32px;}
    h3 {padding: 0; margin: 50px 0 20px 30px;font-size: 26px;}
    h4 {padding: 0; margin: 40px 0 15px 70px;font-size: 22px;}
    ul {font-size: 19px;}
    ul li a {font-size: 22px;}
    .svg-container {width: 95%; height: auto; overflow: visible;}
    .smallmap-container .caption {font-size: 22px; font-weight: normal; width: 80%}
    .smallmap-container {width: 80%; margin: 0 auto;}
    .svg-right, .svg-left {margin-top: 40px;}
    .smallmap-title {font-size: 22px;}
    .formula {width: 70%; margin-bottom: 30px;}
    #tl h4 {padding: 4px; margin: 0; font-size: 13px; }
    #tl span {font-size: 13px;}
    #tl h3{font-size: 15px;margin: 0;padding: 4px 3px 0 6px;}
    #tl p {font-size: 13px; margin: 0;padding: 0 6px 6px;}
    .source {font-size: 16px; margin-bottom: 30px;}
    h5 {margin: 0;}
    .intro, .intro p, .intro ul {font-size: 22px;}
    a:hover {cursor: pointer;}
    .hr-bottom {margin: 30px auto 10px;}
    aside h2 {display: none;}
    .share-post {font-size: 40px;}
    .group-share div {width: 100%;}
    .group-share img {margin: 0;}
    .attribution {font-size: 12px;}}
@media all and (min-width: 900px) {
    .upper {height: 60px;}
    .topblog {height: 60px;  display: flex; flex-direction: row; justify-content: space-between;}
    .top-nav a {font-size: 24px;}
    aside {flex: 1 1 10%;}
    h1 {font-size: 25px; line-height: 50px; margin-top: 30px;}
    .first-heading {font-size: 34px; letter-spacing: 2px;}
    #selectors button {font-size: 18px; margin: 10px 18.5px;border: 3px #0B99BC solid; padding: 5px; border-radius: 10px; box-shadow: -3px 5px 0 lightgrey; width: 150px;}
    .svg-container {width: 95%;  height: auto;overflow: visible;margin-left:0;}
    #author-box {font-size: 17px;}              
    .group-share {right: calc(7vw - 37px);}}
@media all and (min-width: 1050px) {    
    #newsletter {display: none; height: 0; width: 0;}
    #form-top {display: flex; justify-content: space-around; align-items: center;width: 70%; height: auto;}
    .cta-top {padding: 0 0 2px 60px;; flex: 1 1 33%;}
    .cta-top p {font-size: 20px; letter-spacing: 2px;}
    .email-top { width: 32%; overflow: hidden;font-size: 16px;  line-height: 24px; color: #5d6769; background-color: #fff; border: 1px solid #dde8e8; border-radius: 4px; padding: 5px 0 5px 5px;}
    .top-button {background-color: #FCDF15;color: #3c3c3c; margin: 3px 2px;font-size: 16px; line-height: 24px; padding: 0 3vw;}
    .title-area {margin-left: 50px;}
     .top-nav a {font-size: 26px; margin: auto 15px;}
   .wrapper {flex-direction: row; justify-content: space-between;}
    main {display: flex; flex-direction: row-reverse; justify-content: space-evenly; flex: 1 1 93%}
    article {margin: 0; padding: 20px; flex: 1 0 70%;}
    h1 {font-size: 30px; line-height: 50px;}
    .first-heading {font-size: 35px; letter-spacing: 1px;}
    #authorship p {font-size: 16px;}
    #auth1 p::after, #auth2 p::after {padding: 0px 15px;}
    #warning {margin: 60px 40px 20px;}
    .smallmap-container {flex-direction: row; width: 100%;}
    .formula {width: 600px;}
    .illustrations {width: 100%; height: auto;}
    .hover {display: block; visibility: visible; font-family: 'Roboto', sans-serif;  font-weight: 500; font-size: 20px; color: rgb(165, 164, 164);}
    .img-reduced {width: 70%; height: auto;}
    .svg-container {width: 100%; overflow: visible; height: auto; justify-content: space-between;}
    .svg-right, .svg-left {width: 45%;}
    #correlations-legend {font-size: 22px; }
    #author-box {flex-direction: row; justify-content: space-between;}
    #bio-description {flex: 0 1 70%;}
    #avatar {flex: 0 1 25%; align-self: flex-start;}
    #sidebar_menu svg {height: 13px; width: auto; margin: 0 10px 0 2px; }
    nav {margin-top: 150px; flex: 1 0 15%; margin-left: 15px; max-width: 200px;}
    #courbe-container {height: 530px; width: auto;}
    nav p {margin-left: 30px; color: #076077; font-weight: bold; font-size: 1.9vw;}
    .sidebar__inner {display: flex; flex-direction: column; justify-content: space-between; height: auto;}
    nav a {font-family: 'Roboto', sans-serif; font-size: 1.3vw; font-weight: 400; text-decoration: none; color: #043845; margin: 30px 0;}
    .side-title {margin-bottom: 20px;}
    .active {font-size: 1.6vw; color:#076077; font-weight: 500;}
    aside {flex: 0 1 7%; }
    .group-share {position: sticky; top: 400px; flex-direction: column;}
    .group-share div {align-self: flex-end;}
    .share-post {display: none;}
    .social-share {width: 60px; height: auto; opacity: .8;}
    .social-share:hover {opacity: 1; transform: scale(1.1);}}
@media all and (min-width: 1150px) {
    nav {margin-left:20px;}
    nav a {font-size: 15px;}
    .active {font-size: 18px;}}
@media all and (min-width: 1279px) {
    .cta-top {padding-left: 150px;}
    .top-nav a {font-size: 27px;}
    #tl h4 {padding: 5px; margin: 0; font-size: 18px;}
    #tl span {font-size: 20px;}
    #tl h3{font-size: 20px;margin: 0;padding: 10;}
    #tl p {font-size: 18px; margin: 0;line-height: 130%;padding: 0 10px 10px; margin: 0;}
    #sidebar_menu svg {height: 16px; width: auto; margin: 0 5px 0 15px; }
    nav {max-width: 250px;}
    #sidebar_menu svg {margin: 0 15px 0 2px; }
    nav a {font-size: 17px;}
    nav p {font-size: 25px; margin-left: 50px;}
    .active {font-size: 22px; }}
@media all and (min-width: 1500px) {
    .upper,.topblog {max-width: 1500px;}
    .image-top {top: -2400px;}
    @keyframes rain{ 0% {transform: translateY(0)} 100% {transform: translateY(2400px);}}
        }    
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
    .upper {max-width: 1500px;}
    .title-area {top: -2vw;}
    .guide-title {margin-top: -7vw;}
    footer {display: flex; flex-direction: column-reverse; justify-content: space-around; flex-wrap: wrap; background-color: #32313B; color: #edebeb; text-align: center; font-family: 'Open Sans',sans-serif; margin-top:20vw;}
    footer p {font-size: 10px; margin: 2px 0; color: #ffffff;}
    .social-footer {width: 1.5em; height: auto; margin: 0 5px 1px 5px; transition: all 350ms ease; opacity: 0.8;}
    .social-footer:hover {transform: scale(1.6); opacity: 1;}
    .footer-left {flex: 1 0 30%; display: flex; flex-direction: column; justify-content: flex-end; margin: 10px 0;}
    footer {margin-bottom: 0;  height: 100px; justify-content: space-between;}}

    
    .counties {fill: none;}
    .states {fill: none;stroke: #fff;stroke-linejoin: round;position:relative;}