/* resetiranje margina i paddinga */
*{margin:0;
padding:0;}

/* osnovno uređivanje HTMl elementa */

body{
font-family: 'Roboto', sans-serif;
font-size:14px;
color:#262626;}

h1,h2,h3,h4,h5,h6{font-family: 'Raleway', sans-serif;}

img{max-width:100%;
height:auto;}

a{text-decoration:none;}


#bodywrapper,#header,#pageFooter{margin:0 auto;
max-width:1200px;}

#bodywrapper {
    margin: 0 auto;
}

.clearfix:after{content:"";
display:block;
clear:both;
height:0;
font-size:0;
visibility:hidden;}

h1{font-size:40px;
color:#32438c;
margin-bottom:20px;}

p,li{
    line-height: 26px;
}

.pink{color:#e61990;}

strong,.light_blue{color: #7c96b1}



/*MENU*/

#headerwrapper{background-color:#c3d1e6;
position:fixed;
-webkit-box-shadow: 0 10px 6px -6px #aaaeb5;
-moz-box-shadow: 0 10px 6px -6px #aaaeb5;
box-shadow: 0 10px 6px -6px #aaaeb5;
width:100%;
top:0;
z-index:1;}

#menu ul{list-style-type:none;
text-align: right}

#menu li{display:inline;;
margin-right: 1px;
vertical-align:baseline;
text-align: left;}

.menuLi {line-height: 90px;}

#menu a{color:#262626;
font-size:12px;
padding:30px 5px;
transition: all 0.2s linear;
font-family: 'Merriweather Sans', sans-serif;}

#menu1:hover,#menu2:hover,#menu3:hover,#menu4:hover,#menu5:hover,#menu6:hover,#menu7:hover,#menu8:hover{background-color: white}

#logo{float:left;
  width:30%;
margin-left:0;
background:url(../slike/helpyred.svg) no-repeat center;}

#menu{float:right;
width:66%;}

#menu,#logo{padding:1%;
height:90px;}

#logo{padding-left:0;}

/* section pylopass */

.box,.index_section{background-color:white;}

/* .box, .index_section{padding:60px}*/

.box,.index_section,#pageFooter {
    width: 95%;
    overflow:hidden;
}

.box,#bodywrapper{margin: 180px auto 60px auto;}

.index_section{margin:0 auto;}

ul.blue_vertical{list-style-image: url('../slike/rozatocka.svg');}

.blue_vertical li{margin-left: 10px}

h2, h3,#index_p{margin:30px 0 30px 0}

.prvi_naslov{margin-top:10px;}

.box img, .box p{margin:10px 0;}

.pdf_slike1 img{width:10px;
border: 1px solid #EEEEEE;
}



.box img {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    height: auto;
}

.imgBox {
    width: 50%;
}

.imgBoxRight {
    padding-left: 20px;
}

.box_slike,.index_section,.kontakt_wrapper{display:flex;
justify-content:space-around;}

.left, .right {
    width:50%;
}

.sliderSlike {
    outline:none !important;
    max-width: 400px;
}
#index_link{margin-top:30px; display: inline-block;}

.opisslike{text-align: center}

.photoleft,.left{padding-right:2%;}


.box dt{color:#32438c;}

.box h3, .box h2,.left h2{color:#32438c ;}

.blue_vertical{border-left:2px solid #EEEEEE;
padding-left: 15px;}

.blue_vertical p {
    width: 100%;
}

#index_link,.link2{background-color:#EEEEEE;
color:black;
transition: all 0.2s linear;}

#index_link{padding:20px;}

#index_link img{width:30px;
vertical-align: middle;
padding-right:10px;}

#index_link:hover,#index_link:focus {background-color: #32438c;color:white; }

/*anchor link*/

.anchor{display: block;
  height: 115px; /*same height as header*/
  margin-top: -115px; /*same height as header*/
  visibility: hidden;}

/*table*/

table {width:100%;
margin-top: 30px;
border:none; border-collapse: collapse;}

table th{background-color:#c3d1e6;}

.table_rijec,.table_objasenjenje{padding:10px;}

table td{vertical-align:top;}

.table_rijec{white-space: nowrap;}

tbody tr:nth-child(odd) {
   background-color:#EEEEEE;
}


/*pageFooter*/

#pageFooterWrapper{background-color: #32438c;
	color:white;
	padding:10px;}

#pageFooter h5{padding:5px 0;
	margin:5px 0;
	display:inline-block;
	border-bottom:1px solid #3e4d8e;}

#pageFooter h5, #footerTop{border-bottom:1px solid #4a5999}

#footerTop h6{text-align: center;
 padding:10px;}

#footerTop{height:auto;
	width:100%;
	padding-bottom:25px;
	background-color: #32438c;
	color:white;}

#top4 a{color:white;}

#top1,#top2,#top3{float:left;
	width:19%;}

#top4{float:right;
	width:25%;}

#top1,#top2,#top3{margin-right:6%;}

#footerBottom{padding-top:25px;}	

#copyright,#footerBottom{text-align:center}

#footerlogo img{width:200px;padding:10px 0;}

#footerlogo img:last-child{display:none}

#footerlogo:hover img:first-child{display:none}

#footerlogo:hover img:last-child{display:inline-block;}

/*Pylopass video*/

.box video{width:100%; margin-top: 30px;}

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}

.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*YOUTUBE*/

.container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    margin-top: 30px;
}
.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*PUBLIKACIJE*/

#pdf1,#pdf2{width:50%;}

/*map*/

iframe{width:100%;}

/*KONTAKT OBRAZAC */

form{width:100%;}

label,input{padding:5px;display: block}

