@charset "utf-8";
body {
	font-size: 16px;
	font-family: 'Arial';
	}
	
*{ box-sizing: border-box;
	}
	
a {
   text-decoration: none;
   }


.container {
	background-color: #FFFFFF;
	max-width: 1080px;
	margin: auto;
	border-bottom-width: 0px;
	padding: 0px;
	}
	
	
/*-------------  Logo  --------------*/ 
.primary_header {
	width: 100%;
	background-color: #FFFF;
	padding: 5px 0px;
}


/*-------------  Navigation --------------*/ 
.secondary_header {
	width:100%;
	}
	
.sticky {
  	position: fixed;
 	top: 0;
	width:1080px;
	z-index:10;
	}

.sticky + .primary_header {
  padding-top: 30px;
}

ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: rgba(15,124,175,1);
	width: 100%;
	border-bottom: medium solid rgba(80,63,133,1);
}
  
li {
	float: left;
	margin: 0px;
	padding: 0px;
	font-weight: bold;
	color: #FFFFFF;
	transition: all 0.3s linear;
	box-shadow: 8px 16px 16px 0px rgba(0,0,0,0.2);
}
	 
li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 12px 6px;
  text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
  color: black;
  }

li.dropdown {
  display: inline-block;
 }

.dropdown-content {
  display: none;
  position: absolute;
  background-color: rgba(15,124,175,1);
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
 }

.dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
	background-color: white;
	color: rgba(11,49,77,1.0);
}

.dropdown:hover .dropdown-content {
  display: block;
}

#menu {
}


/*-------------  Lyava kolona --------------*/
.left_article {
	background-color: #FFFFFF;
	width: 79%;
	float: left;
	color: black;
	padding-bottom: 15px;
	box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.2);
	margin-top: 2px;
}
	
.container .left_article h3 {
	padding: 0 5%;
	margin-top: 5%;
	text-transform: uppercase;
}
.container .left_article p {
	padding: 0px 5% 0px 3%;
	text-align: justify;
	line-height: 24px;
	color: black;
	}

/*-------------Video-------------------------*/
	.red {
  margin: 0px 35px;
}

/* Add padding BETWEEN each column */
.red,
.red > .colona {
  padding: 0px 20px;
}

.colona {
  float: left;
  width: 360px;
  }

/* Clear floats after rows */ 
.red:after {
  content: "";
  display: table;
  clear: both;
}

.content-video {
  background-color:rgba(15,124,175,0.2);
  padding: 10px;
  text-align: center;
  height: 420px;
  }

/*------------- Dyasna kolona --------------*/
.right_article {
	width: 20%;
	float: left;
	box-shadow: 0px 8px 2px 0px rgba(0,0,0,0.2);
	margin: 4px;
	padding: 2px;
	}

.right_article a {
  padding: 4px 8px 6px 16px;
  color:  rgba(15,124,175,1);
  display: block;
 }

.right_article a:hover {
  font-weight: bold;
 }

.right_article p{
	font-size:15px;
	padding:8px 55px;
	cursor: pointer;
	color: black;
	margin:auto;
}

/*-------------  Calendar --------------*/
.date {
	width: 65px;
	margin:auto;
	text-align: center;
	float:left;
	position:absolute;
	}

.date .month {
	background: rgba(0,138,117,1);
	display: block;
	padding: 4px 0;
	color: #fff;
	font-size: 11px;
	}

.date .day {
	margin:0;
	font-size: 22px;
	box-shadow: 0 0 3px rgba(0,0,0,0.5);
	}

.mySlides-pr {
   text-align: justify;
   }
 
.mySlides-pr::after {
  content: "";
  clear: both;
  }

/*-------------  Aktualni Novini  --------------*/
.container-novini {
	width: 100%;
	margin-top: 5px;
	display: inline-block;
}

/* Slideshow container */
.slideshow-container {
  box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.2);
  position: relative;
  }
  
.slideshow-container h3 {
	text-align: center;
	}

.mySlides {
  padding: 2px 30px 5px 30px;
  text-align: justify;
   }
 
 /* Clear floats after slides */
.mySlides::after {
  content: "";
  clear: both;
  display: table; /* Make the container element behave like a table */
}
 
 /* Float images inside the container to the left. Add a right margin, and style the image as a semi-circle */
.mySlides img {
  float: left;
  margin: 0% 1%;
  border-radius: 5%;
  width: 94px;
  height: 72px;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 30%;
  padding: 16px;
  color:  #0D6D9B;
  font-weight: bold;
  font-size: 34px;
 }

