/* Fonts */
@font-face {
  font-family: "CoFo_Robert_Light_Italic";
  src: url("/wp-content/themes/nik/fonts/CoFo_Robert-Light_Italic.woff") format("woff");
}

@font-face {
  font-family: "CoFoCinema1909_Regular";
  src: url("/wp-content/themes/nik/fonts/CoFoCinema1909-Regular.woff") format("woff");
}


@font-face {
  font-family: "Miniature";
  src: url("/wp-content/themes/nik/fonts/Miniature-Display.woff") format("woff");
}


@font-face {
  font-family: "PVC_Express";
  src: url("/wp-content/themes/nik/fonts/PVC-Express-Trial.woff") format("woff");
}

@font-face {
  font-family: "PVC_Menu";
  src: url("/wp-content/themes/nik/fonts/PVC-Menu-Trial.woff") format("woff");
}


:root {
    --teal: #008588;
    --lightTeal: #319d9e;
    --red: #ed1a39;
    --red2: #b01f3b;
    --red3: #ef334f;
    --lightRed: #ff6f6b;
    --lightRed2: #ff9e9c;
    --lightRed3: #ffbebc;
    --lightBlue: #d1eefc;
    --lightBlue2: #b9c6e5;
    --lightBlue3: #a4a9b7;
    --lightBlue4: #cad5d6;
    --blue: #2e4965;
    --blue2: #4b5571;
    --blue3: #679dff;
    --blue4: #5861df;
    --darkBlue: #354060;
    --darkBlue2: #5d6680;
    --darkBlue3: #006894;
    --darkBlue4: #4d556f;
    --darkPurple: #4b5572;
    --lightPurple: #9cafda;
    --orange: #fbb885;
    --orange2: #ffa75e;
    --orange3: #f8aa92;
    --lightGreen: #c7e4e4;
    --lightGreen2: #94926c;
    --lightGreen3: #d0d0c0;
    --lightGreen4: #bdbca4;
    --lightGreen5: #fffde0;
    --lightGreen6: #a3a181;
    --lightGreen7: #7f7d50;
    --lightGreen8: #a09e7d;
    --lightGreen9: #00a792;
    --lightGreen10: #98c5bc;
    --darkGreen: #65632d;
    --white: #ffffff;
    --darkWhite: #e5eff0;
    --yellow: #ccff00;
    --yellow2: #fff200;
    --yellow3: #e7ff85;
    --yellow4: #fffcc2;
    --yellow5: #f6f08a;
    --pink: #f392bd;
    --pink2: #ed425c;
    --pink3: #ecdaea;
    --pink4: #f2c7da;
    --pink5: #ef3f70;
    --headerHeight: 6.16vw;
}


/* Scroll */
html {
    scroll-behavior: smooth;
}

body {
    font-family: "Miniature", sans-serif;
}

body::-webkit-scrollbar,
html::-webkit-scrollbar,
.boSingleRight::-webkit-scrollbar,
.gikRightContent::-webkit-scrollbar,
.gikLeftContent::-webkit-scrollbar,
.homeBo::-webkit-scrollbar,
.homeStrip::-webkit-scrollbar,
.drGrid::-webkit-scrollbar,
#repoLeft::-webkit-scrollbar,
#repoRight::-webkit-scrollbar,
#menu-main-menu::-webkit-scrollbar {
  display: none;  /* Chrome, Safari and Opera */
}

body,
html,
.boSingleRight,
.gikRightContent,
.gikLeftContent,
.homeBo,
.homeStrip,
.drGrid,
#repoLeft,
#repoRight,
#menu-main-menu {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* Sitewide */

* {
    min-width: 0;
}

body {
    margin: 0;
    padding-top: 0;
}

img,svg, video {
    max-width: 100%;
    width: 100%;
    display: block;
    height: auto;
}

h1,h2,h3,h4,h5,h6,p,a,span {
    display: block;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: normal;
}

p, li {
    margin-bottom: 1em;
}

figure {
    display: block;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
}

 a {
    text-decoration: none;
    color: inherit;
    display: inline;
}

 .boSingleRight a {
     text-decoration: underline;
 }


ul {
    display: block;
    list-style-type: none;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0;
}

.hidden {
    display: none!important;
}

/* Header */
#menu-main-menu {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    width: 98vw;
}

.home #menu-main-menu {
    width: 100vw;
}


.headerMenu {
    display: flex;
}

.headerHome {
    width: 2vw;
    background-color: var(--lightBlue4);
    display: flex;
    justify-content: center;
    align-items: center;
}

.headerHome svg {
    transform: rotate(270deg);
    width: 1vw;
}

.headerHome path {
    fill: var(--teal);
}

.menu-item {
    margin-bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-top: 0.6vw;
    padding-bottom: 0.6vw;
    padding-left: 1vw;
    padding-right: 1vw;
    text-transform: uppercase;
}

.menu-item:nth-child(1) {
    background-color: var(--teal);
    color: var(--white);
}

.menu-item:nth-child(2) {
    background-color: var(--red);
    color: var(--yellow);
}

.menu-item:nth-child(3) {
    background-color: var(--lightBlue);
    color: var(--red);
}

.menu-item:nth-child(4) {
    background-color: var(--darkBlue);
    color: var(--pink);
}

.menu-item:nth-child(5) {
    background-color: var(--lightPurple);
    color: var(--yellow);
}

.menu-item:nth-child(6) {
    background-color: var(--orange);
    color: var(--red);
}

.menu-item:nth-child(7) {
    background-color: var(--lightRed);
    color: var(--darkBlue);
}

.menu-item:nth-child(8) {
    background-color: var(--darkGreen);
    color: var(--yellow2);
}

.menu-item:hover,
.current-menu-item {
    text-decoration: line-through;
}

.menu-item a {
    font-family: "Miniature";
    font-size: 1vw;
    line-height: 1vw;
}

.headerMarquee {
    width: 100vw;
    height: 1.3vw; /* visible slice */
    overflow: hidden;
    position: relative;
    padding-top: 0.83vw;
    padding-bottom: 0.83vw;
    background-color: var(--yellow);
    display: block!important;
}

.marqueeTrack {
    display: flex;
    height: 100%;
    animation: marquee 30s linear infinite;
}

.marqueeTrack {
    background-image: url('/wp-content/themes/nik/uploads/potpisi_peticiju.svg');
    background-repeat: repeat-x;
    background-size: auto 100%;
    animation: marqueeBg 60s linear infinite;
}

.page-template-potpisiPeticiju .headerMarquee {
    background-color: var(--red);
}

.page-template-potpisiPeticiju .marqueeTrack {
    background-image: url('/wp-content/themes/nik/uploads/potpisi_peticiju2.svg');
}


@keyframes marqueeBg {
    from {
        background-position-x: 0;
    }
    to {
        background-position-x: -100vw;
    }
}

.header {
    position: fixed;
    width: 100vw;
    z-index: 999;
}

.main_width {
    padding-top: 6.16vw;
}

/* O platformi */
.opHero {
    display: flex;
}

.opHeroLeft,
.opHeroRight {
    width: 50vw;
    height: calc(100vh - var(--headerHeight));
    display: flex;
    justify-content: center;
    align-items: center;
}

.opHeroLeft {
    width: 49.98vw;
    border-right: 0.02vw solid var(--lightTeal);
}

.opHeroLeft,
.opHeroRight {
    background-color: var(--teal);
}

.opHeroLeft:hover,
.opHeroRight:hover {
    background-color: var(--lightTeal);
}

.opHeroTitle {
    font-family: "Miniature";
    font-size: 3.1vw;
    line-height: 4.2vw;
    color: var(--white);
    max-width: 34vw;
    text-align: center;
    text-transform: uppercase;
}

.template_nik {
    display: flex;
}

.nikLeft {
    width: 95vw;
    
}

.nikTitle {
    font-family: "Miniature";
    font-size: 2.2vw;
    line-height: 2.2vw;
    color: var(--white);
}

.nikLeftTop {
    background-color: var(--teal);
    padding-top: 0.5vw;
    padding-bottom: 0.5vw;
    padding-left: 2.7vw;
    padding-right: 1.45vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    width: 90.85vw;
    z-index: 9;
}

