* {
    margin: 0;
    padding: 0;
    font-family: "Noto Sans", sans-serif;
    box-sizing: border-box;
}

:root {
    --color-blue: #0b426b;
    --color-red: #831539;
    --bgcolor-blue: #0b426b;
    --bgcolor-red: #831539;
    --bgcolor-light-gray: #f3f5f7;
    --bgcolor-hover-gray: #0b416b1f;    
    --text-color: #ffffff;
}

html {
   /* scrollbar-gutter: stable; */
}

body {
    position: relative;  
    overflow: hidden auto;
}

body p {
    margin: 0;    
}


.content-tree-branch h4 {
    font-size: 16px;     
}
/*------------------------------------------------------*/
/*---------------------custom bootstrap classes-----------*/
/*-------------color------------*/
.color-blue {
    color: #0b426b;
}

.color-red {
    color: #831539;
}
/*-------------background-color------------*/
.bgcolor-blue {
    background-color: #0b426b;
}

.bgcolor-red {
    background-color: #831539;
}

/*-------------font-size------------*/
.fs-13px {
    font-size: 13px;    
}

.fs-14px {
    font-size: 14px;    
}

.fs-15px {
    font-size: 15px;    
}

.fs-18px {
    font-size: 18px;    
}

.fs-22px {
    font-size: 22px;    
}

.fs-24px {
    font-size: 24px;    
}

/*-------------padding------------*/
.px-30px {
    padding: 0 30px;
}

.px-80px {
    padding: 0 80px;    
}

.px-100px {
    padding: 0 100px;
}
/*---------------------header----------------------------*/


header {
    position: relative; 
    width: 100vw;
}

/*---------------------header sjednica----------------------------*/
.enter_tab {
    position: absolute;
    opacity: 0;
    left: 0;
    top: 0;
    font-size: 18px;
    font-weight: 600;
    padding: 5px 16px;
    border: none;
    background: none;
    color: var(--color-blue);
    transition: all 0.3s ease;
}

.enter_tab:focus  {
    position: relative;
    opacity: 1;
}

.enter_tab button  {

}

.enter_tab:focus {  
    opacity: 1;
    height: fit-content;
}

.sjednica {
    z-index: 10;
    position: absolute;
    color: #ffffff;
   /* width: 100vw; */
    left: 50%;
    transform: translateX(-50%);
    text-wrap: nowrap;
    border-bottom-right-radius: 23px;
    border-bottom-left-radius: 23px; 
}

.najava {
    border: 1px solid #831539;
    background-color: #831539;
    border-bottom-right-radius: 23px;
    border-bottom-left-radius: 23px;    
    z-index: 20;
    transition: all 0.3s ease;
}

.sjednica:hover .najava {
    background-color: #d5dbe0;
    color: #831539;
}

.uzivo {
/*    display: none; */    
    border: 1px solid #d5dbe0;
    background-color: #d5dbe0;
    border-bottom-right-radius: 23px;
    color: #831539;
    transform: translateX(-24px);
    z-index: 10;
    cursor: pointer;
    transition: all 0.3s ease;
}

.sjednica:hover .uzivo {
    border: 1px solid #831539;
}

.sjednica:hover .uzivo > * {
    opacity: 0.8;
}

/*---------------------locale/accessibility----------------------------*/
._access-icon {
    box-shadow: none !important;
    background-size: 60% !important;
    background-position: center !important;    
    z-index: 0 !important;
    opacity: 1 !important; 
    transition-duration: 0s !important;
}

.locale_container {
    position: absolute;
    top: 30px;
    right: 36px;
    gap: 35px;
    transition: all 0.4s ease;
}

.locale_cont_mobile {
    display: none;    
}

.locale {  
    transition: all 0.3s ease;
}

.locale p {
    color: #0b426b;        
    transition: all 0.3s ease;
}

.locale:hover p {  
    color: #831539;
}

.locale svg path {  
    transition: all 0.3s ease;
}

.locale:hover svg path {  
    fill: #831539;
}
/*
.accessibility {
    width: 48px;
    height: 48px;
    background-color:  #831539;
    border-radius: 100%;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid #831539;
    z-index: 0;
    transition: all 0.4s ease;
}

.accessibility:hover  {
    background-color: #ffffff;
}

.accessibility svg path {
    transition: all 0.4s ease;
}

.accessibility:hover svg path {
    fill: #831539;
}
*/
/*---------------------navigation----------------------------*/
.navigation {
    padding: 80px 80px 60px 80px;
    transition: all 0.5s ease;
}

/*
.nav_left, .nav_right {
   flex-grow: 1;
   flex-basis: 0;
}
*/
.nav_menu {
    gap: 65px;    
}

.search {
    border: 2px solid #06426b;
    border-radius: 25px;
    width: 510px;
    margin-left: 100px; 
    overflow: hidden;
  /*position: absolute;
    left: 50%;
    transform: translateX(-50%);*/
}

.search form {
    padding: 0px 20px 0px 0px;    
}

.search_btn {
    border: none;
    background: none;
    transition: all 0.4s ease;
}

.search_btn:hover {
    transform: scale(1.1);    
}

.search_mob_icon {
    display: none;    
}
    
.search_mob {
    display: none;    
}    

.input {
    padding: 12px 0px 12px 30px; 
    outline: none;
    border: none;
    color: #06426b
}

.input::placeholder {
    color: #06426b
}

.kontakti {
    border: none;
    background: none;
    color: #0b426b;    
    text-transform: uppercase;
    text-decoration: none;
    opacity: 1;
    transition: all 0.4s ease;
}

.kontakti:hover {
    opacity: 0.7;
}

.kontakti img {
    background-color: #ffffff;    
}

.izbornik {
    padding: 14px 16px;
    border: 1px solid #0b426b;  
    text-transform: uppercase;
    background-color: #0b426b;  
    color: #ffffff;
    border-radius: 3px;
    transition: all 0.4s ease;
}

.izbornik:hover {
    background-color: #ffffff; 
    color: #0b426b; 
}

.izbornik.active {
    background-color:  #0b426b; 
    color: #ffffff;
    transition: all 0.4s ease;
}

.izbornik.active:hover {
    background-color:  #ffffff; 
    color: #0b426b;
}

.izbornik:hover .menu-icon span {
    background: #0b426b;
}

.fullscreen-search {
     display: none;   
}

.navbar_fix {
    position: fixed;
    top: 0;
    z-index: 9999;
    width: 100vw;
    background-color: #ffffff; 
}
/*----------------hamb menu styles--------------------------*/
.menu-icon {
    width: 32px;
    height: 16px;
    position: relative;
    transform: rotate(0deg);
    transition: all 0.5s ease-in-out;
}

.menu-icon span {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background: #ffffff;
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: all 0.25s ease-in-out;
}

.menu-icon span:nth-child(1) {
    top: 0px;
}

.menu-icon span:nth-child(2) {
    width: 85%;
    top: 7px;
}

.menu-icon span:nth-child(3) {
    top: 14px;
}

.menu-icon.open span:nth-child(1) {
    width: 20px;
    transform: rotate(135deg);
    top: 7px;
}

.menu-icon.open span:nth-child(2) {
    opacity: 0;
    left: -60px;
}

.menu-icon.open span:nth-child(3) {
    width: 20px;
    top: 7px;
    transform: rotate(-135deg);
}
/*---------------------main-menu----------------------------*/
.main-menu {
    position: relative;
    padding: 100px 100px 200px 100px;  
    color: #0b426b;
    overflow: hidden;
    background: url('https://www.zadar.sime.futuro.is/themes/grad-zadar/assets/icons/pozadina.svg');
    background-repeat: no-repeat;
    background-position: 50% 0px;
    background-size: 60%;
}

.information-section {
    padding-bottom: 110px;    
}

.information-section .row {
    align-items: start;
    justify-content: space-between;
}

.information-section .col {
    display: flex;
    flex-direction: column;
    align-items: start;
    width: fit-content;   
    gap: 1rem;
    font-size: 22px;
}

.information-section .col a {
    position: relative;
    color: var(--color-blue);
    text-align: start;
    text-decoration: none;
    transition: all 0.4s ease;
}

.information-section a:hover {
    opacity: 0.8;
}

.information-section a::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #0b426b;
    transition: all 0.4s ease;
}

.information-section a:hover::after {
    width: 100%;
}

.information-title {
    color: var(--color-blue);    
}

.department-section {
    text-align: center;
    width: 100%;    
}

.department-section.podstranica {   
    padding-left: 1rem;
}

.department-section .row {
    row-gap: 70px;  
}

.department-section svg {
     flex-shrink: 0;
}

.department-section .row .col {
    opacity: 0;  
}

.department-section .row .col:nth-child(3n+1) {
    padding-right: 3rem;
}

