/**********************************************
* 1180px CSS Grid System - 1180px.com
* Version: 1.1.1
* by Chris Blackwell / chrisblackwell.me
**********************************************/

.page-container {
    width: 1180px;
    margin: 0 auto;
}
.flexbox {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
}

.row {
    margin: 1em 0;
}
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Sets default values on all columns */
[class*="span"] {
    margin-left: 2%;
    float: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
[class*="span"]:first-child {
    margin-left: 0;
}

.prototype [class*="span"] {
    background: #ececec;
    border-radius: 4px;
    padding: 15px;
    text-align: center;
}

.span1 {
    width: 6.5%;
}
.span2 {
    width: 15%;
}
.span3 {
    width: 23.5%;
}
.span4 {
    width: 32%;
}
.span5 {
    width: 40.5%;
}
.span6 {
    width: 49%;
}
.col7 {
    width: 57.5%;
}
.span8 {
    width: 66%;
}
.span9 {
    width: 74.5%;
}
.span10 {
    width: 83%;
}
.span11 {
    width: 91.5%;
}
.span12 {
    width: 100%;
    float: none;
}

/**********************************
* Smaller Screens
**********************************/
@media only screen and (max-width : 1200px) {
    .page-container {
        width: 960px;
    }
}

/**********************************
* Tablets
**********************************/
@media only screen and (max-width : 990px) {
    .page-container {
        width: 738px;
    }
}

/**********************************
* Mobile Devices
* - All columns are full width
**********************************/
/* Extra Small Devices, Phones */
@media only screen and (max-width : 767px) {
    .page-container {
        width: 96%;
    }
    .row {
        margin: 0;
    }
    [class*="span"] {
        margin: 15px 0;
        float: none;
        width: 100%;
    }
    .flexbox {
        display: block;
    }
}