/***********************************************
************ Dinvy Custom Variables ************
***********************************************/
:root {
    /** Measures **/
    --width: 1366px;
    --full: 100%;
    --half: 50%;
    --quarter: 25%;
    --s-spacing: 1rem;
    --m-spacing: 2rem;
    --l-spacing: 3rem;
    --xl-spacing: 4rem;
    --xxl-spacing: 5rem;
    --xxxl-spacing: 6rem;
    --padding: 0;
    --padding-full: var(--l-spacing) 0;
    /* Colors */
    --dinpurple: #481786;
    --dinviolet: #9822d0;
    --dinorange: #ee8300;
    --dinwhite: #f2f2f2;
    --dinblack: #242725;
    --full-gradient: linear-gradient(180deg, #242725 0%, #260858 38%, #491788 75%);
    --footer-gradient: linear-gradient(180deg, #9822D0 0%, #6020CA 28%, #190B6F 56%, #242725 100%);
    --full-gradient-alt: linear-gradient(230deg, #9822D0 17%, #541DBA 55%, #1D135B 93%);
    --purple-gradient: linear-gradient(180deg, #242725 0%, #260858 62%, #491788 100%);
    --purple-gradient-alt: linear-gradient(270deg, #242725 0%, #260858 62%, #491788 100%);
    --violet-gradient: linear-gradient(180deg, #9822D0 0%, #541DBA 100%);
    --violet-gradient-bar: linear-gradient(90deg, #9822D0 0%, #541DBA 100%);
    /* Shadows */
    --box-shadow: 4px 4px 10px 2px rgba(0, 0, 0, 0.10);
    --box-shadow-alt: 0px -10px 10px 0px rgba(0, 0, 0, 0.25);

    /*** Fonts ***/
    /* Families */
    --work: "Work Sans", sans-serif;
    --source: "Source Sans 3", sans-serif;
    --roboto: "Roboto Slab", serif;
    /* Sizes */
    --h1: 5vw;
    --h2: 3.646vw;
    --h3: 3.333vw;
    --h4: 2.5vw;
    --smalltext: 0.875rem;
    --bodytext: 1rem;
    --text: 1.25rem;
    --largetext: 1.5rem;
    --bigtext: 2rem;
    --boldtext: 6.66667vw;
    --buttonsmall: 1rem;
    --button: 1.25rem;
    --buttonbig: 1.5rem;
    --blocknav: 1rem;
    --alt-title: 1.875vw;
    /* --strokewidth: 1px; */
    /* Line heights */
    --lh: 1em;
    --lh-1: 1.1em;
    --lh-2: 1.2em;
    --lh-3: 1.3em;
    --lh-4: 1.4em;
    --lh-5: 1.5em;
    --lh-l: 2em;
    --lh-n : .9em;
    /* Font weight */
    --thin: 100;
    --extralight: 200;
    --light: 300;
    --regular: 400;
    --medium: 500;
    --semibold: 600;
    --bold: 700;
    --extrabold: 800;
    --black: 900;
}

/*************************************************/
/******************* > Full HD *******************/
/*************************************************/

@media (min-width: 1921px) {
    :root {
        /* Sizes */
        --h1: 6rem;
        --h2: 4rem;
        --h3: 3.5rem;
        --h4: 3rem;
        --alt-title: 2.25rem;
        --boldtext: 8rem;
    }
}

/**********************************************/
/******************* Laptop *******************/
/**********************************************/
@media (max-width: 1366px) {
    p {
        margin-bottom: 0.75rem;
    }

    :root{
        /** Measures **/
        --width: 1140px;
        /* Sizes */
        --h2: 4.65vw;
        --alt-title: 2.5vw;
    }
}

/**********************************************/
/******************* Tablet *******************/
/**********************************************/
@media (max-width: 1024px) {
    :root{
        /** Measures **/
        --width: var(--full);
        --padding: 0 2rem;
        --padding-full: var(--m-spacing);
        /* Sizes */
        --h1: 6vw;
        --h2: 4.3752vw;
        --h3: 4vw;
        --h4: 3vw;
        --text: 1.125rem;
        --largetext: 1.375rem;
        --bigtext: 1.75rem;
        --blocknav: 1.25rem;
        --alt-title: 1.5rem;
        --boldtext: 8vw;
        /* Font weight */
        --extralight: var(--light);
    }

    h1, h2, h3, h4, h5, h6 {
        line-height: var(--lh-2) !important;
    }

    .row-reverse {
        flex-direction: column-reverse !important;
    }
    
}

/**********************************************/
/******************* Mobile *******************/
/**********************************************/
@media (max-width: 767px) {
    :root{
        /** Measures **/
        --width: var(--full);
        --padding: 0 1rem;
        --padding-full: var(--m-spacing) var(--s-spacing);
        /* Sizes */
        --h1: 8.425vw;
        --h2: 7.5vw;
        --h3: 6vw;
        --h4: 3.75vw;
        --text: 1.125rem;
        --largetext: 1.25rem;
        --bigtext: 1.5rem;
        --blocknav: 1.125rem;
        --alt-title: 1.375rem;
        --boldtext: 12.25vw;
    }
}