@import 'https://fonts.googleapis.com/css?family=Open+Sans:300&subset=latin,greek-ext,cyrillic-ext,greek,vietnamese,cyrillic,latin-ext';

* {
	box-sizing:border-box;
}

body {
	width: 100%;
	height: 100%;
	font: 100% 'Helvetica Neue', Helvetica, Arial;
	margin: auto;
	
}

.container {
	width: 100%;
	

}
.header {
	
	width: 100%;
	height: 25em;
	background-color: #F5F5DC;
	
}

.central {
			
			width: 100%;
			margin: 0;
			padding: 0;
			background-color: #E6E6FA;
		}

.top {
	
	width: 100%;
	height: 15%;
	background-color: #708090;
	
}


.fa-facebook-square {
	color: #043a71;
}

 .fa-twitter-square {
	color: #1da1f3;
}

 .fa-instagram {
	color: #6a453b;
}
.top i {
	padding-top: 2%;
	opacity: 0.7;
	margin:2%;
	
}

.top i:hover {
	opacity: 1;
}

.rezervacija {
	width: 30%;
	float: left;
	margin-left: 5%;
	margin-top: 0;
	text-align: left;
	color: white;
	font-family: Calibri;
}

.pratite {
	width: 20%;
	float: left;
	margin-left: 10%;
	
}

.english {
	
	width: 20%;
	height: 100%;
	float: left;
	margin-left: 10%;
	text-decoration: none;
	color: white;
	font-size:  12px;
	text-align: center;
	padding-top:5px;
	
	
}

.english img {
	width: 10%;
	height: auto;
	display: block;
	margin: auto;
	padding-top: 5px;
}
.logo {
	padding-top: 2%;
	width: 50%;
	margin:auto;
			
	}
.logo img {
	width: 45%;
	margin-top: 3%;
}

.dugme {
	display:none;
	position: relative;
	background-color: #708090;
	padding: 10px;
	text-decoration: none;
	color: white;
}

.info {
	width: 100%;
	padding:auto;
	height:27em;
	background-image: url(../images/suveniri1.jpg);
	background-position: center-left;
	background-size: 90%;
	background-repeat: repeat-x;
	border-left: 10px solid grey;
	border-top: 1px groove;
	border-bottom: 2px solid black;
	}
	

.kontakt {
	width: 45%;
	padding: 2%;
	color: #ffffff;
	font-family: Verdana;
	margin: 1% 2% 2% 3%;
	float: left;
	font-size: 13px;
}

.kontakt a {
	text-decoration: none;
	color: #ffffff;
}

.kontakt a:hover {
	color: #99a6b2;
	
}

#googleMap {
	width: 39%;
	height: 400px;
	float: left;
	margin: 1% 2%;
	
	
}
.o-nama {
	width: 45%;
	text-align: justify;
	font-family: Verdana;
	line-height: 1.3;
	margin-left: 4%;
	padding: 2% 2% 0% 2%;
	
}
.o-nama img {
	opacity: 0.7;
	border-radius: 10px;
	border: 2px solid gray;
}
.o-nama img:hover {
	opacity: 0.9;
	border: 3px solid black:
}

.t_cvet {
	width: 45%;
	height: auto;
	background-color: #99a6b2;
	text-align: justify;
	color: white;
	border-radius: 50px 0 50px 0;
	padding: 2% 3%;
	
}

.t_cvet img {
	width: 45%;
	margin: 2%;
	filter: grayscale(100%);
}

.t_cvet img:hover {
	width: 45%;
	margin: 2%;
	filter: grayscale(0%);
}

.t_cvet:hover {
	background-color: #7c8d9c;
	box-shadow: 10px 10px 5px #c5ccd3;
	
}


footer {
		
	width: 100%;
	height: 25%;
	padding:2%;
	background-color: #708090;
	clear: both;
		
}

footer .text2 a:link {
	color: white;
	text-decoration: none;
	font-weight: bold;
		
}
	
footer .text2 a:hover {
	text-decoration: none;
	color: white;
	text-shadow: 2px 2px 4px #000000;
		
}
.bottom-list {
	width: 100%;
	margin:auto;
	padding: 2% 30%;
	list-style-type: none;
	display: inline-block;
	
}
.bottom-list li{
	display: inline;
	margin: 4%;
	
	
}

.bottom-list a{
	color: white;
	text-decoration: none;
	
	
}
.bottom-list a:hover{
	 color:  #d6d6c2;
	 letter-spacing: 1px;
	 text-shadow: 3px 2px black;
	 	
}

