Definicije side navigation menu lijevo za kartice kuc  -- >

body {
    font-family: "Lato", sans-serif;
}

/* Fixed sidenav, full height */
.sidenav {
	height: 457px;
	width: 155px;
	position: relative;
	z-index: 1;
	top: 3px;
	left: 15px;
	background-color: #ffe7d7;
	overflow-x: hidden;
	padding-top: 1px;
	border: 10%;
	outline: 50%;
	transition: 0.4s;
	box-shadow: 0px 16px 24px 0px rgba(0,0,0,0.4);
	visibility: visible;

}

/* Style the sidenav links and the dropdown button */
.sidenav a, .dropdown-btn {
    padding: 6px 8px 6px 8px;
    text-decoration: none;
    font-size: 14px;
    color: #818181; 
    display: block;
/*    border: none; */
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
/*    outline: none; */
    border: 10%;
    outline: 50%;
    transition: 0.4s;
    box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.4);
    z-index: 1;
}

/* On mouse-over */
.sidenav a:hover, .dropdown-btn:hover {
    color: #0000ff;
	-ms-transform: scale(1.05); /* IE 9 */
    -webkit-transform: scale(1.05); /* Safari 3-8 */
    transform: scale(1.05); 
}

/* Main content */
.main {
    margin-left: 170px; /* Same as the width of the sidenav */
    font-size: 16px; /* Increased text to enable scrolling */
    padding: 0px 10px;
}

/* Add an active class to the active dropdown button */
.active {
    background-color: #bbb;
    color: white;
}

/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container {
    display: yes;
    background-color: #fefefe;
    padding-left: 4px;
    padding-right: 4px;
}

/* Optional: Style the caret down icon */
.fa-caret-down {
    float: right;
    padding-right: 8px;
}

/* Some media queries for responsiveness */
@media screen and (max-height: 460px) {
    .sidenav {padding-top: 1px;}
    .sidenav a {font-size: 16px;}
}
 
 
/* definicije kartice kuca */
* {
  box-sizing: border-box;
}

body {
  background-color: #f1f1f1;
  padding: 20px;
  font-family: Arial;
	width: 100%;
}

/* Center website */
.main1 {
  max-width: 830px;
  margin: auto;
}

.row {
  margin: -4px -6px;
}

/* Add padding BETWEEN each column
razmak izmedju kartica - redova i rubova unutar tabele */
.row,
.row > .column {
  padding: 7px;
}

/* Create four equal columns that floats next to each other */
.column {
  float: left;
  width: 100%;
}

.column:hover {
  color: #4CAF50;
}

/* Clear floats after rows */ 
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Content i card */
.content {
  background-color: #eaeaea;
  padding: 10px;
  box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2);
  transition: 0.3s;
  border-radius: 4px;
  border: 2px solid #eaeaea;
}

.content:hover {
  background-color: #f0f0f0;
  padding: 10px;
  box-shadow: 2px 14px 14px 2px rgba(0,0,0,0.4);
  transition: 0.3s;
  border: 2px solid #999999;
  border-radius: 4px;
}
.card {
  background-color: #eaeaea;
  padding: 10px;
  box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2);
  transition: 0.3s;
  border-radius: 4px;
  border: 2px solid #eaeaea;
}

.card:hover {
  background-color: #f0f0f0;
  padding: 10px;
  box-shadow: 2px 14px 14px 2px rgba(0,0,0,0.4);
  transition: 0.3s;
  border-radius: 4px;
  border: 2px solid #999999;
}

.button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: white;
  background-color: #ccc;
  text-align: center;
  cursor: pointer;
  width: 100%;
  box-shadow: 8px 8px 8px 0px rgba(0, 0, 0, 0.2);
}
.button:hover {
  background-color: #aaa;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 650px) {
  .column {
    width: 100%;
  }
}
 
/*

 Definicije kartice kuca kroz <style> 
<meta name="viewport" c* {

.main1 {
  max-width: 840px;
  margin: auto;
}

.row {
  margin: -4px -6px;
}

/* Add padding BETWEEN each column * /
.row,
.row > .column {
  padding: 10px;
}

/* Create four equal columns that floats next to each other * /
.column {
  float: left;
  width: 25%;
}

.column:hover {
  color: #4CAF50;
}

/* Clear floats after rows * / 
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Content i card * /
.content {
  background-color: #eaeaea;
  padding: 10px;
  box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2);
  transition: 0.3s;
  border-radius: 4px;
  border: 2px solid #eaeaea;
}

.content:hover {
  background-color: #f0f0f0;
  padding: 10px;
  box-shadow: 2px 14px 14px 2px rgba(0,0,0,0.4);
  transition: 0.3s;
  border: 2px solid #999999;
  border-radius: 4px;
}
.card {
  background-color: #eaeaea;
  padding: 10px;
  box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2);
  t@media screen and (max-width: 800px) {
  .column {
    width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 650px) {
  .column {
    width: 100%;
  }
}



/* natpis naziva i tipa smjestaja */

