@import url(https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700);
html, body{
  margin: 0;
  padding: 0;
}
body{
  background-color: #E4E5E5;
}

               /*PLAVA TRAKA*/

#plavatraka{
  width: 100%;
  height: 70px;
  background-color: #04A2D7;
 }


                 /*NA POCETNU*/

.napocetnu{
  position: relative;
  top: 5px;
  background-color: #E88569;
  padding: 1px 6px;
  font-size: 30px;
  border-radius: 8%;
  cursor: pointer;
}



                   /*CRNI MENI*/

.crnimenikontejner {
  display: inline-block;
  position: relative;
}
.crnimenidugme {
  background-color: black;
  color: white;
  padding: 10px 0;
  border-radius: 8%;
}
.crnimeni-unutra {
  display: none;
  position: absolute;
  top: 40px;
  min-width: 160px;
  background-color: #000;
  box-shadow: 0 8px 16px 0 #000;
  z-index: 1000;
}
.crnimeni-unutra a {
  display: block;
  padding: 12px 16px;
  color: #fff;
  text-decoration: none;
  border: thin solid #fff;
}
.crnimeni-unutra button {
  background-color: #C7DFE5;
}
.crnimenikontejner:hover .crnimeni-unutra { display: block; }
.crnimenidugme:hover,
.crnimeni-unutra a:hover { opacity: 0.6; }

             /*KRAJ CRNOG MENIJA*/

#digital-clock {
  display: none;
 /*background-color: #66ffff;*/
 width: 120px;
 height: 30px;
 /*margin: auto;*/
 padding-top: 5px;
 padding-bottom: 5px;
 font-family: Orbitron;
 letter-spacing: 0;
 font-size: 30px;
 text-align: center;
 font-weight: bold;
 box-shadow: /*4px 4px 4px 8px rgba(0, 0, 0, 0.2),*/ 0 6px 6px 0 rgba(0, 0, 0, 0.69);
}

             /*KONTAKT*/

/* The Modal (background) */
.Kmodal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 50px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed*/ 
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.Kmodal legend{
  font-size: 30px;
}
/* Modal Content */
.Kmodal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: min(80%, 600px);
}
/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 30px;
  font-weight: bold;
  position: relative;
  bottom: 20px;
}
.close:hover,
.close:focus {
  color: red;
  text-decoration: none;
  cursor: pointer;
}
#KontaktModal input[type=text],
#KontaktModal input[type=email],
#KontaktModal textarea {
  padding: 6px 0px;
  width: 100%;
  display: inline-block;
  background: #f1f1f1;
  border: solid;
  border-width: thin;
}
#KontaktModal button[type=submit], button[type=reset]{
  padding: 10px 0px;
  width: 80px;
  background-color: #1D94FC;
  color: white;
  cursor: pointer;
}
button[type=reset]:hover, button[type=submit]:hover {
  opacity: 0.6;
} 
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}
@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)} 
  to {-webkit-transform: scale(1)}
} 


.levitocak{
  display: none;
}
.desnitocak{
  display: none;
}
#digital-clock{
  position: absolute;
  left: 50%;
} 


        /*NASLOV*/

#naslov {
  background: url('../../img/reke/vlasina/vlasina_pocetna.jpg') no-repeat;
  background-size: cover;   /* bolje od 100%, prilagođava se ekranu */
  background-position: center 8%;   /* pomeraj nadole za 10% visine slike */
  width: 100%;
  height: 250px; /* ili koliko ti treba */
  position: relative;
}

.logo {
  position: absolute;
  top: 70px;
  left: 5px;
}
.logo img {
  width: 100px;   /* smanji širinu logotipa */
  height: auto;   /* visina se prilagođava proporcionalno */
}

.glow {
  position: absolute;
  top: 40%;               /* vertikalno centriranje */
  left: 50%;              /* horizontalno centriranje */
  transform: translate(-50%, -50%);
  text-align: center;
}

    /*IZVOR SLIKE*/

.slika-box {
  position: relative;
  display: inline-block;
}

.slika-box img {
  width: 100%;
  height: auto;
}

.izvor-slike {
  position: absolute;
  bottom: 20px;     /* gornji desni ugao */
  right: 10px;
  font-size: 12px;
  color: rgba(255,255,255,0.8); /* bela, poluprozirna */
  font-style: italic;
  background: none; /* bez pozadine */
  padding: 0;
  text-shadow: 1px 1px 2px #000; /* lagana senka da se vidi na slici */
}
.izvor-slike a {
  color: #0472d9;
  text-decoration: none;
}

    /*IZVOR SLIKE GALERIJA*/

