/* =============================================================================
   Titan Framework 
   Learn more ~ http://titanthemes.com/

   Licensed under GPL and MIT.
   ========================================================================== */

/* =============================================================================
   Table of contents 
   
   0. General Settings
   1. Base Grid (1024px width screens)
   2. 1280px width 
   3. 1360px width
   4. 1440px width
   5. 1600px width
   6. 1680px width
   7. 1920px width
   8. Tablet (Portrait)
   9. Mobile (Portrait)
   10. Mobile (Landscape)
   11. Margins Adjust Also
   12. Clearing
   
   ========================================================================== */
   
/* =============================================================================
   General Settings
   ========================================================================== */ 
   
body { width: 100%; }
   
/* =============================================================================
   Container
   ========================================================================== */ 

.container_12 { margin-left: auto;  margin-right: auto; }
	
/* =============================================================================
   Grid >> Global 
   ========================================================================== */ 

.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9,
.grid_10, .grid_11, .grid_12 {
  display: inline;
  float: left;
}


/* =============================================================================
   Grid >> Children (Alpha ~ First, Omega ~ Last)
   ========================================================================== */ 

.alpha {
  margin-left: 0 !important;
}

.omega {
  margin-right: 0 !important;
}

/* =============================================================================
   1. Base Grid
   ========================================================================== */ 
   
.container_12 { width: 960px; }   
.container_12 .grid_1 { width: 60px; }
.container_12 .grid_2 { width: 140px; }
.container_12 .grid_3 { width: 220px; }
.container_12 .grid_4 { width: 300px; }
.container_12 .grid_5 { width: 380px; }
.container_12 .grid_6 { width: 460px; }
.container_12 .grid_7 { width: 540px; }
.container_12 .grid_8 { width: 620px; }
.container_12 .grid_9 { width: 700px; }
.container_12 .grid_10 { width: 780px;  }
.container_12 .grid_11 { width: 860px;  }
.container_12 .grid_12 { width: 940px;	margin-top: 20px; }

/* =============================================================================
   8. Tablet (Portrait)
   ========================================================================== */ 
/* For 768px width  */   
@media only screen and (min-width: 768px) and (max-width: 959px) {
	   
.container_12 { width: 768px; }   
.container_12 .grid_1 { width: 28px;  }
.container_12 .grid_2 { width: 76px; }
.container_12 .grid_3 { width: 124px; }
.container_12 .grid_4 { width: 172px; }
.container_12 .grid_5 { width: 220px; }
.container_12 .grid_6 { width: 268px; }
.container_12 .grid_7 { width: 316px; }
.container_12 .grid_8 { width: 364px; }
.container_12 .grid_9 { width: 412px; }
.container_12 .grid_10 { width: 460px; }
.container_12 .grid_11 { width: 508px; }
.container_12 .grid_12 { width: 556px; }

/* `offset Extra Space >> 12 Columns
-------------------------------------------------------------------------------*/

.container_12 .offset_1 { padding-left: 48px;  }
.container_12 .offset_2 { padding-left: 96px; }
.container_12 .offset_3 { padding-left: 144px; }
.container_12 .offset_4 { padding-left: 192px; }
.container_12 .offset_5 { padding-left: 240px;  }
.container_12 .offset_6 { padding-left: 288px; }
.container_12 .offset_7 { padding-left: 336px; }
.container_12 .offset_8 { padding-left: 384px; }
.container_12 .offset_9 { padding-left: 432px; }
.container_12 .offset_10 { padding-left: 480px; }
.container_12 .offset_11 { padding-left: 528px; }

}

/* =============================================================================
   9. Mobile (Portrait)
   ========================================================================== */ 
/* For 320px width  */

@media only screen and (max-width: 767px) {
	   
.container_12 {  width: 300px; }   
.container_12 .grid_1, .container_12 .grid_2, .container_12 .grid_3, .container_12 .grid_4,
.container_12 .grid_5, .container_12 .grid_6, .container_12 .grid_7, .container_12 .grid_8,
.container_12 .grid_9, .container_12 .grid_10, .container_12 .grid_11, .container_12 .grid_12 { 
width: 300px;  
}

/* `offset Extra Space >> 12 Columns
-------------------------------------------------------------------------------*/

.container_12 .offset_1,
.container_12 .offset_2,
.container_12 .offset_3,
.container_12 .offset_4,
.container_12 .offset_5,
.container_12 .offset_6,
.container_12 .offset_7,
.container_12 .offset_8,
.container_12 .offset_9,
.container_12 .offset_10,
.container_12 .offset_11 { 
padding-left: 0; }


}

/* =============================================================================
   10. Mobile (Landscape)
   ========================================================================== */ 
/* For 480px width  */   
   
@media only screen and (min-width: 480px) and (max-width: 767px) {
	   
.container_12 { width: 420px; }   
.container_12 .grid_1, .container_12 .grid_2, .container_12 .grid_3, .container_12 .grid_4,
.container_12 .grid_5, .container_12 .grid_6, .container_12 .grid_7, .container_12 .grid_8,
.container_12 .grid_9, .container_12 .grid_10, .container_12 .grid_11, .container_12 .grid_12 { 
width: 420px;  
}

/* `offset Extra Space >> 12 Columns
-------------------------------------------------------------------------------*/

.container_12 .offset_1,
.container_12 .offset_2,
.container_12 .offset_3,
.container_12 .offset_4,
.container_12 .offset_5,
.container_12 .offset_6,
.container_12 .offset_7,
.container_12 .offset_8,
.container_12 .offset_9,
.container_12 .offset_10,
.container_12 .offset_11,
{ padding-left: 0; }



}

/* =============================================================================
   12. Margins Adjust Also
   ========================================================================== */ 

@media only screen and (max-width: 767px) {
	   
.container_12 {  width: 300px; }   
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8,
.grid_9, .grid_10, .grid_11, .grid_12  { 
margin-right: 0px; margin-left: 0px;   
}

}   

@media only screen and (min-width: 768px) and (max-width: 1407px) {
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8,
.grid_9, .grid_10, .grid_11, .grid_12 {
  margin-left: 10px;
  margin-right: 10px;
}	
}

@media only screen and (min-width: 1408px) and (max-width: 1887px) {
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8,
.grid_9, .grid_10, .grid_11, .grid_12 {
  margin-left: 15px;
  margin-right: 15px;
}	
}

@media only screen and (min-width: 1888px) {
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8,
.grid_9, .grid_10, .grid_11, .grid_12 {
  margin-left: 20px;
  margin-right: 20px;
}
}

/* =============================================================================
   11. Clearing
   ========================================================================== */ 

/* http://sonspring.com/journal/clearing-floats */

.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

.clear20px {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 20px;
}

/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */

.clearfix:before,
.clearfix:after,
.container_12:before,
.container_12:after {
  content: '.';
  display: block;
  overflow: hidden;
  visibility: hidden;
  font-size: 0;
  line-height: 0;
  width: 0;
  height: 0;
}

.clearfix:after,
.container_12:after {
  clear: both;
}

/*
  The following zoom:1 rule is specifically for IE6 + IE7.
  Move to separate stylesheet if invalid CSS is a problem.
*/

.clearfix,
.container_12 {
  zoom: 1;
}