@media(max-width: 800px) {

    #bar-graph {
        border-collapse: collapse;
        margin: 0 auto;
        
        padding: 0 10px;
        width: 100%;
    }

    #bar-graph caption {
        border-bottom: 1px solid #111;
        font-size: 20px;
        padding: 0 0 10px 10px;
        text-align: left;
    }

    #bar-graph tr th,
    #bar-graph tr td {
        border-bottom: 1px solid #E7E7E7;
        padding: 10px;
    }

    #bar-graph tbody tr th {
        text-align: left;
    }

    #bar-graph thead tr th,
    #bar-graph tbody tr td {
        text-align: right;
    }

    #bar-ticks {
        display: none;
    }

}

/* All styling for bar graphs only when 800px or wider */
/*****************************************************************/
@media(min-width: 800px) {

    #bar-graph {
        background: transparent;
        display: block;
        height: 300px;
        margin: 1.1em 0 0;
        padding: 0;
        position: relative;
             
    }

    #bar-graph caption {
        caption-side: top;
        font-size: 20px;
        letter-spacing: .5px;
        position: absolute;
        text-align: left;
        top: -80px;
        width: 600px;
        z-index: 10;
    }

    #bar-graph tr, #bar-graph th, #bar-graph td {
        bottom: 3px;
        margin: 0;
        padding: 0;
        position: absolute;
        text-align: center;
        width: 150px;
        z-index: 2;
    }

    #bar-graph td { transition: all .3s ease; }
    #bar-graph td:hover {
        background-color: #111 !important;
        color: white;
    }



	 #bar-graph1 div {
        bottom: auto;
        right: 0;
        top: -46px;
    }

    #bar-graph1 div {
        height: auto;
        font-weight: 400;
        padding: 0;
        width: auto;
    }

    #bar-graph1 div.before {
        line-height: 2;
        right: 80px;
    }
    #bar-graph1 div.after {
        line-height: 2;
        right: 12px;
    }
    #bar-graph1 div.before:after,
    #bar-graph1 div.after:after {
        content: '';
        height: 10px;
        left: -15px;
        position: absolute;
        top: 10px;
        width: 10px;
    }
    #bar-graph1 div.before:after { background: #e6d9ad; }
    #bar-graph1 div.after:after { background: #8000e80; }


    #bar-graph thead tr {
        bottom: auto;
        right: 0;
        top: -46px;
    }

    #bar-graph thead th {
        height: auto;
        font-weight: 400;
        padding: 0;
        width: auto;
    }

    #bar-graph thead th.before {
        line-height: 2;
        right: 80px;
    }
    #bar-graph thead th.after {
        line-height: 2;
        right: 12px;
    }
    #bar-graph thead th.before:after,
    #bar-graph thead th.after:after {
        content: '';
        height: 10px;
        left: -15px;
        position: absolute;
        top: 10px;
        width: 10px;
    }
    #bar-graph thead th.before:after { background: #e6d9ad; }
    #bar-graph thead th.after:after { background: maroon; }

    #bar-graph tbody tr {
        height: 296px;
        padding-top: 2px;
    }

    #bar-graph #section-1 { left: 25px; }
    #bar-graph #section-1 .before { height: 280px; }
    #bar-graph #section-1 .after { height: 78px; }

    #bar-graph #section-2 { left: 140px; }
    #bar-graph #section-2 .before { height: 215px; }
    #bar-graph #section-2 .after { height: 90px; }

    #bar-graph #section-3 { left: 260px; }
    #bar-graph #section-3 .before { height: 285px; }
    #bar-graph #section-3 .after { height: 85px; }
	
	 #bar-graph #section-4 { left: 370px; }
    #bar-graph #section-4 .before { height: 285px; }
    #bar-graph #section-4 .after { height: 85px; }
	
	 #bar-graph #section-5 { left: 480px; }
    #bar-graph #section-5 .before { height: 285px; }
    #bar-graph #section-5 .after { height: 85px; }
	
	 #bar-graph #section-6 { left: 590px; }
    #bar-graph #section-6 .before { height: 285px; }
    #bar-graph #section-6 .after { height: 85px; }
	
	 #bar-graph #section-7 { left:700px; }
    #bar-graph #section-7 .before { height: 285px; }
    #bar-graph #section-7 .after { height: 85px; }
	
	 #bar-graph #section-8 { left: 810px; }
    #bar-graph #section-8 .before { height: 285px; }
    #bar-graph #section-8 .after { height: 85px; }
	
	 #bar-graph #section-9 { left: 920px; }
    #bar-graph #section-9 .before { height: 285px; }
    #bar-graph #section-9 .after { height: 85px; }
	
	 #bar-graph #section-10 { left: 1030px; }
    #bar-graph #section-10 .before { height: 285px; }
    #bar-graph #section-10 .after { height: 85px; }
	
	
	 #bar-graph #section-11 { left: 1130px; }
    #bar-graph #section-11 .before { height: 285px; }
    #bar-graph #section-11 .after { height: 85px; }
	 

    #bar-graph tbody th {
        bottom: -1.75em;
        font-weight: normal;
        vertical-align: top;
    }

    #bar-graph .bar {
        border-bottom: none;
        border: 1px solid;
        color: #000;
        width: 40px;
    }
    #bar-graph .bar p { margin: 5px 0 0; padding: 0; }

    #bar-graph tbody {
        display: block;
        height: 340px;
    }

    #bar-graph tbody .before {
        background-color: #e6d9ad;
        border-color: transparent;
        left: 20px;
    }

    #bar-graph tbody .after {
        background-color: maroon;
        border-color: transparent;
        left: 65px;
    }

    #bar-ticks {
        display: block;
        height: 300px;
        left: 9%;
        margin-bottom: -300px;
        position: relative;
        top: -300px;
         width: 80%;
        z-index: 1;
    }

    #bar-ticks .tick {
        border-bottom: 1px solid #E7E7E7;
        height: 58px;
        position: relative;
       width: auto;
    }
    #bar-ticks .tick:first-child {
        border-top: 1px solid #E7E7E7;
    }
    #bar-ticks .tick:last-child {
        border: 0;
    }

    #bar-ticks .tick p {
        left: -3em;
        margin: 0 0 0 0.5em;
        position: absolute;
        top: -0.8em;
    }

}