/*
* Quantum Framework
*
* 960px - 12 Columns - 20px Gutter
*
* Designed and built by Andrei Mititelu
* http://CommerceStrategist.com
*
*/


/* ==========================================================================
   960px - 12 columns - 20px gutter   
   ========================================================================== */

   /* Container */ 
   .container-12 { width: 915px; margin: 0 auto; } 

   /* Global */ 
   [class*="grid-"] { float: left; display: inline; margin-left: 0px; margin-right: 0px; } 
   .group:before, .group:after { content: ""; display: table; line-height: 0; } 
   .group:after { clear: both; } 

   /* Nested elements */ 
   .alpha { margin-left: 0px; } 
   .omega { margin-right: 0px; } 

   /* Grids */ 
   .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: 915px; }

   /* Offset Extra Space */ 
   .container-12 .offset-1 { padding-left: 80px; }
   .container-12 .offset-2 { padding-left: 160px; }
   .container-12 .offset-3 { padding-left: 240px; }
   .container-12 .offset-4 { padding-left: 320px; }
   .container-12 .offset-5 { padding-left: 400px; }
   .container-12 .offset-6 { padding-left: 480px; }
   .container-12 .offset-7 { padding-left: 560px; }
   .container-12 .offset-8 { padding-left: 640px; }
   .container-12 .offset-9 { padding-left: 720px; }
   .container-12 .offset-10 { padding-left: 800px; }
   .container-12 .offset-11 { padding-left: 880px; }

/* ==========================================================================
   960px - 12 columns - 20px gutter    <-----------   Este
   ========================================================================== */

   /* Container */ 
   .container-12 { width: 915px; margin: 0 auto; } 

   /* Global */ 
   [class*="grid-"] { float: left; display: inline; margin-left: 0px; margin-right: 0px; } 
   .group:before, .group:after { content: ""; display: table; line-height: 0; } 
   .group:after { clear: both; } 

   /* Nested elements */ 
   .alpha { margin-left: 0px; } 
   .omega { margin-right: 0px; } 

   /* Grids */ 
   .container-12 .grid-1 {  width: 65px; }
   .container-12 .grid-2 {  width: 130px; }
   .container-12 .grid-3 {  width: 220px; }
   .container-12 .grid-4 {  width: 330px; }
   .container-12 .grid-5 {  width: 370px; }
   .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: 740px; }
   .container-12 .grid-11 {  width: 840px; }
   .container-12 .grid-12 {  width: 915px; }

   /* Offset Extra Space */ 
   .container-12 .offset-1 { padding-left: 80px; }
   .container-12 .offset-2 { padding-left: 160px; }
   .container-12 .offset-3 { padding-left: 240px; }
   .container-12 .offset-4 { padding-left: 320px; }
   .container-12 .offset-5 { padding-left: 400px; }
   .container-12 .offset-6 { padding-left: 480px; }
   .container-12 .offset-7 { padding-left: 560px; }
   .container-12 .offset-8 { padding-left: 640px; }
   .container-12 .offset-9 { padding-left: 720px; }
   .container-12 .offset-10 { padding-left: 800px; }
   .container-12 .offset-11 { padding-left: 880px; }

/* ==========================================================================
   768px - 12 columns - 20px gutter 
   ========================================================================== */

   @media (min-width: 768px) and (max-width: 979px) { 

   /* Container */ 
   .container-12 { width: 708px; margin: 0 auto; } 

   /* Global */ 
   [class*="grid-"] { float: left; display: inline; margin-left: 0px; margin-right: 0px; } 
   .group:before, .group:after { content: ""; display: table; line-height: 0; } 
   .group:after { clear: both; } 
   
   

   /* Nested elements */ 
   .alpha { margin-left: 0px; } 
   .omega { margin-right: 0px; } 

   /* Grids */ 
   .container-12 .grid-1 {  width: 44px; }
   .container-12 .grid-2 {  width: 107px; }
   .container-12 .grid-3 {  width: 172px; }
   .container-12 .grid-4 {  width: 236px; }
   .container-12 .grid-5 {  width: 300px; }
   .container-12 .grid-6 {  width: 364px; }
   .container-12 .grid-7 {  width: 428px; }
   .container-12 .grid-8 {  width: 492px; }
   .container-12 .grid-9 {  width: 556px; }
   .container-12 .grid-10 {  width: 620px; }
   .container-12 .grid-11 {  width: 684px; }
   .container-12 .grid-12 {  width: 768px; }

   /* Offset Extra Space */ 
   .container-12 .offset-1 { padding-left: 64px; }
   .container-12 .offset-2 { padding-left: 128px; }
   .container-12 .offset-3 { padding-left: 192px; }
   .container-12 .offset-4 { padding-left: 256px; }
   .container-12 .offset-5 { padding-left: 320px; }
   .container-12 .offset-6 { padding-left: 384px; }
   .container-12 .offset-7 { padding-left: 448px; }
   .container-12 .offset-8 { padding-left: 512px; }
   .container-12 .offset-9 { padding-left: 576px; }
   .container-12 .offset-10 { padding-left: 640px; }
   .container-12 .offset-11 { padding-left: 704px; }

   }

/* ==========================================================================
   Mobile 
   ========================================================================== */

   @media only screen  and (max-width: 765px) {

  .group { margin-bottom: 15px;}
  
   /* Container */
   .container-12 { width: auto; }

   /* Global */
   [class*="grid-"] { display: block; margin-left: 0px; margin-right: 0px; }

   /* Nested Elements */
   .alpha { margin-left: 0px; }
   .omega { margin-right: 0px; }

   /* Grids */
   .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: 430px; }

   /* Offset Extra Space */
   .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; }

   }
   
   @media only screen  and (max-width: 480px) {

  .group { margin-bottom: 15px;}
  
   /* Container */
   .container-12 { width: auto; }

   /* Global */
   [class*="grid-"] { display: block; margin-left: 0px; margin-right: 0px; }

   /* Nested Elements */
   .alpha { margin-left: 0px; }
   .omega { margin-right: 0px; }

   /* Grids */
   .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: 320px; }

   /* Offset Extra Space */
   .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; }

   }