.department-section .row .col:nth-child(3n+2) {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.department-section .row .col:nth-child(3n+3) {
    padding-left: 3rem;
}

.department-item {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: start;
    gap: 1rem;
    text-decoration: none;
    color: #0b426b;
    background: none;
    border: none;
    transition: all 0.4s ease;
}

.department-item-icon-container {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    width: 30px;
}

.department-item-icon-container p {
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
}

.department-item-icon-container .mixit-icon {
    width: 30px;
    height: 30px;
}

.javna-nabava .department-item-content p {
    text-transform: uppercase;
}

.javna-nabava .department-item-content time {
    text-transform: none;
    color: var(--color-blue);
    font-weight: 600;
}

#numeric-icon {
    width: 35px;
    height: 35px;
}

.department-item-content {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 1rem;
    text-align: start;
    align-self: center;
    color: var(--color-blue);
}

.department-item-content h3 {
    position: relative;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 0;
}

.department-item-content h3::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #0b426b;
    transition: all 0.4s ease;
} 

.department-item:hover .department-item-content h3::after {
    width: 100%;    
}

.department-item p {
    transition: all 0.4s ease; 
}

.department-item:hover p {
    opacity: 0.8;    
}
/*
.department-item svg {
    transition: all 0.6s ease;    
}

.department-item:hover svg {
    transform: scale(1.05);    
}
*/
/*---------------------news----------------------------*/
.news {
    position: relative;
    padding: 0px 80px 270px 80px;
    display: flex;
    flex-direction: column;
    gap: 35px;  
    text-align: center;
}

.news-grid {
    justify-content: space-between;
    align-items: stretch;
    row-gap: 1.5rem;
}

.news .news-grid .col {
    opacity: 0;    
}
/*
.main-menu .department-item-content {
    padding-top: 10px;    
}
*/

.department-item-content {
    padding-top: 10px;    
}

.subpages-container .department-item-content {
    padding-top: unset;   
}

.news-grid .col {
    opacity: 0;    
}

.news-grid .col:nth-child(3n+1) {
    padding-right: 1rem;
}

.news-grid .col:nth-child(3n+2) {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.news-grid .col:nth-child(3n+3) {
    padding-left: 1rem;
}

.news-item  {
    text-decoration: none;    
}

.news-item .card {
    border: none;
    height: 100%;
    transition: all 0.4s ease;
    cursor: pointer;
    border-radius: 0;
    overflow: hidden;
}

.img-container {
    width: 100%;
    overflow: hidden;    
}

.news-item img {
    height: auto;
    max-width: 100%; 
    width: 100%;
    border-radius: 0;
    transition: all 0.4s ease;
}

.news-item:hover img {
    transform: scale(1.1);
}

.news-item .card-body {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 1rem;
    text-align: start;
    padding: 1.5rem;
    background-color: #f3f5f7;    
    color: #0b426b;
    min-height: 350px;
    transition: all 0.4s ease;
} 

.news-item:hover .card-body {
    background-color: #0b416b1f;  
}

.news-item .card-title {
    font-size: 24px;
    font-weight: 600;
    margin: 0;
    transition: all 0.4s ease;
}

.news-item:hover.card-title {
    opacity: 0.8;
}


.news-item .card-text {
    margin-bottom: 0;
    font-size: 15px;
    transition: all 0.4s ease;
}

.news-item .card:hover .card-text {
    opacity: 0.8;
}

time {
    font-size: 13px;
    font-weight: 400;
    color: #831539;    
}

time span {
    font-weight: 600;    
}

.additional-news-grid {
    justify-content: space-between;
    align-items: stretch; 
}

.additional-news-grid .col:nth-child(4n+1) {
    padding-right: 1rem;
}

.additional-news-grid .col:nth-child(4n+2) {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.additional-news-grid .col:nth-child(4n+3) {
    padding-left: 0.5rem;
    padding-right: 0.5rem;    
}

.additional-news-grid .col:nth-child(4n+4) {
    padding-left: 1rem;    
}

.additional-news-item {
    text-decoration: none;    
}

.additional-news-item .card {
    height: 100%;   
    border-radius: 0;
    border: 3px solid var(--bgcolor-light-gray);
    transition: all 0.4s ease;
}

.additional-news-item .card:hover  {
    background-color: #0b416b1f;  
}

.additional-news-item  .card-body {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 1rem;
    text-align: start;
    color: var(--color-blue);
    padding: 1.5rem;
}

.additional-news-item .card-title {
    font-size: 18px;
}

#article-carousel {
    display: none;   
}

.carousel-inner {
    opacity: 0;    
}
    
.arhiva {
    position: absolute;
    bottom: 160px;
    right: 80px;
    transition: all 0.4s ease;
}

.arhiva::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #0b426b;
}

.arhiva:hover {
    opacity: 0.7;
}
/*---------------------logos----------------------------*/
.logo_container {
    padding: 0px 80px 120px 80px;    
    gap: 100px;
}
 
.logo_container a svg {
    width: 100%;
    height: auto;    
}

.unesco_mob {
    display: none;    
}
/*---------------------footer----------------------------*/
footer {
    padding: 65px 80px;    
}

.footer_container.mobile {
    display: none;    
}

.footer_links a {
    position: relative;
    transition: all 0.4s ease;
}

.footer_links a::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #0b426b;
    transition: all 0.4s ease;
} 

.footer_links a:hover::after {
    width: 100%;    
}

.footer_links a:hover {
    opacity: 0.8;     
}

.footer_links_bottom a {
    position: relative;
    opacity: 1;
    transition: all 0.4s ease;   
}

.footer_links_bottom:hover a {
    opacity: 0.8;  
}

.footer_links_bottom a::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #0b426b;
    transition: all 0.4s ease;
} 

.footer_links_bottom a:hover::after {
    width: 100%;    
}

.footer_links_bottom a.footer_icon::after {
    content: none; 
}

.tel {
    position: relative;
    transition: all 0.4s ease;
}

.tel:hover {
    opacity: 0.8;
}

.tel::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #0b426b;
    transition: all 0.4s ease;
}

.tel:hover::after {
    width: 100%;
}
/*------------overlay menu-----------*/
body.overlay-active {
    overflow: hidden;
}

.overlay-menu { 
    position: fixed;
   /* bottom: 0; */
    top: 0;
    bottom: 100%;
    right: 0;
    left: 0;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.5);
   /* height: 0px; */
    visibility: hidden;
    transition: all 0.5s ease;
}

.overlay-menu.visible {
   visibility: visible;
}

.overlay-menu.visible .overlay-navbar {
    box-shadow: 0px -1px 0px gray;    
}

.overlay-navbar {
    position: relative;
    height: 100%;
    flex-basis: 100%;
    display: block;
    overflow: scroll; 
    width: 100%;
    background-color: white;
    margin: 0 auto;
}

#main-overlay-menu {
    height: fit-content;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 50px;
    transition: all 0.3s ease;    
}

.col.visited h3 {
    color: var(--color-red);    
}

.povezano {
    font-size: 2rem;
    padding: 2rem 0;
    color: var(--color-red);
}
/*---------------error page-----------------*/
.main-menu.error-page {
    background-size: 45%;   
    gap: 100px;
    text-align: center;
}

.error-message-logo svg {
    width: 550px;
    height: 233px;
    opacity: 0;
}


.error-message-container h1 {
    font-size: 4rem;
}

.error-message-container h1 span {
    color: var(--color-red);
    font-size: 5rem;
    margin-right: 2rem;
    opacity: 0;
    display: inline-block;
}

.error-message-container p {
    font-size: 2rem;
}
/*----------------fotorama------------------*/
.fotorama__thumb-border {
    border-color: var(--color-blue);
}

.fotorama__caption {
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: 10px;
}

.fotorama__caption__wrap {
    background-color: var(--bgcolor-light-gray);
    color: var(--color-blue);
    font-size: 18px;
    font-weight: 500;
}

.fotorama--fullscreen {
    position: fixed !important;    
}

/*----------------fancybox-------------------*/
html.with-fancybox body.hide-scrollbar {
    margin-right: 0px !important;    
}

/*------------responsive classes-----------*/
@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1190px;
    }
     
}

@media (max-width: 1399px) {
     /*-----------section paddings-------*/
    .navigation {
        padding: 80px 60px 60px 60px;
    }
    
    .main-menu {
        padding: 100px 80px 200px 80px;
    }

    .news {
        padding: 0px 60px 270px 60px;
    }
    
    .arhiva {
        right: 60px;
    }
    
    .logo_container {
        padding: 0px 60px 120px 60px;
        
     /*   gap: 40px; */
    }
    
    footer {
        padding: 65px 60px;
    }
    /*------------------------------------*/
    
    .nav_menu {
        gap: 25px;
    }

    .uzivo {
        display: none !important;    
    }
    
   .logo_container {
        gap: 50px; 
    }
    
    .search {
        width: 410px;
        margin-left: 97px;
    }
    
    .main-menu {
        background-size: 70%;
    }

    .donat_logo svg {
        width: 170px;
        height: 72px;
    }
    
    
    .main-menu.error-page {
        background-size: 65%;   
    }    
    
}

