@charset "utf-8";
/* Website */

* {box-sizing: border-box;}


/* TYPOGRAPHY */

/* NAVIGATION */
    ul {list-style: none;}

    li {display: inline-block; margin: 0 10px 0 10px; background-color: #aaa; padding: 15px;}
    
/* LAYOUT */

    .one-col {float: left; width: 96%; height: auto; padding: 5px; margin: 2%;}
    .two-col {float: left; width: 46%; height: auto; padding: 5px; margin: 2%;}
    .three-col {float: left; width: 29.33%; height: auto; padding: 5px; margin: 2%}
    .four-col {float: left; width: 21%; height: auto; padding: 5px; margin: 2%}

/* MEDIA QUERY */

    /* x-large */
    @media only screen and (max-width: 1200px) {
    }

    /* large */
    @media only screen and (max-width: 1080px) {
        .four-col { width: 50%;}    
    }

    /* x-small */
    @media only screen and (max-width: 576px) {
        .two-col {width: 100%;}
        .three-col {width: 100%;}
        .four-col { width: 100%;}
    }