/*
	Company: Institut za tranfuziju krvi Srbije, http://www.nbti.org/
	Date (create): 22-09-2007
	Date (update): 22-09-2007
	
	******************************
	*****      Index       *****
	******************************
	ID: 
		I Osnovni elementi
		II Podesavanje stranice
		# Header
		# Footer
	
*/

/* @import url(../../includes/css/fonts.css); */
@import 'https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700&subset=cyrillic-ext';


/* 
	**************************************
	*****  Osnovni elementi *****
	**************************************
*/

a {
	color: #ca0404;
	text-decoration: none;
}
a:hover {
	color: #7c7c7c;
	text-decoration: underline;
}

a.hidden {
	display: none;
}
a.none {
	text-decoration: none;
	border: none;
	background: none;
}

img {
 	border-style: none;
}
form {
	margin: 0px;
	padding: 0px;
}

br.clear, div.clear, p.clear   { clear: both; }


#skip {
	text-indent: -20000px;
	margin: 0px;
	padding: 0px;
	list-style: none;
	position: absolute;
}


.picture_border {	/* okvir za slike */
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1;
}
.red {
	color: #ca0404;
}
input, select, option, textarea {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 14px;
	text-align: left;
}

h1, h2, h3, h4, h5 {	
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 700;
	margin: 0; padding: 0;
}

/* 
	**************************************
	***** Podesavanje stranice 		*****
	**************************************
	Class:
		position
		page_width
		contentBox
*/

body {
	background: #ffffff; color: #666666;
	margin: 4px 0 0 0; padding: 0;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 14px;
}
.position {
	/*width: 100%; height: 100%;*/
	clear: both;
	display: block;
}
.page_width {	
	clear: both;
	display: block;
	width: 960px;	/*width: 873px; +87	 */
}


/* 
	******************************
	***** 		Header 		 *****
	******************************
	Class:

*/

#header ul, #header li ul { list-style: none;	margin: 0px; padding: 0px;}
#header { clear: both; }
#header li { float: left; overflow: hidden; }
#header li ul li {	display: block;}

#header {	
	margin: 0; padding: 0;
	background: url(../../img/bg_header.gif) 50% 0px no-repeat;
	height: 174px; width: 100%;	/* height: 172px;  */
}
#header .page_width {	
	background: #ffffff url(../../img/bg_header_page.gif) 0 0 repeat-x;
	height: 100%;
}

/* Logo */
#header .logo {	
	width: 217px; 
	margin: 29px 38px 0 0;
	background: url(../../img/srpski/cirilica/logo_nbti.gif) 0 0 no-repeat; 
	text-indent: -9999px;
}
#header .logo a {	height: 82px; width: 217px; display: block;}

#header .content {	
	width: 705px; height: 146px;
	margin-top: 3px;
	background: url(../../img/bg_heand.jpg) 100% 0 no-repeat; 
	float: right;
}

#header .submenu {
	float: right;
	margin-top: 4px;
	font-weight: bold;
}
#header .submenu a { color: #333333; }
#header .submenu a:hover { color: #ca0404; text-decoration: none; }
/* Search */
#header .search {	
	overflow: hidden;
	background: url(../../img/bg_search.gif) 0 0 no-repeat;
	margin: 0 0 0 10px; padding: 6px 0 0 15px;
	height: 28px; width: 231px; /* 	height: 34px; width: 246px;*/
	float: right; 
}
#header .search input {
	color: #ffffff;
	font: 10px/15px arial, tahoma, helvetica, sans-serif; 
	font-weight: bold;
}	
#header .search .text {
	float: left;
	margin: 0; padding: 0 2px 0 2px;
	width: 135px; height: 16px;
	border: solid 1px #ffffff;
	background: #626161;
}
#header .search .button {
	font: 11px/15px arial, tahoma, helvetica, sans-serif; 
	float: left;
	border: none;
	margin: 0 0 0 9px; padding: 0 0 0 14px; 
	background: url(../../img/button_search.gif) 0 0 no-repeat;
	text-align: left;
	cursor: pointer;
}

/* snippet */
#header .snippet {	
	clear: right;
	height: 70px; width: 100%;
	list-style: none;
	padding: 0;	margin-top: 4px;
	float: right; text-align: right;
}
#header .snippet li { float: right; }



/* lang */
#header .lang {
	height: 18px; float: left;
	margin-top: 5px;
}
#header .lang div { color: #333333; font-weight: bold; float: left  }

