@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Poppins:wght@200;400;500;600&display=swap');


body {
    background-color: #050505;
    font-family: 'Poppins', sans-serif;
    color: #ffffff;
    font-weight: 400;
}

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

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


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

#kat1,
#kat2,
#kat3,
#kat4,
#kat5 {
    height: 100%;
    }

#kat1:hover,
#kat2:hover,
#kat3:hover,
#kat4:hover,
#kat5:hover {
    opacity: 0.8;
    }


    .pasica-mob {
        width: 100%;
        margin: 2rem auto 6rem auto;
        }

    .pasica-desk {
        display: none;
        width: 100%;
        margin: 6rem auto 2rem auto;
        }

.all-zlatni {
    background-color: transparent;
    width: 100%;
    height: auto;
    overflow-x: hidden;
    position: relative;
    padding-bottom: 18px;
    }


    .menu {
        position: fixed;
        right: 45%;
        top: 193px;
        width: 40px;
        transform: translateY(-50%);
        z-index: 999;
        }

        .menu img {
            display: none;
            width: 43px;
            }

        .menu a:nth-child(2) img {
            display: inline-block;
            width: 40px;
            }



    .logo-img {
        width: 200px;
        }

    .lijevi-stupac {
        position: fixed;
        width: 35%;
        height: 200px;
        top: 0;
        left: 58%;
        scale: 0.8;
        }

        .studio-znak {
            position: absolute;
            /* transform: scale(10); */
            width: 217px;
            top: 25px;
            left: -232px;
            opacity: 0.6;

            animation-name: logo-3, logo-scale;
            animation-duration: 2s, 3s;
            animation-delay: 0s, 2s;
            animation-iteration-count: 1, infinite;
            animation-direction: alternate;
            animation-fill-mode: none, none;
            animation-play-state: running;
            }

            .studio-znak {
                position: absolute;
                width: 217px;
                top: 25px;
                left: -232px;
                opacity: 1;
    
                animation-name: logo-scale;
                animation-duration: 3s;
                animation-delay: 0;
                animation-iteration-count: infinite;
                animation-direction: alternate;
                animation-fill-mode: none;
                animation-play-state: running;
                }

            
            /* @keyframes logo-1 {
                0% {transform: matrix(7,0,0,7,0,0) translate(20%, 20%); opacity: 0; animation-timing-function: ease-in-out;}
                100% {transform: matrix(1,0,0,1,0,0) translate(-50%, -50%);opacity: 1;}
                }

            @keyframes logo-scale {
                    0% {transform: matrix(1,0,0,1,0,0) translate(-50%, -50%); opacity: 1; animation-timing-function: ease-in-out;}
                    100% {transform: matrix(1.5,0,0,1.5,0,0) translate(-35%, -38%); opacity: 1;}
                    } */

                    @keyframes logo-1 {
                        0% {transform: scale(10); opacity: 0; animation-timing-function: ease-in-out;}
                        100% {transform: scale(1); opacity: 1;}
                        }
        
                    @keyframes logo-scale {
                            0% {transform: scale(1) ; opacity: 1; animation-timing-function: ease-in-out;}
                            100% {transform: scale(1.4) ; opacity: 1;}
                            }

            .zl-st {
                position: fixed;
                width: 80px;
                right: 162px;
                bottom: 82px;
                }

                .zl-st a {
                    font-family: Bebas Neue;
                    font-weight: 400;
                    font-size: 58px;
                    line-height: 48px;
                    color: #ffcc33;
                    }

    .bck {
        position: fixed;
        width: 100vw;
        height: 100vh;
        z-index: 0;
        overflow: hidden;
        }

        .end-of-the-light,
        .end-of-the-light-2 {
            position: absolute;
            background: #ffcc331a;
            border-radius: 0 0 50% 50%;
            clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%);
            width: 398px;
            height: 260px;
            left: 0;
            transform: translateX(-50%);
            top: 1470px;
            }


            .end-of-the-light-2 {
                width: 122px;
                left: 61px;
                transform: translateX(-125%);
                top: 1560px;
                height: 80px;
                }


    .bck-img-1,
    .bck-img-2,
    .bck-img-3,
    .bck-img-4,
    .bck-img-5 {
        position: absolute;
        }

    .bck-img-1 {
        left: -15px;
        top: -5px;
        height: 1px;
        width: 1px;
        transform: rotate(-18deg);

        opacity: 0.4; 
        animation-name: light-left-1; 
        animation-duration: 4s; 
        animation-delay: -2s; 
        animation-iteration-count: infinite; 
        animation-direction: alternate; 
        animation-fill-mode: none;
        }

        .bck-img-1 svg {
            height: 1600px;
            width: 200px;
            position: absolute;
            top: 0;
            left: 0;
            transform: translateX(-50%);
            }

    .bck-img-2 {
        right: -15px;
        top: -5px;
        height: 1px;
        width: 1px;
        transform: rotate(40deg);

        opacity: 0.4; 
        animation-name: light-right; 
        animation-duration: 4s; 
        animation-delay: -4s; 
        animation-iteration-count: infinite; 
        animation-direction: alternate; 
        animation-fill-mode: none;
        }
        
        .bck-img-2 svg {
            height: 1600px;
            width: 400px;
            position: absolute;
            top: 0;
            left: 0;
            transform: translateX(-50%);
            }

    .bck-img-3 {
        left: -15px;
        top: -5px;
        height: 1px;
        width: 1px;
        transform: rotate(-25deg);

        opacity: 0.4; 
        animation-name: light-left-2; 
        animation-duration: 3s; 
        animation-delay: 0s; 
        animation-iteration-count: infinite; 
        animation-direction: alternate; 
        animation-fill-mode: none;
        }

        .bck-img-3 svg {
            height: 1600px;
            width: 200px;
            position: absolute;
            top: 0;
            left: 0;
            transform: translateX(-50%);
            }

    .bck-img-4,
    .bck-img-5 {
        top: 18%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0.5);
        }

            .bck-img-4 {
                width: 2282.5px;
                height: 1250px;
                }

                .bck-img-4 img {
                    width: 100%;
                    height: 100%;
                    offset-path: path("M 1141.25 625");
                    offset-rotate: 0deg;
                    transform: scale(1.5) rotate(0deg);
                    opacity: 0;
                    offset-distance: 0px;
                    animation-name: animation_4_1;
                    animation-duration: 12s;
                    animation-delay: 0s;
                    animation-iteration-count: infinite;
                    animation-direction: alternate;
                    animation-fill-mode: none;
                    animation-play-state: running;
                    }

                
            .bck-img-5 {
                width: 2282.5px;
                height: 1250px;
                }

                .bck-img-5 img {
                    width: 100%;
                    height: 100%;
                    offset-path: path("M 1141.25 625");
                    offset-rotate: 0deg;
                    transform: scale(1.5) rotate(0deg);
                    opacity: 0;
                    offset-distance: 0px;
                    animation-name: animation_5_1;
                    animation-duration: 10s;
                    animation-delay: 0s;
                    animation-iteration-count: infinite;
                    animation-direction: alternate;
                    animation-fill-mode: none;
                    animation-play-state: running;
                    }


            @keyframes light-right {
                0% {transform: rotate(40deg) scale(1); opacity: 0.6; animation-timing-function: ease-in-out}
                100% {transform: rotate(20deg) scale(1); opacity: 1; }
                }

            @keyframes light-left-1 {
                0% {transform: rotate(-18deg) scale(1); opacity: 0.4; animation-timing-function: ease-in-out}
                100% {transform: rotate(-38deg) scale(1); opacity: 0.8; }
                }

            @keyframes light-left-2 {
                0% {transform: rotate(-25deg) scale(1); opacity: 0.4; animation-timing-function: ease-in-out}
                100% {transform: rotate(-32deg) scale(1); opacity: 0.8; }
                }

            @keyframes animation_4_1 {
                0% { transform: scale(1.5) rotate(0deg); opacity: 0; offset-distance: 0px; animation-timing-function: ease-out; }
                100% { transform: scale(1) rotate(85deg); opacity: 0.5; offset-distance: 0px; }
                }

            @keyframes animation_5_1 {
                0% { transform: scale(1.5) rotate(0deg); opacity: 0; offset-distance: 0px; animation-timing-function: ease-out; }
                100% { transform: scale(1) rotate(60deg); opacity: 0.85; offset-distance: 0px; }
                }



            .naslovni img:hover {
                opacity: 0.8;
                }


        .naslovni,
        .container.move-x {
            margin-top: 252px;
            margin-bottom: 200px;
            }

            .container.move-x {
                margin-top: 284px;
                }
    

        .naslovni .row.prvi-red,
        .naslovni .row.kategorija-drugi-red {
            margin-bottom: 90px;
            }

            .naslovni .row.kategorija-drugi-red.zadnji {
                margin-bottom: 160px;
                }

    

        h1 {
            font-family: 'Bebas Neue', sans-serif;
            position: relative;
            font-weight: 400;

            }

            h1.godina {
                transform: translateY(-50%);
                font-size: 70px;
                margin-top: 60px;
                letter-spacing: -2px;
                }


            p.nmn {
                transform: translateY(-50%);
                font-weight: 200;
                margin-top: -18px;
                margin-left: 3px;
                font-size: 24px;
                line-height: 25px;
                width: 100px;
                }

            h1.naslov {
                color: #ffffff;
                display: inline-block;
                font-size: 74px;
                line-height: 60px;
                letter-spacing: -2px;
                }

            p.podnaslov {
                color: #ffcc33;
                font-size: 18px;
                line-height: 26px;
                letter-spacing: 0px;
                }

            p.naslov-podkategorije {
                font-weight: 600;
                font-size: 18px;
                line-height: 18px;
                letter-spacing: 0.3px;
                margin-bottom: 28px;
                display: none;
                }

            p.copy {
                color: #ffffffbf;
                font-size: 16px;
                text-align: center;
                }

            p.opis {
                font-size: 20px;
                line-height: 28px;
                font-weight: 300;
                margin-top: 14px;
                }


            .kategorije-next h1 {
                position: absolute;
                font-weight: 300;
                font-size: 44px;
                line-height: 38px;
                z-index: 10;
                bottom: -24px;
                left: 26px;
                }

                .kategorije-next h1.specijalna {
                    font-size: 16px;
                    bottom: -60px;
                    left: 33px;
                    letter-spacing: 0.8px;
                    }
                    

                            
        .kategorije {
            margin-top: 246px;
            }

            .podkategorije-slike {
                width: 180px;
                }

        .img-first,
        .img-kat,
        .kategorije-next,
        .first-screen-next {
            position: relative;
            }

        .first-screen-next {
            left: -90px;
            }

        .kategorije-next {
            position: relative;
            background-size: 100%;
            background-position: 0 32%;
            text-align: left;
            width: 100%;
            height: 390px;
            margin-bottom: 30px;
            }

        .kategorije-third {
            position: relative;
            background-size: 244%;
            background-position: center center;
            text-align: left;
            width: 100%;
            height: auto;
            margin-bottom: 30px;
            }
            

        .arrow-next {
            position: absolute;
            right: -90px;
            bottom: -62px;
            filter: drop-shadow(5px 4px 10px black);
            }
            

        .kategorije-next .arrow-next {
            right: -50px;
            bottom: -20px;
            width: 100px;
            }


        .prvi-red {
            margin-top: 48px;
            }

        .kategorija-drugi-red,
        .drugi-red {
            margin-top: 4px;
            }

        .zadnji {
            margin-bottom: 160px;
            }   

        .img-kat {
            width: 92%;
            }




            .pds-question-top {
                font-weight: 600!important;
                font-size: 25px!important;
                line-height: 30px!important;
            }


            .pds-answer-input {
                position: absolute!important;
                left: 0;
            }


            .pds-answer-input > input[type="radio"] {
                transform: translateY(0);
            }

            .pds-answer-input > input[type="radio"]:checked::before .pds-input-label span {
                color: #ffcc33!important;
            }
            .pds-input-label:hover span {
                color: #ffcc33!important;
            }



            .pds-vote-button {
                letter-spacing: 0.5px!important;
            }

            .pds-vote-button:hover {
                opacity: 0.8!important;
            }

            .pds-vote-button:focus,
            .pds-vote-button:focus-visible {
                outline: none;
                }

            .pds-box {
                background: transparent!important;
                margin-top: 20px!important;
            }


            button.glasaj {
                    position: relative;
                    font-family:"Poppins", sans-serif;
                    font-weight:500;
                    background-color:#fc3;
                    text-align:center;
                    border-radius:20px;
                    border: none;
                    color:#050505;
                    font-size:16px;
                    letter-spacing: 0.2px;
                    float:left;
                    transition: 0.3s ease 0;
                    text-decoration:none;
                    cursor:pointer;
                    width:118px;
                    height:40px;
                    margin-top: 20px;
                }

                button.glasaj:hover {
                    background-color:#ffc516;
                    }

                button.glasaj:focus,
                button.glasaj:focus-visible {
                outline: none;
                }

                .naslovna-kategorija-text {
                    height: 370px;
                    margin-top: 20px;
                    margin-bottom: -50px;
                    }


    @media (min-width: 400px) {
        .naslovna-kategorija-text {
            height: 322px;
            }
        

    }

    @media (min-width: 450px) {
        .naslovna-kategorija-text {
            height: 315px;
            }

    }




    @media (min-width: 576px) {

        .pasica-mob {
            display: none;
            }
        .pasica-desk {
            display: block;
            }

        .bck-img-4,
        .bck-img-5 {
            top: 20%;
            transform: translate(-50%, -50%) scale(0.5);
            }

        .naslovna-kategorija-text {
            height: 242px;
            margin-top: 48px;
            margin-bottom: 24px;
            }

        .lijevi-stupac {
            width: 322px;
            height: 150px;
            top: 0px;
            left: 43%;
            }
    
        .naslovni,
        .container.move-x {
            margin-top: 252px;
            margin-bottom: 200px;
            }
    
            button.glasaj {
                bottom: -14px;
            }
    
            h1.godina {
                font-size: 104px;
                margin-top: 106px;
                display: inline-block;
                }
    
            p.nmn {
                transform: translate(0, -75%);
                margin-left: 21px;
                font-size: 26px;
                line-height: 28px;
                display: inline-block;
                }
    
                .menu {
                    right: 46%;
                    top: 183px;
                }
    
                .menu img {
                    margin: 0 10px 0 0 ;
                    }
        
                .menu a:nth-child(2) img {
                    margin: 0;
                    }
    
        h1.naslov {
            font-size: 92px;
            }

        p.podnaslov {
            display: inline-block;
            margin-left: 48px;
            }
    
                
        .kategorije {
            margin-top: 98px;
            margin-bottom: 60px;
            }
    
            .first-screen-next {
                left: -205px;
                }
    
            .arrow-next {
                right: -178px;
                bottom: 30px;
                filter: none;
                }
    
    
        }

