body{
	font-family: 'Open Sans', sans-serif;
	color: #09193a;
	background-color: #0d4d84;
}

p{
	margin-bottom: 0;
}

.row{
	max-width: 1240px;
	margin: 0 auto;
}

header{
	background-image: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(7,37,62,0.3) 95%,rgba(13,77,132,1) 100%), url(../images/lighthouse2.jpg);
	background-size: cover;
	background-position: center;
/*	height: 95vh; */
	min-height: calc(100vh - 70px);
}

.podstran{
	background: rgb(61,107,163); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(61,107,163,1) 0%, rgba(147,199,227,1) 46%, rgba(61,107,163,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(61,107,163,1) 0%,rgba(147,199,227,1) 46%,rgba(61,107,163,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(61,107,163,1) 0%,rgba(147,199,227,1) 46%,rgba(61,107,163,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3d6ba3', endColorstr='#3d6ba3',GradientType=0 ); /* IE6-9 */
} 

.glava {
	float: left;
	margin-top: 40px;
	font-size: 28px;
	color: #fff;
	font-family: 'Dosis', sans-serif;
}

.logo img{
	width: 320px;
	margin-top: 90px;
	margin-left: -358px;
	float: left;
	display: none;
}


/* MAIN NAV */
.main-nav{
	float: right;
	list-style: none;
	margin-top: 55px;
	margin-right: 90px;
}

ul{
	padding-left: 0;
}

.main-nav li{
	display: inline-block;
	margin-left: 40px;
}

.main-nav li:first-child{
	margin-left: 0;
}

.main-nav li a:link,
.main-nav li a:visited{
	padding: 2px 0;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 100%;
	border-bottom: 1px solid transparent;
	transition: border-bottom 0.2s;
}

.main-nav li a:hover,
.main-nav li a:active{
	border-bottom: 1px solid #fff;
}

.dropdown ul{
	background-color: transparent;
	border: none;
	margin-left: -40px;
}

.dropdown li:first-child{
	margin-left: 40px;
}

.dropdown-menu{
	border-radius: 0;
	box-shadow: none;
}

.dropdown-menu li a:hover{
	background-color: transparent;
	font-weight: 700;
}

.caret{
	color: #fff;
	border-top: 4px solid #fff;
	font-size: 100%;
}


/* MOBILE NAV */
.mobile-nav-icon {
	float: right;
	margin-top: 20px;
	cursor: pointer;
	display: none;
	margin-right: 20px;
}

.mobile-nav-icon i{
	font-size: 200%;
	color: #fff;
}

.podrocja {
	margin-top: 70vh;
	margin-left: 3px;
	margin-right: 3px;
	padding: 0px 0px 5px 0px;
	text-align: center;
/*	background-color:  rgba(255, 255, 255, 0.5); */
	width: 16%;
/*	border-radius: 5px; */
}

.pravo {
	font-size: 120%;
	color: #fff;
	text-align: center;
	margin-top: 10px;
	font-weight: 700;
}

.pravo:hover{
	text-decoration: none;
	color: #09193a;
}

.slika{
	width: 100%;
	overflow: hidden;
	border-radius: 5px;
	box-shadow: 0px 5px 5px  #000;
	margin-bottom: 20px;
}

/* .slika img{
	width: 100%;
	height: auto;
	-webkit-transform: scale(1.2);
	        transform: scale(1.2);
	transition: -webkit-transform 0.4s;
	transition: transform 0.4s;
	align-self: center;
}

.slika img:hover{
	-webkit-transform: scale(1);
	        transform: scale(1);
}
*/

.podrocje{
	margin-top: 8%;
	text-align: justify;
	max-width: 1020px;
}

.pravo-heading{
	font-family: 'Dosis', sans-serif;
	font-size: 28px;
	color: #09193a;
	margin-bottom: 30px;
}

.pravoimg{
	border-radius: 5px;
	float: left;
	margin-right: 40px;
	margin-bottom: 30px;
	width: 30%;
	box-shadow: 0px 5px 5px  #000;
}

/* image changing */

  @keyframes cfFadeInOut {
  0% {
  opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}

#cf img.top {
animation-name: cfFadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
position: relative;
}

#cf {
  position:relative;
  margin:0 auto;
  float: left;
  margin-right: 40px;
  margin-bottom: 30px;
  width: 30%;
}

#cf img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
  border-radius: 5px;
  box-shadow: 0px 5px 5px  #000;
  width: 100%;
  height: auto;
}


/* end of image changing */


.podrocje p{
	margin-right: 20px;
}

.podrocje li{
	margin-left: 20px;
	margin-right: 20px;
}

.podrocje li:first-child{
	list-style: none;
	margin-left: 0px;
}

.podrocje li:last-child{
	margin-bottom: 60px;
}

.petra{
	border-radius: 5px;
	float: left;
	margin-right: 20px;
	margin-bottom: 20px;
	width: 30%;
	box-shadow: 0px 5px 5px  #000;
}

.map{
	margin-top: 8%;
}


/* FOOTER */

.footer {
	font-family: 'Open Sans', sans-serif;
	color: #c8c8c8;
	text-align: center;
	margin: 0px auto 0px auto;
	display: block;
/*	position: relative; */
	font-size: 80%;
	height: 30px;
}

.footer a{
	color: #c8c8c8;
}


/* min-width 1200px */
@media only screen and (min-width: 1200px) {

	.glava {
		padding: 0 2%;
		margin-left: 40px;
		}

	.row {
		padding: 0 2%;
		width: 95%;
	}

	.petra{
		margin-left: 0px;
	}
}	


/* width 1200px - 992px */
@media only screen and (max-width: 1200px) {

	.logo img{
		display: block;
	}

	.row{
		width: 95%;
	}

	.glava {
		margin-left: 40px;
	}

	.logo img{
		width: 240px;
		margin-left: -290px;
	}

	.main-nav{
		margin-right: 120px;
	}

	.main-nav li{
		margin-left: 40px;
		font-size: 90%;
	}

	.dropdown li:first-child{
		margin-left: 40px;
	}

	.pravo{
		font-size: 100%;
	}

	.pravo-heading{
		margin-left: 20px;
	}

	.pravoimg{
		border-radius: 5px;
		float: left;
		margin-right: 40px;
		margin-left: 20px;
		margin-bottom: 20px;
	}

	#cf {
		margin-bottom: 20px;
	}

	.podrocje p{
		margin-right: 20px;
		margin-left: 20px;
	}

	.podrocje li{
		margin-left: 40px;
		margin-right: 20px;
	}

	.petra{
		margin-left: 20px;
	}
}

