* {
box-sizing: border-box;
}

.twocolumns {
    float: left;
    width: 50%;
    padding: 8px;
	border: 1px solid rgb(142, 134, 134);
}
.threecolumns {
    float: left;
    width: 33.3%;
    padding: 8px;
	border: 1px solid rgb(142, 134, 134);
}
.threeqcolumns{
    float: left;
    width: 75%;
    padding: 8px;
	border: 1px solid rgb(142, 134, 134);
}
.fourcolumns{
    float: left;
    width: 25%;
    padding: 8px;
	border: 1px solid rgb(142, 134, 134);
}
.fivecolumns{
    float: left;
    width: 20%;
    padding: 4px;
	border: 1px solid rgb(142, 134, 134);
}
.twothirdcolumns{
    float: left;
    width: 66.7%;
    padding: 8px;
	border: 1px solid rgb(142, 134, 134);










.col-container {
display: table;
width: 100%;
}
.coltc {
display: table-cell;
padding: 16px;
border: 1px solid rgb(142, 134, 134);
}

@media only screen and (max-width: 600px) {
.coltc {
display: block;
width: 100%;
border: 1px solid rgb(142, 134, 134);
}
}

.color1 {
  background-color: rgb(200,200,200);
}
.color2 {
  background-color: rgb(220,200,200);
}
.color3 {
  background-color: rgb(220,220,200);
}
.color4 {
  background-color: rgb(220,220,220);
}





@media only screen and (max-width: 600px) {
    .twocolumns, .threecolumns, .fourcolumns {
        width: 100%;
    }
}