/* VARS */

:root{
    --font: 'Roboto', sans-serif;

    /* Colors */
    --color-primary: #0D0564;
    --color-primary-light: #3272F0;
    --color-cta: #21A35B;
    --color-secondary: #21A35B;
    
    --color-hover: #33CAFF;
    --color-hover-10: rgba(51,202,255,0.1);
    --color-hover-15: rgba(51,202,255,0.15);
    --color-hover-30: rgba(51,202,255,0.3);
    
    --color-darker: #010101;
    --color-dark: #595959;
    --color-dark-0: rgba(89, 89, 89, 0);
    --color-dark-10: rgba(89, 89, 89, 0.1);
    --color-dark-50: rgba(89, 89, 89, 0.5);
    --color-grey: #9a9a9a;
    --color-lighter: #f5f5f5;
    --color-lightest: #fff;
    --color-lightest-0: rgba(255,255,255,0);
    
    /* Sizes */
    --space-x: 24px;
    --space-x-n: -24px;
    --space-y: 32px;
    --space-y-lg: 64px;
    --tap-size: 48px;
    --tap-size-half: 24px;
    --header: 80px;

    /* Transitions */
    --easeOutCubic: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (max-width: 360px){
    :root{
        --space-x: 16px;
        --space-x-n: -16px;
        --space-y: 24px;
        --space-y-lg: 48px;
    }
}





/* ********************** TALL MOBILE PORTRAIT ********************** */

@media (max-width: 767px) and (min-height: 730px){
}





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

@media (min-width: 768px) {
    
    :root{
        --space-x: 32px;
        --space-x-n: -32px;
        --space-y: 48px;
        --space-y-lg: 80px;
    }

}
@media (min-width: 768px) and (max-width: 979px){
}




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

@media (min-width: 980px) {
}




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

@media (min-width: 1200px) {

    :root{
        --space-x: 80px;
        --space-x-n: -80px;
    }

}
@media (min-width: 1200px) and (min-height: 790px){
    
    :root{
        --space-y: 64px;
        --space-y-lg: 128px;
    }
    
}




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

@media (min-width: 1400px) {
    
    /* :root{
        --space-x: 134px;
        --space-x-n: -134px;
    } */

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




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

@media (min-width: 1600px) {
    
    :root{
        /* --space-x: 180px;
        --space-x-n: -180px; */
        --space-x: 134px;
        --space-x-n: -134px;
    }

}
@media (min-width: 1600px) and (min-height: 790px){
}
@media (min-width: 1600px) and (min-height: 900px){

    :root{
        --space-y: 72px;
        --space-y-lg: 174px;
    }

}

@media (min-width: 1800px){

    :root{
        --space-x: 180px;
        --space-x-n: -180px;
    }

}




/* ********************** 4K ********************** */

@media (min-width: 2048px) {

    :root{
        --space-x: 320px;
        --space-x-n: -320px;
    }

}