@media screen and (max-width: 1150px) {
    #landing-console {
        padding-right: 30px;
        padding-left: 30px;
    }
}

/* adjust design for smaller screens and as iframe height changes */

@media screen and (max-width: 1024px) {

    #landing-console {
        width: 300px;
        top: 520px;
        padding-right: 25px;
        padding-left: 25px;
    }

    #second-console {
        width: calc(50% - 80px);
        left: calc(50%);
        padding-right: 25px;
        padding-left: 35px;
    }

    #home-button-wrapper {
        display: none;
    }

    h2 {
        font-size: 24.5px;
    }

    h3 {
        font-size: 14.5px;
        margin-top: 12px;
        margin-bottom: 12px;
    }

    .console-down {
        transform: translateY(calc(55%)) !important;
        -ms-transform: translateY(calc(55%)) !important;
        -webkit-transform: translateY(calc(55%)) !important;
    }

    div.tooltip p {
        font-size: 12px;
    }

    div.tooltip h3 {
        font-size: 14px;
    }

}

@media screen and (max-width: 950px) {

    h2 {
        font-size: 24px;
    }

    .graph {
        height: 225px;
    }
}

@media screen and (max-width: 900px) {

    #adb {
        margin-top: 100px;
        margin-left: 35%;
        width: 45%;
    }

    h1 {
        font-size: 35px;
    }

    h2 {
        font-size: 23px;
    }

    h4 {
        font-size: 15px;
    }

    .label-text {
        font-size: 12.5px;
    }

    p {
        font-size: 13.5px;
    }

    #loading-message {
        top: 15%;
        width: 400px;
        height: 225px;
    }

    #landing-console {
        width: 250px;
        top: 470px;
    }

    .graph {
        height: 220px;
    }

    .axis.label {
        font-size: 11px;
    }

    .axis {
        font-size: 10px;
    }

}

@media screen and (max-width: 800px) {

    #second-console {
        height: calc(800px - 100px);
        width: calc(60% - 76px);
        left: calc(40% - 4px);
    }

    /* Hide this toggle so that only one is functional */

    #landing-console-toggle {
        visibility: hidden;
    }

    /* hide landing console when second console is brought in */

    .console-down {
        transform: translateY(calc(110%)) !important;
        -ms-transform: translateY(calc(110%)) !important;
        -webkit-transform: translateY(calc(110%)) !important;
    }

    .loading-summary {
        font-size: 14.5px;
    }

    .axis {
        font-size: 9.5px;
    }

}

@media screen and (max-width: 700px) {

    .graph {
        height: 200px;
    }

    #landing-console {
        width: 240px;
    }

    p {
        font-size: 13px;
    }

    #scroll-area {
        width: 20px;
    }

    div.tooltip p {
        font-size: 11.5px;
    }

    div.tooltip h3 {
        font-size: 13.5px;
    }

    #landing-console {
        width: 210px;
    }

    #second-console {
        height: calc(800px - 100px);
        width: calc(63% - 76px);
        left: calc(37% - 4px);
    }

    .graph-key li {
        font-size: 10.5px;
    }

}

@media screen and (max-width: 640px) {

    /* move logo up as attribution changes */

    #logo-laptop {
        top: 725px;
    }

    .download-button {
        margin-top: 35px;
    }

}

@media screen and (max-width: 600px) {

    #key-colors {
        height: 7px;
    }

    .tick {
        height: 17px;
    }

}

@media screen and (max-width: 570px) {

    /* breakpoint for our website's iframe */

    #map {
        height: 510px;
    }

    #landing-console {
        top: 341px;
        width: 200px;
        margin: 7px;
        padding-top: 7px;
        padding-bottom: 7px;
        padding-left: 12px;
        padding-right: 12px;
    }

    #second-console {
        height: calc(510px - 34px);
        width: calc(76% - 53px);
        left: 24%;
        padding-right: 15px;
        padding-left: 25px;
        margin: 7px;
    }

    .toggle {
        font-size: 11.5px;
    }

    .console-close {
        transform: translateX(calc(100% - 18px));
        -ms-transform: translateX(calc(100% - 18px));
        -webkit-transform: translateX(calc(100% - 18px));
    }

    #console-toggle {
        padding: 7px;
    }

    .graph {
        height: 190px;
    }

    #wrapper {
        height: 510px;
    }

    #logo-laptop {
        visibility: hidden;
    }

    #logo-mobile {
        visibility: visible;
    }

    #adb {
        margin-top: 50px;
        margin-left: 20%;
        width: 60%;
    }

    h1 {
        font-size: 32px;
    }

    h2 {
        font-size: 22px;
    }

    h4 {
        font-size: 14px;
    }

    .label-text {
        font-size: 12px;
    }

    p {
        font-size: 13px;
    }

    .loading-summary {
        font-size: 13.5px;
    }

    .axis.label {
        font-size: 10.5px;
    }

    .axis {
        font-size: 9px;
    }

    #pathway-toggle {
        display: none;
    }

    #loading-message {
        top: 10%;
        width: 350px;
        height: 200px;
    }

    .toggle {
        font-size: 12px;
    }

    .graph-key li {
        font-size: 10px;
    }

}

@media screen and (max-width: 410px) {

    /* breakpoint for our website's iframe */

    #map {
        height: 410px;
    }

    #wrapper {
        height: 410px;
    }

    #logo-mobile {
        width: 25px;
        height: 25px;
        top: 350px;
    }

    #loading-message {
        top: 8%;
        width: 250px;
        height: 170px;
    }

    h1 {
        font-size: 29px;
    }

    h2 {
        font-size: 19px;
    }

    h3 {
        font-size: 13.5px;
    }

    p {
        font-size: 12px;
    }

    #second-console {
        height: calc(410px - 30px);
        width: calc(87% - 40px);
        left: 13%;
        padding-right: 10px;
        padding-left: 20px;
        margin: 5px;
    }

    .console-close {
        transform: translateX(calc(100% - 15px));
        -ms-transform: translateX(calc(100% - 15px));
        -webkit-transform: translateX(calc(100% - 15px));
    }

    .axis {
        font-size: 8px;
    }

    .toggle {
        font-size: 11px;
    }

    #landing-console {
        margin: 5px;
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 10px;
        padding-right: 10px;
    }

    #landing-console {
        top: 250px;
        width: 170px;
    }

}