:root {
    --colorTop: #08530D;
    --colorTopRgb: 8, 83, 13;
    --headerHeight: 45px;
    --colorTableHeader: #08530D;
    /* colorTop potamnjen za 40% (prati promjenu colorTop) */
    --colorLinkButtonBorder: color-mix(in srgb, var(--colorTop), #000000 40%);
}

* {
    margin: 0;
    padding: 0;
}

/* @font-face {
    font-family: 'titleFont';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/dm-serif-display-regular-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'titleFont';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/dm-serif-display-regular-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
} */

/*
@font-face {
    font-family: 'titleFont';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/montserrat-variable-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'titleFont';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/montserrat-variable-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
*/

@font-face {
    font-family: 'bodyFont';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/poppins-300-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'bodyFont';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/poppins-300-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}

@font-face {
    font-family: 'bodyFont';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/poppins-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'bodyFont';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/poppins-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}

@font-face {
    font-family: 'bodyFont';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/poppins-500-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'bodyFont';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/poppins-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}

@font-face {
    font-family: 'bodyFont';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/poppins-600-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'bodyFont';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/poppins-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}

@font-face {
    font-family: 'bodyFont';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/poppins-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'bodyFont';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/poppins-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}

@font-face {
    font-family: 'bodyFont';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/poppins-italic-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'bodyFont';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/poppins-italic-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}

/* ========================================================= */


@font-face {
    font-family: 'titleFont';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/poppins-300-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'titleFont';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/poppins-300-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}

@font-face {
    font-family: 'titleFont';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/poppins-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'titleFont';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/poppins-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}

@font-face {
    font-family: 'titleFont';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/poppins-500-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'titleFont';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/poppins-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}

@font-face {
    font-family: 'titleFont';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/poppins-600-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'titleFont';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/poppins-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}

@font-face {
    font-family: 'titleFont';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/poppins-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'titleFont';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/poppins-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}

@font-face {
    font-family: 'titleFont';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/poppins-italic-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'titleFont';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/poppins-italic-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}


body,
html {
    min-height: 100%;

}

html {
    background-color: #e0e0e0;
}

html {
    overflow-x: clip;
}

body {
    max-width: 1920px;
    margin: 0 auto;
    background-color: #ffffff;
}

header {
    position: relative;
    background-color: var(--colorTop);
    height: var(--headerHeight);
    width: 100%;
}

header a {
    color: #ffffff;
    text-decoration: none;
    font-family: 'titleFont', serif;
    font-weight: 400;
}

header ul.contact {
    display: flex;
    align-items: center;
    height: 100%;
    list-style: none;
    gap: 20px;
    padding-left: 40px;

}

header ul.contact li a {
    font-family: bodyFont !important;
    font-weight: 400;
    font-size: 14px;
}

header ul.contact a.email::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    vertical-align: -3px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='2'%20y='4'%20width='20'%20height='16'%20rx='2'/%3E%3Cpath%20d='m2%207%2010%206%2010-6'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='2'%20y='4'%20width='20'%20height='16'%20rx='2'/%3E%3Cpath%20d='m2%207%2010%206%2010-6'/%3E%3C/svg%3E") center/contain no-repeat;
}

header ul.contact a.tel::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    vertical-align: -3px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M22%2016.92v3a2%202%200%200%201-2.18%202%2019.79%2019.79%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6%2019.79%2019.79%200%200%201-3.07-8.67A2%202%200%200%201%204.11%202h3a2%202%200%200%201%202%201.72c.13.96.36%201.9.7%202.81a2%202%200%200%201-.45%202.11L8.09%209.91a16%2016%200%200%200%206%206l1.27-1.27a2%202%200%200%201%202.11-.45c.9.34%201.85.57%202.81.7A2%202%200%200%201%2022%2016.92z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M22%2016.92v3a2%202%200%200%201-2.18%202%2019.79%2019.79%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6%2019.79%2019.79%200%200%201-3.07-8.67A2%202%200%200%201%204.11%202h3a2%202%200%200%201%202%201.72c.13.96.36%201.9.7%202.81a2%202%200%200%201-.45%202.11L8.09%209.91a16%2016%200%200%200%206%206l1.27-1.27a2%202%200%200%201%202.11-.45c.9.34%201.85.57%202.81.7A2%202%200%200%201%2022%2016.92z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.topLogo {
    position: absolute;
    top: 80px;
    left: 20px;
    z-index: 10;
}

.topLogo a {
    display: block;
}

.topLogo svg {
    display: block;
    height: 150px;
    width: auto;
}