@media (min-width: 783px) {

        button.glasaj {
            position: absolute;
            bottom: 70px;
            left: 16px;
            }

            .bck-img-4,
            .bck-img-5 {
                top: 40%;
                transform: translate(-50%, -50%) scale(0.4);
                }
    }

@media (min-width: 783px) {

    .naslovna-kategorija-text {
        height: inherit;
        min-height: 270px;
        margin-top: 10px;
    }

    .lijevi-stupac {
        width: 50%;
        height: 150px;
        top: 0px;
        left: 43%;
        }

    .naslovni,
    .container.move-x {
        margin-top: 252px;
        margin-bottom: 200px;
        }

        button.glasaj {
            bottom: -14px;
        }

        h1.godina {
            font-size: 104px;
            margin-top: 106px;
            display: inline-block;
            }

        p.nmn {
            transform: translate(0, -75%);
            margin-left: 21px;
            font-size: 26px;
            line-height: 28px;
            display: inline-block;
            }

            .menu img {
                margin: 0 10px 0 0 ;
                }
    
            .menu a:nth-child(2) img {
                margin: 0;
                }

    h1.naslov {
        font-size: 92px;
        }

            
    .kategorije {
        margin-top: 98px;
        margin-bottom: 60px;
        }

        .first-screen-next {
            left: -205px;
            }

        .arrow-next {
            right: -178px;
            bottom: 30px;
            filter: none;
            }


    }

    @media (min-width: 1009px) {

        .bck-img-4,
        .bck-img-5 {
            top: 33%;
            transform: translate(-50%, -50%) scale(0.6);
            }

        .naslovna-kategorija-text {
            min-height: 220px;
            }

        .menu {
            right: 95px;
            top: 128px;
            width: 40px;
            }

        .lijevi-stupac {
            width: 158px;
            top: 143px;
            left: 56px;
            scale: 0.8;
            }

        .naslovni,
        .container.move-x {
            width: 660px;
            transform: translateX(99px);
            margin-top: 136px;
            margin-bottom: 200px;
            }

        h1.naslov {
            font-size: 110px;
            }

        p.opis {
            font-size: 17px;
            line-height: 24px;
            margin-top: 0px;
            }


        .studio-znak {
            width: 226px;
            top: -78px;
            left: -28px;
            }

            .zl-st {
                right: 132px;
                bottom: 70px;
            }

            button.glasaj {
                bottom: -14px;
            }

            p.nmn {
                transform: translateY(-50%);
                margin-top: -14px;
                margin-left: 3px;
                font-size: 34px;
                line-height: 35px;
                display: block;
                }

                h1.godina {
                    font-size: 110px;
                    margin-top: 152px;
                    display: block;
                    }

        .kategorije-next {
            margin-bottom: 0px;
            width: 450px;
            }

            .prvi-red {
                margin-top: 40px;
                }
    
            .drugi-red {
                margin-top: 40px;
                }

            .kategorija-drugi-red {
                margin-top: 20px;
                }

                .podkategorije-slike {
                    width: 200px;
                    margin-bottom: 25px;
                    }

                    
        }


    @media (min-width: 1024px) {

        .bck-img-4,
        .bck-img-5 {
            transform: translate(-50%, -50%) scale(0.7);
            }

        .lijevi-stupac {
            width: 172px;
            top: 180px;
            left: 88px;
            scale: 0.9;
            }

        .naslovni,
        .container.move-x {
            width: 790px;
            transform: translateX(95px);
            margin-top: 140px;
            margin-bottom: 150px;
            }

        h1.naslov {
            font-size: 96px;
            }

        p.opis {
            font-size: 20px;
            line-height: 28px;
            margin-top: 14px;
            }


        .studio-znak {
            width: 226px;
            top: -78px;
            left: -28px;
            }

            button.glasaj {
                bottom: 12px;
                }

        .kategorije-next {
            margin-bottom: 0px;
            width: 450px;
            }

            .prvi-red {
                margin-top: 40px;
                }
    
            .drugi-red {
                margin-top: 40px;
                }

            .kategorija-drugi-red {
                margin-top: 20px;
                }

                .podkategorije-slike {
                    width: 200px;
                    margin-bottom: 25px;
                    }

                .pds-input-label {
                    font-size: 19px!important;
                    line-height: 28px!important;
                    padding: 0 0 0 8px!important;
                    margin: -2px 0 5px 23px!important
                    }

                .bck-img-2 svg {
                    transform: translate(-50%, 208px) scale(1.3);
                    }
        
                    .bck-img-1 svg {
                        transform: translate(-50%, 208px) scale(1.3);
                        }
        
                    .bck-img-3 svg {
                        transform: translate(-50%, 208px) scale(1.3);
                        }

                        .end-of-the-light, .end-of-the-light-2 {
                            transform: translateX(-50%) scale(1.3);
                            top: 1918px;
                            }

                            .end-of-the-light-2 {
                                transform: translateX(-132%) scale(1.3);
                                top: 2008px;
                                }

                    
        }


    /* @media (min-width: 1921px) {

        .lijevi-stupac {
            top: 270px;
            left: 202px;
            }

        h1.godina {
            font-size: 146px;
            margin-top: 204px;
            }

        p.nmn {
            margin-top: 42px;
            font-size: 50px;
            line-height: 51px;
            }

        .studio-znak {
            width: 270px;
            }

        button.glasaj {
            bottom: 70px;
            left: 50px;
            }

        p.opis {
            font-size: 25px;
            line-height: 35px;
            font-weight: 400;
            margin-top: 34px;
            }

        .naslovni {
            width: 1260px;
            transform: translateX(-28px);
            margin-top: 180px;
            }

        .bck-img-2 svg {
            transform: translate(-50%, 208px) scale(1.3);
            }

            .bck-img-1 svg {
                transform: translate(-50%, 208px) scale(1.3);
                }

            .bck-img-3 svg {
                transform: translate(-50%, 208px) scale(1.3);
                }

        .zl-st {
            right: 212px;
            bottom: 140px;
            }

        .zl-st a {
            font-size: 80px;
            line-height: 66px;
            }

        .menu {
            right: 80px;
            top: 156px;
            }

            .menu img {
                width: 58px;
                }

            .menu a:nth-child(2) img {
                width: 64px;
                }

        .container.move-x {
            transform: translateX(-18px);
            }

        .kategorije {
            margin-top: 150px;
            margin-bottom: 60px;
            }

        h1.naslov {
            font-size: 144px;
            }

        p.naslov-podkategorije {
            font-size: 26px;
            line-height: 18px;
            margin-bottom: 42px;
            }

        .podkategorije-slike {
            width: 250px;
            margin-bottom: 30px;
            }

            .pds-input-label {
                font-size: 22px!important;
                line-height: 34px!important;
                padding: 0 0 0 8px!important;
                margin: 4px 0 0 23px;
                }

            .pds-answer-input > input[type="radio"] {
                margin: 12px 0 0!important;
                width: 16px!important;
                height: 16px!important;
                }

            .container.move-x {
                transform: translateX(125px);
                max-width: 1400px;
                }

            .prvi-red {
                margin-top: 100px;
                }
            .kategorija-drugi-red {
                margin-top: 100px;
                }
            .zadnji {
                margin-bottom: 200px;
                }

            p.copy {
                font-size: 22px;
                }

            p.podnaslov {
                font-size: 25px;
                }

            .pds-vote-button {
                border-radius: 25px!important;
                font-size: 20px!important;
                width: 156px!important;
                height: 50px!important;
                margin-top: 50px!important;
                }

            .col-md-6 {
                padding: 0 50px 0 20px;
                }

        } */