/* George 6 frame system */

/*
<div class="grid-container outline">
    <div class="row">
        <div class="col-1"><p>col-1</p></div> 
        <div class="col-1"><p>col-1</p></div> 
        <div class="col-1"><p>col-1</p></div> 
        <div class="col-1"><p>col-1</p></div> 
        <div class="col-1"><p>col-1</p></div> 
        <div class="col-1"><p>col-1</p></div> 
    </div> 
    <div class="row">
        <div class="col-2"><p>col-2</p></div> 
        <div class="col-2"><p>col-2</p></div> 
        <div class="col-2"><p>col-2</p></div> 
    </div> 
    <div class="row">
        <div class="col-3"><p>col-3</p></div> 
        <div class="col-3"><p>col-3</p></div> 
    </div> 
    <div class="row">
        <div class="col-4"><p>col-4</p></div> 
        <div class="col-2"><p>col-2</p></div> 
    </div> 
    <div class="row">
        <div class="col-5"><p>col-5</p></div> 
        <div class="col-1"><p>col-1</p></div> 
    </div> 
    <div class="row">
        <div class="col-6"><p>col-6</p></div> 
    </div> 
</div>
*/

    .grid-container{
        width: 100%; 
        /*max-width: 750px; */ /*1200px*/    
	padding: 0px; 
    }

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

    [class*='col-'] {
        float: left; 
        min-height: 1px; 
        width: 15.66%; 
        /*-- our gutter -- */
	margin: 0px;
        padding: 0; /* was 12px */
        background-color: ;
    }

    .col-1{ max-width: 15.66%;  } /*16.66%*/
    .col-2{ max-width: 32.33%;  } /*33.33%*/
    .col-3{ max-width: 45%;     } /*50%*/
    .col-4{ max-width: 65.66%;  } /*66.66%*/
    .col-5{ max-width: 82.33%;  } /*83.33%*/
    .col-6{ max-width: 99%;     } /*100%*/

    .outline, .outline *{
        outline: 0px solid ; 
    }

    /*-- some extra column content styling --*/
    [class*='col-'] > p {
     background-color: ; 
     padding: 0;
     margin: 0;
     text-align: center; 
     color: black; 
    }
/*
  @media all and (max-width:600px){
        .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:450px){
        .col-1{ width: 50%;     }
        .col-2{ width: 100%;    }
        .col-3{ width: 100%;    }
        .col-4{ width: 100%;    }
        .col-5{ width: 100%;    }
        .col-6{ width: 100%;    }
    }
*/