body {
    position:   relative;
    float:      left;
    
    margin:     0px;
    padding:    0px;
    
    height:     auto;
    min-width:  100%;
    max-width:  100%;
    
    overflow:   hidden;     

    text-align:     center;
    -webkit-overflow-scrolling: touch;    
}

html {
    max-width:  100%;
    overflow-x: hidden;
}


body div {
    text-align: center;
}

.abertura, 
.mobile-share, 
.chart, 
.legenda-wrapper, 
.filter-form {
    position:   relative;
    top:        60px;
    clear:      both;
    padding:    20px;
    max-width:  90%;
    box-sizing: border-box;
    font-size:  1em;
    margin:     0px 5%;
}

.chart {
    text-align: center;
}

.chart-chart, 
.filter-form {
    position:   relative;
    display:    inline-block;
    width:      100%;
    max-width:  960px;
    clear:      both;
}

.bar-chart, 
.chart-counter{
    position:   relative;
    display:    block;
    width:      100%;
    max-width:  960px;
    clear:      both;
}

.bar-chart {
    height: 100px;
}

.bar-bg {
    position:   relative;
    float:      left;
    width:      100%;
    box-sizing: border-box;
    background: rgb(233, 233, 233);
    height:     50px;
    overflow:   hidden;
    top:        50px;
    z-index:    100;
}

.bar-bg div {
    display:    inline-block;
    width:      0px;
    float:      left;
    position:   relative;
    height:     50px;
    box-sizing: border-box;
}

.bar-bg .favor-bar {
    background: rgba(0, 158, 227, 0.5);
}

.bar-bg .indeciso-bar {
    background: rgba(198, 198, 198, 0.5)
}

.bar-bg .naoRespondeu-bar {
    background: rgba(157, 145, 197, 0.5);
}

.bar-bg .contra-bar {
    background: rgba(227, 5, 19, 0.5);
}

.impeachment-limit {
    box-sizing:     border-box;
    position:       absolute;
    top:            0px;
    left:           0px;
    height:         100px;
    text-align:     right;
    
    width:          66.666%;
    
    border-right:   1px solid rgb(69, 69, 69);
    z-index:        200;
}

.impeachment-limit p{
    float:          right;
    box-sizing:     border-box;
    text-align:     right;
    padding:        0px 10px 5px 0px;
    font-family:    'Lato bold', sans-serif; 
    font-weight:    800px;
    font-size:      0.7em;
    position:       relative;
    max-width:      160px;
    -webkit-margin-before:  0em;
    -webkit-margin-after:   0em;
}

.chart-counter {
    top:        30px;
    height:     auto;
    float:      left;
    position:   relative;
}

.chart-counter span {
    word-break: break-word;
    padding:    2px;
    box-sizing: border-box;
    max-width:  100%;
    font-size:  0.5em;
}

.chart-counter h2 {
    -webkit-margin-before:  0em;
    -webkit-margin-after:   0em;
}

.chart-counter div {
    float:          left;
    display:        inline-block;
    width:          25%;
    box-sizing:     border-box;
    border:         1px dotted  rgb(128, 128, 128);
    border-width:   0px 1px;
    height:         100%;
     min-height:    114px;
}   

.chart-counter .favor-legenda h2 {
    color: rgba(0, 158, 227, 0.9);
}

.chart-counter .indeciso-legenda  h2{
    color: rgba(198, 198, 198, 0.9)
}

.chart-counter .naoRespondeu-legenda h2 {
    color: rgba(157, 145, 197, 0.9);
}

.chart-counter .contra-legenda h2 {
    color: rgba(227, 5, 19, 0.9);
}

.filter-form {
    margin-bottom:  50px;
}

.abertura {
    text-align: center;
}

.abertura h1 {
    text-align: center;
    font-size:  1.5em;
}

.abertura p {
    text-align: left;
    max-width:  960px;
    display:    inline-block;
}

.abertura .creditos {
    font-size:  0.8em;
}

.legenda-wrapper {
    padding:        60px 0px 30px 0px;
    text-align:     left;
    font-size:      0.8em;
}

