@font-face {
    font-family: 'ProximaNovaBlack';
    src: url('fonts/ProximaNova-Black.woff') format('woff');
}

@font-face {
    font-family: 'ProximaNovaBold';
    src: url('../fonts/ProximaNova-Bold.woff') format('woff');
}

@font-face {
    font-family: 'ProximaNovaExtraBold';
    src: url('fonts/ProximaNova-Extrabld.woff') format('woff');
}

@font-face {
    font-family: 'ProximaNovaSemiBold';
    src: url('../fonts/ProximaNova-Semibold.woff') format('woff');
}

@font-face {
    font-family: 'ProximaNovaRegular';
    src: url('../fonts/ProximaNova-Regular.woff') format('woff');
}

@font-face {
    font-family: 'ProximaNovaLight';
    src: url('../fonts/ProximaNovaA-Light.woff') format('woff');
}

@font-face {
    font-family: 'ProximaNovaThin';
    src: url('fonts/ProximaNovaA-Thin.woff') format('woff');
}



body {
    padding: 0;
    margin: 0;
    font-family: "ProximaNovaRegular";
    background-attachment: fixed;
    background-position: right bottom;
    background-size:contain;
    background-repeat: no-repeat,no-repeat;
    top: 0;
    color: #1C1D1A;
}

    body * {
    box-sizing:border-box;
    }

.top {
    display: flex;
    align-items: center; /* centraliza verticalmente */
    position: relative;
   /* height: 120px; */
   background-color:#f7f7f7;
}

/* Banner centralizado */
.banner {
    margin: 0 auto; /* força o centro horizontal */
}

/* Hamburger no canto direito */
.hamburger {
    position: absolute;
    right: 20px; /* distância da borda direita */
    cursor: pointer;
}

.hamburger {
   /* position: absolute;
    right: 20px;  distância da borda direita */
    cursor: pointer;
}

.hamburger {
    width: 40px;
    height: 40px;
    background: transparent;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 8px;
    position:fixed;
    z-index:10002;
    right:1rem;
    top:1rem;
    background-color:#f7f7f7;
}

    .hamburger span {
        height: 3px;
        width: 100%;
        background: rgba(0,0,0,0.75);
        border-radius: 2px;
        transition: all .3s ease;
    }

.ActFrg {
    font-size: 1.5em;
    cursor: pointer;
    display: block;
    max-width: 1024px;
    width: 100%;
 /*   min-width: 320px;*/
    margin: auto;
    text-align: center;
    box-sizing: border-box;
    padding: .5em;
    font-family:"ProximaNovaRegular";
    font-weight:bold;
    text-transform:uppercase;

}

/* ANIMAÇÃO X */
.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active span:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -6px);
    }


.maincontent {
    /*  position: absolute;
  background-image: url('../images/background.png'), url('../images/topbackground.png');
    background-attachment:fixed,inherit;
    background-size: cover;*/
   /* width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    top: 0;*/
}

div.banner {
    text-align: center;
    padding: 0 .25em;
    background-color: #f7f7f7;
    width: 100%;
    /*background-color: #0C4CA3;
    
    background-image: url('../images/top.svg');
    background-size: contain;
    background-repeat: no-repeat;
    height: 120px;

    background-position-x: center;
    background-position-y: bottom*/
}

    div.banner img {
    width:100%;
    max-width:360px;
    margin:.5rem;

    }

#selectedfreguesia {
    font-size: 1.25em;
    cursor: pointer;
    display: block;
    max-width: 1024px;
    width: 100%;
    min-width: 320px;
    margin: auto;
    text-align: center;
    box-sizing: border-box;
    padding: .5em
}

    #selectedfreguesia span {
        margin-left: .25em
    }

div.nav {
    
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-transform:uppercase;
    letter-spacing:.15rem;
    margin-bottom: .5em;
    font-weight:bold;
    font-family: "ProximaNovaSemiBold";
  
    font-weight: 400;
   
    min-height: 2.85714286em;
 
    transition: all 1s ease-out;
}

