:root {
    --button-and-link: #e13f3d;
    --a-link-hover: #b61411;
    --btn-txt-color: #fff;
    --step-number-color: #FA292A;
    --bcg-color: #fff;
    --card-bcg-color: transparent;
    --qa-bcg-color: transparent;
    --txt-color: #121212;
    --txt-color-link-hover: #1d1d1d;
    --invert-txt-color: #fff;
    --step-bcg: #24374D;
    --foot-button: #284B71;

    --explanations-font: 'Georgia Regular', serif;
    --explanations-font-bold: 'Georgia Bold', serif;
    --explanations-font-bold-italic: 'Georgia Bold Italic', serif;
    
    --button-font: 'Slabo 27px', serif;
    --subtitles-font: 'Slabo 27px', serif;

    --card-addons-title-font: "Archivo", sans-serif;
    --title-font: "Archivo", sans-serif;
    --price-font: "Archivo", sans-serif;

    --media-section-bcg: #EB3335;
}


#ocmContainer {

    .section-white,
    .section-pretplata {
        a {
            color: var(--button-and-link);

            &:hover {
                color: var(--a-link-hover);
            }
        }
    }

    .section-pretplata { 
        padding: 18px 0;
        margin-top: 0;
    }

    .logo { 
        width: 30%; max-width: 135px; 
    }

    &.page--daruj-pretplatu,
    &.poklon-pretplata_page {
        video.logo { 
            width: 406px; max-width: 60%; 
        }

        img.logo { 
            width: 135px;
            margin-block: 0 8rem;
        }

        .mobiles {
            grid-template-columns: 1fr 1.18fr 1.3fr 1.18fr 1fr;
        }

        .red-background,
        .media--background {

            &::before {
                background: var(--media-section-bcg);
            }

            p, h1 {
                color: #fff;
            }

            a {
                color: #FECACA;
            } 

        }
    }


    .r1-text {
        color: var(--txt-color); 
    }

    .r1 { 
        font-family: var(--subtitles-font);
    }


    .nyt-banner {
        justify-content: center;
        margin-block: 50px;
        
    }

    .nyt-banner-img {
        width: 300px;
        height: 250px;
        background-color: #a3a3a3;
        outline: 1px solid #dbdbdb;

        display: flex;
        justify-content: center;

        iframe {
            width: 100%;
            height: 100%;

            &.desk-banner {
                display: none;
            }
        }
    }

    &.poklon-pretplata_page {
        .nyt-banner-img {
            margin-block: 5rem 0;
        }
    }


    .sto-dobivas {
        p {
            color: var(--txt-color);
        }
        .nabrajanje {
            p {
                font-family: var(--explanations-font);
            }
        }
    }

    .addon.postojeci-pretplatnici {
        width: 316px;
        margin-block: 40px 30px;

        .nabrajanje {
            p {
                font-family: var(--explanations-font);
            }
        }
    }

    span.bullet-row {
        &::before {
            background-color: var(--txt-color);
        }
    }

    h1, h2 {
        line-height: 1.2;
    }

    .naslov h1 {  
        font-family: var(--title-font);
        color: var(--txt-color);
        font-weight: 700;
        font-variation-settings: "wdth" 72;  
    } 

    .naslov-text {
        h1, h2 {
            font-family: var(--subtitles-font);
        }
        h1 { 
            font-size: 40px;   
        }  
        h2 { 
            font-size: 20px;   
        } 
    }


    .korisnicki-racun {
        h1 {
            font-family: 'Slabo 27px', serif;
            background-color: #F6F6F6;
            color: #808080;
            border-radius: 20px;
        }
        
        a {
            color: var(--txt-color);
        }
        
        a:hover h1 {
            color: var(--txt-color-link-hover);
        }
    }

    .pitanje {  
        background-color: var(--qa-bcg-color);
        } 

    .plusich {
        font-family: var(--explanations-font-bold);
        }


    h2 {
        font-family: var(--title-font);
        font-variation-settings:"wdth" 62;
        color: var(--txt-color);
        }

    p, .pitanje h3,
    .podnaslov-faq h1 {    
        font-family: var(--title-font);
        font-variation-settings: "wdth" 75;
        font-weight: 620;
        color: var(--txt-color);
        }

    .podnaslov-faq h1 {    
        color: var(--button-and-link);
        font-size: 28px;
        padding-top: 30px;
        }

    .section-white .naslov h1 {
        padding-bottom: 60px;
    }


    .odgovor {
        font-family: 'Georgia Regular', serif;
    }

    .sto-dobivas p {
        font-variation-settings: "wdth" 75;
        font-weight: 600;
    }


        
    @media (min-width: 768px) { 

        &.page--daruj-pretplatu,
        &.poklon-pretplata_page {
            .red-background,
            .media--background {
                padding-block: 12rem 6rem;
                margin-bottom: 7rem;
            }
        }
    }

    @media (min-width: 992px) {

        .addon.postojeci-pretplatnici {
            width: 588px;
            margin-block: 78px 36px;
        }

        &.page--daruj-pretplatu,
        &.poklon-pretplata_page {
            .naslov-text {
                h1 { 
                    font-size: 6rem;
                }
            }
        }
    }


    @media (min-width: 1024px) {

        .section-pretplata { 
            padding: 13px 0;
        }

        .naslov-text {
            h1 {
                font-size: 60px;
            }
        }

        .landing-kartice {
            .mjesecno, 
            .godisnje, 
            .dvogodisnje {
                padding-bottom: 85px;
            }
        }

        &.poklon-pretplata_page {
            .citajte-vise {
                .nyt-logo {
                    max-width: 310px;
                    transform: translateX(-6px);
                    margin-block: 3rem 8rem;

                    &::before {
                        left: -32px;
                        font-size: 35px;
                    }
                }
            }
        }

    }

        
    @media (min-width: 1280px) {

        &.page--daruj-pretplatu,
        &.poklon-pretplata_page {

            img.logo { 
                margin-block: 0 15.2rem;
            }

            .red-background,
            .media-background {
                padding-block: 12rem 8rem;
            }
        }

        &.poklon-pretplata_page {
            img.logo { 
                margin-block: 0 15.2rem;
            }

            .red-background,
            .media-background {
                padding-block: 12rem 2rem;
            }
        }

        .nyt-banner-img {
            width: 1245px;
            height: 250px;

            iframe {
                width: 100%;
                height: 100%;

                &.mob-banner {
                    display: none;
                }
                &.desk-banner {
                    display: block;
                }
            }
        }

        &.poklon-pretplata_page {
            .nyt-banner-img {
                margin-block: 6rem 7rem;
            }
        }

        .dvg-pretplate {
            margin-block: 172px 0;
        }

    }


