:root {
    --bcg-color: #fff;
    --txt-color: #121212;
    --landing-title-color: #000;
    --txt-color-link-hover: #121212;
    --invert-txt-color: #fff;
    --media-section-bcg: linear-gradient(#202020, #151515);

    --button-and-link: #ED1C24;
    --a-link-hover: #b61411;
    --btn-txt-color: #fff;
    --foot-button: #ED1C24;
    --button-hover: #fdbb11;

    --card-bcg-color: #000;
    --card-bcg-color-2: #323232;
    --card-border-color: none;

    --card-period-bcg-color: #CC9539;
    --card-period-color: #121212;

    --billing-bcg-color-0: #f6f6f6;
    --billing-color-0: #808080;
    --billing-bcg-color-1: #CC9539;
    --billing-color-1: #121212;

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

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

    --bf-title-font: "Oswald",sans-serif;
    --landing-title-font: "Oswald",sans-serif;

    --step-bcg: #242424;
    --step-number-color: #ED1C24;

    --timer-bcg-color: transparent;
    --timer-color: #CC9539;
}

#ocmContainer {
    color: var(--txt-color);
    background-color: var(--bcg-color);


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

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

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

    .logo { 
        width: 30%; 
        max-width: 230px;
        margin-block: 40px;
    }

    &.page--daruj-pretplatu,
    &.poklon-pretplata_page {
        .logo { 
        margin-block: -4rem 0;
        }

        video.logo { 
            width: 380px; 
            max-width: 60%; 
            margin-block: -0.5rem 1rem;
        }

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

        .naslov-text {
            h1 {
                font-family: var(--subtitles-font);
                margin-top: 20px;
                line-height: 1;
            }
            h2 {
                line-height: 1.3;
            }
        }
    }

    &.poklon-pretplata_page {
        .logo { 
        margin-block: -4rem;
        }

        .naslov-text {
            h1 {
                margin-top: 30px;
                line-height: 1.2;
            }
        }
    }

    .naslov-text {
        h1 { 
            font-size: 6rem;   
            font-family: var(--landing-title-font);
        }  
        h2 { 
            font-size: 20px;
            font-family: var(--subtitles-font);
        } 
    }

    .big-title {
        font-family: var(--landing-title-font);
        font-weight: 600;
        color: var(--landing-title-color);
        margin-block: 0 1.2rem;
    }

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

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

    .sto-dobivas {
        p {
            color: var(--txt-color);
        }
        .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;  
    } 

    .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);
        color: var(--button-and-link);
        border-radius: 50vw;
        outline: 2px solid var(--button-and-link);
        line-height: 0.8;
        padding-block: 0px 3px;
        padding-inline: 1px 0;
        width: 22px;
        top: 16px;
        aspect-ratio: 1;
        display: grid;
        justify-items: center;
        justify-content: center;
        align-content: center;
        align-items: center;
        }


    .naslov-text h2 {
        padding: 0 1rem;
        }


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

    p, .pitanje h3 {    
        font-family: var(--title-font);
        font-variation-settings: "wdth" 75;
        font-weight: 620;
        letter-spacing: 0.2px;
        }

    .kartica p {    
        font-weight: 500;
        letter-spacing: 0.5px;
        }


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

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



    
    @media (min-width: 768px) { 

        .naslov-text { 
            margin: 12px 0 106px 0;

            h1 {
                font-size: 10.5rem;
            }
        }

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

            .naslov-text {
                margin: -20px 0 74px 0;

                h1 {
                    font-size: 8rem;
                }
            }
        }

        &.poklon-pretplata_page {
            .naslov-text {
                h1 {
                    font-size: 6rem;
                }
            }
            .red-background,
            .media-background {
                padding-block: 5rem 0;
                margin-bottom: 0;
            }
        }

        .plusich {
            top: 18px;
        }
    }

    @media (min-width: 992px) {

        background-position: center 118px;
        background-size: 840px;

        .bf-title {
            font-size: 10rem;
            margin-top: -4rem;
        }

    }

    
    @media (min-width: 1280px) {

        .logo { 
            margin-block: 70px;
        }

        .sto-dobivas {
            margin-block: 100px;
        }

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

        &.page--daruj-pretplatu,
        &.poklon-pretplata_page {
            img.logo { 
                margin-block: 0 6rem;
            }
            .logo { 
                margin-block: 2.5rem;
            }
        }

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

        &.page--daruj-pretplatu{
            .sto-dobivas {
                margin-block: 144px;
            }
            .gift-page-content {
                margin-bottom: 7rem;
            }
        }

    } 
    
        /* DARUJ PREMIUM FLOATER */

        .gift-floater,
        .gift-floater-mob {
            .gift-floater-circle {
                background: #ed1c24;
    
                p.floater-text {
                    width: 93cqw;
                }
            }
        }

        .gift-floater {
            .gift-floater-circle {
                &:hover {
                    background: #fdbb11;
                }
            }
        }


}