/* * * * * * * * * * * * * * * * * * * */
/* * * * * * * * * * * * * * * * * * * */
/* * * * * * FICHEIRO ALTERADO * * * * */
/* * * * * * * * * * * * * * * * * * * */
/* * * * * * * * * * * * * * * * * * * */

/* ELEMENTS */
.container{
    box-sizing: border-box;
    margin: 0 auto;
}
.container:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

/* 2 COLUMNS */
.double_col{
    overflow: hidden;
}
.double_col > .col{
    width: 47.5%;
    float: left;
    margin-bottom: 50px;
    box-sizing: border-box;
    display: block;
}
@media all and (min-width: 651px){
    .double_col > .col:nth-child(even){
        float: right;
    }
    .double_col > .col:nth-child(odd){
        clear: both;
    }
    .double_col > .col:nth-last-child(-n+2){
        margin-bottom: 0;
    }
}

/* 3 COLUMNS */
.triple_col{
    overflow: hidden;
}
.triple_col > .col{
    width: 30%;
    float: left;
    margin-right: 5%;
    margin-bottom: 50px;
    box-sizing: border-box;
    display: block;
}
@media all and (min-width: 851px){
    .triple_col > .col:nth-child(3n+3){
        margin-right: 0;
    }
    .triple_col > .col:nth-child(3n+4){
        clear: both;
    }
    .triple_col > .col:nth-last-child(-n+3){
        margin-bottom: 0;
    }
}

/* 4 COLUMNS */
.quad_col{
    overflow: hidden;
}
.quad_col > .col{
    width: 21.25%;
    float: left;
    margin-right: 5%;
    margin-bottom: 50px;
    box-sizing: border-box;
    display: block;
}
@media all and (min-width: 851px){
    .quad_col > .col:nth-child(4n+4){
        margin-right: 0;
    }
    .quad_col > .col:nth-child(4n+5){
        clear: both;
    }
    .quad_col > .col:nth-last-child(-n+4){
        margin-bottom: 0;
    }
}

/* 5 COLUMNS */
.penta_col{
    overflow: hidden;
}
.penta_col > .col{
    width: 17.6%;
    float: left;
    margin-right: 3%;
    margin-bottom: 30px;
    box-sizing: border-box;
    display: block;
}
@media all and (min-width: 851px){
    .penta_col > .col:nth-child(5n+5){
        margin-right: 0;
    }
    .penta_col > .col:nth-child(5n+6){
        clear: both;
    }
    .penta_col > .col:nth-last-child(-n+5){
        margin-bottom: 0;
    }
}



/* * * GRID SYSTEM * * */

/* 1/5 COLUMN */
.col1{
    width: 16%;
    float: left;
    margin-right: 5%;
    box-sizing: border-box;
    display: block;
    overflow: hidden;
}
.col1:last-child{
    margin-right: 0;
}

/* 2/5 COLUMN */
.col2{
    width: 37%;
    float: left;
    margin-right: 5%;
    box-sizing: border-box;
    display: block;
    overflow: hidden;
}
.col2:last-child{
    margin-right: 0;
}

/* 3/5 COLUMN */
.col3{
    width: 58%;
    float: left;
    margin-right: 5%;
    box-sizing: border-box;
    display: block;
    overflow: hidden;
}
.col3:last-child{
    margin-right: 0;
}

/* 4/5 COLUMN */
.col4{
    width: 79%;
    float: left;
    margin-right: 5%;
    box-sizing: border-box;
    display: block;
    overflow: hidden;
}
.col4:last-child{
    margin-right: 0;
}


/* * * RESPONSIVE * * */
@media all and (max-width: 850px){
    /* 3 COLUMNS GO TO 1 */
    .triple_col > .col{
        width: 100%;
        margin-right: 0;
    }
    .triple_col > .col:last-child{
        margin-bottom: 0;
    }

    /* 4 COLUMNS GO TO 2 */
    .quad_col > .col{
        width: 47.5%;
        margin-right: 0;
    }
    @media all and (min-width: 651px){
        .quad_col > .col:nth-child(even){
            float: right;
        }
        .quad_col > .col:nth-child(odd){
            clear: both;
        }
        .quad_col > .col:nth-last-child(-n+2){
            margin-bottom: 0;
        }
    }

    /* 5 COLUMNS GO TO 2*/
    .penta_col > .col{
        width: 47.5%;
        margin-right: 0;
    }
    .penta_col > .col:nth-child(even){
        float: right;
    }
    .penta_col > .col:nth-child(odd){
        clear: both;
    }
    .penta_col > .col:nth-last-child(-n+2){
        margin-bottom: 0;
    }

    /* * * GRID SYSTEM * * */
    .col1{
        width: 100%;
        margin-right: 0;
        margin-bottom: 50px;
    }
    .col1:last-child{
        margin-bottom: 0;
    }

    .col2{
        width: 100%;
        margin-right: 0;
        margin-bottom: 50px;
    }
    .col2:last-child{
        margin-bottom: 0;
    }

    .col3{
        width: 100%;
        margin-right: 0;
        margin-bottom: 50px;
    }
    .col3:last-child{
        margin-bottom: 0;
    }

    .col4{
        width: 100%;
        margin-right: 0;
        margin-bottom: 50px;
    }
    .col4:last-child{
        margin-bottom: 0;
    }

    .col5{
        width: 100%;
        margin-right: 0;
        margin-bottom: 50px;
    }
    .col5:last-child{
        margin-bottom: 0;
    }
}

@media all and (max-width: 650px){
    /* 2 COLUMNS GO TO 1 */
    .double_col > .col{
        width: 100%;
        margin-right: 0;
    }
    .double_col > .col:last-child{
        margin-bottom: 0;
    }

    /* 4 COLUMNS GO TO 1 */
    .quad_col > .col{
        width: 100%;
        margin-right: 0;
    }
    .quad_col > .col:last-child{
        margin-bottom: 0;
    }

    /* 5 COLUMNS GO TO 1*
    .penta_col > .col{
        width: 100%;
        margin-right: 0;
    }
    .penta_col > .col:last-child{
        margin-bottom: 0;
    }*/
}




/* * * * * * * * * * *     **     * * * * * * * * * */
/* * * * * * * * * * * CHANGE LOG * * * * * * * * * */
/* * * * * * * * * * *     **     * * * * * * * * * */
/* 1.1
- overflow: hidden added to .double_col .triple_col .quad_col .penta_col
- add .container element
*/
/* 1.1.1
- minor bug fixes of nested cols
*/
/* 1.2
- change of structure to fix nested elements
*/
/* 1.2.1
- removed -webkit- and -moz- from box-sizing. No needed anymore
*/
/* 1.2.2
- fixed double_col min-width style
*/