header nav {
    position: absolute;
    top: calc(50% + 100px);
    right: 20px;
    transform: translateY(-50%);
    z-index: 10;
    text-transform: uppercase;
    letter-spacing: 1px;
}

header nav ul {
    display: flex;
    justify-content: flex-end;
    list-style: none;
    gap: 0;
    font-size: 18px;
    /* background-color: rgba(0, 0, 0, 0.35); */
    padding: 0;
}

/* header nav a {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
} */

header nav>ul>li {
    position: relative;
}

header nav>ul>li>a {
    display: block;
    padding: 10px 12px;
}

header nav>ul>li>a {
    padding-top: 10px !important;
}

header nav .subMenu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    min-width: 260px;
    max-width: 340px;
    padding: 18px 0 8px;
    background-color: rgba(var(--colorTopRgb), 0.3);
    backdrop-filter: blur(6px);
    font-size: 15px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

header nav>ul>li:hover>.subMenu,
header nav>ul>li:focus-within>.subMenu {
    opacity: 1;
    visibility: visible;
}

header nav .subMenu a {
    display: block;
    padding: 8px 16px;
    text-shadow: none;
    line-height: 1.35;
}

header nav .subMenu a:hover {
    background-color: rgba(0, 0, 0, 0.25);
}

/* strelica od dva ruba: centrirana okomito neovisno o fontu */
header nav>ul>li>a.hasSub::after {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-left: 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    vertical-align: middle;
    transform: translateY(-2px) rotate(45deg);
}

.hero {
    position: relative;
    clear: both;
    display: grid;
    overflow: hidden;
}

.hero h1 {
    position: absolute;
    z-index: 5;
    left: 0;
    right: 0;
    bottom: 20px;
    width: auto;
    padding-left: 40px;
    color: #ffffff;
    text-align: left;
    font-family: 'titleFont', serif;
    font-size: 40px;
    font-weight: 600;
    line-height: 1;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}

.hero h1 small {
    display: block;
    margin: 0;
    font-family: 'titleFont', serif;
    font-size: 60%;
    line-height: 1.2;
}

.hero img {
    grid-area: 1 / 1;
    display: block;
    width: 100%;
    height: calc(100vh - 200px);
    opacity: 0;
    transition: opacity 0.8s ease;
    object-fit: cover;
}

.hero img.isActive,
.hero:not(.isReady) img:first-child {
    opacity: 1;
}

/* izvan naslovnice: puna visina ekrana bez headera (jača specifičnost nadjačava i visine iz media upita) */
.hero.isFull img {
    height: calc(100vh - var(--headerHeight));
    height: calc(100svh - var(--headerHeight));
}

.navToggle {
    display: none;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    z-index: 30;
    width: 34px;
    height: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    flex-direction: column;
    justify-content: space-between;
}

.navToggle span {
    display: block;
    height: 3px;
    background-color: #ffffff;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.isNavOpen .navToggle span:nth-child(1) {
    transform: translateY(12px) rotate(45deg);
}

.isNavOpen .navToggle span:nth-child(2) {
    opacity: 0;
}

.isNavOpen .navToggle span:nth-child(3) {
    transform: translateY(-13px) rotate(-45deg);
}

main,
.content,
article {
    max-width: 1280px;
    margin: 0 auto;
    padding: 40px 20px;
    box-sizing: border-box;
    font-family: 'bodyFont', sans-serif;
    font-size: 16px;
    line-height: 1.65;
    color: #222222;
}

#sectionInfo {
    display: none;
    position: relative;
    /* iznad loga u headeru (header ima z-index 50); dio ispod trake headera reže JS (clip-path) */
    z-index: 51;
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;
    width: 100%;
    max-width: 100% !important;
    padding: 20px !important;
}
#sectionInfo.isOpen {
    display: block;
}

#sectionInfo .sectionInner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 20px;
    background-color: var(--colorTop);
    color: #ffffff;
}

#sectionInfo .sectionInner h3,
#sectionInfo .sectionInner p,
#sectionInfo .sectionInner a {
    color: #ffffff;
}
#sectionInfo .sectionInner h3 {
    margin-top: 0;
}

/* blink kod tapa na poligon mape */
#sectionInfo .sectionInner.isBlink {
    animation: sectionBlink 0.35s ease-in-out 2;
}

@keyframes sectionBlink {
    50% {
        opacity: 0.2;
    }
}
main>*:first-child,
.content>*:first-child,
article>*:first-child,
.newsCards>*:first-child {
    margin-top: 0;
}

