@import url(http://fonts.googleapis.com/css?family=Arial+Narrow&subset=latin,latin-ext);


/* globals */
body,h1,h2,h3,h4,h5,h6,p,form,fieldset,img,ul{margin:0;padding:0;border:0;}
body{color:#333;font-size:0.75em;font-family: 'Arial', sans-serif; background:url('../img/bg.jpg');}
textarea:focus, input:focus{outline: 0;}
*:focus {outline: 0;}
::-webkit-input-placeholder {color:rgba(0,0,0,.5);text-transform:uppercase;font-family: 'Arial Narrow';}
:-moz-placeholder{color:rgba(0,0,0,.5);text-transform:uppercase;font-family: 'Arial Narrow';}
::-moz-placeholder{color:rgba(0,0,0,.5);text-transform:uppercase;font-family: 'Arial Narrow';}
:-ms-input-placeholder{color:rgba(0,0,0,.5);text-transform:uppercase;font-family: 'Arial Narrow';}
.mandatory {background:red;color:white;text-transform:uppercase;font-family: 'Arial Narrow';}

a{color:black;text-decoration:underline;}
a:hover{color:#666;text-decoration:underline;}

.shadow {box-shadow: 1px 1px 1px black;-webkit-box-shadow:  1px 1px 1px 0px #000;}
.glow {-webkit-box-shadow:  0px 0px 5px 2px #999;box-shadow:  0px 0px 5px 1px #999;}
.miniglow {-webkit-box-shadow:  0px 0px 1px 1px #ccc;box-shadow:  0px 0px 1px 1px #ccc;}
.round5 {-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
.round3 {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.round10 {-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;}
.circle {-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}
.fade {-webkit-transition: all 300ms ease;-moz-transition: all 300ms ease;-ms-transition: all 300ms ease;-o-transition: all 300ms ease;transition: all 300ms ease;}
.slowfade {-webkit-transition: all 700ms ease;-moz-transition: all 700ms ease;-ms-transition: all 700ms ease;-o-transition: all 700ms ease;transition: all 700ms ease;}
.clear{clear:both;height:0;font-size:0;line-height:0;}
.hide {display:none;}
.left{float:left;} 
.right{float:right;} 
.center{text-align:center;} 
.wrap {width:1140px; margin:0 auto;padding:0 15px;} @media all and (max-width:768px) {.wrap {width:100%; margin:0 auto;padding:0;} }
.lightbox {position: relative;background: #FFF;padding: 20px;width: auto;max-width: 600px;margin: 20px auto;border:2px solid #ccc;}
.lightbox-fade.mfp-bg{opacity:0;-webkit-transition:all .15s ease-out;-moz-transition:all .15s ease-out;transition:all .15s ease-out}.lightbox-fade.mfp-bg.mfp-ready{opacity:.8}.lightbox-fade.mfp-bg.mfp-removing{opacity:0}.lightbox-fade.mfp-wrap .mfp-content{opacity:0;-webkit-transition:all .15s ease-out;-moz-transition:all .15s ease-out;transition:all .15s ease-out}.lightbox-fade.mfp-wrap.mfp-ready .mfp-content{opacity:1}.lightbox-fade.mfp-wrap.mfp-removing .mfp-content{opacity:0}
.mobileOn {display:block;}
.mobileOff{display:none;}
.button, .button  a {background-color:#606062; color:white; border:0; font:normal 1.4em 'Arial Narrow'; padding:5px 20px;cursor:pointer;

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
transition: all 0.2s;
	-webkit-transition: all 0.2s;
	border-bottom: 2px solid #000;
}
.button:hover, .button :hover a {background-color:#F58634;	transform: translate(0px,2px);
  -webkit-transform: translate(0px,2px);
	border-bottom: 1px solid #000;}

.mainColor1 {color:#3C0;} /* green */
.orangeC {color:#F58634;}
.mainBackground1 {background:rgba(102,102,102,1);} /* dark grey */
.footBackground1 {background:#000;} /* dark grey */
.footBackground2 {background:url('../img/footer_bg.jpg');} /* darker violet */


#container{width:100%;margin:0 auto;padding:0;}

/* top bar*/
#topBar {height:30px; border-bottom:1px solid rgba(204,204,204,.7); line-height:30px; font-size:1em; color:rgba(204,204,204,1);display:none;}
#topBar a {text-decoration:none;}
/* top menu */
#topMenu li {float:left;list-style:none; padding-top:65px;}
#topMenu li  i {padding-left:15px; font-size:2em; color:grey; line-height:30px;}
#topMenu li  i:hover {color:#F58634;}
@media all and (max-width:768px){#topBar, #topMenu {display:none;}}

/* middle bar with logo and  menu */
#middleBar {height:105px; padding-top:10px;border-bottom:6px solid #F58634; background:url('../img/header.jpg') no-repeat;}
#middleBar #border {border-bottom:2px solid black;height:109px;}

#middleBar .logo img {height:90px; width:auto;display:none;}

#middleBar .leftMenu {display:none;}
#middleBar .rightMenu {display:none;}

@media all and (max-width:768px){
#middleBar {height:60px; margin:0; padding-top:5px; background:white;}
#middleBar .logo {margin:0 20% 0 20%; position:absolute; left:0; right:0; text-align:center;}
#middleBar .logo img {height:55px; margin:0 auto; display:block;}
#middleBar .leftMenu {color:black; font-size:3em; line-height:94px;cursor:pointer;display:block; border-right:1px solid rgba(204,204,204,.5);}
#middleBar .rightMenu {color:black; font-size:3em; line-height:94px;cursor:pointer;display:block; border-left:1px solid rgba(204,204,204,.5);}
#middleBar .leftMenu i, #middleBar .rightMenu i  {padding:14px;display:block; height:25px;}
}

.obvezno {background:red;color:white;}
#KontaktPopup {max-width:700px; height:400px;}
#KontaktPopup .left {width:350px;}
#KontaktPopup h3 {font-size:2em; color:#F58634; padding:0 0 30px 0; font-weight:normal;}
#KontaktPopup h3 span {color:#666;}
#KontaktPopup ul {list-style:none;}
#KontaktPopup input[type=text], #KontaktPopup input[type=email] {width:240px; padding:5px 0 5px 10px; font:normal 1.3em tahoma; margin:0 0 20px 5px;}
#KontaktPopup textarea {margin:10px 0 0 4px; font:normal 1.2em tahoma;padding:5px 0 5px 10px;}
#KontaktPopup .right {padding-right:40px; width:180px;}
#KontaktPopup .right div {padding-bottom:20px;}
#KontaktPopup .right div:hover > p img {-webkit-filter: grayscale(0);-moz-filter: grayscale(0);filter: grayscale(0);-webkit-transition: all 300ms ease;-moz-transition: all 300ms ease;-ms-transition: all 300ms ease;-o-transition: all 300ms ease;transition: all 300ms ease;}
#KontaktPopup .right h4 {color:#169FE6; display:none;}
#KontaktPopup .right h5 {color:black; padding-left:30px;}
#KontaktPopup .right p {font-size:1.1em; padding-left:30px;}
#KontaktPopup .right p img {position:absolute; margin: -10px 0 0 -60px; -webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%; -webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);filter: grayscale(100%);}
@media all and (max-width:768px){
#KontaktPopup .left {display:none;}
#KontaktPopup .right {padding-right:0; width:95%;}
}

/* main menu */
#mainMenu {clear:right; margin-top:56px;border-top:1px solid rgba(245,134,52,.5); margin-left:290px; } @media all and (max-width:768px) {#mainMenu {display:none;}}
#mainMenu nav ul {text-align: left;display: inline;list-style: none;float:left;}
#mainMenu nav ul li {display:inline-block;position: relative;cursor: pointer;}
#mainMenu nav ul li a {color:black; text-decoration:none; padding:15px; font-family:'Arial Narrow'; font-size:1.2em; display:block; text-transform:uppercase; border-left:1px solid rgba(245,134,52,1);}
#mainMenu nav ul li .iL {border-right:1px solid rgba(245,134,52,.5);}
#mainMenu nav ul li:hover {background:rgba(245,134,52,1);}
#mainMenu nav ul li a:hover {color:white;}
#mainMenu nav ul li .fa {display:none;}
/* subs */
#mainMenu nav ul li ul {padding:0;position:absolute;top:49px;left:0;display:none;opacity:0;visibility:hidden;z-index:999;}
#mainMenu nav ul li ul div {background:rgba(245,134,52,1);width:200px;}
#mainMenu nav ul li ul li {display:block; text-align:left;white-space:nowrap;width:inherit;}
#mainMenu nav ul li ul li a {color:white;padding:8px;}
#mainMenu nav ul li ul li a:hover {background:rgba(0,0,0,.3);color:white;}
#mainMenu nav ul li:hover ul {display: block;opacity: 1;visibility: visible;}

/* mobile main menu - left */
@media all and (max-width:768px) {
#mobileMainMenu nav li a { color:white; font-size:1.3em; text-decoration:none; text-transform:capitalize;padding:10px 0 10px 10%; border-bottom:1px solid #666; background:black; display:block;}
#mobileMainMenu nav li a i {width:40px;}
.mobileMenuIcons {color:black; font-size:2em; background:black; text-align:center; height:60px; line-height:60px;}
.mobileMenuIcons a i {color:white; font-size:1em;}
.mobileMenuIcons i {color:white; font-size:1.4em; width:40px; height:40px; line-height:40px; text-align:center; background:black; margin:10px;}
#mobileMainMenu h2 {font-size:2em; text-align:center; color:black; background:black;}
#mobileMainMenu h2 i {width:40px; height:40px; line-height:40px; text-align:center; background:black; color:white; margin:10px 0;}
#mobileMainMenu nav ul li ul  {display:none;}
#mobileMainMenu nav a i {padding-right:10px; color:white;}
#mobileMainMenu  .active {margin-left:40px;color:rgba(245,134,52,1); display:block; list-style:none;}


/* mobile contact menu - right */
#mobileContactMenu {color:white; font-size:1em; padding:20px;} 
#mobileContactMenu p {padding-bottom:20px;}
#mobileContactMenu ul {list-style:none;}
#mobileContactMenu li { padding-bottom:5px;}
#mobileContactMenu li a {color:white; text-decoration:none; font-size:1.25em; background:black;padding:10px; margin-bottom:5px; border:1px solid rgba(102,102,102,1); display:block;}
#mobileContactMenu li a i {width:30px;}
#mobileContactMenu .sb-close i {color:white; font-size:1.4em; width:50px; height:50px; line-height:50px; text-align:center;}
}

/* slider */
#contentSlider {height:250px; margin:0 auto;border-bottom:1px solid rgba(245,134,52,1);}
#contentSlider img {}
@media all and (max-width:768px) {
	#contentSlider {height:100px;}
}

#homeText {font-size:1.3em;text-align:justify; padding-left:300px; padding-top:30px;}
@media all and (max-width:768px)
{#homeText{padding:0 10px;}
}
/* first page menu */
.body nav ul {list-style:none; padding-top:20px; width:850px;}
.body nav ul li {width:280px; float:left; margin-bottom: 15px;}
.body nav ul li a {text-decoration:none;}
.body nav ul li a h1 {font:normal 1.5em 'Arial Narrow'; color:rgb(96,96,98); text-align:left; padding-bottom:5px; margin-left:35px;  }
.body nav ul li p {font:normal .8em 'Arial Narrow'; text-align:justify; padding-left:5px;}
.body nav ul li img {float:left; width:280px; border:1px solid #ccc;}

@media all and (max-width:768px) {
	.body nav ul  {float:none; text-align:center; margin:0 auto; width:auto; padding:0;}
	.body nav ul li {width:auto; margin-bottom:10px; }
	.body nav ul .i1 {margin:0;}
}

/* left column */
#leftColumn {min-height:300px; width:230px; margin-top:30px; padding:10px; }
@media all and (max-width:768px) {
	#leftColumn {width:100%; margin:0 auto;min-height:0;border:0; float:right; clear:left;}
}


/* subpages in left column */
#showSubpages { padding-bottom:20px;display:none; }
#showSubpages  h1 {font:normal 1.6em 'Arial Narrow'; background:rgba(245,134,52,1); height:35px; line-height:35px; text-transform:uppercase; color:#F6F6F6; cursor:pointer;}
#showSubpages  h1 i {padding:0 10px; cursor:pointer;}
#showSubpages ul {list-style:none;}
#showSubpages li a {display:block; padding:5px 10px; text-decoration:none; font:normal 1.3em 'Arial Narrow'}
#showSubpages li a:hover {background:rgba(97,97,99,.7); color:white;}
#showSubpages h1 i.mobileOn {display:none;}
@media all and (max-width:768px) {
	#showSubpages {z-index:999; position:absolute; width:100%;}
	#showSubpages  h1 {height:40px; line-height:40px; padding-left:20px;}
	#showSubpages  h1 span{font-size:.7em;}
	#showSubpages  h1:before{content:'navigacija'; padding-right:15px; }
	#showSubpages  h1 i {float:right; line-height:40px;font-size:1.5em;}
	#showSubpages ul {background:rgba(245,134,52,1);}
	#showSubpages li a {display:block; padding:10px; text-decoration:none; font:normal 2.2em 'Arial Narrow'; text-align:center; border-bottom:1px dotted black;}
	#showSubpages h1 i.mobileOff {display:none;}
	#showSubpages h1 i.mobileOn {display:block;}
	#showSubpages.sticky {width:100%;}
}

/* news in left column */
#newsList {padding:0; margin:0;}
#newsList div {padding:10px;}
#newsList  h1 {font:normal 1.6em 'Arial Narrow'; background:rgba(245,134,52,1); height:35px; line-height:35px; text-transform:uppercase; color:#F6F6F6;cursor:pointer;}
#newsList  h1 i {padding:0 10px; cursor:pointer;}
#newsList h1 i.mobileOn {display:none;}
#newsList h3 a {text-decoration:none; font:normal 1.2em 'Arial Narrow';}
#newsList h4 {padding:7px 0; font:normal normal 1.8em 'Arial Narrow';}
#newsList h4 i {padding-right:10px; font-style:normal;}
#newsList p {font:normal 1.25em 'Arial Narrow'; text-align:justify;}
@media all and (max-width:768px) {
	#newsList {display:none;}
	#newsList.mobileOn {display:block;} /* show news on first page only */
	#newsList h1 i {float:right; line-height:40px;font-size:1.5em;}
	#newsList h1 {height:40px; line-height:40px; padding-left:20px;}
	#newsList h1 i.mobileOff {display:none;}
	#newsList h1 i.mobileOn {display:block;}
}

/* files download */
#filesDownload {padding:10px;}
#filesDownload a {font-size:1.5em; text-decoration:none; text-align:center; display:block; width:100%; height:40px; line-height:40px; background:#efefef;}
#filesDownload a:hover {background:grey; color:white;}

.body {overflow:hidden; padding:0 20px;background:#F6F6F6;}
@media all and (max-width:768px) {
	.body {overflow:hidden; padding:0;}
}

/* content  */

#pageBanner {}

#content {font-size:1.3em; line-height:22px; text-align:justify; width:850px; padding:20px 0 0 0;}
@media all and (max-width:768px) {
	#content {width:95%; padding:2%; margin:0 auto;}
}

#content h1 {color:black; padding-bottom:20px; border-bottom:1px dotted #CCCCCC; margin-bottom:20px;font:normal 2em 'Arial Narrow';}
#pageDescription {font-size:1em; line-height:25px;width:850px;}
#pageDescription h2 {font-size:1.9em; margin-bottom:10px;}
#pageDescription h3 {color:black; font-size:1.2em; padding:10px 0 5px 0; font-weight:normal; border-bottom:1px solid orange; margin-bottom:10px;}
#pageDescription p {line-height:25px; font-size:.9em; text-align:justify; padding-bottom:20px;}
#pageDescription ul {padding-bottom:20px;}
#pageDescription li {font-size:.9em; list-style:square; list-style-position:inside;padding-left: 1em;text-indent: -1em;}
@media all and (max-width:768px) {
#pageDescription {font-size:1em; line-height:20px;width:100%;}
#content h1 {text-align:center;}
}

.galleryBottom ul {text-align:center;}
.galleryBottom li {list-style:none; float:left; padding:6px;}
.galleryBottom li img {width:150px; border:1px solid black;}
.galleryBottom h6 {display:none;}
@media all and (max-width:768px) {
.galleryBottom {text-align:center;}
.galleryBottom li img {width:270px;}
}

/* IMAGES STYLES */
.imagesList{list-style:none;}
.imagesList li{margin:0 0 15px 0;text-align:center;}
.imagesList li div{text-align:center;}
.subpagesList li img, .imagesList li img, .imagePreview img, .imagesGallery img, #subpagesGallery img{padding:1px;border:4px solid #e0e0e0;}
.subpagesList li img:hover, .imagesList li img:hover, .imagePreview img:hover, .imagesGallery img:hover, #subpagesGallery img:hover{border:4px solid #d5d5d2;}

#imagesGallery3{margin:20px 0 0;}
#imagesGallery4{margin:10px 0 10px;}
.imagesGallery{width:100%;padding:10px 0;font-size:1em;}
.imagesGallery td{padding:15px 7px 10px;background:inherit;color:#5b5b5b;font-size:0.917em;text-align:center;vertical-align:top;}
.imagesGallery td div{font-weight:normal;font-size:1.1em;line-height:1.4em;}

#imagesList1{float:left;margin:9px 20px 0 0;}
#imagesList2{float:right;margin:0 20px 0 0;}
@media all and (max-width:768px) {#imagesList2 {display:none;}}

.imagePreview div{margin:5px 0 10px;text-align:center;}
#imagesListPreview{float:left;margin:9px 20px 0 0;}
* html #imagesListPreview{margin-top:-5px;}
.imagesList#imagesListPreview li{margin-bottom:3px;}
.imagesList#imagesListPreview li img{border:2px solid #e0e0e0;}
.imagesList#imagesListPreview li img:hover{border:2px solid #d5d5d2;}

/* FILES LIST STYLES */
#filesList{width:100%;float:left;margin:15px 0 5px;list-style:none;vertical-align:middle;border-left:2px solid #e0e0e0;}
#filesList li{width:100%;float:left;clear:left;margin:5px 0 5px 10px;padding-left:10px;}
#filesList li a{color:#c22463;background:inherit;}
#filesList li a:hover{color:#666;background:inherit;}
#filesList img{margin:0 8px 0 0;vertical-align:middle;}
#filesList em{padding-left:2px;}

/* SUBPAGES  */
#subList2 li {list-style:none; float:left; width:200px; margin:0 40px;}
#subList2 li img {border:3px solid #999;width:150px; height:auto;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%; margin:0 auto; display:block;}
#subList2 li h2 {text-align:center; }
#subList2 li h2 a {font:normal 1.3em 'Arial Narrow'; text-decoration:none;}
@media all and (max-width:768px) {
#subList2 {text-align:center; margin:0 auto;}
#subList2 li {padding-bottom:20px;}
}

#subpagesGallery ul {list-style:none; text-align:center;}
#subpagesGallery li {float:left; padding:20px;} 
#subpagesGallery li a {text-decoration:none;}
#subpagesGallery h2 {font:normal 2em Arial Narrow; padding-bottom:8px;}
#subpagesGallery img {-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}

@media all and (max-width:768px) {#subpagesGallery li {float:none; text-align:center; left:0; right:0;} }

/* CONTACT FORM */
#contactPanel{width:100%;margin:10px auto 0;}
#contactPanel fieldset{padding:25px 20px;}
#contactPanel dl, #contactPanel dt, #contactPanel dd{margin:0;padding:0;}
#contactPanel dt{padding:0 0 7px;}
#contactPanel dd{margin-bottom:18px;}
#contactPanel .input, #contactPanel textarea{width:99%;padding:3px;font-size:1em;}
#contactPanel #captcha{width:50px;}
#contactPanel .captcha em{font-style:normal;padding:0 3px;}



/* OPTIONS LINK */
#options{clear:both;float:right;width:100%;margin:10px 10px;color:#666;font-size:1em;text-align:right;}
*:first-child+html #options{width:94%;} /* IE 7 hack */
* html #options{width:94%;} /* IE 6 hack */
#options a{padding:0 10px 0;color:#2e6a97;background:inherit;}
#options a:hover{color:#c22463;background:inherit;}
#options .back, #options .print{float:right;}
#options .print a{border-left:1px solid #e0e0e0;}

.message{padding:50px 0;text-align:center;}
.message h3{background:inherit;color:#c22463;font-weight:normal;font-size:2.4em;line-height:1.7em;}
.message h3 a{color:#2e6a97;background:inherit;}
.message h3 a:hover{color:#666;background:inherit;}
.attribute{padding:20px;border:1px solid #bebebe;margin:0 50px 20px;background:#efefef;}
.attribute h3{font-size:1.2em;font-weight:bold;}

/* FOOTER  */


/* footer bottom blocks */
#footerBot {height:30px; color:rgba(255,255,255,1); line-height:30px;}
#footerBot a {color:rgba(255,255,255,1);}
@media all and (max-width:768px) {#footerBot {padding:0 20px;}}