/* width 992px - 768px */
@media only screen and (max-width: 992px) {

	.glava {margin-top: 20px;}

	.logo img{
		margin-top: 32px;
		margin-left: 40px;
	}

	.mobile-nav-icon {
		display: none;
	}

	.main-nav {
		margin: 20px 100px 0px 0px;
		float: left;
	}

	.main-nav li:first-child{
		margin-left: 40px;
	}

	.main-nav li{
		display: inline-block;
		padding-bottom: 10px;
		font-size: 100%;
	}

	.dropdown ul li{
		text-align: left;
	}

	.dropdown ul{
		margin-left: 0px;
		margin-top: -20px;
	}

	.dropdown-menu ul{
		margin-left: -180px;
		margin-right: 0px;
	}

	.dropdown li{
		padding-bottom: 0px;
		margin-left: 0px;
		margin-right: 0px;
	}

	.dropdown li:first-child{
		margin-left: 0px;
		margin-right: 0px;
		margin-top: 20px;
	}

	.podrocje li:first-child{
		margin-left: 20px;
	}

	.podrocja:nth-child(-n+3){
		margin-top: 40vh;
		width: 20%;
		margin-right: 4%;
		margin-left: 4%;
		margin-bottom: 10px;
	}

	.podrocja:first-child{
		margin-left: 12%;
	}

	.podrocja:nth-child(3){
		margin-right: 12%;
	}

	.podrocja:nth-child(n+4){
		margin-top: 10px;
		width: 20%;
		margin-right: 4%;
		margin-left: 4%;
	}

	.podrocja:nth-child(4){
		margin-left: 12%;
	}

	.podrocja:nth-child(6){
		margin-right: 12%;
	}

	.slika{
		margin-bottom: 10px;
	}
}

