/*  -------------  ---------------------------------------------------------------- */
/*  -------------  ---------------------------------------------------------------- */
/*  ROOT MEDIA COVER SECTION  ----------------------------------------------------- */
/*  -------------  ---------------------------------------------------------------- */
/*  -------------  ---------------------------------------------------------------- */

/*  ROOT COVER TITLE TOP  --------------------------------------------------------- */

@media (max-width: 500px) {
    :root{
        --Cover-Title-Top: var(--Cover-Title-Top-2);
    }
}


/*   -------------------- --------------------------------------------------- */
/*   -------------------- --------------------------------------------------- */
/*   ROOT MEDIA SECTION 1 --------------------------------------------------- */
/*   -------------------- --------------------------------------------------- */
/*   -------------------- --------------------------------------------------- */

/*  ROOT COLLECTION FIRST SECTION TOP  -------------------------------------- */

@media (max-width: 900px) {
    :root{
        --Collection-First-Section-Top: var(--Collection-First-Section-Top-2);
    }
}


/*   -------------------- --------------------------------------------------- */
/*   ROOT MEDIA INTRO ------------------------------------------------------- */
/*   -------------------- --------------------------------------------------- */

/*  ROOT MEDIA COLLECTION INTRO CONTAINER WIDTH  ---------------------------- */

@media (max-width: 840px) and (min-width: 731px) {
    :root{
        --Collection-Intro-Container-Width: var(--Collection-Intro-Container-Width-2);
    }
}

@media (max-width: 730px) {
    :root{
        --Collection-Intro-Container-Width: var(--Collection-Intro-Container-Width-3);
    }
}

/*  ROOT MEDIA COLLECTION INTRO CONTAINER LEFT  ----------------------------- */

@media (max-width: 1800px) and (min-width: 1701px) {
    :root{
        --Collection-Intro-Container-Left: var(--Collection-Intro-Container-Left-2);
    }
}

@media (max-width: 1700px) and (min-width: 1301px) {
    :root{
        --Collection-Intro-Container-Left: var(--Collection-Intro-Container-Left-3);
    }
}

@media (max-width: 1300px) and (min-width: 841px) {
    :root{
        --Collection-Intro-Container-Left: var(--Collection-Intro-Container-Left-4);
    }
}

@media (max-width: 840px) and (min-width: 731px) {
    :root{
        --Collection-Intro-Container-Left: var(--Collection-Intro-Container-Left-5);
    }
}


/*  ROOT MEDIA COLLECTION INTRO CONTAINER LEFT / TOP  ------------------------ */

@media (max-width: 730px) {
    :root{
        --Collection-Intro-Container-Left: var(--Collection-Intro-Container-Left-6);
        --Collection-Intro-Container-Top: var(--Collection-Intro-Container-Top-2);
    }
}



/*   -------------------- --------------------------------------------------- */
/*   ROOT MEDIA INFO -------------------------------------------------------- */
/*   -------------------- --------------------------------------------------- */

/*  ROOT MEDIA COLLECTION INFO PRINCIPAL CONTAINER WIDTH  ------------------- */


@media (max-width: 1800px) and (min-width: 1701px) {
    :root{
        --Collection-Info-Principal-Container-Width: var(--Collection-Info-Principal-Container-Width-2);
        --Collection-Info-Container-Width: var(--Collection-Info-Container-Width-2);
    }
}

@media (max-width: 1700px) and (min-width: 1601px) {
    :root{
        --Collection-Info-Principal-Container-Width: var(--Collection-Info-Principal-Container-Width-3);
        --Collection-Info-Container-Width: var(--Collection-Info-Container-Width-3);
    }
}

@media (max-width: 1600px) and (min-width: 1441px) {
    :root{
        --Collection-Info-Principal-Container-Width: var(--Collection-Info-Principal-Container-Width-4);
        --Collection-Info-Container-Width: var(--Collection-Info-Container-Width-4);
    }
}

@media (max-width: 1440px) and (min-width: 961px) {
    :root{
        --Collection-Info-Principal-Container-Width: var(--Collection-Info-Principal-Container-Width-5);
        --Collection-Info-Container-Width: var(--Collection-Info-Container-Width-5);
    }
}

