/*********************************************************************************************

Project : rwdg- responsive grid system for your next project
URI: http://rwdgrid.com/
Version: 2.0
Author: Vineeth G S 
Author URI: http://www.gsvineeth.com
Github URI: https://github.com/gsvineeth/rwdgrid/

**********************************************************************************************

1.  Base code            
2.  Mobile Grid 
3.  Grid 720px+
4.  Grid 1024px+
5.  Grid 1200px+
6.  Helper classes

**********************************************************************************************/


/********************************************************************************************* 
1.  Base code            
*********************************************************************************************/

[class^='g-'] {
	float: left;
	padding: 10px;
	width:100%;
	box-sizing:border-box;}
 
.clear-grid{
	clear:both;
	float:inherit;}

.row{
	margin:0 -10px;}

/********************************************************************************************* 
2.  Mobile Grid 
*********************************************************************************************/

.g-mv-12 {
	width: 100%;}
	
.g-mv-11 {
	width: 91.666663%;}
	
.g-mv-10 {
	width: 83.33%;}
	
.g-mv-9 {
	width: 74.999997%;}
	
.g-mv-8 {
	width: 66.66666664%;}
	
.g-mv-7 {
	width: 58.333%;}
	
.g-mv-6 {
	width: 50%;}
	
.g-mv-5 {
	width: 41.6665%;}
	
.g-mv-4 {
	width: 33.33%;}
	
.g-mv-3 {
	width: 24.99%;}
	
.g-mv-2 {
	width: 16.66666%;}
	
.g-mv-1 {
	width: 8.33%;}

/********************************************************************************************* 
2.  Grid 640px+ 手機橫式
*********************************************************************************************/
@media only screen and (min-width: 640px) {
	
.g-ml-12 {
	width: 100%;}
	
.g-ml-11 {
	width: 91.666663%;}
	
.g-ml-10 {
	width: 83.33%;}
	
.g-ml-9 {
	width: 74.999997%;}
	
.g-ml-8 {
	width: 66.66666664%;}
	
.g-ml-7 {
	width: 58.333%;}
	
.g-ml-6 {
	width: 50%;}
	
.g-ml-5 {
	width: 41.6665%;}
	
.g-ml-4 {
	width: 33.33%;}
	
.g-ml-3 {
	width: 24.99%;}
	
.g-ml-2 {
	width: 16.66666%;}
	
.g-ml-1 {
	width: 8.33%;}

}

/********************************************************************************************* 
3.  Grid 767px+ 平板直式 
*********************************************************************************************/

@media only screen and (min-width: 767px) {   
.g-tv-12 {
	width: 100%;}
	
.g-tv-11 {
	width: 91.666663%;}
	
.g-tv-10 {
	width: 83.33%;}
	
.g-tv-9 {
	width: 74.999997%;}
	
.g-tv-8 {
	width: 66.66666664%;}
	
.g-tv-7 {
	width: 58.333%;}

.g-tv-6 {
	width: 50%;}

.g-tv-5 {
	width: 41.6665%;}

.g-tv-4 {
	width: 33.33%;}

.g-tv-3 {
	width: 24.99%;}

.g-tv-2 {
	width: 16.66666%;}

.g-tv-1 {
	width: 8.33%;}

}

/********************************************************************************************* 
4.  Grid 960px+ 平板直式，優先使用
*********************************************************************************************/

@media only screen and (min-width: 960px) {    
.g-12 {
	width: 100%;}
	
.g-11 {
	width: 91.666663%;}
	
.g-10 {
	width: 83.33%;}
	
.g-9 {
	width: 74.999997%;}
	
.g-8 {
	width: 66.66666664%;}
	
.g-7 {
	width: 58.333%;}

.g-6 {
	width: 50%;}

.g-5 {
	width: 41.6665%;}

.g-4 {
	width: 33.33%;}

.g-3 {
	width: 24.99%;}

.g-2 {
	width: 16.66666%;}

.g-1 {
	width: 8.33%;}
}	
	
/********************************************************************************************* 
5.  Grid 1024px+ 平板橫
*********************************************************************************************/

@media only screen and (min-width: 1024px) {
.g-tl-12 {
	width: 100%;}

.g-tl-11 {
	width: 91.666663%;}

.g-tl-10 {
	width: 83.33%;}

.g-tl-9 {
	width: 74.999997%;}

.g-tl-8 {
	width: 66.66666664%;}

.g-tl-7 {
	width: 58.333%;}

.g-tl-6 {
	width: 50%;}

.g-tl-5 {
	width: 41.6665%;}

.g-tl-4 {
	width: 33.33%;}

.g-tl-3 {
	width: 24.99%;}

.g-tl-2 {
	width: 16.66666%;}

.g-tl-1 {
	width: 8.33%;}

}

/********************************************************************************************* 
6.  Grid 1200px+
*********************************************************************************************/
	
@media only screen and (min-width: 1200px) {

.g-d-12 {
	width: 100%;}

.g-d-11 {
	width: 91.666663%;}

.g-d-10 {
	width: 83.33%;}

.g-d-9 {
	width: 74.999997%;}

.g-d-8 {
	width: 66.66666664%;}

.g-d-7 {
	width: 58.333%;}

.g-d-6 {
	width: 50%;}

.g-d-5 {
	width: 41.6665%;}

.g-d-4 {
	width: 33.33%;}

.g-d-3 {
	width: 24.99%;}

.g-d-2 {
	width: 16.66666%;}

.g-d-1 {
	width: 8.33%;}

}

/********************************************************************************************* 
6.  Helper classes
*********************************************************************************************/
img.rwd{
	max-width: 100%;
	height: auto;}