@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Petit+Formal+Script);	/* font-family: 'Petit Formal Script', cursive;  */
@import url(https://fonts.googleapis.com/css?family=Raleway);				/*	font-family: 'Raleway', sans-serif;  */ 
/* ---- OSNOVNE POSTAVKE ---- */

*, 
*:before, 
*:after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

body {
	/* background-image:url(css/brela_background.jpg);  */
	background-size:cover;
	background-attachment: fixed;
  	/* background-color: #eee; */
  	font-family: 'Open Sans', sans-serif;
  	font-size: 100%;
  	color: #333;
}

ol, ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

p {
  margin: 0.3em 0;
  /*  line-height: 1.5;  */
}

::-moz-selection {
  background-color: #333;
  color: #eee;
}

::selection {
  background-color: #333;
  color: #eee;
}

/* *------- MOBILE BAR -------* */

.menu-toggle {
  display: none;
}

.mobile-bar {									/* ........ POZADINA HAMBURGERA ........... */
  z-index: 10;
  position: fixed;
  top: 0;
  left: 0;
  padding: 0 15px;		/* padding: 0 25px;  */
  width: 60px;			/* width: 100%; */
  height: 60px;
  background-color:rgba(255,255,255,0.5);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);  
}

/**------ MENU ICON ------ hamburger i krizic ---- **/

.menu-icon {
  display: block;
  position: relative;
  width: 25px;
  height: 100%;
  cursor: pointer;
  transition: transform 300ms ease;
  transition: transform 300ms ease, -webkit-transform 300ms ease;
}

.menu-icon > span {
  display: block;
  position: absolute;
  top: 55%;
  margin-top: -0.3em;
  width: 100%;
  height: 0.3em;
  border-radius: 1px;
  background-color: #88F;		/*  background-color: #eee;  */
  transition: transform 300ms ease;
  transition: transform 300ms ease, -webkit-transform 300ms ease;
}

.menu-icon > span:before, 
.menu-icon > span:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 1px;
  background-color: #88F;		/*  background-color: #eee;  */
  transition: transform 300ms ease;
  transition: transform 300ms ease, -webkit-transform 300ms ease;
}

.menu-icon > span:before {
  transform: translateY(-0.6em);
}

.menu-icon > span:after {
  transform: translateY(0.6em);
}

/**------  MENU ICON EFFECTS ------**/

.menu-toggle:checked + .mobile-bar .menu-icon {
  transform: rotate(45deg);
}

.menu-toggle:checked + .mobile-bar span:before,
.menu-toggle:checked + .mobile-bar span:after {
  transform: rotate(90deg);
}

/**---- Off-Canvas Effect ----**/

.menu-toggle:checked ~ .izbornik {
  transform: translateX(50%);
  transform: translate3d(50%, 0, 0);
}

.menu-toggle:checked ~ .container {
  transform: translateX(70%);
  transform: translate3d(70%, 0, 0);
}

/**---- Header ----**/

.izbornik {
  position: fixed;
  top: 0;
  left: -280px;   					/*  left: -35%;  */
  padding-top: 60px;
  width: 340px;						/* width: 70%;  */
  height: 100%;
  background-color:rgba(255,255,255,0.8);			/* background-color: #333;  */
  border-right: 2px solid #88F;				/* MOJE: desni rub izbornika plavi */
  /* overflow-y: scroll;          			ako je izbornik predug, dolazi klizna traka */
  color: #2222aa;						
	transition: transform 300ms ease;
	transition: transform 300ms ease, -webkit-transform 300ms ease;
}

.izbornik nav, 
.izbornik ul {
  height: 100%;
}

.izbornik li {
  border-bottom: 1px solid #88F;
  padding-left: 120px;  
  text-align: left;
}

.izbornik a {
  display: block;
  padding: 10px;					/*  padding: 20px;  */
  transition: background-color 300ms ease-in;
}

.izbornik a:hover, .selected{
  background-color: #88F;
  color: #fff;	
  font-weight:bold;
}


/**---- Container ----**/

.container {
  position: relative;
  top: 0px;
  padding: 0px;
  background-color: rgba(255,255,255,0.5);
	display: block;
	max-width: 800px; 
	margin-left: 0px;
	border-right: 2px solid #88F;
	border-left: 2px solid #88F;
  transition: transform 300ms ease;
  transition: transform 300ms ease, -webkit-transform 300ms ease;	
}

/**---- Content ----**/

.content {
  margin: 0 0;
  max-width: 800px;
}

/**---- Footer ----**/

.footer {
  margin-top: 20px;
  font-size: 0.9em;
  text-align: center;
}

.footer a {
  font-weight: 700;
}

.footer a:hover {
  text-decoration: underline;
}

