.naslovnica{
	font-size: 40px;
}
/*STRELICA*/
#vrhdolestrelica{
	position: absolute;
	margin-bottom: 4vh;
	z-index: 11;
	width: 100%;
	bottom: 0;
	text-align: center;
	transition: 0.8s;
}

@media only screen and (max-width: 991px) {
	#vrhdole{
		height: 30vh;
	}
}

#strelica{
	transition: opacity 0.8s;
	animation: padanje 2s  infinite;

}

@keyframes padanje{
	0%{
  		opacity: 100;
  	}
  	100%{
  		opacity: 0;
  		transform: translateY(3vh);
  	}
}

@media only screen and (max-width: 991px) {
	#strelica{
		margin-bottom: 6vh;
	}
}

/*LOADER*/
.loader{
	position: fixed;
	z-index: 999;
	top: 0;	
	left: 0;
	width: 100vw;
	height: 100vh;
	background: #0c0d0e;
	display: flex;
	justify-content: center;
	align-items: center;
}

#loaderanimation1,#loaderanimation2,#loaderanimation3{
	width: 50px;
	position: fixed;
	z-index: 98;
	opacity: 0;
	transition: opacity 0.6s;
}

/*NAVIGACIJA*/

#broj{
	color: #c4ac3b;
	font-size: 16px;
}

#logo{
	height: 35px;
}

.navbar{
	background-color:#0c0d0e;
	position:relative;
	z-index: 77;
	font-family: "Bellota Text", cursive;
}

@media only screen and (max-width: 991px) {
	.navbar{
	background-color:#0c0d0e;
	position:relative;
	padding-right: 0px !important;
	padding-bottom: 0px !important;
	padding-top: 0px !important;
	}
}

#logowraper{
	margin-left: 20px;
	margin-right: 20px;
}

#navbarToggle{
/*	background-color: red;*/
	max-width: 508px;
	margin-left: auto;
	margin-right: auto;
}

#korpa{
	position:absolute;
	right: 0;
	margin-right: 24px;
  
}
@media only screen and (max-width: 991px) {
	#korpa{
		position:relative;
		right: auto;
		margin-right: auto;
		padding-left: 0;
	  
	}
}

#dugmeglavno{
	background-color: black;
	height: 50px;
	width: 30vw;
	border: 0px;
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%);
	padding: 0px !important;

}

#korpac{
	height: 30px;
}


/*VIDEO*/

#myVideo {
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translateX(calc((100% - 100vw) / 2));
    
}

body{
	background-color: #0c0d0e !important;
	font-family: "Bellota Text", cursive !important;
}

/*.boja{
	background-color: black;
}*/

@media only screen and (max-width: 991px) {
	#myVideo{
		max-height: 100vh;
		min-height: 100vh;
		min-width: 100%;
	}
}

/*POCETNA*/

#jezici{
	position: absolute;
	left: 0;
	margin-bottom: 0;
	margin-left: 2vw;
	padding: 0;
	
}
#jezici>a{
	color:#c4ac3b;
}
#vrh{
	position: relative;
	z-index: 7;
	border: solid red 0px;
	height: 100vh;
}

#vrhgore{
	position: relative;
	display: flex;
	z-index: 7;
	height: 100vh;
	width: 100%;
	top:0;
	border: 0px red solid;
}

@media only screen and (max-width: 991px) {
	#jezici{
	position: relative !important;
	margin-left: 0 !important;	
	}
	#vrhgore{
		height: 100vh;
	}
}

#n1,#n2,#n3,#n4{
	font-family: "Cinzel", serif;
	margin-right: 10vw;
	margin-left: 10vw;
	font-size: 4vh;
	transition: opacity 0.6s;
}

#sivalevo{
	position: absolute;
	z-index: 7;
	height: 30vh;
	width: 70%;
	bottom: 0;
	background-color:#0c0d0e;
	text-align: center;
	-webkit-clip-path: polygon(0 0, 0% 100%, 100% 100%);
}

#crnalevo{
	position: absolute;
	z-index: 8;
	height: 12vh;
	width: 45%;
	bottom: 0;
	background-color:black;
	text-align: center;
	-webkit-clip-path: polygon(0 0, 0% 100%, 100% 100%);
}