.text2 {
	width: 50%;
	margin: auto;
	color: white;
	text-align: center;
	font-family: Open Sans;
	font-size: 14px;
}
.nav {
    
	width: 60%;
	margin: 0 auto;
	
}

.back-to-top { 
    position: fixed; 
    bottom: 10px; 
    right: 1px; 
}

.nav ul { 
	margin-top: 40px;
}

.nav ul li {
	list-style-type: none;
	display: inline;
	text-align: center;
	
}

.nav li a{
	
	display: inline-block;
    width: 15%;
    margin:  0;
	text-decoration: none;
	color: darkgreen;
 }
 
 
  
.o_nama:hover ~ hr {
  margin-left: 19%;
}

.smeštaj:hover ~ hr {
  margin-left: 34.6%;
}

.sadržaji:hover ~ hr {
  margin-left: 50%;
}

.galerija:hover ~ hr {
  margin-left: 66%;
}

.cene:hover ~ hr {
  margin-left: 81%;
}

hr {
  height: .25rem;
  width: 8%;
  margin: 0 0 0 1.6rem;
  background: #edf211;
  border: none;
  transition: .3s ease-in-out;
}

.mySlides {display:none}

/***** Slideshow container *****/

.slideshow-container {
  max-width: 100%;
  position: relative;
  margin: auto;
 
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 20px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/6 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  height: 13px;
  width: 13px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 2s;
  animation-name: fade;
  animation-duration: 2s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

	
/*************************   POCETNA **********************************/

#pocetna .ivanjica {
	width: 100%;
	border-top: 1px solid gray;
}
#pocetna .ivanjica p {
	text-indent: 3%;
	text-align: justify;
	padding: 0% 4%;
}

#pocetna .ivanjica h4 {
	margin-top: 3%;
	text-indent: 3%;
	
}


#pocetna {
	background-color: #e2e6e9;
}
#pocetna h2 {
	width: 100%;
	padding:0% 5% 2% 5%;
	border-bottom: 2px solid gray;
	font-size:2.5rem;
	letter-spacing: 1rem;
	
}	

#pocetna .kontakt {
	font-size: 1rem;
}



/*********************     O nama     *******************/

#oNama  .aboutUs {
		width:75%;
		background-color: #F5F5DC;
		margin: 1% 15% 0% 15%;
		padding: 0% 2%;
		border-top: 1px solid grey;
		border-left: 1px solid grey;
		border-right: 1px solid grey;
		font-family: Sans-Serif;
		box-shadow: 10px 10px 5px grey;
	}
	
#oNama 	.aboutUs img {
		 margin: 1%;
		 max-width: 40%;
         height: auto;
		 padding: 0 2%;
	}
	
#oNama 	.aboutUs p {
		width: 50%;
		float: right;
		text-indent: 4%;
		text-align: justify;
		
	}
	
#oNama 	.aboutUs h2 {
	
	width: 100%;
	padding:1% 2%;
	border-bottom: 2px solid gray;
	font-family: Sans-Serif;
	font-size:2.5rem;
	letter-spacing: 0.7rem;
	}
	
#oNama .kontakt h2  {
	width: 100%;
	padding:1% 2%;
	border-bottom: 2px solid gray;
	font-family: Sans-Serif;
	font-size:2.5rem;
	letter-spacing: 1rem;
}

#oNama .kontakt {
	width: 43%;
	font-size:1rem;
	padding: 1% 0% 0% 11%;
	
	
}

#oNama #googleMap {
	width: 40%;
	
	
}

#oNama .početna:hover ~ hr {
  margin-left: 4%;
}

#oNama .smeštaj:hover ~ hr {
  margin-left: 35%;
}

#oNama .sadržaji:hover ~ hr {
  margin-left: 50.5%;
}

#oNama .galerija:hover ~ hr {
  margin-left: 66%;
}

#oNama .cene:hover ~ hr {
  margin-left: 82.58%;
  width: 4.5%;
}

#oNama hr {
  height: .25rem;
  width: 6.5%;
  margin: 0 0 0 19.6%;
  background: #edf211;
  border: none;
  transition: .3s ease-in-out;
}



/**********************      Smestaj    ****************************/



#smestaj {
	background-color: #E6E6FA;
}

#smestaj .central {
	padding:3%;
	position: relative;
	
}
#smestaj  h2 {
	width: 100%;
	padding:0% 5% 2% 5%;
	border-bottom: 2px solid gray;
	font-family: Sans-Serif;
	font-size:2.5rem;
	letter-spacing: 0.7rem;
	
}


#smestaj .smestaj2 {
	padding: 0% 5%;
}


#smestaj .b1 {
	max-width: 70%;
	margin: auto;
	
}