main h2,
.content h2,
article h2,
.newsCards h2,
main h3,
.content h3,
article h3,
.newsCards h3,
main h4,
.content h4,
article h4,
.newsCards h4 {
    font-family: 'titleFont', serif;
    font-weight: 400;
    line-height: 1.25;
    color: var(--colorTop);
}

main h2,
.content h2,
article h2,
.newsCards h2 {
    font-size: clamp(20px, 1.8vw, 26px);
    margin: 48px 0 16px;
}

main.section  h2
{
    font-weight: 600;
    font-size: clamp(16px, 1.8vw, 18px);
    margin: 48px 0 16px;
}

main.section  h1
{
    font-weight: 600;
    font-size: clamp(22px, 1.8vw, 20px);
    margin: 0;
}

main .sectionPresident dt,
main .sectionAssembly dt,
main .sectionDisciplinary dt,
main .sectionSecretary dt,
main .sectionGamekeeper dt,
main .sectionRelease dt,
main .sectionReleaseTeam dt,
main .sectionDamageTeam dt,
main .sectionSupervisor dt,
main .sectionHeadGamekeeper dt,
main .sectionSocietyPresident dt {
    font-family: 'bodyFont', serif;
    font-weight: 600;
    line-height: 1.25;
    color: var(--colorTop);
    font-size: clamp(16px, 2vw, 18px);
    margin: 30px 0 12px;
}

main .sectionPresident dd,
main .sectionAssembly dd,
main .sectionDisciplinary dd,
main .sectionSecretary dd,
main .sectionGamekeeper dd,
main .sectionRelease dd,
main .sectionReleaseTeam dd,
main .sectionDamageTeam dd,
main .sectionSupervisor dd,
main .sectionHeadGamekeeper dd,
main .sectionSocietyPresident dd {
    margin-left: 0;
    padding-left: 40px;
}
main .sectionPresident dd strong,
main .sectionAssembly dd strong,
main .sectionDisciplinary dd strong,
main .sectionSecretary dd strong,
main .sectionGamekeeper dd strong,
main .sectionRelease dd strong,
main .sectionReleaseTeam dd strong,
main .sectionDamageTeam dd strong,
main .sectionSupervisor dd strong,
main .sectionHeadGamekeeper dd strong,
main .sectionSocietyPresident dd strong {
    font-weight: 600;
}


main .sectionPresident dd::before,
main .sectionAssembly dd::before,
main .sectionDisciplinary dd::before,
main .sectionSecretary dd::before,
main .sectionGamekeeper dd::before,
main .sectionRelease dd::before,
main .sectionReleaseTeam dd::before,
main .sectionDamageTeam dd::before,
main .sectionSupervisor dd::before,
main .sectionHeadGamekeeper dd::before,
main .sectionSocietyPresident dd::before {
    content: "\2022";
    margin-right: 8px;
}

/* slide in s lijeva za elemente sadržaja lovne sekcije; klasu slideReady dodaje JS,
   pa bez JS-a sadržaj ostaje normalno vidljiv */