#sivadesno{
	position: absolute;
	z-index: 8;
	height: 33vh;
	width: 50%;
	bottom: 0;
	right: 0;
	background-color:#0c0d0e;
	text-align: center;
	-webkit-clip-path: polygon(100% 0, 0% 100%, 100% 100%);
}

#crnadesno{
	position: absolute;
	z-index: 6;
	height: 50vh;
	width: 60%;
	bottom: 0;
	right: 0;
	background-color:black;
	text-align: center;
	-webkit-clip-path: polygon(100% 0, 0% 100%, 100% 100%);
}

#bez{
	position: absolute;
	z-index: 6;
	height: 30vh;
	width: 60%;
	top:0;
	background-color:#0c0d0e;
	text-align: center;
	-webkit-clip-path: polygon(0 0, 0% 100%, 100% 0);
}

/*O NAMA*/
#drugi{
	font-family: "Bellota Text", cursive;
	font-size: 18px;
	position: relative;
	z-index: 33;
	width: 100%;
	border: 0px solid red;
	background-color:#0c0d0e;
	text-align:center;
	padding-top: 20px;
}

#onama{
	opacity: 0;
	transition: opacity 1.2s;
}

#margine{
	margin-right: 10vw;
	margin-left: 10vw;
	margin-top: 40px;
	padding-bottom: 50px;
	line-height: 2;
	margin-bottom: 0px;
	opacity: 0;
	transition: opacity 1.2s;

}

@media only screen and (max-width: 991px) {
	#margine{
	margin-right: 5vw;
	margin-left: 5vw;
	text-align: justify;
	}
}

/*MAPA*/

#map{
	min-width: 100%;
	min-height: 100%;
	position: relative;
	z-index: 33;

}

.mapboxgl-ctrl-logo,.mapboxgl-ctrl-bottom-right {
    display: none !important;
}


/*SLJIVA*/

.glavni{
	margin-top: 30px;
	padding: 15px;
	width: 50%;
	height: 100%;
	position: relative;
	z-index: 7;
	background: linear-gradient(90deg, rgba(251,239,118,1) 0%, rgba(188,162,50,1) 100%);
}

.popravka{
	min-height: 65vh;
}

.popravkatxt{
	min-height: 65vh;
}



@media only screen and (max-width: 991px) {
	.popravka{
		height:45vh !important; 
	}
	.popravkatxt{
	height: auto !important;
	}
	#sljivaslika{
		padding-left: 50px !important;
	}
	#kutija{
		padding-right: 50px !important;
	}
}

#kutija{
	padding-right:120px;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 94%;
	z-index: 4
}

#sljivaslika{
	opacity: 0;
	transition: opacity 1.2s;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 5;
	height: 90%;
	padding-left: 120px
}

#smuknaslov{
	margin-bottom: 20px;
	opacity: 0;
	transition: opacity 1.2s;
}

#trecitekst{
	margin-right: 4vw;
	opacity: 0;
	transition: opacity 1.2s;
	text-align: justify;
}

@media only screen and (max-width: 991px) {
	#trecitekst{
	margin-right: 0;
	}
}

#cena1{
  	opacity: 0;
	transition: opacity 1s;   	
}

#d1,#d2{
	opacity: 0;
	transition: opacity 1.2s;
}

#dx1{
	opacity: 0;
	transition: opacity 1.2s;
	width: 50px;
}


/*GROZDJE*/

#cetvrtitekst{
	margin-left: 2vw;
}

@media only screen and (max-width: 991px) {
	#cetvrtitekst{
	margin-left: 0vw;
	}
}

#smuknaslov2{
	margin-bottom: 20px;
	opacity: 0;
	transition: opacity 1.2s;
}

#ttt{
	opacity: 0;
	transition: opacity 1.2s;
	text-align: justify;
	z-index: 66;
}

#cena2{
  	opacity: 0;
	transition: opacity 1s;   	
}

#grozdjeslika{
	opacity: 0;
	transition: opacity 1.2s;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 5;
	height: 90%;
}

#ruza{
	position: absolute;
	z-index: 2;
	bottom:0;
	right: 0;
	height: 85%;
}

#d3,#d4{
	opacity: 0;
	transition: opacity 1.2s;
}

#dx2{
	opacity: 0;
	transition: opacity 1.2s;
}

/*DUNJA*/

#dunjaslika{
	opacity: 0;
	transition: opacity 1.2s;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 5;
	height: 90%;

  }