.responsive{
  position: relative; /* kontejner za pozicioniranje watermarka */
  display: inline-block;
}
.gallery img {
  width: 100%;
  height: auto;
}
/* Hover caption ostaje vezan samo za .gallery a::after */
.gallery a {
  position: relative;
  display: inline-block;
}
/* Watermark sada vezan za spoljašnji kontejner */
.izvor-slike-galerija {
  position: absolute;
  top: 30px;
  right: 20px;
  font-size: 12px;
  font-style: italic;
  color: rgba(255,255,255,0.85);
  text-shadow: 1px 1px 2px #000;
  background: none;
  padding: 0;
}
.izvor-slike-galerija a {
  color: #ffcc00;
  text-decoration: none;
}

.izvor-slike-galerija a:hover {
  text-decoration: underline;
}

         /*LEGENDA DUGME*/

.legendakontejner{
  display: inline-block;
  position: relative;
  float: right;
  margin-right: 10px;
  z-index: 1;
}

.legendadugme {
  color: white;
  padding: 10px 20px;
  font-size: 15px;
  border-radius: 15px 15px 15px 15px;
  background: linear-gradient(to right, #f44336, #00BFFF);
}

.legenda-unutra {
  display: none;
  position: absolute;
  top: 40px;
  right: 0px;
  min-width: 160px;
  background-color: #0099cc; 
  z-index: 1000;
}
.legenda-unutra a {
  display: block;
  padding: 12px 39px;
  color: #fff;
  text-decoration: none;
  border: outset;
}
.legendakontejner:hover .legenda-unutra { display: block; }
.legendadugme:hover{
  background: linear-gradient(to right, #00BFFF, #f44336);
  transform: scale(1.03);
}
.legenda-unutra a:hover { 
  opacity: 0.6;
  transform: scale(1.03); 
}


        /*SKROL*/

#skrol {
  width: 100%;
  height: 25px;
  background-color: #A9A7A7;
  display: flex;
  margin-top: -15px;
}

#leviskrol, #desniskrol {
  width: 48%;
  overflow: hidden;
  position: relative;
}

#srednjiskrol {
  width: 4%;
  background-color: #A9A7A7;
}

.scroll-text {
  position: absolute;
  white-space: nowrap;
  font-size: 18px;
  font-weight: bold;
  font-style: italic;
  color: black;
  animation: scrollLeft 20s linear infinite;
}

/* Levi deo sporije */
#leviskrol .scroll-text {
  animation-duration: 25s;
}

/* Desni deo brže */
#desniskrol .scroll-text {
  animation-duration: 15s;
}