/* DARUJ PREMIUM FLOATER */

    /* .gift-floater,
    .gift-floater-mob {
        .gift-floater-circle {
            background: var(--button-and-link);
            p.floater-text {
                font-family: 'Slabo 27px', serif;
            }
        }
    } */

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

        .gift-floater { */
            /* --value: min(var(--scroll), 65) * 30 / 11;
            top: calc(32rem + 1vw * var(--value));
            transition: 1s top cubic-bezier(0.11, 0.18, 0.57, 0.77); */
            /* top: calc(32rem + 1vw / 4 * var(--scroll)); */
        /* }
    } */
    
    /* @media (min-width: 2200px) {
    
        .gift-floater {
            --value: min(var(--scroll), 65) * 39 / 16;
        }
    } */

}

/* NAVBAR FIX */

.main-nav {
    display: flex;
}

@media (min-width: 1024px) {
    .navbar-nav {
        margin: 0 auto;
    }
}

/* BACK TO TOP FIX */

.back2top-div {
    border-top: none;
    margin-bottom: 16rem;
    padding-top: 10.8rem;
    margin-top: 0;
}

.arrow_to_top {
    display: none;
}

.impressum__back2top {
    position: relative;
    color: #121212;
    background-color: #F6F6F6;
    padding: 8px 0;
    width: 90%;
    transform: none;

    &::before {
        position: absolute;
        top: -28px;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        font-family: "Font Awesome 6 Sharp";
        font-size: 36px;
        content: "\f106";
        font-weight: 400;
        color: #FA292A;
    }
}

.t3-footer {
    z-index: 9;
}

@media (min-width: 1024px) {

    .impressum__back2top {
        width: 40rem;
    }

}

@media (min-width: 1280px) {

    .impressum__back2top {
        width: 60rem;
    }

}