body,
p {
	margin: 0;
	padding: 0;
}
.grid-container {
	box-sizing: border-box;
	padding: 10px;
	width : 100%;
	border: 1px solid #999;
}
.grid-container * {
	box-sizing: border-box;
}
/*-- our cleafix hack -- */ 
.row:before, 
.row:after {
    content: "";
    display: table;
    clear: both;
}
[class*='col-'] {
	float: left;
	min-height: 1px; 
	/*-- our gutter --*/
	padding: 10px;
}
p {	
	padding: 20px;
	background-color: #eeeeee; 
    color: #FF004A; 
	border: 1px solid #999;
}

@media screen and (max-width: 768px) {
    .col-sm-1 {
        width: 8.33%; 
    }
    .col-sm-2 {
        width: 16.66%; 
    }
    .col-sm-3 {
        width: 25%; 
    }
    .col-sm-4 {
        width: 33.33%;
    }
    .col-sm-5 {
        width: 41.66%;
    }
    .col-sm-6 {
        width: 50%;
    }
    .col-sm-7 {
        width: 58.33%; 
    }
    .col-sm-8 {
        width: 66.66%; 
    }
    .col-sm-9 {
        width: 75%; 
    }
    .col-sm-10 {
        width: 83.33%;
    }
    .col-sm-11 {
        width: 91.66%;
    }
    .col-sm-12 {
        width: 100%;
    }
}
@media screen and (min-width: 768px) {
	.col-md-1 {
        width: 8.33%; 
    }
    .col-md-2 {
        width: 16.66%; 
    }
    .col-md-3 {
        width: 25%; 
    }
    .col-md-4 {
        width: 33.33%;
    }
    .col-md-5 {
        width: 41.66%;
    }
    .col-md-6 {
        width: 50%;
    }
    .col-md-7 {
        width: 58.33%; 
    }
    .col-md-8 {
        width: 66.66%; 
    }
    .col-md-9 {
        width: 75%; 
    }
    .col-md-10 {
        width: 83.33%;
    }
    .col-md-11 {
        width: 91.66%;
    }
    .col-md-12 {
        width: 100%;
    }
}