/* Table of Contents
==================================================
    #Base 1200 Grid
	#Base 960 Grid
    #Tablet (Portrait)
    #Mobile (Portrait)
    #Mobile (Landscape)
    #Clearing */


/* #Base 1200 Grid
================================================== */

    .container                                  { position: relative; width: 1200px; margin: 0 auto; padding: 0;}
	.container-common                           { position: relative; width: 1200px; margin: 0 auto; padding: 0;}
    .column, .columns                           { float: left; display: inline; margin-left: 5px; margin-right: 5px; line-height: 0; }

	.column, .columns 							{ padding-bottom: 10px; }
	
    /* Base Grid */
     .one.column                      { width: 90px;  }
     .two.columns                     { width: 190px; }
     .three.columns                   { width: 290px; }
     .four.columns                    { width: 390px; }
     .five.columns                    { width: 490px; }
     .six.columns                     { width: 590px; }
     .seven.columns                   { width: 690px; }
     .eight.columns                   { width: 790px; }
     .nine.columns                    { width: 890px; }
     .ten.columns                     { width: 990px; }
     .eleven.columns                  { width: 1090px; }
     .twelve.columns                  { width: 1190px; }
	
	.container .landscape, .container .portrait { position: relative; overflow: hidden; text-align: center; line-height: 0; }


/* #Base 960
================================================== */

    /* Note: Design for a width of 960px */

    @media only screen and (min-width: 960px) and (max-width: 1250px) {
        .container                                  { width: 960px; }
		.container-common                                  { width: 960px; }
         .column,
         .columns                         { margin-left: 0px; margin-right: 0px;  }
        

         .one.column                      { width: 70px; }
         .two.columns                     { width: 150px; }
         .three.columns                   { width: 230px; }
         .four.columns                    { width: 310px; }
         .five.columns                    { width: 390px; }
         .six.columns                     { width: 470px; }
         .seven.columns                   { width: 550px; }
         .eight.columns                   { width: 630px; }
         .nine.columns                    { width: 710px; }
         .ten.columns                     { width: 790px; }
         .eleven.columns                  { width: 870px; }
         .twelve.columns                  { width: 950px; }

       
    }
	

/* #Tablet (Portrait)
================================================== */

    /* Note: Design for a width of 768px */

    @media only screen and (min-width: 768px) and (max-width: 959px) {
        .container                                  { width: 768px; }
		.container-common                                  { width: 730px; }
         .column,
         .columns                         { margin-left: 5px; margin-right: 5px;  }
        
         .one.column                      { width: 40px; }
         .two.columns                     { width: 104px; }
         .three.columns                   { width: 168px; }
         .four.columns                    { width: 232px; }
         .five.columns                    { width: 296px; }
         .six.columns                     { width: 100%; }
         .seven.columns                   { width: 424px; }
         .eight.columns                   { width: 488px; }
         .nine.columns                    { width: 552px; }
         .ten.columns                     { width: 616px; }
         .eleven.columns                  { width: 680px; }
         .twelve.columns                  { width: 744px; }

		
	}
	

/*  #Mobile (Portrait)
================================================== */

    /* Note: Design for a width of 320px */

    @media only screen and (max-width: 767px) {
        .container { width: 300px; }
		.container-common { width: 300px; }
        .columns, .column { margin: 0; padding-bottom: 10px; }

         .one.column,
         .two.columns,
         .three.columns,
         .four.columns,
         .five.columns,
         .six.columns,
         .seven.columns,
         .eight.columns,
         .nine.columns,
         .ten.columns,
         .eleven.columns,
         .twelve.columns,
         .thirteen.columns,
         .fourteen.columns,
         .fifteen.columns,
         .sixteen.columns,
         .one-third.column,
         .two-thirds.column  { width: 300px; }

    }


/* #Mobile (Landscape)
================================================== */

    /* Note: Design for a width of 480px */

    @media only screen and (min-width: 480px) and (max-width: 767px) {
        .container { width: 420px; }
		.container-common { width: 420px; }
        .columns, .column { margin: 0; padding-bottom: 0px; }

         .one.column,
         .two.columns,
         .three.columns,
         .four.columns,
         .five.columns,
         .six.columns,
         .seven.columns,
         .eight.columns,
         .nine.columns,
         .ten.columns,
         .eleven.columns,
         .twelve.columns{ width: 420px; }
	
    }
	
	/*========================================================================================
==========================================MEDIA QUERIES===================================
============================================================================================*/

@media only screen and (min-width: 2401px) and (max-width: 2560px)  {
	.container { width: 2400px;}
}
@media only screen and (min-width: 2201px) and (max-width: 2400px) {
	.container { width: 2100px; }
}
@media only screen and (min-width: 1921px) and (max-width: 2200px) {
	.container { width: 1800px; }
}
@media only screen and (min-width: 1601px) and (max-width: 1920px) {
	.container { width: 1500px; }
}
@media only screen and (min-width: 1401px) and (max-width: 1600px) {
	.container { width: 1200px; }
}
@media only screen and (min-width: 1251px) and (max-width: 1400px) {
	.container { width: 1200px; }
}