* {
    margin: 0;
    padding: 0;
}

body {
    font-size: 15px/1.5 Arial;
    background-color: white;
    color: black;
    overflow-x: hidden;
    font-family: 'Roboto', sans-serif;
}

.container {
    margin: 0 auto;
    overflow: hidden;
}

a:link {
    text-decoration: none;
    color: white;
}

a:visited {
    text-decoration: none;
    color: white;
}

a:hover {
    text-decoration: underline;
    color: lightskyblue;
}

a:active {
    text-decoration: underline;
    color: white;
}

@media only screen and (max-width: 600px) {
    .container {
        max-width: 400px;
        overflow: hidden;
        margin: 0 auto;
    }

    .title {
        width: 100%;
    }

    .title-text {
        font-size: 3em;
        padding-top: 100px;

    }
/*
    .title-text h1 {
        text-align: center;
        padding-top: 10%;
        padding-left: 12%;
        padding-right: 12%;
    }*/

    img {
        margin: 0;
        padding: 0;
        line-height: 1;
        width: 100%;
        height: auto;
    }

    /********** WNYC Display **************/

    .wnyc {
        background-color: #DE1E3D;
        border-radius: 2%;
        width: 92px;
        height: 40px;
        margin-top: 5%;
        margin: auto;
        margin-top: 15%;
    }

    #wnyc div {
        transition: opacity 0.5s ease-in-out;
        display: inline-block;
        width: 13%;
        margin-top: 10px;
    }

    .wnyc-0 {
        background-color: #DE1E3D;
        height: 0px;
        opacity: 0;
    }

    .wnyc-1 {
        background-color: white;
        height: 5px;
        opacity: 0;
    }

    .wnyc-2 {
        background-color: white;
        ;
        height: 20px;
        opacity: 0;
    }

    .wnyc-3 {
        background-color: white;
        ;
        height: 18px;
        opacity: 0;
    }

    .wnyc-4 {
        background-color: white;
        ;
        height: 22px;
        opacity: 0;
    }

    /***** *****/
    #scrolltobegin {
        width: 102px;
        font-size: .5em;
        font-style: italic;
        margin-top: 10%;

    }

    /********** Normal text paragraphs **********/
    .content {
        max-width: 350px;

    }

    .content p {
        margin-top: 10%;
    }

    .explainer {
        position: relative;
        background-color: rgb(255, 154, 154);
        border-radius: 1%;
        height: 100%;
        opacity: 0;
        transition: opacity 0.3s;
    }

    .explainer #police {
        position: absolute;
        max-width: 10%;
        top: 15%;
        left: 10%;
        opacity: 0;
        transition: opacity 0.3s;

    }

    .explainer>img:nth-of-type(2) {
        position: absolute;
        max-width: 5%;
        top: 33%;
        left: 13%;
        opacity: 0;
        transition: opacity 0.3s;
    }

    .explainer>img:nth-of-type(3) {
        position: absolute;
        max-width: 10%;
        top: 45%;
        left: 9%;
        opacity: 0;
        transition: opacity 0.3s;
    }

    .explainer>img:nth-of-type(4) {
        position: absolute;
        max-width: 5%;
        top: 49%;
        left: 30%;
        opacity: 0;
        transition: opacity 0.3s;
    }


    #explainer>img:nth-of-type(5) {
        position: absolute;
        max-width: 10%;
        top: 45%;
        left: 44%;
        opacity: 0;
        transition: opacity 0.3s;
    }

    #explainer>img:nth-of-type(6) {
        position: absolute;
        max-width: 10%;
        top: 70%;
        left: 28%;
        opacity: 0;
        transition: opacity 0.3s;
    }

    #explainer>img:nth-of-type(7) {
        position: absolute;
        max-width: 6%;
        top: 60%;
        left: 30%;
        opacity: 0;
        transition: opacity 0.3s;
    }

    .fade-in {
        opacity: 1;
    }

    /*****  INTERACTIVES  **************/

    .wrapper {
        height: 500px;
        position: fixed;
        width: 100%;

    }

    .graphic {
        background-color: lightgray;
        width: 640px;
        /*Makes the box-grid 70% of the 100vh wrapper*/
        text-align: center;
        text-transform: translate(-50%, -50%);
        height: 500px;
        margin-top: 10px;
    }

    .tooltip {
        background-color: #DE1E3D;
        padding: 3.5px;
        height: 1px;
        margin-left: 1.5px;
        margin-right: 1.5px;
        margin-top: 1.5px;
        border-radius: 15%;
        vertical-align: bottom;
    }

    .tooltip {
        position: relative;
        display: inline-block;
        transition: background-color 0.4s ease-in-out;
    }

    #graphic-main-boxes .tooltip {
        padding: 4.5px;
        margin-top: 1px;
        margin-left: 2px;
        margin-right: 2px;
    }

    #graphic-main-boxes p {
        margin-top: 5%;
        margin-bottom: 5%;
    }


    .highlight {
        background-color: white;
    }

    .highlight-minor {
        background-color: pink;
    }

    .highlight-rules {
        background-color: yellowgreen;
    }

    .highlight-serious {
        background-color: slategray;
    }

    .findings-by-category {
        margin: 5%;
        position: relative;
    }

    .findings {
        transition: max-width .5s ease-in-out;
    }

    .results {
        margin-top: 30px;
        font-size: 1.4em;
    }

    .results .tooltip {
        background-color: white;
        padding: 8px;
    }

    .category {
        height: 45px;
        width: 100%;
        display: flex;
    }

    .category-header {
        width: 20%;
        float: left;
    }

    .category-data {
        text-align: left;
        width: 80%;
        margin-left: 20px;
    }

    .tooltip .tooltiptext {
        visibility: hidden;
        width: 300px;
        color: #fff;
        text-align: center;
        padding: 1px 0;
        border-radius: 6px;

        position: absolute;
        z-index: 1;
        bottom: 125%;
        left: 50%;
        margin-left: -60px;

        opacity: 0;
        transition: opacity 0.3s;
    }

    .graphic .tooltip:hover {
        background-color: lightskyblue;
        /* old hover effect, maybe dump?*/
    }

    .hide {
        display: none;
    }

    .caption {
        margin-bottom: 30px;
        padding: 10px;
        border-radius: 1%;
    }

    .center {
        text-align: center;
    }

    /********* Scroll Spy *************/
    .scroll-spy {
        position: absolute;
        margin-top: 0vh;
        width: 100vw;
    }

    .scroll-spy div {
        position: relative;
        width: 300px;
        margin: 0 auto;
        margin-top: 100vh;
        color: white;
        background-color: lightslategray;
        /*These are styles for the font in the gray scrolling boxes*/
        opacity: .98;
        border-radius: 2%;
        max-height: 70vh;
    }

    .scroll-spy div p {
        text-align: center;
        padding: 5%;
    }

    body>div.scroll-spy>div.scroll-text.scroll-spy-reset {
        height: 0;
        background-color: white;
    }

    body>div.scroll-spy>div.scroll-spy-explainer {
        margin-left: 54%;
        width: 277px;
    }

    #caption9 {
        margin-bottom: 300px;
    }


    /* Show the tooltip text when you mouse over the tooltip container */
    .tooltip:hover .tooltiptext {
        visibility: visible;
        opacity: 1;
    }


    .key {
        background-color: lightgrey;
        max-width: 30px;
        position: absolute;
        top: 15%;
        border-radius: 2%;
        display: none;
    }

    .key p {
        font-size: 2em;
        max-width: 10px;
        padding: 5px;
        margin-left: 5px;
        margin-right: 5px;
    }

    .bullet.active {
        color: pink;

    }
}

