/* ==========================================================================

   MG Joiners

    - Font Replacement
    - Base styles
    - Main Containing Elements
    - Header
    - Section styling
    - Footer
    - Buttons
    - Font styles
    - List styles
    - Form styles

   ========================================================================== */



/* ===== | Font replacement | =============================================== */
/*
/* ========================================================================== */

@font-face
{
    font-family: 'Proxima Nova';
    src: url('libs/fonts/proximanova-regular-webfont.eot');
    src: url('libs/fonts/proximanova-regular-webfont.eot?#iefix') format('embedded-opentype'), url('libs/fonts/proximanova-regular-webfont.woff') format('woff'), url('libs/fonts/proximanova-regular-webfont.ttf') format('truetype'), url('libs/fonts/proximanova-regular-webfont.svg#proxima_nova_rgregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face
{
    font-family: 'Proxima Nova Bold';
    src: url('libs/fonts/proximanova-bold-webfont.eot');
    src: url('libs/fonts/proximanova-bold-webfont.eot?#iefix') format('embedded-opentype'), url('libs/fonts/proximanova-bold-webfont.woff') format('woff'), url('libs/fonts/proximanova-bold-webfont.ttf') format('truetype'), url('libs/fonts/proximanova-bold-webfont.svg#proxima_novabold') format('svg');
    font-weight: normal;
    font-style: normal;
}


/* ===== | Base styles | ==================================================== */
/*
/* ========================================================================== */

body
{
    font-family: 'Proxima Nova', sans-serif;
    font-weight: normal;
    font-size: 16px;
    line-height: 26px;
    color: #363d3f;
}

html, body
{
    height: 100%;
}

nav ul
{
    margin: 0;
    padding: 0;
}

nav li
{
    list-style: none;
}

a
{
    color: #5a1221;
}

    a:hover
    {
        color: #ca9b72;
    }

h1, h2, h3
{
    font-family: 'Proxima Nova Bold', sans-serif;
    font-weight: normal; /* Set font-weight on H tags to normal to avoid faux bold on ios */
    font-style: normal;
    
}

h1
{
    font-size: 2.250em;
    line-height: 1.111em;
    color: #bf1e2e;
    margin: 0 0 .5em 0;
}

h2
{
    font-size: 1.875em;
    line-height: 1.111em;
}

h3
{
    font-size: 1.125em;
    color: #b0b0b0;
}

hr
{
    border-color: #e6e6e6;
    margin: 3.846em 0;
}

@media screen and (min-width: 768px) {
    h1
    {
        margin-top: .75em;
    }
}


/* ===== | Main Containing Elements | ======================================= */
/*
/* ========================================================================== */

.main-header,
.main-content,
.main-footer
{
    margin: 0 auto;
    max-width: 1280px;
    background-color: #fff;
}

.main-header
{
    background-color: #161616;
}

.main-content
{
    padding: 1.5em 0;
}

.main-footer
{
    background-color: #e1e1e1;
    border-top: 1px solid #b0b0b0;
    padding: 2em 0;
    margin-top: 1em;
}

.container
{
	max-width: 960px;
}

    .fixed .container,
    .container.fixed
    {
        width: 940px;
        margin: 0 auto;
        position: relative;
    }

@media screen and (min-width: 768px) {
    .main-content
    {
        padding: 0;
    }
}


/* ===== | Header | ========================================================= */
/*      
/* ========================================================================== */

.logo
{
    display: block;
    margin-top: 1em;
}

.main-header nav
{
    background-color: #bf1e2e;
}

    .main-header nav li
    {
        display: inline;
        margin: 0;
        padding: 0;
        text-align: center;
    }

    .main-header nav a
    {
        display: block;
        color: #fff;
        font-size: 1.125em;
        line-height: 3em;
        font-family: 'Proxima Nova Bold', sans-serif;
        text-decoration: none;
        text-transform: uppercase;
        border-top: 1px solid #911824;
    }

        .main-header nav a.active
        {
            background-color: #bf1e2e;
            color: white;
        }

        .main-header nav a:hover,
        .main-header nav a:focus
        {
            background-color: #911824;
        }

    .menu-btn
    {
        background-image: url("libs/images/icons/menu-icon.png");
        background-position: 1em center;
        background-repeat: no-repeat;
        background-color: #bf1e2e;
        border: none;
        width: 100%;
        margin: 0;
        text-align: right !important;
    }

    @media screen and (min-width: 768px) {

        .main-menu.collapse
        {
            height: auto;
        }

        .main-header nav
        {
            background-color: #f3f3f3;
        }

        .main-header nav a
        {
            background-color: #bcbdc0;
            border: none;
        }

    }

/* ===== | Section styling | ================================================ */
/*      
/* ========================================================================== */

.content
{
    padding: 0;
}

.lead-image
{
    overflow: hidden;
}

.centered
{
    text-align: center;
}

.box-out
{
    background-color: #bf1e2e;
}

.box-out.alt
{
    background-color: #b0b0b0;
}

    .box-out.pad
    {
        padding: .5em 1em 1em;
    }

@media screen and (min-width: 768px) {
    .content
    {
        padding: 1.5em 0 2.5em;
    }
}

.latest-updates {
    margin: 0;
    padding: 1em;
    text-align: center;
    font-size: 1.5em;
}

.gallery a {
    display: block;
}

/* Services list */

.services-list
{
    margin: 0;
    padding: 0;
}

    .services-list li
    {
        list-style: none;
        color: white;
        display: block;
        padding: 0.625em 1em;
        border-bottom: 1px solid white;
        text-transform: uppercase;;
    }


/* Image panel boxes */

.image-box
{
    position: relative;
    display: block;
    max-height: 250px;
    overflow: hidden;
    margin-bottom: 2%;
}

/* Carousel */

.carousel
{
    border: none;
}

.carousel img
{
    max-width: 100%;
    height: auto;
}

.carousel-control, 
.carousel-control:visited
{
    background-color: rgba(0, 0, 0, 0.7);
    background-position: center center;
    background-repeat: no-repeat;
    border: medium none;
    color: #FFFFFF;
    height: 50px;
    left: 0;
    padding: 0;
    top: 50%;
    width: 50px;
}

.carousel-control:hover, 
.carousel-control:focus
{
    background-color: rgba(0, 0, 0, 0.5);
}

.carousel-control:before
{
    background-image: url("libs/images/icons/carousel-left-arrow.png");
    content: "";
    height: 23px;
    left: 16px;
    position: absolute;
    top: 14px;
    width: 16px;
}

.carousel-control.forward
{
    right: 0;
}

.carousel-control.forward:before
{
    background-image: url("libs/images/icons/carousel-right-arrow.png");
}


/* ===== | Footer | ========================================================= */
/*      
/* ========================================================================== */

footer h1
{
    color: #911824 !important;
}

footer a
{
    color: #bf1e2e;
}

    footer a:hover
    {
        color: #ffffff;
    }

footer .footer-quote
{
    font-size: 1.250em;
    margin: .5em 0;
}

footer .credit
{
    text-transform: uppercase;
}

footer .btn {
    display: inline-block;
}


/* ===== | Buttons | ======================================================== */
/*
/* ========================================================================== */

.btn,
button,
input[type="submit"],
input[type="button"]
{
    color: #ffffff;
    text-decoration: none;
    margin: 1em 0;
    padding: 0.5em 1em; /* padding must be same as form styles */
    font-size: 1.375em;
}

.btn
{
    background-color: #911824;
    border: none;
}

    .btn:hover
    {
        background-color: #bf1e2e;
        color: #ffffff;
    }

.btn.facebook
{
    background-color: #3b5998;
}

    .btn.facebook:hover
    {
        background-color: #496ebb;
    }

footer .btn
{
    margin: 1em;
}

/* ===== | Font styles | =================================================== */
/*
/* ========================================================================== */

.main-header h1
{
    font-size: 1.5em;
    color: white;
    margin-top: .5em;
}

@media screen and (min-width: 768px) {
    .main-header h1
    {
        margin: .75em 0;
    }
}

h1.intro
{
    margin-top: 0;
}

p.lead,
.lead p
{
    font-size: 1.25em;
    line-height: 1.5em;
}

.box-out p
{
    margin-top: 0;
}

.box-out h2,
.box-out h3,
.box-out p
{
    color: #ffffff;
}

.main-footer h1
{
    color: white;
}

aside h3
{
    margin: 1em 0 0;
}

aside p
{
    margin: .5em 0;
}


/* ===== | List styles | ==================================================== */
/*
/* ========================================================================== */

li.reset
{
    margin-left: 0 !important; /* Force margin reset on certain li items */
}

ul.services
{
    margin: 0;
}


/* ===== | Grid adjustments | =============================================== */
/*
/* ========================================================================== */

ul.row
{
    margin: 0;
    padding: 0;
}

@media only screen and (max-width : 600px)
{
    .row.fixed.reset-phone-1 > [class*="column-"]
    {
        width: 100%;
        margin-left: 0;
        left: 0;
    }
}

@media only screen and (min-width : 600px)
{
    .retain-grid [class*="reset"]
    {
        margin-left: 0 !important;
    }
}