/* Position the "next button" to the right */
.next {
  position: absolute;
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
  color:darkgreen;
}

.dot-container {
  text-align: center;
  padding: 10px;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: rgba(0,138,117,0.2);
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
  box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.2);
}
.active, .dot:hover {
  background-color:  rgba(15,124,175,1);
}

.btn {
  background-color: rgba(0,138,117,0.1);
  color: black;
  padding: 1px 2px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
  display:block;
}

.poveche {
  border-color: rgba(15,124,175,1);
}

.poveche:hover {
  background-color:rgba(15,124,175,1);
  color: white;
}

.proceduri {
 background-color: rgba(0,138,117,0.1);
 padding:2px;
 border-radius: 2px;
 width:685px;
 }
 
 .proceduri:hover {
  background-color:rgba(15,124,175,1);
  color: white;
  font-weight:bold;
  }
/*-------------  Lab --------------*/
.row {
	width: 100%;
	display: inline-block;
	text-align: center;
	}

.columns {
  background-color: transparent;
  perspective: 1000px;
  transform-style: preserve-3d;
  width: 206px;
  height: 250px;
  float: left;
  padding: 10px 0px;
  margin: 15px 5px 5px 5px;
  }

.columns:hover .back {
    transform: rotateY(0deg);
}
.columns:hover .front {
    transform: rotateY(180deg);
}

.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
    width: 100%;
  	height: 100%;
 	text-align: center;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.front, .back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transition: 0.6s;
  transform-style: preserve-3d;    
}

.front {
  background-color: white;
  border-bottom:8px solid rgba(15,124,175,1);
  z-index: 2;
  transform: rotateY(0deg);
  }

.back {
  background-color: #2980b9;
  color: white;
  transform: rotateY(-180deg);
  border-bottom:8px solid black;
}

.thumbnail {
	width: 100px;
	border-radius: 20px;
	height: 100px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.container .columns h4 {
	color: #0D6D9B;
	text-shadow: 1px 1px 1px black;
}

/*---------------------- centrove ------------------------*/
.centrove{
	width:100%;
	margin:0;
	background-color:rgba(15,124,175,1);
	display:inline-block;
	}
	
.centrove img {
	width:540px;
	float:left;
	padding:20px;
	height:196px;}
	

/*---------------------- Struktura ------------------------*/
.tab {
  overflow: hidden;
  width:98%;
  margin-left:2%;
  }

/* Style the buttons inside the tab */
.tab button {
  background-color: rgba(0,138,117,0.2);
  outline: none;
  cursor: pointer;
  padding:1.5% 1%;
  transition: 0.3s;
  font-size: 16px;
}

.tab button:hover {
  background-color: rgba(15,124,175,0.4);
  
}

.tab button.active {
  background-color:rgba(15,124,175,1);
  color:white;
  font-weight: bold;
  }

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
 }

/* -------------------------Table (+ akordeon)------------------------- */
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
 }

th, td {
  padding: 12px;
  text-align:center;
  font-size:15.5px;
  }

tr:nth-child(even) {
  background-color: rgba(15,124,175,0.06)
}
td a{
	color:black}
td a:hover{
	font-weight:bold;
	color: rgba(0,138,117,1);}

.accordion {
  background-color: rgba(0,138,117,0.7);
  cursor: pointer;
  padding: 13px;
  width: 100%;
  text-align: left;
  transition: 0.6s;
  font-weight:bold;
  color: white;
  font-size:16px;
 }

.active, .accordion:hover {
  background-color: rgba(15,124,175,1);
 }

.panel {
  padding: 0 16px;
  display: none;
  overflow:auto;
  }

.accordion:after {
  content: '+'; 
  font-size: 14px;
  color: white;
  float: right;
  margin-left: 5px;
}

.accordion.active:after {
  content: "-";}
  
  #myInput {
 width: 100%; /* Full-width */
 font-size: 16px; /* Increase font-size */
 padding: 12px 20px 12px 40px; /* Add some padding */
 border: 1px solid #DDDDDD; /* Add a grey border */
  margin-bottom: 12px; /* Add some space below the input */
}

#myTable {
  border-collapse: collapse; /* Collapse borders */
  width: 100%; /* Full-width */
  border: 1px solid #DDDDDD; /* Add a grey border */
  }

 /* -------------------------Nagradi (coloni)------------------------- */
.column-66 {
  float: left;
  width: 66.66666%;
  padding:20px;
}

.column-33 {
  float: left;
  width: 33.33333%;
  padding:20px;
}

