/* ******************************************** */
/** SETTINGS: VARIABLES
/* ******************************************** */

:root{
    --font: 'SaaSeriesCDOT', sans-serif;
    --font-secondary: 'SaaSeriesDDOT', var(--font);
    --font-tertiary: 'SaaSeriesFDOT', var(--font);
    --font-quaternary: 'Saa Series A D OT', var(--font);
    /* Colors */
    --color-primary: #4472C5;
    --color-primary-brighter: #4F85D6;
    --color-secondary: #223C6D;
    --color-secondary-rgb: 34 60 109;
    --color-yellow: #ffcc22;
    --color-express: #8859d6;
    --color-coffee: #b28360;
    
    --color-hover: var(--color-yellow);
    --color-active: #cd9811;
    --color-error: #E0002B;
    --color-error-bg: #fff7f8;
    --color-success: #41C044;
    --color-success-bg: #f3fcf5;
    --color-pending: #f4c955;
    --color-pending-bg: #fffff7;
    
    --color-darkest: #181818;
    --color-darkest-rgb: 24 24 24;
    --color-lightest: #fff;
    --color-lightest-rgb: 255 255 255;
    --color-lighter: #F0F1F3;
    
    --color-bgblue: #292826;
    --color-bgblue-rgb: 41 40 38;
    --color-deepblue: #121932;
    --color-deepblue-rgb: 18 25 50;
    --color-footer: #172133;
    --color-gold: #A08C73;
    --color-gray: #9C9FAB;
    --color-gray-rgb: 156 159 171;
    --color-lightgray: #BDC0C7;
    --color-skyblue-rgb: 180 190 209;
    


    /* Gradients */

    --bg-gradient: linear-gradient(225deg, rgba(0,0,0,0) 20%, rgba(0,0,0,1) 100%);
    
    /* Sizes */
    --space-x: 16px;
    --space-x-n: calc(var(--space-x)*-1);
    --space-y: 24px;
    --space-y-md: calc(var(--space-y)*1.5);
    --space-y-lg: calc(var(--space-y)*2);
    --tap-size: 48px;
    --tap-size-xs: 40px;
    --header: 70px;
    --header-xs: 60px;
    --header-top: 42px;
    --header-brand: 70px;
    --wrapper: 1440px;
    --wrapper-xs: 1000px;
    --wrapper-xxs: 900px;
    --separator: calc(var(--space-y) * 0.8);
    
    /* Transitions */
    --easeOutCubic: cubic-bezier(0.22, 0.61, 0.36, 1);
    --easeInOutCirc: cubic-bezier(0.785, 0.135, 0.150, 0.860);

}



@media (min-width: 375px) {
    
    :root{
        --space-x: 22px;
    }
    
}


/* ********************** MOBILE LANDSCAPE ********************** */

@media (orientation: landscape) and (min-width: 500px) and (max-width: 767px) {

    :root{

    }

}


/* ********************** de Mobile a TABLET ********************** */

@media (min-width: 768px) {

    /* VARS */
    
    :root{
        /* Sizes */
        --space-x: 24px;
        --space-y: 30px;
    }

}
@media (min-width: 768px) and (orientation: portrait) {

    /* VARS */
    
    :root{

    }

}


/* ********************** de Tablet a DESKTOP ********************** */

@media (min-width: 980px) {

    :root{
        /* Sizes */
        --space-x: 32px;
        /*--header: 110px;*/
        --header: 96px;
        --header-xs: 90px;
        --header-brand: 75px;
    }

}


/* ********************** de Desktop a DESKTOP 2 ********************** */

@media (min-width: 1200px) {
    
    :root{
        /* Sizes */
        --space-x: 52px;
    }

}


@media (min-width: 1200px) and (min-height: 790px){

    :root{
    }

}

/* ********************** de Desktop 2 a HD ********************** */

@media (min-width: 1400px) {
    
    :root{
        /* Sizes */
        --space-x: 60px;
        --space-y: 45px;
        --header: 100px;
        --header-xs: 96px;
        --header-brand: 90px;
        
    }
}


/* ********************** de Hd a FULL HD ********************** */

@media (min-width: 1600px) {
    
    :root{
        /* Sizes */
        --header-brand: 95px;
        
    }
}