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

:root{
    --font: 'Libertad Web MDP', sans-serif;

    /* Colors */
    --color-primary: #00912F;
    --color-primary-20: rgba(0,145,47,.2);
    --color-secondary: #007AFF;
    
    --color-kicker: #074347;

    --color-hover: #007AFF;
    --color-error: #dd3636;
    
    --color-darkest: #000;
    --color-gray: rgba(7,67,71,0.06);
    --color-lightgray: #fafafa;
    --color-lightest: #fff;
    --color-lightest-20: rgba(255,255,255,.2);
    --color-lightest-80: rgba(255,255,255,.8);
    
    --color-violet: #5000FF;
    --color-pink: #FF2E5B;
    --color-darkgreen: #074347;
    --color-lightgreen: #DBE3E3;
    
    /* Gradients */
    
    --gradient-primary: linear-gradient(90deg, rgba(4,193,92,1) 0%, rgba(0,145,47,1) 100%);
    --secondary-primary: linear-gradient(90deg, rgba(0,155,255,1) 0%, rgba(0,122,255,1) 100%);

    /* Contextual */
    
    /* Sizes */
    --space-x: 16px;
    --space-x-n: -16px;
    --space-y: 36px;
    --space-y-md: calc(var(--space-y)*1.5);
    --space-y-lg: calc(var(--space-y)*2);
    --tap-size: 48px;
    --tap-size-half: 24px;
    --header: 70px;
    --header-xs: 55px;
    --wrapper: 1360px;
    --separator: calc(var(--space-y) * 0.6);
    
    /* Transitions */
    --easeOutCubic: cubic-bezier(0.22, 0.61, 0.36, 1);
    --easeInOutCirc: cubic-bezier(0.785, 0.135, 0.150, 0.860);

}


/* ********************** 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;
        
    }

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

    /* VARS */
    
    :root{

    }

}


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

@media (min-width: 980px) {

    :root{
        /* Sizes */
        --space-x: 48px;
    }

}


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

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

}


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

    :root{
        --space-y-md: calc(var(--space-y)*2.5);
        --space-y-lg: calc(var(--space-y)*3);
        --separator: calc(var(--space-y) * 0.8);
    }

}

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

@media (min-width: 1400px) {
    
    :root{
        /* Sizes */
        --space-x: 40px;
        --header: 120px;
    }
}