/*
  #1f40ab - project blue

*/


.wp-block-cover__inner-container:first-of-type h3:not(.slideShowInited){
	display: none;
}

.wp-block-cover__inner-container:first-of-type h3,
img.slideShowInited
{

	transition: opacity 0.5s!important; /*mora biti usklađeno sa initPocetna.js #lidusofs8idzu*/
}

._products_categories .categoryColumn{
  margin: -4% 15px 30px;
}

/* Stilovi za navigacijske točkice */
.navigation-dots {
  text-align: center;
  margin-top: 10px;
}

.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: #bbb;
  border-radius: 50%;
  margin: 0 5px;
  cursor: pointer;
}

.dot.active {
  background-color: #333; /* Promenite boju aktivne točkice */
}


._categoryImg img{/*ovo je skripta koju moram uploadati kroz WP kako bi zahvatila sve stranice*/

.bg1, .bg_red,    .c1{background-color: red!important; }
.bg2, .bg_blue,   .c2{background-color: blue!important; }
.bg3, .bg_green,  .c3{background-color: green!important; }
.bg4, .bg_pink,   .c4{background-color: pink!important; }
.bg5, .bg_purple,   .c5{background-color: purple!important; }
.bg6, .bg_yellow,   .c6{background-color: yellow!important; }
.bg7, .bg_gray,   .c7{background-color: gray!important; }
.bg8, .bg_white,  .c8{background-color: white!important; }
.bg9, .bg_orange,   .c9{background-color: orange!important; }

.ib {display:inline-block;}
.if, .iflex, .flex-inline {display:inline-flex!important;}
.f, .flex 
  {
  display: -webkit-box!important;   /* OLD - iOS 6-, Safari 3.1-6, BB7 */
  display: -ms-flexbox!important;  /* TWEENER - IE 10 */
  display: -webkit-flex!important; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex!important;         /* NEW, Spec - Firefox, Chrome, Opera */
  }
.flexc {
  display:flex!important;
  flex-direction:column!important;
}

.fill
  {
  -webkit-flex: 2!important;
  -ms-flex: 2!important;
  flex:2!important;
  }

.nevent{pointer-events: none!important;}
.yevent{pointer-events: all!important;}

.bold {font-weight:900}
.r {position:relative;}
.a {position:absolute;}
.vOFF{visibility: hidden!important;}
.OFF{display:none!important;}
.pre{white-space : pre-line;}
.rigid, .nowarp{white-space:nowrap;}
.unrigid {white-space:normal!important;}
.tac {text-align:center!important;}
.tar {text-align:right;}
.tal {text-align:left!important;}
.taj, .justify {text-align: justify;}
.jcc {justify-content: center;}
.mauto{margin:auto;}
.fontwhite {color:white}
.pointer, .p {cursor: pointer!important;}


.n_ul{text-decoration: none!important;}
.ul, .underline{text-decoration: underline !important;}
.ul_h:hover{text-decoration: underline!important;}

.unselectable, .u
  {
    -moz-user-select: -moz-none!important;
    -khtml-user-select: none!important;
    -webkit-user-select: none!important;
    -o-user-select: none!important;
    user-select: none!important;
  }

.w100 {width:100% !important;}
.h100 {height:100% !important;}
.w50 {width:50% !important;}

.mW100 {min-width:100% !important;}
.mH100 {min-height:100% !important;}

  .OFF {
    display:none!important;
  }

.mt50{margin-top:50px!important;}
.mt100{margin-top:100px!important;}
.mt150{margin-top:150px!important;}

.valign
  {
  display: -webkit-box!important;   /* OLD - iOS 6-, Safari 3.1-6, BB7 */
  display: -ms-flexbox!important;  /* TWEENER - IE 10 */
  display: -webkit-flex!important; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex!important;         /* NEW, Spec - Firefox, Chrome, Opera */
  align-items:center; 
  }


.valign_inline
  {
  display:inline-flex;
  align-items:center;
  }



.float_left{float:left;}
.fixed {position:fixed;}
.i {display:inline;}
.b,.block {display:block!important;}
.ib {display:inline-block;}
.if, .iflex, .flex-inline {display:inline-flex!important;}
.f, .flex 
  {
  display: -webkit-box!important;   /* OLD - iOS 6-, Safari 3.1-6, BB7 */
  display: -ms-flexbox!important;  /* TWEENER - IE 10 */
  display: -webkit-flex!important; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex!important;         /* NEW, Spec - Firefox, Chrome, Opera */
  }
.flexc {
  display:flex!important;
  flex-direction:column!important;
}

.fill
  {
  -webkit-flex: 2!important;
  -ms-flex: 2!important;
  flex:2!important;
  }




/* Header koji je sticky */
header {
    position: fixed;
    top: 0;
  padding:25px 0 25px;
  height:80px;
  background-color:white;
    width: 100%;
    z-index: 1000; /* osigurava da header bude iznad ostalog sadržaja */
    background-color: #ffffff; /* Promijenite boju pozadine prema potrebi */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* Dodaje sjenu ispod headera */
}


@media only screen and (max-width: 900px) {
  header {
    padding:25px 0 0;
  }
}


.top_blue_line {
  width:100%;
  height:40px;
  margin-bottom:-15px;
  
}

body:not(.admin-bar) .top_blue_line{
  
  margin-top:-25px!important; 
}





footer {
  background-color:#1f40ab;
  color:#97a7dd;
}

footer p, footer li{
  margin-top:7px;
  font-size:14px;
}
footer li{
  margin-top:-7px;
}
footer li:hover{
  color:white;
  text-decoration:underline;
}
header li:hover{
  color:black;
  text-decoration:underline;
}


header a[aria-current="page"] {
  color:#1f40ab!important;
  text-decoration:underline;
  font-weight:600;
}


.footer_h {
  background-color:#97a7dd;
  padding:2px 7px;
  display:inline-block;
}

/* Podešavanje prostora ispod headerea */
.content {
    margin-top: 100px; /* Promijenite vrijednost prema visini vašeg headerea */
}

.asColumn {max-width:1140px}

.mainBlue_bg {background-color:#1f40ab}
.mainBlue_front {color:#1f40ab}

.wp-block-button{

  position: relative;
  /*top: 0;*/

}


.wp-block-button a{

  color: #1f40ab;
  border-color: #1f40ab!important;
  transition: background-color 0.3s ease, color 0.3s ease;

}

.wp-block-button:hover a{

  color: white!important;
  background-color: #1f40ab!important;
}

._mainHeader{
  color:  #1f40ab!important;
}



body.mobile .mOFF {
    display:none!important;
}



  border-radius:20px!important;

}

._categoryImg a:first-of-type{
  position: relative;
  /*background-color: red!important;*/
}

._categoryImg a:first-of-type img{
  position: relative;
  top: 150px;
  transition: top 0.5s!important; /*mora biti usklađeno sa initPocetna.js #lidusofs8idzu*/
}

._svi_proizvodi{
  
  margin-top: -40px!important;
  margin-bottom: 80px!important;  
}

._pocetna_partneri .wp-block-column{
  /*border: 1px solid white;*/
  /*opacity: 0.8;*/
  position: relative;
  top: 0px;
  transition: top 0.3s ease; 

}

._pocetna_partneri .wp-block-column:hover{
  /*border: 1px solid #1f40ab;*/
  /*opacity: 1;*/
  top: -10px;

}





.myVideoWrapper {
  /*position: relative; - nešto nije dobro bilo online kada je bilo relative uključeno*/
  padding-bottom: 56.25%;
  /* 16:9 */
  padding-top: 25px;
  height: 0;
  width: 100%!important;
  
}

.myVideoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#videoBox{
  background-color: black;
}

@media only screen and (max-width: 900px) {
  .myVideoWrapper {
    /*padding-bottom:100%!important;*/
  }

  #videoBox{
    min-height: 0px!important;
    margin-top: 100px!important;
    /*padding: 0!important;*/
    /*background-color: red;*/
  }

}



