@charset "utf-8";

/*  =========================================================================

    Individual styles
    -Knowledge
      -Prevention

    ========================================================================= */

.container.hero {
    background-image: url("../images/prevention/pgtitle.jpg");
}

#prevention > #statistics > dl#statistics-block > dt {
    float: right;
    width: 400px;
    margin-left: -400px;
    transition: .15s width ease-in-out, .25s margin-left ease-in-out;
}

#prevention > #statistics > dl#statistics-block > dt > img.block {
    margin-left: auto;
    margin-right: 0;
}

#prevention > #statistics > dl#statistics-block > dd {
    box-sizing: border-box;
    float: left;
    width: 100%;
    padding-right: 400px;
    transition: .15s padding-right ease-in-out;
}

#prevention > #statistics > dl#statistics-block > dd > h5 {
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 18px 18px;
    padding-left: 25px;
}
#prevention > #statistics > dl#statistics-block > dd > h5#preventionable {
    background-image: url("../images/prevention/f3_point_blue.png");
}
#prevention > #statistics > dl#statistics-block > dd > h5#undiscovered {
    background-image: url("../images/prevention/f3_point_red.png");
}

#prevention > #statistics > dl#statistics-block > dd > h6 {
    padding-top: .25em;
    padding-bottom: .1em;
    margin-bottom: 0;
}

#prevention > #statistics > dl#statistics-block > dd > div.box > ul.columns > li.col {
    max-width: 10em;
}

#prevention > #statistics > dl#statistics-block > dd > div.box > ul.columns > li.col li.col::first-line {
    text-indent: -1em;
}

@media screen and (max-width: 980px) {
    #prevention > #statistics > dl#statistics-block > dt {
        padding-top: 20px;
        width: 280px;
    }
    #prevention > #statistics > dl#statistics-block > dd {
        padding-right: 300px;
    }
}

@media screen and (max-width: 780px) {
    #prevention > #statistics > dl#statistics-block > dt {
        float: none;
        padding-top: 20px;
        width: 100%;
        margin-left: 0;
    }
    #prevention > #statistics > dl#statistics-block > dt > img.block {
        margin-right: auto;
    }
    #prevention > #statistics > dl#statistics-block > dd {
        float: none;
        padding-right: 0;
    }
}
@media screen and (max-width: 480px) {
    #prevention > #statistics > dl#statistics-block > dd > div.box > ul.columns > li.col {
        max-width: 100%;
    }
}