main.section.slideReady > * {
    opacity: 0;
    transform: translateX(-60px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

main.section.slideReady > .isVisible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    main.section.slideReady > * {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.homeRibbon {
    display: flex;
    justify-content: center;
    gap: 40px;
    max-width: 1280px;
    margin: 0 auto;
    height: 160px !important;
    box-sizing: border-box;
    font-family: 'bodyFont', sans-serif;
    color: #222222;
    text-align: center;
}

.homeRibbon article {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0;
    padding: 0;
    width: 130px;
    flex: 0 0 auto;
    text-align: center;
    max-height: 160px !important;
    height: 160px;
    overflow: hidden;
}

.homeRibbon article p {
    text-align: center;
    font-size: 18px;
    margin: 0;
    padding: 0;
    line-height: 1;
}

.homeRibbon article p:nth-of-type(2) {
    font-size: 50px;
    line-height: 50px;
    font-family: "titleFont";
    color: var(--colorTop);
    margin-top: 10px;
}

main h3,
.content h3,
article h3,
.newsCards h3 {
    font-size: clamp(20px, 2vw, 28px);
    margin: 36px 0 12px;
}

main h4,
.content h4,
article h4,
.newsCards h4 {
    font-size: clamp(17px, 1.5vw, 21px);
    margin: 28px 0 10px;
}

main p,
.content p,
article p,
.newsCards p {
    margin: 0 0 16px;
    text-align: justify;
    font-weight: 400;
}

main p b,
.content p b,
article p b,
.newsCards p b,
main p strong,
.content p strong ,
article p strong,
.newsCards p strong {
    margin: 0 0 16px;
    text-align: justify;
    font-weight: 600;
}

/* poveznica u obliku gumba, isti stil kao „Sve vijesti” */
a.aButton {
    display: inline-block;
    color: #ffffff;
    background-color: var(--colorTop);
    padding: 10px 25px;
    text-decoration: none;
    transition: all 500ms;
    /* outline: 3px var(--colorLinkButtonBorder) solid; */
    outline-offset: 0px;
    border-radius: 8px;
}

a.aButton:hover {
    background-color: #148a1c;
}

/* slike u sadržaju: nikad šire od stupca, s razmakom ispod kao p */
main img,
.content img,
article img,
.newsCards img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto 16px;
}

/* kartice s podacima (npr. Detaljni podaci o lovištu, stranica 254): na desktopu u jednom redu,
   centrirane; na mobitelu jedna ispod druge */
.huntRow {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 20px;
    margin: 0 0 32px;
}

.huntCard {
    flex: 0 1 420px;
    min-width: 0;
    padding: 20px 24px;
    box-sizing: border-box;
    border-top: 4px solid var(--colorTop);
    background-color: #f4f6f4;
}

.huntCard h4 {
    margin: 0 0 12px;
    text-transform: uppercase;
    font-weight: 700;
}

.huntCard dl {
    margin: 0 0 10px;
}

.huntCard dl:last-child {
    margin-bottom: 0;
}

.huntCard dt {
    font-size: 13px;
    color: #777777;
}

.huntCard dd {
    margin: 0;
}

@media (max-width: 767.98px) {

    .huntRow {
        flex-direction: column;
        align-items: center;
    }

    .huntCard {
        flex: none;
        width: 100%;
        max-width: 420px;
    }

}

main ul,
.content ul,
article ul,
.newsCards ul,
main ol,
.content ol,
article ol,
.newsCards ol {
    margin: 0 0 20px;
    padding-left: 24px;
    list-style: disc;
}

main ul li,
.content ul li,
article ul li,
.newsCards ul li,
main ol li,
.content ol li,
article ol li,
.newsCards ol li {
    margin-bottom: 8px;
    text-align: justify;
}

main a,
.content a,
article a,
.newsCards a {
    color: var(--colorTop);
    text-decoration: underline;
}

main a:hover,
.content a:hover,
article a:hover,
.newsCards a:hover {
    text-decoration: none;
}

main article,
.content article {
    max-width: none;
    padding: 0;
}

.newsCards h3 {
    margin-top: 0;
    font-size: 24px;
}

.newsCards h2 {
    display: block;
    color: #ffffff;
    width: 100%;
}

.newsCards h2 {
    grid-column: 1 / -1;
    font-size: 22px;
    font-family: bodyFont;
}

.newsCards h2 span {
    font-family: "titleFont";
    font-size: 30px;
}

.newsCards .bottom {
    grid-column: 1 / -1;
    color: #ffffff;
}

.newsCards .bottom a {
    display: inline-block;
    color: #ffffff;
    background-color: var(--colorTop);
    padding: 10px 25px;
    text-decoration: none;
    transition: all 500ms;
}

.newsCards .bottom a:hover {
    background-color: #0a6b11;
}

.newsCards {
    background-image: url('../images/forrest.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    font-family: 'bodyFont', sans-serif;
    font-size: 16px;
    line-height: 1.65;
    color: #222222;
    padding: 48px 20px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 320px));
    justify-content: center;
    gap: 24px;
    background-color: #f0f0f0;
}

.newsCards p {
    text-align: left;
}

.newsCards small {
    font-size: 15px;
    display: block;
    margin-bottom: 20px;
    font-style: italic;
}

.newsCards a::after {
    content: "\27F6";
    margin-left: 8px;
    display: inline-block;
    transition: transform 0.25s ease;
}

.newsCards a:hover::after {
    transform: translateX(6px);
}

.newsCards article>p:last-child {
    margin-top: auto;
    margin-bottom: 0;
    padding-top: 16px;
}

main .newsCards article,
.newsCards article {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 24px;
    border: 1px solid #dcdcdc;
    background-color: #fafafa;
}

footer {
    background-color: var(--colorTop);
    background-image: linear-gradient(rgba(8, 83, 13, 0.82), rgba(8, 83, 13, 0.82)), url('../images/forrest.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #ffffff;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 32px;
    /* padding: 48px max(20px, calc((100% - 1280px) / 2)); */
    padding: 40px 0 0;
    font-family: 'bodyFont', sans-serif;
    font-size: 16px;
    line-height: 1.65;
}

footer a {
    color: #ffffff;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

.footerCard {
    flex: 1 1 240px;
    max-width: 380px;
    width: 33%;
    text-align: center;
    padding-bottom: 40px;
}

.footerCard dl {
    padding-bottom: 10px;
    font-size: 14px;
}

.footerCard dl dt {
    font-style: italic;
}

.footerCard dl dd {
    display: block;
    box-sizing: border-box;
    padding-left: 20px;
}

.footerCard dl dd a {
    display: inline-block;
    text-decoration: underline;
}

.footerCard.card2 dl dt {
    font-size: 12px;
    padding: 0;
    padding-top: 20px;
    font-style: normal;
}

.footerCard.card2 dl:first-of-type dt {
    padding-top: 0;
}

.footerCard.card2 dl dd {
    padding: 0;
    font-size: 16px;
}

.footerCard.card2 dl dd a {
    display: block;
    text-decoration: none;
}

.footerCard dl dd a:hover {}

.footerCard.card1 {
    text-align: center;
}

.footerCard.card1 dl {
    width: 100%;
    padding: 0;
}

.footerCard.card1 dl:first-of-type {
    padding-bottom: 10px;
}

.footerCard.card1 dl:last-of-type {
    padding-top: 10px;
}

.footerCard.card1 dl dd {
    display: inline-block;
    padding: 0;
    margin: 0;
}

.footerCard.card1 dl dt {
    display: inline-block;
    padding: 0;
    margin: 0;
}

.footerCard.card3 {
    text-align: center;
}

.footerCard h3 {
    margin-bottom: 20px;
    font-weight: normal;
    font-size: 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}



.footerCard.card1 a {
    display: inline-block;
}

.footerCard.card3 a {
    display: block;
}

.footerCard svg {
    display: block;
    width: auto;
    height: 140px;
}


.footerData {
    flex: 0 0 100%;
    width: 100%;
    background-color: var(--colorTop);
    text-align: center;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.footerData a {
    text-decoration: underline;
}

@media (min-width: 961px) {

    footer {
        row-gap: 0;
    }

    .footerData .row {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 30px;
        width: 100%;
        max-width: 1280px;
        padding: 0 20px;
        box-sizing: border-box;
    }

    header nav .subMenu {
        transform: translateY(-40px);
        clip-path: inset(40px 0 0 0);
        transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.35s ease, clip-path 0.35s ease;
    }

    header nav>ul>li:hover>.subMenu,
    header nav>ul>li:focus-within>.subMenu {
        transform: translateY(0);
        clip-path: inset(0 0 0 0);
    }

    header nav .subMenu a {
        transition: background-color 0.2s ease, padding-left 0.2s ease;
    }

    header nav .subMenu a:hover {
        padding-left: 22px;
    }

}

@media (min-width: 1281px) {

    header nav>ul>li>a {
        padding-left: 9.6px;
        padding-right: 9.6px;
    }

}

@media (max-width: 1280px) {

    .hero h1 {
        padding-left: 20px;
        bottom: 15px;
    }

    header nav>ul {
        font-size: 12px;
    }

    header nav>ul>li>a {
        padding-left: 7px;
        padding-right: 7px;
    }

    .topLogo svg {
        height: 105px;
    }

    header nav {
        top: calc(50% + 70px);
    }

    header nav .subMenu {
        font-size: inherit;
    }

}

@media (max-width: 960px) {

    footer {
        flex-direction: column;
        align-items: center;
        padding: 20px 0 0;
        margin: 0;
    }

    .footerCard {
        flex: 0 0 auto;
        width: 100%;
        max-width: 380px;
    }

    .footerCard.card2 h3 {
        text-align: center;
    }

    .footerCard.card2 dl {
        width: 100%;
    }

    .footerCard.card2 dl dt {
        width: 100%;
        text-align: center;
    }

    .footerCard.card2 dl dd {
        padding-left: 0;
        width: 100%;
        text-align: center;
    }

    .footerData .row {
        height: 80px;
        max-height: 80px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .newsCards {
        grid-template-columns: repeat(2, minmax(0, 320px));
    }

    .newsCards article:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        justify-self: center;
        width: 100%;
        max-width: 320px;
    }

    main p,
    .content p,
    article p,
    main ul li,
    .content ul li,
    article ul li,
    main ol li,
    .content ol li,
    article ol li {
        text-align: left;
    }

    :root {
        --headerHeight: 80px;
    }

    header {
        position: sticky;
        top: 0;
        z-index: 50;
        height: var(--headerHeight);
    }

    .topLogo {
        top: calc(70% + 10px);
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .topLogo a {
        padding: 8px;
        border-radius: 50%;
        background-color: var(--colorTop);
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
    }

    .topLogo svg {
        height: 100px;
    }

    .navToggle {
        display: flex;
    }

    header ul.contact {
        gap: 16px;
        padding-left: 20px;
    }

    header ul.contact li a {
        font-size: 0;
    }

    header ul.contact a.email::before,
    header ul.contact a.tel::before {
        width: 26px;
        height: 26px;
        margin-right: 0;
        vertical-align: middle;
    }

    header nav {
        position: absolute;
        top: 100%;
        right: 0;
        left: auto;
        width: 400px;
        transform: translateX(100%);
        max-height: calc(100vh - 80px);
        overflow-y: auto;
        background-color: var(--colorTop);
        visibility: hidden;
        opacity: 0;
        transition: transform 0.35s ease, opacity 0.35s ease, visibility 0.35s ease;
    }

    header.isNavOpen nav {
        transform: translateX(0);
        visibility: visible;
        opacity: 1;
    }

    html,
    body {
        overflow-x: clip;
    }

    html.isNavLocked {
        overflow-y: hidden;
    }

    header.isNavOpen nav>ul>li {
        animation: navItemIn 0.4s ease both;
    }

    header.isNavOpen nav>ul>li:nth-child(1) {
        animation-delay: 0.10s;
    }

    header.isNavOpen nav>ul>li:nth-child(2) {
        animation-delay: 0.16s;
    }

    header.isNavOpen nav>ul>li:nth-child(3) {
        animation-delay: 0.22s;
    }

    header.isNavOpen nav>ul>li:nth-child(4) {
        animation-delay: 0.28s;
    }

    header.isNavOpen nav>ul>li:nth-child(5) {
        animation-delay: 0.34s;
    }

    header.isNavOpen nav>ul>li:nth-child(6) {
        animation-delay: 0.40s;
    }

    header.isNavOpen nav>ul>li:nth-child(7) {
        animation-delay: 0.46s;
    }

    header.isNavOpen nav>ul>li:nth-child(8) {
        animation-delay: 0.52s;
    }

    header nav ul {
        flex-direction: column;
        justify-content: flex-start;
        gap: 0;
    }

    /* 12px iz (max-width: 1280px) + 50 % */
    header nav>ul {
        font-size: 18px;
    }

    header nav>ul>li>a {
        padding: 14px 20px;
    }

    header nav .subMenu {
        font-size: inherit;
        position: static;
        display: none;
        max-width: none;
        min-width: 0;
        padding: 0 0 8px;
        background-color: rgba(0, 0, 0, 0.2);
        opacity: 1;
        visibility: visible;
        transition: none;
    }

    header nav>ul>li.isSubOpen>.subMenu {
        display: flex;
    }

    header nav .subMenu a {
        padding: 10px 20px 10px 36px;
    }

    header nav>ul>li.isSubOpen>a.hasSub::after {
        transform: translateY(1px) rotate(-135deg);
    }

}

@media (max-width: 500px) {

    .footerCard svg {
        height: 100px;
    }

    .homeRibbon {
        gap: 5px;
    }

    .homeRibbon article p:first-child {
        font-size: 12px;
    }

    .homeRibbon article {
        width: 100px;
    }

    .newsCards {
        grid-template-columns: minmax(0, 320px);
    }

    .newsCards article {
        max-width: 100%;
    }

    header nav {
        width: 100%;
    }

}

@keyframes navItemIn {
    from {
        opacity: 0;
        transform: translateX(24px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (orientation: portrait) {

    .hero img {
        height: 55vh;
        object-fit: cover;
        object-position: center;
    }

}

/* mobitel u portretu: visina slike prema širini ekrana, i izvan naslovnice */
@media (max-width: 960px) and (orientation: portrait) {

    .hero img,
    .hero.isFull img {
        height: 70vw;
    }

}

@media (max-width: 960px) and (orientation: landscape) {

    .hero img {
        height: calc(100vh - 240px);
    }

}

@media (prefers-reduced-motion: reduce) {

    header nav,
    header nav .subMenu,
    header nav .subMenu a,
    header.isNavOpen nav>ul>li,
    .navToggle span,
    .toTop,
    .toTop span {
        transition: none;
        animation: none;
    }

}

.toTop {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 60;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--colorTop);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
}

.toTop.isVisible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.toTop.isVisible:hover {
    background-color: #0a6b11;
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
}

.toTop.isVisible:active {
    transform: translateY(-1px);
}

.toTop span {
    display: block;
    width: 12px;
    height: 12px;
    margin: 4px auto 0;
    border-top: 3px solid #ffffff;
    border-left: 3px solid #ffffff;
    transform: rotate(45deg);
    transition: transform 0.25s ease;
}

.toTop.isVisible:hover span {
    transform: rotate(45deg) translate(-2px, -2px);
}

@media (max-width: 500px) {

    .toTop {
        right: 16px;
        bottom: 16px;
        width: 42px;
        height: 42px;
    }

}

.reveal {
    opacity: 0;
    transform: translateY(70px);
}

.reveal.isRevealed {
    opacity: 1;
    transform: none;
    transition: opacity 1.5s ease, transform 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {

    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

}

/* sticky header - desktop only, nakon 180px skrola */

.stickySpacer {
    display: none;
}

@media (min-width: 961px) {

    .stickySpacer.isActive {
        display: block;
        height: 45px;
    }

    header.isSticky {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 1920px;
        height: 70px;
        margin: 0 auto;
        padding: 0 20px 0 40px;
        box-sizing: border-box;
        z-index: 50;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        background-color: rgba(var(--colorTopRgb), 0.95);
        backdrop-filter: blur(6px);
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
        animation: stickyDrop 0.35s ease;
    }

    @keyframes stickyDrop {
        from {
            transform: translateY(-100%);
        }

        to {
            transform: translateY(0);
        }
    }

    header.isSticky ul.contact {
        display: none;
    }

    header.isSticky .topLogo {
        position: absolute;
        top: 6px;
        left: 40px;
        transform: none;
    }

    header.isSticky .topLogo a {
        padding: 0px;
        border-radius: 50%;
        background-color: var(--colorTop);
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
    }

    header.isSticky .topLogo svg {
        height: 120px;
    }

    header.isSticky nav {
        position: static;
        transform: none;
        align-self: stretch;
    }

    header.isSticky nav>ul {
        height: 100%;
        background-color: transparent;
    }

    header.isSticky nav>ul>li {
        display: flex;
        align-items: center;
    }

    header.isSticky nav .subMenu {
        background-color: rgba(var(--colorTopRgb), 0.95);
    }

}

@media (prefers-reduced-motion: reduce) {

    header.isSticky {
        animation: none;
    }

}

/* INTERACTIVE MAP STYLES */

:root {
    --hover-color: #08530D;
}

.mapRow {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    background-color: #d0d0d0;
    overflow: hidden;
    padding: 50px 0;
    position: relative;
}

.mapRow .mapBackground {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
}


#imageMapContainer {
    position: relative;
    max-width: 1280px;
    height: auto;
    padding: 0;
    /* max-height: 100vh; */
    overflow: hidden;
    margin: -100px 0;
}

#mainMapImage {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 100vh;
    object-fit: contain;
}

#mapTitleBig {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    object-fit: cover;
    z-index: 10;
    display: block;

}

#mainMapBorders {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    object-fit: cover;
    z-index: 20;
    display: none;
}

/* Na manjim ekranima: prikaži granice, sakrij nazive */
@media (max-width: 768px) {
    #mainMapBorders {
        display: block !important;
    }

    #mapTitleBig {
        display: none;
    }

    #imageMapContainer {
        margin: -50px 0;
    }
}


.hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
    pointer-events: none;
    z-index: 5;
    /* PNG-ovi su crne siluete, pa ih koristimo samo kao masku (alpha kanal)
               i bojimo pozadinom. Promijeni --hover-color za drugu boju. */
    background-color: var(--hover-color, #2ea44f);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

#polygonMapCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: auto;
    z-index: 15;
    /* Bez bljeska/zumiranja na dodir */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
}

/* popis svih članova (predložak all_members.php) */
.allMembersSearch {
    margin: 20px 0;
}

.allMembersSearch label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
}