@keyframes scrollLeft {
  0%   { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}
            /*KRAJ SKROLA*/ 

            /*KAFANA, VRTIC*/


.moj-reklamni-blok {
  width: 100%;
  height: 1cm;
  background-color: #d9edf7;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.moj-reklamni-item {
  width: 5cm;
  height: 100%;
  background-size: 210%;
  background-position: center 80%;
  background-repeat: no-repeat;
  display: block;
  position: relative;
  cursor: pointer;
  animation: blink 2s infinite; /* animacija u mirovanju */
}

/* definicija animacije */
@keyframes blink {
  0%   { filter: brightness(100%); }
  50%  { filter: brightness(120%); } /* malo svetlije */
  100% { filter: brightness(100%); }
}

.moj-reklamni-item:hover {
  background-size: 240%; /* zumira sliku na hover */
}

.moj-reklamni-item.kafana {
  background-image: url("../../img/reklama/kafana.jpg");
}

.moj-reklamni-item.vrtic {
  background-image: url("../../img/reklama/vrtic.jpg");
}

/* Stilizovani tooltip */
.moj-reklamni-item::after {
  content: attr(data-tooltip);    /* tekst iz HTML atributa */
  position: absolute;
  bottom: 120%;                   /* iznad elementa */
  left: 50%;
  transform: translateX(-50%);
  background: #f9f9f9;            /* svetla pozadina */
  color: #333;                    /* tamna slova */
  padding: 8px 12px;              /* unutrašnji razmak */
  border-radius: 6px;
  border: 1px solid #ccc;         /* diskretna ivica */
  white-space: nowrap;
  opacity: 0;                     /* skriven dok nije hover */
  pointer-events: none;
  transition: opacity 0.3s ease;
  font-size: 18px;                /* krupniji tekst */
  font-weight: bold;              /* naglašeno */
  box-shadow: 0 2px 6px rgba(0,0,0,0.2); /* blaga senka */
  z-index: 10;                    /* da bude iznad svega */
}

.moj-reklamni-item:hover::after {
  opacity: 1;                     /* prikazuje se na hover */
}


            /*SPISAK*/

.spisak {
  height: 255px;
  background-color: #D3D3D3;
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  overflow-y: hidden;
  border-radius: 12px;
  box-shadow: 8px 8px 16px rgba(0,0,0,0.7);
  scroll-behavior: smooth;
        /* buffer na početku, kraju i odozgo */
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
}
.box{
  flex: 0 0 auto; /* sprečava sabijanje box-ova */
  width: 180px;
  height: 220px;
  margin-right: 15px;   /* razmak između stavki */
  text-align: center;
  border: 2px solid #000;
  border-radius: 8px;
  background-color: #999;
}
.box img {
  width: 90%;
  height: auto;
  border-radius: 6px;
  border: 3px solid #ccc;
  box-shadow: 8px 12px 12px #444;
}
.box a {
  display: block;
  color: #fff;
  font-family: sans-serif;
  text-decoration: none;
  margin-top: 5px;
}
.box img:hover {
  border: solid black;
}
@keyframes mymove {
  0% { right: 0; background-color: #D3D3D3; }
  20% {background-color:  #D3D3D3}
  40% {background-color:  #A9A9A9}
  60% {background-color:  #808080}  
  80% {background-color:  #696969; right: 215px;}
  100%{ right: 0;}
}

          /*KLIZAC*/

.spisak::-webkit-scrollbar{
  width:18px;
}
.spisak::-webkit-scrollbar-thumb{
  border-radius: 10px;
  background-color: #2196F3;
  box-shadow: inset 0 0 6px rgba(0,0,0,.5);
  border: 3px solid black;
}
.spisak::-webkit-scrollbar-track{
  border-radius: 10px;
  background-image: linear-gradient(to bottom, #FEFE9A, #717070);
  box-shadow: inset 0 0 6px rgba(0,0,0,.4);
}

/* Handle on hover */
.spisak::-webkit-scrollbar-thumb:hover {
  background: #555;
}

            /*NASLOV*/


/* Odlomak na koji se primjenjuje animacija */
.element {
  height: 60px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: 
    menjaj-boje 3s ease-in-out infinite alternate,
    kretanje 5s linear infinite alternate; 
}

@keyframes menjaj-boje {
  0%, 100% {
    background-color: #858585;
  }
  10% {
    background-color: #8f8f8f;
  }
  20% {
    background-color: #999999;
  }
  30% {
    background-color: #a2a2a2;
  }
  40% {
    background-color: #acacac;
  }  
  50% {
    background-color: #b6b6b6;
  }
  60% {
    background-color: #c0c0c0;
  }
  70% {
    background-color: #cacaca;
  }
   80% {
    background-color: #d3d3d3;
  }
   90% {
    background-color: #dddddd;
  }
   100% {
    background-color: #dddddd;
  }       
}

            /*SADRZAJ*/

.sadrzaj{
  background-color: #DCDCDC;
  width: 95%;
  height: auto;
  margin: 20px 2.5% 20px 2.5%;
  padding-top: 5px;
}
.sadrzaj h2{
  font-family: comic sans;
  font-weight: bold;
  color: white;
  text-shadow: black 2px 2px 2px;
  text-align: center;
}
.legenda h3{
  font-size: 25px;
  font-family: comic sans;
  font-weight: bold;
  color: white;
  text-shadow: black 0px 0px 25px;
  text-align: center;
}
.istorijska-osnova h3{
  font-size: 25px;
  font-family: comic sans;
  font-weight: bold;
  color: white;
  text-shadow: black 0px 0px 12px;
  text-align: center;
}
.sadrzaj blockquote{
  font-size: 18px;
  line-height: 1.6;
  text-align: justify;
}

.gallery{
  border: 3px solid #ccc;
}

.gallery:hover {
  border: solid red;
}
.gallery img{
  width: 100%;
  height: auto;
  box-shadow: 8px 12px 12px #444;
}
.linija hr {
  width: 70%;
  margin: 0 auto;
  margin-bottom: 15px;          /* centriranje */
  border: none;            /* ukloni default */
  border: 1px solid black; /* crvena linija */
}
.linijaglavna hr {
  width: 80%;
  margin: 0 auto;
  border: none;            /* ukloni default */
  border: 3px solid black; /* crvena linija */
}
.kordinate legend{
  font-weight: bold;
}
.rastojanje legend{
  font-weight: bold;
}
fieldset.kordinate, fieldset.rastojanje {
  background-color: #FCCDC2;
}
.responsive{
  padding: 10px 6px;
  width: 100%;
  float: left;
  box-sizing: border-box;
}
.komentar-box {
  background-color: #f9f9f9;
  border-left: 4px solid #007BFF;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
}

.prikazi-dugme {
  margin-top: 5px;
  background-color: red;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 3px;
}

.dugme-komentari {
  display: inline-block;
  margin-top: 10px;
  margin-bottom: 15px;
  padding: 8px 16px;
  background: linear-gradient(to right, #007BFF, #00BFFF);
  color: white;
  font-weight: bold;
  border: none;
  border-radius: 6px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
}

.dugme-komentari:hover {
  background: linear-gradient(to right, #0056b3, #0099cc);
  transform: scale(1.03);
}
.naslov-komentari {
  border: 2px solid #007BFF;
  background-color: #f0f8ff;
  padding: 10px 15px;
  border-radius: 8px;
  margin-top: 20px;
  margin-bottom: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.naslov-komentari h4 {
  margin: 0;
  color: #007BFF;
  font-weight: bold;
}

     /* TITLE ZA GALERIJU */

.gallery a,
.gallery1 a {
  position: relative;
  display: inline-block;
}

.gallery a::after,
.gallery1 a::after {
  content: attr(title);
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px) scale(0.95);
  background: rgba(0,0,0,0.85);
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  margin-top: 8px;
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.gallery a::before,
.gallery1 a::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(5px) scale(0.95);
  border-width: 6px;
  border-style: solid;
  border-color: rgba(0,0,0,0.85) transparent transparent transparent;
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.gallery a:hover::after,
.gallery a:hover::before,
.gallery1 a:hover::after,
.gallery1 a:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(-5px) scale(1);
}


                /*FUTER*/

.futer {
  background-image: linear-gradient(to bottom, #F9FAFA,#c7c7c7,#F9FAFA);
  padding: 30px 20px;
  text-align: center;
  font-size: 14px;
  color: #333;
  border-top: 1px solid #ccc;
}

.futer-opis p {
  margin-bottom: 15px;
  font-weight: bold;
}

.futer-navigacija a {
  margin: 0 10px;
  color: #333;
  text-decoration: none;
}

.futer-navigacija a:hover {
  text-decoration: underline;
}

.futer-kontakt p {
  margin: 5px 0;
}

.futer-ikonice a {
  margin: 0 8px;
  font-size: 20px;
  color: #333;
}

.futer-ikonice a:hover {
  color: #0077cc;
}

.futer-copyright {
  margin-top: 20px;
  font-size: 13px;
  color: #666;
}
.admin-dugme {
  margin-top: 10px;
  margin-bottom: 15px; /* razmak ispod dugmeta */
  padding: 10px 20px;
  background-color: #0077cc;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: 0.3s ease;
}
.futer-ikonice {
  margin-top: 10px; /* dodatni razmak iznad ikonica */
}
.admin-dugme:hover {
  background-color: #005fa3;
  transform: scale(1.03);
}

                      /*DUGME IDI GORE*/

#dugmezagore {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: darkred;
  color: white;
  cursor: pointer;
  padding: 11px;
  border-radius: 4px;
  box-shadow: 7px 7px 10px #444;
}

#dugmezagore:hover {
  background-color: blue;
}




           /*DUGME ZA KOMENTAR*/

#mySidenav p {
  position: fixed;
  left: -100px;
  transition: 1s;
  padding: 10px 10px 10px 45px;
  width: 150px;
  text-decoration: none;
  font-size: 20px;
  color: white;
  border-radius: 0 30px 5px 0;
}
#mySidenav button{
  position: absolute;
  margin-top: -7px;
  margin-left: -25px;
  padding: 0 20px 0 20px;
  background-color: black;
  color: white;
  font-size: 28px;
  cursor: pointer;
}

#mySidenav p:hover {
  left: 0;
  background-color: blue;
}

#projects {
  top: 50px;
  background-color: #f44336;
}




/* CRNA STRANICA ZA KOMENTAR */
body {
  font-family: 'Lato', sans-serif;
}

.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0, 0.9);
  overflow-x: hidden;
  transition: 1.5s;
}

.overlay-content {
  position: relative;
  top: 10%;
  left: 10%;
  width: 80%;
  height: 85%;
  background-image: linear-gradient(to top, #717070, #F9FAFA);
}
.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block;
}
.overlay a:hover,
.overlay a:focus {
  color: #f1f1f1;
}
.overlay .closebtn {
  position: absolute;
  top: -15px;
  right: 5px;
  font-size: 60px;
  text-decoration: none;
}
.poruka{
  color: red;
  position: relative;
  top: 30px;
}

/* KOMENTAR */
.overlay-content input[type=text],
.overlay-content input[type=email],
.overlay-content textarea {
  padding: 6px 0px;
  width: 100%;
  display: inline-block;
  border: solid;
  border-width: thin;
  background-color: white;
}

.overlay-content button[type=submit],
.overlay-content button[type=reset] {
  padding: 10px 0px;
  width: 80px;
  background-color: #1D94FC;
  color: white;
  cursor: pointer;
  border-radius: 6px;
}

button[type=reset]:hover,
button[type=submit]:hover {
  opacity: 0.6;
}

.komentar-admin {
  font-size: 14px;
  font-style: italic;
  line-height: 1.5;
  color: #333;
  font-family: Arial, sans-serif;
  margin-left: 20px;
  background: #eef;
  padding: 8px;
}

.komentar-admin strong {
  color: #0055aa;
}

.komentar-admin em {
  font-size: 14px;
  color: #666;
}

.komentar-korisnik {
  background: #f9f9f9;
  font-size: 14px; /* sitniji tekst */
  line-height: 1.4;
  color: #444;
  font-family: Arial, sans-serif;
}

.komentar-admin::before {
  content: "👑 Admin odgovor:";
  display: block;
  font-weight: bold;
  color: #0055aa;
  margin-bottom: 4px;
}

img:hover {
  box-shadow: 0 0 5px rgba(0,0,0,0.5);
  cursor: pointer;
}

.slika-zoom {
  position: relative;
  display: inline-block;
}

.slika-zoom::after {
  content: "🔍";
  position: absolute;
  bottom: 5px;
  right: 5px;
  font-size: 18px;
  background: rgba(0,0,0,0.6);
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.slika-zoom:hover::after {
  opacity: 1;
}


         /* LINKOVI */

/* Osnovni stil za sve linkove */
a {
  color: #015a91;          /* osnovna boja linka */
  text-decoration: none;   /* uklanja podvlačenje */
  font-weight: bold;       /* svi linkovi boldovani */
}

/* Stil kada korisnik pređe mišem preko linka */
a:hover {
  color: #e74c3c;          /* promena boje na hover */
  text-decoration: underline; /* podvlačenje na hover */
}


/* Osnovni stilovi – mobilni uređaji (do ~320px) */
#Logmenikoment, #Regmenikoment {
  position: static;
  display: block;
  margin: 10px auto;
  background-color: blue;
  color: white;
  padding: 8px;
  border-radius: 8%;
  text-align: center;
  cursor: pointer;
}
.naslovi{
  font-family: "comic sans MS";
  font-style: italic;
  text-shadow: white 4px 2px 2px;
  padding: 70px 0 30px 0;
}
.glow{
  text-align: center;
  font-size: 25px;
}
#Logmenikoment:hover, #Regmenikoment:hover {
  opacity: 0.6;
}

/* Od 355px naviše */
@media (min-width: 355px) {
  #Logmenikoment {
    position: absolute;
    top: 15%;
    right: 52%;
  }
  #Regmenikoment {
    position: absolute;
    top: 15%;
    right: 12%;
  }
  .crnimenidugme {
    padding: 10px 5px;
  }
  .naslovi {
    font-size: 13px;
  }
}



           @media screen and (min-width: 355px) {


.crnimenidugme {
  padding: 10px 5px;
}
#naslov{
  position: relative;
}
.naslovi{
  font-size: 13px;
}
#skrol{
  position: relative;
}
#Logmenikoment {
  position: absolute;
  top: 15%;
  right: 52%;
}
#Regmenikoment {
  position: absolute;
  top: 15%;
  right: 12%;
}
}

           @media screen and (min-width: 385px) {            


.crnimenidugme {
  padding: 10px 10px;
}
.naslovi{
  font-size: 14px;
}
}


           @media screen and (min-width: 420px) {


.crnimenidugme {
  margin-left: 12px;
}
.naslovi{
  font-size: 18px;
}
#Logmenikoment {
  position: absolute;
  top: 15%;
  right: 53%;
}