.nikContent {
    background-color: var(--lightBlue);
    padding-left: 2.7vw;
    padding-right: 2.7vw;
    padding-top: 6.2vw;
}

.nikContent p:last-child {
    margin-bottom: 0;
    padding-bottom: 1em;
}

.opNikGroup1  {
    font-family: "Miniature";
    font-size: 2.13vw;
    line-height: 2.5vw;
    color: var(--teal);
    padding-bottom: 2.5vw;
}

.wp-block-heading {
    margin-bottom: 1em;
}

.opNikGroup2  {
    font-family: "Miniature";
    font-size: 2.13vw;
    line-height: 2.5vw;
    color: var(--teal);
    margin-left: -2.7vw;
    margin-right: -2.7vw;
    padding-left: 2.7vw;
    padding-right: 2.7vw;
    padding-top: 2.5vw;
    background-color: var(--lightGreen);
    padding-bottom: 2.5vw;
}

.opNikGroup2 p:first-child {
    font-size: 2.5vw;
    line-height: 2.5vw;
}

.opNikGroup2 ul {
    list-style-type: disc;
    columns: 2;
    column-gap: 5vw;
    font-size: 1.4vw;
}

.nikRight {
    width: 5vw;
    background-color: var(--lightTeal);
}

.opVertical {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: calc(70vh - 6.16vw);
    padding-bottom: 30vh;
    align-items: center;
}

.nikRightTitle {
    transform: rotate(270deg);
    white-space: nowrap;
    font-size: 2.23vw;
    color: var(--white);
}

.opFooterTop {
    padding: 2.7vw;
    background-color: var(--darkBlue);
    color: var(--darkWhite);
    display: flex;
    justify-content: space-between;
}

.opFooterLogoContainer {
    display: flex;
    align-items: center;
    gap: 2.2vw;
}

.opFooterLogo {
    max-width: 9vw;
}



.opFooterLogo:not(:last-child) svg path {
    fill: var(--white);
}



.opFooterTopLeft {
    width: 26vw;
    font-size: 1.05vw;
    line-height: 1.4vw;
}

.opFooterTopLeft p {
    margin-bottom: 0;
}

.opFooterBottom {
    background-color: var(--blue);
    padding: 2.7vw;
    display: flex;
    justify-content: space-between;
    color: var(--darkWhite);
}

.opFooterBottomLeft {
    font-size: 1.67vw;
    line-height: 2.1vw;
}

.opFooterBottomRight {
    display: flex;
    justify-content: space-between;
    width: 35vw;
    font-size: 1.05vw;
    line-height: 1.4vw;
}



.boArticleGrid {
    column-count: 3;
    column-gap: 0;
    min-height: calc(100vh - var(--headerHeight));
    background: var(--pink2);
}

.boArticle {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    display: flex;
    padding: 1vw 3.5vw;
    gap: 1vw;
}

.boArticle:hover .boArticleTitle {
    text-decoration: line-through;
}

.boArrowRight {
    width: 3vw;
    font-size: 3vw;
    color: var(--lightBlue);
}

.boArticleTitle {
    width: 25vw;
    color: var(--lightBlue);
    font-size: 1.8vw;
    line-height: 2.6vw;
}

.boSingleTop {
    background-color: var(--lightBlue);
    padding-left: 2.7vw;
    padding-top: 0.5vw;
    padding-bottom: 0.5vw;
    color: var(--red);
    font-size: 2.2vw;
    line-height: 2.2vw;
    display: flex;
    align-items: center;
}

.boSingleArrow,
.usSingleArrow {
    margin-right: 1vw;
}

.usSingleArrow svg {
    transform: rotate(180deg);
    fill: var(--pink);
}

.boSingleArrow svg {
    transform: rotate(180deg);
    fill: var(--red);
}

.boSingleMain {
    display: flex;
    height: calc(100vh - 4vw - var(--headerHeight))
}

.boSingleLeft {
    background-color: var(--red);
    color: var(--white);
    padding: 2.7vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 20vw;
}




.boSingleInfo {
    font-size: 1.3vw;
    line-height: 1.8vw;
    display: none;
}

.boSingleRight {
    background-color: var(--pink3);
    width: 72.4vw;
    padding: 2.7vw;
    padding-left: 4vw;
    color: var(--red);
    font-size: 2vw;
    line-height: 2.95vw;
    height: calc(100vh - 9.4vw - var(--headerHeight));
    overflow-y: scroll;
}

.template_us .opHeroLeft {
    background-color: var(--darkPurple);
}

.template_us .opHeroRight {
    background-color: var(--darkBlue);
}

.template_us .opHeroTitle {
    color: var(--pink);
}

.uslRightTitle {
    transform: rotate(270deg);
    white-space: nowrap;
    font-size: 2.23vw;
    color: var(--white);
}

