/*  ==========================================================================
    05. TYPOGRAPHY AND COLORS
    ========================================================================== */


/*
    variables
    ====================================

    COLORS
    white           : ffffff
    black           : 000000
    red             : ff0000
    facebook        : 3b5998

    60px = 3.75rem
    48px = 3rem
    36px = 2.25rem
    26px = 1.625rem
    24px = 1.5rem
    21px = 1.3125rem
    18px = 1.125rem
    16px = 1rem
    14px = .875rem
    12px = .75rem
    11px = .69rem
    10px = .63rem

*/


/*
    Font families
    ==================================== */


html, body                  { font: 100%/1.5 'open-sans-n4', 'open-sans', Arial, Tahoma, Helvetica, sans-serif; font-weight: 300; }

/* open-sans */

.ff-osRegular               { font-family: 'open-sans-n4', 'open-sans', Arial, Tahoma, Helvetica, sans-serif; font-style: normal; font-weight: 400; }
.ff-osSemiBold              { font-family: 'open-sans-n6', 'open-sans', Arial, Tahoma, Helvetica, sans-serif; font-style: normal; font-weight: 600; }
.ff-osBold                  { font-family: 'open-sans-n7', 'open-sans', Arial, Tahoma, Helvetica, sans-serif; font-style: normal; font-weight: 700; }


/*
    Typography
    ==================================== */
h1, .h-1                    { font-size: 36px; font-size:  2.25rem;   line-height: 1;       /*36 px*/ margin-bottom: .5em; }
h2, .h-2                    { font-size: 24px; font-size:  1.5rem;    line-height: 1.33333; /*32 px*/ margin-bottom: .5em; }
h3, .h-3                    { font-size: 21px; font-size:  1.3125rem; line-height: 1.14285; /*24 px*/ margin-bottom: .5em; }
h4, .h-4                    { font-size: 18px; font-size:  1.125rem;  line-height: 1.33333; /*24 px*/ margin-bottom: .5em; }
h5, .h-5                    { font-size: 16px; font-size:  1rem;      line-height: 1.5;     /*24 px*/ margin-bottom: .5em; }
h6, .h-6                    { font-size: 14px; font-size:  0.875rem;  line-height: 1.28571; /*18 px*/ margin-bottom: .5em; }
p, .p, ul, ol, dl, table    { font-size: 14px; font-size:  0.875rem;  line-height: 1.28571; /*18 px*/ margin-bottom: .5em; font-weight: 400; }

.fs-xsmall                  { font-size: 10px; /*font-size:  0.63rem; */  line-height: 1.3; text-transform: uppercase; letter-spacing: .1em; }
.fs-small                   { font-size: 12px; /*font-size:  0.75rem; */  line-height: 1.33333; /*16 px*/ }
.fs-large                   { font-size: 30px; font-size:  1.88rem;   line-height: 1.47; }
.fs-xlarge                  { font-size: 40px; font-size:  2.5rem;    line-height: 1; }
.fs-huge                    { font-size: 60px; font-size:  3.75rem;   line-height: 1; }


/*
    Article
*/
.Article p, .Article ul, .Article ol, .Article dl { font-size: 16px; font-size:    1rem;   line-height: 1.625;        /*26 px*/   margin-bottom: 1.625em; color: #444444; }

.Article-content p:first-child { margin-top: 1em; }

.Article h1                 { font-size: 36px; font-size: 2.25rem;   line-height: 1;            /*36 px*/ }
.Article h2                 { font-size: 24px; font-size:  1.5rem;   line-height: 1.5;          /*36 px*/   margin-top: 1em; margin-bottom: .5em; }
.Article h3                 { margin-top: 1em; margin-bottom: .5em; }
.Article h4                 { margin-top: 1em; margin-bottom: .5em; }
.Article h5                 { margin-top: 1em; margin-bottom: .5em; }
.Article h6                 { margin-top: 1em; margin-bottom: .5em; }

.Article li { position: relative; }
ul.Data li  { position: relative; }

.Article ul, ul.Data { counter-reset: ul_list-counter; }
.Article ul li:before, ul.Data li:before { content: '\2022'; font-size: 1.2rem; line-height: 1.4em; position: absolute; left: -0.75em; color: #000; font-weight: bold; }

.Article ol                 { counter-reset: list-counter; }
.Article ol li:before       { content: counter(list-counter, decimal)'.'; counter-increment: list-counter; font-weight: bold; position:absolute; left:-1.5em; }

    .Article ul ul, .Article ol ul, .Article ol ol, .Article ul ol
                            { margin-left: 1.33em; padding-bottom: 0; margin-top: 1em; }



/*
    Links
    ==================================== */
a                           { color: #e60028; text-decoration: none; }
a:hover, a:focus            { color: #9a003a; }
a:active                    { color: #000000; }

    a.c-def                 { color: #000000; }
    a.c-def:hover, a.c-def:focus
                            { color: #e60028; }
    a.c-def:active          { color: #9a003a; }

    a.c-w                   { color: #ffffff; }
    a.c-w:hover, a.c-w:focus
                            { color: #e60028; }
    a.c-w:active            { color: #e60028; }

    a.c-meta                { color: #6a6a6a; }
    a.c-meta:hover, a.c-meta:focus
                            { color: #e60028; }
    a.b-meta:active         { color: #9a003a; }

    a.c-b                   { color: #000000; }
    a.c-b:hover, a.c-b:focus
                            { color: #e60028; }
    a.c-b:active            { color: #9a003a; }

    a.c-info                { color: #f1803c; }
    a.c-info:hover, a.c-info:focus
                            { color: #e60028; }
    a.c-info:active         { color: #9a003a; }

    a.c-error               { color: #000000; }
    a.c-error:hover, a.c-error:focus
                            { color: #007faf; }
    a.c-error:active        { color: #000000; }

    a.c-success             { color: #000000; }
    a.c-success:hover, a.c-success:focus
                            { color: #007faf; }
    a.c-success:active      { color: #000000; }



/*
    Colors
    ==================================== */

.c-def                      { color: #000000; }
.c-w                        { color: #ffffff; }

.c-meta                     { color: #6a6a6a; }
.c-note                     { color: #a9a9a9; }
.c-info                     { color: #f1803c; }
.c-error, .Required         { color: #e2001a; }

.c-success                  { color: #a29a08; }
.c-greatSuccess             { color: #1e900f; }
.c-dark                     { color: #1d1d1b; }

.c-blue                     { color: #273691; }
.c-orange                   { color: #f7941e; }
.c-lightBlue                { color: #00a4e4; }
.c-grey                     { color: #363636; }
.c-lightGrey                { color: #e2e2e2; }


/*
    Backgrounds
    ==================================== */

.bg-1                { background-color: #273691; }
.bg-2                { background-color: #f7941e; }
.bg-3                { background-color: #00a4e4; }
.bg-4                { background-color: #363636; }
.bg-0                { background-color: #e2e2e2; }



/*
    Site Sections
    ==================================== */

/*
    Article
*/
.Article-lead p,
.Article-quote              { font-size: 22px; font-size:  1.25rem;        line-height: 1.454545; /*32 px*/ }

.Article ul    { margin-left: 1em; }
.Article ol { margin-left: 1.5em; }

/*
    Newsletter
*/
.Newsletter-title           { margin-top: 1.125em; }

/*
    Footer
*/
.Footer                     { color: #afaeae; }
    .Copyright              { color: #ffffff; font-weight: bold; }