@font-face {
    font-family: 'Proxima Nova Th';
    src: url('fonts/subset-ProximaNova-Extrabld.eot');
    src: url('fonts/subset-ProximaNova-Extrabld.eot?#iefix') format('embedded-opentype'),
        url('fonts/subset-ProximaNova-Extrabld.woff2') format('woff2'),
        url('fonts/subset-ProximaNova-Extrabld.woff') format('woff'),
        url('fonts/subset-ProximaNova-Extrabld.svg#ProximaNova-Extrabld') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Proxima Nova Rg';
    src: url('fonts/subset-ProximaNova-Bold.eot');
    src: url('fonts/subset-ProximaNova-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/subset-ProximaNova-Bold.woff2') format('woff2'),
        url('fonts/subset-ProximaNova-Bold.woff') format('woff'),
        url('fonts/subset-ProximaNova-Bold.svg#ProximaNova-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Proxima Nova Rg';
    src: url('fonts/subset-ProximaNova-Regular.eot');
    src: url('fonts/subset-ProximaNova-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/subset-ProximaNova-Regular.woff2') format('woff2'),
        url('fonts/subset-ProximaNova-Regular.woff') format('woff'),
        url('fonts/subset-ProximaNova-Regular.svg#ProximaNova-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Proxima Nova Lt';
    src: url('fonts/subset-ProximaNova-Semibold.eot');
    src: url('fonts/subset-ProximaNova-Semibold.eot?#iefix') format('embedded-opentype'),
        url('fonts/subset-ProximaNova-Semibold.woff2') format('woff2'),
        url('fonts/subset-ProximaNova-Semibold.woff') format('woff'),
        url('fonts/subset-ProximaNova-Semibold.svg#ProximaNova-Semibold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
body{
	background:#F1F2F2;
	overflow-x: hidden;
}
/*header*/
.header {
    height: 15%;
	width:100%;
}
.header-first {
    float: left;
    width: 25%;
}
.header-last {
    float: right;
    width: 25%;
}
.header-second {
    width: 50%;
    float: left;
}
.header-last {
    float: right;
    width: 25%;
}
h2.header-title{
	font-family: 'Proxima Nova Lt';
	font-size: 45px;
	line-height:47px;
	color:#00519A;
}
h2.header-title span{
	font-family: 'Proxima Nova Th';
	font-size:65px;
	color:#BE141B;
}
.header img{
	max-width:100%;
	height:auto;
}
/*half*/
.half {
	width: 50%;
    float: left;
    display: inline-block;
    position: relative;
}
.half.clear {
    border-right: 1px dashed #58595B;
    padding-bottom: 1%;
}
.half.clear:after {
    content: '.';
    font-size: 100px;
    position: absolute;
    right: -11px;
    bottom: -36px;
	color:#58595B;
}
.clear{
	clear: both;
}
.half-box {
    position: relative;
    display: block;
	clear:both;
	width:100%;
    /*background: yellow;*/
}
.dodik-info .first-box {
	width: calc(47% - 90px);
    background: #ECECED;
    display: block;
    position: relative;
    margin-left: 90px;
    padding-left: 22px;
    box-shadow: 6px 5px 16px -6px #58595b;;
    border-radius: 20px;
    margin-top: 21px;
	float: left;
}
.dodik-info .picture {
	border-radius: 50%;
    border: 5px solid #BE141B;
    float: left;
    width: 150px;
    position: absolute;
    z-index: 5;
    left: -70px;
    top: -16px;
}
.ribbon5 {
	display: block;
    width: calc(80% + 20px);
    height: 39px;
    line-height: 37px;
    text-align: right;
    margin-left: -7px;
    margin-right: -10px;
    background: #BE141B;
    position: relative;
    top: -16px;
    border-bottom-right-radius: 33px;
    padding-left: 22px;
    color: #fff;
    font-family: 'Proxima Nova Rg';
    font-size: 15px;
    padding-right: 15px;
}
.ribbon5:before, .ribbon5:after {
  content: "";
  position: absolute;
}
.ribbon5:after {
    height: 0;
    width: 0;
    right: -17px;
    bottom: 23px;
    border-bottom: 17px solid #8B0304;
    border-right: 20px solid transparent;
}
.dodik-info h2 {
    text-align: right;
    padding-right: 20px;
    padding-bottom: 16px;
    margin-top: -10px;
    color: #58595B;
    font-family: 'Proxima Nova Rg';
    font-size: 42px;
    line-height: 44px;
}
.dodik-info h2 span{
	font-family: 'Proxima Nova Th';
}
.dodik-info .second-box {
    display: block;
    float: left;
    width: calc(50% - 1em);
    margin-left: 1em;
    vertical-align: middle;
    height: 150px;
	position:relative;
}
.dodik-info .second-box img {
    float: left;
    margin: 14% 0;
}
.dodik-info .second-box p {
    float: left;
    margin: 14% 0;
}
.responsive-box {
    width: calc(100% - 160px);
    position: absolute;
    bottom: 0;
}
.dodik-info .second-box p {
    float: left;
    margin: 14% 0;
    font-size: 23px;
    line-height: 21px;
    margin-left: 8px;
    color: #58595B;
    font-family:  'Proxima Nova Rg';
}
.border-dodik {
    position: absolute;
    width: 100%;
    left: -10px;
    bottom: 18px;
    z-index: 0;
    background-image: repeating-linear-gradient(90deg, #58595B, #58595B 10px, transparent 10px, transparent 20px);
    height: 2px;
}
.border-dodik::after {
    content: '.';
    font-size: 91px;
    position: absolute;
    right: -17px;
    top: 0px;
    line-height: 0;
    margin-top: -32px;
    color: #58595B;
}
.chart-box {
    float: left;
    width: 90%;
    height: 100%;
}
.chart {
	display: table;
    table-layout: fixed;
    width: 100%;
    max-width: 100%;
    height: 100%;
    margin: 0 auto;
    background-image: linear-gradient(bottom, rgba(0, 0, 0, 0.1) 2%, transparent 2%);
    background-size: 100% 50px;
    background-position: left top;
    border-bottom: 1px solid #58595B;
	padding-left:0;
}
 .chart li#nenad span i {
     color:#000;
}
.chart li {
    position: relative;
    display: table-cell;
    vertical-align: bottom;
    height: 200px;
}
 .chart span {
     margin: 0 1em;
     display: block;
     animation: draw 1s ease-in-out;
	 border-top-left-radius: 35px;
    border-top-right-radius: 35px;
	 font-family: 'Proxima Nova Rg';
	 font-weight:bold;
	 font-size:20px;
	 color:#58595B;
	 background: linear-gradient(0deg, rgba(123,124,127,1) 0%, rgba(123,124,127,1) 0%, rgba(173,175,178,1) 100%);
}
 .chart span.red{
	 background: #ba2025;
 } 
 .chart span.blue{
	 background: linear-gradient(90deg, rgba(0,81,154,1) 0%, rgba(0,81,154,1) 0%, rgba(10,131,190,1) 100%);
 }
.chart span.silver{
	 background: #808285;
 }
 .chart span.silver-gradient{
	 background: linear-gradient(0deg, rgba(123,124,127,1) 0%, rgba(123,124,127,1) 0%, rgba(173,175,178,1) 100%);
 }
 .chart span::before {
     position: absolute;
     left: 0;
     right: 0;
     top: 100%;
     padding: 5px 1em 0;
     display: block;
     text-align: center;
     content: attr(title);
     word-wrap: break-word;
}
 .chart span::after {
     position: absolute;
     left: 0;
     right: 0;
     top: 100%;
     padding: 5px 1em 0;
     display: block;
     text-align: center;
     content: attr(data);
     word-wrap: break-word;
}
.chart span i {
    position: absolute;
    bottom: -5px;
    width: 80%;
    text-align: center;
    font-size: 50px;
    font-weight: bold;
    color: #fff;
    font-style: normal;
}
.chart li img {
    /* position: absolute; */
    /* top: 0; */
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translate(-50%, 0);
}

/*ruller*/
.ruler-body {
    position: relative;
    height: 33vh;
    padding-left: 0;
    width: 100%;
}
.ruler-y {
    padding-left: 0;
    padding-bottom: 0 !important;
    margin-bottom: 0;
    width: 10%;
    float: left;
    /*background: red;*/
    border-right: 1px dashed #58595B;
}
.ruler-y li{
     height:3vh;
     list-style-type:none;
     text-align: center;
}
/*predsjednostvo*/
#procentiPredsjednistva .ruler-y {
	border-right: 0px dashed #58595B;
	border-left: 1px dashed #58595B;
	float:right;
}
.zeljka-info .first-box {
	width: calc(47% - 90px);
    background: #ECECED;
    display: block;
    position: relative;
    margin-right: 90px;
    padding-left: 22px;
    box-shadow: -6px 5px 16px -6px #58595B;
    border-radius: 20px;
    margin-top: 21px;
	float: right;
}
.zeljka-info .picture {
	border-radius: 50%;
    border: 5px solid #BE141B;
    float: right;
    width: 150px;
    position: absolute;
    z-index: 5;
    right: -70px;
    top: -16px;
}
.ribbon6 {
    display: block;
    width: calc(90% + 20px);
    height: 39px;
    line-height: 37px;
    text-align: left;
    margin-left: 33px;
    margin-right: -10px;
    background: #BE141B;
    position: relative;
    top: -15px;
    border-bottom-left-radius: 33px;
    padding-left: 22px;
    color: #fff;
    font-family: 'Proxima Nova Rg';
    font-size: 15px;
}
.ribbon6:before, .ribbon6:after {
  content: "";
  position: absolute;
}
.ribbon6:after {
    height: 0;
    width: 0;
    left: -17px;
    bottom: 23px;
    border-bottom: 17px solid #8B0304;
    border-left: 20px solid transparent;
}
.zeljka-info h2 {
	text-align: right;
    padding-right: 95px;
    padding-bottom: 16px;
    margin-top: -10px;
    color: #58595B;
    font-family: 'Proxima Nova Rg';
    font-size: 42px;
	line-height: 44px;
}
.zeljka-info h2 span{
	font-family: 'Proxima Nova Th';
}
.zeljka-info .second-box {
    display: block;
    float: left;
    width: calc(50% - 1em);
    margin-left: 2em;
    vertical-align: middle;
    height: 150px;
	position:relative;
}
.zeljka-info .second-box img {
    float: left;
    margin: 14% 0;
}
.zeljka-info .second-box p {
    float: left;
    margin: 14% 0;
}
.zeljka-info .responsive-box {
	width: calc(100% - 160px );
    position: absolute;
    bottom: 0;
    right: -8px;
}
.zeljka-info .second-box p {
    float: left;
    margin: 14% 0;
    font-size: 23px;
    line-height: 21px;
    margin-left: 8px;
    color: #58595B;
    font-family:  'Proxima Nova Rg';
}
.border-zeljka {
    position: absolute;
    width: 100%;
    left: 1px;
    bottom: 18px;
    z-index: 0;
    background-image: repeating-linear-gradient(90deg, #58595B, #58595B 10px, transparent 10px, transparent 20px);
    height: 2px;
}
.border-zeljka::before {
    content: '.';
    font-size: 91px;
    position: absolute;
    left: -17px;
    top: 0px;
    line-height: 0;
    margin-top: -32px;
    color: #58595B;
}

/*skupstina*/
.full {
    width: 100%;
    float: left;
    clear: both;
    margin-top: 20px;
    text-align: center;
    /*background: green;*/
}
.full h3{
	font-size:23px;
	font-weight:normal;
	font-family:  'Proxima Nova Rg';
	color:#58595B;
}
#skupstina,#dom{
     display:block;
}
.stranka {
     display: inline-block;
     width: 12%;
}
#skupstina.chart, #dom.chart {
    display: inline-block;
    /*table-layout: fixed;
     width: 100%; */
    max-width: 99%;
    margin: 0 auto;
    background-image: linear-gradient(bottom, rgba(0, 0, 0, 0.1) 2%, transparent 2%);
    background-size: 100% 50px;
    background-position: left top;
	border-bottom:none;
}
 #skupstina.chart li{
		position: relative;
		display: block;
		vertical-align: bottom;
		height: 6vh;
		margin-bottom: 20px;
		width: 16.66666666666667%;
		float: left;
		border-bottom:1px solid #ccc;
}
#dom.chart li {
		position: relative;
		display: block;
		vertical-align: bottom;
		height: 6vh;
		margin-bottom: 20px;
		width: 16.66666666666667%;
		float: left;
		border-bottom:1px solid #ccc;
}
 #skupstina.chart span,  #dom.chart span {
		position: absolute;
		bottom: 0;
		width: 95%;
		font-size:15px;
		border-top-right-radius:10px;
		border-top-left-radius:10px;
}
 #skupstina.chart #СНСД span,#dom.chart #СНСД span {
     margin: 0 0.5em;
     display: block;
     background: #ba2025;
	 font-weight:bold;
     animation: draw 1s ease-in-out;
}
#skupstina.chart #СНСД span i, #dom.chart #СНСД span i{
	color:#fff;
	font-weight:bold;
}
#skupstina.chart span::before, #dom.chart span::before{
     position: absolute;
     left: 0;
     right: 0;
     top: 100%;
     padding: 5px 1em 0;
     display: block;
     text-align: center;
     content: attr(title);
     word-wrap: break-word;
}
#skupstina.chart span::after,#dom.chart span::after {
     position: absolute;
     left: 0;
     right: 0;
     top: 100%;
     padding: 5px 1em 0;
     display: block;
     text-align: center;
     content: attr(data);
     word-wrap: break-word;
}
#skupstina.chart span i,#dom.chart span i {
    position: absolute;
    bottom: -5px;
    width: 100%;
    text-align: center;
    font-size: 25px;
    font-weight: normal;
    color: #000;
    font-style: normal;
	left:0;
	font-family:  'Proxima Nova Rg';
}
/*progress*/
@property --pgPercentage {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

div[role="progressbar"] {
	--pgPercentage: var(--value);
    animation: growProgressBar 3s 1 forwards;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient(closest-side, white 88%, transparent 0 99.9%, white 0), conic-gradient(#BE141B calc(var(--pgPercentage) * 1%), #adb5baf7 0);
    font-family: 'Proxima Nova Rg';
    font-size: 45px;
	font-weight:bold;
    color: #BE141B;
    float: right;
    margin-top: 20px;
	margin-right:5px;
}
#glasaloZaPredsjednistvo{
	float: left;
	margin-left:5px;
}
 @keyframes draw {
     0% {
         height: 0;
    }
}
@keyframes growProgressBar {
  0%, 33% { --pgPercentage: 0; }
  100% { --pgPercentage: var(--value); }
}
.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: nowrap;
    margin-right: -15px;
    margin-left: -15px;
}
@media only screen and (max-width: 1827px) {
	.zeljka-info .second-box p,.dodik-info .second-box p {
		font-size: 20px;
	}
	.ribbon6 {
		margin-left: 4px;
	}
	.ribbon5 {
		margin-left: 0;
		width: calc(84% + 20px);
	}
	.chart span i{
		font-size:44px;
	}
}
@media only screen and (max-width: 1746px) {
	.zeljka-info h2,.dodik-info h2{
		font-size:30px;
	}
	.ribbon5,.ribbon6{
		font-size:12px;
	}

}
@media only screen and (max-width: 1649px) {
	div[role="progressbar"]{
		width: 100px;
		height: 100px;
		margin-top: 50px;
		font-size: 20px;
	}
	.responsive-box,.zeljka-info .responsive-box {
		width: calc(100% - 110px);
	}
	.dodik-info h2,.zeljka-info h2{
		padding-bottom: 0px;
		line-height: 38px;
	}
}
@media only screen and (max-width: 1595px) {
	.chart span i {
		font-size: 35px;
	}
	.chart span{
		font-size:15px;
	}
}
@media only screen and (max-width: 1500px) {
	.zeljka-info .second-box{
		width: calc(43% - 1em);
		margin-left: 1em;
	}
	.dodik-info .second-box {
		display: block;
		width: calc(43% - 1em);
	}
	.zeljka-info .second-box p, .dodik-info .second-box p {
		font-size: 15px;
		line-height: 20px;
	}
	.zeljka-info .first-box,.dodik-info .first-box {
		width: calc(55% - 90px);
	}
	h2.header-title {
		font-size: 36px;
	}
	h2.header-title {
		font-size: 36px;
	}
	h2.header-title span{
		font-size: 51px;
	}
	.row img {
		max-height: 90px;
	}
	.header {
		height: 10%;
		width: 100%;
	}
}
@media only screen and (max-width: 1390px) {
	.dodik-info .second-box img,.zeljka-info .second-box img {
		display:none;
	}
	.chart span i {
		font-size: 30px;
	}
	#skupstina.chart span i,#dom.chart span i{
		font-size:20px;
	}
}
@media only screen and (max-width: 1300px) {
	.ribbon6 {
		height: 39px;
		line-height: 13px;
		top: -14px;
		padding-top: 5px;
		width: calc(87% + 20px);
		float: right;
		padding-right: 50px;
	}
	.ribbon5 {
		height: 39px;
		line-height: 13px;
		top: -14px;
		padding-top: 5px;
		width: calc(78% + 20px);
		float: left;
		padding-left: 50px;
		text-align: left;
	}
	.dodik-info h2, .zeljka-info h2 {
		padding-bottom: 17px;
		line-height: 30px;
		font-size: 23px;
	}
}
@media only screen and (max-width: 1222px) {
	.half {
		width: 100%;
	}
	.half.clear {
		border-right: 0px dashed #58595B;
	}
	.half.clear:after{
		content:'';
	}
	.zeljka-info .first-box, .dodik-info .first-box {
		max-width: 350px;
	}
	.dodik-info .second-box,.zeljka-info .second-box {
		display: block;
		width: calc(100% - 500px);
	}
	.dodik-info .second-box img, .zeljka-info .second-box img {
		float: left;
		margin: 16px 0;
		display: block;
	}
	.zeljka-info .second-box p, .dodik-info .second-box p {
		font-size: 20px;
		line-height: 23px;
		margin: 16px 5px;
	}
	.ribbon5{
		padding-top: 12px;
		font-size:15px;
		width: calc(81% + 20px);
	}
	.dodik-info h2, .zeljka-info h2 {
		line-height: 34px;
		font-size: 36px;
	}
	.chart span {
		font-size: 22px;
	}
	.border-zeljka,.border-dodik{
		bottom:12px;
	}
	.full {
		margin-top: 73px;
	}
	.ribbon6 {
		font-size: 15px;
		padding-top: 12px;
	}
	#skupstina.chart,#dom.chart{
		padding:0;
	}
	#skupstina.chart li,#dom.chart li {
		position: relative;
		display: block;
		vertical-align: bottom;
		height: 15vh;
		margin-bottom: 40px;
		width: 25%;
		float: left;
	}
	#skupstina.chart span,#dom.chart span {
		position: absolute;
		bottom: 0;
		width: 95%;
	}
	.half {
		margin-top: 65px;
	}
	.full h3 {
		text-align: left;
		padding-left:15px;
	}
}
@media only screen and (max-width: 1126px) {
	h2.header-title {
		font-size: 22px;
		line-height: 33px;
	}
	h2.header-title span {
		font-size: 40px;
	}
}
@media only screen and (max-width: 966px) {
	h2.header-title {
		font-size: 17px;
		line-height: 23px;
	}
	h2.header-title span {
		font-size: 30px;
	}
}
@media only screen and (max-width: 832px){
	.dodik-info .second-box img, .zeljka-info .second-box img {
		float: left;
		margin: 16px 0;
		display: none;
	}
	.chart span {
		font-size: 17px;
	}
}
@media only screen and (max-width: 750px){
	.ribbon5 {
		padding-top: 7px;
		font-size: 12px;
	}
	.ribbon6 {
		font-size: 12px;
		padding-top: 8px;
		padding-right:69px;
	}
	.zeljka-info .first-box, .dodik-info .first-box {
		max-width: 290px;
	}
	.dodik-info .second-box, .zeljka-info .second-box {
		display: block;
		width: calc(100% - 400px);
	}
	.zeljka-info .second-box p, .dodik-info .second-box p {
		font-size: 15px;
		line-height: 19px;
		margin: 16px 5px;
	}
}
@media only screen and (max-width: 690px){
	.dodik-info h2, .zeljka-info h2 {
		line-height: 27px;
		font-size: 25px;
	}
	.zeljka-info .responsive-box,.responsive-box{
		bottom: 16px;
	}
	.header-last,.header-first {
		width: 18%;
	}
	.header-second {
		width: 64%;
		float: left;
	}
	.dodik-info .second-box, .zeljka-info .second-box {
		display: block;
		width: calc(100% - 58%);
	}
}
@media only screen and (max-width: 602px){
	.dodik-info h2, .zeljka-info h2 {
		line-height: 23px;
		font-size: 20px;
	}
	.zeljka-info .second-box p, .dodik-info .second-box p {
		font-size: 12px;
		line-height: 15px;
		margin: 16px 5px;
	}
	.zeljka-info .second-box p, .dodik-info .second-box p {
		font-size: 12px;
		line-height: 15px;
		margin: 16px 5px;
	}
	ul.ruler-y {
		display: none;
	}
	.chart-box {
		float: left;
		width: 100%;
		height: 100%;
	}
	.chart {
		padding-left: 0;
	}
}
@media only screen and (max-width: 534px){
	.zeljka-info .first-box, .dodik-info .first-box {
		max-width: 100%;
		width: 77%;
	}
	.ribbon5,.ribbon6 {
		padding-top: 12px;
		font-size: 15px;
	}
	h2 {
		line-height: 34px;
		font-size: 35px;
	}
	.dodik-info .second-box, .zeljka-info .second-box {
		display: block;
		width: 95%;
		height: 100px;
	}
	div[role="progressbar"] {
		width: 100px;
		height: 100px;
		margin-top: 5px;
		font-size: 20px;
	}
	.dodik-info .second-box p,.zeljka-info .second-box p {
		font-size: 17px;
		line-height: 20px;
	}
	.dodik-info h2, .zeljka-info h2 {
		line-height: 34px;
		font-size: 39px;
	}
	.row img {
		padding-top: 5px;
	}
	.chart span i {
		line-height: 50px;
	}
	#procentiPredsjednistva .chart span {
		font-size: 17px;
		line-height: 15px;
		border-top-left-radius: 15px;
		border-top-right-radius: 15px;
	}
	#procentiPredsjednistva .chart span i {
		font-size: 20px;
	}
	#skupstina.chart span i,#dpm.chart span i {
		font-size: 18px;
	}
}
@media only screen and (max-width: 480px){
	#procentiPredsjednistva .chart span {
		font-size: 15px;
	}
}
@media only screen and (max-width: 448px){
	.ribbon5, .ribbon6 {
		padding-top: 6px;
	}
	#procentiPredsjednistva .chart span {
		font-size: 10px;
		line-height: 12px;
	}
	#procentiPredsjednika .chart span {
		border-top-left-radius: 15px;
		border-top-right-radius: 15px;
		line-height: 18px;
	}
}
@media only screen and (max-width: 425px){
	.header-last, .header-first {
		width: 10%;
	}
	.header-second {
		width: 80%;
		float: left;
	}
}
@media only screen and (max-width: 398px){
	.dodik-info h2, .zeljka-info h2 {
		line-height: 33px;
		font-size: 25px;
	}
	.ribbon5, .ribbon6 {
		font-size: 14px;
	}
	.chart span i {
		font-size: 20px;
	}
	#procentiPredsjednistva .chart span i {
		font-size: 15px;
	}
	#skupstina.chart span::before,#dom.chart span::before{
		font-size:11px;
	}
}
@media only screen and (max-width: 375px){
	.header-last, .header-first {
		display:none;
	}
	.header-second {
		width: calc(100% - 10px);
		padding:5px;
	}
}
@media only screen and (max-width: 291px){
	h2.header-title span {
		font-size: 25px;
	}
	.ribbon5, .ribbon6 {
		font-size: 11px;
	}
	.dodik-info .second-box p, .zeljka-info .second-box p {
		font-size: 15px;
		line-height: 20px;
	}
	.chart li img {
		max-width: 50px;
	}
	.dodik-info h2, .zeljka-info h2 {
		line-height: 31px;
		font-size: 20px;
	}
	.chart span i {
		font-size: 15px;
	}
	.chart span {
		font-size: 14px;
	}
	.zeljka-info .first-box{
		margin-right:52px;
	}
	.dodik-info .first-box {
		margin-left: 72px;
	}
	#skupstina.chart span i,#dom.chart span i {
		font-size: 13px;
	}
}
#popup{
  width:90%;
  max-height: 90%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 50;
  max-width:1300px;
 }
 img#popupIMG {
    max-width: 100%;
    height: auto;
}
.POPmain {
    background: #bb0e0ccf;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 9;
	top:0;
    position: fixed;
}
/*login*/
body.login {
    background: #BE141B;
	font-family: 'Proxima Nova Rg';
}
.login .center-box {
    max-width: 303px;
    max-height: 420px;
    background-color: #fff;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    overflow: auto;
}
.login h2 {
    background: #BE141B;
    padding: 0 0 15px;
    margin: 0;
    text-align: center;
    color: #fff;
    font-family: 'Proxima Nova Th';
}
.login label {
    font-size: 21px;
    width: 100%;
    clear: both;
    float: left;
}
.login input {
	font-family: 'Proxima Nova Rg';
    border: 2px solid #BE141B;
    padding: 5px;
    width: 100%;
    color: #bb0e0c;
    font-size: 18px;
}
.login input[type="submit"] {
    margin-top: 20px;
    padding: 9px;
    background: #bb0e0c;
    color: #fff;
    text-transform: uppercase;
    font-family: 'Proxima Nova Th';
    font-weight: bold;
	cursor:pointer;
}
.login .error-login {
    color: red;
    font-weight: bold;
    padding: 0 10px;
}
.login .chack {
    display: flex;
    flex-direction: row;
    align-content: space-around;
    align-items: center;
    flex-wrap: nowrap;
}
.login .chack input[type="checkbox"] {
    width: 28px;
	transform: scale(1.5);
	margin: 0 6px 0 0;
}