textarea, input{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

textarea{display:block;
width:100%;}

input{width:100%;}

input[type=text],input[type=submit],input[type=email],textarea {-webkit-border-radius:5px;
    border-radius: 5px; border: 1px solid #EEEEEE;
}

input:focus, textarea:focus {
    outline: none;
}


.float-left{float:left;
width:60%;}

.float-right{float:right;
width:35%;}


::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color:#c3d1e6;
font-family: 'Montserrat', sans-serif;
  font-weight:lighter;
}
::-moz-placeholder { /* Firefox 19+ */
 color:#c3d1e6;
font-family: 'Montserrat', sans-serif;
 font-weight:lighter;
}
:-ms-input-placeholder { /* IE 10+ */
 color:#c3d1e6;
 font-family: 'Montserrat', sans-serif;
 font-weight:lighter;
}
:-moz-placeholder { /* Firefox 18- */
 color:#c3d1e6;
 font-family: 'Montserrat', sans-serif;
 font-weight:lighter;
}


/* navigacija */

.dropDown {
    position: relative;
    
}

.dropdownList {
    position: absolute;
    width: auto;
    min-width: 100%;
    width:200px;
    color: blue;
    top: 30px;
    background-color: white;
    left: 0px;
    color: white;
    z-index: 1000;
    max-height: 0;
    overflow: hidden;
    transition: 200ms;
    margin-top:5px;
    box-shadow: 0 10px 10px rgba(195, 209, 230,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

.dropDown li{list-style-position: inside;
text-indent: -1em}

.dropdownItem {
    line-height: 1.71 !important;
    display: block !important;
    padding:14px;
}

.dropDown:hover .dropdownList  {
    max-height: 10000px;

}

.dropdownItem:hover {color:white;
    background-color: #EEEEEE;
}

.headerResp {
    display: block;
}

/*rule*/



#rule1{float:left;width:50%;}
#rule2{float:right;width:50%;}

#rule1 a,#rule2 a{color:white;}


/* mobile button*/
#mobileButton{display:none;}       


/*responsive*/


@media screen and (max-width: 1200px) {

#logo,#menu{float:none;display:block;}

#logo,#menu{margin:0 auto;
padding:0;}

#menu{width:100%;
height:auto;
padding-bottom: 5px;}

header{height:auto;
padding:0;}

.menuLi {
    line-height: 40px;
}

#menu ul{text-align: center}

.float-right h3{margin:0;}

}

@media screen and (max-width:1149px) {

#top1,#top2,#top3{float:left;
	width:21%;}

#top4{float:right;
	width:31%;}

#top1,#top2,#top3{margin-right:2%;}

}

@media screen and (min-width:1024px){

	#menu ul{display:block !important;}
}

@media screen and (max-width:973px) {
#top1,#top2,#top3{width:22%;}

#top4{float:right;
	width:31%;}

#top1,#top2,#top3{margin-right:1%;}

#bodywrapper{margin:70px auto 20px auto;
width:auto;}

#bodywrapper{margin-top:140px;}

}


@media screen and (max-width:776px) {

#bodywrapper{margin:40px auto 20px auto;
width:auto;
padding: 0 20px;}

.box{margin:5px auto;}

.index_section,.kontakt_wrapper{display:block;}

.left, .right {
    width:100%;
}

.left{padding-bottom:15px;}

.float-left,.float-right{float:none;
width:100%;}

body{font-size:16px;}

p,li{line-height: 20px}

#menu a:hover{background-color:#c3d1e6;}

#menu ul{display:none}

.navigation{clear:both;}

#menu li,#menu a{display:block;
  float: none;
  overflow: hidden; 
  background-color: #c3d1e6;}

#menu a{padding:20px 0;
 border-bottom:none;
 font-size:14px;
 font-weight:lighter;}

  #menu a:active{padding:20px 0;transition: all 0.01s linear;
  }

#menu li{text-align:center;
  margin:0;padding:0;}

#mobileButton {display:block;
	padding:4.5px 0;}

a{
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

#logo{text-align: left,
  margin:0,padding:0;
  line-height: 90px;}

.dropdownList li{display:hidden;}

#top1,#top2,#top3,#top4{float:none;
 	margin-bottom:3%;
 	width:100%;}

#logo{float:left;
 	width:50%;}

#mobileButton{float:right;
 	width:50px;
 	padding:15px;}

.menuLi,.dropDown{line-height:0;}

.float-right h3{margin-top:30px;}

.left{margin-right:0;padding-right:0;}

}

@media screen and (max-width:768px) {

.box{margin: 120px auto 20px auto;
width:100%;}

body{font-size:18px;}

p,li{line-height: 22px}
p{font-size:14px;}
h2{font-size:16px;}
h1{font-size:24px;}

}

@media screen and (max-width:730px) {

#logo{width:60%;}

}

@media screen and (max-width:618px) {
#index_link img {width:15px;}

#index_link{padding:5px;
font-size: 12px}

#bodywrapper{margin-bottom:30px;
   padding:100px 20px 0 20px
}

}

@media screen and (max-width:560px) {

#pageFooter{padding:5px;}

#bodywrapper{margin:20px auto 30px auto;}

#bodywrapper{padding:5px 20px;}

.box{margin: 100px auto 20px auto;
width:100%;}

table th,table td{display:block;}

tbody tr:nth-child(odd) {
   background-color:white;
}

.table_rijec{background-color:#EEEEEE}

.hide{display:hidden;}

table th{background-color:#c3d1e6}
}

.menuOpen {
    display: block !important;
    background-color: white;
    margin-top: 90px;
}

}

@media screen and (min-width:301px) {

  body{min-width:300px;}
  
  #bodywrapper{padding:5px 20px;
      margin: 50px auto;
  }
}