#header .lang a {
	width: 18px; height: 18px;
	margin-left: 7px;
	display: block; float: left;
	text-indent: -999px;
}
#header .lang .eng { background: url(../../img/flag_eng.png) 0 0 no-repeat; opacity: 0.8;}
#header .lang .eng:hover { opacity: 1; }
#header .lang .eng.active { opacity: 0.3;}

#header .lang .cir { background: url(../../img/flag_srp.png) 0 0 no-repeat; opacity: 0.8;}
#header .lang .cir:hover { opacity: 1; }
#header .lang .cir.active { opacity: 0.3; }
#header .lang .lat { background: url(../../img/flag_srp.png) 0 0 no-repeat; opacity: 0.8;}
#header .lang .lat:hover { opacity: 1; }
#header .lang .lat.active { opacity: 0.3; }


#header .menu {	
	clear: right;
	height: 38px; width: 100%;
	list-style: none;
	padding: 0;	margin: 0;
	float: right;
	background: url(../../img/bg_menu.png) 0 0 repeat-x; 
}
#header .menu ul {
	margin: 0px; padding: 0px;
}
#header .menu li {
	margin: 0; padding: 0;
	height: 38px;
	overflow: hidden;
	float: left;
}

#header .menu a, #header .menu div { 
	height: 24px; padding: 7px 5px;
	display: block;  text-decoration: none;
	font-family: 'Roboto Condensed', sans-serif; font-weight: 700;
	font-size: 16px; 
	/*text-transform: uppercase;*/
}
#header .menu a { color: #ca0404; background: url(../../img/menu.png) 50% 0 no-repeat; }
#header .menu a:hover { background-position: 50% -38px; }
#header .menu div { color: #fff; background: url(../../img/menu.png) 50% -76px no-repeat;	}


#header .menu a.on { color: #fff; background: #ca0404 }


/* meni 
#header .menu {	
	clear: right;
	height: 38px; width: 630px;
	list-style: none;
	padding: 0;	margin: 0;
	float: right;
	background: url(../../img/bg_menu.png) 0px 0px no-repeat; 
}
#header .menu ul {
	margin: 0px; padding: 0px;
}
#header .menu li {
	margin: 0px; padding: 0px;
	height: 38px;
	text-indent: -9999px;
	overflow: hidden;
	float: left;
}

#header .menu a, #header .menu div { height: 38px;	display: block;  text-decoration: none; position: relative;}
#header .menu a:hover {	background: transparent;}

#header .menu .menu1 {	width: 63px; background: url(../../img/menu.gif) 0px 0px no-repeat;}
#header .menu .menu1 a {	width: 63px; }
#header .menu .menu1 a:hover {	background: url(../../img/menu.gif) 0px -76px no-repeat; }
#header .menu .menu1 div {	background: url(../../img/menu.gif) 0px -38px no-repeat; }

#header .menu .menu2 {	width: 146px; background: url(../../img/menu.gif) -63px 0px no-repeat;  }
#header .menu .menu2 a {	width: 146px;}
#header .menu .menu2 a:hover {	background: url(../../img/menu.gif) -63px -76px no-repeat; }
#header .menu .menu2 div {	background: url(../../img/menu.gif) -63px -38px no-repeat; }

#header .menu .menu3 {	width: 94px; background: url(../../img/menu.gif) -209px 0px no-repeat; }
#header .menu .menu3 a {	width: 94px; }
#header .menu .menu3 a:hover {	background: url(../../img/menu.gif) -209px -76px no-repeat; }
#header .menu .menu3 div {	background: url(../../img/menu.gif) -209px -38px no-repeat; }

#header .menu .menu4 {	width: 69px; background: url(../../img/menu.gif) -303px 0px no-repeat; }
#header .menu .menu4 a {	width: 69px; }
#header .menu .menu4 a:hover {	background: url(../../img/menu.gif) -303px -76px no-repeat; }
#header .menu .menu4 div {	background: url(../../img/menu.gif) -303px -38px no-repeat; }

#header .menu .menu5 {	width: 113px; background: url(../../img/menu.gif) -372px 0px no-repeat; }
#header .menu .menu5 a {	width: 113px; }
#header .menu .menu5 a:hover {	background: url(../../img/menu.gif) -372px -76px no-repeat; }
#header .menu .menu5 div {	background: url(../../img/menu.gif) -372px -38px no-repeat; }

#header .menu .menu6 {	width: 145px; background: url(../../img/menu.gif) -485px 0px no-repeat; }
#header .menu .menu6 a {	width: 145px; }
#header .menu .menu6 a:hover {	background: url(../../img/menu.gif) -485px -76px no-repeat; }
#header .menu .menu6 div {	background: url(../../img/menu.gif) -485px -38px no-repeat; }
*/