@media (max-width: 960px) and (min-width: 841px) {
    :root{
        --Collection-Info-Principal-Container-Width: var(--Collection-Info-Principal-Container-Width-6);
        --Collection-Info-Container-Width: var(--Collection-Info-Container-Width-6);
    }
}

@media (max-width: 840px) and (min-width: 731px) {
    :root{
        --Collection-Info-Principal-Container-Width: var(--Collection-Info-Principal-Container-Width-7);
        --Collection-Info-Container-Width: var(--Collection-Info-Container-Width-7);
    }
}

@media (max-width: 730px) {
    :root{
        --Collection-Info-Principal-Container-Width: var(--Collection-Info-Principal-Container-Width-8);
    }
}

@media (max-width: 730px) and (min-width: 601px) {
    :root {
        --Collection-Info-Container-Width: var(--Collection-Info-Container-Width-8);
    }
}

@media (max-width: 600px) and (min-width: 501px) {
    :root {
        --Collection-Info-Container-Width: var(--Collection-Info-Container-Width-9);
    }
}

@media (max-width: 500px) {
    :root {
        --Collection-Info-Container-Width: var(--Collection-Info-Container-Width-10);
    }
}

/*  ROOT MEDIA COLLECTION INFO TEXT BOTTOM // TOP  -------------------------- */

@media (max-width: 600px) {
    :root {
        --Collection-Info-Text-1-Bottom: var(--Collection-Info-Text-1-Bottom-2);
        --Collection-Info-Text-2-Top: var(--Collection-Info-Text-2-Top-2);
    }
}

/*  ROOT MEDIA COLLECTION INFO TEXT GAP  ------------------------------------ */

/* @media (max-width: 960px) { */
@media (max-width: 500px) {
    :root {
        --Collection-Info-Text-Gap: var(--Collection-Info-Text-Gap-2);
    }
}


/*  ROOT MEDIA COLLECTION INFO GLOBAL CONTAINER HEIGHT  --------------------- */

/* @media (max-width: 730px) { */
    /* :root{ */
        /* --Collection-Info-Global-Container-Height: var(--Collection-Info-Global-Container-Height-2); */
    /* } */
/* } */


/*   -------------------- --------------------------------------------------- */
/*   -------------------- --------------------------------------------------- */
/*   ROOT MEDIA SECTION 2 --------------------------------------------------- */
/*   -------------------- --------------------------------------------------- */
/*   -------------------- --------------------------------------------------- */

@media (max-width: 1200px) {
    :root{
        --Collection-Banner-Principal-Container-Height: var(--Collection-Banner-Principal-Container-Height-2);
    }
}

/*   ------------------- ---------------------------------------------------- */
/*   ------------------- ---------------------------------------------------- */
/*   ROOT MEDIA PRODUCTS -------------- ------------------------------------- */
/*   ------------------- ---------------------------------------------------- */
/*   ------------------- ---------------------------------------------------- */

/*   -------------------- --------------------------------------------------- */
/*   ROOT MEDIA PRODUCTS MAIN CONTAINER ------------------------------------- */
/*   -------------------- --------------------------------------------------- */

@media (max-width: 1600px) and (min-width: 1301px) {
    :root{
        --Products-Global-Container-Width: var(--Products-Global-Container-Width-2);
        --Product-Principal-Container-Width: var(--Product-Principal-Container-Width-2);
        --Controls-Gold-Container-Width: var(--Controls-Gold-Container-Width-2);
    }
}

@media (max-width: 1300px) and (min-width: 1071px) {
    :root{
        --Products-Global-Container-Width: var(--Products-Global-Container-Width-1);
        --Product-Principal-Container-Width: var(--Product-Principal-Container-Width-1);
        --Controls-Gold-Container-Width: var(--Controls-Gold-Container-Width-1);
    }
}

@media (max-width: 1070px) and (min-width: 901px) {
    :root{
        --Products-Global-Container-Width: var(--Products-Global-Container-Width-2);
        --Product-Principal-Container-Width: var(--Product-Principal-Container-Width-2);
        --Controls-Gold-Container-Width: var(--Controls-Gold-Container-Width-2);
    }
}

@media (max-width: 900px) {
    :root{
        --Products-Global-Container-Width: var(--Products-Global-Container-Width-1);
        --Product-Principal-Container-Width: var(--Product-Principal-Container-Width-1);
        --Controls-Gold-Container-Width: var(--Controls-Gold-Container-Width-1);
    }
}


