*{box-sizing:border-box;}

body{font-family: 'Montserrat', sans-serif;
	font-weight:300;
	padding:0px;
	margin:0px;}
	
img{max-width:100%;
	height:auto;}
	
background{max-width:100%;
	height:auto;}
	
a{color:white;
	text-decoration:none;
	text-transform:uppercase;}
	
a:hover{color:goldenrod;
	transition: 0.6s ease;}
	
h1{font-family: 'Bodoni Moda';
	font-size:200%;
	padding:0px;
	margin:0px;}
	
button{font-family: 'Montserrat', sans-serif;
	font-weight:300;
	padding:0px;
	margin:0px;}

	/* ******************************************************************************************************************** */
	
	/* PAGE LAYOUT - raspored glavnih elemenata *************************************************************************** */

.grid_container{display:grid;
	min-height:100vh;
	grid-template-rows:auto 1fr auto auto;
	grid-template-columns:1fr minmax(280px,1200px) 1fr;}
	
	
	
	
	
	
	
	
	/* UREĐIVANJE ELEMENATA STRANICE ************************************************************************************** */
	
	/* PAGE HEADER ******************************************************************************************************** */
	
.page_header{display:grid;
	grid-column:1/4;
	grid-template-columns:1fr minmax(280px,1200px) 1fr;
	background-color:#852225;
	padding:0px;}
	
.site_navigation{grid-column:2/3;
	padding:0px;
	margin:0px;}
	
.site_navigation nav{padding:0px;
	margin:0px;
	list-style-type:none;}
	
.site_navigation nav ul{list-style-type:none;
	padding:0px;
	margin:0px;
	overflow:hidden;
	}
	
.site_navigation nav ul li{float:left;
	padding:10px 30px 10px 0px;
	margin:15px 0px 15px 0px;
	justify-content:left;}
	
.menu_items{margin:10px;
	padding:10px;}

#menu_icons{float:right;
	text-align:right;
	padding:0px;
	margin:0px;}
	
.nav_btn{display:none;
	color:white;}
	
.dropdown_content a:hover {background-color:#ddd;}
.dropdown:hover .dropdown_content{display:block;}

.header_image{display:grid;
	grid-column:1/4;
	grid-template-columns:1fr minmax(280px,1200px) 1fr;
	overflow:hidden;
	margin:0px;
	padding:0px;
	/*position:relative;
	text-align:center;*/}
	
.header_image img{width:100%;
	height:auto;
	display:block;
	grid-column:1/4;}
	
/*.header_logo{position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size:40px;
	color:white;}*/
	
	
	
	/* PRIMARY ************************************************************************************************************ */

.primary{display:grid;
	grid-column:1/4;
	grid-template-columns:1fr minmax(280px,1200px) 1fr;
	padding:60px 0px 0px 0px;
	text-align:center;
	/*background-color:#F0F0F0;*/}
	
.main_text{grid-column:2/3;
	grid-template-columns:minmax(280px,1200px);
	padding:0px 0px 60px 0px;}
	
#horizontal_line{display:block;
	height:0%;
	width:100%}
	
/*.main_article_body{display:flex;
	grid-column:2/3;
	grid-template-columns:minmax(280px,1200px);
	grid-gap:50px;
	margin-bottom:50px;}*/
	
.content_columns{display:grid;
	grid-column:2/3;
	grid-template-columns:repeat(2,1fr);
	row-gap:50px;
	margin-bottom:100px;}
	
.content_columns_restoran{display:grid;
	grid-column:2/3;
	grid-template-columns:1fr;
	row-gap:50px;
	margin-bottom:100px;}
	
