/* Layout Rules */

/* Base */
* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

*::before,
*::after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

/* Grid */
.container {
    position: relative;

    width: 980px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 20px;
    padding-left: 20px;

    *zoom: 1;
}

.container::before,
.container::after {
    line-height: 0;

    display: table;

    content: '';
}

.container::after {
    clear: both;
}

.row {
    margin-right: -20px;
    margin-left: -20px;

    *zoom: 1;
}

.row::before,
.row::after {
    line-height: 0;

    display: table;

    content: '';
}

.row::after {
    clear: both;
}

*[class^='col'] {
    position: relative;

    float: left;

    min-height: 1px;
    padding-right: 20px;
    padding-left: 20px;
}

.col {
    width: 50%;
}

.col-1 {
    width: 33.333333333%;
}

.col-2 {
    width: 66.666666666%;
}

.col-3 {
    width: 100%;
}