#smuknaslov3{
	margin-bottom: 20px;
	opacity: 0;
	transition: opacity 1.2s;
}

#trecitekst2{
	margin-right: 4vw;
	opacity: 0;
	transition: opacity 1.2s;
	text-align: justify;
}


@media only screen and (max-width: 991px) {
	#trecitekst2{
	margin-right: 0;
	}
}

#cena3{
  	opacity: 0;
	transition: opacity 1s;   	
}

#d5,#d6{
	opacity: 0;
	transition: opacity 1.2s;
}

#dx3{
	opacity: 0;
	transition: opacity 1.2s;
}

/*GALERIJA*/
.slikaokvir{
	padding: 0 !important;
}

#galerija{
	margin-top: 3vh;
	padding-bottom: 22px;
	opacity: 0;
	transition: opacity 1.2s;
}

@media only screen and (max-width: 991px) {
	#galerija{
		text-align: center;
	}
	.slikaokvir{
	padding: 3vw !important;
	}
}

#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* 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 !important;
    width: 80% !important;
    position: absolute !important;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    max-width: 700px;
}

/* Caption of Modal Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
    opacity: 0 !important;
}

/* Add Animation */
.modal-content, #caption {    
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

/* The Close Button */
.close {
    position: absolute;
    top: 35px;
    right: 35px;
    color: #c4ac3b !important;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    width: 4vh;
    height: 4vh;
}

.close:hover,
.close:focus {
    color: blue !important;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}


/*AKTUELNOSTI*/

.aktuelnaslika{
	width: 13vw;
}

#kontejneraktivnost{
	padding-left: 0;
	text-align: justify;
}


#slikaaktuelnosti{
	position: absolute;
	width: 50vw;
}

#vest1{
	margin-right: 15vw;
	margin-bottom: 55px;
	opacity:0;
	transition:opacity 1s
}

#vest1,#vest2{
	margin-right: 15vw;
	
	opacity:0;
	transition:opacity 1s
}



@media only screen and (max-width: 991px) {
	#vesti1n,#vesti2n,#vesti3n{
	text-align: center;
	margin-top: 2vh;
	margin-bottom: 2vh;
	}

	.cudno{

	}

	.aktuelnaslika{
	width: 60vw;
	}	


	#kontejneraktivnost{
	padding-right: 0;
	}

	#uka{
		width: 100%;
		margin:0;
	}

	#aktuelno{
	text-align: center;
	}
	#okolo,.omotacaktuelnosti{
	padding-right: 0 !important;
	padding-left: 0 !important;
	}
	#vest1,#vest2,#vest3{
		margin:3vw !important;
	}
	#slikaaktuelnosti,.levk,#levoruk{
	display: none;
	}
	.vs{
		text-align: center;
	}
}

#levoruk{
	border-right: 2px #c4ac3b solid;
	opacity: 0;
	transition: opacity 0.6s;
}

#levoruk2{
	border-right: 2px #c4ac3b solid;
	opacity: 0;
	transition: opacity 0.6s;
}

#aktuelno{
	margin-bottom: 20px;
	opacity: 0;
	transition: opacity 1.2s;
	margin-top: 3vh;
	padding-bottom: 22px;
	opacity: 0
}

.novostitekst{
	height: 20vh;
	overflow: auto;
}



.levk{
	border-bottom: 2px #c4ac3b solid;
	height: 50%;
}

/*KUHINJA*/

.nm{
  	padding-right: 0 !important;
  	padding-left: 0 !important;
}

#kuhinjalink{
 	opacity: 0;
	transition: opacity 1.2s; 	
}

#margine2{
 	opacity: 0;
	transition: opacity 1.2s; 
	margin-right: 10vw;
	margin-left: 10vw;
	margin-top: 40px;
	padding-bottom: 50px;
	line-height: 2;
	margin-bottom: 0px;
}

@media only screen and (max-width: 991px) {
	#margine2{
		margin-right: 0;
		margin-left: 0;
		text-align: justify;
	}
	#s1,#s2,#s3,#s4{
  	margin-left: 6vw;
  	margin-right: 6vw;
  	margin-top: 6vw;
  	}
}

#s1,#s2,#s3,#s4{
  	opacity: 0;
	transition: opacity 1s; 
	display: inline-block;
  	overflow: hidden;
  }