/* 
	************************************
	***** 		Contents 			 *****
	************************************
*/


/* snippet box */
#contents .box {
	margin: 20px 0 0 0; 
	width: 234px; height: 215px;
	background: url(../../img/bg_box.gif) 0 100% no-repeat;
	overflow: hidden;
}

#contents .box .img {
	clear: both;
	height: 80px;
}

#contents .where.box .title {
	background: url(../../img/box_title_where.png) 0 0 no-repeat;
	padding-left: 85px;
	height: 65px;
}	
#contents .call.box .title {
	background: url(../../img/box_title_call.png) 0 0 no-repeat;
	padding-left: 85px;
	height: 75px;
}	
#contents .faq.box .title {
	background: url(../../img/box_title_faq.png) 0 0 no-repeat;
	padding-left: 85px;
	height: 75px;
}	

#contents .box .title h1 { color: #333; line-height: 22px; }

#contents .box .text {
	clear: both; display: block;
	padding: 0 20px 10px 20px;
	height: 85px; overflow: hidden;
	color: #666666; 
	line-height: 14px;
}
#contents .box a.more {
	clear: both; display: block;
	background: url(../../img/icon_more.gif) 0 0 no-repeat;
	padding-left: 20px;
	margin-left: 16px;
	color: #333333; font-weight: bold;
	line-height: 20px;
}
#contents .box a.more:hover {
	color: #ca0404;
}






/* 
	************************************
	***** 		Banners 				 *****
	************************************
*/

#banners ul, #banners li ul { list-style: none; margin: 0px; padding: 0px;}
#banners { clear: both; }
#banners li { float: left; }
#banners li ul li { display: block;}

#banners {	
	margin: 0; padding: 0;
}
#banners .page_width {	
	padding: 0 0 11px 0;
}
#banners li {
	float: right;
	height: 50px;
	margin: 5px 0 0 10px;
	overflow: hidden;
}
#banners .top {
	margin-top: 10px;	
	background: url(../../img/icon_top.jpg) 0 0 no-repeat;
	width: 22px; height: 28px;
	text-indent: -9999px;
	float: left;
}

/* 
	************************************
	***** 		Footer 				 *****
	************************************
	Class:
		1. copyright
		2. developed
	
*/

#footer ul, #footer li ul { list-style: none; margin: 0px; padding: 0px;}
#footer { clear: both; }
#footer li { float: left; }
#footer li ul li { display: block;}

#footer {	
	margin: 0; padding: 0;
	background: url(../../img/bg_footer_big.gif) 50% 0 repeat-y;
}
#footer .page_width {	
	padding: 0px;
	background: #ca0404 url(../../img/bg_footer_top.gif) 0 0 no-repeat;
	color: #ffffff;
	line-height: 14px;
}

#footer .copyright {
	margin: 10px 10px 0px 10px;
	padding: 0 0 0 35px;
	background: #ca0404 url(../../img/logo_nbti_small.gif) 0 0 no-repeat;
	width: 600px; height: 50px; /* width: 600px; */
	float: left; overflow: hidden;
	text-align: left; 
}
#footer .developed {
	margin-top: 10px;
	width: 200px;
	float: right;
	text-align: right; 
}
#footer a { color: #ffffff; font-weight: bold; }
#footer a:hover { color: #ff8888; text-decoration: none; }
#footer .text { color: #FF8888; font-weight: bold; padding: 0; margin: 0; }

.img-cover {
    object-fit: cover;
    object-position: 50% 50%;
    height: 100%; width: 100%;
    max-width: none!important;
    margin: 0!important;
}
.img-contain {
    object-fit: contain;
    object-position: 50% 50%;
    height: 100%; width: 100%;
    max-width: none!important;
    margin: 0!important;
}
.img-fluid {
    max-width: 100%;
    height: auto;
}

/*------scroll bar---------------------*/

::-webkit-scrollbar {
  width: 5px;
  height: 7px;
}
::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
::-webkit-scrollbar-thumb {
  background: #525965;
  border: 0px none #ffffff;
  border-radius: 0px;
}
::-webkit-scrollbar-thumb:hover {
  background: #525965;
}
::-webkit-scrollbar-thumb:active {
  background: #525965;
}
::-webkit-scrollbar-track {
  background: transparent;
  border: 0px none #ffffff;
  border-radius: 50px;
}
::-webkit-scrollbar-track:hover {
  background: transparent;
}
::-webkit-scrollbar-track:active {
  background: transparent;
}
::-webkit-scrollbar-corner {
  background: transparent;
}