/*
    Colours - Custom:


    Fonts - Custom (HF&J):


*/

/*  --------------------------------------------------------------
        Custom Font Set-up
    -------------------------------------------------------------- */

    @font-face {
        font-family: KievitWeb-Light;
        src: url("../fonts/KievitWeb-Light.eot");
    }
    @font-face {
        font-family: KievitWeb-Light;
        src: url("../fonts/KievitWeb-Light.woff") format("woff");
    }


/*  --------------------------------------------------------------
        Extend / Override Defaults
    -------------------------------------------------------------- */

    body                        { background-color: #000; font-family: KievitWeb-Light, Helvetica, Arial, Verdana, sans-serif; font-weight: 300; color: #fff; }

    a[href^=tel]                { color: inherit; text-decoration:none; }

    h1, h2, h3                  { font-family: KievitWeb-Light, Helvetica, Arial, Verdana, sans-serif; font-weight: 300; text-shadow: 1px 1px 30px #000; }
    h1                          { color: #fff; font-size: 32px; line-height: 42px; margin-top: 25px; }
    h2                          { font-size: 18px; text-transform: uppercase; color: #fff; border-top: 1px solid #fff; padding: 10px 0 0 25px; margin-top: 0; font-weight: 300; }
    h2:hover                    { cursor: pointer; }


/*  --------------------------------------------------------------
        Navigation Styles
    -------------------------------------------------------------- */

    a                           { color: #fff; text-decoration: none; }
    a:hover                     { color: #fff; text-decoration: none; }


/*  --------------------------------------------------------------
        Layout Styles
    -------------------------------------------------------------- */

    .wrapper                    { width: 100%; margin: 0; padding: 0; }
    .logo                       { width: 380px; height: 140px; margin-top: 30px; margin-left: -145px; }
    .red                        { background: transparent url(/img/red.png) repeat-y; margin-top: 50px; background-position: top -500px; }
    .menu                       { position: absolute; bottom: 60px; width: 100%; }
    .transp                     { margin: 0; padding: 20px 25px; position: fixed; bottom: 100px;
                                    background:rgb(0,0,0);
                                    background: transparent\9;
                                    background: rgba(0,0,0,0.75); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#bf000000,endColorstr=#bf000000);
                                    zoom: 1; }
    .transp:nth-child(n)        { filter: none; }
    .transp *                   { color: #fff; margin-bottom: 0; }


/*  --------------------------------------------------------------
        Screen Overrides
    -------------------------------------------------------------- */

    /* Large desktop */
    @media (min-width: 1200px) {
        .transp                      { width: 295px; }
    }

    /* Regular desktop + Tablet Landscape */
    @media (min-width: 992px) and (max-width: 1199px) {
        .transp                     { width: 240px; padding: 15px 20px; }
        h1                          { font-size: 26px; line-height: 36px; }
        h2                          { padding: 10px 0 0 20px; }
    }

    /* Portrait tablet */
    @media (min-width: 768px) and (max-width: 991px) {
        h2                          { padding: 10px 0 0 10px; }
        .transp                     { width: 220px; padding: 5px 10px 10px 10px; }
    }

    /* Phones */
    @media (max-width: 767px) {
        h1                          { font-size: 18px; line-height: 28px; }
    }