.article_header{color:#852225;}
	
.main_article_text{background-color:#E2DED9;
	/*padding:120px 60px 20px 60px;*/
	padding:10%;
	text-align:center;
	align-items:center;
	justify-content:center;}
	
.restoran_roko_text{/*padding:0% 10% 0% 10%;*/
	text-align:center;
	/*background-color:pink;*/}
	
.button{border:none;
	color:white;
	background-color:#852225;
	text-align:center;
	padding:15px 32px 15px 32px;
	transition-duration:0.4s;
	cursor:pointer;
	margin:80px 0px 0px 0px;}
	
.button:hover{background-color:#6d181b;}

.main_article_image{margin:0px;
	padding:0px;}
	
	
	
/* SLIDESHOW */	
	
	.slideshow_container{max-width:1200px;
			position:relative;
			margin:auto;}
		
		.o_nama_slideshow{display:none;}

		.prev,.next {
			cursor: pointer;
			position: absolute;
			top: 50%;
			width: auto;
			margin-top: -22px;
			padding: 16px;
			color: white;
			font-weight: bold;
			font-size: 18px;
			transition: 0.6s ease;
			border-radius: 0 3px 3px 0;
			user-select: none;}
			
		.next {
			right: 0;
			border-radius: 3px 0 0 3px;}
			
		.prev {
			left: 0;
			border-radius: 3px 0 0 3px;}
			
			/* On hover, add a black background color with a little bit see-through */
		.prev:hover,.next:hover {
			background-color: rgba(0,0,0,0.8);}
			
			/* Number text (1/4 etc) */
		.number_text {color: #f2f2f2;
			font-size: 12px;
			padding: 8px 12px;
			position: absolute;
			top: 0;}
			
		/* The dots/bullets/indicators */
		.dot {
			cursor: pointer;
			height: 15px;
			width: 15px;
			margin: 0 2px;
			background-color: #bbb;
			border-radius: 50%;
			display: inline-block;
			transition: background-color 0.6s ease;}

		.active, .dot:hover {
			background-color: #717171;}

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

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


	
	
	
	/* SECONDARY*********************************************************************************************************** */

/*.secondary{display:grid;
	grid-column:2/3; 
	text-align:center;
	padding:80px 0px 80px 0px;
	background-color:green;}*/
	
	
	
	/* PAGE FOOTER ******************************************************************************************************** */
	
.page_footer{/*display:grid;*/
	grid-column:1/4;
	grid-template-columns:1fr minmax(280px,1200px) 1fr;
	background-color:#852225;
	padding:0px;}
	
#page_footer_grid{display:grid;
	grid-column:2/3;
	grid-template-columns:20% 20% 20% 20% 20%;
	padding:30px 0px 30px 0px;}
	
#page_footer_grid_2{display:grid;
	/*grid-column:2/3;*/
	/*grid-template-columns:auto auto auto auto auto;*/
	padding:30px 0px 30px 0px;
	text-align:center;
	justify-content:center;}
	
.page_footer_text{display:inline-block;
	color:white;
	min-width:200px;}
	
#page_footer_text_1{text-align:left;}
#page_footer_text_2{text-align:center;}
#page_footer_text_3{text-align:right;}

.footer_headline{color:#b9afa3;
	line-height:0 0 10 0;
	font-size:20px;}

.hr{color:goldenrod;}

	
	
	
	
	
	/* RWD **************************************************************************************************************** */
	
@media(max-width:1200px){
	.content_columns{grid-template-columns:repeat(2,1fr);
	grid-gap:50px;}
}

@media(max-width:900px){
	.content_columns{grid-template-columns:repeat(2,1fr);
	grid-gap:50px;}
}

@media(max-width:600px){
	.content_columns{grid-template-columns:repeat(1,1fr);
	grid-gap:50px;}
}

@media(max-width:900px){
	.content_columns_kontakt{grid-template-columns:repeat(1,1fr);
	padding:0px;
	margin:0px;}
}





@media(min-width:901px){
	.site_navigation ul{display:row !important;}
	.page_footer{display:grid;}
	#page_footer_grid_2{display:none;}					/* ovo je da se vertikalni mobilni footer ne pokazuje na desktopu */
	#menu_icons_mob{display:none;}						/* ovo je da se ikone za društvene mreže u mobilnom obliku ne pokazuju na desktopu */
}


@media(max-width:900px){
	
/* ************************************** MOBILNA VERZIJA --- PAGE HEADER ************************************** */	
	
	.page_header ul{grid-template-columns:1fr;
							display:none;}
		
	.site_navigation ul{grid-template-columns:1fr;
							display:none;}
							
							
							

	/*.site_navigation nav ul{background-color:blue;}*/
	
	.menu_items{/*background-color:pink;*/
		display:flex;
		justify-content:center;
		align-items:center;
		width:100%;
		margin:0px;
		padding:0px;}
		
	#menu_icons{display:none;
		flex-direction:column;
		justify-content:center;
		align-items:center;
		padding:0px;
		margin:0px;}
		
	#menu_icons_mob{display:flex;
		flex-direction:row;
		justify-content:center;
		align-items:center;
		padding:10px;
		margin:0px;
		background-color:#6D181B;}
	
	.nav_btn{display:flex;
		margin:0px;
		justify-content:center;
		color:white;
		font-weight:bold;
		font-size:200%;
		padding:20px;}
		
		
	.header_menu{list-style-type: none;
        padding: 0;
        margin: 0;
        display: none;  /* Use flexbox to control layout */
        flex-direction: column;  /* Stack vertically */
        justify-content: center;  /* Center the list items */
        align-items: center;  /* Center horizontally */
        width: 100%;  /* Full width for better alignment */
		background-color:#6D181B;}
		
	.header_menu.active{display:flex;}
		
	.site_navigation nav ul li {
        padding: 16px 0;  /* Space between items */
        margin: 0;
        display: flex;  /* Flexbox for li */
        justify-content: center;  /* Center each individual list item */
        align-items: center;  /* Vertically align list items */
        width: 100%;  /* Ensure li spans the full width */}
		
	.dropdown{display:none;}
	/* ovo zadnje je dodano jer se iz nekog razloga bez ovoga u izborniku u mobilnoj verziji pojavljuje veći razmak između stavki koje imaju dodatni dropdown menu */
	
	


/* ************************************** MOBILNA VERZIJA --- PRIMARY ************************************** */

	.main_text{padding:40px;}
	.content_columns{row-gap:0px;}
	.restoran_roko_text{padding:0% 10% 0% 10%; /* ako ovo maknem, onda google map ide do ruba, al to mi onda jebe ostale podstranice. triba ovo skontat nekako !!!!!!!!!!!!! */
		text-align:center;}
	.content_columns_restoran article{padding:0%;}
	
	#google_map {position: relative;
    padding-bottom: 100%;
    height: 0;
    overflow: hidden;
	margin:0px;}
  
	#google_map iframe{position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
	margin:0px;
	padding:0px;}
	
	


/* ************************************** MOBILNA VERZIJA --- FOOTER ************************************** */
	
	/*.page_footer{text-align:center;}*/
	#page_footer_grid{display:none;}				/* ovo je da se desktop footer ne bi vidija na mobitelu */
	/*#page_footer_grid_2{text-align:center;
		background-color:pink;}*/
	#page_footer_text{text-align:center;}
	
	#page_footer_text_1{text-align:center;}
	#page_footer_text_2{text-align:center;}
	#page_footer_text_3{text-align:center;}
	
	.footer_img{text-align:center;					/* ovo zadnje dvoje je napravljeno kako bi se stvari u footeru prikazivale u redku kad je širina prozora maksimalna (na desktop kompjuterima), a u stupcima kad je širina minimalna (na mobilnim uređajima) */
		padding: 0px 5px 0px 5px;}
}




	
}