.uslLeftTop {
    background-color: var(--darkBlue);
    padding-top: 1.1vw;
    padding-bottom: 1.1vw;
    padding-left: 2.7vw;
    padding-right: 1.45vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.uslTitle {
    font-size: 2.2vw;
    line-height: 2.2vw;
    color: var(--lightRed);
}

.template_usl .uslTitle {
    color: var(--pink);
}

.uslGrid {
    display: flex;
    height: calc(100vh - 4.4vw - var(--headerHeight));
}

.template_sdpo .uslGrid {
    height: calc(100vh - 4.5vw - var(--headerHeight));
}

.usArticle {
    background-color: var(--pink);
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 33.33333vw;
    flex-grow: 1;
}

.usArticle:hover {
    background-color: var(--pink4);
}


.usArticle:nth-child(2) {
    border-left: 0.02vw solid var(--pink4);;
    border-right: 0.02vw solid var(--pink4);
}






.usArticleTitle {
    max-width: 25vw;
    text-align: center;
    color: var(--darkBlue);
    font-size: 2.2vw;
    line-height: 3vw;
    overflow-wrap: break-word;
    text-transform: uppercase;
}

.template_usSingle .boSingleTop {
    background-color: var(--darkBlue);
    color: var(--pink);
    display: flex;
    
}

.template_usSingle .boSingleLeft {
    background-color: var(--pink);
    color: var(--darkBlue);
    align-items: center;
    justify-content: center;
    text-align: center;
    text-transform: uppercase;
}

.template_usSingle .boSingleRight {
    background-color: var(--pink4);
    color: var(--darkBlue);
}


.template_sd .opHeroRight,
.template_sd .opHeroLeft {
    background-color: var(--lightPurple);
}

.template_sd .opHeroLeft:hover,
.template_sd .opHeroRight:hover  {
    background-color: var(--lightBlue2);
}

.template_sd .opHeroLeft {
    border-right: 0.02vw solid var(--lightBlue2);
}


.template_sd .opHeroTitle {
    color: var(--yellow);
    max-width: 36vw;
}

.template_sdpo  {
    display: flex;
}



.template_sdpo .uslLeft {
    width: 95vw;
}

.template_sdpo .uslRight {
    width: 5vw;
    background-color: var(--lightBlue);
}

.template_sdpo .usArticle {
    background-color: var(--yellow);
    min-width: calc(95vw / 4);
    flex-grow: 1;
}

.template_sdpo .usArticle:hover {
    background-color: var(--yellow3);
}

.template_sdpo .usArticle:nth-child(2) {
    border-left: 0.2vw solid var(--yellow3);
    border-right: 0.2vw solid var(--yellow3);
}

.template_sdpo .usArticle:nth-child(3) {
    border-right: 0.2vw solid var(--yellow3);
}

.usArticle:last-child {
    border-right: none;
}

.template_sdpo .usArticleTitle {
    color: var(--lightPurple);
    max-width: 20vw;
}

.template_sdpo .uslLeftTop {
     background-color: var(--lightPurple);
     padding-top: 0.5vw;
     padding-bottom: 0.5vw;
     flex-direction: row-reverse;
     justify-content: flex-end;
}

.template_sdpo .uslLeftTop .uslArrow {
    margin-right: 1vw;
}

.template_sdpo .uslArrow svg {
    transform: rotate(180deg);
}

.template_sdpo .uslTitle {
    color: var(--yellow);
}

.template_sdSingle {
    display: flex;
}

.template_sdSingle .boSingleTitle {
    text-transform: uppercase;
}

.template_sdSingle .uslLeft {
    width: 95vw;
}

.template_sdSingle .uslRight {
    width: 5vw;
    background-color: var(--lightBlue);
}


.template_sdSingle .boSingleTop {
    background-color: var(--lightPurple);
    color: var(--yellow);
    display: flex;
    padding-right: 1.45vw;
    align-items: center;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.template_sdSingle .boSingleTop .uslArrow {
    margin-right: 1vw;
}

.template_sdSingle .boSingleTop .uslArrow svg {
    transform: rotate(180deg);
}

.template_sdSingle .boSingleLeft {
    background-color: var(--yellow);
    color: var(--lightPurple);
    justify-content: center;
    align-items: center;
    text-align: center;
    
}

.template_sdSingle .boSingleRight {
    background-color: var(--darkBlue2);
    color: var(--lightBlue);
}

.template_gik {
    display: flex;
}

.gikLeft {
    width: 62vw;
}

.gikRight {
    width: 38vw;
}

.gikLeftTop {
    background-color: var(--red);
    color: var(--orange);
    padding-left: 2.7vw;
    padding-top: 1.1vw;
    padding-bottom: 1.1vw;
}

.gikTitle {
    font-size: 2.2vw;
    line-height: 2.2vw;
}

.gikArticle {
    padding-left: 2.7vw;
    padding-right: 2.7vw;
    padding-top: 3vw;
    padding-bottom: 3vw;
    background-color: var(--orange);
    color: var(--red);
    font-size: 2vw;
    line-height: 2.8vw;
}

.gikArticle:first-child {
    padding-top: 3.5vw;
}

.gikArticle:nth-child(2n) {
    background-color: var(--orange2);
}

.gikArticle p:last-child {
    margin-bottom: 0;
    font-size: 1.3vw;
}

.gikArticle .izvor {
    font-size: 1.3vw;
}

.gikRightTop {
    background-color: var(--lightPurple);
}

.gikLeftContent {
    height: calc(100vh - 4.3vw - var(--headerHeight));
    overflow-y: scroll;
    background-color: red;
}

.gikRightContent {
    background-color: var(--red);
    color: var(--orange);
    padding-left: 2.7vw;
    padding-right: 2.7vw;
    padding-top: 3vw;
    padding-bottom: 3vw;
    font-size: 1.3vw;
    line-height: 2vw;
    height: calc(100vh - 17.05vw - var(--headerHeight));
    overflow-y: scroll;
}

.template_dr {
    display: flex;
}

.drLeft {
    width: 95vw;
}

.drRight {
    width: 5vw;
    background-color: var(--lightRed);
}

.drRight .uslRightTitle {
    color: var(--darkBlue);
}

.drLeftTop {
    padding-top: 1.1vw;
    padding-bottom: 1.1vw;
    padding-left: 2.7vw;
    padding-right: 1.45vw;
    background-color: var(--darkBlue);
}

.drContent {
    background-color: var(--lightBlue3);
    color: var(--darkBlue);
    padding: 2.7vw;
    font-size: 1.9vw;
    line-height: 2.8vw;
    padding-top: 1.9vw;
    padding-bottom: 1.9vw;
}

.drContent p {
    margin-bottom: 0;
}

.drLeftBottom {
    display: flex;
}

.drGrid {
    display: flex;
    width: 85vw;
    min-height: calc(100vh - 20.64vw - var(--headerHeight));
    overflow-x: scroll;
    flex-wrap: nowrap;
}



.drArticle {
    flex: 0 0 auto;
    width: 15.85vw;
    background-color: var(--lightRed);
    color: var(--darkBlue);
    padding: 2.7vw;
    display: flex;

    cursor: pointer;
}

.drGridPrev {
    width: 5vw;
    background-color: var(--lightRed3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.drGridPrev .drArrow svg {
    transform: rotate(180deg);
}

.drGridNext {
    
    width: 5vw;
    background-color: var(--lightRed3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.drGridPrev.inactive svg,
.drGridNext.inactive svg {
    opacity: 0.6;
}

.drArticleTitle {
    font-size: 2vw;
    line-height: 2.95vw;
}

.drArticle:hover .drArticleTitle {
    text-decoration: line-through;
}

.drArticle:nth-child(2n) {
    background-color: var(--lightRed2);
}

.drArticleText {
    display: none;
}

.drArticleInner {
    width: 84.6vw;
}

/* ACTIVE STATE */
.drGrid.open {
    width: 90vw;
}

.drArticle.active {
    width: 84.6vw;;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    min-height: calc(100vh - 16.8vw - var(--headerHeight));
    cursor: auto;
}

.drGrid.open + .drGridNext svg {
    opacity: 1;
}

.drArticle.active:hover .drArticleTitle {
    text-decoration: none;
}

/* hide others */
.drGrid.open .drArticle:not(.active) {
    display: none;
}

/* show text when active */
.drArticle.active .drArticleText {
    display: block;
}

/* rotate external arrow when open */
.drGrid.open + .drGridNext .drArrow {
    transform: rotate(180deg);
}

/* smooth animation */
.drGridNext .drArrow {
    transition: transform 0.3s ease;
}

/* CONTENT SHRINK STATE */
.drContent.compact {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.drContent a {
    display: inline;
    text-decoration: underline;
}

.drArticleText {
    font-size: 2vw;
    line-height: 2.95vw;
}


/* Repozitorij */

.page-template-repozitorij {
    background-color: var(--lightGreen5);
}

.repoHero {
    display: flex;
}

.repoHeroLeft,
.repoHeroRight {
    width: 50vw;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 2.2vw;
    line-height: 2.2vw;
    padding-top: 2vw;
    padding-bottom: 2vw;
}

#repoLeft,
#repoRight {
    height: calc(100vh - 6.16vw - var(--headerHeight));
    overflow-y: scroll;
}

.repoHeroLeft {
    background-color: var(--darkGreen);
    color: var(--yellow2);
}

.repoHeroRight {
    background-color: var(--lightGreen2);
    color: var(--darkGreen);
}

.repoGroup {
    display: flex;
}

.repoLeft,
.repoRight {
    width: 50vw;
}



/* Accordion */
.acc-toggle {
    display: flex;
    align-items: center;
    background-color: var(--lightGreen4);
    
}

.acc-item:nth-child(2n) .acc-toggle {
    background-color: var(--darkGreen);
}

.repoRight .acc-item:nth-child(2n) .acc-toggle {
    background-color: var(--lightGreen4);
}

.repoRight .acc-item:first-child .acc-toggle,
.repoRight .acc-item:nth-child(2n + 1) .acc-toggle{
    background-color: var(--darkGreen);
}


.acc-left {
    padding-left: 2vw;
    padding-right: 2vw;
    min-height: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.acc-left {
    font-size: 2.2vw;
    color: var(--darkGreen);
}

.acc-title {
    flex: 1;
    padding-top: 2vw;
    padding-bottom: 2vw;
    padding-right: 2.5vw;
    display: flex;
    align-items: center;
    min-height: 3.12vw;
    cursor: pointer;
}

.acc-title p {
    font-size: 1.25vw;
    line-height: 1.6vw;
    color: var(--darkGreen);
    margin-bottom: 0;
    text-transform: uppercase;
}

.acc-item:nth-child(2n) .acc-title p,
.acc-item:nth-child(2n) .acc-left  {
    color: var(--yellow2);
}

.repoRight .acc-item:nth-child(2n) .acc-title p,
.repoRight .acc-item:nth-child(2n) .acc-left  {
    color: var(--darkGreen);
}

.repoRight .acc-item:first-child .acc-title p,
.repoRight .acc-item:nth-child(2n + 1) .acc-title p,
.repoRight .acc-item:first-child .acc-left ,
.repoRight .acc-item:nth-child(2n + 1) .acc-left {
    color: var(--yellow2);
}

.acc-right {
    padding-left: 1vw;
    padding-right: 1vw;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--lightGreen3);
}

.repoLeft .acc-right .accArrow path {
    fill: var(--darkGreen)
}

.repoLeft .acc-item:nth-child(2n) .acc-right .accArrow path {
    fill: var(--yellow2);
}

.repoRight .acc-right .accArrow path {
    fill: var(--yellow2)
}

.repoRight .acc-item:nth-child(2n) .acc-right .accArrow path {
    fill: var(--darkGreen)
}

.acc-item:nth-child(2n) .acc-right {
    background-color: var(--lightGreen2);
}

.repoRight .acc-item:nth-child(2n) .acc-right {
    background-color: var(--lightGreen3);
}

.repoRight .acc-item:first-child .acc-right,
.repoRight .acc-item:nth-child(2n + 1) .acc-right {
    background-color: var(--lightGreen8);
}



.acc-content {
    display: none;
    background-color: var(--lightGreen5);
    padding-top: 2.2vw;
    padding-bottom: 2.2vw;
    padding-left: 4.2vw;
    padding-right: 3vw;
    color: var(--darkGreen);
    font-size: 1.25vw;
    line-height: 1.7vw;
}

.acc-content p {
    margin-bottom: 0;
}

.acc-item:nth-child(2n) .acc-content {
    background-color: var(--yellow4);
}

.repoRight .acc-item:nth-child(2n) .acc-content {
    background-color: var(--lightGreen5);
}

.repoRight .acc-item:first-child .acc-content,
.repoRight .acc-item:nth-child(2n + 1) .acc-content{
    background-color: var(--yellow4);
}

.acc-item.active .acc-content {
    display: block;
}

/* Home */
.template_home {
    display: flex;
}

.homeLogo {
    width: 33.5vw;
    height: calc(100vh - 4vw - var(--headerHeight));
    background-color: var(--red);
    padding: 2vw;
} 

.homeLogoInner {
  width: 100%;
  height: 100%;
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat;
  animation: none;
}

.homeLogoInner.start-animation {
  animation: switchBg 3s infinite;
}

@keyframes switchBg {
  0%, 9% {
    background-image: url("/wp-content/themes/nik/uploads/home_logo-01.svg");
  }
  10%, 19% {
    background-image: url("/wp-content/themes/nik/uploads/home_logo-02.svg");
  }
  20%, 29% {
    background-image: url("/wp-content/themes/nik/uploads/home_logo-03.svg");
  }
  30%, 39% {
    background-image: url("/wp-content/themes/nik/uploads/home_logo-04.svg");
  }
  40%, 49% {
    background-image: url("/wp-content/themes/nik/uploads/home_logo-05.svg");
  }
  50%, 59% {
    background-image: url("/wp-content/themes/nik/uploads/home_logo-06.svg");
  }
  60%, 69% {
    background-image: url("/wp-content/themes/nik/uploads/home_logo-07.svg");
  }
  70%, 79% {
    background-image: url("/wp-content/themes/nik/uploads/home_logo-08.svg");
  }
  80%, 89% {
    background-image: url("/wp-content/themes/nik/uploads/home_logo-08.svg");
  }
  90%, 100% {
    background-image: url("/wp-content/themes/nik/uploads/home_logo-10.svg");
  }
}

.arrow-shaft {
    transform-origin: center bottom;
}

.arrow-head {
    transform-origin: center;
}

.homeStrip {
    width: 7vw;
    height: calc(100vh - var(--headerHeight));
    background-color: var(--lightGreen6);
    overflow-y: scroll;
}

.homeForm {
    width: 29vw;
    height: calc(100vh - var(--headerHeight));
    background-color: var(--blue4);
}

.homeArrow {
    padding-top: 2.45vw;
    width: 4vw;
    padding-left: 1vw;
    padding-right: 1vw;
    background-color: var(--lightGreen7);
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 2.45vw;
}

.homeBo {
    width: 23.5vw;
    background-color: var(--lightBlue);
    height: calc(100vh - var(--headerHeight));
    overflow-y: scroll;
}

.homeBo .boArticle {
    gap: 1vw;
    padding-right: 1vw;
    padding-left: 1.5vw;
    padding-top: 1.5vw;
    padding-bottom: 1.5vw;
}

.homeBo .boArticle:hover .boArticleTitle{
    text-decoration: line-through;
}

.homeBo .boArticleTitle {
    color: var(--red);
}

.homeBo .boArticleTitle {
    text-align: center;
    padding-top: 1vw;
    padding-bottom: 1vw;
    width: 23.5vw;
    font-size: 1.5vw;
}

.homeBo .boArticle .boArticleTitle {
    text-align: left;
}

.homeBo .boArrowRight {
    padding-top: 2vw;
}

.homeBo .boArticle:nth-child(2n) {
    background-color: var(--red);
    
}

.homeBo .boArticle:nth-child(2n) .boArticleTitle {
    color: var(--lightBlue);
}

.homeBo .boArticle:nth-child(2n+1) .boArrowRight polygon {
    fill: var(--red);
}

.arrowMain {
    width: 2vw;
}
@media (min-width: 769px) {
   .template_boSingle .boSingleTop .boSingleArrow {
    width: 1.7vw;
} 
}


.boArrowRight polygon,
.nikArrow polygon {
    fill: var(--lightBlue);
}

.uslArrow,
.nikRight .nikArrow {
    transform: rotate(90deg);
}



.uslArrow polygon {
    fill: var(--lightPurple);
}

.drArrow polygon,
.drRight  polygon{
    fill: var(--darkBlue);
}

.drRight .uslArrow {
    padding-left: 1vw;
}

.template_sdpo .uslRight .uslArrow,
.opVertical .nikArrow,
.template_sdSingle .uslRight .uslArrow {
    transform: rotate(0deg);
    padding-top: 0.6vw;
}

.template_sdSingle .uslRight .uslArrow {
    transform: rotate(180deg);
    padding-bottom: 0.6vw;
    padding-top: 0;
}

.template_sdpo .uslArrow polygon {
    fill: var(--lightPurple);
}

.template_sdpo .uslRightTitle,
.template_sdSingle .uslRightTitle{
    color: var(--lightPurple);
}

.template_sdpo .uslLeftTop .uslArrow polygon,
.template_sdSingle .boSingleTop .uslArrow polygon{
    fill: var(--yellow);
}

.template_sdpo .uslLeftTop .uslArrow,
.template_sdSingle .boSingleTop .uslArrow {
    transform: rotate(0deg);
}



.template_pp {
    min-height: calc(100vh - var(--headerHeight));
    width: 100vw;
    background-color: var(--yellow);
    position: relative;
}

.ppInner {
    height: calc(100vh - var(--headerHeight));
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ppLink {
    color: var(--red);
    font-size: 4.2vw;
    line-height: 5vw;
    text-align: center;
}

.ppArrow {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 45vw;
}

.ppArrow polygon {
    fill: var(--red);
}


.homeStripArrow {
    padding: 1vw 0.5vw;
}

.homeStripArrow1 {
    background-color: var(--orange3);
    animation: switchArrowStripBg1 2s infinite;
}

.homeStripArrow1 path {
    fill: var(--pink5);
    animation: switchArrowStrip1 2s infinite;
}

.homeStripArrow2 {
    background-color: var(--lightGreen9);
    animation: switchArrowStripBg2 2s infinite;
}

.homeStripArrow2 path {
    fill: var(--yellow);
    animation: switchArrowStrip2 2s infinite;
}

.homeStripArrow3 {
    background-color: var(--darkBlue);
    animation: switchArrowStripBg3 2s infinite;
}

.homeStripArrow3 path {
    fill: var(--blue3);
    animation: switchArrowStrip3 2s infinite;
}

.homeStripArrow4 {
    background-color: var(--lightRed);
    animation: switchArrowStripBg4 2s infinite;
}

.homeStripArrow4 path {
    fill: var(--yellow5);
    animation: switchArrowStrip4 2s infinite;
}

.homeStripArrow5 {
    background-color: var(--lightGreen10);
    animation: switchArrowStripBg5 2s infinite;
}

.homeStripArrow5 path {
    fill: var(--darkGreen);
    animation: switchArrowStrip5 2s infinite;
}

@keyframes switchArrowStrip1 {
  0%, 49% {
    fill:  var(--pink5);
  }
  50%, 100% {
    fill:  var(--orange3);
  }
}

@keyframes switchArrowStripBg1 {
  0%, 49% {
    background-color: var(--orange3);
  }
  50%, 100% {
    background-color: var(--pink5);
  }
}

@keyframes switchArrowStrip2 {
  0%, 49% {
    fill:  var(--yellow);
  }
  50%, 100% {
    fill:  var(--lightGreen9);
  }
}

@keyframes switchArrowStripBg2 {
  0%, 49% {
    background-color: var(--lightGreen9);
  }
  50%, 100% {
    background-color: var(--yellow);
  }
}

@keyframes switchArrowStrip3 {
  0%, 49% {
    fill:  var(--blue3);
  }
  50%, 100% {
    fill:  var(--darkBlue);
  }
}

@keyframes switchArrowStripBg3 {
  0%, 49% {
    background-color: var(--darkBlue);
  }
  50%, 100% {
    background-color: var(--blue3);
  }
}

@keyframes switchArrowStrip4 {
  0%, 49% {
    fill:  var(--yellow5);
  }
  50%, 100% {
    fill:  var(--lightRed);
  }
}

@keyframes switchArrowStripBg4 {
  0%, 49% {
    background-color: var(--lightRed);
  }
  50%, 100% {
    background-color: var(--yellow5);
  }
}

@keyframes switchArrowStrip5 {
  0%, 49% {
    fill:  var(--darkGreen);
  }
  50%, 100% {
    fill:  var(--lightGreen10);
  }
}

@keyframes switchArrowStripBg5 {
  0%, 49% {
    background-color: var(--lightGreen10);
  }
  50%, 100% {
    background-color: var(--darkGreen);
  }
}

@media (min-width: 769px) {
    .homeArrowLong svg {
        max-height: calc(100vh - 10vw);
        animation: homeArrowAnimationLast 1s infinite;
    }
}

@keyframes homeArrowAnimationLast {
    0%, 49% {
    max-height: calc(100vh - 10vw);
  }
    50%, 100% {
    max-height: calc(100vh - 9.5vw);;
  }
}

.homeArrowLong path {
    fill: var(--darkBlue);
}

.homeForm1 {
    display: flex;
    background-color: var(--lightPurple);
    align-items: center;
    justify-content: space-between;
    padding: 0.7vw;
}

.homeForm1Arrow {
    width: 1vw;
}

.homeForm1Arrow svg {
    transform: rotate(132deg);
}

.homeForm1Arrow path {
    fill: var(--yellow);
}

.homeForm1Text {
    font-size: 1vw;
    line-height: 1vw;
    color: var(--yellow);
}

.homeForm2 {
    display: flex;
    background-color: var(--blue3);
    align-items: center;
    padding-right: 2vw;
    padding-bottom: 2vw;
    padding-top: 1vw;
    padding-left: 1vw;
}

@media (min-width: 769px) {
    .homeForm2Left {
        width: 14.5vw;
    }
}


.homeForm2Right {
    width: 7vw;
    padding-top: 1.5vw;
    padding-left: 1.75vw;
    animation: homeForm2Ani 2s infinite;
}

@keyframes homeForm2Ani {
  0%, 49% {
    padding-left: 1.75vw;
  }
  50%, 100% {
    padding-left: 0vw;
  }
}

.homeForm2Right path,
.homeForm2Left tspan{
    fill: var(--yellow);
}

.homeForm3 {
    background-color: var(--darkBlue3);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: calc(100vh - 18.2vw - var(--headerHeight));
    text-align: center;
    color: var(--yellow);
    font-size: 3.4vw;
    line-height: 3.6vw;
    font-family: "CoFoCinema1909_Regular";
}
 
.homeForm3 span {
    margin-bottom: 0;
    letter-spacing: 0.3vw;
}

.homeForm3Line {
    border-top: 0.2vw solid var(--yellow); 
    width: 9.8vw;
}

.homeForm4 {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 4.25vw;
}

.homeForm4Strelica {
    width: 2.5vw;
}

.homeForm4Strelica svg {
    transform: rotate(270deg);
}

.homeForm4Strelica polygon {
    fill: var(--yellow);
}

.home .headerHome {
    display: none;
}

.opVertical span {
    position: fixed;
    bottom: 8vw;
}

.opVertical .arrowMain {
    position: fixed;
}

.page-template-nistaIspodKlupe .nikRightTitle {
    bottom: 8vw;
}

.page-template-nasaNacela .nikRightTitle {
    bottom: 11vw;
}

.gikRightTop .homeForm2 {
    justify-content: space-between;
    padding-left: 3vw;
    padding-right: 3vw;
    padding-top: 0;
    padding-bottom: 1vw;
    background-color: var(--lightPurple);
}

.gikRightTop .homeForm2Right {
    animation: none;
}



.gikPpStreliceLeft {
    padding-left: 0;
}

.gikPpStreliceLeft svg {
    transform: rotate(180deg);
}

.gikRightTop .homeForm1 {
    padding-left: 3vw;
    padding-right: 3vw;
    background-color: var(--blue3);
}



.template_sdpo .opVertical span {
    position: fixed;
    bottom: 14vw;
    font-size: 2.2vw;
}

.page-template-skolskiDjelatnikPripadam .opVertical span {
    position: fixed;
    bottom: 14vw;
    font-size: 2.2vw;
}

.drRight .opVertical span {
    position: fixed;
    bottom: 11vw;
}

.glossary-term {
    display: inline;
    text-decoration: underline;
    text-decoration-style: wavy;
}


.templateBoSingle h1.boSingleTitle {
    font-size: 2vw;
    line-height: 2.95vw;
}

@media (min-width: 769px) {
    .template_sdSingle .boSingleLeft .boSingleTitle,
.template_usSingle .boSingleLeft .boSingleTitle{
    font-size: 2.2vw;
    line-height: 3vw;
    word-break: break-word;
}
}


.template_sdSingle .opVertical span {
    position: fixed;
    bottom: 17vw;
    font-size: 1.2vw;
}



    
@media (min-width: 769px) {
    .glossary-term {
        text-decoration-thickness: 0.25vw;
    }
    .template_boSingle .boSingleLeft  {
    width: 30vw;
}


.template_boSingle .boSingleLeft .boSingleTitle {
    font-size: 2vw;
    line-height: 2.95vw;
}
}

.glossary-tooltip {
    position: fixed;
    width: 23vw;
    height: auto;
    background-color: var(--pink4);
    color: var(--darkBlue4);
    padding: 1vw;
    border: 0.625vw solid var(--darkBlue4);
    border-radius: 0;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    overflow: visible;
    color: var(--darkBlue);
    font-family: "Miniature";
    font-size: 1.4vw;
    line-height: 1.82vw;
}

.glossary-tooltip p:last-child {
    margin-bottom: 0;
}

.glossary-tooltip.active {
    opacity: 1;
}

/* 🔺 YOUR TRIANGLE */
.glossary-triangle {
    position: absolute;
    top: calc(-2.2vw - 0.5vw); /* sits above border */
    left: 50%;
    transform: translateX(-50%);

    width: 7vw;
    height: 2.2vw;

    background-color: var(--darkBlue4);

    clip-path: polygon(
        0% 100%,
        50% 0%,
        100% 100%
    );
}

.glossary-tooltip.is-above .glossary-triangle {
    top: auto;
    bottom: calc(-2.2vw - 0.5vw);

    transform: translateX(-50%) rotate(180deg);
}

.category_skolski-sam-djelatnik-ica-i-zelim-podrzati-lgbtiq-ucenike-ice .glossary-tooltip {
    border-color: var(--lightBlue);
    background-color: var(--darkBlue2);
    color: var(--lightBlue);
}

.category_skolski-sam-djelatnik-ica-i-zelim-podrzati-lgbtiq-ucenike-ice .glossary-tooltip .glossary-triangle {
    background-color:  var(--lightBlue);
} 

@media (min-width: 769px) {
    .mobileOnly {
        display: none!important;
    }
}

/* Mobile */
/* default: hide hamburger */
.hamburger {
    display: none;
}

/* MOBILE */
@media (max-width: 768px) {
    .desktopOnly {
        display: none!important;
    }

    .header {
        display: flex;
        flex-direction: row-reverse;
        justify-content: flex-start;
        align-items: center;
    }

    .headerMenu {
        position: relative;
    }

    /* show hamburger */
    .hamburger {
        display: flex;
        flex-direction: column;
        gap: 6px;
        width: 22px;
        cursor: pointer;
        position: relative;
        top: 0;
        right: 0;
        z-index: 10;
        padding: 14.5px 13px;
        background-color: var(--red3);
    }
    
    

    .hamburger span {
        display: block;
        width: 22px;
        height: 3px;
        background: var(--yellow); /* change if needed */
    }
    
    .page-template-potpisiPeticiju .hamburger {
        background-color: var(--yellow);
    }
    
    .page-template-budnoOko .hamburger {
        background-color: var(--pink2);
    }
    
    .page-template-potpisiPeticiju .hamburger span {
        background: var(--red);
    }

    .headerMenu.active .hamburger {
        background-color: var(--lightBlue4);
    }
    
    .headerMenu.active .hamburger span {
        background: var(--teal);
    }

    /* hide menu by default */
    .headerMenu #menu-main-menu {
        display: none;
        position: fixed;
        top: 50px;
        right: 0;
        width: 277px; 
        height: calc(100vh - 50px);
        overflow-y: scroll;
    }

    /* show when active */
    .headerMenu.active  #menu-main-menu{
        display: block;
    }

    /* make marquee stay left */
    .headerMarquee {
        flex: 1;
    }
    
    .headerHome {
        display: none;
        width: 217px;
        padding-left: 10px;
        border-right: 1px solid var(--teal);
        border-left: 1px solid var(--teal);
        align-items: center;
        justify-content: flex-start;
    }
    
    .headerHome svg {
        width: 27px;
    }
    
    .headerMenu.active .headerHome  {
        display: flex;
    }
    
    .menu-item {
        padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 20px;
        padding-right: 19px;
        text-transform: uppercase;
    }
    
    .menu-item a {
        font-size: 17px;
        line-height: 23px;
    }
    
    .headerMarquee {
        width: calc(100vw - 48px);
        height: 24px;
        padding-bottom: 13px;
        padding-top: 13px;
        overflow: hidden;
        position: relative;
    }
    
    .main_width {
        padding-top: 50px;
    }
    
    .template_home {
        flex-direction: column;
    }
    
    
    
    .homeForm {
        order: 2;
        display: flex;
        flex-direction: column;
        width: 100vw;
        height: auto;
    }
    
    .homeForm4 {
        order: 1;
        width: 100vw;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .homeForm4Strelica {
        width: auto;
    }
    
    .homeForm4Strelica svg {
        height: 35px;
        transform: rotate(90deg);
    }
    
    .homeForm2 {
        order: 2;
        display: flex;
        padding-right: 30px;
        padding-bottom: 30px;
        padding-top: 10px;
        padding-left: 30px;
        justify-content: space-between;
    }
    
    .homeForm2Left {
        height: auto;
        width: 190px;
    }
    
    .homeForm2Right {
        width: 108px;
        padding-top: 20px;
        margin-right: 10px;
        padding-left: 0;
        animation: homeForm2AniMobile 2s infinite;
    }
    
    .gikRightTop .homeForm2Right {
        animation: homeForm2AniMobile 2s infinite;
    }
    
    .homeForm1 {
        order: 3;
        display: flex;
        align-items: center;
        padding: 10px 20px;
    }
    
    .homeForm1Arrow {
        width: 15px;
    }
    
    .homeForm1Arrow svg {
        transform: rotate(311deg);
    }
    
    .homeForm1Text {
        font-size: 13px;
        line-height: 13px;
        padding-top: 5px;
    }
    
    .homeForm3 {
        order: 4;
        background-color: var(--darkBlue3);
        height: auto;
        font-size: 44px;
        line-height: 46px;
        height: 211px;
    }
    
    .homeForm3Line {
        margin-top: 5px;
        border-top: 3px solid var(--yellow);
        width: 110px;
    }
    
    
    
    .homeArrow {
        display: none;
    }
    
    .homeStrip {
        order: 3;
        width: 100vw;
        height: 42px;
        overflow-y: auto;
        overflow-x: scroll;
        display: flex;
    }
    
    .homeStripGroup {
        width: 200px;
        flex-shrink: 0;
    }
    
    .homeStripArrow {
        width: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .homeStripArrow svg {
        transform: rotate(90deg);
    }
    
    .homeStripGroup {
        display: flex;
    }
    
    .homeBo {
        order: 4;
        width: calc(100vw - 40px);
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 20px;
        padding-bottom: 20px;
        overflow-y: auto;
        height: auto;
    }
    
    .homeBo .boArticleTitle {
        text-align: left;
        padding-top: 0;
        padding-bottom: 0;
        width: auto;
        font-size: 47px;
        line-height: 47px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .homeBo .boArticleTitle .boSingleArrow {
        margin-right: 0;
        width: 30px;
        padding-bottom: 3px;
    }
    
    .homeBo .boArticleTitle .boSingleArrow svg {
        transform: rotate(0deg);
    }
    
    .homeBo .boArticle {
        display: none;
    }
    
    .opHero {
        flex-direction: column;
    }
    
    .opHeroLeft, .opHeroRight {
        width: 100vw;
        height: calc((100dvh - 50px)/2);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .opHeroLeft {
        width: 100vw;
        border-right: none;
        background-color: var(--lightTeal);
    }
    
    .opHeroLeft:hover {
        background-color: var(--lightTeal);
    }
    
    .opHeroRight:hover {
        background-color: var(--teal);
    }
    
    .opHeroTitle {
        font-size: 27px;
        line-height: 33px;
        max-width: 80vw;
    }
    
    .nikLeft {
        width: calc(100vw - 48px);
    }
    
    .nikLeftTop {
        padding-top: 13px;
        padding-bottom: 13px;
        padding-left: 20px;
        padding-right: 20px;
        width: calc(100vw - 88px);
    }
    
    .nikLeftTop .nikArrow {
        display: none;
    }
    
    .nikTitle {
        font-size: 22px;
        line-height: 22px;
    }
    
    .nikRight {
        width: 48px;   
    }
    
    .template_sdpo .uslRight .uslArrow, .opVertical .nikArrow, .template_sdSingle .uslRight .uslArrow {
        padding-bottom: 10px;
    }
    
    .nikRightTitle {
        font-size: 22px;
        line-height: 22px;
    }
    
    .page-template-nistaIspodKlupe .nikRightTitle {
        bottom: 90px;
    }
    
    .page-template-nasaNacela .nikRightTitle {
        bottom: 120px;
    }
    
    .arrowMain {
        width: 18px;
    }
    
    .nikContent {
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 65px;
    }
    
    .opNikGroup1 {
        font-size: 19px;
        line-height: 27px;
        padding-bottom: 20px;
    }
    
    .opNikGroup2 {
        font-size: 19px;
        line-height: 27px;
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 40px;
        padding-right: 20px;
        padding-top: 20px;
        padding-bottom: 20px;
    }
    
    .opNikGroup2 p:first-child {
        font-size: 23px;
        line-height: 23px;
        margin-left: -20px;
    }
    
    .opNikGroup2 ul {
        columns: 1;
        column-gap: 0;
        font-size: 13px;
        line-height: 21px;
    }
    
    .opFooterTop {
        padding: 20px;
        flex-direction: column-reverse;
        gap: 20px;
    }
    
    .opFooterLogoContainer {
        width: 100%;
        justify-content: space-between;
    }
    
    .opFooterLogo {
        max-width: 65px;
    }
    
    .opFooterTopLeft {
        width: auto;
        font-size: 12px;
        line-height: 16px;
    }
    
    .opFooterBottom {
        padding: 20px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
    
    .opFooterBottomLeft {
        font-size: 15px;
        line-height: 21px;
    }
    
    .opFooterBottomLeft a {
        text-decoration: none;
    }
    
    
    .opFooterBottomRight {
        display: flex;
        flex-direction: column;
        gap: 15px;
        justify-content: flex-start;
        width: auto;
        font-size: 12px;
        line-height: 16px;
    }
    
    .ppArrow {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 75vw;
    }
    
    .ppLink {
        font-size: 31px;
        line-height: 38px;
    }
    
    .boArticleGrid {
        column-count: 1;
        column-gap: 0;
        min-height: none;
    }
    
    .boArticle {
        background-color: var(--pink2);
        display: flex;
        padding-top: 28px;
        padding-bottom: 28px;
        padding-left: 20px;
        padding-right: 35px;
        gap: 13px;
    }
    
    .boArticleTitle {
        width: calc(100vw - 86px);
        font-size: 20px;
        line-height: 28px;
    }
    
    .boArticleGrid .boArrowRight {
        padding-top: 3px;
    }
    
    .boArticle:nth-child(4n + 1) {
        background-color: var(--pink2);
    }
    
    .boArticle:nth-child(4n + 2) {
        background-color: var(--red2);
    }
    
    .boArticle:nth-child(4n + 3) {
        background-color: var(--red);
    }
    
    .boArticle:nth-child(4n + 4) {
        background-color: var(--lightRed);
    }
    
    .boArticle:hover .boArticleTitle {
        text-decoration: none;
    }
    
    .boSingleTop {
        padding-left: 20px;
        padding-top: 9px;
        padding-bottom: 9px;
        font-size: 22px;
        line-height: 22px;
    }
    
    .template_boSingle .boSingleTop,
    .template_usSingle .boSingleTop {
        position: fixed;
        width: calc(100vw - 20px);
    }
    
   
    
    .boSingleArrow, .usSingleArrow {
        margin-right: 11px;
    }
    
    .boSingleMain {
        flex-direction: column;
        height: auto;
        padding-top: 49.61px;
    }
    

    
    .template_sdSingle .boSingleTop {
        position: fixed;
        width: calc(100vw - 30px);
    }
    
    .template_sdSingle .boSingleMain {
        padding-top: 80px;
    }
    
    .boSingleLeft {
        padding:  20px;
        justify-content: flex-start;
        gap: 20px;
        width: auto;
    }
    
    h1.boSingleTitle {
        font-size: 19px;
        line-height: 27px;
    }
    
    .template_sdSingle h1.boSingleTitle {
        font-size: 22px;
        line-height: 28px;
    }
    
    .page-id-53 .uslTitle {
        letter-spacing: -0.2px;
    }
    
    .postid-97 .template_sdSingle .boSingleTitle {
        max-width: 80vw;
    }
    
    .boSingleInfo {
        font-size: 15px;
        line-height: 20px;
    }

    .boSingleRight {
        width: auto;
        padding: 20px;
        font-size: 19px;
        line-height: 27px;
        height: auto;
        overflow-y: auto;
    }
    
    .uslLeftTop {
        padding-top: 13px;
        padding-bottom: 13px;
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .uslTitle {
        font-size: 22px;
        line-height: 22px;
    }
    
    .uslGrid {
        flex-direction: column;
        height: auto;
    }
    
    .usArticle {
        min-width: auto;
        min-height: auto;
        flex-grow: 1;
    }
    
    .template_sdpo .usArticle {
        flex-grow: 1;
    }
    
    .template_sdpo .uslGrid {
        height: calc(100vh - 157px);
        height: calc(100dvh - 157px);
    }
    
    .usArticle:hover {
        background-color: var(--pink);
    }
    
    .template_usl .uslGrid {
        height: calc(100vh - 98px);
        height: calc(100dvh - 98px);
    }
    
    .usArticle:nth-child(2n),
    .usArticle:nth-child(2n):hover{
        background-color: var(--pink4);
    }
    
    .usArticle:nth-child(2) {
        border-left: none;
        border-right: none;
    }
    
    .usArticleTitle {
        max-width: 60vw;
        font-size: 22px;
        line-height: 28px;
    }
    
    .template_usSingle .boSingleLeft .boSingleTitle {
        max-width: 60vw;
    }
    
    .template_sd .opHeroTitle {
        max-width: 70vw;
    }
    
    .template_sd .opHeroLeft {
        border-right: none;
    }
    
    .template_sd .opHeroLeft:hover,
    .template_sd .opHeroLeft {
        background-color: var(--lightBlue2);
    }
    
    .template_sd .opHeroRight:hover,
    .template_sd .opHeroRight {
        background-color: var(--lightPurple);
    }
    
    .template_sdpo .uslLeftTop .uslArrow  {
        display: none;
    }
    
    .template_sdpo .uslLeft {
        width: calc(100vw - 48px);
    }
    
    .template_sdpo .uslLeftTop {
        padding-top: 13px;
        padding-bottom: 13px;
    }
    
    .template_sdpo .uslTitle {
        line-height: 27px;
    }
    
    .template_sdpo .uslRight {
        width: 48px;
    }
    
    .template_sdpo .uslRight .uslArrow {
        transform: rotate(0deg);
        padding-bottom: 0;
        padding-top: 10px;
    }
    
    .template_sdpo .opVertical span {
        position: fixed;
        bottom: 150px;
        font-size: 22px;
    }
    
    .page-template-skolskiDjelatnikPripadam .opVertical span {
        bottom: 150px;
    }
    
    .template_sdpo .usArticle {
        min-width: auto;
        padding-top: 0;
        padding-bottom: 0;
    }
    
    .page-template-skolskiDjelatnikPripadam,
    .page-template-skolskiDjelatnikPodrzati {
        background-color: var(--yellow3);
    }
    
    .template_sdpo .usArticle:hover {
        background-color: var(--yellow);
    }
    
    .template_sdpo .usArticle:nth-child(2) {
        border-left: none;
        border-right: none;
    }
    
    .template_sdpo .usArticleTitle {
        max-width: 60vw;
    }
    
    .template_sdpo .usArticle:nth-child(2n), 
    .template_sdpo .usArticle:nth-child(2n):hover {
        background-color: var(--yellow3);
    }
    
    .template_sdSingle .boSingleTop {
        padding-right: 10px;
        padding-top: 13px;
        padding-bottom: 13px;
        line-height: 27px;
    }
    
    .template_sdSingle .boSingleTopText {
        max-width: calc(100vw - 59px);
    }
    
    .template_sdSingle .boSingleTop .uslArrow {
        margin-right: 11px;
    }
    
    
    .template_sdSingle .uslLeft {
        width: 100vw;
    }
    
    .template_sdSingle .uslRight {
        display: none;
    }
    
    .template_sdSingle .boSingleTitle {
        max-width: 60vw;
    }
    
    .opVertical {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: calc(100vh - 50px);
        padding-bottom: 0;
        align-items: center;
    }
    
    .glossary-tooltip {
        width: calc(100vw - 86px);
        padding: 13px;
        border-width: 10px;
        font-size: 12px;
        line-height: 17px;
        left: 20px!important;
    }
    
    .glossary-triangle {
        top: -22px;
        width: 60px;
        height: 20px;
    }
    
    .glossary-tooltip.is-above .glossary-triangle {
        top: auto;
        bottom: -22px;
    }
    
    .template_gik {
        flex-direction: column;
    }
    
    .gikLeftContent {
        display: none;
    }
    
    .gikContentOn .gikLeftContent {
        display: block;
    }
    
    .gikArticle p:last-child {
        font-size: 15px;
        line-height: 19px;
    }
    
    .gikPpStreliceLeft {
        display: none;
    }
    
    .gikLeft,
    .gikRight {
        width: 100vw;
    }
    
    .gikLeftTop {
        padding-left: 20px;
        padding-right: 5px;
        padding-top: 9px;
        padding-bottom: 9px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: fixed;
        width: calc(100vw - 25px);
        z-index: 9;
    }
    
    .gikRight {
        padding-top: 49.61px;
    }
    
    .gikContentOn .gikLeftTop {
        flex-direction: row-reverse;
        justify-content: flex-end;
    }
    
    .gikLeftTop svg {
        transform: rotate(0deg);
    }
    
    .gikContentOn .gikLeftTop svg {
        transform: rotate(180deg);
    }
    
    .gikLeftTop polygon {
        fill: var(--orange);
    }
    
    .gikTitle {
        font-size: 22px;
        line-height: 22px;
    }
    
    .gikLeftContent {
        height: auto;
        overflow-y: auto;
        padding-top: 49.61px;
    }
    
    .gikArticle:first-child {
        padding-top: 20px;
    }
    
    .gikArticle {
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 20px;
        padding-bottom: 20px;
        font-size: 19px;
        line-height: 27px;
    }
    
    .gikRightTop {
        display: flex;
        flex-direction: column-reverse;
    }
    
    .template_gik .homeForm1Arrow svg {
        transform: rotate(131deg);
    }
    
    .gikRightTop .homeForm1 {
        padding-left: 20px;
        padding-right: 20px;
        background-color: var(--lightPurple);
    }
    
    .gikRightTop .homeForm2 {
        padding-right: 50px;
        padding-bottom: 30px;
        padding-top: 10px;
        padding-left: 30px;
        justify-content: space-between;
        background-color: var(--blue3);
    }
    
    .gikRightTop .homeForm2Left {
        width: 180px;
    }
    
    .gikRightContent {
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 20px;
        padding-bottom: 20px;
        font-size: 19px;
        line-height: 27px;
        height: auto;
        overflow-y: auto;
    }
    
    .gikContentOn .gikRight {
        display: none;
    }
    
    .drLeft {
        width: calc(100vw - 48px);
    }
    
    .drRight {
        width: 48px;
    }
    
    .drRight .opVertical span {
        bottom: 115px;
    }
    
    .uslRightTitle {
        font-size: 22px;
    }
    
    .drRight .uslArrow  {
        padding-left: 20px;
    }
    
    .drLeft {
        background-color: var(--lightRed3);
    }
    
    .drLeftTop {
        padding-top: 13px;
        padding-bottom: 13px;
        padding-left: 20px;
        padding-right: 20px;
        display: flex;
        align-items: center;
    }
    
    .drArticleOpen .drLeftTop {
        padding-top: 9px;
        padding-bottom: 9px;
    }
    
    .drLeftTop .boSingleArrow {
        display: none;
    }
    
    .drLeftTop .boSingleArrow polygon {
        fill: var(--lightRed);
    }
    
    .drArticleOpen .drLeftTop .boSingleArrow {
        display: block;
    }
    
    .drLeftTop .uslTitle {
        color: var(--lightRed);
    }
    
    .drContent {
        padding: 20px;
        font-size: 13px;
        line-height: 21px;
    }
    
    .drArticleOpen .drContent {
        background-color: var(--lightRed2);
        color: var(--darkBlue);
    }
    
    .drContent a {
        text-decoration: underline;
    }
    
    .drGridPrev,
    .drGridNext {
        display: none;
    }
    
    .drGrid {
        display: flex;
        width: auto;
        min-height: auto;
        overflow-x: auto;
        flex-wrap: unset;
        flex-direction: column;
    }
    
    .drArticle {
        width: auto;
        padding: 20px;
        background-color: var(--lightRed2);
    }
    
    .drArticle:nth-child(2n) {
        background-color: var(--lightRed3);
    }
    
    .drArticle.active {
        width: auto;
        min-height: auto;
        background-color: var(--lightRed3);
    }
    
    .drArticleInner {
        width: auto;
    }
    
    .drArticleTitle {
        font-size: 27px;
        line-height: 33px;
        text-align: center;
    }
    
    .drArticle:hover .drArticleTitle {
        text-decoration: none;
    }
    
    .drArticle.active .drArticleText {
        display: block;
        margin-top: 0;
    }
    
    .drArticleText {
        font-size: 19px;
        line-height: 27px;
    }
    
    .drArticleHidden {
        display: none;
    }
    
    
    
    .repoContent,
    .template_repo .boSingleArrow {
        display: none;
    }
    
    .repoLeftOpen .boSingleArrow polygon {
        fill: var(--yellow2);
    }
    
    .repoRightOpen .boSingleArrow polygon {
        fill: var(--darkGreen);
    }
    
    .repoLeftOpen .boSingleArrow,
    .repoRightOpen .boSingleArrow {
        display: block;
    }
    
    .repoHero {
        flex-direction: column;
    }
    
    .repoHeroLeft, .repoHeroRight {
        width: 100vw;
        height: calc((100vh - 50px)/2);
        height: calc((100dvh - 50px)/2);
        font-size: 27px;
        line-height: 33px;
        padding-top: 0;
        padding-bottom: 0;
    }
    
    .repoHeroTitle {
        max-width: 60vw;
    }
    
    .repoRightOpen .repoContent,
    .repoLeftOpen .repoContent {
        display: block;
        padding-top: 49.61px;
        height: calc(100vh - 99.61px);
        overflow-y: scroll;
    }
    
    .repoRightOpen #repoLeft,
    .repoLeftOpen #repoRight,
    .repoRightOpen .repoHeroLeft ,
    .repoLeftOpen .repoHeroRight {
        display: none;
    }
    
    .repoRightOpen .repoHeroRight,
    .repoLeftOpen .repoHeroLeft {
        position: fixed;
        height: auto;
        padding-top: 9px;
        padding-bottom: 9px;
        padding-left: 13px;
        justify-content: flex-start;
        text-align: left;
        z-index: 9;
    }
    
    .repoHero .boSingleArrow {
        margin-right: 12px;
    }
    
    .repoRightOpen .repoHeroRight .repoHeroTitle,
    .repoLeftOpen .repoHeroLeft .repoHeroTitle {
        max-width: none;
        font-size: 22px;
        line-height: 22px;
    }
    
    #repoLeft, #repoRight {
        height: auto;
        overflow-y: auto;
    }
    
    .repoLeft, .repoRight {
        width: 100vw;
    }
    
    .acc-left {
        font-size: 25px;
        padding-left: 17px;
        padding-right: 17px;
    }
    
    .acc-title {
        padding-top: 20px;
        padding-bottom: 20px;
        padding-right: 20px;
        min-height: auto;
    }
    
    .acc-title p {
        font-size: 15px;
        line-height: 20px;
    }
    
    .acc-content {
        padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 45px;
        padding-right: 35px;
        font-size: 13px;
        line-height: 21px;
    }
    
    .acc-right {
        padding-left: 12px;
        padding-right: 12px;
    }
    
    
    .homeLogoInner.start-animation {
        animation: none;
    }
    
    .homeLogo {
        width: 100vw;
        height: auto;
        background-color: var(--red3);
        padding-left: 0;
        padding-right: 0;
        padding-top: 0;
        padding-bottom: 0;
        order: 1;
    }
    
    .homeLogoMobile {
        height: calc(100dvh - 144px);
        padding-top: 50px;
        padding-bottom: 0px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .homeLogoMobile svg {
        width: 300px;
    }
    
    .gikArrowRight {
        padding: 20px;
        background-color: var(--orange);
        
    }
    
    .gikArrowRight svg {
        width: calc(100vw - 40px);
    }
    
    .gikArrowRight path {
        fill: var(--red);
    }
    
    .gikArrowLeft {
        padding: 20px;
        background-color: var(--orange);
        
    }
    
    .gikArrowLeft svg {
        width: calc(100vw - 40px);
    }
    
    .gikArrowLeft path {
        fill: var(--red);
    }
    
    .template_pp {
        padding-top: 0;
    }
    
    .ppInner {
        min-height:  auto;
        height: 100vh;
        
    }
    
    
}

@keyframes homeForm2AniMobile {
      0%, 49% {
        margin-right: 10px;
      }
      50%, 100% {
        margin-right: 0;
      }
    }
    
    
.page-id-41 #menu-item-37 a,
.page-id-43 #menu-item-37 a{
    text-decoration: line-through;
}

@media (min-width: 769px) {
    .gikPpStreliceLeft {
        margin-left: 0;
        animation: gikPpStreliceLeftAni 2s infinite!important;
    }
    
    .gikPpStreliceRight {
        margin-right: 0;
        animation: gikPpStreliceRightAni 2s infinite!important;
    }
    
    .gikRightTop .homeForm2Left {
        width: calc(14.5vw - 20px);
    }
}


@keyframes gikPpStreliceLeftAni {
      0%, 49% {
        margin-left: 0;
      }
      50%, 100% {
        margin-left: 10px;
      }
    }
    
    @keyframes gikPpStreliceRightAni {
      0%, 49% {
        margin-right: 0;
      }
      50%, 100% {
        margin-right: 10px;
      }
    }