/*
=================================================
SUTRACTOR DESIGN SYSTEM
=================================================
*/


/*=================================================
FUENTES
=================================================*/

@font-face {
    font-family: 'Avenir Next Rounded';
    src: url('../fonts/AvenirNextRoundedStd-Reg.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Avenir Next Rounded';
    src: url('../fonts/AvenirNextRoundedStd-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Avenir Next Rounded';
    src: url('../fonts/AvenirNextRoundedStd-Med.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Avenir Next Rounded';
    src: url('../fonts/AvenirNextRoundedStd-MedIt.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Avenir Next Rounded';
    src: url('../fonts/AvenirNextRoundedStd-Demi.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Avenir Next Rounded';
    src: url('../fonts/AvenirNextRoundedStd-DemiIt.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'Avenir Next Rounded';
    src: url('../fonts/AvenirNextRoundedStd-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Avenir Next Rounded';
    src: url('../fonts/AvenirNextRoundedStd-BoldIt.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}


/*=================================================
VARIABLES DEL TEMA
=================================================*/

:root{

    /*====================================
    COLORES
    ====================================*/

    --color-primary:#20B2AA;
    --color-primary-hover:#23928B;

    --color-secondary:#FF8C00;
    --color-secondary-hover:#D0730D;

    --color-text:#1A1A1A;
    --color-text-light:#696969;

    --color-white:#FFFFFF;
    --color-background:#FBFBFB;

    --color-card:#EFEFEF;

    --color-footer:#252525;
    --color-footer-bottom:#111111;

    --overlay:rgba(0,0,0,.45);


    /*====================================
    TIPOGRAFÍA
    ====================================*/

    --font-family:'Avenir Next Rounded',sans-serif;

    --font-h1:50px;
    --font-h2:20px;
    --font-h3:18px;

    --font-body:16px;
    --font-menu:18px;
    --font-button:18px;
    --font-footer:12px;

    --weight-regular:400;
    --weight-medium:500;
    --weight-semibold:600;
    --weight-bold:700;


    /*====================================
    CONTENEDORES
    ====================================*/

    --container:1440px;

    --header-width:1200px;


    /*====================================
    ESPACIADOS
    ====================================*/

    --space-xs:10px;
    --space-sm:20px;
    --space-md:30px;
    --space-lg:40px;
    --space-xl:60px;
    --space-section:120px;


    /*====================================
    BORDES
    ====================================*/

    --radius-sm:8px;
    --radius-md:14px;
    --radius-lg:18px;
    --radius-xl:22px;
    --radius-full:999px;


    /*====================================
    SOMBRAS
    ====================================*/

    --shadow-header:0 8px 25px rgba(0,0,0,.08);

    --shadow-card:0 10px 30px rgba(0,0,0,.12);


    /*====================================
    TRANSICIONES
    ====================================*/

    --transition:all .3s ease;

}