/*   ------------------- ---------------------------------------------------- */
/*   ------------------- ---------------------------------------------------- */
/*   ROOT MEDIA IOS PRDCTS -------------- ----------------------------------- */
/*   ------------------- ---------------------------------------------------- */
/*   ------------------- ---------------------------------------------------- */


/*  -------------  ---------------------------------------------------------- */
/*  ROOT MEDIA IOS PRDCTS GAPS  --------------------------------------------- */
/*  -------------  ---------------------------------------------------------- */

/*  ROOT MEDIA IOS PRDCTS ULTRA GAP  ---------------------------------------- */

@media (max-width: 500px) {
    :root{
        --Ios-Prdcts-Ultra-Gap-Height: var(--Ios-Prdcts-Ultra-Gap-Height-2);
    }
}

/*  ROOT MEDIA IOS PRDCTS TOP / BOTTOM / CONTENT FIRST / SECOND GAP  -------- */


@media (max-width: 660px) and (min-width: 501px) {
    :root{
        --Ios-Prdcts-Top-Gap-Height: var(--Ios-Prdcts-Top-Gap-Height-2);
        --Ios-Prdcts-Content-First-Gap-Height: var(--Ios-Prdcts-Content-First-Gap-Height-2);
        --Ios-Prdcts-Content-Second-Gap-Height: var(--Ios-Prdcts-Content-Second-Gap-Height-2);
        --Ios-Prdcts-Bottom-Gap-Height: var(--Ios-Prdcts-Bottom-Gap-Height-2);
    }
}

@media (max-width: 500px) and (min-width: 421px) {
    :root{
        --Ios-Prdcts-Top-Gap-Height: var(--Ios-Prdcts-Top-Gap-Height-3);
        --Ios-Prdcts-Content-First-Gap-Height: var(--Ios-Prdcts-Content-First-Gap-Height-3);
        --Ios-Prdcts-Content-Second-Gap-Height: var(--Ios-Prdcts-Content-Second-Gap-Height-3);
        --Ios-Prdcts-Bottom-Gap-Height: var(--Ios-Prdcts-Bottom-Gap-Height-3);
    }
}

@media (max-width: 420px) {
    :root{
        --Ios-Prdcts-Top-Gap-Height: var(--Ios-Prdcts-Top-Gap-Height-4);
        --Ios-Prdcts-Content-First-Gap-Height: var(--Ios-Prdcts-Content-First-Gap-Height-4);
        --Ios-Prdcts-Content-Second-Gap-Height: var(--Ios-Prdcts-Content-Second-Gap-Height-4);
        --Ios-Prdcts-Bottom-Gap-Height: var(--Ios-Prdcts-Bottom-Gap-Height-4);
    }
}


/*  ROOT MEDIA IOS PRDCTS BTN CONTAINER HEIGHT  ----------------------------- */

@media (max-width: 660px) and (min-width: 501px) {
    :root{
            --Ios-Prdcts-Btn-Container-Height: var(--Ios-Prdcts-Btn-Container-Height-2);
    }
}

@media (max-width: 500px) and (min-width: 421px) {
    :root{
            --Ios-Prdcts-Btn-Container-Height: var(--Ios-Prdcts-Btn-Container-Height-3);
    }
}

@media (max-width: 420px) {
    :root{
            --Ios-Prdcts-Btn-Container-Height: var(--Ios-Prdcts-Btn-Container-Height-4);
    }
}




/*   --------------- -------------------------------------------------------- */
/*   --------------- -------------------------------------------------------- */
/*   ROOT MEDIA SECTION 4 --------------------------------------------------- */
/*   --------------- -------------------------------------------------------- */
/*   --------------- -------------------------------------------------------- */

/*   --------------- -------------------------------------------------------- */
/*   ROOT MEDIA QUALITY ----------------------------------------------------- */
/*   --------------- -------------------------------------------------------- */

/*   ROOT MEDIA QUALITY NB LINES -------------------------------------------- */

@media (max-width: 1600px) and (min-width: 1201px) {
    :root {
        --Quality-Nb-Lines: var(--Quality-Nb-Lines-2);
    }
}

