/* Try full width but not wider than 950px
   if so, center in hte viewport */
.container {
    width: 100%;
    max-width: 950px;
    margin: 0 auto;
}

/* Maybe it would be better use a general class clearfix */
/*
.timeline > .entry:after {
    content: " ";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}
*/

/* Apply clearfix for floating cols */
.row:before,
.row:after,
.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

.col-3 {
    width: 25%;
    float: left;
}

/* Asume 12 cols model grid, so 4 cols is 1/3 width */
.col-4 {
    width: calc(100% / 3);
    float: left;
}

.col-5 {
    /* we can't use nested calc in IE11 :(
       so we make part of calculation
    width: calc(calc(100% * 5) / 12);
    */
    width: calc(500% / 12);
    float: left;
}

.col-6 {
    width: 50%;
    float: left;
}

/* Asume 12 cols model grid, so 8 cols is 1/6 width */
.col-8 {
    width: calc(100% / 1.5);
    float: left;
}

.col-9 {
    width: 75%;
    float: left;
}

.col-12 {
    width: 100%;
    float: left;
}

.col-offset-1 {
    margin-left: calc(100% / 12);
}

/* define some padding to separate columns */
[class*="col-"] {
    padding-left: 1em;
    padding-right: 1em;
}

/* left most column must not have left padding */
[class*="col-"]:first-child, [class*="col-"]:first-of-type {
    padding-left: 0;
}

/* right most column must not have right padding */
[class*="col-"]:last-child, [class*="col-"]:last-of-type {
    padding-right: 0;
}