.absCover{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}



.grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 jednake kolone */
    grid-gap: 0; /* Uklanja razmak između slika */
    width: 100%; /* Zauzima punu širinu roditeljskog elementa */
}

/* Stilovi za slike unutar grid-a */
.grid-item {
    position: relative; /* Pozicioniranje relativno kako bismo koristili ::after pseudoelement */
}

.grid-item img {
    width: 100%; /* Slike zauzimaju punu širinu svojih kontejnera */
    height: auto; /* Omogućava proporcionalno skaliranje slike */
    display: block; /* Uklanja bijeli prostor ispod slike */
}

/* Stilovi za efekt zumiranja slike */
.grid-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(39, 50, 85, 0.4); 
    /*background-color: rgba(0, 0, 0, 0.5);  Tamni overlay */
    opacity: 0; /* Overlay je inicijalno nevidljiv */
    transition: opacity 0.3s ease; /* Tranzicija za postupno pojavljivanje overlay-a */
    pointer-events: none; /* Overlay ne prima događaje miša kako bi omogućio interakciju s slikom */
}

.grid-item:hover::after {
    opacity: 1; /* Overlay postaje vidljiv kada korisnik pređe mišem preko slike */
}

#istaknutiProizvodi{
  padding:0;
  margin-top:150px;
}