@media (max-width: 1200px) and (min-width: 901px) {
    :root {
        --Quality-Nb-Lines: var(--Quality-Nb-Lines-3);
    }
}

@media (max-width: 900px) and (min-width: 601px) {
    :root {
        --Quality-Nb-Lines: var(--Quality-Nb-Lines-4);
    }
}

@media (max-width: 600px) and (min-width: 201px) {
    :root {
        --Quality-Nb-Lines: var(--Quality-Nb-Lines-5);
    }
}

/*   ROOT MEDIA QUALITY WIDTH ----------------------------------------------- */

@media (max-width: 1800px) and (min-width: 1701px) {
    :root{
        --Quality-Width: var(--Quality-Width-2);
    }
}

@media (max-width: 1700px) and (min-width: 1601px) {
    :root{
        --Quality-Width: var(--Quality-Width-3);
    }
}

@media (max-width: 1600px) and (min-width: 731px) {
    :root{
        --Quality-Width: var(--Quality-Width-4);
    }
}

@media (max-width: 730px) {
    :root{
        --Quality-Width: var(--Quality-Width-5);
    }
}


/*  ROOT MEDIA QUALITY CONTAINER TOP  -------------------------------------- */

@media (max-width: 730px) {
    :root{
        --Quality-Container-Top: var(--Quality-Container-Top-2);
    }
}


/*  ROOT MEDIA QUALITY MAIN CONTAINER HEIGHT  ------------------------------ */

@media (max-width: 730px) {
    :root{
        --Quality-Main-Container-Height: var(--Quality-Main-Container-Height-2);
    }
}



/*   --------------- -------------------------------------------------------- */
/*   ROOT MEDIA SUGGESTIONS ------------------------------------------------- */
/*   --------------- -------------------------------------------------------- */


/*   ROOT MEDIA SUGGESTIONS PRINCIPAL / MAIN CONTAINER (WIDTH) -------------- */

@media (max-width: 1800px) and (min-width: 1701px) {
    :root{
        --Suggestions-Principal-Container-Width: var(--Suggestions-Principal-Container-Width-2);
        --Suggestions-Main-Container-Width: var(--Suggestions-Main-Container-Width-2);
    }
}

@media (max-width: 1700px) and (min-width: 1441px) {
    :root{
        --Suggestions-Principal-Container-Width: var(--Suggestions-Principal-Container-Width-3);
        --Suggestions-Main-Container-Width: var(--Suggestions-Main-Container-Width-3);
    }
}

@media (max-width: 1440px) and (min-width: 1071px) {
    :root{
        --Suggestions-Principal-Container-Width: var(--Suggestions-Principal-Container-Width-4);
        --Suggestions-Main-Container-Width: var(--Suggestions-Main-Container-Width-4);
    }
}

@media (max-width: 1070px) and (min-width: 961px) {
    :root{
        --Suggestions-Principal-Container-Width: var(--Suggestions-Principal-Container-Width-5);
        --Suggestions-Main-Container-Width: var(--Suggestions-Main-Container-Width-5);
    }
}

@media (max-width: 960px) and (min-width: 731px) {
    :root{
        --Suggestions-Principal-Container-Width: var(--Suggestions-Principal-Container-Width-6);
        --Suggestions-Main-Container-Width: var(--Suggestions-Main-Container-Width-6);
    }
}

@media (max-width: 730px) {
    :root{
        --Suggestions-Principal-Container-Width: var(--Suggestions-Principal-Container-Width-7);
        --Suggestions-Main-Container-Width: var(--Suggestions-Main-Container-Width-7);
    }
}


/*   ROOT MEDIA SUGGESTIONS TITLE / ACCROCHE FS / LH ------------------------ */

@media (max-width: 500px) {
    :root{
        --Fs-Suggestions-Infos-Title: var(--Fs-Suggestions-Infos-Title-2);
        --Lh-Suggestions-Infos-Title: var(--Lh-Suggestions-Infos-Title-2);
    }
}

/*   ROOT MEDIA SUGGESTIONS TITLE / ACCROCHE (NB LINES) --------------------- */