#smestaj .b1 img {
	position: relative;
	left: 3%;
}

#smestaj .b1 h3 {
	height: 3rem;
	background-color: #708090;
	border: 1px solid #000000;
	border-radius: 12px 0px 15px 0px;
	padding: 2% 4%;
	margin:0;
	font-family: Sans-Serif;
	color: #ffffff;
}

#smestaj .b1 h3:hover {
	height: 3rem;
	background-color: #9aa6b1;
	padding: 2% 4%;
	margin:0;
	font-family: Sans-Serif;
	color: #000000;
}

#smestaj .b1-list {
	list-style-type: none;
	margin-left: 2%;
}

#smestaj .b1-list li {
	margin: 1%;
}

#smestaj .b1 .b1-list img {
	margin-right: 4%;
}
#smestaj .b1 .povrsina {
	width: 16px;
	height: 16px;
	background: url(../images/ikonice/ikone.png) -6px -21px;
}

#smestaj .b1 .dupli-kreveti {
	width: 16px;
	height: 16px;
	background: url(../images/ikonice/ikone.png) -51px -56px;
}

#smestaj .b1 .single {
	width: 16px;
	height: 16px;
	background: url(../images/ikonice/ikone.png) -122px -42px;
}

#smestaj .b1 .kupatilo {
	width: 16px;
	height: 16px;
	background: url(../images/ikonice/ikone.png) -125px -25px;
}

#smestaj .b1 .terasa {
	width: 16px;
	height: 16px;
	background: url(../images/ikonice/ikone.png) -28px -56px;
}

#smestaj .b1 .tv {
	width: 16px;
	height: 16px;
	background: url(../images/ikonice/ikone.png) -204px -24px;  
}

#smestaj .b2 {
	max-width: 70%;
	margin: auto;
	
}

#smestaj .b2 img {
	position: relative;
	left: 3%;
}

#smestaj .b2 h3 {
	height: 3rem;
	background-color: #708090;
	border: 1px solid #000000;
	border-radius: 12px 0px 15px 0px;
	padding: 2% 4%;
	margin:0;
	font-family: Sans-Serif;
	color: #ffffff;
}

#smestaj .b2 h3:hover {
	height: 3rem;
	background-color: #9aa6b1;
	padding: 2% 4%;
	margin:0;
	font-family: Sans-Serif;
	color: #000000;
}

#smestaj .b2-list {
	list-style-type: none;
	margin-left: 2%;
}

#smestaj .b2-list li {
	margin: 1%;
}

#smestaj .b2 .b2-list img {
	
	margin-right: 4%;
}
#smestaj .b2 .povrsina {
	width: 16px;
	height: 16px;
	background: url(../images/ikonice/ikone.png) -6px -21px;
}

#smestaj .b2 .dupli-kreveti {
	width: 16px;
	height: 16px;
	background: url(../images/ikonice/ikone.png) -51px -56px;
}

#smestaj .b2 .single {
	width: 16px;
	height: 16px;
	background: url(../images/ikonice/ikone.png) -122px -42px;
}

#smestaj .b2 .kupatilo {
	width: 16px;
	height: 16px;
	background: url(../images/ikonice/ikone.png) -125px -25px;
}

#smestaj .b2 .terasa {
	width: 16px;
	height: 16px;
	background: url(../images/ikonice/ikone.png) -28px -56px;
}

#smestaj .b2 .tv {
	width: 16px;
	height: 16px;
	background: url(../images/ikonice/ikone.png) -204px -24px;  
}

#smestaj .b3 {
	max-width: 70%;
	margin:auto;
}

#smestaj .b3 img {
	margin: 1%;
}

#smestaj .b3 h3 {
	height: 3rem;
	background-color: #708090;
	border: 1px solid #000000;
	border-radius: 12px 0px 15px 0px;
	padding: 2% 4%;
	margin:0;
	font-family: Sans-Serif;
	color: #ffffff;
}

#smestaj .b3 h3:hover {
	height: 3rem;
	background-color: #9aa6b1;
	padding: 2% 4%;
	margin:0;
	font-family: Sans-Serif;
	color: #000000;
}

#smestaj .b3-list {
	margin-left: 4%;
	list-style-type: none;
}

#smestaj .b3 .b3-list li {
	margin: 1%;
}
#smestaj .b3 .b3-list img {
	margin: 0;
	
}

#smestaj .b3 .povrsina {
	width: 16px;
	height: 16px;
	background: url(../images/ikonice/ikone.png) -6px -21px;
}

#smestaj .b3 .dupli-kreveti {
	width: 16px;
	height: 16px;
	background: url(../images/ikonice/ikone.png) -51px -56px;
}

