* {
box-sizing: border-box;
}

body {
font-family: Arial;
padding: 10px;
background: #f1f1f1;
}

.vise{
font-size: 14px;
padding: 8px;
border-radius: 5px;
border: 2px solid silver;
color: #ffffff;
background-image: linear-gradient(to bottom, #1377c0, #26567f);
}


.header {
display: contents;
padding: 5px;
text-align: center;
background: white;
}

.header h1{
display: inline;
}

.header p{
font-size: 18px;
font-weight: bold;
}



.usluge ul{
padding-inline-start: 0px;
}

.usluge li{
font-size: 18px;
margin-left: 10px;
background: #7cce6a;
list-style: square;
margin-bottom: 6px;
border: 1px solid;
padding: 4px;
}

.kolona-3{
width: 33.33%;
float: left;
}

.header h1 {
font-size: 40px;
color: #e0c21b;
text-shadow: 1px 1px black;
}

#telefonHeader{
font-size: 25px;
color: #caa100;
text-shadow: 1px 1px black;
}

.slika img{
width: 100%;
}

img{
max-width: 100%;
height: initial;
}

.desno{
 float: right;
}

.slika-levo{
float: left;
margin-right: 10px;
margin-bottom: 10px;
}


.slika-desno{
float: right;
margin-left: 10px;
margin-bottom: 10px;
}

.slika-centar{
margin-left: auto;
margin-right: auto;
width: 600px;
max-width: 100%;
margin-bottom: 10px;
}


figure{
width: 290px;
float: left;
background: #f0d06b;
padding: 5px;
max-width: 100%;
margin: 8px;
}

figure:hover{
background: #deba48;
}

figcaption{
text-align: center;
font-size: 16px;
font-weight: bold;
color: black;
}


.topnav {
overflow: hidden;
background-image: linear-gradient(to bottom, #02bd55, #055244);
}

.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
background-image: linear-gradient(to bottom, #02bd55, #055244);
border-right: 1px solid #1b3e5d;
}

.topnav a:hover {
background-image: linear-gradient(to bottom, #12a210, #0b5801);
}

.topnav img{
height: 24px;
float: right;
}

.topnav {
overflow: hidden;
width: 100%;
}

.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}

.topnav .dugme-menija {
display: none;
}


.leftcolumn {   
float: left;
width: 75%;
}

.rightcolumn {
float: left;
width: 25%;
background-color: #f1f1f1;
padding-left: 20px;
}

.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}

.card {
background-color: white;
padding: 20px;
margin-top: 20px;
min-height: 156px;
display: inline-block;
}

.row:after {
content: "";
display: table;
clear: both;
}

.footer {
padding: 20px;
text-align: center;
background: #ddd;
margin-top: 20px;
}

.jednapesma button {
padding: 10px;
margin-right: 10px;
width: 100px;
height: 100px;
color: #101010;
font-size: 63px;
border-radius: 50%;
background: url(slike/zlatna1.webp);
}

.dugme-poziv{
display: none;
}

@media screen and (max-width: 800px){
.leftcolumn,
.rightcolumn {   
width: 100%;
padding: 0;
}
}

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

.kolona-3{
width: 100%;
float: left;
}

.topnav a {
float: none;
width: 100%;
background-image: linear-gradient(to right, #a0d00d, #0eab3e);
border-bottom: 1px solid #1b3e5d;
}

.topnav a:not(:first-child) {
display: none;
}

.topnav.responsive{
position: relative;
}

.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}

.topnav.responsive a {
float: none;
display: block;
text-align: center;
}

.topnav .dugme-menija {
display:block;
}

.dugme-poziv{
width: 100%;
position: fixed;
bottom: 2px;
left: 0px;
right: 0px;
padding: 2px;
height: 42px;
display: block;
background: url(slike/zlatna1.webp);
}

.dugme-poziv a{
font-size: 27px;
color: white;
}

.dugme-poziv .poziv{
width: 46%;
background: green;
}

.dugme-poziv .viber{
width: 27%;
background: #7f1192;
}

.dugme-poziv .whatsapp{
width: 27%;
background: #2fc718;
}
}