@media (max-width: 1800px) and (min-width: 1441px)  {
    :root{
        --Suggestions-Title-Nb-Lines: var(--Suggestions-Title-Nb-Lines-2);
        --Suggestions-Accroche-Nb-Lines: var(--Suggestions-Accroche-Nb-Lines-2);
    }
}
@media (max-width: 1440px) and (min-width: 1301px) {
    :root{
        --Suggestions-Title-Nb-Lines: var(--Suggestions-Title-Nb-Lines-1);
        --Suggestions-Accroche-Nb-Lines: var(--Suggestions-Accroche-Nb-Lines-1);
    }
}
@media (max-width: 1300px) and (min-width: 961px) {
    :root{
        --Suggestions-Title-Nb-Lines: var(--Suggestions-Title-Nb-Lines-2);
        --Suggestions-Accroche-Nb-Lines: var(--Suggestions-Accroche-Nb-Lines-2);
    }
}
@media (max-width: 960px) and (min-width: 901px) {
    :root{
        --Suggestions-Title-Nb-Lines: var(--Suggestions-Title-Nb-Lines-1);
        --Suggestions-Accroche-Nb-Lines: var(--Suggestions-Accroche-Nb-Lines-1);
    }
}
@media (max-width: 900px) and (min-width: 731px) {
    :root{
        --Suggestions-Accroche-Nb-Lines: var(--Suggestions-Accroche-Nb-Lines-2);
    }
}

@media (max-width: 900px){
    :root{
        --Suggestions-Title-Nb-Lines: var(--Suggestions-Title-Nb-Lines-2);
    }
}

@media (max-width: 730px) and (min-width: 501px) {
    :root{
        --Suggestions-Accroche-Nb-Lines: var(--Suggestions-Accroche-Nb-Lines-3);
    }
}




/*   ROOT MEDIA SUGGESTIONS INFO TXT (NB LINES) ----------------------------- */

@media (max-width: 1800px) and (min-width: 1441px) {
    :root{
        --Suggestions-Info-Nb-Lines: var(--Suggestions-Info-Nb-Lines-2);
    }
}

@media (max-width: 1440px) and (min-width: 1301px) {
    :root{
        --Suggestions-Info-Nb-Lines: var(--Suggestions-Info-Nb-Lines-1);
    }
}

@media (max-width: 1300px) and (min-width: 1071px) {
    :root{
        --Suggestions-Info-Nb-Lines: var(--Suggestions-Info-Nb-Lines-2);
    }
}

@media (max-width: 1070px) and (min-width: 901px) {
    :root{
        --Suggestions-Info-Nb-Lines: var(--Suggestions-Info-Nb-Lines-1);
    }
}

@media (max-width: 900px) and (min-width: 731px) {
    :root{
        --Suggestions-Info-Nb-Lines: var(--Suggestions-Info-Nb-Lines-2);
    }
}

@media (max-width: 730px) and (min-width: 501px) {
    :root{
        --Suggestions-Info-Nb-Lines: var(--Suggestions-Info-Nb-Lines-3);
    }
}

@media (max-width: 500px) and (min-width: 391px) {
    :root{
        --Suggestions-Info-Nb-Lines: var(--Suggestions-Info-Nb-Lines-2);
    }
}

@media (max-width: 390px) {
    :root{
        --Suggestions-Info-Nb-Lines: var(--Suggestions-Info-Nb-Lines-3);
    }
}

/*   ROOT MEDIA SUGGESTIONS GAP HEIGHT -------------------------------------- */

@media (max-width: 500px) {
    :root{
        --Suggestions-First-Gap-Height: var(--Suggestions-First-Gap-Height-2);
    }
}

/*   ROOT MEDIA SUGGESTIONS BTN CONTAINER HEIGHT ---------------------------- */

@media (max-width: 500px) {
    :root{
        --Suggestions-Btn-Container-Height: var(--Suggestions-Btn-Container-Height-2);
    }
}



/*   --------------- -------------------------------------------------------- */
/*   ROOT MEDIA WARNING ----------------------------------------------------- */
/*   --------------- -------------------------------------------------------- */


/*   ROOT MEDIA WARNING PRINCIPAL CONTAINER (HEIGHT) ------------------------ */

@media (max-width: 1440px) and (min-width: 731px) {
    :root{
        --Warning-Principal-Container-Height: var(--Warning-Principal-Container-Height-2);
    }
}

@media (max-width: 730px) {
    :root{
        --Warning-Principal-Container-Height: var(--Warning-Principal-Container-Height-1);
    }
}


