/* Search start */
.search-icon {top: 20px; right: 20px; font-size: 17px; text-decoration: none; color: #333; background: none; border: none; cursor: pointer; z-index: 10; } .search-icon i { font-size: 17px; color: #ffffff; } .search-popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); display: none; justify-content: center; align-items: center; z-index: 1000; overflow: auto; } .search-popup:target { display: flex; } .search-popup-content { background: #fff; padding: 20px; border-radius: 8px; width: 90%; max-width: 400px; position: relative; text-align: center; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .search-popup-content h2 { margin: 0 0 15px; font-size: 20px; } .search-popup-content p { font-size: 16px; color: #555; } .close-popup { position: absolute; top: 10px; right: 10px; font-size: 24px; text-decoration: none; color: #333; background: none; border: none; cursor: pointer; }
/* Search end */
/* Footer start */
footer { background-color: #171717; color: #b2b2be; padding: 20px 0; } .footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 20px; } .footer-column:nth-child(1) { flex: 2 1 calc(50% - 20px); min-width: 300px; padding-right: 70px; } .footer-column { flex: 1 1 calc(25% - 20px); margin: 10px; min-width: 200px; } .footer-column img { max-width: 100%; height: auto; margin-bottom: 10px; display: block; margin: 65px auto; } .footer-column h3 { margin-bottom: 20px; font-size: 18px; color: #ffffff; } .footer-column ul { margin: 0; padding: 0; list-style: none; font-size: 16px; } .footer-column ul li { margin: 10px 0; } .footer-column ul li a { color: #b2b2be; text-decoration: none; padding: 5px 10px; display: inline-block; } .footer-column ul li a:hover { color: #ffffff; } .footer-column .services-list { list-style: none; padding: 0; margin: 0; } .footer-column .services-list > li { margin: 10px 0; font-weight: bold; } .footer-column .services-list > li > a { text-decoration: none; color: #cdcdd1; } .footer-column .services-list > li > ul { margin-top: 5px; padding-left: 20px; border-left: 2px solid #444; } .footer-column .services-list > li > ul > li { margin: 5px 0; font-weight: normal; } .footer-column .services-list > li > ul > li > a { text-decoration: none; color: #b2b2be; font-size: 14px; } .footer-column .services-list > li > ul > li > a:hover { color: #ffffff; } .social-icons { display: flex; gap: 10px; justify-content: center; } .social-icons a { color: #b2b2be; font-size: 1.5em; text-decoration: none; padding: 10px; background-color: #171717; border-radius: 15%; } .social-icons a:hover { background-color: #0077cc; color: #ffffff; } .footer-horizontal-menu { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; border-top: 1px solid #444; border-bottom: 1px solid #444; padding: 15px 0; gap: 10px; } .footer-horizontal-menu ul { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; } .footer-horizontal-menu ul li a { color: #b2b2be; text-decoration: none; padding: 10px 15px; display: inline-block; font-size: 14px; } .footer-horizontal-menu ul li a:hover { color: #ffffff; } .footer-bottom { text-align: center; padding: 20px 0; color: #b2b2be; font-size: 13px; } @media (max-width: 768px) { .footer-horizontal-menu { flex-direction: column; align-items: flex-start; } .footer-horizontal-menu ul { justify-content: flex-start; } .social-icons { justify-content: flex-start; } } @media (max-width: 480px) { .footer-horizontal-menu ul li a { font-size: 0.9em; padding: 8px 12px; } .social-icons a { font-size: 1.2em; } }
/* Footer end */


/* stilizacija za menu desno vertical */

    .menuRight {
      list-style-type: none;
      padding: 0;
      margin: 0;
    }
    .menu-item-right {
      padding: 10px;
      background-color: #f2f4f8;
      border-bottom: 1px solid #ccc;
    }
    .menu-item-right:hover {
      background-color: #f7f8fc;
    }
    .menu-item-right a {
      text-decoration: none;
      display: block;
    }

/* Logo with and hight */

.logo-image {
  width: 219px;
  height: 45px;
}

.logo-image-phone {
  width: 183.333px;
  height: 30px;
}


/* Stilizacija za footerlinks */
        ul.footerlinks {
          list-style-type: none;
          margin: 0;
          padding: 0;
          text-align: right; /* Poravnajte linkove na desno */
        }
        
        ul.footerlinks li {
          display: inline;
          margin-left: 10px; /* Razmak između stavki */
        }
        
        ul.footerlinks li:first-child {
          margin-left: 0; /* Ukloni razmak prije prvog linka */
        }
        
        ul.footerlinks li a {
          text-decoration: none;
          padding: 5px 10px;
          color: #b2b2be; /* Postavite boju teksta na bijelu */
          border-radius: 5px;
          transition: color 0.3s; /* Dodajte animaciju promjene boje teksta */
        }
        
        ul.footerlinks li a:hover {
          color: white; /* Promijenite boju teksta u žutu prilikom hovera */
        }

        /* Stilizacija za desktop uređaje */
        @media screen and (min-width: 769px) {
          ul.footerlinks li:not(:last-child)::after {
            content: " |";
            color: white;
            margin-left: 10px;
          }
        }

        /* Stilizacija za mobilne uređaje */
        @media screen and (max-width: 768px) {
          ul.footerlinks {
            text-align: left; /* Poravnajte linkove na lijevo za mobilne uređaje */
          }

          ul.footerlinks li {
            display: block; /* Poredajte linkove jedan ispod drugog za mobilne uređaje */
            margin-left: 0;
            margin-bottom: 5px; /* Dodajte razmak između linkova */
          }

          ul.footerlinks li a {
            display: block; /* Poredajte linkove jedan ispod drugog za mobilne uređaje */
            padding: 5px 0;
          }
        }




/* Html Sitemap css */


	
        #sitemapConteiner{
            font-family: roboto;
            box-sizing: border-box !important;
        }

        #sitemapConteiner .bsitemapContent { 
            background:#fff; 
            max-width:980px; 
            margin:0 auto; 
            padding:5px; 
            font: 16px "Roboto", sans-serif; 
            min-height: 100%; 
        }

        #sitemapConteiner h1 { 
            font-size: 26px; 
        }

        #sitemapConteiner div.footerinfo { 
            margin-top:16px; 
            color:#666; 
            font-size:15px; 
            text-align:right; 
        }
       
        #sitemapConteiner div.footerinfo * { 
            font-size:15px; 
        }

        #sitemapConteiner .sitemap{
            margin:5em 0
        }

        #sitemapConteiner .primaryNav{
            clear:both;
            width:100%;
            margin-top:3em 0
        }

        #sitemapConteiner .primaryNav #home {
            position:absolute;
            margin-top:-3em;
            margin-bottom:0;
            min-width:14.5em;
            width:100%
        }

        #sitemapConteiner .primaryNav #home:before{
            display:none
        }

        #sitemapConteiner .primaryNav #home.long-cell:before{
            display:block;
            position:absolute;
            border-width:0;border-color:#ccc;
            border-style:solid;
            z-index:-1;
            border-left-width:2px;
            border-top-width:2px;
            top:1.375em
        }
        
        @media screen and (max-width:1111px){
            #sitemapConteiner .primaryNav #home.long-cell:before{
                left:-40px;box-shadow:-10px 0 0 0 #fff
            }
        }

        #sitemapConteiner .primaryNav #home img{
            float:left;margin-right:4px
        }

        #sitemapConteiner .primaryNav ul{
            display:flex;
            flex-wrap:wrap;
            list-style:none;
            position:relative;
            padding-inline-start:40px
        }

        #sitemapConteiner .primaryNav li{
            flex:1;
            flex-basis:14.5em;
            padding-right:1.25em;
            position:relative;
            min-width:14.5em
        }

        #sitemapConteiner .primaryNav li ul li{
            min-width:12.5em
        }
        
        #sitemapConteiner .primaryNav li ul li ul li{
            min-width:10.5em
        }
        
        #sitemapConteiner .primaryNav>ul>li{
            margin-top:3em
        }
        
        #sitemapConteiner .primaryNav li a{
            margin:0;
            padding:.875em .9375em .9375em .9375em;
            display:block;
            font-size:.9375em;
            background:#fff;
            border:1px solid #ccc;
            border-radius:3px;
            box-shadow:0 3px 3px #666;
            text-decoration:none
        }
        
        #sitemapConteiner .primaryNav li a:hover{
            box-shadow:0 3px 3px 1px #666
        }

        #sitemapConteiner .primaryNav a:link:after,.primaryNav a:visited:after,.utilityNav a:link:after,.utilityNav a:visited:after{
            display:block;
            font-weight:600;
            font-size:.9375em;
            margin-top:.25em;
            word-wrap:break-word;
            color:#666
        }

        #sitemapConteiner .primaryNav ul ul{
            display:block
        }

        #sitemapConteiner .primaryNav ul ul li{
            padding-top:.9875em;padding-right:0
        }
        
        #sitemapConteiner .primaryNav ul ul li:first-child{
            padding-top:2em
        }
        
        #sitemapConteiner .primaryNav ul ul ul{
            margin-top:.6em;
            padding-top:.6em;
            padding-bottom:.625em
        }

        #sitemapConteiner .primaryNav ul ul ul li{
            padding-top:.3125em;
            padding-bottom:.3125em
        }

        #sitemapConteiner .primaryNav ul ul ul li a{
            font-size:.9375em;
            padding:.75em;
            min-width:90%;
            width:auto;
            margin-right:0;
            margin-left:auto
        }

        #sitemapConteiner .primaryNav ul ul ul li:first-child{
                padding-top:1em
        }

        #sitemapConteiner .primaryNav ul ul ul li a:link:after,.primaryNav ul ul ul li a:visited:after{
            font-size:.9375em
        }
        
        #sitemapConteiner .primaryNav ul ul ul ul{
            margin-top:0;
            padding-top:.3125em;
            padding-bottom:.3125em
        }
        
        #sitemapConteiner .primaryNav ul ul ul ul li a{
            padding:.75em;
            min-width:80%;
            width:auto
        }
        
        #sitemapConteiner .primaryNav ul ul ul ul li a:link:after,.primaryNav ul ul ul ul li a:visited:after{
            display:none
        }

        #sitemapConteiner .primaryNav ul li:after,.primaryNav ul li:before,.primaryNav ul:after,.primaryNav ul:before{
            display:block;
            content:'';
            position:absolute;
            border-width:0;
            border-color:#ccc;
            border-style:solid;
            z-index:-2
        }
        
        #sitemapConteiner .primaryNav>ul>li:before{
            height:1.375em;
            top:-1.375em;
            right:calc(50% + .625em);
            width:calc(100% - 2px);
            border-top-width:2px;
            border-right-width:2px
        }
        
        #sitemapConteiner .primaryNav>ul>li:first-child+li:before{
            border-top-width:0;
            height:5em;
            top:-5em
        }
        
        #sitemapConteiner .primaryNav ul ul li:after{
            width:50%;
            height:.9875em;
            top:0;
            right:1px;
            border-left-width:2px
        }
        
        #sitemapConteiner .primaryNav ul ul li:first-child:before{
            width:50%;
            height:1.3125em;
            top:.9875em;
            right:1px;
            border-left-width:2px
        }
        
        #sitemapConteiner .primaryNav>ul>li:last-child:after{
            border-bottom-width:0
        }
        
        #sitemapConteiner .primaryNav ul ul ul li:before{
            width:calc(50% - 15px)!important;
            height:calc(100% - 2px);
            top:-50%;
            left:0;
            border-left-width:2px;
            border-bottom-width:2px
        }
        
        #sitemapConteiner .primaryNav ul ul ul li:first-child:before{
            height:2.125em;
            top:-1px;
            border-top-width:2px
        }

        #sitemapConteiner .primaryNav ul ul ul:before{
            width:50%;
            height:1.25em;
            top:-10px;
            right:1px;
            border-left-width:2px
        }

        #sitemapConteiner .primaryNav ul ul ul li:after{
            border-width:0
        }

        #sitemapConteiner .primaryNav ul ul ul ul li:before,.primaryNav ul ul ul ul li:first-child:before{
            display:none
        }

        #sitemapConteiner .primaryNav ul ul ul ul:before{
            width:1px;
            height:calc(100% + 2.5em);
            top:-2.5em;
            left:0;
            border-left-width:2px
        }
        
        @media screen and (max-width:30em){
            #sitemapConteiner .primaryNav ul{
                display:block
            }
            #sitemapConteiner .primaryNav li{
                width:100%;
                padding-right:0
            }
            #sitemapConteiner .primaryNav #home{
                width:100%;
                position:relative;
                margin-bottom:-1em;
                margin-top:0
            }
        }

        @media screen and (min-width:30em){
            #sitemapConteiner .primaryNav>ul>li{
                max-width:50%
            }
        }
        
        @media screen and (min-width:38.5em){
            #sitemapConteiner .primaryNav>ul>li{
                max-width:33%
            }
        }
        
        @media screen and (min-width:50em){
            #sitemapConteiner .primaryNav>ul>li{
                max-width:25%
            }
        }
        
        @media screen and (min-width:61em){
            #sitemapConteiner .primaryNav>ul>li{
                max-width:20%
            }
        }
        
        @media screen and (min-width:73em){
            #sitemapConteiner .primaryNav>ul>li{
                max-width:16.66%
            }
        }
        
        @media screen and (min-width:84.5em){
            #sitemapConteiner .primaryNav>ul>li{
                max-width:14.285%
            }
        }
        
        @media screen and (min-width:96em){
            #sitemapConteiner .primaryNav>ul>li{
                max-width:12.5%
            }
        }
        
         @media screen and (min-width:107.5em){
            #sitemapConteiner .primaryNav>ul>li{
                    max-width:11.11%
            }
        }
            
        @media screen and (min-width:119em){
            #sitemapConteiner .primaryNav>ul>li{
                    max-width:10%
            }
        }
        

