/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 09 Oct 2017, 12:11:18 PM
    Author     : jonathan
*/

/* For mobile phones: */
[class*="row"]::after {
    content: "";
    clear: both;
    display: table;
}
[class*="col-"] {
    width: 100%;
}
[class*="col-"] ul {
    width: calc(100% - 40px);
}

.row-1 {height: 8.33%;}
.row-2 {height: 16.66%;}
.row-3 {height: 25%;}
.row-4 {height: 33.33%;}
.row-5 {height: 41.66%;}
.row-6 {height: 50%;}
.row-7 {height: 58.33%;}
.row-8 {height: 66.66%;}
.row-9 {height: 75%;}
.row-10 {height: 83.33%;}
.row-11 {height: 91.66%;}
.row-12 {height: 100%;}

@media only screen and (min-width: 515px) {

    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}

    * {
            box-sizing: border-box;
    }

    [class*="col-"] {
            float: left;
    }
}