.sivo {
    filter: none;
    -webkit-filter: grayscale(100%);
    -moz-filter:    grayscale(100%);
    -ms-filter:     grayscale(100%);
    -o-filter:      grayscale(100%);
    cursor: pointer;
    transition: all 300ms ease;
}

.sivo:hover {
    filter: none;
    -webkit-filter: grayscale(0%);
    -moz-filter:    grayscale(0%);
    -ms-filter:     grayscale(0%);
    -o-filter:      grayscale(0%);
}

#sr1,#sr2,#sr3,#sr4{
  	background: #0c0d0e;
  	position: absolute;
  	z-index: 55;
  	top:0;
  	overflow: auto;
  	height: 100%;
  	padding-right: 14px;
  	padding-left: 14px;
  	line-height: 2;
  	display: none;
 	opacity: 0;
	transition: opacity 0.2s; 
  }

.receptnaslov{
  	margin-top: 24px;
  	margin-bottom:24px;
}

.krst{
  	position: relative;
  	z-index: 88;
  	width: 6%;
  	margin-top: 20px;
}

.krst:hover{
  	cursor: pointer;
}

/*FUTER*/


.tamno{
	opacity: 1;
	transition: transform .1s;
}

.tamno:hover{
	opacity: 0.7;
	transform: scale(0.95);

}

#pod  a:hover {
  color: #c4ac3b !important;

}

.iznad{
	z-index: 20;
}

/*UNIVERZALNO*/
.podesavanje{
	text-align: justify;

}
#d1,#d2,#d3,#d4{
	opacity: 0;
}

.dno{
	color:#c4ac3b;
}

.fab,.fas{
	color:#c4ac3b;
}

html{
	background-color: black;
}

.lh{
	line-height: 2;
}

.blockquote{
	position: absolute;
	left: 0;
	right: 0;
}

.rakija{
	position: relative;
	z-index: 1;
	height: 54vh;
	margin-top: 5vh;

}

.kontejner{
	position: relative;
	z-index: 33;
	background-color: #0c0d0e;
	/*clip-path: polygon(0 0, 100% 0, 100% 70%, 0% 100%);*/
		font-family: "Bellota Text", cursive;
		font-size: 18px;
	
}

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


	.kontejner{
		text-align:center;
	}
}

html {
  scroll-behavior: smooth;
}

.minus,.plus{
	height: 35px;
}

.minus,.plus:hover{
	cursor: pointer;
}

.section {
    margin-top: -70px;
    padding-top: 70px;
}

.dugmad{
	margin-bottom: 30px;
}

/*SKOLBAR*/

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #0c0d0e;
  opacity: 50%;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, rgba(251,239,118,1) 0%, rgba(188,162,50,1) 100%);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #2d2d2d;
}



/*Animacije*/

  @keyframes Slide{
  	0%{
  		transform: translateX(-150px);
  	}
  	100%{
  		transform: translateX(0);
  	}
  }

  @keyframes Slide2{
  	0%{
  		transform: translateX(150px);
  	}
  	100%{
  		transform: translateX(0);
  	}
  }

.nadesno{
  	animation: Slide 2s ease;
  }

.nalevo{
  	animation: Slide2 2s ease;
  }































.smukovi{
	animation-delay: 7s;
	animation: onoff 3s ease infinite;
}

  @keyframes onoff{
  	0%{
  		opacity: 100;
  	}
  	50%{
  		opacity: 0;
  	}
  	100%{
  		opacity: 100;
  	}
  }

  .paused{
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -o-animation-play-state:paused; 
    animation-play-state:paused;
}








.carousel-inner>.carousel-item {
    -webkit-transition: -webkit-transform 2.2s ease-in-out !important;
    -o-transition: -o-transform 2.2s ease-in-out !important;
    transition: transform 2.2s ease-in-out !important;
}












.nav-link{
	text-align: center;
}



.navbar{
	padding-left: 0 !important;
}

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


	.navbar-brand{
		margin-left: 4vw;
	}
	#korpa{
		margin-bottom: 100vh;
	}
}









#bb{
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
  border-radius: 0 !important;
  
  background-color: #c4ac3b !important;
  border: 0 !important;
  color: #0c0d0e !important;
  transition: transform .1s;
}

#bb:hover{
	transition: opacity 0s !important;
  opacity: 0.7 !important;
transform: scale(0.98);
}