@media (max-width: 1199px) {
    .logo_container {
        flex-direction: column;
        gap: 20px; 
    }
    
    .fullscreen-search {
         display: block;   
    }
    
    .search {
        width: fit-content;
        border-radius: 100%;
        margin-left: auto;
        margin-right: 25px;
    }
    
    .search form {
        display: none !important;
    }
    
    .search_mob {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        border: none;
        /*outline: none;*/
        background: none;
        transition: all 0.4s ease;
    }
    
    .search_mob_icon {
        display: block;
    }
    
   .search_mob svg {   
        transition: all 0.4s ease;
    }
    
   .search_mob:hover svg {   
        transform: scale(1.1);
    }
    
    .fullscreen-search {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1050;
        backdrop-filter: blur(2px);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    
    .fullscreen-search.active {
        opacity: 1;
        visibility: visible;
    }
    
    .blurred-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }
    
    .search-content {
        position: relative;
        z-index: 2;

        width: 90%;
        max-width: 600px;
    }
    
    .search-content > form {
        position: relative;
        z-index: 2;
        background: white;
        border: 2px solid #0b426b;
        border-radius: 24px;
        width: 90%;
        max-width: 600px;
    }
    
    .sm_search_input {
        width: 100%;
        font-size: 1.2em;
        border: none;
        outline: none;
        color: #0b426b;
    }

    .sm_search_input::placeholder {
        color: #06426b
    }
        
    .search_btn_overlay {
        outline: none;
        border: none;
        background: none;
        transition: all 0.4s ease;
    }
    
    .search_btn_overlay:hover {   
        transform: scale(1.1);
    }
    
    .exit_overlay {
        border: none;
        outline: none;
        background: none;
        transition: all 0.4s ease;
    }
    
    .exit_overlay:hover svg {
        fill: #0b426b;
    }
    

    .izbornik:hover {
        background-color: #0b426b; 
        color: #ffffff; 
    }
    
    .izbornik.active:hover {
        background-color: #0b426b; 
        color: #ffffff; 
    }
    
    .izbornik:hover .menu-icon span {
        background: #ffffff;
    }

    .department-section .row .col:nth-child(2n+1) {
        padding-right: 1rem;
        padding-left: 0;
    }
    
    .department-section .row .col:nth-child(2n+2) {
        padding-right: 0;
        padding-left: 1rem;
    }
    
}

@media (max-width: 1100px) {
    
    footer .col {
        width: 100%;    
    }
    
    .footer_container {
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }    
    
    .certifikati {
        justify-content: center !important;    
    }
    
    .footer_links_container {
        order: 1;    
        margin-bottom: 70px;
    }
    
    .grb_container {
        order: 2;  
        margin-bottom: 50px;
        width: 100%;
    }
    
    .certifikati_container {
        order: 3;    
    }
    
    .grb_container > div {
        align-items: center !important;
        justify-content: center;
        gap: 30px !important;    
    }
    
    .footer_links_container > div {
        gap: 30px !important;    
    }
    
    .footer_links {
        gap: 25px !important;    
    }
    

    .error-message-container h1 {
        font-size: 3.5rem;
    }
    
    .error-message-container h1 span {
        font-size: 4rem;
    }
    
    .error-message-container p {
        font-size: 1.5rem;
    }
}


@media (max-width: 991px) {
    /*-----------section paddings-------*/
    .navigation {
        padding: 80px 30px 60px 30px;
    }
    
    .menu-wrapper {
        max-height: 100vh;
    }

    .main-menu {
        padding: 80px 50px 200px 50px;
        background: url('https://www.zadar.sime.futuro.is/themes/grad-zadar/assets/icons/Donat_mob.svg');
        background-position: 50% 0;
        background-size: 70%;
        background-repeat: no-repeat;
    }
    
    .news {
        padding: 0px 30px 270px 30px;
    }
    
    .arhiva {
        right: 30px;
    }
    
    .logo_container {
        padding: 0px 30px 120px 30px;
        
     /*   gap: 40px; */
    }
    
    footer {
        padding: 65px 30px;
    }

    /*----------------------------------*/
    .information-section {
        width: 100%;
        max-width: unset;    
    }
    
    .information-section .row {
        row-gap: 30px;    
    }
    
    .information-title {
        width: 100% !important;    
    }
    
    .information-section a {
        font-size: 20px;    
    }

    .news-grid {
        row-gap: 1rem;    
    }
    
    .additional-news-grid {
        row-gap: 1rem;    
    }
    
    .news-grid .col:nth-child(2n+1) {
        padding-right: 0.5rem;
        padding-left: 0;
    }
    
    .news-grid .col:nth-child(2n+2) {
        padding-right: 0;
        padding-left: 0.5rem;
    }
    
    .additional-news-grid .col:nth-child(2n+1) {
        padding-right: 0.5rem;
        padding-left: 0;
    }
    
    .additional-news-grid .col:nth-child(2n+2) {
        padding-right: 0;
        padding-left: 0.5rem;
    }
            
    .overlay_footer_icons {
        width: 100%;    
    }

}

@media (max-width: 767px) {
    /*-----------section paddings-------*/
    .sjednica {
        position: relative;
        align-items: center;
        justify-content: center;
        margin-bottom: 16px;
    }
    
    .navigation {
        padding: 16px;
    }
    
    #main-overlay-menu {
        padding: 0px 16px;  
    }
    
    .main-menu {
        padding: 35px 16px 70px 16px;
    }
    
    .main-menu-sub {
        padding: 35px 16px 70px 16px;
    }
    
    .department-section .row .col {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
     
    .news {
        padding: 0px 16px 90px 16px;
    }
    
    .arhiva {
        right: 16px;
    }
    
    .logo_container {
        padding: 100px 16px 100px 16px;
        gap: 0px;
    }
    
    .najava {
        padding: 0px 20px;
    }
    
        
    footer {
        padding: 40px 16px;
    }
    /*---------------------------------*/
    ._access-icon.material-icons {
        display: none;
        right: 16px !important;
        top: 153px !important;
        z-index: 9999 !important;
    }

    .footer_container.mobile {
        display: block;    
    }

    .footer_container.mobile .footer_links_container {
        margin-bottom: 0;    
    }
    
    .information-section {
        position: relative; 
        padding-left: 50px;
        padding-bottom: 60px;
    }
    
    .information-section .row {
        padding-top: 60px;
        row-gap: 16px;    
    }    
    
    .information-title {
        position: absolute;
        top: 0px;
        left: 0px;
    }
    /*
    .information-title.position {
        left: 16px;
    }
    */
    .information-title  p {
        font-size: 18px;    
    }
    
    .information-section .col {
        width: 100%;
    }

    .locale_container {
        display: none !important;    
    }
    
    .locale_cont_mobile {
        position: relative;
        display: flex;   
        align-items: center;
        gap: 30px;
        justify-content: end;
        padding-right: 16px;
    }
        
    .information-section .hide {
        overflow: hidden;
        visibility: hidden;
        transform: translatey(-30px);
        opacity: 0;
        max-height: 0px;
        margin: 0;
        padding: 0;
        transition: all 0.5s ease;
    }
    
    .information-section .unhide {
        overflow: hidden;
        visibility: visible;
        transform: translatey(0px);
        opacity: 1;
        max-height: 500px;
        margin: 0;
        padding: 0;
        transition: all 0.5s ease;
    }
    
   .information-section .sakrij:nth-of-type(n+4) {
        visibility: hidden;
    }

    .information-section .col .show {
        overflow: hidden;
        visibility: hidden;
        transform: translatey(-30px);
        opacity: 0;
        height: 0;
        margin: 0;
        padding: 0;
        transition: all 0.3s ease;
    }
    
    .see-more {
        position: relative;
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        color: #831539;
        width: fit-content;
        border: none;
        background: transparent;
    }
    
    .see-more span {
        position: relative;
    }
    
    .see-more span::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 1px;
        background-color: #831539;
        transition: all 0.4s ease;
    }
    
    .department-section .row {
        row-gap: 35px;
    }
        
     .arhiva {
        bottom: 0px;
    }
    
    .main-menu.error-page {
        min-height: 70vh;
        padding-top: 10rem;
    }
    
    #main-overlay-menu .department-section {
        padding-bottom: 24px;    
    }
    
}

@media (max-width: 700px) {
    .nav_menu {
        gap: 16px;
    }
    
    .donat_logo svg {
        width: 140px;
        height: 60px;
    }
            
    .search_mob {
        width: 40px;
        height: 40px;
    }
  
    .izbornik {
        padding: 11px !important; 
    }
    
    .izbornik p {
        display: none;    
    }
    
    .menu-icon.open span:nth-child(1) {
        width: 100%;
        transform: rotate(135deg);
    }
    
    .menu-icon.open span:nth-child(2) {
        opacity: 0;
        left: -60px;
    }
    
    .menu-icon.open span:nth-child(3) {
        width: 100%;
        transform: rotate(-135deg);
    }
    
    .error-message-logo svg {
        width: 400px;
        height: 170px;
    }
    
    
    .error-message-container h1 {
        font-size: 3rem;
    }
    
    .search {
        margin-right: 16px;    
    }

}

