/*
	99Lime.com HTML KickStart by Joshua Gatcke
	kickstart-grids.css
	
	DO NOT EDIT THIS FILE unless you know what you are doing. 
*/
/*---------------------------------
	GRID/COLUMNS
-----------------------------------
	tinyfluidgrid.com
	& girlfriendnyc.com
	with changes by 99Lime
-----------------------------------*/
 /*
 & Columns : 12 
 & Gutter %: 20% 
 & MaxWidth: 1280px
 */
 
 /*.grid{
    max-width:1220px;
    margin:0 auto;
    padding:0 2em;
    }
*/
    
    .grid.flex{
    width:100%;
    max-width:100%;
    padding:0 2%;
    padding:2em;
    }
    
    .row{
    display:block;
    overflow:hidden;
    clear:both;
    }
    
    *[class*="col_"].alpha{margin-left:0;}
    *[class*="col_"].omega{margin-right:0;}
     
    .col_1  { width: 6.6666666666667%; }
    .col_2  { width: 15%; }
    .col_3  { width: 23.333333333333%; }
    .col_4  { width: 31.666666666667%; }
    .col_5  { width: 40%; }
    .col_6  { width: 48.333333333333%; }
    .col_7  { width: 56.666666666667%; }
    .col_8  { width: 65%; }
    .col_9  { width: 73.333333333333%; }
    .col_10 { width: 81.666666666667%; }
    .col_11 { width: 90%; }
    .col_12 { width: 98.333333333333%; }
    
    *[class*="col_"]{
    /*margin-left: 0.83333333333333%;
    margin-right: 0.83333333333333%;
    margin-top:0.5em;
    margin-bottom:0.5em;*/
    float: left;
    display: block;
    }
    
    .grid img{
    max-width: 100%;
    height:auto;
    }
    
    .clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}
    .clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}
    * html .clearfix, *:first-child+html .clearfix{zoom:1}
    
    /* Viewable Grids 
        To view your grids, add the class .visible to any grid container.
        This will add a background color so you can see the layout of your grids. 
    */
    *[class*="col_"].visible{
    background:#eee;
    border:1px dotted #ccc;
    }
    
    
    /*---------------------------------
        Responsive Grid Media Queries - 1280, 1024, 768, 480
        1280-1024 	- desktop (default grid)
        1024-768 	- tablet landscape
        768-480 	- tablet 
        480-less 	- phone landscape & smaller
    -----------------------------------*/
    @media all and (min-width: 1024px) and (max-width: 1280px) {
        
       /* .grid *[class*="col_"]{}*/
        .grid{max-width: 1024px;}
        .show-desktop	{display:block;}
        .hide-desktop	{display:none;}
        .show-tablet	{display:none;}
        .hide-tablet	{display:block;}
        .show-phone		{display:none;}
        .hide-phone		{display:block;}
        
    }
    
    @media all and (min-width: 768px) and (max-width: 1024px) {
        
       /* .grid *[class*="col_"]{}*/
        .grid{max-width: 768px;}
        .show-desktop	{display:none;}
        .hide-desktop	{display:block;}
        .show-tablet	{display:block;}
        .hide-tablet	{display:none;}
        .show-phone		{display:none;}
        .hide-phone		{display:block;}
        
    }
    
    
    @media all and (min-width: 480px) and (max-width: 768px) {
    
        .grid *[class*="col_"]{
        float:none;
        width:auto;
        clear:both;
        display:block;
        }
        
        /* columns inside of columns */
        .grid *[class*="col_"] [class*="col_"]{
        margin-left:0;
        margin-right:0;
        width:100%;
        }
        
        .grid{max-width: 480px;}
        .show-desktop	{display:none;}
        .hide-desktop	{display:block;}
        .show-tablet	{display:block;}
        .hide-tablet	{display:none;}
        .show-phone		{display:none;}
        .hide-phone		{display:block;}
        
    }
    
    @media all and (max-width: 480px) {
        
        .grid *[class*="col_"]{
        float:none;
        width:auto;
        clear:both;
        display:block;
        }
        
        /* columns inside of columns */
        .grid *[class*="col_"] [class*="col_"]{
        margin-left:0;
        margin-right:0;
        width:100%;
        }
        
        .grid{max-width: 100%;/*320*/}
        .show-desktop	{display:none;}
        .hide-desktop	{display:block;}
        .show-tablet	{display:none;}
        .hide-tablet	{display:block;}
        .show-phone		{display:block;}
        .hide-phone		{display:none;}
        
    }
    
    @media only screen and (max-width:479px) {
        .col_6 {
            width: 100%;
        }
    }