#smestaj .b3 .single {
	width: 16px;
	height: 16px;
	background: url(../images/ikonice/ikone.png) -122px -42px;
}

#smestaj .b3 .terasa {
	width: 16px;
	height: 16px;
	background: url(../images/ikonice/ikone.png) -28px -56px;
}

#smestaj .b3 .tv {
	width: 16px;
	height: 16px;
	background: url(../images/ikonice/ikone.png) -204px -24px;  
}

#smestaj .b4 {
	max-width: 70%;
	margin:auto;
}

#smestaj .b4 img {
	margin: 1%;
}

#smestaj .b4 h3 {
	height: 3rem;
	background-color: #708090;
	border: 1px solid #000000;
	border-radius: 12px 0px 15px 0px;
	padding: 2% 4%;
	margin:0;
	font-family: Sans-Serif;
	color: #ffffff;
}

#smestaj .b4 h3:hover {
	height: 3rem;
	background-color: #9aa6b1;
	padding: 2% 4%;
	margin:0;
	font-family: Sans-Serif;
	color: #000000;
}

#smestaj .b4-list {
	margin-left: 4%;
	list-style-type: none;
}

#smestaj .b4 .b4-list li {
	margin: 1%;
}
#smestaj .b4 .b4-list img {
	margin: 0;
}

#smestaj .b4 .povrsina {
	width: 16px;
	height: 16px;
	background: url(../images/ikonice/ikone.png) -6px -21px;
}

#smestaj .b4 .kuca {
	width: 16px;
	height: 16px;
	background: url(../images/ikonice/ikone.png) -4px -57px;
}

#smestaj .b4 .double-single {
	width: 16px;
	height: 16px;
	background: url(../images/ikonice/ikone.png) -148px -57px;
}

#smestaj .b4 .terasa {
	width: 16px;
	height: 16px;
	background: url(../images/ikonice/ikone.png) -28px -56px;
}

#smestaj .b4 .kuhinja {
	width: 16px;
	height: 16px;
	background: url(../images/ikonice/ikone.png) -194px -2px;
}

#smestaj .b4 .t-sto{
	width: 16px;
	height: 16px;
	background: url(../images/ikonice/ikone.png) -116px -1px;
}

#smestaj .b4 .kupatilo {
	width: 16px;
	height: 16px;
	background: url(../images/ikonice/ikone.png) -125px -25px;
}

#smestaj .b4 .tv {
	width: 16px;
	height: 16px;
	background: url(../images/ikonice/ikone.png) -204px -24px;  
}

#smestaj .g1 {
	max-width: 70%;
	margin: auto;

}

#smestaj .g1 img {
	position: relative;
	left: 3%;
}

#smestaj .g1 h3 {
	height: 3rem;
	background-color: #708090;
	border: 1px solid #000000;
	border-radius: 12px 0px 15px 0px;
	padding: 2% 4%;
	margin:0;
	font-family: Sans-Serif;
	color: #ffffff;
}

#smestaj .g1 h3:hover {
	height: 3rem;
	background-color: #9aa6b1;
	padding: 2% 4%;
	margin:0;
	font-family: Sans-Serif;
	color: #000000;
}

#smestaj .g1-list {
	list-style-type: none;
	margin-left: 2%;
}

#smestaj .g1-list li {
	margin: 1%;
}

#smestaj .g1 .g1-list img {
	margin-right: 4%;
}
#smestaj .g1 .povrsina {
	width: 16px;
	height: 16px;
	background: url(../images/ikonice/ikone.png) -6px -21px;
}

#smestaj .g1 .kuca {
	width: 16px;
	height: 16px;
	background: url(../images/ikonice/ikone.png) -4px -57px;
}

#smestaj .g1 .double-single {
	width: 16px;
	height: 16px;
	background: url(../images/ikonice/ikone.png) -148px -57px;
}

#smestaj .g1 .terasa-g {
	width: 16px;
	height: 16px;
	background: url(../images/ikonice/ikone.png) -73px -41px;
}

#smestaj .g1 .kuhinja {
	width: 16px;
	height: 16px;
	background: url(../images/ikonice/ikone.png) -194px -2px;
}

#smestaj .g1 .t-sto{
	width: 16px;
	height: 16px;
	background: url(../images/ikonice/ikone.png) -116px -1px;
}

#smestaj .g1 .kupatilo {
	width: 16px;
	height: 16px;
	background: url(../images/ikonice/ikone.png) -125px -25px;
}

#smestaj .g1 .tv {
	width: 16px;
	height: 16px;
	background: url(../images/ikonice/ikone.png) -204px -24px;  
}