#Regmenikoment {
  position: absolute;
  top: 15%;
  right: 13%;
}
}



           @media screen and (min-width: 480px) {


 .glow {
    font-size: 30px;
  }
.desnitocak{
  display: inline;
  float: right;
  margin-right: 10px;
}
.naslovi{
  font-size: 20px;
}
#Logmenikoment {
  position: absolute;
  top: 15%;
  right: 54%;
}
#Regmenikoment {
  position: absolute;
  top: 15%;
  right: 14%;
}
}

         @media screen and (min-width: 554px) {

.overlay-content {
  position: relative;
  top: 3%;
  left: 10%;
  width: 80%;
  height: 93%;
 background-image: linear-gradient(to top, #717070, #F9FAFA);
}
#Logmenikoment {
  position: absolute;
  top: 15%;
  right: 55%;
}
#Regmenikoment {
  position: absolute;
  top: 15%;
  right: 18%;
}
}

         @media screen and (min-width: 590px) {


#digital-clock{
  display: block;
  margin-top: -44px;
  margin-left: -135px;
  font-size: 22px;
}
}

         @media screen and (min-width: 600px) {

  .glow {
    font-size: 35px;
  }
#Logmenikoment {
  position: absolute;
  top: 15%;
  right: 57%;
}
#Regmenikoment {
  position: absolute;
  top: 15%;
  right: 20%;
}
.responsive{
    max-width: 400px;
    float: left;       
}
.zajedno{
  display: flex;
  justify-content: space-around;
} 
}


         @media screen and (min-width: 769px) {

#digital-clock{
  width: 200px;
  letter-spacing: 5px;
  font-size: 30px;
  margin-left: -185px;
}
#mySidenav p {
  padding: 15px 0 15px 45px;
  width: 200px;
}
#mySidenav button{
  padding-top: 3px;
  padding-bottom: 3px;
  margin-top: -10px;
}
#Regmenikoment {
  position: absolute;
  top: 15%;
  right: 25%;
}
.spisak{
  width: 90%;
  margin: 0 auto;
}
  .logo {
  position: absolute;
  top: 10px;
  left: 5px;
}
.logo img {
  width: 250px;   /* smanji širinu logotipa */
  height: auto;   /* visina se prilagođava proporcionalno */
}              
}


         @media screen and (min-width: 838px) {
          
.google{
  position: relative;
  margin-right: 20px;
  margin-top: -235px;
  float: right;
  width: 70%;
}
}

         @media screen and (min-width: 1120px) {

#naslov{
  position: relative;
}
}