body.mobile #istaknutiProizvodi{
  margin-top:-50px;
}


.istaknutiBox{
  height: 700px;
  color: black;
  width:1300px;
  margin:auto;
  /*background-colorr: red;*/
}

body.mobile .istaknutiBox{
  width:100%;
}

.istaknutiBox .istaknuti{
  height: 100%;
  width: calc(60% - 40px);
  padding: 20px;
  float: left;
  /*display: flex;*/
  /*align-items: flex-end;*/
}

.istaknutiBox .akcija{
  height: calc(100% - 60px);
  padding: 20px;
  width: calc(40% - 44px);
  border: 2px solid #1f40ab;
  /*background-color: #1f40ab;*/
  float: left;
  overflow: hidden;

}

body.mobile .istaknutiBox .akcija{

  width: calc(100% - 64px);
  left: 10px;

}



.istaknutiBox .product{
  float: left; 
  width: calc(33% - 0px);
  padding-top: 20px;
  height: 300px;
  position: relative;
  top: 0px;
  /*border: 1px solid red;*/

}

.istaknutiBox .product:hover{

  border-radius: 8px; /* Možete prilagoditi radijus ivice */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Dodaje sjenu */
  z-index: 2;
  top: -5px;
}

.istaknutiBox .product{

  transition: opacity 0.3s ease, top 0.5s ease!important;

}

.istaknutiBox .product.hidden{
  opacity: 0;
}
.istaknutiBox .product.hidden .imageBox .productImage{

  max-width: 40%;
}




.istaknutiBox .imageBox{
 
  /*float: left;*/
  display: flex;
  justify-content: center;  /* Centrira po horizontalnoj osi */
  align-items: center;      /* Centrira po vertikalnoj osi */
  /*border: 1px solid gray;*/
  width: 100%;
  height: calc(100% - 100px);
}

.istaknutiBox .imageBox .productImage{
  /*aspect-ratio:3/4;*/
  object-fit:cover;
  max-width: 70%;
  transition: max-width 0.5s ease!important;
}

.istaknutiBox .akcija .istaknut_product .akcije_imageBox .productImage{

  /*max-width: 100%;*/
  width: 100%;
  height: 100%;
  max-height: 450px;
  /*border: 1px solid gray;*/
}

.istaknutiBox .istaknut_product .akcije_imageBox{
  /*padding-top: 40px;*/
  /*min-height: 400px;*/
  display: flex;
  justify-content: center;  /* Centrira po horizontalnoj osi */
  align-items: center;      /* Centrira po vertikalnoj osi */
  /*border: 1px solid gray;*/
  width: 100%;
  min-height: 500px;
}

.istaknutiBox .istaknut_product.hasDescription .akcije_imageBox{

  min-height: 400px;
}








.istaknutiBox .categoryLink{
  color: #8a8a8a;
  text-decoration: none;
}

.istaknutiBox .categoryLink:hover{
  color: #474747;
}


.istaknut_product{
  opacity: 1;
  transition: opacity 0.3s ease, top 0.5s ease!important;

}


.istaknut_product.hidden{
  opacity: 0;
}







.groupAfterIstaknuti{
  position: relative;
  /*left: -200px;*/
  top: 100px;
  margin-bottom: 200px;
}


#partnerCovers{
  min-height: 0!important;
}

body.mobile #partnerCovers{
  padding-top: 30px!important;
  padding-bottom: 30px!important;
}

.logo-strip {
  display: flex;
  overflow-x: auto;
  gap: 0; /* Makni razmake među slikama */
  padding-left: 10%;
  padding-right: 10%;
  margin-top: -10%;
  scrollbar-width: none;
  -ms-overflow-style: none;  /* IE and Edge */
  gap: 20px; /* horizontalna margina */
  background-color: white;
  padding-bottom: 2%;
}

.logo-strip::-webkit-scrollbar {
  display: none;
}

.logo-strip img {
  margin: auto 0;       /* center vertically */
  height: 100%;         /* adjust to your strip height */
  flex-shrink: 0;
  display: block;       /* remove inline spacing */
  margin-left: -10px;
  border: 2px solid black;
  border-radius: 15px;  
  filter: grayscale(100%);
  transition: transform 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease;
}

.logo-strip img:hover {
  filter: grayscale(0%);
  transform: scale(1.1);       /* 10% larger */
  border-radius: 15px;         /* rounded corners */
  box-shadow: 0 8px 20px rgba(0,0,0,0.4); /* shadow behind */
}