.allMembersSearch input {
    width: 100%;
    max-width: 520px;
    box-sizing: border-box;
    padding: 14px 18px 14px 48px;
    font: inherit;
    font-size: 17px;
    color: #222222;
    background: #ffffff url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23777777'%20stroke-width='2'%20stroke-linecap='round'%3E%3Ccircle%20cx='11'%20cy='11'%20r='7'/%3E%3Cpath%20d='M20%2020l-4-4'/%3E%3C/svg%3E") no-repeat 16px center / 20px 20px;
    border: 1px solid #c8cdc8;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.allMembersSearch input::placeholder {
    color: #999999;
}

.allMembersSearch input:focus {
    outline: none;
    border-color: var(--colorTop);
    box-shadow: 0 0 0 3px rgba(var(--colorTopRgb), 0.18);
}

.tableContainer {
    max-width: 100%;
    overflow-x: auto;
    margin-bottom: 20px;
}

@media (max-width: 767.98px) {

    /* do rubova ekrana; bez max-width, inače se okvir samo pomakne ulijevo */
    .tableContainer {
        max-width: none;
        margin: 0 -20px 20px;
    }

    /* razmak između tablice članova i poveznice na PDF */
    .sectionMembersPdf {
        margin-top: 20px;
    }

}

/* drugi redak u gumbu za PDF (naziv sekcije) manjim slovima */
.sectionMembersPdf a span {
    font-size: 0.8em;
}