#smestaj .g2 {
	max-width: 70%;
	margin: auto;
	
}

#smestaj .g2 img {
	padding-left:: 2%;
}

#smestaj .g2 h3 {
	height: 3rem;
	background-color: #708090;
	border: 1px solid #000000;
	border-radius: 12px 0px 15px 0px;
	padding: 2% 4%;
	margin:0;
	font-family: Sans-Serif;
	color: #ffffff;
}

#smestaj .g2 h3:hover {
	height: 3rem;
	background-color: #9aa6b1;
	padding: 2% 4%;
	margin:0;
	font-family: Sans-Serif;
	color: #000000;
}

#smestaj .g2-list {
	list-style-type: none;
	margin-left: 2%;
}

#smestaj .g2-list li {
	margin: 1%;
}

#smestaj .g2 .g2-list img {
	margin:0;
	padding: 0;
}
#smestaj .g2 .povrsina {
	width: 16px;
	height: 16px;
	background: url(../images/ikonice/ikone.png) -6px -21px;
}

#smestaj .g2 .kuca {
	width: 16px;
	height: 16px;
	background: url(../images/ikonice/ikone.png) -4px -57px;
}

#smestaj .g2 .double-single {
	width: 16px;
	height: 16px;
	background: url(../images/ikonice/ikone.png) -148px -57px;
}

#smestaj .g2 .terasa-g {
	width: 16px;
	height: 16px;
	background: url(../images/ikonice/ikone.png) -73px -41px;
}

#smestaj .g2 .kuhinja {
	width: 16px;
	height: 16px;
	background: url(../images/ikonice/ikone.png) -194px -2px;
}

#smestaj .g2 .t-sto{
	width: 16px;
	height: 16px;
	background: url(../images/ikonice/ikone.png) -116px -1px;
}

#smestaj .g2 .kupatilo {
	width: 16px;
	height: 16px;
	background: url(../images/ikonice/ikone.png) -125px -25px;
}

#smestaj .g2 .tv {
	width: 16px;
	height: 16px;
	background: url(../images/ikonice/ikone.png) -204px -24px;  
}


#smestaj .krcma {
  width: 70%;
  margin: auto;
  overflow: auto;
}

#smestaj .krcma img {
	position: relative;
	left: 3%;
	margin: 0.5%;
}

#smestaj .krcma h3 {
	height: 3rem;
	background-color: #708090;
	border: 1px solid #000000;
	border-radius: 12px 0px 15px 0px;
	padding: 2% 4%;
	margin:0;
	font-family: Sans-Serif;
	color: #ffffff;
}

#smestaj .krcma h3:hover {
	height: 3rem;
	background-color: #9aa6b1;
	padding: 2% 4%;
	margin:0;
	font-family: Sans-Serif;
	color: #000000;
}

#smestaj .krcma h4 {
	text-indent: 4%;
}

#smestaj .krcma p {
	float: left;
	text-indent: 5%;
	text-align: justify;
}

#smestaj .sm-lista  li {
	 list-style-type: none;
	 padding-left: 1%;
	 margin: 1%;
	 
}

#smestaj .krcma .food {
	width: 16px;
	height: 16px;
	background: url(../images/ikonice/ikone.png) -25px -25px;
}

#smestaj .krcma .park-car {
	width: 16px;
	height: 16px;
	background: url(../images/ikonice/ikone.png) -95px -56px;
}

#smestaj .krcma .wifi {
	width: 16px;
	height: 16px;
	background: url(../images/ikonice/ikone.png) -4px -2px;
}

#smestaj .krcma .towel {
	width: 16px;
	height: 16px;
	background: url(../images/ikonice/ikone.png) -65px -3px;
}

#smestaj .krcma .hair-dry {
	width: 16px;
	height: 16px;
	background: url(../images/ikonice/ikone.png) -105px -25px;
}

#smestaj .krcma .small-bed {
	width: 16px;
	height: 16px;
	background: url(../images/ikonice/ikone.png) -73px -56px;
}

#smestaj .krcma .water {
	width: 16px;
	height: 16px;
	background: url(../images/ikonice/ikone.png) -98px -2px;
}

#smestaj .sm-lista {
	font-size: 18px;
}

#smestaj .sm-lista img {
	
	margin-right: 4%;
	
}

#smestaj .kontakt h2 {
	letter-spacing: 1rem;
	
}
#smestaj .kontakt {
	font-size: 1rem;
	padding: 3%;
}

#smestaj .početna:hover ~ hr {
  margin-left: 4%;
}

#smestaj .o_nama:hover ~ hr {
  margin-left: 19.6%;
}

