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

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}


/* Small screens and above (default) */

html {
    font-size: 90%;
}

body {
    background-color: #ddd;
    color: #454546;
    /*font-family: 'Open Sans', sans-serif;*/
    /*font-family: 'Roboto', sans-serif;*/
}


.container {
    margin: 106px auto 0 auto;
    /*max-width: 74rem;
    width: 90%;*/
}

.column {
    padding: 0;
    max-width: 1500px;
}

.column.four {
    width:100%;
}

.column.four img {
    width:85%;
}

@media only screen and (min-device-width : 768px) {
    .column.four {
        width:33.3%;
    }
}

/* Medium screens and above */

@media (min-width: 40rem) {
    /*.column {
        float: left;
    } */
    .column.twelve {
        width: 100%;
    }
    .column.eleven {
        width: 91.66%;
    }
    .column.ten {
        width: 83.33%;
    }
    .column.nine {
        width: 75%;
    }
    .column.eight {
        width: 66.66%;
    }
    .column.seven {
        width: 58.33%;
    }
    .column.six {
        width: 50%;
    }
    .column.five {
        width: 41.66%;
    }
    .column.four {
        width: 33.33%;
        float: left;
    }
    .column.three {
        width: 25%;
    }
    .column.two {
        width: 16.66%;
    }
    .column.one {
        width: 8.33%;
    }
    .column.flow-opposite {
        float: right;
    }
}


/* Large screens */

@media (min-width: 50rem) {
    html {
        font-size: 90%;
    }
}