/*
	vw unit - Equal to 1% of the width of the initial containing block.
	vh unit - Equal to 1% of the height of the initial containing block.
	vmin unit - Equal to the smaller of vw or vh.
	vmax unit - Equal to the larger of vw or vh.
	em unit - relative to the font size of its direct or nearest parent.
	rem unit - relative to the html (root) font-size, consistent padding.
*/

/* Global values */
	body {background-color: lightgray; color: black;
			margin: 0% /* top-bottom */ 0% /* left-right */;
			padding: 0vw 0vw;
			font-family: serif;
			text-align: justify;}
	html {font-size:10pt;}
	main, .main {padding: 1.5rem, 1%; background-color:white; box-shadow: 0vw 0.5vw 0.5vw gray;}
	
	h1, h2, h3, h4, h5, h6 {font-size:1.3rem;}
			h1 {color: lightcoral; padding:0vw; text-transform: uppercase; margin-top:1rem;}
			h2 {background-color: #E6E6E6;text-transform: uppercase;}
			h3 {background-color: #F0F0F0;text-transform: uppercase;}
	p {margin-top:0%; color: black;}
		a {text-decoration: inherit; color: blue; font-style: inherit; font-weight: inherit;}
/*		p.list, p.inline {display: inline;}
		p.list{margin-bottom: 0px;}
*/

	p.announcemeFnt {font-size:1.3rem; font-weight: bold;}

	
		p.center, p.sub {text-align: center;}
		p.rachader{text-align: center; vertical-align: middle; color:#D51A68; font-size:1.2rem;background-color:white;}
		[class*="sub"] {font-size: 70%; font-style: italic;}
	ul, dl {text-align: left;}
		ul {list-style-type: square;}
	.descriptor {margin-top:0px;}
	
	.list {margin:0px; margin-bottom:0.5rem;}
	
	table, td, tr {border:0px solid #ddd; width:auto; white-space:normal;vertical-align: top; margin-left: auto; margin-right: auto;border-collapse: collapse;}
		td.r, td.ri, td.rb, td.bb1r, td.bb1rb, td.bb2r, td.bb2rb {text-align:right;padding-right:0.5rem;}
		td.l, td.li, td.lb, td.bb1l, td.bb1lb, td.bb2l, td.bb2lb {text-align:left; padding-left:0.5rem; white-space: normal;}
		td.c, td.ci, td.cb, td.bb1c, td.bb1cb, td.bb2c, td.bb2cb {text-align:center;padding-left:0.5rem;padding-right:0.5rem;}

		
		[class*="-tl"] {text-align:left; padding-left:0.5rem; white-space: normal;}
		[class*="-tc"] {text-align:center;padding-left:0.5rem;padding-right:0.5rem;}
		[class*="-fb"] {font-weight: bold;}
		[class*="-fi"] {font-style: italic;}

		
		td.rb, td.cb, td.lb, td.bb1rb, td.bb1cb, td.bb1lb , td.bb2rb, td.bb2cb, td.bb2lb {font-weight: bold;}
			td.li {font-weight: bold;}
			td.ri {font-style: italic; text-transform: lowercase;}
			td.ci {font-style: italic;}

		tr.kat>td {padding-top: 1vw}
		tr:hover {background-color:#f5f5f5;}
		
		/*table border*/
		[class*="-tbb1"]{border-bottom:1px solid #000; padding-left:0.5rem; padding-right:0.5rem;}
		[class*="-tbb2"] {border-bottom:2px solid #000; padding-left:0.5rem; padding-right:0.5rem;}
		th {border-bottom:2px solid #000; padding-left:1em; padding-right:1rem;}
	iframe[seamless] ul.nb {border:none; margin:0px; padding:0px;}

	div.ct {text-align:left; margin-left:auto; margin-right:auto; width:40%; padding:0;}
	
	table.header td{
		border-collapse: collapse;
		border: 2px solid darkgray; border-bottom: 0px;
		text-align: center;
		text-transform: capitalize;
		font-weight: bold;
		border-radius: 0.2vw;
		white-space: normal}
	[class*="header"] {width: 100%; background-color:lightgray; display:table;}
	[class*="header"]:hover {background-color:#f5f5f5;}
	[class*="auto"] {width: auto-fil;}
	.tooltip {position: relative; display: inline-block; border-bottom: 1px dotted black;}
	.tooltip .tooltiptext {visibility: hidden; width: auto; background-color: black; color: #FAFAFA; text-align: center; border-radius: 1px; padding: 5px 0; /* Position the tooltip */position: absolute; z-index: 1;}
	.tooltip:hover .tooltiptext {visibility: visible;}
		.tooltip .tooltiptext {text-align: left;}
		
	/* Background colors */
		/*light gray*/		.bgg {background-color:#ECECEC}

/*
<div class="tooltip"> xxx
<span class="tooltiptext"> xxx </span></div> 
*/

/* Stupci*/
.column {float:left;}
	/*column1 {float: left;width:70%;}*/
	.column3 {display:inline;}
	/*column4 {float:left; width:33.33%}*/
	
	[class*="-fl"] {float: left;}
	[class*="-fr"] {float: right;}
	[class*="col"] {width: 100%;}
	[class*="navig"] {width: fit;}
	[class*="verc"] {top: 50%; left: 50%; transform: translate(-50%, -50%);}
	.grid {
		display: grid; /* define the number of grid columns */
		background-color: white;
		text-align: center;
		text-transform: capitalize;
		grid-template-columns: 1fr;
	}
	

	#index #menu .index,
	#page1 #menu .page1,
	#page2 #menu .page2,
	#page3 #menu .page3,
	#page4 #menu .page4 {font-weight: bold; background-color: white;}
			
	#index #menu .index > a{color:black;}
	#page1 #menu .page1 > a{color:black;}
	#page2 #menu .page2 > a{color:black;}
	#page3 #menu .page3 > a{color:black;}
	#page4 #menu .page4 > a{color:black;}

	.grid {position:fixed; width:fit; top: 0; right: 0%; left:0%;}

	.grid-item {background-color: black; padding: 0.3rem 0rem 0.3rem 0rem;}
	.grid-item a{color: white;}
	.grid-item:hover a{color: black;}
	.grid-item:hover {background-color:#f5f5f5;border-color: coral;}
	[class*="-title"] {text-align: center;text-transform: uppercase;padding: 1rem 0rem;}




/* Clear floats after the columns */	
.row:after {content:none; display:table; clear:both;}

/*slike*/
.profile_photo {max-width: 30%; width: auto;height: auto; border-radius: 8rem;}
.LOGO {max-width:75px; width: auto; height: auto; border-radius: 0rem;}
	[class*="img"] {height:auto; width: auto; vertical-align:middle;}

/* For mobile phones: */
@media (max-width: 800px){
	/*hide elements*/
	[class*="-ULTRA"] {display: none;} 
	[class*="-SMALL"] {display: none;}
	[class*="img"] {height:auto; max-width: 89vw; vertical-align:middle;}
	}

@media (min-width: 800px) and (max-width: 1500px){
	[class*="col5033"] {width: 50%;}
	[class*="-SMALL"] {display: none;}
	[class*="img"] {height:30vw; width:auto; vertical-align:middle;}
	}


/* Screen size 600px - 999px */
@media (min-width: 1500px){
	.main {padding: 2rem 1%;}
	[class*="col10"] {width: 10%;}
	[class*="col30"] {width: 30%;}
	[class*="col33"], [class*="col5033"] {width:33.33333%;}
	[class*="col5050"] {width:50%;}
	[class*="col70"] {width: 70%;}
	[class*="col90"] {width: 90%;}
	[class*="img"] {height:20vw; width: auto; vertical-align:middle;}
	/*.column, .column1, .column3, .column4 {width: 100%;}*/
	.header, td {white-space:normal;}
		td.r {white-space:normal}
	p.rachader{text-align: right; vertical-align: middle;}
	.grid {grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); position:fixed; width:100%; top: 0; right: 0%; left:0%;}
	.mali {display:none;}
}

/*central container */
@media (max-width: 900px){div.ct {width:95%;}}
@media (min-width: 900px) and (max-width: 1200px){div.ct {width:80%;}}
@media (min-width: 1200px) and (max-width: 1400px){div.ct {width:60%;}}
@media (min-width: 1400px) and (max-width: 1800px){div.ct {width:50%;}}

/*font size*/
@media (max-width: 900px){html {font-size:11pt;}}
@media (min-width: 900px) and (max-width: 1200px){html {font-size: 12.5pt;}}
@media (min-width: 1200px){html {font-size: 14pt;}}

	.fb-like {padding-bottom:0.5%;}
	.horizontal {padding-top:1%; border-bottom:0.1px solid orange;}
	.horizontal > p {padding-bottom:0%; margin-bottom:1%;}

/*text boxes*/
@media (max-width:900px){.block {display:block;}	}


@media only screen and (min-width:900px){
	.two {width:48%; display:inline-block; padding:0.9%; vertical-align:top;}
	.vertical {border-right:0.1px solid #ddd;}
	}


@media print {html, body {display: none;  /* hide whole page */}}

.pokaz{display:none}
@media(max-width:680px) {.pokaz{display:inline}}

/*Addon - 2021-04-10*/
/* TABLE */
td.a1, td.b3 {vertical-align:top; padding-top:0px; padding-bottom:0px; margin-top:0px; margin-bottom:0px;text-align: right;}
td.a2, td.b2{background-repeat: no-repeat; padding:0.6em; font-weight: bold;}
td.a3, td.b1 {vertical-align:middle; font-style: italic; text-align: right;}

            /* 2022-01-30 */
                /* Pozadina */
                .circle {height:1em; width:1em; animation: circle 3s;animation-timing-function: ease; font-weight: bold; color: #00018B;}
	
                /* animation */
                    @keyframes circle {from {color:#EDCB00;} to {color: #00AEEF;} }