/* LAYOUT */

.wrapper {
    margin-top: 50px
}

.col {
    display: block;
    float: left;
    margin: 0 0 1em 0; /* 0 0 23px 0 */
    position: relative;
}

    .col:last-child {
        margin-bottom: 0
    }

    .col.span12 {
        margin-bottom: 0;
    }

.section {
    clear: both
}

.group:before,
.group:after {
    content: "";
    display: table;
}

.group:after {
    clear: both;
}


.container {
    padding: 0 1.3em; /* 23px */
    max-width: 1024px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

    /* CONTAINER ADD-ONS
--------------------------------- */
    /* Add ".row" for top and bottom padding to ".container" */
    .container.row {
        padding-top: 7%;
        padding-bottom: 7%;
        height: 100%;
    }

        /* Add "max1200" to increase max-width of ".container" */
        .container.row.max1200 {
            padding: 7%;
            max-width: 1200px
        }

    /* Add ".box" to ".container" when creating a box for extra padding */
    .container.box {
        padding: 7%
    }

/* SECTION SPLITTING
--------------------------------- */

/* To split a <section>, add the class "col" (plus the span number)*/
.sectionHalf .col {
    margin-right: 0;
    margin-bottom: 0
}

.sectionHalf {
    width: 100%;
    margin-bottom: 0;
}

/* CALLOUT BANDS 
--------------------------------- */
/* add a background colour class */
.calloutBand {
    max-width: 768px;
    margin: 0 auto;
    text-align: center;
}

/* COLUMN WIDTHS
--------------------------------- */
.span1,
.span2,
.span3,
.span4,
.span5,
.span6,
.span7,
.span8,
.span9,
.span10,
.span11,
.span12 {
    width: 100%;
}

/* TOP IMAGES 
--------------------------------- */
.featImgInner {
    max-width: 100%;
    float: none;
}

    .featImgInner h1 {
        margin-bottom: 0
    }

/* Inner images */
.topImg {
    min-height: 150px
}
/* Must be the same height as '.fadedBlack' in 'properties.css' */
.topImgInner {
    width: 90%;
}

/* Shared styles */
.featImgInner,
.topImgInner {
    color: #fff;
    margin: 0 auto;
    text-align: center;
}

    .featImgInner h1,
    .topImgInner h1 {
        font-size: 40px
    }

    .featImgInner p,
    .topImgInner p {
        text-align: center;
        font-weight: 400
    }

    /* Adds space betweem the header and the button on the home page*/
    .featImgInner button.outline {
        margin-top: 1.556em;
    }
/* 28px */

.hiringCoach p {
    font-weight: 400
}

/* FOOTER
--------------------------------- */
footer {
    float: left;
    width: 100%;
    border-top: solid 1px #e1e1e1;
    overflow: hidden;
}



    footer .container {
        padding-top: 1em;
        padding-bottom: 1em;
    }



    footer p {
        font-size: 0.889em
    }
/* 16px */



/*

----------------------------------- 

MIN-WIDTH 768px 

----------------------------------- 

*/

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

    .wrapper {
        margin-top: 80px
    }



    .col {
        margin: 0 6% 0 0;
    }

        .col:last-child {
            margin-right: 0;
        }



    .span12 {
        width: 100%;
    }

    .span11 {
        width: 91.16%;
    }

    .span10 {
        width: 82.33%;
    }

    .span9 {
        width: 73.5%;
    }

    .span8 {
        width: 64.66%;
    }

    .span7 {
        width: 55.83%;
    }

    .span6 {
        width: 47%;
    }

    .span5 {
        width: 38.16%;
    }

    .span4 {
        width: 29.33%;
    }

    .span3 {
        width: 20.5%;
    }

    .span2 {
        width: 11.66%;
    }

    .span1 {
        width: 2.833%;
    }



    .container {
        padding: 0 2.778em
    }
        /* 0 50px */

        .container.box {
            padding: 2.778em
        }
    /* 0 50px */



    .sectionHalf {
        width: 50%;
    }

        .sectionHalf.col {
            margin-right: 0;
        }

        .sectionHalf .container.row {
            width: 100%;
            max-width: 480px;
            float: right;
        }



    footer .container {
        padding-bottom: 1em
    }
    /* 18px */



    .featImgInner h1 {
        font-size: 3.333em
    }
    /* 60px */

}





/*

----------------------------------- 

MIN-WIDTH 1024px 

----------------------------------- 

*/

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

    /* Home page */

    .featImg {
        min-height: 500px
    }



    .featImgInner p {
        text-align: right;
    }



    /* Inner pages */

    .topImg {
        min-height: 300px
    }

    .topImgInner {
        width: 50%
    }

        .topImgInner h1 {
            font-size: 3.889em
        }
    /* 70px */



    .container.row.max1200 {
        padding: 2.778em;
    }
    /* 50px */



    .container.row {
        padding-top: 2.778em; /* 50px */
        padding-bottom: 2.778em /* 50px */
    }
}



/*

----------------------------------- 

MIN-WIDTH 1200px 

----------------------------------- 

*/

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

    .container.row {
        padding-left: 0;
        padding-right: 0
    }



    footer .container {
        padding: 1em 0;
    }
    /* 18px 0 */

}