/**---- Viewport >= 720px ----**/
@media (min-width: 800px) {
	.menu-toggle:checked ~ .header {
    transform: translateX(0);
    transform: translate3d(0, 0, 0);
  }

  .menu-toggle:checked ~ .container {
    transform: translateX(0);
    transform: translate3d(0, 0, 0);
  }
	
	.mobile-bar {
		display: none;
	}
	
	.izbornik {
    z-index: 5;
    position: fixed;			/* position: relative; */ 
    left: 0;
    padding-top: 0;
    width: 200px;				/* width: 100%; */
    height: auto;
    overflow: auto;
	float:left;
	background-color:rgba(255,255,255,0.7);   /* DODANO: bijela pozadina izbornika - monitoru */
  }

  .izbornik li {
    display: block; 
    margin-right: 0px; 					/* margin-right: -6px; */
	border-bottom: 1px solid #88F;		/*  border-bottom: 1px solid #eee;  */
	padding-left: 10px;
	text-align: left;
  }

  .izbornik a {
  	display: block;			padding: 10px;					/* padding: 12px 45px; */
  }
	
	.container {
    top: 0;			margin-left: 200px;
  }
  
  .gallery img{
	width:auto !important;		height:auto !important;
}
  
}

/* ------------------------------ STARI KOD ------------------------------ */

/*
nav{
  display: block;		position: fixed;
  width: 180px;			height:99%;
  margin: 2px auto 0;	padding: 0;
  border-radius:7px;
  box-shadow: 4px 4px 8px 1px rgba(0,0,0,0.2);  
  border-right: 2px solid #88F;
}

nav ul { list-style:none; }

nav ul li a {
  font-size:14px;
  color:#2222aa;
  font-family: 'Arial', sans-serif;
  text-decoration:none;
  text-shadow: 1px 1px 1px #fff; 
}

nav ul li img { float:left; margin:-2px 0 0 0;}

nav ul li:hover, .selected{
  border-left:5px solid #ed6b3a;
  border-right:5px solid #ed6b3a; 
}
*/ 

header{
    margin-left:0px;	max-width:800px; 
    display: block;		border-right: 2px solid #88F;
}
article{
	display: block;		position: relative;
	max-width:800px; 	margin-left:0px;
	border-right: 2px solid #88F;
    /* background-color:rgba(240,240,255,0.5); */
}

article h1{
	padding:5px 12px;	margin-top:-4px;
	font-size:18px;		color:#5252b1;
  	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  	text-decoration:none;
  	background-color:#FCF;
	border-bottom: 2px solid #88F;
}

article p, article h2{
	/* display: block; */
	padding:5px 12px;
	font-size:12px;		color: #006;
  	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  	text-decoration:none;
}

.opis{
	display: block;		padding:4px 10px;
	font-size:12px;		color: #006;
  	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  	text-decoration:none;	text-align:center;
	margin-left: auto; 		margin-right: auto;
}
.opis img{ padding:1px; }

.gallery{
	display: block;  
}

  .gallery img{
	display:block;		padding:2px;		margin:auto;	 	background-color: #888;
	max-width:100%;	height:auto;
}

/* ................... NASLOVNICA ..................... */ 
.ponuda{
	display: block; 	float: left;
	margin-left: 4px; 	margin-right: 4px;	padding: 5px;
	text-align:center;
    background-color:rgba(255,255,255,0.25);
	/* border-radius: 0px 0px 20px 0px; 
  	box-shadow: 4px 4px 8px 1px rgba(0,0,255,0.5); */
}
.vlasnik{
	font-family: 'Petit Formal Script', cursive;
	font-size: 1.5rem;	font-weight:bold;
}
.adresa{
	font-family: 'Arial', cursive;		font-size: 1rem;
}

/* ................... CJENIK - TABLICA ..................... */ 
table{
	text-align:center;	border-width:0px;
	margin-left: auto; 		margin-right: auto;	
	padding: 1px;	border-spacing: 1px;
	font-family: 'Raleway', sans-serif;		font-size:0.9em;
}
table td{
	padding-top:5px;	padding-bottom:5px;		padding-left:3px;	padding-right:3px;
	border-radius: 7px;	background-color:rgba(255,255,255,0.5);		
	border-color: rgba(0,190,255,0.6);		border-width: 1px; border-style:outset;
}

table .naslov{ font-weight: bold;}

/* ................... KONTAKT ..................... */ 
.kontakt{
	display: block;	width: 45%;	float:left;
	text-align:center;	line-height:150%;	margin: 5px;
	font-family: 'Raleway', sans-serif;		font-size:0.9rem;
	border-radius: 7px;	background-color:rgba(255,255,255,0.5);	box-shadow: 2px 2px 4px 1px rgba(0,0,255,0.3);
}
.domacin{ font-style: italic; font-weight: bold; font-size:1.1rem; }