/*   ROOT MEDIA WARNING FULL CONTAINER (WIDTH / HEIGHT) --------------------- */

@media (max-width: 1440px) and (min-width: 731px) {
    :root{
        --Warning-Full-Container-Width: var(--Warning-Full-Container-Width-10);
    }
}

@media (max-width: 730px) {
    :root{
        --Warning-Full-Container-Width: var(--Warning-Full-Container-Width-20);
        --Warning-Full-Container-Height: var(--Warning-Full-Container-Height-20);
    }
}




/*   ROOT MEDIA WARNING CONTAINER (WIDTH) ----------------------------------- */

@media (max-width: 1800px) and (min-width: 1701px) {
    :root{
        --Warning-Container-Width: var(--Warning-Container-Width-2);
    }
}

@media (max-width: 1700px) and (min-width: 1441px) {
    :root{
        --Warning-Container-Width: var(--Warning-Container-Width-3);
    }
}

@media (max-width: 1440px) and (min-width: 1071px) {
    :root{
        --Warning-Container-Width: var(--Warning-Container-Width-4);
    }
}

@media (max-width: 1070px) and (min-width: 731px) {
    :root{
        --Warning-Container-Width: var(--Warning-Container-Width-5);
    }
}

@media (max-width: 730px) and (min-width: 601px) {
    :root{
        --Warning-Container-Width: var(--Warning-Container-Width-6);
    }
}

@media (max-width: 600px) {
    :root{
        --Warning-Container-Width: var(--Warning-Container-Width-7);
    }
}


/*   ROOT MEDIA WARNING INFO (NB LINES) ------------------------------------- */

@media (max-width: 1800px) and (min-width: 1441px) {
    :root{
        --Warning-Info-Nb-Lines: var(--Warning-Info-Nb-Lines-2);
    }
}

@media (max-width: 1440px) and (min-width: 1301px) {
    :root{
        --Warning-Info-Nb-Lines: var(--Warning-Info-Nb-Lines-1);
    }
}

@media (max-width: 1300px) and (min-width: 1071px) {
    :root{
        --Warning-Info-Nb-Lines: var(--Warning-Info-Nb-Lines-2);
    }
}

@media (max-width: 1070px) and (min-width: 901px) {
    :root{
        --Warning-Info-Nb-Lines: var(--Warning-Info-Nb-Lines-1);
    }
}

@media (max-width: 900px) and (min-width: 731px) {
    :root{
        --Warning-Info-Nb-Lines: var(--Warning-Info-Nb-Lines-2);
    }
}

@media (max-width: 730px) {
    :root{
        --Warning-Info-Nb-Lines: var(--Warning-Info-Nb-Lines-1);
    }
}

/*   ROOT MEDIA WARNING INFO (WIDTH) ---------------------------------------- */

@media (max-width: 730px) and (min-width: 601px) {
    :root{
        --Warning-Info-Width: var(--Warning-Info-Width-2);
    }
}

@media (max-width: 600px) {
    :root{
        --Warning-Info-Width: var(--Warning-Info-Width-3);
    }
}



/*   ROOT MEDIA WARNING FULL CONTAINER GAP ---------------------------------- */

@media (max-width: 730px) and (min-width: 501px) {
    :root{
        --Warning-Full-Container-Gap: var(--Warning-Full-Container-Gap-2);
    }
}

@media (max-width: 500px) {
    :root{
        --Warning-Full-Container-Gap: var(--Warning-Full-Container-Gap-3);
    }
}

/*   ROOT MEDIA WARNING CONTAINER GAP --------------------------------------- */

@media (max-width: 500px) {
    :root{
        --Warning-Container-Gap: var(--Warning-Container-Gap-2);
    }
}


/*  ROOT MEDIA WARNING GLOBAL CONTAINER HEIGHT ------------------------------ */

@media (max-width: 730px) {
    :root{
        --Warning-Global-Container-Height: var(--Warning-Global-Container-Height-2);
    }
}


/*  ROOT MEDIA WARNING PRINCIPAL CONTAINER TOP ------------------------------ */

@media (max-width: 730px) {
    :root{
        --Warning-Principal-Container-Top: var(--Warning-Principal-Container-Top-2);
    }
}