@media (max-width: 575px) {

    .najava p {
        font-size: 13px;    
    }
    
    .najava span {
        display: none;    
    }
    
    .information-title  p {
        font-size: 13px;    
    }
    
    .information-section .col a {
        font-size: 16px;
    }
    
    .see-more {
        font-size: 12px;
    }
    
    .department-item-content h3 {
        font-size: 18px;
        font-weight: 600;
    }
    
    .department-item-content p {
        font-size: 14px;
        font-weight: 400;
    }
    
    .news-grid .col {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
    
    .news-item .card-title {
        font-size: 18px;
    }
    
    .news-item .card-text {
        display: none;
    }
    
    .news-item .card-body {
        min-height: 200px;
    }
      
    #main-article-grid {
        display: none;    
    }
    
    #additional-article-grid {
        display: none;    
    }
    
    .additional-news-grid .col {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
    
    .additional-news {
        display: none;    
    }
    
    .logo_container {
        justify-content: space-between;
        gap: 60px;    
    }
    
    .footer_links {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .footer_links .impressum {
        display: none;    
    }
    
    .footer_links a {
        font-size: 13px;
    }
    
    .footer_links_bottom a {
        font-size: 13px;    
    }
    
    .footer_links_bottom .impressum {
        display: block !important;    
    }
    
    .grb_container strong {
        font-size: 16px;    
    }
    
    .logo_container img {
        width: 100%;    
        height: auto;
    }

    
    .logo_container a {
        width: 100%;
        height: auto;    
    }
    
    .unesco {
        display: none; 
    }
    
    .unesco_mob {
        display: block;
        width: 100%;
    }  
    
    .kontakti {
        display: none;    
    }
    
    .search {
        margin-left: auto;
        margin-right: 40px;
    }
    /*-------carousel--------*/
    
    #article-carousel {
        display: block;   
    }
    
    /*-------carousel indicators--------*/
    .carousel-indicators {
        top: calc(100% + 30px);     
    }
    
    .clanak_indicator[data-bs-target] {
        width: 26px;
        height: 26px;
        background-color: #fff;
        border: 2px solid #0b426b;
        margin-right: 10px;
        margin-left: 10px;
        border-radius: 50%;
        opacity: 1;
    }
    
    .clanak_indicator.active {
        background-color: #0b426b !important;
    }
    
    .overlay-navbar {
        width: 100%;
       /* padding: 16px 50px;*/
    }
    
    .error-message-container h1 {
        font-size: 2.5rem;
    }
    
    .error-message-container h1 span {
        font-size: 2.5rem;
    }
    
    .error-message-container p {
        font-size: 1.5rem;
    }
        
}

@media (max-width: 480px) {
    
    .error-message-logo svg {
        width: 300px;
        height: 127px;
    }
    
    
    .error-message-container h1 {
        font-size: 2rem;
    }
    
    .error-message-container h1 span {
        font-size: 2rem;
        margin-right: 1rem;
    }
    
    .error-message-container p {
        font-size: 1rem;
    }
}
    

@media (max-width: 400px) {
   .search {
        margin-right: 40px;
    }    
    .najava p {
        font-size: 12px;
    }
}
    
.subpages-container {
    position: relative;
    padding: 55px 100px 100px 100px;  
    color: #0b426b;
    overflow: hidden;
    background: url('https://www.zadar.sime.futuro.is/themes/grad-zadar/assets/icons/pozadina.svg');
    background-repeat: no-repeat;
    background-position: 50% 0px;
    background-size: 60%;
}

.submenu {
    padding-bottom: 270px;    
}

.subpages-container :is(p, a, small, strong, h1, h2, h3, h4, h5, h6, li) {
    color: var(--color-blue);
}

.subpages-content p {
    color: var(--color-blue);
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 1.5rem;  
}

.subpages-content :is(h1, h2, h3, h4, h5) {
    color: var(--color-blue);
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 1.5rem;
    margin-top: 3.5rem;
}

.subpages-content  ul {
    margin-bottom: 35px;
}

.subpages-content  li {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 1.5rem;
}

.subpages-content > :is(p, a, h1, h2, h3, h4, h5, h6, ul, li, strong, small, span, div, blockquote) {
    max-width: 75%;
}

.subpages-content a {
    font-size: 16px;
    font-weight: 400;
    color: #3282d9;    
}

.sjednica-vijeca a { 
    transition: all 0.5s ease;
}

.sjednica-vijeca a:not(.file-container a):hover {
    color: #3282d9;;   
}

.subpages-content .img-container {
   max-width: 50% !important;
   height: auto;
   float: right; 
   padding-left: 5%;
}

.subpages-content img {
   width: 100%;
   height: auto;
}

.img-container figcaption {
   padding: 1.5rem;
   background-color: var(--color-blue);
   color: var(--text-color);
   font-weight: 400;
   font-size: 14px;
}

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

.subpages-row p {
    color: var(--color-blue);
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 1.5rem;  
}

.subpages-row :is(h1, h2, h3, h4, h5) {
    color: var(--color-blue);
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 1.5rem;
    margin-top: 3.5rem;
}

.subpages-row  ul {
    margin-bottom: 35px;
}

.subpages-row  li {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 1.5rem;
}

.subpages-row > div > *:first-child {
    margin-top: 0 !important;     
}

blockquote {
    background-color: #f3f5f7;
    border-left: 5px solid #0b426b;
    padding: 30px 25px;
    font-weight: 500;
    font-size: 18px;
    font-style: italic;
    margin-top: 45px;
    margin-bottom: 35px;
}


.file-container {
    margin: 90px 0;
    display: flex;
    align-items: center;
    gap: 2rem;
  /*  width: fit-content; */
    flex-wrap: wrap;
}

.file-container a {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--color-blue); 
    background-color: var(--bgcolor-light-gray);
    max-width: 50%;
    font-weight: 500;
    font-size: 1rem;
    padding: 1rem;
    text-decoration: none;
    word-break: break-all;
    transition: all 0.4s ease;
}

.file-container a:hover {
    background-color: #0b416b1f;
}

.file-container svg {
    flex-shrink: 0;
    color: var(--color-red);    
}

.file-container span {
    max-width: unset;
    flex-grow: 1;    
}

.gallery {
    margin: 90px 0px 70px;
}

