.grid-container{
    width: 100%;
    max-width: 1200px;
}

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

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

.col-1{ width: 10%; }
.col-1-5{ width: 15% }
.col-2{ width: 20%; }
.col-3{ width: 30%; }
.col-3-3{ width: 33% }
.col-3-5{ width: 35% }
.col-4{ width: 40%; }
.col-4-5{ width: 45%;}
.col-5{ width: 50%; }
.col-6{ width: 60%; }
.col-7{ width: 70%; }
.col-8{ width: 80%; }
.col-9{ width: 90%; }
.col-10{ width: 100%;}
.col-12 { width: 120%;}

.outline, .outline *{
    outline: 1px solid #F6A1A1;
}

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

@media all and (max-width:800px){
    .col-1{ width: 50%;        }
    .col-2{ width: 20%;    }
    .col-2-5{ width: 25% }
    .col-3{ width: 30%;    }
    .col-3-5 {width: 35% }
    .col-4{ width: 40%;    }
    .col-4-5{width: 45% }
    .col-5{ width: 100%;    }
    .col-6{ width: 60%;      }
    .col-7{ width: 100%;    }
    .col-8{ width: 100%;    }
    .col-9{ width: 100%;    }
    .col-10{ 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: 20%;    }
    .col-2-5{ width: 25% }
    .col-3{ width: 30%;    }
    .col-3-5 {width: 35% }
    .col-4{ width: 40%;    }
    .col-4-5{width: 45% }
    .col-5{ width: 100%;    }
    .col-6{ width: 50%;      }
    .col-7{ width: 100%;    }
    .col-8{ width: 100%;    }
    .col-9{ width: 100%;    }
    .col-10{ width: 100%;      }
}