/* maxwidth 768px */
@media only screen and (max-width: 768px){

	.main-nav{
		display: none;
	}

	.main-nav li{
		display: block;
	}

	.dropdown li:first-child{
		margin-top: 0px;
	}

	.mobile-nav-icon{
		display: block;
		margin-top: -45px;
		float: right;
		margin-right: 30px;
	}

	.glava{
		font-size: 200%;
		width: 100%;
	}

	.logo img{
		margin-top: 10px;
	}

	.podrocja:first-child{
		margin-top: 45vh;
		margin-bottom: 10px;
		width: 31%;
		margin-left: 12%;
		margin-right: 6%;
		display: inline-block;
	}

	.podrocja:nth-child(2){
		margin-top: 45vh;
		margin-bottom: 10px;
		width: 31%;
		margin-left: 6%;
		margin-right: 12%;
		display: inline-block;
	}

	.podrocja:nth-child(3){
		margin-top: 20px;
		margin-bottom: 10px;
		width: 31%;
		margin-left: 12%;
		margin-right: 6%;
		display: inline-block;
	}	

	.podrocja:nth-child(4){
		margin-top: 20px;
		margin-bottom: 10px;
		width: 31%;
		margin-left: 6%;
		margin-right: 12%;
		display: inline-block;
	}	

	.podrocja:nth-child(5){
		margin-top: 20px;
		margin-bottom: 10px;
		width: 31%;
		margin-left: 12%;
		margin-right: 6%;
		display: inline-block;
	}	

	.podrocja:nth-child(6){
		margin-top: 20px;
		margin-bottom: 10px;
		width: 31%;
		margin-left: 6%;
		margin-right: 12%;
		display: inline-block;
	}	

	.dropdown ul li{
		text-align: left;
	}

	.dropdown ul{
		margin-left: 140px;
	}

	.main-nav{
		margin-top: 20px;
		margin-left: 20px;
	}

	.pravoimg{
		width: 40%;
	}

	#cf {
		width: 40%;
	}

	.petra{
		width: 40%;
		margin-top: 20px;
	}

}

/* maxwidth 481px */
@media only screen and (max-width: 481px){

	.glava{
		font-size: 150%;
		margin-left: 10px;
		width: 100%;
	}

	.logo img{
		display: block;
		margin-left: 10px;
		margin-top: 0px;
	}

	.mobile-nav-icon {
		margin-top: -45px;
		float: right;
		margin-right: 10px;
	}

	.main-nav {
		display: none;
		margin: 40px 0px 0px -230px;
		float: left;
	}

	.main-nav ul{
		margin-top: 20px;
		margin-left: 5px;
	}

	.main-nav li{
		margin-left: 0px;
		display: block;
	}

	.main-nav li:first-child{
		margin-left: 0px;
		margin-top: 0px;
	}

	.dropdown ul li{
		text-align: left;
	}

	.dropdown ul{
		margin-left: 135px;
		margin-top: -20px;
	}

	.dropdown li{
		padding-bottom: 0px;
	}

	.podrocja:first-child{
		margin-top: 45vh;
		margin-bottom: 10px;
		width: 50%;
		margin-left: 25%;
		margin-right: 25%;
	}

	.podrocja:nth-child(n+2){
		margin-bottom: 20px;
		margin-top: 0px;
		width: 50%;
		margin-left: 25%;
		margin-right: 25%;
	}

	.pravoimg{
		width: 90%;
	}

	#cf {
		width: 90%;
	}

	.petra{
		width: 90%;
	}

}




/*	li:nth-child(-n+5) prvih 5 
	li:nth-child(n+6) drugih 5
	li:nth-child(5) samo 5. */