/*!
 * Gridpak Beta CSS
 *
 * Generator - http://gridpak.com/
 * Created by @simplygoodwork
 */



/* Reusable column setup */
.col {
    border:0 solid rgba(0,0,0,0);
    float:left;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    -webkit-background-clip:padding-box !important;
    background-clip:padding-box !important;
}



    /* 1. 4 Column Grid 0px - Infinity
    -----------------------------------------------------------------------------

    Span 1:    25%
    Span 2:    50%
    Span 3:    75%
    Span 4:    100%

    ----------------------------------------------------------------------------- */

    @media screen and (min-width: 0px) {
        
        .container {
            max-width: 1080px;
            margin: 0 auto;
        }
        
        .row {
            margin-left:-1rem;
        }
        .col {
            border-left-width:1rem;
        	padding:0 0;
        }
        
        /*
        Add your semantic classnames in alongside their corresponding spans here. e.g.

        .span_3,
        .my_semantic_class_name {
            ...
        }
        */

        .span_1 {
            width:25%;
        }
        .span_2 {
            width:50%;
        }
        .span_3 {
            width:75%;
        }
        .span_4 {
            margin-left:0;
            width:100%;
        }
    }

    @media handheld, only screen and (max-width: 767px) {
        
        .span_1, .span_2, .span_3, .span_4 {
            width: 100%;
            margin-bottom: 1rem;
        }
    
    }