.kat {
    transition: 0.3s;
    transform: scale(1.00); 
} 
.kat:hover {
	transition: 0.3s;
    transform: scale(1.40); 
}

.zuto1 {
	background: #FFFF99;
    padding: 1px 1px 1px 1px; 
	box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.4); 
    transition: 0.3s;
  } 
  
.zuto1:hover {
	background: #FFFF99;
    padding: 2px 2px 2px 2px;
	color: #9999FF;
	box-shadow: 1px 0px 2px 0px rgba(0,0,0,0.4);
	  transition: 0.3s;
 /*   width: 105%;  */
}
.zuto:hover {
	background: #FFFF99;
    padding: 3px 1px 1px 6px;
	color: #9999FF;
	box-shadow: 2px 0px 6px 0px rgba(0,0,0,0.4);	
  }
.zuto {
	background: #FFFF99;
    padding: 3px 1px 1px 3px; 
	box-shadow: 2px 0px 6px 0px rgba(0,0,0,0.4); 
  }   
  
.bilo {
  background: #fff;
  padding: 1px 1px 1px 1px;
  box-shadow: 2px 4px 6px 0px rgba(0,0,0,0.4);
  } 
  
.slika {
  padding: 0px 0px 0px 0px;  
  box-shadow: 6px 6px 6px 0px rgba(0,0,0,0.4); 
/*  border: 2px solid #999999;  
  width: 100%; 
  padding: 1px;  */
  box-sizing: border-box;  
  outline-style: solid;
  outline-color:yellow;
  outline-width: 1px;
  	  transition: 0.3s;
 } 
 .slika:hover {
  padding: 0px 0px 0px 0px;  
  box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.4); 
/*  border: 2px solid #999999;  
  width: 100%; 
  padding: 1px;  */
  box-sizing: border-box;
  outline-style: solid;
  outline-color:yellow;
  outline-width: 2px;
  	  transition: 0.3s;
/*  width: 99%;
  high: 99%; */
 } 
 
.btn-group button {
  background-color: #FFF0D0; /* Green background */
  border: 0px solid brown; /* Green border */
  color: white; /* White text */
  padding: 10px 24px; /* Some padding */
  cursor: pointer; /* Pointer/hand icon */
  width: 50%; /* Set a width if needed */
  display: block; /* Make the buttons appear below each other */
  	font-size: 14px;
	box-shadow: 6px 8px 16px 0px rgba(0,0,0,0.2);
	border-radius: 4px 4px 4px 4px;
}

.btn-group button:not(:last-child) {
/*  border-bottom: none; /* Prevent double borders */
}

/* Add a background color on hover */
.btn-group button:hover {
  background-color: #FFF7E5;
}

.dropbtn1 {
  background-color: #ff99ff;
  color: white;
  z-index: 1;
  padding: 4px 10px;
  font-size: 12px;
  border: none;
  	border-radius: 3px 0px 3px 3px;
    transition: 0.5s;
	box-shadow: -6px 0px 6px 0px rgba(0,0,0,0.2); 
}
.dropup {
  position: fix;
  display: inline-block;
  transition: 0.5s;
}
.dropup-content {
  display: none;
  position: fix;
  background-color: #f1f1f1;
  min-width: 60px;
  bottom: 50px;
  z-index: 1;
 font-size: 12px;
border-radius: 3px 3px 3px 3px;
transition: 0.5s;
box-shadow: -8px 8px 8px 0px rgba(0,0,0,0.2);		  
}
.dropup-content a {
  color: blue;
  padding: 4px 6px;
  text-decoration: none;
  display: block;
  transition: 0.5s;
}
.dropup-content a:hover {
background-color: #ccc;
border-radius: 3px 3px 3px 3px;
 transition: 0.5s;
}
.dropup:hover .dropup-content {
  display: block;
  border-radius: 3px 3px 3px 3px;
transition: 0.5s;
}
.dropup:hover .dropbtn1 {
  background-color: #2980B9;
  border-radius: 3px 3px 3px 3px;
transition: 0.5s;
}