/* --------------------------Direktori(swiper slider)-----------------------------*/
.swiper-container {
      width: 100%;
      padding: 20px 0px;
         }
.swiper-slide {
      background-position: center;
      background-size: cover;
      width: 250px;
      height: 350px;
    }
.swiper-slide .imgBx {
	height: 280px;
	width: 100%;
	overflow: hidden;
	}
.swiper-slide .imgBx img{
	width: 100%;
	}
	
.swiper-slide .details {
	text-align: center;
	padding: 5px;
	}
	
.swiper-slide .details h4 {
	margin: 0;
	}
/*---------------chipset (telefon + meil)-----------------*/
.chip {
  display: block;
  padding: 0px 5px;
  height: 20px;
  font-size: 12px;
  line-height: 20px;
  border-radius: 25px;
  background-color: rgba(15,124,175,0.2);
  margin:5px
 }

.chip img {
  float: left;
  height: 18px;
  width: 18px;
  border-radius: 50%;
}
/*------------------map-----------------------*/
.mapouter{
	position:relative;
	}

.gmap_canvas {
	overflow:hidden;
	background:none!important;
	height:350px;
	width:500px;
	}
/*-----------------------------*/
.column-23 {
	float: left;
	width:23%;
	padding: 10px 0px;
	margin: 15px 5px 5px 5px;
	height:250px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	}
.container .column-23 h4 {
	color: #0D6D9B;
	text-shadow: 1px 1px 1px black;
}
/*--------neobhodimi dokumenti za proceduri (nomerirane)---------------------*/
.row li{
	background-color:white;
	color:black;
	text-align:justify;
	font-weight:100;
	padding:0px 15px 10px 0px;
	box-shadow: none;
	float:none;}
.red p1{
	color:black;
	display:block;
	margin:5px}
.red p1:hover{
	color:rgba(0,138,117,1);
	font-weight:bold;
	cursor: pointer;
	}
.row p2{
	display:block;
	margin:5px;
	text-align:left;
	}

.column-50 {
	float: left;
	width:50%;
	padding:5px 10px;
	
	}
	
/*-------------------------------------------modal image (seminar)--------------------------------*/
/* Style the Image Used to Trigger the Modal */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 50; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (Image) */
.modal-content {
  margin: auto;
  display: block;
  width: 90%;
  max-width: 900px;
}

.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(15,124,175, 0.2), 0 6px 20px 0 rgba(15,124,175, 0.19);
  cursor: pointer; 
  opacity: 0.7;
}

/*-------------------------------------------Galeria 1--------------------------------*/
.trans
{
	transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	-webkit-transition: all 1s ease;
}
.top
{
	display: flex;
	width: 700px;
	height: 600px;
	margin-top: 10px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10vh;
}
.top ul
{	background-color: white;
	list-style: none;
	width: 100%;
	height: 100%;
	z-index: 1;
	box-sizing: border-box;
}
.top ul li
{
	position: relative;
	float: left;
	width: 20%;
	height: 20%;
	overflow: hidden;
	padding:0px;
}

.top ul li::before
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color:rgba(15,124,175,1);
	content: '';
	color: white;
	opacity: 0.4;
	text-align: center;
	box-sizing: border-box;
	pointer-events: none;
	transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
}
.top ul li:hover::before
{
	opacity: 0;
	background-color: rgba(0,0,0,0.90);
}
.top ul li img
{
	width: 100%;
	height: auto;
	overflow: hidden;
}
.lightbox
{
	position: fixed;
	width: 100%;
	height: 100%;
	text-align: center;
	top: 0;
	left: 0;
	background-color: rgba(15,124,175,0.75);
	z-index: 999;
	opacity: 0;
	pointer-events: none;
}
.lightbox img
{
	max-width: 90%;
	max-height: 80%;
	position: relative;
	top: -100%;
	/* Transition */
	transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	-webkit-transition: all 1s ease;
}
.lightbox:target
{
	outline: none;
	top: 0;
	opacity: 1;
	pointer-events: auto;
	transition: all 1.2s ease;
	-moz-transition: all 1.2s ease;
	-ms-transition: all 1.2s ease;
	-o-transition: all 1.2s ease;
	-webkit-transition: all 1.2s ease;
}
.lightbox:target img
{
	top: 0;
	top: 50%;
	transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
}
.footer {
  left: 0;
  bottom: 0;
  background-color: rgba(15,124,175,1);
  color: white;
  height: 12%;
  padding:0.1%;
  text-align:center;
}