div.nav i.fa:before{
    color: #d41214;
}

    div.nav img {
        display: none;
      
    }


    div.fixed img {
        max-width:160px;

    }

/* TEXTO ATIVO */
.ActFrg {
    margin-top:1rem;
    transition: opacity .4s ease;
}

    .ActFrg.fade-out {
        opacity: 0;
    }

/* BARRA AUTOPLAY */
.autoplay-progress {
    width: 100%;
    height: 3px;
    background: transparent;
    overflow: hidden;
}

.autoplay-bar {
    width: 0%;
    height: 100%;
    background: #d41214;
}

    .overlay {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */
    height: 100%;
    width: 100%;
    position: fixed; /* Stay in place */
    z-index: 10001; /* Sit on top */
    left: -100%;
    top: 0;
    background-color: #fff; /* Black fallback color */
    background-color: rgba(255,255,255, 0.9); /* Black w/opacity */
    overflow: hidden; /* Disable horizontal scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */

}

.overlayafter {
    left: 0;
    top: 0;
  background-image: linear-gradient(to bottom, #f7f7f7,#f7f7f7,#ffffff,rgba(247,247,247,.95),rgba(247,247,247,.85),rgba(255,255,255,.75));
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: fixed;
    text-align: center;
    color: #fff;
    background-color: #fff;
    z-index:10006;
    
}

.overlayafter img{
    /*margin:5% 0 5% 0;*/
    width:60%;
}
    /*  .overlayafter * {
        margin: 5% auto;
        max-width: 100%;
    }*/
    /* Position the content inside the overlay */
    .overlay-content {
    position: relative;
    top: 15%; /* 25% from the top */
    width: 100%; /* 100% width */
    text-align: center; /* Centered text/links */
    margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

/* The navigation links inside the overlay */
.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 1.5em;
    color: rgba(0,0,0,0.75);
    display: block; /* Display block instead of inline */
    transition: 0.3s; /* Transition effects on hover (color) */
}

    /* When you mouse over the navigation links, change their color */
    .overlay a:hover, .overlay a:focus {
        color: rgba(0,0,0,0.95);
    }

/* Position the close button (top right corner) */
.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}

div.topcontent {
    text-align: center;
    max-width: 1127px;
    margin:auto;
}



.fixed {
    position: fixed;
    z-index: 10002;
    width: 100%;
    top: 0
}

div.topcontent ul.infoadic {
    margin: auto;
    padding: 0;
    list-style-type: none;
    display: list-item;
    width: 100%;
    text-align: center
}

    div.topcontent ul.infoadic li {
        width: 33.33%;
        padding: .5em;
        box-sizing: border-box;
        float: left
    }

        div.topcontent ul.infoadic li div.bar {
            width: 33.33%;
            font-size: .7em;
            box-sizing: border-box;
            float: left
        }

        div.topcontent ul.infoadic li span.toplabel {
            padding: .25em;
            background-color: #fff;
            box-sizing: border-box;
            margin-top: .5em;
            display: block
        }

ul.topinfo {
    list-style-type: none;
   /* display: inline-flex;*/
   padding: 0;
   margin:0;
   /* width: 70%;
    float: left*/
  display:inline-block;
}

    ul.topinfo li {
      /*  width: 20%;*/
        text-align: center;
        float:left;
        margin:0 1rem;
    }

        ul.topinfo li div.topvotos {
            font-weight: 700;
            font-size: 1.5rem;
           /* height: 2.5rem*/
        }

        ul.topinfo li span.toplabel,
        ul.topinfo li .bar div.resultdisplay div.namef
        {
            font-size: .65rem;
            text-transform: uppercase;
            font-size: .65rem;
            text-transform: uppercase;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            min-height: 22px;
        }

        ul.topinfo li .bar div.resultdisplay div.namef {
        }

        ul.topinfo li .bar div.resultdisplay div.percentval {
            font-size: 0.75em;
            color: rgba(0,0,0,0.8);
          /*  margin: 0 0.5em;*/
            display: block;
            float: left;
            font-weight: bold;
            width:100%;
            text-align:center;
        }
        ul.topinfo li .bar div.resultdisplay div.votos
        {
            font-size:1.25rem;
            font-weight:bold;
        }
        
            
        

        div.content {
            width: 100%;
            /*position:relative;*/
            /*height:100%;*/
            box-sizing: border-box;
        }