.thumb-container {
    max-width: 100% !important;
    width: 100%;    
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.thumb-container img {
    flex: 1 1 0%; 
    min-width: 0;
    max-width: 100%;
    height: auto;
}

.socials {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.socials a {
    color: var(--color-blur);
}

.socials svg {
    opacity: 1;
    transition: all 0.4s ease;    
}

.socials svg:hover {
    opacity: 0.7;
}

.socials .face svg {
    width: 26px;
    height: 26px;
}

.box-1 {
    margin-left: 65px;    
    border: 1px solid #0b426b;
    background-color: #ffffff;
}

.contact-cards-row .box-1 {
    height: 100%;    
}

.kontakt .box-1 {
    margin-left: 0;    
}

.kontakt .col-sm-6:nth-of-type(1) {
    padding-right: 40px;    
}

.kontakt .col-sm-6:nth-of-type(2) {
    padding-left: 40px;    
}

.collapse-row {
    margin-top: 60px;
}

.kontakt .box-1 {
    margin-left: 0;    
}

.box-1.gray {  
    border: 1px solid #d5dbe0;
}

.box-1 p {
    margin: 0;    
    font-size: 14px;
    font-weight: 600;
}

.titula p {
    text-transform: uppercase;    
    line-height: 1.5 !important;
}

.box-1 small {
    font-size: 14px;
    font-weight: 400;
    text-transform: none;
}

.box-1 span {
    font-size: 16px;
    font-weight: 600;
}

.box-1  strong {
    font-size: 24px;
    font-weight: 600;
}

.box-1 a {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-weight: 400; 
    font-size: 16px;
    text-decoration: none;
    padding: 0;
}

.box-1 a span {
    text-decoration: none;
}

.box-1 a[href^="mailto:"] {
    text-decoration: underline;
    text-decoration-color: #d5dbe0;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.box-1 .naslov {
    margin-bottom: 0;
    background-color: var(--bgcolor-blue);
}

.box-1.gray .naslov {
    margin-bottom: 0;
    background-color: #d5dbe0;
}

.box-1 .naslov p {
    color: white;
    font-weight: 600;
    font-size: 1.25rem;
    padding: 24px;
}

.box-1.gray .naslov p {
    color: var(--bg-color-blue);
}


.box-1 .sadrzaj {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 50px 24px 40px; 
}


.box-1 .sadrzaj > div {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.box-1 .sadrzaj > div > * {
    line-height: 1;
    color: var(--color-blue);
}

.box-1 .dodatni-sadrzaj {
    margin-top: 40px;    
}

.box-1 .dodatni-sadrzaj a {
    font-weight: 600;
    font-size: 14px;
    text-decoration: underline;
    text-transform: uppercase;
}

.box-1 .info p {
    font-size: 16px;
    font-weight: 400;
}

.box-1 .sadrzaj .info-email {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
}

.info-email span {
    color: var(--color-blue);    
}

.icon-circle {
    height: 34px;
    width: 34px;
    border-radius: 100%;
    border: 2px solid #0b426b;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-circle svg {
    color: var(--color-red);    
}

.intro {
    width: 75%;
    margin-bottom: 90px;    
}

#pretrage .intro {
    margin-bottom: 70px;    
}

.intro h1 {
    margin-bottom: 40px;
    font-size: 38px;
    font-weight: 600;        
}

.intro h1 span {
    color: var(--color-red);       
}

.intro h2 {
    margin-bottom: 40px;
    font-size: 22px;
    font-weight: 500;       
    line-height: 34px;
}

.categories {
    position: absolute;
    top: 240px;
    right: 100px;
    opacity: 1;
    transition: all 0.5s ease;   
}

.categories button {
    color: var(--color-blue);
    outline: none;
    border: none;
    background: transparent;
}

.categories button::after {
    content: none;
}

.categories span.text-decoration-underline {
     opacity: 1; 
     text-transform: uppercase;
     transition: all 0.5s ease;
}

.categories:hover span.text-decoration-underline {
     opacity: 0.7; 
}

.categories button .arr_down svg {
    transition: all 0.4s ease;    
}

.categories .dropdown-toggle[aria-expanded="true"] .arr_down svg {
    transform: translateY(3px);
}

#pretrage .categories {
    position: relative;
    text-align: end;
    margin-bottom: 60px;
    top: unset;
    left: unset;
    right: unset;
}

.dropdown-item:focus, .dropdown-item:hover {
    color: var(--color-red);
    background-color: var(--bgcolor-hover-gray);
}

.container-fluid.kontakt {
    max-width: 75%;    
}

.accordion-item:first-of-type>.accordion-header .accordion-button {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.accordion-item:first-of-type {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.accordion-button {
    gap: 5px;
    font-size: 18px;
    font-weight: 600;
    color: var(--color-blue);
    padding: 24px;    
}

.accordion-button:focus {
    box-shadow: none;
}

.accordion-button:not(.collapsed) {
    color: var(--color-red);
    background-color: #ffffff;
    box-shadow: none;
}

.accordion-body {
    padding: 24px 44px 34px 24px;
}
/*
.accordion-body .row {
    row-gap: 60px;
}
*/
.accordion-body .row .col-lg-6 {
    height: fit-content;
    padding-top: 30px;
    padding-bottom: 30px;
}

.accordion-body .row .col-lg-6:nth-child(2n+1) {
    padding-right: 40px;
}

.accordion-body .row .col-lg-6:nth-child(2n+2) {
    padding-left: 40px;
}

.accordion-body .box-1{
    border: none;
}

.accordion-body .box-1 .sadrzaj {
    padding: 0px;
}

.row.vijece .col {
    display: flex;
    justify-content: center;    
}

.image-wrapper {
    position: relative;
    border: 2px solid var(--bgcolor-hover-gray);
    width: fit-content;
    height: fit-content;
    overflow: hidden;
}

.image-text {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 7%;
    width: 100%;
    height: fit-content;
    background-color: #0b416bdc;
    display: flex;
    flex-direction: column;
    align-items: start;
    text-align: start;
    gap: 10px;
}

.image-text h4 {
    position: relative;
    color: #ffffff;
}

.image-text h4::after {
    content: "";
    color: #ffffff;
    position: absolute;
    bottom: -5px;
    left: 0;
    height: 2px;
    width: 50%;
    background-color: #ffffff;
    transition: all 0.5s ease;
}


.image-wrapper:hover .image-text h4::after {
    width: 100%;    
} 


.image-text p {
    color: #ffffff;
}

.image-text .stranka {
    text-transform: uppercase;    
}


.pretrage {
    max-width: 75%;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 60px;
    margin-bottom: 60px;
}

.pretraga-clanak {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 20px;
}

.pretraga-clanak h3 {
    font-weight: 600;
    font-size: 20px;
    margin-bottom: 0;
}

.pretraga-clanak p {
    font-weight: 400;
    font-size: 16px;
}

.pretraga-clanak span, time {
    font-weight: 700;
    font-size: 14px;
    color: var(--color-red);
}

.pretraga-clanak span {
    text-transform: uppercase;
    position: relative;
}

.clanak-vrijeme {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-red);
}

.sjednica2 {
    max-width: 400px;
    background-color: #d5dbe0;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    padding: 24px;
    border-radius: 25px;
}

.sjednica2 p {
    margin: 0;    
}

.sjednica2-icon {
    height: fit-content;
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    border-radius: 50%;
    flex-shrink: 0;
    padding: 24px;
}

.sjednica2-icon svg {
    width: 45px;
    height: 45px;
}

.sjednica2-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.sjednica2-content p {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-red);
}

.prijenos {
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 16px 20px;
    text-decoration: none;
    background-color: var(--color-red);
    transition: all 0.5s ease;    
}

.prijenos span {
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    background-color: var(--color-red);
    color: #ffffff;
    transition: all 0.5s ease;    
}

.prijenos svg {
    background-color: var(--color-red);
    color: #ffffff;
    transition: all 0.5s ease;
}

/*------------------breadcrumb-----------------*/
.nav_breadcrumb {
  /*  visibility: hidden; */
    margin-bottom: 120px;    
    gap: 38px;
}

.breadcrumb-list {
    list-style: none;
    padding-left: 0;
    gap: 38px;
    flex-wrap: wrap; 
    row-gap: 20px; 
}

.bread-ellipsis {
    display: none;    
}

.breadcrumb-list-item {
    position: relative;
    color: var(--color-blue);    
}

.breadcrumb-list-item::before {
    content: url("https://www.zadar.sime.futuro.is/themes/grad-zadar/assets/images/chevron-right.png");  
    position: absolute;
    left: -22px;
}

.breadcrumb-list-item .chevron svg  {
    color: #b5b8bb;    
}

.breadcrumb-item a {
    color: #0b426b;
}

.breadcrumb-item.active {
    font-weight: bold;    
}

.chevron.last {
    display: none;    
}

/*------------------mixit-legenda----------------*/
.mixit-legenda {
    display: flex;
    align-items: center;
    gap: 48px;
    padding: 16px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 120px;   
    flex-wrap: wrap;
}

.mixit-legenda-container {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.mixit-legenda-container p {
    position: relative;
    text-transform: uppercase;
    transition: all 0.4s ease;
}

.mixit-legenda-container p::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #0b426b;
    transition: all 0.4s ease;
}

.mixit-legenda-container:hover p {
    opacity: 0.8;
}
.mixit-legenda-container:hover p::after {
    width: 100%;
}

.mixit-icon {
    flex-shrink: 0;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mixit-legenda .mixit-icon {
    width: 20px;
    height: 20px;
}

.svi-planovi .mixit-icon {
      border-radius: 100%;
      background: linear-gradient(
        to right, 
        #7fc343 33.33%,  
        #2c7bb9 33.33%, #2c7bb9 66.66%,
        #ef8b0a 66.66%  
    );
}

.detaljni-planovi .mixit-icon, .otvoreni-postupci .mixit-icon {
    border-radius: 100%;
    background-color: #7fc343;
}

.urbanisticki-planovi .mixit-icon, .pregovaracki-postupci .mixit-icon {
    background-color: #2c7bb9;
}

.provedbeni-planovi .mixit-icon, .drustvene-usluge .mixit-icon {
    padding-top: 3px;
    background-color: #ef8b0a;
    clip-path: polygon(50% 0%, 100% 40%, 80% 100%, 20% 100%, 0% 40%);
}

.drustvene-usluge .mixit-icon {
    background-color: #9370db;
}

.ostali-planovi .mixit-icon {
    border-radius: 100%;
    background-color: transparent;
    border: 2px solid #8191a1;
}

.prethodna-savjetovanja .mixit-icon {
    border-radius: 100%;
    background-color: transparent;
    border: 2px solid #c92f61;
}

.projektni-natjecaji .mixit-icon {
    background-color: #ef8b0a;
    clip-path: polygon(40% 0%, 100% 0%, 60% 100%, 0% 100%);
    height: 17px;
}

.mixit-legenda-container.active p::after {
    width: 100% !important;
    background-color: #0b426b;
}
.mixit-legenda-container.active p {
    opacity: 1 !important;
}

#mixit-list .mix {
    opacity: 1;    
}

#mixit-list .row {
    align-content: start;
}

#mixit-list .col {
    padding-left: 0rem;
    padding-right: 3rem;    
}

.mixitup-control-active p {
    color: var(--color-red);    
}

/*------------------pagination----------------*/

.nav_pagination {
    position: relative;
    padding-top: 100px;
}

.nav_pagination .pagination {
    justify-content: center;
    align-items: center;
    gap: 20px;    
} 

.page-item.numb {
    width: 40px; 
    height: 40px;    
}

.page-link {
    border: none;    
}

.page-link:hover {
    border: none;  
    background-color: transparent;
}