/* stilizacija za custom animated slide */

.custom-animated-slide {
  position: relative;
  top: 100px;
  margin: 0 auto;
  width: 100%;
  height: 250px;
  border-radius: 0px;
  background: #0077cc;
  color: #ffffff;
  overflow: hidden;
  box-shadow: 3px 3px 5px 1px #f2f4f8;
}
.custom-animated-carousel {
  animation: custom-animated-carousel 30s ease-in-out infinite;
}
.custom-animated-element {
  text-align: center;
  font-size: 24px;
  line-height: 30px;
}

.custom-animated-table {
  width: 100%;
  border-collapse: collapse;
}
.custom-animated-tr, .custom-animated-td {
  padding: 50px 20px 60px 20px;
  text-align: center;
}

.custom-animated-h4 {
  font-size: 24px; 
  color: rgb(255, 255, 255);
  margin-bottom: 30px;
}

.custom-animated-p {
  font-size: 17px; 
  color: rgb(255, 255, 255);
}

@media (max-width: 767px) {
  .custom-animated-slide {
    height: 250px; 
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .custom-animated-slide {
    height: 250px;
  }
}

@media (max-width: 767px) {
  .custom-animated-tr, .custom-animated-td {
    padding: 20px;
  }
}

@keyframes custom-animated-carousel {
  0%, 12.5% {
    transform: translateY(0%);
  }
  12.5%, 25% {
    transform: translateY(-12.5%);
  }
  25%, 37.5% {
    transform: translateY(-25%);
  }
  37.5%, 50% {
    transform: translateY(-37.5%);
  }
  50%, 62.5% {
    transform: translateY(-50%);
  }
  62.5%, 75% {
    transform: translateY(-62.5%);
  }
  75%, 87.5% {
    transform: translateY(-75%);
  }
  87.5%, 100% {
    transform: translateY(-87.5%);
  }
}