.legenda {
    display:    inline-block;
    box-sizing: border-box;
    max-width:  320px;
    text-align: left;
    padding:    10px;
}

.legenda-legenda {
    background: rgb(0, 0, 0);
    color:      rgb(255, 255, 255);
    padding:    5px;
    box-sizing: border-box;
    display:    inline-block;
    width:      20px;
}

.input-wrapper {
    padding:    10px 0px;
}

.filter-form input, 
.filter-form select, 
.filter-form select option {
    width:          90%;
    font-family:    'Lato', sans-serif;
    box-sizing:     border-box;
    max-width:      320px;
}


@media all and (min-width: 768px)
{
    
    .filter-form .input-wrapper {
        display:    inline-block;
        float:      left;
        width:      33%;
        clear:      none;
    }
    
    .impeachment-limit {
        border-right:   3px solid rgb(69, 69, 69);
    }
    
    .mobile-share {
        display:    none;
    }
    
    .impeachment-limit p {
        font-size:  0.8em;
    }
    
    .chart-counter div {
        min-height:     initial;
        border:         3px dotted  rgb(128, 128, 128);
        border-width:   0px 3px;
    }
    
    .chart-counter span  {
        font-size:  0.8em;
    }
    
    .legenda-wrapper {
        text-align: center;
    }
    
}

.chart-counter div:nth-child(2), 
.chart-counter div:nth-child(3), 
.chart-counter div:nth-child(4) {
    border-left-width:  0px;
} 

.zh-modal {
    z-index:    999;
}

#placar-do-impeachment {
    display:                    flex;
    
    -webkit-flex-direction:     row;
    flex-direction:             row;
    
    -webkit-flex-wrap:          wrap;
    flex-wrap:                  wrap;
    
    -webkit-justify-content:    center;
    justify-content:            center;
    
    padding-bottom:     60px;
    
    width:              auto;
    min-width:          90%;
    max-width:          90%;
    
    height:             auto;
    min-height:         152px;
    
    float:              left;
    position:           relative;
    
    top:                60px;
    
    margin-left:        50%;
    
    transform:          translate(-50%, 0%);
    -moz-transform:     translate(-50%, 0%);
    -ms-transform:      translate(-50%, 0%);
    -o-transform:       translate(-50%, 0%);
    -webkit-transform:  translate(-50%, 0%);
}

#placar-do-impeachment figure {
    width:      114px;
    max-width:  114px;
    display:    inline-block;
    position:   relative;
    width:      auto;
    margin:     5px;
    padding:    0px;
    padding:    0px;
    clear:      initial;
    text-align: center;
}

#placar-do-impeachment figure .img-overlay {
    position:   absolute;
    top:        0px;
    left:       0px;
    
    width:      114px;
    height:     152px;
    
    background: transparent
}

#placar-do-impeachment figure.sim .img-overlay {
    background: rgba(0, 158, 227, 0.5);
}

#placar-do-impeachment figure.indeciso .img-overlay {
    background: rgba(198, 198, 198, 0.5);
}

#placar-do-impeachment figure.nao-quis-responder .img-overlay {
    background: rgba(157, 145, 197, 0.5);
}

#placar-do-impeachment figure.nao .img-overlay {
    background: rgba(227, 5, 19, 0.5);
}

#placar-do-impeachment figure span {
    display:    none;
    position:   absolute;
    top:        0px;
    background: rgb(0, 0, 0);
    color:      rgb(255, 255, 255);
    padding:    5px;
    box-sizing: border-box;
}

#placar-do-impeachment figure.comissao span.comissao {
    left:       0px;
    display:    inline-block;
}

#placar-do-impeachment figure.mudou span.mudou {
    right:      0px;
    display:    inline-block;
}

#placar-do-impeachment figure p {
    display:    block;
    max-width:  100%;
    margin:     0px;
    padding:    0px;
    font-size:  1em;
}

#placar-do-impeachment figure p.partido {
    font-weight:    800;
}