@media only screen  and (min-width : 601px) {
    .container {
        margin: 0 auto;
        max-width: 400px;
        overflow: hidden;
    }

    .container {
        max-width: 1000px;
        overflow: hidden;
        margin: 0 auto;
    }


    .header-background {
        height: 640px;
        display: flex;
        width: 100vw;
    }

    .title {
        width: 100%;
    }

    .title-text {
        position: absolute;
        font-size: 3em;
        top: 35%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }

    .title-text h1 {
        text-align: center;
        padding-top: 10%;
        padding-left: 12%;
        padding-right: 12%;
    }

    img {
        margin: 0;
        padding: 0;
        line-height: 1;
        width: 100%;
        height: auto;
    }

    .title h1 {
        margin-top: 0;
        padding-top: 0;
    }

    /********** WNYC Display **************/

    .wnyc {
        position: absolute;
        top: 60%;
        left: 46%;
        background-color: #DE1E3D;
        border-radius: 2%;
        width: 92px;
        height: 40px;
    }

    #wnyc div {
        transition: opacity 0.5s ease-in-out;
        display: inline-block;
        width: 13%;
        margin-top: 10px;
    }

    .wnyc-0 {
        background-color: #DE1E3D;
        height: 0px;
        opacity: 0;
    }

    .wnyc-1 {
        background-color: white;
        ;
        height: 5px;
        opacity: 0;
    }

    .wnyc-2 {
        background-color: white;
        ;
        height: 20px;
        opacity: 0;
    }

    .wnyc-3 {
        background-color: white;
        ;
        height: 18px;
        opacity: 0;
    }

    .wnyc-4 {
        background-color: white;
        ;
        height: 22px;
        opacity: 0;
    }

    /***** *****/
    #scrolltobegin {
        position: absolute;
        width: 102px;
        font-size: .5em;
        font-style: italic;
        top: 75%;
        left: 45%;

    }

    /********** Normal text paragraphs **********/
    .content {
        max-width: 350px;

    }

    .content p {
        margin-top: 10%;
    }

    .explainer {
        position: relative;
        background-color: rgb(255, 154, 154);
        border-radius: 1%;
        height: 100%;
        opacity: 0;
        transition: opacity 0.3s;
    }

    .explainer #police {
        position: absolute;
        max-width: 10%;
        top: 15%;
        left: 10%;
        opacity: 0;
        transition: opacity 0.3s;

    }

    .explainer>img:nth-of-type(2) {
        position: absolute;
        max-width: 5%;
        top: 33%;
        left: 13%;
        opacity: 0;
        transition: opacity 0.3s;
    }

    .explainer>img:nth-of-type(3) {
        position: absolute;
        max-width: 10%;
        top: 45%;
        left: 9%;
        opacity: 0;
        transition: opacity 0.3s;
    }

    .explainer>img:nth-of-type(4) {
        position: absolute;
        max-width: 5%;
        top: 49%;
        left: 30%;
        opacity: 0;
        transition: opacity 0.3s;
    }


    #explainer>img:nth-of-type(5) {
        position: absolute;
        max-width: 10%;
        top: 45%;
        left: 44%;
        opacity: 0;
        transition: opacity 0.3s;
    }

    #explainer>img:nth-of-type(6) {
        position: absolute;
        max-width: 10%;
        top: 70%;
        left: 28%;
        opacity: 0;
        transition: opacity 0.3s;
    }

    #explainer>img:nth-of-type(7) {
        position: absolute;
        max-width: 6%;
        top: 60%;
        left: 30%;
        opacity: 0;
        transition: opacity 0.3s;
    }

    .fade-in {
        opacity: 1;
    }

    /*****  INTERACTIVES  **************/

    .wrapper {
        height: 500px;
        position: fixed;
        width: 100%;

    }

    .graphic {
        background-color: lightgray;
        width: 640px;
        /*Makes the box-grid 70% of the 100vh wrapper*/
        text-align: center;
        text-transform: translate(-50%, -50%);
        height: 500px;
        margin-top: 10px;
    }

    .tooltip {
        background-color: #DE1E3D;
        padding: 3.5px;
        height: 1px;
        margin-left: 1.5px;
        margin-right: 1.5px;
        margin-top: 1.5px;
        border-radius: 15%;
        vertical-align: bottom;
    }

    .tooltip {
        position: relative;
        display: inline-block;
        transition: background-color 0.4s ease-in-out;
    }

    #graphic-main-boxes .tooltip {
        padding: 4.5px;
        margin-top: 1px;
        margin-left: 2px;
        margin-right: 2px;
    }

    #graphic-main-boxes p {
        margin-top: 5%;
        margin-bottom: 5%;
    }


    .highlight {
        background-color: white;
    }

    .highlight-minor {
        background-color: pink;
    }

    .highlight-rules {
        background-color: yellowgreen;
    }

    .highlight-serious {
        background-color: slategray;
    }

    .findings-by-category {
        margin: 5%;
        position: relative;
    }

    .findings {
        transition: max-width .5s ease-in-out;
    }

    .results {
        margin-top: 30px;
        font-size: 1.4em;
    }

    .results .tooltip {
        background-color: white;
        padding: 8px;
    }

    .category {
        height: 45px;
        width: 100%;
        display: flex;
    }

    .category-header {
        width: 20%;
        float: left;
    }

    .category-data {
        text-align: left;
        width: 80%;
        margin-left: 20px;
    }

    .tooltip .tooltiptext {
        visibility: hidden;
        width: 300px;
        color: #fff;
        text-align: center;
        padding: 1px 0;
        border-radius: 6px;

        position: absolute;
        z-index: 1;
        bottom: 125%;
        left: 50%;
        margin-left: -60px;

        opacity: 0;
        transition: opacity 0.3s;
    }

    .graphic .tooltip:hover {
        background-color: lightskyblue;
        /* old hover effect, maybe dump?*/
    }

    .hide {
        display: none;
    }

    .caption {
        margin-bottom: 30px;
        padding: 10px;
        border-radius: 1%;
    }

    .center {
        text-align: center;
    }

    /********* Scroll Spy *************/
    .scroll-spy {
        position: absolute;
        margin-top: 0vh;
        width: 100vw;
    }

    .scroll-spy div {
        position: relative;
        width: 300px;
        margin: 0 auto;
        margin-top: 100vh;
        color: white;
        background-color: lightslategray;
        /*These are styles for the font in the gray scrolling boxes*/
        opacity: .98;
        border-radius: 2%;
        max-height: 70vh;
    }

    .scroll-spy div p {
        text-align: center;
        padding: 5%;
    }

    body>div.scroll-spy>div.scroll-text.scroll-spy-reset {
        height: 0;
        background-color: white;
    }

    body>div.scroll-spy>div.scroll-spy-explainer {
        margin-left: 54%;
        width: 277px;
    }

    #caption9 {
        margin-bottom: 300px;
    }


    /* Show the tooltip text when you mouse over the tooltip container */
    .tooltip:hover .tooltiptext {
        visibility: visible;
        opacity: 1;
    }


    .key {
        background-color: lightgrey;
        max-width: 30px;
        position: absolute;
        top: 15%;
        border-radius: 2%;
        display: none;
    }

    .key p {
        font-size: 2em;
        max-width: 10px;
        padding: 5px;
        margin-left: 5px;
        margin-right: 5px;
    }

    .bullet.active {
        color: pink;

    }
}