#content-alections{background-color: #b6b6bf}
#content-alections a{ text-decoration: none}
#content-alections UL, #content-alections LI{ padding: 0; margin: 0}
#content-alections UL li{ list-style-type: none}
@font-face {
    font-family: AVENIRNEXT;
    src: url(../fonts/AVENIRNEXT-REGULAR.TTF);
}
@font-face {
    font-family: AVENIRNEXT;
    src: url(../fonts/AVENIRNEXT-BOLD.TTF);
    font-weight: bold;
}
@font-face {
    font-family: AVENIRNEXT;
    src: url(../fonts/AVENIRNEXT-DEMIBOLD.TTF);
    font-weight: 500;
}


@font-face {
    font-family: AvenirNextCondensed;
    src: url(/static/fonts/avenir/AvenirNextCondensed-Regular.ttf);
}
@font-face {
    font-family: AvenirNextCondensed;
    src: url(/static/fonts/avenir/AvenirNextCondensed-Bold.ttf);
    font-weight: bold;
}
@font-face {
    font-family: AvenirNextCondensed;
    src: url(/static/fonts/avenir/AvenirNextCondensed-Medium.ttf);
    font-weight: 500;
}
@font-face {
    font-family: AvenirNextCondensed;
    src: url(/static/fonts/avenir/AvenirNextCondensed-DemiBold.ttf);
    font-weight: 600;
}


#content-alections{  display: flex; flex-direction: column}
#content-alections #container-chart{ height: 100%}
#content-alections header{  margin: 0 auto; display: flex; flex-direction: column; position: relative; margin-bottom: -35px; width: 100%; padding: 0 15px; padding-top: 10px;  box-sizing: border-box }
#content-alections main{  overflow-x: hidden; overflow-y: auto;  min-height: 500px}
#content-alections header .hour{ position: absolute;
    bottom: -30px;
    color: #a80000;
    font-size: 44px;
    font-weight: 500;
    font-family: "Oswald", sans-serif;
    left: 20px;}
#content-alections .header-title{font-family: "Oswald", sans-serif; font-size: 30px; font-weight: 400; text-transform: uppercase; color:#a80000; display: block; line-height: 1}
#content-alections .header-title strong{ font-weight: 600}
#content-alections h1{ font-family: "Oswald", sans-serif; font-size: 7vh; text-transform: uppercase; margin: 0;    font-weight: 600; line-height: 1; display: table; margin: 0 auto}
#content-alections h1 span{ color: #41414d; letter-spacing: -3px; display: flex}
#content-alections h1 span .t{  overflow: hidden;
    flex: 1;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;}
#content-alections h1 strong{color: #a80000;font-weight: 500; margin-left: 10px}
#content-alections header::after {
    content: '';
    margin-top: -17px;
    display: block; width: 100%;
    background-image: url(https://www.antena3.ro/prezidentiale18052025/static/images/shadow-line.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    height: 74px;
}

#content-alections h1 span .procent .big{font-size: 7vh; font-weight: 500; margin-left: 10px}
#content-alections h1 span .procent .small-top{ font-size: 38px; font-weight: 400}

#content-alections .circle {
    font-family: "Oswald", sans-serif;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    border-radius: 50%;
    font-size: 12px;
    font-weight: normal;
    background: rgba(0, 0, 0, 1);
    color: #FFF;
}
#content-alections .circle.transparent{ background-color: transparent; letter-spacing: 0; font-weight: bold}
#content-alections #mapContainer{ z-index: 2}




#content-alections .leaflet-container{ background-color: transparent}

/*---------------------------------------------HARTA 2 CANDIDATI---------------------*/
.wrap-map-versus{ display: flex; height: 100%}
.wrap-map-versus .presedinte{ width: 22%; flex:  0 0 auto; overflow: hidden; box-sizing: border-box}
.wrap-map-versus .item-column{ width: 25%; flex:  0 0 auto; overflow: hidden}
.wrap-map-versus .middle{ flex:1; position: relative;  display: flex; flex-direction: column}
.wrap-map-versus .map-container{  flex: 1;  position: relative}
.wrap-map-versus .map-container select{
    background-color: transparent;
    border: 1px solid #CCC;
    font-size: 20px;
    width: 300px;
    font-family: "Oswald", sans-serif;
    color: #cd0000;
    padding: 5px;
}
.change-country{position: absolute; right: 0; top: 0; z-index: 10}
.wrap-map-versus .user-262658{ order: 3}