table.allMembers {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

table.allMembers th,
table.allMembers td {
    padding: 8px 12px;
    border-bottom: 1px solid #dddddd;
    text-align: left;
    vertical-align: top;
}

table.allMembers th {
    background-color: var(--colorTableHeader);
    color: #ffffff;
    font-weight: 400;
}

table.allMembers tbody tr:nth-child(even) {
    background-color: #f4f6f4;
}

table.allMembers .num {
    width: 3em;
    color: #777777;
    white-space: nowrap;
}

@media (max-width: 500px) {

    table.allMembers th,
    table.allMembers td {
        padding: 6px 8px;
    }

}

@media (max-width: 767.98px) {

    /* odmak od rubova ekrana unutar .tableContainer; širina umanjena za margine da tablica ne izlazi desno */
    table.listMembers {
        margin: 0 20px;
        width: calc(100% - 40px);
    }

}

/* tablica široka koliko sadržaj, ćelije u jednom retku (npr. popis predsjednika, stranica 17);
   na uskom ekranu puna širina i vodoravni pomak u .tableContainer */
table.fitContent th,
table.fitContent td {
    white-space: nowrap;
}

@media (min-width: 768px) {

    table.fitContent {
        width: auto;
    }

}

/* sadržaj ćelije u jednom retku; na uskom ekranu tablica se pomiče vodoravno (.tableContainer) */
table.listMembers th,
table.listMembers td {
    white-space: nowrap;
}

/* redak na koji je kliknuto ili dodirnuto (nadjačava naizmjenično sjenčanje) */
table.listMembers tbody tr {
    cursor: pointer;
}

table.listMembers tbody tr.isSelected {
    background-color: #d9eed6;
}

/* lightbox (assets/js/document_lightbox.js) */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px 20px 20px;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.75);
}