.page-item.numb .page-link {
    color: #0b426b;
    background-color: #f3f5f7;
    transition: all 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-item.numb .page-link:hover {
    background-color: #0b426b;
    color: white;
}

.page-item.left, .page-item.right{
    background-color: transparent;
    transition: all 0.4s ease;
}

.page-item.left .page-link, .page-item.right .page-link {
    background-color: transparent;
}

.page-item.left:hover {
    transform: translateX(-5px);
}

.page-item.right:hover {
    transform: translateX(5px);
}

@media (hover: hover) {

    .prijenos:hover {
         background-color: #ffffff;   
    }
    
    .prijenos:hover span,
    .prijenos:hover svg {
        background-color: #ffffff;
        color: var(--color-red);
    }

}


@media (max-width: 1399px) {
    .subpages-container {
        padding: 55px 80px 100px 80px;  
    }   
    
    .submenu {
        padding-bottom: 200px;    
    }
    
    .categories {
        right: 80px;
    }
    
        
    .sjednica-vijeca .row { 
        flex-direction: column-reverse;
        row-gap: 100px;
    }
}

@media (max-width: 1199px) {
    .box-1 {
        margin-left: 0;    
    }
    

    /*
    #mixit-list .row .col:nth-child(2n+1) {
        padding-right: 1rem;
        padding-left: 0;
    }
    
    #mixit-list .row .col:nth-child(2n+2) {
        padding-right: 0;
        padding-left: 1rem;
    }
    */
    #mixit-list .row .col {
        padding-right: 0;
        padding-right: 2rem;
    }
    
    .container-fluid.kontakt {
        max-width: 100%;
    }
    
    .subpages-row.contact-cards-row {
        row-gap: 40px;    
    }

    .subpages-row {
        row-gap: 100px;    
    }
    

}

@media (max-width: 991px) {
    .subpages-container {
        padding: 35px 50px 100px 50px; 
        background: url('https://www.zadar.sime.futuro.is/themes/grad-zadar/assets/icons/Donat_mob.svg');
        background-position: 50% 0;
        background-size: 70%;
        background-repeat: no-repeat;
    }    
    
   .submenu {
        padding-bottom: 180px;    
    }
    
    .categories {
        top: 220px;
        right: 50px;
    }
    
    .intro {
        width: 100%;    
    } 
    
    .subpages-content > :is(p, a, h1, h2, h3, h4, h5, h6, ul, li, strong, small, span,div, blockquote) {
        max-width: 100%;
    }
    
    .subpages-content .img-container {
        margin: 40px auto;
        float: unset;
        padding-left: 0; 
        max-width: 80% !important;
    }

    
    .accordion-body .row .col-lg-6 {
        padding-right: 0px !important;
        padding-left: 0px !important;
    }
    
    .pretrage {
        max-width: 100%;
    }

}

@media (max-width: 767px) {
    .subpages-container {
        padding: 35px 16px 70px 16px;  
    }   
    
   .submenu {
        padding-bottom: 150px;    
    }
    
    .categories {
        top: unset;
        right: unset;
        position: relative;
        text-align: end;
        margin-bottom: 40px;
    }
    
    .file-container a {
        max-width: 100%;
    }
    
    .nav_breadcrumb {
        margin-bottom: 80px;
    }
        
    .breadcrumb-list:has(.breadcrumb-list-item:nth-child(4))  .bread-ellipsis {
        display: block;    
    }
    
    .breadcrumb-list:has(.breadcrumb-list-item:nth-child(4)) .breadcrumb-list-item:not(:last-child) {
        display: none;
    }
    
    #pretrage .intro {
         margin-bottom: 50px;
    }
    
    #pretrage .categories {
        margin-bottom: 40px;
    }
    
    .intro {
        margin-bottom: 50px;
    }
    
    .intro h1 {
        font-size: 34px; 
    } 
    
    .mixit-legenda {
        margin-bottom: 80px;
        gap: 24px;
    }
        
    #mixit-list .row .col {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
    
    .kontakt .col-sm-6:nth-of-type(1) {
        padding-right: 10px;    
    }
    
    .kontakt .col-sm-6:nth-of-type(2) {
        padding-left: 10px;    
    }

}

@media (max-width: 575px) {
    /*
    .categories {
        top: 290px;
    }
    */
    
    .nav_breadcrumb {
        margin-bottom: 70px;
    }
    
    .intro {
        margin-bottom: 40px;
    }
    
    .intro h1 {
        font-size: 30px; 
    } 
    
    .intro h2 {
        font-size: 20px;    
    }
    
    .mixit-legenda {
        margin-bottom: 60px;
        gap: 16px;
    }
     
    .subpages-content .img-container {
        margin: 30px auto;
        max-width: 90% !important;
    }
    
   .kontakt .col-sm-6:nth-of-type(1) {
        padding-right: 0px;    
    }
    
    .kontakt .col-sm-6:nth-of-type(2) {
        padding-left: 0px;    
    }
}

@media (max-width: 450px) {

    .subpages-content .img-container {
        max-width: 100% !important;
    }
    
    
    .sjednica2 {
        width: fit-content;
        justify-content: unset;
        gap: 1rem;
        padding: 16px;
        border-radius: 16px;
    }
    
    .sjednica2-icon {
        padding: 16px;
    }
    
    .sjednica2-icon svg {
        width: 35px;
        height: 35px;
    }
      
    .sjednica2-content p {
        font-size: 16px;
        font-weight: 600;
        color: var(--color-red);
    }
    
    .prijenos {
        border-radius: 3px;
        gap: 10px;
        padding: 10px 16px;   
    }
    
    .prijenos span {
        font-size: 14px;
        font-weight: 600; 
    }
    
    .prijenos svg {
        width: 16px;
        height: 16px;
    }

}

:root {
  --acc_color_1: #000;
  --acc_color_2: #fff;
  --border_radius: 25px;
}

.accessibility-wrapper {
  position: relative;
  width: 46px;
  height: 46px;
  border: 1px solid var(--color-red);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /*
  background-image: url('https://zadar.sime.futuro.is/themes/grad-zadar/assets/images/eye.svg');
  background-position: center;
  background-size: 30px 26px;
  background-repeat: no-repeat; 
  background-color: var(--color-red);
  border-radius: 100%;
  */
  background-color: var(--color-red);
  border-radius: 100%;
  cursor: pointer;
  transition: all 0.4s ease;
}
.accessibility-wrapper svg {
    transition: all 0.4s ease;
    color: #ffffff;
}

.accessibility-wrapper:hover {
  background-color: var(--bgcolor-hover-gray);
 /* transform: scale(1.03); */
}
.accessibility-wrapper:hover svg {
  color: var(--color-red);
}

.accessibility-wrapper.mob {
  display: none;
}

.hidden {
  display: none !important;
}

.no-initial-transition,
.no-initial-transition * {
  transition: none !important;
}

#accessibility-modal,
#accessibility-modal * {
  /* transition: all 0.3s ease 0s; */
  font-family: "calibri", sans-serif;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  user-select: none;
}

#accessibility-modal {
  position: fixed;
  top: 30px;
  width: 98%;
  max-width: 500px;
  height: auto;
  max-height: 90vh;
  background: var(--acc_color_2);
  z-index: 1000;
  justify-content: center;
  border-radius: 0 var(--border_radius) var(--border_radius) 0;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  overflow: clip;
  display: flex;
  flex-direction: column;
  transition: all 0.4s ease;
}

#accessibility-modal #closeBtn {
  position: absolute;
  top: 0;
  left: 0;
  margin: 10px;
  width: 46px;
  height: 46px;
  border: 1px solid var(--color-blue);
  border-radius: var(--border_radius);
  background: var(--color-blue);
  color: var(--acc_color_2);
  cursor: pointer;
  overflow: clip;
  outline: none;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.4s ease;
}

#accessibility-modal #closeBtn:hover {
    background-color: var(--bgcolor-hover-gray);    
}

#accessibility-modal #closeBtn svg {
    transition: all 0.4s ease;    
}
#accessibility-modal #closeBtn:hover svg {
    color: var(--color-blue);    
}

#accessibility-modal.right {
  right: 0;
  transform: translate(0%);
  border-radius: var(--border_radius) 0 0 var(--border_radius);
}

#accessibility-modal.close {
  position: fixed;
  top: 30px;
  right: 0;
  transform: translate(100%);
 /* width: 46px;
  height: 46px; */
  border-radius: var(--border_radius);
  cursor: pointer;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  overflow: clip;
  padding: 0;
}

#accessibility-modal.close #closeBtn {
  position: absolute;
  width: 46px;
  height: 46px;
  border: 1px solid var(--color-blue);
  background: none;
  color: var(--acc_color_2);
  background: var(--color-blue);
  font-size: 20px;
  cursor: pointer;
 /* margin: 0; */
  transform: translate(0, 0);
}

#accessibility-modal #closeBtn svg {
  width: 20px;
  height: 20px;
}

#accessibility-modal.close #closeBtn svg {
  width: 30px;
  height: 26px;
}

/*
#accessibility-modal.close:hover {
  background: #ffffff;
  transform: scale(1.05);
}

#accessibility-modal.close:hover #closeBtn {
  background: #ffffff;
}
*/

#accessibility-modal.close:hover #closeBtn svg path {
  fill: var(--color-blue);
}

#accessibility-modal #headerContent {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(100% - 80px);
  height: 46px;
  min-height: 46px;
  background: var(--color-blue);
  color: var(--acc_color_2);
  border-radius: var(--border_radius);
  margin: 10px 10px 10px 70px;
}