/* 📱 Futer za mobilne uređaje */
@media (max-width: 600px) {

  .futer {padding: 20px 10px; text-align: center;}
  .futer-opis p {font-size: 14px; line-height: 1.4; margin-bottom: 15px;}
  .futer-navigacija {display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px;}
  .futer-navigacija a {font-size: 15px; padding: 6px 0;}
  .futer-kontakt p {font-size: 14px; margin: 6px 0;}
  .admin-dugme {width: 100%; padding: 12px; font-size: 16px; margin: 15px 0;}
  .futer-ikonice {margin-top: 15px;}
  .futer-ikonice a {font-size: 24px; margin: 0 10px;}
  .futer-copyright p {font-size: 13px; margin-top: 20px;}
}

/* Tooltip subtitle na mobilnim uređajima */
@media (max-width: 768px) {
  .gallery a::after,
  .gallery a::before,
  .gallery1 a::after,
  .gallery1 a::before {
    position: static;
    display: block;
    opacity: 1;
    margin-top: 6px;
    background: none;
    color: #555;
    font-size: 14px;
    text-align: center;
    padding: 0;
    border: none;
    animation: none;
    transform: none;
    min-width: auto;
  }
  .gallery a:hover::after,
  .gallery a:hover::before,
  .gallery1 a:hover::after,
  .gallery1 a:hover::before {
    transform: none;
    opacity: 1;
  }
}