#smestaj .sadržaji:hover ~ hr {
  margin-left: 50.5%;
}

#smestaj .galerija:hover ~ hr {
  margin-left: 66%;
}

#smestaj .cene:hover ~ hr {
  margin-left: 82.7%;
  width: 4.5%;
}

#smestaj hr {
  height: .25rem;
  width: 7%;
  margin: 0 0 0 35%;
  background: #edf211;
  border: none;
  transition: .3s ease-in-out;
}





	/******************      Sadrzaji    ******************/

	#sadrzaji {
		background-color: #e6e6fa;
		}



	#sadrzaji h2 {
		width: 100%;
		padding:0% 5% 2% 5%;
		border-bottom: 2px solid gray;
		font-size:2.5rem;
		letter-spacing: 1rem;
		
	}
	 
	#sadrzaji .galerija-sadrzaja {
		
		width:95%;
		margin: auto;
		padding: 0 7%;
		
	}

	#sadrzaji .galerija-sadrzaja p{
		margin-top:3%;
	}

	#sadrzaji .dodatno {
		width: 90%;
		margin: auto;
		padding: 4%;
		text-align: justify;
	}
	#sadrzaji .dodatno .lista_mesta li{
		margin-top: 1%;
	}
	#sadrzaji .dodatno .proizvodi {
		text-indent: 3%;
	}
	
	#sadrzaji .dodatno  .lista_proizvoda li{
		list-style-type: circle;
		margin-left:4%;
		margin-top:1%;
	}
	#sadrzaji .dodatno img {
		
		height:140px;
		margin: 3%;
	}

	#sadrzaji .dodatno img:hover {
		
		height:140px;
		margin: 3%;
	}


	#sadrzaji .galerija-sadrzaja img {
		opacity: 0.8;
		height: 200px;
	}



	#sadrzaji .galerija-sadrzaja img:hover {
		opacity: 1;
		height: 200px;
	}

	#sadrzaji .lista-sadrzaja {
		width: 85%;
		margin: auto;
		background-color: #ffffff;
		border-top: 1px solid grey;
		border-left: 1px solid grey;
		border-right: 1px solid grey;
		font-family: Sans-Serif;
		
		
	}

	#sadrzaji .lista-sadrzaja:hover {
		width: 85%;
		margin: auto;
		background-color: #e1eaea;
		border-top: 1px solid grey;
		border-left: 1px solid grey;
		border-right: 1px solid grey;
		font-family: Sans-Serif;
		box-shadow: 10px 10px 5px grey;
	}

	#sadrzaji .sadrzaji1 {
		
		width: 100%;
		margin: 1% 10%;
		font-size: 1.2rem;
		
	}	

	#sadrzaji .sadrzaji1 li {
		list-style-type: circle;
		margin: 1%
			
	}

	#sadrzaji .sadrzaji2 li {
		list-style-type: square;
		margin: 1%;
	}


	#sadrzaji .kontakt  {
		margin-left: 5%;
		font-size:1rem;
	}

	#sadrzaji .kontakt p {
		font-size: 1rem;
	}
	#sadrzaji .početna:hover ~ hr {
	  margin-left: 4%;
	}

	#sadrzaji .o_nama:hover ~ hr {
	  margin-left: 19.6%;
	}

	#sadrzaji .smeštaj:hover ~ hr {
	  margin-left: 35%;
	}

	#sadrzaji .galerija:hover ~ hr {
	  margin-left: 66%;
	}

	#sadrzaji .cene:hover ~ hr {
	  margin-left: 82.7%;
	  width: 4.5%;
	}

	#sadrzaji hr {
	  height: .25rem;
	  width: 7%;
	  margin: 0 0 0 50.5%;
	  background: #edf211;
	  border: none;
	  transition: .3s ease-in-out;
	}

	
		/****************************       Galerija     ********************************/

		#galerija {
			background-color: #e6e6fa;
		}

		#galerija div.gallery {
			border: 1px solid #ccc;
		}

		#galerija div.gallery:hover {
			border: 1px solid #777;
			font-weight: bold;
			
		}

		#galerija div.gallery img {
			width: 100%;
			height: auto;
		}

		#galerija div.desc {
			padding: 15px;
			text-align: center;
		}

		* {
			box-sizing: border-box;
		}

		#galerija .responsive {
			padding: 0 6px;
			float: left;
			width: 19.99999%;
		}

		#galerija .clearfix:after {
			content: "";
			display: table;
			clear: both;
		}

		



		#galerija  h2 {
			width: 100%;
			padding:0% 5% 2% 5%;
			border-bottom: 2px solid gray;
			font-family: Sans-Serif;
			font-size:2rem;
			letter-spacing: 1rem;
				
		}

		#galerija .central {
			padding:4%;
			position: relative;
		}

		#galerija .kontakt h2 {
			font-size:2.5rem;
		}

		#galerija .kontakt {
			font-size: 1rem;
		}
		#galerija .početna:hover ~ hr {
		  margin-left: 4%;
		}

		#galerija .o_nama:hover ~ hr {
		  margin-left: 19.6%;
		}

		#galerija .smeštaj:hover ~ hr {
		  margin-left: 35%;
		}

		#galerija .sadržaji:hover ~ hr {
		  margin-left: 50.5%;
		}

		#galerija .cene:hover ~ hr {
		  margin-left: 82.7%;
		  width: 4.5%;
		}

		#galerija hr {
		  height: .25rem;
		  width: 7%;
		  margin: 0 0 0 66%;
		  background: #edf211;
		  border: none;
		  transition: .3s ease-in-out;
		}