.lightbox-overlay[hidden] {
    display: none;
}

.lightbox-frame {
    width: 100%;
    max-width: 1100px;
    height: 100%;
    border: 0;
    border-radius: 6px;
    background-color: #ffffff;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.lightbox-close {
    position: absolute;
    top: 8px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background-color: #d32f2f;
    color: #ffffff;
    /* znak ✕ iz fonta nije u sredini glifa, pa se skriva i X crta s dvije linije (::before, ::after) */
    font-size: 0;
    padding: 0;
    cursor: pointer;
    /* flat: bez sjene i obruba fokusa */
    box-shadow: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.lightbox-close::before,
.lightbox-close::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 45%;
    height: 2px;
    border-radius: 1px;
    background-color: #ffffff;
}

.lightbox-close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.lightbox-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.lightbox-close:hover,
.lightbox-close:focus-visible {
    background-color: #b71c1c;
}

/* lightbox s podacima retka (assets/js/row_lightbox.js, tač na redak u table.rowLightbox) */
.memberCard {
    width: 100%;
    max-width: 420px;
    margin: 0;
    padding: 24px;
    box-sizing: border-box;
    border-radius: 6px;
    background-color: #ffffff;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    font-family: 'bodyFont', sans-serif;
    color: #222222;
    position: relative;
}

/* gumb je u kartici, pa iznad nje ne treba mjesta za njega */
.lightbox-overlay.memberLightbox {
    padding: 20px;
}

/* gumb za zatvaranje unutar kartice, gore desno */
.memberCard .lightbox-close {
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
}

/* tekst ne ide ispod gumba */
.memberCard dl {
    margin: 0;
    padding-right: 32px;
}

.memberCard dt {
    font-size: 13px;
    color: #777777;
}

.memberCard dd {
    margin: 0 0 14px;
    font-size: 18px;
}

.memberCard dd:last-child {
    margin-bottom: 0;
}

/* stranica ispod lightboxa se ne pomiče */
html.lightbox-isOpen {
    overflow: hidden;
}

@media (max-width: 767.98px) {

    .lightbox-overlay {
        padding: 50px 0 0;
    }

    /* kartica člana ne ide do rubova ekrana */
    .lightbox-overlay.memberLightbox {
        padding: 20px 16px;
    }

    .lightbox-frame {
        border-radius: 0;
    }

}