#accessibility-modal.right #headerContent {
  margin: 10px 10px 10px 70px;
}

#accessibility-modal #headerContent p {
  font-size: 20px;
  font-weight: 600;
}

#accessibility-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: start;
  width: 100%;
  height: auto;
  transition: all 0.3s ease 2s;
  overflow-y: auto;
  margin-bottom: 80px;
}

#accessibility-tools::-webkit-scrollbar {
  width: 10px;
  background: var(--acc_color_2);
}

#accessibility-tools::-webkit-scrollbar-thumb {
  background: var(--color-blue);
  border-radius: 10px;
}

.acc-item {
  min-width: 120px;
  width: 33%;
  max-width: 200px;
  height: auto;
  margin: 0;
  cursor: pointer;
}


.acc-item:hover .acc-child {
  box-shadow: 0 0 5px 4px rgba(11, 66, 107, 0.5);
}

.acc-item:hover .acc-child.active {
  filter: opacity(0.8);
  border: 1px solid var(--acc_color_2);
  color: var(--acc_color_2);
}

.acc-child {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: auto;
  height: auto;
  aspect-ratio: 1/1;
  background: var(--acc_color_2);
  border-radius: var(--border_radius);
  margin: 10px;
  padding: 10px 10px 0;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--color-blue);
  color: var(--color-blue);
  transition: all 0.4s ease;
}

#accessibility-modal .acc-child p {
  font-size: 18px;
}

.acc-child.active {
  background: var(--color-blue);
  color: var(--acc_color_2);
  box-shadow: none;
  border: 1px solid var(--color-blue);
}

.acc-progress-parent {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding-bottom: 10px;
}

.acc-progress-child {
  min-width: 30%;
  width: 48%;
  max-width: 48%;
  height: 3px;
  margin: 0 1%;
  background: var(--color-blue);
  border-radius: 5px;
}

.acc-child.active .acc-progress-child {
  background: var(--acc_color_2);
  opacity: 0.5;
}

.acc-child.active .acc-progress-child.active {
  opacity: 1;
}

#accessibility-tools svg,
#accessibility-tools img {
  width: 30px;
  height: 30px;
  margin-bottom: 10px;
}

#acc-footer {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  background: var(--acc_color_2);
}
/*
#accessibility-modal.close #acc-footer {
  display: none;
}
*/
#reset-all {
  width: calc(100% - 20px);
  height: 46px;
  background: var(--color-blue);
  color: var(--acc_color_2);
  border-radius: var(--border_radius);
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px;
  border: 1px solid var(--color-blue);
  transition: all 0.4s ease;
}

#reset-all:hover {
  background-color: var(--bgcolor-hover-gray);
  color: var(--color-blue);
}

/*Accessibility Tools*/

.invert {
  filter: invert(1);
}

.grayscale {
  filter: grayscale(1);
}

.low-saturation {
  filter: saturate(20%);
}

.high-saturation {
  filter: saturate(200%);
}

.underline-style-0 a {
  text-decoration: none;
  background: black !important;
  color: yellow !important;
  font-weight: bolder;
}

.underline-style-0 a:hover,
.underline-style-2 a:hover,
.underline-style-1 a:hover {
  text-decoration: underline !important;
}

.underline-style-1 a {
  text-decoration: none;
  background: #ffd740 !important;
  color: #005a9c !important;
  font-weight: bolder;
}

.underline-style-2 a {
  text-decoration: none;
  background: white !important;
  color: black !important;
  font-weight: bolder;
}

.contrast-style-0 {
  filter: contrast(0.5);
}

.contrast-style-1 {
  filter: contrast(1.5);
}

.contrast-style-2 {
  filter: contrast(2);
}

/*Apply Two or more filters*/

.invert.grayscale {
  filter: invert(1) grayscale(1);
}

.invert.low-saturation {
  filter: invert(1) saturate(20%);
}

.invert.high-saturation {
  filter: invert(1) saturate(200%);
}

.invert.contrast-style-0 {
  filter: invert(1) contrast(0.5);
}

.invert.contrast-style-1 {
  filter: invert(1) contrast(1.5);
}

.invert.contrast-style-2 {
  filter: invert(1) contrast(2);
}

.grayscale.low-saturation {
  filter: grayscale(1) saturate(20%);
}

.grayscale.high-saturation {
  filter: grayscale(1) saturate(200%);
}

.grayscale.contrast-style-0 {
  filter: grayscale(1) contrast(0.5);
}

.grayscale.contrast-style-1 {
  filter: grayscale(1) contrast(1.5);
}

.grayscale.contrast-style-2 {
  filter: grayscale(1) contrast(2);
}

.low-saturation.high-saturation {
  filter: saturate(20%) saturate(200%);
}

.low-saturation.contrast-style-0 {
  filter: saturate(20%) contrast(0.5);
}

.low-saturation.contrast-style-1 {
  filter: saturate(20%) contrast(1.5);
}

.low-saturation.contrast-style-2 {
  filter: saturate(20%) contrast(2);
}

.high-saturation.contrast-style-0 {
  filter: saturate(200%) contrast(0.5);
}

.high-saturation.contrast-style-1 {
  filter: saturate(200%) contrast(1.5);
}

.high-saturation.contrast-style-2 {
  filter: saturate(200%) contrast(2);
}

.contrast-style-0.contrast-style-1 {
  filter: contrast(0.5) contrast(1.5);
}

.contrast-style-0.contrast-style-2 {
  filter: contrast(0.5) contrast(2);
}

.contrast-style-1.contrast-style-2 {
  filter: contrast(1.5) contrast(2);
}

.invert.grayscale.low-saturation {
  filter: invert(1) grayscale(1) saturate(20%);
}

.invert.grayscale.high-saturation {
  filter: invert(1) grayscale(1) saturate(200%);
}

.invert.grayscale.contrast-style-0 {
  filter: invert(1) grayscale(1) contrast(0.5);
}

.invert.grayscale.contrast-style-1 {
  filter: invert(1) grayscale(1) contrast(1.5);
}

.invert.grayscale.contrast-style-2 {
  filter: invert(1) grayscale(1) contrast(2);
}

.invert.low-saturation.high-saturation {
  filter: invert(1) saturate(20%) saturate(200%);
}

.invert.low-saturation.contrast-style-0 {
  filter: invert(1) saturate(20%) contrast(0.5);
}

.invert.low-saturation.contrast-style-1 {
  filter: invert(1) saturate(20%) contrast(1.5);
}

.invert.low-saturation.contrast-style-2 {
  filter: invert(1) saturate(20%) contrast(2);
}

.invert.high-saturation.contrast-style-0 {
  filter: invert(1) saturate(200%) contrast(0.5);
}

.invert.high-saturation.contrast-style-1 {
  filter: invert(1) saturate(200%) contrast(1.5);
}

.invert.high-saturation.contrast-style-2 {
  filter: invert(1) saturate(200%) contrast(2);
}

.invert.contrast-style-0.contrast-style-1 {
  filter: invert(1) contrast(0.5) contrast(1.5);
}

.invert.contrast-style-0.contrast-style-2 {
  filter: invert(1) contrast(0.5) contrast(2);
}

.invert.contrast-style-1.contrast-style-2 {
  filter: invert(1) contrast(1.5) contrast(2);
}

.grayscale.low-saturation.high-saturation {
  filter: grayscale(1) saturate(20%) saturate(200%);
}

.grayscale.low-saturation.contrast-style-0 {
  filter: grayscale(1) saturate(20%) contrast(0.5);
}

.grayscale.low-saturation.contrast-style-1 {
  filter: grayscale(1) saturate(20%) contrast(1.5);
}

.grayscale.low-saturation.contrast-style-2 {
  filter: grayscale(1) saturate(20%) contrast(2);
}

.grayscale.high-saturation.contrast-style-0 {
  filter: grayscale(1) saturate(200%) contrast(0.5);
}

.grayscale.high-saturation.contrast-style-1 {
  filter: grayscale(1) saturate(200%) contrast(1.5);
}

.grayscale.high-saturation.contrast-style-2 {
  filter: grayscale(1) saturate(200%) contrast(2);
}

.grayscale.contrast-style-0.contrast-style-1 {
  filter: grayscale(1) contrast(0.5) contrast(1.5);
}

.grayscale.contrast-style-0.contrast-style-2 {
  filter: grayscale(1) contrast(0.5) contrast(2);
}

.grayscale.contrast-style-1.contrast-style-2 {
  filter: grayscale(1) contrast(1.5) contrast(2);
}

.low-saturation.high-saturation.contrast-style-0 {
  filter: saturate(20%) saturate(200%) contrast(0.5);
}

.low-saturation.high-saturation.contrast-style-1 {
  filter: saturate(20%) saturate(200%) contrast(1.5);
}

.low-saturation.high-saturation.contrast-style-2 {
  filter: saturate(20%) saturate(200%) contrast(2);
}

.low-saturation.contrast-style-0.contrast-style-1 {
  filter: saturate(20%) contrast(0.5) contrast(1.5);
}

