/*
	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: 10px 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: 768px){
	.title{
	    background: #f3f3f3;
	    padding: 10px 20px;
	}
    .title h3{
        color: #888;
        font-weight: 300;
        font-size: 1em;
    }
	.first_new img{
    display: none;
	}
	.formarea{
		padding-top:1.5em;
	}
    .news_list li a{
        width: 80%;
    }
	.menu .menubar li{
        margin: 0 1%;
	}
	.brands .brand li{
		width: 25%;
	}
	.cont-5 .spe_pro li{
		width:16.66666666%;
	}
    .side_menu li{
    width: 100%;
    }
}

@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: 100%;
        padding: 0;
        /*320*/
    }
    .menu .menubar li{
        margin: 0 1%;
    }
    .show-desktop {
        display: none;
    }
    .hide-desktop {
        display: block;
    }
    .show-tablet {
        display: block;
    }
    .hide-tablet {
        display: none;
    }
    .show-phone {
        display: none;
    }
    .hide-phone {
        display: block;
    }
    .logo{
    	display: none;
    }
    .layout-right-content{
    	background: #f2f2f2;
    }
    .title{
	    background: #ccc;
	    padding: 5px 10px;
	}
	.title h3{
		font-size: 1em;
	   	color: #888;
        font-weight: 200;
	}
    .bg{
		display: none;
	}
    .news_list .date{
        display: none;
    }
	.first_new img{
    	display: block;
	}
    .formarea{
        padding-top:1.5em;
        margin-bottom: 2em;
    }
    .news_list li a{
        width: 100%;
    }
	.first_new p{
		display: none;
	}
	.brands .brand li{
		width: 50%;
	}
	.cont-5 .spe_pro li{
		width:33.33333333%;
	}
    .side_menu li{
    width: 33.33333333%;
    text-align: center;
    }
}

@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%;
        padding: 0;
        /*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;
    }
    .logo{
    	display: none;
    }
    .layout-right-content{
    	background: #f2f2f2;
    }
    .title{
        background: #ccc;
        padding: 5px 10px;
    }
    .title h3{
        font-size: 1em;
        color: #888;
        font-weight: 200;
    }
    .bg{
		display: none;
	}
	.menu .menubar li{
        margin: 0 1%;
    }
    .news_list .date{
        display: none;
    }
	.first_new img{
    	display: block;
	}
    .formarea{
        padding-top:1.5em;
        margin-bottom: 2em;
    }
    .news_list li a{
        width: 100%;
    }
	.first_new p{
		display: none;
	}
	.brands .brand li{
		width: 100%;
	}
	.cont-5 .spe_pro li{
		width:50%;
	}
    .side_menu li{
    width: 33.33333333%;
    text-align: center;
    }
}