*{box-sizing:border-box;}

body{font-family: 'Open Sans', 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: 'Open Sans';
	font-size:200%;
	padding:0px;
	margin:0px;}
	
button{font-family: 'Open Sans', sans-serif;
	font-weight:300;
	padding:0px;
	margin:0px;}
	
	
hr {
  width: 100%;
  height: 1px;
  border: none;
  background-color: #ccc;
  /*margin: 1rem 0;*/
  grid-column:2/3;
  grid-template-columns:minmax(280px,1200px);
  margin:40px 0px 40px 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:#004261;
	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;
	margin:0px;
	padding:0px;
	justify-content:center;
	text-align:center;
	background-image:url(images/foto_otvor.jpg);
	color:white;
	height:50vw;
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
	position:relative;}
	
.header_image_2{/*display:grid;*/
	grid-column:1/4;
	grid-template-columns:1fr minmax(280px,1200px) 1fr;
	margin:0px;
	padding:0px;
	justify-content:center;
	text-align:center;
	background-image:url(images/foto_otvor_2.jpg);
	color:white;
	height:50vw;
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
	position:relative;}
	
.header_image_3{/*display:grid;*/
	grid-column:1/4;
	grid-template-columns:1fr minmax(280px,1200px) 1fr;
	margin:0px;
	padding:0px;
	justify-content:center;
	text-align:center;
	background-image:url(images/foto_otvor_3.jpg);
	color:white;
	height:50vw;
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
	position:relative;}
	
.header_image_text{text-align:center;
	position:absolute;
	position: absolute;
    top: 0;
    left: 0;
    width:100%;    
    height:100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
	margin:0px;
	padding:0px;}
	
#header_image_text_1{font-size:3.5vw;
	font-weight:700;
	margin:0px;
	padding:0px;}
#header_image_text_2{font-size:2.5vw;
	font-weight:700;
	margin:0px 0px 20px 0px;
	padding:0px;}
#header_image_text_3{font-size:1.5vw;
	font-weight:500;
	margin:0px 0px 20px 0px;
	padding:0px;}
#header_image_text_4{font-size:2.5vw;
	font-weight:700;
	margin:0px;
	padding:0px;}
	
.o_nama_list{list-style-position:inside;
	margin:0px;
	padding:0px;}
	
.o_nama_image{justify-content:center;}
	

	
	
	
	/* PRIMARY ************************************************************************************************************ */

.primary{display:grid;
	grid-column:1/4;
	grid-template-columns:1fr minmax(280px,1200px) 1fr;
	padding:60px 0px 0px 0px;
	text-align:center;}
	
.main_text_intro{grid-column:2/3;
	grid-template-columns:minmax(280px,1200px);
	padding:0px;}

.main_text{grid-column:2/3;
	grid-template-columns:minmax(280px,1200px);
	padding:0px 0px 40px 0px;}
	
.article_text_top{font-size:30px;
	margin:0px;
	padding:0px;}
	
.content_columns{display:grid;
	grid-column:2/3;
	grid-template-columns:repeat(2,1fr);
	margin-bottom:0px;}
	
.content_columns_restoran{display:grid;
	grid-column:2/3;
	grid-template-columns:1fr;}
	
.main_article_text{padding:10%;
	text-align:left;
	align-items:center;
	justify-content:center;
	line-height:2;}
	
.main_article_popis{padding:10%;
	text-align:left;
	align-items:center;
	justify-content:center;
	line-height:2;}
	
.restoran_roko_text{text-align:center;}
	
.main_article_image{margin:0px;
	padding:0px;}
	
.o_nama_image{grid-column:2/3;
	justify-content:center;
	margin:0px 0px 30px 0px;}
	
	
/* KONTAKT FORMA*/

.main_text_contact{display:grid;
	grid-column:2/3;
	grid-template-columns:minmax(280px,1200px);
	padding:100px 0px 40px 0px;
	margin:0px;
	justify-content:center;
	text-align:center;}
	
.contact_form_container{/*grid-template-columns:2/3;*/
	margin:0%;
	padding:0%;
	justify-self:center;
	text-align:center;
	font-family: 'Open Sans', sans-serif;
	font-weight:400;
	font-size:16px;
	color:#232E41;
	width:70%;}
	
input{background-color:#ffffff;
	width:100%;
	padding:12px 16px;
	border:0px;
	border-radius:16px;
	border-color:#000000;
	margin-bottom:50px;}

#ime{background-color:#ffffff;
	width:100%;
	padding:12px 16px;
	border:0px;
	border-radius:12px;
	border:1px solid black;
	margin-bottom:50px;}
	
#e-mail{background-color:#ffffff;
	width:100%;
	padding:12px 16px;
	border:0px;
	border-radius:12px;
	border:1px solid black;
	margin-bottom:50px;}
	
#mtext{background-color:#ffffff;
	width:100%;
	padding:12px 16px;
	border:0px;
	border-radius:12px;
	border:1px solid black;
	margin-bottom:50px;}
	
#info{width:auto;}

#button_contact_form{background-color:#232E41;
	color:#F3F2EC;
	width:30%;}
	
#button_contact_form:hover{background-color:goldenrod;
	transition: 0.4s ease;
	color:#F3F2EC;
	cursor:pointer;}
	
	
	
	
	
	/* SECONDARY*********************************************************************************************************** */

.secondary{display:grid;
	grid-column:1/4;
	grid-template-columns:1fr minmax(280px,450px) 1fr;
	padding:60px 0px 0px 0px;
	text-align:center;
	justify-content:center;}
	
.content_columns_secondary{display:grid;
	grid-column:2/3;
	margin-bottom:0px;}
	
.main_article_popis{grid-column:2/3;
	grid-template-columns:minmax(280px,1200px);
	padding:0px 0px 40px 0px;
	justify-content:center;}
	
.main_article_popis p{text-align:center;}
	
#link_body{color:black;
	text-transform:lowercase;
	text-decoration:underline;}
	
#link_body:hover{color:goldenrod;
	transition: 0.6s ease;}
	
	
	
	/* PAGE FOOTER ******************************************************************************************************** */
	
.page_footer{*display:grid;
	grid-column:1/4;
	/*grid-template-columns:1fr minmax(280px,1200px) 1fr;*/
	background-color:#004261;
	padding:0px;
	margin-top:100px;
	justify-content:center;}
	
#page_footer_grid{display:grid;
	justify-content:center;}
	
#page_footer_grid_2{display:grid;
	padding:30px 0px 30px 0px;
	text-align:center;
	justify-content:center;}
	
.page_footer_text{display:inline-block;
	color:white;
	min-width:200px;
	justify-content:center;
	margin:20% 0% 20% 0%;}
	
#page_footer_text_1{text-align:center;}

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


	
	
	
	
	
	/* 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:#004261;}
	
	.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:#004261;}
		
	.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 */
	
	
	#header_image_text_1{font-size:30px;
		font-weight:700;
		margin:0px;
		padding:0px;}
	#header_image_text_2{font-size:20px;
		font-weight:700;
		margin:0px 0px 10px 0px;
		padding:0px;}
	#header_image_text_3{font-size:16px;
		font-weight:500;
		margin:0px 0px 10px 0px;
		padding:0px;}
	#header_image_text_4{font-size:20px;
		font-weight:700;
		margin:0px;
		padding:0px;}
	
	


/* ************************************** 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;}
}




	
}