File: src/assets/templates/css/hzgrid.css

/*
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 : 4-giu-2016, 17.30.40
    Author     : luca
*/

    .hzgrid-container{
        width: 100%; 
        max-width: 1200px;
        margin: auto;
    }

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

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

    .col-1{ width: 4.166%; }
    .col-2{ width: 8.333%; }
    .col-3{ width: 12.5%;    }
    .col-4{ width: 16.664%; }
    .col-5{ width: 20.833%; }
    .col-6{ width: 25%; }
    .col-7{ width: 29.166%; }
    .col-8{ width: 33.333%; }
    .col-9{ width: 37.5%; }
    .col-10{ width: 41.666%; }
    .col-11{ width: 45.833%; }
    .col-12{ width: 50%; }
    .col-13{ width: 54.166%; }
    .col-14{ width: 58.333%; }
    .col-15{ width: 62.5%; }
    .col-16{ width: 66.666%; }
    .col-17{ width: 70.833%; }
    .col-18{ width: 75%; }
    .col-19{ width: 79.166%; }
    .col-20{ width: 83.333%; }
    .col-21{ width: 87.5%; }
    .col-22{ width: 91.666%; }
    .col-23{ width: 95.833%; }
    .col-24{ width: 100%; }
    

    /*-- some extra column content styling --*/
    [class*='col-'] > p {
        padding: 0;
        margin: 5px;
        vertical-align: middle;
    }
    
    
    
    @media all and (max-width:800px){
        .col-1{ width: 33.33%;    }
        .col-2{ width: 50%;        }
        .col-3{ width: 83.33%;    }
        .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%;    }
    }