/******    CENE   **********/

	#cene {
		background-color: #f5f5dc;
	}

	#cene h2 {
		width: 100%;
		padding:2% 4%;
		border-bottom: 2px solid gray;
		font-size:2rem;
		letter-spacing: 1rem;
		text-align:center;
	}

    #cene .tabela {
		width: 80%;
		margin: 1% 10% 0% 10%;
		border-top: 1px solid grey;
		border-left: 1px solid grey;
		border-right: 1px solid grey;
		box-shadow: 10px 10px 5px grey;
		overflow-x: auto;
		padding: 3%;
		background-color: #ffffff;
	}

	#cene table {
	
		border: 1px solid gray;
		width: 75%;
		text-align: center;
		margin: auto;
	}
	
	#cene th {
    background-color: #4CAF50;
	padding: 3%;
    color: white;
}

	#cene td {
		background-color: #dddddd;
		padding:3%;
	}
	
	#cene td:hover {
		background-color: #f2f2f2;
		color: #4CAF50;
		font-weight: bold;
	}
	
	#cene .napomene {
		width: 75%;
		margin: auto;
		line-height: 2;
	}
	
	#cene .kontakt h2 {
		text-align: left;
	}
	#cene .kontakt {
		text-align: left;
		font-size: 1rem;
		padding-left: 7%;
		
	}

#cene #googleMap {
	width: 38%;
}

#cene .početna:hover ~ hr {
  margin-left: 4%;
  width: 7%;
}

#cene .o_nama:hover ~ hr {
  margin-left: 19.6%;
  width: 7%;
}

#cene .smeštaj:hover ~ hr {
  margin-left: 35%;
  width: 7%;
}

#cene .sadržaji:hover ~ hr {
  margin-left: 50.5%;
  width: 7%;
}

#cene .galerija:hover ~ hr {
  margin-left: 66%;
  width: 7%;
  
}

#cene hr {
  height: .25rem;
  width: 4.5%;
  margin: 0 0 0 82.7%;
  background: #edf211;
  border: none;
  transition: .3s ease-in-out;
}

/**********************  E N G  ***************************/

/******************* H O M E ***************************/



#pocetna.eng .o_nama:hover ~ hr {
  margin-left: 19.85%;
  width: 5.8%;
}

#pocetna.eng .smeštaj:hover ~ hr {
  margin-left: 33.8%;
  width: 8.8%;
}

#pocetna.eng .sadržaji:hover ~ hr {
  margin-left: 50.8%;
  width: 5.6%;
}

#pocetna.eng .galerija:hover ~ hr {
  margin-left: 66.8%;
  width: 4.5%;
}

#pocetna.eng .cene:hover ~ hr {
  margin-left: 82.4%;
  width: 4%;
}

#pocetna.eng hr {
  height: .25rem;
  width: 3.8%;
  margin: 0 0 0 5.6%;
  background: #edf211;
  border: none;
  transition: .3s ease-in-out;
}

#pocetna.eng .bottom-list {
	width: 100%;
	margin: auto;
	padding: auto;
}


#pocetna.eng .bottom-list  li {
	width: 100%;
	margin: 5px;
}

/****************  ABOUT US ******************/

#oNama.eng .početna:hover ~ hr {
  margin-left: 5.6%;
  width: 3.8%;
}

#oNama.eng .smeštaj:hover ~ hr {
  margin-left: 33.8%;
  width: 8.8%;
}

#oNama.eng .sadržaji:hover ~ hr {
  margin-left: 50.8%;
  width: 5.6%;
}

#oNama.eng .galerija:hover ~ hr {
  margin-left: 66.8%;
  width: 4.5%;
}

