@font-face {
        font-family: "Roboto Condensed";
        src: url(https://docs.rferl.org/Infographics/sources/fonts/Apollo_Framework/RobotoCondensed-Light.woff);
        font-weight: 300;
    }
    @font-face {
        font-family: "Roboto Condensed";
        src: url(https://docs.rferl.org/Infographics/sources/fonts/Apollo_Framework/RobotoCondensed-Regular.woff);
        font-weight: 400;
    }
    @font-face {
        font-family: "Roboto Condensed";
        src: url(https://docs.rferl.org/Infographics/sources/fonts/Apollo_Framework/RobotoCondensed-Bold.woff);
        font-weight: 700;
    }
    .container {
        max-width: 750px;
        width: 100%;
        box-sizing: border-box;
        padding: 20px;
        margin: 0 auto;
    }
    @media(max-width: 640px){
        .container{
            padding: 12px;
        }
    }
    @media(max-width: 420px){
        .container{
            padding: 8px;
        }
    }
    .col-20 {
        width: 20%;
        float: left;
    }
    .col-50 {
        width: 50%;
        float: left;
    }
    .col-60 {
        width: 60%;
        float: left;
    }
    .col-80 {
        width: 80%;
        float: left;
    }
    .col-100 {
        width: 100%;
    }
    .col-33 {
        width: 33%;
        float: left;
    }
    @media(max-width: 750px) {
        .hide-desktop-inline {
            display: inline-block;
        }
        .hide-mobile-inline {
            display: none;
        }
        .hide-mobile {
            display: none;
        }
        .visible-mobile {
            display: block;
        }
    }
    @media(min-width: 751px) {
        .hide-desktop-inline {
            display: none;
        }
        .hide-mobile-inline {
            display: inline-block;
        }
        .visible-mobile {
            display: none;
        }
    }
    .hidden {
        display: none;
    }
    .text-center {
        text-align: center;
    }
    .text-left {
        text-align: left;
    }
    .text-right {
        text-align: right;
    }
    .clearfix {
        clear: both;
    }
    /* HEADER */
    header {
        padding: 20px 0;
        text-align: center;
    }
    .electionimg {
        text-align: center;
        width: 100%;
        height: auto;
        margin: 10px 0;
        font-family: "Roboto Condensed",Arial,"Arial Unicode MS",Helvetica,sans-serif;
        font-weight: bold;
        font-size: 28px;
    }
    .partylogo {
        vertical-align: middle;
        max-height: 64px;
    }
    @media(max-width: 750px) {
        .partylogo {
            display: none;
        }
    }
    .partylogo.left {
        margin-right: 15px;
    }
    .partylogo.right {
        margin-left: 15px;
    }
    p {
        font-family: "Roboto Condensed",Arial,"Arial Unicode MS",Helvetica,sans-serif;
        padding: 30px 0;
        font-size: 16px;
        line-height: 1.5;
        color: #32363a;
    }
    @media(max-width: 640px){
        p{
            padding: 20px 0;
        }
    }
    @media(max-width: 420px){
        p{
            padding: 12px 0;
        }
    }
    small {
        font-family: "Roboto Condensed",Arial,"Arial Unicode MS",Helvetica,sans-serif;
        font-size: 14px;
        line-height: 1.5;
        color: #818a93;
    }
    /* MAIN BODY */
    main {
        padding: 20px 0 0 0;
    }
    @media(max-width: 640px){
        main{
            padding: 16px 0 0 0;
        }
    }
    @media(max-width: 420px){
        main{
            padding: 12px 0 0 0;
        }
    }
    main h2 {
        font-family: "Roboto Condensed",Arial,"Arial Unicode MS",Helvetica,sans-serif;
        font-size: 26.4px;
        padding-bottom: 0;
        margin: 12px 0px;
        color: #818a93;
        line-height: 1.2em;
    }
    main h3 {
        font-family: "Roboto Condensed",Arial,"Arial Unicode MS",Helvetica,sans-serif;
        font-size: 14px;
        margin-top: 12px
        margin-bottom: 50px;
        color: #818a93;
        line-height: 1.2em;
    }
    blockquote {
        font-family: "Roboto Condensed",Arial,"Arial Unicode MS",Helvetica,sans-serif;
        color: #32363a;
        font-size: 17px;
        font-weight: bold;
        padding: 10px 20px;
        margin: 0;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        display: inline-block;
    }
    /* GENERAL VOTES */
    main div#general-votes-desktop {
        padding-bottom: 50px;
    }
    main div#general-votes-mobile {
        width: 100%;
        max-width: 350px;
        margin: 15px auto 20px auto;
        background-color: #ebebeb;
        padding: 20px 10px 10px 10px;
        border-radius: 10px;
        box-sizing: border-box;
    }
    main div#general-votes-desktop .col-1,
    main div#general-votes-desktop .col-3 {
        float: left;
        width: 100px;
        display: block;
    }
    main div#general-votes-desktop .col-2 {
        float: left;
        width: calc(100% - 200px);
        display: block;
    }
    .legend {
        margin-top: 40px;
    }
    .legend-label {
        height: 14px;
        line-height: 14px;
        font-family: "Roboto Condensed",Arial,"Arial Unicode MS",Helvetica,sans-serif;
        color: #32363a;
        font-size: 11px;
        text-transform: uppercase;
        vertical-align: 2px;
        margin-left: -2px;
        margin-right: 10px;
    }
    main div#general-votes-desktop .percents,
    main div#general-votes-mobile .votes {
        font-family: "Roboto Condensed",Arial,"Arial Unicode MS",Helvetica,sans-serif;
        line-height: 1;
        color: #32363a;
        font-size: 38px;
        padding: 0 10px;
        height: 47px;
    }
    main div#general-votes-desktop .bars {
        margin-top: 2px;
        height: 18px;
    }
    main div#general-votes-desktop .names,
    main div#general-votes-mobile .name {
        font-family: "Roboto Condensed",Arial,"Arial Unicode MS",Helvetica,sans-serif;
        color: #32363a;
        font-size: 13px;
        padding: 10px;
    }
    main div#general-votes-desktop div.bar-1,
    main div#general-votes-desktop div.bar-2,
    main div#general-votes-desktop div.bar-3,
    main div#general-votes-desktop div.bar-4
    {
        height: 18px;
        background-color: #000;
        float: left;
    }

    main div#general-votes-desktop div.bar-2 {
      float: right;
    }

    span.block-d {
        width: 14px;
        height: 14px;
        background-color: #0e76bc;
        display: inline-block;
        margin-top: 1px;
    }
    span.block-r {
        width: 14px;
        height: 14px;
        background-color: #bf1e2e;
        display: inline-block;
        margin-top: 1px;
    }
    span.block-o {
        width: 14px;
        height: 14px;
        background-color: #f2c01d;
        display: inline-block;
        margin-top: 1px;
    }
    span.block-u {
        width: 14px;
        height: 14px;
        background-color: #ebebeb;
        display: inline-block;
        margin-top: 1px;
    }
    /* TABLES */
    table {
        border: 0;
        margin: 0;
        padding: 0;
        width: 100%;
        font-family: "Roboto Condensed",Arial,"Arial Unicode MS",Helvetica,sans-serif;
        font-size: 17px;
        color: #737373;
    }
    .responsive-table {
        display:block;
        width:100%;
        min-height:0%;
        overflow-x:auto}
    }
    @media(max-width: 750px) {
        .responsive-table {
            border: #ebebeb 1px solid;
        }
    }
    @media(min-width: 751px) {
        .responsive-table {
            border: none;
        }
    }
    table tr th,
    table tr td {
        text-align: center;
        padding: 10px;
    }
    table tbody tr {
        transition: background-color .2s;
    }
    table thead tr,
    table tbody tr:hover {
        background-color: #ebebeb;
    }
    table thead tr th {
        font-weight: 400;
    }
    table tbody tr td {
        border-bottom: 1px solid #ebebeb;
    }
    table tbody tr td {
        font-weight: 300;
    }
    .check-trump {
        background-color: #CC1329;
        color: #fff;
    }
    .check-cruz {
        background-color: #FFAF13;
        color: #fff;
    }
    .check-rubio {
        background-color: #7F3263;
        color: #fff;
    }
    .check-kasich {
        background-color: #92CC04;
        color: #fff;
    }
    .check-clinton {
        background-color: #3A6FCC;
        color: #fff;
    }
    .check-sanders {
        background-color: #FF6B1F;
        color: #fff;
    }
    /* MAP */
    #map-container {
        width: 100%;
        height: 550px;
        display: block;
        margin-bottom: 20px;
    }
    @media(max-width: 640px){
        #map-container {
            height: 500px;
        }
    }
    @media(max-width: 560px){
        #map-container {
            height: 480px;
        }
    }
    @media(max-width: 480px){
        #map-container {
            height: 380px;
        }
    }
    @media(max-width: 420px){
        #map-container {
            height: 320px;
        }
    }
    @media(max-width: 360px){
        #map-container {
            height: 280px;
        }
    }
    /* TABS */
    section#tabs ul.handlers {
        width: 100%;
        border-bottom: 1px #818a93 solid;
        padding: 0;
        margin: 0;
        text-align: center;
        height: 40px;
    }
    section#tabs ul.handlers li {
        list-style: none;
        font-family: "Roboto Condensed",Arial,"Arial Unicode MS",Helvetica,sans-serif;
        display: inline-block;
        background: #818a93;
        padding: 10px 15px;
        margin: 0 2px -1px 2px;
        border-top: 1px #818a93 solid;
        border-left: 1px #818a93 solid;
        border-right: 1px #818a93 solid;
        transition: all .3s;
        cursor: pointer;
        color: #fff;
    }
    section#tabs ul.handlers  li:hover,
    section#tabs ul.handlers  li.active {
        background: #fff;
        color: #818a93;
        transition: all .3s;
    }
    section#tabs article {
        clear: both;
    }
    /* FOOTER */
    footer p {
        font-family: "Roboto Condensed",Arial,"Arial Unicode MS",Helvetica,sans-serif;
        font-style: italic;
        font-size: 12px;
        color: #818a93;
        line-height: 1.5em;
        text-align: center;
    }