ul.bnagraph {
    list-style-type: none;
    padding: 0
}

ul.bnagraph {
    width: 30%;
    float: left;
        margin:0;
}

    ul.bnagraph li {
        width: 33.33%;
        float: left;
        text-align: center
    }

ul.graph li div.namep {
    float: left;
    color: rgba(0,0,0,.8);
    padding-right: .25em;
    box-sizing: border-box;
    min-width: 5.5rem;
    text-align: right;
    text-transform: uppercase;
    font-size: .75rem;
    font-weight: 700
}

ul.bnagraph .namef {
    font-size: .65em;
    text-transform: uppercase;
    margin-top: .65em;
    margin-bottom: .5em
}

}

ul.bnagraph .votos {
    padding: .20em 0
}

ul.graph li div.namef {
    display: block;
    clear: both;
    padding-top: .25em;
    color: rgba(0,0,0,.8);
    box-sizing: border-box;
    text-transform: uppercase;
    font-size: .65em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

div.graph {
    display: flex;
    flex-direction: column;
    padding:2rem .5% 1% .5%;
    position: relative;
    width: 100%;
    max-width: 1127px;
    margin: auto;
    /* display: flex;
    justify-content: center;*/
    box-sizing: border-box;
    font-family: "ProximaNovaRegular";
}

/*div.graph .graphheader,
div.graph .graphcontent {
   
    width: 100%;*/
    /*height: 100%;*/
    /*display: flex;
    justify-content: center;
    box-sizing: border-box;
}*/


div.graph .graphcontent {
    height: 100%;
}

    div.graph .graphcontent ul.graphvert {
        width: 100%;
        padding:0;
        margin:0;
        display:flex;
        flex-wrap:wrap;
        /*height:60vh;*/
	height:500px;
        flex-direction:column;
    }

        div.graph .graphcontent ul.graphvert li.item {
            margin-bottom: .1em;
            color: #fff;
            height: 5rem;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #e8e8e8;
            width:50%;
            float:left;
        }

        div.graph .graphcontent ul.graphvert li.item h3{
            font-size:.7rem;
        }

            div.graph .graphcontent ul.graphvert li.item div.bar {
                height: 100%;
                width: 100%;
                float: left;
                padding: 0.5em;
                box-sizing: border-box;
                position: relative;
                overflow: hidden;
        /*        border-left: 1px solid #e8e8e8;*/
            }
            /* div.graph .graphcontent ul.graphvert li.item * {
        float:left;
        }*/
            h3, h4 {
                margin: 0;
                padding: 0;
                /*            display: inline-block;
*/ /*    font-size: 2vw;*/
                /*  margin-block-start: 0;
    margin-block-end: 0;
    margin-bottom:10%;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: normal;*/
            }

div.graph .graphcontent ul.graphvert li.item div.bar div.resultsdisplay {
   
    color: rgba(0,0,0,0.8);
  
    display: inline-block;
    float: left;
    color: #2C4492;
    font-weight: bold;
}




div.graph .graphcontent ul.graphvert li.item div.bar div.resultsdisplay div.percentval {
    font-size: 0.75em;
    color: rgba(0,0,0,0.8);
    margin: 0 0.5em;
    display: inline-block;
    float: left;
  
    font-weight: bold;
}
div.graph .graphcontent ul.graphvert li.item div.bar div.resultsdisplay span.votes {
    display: block;
    width: 4.5em;
    clear: both;
    margin-left: 0.25em;
    margin: 0 0.5em;
    color: rgba(0,0,0,0.8);
    box-sizing: border-box;
    text-transform: uppercase;
    font-weight: normal;
    color: rgba(0,0,0,0.8);
    font-size: .75em;
    font-family: "ProximaNovaSemiBold";
}
div.graph .graphcontent ul.graphvert li.item div.bar h4.namef {
    display: block;
    clear: both;
    padding-top: 0.25em;
    color: rgba(0,0,0,0.75);
    box-sizing: border-box;
   /* text-transform: uppercase;*/
    font-size: .7em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/*    div.graph .graphcontent .item {
        background: #f7f7f7;
        width: 11.5%;
        margin: 0 .5%;
        height: 100%;
        box-sizing: border-box;
        display: flex;
        justify-content:flex-end;
        flex-direction: column;
    }*/
/* div.graph .graphheader .item {
        width: 11.5%;
        margin:0 .5%;
        box-sizing: border-box;
    }*/
/*div.graph .item .image {
    width: 60px;
    height: auto;
    max-height: 60px;*/
    /* align-self: flex-start;*/
    /*display: block;*/
    /* padding:1em;
            border-radius:.5em;*/
    /*box-sizing: border-box;
}*/

div.graph .item .image {
    width: 80px;
    height: auto;
    max-height: 80px;
    /* align-self: flex-start;*/
    display: block;
    /* padding:1em;
            border-radius:.5em;*/
    box-sizing: border-box;
}

    div.graph .item .image img{
        width: 100%;
        height: auto;
       /* max-height:40px;*/
       max-width:55px;
        align-self: flex-start;
        display: block;
       /* border: 2px solid #f7f7f7;
        border-radius: .5em;*/
        box-sizing: border-box;
    }

div.namep {
    float: left;
    color: rgba(0,0,0,0.8);
    padding-right: .25em;
    box-sizing: border-box;
    min-width: 5.5rem;
    text-align: right;
    text-transform: uppercase;
    font-size: .75rem;
    font-weight: bold;
    display:none;
}

div.graph .item .bar div.percentage {
    height: 30%;
    /* background-color: #2C4391;*/
    background-color: #FFCB2B;
    float: left;
    width: 0%;
    border-radius: 2px;
    /* width: 50%;
        height: 20px;
        align-self:center;*/
    /*  background: rgb(0,101,54);
        background: linear-gradient(80deg, rgba(0,101,54,1) 0%, rgba(100,159,53,1) 69%);
      margin: 5% 0;
        -webkit-box-shadow: -8px -4px 12px 0px rgba(0,0,0,0.3);
        box-shadow: -8px -4px 12px 0px rgba(0,0,0,0.3);*/
}

.circle {
    position: relative;
    width: 80%;
    padding-bottom: 80%;
/*    background: rgb(220,202,36);
    background: rgb(220,183,38);*/
    background: linear-gradient(80deg, rgba(220,202,36,1) 0%, rgba(220,183,38,1) 69%);
    border-radius: 50%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10%;
}

    .circle h3 {
        position: absolute;
        top: 90%;
        left: 90%;
        transform: translate(-100%, -175%);
        margin: 0;
        width: 100%;
        text-align: center;
    }

.percentage {
  /*  align-self: flex-start;
    width: 100%;*/

}

    .percentage h3 {
    text-align:center;
    font-family:"ProximaNovaBold";
    margin-bottom:0;
    }

    .percentage h3 sup{
       font-size:.65em;
    }

.bottomcontent {
    font-family: 'ProximaNovaLight';
    font-size: .95em;
    text-align: center;
}


.bottomcontent h3{
   font-family:'ProximaNovaLight';
   margin-top:.5em;
   min-height:2.5em;
}

.footer {
    /* background-color: rgba(247,247,247,.8);
   background-color: #e13c24;*/
    background-color: rgba(0,0,0,.9);
 
    width: 100%;
    clear: both;
    /* position: absolute;*/
    text-align: center;
    border-top: 2px solid #f7f7f7;
    padding: 2rem 0 4rem 0;
    font-size: .75em;
    margin-top: 2em;
    color: #fff;
}

.footer h1{
    margin-bottom:0;
}

    .footer h2 {
        margin: 0;
    }

    .footer a {
    width:20px;
    display:inline-block;
    margin:0 .5rem;
    }

        .footer a img {
            max-height: 30px;
            max-width: 100%;
       /*     filter: invert(1) opacity(0.75);*/
        }

.sitetitle {
padding-bottom:2rem;
}
      

.a2a_kit, .a2a_menu, .a2a_modal, .a2a_overlay
{
   display:inline-flex;
}

.countdownplaceholder {
    color: rgba(0,0,0,.95);
    margin-top: 2rem;
    margin-bottom: 2rem;
    font-family: "ProximaNovaBold";
    font-size: 5rem;
    display: block;
}

.countdownplaceholder label {
font-family:"ProximaNovaLight";
text-transform:uppercase;
font-size:.5em;
display:block;

}


@media screen and (max-width: 970px) {

  

    div.graph .graphcontent ul.graphvert {
        flex-direction: row;
        height: auto;
    }

    div.graph .graphcontent ul.graphvert li.item {
        width: 100%;
    }

        div.graph .item .image {
           /* padding: .5em;*/
        }
        /*div.graph {
        height: 320px;
    }


        div.graph .item .image {
            padding: 0;
        }*/
        ul.topinfo {
            width: 100% !important;
            margin: 0;
        }

    ul.topinfo li {
        width: 25%;
        margin-bottom:1%;
    }

        ul.bnagraph {
            margin: 0;
            width: 100%;
             margin-bottom: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

            ul.bnagraph li {
                float: left;
                text-align: center;
                margin: .5em 1em;
                width: unset;
            }

        .bottomcontent h3 {
            font-size: 1em;
            line-height: 1em;
        }

        .percentage h3
        .bottomcontent .votes {
            font-size: .75em;
        }

        .bottomcontent h3 {
            height: 4em;
        }

        div.graph .item .bar {
            width: 50%;
        }
    }

    @media screen and (max-width: 640px) {
        div.banner img {
            width: 100%;
            max-width: 180px;
            margin: .5rem;
        }

        div.graph .graphcontent ul.graphvert {
            flex-direction: row;
            height: auto;
        }


        div.graph .item .image {
            padding: .25em;
        }

      
            ul .topinfo li div.topvotos {
            font-size: 1em;
        }

        .percentage h3,
        .bottomcontent h3,
        .bottomcontent .votes {
            font-size: .75em;
        }

        .bottomcontent h3 {
            height: 3em;
        }

        div.graph .item .bar {
            width: 50%;
        }

        div.graph {
          /*  height: 360px;*/
        }
    }

    @media screen and (max-width: 450px) {

        div.graph .graphcontent ul.graphvert {
            flex-direction: row;
            height: auto;
        }
      /*  div.graph {
            height: 320px;
        }*/
        ul.topinfo li span.toplabel {
          height:30px;
        }

        ul.topinfo li div.topvotos {
            font-size: 1.5em;
        }

            div.graph .item .image {
                padding: 0;
            }


        .bottomcontent h3 {
            font-size: .65em;
            line-height: 1em;
        }

        .percentage h3
        .bottomcontent .votes {
            font-size: .75em;
        }

        .bottomcontent h3 {
            height: 4em;
        }

        div.graph .item .bar {
            width: 50%;
        }
    }

    @media screen and (max-width: 360px) {

        div.graph .graphcontent ul.graphvert {
            flex-direction: row;
            height:auto;
        }

        #selectedfreguesia span {
        font-size:.75em;
        }

       /* div.graph {
            height: 320px;
        }*/

        ul.topinfo {
            display: block;
        }

            ul.topinfo li {
                width: 33%;
                float: left;
                margin-top: 0;
            }

                ul.topinfo li span.toplabel {
                    min-height: unset;
                }

        div.graph .item .image {
            padding: 0;
        }


        .bottomcontent h3 {
            font-size: .65em;
            line-height: 1em;
        }

        .percentage h3,
        .bottomcontent .votes {
            font-size: .75em;
        }

        .bottomcontent h3 {
            height: unset;
        }

        div.graph .graphcontent .item,
        div.graph .graphheader .item {
            width: 16%;
        }

        div.graph .item .bar {
            width: 50%;
        }


        .countdownplaceholder {
        font-size:1.5em;
        }
    }