#oNama.eng .cene:hover ~ hr {
  margin-left: 82.4%;
  width: 4%;
}

#oNama.eng hr {
  height: .25rem;
  width: 6%;
  margin: 0 0 0 19.85%;
  background: #edf211;
  border: none;
  transition: .3s ease-in-out;
}

#oNama.eng .bottom-list {
	width: 100%;
	margin: auto;
	padding: auto;
}


#oNama.eng .bottom-list  li {
	width: 100%;
	margin: 5px;
}




/****************** ACCOMODATION ****************/



#smestaj.eng .početna:hover ~ hr {
  margin-left: 5.6%;
  width: 3.8%;
}

#smestaj.eng .o_nama:hover ~ hr {
  margin-left: 19.85%;
  width: 5.8%;
}

#smestaj.eng .galerija:hover ~ hr {
  margin-left: 66.75%;
  width: 4.5%;
}

#smestaj.eng .sadržaji:hover ~ hr {
  margin-left: 50.8%;
  width: 5.6%;
}

#smestaj.eng .cene:hover ~ hr {
  margin-left: 82.4%;
  width: 4%;
  
}

#smestaj.eng hr {
  height: .25rem;
  width: 8.8%;
  margin: 0 0 0 33.8%;
  background: #edf211;
  border: none;
  transition: .3s ease-in-out;
}
#smestaj.eng .bottom-list {
	width: 100%;
	margin: auto;
	padding: auto;
}


#smestaj.eng .bottom-list  li {
	width: 100%;
	margin: 5px;
}

/*************  A C T I V I T I E S **************/



#sadrzaji.eng .početna:hover ~ hr {
  margin-left: 5.6%;
  width: 3.8%;
}


#sadrzaji.eng .o_nama:hover ~ hr {
  margin-left: 19.85%;
  width: 5.8%;
}

#sadrzaji.eng .smeštaj:hover ~ hr {
  margin-left: 33.8%;
  width: 8.8%;
}

#sadrzaji.eng .galerija:hover ~ hr {
  margin-left: 66.8%;
  width: 4.5%;
}

#sadrzaji.eng .cene:hover ~ hr {
  margin-left: 82.4%;
  width: 4%;
}

#sadrzaji.eng hr {
  height: .25rem;
  width: 5.6%;
  margin: 0 0 0 50.8%;
  background: #edf211;
  border: none;
  transition: .3s ease-in-out;
}

#sadrzaji.eng .bottom-list {
	width: 100%;
	margin: auto;
	padding: auto;
}


#sadrzaji.eng .bottom-list  li {
	width: 100%;
	margin: 5px;
}

/******** GALLERY ************/

#galerija.eng .početna:hover ~ hr {
  margin-left: 5.6%;
  width: 3.8%;
}

#galerija.eng .o_nama:hover ~ hr {
  margin-left: 19.85%;
  width: 5.8%;
}

#galerija.eng .smeštaj:hover ~ hr {
  margin-left: 33.8%;
  width: 8.8%;
}

#galerija.eng .sadržaji:hover ~ hr {
  margin-left: 50.8%;
  width: 5.6%;
}

#galerija.eng .cene:hover ~ hr {
  margin-left: 82.4%;
  width: 4%;
  
}

#galerija.eng hr {
  height: .25rem;
  width: 4.5%;
  margin: 0 0 0 66.75%;
  background: #edf211;
  border: none;
  transition: .3s ease-in-out;
}

#galerija.eng .bottom-list {
	width: 100%;
	margin:auto;
	padding: 2% 33%;
	list-style-type: none;
	display: inline-block;
	
}
#galerija.eng .bottom-list li{
	display: inline;
	margin:1%;
	
	
}


/************  PRICES **********************/

#cene.eng .početna:hover ~ hr {
  margin-left: 5.6%;
  width: 3.8%;
}

#cene.eng .o_nama:hover ~ hr {
  margin-left: 19.85%;
  width: 5.8%;
}

#cene.eng .smeštaj:hover ~ hr {
  margin-left: 33.8%;
  width: 8.8%;
}

#cene.eng .sadržaji:hover ~ hr {
  margin-left: 50.8%;
  width: 5.6%;
}

#cene.eng .galerija:hover ~ hr {
  margin-left: 66.8%;
  width: 4.5%;
  
}

#cene.eng hr {
  height: .25rem;
  width: 4%;
  margin: 0 0 0 82.4%;
  background: #edf211;
  border: none;
  transition: .3s ease-in-out;
}

#cene.eng .bottom-list {
	width: 100%;
	margin: auto;
	padding: auto;
}


#cene.eng .bottom-list  li {
	width: 100%;
	margin: 5px;
}