/*----------------------------------------------------------------------------------------------------------------*\
Respond is a simple framework that aims to help in creating responsive websites and wireframes by having a fluid 
grid and media queries to resize content and collapse columns on smaller displays.

AUTHOR
Martin Blackburn - www.martinblackburn.co.uk

GITHUB
https://github.com/MartinBlackburn/Respond
\*----------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------*\
    RESET
\*----------------------------------------------------------------------------------------------------------------*/
/*
RESET
PAGE CONTAINERS
MEDIA QUERIES
*/

a, abbr, address, article, aside, audio, b, blockquote, body, canvas, caption, cite, code, dd, del, details, dfn, dl, 
dt, em, fieldset, figcaption, figure, footer, form, header, hgroup, h1, h2, h3, h4, h5, h6, html, i, iframe, img, 
ins, kbd, label, legend, li, mark, menu, nav, object, ol, p, pre, q, samp, section, small, span, strong, sub, summary, 
sup, table, tbody, td, th, thead, time, tfoot, tr, ul, var, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* ----- HTML 5 ----- */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

abbr[title], dfn[title] { 
    border-bottom: 1px dotted #ccc; 
    cursor: help;
}

/* ----- Typography ----- */
strong, mark, b {
    font-weight: bold; 
    font-style: inherit;
}

em, i, cite, q, address, dfn, var {
    font-style: italic; 
    font-weight: inherit;
}

small {
    font-size: 0.75em;
}

del, s { 
    text-decoration: line-through;
}

ins {
    border-bottom: 1px solid #ccc; 
    text-decoration: none;
}

pre, code, kbd, samp {
    font-family: monospace, sans-serif;
}

pre {
    padding: 15px;
    white-space: pre; 
    white-space: pre-wrap; 
    word-wrap: break-word;
}

/* ----- Quotes ----- */
blockquote, q {
    quotes: "" "";
}

blockquote:before, blockquote:after, q:before, q:after { 
    content: "";
}

/* ----- Links, Images & Embedded content----- */
img {
    width: 100%;
    height: auto;
}

:focus {
    outline: 0;
}

.embedContainer {
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; 
    overflow: hidden;   
    position: relative;
}

.embedContainer iframe,
.embedContainer object,
.embedContainer embed {
    width: 100%;
    height: 100%;   
    position: absolute;
    top: 0;
    left: 0;
}

/* ----- Forms ----- */
input {
    line-height: 1em;
}

input, select {
    vertical-align: middle;
}

input, textarea, select, button {
    margin: 0;
}

/* ----- Tables ----- */
table, th, td { 
    border-collapse: collapse;
    border-spacing: 0;
    vertical-align: top;
    text-align: left; 
    font-weight: normal;
}

/* ----- Cursors ----- */
a, button, select {
    cursor: pointer;
}

input, textarea {
    cursor: text;
}

input[type="checkbox"],
input[type="radio"] {
    cursor: pointer;
}

/* ----- Other ----- */
.clear {
    float: none;
    clear: both;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box; 
}





/*----------------------------------------------------------------------------------------------------------------*\
    PAGE CONTAINERS
\*----------------------------------------------------------------------------------------------------------------*/
.content {
    max-width: 980px;
    padding: 0 20px;
    margin: 0 auto;
    
    position: relative;
}

.row {
    width: 100%;
    
    position: relative;
}

.row [class*="column-"] {
    width: 100%;
    min-height: 1px;
    vertical-align: top;
}

.row:after,
.content:after {
    height: 0;
    display: block;
    content: "";
    visibility: hidden;
    clear: both;
}

.row [class*="column-"]:last-child {
    margin-right: 0;
}





/*----------------------------------------------------------------------------------------------------------------*\
    MEDIA QUERIES
\*----------------------------------------------------------------------------------------------------------------*/
/* 768px */
@media all and (min-width: 768px) { 
    .row [class*="column-"] {
        margin-right: 2%;
        float: left;
    }

    .row .column-1 {
        width: 6.5%;
    }
    
    .row .column-2 {
        width: 15%;
    }
    
    .row .column-3 {
        width: 23.5%;
    }
    
    .row .column-4 {
        width: 32%;
    }
    
    .row .column-5 {
        width: 40.5%;
    }
    
    .row .column-6 {
        width: 49%;
    }
    
    .row .column-7 {
        width: 57.5%;
    }
    
    .row .column-8 {
        width: 66%;
    }
    
    .row .column-9 {
        width: 74.5%;
    }
    
    .row .column-10 {
        width: 83%;
    }
    
    .row .column-11 {
        width: 91.5%;
    }
    
    .row .column-12 {
        width: 100%;
        margin-right: 0;
    }
}