* {box-sizing: border-box;}



.grid-container{
    width: 100%; 
   max-width: 960px;
    margin-left: auto;
    margin-right: auto;
} 

/*-- our cleafix hack -- */ 
.row:before, 
.row:after {
    content:"";
    display: table ;
    clear:both;
}

[class*='col-'] {
    float: left; 
    min-height: 1px; 
    width: 16.66%; 
    /*-- our gutter -- */ 
    padding: 10px; 
}

.col-1{ width: 16.66%; }
.col-2{ width: 33.33%; }
.col-3{ width: 50%;    }
.col-4{ width: 66.66%; }
.col-5{ width: 83.33%; }
.col-6{ width: 100%;   }

.outline, .outline *{
    outline: 1px solid inherit; 
}


/*-- some extra column content styling --*/
[class*='col-'] > p { 
 padding: 0;
 margin: 0;
 text-align: center; 
 color: black;
}


/*-- Responsive part --*/

@media all and (max-width:800px){
    .col-1{ width: 33.33%;  }
    .col-2{ width: 50%;     }
    .col-3{ width: 100%;    }
    .col-4{ width: 100%;    }
    .col-5{ width: 100%;    }
    .col-6{ width: 100%;    }

    .row .col-2:last-of-type{
        width: 100%; 
    }

    .row .col-5 ~ .col-1{
        width: 100%; 
    }
}


@media all and (max-width:650px){
    .col-1{ width: 50%;     }
    .col-2{ width: 100%;    }
    .col-3{ width: 100%;    }
    .col-4{ width: 100%;    }
    .col-5{ width: 100%;    }
    .col-6{ width: 100%;    }
}

@media all and (max-width:450px){
    .col-1{ width: 100%;    }
    .col-2{ width: 100%;    }
    .col-3{ width: 100%;    }
    .col-4{ width: 100%;    }
    .col-5{ width: 100%;    }
    .col-6{ width: 100%;    }
}