.grid:before,
.grid:after,
.grid__row:after
{
    content: ' ';
    display: table;
}

.grid:after,
.grid__row:after
{
    clear: both;
}

.grid,
.grid__row,
.grid [class^="grid__col"],
.grid *
{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.grid
{
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow-x: hidden;
}

.grid__row
{
    margin-left: -15px;
    margin-right: -15px;
}

.grid [class^="grid__col"]
{
    float: left;
    padding: 0 15px;
}

.grid__col-1
{
    width: 8.33333333%;
}

.grid__col-2
{
    width: 16.6666666%;
}

.grid__col-3
{
    width: 24.9999999%;
}

.grid__col-4
{
    width: 33.3333333%;
}

.grid__col-5
{
    width: 41.6666665%;
}

.grid__col-6
{
    width: 50%;
}

.grid__col-7
{
    width: 58.3333331%;
}

.grid__col-8
{
    width: 66.6666664%;
}

.grid__col-9
{
    width: 74.9999997%;
}

.grid__col-9
{
    width: 74.9999997%;
}

.grid__col-10
{
    width: 83.333333%;
}

.grid__col-11
{
    width: 91.6666663%;
}

.grid__col-12
{
    width: 100%;
}

.grid__col-1--offset
{
    margin-left: 8.33333333%;
}

.grid__col-2--offset
{
    margin-left: 16.6666666%;
}

.grid__col-3--offset
{
    margin-left: 24.9999999%;
}

.grid__col-4--offset
{
    margin-left: 33.3333333%;
}

.grid__col-5--offset
{
    margin-left: 41.6666665%;
}

.grid__col-6--offset
{
    margin-left: 50%;
}

.grid__col-7--offset
{
    margin-left: 58.3333331%;
}

.grid__col-8--offset
{
    margin-left: 66.6666664%;
}

.grid__col-9--offset
{
    margin-left: 74.9999997%;
}

.grid__col-9--offset
{
    margin-left: 74.9999997%;
}

.grid__col-10--offset
{
    margin-left: 83.333333%;
}

.grid__col-11--offset
{
    margin-left: 91.6666663%;
}

.grid__col-12--offset
{
    margin-left: 100%;
}