.low-saturation.contrast-style-0.contrast-style-2 {
  filter: saturate(20%) contrast(0.5) contrast(2);
}

.low-saturation.contrast-style-1.contrast-style-2 {
  filter: saturate(20%) contrast(1.5) contrast(2);
}

.high-saturation.contrast-style-0.contrast-style-1 {
  filter: saturate(200%) contrast(0.5) contrast(1.5);
}

.high-saturation.contrast-style-0.contrast-style-2 {
  filter: saturate(200%) contrast(0.5) contrast(2);
}

.high-saturation.contrast-style-1.contrast-style-2 {
  filter: saturate(200%) contrast(1.5) contrast(2);
}

.contrast-style-0.contrast-style-1.contrast-style-2 {
  filter: contrast(0.5) contrast(1.5) contrast(2);
}

.invert.grayscale.low-saturation.high-saturation {
  filter: invert(1) grayscale(1) saturate(20%) saturate(200%);
}

.invert.grayscale.low-saturation.contrast-style-0 {
  filter: invert(1) grayscale(1) saturate(20%) contrast(0.5);
}

.invert.grayscale.low-saturation.contrast-style-1 {
  filter: invert(1) grayscale(1) saturate(20%) contrast(1.5);
}

.invert.grayscale.low-saturation.contrast-style-2 {
  filter: invert(1) grayscale(1) saturate(20%) contrast(2);
}

.invert.grayscale.high-saturation.contrast-style-0 {
  filter: invert(1) grayscale(1) saturate(200%) contrast(0.5);
}

.invert.grayscale.high-saturation.contrast-style-1 {
  filter: invert(1) grayscale(1) saturate(200%) contrast(1.5);
}

.invert.grayscale.high-saturation.contrast-style-2 {
  filter: invert(1) grayscale(1) saturate(200%) contrast(2);
}

.invert.low-saturation.high-saturation.contrast-style-0 {
  filter: invert(1) saturate(20%) saturate(200%) contrast(0.5);
}

.invert.low-saturation.high-saturation.contrast-style-1 {
  filter: invert(1) saturate(20%) saturate(200%) contrast(1.5);
}

.invert.low-saturation.high-saturation.contrast-style-2 {
  filter: invert(1) saturate(20%) saturate(200%) contrast(2);
}

.invert.low-saturation.contrast-style-0.contrast-style-1 {
  filter: invert(1) saturate(20%) contrast(0.5) contrast(1.5);
}

.invert.low-saturation.contrast-style-0.contrast-style-2 {
  filter: invert(1) saturate(20%) contrast(0.5) contrast(2);
}

.invert.low-saturation.contrast-style-1.contrast-style-2 {
  filter: invert(1) saturate(20%) contrast(1.5) contrast(2);
}

.invert.high-saturation.contrast-style-0.contrast-style-1 {
  filter: invert(1) saturate(200%) contrast(0.5) contrast(1.5);
}

.invert.high-saturation.contrast-style-0.contrast-style-2 {
  filter: invert(1) saturate(200%) contrast(0.5) contrast(2);
}

.invert.high-saturation.contrast-style-1.contrast-style-2 {
  filter: invert(1) saturate(200%) contrast(1.5) contrast(2);
}

.grayscale.low-saturation.high-saturation.contrast-style-0 {
  filter: grayscale(1) saturate(20%) saturate(200%) contrast(0.5);
}

.grayscale.low-saturation.high-saturation.contrast-style-1 {
  filter: grayscale(1) saturate(20%) saturate(200%) contrast(1.5);
}

.grayscale.low-saturation.high-saturation.contrast-style-2 {
  filter: grayscale(1) saturate(20%) saturate(200%) contrast(2);
}

.grayscale.low-saturation.contrast-style-0.contrast-style-1 {
  filter: grayscale(1) saturate(20%) contrast(0.5) contrast(1.5);
}

.grayscale.low-saturation.contrast-style-0.contrast-style-2 {
  filter: grayscale(1) saturate(20%) contrast(0.5) contrast(2);
}

.grayscale.low-saturation.contrast-style-1.contrast-style-2 {
  filter: grayscale(1) saturate(20%) contrast(1.5) contrast(2);
}

.grayscale.high-saturation.contrast-style-0.contrast-style-1 {
  filter: grayscale(1) saturate(200%) contrast(0.5) contrast(1.5);
}

.grayscale.high-saturation.contrast-style-0.contrast-style-2 {
  filter: grayscale(1) saturate(200%) contrast(0.5) contrast(2);
}

.grayscale.high-saturation.contrast-style-1.contrast-style-2 {
  filter: grayscale(1) saturate(200%) contrast(1.5) contrast(2);
}

.low-saturation.high-saturation.contrast-style-0.contrast-style-1 {
  filter: saturate(20%) saturate(200%) contrast(0.5) contrast(1.5);
}

.low-saturation.high-saturation.contrast-style-0.contrast-style-2 {
  filter: saturate(20%) saturate(200%) contrast(0.5) contrast(2);
}

.low-saturation.high-saturation.contrast-style-1.contrast-style-2 {
  filter: saturate(20%) saturate(200%) contrast(1.5) contrast(2);
}

.hide-images img {
  display: none;
}

.hide-video video {
  display: none;
}

.line-height-0 * {
  line-height: 1.5;
}

.line-height-1 * {
  line-height: 1.8;
}

.line-height-2 * {
  line-height: 2;
}

#cursor {
  position: fixed;
  z-index: 999999999;
  pointer-events: none;
  top: 0;
  left: 0;
}

#cursor.cursor-0 {
  width: 50px;
  height: auto;
  aspect-ratio: 1/1;
  background: rgba(255, 0, 0, 0.5);
  border: 2px solid var(--acc_color_2);
  box-shadow: 0 0 20px 0 var(--acc_color_2);
  border-radius: 50%;
  mix-blend-mode: difference;
  transition: all 0.1s ease;
  transform-origin: center;
  transform: translate(-50%, -50%);
}

#cursor.cursor-1 {
  width: 100%;
  height: 15vh;
  background: transparent;
  border: 10px solid var(--acc_color_2);
  border-left: 0;
  border-right: 0;
  box-shadow: 0 0 0 100vh rgb(0 0 0 / 50%);
  transition: none;
  transform: translate(0, -50%);
}

#cursor.cursor-2 {
  width: 25vw;
  height: 8px;
  background: var(--color-red);
  border: yellow 2px solid;
  transition: all 0.1s ease;
  transform-origin: center;
  transform: translate(-50%, 50%);
}

#triangle-cursor {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid yellow;
  position: fixed;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  transition: all 0.1s ease;
  z-index: 999999998;
  pointer-events: none;
  display: none;
}

@media (max-width: 768px) {
  .accessibility-wrapper {
    display: none;
  }

  .accessibility-wrapper.mob {
    display: block;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.futuro, .futuro span, .futuro strong {
	-webkit-transition:all 0.4s ease-in-out;
	-moz-transition:all 0.4s ease-in-out;
	-o-transition:all 0.4s ease-in-out;
	transition:all 0.4s ease-in-out;
}
.futuro {
	display:inline-block;
	position:relative;
	right:30px;
	float:right;
	width:25px;
	height:25px;
	color:#fff;
	text-decoration:none;
	overflow:hidden;
	-webkit-transform:translate3d(0,0,0);
	transform:translate3d(0,0,0);
}
.futuro.right {
	right:auto;
}
.futuro.neutral, .futuro.neutral:hover {
	text-shadow:1px 1px #333;
}
.futuro.light, .futuro.light:hover {
	color:#333;
}
.futuro span {
	display:block;
	width:24px;
	height:24px;
	position:absolute;
	z-index:10;
	background:#1d1d1d url('https://www.futuro.hr/img/potpis/futuro.png') center 5px no-repeat;
	background-size:18px auto;
	border-radius:50%;
}
.futuro.neutral.alt span {
	background-color:#666;
}
.futuro.dark.alt span,  
.futuro.light.alt span {
	background-color:#999;
}
.futuro.dark.alt2 span {
	background:transparent url('https://www.futuro.hr/img/potpis/futuro2.png') center -1px no-repeat;
	background-size:30px auto;
}
.futuro.dark.alt2:hover span {
	background-color:#d5261e;
}
.futuro strong {
	display:block;
	position:absolute;
	top:4px;
	left:15px;
	font-size:12px;
	font-weight:400;
	line-height:17px;
	opacity:0;
}
.futuro.right strong {
	left:-20px;
}
.futuro:hover {
	color:#fff;
	text-decoration:none;
	overflow:visible;
}
.futuro:hover span, .futuro.alt:hover span {
	background-color:#d5261e;
	border-radius:6px;
}
.futuro:hover strong {
	left:30px;
	opacity:1;
}
.futuro.right:hover strong {
	left:-40px;
}


@media screen and (max-width: 771px) {
    .futuro {
	display:inline-block;
	position:relative;
	right:30px;
	float:right;
	width:25px;
	height:25px;
	color:#fff;
	text-decoration:none;
	overflow:hidden;
	-webkit-transform:translate3d(0,0,0);
	transform:translate3d(0,0,0);
 }
}