.wrap-map-versus .sumar{font-family: Oswald; font-size: 18px; font-weight: 400; flex:  0 0 auto; display: flex; justify-content: space-around; padding: 10px; background-color: #9d9da6; color:#41414c}
.wrap-map-versus .sumar strong{ font-size: 30px; display:block; line-height: 1; font-weight: 500}
.wrap-map-versus .sumar-item{display: flex}
.wrap-map-versus .sumar-item div{text-align: right}
.wrap-map-versus .sumar-item div.separator{ color: #a80000; padding: 0 10px; font-weight: bold; font-size: 23px}
.wrap-map-versus  .sumar span strong{ color: #a80000}
.wrap-map-versus .presedinte{ color:#002266; border-right: 1px solid #000; display: flex; flex-direction: column; position: relative  }
.wrap-map-versus .presedinte.user-262658{ border-left: 1px solid #000  }

.wrap-map-versus .presedinte{ border: 3px solid;  border-top:0; border-left:0;  border-bottom:0; border-image-slice:1;  border-image-source: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.4) 50%, rgba(0,0,0,0) 100%);}
.wrap-map-versus .presedinte.user-262658{ border: 3px solid;  border-top:0; border-right:0;  border-bottom:0; border-image-slice:1;  border-image-source: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.4) 50%, rgba(0,0,0,0) 100%);}


.wrap-map-versus .presedinte .portret{ overflow: hidden; flex: 1;}
.wrap-map-versus .presedinte .portret IMG{height: 100%;    object-position: center bottom;    object-fit: cover;    width: 100%;    margin: 0 auto;}
.wrap-map-versus .presedinte .title{  flex:  0 0 auto; font-family: "Oswald", sans-serif;    font-size:40px;    text-transform: uppercase;    font-weight: 500;
    position: absolute;
    bottom: 33%;
    color: #FFF;
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
    padding-bottom: 10px;
}
.wrap-map-versus .presedinte .title .name{ display: flex; }
.wrap-map-versus .presedinte .title .name .prenume{  font-weight: 300; margin-right: 10px}
.wrap-map-versus .presedinte .procent{ height: 33%; flex:  0 0 auto; display: flex; justify-content: center}
.wrap-map-versus .presedinte .procent .big{ font-size: 224px; color: #FFF; font-family: "Oswald", sans-serif; font-weight: 400; height: 250px}
.wrap-map-versus .presedinte .procent .small-top{ font-size: 52px; color: #FFF; font-family: "Oswald", sans-serif; font-weight:500}
.wrap-map-versus .presedinte .procent .small-bottom{ font-size: 36px; color: #FFF; font-family: "Oswald", sans-serif; font-weight: 600}

.wrap-map-versus .presedinte .logo{  position: absolute;
    width: 60px;
    height: 60px;
    bottom: 35%;
    z-index: 2;
    right: 5%;}
.wrap-map-versus .presedinte .logo IMG{width: 100%;    object-fit: contain;    height: 100%;}

/*---------------------------------------------PARRTIDE LIST---------------------*/
.partide-list{ display: flex; height: 100%; align-items: center; overflow: auto}
.partide-list UL{ height: 100%; max-height: 300px; display: flex; flex-wrap: nowrap; flex-direction: row; gap: 1vw }
.partide-list UL LI{ width: 12vw; overflow: hidden; flex:  0 0 auto; display: flex; flex-direction: column; align-items: center; height: 100%; }
.partide-list UL LI .logo{ width: 100%; height: 80%}
.partide-list UL LI .title{font-family: AVENIRNEXT; height: 30px; line-height: 30px; text-transform: uppercase; font-weight: bold; color: #5b606c}
.partide-list UL LI IMG{ width: 100%; height: 100%; object-fit: contain; }

/*---------------------------------------------CANDIDTAI LIST---------------------*/
.candidati-list{ display: flex; height: 100%; overflow: auto; padding: 15px 0 ; box-sizing: border-box; flex-wrap: wrap; justify-content: space-around; max-height: 600px}
.candidati-list .candidat{ width: calc((100% - 100px) / 4); height: calc((100% - 30px) / 2); overflow: hidden; flex:  0 0 auto;   position: relative; box-shadow: 0 0 10px rgba(0,0,0,.3);background-color: #FFF; background-image: linear-gradient(to top, rgba(218, 212, 216, 1), rgba(218, 212, 216, 0)) }
.candidat .poza{ width: 100%; height: 90%; position: absolute; right: 0;  bottom: 0; display: flex; text-align: center}
.candidat .poza IMG{ width: auto; height: 100%; object-fit: contain; object-position: center bottom; margin: 0 auto  }
.candidat{ position: relative}
.candidat .details{ display: flex; flex-direction: column; z-index: 1; position: relative; height: 100%; padding: 0; box-sizing: border-box; justify-content: space-between}
.candidat .details .logo{ height: 15%; text-align: right }
.candidat .details .logo IMG{ width: auto; height: 100%}
.candidat .details .position{ color: #FFF; font-family: AVENIRNEXT; font-size: 50px; height: 30%; font-weight: bold; display: flex; align-items: center}
.candidat .details .name{font-family:  "Oswald", sans-serif;  text-transform: uppercase; color: #FFF; font-size: 26px; font-weight: bold;  text-shadow: 0 0 3px #000; text-align: center; line-height: 26px; padding-bottom: 5px; background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}
.candidat .details .prenume{ display: block; font-size: 18px; font-weight: 500}

.partid-detail{ position: relative}
.partid-detail .poza{ width: 350px; height: 350px; display: flex; text-align: center}
.partid-detail .poza IMG{ width: auto; height: 50%; object-fit: contain; object-position: center bottom; margin: 0 auto  }
.partid-detail .details{   z-index: 1;   padding: 0; box-sizing: border-box;  position: absolute; left: 0; bottom: 0; width: 100%; font-family:  "Oswald", sans-serif;  text-transform: uppercase; color: #FFF; font-size: 26px; font-weight: bold;  text-shadow: 0 0 3px #000; text-align: center; line-height: 26px; padding-bottom: 5px; background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}

/*---------------------------------------------CANDIDTAI PAGE DETAILS---------------------*/
.candidat-page {display: flex;  padding: 0; box-sizing: border-box}
.candidat-page .left{ width: 30%; position: relative; overflow: hidden}
.candidat-page .left .poza{ width: 100%; height: 80%; position: absolute; right: 0;  bottom: 0; }
.candidat-page .left .poza IMG{ width: 100%; height: 100%; object-fit: contain; object-position: center bottom }
.candidat-page .left .poza.old_presedinte IMG{ width: 100%; height: 100%;  object-fit: cover; margin: 0}
.candidat-page .left .details{ display: flex; flex-direction: column; z-index: 1; position: relative; height: 100%; padding: 15px; box-sizing: border-box}
.candidat-page .left .details .logo{ height: 15%; ; text-align: right}
.candidat-page .left .details .logo IMG{ width: auto; height: 100%}
.candidat-page .left .details .position{ color: #FFF; font-family: AVENIRNEXT; font-size: 50px; height: 30%; font-weight: bold; display: flex; align-items: center}

.candidat-page .right{ display: flex; justify-content:space-between}
.candidat-page .right .label-item{ font-family: "Oswald", sans-serif; color:#000; font-size: 40px; font-weight: 500}
.candidat-page .right .label-item span{ font-family: "Oswald", sans-serif; color:rgba(0,0,0,.6); font-size: 20px; display: block; font-weight: 400 }

.candidat-page .right{ flex: 1; display: flex; flex-direction: column; padding-left: 30px}
.candidat-page  .buttons{ display: flex; gap: 20px; min-height: 70px; flex-direction: row; }
.candidat-page  .buttons a{ font-family: AVENIRNEXT; font-weight: bold; font-size: 16px; background-color: #1b4ba3; color: #FFF; padding: 10px 30px;  display: flex; flex-direction: column; justify-content: space-evenly; align-items: center;  text-transform: uppercase;}
.candidat-page  .buttons IMG{ height: 50%; width: auto}

/*---------------------------------------------PROFIL ELECTORAL---------------------*/
.profil-electoral{ display: flex; height: 100%; padding: 4% 0; box-sizing: border-box}
.profil-electoral .left{ flex: 1; display: flex; justify-content: center; align-items: center}
.profil-electoral .left img{ width: 50%}

.profil-electoral .right, .statitica{ flex: 1; display: flex; flex-direction: column; padding: 0 20px;  justify-content:space-evenly; box-sizing: border-box}
.profil-electoral .right .logo{ text-align: right}
.statitica .row{ display: flex; flex-direction: row; justify-content: flex-end; gap: 30px; flex-wrap: wrap; position: relative}
.statitica .row .item{ display: flex; flex-direction: row; align-items: center}
.statitica .row span{ font-family: "Oswald", sans-serif; font-weight: 500;color: #6c6c80;  text-transform: uppercase; font-size: 18px;  white-space:nowrap; order: -1; width: 100%; flex:  0 0 auto; margin-bottom: -30px}
.statitica.right .row span{ color: #41414d; font-size: 22px}
.statitica .row span .rotate{ }
.statitica .row .item .icon{ display: flex; align-items: center; margin-right: 15px}
.statitica .row .item .icon img{ height: 58px}

.statitica .row .item .title-procent{ display: flex; flex-direction: column}
.statitica .row .item .title{ font-family:  "Oswald", sans-serif;; font-weight: 400; font-size: 24px; color: #2e2e33 }
.statitica .shadow-line {
    width: 900px;
    margin-left: -550px;
}
.statitica.right .row{ justify-content: flex-start}
.statitica.right .shadow-line{margin-right: -550px; margin-left: auto}
.statitica.right .procent .big{font-size: 80px}

/*---------------------------------------------LOCALE JUDET---------------------*/
.locale-judet{ display: flex; height: 100%; padding: 2% 0; box-sizing: border-box; padding-right: 2%}
.locale-judet .left{ width: 50%; position: relative}
.locale-judet .right{ width: 50%}
.locale-judet .left .select-uat{position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    font-size: 20px;
    background-color: #fff;
    border: 0;
    font-family: AVENIRNEXT;}

/*--------------------------------------------SOCIO  ECONOMIC---------------------*/
.socio-economic{ display: flex; height: 100%; padding: 4% 0; box-sizing: border-box}
.socio-economic .left{ flex: 1; display: flex; justify-content: center; align-items: center}

.socio-economic  .right{ flex: 1; display: flex; flex-direction: column; justify-content: space-between}
.socio-economic  .right .row{ display: flex; flex-direction: row; justify-content:  flex-start; gap: 10px; align-items: center}
.socio-economic  .right .name{ font-family: "Oswald", sans-serif; font-weight: 500; font-size: 30px; color: #5b606c; text-transform: uppercase; flex: 1; text-align: right}
.socio-economic  .right .icon{ width: 100px; text-align: center}
.socio-economic  .right .icon IMG{ height: 50px}
.socio-economic  .right .value{font-family: AVENIRNEXT; font-size: 50px; font-weight: 500; color: #5b606c; flex: 1}


/*---------------------------------------------DISTRIBUTIE PARTIDE---------------------*/
.distributie-partide{ height: 100%; display: flex; flex-direction: column; gap: 10px}
.distributie-partide .row{ display: flex; flex-direction: row; flex: 1; overflow: hidden; position: relative  }
.distributie-partide .row:before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    border-top: 15px solid #f1f1f1;
    border-left: 15px solid rgba(0,0,0,.3);
    width: 0;
}
.distributie-partide .row .logo{ width: 100px; flex: 0 0 auto; padding: 10px }
.distributie-partide .row .portret{ width: 100px; flex: 0 0 auto; padding-lef: 10px; padding-top: 10px; box-sizing: border-box; text-align: center }
.distributie-partide .row .portret IMG{height: 100%;    object-position: center;    object-fit: cover;    width: auto;    margin:0 auto}
.distributie-partide .row .title{ font-family: "Oswald", sans-serif; font-size: 20px; text-transform: uppercase; font-weight: 500; color: #FFF; display: flex; align-items: center; flex: 1}
.distributie-partide .row .logo IMG{ width: 100%; object-fit: contain; height: 100%}
.distributie-partide .procent{ color: #FFF; padding: 0 20px}

/*---------------------------------------------PROCENT---------------------*/
.procent { display: flex; flex-direction: row; align-items: center; color: #a80000 }
.procent .big{ font-family: "Oswald", sans-serif; font-weight: 400; font-size: 46px;  line-height: 1 }
.diaspora .procent .big{ font-size: 35px}
.procent .small{ display: flex; flex-direction: column}
.procent .small-top{ font-family: "Oswald", sans-serif; font-weight: bold; font-size: 16px; }
.procent .small-bottom{ font-family: "Oswald", sans-serif; font-weight: bold; font-size: 16px; opacity: .5 }

.statitica.right .big .procent .big{font-size: 200px; line-height: 175px}
.statitica.right .big .procent .small-top{font-size: 50px}
.statitica.right .big .procent .small-bottom{font-size: 50px}

/*---------------------------------------------EMBED DPF---------------------*/
#embed-pdf{ position: fixed; left: 0%; top: 0%; width: 100%; height: 100%; z-index: 10; background-color: rgba(255,255,255,.7)}
#embed-pdf embed, #embed-pdf iframe{left: 5%; top: 5%; width: 90%; height: 90%; position: absolute}
#embed-pdf .close svg {    width: 30px;    height: 30px;    fill: #000; position: absolute; right: 30px; top: 20px; padding: 10px; background-color: #1d7fa7; border-radius: 100%; z-index: 2}


.highcharts-xaxis-labels{ text-transform: uppercase}
.highcharts-data-label text{ font-size: 26px}

#content-alections .legend{position: absolute;  bottom: 0 ;right: 0; display: flex}
#content-alections .legend div{ padding: 5px; font-weight: 600;  font-family:  "Oswald", sans-serif;}

/*---------------DOODLE-------------------*/
.container {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 15;
    position: absolute;
    overflow: hidden;
    display: none;
}
.container.show{ display: block}
#settings{position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    flex-direction: row-reverse;
}
#toolbar-details{ background-color: #ccc; width: 300px;  flex: 0 0 auto; padding: 10px; border-radius: 10px; display: none}
#settings.large #toolbar-details{ display: block}
#toolbar {
    display: flex;
    flex-direction: column;
    width: 60px;
    flex: 0 0 auto;
    justify-content: flex-end;
}
#toolbar a{ background-color: rgba(0,0,0,.5); border-radius: 100%; width: 60px; height: 60px; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 30px; margin-bottom: 30px}
#toolbar svg{ width: 30px; fill: #FFF}

#circle-picker{ display: flex; flex-wrap: wrap}
#circle-picker span{ display: flex; width: 40px; height: 40px; border-radius: 100%; margin-right: 10px; margin-bottom: 10px; color: transparent; align-items: center; justify-content: center; font-size: 40px; cursor: pointer; user-select: none; /* supported by Chrome and Opera */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */}
#circle-picker span:hover{ color: #000;}

#circle-stroke{ display: flex; flex-wrap: wrap; margin-bottom: 10px}
#circle-stroke span{ display: flex; width: 40px; height: 40px; border-radius: 100%; margin-right: 10px; margin-bottom: 10px; color: transparent; align-items: center; justify-content: center; font-size: 40px; cursor: pointer; user-select: none; /* supported by Chrome and Opera */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */;
    box-sizing: border-box}
#circle-stroke span:hover{ color: #000;}

/*---------------------------------------------CAROUSEL---------------------*/
.buc-map{position: absolute; left: 0; bottom: 0; z-index: 2;   height: 30%; width: 30%}
.buc-map svg{ width: 100%; height: 100%}
.buc-map svg #g10955 path{ fill: #ff0000}

/*---------------------------------------------FOOTER---------------------*/
#content-alections footer{ background-color: transparent; padding: 0; margin: 0; border-top: 1px solid #FFF}
#content-alections footer.hide{ opacity: .2}
#content-alections footer UL{ display: flex; margin: 0; padding: 0; height: 100%}
#content-alections footer UL LI{list-style-type: none; margin: 0; padding: 0; flex: 1;  overflow: hidden}
#content-alections footer UL LI a{ font-family: "Oswald", sans-serif; font-size: 1vw; font-weight: bold; display: flex; flex-direction: column; color: #FFF; justify-content: space-evenly; align-items: center; text-transform: uppercase; height: 100%; white-space: nowrap; padding: 0 5px}
#content-alections footer UL LI a IMG{ height: 50%; width: auto}

#content-alections footer UL DIV.group-50{ flex: 5; display: flex; flex-direction: row; overflow: hidden}
#content-alections footer UL LI.europarlamentare{ background-color:#1b4ba3; flex:1 }
#content-alections footer UL LI.locale{ background-color:#292c33; flex: 1 }
#content-alections footer UL LI.back{ background-color:#cc0000 }
#content-alections footer UL LI.pen{ background-color:#d49c9c }
#content-alections footer UL LI.partide{ background-color:#1b4ba3; flex:1 }
#content-alections footer UL LI.europarlamentare-tab.activ{ background-color:#1b4ba3; flex:1; position: relative }
#content-alections footer UL LI.europarlamentare-tab.activ:before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    border-top: 15px solid #f1f1f1;
    border-left: 15px solid rgba(0,0,0,.3);
    width: 0;
}
#content-alections footer UL LI.europarlamentare-tab{ background-color:#7598d7; flex:1 }

#content-alections footer UL LI.locale-tab { background-color: #9a9da3; flex: 1}
#content-alections footer UL LI.locale-tab.activ { background-color: #292c33; flex: 1; position: relative}
#content-alections footer UL LI.locale-tab.activ:before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    border-top: 15px solid #f1f1f1;
    border-left: 15px solid rgba(255,255,255,.3);
    width: 0;
}
#content-alections footer UL LI.a3-app{ background-color: #cc0000;}
#content-alections footer UL LI.a3-app IMG{ height: 70%}

#content-alections .compara{ position: absolute; right: 0; bottom: 0; background-color: #cc0000; color: #FFF; font-family:  "Oswald", sans-serif; ; text-transform: uppercase; font-weight: 500; padding: 5px 10px; cursor: pointer; z-index: 2}
#content-alections .comapara-items{ display: flex; flex-wrap: wrap; height: 100%}
#content-alections .comapara-items .item{  width: 33.33%; flex:  0 0 auto; height: 50%; }


.distributie-partide.many{ flex-wrap: nowrap}
.distributie-partide.many  .row{ height:50px; margin-bottom: 5px; flex: 0 0 auto}
.partide-container{ height: 100%; overflow-y: auto; overflow-x: hidden}
.website_only{ display: none}

.compare-chart-wrapper{width: 80%; margin: 0 auto; height: 100%; padding: 50px 0; box-sizing: border-box}

@media screen and (min-width: 701px) {
    #content-alections{ width: 100%; height: 100%; }
    #content-alections  main{ flex: 1; }
    #content-alections  footer{ height: 10%; min-height: 70px}

    #content-alections  .candidat-page{ height: 100%; max-height: 500px}
    #content-alections  .mobile_only_alegeri{ display: none !important;}
    #content-alections  .width25{ width: 25%}
    #content-alections .circle{ font-size: 28px}
}
@media screen and (max-width: 700px) {
    body {
        padding-bottom: 70px;
    }

    #content-alections  h1{ font-size: 18px; padding: 0 16px; line-height: 26px}
    #content-alections h1 span{ letter-spacing: 0}

    .candidat-page, .locale-judet{ flex-wrap: wrap}
    .candidat-page .left, .locale-judet .left{ width: 100% !important;  flex: 0 0 auto}
    .candidat-page .right, .locale-judet .right{ padding-left: 0; width: 100% !important;}

    .candidati-list{ height: 500px; flex-wrap: nowrap; justify-content: flex-start}
    .candidati-list .candidat{ width: 70vw; height: 100%; margin-right: 15px}


    .candidat-page .buttons{ gap: 0}
    .candidat-page .buttons IMG{ height: 20px; margin-bottom: 5px}
    .candidat-page .buttons a{ text-align: center; font-size: 12px; padding: 7px}

    .wrap-map-versus{ flex-direction: column}
    .wrap-map-versus.rezultate{ flex-direction: row; flex-wrap: wrap}
    .wrap-map-versus .item-column{width: 100%}
    .wrap-map-versus .right{ order: -1; width: 100% !important;}
    .wrap-map-versus .map-container{ flex: 0 0 auto; width: 100%}
    .wrap-map-versus .map-container #mapContainer{ height: 300px !important;}
    .wrap-map-versus .map-container .change-country{ position: relative; left: auto; right: auto; width: 100%; padding: 20px; box-sizing: border-box}
    .wrap-map-versus .map-container .change-country select{ width: 100%}
    .wrap-map-versus .middle{ order: -1; width: 100%; flex: 0 0 auto}
    .wrap-map-versus .presedinte{ width: 50%}
    .wrap-map-versus .presedinte .portret{ height: 200px; flex:  0 0 auto}

    .wrap-map-versus .presedinte .logo{ top: 10px; bottom:auto}
    .wrap-map-versus .presedinte .title{ font-size: 33px; position: relative; bottom: auto}
    .wrap-map-versus .presedinte .title .name{ flex-direction: column}

    .statitica .row, .statitica.right .row{ justify-content: center}

    #content-alections  footer UL LI a{ font-size: 10px; white-space: normal; text-align: center}
    #content-alections footer UL LI a IMG{ height: 34%}
    #content-alections  .desktop_only_alegeri{ display: none !important;}

    #content-alections   .candidat-page .right .label-item{ font-size: 24px}

    #embed-pdf{ top: 50px; height: calc(100% - 50px)}
    .height500px{ height: 600px}

    #content-alections .circle{ font-size: 10px}
    .big .procent .big{ font-size: 150px}
    .statitica .row .item .title{ font-size: 14px}
    .procent .big{ font-size: 37px}
    .wrap-map-versus .presedinte .procent{ height: 200px}
    .wrap-map-versus .presedinte .procent .big{ font-size: 100px; height: auto}
    .wrap-map-versus .presedinte .procent .small-top{ font-size: 28px}
    .wrap-map-versus .sumar{ flex-direction: column; gap: 10px}
    .wrap-map-versus .sumar-item{ justify-content: center}
    .wrap-map-versus  .sumar span{ text-align: center}

    .wrap-map-versus.diaspora .statitica .row{ flex-direction: column}
    .statitica .row .item .icon{ margin-right: 5px}

    .distributie-partide{display: block}
    .distributie-partide .row{ height: 80px; margin-bottom: 10px}
    .distributie-partide .row .portret{ width: 65px}
    .distributie-partide .row .logo{ width: 30px !important;}
    .distributie-partide .row .title{ font-size: 14px}

    #content-alections .legend div{ font-size: 12px}
    .candidat{ width: 100%}

    #content-alections .comapara-items .item{ width: 100%}

    .compare-chart-wrapper{ width: 100%}
    #content-alections main{ overflow:hidden !important; padding-bottom: 30px }
}